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

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

import { defineComponent as m, ref as y, computed as b, openBlock as o, createElementBlock as h, normalizeClass as v, unref as r, normalizeStyle as I, createBlock as t, withCtx as f, resolveDynamicComponent as i, createCommentVNode as n, renderSlot as B, withModifiers as S } from "vue";
import { Props as w } from "./index3.js";
import { FSvgIcon as u } from "../../svg-icon/index.js";
import { FCloseBtn as z } from "../../close-btn/index.js";
const E = m({
  name: "FTag"
}), M = /* @__PURE__ */ m({
  ...E,
  props: w,
  setup(p) {
    const l = p, a = y(!0), d = b(() => {
      const { simple: e, type: s, size: c, block: k, round: g, line: C } = l;
      return [
        "f-tag",
        {
          [`f-tag__${s}`]: s,
          [`f-tag__${c}`]: c,
          "f-tag__simple": e,
          "f-tag__block": k,
          "f-tag__round": g,
          "f-tag__line": C
        }
      ];
    }), _ = (e) => {
      a.value = !1, l.closeEnd && l.closeEnd(e);
    };
    return (e, s) => a.value ? (o(), h("div", {
      key: 0,
      class: v(r(d)),
      style: I({ background: e.background, color: e.color })
    }, [
      e.beforeIcon ? (o(), t(r(u), { key: 0 }, {
        default: f(() => [
          (o(), t(i(e.beforeIcon)))
        ]),
        _: 1
      })) : n("", !0),
      B(e.$slots, "default"),
      e.afterIcon ? (o(), t(r(u), { key: 1 }, {
        default: f(() => [
          (o(), t(i(e.afterIcon)))
        ]),
        _: 1
      })) : n("", !0),
      e.close ? (o(), t(r(z), {
        key: 2,
        onClick: S(_, ["stop"])
      }, null, 8, ["onClick"])) : n("", !0)
    ], 6)) : n("", !0);
  }
});
export {
  M as default
};