design-system-next 2.26.9 → 2.26.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-next",
   "private": false,
-  "version": "2.26.9",
+  "version": "2.26.12",
   "main": "./dist/design-system-next.umd.js",
   "module": "./dist/design-system-next.es.js",
   "types": "./dist/design-system-next.es.d.ts",

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

@@ -91,7 +91,37 @@ export const useInputContactNumber = (
     emit('getContactNumberErrors', []);
 
     if (value.length > 0) {
+      // Try to parse the number as user types
+      const original = 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;
+      }
+
+      // Emit parsed number even if incomplete, if it was parsed
+      if (phoneNumber && phoneNumber.isValid()) {
+        emit('getParsedInternationalNumber', phoneNumber.formatInternational());
+      } else if (normalizedNumber) {
+        // For incomplete numbers, emit what we have in international format prefix
+        const prefix = `+${selectedCountry.value.countryCallingCode}`;
+        emit('getParsedInternationalNumber', `${prefix} ${value.replace(/[^0-9]/g, '')}`);
+      }
+
       formatContactNumber();
+    } else {
+      // Emit empty string when input is cleared
+      emit('getParsedInternationalNumber', '');
     }
   };
 
@@ -109,6 +139,30 @@ export const useInputContactNumber = (
       countryCode: selectedCountry.value.countryCode,
       countryCallingCode: selectedCountry.value.countryCallingCode,
     });
+
+    // Emit parsed number with new country code if there's a value
+    if (formattedValue.value) {
+      const original = formattedValue.value.trim();
+      const normalizedNumber = original.replace(/\D/g, '');
+
+      let phoneNumber;
+
+      try {
+        phoneNumber = parsePhoneNumber(normalizedNumber, {
+          defaultCountry: selectedCountry.value.countryCode as CountryCode,
+          extract: false,
+        });
+      } catch {
+        phoneNumber = undefined;
+      }
+
+      if (phoneNumber && phoneNumber.isValid()) {
+        emit('getParsedInternationalNumber', phoneNumber.formatInternational().replace(/\s/g, ''));
+      } else if (normalizedNumber) {
+        const prefix = `+${selectedCountry.value.countryCallingCode}`;
+        emit('getParsedInternationalNumber', `${prefix}${normalizedNumber}`);
+      }
+    }
   };
 
   const formatContactNumber = () => {
@@ -146,6 +200,7 @@ export const useInputContactNumber = (
       formattedValue.value = formattedNumber;
 
       emit('getContactNumberErrors', []);
+      emit('getParsedInternationalNumber', phoneNumber.formatInternational());
     } else {
       emit('getContactNumberErrors', [
         {

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

@@ -20,7 +20,7 @@ export const inputCurrencyPropTypes = {
     type: String,
     default: '0.00',
   },
-  preSelectedCurrency: {
+  currency: {
     type: String,
     default: 'PHP',
   },

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

@@ -17,16 +17,11 @@ interface InputCurrencyClasses {
 }
 
 export const useInputCurrency = (props: InputCurrencyPropTypes, emit: SetupContext<InputCurrencyEmitTypes>['emit']) => {
-  const {
-    id,
-    preSelectedCurrency,
-    disabledCountryCurrency,
-    disabled,
-    maxDecimals,
-    minDecimals,
-    disableRounding,
-    baseValue,
-  } = toRefs(props);
+  const { id, currency, disabledCountryCurrency, disabled, maxDecimals, minDecimals, disableRounding, baseValue } =
+    toRefs(props);
+
+  // Normalize currency to uppercase for case-insensitive support
+  const normalizedCurrency = computed(() => currency.value.toUpperCase());
 
   const inputCurrencyClasses: ComputedRef<InputCurrencyClasses> = computed(() => {
     const dropdownBaseClasses = classNames(
@@ -442,20 +437,23 @@ export const useInputCurrency = (props: InputCurrencyPropTypes, emit: SetupConte
 
   // Initialization of selected currency must occur AFTER currencyOptions is defined.
   const initCurrency = () => {
-    const fallback = currencyOptions.find((c) => c.value === 'USD') || currencyOptions[0];
+    const fallback =
+      currencyOptions.find((c) => c.value === 'PHP') ||
+      currencyOptions.find((c) => c.value === 'USD') ||
+      currencyOptions[0];
 
-    return currencyOptions.find((c) => c.value === preSelectedCurrency.value) || fallback;
+    return currencyOptions.find((c) => c.value === normalizedCurrency.value) || fallback;
   };
 
   const selected = ref(initCurrency());
   // #endregion - Set Currency Options
 
-  watch(preSelectedCurrency, (code) => {
+  watch(normalizedCurrency, (code) => {
     if (code) handleSelectedCurrency(code);
   });
 
   onMounted(() => {
-    handleSelectedCurrency(preSelectedCurrency.value);
+    handleSelectedCurrency(normalizedCurrency.value);
     if (modelValue.value && numericValue.value !== null) {
       modelValue.value = formatNumberForBlur(numericValue.value);
       emit('getCurrencyValue', numericValue.value);

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

@@ -613,6 +613,13 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
     handleSearch();
   });
 
+  // Sync searchString (from prop) back to searchText (local state)
+  watch(searchString, (newVal) => {
+    if (searchText.value !== newVal) {
+      searchText.value = newVal;
+    }
+  });
+
   watch(
     apiSelectedList,
     () => {

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

@@ -153,48 +153,63 @@ export const useSelectLadderized = (
     if (disabled.value) return;
 
     wasCleared.value = true;
-
     inputText.value = '';
+    ladderizedSelectModel.value = [];
 
     emit('update:modelValue', []);
   };
 
-  // Watch for changes in modelValue to update inputText
-  watchDeep(
-    ladderizedSelectModel,
-    (newVal) => {
-      if (isCustomInput.value) return;
-
-      if (wasCleared.value) {
-        inputText.value = '';
-        wasCleared.value = false;
+  // Helper function to update input text from model value
+  const updateInputTextFromModel = (newVal: (string | number)[]) => {
+    if (isCustomInput.value) return;
 
-        return;
-      };
-
-      if (Array.isArray(newVal) && newVal.length > 0) {
-        // Treat the array as a single path for ladderized select
-        let currentLevel = ladderizedSelectOptions.value;
+    if (wasCleared.value) {
+      inputText.value = '';
+      wasCleared.value = false;
+      return;
+    }
 
-        const pathTexts: string[] = [];
+    if (Array.isArray(newVal) && newVal.length > 0) {
+      // Treat the array as a single path for ladderized select
+      let currentLevel = ladderizedSelectOptions.value;
+      const pathTexts: string[] = [];
 
-        for (const value of newVal) {
-          const found = currentLevel.find((item) => item.value === value);
+      for (const value of newVal) {
+        const found = currentLevel.find((item) => item.value === value);
 
-          if (!found) break;
+        if (!found) break;
 
-          pathTexts.push(found.text);
-          currentLevel = found.sublevel || [];
-        }
+        pathTexts.push(found.text);
+        currentLevel = found.sublevel || [];
+      }
 
+      // Only update if we successfully resolved all values in the path
+      if (pathTexts.length === newVal.length) {
         inputText.value = prependText.value
           ? pathTexts.slice().reverse().join(textSeperator.value)
           : pathTexts.join(textSeperator.value);
       }
+    } else if (Array.isArray(newVal) && newVal.length === 0) {
+      inputText.value = '';
+    }
+  };
+
+  // Watch for changes in modelValue to update inputText
+  watchDeep(
+    ladderizedSelectModel,
+    (newVal) => {
+      updateInputTextFromModel(newVal);
     },
     { immediate: true },
   );
 
+  // Watch for changes in options to re-render text when options load
+  watch(ladderizedSelectOptions, () => {
+    if (!wasCleared.value && ladderizedSelectModel.value && ladderizedSelectModel.value.length > 0) {
+      updateInputTextFromModel(ladderizedSelectModel.value);
+    }
+  });
+
   watch(ladderizedSelectPopperState, (newState) => {
     emit('popper-state', newState);
   });

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

@@ -107,6 +107,7 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
 
   const inputText = ref<string | number>('');
   const chippedInputTextRef = ref(null);
+  const isSearching = ref<boolean>(false);
 
   const search = useVModel(props, 'searchValue', emit);
   const searchInput = ref<string>('');
@@ -204,9 +205,17 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     });
 
     hasUserSelected.value = true;
+
+    // Temporarily disable searching flag to allow inputText update
+    const wasSearching = isSearching.value;
+    isSearching.value = false;
+
     multiSelectModel.value = selectedValues;
 
-    updateMultiSelectedItemsFromValue();
+    // Restore searching state if user was searching
+    if (wasSearching) {
+      isSearching.value = true;
+    }
 
     emit('get-selected-options', multiSelectedItems);
   };
@@ -252,6 +261,11 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
    * Handles stringified objects and updates the input text accordingly.
    */
   const updateMultiSelectedItemsFromValue = () => {
+    // Don't update inputText if user is actively searching
+    if (isSearching.value) {
+      return;
+    }
+
     const values = normalizedValue.value;
 
     if (!values || !values.length) {
@@ -313,7 +327,7 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
         inputText.value = `${values.length} items selected`;
       } else {
         // Safely get display text for each value
-        inputText.value = values
+        const displayTexts = values
           .map((val) => {
             // Try to find the corresponding option for display text
             const found = multiSelectOptions.value.find((opt) => {
@@ -338,9 +352,12 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
               }
               return optVal == v;
             });
-            return found ? found.text : typeof val === 'string' || typeof val === 'number' ? String(val) : '';
+            // Only return text if found, otherwise return empty string
+            return found ? found.text : '';
           })
-          .join(', ');
+          .filter((text) => text !== ''); // Filter out empty strings from not found items
+
+        inputText.value = displayTexts.length > 0 ? displayTexts.join(', ') : '';
       }
     }
 
@@ -390,6 +407,9 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
   watch(searchInput, (newVal, oldVal) => {
     search.value = newVal;
 
+    // Track if user is actively searching
+    isSearching.value = newVal.length > 0;
+
     // Only emit search-string if value actually changed (not just modifier keys)
     // Modifier key presses alone won't change the input value
     if (newVal !== oldVal) {
@@ -422,6 +442,10 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
 
       multiSelectPopperState.value = false;
 
+      // Clear search state when closing
+      isSearching.value = false;
+      searchInput.value = '';
+
       updateMultiSelectedItemsFromValue();
     },
     {