[2.6.0] Added <Autocomplete /> control

Author: isnifer

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 2.6.0
+
+- Added `<Autocomplete />` control
+
 ## 2.5.11
 
 ### Fixed

README.md

@@ -79,6 +79,7 @@ See demo at [https://detools.github.io/vue-form](https://detools.github.io/vue-f
 
 ## Changelog
 
+- [2.6.0](/CHANGELOG.md#260)
 - [2.5.11](/CHANGELOG.md#2511)
 - [2.5.10](/CHANGELOG.md#2510)
 - [2.5.9](/CHANGELOG.md#259)

VueForm/components/ConnectedAutocomplete.js

@@ -0,0 +1,138 @@
+import { Autocomplete } from 'element-ui'
+import noop from 'lodash/noop'
+import isNull from 'lodash/isNull'
+import ConnectedControlMixin from '../mixins/ConnectedControl'
+
+const ConnectedAutocomplete = {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+
+    value: {
+      type: [String, Number],
+      default: '',
+    },
+
+    labelKey: {
+      type: String,
+      default: 'name',
+    },
+
+    valueKey: {
+      type: String,
+      default: 'id',
+    },
+
+    placeholder: String,
+    clearable: Boolean,
+    disabled: Boolean,
+    debounce: Number,
+    placement: String,
+    popperClass: String,
+    triggerOnFocus: Boolean,
+    selectWhenUnmatched: Boolean,
+    prefixIcon: String,
+    suffixIcon: String,
+    hideLoading: Boolean,
+    popperAppendToBody: Boolean,
+    tabindex: Number,
+    autofocus: Boolean,
+    autosize: Boolean,
+    autocomplete: {
+      type: String,
+      default: 'off',
+    },
+    size: String,
+
+    validators: Array,
+    asyncValidators: Array,
+
+    fetchSuggestions: {
+      type: Function,
+      required: true,
+    },
+
+    handleFocus: {
+      type: Function,
+      default: noop,
+    },
+
+    handleBlur: {
+      type: Function,
+      default: noop,
+    },
+
+    handleSelect: {
+      type: Function,
+      default: noop,
+    },
+
+    /* FormItem Props */
+    label: [String, Boolean],
+    formItem: Boolean,
+    labelWidth: String,
+  },
+
+  mixins: [ConnectedControlMixin],
+
+  data() {
+    return {
+      viewValue: this.value,
+    }
+  },
+
+  methods: {
+    handleFieldSelect(value) {
+      const nextValue = isNull(this.valueKey) ? value : value[this.valueKey]
+
+      this.setTouched()
+      this.handleSelect(nextValue)
+
+      this.viewValue = isNull(this.labelKey) ? value : value[this.labelKey]
+
+      const [, setValue] = this.state
+      setValue(nextValue)
+    },
+
+    renderComponent() {
+      return (
+        <Autocomplete
+          class={this.class}
+          name={this.name}
+          type={this.type}
+          value={this.viewValue}
+          placeholder={this.placeholder}
+          clearable={this.clearable}
+          disabled={this.disabled}
+          value-key={this.labelKey}
+          debounce={this.debounce}
+          placement={this.placement}
+          popper-class={this.popperClass}
+          trigger-on-focus={this.triggerOnFocus}
+          select-when-unmatched={this.selectWhenUnmatched}
+          prefix-icon={this.prefixIcon}
+          suffix-icon={this.suffixIcon}
+          hide-loading={this.hideLoading}
+          popper-append-to-body={this.popperAppendToBody}
+          tabindex={this.tabindex}
+          autofocus={this.autofocus}
+          autosize={this.autosize}
+          autocomplete={this.autocomplete}
+          size={this.size}
+          fetch-suggestions={this.fetchSuggestions}
+          on-focus={this.handleFocus}
+          on-blur={this.handleFieldBlur}
+          on-select={this.handleFieldSelect}>
+          {Boolean(this.prefix) && <template slot="prefix">{this.prefix}</template>}
+          {Boolean(this.suffix) && <template slot="suffix">{this.suffix}</template>}
+          {Boolean(this.append) && <template slot="append">{this.append}</template>}
+          {Boolean(this.prepend) && <template slot="prepend">{this.prepend}</template>}
+        </Autocomplete>
+      )
+    },
+  },
+}
+
+export default ConnectedAutocomplete

VueForm/index.js

@@ -5,6 +5,7 @@ import Checkbox from './components/ConnectedCheckbox'
 import CheckboxGroup from './components/ConnectedCheckboxGroup'
 import Input from './components/ConnectedInput'
 import InputNumber from './components/ConnectedInputNumber'
+import Autocomplete from './components/ConnectedAutocomplete'
 import Select from './components/ConnectedSelect'
 import Switch from './components/ConnectedSwitch'
 import Slider from './components/ConnectedSlider'
@@ -24,6 +25,7 @@ export {
   CheckboxGroup,
   Input,
   InputNumber,
+  Autocomplete,
   Select,
   Switch,
   Slider,

docs/bundle.js

@@ -1,34 +1,34 @@
 
-.root-container[data-v-434ec9e2] {
+.root-container[data-v-a1275c98] {
   min-height: 100%;
 }
-.title[data-v-434ec9e2] {
+.title[data-v-a1275c98] {
   font-size: 40px;
   margin: 10px 0 0;
   font-weight: bold;
 }
-.main-container[data-v-434ec9e2] {
+.main-container[data-v-a1275c98] {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: stretch;
 }
-.aside[data-v-434ec9e2] {
+.aside[data-v-a1275c98] {
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
-.main[data-v-434ec9e2] {
+.main[data-v-a1275c98] {
   padding: 10px 40px 40px;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   border-left: 1px solid rgba(0, 0, 0, 0.1);
 }
-.link[data-v-434ec9e2] {
+.link[data-v-a1275c98] {
   display: block;
   line-height: 40px;
   padding-left: 30px;
   position: relative;
   color: #0a0a0a;
 }
-.link_active[data-v-434ec9e2]:before {
+.link_active[data-v-a1275c98]:before {
   content: '\261B';
   position: absolute;
   display: block;

docs/main.css

@@ -20,6 +20,7 @@ export default {
         'SyncValidationForm',
         'AllValidationsForm',
         'ArrayFieldForm',
+        'AutocompleteForm',
       ],
     }
   },

docs/vendors~main.bundle.js

@@ -0,0 +1,65 @@
+import Form, { Autocomplete } from '@detools/vue-form'
+
+export default {
+  data() {
+    return {
+      formValues: {},
+    }
+  },
+
+  methods: {
+    handleSubmit(values) {
+      this.formValues = values
+    },
+
+    fetchSuggestions(query, callback) {
+      if (query !== '') {
+        setTimeout(() => {
+          callback(
+            [
+              { id: 1, name: 'Leonard Leblanc' },
+              { id: 2, name: 'Mitzi Rocha' },
+              { id: 3, name: 'Marquita Giles' },
+            ].filter(({ name: item }) => item.toLowerCase().includes(query))
+          )
+        }, 500)
+      } else {
+        callback([])
+      }
+    },
+  },
+
+  render() {
+    return (
+      <div>
+        <h1>Sync Validation Form</h1>
+        <div class="wrapper">
+          <div class="form">
+            <Form
+              submit
+              labelWidth="150px"
+              labelPosition="left"
+              labelSuffix=":"
+              buttonsPosition="label"
+              handleSubmit={this.handleSubmit}>
+              <Autocomplete
+                formItem
+                name="username"
+                label="Type A and wait"
+                fetchSuggestions={this.fetchSuggestions}
+              />
+            </Form>
+          </div>
+          <div class="values">
+            <strong>Form Values</strong>
+            <br />
+            <br />
+            <div>
+              <pre>{JSON.stringify(this.formValues, null, 2)}</pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  },
+}

example/src/App.vue

@@ -0,0 +1 @@
+export default from './AutocompleteForm'