<template>
  <div :title="tips" class="uif-description" :class="{'uif-description-flex': flex}">
    <span v-if="label" class="uif-description-label">{{label}}</span>
    <span class="uif-description-value">{{value}}</span>
    <slot></slot>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  components: {
  },
  name: 'u-description',
  props: {
    label: {
      type: String,
      default: ''
    },
    value: {
      type: [String, Number],
      default: ''
    },
    title: {
      type: [String, Number],
      default: ''
    },
    flex: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    tips () {
      const {title, label, value} = this
      if (title) return title
      if (label) return label + ': ' + value
      return value
    }
  }
}
</script>
