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

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

import { defineComponent as C, ref as I, computed as f, openBlock as o, createElementBlock as d, normalizeClass as m, unref as l, normalizeStyle as S, createBlock as _, withCtx as p, renderSlot as n, createCommentVNode as r, createElementVNode as g, createTextVNode as w, toDisplayString as B, withModifiers as E } from "vue";
import { Props as F } from "./index3.js";
import { FCloseBtn as L } from "../../close-btn/index.js";
import { FSvgIcon as N } from "../../svg-icon/index.js";
import { sizeChange as k } from "../../_utils/index3.js";
const V = {
  key: 0,
  class: "f-alert__title"
}, A = {
  key: 1,
  class: "f-alert__sub-title"
}, D = C({
  name: "FAlert"
}), G = /* @__PURE__ */ C({
  ...D,
  props: F,
  setup(y) {
    const t = y, u = I(!0), b = f(() => {
      const { type: e, bold: s, simple: a, center: i, round: c, fixed: z } = t;
      return [
        "f-alert",
        {
          [`f-alert__${e}`]: e,
          "f-alert__bold": s,
          "f-alert__simple": a,
          "f-alert__center": i,
          "f-alert__round": c,
          "f-alert__fixed": z
        }
      ];
    }), h = f(() => {
      const { overflow: e } = t;
      return [
        "f-alert__content",
        {
          [`f-alert__content-${e}`]: e
        }
      ];
    }), v = f(() => {
      const { fontSize: e, color: s, background: a, titleSize: i, titleColor: c } = t;
      return {
        "--f-alert-color": s,
        "--f-alert-title-color": c,
        "--f-alert-background": a,
        "--f-alert-font-size": k(e),
        "--f-alert-title-size": k(i)
      };
    }), $ = (e) => {
      u.value = !1, t.closeEnd && t.closeEnd(e);
    };
    return (e, s) => u.value ? (o(), d("div", {
      key: 0,
      role: "alert",
      class: m(l(b)),
      style: S(l(v))
    }, [
      e.$slots.beforeIcon || e.beforeIcon ? (o(), _(l(N), {
        key: 0,
        icon: e.beforeIcon
      }, {
        default: p(() => [
          n(e.$slots, "beforeIcon")
        ]),
        _: 3
      }, 8, ["icon"])) : r("", !0),
      g("div", {
        class: m(l(h))
      }, [
        e.title ? (o(), d("div", V, [
          n(e.$slots, "title", {}, () => [
            w(B(e.title), 1)
          ])
        ])) : r("", !0),
        e.$slots.default ? (o(), d("div", A, [
          n(e.$slots, "default")
        ])) : r("", !0)
      ], 2),
      e.close ? (o(), _(l(L), {
        key: 1,
        icon: e.closeIcon,
        onClick: E($, ["stop"])
      }, {
        default: p(() => [
          n(e.$slots, "closeIcon")
        ]),
        _: 3
      }, 8, ["icon", "onClick"])) : r("", !0)
    ], 6)) : r("", !0);
  }
});
export {
  G as default
};