srcdev-nuxt-components 9.6.8 → 9.6.10

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

@@ -1,81 +0,0 @@
-<template>
-  <div class="toggle-switch-with-label-inline" :class="[elementClasses]" :data-theme="theme">
-    <InputLabel
-      :id="toggleSwitchId"
-      indicator="none"
-      input-variant="normal"
-      :style-class-passthrough="['input-switch-label', 'input-text-label', labelWeightClass]"
-    >
-      <template #textLabel>{{ label }}</template>
-    </InputLabel>
-
-    <ToggleSwitchCore :id v-model="modelValue" :name :true-value :false-value :theme :round>
-      <template v-if="slots.iconOn" #iconOn>
-        <slot name="iconOn"></slot>
-      </template>
-
-      <template v-if="slots.iconOff" #iconOff>
-        <slot name="iconOff"></slot>
-      </template>
-    </ToggleSwitchCore>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { FormUiTheme, LabelWeight } from "~/types/forms/types.forms";
-
-interface Props {
-  name: string;
-  label: string;
-  labelWeight?: LabelWeight;
-  trueValue?: string | number | boolean;
-  falseValue?: string | number | boolean;
-  styleClassPassthrough?: string | string[];
-  theme?: FormUiTheme;
-  round?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  labelWeight: "normal",
-  trueValue: true,
-  falseValue: false,
-  styleClassPassthrough: () => [],
-  theme: "default",
-  round: true,
-});
-
-const slots = useSlots();
-const id = useId();
-
-// Performance-optimized computed property to avoid template string interpolation
-const toggleSwitchId = computed(() => `toggle-switch-${id}`);
-
-// Optimized labelWeight mapping using object lookup for better performance
-const labelWeightClassMap: Record<LabelWeight, string> = {
-  bold: "body-normal-bold",
-  "semi-bold": "body-normal-semibold",
-  normal: "body-normal",
-};
-
-const labelWeightClass = computed(() => {
-  return labelWeightClassMap[props.labelWeight] || "body-normal-semibold";
-});
-
-const modelValue = defineModel<string | number | boolean>({ required: true });
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-</script>
-
-<style lang="css">
-@layer components {
-.toggle-switch-with-label-inline {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-
-  .toggle-switch-label {
-    display: block;
-    white-space: nowrap;
-  }
-}
-}
-</style>

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

@@ -1,251 +0,0 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { computed, 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;
-  symbolSize: 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: ["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",
-      },
-    },
-
-    // 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",
-      },
-    },
-    symbolSize: {
-      control: { type: "select" },
-      options: ["2rem", "2.2rem", "2.4rem", "3rem", "3.6rem"],
-      description:
-        "`--input-toggle-symbol-size` — thumb size. Track width has no separate control: it's derived from this token (see ToggleSwitchCore's `--_track-width` comment), so it scales automatically.",
-      table: {
-        category: "Styling",
-      },
-    },
-  },
-} as Meta<ToggleSwitchCoreStoryArgs>;
-
-const Template: StoryFn<ToggleSwitchCoreStoryArgs> = (_args, { argTypes }) => ({
-  components: { StorybookComponent },
-  props: Object.keys(argTypes),
-  setup() {
-    const modelValue = ref(false);
-    const cssTokenStyle = computed(() => ({
-      "--input-toggle-symbol-size": _args.symbolSize,
-    }));
-    return { args: _args, modelValue, cssTokenStyle };
-  },
-  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"
-      :style="cssTokenStyle"
-    >
-      <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: "✗",
-  symbolSize: "3rem",
-};
-
-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/05.forms/toggle-switch/stories/ToggleSwitchWithLabel.stories.ts

@@ -1,251 +0,0 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import { ref } from "vue";
-import StorybookComponent from "../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: ["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",
-      },
-    },
-
-    // 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" #descriptionText>{{ args.descriptionContent }}</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",
-};