@signal24/vue-foundation 3.6.0 → 3.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@signal24/vue-foundation",
-    "version": "3.6.0",
+    "version": "3.7.2",
     "description": "Common components, directives, and helpers for Vue 3 apps",
     "main": "src/index.js",
     "scripts": {

package/src/components/smart-select.vue

@@ -37,6 +37,7 @@
 
 <script>
 import debounce from 'lodash/debounce';
+import isEqual from 'lodash/isEqual';
 
 const nullSymbol = Symbol(null);
 const createSymbol = Symbol('create');
@@ -49,6 +50,8 @@ export default {
     props: [
         'modelValue',
         'options',
+        'prependOptions',
+        'appendOptions',
         'preload',
         'url',
         'urlParams',
@@ -71,7 +74,7 @@ export default {
     data() {
         return {
             isLoaded: false,
-            resolvedOptions: [],
+            loadedOptions: [],
             isSearching: false,
             searchText: '',
             selectedOption: null,
@@ -83,12 +86,11 @@ export default {
     },
 
     computed: {
-        hasManualOptionsObject() {
-            return this.options && typeof this.options === 'object' && !Array.isArray(this.options);
-        },
-
+        /**
+         * EFFECTIVE PROPS
+         */
         effectiveDisabled() {
-            return this.disabled || !this.resolvedOptions;
+            return this.disabled || !this.loadedOptions;
         },
 
         effectivePlaceholder() {
@@ -97,47 +99,6 @@ export default {
             return this.placeholder || '';
         },
 
-        effectiveOptions() {
-            let options = [...this.decoratedOptions];
-
-            if (this.isSearching) {
-                const strippedSearchText = this.searchText.trim().toLowerCase();
-
-                if (strippedSearchText.length) {
-                    options = options.filter(option => option.searchContent.includes(strippedSearchText));
-
-                    const escapedSearchText = this.searchText.escapeHtml().replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
-                    const searchRe = new RegExp(`(${escapedSearchText})`, 'ig');
-
-                    options = options.map(option => {
-                        option = { ...option };
-                        option.titleHtml = option.titleHtml.replace(searchRe, '<mark>$1</mark>');
-                        if (option.subtitleHtml)
-                            option.subtitleHtml = option.subtitleHtml.replace(searchRe, '<mark>$1</mark>');
-                        return option;
-                    });
-
-                    if (this.shouldShowCreateOption) {
-                        const hasExactMatch =
-                            options.find(option => option.searchContent === strippedSearchText) !== undefined;
-                        if (!hasExactMatch) {
-                            options.push({
-                                key: createSymbol,
-                                titleHtml: 'Create <strong>' + this.searchText.trim() + '</strong>...'
-                            });
-                        }
-                    }
-                }
-            } else if (this.nullTitle) {
-                options.unshift({
-                    key: nullSymbol,
-                    titleHtml: this.nullTitle
-                });
-            }
-
-            return options;
-        },
-
         effectiveIdKey() {
             return this.idKey || 'id';
         },
@@ -148,7 +109,7 @@ export default {
 
         effectiveValueKey() {
             if (this.valueKey) return this.valueKey;
-            if (this.hasManualOptionsObject) return this.effectiveIdKey;
+            if (this.options && !Array.isArray(this.options)) return this.effectiveIdKey;
             return undefined;
         },
 
@@ -156,17 +117,32 @@ export default {
             return this.noResultsText || 'No options match your search.';
         },
 
-        resolvedOptionsArray() {
-            return this.hasManualOptionsObject
-                ? Object.entries(this.resolvedOptions).map(entry => ({
-                      [this.effectiveIdKey]: entry[0],
-                      [this.effectiveTitleKey]: entry[1]
-                  }))
-                : this.resolvedOptions;
+        effectiveRemoteSearch() {
+            return this.$isPropTruthy(this.remoteSearch);
+        },
+
+        /**
+         * 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];
         },
 
-        decoratedOptions() {
-            return this.resolvedOptionsArray.map((option, index) => {
+        optionsDescriptors() {
+            return this.fullOptionsArray.map((option, index) => {
                 const title = this.getOptionTitle(option);
                 const subtitle = this.getOptionSubtitle(option);
                 const strippedTitle = title ? title.text.trim().toLowerCase() : '';
@@ -190,6 +166,47 @@ export default {
                     ref: option
                 };
             });
+        },
+
+        effectiveOptions() {
+            let options = [...this.optionsDescriptors];
+
+            if (this.isSearching) {
+                const strippedSearchText = this.searchText.trim().toLowerCase();
+
+                if (strippedSearchText.length) {
+                    options = options.filter(option => option.searchContent.includes(strippedSearchText));
+
+                    const escapedSearchText = this.searchText.escapeHtml().replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+                    const searchRe = new RegExp(`(${escapedSearchText})`, 'ig');
+
+                    options = options.map(option => {
+                        option = { ...option };
+                        option.titleHtml = option.titleHtml.replace(searchRe, '<mark>$1</mark>');
+                        if (option.subtitleHtml)
+                            option.subtitleHtml = option.subtitleHtml.replace(searchRe, '<mark>$1</mark>');
+                        return option;
+                    });
+
+                    if (this.shouldShowCreateOption) {
+                        const hasExactMatch =
+                            options.find(option => option.searchContent === strippedSearchText) !== undefined;
+                        if (!hasExactMatch) {
+                            options.push({
+                                key: createSymbol,
+                                titleHtml: 'Create <strong>' + this.searchText.trim() + '</strong>...'
+                            });
+                        }
+                    }
+                }
+            } else if (this.nullTitle) {
+                options.unshift({
+                    key: nullSymbol,
+                    titleHtml: this.nullTitle
+                });
+            }
+
+            return options;
         }
     },
 
@@ -201,25 +218,37 @@ export default {
         },
 
         options() {
-            this.resolvedOptions = this.options;
+            this.loadedOptions = this.options;
         },
 
         url() {
+            console.log('url changed');
             this.handleSourceUpdate();
         },
 
-        urlParams() {
-            this.handleSourceUpdate();
+        // we should probably solve this more consistently across the board,
+        // but for now: urlParams may be a hardcoded object in the parent, so
+        // on re-render, a new object literal may be created, which is *technically*
+        // a change that will fire this
+        urlParams(newValue, oldValue) {
+            if (!isEqual(oldValue, newValue)) {
+                this.handleSourceUpdate();
+            }
         },
 
         // data
 
-        decoratedOptions() {
-            this.shouldDisplayOptions && setTimeout(this.highlightInitialOption, 0);
+        optionsDescriptors() {
+            if (this.shouldDisplayOptions) {
+                setTimeout(this.highlightInitialOption, 0);
+            }
         },
 
         searchText() {
-            if (this.isSearching && !this.searchText.trim().length) this.isSearching = false;
+            // don't disable searching here if it's remote search, as that will need to be done after the fetch
+            if (this.isSearching && !this.effectiveRemoteSearch && !this.searchText.trim().length) {
+                this.isSearching = false;
+            }
         },
 
         shouldDisplayOptions() {
@@ -245,51 +274,61 @@ export default {
         this.shouldShowCreateOption = this.$attrs['onCreateItem'] !== undefined;
 
         if (this.options) {
-            this.resolvedOptions = this.options;
-            // this.buildDecoratedOptions();
+            this.loadedOptions = this.options;
             this.isLoaded = true;
         } else if (this.$isPropTruthy(this.preload)) {
-            this.performInitialLoad();
+            await this.loadRemoteOptions();
         }
 
         this.handleValueChanged();
 
         this.$watch('selectedOption', () => {
             const newValue =
-                this.selectedOption && this.effectiveValueKey ? this.selectedOption[this.effectiveValueKey] : this.selectedOption;
-            newValue === this.modelValue || this.$emit('update:modelValue', newValue);
+                this.selectedOption && this.effectiveValueKey
+                    ? this.selectedOption[this.effectiveValueKey]
+                    : this.selectedOption;
+            if (newValue !== this.modelValue) {
+                this.$emit('update:modelValue', newValue);
+            }
         });
+
+        if (this.effectiveRemoteSearch) {
+            this.$watch('searchText', debounce(this.reloadOptionsIfSearching, 250));
+        }
     },
 
     methods: {
-        async performInitialLoad() {
+        async loadRemoteOptions() {
             await this.reloadOptions();
-            this.$emit('optionsLoaded', this.resolvedOptions);
-
-            if (this.$isPropTruthy(this.remoteSearch)) {
-                this.$watch('searchText', debounce(this.reloadOptionsIfSearching, 250));
-            }
+            this.$emit('optionsLoaded', this.loadedOptions);
         },
 
         handleSourceUpdate() {
+            console.log('source updated');
             if (this.preload) return this.reloadOptions();
             if (!this.isLoaded) return;
             this.isLoaded = false;
-            this.resolvedOptions = [];
+            this.loadedOptions = [];
         },
 
         async reloadOptions() {
             let params = {};
             this.urlParams && Object.assign(params, this.urlParams);
-            this.$isPropTruthy(this.remoteSearch) && this.searchText && (params.q = this.searchText);
+
+            if (this.effectiveRemoteSearch && this.isSearching && 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;
         },
 
         reloadOptionsIfSearching() {
-            this.isSearching && this.reloadOptions();
+            if (this.isSearching) {
+                this.reloadOptions();
+                this.isSearching = this.searchText.trim().length > 0;
+            }
         },
 
         handleKeyDown(e) {
@@ -331,7 +370,9 @@ export default {
             }
 
             if (e.key === 'Delete' || e.key === 'Backspace') {
-                if (this.searchText.length > 1) this.isSearching = true;
+                if (this.searchText.length > 1) {
+                    this.isSearching = true;
+                }
                 return;
             }
 
@@ -363,7 +404,7 @@ export default {
         },
 
         handleOptionsDisplayed() {
-            this.isLoaded || this.$isPropTruthy(this.preload) || this.performInitialLoad();
+            this.isLoaded || this.loadRemoteOptions();
             this.teleportOptionsContainer();
             this.optionsListId && this.$refs.optionsContainer.setAttribute('id', this.optionsListId);
         },
@@ -439,6 +480,8 @@ export default {
         },
 
         selectOption(option) {
+            this.isSearching = false;
+
             if (option.key == nullSymbol) {
                 this.searchText = '';
                 this.selectedOption = null;
@@ -450,7 +493,7 @@ export default {
                 this.selectedOptionTitle = null;
                 this.$emit('createItem', createText);
             } else {
-                const selectedDecoratedOption = this.decoratedOptions.find(
+                const selectedDecoratedOption = this.optionsDescriptors.find(
                     decoratedOption => decoratedOption.key == option.key
                 );
                 const realOption = selectedDecoratedOption.ref;
@@ -465,7 +508,7 @@ export default {
         handleValueChanged() {
             if (this.modelValue) {
                 if (this.effectiveValueKey) {
-                    this.selectedOption = this.resolvedOptionsArray.find(
+                    this.selectedOption = this.fullOptionsArray.find(
                         option => option[this.effectiveValueKey] === this.modelValue
                     );
                 } else {
@@ -530,7 +573,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]
+                  }));
         }
     }
 };