srcdev-nuxt-components 9.4.6 → 9.4.8

package/app/components/05.forms/input-text/tests/InputTextAsNumberWithLabel.spec.ts

@@ -0,0 +1,61 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import type { VueWrapper } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ComponentUnderTest from "../variants/InputTextAsNumberWithLabel.vue";
+
+const initialPropsData = {
+  name: "quantity",
+  label: "Quantity",
+  errorMessage: "",
+  min: 0,
+  max: 10,
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+    slots: {
+      left: () => "−",
+      right: () => "+",
+    },
+  });
+};
+
+describe("InputTextAsNumberWithLabel", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("uses the default step button text", async () => {
+    wrapper = await wrapperFactory();
+
+    const [stepDown, stepUp] = wrapper.findAll("button");
+    expect(stepDown?.text()).toContain("Step down");
+    expect(stepUp?.text()).toContain("Step up");
+  });
+
+  it("uses custom stepDownText/stepUpText when provided", async () => {
+    wrapper = await wrapperFactory({
+      stepDownText: "Diminuer",
+      stepUpText: "Augmenter",
+    });
+
+    const [stepDown, stepUp] = wrapper.findAll("button");
+    expect(stepDown?.text()).toContain("Diminuer");
+    expect(stepUp?.text()).toContain("Augmenter");
+  });
+
+  it("increments the value when the step-up button is clicked", async () => {
+    wrapper = await wrapperFactory({ modelValue: 5 });
+
+    const [, stepUp] = wrapper.findAll("button");
+    await stepUp?.trigger("click");
+
+    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([6]);
+  });
+});

package/app/components/05.forms/input-text/tests/InputTextCore.spec.ts

@@ -0,0 +1,60 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import type { VueWrapper } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ComponentUnderTest from "../InputTextCore.vue";
+
+const initialPropsData = {
+  id: "test-input",
+  name: "testName",
+  modelValue: "",
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+  });
+};
+
+describe("InputTextCore", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("does not set min/max attributes when not provided", async () => {
+    wrapper = await wrapperFactory();
+    const input = wrapper.find("input");
+
+    expect(input.attributes("min")).toBeUndefined();
+    expect(input.attributes("max")).toBeUndefined();
+  });
+
+  it("passes through a string min/max (e.g. for type=date)", async () => {
+    wrapper = await wrapperFactory({
+      type: "date",
+      min: "2026-01-01",
+      max: "2026-12-31",
+    });
+    const input = wrapper.find("input");
+
+    expect(input.attributes("type")).toBe("date");
+    expect(input.attributes("min")).toBe("2026-01-01");
+    expect(input.attributes("max")).toBe("2026-12-31");
+  });
+
+  it("passes through a numeric min/max (e.g. for type=number)", async () => {
+    wrapper = await wrapperFactory({
+      type: "number",
+      min: 0,
+      max: 100,
+    });
+    const input = wrapper.find("input");
+
+    expect(input.attributes("min")).toBe("0");
+    expect(input.attributes("max")).toBe("100");
+  });
+});

package/app/components/05.forms/input-text/tests/InputTextWithLabel.spec.ts

@@ -0,0 +1,46 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import type { VueWrapper } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ComponentUnderTest from "../variants/InputTextWithLabel.vue";
+
+const initialPropsData = {
+  type: "text" as const,
+  name: "testName",
+  label: "Test label",
+  errorMessage: "",
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+  });
+};
+
+describe("InputTextWithLabel", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders the label text", async () => {
+    wrapper = await wrapperFactory({ label: "Email address" });
+    expect(wrapper.text()).toContain("Email address");
+  });
+
+  it("forwards min/max through to the underlying InputTextCore input (e.g. for type=date)", async () => {
+    wrapper = await wrapperFactory({
+      type: "date",
+      min: "2026-01-01",
+      max: "2026-12-31",
+    });
+    const input = wrapper.find("input");
+
+    expect(input.attributes("type")).toBe("date");
+    expect(input.attributes("min")).toBe("2026-01-01");
+    expect(input.attributes("max")).toBe("2026-12-31");
+  });
+});

package/app/components/05.forms/input-text/variants/InputPasswordWithLabel.vue

@@ -53,6 +53,10 @@ interface Props {
   styleClassPassthrough?: string | string[];
   theme?: FormUiTheme;
   inputVariant?: InputUiVariant;
+  /** Accessible name for the toggle button while the password is hidden. */
+  showPasswordText?: string;
+  /** Accessible name for the toggle button while the password is visible. */
+  hidePasswordText?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -64,6 +68,8 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
   theme: "default",
   inputVariant: "normal",
+  showPasswordText: "Show password",
+  hidePasswordText: "Hide password",
 });
 
 const modelValue = defineModel<string>();
@@ -76,7 +82,7 @@ const inputType = computed<"text" | "password">(() => {
 
 const displayPassword = ref(false);
 const buttonText = computed(() => {
-  return displayPassword.value ? "Hide password" : "Show password";
+  return displayPassword.value ? props.hidePasswordText : props.showPasswordText;
 });
 const toggleDisplayPassword = () => {
   displayPassword.value = !displayPassword.value;

package/app/components/05.forms/input-text/variants/InputTextAsNumberWithLabel.vue

@@ -56,7 +56,7 @@
           type="button"
           :readonly="(modelValue ?? 0) <= min"
           :is-pending="false"
-          button-text="Step down"
+          :button-text="stepDownText"
           theme="default"
           variant="inline"
           @click.stop.prevent="updateValue(-step, (modelValue ?? 0) > min)"
@@ -71,7 +71,7 @@
           type="button"
           :readonly="(modelValue ?? 0) >= max"
           :is-pending="false"
-          button-text="Step up"
+          :button-text="stepUpText"
           theme="default"
           variant="inline"
           @click.stop.prevent="updateValue(step, (modelValue ?? 0) < max)"
@@ -103,6 +103,10 @@ interface Props {
   max: number;
   step?: number;
   inputVariant?: InputUiVariant;
+  /** Accessible name for the decrement button. */
+  stepDownText?: string;
+  /** Accessible name for the increment button. */
+  stepUpText?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -114,6 +118,8 @@ const props = withDefaults(defineProps<Props>(), {
   theme: "default",
   step: 1,
   inputVariant: "normal",
+  stepDownText: "Step down",
+  stepUpText: "Step up",
 });
 
 const slots = useSlots();

package/app/components/05.forms/input-text/variants/InputTextWithLabel.vue

@@ -41,6 +41,8 @@
         :type
         :inputmode
         :maxlength
+        :min
+        :max
         :name
         :placeholder
         :label
@@ -86,6 +88,10 @@ import type { InputTypesText, FormUiTheme, InputUiVariant, InputMode } from "~/t
 
 interface Props {
   maxlength?: number;
+  /** Passed straight through to the native input — meaningful for type="date"/"number" etc. */
+  min?: string | number;
+  /** Passed straight through to the native input — meaningful for type="date"/"number" etc. */
+  max?: string | number;
   type: InputTypesText;
   inputmode?: InputMode;
   name: string;

package/app/components/05.forms/input-textarea/stories/InputTextareaCore.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed } from "vue";
 import StorybookComponent from "../InputTextareaCore.vue";
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 
@@ -12,7 +13,7 @@ interface InputTextareaCoreStoryArgs {
   fieldHasError: boolean;
   required: boolean;
   theme: FormUiTheme;
-  InputUiVariant: InputUiVariant;
+  inputVariant: InputUiVariant;
   styleClassPassthrough: string[];
   leftSlotContent: string;
   rightSlotContent: string;
@@ -95,7 +96,7 @@ export default {
         category: "Styling",
       },
     },
-    InputUiVariant: {
+    inputVariant: {
       control: { type: "select" },
       options: ["normal", "outlined", "underlined"],
       description: "Textarea variant style",
@@ -160,31 +161,30 @@ export default {
   },
 } as Meta<typeof StorybookComponent>;
 
+// `args` is Storybook's own reactive object — bind to it directly (`args.x`) rather than
+// destructuring it into local variables/refs, which would snapshot the values once at setup()
+// and stop reflecting later Controls-panel changes. `componentArgs` strips the non-prop
+// slot-toggle args so they don't leak onto the component as unknown attributes.
 const Template: StoryFn<InputTextareaCoreStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    const { modelValue, ...otherArgs } = args;
-    const textareaValue = ref(modelValue);
-
-    return {
-      textareaValue,
-      args: otherArgs,
-      leftSlotContent: args.leftSlotContent,
-      rightSlotContent: args.rightSlotContent,
-      useLeftSlot: args.useLeftSlot,
-      useRightSlot: args.useRightSlot,
-    };
+    const componentArgs = computed(() => {
+      const { useLeftSlot, useRightSlot, leftSlotContent, rightSlotContent, ...rest } = args;
+      return rest;
+    });
+
+    return { args, componentArgs };
   },
   template: `
     <StorybookComponent
-      v-model="textareaValue"
-      v-bind="args"
+      v-model="args.modelValue"
+      v-bind="componentArgs"
     >
-      <template v-if="useLeftSlot" #left>{{ leftSlotContent }}</template>
-      <template v-if="useRightSlot" #right>{{ rightSlotContent }}</template>
+      <template v-if="args.useLeftSlot" #left>{{ args.leftSlotContent }}</template>
+      <template v-if="args.useRightSlot" #right>{{ args.rightSlotContent }}</template>
     </StorybookComponent>
     <div class="mt-4 text-sm text-gray-600">
-      Character count: {{ textareaValue.length }}
+      Character count: {{ args.modelValue.length }}
     </div>
   `,
 });
@@ -229,13 +229,13 @@ WithSlots.args = {
 
 export const Outlined = Template.bind({});
 Outlined.args = {
-  InputUiVariant: "outlined",
+  inputVariant: "outlined",
   placeholder: "Outlined textarea",
 };
 
 export const Underlined = Template.bind({});
 Underlined.args = {
-  InputUiVariant: "underlined",
+  inputVariant: "underlined",
   placeholder: "Underlined textarea",
 };
 

package/app/components/05.forms/input-textarea/stories/InputTextareaWithLabel.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed } from "vue";
 import StorybookComponent from "../variants/InputTextareaWithLabel.vue";
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 
@@ -12,7 +13,7 @@ interface InputTextareaWithLabelStoryArgs {
   fieldHasError: boolean;
   required: boolean;
   theme: FormUiTheme;
-  InputUiVariant: InputUiVariant;
+  inputVariant: InputUiVariant;
   styleClassPassthrough: string[];
   useDescriptionTextSlot: boolean;
   useDescriptionHtmlSlot: boolean;
@@ -99,7 +100,7 @@ export default {
         category: "Styling",
       },
     },
-    InputUiVariant: {
+    inputVariant: {
       control: { type: "select" },
       options: ["normal", "outlined", "underlined"],
       description: "Textarea variant style",
@@ -196,37 +197,42 @@ export default {
   },
 } as Meta<typeof StorybookComponent>;
 
+// `args` is Storybook's own reactive object — bind to it directly (`args.x`) rather than
+// destructuring it into local variables/refs, which would snapshot the values once at setup()
+// and stop reflecting later Controls-panel changes. `componentArgs` strips the non-prop
+// slot-toggle args so they don't leak onto the component as unknown attributes.
 const Template: StoryFn<InputTextareaWithLabelStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    const { modelValue, ...otherArgs } = args;
-    const textareaValue = ref(modelValue);
+    const componentArgs = computed(() => {
+      const {
+        useDescriptionTextSlot,
+        useDescriptionHtmlSlot,
+        descriptionTextContent,
+        descriptionHtmlContent,
+        useLeftSlot,
+        useRightSlot,
+        leftSlotContent,
+        rightSlotContent,
+        ...rest
+      } = args;
+      return rest;
+    });
 
-    return {
-      textareaValue,
-      args: otherArgs,
-      descriptionTextContent: args.descriptionTextContent,
-      descriptionHtmlContent: args.descriptionHtmlContent,
-      useDescriptionTextSlot: args.useDescriptionTextSlot,
-      useDescriptionHtmlSlot: args.useDescriptionHtmlSlot,
-      leftSlotContent: args.leftSlotContent,
-      rightSlotContent: args.rightSlotContent,
-      useLeftSlot: args.useLeftSlot,
-      useRightSlot: args.useRightSlot,
-    };
+    return { args, componentArgs };
   },
   template: `
     <StorybookComponent
-      v-model="textareaValue"
-      v-bind="args"
+      v-model="args.modelValue"
+      v-bind="componentArgs"
     >
-      <template v-if="useDescriptionTextSlot" #descriptionText>{{ descriptionTextContent }}</template>
-      <template v-if="useDescriptionHtmlSlot" #descriptionHtml v-html="descriptionHtmlContent"></template>
-      <template v-if="useLeftSlot" #left>{{ leftSlotContent }}</template>
-      <template v-if="useRightSlot" #right>{{ rightSlotContent }}</template>
+      <template v-if="args.useDescriptionTextSlot" #descriptionText>{{ args.descriptionTextContent }}</template>
+      <template v-if="args.useDescriptionHtmlSlot" #descriptionHtml v-html="args.descriptionHtmlContent"></template>
+      <template v-if="args.useLeftSlot" #left>{{ args.leftSlotContent }}</template>
+      <template v-if="args.useRightSlot" #right>{{ args.rightSlotContent }}</template>
     </StorybookComponent>
     <div class="mt-4 text-sm text-gray-600">
-      Character count: {{ textareaValue.length }} / {{ args.maxlength }}
+      Character count: {{ args.modelValue.length }} / {{ args.maxlength }}
     </div>
   `,
 });
@@ -305,7 +311,7 @@ Required.args = {
 
 export const Outlined = Template.bind({});
 Outlined.args = {
-  InputUiVariant: "outlined",
+  inputVariant: "outlined",
   label: "Outlined Textarea",
   placeholder: "This is an outlined textarea",
   useDescriptionTextSlot: true,
@@ -314,7 +320,7 @@ Outlined.args = {
 
 export const Underlined = Template.bind({});
 Underlined.args = {
-  InputUiVariant: "underlined",
+  inputVariant: "underlined",
   label: "Underlined Textarea",
   placeholder: "This is an underlined textarea",
 };
@@ -359,7 +365,7 @@ AllVariants.render = (args) => ({
         <h3 class="text-lg font-semibold capitalize">{{ variant }} Variant</h3>
         <StorybookComponent
           v-model="textareaValues[variant]"
-          v-bind="{ ...args, InputUiVariant: variant, label: variant + ' Textarea', name: variant + '-textarea' }"
+          v-bind="{ ...args, inputVariant: variant, label: variant + ' Textarea', name: variant + '-textarea' }"
         />
       </div>
     </div>