<template>
  <view
    :class="'k-theme-demo ' + 'k-theme-demo-' + size + ' k-theme-demo-' + type"
    :style="{
      border: border,
      backgroundColor: bgColor,
      color: color,
    }"
  >
    {{ text }}
  </view>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  name: 'k-tag',
  props: {
    type: {
      type: String, // 'default' | 'outline' | 'plain' | 'frameless'
      default: 'default',
    },
    color: {
      type: String,
      default: '#ffffff',
    },
    bgColor: {
      type: String,
      default: '',
    },
    text: {
      type: String,
      default: '',
    },
    size: {
      type: String,
      default: 'normal',
    },
  },
  computed: {
    border(): string {
      return `2rpx solid ${
        this.type == 'outline' ? this.color : 'transparent'
      }`;
    },
  },
});
</script>

<style scoped lang="scss">
.k-theme-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 40px;
  color: #fff;
  font-size: 14px;
  background: var(--k-color-primary, #000);
}

.k-theme-demo-small {
  height: 18px;
  padding: 0 8px;
  font-size: 12px;
}

.k-theme-demo-frameless {
  border-radius: 2px;
  border: none;
  padding: 0 4px;
}
</style>
