goodteditor-ui 1.0.98 → 1.0.100

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.98",
+    "version": "1.0.100",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {

package/src/components/ui/Searchbar.vue

@@ -28,6 +28,8 @@
     </div>
 </template>
 <script>
+import { debounce } from 'lodash';
+
 const Size = {
     NORMAL: { name: '', class: [] },
     SMALL: { name: 'small', class: ['input-small'] }
@@ -65,6 +67,10 @@ export default {
             type: Boolean,
             default: false
         },
+        debounce: {
+            type: Number,
+            default: 0
+        },
         embedded: {
             type: Boolean,
             default: false
@@ -83,11 +89,35 @@ export default {
             return Object.values(Size).find(({ name }) => name === size)?.class;
         }
     },
+    created() {
+        if (this.debounce > 0) {
+            const { emitInputDebounced } = this;
+            this.emitInputDebounced = debounce(emitInputDebounced.bind(this), this.debounce);
+        }
+    },
     methods: {
+        /**
+         * @param {string} val
+         * @param {boolean} isDebounced
+         */
+        emitInput(val = '', isDebounced = false) {
+            const { emitInputDebounced, emitInputOriginal } = this;
+            const method = isDebounced ? emitInputDebounced : emitInputOriginal;
+            method(val);
+        },
+        /**
+         * @param {string} val
+         */
+        emitInputDebounced(val = '') {
+            /**
+             * @property {string} value
+             */
+            this.emitInputOriginal(val);
+        },
         /**
          * @param {string} val
          */
-        emitInput(val = '') {
+        emitInputOriginal(val = '') {
             /**
              * @property {string} value
              */
@@ -121,7 +151,7 @@ export default {
          * @param {InputEvent} e
          */
         onInput({ target }) {
-            this.emitInput(target.value);
+            this.emitInput(target.value, true);
         },
         /**
          * @param {InputEvent} e
@@ -149,10 +179,9 @@ export default {
 </script>
 <style scoped lang="pcss">
 .form-control--embedded .input {
+    background: transparent;
     border: none;
     outline: none;
-    padding-top: 0;
-    padding-bottom: 0;
     min-height: initial;
 }
 </style>

package/src/components/ui/Select.d.ts

@@ -0,0 +1,33 @@
+/** Любой объект или стандартная структура опции */
+export type Option = { label: string; value: any } | any;
+
+export interface OptionSettings {
+    valueField?: string;
+    labelField?: string;
+    /** поле, по которому перед группой опций,
+     * будет рисоваться хедер группы, когда оно меняется
+     * опции должны изначально быть отсортированы по группам
+     * */
+    groupField?: string | null;
+    disabledField?: string;
+    valueObjects?: boolean;
+    /** Функция для проверки значения опции */
+    valueOfOptionChecker?: (option: { label: string; value: any } | Record<string, any>) => boolean;
+}
+
+export interface DropdownSettings {
+    class?: string | string[];
+    maxHeight?: string | null;
+    maxItems?: number;
+    itemHeight?: string | null;
+}
+
+export interface SearchSettings {
+    minItems?: number;
+    debounce?: number;
+}
+
+export type MultipleSettings = {
+    pin?: boolean;
+    hideOnSelect?: boolean;
+};

package/src/components/ui/Select.vue

@@ -10,16 +10,21 @@
             <!--
             @slot search slot
             -->
-            <slot v-if="search && popoverShow" name="label-search">
-                <ui-searchbar
-                    tabindex="1"
-                    v-model="searchQuery"
-                    :size="size"
-                    embedded
-                    class="ui-select-searchbar"
-                    ref="searchbar"
-                    @click.native.stop></ui-searchbar>
-            </slot>
+            <div v-if="hasSearch && popoverShow" class="ui-select-searchbar-wrapper">
+                <slot name="label-search" v-bind="{ search: searchQuery }">
+                    <ui-searchbar
+                        v-model="searchQuery"
+                        v-bind="{
+                            size,
+                            embedded: true,
+                            debounce: searchSettings.debounce
+                        }"
+                        tabindex="1"
+                        class="w-100"
+                        ref="searchbar"
+                        @click.native.stop></ui-searchbar>
+                </slot>
+            </div>
             <template v-else-if="multiple">
                 <template v-if="optionsSelected.length > 0">
                     <!--
@@ -34,7 +39,7 @@
                         v-bind="{
                             selected: optionsSelected,
                             deselectOption,
-                            clear: clearOptions
+                            clear: clearOptions,
                         }">
                         <slot
                             name="label-multiple"
@@ -101,7 +106,7 @@
         @slot Reset state icon slot
         -->
         <slot
-            v-if="clear && optionsSelected.length > 0 && (search === false || popoverShow === false)"
+            v-if="clear && optionsSelected.length > 0 && (hasSearch === false || popoverShow === false)"
             name="icon-clear"
             v-bind="{ clear: clearOptions }">
             <i
@@ -117,7 +122,7 @@
         -->
         <slot name="icon-open" v-if="popoverShow">
             <i
-                class="icon mdi mdi-chevron-up"
+                class="icon icon-toggle mdi mdi-chevron-up"
                 :class="{
                     'mdi-18px': size === '',
                     'h-auto w-auto': size === 'small'
@@ -128,7 +133,7 @@
         -->
         <slot name="icon-close" v-else>
             <i
-                class="icon mdi mdi-chevron-down"
+                class="icon icon-toggle mdi mdi-chevron-down"
                 :class="{
                     'mdi-18px': size === '',
                     'h-auto w-auto': size === 'small'
@@ -187,7 +192,17 @@
                             selectOption,
                             deselectOption,
                             toggleOption
-                        }"></slot>
+                        }">
+                        <slot
+                            v-if="isShowGroup({ option, index })"
+                            name="option:before-group"
+                            v-bind="{
+                                option,
+                                index,
+                                group: getOptionGroup(option)
+                            }">
+                        </slot>
+                    </slot>
                     <!--
                     @slot option slot mode
                     @binding {Object} option             option
@@ -218,13 +233,14 @@
                             toggleOption,
                             // legacy
                             optionIndex: index,
-                            isOptionSelected: isOptionSelected(option)
+                            isOptionSelected: isOptionSelected(option),
+                            search: searchQuery
                         }">
                         <li
                             :class="{
                                 active: isOptionSelected(option),
                                 'bg-grey-lighter': index == cursorIndex,
-                                disabled: isOptionDisabled(option)
+                                'option-disabled': isOptionDisabled(option)
                             }"
                             :key="index"
                             :title="getOptionLabel(option)"
@@ -263,7 +279,9 @@
                                         label: getOptionLabel(option),
                                         index,
                                         isSelected: isOptionSelected(option),
-                                        cursorIndex
+                                        isDisabled: isOptionDisabled(option),
+                                        cursorIndex,
+                                        search: searchQuery
                                     }">
                                     {{ getOptionLabel(option) }}
                                 </slot>
@@ -295,7 +313,8 @@
                             cursorIndex,
                             selectOption,
                             deselectOption,
-                            toggleOption
+                            toggleOption,
+                            search: searchQuery
                         }"></slot>
                 </template>
                 <template #footer>
@@ -310,6 +329,7 @@
 </template>
 <style lang="less" scoped>
 .ui-select {
+    position: relative;
     display: inline-flex;
     align-items: center;
 
@@ -320,7 +340,8 @@
         flex: 1 0 0;
     }
 
-    .icon-clear {
+    .icon-clear, .icon-toggle {
+        z-index: 1;
         cursor: pointer;
     }
 
@@ -336,20 +357,34 @@
         }
     }
 
-    &-searchbar {
-        margin-left: calc(-1 * var(--spacer3));
-        width: calc(100% + var(--spacer5));
+    &-searchbar-wrapper {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        padding-right: var(--spacer6);
     }
 }
 
 .ui-datalist {
-    .active:hover {
+    .option-disabled, .option-disabled:hover {
+        background-color: transparent;
+        color: var(--color-grey-light);
+        cursor: not-allowed;
+    }
+
+    .active:hover:not(.disabled) {
         background-color: var(--color-primary-hover);
     }
+
     &.multiple {
         li + li {
             border-top: 1px solid transparent;
         }
+
         .active + .active {
             border-color: var(--color-primary-hover);
         }
@@ -361,6 +396,7 @@
 }
 </style>
 <script>
+import { isEqual } from 'lodash';
 import UiBadge from './Badge.vue';
 import UiDatalist from './Datalist.vue';
 import UiPopover from './Popover.vue';
@@ -370,24 +406,11 @@ import UiSearchbar from './Searchbar.vue';
 import { Key } from './utils/Helpers';
 
 /**
- * @typedef {{
- *     valueField?: string,
- *     labelField?: string,
- *     disabledField?: string,
- *     valueObjects?: boolean,
- *     valueOfOptionChecker?: (option: { label: string, value: any } | Record<string,  any>) => boolean
- * }} OptionSettings
- *
- * @typedef {{
- *     class?: string|string[],
- *     maxHeight?: null|string,
- *     maxItems?: number,
- *     itemHeight?: null|string
- * }} DropdownSettings
- *
- * @typedef {{
- *     pin?: boolean
- * }} MultipleSettings
+ * @typedef {import('./Select').Option} Option
+ * @typedef {import('./Select').OptionSettings} OptionSettings
+ * @typedef {import('./Select').DropdownSettings} DropdownSettings
+ * @typedef {import('./Select').SearchSettings} SearchSettings
+ * @typedef {import('./Select').MultipleSettings} MultipleSettings
  */
 
 /**
@@ -399,7 +422,6 @@ const DropdownSettingsDefault = {
     maxItems: 5,
     itemHeight: null
 };
-
 /**
  * @type {OptionSettings}
  */
@@ -407,15 +429,23 @@ const OptionSettingsDefault = {
     valueField: 'value',
     labelField: 'label',
     disabledField: 'disabled',
+    groupField: null,
     valueObjects: false,
     valueOfOptionChecker: null
 };
-
 /**
  * @type {MultipleSettings}
  */
 const MultipleSettingsDefault = {
-    pin: false
+    pin: false,
+    hideOnSelect: false
+};
+/**
+ * @type {SearchSettings}
+ */
+const SearchSettingsDefault = {
+    minItems: 5,
+    debounce: 0
 };
 
 export default {
@@ -465,31 +495,20 @@ export default {
         },
         /**
          * Allow embedded search
-         * @type {import('vue').PropOptions<boolean | {
-         *     clear?: boolean,
-         * }>}
+         * @type {import('vue').PropOptions<boolean | SearchSettings>}
          */
         search: {
             type: [Boolean, Object],
             default: false
         },
         /**
-         * Allow multiple selection
+         * Option-related settings
          * @type {import('vue').PropOptions<OptionSettings>}
+         * @default {}
          */
         option: {
             type: Object,
-            default() {
-                return {
-                    /*
-                    valueField: 'value',
-                    labelField: 'label',
-                    disabledField: '',
-                    valueObjects: false,
-                    valueOfOptionChecker: null
-                    */
-                };
-            }
+            default: null
         },
         /**
          * Defines whether 'value' is the option value field or option object
@@ -536,15 +555,11 @@ export default {
         // DATALIST OPTIONS
         /**
          * Dropdown extra config options
-         * @type {import('vue').PropOptions<DropdownSettings>}
+         * @type {import('vue').PropOptions<DropdownSettings|null>}
          */
         datalist: {
-            /*
-            class: '',
-            maxHeight: null,
-            maxItems: 5,
-            itemHeight: null
-            */
+            type: Object,
+            default: null
         },
         /**
          * Datalist css classes (optional)
@@ -576,12 +591,28 @@ export default {
     },
     data() {
         return {
+            /**
+             * @type {any[]}
+             */
             optionsSelected: [],
             dataListCursorIndex: -1,
             searchQuery: ''
         };
     },
     computed: {
+        /**
+         * @return {boolean}
+         */
+        isSelectedRemovable() {
+            return this.readonly === false && this.disabled === false;
+        },
+        /**
+         * @return {boolean}
+         */
+        hasSearch() {
+            const { search, searchSettings: { minItems }, options } = this;
+            return search !== false && options.length > minItems;
+        },
         /**
          * @return {object}
          */
@@ -592,12 +623,15 @@ export default {
             }
             return this.cssClass;
         },
+        /**
+         * @return {string}
+         */
         selectedBadgeTheme() {
             return this.disabled ? '' : 'primary';
         },
-        isSelectedRemovable() {
-            return this.readonly === false && this.disabled === false;
-        },
+        /**
+         * @return {Option[]}
+         */
         optionsInternal() {
             let {
                 searchQuery,
@@ -620,13 +654,13 @@ export default {
          * @return {OptionSettings}
          */
         optionSettings() {
-            const { labelField, labelValue, disabledField, labelObjects, valueOfOptionChecker, option } = this;
+            const { labelField, valueField, disabledField, valueObjects, valueOfOptionChecker, option } = this;
             return {
                 ...OptionSettingsDefault,
                 labelField,
-                labelValue,
+                valueField,
                 disabledField,
-                labelObjects,
+                valueObjects,
                 valueOfOptionChecker,
                 ...option
             };
@@ -635,16 +669,33 @@ export default {
          * @return {DropdownSettings & { size: string }}
          */
         dropdownSettings() {
-            const { datalistCssClass, maxItems, itemHeight, maxHeight, datalist, size } = this;
+            const { datalistCssClass, datalist, size } = this;
             return {
                 ...DropdownSettingsDefault,
                 class: datalistCssClass,
-                maxItems,
-                itemHeight,
-                maxHeight,
                 size,
                 ...datalist
             };
+        },
+        /**
+         * @return {SearchSettings}
+         */
+        searchSettings() {
+            const { search } = this;
+            return {
+                ...SearchSettingsDefault,
+                ...search
+            };
+        },
+        /**
+         * @return {MultipleSettings}
+         */
+        multipleSettings() {
+            const { multiple } = this;
+            return {
+                ...MultipleSettingsDefault,
+                ...multiple
+            };
         }
     },
     watch: {
@@ -659,12 +710,17 @@ export default {
         },
         popoverShow(isPopoverShown) {
             this.$emit('options-toggle', isPopoverShown);
-            if (this.search !== false) {
+            if (this.hasSearch !== false) {
                 this.handleSearchbar(isPopoverShown);
             }
         }
     },
     methods: {
+        /**
+         * @param option
+         * @param modelItem
+         * @return {boolean}
+         */
         isValueOfOptionDefault(option, modelItem) {
             const { valueObjects } = this.optionSettings;
             const modelValue = valueObjects ? this.getOptionValue(modelItem) : modelItem;
@@ -773,6 +829,16 @@ export default {
         getOptionIndex(option) {
             return this.optionsInternal.indexOf(option);
         },
+        /**
+         * @param {Option} option
+         * @return {any|null}
+         */
+        getOptionGroup(option) {
+            const {
+                optionSettings: { groupField }
+            } = this;
+            return option == null ? null : option[groupField] ?? null;
+        },
         /**
          * @param {Option} option
          * @return {boolean}
@@ -791,6 +857,9 @@ export default {
             let disabled = option ? option[disabledField] : null;
             return Boolean(disabled);
         },
+        /**
+         * @return {function(): void}
+         */
         createOptionRollback() {
             const optionsSelected = [...this.optionsSelected];
             return () => {
@@ -803,18 +872,29 @@ export default {
          * @param {Option} option
          */
         selectOption(option) {
-            if (this.readonly) {
+            const {
+                multiple,
+                /**
+                 * @type {MultipleSettings}
+                 */
+                multipleSettings,
+                readonly,
+                optionsSelected
+            } = this;
+            if (this.isOptionSelected(option)) {
                 return;
             }
-            if (this.isOptionSelected(option)) {
+            if (readonly || this.isOptionDisabled(option)) {
                 return;
             }
 
             const rollback = this.createOptionRollback();
-            if (this.multiple) {
-                this.optionsSelected.push(option);
+            if (multiple) {
+                optionsSelected.push(option);
             } else {
                 this.optionsSelected = [option];
+            }
+            if (!multiple || multipleSettings.hideOnSelect) {
                 this.popoverShow = false;
             }
 
@@ -824,16 +904,25 @@ export default {
          * @param {Option} option
          */
         deselectOption(option) {
-            const { multiple, readonly, optionsSelected } = this;
-            if (readonly) {
+            const { multiple, multipleSettings, readonly, optionsSelected } = this;
+            if (readonly || this.isOptionDisabled(option)) {
                 return;
             }
-            if (!multiple) {
-                this.popoverShow = false;
+            if (!this.isOptionSelected(option)) {
                 return;
             }
+
             const rollback = this.createOptionRollback();
-            optionsSelected.splice(optionsSelected.indexOf(option), 1);
+            if (multiple) {
+                this.optionsSelected = optionsSelected.toSpliced(optionsSelected.indexOf(option), 1);
+            } else {
+                this.optionsSelected = [];
+            }
+
+            if (!multiple || multipleSettings.hideOnSelect) {
+                this.popoverShow = false;
+            }
+
             this.triggerModelChange(rollback);
         },
         /**
@@ -855,6 +944,10 @@ export default {
         getDatalistRef() {
             return this.$refs.datalist;
         },
+        /**
+         *
+         * @param isPopoverShown
+         */
         handleSearchbar(isPopoverShown) {
             if (!isPopoverShown) {
                 this.searchQuery = '';
@@ -864,6 +957,21 @@ export default {
                 this.$refs.searchbar.focus();
             });
         },
+        isShowGroup({ option, index }) {
+            const { groupField } = this.optionSettings;
+            if (groupField == null) {
+                return false;
+            }
+            if (index === 0) {
+                return true;
+            }
+            const { optionsInternal } = this;
+            const currentGroup = this.getOptionGroup(option);
+            const prevGroup = this.getOptionGroup(optionsInternal[index - 1]);
+            return isEqual(prevGroup, currentGroup) === false;
+        },
+
+        // EVENTS
         onClick() {
             const { popoverShow, optionsSelected } = this;
             this.togglePopover();