goodteditor-ui 1.0.21 → 1.0.23

package/src/components/ui/Select.vue

@@ -1,421 +1,421 @@
-<template>
-    <div
-        class="ui-select form-elem"
-        :class="cssClassExt"
-        @keydown.prevent="onKeyDown"
-        @click="onClick"
-        tabindex="0"
-        :data-popover="popoverTargetId"
-    >
-        <div class="ui-select-label u-select-none">
-            <template v-if="multiple">
-                <template v-if="optionsSelected.length">
-                    <!--
-                    @slot Label slot for multiple mode
-                    @binding {Object} option                option
-                    @binding {any} value                    option's value
-                    @binding {String} label                 option's label
-                    @binding {Function} deselectOption      deselects option function(option:Object)
-                    -->
-                    <slot
-                        name="label-multiple"
-                        v-for="(option, index) in optionsSelected"
-                        v-bind="{
-                            option,
-                            value: getOptionValue(option),
-                            label: getOptionLabel(option),
-                            deselectOption,
-                        }"
-                    >
-                        <ui-badge
-                            class="mar-none mar-right-2"
-                            theme="primary"
-                            size="small"
-                            :key="index"
-                            removable
-                            @click.native.stop
-                            @remove="deselectOption(option)"
-                        >
-                            <span>{{ getOptionLabel(option) }}</span>
-                        </ui-badge>
-                    </slot>
-                </template>
-                <div class="ui-select-placeholder events-none" v-else>
-                    <!--
-                    @slot Placeholder slot
-                    -->
-                    <slot name="placeholder">
-                        <input class="w-100" :placeholder="placeholder" />
-                    </slot>
-                </div>
-            </template>
-
-            <template v-else>
-                <!--
-                @slot Label slot for single mode
-                @binding {Object} option    option
-                @binding {any} value        option's value
-                @binding {String} label     option's label
-                -->
-                <slot
-                    name="label"
-                    v-bind="{
-                        option: optionsSelected[0],
-                        value: getOptionValue(optionsSelected[0]),
-                        label: getOptionLabel(optionsSelected[0]),
-                    }"
-                    v-if="optionsSelected.length"
-                >
-                    {{ getOptionLabel(optionsSelected[0]) }}
-                </slot>
-                <div class="ui-select-placeholder events-none" v-else>
-                    <!--
-                    @slot Placeholder slot
-                    -->
-                    <slot name="placeholder">
-                        <input class="w-100" :placeholder="placeholder" />
-                    </slot>
-                </div>
-            </template>
-        </div>
-        <!--
-        @slot Open state icon slot
-        -->
-        <slot name="icon-open" v-if="popoverShow">
-            <div class="icon w-auto h-auto mar-left-2 events-none">
-                <i class="mdi mdi-chevron-up"></i>
-            </div>
-        </slot>
-        <!--
-        @slot Close state icon slot
-        -->
-        <slot name="icon-close" v-else>
-            <div class="icon w-auto h-auto mar-left-2 events-none">
-                <i class="mdi mdi-chevron-down"></i>
-            </div>
-        </slot>
-
-        <ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
-            <ui-datalist
-                class="w-100 pull-left"
-                @click.native.stop
-                @select-option="onDatalistSelectOption"
-                v-bind="{ size, options }"
-                :cursorIndex.sync="dataListCursorIndex"
-                ref="datalist"
-            >
-                <template #header>
-                    <!--
-                    @slot Dropdown header slot
-                    -->
-                    <slot name="dropdown-header"></slot>
-                </template>
-                <template #option="{ option, index, cursorIndex }">
-                    <!--
-                    @slot Label slot for single mode
-                    @binding {Object} option             option
-                    @binding {any} value                 option's value
-                    @binding {String} label              option's label
-                    @binding {Number} index              option's index
-                    @binding {Boolean} isSelected        option selection status
-                    @binding {Number} cursorIndex        current cursor index
-                    @binding {Function} selectOption     function that selects option
-                    @binding {Function} deselectOption   function that deselects option
-                    @binding {Function} toggleOption     function that toggles option selection
-                    @binding {Number} optionIndex           option's index
-                    @binding {Boolean} isOptionSelected     option selection status
-                    -->
-                    <slot
-                        name="option"
-                        v-bind="{
-                            option,
-                            value: getOptionValue(option),
-                            label: getOptionLabel(option),
-                            index,
-                            isSelected: isOptionSelected(option),
-                            cursorIndex,
-                            selectOption,
-                            deselectOption,
-                            toggleOption,
-                            // legacy
-                            optionIndex: index,
-                            isOptionSelected: isOptionSelected(option),
-                        }"
-                    >
-                        <li
-                            :class="{
-                                active: isOptionSelected(option),
-                                'bg-grey-lighter': index == cursorIndex,
-                            }"
-                            :key="index"
-                            :title="getOptionLabel(option)"
-                            @click="toggleOption(option)"
-                        >
-                            <div class="row row-collapse" v-if="multiple">
-                                <div class="col col-vmid text-truncate">
-                                    <div
-                                        class="text-truncate"
-                                        style="min-height: calc(var(--line-height)*1em)"
-                                    >
-                                        {{ getOptionLabel(option) }}
-                                    </div>
-                                </div>
-                                <div class="col col-auto col-vmid" v-if="isOptionSelected(option)">
-                                    <i class="mdi mdi-check" style="line-height:1"></i>
-                                </div>
-                            </div>
-                            <div
-                                class="text-truncate"
-                                style="min-height: calc(var(--line-height)*1rem)"
-                                v-else
-                            >
-                                {{ getOptionLabel(option) }}
-                            </div>
-                        </li>
-                    </slot>
-                </template>
-                <template #footer>
-                    <!--
-                    @slot Dropdown footer slot
-                    -->
-                    <slot name="dropdown-footer"></slot>
-                </template>
-            </ui-datalist>
-        </ui-popover>
-    </div>
-</template>
-<style lang="less" scoped>
-.ui-select {
-    display: inline-flex;
-    align-items: center;
-    &-label {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        flex: 1 0 0;
-    }
-    &-placeholder {
-        input {
-            border: none;
-            margin: 0;
-            padding: 0;
-            color: inherit;
-            background: transparent;
-        }
-    }
-}
-</style>
-<script>
-import UiBadge from './Badge.vue';
-import UiDatalist from './Datalist.vue';
-import UiPopover from './Popover.vue';
-import FormComponent from './utils/FormComponent';
-import WithPopover from './utils/WithPopover';
-import { Key } from './utils/Helpers';
-
-export default {
-    components: {
-        UiBadge,
-        UiDatalist,
-        UiPopover,
-    },
-    mixins: [FormComponent, WithPopover],
-    props: {
-        /**
-         * @model
-         */
-        value: {
-            default() {
-                return null;
-            },
-        },
-        /**
-         * Options. Array of Objects (option objects)
-         */
-        options: {
-            type: Array,
-            default() {
-                return [];
-            },
-        },
-        /**
-         * Allow multiple selection
-         */
-        multiple: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * Defines whether 'value' is the option value field or option object
-         * @see options
-         */
-        valueObjects: {
-            type: Boolean,
-            default: false,
-        },
-        /**
-         * Defines the 'value' field of the option Object
-         */
-        valueField: {
-            type: String,
-            default: 'value',
-        },
-        /**
-         * Defines the 'label' field of the option Object
-         */
-        labelField: {
-            type: String,
-            default: 'label',
-        },
-        autoWidth: {
-            default: true,
-        },
-    },
-    data() {
-        return {
-            optionsSelected: [],
-            dataListCursorIndex: -1,
-        };
-    },
-    computed: {
-        /**
-         * @return {object}
-         */
-        cssClassExt() {
-            let obj = { 'u-select-none': this.readonly };
-            return { ...this.cssClass, ...obj };
-        },
-    },
-    watch: {
-        value: {
-            handler(model) {
-                this.importModel(model);
-            },
-            immediate: true,
-        },
-        options() {
-            this.importModel(this.value);
-        },
-    },
-    methods: {
-        importModel(model) {
-            let ci = -1;
-            let tmp = [];
-            model = this.multiple ? (Array.isArray(model) ? model : [model]) : [model];
-            model.forEach(modelItem => {
-                let modelItemValue = this.valueObjects ? this.getOptionValue(modelItem) : modelItem;
-                let optionIndex = this.options.findIndex(optionItem => {
-                    let optionItemValue = this.getOptionValue(optionItem);
-                    return optionItemValue === modelItemValue;
-                });
-                if (optionIndex >= 0) {
-                    ci = ci < 0 ? optionIndex : ci;
-                    tmp.push(this.options[optionIndex]);
-                }
-            });
-            this.dataListCursorIndex = ci;
-            this.optionsSelected = tmp;
-        },
-        exportModel() {
-            let model = this.optionsSelected.map(option =>
-                this.valueObjects ? option : this.getOptionValue(option)
-            );
-            if (this.multiple) {
-                return model;
-            }
-            return model && model.length ? model[0] : null;
-        },
-        triggerModelChange() {
-            let value = this.exportModel();
-            /**
-             * Input event
-             * @property {any} value
-             */
-            this.$emit('input', value);
-            /**
-             * Change event
-             * @property {any} model
-             * @property {Array} meta
-             */
-            this.$emit('change', value);
-        },
-        getOptionLabel(option) {
-            let label = option ? option[this.labelField] : null;
-            return label == null ? option : label;
-        },
-        getOptionValue(option) {
-            let value = option ? option[this.valueField] : null;
-            // @NOTE option.value might be 'null'
-            return value === undefined ? option : value;
-        },
-        getOptionIndex(option) {
-            return this.options.findIndex(
-                o => this.getOptionValue(o) === this.getOptionValue(option)
-            );
-        },
-        isOptionSelected(option) {
-            return !!this.optionsSelected.find(
-                o => this.getOptionValue(o) === this.getOptionValue(option)
-            );
-        },
-        selectOption(option) {
-            if (this.isOptionSelected(option)) {
-                return;
-            }
-            if (this.multiple) {
-                this.optionsSelected.push(option);
-            } else {
-                this.optionsSelected = [option];
-                this.popoverShow = false;
-            }
-            this.triggerModelChange();
-        },
-        deselectOption(option) {
-            if (!this.multiple) {
-                this.popoverShow = false;
-                return;
-            }
-            this.optionsSelected = this.optionsSelected.filter(
-                o => this.getOptionValue(o) !== this.getOptionValue(option)
-            );
-            this.triggerModelChange();
-        },
-        toggleOption(option) {
-            if (!this.isOptionSelected(option)) {
-                this.selectOption(option);
-            } else {
-                this.deselectOption(option);
-            }
-        },
-        getDatalistRef() {
-            return this.$refs.datalist;
-        },
-        onClick(e) {
-            this.togglePopover();
-            this.rootHasFocus = true;
-            this.$el.focus();
-            if (this.popoverShow && this.optionsSelected.length) {
-                this.dataListCursorIndex = this.getOptionIndex(this.optionsSelected[0]);
-            }
-        },
-        onDatalistSelectOption({ option }) {
-            this.toggleOption(option);
-        },
-        onKeyDown(e) {
-            let list = this.getDatalistRef();
-            if (e.key === Key.ESC) {
-                this.popoverShow = false;
-                return;
-            }
-            if (e.key === Key.ENTER) {
-                if (!this.popoverShow) {
-                    this.popoverShow = true;
-                }
-            }
-            if (this.popoverShow) {
-                list && list.onKeyDown(e);
-            }
-        },
-    },
-};
-</script>
+<template>
+    <div
+        class="ui-select form-elem"
+        :class="cssClassExt"
+        @keydown.prevent="onKeyDown"
+        @click="onClick"
+        tabindex="0"
+        :data-popover="popoverTargetId"
+    >
+        <div class="ui-select-label u-select-none">
+            <template v-if="multiple">
+                <template v-if="optionsSelected.length">
+                    <!--
+                    @slot Label slot for multiple mode
+                    @binding {Object} option                option
+                    @binding {any} value                    option's value
+                    @binding {String} label                 option's label
+                    @binding {Function} deselectOption      deselects option function(option:Object)
+                    -->
+                    <slot
+                        name="label-multiple"
+                        v-for="(option, index) in optionsSelected"
+                        v-bind="{
+                            option,
+                            value: getOptionValue(option),
+                            label: getOptionLabel(option),
+                            deselectOption,
+                        }"
+                    >
+                        <ui-badge
+                            class="mar-none mar-right-2"
+                            theme="primary"
+                            size="small"
+                            :key="index"
+                            removable
+                            @click.native.stop
+                            @remove="deselectOption(option)"
+                        >
+                            <span>{{ getOptionLabel(option) }}</span>
+                        </ui-badge>
+                    </slot>
+                </template>
+                <div class="ui-select-placeholder events-none" v-else>
+                    <!--
+                    @slot Placeholder slot
+                    -->
+                    <slot name="placeholder">
+                        <input class="w-100" :placeholder="placeholder" />
+                    </slot>
+                </div>
+            </template>
+
+            <template v-else>
+                <!--
+                @slot Label slot for single mode
+                @binding {Object} option    option
+                @binding {any} value        option's value
+                @binding {String} label     option's label
+                -->
+                <slot
+                    name="label"
+                    v-bind="{
+                        option: optionsSelected[0],
+                        value: getOptionValue(optionsSelected[0]),
+                        label: getOptionLabel(optionsSelected[0]),
+                    }"
+                    v-if="optionsSelected.length"
+                >
+                    {{ getOptionLabel(optionsSelected[0]) }}
+                </slot>
+                <div class="ui-select-placeholder events-none" v-else>
+                    <!--
+                    @slot Placeholder slot
+                    -->
+                    <slot name="placeholder">
+                        <input class="w-100" :placeholder="placeholder" />
+                    </slot>
+                </div>
+            </template>
+        </div>
+        <!--
+        @slot Open state icon slot
+        -->
+        <slot name="icon-open" v-if="popoverShow">
+            <div class="icon w-auto h-auto mar-left-2 events-none">
+                <i class="mdi mdi-chevron-up"></i>
+            </div>
+        </slot>
+        <!--
+        @slot Close state icon slot
+        -->
+        <slot name="icon-close" v-else>
+            <div class="icon w-auto h-auto mar-left-2 events-none">
+                <i class="mdi mdi-chevron-down"></i>
+            </div>
+        </slot>
+
+        <ui-popover :show.sync="popoverShow" v-bind="popoverOptions">
+            <ui-datalist
+                class="w-100 pull-left"
+                @click.native.stop
+                @select-option="onDatalistSelectOption"
+                v-bind="{ size, options }"
+                :cursorIndex.sync="dataListCursorIndex"
+                ref="datalist"
+            >
+                <template #header>
+                    <!--
+                    @slot Dropdown header slot
+                    -->
+                    <slot name="dropdown-header"></slot>
+                </template>
+                <template #option="{ option, index, cursorIndex }">
+                    <!--
+                    @slot Label slot for single mode
+                    @binding {Object} option             option
+                    @binding {any} value                 option's value
+                    @binding {String} label              option's label
+                    @binding {Number} index              option's index
+                    @binding {Boolean} isSelected        option selection status
+                    @binding {Number} cursorIndex        current cursor index
+                    @binding {Function} selectOption     function that selects option
+                    @binding {Function} deselectOption   function that deselects option
+                    @binding {Function} toggleOption     function that toggles option selection
+                    @binding {Number} optionIndex           option's index
+                    @binding {Boolean} isOptionSelected     option selection status
+                    -->
+                    <slot
+                        name="option"
+                        v-bind="{
+                            option,
+                            value: getOptionValue(option),
+                            label: getOptionLabel(option),
+                            index,
+                            isSelected: isOptionSelected(option),
+                            cursorIndex,
+                            selectOption,
+                            deselectOption,
+                            toggleOption,
+                            // legacy
+                            optionIndex: index,
+                            isOptionSelected: isOptionSelected(option),
+                        }"
+                    >
+                        <li
+                            :class="{
+                                active: isOptionSelected(option),
+                                'bg-grey-lighter': index == cursorIndex,
+                            }"
+                            :key="index"
+                            :title="getOptionLabel(option)"
+                            @click="toggleOption(option)"
+                        >
+                            <div class="row row-collapse" v-if="multiple">
+                                <div class="col col-vmid text-truncate">
+                                    <div
+                                        class="text-truncate"
+                                        style="min-height: calc(var(--line-height)*1em)"
+                                    >
+                                        {{ getOptionLabel(option) }}
+                                    </div>
+                                </div>
+                                <div class="col col-auto col-vmid" v-if="isOptionSelected(option)">
+                                    <i class="mdi mdi-check" style="line-height:1"></i>
+                                </div>
+                            </div>
+                            <div
+                                class="text-truncate"
+                                style="min-height: calc(var(--line-height)*1rem)"
+                                v-else
+                            >
+                                {{ getOptionLabel(option) }}
+                            </div>
+                        </li>
+                    </slot>
+                </template>
+                <template #footer>
+                    <!--
+                    @slot Dropdown footer slot
+                    -->
+                    <slot name="dropdown-footer"></slot>
+                </template>
+            </ui-datalist>
+        </ui-popover>
+    </div>
+</template>
+<style lang="less" scoped>
+.ui-select {
+    display: inline-flex;
+    align-items: center;
+    &-label {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        flex: 1 0 0;
+    }
+    &-placeholder {
+        input {
+            border: none;
+            margin: 0;
+            padding: 0;
+            color: inherit;
+            background: transparent;
+        }
+    }
+}
+</style>
+<script>
+import UiBadge from './Badge.vue';
+import UiDatalist from './Datalist.vue';
+import UiPopover from './Popover.vue';
+import FormComponent from './utils/FormComponent';
+import WithPopover from './utils/WithPopover';
+import { Key } from './utils/Helpers';
+
+export default {
+    components: {
+        UiBadge,
+        UiDatalist,
+        UiPopover,
+    },
+    mixins: [FormComponent, WithPopover],
+    props: {
+        /**
+         * @model
+         */
+        value: {
+            default() {
+                return null;
+            },
+        },
+        /**
+         * Options. Array of Objects (option objects)
+         */
+        options: {
+            type: Array,
+            default() {
+                return [];
+            },
+        },
+        /**
+         * Allow multiple selection
+         */
+        multiple: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Defines whether 'value' is the option value field or option object
+         * @see options
+         */
+        valueObjects: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Defines the 'value' field of the option Object
+         */
+        valueField: {
+            type: String,
+            default: 'value',
+        },
+        /**
+         * Defines the 'label' field of the option Object
+         */
+        labelField: {
+            type: String,
+            default: 'label',
+        },
+        autoWidth: {
+            default: true,
+        },
+    },
+    data() {
+        return {
+            optionsSelected: [],
+            dataListCursorIndex: -1,
+        };
+    },
+    computed: {
+        /**
+         * @return {object}
+         */
+        cssClassExt() {
+            let obj = { 'u-select-none': this.readonly };
+            return { ...this.cssClass, ...obj };
+        },
+    },
+    watch: {
+        value: {
+            handler(model) {
+                this.importModel(model);
+            },
+            immediate: true,
+        },
+        options() {
+            this.importModel(this.value);
+        },
+    },
+    methods: {
+        importModel(model) {
+            let ci = -1;
+            let tmp = [];
+            model = this.multiple ? (Array.isArray(model) ? model : [model]) : [model];
+            model.forEach(modelItem => {
+                let modelItemValue = this.valueObjects ? this.getOptionValue(modelItem) : modelItem;
+                let optionIndex = this.options.findIndex(optionItem => {
+                    let optionItemValue = this.getOptionValue(optionItem);
+                    return optionItemValue === modelItemValue;
+                });
+                if (optionIndex >= 0) {
+                    ci = ci < 0 ? optionIndex : ci;
+                    tmp.push(this.options[optionIndex]);
+                }
+            });
+            this.dataListCursorIndex = ci;
+            this.optionsSelected = tmp;
+        },
+        exportModel() {
+            let model = this.optionsSelected.map(option =>
+                this.valueObjects ? option : this.getOptionValue(option)
+            );
+            if (this.multiple) {
+                return model;
+            }
+            return model && model.length ? model[0] : null;
+        },
+        triggerModelChange() {
+            let value = this.exportModel();
+            /**
+             * Input event
+             * @property {any} value
+             */
+            this.$emit('input', value);
+            /**
+             * Change event
+             * @property {any} model
+             * @property {Array} meta
+             */
+            this.$emit('change', value);
+        },
+        getOptionLabel(option) {
+            let label = option ? option[this.labelField] : null;
+            return label == null ? option : label;
+        },
+        getOptionValue(option) {
+            let value = option ? option[this.valueField] : null;
+            // @NOTE option.value might be 'null'
+            return value === undefined ? option : value;
+        },
+        getOptionIndex(option) {
+            return this.options.findIndex(
+                o => this.getOptionValue(o) === this.getOptionValue(option)
+            );
+        },
+        isOptionSelected(option) {
+            return !!this.optionsSelected.find(
+                o => this.getOptionValue(o) === this.getOptionValue(option)
+            );
+        },
+        selectOption(option) {
+            if (this.isOptionSelected(option)) {
+                return;
+            }
+            if (this.multiple) {
+                this.optionsSelected.push(option);
+            } else {
+                this.optionsSelected = [option];
+                this.popoverShow = false;
+            }
+            this.triggerModelChange();
+        },
+        deselectOption(option) {
+            if (!this.multiple) {
+                this.popoverShow = false;
+                return;
+            }
+            this.optionsSelected = this.optionsSelected.filter(
+                o => this.getOptionValue(o) !== this.getOptionValue(option)
+            );
+            this.triggerModelChange();
+        },
+        toggleOption(option) {
+            if (!this.isOptionSelected(option)) {
+                this.selectOption(option);
+            } else {
+                this.deselectOption(option);
+            }
+        },
+        getDatalistRef() {
+            return this.$refs.datalist;
+        },
+        onClick(e) {
+            this.togglePopover();
+            this.rootHasFocus = true;
+            this.$el.focus();
+            if (this.popoverShow && this.optionsSelected.length) {
+                this.dataListCursorIndex = this.getOptionIndex(this.optionsSelected[0]);
+            }
+        },
+        onDatalistSelectOption({ option }) {
+            this.toggleOption(option);
+        },
+        onKeyDown(e) {
+            let list = this.getDatalistRef();
+            if (e.key === Key.ESC) {
+                this.popoverShow = false;
+                return;
+            }
+            if (e.key === Key.ENTER) {
+                if (!this.popoverShow) {
+                    this.popoverShow = true;
+                }
+            }
+            if (this.popoverShow) {
+                list && list.onKeyDown(e);
+            }
+        },
+    },
+};
+</script>