srcdev-nuxt-components 8.0.3 → 9.0.1

package/app/components/forms/toggle-switch/ToggleSwitchCore.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="toggle-switch-core" :class="elementClasses" :data-theme="theme">
+    <div class="toggle-switch-wrapper" :class="wrapperClasses" :for="inputId" @click="toggleSwitchValue">
+      <input
+        :id="inputId"
+        v-model="modelValue"
+        type="checkbox"
+        :true-value
+        :false-value
+        :aria-invalid="fieldHasError"
+        :aria-describedby="ariaDescribedbyId"
+        :name
+        :required
+        :checked="isChecked"
+      />
+      <div class="symbol-wrapper">
+        <div class="symbol" :class="symbolClasses">
+          <div class="symbol-icon icon-on" :class="{ active: isChecked }">
+            <slot name="iconOn">
+              <Icon name="material-symbols:circle-outline" class="icon" />
+            </slot>
+          </div>
+
+          <div class="symbol-icon icon-off" :class="{ active: !isChecked }">
+            <slot name="iconOff">
+              <Icon name="material-symbols:circle-outline" class="icon" />
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FormUiTheme } from "~/types/forms/types.forms";
+
+interface Props {
+  id: string;
+  name: string;
+  required?: boolean;
+  fieldHasError?: boolean;
+  trueValue?: string | number | boolean;
+  falseValue?: string | number | boolean;
+  styleClassPassthrough?: string | string[];
+  theme?: FormUiTheme;
+  ariaDescribedby?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  required: false,
+  fieldHasError: false,
+  trueValue: true,
+  falseValue: false,
+  styleClassPassthrough: () => [],
+  theme: "default",
+  ariaDescribedby: "",
+});
+
+const slots = useSlots();
+const useDefaultIcons = computed(() => !slots.iconOn && !slots.iconOff);
+
+const FormUiTheme = computed(() => {
+  return props.fieldHasError ? "error" : props.theme;
+});
+
+const modelValue = defineModel<string | number | boolean>();
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const inputId = computed(() => `toggle-switch-${props.id}`);
+const ariaDescribedbyId = computed(() => `${props.id}-description`);
+
+const isChecked = computed(() => {
+  return modelValue.value === props.trueValue;
+});
+
+// Optimized class computeds to reduce template reactivity
+const wrapperClasses = computed(() => ({
+  "use-default-icons": useDefaultIcons.value,
+}));
+
+const symbolClasses = computed(() => ({
+  checked: isChecked.value,
+}));
+
+const toggleSwitchValue = () => {
+  modelValue.value = modelValue.value === props.trueValue ? props.falseValue : props.trueValue;
+};
+</script>
+
+<style lang="css">
+@layer components {
+.toggle-switch-core {
+  .toggle-switch-label {
+    display: block;
+  }
+
+  .toggle-switch-wrapper {
+    --_icon-on-opacity: 0;
+    --_icon-off-opacity: 1;
+    --_icon-font-size: 2.4rem;
+    --_symbol-background-color: var(--blue-10);
+    --_symbol-margin-inline-start: 0;
+    --_symbol-checked-offset: calc(var(--input-toggle-symbol-size) * 0.75);
+
+    /* New vars */
+    --_switch-padding: 0.2rem;
+    --_toggle-symbol-border-width: 0.1rem;
+
+    display: flex;
+    flex-direction: column;
+
+    input {
+      height: 0;
+      width: 0;
+      opacity: 0;
+
+      &:focus-visible {
+        + .symbol-wrapper {
+          outline: var(--form-element-outline-width-focus) solid var(--theme-input-outline-focus);
+          outline-offset: var(--form-element-outline-offset-focus);
+        }
+      }
+    }
+
+    .symbol-wrapper {
+      /* Geometry */
+      display: inline-flex;
+      align-items: center;
+      justify-content: start;
+      position: relative;
+      transition:
+        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;
+
+      /* UI */
+      background-color: var(--theme-checkbox-symbol-surface);
+      border: var(--form-element-border-width) solid var(--theme-input-border);
+      outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+      border-radius: 100vw;
+      width: 72px;
+      padding: calc(var(--input-toggle-wrapper-padding) + var(--input-toggle-symbol-outline-width));
+
+      &:hover {
+        background-color: var(--theme-toggle-wrapper-surface-color-hover);
+        cursor: pointer;
+      }
+
+      .symbol {
+        /* Geometry */
+
+        display: inline-grid;
+        grid-template-areas: "icon";
+        place-content: center;
+        /* position: absolute; */
+        overflow: hidden;
+        translate: 0 0;
+
+        aspect-ratio: 1/1;
+
+        /* UI */
+        /* padding: calc(calc(var(--input-toggle-symbol-size) - var(--_icon-font-size)) / 2); */
+        border: var(--input-toggle-symbol-border-width) solid var(--theme-checkbox-symbol-color);
+        outline: var(--input-toggle-symbol-outline-width) solid var(--theme-input-outline, red);
+        border-radius: 100vw;
+        background-color: var(--theme-toggle-symbol-color-default);
+        transition:
+          translate 0.4s ease,
+          background-color 0.4s linear;
+
+        &.checked {
+          background-color: var(--theme-toggle-symbol-color-checked);
+          /* left: calc(
+            100% - var(--input-toggle-symbol-size) - var(--_switch-padding) - (2 * var(--_toggle-symbol-border-width))
+          ); */
+          /* translate: calc(var(--input-toggle-symbol-size) / 2) 0; */
+          /* translate: 1.6rem 0; */
+          translate: calc(
+              var(--input-toggle-symbol-size) + var(--input-toggle-symbol-border-width) +
+                var(--input-toggle-symbol-outline-width)
+            )
+            0;
+        }
+
+        .symbol-icon {
+          /* Geometry */
+
+          display: grid;
+          grid-area: icon;
+          place-content: center;
+          opacity: 0;
+
+          /* UI */
+          width: var(--input-toggle-symbol-size);
+          height: var(--input-toggle-symbol-size);
+          margin: var(--input-toggle-symbol-margin);
+          transition:
+            opacity var(--theme-form-transition-duration),
+            color var(--theme-form-transition-duration);
+
+          &.icon-on {
+            color: var(--theme-toggle-symbol-color-default);
+          }
+
+          &.icon-off {
+            color: var(--theme-toggle-symbol-color-checked);
+          }
+
+          &.active {
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+}
+}
+</style>

package/app/components/forms/toggle-switch/stories/ToggleSwitchCore.stories.ts

@@ -0,0 +1,236 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { ref } from "vue";
+import StorybookComponent from "../ToggleSwitchCore.vue";
+import type { FormUiTheme } from "~/types/forms/types.forms.d";
+
+interface ToggleSwitchCoreStoryArgs {
+  id: string;
+  name: string;
+  required: boolean;
+  fieldHasError: boolean;
+  trueValue: string | number | boolean;
+  falseValue: string | number | boolean;
+  styleClassPassthrough: string[];
+  theme: FormUiTheme;
+  round: boolean;
+  ariaDescribedby: string;
+  useCustomIcons: boolean;
+  iconOnContent: string;
+  iconOffContent: string;
+}
+
+export default {
+  title: "Components/Forms/Toggle Switch/ToggleSwitchCore",
+  component: StorybookComponent,
+  argTypes: {
+    // Basic Configuration
+    id: {
+      control: "text",
+      description: "Unique identifier for the toggle switch",
+      table: {
+        category: "Basic",
+      },
+    },
+    name: {
+      control: "text",
+      description: "Name attribute for the toggle switch",
+      table: {
+        category: "Basic",
+      },
+    },
+    required: {
+      control: "boolean",
+      description: "Whether the toggle switch is required",
+      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",
+      },
+    },
+
+    // States
+    fieldHasError: {
+      control: "boolean",
+      description: "Whether the field is in error state",
+      table: {
+        category: "States",
+      },
+    },
+
+    // Styling
+    theme: {
+      control: { type: "select" },
+      options: ["primary", "secondary", "tertiary", "ghost", "error", "success", "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",
+      },
+    },
+
+    // Accessibility
+    ariaDescribedby: {
+      control: "text",
+      description: "aria-describedby attribute",
+      table: {
+        category: "Accessibility",
+      },
+    },
+
+    // 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<ToggleSwitchCoreStoryArgs>;
+
+const Template: StoryFn<ToggleSwitchCoreStoryArgs> = (_args, { argTypes }) => ({
+  components: { StorybookComponent },
+  props: Object.keys(argTypes),
+  setup() {
+    const modelValue = ref(false);
+    return { args: _args, modelValue };
+  },
+  template: `
+    <StorybookComponent
+      v-model="modelValue"
+      :id="args.id"
+      :name="args.name"
+      :required="args.required"
+      :field-has-error="args.fieldHasError"
+      :true-value="args.trueValue"
+      :false-value="args.falseValue"
+      :style-class-passthrough="args.styleClassPassthrough"
+      :theme="args.theme"
+      :round="args.round"
+      :aria-describedby="args.ariaDescribedby"
+    >
+      <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 = {
+  id: "toggle-default",
+  name: "toggleDefault",
+  required: false,
+  fieldHasError: false,
+  trueValue: true,
+  falseValue: false,
+  styleClassPassthrough: [],
+  theme: "default",
+  round: true,
+  ariaDescribedby: "",
+  useCustomIcons: false,
+  iconOnContent: "✓",
+  iconOffContent: "✗",
+};
+
+export const WithCustomIcons = Template.bind({});
+WithCustomIcons.args = {
+  ...Default.args,
+  id: "toggle-custom-icons",
+  name: "toggleCustomIcons",
+  useCustomIcons: true,
+  iconOnContent:
+    '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>',
+  iconOffContent:
+    '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>',
+};
+
+export const ErrorState = Template.bind({});
+ErrorState.args = {
+  ...Default.args,
+  id: "toggle-error",
+  name: "toggleError",
+  fieldHasError: true,
+  theme: "error",
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  ...Default.args,
+  id: "toggle-required",
+  name: "toggleRequired",
+  required: true,
+};
+
+export const SquareShape = Template.bind({});
+SquareShape.args = {
+  ...Default.args,
+  id: "toggle-square",
+  name: "toggleSquare",
+  round: false,
+};
+
+export const StringValues = Template.bind({});
+StringValues.args = {
+  ...Default.args,
+  id: "toggle-string-values",
+  name: "toggleStringValues",
+  trueValue: "enabled",
+  falseValue: "disabled",
+};
+
+export const NumericValues = Template.bind({});
+NumericValues.args = {
+  ...Default.args,
+  id: "toggle-numeric-values",
+  name: "toggleNumericValues",
+  trueValue: 1,
+  falseValue: 0,
+};

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

@@ -0,0 +1,253 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { ref } from "vue";
+import StorybookComponent from "../variants/ToggleSwitchWithLabel.vue";
+import type { FormUiTheme } from "~/types/forms/types.forms.d";
+
+interface ToggleSwitchWithLabelStoryArgs {
+  name: string;
+  label: string;
+  required: boolean;
+  errorMessage: object | string;
+  fieldHasError: boolean;
+  trueValue: string | number | boolean;
+  falseValue: string | number | boolean;
+  styleClassPassthrough: string[];
+  theme: FormUiTheme;
+  round: boolean;
+  useDescription: boolean;
+  descriptionContent: string;
+  useCustomIcons: boolean;
+  iconOnContent: string;
+  iconOffContent: string;
+}
+
+export default {
+  title: "Components/Forms/Toggle Switch/ToggleSwitchWithLabel",
+  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",
+      },
+    },
+    required: {
+      control: "boolean",
+      description: "Whether the toggle switch is required",
+      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",
+      },
+    },
+
+    // Error Handling
+    fieldHasError: {
+      control: "boolean",
+      description: "Whether the field is in error state",
+      table: {
+        category: "Error Handling",
+      },
+    },
+    errorMessage: {
+      control: "text",
+      description: "Error message to display",
+      table: {
+        category: "Error Handling",
+      },
+    },
+
+    // Styling
+    theme: {
+      control: { type: "select" },
+      options: ["primary", "secondary", "tertiary", "ghost", "error", "success", "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",
+      },
+    },
+
+    // Content Slots
+    useDescription: {
+      control: "boolean",
+      description: "Show description slot content",
+      table: {
+        category: "Content",
+      },
+    },
+    descriptionContent: {
+      control: "text",
+      description: "Description text content",
+      table: {
+        category: "Content",
+      },
+    },
+
+    // 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<ToggleSwitchWithLabelStoryArgs>;
+
+const Template: StoryFn<ToggleSwitchWithLabelStoryArgs> = (_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"
+      :required="args.required"
+      :error-message="args.errorMessage"
+      :field-has-error="args.fieldHasError"
+      :true-value="args.trueValue"
+      :false-value="args.falseValue"
+      :style-class-passthrough="args.styleClassPassthrough"
+      :theme="args.theme"
+      :round="args.round"
+    >
+      <template v-if="args.useDescription" #description>
+        <div style="color: #666; font-size: 0.875rem;">{{ args.descriptionContent }}</div>
+      </template>
+      <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: "toggleWithLabel",
+  label: "Enable notifications",
+  required: false,
+  errorMessage: "",
+  fieldHasError: false,
+  trueValue: true,
+  falseValue: false,
+  styleClassPassthrough: [],
+  theme: "default",
+  round: true,
+  useDescription: false,
+  descriptionContent: "Turn this on to receive notifications",
+  useCustomIcons: false,
+  iconOnContent: "✓",
+  iconOffContent: "✗",
+};
+
+export const WithDescription = Template.bind({});
+WithDescription.args = {
+  ...Default.args,
+  name: "toggleWithDescription",
+  label: "Enable dark mode",
+  useDescription: true,
+  descriptionContent: "Switch between light and dark themes",
+};
+
+export const WithCustomIcons = Template.bind({});
+WithCustomIcons.args = {
+  ...Default.args,
+  name: "toggleWithCustomIcons",
+  label: "Enable feature",
+  useCustomIcons: true,
+  iconOnContent:
+    '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>',
+  iconOffContent:
+    '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>',
+};
+
+export const ErrorState = Template.bind({});
+ErrorState.args = {
+  ...Default.args,
+  name: "toggleError",
+  label: "Accept terms and conditions",
+  required: true,
+  fieldHasError: true,
+  errorMessage: "You must accept the terms and conditions to continue",
+  theme: "error",
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  ...Default.args,
+  name: "toggleRequired",
+  label: "I agree to the privacy policy *",
+  required: true,
+};
+
+export const StringValues = Template.bind({});
+StringValues.args = {
+  ...Default.args,
+  name: "toggleStringValues",
+  label: "Email notifications",
+  trueValue: "enabled",
+  falseValue: "disabled",
+  useDescription: true,
+  descriptionContent: "Choose whether to receive email notifications",
+};