srcdev-nuxt-components 2.1.0 → 2.1.2

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

@@ -10,7 +10,7 @@
             <Icon name="bi:caret-down-fill" class="icon" />
           </button>
 
-          <div class="navigation-group-panel" popover role="tooltip" :id="`popovertarget-nav-1-${key}`" :class="[elementClasses]">
+          <div class="navigation-group-panel" popover role="tooltip" :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">
@@ -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/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.0",
+  "version": "2.1.2",
   "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,
-    });
-  }
-});