button.md

button.md

UI Button Component:

<template>
  <button
    :type="buttonType"
    :class="classes"
    :disabled="isDisabled"
    :autofocus="autofocus"
    @click="action">
    <i :class="iconClass" v-if="icon"></i>
    <slot></slot>
  </button>
</template>

<script>
  export default {
    props: {
      buttonType: {
        type: String,
        default: 'button',
        validator (value) {
          return ['button', 'submit', 'reset'].includes(value)
        }
      },
      type: {
        type: String,
        default: 'default',
        validator (value) {
          return ['default', 'primary', 'link'].includes(value)
        }
      },
      shape: {
        type: String,
        validator (value) {
          return ['full', 'circle'].includes(value)
        }
      },
      size: {
        type: String,
        default: 'medium',
        validator (value) {
          return ['small', 'medium', 'large'].includes(value)
        }
      },
      icon: String,
      disabled: Boolean,
      loading: Boolean,
      autofocus: Boolean,
      action: {
        default: () => {},
        type: Function
      }
    },
    computed: {
      classes () {
        return {
          btn: true,
          [`btn-${this.type}`]: this.type,
          [`btn-${this.shape}`]: this.shape,
          [`btn-${this.size}`]: this.size,
          ['btn-disabled']: this.isDisabled,
          ['btn-loading']: this.loading
        }
      },
      isDisabled () {
        return this.disabled || this.loading
      },
      iconClass () {
        return `icon icon-${this.icon}`
      }
    }
  }
</script>

Usage case (all values are optional):

<ui-button
  button-type="submit"
  type="primary"
  icon="basket"
  size="large"
  shape="full"
  :loading="addingToCart"
  :disabled="product.stock > 0"
  :autofocus="false"
  :action="addToCart">
  Add to cart
</ui-button>

Will generate something like:

<button data-v-f57ba89c="" type="submit" disabled="disabled" class="btn btn-primary btn-full btn-large btn-disabled btn-loading">
  <i data-v-f57ba89c="" class="icon icon-basket"></i> 
  Add to cart
</button>