t-fighting-design/es/message/src/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

import { defineComponent as z, ref as m, computed as n, onMounted as C, nextTick as D, openBlock as t, createBlock as a, Transition as I, unref as l, withCtx as g, withDirectives as R, createElementVNode as O, normalizeClass as A, normalizeStyle as H, isVNode as T, resolveDynamicComponent as p, createCommentVNode as M, createElementBlock as v, toDisplayString as h, Fragment as P, createTextVNode as j, vShow as q } from "vue";
import { FSvgIcon as x } from "../../svg-icon/index.js";
import { FCloseBtn as G } from "../../close-btn/index.js";
import { Props as J, Emits as K } from "./index3.js";
import { isString as Q } from "../../_utils/index3.js";
import { massageManage as S } from "../../_hooks/use-message/index.js";
import "../../loading-bar/src/index2.js";
const U = {
  key: 2,
  class: "f-message__text"
}, W = z({
  name: "FMessage"
}), ne = /* @__PURE__ */ z({
  ...W,
  props: J,
  emits: K,
  setup(E, { expose: F }) {
    const s = E, y = m(), _ = m(0), r = m(!1), k = n(
      () => s.placement.includes("top")
    ), L = n(
      () => S.getSiblingOffset(s.placement, s.id, !k.value)
    ), c = n(
      () => s.offset + L.value
    ), N = n(
      () => _.value + c.value
    );
    C(() => {
      D(() => {
        _.value = y.value.getBoundingClientRect().height;
      });
    });
    const V = n(() => {
      const { type: e, round: o, placement: i } = s;
      return [
        "f-message",
        {
          [`f-message__${e}`]: e,
          [`f-message__${i}`]: i,
          "f-message__round": o
        }
      ];
    }), $ = n(() => {
      const { color: e, background: o, zIndex: i } = s, d = {
        color: e,
        background: o,
        zIndex: i
      };
      return s.placement.includes("bottom") ? d.bottom = c.value + "px" : d.top = c.value + "px", d;
    }), u = m(), B = () => {
      !u.value || clearTimeout(u.value);
    }, f = () => {
      B(), r.value = !1;
    }, w = () => {
      S.removeInstance(s.placement, s.id);
    }, b = () => {
      !s.duration || (u.value = setTimeout(() => {
        f();
      }, s.duration));
    };
    return C(() => {
      b(), r.value = !0;
    }), F({
      visible: r,
      bottom: N,
      close: f
    }), (e, o) => (t(), a(I, {
      mode: "out-in",
      name: "f-message-fade" + (l(k) ? "-top" : "-bottom"),
      onBeforeLeave: w,
      onAfterLeave: o[0] || (o[0] = (i) => e.$emit("destroy"))
    }, {
      default: g(() => [
        R(O("div", {
          ref_key: "messageRef",
          ref: y,
          class: A(l(V)),
          style: H(l($)),
          onMouseleave: b,
          onMouseenter: B
        }, [
          T(e.icon) ? (t(), a(l(x), {
            key: 0,
            size: 24,
            class: "f-message__icon"
          }, {
            default: g(() => [
              (t(), a(p(e.icon)))
            ]),
            _: 1
          })) : M("", !0),
          T(e.message) ? (t(), a(p(e.message), { key: 1 })) : (t(), v("div", U, h(e.message), 1)),
          s.close ? (t(), v("div", {
            key: 3,
            class: "f-message__close",
            onClick: f
          }, [
            l(Q)(e.closeBtn) ? (t(), v(P, { key: 0 }, [
              j(h(e.closeBtn), 1)
            ], 64)) : (t(), a(l(G), {
              key: 1,
              size: 16
            }, {
              default: g(() => [
                (t(), a(p(e.closeBtn)))
              ]),
              _: 1
            }))
          ])) : M("", !0)
        ], 38), [
          [q, r.value]
        ])
      ]),
      _: 1
    }, 8, ["name"]));
  }
});
export {
  ne as default
};