mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
41c6cdd2c6
Backport of #9888 to `core/1.42` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10448-backport-core-1-42-feat-App-mode-add-lightbox-to-view-image-in-drop-zone-32d6d73d365081458f56cdc8ed0a85f8) by [Unito](https://www.unito.io) Co-authored-by: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
58 lines
1.7 KiB
Vue
58 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogOverlay,
|
|
DialogPortal,
|
|
DialogRoot,
|
|
DialogTitle,
|
|
VisuallyHidden
|
|
} from 'reka-ui'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
|
|
const open = defineModel<boolean>({ default: false })
|
|
|
|
const { src, alt = '' } = defineProps<{
|
|
src: string
|
|
alt?: string
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
</script>
|
|
<template>
|
|
<DialogRoot v-model:open="open">
|
|
<DialogPortal>
|
|
<DialogOverlay
|
|
class="fixed inset-0 z-30 bg-black/60 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
|
|
/>
|
|
<DialogContent
|
|
class="fixed top-1/2 left-1/2 z-1700 -translate-1/2 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-50 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-50"
|
|
@escape-key-down="open = false"
|
|
>
|
|
<VisuallyHidden>
|
|
<DialogTitle>{{ alt || t('g.imageLightbox') }}</DialogTitle>
|
|
<DialogDescription v-if="alt">{{ alt }}</DialogDescription>
|
|
</VisuallyHidden>
|
|
<DialogClose as-child>
|
|
<Button
|
|
:aria-label="t('g.close')"
|
|
size="icon"
|
|
variant="muted-textonly"
|
|
class="absolute -top-2 -right-2 z-10 translate-x-full text-white hover:text-white/80"
|
|
>
|
|
<i class="icon-[lucide--x] size-5" />
|
|
</Button>
|
|
</DialogClose>
|
|
<img
|
|
:src
|
|
:alt
|
|
class="max-h-[90vh] max-w-[90vw] rounded-sm object-contain"
|
|
/>
|
|
</DialogContent>
|
|
</DialogPortal>
|
|
</DialogRoot>
|
|
</template>
|