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

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

import { defineComponent as i, computed as r, openBlock as x, createElementBlock as _, normalizeClass as m, unref as s, normalizeStyle as u, renderSlot as g } from "vue";
import { Props as h } from "./index3.js";
import { sizeChange as e } from "../../_utils/index3.js";
const b = i({
  name: "FText"
}), C = /* @__PURE__ */ i({
  ...b,
  props: h,
  setup(l) {
    const t = l, c = r(() => {
      const { type: o, block: n, bold: a, ellipsis: p, center: d } = t;
      return [
        "f-text",
        {
          [`f-text__${o}`]: o,
          "f-text__block": n,
          "f-text__bold": a,
          "f-text__center": d,
          "f-text__ellipsis": p
        }
      ];
    }), f = r(() => ({
      "--f-text-color": t.color,
      "--f-text-background": t.background,
      "--f-text-text-decoration": t.decoration,
      "--f-text-width": e(t.width),
      "--f-text-font-size": e(t.size),
      "--f-text-padding": e(t.padding),
      "--f-text-letter-spacing": e(t.spacing),
      "--f-text-line-height": e(t.lineHeight),
      "--f-text-text-indent": e(t.indent)
    }));
    return (o, n) => (x(), _("p", {
      class: m(s(c)),
      style: u(s(f))
    }, [
      g(o.$slots, "default")
    ], 6));
  }
});
export {
  C as default
};