srcdev-nuxt-components 9.6.7 → 9.6.9

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

@@ -0,0 +1,182 @@
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputTextAsNumberField from "../InputTextAsNumberField.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: number | undefined;
+  name: string;
+  label: string;
+  min: number;
+  max: number;
+  step: number;
+  placeholder: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  theme: FormUiTheme;
+  inputVariant: InputUiVariant;
+  styleClassPassthrough: string[];
+  stepDownText: string;
+  stepUpText: string;
+  useStepButtons: boolean;
+  descriptionText: string;
+}
+
+const meta: Meta<StoryArgs> = {
+  title: "Components/Forms/Input Text/InputTextAsNumberField",
+  component: InputTextAsNumberField,
+  argTypes: {
+    modelValue: { control: "number", table: { category: "Model" } },
+    name: { control: "text", table: { category: "Basic" } },
+    label: { control: "text", table: { category: "Basic" } },
+    min: { control: "number", table: { category: "Basic" } },
+    max: { control: "number", table: { category: "Basic" } },
+    step: { control: "number", table: { category: "Basic" } },
+    placeholder: { control: "text", table: { category: "Basic" } },
+    errorMessage: { control: "text", table: { category: "Validation" } },
+    fieldHasError: { control: "boolean", table: { category: "Validation" } },
+    required: { control: "boolean", table: { category: "Validation" } },
+    theme: {
+      control: { type: "select" },
+      options: ["default", "success", "error", "warning"],
+      table: { category: "Styling" },
+    },
+    inputVariant: {
+      control: { type: "select" },
+      options: ["normal", "outlined", "underlined"],
+      table: { category: "Styling" },
+    },
+    styleClassPassthrough: { control: "object", table: { category: "Styling" } },
+    stepDownText: { control: "text", description: "Step-down button's accessible name", table: { category: "Accessibility" } },
+    stepUpText: { control: "text", description: "Step-up button's accessible name", table: { category: "Accessibility" } },
+    useStepButtons: {
+      control: "boolean",
+      description: "Story-only: render the step buttons by filling the left/right slots",
+      table: { category: "Slots" },
+    },
+    descriptionText: { control: "text", description: "Story-only: fills the descriptionText slot", table: { category: "Slots" } },
+  },
+  args: {
+    modelValue: 1,
+    name: "quantity",
+    label: "Quantity",
+    min: 0,
+    max: 10,
+    step: 1,
+    placeholder: "",
+    errorMessage: "",
+    fieldHasError: false,
+    required: false,
+    theme: "default",
+    inputVariant: "normal",
+    styleClassPassthrough: [],
+    stepDownText: "Step down",
+    stepUpText: "Step up",
+    useStepButtons: true,
+    descriptionText: "",
+  },
+  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:
+          "A number field built on a text input (`InputText`), for a compact stepper without the native number spinner. `v-model` is a number, or `undefined` when empty. Filling the `left`/`right` slots adds step buttons that step by `step`, round away floating-point drift, clamp to `min`/`max` and start from 0, clamped, when empty. Typing is digits-only for whole, non-negative ranges; a fractional `step` switches to a decimal keypad, and a negative `min` to a text keyboard so a minus sign can be typed.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const render = (args: StoryArgs) => ({
+  components: { InputTextAsNumberField },
+  setup() {
+    const componentArgs = computed(() => {
+      const { modelValue: _modelValue, useStepButtons: _useStepButtons, descriptionText: _descriptionText, ...rest } = args;
+      return rest;
+    });
+    return { args, componentArgs };
+  },
+  template: `
+    <InputTextAsNumberField v-model="args.modelValue" v-bind="componentArgs">
+      <template v-if="args.descriptionText" #descriptionText>{{ args.descriptionText }}</template>
+      <template v-if="args.useStepButtons" #left><Icon name="mdi:minus" /></template>
+      <template v-if="args.useStepButtons" #right><Icon name="mdi:plus" /></template>
+    </InputTextAsNumberField>
+    <p style="margin-block-start: 1.6rem; font-family: monospace;">modelValue: {{ JSON.stringify(args.modelValue) }}</p>
+  `,
+});
+
+export const Default: Story = { render };
+
+export const WithoutStepButtons: Story = { args: { useStepButtons: false }, render };
+
+export const DecimalSteps: Story = {
+  args: { label: "Weight (kg)", modelValue: 0.2, min: 0, max: 2, step: 0.1 },
+  render,
+  parameters: {
+    docs: { description: { story: "A fractional `step`: stepping up from 0.2 gives 0.3, not 0.30000000000000004, and phones show a decimal keypad." } },
+  },
+};
+
+export const NegativeRange: Story = {
+  args: { label: "Temperature offset", modelValue: 0, min: -10, max: 10 },
+  render,
+  parameters: { docs: { description: { story: "A negative `min`: the input accepts a typed minus sign." } } },
+};
+
+export const WithError: Story = {
+  args: { fieldHasError: true, errorMessage: "Please choose between 0 and 10", modelValue: 12 },
+  render,
+};
+
+export const LocalisedLabels: Story = { args: { stepDownText: "Diminuer", stepUpText: "Augmenter" }, render };
+
+export const Underlined: Story = { args: { inputVariant: "underlined" }, render };
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    modelValue: 123456789012,
+    min: -999999999999,
+    max: 999999999999999,
+    step: 0.0001,
+    label: "🔢 Gewünschteanzahlderteilnehmendenpersonen https://example.com/a/very/long/unbroken/url <b>not bold</b> عدد",
+    descriptionText: "يرجى إدخال رقم Geben Sie eine Zahl zwischen minus einer Billion und einer Billiarde ein.",
+    errorMessage: "DiesezahlliegtleideraußerhalbdeszulässigenBereichsbitteversuchenSieeserneut",
+    fieldHasError: true,
+    stepDownText: "Verringern 🔽",
+    stepUpText: "Erhöhen 🔼",
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "A 12-digit value, a min of minus a trillion, a 15-digit max and a 0.0001 step, with long unbroken German/URL/emoji/RTL/HTML-like copy. Check at every canvas width: the copy wraps inside the dashed outline, the input's width is capped (12em) so it fits a phone, the step buttons keep their size, and markup renders as text. Clear the field and press step-up (starts from 0), type 9999999999999999 and press step-down (clamps to max), and set `step` to 0.",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,206 @@
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputTextField from "../InputTextField.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { FormUiTheme, InputMode, InputTypesText, InputUiVariant } from "~/types/forms/types.forms.d";
+import type { MediaCanvas } from "~/types/components";
+
+interface StoryArgs {
+  modelValue: string;
+  name: string;
+  label: string;
+  type: InputTypesText;
+  inputmode: InputMode;
+  placeholder: string;
+  min: string;
+  max: string;
+  autocomplete: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  readonly: boolean;
+  theme: FormUiTheme;
+  inputVariant: InputUiVariant;
+  styleClassPassthrough: string[];
+  descriptionText: string;
+  descriptionHtml: string;
+}
+
+const meta: Meta<StoryArgs> = {
+  title: "Components/Forms/Input Text/InputTextField",
+  component: InputTextField,
+  argTypes: {
+    modelValue: { control: "text", table: { category: "Model" } },
+    name: { control: "text", table: { category: "Basic" } },
+    label: { control: "text", table: { category: "Basic" } },
+    type: {
+      control: { type: "select" },
+      options: ["text", "email", "password", "number", "tel", "url", "date"],
+      table: { category: "Basic" },
+    },
+    inputmode: {
+      control: { type: "select" },
+      options: ["text", "email", "tel", "url", "search", "numeric", "none", "decimal"],
+      table: { category: "Basic" },
+    },
+    placeholder: { control: "text", table: { category: "Basic" } },
+    min: { control: "text", table: { category: "Basic" } },
+    max: { control: "text", table: { category: "Basic" } },
+    autocomplete: { control: "text", description: "Native autocomplete token, e.g. `email`", table: { category: "Basic" } },
+    errorMessage: { control: "text", table: { category: "Validation" } },
+    fieldHasError: { control: "boolean", table: { category: "Validation" } },
+    required: { control: "boolean", table: { category: "Validation" } },
+    readonly: { control: "boolean", table: { category: "States" } },
+    theme: {
+      control: { type: "select" },
+      options: ["default", "success", "error", "warning"],
+      table: { category: "Styling" },
+    },
+    inputVariant: {
+      control: { type: "select" },
+      options: ["normal", "outlined", "underlined"],
+      table: { category: "Styling" },
+    },
+    styleClassPassthrough: { control: "object", table: { category: "Styling" } },
+    descriptionText: { control: "text", description: "Story-only: fills the descriptionText slot", table: { category: "Slots" } },
+    descriptionHtml: { control: "text", description: "Story-only: fills the descriptionHtml slot", table: { category: "Slots" } },
+  },
+  args: {
+    modelValue: "",
+    name: "email",
+    label: "Email address",
+    type: "email",
+    inputmode: "email",
+    placeholder: "name@example.com",
+    min: "",
+    max: "",
+    autocomplete: "email",
+    errorMessage: "",
+    fieldHasError: false,
+    required: false,
+    readonly: false,
+    theme: "default",
+    inputVariant: "normal",
+    styleClassPassthrough: [],
+    descriptionText: "",
+    descriptionHtml: "",
+  },
+  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 text field: `InputLabel`, an optional description (`descriptionText`/`descriptionHtml` slots, moved after the control for the `outlined` variant), `InputText` and an error strip, linked through `aria-describedby`. `left`/`right` slots pass through to `InputText`. `style-class-passthrough` lands on the `.input-text-field` root only.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const render = (args: StoryArgs) => ({
+  components: { InputTextField },
+  setup() {
+    const componentArgs = computed(() => {
+      const { modelValue: _modelValue, descriptionText: _text, descriptionHtml: _html, min, max, autocomplete, ...rest } = args;
+      return { ...rest, min: min || undefined, max: max || undefined, autocomplete: autocomplete || undefined };
+    });
+    return { args, componentArgs };
+  },
+  template: `
+    <InputTextField v-model="args.modelValue" v-bind="componentArgs">
+      <template v-if="args.descriptionText" #descriptionText>{{ args.descriptionText }}</template>
+      <template v-if="args.descriptionHtml" #descriptionHtml><span v-html="args.descriptionHtml"></span></template>
+    </InputTextField>
+    <p style="margin-block-start: 1.6rem; font-family: monospace;">modelValue: {{ JSON.stringify(args.modelValue) }}</p>
+  `,
+});
+
+export const Default: Story = { render };
+
+export const WithDescription: Story = { args: { descriptionText: "We only use it to reply to you." }, render };
+
+export const WithHtmlDescription: Story = {
+  args: {
+    label: "Username",
+    type: "text",
+    inputmode: "text",
+    autocomplete: "username",
+    placeholder: "",
+    descriptionHtml: "Use <strong>3 to 20</strong> letters, numbers or <em>underscores</em>.",
+  },
+  render,
+};
+
+export const Required: Story = { args: { required: true }, render };
+
+export const WithError: Story = {
+  args: { fieldHasError: true, errorMessage: "Please enter a valid email address", modelValue: "not-an-email" },
+  render,
+};
+
+export const Readonly: Story = { args: { readonly: true, modelValue: "alex.morgan@example.com" }, render };
+
+export const Outlined: Story = {
+  args: { inputVariant: "outlined", descriptionText: "We only use it to reply to you." },
+  render,
+  parameters: { docs: { description: { story: "The `outlined` variant renders the description after the control and error." } } },
+};
+
+export const Underlined: Story = { args: { inputVariant: "underlined" }, render };
+
+export const DateWithMinMax: Story = {
+  args: {
+    type: "date",
+    inputmode: "text",
+    label: "Appointment date",
+    name: "appointmentDate",
+    autocomplete: "",
+    placeholder: "",
+    min: new Date().toISOString().split("T")[0],
+    max: "2027-12-31",
+  },
+  render,
+};
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    modelValue: "alex.morgan.with.a.very.long.unbroken.address@subdomain.northtown-example.co.uk",
+    label:
+      "📧 Elektronischepostadressefürdiebenachrichtigungüberbestellungen https://example.com/a/very/long/unbroken/url <b>not bold</b> البريد",
+    descriptionText: "يرجى إدخال بريدك الإلكتروني Wir verwenden Ihre Adresse ausschließlich für Rückfragen zu Ihrer Bestellung.",
+    placeholder: "Bitte geben Sie Ihre vollständige E-Mail-Adresse ein",
+    errorMessage: "DieseadresseistleiderungültigbitteüberprüfenSiedieSchreibweise",
+    fieldHasError: true,
+    required: true,
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "Long unbroken German, URL, emoji, HTML-like and right-to-left copy in the label, description, value, placeholder and error. Check at every canvas width: the label, description and error wrap inside the dashed outline, the input never pushes past it, and markup renders as text.",
+      },
+    },
+  },
+};

package/app/components/05.forms/input-text/tests/{InputPasswordWithLabel.spec.ts → InputPasswordField.spec.ts}

@@ -1,7 +1,7 @@
 // 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 "../InputPasswordWithLabel.vue";
+import ComponentUnderTest from "../InputPasswordField.vue";
 
 const initialPropsData = {
   name: "password",
@@ -11,21 +11,33 @@ const initialPropsData = {
 };
 
 let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
-const wrapperFactory = (propsData = {}) => {
+const wrapperFactory = (propsData = {}, slots = {}) => {
   const mockPropsData = { ...initialPropsData, ...propsData };
 
   return mountSuspended(ComponentUnderTest, {
     attachTo: document.body,
     props: mockPropsData,
+    slots,
   });
 };
 
-describe("InputPasswordWithLabel", () => {
+afterEach(() => {
+  wrapper?.unmount();
+  vi.restoreAllMocks();
+});
+
+describe("InputPasswordField", () => {
   it("mounts without error", async () => {
     wrapper = await wrapperFactory();
     expect(wrapper.vm).toBeTruthy();
   });
 
+  it("renders an InputTextField root with the input-password-field class", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.classes()).toContain("input-text-field");
+    expect(wrapper.classes()).toContain("input-password-field");
+  });
+
   it("defaults to type=password and the default toggle button text", async () => {
     wrapper = await wrapperFactory();
 
@@ -33,6 +45,14 @@ describe("InputPasswordWithLabel", () => {
     expect(wrapper.find("button").text()).toContain("Show password");
   });
 
+  it("defaults autocomplete to current-password and forwards a custom one", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("input").attributes("autocomplete")).toBe("current-password");
+
+    await wrapper.setProps({ autocomplete: "new-password" });
+    expect(wrapper.find("input").attributes("autocomplete")).toBe("new-password");
+  });
+
   it("toggles the input type and button text when the toggle button is clicked", async () => {
     wrapper = await wrapperFactory();
 
@@ -42,6 +62,11 @@ describe("InputPasswordWithLabel", () => {
     expect(wrapper.find("button").text()).toContain("Hide password");
   });
 
+  it("ignores a passed type so the toggle stays in control", async () => {
+    wrapper = await wrapperFactory({ type: "text" });
+    expect(wrapper.find("input").attributes("type")).toBe("password");
+  });
+
   it("uses custom showPasswordText/hidePasswordText when provided", async () => {
     wrapper = await wrapperFactory({
       showPasswordText: "Afficher le mot de passe",
@@ -54,4 +79,18 @@ describe("InputPasswordWithLabel", () => {
 
     expect(wrapper.find("button").text()).toContain("Masquer le mot de passe");
   });
+
+  it("renders no description and no description id without a description slot", async () => {
+    wrapper = await wrapperFactory();
+
+    expect(wrapper.find(".input-text-description").exists()).toBe(false);
+    expect(wrapper.find("input").attributes("aria-describedby")).toBeUndefined();
+  });
+
+  it("forwards the descriptionText slot", async () => {
+    wrapper = await wrapperFactory({}, { descriptionText: () => "At least 12 characters" });
+
+    expect(wrapper.text()).toContain("At least 12 characters");
+    expect(wrapper.find("input").attributes("aria-describedby")).toMatch(/-description$/);
+  });
 });

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

@@ -0,0 +1,166 @@
+// https://nuxt.com/docs/getting-started/testing#unit-testing
+import { nextTick } from "vue";
+import type { VueWrapper } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ComponentUnderTest from "../InputText.vue";
+
+const initialPropsData = {
+  id: "test-input",
+  name: "testName",
+  modelValue: "",
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}, slots = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+    slots,
+  });
+};
+
+const beforeInput = (data: string | null) => new InputEvent("beforeinput", { data, cancelable: true, inputType: "insertText" });
+
+afterEach(() => {
+  wrapper?.unmount();
+  vi.restoreAllMocks();
+});
+
+describe("InputText", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders the native input with the .input-text class", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find("input.input-text").exists()).toBe(true);
+  });
+
+  it("binds v-model to the input value", async () => {
+    wrapper = await wrapperFactory({ modelValue: "hello" });
+    expect((wrapper.find("input").element as HTMLInputElement).value).toBe("hello");
+
+    await wrapper.find("input").setValue("changed");
+    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["changed"]);
+  });
+
+  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");
+  });
+
+  it("forwards readonly and autocomplete to the input", async () => {
+    wrapper = await wrapperFactory({ readonly: true, autocomplete: "email" });
+    const input = wrapper.find("input");
+
+    expect(input.attributes("readonly")).toBeDefined();
+    expect(input.attributes("autocomplete")).toBe("email");
+    expect(wrapper.find(".input-text-wrapper").attributes("data-readonly")).toBe("");
+  });
+
+  it("omits readonly, autocomplete and aria-describedby by default", async () => {
+    wrapper = await wrapperFactory();
+    const input = wrapper.find("input");
+
+    expect(input.attributes("readonly")).toBeUndefined();
+    expect(input.attributes("autocomplete")).toBeUndefined();
+    expect(input.attributes("aria-describedby")).toBeUndefined();
+  });
+
+  it("sets data-input-variant, data-theme and data-invalid on the wrapper", async () => {
+    wrapper = await wrapperFactory({ inputVariant: "underlined", theme: "warning", fieldHasError: true });
+    const root = wrapper.find(".input-text-wrapper");
+
+    expect(root.attributes("data-input-variant")).toBe("underlined");
+    expect(root.attributes("data-theme")).toBe("warning");
+    expect(root.attributes("data-invalid")).toBe("");
+    expect(wrapper.find("input").attributes("aria-invalid")).toBe("true");
+  });
+
+  it("renders slot holders and data-has-*-slot only for filled slots", async () => {
+    wrapper = await wrapperFactory({}, { left: () => "L" });
+    const root = wrapper.find(".input-text-wrapper");
+
+    expect(wrapper.find(".input-text-slot-left").text()).toBe("L");
+    expect(wrapper.find(".input-text-slot-right").exists()).toBe(false);
+    expect(root.attributes("data-has-left-slot")).toBe("");
+    expect(root.attributes("data-has-right-slot")).toBeUndefined();
+  });
+
+  it("sets isActive on focus and blur, reflected as data-active", async () => {
+    wrapper = await wrapperFactory({ isActive: false });
+    const input = wrapper.find("input");
+
+    await input.trigger("focusin");
+    expect(wrapper.emitted("update:isActive")?.at(-1)).toEqual([true]);
+
+    await input.trigger("focusout");
+    expect(wrapper.emitted("update:isActive")?.at(-1)).toEqual([false]);
+
+    await wrapper.setProps({ isActive: true, isDirty: true });
+    const root = wrapper.find(".input-text-wrapper");
+    expect(root.attributes("data-active")).toBe("");
+    expect(root.attributes("data-dirty")).toBe("");
+  });
+
+  it("blocks non-digit typing for inputmode numeric", async () => {
+    wrapper = await wrapperFactory({ inputmode: "numeric" });
+    const input = wrapper.find("input").element;
+
+    const letter = beforeInput("a");
+    input.dispatchEvent(letter);
+    expect(letter.defaultPrevented).toBe(true);
+
+    const digit = beforeInput("7");
+    input.dispatchEvent(digit);
+    expect(digit.defaultPrevented).toBe(false);
+
+    const deletion = beforeInput(null);
+    input.dispatchEvent(deletion);
+    expect(deletion.defaultPrevented).toBe(false);
+
+    expect(wrapper.find("input").attributes("pattern")).toBe("[0-9]+");
+  });
+
+  it("does not filter typing for other inputmodes", async () => {
+    wrapper = await wrapperFactory({ inputmode: "text" });
+    const letter = beforeInput("a");
+    wrapper.find("input").element.dispatchEvent(letter);
+
+    expect(letter.defaultPrevented).toBe(false);
+    expect(wrapper.find("input").attributes("pattern")).toBeUndefined();
+  });
+
+  it("applies styleClassPassthrough to the input and reacts to changes", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: ["first-class"] });
+    expect(wrapper.find("input").classes()).toContain("first-class");
+
+    await wrapper.setProps({ styleClassPassthrough: ["second-class"] });
+    await nextTick();
+    expect(wrapper.find("input").classes()).toContain("second-class");
+    expect(wrapper.find("input").classes()).not.toContain("first-class");
+  });
+});