srcdev-nuxt-components 3.0.0 → 4.0.1

package/components/clipped-panels/ClippedPanel.vue

@@ -0,0 +1,73 @@
+<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

@@ -0,0 +1,214 @@
+<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

@@ -0,0 +1,218 @@
+<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

@@ -0,0 +1,63 @@
+<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>