GrTextarea

Набор совпадает с GrInput, чтобы обёртки над контролами писались одинаково. Нативные события переизлучаются компонентом: объявленный emit уходит из $attrs, и без этого @change у потребителя перестал бы работать.

clearable повторяет анатомию GrInput: крестик в правом верхнем углу при непустом значении, скрыт при disabled/readonly, настраивается через GrConfigProvider. Поле держит место под крестик справа, пока он может появиться, — первая строка не уходит под «×».

Обёртка вокруг textarea есть всегда, а кнопка, признак состояния и счётчики (showCount, showLineCount) — её соседи по условию. Раньше обёртка появлялась вместе с ними, и <textarea> пересоздавался: стоило state стать success на лету, фокус уходил на <body>, и следующие нажатия пропадали. class и style ложатся на обёртку, остальные атрибуты — на сам <textarea> (как у GrInput, см. form-controls.md). Поле внутри — блочное: высота с соседями и без них одна.

size, readonly, maxlength + showCount работают так же, как в поле ввода: textarea в одной форме рядом с GrInput не должна отличаться ни кеглем, ни набором возможностей.

Счётчик связан с полем через aria-describedby — иначе «12 / 60» видно глазами, но не слышно, при том что ограничение длины и есть его смысл.

state="success" и "warning" тем же приёмом получают иконку и скрытую подпись в aria-describedby: цвет рамки как единственный носитель смысла — это WCAG 1.4.1, а ARIA-эквивалента aria-invalid у этих двух состояний нет. danger иконки не получает — его смысл уже несут aria-invalid и текст ошибки от GrFormField, — и признак гаснет, как только поле объявлено невалидным.

Признак появляется в той же обёртке, что и кнопка очистки: поле при этом не пересоздаётся, и фокус с кареткой остаются на месте.

Счётчик строк

showLineCount печатает вторую подпись в том же ряду: слева строки, справа символы. Строки считаются логическими — по переводам строки, — поэтому при autosize число не зависит от ширины поля: визуальный перенос строкой не считается.

Подпись локализована и склоняется (gr.textarea.lines), а maxLines меняет её на формат 3 / 10. Ограничения ввода у него нет намеренно: обрезать набранный текст за пользователя компонент не вправе — счётчик показывает перебор (12 / 10), а решение остаётся за формой.

Оба счётчика включаются независимо и оба связаны с полем через aria-describedby.

Своя формулировка

12 / 60 — не единственный способ сказать про длину, а счётчик строк вторую формулировку не заменяет: он просто второй готовый счётчик, такой же фиксированный по форме. Слот #count отдаёт текст потребителю:

<GrTextarea v-model="text" :maxlength="280">
  <template #count="{ remaining }">
    {{ remaining < 0 ? `перебор на ${-remaining}` : `осталось ${remaining}` }}
  </template>
</GrTextarea>

Слот получает length, maxlength и remaining; без maxlength последние два приходят undefined — предел не выдумывается. remaining не зажат в ноль: maxlength держит ввод с клавиатуры, но значение, пришедшее в v-model из кода, ограничение перешагивает, и «-3» там честнее нуля.

Отдельный show-count при этом не нужен — заданный слот сам по себе просьба показать счётчик. Место в ряду, связка с полем через aria-describedby и оформление остаются те же: слот меняет текст, а не устройство.

<GrTextarea v-model="text" autosize :rows="2" />

autosize включает директиву v-autosize, которая уже была в пакете и просто не была подключена к компоненту. rows задаёт стартовую высоту.

resize (vertical по умолчанию, none, both) управляет ручным растягиванием: вместе с autosize его обычно выключают.

GrTextareaProps — объявленный interface, а не typeof props. Прежний экспорт отдавал тип разрешённых пропов: после withDefaults все поля с дефолтами становились обязательными и readonly, и попытка написать const p: GrTextareaProps = { modelValue: '' } падала на ровном месте.

Гасится фоном --gr-muted и текстом --gr-muted-fg, а не opacity: прозрачность разбавляет выверенные на AA токены.