GrInputTag

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

import { GrInputTag } from '@feugene/granularity'

const recipients = ref(['ops@acme.io'])
</script>

<template>
  <GrInputTag
    v-model="recipients"
    clearable
    placeholder="Add a recipient"
    aria-label="Recipients"
  >
    <template #prefix>
      <span class="i-lucide-mail block h-4 w-4" />
    </template>
    <template #suffix>
      {{ recipients.length }}/10
    </template>
  </GrInputTag>
</template>

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

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

const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
const KNOWN_DOMAINS = ['example.com', 'granularity.dev']

const recipients = ref(['ops@example.com'])
const error = ref('')

// Проверка асинхронная намеренно: так же выглядит обращение к серверу за
// «существует ли такой адрес». На время проверки поле показывает спиннер.
async function beforeAdd(tag: string): Promise<boolean> {
  error.value = ''

  if (!EMAIL_RE.test(tag)) {
    error.value = `«${tag}» не похож на адрес`
    return false
  }

  await new Promise(resolve => setTimeout(resolve, 500))

  const domain = tag.split('@')[1] ?? ''
  if (!KNOWN_DOMAINS.includes(domain)) {
    error.value = `Домен ${domain} не в списке разрешённых`
    return false
  }

  return true
}
</script>

<template>
  <div class="grid gap-3">
    <GrFormField
      label="Получатели"
      hint="Enter или запятая — добавить. Разрешены домены example.com и granularity.dev"
      :error="error"
    >
      <GrInputTag
        v-model="recipients"
        :before-add="beforeAdd"
        :separators="[',', ' ']"
        clearable
        placeholder="name@example.com"
        tag-tone="primary"
        @clear="error = ''"
      />
    </GrFormField>

    <div class="rounded-2xl border border-dashed border-[var(--gr-brd)] p-3 text-sm text-[var(--gr-muted-fg)]">
      Крестики чипов — одна остановка `Tab`: между ними ходят стрелки влево-вправо, удаляет `Delete`.
      Из пустого поля на последний чип уводит стрелка влево.
    </div>
  </div>
</template>

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

import { GrInputTag } from '@feugene/granularity'

const tags = ref(['critical', 'backend'])
</script>

<template>
  <div class="grid gap-4">
    <GrInputTag
      v-model="tags"
      placeholder="Type a tag and press Enter"
      aria-label="Incident tags"
      add-on-blur
      :separators="[',', ';']"
    />

    <div class="rounded-2xl border border-[var(--gr-brd)] bg-[var(--gr-card)] p-4 text-sm text-[var(--gr-muted-fg)]">
      Current tags: <span class="font-semibold text-[var(--gr-fg)]">{{ tags.join(', ') || 'none' }}</span>
    </div>
  </div>
</template>

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

import { GrBadge, GrInputTag } from '@feugene/granularity'

const skills = ref(['vue', 'typescript'])
const remaining = computed(() => 4 - skills.value.length)
</script>

<template>
  <div class="grid gap-4">
    <div class="flex flex-wrap gap-2">
      <GrBadge tone="neutral" radius="round">{{ skills.length }}/4 selected</GrBadge>
      <GrBadge tone="neutral" radius="round">{{ remaining }} slots left</GrBadge>
    </div>

    <GrInputTag
      v-model="skills"
      :max="4"
      state="success"
      placeholder="Add skill tags"
      aria-label="Skill tags"
      tag-tone="primary"
      tag-radius="round"
    />

    <div class="text-sm text-[var(--gr-muted-fg)]">
      Use `max` to keep curated lists compact in profile or filter forms.
    </div>
  </div>
</template>

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

import { GrInputTag } from '@feugene/granularity'

const environments = ref(['production', 'staging'])
</script>

<template>
  <div class="grid gap-4">
    <GrInputTag
      v-model="environments"
      placeholder="Environment alias"
      aria-label="Environment aliases"
      tag-tone="warning"
      tag-dark
    >
      <template #tag="{ tag, index }">
        <span class="inline-flex items-center gap-2">
          <span class="inline-flex h-2 w-2 rounded-full bg-current opacity-70" />
          <span>{{ index + 1 }}. {{ tag }}</span>
        </span>
      </template>
    </GrInputTag>

    <div class="text-sm text-[var(--gr-muted-fg)]">
      Custom tag slot lets host screens inject status markers, counters or semantic labels.
    </div>
  </div>
</template>