@fiscozen/input 3.0.1 → 3.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiscozen/input",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "Design System Input component",
   "main": "src/index.ts",
   "type": "module",
@@ -8,8 +8,8 @@
   "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/button": "3.0.0"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",

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__/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) =>