<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  label?: string
  labelCharCount?: number
  prependMarginEnd?: number
  readonly?: boolean
}>()

const modelValue = defineModel<string>({ required: true })

const prependMinWidth = computed(() =>
  props.labelCharCount != null ? `${props.labelCharCount * 0.785}rem` : undefined
)

const marginEndStyle = computed(() => `${props.prependMarginEnd ?? 8}px`)
</script>

<template>
  <v-text-field
    v-model="modelValue"
    variant="outlined"
    density="compact"
    hide-details
    :readonly="readonly"
  >
    <template v-if="label" #prepend>
      <span
        class="text-title-small"
        :style="prependMinWidth ? { minWidth: prependMinWidth } : undefined"
      >
        {{ label }}
      </span>
    </template>
  </v-text-field>
</template>

<style scoped>
:deep(.v-input__prepend) {
  margin-inline-end: v-bind(marginEndStyle);
}
</style>
