design-system-next 2.14.3 → 2.15.0

package/src/components/input/input-contact-number/input-contact-number.ts

@@ -23,9 +23,13 @@ export const COUNTRY_OPTIONS: CountryOption[] = getCountries().map((countryCode)
 });
 
 export const inputContactNumberPropTypes = {
+  id: {
+    type: String,
+    default: '',
+  },
   modelValue: {
     type: String,
-    required: true,
+    default: '',
   },
   placeholder: {
     type: String,
@@ -69,13 +73,7 @@ export const inputContactNumberEmitTypes = {
 
 export interface InputContactNumberEmit {
   (event: 'update:modelValue', value: string): void;
-  (
-    event: 'getSelectedCountryCallingCode',
-    value: {
-      countryCode: string[];
-      countryCallingCode: string[];
-    },
-  ): void;
+  (event: 'getSelectedCountryCallingCode', value: { countryCode: string; countryCallingCode: string }): void;
   (event: 'getContactNumberErrors', value: Array<{ title: string; message: string }>): void;
 }
 

package/src/components/input/input-contact-number/input-contact-number.vue

@@ -12,9 +12,9 @@
   >
     <template #prefix>
       <spr-dropdown
-        id="contact-number-country-dropdown"
+        :id="dropdownId"
         v-model="selectedCountry.countryCode"
-        class="[&>#dropdown-wrapper]:spr-my-1"
+        :class="inputContactNumberClasses.dropdownBaseClasses"
         :menu-list="COUNTRY_OPTIONS"
         placement="bottom-start"
         :width="!props.disabledCountryCallingCode ? '45px' : '35px'"
@@ -23,10 +23,10 @@
         @update:model-value="handleSelectedCountryCode"
         @get-popper-state="handlePopperState"
       >
-        <span :class="inputContactNumberClasses.countryCallingCodeClasses">
-          +{{ selectedCountry.countryCallingCode[0] }}
+        <div :class="inputContactNumberClasses.dropdownWrappertClasses">
+          <span>+{{ selectedCountry.countryCallingCode }}</span>
           <icon v-if="!props.disabledCountryCallingCode" icon="ph:caret-down" width="16px" height="16px" />
-        </span>
+        </div>
       </spr-dropdown>
     </template>
   </spr-input>
@@ -48,6 +48,7 @@ const emit = defineEmits(inputContactNumberEmitTypes);
 
 const {
   inputContactNumberClasses,
+  dropdownId,
   formattedValue,
   selectedCountry,
   popperState,

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

@@ -8,17 +8,26 @@ import parsePhoneNumber, { getCountries, getCountryCallingCode, CountryCode } fr
 import { type InputContactNumberEmitTypes, type InputContactNumberPropTypes } from './input-contact-number';
 
 interface InputContactNumberClasses {
-  countryCallingCodeClasses: string;
+  dropdownBaseClasses: string;
+  dropdownWrappertClasses: string;
 }
 
 export const useInputContactNumber = (
   props: InputContactNumberPropTypes,
   emit: SetupContext<InputContactNumberEmitTypes>['emit'],
 ) => {
-  const { preSelectedCountryCode, disabledCountryCallingCode, disabled } = toRefs(props);
+  const { id, preSelectedCountryCode, disabledCountryCallingCode, disabled } = toRefs(props);
 
   const inputContactNumberClasses: ComputedRef<InputContactNumberClasses> = computed(() => {
-    const countryCallingCodeClasses = classNames(
+    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',
       {
@@ -29,20 +38,25 @@ export const useInputContactNumber = (
     );
 
     return {
-      countryCallingCodeClasses,
+      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 formattedValue = useVModel(props, 'modelValue', emit);
 
   const selectedCountry = ref({
-    countryCode: ['PH'],
-    countryCallingCode: ['63'],
+    countryCode: 'PH',
+    countryCallingCode: '63',
   });
 
   const popperState = ref(false);
 
-  const setselectedCountry = (selectedCountryCode: string) => {
+  const setSelectedCountry = (selectedCountryCode: string) => {
     const countryCallingCode = getCountryCallingCode(selectedCountryCode as CountryCode);
 
     const countryCode = getCountries().find((country) => {
@@ -51,8 +65,8 @@ export const useInputContactNumber = (
 
     if (countryCode && countryCallingCode) {
       selectedCountry.value = {
-        countryCode: [countryCode],
-        countryCallingCode: [countryCallingCode],
+        countryCode: countryCode,
+        countryCallingCode: countryCallingCode,
       };
 
       formatContactNumber();
@@ -81,10 +95,10 @@ export const useInputContactNumber = (
     }
   };
 
-  const handleSelectedCountryCode = (countryCode: string[]) => {
+  const handleSelectedCountryCode = (countryCode: string) => {
     selectedCountry.value = {
-      countryCode: [countryCode[0]],
-      countryCallingCode: [getCountryCallingCode(countryCode[0] as CountryCode)],
+      countryCode: countryCode,
+      countryCallingCode: getCountryCallingCode(countryCode as CountryCode),
     };
 
     emit('getContactNumberErrors', []);
@@ -92,27 +106,46 @@ export const useInputContactNumber = (
     formatContactNumber();
 
     emit('getSelectedCountryCallingCode', {
-      countryCode: selectedCountry.value.countryCode[0],
-      countryCallingCode: selectedCountry.value.countryCallingCode[0],
+      countryCode: selectedCountry.value.countryCode,
+      countryCallingCode: selectedCountry.value.countryCallingCode,
     });
   };
 
   const formatContactNumber = () => {
-    if (!formattedValue.value) return;
-
-    const normalizedNumber = formattedValue.value.replace(/\D/g, '');
+    if (!formattedValue.value) {
+      emit('getContactNumberErrors', []);
+      return;
+    }
 
-    const phoneNumber = parsePhoneNumber(normalizedNumber, {
-      defaultCountry: selectedCountry.value.countryCode[0] as CountryCode,
-      extract: false,
-    });
+    const original = formattedValue.value.trim();
+    const hasPlus = original.startsWith('+');
+    const normalizedNumber = hasPlus ? `+${original.replace(/[^0-9]/g, '')}` : original.replace(/\D/g, '');
+
+    let phoneNumber;
+
+    try {
+      phoneNumber = hasPlus
+        ? parsePhoneNumber(normalizedNumber)
+        : parsePhoneNumber(normalizedNumber, {
+            defaultCountry: selectedCountry.value.countryCode as CountryCode,
+            extract: false,
+          });
+    } catch {
+      phoneNumber = undefined;
+    }
 
     if (phoneNumber && phoneNumber.isValid()) {
       let formattedNumber = phoneNumber.formatInternational();
 
-      formattedNumber = formattedNumber.replace(`+${selectedCountry.value.countryCallingCode[0]} `, '');
+      const prefix = `+${selectedCountry.value.countryCallingCode} `;
+
+      if (formattedNumber.startsWith(prefix)) {
+        formattedNumber = formattedNumber.slice(prefix.length);
+      }
 
       formattedValue.value = formattedNumber;
+
+      emit('getContactNumberErrors', []);
     } else {
       emit('getContactNumberErrors', [
         {
@@ -133,23 +166,24 @@ export const useInputContactNumber = (
 
   watch(preSelectedCountryCode, (newValue) => {
     if (newValue) {
-      setselectedCountry(newValue);
+      setSelectedCountry(newValue);
     }
   });
 
   onMounted(() => {
     emit('getSelectedCountryCallingCode', {
-      countryCode: selectedCountry.value.countryCode[0],
-      countryCallingCode: selectedCountry.value.countryCallingCode[0],
+      countryCode: selectedCountry.value.countryCode,
+      countryCallingCode: selectedCountry.value.countryCallingCode,
     });
 
     if (preSelectedCountryCode.value) {
-      setselectedCountry(preSelectedCountryCode.value);
+      setSelectedCountry(preSelectedCountryCode.value);
     }
   });
 
   return {
     inputContactNumberClasses,
+    dropdownId,
     formattedValue,
     selectedCountry,
     popperState,
@@ -158,5 +192,6 @@ export const useInputContactNumber = (
     formatContactNumber,
     handleUpdateModelValue,
     handlePopperState,
+    setSelectedCountry,
   };
 };

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

@@ -0,0 +1,100 @@
+import type { ExtractPropTypes } from 'vue';
+
+export interface CurrencyOption {
+  text: string;
+  value: string;
+  currency: string;
+  symbol: string;
+}
+
+export const inputCurrencyPropTypes = {
+  id: {
+    type: String,
+    default: '',
+  },
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: '0.00',
+  },
+  preSelectedCurrency: {
+    type: String,
+    default: 'PHP',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  disabledCountryCurrency: {
+    type: Boolean,
+    default: false,
+  },
+  autoFormat: {
+    type: Boolean,
+    default: false,
+  },
+  maxDecimals: {
+    type: Number,
+    default: 2,
+  },
+  minDecimals: {
+    type: Number,
+    default: 2,
+  },
+  displayAsCode: {
+    type: Boolean,
+    default: true,
+  },
+  disableRounding: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export const inputCurrencyEmitTypes = {
+  'update:modelValue': (value: string): value is string => typeof value === 'string',
+  getSelectedCurrencyMeta: (value: {
+    currency: string;
+    symbol: string;
+    numericValue: number | null;
+    rawValue: string | null;
+  }): value is { currency: string; symbol: string; numericValue: number | null; rawValue: string | null } =>
+    typeof value.currency === 'string' &&
+    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),
+};
+
+export interface InputCurrencyEmit {
+  (event: 'update:modelValue', value: string): void;
+  (
+    event: 'getSelectedCurrencyMeta',
+    value: {
+      currency: string;
+      symbol: string;
+      numericValue: number | null;
+      rawValue: string | null;
+    },
+  ): void;
+  (event: 'getCurrencyErrors', value: Array<{ title: string; message: string }>): void;
+  (event: 'getNumericValue', value: number): void;
+}
+
+export type InputCurrencyPropTypes = ExtractPropTypes<typeof inputCurrencyPropTypes>;
+export type InputCurrencyEmitTypes = typeof inputCurrencyEmitTypes;

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

@@ -0,0 +1,60 @@
+<template>
+  <spr-input
+    v-bind="$attrs"
+    v-model="modelValue"
+    type="text"
+    :placeholder="props.placeholder"
+    :active="popperState"
+    :disabled="props.disabled"
+    data-testid="input-currency-text"
+    @input="handleCurrencyInput"
+    @blur="handleBlur"
+  >
+    <template #prefix>
+      <spr-dropdown
+        :id="dropdownId"
+        v-model="selected.value"
+        :class="inputCurrencyClasses.dropdownBaseClasses"
+        :menu-list="currencyOptions"
+        placement="bottom-start"
+        :width="!props.disabledCountryCurrency ? '45px' : '35px'"
+        popper-width="300px"
+        :disabled="props.disabled || props.disabledCountryCurrency"
+        data-testid="input-currency-dropdown"
+        @update:model-value="handleSelectedCurrency"
+        @get-popper-state="handlePopperState"
+      >
+        <span :class="inputCurrencyClasses.dropdownWrappertClasses">
+          <span>{{ dropdownDisplayText }}</span>
+          <icon v-if="!props.disabledCountryCurrency" icon="ph:caret-down" width="16px" height="16px" />
+        </span>
+      </spr-dropdown>
+    </template>
+  </spr-input>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
+import SprInput from '@/components/input/input.vue';
+import SprDropdown from '@/components/dropdown/dropdown.vue';
+import { useInputCurrency } from './use-input-currency';
+import { inputCurrencyPropTypes, inputCurrencyEmitTypes } from './input-currency';
+
+const props = defineProps(inputCurrencyPropTypes);
+const emit = defineEmits(inputCurrencyEmitTypes);
+
+const {
+  inputCurrencyClasses,
+  dropdownId,
+  modelValue,
+  currencyOptions,
+  selected,
+  dropdownDisplayText,
+  popperState,
+  handleCurrencyInput,
+  handleBlur,
+  handleSelectedCurrency,
+  handlePopperState,
+} = useInputCurrency(props, emit);
+</script>