fbredius/storybook

<template>
  <button type="button" :class="classes" @click="onClick" :style="style">
    {{ label }} - {{ sublabel }}
  </button>
</template>

<script lang="typescript">
import './button.css';
import { reactive, computed, defineComponent } from 'vue';

export default defineComponent({
  name: 'my-button',

  props: {
    label: {
      type: String,
      required: true,
    },
    sublabel: {
      type: String,
      default: 'sublabel',
    },
    primary: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      validator: function (value) {
        return ['small', 'medium', 'large'].indexOf(value) !== -1;
      },
    },
    backgroundColor: {
      type: String,
    },
  },

  emits: ['click'],

  // @ts-ignore
  setup(props, { emit }) {
    props = reactive(props);
    return {
      classes: computed(() => ({
        'storybook-button': true,
        'storybook-button--primary': props.primary,
        'storybook-button--secondary': !props.primary,
        [`storybook-button--${props.size || 'medium'}`]: true,
      })),
      style: computed(() => ({
        backgroundColor: props.backgroundColor,
      })),
      onClick() {
        emit('click');
      }
    }
  },
});
</script>