@signal24/vue-foundation 4.27.0 → 4.28.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "4.27.0",
+    "version": "4.28.0",
     "description": "Common components, directives, and helpers for Vue 3 apps",
     "module": "./dist/vue-foundation.es.js",
     "exports": {
@@ -42,13 +42,13 @@
         "vue": "^3.4.0"
     },
     "devDependencies": {
-        "@eslint/js": "9.30.0",
+        "@eslint/js": "9.30.1",
         "@nabla/vite-plugin-eslint": "^2.0.5",
-        "@signal24/openapi-client-codegen": "^2.5.1",
+        "@signal24/openapi-client-codegen": "^2.5.2",
         "@tsconfig/node22": "^22.0.2",
         "@types/jsdom": "^21.1.7",
-        "@types/lodash": "^4.17.19",
-        "@types/node": "^24.0.6",
+        "@types/lodash": "^4.17.20",
+        "@types/node": "^24.0.10",
         "@types/uuid": "^10.0.0",
         "@vitejs/plugin-vue": "^6.0.0",
         "@vue/eslint-config-prettier": "^10.2.0",
@@ -56,7 +56,7 @@
         "@vue/test-utils": "^2.4.6",
         "@vue/tsconfig": "^0.7.0",
         "date-fns": "^4.1.0",
-        "eslint": "9.30.0",
+        "eslint": "9.30.1",
         "eslint-plugin-simple-import-sort": "^12.1.1",
         "eslint-plugin-unused-imports": "^4.1.4",
         "eslint-plugin-vue": "^10.2.0",
@@ -67,11 +67,11 @@
         "start-server-and-test": "^2.0.12",
         "type-fest": "^4.41.0",
         "typescript": "~5.8",
-        "typescript-eslint": "^8.35.0",
+        "typescript-eslint": "^8.35.1",
         "vite": "^7.0.0",
         "vitest": "^3.2.4",
         "vue": "^3.5.17",
-        "vue-tsc": "^2.2.10"
+        "vue-tsc": "^3.0.0"
     },
-    "packageManager": "yarn@4.6.0"
+    "packageManager": "yarn@4.9.2"
 }

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

@@ -127,8 +127,15 @@ const loadedOptions = computed(() => props.options ?? remoteOptions.value ?? [])
 const effectivePrependOptions = computed(() => props.prependOptions ?? []);
 const effectiveAppendOptions = computed(() => props.appendOptions ?? []);
 const effectiveDisabled = computed(() => !!props.disabled || (!isLoaded.value && !props.loadOptions));
+const effectiveLoadingText = computed(() => props.loadingText || '...');
 const effectivePlaceholder = computed(() => {
-    if (!isLoaded.value && props.preload) return 'Loading...';
+    if (!isLoaded.value) {
+        if (!props.loadOptions) return effectiveLoadingText.value;
+        if (props.preload) return effectiveLoadingText.value;
+        if (props.modelValue && (props.valueField || props.valueExtractor)) {
+            return effectiveLoadingText.value;
+        }
+    }
     if (props.nullTitle) return props.nullTitle;
     return props.placeholder || '';
 });
@@ -302,23 +309,27 @@ onMounted(async () => {
     shouldShowCreateOption.value = props.onCreateItem !== undefined;
 
     if (props.loadOptions && props.preload) {
+        searchText.value = effectiveLoadingText.value;
         await loadRemoteOptions();
+        searchText.value = '';
     }
 
-    if (!props.options && (props.valueField || props.valueExtractor) && (!props.loadOptions || props.preload)) {
-        searchText.value = props.loadingText ?? '...';
+    // if we have a value, but we don't have options and we use a specific field for the value,
+    // then the value is not something we can pass through the formatter.
+    // thus, we have to wait to parse the value and render the value later.
+    if (!props.options && !props.loadOptions && (props.valueField || props.valueExtractor)) {
+        searchText.value = effectiveLoadingText.value;
     } else {
         handleValueChanged();
     }
 
     watch(selectedOption, () => {
-        if (selectedOption.value !== props.modelValue) {
-            emit(
-                'update:modelValue',
-                isNotNullOrUndefined(selectedOption.value) && effectiveValueExtractor.value !== null
-                    ? effectiveValueExtractor.value(selectedOption.value)
-                    : selectedOption.value
-            );
+        const effectiveValue =
+            isNotNullOrUndefined(selectedOption.value) && effectiveValueExtractor.value !== null
+                ? effectiveValueExtractor.value(selectedOption.value)
+                : selectedOption.value;
+        if (!isEqual(props.modelValue, effectiveValue)) {
+            emit('update:modelValue', effectiveValue);
         }
     });