srcdev-nuxt-components 9.6.7 → 9.6.8

package/app/components/05.forms/input-range/{InputRangeDefault.vue → InputRangeField.vue}

@@ -1,16 +1,16 @@
 <template>
   <div
-    class="input-range-with-label"
+    class="input-range-field"
+    :class="elementClasses"
     :data-theme="theme"
-    :data-invalid="fieldHasError ? '' : null"
-    :class="[elementClasses, { error: fieldHasError }]"
+    :data-invalid="fieldHasError ? '' : undefined"
   >
     <InputLabel
       :id
       :required
       input-variant="normal"
       :field-has-error
-      :style-class-passthrough="['input-number-label', 'body-normal-bold']"
+      :style-class-passthrough="['input-range-label']"
     >
       <template #textLabel>{{ label }}</template>
     </InputLabel>
@@ -28,7 +28,7 @@
       </template>
     </InputDescription>
 
-    <InputRangeCore
+    <InputRange
       :id
       v-model="modelValue"
       :name
@@ -40,20 +40,22 @@
       :weight
       :field-has-error
       :aria-describedby="ariaDescribedby()"
-      :style-class-passthrough="styleClassPassthrough"
     >
-      <template v-if="slots.datalist" #datalist>
-        <slot name="datalist"></slot>
+      <template v-if="slots.markers" #markers>
+        <slot name="markers"></slot>
+      </template>
+      <template v-if="slots.datalist" #datalist="{ datalistId }">
+        <slot name="datalist" :datalist-id="datalistId"></slot>
       </template>
       <template v-if="slots.left" #left>
         <InputButton
           type="button"
-          :readonly="Number(modelValue) === min"
+          :readonly="modelValue <= min"
           :is-pending="false"
           :button-text="stepDownLabel"
           :theme
           variant="secondary"
-          @click.stop.prevent="updateRange(-step, Number(modelValue) > min)"
+          @click.stop.prevent="stepBy(-1)"
         >
           <template #iconOnly>
             <slot name="left"></slot>
@@ -63,19 +65,19 @@
       <template v-if="slots.right" #right>
         <InputButton
           type="button"
-          :readonly="Number(modelValue) === max"
+          :readonly="modelValue >= max"
           :is-pending="false"
           :button-text="stepUpLabel"
           :theme
           variant="secondary"
-          @click.stop.prevent="updateRange(step, Number(modelValue) < max)"
+          @click.stop.prevent="stepBy(1)"
         >
           <template #iconOnly>
             <slot name="right"></slot>
           </template>
         </InputButton>
       </template>
-    </InputRangeCore>
+    </InputRange>
     <InputError
       :id="errorId"
       :error-message
@@ -119,7 +121,14 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const slots = useSlots();
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
 
 const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
   props.name,
@@ -131,9 +140,23 @@ const modelValue = defineModel<number>({
   required: true,
 });
 
-const updateRange = (step: number, withinRangeLimit: boolean) => {
-  if (withinRangeLimit) {
-    modelValue.value = (Number(modelValue.value) + step) as number;
-  }
+const decimalPlaces = (value: number) => (String(value).split(".")[1] ?? "").length;
+const clamp = (value: number) => Math.min(Math.max(value, props.min), props.max);
+
+const stepBy = (direction: 1 | -1) => {
+  const current = Number(modelValue.value);
+  const stepSize = Math.abs(props.step) || 1;
+  const precision = Math.max(decimalPlaces(stepSize), decimalPlaces(props.min));
+  const next = clamp(Number(((Number.isFinite(current) ? current : props.min) + direction * stepSize).toFixed(precision)));
+  if (next !== current) modelValue.value = next;
 };
 </script>
+
+<style lang="css">
+@layer components {
+  .input-range-field {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+}
+</style>

package/app/components/05.forms/input-range/stories/InputRange.stories.ts

@@ -0,0 +1,187 @@
+import { ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputRange from "../InputRange.vue";
+import InputButton from "../../input-button/InputButton.vue";
+import type { FormUiTheme } from "~/types/forms/types.forms.d";
+
+interface StoryArgs {
+  id: string;
+  name: string;
+  min: number;
+  max: number;
+  step: number;
+  required: boolean;
+  fieldHasError: boolean;
+  theme: FormUiTheme;
+  weight: string;
+}
+
+// Links in the canvas open in the Storybook manager (target="_top"), not inside the preview iframe.
+const storyNoteStyle = "margin: 0 0 1.6rem; font-size: 1.4rem;";
+const parentNote = `
+  <p style="${storyNoteStyle}">
+    With a label, description, error message and clamped step buttons wired up, this is the
+    <a href="/?path=/story/components-forms-input-range-inputrangefield--with-step-buttons" target="_top">InputRangeField</a>.
+  </p>
+`;
+
+const meta: Meta<StoryArgs> = {
+  title: "Components/Forms/Input Range/InputRange",
+  component: InputRange,
+  argTypes: {
+    id: { control: "text", table: { category: "Basic" } },
+    name: { control: "text", table: { category: "Basic" } },
+    min: { control: "number", table: { category: "Basic" } },
+    max: { control: "number", table: { category: "Basic" } },
+    step: { control: "number", table: { category: "Basic" } },
+    required: { control: "boolean", table: { category: "Basic" } },
+    fieldHasError: { control: "boolean", description: "Sets data-invalid and aria-invalid", table: { category: "States" } },
+    theme: {
+      control: { type: "select" },
+      options: ["default", "success", "error", "warning"],
+      table: { category: "Styling" },
+    },
+    weight: { control: "text", description: "Adds an `input-range--{weight}` class; nothing styles it yet", table: { category: "Styling" } },
+  },
+  args: {
+    id: "range-default",
+    name: "rangeDefault",
+    min: 0,
+    max: 100,
+    step: 1,
+    required: false,
+    fieldHasError: false,
+    theme: "default",
+    weight: "normal",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The bare native `<input type=\"range\">`. Slots: `left`/`right` (step buttons), `markers` (custom tick marks overlaid on the track; the native thumb is hidden), and `datalist`, which receives a generated `datalistId` slot prop to put on your `<datalist>`. No label, description or error: that's `InputRangeField`. Hooks: `data-theme`, `data-invalid`, `data-has-markers`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const render = (args: StoryArgs) => ({
+  components: { InputRange },
+  setup() {
+    const modelValue = ref(50);
+    return { args, modelValue };
+  },
+  template: `
+    <div style="margin: 36px; max-width: 320px;">
+      ${parentNote}
+      <InputRange v-bind="args" v-model="modelValue" />
+    </div>
+  `,
+});
+
+export const Default: Story = { render };
+
+export const ErrorState: Story = {
+  args: { fieldHasError: true },
+  render,
+  parameters: { docs: { description: { story: "`fieldHasError` sets `data-invalid` on the wrapper and `aria-invalid` on the input." } } },
+};
+
+export const WithStepButtons: Story = {
+  render: (args: StoryArgs) => ({
+    components: { InputRange, InputButton },
+    setup() {
+      const modelValue = ref(50);
+      return { args, modelValue };
+    },
+    template: `
+      <div style="margin: 36px; max-width: 320px;">
+        ${parentNote}
+        <InputRange v-bind="args" v-model="modelValue">
+          <template #left>
+            <InputButton type="button" button-text="Step down" variant="secondary" @click="modelValue = Math.max(args.min, modelValue - args.step)">
+              <template #iconOnly><Icon name="mdi:minus" /></template>
+            </InputButton>
+          </template>
+          <template #right>
+            <InputButton type="button" button-text="Step up" variant="secondary" @click="modelValue = Math.min(args.max, modelValue + args.step)">
+              <template #iconOnly><Icon name="mdi:plus" /></template>
+            </InputButton>
+          </template>
+        </InputRange>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "`InputButton`s in the `left`/`right` slots, sized by `--input-range-button-size`. The wiring here is minimal; `InputRangeField` clamps and rounds properly.",
+      },
+    },
+  },
+};
+
+export const WithMarkers: Story = {
+  args: { min: 0, max: 2, step: 1 },
+  render: (args: StoryArgs) => ({
+    components: { InputRange },
+    setup() {
+      const modelValue = ref(1);
+      return { args, modelValue };
+    },
+    template: `
+      <div style="margin: 36px; max-width: 320px;">
+        <InputRange v-bind="args" v-model="modelValue">
+          <template #markers>
+            <div class="input-range-markers">
+              <div class="input-range-marker"><span class="input-range-marker-icon">😀</span></div>
+              <div class="input-range-marker"><span class="input-range-marker-icon">🙂</span></div>
+              <div class="input-range-marker"><span class="input-range-marker-icon">😐</span></div>
+            </div>
+          </template>
+        </InputRange>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The `markers` slot with the pre-styled `.input-range-markers` / `.input-range-marker` / `.input-range-marker-icon` classes. The line joining them sits behind the markers, the whole row is the slider (drag, click or use the arrow keys), and a ring circles the selected marker. Use one marker per step.",
+      },
+    },
+  },
+};
+
+export const WithDatalist: Story = {
+  render: (args: StoryArgs) => ({
+    components: { InputRange },
+    setup() {
+      const modelValue = ref(50);
+      return { args, modelValue };
+    },
+    template: `
+      <div style="margin: 36px; max-width: 320px;">
+        <InputRange v-bind="args" v-model="modelValue">
+          <template #datalist="{ datalistId }">
+            <datalist :id="datalistId" class="input-range-datalist">
+              <option value="0" label="Low"></option>
+              <option value="50" label="Medium"></option>
+              <option value="100" label="High"></option>
+            </datalist>
+          </template>
+        </InputRange>
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The `datalist` slot receives a generated `datalistId`; put it on your `<datalist>` and the input's `list` points at it. The thumb snaps to the options in browsers that support it.",
+      },
+    },
+  },
+};

package/app/components/05.forms/input-range/stories/InputRangeField.stories.ts

@@ -0,0 +1,196 @@
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import InputRangeField from "../InputRangeField.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { FormUiTheme } from "~/types/forms/types.forms.d";
+import type { MediaCanvas } from "~/types/components";
+
+interface StoryArgs {
+  modelValue: number;
+  name: string;
+  label: string;
+  min: number;
+  max: number;
+  step: number;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  theme: FormUiTheme;
+  stepDownLabel: string;
+  stepUpLabel: string;
+  useStepButtons: boolean;
+  descriptionText: string;
+  datalistOptions: string[];
+}
+
+const meta: Meta<StoryArgs> = {
+  title: "Components/Forms/Input Range/InputRangeField",
+  component: InputRangeField,
+  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" } },
+    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" },
+    },
+    stepDownLabel: { control: "text", description: "Localisation override for the step-down button", table: { category: "Accessibility" } },
+    stepUpLabel: { control: "text", description: "Localisation override for the step-up button", 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" } },
+    datalistOptions: {
+      control: "object",
+      description: "Story-only: option labels for a datalist spread evenly from min to max (empty for none)",
+      table: { category: "Slots" },
+    },
+  },
+  args: {
+    modelValue: 50,
+    name: "priceRange",
+    label: "Price range",
+    min: 0,
+    max: 100,
+    step: 1,
+    errorMessage: "",
+    fieldHasError: false,
+    required: false,
+    theme: "default",
+    stepDownLabel: "Step down",
+    stepUpLabel: "Step up",
+    useStepButtons: false,
+    descriptionText: "",
+    datalistOptions: [],
+  },
+  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 range slider: `InputLabel`, an optional description, `InputRange` and an error strip. Filling the `left`/`right` slots with an icon adds step buttons: they step by `step`, round away floating-point drift and clamp to `min`/`max`. `markers` and `datalist` are forwarded to `InputRange` (the datalist slot passes its generated `datalistId` through). `stepDownLabel`/`stepUpLabel` localise the buttons' accessible names.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const render = (args: StoryArgs) => ({
+  components: { InputRangeField },
+  setup() {
+    const componentArgs = computed(() => {
+      const {
+        modelValue: _modelValue,
+        useStepButtons: _useStepButtons,
+        descriptionText: _descriptionText,
+        datalistOptions: _datalistOptions,
+        ...rest
+      } = args;
+      return rest;
+    });
+    const datalist = computed(() => {
+      const count = args.datalistOptions.length;
+      return args.datalistOptions.map((label, index) => ({
+        label,
+        value: count > 1 ? args.min + ((args.max - args.min) * index) / (count - 1) : args.min,
+      }));
+    });
+    return { args, componentArgs, datalist };
+  },
+  template: `
+    <InputRangeField 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>
+      <template v-if="datalist.length" #datalist="{ datalistId }">
+        <datalist :id="datalistId" class="input-range-datalist">
+          <option v-for="option in datalist" :key="option.value" :value="option.value" :label="option.label"></option>
+        </datalist>
+      </template>
+    </InputRangeField>
+    <p style="margin-block-start: 1.6rem; font-family: monospace;">modelValue: {{ JSON.stringify(args.modelValue) }}</p>
+  `,
+});
+
+export const Default: Story = { render };
+
+export const WithStepButtons: Story = {
+  args: { useStepButtons: true },
+  render,
+  parameters: { docs: { description: { story: "Step buttons from the `left`/`right` slots. Step-down goes read-only at `min`, step-up at `max`." } } },
+};
+
+export const DecimalSteps: Story = {
+  args: { useStepButtons: true, label: "Opacity", modelValue: 0.2, min: 0, max: 1, step: 0.1 },
+  render,
+  parameters: { docs: { description: { story: "A fractional `step`: stepping up from 0.2 gives 0.3, not 0.30000000000000004." } } },
+};
+
+export const WithError: Story = {
+  args: { fieldHasError: true, errorMessage: "Please choose a value within the allowed range", theme: "error" },
+  render,
+};
+
+export const Required: Story = { args: { required: true }, render };
+
+export const LocalisedLabels: Story = {
+  args: { useStepButtons: true, stepDownLabel: "Diminuer", stepUpLabel: "Augmenter" },
+  render,
+};
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    useStepButtons: true,
+    modelValue: 123456789,
+    min: -999999999999,
+    max: 999999999999,
+    step: 0.0001,
+    label:
+      "🎚️ Maximalerpreisbereichfürdiegewünschtebehandlunginklusivezusatzleistungen https://example.com/a/very/long/unbroken/url <b>not bold</b> نطاق",
+    descriptionText: "يرجى اختيار نطاق Ziehen Sie den Regler, um den gewünschten Preisbereich festzulegen.",
+    errorMessage: "DieserWertliegtleideraußerhalbdeszulässigenBereichsbitteversuchenSieeserneut",
+    fieldHasError: true,
+    stepDownLabel: "Verringern 🔽",
+    stepUpLabel: "Erhöhen 🔼",
+    datalistOptions: ["Minimum", "Sehrniedrigerpreisbereich", "😀", "<b>Mitte</b>", "متوسط", "Hoch", "Maximum"],
+  },
+  render,
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "A range of minus to plus a trillion with a 0.0001 step, long unbroken German/URL/emoji/RTL/HTML-like copy, and a 7-option datalist with long and odd labels. Check at every canvas width: the label, description and error wrap inside the dashed outline, the slider shrinks to fit between step buttons that keep their size, and markup renders as text. Set `step` to 0 or a negative number and press the step buttons.",
+      },
+    },
+  },
+};

package/app/components/05.forms/input-range/tests/{InputRangeCore.spec.ts → InputRange.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 "../InputRangeCore.vue";
+import ComponentUnderTest from "../InputRange.vue";
 
 const initialPropsData = {
   id: "test-range",
@@ -12,6 +12,11 @@ const initialPropsData = {
 };
 
 let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+
+afterEach(() => {
+  wrapper?.unmount();
+  vi.restoreAllMocks();
+});
 const wrapperFactory = (propsData = {}, slots = {}) => {
   const mockPropsData = { ...initialPropsData, ...propsData };
 
@@ -22,7 +27,7 @@ const wrapperFactory = (propsData = {}, slots = {}) => {
   });
 };
 
-describe("InputRangeCore", () => {
+describe("InputRange", () => {
   it("mounts without error", async () => {
     wrapper = await wrapperFactory();
     expect(wrapper.vm).toBeTruthy();
@@ -60,8 +65,8 @@ describe("InputRangeCore", () => {
 
   it("does not render the left/right slot wrappers when the slots are not used", async () => {
     wrapper = await wrapperFactory();
-    expect(wrapper.find(".slot.left").exists()).toBe(false);
-    expect(wrapper.find(".slot.right").exists()).toBe(false);
+    expect(wrapper.find(".input-range-slot-left").exists()).toBe(false);
+    expect(wrapper.find(".input-range-slot-right").exists()).toBe(false);
   });
 
   it("renders the left/right slots when provided", async () => {
@@ -73,11 +78,11 @@ describe("InputRangeCore", () => {
       }
     );
 
-    expect(wrapper.find(".slot.left [data-testid='left-slot']").exists()).toBe(true);
-    expect(wrapper.find(".slot.right [data-testid='right-slot']").exists()).toBe(true);
+    expect(wrapper.find(".input-range-slot-left [data-testid='left-slot']").exists()).toBe(true);
+    expect(wrapper.find(".input-range-slot-right [data-testid='right-slot']").exists()).toBe(true);
   });
 
-  it("renders the markers slot and adds has-markers class to the input", async () => {
+  it("renders the markers slot and sets data-has-markers on the wrapper", async () => {
     wrapper = await wrapperFactory(
       {},
       {
@@ -86,25 +91,44 @@ describe("InputRangeCore", () => {
     );
 
     expect(wrapper.find('[data-testid="markers"]').exists()).toBe(true);
-    expect(wrapper.find("input").classes()).toContain("has-markers");
+    expect(wrapper.find(".input-range-wrapper").attributes("data-has-markers")).toBe("");
   });
 
-  it("does not add has-markers class when the markers slot is not used", async () => {
+  it("does not set data-has-markers when the markers slot is not used", async () => {
     wrapper = await wrapperFactory();
-    expect(wrapper.find("input").classes()).not.toContain("has-markers");
+    expect(wrapper.find(".input-range-wrapper").attributes("data-has-markers")).toBeUndefined();
   });
 
-  it("sets the list attribute to `{name}-datalist` only when the datalist slot is used", async () => {
+  it("links a generated datalist id through the datalistId slot prop", async () => {
     wrapper = await wrapperFactory(
       { name: "price" },
-      { datalist: '<datalist id="price-datalist"></datalist>' }
+      { datalist: `<template #datalist="{ datalistId }"><datalist :id="datalistId"></datalist></template>` }
     );
-    expect(wrapper.find("input").attributes("list")).toBe("price-datalist");
+    const list = wrapper.find("input").attributes("list");
+
+    expect(list).toBeTruthy();
+    expect(list).not.toBe("price-datalist");
+    expect(wrapper.find("datalist").attributes("id")).toBe(list);
   });
 
-  it("leaves the list attribute empty when the datalist slot is not used", async () => {
+  it("omits the list attribute when the datalist slot is not used", async () => {
     wrapper = await wrapperFactory();
-    expect(wrapper.find("input").attributes("list")).toBe("");
+    expect(wrapper.find("input").attributes("list")).toBeUndefined();
+  });
+
+  it("marks the wrapper and input invalid when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true });
+    expect(wrapper.find(".input-range-wrapper").attributes("data-invalid")).toBe("");
+    expect(wrapper.find("input").attributes("aria-invalid")).toBe("true");
+  });
+
+  it("updates passthrough classes when the prop changes", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: ["first"] });
+    await wrapper.setProps({ styleClassPassthrough: ["second"] });
+    const classes = wrapper.find("input").classes();
+
+    expect(classes).toContain("second");
+    expect(classes).not.toContain("first");
   });
 
   it("applies the weight class from the weight prop", async () => {