KArtSell.Aegis/frontend/src/shared/ui/components/KsTextArea.vue

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useFormFieldNavigation } from '../composables/useFormFieldNavigation'

export interface KsTextAreaProps {
  modelValue: string
  label: string
  placeholder?: string
  disabled?: boolean
  readonly?: boolean
  required?: boolean
  error?: string
  help?: string
  rows?: number
  maxLength?: number
  minLength?: number
  inputId?: string
  size?: 'sm' | 'md' | 'lg'
  resizable?: boolean
}

const props = withDefaults(defineProps<KsTextAreaProps>(), {
  disabled: false,
  readonly: false,
  required: false,
  rows: 4,
  size: 'md',
  resizable: true,
})

const emit = defineEmits<{
  'update:modelValue': [value: string]
  blur: [event: FocusEvent]
  focus: [event: FocusEvent]
  input: [event: Event]
}>()

const isFocused = ref(false)
const id = computed(() => props.inputId || `textarea-${Math.random().toString(36).substr(2, 9)}`)
const { inputRef, handleKeyDown } = useFormFieldNavigation()

const containerClass = computed(() => [
  'ks-textarea',
  `ks-textarea--${props.size}`,
  {
    'ks-textarea--focused': isFocused.value,
    'ks-textarea--filled': props.modelValue,
    'ks-textarea--disabled': props.disabled,
    'ks-textarea--error': !!props.error,
    'ks-textarea--required': props.required,
    'ks-textarea--not-resizable': !props.resizable,
  },
])

const handleFocus = (event: FocusEvent) => {
  isFocused.value = true
  emit('focus', event)
}

const handleBlur = (event: FocusEvent) => {
  isFocused.value = false
  emit('blur', event)
}

const handleInput = (event: Event) => {
  const target = event.target as HTMLTextAreaElement
  emit('update:modelValue', target.value)
  emit('input', event)
}

const handleKeyPress = (event: KeyboardEvent) => {
  handleKeyDown(event, true)
}
</script>

<template>
  <div :class="containerClass">
    <!-- Label -->
    <label :for="id" class="ks-textarea__label">
      {{ label }}
      <span v-if="required" class="ks-textarea__required">*</span>
    </label>

    <!-- Textarea container -->
    <div class="ks-textarea__container">
      <textarea
        ref="inputRef"
        :id="id"
        :value="modelValue"
        :placeholder="placeholder"
        :disabled="disabled"
        :readonly="readonly"
        :required="required"
        :maxlength="maxLength"
        :minlength="minLength"
        :rows="rows"
        class="ks-textarea__input"
        :aria-invalid="!!error"
        :aria-describedby="error || help ? `${id}-hint` : undefined"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        @keydown="handleKeyPress"
      />
    </div>

    <!-- Character count -->
    <div v-if="maxLength" class="ks-textarea__count">
      {{ modelValue.length }} / {{ maxLength }}
    </div>

    <!-- Error or help text -->
    <div v-if="error || help" :id="`${id}-hint`" :class="{ 'ks-textarea__error': error, 'ks-textarea__help': help }">
      {{ error || help }}
    </div>
  </div>
</template>

<style scoped>
.ks-textarea {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.ks-textarea--sm {
  --font-size: var(--font-size-sm);
}

.ks-textarea--md {
  --font-size: var(--font-size-sm);
}

.ks-textarea--lg {
  --font-size: var(--font-size-base);
}

/* Label */
.ks-textarea__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.ks-textarea__required {
  color: var(--color-danger-500);
}

/* Container */
.ks-textarea__container {
  position: relative;
  display: flex;
  align-items: flex-start;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-sm);
  background-color: var(--color-background-primary);
  transition: all var(--transition-normal);
  overflow: hidden;
}

/* Input */
.ks-textarea__input {
  width: 100%;
  padding: var(--spacing-3);
  border: none;
  background: transparent;
  font-size: var(--font-size);
  color: var(--color-text-primary);
  outline: none;
  font-family: inherit;
  line-height: 1.5;
  resize: both;
  min-height: 100px;
}

.ks-textarea__input::placeholder {
  color: var(--color-text-tertiary);
}

.ks-textarea--not-resizable .ks-textarea__input {
  resize: none;
}

/* Focus state */
.ks-textarea--focused .ks-textarea__container {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Disabled state */
.ks-textarea--disabled .ks-textarea__container {
  background-color: var(--color-background-secondary);
  opacity: 0.6;
  cursor: not-allowed;
}

.ks-textarea--disabled .ks-textarea__input {
  cursor: not-allowed;
}

/* Error state */
.ks-textarea--error .ks-textarea__container {
  border-color: var(--color-danger-500);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.ks-textarea--error .ks-textarea__label {
  color: var(--color-danger-500);
}

/* Character count */
.ks-textarea__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  text-align: right;
}

/* Error text */
.ks-textarea__error {
  font-size: var(--font-size-xs);
  color: var(--color-danger-500);
  line-height: var(--line-height-tight);
}

/* Help text */
.ks-textarea__help {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-tight);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ks-textarea__container {
    transition: none;
  }
}
</style>