<template>
    <teleport to="body">
        <div class="ui-dialog" :style="{ zIndex: zIndex }" v-if="show">
            <dialog-content>
                <template v-for="(slot, name) in $slots" v-slot:[name]="raw">
                    <slot :name="name" v-bind="raw" />
                </template>
            </dialog-content>
        </div>
    </teleport>
</template>
<script>
import { defineComponent, ref } from 'vue'
import zindex from '../../utils/zindex'
import DialogContent from './Dialog-content.vue'
export default defineComponent({
    name: "ui-dialog",
    setup: function (props, ctx) {
        const show = ref(true);
        return {
            show,
            zIndex: zindex(),
        };
    },
    components: { DialogContent }
})
</script>