srcdev-nuxt-components 8.0.3 → 9.0.1

package/app/components/deep-expanding-menu/DeepExpandingMenuOld.vue

@@ -3,15 +3,15 @@
     <div class="inner">
       <template v-for="(link, key) in navLinks" :key="key">
         <NuxtLink v-if="link.path" :to="link.path" class="navigation-link">{{ link.name }}</NuxtLink>
-        <details v-else class="navigation-group" name="navigation-group" ref="navigationGroupRef">
+        <details v-else ref="navigationGroupRef" class="navigation-group" name="navigation-group">
           <summary class="navigation-group-toggle">
             <span>{{ link.name }}</span>
             <Icon name="bi:caret-down-fill" class="icon" />
           </summary>
-          <div class="navigation-group-panel" :id="`popovertarget-nav-1-${key}`">
+          <div :id="`popovertarget-nav-1-${key}`" class="navigation-group-panel">
             <h4 class="page-heading-4 mb-6">{{ link.childLinksTitle }}</h4>
             <ul class="navigation-group-list">
-              <li class="navigation-group-item" v-for="childLink in link.childLinks" :key="childLink.name">
+              <li v-for="childLink in link.childLinks" :key="childLink.name" class="navigation-group-item">
                 <NuxtLink :to="childLink.path" class="navigation-group-link">{{ childLink.name }}</NuxtLink>
               </li>
             </ul>
@@ -23,14 +23,14 @@
 </template>
 
 <script setup lang="ts">
-import { onClickOutside } from "@vueuse/core"
+import { onClickOutside } from "@vueuse/core";
 
 const props = defineProps({
   tag: {
     type: String,
     default: "nav",
     validator(value: string) {
-      return ["div", "section", "nav", "ul", "ol"].includes(value)
+      return ["div", "section", "nav", "ul", "ol"].includes(value);
     },
   },
   navLinks: {
@@ -41,39 +41,40 @@ const props = defineProps({
     type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-})
+});
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
-const navigationGroupRef = useTemplateRef<HTMLElement[]>("navigationGroupRef")
+const navigationGroupRef = useTemplateRef<HTMLElement[]>("navigationGroupRef");
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough)
+    resetElementClasses(props.styleClassPassthrough);
   }
-)
+);
 
 onMounted(() => {
   navigationGroupRef.value?.forEach((element, index) => {
     onClickOutside(element, () => {
-      navigationGroupRef.value?.[index]?.removeAttribute("open")
-    })
-  })
-})
+      navigationGroupRef.value?.[index]?.removeAttribute("open");
+    });
+  });
+});
 </script>
 
 <script lang="ts">
 interface ResponsiveHeaderNavItem {
-  name: string
-  path?: string
-  isExternal?: boolean
-  childLinksTitle?: string
-  childLinks?: ResponsiveHeaderNavItem[]
+  name: string;
+  path?: string;
+  isExternal?: boolean;
+  childLinksTitle?: string;
+  childLinks?: ResponsiveHeaderNavItem[];
 }
 </script>
 
 <style lang="css">
+@layer components {
 @layer popover-setup {
   .deep-expanding-menu-old {
     container-type: inline-size;
@@ -99,15 +100,15 @@ interface ResponsiveHeaderNavItem {
 
         &:hover {
           cursor: pointer;
-          border-color: light-dark(var(--blue-12), var(--gray-0));
+          border-color: light-dark(var(--blue-10), var(--slate-00));
         }
 
         &:focus {
-          border-color: light-dark(var(--blue-12), var(--gray-0));
+          border-color: light-dark(var(--blue-10), var(--slate-00));
         }
 
         &:focus-visible {
-          border-color: light-dark(var(--blue-12), var(--gray-0));
+          border-color: light-dark(var(--blue-10), var(--slate-00));
         }
       }
 
@@ -174,7 +175,7 @@ interface ResponsiveHeaderNavItem {
           overflow: clip;
 
           h4 {
-            color: var(--gray-12);
+            color: var(--slate-10);
           }
 
           .navigation-group-list {
@@ -189,7 +190,7 @@ interface ResponsiveHeaderNavItem {
 
               a.navigation-group-link {
                 display: inline-block;
-                color: var(--gray-12);
+                color: var(--slate-10);
                 text-decoration: none;
                 padding-block: 8px;
 
@@ -199,11 +200,11 @@ interface ResponsiveHeaderNavItem {
 
                 &:hover {
                   cursor: pointer;
-                  border-color: var(--gray-12);
+                  border-color: var(--slate-10);
                 }
 
                 &:focus-visible {
-                  border-color: var(--gray-12);
+                  border-color: var(--slate-10);
                 }
               }
             }
@@ -213,4 +214,5 @@ interface ResponsiveHeaderNavItem {
     }
   }
 }
+}
 </style>

package/app/components/display-avatar/DisplayAvatar.vue

@@ -15,12 +15,12 @@
 </template>
 
 <script setup lang="ts">
-import DisplayChip from "../display-chip/DisplayChip.vue"
-import type { DisplayChipProps } from "../../types/components"
+import DisplayChip from "../display-chip/DisplayChip.vue";
+import type { DisplayChipProps } from "../../types/components";
 
 export interface AvatarSlots {
-  default(props?: {}): any
-  icon(props?: {}): any
+  default(props?: {}): any;
+  icon(props?: {}): any;
 }
 
 const props = defineProps({
@@ -60,16 +60,16 @@ const props = defineProps({
     type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-})
+});
 
-defineSlots<AvatarSlots>()
+defineSlots<AvatarSlots>();
 
 const { elementClasses, resetElementClasses, updateElementClasses } = useStyleClassPassthrough(
   props.styleClassPassthrough
-)
+);
 
 if (props.chip && typeof props.chip === "object" && !("styleClassPassthrough" in props.chip)) {
-  updateElementClasses(["display-avatar", props.size])
+  updateElementClasses(["display-avatar", props.size]);
 }
 
 const fallback = computed(
@@ -80,30 +80,31 @@ const fallback = computed(
       .map((word) => word.charAt(0))
       .join("")
       .substring(0, 2)
-)
+);
 
 const chipDefaultConfig = {
   size: "12px",
   maskWidth: "4px",
   offset: "0px",
   angle: "90deg",
-}
+};
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough)
+    resetElementClasses(props.styleClassPassthrough);
   }
-)
+);
 </script>
 
 <style lang="css">
+@layer components {
 .display-avatar {
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  color: var(--gray-3);
+  color: var(--slate-03);
 
   isolation: isolate;
 
@@ -143,4 +144,5 @@ watch(
     font-size: 24px;
   }
 }
+}
 </style>

package/app/components/display-avatar/stories/DisplayAvatar.stories.ts

@@ -0,0 +1,94 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import StorybookComponent from "../DisplayAvatar.vue";
+
+export default {
+  title: "Components/UI/DisplayAvatar",
+  component: StorybookComponent,
+  argTypes: {
+    src: {
+      control: { type: "text" },
+      description: "Avatar image source URL",
+      table: {
+        category: "Avatar",
+      },
+    },
+    alt: {
+      control: { type: "text" },
+      description: "Alternative text for the avatar image",
+      table: {
+        category: "Avatar",
+      },
+    },
+    chipSize: {
+      control: { type: "range", min: 1, max: 24, step: 1 },
+      description: "Size of the chip in pixels",
+      table: {
+        category: "Chip Configuration",
+      },
+    },
+    chipMaskWidth: {
+      control: { type: "range", min: 0, max: 12, step: 1 },
+      description: "Width of the chip mask/border in pixels",
+      table: {
+        category: "Chip Configuration",
+      },
+    },
+    chipOffset: {
+      control: { type: "range", min: -12, max: 12, step: 1 },
+      description: "Offset of the chip from the edge in pixels",
+      table: {
+        category: "Chip Configuration",
+      },
+    },
+    chipAngle: {
+      control: { type: "range", min: 0, max: 360, step: 1 },
+      description: "Angle of the chip position around the avatar in degrees",
+      table: {
+        category: "Chip Configuration",
+      },
+    },
+    // Hide the chip prop from controls since we're using individual controls
+    chip: {
+      table: {
+        disable: true,
+      },
+    },
+    // Hide styleClassPassthrough from controls for cleaner UI
+    styleClassPassthrough: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    src: "https://github.com/srcdev.png",
+    alt: "SrcDev Avatar",
+    chipSize: 12,
+    chipMaskWidth: 4,
+    chipOffset: 2,
+    chipAngle: 45,
+    styleClassPassthrough: ["test-storybook--display-avatar", "online"],
+  },
+} as Meta<typeof StorybookComponent>;
+
+const Template: StoryFn<typeof StorybookComponent> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <StorybookComponent
+      :src="args.src"
+      :alt="args.alt"
+      :chip="{
+        size: (args.chipSize || 12) + 'px',
+        maskWidth: (args.chipMaskWidth || 4) + 'px',
+        offset: (args.chipOffset || 2) + 'px',
+        angle: (args.chipAngle || 45) + 'deg'
+      }"
+      :style-class-passthrough="args.styleClassPassthrough"
+    />
+  `,
+});
+
+export const Default = Template.bind({});

package/app/components/display-banner/DisplayBanner.vue

@@ -48,6 +48,7 @@ watch(
 </script>
 
 <style lang="css">
+@layer components {
 .display-banner {
   display: grid;
   grid-template-areas: "banner";
@@ -68,4 +69,5 @@ watch(
     grid-area: banner;
   }
 }
+}
 </style>

package/app/components/display-card/DisplayCard.vue

@@ -22,7 +22,7 @@ const props = defineProps({
     type: String,
     default: "div",
     validator(value: string) {
-      return ["div", "section", "article", "aside", "main", "nav"].includes(value)
+      return ["div", "section", "article", "aside", "main", "nav"].includes(value);
     },
   },
   hasDividers: {
@@ -37,27 +37,28 @@ const props = defineProps({
     type: String,
     default: "solid",
     validator(value: string) {
-      return ["solid", "subtle", "soft", "outline"].includes(value)
+      return ["solid", "subtle", "soft", "outline"].includes(value);
     },
   },
   styleClassPassthrough: {
     type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-})
-const slots = useSlots()
+});
+const slots = useSlots();
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough)
+    resetElementClasses(props.styleClassPassthrough);
   }
-)
+);
 </script>
 
 <style lang="css">
+@layer components {
 .display-card {
   --_inner-padding: 1rem;
   --_background-color: transparent;
@@ -80,23 +81,23 @@ watch(
   }
 
   &.solid {
-    --_background-color: light-dark(var(--gray-0), var(--gray-12));
-    --_border-color: light-dark(var(--gray-4), var(--gray-8));
+    --_background-color: light-dark(var(--slate-00), var(--slate-10));
+    --_border-color: light-dark(var(--slate-04), var(--slate-08));
   }
 
   &.subtle {
-    --_background-color: color-mix(in oklab, light-dark(var(--gray-1), var(--gray-8)) 50%, transparent);
-    --_border-color: light-dark(var(--gray-3), var(--gray-9));
+    --_background-color: color-mix(in oklab, light-dark(var(--slate-01), var(--slate-08)) 50%, transparent);
+    --_border-color: light-dark(var(--slate-03), var(--slate-09));
   }
 
   &.soft {
-    --_background-color: color-mix(in oklab, light-dark(var(--gray-1), var(--gray-8)) 20%, transparent);
-    --_box-shadow-color: color-mix(in oklab, light-dark(var(--gray-2), var(--gray-8)) 80%, transparent);
+    --_background-color: color-mix(in oklab, light-dark(var(--slate-01), var(--slate-08)) 20%, transparent);
+    --_box-shadow-color: color-mix(in oklab, light-dark(var(--slate-02), var(--slate-08)) 80%, transparent);
   }
 
   &.outline {
     --_background-color: transparent;
-    --_border-color: light-dark(var(--gray-4), var(--gray-8));
+    --_border-color: light-dark(var(--slate-04), var(--slate-08));
   }
 
   &.has-dividers {
@@ -117,4 +118,5 @@ watch(
     padding: var(--_inner-padding);
   }
 }
+}
 </style>

package/app/components/display-chip/DisplayChip.vue

@@ -59,6 +59,7 @@ const chipStyles = computed(() => ({
 </script>
 
 <style lang="css">
+@layer components {
 .display-chip-core {
   --computed-mask-diameter: calc(var(--chip-size) + (var(--chip-mask-width) * 2));
 
@@ -182,4 +183,5 @@ const chipStyles = computed(() => ({
     }
   }
 }
+}
 </style>