srcdev-nuxt-components 9.4.6 → 9.4.7

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

@@ -1,11 +1,14 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed } from "vue";
 import StorybookComponent from "../InputTextCore.vue";
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 
 interface InputTextCoreStoryArgs {
   modelValue: string;
-  type: "text" | "email" | "password" | "tel" | "url" | "search";
+  type: "text" | "email" | "password" | "tel" | "url" | "search" | "date";
   maxlength: number;
+  min: string | number;
+  max: string | number;
   name: string;
   placeholder: string;
   label: string;
@@ -13,7 +16,7 @@ interface InputTextCoreStoryArgs {
   fieldHasError: boolean;
   required: boolean;
   theme: FormUiTheme;
-  InputUiVariant: InputUiVariant;
+  inputVariant: InputUiVariant;
   styleClassPassthrough: string[];
   leftSlotContent: string;
   rightSlotContent: string;
@@ -37,7 +40,7 @@ export default {
     // Basic Configuration
     type: {
       control: { type: "select" },
-      options: ["text", "email", "password", "tel", "url", "search"],
+      options: ["text", "email", "password", "tel", "url", "search", "date"],
       description: "Input type",
       table: {
         category: "Basic",
@@ -50,6 +53,20 @@ export default {
         category: "Basic",
       },
     },
+    min: {
+      control: "text",
+      description: 'Passed straight through to the native input — e.g. earliest allowed date for type="date", or lowest number for type="number".',
+      table: {
+        category: "Basic",
+      },
+    },
+    max: {
+      control: "text",
+      description: 'Passed straight through to the native input — e.g. latest allowed date for type="date", or highest number for type="number".',
+      table: {
+        category: "Basic",
+      },
+    },
     name: {
       control: "text",
       description: "Input name attribute",
@@ -104,7 +121,7 @@ export default {
         category: "Styling",
       },
     },
-    InputUiVariant: {
+    inputVariant: {
       control: { type: "select" },
       options: ["normal", "outlined", "underlined"],
       description: "Input variant style",
@@ -170,31 +187,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<InputTextCoreStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    const { modelValue, ...otherArgs } = args;
-    const inputValue = ref(modelValue);
-
-    return {
-      inputValue,
-      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="inputValue"
-      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">
-      Current value: {{ inputValue }}
+      Current value: {{ args.modelValue }}
     </div>
   `,
 });
@@ -230,12 +246,22 @@ WithSlots.args = {
 
 export const Outlined = Template.bind({});
 Outlined.args = {
-  InputUiVariant: "outlined",
+  inputVariant: "outlined",
   placeholder: "Outlined input",
 };
 
 export const Underlined = Template.bind({});
 Underlined.args = {
-  InputUiVariant: "underlined",
+  inputVariant: "underlined",
   placeholder: "Underlined input",
 };
+
+export const DateWithMinMax = Template.bind({});
+DateWithMinMax.args = {
+  type: "date",
+  label: "Appointment date",
+  name: "appointmentDate",
+  // Prevents picking a date in the past in the native browser date picker.
+  min: new Date().toISOString().split("T")[0],
+  max: "2027-12-31",
+};

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

@@ -1,11 +1,14 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed } from "vue";
 import StorybookComponent from "../variants/InputTextWithLabel.vue";
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 
 interface InputTextWithLabelStoryArgs {
   modelValue: string;
-  type: "text" | "email" | "password" | "tel" | "url" | "search";
+  type: "text" | "email" | "password" | "tel" | "url" | "search" | "date";
   maxlength: number;
+  min: string | number;
+  max: string | number;
   name: string;
   placeholder: string;
   label: string;
@@ -37,7 +40,7 @@ export default {
     // Basic Configuration
     type: {
       control: { type: "select" },
-      options: ["text", "email", "password", "tel", "url", "search"],
+      options: ["text", "email", "password", "tel", "url", "search", "date"],
       description: "Input type",
       table: {
         category: "Basic",
@@ -50,6 +53,20 @@ export default {
         category: "Basic",
       },
     },
+    min: {
+      control: "text",
+      description: 'Passed straight through to the native input — e.g. earliest allowed date for type="date".',
+      table: {
+        category: "Basic",
+      },
+    },
+    max: {
+      control: "text",
+      description: 'Passed straight through to the native input — e.g. latest allowed date for type="date".',
+      table: {
+        category: "Basic",
+      },
+    },
     name: {
       control: "text",
       description: "Input name attribute",
@@ -170,31 +187,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<InputTextWithLabelStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    const { modelValue, ...otherArgs } = args;
-    const inputValue = ref(modelValue);
+    const componentArgs = computed(() => {
+      const { useDescriptionSlot, useDescriptionHtmlSlot, descriptionContent, descriptionHtmlContent, ...rest } = args;
+      return rest;
+    });
 
-    return {
-      inputValue,
-      args: otherArgs,
-      descriptionContent: args.descriptionContent,
-      descriptionHtmlContent: args.descriptionHtmlContent,
-      useDescriptionSlot: args.useDescriptionSlot,
-      useDescriptionHtmlSlot: args.useDescriptionHtmlSlot,
-    };
+    return { args, componentArgs };
   },
   template: `
     <StorybookComponent
-      v-model="inputValue"
-      v-bind="args"
+      v-model="args.modelValue"
+      v-bind="componentArgs"
     >
-      <template v-if="useDescriptionSlot" #description>{{ descriptionContent }}</template>
-      <template v-if="useDescriptionHtmlSlot" #descriptionHtml v-html="descriptionHtmlContent"></template>
+      <template v-if="args.useDescriptionSlot" #description>{{ args.descriptionContent }}</template>
+      <template v-if="args.useDescriptionHtmlSlot" #descriptionHtml v-html="args.descriptionHtmlContent"></template>
     </StorybookComponent>
     <div class="mt-4 text-sm text-gray-600">
-      Current value: {{ inputValue }}
+      Current value: {{ args.modelValue }}
     </div>
   `,
 });
@@ -256,6 +272,16 @@ Underlined.args = {
   type: "url",
 };
 
+export const DateWithMinMax = Template.bind({});
+DateWithMinMax.args = {
+  type: "date",
+  label: "Appointment date",
+  name: "appointmentDate",
+  // Prevents picking a date in the past in the native browser date picker.
+  min: new Date().toISOString().split("T")[0],
+  max: "2027-12-31",
+};
+
 export const AllThemes = Template.bind({});
 AllThemes.storyName = "All Themes";
 AllThemes.args = {};

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

@@ -0,0 +1,56 @@
+// 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/InputPasswordWithLabel.vue";
+
+const initialPropsData = {
+  name: "password",
+  label: "Password",
+  errorMessage: "",
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+  });
+};
+
+describe("InputPasswordWithLabel", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("defaults to type=password and the default toggle button text", async () => {
+    wrapper = await wrapperFactory();
+
+    expect(wrapper.find("input").attributes("type")).toBe("password");
+    expect(wrapper.find("button").text()).toContain("Show password");
+  });
+
+  it("toggles the input type and button text when the toggle button is clicked", async () => {
+    wrapper = await wrapperFactory();
+
+    await wrapper.find("button").trigger("click");
+
+    expect(wrapper.find("input").attributes("type")).toBe("text");
+    expect(wrapper.find("button").text()).toContain("Hide password");
+  });
+
+  it("uses custom showPasswordText/hidePasswordText when provided", async () => {
+    wrapper = await wrapperFactory({
+      showPasswordText: "Afficher le mot de passe",
+      hidePasswordText: "Masquer le mot de passe",
+    });
+
+    expect(wrapper.find("button").text()).toContain("Afficher le mot de passe");
+
+    await wrapper.find("button").trigger("click");
+
+    expect(wrapper.find("button").text()).toContain("Masquer le mot de passe");
+  });
+});

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",
 };