41 lines
1.1 KiB
Vue
41 lines
1.1 KiB
Vue
<template>
|
|
<Teleport to="#teleports" v-if="visible">
|
|
<div @click.self="() => !focused && hide()" class="z-[100] absolute top-0 bottom-0 left-0 right-0 bg-light-0 dark:bg-dark-0 !bg-opacity-80 flex justify-center items-center">
|
|
<div class="relative border border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 min-h-40 min-w-72">
|
|
<span v-if="closeIcon" class="cursor-pointer absolute top-1 right-1 flex hover:opacity-75" @click="() => hide()"><Icon :width="20" :height="20" icon="icons/close" /></span>
|
|
<div class="p-6" :class="$attrs.class">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
focused: {
|
|
type: Boolean,
|
|
defualt: false,
|
|
},
|
|
closeIcon: {
|
|
type: Boolean,
|
|
default: true,
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['show', 'hide']);
|
|
const visible = ref(false);
|
|
|
|
function show()
|
|
{
|
|
visible.value = true;
|
|
emit('show');
|
|
}
|
|
function hide()
|
|
{
|
|
visible.value = false;
|
|
emit('hide');
|
|
}
|
|
|
|
defineExpose({hide, show});
|
|
</script> |