mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-26 07:57:36 +00:00
ef59f46495
*PR Created by the Glary-Bot Agent* --- ## Summary - Replace all `cn` / `ClassValue` imports from the `@/utils/tailwindUtil` re-export shim with direct imports from `@comfyorg/tailwind-utils` across 198 source files in `src/` and 3 in `apps/desktop-ui/` - Delete both shim files (`src/utils/tailwindUtil.ts` and `apps/desktop-ui/src/utils/tailwindUtil.ts`) - Add explicit `@comfyorg/tailwind-utils` dependency to `apps/desktop-ui/package.json` - Update documentation references in `AGENTS.md`, `docs/guidance/design-standards.md`, and `docs/guidance/vue-components.md` Fixes #11288 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-11453-refactor-migrate-cn-imports-from-utils-tailwindUtil-shim-to-comfyorg-tailwind-utils--3486d73d365081ec92cce91fbf88e6e4) by [Unito](https://www.unito.io) --------- Co-authored-by: Glary-Bot <glary-bot@users.noreply.github.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>
86 lines
1.9 KiB
Vue
86 lines
1.9 KiB
Vue
<template>
|
|
<div :class="containerClasses">
|
|
<slot name="top"></slot>
|
|
<slot name="bottom"></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
import { cn } from '@comfyorg/tailwind-utils'
|
|
|
|
const {
|
|
size = 'regular',
|
|
variant = 'default',
|
|
rounded = 'md',
|
|
customAspectRatio,
|
|
hasBorder = true,
|
|
hasBackground = true,
|
|
hasShadow = true,
|
|
hasCursor = true,
|
|
class: customClass = ''
|
|
} = defineProps<{
|
|
size?: 'mini' | 'compact' | 'regular' | 'portrait' | 'tall'
|
|
variant?: 'default' | 'ghost' | 'outline'
|
|
rounded?: 'none' | 'md' | 'lg' | 'xl'
|
|
customAspectRatio?: string
|
|
hasBorder?: boolean
|
|
hasBackground?: boolean
|
|
hasShadow?: boolean
|
|
hasCursor?: boolean
|
|
class?: string
|
|
}>()
|
|
|
|
// Base structure classes
|
|
const structureClasses = 'flex flex-col overflow-hidden'
|
|
|
|
// Rounded corners
|
|
const roundedClasses = {
|
|
none: 'rounded-none',
|
|
md: 'rounded',
|
|
lg: 'rounded-lg',
|
|
xl: 'rounded-xl'
|
|
} as const
|
|
|
|
const containerClasses = computed(() => {
|
|
// Variant styles
|
|
const variantClasses = {
|
|
default: cn(
|
|
hasBackground && 'bg-modal-card-background',
|
|
hasBorder && 'border border-border-default',
|
|
hasShadow && 'shadow-sm',
|
|
hasCursor && 'cursor-pointer'
|
|
),
|
|
ghost: cn(
|
|
hasCursor && 'cursor-pointer',
|
|
'p-2 transition-colors duration-200'
|
|
),
|
|
outline: cn(
|
|
hasBorder && 'border-2 border-border-subtle',
|
|
hasCursor && 'cursor-pointer',
|
|
'transition-colors hover:border-border-subtle/50'
|
|
)
|
|
}
|
|
|
|
// Size/aspect ratio
|
|
const aspectRatio = customAspectRatio
|
|
? `aspect-[${customAspectRatio}]`
|
|
: {
|
|
mini: 'aspect-100/120',
|
|
compact: 'aspect-240/311',
|
|
regular: 'aspect-256/308',
|
|
portrait: 'aspect-256/325',
|
|
tall: 'aspect-256/353'
|
|
}[size]
|
|
|
|
return cn(
|
|
structureClasses,
|
|
roundedClasses[rounded],
|
|
variantClasses[variant],
|
|
aspectRatio,
|
|
customClass
|
|
)
|
|
})
|
|
</script>
|