@m3ui-vue/m3ui-vue 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3ui-vue/m3ui-vue",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Material 3 component library for Vue 3 + Tailwind CSS v4",
   "type": "module",
   "license": "MIT",

package/src/components/_MContextMenuPanel.vue

@@ -1,65 +1,65 @@
 <script setup lang="ts">
-import { ref, onMounted, nextTick } from 'vue'
-import MIcon from './MIcon.vue'
-import MContextMenuPanel from './_MContextMenuPanel.vue'
-import type { ContextMenuItem } from './MContextMenu.vue'
+import { ref, onMounted, nextTick } from "vue";
+import MIcon from "./MIcon.vue";
+import MContextMenuPanel from "./_MContextMenuPanel.vue";
+import type { ContextMenuItem } from "./MContextMenu.vue";
 
 const props = defineProps<{
-  items: ContextMenuItem[]
-  x: number
-  y: number
-}>()
+  items: ContextMenuItem[];
+  x: number;
+  y: number;
+}>();
 
-const emit = defineEmits<{ close: [] }>()
+const emit = defineEmits<{ close: [] }>();
 
-const panel = ref<HTMLElement | null>(null)
-const panelX = ref(props.x)
-const panelY = ref(props.y)
-const activeIndex = ref<number | null>(null)
-const subPos = ref({ x: 0, y: 0 })
+const panel = ref<HTMLElement | null>(null);
+const panelX = ref(props.x);
+const panelY = ref(props.y);
+const activeIndex = ref<number | null>(null);
+const subPos = ref({ x: 0, y: 0 });
 
 onMounted(async () => {
-  await nextTick()
-  if (!panel.value) return
-  const el = panel.value
-  panelX.value = Math.min(props.x, window.innerWidth - el.offsetWidth - 8)
-  panelY.value = Math.min(props.y, window.innerHeight - el.offsetHeight - 8)
-})
+  await nextTick();
+  if (!panel.value) return;
+  const el = panel.value;
+  panelX.value = Math.min(props.x, window.innerWidth - el.offsetWidth - 8);
+  panelY.value = Math.min(props.y, window.innerHeight - el.offsetHeight - 8);
+});
 
 function onItemMouseEnter(index: number, item: ContextMenuItem, e: MouseEvent) {
   if (item.divider || item.disabled) {
-    activeIndex.value = null
-    return
+    activeIndex.value = null;
+    return;
   }
   if (!item.children?.length) {
-    activeIndex.value = null
-    return
+    activeIndex.value = null;
+    return;
   }
 
-  activeIndex.value = index
-  const itemEl = e.currentTarget as HTMLElement
-  const itemRect = itemEl.getBoundingClientRect()
-  const panelRect = panel.value!.getBoundingClientRect()
+  activeIndex.value = index;
+  const itemEl = e.currentTarget as HTMLElement;
+  const itemRect = itemEl.getBoundingClientRect();
+  const panelRect = panel.value!.getBoundingClientRect();
 
-  let x = panelRect.right
-  let y = itemRect.top
-  if (x + 220 > window.innerWidth) x = panelRect.left - 220
-  if (y + 300 > window.innerHeight) y = Math.max(8, window.innerHeight - 300)
+  let x = panelRect.right;
+  let y = itemRect.top;
+  if (x + 220 > window.innerWidth) x = panelRect.left - 220;
+  if (y + 300 > window.innerHeight) y = Math.max(8, window.innerHeight - 300);
 
-  subPos.value = { x, y }
+  subPos.value = { x, y };
 }
 
 function onItemClick(item: ContextMenuItem) {
-  if (item.disabled || item.divider || item.children?.length) return
-  item.onClick?.()
-  emit('close')
+  if (item.disabled || item.divider || item.children?.length) return;
+  item.onClick?.();
+  emit("close");
 }
 
 function onPanelMouseLeave(e: MouseEvent) {
   // Don't close if the mouse moved to another context menu panel (sibling sub-panel)
-  const related = e.relatedTarget as Element | null
-  if (related?.closest('.m3-ctx-panel')) return
-  activeIndex.value = null
+  const related = e.relatedTarget as Element | null;
+  if (related?.closest(".m3-ctx-panel")) return;
+  activeIndex.value = null;
 }
 </script>
 
@@ -84,7 +84,9 @@ function onPanelMouseLeave(e: MouseEvent) {
                 ? 'cursor-pointer text-error hover:bg-error/8'
                 : 'cursor-pointer text-on-surface hover:bg-on-surface/8',
             activeIndex === i && !item.disabled
-              ? (item.danger ? 'bg-error/8' : 'bg-on-surface/8')
+              ? item.danger
+                ? 'bg-error/8'
+                : 'bg-on-surface/8'
               : '',
           ]"
           @mouseenter="onItemMouseEnter(i, item, $event)"
@@ -101,7 +103,10 @@ function onPanelMouseLeave(e: MouseEvent) {
 
           <span class="flex-1">{{ item.label }}</span>
 
-          <span v-if="item.shortcut" class="text-label-small text-on-surface-variant">
+          <span
+            v-if="item.shortcut"
+            class="text-label-small text-on-surface-variant"
+          >
             {{ item.shortcut }}
           </span>
 
@@ -121,6 +126,7 @@ function onPanelMouseLeave(e: MouseEvent) {
        animated by Vue's Transition (produces a console warning). -->
   <MContextMenuPanel
     v-if="activeIndex !== null && items[activeIndex]?.children?.length"
+    :key="activeIndex"
     :items="items[activeIndex]!.children!"
     :x="subPos.x"
     :y="subPos.y"