mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-04 20:50:06 +00:00
85017dbba0
* temp: move tailwind calls out of the layer * temp: ts tailwind config * upgrade: Tailwind v4 This got a little out of hand. Had to add a relative reference to the stylesheet in any component that uses @apply instead of the utility classes directly. * upgrade: bg-opacity is now a modifier * fix: Classic menu buttons assume a border * Update test expectations [skip ci] * fix: New preflight removal pattern * fix: Skeletons don't have skin * Update test expectations [skip ci] * fix: Missing @reference * [auto-fix] Apply ESLint and Prettier fixes --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: GitHub Action <action@github.com>
41 lines
895 B
Vue
41 lines
895 B
Vue
<template>
|
|
<div :class="topStyle">
|
|
<slot class="absolute top-0 left-0 w-full h-full"></slot>
|
|
|
|
<div class="absolute top-2 left-2 flex gap-2">
|
|
<slot name="top-left"></slot>
|
|
</div>
|
|
|
|
<div class="absolute top-2 right-2 flex gap-2">
|
|
<slot name="top-right"></slot>
|
|
</div>
|
|
|
|
<div class="absolute bottom-2 left-2 flex gap-2">
|
|
<slot name="bottom-left"></slot>
|
|
</div>
|
|
|
|
<div class="absolute bottom-2 right-2 flex gap-2">
|
|
<slot name="bottom-right"></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
const { ratio = 'square' } = defineProps<{
|
|
ratio?: 'square' | 'landscape'
|
|
}>()
|
|
|
|
const topStyle = computed(() => {
|
|
const baseClasses = 'relative p-0'
|
|
|
|
const ratioClasses = {
|
|
square: 'aspect-square',
|
|
landscape: 'aspect-48/27'
|
|
}
|
|
|
|
return `${baseClasses} ${ratioClasses[ratio]}`
|
|
})
|
|
</script>
|