xdesign-vue-next/lib/dialog/dialog.js

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

import { _ as __unplugin_components_2 } from '../_chunks/dep-ae5efda0.js';
import { _ as __unplugin_components_0$1 } from '../_chunks/dep-b09ff084.js';
import { _ as __unplugin_components_1 } from '../_chunks/dep-8eef0183.js';
import { _ as __unplugin_components_0 } from '../_chunks/dep-2f5ed418.js';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { defineComponent, ref, computed, watch, nextTick, getCurrentInstance, onMounted, onBeforeUnmount, createVNode, Teleport, Transition, withDirectives, mergeProps, vShow, resolveDirective } from 'vue';
import props from './props.js';
import { usePrefixClass } from '../hooks/useConfig.js';
import { useAction, useSameTarget } from './hooks.js';
import { useContent, useTNodeJSX } from '../hooks/tnode.js';
import useDestroyOnClose from '../hooks/useDestroyOnClose.js';
import { stack } from './stack.js';
import { getScrollbarWidth } from '../_common/js/utils/getScrollbarWidth.js';
import useTeleport from '../hooks/useTeleport.js';
import { useConfig } from '../config-provider/useConfig.js';
import '@babel/runtime/helpers/typeof';
import 'lodash/isString';
import 'lodash/isObject';
import 'lodash/omit';
import '../button/index.js';
import '../button/button.js';
import '@babel/runtime/helpers/toConsumableArray';
import '../loading/index.js';
import '../loading/directive.js';
import '../loading/plugin.js';
import '../loading/loading.js';
import '@babel/runtime/helpers/slicedToArray';
import '../loading/icon/gradient.js';
import '../_common/js/loading/circle-adapter.js';
import '../_common/js/utils/set-style.js';
import '../_common/js/utils/helper.js';
import '@babel/runtime/helpers/objectWithoutProperties';
import 'lodash/isNull';
import 'lodash/isUndefined';
import 'lodash/isNumber';
import 'lodash/isArray';
import '../utils/dom.js';
import '../_chunks/dep-3a1cce9f.js';
import 'lodash/isFunction';
import '../utils/easing.js';
import '../utils/render-tnode.js';
import 'lodash/isEmpty';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../loading/props.js';
import 'lodash/cloneDeep';
import '../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
import '../_common/js/global-config/default-config.js';
import '../_common/js/global-config/locale/en_US.js';
import '../utils/withInstall.js';
import '../button/props.js';
import '../hooks/useRipple.js';
import '../hooks/useKeepAnimation.js';
import '../utils/set-style.js';
import '../hooks/useDisabled.js';
import 'lodash/isBoolean';

function GetCSSValue(v) {
  return Number.isNaN(Number(v)) ? v : "".concat(Number(v), "px");
}
var mousePosition;
var getClickPosition = function getClickPosition(e) {
  mousePosition = {
    x: e.clientX,
    y: e.clientY
  };
  setTimeout(function () {
    mousePosition = null;
  }, 100);
};
if (typeof window !== "undefined" && window.document && window.document.documentElement) {
  document.documentElement.addEventListener("click", getClickPosition, true);
}
function InitDragEvent(dragBox) {
  var target = dragBox;
  var windowInnerWidth = window.innerWidth || document.documentElement.clientWidth;
  var windowInnerHeight = window.innerHeight || document.documentElement.clientHeight;
  target.addEventListener("mousedown", function (targetEvent) {
    var disX = targetEvent.clientX - target.offsetLeft;
    var disY = targetEvent.clientY - target.offsetTop;
    var dialogW = target.offsetWidth;
    var dialogH = target.offsetHeight;
    if (dialogW > windowInnerWidth || dialogH > windowInnerHeight) return;
    function mouseMoverHandler(documentEvent) {
      var left = documentEvent.clientX - disX;
      var top = documentEvent.clientY - disY;
      if (left < 0) left = 0;
      if (top < 0) top = 0;
      if (windowInnerWidth - target.offsetWidth - left < 0) left = windowInnerWidth - target.offsetWidth;
      if (windowInnerHeight - target.offsetHeight - top < 0) top = windowInnerHeight - target.offsetHeight;
      target.style.position = "absolute";
      target.style.left = "".concat(left, "px");
      target.style.top = "".concat(top, "px");
    }
    function mouseUpHandler() {
      document.removeEventListener("mousemove", mouseMoverHandler);
      document.removeEventListener("mouseup", mouseUpHandler);
    }
    document.addEventListener("mousemove", mouseMoverHandler);
    document.addEventListener("mouseup", mouseUpHandler);
    document.addEventListener("dragend", mouseUpHandler);
  });
}
var key = 1;
var _Dialog = defineComponent({
  name: "XDialog",
  directives: {
    draggable: function draggable(el, binding) {
      if (el && binding && binding.value) {
        InitDragEvent(el);
      }
    }
  },
  inheritAttrs: false,
  props: props,
  emits: ["update:visible"],
  setup: function setup(props2, context) {
    var _this = this;
    var COMPONENT_NAME = usePrefixClass("dialog");
    var classPrefix = usePrefixClass();
    var renderContent = useContent();
    var renderTNodeJSX = useTNodeJSX();
    var dialogEle = ref(null);
    var _useConfig = useConfig("dialog"),
      globalConfig = _useConfig.globalConfig;
    var confirmBtnAction = function confirmBtnAction(e) {
      var _props2$onConfirm;
      (_props2$onConfirm = props2.onConfirm) === null || _props2$onConfirm === void 0 ? void 0 : _props2$onConfirm.call(props2, {
        e: e
      });
    };
    var cancelBtnAction = function cancelBtnAction(e) {
      var _props2$onCancel;
      (_props2$onCancel = props2.onCancel) === null || _props2$onCancel === void 0 ? void 0 : _props2$onCancel.call(props2, {
        e: e
      });
      emitCloseEvent({
        e: e,
        trigger: "cancel"
      });
    };
    var _useAction = useAction({
        confirmBtnAction: confirmBtnAction,
        cancelBtnAction: cancelBtnAction
      }),
      getConfirmBtn = _useAction.getConfirmBtn,
      getCancelBtn = _useAction.getCancelBtn;
    var teleportElement = useTeleport(function () {
      return props2.attach;
    });
    useDestroyOnClose();
    var timer = ref();
    var styleEl = ref();
    var isModal = computed(function () {
      return props2.mode === "modal";
    });
    var isModeLess = computed(function () {
      return props2.mode === "modeless";
    });
    var isNormal = computed(function () {
      return props2.mode === "normal";
    });
    var isFullScreen = computed(function () {
      return props2.mode === "full-screen";
    });
    var maskClass = computed(function () {
      return ["".concat(COMPONENT_NAME.value, "__mask"), !props2.showOverlay && "".concat(classPrefix.value, "-is-hidden")];
    });
    var positionClass = computed(function () {
      if (isNormal.value) return [];
      if (isFullScreen.value) return ["".concat(COMPONENT_NAME.value, "__position_fullscreen")];
      return ["".concat(COMPONENT_NAME.value, "__position"), !!props2.top && "".concat(COMPONENT_NAME.value, "--top"), "".concat(props2.placement && !props2.top ? "".concat(COMPONENT_NAME.value, "--").concat(props2.placement) : "")];
    });
    var wrapClass = computed(function () {
      return [!isNormal.value && "".concat(COMPONENT_NAME.value, "__wrap")];
    });
    var positionStyle = computed(function () {
      if (isFullScreen.value) return {};
      var top = props2.top;
      var topStyle = {};
      if (top !== void 0) {
        var topValue = GetCSSValue(top);
        topStyle = {
          paddingTop: topValue
        };
      }
      return topStyle;
    });
    var dialogClass = computed(function () {
      var dialogClass2 = ["".concat(COMPONENT_NAME.value), "".concat(COMPONENT_NAME.value, "__modal-").concat(props2.theme), isModeLess.value && props2.draggable && "".concat(COMPONENT_NAME.value, "--draggable")];
      if (isFullScreen.value) {
        dialogClass2.push("".concat(COMPONENT_NAME.value, "__fullscreen"));
      } else {
        dialogClass2.push.apply(dialogClass2, ["".concat(COMPONENT_NAME.value, "--default"), "".concat(COMPONENT_NAME.value, "--").concat(props2.placement)]);
      }
      return dialogClass2;
    });
    var dialogStyle = computed(function () {
      return !isFullScreen.value ? {
        width: GetCSSValue(props2.width)
      } : {};
    });
    watch(function () {
      return props2.visible;
    }, function (value) {
      if (value) {
        var _document$activeEleme;
        if (isModal.value && !props2.showInAttachedElement || isFullScreen.value) {
          if (props2.preventScrollThrough) {
            document.head.appendChild(styleEl.value);
          }
          nextTick(function () {
            if (mousePosition && dialogEle.value) {
              dialogEle.value.style.transformOrigin = "".concat(mousePosition.x - dialogEle.value.offsetLeft, "px ").concat(mousePosition.y - dialogEle.value.offsetTop, "px");
            }
          });
        }
        (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.blur();
      } else {
        clearStyleFunc();
      }
      storeUid(value);
      addKeyboardEvent(value);
    });
    function destroySelf() {
      var _styleEl$value$parent, _styleEl$value$parent2;
      (_styleEl$value$parent = styleEl.value.parentNode) === null || _styleEl$value$parent === void 0 || (_styleEl$value$parent2 = _styleEl$value$parent.removeChild) === null || _styleEl$value$parent2 === void 0 ? void 0 : _styleEl$value$parent2.call(_styleEl$value$parent, styleEl.value);
    }
    function clearStyleFunc() {
      clearTimeout(timer.value);
      timer.value = setTimeout(function () {
        destroySelf();
      }, 150);
    }
    var instance = getCurrentInstance();
    var storeUid = function storeUid(flag) {
      if (flag) {
        stack.push(instance.uid);
      } else {
        stack.pop();
      }
    };
    var addKeyboardEvent = function addKeyboardEvent(status) {
      if (status) {
        document.addEventListener("keydown", keyboardEvent);
        props2.confirmOnEnter && document.addEventListener("keydown", keyboardEnterEvent);
      } else {
        document.removeEventListener("keydown", keyboardEvent);
        props2.confirmOnEnter && document.removeEventListener("keydown", keyboardEnterEvent);
      }
    };
    var keyboardEnterEvent = function keyboardEnterEvent(e) {
      var eventSrc = e.target;
      if (eventSrc.tagName.toLowerCase() === "input") return;
      var code = e.code;
      if ((code === "Enter" || code === "NumpadEnter") && stack.top === instance.uid) {
        var _props2$onConfirm2;
        (_props2$onConfirm2 = props2.onConfirm) === null || _props2$onConfirm2 === void 0 ? void 0 : _props2$onConfirm2.call(props2, {
          e: e
        });
      }
    };
    var keyboardEvent = function keyboardEvent(e) {
      if (e.code === "Escape" && stack.top === instance.uid) {
        var _props2$onEscKeydown, _props2$closeOnEscKey;
        (_props2$onEscKeydown = props2.onEscKeydown) === null || _props2$onEscKeydown === void 0 ? void 0 : _props2$onEscKeydown.call(props2, {
          e: e
        });
        if ((_props2$closeOnEscKey = props2.closeOnEscKeydown) !== null && _props2$closeOnEscKey !== void 0 ? _props2$closeOnEscKey : globalConfig.value.closeOnEscKeydown) {
          emitCloseEvent({
            e: e,
            trigger: "esc"
          });
        }
      }
    };
    var overlayAction = function overlayAction(e) {
      var _props2$closeOnOverla;
      if (props2.showOverlay && ((_props2$closeOnOverla = props2.closeOnOverlayClick) !== null && _props2$closeOnOverla !== void 0 ? _props2$closeOnOverla : globalConfig.value.closeOnOverlayClick)) {
        var _props2$onOverlayClic;
        (_props2$onOverlayClic = props2.onOverlayClick) === null || _props2$onOverlayClic === void 0 ? void 0 : _props2$onOverlayClic.call(props2, {
          e: e
        });
        emitCloseEvent({
          e: e,
          trigger: "overlay"
        });
      }
    };
    var _useSameTarget = useSameTarget(overlayAction),
      onClick = _useSameTarget.onClick,
      onMousedown = _useSameTarget.onMousedown,
      onMouseup = _useSameTarget.onMouseup;
    var closeBtnAction = function closeBtnAction(e) {
      var _props2$onCloseBtnCli;
      (_props2$onCloseBtnCli = props2.onCloseBtnClick) === null || _props2$onCloseBtnCli === void 0 ? void 0 : _props2$onCloseBtnCli.call(props2, {
        e: e
      });
      emitCloseEvent({
        trigger: "close-btn",
        e: e
      });
    };
    var afterEnter = function afterEnter() {
      var _props2$onOpened;
      (_props2$onOpened = props2.onOpened) === null || _props2$onOpened === void 0 ? void 0 : _props2$onOpened.call(props2);
    };
    var afterLeave = function afterLeave() {
      var _props2$onClosed;
      if (isModeLess.value && props2.draggable && dialogEle.value) {
        dialogEle.value.style.position = "relative";
        dialogEle.value.style.left = "unset";
        dialogEle.value.style.top = "unset";
      }
      (_props2$onClosed = props2.onClosed) === null || _props2$onClosed === void 0 ? void 0 : _props2$onClosed.call(props2);
    };
    var emitCloseEvent = function emitCloseEvent(ctx) {
      var _props2$onClose;
      (_props2$onClose = props2.onClose) === null || _props2$onClose === void 0 ? void 0 : _props2$onClose.call(props2, ctx);
      context.emit("update:visible", false);
    };
    var hasEventOn = function hasEventOn(name) {
      var _this$_events;
      var eventFuncs = (_this$_events = _this["_events"]) === null || _this$_events === void 0 ? void 0 : _this$_events[name];
      return !!(eventFuncs !== null && eventFuncs !== void 0 && eventFuncs.length);
    };
    var getIcon = function getIcon() {
      var icon = {
        info: createVNode(__unplugin_components_0, {
          "class": "".concat(classPrefix.value, "-is-info")
        }, null),
        warning: createVNode(__unplugin_components_1, {
          "class": "".concat(classPrefix.value, "-is-warning")
        }, null),
        danger: createVNode(__unplugin_components_1, {
          "class": "".concat(classPrefix.value, "-is-error")
        }, null),
        success: createVNode(__unplugin_components_0$1, {
          "class": "".concat(classPrefix.value, "-is-success")
        }, null)
      };
      return icon[props2.theme];
    };
    var renderDialog = function renderDialog() {
      var defaultHeader = createVNode("h5", {
        "class": "title"
      }, null);
      var defaultCloseBtn = createVNode(__unplugin_components_2, null, null);
      var body = renderContent("default", "body");
      var defaultFooter = createVNode("div", null, [getCancelBtn({
        cancelBtn: props2.cancelBtn,
        globalCancel: globalConfig.value.cancel,
        className: "".concat(COMPONENT_NAME.value, "__cancel")
      }), getConfirmBtn({
        theme: props2.theme,
        confirmBtn: props2.confirmBtn,
        globalConfirm: globalConfig.value.confirm,
        globalConfirmBtnTheme: globalConfig.value.confirmBtnTheme,
        className: "".concat(COMPONENT_NAME.value, "__confirm")
      })]);
      var headerClassName = isFullScreen.value ? ["".concat(COMPONENT_NAME.value, "__header"), "".concat(COMPONENT_NAME.value, "__header--fullscreen")] : "".concat(COMPONENT_NAME.value, "__header");
      var closeClassName = isFullScreen.value ? ["".concat(COMPONENT_NAME.value, "__close"), "".concat(COMPONENT_NAME.value, "__close--fullscreen")] : "".concat(COMPONENT_NAME.value, "__close");
      var bodyClassName = props2.theme === "default" ? ["".concat(COMPONENT_NAME.value, "__body")] : ["".concat(COMPONENT_NAME.value, "__body__icon")];
      var footerContent = renderTNodeJSX("footer", defaultFooter);
      if (isFullScreen.value && footerContent) {
        bodyClassName.push("".concat(COMPONENT_NAME.value, "__body--fullscreen"));
      } else if (isFullScreen.value) {
        bodyClassName.push("".concat(COMPONENT_NAME.value, "__body--fullscreen--without-footer"));
      }
      var footerClassName = isFullScreen.value ? ["".concat(COMPONENT_NAME.value, "__footer"), "".concat(COMPONENT_NAME.value, "__footer--fullscreen")] : "".concat(COMPONENT_NAME.value, "__footer");
      var onStopDown = function onStopDown(e) {
        if (isModeLess.value && props2.draggable) e.stopPropagation();
      };
      return createVNode("div", {
        "class": wrapClass.value
      }, [createVNode("div", {
        "class": positionClass.value,
        "style": positionStyle.value,
        "onClick": onClick,
        "onMousedown": onMousedown,
        "onMouseup": onMouseup
      }, [withDirectives(createVNode("div", {
        "key": "dialog",
        "class": dialogClass.value,
        "style": dialogStyle.value,
        "ref": dialogEle
      }, [createVNode("div", {
        "class": headerClassName,
        "onMousedown": onStopDown
      }, [createVNode("div", {
        "class": "".concat(COMPONENT_NAME.value, "__header-content")
      }, [getIcon(), renderTNodeJSX("header", defaultHeader)]), props2.closeBtn ? createVNode("span", {
        "class": closeClassName,
        "onClick": closeBtnAction
      }, [renderTNodeJSX("closeBtn", defaultCloseBtn)]) : null]), createVNode("div", {
        "class": bodyClassName,
        "onMousedown": onStopDown
      }, [body]), footerContent && createVNode("div", {
        "class": footerClassName,
        "onMousedown": onStopDown
      }, [footerContent])]), [[resolveDirective("draggable"), isModeLess.value && props2.draggable]])])]);
    };
    onMounted(function () {
      var hasScrollBar = document.documentElement.scrollHeight > document.documentElement.clientHeight;
      var scrollWidth = hasScrollBar ? getScrollbarWidth() : 0;
      styleEl.value = document.createElement("style");
      styleEl.value.dataset.id = "td_dialog_".concat(+new Date(), "_").concat(key += 1);
      styleEl.value.innerHTML = "\n        html body {\n          overflow-y: hidden;\n          width: calc(100% - ".concat(scrollWidth, "px);\n        }\n      ");
    });
    onBeforeUnmount(function () {
      addKeyboardEvent(false);
      destroySelf();
    });
    return {
      COMPONENT_NAME: COMPONENT_NAME,
      isModal: isModal,
      isModeLess: isModeLess,
      isFullScreen: isFullScreen,
      maskClass: maskClass,
      dialogClass: dialogClass,
      dialogStyle: dialogStyle,
      dialogEle: dialogEle,
      afterEnter: afterEnter,
      afterLeave: afterLeave,
      hasEventOn: hasEventOn,
      renderDialog: renderDialog,
      teleportElement: teleportElement
    };
  },
  render: function render() {
    var _ref,
      _this2 = this;
    var COMPONENT_NAME = this.COMPONENT_NAME;
    var maskView = (this.isModal || this.isFullScreen) && createVNode("div", {
      "key": "mask",
      "class": this.maskClass
    }, null);
    var dialogView = this.renderDialog();
    var view = [maskView, dialogView];
    var ctxStyle = {
      zIndex: this.zIndex
    };
    var ctxClass = ["".concat(COMPONENT_NAME, "__ctx"), (_ref = {}, _defineProperty(_ref, "".concat(COMPONENT_NAME, "__ctx--fixed"), this.isModal || this.isFullScreen), _defineProperty(_ref, "".concat(COMPONENT_NAME, "__ctx--absolute"), this.isModal && this.showInAttachedElement), _defineProperty(_ref, "".concat(COMPONENT_NAME, "__ctx--modeless"), this.isModeLess), _ref)];
    return createVNode(Teleport, {
      "disabled": !this.attach || !this.teleportElement,
      "to": this.teleportElement
    }, {
      "default": function _default() {
        return [createVNode(Transition, {
          "duration": 300,
          "name": "".concat(COMPONENT_NAME, "-zoom__vue"),
          "onAfterEnter": _this2.afterEnter,
          "onAfterLeave": _this2.afterLeave
        }, {
          "default": function _default() {
            return [(!_this2.destroyOnClose || _this2.visible) && withDirectives(createVNode("div", mergeProps({
              "class": ctxClass,
              "style": ctxStyle
            }, _this2.$attrs), [view]), [[vShow, _this2.visible]])];
          }
        })];
      }
    });
  }
});

export { _Dialog as default };
//# sourceMappingURL=dialog.js.map