srcdev-nuxt-components 2.1.2 → 2.1.3

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

@@ -1,12 +1,20 @@
 <template>
-  <component :is="tag" class="deep-expanding-menu" :class="[elementClasses]">
+  <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="">{{ link.name }}</NuxtLink>
-        <details v-else name="top-level-nav" :style="`--_position-anchor: --anchor-nav-1-${key};, --_anchor-name: --anchor-nav-1-${key};`" ref="detailsRef">
-          <summary>{{ link.name }}</summary>
-          <div popver>
-            <NuxtLink v-for="childLink in link.childLinks" :key="childLink.name" :to="childLink.path" class="">{{ childLink.name }}</NuxtLink>
+        <NuxtLink v-if="link.path" :to="link.path" class="navigation-link">{{ link.name }}</NuxtLink>
+        <details v-else class="navigation-group" name="navigation-group" :style="`--_position-anchor: --anchor-nav-1-${key};, --_anchor-name: --anchor-nav-1-${key};`">
+          <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>
@@ -23,6 +31,10 @@ const props = defineProps({
       return TAGS_ALLOWED.includes(value);
     },
   },
+  navLinks: {
+    type: Array as PropType<INavLink[]>,
+    default: () => [],
+  },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],
@@ -30,7 +42,6 @@ const props = defineProps({
 });
 
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-const detailsRef = useTemplateRef('detailsRef');
 
 watch(
   () => props.styleClassPassthrough,
@@ -38,10 +49,6 @@ watch(
     resetElementClasses(props.styleClassPassthrough);
   }
 );
-
-onMounted(() => {
-  console.log(detailsRef.value);
-});
 </script>
 
 <script lang="ts">
@@ -53,54 +60,11 @@ interface INavLink {
   isExternal?: boolean;
   childLinks?: INavLink[];
 }
-
-const navLinks = <INavLink[]>[
-  { name: 'Home', path: '/' },
-  {
-    name: 'Components',
-    childLinks: [
-      { name: 'Container Glow', path: '/ui/container-glow' },
-      { name: 'Accordian', path: '/ui/accordian' },
-      { name: 'Dialogs', path: '/ui/dialog' },
-      { name: 'Tabs X', path: '/ui/tabs' },
-      { name: 'Tabs Y', path: '/ui/tabs-y' },
-      { name: 'Prompts', path: '/ui/display-prompt' },
-      { name: 'Rotating Carousel', path: '/ui/rotating-carousel' },
-      { name: 'Clipped Panels', path: '/ui/clipped-panels' },
-    ],
-  },
-  {
-    name: 'Layouts',
-    childLinks: [
-      { name: 'Layout Row', path: '/ui/layout-row' },
-      { name: 'Layout Grid A', path: '/ui/layout-grid-a' },
-      { name: 'Layout Grid B', path: '/ui/layout-grid-b' },
-      { name: 'Simple Grid', path: '/ui/simple-grid' },
-      { name: 'Masonry Grid Simple', path: '/ui/masonry-grid' },
-      { name: 'Masonry Grid Sorted', path: '/ui/masonry-grid-sorted' },
-      { name: 'Masonry Grid Ordered', path: '/ui/masonry-grid-ordered' },
-      { name: 'Masonry Columns', path: '/ui/masonry-columns' },
-    ],
-  },
-  { name: 'About', path: '/' },
-];
 </script>
 
 <style lang="css">
 @layer popover-setup {
-  @position-try --anchor-left {
-    inset: auto;
-    top: anchor(top);
-    right: calc(anchor(left) + 10px);
-  }
-
-  @position-try-fallbacks --anchor-right {
-    inset: auto;
-    top: anchor(top);
-    left: calc(anchor(right) + 10px);
-  }
-
-  .deep-expanding-menu {
+  .deep-expanding-menu-old {
     container-type: inline-size;
     display: grid;
     grid-template-areas: 'element-stack';
@@ -114,64 +78,125 @@ const navLinks = <INavLink[]>[
       align-items: center;
       z-index: 1;
 
-      a,
-      summary {
+      .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));
         }
-      }
 
-      a {
-        all: unset;
-        border: 1px solid red;
-        padding: 6px 12px;
+        &:focus {
+          border-color: light-dark(var(--blue-12), var(--gray-0));
+        }
 
         &:focus-visible {
-          outline: 2px solid red;
+          border-color: light-dark(var(--blue-12), var(--gray-0));
         }
       }
 
-      details {
-        all: unset;
-        border: 1px solid red;
-        padding: 6px 12px;
-      }
+      .navigation-group {
+        --_icon-transform: scaleY(1);
 
-      details {
         display: grid;
         grid-template-areas: 'details-stack';
         z-index: 1;
+        position: relative;
 
-        summary {
+        summary::-webkit-details-marker,
+        summary::marker {
+          display: none;
+        }
+
+        &[open] {
+          --_icon-transform: scaleY(-1);
+        }
+
+        .navigation-group-toggle {
           grid-area: details-stack;
-          /* position: relative; */
-          anchor-name: var(--_anchor-name);
 
-          &:focus {
-            outline: 2px solid green;
-          }
+          display: flex !important;
+          align-items: center;
+          gap: 12px;
+          list-style: none;
 
-          &:focus-visible {
-            outline: 2px solid red;
+          .icon {
+            display: block;
+            font-size: 1.2rem;
+
+            transform: var(--_icon-transform);
+            transition: transform 200ms;
           }
         }
 
-        div {
-          position-anchor: var(--_position-anchor);
+        .navigation-group-panel {
           background-color: black;
           display: grid;
           grid-area: details-stack;
           z-index: 2;
           position: absolute;
           inset: auto;
-          top: calc(anchor(bottom) + 20px);
-          left: calc(anchor(left) + 0px);
-          /* translate: 0 20px; */
-          padding: 12px;
+          top: 40px;
+          left: 0px;
           gap: 12px;
 
-          /* position-try: --anchor-left;
-          position-try-fallbacks: --anchor-right; */
+          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);
+                }
+              }
+            }
+          }
         }
       }
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",