srcdev-nuxt-components 9.4.4 → 9.4.5

package/app/components/02.molecules/navigation/deep-expanding-menu-classic/DeepExpandingMenuClassic.vue

@@ -0,0 +1,200 @@
+<template>
+  <component :is="tag" class="deep-expanding-menu-classic" :class="[elementClasses]">
+    <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 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">
+            <h4 class="page-heading-4 mb-6">{{ link.childLinksTitle }}</h4>
+            <ul class="navigation-group-list">
+              <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>
+          </div>
+        </details>
+      </template>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside } from "@vueuse/core";
+import type { ResponsiveHeaderNavItem } from "~/types/components";
+
+interface Props {
+  tag?: "div" | "section" | "nav" | "ul" | "ol";
+  navLinks?: ResponsiveHeaderNavItem[];
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "nav",
+  navLinks: () => [],
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const navigationGroupRef = useTemplateRef<HTMLElement[]>("navigationGroupRef");
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+
+onMounted(() => {
+  navigationGroupRef.value?.forEach((element, index) => {
+    onClickOutside(element, () => {
+      navigationGroupRef.value?.[index]?.removeAttribute("open");
+    });
+  });
+});
+</script>
+
+<style lang="css">
+@layer components {
+  @layer popover-setup {
+    .deep-expanding-menu-classic {
+      container-type: inline-size;
+      display: grid;
+      grid-template-areas: "element-stack";
+      align-items: center;
+      gap: var(--deep-expanding-menu-classic-gap, 1.2rem);
+
+      .inner {
+        grid-area: element-stack;
+        display: flex;
+        gap: var(--deep-expanding-menu-classic-item-gap, 2.4rem);
+        align-items: center;
+        z-index: 1;
+
+        .navigation-link,
+        .navigation-group-toggle {
+          all: unset;
+          border-bottom: var(--deep-expanding-menu-classic-link-border-width, 0.2rem) solid transparent;
+          padding-block: var(--deep-expanding-menu-classic-link-padding-block, 0.8rem);
+
+          transition: border-color 200ms;
+
+          &:hover,
+          &:focus,
+          &:focus-visible {
+            cursor: pointer;
+            border-color: var(
+              --deep-expanding-menu-classic-link-border-colour-hover,
+              light-dark(var(--blue-10), var(--slate-00))
+            );
+          }
+        }
+
+        .navigation-group {
+          --_icon-transform: scaleY(1);
+
+          display: grid;
+          grid-template-areas: "details-stack";
+          z-index: 1;
+          position: relative;
+
+          summary::-webkit-details-marker,
+          summary::marker {
+            display: none;
+          }
+
+          &[open] {
+            --_icon-transform: scaleY(-1);
+          }
+
+          .navigation-group-toggle {
+            grid-area: details-stack;
+
+            display: flex !important;
+            align-items: center;
+            gap: 1.2rem;
+            list-style: none;
+
+            .icon {
+              display: block;
+              font-size: var(--deep-expanding-menu-classic-icon-size, 1.2rem);
+
+              transform: var(--_icon-transform);
+              transition: transform 200ms;
+            }
+          }
+
+          .navigation-group-panel {
+            display: grid;
+            grid-area: details-stack;
+            z-index: 2;
+            position: absolute;
+            inset: auto;
+            top: var(--deep-expanding-menu-classic-panel-offset-top, 4rem);
+            left: 0rem;
+            gap: var(--deep-expanding-menu-classic-panel-list-gap, 1.2rem);
+
+            width: var(--deep-expanding-menu-classic-panel-width, 20rem);
+
+            @media screen and (min-width: 768px) {
+              width: var(--deep-expanding-menu-classic-panel-width-tablet, 40rem);
+            }
+
+            @media screen and (min-width: 1024px) {
+              width: var(--deep-expanding-menu-classic-panel-width-desktop, 60rem);
+            }
+
+            background-color: var(--deep-expanding-menu-classic-panel-background-colour, white);
+            border: var(--deep-expanding-menu-classic-panel-border-width, 0.1rem) solid
+              var(--deep-expanding-menu-classic-panel-border-colour, black);
+            border-radius: var(--deep-expanding-menu-classic-panel-border-radius, 1.2rem);
+            box-shadow: var(--deep-expanding-menu-classic-panel-shadow, 0 0 1rem rgba(0, 0, 0, 0.1));
+            padding: var(--deep-expanding-menu-classic-panel-padding, 1.2rem);
+            overflow: clip;
+
+            h4 {
+              color: var(--deep-expanding-menu-classic-panel-heading-colour, var(--slate-10));
+            }
+
+            .navigation-group-list {
+              display: grid;
+              grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+              gap: var(--deep-expanding-menu-classic-panel-list-gap, 1.2rem);
+              padding-inline-start: 0;
+              margin-block-end: 0.8rem;
+
+              .navigation-group-item {
+                display: block;
+
+                a.navigation-group-link {
+                  display: inline-block;
+                  color: var(--deep-expanding-menu-classic-group-link-colour, var(--slate-10));
+                  text-decoration: none;
+                  padding-block: 0.8rem;
+
+                  border-bottom: var(--deep-expanding-menu-classic-link-border-width, 0.2rem) solid transparent;
+
+                  transition: border-color 200ms;
+
+                  &:hover,
+                  &:focus-visible {
+                    cursor: pointer;
+                    border-color: var(
+                      --deep-expanding-menu-classic-group-link-border-colour-hover,
+                      var(--slate-10)
+                    );
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/app/components/02.molecules/navigation/deep-expanding-menu-classic/stories/DeepExpandingMenuClassic.stories.ts

@@ -0,0 +1,79 @@
+import DeepExpandingMenuClassic from "../DeepExpandingMenuClassic.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import type { ResponsiveHeaderNavItem } from "~/types/components";
+
+const navLinks: ResponsiveHeaderNavItem[] = [
+  { name: "Home", path: "/" },
+  {
+    name: "Services",
+    childLinksTitle: "Our services",
+    childLinks: [
+      { name: "Haircuts", path: "/services/haircuts" },
+      { name: "Colouring", path: "/services/colouring" },
+      { name: "Styling", path: "/services/styling" },
+    ],
+  },
+  { name: "Contact", path: "/contact" },
+];
+
+const meta: Meta<typeof DeepExpandingMenuClassic> = {
+  title: "Molecules/DeepExpandingMenuClassic",
+  component: DeepExpandingMenuClassic,
+  argTypes: {
+    tag: {
+      control: { type: "select" },
+      options: ["div", "section", "nav", "ul", "ol"],
+      description: "Root element tag",
+      table: { category: "Basic" },
+    },
+    navLinks: { table: { disable: true } },
+    styleClassPassthrough: { table: { disable: true } },
+  },
+  args: {
+    tag: "nav",
+    navLinks,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "`<details>`/`<summary>`-based fallback implementation of `DeepExpandingMenu`, using `onClickOutside` to close an open group instead of CSS anchor-positioning/Popover API — use this when the modern implementation's browser support (see its own docs) isn't acceptable.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DeepExpandingMenuClassic>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { DeepExpandingMenuClassic },
+    setup() {
+      return { args };
+    },
+    template: `<DeepExpandingMenuClassic v-bind="args" style="padding: 4rem;" />`,
+  }),
+};
+
+export const CustomColours: Story = {
+  render: (args) => ({
+    components: { DeepExpandingMenuClassic },
+    setup() {
+      return { args };
+    },
+    template: `
+      <DeepExpandingMenuClassic
+        v-bind="args"
+        style="padding: 4rem; --deep-expanding-menu-classic-panel-background-colour: #1a1a1a; --deep-expanding-menu-classic-panel-border-colour: transparent; --deep-expanding-menu-classic-group-link-colour: white; --deep-expanding-menu-classic-panel-heading-colour: #aaaaaa;"
+      />
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Overriding the public tokens via inline `--deep-expanding-menu-classic-*` custom properties.",
+      },
+    },
+  },
+};

package/app/components/02.molecules/navigation/deep-expanding-menu-classic/tests/DeepExpandingMenuClassic.spec.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import DeepExpandingMenuClassic from "../DeepExpandingMenuClassic.vue";
+import type { ResponsiveHeaderNavItem } from "~/types/components";
+
+const defaultNavLinks: ResponsiveHeaderNavItem[] = [
+  { name: "Home", path: "/" },
+  {
+    name: "Services",
+    childLinksTitle: "Our services",
+    childLinks: [
+      { name: "Haircuts", path: "/services/haircuts" },
+      { name: "Colouring", path: "/services/colouring" },
+    ],
+  },
+  { name: "Contact", path: "/contact" },
+];
+
+describe("DeepExpandingMenuClassic", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders a <nav> by default", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.element.tagName.toLowerCase()).toBe("nav");
+  });
+
+  it("renders the given tag", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, {
+      props: { navLinks: defaultNavLinks, tag: "div" },
+    });
+    expect(wrapper.element.tagName.toLowerCase()).toBe("div");
+  });
+
+  it("renders a direct link for items with a path", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    const links = wrapper.findAll(".navigation-link");
+    expect(links.map((l) => l.text())).toEqual(["Home", "Contact"]);
+  });
+
+  it("renders a <details> group for items with childLinks", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.find("details.navigation-group").exists()).toBe(true);
+    expect(wrapper.find(".navigation-group-toggle").text()).toContain("Services");
+  });
+
+  it("renders each child link inside the group panel", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    const childLinks = wrapper.findAll(".navigation-group-link");
+    expect(childLinks.map((l) => l.text())).toEqual(["Haircuts", "Colouring"]);
+  });
+
+  it("renders the childLinksTitle heading", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, { props: { navLinks: defaultNavLinks } });
+    expect(wrapper.find(".navigation-group-panel h4").text()).toBe("Our services");
+  });
+
+  it("applies styleClassPassthrough classes", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, {
+      props: { navLinks: defaultNavLinks, styleClassPassthrough: ["custom-class"] },
+    });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+
+  it("resets classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(DeepExpandingMenuClassic, {
+      props: { navLinks: defaultNavLinks, styleClassPassthrough: ["initial-class"] },
+    });
+    expect(wrapper.classes()).toContain("initial-class");
+
+    await wrapper.setProps({ styleClassPassthrough: ["updated-class"] });
+    expect(wrapper.classes()).not.toContain("initial-class");
+    expect(wrapper.classes()).toContain("updated-class");
+  });
+});

package/app/components/02.molecules/navigation/deep-expanding-menu-classic/tests/__snapshots__/DeepExpandingMenuClassic.spec.ts.snap

@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DeepExpandingMenuClassic > renders correct HTML structure 1`] = `
+"<nav class="deep-expanding-menu-classic">
+  <div class="inner"><a href="/" class="navigation-link">Home</a>
+    <details class="navigation-group" name="navigation-group">
+      <summary class="navigation-group-toggle"><span>Services</span><span class="iconify i-bi:caret-down-fill icon" aria-hidden="true"></span></summary>
+      <div class="navigation-group-panel">
+        <h4 class="page-heading-4 mb-6">Our services</h4>
+        <ul class="navigation-group-list">
+          <li class="navigation-group-item"><a href="/services/haircuts" class="navigation-group-link">Haircuts</a></li>
+          <li class="navigation-group-item"><a href="/services/colouring" class="navigation-group-link">Colouring</a></li>
+        </ul>
+      </div>
+    </details><a href="/contact" class="navigation-link">Contact</a>
+  </div>
+</nav>"
+`;

package/app/types/components/display-tooltip-defined.d.ts

@@ -0,0 +1,10 @@
+export interface TooltipContentTextItem {
+  tag: string
+  text: string
+}
+
+export interface TooltipContentText {
+  tooltipTitle?: TooltipContentTextItem
+  tooltipContent?: TooltipContentTextItem
+  tooltipAction?: TooltipContentTextItem
+}

package/app/types/components/index.ts

@@ -16,3 +16,4 @@ export * from "./social-icons-list.d"
 export * from "./content-docs.d"
 export * from "./breadcrumb"
 export * from "./cookie-consent-banner.d"
+export * from "./display-tooltip-defined.d"

package/package.json

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

package/app/components/animated-svg-text/AnimatedSvgText.vue

@@ -1,89 +0,0 @@
-<template>
-  <div class="animated-svg-text" :class="[elementClasses]">
-    <slot name="text"></slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough)
-  }
-)
-</script>
-
-<style lang="css">
-@layer components {
-
-@keyframes animatedSvgText {
-  0% {
-    fill: transparent;
-    stroke-dashoffset: var(--_animated-svg-text-stroke-dasharray);
-    stroke-width: 0.3;
-  }
-  70% {
-    fill: transparent;
-    stroke-width: 0.3;
-  }
-  100% {
-    fill: var(--_animated-svg-fill-color);
-    stroke-dashoffset: 0;
-    stroke-width: 0;
-  }
-}
-
-html {
-
-  &[data-color-scheme='light'] {
-    .animated-svg-text {
-      --_animated-svg-text-color: var(--_animated-svg-text-stroke-light);
-      --_animated-svg-fill-color: var(--_animated-svg-text-fill-light);
-    }
-  }
-  &[data-color-scheme='dark'] {
-    .animated-svg-text {
-      --_animated-svg-text-color: var(--_animated-svg-text-stroke-dark);
-      --_animated-svg-fill-color: var(--_animated-svg-text-fill-dark);
-    }
-  }
-  &[data-color-scheme='auto'] {
-    .animated-svg-text {
-      @media (prefers-color-scheme: light) {
-        --_animated-svg-text-color: var(--_animated-svg-text-stroke-light);
-        --_animated-svg-fill-color: var(--_animated-svg-text-fill-light);
-      }
-
-      @media (prefers-color-scheme: dark) {
-        --_animated-svg-text-color: var(--_animated-svg-text-stroke-dark);
-        --_animated-svg-fill-color: var(--_animated-svg-text-fill-dark);
-      }
-    }
-  }
-
-  .animated-svg-text {
-
-    --_animated-svg-text-color: var(--_animated-svg-text-stroke-light):
-    --_animated-svg-fill-color: var(--_animated-svg-text-fill-light);
-
-    svg path {
-      stroke: var(--_animated-svg-text-color);
-      stroke-width: 0.3;
-      stroke-dasharray: var(--_animated-svg-text-stroke-dasharray);
-      stroke-dashoffset: var(--_animated-svg-text-stroke-dasharray);
-      animation: animatedSvgText var(--_animated-svg-animation-duration) linear 1 forwards;
-    }
-  }
-
-}
-}
-</style>

package/app/components/canvas-switcher/CanvasSwitcher.vue

@@ -1,104 +0,0 @@
-<template>
-  <div class="canvas-switcher">
-    <p>Canvas switcher</p>
-    <ul class="canvas-switcher mbe-20">
-      <li>
-        <button type="button" @click.stop.prevent="updateCanvas('mobileCanvas')">
-          <Icon name="ic:baseline-phone-iphone" class="icon" :class="[{ current: canvasName === 'mobileCanvas' }]" />
-        </button>
-      </li>
-      <li>
-        <button type="button" @click.stop.prevent="updateCanvas('tabletCanvas')">
-          <Icon name="ic:baseline-tablet-mac" class="icon" :class="[{ current: canvasName === 'tabletCanvas' }]" />
-        </button>
-      </li>
-      <li>
-        <button type="button" @click.stop.prevent="updateCanvas('laptopCanvas')">
-          <Icon name="ic:baseline-laptop-mac" class="icon" :class="[{ current: canvasName === 'laptopCanvas' }]" />
-        </button>
-      </li>
-      <li>
-        <button type="button" @click.stop.prevent="updateCanvas('desktopCanvas')">
-          <Icon name="ic:outline-desktop-mac" class="icon" :class="[{ current: canvasName === 'desktopCanvas' }]" />
-        </button>
-      </li>
-      <li>
-        <button type="button" @click.stop.prevent="updateCanvas('fullWidthCanvas')">
-          <Icon
-            name="pixelarticons:viewport-wide"
-            class="icon"
-            :class="[{ current: canvasName === 'fullWidthCanvas' }]"
-          />
-        </button>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { MediaCanvas } from "../../types/components";
-
-const canvasName = defineModel<MediaCanvas>("canvasName");
-
-const updateCanvas = (setCanvas: MediaCanvas) => {
-  canvasName.value = setCanvas;
-};
-</script>
-
-<style lang="css">
-@layer components {
-.canvas-switcher {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-
-  ul {
-    display: flex;
-    gap: 10px;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-
-    li {
-      button {
-        all: unset;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 5px;
-        border: 0px solid light-dark(var(--slate-10), var(--slate-02));
-        border-radius: 4px;
-        cursor: pointer;
-
-        .icon {
-          color: light-dark(var(--slate-10), var(--slate-02));
-
-          width: 24px;
-          height: 24px;
-
-          &.current {
-            color: light-dark(var(--green-10), var(--green-04));
-          }
-        }
-      }
-    }
-  }
-}
-
-.mobileCanvas {
-  max-width: 412px;
-}
-.tabletCanvas {
-  max-width: 768px;
-}
-.laptopCanvas {
-  max-width: 1064px;
-}
-.desktopCanvas {
-  max-width: 1280px;
-}
-.fullWidthCanvas {
-  max-width: unset;
-}
-}
-</style>

package/app/components/clipped-panels/ClippedPanel.vue

@@ -1,87 +0,0 @@
-<template>
-  <component :is="tag" class="clipped-panel" :class="[variant, elementClasses]">
-    <slot name="default"></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: "square",
-    validator(value: string) {
-      return ["circle-cutout", "rectangle", "square"].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 lang="css">
-@layer components {
-.clipped-panel {
-  --_foreground-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
-
-  /* Component styles */
-
-  background-color: red;
-  /* color: var(--_foreground-color); */
-  outline: 1px solid var(--_foreground-color);
-  /* box-shadow: 5px 5px 5px 5px white; */
-
-  aspect-ratio: 1;
-
-  &.rectangle {
-    --_max-x-position: 300px;
-    --_curve-radius: 10px;
-
-    clip-path: path(
-      "M 10, 50 L 140, 50 A 10, 10, 0, 0, 0 150, 40 L 150, 10 A 10, 10, 0, 0, 1 160, 0 L 290, 0 A 10, 10, 0, 0, 1 300, 10 L 300, 190 A 10, 10, 0, 0, 1 290, 200 L 10, 200 A 10, 10, 0, 0, 1 0, 190 L 0, 60 A 10, 10, 0, 0, 1 10, 50 Z"
-    );
-    width: 300px;
-  }
-  &.square {
-    /* clip-path: path('M 10, 50 L 90, 50 A 10, 10, 0, 0, 0 100, 40 L 100, 10 L 110, 0 L 190, 0 L 200, 10 L 200, 190 L 190, 200 L 10, 200 L 0, 190 L 0, 60 L 10, 50 Z'); */
-    clip-path: path(
-      "M 10, 50 L 90, 50 A 10, 10, 0, 0, 0 100, 40 L 100, 10 A 10, 10, 0, 0, 1 110, 0 L 190, 0 A 10, 10, 0, 0, 1 200, 10 L 200, 190 A 10, 10, 0, 0, 1 190, 200 L 10, 200 A 10, 10, 0, 0, 1 0, 190 L 0, 60 A 10, 10, 0, 0, 1 10, 50 Z"
-    );
-    width: 200px;
-  }
-  &.circle-cutout {
-    clip-path: path("M  Z");
-  }
-}
-}
-</style>