hongluan-business-ui/lib/components/modeless-dialog/src/modeless-dialog.js

Hongluan Business Component Library for Vue 3

'use strict';

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

var vue = require('vue');
var hongluanUi = require('hongluan-ui');
var util = require('../../../utils/util.js');
var modelessDialog = require('./modeless-dialog2.js');
var dragger = require('./dragger.js');
var resizer = require('./resizer.js');
var useModelessDialog = require('./use-modeless-dialog.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');

const _sfc_main = vue.defineComponent({
  name: "ModelessDialog",
  components: {
    HlIcon: hongluanUi.HlIcon,
    SystemClose: hongluanUi.SystemClose,
    SystemMaximize: hongluanUi.SystemMaximize,
    SystemMinimize: hongluanUi.SystemMinimize,
    SystemArrowUp: hongluanUi.SystemArrowUp,
    SystemArrowDown: hongluanUi.SystemArrowDown
  },
  directives: {
    TrapFocus: hongluanUi.TrapFocus,
    "dragger": dragger.ModelessDialogDragger,
    "resizer": resizer.ModelessDialogResizer
  },
  inheritAttrs: false,
  props: modelessDialog.modelessDialogProps,
  emits: modelessDialog.modelessDialogEmits,
  setup(props) {
    const { prefix } = util.usePrefix();
    const dialogRef = vue.ref();
    const dialog = useModelessDialog.useDialog(props, dialogRef);
    const {
      panelStyle,
      panelClass,
      headerClass: panelHeaderClass,
      bodyClass: panelBodyClass,
      footerClass: panelFooterClass
    } = hongluanUi.usePanelProps(props);
    const getDialogStyle = () => {
      var _a, _b, _c, _d, _e;
      let width = props.width, height = props.height, top = props.top, zIndex = props.zIndex;
      const style = (_a = dialogRef.value) == null ? void 0 : _a.style;
      if (style) {
        width = (_b = dialogRef.value) == null ? void 0 : _b.style.width;
        height = (_c = dialogRef.value) == null ? void 0 : _c.style.height;
        top = (_d = dialogRef.value) == null ? void 0 : _d.style.top;
        zIndex = (_e = dialogRef.value) == null ? void 0 : _e.style.zIndex;
      }
      return [
        {
          width,
          height,
          top,
          zIndex
        },
        panelStyle
      ];
    };
    return {
      prefix,
      hlPrefix: hongluanUi.PREFIX.toLowerCase(),
      dialogRef,
      panelStyle,
      getDialogStyle,
      panelClass,
      panelHeaderClass,
      panelBodyClass,
      panelFooterClass,
      ...dialog
    };
  }
});
const _hoisted_1 = ["id"];
const _hoisted_2 = { class: "panel-title" };
const _hoisted_3 = { class: "panel-header-right" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_system_arrow_down = vue.resolveComponent("system-arrow-down");
  const _component_system_arrow_up = vue.resolveComponent("system-arrow-up");
  const _component_hl_icon = vue.resolveComponent("hl-icon");
  const _component_system_minimize = vue.resolveComponent("system-minimize");
  const _component_system_maximize = vue.resolveComponent("system-maximize");
  const _component_system_close = vue.resolveComponent("system-close");
  const _directive_trap_focus = vue.resolveDirective("trap-focus");
  const _directive_dragger = vue.resolveDirective("dragger");
  const _directive_resizer = vue.resolveDirective("resizer");
  return vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
    vue.createVNode(vue.Transition, {
      name: _ctx.animationName,
      onAfterEnter: _ctx.afterEnter,
      onAfterLeave: _ctx.afterLeave,
      onBeforeLeave: _ctx.beforeLeave
    }, {
      default: vue.withCtx(() => [
        _ctx.visible ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ key: 0 }, _ctx.$attrs, {
          id: _ctx.id,
          ref: "dialogRef",
          class: [_ctx.prefix + "-modeless-dialog", _ctx.hlPrefix + "-panel", _ctx.customClass, _ctx.panelClass, _ctx.innerClass],
          style: _ctx.getDialogStyle(),
          "aria-modal": "true",
          role: "dialog",
          "aria-label": "dialog",
          onClick: _cache[3] || (_cache[3] = vue.withModifiers(() => {
          }, ["stop"]))
        }), [
          vue.createElementVNode("div", {
            class: vue.normalizeClass(["panel-header", _ctx.panelHeaderClass])
          }, [
            _ctx.$slots.header ? vue.renderSlot(_ctx.$slots, "header", { key: 0 }) : _ctx.title || _ctx.showClose ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
              vue.createElementVNode("h4", _hoisted_2, vue.toDisplayString(_ctx.title), 1),
              vue.createElementVNode("div", _hoisted_3, [
                _ctx.showCollapse ? (vue.openBlock(), vue.createElementBlock("button", {
                  key: 0,
                  class: "panel-close",
                  onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleCollapse && _ctx.handleCollapse(...args))
                }, [
                  vue.createVNode(_component_hl_icon, null, {
                    default: vue.withCtx(() => [
                      _ctx.collapse ? (vue.openBlock(), vue.createBlock(_component_system_arrow_down, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_system_arrow_up, { key: 1 }))
                    ]),
                    _: 1
                  })
                ])) : vue.createCommentVNode("v-if", true),
                _ctx.showMaximize ? (vue.openBlock(), vue.createElementBlock("button", {
                  key: 1,
                  class: "panel-close",
                  onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleMaximize && _ctx.handleMaximize(...args))
                }, [
                  vue.createVNode(_component_hl_icon, null, {
                    default: vue.withCtx(() => [
                      _ctx.maximize ? (vue.openBlock(), vue.createBlock(_component_system_minimize, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_system_maximize, { key: 1 }))
                    ]),
                    _: 1
                  })
                ])) : vue.createCommentVNode("v-if", true),
                _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
                  key: 2,
                  class: "panel-close",
                  onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleClose && _ctx.handleClose(...args))
                }, [
                  vue.createVNode(_component_hl_icon, null, {
                    default: vue.withCtx(() => [
                      vue.createVNode(_component_system_close)
                    ]),
                    _: 1
                  })
                ])) : vue.createCommentVNode("v-if", true)
              ])
            ], 64)) : vue.createCommentVNode("v-if", true)
          ], 2),
          vue.createElementVNode("div", {
            class: vue.normalizeClass(["panel-body", _ctx.panelBodyClass])
          }, [
            vue.renderSlot(_ctx.$slots, "default")
          ], 2),
          _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
            key: 0,
            class: vue.normalizeClass(["panel-footer", _ctx.panelFooterClass])
          }, [
            vue.renderSlot(_ctx.$slots, "footer")
          ], 2)) : vue.createCommentVNode("v-if", true)
        ], 16, _hoisted_1)), [
          [vue.vShow, _ctx.shown],
          [_directive_trap_focus],
          [_directive_dragger, { boundings: _ctx.boundings, drag: _ctx.drag }],
          [_directive_resizer, _ctx.resize]
        ]) : vue.createCommentVNode("v-if", true)
      ]),
      _: 3
    }, 8, ["name", "onAfterEnter", "onAfterLeave", "onBeforeLeave"])
  ]);
}
var ModelessDialog = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

exports["default"] = ModelessDialog;
//# sourceMappingURL=modeless-dialog.js.map