<template>
  <component
    :is="as"
    class="document-paper-field"
    :class="[
      spanClass,
      {
        'document-paper-field-readonly': readonly,
        'document-paper-field-upload': upload
      }
    ]"
  >
    <span>{{ label }}</span>
    <slot>
      <p class="document-paper-readonly-value">{{ value || "-" }}</p>
    </slot>
  </component>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  label: {
    type: String,
    required: true
  },
  value: {
    type: [String, Number],
    default: ""
  },
  span: {
    type: [Number, String],
    default: 1
  },
  as: {
    type: String,
    default: "label"
  },
  readonly: {
    type: Boolean,
    default: false
  },
  upload: {
    type: Boolean,
    default: false
  }
});

const spanClass = computed(() => {
  if (String(props.span) === "full") return "document-paper-field-full";
  if (Number(props.span) === 2) return "document-paper-field-wide";
  return "";
});
</script>
