tass-ui/lib/packages/components/message/src/message.vue.js

A high quality UI Toolkit built on Vue.js3+.

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("../../../theme-chalk/src/message.scss.js");
const index = require("../../icon/index.js");
const message = require("./message.js");
const _hoisted_1 = ["id"];
const _hoisted_2 = { class: "tas-message__content" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "message",
  props: message.MessageProps,
  emits: ["destroy", "close"],
  setup(__props, { emit }) {
    const props = __props;
    const iconMaps = {
      info: "info",
      success: "success",
      error: "danger",
      warning: "warning"
    };
    let visible = vue.ref(false);
    const close = () => visible.value = false;
    const beforeLeave = () => {
      emit("close");
    };
    const iconName = vue.computed(() => {
      const { type } = props;
      return iconMaps[type];
    });
    let timer = null;
    const startTimerFn = () => {
      if (props.duration > 0) {
        timer = setTimeout(() => {
          visible.value = false;
        }, props.duration);
      }
    };
    const clearTimeFn = () => {
      clearTimeout(Number(timer));
    };
    vue.onMounted(() => {
      visible.value = true;
      startTimerFn();
    });
    let styles = vue.computed(() => ({
      top: `${props.offset}px`,
      zIndex: props.zIndex
    }));
    const defClass = vue.computed(() => ["tas-message--" + props.type, props.center ? "is-center" : ""]);
    vue.onUnmounted(() => {
      clearTimeFn();
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.Transition, {
        name: "tas-message-fade",
        onBeforeLeave: beforeLeave,
        onAfterLeave: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("destroy"))
      }, {
        default: vue.withCtx(() => [
          vue.withDirectives(vue.createElementVNode("div", {
            id: _ctx.id,
            class: vue.normalizeClass(["tas-message", vue.unref(defClass)]),
            style: vue.normalizeStyle(vue.unref(styles)),
            onMouseenter: clearTimeFn,
            onMouseleave: startTimerFn
          }, [
            vue.createVNode(vue.unref(index.TassIcon), {
              name: vue.unref(iconName),
              class: "tas-message__icon"
            }, null, 8, ["name"]),
            vue.renderSlot(_ctx.$slots, "default", {}, () => [
              vue.createElementVNode("span", _hoisted_2, vue.toDisplayString(_ctx.message), 1)
            ]),
            _ctx.closeable ? (vue.openBlock(), vue.createBlock(vue.unref(index.TassIcon), {
              key: 0,
              name: "cross",
              class: "tas-message__close-btn",
              onClick: close
            })) : vue.createCommentVNode("", true)
          ], 46, _hoisted_1), [
            [vue.vShow, vue.unref(visible)]
          ])
        ]),
        _: 3
      });
    };
  }
});
exports.default = _sfc_main;