srcdev-nuxt-components 6.0.0 → 6.0.1

package/app/components/content-grid/ContentGrid.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="ui-content-grid" :class="[applyClasses]" :data-testid="dataTestid">
+    <div v-if="hasSlot1" class="col-1">
+      <slot name="slot1"></slot>
+    </div>
+    <div v-if="hasSlot2" class="col-2">
+      <slot name="slot2"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  dataTestid: {
+    type: String,
+    default: 'ui-content-grid',
+  },
+  applyClasses: {
+    type: String,
+    default: '',
+  },
+});
+
+const slots = useSlots();
+const hasSlot1 = ref(slots.slot1 !== undefined);
+const hasSlot2 = ref(slots.slot2 !== undefined);
+</script>
+
+<style lang="css">
+.ui-content-grid {
+  --_margin-inline: 0;
+  --_grid-template-columns: repeat(4, 1fr);
+  --_grid-template-rows: repeat(2, auto);
+  --_grid-gap: 1.6rem;
+
+  display: grid;
+  gap: var(--_grid-gap);
+  grid-template-columns: var(--_grid-template-columns);
+  grid-template-rows: var(--_grid-template-rows);
+  margin-inline: var(--_margin-inline);
+
+  @container content (min-width: 768px) {
+    --_margin-inline: 0;
+    --_grid-template-columns: repeat(6, 1fr);
+    --_grid-gap: 3.2rem;
+  }
+
+  @container content (min-width: 1024px) {
+    --_margin-inline: 0;
+    --_grid-template-columns: repeat(12, 1fr);
+    --_grid-template-rows: initial;
+  }
+
+  .col-1 {
+    --_grid-column: 1 / span 4;
+    --_grid-row: 1;
+    grid-column: var(--_grid-column);
+    grid-row: var(--_grid-row);
+
+    @container content (min-width: 768px) {
+      --_grid-column: 1 / span 6;
+    }
+
+    @container content (min-width: 1024px) {
+      --_grid-column: 1 / span 6;
+    }
+  }
+
+  .col-2 {
+    --_grid-column: 1 / span 4;
+    --_grid-row: 2;
+    grid-column: var(--_grid-column);
+    grid-row: var(--_grid-row);
+
+    @container content (min-width: 768px) {
+      --_grid-column: 1 / span 6;
+    }
+
+    @container content (min-width: 1024px) {
+      --_grid-column: 7 / span 6;
+      --_grid-row: 1;
+    }
+  }
+}
+</style>

package/app/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/app/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/app/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>