Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-22 23:39:45 +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
src/renderer/extensions/vueNodes/VideoPreview.vue
View File

@@ -21,7 +21,7 @@
<div
v-if="videoError"
role="alert"
class="flex flex-auto flex-col items-center justify-center bg-muted-background text-center text-base-foreground py-8"
class="flex flex-auto flex-col items-center justify-center bg-muted-background py-8 text-center text-base-foreground"
>
<i class="mb-2 icon-[lucide--video-off] size-12 text-base-foreground" />
<p class="text-sm text-base-foreground">

8
src/renderer/extensions/vueNodes/components/ImagePreview.vue
View File

@@ -1,13 +1,13 @@
<template>
<div
v-if="imageUrls.length > 0"
class="image-preview group relative flex size-full min-h-55 min-w-16 flex-col px-2 justify-center"
class="image-preview group relative flex size-full min-h-55 min-w-16 flex-col justify-center px-2"
@keydown="handleKeyDown"
>
<!-- Image Wrapper -->
<div
ref="imageWrapperEl"
class="min-h-0 flex-1 flex w-full overflow-hidden rounded-[5px] bg-muted-background relative"
class="relative flex min-h-0 w-full flex-1 overflow-hidden rounded-[5px] bg-muted-background"
tabindex="0"
role="img"
:aria-label="$t('g.imagePreview')"
@@ -21,7 +21,7 @@
<div
v-if="imageError"
role="alert"
class="flex flex-1 self-center size-full flex-col items-center justify-around bg-muted-background text-center text-base-foreground py-8"
class="flex size-full flex-1 flex-col items-center justify-around self-center bg-muted-background py-8 text-center text-base-foreground"
>
<i class="mb-2 icon-[lucide--image-off] size-12 text-base-foreground" />
<p class="text-sm text-base-foreground">
@@ -40,7 +40,7 @@
v-if="!imageError"
:src="currentImageUrl"
:alt="imageAltText"
class="absolute inset-0 block size-full object-contain pointer-events-none"
class="pointer-events-none absolute inset-0 block size-full object-contain"
@load="handleImageLoad"
@error="handleImageError"
/>

10
src/renderer/extensions/vueNodes/components/InputSlot.vue
View File

@@ -5,7 +5,7 @@
v-tooltip.left="tooltipConfig"
:class="
cn(
'lg-slot lg-slot--input flex items-center group rounded-r-lg m-0',
'lg-slot lg-slot--input group m-0 flex items-center rounded-r-lg',
'cursor-crosshair',
dotOnly ? 'lg-slot--dot-only' : 'pr-6',
{
@@ -22,9 +22,9 @@
ref="connectionDotRef"
:class="
cn(
'-translate-x-1/2 w-3',
'w-3 -translate-x-1/2',
hasError &&
'before:ring-2 before:ring-error before:ring-offset-0 before:size-4 before:absolute before:rounded-full before:pointer-events-none'
'before:pointer-events-none before:absolute before:size-4 before:rounded-full before:ring-2 before:ring-error before:ring-offset-0'
)
"
:slot-data
@@ -34,13 +34,13 @@
/>
<!-- Slot Name -->
<div class="h-full flex items-center min-w-0">
<div class="flex h-full min-w-0 items-center">
<span
v-if="!props.dotOnly && !hasNoLabel"
:class="
cn(
'truncate text-node-component-slot-text',
hasError && 'text-error font-medium'
hasError && 'font-medium text-error'
)
"
>

30
src/renderer/extensions/vueNodes/components/LGraphNode.vue
View File

@@ -9,24 +9,24 @@
:data-node-id="nodeData.id"
:class="
cn(
'group/node bg-node-component-header-surface lg-node absolute text-sm',
'contain-style contain-layout min-w-[225px] min-h-(--node-height) w-(--node-width)',
'group/node lg-node absolute bg-node-component-header-surface text-sm',
'min-h-(--node-height) w-(--node-width) min-w-[225px] contain-layout contain-style',
shapeClass,
'touch-none flex flex-col',
'flex touch-none flex-col',
'border border-solid border-component-node-border',
// hover (only when node should handle events)
shouldHandleNodePointerEvents &&
'hover:ring-7 ring-node-component-ring',
'outline-transparent outline-3 focus-visible:outline-node-component-outline',
'ring-node-component-ring hover:ring-7',
'outline-3 outline-transparent focus-visible:outline-node-component-outline',
borderClass,
outlineClass,
cursorClass,
{
[`${beforeShapeClass} before:pointer-events-none before:absolute before:bg-bypass/60 before:inset-0`]:
[`${beforeShapeClass} before:pointer-events-none before:absolute before:inset-0 before:bg-bypass/60`]:
bypassed,
[`${beforeShapeClass} before:pointer-events-none before:absolute before:inset-0`]:
muted,
'ring-4 ring-primary-500 bg-primary-500/10': isDraggingOver
'bg-primary-500/10 ring-4 ring-primary-500': isDraggingOver
},
shouldHandleNodePointerEvents && !nodeData.flags?.ghost
? 'pointer-events-auto'
@@ -58,7 +58,7 @@
/>
<div
v-if="displayHeader"
class="flex flex-col justify-center items-center relative"
class="relative flex flex-col items-center justify-center"
>
<template v-if="isCollapsed">
<SlotConnectionDot
@@ -110,14 +110,14 @@
</div>
<div
class="flex flex-1 flex-col gap-1 pt-1 pb-3 bg-component-node-background rounded-b-2xl"
class="flex flex-1 flex-col gap-1 rounded-b-2xl bg-component-node-background pt-1 pb-3"
:data-testid="`node-body-${nodeData.id}`"
>
<NodeSlots :node-data="nodeData" />
<NodeWidgets v-if="nodeData.widgets?.length" :node-data="nodeData" />
<div v-if="hasCustomContent" class="min-h-0 flex-1 flex flex-col">
<div v-if="hasCustomContent" class="flex min-h-0 flex-1 flex-col">
<NodeContent
v-if="nodeMedia"
:node-data="nodeData"
@@ -147,7 +147,7 @@
"
:class="
cn(
'flex w-full h-7 rounded-b-2xl -z-1 text-xs rounded-t-none overflow-hidden divide-x divide-component-node-border',
'-z-1 flex h-7 w-full divide-x divide-component-node-border overflow-hidden rounded-t-none rounded-b-2xl text-xs',
!isCollapsed && '-mt-5 h-12'
)
"
@@ -157,7 +157,7 @@
variant="textonly"
:class="
cn(
'flex-1 rounded-none h-full',
'h-full flex-1 rounded-none',
hasAnyError &&
showErrorsTabEnabled &&
!nodeData.color &&
@@ -181,7 +181,7 @@
variant="textonly"
:class="
cn(
'flex-1 rounded-none h-full bg-error hover:bg-destructive-background-hover',
'h-full flex-1 rounded-none bg-error hover:bg-destructive-background-hover',
isCollapsed ? 'py-2' : 'pt-7 pb-2'
)
"
@@ -199,7 +199,7 @@
"
variant="textonly"
:class="
cn('flex-1 rounded-none h-full', isCollapsed ? 'py-2' : 'pt-7 pb-2')
cn('h-full flex-1 rounded-none', isCollapsed ? 'py-2' : 'pt-7 pb-2')
"
@click.stop="showAdvancedState = !showAdvancedState"
>
@@ -238,7 +238,7 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 12"
:class="cn('size-2/5 absolute', handle.svgPositionClasses)"
:class="cn('absolute size-2/5', handle.svgPositionClasses)"
:style="
handle.svgTransform ? { transform: handle.svgTransform } : undefined
"

6
src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
View File

@@ -3,18 +3,18 @@
:data-node-id="nodeData.id"
:class="
cn(
'bg-component-node-background lg-node pb-1 contain-style contain-layout w-[350px] rounded-2xl touch-none flex flex-col border border-solid outline-transparent outline-2 border-node-stroke',
'lg-node flex w-[350px] touch-none flex-col rounded-2xl border border-solid border-node-stroke bg-component-node-background pb-1 outline-2 outline-transparent contain-layout contain-style',
position
)
"
>
<div
class="flex flex-col justify-center items-center relative pointer-events-none"
class="pointer-events-none relative flex flex-col items-center justify-center"
>
<NodeHeader :node-data="nodeData" />
</div>
<div
class="flex flex-1 flex-col gap-1 pb-2 pointer-events-none"
class="pointer-events-none flex flex-1 flex-col gap-1 pb-2"
:data-testid="`node-body-${nodeData.id}`"
>
<NodeSlots :node-data="nodeData" />

2
src/renderer/extensions/vueNodes/components/LivePreview.vue
View File

@@ -11,7 +11,7 @@
v-else
:src="imageUrl"
:alt="$t('g.liveSamplingPreview')"
class="pointer-events-none w-full object-contain contain-size min-h-55 flex-1"
class="pointer-events-none min-h-55 w-full flex-1 object-contain contain-size"
@load="handleImageLoad"
@error="handleImageError"
/>

2
src/renderer/extensions/vueNodes/components/NodeBadge.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
v-if="text"
class="min-w-max rounded-sm bg-node-component-surface px-1 py-0.5 text-xs flex items-center gap-1"
class="flex min-w-max items-center gap-1 rounded-sm bg-node-component-surface px-1 py-0.5 text-xs"
:style="{
color: fgColor,
backgroundColor: bgColor

10
src/renderer/extensions/vueNodes/components/NodeBadges.vue
View File

@@ -15,18 +15,18 @@ defineProps<{
>
<div
v-if="hasComfyBadge"
class="rounded-full bg-component-node-widget-background size-6 flex justify-center items-center"
class="flex size-6 items-center justify-center rounded-full bg-component-node-widget-background"
>
<i class="icon-[comfy--comfy-c] size-3" />
</div>
<div
v-if="core.length"
class="rounded-full bg-component-node-widget-background h-6 flex justify-center items-center overflow-clip"
class="flex h-6 items-center justify-center overflow-clip rounded-full bg-component-node-widget-background"
>
<template v-for="(badge, index) of core" :key="badge.text">
<div
v-if="index !== 0"
class="border-muted-foreground border-r h-4 mr-0.5 pr-0.5"
class="mr-0.5 h-4 border-r border-muted-foreground pr-0.5"
/>
<NodeBadge
bg-color="transparent"
@@ -37,12 +37,12 @@ defineProps<{
</div>
<div
v-if="extension.length"
class="rounded-full bg-component-node-widget-background h-6 flex justify-center items-center overflow-clip"
class="flex h-6 items-center justify-center overflow-clip rounded-full bg-component-node-widget-background"
>
<template v-for="(badge, index) of extension" :key="badge.text">
<div
v-if="index !== 0"
class="border-muted-foreground border-r h-4 mr-0.5 pr-0.5"
class="mr-0.5 h-4 border-r border-muted-foreground pr-0.5"
/>
<NodeBadge
bg-color="transparent"

2
src/renderer/extensions/vueNodes/components/NodeContent.vue
View File

@@ -2,7 +2,7 @@
<div v-if="renderError" class="node-error p-2 text-sm text-red-500">
{{ st('nodeErrors.content', 'Node Content Error') }}
</div>
<div v-else class="lg-node-content flex grow flex-col flex-auto">
<div v-else class="lg-node-content flex flex-auto grow flex-col">
<!-- Default slot for custom content -->
<slot>
<VideoPreview

16
src/renderer/extensions/vueNodes/components/NodeHeader.vue
View File

@@ -6,7 +6,7 @@
v-else
:class="
cn(
'lg-node-header text-sm py-2 pl-2 pr-3 w-full min-w-0',
'lg-node-header w-full min-w-0 py-2 pr-3 pl-2 text-sm',
'text-node-component-header',
headerShapeClass
)
@@ -14,9 +14,9 @@
:data-testid="`node-header-${nodeData?.id || ''}`"
@dblclick="handleDoubleClick"
>
<div class="flex items-center justify-between gap-2.5 min-w-0">
<div class="flex min-w-0 items-center justify-between gap-2.5">
<!-- Collapse/Expand Button -->
<div class="relative flex items-center gap-2.5 min-w-0 shrink mr-auto">
<div class="relative mr-auto flex min-w-0 shrink items-center gap-2.5">
<div class="flex shrink-0 items-center px-0.5">
<Button
size="icon-sm"
@@ -43,7 +43,7 @@
class="flex min-w-0 flex-1 items-center gap-2"
data-testid="node-title"
>
<div class="truncate flex-1">
<div class="flex-1 truncate">
<EditableText
:model-value="displayTitle"
:is-editing="isEditing"
@@ -59,17 +59,17 @@
<span
:class="
cn(
'flex h-5 bg-component-node-widget-background p-1 items-center text-xs shrink-0',
'flex h-5 shrink-0 items-center bg-component-node-widget-background p-1 text-xs',
badge.rest ? 'rounded-l-full pr-1' : 'rounded-full'
)
"
>
<i class="h-full icon-[lucide--component] bg-amber-400" />
<i class="icon-[lucide--component] h-full bg-amber-400" />
<span class="truncate" v-text="badge.required" />
</span>
<span
v-if="badge.rest"
class="truncate -ml-2.5 grow basis-0 bg-component-node-widget-background rounded-r-full max-w-max min-w-0"
class="-ml-2.5 max-w-max min-w-0 grow basis-0 truncate rounded-r-full bg-component-node-widget-background"
>
<span class="pr-2" v-text="badge.rest" />
</span>
@@ -77,7 +77,7 @@
<NodeBadge v-if="statusBadge" v-bind="statusBadge" />
<i
v-if="isPinned"
class="size-5 icon-[comfy--pin]"
class="icon-[comfy--pin] size-5"
data-testid="node-pin-indicator"
/>
</div>

10
src/renderer/extensions/vueNodes/components/NodeSlots.vue
View File

@@ -2,10 +2,10 @@
<div v-if="renderError" class="node-error p-2 text-sm text-red-500">
{{ st('nodeErrors.slots', 'Node Slots Error') }}
</div>
<div v-else :class="cn('flex justify-between min-w-0', unifiedWrapperClass)">
<div v-else :class="cn('flex min-w-0 justify-between', unifiedWrapperClass)">
<div
v-if="filteredInputs.length"
:class="cn('flex flex-col min-w-0', unifiedDotsClass)"
:class="cn('flex min-w-0 flex-col', unifiedDotsClass)"
>
<InputSlot
v-for="(input, index) in filteredInputs"
@@ -19,7 +19,7 @@
<div
v-if="nodeData?.outputs?.length"
:class="cn('ml-auto flex flex-col min-w-0', unifiedDotsClass)"
:class="cn('ml-auto flex min-w-0 flex-col', unifiedDotsClass)"
>
<OutputSlot
v-for="(output, index) in nodeData.outputs"
@@ -68,13 +68,13 @@ const filteredInputs = computed(() => [
const unifiedWrapperClass = computed((): string =>
cn(
unified &&
'absolute inset-0 items-center pointer-events-none opacity-0 z-30'
'pointer-events-none absolute inset-0 z-30 items-center opacity-0'
)
)
const unifiedDotsClass = computed((): string =>
cn(
unified &&
'grid grid-cols-1 grid-rows-1 gap-0 *:row-span-full *:col-span-full place-items-center'
'grid grid-cols-1 grid-rows-1 place-items-center gap-0 *:col-span-full *:row-span-full'
)
)

4
src/renderer/extensions/vueNodes/components/NodeWidgets.vue
View File

@@ -33,7 +33,7 @@
<div
:class="
cn(
'z-10 w-3 opacity-0 transition-opacity duration-150 group-hover:opacity-100 flex items-stretch',
'z-10 flex w-3 items-stretch opacity-0 transition-opacity duration-150 group-hover:opacity-100',
widget.slotMetadata?.linked && 'opacity-100'
)
"
@@ -64,7 +64,7 @@
:class="
cn(
'col-span-2',
widget.hasError && 'text-node-stroke-error font-bold'
widget.hasError && 'font-bold text-node-stroke-error'
)
"
@update:model-value="widget.updateHandler"

4
src/renderer/extensions/vueNodes/components/OutputSlot.vue
View File

@@ -1,7 +1,7 @@
<template>
<div v-if="renderError" class="node-error p-1 text-xs text-red-500">⚠️</div>
<div v-else v-tooltip.right="tooltipConfig" :class="slotWrapperClass">
<div class="relative h-full flex items-center min-w-0">
<div class="relative flex h-full min-w-0 items-center">
<!-- Slot Name -->
<span
v-if="!props.dotOnly && !hasNoLabel"
@@ -97,7 +97,7 @@ const shouldDim = computed(() => {
const slotWrapperClass = computed(() =>
cn(
'lg-slot lg-slot--output flex items-center justify-end group rounded-l-lg h-6',
'lg-slot lg-slot--output group flex h-6 items-center justify-end rounded-l-lg',
'cursor-crosshair',
dotOnly.value ? 'lg-slot--dot-only justify-center' : 'pl-6',
{

8
src/renderer/extensions/vueNodes/components/SlotConnectionDot.vue
View File

@@ -46,13 +46,13 @@ const isListShape = computed(() => props.slotData?.shape === RenderShape.GRID)
const slotClass = computed(() =>
cn(
'bg-slate-300 slot-dot',
'slot-dot bg-slate-300',
isListShape.value ? 'rounded-[1px]' : 'rounded-full',
'transition-all duration-150',
'border border-solid border-node-component-slot-dot-outline',
props.multi
? 'w-3 h-6'
: 'size-3 cursor-crosshair group-hover/slot:[--node-component-slot-dot-outline-opacity-mult:5] group-hover/slot:scale-125'
? 'h-6 w-3'
: 'size-3 cursor-crosshair group-hover/slot:scale-125 group-hover/slot:[--node-component-slot-dot-outline-opacity-mult:5]'
)
)
</script>
@@ -61,7 +61,7 @@ const slotClass = computed(() =>
<div
:class="
cn(
'after:absolute after:inset-y-0 after:w-5/2 relative size-6 flex items-center justify-center group/slot',
'group/slot relative flex size-6 items-center justify-center after:absolute after:inset-y-0 after:w-5/2',
props.class
)
"

12
src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue
View File

@@ -51,10 +51,10 @@ const controlMode = defineModel<ControlOptions>()
</script>
<template>
<div class="w-113 max-w-md p-4 space-y-4">
<div class="w-113 max-w-md space-y-4 p-4">
<div class="text-sm/tight text-muted-foreground">
{{ $t('widgets.valueControl.header.prefix') }}
<span class="text-base-foreground font-medium">
<span class="font-medium text-base-foreground">
{{
widgetControlMode === 'before'
? $t('widgets.valueControl.header.before')
@@ -71,12 +71,12 @@ const controlMode = defineModel<ControlOptions>()
as="label"
variant="textonly"
size="lg"
class="flex w-full h-[unset] text-left items-center justify-between py-2 gap-7"
class="flex h-[unset] w-full items-center justify-between gap-7 py-2 text-left"
:for="option.mode"
>
<div class="flex items-center gap-2 flex-1 min-w-0 text-wrap">
<div class="flex min-w-0 flex-1 items-center gap-2 text-wrap">
<div
class="flex items-center justify-center size-8 rounded-lg shrink-0 bg-secondary-background border border-border-subtle"
class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-border-subtle bg-secondary-background"
>
<i
v-if="option.icon"
@@ -91,7 +91,7 @@ const controlMode = defineModel<ControlOptions>()
</span>
</div>
<div class="flex flex-col gap-0.5 min-w-0 flex-1">
<div class="flex min-w-0 flex-1 flex-col gap-0.5">
<div class="text-sm/tight font-normal text-base-foreground">
<span>
{{ $t(`widgets.valueControl.${option.title}`) }}

2
src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col gap-1">
<Button
class="text-base-foreground w-full border-0 bg-component-node-widget-background p-2"
class="w-full border-0 bg-component-node-widget-background p-2 text-base-foreground"
:aria-label="widget.label"
size="sm"
variant="textonly"

4
src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
View File

@@ -3,7 +3,7 @@
<WidgetLayoutField :widget="widget">
<label
:class="
cn(WidgetInputBaseClass, 'flex items-center gap-2 w-full px-4 py-2')
cn(WidgetInputBaseClass, 'flex w-full items-center gap-2 px-4 py-2')
"
>
<ColorPicker
@@ -17,7 +17,7 @@
@update:model-value="onPickerUpdate"
/>
<span
class="text-xs truncate min-w-[4ch]"
class="min-w-[4ch] truncate text-xs"
data-testid="widget-color-text"
>{{ toHexFromFormat(localValue, format) }}</span
>

4
src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberGradientSlider.vue
View File

@@ -1,6 +1,6 @@
<template>
<WidgetLayoutField :widget="widget">
<div :class="cn(WidgetInputBaseClass, 'flex items-center gap-2 pl-3 pr-2')">
<div :class="cn(WidgetInputBaseClass, 'flex items-center gap-2 pr-2 pl-3')">
<GradientSlider
v-model="modelValue"
:stops="gradientStops"
@@ -9,7 +9,7 @@
:step="stepValue"
:disabled="widget.options?.disabled"
:aria-label="widget.name"
class="flex-1 min-w-0"
class="min-w-0 flex-1"
/>
<InputNumber
:key="timesEmptied"

6
src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue
View File

@@ -170,7 +170,7 @@ const inputAriaAttrs = computed(() => ({
:hide-buttons="buttonsDisabled"
:parse-value="parseWidgetValue"
:input-attrs="inputAriaAttrs"
:class="cn(WidgetInputBaseClass, 'grow text-xs flex h-7 relative')"
:class="cn(WidgetInputBaseClass, 'relative flex h-7 grow text-xs')"
@keydown.up.prevent="updateValueBy(stepValue)"
@keydown.down.prevent="updateValueBy(-stepValue)"
@keydown.page-up.prevent="updateValueBy(10 * stepValue)"
@@ -178,10 +178,10 @@ const inputAriaAttrs = computed(() => ({
>
<template #background>
<div
class="absolute size-full rounded-lg pointer-events-none overflow-clip"
class="pointer-events-none absolute size-full overflow-clip rounded-lg"
>
<div
class="bg-primary-background/15 size-full"
class="size-full bg-primary-background/15"
:style="{ width: `${sliderWidth}%` }"
/>
</div>

2
src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
View File

@@ -1,6 +1,6 @@
<template>
<WidgetLayoutField :widget="widget">
<div :class="cn(WidgetInputBaseClass, 'flex items-center gap-2 pl-3 pr-2')">
<div :class="cn(WidgetInputBaseClass, 'flex items-center gap-2 pr-2 pl-3')">
<Slider
:model-value="[modelValue]"
v-bind="filteredProps"

4
src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
View File

@@ -4,7 +4,7 @@
<Loader
v-if="loading"
size="sm"
class="absolute left-3 top-1/2 z-10 -translate-y-1/2 text-component-node-foreground"
class="absolute top-1/2 left-3 z-10 -translate-y-1/2 text-component-node-foreground"
/>
<InputText
v-model="modelValue"
@@ -13,7 +13,7 @@
cn(
WidgetInputBaseClass,
'w-full px-4 hover:bg-component-node-widget-background-hovered',
size === 'large' ? 'text-sm py-3' : 'text-xs py-2',
size === 'large' ? 'py-3 text-sm' : 'py-2 text-xs',
loading && 'pl-9'
)
"

14
src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
View File

@@ -2,7 +2,7 @@
<div class="relative" @pointerdown.stop>
<div class="mb-4">
<Button
class="text-base-foreground w-full border-0 bg-secondary-background hover:bg-secondary-background-hover"
class="w-full border-0 bg-secondary-background text-base-foreground hover:bg-secondary-background-hover"
:disabled="isRecording || readonly"
@click="handleStartRecording"
>
@@ -12,7 +12,7 @@
</div>
<div
v-if="isRecording || isPlaying || recordedURL"
class="flex h-14 w-full min-w-0 items-center gap-2 rounded-lg px-3 bg-node-component-surface text-text-secondary"
class="flex h-14 w-full min-w-0 items-center gap-2 rounded-lg bg-node-component-surface px-3 text-text-secondary"
>
<!-- Recording Status -->
<div class="flex shrink-0 items-center gap-1">
@@ -45,7 +45,7 @@
<button
v-if="isRecording"
:title="t('g.stopRecording', 'Stop Recording')"
class="flex shrink-0 size-8 animate-pulse items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
class="flex size-8 shrink-0 animate-pulse items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
@click="handleStopRecording"
>
<div class="size-2.5 rounded-sm bg-danger-100" />
@@ -54,19 +54,19 @@
<button
v-else-if="!isRecording && recordedURL && !isPlaying"
:title="t('g.playRecording') || 'Play Recording'"
class="flex shrink-0 size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
class="flex size-8 shrink-0 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
@click="handlePlayRecording"
>
<i class="text-text-secondary icon-[lucide--play] size-4" />
<i class="icon-[lucide--play] size-4 text-text-secondary" />
</button>
<button
v-else-if="isPlaying"
:title="t('g.stopPlayback') || 'Stop Playback'"
class="flex shrink-0 size-8 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
class="flex size-8 shrink-0 items-center justify-center rounded-full border-0 bg-smoke-500/33 transition-colors"
@click="handleStopPlayback"
>
<i class="text-text-secondary icon-[lucide--square] size-4" />
<i class="icon-[lucide--square] size-4 text-text-secondary" />
</button>
</div>
<audio

4
src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue
View File

@@ -13,7 +13,7 @@
: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"
@@ -24,7 +24,7 @@
/>
</template>
</SelectPlus>
<div class="absolute top-5 right-8 h-4 w-7 -translate-y-4/5 flex">
<div class="absolute top-5 right-8 flex h-4 w-7 -translate-y-4/5">
<slot />
</div>
</WidgetLayoutField>

8
src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
View File

@@ -2,7 +2,7 @@
<div
:class="
cn(
'group relative rounded-lg hover:bg-component-node-widget-background-hovered focus-within:ring focus-within:ring-component-node-widget-background-highlighted transition-all',
'group relative rounded-lg transition-all focus-within:ring focus-within:ring-component-node-widget-background-highlighted hover:bg-component-node-widget-background-hovered',
widget.borderStyle
)
"
@@ -10,7 +10,7 @@
<label
v-if="!hideLayoutField"
:for="id"
class="pointer-events-none absolute left-3 top-1.5 z-10 text-xxs text-muted-foreground"
class="pointer-events-none absolute top-1.5 left-3 z-10 text-xxs text-muted-foreground"
>
{{ displayName }}
</label>
@@ -21,7 +21,7 @@
:class="
cn(
WidgetInputBaseClass,
'size-full text-xs resize-none',
'size-full resize-none text-xs',
!hideLayoutField && 'pt-5'
)
"
@@ -37,7 +37,7 @@
v-if="isReadOnly"
variant="textonly"
size="icon"
class="invisible absolute top-1.5 right-1.5 z-10 hover:bg-base-foreground/10 group-hover:visible group-focus-within:visible"
class="invisible absolute top-1.5 right-1.5 z-10 group-focus-within:visible group-hover:visible hover:bg-base-foreground/10"
:title="$t('g.copyToClipboard')"
:aria-label="$t('g.copyToClipboard')"
@click="handleCopy"

2
src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.vue
View File

@@ -9,7 +9,7 @@
:class="
cn(
WidgetInputBaseClass,
'w-full min-w-0 p-1 flex items-center justify-center gap-1'
'flex w-full min-w-0 items-center justify-center gap-1 p-1'
)
"
@update:model-value="(v) => handleOptionChange(v as string)"

4
src/renderer/extensions/vueNodes/widgets/components/WidgetWithControl.vue
View File

@@ -45,10 +45,10 @@ watch(controlModel, props.widget.controlWidget.update)
<Button
variant="textonly"
size="sm"
class="h-4 w-7 p-0 self-center rounded-xl bg-primary-background/30 hover:bg-primary-background-hover/30"
class="h-4 w-7 self-center rounded-xl bg-primary-background/30 p-0 hover:bg-primary-background-hover/30"
>
<i
:class="`${controlButtonIcon} text-primary-background text-xs w-full`"
:class="`${controlButtonIcon} w-full text-xs text-primary-background`"
/>
</Button>
</template>

4
src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
View File

@@ -2,7 +2,7 @@
<div class="relative" @pointerdown.stop>
<div
v-if="!hideWhenEmpty || modelValue"
class="bg-component-node-widget-background box-border flex gap-4 items-center justify-start relative rounded-lg w-full h-16 px-4 py-0"
class="relative box-border flex h-16 w-full items-center justify-start gap-4 rounded-lg bg-component-node-widget-background px-4 py-0"
>
<!-- Hidden audio element -->
<audio
@@ -108,7 +108,7 @@
popup
class="audio-player-menu"
:pt:root:class="
cn('bg-component-node-widget-background border-component-node-border')
cn('border-component-node-border bg-component-node-widget-background')
"
:pt:submenu:class="cn('bg-component-node-widget-background')"
>

14
src/renderer/extensions/vueNodes/widgets/components/form/FormSearchInput.vue
View File

@@ -65,9 +65,9 @@ function handleFocus(event: FocusEvent) {
:class="
cn(
'group',
'bg-component-node-widget-background rounded-lg transition-all duration-150',
'flex-1 flex items-center',
'text-base-foreground border-0',
'rounded-lg bg-component-node-widget-background transition-all duration-150',
'flex flex-1 items-center',
'border-0 text-base-foreground',
'focus-within:ring focus-within:ring-component-node-widget-background-highlighted/80',
customClass
)
@@ -76,27 +76,27 @@ function handleFocus(event: FocusEvent) {
<i
:class="
cn(
'size-4 ml-2 shrink-0 transition-colors duration-150',
'ml-2 size-4 shrink-0 transition-colors duration-150',
isQuerying
? 'icon-[lucide--loader-circle] animate-spin'
: 'icon-[lucide--search]',
searchQuery?.trim() !== ''
? 'text-base-foreground'
: 'text-muted-foreground group-hover:text-base-foreground group-focus-within:text-base-foreground'
: 'text-muted-foreground group-focus-within:text-base-foreground group-hover:text-base-foreground'
)
"
/>
<input
v-model="searchQuery"
type="text"
class="bg-transparent border-0 outline-0 ring-0 h-5 w-full my-1.5 mx-2 min-w-0"
class="mx-2 my-1.5 h-5 w-full min-w-0 border-0 bg-transparent ring-0 outline-0"
:placeholder="$t('g.searchPlaceholder', { subject: '' })"
:autofocus
@focus="handleFocus"
/>
<button
v-if="searchQuery.trim().length > 0"
class="text-muted-foreground hover:text-base-foreground bg-transparent shrink-0 border-0 outline-0 ring-0 p-0 m-0 pr-3 pl-1 flex items-center justify-center transition-all duration-150 hover:scale-108"
class="m-0 flex shrink-0 items-center justify-center border-0 bg-transparent p-0 pr-3 pl-1 text-muted-foreground ring-0 outline-0 transition-all duration-150 hover:scale-108 hover:text-base-foreground"
:aria-label="$t('g.clear')"
@click="searchQuery = ''"
>

8
src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
:class="
cn(WidgetInputBaseClass, 'w-full p-1 flex min-w-0 items-center gap-1')
cn(WidgetInputBaseClass, 'flex w-full min-w-0 items-center gap-1 p-1')
"
>
<button
@@ -9,15 +9,15 @@
:key="getOptionValue(option, index)"
:class="
cn(
'flex-1 min-w-0 h-6 px-5 py-[5px] rounded-sm flex justify-center items-center gap-1 transition-all duration-150 ease-in-out truncate',
'bg-transparent border-none',
'flex h-6 min-w-0 flex-1 items-center justify-center gap-1 truncate rounded-sm px-5 py-[5px] transition-all duration-150 ease-in-out',
'border-none bg-transparent',
'text-center text-xs font-normal',
{
'bg-interface-menu-component-surface-selected':
isSelected(index) && !disabled,
'hover:bg-interface-menu-component-surface-selected/50':
!isSelected(index) && !disabled,
'opacity-50 cursor-not-allowed': disabled,
'cursor-not-allowed opacity-50': disabled,
'cursor-pointer': !disabled
},
isSelected(index) && !disabled

14
src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue
View File

@@ -43,10 +43,10 @@ const selectedItems = computed(() => {
const theButtonStyle = computed(() =>
cn(
'border-0 bg-component-node-widget-background outline-none text-text-secondary',
'border-0 bg-component-node-widget-background text-text-secondary outline-none',
disabled
? 'cursor-not-allowed'
: 'hover:bg-component-node-widget-background-hovered cursor-pointer',
: 'cursor-pointer hover:bg-component-node-widget-background-hovered',
selectedItems.value.length > 0 && 'text-text-primary'
)
)
@@ -56,7 +56,7 @@ const theButtonStyle = computed(() =>
<div
:class="
cn(WidgetInputBaseClass, 'flex text-base leading-none', {
'opacity-50 cursor-not-allowed outline-node-component-border': disabled
'cursor-not-allowed opacity-50 outline-node-component-border': disabled
})
"
>
@@ -64,7 +64,7 @@ const theButtonStyle = computed(() =>
:class="
cn(
theButtonStyle,
'flex justify-between items-center flex-1 min-w-0 h-8',
'flex h-8 min-w-0 flex-1 items-center justify-between',
{
'rounded-l-lg': uploadable,
'rounded-lg': !uploadable
@@ -73,7 +73,7 @@ const theButtonStyle = computed(() =>
"
@click="emit('select-click', $event)"
>
<span class="min-w-0 flex-1 px-1 py-2 text-left truncate">
<span class="min-w-0 flex-1 truncate px-1 py-2 text-left">
<span v-if="!selectedItems.length">
{{ placeholder }}
</span>
@@ -85,7 +85,7 @@ const theButtonStyle = computed(() =>
class="icon-[lucide--chevron-down]"
:class="
cn(
'mr-2 size-4 transition-transform duration-200 shrink-0 text-component-node-foreground-secondary',
'mr-2 size-4 shrink-0 text-component-node-foreground-secondary transition-transform duration-200',
isOpen && 'rotate-180'
)
"
@@ -97,7 +97,7 @@ const theButtonStyle = computed(() =>
cn(
theButtonStyle,
'relative',
'size-8 flex justify-center items-center border-l rounded-r-lg border-node-component-border'
'flex size-8 items-center justify-center rounded-r-lg border-l border-node-component-border'
)
"
>

20
src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
View File

@@ -42,7 +42,7 @@ const baseModelSelected = defineModel<Set<string>>('baseModelSelected', {
})
const actionButtonStyle = cn(
'h-8 bg-zinc-500/20 rounded-lg outline-1 -outline-offset-1 outline-node-component-border transition-all duration-150'
'h-8 rounded-lg bg-zinc-500/20 outline-1 -outline-offset-1 outline-node-component-border transition-all duration-150'
)
const layoutSwitchItemStyle =
@@ -114,7 +114,7 @@ function toggleBaseModelSelection(item: FilterOption) {
cn(
actionButtonStyle,
'hover:outline-component-node-widget-background-highlighted/80',
'focus-within:outline-component-node-widget-background-highlighted/80 focus-within:ring-0'
'focus-within:ring-0 focus-within:outline-component-node-widget-background-highlighted/80'
)
"
/>
@@ -155,7 +155,7 @@ function toggleBaseModelSelection(item: FilterOption) {
<div
:class="
cn(
'flex flex-col gap-2 p-2 min-w-32',
'flex min-w-32 flex-col gap-2 p-2',
'bg-component-node-background',
'rounded-lg outline -outline-offset-1 outline-component-node-border'
)
@@ -166,7 +166,7 @@ function toggleBaseModelSelection(item: FilterOption) {
:key="item.name"
variant="textonly"
size="unset"
:class="cn('flex justify-between items-center h-6 text-left')"
:class="cn('flex h-6 items-center justify-between text-left')"
@click="handleSortSelected(item)"
>
<span>{{ item.name }}</span>
@@ -217,7 +217,7 @@ function toggleBaseModelSelection(item: FilterOption) {
<div
:class="
cn(
'flex flex-col gap-2 p-2 min-w-32',
'flex min-w-32 flex-col gap-2 p-2',
'bg-component-node-background',
'rounded-lg outline -outline-offset-1 outline-component-node-border'
)
@@ -228,7 +228,7 @@ function toggleBaseModelSelection(item: FilterOption) {
:key="item.value"
variant="textonly"
size="unset"
:class="cn('flex justify-between items-center h-6 text-left')"
:class="cn('flex h-6 items-center justify-between text-left')"
@click="handleOwnershipSelected(item)"
>
<span>{{ item.name }}</span>
@@ -279,7 +279,7 @@ function toggleBaseModelSelection(item: FilterOption) {
<div
:class="
cn(
'flex flex-col gap-2 p-2 min-w-32',
'flex min-w-32 flex-col gap-2 p-2',
'bg-component-node-background',
'rounded-lg outline -outline-offset-1 outline-component-node-border'
)
@@ -290,7 +290,7 @@ function toggleBaseModelSelection(item: FilterOption) {
:key="item.value"
variant="textonly"
size="unset"
:class="cn('flex justify-between items-center h-6 text-left')"
:class="cn('flex h-6 items-center justify-between text-left')"
@click="toggleBaseModelSelection(item)"
>
<span>{{ item.name }}</span>
@@ -303,7 +303,7 @@ function toggleBaseModelSelection(item: FilterOption) {
<Button
variant="textonly"
size="unset"
:class="cn('flex justify-between items-center h-6 text-left')"
:class="cn('flex h-6 items-center justify-between text-left')"
@click="baseModelSelected = new Set()"
>
{{ t('g.clearFilters') }}
@@ -315,7 +315,7 @@ function toggleBaseModelSelection(item: FilterOption) {
:class="
cn(
actionButtonStyle,
'flex justify-center items-center p-1 gap-1 hover:outline-component-node-widget-background-highlighted'
'flex items-center justify-center gap-1 p-1 hover:outline-component-node-widget-background-highlighted'
)
"
>

6
src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
View File

@@ -18,7 +18,7 @@ const singleFilterOption = computed(() => filterOptions.length === 1)
</script>
<template>
<div class="text-secondary mb-4 flex gap-1 px-4 justify-start">
<div class="text-secondary mb-4 flex justify-start gap-1 px-4">
<button
v-for="option in filterOptions"
:key="option.value"
@@ -26,9 +26,9 @@ const singleFilterOption = computed(() => filterOptions.length === 1)
:disabled="singleFilterOption"
:class="
cn(
'px-4 py-2 rounded-md inline-flex justify-center items-center select-none appearance-none border-0 text-base-foreground',
'inline-flex appearance-none items-center justify-center rounded-md border-0 px-4 py-2 text-base-foreground select-none',
!singleFilterOption &&
'transition-all duration-150 hover:text-base-foreground hover:bg-interface-menu-component-surface-hovered cursor-pointer active:scale-95',
'cursor-pointer transition-all duration-150 hover:bg-interface-menu-component-surface-hovered hover:text-base-foreground active:scale-95',
!singleFilterOption && filterSelected === option.value
? 'bg-interface-menu-component-surface-selected! text-base-foreground'
: 'bg-transparent'

18
src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
View File

@@ -55,13 +55,13 @@ function handleVideoLoad(event: Event) {
<div
:class="
cn(
'flex gap-1 select-none group/item cursor-pointer bg-component-node-widget-background',
'group/item flex cursor-pointer gap-1 bg-component-node-widget-background select-none',
'transition-[transform,box-shadow,background-color] duration-150',
{
'flex-col text-center': layout === 'grid',
'flex-row text-left max-h-16 rounded-lg hover:scale-102 active:scale-98':
'max-h-16 flex-row rounded-lg text-left hover:scale-102 active:scale-98':
layout === 'list',
'flex-row text-left hover:bg-component-node-widget-background-hovered rounded-lg':
'flex-row rounded-lg text-left hover:bg-component-node-widget-background-hovered':
layout === 'list-small',
// selection
'ring-2 ring-component-node-widget-background-highlighted':
@@ -77,10 +77,10 @@ function handleVideoLoad(event: Event) {
:class="
cn(
'relative',
'w-full aspect-square overflow-hidden outline-1 -outline-offset-1 outline-interface-stroke',
'aspect-square w-full overflow-hidden outline-1 -outline-offset-1 outline-interface-stroke',
'transition-[transform,box-shadow] duration-150',
{
'min-w-16 max-w-16 rounded-l-lg': layout === 'list',
'max-w-16 min-w-16 rounded-l-lg': layout === 'list',
'rounded-sm group-hover/item:scale-108 group-active/item:scale-95':
layout === 'grid',
// selection
@@ -96,7 +96,7 @@ function handleVideoLoad(event: Event) {
class="absolute top-1 left-1 size-4 rounded-full border border-base-foreground bg-primary-background"
>
<i
class="icon-[lucide--check] size-3 translate-y-[-0.5px] text-base-foreground bold"
class="bold icon-[lucide--check] size-3 translate-y-[-0.5px] text-base-foreground"
/>
</div>
<video
@@ -125,8 +125,8 @@ function handleVideoLoad(event: Event) {
:class="
cn('flex gap-1', {
'flex-col': layout === 'grid',
'flex-col px-4 py-1 w-full justify-center min-w-0': layout === 'list',
'flex-row p-2 items-center justify-between w-full':
'w-full min-w-0 flex-col justify-center px-4 py-1': layout === 'list',
'w-full flex-row items-center justify-between p-2':
layout === 'list-small'
})
"
@@ -135,7 +135,7 @@ function handleVideoLoad(event: Event) {
v-tooltip="layout === 'grid' ? (label ?? name) : undefined"
:class="
cn(
'block text-xs line-clamp-2 wrap-break-word overflow-hidden',
'line-clamp-2 block overflow-hidden text-xs wrap-break-word',
'transition-colors duration-150',
// selection
!!selected && 'text-base-foreground'

6
src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
View File

@@ -18,12 +18,12 @@ const hideLayoutField = useHideLayoutField()
<div
:class="
cn(
'grid grid-cols-subgrid min-w-0 justify-between gap-1 text-node-component-slot-text',
'grid min-w-0 grid-cols-subgrid justify-between gap-1 text-node-component-slot-text',
rootClass
)
"
>
<div v-if="!hideLayoutField" class="truncate content-center-safe">
<div v-if="!hideLayoutField" class="content-center-safe truncate">
<template v-if="widget.name">
{{ widget.label || widget.name }}
</template>
@@ -33,7 +33,7 @@ const hideLayoutField = useHideLayoutField()
<div
:class="
cn(
'cursor-default min-w-0 rounded-lg focus-within:ring focus-within:ring-component-node-widget-background-highlighted transition-all',
'min-w-0 cursor-default rounded-lg transition-all focus-within:ring focus-within:ring-component-node-widget-background-highlighted',
widget.borderStyle
)
"

2
src/renderer/extensions/vueNodes/widgets/composables/useNumberWidgetButtonPt.ts
View File

@@ -3,7 +3,7 @@ import { cn } from '@comfyorg/tailwind-utils'
const sharedButtonClasses = cn(
'inline-flex items-center justify-center border-0 bg-transparent text-inherit transition-colors duration-150 ease-in-out',
'hover:bg-node-component-surface-hovered active:bg-node-component-surface-selected',
'disabled:bg-node-component-disabled disabled:text-node-icon-disabled disabled:cursor-not-allowed'
'disabled:cursor-not-allowed disabled:bg-node-component-disabled disabled:text-node-icon-disabled'
)
export function useNumberWidgetButtonPt(options?: {