mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
e70ddea684
* feature: size adjust * feature: design adjust * fix: popover width, height added * fix: li style override * refactor: improve component readability and maintainability per PR feedback - Replace CardGridList component with createGridStyle utility function - Add runtime validation for grid column values - Remove !important usage in MultiSelect, use cn() function instead - Extract popover sizing logic into usePopoverSizing composable - Improve class string readability by splitting into logical groups - Use Tailwind size utilities (size-8, size-10) instead of separate width/height - Remove magic numbers in SearchBox, align with button sizes - Rename BaseWidgetLayout to BaseModalLayout for clarity - Enhance SearchBox click area to cover entire component - Refactor long class strings using cn() utility across components * fix: BaseWidgetLayout => BaseModalLayout * fix: CardGrid deleted * fix: unused exported types * Update test expectations [skip ci] * chore: code review * Update test expectations [skip ci] * chore: restore screenshot --------- Co-authored-by: github-actions <github-actions@github.com>
28 lines
676 B
Vue
28 lines
676 B
Vue
<template>
|
|
<div :class="containerClasses">
|
|
<slot name="top"></slot>
|
|
<slot name="bottom"></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
const { ratio = 'square' } = defineProps<{
|
|
ratio?: 'square' | 'portrait' | 'tallPortrait'
|
|
}>()
|
|
|
|
const containerClasses = computed(() => {
|
|
const baseClasses =
|
|
'flex flex-col bg-white dark-theme:bg-zinc-800 rounded-lg shadow-sm border border-zinc-200 dark-theme:border-zinc-700 overflow-hidden'
|
|
|
|
const ratioClasses = {
|
|
square: 'aspect-256/308',
|
|
portrait: 'aspect-256/325',
|
|
tallPortrait: 'aspect-256/353'
|
|
}
|
|
|
|
return `${baseClasses} ${ratioClasses[ratio]}`
|
|
})
|
|
</script>
|