@signal24/vue-foundation 4.20.1 → 4.20.2

package/package.json

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

package/src/components/index.ts

@@ -8,5 +8,6 @@ export * from './alert-helpers';
 export * from './modal-helpers';
 export * from './overlay-container';
 export * from './toast-helpers';
+export * from './vf-smart-select.types';
 
 export { VfAjaxSelect, VfAlertModal, VfEzSmartSelect, VfModal, VfSmartSelect };

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

@@ -0,0 +1,7 @@
+export interface VfSmartSelectOptionDescriptor<T> {
+    key: string | symbol;
+    title: string;
+    subtitle?: string | null;
+    searchContent?: string;
+    ref?: T;
+}

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

@@ -21,17 +21,19 @@
                     v-for="option in effectiveOptions"
                     :key="String(option.key)"
                     class="option"
-                    :class="{
-                        highlighted: highlightedOptionKey === option.key
-                    }"
+                    :class="[highlightedOptionKey === option.key && 'highlighted', option.ref && classForOption?.(option.ref)]"
                     @mousemove="handleOptionHover(option)"
                     @mousedown="selectOption(option)"
                 >
-                    <div class="title" v-html="option.title" />
-                    <div v-if="option.subtitle" class="subtitle" v-html="option.subtitle" />
+                    <slot name="option" :option="option">
+                        <div class="title" v-html="option.title" />
+                        <div v-if="option.subtitle" class="subtitle" v-html="option.subtitle" />
+                    </slot>
                 </div>
                 <div v-if="!effectiveOptions.length && searchText" class="no-results">
-                    {{ effectiveNoResultsText }}
+                    <slot name="no-results">
+                        {{ effectiveNoResultsText }}
+                    </slot>
                 </div>
             </template>
         </div>
@@ -43,20 +45,13 @@ import { debounce, isEqual } from 'lodash';
 import { computed, onMounted, type Ref, ref, watch } from 'vue';
 
 import { escapeHtml } from '../helpers/string';
+import type { VfSmartSelectOptionDescriptor } from './vf-smart-select.types';
 
 const NullSymbol = Symbol('null');
 const CreateSymbol = Symbol('create');
 
 const VALID_KEYS = `\`1234567890-=[]\\;',./~!@#$%^&*()_+{}|:"<>?qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM`;
 
-interface OptionDescriptor {
-    key: string | symbol;
-    title: string;
-    subtitle?: string | null;
-    searchContent?: string;
-    ref?: T;
-}
-
 const props = defineProps<{
     modelValue: V | null;
     loadOptions?: (searchText: string | null) => Promise<T[]>;
@@ -75,6 +70,7 @@ const props = defineProps<{
     labelField?: keyof T;
     formatter?: (option: T) => string;
     subtitleFormatter?: (option: T) => string;
+    classForOption?: (option: T) => string;
     nullTitle?: string;
     noResultsText?: string;
     disabled?: boolean;
@@ -166,7 +162,7 @@ const optionsDescriptors = computed(() => {
             subtitle,
             searchContent: searchContent.join(''),
             ref: option
-        } as OptionDescriptor;
+        } as VfSmartSelectOptionDescriptor<T>;
     });
 });
 
@@ -454,7 +450,7 @@ function highlightInitialOption() {
     containerEl.scrollTop = highlightedOptionEl.offsetTop;
 }
 
-function handleOptionHover(option: OptionDescriptor) {
+function handleOptionHover(option: VfSmartSelectOptionDescriptor<T>) {
     highlightedOptionKey.value = option ? option.key : null;
 }
 
@@ -480,7 +476,7 @@ function incrementHighlightedOption(increment: number) {
     }
 }
 
-function selectOption(option: OptionDescriptor) {
+function selectOption(option: VfSmartSelectOptionDescriptor<T>) {
     isSearching.value = false;
 
     if (option.key == NullSymbol) {