srcdev-nuxt-components 9.5.3 → 9.5.5

package/app/components/05.forms/input-otp/InputOtp.vue

@@ -0,0 +1,254 @@
+<template>
+  <div
+    class="input-otp"
+    :class="[inputVariant, elementClasses]"
+    :data-theme="theme"
+    :data-invalid="fieldHasError ? '' : null"
+    :role="groupLabel ? 'group' : undefined"
+    :aria-label="groupLabel || undefined"
+  >
+    <template v-for="(digit, index) in digits" :key="index">
+      <label class="sr-only" :for="boxId(index)">{{ boxLabel(index) }}</label>
+      <input
+        :id="boxId(index)"
+        :ref="(el) => setInputRef(el, index)"
+        type="text"
+        inputmode="numeric"
+        pattern="[0-9]*"
+        :autocomplete="index === 0 ? 'one-time-code' : 'off'"
+        class="input-otp-box"
+        :required
+        :value="digit"
+        :aria-invalid="fieldHasError ? 'true' : undefined"
+        :aria-describedby="ariaDescribedby || undefined"
+        @input="onInput(index, $event)"
+        @keydown="onKeydown(index, $event)"
+        @paste="onPaste(index, $event)"
+        @focus="onFocus"
+      />
+    </template>
+    <input v-if="name" type="hidden" :name :value="modelValue" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ComponentPublicInstance } from "vue";
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
+
+interface Props {
+  id: string;
+  name?: string;
+  length?: number;
+  autofocus?: boolean;
+  required?: boolean;
+  groupLabel?: string;
+  digitLabel?: string;
+  fieldHasError?: boolean;
+  ariaDescribedby?: string;
+  theme?: FormUiTheme;
+  inputVariant?: InputUiVariant;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  name: "",
+  length: 6,
+  autofocus: false,
+  required: false,
+  groupLabel: "",
+  digitLabel: "Digit {index} of {length}",
+  fieldHasError: false,
+  ariaDescribedby: "",
+  theme: "default",
+  inputVariant: "normal",
+  styleClassPassthrough: () => [],
+});
+
+const emit = defineEmits<{ complete: [code: string] }>();
+
+const modelValue = defineModel<string>({ required: true });
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
+
+const boxCount = computed(() => Math.min(12, Math.max(1, Math.floor(Number(props.length) || 1))));
+
+const slotsFromModel = () =>
+  (modelValue.value ?? "")
+    .padEnd(boxCount.value, " ")
+    .slice(0, boxCount.value)
+    .split("")
+    .map((char) => (/\d/.test(char) ? char : " "));
+
+const digits = computed(() => slotsFromModel().map((char) => (char === " " ? "" : char)));
+
+const boxId = (index: number) => `${props.id}-${index}`;
+const boxLabel = (index: number) =>
+  props.digitLabel.replace("{index}", String(index + 1)).replace("{length}", String(boxCount.value));
+
+const inputRefs = ref<(HTMLInputElement | null)[]>([]);
+const setInputRef = (el: Element | ComponentPublicInstance | null, index: number) => {
+  inputRefs.value[index] = el as HTMLInputElement | null;
+};
+
+const focusBox = (index: number) => {
+  const clamped = Math.min(boxCount.value - 1, Math.max(0, index));
+  inputRefs.value[clamped]?.focus();
+};
+
+onMounted(() => {
+  if (props.autofocus) nextTick(() => focusBox(0));
+});
+
+watch(
+  () => props.fieldHasError,
+  (hasError) => {
+    if (hasError) nextTick(() => focusBox(0));
+  }
+);
+
+function commit(next: string[]) {
+  const code = next.join("").trimEnd();
+  modelValue.value = code;
+  if (next.every((char) => char !== " ")) emit("complete", code);
+}
+
+function fillFrom(index: number, incoming: string) {
+  const next = slotsFromModel();
+  const chars = incoming.slice(0, boxCount.value - index).split("");
+  chars.forEach((char, offset) => {
+    next[index + offset] = char;
+  });
+  commit(next);
+  return index + chars.length - 1;
+}
+
+function onInput(index: number, event: Event) {
+  const target = event.target as HTMLInputElement;
+  const previous = digits.value[index];
+  let entered = target.value.replace(/\D/g, "");
+
+  if (previous && entered.length === 2) {
+    if (entered.startsWith(previous)) entered = entered.slice(1);
+    else if (entered.endsWith(previous)) entered = entered.slice(0, 1);
+  }
+
+  if (entered.length > 1) {
+    const lastFilled = fillFrom(index, entered);
+    target.value = digits.value[index] ?? "";
+    focusBox(lastFilled);
+    return;
+  }
+
+  target.value = entered;
+  const next = slotsFromModel();
+  next[index] = entered || " ";
+  commit(next);
+
+  if (entered && index < boxCount.value - 1) focusBox(index + 1);
+}
+
+function onKeydown(index: number, event: KeyboardEvent) {
+  const target = event.target as HTMLInputElement;
+
+  switch (event.key) {
+    case "Enter":
+      event.preventDefault();
+      target.form?.requestSubmit();
+      return;
+    case "Backspace":
+      if (!target.value && index > 0) {
+        event.preventDefault();
+        const next = slotsFromModel();
+        next[index - 1] = " ";
+        commit(next);
+        focusBox(index - 1);
+      }
+      return;
+    case "ArrowLeft":
+      event.preventDefault();
+      focusBox(index - 1);
+      return;
+    case "ArrowRight":
+      event.preventDefault();
+      focusBox(index + 1);
+      return;
+    case "Home":
+      event.preventDefault();
+      focusBox(0);
+      return;
+    case "End":
+      event.preventDefault();
+      focusBox(boxCount.value - 1);
+      return;
+  }
+}
+
+function onPaste(index: number, event: ClipboardEvent) {
+  const pasted = (event.clipboardData?.getData("text") ?? "").replace(/\D/g, "");
+  event.preventDefault();
+  if (!pasted) return;
+
+  const start = pasted.length >= boxCount.value ? 0 : index;
+  focusBox(fillFrom(start, pasted));
+}
+
+function onFocus(event: FocusEvent) {
+  (event.target as HTMLInputElement).select();
+}
+</script>
+
+<style lang="css">
+@layer components {
+  .input-otp {
+    --_border: var(--input-otp-border, var(--theme-border));
+    --_border-focus: var(--input-otp-border-focus, var(--theme-border-focus));
+
+    display: flex;
+    gap: var(--input-otp-gap, 0.8rem);
+    max-inline-size: 100%;
+
+    .input-otp-box {
+      all: unset;
+      box-sizing: border-box;
+      flex: 0 1 var(--input-otp-box-inline-size, 4.4rem);
+      min-inline-size: 0;
+      block-size: var(--input-otp-box-block-size, 5.2rem);
+      text-align: center;
+      font-family: var(--font-family);
+      font-size: var(--input-otp-font-size, 2rem);
+      color: var(--input-otp-text-color, var(--theme-input-text-color-normal));
+      background-color: var(--input-otp-surface, var(--theme-input-surface));
+      transition: outline-color var(--theme-form-transition-duration) ease-in-out;
+    }
+
+    &.normal .input-otp-box {
+      border: var(--form-element-border-width) solid var(--_border);
+      border-radius: var(--input-otp-border-radius, var(--form-input-border-radius));
+      outline: var(--form-element-outline-width) solid transparent;
+
+      &:hover {
+        outline: var(--form-element-outline-width-focus) solid var(--input-otp-border-hover, var(--_border-focus));
+        outline-offset: var(--form-element-outline-offset-focus);
+      }
+
+      &:focus-visible {
+        outline: var(--form-element-outline-width-focus) solid var(--_border-focus);
+        outline-offset: var(--form-element-outline-offset-focus);
+      }
+    }
+
+    &.underlined .input-otp-box {
+      border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--_border);
+
+      &:focus-visible {
+        border-bottom-color: var(--_border-focus);
+      }
+    }
+  }
+}
+</style>

package/app/components/05.forms/input-otp/InputOtpField.vue

@@ -0,0 +1,106 @@
+<template>
+  <FormFieldset
+    :id="`${id}-fieldset`"
+    :name
+    :legend="label"
+    :field-has-error
+    :required
+    :style-class-passthrough="['input-otp-field', elementClasses]"
+    :data-invalid="fieldHasError ? '' : null"
+    :data-theme="theme"
+  >
+    <template #content>
+      <InputDescription
+        :description-id
+        :input-variant
+        :field-has-error="fieldHasError"
+        :style-class-passthrough="['input-otp-description']"
+      >
+        <template v-if="slots.descriptionHtml" #descriptionHtml>
+          <slot name="descriptionHtml"></slot>
+        </template>
+        <template v-if="slots.descriptionText" #descriptionText>
+          <slot name="descriptionText"></slot>
+        </template>
+      </InputDescription>
+
+      <InputOtp
+        :id
+        v-model="modelValue"
+        :name
+        :length
+        :autofocus
+        :required
+        :digit-label
+        :field-has-error
+        :theme
+        :input-variant
+        :aria-describedby="ariaDescribedby() ?? ''"
+        @complete="emit('complete', $event)"
+      />
+
+      <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="true" :input-variant />
+    </template>
+  </FormFieldset>
+</template>
+
+<script setup lang="ts">
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms";
+
+interface Props {
+  name: string;
+  label: string;
+  length?: number;
+  autofocus?: boolean;
+  required?: boolean;
+  digitLabel?: string;
+  errorMessage?: object | string;
+  fieldHasError?: boolean;
+  theme?: FormUiTheme;
+  inputVariant?: InputUiVariant;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  length: 6,
+  autofocus: false,
+  required: false,
+  digitLabel: "Digit {index} of {length}",
+  errorMessage: "",
+  fieldHasError: false,
+  theme: "default",
+  inputVariant: "normal",
+  styleClassPassthrough: () => [],
+});
+
+const emit = defineEmits<{ complete: [code: string] }>();
+
+const modelValue = defineModel<string>({ required: true });
+
+const slots = useSlots();
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
+
+const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
+  props.name,
+  toRef(props, "fieldHasError"),
+  slots
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .input-otp-field {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+
+    .input-otp {
+      margin-block-end: var(--input-otp-field-gap, 0.8rem);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,100 @@
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputOtp from "../InputOtp.vue";
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
+
+interface StoryArgs {
+  modelValue: string;
+  id: string;
+  name: string;
+  length: number;
+  autofocus: boolean;
+  required: boolean;
+  groupLabel: string;
+  digitLabel: string;
+  fieldHasError: boolean;
+  theme: FormUiTheme;
+  inputVariant: InputUiVariant;
+}
+
+const meta: Meta<StoryArgs> = {
+  title: "Components/Forms/Input Otp/InputOtp",
+  component: InputOtp,
+  argTypes: {
+    modelValue: { control: "text", table: { category: "Model" } },
+    id: { control: "text", table: { category: "Basic" } },
+    name: { control: "text", description: "Name of the hidden input holding the full code", 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" } },
+    fieldHasError: { control: "boolean", table: { category: "Validation" } },
+    groupLabel: { control: "text", description: "Names the group when used without InputOtpField", table: { category: "Accessibility" } },
+    digitLabel: { control: "text", description: "Per-box label; {index} and {length} are replaced", table: { category: "Accessibility" } },
+    theme: {
+      control: { type: "select" },
+      options: ["default", "success", "error", "warning"],
+      table: { category: "Styling" },
+    },
+    inputVariant: {
+      control: { type: "select" },
+      options: ["normal", "underlined"],
+      table: { category: "Styling" },
+    },
+  },
+  args: {
+    modelValue: "",
+    id: "otp",
+    name: "code",
+    length: 6,
+    autofocus: false,
+    required: false,
+    groupLabel: "Verification code",
+    digitLabel: "Digit {index} of {length}",
+    fieldHasError: false,
+    theme: "default",
+    inputVariant: "normal",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Bare one-time-code control: a row of single-digit boxes. Most consumers want `InputOtpField`, which adds the legend, description and error.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const render = (args: StoryArgs) => ({
+  components: { InputOtp },
+  setup() {
+    const componentArgs = computed(() => {
+      const { modelValue: _modelValue, ...rest } = args;
+      return rest;
+    });
+    const lastComplete = ref("");
+    return { args, componentArgs, lastComplete };
+  },
+  template: `
+    <div style="margin: 3.6rem;">
+      <InputOtp v-model="args.modelValue" v-bind="componentArgs" @complete="lastComplete = $event" />
+      <p style="margin-block-start: 1.6rem;">Model: "{{ args.modelValue }}" · last complete: "{{ lastComplete }}"</p>
+    </div>
+  `,
+});
+
+export const Default: Story = { render };
+
+export const Prefilled: Story = {
+  args: { modelValue: "012345" },
+  render,
+  parameters: { docs: { description: { story: "A leading zero is kept: the model is a string, never a number." } } },
+};
+
+export const FourDigits: Story = { args: { length: 4 }, render };
+
+export const WithError: Story = { args: { fieldHasError: true, modelValue: "123" }, render };
+
+export const Underlined: Story = { args: { inputVariant: "underlined" }, render };

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