@fiscozen/input 3.0.1 → 3.0.3

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@fiscozen/input",
-  "version": "3.0.1",
+  "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/composables": "1.0.3",
+    "@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/FzInput.vue

@@ -11,7 +11,7 @@
  * <FzInput label="Email" type="email" v-model="email" />
  * <FzInput label="Password" type="password" rightIcon="eye" @fzinput:right-icon-click="toggleVisibility" />
  */
-import { computed, toRefs, Ref, ref, watch, useSlots } from "vue";
+import { computed, toRefs, Ref, ref, watch, useSlots, useAttrs } from "vue";
 import { FzInputProps, type InputEnvironment } from "./types";
 import { FzAlert } from "@fiscozen/alert";
 import { FzIcon } from "@fiscozen/icons";
@@ -29,6 +29,26 @@ const props = withDefaults(defineProps<FzInputProps>(), {
   autocomplete: false,
 });
 
+defineOptions({
+  inheritAttrs: false,
+});
+
+const attrs = useAttrs();
+
+/**
+ * Attrs forwarded to the native input element.
+ * Excludes class which are applied to the root wrapper div
+ * so that consumers can control layout/positioning of the component.
+ */
+const inputAttrs = computed(() => {
+  return {
+    ...attrs,
+    class: undefined,
+  };
+});
+
+const rootClass = computed(() => attrs.class);
+
 /**
  * Deprecation warning and normalization for size prop.
  * Watches the size prop and warns once on mount if it's provided.
@@ -45,17 +65,17 @@ watch(
         console.warn(
           `[FzInput] Both "size" and "environment" props are provided. ` +
             `"environment=${props.environment}" will be used and "size=${size}" will be ignored. ` +
-            `Please remove the deprecated "size" prop.`
+            `Please remove the deprecated "size" prop.`,
         );
       } else {
         console.warn(
           `[FzInput] The "size" prop is deprecated and will be removed in a future version. ` +
-            `Please use environment="${mappedEnvironment}" instead of size="${size}".`
+            `Please use environment="${mappedEnvironment}" instead of size="${size}".`,
         );
       }
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 /**
@@ -68,11 +88,11 @@ watch(
     if (rightIconSize !== undefined) {
       console.warn(
         `[FzInput] The "rightIconSize" prop is deprecated and will be removed in a future version. ` +
-          `Icons now have a fixed size of "md". The provided value "${rightIconSize}" will be ignored.`
+          `Icons now have a fixed size of "md". The provided value "${rightIconSize}" will be ignored.`,
       );
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 /**
@@ -111,7 +131,7 @@ const {
   containerRef,
   model,
   effectiveEnvironment,
-  isFocused
+  isFocused,
 );
 
 const slots = defineSlots<{
@@ -213,7 +233,7 @@ const handleIconKeydown = (
   emitEvent:
     | "fzinput:left-icon-click"
     | "fzinput:right-icon-click"
-    | "fzinput:second-right-icon-click"
+    | "fzinput:second-right-icon-click",
 ) => {
   if (e.key === "Enter" || e.key === " ") {
     e.preventDefault();
@@ -273,7 +293,7 @@ const isLeftIconClickable = computed(() => !!props.leftIcon);
  * Icons are only accessible via keyboard when aria-label is provided.
  */
 const isLeftIconAccessible = computed(
-  () => isLeftIconClickable.value && !!props.leftIconAriaLabel
+  () => isLeftIconClickable.value && !!props.leftIconAriaLabel,
 );
 
 /**
@@ -282,14 +302,14 @@ const isLeftIconAccessible = computed(
  * Readonly inputs have the same visual styling and behavior as disabled inputs.
  */
 const isReadonlyOrDisabled = computed(
-  () => !!props.disabled || !!props.readonly
+  () => !!props.disabled || !!props.readonly,
 );
 
 /**
  * Determines if right icon is clickable (not rendered as button)
  */
 const isRightIconClickable = computed(
-  () => !!props.rightIcon && !props.rightIconButton
+  () => !!props.rightIcon && !props.rightIconButton,
 );
 
 /**
@@ -298,14 +318,14 @@ const isRightIconClickable = computed(
  * Icons are only accessible via keyboard when aria-label is provided.
  */
 const isRightIconAccessible = computed(
-  () => isRightIconClickable.value && !!props.rightIconAriaLabel
+  () => isRightIconClickable.value && !!props.rightIconAriaLabel,
 );
 
 /**
  * Determines if second right icon is clickable (not rendered as button)
  */
 const isSecondRightIconClickable = computed(
-  () => !!props.secondRightIcon && !props.secondRightIconButton
+  () => !!props.secondRightIcon && !props.secondRightIconButton,
 );
 
 /**
@@ -314,7 +334,7 @@ const isSecondRightIconClickable = computed(
  * Icons are only accessible via keyboard when aria-label is provided.
  */
 const isSecondRightIconAccessible = computed(
-  () => isSecondRightIconClickable.value && !!props.secondRightIconAriaLabel
+  () => isSecondRightIconClickable.value && !!props.secondRightIconAriaLabel,
 );
 
 defineExpose({
@@ -324,7 +344,7 @@ defineExpose({
 </script>
 
 <template>
-  <div class="fz-input w-full flex flex-col gap-8">
+  <div class="fz-input w-full flex flex-col gap-8" :class="rootClass">
     <slot name="label">
       <label
         v-if="label"
@@ -391,7 +411,7 @@ defineExpose({
           :aria-disabled="isReadonlyOrDisabled ? 'true' : 'false'"
           :aria-labelledby="ariaLabelledBy"
           :aria-describedby="ariaDescribedBy"
-          v-bind="$attrs"
+          v-bind="inputAttrs"
           @blur="
             (e) => {
               isFocused = false;

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')
+    })
+  })
 })
 

package/src/__tests__/FzInput.spec.ts

@@ -1024,6 +1024,85 @@ describe('FzInput', () => {
     })
   })
 
+  describe('Attribute forwarding (inheritAttrs: false)', () => {
+    it('applies consumer class to root wrapper div', async () => {
+      const wrapper = mount(FzInput, {
+        props: { label: 'Label' },
+        attrs: { class: 'max-w-xs custom-class' },
+      })
+
+      await wrapper.vm.$nextTick()
+
+      const rootDiv = wrapper.element as HTMLElement
+      expect(rootDiv.classList.contains('max-w-xs')).toBe(true)
+      expect(rootDiv.classList.contains('custom-class')).toBe(true)
+      expect(rootDiv.classList.contains('fz-input')).toBe(true)
+    })
+
+    it('does not apply consumer class to native input element', async () => {
+      const wrapper = mount(FzInput, {
+        props: { label: 'Label' },
+        attrs: { class: 'max-w-xs' },
+      })
+
+      await wrapper.vm.$nextTick()
+
+      const input = wrapper.find('input').element as HTMLInputElement
+      expect(input.classList.contains('max-w-xs')).toBe(false)
+    })
+
+    it('forwards data-* attributes to native input element', async () => {
+      const wrapper = mount(FzInput, {
+        props: { label: 'Label' },
+        attrs: { 'data-cy': 'my-input', 'data-testid': 'test-input' },
+      })
+
+      await wrapper.vm.$nextTick()
+
+      const input = wrapper.find('input').element as HTMLInputElement
+      expect(input.getAttribute('data-cy')).toBe('my-input')
+      expect(input.getAttribute('data-testid')).toBe('test-input')
+
+      const rootDiv = wrapper.element as HTMLElement
+      expect(rootDiv.getAttribute('data-cy')).toBeNull()
+    })
+
+    it('forwards consumer id to native input element (overriding internal id)', async () => {
+      const wrapper = mount(FzInput, {
+        props: { label: 'Label' },
+        attrs: { id: 'custom-id' },
+      })
+
+      await wrapper.vm.$nextTick()
+
+      const input = wrapper.find('input').element as HTMLInputElement
+      expect(input.getAttribute('id')).toBe('custom-id')
+
+      const rootDiv = wrapper.element as HTMLElement
+      expect(rootDiv.getAttribute('id')).toBeNull()
+    })
+
+    it('forwards consumer aria-* attributes to native input element', async () => {
+      const wrapper = mount(FzInput, {
+        props: { label: 'Label' },
+        attrs: {
+          'aria-expanded': 'true',
+          'aria-haspopup': 'listbox',
+        },
+      })
+
+      await wrapper.vm.$nextTick()
+
+      const input = wrapper.find('input').element as HTMLInputElement
+      expect(input.getAttribute('aria-expanded')).toBe('true')
+      expect(input.getAttribute('aria-haspopup')).toBe('listbox')
+
+      const rootDiv = wrapper.element as HTMLElement
+      expect(rootDiv.getAttribute('aria-expanded')).toBeNull()
+      expect(rootDiv.getAttribute('aria-haspopup')).toBeNull()
+    })
+  })
+
   describe('Edge cases', () => {
     it(`renders ${NUMBER_OF_INPUTS} input with different ids`, async () => {
       const wrapperList = Array.from({ length: NUMBER_OF_INPUTS }).map((_, i) =>