@indielayer/ui/lib/components/button/Button.vue2.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as D, ref as I, inject as O, computed as l, useAttrs as T, unref as t, openBlock as a, createBlock as r, resolveDynamicComponent as V, normalizeClass as u, normalizeStyle as A, withCtx as E, createCommentVNode as d, createElementVNode as m, renderSlot as F } from "vue";
import { useTheme as K } from "../../composables/useTheme.js";
import { useColors as X } from "../../composables/useColors.js";
import { useCommon as b } from "../../composables/useCommon.js";
import { useInteractive as h } from "../../composables/useInteractive.js";
import { injectButtonGroupKey as q } from "../../composables/keys.js";
import H from "../loader/Loader.vue.js";
import f from "../icon/Icon.vue.js";
const J = {
  ...b.props(),
  ...X.props(),
  ...h.props(),
  tag: {
    type: String,
    default: "button"
  },
  type: {
    type: String,
    default: "button"
  },
  icon: String,
  iconLeft: String,
  iconRight: String,
  to: [String, Object],
  outlined: Boolean,
  rounded: Boolean,
  glow: Boolean,
  ghost: Boolean,
  light: Boolean,
  block: Boolean,
  flat: Boolean
}, M = {
  name: "XButton",
  validators: {
    ...b.validators()
  }
}, to = /* @__PURE__ */ D({
  ...M,
  props: J,
  setup(y, { expose: v }) {
    const e = y, g = I(null), s = O(q, {
      isButtonGroup: !1,
      groupProps: {}
    }), { isButtonGroup: B } = s, n = l(() => s.groupProps.size || e.size), z = l(() => s.groupProps.flat || e.flat), k = l(() => e.color || s.groupProps.color), P = l(() => e.ghost || s.groupProps.ghost), S = l(() => e.light || s.groupProps.light), w = l(() => e.outlined || s.groupProps.outlined), i = l(() => e.disabled || s.groupProps.disabled), p = l(() => e.icon || e.iconLeft), C = T(), R = l(() => C.href ? "a" : e.to ? "router-link" : e.tag), L = l(() => ({
      size: t(n),
      flat: t(z),
      color: t(k),
      ghost: t(P),
      light: t(S),
      outlined: t(w),
      disabled: t(i),
      loading: e.loading,
      block: e.block,
      glow: e.glow,
      iconLeft: t(p),
      iconRight: e.iconRight,
      rounded: e.rounded
    })), { className: G, classes: c, styles: $ } = K("Button", {}, L, {
      isButtonGroup: B
    }), { focus: j, blur: N } = h(g);
    return v({ focus: j, blur: N }), (o, Q) => (a(), r(V(R.value), {
      ref_key: "elRef",
      ref: g,
      to: o.to,
      class: u([
        t(G),
        o.$style.button,
        o.glow && !i.value && !o.loading ? o.$style["button--glow"] : "",
        t(c).wrapper,
        { "w-full": o.block }
      ]),
      style: A(t($)),
      "aria-busy": o.loading ? "true" : null,
      "aria-disabled": o.tag !== "button" && i.value ? "true" : null,
      disabled: i.value || o.loading,
      type: o.tag === "button" ? o.type : null
    }, {
      default: E(() => [
        o.loading ? (a(), r(H, {
          key: 0,
          class: "absolute",
          size: n.value,
          label: o.loadingLabel,
          status: o.loadingStatus
        }, null, 8, ["size", "label", "status"])) : d("", !0),
        m("div", {
          class: u(["inline-flex items-center justify-center", { invisible: o.loading }])
        }, [
          p.value ? (a(), r(f, {
            key: 0,
            size: n.value,
            icon: p.value,
            class: u([
              t(c).iconLeft
            ])
          }, null, 8, ["size", "icon", "class"])) : d("", !0),
          m("span", null, [
            F(o.$slots, "default", {}, void 0, !0)
          ])
        ], 2),
        o.iconRight ? (a(), r(f, {
          key: 1,
          size: n.value,
          icon: o.iconRight,
          class: u([
            t(c).iconRight,
            { invisible: o.loading }
          ])
        }, null, 8, ["size", "icon", "class"])) : d("", !0)
      ]),
      _: 3
    }, 8, ["to", "class", "style", "aria-busy", "aria-disabled", "disabled", "type"]));
  }
});
export {
  to as default
};