srcdev-nuxt-components 2.1.1 → 2.1.3

package/components/canvas-switcher/CanvasSwitcher.vue

@@ -32,7 +32,6 @@ import type { MediaCanvas } from '@/types/types.canvasName';
 const canvasName = defineModel<MediaCanvas>('canvasName');
 
 const updateCanvas = (setCanvas: MediaCanvas) => {
-  console.log('setCanvas', setCanvas);
   canvasName.value = setCanvas;
 };
 </script>

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

@@ -121,6 +121,7 @@ watch(
 
       .navigation-group {
         --_icon-transform: scaleY(1);
+        position: relative;
 
         .navigation-group-toggle {
           anchor-name: var(--_anchor-name);
@@ -146,6 +147,7 @@ watch(
           /* 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;
@@ -159,12 +161,6 @@ watch(
           padding: 12px;
           overflow: clip;
 
-          /* position-try: flip-inline, flip-block, flip-block flip-inline; */
-          /* position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline; */
-
-          /* position-try: ----anchor-left; */
-          /* position-try-fallbacks: --anchor-right; */
-
           &:popover-open {
             display: block;
             opacity: 1;

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/components/functional/pop-over/PopOver.vue

@@ -30,7 +30,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 <style scoped lang="css">
 @layer popover-setup {
-  @position-try --right {
+  /* @position-try --right {
     inset: auto;
     top: anchor(top);
     left: calc(anchor(right) + 10px);
@@ -40,7 +40,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     inset: auto;
     top: anchor(top);
     right: calc(anchor(left) + 10px);
-  }
+  } */
 
   .popover-trigger {
     anchor-name: v-bind(anchorName);
@@ -52,17 +52,13 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     position-anchor: v-bind(anchorName);
     margin: 0;
     inset: auto;
-    top: anchor(top);
+    top: calc(anchor(top) + 0px);
     left: calc(anchor(right) + 10px);
     opacity: 0;
     transition: opacity 200ms, display 200ms, overlay 200ms;
     transition-behavior: allow-discrete;
 
-    /* position-try: flip-inline, flip-block, flip-block flip-inline; */
-    /* position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline; */
-
-    position-try: --right;
-    position-try-fallbacks: --left;
+    position-try-fallbacks: flip-inline;
 
     &:popover-open {
       display: block;
@@ -74,5 +70,19 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
       }
     }
   }
+
+  @position-try --top-left {
+    top: anchor(top);
+    right: calc(anchor(left + 10px));
+    left: unset;
+    /* width: revert; */
+  }
+
+  @position-try --bottom-right {
+    top: anchor(bottom);
+    /* right: calc(anchor(left + 10px)); */
+    /* left: unset; */
+    /* width: revert; */
+  }
 }
 </style>

package/nuxt.config.ts

@@ -3,7 +3,6 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   css: ['modern-normalize', './assets/styles/main.css'],
   modules: ['@nuxt/icon', '@nuxt/image'],
-
   app: {
     head: {
       htmlAttrs: {
@@ -32,4 +31,4 @@ export default defineNuxtConfig({
   },
   // plugins: ['css-anchor-positioning'],
   compatibilityDate: '2024-07-13',
-});
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -30,15 +30,14 @@
     "@nuxt/eslint-config": "1.0.0",
     "@nuxt/icon": "1.10.3",
     "@nuxt/image": "^1.9.0",
-    "@oddbird/css-anchor-positioning": "0.4.0",
-    "eslint": "9.19.0",
+    "eslint": "9.22.0",
     "happy-dom": "16.8.1",
-    "nuxt": "3.15.4",
+    "nuxt": "3.16.0",
     "release-it": "18.1.2",
-    "typescript": "5.7.3"
+    "typescript": "5.8.2"
   },
   "dependencies": {
-    "@vueuse/core": "12.5.0",
+    "@vueuse/core": "13.0.0",
     "focus-trap-vue": "4.0.3",
     "modern-normalize": "3.0.1"
   },

package/plugins/css-anchor-positioning.ts

@@ -1,11 +0,0 @@
-import polyfill from '@oddbird/css-anchor-positioning/fn';
-
-export default defineNuxtPlugin(() => {
-  if (import.meta.client && !('anchorName' in document.documentElement.style)) {
-    polyfill({
-      elements: undefined,
-      excludeInlineStyles: false,
-      useAnimationFrame: false,
-    });
-  }
-});