srcdev-nuxt-components 9.4.5 → 9.4.7

package/app/components/05.forms/input-text/InputTextCore.vue

@@ -27,6 +27,8 @@
       :name
       :required
       :maxlength
+      :min
+      :max
       :class="['input-text-core', elementClasses, { dirty: isDirty }, { active: isActive }]"
       :aria-invalid="fieldHasError ? 'true' : undefined"
       :aria-describedby
@@ -49,6 +51,10 @@ interface Props {
   type?: InputTypesText;
   inputmode?: InputMode;
   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;
   id: string;
   name: string;
   required?: boolean;

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed } from "vue";
 import StorybookComponent from "../variants/InputPasswordWithLabel.vue";
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 
@@ -12,12 +13,14 @@ interface InputPasswordWithLabelStoryArgs {
   fieldHasError: boolean;
   required: boolean;
   theme: FormUiTheme;
-  InputUiVariant: InputUiVariant;
+  inputVariant: InputUiVariant;
   styleClassPassthrough: string[];
   useDescriptionSlot: boolean;
   useDescriptionHtmlSlot: boolean;
   descriptionContent: string;
   descriptionHtmlContent: string;
+  showPasswordText: string;
+  hidePasswordText: string;
 }
 
 export default {
@@ -95,7 +98,7 @@ export default {
         category: "Styling",
       },
     },
-    InputUiVariant: {
+    inputVariant: {
       control: { type: "select" },
       options: ["normal", "outlined", "underlined"],
       description: "Input variant style",
@@ -140,6 +143,22 @@ export default {
         category: "Slots",
       },
     },
+
+    // Localisation
+    showPasswordText: {
+      control: "text",
+      description: "Accessible name for the toggle button while the password is hidden",
+      table: {
+        category: "Localisation",
+      },
+    },
+    hidePasswordText: {
+      control: "text",
+      description: "Accessible name for the toggle button while the password is visible",
+      table: {
+        category: "Localisation",
+      },
+    },
   },
   args: {
     modelValue: "",
@@ -158,34 +177,35 @@ export default {
     descriptionContent: "Password should be at least 8 characters long",
     descriptionHtmlContent:
       "Password must contain: <strong>8+ characters</strong>, <em>uppercase</em>, <em>lowercase</em>, <em>numbers</em>",
+    showPasswordText: "Show password",
+    hidePasswordText: "Hide password",
   },
 } 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<InputPasswordWithLabelStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    const { modelValue, ...otherArgs } = args;
-    const passwordValue = ref(modelValue);
+    const componentArgs = computed(() => {
+      const { useDescriptionSlot, useDescriptionHtmlSlot, descriptionContent, descriptionHtmlContent, ...rest } = args;
+      return rest;
+    });
 
-    return {
-      passwordValue,
-      args: otherArgs,
-      descriptionContent: args.descriptionContent,
-      descriptionHtmlContent: args.descriptionHtmlContent,
-      useDescriptionSlot: args.useDescriptionSlot,
-      useDescriptionHtmlSlot: args.useDescriptionHtmlSlot,
-    };
+    return { args, componentArgs };
   },
   template: `
     <StorybookComponent
-      v-model="passwordValue"
-      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: {{ passwordValue ? '•'.repeat(passwordValue.length) : 'Empty' }}
+      Current value: {{ args.modelValue ? '•'.repeat(args.modelValue.length) : 'Empty' }}
     </div>
   `,
 });
@@ -239,18 +259,27 @@ PasswordTooShort.args = {
 
 export const Outlined = Template.bind({});
 Outlined.args = {
-  InputUiVariant: "outlined",
+  inputVariant: "outlined",
   label: "Confirm Password",
   placeholder: "Confirm your password",
 };
 
 export const Underlined = Template.bind({});
 Underlined.args = {
-  InputUiVariant: "underlined",
+  inputVariant: "underlined",
   label: "Master Password",
   placeholder: "Enter master password",
 };
 
+export const LocalisedToggleText = Template.bind({});
+LocalisedToggleText.storyName = "Localised Toggle Text";
+LocalisedToggleText.args = {
+  label: "Mot de passe",
+  placeholder: "Saisissez votre mot de passe",
+  showPasswordText: "Afficher le mot de passe",
+  hidePasswordText: "Masquer le mot de passe",
+};
+
 export const AllVariants = Template.bind({});
 AllVariants.storyName = "All Input Variants";
 AllVariants.render = (args) => ({
@@ -279,7 +308,7 @@ AllVariants.render = (args) => ({
         <h3 class="text-lg font-semibold capitalize">{{ variant }} Variant</h3>
         <StorybookComponent
           v-model="passwordValues[variant]"
-          v-bind="{ ...args, InputUiVariant: variant, label: variant + ' Password', name: variant + '-password' }"
+          v-bind="{ ...args, inputVariant: variant, label: variant + ' Password', name: variant + '-password' }"
         />
       </div>
     </div>

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed } from "vue";
 import StorybookComponent from "../variants/InputTextAsNumberWithLabel.vue";
 import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
 
@@ -12,7 +13,7 @@ interface InputTextAsNumberWithLabelStoryArgs {
   fieldHasError: boolean;
   required: boolean;
   theme: FormUiTheme;
-  InputUiVariant: InputUiVariant;
+  inputVariant: InputUiVariant;
   min: number;
   max: number;
   step: number;
@@ -23,6 +24,8 @@ interface InputTextAsNumberWithLabelStoryArgs {
   useRightSlot: boolean;
   leftSlotContent: string;
   rightSlotContent: string;
+  stepDownText: string;
+  stepUpText: string;
 }
 
 export default {
@@ -123,7 +126,7 @@ export default {
         category: "Styling",
       },
     },
-    InputUiVariant: {
+    inputVariant: {
       control: { type: "select" },
       options: ["normal", "outlined", "underlined"],
       description: "Input variant style",
@@ -182,6 +185,22 @@ export default {
         category: "Slots",
       },
     },
+
+    // Localisation
+    stepDownText: {
+      control: "text",
+      description: "Accessible name for the decrement button",
+      table: {
+        category: "Localisation",
+      },
+    },
+    stepUpText: {
+      control: "text",
+      description: "Accessible name for the increment button",
+      table: {
+        category: "Localisation",
+      },
+    },
   },
   args: {
     modelValue: undefined,
@@ -204,37 +223,37 @@ export default {
     useRightSlot: true,
     leftSlotContent: "−",
     rightSlotContent: "+",
+    stepDownText: "Step down",
+    stepUpText: "Step up",
   },
 } 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<InputTextAsNumberWithLabelStoryArgs> = (args) => ({
   components: { StorybookComponent },
   setup() {
-    const { modelValue, ...otherArgs } = args;
-    const numberValue = ref(modelValue);
+    const componentArgs = computed(() => {
+      const { useDescriptionSlot, descriptionContent, useLeftSlot, useRightSlot, leftSlotContent, rightSlotContent, ...rest } =
+        args;
+      return rest;
+    });
 
-    return {
-      numberValue,
-      args: otherArgs,
-      descriptionContent: args.descriptionContent,
-      useDescriptionSlot: args.useDescriptionSlot,
-      leftSlotContent: args.leftSlotContent,
-      rightSlotContent: args.rightSlotContent,
-      useLeftSlot: args.useLeftSlot,
-      useRightSlot: args.useRightSlot,
-    };
+    return { args, componentArgs };
   },
   template: `
     <StorybookComponent
-      v-model="numberValue"
-      v-bind="args"
+      v-model="args.modelValue"
+      v-bind="componentArgs"
     >
-      <template v-if="useDescriptionSlot" #description>{{ descriptionContent }}</template>
-      <template v-if="useLeftSlot" #left>{{ leftSlotContent }}</template>
-      <template v-if="useRightSlot" #right>{{ rightSlotContent }}</template>
+      <template v-if="args.useDescriptionSlot" #description>{{ args.descriptionContent }}</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: {{ numberValue ?? 'undefined' }}
+      Current value: {{ args.modelValue ?? 'undefined' }}
     </div>
   `,
 });
@@ -331,7 +350,7 @@ Required.args = {
 export const Outlined = Template.bind({});
 Outlined.args = {
   modelValue: 42,
-  InputUiVariant: "outlined",
+  inputVariant: "outlined",
   label: "Temperature (°C)",
   placeholder: "Enter temperature",
   min: -50,
@@ -344,7 +363,7 @@ Outlined.args = {
 export const Underlined = Template.bind({});
 Underlined.args = {
   modelValue: 10,
-  InputUiVariant: "underlined",
+  inputVariant: "underlined",
   label: "Items Count",
   placeholder: "Number of items",
   min: 0,

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]);
+  });
+});