@signal24/vue-foundation 3.3.4 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@signal24/vue-foundation",
-    "version": "3.3.4",
+    "version": "3.6.0",
     "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,10 +41,10 @@ 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',
@@ -72,7 +72,6 @@ export default {
         return {
             isLoaded: false,
             resolvedOptions: [],
-            decoratedOptions: [],
             isSearching: false,
             searchText: '',
             selectedOption: null,
@@ -84,6 +83,10 @@ export default {
     },
 
     computed: {
+        hasManualOptionsObject() {
+            return this.options && typeof this.options === 'object' && !Array.isArray(this.options);
+        },
+
         effectiveDisabled() {
             return this.disabled || !this.resolvedOptions;
         },
@@ -143,34 +146,27 @@ export default {
             return this.titleKey || 'name';
         },
 
-        effectiveNoResultsText() {
-            return this.noResultsText || 'No options match your search.';
-        }
-    },
-
-    watch: {
-        // props
-
-        modelValue() {
-            this.handleValueChanged();
-        },
-
-        options() {
-            this.resolvedOptions = this.options;
+        effectiveValueKey() {
+            if (this.valueKey) return this.valueKey;
+            if (this.hasManualOptionsObject) return this.effectiveIdKey;
+            return undefined;
         },
 
-        url() {
-            this.handleSourceUpdate();
+        effectiveNoResultsText() {
+            return this.noResultsText || 'No options match your search.';
         },
 
-        urlParams() {
-            this.handleSourceUpdate();
+        resolvedOptionsArray() {
+            return this.hasManualOptionsObject
+                ? Object.entries(this.resolvedOptions).map(entry => ({
+                      [this.effectiveIdKey]: entry[0],
+                      [this.effectiveTitleKey]: entry[1]
+                  }))
+                : this.resolvedOptions;
         },
 
-        // data
-
-        resolvedOptions() {
-            this.decoratedOptions = this.resolvedOptions.map((option, index) => {
+        decoratedOptions() {
+            return this.resolvedOptionsArray.map((option, index) => {
                 const title = this.getOptionTitle(option);
                 const subtitle = this.getOptionSubtitle(option);
                 const strippedTitle = title ? title.text.trim().toLowerCase() : '';
@@ -194,7 +190,31 @@ export default {
                     ref: option
                 };
             });
+        }
+    },
+
+    watch: {
+        // props
+
+        modelValue() {
+            this.handleValueChanged();
+        },
+
+        options() {
+            this.resolvedOptions = this.options;
+        },
+
+        url() {
+            this.handleSourceUpdate();
+        },
+
+        urlParams() {
+            this.handleSourceUpdate();
+        },
+
+        // data
 
+        decoratedOptions() {
             this.shouldDisplayOptions && setTimeout(this.highlightInitialOption, 0);
         },
 
@@ -226,6 +246,7 @@ export default {
 
         if (this.options) {
             this.resolvedOptions = this.options;
+            // this.buildDecoratedOptions();
             this.isLoaded = true;
         } else if (this.$isPropTruthy(this.preload)) {
             this.performInitialLoad();
@@ -235,7 +256,7 @@ export default {
 
         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);
         });
     },
@@ -429,10 +450,10 @@ export default {
                 this.selectedOptionTitle = null;
                 this.$emit('createItem', createText);
             } else {
-                const optionIndex = this.decoratedOptions.findIndex(
+                const selectedDecoratedOption = this.decoratedOptions.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 +464,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.resolvedOptionsArray.find(
+                        option => option[this.effectiveValueKey] === this.modelValue
                     );
                 } else {
                     this.selectedOption = this.modelValue;