prettier

zestia · Dec 7, 2019 · 8ef8ebb · 8ef8ebb
1 parent f741fe2
commit 8ef8ebb
Show file tree

Hide file tree

Showing 33 changed files with 274 additions and 164 deletions.
diff --git a/README.md b/README.md
@@ -83,6 +83,8 @@ To create _your own_ select box, make a new component that renders a select box:
 </div>
 ```
 
+...as you can see, apart from being able to select a value - this addon does very little out of the box! It's up to _you_ to use the API to add the layer of behaviour that you require.
+
 ## Docs
 
 - [List of components and their arguments](docs/components.md)

diff --git a/addon/templates/components/native-select-box.hbs b/addon/templates/components/native-select-box.hbs
@@ -1,19 +1,25 @@
 <select
+  class={{this.className}}
+  multiple={{this.isMultiple}}
+  ...attributes
   {{did-insert this.handleInsertElement}}
   {{will-destroy this.handleDestroyElement}}
   {{on "change" this.handleChange}}
-  class={{this.className}}
-  multiple={{this.isMultiple}}
-  ...attributes>
-  {{#let (hash
-    Option=(component "native-select-box/option"
-      selectBox=this
-      classNamePrefix=@classNamePrefix
-      _onDestroy=this.handleDestroyOption
-      _onInit=this.handleInitOption)
-    Group=(component "native-select-box/group"
-      classNamePrefix=@classNamePrefix)
-  ) as |components|}}
+>
+  {{#let
+    (hash
+      Option=(component
+        "native-select-box/option"
+        selectBox=this
+        classNamePrefix=@classNamePrefix
+        _onDestroy=this.handleDestroyOption
+        _onInit=this.handleInitOption
+      )
+      Group=(component
+        "native-select-box/group" classNamePrefix=@classNamePrefix
+      )
+    ) as |components|
+  }}
     {{yield (merge components this.api)}}
   {{/let}}
 </select>
diff --git a/addon/templates/components/native-select-box/group.hbs b/addon/templates/components/native-select-box/group.hbs
@@ -1,5 +1,3 @@
-<optgroup
-  class={{concat this.className "__group"}}
-  ...attributes>
+<optgroup class={{concat this.className "__group"}} ...attributes>
   {{yield}}
 </optgroup>
diff --git a/addon/templates/components/native-select-box/option.hbs b/addon/templates/components/native-select-box/option.hbs
@@ -1,9 +1,10 @@
 <option
-  {{did-insert this.handleInsertElement}}
-  {{will-destroy this.handleDestroyElement}}
   class={{concat this.className "__option"}}
   selected={{this.isSelected}}
   value={{this.resolvedValue}}
-  ...attributes>
+  ...attributes
+  {{did-insert this.handleInsertElement}}
+  {{will-destroy this.handleDestroyElement}}
+>
   {{~yield this.api~}}
 </option>
diff --git a/addon/templates/components/select-box.hbs b/addon/templates/components/select-box.hbs
@@ -1,11 +1,5 @@
 {{! template-lint-disable no-positive-tabindex }}
 <div
-  {{did-insert this.handleInsertElement}}
-  {{will-destroy this.handleDestroyElement}}
-  {{on "focusin" this.handleFocusIn}}
-  {{on "focusout" this.handleFocusOut}}
-  {{on "keydown" this.handleKeyDown}}
-  {{on "keypress" this.handleKeyPress}}
   aria-expanded={{if this.isOpen "true" "false"}}
   aria-busy={{if this.isBusy "true" "false"}}
   aria-disabled={{if this.isDisabled "true" "false"}}
@@ -27,40 +21,58 @@
   multiple={{this.isMultiple}}
   role={{this.role}}
   tabindex={{this.tabIndex}}
-  ...attributes>
-  {{#let (hash
-    Options=(component "select-box/options"
-      classNamePrefix=@classNamePrefix
-      _onInit=this.handleInitOptionsContainer
-      _onDestroy=this.handleDestroyOptionsContainer)
-    Option=(component "select-box/option"
-      selectBox=this
-      classNamePrefix=@classNamePrefix
-      _onActivate=this.handleActivateOption
-      _onSelect=this.handleSelectOption
-      _onDestroy=this.handleDestroyOption
-      _onInit=this.handleInitOption)
-    SelectedOptions=(component "select-box/selected-options"
-      classNamePrefix=@classNamePrefix
-      _onInit=this.handleInitSelectedOptionsContainer
-      _onDestroy=this.handleDestroySelectedOptionsContainer)
-    SelectedOption=(component "select-box/selected-option"
-      selectBox=this
-      classNamePrefix=@classNamePrefix
-      _onActivate=this.handleActivateSelectedOption
-      _onInit=this.handleInitSelectedOption
-      _onDestroy=this.handleDestroySelectedOption)
-    Group=(component "select-box/group"
-      classNamePrefix=@classNamePrefix)
-    Input=(component "select-box/input"
-      selectBox=this
-      aria-controls=this.id
-      disabled=this.isDisabled
-      classNamePrefix=@classNamePrefix
-      _onInit=this.handleInitInput
-      _onDestroy=this.handleDestroyInput
-      _onInput=this.handleInputText)
-  ) as |components|}}
+  ...attributes
+  {{did-insert this.handleInsertElement}}
+  {{will-destroy this.handleDestroyElement}}
+  {{on "focusin" this.handleFocusIn}}
+  {{on "focusout" this.handleFocusOut}}
+  {{on "keydown" this.handleKeyDown}}
+  {{on "keypress" this.handleKeyPress}}
+>
+  {{#let
+    (hash
+      Options=(component
+        "select-box/options"
+        classNamePrefix=@classNamePrefix
+        _onInit=this.handleInitOptionsContainer
+        _onDestroy=this.handleDestroyOptionsContainer
+      )
+      Option=(component
+        "select-box/option"
+        selectBox=this
+        classNamePrefix=@classNamePrefix
+        _onActivate=this.handleActivateOption
+        _onSelect=this.handleSelectOption
+        _onDestroy=this.handleDestroyOption
+        _onInit=this.handleInitOption
+      )
+      SelectedOptions=(component
+        "select-box/selected-options"
+        classNamePrefix=@classNamePrefix
+        _onInit=this.handleInitSelectedOptionsContainer
+        _onDestroy=this.handleDestroySelectedOptionsContainer
+      )
+      SelectedOption=(component
+        "select-box/selected-option"
+        selectBox=this
+        classNamePrefix=@classNamePrefix
+        _onActivate=this.handleActivateSelectedOption
+        _onInit=this.handleInitSelectedOption
+        _onDestroy=this.handleDestroySelectedOption
+      )
+      Group=(component "select-box/group" classNamePrefix=@classNamePrefix)
+      Input=(component
+        "select-box/input"
+        selectBox=this
+        aria-controls=this.id
+        disabled=this.isDisabled
+        classNamePrefix=@classNamePrefix
+        _onInit=this.handleInitInput
+        _onDestroy=this.handleDestroyInput
+        _onInput=this.handleInputText
+      )
+    ) as |components|
+  }}
     {{yield (merge components this.api)}}
   {{/let}}
 </div>
diff --git a/addon/templates/components/select-box/group.hbs b/addon/templates/components/select-box/group.hbs
@@ -1,6 +1,8 @@
-<div
-  class={{concat this.className "__group"}}
-  ...attributes>
-  <div class={{concat this.className "__group-label"}}>{{@label}}</div>
-  <div class={{concat this.className "__group-options"}}>{{yield}}</div>
+<div class={{concat this.className "__group"}} ...attributes>
+  <div class={{concat this.className "__group-label"}}>
+    {{@label}}
+  </div>
+  <div class={{concat this.className "__group-options"}}>
+    {{yield}}
+  </div>
 </div>
diff --git a/addon/templates/components/select-box/input.hbs b/addon/templates/components/select-box/input.hbs
@@ -1,18 +1,17 @@
 <input
-  {{did-insert this.handleInsertElement}}
-  {{will-destroy this.handleDestroyElement}}
-  {{on "input" this.handleInput}}
-  {{on "keydown" this.handleKeyDown}}
   aria-multiline="false"
   autocomplete="off"
   class={{concat this.className "__input"}}
   role="searchbox"
   type="text"
-
   {{! Issue: https://github.com/emberjs/rfcs/issues/497 }}
   aria-controls={{@aria-controls}}
   disabled={{@disabled}}
   onclick={{@onclick}}
   value={{@value}}
-
-  ...attributes>
+  ...attributes
+  {{did-insert this.handleInsertElement}}
+  {{will-destroy this.handleDestroyElement}}
+  {{on "input" this.handleInput}}
+  {{on "keydown" this.handleKeyDown}}
+/>
diff --git a/addon/templates/components/select-box/option.hbs b/addon/templates/components/select-box/option.hbs
@@ -1,8 +1,4 @@
 <div
-  {{did-insert this.handleInsertElement}}
-  {{will-destroy this.handleDestroyElement}}
-  {{on "mouseenter" this.handleMouseEnter}}
-  {{on "click" this.handleClick}}
   aria-busy={{if this.isPending "true" "false"}}
   aria-current={{if this.isActive "true" "false"}}
   aria-disabled={{if this.isDisabled "true" "false"}}
@@ -15,6 +11,11 @@
   }}
   id={{this.id}}
   role="option"
-  ...attributes>
+  ...attributes
+  {{did-insert this.handleInsertElement}}
+  {{will-destroy this.handleDestroyElement}}
+  {{on "mouseenter" this.handleMouseEnter}}
+  {{on "click" this.handleClick}}
+>
   {{~yield this.api~}}
 </div>
diff --git a/addon/templates/components/select-box/options.hbs b/addon/templates/components/select-box/options.hbs
@@ -1,12 +1,11 @@
 <div
-  {{will-destroy this.handleDestroyElement}}
   class={{concat this.className "__options"}}
-
+  aria-activedescendant={{@aria-activedescendant}}
   {{! Issue: https://github.com/emberjs/rfcs/issues/497 }}
   {{! template-lint-disable no-invalid-interactive }}
-  aria-activedescendant={{@aria-activedescendant}}
   onclick={{@onclick}}
-
-  ...attributes>
+  ...attributes
+  {{will-destroy this.handleDestroyElement}}
+>
   {{yield}}
 </div>
diff --git a/addon/templates/components/select-box/selected-option.hbs b/addon/templates/components/select-box/selected-option.hbs
@@ -1,18 +1,17 @@
 <div
-  {{did-insert this.handleInsertElement}}
-  {{will-destroy this.handleDestroyElement}}
   aria-current={{if this.isActive "true" "false"}}
   class={{concat
     (concat this.className "__selected-option")
     (if this.isActive (concat " " this.className "__selected-option--active"))
   }}
   id={{this.id}}
   role="option"
-
   {{! Issue: https://github.com/emberjs/rfcs/issues/497 }}
   {{! template-lint-disable no-invalid-interactive }}
   onclick={{@onclick}}
-
-  ...attributes>
+  ...attributes
+  {{did-insert this.handleInsertElement}}
+  {{will-destroy this.handleDestroyElement}}
+>
   {{~yield this.api~}}
 </div>
diff --git a/addon/templates/components/select-box/selected-options.hbs b/addon/templates/components/select-box/selected-options.hbs
@@ -1,12 +1,11 @@
 <div
-  {{will-destroy this.handleDestroyElement}}
   class={{concat this.className "__selected-options"}}
-
+  aria-activedescendant={{@aria-activedescendant}}
   {{! Issue: https://github.com/emberjs/rfcs/issues/497 }}
   {{! template-lint-disable no-invalid-interactive }}
-  aria-activedescendant={{@aria-activedescendant}}
   onclick={{@onclick}}
-
-  ...attributes>
+  ...attributes
+  {{will-destroy this.handleDestroyElement}}
+>
   {{yield}}
 </div>
diff --git a/app/components/native-select-box/group.js b/app/components/native-select-box/group.js
@@ -1,3 +1 @@
-export {
-  default
-} from '@zestia/ember-select-box/components/native-select-box/group';
+export { default } from '@zestia/ember-select-box/components/native-select-box/group';
diff --git a/app/components/native-select-box/option.js b/app/components/native-select-box/option.js
@@ -1,3 +1 @@
-export {
-  default
-} from '@zestia/ember-select-box/components/native-select-box/option';
+export { default } from '@zestia/ember-select-box/components/native-select-box/option';
diff --git a/app/components/select-box/options.js b/app/components/select-box/options.js
@@ -1,3 +1 @@
-export {
-  default
-} from '@zestia/ember-select-box/components/select-box/options';
+export { default } from '@zestia/ember-select-box/components/select-box/options';
diff --git a/app/components/select-box/selected-option.js b/app/components/select-box/selected-option.js
@@ -1,3 +1 @@
-export {
-  default
-} from '@zestia/ember-select-box/components/select-box/selected-option';
+export { default } from '@zestia/ember-select-box/components/select-box/selected-option';
diff --git a/app/components/select-box/selected-options.js b/app/components/select-box/selected-options.js
@@ -1,3 +1 @@
-export {
-  default
-} from '@zestia/ember-select-box/components/select-box/selected-options';
+export { default } from '@zestia/ember-select-box/components/select-box/selected-options';
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -1,7 +1,16 @@
-<h1>@zestia/ember-select-box</h1>
+<h1>
+  @zestia/ember-select-box
+</h1>
 
 {{! template-lint-disable inline-styles }}
-<a href="https://github.com/zestia/ember-select-box"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
+<a href="https://github.com/zestia/ember-select-box">
+  <img
+    style="position: absolute; top: 0; right: 0; border: 0;"
+    src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
+    alt="Fork me on GitHub"
+    data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"
+  />
+</a>
 
 <p>
   {{link-to "Native single select" "native-single-select"}} |

diff --git a/tests/dummy/app/templates/colour-select.hbs b/tests/dummy/app/templates/colour-select.hbs
@@ -1,12 +1,19 @@
 <p>
   Demonstration of a simple faux select box.
-  <a href="https://github.com/zestia/ember-select-box/blob/master/tests/dummy/app/components/colour-select.js">component.js</a> |
-  <a href="https://github.com/zestia/ember-select-box/blob/master/tests/dummy/app/templates/components/colour-select.hbs">template.hbs</a>
+  <a
+    href="https://github.com/zestia/ember-select-box/blob/master/tests/dummy/app/components/colour-select.js"
+  >
+    component.js
+  </a>
+  |
+  <a
+    href="https://github.com/zestia/ember-select-box/blob/master/tests/dummy/app/templates/components/colour-select.hbs"
+  >
+    template.hbs
+  </a>
 </p>
 
-<ColourSelect
-  @value={{this.selectedColour}}
-  @onSelect={{this.selectColour}} />
+<ColourSelect @value={{this.selectedColour}} @onSelect={{this.selectColour}} />
 
 <p>
   Selected colour: {{this.selectedColour}}

diff --git a/tests/dummy/app/templates/components/colour-select.hbs b/tests/dummy/app/templates/components/colour-select.hbs
@@ -6,19 +6,22 @@
   @onSelect={{@onSelect}}
   @onClickOutside={{this.close}}
   @onPressEscape={{this.close}}
-  ...attributes as |sb|>
-
+  ...attributes as |sb|
+>
   <sb.SelectedOption
     onclick={{sb.toggle}}
     style={{style (concat "background:" sb.value)}}
-    @value={{sb.value}} />
+    @value={{sb.value}}
+  />
 
   {{#if sb.isOpen}}
     <sb.Options>
       {{~#each this.colours as |colour|~}}
-        <sb.Option @value={{colour}} style={{style (concat "background:" colour)}} />
+        <sb.Option
+          @value={{colour}}
+          style={{style (concat "background:" colour)}}
+        />
       {{~/each~}}
     </sb.Options>
   {{/if}}
-
 </SelectBox>