srcdev-nuxt-components 9.4.9 → 9.4.11

package/app/components/05.forms/input-number/variants/InputNumberDefault.vue

@@ -3,14 +3,14 @@
     class="input-number-with-label"
     :data-theme="theme"
     :data-invalid="fieldHasError ? '' : null"
-    :class="[elementClasses, `theme-${theme}`, { error: fieldHasError }]"
+    :class="[elementClasses, inputVariant, `theme-${theme}`, { error: fieldHasError }]"
   >
     <InputLabel
       :id
       :for="id"
       :theme
       :name
-      input-variant="normal"
+      :input-variant
       :field-has-error
       :style-class-passthrough="['input-number-label', 'body-normal-bold']"
     >
@@ -39,9 +39,11 @@
       :min
       :max
       :step
+      :placeholder
       :theme
       :required
       :weight
+      :input-variant
       :field-has-error
       :style-class-passthrough
       :aria-describedby
@@ -51,7 +53,7 @@
           type="button"
           :readonly="Number(modelValue) <= min"
           :is-pending="false"
-          button-text="Step down"
+          :button-text="stepDownLabel"
           :theme="theme"
           variant="inline"
           @click.stop.prevent="updateValue(-step, Number(modelValue) > min)"
@@ -66,7 +68,7 @@
           type="button"
           :readonly="Number(modelValue) >= max"
           :is-pending="false"
-          button-text="Step up"
+          :button-text="stepUpLabel"
           :theme="theme"
           variant="inline"
           @click.stop.prevent="updateValue(step, Number(modelValue) < max)"
@@ -82,7 +84,7 @@
 </template>
 
 <script setup lang="ts">
-import type { FormWeight } from "~/types/forms/types.forms";
+import type { FormUiTheme, FormWeight, InputUiVariant } from "~/types/forms/types.forms";
 
 interface Props {
   name: string;
@@ -94,9 +96,12 @@ interface Props {
   errorMessage: object | string;
   fieldHasError?: boolean;
   required?: boolean;
-  theme?: "default" | "success" | "error" | "warning";
+  theme?: FormUiTheme;
   weight?: FormWeight;
+  inputVariant?: InputUiVariant;
   styleClassPassthrough?: string | string[];
+  stepDownLabel?: string;
+  stepUpLabel?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -106,45 +111,48 @@ const props = withDefaults(defineProps<Props>(), {
   required: false,
   theme: "default",
   weight: "normal",
+  inputVariant: "normal",
   styleClassPassthrough: () => [],
+  stepDownLabel: "Step down",
+  stepUpLabel: "Step up",
 });
 
 const slots = useSlots();
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 const { id, errorId, descriptionId, ariaDescribedby } = useAriaDescribedById(
   props.name,
   toRef(props, "fieldHasError"),
   slots
 );
-const modelValue = defineModel<number | readonly number[]>();
+const modelValue = defineModel<number | readonly number[]>({
+  required: true,
+});
 
 const updateValue = (step: number, withinRangeLimit: boolean) => {
   if (withinRangeLimit) {
     modelValue.value = (Number(modelValue.value) + step) as number;
   }
 };
-
-updateElementClasses(["has-left-button", "has-right-button"]);
 </script>
 
 <style lang="css">
 @layer components {
-.input-number-with-label {
-  .input-number-label {
-    display: block;
-    margin-block: 0.8rem;
+  .input-number-with-label {
+    .input-number-label {
+      display: block;
+      margin-block: 0.8rem;
 
-    &:hover {
-      cursor: pointer;
+      &:hover {
+        cursor: pointer;
+      }
     }
-  }
 
-  .label-description {
-    font-family: var(--font-family);
-    font-size: 1.6rem;
-    margin-top: 1.2rem;
+    .label-description {
+      font-family: var(--font-family);
+      font-size: 1.6rem;
+      margin-top: 1.2rem;
+    }
   }
 }
-}
 </style>

package/app/components/05.forms/input-number/variants/stories/InputNumberDefault.stories.ts

@@ -0,0 +1,123 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import StorybookComponent from "../InputNumberDefault.vue";
+import type { FormUiTheme } from "~/types/forms/types.forms.d";
+
+interface InputNumberDefaultStoryArgs {
+  modelValue: number;
+  name: string;
+  label: string;
+  min: number;
+  max: number;
+  step: number;
+  placeholder: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  theme: FormUiTheme;
+  inputVariant: string;
+  stepDownLabel: string;
+  stepUpLabel: string;
+  useStepButtons: boolean;
+}
+
+export default {
+  title: "Components/Forms/Input Number/InputNumberDefault",
+  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" } },
+    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" },
+    },
+    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: 5,
+    name: "quantity",
+    label: "Quantity",
+    min: 0,
+    max: 10,
+    step: 1,
+    placeholder: "",
+    errorMessage: "",
+    fieldHasError: false,
+    required: false,
+    theme: "default",
+    inputVariant: "normal",
+    stepDownLabel: "Step down",
+    stepUpLabel: "Step up",
+    useStepButtons: false,
+  },
+} as Meta<InputNumberDefaultStoryArgs>;
+
+const Template: StoryFn<InputNumberDefaultStoryArgs> = (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"
+        :placeholder="args.placeholder"
+        :error-message="args.errorMessage"
+        :field-has-error="args.fieldHasError"
+        :required="args.required"
+        :theme="args.theme"
+        :input-variant="args.inputVariant"
+        :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 enter a valid quantity",
+  theme: "error",
+};
+
+export const Required = Template.bind({});
+Required.args = { required: true };
+
+export const LocalisedLabels = Template.bind({});
+LocalisedLabels.args = {
+  useStepButtons: true,
+  stepDownLabel: "Diminuer",
+  stepUpLabel: "Augmenter",
+};
+
+export const Underlined = Template.bind({});
+Underlined.args = { inputVariant: "underlined", useStepButtons: true };

package/app/components/05.forms/input-number/variants/tests/InputNumberDefault.spec.ts

@@ -0,0 +1,143 @@
+// 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 "../InputNumberDefault.vue";
+
+const initialPropsData = {
+  name: "testName",
+  label: "Test label",
+  min: 0,
+  max: 100,
+  errorMessage: "",
+  modelValue: 50,
+};
+
+let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
+const wrapperFactory = (propsData = {}, slots = {}) => {
+  const mockPropsData = { ...initialPropsData, ...propsData };
+
+  return mountSuspended(ComponentUnderTest, {
+    attachTo: document.body,
+    props: mockPropsData,
+    slots,
+  });
+};
+
+describe("InputNumberDefault", () => {
+  it("mounts without error", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders the label text", async () => {
+    wrapper = await wrapperFactory({ label: "Quantity" });
+    expect(wrapper.text()).toContain("Quantity");
+  });
+
+  it("renders a number input", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.find('input[type="number"]').exists()).toBe(true);
+  });
+
+  it("forwards placeholder to the input", async () => {
+    wrapper = await wrapperFactory({ placeholder: "Enter a quantity" });
+    expect(wrapper.find("input").attributes("placeholder")).toBe("Enter a quantity");
+  });
+
+  it("sets data-invalid and the error class when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true });
+    expect(wrapper.find(".input-number-with-label").attributes("data-invalid")).toBe("");
+    expect(wrapper.find(".input-number-with-label").classes()).toContain("error");
+  });
+
+  it("does not render step buttons when the left/right slots are not used", async () => {
+    wrapper = await wrapperFactory();
+    expect(wrapper.findAllComponents({ name: "InputButtonCore" })).toHaveLength(0);
+  });
+
+  it("renders step buttons with default labels when the left/right slots are used", async () => {
+    wrapper = await wrapperFactory(
+      {},
+      {
+        left: '<span data-testid="left-icon">-</span>',
+        right: '<span data-testid="right-icon">+</span>',
+      }
+    );
+
+    expect(wrapper.text()).toContain("Step down");
+    expect(wrapper.text()).toContain("Step up");
+  });
+
+  it("overrides step button labels via stepDownLabel/stepUpLabel props", async () => {
+    wrapper = await wrapperFactory(
+      { stepDownLabel: "Decrease", stepUpLabel: "Increase" },
+      {
+        left: '<span>-</span>',
+        right: '<span>+</span>',
+      }
+    );
+
+    expect(wrapper.text()).toContain("Decrease");
+    expect(wrapper.text()).toContain("Increase");
+  });
+
+  it("increments the model value when the step-up button is clicked", async () => {
+    wrapper = await wrapperFactory({ modelValue: 50, step: 5 }, { right: '<span>+</span>' });
+
+    const buttons = wrapper.findAll("button");
+    const stepUpButton = buttons.find(
+      (btn) => btn.text().includes("+") || btn.attributes("aria-label")?.includes("Step up")
+    );
+    await stepUpButton?.trigger("click");
+
+    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([55]);
+  });
+
+  it("decrements the model value when the step-down button is clicked", async () => {
+    wrapper = await wrapperFactory({ modelValue: 50, step: 5 }, { left: '<span>-</span>' });
+
+    const buttons = wrapper.findAll("button");
+    const stepDownButton = buttons.find(
+      (btn) => btn.text().includes("-") || btn.attributes("aria-label")?.includes("Step down")
+    );
+    await stepDownButton?.trigger("click");
+
+    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([45]);
+  });
+
+  it("does not step below min", async () => {
+    wrapper = await wrapperFactory({ modelValue: 0, min: 0, step: 5 }, { left: '<span>-</span>' });
+
+    const buttons = wrapper.findAll("button");
+    const stepDownButton = buttons.find((btn) => btn.text().includes("-"));
+    await stepDownButton?.trigger("click");
+
+    expect(wrapper.emitted("update:modelValue")).toBeUndefined();
+  });
+
+  it("does not step above max", async () => {
+    wrapper = await wrapperFactory({ modelValue: 100, max: 100, step: 5 }, { right: '<span>+</span>' });
+
+    const buttons = wrapper.findAll("button");
+    const stepUpButton = buttons.find((btn) => btn.text().includes("+"));
+    await stepUpButton?.trigger("click");
+
+    expect(wrapper.emitted("update:modelValue")).toBeUndefined();
+  });
+
+  it("renders the error message when fieldHasError is true", async () => {
+    wrapper = await wrapperFactory({ fieldHasError: true, errorMessage: "This field is required" });
+    expect(wrapper.text()).toContain("This field is required");
+  });
+
+  it("applies styleClassPassthrough", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: "custom-number" });
+    expect(wrapper.find(".input-number-with-label").classes()).toContain("custom-number");
+  });
+
+  it("forwards inputVariant to the wrapper, InputLabel, and InputNumberCore", async () => {
+    wrapper = await wrapperFactory({ inputVariant: "underlined" });
+    expect(wrapper.find(".input-number-with-label").classes()).toContain("underlined");
+    expect(wrapper.find(".input-number-wrapper").classes()).toContain("underlined");
+  });
+});

package/app/components/05.forms/input-range/CONSUMER-STYLING.md

@@ -0,0 +1,45 @@
+# InputRangeCore — Consumer Styling Guide
+
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--input-range-accent-colour` | `var(--theme-accent)` | Native `accent-color` of the range input (track/thumb tint) |
+| `--input-range-marker-background-colour` | `hsl(0, 29%, 3%)` | Background colour of each `markers` slot dot |
+| `--input-range-marker-padding` | `0.5rem` | Padding of each marker dot |
+| `--input-range-marker-border-radius` | `50%` | Corner radius of each marker dot |
+| `--input-range-marker-outline-width` | `0.1rem` | Marker dot outline width |
+| `--input-range-marker-outline-colour` | `var(--slate-04)` | Marker dot outline colour |
+| `--input-range-marker-icon-size` | `2rem` | Font size of the marker icon (`.marker-icon`) |
+| `--input-range-marker-icon-colour` | `var(--input-range-accent-colour, var(--theme-accent))` | Marker icon colour |
+| `--input-range-datalist-font-size` | `1.4rem` | Font size of the `datalist` slot's option labels |
+| `--input-range-datalist-font-weight` | `500` | Font weight of the `datalist` slot's option labels |
+
+Geometry (thumb/track height, border radius) comes from the shared global form-geometry tokens
+(`--input-range-button-size`, `--form-input-border-radius`), not from this component's own
+tokens — see `theming-form-geometry-tokens.md`.
+
+```css
+.my-page {
+  --input-range-accent-colour: var(--brand-primary);
+  --input-range-marker-background-colour: var(--brand-primary);
+}
+```
+
+Or scope to a single instance via `styleClassPassthrough`:
+
+```vue
+<InputRangeCore style-class-passthrough="price-range" ... />
+```
+
+## Notes
+
+- `accent-color` was previously read from `--theme-form-range-accent-color`, a custom property
+  never declared anywhere in the codebase (no fallback either) — per CSS spec this made the whole
+  `accent-color` declaration invalid at computed-value time, so it silently fell back to the
+  browser's native default accent colour instead of the intended theme colour. Fixed 2026-09-21;
+  see the component's skill doc for detail.
+- The `weight` prop (`FormWeight`) generates an `input-range--{weight}` class on the input, but no
+  CSS in this component (or elsewhere in the library) currently styles that class — it's a no-op
+  today. Left as-is rather than redesigned, since the original intent wasn't clear; flagged here
+  so you don't spend time debugging "why doesn't `weight` do anything."