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

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

import { defineComponent as F, computed as n, ref as m, onMounted as V, nextTick as O, openBlock as o, createBlock as c, Transition as A, unref as i, withCtx as H, withDirectives as P, createElementVNode as _, normalizeClass as U, normalizeStyle as W, createElementBlock as r, isVNode as g, resolveDynamicComponent as y, createCommentVNode as h, toDisplayString as k, Fragment as j, createTextVNode as q, vShow as x } from "vue";
import { FCloseBtn as G } from "../../close-btn/index.js";
import { isString as J } from "../../_utils/index3.js";
import { Props as K, Emits as Q } from "./index3.js";
import X from "../../_components/svg/index4.js";
import Y from "../../_components/svg/index7.js";
import Z from "../../_components/svg/index11.js";
import ee from "../../_components/svg/index13.js";
import te from "../../_components/svg/index14.js";
import { massageManage as B } from "../../_hooks/use-message/index.js";
import "../../loading-bar/src/index2.js";
const oe = {
  key: 0,
  class: "f-notification__icon"
}, ne = { class: "f-notification__info" }, ie = { class: "f-notification__title" }, se = {
  key: 1,
  class: "f-notification__title-text"
}, ae = {
  key: 1,
  class: "f-notification__text"
}, ce = F({
  name: "FMessage"
}), he = /* @__PURE__ */ F({
  ...ce,
  props: K,
  emits: Q,
  setup(M, { expose: L }) {
    const e = M, S = {
      default: Z,
      primary: Y,
      success: ee,
      danger: X,
      warning: te
    }, u = n(
      () => e.icon ? e.icon : e.type ? S[e.type] : null
    ), C = m(), b = m(0), l = m(!1), w = n(
      () => e.placement.includes("top")
    ), z = n(
      () => e.placement.includes("right")
    ), D = n(
      () => B.getSiblingOffset(e.placement, e.id, !w.value)
    ), d = n(
      () => e.offset + D.value
    ), E = n(
      () => b.value + d.value
    );
    V(() => {
      O(() => {
        b.value = C.value.getBoundingClientRect().height;
      });
    });
    const N = n(() => {
      const { type: t, round: s, close: f, placement: a } = e;
      return [
        "f-notification",
        {
          [`f-notification__${t}`]: t,
          [`f-notification__${a}`]: a,
          "f-notification__round": s,
          "f-notification__hasClose": f
        }
      ];
    }), R = n(() => {
      const { color: t, background: s, zIndex: f } = e, a = {
        color: t,
        background: s,
        zIndex: f
      };
      return e.placement.includes("bottom") ? a.bottom = d.value + "px" : a.top = d.value + "px", a;
    }), p = m(), I = () => {
      !p.value || clearTimeout(p.value);
    }, v = () => {
      I(), l.value = !1;
    }, $ = () => {
      B.removeInstance(e.placement, e.id);
    }, T = () => {
      !e.duration || (p.value = setTimeout(() => {
        v();
      }, e.duration));
    };
    return V(() => {
      T(), l.value = !0;
    }), L({
      visible: l,
      bottom: E,
      close: v
    }), (t, s) => (o(), c(A, {
      mode: "out-in",
      name: "f-notification-fade" + (i(z) ? "-right" : "-left"),
      onBeforeLeave: $,
      onAfterLeave: s[0] || (s[0] = (f) => t.$emit("destroy"))
    }, {
      default: H(() => [
        P(_("div", {
          ref_key: "notificationRef",
          ref: C,
          class: U(i(N)),
          style: W(i(R)),
          onMouseleave: T,
          onMouseenter: I
        }, [
          t.showIcon && i(u) ? (o(), r("div", oe, [
            g(i(u)) ? (o(), c(y(i(u)), {
              key: 0,
              size: 28
            })) : h("", !0)
          ])) : h("", !0),
          _("div", ne, [
            _("div", ie, [
              g(t.title) ? (o(), c(y(t.title), { key: 0 })) : (o(), r("h3", se, k(t.title), 1))
            ]),
            g(t.message) ? (o(), c(y(t.message), { key: 0 })) : (o(), r("div", ae, k(t.message), 1))
          ]),
          e.close ? (o(), r("div", {
            key: 1,
            class: "f-notification__close",
            onClick: v
          }, [
            i(J)(t.closeBtn) ? (o(), r(j, { key: 0 }, [
              q(k(t.closeBtn), 1)
            ], 64)) : (o(), c(i(G), {
              key: 1,
              size: 16
            }))
          ])) : h("", !0)
        ], 38), [
          [x, l.value]
        ])
      ]),
      _: 1
    }, 8, ["name"]));
  }
});
export {
  he as default
};