srcdev-nuxt-components 9.4.9 → 9.4.10

package/app/components/01.atoms/animations/container-glow/ContainerGlow.vue

@@ -0,0 +1,299 @@
+<template>
+  <div ref="containerGlowWrapper" class="container-glow-wrapper" :class="elementClasses">
+    <component
+      :is="tag"
+      v-for="(_, name) in $slots"
+      :key="name"
+      ref="containerGlowItem"
+      class="container-glow"
+    >
+      <div class="glows"></div>
+      <slot :name="name"></slot>
+    </component>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ContainerGlowConfig } from "~/types/components";
+
+interface Props {
+  tag?: "div" | "li" | "article" | "section";
+  config?: ContainerGlowConfig;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  config: () => ({}),
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+
+const controller = new AbortController();
+
+const containerGlowWrapper = ref<HTMLElement>();
+const containerGlowItem = ref<HTMLElement[]>([]);
+
+// Cache frequently used values to avoid repeated access
+const configCache = computed(() => ({
+  proximity: props.config.proximity ?? 40,
+  inactiveOpacityStr: String(props.config.inactiveOpacity ?? 0),
+  gapStr: String(props.config.gap ?? 32),
+  blurStr: String(props.config.blur ?? 20),
+  spreadStr: String(props.config.spread ?? 80),
+  direction: props.config.vertical ? "column" : "row",
+}));
+
+// 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) => {
+  // 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 = () => {
+  if (!containerGlowWrapper.value) return;
+
+  const { gapStr, blurStr, spreadStr, direction } = configCache.value;
+  const wrapper = containerGlowWrapper.value;
+
+  // 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();
+  if (containerGlowWrapper.value) {
+    document.body.addEventListener("pointermove", updateStyles, {
+      signal: controller.signal,
+      passive: true, // Improve scroll performance
+    });
+  }
+});
+
+onBeforeUnmount(() => {
+  // Clean up RAF if pending
+  if (rafId !== null) {
+    cancelAnimationFrame(rafId);
+    rafId = null;
+  }
+  lastEventData = null;
+  controller.abort();
+});
+</script>
+
+<style lang="css">
+@layer components {
+  @property --_start {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 0;
+  }
+
+  .container-glow-wrapper {
+    display: flex;
+    flex-direction: var(--_direction, row);
+    gap: calc(var(--_gap, 32) * 1px);
+
+    .container-glow {
+      & *,
+      & *:after,
+      & *:before {
+        box-sizing: border-box;
+      }
+
+      --_gradient: var(
+        --container-glow-gradient,
+        conic-gradient(
+          from 180deg at 50% 70%,
+          hsla(0, 0%, 98%, 1) 0deg,
+          #eec32d 72.0000010728836deg,
+          #ec4b4b 144.0000021457672deg,
+          #709ab9 216.00000858306885deg,
+          #4dffbf 288.0000042915344deg,
+          hsla(0, 0%, 98%, 1) 1turn
+        )
+      );
+      --_opacity-active: v-bind("props.config.inactiveOpacity ?? 0");
+      --_start: 0;
+
+      position: relative;
+
+      height: 100%;
+      background: var(--container-glow-background, light-dark(white, hsl(246 44% 7%)));
+      padding: var(--container-glow-padding, 2rem);
+      aspect-ratio: var(--container-glow-aspect-ratio, 330 / 400);
+      border-radius: var(--container-glow-border-radius, 12px);
+      min-width: var(--container-glow-min-width, 280px);
+      max-width: var(--container-glow-max-width, 280px);
+      display: flex;
+      flex-direction: column;
+      gap: var(--container-glow-content-gap, 0.25rem);
+
+      &:is(:hover, :focus-visible) {
+        z-index: 2;
+      }
+
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+      }
+
+      &::before {
+        pointer-events: none;
+
+        border: 2px solid transparent;
+        border-radius: var(--container-glow-border-radius, 12px);
+        background: var(--container-glow-highlight-colour, hsl(280 10% 50% / 1));
+        background-attachment: fixed;
+        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,
+            white,
+            hsl(0 0% 100% / 0.15) calc(var(--_spread) * 2.5deg)
+          );
+        mask-clip: padding-box, border-box;
+        mask-composite: intersect;
+        opacity: var(--_opacity-active);
+        transition: opacity var(--container-glow-transition-duration, 1s);
+      }
+
+      &::after {
+        pointer-events: none;
+
+        background: var(--_gradient);
+        background-attachment: fixed;
+        border-radius: var(--container-glow-border-radius, 12px);
+        opacity: var(--_opacity-active, 0);
+        transition: opacity var(--container-glow-transition-duration, 1s);
+        border: 2px solid transparent;
+        mask:
+          linear-gradient(#0000, #0000),
+          conic-gradient(
+            from calc(((var(--_start) + (var(--_spread) * 0.25)) - (var(--_spread) * 0.5)) * 1deg),
+            #0000 0deg,
+            #fff,
+            #0000 calc(var(--_spread) * 0.5deg)
+          );
+        filter: brightness(var(--container-glow-brightness, 1.5));
+        mask-clip: padding-box, border-box;
+        mask-composite: intersect;
+      }
+
+      .glows {
+        pointer-events: none;
+        position: absolute;
+        inset: 0;
+        filter: blur(calc(var(--_blur) * 1px));
+
+        &::after,
+        &::before {
+          content: "";
+          background: var(--_gradient);
+          background-attachment: fixed;
+          position: absolute;
+          inset: -5px;
+          border: 10px solid transparent;
+          border-radius: var(--container-glow-border-radius, 12px);
+          mask:
+            linear-gradient(#0000, #0000),
+            conic-gradient(
+              from calc((var(--_start) - (var(--_spread) * 0.5)) * 1deg),
+              #000 0deg,
+              #fff,
+              #0000 calc(var(--_spread) * 1deg)
+            );
+          mask-composite: intersect;
+          mask-clip: padding-box, border-box;
+          opacity: var(--_opacity-active);
+          transition: opacity var(--container-glow-transition-duration, 1s);
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        &::before,
+        &::after,
+        .glows::before,
+        .glows::after {
+          transition: none;
+        }
+      }
+    }
+  }
+}
+</style>

package/app/components/01.atoms/animations/container-glow/stories/ContainerGlow.stories.ts

@@ -0,0 +1,175 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import { computed } from "vue";
+import StorybookComponent from "../ContainerGlow.vue";
+
+type StoryArgs = {
+  tag: "div" | "li" | "article" | "section";
+  proximity: number;
+  spread: number;
+  blur: number;
+  gap: number;
+  vertical: boolean;
+  inactiveOpacity: number;
+};
+
+export default {
+  title: "Atoms/Effects/ContainerGlow",
+  component: StorybookComponent,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "li", "article", "section"],
+      description: "HTML tag rendered for each glow container",
+    },
+    proximity: {
+      control: { type: "range", min: 10, max: 200, step: 10 },
+      description: "Mouse proximity distance (px) that triggers the glow",
+      table: { category: "config" },
+    },
+    spread: {
+      control: { type: "range", min: 20, max: 180, step: 10 },
+      description: "Angular spread of the glow effect (degrees)",
+      table: { category: "config" },
+    },
+    blur: {
+      control: { type: "range", min: 0, max: 50, step: 2 },
+      description: "Blur amount for the glow effect (px)",
+      table: { category: "config" },
+    },
+    gap: {
+      control: { type: "range", min: 8, max: 64, step: 4 },
+      description: "Gap between containers (px)",
+      table: { category: "config" },
+    },
+    vertical: {
+      control: { type: "boolean" },
+      description: "Arrange containers vertically instead of horizontally",
+      table: { category: "config" },
+    },
+    inactiveOpacity: {
+      control: { type: "range", min: 0, max: 1, step: 0.05 },
+      description: "Opacity of the glow when not being hovered near",
+      table: { category: "config" },
+    },
+    styleClassPassthrough: {
+      table: { disable: true },
+    },
+    class: {
+      table: { disable: true },
+    },
+    style: {
+      table: { disable: true },
+    },
+  },
+  args: {
+    tag: "div",
+    proximity: 40,
+    spread: 80,
+    blur: 20,
+    gap: 32,
+    vertical: false,
+    inactiveOpacity: 0,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "An interactive glow effect wrapper that creates one card per named slot the consumer provides, each with an animated gradient border that responds to mouse proximity.",
+      },
+    },
+  },
+} as Meta<StoryArgs>;
+
+const cardStyle =
+  "height: 100%; display: flex; flex-direction: column; justify-content: center; text-align: center; color: #374151;";
+
+const Template: StoryFn<StoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const config = computed(() => ({
+      proximity: args.proximity,
+      spread: args.spread,
+      blur: args.blur,
+      gap: args.gap,
+      vertical: args.vertical,
+      inactiveOpacity: args.inactiveOpacity,
+    }));
+    return { args, config };
+  },
+  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;">
+      <StorybookComponent :tag="args.tag" :config="config">
+        <template #one>
+          <div style="${cardStyle}">
+            <h3 style="margin: 0 0 8px 0;">Container 1</h3>
+            <p style="margin: 0; font-size: 1.3rem;">Move your cursor nearby</p>
+          </div>
+        </template>
+        <template #two>
+          <div style="${cardStyle}">
+            <h3 style="margin: 0 0 8px 0;">Container 2</h3>
+            <p style="margin: 0; font-size: 1.3rem;">Each named slot is one card</p>
+          </div>
+        </template>
+        <template #three>
+          <div style="${cardStyle}">
+            <h3 style="margin: 0 0 8px 0;">Container 3</h3>
+            <p style="margin: 0; font-size: 1.3rem;">No item-count prop needed</p>
+          </div>
+        </template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+
+export const SingleContainer: StoryFn<StoryArgs> = (args) => ({
+  components: { StorybookComponent },
+  setup() {
+    const config = computed(() => ({
+      proximity: args.proximity,
+      spread: args.spread,
+      blur: args.blur,
+      gap: args.gap,
+      vertical: args.vertical,
+      inactiveOpacity: args.inactiveOpacity,
+    }));
+    return { args, config };
+  },
+  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;">
+      <StorybookComponent :tag="args.tag" :config="config">
+        <template #cta>
+          <div style="${cardStyle}">
+            <h3 style="margin: 0 0 8px 0;">Single container</h3>
+            <p style="margin: 0; font-size: 1.3rem;">Perfect for one highlighted call-to-action card</p>
+          </div>
+        </template>
+      </StorybookComponent>
+    </div>
+  `,
+});
+
+export const Vertical = Template.bind({});
+Vertical.args = {
+  vertical: true,
+};
+
+export const HighIntensity = Template.bind({});
+HighIntensity.args = {
+  proximity: 100,
+  spread: 120,
+  blur: 40,
+  gap: 48,
+  inactiveOpacity: 0,
+};
+
+export const SubtleGlow = Template.bind({});
+SubtleGlow.args = {
+  proximity: 30,
+  spread: 40,
+  blur: 10,
+  gap: 20,
+  inactiveOpacity: 0,
+};

package/app/components/01.atoms/animations/container-glow/tests/ContainerGlow.spec.ts

@@ -0,0 +1,131 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ContainerGlow from "../ContainerGlow.vue";
+
+describe("ContainerGlow", () => {
+  // ─── Mount ───────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(ContainerGlow, {
+      slots: { one: "<p>One</p>" },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Snapshots ───────────────────────────────────────────────────────────
+
+  it("renders correct HTML structure (default)", async () => {
+    const wrapper = await mountSuspended(ContainerGlow, {
+      slots: { one: "<p>One</p>", two: "<p>Two</p>" },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  // ─── Wrapper ────────────────────────────────────────────────────────────
+
+  it("always has the container-glow-wrapper class on the root", async () => {
+    const wrapper = await mountSuspended(ContainerGlow, {
+      slots: { one: "<p>One</p>" },
+    });
+    expect(wrapper.classes()).toContain("container-glow-wrapper");
+  });
+
+  // ─── Named dynamic slots ────────────────────────────────────────────────
+
+  it("renders one container-glow item per named slot", async () => {
+    const wrapper = await mountSuspended(ContainerGlow, {
+      slots: { one: "<p class='one'>One</p>", two: "<p class='two'>Two</p>", three: "<p class='three'>Three</p>" },
+    });
+    expect(wrapper.findAll(".container-glow").length).toBe(3);
+    expect(wrapper.find(".one").exists()).toBe(true);
+    expect(wrapper.find(".two").exists()).toBe(true);
+    expect(wrapper.find(".three").exists()).toBe(true);
+  });
+
+  it("renders no container-glow items when no slots are provided", async () => {
+    const wrapper = await mountSuspended(ContainerGlow);
+    expect(wrapper.findAll(".container-glow").length).toBe(0);
+  });
+
+  // ─── Tag ────────────────────────────────────────────────────────────────
+
+  it("renders each item as <div> by default", async () => {
+    const wrapper = await mountSuspended(ContainerGlow, {
+      slots: { one: "<p>One</p>" },
+    });
+    expect(wrapper.find(".container-glow").element.tagName).toBe("DIV");
+  });
+
+  it.each(["div", "li", "article", "section"] as const)("renders each item as <%s> when tag='%s'", async (tag) => {
+    const wrapper = await mountSuspended(ContainerGlow, {
+      props: { tag },
+      slots: { one: "<p>One</p>" },
+    });
+    expect(wrapper.find(".container-glow").element.tagName).toBe(tag.toUpperCase());
+  });
+
+  // ─── Config ─────────────────────────────────────────────────────────────
+
+  it("applies default config values to the wrapper as CSS custom properties", async () => {
+    const wrapper = await mountSuspended(ContainerGlow, {
+      slots: { one: "<p>One</p>" },
+    });
+    const style = wrapper.element.style;
+    expect(style.getPropertyValue("--_gap")).toBe("32");
+    expect(style.getPropertyValue("--_blur")).toBe("20");
+    expect(style.getPropertyValue("--_spread")).toBe("80");
+    expect(style.getPropertyValue("--_direction")).toBe("row");
+  });
+
+  it("applies custom config values to the wrapper as CSS custom properties", async () => {
+    const wrapper = await mountSuspended(ContainerGlow, {
+      props: { config: { gap: 48, blur: 40, spread: 120, vertical: true } },
+      slots: { one: "<p>One</p>" },
+    });
+    const style = wrapper.element.style;
+    expect(style.getPropertyValue("--_gap")).toBe("48");
+    expect(style.getPropertyValue("--_blur")).toBe("40");
+    expect(style.getPropertyValue("--_spread")).toBe("120");
+    expect(style.getPropertyValue("--_direction")).toBe("column");
+  });
+
+  it("does not require every config field to be set", async () => {
+    const wrapper = await mountSuspended(ContainerGlow, {
+      props: { config: { blur: 5 } },
+      slots: { one: "<p>One</p>" },
+    });
+    const style = wrapper.element.style;
+    expect(style.getPropertyValue("--_blur")).toBe("5");
+    expect(style.getPropertyValue("--_gap")).toBe("32");
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(ContainerGlow, {
+      props: { styleClassPassthrough: "featured" },
+      slots: { one: "<p>One</p>" },
+    });
+    expect(wrapper.classes()).toContain("featured");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(ContainerGlow, {
+      props: { styleClassPassthrough: ["featured", "highlighted"] },
+      slots: { one: "<p>One</p>" },
+    });
+    expect(wrapper.classes()).toContain("featured");
+    expect(wrapper.classes()).toContain("highlighted");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(ContainerGlow, {
+      props: { styleClassPassthrough: ["featured"] },
+      slots: { one: "<p>One</p>" },
+    });
+    expect(wrapper.classes()).toContain("featured");
+    await wrapper.setProps({ styleClassPassthrough: ["highlighted"] });
+    expect(wrapper.classes()).not.toContain("featured");
+    expect(wrapper.classes()).toContain("highlighted");
+  });
+});

package/app/components/01.atoms/animations/container-glow/tests/__snapshots__/ContainerGlow.spec.ts.snap

@@ -0,0 +1,14 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ContainerGlow > renders correct HTML structure (default) 1`] = `
+"<div class="container-glow-wrapper" style="--_gap: 32; --_blur: 20; --_spread: 80; --_direction: row;">
+  <div class="container-glow">
+    <div class="glows"></div>
+    <p>One</p>
+  </div>
+  <div class="container-glow">
+    <div class="glows"></div>
+    <p>Two</p>
+  </div>
+</div>"
+`;

package/app/components/01.atoms/animations/glowing-border/CONSUMER-STYLING.md

@@ -0,0 +1,61 @@
+# GlowingBorder — Consumer Styling Guide
+
+## Public CSS custom properties
+
+| Token | Default | Description |
+|---|---|---|
+| `--glowing-border-width` | `3px` | Border thickness. |
+| `--glowing-border-radius` | `30px` | Corner radius. |
+| `--glowing-border-surface` | `canvas` | Fill colour behind the glow (the padding-box layer). |
+| `--glowing-border-animation-duration` | `10s` | Time for the glow to complete one full rotation. |
+
+```vue
+<GlowingBorder
+  style="--glowing-border-width: 6px; --glowing-border-radius: 8px; --glowing-border-animation-duration: 3s;"
+>
+  <p>Fast, sharp-cornered glow</p>
+</GlowingBorder>
+```
+
+## Variant colour stops
+
+Each `variant` drives a 5-stop conic gradient. Every stop is an individually overridable token,
+named `--glowing-border-{variant}-color-{1-5}`:
+
+| Variant | Stops (defaults) |
+|---|---|
+| `subtle` (default) | `--glowing-border-subtle-color-1` `#ff9a9e` · `-2` `#fad0c4` · `-3` `#fad0c4` · `-4` `#fbc2eb` · `-5` `#a18cd1` |
+| `vivid` | `--glowing-border-vivid-color-1` `#ff0000` · `-2` `#ffa500` · `-3` `#ffff00` · `-4` `#008000` · `-5` `#0000ff` |
+| `silver` | `--glowing-border-silver-color-1` `#d4d4d4` · `-2` `#e4e4e4` · `-3` `#f5f5f5` · `-4` `#e4e4e4` · `-5` `#d4d4d4` |
+| `steel` | `--glowing-border-steel-color-1` `#434343` · `-2` `#5a5a5a` · `-3` `#6e6e6e` · `-4` `#5a5a5a` · `-5` `#434343` |
+| `green` | `--glowing-border-green-color-1` `#00ff87` · `-2` `#39ff14` · `-3` `#00c853` · `-4` `#64dd17` · `-5` `#00e676` |
+
+```vue
+<GlowingBorder
+  variant="vivid"
+  style="--glowing-border-vivid-color-1: var(--theme-accent); --glowing-border-vivid-color-5: var(--theme-accent-alt);"
+>
+  <p>Brand-coloured glow</p>
+</GlowingBorder>
+```
+
+## Motion
+
+The glow rotates continuously via CSS animation and stops automatically when the visitor has
+`prefers-reduced-motion: reduce` set.
+
+## Class passthrough
+
+Use `styleClassPassthrough` to add classes to the root element for layout purposes (positioning,
+sizing) — it doesn't affect the glow's colours or geometry, which stay governed by the tokens
+above.
+
+```vue
+<GlowingBorder style-class-passthrough="my-glowing-border">...</GlowingBorder>
+```
+
+## Internal (non-overridable) custom properties
+
+`--_glow-deg`, `--_clr-1` through `--_clr-5`, and `--_gradient-glow` are internal composition
+plumbing (the resolved per-variant colour stops and the animated rotation angle) — use the public
+tokens above instead.