import { computed, createVNode } from "vue";
import "./styles/dialog.scss";
import { useProxiedModel } from "../../composables/proxied-model/index.mjs";
import { makeTransitionProps } from "../../composables/transition/index.mjs";
import { DialogTransition } from "../transition/dialog-transition.mjs";
import { Overlay } from "../overlay/overlay.mjs";
import { genericComponent } from "../../utils/define-component.mjs";
import { getUid } from "../../utils/dist/index.mjs";
const Dialog = genericComponent()({
  name: "VeDialog",
  props: {
    fullscreen: Boolean,
    id: String,
    modelValue: Boolean,
    scrollable: Boolean,
    draggable: Boolean,
    ...makeTransitionProps({
      transition: {
        component: DialogTransition
      }
    })
  },
  emits: {
    "update:modelValue": (_) => true
  },
  setup(props, {
    slots
  }) {
    const isActive = useProxiedModel(props, "modelValue");
    const id = computed(() => props.id || `ve-dialog-${getUid()}`);
    return () => createVNode(Overlay, {
      "aria-role": "dialog",
      "aria-modal": "true",
      "activator-props": {
        "aria-haspopup": "dialog",
        "aria-expanded": String(isActive.value),
        "aria-describedby": id.value
      },
      "class": ["ve-dialog", {
        "ve-dialog--fullscreen": props.fullscreen,
        "ve-dialog--scrollable": props.scrollable
      }],
      "contentClass": "ve-dialog__wrapper",
      "id": id.value,
      "transition": props.transition,
      "modelValue": isActive.value,
      "onUpdate:modelValue": ($event) => isActive.value = $event
    }, {
      ...slots,
      default: slots.default
    });
  }
});
export {
  Dialog
};
//# sourceMappingURL=dialog.mjs.map
