GrKbd

<script setup lang="ts">
import { GrKbd } from '@feugene/granularity'
</script>

<template>
  <div class="grid gap-4 text-sm">
    <div class="flex flex-wrap items-center gap-5">
      <!-- `mod` сам превращается в Cmd на macOS и в Ctrl на остальных платформах. -->
      <GrKbd keys="mod+K" />
      <GrKbd keys="mod+shift+P" />
      <GrKbd :keys="['ctrl', 'S']" />
      <GrKbd>Esc</GrKbd>
    </div>

    <div class="flex flex-wrap items-center gap-5">
      <GrKbd keys="mod+K" size="xs" />
      <GrKbd keys="mod+K" size="sm" />
      <GrKbd keys="mod+K" size="md" />
      <GrKbd keys="mod+K" size="lg" />
    </div>
  </div>
</template>

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

import type { GrKbdPlatform } from '@feugene/granularity'
import { GrKbd, GrSegmented } from '@feugene/granularity'

const platform = ref<GrKbdPlatform>('auto')

const commands = [
  { label: 'Найти', keys: 'mod+K' },
  { label: 'Сохранить', keys: 'mod+S' },
  { label: 'Палитра команд', keys: 'mod+shift+P' },
  { label: 'Отменить', keys: ['mod', 'Z'] },
  { label: 'Закрыть', keys: 'Esc' },
]
</script>

<template>
  <div class="grid gap-4">
    <GrSegmented
      v-model="platform"
      size="sm"
      :options="[
        { value: 'auto', label: 'auto' },
        { value: 'apple', label: 'macOS' },
        { value: 'other', label: 'Windows/Linux' },
      ]"
    />

    <ul class="grid gap-1 rounded-2xl border border-[var(--gr-brd)] bg-[var(--gr-card)] p-2">
      <li
        v-for="command in commands"
        :key="command.label"
        class="flex items-center justify-between gap-6 rounded-xl px-3 py-2 text-sm hover:bg-[var(--gr-muted)]"
      >
        <span>{{ command.label }}</span>
        <GrKbd :keys="command.keys" :platform="platform" size="sm" />
      </li>
    </ul>

    <div class="rounded-2xl border border-dashed border-[var(--gr-brd)] p-3 text-sm text-[var(--gr-muted-fg)]">
      Токен `mod` пишется один раз, а показывается по платформе. Символы (`⌘`, `⇧`) снабжены
      скрытым читаемым именем — иначе диктор произносит их как значки.
    </div>
  </div>
</template>

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

import {
  GrAvatar,
  GrCommandPalette,
  GrKbd,
  GrNavbar,
  vHotkey,
  type GrCommandItem,
} from '@feugene/granularity'

import SearchIcon from '~icons/lucide/search'

const isSearchOpen = ref(false)
const lastPicked = ref<string | null>(null)

/** Токен `mod` один и тот же в привязке и в подсказке: Cmd на macOS, Ctrl на прочих. */
const searchHotkey = {
  scope: 'element' as const,
  handlers: {
    'mod+K': { handler: () => (isSearchOpen.value = true), stopPropagation: true },
  },
}

const items: GrCommandItem[] = [
  { id: 'orders', label: 'Заказы', description: 'Список и статусы', shortcut: ['mod', 'O'] },
  { id: 'customers', label: 'Клиенты', description: 'Карточки и сегменты', shortcut: ['mod', 'U'] },
  { id: 'settings', label: 'Настройки', description: 'Оплата, доставка, роли', shortcut: ['mod', ','] },
  { id: 'logs', label: 'Журнал событий', description: 'Аудит действий' },
]

function onSelect(item: GrCommandItem): void {
  lastPicked.value = item.label
}
</script>

<template>
  <!--
    Хоткей ограничен демо (`scope: 'element'`) и гасит всплытие: у самой витрины
    ⌘K уже занят её поиском, и глобальная привязка открыла бы обе панели сразу.
    В приложении scope не нужен — там сочетание слушает окно.
  -->
  <div
    v-hotkey="searchHotkey"
    tabindex="0"
    class="grid gap-3 rounded-[var(--gr-radius-lg)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]"
  >
    <GrNavbar title="Консоль">
      <template #center>
        <!--
          Кнопка-поле: подпись даёт имя, а сочетание рядом декоративно —
          диктору его сообщает `aria-keyshortcuts`.
        -->
        <button
          type="button"
          class="inline-flex h-8 items-center gap-2 rounded-[var(--gr-radius-md)] border border-[var(--gr-brd)] bg-[var(--gr-muted)] px-3 text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-tight)] text-[var(--gr-muted-fg)] transition-colors hover:bg-[var(--gr-bg)]"
          aria-haspopup="dialog"
          aria-keyshortcuts="Control+K Meta+K"
          @click="isSearchOpen = true"
        >
          <SearchIcon class="h-4 w-4 shrink-0" aria-hidden="true" />
          <span>Поиск</span>
          <span class="ml-2 inline-flex" aria-hidden="true">
            <GrKbd keys="mod+K" size="sm" />
          </span>
        </button>
      </template>

      <GrAvatar name="Ирина Петрова" size="sm" />
    </GrNavbar>

    <p class="text-[length:var(--gr-text-xs)] text-[var(--gr-muted-fg)]">
      Нажмите <GrKbd keys="mod+K" size="sm" />, когда фокус внутри демо, — или кликните по кнопке.
      <template v-if="lastPicked">
        Выбрано: <strong class="text-[var(--gr-fg)]">{{ lastPicked }}</strong>.
      </template>
    </p>

    <!-- `hotkey: null` — сочетание уже слушает демо, второй слушатель открыл бы панель дважды. -->
    <GrCommandPalette
      v-model="isSearchOpen"
      :items="items"
      :hotkey="null"
      placeholder="Раздел, действие, документ"
      aria-label="Поиск по консоли"
      @select="onSelect"
    />
  </div>
</template>

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

import type { GrKbdPlatform } from '@feugene/granularity'
import { GrKbd, GrSegmented } from '@feugene/granularity'

const platform = ref<GrKbdPlatform>('auto')

const rows = [
  { title: 'merged — по умолчанию', variant: 'merged' as const, hint: '⌘K на macOS, Ctrl+K на прочих' },
  { title: 'split', variant: 'split' as const, hint: 'плашка на каждую клавишу' },
]

const combos = ['mod+K', 'mod+shift+P', 'ctrl+alt+delete']
</script>

<template>
  <div class="grid gap-5 text-sm">
    <GrSegmented
      v-model="platform"
      size="sm"
      :options="[
        { value: 'auto', label: 'auto' },
        { value: 'apple', label: 'macOS' },
        { value: 'other', label: 'Windows/Linux' },
      ]"
    />

    <div v-for="row in rows" :key="row.variant" class="grid gap-2">
      <p class="text-[length:var(--gr-text-xs)] text-[var(--gr-muted-fg)]">
        {{ row.title }} — {{ row.hint }}
      </p>
      <div class="flex flex-wrap items-center gap-5">
        <GrKbd
          v-for="combo in combos"
          :key="combo"
          :keys="combo"
          :variant="row.variant"
          :platform="platform"
        />
      </div>
    </div>

    <div class="grid gap-2">
      <p class="text-[length:var(--gr-text-xs)] text-[var(--gr-muted-fg)]">
        sequence — аккорд: клавиши нажимают одну за другой
      </p>
      <div class="flex flex-wrap items-center gap-5">
        <GrKbd :keys="['G', 'I']" variant="sequence" :platform="platform" />
        <GrKbd :keys="['G', 'P']" variant="sequence" :platform="platform" />
      </div>
    </div>
  </div>
</template>

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

import type { GrKbdPlatform, GrKbdTokenGroup } from '@feugene/granularity'
import { GR_KBD_TOKENS, GrKbd, GrSegmented } from '@feugene/granularity'

const platform = ref<GrKbdPlatform>('auto')

/**
 * `auto` уточняется после монтирования — тем же способом, что и в самом
 * компоненте (`navigator` в теле setup разошёлся бы с серверным рендером).
 * Без этого колонка «диктор» показывала бы имя не той платформы, чей глиф
 * нарисован рядом.
 */
const detectedApple = ref(false)
onMounted(() => {
  detectedApple.value = /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent)
})

const isApple = computed(() => (platform.value === 'auto' ? detectedApple.value : platform.value === 'apple'))

const groups: { id: GrKbdTokenGroup, title: string }[] = [
  { id: 'modifier', title: 'Модификаторы' },
  { id: 'editing', title: 'Ввод и редактирование' },
  { id: 'navigation', title: 'Навигация' },
]

/**
 * Список приходит из самого пакета (`GR_KBD_TOKENS`), а не переписан руками:
 * своя копия разошлась бы с форматтером на первой же новой клавише.
 */
const byGroup = computed(() => groups.map(group => ({
  ...group,
  tokens: GR_KBD_TOKENS.filter(spec => spec.group === group.id),
})))
</script>

<template>
  <div class="grid gap-5">
    <GrSegmented
      v-model="platform"
      size="sm"
      :options="[
        { value: 'auto', label: 'auto' },
        { value: 'apple', label: 'macOS' },
        { value: 'other', label: 'Windows/Linux' },
      ]"
    />

    <section v-for="group in byGroup" :key="group.id" class="grid gap-2">
      <h4 class="text-[length:var(--gr-text-xs)] font-600 uppercase tracking-wide text-[var(--gr-muted-fg)]">
        {{ group.title }}
      </h4>

      <ul class="grid gap-1 rounded-2xl border border-[var(--gr-brd)] bg-[var(--gr-card)] p-2">
        <li
          v-for="spec in group.tokens"
          :key="spec.token"
          class="flex flex-wrap items-center gap-x-4 gap-y-1 rounded-xl px-3 py-2 text-[length:var(--gr-text-sm)] hover:bg-[var(--gr-muted)]"
        >
          <GrKbd :keys="[spec.token]" :platform="platform" size="sm" />

          <code class="text-[length:var(--gr-text-xs)] text-[var(--gr-fg)]">{{ spec.token }}</code>

          <span
            v-if="spec.aliases.length"
            class="text-[length:var(--gr-text-xs)] text-[var(--gr-muted-fg)]"
          >
            то же: {{ spec.aliases.join(', ') }}
          </span>

          <!-- Имя произносит диктор вместо глифа; у слов его нет — они читаются сами. -->
          <span
            v-if="(isApple ? spec.apple : spec.other).name"
            class="ml-auto text-[length:var(--gr-text-xs)] text-[var(--gr-muted-fg)]"
          >
            диктор: {{ (isApple ? spec.apple : spec.other).name }}
          </span>
        </li>
      </ul>
    </section>

    <p class="text-[length:var(--gr-text-xs)] text-[var(--gr-muted-fg)]">
      Всё остальное компонент показывает как есть: буква приводится к заглавной
      (<GrKbd keys="k" :platform="platform" size="sm" />), слово остаётся словом
      (<GrKbd :keys="['F5']" :platform="platform" size="sm" />).
    </p>
  </div>
</template>