srcdev-nuxt-components 8.0.2 → 9.0.0

package/app/components/display-theme-switch/DisplayThemeSwitch.vue

@@ -0,0 +1,182 @@
+<template>
+  <ClientOnly>
+    <TripleToggleSwitchCore
+      v-model="colorModeVal"
+      v-model:field-data="sampleFieldData"
+      :style-class-passthrough="[`colour-scheme-select`, elementClasses]"
+    />
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import type { IFormMultipleOptions } from "~/types/forms/types.forms";
+interface Props {
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+// updateElementClasses(["colour-scheme-select"]);
+
+const sampleFieldData = ref<IFormMultipleOptions>({
+  data: [
+    {
+      id: "system",
+      name: "colorModeVal",
+      value: "system",
+      label: "System",
+      icon: "material-symbols:night-sight-auto-sharp",
+    },
+    {
+      id: "light",
+      name: "colorModeVal",
+      value: "light",
+      label: "Light",
+      icon: "radix-icons:sun",
+    },
+    {
+      id: "dark",
+      name: "colorModeVal",
+      value: "dark",
+      label: "Dark",
+      icon: "radix-icons:moon",
+    },
+  ],
+  total: 3,
+  skip: 0,
+  limit: 3,
+});
+
+const { colourScheme, setColourScheme } = useSettingsStore();
+
+const colorModeVal = ref(colourScheme);
+watch(colorModeVal, (val) => {
+  setColourScheme(val);
+});
+</script>
+
+<style lang="css">
+@layer components {
+.colour-scheme-select {
+  &.triple-toggle-switch {
+    --_form-border-colour: var(--theme-form-radio-border);
+    --_form-outline-colour: var(--theme-form-radio-outline);
+
+    --_form-items-gap: 0.4rem;
+    --_form-padding: 0.4rem;
+    --_select-scheme-group-padding: 0.4rem;
+    --_scheme-icon-font-size: 2rem;
+
+    &.small {
+      --_form-items-gap: 0.2rem;
+      --_form-padding: 0.2rem;
+      --_select-scheme-group-padding: 0.2rem;
+      --_scheme-icon-font-size: 1.6rem;
+    }
+
+    --_select-scheme-group-background-color: var(--theme-form-checkbox-bg);
+    --_select-scheme-group-background-image: none;
+
+    &:has(input[value="auto"]:checked) {
+      --_select-scheme-group-background-color: transparent;
+      --_select-scheme-group-background-image: radial-gradient(
+        circle,
+        rgb(66, 180, 58) 0%,
+        rgb(17, 199, 0) 27%,
+        rgb(8, 117, 3) 100%
+      );
+    }
+
+    &:has(input[value="light"]:checked) {
+      --_select-scheme-group-background-color: transparent;
+      --_select-scheme-group-background-image: radial-gradient(
+        circle,
+        rgba(180, 58, 91, 1) 0%,
+        rgba(253, 29, 29, 1) 27%,
+        rgba(252, 176, 69, 1) 100%
+      );
+    }
+
+    &:has(input[value="dark"]:checked) {
+      --_select-scheme-group-background-color: transparent;
+      --_select-scheme-group-background-image: radial-gradient(
+        circle,
+        rgb(50, 20, 25) 0%,
+        rgb(0, 0, 0) 27%,
+        rgb(100, 100, 100) 100%
+      );
+    }
+
+    .triple-toggle-switch-wrapper {
+      background-color: var(--theme-input-surface);
+      border: var(--form-element-border-width) solid var(--theme-input-border);
+      outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+      padding: var(--_form-padding);
+
+      &:has(input:focus-visible) {
+        outline: var(--form-element-outline-width) solid var(--theme-input-outline-hover);
+        outline-offset: 0.2rem;
+      }
+
+      .selected-option-marker-wrapper {
+        .selected-option-marker {
+          background-color: var(--_select-scheme-group-background-color);
+          background-image: var(--_select-scheme-group-background-image);
+          border: var(--form-element-border-width) solid light-dark(var(--slate-10), var(--slate-00));
+        }
+      }
+
+      .option-group-wrapper {
+        gap: var(--_form-items-gap);
+        position: relative;
+
+        .option-group {
+          border: var(--form-element-border-width) solid light-dark(#00000025, #ffffff50);
+          outline: var(--form-element-outline-width) solid transparent;
+          border-radius: 50%;
+          padding: var(--_select-scheme-group-padding);
+
+          &:has(.option-icon:hover) {
+            outline: var(--form-element-outline-width) solid light-dark(var(--slate-10), var(--slate-00));
+          }
+
+          &:has(input:focus-visible) {
+            outline: var(--form-element-outline-width) solid var(--theme-input-outline-hover);
+            outline-offset: 0.2rem;
+          }
+
+          .option-icon {
+            &.auto {
+              color: light-dark(var(--slate-10), var(--slate-03));
+
+              &.active {
+                color: var(--slate-00);
+              }
+            }
+
+            &.light {
+              color: light-dark(var(--slate-10), var(--slate-03));
+
+              &.active {
+                color: var(--slate-00);
+              }
+            }
+
+            &.dark {
+              color: light-dark(var(--slate-10), var(--slate-03));
+
+              &.active {
+                color: var(--slate-00);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+}
+</style>

package/app/components/display-theme-switch/stories/DisplayThemeSwitch.stories.ts

@@ -0,0 +1,154 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import StorybookComponent from "../DisplayThemeSwitch.vue";
+
+interface DisplayThemeSwitchStoryArgs {
+  styleClassPassthrough: string[];
+}
+
+export default {
+  title: "Components/Display/DisplayThemeSwitch",
+  component: StorybookComponent,
+  argTypes: {
+    // Styling
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes to pass through",
+      table: {
+        category: "Styling",
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A theme switching component that allows users to toggle between system, light, and dark color schemes. This component integrates with the app's color scheme settings and provides a smooth animated toggle interface.",
+      },
+    },
+  },
+} as Meta<DisplayThemeSwitchStoryArgs>;
+
+const Template: StoryFn<DisplayThemeSwitchStoryArgs> = (_args, { argTypes }) => ({
+  components: { StorybookComponent },
+  props: Object.keys(argTypes),
+  setup() {
+    return { args: _args };
+  },
+  template: `
+    <div style="padding: 2rem;">
+      <div style="margin-bottom: 1.5rem;">
+        <h3 style="margin: 0 0 0.5rem 0; font-size: 1.8rem;">Theme Selector</h3>
+        <p style="margin: 0; color: #666; font-size: 1.4rem;">
+          Choose your preferred color scheme. system mode follows your system preference.
+        </p>
+      </div>
+
+      <StorybookComponent
+        :style-class-passthrough="args.styleClassPassthrough"
+      />
+
+      <div style="margin-top: 1.5rem; padding: 1rem; background: var(--theme-surface); border-radius: 8px; border: 1px solid var(--theme-border);">
+        <h4 style="margin: 0 0 0.5rem 0; font-size: 1.6rem;">Theme Preview</h4>
+        <p style="margin: 0 0 1rem 0; color: var(--theme-text-secondary); font-size: 1.6rem;">
+          This area demonstrates how the theme affects content appearance:
+        </p>
+        <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
+          <div style="padding: 0.75rem; background: var(--theme-primary); color: var(--theme-primary-text); border-radius: 4px; font-size: 1.4rem;">
+            Primary Color
+          </div>
+          <div style="padding: 0.75rem; background: var(--theme-secondary); color: var(--theme-secondary-text); border-radius: 4px; font-size: 1.4rem;">
+            Secondary Color
+          </div>
+          <div style="padding: 0.75rem; background: var(--theme-surface-variant); color: var(--theme-text); border-radius: 4px; border: 1px solid var(--theme-border); font-size: 1.4rem;">
+            Surface Variant
+          </div>
+        </div>
+      </div>
+
+      <div style="margin-top: 1.5rem; font-size: 1.2rem; color: #666;">
+        <strong>Usage:</strong> This component automatically syncs with your app's theme settings. Changes are persisted and applied globally.
+      </div>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  styleClassPassthrough: [],
+};
+Default.parameters = {
+  docs: {
+    description: {
+      story:
+        "The default theme switch with system, light, and dark mode options. The component features smooth animations and integrates with the application's global theme state.",
+    },
+  },
+};
+
+export const WithCustomStyling = Template.bind({});
+WithCustomStyling.args = {
+  styleClassPassthrough: ["small"],
+};
+WithCustomStyling.parameters = {
+  docs: {
+    description: {
+      story:
+        'Theme switch with custom styling classes applied. The "small" class provides specialized styling for enhanced visual appearance.',
+    },
+  },
+};
+
+export const InNavigation = Template.bind({});
+InNavigation.args = {
+  styleClassPassthrough: ["small"],
+};
+
+// Custom template for navigation context
+InNavigation.render = (args, { argTypes }) => ({
+  components: { StorybookComponent },
+  props: Object.keys(argTypes),
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="background: var(--theme-surface); padding: 1rem;">
+      <nav style="display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; background: var(--theme-surface-variant); border-radius: 8px; border: 1px solid var(--theme-border);">
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <div style="font-weight: 600; color: var(--theme-text); font-size: 1.125rem;">
+            My App
+          </div>
+          <div style="display: flex; gap: 0.5rem;">
+            <a href="#" style="color: var(--theme-text-secondary); text-decoration: none; padding: 0.5rem; border-radius: 4px; font-size: 0.875rem;">Home</a>
+            <a href="#" style="color: var(--theme-text-secondary); text-decoration: none; padding: 0.5rem; border-radius: 4px; font-size: 0.875rem;">About</a>
+            <a href="#" style="color: var(--theme-text-secondary); text-decoration: none; padding: 0.5rem; border-radius: 4px; font-size: 0.875rem;">Contact</a>
+          </div>
+        </div>
+
+        <div style="display: flex; align-items: center; gap: 1rem;">
+          <span style="color: var(--theme-text-secondary); font-size: 0.875rem;">Theme:</span>
+          <StorybookComponent :style-class-passthrough="args.styleClassPassthrough" />
+        </div>
+      </nav>
+
+      <div style="margin-top: 1.5rem; padding: 1.5rem; background: var(--theme-surface-variant); border-radius: 8px; border: 1px solid var(--theme-border);">
+        <h2 style="margin: 0 0 1rem 0; color: var(--theme-text);">Page Content</h2>
+        <p style="margin: 0 0 1rem 0; color: var(--theme-text-secondary); line-height: 1.5;">
+          This demonstrates how the theme switch works in a typical navigation context.
+          The theme changes are applied immediately across all interface elements.
+        </p>
+        <div style="display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--theme-primary); color: var(--theme-primary-text); border-radius: 6px; font-size: 0.875rem; font-weight: 500;">
+          <span>🎨</span>
+          Dynamic Theming Active
+        </div>
+      </div>
+    </div>
+  `,
+});
+InNavigation.parameters = {
+  docs: {
+    description: {
+      story:
+        "Example of the theme switch integrated into a navigation bar context, showing how it works alongside other UI elements and how theme changes affect the entire interface.",
+    },
+  },
+};

package/app/components/display-toast/DisplayToast.vue

@@ -33,13 +33,13 @@
         :set-dismiss-toast="setDismissToast"
       >
         <template #customToastIcon>
-          <slot name="customToastIcon" />
+          <slot name="customToastIcon"></slot>
         </template>
         <template #title>
-          <slot name="title" />
+          <slot name="title"></slot>
         </template>
         <template #description>
-          <slot name="description" />
+          <slot name="description"></slot>
         </template>
       </DefaultToastContent>
       <div v-if="autoDismiss" class="display-toast-progress"></div>
@@ -54,7 +54,7 @@ import type {
   DisplayToastPosition,
   DisplayToastAlignment,
   ToastSlots,
-} from "../../types/components"
+} from "../../types/components";
 
 const props = defineProps({
   config: {
@@ -81,136 +81,137 @@ const props = defineProps({
     type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-})
+});
 
-const slots = defineSlots<ToastSlots>()
+const slots = defineSlots<ToastSlots>();
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 // Computed properties for accessing config values with defaults
-const theme = computed(() => props.config?.appearance?.theme ?? "ghost")
-const position = computed(() => props.config?.appearance?.position ?? "top")
-const alignment = computed(() => props.config?.appearance?.alignment ?? "right")
-const fullWidth = computed(() => props.config?.appearance?.fullWidth ?? false)
-const autoDismiss = computed(() => props.config?.behavior?.autoDismiss ?? true)
-const duration = computed(() => props.config?.behavior?.duration ?? 5000)
-const revealDuration = computed(() => props.config?.behavior?.revealDuration ?? 550)
-const returnFocusTo = computed(() => props.config?.behavior?.returnFocusTo ?? null)
-const toastDisplayText = computed(() => props.config?.content?.text ?? "")
-const toastTitle = computed(() => props.config?.content?.title ?? "")
-const toastDescription = computed(() => props.config?.content?.description ?? "")
-const customIcon = computed(() => props.config?.content?.customIcon)
+const theme = computed(() => props.config?.appearance?.theme ?? "ghost");
+const position = computed(() => props.config?.appearance?.position ?? "top");
+const alignment = computed(() => props.config?.appearance?.alignment ?? "right");
+const fullWidth = computed(() => props.config?.appearance?.fullWidth ?? false);
+const autoDismiss = computed(() => props.config?.behavior?.autoDismiss ?? true);
+const duration = computed(() => props.config?.behavior?.duration ?? 5000);
+const revealDuration = computed(() => props.config?.behavior?.revealDuration ?? 550);
+const returnFocusTo = computed(() => props.config?.behavior?.returnFocusTo ?? null);
+const toastDisplayText = computed(() => props.config?.content?.text ?? "");
+const toastTitle = computed(() => props.config?.content?.title ?? "");
+const toastDescription = computed(() => props.config?.content?.description ?? "");
+const customIcon = computed(() => props.config?.content?.customIcon);
 
 // Computed classes for positioning
 const positionClasses = computed(() => {
-  const classes = []
-  classes.push(position.value)
+  const classes = [];
+  classes.push(position.value);
   if (fullWidth.value) {
-    classes.push("full-width")
+    classes.push("full-width");
   } else {
-    classes.push(alignment.value)
+    classes.push(alignment.value);
   }
-  return classes
-})
+  return classes;
+});
 
 /*
  * Accessibility setup
  */
-const toastId = useId()
-const toastElementRef = useTemplateRef<HTMLElement>("toastElementRef")
+const toastId = useId();
+const toastElementRef = useTemplateRef<HTMLElement>("toastElementRef");
 
 // Determine appropriate ARIA attributes based on theme
 const toastRole = computed(() => {
-  return ["error", "warning"].includes(theme.value) ? "alert" : "status"
-})
+  return ["error", "warning"].includes(theme.value) ? "alert" : "status";
+});
 
 const ariaLive = computed(() => {
-  return ["error", "warning"].includes(theme.value) ? "assertive" : "polite"
-})
+  return ["error", "warning"].includes(theme.value) ? "assertive" : "polite";
+});
 
 /*
  * Setup component state
  */
-const externalTriggerModel = defineModel<boolean>({ default: false })
-const privateDisplayToast = ref(false)
-const transitionalState = ref(false)
+const externalTriggerModel = defineModel<boolean>({ default: false });
+const privateDisplayToast = ref(false);
+const transitionalState = ref(false);
 const cssStateClass = computed(() => {
-  return transitionalState.value ? "show" : "hide"
-})
+  return transitionalState.value ? "show" : "hide";
+});
 
 /*
  * Computed properties for durations (in ms for CSS)
  */
-const revealDurationMs = computed(() => revealDuration.value + "ms")
-const displayDurationMs = computed(() => duration.value + "ms")
+const revealDurationMs = computed(() => revealDuration.value + "ms");
+const displayDurationMs = computed(() => duration.value + "ms");
 
 /*
  * Lifecycle hooks
  */
 const setDismissToast = async () => {
-  transitionalState.value = false
-  await useSleep(revealDuration.value)
+  transitionalState.value = false;
+  await useSleep(revealDuration.value);
 
   // Return focus to specified element if provided
   if (returnFocusTo.value) {
     // Handle both HTMLElement and ComponentPublicInstance
-    let focusTarget: HTMLElement | null = null
+    let focusTarget: HTMLElement | null = null;
 
     if (returnFocusTo.value instanceof HTMLElement) {
-      focusTarget = returnFocusTo.value
+      focusTarget = returnFocusTo.value;
     } else if (returnFocusTo.value && "$el" in returnFocusTo.value) {
-      focusTarget = returnFocusTo.value.$el as HTMLElement
+      focusTarget = returnFocusTo.value.$el as HTMLElement;
     }
 
     if (focusTarget && typeof focusTarget.focus === "function") {
-      focusTarget.focus()
+      focusTarget.focus();
     }
   }
 
-  externalTriggerModel.value = false
-  privateDisplayToast.value = false
-}
+  externalTriggerModel.value = false;
+  privateDisplayToast.value = false;
+};
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough)
+    resetElementClasses(props.styleClassPassthrough);
   }
-)
+);
 
 watch(
   () => externalTriggerModel.value,
   async (newValue, previousValue) => {
     if (newValue) {
-      privateDisplayToast.value = true
-      transitionalState.value = true
+      privateDisplayToast.value = true;
+      transitionalState.value = true;
 
       // Focus management for accessibility when not using custom slots
       if (!slots.default) {
-        await nextTick()
+        await nextTick();
         // Wait for animation to start before focusing
         setTimeout(() => {
-          toastElementRef.value?.focus()
-        }, 100)
+          toastElementRef.value?.focus();
+        }, 100);
       }
 
       if (autoDismiss.value) {
-        await useSleep(duration.value)
-        setDismissToast()
+        await useSleep(duration.value);
+        setDismissToast();
       }
     } else if (!newValue && previousValue) {
       // If external model is set to false, dismiss the toast
-      setDismissToast()
+      setDismissToast();
     }
   }
-)
+);
 
 onBeforeRouteLeave(() => {
-  setDismissToast()
-})
+  setDismissToast();
+});
 </script>
 
 <style lang="css">
+@layer components {
 @keyframes show {
   to {
     opacity: 1;
@@ -355,7 +356,7 @@ onBeforeRouteLeave(() => {
       grid-template-columns: auto 1fr auto;
       gap: 12px;
       align-items: center;
-      background-color: var(--gray-10);
+      background-color: var(--slate-10);
       border-start-start-radius: 8px;
       border-end-start-radius: 8px;
       padding: 12px 14px;
@@ -442,4 +443,5 @@ onBeforeRouteLeave(() => {
     animation: progress v-bind(displayDurationMs) linear forwards;
   }
 }
+}
 </style>

package/app/components/display-toast/molecules/DefaultToastContent.vue

@@ -5,7 +5,7 @@
         <Icon :name="customIcon || defaultThemeIcons[theme] || 'akar-icons:info'" class="icon" />
       </slot>
     </div>
-    <div class="toast-message" :id="'toast-message-' + toastId">
+    <div :id="'toast-message-' + toastId" class="toast-message">
       <template v-if="slots.title || slots.description || toastTitle || toastDescription">
         <p v-if="slots.title || toastTitle" class="title" data-test-id="toast-title">
           <slot name="title">{{ toastTitle }}</slot>
@@ -29,42 +29,20 @@
 </template>
 
 <script setup lang="ts">
-import type { DisplayToastTheme } from "../../../types/components"
-
-const props = defineProps({
-  theme: {
-    type: String as PropType<DisplayToastTheme>,
-    required: true,
-  },
-  customIcon: {
-    type: String,
-    default: undefined,
-  },
-  toastId: {
-    type: String,
-    required: true,
-  },
-  toastDisplayText: {
-    type: String,
-    required: true,
-  },
-  toastTitle: {
-    type: String,
-    default: undefined,
-  },
-  toastDescription: {
-    type: String,
-    default: undefined,
-  },
-  autoDismiss: {
-    type: Boolean,
-    required: true,
-  },
-  setDismissToast: {
-    type: Function as PropType<() => void>,
-    required: true,
-  },
-})
+import type { DisplayToastTheme } from "../../../types/components";
+
+interface Props {
+  theme: DisplayToastTheme;
+  customIcon?: string;
+  toastId: string;
+  toastDisplayText: string;
+  toastTitle?: string;
+  toastDescription?: string;
+  autoDismiss: boolean;
+  setDismissToast: () => void;
+}
+
+defineProps<Props>();
 
 const defaultThemeIcons = {
   primary: "akar-icons:info",
@@ -75,22 +53,19 @@ const defaultThemeIcons = {
   info: "akar-icons:info",
   success: "akar-icons:info",
   warning: "akar-icons:circle-alert",
-}
+};
 
-const slots = defineSlots<{
-  customToastIcon?: () => any
-  title?: () => any
-  description?: () => any
-}>()
+const slots = useSlots();
 </script>
 
 <style lang="css">
+@layer components {
 .display-toast-inner {
   display: grid;
   grid-template-columns: auto 1fr auto;
   gap: 12px;
   align-items: center;
-  background-color: var(--gray-10);
+  background-color: var(--colour-theme-1);
   border-start-start-radius: 8px;
   border-end-start-radius: 8px;
   padding: 12px 14px;
@@ -159,7 +134,7 @@ const slots = defineSlots<{
       outline: 0.1rem solid transparent;
       border-radius: 50%;
       box-shadow: none;
-      color: var(--colour-theme-0);
+      color: var(--colour-theme-1);
       cursor: pointer;
       font-size: var(--step-4);
       font-weight: bold;
@@ -184,4 +159,5 @@ const slots = defineSlots<{
     }
   }
 }
+}
 </style>