srcdev-nuxt-components 9.5.3 → 9.5.4

package/app/components/05.forms/input-otp/stories/InputOtpField.stories.ts

@@ -0,0 +1,163 @@
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputOtpField from "../InputOtpField.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
+import type { MediaCanvas } from "~/types/components";
+
+interface StoryArgs {
+  modelValue: string;
+  name: string;
+  label: string;
+  length: number;
+  autofocus: boolean;
+  required: boolean;
+  digitLabel: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  theme: FormUiTheme;
+  inputVariant: InputUiVariant;
+  descriptionText: string;
+}
+
+const meta: Meta<StoryArgs> = {
+  title: "Components/Forms/Input Otp/InputOtpField",
+  component: InputOtpField,
+  argTypes: {
+    modelValue: { control: "text", table: { category: "Model" } },
+    name: { control: "text", table: { category: "Basic" } },
+    label: { control: "text", table: { category: "Basic" } },
+    length: { control: { type: "number", min: 1, max: 12 }, table: { category: "Basic" } },
+    autofocus: { control: "boolean", description: "Focus the first box on mount (applies on remount)", table: { category: "Basic" } },
+    required: { control: "boolean", table: { category: "Validation" } },
+    errorMessage: { control: "text", table: { category: "Validation" } },
+    fieldHasError: { control: "boolean", table: { category: "Validation" } },
+    digitLabel: { control: "text", description: "Per-box label; {index} and {length} are replaced", table: { category: "Accessibility" } },
+    descriptionText: { control: "text", description: "Fills the descriptionText slot", table: { category: "Slots" } },
+    theme: {
+      control: { type: "select" },
+      options: ["default", "success", "error", "warning"],
+      table: { category: "Styling" },
+    },
+    inputVariant: {
+      control: { type: "select" },
+      options: ["normal", "underlined"],
+      table: { category: "Styling" },
+    },
+  },
+  args: {
+    modelValue: "",
+    name: "code",
+    label: "Verification code",
+    length: 6,
+    autofocus: false,
+    required: false,
+    digitLabel: "Digit {index} of {length}",
+    errorMessage: "",
+    fieldHasError: false,
+    theme: "default",
+    inputVariant: "normal",
+    descriptionText: "Enter the 6-digit code we sent to your email.",
+  },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Labelled one-time-code field: a fieldset legend, optional description, the `InputOtp` boxes and an error strip. Try typing, Backspace, the arrow keys, Home/End, Enter (submits the form) and pasting a code.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const render = (args: StoryArgs) => ({
+  components: { InputOtpField },
+  setup() {
+    const componentArgs = computed(() => {
+      const { modelValue: _modelValue, descriptionText: _descriptionText, ...rest } = args;
+      return rest;
+    });
+    const submitted = ref("");
+    const lastComplete = ref("");
+    return { args, componentArgs, submitted, lastComplete };
+  },
+  template: `
+    <form @submit.prevent="submitted = args.modelValue">
+      <InputOtpField v-model="args.modelValue" v-bind="componentArgs" @complete="lastComplete = $event">
+        <template v-if="args.descriptionText" #descriptionText>{{ args.descriptionText }}</template>
+      </InputOtpField>
+      <p style="margin-block-start: 1.6rem; overflow-wrap: anywhere;">
+        Model: "{{ args.modelValue }}" · last complete: "{{ lastComplete }}" · submitted: "{{ submitted }}"
+      </p>
+    </form>
+  `,
+});
+
+export const Default: Story = { render };
+
+export const WithError: Story = {
+  args: { modelValue: "482", fieldHasError: true, errorMessage: "That code is incorrect or has expired." },
+  render,
+};
+
+export const LocalisedLabels: Story = {
+  args: {
+    label: "Code de vérification",
+    digitLabel: "Chiffre {index} sur {length}",
+    descriptionText: "Saisissez le code à 6 chiffres envoyé par e-mail.",
+  },
+  render,
+};
+
+export const Underlined: Story = { args: { inputVariant: "underlined" }, render };
+
+export const NarrowContainer: Story = {
+  args: { length: 8 },
+  render,
+  parameters: { initialCanvas: "mobileCanvas" },
+};
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    length: 99,
+    modelValue: "0a9<b>1234567890123456789",
+    label:
+      "🔐 Bestätigungscodeeingabefeldbeschriftungmitsehrlangemunumgebrochenemwort https://example.com/a/very/long/unbroken/url/that/should/wrap/somewhere <script>alert(1)</script>",
+    descriptionText:
+      "رمز التحقق Wir haben Ihnen einen Bestätigungscode an Ihre hinterlegte E-Mail-Adresse geschickt; geben Sie ihn innerhalb von zehn Minuten ein. <b>not bold</b>",
+    digitLabel: "Ziffer {index} von {length} 🔢",
+    fieldHasError: true,
+    errorMessage: "Dieser BestätigungscodeistleiderabgelaufenodernichtkorrektbitteversuchenSieeserneut",
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "Length 99 (clamped to 12), a model value with letters and markup (non-digits show as empty boxes, overflow is ignored), long unbroken German/URL/emoji/RTL/HTML-like copy. Check at every canvas width: the 12 boxes shrink to fit rather than overflow, the legend, description and error wrap, and the markup renders as text. Also set Length to 0 and 1.",
+      },
+    },
+  },
+};

package/app/components/05.forms/input-otp/tests/InputOtp.spec.ts

@@ -0,0 +1,275 @@
+import { describe, it, expect, vi } from "vitest";
+import { nextTick } from "vue";
+import type { VueWrapper } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ComponentUnderTest from "../InputOtp.vue";
+
+const wrapperFactory = async (props: Record<string, unknown> = {}) => {
+  const state = { value: (props.modelValue as string) ?? "" };
+  const wrapper = await mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: {
+      id: "code",
+      modelValue: state.value,
+      "onUpdate:modelValue": (value: string) => {
+        state.value = value;
+        wrapper.setProps({ modelValue: value });
+      },
+      ...props,
+    },
+  });
+  return { wrapper, state };
+};
+
+const boxes = (wrapper: VueWrapper) => wrapper.findAll<HTMLInputElement>(".input-otp-box");
+
+const typeInto = async (wrapper: VueWrapper, index: number, value: string) => {
+  const box = boxes(wrapper)[index]!;
+  box.element.value = value;
+  await box.trigger("input");
+  await nextTick();
+};
+
+const paste = async (wrapper: VueWrapper, index: number, text: string) => {
+  const event = new Event("paste", { bubbles: true, cancelable: true }) as ClipboardEvent;
+  Object.defineProperty(event, "clipboardData", { value: { getData: () => text } });
+  boxes(wrapper)[index]!.element.dispatchEvent(event);
+  await nextTick();
+};
+
+describe("InputOtp", () => {
+  it("mounts without error", async () => {
+    const { wrapper } = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders one box per length, defaulting to six", async () => {
+    const { wrapper } = await wrapperFactory();
+    expect(boxes(wrapper)).toHaveLength(6);
+
+    await wrapper.setProps({ length: 4 });
+    expect(boxes(wrapper)).toHaveLength(4);
+  });
+
+  it("clamps length between 1 and 12", async () => {
+    const { wrapper } = await wrapperFactory({ length: 99 });
+    expect(boxes(wrapper)).toHaveLength(12);
+
+    await wrapper.setProps({ length: 0 });
+    expect(boxes(wrapper)).toHaveLength(1);
+
+    await wrapper.setProps({ length: -3 });
+    expect(boxes(wrapper)).toHaveLength(1);
+  });
+
+  it("uses text inputs with a numeric keypad", async () => {
+    const { wrapper } = await wrapperFactory();
+    const box = boxes(wrapper)[0]!;
+    expect(box.attributes("type")).toBe("text");
+    expect(box.attributes("inputmode")).toBe("numeric");
+  });
+
+  it("rejects non-digit input", async () => {
+    const { wrapper, state } = await wrapperFactory();
+    await typeInto(wrapper, 0, "a");
+    expect(state.value).toBe("");
+    expect(boxes(wrapper)[0]!.element.value).toBe("");
+  });
+
+  it("advances focus to the next box after a digit", async () => {
+    const { wrapper, state } = await wrapperFactory();
+    await typeInto(wrapper, 0, "4");
+    expect(state.value).toBe("4");
+    expect(document.activeElement).toBe(boxes(wrapper)[1]!.element);
+  });
+
+  it("keeps a leading zero", async () => {
+    const { wrapper, state } = await wrapperFactory();
+    await typeInto(wrapper, 0, "0");
+    await typeInto(wrapper, 1, "1");
+    expect(state.value).toBe("01");
+
+    await paste(wrapper, 0, "012345");
+    expect(state.value).toBe("012345");
+    expect(boxes(wrapper)[0]!.element.value).toBe("0");
+  });
+
+  it("replaces a digit when typing into a filled box", async () => {
+    const { wrapper, state } = await wrapperFactory({ modelValue: "123" });
+    await typeInto(wrapper, 1, "29");
+    expect(state.value).toBe("193");
+
+    await typeInto(wrapper, 0, "71");
+    expect(state.value).toBe("793");
+  });
+
+  it("Backspace in an empty box clears the previous box and moves back", async () => {
+    const { wrapper, state } = await wrapperFactory({ modelValue: "12" });
+    await boxes(wrapper)[2]!.trigger("keydown", { key: "Backspace" });
+    await nextTick();
+    expect(state.value).toBe("1");
+    expect(document.activeElement).toBe(boxes(wrapper)[1]!.element);
+  });
+
+  it("Backspace in a filled box only clears that box", async () => {
+    const { wrapper, state } = await wrapperFactory({ modelValue: "12" });
+    boxes(wrapper)[1]!.element.focus();
+    await boxes(wrapper)[1]!.trigger("keydown", { key: "Backspace" });
+    await typeInto(wrapper, 1, "");
+    expect(state.value).toBe("1");
+    expect(document.activeElement).toBe(boxes(wrapper)[1]!.element);
+  });
+
+  it("paste spreads digits, strips non-digits and truncates to length", async () => {
+    const { wrapper, state } = await wrapperFactory();
+    await paste(wrapper, 0, "12-34 56789");
+    expect(state.value).toBe("123456");
+    expect(document.activeElement).toBe(boxes(wrapper)[5]!.element);
+  });
+
+  it("a partial paste fills from the focused box", async () => {
+    const { wrapper, state } = await wrapperFactory({ modelValue: "12" });
+    await paste(wrapper, 2, "34");
+    expect(state.value).toBe("1234");
+    expect(document.activeElement).toBe(boxes(wrapper)[3]!.element);
+  });
+
+  it("a paste with no digits changes nothing", async () => {
+    const { wrapper, state } = await wrapperFactory({ modelValue: "12" });
+    await paste(wrapper, 0, "abc");
+    expect(state.value).toBe("12");
+  });
+
+  it("spreads a multi-digit autofill in one box across the boxes", async () => {
+    const { wrapper, state } = await wrapperFactory();
+    expect(boxes(wrapper)[0]!.attributes("autocomplete")).toBe("one-time-code");
+    expect(boxes(wrapper)[1]!.attributes("autocomplete")).toBe("off");
+
+    await typeInto(wrapper, 0, "654321");
+    expect(state.value).toBe("654321");
+    expect(boxes(wrapper)[0]!.element.value).toBe("6");
+  });
+
+  it("Enter submits the parent form", async () => {
+    const form = document.createElement("form");
+    document.body.appendChild(form);
+    const requestSubmit = vi.spyOn(form, "requestSubmit").mockImplementation(() => {});
+
+    const wrapper = await mountSuspended(ComponentUnderTest, {
+      attachTo: form,
+      props: { id: "code", modelValue: "" },
+    });
+    await wrapper.findAll(".input-otp-box")[0]!.trigger("keydown", { key: "Enter" });
+    expect(requestSubmit).toHaveBeenCalledOnce();
+    form.remove();
+  });
+
+  it("arrow keys, Home and End move between boxes", async () => {
+    const { wrapper } = await wrapperFactory();
+    const [first, second] = boxes(wrapper);
+
+    await first!.trigger("keydown", { key: "ArrowRight" });
+    expect(document.activeElement).toBe(second!.element);
+
+    await second!.trigger("keydown", { key: "ArrowLeft" });
+    expect(document.activeElement).toBe(first!.element);
+
+    await first!.trigger("keydown", { key: "End" });
+    expect(document.activeElement).toBe(boxes(wrapper)[5]!.element);
+
+    await boxes(wrapper)[5]!.trigger("keydown", { key: "Home" });
+    expect(document.activeElement).toBe(first!.element);
+  });
+
+  it("selects the digit on focus so typing replaces it", async () => {
+    const { wrapper } = await wrapperFactory({ modelValue: "5" });
+    const box = boxes(wrapper)[0]!.element;
+    const select = vi.spyOn(box, "select");
+    box.focus();
+    expect(select).toHaveBeenCalled();
+  });
+
+  it("does not take focus on mount by default", async () => {
+    const { wrapper } = await wrapperFactory();
+    await nextTick();
+    expect(document.activeElement).not.toBe(boxes(wrapper)[0]!.element);
+  });
+
+  it("focuses the first box on mount when autofocus is set", async () => {
+    const { wrapper } = await wrapperFactory({ autofocus: true });
+    await nextTick();
+    expect(document.activeElement).toBe(boxes(wrapper)[0]!.element);
+  });
+
+  it("focuses the first box when an error appears", async () => {
+    const { wrapper } = await wrapperFactory();
+    await wrapper.setProps({ fieldHasError: true });
+    await nextTick();
+    expect(document.activeElement).toBe(boxes(wrapper)[0]!.element);
+  });
+
+  it("emits complete once every box is filled", async () => {
+    const { wrapper } = await wrapperFactory({ length: 3, modelValue: "12" });
+    expect(wrapper.emitted("complete")).toBeUndefined();
+
+    await typeInto(wrapper, 2, "3");
+    expect(wrapper.emitted("complete")).toEqual([["123"]]);
+  });
+
+  it("labels each box from digitLabel", async () => {
+    const { wrapper } = await wrapperFactory({ length: 4, digitLabel: "Ziffer {index} von {length}" });
+    const labels = wrapper.findAll("label");
+    expect(labels[0]!.text()).toBe("Ziffer 1 von 4");
+    expect(labels[0]!.attributes("for")).toBe("code-0");
+    expect(labels[3]!.text()).toBe("Ziffer 4 von 4");
+  });
+
+  it("exposes a named group only when groupLabel is set", async () => {
+    const { wrapper } = await wrapperFactory();
+    expect(wrapper.find(".input-otp").attributes("role")).toBeUndefined();
+
+    await wrapper.setProps({ groupLabel: "Verification code" });
+    expect(wrapper.find(".input-otp").attributes("role")).toBe("group");
+    expect(wrapper.find(".input-otp").attributes("aria-label")).toBe("Verification code");
+  });
+
+  it("marks every box invalid and described when there is an error", async () => {
+    const { wrapper } = await wrapperFactory({ fieldHasError: true, ariaDescribedby: "code-error" });
+    expect(wrapper.find(".input-otp").attributes("data-invalid")).toBe("");
+    boxes(wrapper).forEach((box) => {
+      expect(box.attributes("aria-invalid")).toBe("true");
+      expect(box.attributes("aria-describedby")).toBe("code-error");
+    });
+  });
+
+  it("holds the full code in a hidden input when name is set", async () => {
+    const { wrapper } = await wrapperFactory({ modelValue: "0123" });
+    expect(wrapper.find('input[type="hidden"]').exists()).toBe(false);
+
+    await wrapper.setProps({ name: "code" });
+    const hidden = wrapper.find<HTMLInputElement>('input[type="hidden"]');
+    expect(hidden.attributes("name")).toBe("code");
+    expect(hidden.element.value).toBe("0123");
+  });
+
+  it("ignores non-digits and overflow in the model value", async () => {
+    const { wrapper } = await wrapperFactory({ length: 3, modelValue: "1a34567" });
+    expect(boxes(wrapper).map((box) => box.element.value)).toEqual(["1", "", "3"]);
+  });
+
+  it("sets native required on every box when required", async () => {
+    const { wrapper } = await wrapperFactory({ required: true, length: 2 });
+    boxes(wrapper).forEach((box) => expect(box.attributes("required")).toBeDefined());
+  });
+
+  it("applies theme, variant and passthrough classes", async () => {
+    const { wrapper } = await wrapperFactory({
+      theme: "success",
+      inputVariant: "underlined",
+      styleClassPassthrough: ["extra"],
+    });
+    const root = wrapper.find(".input-otp");
+    expect(root.attributes("data-theme")).toBe("success");
+    expect(root.classes()).toEqual(expect.arrayContaining(["underlined", "extra"]));
+  });
+});

package/app/components/05.forms/input-otp/tests/InputOtpField.spec.ts

@@ -0,0 +1,76 @@
+import { describe, it, expect } from "vitest";
+import { nextTick } from "vue";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ComponentUnderTest from "../InputOtpField.vue";
+
+const wrapperFactory = (props: Record<string, unknown> = {}, slots = {}) =>
+  mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: { name: "code", label: "Verification code", modelValue: "", ...props },
+    slots,
+  });
+
+describe("InputOtpField", () => {
+  it("mounts without error", async () => {
+    const wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("names the group with the label as a fieldset legend", async () => {
+    const wrapper = await wrapperFactory();
+    expect(wrapper.find("fieldset.input-otp-field").exists()).toBe(true);
+    expect(wrapper.find("legend").text()).toBe("Verification code");
+  });
+
+  it("renders the boxes and a hidden input carrying the code", async () => {
+    const wrapper = await wrapperFactory({ length: 4, modelValue: "0042" });
+    expect(wrapper.findAll(".input-otp-box")).toHaveLength(4);
+    const hidden = wrapper.find<HTMLInputElement>('input[type="hidden"]');
+    expect(hidden.attributes("name")).toBe("code");
+    expect(hidden.element.value).toBe("0042");
+  });
+
+  it("links the error message to every box when there is an error", async () => {
+    const wrapper = await wrapperFactory({ fieldHasError: true, errorMessage: "That code has expired" });
+    expect(wrapper.text()).toContain("That code has expired");
+    expect(wrapper.find("fieldset").attributes("data-invalid")).toBe("");
+
+    const errorId = wrapper.find(".input-error-message").attributes("id");
+    wrapper.findAll(".input-otp-box").forEach((box) => {
+      expect(box.attributes("aria-describedby")).toBe(errorId);
+      expect(box.attributes("aria-invalid")).toBe("true");
+    });
+  });
+
+  it("links the description when a description slot is used", async () => {
+    const wrapper = await wrapperFactory({}, { descriptionText: "We sent it to your email" });
+    expect(wrapper.text()).toContain("We sent it to your email");
+    const describedBy = wrapper.find(".input-otp-box").attributes("aria-describedby");
+    expect(describedBy).toMatch(/-description$/);
+  });
+
+  it("forwards digitLabel to the box labels", async () => {
+    const wrapper = await wrapperFactory({ length: 2, digitLabel: "Chiffre {index} sur {length}" });
+    expect(wrapper.findAll("label")[0]!.text()).toBe("Chiffre 1 sur 2");
+  });
+
+  it("re-emits complete from the control", async () => {
+    const wrapper = await wrapperFactory({ length: 2, modelValue: "1" });
+    const box = wrapper.findAll<HTMLInputElement>(".input-otp-box")[1]!;
+    box.element.value = "2";
+    await box.trigger("input");
+    await nextTick();
+    expect(wrapper.emitted("complete")).toEqual([["12"]]);
+  });
+
+  it("focuses the first box on mount when autofocus is set", async () => {
+    const wrapper = await wrapperFactory({ autofocus: true });
+    await nextTick();
+    expect(document.activeElement).toBe(wrapper.find(".input-otp-box").element);
+  });
+
+  it("applies passthrough classes to the fieldset", async () => {
+    const wrapper = await wrapperFactory({ styleClassPassthrough: ["extra"] });
+    expect(wrapper.find("fieldset").classes()).toContain("extra");
+  });
+});