design-system-next 2.14.3 → 2.15.1

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

@@ -0,0 +1,538 @@
+import { ref, toRefs, computed, type ComputedRef, watch, onMounted, type SetupContext } from 'vue';
+import { useVModel } from '@vueuse/core';
+
+import { countries } from 'countries-list';
+import classNames from 'classnames';
+
+import { type InputCurrencyPropTypes, type InputCurrencyEmitTypes, type CurrencyOption } from './input-currency';
+
+interface CountryLike {
+  name: string;
+  currency: string[] | undefined;
+}
+
+interface InputCurrencyClasses {
+  dropdownBaseClasses: string;
+  dropdownWrappertClasses: string;
+}
+
+export const useInputCurrency = (props: InputCurrencyPropTypes, emit: SetupContext<InputCurrencyEmitTypes>['emit']) => {
+  const {
+    id,
+    preSelectedCurrency,
+    disabledCountryCurrency,
+    disabled,
+    autoFormat,
+    maxDecimals,
+    minDecimals,
+    disableRounding,
+  } = toRefs(props);
+
+  const inputCurrencyClasses: ComputedRef<InputCurrencyClasses> = computed(() => {
+    const dropdownBaseClasses = classNames(
+      '[&_#dropdown-wrapper]:spr-my-1',
+      '[&_#dropdown-wrapper[data-popper-placement="bottom-start"]]:spr-ml-[-10px]',
+      '[&_#dropdown-wrapper[data-popper-placement="bottom-start"]]:spr-mt-[6px]',
+      '[&_#dropdown-wrapper[data-popper-placement="top-start"]]:spr-ml-[-10px]',
+      '[&_#dropdown-wrapper[data-popper-placement="top-start"]]:spr-mt-[-6px]',
+    );
+
+    const dropdownWrappertClasses = classNames(
+      'spr-font-weight-regular spr-font-size-200 spr-line-height-500 spr-letter-spacing-none spr-font-main',
+      'spr-flex spr-items-center spr-gap-size-spacing-5xs',
+      {
+        'spr-cursor-not-allowed': disabled.value,
+        'spr-cursor-default': disabledCountryCurrency.value && !disabled.value,
+        'spr-cursor-pointer': !disabledCountryCurrency.value && !disabled.value,
+      },
+    );
+
+    return {
+      dropdownBaseClasses,
+      dropdownWrappertClasses,
+    };
+  });
+
+  // fallback random id if user does not provide one (stable per component instance)
+  const fallbackId = ref(`currency-${Math.random().toString(36).slice(2, 8)}-dropdown`);
+  const dropdownId = computed(() => (id.value ? `${id.value}-dropdown` : fallbackId.value));
+
+  const modelValue = useVModel(props, 'modelValue', emit);
+  const popperState = ref(false);
+
+  // Locale mapping per currency (extend as needed). Fallback 'en-US'.
+  const currencyLocaleMap: Record<string, string> = {
+    EUR: 'de-DE',
+    USD: 'en-US',
+    GBP: 'en-GB',
+    JPY: 'ja-JP',
+    PHP: 'en-PH',
+    AUD: 'en-AU',
+    CAD: 'en-CA',
+    CHF: 'de-CH',
+  };
+
+  const currentLocale = computed(() => currencyLocaleMap[selected.value.currency] || 'en-US');
+
+  const buildNumberFormat = (minFrac: number, maxFrac: number) =>
+    new Intl.NumberFormat(currentLocale.value, {
+      style: 'currency',
+      currency: selected.value.currency,
+      currencyDisplay: 'symbol',
+      minimumFractionDigits: minFrac,
+      maximumFractionDigits: maxFrac,
+    });
+
+  const localeSeparators = computed(() => {
+    try {
+      const fmt = buildNumberFormat(0, 2);
+      const parts = fmt.formatToParts(1234.5);
+      const group = parts.find((p) => p.type === 'group')?.value || ',';
+      const decimal = parts.find((p) => p.type === 'decimal')?.value || '.';
+      return { group, decimal };
+    } catch {
+      return { group: ',', decimal: '.' };
+    }
+  });
+
+  // Numeric representation – removes locale grouping & normalizes decimal to '.'
+  const numericValue = computed<number | null>(() => {
+    if (!modelValue.value) return null;
+    const { group, decimal } = localeSeparators.value;
+    const escapedGroup = group.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+    const escapedDec = decimal.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+    let cleaned = String(modelValue.value)
+      .replace(new RegExp(escapedGroup, 'g'), '')
+      .replace(new RegExp(escapedDec, 'g'), '.');
+    cleaned = cleaned.replace(/[^0-9.-]/g, '');
+    const parsed = Number(cleaned);
+    return isNaN(parsed) ? null : parsed;
+  });
+
+  const rawNumericString = computed<string | null>(() => {
+    if (!modelValue.value) return null;
+    const { group, decimal } = localeSeparators.value;
+    const escapedGroup = group.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+    const escapedDec = decimal.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+    let cleaned = String(modelValue.value)
+      .replace(new RegExp(escapedGroup, 'g'), '')
+      .replace(new RegExp(escapedDec, 'g'), '.');
+    cleaned = cleaned.replace(/[^0-9.-]/g, '');
+    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)
+    const userMin = Math.min(Math.max(0, minDecimals.value), 6);
+    return Math.min(6, Math.max(0, Math.min(userMin, maxDecimals.value)));
+  });
+
+  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
+    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);
+  });
+
+  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;
+    }
+    return sign + groupedInt;
+  };
+
+  /**
+   * Full formatting for blur: grouping + enforce min decimals padding and clamp to max.
+   */
+  const formatOnBlur = (raw: string): string => {
+    if (!raw) return '';
+
+    const cleaned = raw.replace(/[^0-9,.-]/g, '');
+    let work = cleaned;
+    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 (!intPart) intPart = '0';
+
+    // Truncate fractional part to max without rounding if disableRounding
+    if (fracPart && disableRounding.value) {
+      fracPart = fracPart.slice(0, effectiveMaxDecimals.value);
+    }
+
+    const canonical = sign + intPart + (fracPart ? '.' + fracPart : '');
+    let numeric = Number(canonical);
+    if (isNaN(numeric)) return raw;
+
+    if (disableRounding.value && fracPart) {
+      // Ensure numeric value is truncated (not rounded) at effectiveMaxDecimals
+      const factor = Math.pow(10, effectiveMaxDecimals.value);
+      numeric = Math.trunc(numeric * factor) / factor;
+    }
+
+    return formatNumberForBlur(numeric);
+  };
+
+  const handleCurrencyInput = (event: InputEvent) => {
+    const inputEl = event.target as HTMLInputElement;
+
+    let raw = inputEl.value;
+
+    raw = raw.replace(/\s+/g, '');
+
+    let sign = '';
+
+    if (raw.startsWith('-')) {
+      sign = '-';
+      raw = raw.slice(1);
+    }
+
+    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, '');
+    }
+
+    // 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) {
+      let out = modelValue.value;
+
+      out = formatOnBlur(out);
+
+      modelValue.value = out;
+    }
+
+    // Always emit meta on blur (even if empty -> numericValue/rawValue may be null)
+    emit('getSelectedCurrencyMeta', {
+      currency: selected.value.currency,
+      symbol: selected.value.symbol,
+      numericValue: numericValue.value,
+      rawValue: rawNumericString.value,
+    });
+
+    if (numericValue.value !== null) emit('getNumericValue', numericValue.value);
+  };
+
+  const handleSelectedCurrency = (currencyRaw: unknown) => {
+    let currencyCode: string | undefined;
+
+    if (typeof currencyRaw === 'string') {
+      currencyCode = currencyRaw;
+    } else if (
+      currencyRaw &&
+      typeof currencyRaw === 'object' &&
+      'value' in currencyRaw &&
+      typeof (currencyRaw as { value: unknown }).value === 'string'
+    ) {
+      currencyCode = (currencyRaw as { value: string }).value;
+    }
+
+    if (typeof currencyCode !== 'string') {
+      return;
+    }
+
+    const found = currencyOptions.find((c) => c.value === currencyCode);
+
+    if (found) {
+      const previousCurrency = selected.value.currency;
+
+      // Locale-agnostic parse of current input before switching locale to avoid misinterpretation
+      let preSwitchNumeric: number | null = null;
+      if (modelValue.value) {
+        const raw = modelValue.value;
+        const cleaned = raw.replace(/[^0-9,.-]/g, '');
+        let work = cleaned;
+        let sign = '';
+        if (work.startsWith('-')) {
+          sign = '-';
+          work = work.slice(1);
+        }
+        // Identify last separator (either '.' or ',') as decimal; earlier ones are grouping
+        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, '');
+        }
+        const canonical = sign + intPart + (fracPart ? '.' + fracPart : '');
+        const parsed = Number(canonical);
+        preSwitchNumeric = isNaN(parsed) ? null : parsed;
+      }
+
+      selected.value = { ...found };
+      emit('getSelectedCurrencyMeta', {
+        currency: found.currency,
+        symbol: found.symbol,
+        numericValue: preSwitchNumeric !== null ? preSwitchNumeric : numericValue.value,
+        rawValue: preSwitchNumeric !== null ? String(preSwitchNumeric) : rawNumericString.value,
+      });
+      // 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);
+      }
+    }
+  };
+
+  const handlePopperState = (state: boolean) => {
+    popperState.value = state;
+  };
+
+  const dropdownDisplayText = computed(() => (props.displayAsCode ? selected.value.currency : selected.value.symbol));
+
+  // #region - Set Currency Options
+  // Collect currency codes first so we can derive ambiguity and symbols deterministically.
+  const currencyCodesSet = new Set<string>();
+  const currencyCodeToName = new Map<string, string>();
+
+  Object.values(countries).forEach((country) => {
+    const _country = country as CountryLike;
+    const codes: string[] = Array.isArray(_country.currency) ? _country.currency : [];
+
+    codes.forEach((code) => {
+      currencyCodesSet.add(code);
+      if (!currencyCodeToName.has(code)) {
+        currencyCodeToName.set(code, _country.name);
+      }
+    });
+  });
+
+  // Dynamically detect ambiguous narrow symbols so we fall back to currency code when a symbol represents >1 code.
+  const detectAmbiguousSymbols = (codes: string[], locale = 'en'): Set<string> => {
+    const symbolToCodes = new Map<string, Set<string>>();
+    for (const code of codes) {
+      try {
+        const parts = new Intl.NumberFormat(locale, {
+          style: 'currency',
+          currency: code,
+          currencyDisplay: 'narrowSymbol',
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 0,
+        }).formatToParts(1);
+        const sym = parts.find((p) => p.type === 'currency')?.value;
+
+        if (!sym) continue;
+        if (!symbolToCodes.has(sym)) symbolToCodes.set(sym, new Set());
+
+        symbolToCodes.get(sym)!.add(code);
+      } catch {
+        // Ignore unsupported currency
+      }
+    }
+
+    const ambiguous = new Set<string>();
+
+    for (const [sym, set] of symbolToCodes.entries()) {
+      if (set.size > 1) ambiguous.add(sym);
+    }
+
+    if (ambiguous.size === 0) ['$', '¥', '﷼', 'kr'].forEach((s) => ambiguous.add(s));
+
+    return ambiguous;
+  };
+
+  const AMBIGUOUS_SYMBOLS: Set<string> = detectAmbiguousSymbols(Array.from(currencyCodesSet));
+
+  const deriveCurrencySymbol = (code: string, locale = 'en'): string => {
+    const formatter = new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency: code,
+      currencyDisplay: 'narrowSymbol',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    });
+    const parts = formatter.formatToParts(1);
+    const currencyPart = parts.find((p) => p.type === 'currency');
+
+    if (currencyPart && currencyPart.value) {
+      return AMBIGUOUS_SYMBOLS.has(currencyPart.value) ? code : currencyPart.value;
+    }
+
+    return code;
+  };
+
+  let displayNames: { of(code: string): string | undefined } | null = null;
+
+  try {
+    const dn = (
+      Intl as unknown as { DisplayNames?: new (l: string[], o: { type: string }) => { of(code: string): string } }
+    ).DisplayNames;
+
+    if (dn) displayNames = new dn(['en'], { type: 'currency' });
+  } catch {
+    displayNames = null;
+  }
+
+  // Build UNSORTED_CURRENCY_OPTIONS now that we have supporting data & helpers.
+  const UNSORTED_CURRENCY_OPTIONS: CurrencyOption[] = Array.from(currencyCodesSet).map((code) => {
+    let displayName: string | null | undefined;
+
+    try {
+      displayName = displayNames ? displayNames.of(code) : null;
+    } catch {
+      displayName = null;
+    }
+
+    const fallbackName = currencyCodeToName.get(code) || code;
+    const name = typeof displayName === 'string' ? displayName : fallbackName;
+    const symbol = deriveCurrencySymbol(code);
+
+    return {
+      text: `${name} (${code})`,
+      value: code,
+      currency: code,
+      symbol,
+    };
+  });
+
+  const currencyOptions: CurrencyOption[] = [...UNSORTED_CURRENCY_OPTIONS].sort((a, b) =>
+    a.text.localeCompare(b.text, 'en', { sensitivity: 'base' }),
+  );
+
+  // Initialization of selected currency must occur AFTER currencyOptions is defined.
+  const initCurrency = () => {
+    const fallback = currencyOptions.find((c) => c.value === 'USD') || currencyOptions[0];
+
+    return currencyOptions.find((c) => c.value === preSelectedCurrency.value) || fallback;
+  };
+
+  const selected = ref(initCurrency());
+  // #endregion - Set Currency Options
+
+  watch(preSelectedCurrency, (code) => {
+    if (code) handleSelectedCurrency(code);
+  });
+
+  onMounted(() => {
+    handleSelectedCurrency(preSelectedCurrency.value);
+    if (modelValue.value && numericValue.value !== null) {
+      modelValue.value = formatNumberForBlur(numericValue.value);
+      emit('getNumericValue', numericValue.value);
+      emit('getSelectedCurrencyMeta', {
+        currency: selected.value.currency,
+        symbol: selected.value.symbol,
+        numericValue: numericValue.value,
+        rawValue: rawNumericString.value,
+      });
+    }
+  });
+
+  return {
+    inputCurrencyClasses,
+    dropdownId,
+    modelValue,
+    currencyOptions,
+    selected,
+    dropdownDisplayText,
+    popperState,
+    handleCurrencyInput,
+    handleBlur,
+    handleSelectedCurrency,
+    handlePopperState,
+    effectiveMinDecimals,
+    effectiveMaxDecimals,
+    currentLocale,
+    rawNumericString,
+  };
+};

package/src/components/select/select-ladderized/select-ladderized.ts

@@ -97,6 +97,10 @@ export const selectLadderizedPropTypes = {
     validator: (value: (typeof PLACEMENTS_TYPES)[number]) => PLACEMENTS_TYPES.includes(value),
     default: 'bottom',
   },
+  distance: {
+    type: Number,
+    default: 6,
+  },
   triggers: {
     type: Array as PropType<(typeof TRIGGER_EVENTS)[number][]>,
     validator: (value: (typeof TRIGGER_EVENTS)[number][]) => {
@@ -113,7 +117,7 @@ export const selectLadderizedPropTypes = {
   },
   autoHide: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   wrapperPosition: {
     type: String,

package/src/components/select/select-ladderized/select-ladderized.vue

@@ -10,7 +10,7 @@
     <Menu
       v-model:shown="ladderizedSelectPopperState"
       aria-id="ladderized-select-wrapper"
-      distance="4"
+      :distance="props.distance"
       :placement="props.placement"
       :triggers="props.triggers"
       :popper-triggers="props.popperTriggers"

package/src/components/select/select-multiple/select-multiple.ts

@@ -76,6 +76,10 @@ export const multiSelectPropTypes = {
     validator: (value: (typeof PLACEMENTS_TYPES)[number]) => PLACEMENTS_TYPES.includes(value),
     default: 'bottom',
   },
+  distance: {
+    type: Number,
+    default: 6,
+  },
   triggers: {
     type: Array as PropType<(typeof TRIGGER_EVENTS)[number][]>,
     validator: (value: (typeof TRIGGER_EVENTS)[number][]) => {

package/src/components/select/select-multiple/select-multiple.vue

@@ -10,7 +10,7 @@
     <Menu
       v-model:shown="multiSelectPopperState"
       aria-id="multi-select-wrapper"
-      distance="4"
+      :distance="props.distance"
       :placement="props.placement"
       :triggers="props.triggers"
       :popper-triggers="props.popperTriggers"

package/src/components/select/select.ts

@@ -74,12 +74,16 @@ export const selectPropTypes = {
     validator: (value: (typeof PLACEMENTS_TYPES)[number]) => PLACEMENTS_TYPES.includes(value),
     default: 'bottom',
   },
+  distance: {
+    type: Number,
+    default: 6,
+  },
   triggers: {
     type: Array as PropType<(typeof TRIGGER_EVENTS)[number][]>,
     validator: (value: (typeof TRIGGER_EVENTS)[number][]) => {
       return value.every((val) => TRIGGER_EVENTS.includes(val));
     },
-    default: () => ['click'],
+    default: () => [],
   },
   popperTriggers: {
     type: Array as PropType<(typeof TRIGGER_EVENTS)[number][]>,
@@ -90,7 +94,7 @@ export const selectPropTypes = {
   },
   autoHide: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   popperStrategy: {
     type: String,