Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-29 18:52:19 +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

26
src/renderer/extensions/vueNodes/VideoPreview.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
v-if="imageUrls.length > 0"
class="video-preview relative group flex flex-col items-center"
class="video-preview group relative flex flex-col items-center"
tabindex="0"
role="region"
:aria-label="$t('g.videoPreview')"
@@ -12,16 +12,16 @@
>
<!-- Video Wrapper -->
<div
class="relative rounded-[5px] overflow-hidden w-full max-w-[352px] bg-[#262729]"
class="relative w-full max-w-[352px] overflow-hidden rounded-[5px] bg-[#262729]"
>
<!-- Error State -->
<div
v-if="videoError"
class="w-full h-[352px] flex flex-col items-center justify-center text-white text-center bg-gray-800/50"
class="flex h-[352px] w-full flex-col items-center justify-center bg-gray-800/50 text-center text-white"
>
<i class="icon-[lucide--video-off] w-12 h-12 mb-2 text-gray-400" />
<i class="mb-2 icon-[lucide--video-off] h-12 w-12 text-gray-400" />
<p class="text-sm text-gray-300">{{ $t('g.videoFailedToLoad') }}</p>
<p class="text-xs text-gray-400 mt-1">
<p class="mt-1 text-xs text-gray-400">
{{ getVideoFilename(currentVideoUrl) }}
</p>
</div>
@@ -29,7 +29,7 @@
<!-- Loading State -->
<Skeleton
v-else-if="isLoading"
class="w-full h-[352px]"
class="h-[352px] w-full"
border-radius="5px"
/>
@@ -37,7 +37,7 @@
<video
v-else
:src="currentVideoUrl"
class="w-full h-[352px] object-contain block"
class="block h-[352px] w-full object-contain"
controls
loop
playsinline
@@ -49,29 +49,29 @@
<div v-if="isHovered" class="actions absolute top-2 right-2 flex gap-1">
<!-- Download Button -->
<button
class="action-btn bg-white text-black hover:bg-gray-100 rounded-lg p-2 shadow-sm transition-all duration-200 border-0 cursor-pointer"
class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-gray-100"
:title="$t('g.downloadVideo')"
:aria-label="$t('g.downloadVideo')"
@click="handleDownload"
>
<i class="icon-[lucide--download] w-4 h-4" />
<i class="icon-[lucide--download] h-4 w-4" />
</button>
<!-- Close Button -->
<button
class="action-btn bg-white text-black hover:bg-gray-100 rounded-lg p-2 shadow-sm transition-all duration-200 border-0 cursor-pointer"
class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-gray-100"
:title="$t('g.removeVideo')"
:aria-label="$t('g.removeVideo')"
@click="handleRemove"
>
<i class="icon-[lucide--x] w-4 h-4" />
<i class="icon-[lucide--x] h-4 w-4" />
</button>
</div>
<!-- Multiple Videos Navigation -->
<div
v-if="hasMultipleVideos"
class="absolute bottom-2 left-2 right-2 flex justify-center gap-1"
class="absolute right-2 bottom-2 left-2 flex justify-center gap-1"
>
<button
v-for="(_, index) in imageUrls"
@@ -90,7 +90,7 @@
<div class="relative">
<!-- Video Dimensions -->
<div class="text-white text-xs text-center mt-2">
<div class="mt-2 text-center text-xs text-white">
<span v-if="videoError" class="text-red-400">
{{ $t('g.errorLoadingVideo') }}
</span>

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

@@ -1,7 +1,7 @@
<template>
<div
v-if="imageUrls.length > 0"
class="image-preview relative group flex flex-col items-center"
class="image-preview group relative flex flex-col items-center"
data-capture-node="true"
tabindex="0"
role="region"
@@ -12,16 +12,16 @@
>
<!-- Image Wrapper -->
<div
class="relative rounded-[5px] overflow-hidden w-full max-w-[352px] bg-[#262729]"
class="relative w-full max-w-[352px] overflow-hidden rounded-[5px] bg-[#262729]"
>
<!-- Error State -->
<div
v-if="imageError"
class="w-full h-[352px] flex flex-col items-center justify-center text-white text-center bg-gray-800/50"
class="flex h-[352px] w-full flex-col items-center justify-center bg-gray-800/50 text-center text-white"
>
<i class="icon-[lucide--image-off] w-12 h-12 mb-2 text-gray-400" />
<i class="mb-2 icon-[lucide--image-off] h-12 w-12 text-gray-400" />
<p class="text-sm text-gray-300">{{ $t('g.imageFailedToLoad') }}</p>
<p class="text-xs text-gray-400 mt-1">
<p class="mt-1 text-xs text-gray-400">
{{ getImageFilename(currentImageUrl) }}
</p>
</div>
@@ -29,7 +29,7 @@
<!-- Loading State -->
<Skeleton
v-else-if="isLoading"
class="w-full h-[352px]"
class="h-[352px] w-full"
border-radius="5px"
/>
@@ -38,7 +38,7 @@
v-else
:src="currentImageUrl"
:alt="imageAltText"
class="w-full h-[352px] object-contain block"
class="block h-[352px] w-full object-contain"
@load="handleImageLoad"
@error="handleImageError"
/>
@@ -48,39 +48,39 @@
<!-- Mask/Edit Button -->
<button
v-if="!hasMultipleImages"
class="action-btn bg-white text-black hover:bg-gray-100 rounded-lg p-2 shadow-sm transition-all duration-200 border-0 cursor-pointer"
class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-gray-100"
:title="$t('g.editOrMaskImage')"
:aria-label="$t('g.editOrMaskImage')"
@click="handleEditMask"
>
<i class="icon-[lucide--venetian-mask] w-4 h-4" />
<i class="icon-[lucide--venetian-mask] h-4 w-4" />
</button>
<!-- Download Button -->
<button
class="action-btn bg-white text-black hover:bg-gray-100 rounded-lg p-2 shadow-sm transition-all duration-200 border-0 cursor-pointer"
class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-gray-100"
:title="$t('g.downloadImage')"
:aria-label="$t('g.downloadImage')"
@click="handleDownload"
>
<i class="icon-[lucide--download] w-4 h-4" />
<i class="icon-[lucide--download] h-4 w-4" />
</button>
<!-- Close Button -->
<button
class="action-btn bg-white text-black hover:bg-gray-100 rounded-lg p-2 shadow-sm transition-all duration-200 border-0 cursor-pointer"
class="action-btn cursor-pointer rounded-lg border-0 bg-white p-2 text-black shadow-sm transition-all duration-200 hover:bg-gray-100"
:title="$t('g.removeImage')"
:aria-label="$t('g.removeImage')"
@click="handleRemove"
>
<i class="icon-[lucide--x] w-4 h-4" />
<i class="icon-[lucide--x] h-4 w-4" />
</button>
</div>
<!-- Multiple Images Navigation -->
<div
v-if="hasMultipleImages"
class="absolute bottom-2 left-2 right-2 flex justify-center gap-1"
class="absolute right-2 bottom-2 left-2 flex justify-center gap-1"
>
<button
v-for="(_, index) in imageUrls"
@@ -99,7 +99,7 @@
<div class="relative">
<!-- Image Dimensions -->
<div class="text-white text-xs text-center mt-2">
<div class="mt-2 text-center text-xs text-white">
<span v-if="imageError" class="text-red-400">
{{ $t('g.errorLoadingImage') }}
</span>

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

@@ -1,5 +1,5 @@
<template>
<div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
<div v-if="renderError" class="node-error p-1 text-xs text-red-500">⚠️</div>
<div v-else v-tooltip.left="tooltipConfig" :class="slotWrapperClass">
<!-- Connection Dot -->
<SlotConnectionDot

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

@@ -1,5 +1,5 @@
<template>
<div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
<div v-if="renderError" class="node-error p-2 text-sm text-red-500">
{{ $t('Node Render Error') }}
</div>
<div
@@ -70,7 +70,7 @@
/>
<template v-if="!isCollapsed">
<div class="mb-4 relative">
<div class="relative mb-4">
<div :class="separatorClasses" />
<!-- Progress bar for executing state -->
<div
@@ -108,7 +108,7 @@
<img
:src="latestPreviewUrl"
alt="preview"
class="w-full max-h-64 object-contain"
class="max-h-64 w-full object-contain"
/>
</div>
</div>
@@ -117,7 +117,7 @@
<!-- Resize handle -->
<div
v-if="!isCollapsed"
class="absolute bottom-0 right-0 w-3 h-3 cursor-se-resize opacity-0 hover:opacity-20 hover:bg-white transition-opacity duration-200"
class="absolute right-0 bottom-0 h-3 w-3 cursor-se-resize opacity-0 transition-opacity duration-200 hover:bg-white hover:opacity-20"
@pointerdown.stop="startResize"
/>
</div>

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

@@ -1,11 +1,11 @@
<template>
<div class="scale-75">
<div
class="bg-node-component-surface lg-node absolute rounded-2xl border border-solid border-node-component-border outline-transparent -outline-offset-2 outline-2 pointer-events-none"
class="lg-node pointer-events-none absolute rounded-2xl border border-solid border-node-component-border bg-node-component-surface outline-2 -outline-offset-2 outline-transparent"
>
<NodeHeader :node-data="nodeData" :readonly="readonly" />
<div class="bg-node-component-border h-px mx-0 w-full mb-4" />
<div class="mx-0 mb-4 h-px w-full bg-node-component-border" />
<div class="flex flex-col gap-4 pb-4">
<NodeSlots

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

@@ -1,5 +1,5 @@
<template>
<div
class="lod-fallback absolute inset-0 w-full h-full bg-node-component-widget-skeleton-surface"
class="lod-fallback absolute inset-0 h-full w-full bg-node-component-widget-skeleton-surface"
></div>
</template>

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

@@ -1,5 +1,5 @@
<template>
<div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
<div v-if="renderError" class="node-error p-2 text-sm text-red-500">
{{ $t('Node Content Error') }}
</div>
<div v-else class="lg-node-content">

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

@@ -1,5 +1,5 @@
<template>
<div v-if="renderError" class="node-error p-4 text-red-500 text-sm">
<div v-if="renderError" class="node-error p-4 text-sm text-red-500">
{{ $t('Node Header Error') }}
</div>
<div
@@ -17,7 +17,7 @@
<div class="flex items-center justify-between gap-2.5">
<!-- Collapse/Expand Button -->
<div class="relative flex items-center gap-2.5">
<div class="flex items-center lod-toggle shrink-0 px-0.5">
<div class="lod-toggle flex shrink-0 items-center px-0.5">
<IconButton
size="fit-content"
type="transparent"
@@ -32,7 +32,7 @@
collapsed && '-rotate-90'
)
"
class="text-xs leading-none relative top-px text-node-component-header-icon"
class="relative top-px text-xs leading-none text-node-component-header-icon"
></i>
</IconButton>
</div>
@@ -40,7 +40,7 @@
<!-- Node Title -->
<div
v-tooltip.top="tooltipConfig"
class="text-sm font-bold truncate flex-1 lod-toggle flex items-center gap-2"
class="lod-toggle flex flex-1 items-center gap-2 truncate text-sm font-bold"
data-testid="node-title"
>
<EditableText
@@ -59,7 +59,7 @@
<LODFallback />
</div>
<div class="flex items-center lod-toggle shrink-0">
<div class="lod-toggle flex shrink-0 items-center">
<IconButton
v-if="isSubgraphNode"
v-tooltip.top="enterSubgraphTooltipConfig"

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

@@ -1,5 +1,5 @@
<template>
<div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
<div v-if="renderError" class="node-error p-2 text-sm text-red-500">
{{ $t('Node Slots Error') }}
</div>
<div v-else class="lg-node-slots flex justify-between">
@@ -14,7 +14,7 @@
/>
</div>
<div v-if="nodeData?.outputs?.length" class="flex flex-col gap-1 ml-auto">
<div v-if="nodeData?.outputs?.length" class="ml-auto flex flex-col gap-1">
<OutputSlot
v-for="(output, index) in nodeData.outputs"
:key="`output-${index}`"

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

@@ -1,5 +1,5 @@
<template>
<div v-if="renderError" class="node-error p-2 text-red-500 text-sm">
<div v-if="renderError" class="node-error p-2 text-sm text-red-500">
{{ $t('Node Widgets Error') }}
</div>
<div
@@ -19,12 +19,12 @@
<div
v-for="(widget, index) in processedWidgets"
:key="`widget-${index}-${widget.name}`"
class="lg-widget-container flex items-center group"
class="lg-widget-container group flex items-center"
>
<!-- Widget Input Slot Dot -->
<div
class="opacity-0 group-hover:opacity-100 transition-opacity duration-150"
class="opacity-0 transition-opacity duration-150 group-hover:opacity-100"
>
<InputSlot
:slot-data="{

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

@@ -1,11 +1,11 @@
<template>
<div v-if="renderError" class="node-error p-1 text-red-500 text-xs">⚠️</div>
<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">
<!-- Slot Name -->
<span
v-if="!dotOnly"
class="whitespace-nowrap text-sm font-normal text-node-component-slot-text lod-toggle"
class="lod-toggle text-sm font-normal whitespace-nowrap text-node-component-slot-text"
>
{{ slotData.localized_name || slotData.name || `Output ${index}` }}
</span>

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

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col gap-1">
<div
class="p-4 border border-gray-300 dark-theme:border-gray-600 rounded max-h-[48rem]"
class="max-h-[48rem] rounded border border-gray-300 p-4 dark-theme:border-gray-600"
>
<Chart :type="chartType" :data="chartData" :options="chartOptions" />
</div>

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

@@ -9,7 +9,7 @@
<ColorPicker
v-model="localValue"
v-bind="filteredProps"
class="w-8 h-4 !rounded-full overflow-hidden border-none"
class="h-4 w-8 overflow-hidden !rounded-full border-none"
:pt="{
preview: '!w-full !h-full !border-none'
}"

48
src/renderer/extensions/vueNodes/widgets/components/WidgetFileUpload.vue
View File

@@ -7,10 +7,10 @@
style="width: calc(100% + 1rem)"
>
<!-- Select section above image -->
<div class="flex items-center justify-between gap-4 mb-2 px-2">
<div class="mb-2 flex items-center justify-between gap-4 px-2">
<label
v-if="widget.name"
class="text-xs opacity-80 min-w-[4em] truncate"
class="min-w-[4em] truncate text-xs opacity-80"
>{{ widget.name }}</label
>
<!-- Group select and folder button together on the right -->
@@ -21,7 +21,7 @@
:options="[selectedFile?.name || '']"
:disabled="true"
v-bind="transformCompatProps"
class="min-w-[8em] max-w-[20em] text-xs"
class="max-w-[20em] min-w-[8em] text-xs"
size="small"
:pt="{
option: 'text-xs'
@@ -30,7 +30,7 @@
<Button
icon="pi pi-folder"
size="small"
class="!w-8 !h-8"
class="!h-8 !w-8"
@click="triggerFileInput"
/>
</div>
@@ -38,31 +38,31 @@
<!-- Image preview -->
<!-- TODO: change hardcoded colors when design system incorporated -->
<div class="relative group">
<img :src="imageUrl" :alt="selectedFile?.name" class="w-full h-auto" />
<div class="group relative">
<img :src="imageUrl" :alt="selectedFile?.name" class="h-auto w-full" />
<!-- Darkening overlay on hover -->
<div
class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 pointer-events-none"
class="bg-opacity-0 group-hover:bg-opacity-20 pointer-events-none absolute inset-0 bg-black transition-all duration-200"
/>
<!-- Control buttons in top right on hover -->
<div
class="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
class="absolute top-2 right-2 flex gap-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
>
<!-- Edit button -->
<button
class="w-6 h-6 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none"
class="flex h-6 w-6 items-center justify-center rounded border-none transition-all duration-150 focus:outline-none"
style="background-color: #262729"
@click="handleEdit"
>
<i class="pi pi-pencil text-white text-xs"></i>
<i class="pi pi-pencil text-xs text-white"></i>
</button>
<!-- Delete button -->
<button
class="w-6 h-6 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none"
class="flex h-6 w-6 items-center justify-center rounded border-none transition-all duration-150 focus:outline-none"
style="background-color: #262729"
@click="clearFile"
>
<i class="pi pi-times text-white text-xs"></i>
<i class="pi pi-times text-xs text-white"></i>
</button>
</div>
</div>
@@ -75,10 +75,10 @@
style="width: calc(100% + 1rem)"
>
<!-- Select section above audio player -->
<div class="flex items-center justify-between gap-4 mb-2 px-2">
<div class="mb-2 flex items-center justify-between gap-4 px-2">
<label
v-if="widget.name"
class="text-xs opacity-80 min-w-[4em] truncate"
class="min-w-[4em] truncate text-xs opacity-80"
>{{ widget.name }}</label
>
<!-- Group select and folder button together on the right -->
@@ -88,7 +88,7 @@
:options="[selectedFile?.name || '']"
:disabled="true"
v-bind="transformCompatProps"
class="min-w-[8em] max-w-[20em] text-xs"
class="max-w-[20em] min-w-[8em] text-xs"
size="small"
:pt="{
option: 'text-xs'
@@ -97,16 +97,16 @@
<Button
icon="pi pi-folder"
size="small"
class="!w-8 !h-8"
class="!h-8 !w-8"
@click="triggerFileInput"
/>
</div>
</div>
<!-- Audio player -->
<div class="relative group px-2">
<div class="group relative px-2">
<div
class="bg-[#1a1b1e] rounded-lg p-4 flex items-center gap-4"
class="flex items-center gap-4 rounded-lg bg-[#1a1b1e] p-4"
style="border: 1px solid #262729"
>
<!-- Audio icon -->
@@ -116,7 +116,7 @@
<!-- File info and controls -->
<div class="flex-1">
<div class="text-sm font-medium mb-1">{{ selectedFile?.name }}</div>
<div class="mb-1 text-sm font-medium">{{ selectedFile?.name }}</div>
<div class="text-xs opacity-60">
{{
selectedFile ? (selectedFile.size / 1024).toFixed(1) + ' KB' : ''
@@ -128,10 +128,10 @@
<div class="flex gap-1">
<!-- Delete button -->
<button
class="w-8 h-8 rounded flex items-center justify-center transition-all duration-150 focus:outline-none border-none hover:bg-[#262729]"
class="flex h-8 w-8 items-center justify-center rounded border-none transition-all duration-150 hover:bg-[#262729] focus:outline-none"
@click="clearFile"
>
<i class="pi pi-times text-white text-sm"></i>
<i class="pi pi-times text-sm text-white"></i>
</button>
</div>
</div>
@@ -141,14 +141,14 @@
<!-- Show normal file upload UI when no image or audio is loaded -->
<div
v-else
class="flex flex-col gap-1 w-full border border-solid p-1 rounded-lg"
class="flex w-full flex-col gap-1 rounded-lg border border-solid p-1"
:style="{ borderColor: '#262729' }"
>
<div
class="border border-dashed p-1 rounded-md transition-colors duration-200 hover:border-slate-300"
class="rounded-md border border-dashed p-1 transition-colors duration-200 hover:border-slate-300"
:style="{ borderColor: '#262729' }"
>
<div class="flex flex-col items-center gap-2 w-full py-4">
<div class="flex w-full flex-col items-center gap-2 py-4">
<span class="text-xs opacity-60"> {{ $t('Drop your file or') }} </span>
<div>
<Button

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

@@ -29,18 +29,18 @@
item?.alt ||
`${t('g.galleryImage')} ${activeIndex + 1} of ${galleryImages.length}`
"
class="w-full h-auto max-h-64 object-contain"
class="h-auto max-h-64 w-full object-contain"
/>
</template>
<template #thumbnail="{ item }">
<div class="p-1 w-full h-full">
<div class="h-full w-full p-1">
<img
:src="item?.thumbnailImageSrc || item?.src || ''"
:alt="
item?.alt ||
`${t('g.galleryThumbnail')} ${galleryImages.findIndex((img) => img === item) + 1} of ${galleryImages.length}`
"
class="w-full h-full object-cover rounded-lg"
class="h-full w-full rounded-lg object-cover"
/>
</div>
</template>

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

@@ -11,14 +11,14 @@
<img
:src="beforeImage"
:alt="beforeAlt"
class="w-full h-full object-cover"
class="h-full w-full object-cover"
/>
</template>
<template #right>
<img
:src="afterImage"
:alt="afterAlt"
class="w-full h-full object-cover"
class="h-full w-full object-cover"
/>
</template>
</ImageCompare>

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

@@ -5,7 +5,7 @@
>
<!-- Display mode: Rendered markdown -->
<div
class="comfy-markdown-content hover:bg-[var(--p-content-hover-background)] text-sm min-h-[60px] w-full rounded-lg px-4 py-2 overflow-y-auto lod-toggle"
class="comfy-markdown-content lod-toggle min-h-[60px] w-full overflow-y-auto rounded-lg px-4 py-2 text-sm hover:bg-[var(--p-content-hover-background)]"
:class="isEditing === false ? 'visible' : 'invisible'"
v-html="renderedHtml"
/>
@@ -15,7 +15,7 @@
v-show="isEditing"
ref="textareaRef"
v-model="localValue"
class="w-full min-h-[60px] absolute inset-0 resize-none"
class="absolute inset-0 min-h-[60px] w-full resize-none"
:pt="{
root: {
class: 'text-sm w-full h-full',

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

@@ -65,7 +65,7 @@ const theButtonStyle = computed(() =>
"
@click="emit('select-click', $event)"
>
<span class="px-4 py-2 min-w-0 text-left">
<span class="min-w-0 px-4 py-2 text-left">
<span v-if="!selectedItems.length" class="min-w-0">
{{ props.placeholder }}
</span>
@@ -89,7 +89,7 @@ const theButtonStyle = computed(() =>
<i class="icon-[lucide--folder-search] size-4" />
<input
type="file"
class="opacity-0 absolute inset-0 -z-1"
class="absolute inset-0 -z-1 opacity-0"
:multiple="maxSelectable > 1"
:disabled="disabled"
:accept="accept"

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

@@ -36,7 +36,7 @@ const searchQuery = defineModel<string>('searchQuery')
<template>
<div
class="w-103 max-h-[640px] pt-4 bg-node-component-surface rounded-lg outline outline-offset-[-1px] outline-node-component-border flex flex-col"
class="flex max-h-[640px] w-103 flex-col rounded-lg bg-node-component-surface pt-4 outline outline-offset-[-1px] outline-node-component-border"
>
<!-- Filter -->
<FormDropdownMenuFilter
@@ -53,7 +53,7 @@ const searchQuery = defineModel<string>('searchQuery')
:is-querying="isQuerying"
/>
<!-- List -->
<div class="flex overflow-hidden relative h-full">
<div class="relative flex h-full overflow-hidden">
<div
:class="
cn(
@@ -67,11 +67,11 @@ const searchQuery = defineModel<string>('searchQuery')
"
>
<div
class="absolute top-0 inset-x-3 h-5 bg-gradient-to-b from-backdrop to-transparent pointer-events-none z-10"
class="pointer-events-none absolute inset-x-3 top-0 z-10 h-5 bg-gradient-to-b from-backdrop to-transparent"
/>
<div
v-if="items.length === 0"
class="flex justify-center items-center absolute inset-0"
class="absolute inset-0 flex items-center justify-center"
>
<i
title="No items"

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

@@ -44,7 +44,7 @@ function handleSortSelected(item: SortOption) {
</script>
<template>
<div class="flex gap-2 text-zinc-400 px-4">
<div class="flex gap-2 px-4 text-zinc-400">
<label
:class="
cn(
@@ -58,9 +58,9 @@ function handleSortSelected(item: SortOption) {
>
<i
v-if="isQuerying"
class="icon-[lucide--loader-circle] mr-2 size-4 animate-spin"
class="mr-2 icon-[lucide--loader-circle] size-4 animate-spin"
/>
<i v-else class="icon-[lucide--search] mr-2 size-4" />
<i v-else class="mr-2 icon-[lucide--search] size-4" />
<input
v-model="searchQuery"
type="text"
@@ -85,7 +85,7 @@ function handleSortSelected(item: SortOption) {
>
<div
v-if="sortSelected !== 'default'"
class="size-2 absolute top-[-2px] left-[-2px] bg-blue-500 rounded-full"
class="absolute top-[-2px] left-[-2px] size-2 rounded-full bg-blue-500"
/>
<i class="icon-[lucide--arrow-up-down] size-4" />
</button>

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

@@ -11,7 +11,7 @@ const filterSelected = defineModel<OptionId>('filterSelected')
</script>
<template>
<div class="flex gap-1 text-zinc-400 px-4 mb-4">
<div class="mb-4 flex gap-1 px-4 text-zinc-400">
<div
v-for="option in filterOptions"
:key="option.id"

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

@@ -92,10 +92,10 @@ function handleVideoLoad(event: Event) {
<!-- Selected Icon -->
<div
v-if="selected"
class="rounded-full bg-blue-500 border-1 border-white size-4 absolute top-1 left-1"
class="absolute top-1 left-1 size-4 rounded-full border-1 border-white bg-blue-500"
>
<i
class="icon-[lucide--check] size-3 text-white -translate-y-[0.5px]"
class="icon-[lucide--check] size-3 translate-y-[-0.5px] text-white"
/>
</div>
<video

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

@@ -12,12 +12,12 @@ defineProps<{
<template>
<div
class="flex items-center justify-between gap-2 h-[30px] overscroll-contain"
class="flex h-[30px] items-center justify-between gap-2 overscroll-contain"
>
<div class="relative h-6 flex items-center mr-4">
<div class="relative mr-4 flex h-6 items-center">
<p
v-if="widget.name"
class="text-sm text-node-component-slot-text font-normal flex-1 truncate w-20 lod-toggle"
class="lod-toggle w-20 flex-1 truncate text-sm font-normal text-node-component-slot-text"
>
{{ widget.label || widget.name }}
</p>
@@ -25,7 +25,7 @@ defineProps<{
</div>
<div class="relative">
<div
class="w-75 cursor-default lod-toggle"
class="lod-toggle w-75 cursor-default"
@pointerdown.stop="noop"
@pointermove.stop="noop"
@pointerup.stop="noop"