GrTextarea

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

import { GrFormField, GrTextarea } from '@feugene/granularity'

const changelog = ref('fix: чипы автокомплита видно на светлой теме\nfeat: счётчик строк\n')
const script = ref('INT. OFFICE — DAY\n\nОна открывает ноутбук.\n')
</script>

<template>
  <div class="grid gap-4">
    <GrFormField label="Запись в CHANGELOG" hint="Счётчик строк слева, символов — справа">
      <GrTextarea
        v-model="changelog"
        show-line-count
        show-count
        :maxlength="240"
        :rows="4"
      />
    </GrFormField>

    <GrFormField label="Сцена" hint="maxLines задаёт ориентир и не режет набранное">
      <GrTextarea
        v-model="script"
        show-line-count
        :max-lines="8"
        autosize
        :rows="3"
      />
    </GrFormField>
  </div>
</template>

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

import { GrFormField, GrTextarea } from '@feugene/granularity'

const comment = ref('Поле растёт под текст: директива `v-autosize` была в пакете и просто не была подключена.')
const summary = ref('')
</script>

<template>
  <div class="grid gap-4 lg:grid-cols-2">
    <GrFormField label="Комментарий" hint="Высота подстраивается под содержимое">
      <GrTextarea
        v-model="comment"
        autosize
        resize="none"
        :rows="2"
        placeholder="Что изменилось в релизе"
      />
    </GrFormField>

    <GrFormField label="Краткое описание" hint="Счётчик связан с полем через aria-describedby">
      <GrTextarea
        v-model="summary"
        :maxlength="120"
        show-count
        :rows="3"
        size="sm"
        placeholder="До 120 символов"
      />
    </GrFormField>
  </div>
</template>

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

import { GrFormField, GrTextarea } from '@feugene/granularity'

const note = ref('Клиент просил перезвонить после 18:00.\nНапомнить про счёт за март.')
const draft = ref('')
</script>

<template>
  <div class="grid gap-4">
    <GrFormField label="Заметка по клиенту" hint="Крестик появляется, когда есть что стирать">
      <GrTextarea v-model="note" clearable :rows="3" />
    </GrFormField>

    <GrFormField label="Черновик письма" hint="Кнопка очистки достижима `Tab`, срабатывает `Enter` и `Space`">
      <GrTextarea
        v-model="draft"
        clearable
        show-count
        :maxlength="200"
        :rows="3"
        placeholder="Наберите текст — появится счётчик и крестик"
      />
    </GrFormField>
  </div>
</template>

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

import { GrFormField, GrTextarea } from '@feugene/granularity'

const shortNote = ref('Release notes highlight the latest API additions.')
const longNote = ref('This textarea starts taller and fits editorial copy, migration notes or incident postmortems.')
</script>

<template>
  <div class="grid gap-4 lg:grid-cols-2">
    <GrFormField label="Default rows">
      <GrTextarea v-model="shortNote" placeholder="Write a short note" />
    </GrFormField>

    <GrFormField label="Expanded rows">
      <GrTextarea v-model="longNote" :rows="8" placeholder="Long-form content" />
    </GrFormField>
  </div>
</template>

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

import { GrFormField, GrSwitch, GrTextarea } from '@feugene/granularity'

const draft = ref('Ship the new showcase after validating all public entities.')
const reviewNotes = ref('')
const invalid = ref(false)
</script>

<template>
  <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_220px]">
    <div class="grid gap-3">
      <GrFormField label="Success state">
        <GrTextarea v-model="draft" state="success" />
      </GrFormField>

      <GrFormField label="Validation state" :error="invalid ? 'Review notes are required before publishing' : undefined">
        <GrTextarea
          v-model="reviewNotes"
          placeholder="Add review notes"
          :invalid="invalid"
          :state="invalid ? 'danger' : 'default'"
        />
      </GrFormField>
    </div>

    <div class="grid gap-3 rounded-2xl border border-[var(--gr-brd)] bg-[var(--gr-card)] p-4">
      <div class="text-sm font-semibold text-[var(--gr-fg)]">
        Validation toggle
      </div>
      <GrSwitch v-model="invalid" size="sm">
        Mark review notes as required
      </GrSwitch>
    </div>
  </div>
</template>

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

import { GrFormField, GrSwitch, GrTextarea } from '@feugene/granularity'

const disabled = ref(false)
const summary = ref('Subscribers will receive a digest every Monday at 09:00.')
</script>

<template>
  <div class="grid gap-4">
    <div class="flex items-center gap-3">
      <GrSwitch v-model="disabled" size="sm">
        Disable textarea
      </GrSwitch>
    </div>

    <GrFormField label="Operational notes">
      <GrTextarea
        v-model="summary"
        :disabled="disabled"
        :rows="6"
        placeholder="Editable summary"
      />
    </GrFormField>
  </div>
</template>

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

import { GrFormField, GrInput, GrTextarea } from '@feugene/granularity'

const sizes = ['xs', 'sm', 'md', 'lg'] as const

const title = ref('Weekly digest')
const note = ref('Subscribers receive this summary every Monday at 09:00.')
</script>

<template>
  <div class="grid gap-4">
    <div v-for="size in sizes" :key="size" class="grid gap-2">
      <div class="text-xs font-semibold text-[var(--gr-muted-fg)]">
        size="{{ size }}"
      </div>

      <GrFormField label="Title">
        <GrInput v-model="title" :size="size" />
      </GrFormField>

      <GrFormField label="Note">
        <GrTextarea v-model="note" :size="size" :rows="2" />
      </GrFormField>
    </div>
  </div>
</template>