mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-26 01:09:46 +00:00
eb213d0ad3
## Summary - Add text truncation with ellipsis to NavItem when text overflows - Show tooltip on hover only when text is truncated - Use on-demand overflow check (mouseenter) instead of ResizeObserver for better performance ## Test plan - [x] Verify NavItem text truncates with ellipsis when it overflows - [x] Verify tooltip appears on hover only when text is truncated - [x] Verify tooltip does not appear when text fits without truncation <img width="1517" height="1028" alt="스크린샷 2026-01-13 오후 2 20 20" src="https://github.com/user-attachments/assets/3b531785-a567-4e87-9540-fcbab0fe1de6" /> 🤖 Generated with [Claude Code](https://claude.com/claude-code) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8009-feat-add-overflow-tooltip-to-NavItem-2e76d73d3650815a9d7cefb3f0bf2daa) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <drjkl@comfy.org>
52 lines
1.3 KiB
Vue
52 lines
1.3 KiB
Vue
<template>
|
|
<div
|
|
v-tooltip.right="{
|
|
value: tooltipText,
|
|
disabled: !isOverflowing,
|
|
pt: { text: { class: 'whitespace-nowrap' } }
|
|
}"
|
|
class="flex cursor-pointer items-start gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
|
|
:class="
|
|
active
|
|
? 'bg-interface-menu-component-surface-selected'
|
|
: 'hover:bg-interface-menu-component-surface-hovered'
|
|
"
|
|
role="button"
|
|
@mouseenter="checkOverflow"
|
|
@click="onClick"
|
|
>
|
|
<div v-if="icon" class="pt-0.5">
|
|
<NavIcon :icon="icon" />
|
|
</div>
|
|
<i v-else class="text-neutral icon-[lucide--folder] text-xs shrink-0" />
|
|
<span ref="textRef" class="min-w-0 truncate">
|
|
<slot></slot>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
|
|
import type { NavItemData } from '@/types/navTypes'
|
|
|
|
import NavIcon from './NavIcon.vue'
|
|
|
|
const { icon, active, onClick } = defineProps<{
|
|
icon: NavItemData['icon']
|
|
active?: boolean
|
|
onClick: () => void
|
|
}>()
|
|
|
|
const textRef = ref<HTMLElement | null>(null)
|
|
const isOverflowing = ref(false)
|
|
|
|
const checkOverflow = () => {
|
|
if (!textRef.value) return
|
|
isOverflowing.value =
|
|
textRef.value.scrollWidth > textRef.value.clientWidth + 1
|
|
}
|
|
|
|
const tooltipText = computed(() => textRef.value?.textContent ?? '')
|
|
</script>
|