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

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

import { defineComponent as p, computed as s, openBlock as r, createElementBlock as I, normalizeClass as y, unref as t, normalizeStyle as C, createBlock as l, withCtx as f, renderSlot as i, createCommentVNode as c } from "vue";
import { Props as b } from "./index3.js";
import { FSvgIcon as a } from "../../svg-icon/index.js";
import { sizeChange as _ } from "../../_utils/index3.js";
const $ = ["href", "target"], g = p({
  name: "FLink"
}), v = /* @__PURE__ */ p({
  ...g,
  props: b,
  setup(k) {
    const o = k, m = (e) => {
      if (o.prohibit || o.noLink) {
        e.preventDefault();
        return;
      }
      o.click && o.click(e);
    }, u = s(() => {
      const { type: e, state: n, prohibit: h, noCopy: z } = o;
      return [
        "f-link",
        {
          [`f-link__${n}`]: n,
          [`f-link__${e}`]: e,
          "f-link__prohibit": h,
          "f-link__no-copy": z
        }
      ];
    }), d = s(() => {
      const { size: e, color: n } = o;
      return {
        color: n,
        fontSize: _(e)
      };
    });
    return (e, n) => (r(), I("a", {
      role: "link",
      class: y(t(u)),
      style: C(t(d)),
      href: e.href,
      target: e.target,
      onClick: m
    }, [
      e.$slots.beforeIcon || e.beforeIcon ? (r(), l(t(a), {
        key: 0,
        icon: e.beforeIcon,
        size: e.size || 16
      }, {
        default: f(() => [
          i(e.$slots, "beforeIcon")
        ]),
        _: 3
      }, 8, ["icon", "size"])) : c("", !0),
      i(e.$slots, "default"),
      e.$slots.afterIcon || e.afterIcon ? (r(), l(t(a), {
        key: 1,
        icon: e.afterIcon,
        size: e.size
      }, {
        default: f(() => [
          i(e.$slots, "afterIcon")
        ]),
        _: 3
      }, 8, ["icon", "size"])) : c("", !0)
    ], 14, $));
  }
});
export {
  v as default
};