64 lines
1.3 KiB
Vue
64 lines
1.3 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/Components/ui/popover";
|
|
|
|
const props = defineProps({
|
|
open: {
|
|
type: Boolean,
|
|
default: undefined,
|
|
},
|
|
align: {
|
|
type: String,
|
|
default: "center",
|
|
validator: (value) => ["start", "center", "end"].includes(value),
|
|
},
|
|
side: {
|
|
type: String,
|
|
default: "bottom",
|
|
validator: (value) => ["top", "right", "bottom", "left"].includes(value),
|
|
},
|
|
sideOffset: {
|
|
type: Number,
|
|
default: 4,
|
|
},
|
|
contentClass: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["update:open"]);
|
|
|
|
const internalOpen = ref(false);
|
|
|
|
const isControlled = props.open !== undefined;
|
|
|
|
function handleOpenChange(value) {
|
|
if (isControlled) {
|
|
emit("update:open", value);
|
|
} else {
|
|
internalOpen.value = value;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Popover :open="isControlled ? open : internalOpen" @update:open="handleOpenChange">
|
|
<PopoverTrigger as-child :disabled="disabled">
|
|
<slot name="trigger" />
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
:align="align"
|
|
:side="side"
|
|
:side-offset="sideOffset"
|
|
:class="contentClass"
|
|
>
|
|
<slot />
|
|
</PopoverContent>
|
|
</Popover>
|
|
</template>
|