design-system-next 2.26.1 → 2.26.3

package/src/components/input/input-currency/input-currency.ts

@@ -44,10 +44,18 @@ export const inputCurrencyPropTypes = {
     type: Number,
     default: 2,
   },
+  baseValue: {
+    type: Number,
+    default: undefined,
+  },
   displayAsCode: {
     type: Boolean,
     default: true,
   },
+  displayAsSymbol: {
+    type: Boolean,
+    default: false,
+  },
   disableRounding: {
     type: Boolean,
     default: false,
@@ -66,19 +74,8 @@ export const inputCurrencyEmitTypes = {
     typeof value.symbol === 'string' &&
     (value.numericValue === null || (typeof value.numericValue === 'number' && !isNaN(value.numericValue))) &&
     (value.rawValue === null || typeof value.rawValue === 'string'),
-  getCurrencyErrors: (value: Array<{ title: string; message: string }>) => {
-    return (
-      Array.isArray(value) &&
-      value.every(
-        (item) =>
-          item !== null &&
-          typeof item === 'object' &&
-          typeof item.title === 'string' &&
-          typeof item.message === 'string',
-      )
-    );
-  },
-  getNumericValue: (value: number): value is number => typeof value === 'number' && !isNaN(value),
+  getCurrencyValue: (value: number | null): value is number | null =>
+    value === null || (typeof value === 'number' && !isNaN(value)),
 };
 
 export interface InputCurrencyEmit {
@@ -92,8 +89,7 @@ export interface InputCurrencyEmit {
       rawValue: string | null;
     },
   ): void;
-  (event: 'getCurrencyErrors', value: Array<{ title: string; message: string }>): void;
-  (event: 'getNumericValue', value: number): void;
+  (event: 'getCurrencyValue', value: number | null): void;
 }
 
 export type InputCurrencyPropTypes = ExtractPropTypes<typeof inputCurrencyPropTypes>;

package/src/components/input/input-currency/input-currency.vue

@@ -10,6 +10,10 @@
     @input="handleCurrencyInput"
     @blur="handleBlur"
   >
+    <template v-for="(_, slotName) in $slots" #[slotName]>
+      <slot :name="slotName" />
+    </template>
+
     <template #prefix>
       <spr-dropdown
         :id="dropdownId"

package/src/components/input/input-currency/use-input-currency.ts

@@ -22,10 +22,10 @@ export const useInputCurrency = (props: InputCurrencyPropTypes, emit: SetupConte
     preSelectedCurrency,
     disabledCountryCurrency,
     disabled,
-    autoFormat,
     maxDecimals,
     minDecimals,
     disableRounding,
+    baseValue,
   } = toRefs(props);
 
   const inputCurrencyClasses: ComputedRef<InputCurrencyClasses> = computed(() => {
@@ -121,97 +121,35 @@ export const useInputCurrency = (props: InputCurrencyPropTypes, emit: SetupConte
     return cleaned || null;
   });
 
-  /**
-   * Derive the default fraction digits for a currency using Intl metadata.
-   * Falls back to 2 when unavailable.
-   */
-  const getCurrencyFractionDigits = (code: string): number => {
-    try {
-      const fmt = new Intl.NumberFormat('en', { style: 'currency', currency: code });
-      const resolved = fmt.resolvedOptions();
-      if (resolved && typeof resolved.minimumFractionDigits === 'number') {
-        return resolved.minimumFractionDigits;
-      }
-    } catch {
-      /* ignore */
-    }
-    return 2;
-  };
-
-  const currentCurrencyFractionDigits = computed(() => getCurrencyFractionDigits(selected.value.currency));
-
   const effectiveMinDecimals = computed(() => {
-    // Minimum is the greater of user minDecimals and native fraction digits lower bound (native min == native max in most cases)
+    // Minimum is just the user's minDecimals value
     const userMin = Math.min(Math.max(0, minDecimals.value), 6);
-    return Math.min(6, Math.max(0, Math.min(userMin, maxDecimals.value)));
+    return Math.min(6, Math.max(0, userMin));
   });
 
   const effectiveMaxDecimals = computed(() => {
-    // Use native fraction digits as baseline but allow user to reduce (rare) or extend (not beyond 6)
-    const native = currentCurrencyFractionDigits.value; // e.g. JPY => 0, USD => 2
+    // Use the user-provided maxDecimals value directly (clamped to 0-6)
     const userMax = Math.min(Math.max(0, maxDecimals.value), 6);
-    // If user sets max below native, keep native to respect currency standard.
-    const adjustedMax = Math.max(native, userMax);
     // Ensure max >= min
-    return Math.max(adjustedMax, effectiveMinDecimals.value);
+    return Math.max(userMax, effectiveMinDecimals.value);
   });
 
-  const clampFractionDigits = (frac: string): string => frac.slice(0, effectiveMaxDecimals.value);
-
   const formatNumberForBlur = (value: number): string => {
     const fmt = buildNumberFormat(effectiveMinDecimals.value, effectiveMaxDecimals.value);
-    // Remove currency symbol from formatted output (component is responsible only for numeric part in input)
-    const parts = fmt.formatToParts(value).filter((p) => p.type !== 'currency');
-    return parts
-      .map((p) => p.value)
-      .join('')
-      .replace(/\s+/g, '');
-  };
-
-  /**
-   * Formats a numeric string (no currency symbol) applying grouping and truncating decimals but not padding.
-   * Used while user is still interacting (on input) if autoFormat.
-   */
-  const handleFormatDisplay = (raw: string): string => {
-    if (!autoFormat.value) return raw;
-    if (!raw) return '';
-    // Detect user decimal char as either '.' or last ','
-    let work = raw;
-    // Strip spaces
-    work = work.replace(/\s+/g, '');
-    // Allow only digits, separators, minus
-    work = work.replace(/[^0-9,.-]/g, '');
-    let sign = '';
-    if (work.startsWith('-')) {
-      sign = '-';
-      work = work.slice(1);
-    }
-    const lastDot = work.lastIndexOf('.');
-    const lastComma = work.lastIndexOf(',');
-    const lastSep = Math.max(lastDot, lastComma);
-    let intPart: string;
-    let fracPart = '';
-    if (lastSep !== -1) {
-      intPart = work.slice(0, lastSep).replace(/[.,]/g, '');
-      fracPart = work.slice(lastSep + 1);
-    } else {
-      intPart = work.replace(/[.,]/g, '');
-    }
-    if (!/^[0-9]*$/.test(intPart) || !/^[0-9]*$/.test(fracPart)) return raw;
-    const truncatedFrac = clampFractionDigits(fracPart);
-    const intNumber = Number(intPart || '0');
-    // Use Intl just for grouping integer portion
-    const fmtInt = buildNumberFormat(0, 0);
-    const groupedInt = fmtInt
-      .formatToParts(intNumber)
-      .filter((p) => p.type === 'integer' || p.type === 'group')
-      .map((p) => p.value)
-      .join('');
-    if (truncatedFrac.length > 0 || lastSep !== -1) {
-      // Use current locale decimal symbol
-      return sign + groupedInt + localeSeparators.value.decimal + truncatedFrac;
+    // Format the number and get parts
+    const parts = fmt.formatToParts(value);
+
+    // Extract only numeric parts (number, decimal, group)
+    let result = '';
+    for (const part of parts) {
+      if (part.type === 'currency') {
+        // Skip currency symbol/code
+        continue;
+      }
+      result += part.value;
     }
-    return sign + groupedInt;
+
+    return result.trim();
   };
 
   /**
@@ -258,39 +196,42 @@ export const useInputCurrency = (props: InputCurrencyPropTypes, emit: SetupConte
     return formatNumberForBlur(numeric);
   };
 
-  const handleCurrencyInput = (event: InputEvent) => {
-    const inputEl = event.target as HTMLInputElement;
-
-    let raw = inputEl.value;
+  const handleCurrencyInput = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    let raw = target.value;
 
+    // Remove spaces
     raw = raw.replace(/\s+/g, '');
 
-    let sign = '';
+    // Only allow digits and dots (.) as decimal separator
+    // Reject commas (,) during typing - they will be added during formatting on blur
+    raw = raw.replace(/[^0-9.]/g, '');
 
-    if (raw.startsWith('-')) {
-      sign = '-';
-      raw = raw.slice(1);
+    // Handle multiple dots (keep only the last one as decimal separator)
+    const lastDot = raw.lastIndexOf('.');
+    if (lastDot !== -1) {
+      const beforeDecimal = raw.slice(0, lastDot).replace(/\./g, '');
+      const afterDecimal = raw.slice(lastDot + 1).replace(/\./g, '');
+      raw = beforeDecimal + '.' + afterDecimal;
     }
 
-    raw = raw.replace(/[^0-9.,-]/g, '');
-
-    const firstDot = raw.indexOf('.');
-
-    if (firstDot !== -1) {
-      raw = raw.slice(0, firstDot + 1) + raw.slice(firstDot + 1).replace(/\./g, '');
+    // Just update the value without formatting during typing
+    // Formatting happens on blur to avoid cursor jumping
+    modelValue.value = raw;
+    // Emit numeric value while typing (null for empty, parsed value otherwise)
+    const parsedNumeric = raw === '' ? null : Number(raw);
+    // Only emit if it's a valid number (not NaN) or null
+    if (parsedNumeric === null || !isNaN(parsedNumeric)) {
+      emit('getCurrencyValue', parsedNumeric);
     }
-
-    // Do not truncate fractional digits while typing; allow user to input freely.
-    const formatted = handleFormatDisplay(sign + raw);
-
-    modelValue.value = formatted;
-
-    emit('getCurrencyErrors', []);
   };
 
   const handleBlur = () => {
-    // Format only if there is a value
-    if (modelValue.value) {
+    // If input is empty and baseValue is provided, use baseValue
+    if (!modelValue.value && baseValue && baseValue.value !== undefined) {
+      modelValue.value = formatNumberForBlur(baseValue.value);
+    } else if (modelValue.value) {
+      // Format only if there is a value
       let out = modelValue.value;
 
       out = formatOnBlur(out);
@@ -306,7 +247,11 @@ export const useInputCurrency = (props: InputCurrencyPropTypes, emit: SetupConte
       rawValue: rawNumericString.value,
     });
 
-    if (numericValue.value !== null) emit('getNumericValue', numericValue.value);
+    // Emit the numeric value after blur (null for empty, numeric value otherwise)
+    // Use setTimeout to ensure the formatted value is set before emitting
+    setTimeout(() => {
+      emit('getCurrencyValue', numericValue.value ?? null);
+    }, 0);
   };
 
   const handleSelectedCurrency = (currencyRaw: unknown) => {
@@ -370,7 +315,7 @@ export const useInputCurrency = (props: InputCurrencyPropTypes, emit: SetupConte
       // Re-format current input according to new currency fraction rules only if currency actually changed
       if (preSwitchNumeric !== null && previousCurrency !== found.currency) {
         modelValue.value = formatNumberForBlur(preSwitchNumeric);
-        emit('getNumericValue', preSwitchNumeric);
+        emit('getCurrencyValue', preSwitchNumeric);
       }
     }
   };
@@ -379,7 +324,12 @@ export const useInputCurrency = (props: InputCurrencyPropTypes, emit: SetupConte
     popperState.value = state;
   };
 
-  const dropdownDisplayText = computed(() => (props.displayAsCode ? selected.value.currency : selected.value.symbol));
+  const dropdownDisplayText = computed(() => {
+    if (props.displayAsSymbol) {
+      return selected.value.symbol;
+    }
+    return props.displayAsCode ? selected.value.currency : selected.value.symbol;
+  });
 
   // #region - Set Currency Options
   // Collect currency codes first so we can derive ambiguity and symbols deterministically.
@@ -508,13 +458,32 @@ export const useInputCurrency = (props: InputCurrencyPropTypes, emit: SetupConte
     handleSelectedCurrency(preSelectedCurrency.value);
     if (modelValue.value && numericValue.value !== null) {
       modelValue.value = formatNumberForBlur(numericValue.value);
-      emit('getNumericValue', numericValue.value);
+      emit('getCurrencyValue', numericValue.value);
       emit('getSelectedCurrencyMeta', {
         currency: selected.value.currency,
         symbol: selected.value.symbol,
         numericValue: numericValue.value,
         rawValue: rawNumericString.value,
       });
+    } else if (!modelValue.value && baseValue && baseValue.value !== undefined) {
+      // If empty on mount and baseValue is provided, use it
+      modelValue.value = formatNumberForBlur(baseValue.value);
+      emit('getCurrencyValue', baseValue.value);
+      emit('getSelectedCurrencyMeta', {
+        currency: selected.value.currency,
+        symbol: selected.value.symbol,
+        numericValue: baseValue.value,
+        rawValue: String(baseValue.value),
+      });
+    } else {
+      // Always emit null for empty on mount
+      emit('getCurrencyValue', null);
+      emit('getSelectedCurrencyMeta', {
+        currency: selected.value.currency,
+        symbol: selected.value.symbol,
+        numericValue: null,
+        rawValue: null,
+      });
     }
   });
 

package/src/components/input/input-dropdown/input-dropdown.vue

@@ -3,6 +3,10 @@
     v-bind="$attrs"
     :class="{ 'spr-cursor-pointer': $attrs.readonly === '' || $attrs.readonly === 'true' || $attrs.readonly }"
   >
+    <template v-for="(_, slotName) in $slots" #[slotName]>
+      <slot :name="slotName" />
+    </template>
+
     <template #icon>
       <Icon icon="ph:caret-down" />
     </template>

package/src/components/input/input-search/input-search.vue

@@ -1,5 +1,9 @@
 <template>
   <spr-input v-bind="$attrs">
+    <template v-for="(_, slotName) in $slots" #[slotName]>
+      <slot :name="slotName" />
+    </template>
+
     <template #icon>
       <Icon icon="ph:magnifying-glass" />
     </template>

package/src/components/input/input.ts

@@ -101,6 +101,7 @@ export const inputPropTypes = {
 
 export const inputEmitTypes = {
   'update:modelValue': (value: string | number): boolean => typeof value === 'string' || typeof value === 'number',
+  blur: (event: Event): boolean => event instanceof Event,
 };
 
 export type InputEmitTypes = { 'update:modelValue': typeof inputEmitTypes };

package/src/components/input/input.vue

@@ -24,6 +24,7 @@
         :disabled="props.disabled"
         :readonly="props.readonly"
         @input="onInput"
+        @blur="onBlur"
       />
       <div v-if="$slots.trailing" :class="inputClasses.trailingSlotClasses">
         <slot name="trailing" />
@@ -59,7 +60,7 @@ const emit = defineEmits(inputEmitTypes);
 const props = defineProps(inputPropTypes);
 const slots = useSlots();
 
-const { inputClasses, inputTextRef, onInput, disableClickEvent, currentLength } = useInput(props, emit, slots);
+const { inputClasses, inputTextRef, onInput, onBlur, disableClickEvent, currentLength } = useInput(props, emit, slots);
 </script>
 
 <style scoped>

package/src/components/input/use-input.ts

@@ -161,6 +161,10 @@ export const useInput = (
     modelValue.value = value;
   };
 
+  const onBlur = (event: Event) => {
+    emit('blur', event);
+  };
+
   const disableClickEvent = (event: Event) => {
     if (disabled.value) {
       event.preventDefault();
@@ -172,6 +176,7 @@ export const useInput = (
     inputTextRef,
     inputClasses,
     onInput,
+    onBlur,
     disableClickEvent,
     currentLength,
     hasCharLimit,

package/src/components/list/list-item/list-item.ts

@@ -1,60 +1,60 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-import type { MenuListType } from '../list';
-
-export const listItemPropTypes = {
-  item: {
-    type: Object as PropType<MenuListType>,
-    required: true,
-  },
-  isSelected: {
-    type: Boolean,
-    required: true,
-  },
-  classes: {
-    type: [String, Array, Object] as PropType<string | string[] | Record<string, boolean>>,
-    required: true,
-  },
-  multiSelect: {
-    type: Boolean,
-    default: false,
-  },
-  lozenge: {
-    type: Boolean,
-    default: false,
-  },
-  ladderized: {
-    type: Boolean,
-    default: false,
-  },
-  noCheck: {
-    type: Boolean,
-    default: false,
-  },
-  itemIcon: {
-    type: String,
-    default: '',
-  },
-  itemIconTone: {
-    type: String,
-    default: 'plain',
-  },
-  itemIconFill: {
-    type: Boolean,
-    default: false,
-  },
-  disabledUnselectedItems: {
-    type: Boolean,
-    default: false,
-  },
-  radioList: {
-    type: Boolean,
-    default: false,
-  },
-};
-
-export const listItemEmitTypes = {
-  select: () => true,
-};
-
-export type ListItemPropTypes = ExtractPropTypes<typeof listItemPropTypes>;
-export type ListItemEmitTypes = typeof listItemEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { MenuListType } from '../list';
+
+export const listItemPropTypes = {
+  item: {
+    type: Object as PropType<MenuListType>,
+    required: true,
+  },
+  isSelected: {
+    type: Boolean,
+    required: true,
+  },
+  classes: {
+    type: [String, Array, Object] as PropType<string | string[] | Record<string, boolean>>,
+    required: true,
+  },
+  multiSelect: {
+    type: Boolean,
+    default: false,
+  },
+  lozenge: {
+    type: Boolean,
+    default: false,
+  },
+  ladderized: {
+    type: Boolean,
+    default: false,
+  },
+  noCheck: {
+    type: Boolean,
+    default: false,
+  },
+  itemIcon: {
+    type: String,
+    default: '',
+  },
+  itemIconTone: {
+    type: String,
+    default: 'plain',
+  },
+  itemIconFill: {
+    type: Boolean,
+    default: false,
+  },
+  disabledUnselectedItems: {
+    type: Boolean,
+    default: false,
+  },
+  radioList: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const listItemEmitTypes = {
+  select: () => true,
+};
+
+export type ListItemPropTypes = ExtractPropTypes<typeof listItemPropTypes>;
+export type ListItemEmitTypes = typeof listItemEmitTypes;

package/src/components/list/use-list.ts

@@ -375,7 +375,7 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   const getListItemClasses = (item: MenuListType) => ({
     [listClasses.value.listItemClasses]: !item.disabled && !(disabledUnselectedItems.value && !isItemSelected(item)),
     'spr-background-color-single-active': isItemSelected(item) && !item.disabled && !noCheck.value,
-    'spr-cursor-not-allowed spr-flex spr-items-center spr-gap-1.5 spr-rounded-lg':
+    'spr-cursor-not-allowed spr-flex spr-items-center spr-justify-between spr-gap-1.5 spr-rounded-lg':
       item.disabled || (disabledUnselectedItems.value && !isItemSelected(item)),
     'spr-p-size-spacing-3xs': !props.lozenge,
     'spr-py-size-spacing-3xs spr-px-size-spacing-4xs': props.lozenge,
@@ -527,13 +527,13 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
       } else {
         handleSingleSelect(item);
       }
-    }    
+    }
   };
 
   const handleDeselect = (item: MenuListType) => {
     if (selectedItems.value.length === 0 || !isItemSelected(item)) {
-      selectedItems.value = [item];  
-      emit('get-single-selected-item', item);    
+      selectedItems.value = [item];
+      emit('get-single-selected-item', item);
     } else {
       selectedItems.value = [];
       emit('get-single-deselected-item', item);
@@ -542,8 +542,8 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
 
   const handleSingleSelect = (item: MenuListType) => {
     selectedItems.value = [item];
-    if (item.onClickFn) item.onClickFn();   
-    emit('get-single-selected-item', item); 
+    if (item.onClickFn) item.onClickFn();
+    emit('get-single-selected-item', item);
   };
   // #endregion - Helper Methods