hongluan-business-ui/es/components/modeless-dialog/src/modeless-dialog.mjs

Hongluan Business Component Library for Vue 3

import { defineComponent, ref, resolveComponent, resolveDirective, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementBlock, mergeProps, withModifiers, createElementVNode, normalizeClass, renderSlot, Fragment, toDisplayString, createCommentVNode, vShow } from 'vue';
import { HlIcon, SystemClose, SystemMaximize, SystemMinimize, SystemArrowUp, SystemArrowDown, TrapFocus, usePanelProps, PREFIX } from 'hongluan-ui';
import { usePrefix } from '../../../utils/util.mjs';
import { modelessDialogProps, modelessDialogEmits } from './modeless-dialog2.mjs';
import { ModelessDialogDragger } from './dragger.mjs';
import { ModelessDialogResizer } from './resizer.mjs';
import { useDialog } from './use-modeless-dialog.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';

const _sfc_main = defineComponent({
  name: "ModelessDialog",
  components: {
    HlIcon,
    SystemClose,
    SystemMaximize,
    SystemMinimize,
    SystemArrowUp,
    SystemArrowDown
  },
  directives: {
    TrapFocus,
    "dragger": ModelessDialogDragger,
    "resizer": ModelessDialogResizer
  },
  inheritAttrs: false,
  props: modelessDialogProps,
  emits: modelessDialogEmits,
  setup(props) {
    const { prefix } = usePrefix();
    const dialogRef = ref();
    const dialog = useDialog(props, dialogRef);
    const {
      panelStyle,
      panelClass,
      headerClass: panelHeaderClass,
      bodyClass: panelBodyClass,
      footerClass: panelFooterClass
    } = 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: 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 = resolveComponent("system-arrow-down");
  const _component_system_arrow_up = resolveComponent("system-arrow-up");
  const _component_hl_icon = resolveComponent("hl-icon");
  const _component_system_minimize = resolveComponent("system-minimize");
  const _component_system_maximize = resolveComponent("system-maximize");
  const _component_system_close = resolveComponent("system-close");
  const _directive_trap_focus = resolveDirective("trap-focus");
  const _directive_dragger = resolveDirective("dragger");
  const _directive_resizer = resolveDirective("resizer");
  return openBlock(), createBlock(Teleport, { to: "body" }, [
    createVNode(Transition, {
      name: _ctx.animationName,
      onAfterEnter: _ctx.afterEnter,
      onAfterLeave: _ctx.afterLeave,
      onBeforeLeave: _ctx.beforeLeave
    }, {
      default: withCtx(() => [
        _ctx.visible ? withDirectives((openBlock(), createElementBlock("div", 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] = withModifiers(() => {
          }, ["stop"]))
        }), [
          createElementVNode("div", {
            class: normalizeClass(["panel-header", _ctx.panelHeaderClass])
          }, [
            _ctx.$slots.header ? renderSlot(_ctx.$slots, "header", { key: 0 }) : _ctx.title || _ctx.showClose ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
              createElementVNode("h4", _hoisted_2, toDisplayString(_ctx.title), 1),
              createElementVNode("div", _hoisted_3, [
                _ctx.showCollapse ? (openBlock(), createElementBlock("button", {
                  key: 0,
                  class: "panel-close",
                  onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleCollapse && _ctx.handleCollapse(...args))
                }, [
                  createVNode(_component_hl_icon, null, {
                    default: withCtx(() => [
                      _ctx.collapse ? (openBlock(), createBlock(_component_system_arrow_down, { key: 0 })) : (openBlock(), createBlock(_component_system_arrow_up, { key: 1 }))
                    ]),
                    _: 1
                  })
                ])) : createCommentVNode("v-if", true),
                _ctx.showMaximize ? (openBlock(), createElementBlock("button", {
                  key: 1,
                  class: "panel-close",
                  onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleMaximize && _ctx.handleMaximize(...args))
                }, [
                  createVNode(_component_hl_icon, null, {
                    default: withCtx(() => [
                      _ctx.maximize ? (openBlock(), createBlock(_component_system_minimize, { key: 0 })) : (openBlock(), createBlock(_component_system_maximize, { key: 1 }))
                    ]),
                    _: 1
                  })
                ])) : createCommentVNode("v-if", true),
                _ctx.showClose ? (openBlock(), createElementBlock("button", {
                  key: 2,
                  class: "panel-close",
                  onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleClose && _ctx.handleClose(...args))
                }, [
                  createVNode(_component_hl_icon, null, {
                    default: withCtx(() => [
                      createVNode(_component_system_close)
                    ]),
                    _: 1
                  })
                ])) : createCommentVNode("v-if", true)
              ])
            ], 64)) : createCommentVNode("v-if", true)
          ], 2),
          createElementVNode("div", {
            class: normalizeClass(["panel-body", _ctx.panelBodyClass])
          }, [
            renderSlot(_ctx.$slots, "default")
          ], 2),
          _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
            key: 0,
            class: normalizeClass(["panel-footer", _ctx.panelFooterClass])
          }, [
            renderSlot(_ctx.$slots, "footer")
          ], 2)) : createCommentVNode("v-if", true)
        ], 16, _hoisted_1)), [
          [vShow, _ctx.shown],
          [_directive_trap_focus],
          [_directive_dragger, { boundings: _ctx.boundings, drag: _ctx.drag }],
          [_directive_resizer, _ctx.resize]
        ]) : createCommentVNode("v-if", true)
      ]),
      _: 3
    }, 8, ["name", "onAfterEnter", "onAfterLeave", "onBeforeLeave"])
  ]);
}
var ModelessDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

export { ModelessDialog as default };
//# sourceMappingURL=modeless-dialog.mjs.map