<template>
  <div class="text-center mb-4 last:mb-0" :style="styles" @click="click">
    <div v-if="options.html" v-html="options.html"></div>
    <template v-else>{{ options.text }}</template>
  </div>
</template>
<script>
import Base from './base';
import { mixinStyle } from './utils';

export default {
  name: 'v-text',
  extends: Base,
  computed: {
    styles(){
      const { size, color, align, bold, style } = this.options;
      return mixinStyle({
        'font-size': size && `${size}rem`,
        color,
        'text-align': align,
        'font-weight': bold ? 'bold' : undefined,
      }, style);
    }
  }
}
</script>
<style lang="less" scoped>
</style>
