@signal24/vue-foundation 3.7.1 → 3.7.4

package/package.json

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

package/src/components/modal.vue

@@ -1,30 +1,39 @@
 <template>
-    <div class="vf-overlay vf-modal-wrap">
-        <form
-            action="."
-            class="vf-modal"
-            :class="{ scrolls: $isPropTruthy(this.scrolls) }"
-            @submit.prevent="$emit('formSubmit')"
-        >
-            <div v-if="$slots.header" class="vf-modal-header">
-                <slot name="header" />
-                <i v-if="$isPropTruthy(this.closeX)" class="close" @click="$parent.$dismiss()"></i>
-            </div>
-            <div class="vf-modal-content">
-                <slot />
-            </div>
-            <div v-if="$slots.footer" class="vf-modal-footer">
-                <slot name="footer" />
-            </div>
-        </form>
-    </div>
+    <Teleport to="#vf-modal-target">
+        <div class="vf-overlay vf-modal-wrap" :class="class">
+            <form
+                action="."
+                class="vf-modal"
+                :class="{ scrolls: $isPropTruthy(this.scrolls) }"
+                @submit.prevent="$emit('formSubmit')"
+            >
+                <div v-if="$slots.header" class="vf-modal-header">
+                    <slot name="header" />
+                    <i v-if="$isPropTruthy(this.closeX)" class="close" @click="$parent.$dismiss()"></i>
+                </div>
+                <div class="vf-modal-content">
+                    <slot />
+                </div>
+                <div v-if="$slots.footer" class="vf-modal-footer">
+                    <slot name="footer" />
+                </div>
+            </form>
+        </div>
+    </Teleport>
 </template>
 
 <script>
 export default {
-    props: ['closeOnMaskClick', 'scrolls', 'closeX'],
+    props: ['closeOnMaskClick', 'scrolls', 'closeX', 'class'],
     emits: ['formSubmit'],
 
+    beforeCreate() {
+        const targetEl = document.getElementById('vf-modal-target') ?? document.createElement('div');
+        targetEl.id = 'vf-modal-target';
+        targetEl.removeAttribute('inert');
+        document.body.appendChild(targetEl);
+    },
+
     mounted() {
         window.addEventListener('keydown', this.handleEscapeKey);
         document.body.classList.add('vf-modal-open');

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');
@@ -116,6 +117,10 @@ export default {
             return this.noResultsText || 'No options match your search.';
         },
 
+        effectiveRemoteSearch() {
+            return this.$isPropTruthy(this.remoteSearch);
+        },
+
         /**
          * OPTIONS GENERATION
          */
@@ -217,21 +222,33 @@ export default {
         },
 
         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
 
         optionsDescriptors() {
-            this.shouldDisplayOptions && setTimeout(this.highlightInitialOption, 0);
+            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() {
@@ -260,7 +277,7 @@ export default {
             this.loadedOptions = this.options;
             this.isLoaded = true;
         } else if (this.$isPropTruthy(this.preload)) {
-            await this.performInitialLoad();
+            await this.loadRemoteOptions();
         }
 
         this.handleValueChanged();
@@ -270,21 +287,24 @@ export default {
                 this.selectedOption && this.effectiveValueKey
                     ? this.selectedOption[this.effectiveValueKey]
                     : this.selectedOption;
-            newValue === this.modelValue || this.$emit('update:modelValue', newValue);
+            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.loadedOptions);
-
-            if (this.$isPropTruthy(this.remoteSearch)) {
-                this.$watch('searchText', debounce(this.reloadOptionsIfSearching, 250));
-            }
         },
 
         handleSourceUpdate() {
+            console.log('source updated');
             if (this.preload) return this.reloadOptions();
             if (!this.isLoaded) return;
             this.isLoaded = false;
@@ -294,7 +314,10 @@ export default {
         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.loadedOptions = result.data;
@@ -302,7 +325,10 @@ export default {
         },
 
         reloadOptionsIfSearching() {
-            this.isSearching && this.reloadOptions();
+            if (this.isSearching) {
+                this.reloadOptions();
+                this.isSearching = this.searchText.trim().length > 0;
+            }
         },
 
         handleKeyDown(e) {
@@ -344,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;
             }
 
@@ -376,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);
         },
@@ -452,6 +480,8 @@ export default {
         },
 
         selectOption(option) {
+            this.isSearching = false;
+
             if (option.key == nullSymbol) {
                 this.searchText = '';
                 this.selectedOption = null;