Merge 6bc87e7 into 94950d5

addon/components/inputs/autocomplete.js

@@ -0,0 +1,21 @@
+import SelectInput from './select'
+import layout from 'ember-frost-bunsen/templates/components/frost-bunsen-input-autocomplete'
+
+export default SelectInput.extend({
+  // == Component Properties ===================================================
+  classNames: [
+    'frost-bunsen-input-autocomplete',
+    'frost-field'
+  ],
+
+  layout,
+
+  /**
+   * This should be overriden by inherited inputs to convert the value to the appropriate format
+   * @param {String} data - value to parse
+   * @returns {String} parsed value
+   */
+  parseValue (data) {
+    return data
+  }
+})

addon/index.js

@@ -10,6 +10,7 @@ export {default as Form} from './components/form'
 export {default as InputWrapper} from './components/input-wrapper'
 export {default as Section} from './components/section'
 export {default as ValidationResult} from './components/validation-result'
+import {default as Autocomplete} from './components/inputs/autocomplete'
 import {default as Boolean} from './components/inputs/boolean'
 import {default as ButtonGroup} from './components/inputs/button-group'
 import {default as CheckboxArray} from './components/inputs/checkbox-array'
@@ -30,6 +31,7 @@ import {default as Url} from './components/inputs/url'
 import {default as When} from './components/inputs/when'
 
 export const Inputs = {
+  Autocomplete,
   Boolean,
   ButtonGroup,
   CheckboxArray,

addon/templates/components/frost-bunsen-input-autocomplete.hbs

@@ -0,0 +1,53 @@
+{{#if readOnly}}
+  {{frost-bunsen-input-static
+    bunsenId=bunsenId
+    bunsenModel=bunsenModel
+    bunsenView=bunsenView
+    cellConfig=cellConfig
+    errorMessage=errorMessage
+    formDisabled=formDisabled
+    getRootProps=getRootProps
+    hook=hook
+    onChange=onChange
+    onError=onError
+    readOnly=readOnly
+    registerForFormValueChanges=registerForFormValueChanges
+    renderers=renderers
+    required=required
+    showAllErrors=showAllErrors
+    unregisterForFormValueChanges=unregisterForFormValueChanges
+    value=selectedItemLabel
+  }}
+{{else}}
+  {{#if (not cellConfig.hideLabel)}}
+    <label class={{labelWrapperClassName}}>
+      {{renderLabel}}
+      {{#if showRequiredLabel}}
+        <div class='frost-bunsen-required'>Required</div>
+      {{/if}}
+    </label>
+  {{/if}}
+  <div class={{inputWrapperClassName}}>
+    {{frost-autocomplete
+      class=valueClassName
+      data=options
+      disabled=disabled
+      error=(if renderErrorMessage true false)
+      hook=hook
+      onChange=(action 'handleChange')
+      onBlur=(action 'showErrorMessage')
+      options=selectSpreadProperties
+      placeholder=placeholder
+      width=width
+      selectedValue=value
+    }}
+    {{frost-bunsen-description-bubble
+      description=cellConfig.description
+    }}
+  </div>
+  {{#if renderErrorMessage}}
+    <div class='frost-bunsen-error'>
+      {{renderErrorMessage}}
+    </div>
+  {{/if}}
+{{/if}}

addon/utils.js

@@ -14,6 +14,7 @@ const {keys} = Object
  */
 
 export const builtInRenderers = {
+  autocomplete: 'frost-bunsen-input-autocomplete',
   boolean: 'frost-bunsen-input-boolean',
   'button-group': 'frost-bunsen-input-button-group',
   'checkbox-array': 'frost-bunsen-input-checkbox-array',

app/components/frost-bunsen-input-autocomplete.js

@@ -0,0 +1 @@
+export {default} from 'ember-frost-bunsen/components/inputs/autocomplete'

testem.js

@@ -1,5 +1,4 @@
 /* eslint-env node */
-const Reporter = require('ember-test-utils/reporter')
 
 module.exports = {
   disable_watching: true,
@@ -11,6 +10,5 @@ module.exports = {
   launch_in_dev: [
     'Chrome'
   ],
-  reporter: new Reporter(),
   test_page: 'tests/index.html?hidepassed'
 }

tests/dummy/app/pods/view/renderers/documentation/autocomplete.md

@@ -0,0 +1,41 @@
+## autocomplete
+
+This renderer provides an autocomplete input which suggests options to be selected. This renderer is meant to be an alternative to select.
+This has a look and feel very familiar with typical autocomplete. However, like select, this requires an option to be selected. This is because both select and autocomplete require a label and value (which typically is some internal id). This isn't just a free form text input where the selections are optional, an item must be selected.
+
+Here is an example of what this isn't ideal for (at least the current iteration of autocomplete):
+
+Searching for a name for your pet. Perhaps this pet will get a name never been given before. This new never been used name most likely isn't an option in the dropdown and therefore could not be used with this renderer.
+
+What this is ideal for:
+
+Your home is incredibly sophisticated and you are trying to locate your pet. Type in the pet's name into the locator, select the pet item, and run the locate function on your pet.
+
+The API is identical to Select. Except for the following:
+<ul>
+  <li>There is no multi-select.</li>
+  <li>There is no default selection of an index (no starting with item #3 in the dropdown).</li>
+</ul>
+
+Please refer to 
+<a href="/#/view/renderers?renderer=select">Select Renderer</a>
+for documentation
+
+Due to the behavior of this renderer, the label (the part the user sees) and the value (internal id) are disconnected. Like select, a selectedValue (of a string) can be configured for it's initial value.
+Unlike select though, this will be internal only and will not produce a label.
+
+To specify a starting label, the following spread option should be used:
+
+```js
+{
+  model: 'foo',
+  renderer: {
+    name: 'autocomplete',
+    options: {
+      debounceInterval: 300,
+      filter: 'Gadnuk',
+      selectedValue: 'pet_5'
+    }
+  }
+}
+```

tests/dummy/app/pods/view/renderers/models/autocomplete.js

@@ -0,0 +1,14 @@
+export default {
+  properties: {
+    queryWithCountries: {
+      type: 'string',
+      modelType: 'country',
+      valueAttribute: 'id',
+      labelAttribute: 'name',
+      query: {
+        p: 'name:$filter'
+      }
+    }
+  },
+  type: 'object'
+}

tests/dummy/app/pods/view/renderers/models/index.js

@@ -1,3 +1,4 @@
+import autocomplete from './autocomplete'
 import boolean from './boolean'
 import buttonGroup from './button-group'
 import checkboxArray from './checkbox-array'
@@ -21,6 +22,7 @@ import when from './when'
 
 export default {
   boolean,
+  autocomplete,
   'button-group': buttonGroup,
   'checkbox-array': checkboxArray,
   date,

tests/dummy/app/pods/view/renderers/views/autocomplete.js

@@ -0,0 +1,21 @@
+export default {
+  cells: [
+    {
+      children: [
+        {
+          label: 'Country',
+          model: 'queryWithCountries',
+          renderer: {
+            name: 'autocomplete',
+            options: {
+              debounceInterval: 300
+            }
+          },
+          placeholder: 'Type a country name'
+        }
+      ]
+    }
+  ],
+  type: 'form',
+  version: '2.0'
+}

tests/dummy/app/pods/view/renderers/views/index.js

@@ -1,3 +1,4 @@
+import autocomplete from './autocomplete'
 import boolean from './boolean'
 import buttonGroup from './button-group'
 import checkboxArray from './checkbox-array'
@@ -21,6 +22,7 @@ import when from './when'
 
 export default {
   boolean,
+  autocomplete,
   'button-group': buttonGroup,
   'checkbox-array': checkboxArray,
   date,