<template>
  <v-btn
    :min-width="minWidth"
    :min-height="minHeight"
    :type="type"
    :to="to"
    :loading="loading"
    @click="onClick()"
    @mouseover="onMouseover()"
    class="ws-btn"
    :class="[{small:small}]"
    :color="color"
    :small="small"
    :block="block"
    :elevation="0"
    :outlined="outlined"
    :target="target"
    :href="href"
    :disabled="disabled"
  >
    <slot></slot>
  </v-btn>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$emit("click");
    },
    onMouseover() {
      this.$emit("mouseover");
    },
  },
  props: {
    small: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    href: {
      type: String,
      default: null,
    },
    target: {
      type: String,
      default: null,
    },
    to: {
      type: String,
      default: null,
    },
    minWidth: {
      type: String,
      default: null,
    },
    minHeight: {
      type: String,
      default: null,
    },
    color: {
      type: String,
      default: "primary",
    },
    outlined: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: null,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    block: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style lang="scss">
@import "../assets/scss/ws-btn.scss";
</style>