srcdev-nuxt-components 9.4.10 → 9.4.12

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

@@ -83,7 +83,7 @@ export default {
     // Styling
     theme: {
       control: { type: "select" },
-      options: ["primary", "secondary", "tertiary", "ghost", "error", "success", "warning"],
+      options: ["default", "success", "error", "warning"],
       description: "Toggle switch theme",
       table: {
         category: "Styling",

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

@@ -64,7 +64,7 @@ export default {
     // Styling
     theme: {
       control: { type: "select" },
-      options: ["primary", "secondary", "tertiary", "ghost", "error", "success", "warning"],
+      options: ["default", "success", "error", "warning"],
       description: "Toggle switch theme",
       table: {
         category: "Styling",
@@ -243,7 +243,7 @@ export const InlineFormExample: StoryFn = () => ({
           name="darkMode"
           label="Dark mode"
           label-weight="normal"
-          theme="secondary"
+          theme="default"
         />
 
         <StorybookComponent

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

@@ -0,0 +1,101 @@
+// 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/variants/ToggleSwitchWithLabel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="toggle-switch-with-label" :class="[elementClasses]" :data-theme="theme">
+  <div class="toggle-switch-with-label" :class="[elementClasses]" :data-theme="formUiTheme">
     <InputLabel
       :id
       :for="toggleSwitchId"
@@ -68,7 +68,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const slots = useSlots();
 
-const FormUiTheme = computed(() => {
+const formUiTheme = computed(() => {
   return props.fieldHasError ? "error" : props.theme;
 });
 
@@ -84,15 +84,13 @@ const ariaDescribedby = computed(() => {
   return props.fieldHasError ? errorId.value : ariaDescribedbyId;
 });
 
-const modelValue = defineModel<string | number | boolean>();
+const modelValue = defineModel<string | number | boolean>({ required: true });
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 </script>
 
 <style lang="css">
 @layer components {
 .toggle-switch-with-label {
-  --_transition-duration: 0.4s;
-
   .toggle-switch-label {
     display: block;
   }

package/app/components/05.forms/toggle-switch/variants/ToggleSwitchWithLabelInline.vue

@@ -63,14 +63,13 @@ const labelWeightClass = computed(() => {
   return labelWeightClassMap[props.labelWeight] || "body-normal-semibold";
 });
 
-const modelValue = defineModel<string | number | boolean>();
+const modelValue = defineModel<string | number | boolean>({ required: true });
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 </script>
 
 <style lang="css">
 @layer components {
 .toggle-switch-with-label-inline {
-  --_transition-duration: 0.4s;
   display: flex;
   align-items: center;
   gap: 12px;

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

@@ -0,0 +1,77 @@
+// 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";
+
+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 the description slot", async () => {
+    wrapper = await wrapperFactory({}, { description: () => "Turn this on to receive notifications" });
+    expect(wrapper.text()).toContain("Turn this on to receive notifications");
+  });
+
+  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();
+  });
+});

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

@@ -0,0 +1,66 @@
+// 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();
+  });
+});

package/app/components/05.forms/triple-toggle-switch/CONSUMER-STYLING.md

@@ -13,11 +13,11 @@ the shared `--theme-*` token every other themed component also falls back to. Se
 | `--triple-toggle-switch-border` | `var(--theme-border)` | Wrapper border colour |
 | `--triple-toggle-switch-ring-focus` | `var(--theme-ring)` | Wrapper outline colour on `:focus-visible` |
 | `--triple-toggle-switch-marker-surface` | `var(--theme-input-surface)` | Selected-option marker background, when none of the `system`/`light`/`dark` `:has()` overrides below match |
-| `--triple-toggle-switch-marker-border` | `light-dark(var(--slate-10), var(--slate-00))` | Selected-option marker border colour |
-| `--triple-toggle-switch-option-border` | `light-dark(#00000025, #ffffff50)` | Each option's resting border colour |
-| `--triple-toggle-switch-option-border-hover` | `light-dark(var(--slate-10), var(--slate-00))` | Each option's outline colour on hover |
+| `--triple-toggle-switch-marker-border` | `var(--slate-10)` | Selected-option marker border colour |
+| `--triple-toggle-switch-option-border` | `#00000025` | Each option's resting border colour |
+| `--triple-toggle-switch-option-border-hover` | `var(--slate-10)` | Each option's outline colour on hover |
 | `--triple-toggle-switch-option-ring-focus` | `var(--theme-ring)` | Each option's outline colour on `:focus-visible` |
-| `--triple-toggle-switch-option-icon-color` | `light-dark(var(--slate-10), var(--slate-03))` | Option icon colour, resting (shared by the `.system`/`.light`/`.dark` selectors — see note) |
+| `--triple-toggle-switch-option-icon-color` | `var(--slate-10)` | Option icon colour, resting (shared by the `.system`/`.light`/`.dark` selectors — see note) |
 | `--triple-toggle-switch-option-icon-color-active` | `var(--slate-00)` | Option icon colour, selected |
 
 > **Two bugs fixed in this migration**:

package/app/components/05.forms/triple-toggle-switch/TripleToggleSwitchCore.vue

@@ -193,7 +193,7 @@ onMounted(() => {
         background-color: var(--_select-scheme-group-background-color);
         background-image: var(--_select-scheme-group-background-image);
         border: var(--form-element-border-width) solid
-          var(--triple-toggle-switch-marker-border, light-dark(var(--slate-10), var(--slate-00)));
+          var(--triple-toggle-switch-marker-border, var(--slate-10));
 
         border-radius: 50%;
 
@@ -227,7 +227,7 @@ onMounted(() => {
         place-content: center;
         background: transparent;
         border: var(--form-element-border-width) solid
-          var(--triple-toggle-switch-option-border, light-dark(#00000025, #ffffff50));
+          var(--triple-toggle-switch-option-border, #00000025);
         outline: var(--form-element-outline-width) solid transparent;
         border-radius: 50%;
         padding: var(--_select-scheme-group-padding);
@@ -237,7 +237,7 @@ onMounted(() => {
 
         &:has(.option-icon:hover) {
           outline: var(--form-element-outline-width) solid
-            var(--triple-toggle-switch-option-border-hover, light-dark(var(--slate-10), var(--slate-00)));
+            var(--triple-toggle-switch-option-border-hover, var(--slate-10));
         }
         &:has(input:focus-visible) {
           outline: var(--form-element-outline-width) solid var(--triple-toggle-switch-option-ring-focus, var(--theme-ring));
@@ -257,7 +257,7 @@ onMounted(() => {
           font-size: var(--_scheme-icon-font-size);
 
           &.system {
-            color: var(--triple-toggle-switch-option-icon-color, light-dark(var(--slate-10), var(--slate-03)));
+            color: var(--triple-toggle-switch-option-icon-color, var(--slate-10));
 
             &.active {
               color: var(--triple-toggle-switch-option-icon-color-active, var(--slate-00));
@@ -265,7 +265,7 @@ onMounted(() => {
           }
 
           &.light {
-            color: var(--triple-toggle-switch-option-icon-color, light-dark(var(--slate-10), var(--slate-03)));
+            color: var(--triple-toggle-switch-option-icon-color, var(--slate-10));
 
             &.active {
               color: var(--triple-toggle-switch-option-icon-color-active, var(--slate-00));
@@ -273,7 +273,7 @@ onMounted(() => {
           }
 
           &.dark {
-            color: var(--triple-toggle-switch-option-icon-color, light-dark(var(--slate-10), var(--slate-03)));
+            color: var(--triple-toggle-switch-option-icon-color, var(--slate-10));
 
             &.active {
               color: var(--triple-toggle-switch-option-icon-color-active, var(--slate-00));

package/app/types/components/index.ts

@@ -20,3 +20,4 @@ export * from "./display-tooltip-defined.d"
 export * from "./marquee-scroller.d"
 export * from "./rotating-carousel-image.d"
 export * from "./skip-links.d"
+export * from "./select-menu.d"

package/app/types/components/select-menu.d.ts

@@ -0,0 +1,5 @@
+export interface SelectMenuOption {
+  value: string | number
+  label: string
+  icon?: string
+}

package/package.json

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

package/.vscode/srcdev-component-toggle-switch-core.code-snippets

@@ -1,13 +0,0 @@
-{
-  "SRCDEV ToggleSwitchCore": {
-    "description": "ToggleSwitchCore — bare toggle switch (no label, use ToggleSwitchWithLabel for that)",
-    "scope": "vue,html",
-    "body": [
-      "<ToggleSwitchCore",
-      "  v-model=\"$1modelValue\"",
-      "  id=\"$2toggle-id\"",
-      "  name=\"$3toggleName\"",
-      "/>"
-    ]
-  }
-}