hongluan-ui/lib/components/message-box/src/index.js

Hongluan Component Library for Vue 3

'use strict';

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

var vue = require('vue');
var index$1 = require('../../button/index.js');
var index = require('../../overlay/index.js');
var index$2 = require('../../icon/index.js');
require('../../focus-trap/index.js');
require('../../system-icon/index.js');
require('../../../hooks/index.js');
require('../../../utils/index.js');
require('../../../constants/index.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var success = require('../../system-icon/src/success.js');
var info = require('../../system-icon/src/info.js');
var warning = require('../../system-icon/src/warning.js');
var close = require('../../system-icon/src/close.js');
var error = require('../../system-icon/src/error.js');
var focusTrap = require('../../focus-trap/src/focus-trap.js');
var validator = require('../../../utils/vue/validator.js');
var shared = require('@vue/shared');
var index$3 = require('../../../hooks/use-namespace/index.js');
var index$4 = require('../../../hooks/use-locale/index.js');
var index$5 = require('../../../hooks/use-z-index/index.js');
var icon = require('../../../constants/icon.js');
var types = require('../../../utils/types.js');
var index$6 = require('../../../hooks/use-id/index.js');
var index$7 = require('../../../hooks/use-lockscreen/index.js');
var rand = require('../../../utils/rand.js');

const _sfc_main = vue.defineComponent({
  name: "MessageBox",
  install: null,
  components: {
    HlOverlay: index.HlOverlay,
    HlButton: index$1.HlButton,
    HlIcon: index$2.HlIcon,
    SystemSuccess: success["default"],
    SystemInfo: info["default"],
    SystemWarning: warning["default"],
    SystemClose: close["default"],
    SystemError: error["default"],
    HlFocusTrap: focusTrap["default"]
  },
  inheritAttrs: false,
  props: {
    id: String,
    singleton: Boolean,
    beforeClose: {
      type: Function,
      default: void 0
    },
    callback: Function,
    buttonSize: {
      type: String,
      validator: validator.isValidComponentSize,
      default: "md"
    },
    cancelButtonText: {
      type: String
    },
    cancelButtonClass: String,
    center: Boolean,
    closeOnClickModal: {
      type: Boolean,
      default: true
    },
    closeOnPressEscape: {
      type: Boolean,
      default: true
    },
    closeOnHashChange: {
      type: Boolean,
      default: true
    },
    confirmButtonText: {
      type: String
    },
    confirmButtonClass: String,
    appendTo: {
      type: [String, Object],
      default: "body"
    },
    customClass: String,
    customStyle: {
      type: Object,
      default: () => ({})
    },
    dangerouslyUseHTMLString: Boolean,
    distinguishCancelAndClose: Boolean,
    lockScroll: {
      type: Boolean,
      default: true
    },
    message: {
      type: [String, Object],
      validator: (val) => {
        return shared.isString(val) || vue.isVNode(val);
      }
    },
    icon: {
      type: Object,
      validator: (val) => vue.isVNode(val)
    },
    modalFade: {
      type: Boolean,
      default: true
    },
    modalClass: {
      type: String
    },
    modal: {
      type: Boolean,
      default: true
    },
    roundButton: Boolean,
    showCancelButton: Boolean,
    showConfirmButton: {
      type: Boolean,
      default: true
    },
    showClose: {
      type: Boolean,
      default: true
    },
    confirmButtonType: {
      type: String,
      default: "primary"
    },
    cancelButtonType: String,
    title: String,
    zIndex: {
      type: Number
    },
    animationName: {
      type: String,
      default: "bounce"
    },
    type: { type: String, default: "" },
    boxType: {
      type: String,
      default: ""
    }
  },
  emits: ["vanish", "action"],
  setup(props, { emit }) {
    const { namespace } = index$3.useNamespace();
    const { t } = index$4.useLocale();
    const visible = vue.ref(false);
    const { nextZIndex } = index$5.useZIndex();
    const state = vue.reactive({
      beforeClose: props.beforeClose,
      callback: props.callback,
      cancelButtonText: props.cancelButtonText,
      cancelButtonClass: props.cancelButtonClass,
      confirmButtonText: props.confirmButtonText,
      confirmButtonClass: props.confirmButtonClass,
      confirmButtonType: props.confirmButtonType || "primary",
      cancelButtonType: props.cancelButtonType || null,
      customClass: props.customClass,
      customStyle: props.customStyle,
      dangerouslyUseHTMLString: props.dangerouslyUseHTMLString || false,
      distinguishCancelAndClose: props.distinguishCancelAndClose || false,
      message: props.message || null,
      modalFade: props.modalFade || true,
      modalClass: props.modalClass || "",
      showCancelButton: props.showCancelButton || false,
      showConfirmButton: props.showConfirmButton || (props.showConfirmButton !== false ? true : props.showConfirmButton),
      type: props.type || "",
      title: props.title || void 0,
      showInput: false,
      inputValue: "",
      animationName: props.animationName,
      action: "",
      confirmButtonLoading: false,
      cancelButtonLoading: false,
      confirmButtonDisabled: false,
      editorErrorMessage: "",
      validateError: false,
      zIndex: nextZIndex()
    });
    const hasMessage = vue.computed(() => !!props.message);
    const hasDefinedIcon = vue.computed(() => {
      return !!icon.MessageTypeIconMap[props.type];
    });
    const rootRef = vue.ref();
    const headerRef = vue.ref();
    const focusStartRef = vue.ref();
    const confirmRef = vue.ref(null);
    const messageBoxRef = vue.ref(null);
    let cleanup = null;
    const rootContainer = vue.computed(() => {
      if (shared.isString(props.appendTo)) {
        const appendTo = document.querySelector(props.appendTo);
        if (!types.isElement(appendTo)) {
          return "body";
        }
      }
      return props.appendTo;
    });
    const contentId = index$6.useId();
    vue.watch(() => visible.value, (val) => {
      var _a, _b;
      if (val) {
        if (props.boxType !== "prompt") {
          focusStartRef.value = (_b = (_a = confirmRef.value) == null ? void 0 : _a.$el) != null ? _b : rootRef.value;
        }
        state.zIndex = nextZIndex();
      }
      if (props.boxType !== "prompt")
        return;
    });
    vue.onMounted(async () => {
      await vue.nextTick();
      if (props.closeOnHashChange) {
        window.addEventListener("hashchange", doClose);
      }
    });
    vue.onBeforeUnmount(() => {
      if (props.closeOnHashChange) {
        window.removeEventListener("hashchange", doClose);
      }
    });
    function doClose() {
      if (!visible.value)
        return;
      visible.value = false;
      vue.nextTick(() => {
        if (state.action)
          emit("action", state.action);
      });
    }
    const handleWrapperClick = () => {
      if (props.closeOnClickModal) {
        handleAction(props.distinguishCancelAndClose ? "close" : "cancel");
      }
    };
    const handleAction = (action) => {
      var _a;
      if (props.boxType === "prompt" && action === "confirm" && !validate()) {
        return;
      }
      state.action = action;
      if (state.beforeClose) {
        (_a = state.beforeClose) == null ? void 0 : _a.call(state, action, state, doClose);
      } else {
        doClose();
      }
    };
    const validate = () => {
      return true;
    };
    const handleClose = () => {
      handleAction("close");
    };
    const afterLeave = () => {
      emit("vanish");
      cleanup && cleanup();
    };
    const onCloseRequested = () => {
      if (props.closeOnPressEscape) {
        handleClose();
      }
    };
    if (props.lockScroll) {
      cleanup = index$7.useLockscreen(visible, false);
    }
    return {
      ...vue.toRefs(state),
      rootContainer,
      rootRef,
      headerRef,
      focusStartRef,
      contentId,
      messageBoxId: rand.generateId(),
      namespace,
      hasDefinedIcon,
      visible,
      hasMessage,
      confirmRef,
      messageBoxRef,
      doClose,
      handleClose,
      onCloseRequested,
      handleWrapperClick,
      handleAction,
      afterLeave,
      t
    };
  }
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_hl_overlay = vue.resolveComponent("hl-overlay");
  const _component_system_success = vue.resolveComponent("system-success");
  const _component_system_info = vue.resolveComponent("system-info");
  const _component_system_warning = vue.resolveComponent("system-warning");
  const _component_system_error = vue.resolveComponent("system-error");
  const _component_hl_icon = vue.resolveComponent("hl-icon");
  const _component_system_close = vue.resolveComponent("system-close");
  const _component_hl_button = vue.resolveComponent("hl-button");
  const _component_hl_focus_trap = vue.resolveComponent("hl-focus-trap");
  return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
    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,
          "msg-overlay-id": _ctx.messageBoxId,
          onClick: vue.withModifiers(_ctx.handleWrapperClick, ["self"])
        }, null, 8, ["mask", "overlay-class", "z-index", "msg-overlay-id", "onClick"]), [
          [vue.vShow, _ctx.visible]
        ])
      ]),
      _: 1
    }),
    (vue.openBlock(), vue.createBlock(vue.Teleport, { to: _ctx.rootContainer }, [
      vue.createVNode(vue.Transition, {
        name: _ctx.animationName,
        onAfterLeave: _ctx.afterLeave
      }, {
        default: vue.withCtx(() => [
          vue.withDirectives(vue.createElementVNode("div", {
            ref: "messageBoxRef",
            role: "dialog",
            "aria-label": _ctx.title,
            "aria-modal": "true",
            "aria-describedby": !_ctx.showInput ? _ctx.contentId : void 0,
            class: vue.normalizeClass([_ctx.namespace + "-message-box", _ctx.customClass]),
            style: vue.normalizeStyle({ zIndex: _ctx.zIndex + 1, ..._ctx.customStyle }),
            "msg-box-id": _ctx.messageBoxId,
            onClick: vue.withModifiers(_ctx.handleWrapperClick, ["self"])
          }, [
            vue.createVNode(_component_hl_focus_trap, {
              loop: "",
              trapped: _ctx.visible,
              "focus-trap-el": _ctx.rootRef,
              "focus-start-el": _ctx.focusStartRef,
              onReleaseRequested: _ctx.onCloseRequested
            }, {
              default: vue.withCtx(() => [
                vue.createElementVNode("div", {
                  ref: "rootRef",
                  class: vue.normalizeClass([
                    _ctx.namespace + "-panel",
                    _ctx.hasDefinedIcon ? `${_ctx.type === "error" ? "danger" : _ctx.type}` : "",
                    "borderless"
                  ]),
                  tabindex: "-1",
                  onClick: vue.withModifiers(() => {
                  }, ["stop"])
                }, [
                  vue.createElementVNode("div", {
                    ref: "headerRef",
                    class: "panel-header"
                  }, [
                    _ctx.type || _ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("div", {
                      key: 0,
                      class: "panel-header-left"
                    }, [
                      vue.renderSlot(_ctx.$slots, "icon", {}, () => [
                        vue.createVNode(_component_hl_icon, null, {
                          default: vue.withCtx(() => [
                            _ctx.type === "success" ? (vue.openBlock(), vue.createBlock(_component_system_success, { key: 0 })) : _ctx.type === "info" ? (vue.openBlock(), vue.createBlock(_component_system_info, { key: 1 })) : _ctx.type === "warning" ? (vue.openBlock(), vue.createBlock(_component_system_warning, { key: 2 })) : ["danger", "error"].includes(_ctx.type) ? (vue.openBlock(), vue.createBlock(_component_system_error, { key: 3 })) : vue.createCommentVNode("v-if", true)
                          ]),
                          _: 1
                        })
                      ])
                    ])) : vue.createCommentVNode("v-if", true),
                    vue.createElementVNode("h5", { class: "panel-title" }, vue.toDisplayString(_ctx.title), 1),
                    vue.createElementVNode("div", { class: "panel-header-right" }, [
                      _ctx.showClose ? (vue.openBlock(), vue.createBlock(_component_hl_button, {
                        key: 0,
                        "aria-label": _ctx.t("hl.messagebox.close"),
                        class: "panel-close",
                        onClick: ($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel"),
                        onKeydown: vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction(_ctx.distinguishCancelAndClose ? "close" : "cancel"), ["prevent"]), ["enter"])
                      }, {
                        default: vue.withCtx(() => [
                          vue.createVNode(_component_hl_icon, null, {
                            default: vue.withCtx(() => [
                              vue.createVNode(_component_system_close)
                            ]),
                            _: 1
                          })
                        ]),
                        _: 1
                      }, 8, ["aria-label", "onClick", "onKeydown"])) : vue.createCommentVNode("v-if", true)
                    ])
                  ], 512),
                  vue.createElementVNode("div", {
                    id: _ctx.contentId,
                    class: "panel-body"
                  }, [
                    vue.renderSlot(_ctx.$slots, "default", {}, () => [
                      !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("span", { key: 0 }, vue.toDisplayString(_ctx.message), 1)) : (vue.openBlock(), vue.createElementBlock("span", {
                        key: 1,
                        innerHTML: _ctx.message
                      }, null, 8, ["innerHTML"]))
                    ])
                  ], 8, ["id"]),
                  vue.createElementVNode("div", { class: "panel-footer items-center" }, [
                    _ctx.showCancelButton ? (vue.openBlock(), vue.createBlock(_component_hl_button, {
                      key: 0,
                      loading: _ctx.cancelButtonLoading,
                      class: vue.normalizeClass([_ctx.cancelButtonClass, "m-r-md"]),
                      type: _ctx.cancelButtonType,
                      size: _ctx.buttonSize,
                      round: _ctx.roundButton,
                      onClick: ($event) => _ctx.handleAction("cancel"),
                      onKeydown: vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction("cancel"), ["prevent"]), ["enter"])
                    }, {
                      default: vue.withCtx(() => [
                        vue.createTextVNode(vue.toDisplayString(_ctx.cancelButtonText || _ctx.t("hl.messagebox.cancel")), 1)
                      ]),
                      _: 1
                    }, 8, ["loading", "class", "type", "size", "round", "onClick", "onKeydown"])) : vue.createCommentVNode("v-if", true),
                    vue.withDirectives(vue.createVNode(_component_hl_button, {
                      ref: "confirmRef",
                      loading: _ctx.confirmButtonLoading,
                      round: _ctx.roundButton,
                      type: _ctx.confirmButtonType,
                      size: _ctx.buttonSize,
                      disabled: _ctx.confirmButtonDisabled,
                      onClick: ($event) => _ctx.handleAction("confirm"),
                      onKeydown: vue.withKeys(vue.withModifiers(($event) => _ctx.handleAction("confirm"), ["prevent"]), ["enter"])
                    }, {
                      default: vue.withCtx(() => [
                        vue.createTextVNode(vue.toDisplayString(_ctx.confirmButtonText || _ctx.t("hl.messagebox.confirm")), 1)
                      ]),
                      _: 1
                    }, 8, ["loading", "round", "type", "size", "disabled", "onClick", "onKeydown"]), [
                      [vue.vShow, _ctx.showConfirmButton]
                    ])
                  ])
                ], 10, ["onClick"])
              ]),
              _: 3
            }, 8, ["trapped", "focus-trap-el", "focus-start-el", "onReleaseRequested"])
          ], 14, ["aria-label", "aria-describedby", "msg-box-id", "onClick"]), [
            [vue.vShow, _ctx.visible]
          ])
        ]),
        _: 3
      }, 8, ["name", "onAfterLeave"])
    ], 8, ["to"]))
  ], 64);
}
var MessageBoxConstructor = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

exports["default"] = MessageBoxConstructor;
//# sourceMappingURL=index.js.map