srcdev-nuxt-components 2.5.18 → 3.0.0

package/components/clipped-panels/ClippedPanel.vue

@@ -1,73 +0,0 @@
-<template>
-  <component :is="tag" class="clipped-panel" :class="[variant, elementClasses]">
-    <slot name="default"></slot>
-  </component>
-</template>
-
-<script lang="ts">
-const TAGS_ALLOWED = <string[]>['div', 'p', 'span', 'section', 'article', 'aside', 'header', 'footer', 'main', 'nav', 'ul', 'ol'];
-</script>
-
-<script setup lang="ts">
-const props = defineProps({
-  tag: {
-    type: String,
-    default: 'div',
-    validator(value: string) {
-      return TAGS_ALLOWED.includes(value);
-    },
-  },
-  variant: {
-    type: String,
-    default: 'square',
-    validator(value: string) {
-      return ['circle-cutout', 'rectangle', 'square'].includes(value);
-    },
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-});
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough);
-  }
-);
-</script>
-
-<style lang="css">
-.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/components/deep-expanding-menu/DeepExpandingMenu.vue

@@ -1,214 +0,0 @@
-<template>
-  <component :is="tag" class="deep-expanding-menu" :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>
-
-        <div v-else class="navigation-group" :style="`--_anchor-name: --anchor-nav-1-${key};`" ref="detailsRef">
-          <button :popovertarget="`popovertarget-nav-1-${key}`" class="navigation-group-toggle">
-            <span>{{ link.name }}</span>
-            <Icon name="bi:caret-down-fill" class="icon" />
-          </button>
-
-          <div class="navigation-group-panel" popover role="menu" :id="`popovertarget-nav-1-${key}`">
-            <h4 class="heading-4 mb-6">{{ link.childLinksTitle }}</h4>
-            <ul class="navigation-group-list">
-              <li class="navigation-group-item" v-for="childLink in link.childLinks" :key="childLink.name">
-                <NuxtLink :to="childLink.path" class="navigation-group-link">{{ childLink.name }}</NuxtLink>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </template>
-    </div>
-  </component>
-</template>
-
-<script lang="ts">
-const TAGS_ALLOWED = <string[]>['div', 'section', 'nav', 'ul', 'ol'];
-
-interface ResponsiveHeaderNavItem {
-  name: string;
-  path?: string;
-  isExternal?: boolean;
-  childLinks?: ResponsiveHeaderNavItem[];
-  childLinksTitle?: string;
-}
-</script>
-
-<script setup lang="ts">
-const props = defineProps({
-  tag: {
-    type: String,
-    default: 'nav',
-    validator(value: string) {
-      return TAGS_ALLOWED.includes(value);
-    },
-  },
-  navLinks: {
-    type: Array as PropType<ResponsiveHeaderNavItem[]>,
-    default: () => [],
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-});
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-// const detailsRef = useTemplateRef('detailsRef');
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough);
-  }
-);
-</script>
-
-<style lang="css">
-@layer deep-expanding-menu-setup {
-  @position-try --anchor-left {
-    inset: auto;
-    top: calc(anchor(bottom) + 10px);
-    left: calc(anchor(left) + 10px);
-  }
-
-  @position-try-fallbacks --anchor-right {
-    inset: auto;
-    top: calc(anchor(bottom) + 10px);
-    right: calc(anchor(right) + 10px);
-  }
-
-  .deep-expanding-menu {
-    --_gap-between-top-level-items: 24px;
-
-    container-type: inline-size;
-    display: grid;
-    grid-template-areas: 'element-stack';
-
-    .inner {
-      grid-area: element-stack;
-      display: flex;
-      gap: var(--_gap-between-top-level-items);
-      align-items: center;
-
-      .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-12), var(--gray-0));
-        }
-
-        &:focus {
-          border-color: light-dark(var(--blue-12), var(--gray-0));
-        }
-
-        &:focus-visible {
-          border-color: light-dark(var(--blue-12), var(--gray-0));
-        }
-      }
-
-      .navigation-group {
-        --_icon-transform: scaleY(1);
-        position: relative;
-
-        .navigation-group-toggle {
-          anchor-name: var(--_anchor-name);
-
-          display: flex;
-          align-items: center;
-          gap: 12px;
-
-          .icon {
-            display: block;
-            font-size: 1.2rem;
-
-            transform: var(--_icon-transform);
-            transition: transform 200ms;
-          }
-        }
-
-        .navigation-group-panel {
-          display: none;
-          position: absolute;
-          position-anchor: var(--_anchor-name);
-          margin: 0;
-          /* inset: auto; */
-          top: calc(anchor(bottom) + 10px);
-          left: calc(anchor(left) + 0px);
-
-          opacity: 0;
-          transition: opacity 200ms, display 200ms, overlay 200ms;
-          transition-behavior: allow-discrete;
-
-          width: min(100%, 50vw);
-
-          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;
-
-          &:popover-open {
-            display: block;
-            opacity: 1;
-
-            @starting-style {
-              display: block;
-              opacity: 0;
-            }
-          }
-
-          h4 {
-            color: var(--gray-12);
-          }
-
-          .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(--gray-12);
-                text-decoration: none;
-                padding-block: 8px;
-
-                border-bottom: 2px solid transparent;
-
-                transition: border-color 200ms;
-
-                &:hover {
-                  cursor: pointer;
-                  border-color: var(--gray-12);
-                }
-
-                &:focus-visible {
-                  border-color: var(--gray-12);
-                }
-              }
-            }
-          }
-        }
-
-        &:has(.navigation-group-panel:popover-open) {
-          --_icon-transform: scaleY(-1);
-        }
-      }
-    }
-  }
-}
-</style>

package/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 class="navigation-group" name="navigation-group" ref="navigationGroupRef">
-          <summary class="navigation-group-toggle">
-            <span>{{ link.name }}</span>
-            <Icon name="bi:caret-down-fill" class="icon" />
-          </summary>
-          <div class="navigation-group-panel" :id="`popovertarget-nav-1-${key}`">
-            <h4 class="heading-4 mb-6">{{ link.childLinksTitle }}</h4>
-            <ul class="navigation-group-list">
-              <li class="navigation-group-item" v-for="childLink in link.childLinks" :key="childLink.name">
-                <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 TAGS_ALLOWED.includes(value);
-    },
-  },
-  navLinks: {
-    type: Array as PropType<ResponsiveHeaderNavItem[]>,
-    default: () => [],
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<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">
-const TAGS_ALLOWED = <string[]>['div', 'section', 'nav', 'ul', 'ol'];
-
-interface ResponsiveHeaderNavItem {
-  name: string;
-  path?: string;
-  isExternal?: boolean;
-  childLinksTitle?: string;
-  childLinks?: ResponsiveHeaderNavItem[];
-}
-</script>
-
-<style lang="css">
-@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-12), var(--gray-0));
-        }
-
-        &:focus {
-          border-color: light-dark(var(--blue-12), var(--gray-0));
-        }
-
-        &:focus-visible {
-          border-color: light-dark(var(--blue-12), var(--gray-0));
-        }
-      }
-
-      .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(--gray-12);
-          }
-
-          .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(--gray-12);
-                text-decoration: none;
-                padding-block: 8px;
-
-                border-bottom: 2px solid transparent;
-
-                transition: border-color 200ms;
-
-                &:hover {
-                  cursor: pointer;
-                  border-color: var(--gray-12);
-                }
-
-                &:focus-visible {
-                  border-color: var(--gray-12);
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>

package/components/display-banner/DisplayBanner.vue

@@ -1,63 +0,0 @@
-<template>
-  <component :is="tag" class="display-banner" :class="[elementClasses]">
-    <div v-if="$slots.canvas" class="canvas">
-      <slot name="canvas"></slot>
-    </div>
-    <div v-if="$slots.content" class="content">
-      <slot name="content"></slot>
-    </div>
-  </component>
-</template>
-
-<script lang="ts">
-const TAGS_ALLOWED = <string[]>['div', 'p', 'span', 'section', 'article', 'aside', 'header', 'footer', 'main', 'nav', 'ul', 'ol'];
-</script>
-
-<script setup lang="ts">
-
-const props = defineProps({
-  tag: {
-    type: String,
-    default: 'div',
-    validator(value: string) {
-      return TAGS_ALLOWED.includes(value);
-    },
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-});
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough);
-  }
-);
-</script>
-
-<style lang="css">
-.display-banner {
-  display: grid;
-  grid-template-areas: 'banner';
-  container-type: inline-size;
-  overflow: hidden;
-
-  .canvas {
-    grid-area: banner;
-
-    .image {
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .content {
-    grid-area: banner;
-  }
-}
-</style>