srcdev-nuxt-components 8.0.3 → 9.0.0

package/app/components/container-glow/ContainerGlowCore.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="container-glow-wrapper" :class="elementClasses" ref="containerGlowWrapper">
+  <div ref="containerGlowWrapper" class="container-glow-wrapper" :class="elementClasses">
     <component
       :is="tag"
       v-for="(item, key) in itemCount"
       :key="key"
-      class="container-glow-core"
       ref="containerGlowItem"
+      class="container-glow-core"
     >
       <div class="glows"></div>
       <slot :name="`container-glow-${key}`"></slot>
@@ -15,12 +15,12 @@
 
 <script setup lang="ts">
 interface Config {
-  proximity: number
-  spread: number
-  blur: number
-  gap: number
-  vertical: boolean
-  opacity: number
+  proximity: number;
+  spread: number;
+  blur: number;
+  gap: number;
+  vertical: boolean;
+  inactiveOpacity: number;
 }
 
 const props = defineProps({
@@ -44,66 +44,131 @@ const props = defineProps({
       blur: 20,
       gap: 32,
       vertical: false,
-      opacity: 0.15,
+      inactiveOpacity: 0,
     }),
   },
-})
+});
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const controller = new AbortController();
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+const containerGlowWrapper = ref<HTMLElement>();
+const containerGlowItem = ref<HTMLElement[]>([]);
 
-const controller = new AbortController()
+// Cache frequently used values to avoid repeated access
+const configCache = computed(() => ({
+  proximity: props.config.proximity,
+  inactiveOpacityStr: String(props.config.inactiveOpacity),
+  gapStr: String(props.config.gap),
+  blurStr: String(props.config.blur),
+  spreadStr: String(props.config.spread),
+  direction: props.config.vertical ? "column" : "row",
+}));
 
-const containerGlowWrapper = ref<HTMLElement>()
-const containerGlowItem = ref<HTMLElement[]>([])
+// Pre-calculate constants to avoid repeated calculations
+const ANGLE_OFFSET = 90;
+const FULL_CIRCLE = 360;
+const RAD_TO_DEG = 180 / Math.PI;
+
+// Throttle mechanism using RAF
+let rafId: number | null = null;
+let lastEventData: { x: number; y: number } | null = null;
 
 const updateStyles = (event: PointerEvent) => {
-  // get the angle based on the center point of the card and pointer position
-  for (const cardElem of containerGlowItem.value) {
-    // Check the card against the proximity and then start updating
-    const cardBounds = cardElem.getBoundingClientRect()
-    // Get distance between pointer and outerbounds of card
-    if (
-      event?.x > cardBounds.left - props.config.proximity &&
-      event?.x < cardBounds.left + cardBounds.width + props.config.proximity &&
-      event?.y > cardBounds.top - props.config.proximity &&
-      event?.y < cardBounds.top + cardBounds.height + props.config.proximity
-    ) {
-      // If within proximity set the active opacity
-      cardElem.style.setProperty("--opacity-active", String(1))
-    } else {
-      cardElem.style.setProperty("--opacity-active", String(props.config.opacity))
-    }
-    const cardCentre = [cardBounds.left + cardBounds.width * 0.5, cardBounds.top + cardBounds.height * 0.5]
-    let angle = (Math.atan2(event?.y - cardCentre[1], event?.x - cardCentre[0]) * 180) / Math.PI
-    angle = angle < 0 ? angle + 360 : angle
-    cardElem.style.setProperty("--start", String(angle + 90))
+  // Early return if event coordinates are not available
+  if (typeof event.x !== "number" || typeof event.y !== "number") {
+    return;
   }
-}
+
+  // Store event data and schedule update
+  lastEventData = { x: event.x, y: event.y };
+
+  if (rafId !== null) {
+    return; // Already scheduled
+  }
+
+  rafId = requestAnimationFrame(() => {
+    if (!lastEventData) {
+      rafId = null;
+      return;
+    }
+
+    const { x: eventX, y: eventY } = lastEventData;
+    const { proximity, inactiveOpacityStr } = configCache.value;
+
+    // Process all elements
+    for (const cardElem of containerGlowItem.value) {
+      // Check the card against the proximity and then start updating
+      const cardBounds = cardElem.getBoundingClientRect();
+
+      // Pre-calculate bounds to avoid repeated operations
+      const leftBound = cardBounds.left - proximity;
+      const rightBound = cardBounds.left + cardBounds.width + proximity;
+      const topBound = cardBounds.top - proximity;
+      const bottomBound = cardBounds.top + cardBounds.height + proximity;
+
+      // Check proximity with pre-calculated bounds
+      const isInProximity = eventX > leftBound && eventX < rightBound && eventY > topBound && eventY < bottomBound;
+
+      // Set opacity based on proximity
+      cardElem.style.setProperty("--opacity-active", isInProximity ? "1" : inactiveOpacityStr);
+
+      if (isInProximity) {
+        // Only calculate angle when in proximity
+        const cardCentreX = cardBounds.left + cardBounds.width * 0.5;
+        const cardCentreY = cardBounds.top + cardBounds.height * 0.5;
+
+        let angle = Math.atan2(eventY - cardCentreY, eventX - cardCentreX) * RAD_TO_DEG;
+        angle = angle < 0 ? angle + FULL_CIRCLE : angle;
+
+        cardElem.style.setProperty("--start", String(angle + ANGLE_OFFSET));
+      }
+    }
+
+    rafId = null;
+  });
+};
 
 const applyStyles = () => {
-  containerGlowWrapper.value?.style.setProperty("--gap", String(props.config.gap))
-  containerGlowWrapper.value?.style.setProperty("--blur", String(props.config.blur))
-  containerGlowWrapper.value?.style.setProperty("--spread", String(props.config.spread))
-  containerGlowWrapper.value?.style.setProperty("--direction", props.config.vertical ? "column" : "row")
-}
+  if (!containerGlowWrapper.value) return;
+
+  const { gapStr, blurStr, spreadStr, direction } = configCache.value;
+  const wrapper = containerGlowWrapper.value;
 
-// document.body.addEventListener('pointermove', updateStyles);
+  // Batch DOM updates
+  wrapper.style.setProperty("--gap", gapStr);
+  wrapper.style.setProperty("--blur", blurStr);
+  wrapper.style.setProperty("--spread", spreadStr);
+  wrapper.style.setProperty("--direction", direction);
+};
+
+// Watch for config changes and reapply styles
+watch(() => props.config, applyStyles, { deep: true });
 
 onMounted(() => {
-  applyStyles()
+  applyStyles();
   if (containerGlowWrapper.value) {
     document.body.addEventListener("pointermove", updateStyles, {
       signal: controller.signal,
-    })
+      passive: true, // Improve scroll performance
+    });
   }
-})
+});
 
 onBeforeUnmount(() => {
-  return controller.abort()
-})
+  // Clean up RAF if pending
+  if (rafId !== null) {
+    cancelAnimationFrame(rafId);
+    rafId = null;
+  }
+  lastEventData = null;
+  controller.abort();
+});
 </script>
 
 <style lang="css">
+@layer components {
 .container-glow-wrapper {
   @property --start {
     syntax: "<number>";
@@ -130,7 +195,7 @@ onBeforeUnmount(() => {
       #4dffbf 288.0000042915344deg,
       hsla(0, 0%, 98%, 1) 1turn
     );
-    --opacity-active: 0.15;
+    --opacity-active: v-bind("props.config.inactiveOpacity");
     --start: 0;
 
     position: relative;
@@ -165,7 +230,8 @@ onBeforeUnmount(() => {
       background: hsl(280 10% 50% / 1);
       background-attachment: fixed;
       border-radius: 12px;
-      mask: linear-gradient(#0000, #0000),
+      mask:
+        linear-gradient(#0000, #0000),
         conic-gradient(
           from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg),
           hsl(0 0% 100% / 0.15) 0deg,
@@ -188,7 +254,8 @@ onBeforeUnmount(() => {
       transition: opacity 1s;
       --alpha: 0;
       border: 2px solid transparent;
-      mask: linear-gradient(#0000, #0000),
+      mask:
+        linear-gradient(#0000, #0000),
         conic-gradient(
           from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg),
           #0000 0deg,
@@ -216,7 +283,8 @@ onBeforeUnmount(() => {
         inset: -5px;
         border: 10px solid transparent;
         border-radius: 12px;
-        mask: linear-gradient(#0000, #0000),
+        mask:
+          linear-gradient(#0000, #0000),
           conic-gradient(
             from calc((var(--start) - (var(--spread) * 0.5)) * 1deg),
             #000 0deg,
@@ -231,4 +299,5 @@ onBeforeUnmount(() => {
     }
   }
 }
+}
 </style>

package/app/components/container-glow/stories/ContainerGlowCore.stories.ts

@@ -0,0 +1,337 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import ContainerGlowCoreComponent from "../ContainerGlowCore.vue";
+
+// Define the args interface
+interface ContainerGlowCoreArgs {
+  itemCount: number;
+  tag: string;
+  styleClassPassthrough: string[];
+  config: {
+    proximity: number;
+    spread: number;
+    blur: number;
+    gap: number;
+    vertical: boolean;
+    inactiveOpacity: number;
+  };
+}
+
+export default {
+  title: "Components/Effects/ContainerGlowCore",
+  component: ContainerGlowCoreComponent,
+  argTypes: {
+    // Core Properties
+    itemCount: {
+      control: { type: "range", min: 1, max: 6, step: 1 },
+      description: "Number of glowing containers to render",
+      table: {
+        category: "Core",
+      },
+    },
+    tag: {
+      control: { type: "text" },
+      description: "HTML tag for each container",
+      table: {
+        category: "Semantic",
+      },
+    },
+    // Config Object
+    config: {
+      control: { type: "object" },
+      description: "Configuration object for glow effects",
+      table: {
+        category: "Configuration",
+      },
+    },
+    // Individual config controls
+    "config.proximity": {
+      control: { type: "range", min: 10, max: 200, step: 10 },
+      description: "Mouse proximity distance to trigger glow effect (px)",
+      table: {
+        category: "Glow Settings",
+      },
+    },
+    "config.spread": {
+      control: { type: "range", min: 20, max: 180, step: 10 },
+      description: "Angular spread of the glow effect (degrees)",
+      table: {
+        category: "Glow Settings",
+      },
+    },
+    "config.blur": {
+      control: { type: "range", min: 0, max: 50, step: 2 },
+      description: "Blur amount for the glow effect (px)",
+      table: {
+        category: "Glow Settings",
+      },
+    },
+    "config.gap": {
+      control: { type: "range", min: 8, max: 64, step: 4 },
+      description: "Gap between containers (px)",
+      table: {
+        category: "Layout",
+      },
+    },
+    "config.vertical": {
+      control: { type: "boolean" },
+      description: "Arrange containers vertically instead of horizontally",
+      table: {
+        category: "Layout",
+      },
+    },
+    "config.inactiveOpacity": {
+      control: { type: "range", min: 0.05, max: 1, step: 0.05 },
+      description: "Opacity of the glow effect when not hovering (inactive state)",
+      table: {
+        category: "Glow Settings",
+      },
+    },
+    // Hide complex props
+    styleClassPassthrough: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    itemCount: 3,
+    tag: "div",
+    styleClassPassthrough: [],
+    config: {
+      proximity: 40,
+      spread: 80,
+      blur: 20,
+      gap: 32,
+      vertical: false,
+      inactiveOpacity: 0,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "An interactive glow effect component that creates multiple containers with animated gradient borders that respond to mouse movement. Each container glows more intensely when the cursor is nearby, with customizable proximity detection, blur effects, and gradient animations.",
+      },
+    },
+  },
+} as Meta<ContainerGlowCoreArgs>;
+
+const Template: StoryFn<ContainerGlowCoreArgs> = (args) => ({
+  components: { ContainerGlowCoreComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="background: radial-gradient(ellipse at center, #0f0f23 0%, #020024 100%); padding: 60px 40px; min-height: 80vh; display: flex; align-items: center; justify-content: center;">
+      <div style="text-align: center; width: 100%;">
+        <div style="margin-bottom: 40px;">
+          <h2 style="color: white; margin: 0 0 16px 0; font-size: 28px; font-weight: 700; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);">
+            ✨ Interactive Glow Effects
+          </h2>
+          <p style="color: rgba(255, 255, 255, 0.8); margin: 0 0 8px 0; font-size: 16px;">
+            Move your mouse over the containers to see the glow effect
+          </p>
+          <p style="color: rgba(255, 255, 255, 0.6); margin: 0; font-size: 14px;">
+            {{ args.itemCount }} container{{ args.itemCount > 1 ? 's' : '' }} • {{ args.config.vertical ? 'Vertical' : 'Horizontal' }} layout
+          </p>
+        </div>
+
+        <ContainerGlowCoreComponent
+          :item-count="args.itemCount"
+          :tag="args.tag"
+          :style-class-passthrough="args.styleClassPassthrough"
+          :config="args.config"
+        >
+          <template v-for="n in args.itemCount" :key="n" v-slot:['container-glow-' + (n - 1)]>
+            <div style="height: 100%; display: flex; flex-direction: column;">
+              <div style="text-align: center; margin-bottom: 16px;">
+                <div style="width: 48px; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; margin: 0 auto 12px auto; display: flex; align-items: center; justify-content: center; font-size: 20px; color: white; font-weight: bold;">
+                  {{ n }}
+                </div>
+                <h3 style="margin: 0 0 8px 0; color: #374151; font-size: 18px; font-weight: 600;">
+                  Container {{ n }}
+                </h3>
+                <p style="margin: 0; color: #6b7280; font-size: 14px;">
+                  Interactive glow card
+                </p>
+              </div>
+
+              <div style="flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 16px 0;">
+                <div style="padding: 16px; background: rgba(0, 0, 0, 0.02); border-radius: 8px; margin-bottom: 16px;">
+                  <h4 style="margin: 0 0 8px 0; color: #4b5563; font-size: 14px; font-weight: 600;">Effect Settings</h4>
+                  <div style="font-family: monospace; font-size: 11px; color: #6b7280; line-height: 1.4;">
+                    <div>Proximity: {{ args.config.proximity }}px</div>
+                    <div>Spread: {{ args.config.spread }}°</div>
+                    <div>Blur: {{ args.config.blur }}px</div>
+                  </div>
+                </div>
+
+                <div style="padding: 12px; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-radius: 6px; border-left: 3px solid #3b82f6;">
+                  <p style="margin: 0; color: #1e40af; font-size: 12px; line-height: 1.4; font-weight: 500;">
+                    💡 Hover to activate the glow effect with mouse tracking
+                  </p>
+                </div>
+              </div>
+            </div>
+          </template>
+        </ContainerGlowCoreComponent>
+      </div>
+    </div>
+  `,
+});
+
+// ===== BASIC STORIES =====
+
+export const Default = Template.bind({});
+Default.args = {};
+
+// ===== CONTAINER COUNT STORIES =====
+
+export const SingleContainer = Template.bind({});
+SingleContainer.args = {
+  itemCount: 1,
+};
+SingleContainer.parameters = {
+  docs: {
+    description: {
+      story:
+        "Single container with glow effects - perfect for highlighting individual elements or call-to-action cards.",
+    },
+  },
+};
+
+export const TwoContainers = Template.bind({});
+TwoContainers.args = {
+  itemCount: 2,
+};
+
+export const FourContainers = Template.bind({});
+FourContainers.args = {
+  itemCount: 4,
+};
+FourContainers.parameters = {
+  docs: {
+    description: {
+      story:
+        "Four containers showing how the glow effect scales with multiple elements - ideal for feature grids or product showcases.",
+    },
+  },
+};
+
+// ===== CONFIGURATION STORIES =====
+
+export const HighIntensityGlow: StoryFn<ContainerGlowCoreArgs> = (args) => ({
+  components: { ContainerGlowCoreComponent },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div style="background: #000000; padding: 60px 40px; min-height: 80vh; display: flex; align-items: center; justify-content: center;">
+      <div style="text-align: center; width: 100%;">
+        <div style="margin-bottom: 40px;">
+          <h2 style="color: white; margin: 0 0 16px 0; font-size: 28px; font-weight: 700; text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);">
+            🔥 High Intensity Glow
+          </h2>
+          <p style="color: rgba(255, 255, 255, 0.8); margin: 0 0 8px 0; font-size: 16px;">
+            Maximum glow settings for dramatic effects
+          </p>
+          <div style="display: inline-flex; gap: 16px; font-family: monospace; font-size: 12px; color: #10b981;">
+            <span>Proximity: {{ args.config.proximity }}px</span>
+            <span>Spread: {{ args.config.spread }}°</span>
+            <span>Blur: {{ args.config.blur }}px</span>
+            <span>Inactive Opacity: {{ args.config.inactiveOpacity }}</span>
+          </div>
+        </div>
+
+        <ContainerGlowCoreComponent
+          :item-count="args.itemCount"
+          :tag="args.tag"
+          :style-class-passthrough="args.styleClassPassthrough"
+          :config="args.config"
+        >
+          <template v-for="n in args.itemCount" :key="n" v-slot:['container-glow-' + (n - 1)]>
+            <div style="height: 100%; display: flex; flex-direction: column; text-align: center;">
+              <div style="margin-bottom: 20px;">
+                <div style="width: 56px; height: 56px; background: linear-gradient(135deg, #ff6b6b, #ffd93d, #6bcf7f, #4d79ff); border-radius: 16px; margin: 0 auto 16px auto; display: flex; align-items: center; justify-content: center; font-size: 24px; color: white; font-weight: bold; box-shadow: 0 0 20px rgba(255, 107, 107, 0.4);">
+                  🌟
+                </div>
+                <h3 style="margin: 0 0 8px 0; color: white; font-size: 18px; font-weight: 700; text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);">
+                  Intense {{ n }}
+                </h3>
+                <p style="margin: 0; color: rgba(255, 255, 255, 0.7); font-size: 14px;">
+                  High-impact glow effect
+                </p>
+              </div>
+
+              <div style="flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px;">
+                <div style="padding: 20px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1);">
+                  <h4 style="margin: 0 0 12px 0; color: #f59e0b; font-size: 14px; font-weight: 600;">⚡ Power Settings</h4>
+                  <div style="display: grid; gap: 8px; font-family: monospace; font-size: 10px; color: rgba(255, 255, 255, 0.8);">
+                    <div style="display: flex; justify-content: space-between;">
+                      <span>Range:</span>
+                      <span style="color: #10b981;">{{ args.config.proximity }}px</span>
+                    </div>
+                    <div style="display: flex; justify-content: space-between;">
+                      <span>Intensity:</span>
+                      <span style="color: #f59e0b;">{{ Math.round(args.config.inactiveOpacity * 100) }}%</span>
+                    </div>
+                    <div style="display: flex; justify-content: space-between;">
+                      <span>Blur:</span>
+                      <span style="color: #8b5cf6;">{{ args.config.blur }}px</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div style="padding: 16px; background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(139, 92, 246, 0.1)); border-radius: 8px; border: 1px solid rgba(255, 107, 107, 0.2);">
+                  <p style="margin: 0; color: #ff6b6b; font-size: 11px; line-height: 1.4; font-weight: 500;">
+                    🎯 Move cursor close for maximum glow intensity
+                  </p>
+                </div>
+              </div>
+            </div>
+          </template>
+        </ContainerGlowCoreComponent>
+      </div>
+    </div>
+  `,
+});
+HighIntensityGlow.args = {
+  itemCount: 3,
+  config: {
+    proximity: 100,
+    spread: 120,
+    blur: 40,
+    gap: 48,
+    vertical: false,
+    inactiveOpacity: 0,
+  },
+};
+HighIntensityGlow.parameters = {
+  docs: {
+    description: {
+      story:
+        "High-intensity glow configuration with increased proximity range, spread, blur, and opacity for dramatic visual effects.",
+    },
+  },
+};
+
+export const SubtleGlow = Template.bind({});
+SubtleGlow.args = {
+  itemCount: 4,
+  config: {
+    proximity: 30,
+    spread: 40,
+    blur: 10,
+    gap: 20,
+    vertical: false,
+    inactiveOpacity: 0,
+  },
+};
+SubtleGlow.parameters = {
+  docs: {
+    description: {
+      story:
+        "Subtle glow configuration with reduced intensity, tighter proximity, and minimal blur for elegant, understated effects.",
+    },
+  },
+};

package/app/components/content-columns/TwoColumns.vue

@@ -0,0 +1,59 @@
+<template>
+  <component
+    :is="props.tag"
+    class="two-column-layout-container"
+    :class="[elementClasses]"
+    :data-testid="props.dataTestid"
+  >
+    <div class="two-column-layout">
+      <div v-if="slots.col1" class="col-1">
+        <slot name="col1"></slot>
+      </div>
+      <div v-if="slots.col2" class="col-2">
+        <slot name="col2"></slot>
+      </div>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  dataTestid: {
+    type: String,
+    default: "two-column-layout",
+  },
+  tag: {
+    type: String,
+    default: "div",
+    validator(value: string) {
+      return ["div", "section", "article", "aside", "header", "footer", "main", "nav"].includes(value);
+    },
+  },
+  styleClassPassthrough: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: () => [],
+  },
+});
+const slots = useSlots();
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+@layer components {
+.two-column-layout-container {
+  container-type: inline-size;
+  container-name: two-column-layout;
+
+  .two-column-layout {
+    display: grid;
+    justify-content: start;
+    grid-auto-flow: row;
+    gap: 32px;
+
+    @container two-column-layout (width >= 1064px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+}
+}
+</style>