mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
ef4e4a69d5
## Summary Enable `better-tailwindcss/enforce-consistent-class-order` lint rule and auto-fix all 1027 violations across 263 files. Stacked on #9427. ## Changes - **What**: Sort Tailwind classes into consistent order via `eslint --fix` - Enable `enforce-consistent-class-order` as `'error'` in eslint config - Purely cosmetic reordering — no behavioral or visual changes ## Review Focus Mechanical auto-fix PR — all changes are class reordering only. This is the largest diff but lowest risk since it changes no class names, only their order. **Stack:** #9417 → #9427 → **this PR** Fixes #9300 (partial — 3 of 3 rules) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9428-fix-enable-enforce-consistent-class-order-tailwind-lint-rule-31a6d73d3650811c9065f5178ba3e724) by [Unito](https://www.unito.io)
59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
<template>
|
|
<div
|
|
v-tooltip.right="{
|
|
value: tooltipText,
|
|
disabled: !isOverflowing,
|
|
pt: { text: { class: 'w-max whitespace-nowrap' } }
|
|
}"
|
|
class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm text-base-foreground transition-colors select-none"
|
|
:class="
|
|
active
|
|
? 'bg-interface-menu-component-surface-selected'
|
|
: 'hover:bg-interface-menu-component-surface-hovered'
|
|
"
|
|
role="button"
|
|
@mouseenter="checkOverflow"
|
|
@click="onClick"
|
|
>
|
|
<NavIcon v-if="icon" :icon="icon" />
|
|
<i v-else class="text-neutral icon-[lucide--folder] shrink-0 text-xs" />
|
|
<span ref="textRef" class="min-w-0 truncate">
|
|
<slot />
|
|
</span>
|
|
<StatusBadge
|
|
v-if="badge !== undefined"
|
|
:label="String(badge)"
|
|
severity="contrast"
|
|
variant="circle"
|
|
class="ml-auto"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
|
|
import StatusBadge from '@/components/common/StatusBadge.vue'
|
|
import type { NavItemData } from '@/types/navTypes'
|
|
|
|
import NavIcon from './NavIcon.vue'
|
|
|
|
const { icon, badge, active, onClick } = defineProps<{
|
|
icon: NavItemData['icon']
|
|
badge?: NavItemData['badge']
|
|
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>
|