mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-11 08:20:53 +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)
85 lines
2.4 KiB
Vue
85 lines
2.4 KiB
Vue
<template>
|
|
<div
|
|
class="group relative box-content flex cursor-pointer flex-col items-center justify-center rounded-lg bg-component-node-background px-2 py-3 transition-colors duration-150 select-none hover:bg-secondary-background-hover"
|
|
:data-node-name="node.label"
|
|
draggable="true"
|
|
@click="handleClick"
|
|
@dragstart="handleDragStart"
|
|
@dragend="handleDragEnd"
|
|
@mouseenter="handleMouseEnter"
|
|
@mouseleave="handleMouseLeave"
|
|
>
|
|
<i :class="cn(nodeIcon, 'size-6 text-muted-foreground')" />
|
|
|
|
<TextTickerMultiLine
|
|
class="text-foreground mt-2 h-7 w-full shrink-0 text-xs/normal font-normal"
|
|
>
|
|
{{ node.label }}
|
|
</TextTickerMultiLine>
|
|
</div>
|
|
|
|
<Teleport v-if="showPreview" to="body">
|
|
<div
|
|
:ref="(el) => (previewRef = el as HTMLElement)"
|
|
:style="nodePreviewStyle"
|
|
>
|
|
<NodePreviewCard
|
|
:node-def="node.data!"
|
|
:show-inputs-and-outputs="false"
|
|
/>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { kebabCase } from 'es-toolkit/string'
|
|
import type { Ref } from 'vue'
|
|
import { computed, inject } from 'vue'
|
|
|
|
import TextTickerMultiLine from '@/components/common/TextTickerMultiLine.vue'
|
|
import NodePreviewCard from '@/components/node/NodePreviewCard.vue'
|
|
import { useNodePreviewAndDrag } from '@/composables/node/useNodePreviewAndDrag'
|
|
import { ESSENTIALS_ICON_OVERRIDES } from '@/constants/essentialsNodes'
|
|
import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
|
|
import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
const { node } = defineProps<{
|
|
node: RenderedTreeExplorerNode<ComfyNodeDefImpl>
|
|
}>()
|
|
|
|
const panelRef = inject<Ref<HTMLElement | null>>(
|
|
'essentialsPanelRef',
|
|
undefined!
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
click: [node: RenderedTreeExplorerNode<ComfyNodeDefImpl>]
|
|
}>()
|
|
|
|
const nodeDef = computed(() => node.data)
|
|
|
|
const {
|
|
previewRef,
|
|
showPreview,
|
|
nodePreviewStyle,
|
|
handleMouseEnter,
|
|
handleMouseLeave,
|
|
handleDragStart,
|
|
handleDragEnd
|
|
} = useNodePreviewAndDrag(nodeDef, panelRef)
|
|
|
|
const nodeIcon = computed(() => {
|
|
const nodeName = node.data?.name
|
|
if (nodeName && nodeName in ESSENTIALS_ICON_OVERRIDES)
|
|
return ESSENTIALS_ICON_OVERRIDES[nodeName]
|
|
const iconName = nodeName ? kebabCase(nodeName) : 'node'
|
|
return `icon-[comfy--${iconName}]`
|
|
})
|
|
|
|
function handleClick() {
|
|
if (!node.data) return
|
|
emit('click', node)
|
|
}
|
|
</script>
|