GrTreeSelect

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

import { GrTreeSelect } from '@feugene/granularity'

interface CostCentre {
  id: number
  label: string
  children?: CostCentre[]
}

const costCentres: CostCentre[] = [
  {
    id: 1,
    label: 'Marketing',
    children: [
      { id: 11, label: 'Paid acquisition' },
      { id: 12, label: 'Events' },
    ],
  },
  {
    id: 2,
    label: 'Engineering',
    children: [
      { id: 21, label: 'Platform' },
      { id: 22, label: 'Mobile' },
    ],
  },
]

const centre = ref<number | null>(11)
</script>

<template>
  <GrTreeSelect
    v-model="centre"
    :data="costCentres"
    clearable
    :default-expanded-keys="[1]"
    placeholder="Cost centre"
    aria-label="Cost centre"
    prefix-fixed
  >
    <template #prefix>
      <span class="i-lucide-wallet block h-4 w-4" />
    </template>
    <template #suffix>
      EUR
    </template>
  </GrTreeSelect>
</template>

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

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

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

const treeData: TreeSelectItem[] = [
  {
    id: 1,
    label: 'Finance',
    children: [
      { id: 11, label: 'Invoices' },
      {
        id: 12,
        label: 'Reconciliation',
        children: [
          { id: 121, label: 'Daily close' },
          { id: 122, label: 'Payout matching' },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Operations',
    children: [
      { id: 21, label: 'Escalations' },
      { id: 22, label: 'Runbooks' },
    ],
  },
]

const value = ref<number | null>(122)
</script>

<template>
  <div class="grid gap-4">
    <GrTreeSelect
      v-model="value"
      :data="treeData"
      clearable
      value-display="path"
      placeholder="Pick knowledge area"
      aria-label="Pick knowledge area"
      :default-expanded-keys="[1]"
    />

    <GrBadge>
      Current value: {{ value ?? 'nothing selected' }}
    </GrBadge>
  </div>
</template>

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

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

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

const treeData: TreeSelectItem[] = [
  {
    id: 1,
    label: 'Platform',
    children: [
      { id: 11, label: 'API gateway' },
      { id: 12, label: 'Observability' },
    ],
  },
  {
    id: 2,
    label: 'Customer success',
    children: [
      { id: 21, label: 'Escalations' },
      { id: 22, label: 'Renewals' },
    ],
  },
  {
    id: 3,
    label: 'Growth',
    children: [
      { id: 31, label: 'Experiments' },
      { id: 32, label: 'Attribution' },
    ],
  },
]

const selectedValues = ref<Array<number | string>>([12, 21])

const selectionLabel = computed(() => {
  if (selectedValues.value.length === 0)
    return 'Nothing selected yet'

  return `Selected ${selectedValues.value.length} nodes`
})
</script>

<template>
  <div class="grid gap-4">
    <GrTreeSelect
      v-model="selectedValues"
      :data="treeData"
      multiple
      show-checkbox
      filterable
      clearable
      :close-on-select="false"
      placeholder="Filter and pick several areas"
      aria-label="Filter and pick several areas"
      :default-expanded-keys="[1, 2, 3]"
    />

    <div class="flex flex-wrap gap-2">
      <GrBadge v-for="value in selectedValues" :key="value">
        {{ value }}
      </GrBadge>
      <GrBadge tone="neutral">
        {{ selectionLabel }}
      </GrBadge>
    </div>
  </div>
</template>

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

import { GrTreeSelect } from '@feugene/granularity'

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

const treeData: TreeSelectItem[] = [
  {
    id: 1,
    label: 'Revenue platform',
    owner: 'Billing',
    children: [
      { id: 11, label: 'Invoice automation', owner: 'Billing' },
      { id: 12, label: 'Risk rules', owner: 'Fraud' },
    ],
  },
  {
    id: 2,
    label: 'Support tools',
    owner: 'Support',
    children: [
      { id: 21, label: 'Macros', owner: 'Support' },
      { id: 22, label: 'Routing', owner: 'Operations' },
    ],
  },
]

const value = ref<number | null>(11)
</script>

<template>
  <div class="grid gap-4">
    <GrTreeSelect
      v-model="value"
      :data="treeData"
      placeholder="Pick workflow"
      aria-label="Pick workflow"
      :default-expanded-keys="[1, 2]"
    >
      <template #value="{ displayValue, labels }">
        <div class="flex flex-wrap items-center gap-2 text-sm">
          <span class="font-600">{{ displayValue || 'Nothing selected' }}</span>
          <span v-if="labels.length" class="rounded-full bg-[var(--gr-accent)] px-2 py-1 text-xs text-[var(--gr-accent-fg)]">
            {{ labels.length }} label(s)
          </span>
        </div>
      </template>

      <template #node="{ data, selected }">
        <div class="flex w-full items-center justify-between gap-3">
          <span>{{ data.label }}</span>
          <span class="text-xs text-[var(--gr-muted-fg)]">
            {{ selected ? 'Selected' : data.owner }}
          </span>
        </div>
      </template>
    </GrTreeSelect>
  </div>
</template>

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

import { GrButton, GrTreeSelect } from '@feugene/granularity'

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

const catalog: Region[] = [
  {
    id: 'eu',
    label: 'Europe',
    children: [
      { id: 'eu-central', label: 'Central' },
      { id: 'eu-north', label: 'North' },
    ],
  },
  {
    id: 'us',
    label: 'Americas',
    children: [
      { id: 'us-east', label: 'East' },
      { id: 'us-west', label: 'West' },
    ],
  },
]

const data = ref<Region[]>([])
const loading = ref(false)
const value = ref<string | null>(null)

async function load() {
  loading.value = true
  data.value = []

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

  data.value = catalog
  loading.value = false
}
</script>

<template>
  <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_280px]">
    <div class="grid gap-3">
      <GrTreeSelect
        v-model="value"
        :data="data"
        :loading="loading"
        node-key="id"
        filterable
        clearable
        placeholder="Регион размещения"
        aria-label="Регион размещения"
      />

      <div>
        <GrButton size="sm" variant="outline" @click="load">
          Загрузить справочник
        </GrButton>
      </div>
    </div>

    <div class="rounded-2xl border border-[var(--gr-brd)] bg-[var(--gr-card)] p-4 text-sm text-[var(--gr-muted-fg)]">
      <ul class="grid gap-1">
        <li>Стрелка вниз на поле открывает панель и уводит в поиск.</li>
        <li>Ещё одна стрелка — фокус уже в дереве, дальше клавиши GrTree.</li>
        <li><code>Esc</code> закрывает панель и возвращает фокус на поле.</li>
        <li>Пока данные едут, панель показывает индикатор, а не «нет данных».</li>
      </ul>
    </div>
  </div>
</template>