upgrade vue and assets

assets/src/components/AAutocomplete.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="control">
+        <datalist :id="listId">
+            <option v-for="item in items" :key="item.path"
+                :value="item[field]"></option>
+        </datalist>
+        <input type="text" :name="name" :placeholder="placeholder"
+            :list="listId" @keyup="onKeyUp"/>
+    </div>
+</template>
+
+<script>
+// import debounce from 'lodash/debounce'
+
+export default {
+    props: {
+        url: String,
+        model: Function,
+        placeholder: String,
+        name: String,
+        field: String,
+        valueField: {type: String, default: 'id'},
+        count: {type: Number, count: 10},
+    },
+
+    data() {
+        return {
+            value: '',
+            items: [],
+            selected: null,
+            isFetching: false,
+            listId: `autocomplete-${ Math.random() }`.replace('.',''),
+        }
+    },
+
+    methods: {
+        select(option, value=null) {
+            if(!option && value !== null)
+                option = this.items.find(item => item[this.field] == value)
+
+            this.selected = option
+            this.$emit('select', option)
+        },
+
+        onKeyUp: function(event) {
+            const value = event.target.value
+            if(value === this.value)
+                return
+
+            if(value !== undefined && value !== null)
+                this.value = value
+                
+            if(!value)
+                return this.select(null)
+
+            this.fetch(value)
+        },
+
+        fetch: function(query) {
+            if(!query || this.isFetching)
+                return
+
+            this.isFetching = true
+            return this.model.fetch(this.url.replace('${query}', query), {many:true})
+                .then(items => { this.items = items || []
+                                 this.isFetching = false
+                                 this.select(null, query)
+                                 return items },
+                      data => {this.isFetching = false; Promise.reject(data)})
+        },
+    },
+}
+
+</script>
+