srcdev-nuxt-components 9.6.6 → 9.6.8

package/app/components/05.forms/input-range/tests/{InputRangeDefault.spec.ts → InputRangeField.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 "../InputRangeDefault.vue";
+import ComponentUnderTest from "../InputRangeField.vue";
 
 const initialPropsData = {
   name: "testName",
@@ -13,6 +13,11 @@ const initialPropsData = {
 };
 
 let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+
+afterEach(() => {
+  wrapper?.unmount();
+  vi.restoreAllMocks();
+});
 const wrapperFactory = (propsData = {}, slots = {}) => {
   const mockPropsData = { ...initialPropsData, ...propsData };
 
@@ -23,7 +28,7 @@ const wrapperFactory = (propsData = {}, slots = {}) => {
   });
 };
 
-describe("InputRangeDefault", () => {
+describe("InputRangeField", () => {
   it("mounts without error", async () => {
     wrapper = await wrapperFactory();
     expect(wrapper.vm).toBeTruthy();
@@ -39,10 +44,10 @@ describe("InputRangeDefault", () => {
     expect(wrapper.find('input[type="range"]').exists()).toBe(true);
   });
 
-  it("sets data-invalid and the error class when fieldHasError is true", async () => {
+  it("sets data-invalid, not a bare error class, when fieldHasError is true", async () => {
     wrapper = await wrapperFactory({ fieldHasError: true });
-    expect(wrapper.find(".input-range-with-label").attributes("data-invalid")).toBe("");
-    expect(wrapper.find(".input-range-with-label").classes()).toContain("error");
+    expect(wrapper.find(".input-range-field").attributes("data-invalid")).toBe("");
+    expect(wrapper.find(".input-range-field").classes()).not.toContain("error");
   });
 
   it("does not render step buttons when the left/right slots are not used", async () => {
@@ -133,8 +138,67 @@ describe("InputRangeDefault", () => {
     expect(wrapper.text()).toContain("This field is required");
   });
 
-  it("applies styleClassPassthrough", async () => {
+  it("applies styleClassPassthrough to the root only, not the inner input", async () => {
     wrapper = await wrapperFactory({ styleClassPassthrough: "custom-range" });
-    expect(wrapper.find(".input-range-with-label").classes()).toContain("custom-range");
+    expect(wrapper.find(".input-range-field").classes()).toContain("custom-range");
+    expect(wrapper.find("input").classes()).not.toContain("custom-range");
+  });
+
+  it("uses its own label class, not the number field's", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find(".input-range-label").exists()).toBe(true);
+    expect(wrapper.find(".input-number-label").exists()).toBe(false);
+  });
+
+  it("forwards the markers slot", async () => {
+    wrapper = await wrapperFactory({}, { markers: '<div class="input-range-markers" data-testid="markers"></div>' });
+    expect(wrapper.find('[data-testid="markers"]').exists()).toBe(true);
+    expect(wrapper.find(".input-range-wrapper").attributes("data-has-markers")).toBe("");
+  });
+
+  it("forwards the datalist slot with its generated id", async () => {
+    wrapper = await wrapperFactory(
+      {},
+      { datalist: `<template #datalist="{ datalistId }"><datalist :id="datalistId"></datalist></template>` }
+    );
+    const list = wrapper.find("input").attributes("list");
+
+    expect(list).toBeTruthy();
+    expect(wrapper.find("datalist").attributes("id")).toBe(list);
+  });
+
+  describe("step buttons", () => {
+    const stepSlots = { left: "<span>-</span>", right: "<span>+</span>" };
+    const stepDown = () => wrapper.findAll("button").find((button) => button.text().includes("-"))!;
+    const stepUp = () => wrapper.findAll("button").find((button) => button.text().includes("+"))!;
+
+    it("rounds away floating-point drift on fractional steps", async () => {
+      wrapper = await wrapperFactory({ modelValue: 0.2, min: 0, max: 1, step: 0.1 }, stepSlots);
+      await stepUp().trigger("click");
+      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([0.3]);
+    });
+
+    it("clamps to max when a step would overshoot it", async () => {
+      wrapper = await wrapperFactory({ modelValue: 98, min: 0, max: 100, step: 5 }, stepSlots);
+      await stepUp().trigger("click");
+      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([100]);
+    });
+
+    it("clamps to min when a step would undershoot it", async () => {
+      wrapper = await wrapperFactory({ modelValue: 2, min: 0, max: 100, step: 5 }, stepSlots);
+      await stepDown().trigger("click");
+      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([0]);
+    });
+
+    it("treats a negative or zero step as its size, or 1", async () => {
+      wrapper = await wrapperFactory({ modelValue: 50, step: -5 }, stepSlots);
+      await stepUp().trigger("click");
+      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([55]);
+
+      wrapper.unmount();
+      wrapper = await wrapperFactory({ modelValue: 50, step: 0 }, stepSlots);
+      await stepUp().trigger("click");
+      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([51]);
+    });
   });
 });

package/app/components/05.forms/patterns/stories/MigratedFieldsForm.stories.ts

@@ -3,7 +3,7 @@ import { reactive, ref } from "vue";
 import InputTextWithLabel from "../../input-text/InputTextWithLabel.vue";
 import InputPasswordWithLabel from "../../input-text/InputPasswordWithLabel.vue";
 import InputTextAsNumberWithLabel from "../../input-text/InputTextAsNumberWithLabel.vue";
-import InputRangeDefault from "../../input-range/InputRangeDefault.vue";
+import InputRangeField from "../../input-range/InputRangeField.vue";
 import InputNumberField from "../../input-number/InputNumberField.vue";
 import InputOtpField from "../../input-otp/InputOtpField.vue";
 import InputTextareaWithLabel from "../../input-textarea/InputTextareaWithLabel.vue";
@@ -29,7 +29,7 @@ interface MigratedFieldsFormStoryArgs {
 // rendered inside one. As of 2026-10-04 every 05.forms component is 5/5, so all of them are in:
 // - Own field: InputTextWithLabel (InputTextCore; plus one per type/inputmode pair for checking
 //   on-device keyboards), InputPasswordWithLabel,
-//   InputTextAsNumberWithLabel, InputRangeDefault (InputRangeCore), InputNumberField
+//   InputTextAsNumberWithLabel, InputRangeField (InputRange), InputNumberField
 //   (InputNumber), InputOtpField (InputOtp), InputTextareaWithLabel (InputTextareaCore), InputSelectWithLabel
 //   (InputSelectCore), ToggleSwitchWithLabel and ToggleSwitchWithLabelInline (ToggleSwitchCore),
 //   MultipleCheckboxes, SingleCheckbox, MultipleRadiobuttons, TripleToggleSwitch ("Theme
@@ -63,7 +63,7 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
     InputTextWithLabel,
     InputPasswordWithLabel,
     InputTextAsNumberWithLabel,
-    InputRangeDefault,
+    InputRangeField,
     InputNumberField,
     InputOtpField,
     InputTextareaWithLabel,
@@ -296,7 +296,7 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
           </FormField>
 
           <FormField width="wide" :has-gutter="false">
-            <InputRangeDefault
+            <InputRangeField
               v-model="state.budget"
               name="budget"
               label="Budget (£)"
@@ -308,7 +308,7 @@ const Template: StoryFn<MigratedFieldsFormStoryArgs> = (args) => ({
             >
               <template #left><span aria-hidden="true">−</span></template>
               <template #right><span aria-hidden="true">+</span></template>
-            </InputRangeDefault>
+            </InputRangeField>
           </FormField>
 
           <FormField width="wide" :has-gutter="false">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.6.6",
+  "version": "9.6.8",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",

package/app/components/05.forms/input-range/InputRangeCore.vue

@@ -1,169 +0,0 @@
-<template>
-  <div class="input-range-wrapper" :data-theme="theme">
-    <div v-if="slots.left" class="slot left">
-      <slot name="left"></slot>
-    </div>
-
-    <div class="input-range-container">
-      <slot v-if="slots.markers" name="markers"></slot>
-
-      <input
-        :id
-        ref="inputRange"
-        v-model="modelValue"
-        type="range"
-        :name
-        :required
-        :min
-        :max
-        :step
-        :list="slots.datalist ? name + '-datalist' : ''"
-        :class="['input-range-core', `input-range--${weight}`, styleClassPassthrough, { 'has-markers': slots.markers }]"
-        :aria-describedby
-      />
-
-      <slot v-if="slots.datalist" name="datalist"></slot>
-    </div>
-    <div v-if="slots.right" class="slot right">
-      <slot name="right"></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { FormUiTheme, FormWeight } from "~/types/forms/types.forms";
-
-interface Props {
-  id: string;
-  name: string;
-  min: number;
-  max: number;
-  step?: number;
-  placeholder?: string;
-  required?: boolean;
-  theme?: FormUiTheme;
-  weight?: FormWeight;
-  fieldHasError?: boolean;
-  styleClassPassthrough?: string | string[];
-  ariaDescribedby?: string;
-}
-
-withDefaults(defineProps<Props>(), {
-  step: 1,
-  placeholder: "",
-  required: false,
-  theme: "default",
-  weight: "normal",
-  fieldHasError: false,
-  styleClassPassthrough: () => [],
-  ariaDescribedby: "",
-});
-
-const slots = useSlots();
-
-const modelValue = defineModel<number>({
-  required: true,
-});
-</script>
-
-<style lang="css">
-@layer components {
-  .input-range-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-
-    .slot {
-      align-self: flex-start;
-
-      .input-button {
-        border-radius: var(--form-input-border-radius);
-        width: var(--input-range-button-size);
-        height: var(--input-range-button-size);
-
-        .btn-icon {
-          margin: initial;
-        }
-      }
-    }
-
-    .input-range-container {
-      flex-grow: 1;
-
-      display: grid;
-      grid-template-areas: "element-stack";
-
-      .input-range-markers {
-        grid-area: element-stack;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        width: 100%;
-        z-index: 2;
-
-        .marker {
-          background-color: var(--input-range-marker-background-colour, hsl(0, 29%, 3%));
-          padding: var(--input-range-marker-padding, 0.5rem);
-          border-radius: var(--input-range-marker-border-radius, 50%);
-          overflow: hidden;
-          outline: var(--input-range-marker-outline-width, 0.1rem) solid
-            var(--input-range-marker-outline-colour, var(--slate-04));
-
-          &:hover {
-            cursor: pointer;
-          }
-
-          .marker-icon {
-            font-size: var(--input-range-marker-icon-size, 2rem);
-            display: block;
-            color: var(--input-range-marker-icon-colour, var(--input-range-accent-colour, var(--theme-accent)));
-          }
-        }
-      }
-
-      .input-range-core {
-        grid-area: element-stack;
-
-        accent-color: var(--input-range-accent-colour, var(--theme-accent));
-        height: var(--input-range-button-size);
-        margin: 0;
-        width: 100%;
-
-        &:focus-visible {
-          box-shadow: var(--form-focus-box-shadow);
-        }
-
-        &.has-markers {
-          accent-color: var(--input-range-accent-colour, var(--theme-accent));
-          height: 0.2rem;
-          z-index: 2;
-          translate: 0 1.3rem;
-
-          &::-webkit-slider-thumb {
-            opacity: 0;
-            &:hover {
-              cursor: pointer;
-            }
-          }
-        }
-      }
-
-      .input-range-datalist {
-        display: flex;
-        flex-direction: column;
-        font-family: var(--font-family);
-        font-size: var(--input-range-datalist-font-size, 1.4rem);
-        font-weight: var(--input-range-datalist-font-weight, 500);
-        justify-content: space-between;
-        writing-mode: vertical-lr;
-        width: 100%;
-
-        option {
-          padding: 0;
-        }
-      }
-    }
-  }
-}
-</style>

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

@@ -1,126 +0,0 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { ref } from "vue";
-import StorybookComponent from "../InputRangeCore.vue";
-
-interface InputRangeCoreStoryArgs {
-  id: string;
-  name: string;
-  min: number;
-  max: number;
-  step: number;
-  required: boolean;
-  fieldHasError: boolean;
-  weight: string;
-}
-
-export default {
-  title: "Components/Forms/Input Range/InputRangeCore",
-  component: StorybookComponent,
-  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", table: { category: "States" } },
-    weight: { control: "text", table: { category: "Styling" } },
-  },
-  args: {
-    id: "range-default",
-    name: "rangeDefault",
-    min: 0,
-    max: 100,
-    step: 1,
-    required: false,
-    fieldHasError: false,
-    weight: "normal",
-  },
-} as Meta<InputRangeCoreStoryArgs>;
-
-const Template: StoryFn<InputRangeCoreStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    const modelValue = ref(50);
-    return { args, modelValue };
-  },
-  template: `
-    <div style="margin: 36px; max-width: 320px;">
-      <StorybookComponent v-bind="args" v-model="modelValue" />
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-
-export const ErrorState = Template.bind({});
-ErrorState.args = { fieldHasError: true };
-
-const WithStepButtonsTemplate: StoryFn<InputRangeCoreStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    const modelValue = ref(50);
-    return { args, modelValue };
-  },
-  template: `
-    <div style="margin: 36px; max-width: 320px;">
-      <StorybookComponent v-bind="args" v-model="modelValue">
-        <template #left>
-          <button type="button" @click="modelValue = Math.max(args.min, modelValue - args.step)">−</button>
-        </template>
-        <template #right>
-          <button type="button" @click="modelValue = Math.min(args.max, modelValue + args.step)">+</button>
-        </template>
-      </StorybookComponent>
-    </div>
-  `,
-});
-
-export const WithStepButtons = WithStepButtonsTemplate.bind({});
-
-const WithMarkersTemplate: StoryFn<InputRangeCoreStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    const modelValue = ref(50);
-    return { args, modelValue };
-  },
-  template: `
-    <div style="margin: 36px; max-width: 320px;">
-      <StorybookComponent v-bind="args" v-model="modelValue">
-        <template #markers>
-          <div class="input-range-markers">
-            <div class="marker"><span class="marker-icon">😀</span></div>
-            <div class="marker"><span class="marker-icon">🙂</span></div>
-            <div class="marker"><span class="marker-icon">😐</span></div>
-          </div>
-        </template>
-      </StorybookComponent>
-    </div>
-  `,
-});
-
-export const WithMarkers = WithMarkersTemplate.bind({});
-WithMarkers.args = { min: 0, max: 2, step: 1 };
-
-const WithDatalistTemplate: StoryFn<InputRangeCoreStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    const modelValue = ref(50);
-    return { args, modelValue };
-  },
-  template: `
-    <div style="margin: 36px; max-width: 320px;">
-      <StorybookComponent v-bind="args" v-model="modelValue">
-        <template #datalist>
-          <datalist :id="\`\${args.name}-datalist\`" class="input-range-datalist">
-            <option value="0" label="Low"></option>
-            <option value="50" label="Medium"></option>
-            <option value="100" label="High"></option>
-          </datalist>
-        </template>
-      </StorybookComponent>
-    </div>
-  `,
-});
-
-export const WithDatalist = WithDatalistTemplate.bind({});

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

@@ -1,108 +0,0 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import StorybookComponent from "../InputRangeDefault.vue";
-import type { FormUiTheme } from "~/types/forms/types.forms.d";
-
-interface InputRangeDefaultStoryArgs {
-  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;
-}
-
-export default {
-  title: "Components/Forms/Input Range/InputRangeDefault",
-  component: StorybookComponent,
-  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: "Render +/- step buttons via left/right slots", 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,
-  },
-} as Meta<InputRangeDefaultStoryArgs>;
-
-const Template: StoryFn<InputRangeDefaultStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div style="margin: 36px; max-width: 320px;">
-      <StorybookComponent
-        v-model="args.modelValue"
-        :name="args.name"
-        :label="args.label"
-        :min="args.min"
-        :max="args.max"
-        :step="args.step"
-        :error-message="args.errorMessage"
-        :field-has-error="args.fieldHasError"
-        :required="args.required"
-        :theme="args.theme"
-        :step-down-label="args.stepDownLabel"
-        :step-up-label="args.stepUpLabel"
-      >
-        <template v-if="args.useStepButtons" #left><span>−</span></template>
-        <template v-if="args.useStepButtons" #right><span>+</span></template>
-      </StorybookComponent>
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-
-export const WithStepButtons = Template.bind({});
-WithStepButtons.args = { useStepButtons: true };
-
-export const WithError = Template.bind({});
-WithError.args = {
-  fieldHasError: true,
-  errorMessage: "Please choose a value within the allowed range",
-  theme: "error",
-};
-
-export const Required = Template.bind({});
-Required.args = { required: true };
-
-export const LocalisedLabels = Template.bind({});
-LocalisedLabels.args = {
-  useStepButtons: true,
-  stepDownLabel: "Diminuer",
-  stepUpLabel: "Augmenter",
-};