@signal24/vue-foundation 4.25.2 → 4.25.4

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

@@ -1,25 +1,62 @@
 <template>
     <div id="demo-vf-smart-select">
         <div>
-            <VfSmartSelect v-model="selectedOption" :options="options" label-field="label" />
+            <VfSmartSelect v-model="selectedInstantOption1" :options="instantOptions" label-field="label" />
 
-            Selected value: {{ selectedOption?.label ?? '-' }}
+            Selected value label: {{ selectedInstantOption1?.label ?? '-' }}
         </div>
 
         <div>
-            <VfSmartSelect v-model="selectedOption" :options="options" label-field="label" group-field="group" null-title="No selection" />
+            <VfSmartSelect
+                v-model="selectedInstantOption2"
+                :options="instantOptions"
+                label-field="label"
+                group-field="group"
+                null-title="No selection"
+            />
 
-            Selected value: {{ selectedOption?.label ?? '-' }}
+            Selected value label: {{ selectedInstantOption2?.label ?? '-' }}
+        </div>
+
+        <div>
+            <VfSmartSelect
+                v-model="selectedDelayedOption1"
+                :options="delayedOptions"
+                label-field="label"
+                group-field="group"
+                null-title="No selection"
+            />
+
+            Selected value label: {{ selectedDelayedOption1?.label ?? '-' }}
+        </div>
+
+        <div>
+            <VfSmartSelect
+                v-model="selectedDelayedOption2"
+                :options="delayedOptions"
+                label-field="label"
+                value-field="value"
+                group-field="group"
+                null-title="No selection"
+            />
+
+            Selected value: {{ selectedDelayedOption2 ?? '-' }}
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { cloneDeep } from 'lodash';
+import { onMounted, ref } from 'vue';
 
 import VfSmartSelect from '@/components/vf-smart-select.vue';
 
-const options = [
+interface IOption {
+    label: string;
+    value: string;
+    group?: string;
+}
+const options: IOption[] = [
     { value: '1', label: 'Option 1', group: 'Set 1' },
     { value: '2', label: 'Option 2', group: 'Set 1' },
     { value: '3', label: 'Option 3', group: 'Set 1' },
@@ -32,7 +69,19 @@ const options = [
     { value: '10', label: 'Option 10', group: 'Set 2' }
 ];
 
-const selectedOption = ref<(typeof options)[number] | null>(null);
+const instantOptions = ref<IOption[]>(cloneDeep(options));
+const delayedOptions = ref<IOption[]>();
+
+const selectedInstantOption1 = ref<IOption | null>(null);
+const selectedInstantOption2 = ref<IOption | null>(null);
+const selectedDelayedOption1 = ref<IOption | null>(options[1]);
+const selectedDelayedOption2 = ref<string | null>(options[1].value);
+
+function setDelayedOptions() {
+    delayedOptions.value = cloneDeep(options);
+}
+
+onMounted(() => setTimeout(setDelayedOptions, 1000));
 </script>
 
 <style lang="scss" scoped>

package/dist/src/components/vf-smart-select.vue.d.ts

@@ -5,6 +5,7 @@ declare const _default: <T, V = T>(__VLS_props: NonNullable<Awaited<typeof __VLS
         readonly onOptionsLoaded?: ((args_0: T[]) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue" | "onOptionsLoaded"> & {
         modelValue: V | null;
+        loadingText?: string;
         loadOptions?: (searchText: string | null) => Promise<T[]>;
         options?: T[];
         prependOptions?: T[];
@@ -24,6 +25,7 @@ declare const _default: <T, V = T>(__VLS_props: NonNullable<Awaited<typeof __VLS
         formatter?: (option: T) => string;
         subtitleFormatter?: (option: T) => string;
         classForOption?: (option: T) => string;
+        selectionFormatter?: (option: T) => string;
         nullTitle?: string;
         noResultsText?: string;
         disabled?: boolean;