vexip-ui/es/components/button/button.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import { defineComponent as M, inject as B, ref as k, computed as b, reactive as J, onBeforeUnmount as K, createVNode as n, renderSlot as m, mergeProps as Q } from "vue";
import "../badge/index.mjs";
import "../collapse-transition/index.mjs";
import "../icon/index.mjs";
import { FIELD_OPTIONS as W } from "../form/symbol.mjs";
import "../renderer/index.mjs";
import { useProps as X, createIconProp as N, createSizeProp as Y, useNameHelper as Z, useIcons as $, emitEvent as oo } from "@vexip-ui/config";
import { isClient as eo, parseColorToRgba as w, adjustAlpha as s, mixColor as O } from "@vexip-ui/utils";
import { buttonProps as lo } from "./props.mjs";
import { buttonTypes as to, GROUP_STATE as ro } from "./symbol.mjs";
import v from "../renderer/renderer.mjs";
import C from "../icon/icon.mjs";
import no from "../collapse/collapse-transition.mjs";
import co from "../badge/badge.vue2.mjs";
const wo = /* @__PURE__ */ M({
  name: "Button",
  props: lo,
  emits: [],
  setup(_, {
    slots: d
  }) {
    const u = B(W, null), o = X("button", _, {
      size: Y(u ? u.size : void 0),
      type: {
        default: null,
        validator: (e) => to.includes(e)
      },
      dashed: !1,
      text: !1,
      simple: !1,
      ghost: !1,
      disabled: () => u ? u.disabled.value : !1,
      loading: () => u ? u.loading.value : !1,
      circle: !1,
      loadingIcon: N(),
      loadingEffect: null,
      icon: N(),
      color: null,
      buttonType: {
        default: "button",
        validator: (e) => ["button", "submit", "reset"].includes(e)
      },
      block: !1,
      tag: "button",
      noPulse: !1,
      badge: null,
      slots: () => ({})
    }), a = B(ro, null), l = Z("button"), h = $(), f = k(!1), P = k(0), S = k(!1), g = b(() => !d.default && !o.slots.default), T = b(() => o.type ?? (a == null ? void 0 : a.type) ?? "default"), x = b(() => (a == null ? void 0 : a.size) ?? o.size), L = b(() => ({
      [l.b()]: !0,
      [l.bs("vars")]: !0,
      [l.bm("inherit")]: o.inherit,
      [l.bm(T.value)]: T.value !== "default",
      [l.bm("simple")]: !o.ghost && o.simple,
      [l.bm("ghost")]: o.ghost,
      [l.bm("text")]: o.text,
      [l.bm("dashed")]: o.dashed,
      [l.bm("disabled")]: o.disabled,
      [l.bm("loading")]: o.loading,
      [l.bm("circle")]: o.circle,
      [l.bm("icon-only")]: g.value,
      [l.bm(x.value)]: x.value !== "default",
      [l.bm("pulsing")]: f.value,
      [l.bm("first")]: P.value === 1,
      [l.bm("last")]: S.value,
      [l.bm("block")]: o.block
    })), z = b(() => {
      if (!o.color) return null;
      const e = eo ? getComputedStyle(document.documentElement) : null, c = w((e == null ? void 0 : e.getPropertyValue(l.nv("color-black"))) || "#000"), t = w((e == null ? void 0 : e.getPropertyValue(l.nv("color-white"))) || "#fff"), i = w(o.color);
      return {
        base: i.toString(),
        light2: O(t, i, 0.2).toString(),
        dark1: O(c, i, 0.1).toString(),
        opacity1: s(i, 0.9).toString(),
        opacity3: s(i, 0.7).toString(),
        opacity4: s(i, 0.6).toString(),
        opacity7: s(i, 0.3).toString(),
        opacity8: s(i, 0.2).toString(),
        white8: s(t, 0.2).toString(),
        white9: s(t, 0.1).toString()
      };
    }), R = b(() => {
      if (!z.value) return {};
      const {
        base: e,
        light2: c,
        dark1: t,
        opacity1: i,
        opacity3: E,
        opacity4: I,
        opacity7: D,
        opacity8: G,
        white8: H,
        white9: A
      } = z.value, {
        cvm: p,
        gnv: r
      } = l;
      return o.ghost ? p({
        color: e,
        "color-hover": e,
        "color-focus": e,
        "color-active": e,
        "color-disabled": e,
        "bg-color": "transparent",
        "bg-color-hover": A,
        "bg-color-focus": A,
        "bg-color-active": H,
        "bg-color-disabled": "transparent",
        "b-color": e,
        "b-color-hover": c,
        "b-color-focus": c,
        "b-color-active": t,
        "b-color-disabled": r("content-color-disabled"),
        "pulse-s-color": t
      }) : o.simple ? p({
        color: e,
        "color-hover": e,
        "color-focus": r("color-white"),
        "color-active": r("color-white"),
        "color-disabled": r("content-color-disabled"),
        "bg-color": G,
        "bg-color-hover": D,
        "bg-color-focus": i,
        "bg-color-active": i,
        "bg-color-disabled": r("fill-color-background"),
        "b-color": I,
        "b-color-hover": I,
        "b-color-focus": E,
        "b-color-active": E,
        "b-color-disabled": r("border-color-light-1"),
        "pulse-s-color": t
      }) : o.text || o.dashed ? p({
        ...o.dashed ? {
          "b-color": e,
          "b-color-hover": c,
          "b-color-focus": c,
          "b-color-active": t,
          "pulse-s-color": t
        } : {},
        color: e,
        "color-hover": c,
        "color-focus": c,
        "color-active": t,
        "color-disabled": I
      }) : p({
        color: r("color-white"),
        "color-hover": r("color-white"),
        "color-focus": r("color-white"),
        "color-active": r("color-white"),
        "color-disabled": r("content-color-disabled"),
        "bg-color": e,
        "bg-color-hover": c,
        "bg-color-focus": c,
        "bg-color-active": t,
        "bg-color-disabled": r("fill-color-background"),
        "b-color": e,
        "b-color-hover": c,
        "b-color-focus": c,
        "b-color-active": t,
        "b-color-disabled": r("border-color-light-1"),
        "pulse-s-color": t
      });
    });
    if (a) {
      const e = J({
        index: P,
        isLast: S
      });
      a.increaseItem(e), K(() => {
        a.decreaseItem(e);
      });
    }
    function V(e) {
      o.disabled || o.loading || e.button || (o.noPulse || (f.value = !1, requestAnimationFrame(() => {
        f.value = !0;
      })), oo(o.onClick, e));
    }
    function j() {
      f.value = !1;
    }
    function y() {
      return n("div", {
        class: [l.be("icon"), l.bem("icon", "loading")]
      }, [m(d, "loading", void 0, () => [n(v, {
        renderer: o.slots.loading
      }, {
        default: () => [n(C, Q(h.value.loading, {
          effect: o.loadingEffect || h.value.loading.effect,
          icon: o.loadingIcon || h.value.loading.icon,
          label: "loading"
        }), null)]
      })])]);
    }
    function F() {
      return o.loading ? y() : n("div", {
        class: l.be("icon")
      }, [m(d, "icon", void 0, () => [n(v, {
        renderer: o.slots.icon
      }, {
        default: () => [o.icon ? n(C, {
          icon: o.icon
        }, null) : null]
      })])]);
    }
    function U() {
      return o.icon || d.icon || o.slots.icon ? o.loading ? y() : n("div", {
        class: l.be("icon")
      }, [m(d, "icon", void 0, () => [n(v, {
        renderer: o.slots.icon
      }, {
        default: () => [n(C, {
          icon: o.icon
        }, null)]
      })])]) : n(no, {
        appear: !0,
        horizontal: !0,
        "fade-effect": !0
      }, {
        default: () => [o.loading && y()]
      });
    }
    function q() {
      const e = o.disabled ? "disabled" : o.type === "default" ? "error" : o.type;
      return n(co, {
        inherit: !0,
        class: [l.be("badge"), l.bem("badge", e)],
        content: o.badge,
        type: e
      }, null);
    }
    return () => {
      const e = o.tag || "button";
      return n(e, {
        type: o.buttonType,
        class: L.value,
        role: "button",
        style: R.value,
        disabled: o.disabled,
        onClick: V,
        onAnimationend: j
      }, {
        default: () => [g.value ? F() : U(), !g.value && m(d, "default", void 0, () => [n(v, {
          renderer: o.slots.default
        }, null)]), !g.value && (o.badge || o.badge === 0) ? q() : null]
      });
    };
  }
});
export {
  wo as default
};
//# sourceMappingURL=button.mjs.map