@signal24/vue-foundation 3.3.4 → 3.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@signal24/vue-foundation",
-    "version": "3.3.4",
+    "version": "3.7.1",
     "description": "Common components, directives, and helpers for Vue 3 apps",
     "main": "src/index.js",
     "scripts": {
@@ -8,21 +8,21 @@
     },
     "license": "MIT",
     "dependencies": {
-        "axios": "^0.21.1",
+        "axios": "^0.26.0",
         "jquery": "^3.6.0",
         "lodash": "^4.17.21",
         "moment": "^2.29.1",
-        "vue": "^3.2.29",
         "vue-stash-nested": "fergusean/vue-stash-nested#vue-foundation-3"
     },
     "devDependencies": {
-        "@vue/eslint-config-prettier": "^6.0.0",
-        "eslint": "^7.32.0",
-        "eslint-plugin-prettier": "^3.4.1",
+        "@vue/eslint-config-prettier": "^7.0.0",
+        "eslint": "^8.10.0",
+        "eslint-plugin-prettier": "^4.0.0",
         "eslint-plugin-simple-import-sort": "^7.0.0",
-        "eslint-plugin-vue": "^7.20.0",
+        "eslint-plugin-vue": "^8.5.0",
         "prettier": "^2.5.1",
-        "sass": "^1.49.7",
-        "sass-loader": "^10"
+        "sass": "^1.49.9",
+        "sass-loader": "^12",
+        "vue": "^3.2.31"
     }
 }

package/src/components/smart-select.vue

@@ -41,14 +41,16 @@ import debounce from 'lodash/debounce';
 const nullSymbol = Symbol(null);
 const createSymbol = Symbol('create');
 
-const VALID_KEYS = `\`1234567890-=[]\;',./~!@#$%^&*()_+{}|:"<>?qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM`;
+const VALID_KEYS = `\`1234567890-=[]\\;',./~!@#$%^&*()_+{}|:"<>?qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM`;
 
 export default {
-    emits: ['optionsLoaded', 'createItem'],
+    emits: ['optionsLoaded', 'createItem', 'update:modelValue'],
 
     props: [
         'modelValue',
         'options',
+        'prependOptions',
+        'appendOptions',
         'preload',
         'url',
         'urlParams',
@@ -71,8 +73,7 @@ export default {
     data() {
         return {
             isLoaded: false,
-            resolvedOptions: [],
-            decoratedOptions: [],
+            loadedOptions: [],
             isSearching: false,
             searchText: '',
             selectedOption: null,
@@ -84,8 +85,11 @@ export default {
     },
 
     computed: {
+        /**
+         * EFFECTIVE PROPS
+         */
         effectiveDisabled() {
-            return this.disabled || !this.resolvedOptions;
+            return this.disabled || !this.loadedOptions;
         },
 
         effectivePlaceholder() {
@@ -94,8 +98,73 @@ export default {
             return this.placeholder || '';
         },
 
+        effectiveIdKey() {
+            return this.idKey || 'id';
+        },
+
+        effectiveTitleKey() {
+            return this.titleKey || 'name';
+        },
+
+        effectiveValueKey() {
+            if (this.valueKey) return this.valueKey;
+            if (this.options && !Array.isArray(this.options)) return this.effectiveIdKey;
+            return undefined;
+        },
+
+        effectiveNoResultsText() {
+            return this.noResultsText || 'No options match your search.';
+        },
+
+        /**
+         * OPTIONS GENERATION
+         */
+
+        loadedOptionsArray() {
+            return this.arrayifyOptions(this.loadedOptions);
+        },
+
+        prependOptionsArray() {
+            return this.prependOptions ? this.arrayifyOptions(this.prependOptions) : [];
+        },
+
+        appendOptionsArray() {
+            return this.appendOptions ? this.arrayifyOptions(this.appendOptions) : [];
+        },
+
+        fullOptionsArray() {
+            return [...this.prependOptionsArray, ...this.loadedOptionsArray, ...this.appendOptionsArray];
+        },
+
+        optionsDescriptors() {
+            return this.fullOptionsArray.map((option, index) => {
+                const title = this.getOptionTitle(option);
+                const subtitle = this.getOptionSubtitle(option);
+                const strippedTitle = title ? title.text.trim().toLowerCase() : '';
+                const strippedSubtitle = subtitle ? subtitle.text.trim().toLowerCase() : '';
+
+                let searchContent = [];
+                if (this.searchFields) {
+                    this.searchFields.forEach(field => {
+                        option[field] && searchContent.push(String(option[field]).toLowerCase());
+                    });
+                } else {
+                    searchContent.push(strippedTitle);
+                    strippedSubtitle && searchContent.push(strippedSubtitle);
+                }
+
+                return {
+                    key: typeof option == 'object' ? option[this.effectiveIdKey] || index : option,
+                    titleHtml: title.html,
+                    subtitleHtml: subtitle?.html,
+                    searchContent: searchContent.join(''),
+                    ref: option
+                };
+            });
+        },
+
         effectiveOptions() {
-            let options = [...this.decoratedOptions];
+            let options = [...this.optionsDescriptors];
 
             if (this.isSearching) {
                 const strippedSearchText = this.searchText.trim().toLowerCase();
@@ -133,18 +202,6 @@ export default {
             }
 
             return options;
-        },
-
-        effectiveIdKey() {
-            return this.idKey || 'id';
-        },
-
-        effectiveTitleKey() {
-            return this.titleKey || 'name';
-        },
-
-        effectiveNoResultsText() {
-            return this.noResultsText || 'No options match your search.';
         }
     },
 
@@ -156,7 +213,7 @@ export default {
         },
 
         options() {
-            this.resolvedOptions = this.options;
+            this.loadedOptions = this.options;
         },
 
         url() {
@@ -169,32 +226,7 @@ export default {
 
         // data
 
-        resolvedOptions() {
-            this.decoratedOptions = this.resolvedOptions.map((option, index) => {
-                const title = this.getOptionTitle(option);
-                const subtitle = this.getOptionSubtitle(option);
-                const strippedTitle = title ? title.text.trim().toLowerCase() : '';
-                const strippedSubtitle = subtitle ? subtitle.text.trim().toLowerCase() : '';
-
-                let searchContent = [];
-                if (this.searchFields) {
-                    this.searchFields.forEach(field => {
-                        option[field] && searchContent.push(String(option[field]).toLowerCase());
-                    });
-                } else {
-                    searchContent.push(strippedTitle);
-                    strippedSubtitle && searchContent.push(strippedSubtitle);
-                }
-
-                return {
-                    key: typeof option == 'object' ? option[this.effectiveIdKey] || index : option,
-                    titleHtml: title.html,
-                    subtitleHtml: subtitle?.html,
-                    searchContent: searchContent.join(''),
-                    ref: option
-                };
-            });
-
+        optionsDescriptors() {
             this.shouldDisplayOptions && setTimeout(this.highlightInitialOption, 0);
         },
 
@@ -225,17 +257,19 @@ export default {
         this.shouldShowCreateOption = this.$attrs['onCreateItem'] !== undefined;
 
         if (this.options) {
-            this.resolvedOptions = this.options;
+            this.loadedOptions = this.options;
             this.isLoaded = true;
         } else if (this.$isPropTruthy(this.preload)) {
-            this.performInitialLoad();
+            await this.performInitialLoad();
         }
 
         this.handleValueChanged();
 
         this.$watch('selectedOption', () => {
             const newValue =
-                this.selectedOption && this.valueKey ? this.selectedOption[this.valueKey] : this.selectedOption;
+                this.selectedOption && this.effectiveValueKey
+                    ? this.selectedOption[this.effectiveValueKey]
+                    : this.selectedOption;
             newValue === this.modelValue || this.$emit('update:modelValue', newValue);
         });
     },
@@ -243,7 +277,7 @@ export default {
     methods: {
         async performInitialLoad() {
             await this.reloadOptions();
-            this.$emit('optionsLoaded', this.resolvedOptions);
+            this.$emit('optionsLoaded', this.loadedOptions);
 
             if (this.$isPropTruthy(this.remoteSearch)) {
                 this.$watch('searchText', debounce(this.reloadOptionsIfSearching, 250));
@@ -254,7 +288,7 @@ export default {
             if (this.preload) return this.reloadOptions();
             if (!this.isLoaded) return;
             this.isLoaded = false;
-            this.resolvedOptions = [];
+            this.loadedOptions = [];
         },
 
         async reloadOptions() {
@@ -263,7 +297,7 @@ export default {
             this.$isPropTruthy(this.remoteSearch) && this.searchText && (params.q = this.searchText);
 
             const result = await this.$http.get(this.url, { params: params });
-            this.resolvedOptions = result.data;
+            this.loadedOptions = result.data;
             this.isLoaded = true;
         },
 
@@ -429,10 +463,10 @@ export default {
                 this.selectedOptionTitle = null;
                 this.$emit('createItem', createText);
             } else {
-                const optionIndex = this.decoratedOptions.findIndex(
+                const selectedDecoratedOption = this.optionsDescriptors.find(
                     decoratedOption => decoratedOption.key == option.key
                 );
-                const realOption = this.resolvedOptions[optionIndex];
+                const realOption = selectedDecoratedOption.ref;
                 this.selectedOption = realOption;
                 this.selectedOptionTitle = this.getOptionTitle(this.selectedOption).text;
                 this.searchText = this.selectedOptionTitle || '';
@@ -443,9 +477,9 @@ export default {
 
         handleValueChanged() {
             if (this.modelValue) {
-                if (this.valueKey) {
-                    this.selectedOption = this.resolvedOptions.find(
-                        option => option[this.valueKey] === this.modelValue
+                if (this.effectiveValueKey) {
+                    this.selectedOption = this.fullOptionsArray.find(
+                        option => option[this.effectiveValueKey] === this.modelValue
                     );
                 } else {
                     this.selectedOption = this.modelValue;
@@ -509,7 +543,16 @@ export default {
         },
 
         addRemoteOption(option) {
-            this.resolvedOptions.push(option);
+            this.loadedOptions.push(option);
+        },
+
+        arrayifyOptions(options) {
+            return Array.isArray(options)
+                ? options
+                : Object.entries(options).map(entry => ({
+                      [this.effectiveIdKey]: entry[0],
+                      [this.effectiveTitleKey]: entry[1]
+                  }));
         }
     }
 };