mirror of
https://github.com/Kuingsmile/PicList.git
synced 2026-06-21 07:33:54 +08:00
83 lines
2.4 KiB
Vue
83 lines
2.4 KiB
Vue
<template>
|
|
<div
|
|
class="fixed inset-0 z-1000 flex items-center justify-center overflow-y-auto bg-black/30"
|
|
:class="{ 'advanced-animation': enableAdvancedAnimation }"
|
|
@click.stop
|
|
>
|
|
<div
|
|
class="m-auto flex flex-col overflow-hidden rounded-lg border border-border-secondary bg-bg-tertiary shadow-xl"
|
|
:style="{
|
|
height: height || '85vh',
|
|
maxHeight: maxHeight || '85vh',
|
|
width: width || '90vw',
|
|
maxWidth: maxWidth || '90vw',
|
|
}"
|
|
@click.stop
|
|
>
|
|
<div class="flex items-center justify-between border border-border-secondary bg-bg-tertiary px-5 py-4 max-md:p-2">
|
|
<slot name="titleBar"></slot>
|
|
<h3 v-if="title !== ''" class="m-0 text-xl font-semibold text-main">
|
|
{{ title }}
|
|
</h3>
|
|
<span v-if="description !== ''" class="mt-1 text-xl font-semibold text-secondary">
|
|
{{ description }}
|
|
</span>
|
|
<button
|
|
class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-border bg-surface-elevated text-secondary transition-all duration-fast ease-apple hover:scale-105 hover:border-danger hover:bg-danger hover:text-white focus-visible:focus-ring"
|
|
@click="handleClose"
|
|
>
|
|
<XIcon :size="20" />
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="no-scrollbar h-[calc(90vh-90px)] flex-1 overflow-y-auto max-md:p-4"
|
|
:style="{ height: height ? 'calc(' + height + ' - 90px)' : 'calc(85vh - 90px)' }"
|
|
>
|
|
<slot></slot>
|
|
</div>
|
|
<div v-if="$slots.footer" class="flex justify-end gap-3 border-t border-border-secondary p-3">
|
|
<slot name="footer"></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { XIcon } from '@lucide/vue'
|
|
import { onBeforeMount, ref } from 'vue'
|
|
|
|
import { getConfig } from '@/utils/dataSender'
|
|
|
|
const visible = defineModel<boolean>('visible')
|
|
|
|
function handleClose() {
|
|
visible.value = false
|
|
}
|
|
|
|
const enableAdvancedAnimation = ref(false)
|
|
|
|
const {
|
|
title = '',
|
|
description = '',
|
|
height = '',
|
|
maxHeight = '',
|
|
width = '',
|
|
maxWidth = '',
|
|
} = defineProps<{
|
|
title?: string
|
|
description?: string
|
|
height?: string
|
|
width?: string
|
|
maxHeight?: string
|
|
maxWidth?: string
|
|
}>()
|
|
|
|
async function initConf() {
|
|
enableAdvancedAnimation.value = (await getConfig('settings.enableAdvancedAnimation')) || false
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
initConf()
|
|
})
|
|
</script>
|