@signal24/vue-foundation 4.24.1 → 4.25.0

package/package.json

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

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

@@ -1,5 +1,12 @@
 <template>
-    <VfSmartSelect v-model="selectedItem" :options="computedOpts" :formatter="ezFormatter" :null-title="nullTitle" :placeholder="placeholder" />
+    <VfSmartSelect
+        v-model="selectedItem"
+        :options="computedOpts"
+        :formatter="ezFormatter"
+        :null-title="nullTitle"
+        :placeholder="placeholder"
+        :name="name"
+    />
 </template>
 
 <script lang="ts" setup generic="T extends string">
@@ -19,6 +26,7 @@ const props = defineProps<{
     placeholder?: string;
     options: { [key in T]: string } | T[];
     formatter?: (label: string, key: T) => string;
+    name?: string;
 }>();
 
 const computedOpts = computed(() => {

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

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

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

@@ -9,31 +9,40 @@
             :class="{ nullable: !!nullTitle }"
             :placeholder="effectivePlaceholder"
             :required="required"
+            :name="name"
             data-1p-ignore
             @keydown="handleKeyDown"
             @focus="handleInputFocused"
             @blur="handleInputBlurred"
         />
-        <div v-if="shouldDisplayOptions" ref="optionsContainer" class="vf-smart-select-options">
+        <div v-if="shouldDisplayOptions" ref="optionsContainer" class="vf-smart-select-options" :class="{ grouped: isGrouped }">
             <div v-if="!isLoaded" class="no-results">Loading...</div>
             <template v-else>
-                <div
-                    v-for="option in effectiveOptions"
-                    :key="String(option.key)"
-                    class="option"
-                    :class="[highlightedOptionKey === option.key && 'highlighted', option.ref && classForOption?.(option.ref)]"
-                    @mousemove="handleOptionHover(option)"
-                    @mousedown="selectOption(option)"
-                >
-                    <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">
-                    <slot name="no-results">
-                        {{ effectiveNoResultsText }}
-                    </slot>
+                <div v-for="group in groupedOptions" :key="group.groupTitle" class="group">
+                    <div v-if="group.groupTitle" class="group-title">
+                        <slot name="group" :group="group.groupTitle">
+                            {{ group.groupTitle }}
+                        </slot>
+                    </div>
+
+                    <div
+                        v-for="option in group.options"
+                        :key="option.key"
+                        class="option"
+                        :class="[highlightedOptionKey === option.key && 'highlighted', option.ref && classForOption?.(option.ref)]"
+                        @mousemove="handleOptionHover(option)"
+                        @mousedown="selectOption(option)"
+                    >
+                        <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">
+                        <slot name="no-results">
+                            {{ effectiveNoResultsText }}
+                        </slot>
+                    </div>
                 </div>
             </template>
         </div>
@@ -41,7 +50,7 @@
 </template>
 
 <script lang="ts" setup generic="T, V = T">
-import { debounce, isEqual } from 'lodash';
+import { debounce, groupBy, isEqual, uniq } from 'lodash';
 import { computed, onMounted, type Ref, ref, watch } from 'vue';
 
 import { escapeHtml } from '../helpers/string';
@@ -68,6 +77,8 @@ const props = defineProps<{
     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;
@@ -79,6 +90,7 @@ const props = defineProps<{
     required?: boolean;
     showCreateTextOnNewItem?: boolean;
     autoNext?: boolean;
+    name?: string;
 }>();
 
 const emit = defineEmits<{
@@ -127,6 +139,11 @@ const effectiveKeyExtractor = computed(() => {
     if (effectiveValueExtractor.value) return (option: T) => String(effectiveValueExtractor.value!(option));
     return null;
 });
+const effectiveGroupFormatter = computed(() => {
+    if (props.groupFormatter) return props.groupFormatter;
+    if (props.groupField) return (option: T) => String(option[props.groupField!]);
+    return null;
+});
 const effectiveFormatter = computed(() => {
     if (props.formatter) return props.formatter;
     if (props.labelField) return (option: T) => String(option[props.labelField!]);
@@ -134,9 +151,11 @@ const effectiveFormatter = computed(() => {
 });
 
 const allOptions = computed(() => [...effectivePrependOptions.value, ...loadedOptions.value, ...effectiveAppendOptions.value]);
+const isGrouped = computed(() => !!(props.groupField || props.groupFormatter));
 
 const optionsDescriptors = computed(() => {
     return allOptions.value.map((option, index) => {
+        const group = effectiveGroupFormatter.value?.(option);
         const title = effectiveFormatter.value(option);
         const subtitle = props.subtitleFormatter?.(option);
         const strippedTitle = title ? title.trim().toLowerCase() : '';
@@ -158,6 +177,7 @@ const optionsDescriptors = computed(() => {
 
         return {
             key: effectiveKeyExtractor.value?.(option) ?? String(index),
+            group,
             title,
             subtitle,
             searchContent: searchContent.join(''),
@@ -206,6 +226,24 @@ const effectiveOptions = computed(() => {
     return options;
 });
 
+const groupedOptions = computed(() => {
+    if (!effectiveOptions.value[0]?.group) {
+        return [
+            {
+                groupTitle: '',
+                options: effectiveOptions.value
+            }
+        ];
+    }
+
+    const groupTitles = uniq(effectiveOptions.value.map(option => option.group ?? ''));
+    const groupedOptions = groupBy(effectiveOptions.value, option => option.group);
+    return groupTitles.map(groupTitle => ({
+        groupTitle,
+        options: groupedOptions[groupTitle!]
+    }));
+});
+
 // watch props
 watch(() => props.modelValue, handleValueChanged);
 watch(
@@ -591,6 +629,11 @@ function focusNextInput() {
     overflow: auto;
     z-index: 101;
 
+    .group-title {
+        padding: 5px 8px;
+        color: #999;
+    }
+
     .option,
     .no-results {
         padding: 5px 8px;

package/src/config.ts

@@ -3,13 +3,15 @@ interface IOptions {
     errorHandler: (err: Error) => void;
     defaultDateFormat: string;
     defaultTimeFormat: string;
+    defaultCurrencyDivisor: number;
 }
 
 export const VfOptions: IOptions = {
     unhandledErrorSupportText: 'please contact support',
     errorHandler: err => console.error('Unhandled error:', err),
     defaultDateFormat: 'M/d/yy',
-    defaultTimeFormat: 'H:mm'
+    defaultTimeFormat: 'H:mm',
+    defaultCurrencyDivisor: 1
 };
 
 export function configureVf(options: Partial<IOptions>) {

package/src/filters/index.ts

@@ -64,7 +64,7 @@ function desnake(value: string | null) {
     return value ? desnakeCase(value) : null;
 }
 
-function usCurrency(value: string | number, divisor = 1) {
+function usCurrency(value: string | number, divisor?: number) {
     return formatUSCurrency(value, divisor);
 }
 

package/src/helpers/string.ts

@@ -1,6 +1,8 @@
 import currency from 'currency.js';
 import { v4 as uuidv4 } from 'uuid';
 
+import { VfOptions } from '@/config';
+
 // placing this here so we don't have to use the ESLint rule everywhere
 // eslint-disable-next-line vue/prefer-import-from-vue
 export { escapeHtml } from '@vue/shared';
@@ -19,8 +21,10 @@ export function formatPhone(value: string) {
     return '(' + cleanValue.substring(0, 3) + ') ' + cleanValue.substring(3, 6) + '-' + cleanValue.substring(6);
 }
 
-export function formatUSCurrency(value: string | number, divisor = 1) {
-    return currency(value).divide(divisor).format();
+export function formatUSCurrency(value: string | number, divisor?: number) {
+    return currency(value)
+        .divide(divisor ?? VfOptions.defaultCurrencyDivisor)
+        .format();
 }
 
 export function uuid() {