Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-26 17:30:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Lint: Add tailwind linter (#5984)

Browse Source 
## Summary

Adds the [tailwind lint
plugin](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#eslint-plugin-tailwindcss)
and fixes the currently fixable rules ([v4 is still in
beta](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#about-tailwind-css-4-support)).

## Changes

- **What**: Enforces things like consistent class order, and eventually
can prohibit extra classes that could be utilities instead
- **Dependencies**: The plugin and its types

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5984-Lint-Add-tailwind-linter-2866d73d365081d89db0d998232533bb)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
This commit is contained in:
Alexander Brown
2025-10-08 19:39:14 -07:00
committed by GitHub
parent c9da8b200d
commit b943c0fa75
177 changed files with 731 additions and 652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/load3d/Load3D.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="relative w-full h-full"
class="relative h-full w-full"
@mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave"
>
@@ -59,14 +59,14 @@
/>
<div
v-if="enable3DViewer"
class="absolute top-12 right-2 z-20 pointer-events-auto"
class="pointer-events-auto absolute top-12 right-2 z-20"
>
<ViewerControls :node="node" />
</div>
<div
v-if="showRecordingControls"
class="absolute right-2 z-20 pointer-events-auto"
class="pointer-events-auto absolute right-2 z-20"
:class="{
'top-12': !enable3DViewer,
'top-24': enable3DViewer

6
src/components/load3d/Load3DAnimation.vue
View File

@@ -1,6 +1,6 @@
<template>
<div
class="relative w-full h-full"
class="relative h-full w-full"
@mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave"
>
@@ -34,7 +34,7 @@
@up-direction-change="listenUpDirectionChange"
@recording-status-change="listenRecordingStatusChange"
/>
<div class="absolute top-0 left-0 w-full h-full pointer-events-none">
<div class="pointer-events-none absolute top-0 left-0 h-full w-full">
<Load3DControls
:input-spec="inputSpec"
:background-color="backgroundColor"
@@ -69,7 +69,7 @@
</div>
<div
v-if="showRecordingControls"
class="absolute top-12 right-2 z-20 pointer-events-auto"
class="pointer-events-auto absolute top-12 right-2 z-20"
>
<RecordingControls
:node="node"

4
src/components/load3d/Load3DAnimationControls.vue
View File

@@ -1,11 +1,11 @@
<template>
<div
v-if="animations && animations.length > 0"
class="absolute top-0 left-0 w-full flex justify-center pt-2 gap-2 items-center pointer-events-auto z-10"
class="pointer-events-auto absolute top-0 left-0 z-10 flex w-full items-center justify-center gap-2 pt-2"
>
<Button class="p-button-rounded p-button-text" @click="togglePlay">
<i
:class="['pi', playing ? 'pi-pause' : 'pi-play', 'text-white text-lg']"
:class="['pi', playing ? 'pi-pause' : 'pi-play', 'text-lg text-white']"
/>
</Button>

14
src/components/load3d/Load3DControls.vue
View File

@@ -1,21 +1,21 @@
<template>
<div
class="absolute top-12 left-2 flex flex-col pointer-events-auto z-20 bg-gray-700/30 rounded-lg"
class="pointer-events-auto absolute top-12 left-2 z-20 flex flex-col rounded-lg bg-gray-700/30"
>
<div class="relative show-menu">
<div class="show-menu relative">
<Button class="p-button-rounded p-button-text" @click="toggleMenu">
<i class="pi pi-bars text-white text-lg" />
<i class="pi pi-bars text-lg text-white" />
</Button>
<div
v-show="isMenuOpen"
class="absolute left-12 top-0 bg-black/50 rounded-lg shadow-lg"
class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
>
<div class="flex flex-col">
<Button
v-for="category in availableCategories"
:key="category"
class="p-button-text w-full flex items-center justify-start"
class="p-button-text flex w-full items-center justify-start"
:class="{ 'bg-gray-600': activeCategory === category }"
@click="selectCategory(category)"
>
@@ -26,7 +26,7 @@
</div>
</div>
<div v-show="activeCategory" class="bg-gray-700/30 rounded-lg">
<div v-show="activeCategory" class="rounded-lg bg-gray-700/30">
<SceneControls
v-if="activeCategory === 'scene'"
ref="sceneControlsRef"
@@ -81,7 +81,7 @@
:class="[
'pi',
showPreview ? 'pi-eye' : 'pi-eye-slash',
'text-white text-lg'
'text-lg text-white'
]"
/>
</Button>

2
src/components/load3d/Load3DScene.vue
View File

@@ -1,5 +1,5 @@
<template>
<div ref="container" class="w-full h-full relative comfy-load-3d">
<div ref="container" class="comfy-load-3d relative h-full w-full">
<LoadingOverlay ref="loadingOverlayRef" />
</div>
</template>

16
src/components/load3d/Load3dViewerContent.vue
View File

@@ -6,18 +6,18 @@
@mouseenter="viewer.handleMouseEnter"
@mouseleave="viewer.handleMouseLeave"
>
<div ref="mainContentRef" class="flex-1 relative">
<div ref="mainContentRef" class="relative flex-1">
<div
ref="containerRef"
class="absolute w-full h-full comfy-load-3d-viewer"
class="comfy-load-3d-viewer absolute h-full w-full"
@resize="viewer.handleResize"
/>
</div>
<div class="w-72 flex flex-col">
<div class="flex w-72 flex-col">
<div class="flex-1 overflow-y-auto p-4">
<div class="space-y-2">
<div class="p-2 space-y-4">
<div class="space-y-4 p-2">
<SceneControls
v-model:background-color="viewer.backgroundColor.value"
v-model:show-grid="viewer.showGrid.value"
@@ -26,27 +26,27 @@
/>
</div>
<div class="p-2 space-y-4">
<div class="space-y-4 p-2">
<ModelControls
v-model:up-direction="viewer.upDirection.value"
v-model:material-mode="viewer.materialMode.value"
/>
</div>
<div class="p-2 space-y-4">
<div class="space-y-4 p-2">
<CameraControls
v-model:camera-type="viewer.cameraType.value"
v-model:fov="viewer.fov.value"
/>
</div>
<div class="p-2 space-y-4">
<div class="space-y-4 p-2">
<LightControls
v-model:light-intensity="viewer.lightIntensity.value"
/>
</div>
<div class="p-2 space-y-4">
<div class="space-y-4 p-2">
<ExportControls @export-model="viewer.exportModel" />
</div>
</div>

4
src/components/load3d/LoadingOverlay.vue
View File

@@ -2,11 +2,11 @@
<Transition name="fade">
<div
v-if="modelLoading"
class="absolute inset-0 bg-black/50 flex items-center justify-center z-50"
class="absolute inset-0 z-50 flex items-center justify-center bg-black/50"
>
<div class="flex flex-col items-center">
<div class="spinner" />
<div class="text-white mt-4 text-lg">
<div class="mt-4 text-lg text-white">
{{ loadingMessage }}
</div>
</div>

8
src/components/load3d/controls/CameraControls.vue
View File

@@ -6,19 +6,19 @@
value: t('load3d.switchCamera'),
showDelay: 300
}"
:class="['pi', getCameraIcon, 'text-white text-lg']"
:class="['pi', getCameraIcon, 'text-lg text-white']"
/>
</Button>
<div v-if="showFOVButton" class="relative show-fov">
<div v-if="showFOVButton" class="show-fov relative">
<Button class="p-button-rounded p-button-text" @click="toggleFOV">
<i
v-tooltip.right="{ value: t('load3d.fov'), showDelay: 300 }"
class="pi pi-expand text-white text-lg"
class="pi pi-expand text-lg text-white"
/>
</Button>
<div
v-show="showFOV"
class="absolute left-12 top-0 bg-black/50 p-4 rounded-lg shadow-lg"
class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg"
style="width: 150px"
>
<Slider

6
src/components/load3d/controls/ExportControls.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col">
<div class="relative show-export-formats">
<div class="show-export-formats relative">
<Button
class="p-button-rounded p-button-text"
@click="toggleExportFormats"
@@ -10,12 +10,12 @@
value: t('load3d.exportModel'),
showDelay: 300
}"
class="pi pi-download text-white text-lg"
class="pi pi-download text-lg text-white"
/>
</Button>
<div
v-show="showExportFormats"
class="absolute left-12 top-0 bg-black/50 rounded-lg shadow-lg"
class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
>
<div class="flex flex-col">
<Button

6
src/components/load3d/controls/LightControls.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col">
<div v-if="showLightIntensityButton" class="relative show-light-intensity">
<div v-if="showLightIntensityButton" class="show-light-intensity relative">
<Button
class="p-button-rounded p-button-text"
@click="toggleLightIntensity"
@@ -10,12 +10,12 @@
value: t('load3d.lightIntensity'),
showDelay: 300
}"
class="pi pi-sun text-white text-lg"
class="pi pi-sun text-lg text-white"
/>
</Button>
<div
v-show="showLightIntensity"
class="absolute left-12 top-0 bg-black/50 p-4 rounded-lg shadow-lg"
class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg"
style="width: 150px"
>
<Slider

20
src/components/load3d/controls/ModelControls.vue
View File

@@ -1,18 +1,18 @@
<template>
<div class="flex flex-col">
<div class="relative show-up-direction">
<div class="show-up-direction relative">
<Button class="p-button-rounded p-button-text" @click="toggleUpDirection">
<i
v-tooltip.right="{
value: t('load3d.upDirection'),
showDelay: 300
}"
class="pi pi-arrow-up text-white text-lg"
class="pi pi-arrow-up text-lg text-white"
/>
</Button>
<div
v-show="showUpDirection"
class="absolute left-12 top-0 bg-black/50 rounded-lg shadow-lg"
class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
>
<div class="flex flex-col">
<Button
@@ -28,7 +28,7 @@
</div>
</div>
<div class="relative show-material-mode">
<div class="show-material-mode relative">
<Button
class="p-button-rounded p-button-text"
@click="toggleMaterialMode"
@@ -38,12 +38,12 @@
value: t('load3d.materialMode'),
showDelay: 300
}"
class="pi pi-box text-white text-lg"
class="pi pi-box text-lg text-white"
/>
</Button>
<div
v-show="showMaterialMode"
class="absolute left-12 top-0 bg-black/50 rounded-lg shadow-lg"
class="absolute top-0 left-12 rounded-lg bg-black/50 shadow-lg"
>
<div class="flex flex-col">
<Button
@@ -59,7 +59,7 @@
</div>
</div>
<div v-if="materialMode === 'lineart'" class="relative show-edge-threshold">
<div v-if="materialMode === 'lineart'" class="show-edge-threshold relative">
<Button
class="p-button-rounded p-button-text"
@click="toggleEdgeThreshold"
@@ -69,15 +69,15 @@
value: t('load3d.edgeThreshold'),
showDelay: 300
}"
class="pi pi-sliders-h text-white text-lg"
class="pi pi-sliders-h text-lg text-white"
/>
</Button>
<div
v-show="showEdgeThreshold"
class="absolute left-12 top-0 bg-black/50 p-4 rounded-lg shadow-lg"
class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg"
style="width: 150px"
>
<label class="text-white text-xs mb-1 block"
<label class="mb-1 block text-xs text-white"
>{{ t('load3d.edgeThreshold') }}: {{ edgeThreshold }}°</label
>
<Slider

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

@@ -1,5 +1,5 @@
<template>
<div class="relative bg-gray-700/30 rounded-lg">
<div class="relative rounded-lg bg-gray-700/30">
<div class="flex flex-col gap-2">
<Button
class="p-button-rounded p-button-text"
@@ -10,7 +10,7 @@
value: t('load3d.resizeNodeMatchOutput'),
showDelay: 300
}"
class="pi pi-window-maximize text-white text-lg"
class="pi pi-window-maximize text-lg text-white"
/>
</Button>
<Button
@@ -31,7 +31,7 @@
:class="[
'pi',
isRecording ? 'pi-circle-fill' : 'pi-video',
'text-white text-lg'
'text-lg text-white'
]"
/>
</Button>
@@ -46,7 +46,7 @@
value: t('load3d.exportRecording'),
showDelay: 300
}"
class="pi pi-download text-white text-lg"
class="pi pi-download text-lg text-white"
/>
</Button>
@@ -60,13 +60,13 @@
value: t('load3d.clearRecording'),
showDelay: 300
}"
class="pi pi-trash text-white text-lg"
class="pi pi-trash text-lg text-white"
/>
</Button>
<div
v-if="recordingDuration > 0 && !isRecording"
class="text-xs text-white text-center mt-1"
class="mt-1 text-center text-xs text-white"
>
{{ formatDuration(recordingDuration) }}
</div>

12
src/components/load3d/controls/SceneControls.vue
View File

@@ -7,7 +7,7 @@
>
<i
v-tooltip.right="{ value: t('load3d.showGrid'), showDelay: 300 }"
class="pi pi-table text-white text-lg"
class="pi pi-table text-lg text-white"
/>
</Button>
@@ -18,13 +18,13 @@
value: t('load3d.backgroundColor'),
showDelay: 300
}"
class="pi pi-palette text-white text-lg"
class="pi pi-palette text-lg text-white"
/>
<input
ref="colorPickerRef"
type="color"
:value="backgroundColor"
class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
class="pointer-events-none absolute m-0 h-0 w-0 p-0 opacity-0"
@input="
updateBackgroundColor(($event.target as HTMLInputElement).value)
"
@@ -39,13 +39,13 @@
value: t('load3d.uploadBackgroundImage'),
showDelay: 300
}"
class="pi pi-image text-white text-lg"
class="pi pi-image text-lg text-white"
/>
<input
ref="imagePickerRef"
type="file"
accept="image/*"
class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
class="pointer-events-none absolute m-0 h-0 w-0 p-0 opacity-0"
@change="uploadBackgroundImage"
/>
</Button>
@@ -61,7 +61,7 @@
value: t('load3d.removeBackgroundImage'),
showDelay: 300
}"
class="pi pi-times text-white text-lg"
class="pi pi-times text-lg text-white"
/>
</Button>
</div>

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

@@ -1,5 +1,5 @@
<template>
<div class="relative bg-gray-700/30 rounded-lg">
<div class="relative rounded-lg bg-gray-700/30">
<div class="flex flex-col gap-2">
<Button class="p-button-rounded p-button-text" @click="openIn3DViewer">
<i
@@ -7,7 +7,7 @@
value: t('load3d.openIn3DViewer'),
showDelay: 300
}"
class="pi pi-expand text-white text-lg"
class="pi pi-expand text-lg text-white"
/>
</Button>
</div>