@fiscozen/input 3.0.2 → 3.0.3

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@fiscozen/input",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Design System Input component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Cristian Barraco",
   "dependencies": {
-    "@fiscozen/alert": "3.0.0",
+    "@fiscozen/button": "3.0.0",
     "@fiscozen/composables": "1.0.3",
-    "@fiscozen/button": "3.0.0"
+    "@fiscozen/alert": "3.0.0"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",

package/src/FzCurrencyInput.vue

@@ -78,7 +78,7 @@ const getEmptyValue = (): number | null | undefined => {
  */
 const getEmptyDisplayValue = (
   isEmptyValueZero: boolean,
-  isCurrentlyFocused: boolean
+  isCurrentlyFocused: boolean,
 ): string => {
   if (isEmptyValueZero) {
     // During typing, show empty string. Formatting happens on blur
@@ -327,7 +327,7 @@ const handleBlur = () => {
     // Display empty value (formatted zero if zeroOnEmpty is true, empty string otherwise)
     fzInputModel.value = getEmptyDisplayValue(
       expectedEmptyValue === 0,
-      false // Not focused during blur
+      false, // Not focused during blur
     );
     return;
   }
@@ -395,7 +395,7 @@ const handleFocus = () => {
  * @returns Normalized number value, undefined, or null
  */
 const normalizeModelValue = (
-  value: number | string | undefined | null
+  value: number | string | undefined | null,
 ): number | undefined | null => {
   if (value === undefined || value === null || value === "") {
     return value === null ? null : undefined;
@@ -406,7 +406,7 @@ const normalizeModelValue = (
   if (typeof value === "string") {
     console.warn(
       "[FzCurrencyInput] String values in v-model are deprecated. Please use number instead. " +
-        `Received: "${value}". This will be parsed to a number for retrocompatibility, but string support may be removed in a future version.`
+        `Received: "${value}". This will be parsed to a number for retrocompatibility, but string support may be removed in a future version.`,
     );
     const parsed = parse(value);
     return isNaN(parsed) ? undefined : parsed;
@@ -512,7 +512,7 @@ onMounted(() => {
     // Display empty value (formatted zero if zeroOnEmpty is true, empty string otherwise)
     fzInputModel.value = getEmptyDisplayValue(
       expectedEmptyValue === 0,
-      false // Not focused during mount
+      false, // Not focused during mount
     );
     return;
   }
@@ -585,7 +585,7 @@ onMounted(() => {
       // Display empty value (formatted zero if zeroOnEmpty is true, empty string otherwise)
       fzInputModel.value = getEmptyDisplayValue(
         emptyValue === 0,
-        false // Not focused during mount
+        false, // Not focused during mount
       );
     }
     return;
@@ -621,7 +621,7 @@ watch(
       // Display empty value (formatted zero if zeroOnEmpty is true, empty string otherwise)
       fzInputModel.value = getEmptyDisplayValue(
         expectedEmptyValue === 0,
-        isFocused.value
+        isFocused.value,
       );
       return;
     }
@@ -705,12 +705,12 @@ watch(
         // Display empty value (formatted zero if zeroOnEmpty is true, empty string otherwise)
         fzInputModel.value = getEmptyDisplayValue(
           emptyValue === 0,
-          isFocused.value
+          isFocused.value,
         );
       }
       return;
     }
-  }
+  },
 );
 
 defineExpose({
@@ -731,10 +731,10 @@ defineExpose({
     @blur="handleBlur"
     @paste="handlePaste"
   >
-    <template #label>
+    <template v-if="$slots.label" #label>
       <slot name="label"></slot>
     </template>
-    <template #left-icon>
+    <template v-if="$slots['left-icon']" #left-icon>
       <slot name="left-icon"></slot>
     </template>
     <template #right-icon>
@@ -786,10 +786,10 @@ defineExpose({
         </div>
       </div>
     </template>
-    <template #helpText>
+    <template v-if="$slots.helpText" #helpText>
       <slot name="helpText"></slot>
     </template>
-    <template #errorMessage>
+    <template v-if="$slots.errorMessage" #errorMessage>
       <slot name="errorMessage"></slot>
     </template>
   </FzInput>

package/src/__tests__/FzCurrencyInput.spec.ts

@@ -1588,5 +1588,109 @@ describe('FzCurrencyInput', () => {
       })
     })
   })
+
+  describe('Slot forwarding', () => {
+    it('should not render empty help text span when helpText slot is not provided', async () => {
+      const wrapper = mount(FzCurrencyInput, {
+        props: {
+          label: 'Label',
+          modelValue: 10,
+        },
+      })
+
+      await wrapper.vm.$nextTick()
+
+      const helpSpan = wrapper.find(`[id$="-help"]`)
+      expect(helpSpan.exists()).toBe(false)
+    })
+
+    it('should render help text span when helpText slot is provided', async () => {
+      const wrapper = mount(FzCurrencyInput, {
+        props: {
+          label: 'Label',
+          modelValue: 10,
+        },
+        slots: {
+          helpText: 'Enter an amount',
+        },
+      })
+
+      await wrapper.vm.$nextTick()
+
+      const helpSpan = wrapper.find(`[id$="-help"]`)
+      expect(helpSpan.exists()).toBe(true)
+      expect(helpSpan.text()).toContain('Enter an amount')
+    })
+
+    it('should render label from label prop when label slot is not provided', async () => {
+      const wrapper = mount(FzCurrencyInput, {
+        props: {
+          label: 'Amount',
+          modelValue: 10,
+        },
+      })
+
+      await wrapper.vm.$nextTick()
+
+      const label = wrapper.find('label')
+      expect(label.exists()).toBe(true)
+      expect(label.text()).toContain('Amount')
+    })
+
+    it('should render custom label slot instead of label prop', async () => {
+      const wrapper = mount(FzCurrencyInput, {
+        props: {
+          label: 'Amount',
+          modelValue: 10,
+        },
+        slots: {
+          label: '<strong>Custom Label</strong>',
+        },
+      })
+
+      await wrapper.vm.$nextTick()
+
+      const strong = wrapper.find('strong')
+      expect(strong.exists()).toBe(true)
+      expect(strong.text()).toBe('Custom Label')
+
+      const defaultLabel = wrapper.find('label')
+      expect(defaultLabel.exists()).toBe(false)
+    })
+
+    it('should not render error message container when errorMessage slot is not provided', async () => {
+      const wrapper = mount(FzCurrencyInput, {
+        props: {
+          label: 'Label',
+          modelValue: 10,
+          error: true,
+        },
+      })
+
+      await wrapper.vm.$nextTick()
+
+      const errorContainer = wrapper.find('[role="alert"]')
+      expect(errorContainer.exists()).toBe(false)
+    })
+
+    it('should render error message when error is true and errorMessage slot is provided', async () => {
+      const wrapper = mount(FzCurrencyInput, {
+        props: {
+          label: 'Label',
+          modelValue: 10,
+          error: true,
+        },
+        slots: {
+          errorMessage: 'Invalid amount',
+        },
+      })
+
+      await wrapper.vm.$nextTick()
+
+      const errorContainer = wrapper.find('[role="alert"]')
+      expect(errorContainer.exists()).toBe(true)
+      expect(errorContainer.text()).toContain('Invalid amount')
+    })
+  })
 })