GrInput

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

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

const query = ref('')
const price = ref('1 290')
</script>

<template>
  <div class="grid gap-4 lg:grid-cols-2">
    <!--
      Украшение внутри рамки: у поисковой строки лупа обязана читаться как часть
      поля. Сегмент отрезал бы её рамкой, и строка выглядела бы полем с
      приклеенной кнопкой.
    -->
    <GrFormField label="Поиск">
      <GrInput v-model="query" addon="inline" placeholder="Название или артикул">
        <template #prefix>
          <GrIcon size="sm">
            <span class="i-lucide-search" />
          </GrIcon>
        </template>
      </GrInput>
    </GrFormField>

    <GrFormField label="Цена">
      <GrInput v-model="price" addon="inline" placeholder="0">
        <template #suffix>₽</template>
      </GrInput>
    </GrFormField>

    <!-- Тот же слот в режиме по умолчанию — для сравнения. -->
    <GrFormField label="Цена сегментом" hint="addon=&quot;segment&quot; — режим по умолчанию">
      <GrInput v-model="price" placeholder="0">
        <template #suffix>₽</template>
      </GrInput>
    </GrFormField>
  </div>
</template>

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

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

type GrInputInstance = InstanceType<typeof GrInput>

const login = ref('')
const checking = ref(false)
const log = ref<string[]>([])

const field = ref<GrInputInstance>()

// Поколение проверки: очистка журнала обязана обесценить уже запущенный запрос.
// Без этого «Очистить» гасил журнал, а через 900 мс проверка дописывала в него
// свой результат — со стороны это выглядело как «журнал не очищается».
let checkRun = 0

function note(entry: string): void {
  log.value = [entry, ...log.value].slice(0, 4)
}

function clearLog(): void {
  checkRun += 1
  checking.value = false
  log.value = []
}

// `change` приходит по blur/Enter — момент, когда значение можно проверять.
async function onChange(value: string): Promise<void> {
  note(`change: ${value || '—'}`)

  if (!value)
    return

  const run = ++checkRun
  checking.value = true
  await new Promise(resolve => setTimeout(resolve, 900))

  // Журнал успели очистить (или начали новую проверку) — результат устарел.
  if (run !== checkRun)
    return

  checking.value = false
  note(`проверен: ${value}`)
}

function prefill(): void {
  login.value = 'granularity'
  field.value?.focus()
  field.value?.select()
}
</script>

<template>
  <div class="grid gap-4">
    <GrFormField label="Логин" hint="Проверка занятости уходит по blur или Enter">
      <GrInput
        ref="field"
        v-model="login"
        :loading="checking"
        clearable
        :maxlength="24"
        show-count
        placeholder="ваш-логин"
        @change="onChange"
        @clear="note('clear: очищено кнопкой')"
        @focus="note('focus')"
        @blur="note('blur')"
      />
    </GrFormField>

    <div class="flex flex-wrap items-center gap-3">
      <GrButton size="sm" variant="outline" @click="prefill">
        Подставить и выделить
      </GrButton>
      <GrButton size="sm" variant="ghost" :disabled="!log.length" @click="clearLog">
        Очистить журнал
      </GrButton>
    </div>

    <div class="rounded-2xl border border-dashed border-[var(--gr-brd)] p-3 text-sm text-[var(--gr-muted-fg)]">
      <div v-if="!log.length">
        Журнал событий пуст — поставьте фокус в поле.
      </div>
      <!-- Ключ по индексу: одинаковые записи (`focus`, `focus`) дают дубль ключа. -->
      <div v-for="(entry, index) in log" :key="index">
        {{ entry }}
      </div>
    </div>
  </div>
</template>

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

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

const displayName = ref('Ada Lovelace')
const email = ref('[email protected]')
const search = 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="Display name">
        <GrInput v-model="displayName" placeholder="Ada Lovelace" />
      </GrFormField>

      <GrFormField label="Work email" :error="invalid ? 'Use a valid email address' : undefined">
        <GrInput
          v-model="email"
          type="email"
          placeholder="[email protected]"
          :invalid="invalid"
          :state="invalid ? 'danger' : 'success'"
        />
      </GrFormField>

      <GrFormField label="Search input">
        <GrInput
          v-model="search"
          type="search"
          placeholder="Search components"
        />
      </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">
        Show invalid email state
      </GrSwitch>
      <div class="text-sm text-[var(--gr-muted-fg)]">
        Search query: {{ search || '—' }}
      </div>
    </div>
  </div>
</template>

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

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

const amount = ref('12 540')
const weight = ref('68')
</script>

<template>
  <div class="grid gap-4 lg:grid-cols-2">
    <GrFormField label="Currency input">
      <GrInput v-model="amount" placeholder="0.00">
        <template #prefix>₽</template>
        <template #suffix>RUB</template>
      </GrInput>
    </GrFormField>

    <GrFormField label="Unit add-on">
      <GrInput v-model="weight" placeholder="0">
        <template #prefix>Weight</template>
        <template #suffix>kg</template>
      </GrInput>
    </GrFormField>
  </div>
</template>

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

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

// Два поля управляют содержимым prefix и suffix целевого инпута — реактивно.
const prefixText = ref('International account')
const suffixText = ref('Primary settlement account')
const targetValue = ref('DE89 3704 0044 0532 0130 00')
const fixed = ref(true)
</script>

<template>
  <div class="grid gap-4 lg:grid-cols-2">
    <div class="grid gap-3">
      <GrFormField label="Prefix content">
        <GrInput v-model="prefixText" placeholder="Prefix text" />
      </GrFormField>

      <GrFormField label="Suffix content">
        <GrInput v-model="suffixText" placeholder="Suffix text" />
      </GrFormField>

      <GrSwitch v-model="fixed" size="sm">
        Fixed width (clip content) — off = stretch to content
      </GrSwitch>
    </div>

    <div class="grid content-start gap-2">
      <div class="text-xs font-600 uppercase tracking-wide text-[var(--gr-muted-fg)]">
        Target field
      </div>

      <GrInput
        v-model="targetValue"
        placeholder="IBAN"
        :prefix-fixed="fixed"
        :suffix-fixed="fixed"
        prefix-max-width="7rem"
        suffix-max-width="8rem"
      >
        <template #prefix>{{ prefixText }}</template>
        <template #suffix>{{ suffixText }}</template>
      </GrInput>

      <p class="text-sm text-[var(--gr-muted-fg)]">
        <template v-if="fixed">
          Fixed: аддоны держат заданную ширину, лишний текст обрезается — prefix с правого
          края, suffix с левого. Контент никогда не вылезает за рамки поля.
        </template>
        <template v-else>
          Stretch: аддоны растягиваются под контент (в пределах max-width), а всё лишнее
          аккуратно клипается оболочкой поля.
        </template>
      </p>
    </div>
  </div>
</template>

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

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

const search = ref('Granularity')
const bio = ref('Design-system engineer')
const password = ref('s3cr3t-pass')
const token = ref('sk-live-4f2a90e2f')
</script>

<template>
  <div class="grid gap-4 lg:grid-cols-2">
    <GrFormField label="Clearable">
      <GrInput v-model="search" clearable placeholder="Type to search" />
    </GrFormField>

    <GrFormField label="Password with visibility toggle">
      <GrInput v-model="password" type="password" password-toggle />
    </GrFormField>

    <GrFormField label="Character counter (maxlength)">
      <GrInput v-model="bio" :maxlength="60" show-count clearable />
    </GrFormField>

    <GrFormField label="Read-only">
      <GrInput v-model="token" readonly />
    </GrFormField>
  </div>
</template>

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

import { GrInput, GrRadioGroup } from '@feugene/granularity'

const alignment = ref<'left' | 'center' | 'right'>('left')
const alignmentOptions = [
  { label: 'Left', value: 'left' },
  { label: 'Center', value: 'center' },
  { label: 'Right', value: 'right' },
]

const sizeValues = {
  xs: ref('xs size'),
  sm: ref('sm size'),
  md: ref('md size'),
  lg: ref('lg size'),
}
</script>

<template>
  <div class="grid gap-4">
    <div class="grid gap-2 rounded-2xl border border-[var(--gr-brd)] bg-[var(--gr-card)] p-4">
      <div class="showcase-demo-title text-sm font-semibold">
        Text alignment
      </div>
      <GrRadioGroup
        v-model="alignment"
        :options="alignmentOptions"
        variant="button"
        size="sm"
      />
      <GrInput
        :model-value="`Aligned to ${alignment}`"
        :text-align="alignment"
        placeholder="Editable content"
      />
    </div>

    <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
      <div class="grid gap-2">
        <div class="showcase-demo-caption text-xs">xs</div>
        <GrInput v-model="sizeValues.xs.value" size="xs" placeholder="Extra small" />
      </div>
      <div class="grid gap-2">
        <div class="showcase-demo-caption text-xs">sm</div>
        <GrInput v-model="sizeValues.sm.value" size="sm" placeholder="Small" />
      </div>
      <div class="grid gap-2">
        <div class="showcase-demo-caption text-xs">md</div>
        <GrInput v-model="sizeValues.md.value" size="md" placeholder="Medium" />
      </div>
      <div class="grid gap-2">
        <div class="showcase-demo-caption text-xs">lg</div>
        <GrInput v-model="sizeValues.lg.value" size="lg" placeholder="Large" />
      </div>
    </div>
  </div>
</template>