refactor(tree-menu): improve item action positioning and tooltip logic for better usability

Author: honghuangdc

src/components/tree-menu/tree-menu-item.vue

@@ -62,7 +62,7 @@ const showDropdown = computed(() => collapsed.value && hasChildren.value);
 
 const tooltip = computed(() => (collapsed.value && !showDropdown.value ? props.label : undefined));
 
-const showAbsolute = computed(() => showDropdown.value || tooltip.value);
+const showAbsolute = computed(() => Boolean(showDropdown.value || tooltip.value));
 
 const tooltipProps = computed(() => ({
   placement: 'right' as const,
@@ -95,6 +95,8 @@ const onDropdownMenuSelect = (item: TreeMenuBaseOptionData) => {
     :class="ui.item"
     v-bind="forwardedProps"
     :data-level="level"
+    :disabled-toggle="showAbsolute"
+    :disabled-select="showAbsolute"
     :style="itemStyle"
     v-on="listeners"
   >
@@ -124,7 +126,7 @@ const onDropdownMenuSelect = (item: TreeMenuBaseOptionData) => {
         @select="onActionSelect"
       >
         <template #trigger>
-          <ButtonIcon icon="lucide:ellipsis" :size="size" :class="ui.itemAction" @click.stop />
+          <ButtonIcon v-if="!collapsed" icon="lucide:ellipsis" :size="size" :class="ui.itemAction" @click.stop />
         </template>
       </DropdownMenu>
       <slot name="trailing" />
@@ -148,6 +150,7 @@ const onDropdownMenuSelect = (item: TreeMenuBaseOptionData) => {
         :items="children ?? []"
         :disabled="disabled"
         :size="size"
+        :data-menu="label"
         @select="onDropdownMenuSelect"
       >
         <template #trigger>

src/variants/tree-menu.ts

@@ -20,7 +20,7 @@ export const treeMenuVariants = tv({
     itemLinkIcon: `shrink-0 self-start text-muted-foreground`,
     itemBadge: ``,
     itemTag: `shrink-0 ml-auto`,
-    itemAction: `shrink-0 ml-auto`,
+    itemAction: `absolute -translate-y-1/2 top-1/2`,
     collapsibleIcon: `shrink-0 ml-auto text-muted-foreground transition-transform-200 data-[expanded]:rotate-90`
   },
   variants: {
@@ -30,42 +30,48 @@ export const treeMenuVariants = tv({
         groupLabel: 'h-6 gap-1 px-1.5 py-1 text-3xs',
         item: 'h-6 px-1.5 py-1 group-data-[state=collapsed]:w-6 text-2xs ml-[calc(var(--soybean-tree-menu-indent)*0.75rem)]',
         itemContent: 'gap-1.5',
-        itemLinkIcon: 'size-2 -ml-1'
+        itemLinkIcon: 'size-2 -ml-1',
+        itemAction: 'right-1.5'
       },
       sm: {
         root: 'space-y-0.875 p-1.75 text-xs',
         groupLabel: 'h-7 gap-1.5 px-1.75 py-1 text-2xs',
         item: 'h-7 px-1.75 py-1 group-data-[state=collapsed]:w-7 text-xs ml-[calc(var(--soybean-tree-menu-indent)*0.875rem)]',
         itemContent: 'gap-1.75',
-        itemLinkIcon: 'size-2.5 -ml-1.5'
+        itemLinkIcon: 'size-2.5 -ml-1.5',
+        itemAction: 'right-1.75'
       },
       md: {
         root: 'space-y-1 p-2 text-sm',
         groupLabel: 'h-8 gap-2 px-2 py-1.5 text-xs',
         item: 'h-8 px-2 py-1.5 group-data-[state=collapsed]:w-8 text-sm ml-[calc(var(--soybean-tree-menu-indent)*1rem)]',
         itemContent: 'gap-2',
-        itemLinkIcon: 'size-3 -ml-2'
+        itemLinkIcon: 'size-3 -ml-2',
+        itemAction: 'right-2'
       },
       lg: {
         root: 'space-y-1.25 p-2.25 text-base',
         groupLabel: 'h-9 gap-2.5 px-2.25 py-1.5 text-sm',
         item: 'h-9 px-2.25 py-1.5 group-data-[state=collapsed]:w-9 text-base ml-[calc(var(--soybean-tree-menu-indent)*1.125rem)]',
         itemContent: 'gap-2.25',
-        itemLinkIcon: 'size-3.5 -ml-2.5'
+        itemLinkIcon: 'size-3.5 -ml-2.5',
+        itemAction: 'right-2.25'
       },
       xl: {
         root: 'space-y-1.5 p-2.5 text-lg',
         groupLabel: 'h-10 gap-3 px-2.5 py-1.5 text-base',
         item: 'h-10 px-2.5 py-2 group-data-[state=collapsed]:w-10 text-lg ml-[calc(var(--soybean-tree-menu-indent)*1.25rem)]',
         itemContent: 'gap-2.5',
-        itemLinkIcon: 'size-4 -ml-3'
+        itemLinkIcon: 'size-4 -ml-3',
+        itemAction: 'right-2.5'
       },
       '2xl': {
         root: 'space-y-2 p-3 text-xl',
         groupLabel: 'h-12 gap-3.5 px-3 py-2.5 text-lg',
         item: 'h-12 px-3 py-2.5 group-data-[state=collapsed]:w-12 text-xl ml-[calc(var(--soybean-tree-menu-indent)*1.5rem)]',
         itemContent: 'gap-3',
-        itemLinkIcon: 'size-5 -ml-4'
+        itemLinkIcon: 'size-5 -ml-4',
+        itemAction: 'right-3'
       }
     }
   },