QChipsInput: add QAutocomplete support

- when autocomplete list is visible ENTER key only selects from the list, so in order to add a value not in the list you first have to close the list
- adding is disabled while loading

close quasarframework#400, close quasarframework#855, close quasarframework#1432, close quasarframework#1905

dev/components/form/all.vue

@@ -217,6 +217,13 @@
         <q-chips-input :dark="dark" color="black" :error="error" :warning="warning" :disable="disable" :readonly="readonly" inverted class="q-ma-sm" @focus="onFocus" @blur="onBlur" @change="val => { options = val; onChange(val) }" @input="onInput" @clear="onClear" float-label="List (onChange)" :value="options" />
         <q-chips-input :dark="dark" color="green" :error="error" :warning="warning" :disable="disable" :readonly="readonly" inverted class="q-ma-sm" @focus="onFocus" @blur="onBlur" @change="val => { options = val; onChange(val) }" @input="onInput" @clear="onClear" float-label="List (onChange)" :value="options" />
 
+        <q-chips-input :dark="dark" :error="error" :warning="warning" :disable="disable" :readonly="readonly" class="q-ma-sm" @focus="onFocus" @blur="onBlur" @change="onChange" @input="onInput" @clear="onClear" float-label="List autocomplete" v-model="options">
+          <q-autocomplete :static-data="{field: 'value', list: countries}" @selected="selected" />
+        </q-chips-input>
+        <q-chips-input :dark="dark" :error="error" :warning="warning" :disable="disable" :readonly="readonly" class="q-ma-sm" @focus="onFocus" @blur="onBlur" @change="val => { options = val; onChange(val) }" @input="onInput" @clear="onClear" float-label="List autocomplete (onChange)" :value="options">
+          <q-autocomplete :static-data="{field: 'value', list: countries}" @selected="selected" />
+        </q-chips-input>
+
         <p class="q-subtitle">Selected option: {{ JSON.stringify(option) }}</p>
         <q-select :dark="dark" :error="error" :warning="warning" :disable="disable" :readonly="readonly" :clearable="clearable" class="q-ma-sm" @focus="onFocus" @blur="onBlur" @change="onChange" @input="onInput" @clear="onClear" v-model="option" :options="countries" placeholder="Select" filter />
         <q-select :dark="dark" :error="error" :warning="warning" :disable="disable" :readonly="readonly" :clearable="clearable" class="q-ma-sm" @focus="onFocus" @blur="onBlur" @change="onChange" @input="onInput" @clear="onClear" v-model="option" :options="countries" float-label="Select (autofocus filter)" filter autofocus-filter />

src/components/autocomplete/QAutocomplete.js

@@ -219,8 +219,14 @@ export default {
         anchorClick: false
       },
       on: {
-        show: () => this.$emit('show'),
-        hide: () => this.$emit('hide')
+        show: () => {
+          this.__input.selectionOpen = true
+          this.$emit('show')
+        },
+        hide: () => {
+          this.__input.selectionOpen = false
+          this.$emit('hide')
+        }
       }
     }, [
       h(QList, {

src/components/chips-input/QChipsInput.vue

@@ -60,8 +60,15 @@
       />
     </div>
 
+    <q-spinner
+      v-if="isLoading"
+      slot="after"
+      size="24px"
+      class="q-if-control"
+    ></q-spinner>
+
     <q-icon
-      v-if="editable"
+      v-else-if="editable"
       :name="computedAddIcon"
       slot="after"
       class="q-if-control"
@@ -70,6 +77,8 @@
       @touchstart.native="__clearTimer"
       @click.native="add()"
     ></q-icon>
+
+    <slot></slot>
   </q-input-frame>
 </template>
 
@@ -79,13 +88,15 @@ import InputMixin from '../../mixins/input'
 import { QInputFrame } from '../input-frame'
 import { QChip } from '../chip'
 import { getEventKey, stopAndPrevent } from '../../utils/event'
+import { QSpinner } from '../spinner'
 
 export default {
   name: 'QChipsInput',
   mixins: [FrameMixin, InputMixin],
   components: {
     QInputFrame,
-    QChip
+    QChip,
+    QSpinner
   },
   props: {
     value: {
@@ -100,12 +111,36 @@ export default {
   data () {
     return {
       input: '',
-      model: this.value
+      model: this.value,
+      watcher: null,
+      shadow: {
+        val: this.input,
+        set: this.add,
+        loading: false,
+        selectionOpen: false,
+        watched: 0,
+        isDark: () => this.dark,
+        hasFocus: () => document.activeElement === this.$refs.input,
+        register: () => {
+          this.shadow.watched += 1
+          this.__watcherRegister()
+        },
+        unregister: () => {
+          this.shadow.watched = Math.max(0, this.shadow.watched - 1)
+          this.__watcherUnregister()
+        },
+        getEl: () => this.$refs.input
+      }
     }
   },
   watch: {
     value (v) {
-      this.model = this.value
+      this.model = v
+    }
+  },
+  provide () {
+    return {
+      __input: this.shadow
     }
   },
   computed: {
@@ -114,6 +149,9 @@ export default {
         ? this.model.length
         : 0
     },
+    isLoading () {
+      return this.loading || (this.shadow.watched && this.shadow.loading)
+    },
     computedAddIcon () {
       return this.addIcon || this.$q.icon.chipsInput.add
     },
@@ -151,7 +189,7 @@ export default {
       clearTimeout(this.timer)
       this.focus()
 
-      if (!this.editable || !value) {
+      if (this.isLoading || !this.editable || !value) {
         return
       }
       if (this.model.includes(value)) {
@@ -177,6 +215,9 @@ export default {
     __handleKeyDown (e) {
       switch (getEventKey(e)) {
         case 13: // ENTER key
+          if (this.shadow.selectionOpen) {
+            return
+          }
           stopAndPrevent(e)
           return this.add()
         case 8: // Backspace key
@@ -190,7 +231,30 @@ export default {
     },
     __onClick () {
       this.focus()
+    },
+    __watcher (value) {
+      if (this.shadow.watched) {
+        this.shadow.val = value
+      }
+    },
+    __watcherRegister () {
+      if (!this.watcher) {
+        this.watcher = this.$watch('input', this.__watcher)
+      }
+    },
+    __watcherUnregister (forceUnregister) {
+      if (
+        this.watcher &&
+        (forceUnregister || !this.shadow.watched)
+      ) {
+        this.watcher()
+        this.watcher = null
+        this.shadow.selectionOpen = false
+      }
     }
+  },
+  beforeDestroy () {
+    this.__watcherUnregister(true)
   }
 }
 </script>

src/components/input/QInput.vue

@@ -213,7 +213,7 @@ export default {
       return this.type === 'textarea'
     },
     isLoading () {
-      return this.loading || this.shadow.loading
+      return this.loading || (this.shadow.watched && this.shadow.loading)
     },
     keyboardToggle () {
       return this.$q.platform.is.mobile &&