srcdev-nuxt-components 9.6.8 → 9.6.10

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

@@ -1,267 +0,0 @@
-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" | "date";
-  maxlength: number;
-  min: string | number;
-  max: string | number;
-  name: string;
-  placeholder: string;
-  label: string;
-  errorMessage: string;
-  fieldHasError: boolean;
-  required: boolean;
-  theme: FormUiTheme;
-  inputVariant: InputUiVariant;
-  styleClassPassthrough: string[];
-  leftSlotContent: string;
-  rightSlotContent: string;
-  useLeftSlot: boolean;
-  useRightSlot: boolean;
-}
-
-export default {
-  title: "Components/Forms/Input Text/InputTextCore",
-  component: StorybookComponent,
-  argTypes: {
-    // Model
-    modelValue: {
-      control: "text",
-      description: "The input value",
-      table: {
-        category: "Model",
-      },
-    },
-
-    // Basic Configuration
-    type: {
-      control: { type: "select" },
-      options: ["text", "email", "password", "tel", "url", "search", "date"],
-      description: "Input type",
-      table: {
-        category: "Basic",
-      },
-    },
-    maxlength: {
-      control: { type: "number", min: 1, max: 1000 },
-      description: "Maximum length of input",
-      table: {
-        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",
-      table: {
-        category: "Basic",
-      },
-    },
-    placeholder: {
-      control: "text",
-      description: "Placeholder text",
-      table: {
-        category: "Basic",
-      },
-    },
-    label: {
-      control: "text",
-      description: "Input label",
-      table: {
-        category: "Basic",
-      },
-    },
-
-    // Validation
-    errorMessage: {
-      control: "text",
-      description: "Error message to display",
-      table: {
-        category: "Validation",
-      },
-    },
-    fieldHasError: {
-      control: "boolean",
-      description: "Whether field has validation error",
-      table: {
-        category: "Validation",
-      },
-    },
-    required: {
-      control: "boolean",
-      description: "Whether field is required",
-      table: {
-        category: "Validation",
-      },
-    },
-
-    // Styling
-    theme: {
-      control: { type: "select" },
-      options: ["primary", "secondary", "tertiary", "ghost", "error", "success", "warning"],
-      description: "Theme for styling",
-      table: {
-        category: "Styling",
-      },
-    },
-    inputVariant: {
-      control: { type: "select" },
-      options: ["normal", "outlined", "underlined"],
-      description: "Input variant style",
-      table: {
-        category: "Styling",
-      },
-    },
-    styleClassPassthrough: {
-      control: "object",
-      description: "Additional CSS classes",
-      table: {
-        category: "Styling",
-      },
-    },
-
-    // Slots
-    useLeftSlot: {
-      control: "boolean",
-      description: "Use left slot",
-      table: {
-        category: "Slots",
-      },
-    },
-    useRightSlot: {
-      control: "boolean",
-      description: "Use right slot",
-      table: {
-        category: "Slots",
-      },
-    },
-    leftSlotContent: {
-      control: "text",
-      description: "Content for left slot",
-      table: {
-        category: "Slots",
-      },
-    },
-    rightSlotContent: {
-      control: "text",
-      description: "Content for right slot",
-      table: {
-        category: "Slots",
-      },
-    },
-  },
-  args: {
-    modelValue: "",
-    type: "text",
-    maxlength: 255,
-    name: "example-input",
-    placeholder: "Enter text...",
-    label: "Example Label",
-    errorMessage: "",
-    fieldHasError: false,
-    required: false,
-    theme: "default",
-    inputVariant: "normal",
-    styleClassPassthrough: [],
-    useLeftSlot: false,
-    useRightSlot: false,
-    leftSlotContent: "L",
-    rightSlotContent: "R",
-  },
-} 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 componentArgs = computed(() => {
-      const { useLeftSlot, useRightSlot, leftSlotContent, rightSlotContent, ...rest } = args;
-      return rest;
-    });
-
-    return { args, componentArgs };
-  },
-  template: `
-    <StorybookComponent
-      v-model="args.modelValue"
-      v-bind="componentArgs"
-    >
-      <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: {{ args.modelValue }}
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {};
-
-export const WithPlaceholder = Template.bind({});
-WithPlaceholder.args = {
-  placeholder: "Type something here...",
-};
-
-export const Required = Template.bind({});
-Required.args = {
-  required: true,
-  label: "Required Field",
-};
-
-export const WithError = Template.bind({});
-WithError.args = {
-  fieldHasError: true,
-  errorMessage: "This field is required",
-  theme: "error",
-};
-
-export const WithSlots = Template.bind({});
-WithSlots.args = {
-  useLeftSlot: true,
-  useRightSlot: true,
-  leftSlotContent: "📧",
-  rightSlotContent: "🔍",
-};
-
-export const Outlined = Template.bind({});
-Outlined.args = {
-  inputVariant: "outlined",
-  placeholder: "Outlined input",
-};
-
-export const Underlined = Template.bind({});
-Underlined.args = {
-  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,319 +0,0 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { computed } from "vue";
-import StorybookComponent from "../InputTextWithLabel.vue";
-import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
-
-interface InputTextWithLabelStoryArgs {
-  modelValue: string;
-  type: "text" | "email" | "password" | "tel" | "url" | "search" | "date";
-  maxlength: number;
-  min: string | number;
-  max: string | number;
-  name: string;
-  placeholder: string;
-  label: string;
-  errorMessage: string;
-  fieldHasError: boolean;
-  required: boolean;
-  theme: FormUiTheme;
-  inputVariant: InputUiVariant;
-  styleClassPassthrough: string[];
-  useDescriptionSlot: boolean;
-  useDescriptionHtmlSlot: boolean;
-  descriptionContent: string;
-  descriptionHtmlContent: string;
-}
-
-export default {
-  title: "Components/Forms/Input Text/InputTextWithLabel",
-  component: StorybookComponent,
-  argTypes: {
-    // Model
-    modelValue: {
-      control: "text",
-      description: "The input value",
-      table: {
-        category: "Model",
-      },
-    },
-
-    // Basic Configuration
-    type: {
-      control: { type: "select" },
-      options: ["text", "email", "password", "tel", "url", "search", "date"],
-      description: "Input type",
-      table: {
-        category: "Basic",
-      },
-    },
-    maxlength: {
-      control: { type: "number", min: 1, max: 1000 },
-      description: "Maximum length of input",
-      table: {
-        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",
-      table: {
-        category: "Basic",
-      },
-    },
-    placeholder: {
-      control: "text",
-      description: "Placeholder text",
-      table: {
-        category: "Basic",
-      },
-    },
-    label: {
-      control: "text",
-      description: "Input label",
-      table: {
-        category: "Basic",
-      },
-    },
-
-    // Validation
-    errorMessage: {
-      control: "text",
-      description: "Error message to display",
-      table: {
-        category: "Validation",
-      },
-    },
-    fieldHasError: {
-      control: "boolean",
-      description: "Whether field has validation error",
-      table: {
-        category: "Validation",
-      },
-    },
-    required: {
-      control: "boolean",
-      description: "Whether field is required",
-      table: {
-        category: "Validation",
-      },
-    },
-
-    // Styling
-    theme: {
-      control: { type: "select" },
-      options: ["primary", "secondary", "tertiary", "ghost", "error", "success", "warning"],
-      description: "Theme for styling",
-      table: {
-        category: "Styling",
-      },
-    },
-    inputVariant: {
-      control: { type: "select" },
-      options: ["normal", "outlined", "underlined"],
-      description: "Input variant style",
-      table: {
-        category: "Styling",
-      },
-    },
-    styleClassPassthrough: {
-      control: "object",
-      description: "Additional CSS classes",
-      table: {
-        category: "Styling",
-      },
-    },
-
-    // Slots
-    useDescriptionSlot: {
-      control: "boolean",
-      description: "Use description slot",
-      table: {
-        category: "Slots",
-      },
-    },
-    useDescriptionHtmlSlot: {
-      control: "boolean",
-      description: "Use description HTML slot",
-      table: {
-        category: "Slots",
-      },
-    },
-    descriptionContent: {
-      control: "text",
-      description: "Content for description slot",
-      table: {
-        category: "Slots",
-      },
-    },
-    descriptionHtmlContent: {
-      control: "text",
-      description: "HTML content for description slot",
-      table: {
-        category: "Slots",
-      },
-    },
-  },
-  args: {
-    modelValue: "",
-    type: "text",
-    maxlength: 255,
-    name: "example-input",
-    placeholder: "Enter your text...",
-    label: "Text Input",
-    errorMessage: "",
-    fieldHasError: false,
-    required: false,
-    theme: "default",
-    inputVariant: "normal",
-    styleClassPassthrough: [],
-    useDescriptionSlot: false,
-    useDescriptionHtmlSlot: false,
-    descriptionContent: "This is a helpful description",
-    descriptionHtmlContent: "<strong>Bold</strong> HTML description",
-  },
-} 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 componentArgs = computed(() => {
-      const { useDescriptionSlot, useDescriptionHtmlSlot, descriptionContent, descriptionHtmlContent, ...rest } = args;
-      return rest;
-    });
-
-    return { args, componentArgs };
-  },
-  template: `
-    <StorybookComponent
-      v-model="args.modelValue"
-      v-bind="componentArgs"
-    >
-      <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: {{ args.modelValue }}
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {};
-
-export const WithDescription = Template.bind({});
-WithDescription.args = {
-  useDescriptionSlot: true,
-  label: "Email Address",
-  placeholder: "Enter your email address",
-  type: "email",
-};
-
-export const WithHtmlDescription = Template.bind({});
-WithHtmlDescription.args = {
-  useDescriptionHtmlSlot: true,
-  label: "Password",
-  placeholder: "Enter a strong password",
-  type: "password",
-  descriptionHtmlContent:
-    "Password must contain at least <strong>8 characters</strong> and include <em>uppercase</em>, <em>lowercase</em>, and <em>numbers</em>",
-};
-
-export const Required = Template.bind({});
-Required.args = {
-  required: true,
-  label: "Full Name",
-  placeholder: "Enter your full name",
-  useDescriptionSlot: true,
-  descriptionContent: "This field is required",
-};
-
-export const WithError = Template.bind({});
-WithError.args = {
-  fieldHasError: true,
-  errorMessage: "Please enter a valid email address",
-  theme: "error",
-  label: "Email Address",
-  placeholder: "Enter your email",
-  type: "email",
-  modelValue: "invalid-email",
-};
-
-export const Outlined = Template.bind({});
-Outlined.args = {
-  inputVariant: "outlined",
-  label: "Phone Number",
-  placeholder: "Enter your phone number",
-  type: "tel",
-};
-
-export const Underlined = Template.bind({});
-Underlined.args = {
-  inputVariant: "underlined",
-  label: "Website URL",
-  placeholder: "https://example.com",
-  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 = {};
-AllThemes.render = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    const themes: FormUiTheme[] = ["default", "success", "error", "warning"];
-    const inputValues = reactive(
-      themes.reduce(
-        (acc, theme) => ({
-          ...acc,
-          [theme]: "",
-        }),
-        {} as Record<string, string>
-      )
-    );
-
-    return {
-      themes,
-      inputValues,
-      args,
-    };
-  },
-  template: `
-    <div class="space-y-6">
-      <div v-for="theme in themes" :key="theme" class="space-y-2">
-        <h3 class="text-lg font-semibold capitalize">{{ theme }} Theme</h3>
-        <StorybookComponent
-          v-model="inputValues[theme]"
-          v-bind="{ ...args, theme, label: theme + ' Input', name: theme + '-input' }"
-        />
-      </div>
-    </div>
-  `,
-});

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

@@ -1,75 +0,0 @@
-// 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 "../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]);
-  });
-
-  it("forwards the input-text-as-number marker class down to InputTextCore's own input", async () => {
-    // Regression test: the marker classes toggled via updateElementClasses() must reach the
-    // inner <input> (not just the outer wrapper), or the scoped .input-text-core.input-text-as-number
-    // CSS (compact fit-content width, centered text) silently never matches.
-    wrapper = await wrapperFactory();
-    expect(wrapper.find("input").classes()).toContain("input-text-as-number");
-  });
-
-  it("still forwards a consumer-supplied styleClassPassthrough down to the input", async () => {
-    wrapper = await wrapperFactory({ styleClassPassthrough: ["custom-number-class"] });
-    expect(wrapper.find("input").classes()).toContain("custom-number-class");
-    expect(wrapper.find("input").classes()).toContain("input-text-as-number");
-  });
-});