@meve/ui/es/button/index.js

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import Ripple from '../ripple';
import Loading from '../loading';
import { createNamespace } from '../utils/create';
import { props } from './props';





var _createNamespace = createNamespace('button'),
    createComponent = _createNamespace.createComponent,
    namespace = _createNamespace.namespace;

var ButtonPlugin = createComponent({
  props: props,
  directives: {
    Ripple: Ripple
  },
  methods: {
    handleClick: function handleClick(event) {
      if (this.disabled || this.loading) {
        return;
      }

      this.$emit('click', event);
    },
    handleTouchstart: function handleTouchstart(event) {
      if (this.disabled || this.loading) {
        return;
      }

      this.$emit('touchstart', event);
    }
  },
  render: function render() {
    var _this = this;

    var h = arguments[0];
    var size = this.size,
        disabled = this.disabled,
        block = this.block,
        text = this.text,
        round = this.round,
        outline = this.outline,
        ripple = this.ripple,
        type = this.type,
        loading = this.loading,
        loadingSize = this.loadingSize;
    return h("button", {
      "class": [namespace(), 'm--box', namespace("--" + size), block ? "m--flex " + namespace('--block') : 'm--inline-flex', text ? namespace("--text-" + type) : namespace("--" + type), text ? namespace('--text') : namespace('--shadow'), round ? namespace('--round') : null, outline ? namespace('--outline') : null, !text && disabled ? namespace('--disabled') : null, text && disabled ? namespace('--text-disabled') : null],
      "attrs": {
        "tabIndex": "-1",
        "disabled": disabled
      },
      "directives": [{
        name: "ripple",
        value: {
          disabled: disabled || !ripple
        }
      }],
      "on": _extends({}, {
        "click": function click($event) {
          for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
            attrs[_key - 1] = arguments[_key];
          }

          _this.handleClick.apply(_this, [$event].concat(attrs));
        },
        "touchstart": function touchstart($event) {
          for (var _len2 = arguments.length, attrs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
            attrs[_key2 - 1] = arguments[_key2];
          }

          _this.handleTouchstart.apply(_this, [$event].concat(attrs));
        }
      })
    }, [h("div", {
      "class": namespace('__content')
    }, [this.slots()]), loading && h(Loading, {
      "attrs": {
        "button-cover": true,
        "svgClass": namespace("--" + size + "-loading"),
        "loading": loading,
        "size": loadingSize
      },
      "class": namespace('__loading')
    })]);
  }
});
export var _ButtonComponent = ButtonPlugin;
export default ButtonPlugin;