srcdev-nuxt-components 9.4.4 → 9.4.6

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>

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

@@ -1,218 +0,0 @@
-<template>
-  <component :is="tag" class="deep-expanding-menu-old" :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 :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 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";
-
-const props = defineProps({
-  tag: {
-    type: String,
-    default: "nav",
-    validator(value: string) {
-      return ["div", "section", "nav", "ul", "ol"].includes(value);
-    },
-  },
-  navLinks: {
-    type: Array as PropType<ResponsiveHeaderNavItem[]>,
-    default: () => [],
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-});
-
-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>
-
-<script lang="ts">
-interface 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;
-    display: grid;
-    grid-template-areas: "element-stack";
-    align-items: center;
-    gap: 12px;
-
-    .inner {
-      grid-area: element-stack;
-      display: flex;
-      gap: 24px;
-      align-items: center;
-      z-index: 1;
-
-      .navigation-link,
-      .navigation-group-toggle {
-        all: unset;
-        border-bottom: 2px solid transparent;
-        padding-block: 8px;
-
-        transition: border-color 200ms;
-
-        &:hover {
-          cursor: pointer;
-          border-color: light-dark(var(--blue-10), var(--slate-00));
-        }
-
-        &:focus {
-          border-color: light-dark(var(--blue-10), var(--slate-00));
-        }
-
-        &:focus-visible {
-          border-color: 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: 12px;
-          list-style: none;
-
-          .icon {
-            display: block;
-            font-size: 1.2rem;
-
-            transform: var(--_icon-transform);
-            transition: transform 200ms;
-          }
-        }
-
-        .navigation-group-panel {
-          background-color: black;
-          display: grid;
-          grid-area: details-stack;
-          z-index: 2;
-          position: absolute;
-          inset: auto;
-          top: 40px;
-          left: 0px;
-          gap: 12px;
-
-          width: 200px;
-
-          @media screen and (min-width: 768px) {
-            width: 400px;
-          }
-
-          @media screen and (min-width: 1024px) {
-            width: 600px;
-          }
-
-          background-color: white;
-          border: 1px solid black;
-          border-radius: 12px;
-          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-          padding: 12px;
-          overflow: clip;
-
-          h4 {
-            color: var(--slate-10);
-          }
-
-          .navigation-group-list {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-            gap: 12px;
-            padding-inline-start: 0;
-            margin-block-end: 8px;
-
-            .navigation-group-item {
-              display: block;
-
-              a.navigation-group-link {
-                display: inline-block;
-                color: var(--slate-10);
-                text-decoration: none;
-                padding-block: 8px;
-
-                border-bottom: 2px solid transparent;
-
-                transition: border-color 200ms;
-
-                &:hover {
-                  cursor: pointer;
-                  border-color: var(--slate-10);
-                }
-
-                &:focus-visible {
-                  border-color: var(--slate-10);
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-}
-</style>

package/app/components/display-details/DisplayDetailsCore.vue

@@ -1,122 +0,0 @@
-<template>
-  <details :name="name" class="display-details" :class="[elementClasses]" ref="detailsRef">
-    <summary class="display-details-summary" :id="triggerId" :aria-controls="contentId" ref="summaryRef">
-      <span class="label">
-        <slot name="summary"></slot>
-      </span>
-      <slot name="summaryIcon">
-        <Icon name="bi:caret-down-fill" class="icon" :class="iconSize" />
-      </slot>
-    </summary>
-    <div class="display-details-content" :aria-labelledby="triggerId" :id="contentId" role="region" ref="contentRef">
-      <div class="inner">
-        <slot name="details-content"></slot>
-      </div>
-    </div>
-  </details>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  id: {
-    type: String,
-    required: true,
-  },
-  iconSize: {
-    type: String,
-    default: "small",
-    validator(value: string) {
-      return ["small", "medium", "large"].includes(value)
-    },
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
-
-const triggerId = computed(() => `${props.id}-trigger`)
-const contentId = computed(() => `${props.id}-content`)
-
-const { elementClasses, resetElementClasses, updateElementClasses } = useStyleClassPassthrough(
-  props.styleClassPassthrough
-)
-
-updateElementClasses([props.iconSize])
-
-const detailsRef = useTemplateRef<HTMLDetailsElement>("detailsRef")
-const summaryRef = useTemplateRef<HTMLElement | null>("summaryRef")
-const contentRef = useTemplateRef<HTMLDivElement | null>("contentRef")
-</script>
-
-<style lang="css">
-@layer components {
-.display-details {
-  border: none;
-  outline: none;
-  box-shadow: none;
-  border-radius: 0;
-
-  &[open] {
-    .display-details-summary {
-      .icon {
-        transform: scaleY(-1);
-      }
-    }
-    .display-details-content {
-      grid-template-rows: 1fr;
-      overflow: hidden;
-    }
-  }
-
-  .display-details-summary {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-direction: row;
-    gap: 0;
-
-    list-style: none;
-
-    &::-webkit-details-marker,
-    &::marker {
-      display: none;
-    }
-
-    overflow: clip;
-
-    .label {
-      display: block;
-      flex-grow: 1;
-    }
-
-    .icon {
-      display: block;
-
-      transform: scaleY(1);
-
-      font-size: 1.2rem;
-      &.medium {
-        font-size: 1.8rem;
-      }
-      &.large {
-        font-size: 2.4rem;
-      }
-    }
-  }
-
-  .display-details-content {
-    display: grid;
-    grid-template-rows: 0;
-
-    .inner {
-      overflow: hidden;
-    }
-  }
-}
-}
-</style>