goodteditor-ui 1.0.66 → 1.0.68

package/package.json

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

package/src/components/ui/Select.vue

@@ -278,18 +278,26 @@ export default {
          * Defines the 'value' field of the option Object
          */
         valueField: {
-            type: String,
+            type: [String, Symbol],
             default: 'value'
         },
         /**
          * Defines the 'label' field of the option Object
          */
         labelField: {
-            type: String,
+            type: [String, Symbol],
             default: 'label'
         },
         autoWidth: {
             default: true
+        },
+        /**
+         * Alternative function to detect if option Object selected
+         * by compare model value with option Object valueField value
+         */
+        valueOfOptionChecker: {
+            type: Function,
+            default: null
         }
     },
     data() {
@@ -319,32 +327,38 @@ export default {
         }
     },
     methods: {
+        isValueOfOptionDefault(option, modelItem) {
+            const modelValue = this.valueObjects ? this.getOptionValue(modelItem) : modelItem;
+            const optionValue = this.getOptionValue(option);
+            return modelValue === optionValue;
+        },
+        /**
+         * @param option
+         * @param modelItem
+         * @return {boolean}
+         */
+        isValueOfOption(option, modelItem) {
+            const { valueOfOptionChecker, isValueOfOptionDefault } = this;
+            const isTrue = valueOfOptionChecker ?? isValueOfOptionDefault;
+            return isTrue(option, modelItem);
+        },
+        /**
+         * @param model
+         */
         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;
+            const { options, isValueOfOption } = this;
+            const models = [model].flat();
+            const optionsSelected = options.filter((option) => models.some((modelItem) => isValueOfOption(option, modelItem)));
+            if (optionsSelected.length > 0) {
+                this.dataListCursorIndex = this.getOptionIndex(optionsSelected[0]);
+                this.optionsSelected = this.multiple ? optionsSelected : optionsSelected[0];
+            }
         },
         exportModel() {
-            let model = this.optionsSelected.map((option) =>
+            const model = this.optionsSelected.map((option) =>
                 this.valueObjects ? option : this.getOptionValue(option)
             );
-            if (this.multiple) {
-                return model;
-            }
-            return model && model.length ? model[0] : null;
+            return this.multiple ? model : model[0] ?? null;
         },
         /**
          *
@@ -374,14 +388,11 @@ export default {
             return value === undefined ? option : value;
         },
         getOptionIndex(option) {
-            return this.options.findIndex((o) => this.getOptionValue(o) === this.getOptionValue(option));
+            return this.options.indexOf(option);
         },
         isOptionSelected(option) {
-            return !!this.optionsSelected.find((o) => this.getOptionValue(o) === this.getOptionValue(option));
+            return this.optionsSelected.includes(option);
         },
-        /**
-         * @return {function(): void} rollback
-         */
         createOptionRollback() {
             const optionsSelected = [...this.optionsSelected];
             return () => this.optionsSelected = optionsSelected;
@@ -390,6 +401,7 @@ export default {
             if (this.isOptionSelected(option)) {
                 return;
             }
+
             const rollback = this.createOptionRollback();
             if (this.multiple) {
                 this.optionsSelected.push(option);
@@ -406,9 +418,7 @@ export default {
                 return;
             }
             const rollback = this.createOptionRollback();
-            this.optionsSelected = this.optionsSelected.filter(
-                (o) => this.getOptionValue(o) !== this.getOptionValue(option)
-            );
+            this.optionsSelected.splice(this.getOptionIndex(option), 1);
             this.triggerModelChange(rollback);
         },
         toggleOption(option) {