@vuesax-alpha/nightly/lib/components/button/src/button2.js

A Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../hooks/index.js');
var index$3 = require('../../icon/index.js');
require('../../../utils/index.js');
var button = require('./button.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');
var index$1 = require('../../../hooks/use-base-component/index.js');
var index$2 = require('../../../hooks/use-common-props/index.js');
var color = require('../../../utils/color.js');
var ripple = require('../../../utils/ripple.js');

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

exports["default"] = Button;
//# sourceMappingURL=button2.js.map