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