srcdev-nuxt-components 9.4.11 → 9.5.0

package/app/components/05.forms/input-checkbox-radio/stories/InputCheckboxRadioButton.stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { ref } from "vue";
+import { defineComponent, ref } from "vue";
 import StorybookComponent from "../InputCheckboxRadioButton.vue";
 
 interface InputCheckboxRadioButtonStoryArgs {
@@ -8,6 +8,7 @@ interface InputCheckboxRadioButtonStoryArgs {
   isPill: boolean;
   fieldHasError: boolean;
   displayAsDisc: boolean;
+  direction: "row" | "row-reverse";
 }
 
 export default {
@@ -23,6 +24,12 @@ export default {
     isPill: { control: "boolean", table: { category: "Styling" } },
     fieldHasError: { control: "boolean", table: { category: "States" } },
     displayAsDisc: { control: "boolean", table: { category: "Styling" } },
+    direction: {
+      control: { type: "select" },
+      options: ["row", "row-reverse"],
+      description: "row-reverse puts the control on the right",
+      table: { category: "Styling" },
+    },
   },
   args: {
     type: "checkbox",
@@ -30,6 +37,7 @@ export default {
     isPill: false,
     fieldHasError: false,
     displayAsDisc: false,
+    direction: "row",
   },
 } as Meta<InputCheckboxRadioButtonStoryArgs>;
 
@@ -49,6 +57,7 @@ const Template: StoryFn<InputCheckboxRadioButtonStoryArgs> = (args) => ({
         :is-pill="args.isPill"
         :field-has-error="args.fieldHasError"
         :display-as-disc="args.displayAsDisc"
+        :direction="args.direction"
         v-model="modelValue"
       />
     </div>
@@ -59,9 +68,19 @@ export const Default = Template.bind({});
 
 // "Services of interest" pattern — the actual multi-option checkbox-pill layout this component
 // is normally used in (as opposed to Default's single isolated control).
-const OptionGroupTemplate: StoryFn = () => ({
+// Selection state lives in a child keyed on type, so switching checkbox/radio remounts it with
+// the right empty value (an array for checkboxes, a string for radios). A watch on args.type
+// isn't reliable here: the template sees the new arg, but the watcher doesn't fire.
+const ServiceOptionGroup = defineComponent({
   components: { StorybookComponent },
-  setup() {
+  props: {
+    type: { type: String as () => "checkbox" | "radio", required: true },
+    isPill: Boolean,
+    fieldHasError: Boolean,
+    displayAsDisc: Boolean,
+    direction: { type: String as () => "row" | "row-reverse", default: "row" },
+  },
+  setup(props) {
     const services = [
       "Balayage",
       "Highlights",
@@ -70,24 +89,49 @@ const OptionGroupTemplate: StoryFn = () => ({
       "Lowlights",
       "Toner & Gloss",
     ];
-    const selected = ref<string[]>([]);
+    const selected = ref<string[] | string>(props.type === "checkbox" ? [] : "");
     return { services, selected };
   },
   template: `
-    <div style="margin: 36px; max-width: 480px; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;">
-      <StorybookComponent
-        v-for="service in services"
-        :key="service"
-        :id="'service-' + service"
-        name="services"
-        type="checkbox"
-        :label="service"
-        :true-value="service"
-        :multiple-options="true"
-        v-model="selected"
-      />
+    <div>
+      <div style="margin: 36px; max-width: 480px; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;">
+        <StorybookComponent
+          v-for="service in services"
+          :key="service"
+          :id="'service-' + service"
+          name="services"
+          :type="type"
+          :label="service"
+          :true-value="service"
+          :multiple-options="type === 'checkbox'"
+          :is-pill="isPill"
+          :field-has-error="fieldHasError"
+          :display-as-disc="displayAsDisc"
+          :direction="direction"
+          v-model="selected"
+        />
+      </div>
+      <p style="margin: 0 36px; font-family: monospace;">selected: {{ JSON.stringify(selected) }}</p>
     </div>
   `,
 });
 
+const OptionGroupTemplate: StoryFn<InputCheckboxRadioButtonStoryArgs> = (args) => ({
+  components: { ServiceOptionGroup },
+  setup() {
+    return { args };
+  },
+  template: `
+    <ServiceOptionGroup
+      :key="args.type"
+      :type="args.type"
+      :is-pill="args.isPill"
+      :field-has-error="args.fieldHasError"
+      :display-as-disc="args.displayAsDisc"
+      :direction="args.direction"
+    />
+  `,
+});
+
 export const OptionGroup = OptionGroupTemplate.bind({});
+OptionGroup.argTypes = { label: { table: { disable: true } } };

package/app/components/05.forms/input-checkbox-radio/stories/InputCheckboxRadioField.stories.ts

@@ -0,0 +1,93 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed, ref } from "vue";
+import StorybookComponent from "../InputCheckboxRadioField.vue";
+import type { FormUiTheme, InputUiVariant } from "~/types/forms/types.forms.d";
+
+interface InputCheckboxRadioFieldStoryArgs {
+  type: "checkbox" | "radio";
+  name: string;
+  label: string;
+  required: boolean;
+  theme: FormUiTheme;
+  fieldHasError: boolean;
+  inputVariant: InputUiVariant;
+  labelColor: string;
+  useLabelSlot: boolean;
+}
+
+export default {
+  title: "Components/Forms/Input Checkbox Radio/InputCheckboxRadioField",
+  component: StorybookComponent,
+  argTypes: {
+    type: { control: { type: "select" }, options: ["checkbox", "radio"], table: { category: "Basic" } },
+    name: { control: "text", table: { category: "Basic" } },
+    label: { control: "text", table: { category: "Basic" } },
+    required: { control: "boolean", table: { category: "Basic" } },
+    useLabelSlot: {
+      control: "boolean",
+      description: "Use the labelContent slot (rich label with a link) instead of the label prop",
+      table: { category: "Slots" },
+    },
+    fieldHasError: { control: "boolean", description: "Rendered as data-invalid", table: { category: "States" } },
+    theme: {
+      control: { type: "select" },
+      options: ["default", "success", "error", "warning"],
+      table: { category: "Styling" },
+    },
+    inputVariant: {
+      control: { type: "select" },
+      options: ["normal", "outlined", "underlined"],
+      table: { category: "Styling" },
+    },
+    labelColor: {
+      control: "color",
+      description: "Sets --input-checkbox-label-color on the story wrapper",
+      table: { category: "Tokens" },
+    },
+  },
+  args: {
+    type: "checkbox",
+    name: "terms",
+    label: "I agree to the terms and conditions",
+    required: false,
+    theme: "default",
+    fieldHasError: false,
+    inputVariant: "normal",
+    labelColor: "",
+    useLabelSlot: false,
+  },
+} as Meta<InputCheckboxRadioFieldStoryArgs>;
+
+const Template: StoryFn<InputCheckboxRadioFieldStoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const modelValue = ref<boolean | string>(false);
+    const componentArgs = computed(() => {
+      const { labelColor: _labelColor, useLabelSlot: _useLabelSlot, ...rest } = args;
+      return rest;
+    });
+    const tokenStyles = computed(() => (args.labelColor ? { "--input-checkbox-label-color": args.labelColor } : {}));
+    return { args, componentArgs, tokenStyles, modelValue };
+  },
+  template: `
+    <div style="margin: 36px; max-width: 480px;" :style="tokenStyles">
+      <StorybookComponent v-bind="componentArgs" v-model="modelValue">
+        <template v-if="args.useLabelSlot" #labelContent>
+          I agree to the&nbsp;<a href="#terms">terms and conditions</a>
+        </template>
+      </StorybookComponent>
+      <p style="margin-top: 2rem; font-family: monospace;">modelValue: {{ JSON.stringify(modelValue) }}</p>
+    </div>
+  `,
+});
+
+export const Checkbox = Template.bind({});
+
+export const RichLabel = Template.bind({});
+RichLabel.args = { useLabelSlot: true };
+
+export const Underlined = Template.bind({});
+Underlined.args = { inputVariant: "underlined" };
+
+export const ErrorState = Template.bind({});
+ErrorState.args = { fieldHasError: true, theme: "error" };

package/app/components/05.forms/input-checkbox-radio/tests/InputCheckboxRadio.spec.ts

@@ -0,0 +1,174 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import InputCheckboxRadio from "../InputCheckboxRadio.vue";
+
+const defaultProps = {
+  type: "checkbox" as const,
+  id: "test-checkbox",
+  name: "testName",
+  trueValue: "checked",
+  falseValue: "unchecked",
+  modelValue: "unchecked",
+};
+
+const createWrapper = (props = {}, slots = {}) =>
+  mountSuspended(InputCheckboxRadio, {
+    attachTo: document.body,
+    props: { ...defaultProps, ...props },
+    slots,
+  });
+
+const inputOf = (wrapper: Awaited<ReturnType<typeof createWrapper>>) => wrapper.find("input").element as HTMLInputElement;
+
+describe("InputCheckboxRadio", () => {
+  describe("rendering", () => {
+    it("renders the native input with id, name and type", async () => {
+      const wrapper = await createWrapper();
+      const input = wrapper.find("input");
+
+      expect(input.attributes("type")).toBe("checkbox");
+      expect(input.attributes("id")).toBe("test-checkbox");
+      expect(input.attributes("name")).toBe("testName");
+      expect(input.classes()).toEqual(["input-checkbox-radio-input"]);
+    });
+
+    it("renders state as data attributes, not bare classes", async () => {
+      const wrapper = await createWrapper({ type: "radio", inputVariant: "underlined", theme: "success" });
+      const root = wrapper.find(".input-checkbox-radio");
+
+      expect(root.classes()).toEqual(["input-checkbox-radio"]);
+      expect(root.attributes("data-type")).toBe("radio");
+      expect(root.attributes("data-input-variant")).toBe("underlined");
+      expect(root.attributes("data-theme")).toBe("success");
+      expect(root.attributes("data-button")).toBeUndefined();
+      expect(root.attributes("data-display-as-disc")).toBeUndefined();
+      expect(root.attributes("data-invalid")).toBeUndefined();
+    });
+
+    it("renders data-button and data-display-as-disc when set", async () => {
+      const wrapper = await createWrapper({ isButton: true, displayAsDisc: true });
+      const root = wrapper.find(".input-checkbox-radio");
+
+      expect(root.attributes("data-button")).toBe("");
+      expect(root.attributes("data-display-as-disc")).toBe("");
+    });
+
+    it("applies and updates styleClassPassthrough", async () => {
+      const wrapper = await createWrapper({ styleClassPassthrough: "first" });
+      expect(wrapper.find(".input-checkbox-radio").classes()).toContain("first");
+
+      await wrapper.setProps({ styleClassPassthrough: "second" });
+      const classes = wrapper.find(".input-checkbox-radio").classes();
+      expect(classes).toContain("second");
+      expect(classes).not.toContain("first");
+    });
+  });
+
+  describe("icons", () => {
+    it("renders a default icon in the icon slot", async () => {
+      const wrapper = await createWrapper();
+
+      expect(wrapper.find(".input-checkbox-radio-icon-slot .input-checkbox-radio-icon").exists()).toBe(true);
+    });
+
+    it("replaces the default icon with the checkedIcon slot", async () => {
+      const wrapper = await createWrapper({}, { checkedIcon: `<span class="custom-check">✓</span>` });
+      const slot = wrapper.find(".input-checkbox-radio-icon-slot");
+
+      expect(slot.find(".custom-check").exists()).toBe(true);
+      expect(slot.find(".input-checkbox-radio-icon").exists()).toBe(false);
+    });
+  });
+
+  describe("checked state", () => {
+    it("reflects a single checkbox value", async () => {
+      const wrapper = await createWrapper({ modelValue: "unchecked" });
+      expect(inputOf(wrapper).checked).toBe(false);
+
+      await wrapper.setProps({ modelValue: "checked" });
+      expect(inputOf(wrapper).checked).toBe(true);
+    });
+
+    it("reflects membership of an array model", async () => {
+      const wrapper = await createWrapper({ trueValue: "option1", multipleOptions: true, modelValue: [] });
+      expect(inputOf(wrapper).checked).toBe(false);
+
+      await wrapper.setProps({ modelValue: ["option1"] });
+      expect(inputOf(wrapper).checked).toBe(true);
+    });
+
+    it("reflects a radio value", async () => {
+      const wrapper = await createWrapper({ type: "radio", trueValue: "option1", modelValue: "" });
+      expect(inputOf(wrapper).checked).toBe(false);
+
+      await wrapper.setProps({ modelValue: "option1" });
+      expect(inputOf(wrapper).checked).toBe(true);
+    });
+
+    it("emits the true and false values when toggled", async () => {
+      const wrapper = await createWrapper({ modelValue: "unchecked" });
+      const input = wrapper.find("input");
+
+      await input.setValue(true);
+      expect(wrapper.emitted("update:modelValue")!.at(-1)).toEqual(["checked"]);
+
+      await input.setValue(false);
+      expect(wrapper.emitted("update:modelValue")!.at(-1)).toEqual(["unchecked"]);
+    });
+
+    it("toggles its value in an array model", async () => {
+      const wrapper = await createWrapper({ trueValue: "b", multipleOptions: true, modelValue: ["a"] });
+
+      await wrapper.find("input").setValue(true);
+      expect(wrapper.emitted("update:modelValue")!.at(-1)).toEqual([["a", "b"]]);
+    });
+
+    it("uses the radio model handler after type switches from checkbox to radio", async () => {
+      const wrapper = await createWrapper({ modelValue: ["other"], multipleOptions: true, trueValue: "picked" });
+      await wrapper.setProps({ type: "radio", modelValue: "" });
+
+      const input = wrapper.find("input");
+      expect(input.attributes("type")).toBe("radio");
+
+      inputOf(wrapper).checked = true;
+      await input.trigger("change");
+
+      expect(wrapper.emitted("update:modelValue")!.at(-1)).toEqual(["picked"]);
+    });
+  });
+
+  describe("accessibility", () => {
+    it("does not set aria-checked on the native input", async () => {
+      const wrapper = await createWrapper({ modelValue: "checked" });
+
+      expect(wrapper.find("input").attributes("aria-checked")).toBeUndefined();
+    });
+
+    it("sets aria-describedby only when given", async () => {
+      const without = await createWrapper();
+      expect(without.find("input").attributes("aria-describedby")).toBeUndefined();
+
+      const withId = await createWrapper({ ariaDescribedby: "description-id" });
+      expect(withId.find("input").attributes("aria-describedby")).toBe("description-id");
+    });
+
+    it("sets aria-invalid and data-invalid when the field has an error", async () => {
+      const wrapper = await createWrapper({ fieldHasError: true });
+
+      expect(wrapper.find("input").attributes("aria-invalid")).toBe("true");
+      expect(wrapper.find(".input-checkbox-radio").attributes("data-invalid")).toBe("");
+    });
+
+    it("sets native required", async () => {
+      const wrapper = await createWrapper({ required: true });
+
+      expect(wrapper.find("input").attributes("required")).toBeDefined();
+    });
+
+    it("drops native required in a multiple-options group", async () => {
+      const wrapper = await createWrapper({ required: true, multipleOptions: true, modelValue: [] });
+
+      expect(wrapper.find("input").attributes("required")).toBeUndefined();
+    });
+  });
+});

package/app/components/05.forms/input-checkbox-radio/tests/InputCheckboxRadioButton.spec.ts

@@ -0,0 +1,87 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import InputCheckboxRadioButton from "../InputCheckboxRadioButton.vue";
+
+const defaultProps = {
+  id: "service-balayage",
+  type: "checkbox" as const,
+  name: "services",
+  label: "Balayage",
+  trueValue: "balayage",
+  modelValue: [] as string[],
+  multipleOptions: true,
+};
+
+const createWrapper = (props = {}, slots = {}) =>
+  mountSuspended(InputCheckboxRadioButton, {
+    attachTo: document.body,
+    props: { ...defaultProps, ...props },
+    slots,
+  });
+
+describe("InputCheckboxRadioButton", () => {
+  it("renders a label linked to the inner control by id", async () => {
+    const wrapper = await createWrapper();
+
+    expect(wrapper.find("label.input-checkbox-radio-button").attributes("for")).toBe("service-balayage");
+    expect(wrapper.find("input").attributes("id")).toBe("service-balayage");
+  });
+
+  it("renders the label prop, or the labelContent slot in its place", async () => {
+    const plain = await createWrapper();
+    expect(plain.find(".input-checkbox-radio-button-label").text()).toBe("Balayage");
+
+    const rich = await createWrapper({}, { labelContent: `<em>Balayage</em> (from £80)` });
+    expect(rich.find(".input-checkbox-radio-button-label em").exists()).toBe(true);
+  });
+
+  it("renders state as data attributes, not bare classes", async () => {
+    const wrapper = await createWrapper({
+      isPill: true,
+      direction: "row-reverse",
+      optionsLayout: "inline",
+      fieldHasError: true,
+    });
+    const root = wrapper.find(".input-checkbox-radio-button");
+
+    expect(root.classes()).toEqual(["input-checkbox-radio-button"]);
+    expect(root.attributes("data-pill")).toBe("");
+    expect(root.attributes("data-direction")).toBe("row-reverse");
+    expect(root.attributes("data-options-layout")).toBe("inline");
+    expect(root.attributes("data-invalid")).toBe("");
+  });
+
+  it("updates data-direction when the prop changes", async () => {
+    const wrapper = await createWrapper();
+    expect(wrapper.find(".input-checkbox-radio-button").attributes("data-direction")).toBe("row");
+
+    await wrapper.setProps({ direction: "row-reverse" });
+    expect(wrapper.find(".input-checkbox-radio-button").attributes("data-direction")).toBe("row-reverse");
+  });
+
+  it("marks the inner control as a button", async () => {
+    const wrapper = await createWrapper({ displayAsDisc: true, inputVariant: "underlined" });
+    const control = wrapper.find(".input-checkbox-radio");
+
+    expect(control.attributes("data-button")).toBe("");
+    expect(control.attributes("data-display-as-disc")).toBe("");
+    expect(control.attributes("data-input-variant")).toBe("underlined");
+  });
+
+  it("renders a hidden decorator icon, replaceable by prop or slot", async () => {
+    const byDefault = await createWrapper();
+    const icon = byDefault.find(".input-checkbox-radio-button-icon .icon");
+    expect(icon.exists()).toBe(true);
+    expect(icon.attributes("aria-hidden")).toBe("true");
+
+    const bySlot = await createWrapper({}, { itemIcon: `<span class="custom-icon">+</span>` });
+    expect(bySlot.find(".input-checkbox-radio-button-icon .custom-icon").exists()).toBe(true);
+  });
+
+  it("toggles its value in the group model", async () => {
+    const wrapper = await createWrapper({ modelValue: ["cut"] });
+
+    await wrapper.find("input").setValue(true);
+    expect(wrapper.emitted("update:modelValue")!.at(-1)).toEqual([["cut", "balayage"]]);
+  });
+});

package/app/components/05.forms/input-checkbox-radio/tests/InputCheckboxRadioField.spec.ts

@@ -0,0 +1,87 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import InputCheckboxRadioField from "../InputCheckboxRadioField.vue";
+
+const defaultProps = {
+  type: "checkbox" as const,
+  name: "terms",
+  label: "I agree to the terms",
+  modelValue: false,
+};
+
+const createWrapper = (props = {}, slots = {}) =>
+  mountSuspended(InputCheckboxRadioField, {
+    attachTo: document.body,
+    props: { ...defaultProps, ...props },
+    slots,
+  });
+
+describe("InputCheckboxRadioField", () => {
+  it("renders a label linked to the inner control", async () => {
+    const wrapper = await createWrapper();
+    const label = wrapper.find("label.input-checkbox-radio-field");
+    const input = wrapper.find("input");
+
+    expect(input.attributes("id")).toBeTruthy();
+    expect(label.attributes("for")).toBe(input.attributes("id"));
+    expect(label.attributes("id")).toBeUndefined();
+  });
+
+  it("renders the label prop as text", async () => {
+    const wrapper = await createWrapper();
+
+    expect(wrapper.find(".input-checkbox-radio-field-label").text()).toBe("I agree to the terms");
+  });
+
+  it("replaces the label text with the labelContent slot", async () => {
+    const wrapper = await createWrapper({}, { labelContent: `<span class="rich">Rich <a href="#">terms</a></span>` });
+    const label = wrapper.find(".input-checkbox-radio-field-label");
+
+    expect(label.find(".rich").exists()).toBe(true);
+    expect(label.text()).not.toContain("I agree to the terms");
+  });
+
+  it("renders data-invalid instead of an error class", async () => {
+    const wrapper = await createWrapper({ fieldHasError: true });
+    const root = wrapper.find(".input-checkbox-radio-field");
+
+    expect(root.attributes("data-invalid")).toBe("");
+    expect(root.classes()).toEqual(["input-checkbox-radio-field"]);
+  });
+
+  it("forwards props to the inner control", async () => {
+    const wrapper = await createWrapper({
+      type: "radio",
+      inputVariant: "underlined",
+      theme: "warning",
+      required: true,
+      ariaDescribedby: "help",
+      trueValue: "yes",
+      modelValue: "",
+    });
+    const control = wrapper.find(".input-checkbox-radio");
+    const input = wrapper.find("input");
+
+    expect(control.attributes("data-type")).toBe("radio");
+    expect(control.attributes("data-input-variant")).toBe("underlined");
+    expect(control.attributes("data-theme")).toBe("warning");
+    expect(input.attributes("required")).toBeDefined();
+    expect(input.attributes("aria-describedby")).toBe("help");
+  });
+
+  it("emits model updates from the inner control", async () => {
+    const wrapper = await createWrapper();
+
+    await wrapper.find("input").setValue(true);
+    expect(wrapper.emitted("update:modelValue")!.at(-1)).toEqual([true]);
+  });
+
+  it("applies and updates styleClassPassthrough", async () => {
+    const wrapper = await createWrapper({ styleClassPassthrough: "first" });
+    await wrapper.setProps({ styleClassPassthrough: ["second"] });
+    const classes = wrapper.find(".input-checkbox-radio-field").classes();
+
+    expect(classes).toContain("second");
+    expect(classes).not.toContain("first");
+  });
+});