srcdev-nuxt-components 9.6.8 → 9.6.10

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

@@ -0,0 +1,168 @@
+<template>
+  <div
+    class="input-text-field"
+    :class="elementClasses"
+    :data-theme="theme"
+    :data-input-variant="inputVariant"
+    :data-invalid="fieldHasError ? '' : null"
+    :data-dirty="isDirty ? '' : null"
+    :data-active="isActive ? '' : null"
+  >
+    <InputLabel
+      :id
+      :required
+      :input-variant
+      :field-has-error
+      :style-class-passthrough="['input-text-label']"
+    >
+      <template #textLabel>{{ label }}</template>
+    </InputLabel>
+
+    <InputDescription
+      v-if="inputVariant !== 'outlined'"
+      :description-id
+      :input-variant
+      :field-has-error="fieldHasError"
+      :style-class-passthrough="['input-text-description']"
+    >
+      <template v-if="slots.descriptionHtml" #descriptionHtml>
+        <slot name="descriptionHtml"></slot>
+      </template>
+      <template v-if="slots.descriptionText" #descriptionText>
+        <slot name="descriptionText"></slot>
+      </template>
+    </InputDescription>
+
+    <InputText
+      :id
+      v-model="modelValue"
+      v-model:is-dirty="isDirty"
+      v-model:is-active="isActive"
+      :type
+      :inputmode
+      :maxlength
+      :min
+      :max
+      :name
+      :placeholder
+      :field-has-error
+      :required
+      :readonly
+      :autocomplete
+      :theme
+      :aria-describedby="ariaDescribedby() ?? undefined"
+      :input-variant
+    >
+      <template v-if="slots.left" #left>
+        <slot name="left"></slot>
+      </template>
+      <template v-if="slots.right" #right>
+        <slot name="right"></slot>
+      </template>
+    </InputText>
+
+    <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="false" :input-variant />
+
+    <InputDescription
+      v-if="inputVariant === 'outlined'"
+      :description-id
+      :input-variant
+      :field-has-error="fieldHasError"
+      :style-class-passthrough="['input-text-description']"
+    >
+      <template v-if="slots.descriptionHtml" #descriptionHtml>
+        <slot name="descriptionHtml"></slot>
+      </template>
+      <template v-if="slots.descriptionText" #descriptionText>
+        <slot name="descriptionText"></slot>
+      </template>
+    </InputDescription>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { InputTypesText, FormUiTheme, InputUiVariant, InputMode } from "~/types/forms/types.forms";
+
+interface Props {
+  maxlength?: number;
+  min?: string | number;
+  max?: string | number;
+  type: InputTypesText;
+  inputmode?: InputMode;
+  name: string;
+  placeholder?: string;
+  label: string;
+  errorMessage: object | string;
+  fieldHasError?: boolean;
+  required?: boolean;
+  readonly?: boolean;
+  autocomplete?: string;
+  styleClassPassthrough?: string | string[];
+  theme?: FormUiTheme;
+  inputVariant?: InputUiVariant;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxlength: 255,
+  min: undefined,
+  max: undefined,
+  inputmode: "text",
+  placeholder: "",
+  fieldHasError: false,
+  required: false,
+  readonly: false,
+  autocomplete: undefined,
+  styleClassPassthrough: () => [],
+  theme: "default",
+  inputVariant: "normal",
+});
+
+const slots = useSlots();
+
+const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
+  props.name,
+  toRef(props, "fieldHasError"),
+  slots
+);
+
+const modelValue = defineModel<string>({ required: true });
+const isActive = ref<boolean>(false);
+const isDirty = ref<boolean>(false);
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+
+const testDirty = () => {
+  const watchValue = modelValue.value ?? "";
+
+  if (!isDirty.value && typeof watchValue === "string" && watchValue.length > 0) {
+    isDirty.value = true;
+  }
+};
+
+onMounted(() => {
+  testDirty();
+});
+
+watch(
+  () => modelValue.value,
+  () => {
+    testDirty();
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .input-text-field {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+}
+</style>

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

@@ -0,0 +1,163 @@
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputPasswordField from "../InputPasswordField.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;
+  placeholder: string;
+  maxlength: number;
+  autocomplete: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  theme: FormUiTheme;
+  inputVariant: InputUiVariant;
+  styleClassPassthrough: string[];
+  showPasswordText: string;
+  hidePasswordText: string;
+  descriptionText: string;
+}
+
+const meta: Meta<StoryArgs> = {
+  title: "Components/Forms/Input Text/InputPasswordField",
+  component: InputPasswordField,
+  argTypes: {
+    modelValue: { control: "text", table: { category: "Model" } },
+    name: { control: "text", table: { category: "Basic" } },
+    label: { control: "text", table: { category: "Basic" } },
+    placeholder: { control: "text", table: { category: "Basic" } },
+    maxlength: { control: "number", table: { category: "Basic" } },
+    autocomplete: {
+      control: { type: "select" },
+      options: ["current-password", "new-password", "off"],
+      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" } },
+    showPasswordText: { control: "text", description: "Toggle's accessible name while hidden", table: { category: "Accessibility" } },
+    hidePasswordText: { control: "text", description: "Toggle's accessible name while shown", table: { category: "Accessibility" } },
+    descriptionText: { control: "text", description: "Story-only: fills the descriptionText slot", table: { category: "Slots" } },
+  },
+  args: {
+    modelValue: "",
+    name: "password",
+    label: "Password",
+    placeholder: "",
+    maxlength: 255,
+    autocomplete: "current-password",
+    errorMessage: "",
+    fieldHasError: false,
+    required: false,
+    theme: "default",
+    inputVariant: "normal",
+    styleClassPassthrough: [],
+    showPasswordText: "Show password",
+    hidePasswordText: "Hide password",
+    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:
+          "`InputTextField` with a show/hide toggle (an inline `InputButton` in the right slot) that switches the input between `password` and `text`. `showPasswordText`/`hidePasswordText` localise the toggle's accessible name. `autocomplete` defaults to `current-password`; use `new-password` on sign-up and change-password forms.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const render = (args: StoryArgs) => ({
+  components: { InputPasswordField },
+  setup() {
+    const componentArgs = computed(() => {
+      const { modelValue: _modelValue, descriptionText: _descriptionText, ...rest } = args;
+      return rest;
+    });
+    return { args, componentArgs };
+  },
+  template: `
+    <InputPasswordField v-model="args.modelValue" v-bind="componentArgs">
+      <template v-if="args.descriptionText" #descriptionText>{{ args.descriptionText }}</template>
+    </InputPasswordField>
+  `,
+});
+
+export const Default: Story = { render };
+
+export const NewPassword: Story = {
+  args: { label: "Choose a password", autocomplete: "new-password", descriptionText: "At least 12 characters." },
+  render,
+  parameters: { docs: { description: { story: "Sign-up use: `autocomplete=\"new-password\"` lets password managers offer a generated one." } } },
+};
+
+export const WithError: Story = {
+  args: { fieldHasError: true, errorMessage: "Password is too short", modelValue: "weak" },
+  render,
+};
+
+export const LocalisedToggleText: Story = {
+  args: { label: "Mot de passe", showPasswordText: "Afficher le mot de passe", hidePasswordText: "Masquer le mot de passe" },
+  render,
+};
+
+export const Underlined: Story = { args: { inputVariant: "underlined" }, render };
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    modelValue: "correcthorsebatterystaplecorrecthorsebatterystaplecorrecthorsebatterystaple🔑<script>",
+    label: "🔐 Persönlicheskennwortfürdenzugangzumkundenkontoundallenverbundenendiensten <b>not bold</b> كلمة المرور",
+    descriptionText: "Mindestens zwölf Zeichen, davon eine Ziffer. يجب أن تتكون كلمة المرور من اثني عشر حرفًا على الأقل",
+    errorMessage: "DaskennwortentsprichtleidernichtdenSicherheitsanforderungen",
+    fieldHasError: true,
+    showPasswordText: "Kennwort im Klartext anzeigen",
+    hidePasswordText: "Kennwort wieder verbergen",
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "A long unbroken value with emoji and HTML-like text, long German/RTL copy everywhere and long toggle labels. Check at every canvas width: the toggle button keeps its size at the right edge, the copy wraps inside the dashed outline, and toggling shows the value as plain text.",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,194 @@
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputText from "../InputText.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;
+  id: string;
+  name: string;
+  type: InputTypesText;
+  inputmode: InputMode;
+  placeholder: string;
+  maxlength: number;
+  min: string;
+  max: string;
+  autocomplete: string;
+  required: boolean;
+  readonly: boolean;
+  fieldHasError: boolean;
+  theme: FormUiTheme;
+  inputVariant: InputUiVariant;
+  styleClassPassthrough: string[];
+  leftSlotContent: string;
+  rightSlotContent: string;
+}
+
+const meta: Meta<StoryArgs> = {
+  title: "Components/Forms/Input Text/InputText",
+  component: InputText,
+  argTypes: {
+    modelValue: { control: "text", table: { category: "Model" } },
+    id: { control: "text", table: { category: "Basic" } },
+    name: { 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"],
+      description: "`numeric` also blocks typing anything but digits",
+      table: { category: "Basic" },
+    },
+    placeholder: { control: "text", table: { category: "Basic" } },
+    maxlength: { control: "number", table: { category: "Basic" } },
+    min: { control: "text", description: 'Native min, e.g. the earliest date for type="date"', table: { category: "Basic" } },
+    max: { control: "text", description: 'Native max, e.g. the latest date for type="date"', table: { category: "Basic" } },
+    autocomplete: { control: "text", description: "Native autocomplete token, e.g. `email`", table: { category: "Basic" } },
+    required: { control: "boolean", table: { category: "Validation" } },
+    readonly: { control: "boolean", table: { category: "States" } },
+    fieldHasError: { 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" } },
+    leftSlotContent: { control: "text", description: "Story-only: fills the left slot", table: { category: "Slots" } },
+    rightSlotContent: { control: "text", description: "Story-only: fills the right slot", table: { category: "Slots" } },
+  },
+  args: {
+    modelValue: "",
+    id: "example-input",
+    name: "example",
+    type: "text",
+    inputmode: "text",
+    placeholder: "Enter text",
+    maxlength: 255,
+    min: "",
+    max: "",
+    autocomplete: "",
+    required: false,
+    readonly: false,
+    fieldHasError: false,
+    theme: "default",
+    inputVariant: "normal",
+    styleClassPassthrough: [],
+    leftSlotContent: "",
+    rightSlotContent: "",
+  },
+  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:
+          "Bare native `<input>` for the `05.forms` text family: no label, description or error (use `InputTextField`, `InputPasswordField` or `InputTextAsNumberField` for those, or pair it with your own `<label for>`). `left`/`right` slots hold decorations or inline `InputButton`s. `inputmode=\"numeric\"` blocks non-digit typing. State is exposed as `data-*` attributes on `.input-text-wrapper`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const render = (args: StoryArgs) => ({
+  components: { InputText },
+  setup() {
+    const componentArgs = computed(() => {
+      const {
+        modelValue: _modelValue,
+        leftSlotContent: _left,
+        rightSlotContent: _right,
+        min,
+        max,
+        autocomplete,
+        ...rest
+      } = args;
+      return { ...rest, min: min || undefined, max: max || undefined, autocomplete: autocomplete || undefined };
+    });
+    return { args, componentArgs };
+  },
+  template: `
+    <InputText v-model="args.modelValue" v-bind="componentArgs">
+      <template v-if="args.leftSlotContent" #left>{{ args.leftSlotContent }}</template>
+      <template v-if="args.rightSlotContent" #right>{{ args.rightSlotContent }}</template>
+    </InputText>
+    <p style="margin-block-start: 1.6rem; font-family: monospace;">modelValue: {{ JSON.stringify(args.modelValue) }}</p>
+  `,
+});
+
+export const Default: Story = { render };
+
+export const WithSlots: Story = { args: { leftSlotContent: "📧", rightSlotContent: "🔍" }, render };
+
+export const WithError: Story = { args: { fieldHasError: true, theme: "error" }, render };
+
+export const Readonly: Story = {
+  args: { readonly: true, modelValue: "en-GB", inputVariant: "underlined" },
+  render,
+  parameters: { docs: { description: { story: "`readonly` reaches the native input and sets `data-readonly` on the wrapper." } } },
+};
+
+export const NumericOnly: Story = {
+  args: { inputmode: "numeric", placeholder: "Digits only" },
+  render,
+  parameters: {
+    docs: { description: { story: "`inputmode=\"numeric\"` shows a number keypad on phones and blocks typing anything but digits." } },
+  },
+};
+
+export const Underlined: Story = { args: { inputVariant: "underlined" }, render };
+
+export const DateWithMinMax: Story = {
+  args: { type: "date", name: "appointmentDate", min: new Date().toISOString().split("T")[0], max: "2027-12-31" },
+  render,
+  parameters: { docs: { description: { story: "A date input whose picker can't go before today." } } },
+};
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    modelValue:
+      "Donaudampfschifffahrtsgesellschaftskapitänswitwenrentenversicherung https://example.com/a/very/long/unbroken/url <b>not bold</b>",
+    placeholder: "Bitte geben Sie hier Ihre vollständige Lieferadresse einschließlich Postleitzahl ein",
+    leftSlotContent: "🔎🔎🔎",
+    rightSlotContent: "عربى",
+    fieldHasError: true,
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "A long unbroken German, URL and HTML-like value with a long placeholder and text in both slots. Check at every canvas width: the input stays inside the dashed outline and scrolls its text instead of growing, the slots keep their size, and markup renders as text. Clear it to check the placeholder.",
+      },
+    },
+  },
+};