hongluan-ui/es/components/message/src/message2.mjs

Hongluan Component Library for Vue 3

import { defineComponent, ref, computed, onMounted, watch, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, unref, normalizeStyle, createCommentVNode, renderSlot, createVNode, createElementBlock, toDisplayString, withModifiers, vShow } from 'vue';
import { useTimeoutFn, useEventListener, useResizeObserver } from '@vueuse/core';
import '../../../constants/index.mjs';
import { HlIcon } from '../../icon/index.mjs';
import { HlBadge } from '../../badge/index.mjs';
import '../../system-icon/index.mjs';
import '../../../hooks/index.mjs';
import { messageProps, messageEmits } from './message.mjs';
import { getLastOffset, getOffsetOrSpace } from './instance.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { MessageTypeIconMap } from '../../../constants/icon.mjs';
import { EVENT_CODE } from '../../../constants/aria.mjs';
import SystemSuccess from '../../system-icon/src/success.mjs';
import SystemInfo from '../../system-icon/src/info.mjs';
import SystemWarning from '../../system-icon/src/warning.mjs';
import SystemError from '../../system-icon/src/error.mjs';
import SystemClose from '../../system-icon/src/close.mjs';

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

export { _sfc_main as default };
//# sourceMappingURL=message2.mjs.map