hongluan-ui/lib/components/message/src/message2.js

Hongluan Component Library for Vue 3

'use strict';

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

var vue = require('vue');
var core = require('@vueuse/core');
require('../../../constants/index.js');
var index$2 = require('../../icon/index.js');
var index$1 = require('../../badge/index.js');
require('../../system-icon/index.js');
require('../../../hooks/index.js');
var message = require('./message.js');
var instance = require('./instance.js');
var index = require('../../../hooks/use-namespace/index.js');
var icon = require('../../../constants/icon.js');
var aria = require('../../../constants/aria.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 error = require('../../system-icon/src/error.js');
var close = require('../../system-icon/src/close.js');

const __default__ = vue.defineComponent({
  name: "Message"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: message.messageProps,
  emits: message.messageEmits,
  setup(__props, { expose }) {
    const props = __props;
    const { namespace } = index.useNamespace();
    const messageRef = vue.ref();
    const visible = vue.ref(false);
    const height = vue.ref(0);
    let stopTimer = void 0;
    const badgeType = vue.computed(() => props.type ? props.type === "error" ? "danger" : props.type : "info");
    const lastOffset = vue.computed(() => instance.getLastOffset(props.id));
    const offset = vue.computed(() => instance.getOffsetOrSpace(props.id, props.offset) + lastOffset.value);
    const bottom = vue.computed(() => height.value + offset.value);
    const customStyle = vue.computed(() => ({
      top: `${offset.value}px`,
      zIndex: props.zIndex
    }));
    const hasDefinedIcon = vue.computed(() => !!icon.MessageTypeIconMap[props.type]);
    function startTimer() {
      if (props.duration === 0)
        return;
      ({ stop: stopTimer } = core.useTimeoutFn(() => {
        close$1();
      }, props.duration));
    }
    function clearTimer() {
      stopTimer == null ? void 0 : stopTimer();
    }
    function close$1() {
      visible.value = false;
    }
    function keydown({ code }) {
      if (code === aria.EVENT_CODE.esc) {
        close$1();
      }
    }
    vue.onMounted(() => {
      startTimer();
      visible.value = true;
    });
    vue.watch(() => props.repeatNum, () => {
      clearTimer();
      startTimer();
    });
    core.useEventListener(document, "keydown", keydown);
    core.useResizeObserver(messageRef, () => {
      height.value = messageRef.value.getBoundingClientRect().height;
    });
    expose({
      visible,
      bottom,
      close: close$1
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.Transition, {
        name: "message-fade",
        onBeforeLeave: _ctx.onClose,
        onAfterLeave: ($event) => _ctx.$emit("destroy")
      }, {
        default: vue.withCtx(() => [
          vue.withDirectives(vue.createElementVNode("div", {
            id: _ctx.id,
            ref_key: "messageRef",
            ref: messageRef,
            class: vue.normalizeClass([
              vue.unref(namespace) + "-message",
              vue.unref(hasDefinedIcon) ? `${_ctx.type === "error" ? "danger" : _ctx.type}` : "",
              _ctx.showClose ? "is-closable" : "",
              _ctx.customClass
            ]),
            style: vue.normalizeStyle(vue.unref(customStyle)),
            role: "alert",
            onMouseenter: clearTimer,
            onMouseleave: startTimer
          }, [
            _ctx.repeatNum > 1 ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.HlBadge), {
              key: 0,
              position: "lt",
              round: "",
              value: _ctx.repeatNum,
              type: vue.unref(badgeType),
              class: "message-badge"
            }, null, 8, ["value", "type"])) : vue.createCommentVNode("v-if", true),
            _ctx.type && !_ctx.dangerouslyUseHTMLString ? vue.renderSlot(_ctx.$slots, "icon", { key: 1 }, () => [
              vue.createVNode(vue.unref(index$2.HlIcon), { class: "message-icon" }, {
                default: vue.withCtx(() => [
                  _ctx.type === "success" ? (vue.openBlock(), vue.createBlock(vue.unref(success["default"]), { key: 0 })) : vue.createCommentVNode("v-if", true),
                  _ctx.type === "info" ? (vue.openBlock(), vue.createBlock(vue.unref(info["default"]), { key: 1 })) : vue.createCommentVNode("v-if", true),
                  _ctx.type === "warning" ? (vue.openBlock(), vue.createBlock(vue.unref(warning["default"]), { key: 2 })) : vue.createCommentVNode("v-if", true),
                  _ctx.type === "danger" || _ctx.type === "error" ? (vue.openBlock(), vue.createBlock(vue.unref(error["default"]), { key: 3 })) : vue.createCommentVNode("v-if", true)
                ]),
                _: 1
              })
            ]) : vue.createCommentVNode("v-if", true),
            vue.renderSlot(_ctx.$slots, "default", {}, () => [
              !_ctx.dangerouslyUseHTMLString ? (vue.openBlock(), vue.createElementBlock("span", {
                key: 0,
                class: vue.normalizeClass(["message-content", "text-" + _ctx.textAlign])
              }, vue.toDisplayString(_ctx.message), 3)) : (vue.openBlock(), vue.createElementBlock("div", {
                key: 1,
                innerHTML: _ctx.message
              }, null, 8, ["innerHTML"]))
            ]),
            _ctx.showClose ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.HlIcon), {
              key: 2,
              class: "message-close",
              onClick: vue.withModifiers(close$1, ["stop"])
            }, {
              default: vue.withCtx(() => [
                vue.createVNode(vue.unref(close["default"]))
              ]),
              _: 1
            }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true)
          ], 46, ["id"]), [
            [vue.vShow, visible.value]
          ])
        ]),
        _: 3
      }, 8, ["onBeforeLeave", "onAfterLeave"]);
    };
  }
});

exports["default"] = _sfc_main;
//# sourceMappingURL=message2.js.map