<template>
  <div class="el-corner">
    <slot></slot>
    <span :class="[
        'el-corner__label',
        type ? `el-corner--${type}` : '',
        size ? `el-corner--${size}` : '',
        effect ? `el-corner--${effect}` : '',
        hit && 'is-hit',
      ]">{{text}}</span>
  </div>
</template>

<script>
export default {
  name: 'ElCorner',
  props: {
    text: String,
    type: String,
    hit: Boolean,
    disableTransitions: Boolean,
    color: String,
    size: String,
    effect: {
      type: String,
      default: 'light',
      validator(val) {
        return ['dark', 'light', 'plain'].indexOf(val) !== -1;
      }
    }
  }
};
</script>
