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

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

import { defineComponent as w, ref as $, computed as C, openBlock as a, createElementBlock as I, normalizeClass as d, unref as e, normalizeStyle as z, createBlock as b, h as B, createCommentVNode as p, renderSlot as F } from "vue";
import { FSvgIcon as m } from "../../svg-icon/index.js";
import v from "../../_components/svg/index8.js";
import { Props as D } from "./index3.js";
import { sizeChange as N } from "../../_utils/index3.js";
import { Ripples as R } from "../../_utils/index4.js";
import { ChangeColor as V } from "../../_utils/index5.js";
const A = ["href", "target"], E = ["disabled", "autofocus", "name", "type"], P = w({
  name: "FButton"
}), M = /* @__PURE__ */ w({
  ...P,
  props: D,
  setup(L) {
    const l = L, g = $(
      null
    ), k = C(() => {
      const {
        type: o,
        round: r,
        simple: f,
        block: t,
        disabled: n,
        loading: i,
        bold: u,
        size: s,
        text: h,
        circle: S,
        color: c
      } = l;
      return [
        "f-button",
        {
          [`f-button__${s}`]: s,
          [`f-button__${o}`]: !c,
          "f-button__disabled": n || i,
          "f-button__simple": f && !c,
          "f-button__circle": S,
          "f-button__round": r,
          "f-button__block": t,
          "f-button__bold": u,
          "f-button__color": c,
          "f-button__text": h && !c
        }
      ];
    }), y = (o) => {
      const { disabled: r, loading: f, ripples: t } = l;
      if (r || f) {
        o.preventDefault();
        return;
      }
      if (t) {
        const { ripplesColor: n, simple: i, text: u, type: s } = l;
        new R(
          o,
          g.value,
          {
            duration: 700,
            component: "f-button",
            className: "f-button__ripples",
            ripplesColor: n,
            simple: i,
            text: u,
            type: s
          }
        ).clickRipples();
      }
      l.click && l.click(o);
    }, _ = C(() => {
      const { fontSize: o, fontColor: r, shadow: f, color: t } = l, n = {
        "--f-button-font-size": N(o),
        "--f-button-font-color": r,
        "--f-button-box-shadow": f
      };
      if (t) {
        const i = new V(t), u = i.getLightColor(0.4), s = i.getDarkColor(0.2);
        n["--f-button-default-color"] = t, n["--f-button-hover-color"] = u, n["--f-button-active-color"] = s;
      }
      return n;
    });
    return (o, r) => o.href ? (a(), I("a", {
      key: 0,
      ref_key: "FButton",
      ref: g,
      role: "button",
      tabindex: "0",
      class: d(e(k)),
      href: o.href,
      target: o.target,
      style: z(e(_)),
      onClick: y
    }, [
      o.loading || o.beforeIcon ? (a(), b(e(m), {
        key: 0,
        class: d([
          "f-button__before-icon",
          { "f-button__loading-animation": o.loading }
        ]),
        icon: o.loading ? o.loadingIcon || B(e(v)) : o.beforeIcon,
        size: 16
      }, null, 8, ["class", "icon"])) : p("", !0),
      F(o.$slots, "default"),
      o.afterIcon ? (a(), b(e(m), {
        key: 1,
        icon: o.afterIcon,
        size: 16
      }, null, 8, ["icon"])) : p("", !0)
    ], 14, A)) : (a(), I("button", {
      key: 1,
      ref_key: "FButton",
      ref: g,
      role: "button",
      tabindex: "0",
      class: d(e(k)),
      disabled: o.disabled || o.loading,
      autofocus: o.autofocus,
      name: o.name,
      type: o.nativeType,
      style: z(e(_)),
      onClick: y
    }, [
      o.loading || o.beforeIcon ? (a(), b(e(m), {
        key: 0,
        class: d([
          "f-button__before-icon",
          { "f-button__loading-animation": o.loading }
        ]),
        icon: o.loading ? o.loadingIcon || B(e(v)) : o.beforeIcon,
        size: 16
      }, null, 8, ["class", "icon"])) : p("", !0),
      F(o.$slots, "default"),
      o.afterIcon ? (a(), b(e(m), {
        key: 1,
        icon: o.afterIcon,
        size: 16
      }, null, 8, ["icon"])) : p("", !0)
    ], 14, E));
  }
});
export {
  M as default
};