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 c, createBlock as y, openBlock as l, resolveDynamicComponent as m, withKeys as I, normalizeStyle as K, normalizeClass as g, withModifiers as S, withCtx as j, createElementBlock as r, createCommentVNode as n, createElementVNode as u, renderSlot as h, 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(e, { emit: k }) {
    const d = e, i = T(!1), { colorPalettes: C } = P("Button"), o = c(() => d.color !== void 0 ? O(d.color) : C.value), w = c(() => ({
      default: o.value[5],
      reverse: o.value[5],
      primary: o.value[5],
      danger: "#ff4d4f",
      dashed: o.value[5],
      text: "transparent",
      link: "transparent"
    })[d.type]), B = k, s = R(["icon", "default"]), f = c(() => s.icon || d.icon), x = c(() => f.value && !s.default);
    function b(a) {
      i.value ? (i.value = !1, N(() => {
        i.value = !0;
      })) : i.value = !0, B("click", a);
    }
    function $(a) {
      b(a);
    }
    function z() {
      i.value = !1;
    }
    return (a, t) => (l(), y(m(e.href ? "a" : "div"), {
      tabindex: "0",
      class: g(["btn-wrap", [
        `btn-${e.type} btn-${e.size}`,
        {
          [`loading-${e.size}`]: !e.href && e.loading,
          "btn-icon-only": x.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: ${o.value[5]};
      --button-primary-color-hover: ${o.value[4]};
      --button-primary-color-active: ${o.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: ${w.value};
    `),
      href: e.href,
      target: e.target,
      onClick: t[0] || (t[0] = (v) => e.disabled || e.loading ? () => !1 : b(v)),
      onKeydown: t[1] || (t[1] = I(S((v) => e.keyboard && !e.disabled && !e.loading ? $(v) : () => !1, ["prevent"]), ["enter"]))
    }, {
      default: j(() => [
        e.loading || !f.value ? (l(), r("div", V, [
          !e.href && e.loadingType === "static" ? (l(), r("div", A, [...t[2] || (t[2] = [
            u("svg", {
              class: "circle",
              width: "1em",
              height: "1em",
              fill: "currentColor",
              viewBox: "0 0 100 100"
            }, [
              u("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)
          ])])) : n("", !0),
          !e.href && e.loadingType === "dynamic" ? (l(), r("div", D, [...t[3] || (t[3] = [
            u("svg", {
              class: "circle",
              viewBox: "0 0 50 50",
              width: "1em",
              height: "1em",
              fill: "currentColor"
            }, [
              u("circle", {
                class: "path",
                cx: "25",
                cy: "25",
                r: "20",
                fill: "none"
              })
            ], -1)
          ])])) : n("", !0)
        ])) : n("", !0),
        !e.loading && f.value ? (l(), r("span", F, [
          h(a.$slots, "icon", {}, () => [
            e.icon ? (l(), y(m(e.icon), { key: 0 })) : n("", !0)
          ], !0)
        ])) : n("", !0),
        M(s).default ? (l(), r("span", W, [
          h(a.$slots, "default", {}, void 0, !0)
        ])) : n("", !0),
        e.disabled ? n("", !0) : (l(), r("div", {
          key: 3,
          class: g(["button-wave", { "wave-active": i.value }]),
          onAnimationend: z
        }, null, 34))
      ]),
      _: 3
    }, 40, ["class", "style", "href", "target"]));
  }
});
export {
  J as default
};