@signal24/vue-foundation 4.25.5 → 4.25.7

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "4.25.5",
+    "version": "4.25.7",
     "description": "Common components, directives, and helpers for Vue 3 apps",
     "module": "./dist/vue-foundation.es.js",
     "exports": {

package/src/components/vf-smart-select.vue

@@ -51,7 +51,7 @@
 
 <script lang="ts" setup generic="T, V = T">
 import { debounce, groupBy, isEqual, uniq } from 'lodash';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import { isNotNullOrUndefined } from '@/helpers';
 
@@ -111,8 +111,7 @@ const searchField = ref<HTMLInputElement>();
 const optionsContainer = ref<HTMLDivElement>();
 
 const isLoading = ref(false);
-const isLoaded = ref(false);
-const loadedOptions = ref<T[]>();
+const remoteOptions = ref<T[]>();
 const isSearching = ref(false);
 const searchText = ref('');
 const selectedOption = ref<T | null>(null);
@@ -122,9 +121,12 @@ const highlightedOptionKey = ref<string | symbol | null>(null);
 const shouldShowCreateOption = ref(false);
 const shouldShowCreateTextOnNewItem = computed(() => props.showCreateTextOnNewItem ?? true);
 
+const isLoaded = computed(() => !!(props.options || remoteOptions.value));
+const loadedOptions = computed(() => props.options ?? remoteOptions.value ?? []);
+
 const effectivePrependOptions = computed(() => props.prependOptions ?? []);
 const effectiveAppendOptions = computed(() => props.appendOptions ?? []);
-const effectiveDisabled = computed(() => !!props.disabled || (!props.options && !loadedOptions.value));
+const effectiveDisabled = computed(() => !!props.disabled || !isLoaded.value);
 const effectivePlaceholder = computed(() => {
     if (!isLoaded.value && props.preload) return 'Loading...';
     if (props.nullTitle) return props.nullTitle;
@@ -158,7 +160,7 @@ const effectiveSelectionFormatter = computed(() => {
     return effectiveFormatter.value;
 });
 
-const allOptions = computed(() => [...effectivePrependOptions.value, ...(loadedOptions.value ?? []), ...effectiveAppendOptions.value]);
+const allOptions = computed(() => [...effectivePrependOptions.value, ...loadedOptions.value, ...effectiveAppendOptions.value]);
 const isGrouped = computed(() => !!(props.groupField || props.groupFormatter));
 
 const optionsDescriptors = computed(() => {
@@ -254,13 +256,6 @@ const groupedOptions = computed(() => {
 
 // watch props
 watch(() => props.modelValue, handleValueChanged);
-watch(
-    () => props.options,
-    () => {
-        loadedOptions.value = props.options;
-        isLoaded.value = true;
-    }
-);
 
 // watch data
 
@@ -306,10 +301,7 @@ watch(effectiveOptions, () => {
 onMounted(async () => {
     shouldShowCreateOption.value = props.onCreateItem !== undefined;
 
-    if (props.options) {
-        loadedOptions.value = [...props.options];
-        isLoaded.value = true;
-    } else if (props.loadOptions && props.preload) {
+    if (props.loadOptions && props.preload) {
         await loadRemoteOptions();
     }
 
@@ -335,17 +327,20 @@ onMounted(async () => {
     }
 });
 
+onBeforeUnmount(() => {
+    optionsContainer.value?.remove();
+});
+
 async function loadRemoteOptions() {
     await reloadOptions();
-    if (loadedOptions.value) emit('optionsLoaded', loadedOptions.value);
+    if (remoteOptions.value) emit('optionsLoaded', remoteOptions.value);
 }
 
 async function reloadOptions() {
     const effectiveSearchText = props.remoteSearch && isSearching.value && searchText.value.length ? searchText.value : null;
     isLoading.value = true;
-    loadedOptions.value = (await props.loadOptions?.(effectiveSearchText)) ?? [];
+    remoteOptions.value = (await props.loadOptions?.(effectiveSearchText)) ?? [];
     isLoading.value = false;
-    isLoaded.value = true;
 }
 
 function reloadOptionsIfSearching() {
@@ -571,7 +566,7 @@ function handleValueChanged() {
 }
 
 function addRemoteOption(option: T) {
-    loadedOptions.value!.unshift(option);
+    remoteOptions.value!.unshift(option);
 }
 
 function focusNextInput() {