GrTree

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

import type { GrTreeKey } from '@feugene/granularity'
import { GrRadioGroup, GrTree } from '@feugene/granularity'

type TreeItem = {
  id: number
  label: string
  children?: TreeItem[]
}

const treeData: TreeItem[] = [
  {
    id: 1,
    label: 'Каталог',
    children: [
      { id: 11, label: 'Одежда' },
      { id: 12, label: 'Обувь' },
    ],
  },
  {
    id: 2,
    label: 'Склады',
    children: [
      { id: 21, label: 'Москва' },
      { id: 22, label: 'Казань' },
    ],
  },
]

/**
 * Выбранный узел живёт снаружи, и это не поза: подсветку строки рисует дерево,
 * а всё остальное — заголовок панели, доступность действий — потребитель. Будь
 * у понятия два владельца, они разошлись бы на такт, и строка оказалась бы
 * подсвечена там, где панель показывает другое.
 */
const currentKey = ref<GrTreeKey | null>(11)

const flat = computed(() => {
  const result: TreeItem[] = []
  const walk = (items: TreeItem[]) => items.forEach((item) => {
    result.push(item)
    if (item.children)
      walk(item.children)
  })
  walk(treeData)

  return result
})

const currentLabel = computed(() => flat.value.find(item => item.id === currentKey.value)?.label ?? '—')

const handleVisibility = ref<'auto' | 'hover' | 'always'>('auto')

const visibilityOptions = [
  { value: 'auto', label: 'auto' },
  { value: 'hover', label: 'hover' },
  { value: 'always', label: 'always' },
] satisfies Array<{ value: 'auto' | 'hover' | 'always', label: string }>
</script>

<template>
  <div class="grid gap-4">
    <GrTree
      v-model:current-key="currentKey"
      :data="treeData"
      node-key="id"
      default-expand-all
      draggable
      :drag-handle-visibility="handleVisibility"
      branch-line
    />

    <div class="showcase-demo-panel grid gap-3 rounded-[var(--gr-radius-lg)] border p-4">
      <p class="showcase-demo-text text-sm">
        Выбрано: <strong>{{ currentLabel }}</strong> (<code>{{ currentKey ?? 'null' }}</code>)
      </p>

      <GrRadioGroup v-model="handleVisibility" :options="visibilityOptions" variant="button" size="sm" />

      <p class="showcase-demo-text text-sm">
        <code>dragHandleVisibility</code> решает, когда видна ручка переноса. По умолчанию
        <code>auto</code>: под курсором на устройстве с наведением и всегда там, где наведения не
        бывает. На тач-экране ручка «по наведению» недостижима, то есть перетаскивания там нет вовсе.
      </p>
    </div>
  </div>
</template>

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

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

type TreeItem = {
  id: number
  label: string
  children?: TreeItem[]
}

const treeData: TreeItem[] = [
  {
    id: 1,
    label: 'Operations',
    children: [
      { id: 11, label: 'Escalations' },
      { id: 12, label: 'Runbooks' },
    ],
  },
  {
    id: 2,
    label: 'Billing',
    children: [
      { id: 21, label: 'Invoices' },
      { id: 22, label: 'Disputes' },
    ],
  },
  {
    id: 3,
    label: 'Support',
    children: [
      { id: 31, label: 'Priority queue' },
      { id: 32, label: 'Knowledge base' },
    ],
  },
]

const expandedKeys = ref<Array<number | string>>([1, 2])
</script>

<template>
  <div class="grid gap-4">
    <div class="flex flex-wrap gap-2">
      <GrButton size="sm" variant="outline" @click="expandedKeys = [1, 2, 3]">
        Expand all groups
      </GrButton>
      <GrButton size="sm" variant="ghost" @click="expandedKeys = [2]">
        Focus billing
      </GrButton>
    </div>

    <GrTree :data="treeData" :default-expanded-keys="expandedKeys" branch-line />

    <div class="flex flex-wrap gap-2">
      <GrBadge v-for="key in expandedKeys" :key="key">
        Expanded: {{ key }}
      </GrBadge>
    </div>
  </div>
</template>

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

import { GrBadge, GrEmptyState, GrInput, GrTree } from '@feugene/granularity'

type TreeItem = {
  id: number
  label: string
  team: string
  children?: TreeItem[]
}

const treeData: TreeItem[] = [
  {
    id: 1,
    label: 'Incident management',
    team: 'Operations',
    children: [
      { id: 11, label: 'Pager duty', team: 'Operations' },
      { id: 12, label: 'Postmortems', team: 'Operations' },
    ],
  },
  {
    id: 2,
    label: 'Revenue ops',
    team: 'Billing',
    children: [
      { id: 21, label: 'Chargebacks', team: 'Billing' },
      { id: 22, label: 'Usage reports', team: 'Billing' },
    ],
  },
  {
    id: 3,
    label: 'Customer support',
    team: 'Support',
    children: [
      { id: 31, label: 'Macros', team: 'Support' },
      { id: 32, label: 'SLA queues', team: 'Support' },
    ],
  },
]

const query = ref('')

/**
 * Результат фильтрации приходит от дерева, а не считается вторым проходом по
 * данным. Разница видна в пустом экране: «ничего не нашлось» и «данных нет» —
 * разные сообщения, и первое пользователь может исправить сам.
 */
const matched = ref(treeData.length)
const visible = ref(treeData.length)
</script>

<template>
  <div class="grid gap-4">
    <GrInput v-model="query" placeholder="Filter tree nodes by label or team" aria-label="Filter tree nodes" />

    <GrTree
      :data="treeData"
      :filter-value="query"
      :filter-node-method="(value, data) => `${data.label} ${data.team}`.toLowerCase().includes(String(value).toLowerCase())"
      branch-line
      @filter="({ matchedCount, visibleCount }) => { matched = matchedCount; visible = visibleCount }"
    />

    <GrEmptyState
      v-if="visible === 0"
      title="Nothing matches the query"
      description="Try a shorter word — the filter looks at both the label and the team."
    />

    <GrBadge>
      Matches: {{ matched }}
    </GrBadge>
  </div>
</template>

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

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

type TreeItem = {
  id: number
  label: string
  status: 'healthy' | 'warning' | 'critical'
  children?: TreeItem[]
}

const treeData = ref<TreeItem[]>([
  {
    id: 1,
    label: 'Payments',
    status: 'critical',
    children: [
      { id: 11, label: 'Retries', status: 'warning' },
      { id: 12, label: 'Settlement', status: 'healthy' },
    ],
  },
  {
    id: 2,
    label: 'Identity',
    status: 'warning',
    children: [
      { id: 21, label: 'Sessions', status: 'healthy' },
      { id: 22, label: 'Recovery', status: 'warning' },
    ],
  },
])

const lastDrop = ref('Drag a row handle to reorder or nest nodes')

// Текст на тонированной подложке — из `-text`, а не из насыщенного тона:
// `--gr-success` на `--gr-success-light` даёт 2.24:1.
function resolveTone(status: TreeItem['status']) {
  if (status === 'critical')
    return 'bg-[var(--gr-danger-light)] text-[var(--gr-danger-text)]'

  if (status === 'warning')
    return 'bg-[var(--gr-warning-light)] text-[var(--gr-warning-text)]'

  return 'bg-[var(--gr-success-light)] text-[var(--gr-success-text)]'
}
</script>

<template>
  <div class="grid gap-4">
    <GrTree
      :data="treeData"
      :default-expanded-keys="[1, 2]"
      draggable
      branch-line
      @node-drop="(draggingNode, dropNode, dropType) => lastDrop = `${draggingNode.label} → ${dropNode.label} (${dropType})`"
    >
      <template #default="{ data }">
        <div class="flex flex-wrap items-center gap-2">
          <span>{{ data.label }}</span>
          <span class="rounded-full px-2 py-1 text-xs font-600" :class="resolveTone(data.status)">
            {{ data.status }}
          </span>
        </div>
      </template>
    </GrTree>

    <GrBadge>
      {{ lastDrop }}
    </GrBadge>
  </div>
</template>

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

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

const data = [
  {
    id: 'src',
    label: 'src',
    children: [
      { id: 'components', label: 'components' },
      { id: 'composables', label: 'composables' },
    ],
  },
]
</script>

<template>
  <div class="grid gap-4 sm:grid-cols-2">
    <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>

      <GrTree :data="data" :size="size" :default-expanded-keys="['src']" />
    </div>
  </div>
</template>

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

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

type Permission = { id: string, label: string, children?: Permission[] }

// Типовой сценарий чекбоксов в дереве — выдача прав по разделам.
const permissions: Permission[] = [
  {
    id: 'billing',
    label: 'Billing',
    children: [
      { id: 'billing.read', label: 'View invoices' },
      { id: 'billing.write', label: 'Issue invoices' },
      { id: 'billing.refund', label: 'Refund payments' },
    ],
  },
  {
    id: 'team',
    label: 'Team',
    children: [
      { id: 'team.read', label: 'View members' },
      { id: 'team.invite', label: 'Invite members' },
    ],
  },
]

const checkedKeys = ref<(string | number)[]>(['billing.read'])
</script>

<template>
  <div class="grid gap-3">
    <GrTree
      v-model:checked-keys="checkedKeys"
      :data="permissions"
      node-key="id"
      show-checkbox
      :default-expanded-keys="['billing', 'team']"
    />

    <div class="flex flex-wrap items-center gap-2">
      <GrBadge tone="neutral">
        Отмечено: {{ checkedKeys.length }}
      </GrBadge>
      <GrBadge v-for="key in checkedKeys" :key="key" tone="info">
        {{ key }}
      </GrBadge>
    </div>
  </div>
</template>

<script setup lang="ts">
import { GrTree, type GrTreeNode } from '@feugene/granularity'

type Folder = { id: string, label: string, isLeaf?: boolean, children?: Folder[] }

// Корень приходит с сервера сразу, ветки — по раскрытию.
const roots: Folder[] = [
  { id: 'src', label: 'src' },
  { id: 'docs', label: 'docs' },
  { id: 'README.md', label: 'README.md', isLeaf: true },
]

function loadChildren(node: GrTreeNode<Folder>, resolve: (children: Folder[]) => void): void {
  window.setTimeout(() => {
    resolve([
      { id: `${node.key}/index.ts`, label: 'index.ts', isLeaf: true },
      { id: `${node.key}/nested`, label: 'nested' },
    ])
  }, 600)
}
</script>

<template>
  <GrTree
    :data="roots"
    node-key="id"
    lazy
    :load="loadChildren"
  />
</template>

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

import { GrBadge, GrSwitch, GrTree } from '@feugene/granularity'

type Node = {
  id: string
  label: string
  children?: Node[]
}

const data: Node[] = [
  {
    id: 'billing',
    label: 'Billing',
    children: [
      { id: 'invoices', label: 'Invoices' },
      { id: 'payouts', label: 'Payouts' },
    ],
  },
  {
    id: 'catalog',
    label: 'Catalog',
    children: [
      { id: 'categories', label: 'Categories' },
      { id: 'currencies', label: 'Currencies' },
    ],
  },
  {
    id: 'delivery',
    label: 'Delivery',
    children: [
      { id: 'couriers', label: 'Couriers' },
      { id: 'warehouses', label: 'Warehouses' },
    ],
  },
]

const accordion = ref(true)
const expandOnClickNode = ref(true)
const lastSelected = ref('—')
</script>

<template>
  <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_260px]">
    <div class="grid gap-4">
      <div class="flex flex-wrap items-center gap-4">
        <label class="flex items-center gap-2 text-sm text-[var(--gr-muted-fg)]">
          <GrSwitch v-model="accordion" size="sm" />
          accordion
        </label>
        <label class="flex items-center gap-2 text-sm text-[var(--gr-muted-fg)]">
          <GrSwitch v-model="expandOnClickNode" size="sm" />
          expandOnClickNode
        </label>
      </div>

      <div class="rounded-2xl border border-[var(--gr-brd)] bg-[var(--gr-card)] p-3">
        <GrTree
          :data="data"
          node-key="id"
          :accordion="accordion"
          :expand-on-click-node="expandOnClickNode"
          default-expand-all
          @node-click="(item: Node) => (lastSelected = item.label)"
        />
      </div>
    </div>

    <div class="rounded-2xl border border-[var(--gr-brd)] bg-[var(--gr-card)] p-4 text-sm text-[var(--gr-muted-fg)]">
      <div>
        Выбрано:
        <GrBadge class="ml-1">
          {{ lastSelected }}
        </GrBadge>
      </div>

      <ul class="mt-3 grid gap-1">
        <li>Наберите «cur» — фокус уедет на Currencies.</li>
        <li>Повторное нажатие одной буквы идёт по кругу.</li>
        <li><code>*</code> раскрывает все узлы уровня разом.</li>
      </ul>
    </div>
  </div>
</template>

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

// Настоящее дерево на три уровня: 100 регионов × 10 площадок × 10 линий = 10 000
// листьев (плюс 1100 ветвей). Виртуализация работает по раскрытым строкам, а не по
// корням, поэтому раскрытие ветки в таком дереве стоит столько же, сколько в малом.
const data = Array.from({ length: 100 }, (_, region) => ({
  id: `r${region + 1}`,
  label: `Region ${region + 1}`,
  children: Array.from({ length: 10 }, (_, site) => ({
    id: `r${region + 1}-s${site + 1}`,
    label: `Site ${region + 1}.${site + 1}`,
    children: Array.from({ length: 10 }, (_, line) => ({
      id: `r${region + 1}-s${site + 1}-l${line + 1}`,
      label: `Line ${region + 1}.${site + 1}.${line + 1}`,
    })),
  })),
}))

// Пара раскрытых ветвей на старте: видно и вложенность, и направляющие уровней.
const defaultExpandedKeys = ['r1', 'r1-s1', 'r2']
</script>

<template>
  <GrTree
    :data="data"
    node-key="id"
    :default-expanded-keys="defaultExpandedKeys"
    branch-line
    virtual
    :max-height="320"
  />
</template>