design-system-next 2.7.43 → 2.7.45

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

@@ -15,6 +15,8 @@ interface InputClasses {
   prefixSlotClasses: string;
   trailingSlotClasses: string;
   helperClasses: string;
+  charCountClasses: string;
+  helperContainerClasses: string;
 }
 
 export const useInput = (
@@ -22,13 +24,21 @@ export const useInput = (
   emit: SetupContext<InputEmitTypes>['emit'],
   slots: Record<string, unknown>,
 ) => {
-  const { active, error, disabled, offsetSize } = toRefs(props);
+  const { active, error, disabled, offsetSize, showCharCount, maxLength } = toRefs(props);
 
   const inputTextRef = ref(null);
 
   const { focused } = useFocus(inputTextRef);
 
   const modelValue = useVModel(props, 'modelValue', emit);
+  
+  const currentLength = computed(() => {
+    return modelValue.value ? String(modelValue.value).length : 0;
+  });
+  
+  const hasCharLimit = computed(() => {
+    return maxLength.value !== undefined && maxLength.value > 0;
+  });
 
   const inputClasses: ComputedRef<InputClasses> = computed(() => {
     const baseClasses = classNames('spr-flex spr-flex-col spr-gap-size-spacing-4xs');
@@ -99,11 +109,19 @@ export const useInput = (
       'spr-text-mushroom-300': !error.value,
       'spr-text-tomato-600': error.value,
     });
+    
+    const helperContainerClasses = classNames('spr-flex spr-flex-row spr-items-start spr-justify-between spr-w-full', {
+      'spr-mt-1': showCharCount.value || props.displayHelper,
+    });
 
-    const helperClasses = classNames('spr-body-sm-regular spr-flex spr-items-center spr-gap-size-spacing-5xs', {
+    const helperClasses = classNames('spr-body-sm-regular spr-flex spr-items-center spr-gap-size-spacing-5xs spr-flex-1', {
       'spr-text-color-danger-base': error.value,
       'spr-text-color-supporting': !error.value,
     });
+    
+    const charCountClasses = classNames('spr-ml-auto spr-body-2xs-regular spr-text-right spr-text-xs spr-text-color-supporting', {
+      'spr-text-color-danger-base': hasCharLimit.value && currentLength.value >= (maxLength.value || 0),
+    });
 
     return {
       baseClasses,
@@ -114,11 +132,21 @@ export const useInput = (
       prefixSlotClasses,
       trailingSlotClasses,
       helperClasses,
+      charCountClasses,
+      helperContainerClasses,
     };
   });
 
   const onInput = (event: Event) => {
-    modelValue.value = (event.target as HTMLInputElement).value;
+    const target = event.target as HTMLInputElement;
+    let value: string | number = target.value;
+    
+    // Convert to number if type is number
+    if (props.type === 'number' && value !== '') {
+      value = Number(value);
+    }
+    
+    modelValue.value = value;
   };
 
   const disableClickEvent = (event: Event) => {
@@ -133,5 +161,7 @@ export const useInput = (
     inputClasses,
     onInput,
     disableClickEvent,
+    currentLength,
+    hasCharLimit,
   };
 };