Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-03-07 22:20:03 +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

2
eslint.config.ts
View File

@@ -127,7 +127,7 @@ export default defineConfig([
// Off: may conflict with oxfmt formatting
'better-tailwindcss/enforce-consistent-line-wrapping': 'off',
// Off: large batch change, enable and apply with `eslint --fix`
'better-tailwindcss/enforce-consistent-class-order': 'off',
'better-tailwindcss/enforce-consistent-class-order': 'error',
'better-tailwindcss/enforce-canonical-classes': 'error',
'better-tailwindcss/no-deprecated-classes': 'error'
}

16
src/components/LiteGraphCanvasSplitterOverlay.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="size-full absolute top-0 left-0 z-999 pointer-events-none flex flex-col"
class="pointer-events-none absolute top-0 left-0 z-999 flex size-full flex-col"
>
<slot name="workflow-tabs" />
@@ -17,7 +17,7 @@
<Splitter
:key="splitterRefreshKey"
class="bg-transparent pointer-events-none border-none flex-1 overflow-hidden"
class="pointer-events-none flex-1 overflow-hidden border-none bg-transparent"
:state-key="isSelectMode ? 'builder-splitter' : sidebarStateKey"
state-storage="local"
@resizestart="onResizestart"
@@ -30,10 +30,10 @@
:class="
sidebarLocation === 'left'
? cn(
'side-bar-panel bg-comfy-menu-bg pointer-events-auto',
'side-bar-panel pointer-events-auto bg-comfy-menu-bg',
sidebarPanelVisible && 'min-w-78'
)
: 'bg-comfy-menu-bg pointer-events-auto'
: 'pointer-events-auto bg-comfy-menu-bg'
"
:min-size="
sidebarLocation === 'left' ? SIDEBAR_MIN_SIZE : BUILDER_MIN_SIZE
@@ -60,7 +60,7 @@
<slot name="topmenu" :sidebar-panel-visible />
<Splitter
class="bg-transparent pointer-events-none border-none splitter-overlay-bottom mx-1 mb-1 flex-1"
class="splitter-overlay-bottom pointer-events-none mx-1 mb-1 flex-1 border-none bg-transparent"
layout="vertical"
:pt:gutter="
cn(
@@ -77,7 +77,7 @@
</SplitterPanel>
<SplitterPanel
v-show="bottomPanelVisible && !focusMode"
class="bottom-panel border border-(--p-panel-border-color) max-w-full overflow-x-auto bg-comfy-menu-bg pointer-events-auto rounded-lg"
class="bottom-panel pointer-events-auto max-w-full overflow-x-auto rounded-lg border border-(--p-panel-border-color) bg-comfy-menu-bg"
>
<slot name="bottom-panel" />
</SplitterPanel>
@@ -92,10 +92,10 @@
:class="
sidebarLocation === 'right'
? cn(
'side-bar-panel bg-comfy-menu-bg pointer-events-auto',
'side-bar-panel pointer-events-auto bg-comfy-menu-bg',
sidebarPanelVisible && 'min-w-78'
)
: 'bg-comfy-menu-bg pointer-events-auto'
: 'pointer-events-auto bg-comfy-menu-bg'
"
:min-size="
sidebarLocation === 'right' ? SIDEBAR_MIN_SIZE : BUILDER_MIN_SIZE

2
src/components/MenuHamburger.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
v-show="workspaceState.focusMode"
class="fixed z-9999 flex flex-row no-drag top-0 right-0"
class="no-drag fixed top-0 right-0 z-9999 flex flex-row"
>
<Button
v-tooltip="{ value: $t('menu.showMenu'), showDelay: 300 }"

2
src/components/TopMenuSection.vue
View File

@@ -38,7 +38,7 @@
ref="actionbarContainerRef"
:class="
cn(
'actionbar-container relative pointer-events-auto flex gap-2 h-12 items-center rounded-lg border bg-comfy-menu-bg px-2 shadow-interface',
'actionbar-container pointer-events-auto relative flex h-12 items-center gap-2 rounded-lg border bg-comfy-menu-bg px-2 shadow-interface',
hasAnyError
? 'border-destructive-background-hover'
: 'border-interface-stroke'

12
src/components/actionbar/ComfyActionbar.vue
View File

@@ -19,12 +19,12 @@
content: { class: isDocked ? 'p-0' : 'p-1' }
}"
>
<div class="relative flex items-center select-none gap-2">
<div class="relative flex items-center gap-2 select-none">
<span
ref="dragHandleRef"
:class="
cn(
'drag-handle cursor-grab w-3 h-max',
'drag-handle h-max w-3 cursor-grab',
isDragging && 'cursor-grabbing'
)
"
@@ -423,18 +423,18 @@ const actionbarClass = computed(() =>
cn(
'w-[200px] border-dashed border-blue-500 opacity-80',
'm-1.5 flex items-center justify-center self-stretch',
'rounded-md before:w-50 before:-ml-50 before:h-full',
'rounded-md before:-ml-50 before:h-full before:w-50',
'pointer-events-auto',
isMouseOverDropZone.value &&
'border-[3px] opacity-100 scale-105 shadow-[0_0_20px] shadow-blue-500'
'scale-105 border-[3px] opacity-100 shadow-[0_0_20px] shadow-blue-500'
)
)
const panelClass = computed(() =>
cn(
'actionbar pointer-events-auto z-1300',
isDragging.value && 'select-none pointer-events-none',
isDragging.value && 'pointer-events-none select-none',
isDocked.value
? 'p-0 static border-none bg-transparent'
? 'static border-none bg-transparent p-0'
: 'fixed shadow-interface'
)
)

6
src/components/appMode/AppModeToolbar.vue
View File

@@ -42,7 +42,7 @@ function openTemplates() {
</script>
<template>
<div class="flex flex-col gap-2 pointer-events-auto">
<div class="pointer-events-auto flex flex-col gap-2">
<WorkflowActionsDropdown source="app_mode_toolbar">
<template #button="{ hasUnseenItems }">
<Button
@@ -53,7 +53,7 @@ function openTemplates() {
variant="secondary"
size="unset"
:aria-label="t('sideToolbar.labels.menu')"
class="relative h-10 rounded-lg pl-3 pr-2 gap-1 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
class="relative h-10 gap-1 rounded-lg pr-2 pl-3 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
>
<i class="icon-[lucide--panels-top-left] size-4" />
<i class="icon-[lucide--chevron-down] size-4 text-muted-foreground" />
@@ -83,7 +83,7 @@ function openTemplates() {
</Button>
<div
class="flex flex-col w-10 rounded-lg bg-secondary-background overflow-hidden"
class="flex w-10 flex-col overflow-hidden rounded-lg bg-secondary-background"
>
<Button
v-tooltip.right="{

2
src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
View File

@@ -12,7 +12,7 @@
size="sm"
:class="
cn('absolute top-2 right-8 transition-opacity', {
'opacity-0 pointer-events-none select-none': !isHovered
'pointer-events-none opacity-0 select-none': !isHovered
})
"
:aria-label="tooltipText"

4
src/components/breadcrumb/SubgraphBreadcrumb.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
data-testid="subgraph-breadcrumb"
class="subgraph-breadcrumb flex w-auto drop-shadow-(--interface-panel-drop-shadow) items-center -mt-4 pt-4"
class="subgraph-breadcrumb -mt-4 flex w-auto items-center pt-4 drop-shadow-(--interface-panel-drop-shadow)"
:class="{
'subgraph-breadcrumb-collapse': collapseTabs,
'subgraph-breadcrumb-overflow': overflowingTabs
@@ -17,7 +17,7 @@
<WorkflowActionsDropdown source="breadcrumb_subgraph_menu_selected" />
<Button
v-if="isInSubgraph"
class="back-button pointer-events-auto size-8 shrink-0 border border-transparent bg-transparent p-0 ml-1.5 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg"
class="back-button pointer-events-auto ml-1.5 size-8 shrink-0 border border-transparent bg-transparent p-0 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg"
text
severity="secondary"
size="small"

30
src/components/builder/AppBuilder.vue
View File

@@ -204,7 +204,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
)
</script>
<template>
<div class="flex font-bold p-2 border-border-subtle border-b items-center">
<div class="flex items-center border-b border-border-subtle p-2 font-bold">
{{
isArrangeMode ? t('nodeHelpPage.inputs') : t('linearMode.builder.title')
}}
@@ -217,7 +217,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
<div
v-for="{ nodeId, widgetName, node, widget } in arrangeInputs"
:key="`${nodeId}: ${widgetName}`"
:class="cn(dragClass, 'p-2 my-2 pointer-events-auto')"
:class="cn(dragClass, 'pointer-events-auto my-2 p-2')"
:aria-label="`${widget?.label ?? widgetName} — ${node.title}`"
>
<div v-if="widget" class="pointer-events-none" inert>
@@ -228,7 +228,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
hidden-widget-actions
/>
</div>
<div v-else class="text-muted-foreground text-sm p-1 pointer-events-none">
<div v-else class="pointer-events-none p-1 text-sm text-muted-foreground">
{{ widgetName }}
<p class="text-xs italic">
({{ t('linearMode.builder.unknownWidget') }})
@@ -241,14 +241,14 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
:label="t('nodeHelpPage.inputs')"
enable-empty-state
:disabled="!appModeStore.selectedInputs.length"
class="border-border-subtle border-b"
class="border-b border-border-subtle"
:tooltip="`${t('linearMode.builder.inputsDesc')}\n${t('linearMode.builder.inputsExample')}`"
:tooltip-delay="100"
>
<template #label>
<div class="flex gap-3">
{{ t('nodeHelpPage.inputs') }}
<i class="bg-muted-foreground icon-[lucide--circle-alert]" />
<i class="icon-[lucide--circle-alert] bg-muted-foreground" />
</div>
</template>
<template #empty>
@@ -271,7 +271,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
rename
} in inputsWithState"
:key="`${nodeId}: ${widgetName}`"
:class="cn(dragClass, 'bg-primary-background/30 p-2 my-2 rounded-lg')"
:class="cn(dragClass, 'my-2 rounded-lg bg-primary-background/30 p-2')"
:title="label ?? widgetName"
:sub-title="subLabel"
:rename
@@ -296,7 +296,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
<template #label>
<div class="flex gap-3">
{{ t('nodeHelpPage.outputs') }}
<i class="bg-muted-foreground icon-[lucide--circle-alert]" />
<i class="icon-[lucide--circle-alert] bg-muted-foreground" />
</div>
</template>
<template #empty>
@@ -319,8 +319,8 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
:class="
cn(
dragClass,
'bg-warning-background/40 p-2 my-2 rounded-lg',
index === 0 && 'ring-warning-background ring-2'
'my-2 rounded-lg bg-warning-background/40 p-2',
index === 0 && 'ring-2 ring-warning-background'
)
"
:title
@@ -337,7 +337,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
<div
:class="
cn(
'absolute size-full pointer-events-auto',
'pointer-events-auto absolute size-full',
hoveringSelectable ? 'cursor-pointer' : 'cursor-grab'
)
"
@@ -352,7 +352,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
v-for="[key, style] in renderedInputs"
:key
:style="toValue(style)"
class="fixed bg-primary-background/30 rounded-lg"
class="fixed rounded-lg bg-primary-background/30"
/>
</template>
<template v-else>
@@ -362,7 +362,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
:style="toValue(style)"
:class="
cn(
'fixed ring-warning-background ring-5 rounded-2xl',
'fixed rounded-2xl ring-5 ring-warning-background',
!isSelected && 'ring-warning-background/50'
)
"
@@ -370,17 +370,17 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
<div class="absolute top-0 right-0 size-8">
<div
v-if="isSelected"
class="absolute -top-1/2 -right-1/2 size-full p-2 bg-warning-background rounded-lg cursor-pointer pointer-events-auto"
class="pointer-events-auto absolute -top-1/2 -right-1/2 size-full cursor-pointer rounded-lg bg-warning-background p-2"
@click.stop="
remove(appModeStore.selectedOutputs, (k) => k == key)
"
@pointerdown.stop
>
<i class="icon-[lucide--check] bg-text-foreground size-full" />
<i class="bg-text-foreground icon-[lucide--check] size-full" />
</div>
<div
v-else
class="absolute -top-1/2 -right-1/2 size-full ring-warning-background/50 ring-4 ring-inset bg-component-node-background rounded-lg cursor-pointer pointer-events-auto"
class="pointer-events-auto absolute -top-1/2 -right-1/2 size-full cursor-pointer rounded-lg bg-component-node-background ring-4 ring-warning-background/50 ring-inset"
@click.stop="appModeStore.selectedOutputs.push(key)"
@pointerdown.stop
/>

8
src/components/builder/BuilderMenu.vue
View File

@@ -4,7 +4,7 @@
<button
:class="
cn(
'absolute left-4 top-[calc(var(--workflow-tabs-height)+16px)] z-1000 inline-flex h-10 cursor-pointer items-center gap-2.5 rounded-lg py-2 pr-2 pl-3 shadow-interface transition-colors border-none',
'absolute top-[calc(var(--workflow-tabs-height)+16px)] left-4 z-1000 inline-flex h-10 cursor-pointer items-center gap-2.5 rounded-lg border-none py-2 pr-2 pl-3 shadow-interface transition-colors',
'bg-secondary-background hover:bg-secondary-background-hover',
'data-[state=open]:bg-secondary-background-hover'
)
@@ -22,10 +22,10 @@
<button
:class="
cn(
'flex w-full items-center gap-3 rounded-md bg-transparent px-3 py-2 text-sm border-none',
'flex w-full items-center gap-3 rounded-md border-none bg-transparent px-3 py-2 text-sm',
hasOutputs
? 'cursor-pointer hover:bg-secondary-background-hover'
: 'opacity-50 pointer-events-none'
: 'pointer-events-none opacity-50'
)
"
:disabled="!hasOutputs"
@@ -36,7 +36,7 @@
</button>
<div class="my-1 border-t border-border-default" />
<button
class="flex w-full cursor-pointer items-center gap-3 rounded-md bg-transparent px-3 py-2 text-sm border-none hover:bg-secondary-background-hover"
class="flex w-full cursor-pointer items-center gap-3 rounded-md border-none bg-transparent px-3 py-2 text-sm hover:bg-secondary-background-hover"
@click="onExitBuilder(close)"
>
<i class="icon-[lucide--square-pen] size-4" />

6
src/components/builder/BuilderToolbar.vue
View File

@@ -13,7 +13,7 @@
stepClasses,
activeStep === step.id
? 'bg-interface-builder-mode-background'
: 'hover:bg-secondary-background bg-transparent'
: 'bg-transparent hover:bg-secondary-background'
)
"
:aria-current="activeStep === step.id ? 'step' : undefined"
@@ -32,7 +32,7 @@
:is-select-active="isSelectStep"
@switch="navigateToStep('builder:outputs')"
>
<button :class="cn(stepClasses, 'opacity-30 bg-transparent')">
<button :class="cn(stepClasses, 'bg-transparent opacity-30')">
<StepBadge
:step="defaultViewStep"
:index="steps.length"
@@ -48,7 +48,7 @@
stepClasses,
activeStep === 'setDefaultView'
? 'bg-interface-builder-mode-background'
: 'hover:bg-secondary-background bg-transparent'
: 'bg-transparent hover:bg-secondary-background'
)
"
@click="navigateToStep('setDefaultView')"

2
src/components/builder/ConnectOutputPopover.vue
View File

@@ -7,7 +7,7 @@
side="bottom"
:side-offset="8"
:collision-padding="10"
class="z-1001 w-80 rounded-xl border border-border-default bg-base-background shadow-interface will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade"
class="data-[state=open]:data-[side=bottom]:animate-slideUpAndFade z-1001 w-80 rounded-xl border border-border-default bg-base-background shadow-interface will-change-[transform,opacity]"
>
<div class="flex h-12 items-center justify-between px-4">
<h3 class="text-sm font-medium text-base-foreground">

6
src/components/builder/IoItem.vue
View File

@@ -32,13 +32,13 @@ const entries = computed(() => {
})
</script>
<template>
<div class="p-2 my-2 rounded-lg flex items-center-safe gap-2">
<div class="my-2 flex items-center-safe gap-2 rounded-lg p-2">
<div
class="mr-auto flex-[4_1_0%] max-w-max min-w-0 truncate drag-handle inline"
class="drag-handle mr-auto inline max-w-max min-w-0 flex-[4_1_0%] truncate"
v-text="title"
/>
<div
class="flex-[2_1_0%] max-w-max min-w-0 truncate text-muted-foreground text-end drag-handle inline"
class="drag-handle inline max-w-max min-w-0 flex-[2_1_0%] truncate text-end text-muted-foreground"
v-text="subTitle"
/>
<Popover :entries>

2
src/components/builder/StepLabel.vue
View File

@@ -4,7 +4,7 @@
{{ step.title }}
</span>
<span
class="hidden whitespace-nowrap text-xs text-muted-foreground sm:inline"
class="hidden text-xs whitespace-nowrap text-muted-foreground sm:inline"
>
{{ step.subtitle }}
</span>

2
src/components/button/IconGroup.vue
View File

@@ -2,7 +2,7 @@
<div
:class="
cn(
'flex justify-center items-center shrink-0 outline-hidden border-none p-0 rounded-lg shadow-sm transition-all duration-200 cursor-pointer bg-secondary-background',
'flex shrink-0 cursor-pointer items-center justify-center rounded-lg border-none bg-secondary-background p-0 shadow-sm outline-hidden transition-all duration-200',
backgroundClass
)
"

2
src/components/card/CardBottom.vue
View File

@@ -14,6 +14,6 @@ const { fullHeight = true } = defineProps<{
}>()
const containerClasses = computed(() =>
cn('flex-1 w-full', fullHeight && 'h-full')
cn('w-full flex-1', fullHeight && 'h-full')
)
</script>

2
src/components/card/CardContainer.vue
View File

@@ -59,7 +59,7 @@ const containerClasses = computed(() => {
outline: cn(
hasBorder && 'border-2 border-border-subtle',
hasCursor && 'cursor-pointer',
'hover:border-border-subtle/50 transition-colors'
'transition-colors hover:border-border-subtle/50'
)
}

4
src/components/chip/SquareChip.vue
View File

@@ -19,9 +19,9 @@ const baseClasses =
const variantStyles = {
dark: 'bg-zinc-500/40 text-white/90',
light: cn('backdrop-blur-[2px] bg-base-background/50 text-base-foreground'),
light: cn('bg-base-background/50 text-base-foreground backdrop-blur-[2px]'),
gray: cn(
'backdrop-blur-[2px] bg-modal-card-tag-background text-base-foreground'
'bg-modal-card-tag-background text-base-foreground backdrop-blur-[2px]'
)
}

2
src/components/common/DraggableList.vue
View File

@@ -51,7 +51,7 @@ onBeforeUnmount(() => {
})
</script>
<template>
<div ref="draggableItems" class="pb-2 px-2 space-y-0.5 mt-0.5">
<div ref="draggableItems" class="mt-0.5 space-y-0.5 px-2 pb-2">
<slot
drag-class="draggable-item drag-handle cursor-grab [&.is-draggable]:cursor-grabbing"
/>

4
src/components/common/DropdownItem.vue
View File

@@ -22,7 +22,7 @@ defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
<template>
<DropdownMenuSeparator
v-if="item.separator"
class="h-px bg-border-subtle m-1"
class="m-1 h-px bg-border-subtle"
/>
<DropdownMenuSub v-else-if="item.items">
<DropdownMenuSubTrigger
@@ -58,7 +58,7 @@ defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
{{ item.label }}
<div
v-if="item.new"
class="ml-auto bg-primary-background rounded-full text-xxs font-bold px-1 flex leading-none items-center"
class="ml-auto flex items-center rounded-full bg-primary-background px-1 text-xxs leading-none font-bold"
v-text="t('contextMenu.new')"
/>
</DropdownMenuItem>

4
src/components/common/DropdownMenu.vue
View File

@@ -27,14 +27,14 @@ const { itemClass: itemProp, contentClass: contentProp } = defineProps<{
const itemClass = computed(() =>
cn(
'data-highlighted:bg-secondary-background-hover data-disabled:pointer-events-none data-disabled:text-muted-foreground flex p-2 leading-none rounded-lg gap-1 cursor-pointer m-1',
'm-1 flex cursor-pointer gap-1 rounded-lg p-2 leading-none data-disabled:pointer-events-none data-disabled:text-muted-foreground data-highlighted:bg-secondary-background-hover',
itemProp
)
)
const contentClass = computed(() =>
cn(
'z-1700 rounded-lg p-2 bg-base-background border border-border-subtle min-w-[220px] shadow-sm will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade',
'data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade z-1700 min-w-[220px] rounded-lg border border-border-subtle bg-base-background p-2 shadow-sm will-change-[opacity,transform]',
contentProp
)
)

4
src/components/common/MarqueeLine.vue
View File

@@ -1,9 +1,9 @@
<template>
<div
class="overflow-hidden @container mask-[linear-gradient(to_right,black_70%,transparent)] motion-safe:group-hover:mask-none"
class="@container overflow-hidden mask-[linear-gradient(to_right,black_70%,transparent)] motion-safe:group-hover:mask-none"
>
<span
class="whitespace-nowrap inline-block min-w-full text-center [--_marquee-end:min(calc(-100%+100cqw),0px)] motion-safe:group-hover:animate-[marquee-scroll_3s_linear_infinite_alternate]"
class="inline-block min-w-full text-center whitespace-nowrap [--_marquee-end:min(calc(-100%+100cqw),0px)] motion-safe:group-hover:animate-[marquee-scroll_3s_linear_infinite_alternate]"
>
<slot />
</span>

4
src/components/common/OverlayIcon.vue
View File

@@ -1,11 +1,11 @@
<template>
<span class="relative inline-flex items-center justify-center size-[1em]">
<span class="relative inline-flex size-[1em] items-center justify-center">
<i :class="mainIcon" class="text-[1em]" />
<i
:class="
cn(
subIcon,
'absolute leading-none pointer-events-none',
'pointer-events-none absolute leading-none',
positionX === 'left' ? 'left-0' : 'right-0',
positionY === 'top' ? 'top-0' : 'bottom-0'
)

8
src/components/common/ScrubableNumberInput.vue
View File

@@ -8,7 +8,7 @@
v-if="!hideButtons"
:aria-label="t('g.decrement')"
data-testid="decrement"
class="h-full aspect-8/7 rounded-r-none hover:bg-base-foreground/20 disabled:opacity-30"
class="aspect-8/7 h-full rounded-r-none hover:bg-base-foreground/20 disabled:opacity-30"
variant="muted-textonly"
:disabled="!canDecrement"
tabindex="-1"
@@ -16,7 +16,7 @@
>
<i class="pi pi-minus" />
</Button>
<div class="relative min-w-[4ch] flex-1 py-1.5 my-0.25">
<div class="relative my-0.25 min-w-[4ch] flex-1 py-1.5">
<input
ref="inputField"
v-bind="inputAttrs"
@@ -24,7 +24,7 @@
:disabled
:class="
cn(
'bg-transparent border-0 focus:outline-0 p-1 truncate text-sm absolute inset-0'
'absolute inset-0 truncate border-0 bg-transparent p-1 text-sm focus:outline-0'
)
"
inputmode="decimal"
@@ -53,7 +53,7 @@
v-if="!hideButtons"
:aria-label="t('g.increment')"
data-testid="increment"
class="h-full aspect-8/7 rounded-l-none hover:bg-base-foreground/20 disabled:opacity-30"
class="aspect-8/7 h-full rounded-l-none hover:bg-base-foreground/20 disabled:opacity-30"
variant="muted-textonly"
:disabled="!canIncrement"
tabindex="-1"

8
src/components/common/SearchBox.vue
View File

@@ -2,7 +2,7 @@
<div
:class="
cn(
'relative flex w-full items-center gap-2 bg-comfy-input cursor-text text-comfy-input-foreground',
'relative flex w-full cursor-text items-center gap-2 bg-comfy-input text-comfy-input-foreground',
customClass,
wrapperStyle
)
@@ -16,7 +16,7 @@
unstyled
:class="
cn(
'absolute inset-0 size-full border-none outline-none bg-transparent text-sm',
'absolute inset-0 size-full border-none bg-transparent text-sm outline-none',
isLarge ? 'pl-11' : 'pl-8'
)
"
@@ -26,7 +26,7 @@
v-if="filterIcon"
size="icon"
variant="textonly"
class="filter-button absolute right-0 inset-y-0 m-0 p-0"
class="filter-button absolute inset-y-0 right-0 m-0 p-0"
@click="$emit('showFilter', $event)"
>
<i :class="filterIcon" />
@@ -117,7 +117,7 @@ watchDebounced(
const wrapperStyle = computed(() => {
if (showBorder) {
return cn(
'rounded-sm p-2 border border-solid border-border-default box-border',
'box-border rounded-sm border border-solid border-border-default p-2',
isLarge.value ? 'h-10' : 'h-8'
)
}

6
src/components/common/SearchBoxV2.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex flex-col gap-2 flex-auto">
<div class="flex flex-auto flex-col gap-2">
<ComboboxRoot :ignore-filter="true" :open="false">
<ComboboxAnchor
:class="
@@ -7,7 +7,7 @@
'relative flex w-full cursor-text items-center',
'rounded-lg bg-comfy-input text-comfy-input-foreground',
showBorder &&
'border border-solid border-border-default box-border',
'box-border border border-solid border-border-default',
sizeClasses,
className
)
@@ -15,7 +15,7 @@
>
<i
v-if="!searchTerm"
:class="cn('absolute left-4 pointer-events-none', icon, iconClass)"
:class="cn('pointer-events-none absolute left-4', icon, iconClass)"
/>
<Button
v-else

4
src/components/common/TextTickerMultiLine.vue
View File

@@ -3,7 +3,7 @@
<!-- Hidden single-line measurement element for overflow detection -->
<div
ref="measureRef"
class="invisible absolute inset-x-0 top-0 overflow-hidden whitespace-nowrap pointer-events-none"
class="pointer-events-none invisible absolute inset-x-0 top-0 overflow-hidden whitespace-nowrap"
aria-hidden="true"
>
<slot />
@@ -13,7 +13,7 @@
<slot />
</MarqueeLine>
<div v-else class="flex flex-col w-full">
<div v-else class="flex w-full flex-col">
<MarqueeLine>{{ firstLine }}</MarqueeLine>
<MarqueeLine>{{ secondLine }}</MarqueeLine>
</div>

2
src/components/common/TreeExplorer.vue
View File

@@ -3,7 +3,7 @@
v-bind="$attrs"
v-model:expanded-keys="expandedKeys"
v-model:selection-keys="selectionKeys"
class="tree-explorer px-2 py-0 2xl:px-4 bg-transparent"
class="tree-explorer bg-transparent px-2 py-0 2xl:px-4"
:class="props.class"
:value="renderedRoot.children"
selection-mode="single"

2
src/components/common/TreeExplorerTreeNode.vue
View File

@@ -29,7 +29,7 @@
/>
</div>
<div
class="node-actions flex gap-1 touch:opacity-100 motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100"
class="node-actions flex gap-1 motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100 touch:opacity-100"
>
<slot name="actions" :node="props.node" />
</div>

2
src/components/common/TreeExplorerV2.vue
View File

@@ -42,7 +42,7 @@
class="z-9999 min-w-32 overflow-hidden rounded-md border border-border-default bg-comfy-menu-bg p-1 shadow-md"
>
<ContextMenuItem
class="flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-highlight focus:bg-highlight"
class="flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none hover:bg-highlight focus:bg-highlight"
@select="handleAddToFavorites"
>
<i

6
src/components/common/TreeExplorerV2Node.vue
View File

@@ -19,7 +19,7 @@
@dragend="handleDragEnd"
>
<i class="icon-[comfy--node] size-4 shrink-0 text-muted-foreground" />
<span class="min-w-0 flex-1 truncate text-sm text-foreground">
<span class="text-foreground min-w-0 flex-1 truncate text-sm">
<slot name="node" :node="item.value">
{{ item.value.label }}
</slot>
@@ -27,7 +27,7 @@
<button
:class="
cn(
'flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm border-none bg-transparent text-muted-foreground hover:text-foreground',
'hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm border-none bg-transparent text-muted-foreground',
'opacity-0 group-hover/tree-node:opacity-100'
)
"
@@ -64,7 +64,7 @@
<i
:class="cn(item.value.icon, 'size-4 shrink-0 text-muted-foreground')"
/>
<span class="min-w-0 flex-1 truncate text-sm text-foreground">
<span class="text-foreground min-w-0 flex-1 truncate text-sm">
<slot name="folder" :node="item.value">
{{ item.value.label }}
</slot>

2
src/components/common/VirtualGrid.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
ref="container"
class="h-full overflow-y-auto [overflow-anchor:none] [scrollbar-gutter:stable] scrollbar-thin scrollbar-track-transparent scrollbar-thumb-(--dialog-surface)"
class="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-(--dialog-surface) h-full overflow-y-auto [overflow-anchor:none] [scrollbar-gutter:stable]"
>
<div :style="topSpacerStyle" />
<div :style="mergedGridStyle">

4
src/components/common/WorkflowActionsDropdown.vue
View File

@@ -55,7 +55,7 @@ function handleOpen(open: boolean) {
variant="secondary"
size="unset"
:aria-label="t('breadcrumbsMenu.workflowActions')"
class="relative h-10 rounded-lg pl-3 pr-2 pointer-events-auto gap-1 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
class="pointer-events-auto relative h-10 gap-1 rounded-lg pr-2 pl-3 data-[state=open]:bg-secondary-background-hover data-[state=open]:shadow-interface"
>
<i
class="size-4"
@@ -79,7 +79,7 @@ function handleOpen(open: boolean) {
:align
:side-offset="5"
:collision-padding="10"
class="z-1000 rounded-lg px-2 py-3 min-w-56 bg-base-background shadow-interface border border-border-subtle"
class="z-1000 min-w-56 rounded-lg border border-border-subtle bg-base-background px-2 py-3 shadow-interface"
>
<WorkflowActionsList :items="menuItems" />
</DropdownMenuContent>

8
src/components/common/WorkflowActionsList.vue
View File

@@ -22,7 +22,7 @@ const {
<component
:is="separatorComponent"
v-if="item.separator"
class="border-b w-full border-border-subtle my-1"
class="my-1 w-full border-b border-border-subtle"
/>
<component
:is="itemComponent"
@@ -30,11 +30,11 @@ const {
:disabled="item.disabled"
:class="
cn(
'flex min-h-6 p-2 items-center gap-2 self-stretch rounded-sm outline-none',
'flex min-h-6 items-center gap-2 self-stretch rounded-sm p-2 outline-none',
!item.disabled && item.command && 'cursor-pointer',
'data-highlighted:bg-secondary-background-hover',
!item.disabled && 'hover:bg-secondary-background-hover',
'data-disabled:opacity-50 data-disabled:cursor-default'
'data-disabled:cursor-default data-disabled:opacity-50'
)
"
@select="() => item.command?.()"
@@ -44,7 +44,7 @@ const {
<span class="flex-1">{{ item.label }}</span>
<span
v-if="item.badge"
class="rounded-full uppercase ml-3 flex items-center gap-1 bg-(--primary-background) px-1.5 py-0.5 text-xxs text-base-foreground"
class="ml-3 flex items-center gap-1 rounded-full bg-(--primary-background) px-1.5 py-0.5 text-xxs text-base-foreground uppercase"
>
{{ item.badge }}
</span>

2
src/components/dialog/confirm/ConfirmBody.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="flex flex-col wrap-break-word px-4 py-2 text-sm text-muted-foreground border-t border-border-default"
class="flex flex-col border-t border-border-default px-4 py-2 text-sm wrap-break-word text-muted-foreground"
>
<p v-if="promptTextReal">
{{ promptTextReal }}

2
src/components/dialog/confirm/ConfirmFooter.vue
View File

@@ -1,5 +1,5 @@
<template>
<section class="w-full flex flex-wrap gap-2 justify-end px-2 pb-2">
<section class="flex w-full flex-wrap justify-end gap-2 px-2 pb-2">
<Button :disabled variant="textonly" autofocus @click="$emit('cancel')">
{{ cancelTextX }}
</Button>

2
src/components/dialog/confirm/ConfirmHeader.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="flex items-center gap-2 p-4 font-bold text-sm text-base-foreground font-inter"
class="flex items-center gap-2 p-4 font-inter text-sm font-bold text-base-foreground"
>
<span v-if="title" class="flex-auto">{{ title }}</span>
</div>

6
src/components/dialog/content/ConfirmationDialogContent.vue
View File

@@ -1,6 +1,6 @@
<template>
<section
class="m-2 mt-4 flex flex-col gap-6 whitespace-pre-wrap wrap-break-word"
class="m-2 mt-4 flex flex-col gap-6 wrap-break-word whitespace-pre-wrap"
>
<div>
<span>{{ message }}</span>
@@ -40,12 +40,12 @@
v-if="doNotAskAgain"
keypath="missingModelsDialog.reEnableInSettings"
tag="span"
class="text-sm text-muted-foreground ml-8"
class="ml-8 text-sm text-muted-foreground"
>
<template #link>
<Button
variant="textonly"
class="underline cursor-pointer p-0 text-sm text-muted-foreground hover:bg-transparent"
class="cursor-pointer p-0 text-sm text-muted-foreground underline hover:bg-transparent"
@click="openBlueprintOverwriteSetting"
>
{{ t('missingModelsDialog.reEnableInSettingsLink') }}

10
src/components/dialog/content/MissingModelsContent.vue
View File

@@ -8,7 +8,7 @@
</p>
<div
class="flex max-h-[300px] flex-col overflow-y-auto rounded-lg bg-secondary-background scrollbar-custom"
class="flex scrollbar-custom max-h-[300px] flex-col overflow-y-auto rounded-lg bg-secondary-background"
>
<div
v-for="model in processedModels"
@@ -17,13 +17,13 @@
>
<div class="flex items-center gap-2 overflow-hidden">
<span
class="min-w-0 truncate text-sm text-foreground"
class="text-foreground min-w-0 truncate text-sm"
:title="model.name"
>
{{ model.name }}
</span>
<span
class="inline-flex h-4 shrink-0 items-center rounded-full bg-muted-foreground/20 px-1.5 text-xxxs font-semibold uppercase text-muted-foreground"
class="inline-flex h-4 shrink-0 items-center rounded-full bg-muted-foreground/20 px-1.5 text-xxxs font-semibold text-muted-foreground uppercase"
>
{{ model.badgeLabel }}
</span>
@@ -81,7 +81,7 @@
</div>
</div>
<p class="m-0 text-xs/5 text-muted-foreground whitespace-pre-line">
<p class="m-0 text-xs/5 whitespace-pre-line text-muted-foreground">
{{ $t('missingModelsDialog.footerDescription') }}
</p>
@@ -90,7 +90,7 @@
class="flex gap-3 rounded-lg border border-warning-background bg-warning-background/10 p-3"
>
<i
class="icon-[lucide--triangle-alert] mt-0.5 size-4 shrink-0 text-warning-background"
class="mt-0.5 icon-[lucide--triangle-alert] size-4 shrink-0 text-warning-background"
/>
<div class="flex flex-col gap-1">
<p class="m-0 text-xs/5 font-semibold text-warning-background">

36
src/components/dialog/content/MissingNodesContent.vue
View File

@@ -23,7 +23,7 @@
<!-- Section header with Replace button -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-xs font-semibold uppercase text-primary">
<span class="text-xs font-semibold text-primary uppercase">
{{ $t('nodeReplacement.quickFixAvailable') }}
</span>
<div class="size-2 rounded-full bg-primary" />
@@ -35,7 +35,7 @@
:disabled="selectedTypes.size === 0"
@click="handleReplaceSelected"
>
<i class="icon-[lucide--refresh-cw] mr-1.5 size-4" />
<i class="mr-1.5 icon-[lucide--refresh-cw] size-4" />
{{
$t('nodeReplacement.replaceSelected', {
count: selectedTypes.size
@@ -46,7 +46,7 @@
<!-- Replaceable nodes list -->
<div
class="flex max-h-[200px] flex-col overflow-y-auto rounded-lg bg-secondary-background scrollbar-custom"
class="flex scrollbar-custom max-h-[200px] flex-col overflow-y-auto rounded-lg bg-secondary-background"
>
<!-- Select All row (sticky header) -->
<div
@@ -55,7 +55,7 @@
'sticky top-0 z-10 flex items-center gap-3 border-b border-border-default bg-secondary-background px-3 py-2',
pendingNodes.length > 0
? 'cursor-pointer hover:bg-secondary-background-hover'
: 'opacity-50 pointer-events-none'
: 'pointer-events-none opacity-50'
)
"
tabindex="0"
@@ -77,14 +77,14 @@
>
<i
v-if="isAllSelected"
class="icon-[lucide--check] text-bold text-xs text-base-foreground"
class="text-bold icon-[lucide--check] text-xs text-base-foreground"
/>
<i
v-else-if="isSomeSelected"
class="icon-[lucide--minus] text-bold text-xs text-base-foreground"
class="text-bold icon-[lucide--minus] text-xs text-base-foreground"
/>
</div>
<span class="text-xs font-medium uppercase text-muted-foreground">
<span class="text-xs font-medium text-muted-foreground uppercase">
{{ $t('nodeReplacement.compatibleAlternatives') }}
</span>
</div>
@@ -97,7 +97,7 @@
cn(
'flex items-center gap-3 px-3 py-2',
replacedTypes.has(node.label)
? 'opacity-50 pointer-events-none'
? 'pointer-events-none opacity-50'
: 'cursor-pointer hover:bg-secondary-background-hover'
)
"
@@ -124,24 +124,24 @@
v-if="
replacedTypes.has(node.label) || selectedTypes.has(node.label)
"
class="icon-[lucide--check] text-bold text-xs text-base-foreground"
class="text-bold icon-[lucide--check] text-xs text-base-foreground"
/>
</div>
<div class="flex flex-col gap-0.5">
<div class="flex items-center gap-2">
<span
v-if="replacedTypes.has(node.label)"
class="inline-flex h-4 items-center rounded-full border border-success bg-success/10 px-1.5 text-xxxs font-semibold uppercase text-success"
class="border-success bg-success/10 text-success inline-flex h-4 items-center rounded-full border px-1.5 text-xxxs font-semibold uppercase"
>
{{ $t('nodeReplacement.replaced') }}
</span>
<span
v-else
class="inline-flex h-4 items-center rounded-full border border-primary bg-primary/10 px-1.5 text-xxxs font-semibold uppercase text-primary"
class="inline-flex h-4 items-center rounded-full border border-primary bg-primary/10 px-1.5 text-xxxs font-semibold text-primary uppercase"
>
{{ $t('nodeReplacement.replaceable') }}
</span>
<span class="text-sm text-foreground">
<span class="text-foreground text-sm">
{{ node.label }}
</span>
</div>
@@ -160,7 +160,7 @@
>
<!-- Section header -->
<div class="flex items-center gap-2">
<span class="text-xs font-semibold uppercase text-error">
<span class="text-xs font-semibold text-error uppercase">
{{ $t('nodeReplacement.installationRequired') }}
</span>
<i class="icon-[lucide--info] text-xs text-error" />
@@ -168,7 +168,7 @@
<!-- Non-replaceable nodes list -->
<div
class="flex flex-col overflow-y-auto rounded-lg bg-secondary-background scrollbar-custom"
class="flex scrollbar-custom flex-col overflow-y-auto rounded-lg bg-secondary-background"
>
<div
v-for="node in nonReplaceableNodes"
@@ -179,11 +179,11 @@
<div class="flex flex-col gap-0.5">
<div class="flex items-center gap-2">
<span
class="inline-flex h-4 items-center rounded-full border border-error bg-error/10 px-1.5 text-xxxs font-semibold uppercase text-error"
class="inline-flex h-4 items-center rounded-full border border-error bg-error/10 px-1.5 text-xxxs font-semibold text-error uppercase"
>
{{ $t('nodeReplacement.notReplaceable') }}
</span>
<span class="text-sm text-foreground">
<span class="text-foreground text-sm">
{{ node.label }}
</span>
</div>
@@ -209,9 +209,9 @@
class="flex gap-3 rounded-lg border border-warning-background bg-warning-background/10 p-3"
>
<i
class="icon-[lucide--triangle-alert] mt-0.5 size-4 shrink-0 text-warning-background"
class="mt-0.5 icon-[lucide--triangle-alert] size-4 shrink-0 text-warning-background"
/>
<p class="m-0 text-xs/5 text-neutral-foreground">
<p class="text-neutral-foreground m-0 text-xs/5">
<i18n-t keypath="nodeReplacement.instructionMessage">
<template #red>
<span class="text-error">{{

6
src/components/dialog/content/MissingNodesFooter.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="flex w-full flex-col gap-2 py-2 px-4">
<div class="flex w-full flex-col gap-2 px-4 py-2">
<div class="flex flex-col gap-1 text-sm text-muted-foreground">
<div class="flex items-center gap-1">
<input
@@ -16,12 +16,12 @@
v-if="doNotAskAgain"
keypath="missingModelsDialog.reEnableInSettings"
tag="span"
class="text-sm text-muted-foreground ml-6"
class="ml-6 text-sm text-muted-foreground"
>
<template #link>
<Button
variant="textonly"
class="underline cursor-pointer p-0 text-sm text-muted-foreground hover:bg-transparent"
class="cursor-pointer p-0 text-sm text-muted-foreground underline hover:bg-transparent"
@click="openShowMissingNodesSetting"
>
{{ $t('missingModelsDialog.reEnableInSettingsLink') }}

16
src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue
View File

@@ -3,8 +3,8 @@
class="flex min-w-[460px] flex-col rounded-2xl border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
>
<!-- Header -->
<div class="flex p-8 items-center justify-between">
<h2 class="text-lg font-bold text-base-foreground m-0">
<div class="flex items-center justify-between p-8">
<h2 class="m-0 text-lg font-bold text-base-foreground">
{{
isInsufficientCredits
? $t('credits.topUp.addMoreCreditsToRun')
@@ -12,7 +12,7 @@
}}
</h2>
<button
class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
class="focus-visible:ring-secondary-foreground cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none"
@click="() => handleClose()"
>
<i class="icon-[lucide--x] size-6" />
@@ -20,7 +20,7 @@
</div>
<p
v-if="isInsufficientCredits"
class="text-sm text-muted-foreground m-0 px-8"
class="m-0 px-8 text-sm text-muted-foreground"
>
{{ $t('credits.topUp.insufficientWorkflowMessage') }}
</p>
@@ -39,7 +39,7 @@
size="lg"
:class="
cn(
'h-10 text-base font-medium w-full focus-visible:ring-secondary-foreground',
'focus-visible:ring-secondary-foreground h-10 w-full text-base font-medium',
selectedPreset === amount && 'bg-secondary-background-selected'
)
"
@@ -95,7 +95,7 @@
<p
v-if="isBelowMin"
class="text-sm text-red-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
class="m-0 flex items-center justify-center gap-1 px-8 pt-4 text-center text-sm text-red-500"
>
<i class="icon-[lucide--component] size-4" />
{{
@@ -106,7 +106,7 @@
</p>
<p
v-if="showCeilingWarning"
class="text-sm text-gold-500 m-0 px-8 pt-4 text-center flex items-center justify-center gap-1"
class="m-0 flex items-center justify-center gap-1 px-8 pt-4 text-center text-sm text-gold-500"
>
<i class="icon-[lucide--component] size-4" />
{{
@@ -123,7 +123,7 @@
>
</p>
<div class="p-8 flex flex-col gap-8">
<div class="flex flex-col gap-8 p-8">
<Button
:disabled="!isValidAmount || loading"
:loading="loading"

6
src/components/dialog/content/credit/CreditTopUpOption.vue
View File

@@ -1,10 +1,10 @@
<template>
<div
class="flex items-center justify-between p-2 rounded-lg cursor-pointer transition-all duration-200"
class="flex cursor-pointer items-center justify-between rounded-lg p-2 transition-all duration-200"
:class="[
selected
? 'bg-secondary-background border-2 border-border-default'
: 'bg-component-node-disabled hover:bg-secondary-background border-2 border-transparent'
? 'border-2 border-border-default bg-secondary-background'
: 'bg-component-node-disabled border-2 border-transparent hover:bg-secondary-background'
]"
@click="$emit('select')"
>

2
src/components/dialog/content/setting/UserPanel.vue
View File

@@ -67,7 +67,7 @@
v-if="!isApiKeyLogin"
keypath="auth.deleteAccount.contactSupport"
tag="p"
class="text-muted text-sm"
class="text-sm text-muted"
>
<template #email>
<a href="mailto:support@comfy.org" class="underline"

2
src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue
View File

@@ -10,7 +10,7 @@
{{ $t('subscription.cancelDialog.title') }}
</h2>
<button
class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
class="focus-visible:ring-secondary-foreground cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:ring-1 focus-visible:outline-none"
:aria-label="$t('g.close')"
:disabled="isLoading"
@click="onClose"

6
src/components/error/ErrorOverlay.vue
View File

@@ -4,7 +4,7 @@
enter-from-class="-translate-y-3 opacity-0"
enter-to-class="translate-y-0 opacity-100"
>
<div v-if="isVisible" class="flex justify-end w-full pointer-events-none">
<div v-if="isVisible" class="pointer-events-none flex w-full justify-end">
<div
role="alert"
aria-live="assertive"
@@ -32,12 +32,12 @@
<li
v-for="(message, idx) in groupedErrorMessages"
:key="idx"
class="flex items-baseline gap-2 text-sm/snug text-muted-foreground min-w-0"
class="flex min-w-0 items-baseline gap-2 text-sm/snug text-muted-foreground"
>
<span
class="mt-1.5 size-1 shrink-0 rounded-full bg-muted-foreground"
/>
<span class="wrap-break-word line-clamp-3 whitespace-pre-wrap">{{
<span class="line-clamp-3 wrap-break-word whitespace-pre-wrap">{{
message
}}</span>
</li>

2
src/components/gradientslider/GradientSlider.vue
View File

@@ -74,7 +74,7 @@ const pressed = ref(false)
<SliderThumb
:class="
cn(
'block size-4 shrink-0 cursor-grab rounded-full shadow-md ring-1 ring-black/25 top-1/2',
'top-1/2 block size-4 shrink-0 cursor-grab rounded-full shadow-md ring-1 ring-black/25',
'transition-[color,box-shadow,background-color]',
'before:absolute before:-inset-1.5 before:block before:rounded-full before:bg-transparent',
'hover:ring-2 hover:ring-black/40 focus-visible:ring-2 focus-visible:ring-black/40 focus-visible:outline-hidden',

2
src/components/graph/GraphCanvas.vue
View File

@@ -6,7 +6,7 @@
<template v-if="showUI" #workflow-tabs>
<div
v-if="workflowTabsPosition === 'Topbar'"
class="workflow-tabs-container pointer-events-auto relative w-full h-(--workflow-tabs-height)"
class="workflow-tabs-container pointer-events-auto relative h-(--workflow-tabs-height) w-full"
>
<!-- Native drag area for Electron -->
<div

2
src/components/graph/NodeContextMenu.vue
View File

@@ -2,7 +2,7 @@
<ContextMenu
ref="contextMenu"
:model="menuItems"
class="max-h-[80vh] md:max-h-none overflow-y-auto md:overflow-y-visible"
class="max-h-[80vh] overflow-y-auto md:max-h-none md:overflow-y-visible"
@show="onMenuShow"
@hide="onMenuHide"
>

8
src/components/graph/selectionToolbox/ColorPickerMenu.vue
View File

@@ -23,7 +23,7 @@
:class="
isColorSubmenu
? 'flex flex-col gap-1 p-2'
: 'flex flex-col p-2 min-w-40'
: 'flex min-w-40 flex-col p-2'
"
>
<div
@@ -31,12 +31,12 @@
:key="subOption.label"
:class="
cn(
'hover:bg-secondary-background-hover rounded-sm cursor-pointer',
'cursor-pointer rounded-sm hover:bg-secondary-background-hover',
isColorSubmenu
? 'size-7 flex items-center justify-center'
? 'flex size-7 items-center justify-center'
: 'flex items-center gap-2 px-3 py-1.5 text-sm',
subOption.disabled
? 'cursor-not-allowed pointer-events-none text-node-icon-disabled'
? 'pointer-events-none cursor-not-allowed text-node-icon-disabled'
: 'hover:bg-secondary-background-hover'
)
"

2
src/components/helpcenter/HelpCenterMenuContent.vue
View File

@@ -33,7 +33,7 @@
<span class="menu-label">{{ menuItem.label }}</span>
<i
v-if="menuItem.showExternalIcon"
class="icon-[lucide--external-link] text-primary size-4 ml-auto"
class="ml-auto icon-[lucide--external-link] size-4 text-primary"
/>
<i
v-if="menuItem.key === 'more'"

6
src/components/honeyToast/HoneyToast.vue
View File

@@ -31,10 +31,10 @@ function toggle() {
<div
:class="
cn(
'overflow-hidden transition-all duration-300 min-w-0 max-w-full',
'max-w-full min-w-0 overflow-hidden transition-all duration-300',
isExpanded
? 'w-full max-h-100 sm:w-[max(400px,40vw)]'
: 'w-0 max-h-0'
? 'max-h-100 w-full sm:w-[max(400px,40vw)]'
: 'max-h-0 w-0'
)
"
>

8
src/components/input/MultiSelect.vue
View File

@@ -16,7 +16,7 @@
:pt="{
root: ({ props }: MultiSelectPassThroughMethodOptions) => ({
class: cn(
'h-10 relative inline-flex cursor-pointer select-none',
'relative inline-flex h-10 cursor-pointer select-none',
'rounded-lg bg-secondary-background text-base-foreground',
'transition-all duration-200 ease-in-out',
'border-[2.5px] border-solid',
@@ -24,7 +24,7 @@
? 'border-node-component-border'
: 'border-transparent',
'focus-within:border-node-component-border',
{ 'opacity-60 cursor-default': props.disabled }
{ 'cursor-default opacity-60': props.disabled }
)
}),
labelContainer: {
@@ -62,7 +62,7 @@
// Option row hover and focus tone
option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
class: cn(
'flex gap-2 items-center h-10 px-2 rounded-lg cursor-pointer',
'flex h-10 cursor-pointer items-center gap-2 rounded-lg px-2',
'hover:bg-secondary-background-hover',
// Add focus/highlight state for keyboard navigation
context?.focused &&
@@ -150,7 +150,7 @@
<template #option="slotProps">
<div
role="button"
class="flex items-center gap-2 cursor-pointer"
class="flex cursor-pointer items-center gap-2"
:style="popoverStyle"
>
<div

4
src/components/input/SingleSelect.vue
View File

@@ -40,7 +40,7 @@
},
overlay: {
class: cn(
'mt-2 p-2 rounded-lg',
'mt-2 rounded-lg p-2',
'bg-base-background text-base-foreground',
'border border-solid border-border-default'
)
@@ -57,7 +57,7 @@
option: ({ context }: SelectPassThroughMethodOptions<SelectOption>) => ({
class: cn(
// Row layout
'flex items-center justify-between gap-3 px-2 py-3 rounded-sm',
'flex items-center justify-between gap-3 rounded-sm px-2 py-3',
'hover:bg-secondary-background-hover',
// Add focus state for keyboard navigation
context.focused && 'bg-secondary-background-hover',

4
src/components/load3d/controls/PopupSlider.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="relative show-slider">
<div class="show-slider relative">
<Button
v-tooltip.right="{ value: tooltipText, showDelay: 300 }"
size="icon"
@@ -12,7 +12,7 @@
</Button>
<div
v-show="showSlider"
class="absolute top-0 left-12 rounded-lg bg-interface-menu-surface p-4 shadow-lg w-[150px]"
class="absolute top-0 left-12 w-[150px] rounded-lg bg-interface-menu-surface p-4 shadow-lg"
>
<Slider
v-model="value"

2
src/components/load3d/controls/RecordingControls.vue
View File

@@ -13,7 +13,7 @@
:class="
cn(
'rounded-full',
isRecording && 'text-red-500 recording-button-blink'
isRecording && 'recording-button-blink text-red-500'
)
"
:aria-label="

30
src/components/maskeditor/BrushSettingsPanel.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col gap-3 pb-3">
<h3 class="text-center text-[15px] font-sans text-descrip-text mt-2.5">
<h3 class="text-descrip-text mt-2.5 text-center font-sans text-[15px]">
{{ t('maskEditor.brushSettings') }}
</h3>
@@ -10,19 +10,19 @@
<!-- Brush Shape -->
<div class="flex flex-col gap-3 pb-3">
<span class="text-left text-xs font-sans text-descrip-text">
<span class="text-descrip-text text-left font-sans text-xs">
{{ t('maskEditor.brushShape') }}
</span>
<div
class="flex flex-row gap-2.5 items-center h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
class="flex h-[50px] w-full flex-row items-center gap-2.5 rounded-[10px] bg-secondary-background-hover"
>
<div
class="maskEditor_sidePanelBrushShapeCircle hover:bg-comfy-menu-bg"
:class="
cn(
store.brushSettings.type === BrushShape.Arc
? 'bg-(--p-button-text-primary-color) active'
? 'active bg-(--p-button-text-primary-color)'
: 'bg-transparent'
)
"
@@ -34,7 +34,7 @@
:class="
cn(
store.brushSettings.type === BrushShape.Rect
? 'bg-(--p-button-text-primary-color) active'
? 'active bg-(--p-button-text-primary-color)'
: 'bg-transparent'
)
"
@@ -45,27 +45,27 @@
<!-- Color -->
<div class="flex flex-col gap-3 pb-3">
<span class="text-left text-xs font-sans text-descrip-text">
<span class="text-descrip-text text-left font-sans text-xs">
{{ t('maskEditor.colorSelector') }}
</span>
<input
ref="colorInputRef"
v-model="store.rgbColor"
type="color"
class="h-10 rounded-md cursor-pointer"
class="h-10 cursor-pointer rounded-md"
/>
</div>
<!-- Thickness -->
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between">
<span class="text-left text-xs font-sans text-descrip-text">
<span class="text-descrip-text text-left font-sans text-xs">
{{ t('maskEditor.thickness') }}
</span>
<input
v-model.number="brushSize"
type="number"
class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
class="border-p-form-field-border-color text-input-text w-16 rounded-md border bg-comfy-menu-bg px-2 py-1 text-center text-sm"
:min="1"
:max="250"
:step="1"
@@ -84,13 +84,13 @@
<!-- Opacity -->
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between">
<span class="text-left text-xs font-sans text-descrip-text">
<span class="text-descrip-text text-left font-sans text-xs">
{{ t('maskEditor.opacity') }}
</span>
<input
v-model.number="brushOpacity"
type="number"
class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
class="border-p-form-field-border-color text-input-text w-16 rounded-md border bg-comfy-menu-bg px-2 py-1 text-center text-sm"
:min="0"
:max="1"
:step="0.01"
@@ -109,13 +109,13 @@
<!-- Hardness -->
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between">
<span class="text-left text-xs font-sans text-descrip-text">
<span class="text-descrip-text text-left font-sans text-xs">
{{ t('maskEditor.hardness') }}
</span>
<input
v-model.number="brushHardness"
type="number"
class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
class="border-p-form-field-border-color text-input-text w-16 rounded-md border bg-comfy-menu-bg px-2 py-1 text-center text-sm"
:min="0"
:max="1"
:step="0.01"
@@ -134,13 +134,13 @@
<!-- Step Size -->
<div class="flex flex-col gap-2">
<div class="flex items-center justify-between">
<span class="text-left text-xs font-sans text-descrip-text">
<span class="text-descrip-text text-left font-sans text-xs">
{{ t('maskEditor.stepSize') }}
</span>
<input
v-model.number="brushStepSize"
type="number"
class="w-16 px-2 py-1 text-sm text-center border rounded-md bg-comfy-menu-bg border-p-form-field-border-color text-input-text"
class="border-p-form-field-border-color text-input-text w-16 rounded-md border bg-comfy-menu-bg px-2 py-1 text-center text-sm"
:min="1"
:max="100"
:step="1"

2
src/components/maskeditor/ColorSelectSettingsPanel.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col gap-3 pb-3">
<h3 class="text-center text-[15px] font-sans text-(--descrip-text) mt-2.5">
<h3 class="mt-2.5 text-center font-sans text-[15px] text-(--descrip-text)">
{{ t('maskEditor.colorSelectSettings') }}
</h3>

18
src/components/maskeditor/ImageLayerSettingsPanel.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col gap-3 pb-3">
<h3 class="text-center text-[15px] font-sans text-(--descrip-text) mt-2.5">
<h3 class="mt-2.5 text-center font-sans text-[15px] text-(--descrip-text)">
{{ t('maskEditor.layers') }}
</h3>
@@ -13,12 +13,12 @@
@update:model-value="onMaskOpacityChange"
/>
<span class="text-left text-xs font-sans text-(--descrip-text)">{{
<span class="text-left font-sans text-xs text-(--descrip-text)">{{
t('maskEditor.maskBlendingOptions')
}}</span>
<div
class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] -mt-2 -mb-1.5"
class="relative -mt-2 -mb-1.5 flex h-[50px] min-h-6 w-full flex-row items-center gap-2.5 rounded-[10px]"
>
<select
class="maskEditor_sidePanelDropdown"
@@ -31,11 +31,11 @@
</select>
</div>
<span class="text-left text-xs font-sans text-(--descrip-text)">{{
<span class="text-left font-sans text-xs text-(--descrip-text)">{{
t('maskEditor.maskLayer')
}}</span>
<div
class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
class="relative flex h-[50px] min-h-6 w-full flex-row items-center gap-2.5 rounded-[10px] bg-secondary-background-hover"
:style="{
border: store.activeLayer === 'mask' ? '2px solid #007acc' : 'none'
}"
@@ -64,11 +64,11 @@
</button>
</div>
<span class="text-left text-xs font-sans text-(--descrip-text)">{{
<span class="text-left font-sans text-xs text-(--descrip-text)">{{
t('maskEditor.paintLayer')
}}</span>
<div
class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
class="relative flex h-[50px] min-h-6 w-full flex-row items-center gap-2.5 rounded-[10px] bg-secondary-background-hover"
:style="{
border: store.activeLayer === 'rgb' ? '2px solid #007acc' : 'none'
}"
@@ -104,11 +104,11 @@
</button>
</div>
<span class="text-left text-xs font-sans text-(--descrip-text)">{{
<span class="text-left font-sans text-xs text-(--descrip-text)">{{
t('maskEditor.baseImageLayer')
}}</span>
<div
class="flex flex-row gap-2.5 items-center min-h-6 relative h-[50px] w-full rounded-[10px] bg-secondary-background-hover"
class="relative flex h-[50px] min-h-6 w-full flex-row items-center gap-2.5 rounded-[10px] bg-secondary-background-hover"
>
<input
type="checkbox"

10
src/components/maskeditor/MaskEditorContent.vue
View File

@@ -13,29 +13,29 @@
>
<canvas
ref="imgCanvasRef"
class="absolute top-0 left-0 size-full z-0"
class="absolute top-0 left-0 z-0 size-full"
@contextmenu.prevent
/>
<canvas
ref="rgbCanvasRef"
class="absolute top-0 left-0 size-full z-10"
class="absolute top-0 left-0 z-10 size-full"
@contextmenu.prevent
/>
<canvas
ref="maskCanvasRef"
class="absolute top-0 left-0 size-full z-30"
class="absolute top-0 left-0 z-30 size-full"
@contextmenu.prevent
/>
<!-- GPU Preview Canvas -->
<canvas
ref="gpuCanvasRef"
class="absolute top-0 left-0 size-full pointer-events-none"
class="pointer-events-none absolute top-0 left-0 size-full"
:class="{
'z-20': store.activeLayer === 'rgb',
'z-40': store.activeLayer === 'mask'
}"
/>
<div ref="canvasBackgroundRef" class="bg-white size-full" />
<div ref="canvasBackgroundRef" class="size-full bg-white" />
</div>
<div class="maskEditor-ui-container flex min-h-0 flex-1 flex-col">

2
src/components/maskeditor/PaintBucketSettingsPanel.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col gap-3 pb-3">
<h3 class="text-center text-[15px] font-sans text-(--descrip-text) mt-2.5">
<h3 class="mt-2.5 text-center font-sans text-[15px] text-(--descrip-text)">
{{ t('maskEditor.paintBucketSettings') }}
</h3>

2
src/components/maskeditor/PointerZone.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
ref="pointerZoneRef"
class="w-[calc(100%-4rem-220px)] h-full"
class="h-full w-[calc(100%-4rem-220px)]"
@pointerdown="handlePointerDown"
@pointermove="handlePointerMove"
@pointerup="handlePointerUp"

6
src/components/maskeditor/SidePanel.vue
View File

@@ -1,11 +1,11 @@
<template>
<div
class="flex flex-col gap-3 pb-3 h-full items-stretch! bg-(--comfy-menu-bg) overflow-y-auto w-55 px-2.5"
class="flex h-full w-55 flex-col items-stretch! gap-3 overflow-y-auto bg-(--comfy-menu-bg) px-2.5 pb-3"
>
<div class="w-full min-h-full">
<div class="min-h-full w-full">
<SettingsPanelContainer />
<div class="w-full h-0.5 bg-(--border-color) mt-6 mb-1.5" />
<div class="mt-6 mb-1.5 h-0.5 w-full bg-(--border-color)" />
<ImageLayerSettingsPanel :tool-manager="toolManager" />
</div>

4
src/components/maskeditor/ToolPanel.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="h-full z-8888 flex flex-col justify-between bg-comfy-menu-bg">
<div class="z-8888 flex h-full flex-col justify-between bg-comfy-menu-bg">
<div class="flex flex-col">
<div
v-for="tool in allTools"
@@ -19,7 +19,7 @@
</div>
<div
class="flex flex-col items-center cursor-pointer rounded-md mb-2 transition-colors duration-200 hover:bg-secondary-background-hover"
class="mb-2 flex cursor-pointer flex-col items-center rounded-md transition-colors duration-200 hover:bg-secondary-background-hover"
:title="t('maskEditor.clickToResetZoom')"
@click="onResetZoom"
>

6
src/components/maskeditor/controls/DropdownControl.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="flex flex-row gap-2.5 items-center min-h-6 relative">
<span class="text-left text-xs font-sans text-(--descrip-text)">{{
<div class="relative flex min-h-6 flex-row items-center gap-2.5">
<span class="text-left font-sans text-xs text-(--descrip-text)">{{
label
}}</span>
<select
class="absolute right-0 h-6 px-1.5 rounded-md border border-border-default transition-colors duration-100 bg-secondary-background focus:outline focus:outline-node-component-border"
class="absolute right-0 h-6 rounded-md border border-border-default bg-secondary-background px-1.5 transition-colors duration-100 focus:outline focus:outline-node-component-border"
:value="modelValue"
@change="onChange"
>

2
src/components/maskeditor/controls/SliderControl.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col gap-3 pb-3">
<span class="text-left text-xs font-sans text-(--descrip-text)">{{
<span class="text-left font-sans text-xs text-(--descrip-text)">{{
label
}}</span>
<input

4
src/components/maskeditor/controls/ToggleControl.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="flex flex-row gap-2.5 items-center min-h-6 relative">
<span class="text-left text-xs font-sans text-(--descrip-text)">{{
<div class="relative flex min-h-6 flex-row items-center gap-2.5">
<span class="text-left font-sans text-xs text-(--descrip-text)">{{
label
}}</span>
<label class="maskEditor_sidePanelToggleContainer">

14
src/components/maskeditor/dialog/TopBarHeader.vue
View File

@@ -11,7 +11,7 @@
>
<svg
viewBox="0 0 15 15"
class="h-6.25 w-6.25 pointer-events-none fill-current"
class="pointer-events-none h-6.25 w-6.25 fill-current"
>
<path
d="M8.77,12.18c-.25,0-.46-.2-.46-.46s.2-.46.46-.46c1.47,0,2.67-1.2,2.67-2.67,0-1.57-1.34-2.67-3.26-2.67h-3.98l1.43,1.43c.18.18.18.47,0,.64-.18.18-.47.18-.64,0l-2.21-2.21c-.18-.18-.18-.47,0-.64l2.21-2.21c.18-.18.47-.18.64,0,.18.18.18.47,0,.64l-1.43,1.43h3.98c2.45,0,4.17,1.47,4.17,3.58,0,1.97-1.61,3.58-3.58,3.58Z"
@@ -26,7 +26,7 @@
>
<svg
viewBox="0 0 15 15"
class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
>
<path
class="cls-1"
@@ -35,7 +35,7 @@
</svg>
</button>
<div class="h-5 border-l border-border" />
<div class="border-border h-5 border-l" />
<button
:class="iconButtonClass"
@@ -44,7 +44,7 @@
>
<svg
viewBox="-6 -7 15 15"
class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
>
<path
d="m2.25-2.625c.3452 0 .625.2798.625.625v5c0 .3452-.2798.625-.625.625h-5c-.3452 0-.625-.2798-.625-.625v-5c0-.3452.2798-.625.625-.625h5zm1.25.625v5c0 .6904-.5596 1.25-1.25 1.25h-5c-.6904 0-1.25-.5596-1.25-1.25v-5c0-.6904.5596-1.25 1.25-1.25h5c.6904 0 1.25.5596 1.25 1.25zm-.1673-2.3757-.4419.4419-1.5246-1.5246 1.5416-1.5417.442.4419-.7871.7872h.9373c1.3807 0 2.5 1.1193 2.5 2.5h-.625c0-1.0355-.8395-1.875-1.875-1.875h-.9375l.7702.7702z"
@@ -59,7 +59,7 @@
>
<svg
viewBox="-9 -7 15 15"
class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
>
<g transform="scale(-1, 1)">
<path
@@ -76,7 +76,7 @@
>
<svg
viewBox="0 0 15 15"
class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
>
<path
d="M7.5,1.5c-.28,0-.5.22-.5.5v11c0,.28.22.5.5.5s.5-.22.5-.5v-11c0-.28-.22-.5-.5-.5Z"
@@ -92,7 +92,7 @@
>
<svg
viewBox="0 0 15 15"
class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
class="pointer-events-none h-6.25 w-6.25 fill-(--input-text)"
>
<path
d="M2,7.5c0-.28.22-.5.5-.5h11c.28,0,.5.22.5.5s-.22.5-.5.5h-11c-.28,0-.5-.22-.5-.5Z"

16
src/components/node/NodePreviewCard.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="flex w-50 flex-col overflow-hidden rounded-2xl bg-base-background border border-border-default"
class="flex w-50 flex-col overflow-hidden rounded-2xl border border-border-default bg-base-background"
>
<div ref="previewContainerRef" class="overflow-hidden p-3">
<div ref="previewWrapperRef" class="origin-top-left scale-50">
@@ -11,14 +11,14 @@
<!-- Content Section -->
<div class="flex flex-col gap-2 p-3 pt-1">
<!-- Title -->
<h3 class="text-xs font-semibold text-foreground m-0">
<h3 class="text-foreground m-0 text-xs font-semibold">
{{ nodeDef.display_name }}
</h3>
<!-- Category Path -->
<p
v-if="showCategoryPath && nodeDef.category"
class="text-xs text-muted-foreground -mt-1"
class="-mt-1 text-xs text-muted-foreground"
>
{{ nodeDef.category.replaceAll('/', ' > ') }}
</p>
@@ -32,7 +32,7 @@
<!-- Description -->
<p
v-if="nodeDef.description"
class="text-[11px] font-normal leading-normal text-muted-foreground m-0"
class="m-0 text-[11px] leading-normal font-normal text-muted-foreground"
>
{{ nodeDef.description }}
</p>
@@ -49,7 +49,7 @@
class="flex flex-col gap-1"
>
<h4
class="text-xxs font-semibold uppercase tracking-wide text-muted-foreground m-0"
class="m-0 text-xxs font-semibold tracking-wide text-muted-foreground uppercase"
>
{{ $t('nodeHelpPage.inputs') }}
</h4>
@@ -58,7 +58,7 @@
:key="input.name"
class="flex items-center justify-between gap-2 text-xxs"
>
<span class="shrink-0 text-foreground">{{ input.name }}</span>
<span class="text-foreground shrink-0">{{ input.name }}</span>
<span class="min-w-0 truncate text-muted-foreground">{{
input.type
}}</span>
@@ -71,7 +71,7 @@
class="flex flex-col gap-1"
>
<h4
class="text-xxs font-semibold uppercase tracking-wide text-muted-foreground m-0"
class="m-0 text-xxs font-semibold tracking-wide text-muted-foreground uppercase"
>
{{ $t('nodeHelpPage.outputs') }}
</h4>
@@ -80,7 +80,7 @@
:key="output.name"
class="flex items-center justify-between gap-2 text-xxs"
>
<span class="shrink-0 text-foreground">{{ output.name }}</span>
<span class="text-foreground shrink-0">{{ output.name }}</span>
<span class="min-w-0 truncate text-muted-foreground">{{
output.type
}}</span>

18
src/components/painter/WidgetPainter.vue
View File

@@ -29,7 +29,7 @@
<div
v-show="cursorVisible"
ref="cursorEl"
class="pointer-events-none absolute left-0 top-0 rounded-full border border-black/60 shadow-[0_0_0_1px_rgba(255,255,255,0.8)] will-change-transform"
class="pointer-events-none absolute top-0 left-0 rounded-full border border-black/60 shadow-[0_0_0_1px_rgba(255,255,255,0.8)] will-change-transform"
:style="cursorSizeStyle"
/>
</div>
@@ -109,7 +109,7 @@
class="flex-1"
@update:model-value="(v) => v?.length && (brushSize = v[0])"
/>
<span class="w-8 text-center text-xs text-node-text-muted">{{
<span class="text-node-text-muted w-8 text-center text-xs">{{
brushSize
}}</span>
</div>
@@ -127,7 +127,7 @@
<input
type="color"
:value="brushColorDisplay"
class="h-4 w-8 cursor-pointer appearance-none overflow-hidden rounded-full border-none bg-transparent [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch]:rounded-full [&::-moz-color-swatch]:border-none [&::-moz-color-swatch]:rounded-full"
class="h-4 w-8 cursor-pointer appearance-none overflow-hidden rounded-full border-none bg-transparent [&::-moz-color-swatch]:rounded-full [&::-moz-color-swatch]:border-none [&::-webkit-color-swatch]:rounded-full [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch-wrapper]:p-0"
@input="
(e) => (brushColorDisplay = (e.target as HTMLInputElement).value)
"
@@ -135,14 +135,14 @@
<span class="min-w-[4ch] truncate text-xs">{{
brushColorDisplay
}}</span>
<span class="ml-auto flex items-center text-xs text-node-text-muted">
<span class="text-node-text-muted ml-auto flex items-center text-xs">
<input
type="number"
:value="brushOpacityPercent"
min="0"
max="100"
step="1"
class="w-7 appearance-none border-0 bg-transparent text-right text-xs text-node-text-muted outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [-moz-appearance:textfield]"
class="text-node-text-muted w-7 appearance-none border-0 bg-transparent text-right text-xs outline-none [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
@click.stop
@change="
(e) => {
@@ -177,7 +177,7 @@
(v) => v?.length && (brushHardnessPercent = v[0])
"
/>
<span class="w-8 text-center text-xs text-node-text-muted"
<span class="text-node-text-muted w-8 text-center text-xs"
>{{ brushHardnessPercent }}%</span
>
</div>
@@ -201,7 +201,7 @@
class="flex-1"
@update:model-value="(v) => v?.length && (canvasWidth = v[0])"
/>
<span class="w-10 text-center text-xs text-node-text-muted">{{
<span class="text-node-text-muted w-10 text-center text-xs">{{
canvasWidth
}}</span>
</div>
@@ -223,7 +223,7 @@
class="flex-1"
@update:model-value="(v) => v?.length && (canvasHeight = v[0])"
/>
<span class="w-10 text-center text-xs text-node-text-muted">{{
<span class="text-node-text-muted w-10 text-center text-xs">{{
canvasHeight
}}</span>
</div>
@@ -240,7 +240,7 @@
<input
type="color"
:value="backgroundColorDisplay"
class="h-4 w-8 cursor-pointer appearance-none overflow-hidden rounded-full border-none bg-transparent [&::-webkit-color-swatch-wrapper]:p-0 [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch]:rounded-full [&::-moz-color-swatch]:border-none [&::-moz-color-swatch]:rounded-full"
class="h-4 w-8 cursor-pointer appearance-none overflow-hidden rounded-full border-none bg-transparent [&::-moz-color-swatch]:rounded-full [&::-moz-color-swatch]:border-none [&::-webkit-color-swatch]:rounded-full [&::-webkit-color-swatch]:border-none [&::-webkit-color-swatch-wrapper]:p-0"
@input="
(e) =>
(backgroundColorDisplay = (e.target as HTMLInputElement).value)

4
src/components/queue/JobHistoryActionsMenu.vue
View File

@@ -67,12 +67,12 @@
class="icon-[lucide--trash-2] size-4 shrink-0 self-center text-destructive-background"
/>
<span
class="flex flex-col items-start wrap-break-word text-left leading-tight"
class="flex flex-col items-start text-left leading-tight wrap-break-word"
>
<span class="text-sm font-light">
{{ t('sideToolbar.queueProgressOverlay.clearHistory') }}
</span>
<span class="text-xs text-text-secondary font-light">
<span class="text-xs font-light text-text-secondary">
{{
t(
'sideToolbar.queueProgressOverlay.clearHistoryMenuAssetsNote'

2
src/components/queue/QueueInlineProgressSummary.vue
View File

@@ -1,7 +1,7 @@
<template>
<div v-if="shouldShow" class="flex justify-end">
<div
class="flex items-center whitespace-nowrap text-[0.75rem] leading-[normal] drop-shadow-[1px_1px_8px_rgba(0,0,0,0.4)]"
class="flex items-center text-[0.75rem] leading-[normal] whitespace-nowrap drop-shadow-[1px_1px_8px_rgba(0,0,0,0.4)]"
role="status"
aria-live="polite"
aria-atomic="true"

2
src/components/queue/QueueNotificationBanner.vue
View File

@@ -45,7 +45,7 @@
</div>
<div class="flex h-full items-center">
<span
class="overflow-hidden text-ellipsis text-center font-inter text-[12px] leading-normal font-normal text-base-foreground"
class="overflow-hidden text-center font-inter text-[12px] leading-normal font-normal text-ellipsis text-base-foreground"
>
{{ bannerText }}
</span>

2
src/components/queue/QueueOverlayExpanded.vue
View File

@@ -20,7 +20,7 @@
@update:selected-sort-mode="$emit('update:selectedSortMode', $event)"
/>
<div class="flex-1 min-h-0 overflow-y-auto">
<div class="min-h-0 flex-1 overflow-y-auto">
<JobAssetsList
:displayed-job-groups="displayedJobGroups"
@cancel-item="onCancelItemEvent"

4
src/components/queue/QueueProgressOverlay.vue
View File

@@ -4,7 +4,7 @@
:class="['flex', 'justify-end', 'w-full', 'pointer-events-none']"
>
<div
class="pointer-events-auto flex w-[350px] min-w-[310px] max-h-[60vh] flex-col overflow-hidden rounded-lg border font-inter transition-colors duration-200 ease-in-out"
class="pointer-events-auto flex max-h-[60vh] w-[350px] min-w-[310px] flex-col overflow-hidden rounded-lg border font-inter transition-colors duration-200 ease-in-out"
:class="containerClass"
@mouseenter="isHovered = true"
@mouseleave="isHovered = false"
@@ -15,7 +15,7 @@
v-model:selected-job-tab="selectedJobTab"
v-model:selected-workflow-filter="selectedWorkflowFilter"
v-model:selected-sort-mode="selectedSortMode"
class="flex-1 min-h-0"
class="min-h-0 flex-1"
:header-title="headerTitle"
:queued-count="queuedCount"
:displayed-job-groups="displayedJobGroups"

4
src/components/queue/dialogs/QueueClearHistoryDialog.vue
View File

@@ -1,11 +1,11 @@
<template>
<section
class="w-[360px] rounded-2xl border border-interface-stroke bg-interface-panel-surface text-text-primary shadow-interface font-inter"
class="w-[360px] rounded-2xl border border-interface-stroke bg-interface-panel-surface font-inter text-text-primary shadow-interface"
>
<header
class="flex items-center justify-between border-b border-interface-stroke p-4"
>
<p class="m-0 text-[14px] font-normal leading-none">
<p class="m-0 text-[14px] leading-none font-normal">
{{ t('sideToolbar.queueProgressOverlay.clearHistoryDialogTitle') }}
</p>
<Button

2
src/components/queue/job/QueueJobItem.vue
View File

@@ -66,7 +66,7 @@
<div class="relative z-1 flex items-center gap-1">
<div class="relative inline-flex items-center justify-center">
<div
class="absolute left-1/2 top-1/2 size-10 -translate-1/2"
class="absolute top-1/2 left-1/2 size-10 -translate-1/2"
@mouseenter.stop="onIconEnter"
@mouseleave.stop="onIconLeave"
/>

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>

2
src/components/searchbox/v2/NodeSearchCategorySidebar.vue
View File

@@ -121,7 +121,7 @@ const categoryTree = computed<CategoryNode[]>(() => {
function categoryBtnClass(id: string) {
return cn(
'cursor-pointer border-none bg-transparent rounded-sm px-3 py-2.5 text-left text-sm transition-colors',
'cursor-pointer rounded-sm border-none bg-transparent px-3 py-2.5 text-left text-sm transition-colors',
selectedCategory.value === id
? CATEGORY_SELECTED_CLASS
: CATEGORY_UNSELECTED_CLASS

2
src/components/searchbox/v2/NodeSearchContent.vue
View File

@@ -60,7 +60,7 @@
:aria-selected="index === selectedIndex"
:class="
cn(
'flex cursor-pointer items-center px-4 h-14',
'flex h-14 cursor-pointer items-center px-4',
index === selectedIndex && 'bg-secondary-background-hover'
)
"

4
src/components/searchbox/v2/NodeSearchFilterBar.vue
View File

@@ -7,9 +7,9 @@
:aria-pressed="activeChipKey === chip.key"
:class="
cn(
'cursor-pointer rounded-md border px-3 py-1 text-sm transition-colors flex-auto border-secondary-background',
'flex-auto cursor-pointer rounded-md border border-secondary-background px-3 py-1 text-sm transition-colors',
activeChipKey === chip.key
? 'bg-secondary-background text-foreground'
? 'text-foreground bg-secondary-background'
: 'bg-transparent text-muted-foreground hover:border-base-foreground/60 hover:text-base-foreground/60'
)
"

4
src/components/searchbox/v2/NodeSearchFilterPanel.vue
View File

@@ -21,8 +21,8 @@
@click="emit('apply', option)"
@mouseenter="selectedIndex = index"
>
<span class="text-base font-semibold text-foreground">
<span class="text-2xl mr-1" :style="{ color: getLinkTypeColor(option) }"
<span class="text-foreground text-base font-semibold">
<span class="mr-1 text-2xl" :style="{ color: getLinkTypeColor(option) }"
>&bull;</span
>
{{ option }}

Some files were not shown because too many files have changed in this diff Show More