1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-12-24 07:46:30 +00:00
homebox/frontend/components/Base/Modal.vue

60 lines
1.4 KiB
Vue
Raw Normal View History

2022-09-01 22:32:03 +00:00
<template>
2022-09-02 17:46:20 +00:00
<div class="z-[999]">
<input :id="modalId" v-model="modal" type="checkbox" class="modal-toggle" />
2022-09-02 17:46:20 +00:00
<div class="modal modal-bottom sm:modal-middle overflow-visible">
<div class="modal-box overflow-visible relative">
<button :for="modalId" class="btn btn-sm btn-circle absolute right-2 top-2" @click="close"></button>
2022-09-01 22:32:03 +00:00
<h3 class="font-bold text-lg">
<slot name="title"></slot>
</h3>
<slot> </slot>
</div>
</div>
</div>
</template>
<script setup lang="ts">
const emit = defineEmits(["cancel", "update:modelValue"]);
2022-09-01 22:32:03 +00:00
const props = defineProps({
modelValue: {
type: Boolean,
required: true,
},
/**
* in readonly mode the modal only `emits` a "cancel" event to indicate
* that the modal was closed via the "x" button. The parent component is
* responsible for closing the modal.
*/
readonly: {
type: Boolean,
default: false,
},
});
function escClose(e: KeyboardEvent) {
if (e.key === "Escape") {
close();
}
}
2022-09-01 22:32:03 +00:00
function close() {
if (props.readonly) {
emit("cancel");
2022-09-01 22:32:03 +00:00
return;
}
modal.value = false;
}
const modalId = useId();
const modal = useVModel(props, "modelValue", emit);
watchEffect(() => {
if (modal.value) {
document.addEventListener("keydown", escClose);
} else {
document.removeEventListener("keydown", escClose);
}
});
2022-09-01 22:32:03 +00:00
</script>