srcdev-nuxt-components 9.6.7 → 9.6.9

package/app/components/05.forms/toggle-switch/{ToggleSwitchCore.vue → ToggleSwitch.vue}

@@ -1,29 +1,36 @@
 <template>
-  <div class="toggle-switch-core" :class="elementClasses" :data-theme="formUiTheme">
-    <div class="toggle-switch-wrapper" :class="wrapperClasses()" @click="toggleSwitchValue">
+  <div
+    class="toggle-switch"
+    :class="elementClasses"
+    :data-theme="formUiTheme"
+    :data-checked="isChecked ? '' : null"
+    :data-invalid="fieldHasError ? '' : null"
+  >
+    <div class="toggle-switch-wrapper" @click="toggleFromTrack">
       <input
         :id="inputId"
         v-model="modelValue"
+        class="toggle-switch-input"
         type="checkbox"
+        role="switch"
         :true-value
         :false-value
-        :aria-invalid="fieldHasError"
+        :aria-invalid="fieldHasError ? 'true' : undefined"
         :aria-describedby="ariaDescribedby || undefined"
         :name
         :required
-        :checked="isChecked"
       />
-      <div class="symbol-wrapper">
-        <div class="symbol" :class="symbolClasses">
-          <div class="symbol-icon icon-on" :class="{ active: isChecked }">
+      <div class="toggle-switch-track" aria-hidden="true">
+        <div class="toggle-switch-thumb">
+          <div class="toggle-switch-icon toggle-switch-icon-on">
             <slot name="iconOn">
-              <Icon name="material-symbols:circle-outline" class="icon" />
+              <Icon name="material-symbols:circle-outline" />
             </slot>
           </div>
 
-          <div class="symbol-icon icon-off" :class="{ active: !isChecked }">
+          <div class="toggle-switch-icon toggle-switch-icon-off">
             <slot name="iconOff">
-              <Icon name="material-symbols:circle-outline" class="icon" />
+              <Icon name="material-symbols:circle-outline" />
             </slot>
           </div>
         </div>
@@ -59,74 +66,51 @@ const props = withDefaults(defineProps<Props>(), {
   ariaDescribedby: "",
 });
 
-const slots = useSlots();
-const useDefaultIcons = () => !slots.iconOn && !slots.iconOff;
-
-const formUiTheme = computed(() => {
-  return props.fieldHasError ? "error" : props.theme;
-});
-
-const roundedRadiusDefault = computed(() => (props.round ? "100vw" : "0.4rem"));
-
 const modelValue = defineModel<string | number | boolean>({ required: true });
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
+const formUiTheme = computed(() => (props.fieldHasError ? "error" : props.theme));
+const roundedRadiusDefault = computed(() => (props.round ? "100vw" : "0.4rem"));
 const inputId = computed(() => `toggle-switch-${props.id}`);
+const isChecked = computed(() => modelValue.value === props.trueValue);
 
-const isChecked = computed(() => {
-  return modelValue.value === props.trueValue;
-});
-
-// Optimized class computeds to reduce template reactivity
-const wrapperClasses = () => ({
-  "use-default-icons": useDefaultIcons(),
-});
+// Clicks on the input itself (including a label click or Space) are handled by v-model.
+const toggleFromTrack = (event: MouseEvent) => {
+  if ((event.target as HTMLElement).tagName === "INPUT") return;
+  modelValue.value = isChecked.value ? props.falseValue : props.trueValue;
+};
 
-const symbolClasses = computed(() => ({
-  checked: isChecked.value,
-}));
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
-const toggleSwitchValue = () => {
-  modelValue.value = modelValue.value === props.trueValue ? props.falseValue : props.trueValue;
-};
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
 </script>
 
 <style lang="css">
 @layer components {
-  .toggle-switch-core {
-    .toggle-switch-label {
-      display: block;
-    }
-
+  .toggle-switch {
     .toggle-switch-wrapper {
       --_border-radius: var(--toggle-switch-border-radius, v-bind(roundedRadiusDefault));
 
       display: flex;
       flex-direction: column;
 
-      input {
+      .toggle-switch-input {
         height: 0;
         width: 0;
         opacity: 0;
 
-        &:focus-visible {
-          + .symbol-wrapper {
-            outline: var(--form-element-outline-width-focus) solid var(--toggle-switch-border-focus, var(--theme-border-focus));
-            outline-offset: var(--form-element-outline-offset-focus);
-          }
+        &:focus-visible + .toggle-switch-track {
+          outline: var(--form-element-outline-width-focus) solid var(--toggle-switch-border-focus, var(--theme-border-focus));
+          outline-offset: var(--form-element-outline-offset-focus);
         }
       }
 
-      .symbol-wrapper {
-        /* Geometry */
-
-        /* Track width has no direct public token — it's derived from the same geometry tokens
-         that size the thumb, so the track always scales with --input-toggle-symbol-size instead
-         of clipping/floating it. Breakdown at the default 0.1rem tokens (= 72px total):
-         2×symbol-size (6rem) + 2×form-element-border-width (0.2rem, wrapper border) +
-         2×wrapper-padding (0.2rem) + 3×symbol-outline-width (0.3rem) +
-         3×symbol-border-width (0.3rem) + 2×symbol-margin (0.2rem). Override
-         --toggle-switch-track-width directly if you need a value the formula doesn't produce. */
+      .toggle-switch-track {
+        /* Track width scales with the thumb: 2 thumbs plus every border, outline, padding and margin around them. */
         --_track-width: var(
           --toggle-switch-track-width,
           calc(
@@ -144,10 +128,8 @@ const toggleSwitchValue = () => {
           background-color var(--theme-form-transition-duration) linear,
           border-color var(--theme-form-transition-duration) linear,
           outline var(--theme-form-transition-duration) linear,
-          outline-offset var(--theme-form-transition-duration) linear,
-          outline var(--theme-form-transition-duration) linear;
+          outline-offset var(--theme-form-transition-duration) linear;
 
-        /* UI */
         background-color: var(--toggle-switch-surface, var(--theme-checkbox-symbol-surface));
         border: var(--form-element-border-width) solid var(--toggle-switch-border, var(--theme-border));
         outline: var(--form-element-outline-width) solid transparent;
@@ -160,18 +142,14 @@ const toggleSwitchValue = () => {
           cursor: pointer;
         }
 
-        .symbol {
-          /* Geometry */
-
+        .toggle-switch-thumb {
           display: inline-grid;
           grid-template-areas: "icon";
           place-content: center;
           overflow: hidden;
           translate: 0 0;
-
           aspect-ratio: 1/1;
 
-          /* UI */
           border: var(--input-toggle-symbol-border-width) solid var(--toggle-switch-symbol-border, var(--theme-text));
           outline: var(--input-toggle-symbol-outline-width) solid transparent;
           border-radius: var(--_border-radius);
@@ -180,7 +158,11 @@ const toggleSwitchValue = () => {
             translate 0.4s ease,
             background-color 0.4s linear;
 
-          &.checked {
+          @media (prefers-reduced-motion: reduce) {
+            transition: none;
+          }
+
+          .toggle-switch[data-checked] & {
             background-color: var(--toggle-switch-symbol-surface-on, var(--theme-surface));
             translate: calc(
                 var(--input-toggle-symbol-size) + var(--input-toggle-symbol-border-width) +
@@ -189,9 +171,7 @@ const toggleSwitchValue = () => {
               0;
           }
 
-          .symbol-icon {
-            /* Geometry */
-
+          .toggle-switch-icon {
             display: grid;
             grid-area: icon;
             place-content: center;
@@ -199,7 +179,6 @@ const toggleSwitchValue = () => {
             line-height: 0;
             opacity: 0;
 
-            /* UI */
             width: var(--input-toggle-symbol-size);
             height: var(--input-toggle-symbol-size);
             margin: var(--input-toggle-symbol-margin);
@@ -207,21 +186,27 @@ const toggleSwitchValue = () => {
               opacity var(--theme-form-transition-duration),
               color var(--theme-form-transition-duration);
 
-            &.icon-on {
+            &.toggle-switch-icon-on {
               color: var(--toggle-switch-icon-on-color, var(--theme-on-surface));
-            }
 
-            &.icon-off {
-              color: var(--toggle-switch-icon-off-color, var(--theme-surface));
+              .toggle-switch[data-checked] & {
+                opacity: 1;
+              }
             }
 
-            &.active {
+            &.toggle-switch-icon-off {
+              color: var(--toggle-switch-icon-off-color, var(--theme-surface));
               opacity: 1;
+
+              .toggle-switch[data-checked] & {
+                opacity: 0;
+              }
             }
           }
         }
       }
     }
+
   }
 }
 </style>

package/app/components/05.forms/toggle-switch/{ToggleSwitchWithLabel.vue → ToggleSwitchField.vue}

@@ -1,11 +1,17 @@
 <template>
-  <div class="toggle-switch-with-label" :class="[elementClasses]" :data-theme="formUiTheme">
+  <div
+    class="toggle-switch-field"
+    :class="elementClasses"
+    :data-theme="formUiTheme"
+    :data-layout="layout"
+    :data-invalid="fieldHasError ? '' : null"
+  >
     <InputLabel
       :id="toggleSwitchId"
       indicator="none"
       input-variant="normal"
       :field-has-error
-      :style-class-passthrough="['input-switch-label', 'input-text-label', 'body-normal-bold']"
+      :style-class-passthrough="['toggle-switch-label', 'input-text-label', labelWeightClass]"
     >
       <template #textLabel>{{ label }}</template>
     </InputLabel>
@@ -22,7 +28,8 @@
         <slot name="descriptionText"></slot>
       </template>
     </InputDescription>
-    <ToggleSwitchCore
+
+    <ToggleSwitch
       :id
       v-model="modelValue"
       :name
@@ -41,17 +48,20 @@
       <template v-if="slots.iconOff" #iconOff>
         <slot name="iconOff"></slot>
       </template>
-    </ToggleSwitchCore>
+    </ToggleSwitch>
+
     <InputError :id="errorId" :error-message :show-error="fieldHasError" :is-detached="true" />
   </div>
 </template>
 
 <script setup lang="ts">
-import type { FormUiTheme } from "~/types/forms/types.forms";
+import type { FormUiTheme, LabelWeight } from "~/types/forms/types.forms";
 
 interface Props {
   name: string;
   label: string;
+  layout?: "stacked" | "inline";
+  labelWeight?: LabelWeight;
   required?: boolean;
   errorMessage?: object | string;
   fieldHasError?: boolean;
@@ -63,6 +73,8 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  layout: "stacked",
+  labelWeight: undefined,
   required: false,
   errorMessage: "",
   fieldHasError: false,
@@ -75,21 +87,24 @@ const props = withDefaults(defineProps<Props>(), {
 
 const slots = useSlots();
 
-const formUiTheme = computed(() => {
-  return props.fieldHasError ? "error" : props.theme;
-});
+const formUiTheme = computed(() => (props.fieldHasError ? "error" : props.theme));
 
-const id = useId();
+const labelWeightClassMap: Record<LabelWeight, string> = {
+  bold: "body-normal-bold",
+  "semi-bold": "body-normal-semibold",
+  normal: "body-normal",
+};
+
+const labelWeightClass = computed(
+  () => labelWeightClassMap[props.labelWeight ?? (props.layout === "inline" ? "normal" : "bold")]
+);
 
-// Performance-optimized computed properties to avoid template string interpolation
+const id = useId();
 const toggleSwitchId = computed(() => `toggle-switch-${id}`);
 const descriptionId = computed(() => `${id}-description`);
 const errorId = computed(() => `${id}-error-message`);
 
-// A plain function, like useAriaDescribedById's: slots aren't reactive, so a computed would keep
-// its first answer if a description slot is added or removed after mount (CLAUDE.md pitfall #25).
-// Lists both ids when there's a description and an error, so the description is still announced
-// while the field is invalid.
+// A plain function, not a computed: slots aren't reactive (CLAUDE.md pitfall #25).
 const ariaDescribedby = () => {
   const ids: string[] = [];
   if (slots.descriptionText || slots.descriptionHtml) ids.push(descriptionId.value);
@@ -98,15 +113,46 @@ const ariaDescribedby = () => {
 };
 
 const modelValue = defineModel<string | number | boolean>({ required: true });
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
 </script>
 
 <style lang="css">
 @layer components {
-.toggle-switch-with-label {
-  .toggle-switch-label {
-    display: block;
+  .toggle-switch-field {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+
+    .toggle-switch-label {
+      display: block;
+    }
+
+    &[data-layout="inline"] {
+      display: grid;
+      grid-template-columns: minmax(0, max-content) auto;
+      align-items: center;
+      justify-content: start;
+      column-gap: var(--toggle-switch-field-inline-gap, 1.2rem);
+
+      > * {
+        grid-column: 1 / -1;
+      }
+
+      > .toggle-switch-label {
+        grid-area: 1 / 1;
+      }
+
+      > .toggle-switch {
+        grid-area: 1 / 2;
+      }
+    }
   }
 }
-}
 </style>

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

@@ -0,0 +1,148 @@
+import { computed, ref } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import ToggleSwitch from "../ToggleSwitch.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { FormUiTheme } from "~/types/forms/types.forms.d";
+import type { MediaCanvas } from "~/types/components";
+
+interface StoryArgs {
+  modelValue: string | number | boolean;
+  id: string;
+  name: string;
+  required: boolean;
+  fieldHasError: boolean;
+  trueValue: string | number | boolean;
+  falseValue: string | number | boolean;
+  theme: FormUiTheme;
+  round: boolean;
+  styleClassPassthrough: string[];
+  useCustomIcons: boolean;
+}
+
+const meta: Meta<StoryArgs> = {
+  title: "Components/Forms/Toggle Switch/ToggleSwitch",
+  component: ToggleSwitch,
+  argTypes: {
+    modelValue: { control: "boolean", table: { category: "Model" } },
+    id: { control: "text", table: { category: "Basic" } },
+    name: { control: "text", table: { category: "Basic" } },
+    required: { control: "boolean", table: { category: "Validation" } },
+    fieldHasError: { control: "boolean", table: { category: "Validation" } },
+    trueValue: { control: "text", table: { category: "Values" } },
+    falseValue: { control: "text", table: { category: "Values" } },
+    theme: {
+      control: { type: "select" },
+      options: ["default", "success", "error", "warning"],
+      table: { category: "Styling" },
+    },
+    round: { control: "boolean", table: { category: "Styling" } },
+    styleClassPassthrough: { control: "object", table: { category: "Styling" } },
+    useCustomIcons: {
+      control: "boolean",
+      description: "Story-only: fills the iconOn/iconOff slots",
+      table: { category: "Slots" },
+    },
+  },
+  args: {
+    modelValue: false,
+    id: "notifications",
+    name: "notifications",
+    required: false,
+    fieldHasError: false,
+    trueValue: true,
+    falseValue: false,
+    theme: "default",
+    round: true,
+    styleClassPassthrough: [],
+    useCustomIcons: false,
+  },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "Bare on/off switch: a visually hidden native checkbox with `role=\"switch\"` and a decorative track and thumb. No label (use `ToggleSwitchField`, or give it your own `<label for=\"toggle-switch-{id}\">`). `v-model` toggles between `trueValue` and `falseValue`; `iconOn`/`iconOff` slots replace the thumb icons. Clicking the track or the input, a label click and Space all toggle it once.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+const render = (args: StoryArgs) => ({
+  components: { ToggleSwitch },
+  setup() {
+    const componentArgs = computed(() => {
+      const { modelValue: _modelValue, useCustomIcons: _useCustomIcons, ...rest } = args;
+      return rest;
+    });
+    return { args, componentArgs };
+  },
+  template: `
+    <label :for="'toggle-switch-' + args.id" style="display: block; margin-block-end: 0.8rem;">Email notifications</label>
+    <ToggleSwitch v-model="args.modelValue" v-bind="componentArgs">
+      <template v-if="args.useCustomIcons" #iconOn><Icon name="mdi:check" /></template>
+      <template v-if="args.useCustomIcons" #iconOff><Icon name="mdi:close" /></template>
+    </ToggleSwitch>
+    <p style="margin-block-start: 1.6rem; font-family: monospace;">modelValue: {{ JSON.stringify(args.modelValue) }}</p>
+  `,
+});
+
+export const Default: Story = { render };
+
+export const WithCustomIcons: Story = { args: { useCustomIcons: true }, render };
+
+export const ErrorState: Story = { args: { fieldHasError: true }, render };
+
+export const SquareShape: Story = {
+  args: { round: false },
+  render,
+  parameters: { docs: { description: { story: "`round: false` gives a rounded-square track and thumb." } } },
+};
+
+export const StringValues: Story = {
+  args: { modelValue: "off", trueValue: "on", falseValue: "off" },
+  render,
+  parameters: { docs: { description: { story: "`v-model` toggles between the strings `\"on\"` and `\"off\"`." } } },
+};
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: { modelValue: "neither", trueValue: 1, falseValue: 0, fieldHasError: true, useCustomIcons: true },
+  render: (args: StoryArgs) => ({
+    ...render(args),
+    template: `
+      <div style="--input-toggle-symbol-size: 4.8rem;">${render(args).template}</div>
+      <div style="--input-toggle-symbol-size: 1.2rem; margin-block-start: 1.6rem;">
+        <ToggleSwitch id="tiny" v-model="args.modelValue" name="tiny" :true-value="1" :false-value="0" />
+      </div>
+    `,
+  }),
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "A model value that is neither `trueValue` nor `falseValue` (shows as off; the first click turns it on), numeric values, the error state and custom icons, at an oversized and a tiny thumb size. Check at every canvas width: the track stays inside the dashed outline and scales with the thumb, the icons stay centred, and both switches share one value.",
+      },
+    },
+  },
+};