hongluan-ui/lib/components/dialog/src/dialog2.js

Hongluan Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var index = require('../../overlay/index.js');
require('../../panel/index.js');
require('../../../tokens/index.js');
require('../../focus-trap/index.js');
var index$1 = require('../../teleport/index.js');
require('../../../hooks/index.js');
var dialog = require('./dialog.js');
var useDialog = require('./use-dialog.js');
var dialogContent = require('./dialog-content.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var focusTrap = require('../../focus-trap/src/focus-trap.js');
var index$2 = require('../../../hooks/use-deprecated/index.js');
var index$3 = require('../../../hooks/use-namespace/index.js');
var panel = require('../../panel/src/panel2.js');
var dialog$1 = require('../../../tokens/dialog.js');
var index$4 = require('../../../hooks/use-same-target/index.js');

const _sfc_main = vue.defineComponent({
  name: "Dialog",
  components: {
    HlOverlay: index.HlOverlay,
    DialogContent: dialogContent["default"],
    FocusTrap: focusTrap["default"],
    HlTeleport: index$1.HlTeleport
  },
  inheritAttrs: false,
  props: dialog.dialogProps,
  emits: dialog.dialogEmits,
  setup(props) {
    const dialogRef = vue.ref();
    const headerRef = vue.ref();
    const dialogContentRef = vue.ref();
    index$2.useDeprecated({
      scope: "hl-dialog",
      from: "custom-class",
      replacement: "class",
      version: "2.5.0",
      ref: "https://element-plus.org/en-US/component/dialog.html#attributes",
      type: "Attribute"
    }, vue.computed(() => !!props.customClass));
    const { namespace } = index$3.useNamespace();
    const {
      titleId,
      bodyId,
      afterEnter,
      afterLeave,
      beforeLeave,
      handleClose,
      onModalClick,
      onOpenAutoFocus,
      onCloseAutoFocus,
      onCloseRequested,
      onFocusoutPrevented,
      close,
      rendered,
      animName,
      visible,
      zIndex
    } = useDialog.useDialog(props, dialogRef);
    const {
      panelStyle,
      panelClass,
      headerClass: panelHeaderClass,
      bodyClass: panelBodyClass,
      footerClass: panelFooterClass
    } = panel.usePanelProps(props);
    vue.provide(dialog$1.dialogInjectionKey, {
      dialogRef,
      headerRef,
      bodyId,
      handleClose,
      onModalClick,
      visible,
      zIndex,
      panelStyle,
      panelClass,
      panelHeaderClass,
      panelBodyClass,
      panelFooterClass
    });
    const overlayEvent = index$4.useSameTarget(onModalClick);
    return {
      namespace,
      titleId,
      bodyId,
      dialogContentRef,
      onOpenAutoFocus,
      onCloseAutoFocus,
      onCloseRequested,
      onFocusoutPrevented,
      afterEnter,
      afterLeave,
      beforeLeave,
      onModalClick,
      overlayEvent,
      handleClose,
      close,
      rendered,
      animName,
      visible,
      zIndex
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_hl_overlay = vue.resolveComponent("hl-overlay");
  const _component_dialog_content = vue.resolveComponent("dialog-content");
  const _component_focus_trap = vue.resolveComponent("focus-trap");
  const _component_hl_teleport = vue.resolveComponent("hl-teleport");
  return vue.openBlock(), vue.createBlock(_component_hl_teleport, {
    to: _ctx.appendTo,
    disabled: _ctx.appendTo !== "body" ? false : !_ctx.appendToBody
  }, {
    default: vue.withCtx(() => [
      vue.createVNode(vue.Transition, { name: "fade" }, {
        default: vue.withCtx(() => [
          vue.withDirectives(vue.createVNode(_component_hl_overlay, {
            mask: _ctx.modal,
            "overlay-class": _ctx.modalClass,
            "z-index": _ctx.zIndex,
            onClick: _ctx.overlayEvent.onClick,
            onMousedown: _ctx.overlayEvent.onMousedown,
            onMouseup: _ctx.overlayEvent.onMouseup
          }, null, 8, ["mask", "overlay-class", "z-index", "onClick", "onMousedown", "onMouseup"]), [
            [vue.vShow, _ctx.visible]
          ])
        ]),
        _: 1
      }),
      vue.createVNode(vue.Transition, {
        name: _ctx.animName,
        onAfterEnter: _ctx.afterEnter,
        onAfterLeave: _ctx.afterLeave,
        onBeforeLeave: _ctx.beforeLeave
      }, {
        default: vue.withCtx(() => [
          vue.withDirectives(vue.createElementVNode("div", {
            role: _ctx.showAs,
            "aria-modal": "true",
            "aria-label": _ctx.title || void 0,
            "aria-labelledby": !_ctx.title ? _ctx.titleId : void 0,
            "aria-describedby": _ctx.bodyId,
            class: vue.normalizeClass([_ctx.namespace + "-dialog", "at-" + _ctx.placement]),
            style: vue.normalizeStyle({
              zIndex: _ctx.zIndex + 1
            }),
            onClick: _ctx.overlayEvent.onClick,
            onMousedown: _ctx.overlayEvent.onMousedown,
            onMouseup: _ctx.overlayEvent.onMouseup
          }, [
            vue.createVNode(_component_focus_trap, {
              loop: "",
              trapped: _ctx.visible,
              "focus-start-el": "container",
              onFocusAfterTrapped: _ctx.onOpenAutoFocus,
              onFocusAfterReleased: _ctx.onCloseAutoFocus,
              onFocusoutPrevented: _ctx.onFocusoutPrevented,
              onReleaseRequested: _ctx.onCloseRequested
            }, {
              default: vue.withCtx(() => [
                _ctx.rendered ? (vue.openBlock(), vue.createBlock(_component_dialog_content, vue.mergeProps({
                  key: 0,
                  ref: "dialogContentRef",
                  "show-as": _ctx.showAs,
                  "show-close": _ctx.showClose,
                  "custom-class": _ctx.customClass,
                  placement: _ctx.placement,
                  top: _ctx.top,
                  title: _ctx.title,
                  height: _ctx.height,
                  width: _ctx.width,
                  draggable: _ctx.draggable,
                  resizable: _ctx.resizable,
                  "aria-level": _ctx.headerAriaLevel
                }, _ctx.$attrs), vue.createSlots({
                  default: vue.withCtx(() => [
                    vue.renderSlot(_ctx.$slots, "default")
                  ]),
                  _: 2
                }, [
                  _ctx.$slots.header ? {
                    name: "header",
                    fn: vue.withCtx(() => [
                      vue.renderSlot(_ctx.$slots, "header", {
                        close: _ctx.handleClose,
                        titleId: _ctx.titleId,
                        titleClass: "panel-title"
                      })
                    ])
                  } : void 0,
                  _ctx.$slots.title ? {
                    name: "title",
                    fn: vue.withCtx(() => [
                      vue.renderSlot(_ctx.$slots, "title")
                    ])
                  } : void 0,
                  _ctx.$slots.footer ? {
                    name: "footer",
                    fn: vue.withCtx(() => [
                      vue.renderSlot(_ctx.$slots, "footer")
                    ])
                  } : void 0
                ]), 1040, ["show-as", "show-close", "custom-class", "placement", "top", "title", "height", "width", "draggable", "resizable", "aria-level"])) : vue.createCommentVNode("v-if", true)
              ]),
              _: 3
            }, 8, ["trapped", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
          ], 46, ["role", "aria-label", "aria-labelledby", "aria-describedby", "onClick", "onMousedown", "onMouseup"]), [
            [vue.vShow, _ctx.visible]
          ])
        ]),
        _: 3
      }, 8, ["name", "onAfterEnter", "onAfterLeave", "onBeforeLeave"])
    ]),
    _: 3
  }, 8, ["to", "disabled"]);
}
var Dialog = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

exports["default"] = Dialog;
//# sourceMappingURL=dialog2.js.map