modtool/src/components/VDialog.vue

<template>
    <dialog ref="dialog" class="v-dialog" v-bind="attrs" >
        <slot />
    </dialog>
</template>
  
<script setup lang="ts">
import {
    onMounted, ref, watchEffect, useAttrs,
} from 'vue';

const dialog = ref<InstanceType<any> | undefined>(null);
const internalOpen = ref(false);

const props = defineProps({
    open: Boolean,
});

const attrs = useAttrs();

function showHideDialog() {
    if (!dialog?.value) return;
    if (props.open) dialog.value.showModal();
    else dialog.value.close();
}

onMounted(() => {
    watchEffect(() => {
        if (props.open !== internalOpen.value) {
            showHideDialog();
            internalOpen.value = props.open;
        }
    });
});

</script>
<style></style>