srcdev-nuxt-components 9.6.10 → 9.6.11

package/app/components/05.forms/triple-toggle-switch/stories/TripleToggleSwitch.stories.ts

@@ -1,104 +0,0 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { ref } from "vue";
-import StorybookComponent from "../TripleToggleSwitch.vue";
-import type { IFormMultipleOptions } from "~/types/forms/types.forms.d";
-
-interface TripleToggleSwitchStoryArgs {
-  name: string;
-  ariaLabel: string;
-  stepAnimationDuration: string;
-}
-
-// TripleToggleSwitch keys its marker gradients off three option *values*: "system", "light",
-// "dark" (see CONSUMER-STYLING.md). This story uses exactly those values so each gradient fires;
-// any other value falls back to --triple-toggle-switch-marker-surface. DisplayThemeSwitch is the
-// real-world consumer and adds the useSettingsStore wiring on top.
-export default {
-  title: "Components/Forms/Triple Toggle Switch/TripleToggleSwitch",
-  component: StorybookComponent,
-  argTypes: {
-    name: { control: "text", table: { category: "Basic" } },
-    ariaLabel: {
-      control: "text",
-      description: "Accessible name for the radiogroup",
-      table: { category: "Accessibility" },
-    },
-    stepAnimationDuration: {
-      control: "text",
-      description: "CSS transition duration for the marker sliding between options",
-      table: { category: "Styling" },
-    },
-  },
-  args: {
-    name: "colour-scheme",
-    ariaLabel: "Colour scheme",
-    stepAnimationDuration: "250ms",
-  },
-} as Meta<TripleToggleSwitchStoryArgs>;
-
-const buildOptions = (): IFormMultipleOptions => ({
-  data: [
-    { id: "system", name: "colour-scheme", value: "system", label: "System", icon: "material-symbols:night-sight-auto-sharp" },
-    { id: "light", name: "colour-scheme", value: "light", label: "Light", icon: "radix-icons:sun" },
-    { id: "dark", name: "colour-scheme", value: "dark", label: "Dark", icon: "radix-icons:moon" },
-  ],
-  total: 3,
-  skip: 0,
-  limit: 3,
-});
-
-const Template: StoryFn<TripleToggleSwitchStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    const modelValue = ref("system");
-    const fieldData = ref<IFormMultipleOptions>(buildOptions());
-    return { args, modelValue, fieldData };
-  },
-  template: `
-    <div style="margin: 36px;">
-      <StorybookComponent
-        v-model="modelValue"
-        v-model:field-data="fieldData"
-        :name="args.name"
-        :aria-label="args.ariaLabel"
-        :step-animation-duration="args.stepAnimationDuration"
-      />
-      <div style="margin-top: 1.6rem; font-size: 1.4rem;">Current value: {{ modelValue }}</div>
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-
-const CustomTokensTemplate: StoryFn<TripleToggleSwitchStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    const modelValue = ref("light");
-    const fieldData = ref<IFormMultipleOptions>(buildOptions());
-    return { args, modelValue, fieldData };
-  },
-  template: `
-    <div
-      style="
-        margin: 36px;
-        --triple-toggle-switch-gap: 0.4rem;
-        --triple-toggle-switch-padding: 0.4rem;
-        --triple-toggle-switch-icon-size: 1.6rem;
-        --triple-toggle-switch-marker-gradient-system: linear-gradient(135deg, #0ea5e9, #6366f1);
-        --triple-toggle-switch-marker-gradient-light: linear-gradient(135deg, #facc15, #f97316);
-        --triple-toggle-switch-marker-gradient-dark: linear-gradient(135deg, #1e293b, #475569);
-      "
-    >
-      <StorybookComponent
-        v-model="modelValue"
-        v-model:field-data="fieldData"
-        :name="args.name"
-        :aria-label="args.ariaLabel"
-        :step-animation-duration="args.stepAnimationDuration"
-      />
-      <div style="margin-top: 1.6rem; font-size: 1.4rem;">Current value: {{ modelValue }}</div>
-    </div>
-  `,
-});
-
-export const CustomTokens = CustomTokensTemplate.bind({});

package/app/components/05.forms/triple-toggle-switch/tests/TripleToggleSwitch.spec.ts

@@ -1,138 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
-import { nextTick } from "vue";
-import TripleToggleSwitch from "../TripleToggleSwitch.vue";
-import type { IFormMultipleOptions } from "~/types/forms/types.forms";
-
-const buildOptions = (): IFormMultipleOptions => ({
-  data: [
-    { id: "system", name: "scheme", value: "system", label: "System", icon: "radix-icons:gear" },
-    { id: "light", name: "scheme", value: "light", label: "Light", icon: "radix-icons:sun" },
-    { id: "dark", name: "scheme", value: "dark", label: "Dark", icon: "radix-icons:moon" },
-  ],
-  total: 3,
-  skip: 0,
-  limit: 3,
-});
-
-const mountSwitch = (props: Record<string, unknown> = {}) =>
-  mountSuspended(TripleToggleSwitch, {
-    props: {
-      modelValue: "system",
-      fieldData: buildOptions(),
-      ...props,
-    },
-  });
-
-interface TripleToggleSwitchInstance {
-  selectedOptionIndex: number;
-}
-
-describe("TripleToggleSwitch", () => {
-  it("mounts without error", async () => {
-    const wrapper = await mountSwitch();
-    expect(wrapper.vm).toBeTruthy();
-    expect(wrapper.find(".triple-toggle-switch").exists()).toBe(true);
-  });
-
-  it("renders one radio per option with matching id, value and shared name", async () => {
-    const wrapper = await mountSwitch({ name: "colour-scheme" });
-    const inputs = wrapper.findAll("input.option-input");
-    expect(inputs).toHaveLength(3);
-    expect(inputs.map((i) => i.attributes("id"))).toEqual(["system", "light", "dark"]);
-    expect(inputs.map((i) => (i.element as HTMLInputElement).value)).toEqual(["system", "light", "dark"]);
-    inputs.forEach((i) => {
-      expect(i.attributes("type")).toBe("radio");
-      expect(i.attributes("name")).toBe("colour-scheme");
-    });
-  });
-
-  it("uses the default name when none is passed", async () => {
-    const wrapper = await mountSwitch();
-    expect(wrapper.find("input.option-input").attributes("name")).toBe("triple-toggle-switch");
-  });
-
-  it("links each label to its radio and renders the label text for screen readers", async () => {
-    const wrapper = await mountSwitch();
-    const labels = wrapper.findAll("label.option-group");
-    expect(labels.map((l) => l.attributes("for"))).toEqual(["system", "light", "dark"]);
-    expect(wrapper.findAll(".option-group .sr-only").map((s) => s.text())).toEqual(["System", "Light", "Dark"]);
-  });
-
-  it("exposes the options as a radiogroup", async () => {
-    const wrapper = await mountSwitch();
-    const group = wrapper.find(".option-group-wrapper");
-    expect(group.attributes("role")).toBe("radiogroup");
-    expect(group.attributes("aria-label")).toBeUndefined();
-  });
-
-  it("applies ariaLabel to the radiogroup", async () => {
-    const wrapper = await mountSwitch({ ariaLabel: "Colour scheme" });
-    expect(wrapper.find(".option-group-wrapper").attributes("aria-label")).toBe("Colour scheme");
-  });
-
-  it("checks the radio matching modelValue", async () => {
-    const wrapper = await mountSwitch({ modelValue: "light" });
-    const checked = wrapper.findAll("input.option-input").map((i) => (i.element as HTMLInputElement).checked);
-    expect(checked).toEqual([false, true, false]);
-  });
-
-  it("emits update:modelValue when another option is chosen", async () => {
-    const wrapper = await mountSwitch();
-    await wrapper.findAll("input.option-input")[2]!.setValue(true);
-    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual(["dark"]);
-  });
-
-  it("marks only the selected option's icon as active", async () => {
-    const wrapper = await mountSwitch({ modelValue: "dark" });
-    const icons = wrapper.findAll(".option-icon");
-    expect(icons).toHaveLength(3);
-    expect(icons.map((i) => i.classes().includes("active"))).toEqual([false, false, true]);
-    expect(icons[0]!.classes()).toContain("system");
-  });
-
-  it("updates the active icon when modelValue changes", async () => {
-    const wrapper = await mountSwitch();
-    await wrapper.setProps({ modelValue: "light" });
-    const icons = wrapper.findAll(".option-icon");
-    expect(icons[1]!.classes()).toContain("active");
-    expect(icons[0]!.classes()).not.toContain("active");
-  });
-
-  it("omits the icon when an option has none", async () => {
-    const options = buildOptions();
-    delete options.data[1]!.icon;
-    const wrapper = await mountSwitch({ fieldData: options });
-    expect(wrapper.findAll(".option-icon")).toHaveLength(2);
-  });
-
-  it("computes the selected option index, falling back to 0 for an unknown value", async () => {
-    const wrapper = await mountSwitch({ modelValue: "dark" });
-    const vm = wrapper.vm as unknown as TripleToggleSwitchInstance;
-    expect(vm.selectedOptionIndex).toBe(2);
-    await wrapper.setProps({ modelValue: "unknown" });
-    expect(vm.selectedOptionIndex).toBe(0);
-  });
-
-  it("shows the marker only after the mount delay", async () => {
-    const wrapper = await mountSwitch();
-    const marker = wrapper.find(".selected-option-marker");
-    expect(marker.classes()).not.toContain("show");
-    vi.advanceTimersByTime(300);
-    await nextTick();
-    await nextTick();
-    expect(wrapper.find(".selected-option-marker").classes()).toContain("show");
-  });
-
-  it("applies the theme as data-theme", async () => {
-    const wrapper = await mountSwitch({ theme: "success" });
-    expect(wrapper.find(".triple-toggle-switch").attributes("data-theme")).toBe("success");
-  });
-
-  it("applies styleClassPassthrough classes to the root", async () => {
-    const wrapper = await mountSwitch({ styleClassPassthrough: ["small", "extra"] });
-    const root = wrapper.find(".triple-toggle-switch");
-    expect(root.classes()).toContain("small");
-    expect(root.classes()).toContain("extra");
-  });
-});