<template>
  <td
    v-if="!!labelComputed"
    v-show="!hiddenComputed || keepHiddenCell"
    v-bind="labelTdAttrs"
    :class="{ 'ant-form-item-label': true, 'sd-readonly': readOnly, [$style.cell]: true }"
  >
    <label
      v-show="!hiddenComputed"
      :class="{ 'ant-form-item-required': field.required }"
      :title="labelComputed"
    >
      <sd-form-item-help-popover v-if="fieldPopoverDescription" :html="fieldPopoverDescription" />
      {{ labelComputed }}
    </label>
  </td>
</template>

<script>
import components from './_import-components/sd-form-item-td-label-import'
import sdFormItemTdMixin from './sd-form-item-td-mixin'

export default {
  name: 'SdFormItemTdLabel',
  components,
  mixins: [sdFormItemTdMixin],
  computed: {
    fieldPopoverDescription() {
      if (this.field.attrFD?.popoverDescription) {
        return this.field.attrFD?.description
      } else {
        return ''
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.cell {
  display: table-cell;
}
</style>
