Simple Partials with Tailwind Styles

[devlinjunker]

Description

Started messing around with simple handlebars partials and helpers.

Added (checkbox) partial with:

• params based on current state
• params for defining the color of the checkbox
• svg icon to stylize checkbox vs use the default browser checkbox

Also needed to add new handlebar helper for handling default values, this lets us stylize the checkbox using basic black/white unless the dev adds custom styles with color and bg-color params

Related

11

12

Visual

small checkbox:

Questions

• [x] set style based on app defaults instead of making the dev specify each time see https://github.com/devlinjunker/template.webpack.fend/issues/24
• [x] sizing?
  • should we use separate partial for sm/md/lg checkboxes?
  • see https://github.com/devlinjunker/template.webpack.fend/pull/23#issuecomment-629589181
  • ended up doing a little bit with size property on checkbox partial

TODO

• [x] PR Body
• [x] Updated READMEs

[devlinjunker]

Handlebars may not be great for this interactive user interface component use case....

From the handlebars docs: https://handlebarsjs.com/installation/when-to-use-handlebars.html

• Not great for Event handling, but good for templating:
  • email contents
  • CLI-apps
  • non-HTML text content
  • server-side rendering of pure contents.
• UI Framework ideas:
  • Angular
  • Aurelia
  • Ember
  • Inferno
  • Mithril
  • Svelte
  • Ractive
  • React
  • Vue

[devlinjunker]

seems like ember uses handlebars templates: https://guides.emberjs.com/v3.3.0/templates/handlebars-basics/

It was on the list of event based frameworks (in prev comment) and also was mentioned when researching logical helpers (eq, noteq etc..): https://github.com/jmurphyau/ember-truth-helpers

[devlinjunker]

sizing seems complicated... if we add size property we also need to add https://github.com/jmurphyau/ember-truth-helpers to handlebars so we can check if size == 'sm' etc...

Need to think about:

• Checkbox height/width (different based on .checkbox-label css class?)
• clickable label text size?
• icon height?

[devlinjunker]

sizing seems complicated... if we add size property we also need to add https://github.com/jmurphyau/ember-truth-helpers to handlebars so we can check if size == 'sm' etc...

I was able to do this with a simple {{#if size}} ... {{/if}} check for both size = sm and lg