mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-07 22:20:03 +00:00
493b1e42aa
## Summary Enable `better-tailwindcss/no-deprecated-classes` lint rule and auto-fix all 103 violations across 65 files. First PR in a stacked series for #9300. ## Changes - **What**: Replace deprecated Tailwind v3 classes with v4 equivalents: - `rounded` → `rounded-sm` (85) - `flex-shrink-0` → `shrink-0` (16) - `flex-grow` → `grow` (2) - Enable `no-deprecated-classes` as `'error'` in eslint config - Update one test asserting on `'rounded'` class string ## Review Focus Mechanical auto-fix PR — all changes produced by `eslint --fix`. No visual or behavioral changes (Tailwind v4 aliases these classes identically). Fixes #9300 (partial — 1 of 3 rules) ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9417-fix-enable-no-deprecated-classes-tailwind-lint-rule-31a6d73d3650819eaef4cf8ad84fb186) by [Unito](https://www.unito.io) Co-authored-by: Alexander Brown <drjkl@comfy.org>
71 lines
1.7 KiB
Vue
71 lines
1.7 KiB
Vue
<template>
|
|
<button
|
|
type="button"
|
|
:data-testid="`category-${node.key}`"
|
|
:aria-current="selectedCategory === node.key || undefined"
|
|
:style="{ paddingLeft: `${0.75 + depth * 1.25}rem` }"
|
|
:class="
|
|
cn(
|
|
'w-full cursor-pointer rounded-sm border-none bg-transparent py-2.5 pr-3 text-left text-sm transition-colors',
|
|
selectedCategory === node.key
|
|
? CATEGORY_SELECTED_CLASS
|
|
: CATEGORY_UNSELECTED_CLASS
|
|
)
|
|
"
|
|
@click="$emit('select', node.key)"
|
|
>
|
|
{{ node.label }}
|
|
</button>
|
|
<template v-if="isExpanded && node.children?.length">
|
|
<NodeSearchCategoryTreeNode
|
|
v-for="child in node.children"
|
|
:key="child.key"
|
|
:node="child"
|
|
:depth="depth + 1"
|
|
:selected-category="selectedCategory"
|
|
:selected-collapsed="selectedCollapsed"
|
|
@select="$emit('select', $event)"
|
|
/>
|
|
</template>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
export interface CategoryNode {
|
|
key: string
|
|
label: string
|
|
children?: CategoryNode[]
|
|
}
|
|
|
|
export const CATEGORY_SELECTED_CLASS =
|
|
'bg-secondary-background-hover font-semibold text-foreground'
|
|
export const CATEGORY_UNSELECTED_CLASS =
|
|
'text-muted-foreground hover:bg-secondary-background-hover hover:text-foreground'
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
const {
|
|
node,
|
|
depth = 0,
|
|
selectedCategory,
|
|
selectedCollapsed = false
|
|
} = defineProps<{
|
|
node: CategoryNode
|
|
depth?: number
|
|
selectedCategory: string
|
|
selectedCollapsed?: boolean
|
|
}>()
|
|
|
|
defineEmits<{
|
|
select: [key: string]
|
|
}>()
|
|
|
|
const isExpanded = computed(() => {
|
|
if (selectedCategory === node.key) return !selectedCollapsed
|
|
return selectedCategory.startsWith(node.key + '/')
|
|
})
|
|
</script>
|