vue-amazing-ui/es/button/Button.vue2.js

An Amazing Vue3 UI Components Library, Using TypeScript.

import { defineComponent as E, ref as T, computed as i, createBlock as v, openBlock as t, resolveDynamicComponent as b, withKeys as I, normalizeStyle as K, normalizeClass as y, withModifiers as S, withCtx as j, createElementBlock as r, createCommentVNode as a, createElementVNode as d, renderSlot as m, unref as M, nextTick as N } from "vue";
import { generate as O } from "@ant-design/colors";
import { useInject as P, useSlotsExist as R } from "../utils/index.js";
const V = {
  key: 0,
  class: "btn-loading"
}, A = {
  key: 0,
  class: "static-circle"
}, D = {
  key: 1,
  class: "dynamic-circle"
}, F = {
  key: 1,
  class: "btn-icon"
}, W = {
  key: 2,
  class: "btn-content"
}, J = /* @__PURE__ */ E({
  __name: "Button",
  props: {
    type: { default: "default" },
    shape: { default: "default" },
    icon: { type: [Object, Function], default: void 0 },
    size: { default: "middle" },
    ghost: { type: Boolean, default: !1 },
    buttonClass: { default: void 0 },
    color: { default: void 0 },
    href: { default: void 0 },
    target: { default: "_self" },
    keyboard: { type: Boolean, default: !0 },
    disabled: { type: Boolean, default: !1 },
    loading: { type: Boolean, default: !1 },
    loadingType: { default: "dynamic" },
    block: { type: Boolean, default: !1 }
  },
  emits: ["click"],
  setup(g, { emit: h }) {
    const s = g, n = T(!1), { colorPalettes: k } = P("Button"), l = i(() => s.color !== void 0 ? O(s.color) : k.value), C = i(() => ({
      default: l.value[5],
      reverse: l.value[5],
      primary: l.value[5],
      danger: "#ff4d4f",
      dashed: l.value[5],
      text: "transparent",
      link: "transparent"
    })[s.type]), w = h, u = R(["icon", "default"]), f = i(() => u.icon || s.icon), B = i(() => f.value && !u.default);
    function p(e) {
      n.value ? (n.value = !1, N(() => {
        n.value = !0;
      })) : n.value = !0, w("click", e);
    }
    function $(e) {
      p(e);
    }
    function z() {
      n.value = !1;
    }
    return (e, o) => (t(), v(b(e.href ? "a" : "div"), {
      tabindex: "0",
      class: y(["btn-wrap", [
        `btn-${e.type} btn-${e.size}`,
        {
          [`loading-${e.size}`]: !e.href && e.loading,
          "btn-icon-only": B.value,
          "btn-circle": e.shape === "circle",
          "btn-round": e.shape === "round",
          "btn-loading-blur": !e.href && e.loading,
          "btn-ghost": e.ghost,
          "btn-block": e.block,
          "btn-disabled": e.disabled
        },
        e.buttonClass
      ]]),
      style: K(`
      --button-primary-color: ${l.value[5]};
      --button-primary-color-hover: ${l.value[4]};
      --button-primary-color-active: ${l.value[6]};
      --button-danger-color: #ff4d4f;
      --button-danger-color-hover: #ff7875;
      --button-danger-color-active: #d9363e;
      --button-text-color-hover: rgba(0, 0, 0, 0.06);
      --button-text-color-active: rgba(0, 0, 0, 0.15);
      --button-ripple-color: ${C.value};
    `),
      href: e.href,
      target: e.target,
      onClick: o[0] || (o[0] = (c) => e.disabled || e.loading ? () => !1 : p(c)),
      onKeydown: o[1] || (o[1] = I(S((c) => e.keyboard && !e.disabled && !e.loading ? $(c) : () => !1, ["prevent"]), ["enter"]))
    }, {
      default: j(() => [
        e.loading || !f.value ? (t(), r("div", V, [
          !e.href && e.loadingType === "static" ? (t(), r("div", A, [...o[2] || (o[2] = [
            d("svg", {
              class: "circle",
              width: "1em",
              height: "1em",
              fill: "currentColor",
              viewBox: "0 0 100 100"
            }, [
              d("path", {
                d: "M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90",
                "stroke-linecap": "round",
                class: "path",
                "fill-opacity": "0"
              })
            ], -1)
          ])])) : a("", !0),
          !e.href && e.loadingType === "dynamic" ? (t(), r("div", D, [...o[3] || (o[3] = [
            d("svg", {
              class: "circle",
              viewBox: "0 0 50 50",
              width: "1em",
              height: "1em",
              fill: "currentColor"
            }, [
              d("circle", {
                class: "path",
                cx: "25",
                cy: "25",
                r: "20",
                fill: "none"
              })
            ], -1)
          ])])) : a("", !0)
        ])) : a("", !0),
        !e.loading && f.value ? (t(), r("span", F, [
          m(e.$slots, "icon", {}, () => [
            e.icon ? (t(), v(b(e.icon), { key: 0 })) : a("", !0)
          ], !0)
        ])) : a("", !0),
        M(u).default ? (t(), r("span", W, [
          m(e.$slots, "default", {}, void 0, !0)
        ])) : a("", !0),
        e.disabled ? a("", !0) : (t(), r("div", {
          key: 3,
          class: y(["button-wave", { "wave-active": n.value }]),
          onAnimationend: z
        }, null, 34))
      ]),
      _: 3
    }, 40, ["class", "style", "href", "target"]));
  }
});
export {
  J as default
};