<template>
  <div class="uif-form-label" :class="classes" :style="styles">
    <span v-if="required" class="required">*</span><span>{{input.label}}</span>
    <base-slot v-if="input.labelSlot" :slot-name="input.labelSlot" :params="input"></base-slot>
  </div>
</template>

<script>
import BaseSlot from '@uif/hq/lib/components/base-slot'
import {parseInputs} from '@uif/admin/lib/utils/form'
import {some} from '@uif/hq/lib/utils/array'

export default {
  components: {
    BaseSlot
  },
  props: {
    position: {
      type: String,
      default: 'left'
    },
    input: {
      type: Object,
      default () {
        return {}
      }
    },
    labelWidth: {
      type: [Number, String],
      default: 130
    },
    size: {
      default: 'default'
    }
  },
  computed: {
    classes () {
      return [
        'uif-form-label-' + this.position,
        'uif-form-label-' + this.position + '-' + this.size
      ]
    },
    styles () {
      return this.position === 'left' ? {width: this.labelWidth + 'px'} : null
    },
    required () {
      return some(parseInputs(this.input), input => input.required)
    }
  }
}
</script>
