malio-layer-ui/app/components/malio/input/InputTextArea.vue

<template>
  <div :class="mergedGroupClass">
    <div class="relative w-full flex-1">
      <textarea
        :id="inputId"
        :name="name"

        :autocomplete="autocomplete"
        class="floating-input peer w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent overflow-auto"
        :class="[
        isReadonly ? 'border-black' : (isFilled ? 'border-black' : 'border-m-muted'),
        disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : (isReadonly ? 'cursor-default' : 'cursor-text'),
        hasError
          ? 'border-m-danger focus:border-m-danger'
          : hasSuccess
            ? 'border-m-success focus:border-m-success'
            : isReadonly ? '' : 'focus:border-m-primary',
        isReadonly ? '' : (isFocused ? 'textarea-scrollbar-primary' : ''),
        textInput,
        showCounterComputed ? 'pb-6' : '',
        rounded,
        keyboardFocused ? 'm-focus-ring-kbd' : '',
      ]"
        :required="required"
        :maxlength="maxLength"
        :rows="rowsCount"
        :disabled="disabled"
        :value="currentValue"
        :readonly="readonly"
        :aria-invalid="hasError"
        :aria-describedby="describedBy"
        :style="textareaStyle"
        v-bind="attrs"
        placeholder="_"
        @input="onInput"
        @focus="isFocused = true; onKbdFocus()"
        @blur="isFocused = false; onKbdBlur()"
      />
      <label
        v-if="label"
        :for="inputId"
        class="floating-label absolute left-3 top-2 mt-1 inline-block origin-left transition-transform duration-150 font-medium"
        :class="[
      shouldFloatLabel ? '-translate-y-[1.30rem] scale-90' : '',
      hasError
        ? 'text-m-danger'
        : hasSuccess
          ? 'text-m-success'
          : disabled
            ? 'text-m-muted'
            : isReadonly
              ? (isFilled ? 'text-black' : 'text-m-muted')
              : (isFocused ? 'text-m-primary' : shouldFloatLabel ? 'text-black' : 'text-m-muted'),
        textLabel,
        ]"
      >
        {{ label }}<MalioRequiredMark v-if="required" />
      </label>
      <span
        v-if="showCounterComputed"
        class="pointer-events-none absolute bottom-2 left-3 text-xs text-m-muted"
      >
        {{ currentLength }}/{{ maxLength }}
      </span>
    </div>
    <div
      v-if="reserveMessageSpace || hint || error || success"
      data-test="message-line"
      class="mt-1 flex items-center justify-between gap-2 text-xs"
      :class="reserveMessageSpace ? 'min-h-[1rem]' : ''"
    >
      <p
        :id="`${inputId}-describedby`"
        :class="[
          hasError
            ? 'text-m-danger'
            : hasSuccess
              ? 'text-m-success'
              : 'text-m-muted',
          'ml-[2px]',
        ]"
      >
        {{ error || success || hint }}
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, ref, useAttrs, useId} from 'vue'
import {twMerge} from 'tailwind-merge'
import MalioRequiredMark from '../shared/RequiredMark.vue'
import {useKbdFocusRing} from '../shared/useKbdFocusRing'

defineOptions({name: 'MalioInputTextArea', inheritAttrs: false})

const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()

const props = withDefaults(
  defineProps<{
    id?: string
    label?: string
    name?: string
    autocomplete?: string
    modelValue?: string | null | undefined
    size?: number | string
    textInput?: string
    textLabel?: string
    resize?: 'none' | 'both' | 'horizontal' | 'vertical'
    minResizeWidth?: number
    maxResizeWidth?: number
    minResizeHeight?: number
    maxResizeHeight?: number
    required?: boolean
    maxLength?: number
    showCounter?: boolean
    disabled?: boolean
    readonly?: boolean
    hint?: string
    error?: string
    success?: string
    rounded?: string
    groupClass?: string
    reserveMessageSpace?: boolean

  }>(),
  {
    id: '',
    name: '',
    autocomplete: 'off',
    modelValue: undefined,
    label: '',
    size: 2,
    textInput: 'text-lg',
    required: false,
    maxLength: 800,
    showCounter: false,
    readonly: false,
    textLabel: 'text-sm',
    disabled: false,
    rounded: 'rounded-md',
    hint: '',
    error: '',
    success: '',
    resize: 'both',
    minResizeWidth: 280,
    maxResizeWidth: 640,
    minResizeHeight: 40,
    maxResizeHeight: 320,
    groupClass: '',
    reserveMessageSpace: true,
  },
)

const mergedGroupClass = computed(() =>
  // pt-1 (4px) aligne le haut de la textarea avec les inputs floating-label,
  // qui centrent un champ de 40px dans un groupe h-12 (≈ 4px de décalage en haut).
  twMerge('flex flex-col w-full pt-1', props.groupClass),
)

const attrs = useAttrs()
const generatedId = useId()
const localValue = ref('')
const isFocused = ref(false)

const inputId = computed(() => props.id?.toString() || `malio-input-textarea-${generatedId}`)
const isControlled = computed(() => props.modelValue !== undefined)
const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
const hasError = computed(() => !!props.error)
const hasSuccess = computed(() => !!props.success && !hasError.value)
const isFilled = computed(() => currentValue.value.trim().length > 0)
const isReadonly = computed(() => props.readonly && !props.disabled)
const shouldFloatLabel = computed(() =>
  isReadonly.value
    ? isFilled.value
    : isFocused.value || currentValue.value.length > 0,
)
const rowsCount = computed(() => Math.max(1, Number(props.size || 3)))
const currentLength = computed(() => (currentValue.value ?? '').length)
const showCounterComputed = computed(() =>
  props.showCounter && Number(props.maxLength) > 0
)
const toCssSize = (value: number | string) => (typeof value === 'number' ? `${value}px` : value)
const textareaStyle = computed(() => ({
  resize: props.resize,
  minWidth: toCssSize(props.minResizeWidth),
  maxWidth: toCssSize(props.maxResizeWidth),
  minHeight: toCssSize(props.minResizeHeight),
  maxHeight: toCssSize(props.maxResizeHeight),
}))
const describedBy = computed(() =>
  (hasError.value || hasSuccess.value || !!props.hint) ? `${inputId.value}-describedby` : undefined,
)

const emit = defineEmits<{
  (event: 'update:modelValue', value: string): void
}>()

const onInput = (event: Event) => {
  const target = event.target as HTMLTextAreaElement
  if (!isControlled.value) {
    localValue.value = target.value
  }
  emit('update:modelValue', target.value)
}
</script>

<style scoped>
.floating-label {
  background: white;
  padding: 0 0.25rem;
}

.textarea-scrollbar-primary {
  scrollbar-color: rgb(var(--m-primary)) transparent;
}
</style>