Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-03-12 16:40:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: enable enforce-consistent-class-order tailwind lint rule (#9428)

Browse Source 
## 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)
This commit is contained in:
Christian Byrne
2026-03-05 17:24:34 -08:00
committed by GitHub
parent 60267fc64c
commit ef4e4a69d5
278 changed files with 1027 additions and 1027 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/rightSidePanel/RightSidePanel.vue
View File

@@ -250,8 +250,8 @@ function handleTitleCancel() {
>
<!-- Panel Header -->
<section class="pt-1">
<div class="flex items-center justify-between pl-4 pr-3">
<h3 class="my-3.5 text-sm font-semibold line-clamp-2 cursor-default">
<div class="flex items-center justify-between pr-3 pl-4">
<h3 class="my-3.5 line-clamp-2 cursor-default text-sm font-semibold">
<template v-if="allowTitleEdit">
<EditableText
:model-value="panelTitle"
@@ -264,7 +264,7 @@ function handleTitleCancel() {
/>
<i
v-if="!isEditing"
class="icon-[lucide--pencil] size-4 text-muted-foreground ml-2 content-center relative top-[2px] hover:text-base-foreground cursor-pointer shrink-0"
class="relative top-[2px] ml-2 icon-[lucide--pencil] size-4 shrink-0 cursor-pointer content-center text-muted-foreground hover:text-base-foreground"
@click="isEditing = true"
/>
</template>
@@ -298,7 +298,7 @@ function handleTitleCancel() {
</Button>
</div>
</div>
<nav class="px-4 pb-2 pt-1 overflow-x-auto">
<nav class="overflow-x-auto px-4 pt-1 pb-2">
<TabList
:model-value="activeTab"
@update:model-value="
@@ -310,7 +310,7 @@ function handleTitleCancel() {
<Tab
v-for="tab in tabs"
:key="tab.value"
class="text-sm py-1 px-2 font-inter transition-all active:scale-95"
class="px-2 py-1 font-inter text-sm transition-all active:scale-95"
:value="tab.value"
>
{{ tab.label() }}

20
src/components/rightSidePanel/errors/ErrorNodeCard.vue
View File

@@ -7,22 +7,22 @@
>
<span
v-if="showNodeIdBadge"
class="shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 text-xs font-mono text-muted-foreground font-bold"
class="shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 font-mono text-xs font-bold text-muted-foreground"
>
#{{ card.nodeId }}
</span>
<span
v-if="card.nodeTitle"
class="flex-1 text-sm text-muted-foreground truncate font-medium"
class="flex-1 truncate text-sm font-medium text-muted-foreground"
>
{{ card.nodeTitle }}
</span>
<div class="flex items-center shrink-0">
<div class="flex shrink-0 items-center">
<Button
v-if="card.isSubgraphNode"
variant="secondary"
size="sm"
class="rounded-lg text-sm shrink-0 h-8"
class="h-8 shrink-0 rounded-lg text-sm"
@click.stop="handleEnterSubgraph"
>
{{ t('rightSidePanel.enterSubgraph') }}
@@ -30,7 +30,7 @@
<Button
variant="textonly"
size="icon-sm"
class="size-8 text-muted-foreground hover:text-base-foreground shrink-0"
class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
:aria-label="t('rightSidePanel.locateNode')"
@click.stop="handleLocateNode"
>
@@ -40,7 +40,7 @@
</div>
<!-- Multiple Errors within one Card -->
<div class="divide-y divide-interface-stroke/20 space-y-4">
<div class="space-y-4 divide-y divide-interface-stroke/20">
<!-- Card Content -->
<div
v-for="(error, idx) in card.errors"
@@ -50,7 +50,7 @@
<!-- Error Message -->
<p
v-if="error.message"
class="m-0 text-sm/relaxed wrap-break-word whitespace-pre-wrap px-0.5 max-h-[4lh] overflow-y-auto"
class="m-0 max-h-[4lh] overflow-y-auto px-0.5 text-sm/relaxed wrap-break-word whitespace-pre-wrap"
>
{{ error.message }}
</p>
@@ -60,13 +60,13 @@
v-if="error.details"
:class="
cn(
'rounded-lg bg-secondary-background-hover p-2.5 overflow-y-auto border border-interface-stroke/30',
'overflow-y-auto rounded-lg border border-interface-stroke/30 bg-secondary-background-hover p-2.5',
error.isRuntimeError ? 'max-h-[10lh]' : 'max-h-[6lh]'
)
"
>
<p
class="m-0 text-xs/relaxed text-muted-foreground wrap-break-word whitespace-pre-wrap font-mono"
class="m-0 font-mono text-xs/relaxed wrap-break-word whitespace-pre-wrap text-muted-foreground"
>
{{ error.details }}
</p>
@@ -75,7 +75,7 @@
<Button
variant="secondary"
size="sm"
class="w-full justify-center gap-2 h-8 text-xs"
class="h-8 w-full justify-center gap-2 text-xs"
@click="handleCopyError(error)"
>
<i class="icon-[lucide--copy] size-3.5" />

8
src/components/rightSidePanel/errors/MissingNodeCard.vue
View File

@@ -21,13 +21,13 @@
>
<template #pipCmd>
<code
class="px-1 py-0.5 rounded-sm text-xs font-mono bg-comfy-menu-bg text-comfy-input-foreground"
class="rounded-sm bg-comfy-menu-bg px-1 py-0.5 font-mono text-xs text-comfy-input-foreground"
>pip install -U --pre comfyui-manager</code
>
</template>
<template #flag>
<code
class="px-1 py-0.5 rounded-sm text-xs font-mono bg-comfy-menu-bg text-comfy-input-foreground"
class="rounded-sm bg-comfy-menu-bg px-1 py-0.5 font-mono text-xs text-comfy-input-foreground"
>--enable-manager</code
>
</template>
@@ -49,12 +49,12 @@
v-if="hasInstalledPacksPendingRestart"
variant="primary"
:disabled="isRestarting"
class="w-full h-9 justify-center gap-2 text-sm font-semibold mt-2"
class="mt-2 h-9 w-full justify-center gap-2 text-sm font-semibold"
@click="applyChanges()"
>
<DotSpinner v-if="isRestarting" duration="1s" :size="14" />
<i v-else class="icon-[lucide--refresh-cw] size-4 shrink-0" />
<span class="truncate min-w-0">{{
<span class="min-w-0 truncate">{{
t('rightSidePanel.missingNodePacks.applyChanges')
}}</span>
</Button>

42
src/components/rightSidePanel/errors/MissingPackGroupRow.vue
View File

@@ -1,14 +1,14 @@
<template>
<div class="flex flex-col w-full mb-2">
<div class="mb-2 flex w-full flex-col">
<!-- Pack header row: pack name + info + chevron -->
<div class="flex h-8 items-center w-full">
<div class="flex h-8 w-full items-center">
<!-- Warning icon for unknown packs -->
<i
v-if="group.packId === null && !group.isResolving"
class="icon-[lucide--triangle-alert] size-4 text-warning-background shrink-0 mr-1.5"
class="mr-1.5 icon-[lucide--triangle-alert] size-4 shrink-0 text-warning-background"
/>
<p
class="flex-1 min-w-0 text-sm font-medium truncate"
class="min-w-0 flex-1 truncate text-sm font-medium"
:class="
group.packId === null && !group.isResolving
? 'text-warning-background'
@@ -28,7 +28,7 @@
v-if="showInfoButton && group.packId !== null"
variant="textonly"
size="icon-sm"
class="size-8 text-muted-foreground hover:text-base-foreground shrink-0"
class="size-8 shrink-0 text-muted-foreground hover:text-base-foreground"
:aria-label="t('rightSidePanel.missingNodePacks.viewInManager')"
@click="emit('openManagerInfo', group.packId ?? '')"
>
@@ -60,7 +60,7 @@
<TransitionCollapse>
<div
v-if="expanded"
class="flex flex-col gap-0.5 pl-2 mb-1 overflow-hidden"
class="mb-1 flex flex-col gap-0.5 overflow-hidden pl-2"
>
<div
v-for="nodeType in group.nodeTypes"
@@ -73,18 +73,18 @@
typeof nodeType !== 'string' &&
nodeType.nodeId != null
"
class="shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 text-xs font-mono text-muted-foreground font-bold mr-1"
class="mr-1 shrink-0 rounded-md bg-secondary-background-selected px-2 py-0.5 font-mono text-xs font-bold text-muted-foreground"
>
#{{ nodeType.nodeId }}
</span>
<p class="flex-1 min-w-0 text-xs text-muted-foreground truncate">
<p class="min-w-0 flex-1 truncate text-xs text-muted-foreground">
{{ getLabel(nodeType) }}
</p>
<Button
v-if="typeof nodeType !== 'string' && nodeType.nodeId != null"
variant="textonly"
size="icon-sm"
class="size-6 text-muted-foreground hover:text-base-foreground shrink-0 mr-1"
class="mr-1 size-6 shrink-0 text-muted-foreground hover:text-base-foreground"
:aria-label="t('rightSidePanel.locateNode')"
@click="handleLocateNode(nodeType)"
>
@@ -101,12 +101,12 @@
group.packId !== null &&
(nodePack || comfyManagerStore.isPackInstalled(group.packId))
"
class="flex items-start w-full py-1"
class="flex w-full items-start py-1"
>
<Button
variant="secondary"
size="md"
class="flex flex-1 w-full"
class="flex w-full flex-1"
:disabled="
comfyManagerStore.isPackInstalled(group.packId) || isInstalling
"
@@ -120,13 +120,13 @@
/>
<i
v-else-if="comfyManagerStore.isPackInstalled(group.packId)"
class="icon-[lucide--check] size-4 text-foreground shrink-0 mr-1"
class="text-foreground mr-1 icon-[lucide--check] size-4 shrink-0"
/>
<i
v-else
class="icon-[lucide--download] size-4 text-foreground shrink-0 mr-1"
class="text-foreground mr-1 icon-[lucide--download] size-4 shrink-0"
/>
<span class="text-sm text-foreground truncate min-w-0">
<span class="text-foreground min-w-0 truncate text-sm">
{{
isInstalling
? t('rightSidePanel.missingNodePacks.installing')
@@ -141,13 +141,13 @@
<!-- Registry still loading: packId known but result not yet available -->
<div
v-else-if="group.packId !== null && shouldShowManagerButtons && isLoading"
class="flex items-start w-full py-1"
class="flex w-full items-start py-1"
>
<div
class="flex flex-1 h-8 items-center justify-center overflow-hidden p-2 rounded-lg min-w-0 bg-secondary-background opacity-60 cursor-not-allowed select-none"
class="flex h-8 min-w-0 flex-1 cursor-not-allowed items-center justify-center overflow-hidden rounded-lg bg-secondary-background p-2 opacity-60 select-none"
>
<DotSpinner duration="1s" :size="12" class="mr-1.5 shrink-0" />
<span class="text-sm text-foreground truncate min-w-0">
<span class="text-foreground min-w-0 truncate text-sm">
{{ t('g.loading') }}
</span>
</div>
@@ -156,12 +156,12 @@
<!-- Search in Manager: fetch done but pack not found in registry -->
<div
v-else-if="group.packId !== null && shouldShowManagerButtons"
class="flex items-start w-full py-1"
class="flex w-full items-start py-1"
>
<Button
variant="secondary"
size="md"
class="flex flex-1 w-full"
class="flex w-full flex-1"
@click="
openManager({
initialTab: ManagerTab.All,
@@ -169,8 +169,8 @@
})
"
>
<i class="icon-[lucide--search] size-4 text-foreground shrink-0 mr-1" />
<span class="text-sm text-foreground truncate min-w-0">
<i class="text-foreground mr-1 icon-[lucide--search] size-4 shrink-0" />
<span class="text-foreground min-w-0 truncate text-sm">
{{ t('rightSidePanel.missingNodePacks.searchInManager') }}
</span>
</Button>

30
src/components/rightSidePanel/errors/TabErrors.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="flex flex-col h-full min-w-0">
<div class="flex h-full min-w-0 flex-col">
<!-- Search bar + collapse toggle -->
<div
class="px-4 pt-1 pb-4 flex items-center border-b border-interface-stroke shrink-0 min-w-0"
class="flex min-w-0 shrink-0 items-center border-b border-interface-stroke px-4 pt-1 pb-4"
>
<FormSearchInput v-model="searchQuery" class="flex-1" />
<CollapseToggleButton
@@ -12,12 +12,12 @@
</div>
<!-- Scrollable content -->
<div class="flex-1 overflow-y-auto min-w-0">
<div class="min-w-0 flex-1 overflow-y-auto">
<TransitionGroup tag="div" name="list-scale" class="relative">
<div
v-if="filteredGroups.length === 0"
key="empty"
class="text-sm text-muted-foreground px-4 text-center pt-5 pb-15"
class="px-4 pt-5 pb-15 text-center text-sm text-muted-foreground"
>
{{
searchQuery.trim()
@@ -40,12 +40,12 @@
@update:collapse="setSectionCollapsed(group.title, $event)"
>
<template #label>
<div class="flex items-center gap-2 flex-1 min-w-0">
<span class="flex-1 flex items-center gap-2 min-w-0">
<div class="flex min-w-0 flex-1 items-center gap-2">
<span class="flex min-w-0 flex-1 items-center gap-2">
<i
class="icon-[lucide--octagon-alert] size-4 text-destructive-background-hover shrink-0"
class="icon-[lucide--octagon-alert] size-4 shrink-0 text-destructive-background-hover"
/>
<span class="text-destructive-background-hover truncate">
<span class="truncate text-destructive-background-hover">
{{
group.type === 'missing_node'
? `${group.title} (${missingPackGroups.length})`
@@ -69,7 +69,7 @@
"
variant="secondary"
size="sm"
class="shrink-0 mr-2 h-8 rounded-lg text-sm"
class="mr-2 h-8 shrink-0 rounded-lg text-sm"
:disabled="isInstallingAll"
@click.stop="installAll"
>
@@ -90,7 +90,7 @@
"
variant="secondary"
size="sm"
class="shrink-0 mr-2 h-8 rounded-lg text-sm"
class="mr-2 h-8 shrink-0 rounded-lg text-sm"
@click.stop="handleReplaceAll()"
>
{{ t('nodeReplacement.replaceAll', 'Replace All') }}
@@ -118,7 +118,7 @@
/>
<!-- Execution Errors -->
<div v-else-if="group.type === 'execution'" class="px-4 space-y-3">
<div v-else-if="group.type === 'execution'" class="space-y-3 px-4">
<ErrorNodeCard
v-for="card in group.cards"
:key="card.id"
@@ -135,17 +135,17 @@
</div>
<!-- Fixed Footer: Help Links -->
<div class="shrink-0 border-t border-interface-stroke p-4 min-w-0">
<div class="min-w-0 shrink-0 border-t border-interface-stroke p-4">
<i18n-t
keypath="rightSidePanel.errorHelp"
tag="p"
class="m-0 text-sm/tight text-muted-foreground wrap-break-word"
class="m-0 text-sm/tight wrap-break-word text-muted-foreground"
>
<template #github>
<Button
variant="textonly"
size="unset"
class="inline underline text-inherit text-sm whitespace-nowrap"
class="inline text-sm whitespace-nowrap text-inherit underline"
@click="openGitHubIssues"
>
{{ t('rightSidePanel.errorHelpGithub') }}
@@ -155,7 +155,7 @@
<Button
variant="textonly"
size="unset"
class="inline underline text-inherit text-sm whitespace-nowrap"
class="inline text-sm whitespace-nowrap text-inherit underline"
@click="contactSupport"
>
{{ t('rightSidePanel.errorHelpSupport') }}

2
src/components/rightSidePanel/layout/CollapseToggleButton.vue
View File

@@ -7,7 +7,7 @@
leave-from-class="max-w-10 opacity-100 ml-2"
leave-to-class="max-w-0 opacity-0 ml-0"
>
<div v-if="show" class="overflow-hidden flex items-center ml-2">
<div v-if="show" class="ml-2 flex items-center overflow-hidden">
<Button
v-tooltip.bottom="
isAllCollapsed ? t('g.expandAll') : t('g.collapseAll')

8
src/components/rightSidePanel/layout/PropertiesAccordionItem.vue
View File

@@ -36,14 +36,14 @@ const tooltipConfig = computed(() => {
<template>
<div :class="cn('flex flex-col bg-comfy-menu-bg', className)">
<div
class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl bg-inherit"
class="sticky top-0 z-10 flex items-center justify-between bg-inherit backdrop-blur-xl"
>
<button
v-tooltip="tooltipConfig"
type="button"
:class="
cn(
'group bg-transparent border-0 outline-0 ring-0 w-full text-left flex items-center justify-between pl-4 pr-3',
'group flex w-full items-center justify-between border-0 bg-transparent pr-3 pl-4 text-left ring-0 outline-0',
size === 'lg' ? 'min-h-16' : 'min-h-12',
!disabled && 'cursor-pointer'
)
@@ -51,7 +51,7 @@ const tooltipConfig = computed(() => {
:disabled="disabled"
@click="isCollapse = !isCollapse"
>
<span class="text-sm font-semibold line-clamp-2 flex-1">
<span class="line-clamp-2 flex-1 text-sm font-semibold">
<slot name="label">
{{ label }}
</slot>
@@ -60,7 +60,7 @@ const tooltipConfig = computed(() => {
<i
:class="
cn(
'text-muted-foreground group-hover:text-base-foreground group-has-[.subbutton:hover]:text-muted-foreground group-focus:text-base-foreground icon-[lucide--chevron-up] size-4 transition-all',
'icon-[lucide--chevron-up] size-4 text-muted-foreground transition-all group-hover:text-base-foreground group-focus:text-base-foreground group-has-[.subbutton:hover]:text-muted-foreground',
isCollapse && '-rotate-180',
disabled && 'opacity-0'
)

14
src/components/rightSidePanel/parameters/SectionWidgets.vue
View File

@@ -203,8 +203,8 @@ defineExpose({
:size="showSeeError ? 'lg' : 'default'"
>
<template #label>
<div class="flex flex-wrap items-center gap-2 flex-1 min-w-0">
<span class="flex-1 flex items-center gap-2 min-w-0">
<div class="flex min-w-0 flex-1 flex-wrap items-center gap-2">
<span class="flex min-w-0 flex-1 items-center gap-2">
<i
v-if="nodeHasError"
class="icon-[lucide--octagon-alert] size-4 shrink-0 text-destructive-background-hover"
@@ -223,7 +223,7 @@ defineExpose({
</span>
<span
v-if="parentGroup"
class="text-xs text-muted-foreground truncate flex-1 text-right min-w-11"
class="min-w-11 flex-1 truncate text-right text-xs text-muted-foreground"
:title="parentGroup.title"
>
{{ parentGroup.title }}
@@ -233,7 +233,7 @@ defineExpose({
v-if="showSeeError"
variant="secondary"
size="sm"
class="shrink-0 rounded-lg text-sm h-8"
class="h-8 shrink-0 rounded-lg text-sm"
@click.stop="navigateToErrorTab"
>
{{ t('rightSidePanel.seeError') }}
@@ -242,7 +242,7 @@ defineExpose({
v-if="!isEmpty"
variant="muted-textonly"
size="icon-sm"
class="subbutton shrink-0 size-8 hover:text-base-foreground"
class="subbutton size-8 shrink-0 hover:text-base-foreground"
:title="t('rightSidePanel.resetAllParameters')"
:aria-label="t('rightSidePanel.resetAllParameters')"
@click.stop="handleResetAllWidgets"
@@ -253,7 +253,7 @@ defineExpose({
v-if="canShowLocateButton"
variant="muted-textonly"
size="icon-sm"
class="subbutton shrink-0 mr-3 size-8 hover:text-base-foreground"
class="subbutton mr-3 size-8 shrink-0 hover:text-base-foreground"
:title="t('rightSidePanel.locateNode')"
:aria-label="t('rightSidePanel.locateNode')"
@click.stop="handleLocateNode"
@@ -267,7 +267,7 @@ defineExpose({
<div
ref="widgetsContainer"
class="space-y-2 rounded-lg px-4 pt-1 relative"
class="relative space-y-2 rounded-lg px-4 pt-1"
>
<TransitionGroup name="list-scale">
<WidgetItem

6
src/components/rightSidePanel/parameters/TabGlobalParameters.vue
View File

@@ -117,7 +117,7 @@ function onCollapseUpdate() {
<template>
<div
class="px-4 pt-1 pb-4 flex items-center border-b border-interface-stroke"
class="flex items-center border-b border-interface-stroke px-4 pt-1 pb-4"
>
<FormSearchInput
v-model="searchQuery"
@@ -138,7 +138,7 @@ function onCollapseUpdate() {
@update:collapse="onCollapseUpdate"
>
<template #empty>
<div class="text-sm text-muted-foreground px-4 text-center py-10">
<div class="px-4 py-10 text-center text-sm text-muted-foreground">
<p>
{{
isSearching
@@ -155,7 +155,7 @@ function onCollapseUpdate() {
<template #moreIcon>
<span
aria-hidden="true"
class="inline-flex size-5 items-center justify-center rounded-md bg-secondary-background-hover text-secondary-foreground align-middle"
class="text-secondary-foreground inline-flex size-5 items-center justify-center rounded-md bg-secondary-background-hover align-middle"
>
<i class="icon-[lucide--more-vertical] text-sm" />
</span>

4
src/components/rightSidePanel/parameters/TabNodes.vue
View File

@@ -76,7 +76,7 @@ async function searcher(query: string) {
<template>
<div
class="px-4 pt-1 pb-4 flex items-center border-b border-interface-stroke"
class="flex items-center border-b border-interface-stroke px-4 pt-1 pb-4"
>
<FormSearchInput
v-model="searchQuery"
@@ -92,7 +92,7 @@ async function searcher(query: string) {
<TransitionGroup tag="div" name="list-scale" class="relative">
<div
v-if="isSearching && searchedWidgetsSectionDataList.length === 0"
class="text-sm text-muted-foreground px-4 text-center pt-5 pb-15"
class="px-4 pt-5 pb-15 text-center text-sm text-muted-foreground"
>
{{ $t('rightSidePanel.noneSearchDesc') }}
</div>

4
src/components/rightSidePanel/parameters/TabNormalInputs.vue
View File

@@ -120,7 +120,7 @@ const advancedLabel = computed(() => {
<template>
<div
class="px-4 pt-1 pb-4 flex items-center border-b border-interface-stroke"
class="flex items-center border-b border-interface-stroke px-4 pt-1 pb-4"
>
<FormSearchInput
v-model="searchQuery"
@@ -140,7 +140,7 @@ const advancedLabel = computed(() => {
<TransitionGroup tag="div" name="list-scale" class="relative">
<div
v-if="searchedWidgetsSectionDataList.length === 0"
class="text-sm text-muted-foreground px-4 py-10 text-center"
class="px-4 py-10 text-center text-sm text-muted-foreground"
>
{{
isSearching

4
src/components/rightSidePanel/parameters/TabSubgraphInputs.vue
View File

@@ -201,7 +201,7 @@ const label = computed(() => {
<template>
<div
class="px-4 pt-1 pb-4 flex items-center border-b border-interface-stroke"
class="flex items-center border-b border-interface-stroke px-4 pt-1 pb-4"
>
<FormSearchInput
v-model="searchQuery"
@@ -237,7 +237,7 @@ const label = computed(() => {
"
>
<template #empty>
<div class="text-sm text-muted-foreground px-4 text-center pt-5 pb-15">
<div class="px-4 pt-5 pb-15 text-center text-sm text-muted-foreground">
{{ t('rightSidePanel.noneSearchDesc') }}
</div>
</template>

10
src/components/rightSidePanel/parameters/WidgetActions.vue
View File

@@ -117,13 +117,13 @@ function handleResetToDefault() {
<template>
<MoreButton
is-vertical
class="text-muted-foreground bg-transparent hover:text-base-foreground hover:bg-secondary-background-hover active:scale-95 transition-all"
class="bg-transparent text-muted-foreground transition-all hover:bg-secondary-background-hover hover:text-base-foreground active:scale-95"
>
<template #default="{ close }">
<Button
variant="textonly"
size="unset"
class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
class="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
@click="
() => {
handleRename()
@@ -139,7 +139,7 @@ function handleResetToDefault() {
v-if="hasParents"
variant="textonly"
size="unset"
class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
class="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
@click="
() => {
if (isShownOnParents) handleHideInput()
@@ -161,7 +161,7 @@ function handleResetToDefault() {
<Button
variant="textonly"
size="unset"
class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
class="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
@click="
() => {
handleToggleFavorite()
@@ -183,7 +183,7 @@ function handleResetToDefault() {
v-if="hasDefault"
variant="textonly"
size="unset"
class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
class="flex w-full items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
:disabled="isCurrentValueDefault"
@click="
() => {

18
src/components/rightSidePanel/parameters/WidgetItem.vue
View File

@@ -140,9 +140,9 @@ const displayLabel = customRef((track, trigger) => {
<div
:class="
cn(
'widget-item col-span-full grid grid-cols-subgrid rounded-lg group',
'widget-item group col-span-full grid grid-cols-subgrid rounded-lg',
isDraggable &&
'draggable-item will-change-auto! drag-handle cursor-grab bg-comfy-menu-bg [&.is-draggable]:cursor-grabbing outline-comfy-menu-bg [&.is-draggable]:outline-4 [&.is-draggable]:outline-offset-0 [&.is-draggable]:opacity-70'
'draggable-item drag-handle cursor-grab bg-comfy-menu-bg outline-comfy-menu-bg will-change-auto! [&.is-draggable]:cursor-grabbing [&.is-draggable]:opacity-70 [&.is-draggable]:outline-4 [&.is-draggable]:outline-offset-0'
)
"
>
@@ -150,7 +150,7 @@ const displayLabel = customRef((track, trigger) => {
<div
:class="
cn(
'min-h-8 flex items-center justify-between gap-1 mb-1.5 min-w-0',
'mb-1.5 flex min-h-8 min-w-0 items-center justify-between gap-1',
isDraggable && 'pointer-events-none'
)
"
@@ -160,7 +160,7 @@ const displayLabel = customRef((track, trigger) => {
:model-value="displayLabel"
:is-editing="isEditing"
:input-attrs="{ placeholder: widget.name }"
class="text-sm/8 p-0 m-0 truncate pointer-events-auto cursor-text"
class="pointer-events-auto m-0 cursor-text truncate p-0 text-sm/8"
@edit="displayLabel = $event"
@cancel="isEditing = false"
@click="isEditing = true"
@@ -168,13 +168,13 @@ const displayLabel = customRef((track, trigger) => {
<span
v-if="(showNodeName || hasParents) && sourceNodeName"
class="text-xs text-muted-foreground flex-1 p-0 my-0 mx-1 truncate text-right min-w-10"
class="mx-1 my-0 min-w-10 flex-1 truncate p-0 text-right text-xs text-muted-foreground"
>
{{ sourceNodeName }}
</span>
<div
v-if="!hiddenWidgetActions"
class="flex items-center gap-1 shrink-0 pointer-events-auto"
class="pointer-events-auto flex shrink-0 items-center gap-1"
>
<WidgetActions
v-model:label="displayLabel"
@@ -192,10 +192,10 @@ const displayLabel = customRef((track, trigger) => {
!hiddenFavoriteIndicator &&
favoritedWidgetsStore.isFavorited(favoriteNode, widget.name)
"
class="relative z-2 pointer-events-none"
class="pointer-events-none relative z-2"
>
<i
class="absolute -right-1 -top-1 pi pi-star-fill text-xs text-muted-foreground pointer-events-none"
class="pi pi-star-fill pointer-events-none absolute -top-1 -right-1 text-xs text-muted-foreground"
/>
</div>
<!-- widget content -->
@@ -211,7 +211,7 @@ const displayLabel = customRef((track, trigger) => {
<div
:class="
cn(
'pointer-events-none mt-1.5 mx-auto max-w-40 w-1/2 h-1 rounded-lg bg-transparent transition-colors duration-150',
'pointer-events-none mx-auto mt-1.5 h-1 w-1/2 max-w-40 rounded-lg bg-transparent transition-colors duration-150',
'group-hover:bg-interface-stroke group-[.is-draggable]:bg-component-node-widget-background-highlighted',
!isDraggable && 'opacity-0'
)

4
src/components/rightSidePanel/settings/LayoutField.vue
View File

@@ -25,7 +25,7 @@ defineProps<{
"
:class="
cn(
'text-sm text-muted-foreground truncate group',
'group truncate text-sm text-muted-foreground',
tooltip ? 'cursor-help' : '',
singleline ? 'flex-1' : ''
)
@@ -35,7 +35,7 @@ defineProps<{
<i
v-if="tooltip"
class="icon-[lucide--info] ml-0.5 size-3 relative top-px group-hover:text-primary"
class="relative top-px ml-0.5 icon-[lucide--info] size-3 group-hover:text-primary"
/>
</span>
<slot />

4
src/components/rightSidePanel/settings/SetNodeColor.vue
View File

@@ -107,14 +107,14 @@ const nodeColor = computed<NodeColorOption['name'] | null>({
<template>
<LayoutField :label="t('rightSidePanel.color')">
<div
class="bg-secondary-background border-none rounded-lg p-1 grid grid-cols-5 gap-1 justify-items-center"
class="grid grid-cols-5 justify-items-center gap-1 rounded-lg border-none bg-secondary-background p-1"
>
<button
v-for="option of colorOptions"
:key="option.name"
:class="
cn(
'size-8 rounded-lg bg-transparent border-0 outline-0 ring-0 text-left flex justify-center items-center cursor-pointer',
'flex size-8 cursor-pointer items-center justify-center rounded-lg border-0 bg-transparent text-left ring-0 outline-0',
option.name === nodeColor
? 'bg-interface-menu-component-surface-selected'
: 'hover:bg-interface-menu-component-surface-selected'

6
src/components/rightSidePanel/settings/TabGlobalSettings.vue
View File

@@ -131,7 +131,7 @@ function openFullSettings() {
<LayoutField :label="t('rightSidePanel.globalSettings.gridSpacing')">
<div
:class="
cn(WidgetInputBaseClass, 'flex items-center gap-2 pl-3 pr-2')
cn(WidgetInputBaseClass, 'flex items-center gap-2 pr-2 pl-3')
"
>
<Slider
@@ -179,7 +179,7 @@ function openFullSettings() {
:pt="{
option: 'text-xs',
dropdown: 'w-8',
label: cn('truncate min-w-[4ch]', $slots.default && 'mr-5'),
label: cn('min-w-[4ch] truncate', $slots.default && 'mr-5'),
overlay: 'w-fit min-w-full'
}"
data-capture-wheel="true"
@@ -197,7 +197,7 @@ function openFullSettings() {
<!-- View all settings button -->
<div
class="flex items-center justify-center p-4 border-b border-interface-stroke"
class="flex items-center justify-center border-b border-interface-stroke p-4"
>
<Button
variant="muted-textonly"

18
src/components/rightSidePanel/subgraph/SubgraphEditor.vue
View File

@@ -200,7 +200,7 @@ onMounted(() => {
<template>
<div v-if="activeNode" class="subgraph-edit-section flex h-full flex-col">
<div class="px-4 pb-4 pt-1 flex gap-2 border-b border-interface-stroke">
<div class="flex gap-2 border-b border-interface-stroke px-4 pt-1 pb-4">
<FormSearchInput v-model="searchQuery" />
</div>
@@ -211,7 +211,7 @@ onMounted(() => {
filteredActive.length === 0 &&
filteredCandidates.length === 0
"
class="text-sm text-muted-foreground px-4 py-10 text-center"
class="px-4 py-10 text-center text-sm text-muted-foreground"
>
{{ $t('rightSidePanel.noneSearchDesc') }}
</div>
@@ -221,13 +221,13 @@ onMounted(() => {
class="flex flex-col border-b border-interface-stroke"
>
<div
class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl min-h-12 px-4"
class="sticky top-0 z-10 flex min-h-12 items-center justify-between px-4 backdrop-blur-xl"
>
<div class="text-sm font-semibold uppercase line-clamp-1">
<div class="line-clamp-1 text-sm font-semibold uppercase">
{{ $t('subgraphStore.shown') }}
</div>
<a
class="cursor-pointer text-right text-xs font-normal text-text-secondary hover:text-azure-600 whitespace-nowrap"
class="cursor-pointer text-right text-xs font-normal whitespace-nowrap text-text-secondary hover:text-azure-600"
@click.stop="hideAll"
>
{{ $t('subgraphStore.hideAll') }}</a
@@ -252,19 +252,19 @@ onMounted(() => {
class="flex flex-col border-b border-interface-stroke"
>
<div
class="sticky top-0 z-10 flex items-center justify-between backdrop-blur-xl min-h-12 px-4"
class="sticky top-0 z-10 flex min-h-12 items-center justify-between px-4 backdrop-blur-xl"
>
<div class="text-sm font-semibold uppercase line-clamp-1">
<div class="line-clamp-1 text-sm font-semibold uppercase">
{{ $t('subgraphStore.hidden') }}
</div>
<a
class="cursor-pointer text-right text-xs font-normal text-text-secondary hover:text-azure-600 whitespace-nowrap"
class="cursor-pointer text-right text-xs font-normal whitespace-nowrap text-text-secondary hover:text-azure-600"
@click.stop="showAll"
>
{{ $t('subgraphStore.showAll') }}</a
>
</div>
<div class="pb-2 px-2 space-y-0.5 mt-0.5">
<div class="mt-0.5 space-y-0.5 px-2 pb-2">
<SubgraphNodeWidget
v-for="[node, widget] in filteredCandidates"
:key="toKey([node, widget])"

10
src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
View File

@@ -27,18 +27,18 @@ function getIcon() {
<div
:class="
cn(
'flex py-1 px-2 break-all rounded-sm items-center gap-1',
'flex items-center gap-1 rounded-sm px-2 py-1 break-all',
'bg-node-component-surface',
props.isDraggable && 'hover:ring-1 ring-accent-background',
props.isDraggable && 'ring-accent-background hover:ring-1',
props.class
)
"
>
<div class="pointer-events-none flex-1">
<div class="text-xs text-text-secondary line-clamp-1">
<div class="line-clamp-1 text-xs text-text-secondary">
{{ nodeTitle }}
</div>
<div class="text-sm/8 line-clamp-1">{{ widgetName }}</div>
<div class="line-clamp-1 text-sm/8">{{ widgetName }}</div>
</div>
<Button
variant="muted-textonly"
@@ -50,7 +50,7 @@ function getIcon() {
</Button>
<div
v-if="isDraggable"
class="size-4 pointer-events-none icon-[lucide--grip-vertical]"
class="pointer-events-none icon-[lucide--grip-vertical] size-4"
/>
</div>
</template>