@vuesax-alpha/nightly/es/components/button/src/button2.mjs

A Component Library for Vue 3

import { defineComponent, useSlots, ref, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, unref, renderSlot, createCommentVNode, createVNode } from 'vue';
import '../../../hooks/index.mjs';
import { IconLoading } from '../../icon/index.mjs';
import '../../../utils/index.mjs';
import { buttonProps } from './button.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useVuesaxBaseComponent } from '../../../hooks/use-base-component/index.mjs';
import { useColor } from '../../../hooks/use-common-props/index.mjs';
import { getVsColor } from '../../../utils/color.mjs';
import { rippleReverse, rippleCut, ripple } from '../../../utils/ripple.mjs';

const __default__ = defineComponent({
  name: "VsButton"
});
const _sfc_main = defineComponent({
  ...__default__,
  props: buttonProps,
  setup(__props) {
    const props = __props;
    const slots = useSlots();
    const ns = useNamespace("button");
    const root$ = ref();
    const vsBaseClasses = useVuesaxBaseComponent(useColor());
    const buttonClasses = computed(() => {
      return [
        ns.b(),
        vsBaseClasses,
        props.shape && ns.m(props.shape),
        props.active && ns.m("active"),
        slots.animate && ns.m("animate"),
        props.animationType && ns.m(`animate-${props.animationType}`),
        props.animateInactive && ns.m("animate-inactive"),
        props.block && ns.m("block"),
        props.icon && ns.m("icon"),
        props.loading && ns.m("loading"),
        ns.em("size", props.size),
        ns.m(props.type),
        props.upload && ns.m("upload")
      ];
    });
    const buttonStyles = computed(() => {
      return [
        ns.cssVar({
          color: getVsColor(props.color)
        })
      ];
    });
    const mouseDown = (evs) => {
      if (props.ripple === "reverse") {
        rippleReverse(evs);
      } else if (props.ripple === "cut") {
        rippleCut(evs);
      } else {
        if (props.type === "flat") {
          ripple(
            evs,
            !props.active && document.activeElement !== root$.value ? "inherit" : void 0,
            !props.active && document.activeElement !== root$.value
          );
        } else {
          ripple(evs, void 0, false);
        }
      }
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "button",
        {
          ref_key: "root$",
          ref: root$,
          class: normalizeClass(buttonClasses.value),
          style: normalizeStyle(buttonStyles.value),
          onMousedown: mouseDown
        },
        [
          createElementVNode(
            "div",
            {
              class: normalizeClass(unref(ns).e("content"))
            },
            [
              renderSlot(_ctx.$slots, "default")
            ],
            2
          ),
          _ctx.$slots.animate ? (openBlock(), createElementBlock(
            "div",
            {
              key: 0,
              class: normalizeClass([unref(ns).e("animate"), unref(ns).em("animate", _ctx.animationType)])
            },
            [
              renderSlot(_ctx.$slots, "animate")
            ],
            2
          )) : createCommentVNode("v-if", true),
          _ctx.loading ? (openBlock(), createElementBlock(
            "div",
            {
              key: 1,
              class: normalizeClass(unref(ns).e("loading"))
            },
            [
              createVNode(unref(IconLoading))
            ],
            2
          )) : createCommentVNode("v-if", true)
        ],
        38
      );
    };
  }
});
var Button = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/vuesax-alpha/vuesax-alpha/packages/components/button/src/button.vue"]]);

export { Button as default };
//# sourceMappingURL=button2.mjs.map