GrSelect

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

import { GrSelect } from '@feugene/granularity'

const currencies = [
  { value: 'eur', label: 'Euro' },
  { value: 'usd', label: 'US Dollar' },
  { value: 'gbp', label: 'Pound Sterling' },
]

const currency = ref('eur')
</script>

<template>
  <GrSelect
    v-model="currency"
    :options="currencies"
    options-view="panel"
    clearable
    aria-label="Settlement currency"
  >
    <template #prefix>
      <span class="i-lucide-banknote block h-4 w-4" />
    </template>
    <template #suffix>
      per month
    </template>
  </GrSelect>
</template>

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

import { GrSelect } from '@feugene/granularity'

const CATALOG = [
  { value: 'ams', label: 'Amsterdam' },
  { value: 'ber', label: 'Berlin' },
  { value: 'bcn', label: 'Barcelona' },
  { value: 'lis', label: 'Lisbon' },
  { value: 'prg', label: 'Prague' },
  { value: 'waw', label: 'Warsaw' },
]

const value = ref<string[]>(['ams', 'ber', 'bcn'])
const query = ref('')
const options = ref(CATALOG)
const loading = ref(false)
const lastEvent = ref('—')

let requestId = 0

// Запрос уходит наружу — без этого `loading` было не с чем связать.
async function fetchOptions(search: string): Promise<void> {
  const id = ++requestId
  loading.value = true

  await new Promise(resolve => setTimeout(resolve, 400))
  if (id !== requestId)
    return

  options.value = CATALOG.filter(option => option.label.toLowerCase().includes(search.trim().toLowerCase()))
  loading.value = false
}
</script>

<template>
  <div class="grid gap-3">
    <GrSelect
      v-model="value"
      v-model:search="query"
      :options="options"
      :loading="loading"
      :max-tag-count="2"
      multiple
      tags
      filterable
      options-view="panel"
      clearable
      aria-label="Cities"
      placeholder="Pick cities"
      @search="fetchOptions"
      @change="lastEvent = 'change'"
      @clear="lastEvent = 'clear'"
      @update:open="lastEvent = $event ? 'opened' : 'closed'"
    />

    <div class="rounded-2xl border border-dashed border-[var(--gr-brd)] p-3 text-sm text-[var(--gr-muted-fg)]">
      Запрос: <span class="font-semibold text-[var(--gr-fg)]">{{ query || '—' }}</span> ·
      выбрано: <span class="font-semibold text-[var(--gr-fg)]">{{ value.length }}</span> ·
      последнее событие: <span class="font-semibold text-[var(--gr-fg)]">{{ lastEvent }}</span>.
      Хвост чипов свёрнут в «+N», крестики достижимы `Tab`.
    </div>
  </div>
</template>

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

import {
  GrCard,
  GrFormField,
  GrInput,
  GrRadioGroup,
  GrSelect,
  GrSwitch,
  type GrSelectOptionsView,
  type GrSelectSize,
  type GrSelectUnderline,
  type GrSelectVariant,
  type GrSelectView,
} from '@feugene/granularity'

import CodeBlock from '../../../components/doc/CodeBlock.vue'

const view = ref<GrSelectView>('default')
const size = ref<GrSelectSize>('md')
const variant = ref<GrSelectVariant>('primary')
const underline = ref<GrSelectUnderline>('auto')
const optionsView = ref<GrSelectOptionsView>('native')
const placeholder = ref('Pick workspace')
const ariaLabel = ref('Pick workspace')
const customValuePlaceholder = ref('Add value…')

const multiple = ref(false)
const clearable = ref(false)
const disabled = ref(false)
const allowCustomValue = ref(false)
// «Не закрывать панель при выборе» — инвертированная семантика `close-on-select`.
// Наиболее востребовано при мультивыборе в panel-режиме (набор нескольких опций
// без переоткрытия панели). Действует только для `options-view="panel"`.
const keepPanelOpen = ref(false)

// Управление панелью имеет смысл только в panel-режиме.
const panelStayOpenAvailable = computed(() => optionsView.value === 'panel')

const singleValue = ref<string>('')
const multipleValue = ref<string[]>([])

const demoOptions = [
  { value: 'alpha', label: 'Alpha workspace' },
  { value: 'beta', label: 'Beta workspace' },
  { value: 'gamma', label: 'Gamma workspace' },
  { value: 'delta', label: 'Delta workspace: very long label that should wrap' },
]

const viewOptions = [
  { value: 'default', label: 'Default' },
  { value: 'link', label: 'Link' },
] satisfies Array<{ value: GrSelectView, label: string }>

const sizeOptions = [
  { value: 'xs', label: 'XS' },
  { value: 'sm', label: 'SM' },
  { value: 'md', label: 'MD' },
  { value: 'lg', label: 'LG' },
] satisfies Array<{ value: GrSelectSize, label: string }>

const variantOptions = [
  { value: 'primary', label: 'Primary' },
  { value: 'default', label: 'Default' },
  { value: 'muted', label: 'Muted' },
  { value: 'danger', label: 'Danger' },
] satisfies Array<{ value: GrSelectVariant, label: string }>

const underlineOptions = [
  { value: 'auto', label: 'Auto' },
  { value: 'always', label: 'Always' },
  { value: 'none', label: 'None' },
] satisfies Array<{ value: GrSelectUnderline, label: string }>

const optionsViewOptions = [
  { value: 'native', label: 'Native' },
  { value: 'panel', label: 'Panel' },
] satisfies Array<{ value: GrSelectOptionsView, label: string }>

watch(multiple, (next) => {
  if (next) {
    if (!Array.isArray(multipleValue.value))
      multipleValue.value = []
  }
  else {
    singleValue.value = ''
  }
})

const effectiveAriaLabel = computed(() => ariaLabel.value.trim() || placeholder.value.trim() || 'Select value')

const previewSummary = computed(() => {
  if (disabled.value)
    return 'Disabled preserves the visual contract of the selected view/size while turning off interactivity and pointer events'

  if (allowCustomValue.value)
    return 'Allow custom value enables free-form input alongside the existing options — useful for tag-like pickers'

  if (multiple.value && optionsView.value === 'panel')
    return 'Panel mode with multiple selection acts as a mini-picker — combine with `close-on-select=false` for filter-like UX'

  if (view.value === 'link')
    return 'Link view aligns the trigger with `GrLink` styling — good for inline switchers and toolbar actions'

  return 'Combine `view`, `size`, `optionsView`, and state switches to quickly verify the select contract before shipping to a product scenario'
})

function escapeAttribute(value: string) {
  return value.replaceAll('&', '&amp;').replaceAll('"', '&quot;')
}

const previewCode = computed(() => {
  const attributes: string[] = []

  attributes.push(`v-model="${multiple.value ? 'selectedValues' : 'selectedValue'}"`)
  attributes.push(':options="options"')
  attributes.push(`view="${view.value}"`)
  attributes.push(`size="${size.value}"`)
  attributes.push(`options-view="${optionsView.value}"`)

  if (view.value === 'link') {
    attributes.push(`variant="${variant.value}"`)
    attributes.push(`underline="${underline.value}"`)
  }

  if (placeholder.value.trim())
    attributes.push(`placeholder="${escapeAttribute(placeholder.value.trim())}"`)

  attributes.push(`aria-label="${escapeAttribute(effectiveAriaLabel.value)}"`)

  if (multiple.value)
    attributes.push('multiple')

  if (clearable.value)
    attributes.push('clearable')

  if (disabled.value)
    attributes.push('disabled')

  if (allowCustomValue.value) {
    attributes.push('allow-custom-value')

    if (customValuePlaceholder.value.trim())
      attributes.push(`custom-value-placeholder="${escapeAttribute(customValuePlaceholder.value.trim())}"`)
  }

  if (panelStayOpenAvailable.value && keepPanelOpen.value)
    attributes.push(':close-on-select="false"')

  return ['<GrSelect', ...attributes.map(attribute => `  ${attribute}`), '/>'].join('\n')
})

const linkVariantDisabled = computed(() => view.value !== 'link')
</script>

<template>
  <div class="grid gap-4 xl:grid-cols-[minmax(0,1.15fr)_320px]">
    <div class="grid gap-4">
      <div
          class="relative grid min-h-[280px] overflow-hidden rounded-[24px] border border-dashed border-[var(--preview-brd)] bg-[image:var(--preview-surface)] p-6 pb-[72px]"
>
        <div class="flex h-full min-w-0 flex-col items-center justify-center gap-4 text-center">
          <div class="showcase-demo-caption text-xs">
            Preview
          </div>

          <div class="flex w-full max-w-[320px] min-w-0 justify-center">
            <GrSelect
                v-if="multiple"
                v-model="multipleValue"
                :options="demoOptions"
                :view="view"
                :size="size"
                :variant="variant"
                :underline="underline"
                :options-view="optionsView"
                :placeholder="placeholder"
                :aria-label="effectiveAriaLabel"
                :multiple="true"
                :clearable="clearable"
                :disabled="disabled"
                :allow-custom-value="allowCustomValue"
                :custom-value-placeholder="customValuePlaceholder"
                :close-on-select="!keepPanelOpen"
            />
            <GrSelect
                v-else
                v-model="singleValue"
                :options="demoOptions"
                :view="view"
                :size="size"
                :variant="variant"
                :underline="underline"
                :options-view="optionsView"
                :placeholder="placeholder"
                :aria-label="effectiveAriaLabel"
                :clearable="clearable"
                :disabled="disabled"
                :allow-custom-value="allowCustomValue"
                :custom-value-placeholder="customValuePlaceholder"
                :close-on-select="!keepPanelOpen"
            />
          </div>

          <div
              class="pointer-events-none absolute inset-x-6 bottom-6 flex justify-center border-t border-dashed border-[var(--preview-brd)] pt-2"
>
            <div class="showcase-demo-text max-w-[40ch] text-center text-sm">
              {{ previewSummary }}
            </div>
          </div>
        </div>
      </div>

      <CodeBlock :code="previewCode" language="vue" expanded title="Rendered snippet" />
    </div>

    <div class="showcase-demo-panel grid gap-4 rounded-[28px] border p-4 lg:p-5">
      <div class="showcase-demo-title text-sm font-semibold">
        Properties
      </div>

      <div class="grid gap-4">
        <GrFormField label="View">
          <GrRadioGroup v-model="view" :options="viewOptions" variant="button" size="sm" />
        </GrFormField>

        <GrFormField label="Size">
          <GrRadioGroup v-model="size" :options="sizeOptions" variant="button" size="sm" />
        </GrFormField>

        <GrFormField label="Options view">
          <GrRadioGroup v-model="optionsView" :options="optionsViewOptions" variant="button" size="sm" />
        </GrFormField>

        <GrFormField label="Variant (link only)">
          <GrSelect
              v-model="variant"
              :options="variantOptions"
              :disabled="linkVariantDisabled"
              aria-label="Select variant"
          />
        </GrFormField>

        <GrFormField label="Underline (link only)">
          <GrRadioGroup
              v-model="underline"
              :options="underlineOptions"
              :disabled="linkVariantDisabled"
              variant="button"
              size="sm"
          />
        </GrFormField>

        <GrFormField label="Placeholder">
          <GrInput v-model="placeholder" placeholder="Pick workspace" aria-label="Placeholder" />
        </GrFormField>

        <GrFormField label="Accessibility label">
          <GrInput v-model="ariaLabel" placeholder="Optional override for screen readers" aria-label="Accessibility label" />
        </GrFormField>

        <GrFormField label="Custom value placeholder">
          <GrInput
              v-model="customValuePlaceholder"
              :disabled="!allowCustomValue || optionsView !== 'panel'"
              placeholder="Add value…"
              aria-label="Custom value placeholder"
          />
        </GrFormField>
      </div>

      <GrCard class="grid gap-3 p-4">
        <GrSwitch v-model="multiple" size="sm">
          Multiple
        </GrSwitch>
        <div class="grid gap-1">
          <GrSwitch v-model="keepPanelOpen" size="sm" :disabled="!panelStayOpenAvailable">
            Keep panel open on select
          </GrSwitch>
          <p class="showcase-demo-text pl-[2.75rem] text-xs leading-snug opacity-80">
            {{ panelStayOpenAvailable
              ? 'Sets `close-on-select=false` — the panel stays open after each pick (great for multiple selection)'
              : 'Switch `Options view` to `Panel` to keep the dropdown open while picking multiple values' }}
          </p>
        </div>
        <GrSwitch v-model="clearable" size="sm">
          Clearable
        </GrSwitch>
        <GrSwitch v-model="disabled" size="sm">
          Disabled
        </GrSwitch>
        <GrSwitch v-model="allowCustomValue" size="sm">
          Allow custom value
        </GrSwitch>
      </GrCard>
    </div>
  </div>
</template>

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

import { GrSelect } from '@feugene/granularity'

const options = [
  { value: 'alpha', label: 'Alpha workspace' },
  { value: 'beta', label: 'Beta workspace' },
  { value: 'gamma', label: 'Gamma workspace' },
]

const nativeValue = ref('')
const clearableValue = ref('beta')

// Значения-объекты: `valueKey` даёт стабильный ключ, поэтому модель может
// приходить отдельной копией — сравнение идёт по `id`, а не по ссылке.
type Owner = { id: number, name: string }

const owners: Owner[] = [
  { id: 1, name: 'Ada Lovelace' },
  { id: 2, name: 'Grace Hopper' },
]

const ownerOptions = owners.map(owner => ({ value: owner, label: owner.name }))
const owner = ref<Owner>({ id: 2, name: 'Grace Hopper' })

const region = ref('')
</script>

<template>
  <div class="grid gap-4 lg:grid-cols-2">
    <div class="grid gap-2">
      <div class="text-sm font-semibold text-[var(--gr-fg)]">
        Native single
      </div>
      <GrSelect
        v-model="nativeValue"
        :options="options"
        placeholder="Pick workspace"
        aria-label="Pick workspace"
      />
      <div class="text-sm text-[var(--gr-muted-fg)]">
        value: {{ nativeValue || '—' }}
      </div>
    </div>

    <div class="grid gap-2">
      <div class="text-sm font-semibold text-[var(--gr-fg)]">
        Native clearable
      </div>
      <GrSelect
        v-model="clearableValue"
        clearable
        :options="options"
        placeholder="Pick owner"
        aria-label="Pick owner"
      />
      <div class="text-sm text-[var(--gr-muted-fg)]">
        value: {{ clearableValue || '—' }}
      </div>
    </div>

    <div class="grid gap-2">
      <div class="text-sm font-semibold text-[var(--gr-fg)]">
        Object values
      </div>
      <GrSelect
        v-model="owner"
        :options="ownerOptions"
        value-key="id"
        placeholder="Pick owner"
        aria-label="Pick owner (object value)"
      />
      <div class="text-sm text-[var(--gr-muted-fg)]">
        value: #{{ owner.id }} — {{ owner.name }}
      </div>
    </div>

    <div class="grid gap-2">
      <div class="text-sm font-semibold text-[var(--gr-fg)]">
        Validation state
      </div>
      <GrSelect
        v-model="region"
        :options="[{ value: 'eu', label: 'EU' }, { value: 'us', label: 'US' }]"
        :invalid="region === ''"
        :state="region === '' ? 'default' : 'success'"
        placeholder="Pick region"
        aria-label="Pick region"
      />
      <div class="text-sm text-[var(--gr-muted-fg)]">
        {{ region === '' ? 'Region is required' : 'Looks good' }}
      </div>
    </div>
  </div>
</template>

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

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

const options = [
  { value: 'design', label: 'Design' },
  { value: 'platform', label: 'Platform' },
  { value: 'billing', label: 'Billing' },
  { value: 'support', label: 'Support' },
]

const selectedTeams = ref<string[]>(['design', 'platform'])
</script>

<template>
  <div class="grid gap-3">
    <GrSelect
      v-model="selectedTeams"
      multiple
      options-view="panel"
      :close-on-select="false"
      :options="options"
      placeholder="Pick teams"
      aria-label="Pick teams"
    />

    <div class="flex flex-wrap gap-2">
      <GrBadge v-for="team in selectedTeams" :key="team">
        {{ team }}
      </GrBadge>
      <span v-if="selectedTeams.length === 0" class="text-sm text-[var(--gr-muted-fg)]">
        Nothing selected yet
      </span>
    </div>
  </div>
</template>

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

import { GrSelect } from '@feugene/granularity'

const groupedOptions = [
  {
    label: 'Popular cities',
    options: [
      { value: 'Shanghai', label: 'Shanghai' },
      { value: 'Beijing', label: 'Beijing' },
    ],
  },
  {
    label: 'City name',
    options: [
      { value: 'Chengdu', label: 'Chengdu' },
      { value: 'Shenzhen', label: 'Shenzhen' },
      { value: 'Guangzhou', label: 'Guangzhou' },
      { value: 'Dalian', label: 'Dalian' },
    ],
  },
]

const nativeCity = ref('Beijing')
const panelCity = ref('Chengdu')
</script>

<template>
  <div class="grid gap-4 lg:grid-cols-2">
    <div class="grid gap-2">
      <span class="text-sm text-[var(--gr-muted-fg)]">Native (optgroup)</span>
      <GrSelect
        v-model="nativeCity"
        :options="groupedOptions"
        placeholder="Pick a city"
        aria-label="Pick a city (native)"
      />
    </div>

    <div class="grid gap-2">
      <span class="text-sm text-[var(--gr-muted-fg)]">Panel (group headers)</span>
      <GrSelect
        v-model="panelCity"
        options-view="panel"
        :options="groupedOptions"
        placeholder="Pick a city"
        aria-label="Pick a city (panel)"
      />
    </div>
  </div>
</template>

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

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

const options = [
  { value: 'ru', label: 'Russia' },
  { value: 'kz', label: 'Kazakhstan' },
  { value: 'uz', label: 'Uzbekistan' },
]

const region = ref('')
</script>

<template>
  <div class="grid gap-3">
    <GrSelect
      v-model="region"
      options-view="panel"
      allow-custom-value
      :options="options"
      placeholder="Pick or add region"
      aria-label="Pick or add region"
    >
      <template #value="{ displayLabel, hasSelection, placeholder }">
        <span v-if="hasSelection" class="inline-flex items-center gap-2 min-w-0">
          <GrBadge>custom</GrBadge>
          <span class="truncate">{{ displayLabel }}</span>
        </span>
        <span v-else class="text-[var(--gr-muted-fg)]">{{ placeholder }}</span>
      </template>
    </GrSelect>

    <div class="text-sm text-[var(--gr-muted-fg)]">
      current value: {{ region || '—' }}
    </div>
  </div>
</template>

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

import { GrBadge, GrButton, GrSelect } from '@feugene/granularity'

const countries = [
  { value: 'us', label: 'United States' },
  { value: 'gb', label: 'United Kingdom' },
  { value: 'de', label: 'Germany' },
  { value: 'fr', label: 'France' },
  { value: 'es', label: 'Spain' },
  { value: 'it', label: 'Italy' },
  { value: 'nl', label: 'Netherlands' },
  { value: 'se', label: 'Sweden' },
  { value: 'pl', label: 'Poland' },
  { value: 'pt', label: 'Portugal' },
]

// Filterable single select
const country = ref('')

// Loading state (simulated async load of options)
const asyncOptions = ref<Array<{ value: string, label: string }>>([])
const loading = ref(false)

function loadOptions() {
  loading.value = true
  asyncOptions.value = []
  window.setTimeout(() => {
    asyncOptions.value = countries
    loading.value = false
  }, 1200)
}

const asyncValue = ref('')

// Tags mode (multiple with removable chips)
const teams = ref<string[]>(['us', 'de', 'fr'])
</script>

<template>
  <div class="grid gap-6">
    <div class="grid gap-2">
      <div class="showcase-demo-caption text-xs">
        Filterable — search box over the option list
      </div>
      <GrSelect
        v-model="country"
        options-view="panel"
        filterable
        clearable
        :options="countries"
        placeholder="Pick a country"
        aria-label="Pick a country"
      />
      <GrBadge>{{ country || '—' }}</GrBadge>
    </div>

    <div class="grid gap-2">
      <div class="showcase-demo-caption text-xs">
        Loading — spinner while options are fetched
      </div>
      <div class="flex items-center gap-2">
        <div class="min-w-[220px]">
          <GrSelect
            v-model="asyncValue"
            options-view="panel"
            filterable
            :loading="loading"
            :options="asyncOptions"
            placeholder="Open to load…"
            aria-label="Async country"
          />
        </div>
        <GrButton size="sm" variant="outline" @click="loadOptions">
          Reload options
        </GrButton>
      </div>
    </div>

    <div class="grid gap-2">
      <div class="showcase-demo-caption text-xs">
        Tags — multiple selection as removable chips
      </div>
      <GrSelect
        v-model="teams"
        multiple
        tags
        filterable
        options-view="panel"
        :close-on-select="false"
        :options="countries"
        placeholder="Pick countries"
        aria-label="Pick countries"
      />
      <div class="text-sm text-[var(--gr-muted-fg)]">
        Selected: {{ teams.length ? teams.join(', ') : 'none' }}
      </div>
    </div>
  </div>
</template>

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

import { GrSelect } from '@feugene/granularity'

// Сто групп по сто позиций. Группы переживают окно: если панель прокручена
// внутрь группы, её обёртка всё равно есть и берёт имя через `aria-label`.
const groupedOptions = Array.from({ length: 100 }, (_, groupIndex) => ({
  label: `Region ${groupIndex + 1}`,
  options: Array.from({ length: 100 }, (_, index) => ({
    value: `r${groupIndex + 1}-city-${index + 1}`,
    label: `Region ${groupIndex + 1} · City ${index + 1}`,
  })),
}))

const city = ref('')
</script>

<template>
  <div class="grid gap-3">
    <GrSelect
      v-model="city"
      :options="groupedOptions"
      options-view="panel"
      virtual
      filterable
      clearable
      placeholder="Search among 10 000 cities…"
      aria-label="Search a city"
    />

    <p class="text-sm text-[var(--gr-muted-fg)]">
      Selected: <code>{{ city || '—' }}</code>
    </p>
  </div>
</template>