yuang-framework-ui-pc/lib/ele-dialog/index.cjs

yuang-framework-ui-pc Library

"use strict";
const vue = require("vue");
const elementPlus = require("element-plus");
const icons = require("../icons");
const ReceiverView = require("../ele-config-provider/components/receiver-view");
const util = require("../ele-pro-layout/util");
const util$1 = require("./util");
const props = require("./props");
const _sfc_main = vue.defineComponent({
  name: "EleDialog",
  components: {
    ElDialog: elementPlus.ElDialog,
    ElIcon: elementPlus.ElIcon,
    CloseOutlined: icons.CloseOutlined,
    CompressOutlined: icons.CompressOutlined,
    ExpandOutlined: icons.ExpandOutlined,
    ResizeOutlined: icons.ResizeOutlined,
    ReceiverView
  },
  inheritAttrs: false,
  props: props.eleDialogProps,
  emits: props.eleDialogEmits,
  setup(props2, { emit }) {
    const layoutState = util.useLayoutState();
    const isResponsive = util.useResponsive(props2);
    const dialogRef = vue.ref(null);
    const isFullscreen = vue.ref(props2.fullscreen ?? false);
    const isActivated = vue.ref(true);
    const modalClass = vue.computed(() => {
      const classes = [util$1.wrapperClass];
      if (props2.responsive ?? isResponsive.value ?? true) {
        classes.push("ele-dialog-responsive");
      }
      if (props2.alignCenter || props2.position === "center") {
        classes.push("ele-dialog-center");
      } else if (props2.position === "top") {
        classes.push("ele-dialog-top");
      } else if (props2.position === "bottom") {
        classes.push("ele-dialog-bottom");
      } else if (props2.position === "left") {
        classes.push("ele-dialog-left");
      } else if (props2.position === "right") {
        classes.push("ele-dialog-right");
      } else if (props2.position === "leftTop") {
        classes.push("ele-dialog-left-top");
      } else if (props2.position === "leftBottom") {
        classes.push("ele-dialog-left-bottom");
      } else if (props2.position === "rightTop") {
        classes.push("ele-dialog-right-top");
      } else if (props2.position === "rightBottom") {
        classes.push("ele-dialog-right-bottom");
      }
      if (props2.draggable) {
        classes.push("ele-dialog-movable");
      }
      if (props2.resizable) {
        classes.push("ele-dialog-resizable");
      }
      if (props2.multiple) {
        classes.push("ele-dialog-multiple");
      }
      if (isFullscreen.value) {
        classes.push("ele-dialog-fullscreen");
      }
      if (!props2.modelValue) {
        classes.push(util$1.closedClass);
      }
      if (!isActivated.value && props2.modelValue) {
        classes.push("ele-dialog-hide");
      }
      if (props2.inner) {
        classes.push("ele-dialog-inner");
      }
      if (props2.modalClass) {
        classes.push(props2.modalClass);
      }
      return classes.join(" ");
    });
    const teleportTo = vue.computed(() => {
      return util$1.getDialogContainer(
        props2.inner,
        props2.multiple,
        props2.appendTo,
        layoutState.dialogsEl
      );
    });
    const teleportDisabled = vue.computed(() => {
      const appendTo = props2.appendTo || "body";
      const disabled = appendTo === "body" ? !props2.appendToBody : false;
      return props2.multiple || props2.inner ? false : disabled;
    });
    const {
      handleHeaderMousedown,
      handleHeaderTouchstart,
      handleResizeMousedown,
      handleResizeTouchstart,
      bindAutoTopEvent,
      unbindAutoTopEvent,
      topDialog,
      setInitPosition,
      resetDialogStyle
    } = util$1.useDialogEvent(dialogRef, props2, isFullscreen);
    const updateModelValue = (modelValue) => {
      emit("update:modelValue", modelValue);
    };
    const toggleFullscreen = (fullscreen) => {
      isFullscreen.value = fullscreen ?? !isFullscreen.value;
      vue.nextTick(() => {
        topDialog();
      });
      emit("update:fullscreen", isFullscreen.value);
    };
    const handleOpen = () => {
      if (props2.resetOnClose || props2.destroyOnClose) {
        isFullscreen.value = props2.fullscreen ?? false;
      }
      vue.nextTick(() => {
        if (props2.resetOnClose) {
          resetDialogStyle();
        } else {
          setInitPosition();
        }
        topDialog();
      });
      emit("open");
    };
    const handleOpened = () => {
      bindAutoTopEvent();
      emit("opened");
    };
    const handleClose = () => {
      unbindAutoTopEvent();
      emit("close");
    };
    const handleClosed = () => {
      emit("closed");
    };
    const handleOpenAutoFocus = () => {
      emit("openAutoFocus");
    };
    const handleCloseAutoFocus = () => {
      emit("closeAutoFocus");
    };
    vue.watch(
      () => props2.fullscreen,
      (fullscreen) => {
        isFullscreen.value = fullscreen ?? false;
      }
    );
    vue.onMounted(() => {
      if (props2.modelValue) {
        setInitPosition();
      }
    });
    vue.onActivated(() => {
      isActivated.value = true;
    });
    vue.onDeactivated(() => {
      isActivated.value = false;
    });
    return {
      dialogRef,
      isFullscreen,
      modalClass,
      teleportTo,
      teleportDisabled,
      handleHeaderMousedown,
      handleHeaderTouchstart,
      handleResizeMousedown,
      handleResizeTouchstart,
      updateModelValue,
      toggleFullscreen,
      handleOpen,
      handleOpened,
      handleClose,
      handleClosed,
      handleOpenAutoFocus,
      handleCloseAutoFocus
    };
  }
});
const _export_sfc = (sfc, props2) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props2) {
    target[key] = val;
  }
  return target;
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_CompressOutlined = vue.resolveComponent("CompressOutlined");
  const _component_ExpandOutlined = vue.resolveComponent("ExpandOutlined");
  const _component_ElIcon = vue.resolveComponent("ElIcon");
  const _component_CloseOutlined = vue.resolveComponent("CloseOutlined");
  const _component_ResizeOutlined = vue.resolveComponent("ResizeOutlined");
  const _component_ReceiverView = vue.resolveComponent("ReceiverView");
  const _component_ElDialog = vue.resolveComponent("ElDialog");
  return vue.openBlock(), vue.createBlock(vue.Teleport, {
    to: _ctx.teleportTo,
    disabled: _ctx.teleportDisabled
  }, [
    vue.createVNode(_component_ElDialog, vue.mergeProps(_ctx.$attrs, {
      ref: "dialogRef",
      modelValue: _ctx.modelValue,
      title: _ctx.title,
      width: _ctx.width,
      fullscreen: false,
      modal: _ctx.multiple ? false : _ctx.modal,
      modalClass: _ctx.modalClass,
      appendToBody: false,
      lockScroll: _ctx.inner || _ctx.multiple ? false : _ctx.lockScroll,
      openDelay: _ctx.openDelay,
      closeDelay: _ctx.closeDelay,
      closeOnClickModal: _ctx.closeOnClickModal,
      closeOnPressEscape: _ctx.closeOnPressEscape,
      showClose: false,
      beforeClose: _ctx.beforeClose,
      draggable: false,
      overflow: false,
      center: _ctx.center,
      alignCenter: false,
      destroyOnClose: _ctx.destroyOnClose,
      zIndex: _ctx.zIndex,
      headerAriaLevel: _ctx.headerAriaLevel,
      "onUpdate:modelValue": _ctx.updateModelValue,
      onOpen: _ctx.handleOpen,
      onOpened: _ctx.handleOpened,
      onClose: _ctx.handleClose,
      onClosed: _ctx.handleClosed,
      onOpenAutoFocus: _ctx.handleOpenAutoFocus,
      onCloseAutoFocus: _ctx.handleCloseAutoFocus
    }), vue.createSlots({
      header: vue.withCtx(({ close, titleId, titleClass }) => [
        vue.createElementVNode("div", {
          style: vue.normalizeStyle(_ctx.headerStyle),
          class: "ele-dialog-header",
          onMousedown: _cache[6] || (_cache[6] = (...args) => _ctx.handleHeaderMousedown && _ctx.handleHeaderMousedown(...args)),
          onTouchstart: _cache[7] || (_cache[7] = (...args) => _ctx.handleHeaderTouchstart && _ctx.handleHeaderTouchstart(...args))
        }, [
          vue.createElementVNode("div", {
            class: "ele-dialog-title",
            style: vue.normalizeStyle(_ctx.titleStyle)
          }, [
            vue.renderSlot(_ctx.$slots, "header", {
              close,
              titleId,
              titleClass
            }, () => [
              vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
            ])
          ], 4),
          _ctx.maxable ? (vue.openBlock(), vue.createElementBlock("div", {
            key: 0,
            class: "ele-dialog-tool ele-dialog-tool-max",
            style: vue.normalizeStyle(_ctx.fullscreenBtnStyle),
            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.toggleFullscreen()),
            onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {
            }, ["stop"])),
            onTouchstart: _cache[2] || (_cache[2] = vue.withModifiers(() => {
            }, ["stop"]))
          }, [
            vue.renderSlot(_ctx.$slots, "maxIcon", { fullscreen: _ctx.isFullscreen }, () => [
              vue.createVNode(_component_ElIcon, null, {
                default: vue.withCtx(() => [
                  _ctx.isFullscreen ? (vue.openBlock(), vue.createBlock(_component_CompressOutlined, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_ExpandOutlined, { key: 1 }))
                ]),
                _: 1
              })
            ])
          ], 36)) : vue.createCommentVNode("", true),
          _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("div", {
            key: 1,
            class: "ele-dialog-tool",
            style: vue.normalizeStyle(_ctx.closeBtnStyle),
            onClick: _cache[3] || (_cache[3] = ($event) => _ctx.updateModelValue(false)),
            onMousedown: _cache[4] || (_cache[4] = vue.withModifiers(() => {
            }, ["stop"])),
            onTouchstart: _cache[5] || (_cache[5] = vue.withModifiers(() => {
            }, ["stop"]))
          }, [
            vue.renderSlot(_ctx.$slots, "closeIcon", {}, () => [
              vue.createVNode(_component_ElIcon, null, {
                default: vue.withCtx(() => [
                  _ctx.closeIcon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.closeIcon), { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_CloseOutlined, { key: 1 }))
                ]),
                _: 1
              })
            ])
          ], 36)) : vue.createCommentVNode("", true)
        ], 36),
        _ctx.resizable ? (vue.openBlock(), vue.createElementBlock("div", {
          key: 0,
          class: vue.normalizeClass([
            "ele-dialog-resize-icon",
            { "is-horizontal": _ctx.resizable === "horizontal" },
            { "is-vertical": _ctx.resizable === "vertical" }
          ]),
          style: vue.normalizeStyle(_ctx.resizeIconStyle),
          onMousedown: _cache[8] || (_cache[8] = (...args) => _ctx.handleResizeMousedown && _ctx.handleResizeMousedown(...args)),
          onTouchstart: _cache[9] || (_cache[9] = (...args) => _ctx.handleResizeTouchstart && _ctx.handleResizeTouchstart(...args))
        }, [
          vue.renderSlot(_ctx.$slots, "resizeIcon", {}, () => [
            vue.createVNode(_component_ElIcon, null, {
              default: vue.withCtx(() => [
                vue.createVNode(_component_ResizeOutlined)
              ]),
              _: 1
            })
          ])
        ], 38)) : vue.createCommentVNode("", true)
      ]),
      default: vue.withCtx(() => [
        vue.createVNode(_component_ReceiverView, {
          wrapPosition: false,
          class: vue.normalizeClass(["ele-dialog-body", { "is-form": _ctx.form }]),
          style: vue.normalizeStyle(_ctx.bodyStyle)
        }, {
          default: vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "default")
          ]),
          _: 3
        }, 8, ["class", "style"])
      ]),
      _: 2
    }, [
      _ctx.$slots.footer ? {
        name: "footer",
        fn: vue.withCtx(() => [
          vue.createElementVNode("div", {
            class: "ele-dialog-footer",
            style: vue.normalizeStyle(_ctx.footerStyle)
          }, [
            vue.renderSlot(_ctx.$slots, "footer")
          ], 4)
        ]),
        key: "0"
      } : void 0
    ]), 1040, ["modelValue", "title", "width", "modal", "modalClass", "lockScroll", "openDelay", "closeDelay", "closeOnClickModal", "closeOnPressEscape", "beforeClose", "center", "destroyOnClose", "zIndex", "headerAriaLevel", "onUpdate:modelValue", "onOpen", "onOpened", "onClose", "onClosed", "onOpenAutoFocus", "onCloseAutoFocus"])
  ], 8, ["to", "disabled"]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = index;