srcdev-nuxt-components 9.6.9 → 9.6.11

package/app/types/components/index.ts

@@ -8,7 +8,7 @@ export * from "./responsive-header.d"
 export * from "./display-toast.d"
 export * from "./display-prompt.d"
 export * from "./qr-code.d"
-export * from "./alert-mask-core.d"
+export * from "./alert-mask.d"
 export * from "./container-glow.d"
 export * from "./hero-text"
 export * from "./social-icons-list.d"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.6.9",
+  "version": "9.6.11",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",

package/.vscode/srcdev-component-alert-mask-core.code-snippets

@@ -1,31 +0,0 @@
-{
-  "SRCDEV AlertMaskCore Basic": {
-    "description": "AlertMaskCore — SVG border/background mask sized to slotted content",
-    "scope": "vue,html",
-    "body": [
-      "<AlertMaskCore>",
-      "  $0",
-      "</AlertMaskCore>"
-    ]
-  },
-  "SRCDEV AlertMaskCore Custom Config": {
-    "description": "AlertMaskCore with custom colour/geometry config",
-    "scope": "vue,html",
-    "body": [
-      "<AlertMaskCore",
-      "  :config=\"{",
-      "    borderColour: '$1var(--theme-accent)',",
-      "    backgroundColour: '$2rgba(0, 0, 0, 0.3)',",
-      "    radiusLeft: $38,",
-      "    radiusRight: $44,",
-      "    borderLeft: $56,",
-      "    borderTop: $61,",
-      "    borderRight: $71,",
-      "    borderBottom: $81,",
-      "  }\"",
-      ">",
-      "  $0",
-      "</AlertMaskCore>"
-    ]
-  }
-}

package/app/components/01.atoms/alert-mask/AlertMaskCore.vue

@@ -1,166 +0,0 @@
-<template>
-  <div class="alert-mask-core" :class="[elementClasses]">
-    <svg
-      class="alert-mask-decorator"
-      :style="{ '--_height': svgHeight + 'px' }"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      focusable="false"
-    >
-      <defs>
-        <mask :id="maskId" maskUnits="userSpaceOnUse">
-          <path :d="outerPath" fill="white" />
-          <path :d="innerPath" fill="black" />
-        </mask>
-      </defs>
-
-      <path
-        :d="outerPath"
-        :style="{ fill: cfg.borderColour }"
-        :mask="`url(#${maskId})`"
-        vector-effect="non-scaling-stroke"
-      />
-      <path :d="innerPath" :style="{ fill: cfg.backgroundColour }" />
-    </svg>
-
-    <div
-      class="alert-mask-content"
-      :style="{
-        '--_inset-inline-start': (props.config?.borderLeft ?? 0) + 'px',
-        '--_inset-inline-end': (props.config?.borderRight ?? 0) + 'px',
-        '--_inset-block-start': (props.config?.borderTop ?? 0) + 'px',
-        '--_inset-block-end': (props.config?.borderBottom ?? 0) + 'px',
-      }"
-    >
-      <div ref="alertContentRef" class="alert-mask-content-slot">
-        <slot name="default"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { AlertMaskConfig } from "~/types/components";
-
-interface Props {
-  config?: AlertMaskConfig;
-  styleClassPassthrough?: string | string[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  config: () => ({}),
-  styleClassPassthrough: () => [],
-});
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-const maskId = `alert-mask-${useId()}`;
-const alertContentRef = useTemplateRef<HTMLElement | null>("alertContentRef");
-const svgWidth = ref(0);
-const svgHeight = ref(0);
-let resizeObserver: ResizeObserver | null = null;
-
-// Update dimensions based on content
-onMounted(() => {
-  const updateDimensions = () => {
-    const contentEl = alertContentRef.value;
-    if (!contentEl) return;
-
-    const rect = contentEl.getBoundingClientRect();
-    const { borderLeft, borderTop, borderRight, borderBottom } = cfg.value;
-
-    // Calculate total dimensions including borders
-    svgWidth.value = rect.width + borderLeft + borderRight;
-    svgHeight.value = rect.height + borderTop + borderBottom;
-  };
-
-  // Initial measurement
-  nextTick(updateDimensions);
-
-  // Observe content changes
-  const contentEl = alertContentRef.value;
-  if (contentEl) {
-    resizeObserver = new ResizeObserver(updateDimensions);
-    resizeObserver.observe(contentEl);
-  }
-});
-
-onBeforeUnmount(() => {
-  resizeObserver?.disconnect();
-  resizeObserver = null;
-});
-
-const cfg = computed(() => ({
-  backgroundColour: props.config?.backgroundColour ?? "rgba(0,0,0,0.25)",
-  borderColour: props.config?.borderColour ?? "var(--orange-08)",
-  radiusLeft: props.config?.radiusLeft ?? 12,
-  radiusRight: props.config?.radiusRight ?? 12,
-  borderLeft: props.config?.borderLeft ?? 8,
-  borderTop: props.config?.borderTop ?? 8,
-  borderRight: props.config?.borderRight ?? 8,
-  borderBottom: props.config?.borderBottom ?? 8,
-}));
-
-// Outer border path (fixed radii)
-const outerPath = computed(() => {
-  const width = svgWidth.value;
-  const height = svgHeight.value;
-  const { radiusLeft, radiusRight } = cfg.value;
-
-  if (!width || !height) return "";
-
-  return `
-    M ${radiusLeft} 0
-    L ${width - radiusRight} 0
-    Q ${width} 0 ${width} ${radiusRight}
-    L ${width} ${height - radiusRight}
-    Q ${width} ${height} ${width - radiusRight} ${height}
-    L ${radiusLeft} ${height}
-    Q 0 ${height} 0 ${height - radiusLeft}
-    L 0 ${radiusLeft}
-    Q 0 0 ${radiusLeft} 0 Z
-  `;
-});
-
-// Inner cutout (based on fixed pixel border thickness)
-const innerPath = computed(() => {
-  const width = svgWidth.value;
-  const height = svgHeight.value;
-  const { radiusLeft, radiusRight, borderLeft, borderTop, borderRight, borderBottom: borderBottom } = cfg.value;
-
-  if (!width || !height) return "";
-
-  return `
-    M ${radiusLeft + borderLeft} ${borderTop}
-    L ${width - radiusRight - borderRight} ${borderTop}
-    Q ${width - borderRight} ${borderTop} ${width - borderRight} ${radiusRight + borderTop}
-    L ${width - borderRight} ${height - radiusRight - borderBottom}
-    Q ${width - borderRight} ${height - borderBottom} ${width - radiusRight - borderRight} ${height - borderBottom}
-    L ${radiusLeft + borderLeft} ${height - borderBottom}
-    Q ${borderLeft} ${height - borderBottom} ${borderLeft} ${height - radiusLeft - borderBottom}
-    L ${borderLeft} ${radiusLeft + borderTop}
-    Q ${borderLeft} ${borderTop} ${radiusLeft + borderLeft} ${borderTop} Z
-  `;
-});
-</script>
-
-<style lang="css">
-@layer components {
-.alert-mask-core {
-  display: grid;
-  grid-template-areas: "mask";
-
-  .alert-mask-decorator {
-    grid-area: mask;
-    width: 100%;
-    height: var(--_height);
-  }
-
-  .alert-mask-content {
-    grid-area: mask;
-    margin-block: var(--_inset-block-start) var(--_inset-block-end);
-    margin-inline: var(--_inset-inline-start) var(--_inset-inline-end);
-  }
-}
-}
-</style>

package/app/components/01.atoms/alert-mask/stories/AlertMaskCore.stories.ts

@@ -1,105 +0,0 @@
-import AlertMaskCore from "../AlertMaskCore.vue";
-import type { Meta, StoryObj } from "@nuxtjs/storybook";
-
-const meta: Meta<typeof AlertMaskCore> = {
-  title: "Atoms/AlertMaskCore",
-  component: AlertMaskCore,
-  argTypes: {
-    config: {
-      control: "object",
-      description:
-        "Border/background colour and geometry: backgroundColour, borderColour, radiusLeft, radiusRight, borderLeft, borderTop, borderRight, borderBottom",
-      table: { category: "Basic" },
-    },
-    styleClassPassthrough: {
-      table: { disable: true },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Draws a border/background mask around slotted content via an SVG path, sized to the measured content. Colour and geometry are set via the `config` prop, not CSS tokens — see CONSUMER-STYLING.md.",
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof AlertMaskCore>;
-
-// The mask is a translucent fill plus a cut-out border, so it needs something busy behind it to read at all.
-const backdrop =
-  "background: url('/images/banners/video/lake-banner.jpg') center / cover; padding: 4rem 2.4rem; border-radius: 1.2rem; max-width: 60rem;";
-const gradientBackdrop =
-  "background: repeating-linear-gradient(45deg, oklch(100% 0 0 / 0.18) 0 1.2rem, transparent 1.2rem 2.4rem), linear-gradient(120deg, oklch(70% 0.2 30), oklch(65% 0.2 200) 60%, oklch(55% 0.22 300)); padding: 4rem 2.4rem; border-radius: 1.2rem; max-width: 60rem;";
-
-export const CustomConfig: Story = {
-  args: {
-    config: {
-      backgroundColour: "rgba(0, 0, 0, 0.3)",
-      borderColour: "var(--theme-accent)",
-      radiusLeft: 8,
-      radiusRight: 4,
-      borderLeft: 6,
-      borderTop: 1,
-      borderRight: 1,
-      borderBottom: 1,
-    },
-  },
-  render: (args) => ({
-    components: { AlertMaskCore },
-    setup() {
-      return { args, backdrop };
-    },
-    template: `
-      <div data-theme="info" :style="backdrop">
-        <AlertMaskCore v-bind="args">
-          <p style="margin: 0; padding: 1.6rem; color: white;">Custom accent-bar config, matching AlertMaskedContent's default shape</p>
-        </AlertMaskCore>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: "The accent-bar shape used by AlertMaskedContent: thick left radius/border, thin elsewhere.",
-      },
-    },
-  },
-};
-
-export const OverGradient: Story = {
-  args: {
-    config: {
-      backgroundColour: "rgba(0, 0, 0, 0.3)",
-      borderColour: "white",
-      radiusLeft: 16,
-      radiusRight: 16,
-      borderLeft: 4,
-      borderTop: 4,
-      borderRight: 4,
-      borderBottom: 4,
-    },
-  },
-  render: (args) => ({
-    components: { AlertMaskCore },
-    setup() {
-      return { args, gradientBackdrop };
-    },
-    template: `
-      <div :style="gradientBackdrop">
-        <AlertMaskCore v-bind="args">
-          <p style="margin: 0; padding: 1.6rem; color: white;">Even border all round: the stripes show through the fill and stop at the border's inner edge.</p>
-        </AlertMaskCore>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: "A striped gradient behind an even 4px white border, so the translucent fill and the border's cut-out are both visible.",
-      },
-    },
-  },
-};

package/app/components/01.atoms/alert-mask/tests/AlertMaskCore.spec.ts

@@ -1,342 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
-import AlertMaskCore from "../AlertMaskCore.vue";
-import type { AlertMaskConfig } from "../../../../types/components/alert-mask-core.d";
-
-// Type interface for AlertMaskCore component instance
-interface AlertMaskCoreInstance {
-  cfg: {
-    backgroundColour: string;
-    borderColour: string;
-    radiusLeft: number;
-    radiusRight: number;
-    borderLeft: number;
-    borderTop: number;
-    borderRight: number;
-    borderBottom: number;
-  };
-  alertContentRef: HTMLElement | null;
-  svgWidth: number;
-  svgHeight: number;
-  outerPath: string;
-  innerPath: string;
-}
-
-// Mock ResizeObserver
-// Vitest 4: a mock's implementation must be a regular function (not an
-// arrow function) to remain constructible via `new`.
-const mockResizeObserver = vi.fn(function () {
-  return {
-    observe: vi.fn(),
-    unobserve: vi.fn(),
-    disconnect: vi.fn(),
-  };
-});
-
-vi.stubGlobal("ResizeObserver", mockResizeObserver);
-
-describe("AlertMaskCore", () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it("mounts without error", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore);
-    expect(wrapper.vm).toBeTruthy();
-  });
-
-  it("renders base structure correctly", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore);
-
-    expect(wrapper.find(".alert-mask-core").exists()).toBe(true);
-    expect(wrapper.find(".alert-mask-decorator").exists()).toBe(true);
-    expect(wrapper.find(".alert-mask-content").exists()).toBe(true);
-    expect(wrapper.find(".alert-mask-content-slot").exists()).toBe(true);
-  });
-
-  it("renders default slot content", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      slots: {
-        default: "<p>Test alert content</p>",
-      },
-    });
-
-    expect(wrapper.find(".alert-mask-content-slot p").text()).toBe("Test alert content");
-  });
-
-  it("applies style class passthrough correctly", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      props: {
-        styleClassPassthrough: ["custom-class", "another-class"],
-      },
-    });
-
-    const alertMask = wrapper.find(".alert-mask-core");
-    expect(alertMask.classes()).toContain("custom-class");
-    expect(alertMask.classes()).toContain("another-class");
-  });
-
-  it("applies style class passthrough as string", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      props: {
-        styleClassPassthrough: "single-class",
-      },
-    });
-
-    const alertMask = wrapper.find(".alert-mask-core");
-    expect(alertMask.classes()).toContain("single-class");
-  });
-
-  it("uses default configuration when no config provided", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore);
-
-    // Check that computed config uses defaults
-    const vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-    expect(vm.cfg.backgroundColour).toBe("rgba(0,0,0,0.25)");
-    expect(vm.cfg.borderColour).toBe("var(--orange-08)");
-    expect(vm.cfg.radiusLeft).toBe(12);
-    expect(vm.cfg.radiusRight).toBe(12);
-    expect(vm.cfg.borderLeft).toBe(8);
-    expect(vm.cfg.borderTop).toBe(8);
-    expect(vm.cfg.borderRight).toBe(8);
-    expect(vm.cfg.borderBottom).toBe(8);
-  });
-
-  it("applies custom configuration correctly", async () => {
-    const config: AlertMaskConfig = {
-      backgroundColour: "rgba(255,0,0,0.5)",
-      borderColour: "#ff0000",
-      radiusLeft: 20,
-      radiusRight: 15,
-      borderLeft: 12,
-      borderTop: 10,
-      borderRight: 8,
-      borderBottom: 6,
-    };
-
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      props: { config },
-    });
-
-    const vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-    expect(vm.cfg.backgroundColour).toBe("rgba(255,0,0,0.5)");
-    expect(vm.cfg.borderColour).toBe("#ff0000");
-    expect(vm.cfg.radiusLeft).toBe(20);
-    expect(vm.cfg.radiusRight).toBe(15);
-    expect(vm.cfg.borderLeft).toBe(12);
-    expect(vm.cfg.borderTop).toBe(10);
-    expect(vm.cfg.borderRight).toBe(8);
-    expect(vm.cfg.borderBottom).toBe(6);
-  });
-
-  it("applies partial configuration with defaults", async () => {
-    const config: AlertMaskConfig = {
-      backgroundColour: "blue",
-      radiusLeft: 25,
-    };
-
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      props: { config },
-    });
-
-    const vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-    expect(vm.cfg.backgroundColour).toBe("blue");
-    expect(vm.cfg.radiusLeft).toBe(25);
-    // Check defaults are maintained for other values
-    expect(vm.cfg.borderColour).toBe("var(--orange-08)");
-    expect(vm.cfg.radiusRight).toBe(12);
-  });
-
-  it("sets up template ref for content element", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      slots: {
-        default: "<div>Content</div>",
-      },
-    });
-
-    await nextTick();
-    const vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-    expect(vm.alertContentRef).toBeTruthy();
-  });
-
-  it("creates SVG with proper structure", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore);
-
-    const svg = wrapper.find(".alert-mask-decorator");
-    expect(svg.element.tagName).toBe("svg");
-
-    // Check for defs and mask
-    expect(wrapper.find("defs").exists()).toBe(true);
-    const mask = wrapper.find("mask");
-    expect(mask.exists()).toBe(true);
-    expect(wrapper.find("path[mask]").attributes("mask")).toBe(`url(#${mask.attributes("id")})`);
-
-    // Check for paths
-    const paths = wrapper.findAll("path");
-    expect(paths.length).toBe(4); // 2 in mask, 2 visible paths
-  });
-
-  it("gives each instance its own mask id so multiple masks on a page don't share one shape", async () => {
-    const wrapper = await mountSuspended({
-      components: { AlertMaskCore },
-      template: "<div><AlertMaskCore></AlertMaskCore><AlertMaskCore></AlertMaskCore></div>",
-    });
-    const ids = wrapper.findAll("mask").map((mask) => mask.attributes("id"));
-    expect(ids).toHaveLength(2);
-    expect(ids[0]).toBeTruthy();
-    expect(ids[0]).not.toBe(ids[1]);
-  });
-
-  it("hides the decorative SVG from assistive technology", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore);
-    expect(wrapper.find(".alert-mask-decorator").attributes("aria-hidden")).toBe("true");
-  });
-
-  it("applies config colours as fill styles so CSS var() values resolve", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      props: { config: { borderColour: "var(--my-border)", backgroundColour: "var(--my-bg)" } },
-    });
-    const paths = wrapper.findAll(".alert-mask-decorator > path");
-    expect((paths[0]!.element as unknown as SVGElement).style.fill).toBe("var(--my-border)");
-    expect((paths[1]!.element as unknown as SVGElement).style.fill).toBe("var(--my-bg)");
-  });
-
-  it("disconnects its ResizeObserver on unmount", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore);
-    const observer = mockResizeObserver.mock.results.at(-1)?.value as { disconnect: ReturnType<typeof vi.fn> };
-    wrapper.unmount();
-    expect(observer.disconnect).toHaveBeenCalled();
-  });
-
-  it("applies CSS custom properties for content positioning", async () => {
-    const config: AlertMaskConfig = {
-      borderLeft: 15,
-      borderTop: 20,
-      borderRight: 25,
-      borderBottom: 30,
-    };
-
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      props: { config },
-    });
-
-    const contentEl = wrapper.find(".alert-mask-content");
-    const style = (contentEl.element as HTMLElement).style;
-
-    expect(style.getPropertyValue("--_inset-inline-start")).toBe("15px");
-    expect(style.getPropertyValue("--_inset-block-start")).toBe("20px");
-    expect(style.getPropertyValue("--_inset-inline-end")).toBe("25px");
-    expect(style.getPropertyValue("--_inset-block-end")).toBe("30px");
-  });
-
-  it("handles zero border values correctly", async () => {
-    const config: AlertMaskConfig = {
-      borderLeft: 0,
-      borderTop: 0,
-      borderRight: 0,
-      borderBottom: 0,
-    };
-
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      props: { config },
-    });
-
-    const contentEl = wrapper.find(".alert-mask-content");
-    const style = (contentEl.element as HTMLElement).style;
-
-    expect(style.getPropertyValue("--_inset-inline-start")).toBe("0px");
-    expect(style.getPropertyValue("--_inset-block-start")).toBe("0px");
-    expect(style.getPropertyValue("--_inset-inline-end")).toBe("0px");
-    expect(style.getPropertyValue("--_inset-block-end")).toBe("0px");
-  });
-
-  it("sets up ResizeObserver on mount", async () => {
-    await mountSuspended(AlertMaskCore, {
-      slots: {
-        default: "<div>Content to observe</div>",
-      },
-    });
-
-    // ResizeObserver should be instantiated
-    expect(mockResizeObserver).toHaveBeenCalled();
-  });
-
-  it("generates SVG paths when dimensions are available", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore);
-    const vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-
-    // Set dimensions
-    vm.svgWidth = 200;
-    vm.svgHeight = 100;
-
-    await nextTick();
-
-    // Check that paths are generated (not empty)
-    expect(vm.outerPath).toBeTruthy();
-    expect(vm.innerPath).toBeTruthy();
-    expect(vm.outerPath.length).toBeGreaterThan(0);
-    expect(vm.innerPath.length).toBeGreaterThan(0);
-  });
-
-  it("returns empty paths when dimensions are zero", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore);
-    const vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-
-    // Explicitly set dimensions to zero to test the condition
-    vm.svgWidth = 0;
-    vm.svgHeight = 0;
-
-    await nextTick();
-
-    expect(vm.outerPath).toBe("");
-    expect(vm.innerPath).toBe("");
-  });
-
-  it("updates SVG height CSS custom property", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore);
-    const vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-
-    vm.svgHeight = 150;
-    await nextTick();
-
-    const svg = wrapper.find(".alert-mask-decorator");
-    const style = (svg.element as HTMLElement).style;
-    expect(style.getPropertyValue("--_height")).toBe("150px");
-  });
-
-  it("handles empty configuration object", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      props: {
-        config: {},
-      },
-    });
-
-    // Should use all defaults when empty config provided
-    const vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-    expect(vm.cfg.backgroundColour).toBe("rgba(0,0,0,0.25)");
-    expect(vm.cfg.borderColour).toBe("var(--orange-08)");
-  });
-
-  it("maintains reactivity with config changes", async () => {
-    const wrapper = await mountSuspended(AlertMaskCore, {
-      props: {
-        config: { backgroundColour: "red" },
-      },
-    });
-
-    let vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-    expect(vm.cfg.backgroundColour).toBe("red");
-
-    // Update props
-    await wrapper.setProps({
-      config: { backgroundColour: "blue" },
-    });
-
-    vm = wrapper.vm as unknown as AlertMaskCoreInstance;
-    expect(vm.cfg.backgroundColour).toBe("blue");
-  });
-});