srcdev-nuxt-components 9.6.7 → 9.6.9

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

@@ -1,283 +0,0 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { ref } from "vue";
-import StorybookComponent from "../ToggleSwitchWithLabelInline.vue";
-import type { FormUiTheme, LabelWeight } from "~/types/forms/types.forms.d";
-
-interface ToggleSwitchWithLabelInlineStoryArgs {
-  name: string;
-  label: string;
-  labelWeight: LabelWeight;
-  trueValue: string | number | boolean;
-  falseValue: string | number | boolean;
-  styleClassPassthrough: string[];
-  theme: FormUiTheme;
-  round: boolean;
-  useCustomIcons: boolean;
-  iconOnContent: string;
-  iconOffContent: string;
-}
-
-export default {
-  title: "Components/Forms/Toggle Switch/ToggleSwitchWithLabelInline",
-  component: StorybookComponent,
-  argTypes: {
-    // Basic Configuration
-    name: {
-      control: "text",
-      description: "Name attribute for the toggle switch",
-      table: {
-        category: "Basic",
-      },
-    },
-    label: {
-      control: "text",
-      description: "Label text for the toggle switch",
-      table: {
-        category: "Basic",
-      },
-    },
-    labelWeight: {
-      control: { type: "select" },
-      options: ["normal", "semi-bold", "bold"],
-      description: "Font weight for the label",
-      table: {
-        category: "Basic",
-      },
-    },
-
-    // Values
-    trueValue: {
-      control: "text",
-      description: "Value when toggle is on/checked",
-      table: {
-        category: "Values",
-      },
-    },
-    falseValue: {
-      control: "text",
-      description: "Value when toggle is off/unchecked",
-      table: {
-        category: "Values",
-      },
-    },
-
-    // Styling
-    theme: {
-      control: { type: "select" },
-      options: ["default", "success", "error", "warning"],
-      description: "Toggle switch theme",
-      table: {
-        category: "Styling",
-      },
-    },
-    round: {
-      control: "boolean",
-      description: "Whether the toggle switch is rounded",
-      table: {
-        category: "Styling",
-      },
-    },
-    styleClassPassthrough: {
-      control: "object",
-      description: "Additional CSS classes",
-      table: {
-        category: "Styling",
-      },
-    },
-
-    // Icons
-    useCustomIcons: {
-      control: "boolean",
-      description: "Use custom icons instead of default",
-      table: {
-        category: "Icons",
-      },
-    },
-    iconOnContent: {
-      control: "text",
-      description: "Content for the 'on' icon slot",
-      table: {
-        category: "Icons",
-      },
-    },
-    iconOffContent: {
-      control: "text",
-      description: "Content for the 'off' icon slot",
-      table: {
-        category: "Icons",
-      },
-    },
-  },
-} as Meta<ToggleSwitchWithLabelInlineStoryArgs>;
-
-const Template: StoryFn<ToggleSwitchWithLabelInlineStoryArgs> = (_args, { argTypes }) => ({
-  components: { StorybookComponent },
-  props: Object.keys(argTypes),
-  setup() {
-    const modelValue = ref(false);
-    return { args: _args, modelValue };
-  },
-  template: `
-    <StorybookComponent
-      v-model="modelValue"
-      :name="args.name"
-      :label="args.label"
-      :label-weight="args.labelWeight"
-      :true-value="args.trueValue"
-      :false-value="args.falseValue"
-      :style-class-passthrough="args.styleClassPassthrough"
-      :theme="args.theme"
-      :round="args.round"
-    >
-      <template v-if="args.useCustomIcons" #iconOn>
-        <span v-html="args.iconOnContent"></span>
-      </template>
-      <template v-if="args.useCustomIcons" #iconOff>
-        <span v-html="args.iconOffContent"></span>
-      </template>
-    </StorybookComponent>
-    <div style="margin-top: 1rem; font-size: 0.875rem; color: #666;">
-      Current value: {{ modelValue }}
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  name: "toggleInline",
-  label: "Enable notifications",
-  labelWeight: "normal",
-  trueValue: true,
-  falseValue: false,
-  styleClassPassthrough: [],
-  theme: "default",
-  round: true,
-  useCustomIcons: false,
-  iconOnContent: "✓",
-  iconOffContent: "✗",
-};
-
-export const WithCustomIcons = Template.bind({});
-WithCustomIcons.args = {
-  ...Default.args,
-  name: "toggleInlineCustomIcons",
-  label: "Dark mode",
-  useCustomIcons: true,
-  iconOnContent:
-    '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>',
-  iconOffContent:
-    '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>',
-};
-
-export const BoldLabel = Template.bind({});
-BoldLabel.args = {
-  ...Default.args,
-  name: "toggleInlineBold",
-  label: "Important setting",
-  labelWeight: "bold",
-};
-
-export const SemiBoldLabel = Template.bind({});
-SemiBoldLabel.args = {
-  ...Default.args,
-  name: "toggleInlineSemiBold",
-  label: "Feature toggle",
-  labelWeight: "semi-bold",
-};
-
-export const StringValues = Template.bind({});
-StringValues.args = {
-  ...Default.args,
-  name: "toggleInlineStringValues",
-  label: "Email preferences",
-  trueValue: "enabled",
-  falseValue: "disabled",
-};
-
-export const InlineFormExample: StoryFn = () => ({
-  components: { StorybookComponent },
-  setup() {
-    const preferences = ref({
-      notifications: true,
-      autoSave: false,
-      darkMode: true,
-      soundEffects: false,
-      showTips: true,
-    });
-
-    const handleReset = () => {
-      Object.keys(preferences.value).forEach((key) => {
-        preferences.value[key as keyof typeof preferences.value] = false;
-      });
-    };
-
-    const handleSelectAll = () => {
-      Object.keys(preferences.value).forEach((key) => {
-        preferences.value[key as keyof typeof preferences.value] = true;
-      });
-    };
-
-    return { preferences, handleReset, handleSelectAll };
-  },
-  template: `
-    <div style="max-width: 400px; padding: 1rem; border: 1px solid #ddd; border-radius: 8px;">
-      <h3 style="margin: 0 0 1rem 0;">App Preferences</h3>
-
-      <div style="display: flex; flex-direction: column; gap: 1rem;">
-        <StorybookComponent
-          v-model="preferences.notifications"
-          name="notifications"
-          label="Push notifications"
-          label-weight="semi-bold"
-        />
-
-        <StorybookComponent
-          v-model="preferences.autoSave"
-          name="autoSave"
-          label="Auto-save documents"
-          label-weight="normal"
-        />
-
-        <StorybookComponent
-          v-model="preferences.darkMode"
-          name="darkMode"
-          label="Dark mode"
-          label-weight="normal"
-          theme="default"
-        />
-
-        <StorybookComponent
-          v-model="preferences.soundEffects"
-          name="soundEffects"
-          label="Sound effects"
-          label-weight="normal"
-        />
-
-        <StorybookComponent
-          v-model="preferences.showTips"
-          name="showTips"
-          label="Show helpful tips"
-          label-weight="normal"
-          theme="success"
-        />
-      </div>
-
-      <div style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #eee; display: flex; gap: 0.5rem;">
-        <button @click="handleSelectAll" type="button" style="padding: 0.5rem 1rem; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.875rem;">
-          Select All
-        </button>
-        <button @click="handleReset" type="button" style="padding: 0.5rem 1rem; background: #6c757d; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.875rem;">
-          Reset All
-        </button>
-      </div>
-
-      <div style="margin-top: 1rem; font-size: 0.875rem; color: #666;">
-        <strong>Current settings:</strong><br>
-        <pre style="font-size: 0.75rem; background: #f5f5f5; padding: 0.5rem; border-radius: 4px; margin-top: 0.5rem;">{{ JSON.stringify(preferences, null, 2) }}</pre>
-      </div>
-    </div>
-  `,
-});
-
-// Fixed showcase: hardcoded values, so Controls would do nothing here.
-InlineFormExample.parameters = { controls: { disable: true } };

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

@@ -1,101 +0,0 @@
-// 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 "../ToggleSwitchCore.vue";
-
-const initialPropsData = {
-  id: "test-toggle",
-  name: "testName",
-  modelValue: false,
-};
-
-let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
-const wrapperFactory = (propsData = {}) => {
-  const mockPropsData = { ...initialPropsData, ...propsData };
-
-  return mountSuspended(ComponentUnderTest, {
-    attachTo: document.body,
-    props: mockPropsData,
-  });
-};
-
-describe("ToggleSwitchCore", () => {
-  it("mounts without error", async () => {
-    wrapper = await wrapperFactory();
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  it("binds v-model to the checkbox checked state", async () => {
-    wrapper = await wrapperFactory({ modelValue: true });
-    const input = wrapper.find<HTMLInputElement>("input[type='checkbox']");
-    expect(input.element.checked).toBe(true);
-  });
-
-  it("toggles modelValue when the wrapper is clicked", async () => {
-    wrapper = await wrapperFactory({ modelValue: false });
-    await wrapper.find(".toggle-switch-wrapper").trigger("click");
-    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual([true]);
-  });
-
-  it("toggles between custom trueValue/falseValue", async () => {
-    wrapper = await wrapperFactory({ modelValue: "off", trueValue: "on", falseValue: "off" });
-    await wrapper.find(".toggle-switch-wrapper").trigger("click");
-    expect(wrapper.emitted("update:modelValue")?.at(-1)).toEqual(["on"]);
-  });
-
-  it("sets required attribute when required is true", async () => {
-    wrapper = await wrapperFactory({ required: true });
-    expect(wrapper.find("input").attributes("required")).toBeDefined();
-  });
-
-  it("does not set required attribute by default", async () => {
-    wrapper = await wrapperFactory();
-    expect(wrapper.find("input").attributes("required")).toBeUndefined();
-  });
-
-  it("sets data-theme from the theme prop", async () => {
-    wrapper = await wrapperFactory({ theme: "success" });
-    expect(wrapper.find(".toggle-switch-core").attributes("data-theme")).toBe("success");
-  });
-
-  it("sets data-theme to error and aria-invalid when fieldHasError is true, overriding theme", async () => {
-    wrapper = await wrapperFactory({ fieldHasError: true, theme: "success" });
-    expect(wrapper.find(".toggle-switch-core").attributes("data-theme")).toBe("error");
-    expect(wrapper.find("input").attributes("aria-invalid")).toBe("true");
-  });
-
-  it("applies styleClassPassthrough to the root element", async () => {
-    wrapper = await wrapperFactory({ styleClassPassthrough: ["custom-toggle-class"] });
-    expect(wrapper.find(".toggle-switch-core").classes()).toContain("custom-toggle-class");
-  });
-
-  it("renders default icons when no icon slots are provided", async () => {
-    wrapper = await wrapperFactory();
-    expect(wrapper.find(".toggle-switch-wrapper").classes()).toContain("use-default-icons");
-  });
-
-  it("renders custom icon slot content instead of the default icon", async () => {
-    wrapper = await mountSuspended(ComponentUnderTest, {
-      attachTo: document.body,
-      props: initialPropsData,
-      slots: {
-        iconOn: () => "ON",
-        iconOff: () => "OFF",
-      },
-    });
-    expect(wrapper.find(".toggle-switch-wrapper").classes()).not.toContain("use-default-icons");
-    expect(wrapper.find(".icon-on").text()).toBe("ON");
-    expect(wrapper.find(".icon-off").text()).toBe("OFF");
-  });
-
-  it("consumes round as a declared prop instead of leaking it as a DOM attribute", async () => {
-    wrapper = await wrapperFactory({ round: false });
-    expect(wrapper.props("round")).toBe(false);
-    expect(wrapper.attributes("round")).toBeUndefined();
-  });
-
-  it("defaults round to true", async () => {
-    wrapper = await wrapperFactory();
-    expect(wrapper.props("round")).toBe(true);
-  });
-});

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

@@ -1,133 +0,0 @@
-// 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 "../ToggleSwitchWithLabel.vue";
-import { defineComponent, nextTick, ref } from "vue";
-
-const initialPropsData = {
-  name: "notifications",
-  label: "Enable notifications",
-  errorMessage: "",
-  modelValue: false,
-};
-
-let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
-const wrapperFactory = (propsData = {}, slots = {}) => {
-  const mockPropsData = { ...initialPropsData, ...propsData };
-
-  return mountSuspended(ComponentUnderTest, {
-    attachTo: document.body,
-    props: mockPropsData,
-    slots,
-  });
-};
-
-describe("ToggleSwitchWithLabel", () => {
-  it("mounts without error", async () => {
-    wrapper = await wrapperFactory();
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  it("renders the label text", async () => {
-    wrapper = await wrapperFactory({ label: "Enable dark mode" });
-    expect(wrapper.text()).toContain("Enable dark mode");
-  });
-
-  it("renders a checkbox input", async () => {
-    wrapper = await wrapperFactory();
-    expect(wrapper.find("input[type='checkbox']").exists()).toBe(true);
-  });
-
-  it("associates the label with the checkbox via matching for/id", async () => {
-    wrapper = await wrapperFactory();
-    const inputId = wrapper.find("input[type='checkbox']").attributes("id");
-    expect(wrapper.find("label").attributes("for")).toBe(inputId);
-  });
-
-  it("renders the error message when fieldHasError is true", async () => {
-    wrapper = await wrapperFactory({ fieldHasError: true, errorMessage: "You must accept" });
-    expect(wrapper.text()).toContain("You must accept");
-  });
-
-  it("renders descriptionText through InputDescription", async () => {
-    wrapper = await wrapperFactory({}, { descriptionText: () => "Turn this on to receive notifications" });
-    const description = wrapper.find(".input-description.toggle-switch-description");
-    expect(description.exists()).toBe(true);
-    expect(description.find(".input-description-text").text()).toBe("Turn this on to receive notifications");
-  });
-
-  it("renders descriptionHtml through InputDescription", async () => {
-    wrapper = await wrapperFactory({}, { descriptionHtml: () => "Rich description" });
-    expect(wrapper.find(".toggle-switch-description .input-description-html").text()).toBe("Rich description");
-  });
-
-  it("renders no description element without a description slot", async () => {
-    wrapper = await wrapperFactory();
-    expect(wrapper.find(".input-description").exists()).toBe(false);
-  });
-
-  it("no longer renders the removed description slot", async () => {
-    wrapper = await wrapperFactory({}, { description: () => "Old slot content" });
-    expect(wrapper.text()).not.toContain("Old slot content");
-  });
-
-  it("forwards required to the underlying input", async () => {
-    wrapper = await wrapperFactory({ required: true });
-    expect(wrapper.find("input").attributes("required")).toBeDefined();
-  });
-
-  it("applies the error theme to ToggleSwitchCore when fieldHasError is true", async () => {
-    wrapper = await wrapperFactory({ fieldHasError: true, theme: "default" });
-    expect(wrapper.find(".toggle-switch-core").attributes("data-theme")).toBe("error");
-  });
-
-  it("applies styleClassPassthrough to the root element", async () => {
-    wrapper = await wrapperFactory({ styleClassPassthrough: ["custom-toggle"] });
-    expect(wrapper.find(".toggle-switch-with-label").classes()).toContain("custom-toggle");
-  });
-
-  it("forwards round to ToggleSwitchCore without leaking it as a DOM attribute", async () => {
-    wrapper = await wrapperFactory({ round: false });
-    const core = wrapper.findComponent({ name: "ToggleSwitchCore" });
-    expect(core.props("round")).toBe(false);
-    expect(wrapper.find(".toggle-switch-core").attributes("round")).toBeUndefined();
-  });
-
-  it("points aria-describedby at the description once it appears after mount", async () => {
-    const Host = defineComponent({
-      components: { ComponentUnderTest },
-      setup() {
-        return { modelValue: ref(false), showDescription: ref(false) };
-      },
-      template: `
-        <ComponentUnderTest v-model="modelValue" name="notifications" label="Enable notifications" error-message="">
-          <template v-if="showDescription" #descriptionText>Sends at most one email a week.</template>
-        </ComponentUnderTest>
-      `,
-    });
-    const host = await mountSuspended(Host);
-    const input = () => host.find("input[type='checkbox']");
-    expect(input().attributes("aria-describedby")).toBeFalsy();
-    (host.vm as unknown as { showDescription: boolean }).showDescription = true;
-    await nextTick();
-    expect(input().attributes("aria-describedby")).toMatch(/-description$/);
-  });
-
-  it("points aria-describedby at the error message when the field has an error", async () => {
-    wrapper = await wrapperFactory({ fieldHasError: true, errorMessage: "Required" });
-    expect(wrapper.find("input[type='checkbox']").attributes("aria-describedby")).toMatch(/-error-message$/);
-  });
-
-  it("points aria-describedby at both the description and the error when both are present", async () => {
-    wrapper = await wrapperFactory(
-      { fieldHasError: true, errorMessage: "Required" },
-      { descriptionText: () => "Sends at most one email a week." }
-    );
-    const describedBy = wrapper.find("input[type='checkbox']").attributes("aria-describedby") ?? "";
-    const ids = describedBy.split(" ");
-    expect(ids).toHaveLength(2);
-    expect(ids[0]).toMatch(/-description$/);
-    expect(ids[1]).toMatch(/-error-message$/);
-    expect(wrapper.find(`[id="${ids[0]}"]`).exists()).toBe(true);
-  });
-});

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

@@ -1,66 +0,0 @@
-// 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 "../ToggleSwitchWithLabelInline.vue";
-
-const initialPropsData = {
-  name: "notifications",
-  label: "Enable notifications",
-  modelValue: false,
-};
-
-let wrapper: VueWrapper<InstanceType<typeof ComponentUnderTest>>;
-const wrapperFactory = (propsData = {}, slots = {}) => {
-  const mockPropsData = { ...initialPropsData, ...propsData };
-
-  return mountSuspended(ComponentUnderTest, {
-    attachTo: document.body,
-    props: mockPropsData,
-    slots,
-  });
-};
-
-describe("ToggleSwitchWithLabelInline", () => {
-  it("mounts without error", async () => {
-    wrapper = await wrapperFactory();
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  it("renders the label text", async () => {
-    wrapper = await wrapperFactory({ label: "Dark mode" });
-    expect(wrapper.text()).toContain("Dark mode");
-  });
-
-  it("renders a checkbox input", async () => {
-    wrapper = await wrapperFactory();
-    expect(wrapper.find("input[type='checkbox']").exists()).toBe(true);
-  });
-
-  it("associates the label with the checkbox via matching for/id", async () => {
-    wrapper = await wrapperFactory();
-    const inputId = wrapper.find("input[type='checkbox']").attributes("id");
-    expect(wrapper.find("label").attributes("for")).toBe(inputId);
-  });
-
-  it("defaults labelWeight to normal", async () => {
-    wrapper = await wrapperFactory();
-    expect(wrapper.find(".input-switch-label").classes()).toContain("body-normal");
-  });
-
-  it("maps labelWeight to the matching body-* class", async () => {
-    wrapper = await wrapperFactory({ labelWeight: "bold" });
-    expect(wrapper.find(".input-switch-label").classes()).toContain("body-normal-bold");
-  });
-
-  it("applies styleClassPassthrough to the root element", async () => {
-    wrapper = await wrapperFactory({ styleClassPassthrough: ["custom-toggle-inline"] });
-    expect(wrapper.find(".toggle-switch-with-label-inline").classes()).toContain("custom-toggle-inline");
-  });
-
-  it("forwards round to ToggleSwitchCore without leaking it as a DOM attribute", async () => {
-    wrapper = await wrapperFactory({ round: false });
-    const core = wrapper.findComponent({ name: "ToggleSwitchCore" });
-    expect(core.props("round")).toBe(false);
-    expect(wrapper.find(".toggle-switch-core").attributes("round")).toBeUndefined();
-  });
-});