ucc-ui/dist/es/Button-DOc5qANu.js

ucc-ui components library

import { defineComponent as I, inject as P, computed as f, useSlots as v, ref as S, openBlock as t, createBlock as a, resolveDynamicComponent as E, normalizeClass as z, normalizeStyle as D, unref as n, withCtx as F, mergeProps as y, createCommentVNode as u, createElementBlock as $, renderSlot as N } from "vue";
import { w as U } from "./utils-BzE2Aob-.js";
import { _ as w } from "./Icon-BypviEOd.js";
import { t as L, d as O } from "./vendors-PY6Ic9FA.js";
const m = {
  LEFT: "left",
  RIGHT: "right",
  DEFAULT: "default"
  // left
}, b = U(w), R = Symbol("formItemSize"), _ = { key: 1 }, A = /* @__PURE__ */ I({
  name: "UButton",
  __name: "Button",
  props: {
    tag: { default: "button" },
    round: { type: [Boolean, Number] },
    circle: { type: Boolean },
    plain: { type: Boolean },
    link: { type: Boolean },
    bg: { type: Boolean },
    type: {},
    size: { default: "default" },
    disabled: { type: Boolean },
    loading: { type: Boolean, default: !1 },
    loadingIcon: { default: "spinner" },
    autofocus: { type: Boolean, default: !1 },
    nativeType: { default: "button" },
    autoInsertSpace: { type: Boolean },
    color: {},
    dark: { type: Boolean },
    icon: {},
    iconStyle: {},
    iconProps: { default: () => ({
      icon: ""
    }) },
    iconPosition: { default: "left" },
    useThrottle: { type: Boolean, default: !1 },
    throttleTime: { default: 400 },
    useDebounce: { type: Boolean, default: !1 },
    debounceTime: { default: 400 },
    onClick: {}
  },
  emits: ["click"],
  setup(g, { expose: k, emit: B }) {
    const T = B, e = g, l = P(R, null), c = f(() => (l == null ? void 0 : l.value) || e.size);
    v();
    const r = S(), i = (o) => T("click", o), h = L(i, e.throttleTime), C = O(i, e.debounceTime), d = f(() => Object.assign(e.iconProps, {
      spin: e.loading || e.iconProps.spin,
      icon: (e.loading ? e.loadingIcon || e.icon || e.iconProps.icon : e.icon || e.iconProps.icon) || ""
    }));
    return k({
      ref: r
    }), (o, p) => (t(), a(E(o.tag), {
      ref_key: "_ref",
      ref: r,
      class: z(["u-button", {
        [`u-button--${o.type}`]: o.type,
        [`u-button--${c.value}`]: c.value,
        "is-plain": o.plain,
        "is-link": o.link,
        "is-disabled": o.disabled,
        "is-round": o.round,
        "is-loading": o.loading,
        "is-circle": o.circle
      }]),
      autofocus: o.autofocus,
      type: o.tag === "button" ? o.nativeType : void 0,
      disabled: o.disabled || o.loading ? !0 : void 0,
      style: D({ backgroundColor: o.color }),
      onClick: p[0] || (p[0] = (s) => o.useThrottle ? n(h)(s) : o.useDebounce ? n(C)(s) : i(s))
    }, {
      default: F(() => [
        o.icon && o.iconPosition === n(m).LEFT ? (t(), a(n(b), y({
          key: 0,
          class: [
            "u-button__icon",
            "u-button__icon--left",
            { "u-button__icon--loading": o.loading }
          ],
          style: o.iconStyle ?? {},
          size: "sm",
          icon: o.icon
        }, d.value), null, 16, ["class", "style", "icon"])) : u("", !0),
        o.$slots.default ? (t(), $("span", _, [
          N(o.$slots, "default")
        ])) : u("", !0),
        o.icon && o.iconPosition === n(m).RIGHT ? (t(), a(n(b), y({
          key: 2,
          class: [
            "u-button__icon",
            "u-button__icon--right",
            { "u-button__icon--loading": o.loading }
          ],
          style: o.iconStyle ?? {},
          size: "sm",
          icon: o.icon
        }, d.value), null, 16, ["class", "style", "icon"])) : u("", !0)
      ]),
      _: 3
    }, 8, ["autofocus", "type", "disabled", "class", "style"]));
  }
});
export {
  R as F,
  b as U,
  A as _
};