srcdev-nuxt-components 9.4.9 → 9.4.11

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

@@ -1,189 +0,0 @@
-<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/--_form-outline-colour used to sit here referencing
-       --theme-form-radio-border/-outline — dead tokens declared nowhere in the layer, and
-       neither local var was itself ever read by any property below either; removed rather than
-       migrated. --_select-scheme-group-background-color below is repointed at the new public
-       --triple-toggle-switch-marker-surface token instead of the other dead reference it used
-       to carry (--theme-form-checkbox-bg) — see TripleToggleSwitchCore.vue and
-       theming-component-token-pattern.md. */
-    --_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(--triple-toggle-switch-marker-surface, var(--theme-input-surface));
-    --_select-scheme-group-background-image: none;
-
-    /* "system", matching sampleFieldData's actual id/value below — was "auto" here, which never
-       matched (this component's own data never used it), so this gradient never fired for the
-       system option in practice. */
-    &:has(input[value="system"]: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-border);
-      outline: var(--form-element-outline-width) solid transparent;
-      padding: var(--_form-padding);
-
-      &:has(input:focus-visible) {
-        outline: var(--form-element-outline-width) solid var(--theme-ring);
-        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-ring);
-            outline-offset: 0.2rem;
-          }
-
-          .option-icon {
-            &.system {
-              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

@@ -1,154 +0,0 @@
-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/glowing-border/GlowingBorder.vue

@@ -1,142 +0,0 @@
-<template>
-  <component :is="tag" class="glowing-border" :class="[elementClasses, variant]">
-    <slot></slot>
-  </component>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  tag: {
-    type: String,
-    default: "div",
-    validator(value: string) {
-      return [
-        "div",
-        "p",
-        "span",
-        "section",
-        "article",
-        "aside",
-        "header",
-        "footer",
-        "main",
-        "nav",
-        "ul",
-        "ol",
-      ].includes(value)
-    },
-  },
-  variant: {
-    type: String,
-    default: "subtle",
-    validator(value: string) {
-      return ["subtle", "vivid", "silver", "steel"].includes(value)
-    },
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough)
-  }
-)
-</script>
-
-<style scoped lang="css">
-@layer components {
-@property --glow-deg {
-  syntax: "<angle>";
-  inherits: true;
-  initial-value: -90deg;
-}
-
-/* the colors don't need to be registed */
-@property --clr-1 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: red;
-}
-
-@property --clr-2 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: yellow;
-}
-
-@property --clr-3 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: green;
-}
-
-@property --clr-4 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: blue;
-}
-
-@property --clr-5 {
-  syntax: "<color>";
-  inherits: true;
-  initial-value: purple;
-}
-
-.glowing-border {
-  &.vivid {
-    --clr-1: #ff0000;
-    --clr-2: #ffa500;
-    --clr-3: #ffff00;
-    --clr-4: #008000;
-    --clr-5: #0000ff;
-  }
-
-  &.subtle {
-    --clr-1: #ff9a9e;
-    --clr-2: #fad0c4;
-    --clr-3: #fad0c4;
-    --clr-4: #fbc2eb;
-    --clr-5: #a18cd1;
-  }
-
-  &.silver {
-    --clr-1: #d4d4d4;
-    --clr-2: #e4e4e4;
-    --clr-3: #f5f5f5;
-    --clr-4: #e4e4e4;
-    --clr-5: #d4d4d4;
-  }
-
-  &.steel {
-    --clr-1: #434343;
-    --clr-2: #5a5a5a;
-    --clr-3: #6e6e6e;
-    --clr-4: #5a5a5a;
-    --clr-5: #434343;
-  }
-
-  --gradient-glow: var(--clr-1), var(--clr-2), var(--clr-3), var(--clr-4), var(--clr-5), var(--clr-1);
-
-  border: var(--border-width, 3px) solid transparent;
-  border-radius: 30px;
-  background: linear-gradient(var(--surface, canvas) 0 0) padding-box,
-    conic-gradient(from var(--glow-deg), var(--gradient-glow)) border-box;
-
-  animation: glow 10s infinite linear;
-
-  overflow: hidden;
-}
-
-@keyframes glow {
-  100% {
-    --glow-deg: 270deg;
-  }
-}
-}
-</style>

package/app/components/glowing-border/stories/GlowingBorder.stories.ts

@@ -1,141 +0,0 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import StorybookComponent from "../GlowingBorder.vue";
-
-// Custom interface for story args
-interface GlowingBorderStoryArgs {
-  variant: "vivid" | "subtle" | "silver" | "steel";
-  content: string;
-  showCardCore: boolean;
-  cardCoreVariant: "solid" | "subtle" | "soft" | "outline";
-}
-
-export default {
-  title: "Components/Effects/GlowingBorder",
-  component: StorybookComponent,
-  argTypes: {
-    variant: {
-      control: { type: "select" },
-      options: ["vivid", "subtle", "silver", "steel"],
-      description: "GlowingBorder visual variant",
-      table: {
-        category: "Appearance",
-      },
-    },
-    content: {
-      control: { type: "text" },
-      description: "Content to display inside the glowing border",
-      table: {
-        category: "Content",
-      },
-    },
-    showCardCore: {
-      control: { type: "boolean" },
-      description: "Show content wrapped in a CardCore component",
-      table: {
-        category: "Content",
-      },
-    },
-    cardCoreVariant: {
-      control: { type: "select" },
-      options: ["solid", "subtle", "soft", "outline"],
-      description: "CardCore variant when showCardCore is true",
-      table: {
-        category: "Content",
-      },
-    },
-    // Hide internal props
-    styleClassPassthrough: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-  args: {
-    variant: "vivid",
-    content:
-      "This is default slot content for the GlowingBorder component. As it's a slot, any HTML content can be placed here.",
-    showCardCore: false,
-    cardCoreVariant: "solid",
-  },
-} as Meta<GlowingBorderStoryArgs>;
-
-const Template: StoryFn<GlowingBorderStoryArgs> = (args) => ({
-  components: { StorybookComponent },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div style="padding: 40px; background-color: var(--slate-10);">
-      <StorybookComponent
-        :variant="args.variant"
-        :style-class-passthrough="['storybook-demo']"
-      >
-        <div v-if="!args.showCardCore" style="padding: 20px; color: var(--slate-02);">
-          <h3 style="margin: 0 0 12px 0; font-size: 1.5rem; font-weight: 600;">GlowingBorder Header</h3>
-          <h4 style="margin: 0 0 16px 0; font-size: 1.25rem; font-weight: 500;">GlowingBorder Content</h4>
-          <p style="margin: 0 0 12px 0; line-height: 1.6;">{{ args.content }}</p>
-          <p style="margin: 0; font-size: 0.875rem; color: var(--slate-09);">GlowingBorder Footer</p>
-        </div>
-
-        <!-- CardCore version -->
-        <CardCore
-          v-else
-          :variant="args.cardCoreVariant"
-          :has-dividers="true"
-          :no-outline="false"
-        >
-          <template #header>
-            <h2 style="margin: 0; font-size: 1.5rem; font-weight: 600;">CardCore Header</h2>
-          </template>
-          <template #default>
-            <h3 style="margin: 0 0 12px 0; font-size: 1.25rem; font-weight: 500; color: var(--slate-02);">CardCore Content</h3>
-            <p style="margin: 0 0 12px 0; line-height: 1.6; color: var(--slate-02);">{{ args.content }}</p>
-            <p style="margin: 0; line-height: 1.6; color: var(--slate-02);">This demonstrates how GlowingBorder can wrap other components.</p>
-          </template>
-          <template #footer>
-            <p style="margin: 0; font-size: 0.875rem; color: var(--slate-02);">CardCore Footer</p>
-          </template>
-        </CardCore>
-      </StorybookComponent>
-    </div>
-  `,
-});
-
-export const Default = Template.bind({});
-
-export const Vivid = Template.bind({});
-Vivid.args = {
-  variant: "vivid",
-  content:
-    "Vivid variant creates a bright, attention-grabbing glow effect perfect for highlighting important content or call-to-action elements.",
-};
-
-export const Subtle = Template.bind({});
-Subtle.args = {
-  variant: "subtle",
-  content:
-    "Subtle variant provides a gentle glow that adds visual interest without being overwhelming, ideal for elegant content presentation.",
-};
-
-export const Silver = Template.bind({});
-Silver.args = {
-  variant: "silver",
-  content:
-    "Silver variant offers a metallic, sophisticated glow that works well in professional or modern design contexts.",
-};
-
-export const Steel = Template.bind({});
-Steel.args = {
-  variant: "steel",
-  content:
-    "Steel variant provides a cool, industrial glow effect that's perfect for technical or utilitarian design themes.",
-};
-
-export const WithCardCore = Template.bind({});
-WithCardCore.args = {
-  variant: "vivid",
-  content:
-    "This example shows how GlowingBorder can enhance other components like CardCore, creating layered visual effects.",
-  showCardCore: true,
-  cardCoreVariant: "solid",
-};