@signal24/vue-foundation 4.24.2 → 4.25.1

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

@@ -1,8 +1,16 @@
 <template>
     <div id="demo-vf-smart-select">
-        <VfSmartSelect v-model="selectedOption" :options="options" label-field="label" />
+        <div>
+            <VfSmartSelect v-model="selectedOption" :options="options" label-field="label" />
 
-        Selected value: {{ selectedOption?.label ?? '-' }}
+            Selected value: {{ selectedOption?.label ?? '-' }}
+        </div>
+
+        <div>
+            <VfSmartSelect v-model="selectedOption" :options="options" label-field="label" group-field="group" null-title="No selection" />
+
+            Selected value: {{ selectedOption?.label ?? '-' }}
+        </div>
     </div>
 </template>
 
@@ -12,19 +20,27 @@ import { ref } from 'vue';
 import VfSmartSelect from '@/components/vf-smart-select.vue';
 
 const options = [
-    { value: '1', label: 'Option 1' },
-    { value: '2', label: 'Option 2' },
-    { value: '3', label: 'Option 3' },
-    { value: '4', label: 'Option 4' },
-    { value: '5', label: 'Option 5' },
-    { value: '6', label: 'Option 6' },
-    { value: '7', label: 'Option 7' },
-    { value: '8', label: 'Option 8' },
-    { value: '9', label: 'Option 9' },
-    { value: '10', label: 'Option 10' }
+    { value: '1', label: 'Option 1', group: 'Set 1' },
+    { value: '2', label: 'Option 2', group: 'Set 1' },
+    { value: '3', label: 'Option 3', group: 'Set 1' },
+    { value: '4', label: 'Option 4', group: 'Set 1' },
+    { value: '5', label: 'Option 5', group: 'Set 1' },
+    { value: '6', label: 'Option 6', group: 'Set 2' },
+    { value: '7', label: 'Option 7', group: 'Set 2' },
+    { value: '8', label: 'Option 8', group: 'Set 2' },
+    { value: '9', label: 'Option 9', group: 'Set 2' },
+    { value: '10', label: 'Option 10', group: 'Set 2' }
 ];
 
 const selectedOption = ref<(typeof options)[number] | null>(null);
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+#demo-vf-smart-select {
+    max-width: 450px;
+
+    > div {
+        margin-top: 12px;
+    }
+}
+</style>

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

@@ -1,5 +1,6 @@
 export interface VfSmartSelectOptionDescriptor<T> {
     key: string | symbol;
+    group?: string;
     title: string;
     subtitle?: string | null;
     searchContent?: string;

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

@@ -19,6 +19,8 @@ declare const _default: <T, V = T>(__VLS_props: NonNullable<Awaited<typeof __VLS
         valueField?: keyof T;
         valueExtractor?: (option: T) => V;
         labelField?: keyof T;
+        groupField?: keyof T;
+        groupFormatter?: (option: T) => string;
         formatter?: (option: T) => string;
         subtitleFormatter?: (option: T) => string;
         classForOption?: (option: T) => string;
@@ -37,6 +39,10 @@ declare const _default: <T, V = T>(__VLS_props: NonNullable<Awaited<typeof __VLS
     }>): void;
     attrs: any;
     slots: {
+        group?: (props: {
+            group: string;
+        }) => any;
+    } & {
         option?: (props: {
             option: VfSmartSelectOptionDescriptor<T>;
         }) => any;