goodteditor-ui 1.0.26 → 1.0.28

package/src/components/ui/InputAutocomplete.vue

@@ -1,349 +1,374 @@
-<template>
-    <div
-        class="ui-input-autocomplete form-elem"
-        :class="cssClass"
-        @focus="onRootFocus"
-        tabindex="0"
-        :data-popover="popoverTargetId"
-    >
-        <div style="flex: 1 0 0">
-            <!-- 
-            @slot Custom input slot
-            @binding {String} id    input id attribute value
-            @binding {String} value    input value
-            @binding {Object} inputBinds    input props (use v-bind)
-            @binding {Object} inputEvents    input events (use v-on)
-            -->
-            <slot name="input" v-bind="{ id: inputId, value, inputBinds, inputEvents }">
-                <input
-                    :id="inputId"
-                    class="ui-input-autocomplete-input w-100"
-                    type="text"
-                    :value="value"
-                    v-bind="inputBinds"
-                    v-on="inputEvents"
-                />
-            </slot>
-        </div>
-        <!-- 
-        @slot Loading custom content
-        -->
-        <slot name="loading" v-if="loading">
-            <div class="icon w-auto h-auto">
-                <div class="preloader"></div>
-            </div>
-        </slot>
-        <ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
-            <ui-datalist
-                class="w-100 pull-left"
-                @select-option="onDatalistSelectOption"
-                v-bind="{ size, maxHeight: dropdownMaxHeight, options: suggestedOptions }"
-                :cursorIndex.sync="dataListCursorIndex"
-                ref="datalist"
-            >
-                <template #header>
-                    <!-- 
-                    @slot Dropdown header content
-                    -->
-                    <slot name="dropdown-header"></slot>
-                    <!-- 
-                    @slot No results content
-                    -->
-                    <slot name="noresults" v-if="!loading && !suggestedOptions.length"></slot>
-                </template>
-                <template #option="{ option, index, cursorIndex, setCursorIndex }">
-                    <!-- 
-                    @slot Dropdown option
-                    @binding {String} option         option label
-                    @binding {Number} optionIndex    option index
-                    @binding {String} value          current value
-                    @binding {String} valueLocal     current delimited value
-                    @binding {Number} cursorIndex    current dropdown selection index 
-                    @binding {Function} selectOption    function that select's the option
-                    @binding {Function} setCursorIndex  function that sets the cursor index
-                    -->
-                    <slot
-                        name="option"
-                        v-bind="{
-                            option: option,
-                            optionIndex: index,
-                            value,
-                            valueLocal: delimitedValue,
-                            cursorIndex,
-                            selectOption,
-                            setCursorIndex,
-                        }"
-                    ></slot>
-                </template>
-                <template #footer>
-                    <slot name="dropdown-footer"></slot>
-                </template>
-            </ui-datalist>
-        </ui-popover>
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-input-autocomplete {
-    display: inline-flex;
-    align-items: center;
-    &-input {
-        border: none;
-        line-height: 1.5;
-        margin: 0;
-        padding: 0;
-        color: inherit;
-        background: transparent;
-        outline: none;
-    }
-}
-</style>
-<script>
-import { Key } from './utils/Helpers';
-import FormComponent from './utils/FormComponent';
-import WithPopover from './utils/WithPopover';
-import UiDatalist from './Datalist.vue';
-import UiPopover from './Popover.vue';
-
-export default {
-    mixins: [FormComponent, WithPopover],
-    components: { UiDatalist, UiPopover },
-    props: {
-        /**
-         * Dropdown option (suggestions)
-         */
-        options: {
-            type: Array,
-            default() {
-                return [];
-            },
-        },
-        /**
-         * Function which filters suggestions function(val, options):Promise<Array>
-         */
-        filter: {
-            type: Function,
-            default: null,
-        },
-        /**
-         * Filter debounce delay in ms
-         */
-        filterDebounce: {
-            type: Number,
-            default: 0,
-        },
-        /**
-         * Value delimiter for multiple autocomplete suggestions
-         */
-        delimiter: {
-            type: String,
-            default: ',',
-        },
-        /**
-         * Show suggestions on focus event
-         */
-        suggestOnFocus: {
-            type: Boolean,
-            default: true,
-        },
-        /**
-         * Min length to show suggestions
-         */
-        minLength: {
-            type: Number,
-            default: 0,
-        },
-        /**
-         * Defines the dropdown's max-height
-         */
-        dropdownMaxHeight: {
-            default: '',
-        },
-        /**
-         * Auto width
-         */
-        autoWidth: {
-            type: Boolean,
-            default: true,
-        },
-    },
-    data() {
-        return {
-            loading: false,
-            suggestedOptions: [],
-            caretIndex: 0,
-            dataListCursorIndex: -1,
-            filterTID: null,
-            inputBinds: {
-                placeholder: this.placeholder,
-                readonly: this.readonly,
-            },
-            inputEvents: {
-                change: this.onInputChange,
-                input: this.onInputInput,
-                keydown: this.onInputKeyDown,
-                focus: this.onInputFocus,
-                blur: this.onInputBlur,
-            },
-            delimitedValuePrev: null,
-        };
-    },
-    computed: {
-        delimitedIndex() {
-            let sub = this.value.substring(0, this.caretIndex);
-            let m = [];
-            let i = -1;
-            while ((i = sub.indexOf(this.delimiter, i + 1)) != -1) {
-                m.push(i);
-            }
-            return m ? m.length : 0;
-        },
-        delimitedValue() {
-            if (this.delimiter) {
-                return this.value.split(this.delimiter)[this.delimitedIndex];
-            }
-            return this.value;
-        },
-    },
-    methods: {
-        defaultFilter(val, options) {
-            return new Promise(resolve => {
-                let arr = options.filter(opt => opt.toLowerCase().indexOf(val.toLowerCase()) === 0);
-                resolve(arr);
-            });
-        },
-        callFilter(val) {
-            let prev = this.delimitedValuePrev;
-            this.delimitedValuePrev = val;
-            if (val === prev) {
-                return;
-            }
-            if (!val.length && !this.filter) {
-                this.suggestedOptions = this.options;
-                this.dataListCursorIndex = -1;
-                return;
-            }
-            this.loading = true;
-            let h = this.filter ? this.filter : this.defaultFilter;
-            h(val, this.options)
-                .then(arr => {
-                    this.suggestedOptions = arr;
-                    this.dataListCursorIndex = -1;
-                })
-                .finally(() => (this.loading = false));
-        },
-        callFilterDebounced(val) {
-            this.clearFilterTimeout();
-            this.filterTID = setTimeout(() => this.callFilter(val), this.filterDebounce);
-        },
-        clearFilterTimeout() {
-            if (this.filterTID) {
-                clearTimeout(this.filterTID);
-                this.filterTID = null;
-            }
-        },
-        selectOption(opt) {
-            let val = opt;
-            if (this.delimiter) {
-                let arr = this.value.split(this.delimiter);
-                arr[this.delimitedIndex] = opt;
-                val = arr.join(this.delimiter);
-            }
-            /**
-             * Value change event
-             * @property {String} value
-             */
-            this.$emit('input', val);
-            /**
-             * Value change event
-             * @property {String} value
-             */
-            this.$emit('change', val);
-            this.popoverShow = false;
-        },
-        getDatalistRef() {
-            return this.$refs.datalist;
-        },
-        onRootFocus(e) {
-            let input = this.getInputRef();
-            input && input.focus();
-        },
-        onInputBlur(e) {
-            this.rootHasFocus = false;
-            /**
-             * Blur event reemit
-             * @property {Event} event
-             */
-            this.$emit('blur', e);
-        },
-        onInputFocus(e) {
-            this.rootHasFocus = true;
-            /**
-             * Input focus event
-             * @property {Node} node
-             */
-            this.$emit('focus', e.target);
-
-            if (!this.suggestOnFocus) {
-                return;
-            }
-
-            this.popoverShow = true;
-            this.caretIndex = e.target ? e.target.selectionStart : 0;
-            this.$nextTick(() => {
-                if (this.delimitedValue.length < this.minLength) {
-                    this.popoverShow = false;
-                    this.suggestedOptions = [];
-                    this.delimitedValuePrev = this.delimitedValue;
-                    return;
-                }
-                this.callFilterDebounced(this.delimitedValue);
-            });
-        },
-        onInputChange(e) {
-            let val = e.target.value;
-            /**
-             * Change event
-             * @property {String} value
-             */
-            this.$emit('change', val);
-        },
-        onInputInput(e) {
-            let val = e.target.value;
-            /**
-             * input event
-             * @property {String} value
-             */
-            this.$emit('input', val);
-
-            this.popoverShow = true;
-            this.caretIndex = e.target ? e.target.selectionStart : 0;
-            this.$nextTick(() => {
-                if (this.delimitedValue.length < this.minLength) {
-                    this.popoverShow = false;
-                    this.suggestedOptions = [];
-                    this.delimitedValuePrev = this.delimitedValue;
-                    return;
-                }
-                this.callFilterDebounced(this.delimitedValue);
-            });
-        },
-        onInputKeyDown(e) {
-            let list = this.getDatalistRef();
-            if (e.key === Key.ESC) {
-                this.popoverShow = false;
-            }
-            if (e.key === Key.ENTER) {
-                if (!this.popoverShow) {
-                    this.popoverShow = true;
-                }
-            }
-            if (this.popoverShow) {
-                list && list.onKeyDown(e);
-            }
-        },
-        onDatalistSelectOption({ option }) {
-            this.selectOption(option);
-        },
-    },
-};
-</script>
+<template>
+    <div
+        class="ui-input-autocomplete form-elem"
+        :class="cssClass"
+        @focus="onRootFocus"
+        tabindex="0"
+        :data-popover="popoverTargetId"
+    >
+        <div style="flex: 1 0 0">
+            <!-- 
+            @slot Custom input slot
+            @binding {String} id    input id attribute value
+            @binding {String} value    input value
+            @binding {Object} inputBinds    input props (use v-bind)
+            @binding {Object} inputEvents    input events (use v-on)
+            -->
+            <slot name="input" v-bind="{ id: inputId, value, inputBinds, inputEvents }">
+                <input
+                    :id="inputId"
+                    class="ui-input-autocomplete-input w-100"
+                    type="text"
+                    :value="value"
+                    v-bind="inputBinds"
+                    v-on="inputEvents"
+                />
+            </slot>
+        </div>
+        <!-- 
+        @slot Loading custom content
+        -->
+        <slot name="loading" v-if="loading">
+            <div class="icon w-auto h-auto">
+                <div class="preloader"></div>
+            </div>
+        </slot>
+        <ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
+            <ui-datalist
+                class="w-100 pull-left"
+                @select-option="onDatalistSelectOption"
+                v-bind="{ size, maxHeight: dropdownMaxHeight, options: suggestedOptions }"
+                :cursorIndex.sync="dataListCursorIndex"
+                ref="datalist"
+            >
+                <template #header>
+                    <!-- 
+                    @slot Dropdown header content
+                    -->
+                    <slot name="dropdown-header"></slot>
+                    <!-- 
+                    @slot No results content
+                    -->
+                    <slot name="noresults" v-if="!loading && !suggestedOptions.length"></slot>
+                </template>
+                <template #option="{ option, index, cursorIndex, setCursorIndex }">
+                    <!-- 
+                    @slot Dropdown option
+                    @binding {String} option         option label
+                    @binding {Number} optionIndex    option index
+                    @binding {String} value          current value
+                    @binding {String} valueLocal     current delimited value
+                    @binding {Number} cursorIndex    current dropdown selection index 
+                    @binding {Function} selectOption    function that select's the option
+                    @binding {Function} setCursorIndex  function that sets the cursor index
+                    -->
+                    <slot
+                        name="option"
+                        v-bind="{
+                            option: option,
+                            optionIndex: index,
+                            value,
+                            valueLocal: delimitedValue,
+                            cursorIndex,
+                            selectOption,
+                            setCursorIndex,
+                        }"
+                    ></slot>
+                </template>
+                <template #footer>
+                    <slot name="dropdown-footer"></slot>
+                </template>
+            </ui-datalist>
+        </ui-popover>
+        <!-- 
+        @slot Custom clear btn slot
+        @binding {Function} clear   function that clears the value
+        -->
+        <slot
+            name="clear-btn"
+            v-if="useClearBtn && value.length > 0"
+            v-bind="{ clear: clearValue }"
+        >
+            <i class="mdi mdi-close cursor-pointer" @click="clearValue"></i>
+        </slot>
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-input-autocomplete {
+    display: inline-flex;
+    align-items: center;
+    &-input {
+        border: none;
+        line-height: 1.5;
+        margin: 0;
+        padding: 0;
+        color: inherit;
+        background: transparent;
+        outline: none;
+    }
+}
+</style>
+<script>
+import { Key } from './utils/Helpers';
+import FormComponent from './utils/FormComponent';
+import WithPopover from './utils/WithPopover';
+import UiDatalist from './Datalist.vue';
+import UiPopover from './Popover.vue';
+
+export default {
+    mixins: [FormComponent, WithPopover],
+    components: { UiDatalist, UiPopover },
+    props: {
+        /**
+         * Dropdown option (suggestions)
+         */
+        options: {
+            type: Array,
+            default() {
+                return [];
+            },
+        },
+        /**
+         * Function which filters suggestions function(val, options):Promise<Array>
+         */
+        filter: {
+            type: Function,
+            default: null,
+        },
+        /**
+         * Filter debounce delay in ms
+         */
+        filterDebounce: {
+            type: Number,
+            default: 0,
+        },
+        /**
+         * Value delimiter for multiple autocomplete suggestions
+         */
+        delimiter: {
+            type: String,
+            default: ',',
+        },
+        /**
+         * Show suggestions on focus event
+         */
+        suggestOnFocus: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Min length to show suggestions
+         */
+        minLength: {
+            type: Number,
+            default: 0,
+        },
+        /**
+         * Defines the dropdown's max-height
+         */
+        dropdownMaxHeight: {
+            default: '',
+        },
+        /**
+         * Auto width
+         */
+        autoWidth: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Clear data btn
+         */
+        useClearBtn: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            loading: false,
+            suggestedOptions: [],
+            caretIndex: 0,
+            dataListCursorIndex: -1,
+            filterTID: null,
+            inputBinds: {
+                placeholder: this.placeholder,
+                readonly: this.readonly,
+            },
+            inputEvents: {
+                change: this.onInputChange,
+                input: this.onInputInput,
+                keydown: this.onInputKeyDown,
+                focus: this.onInputFocus,
+                blur: this.onInputBlur,
+            },
+            delimitedValuePrev: null,
+        };
+    },
+    computed: {
+        delimitedIndex() {
+            let sub = this.value.substring(0, this.caretIndex);
+            let m = [];
+            let i = -1;
+            while ((i = sub.indexOf(this.delimiter, i + 1)) != -1) {
+                m.push(i);
+            }
+            return m ? m.length : 0;
+        },
+        delimitedValue() {
+            if (this.delimiter) {
+                return this.value.split(this.delimiter)[this.delimitedIndex];
+            }
+            return this.value;
+        },
+    },
+    methods: {
+        clearValue() {
+            this.$emit('input', '');
+            this.caretIndex = 0;
+            this.delimitedValuePrev = null;
+            this.filterTID = null;
+            this.suggestedOptions = [];
+        },
+        defaultFilter(val, options) {
+            return new Promise(resolve => {
+                let arr = options.filter(opt => opt.toLowerCase().indexOf(val.toLowerCase()) === 0);
+                resolve(arr);
+            });
+        },
+        callFilter(val) {
+            let prev = this.delimitedValuePrev;
+            this.delimitedValuePrev = val;
+            if (val === prev) {
+                return;
+            }
+            if (!val.length && !this.filter) {
+                this.suggestedOptions = this.options;
+                this.dataListCursorIndex = -1;
+                return;
+            }
+            this.loading = true;
+            let h = this.filter ? this.filter : this.defaultFilter;
+            h(val, this.options)
+                .then(arr => {
+                    this.suggestedOptions = arr;
+                    this.dataListCursorIndex = -1;
+                })
+                .finally(() => (this.loading = false));
+        },
+        callFilterDebounced(val) {
+            this.clearFilterTimeout();
+            this.filterTID = setTimeout(() => this.callFilter(val), this.filterDebounce);
+        },
+        clearFilterTimeout() {
+            if (this.filterTID) {
+                clearTimeout(this.filterTID);
+                this.filterTID = null;
+            }
+        },
+        selectOption(opt) {
+            let val = opt;
+            if (this.delimiter) {
+                let arr = this.value.split(this.delimiter);
+                arr[this.delimitedIndex] = opt;
+                val = arr.join(this.delimiter);
+            }
+            /**
+             * Value change event
+             * @property {String} value
+             */
+            this.$emit('input', val);
+            /**
+             * Value change event
+             * @property {String} value
+             */
+            this.$emit('change', val);
+            this.popoverShow = false;
+        },
+        getDatalistRef() {
+            return this.$refs.datalist;
+        },
+        onRootFocus(e) {
+            let input = this.getInputRef();
+            input && input.focus();
+        },
+        onInputBlur(e) {
+            this.rootHasFocus = false;
+            /**
+             * Blur event reemit
+             * @property {Event} event
+             */
+            this.$emit('blur', e);
+        },
+        onInputFocus(e) {
+            this.rootHasFocus = true;
+            /**
+             * Input focus event
+             * @property {Node} node
+             */
+            this.$emit('focus', e.target);
+
+            if (!this.suggestOnFocus) {
+                return;
+            }
+
+            this.popoverShow = true;
+            this.caretIndex = e.target ? e.target.selectionStart : 0;
+            this.$nextTick(() => {
+                if (this.delimitedValue.length < this.minLength) {
+                    this.popoverShow = false;
+                    this.suggestedOptions = [];
+                    this.delimitedValuePrev = this.delimitedValue;
+                    return;
+                }
+                this.callFilterDebounced(this.delimitedValue);
+            });
+        },
+        onInputChange(e) {
+            let val = e.target.value;
+            /**
+             * Change event
+             * @property {String} value
+             */
+            this.$emit('change', val);
+        },
+        onInputInput(e) {
+            let val = e.target.value;
+            /**
+             * input event
+             * @property {String} value
+             */
+            this.$emit('input', val);
+
+            this.popoverShow = true;
+            this.caretIndex = e.target ? e.target.selectionStart : 0;
+            this.$nextTick(() => {
+                if (this.delimitedValue.length < this.minLength) {
+                    this.popoverShow = false;
+                    this.suggestedOptions = [];
+                    this.delimitedValuePrev = this.delimitedValue;
+                    return;
+                }
+                this.callFilterDebounced(this.delimitedValue);
+            });
+        },
+        onInputKeyDown(e) {
+            let list = this.getDatalistRef();
+            if (e.key === Key.ESC) {
+                this.popoverShow = false;
+            }
+            if (e.key === Key.ENTER) {
+                if (!this.popoverShow) {
+                    this.popoverShow = true;
+                }
+            }
+            if (this.popoverShow) {
+                list && list.onKeyDown(e);
+            }
+        },
+        onDatalistSelectOption({ option }) {
+            this.selectOption(option);
+        },
+    },
+};
+</script>