GrTabs

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

import type { GrTabsOrientation } from '@feugene/granularity'
import { GrSegmented, GrTabPanel, GrTabPanels, GrTabs } from '@feugene/granularity'

const tab = ref('overview')
const orientation = ref<GrTabsOrientation>('horizontal')
const manual = ref(true)

const tabs = [
  { value: 'overview', label: 'Обзор' },
  { value: 'activity', label: 'Активность', badge: '12' },
  { value: 'archive', label: 'Архив', disabled: true },
  { value: 'billing', label: 'Счета' },
]
</script>

<template>
  <div class="grid gap-4">
    <div class="flex flex-wrap items-center gap-4">
      <GrSegmented
        v-model="orientation"
        size="sm"
        :options="[
          { value: 'horizontal', label: 'horizontal' },
          { value: 'vertical', label: 'vertical' },
        ]"
      />
      <label class="flex items-center gap-2 text-sm text-[var(--gr-muted-fg)]">
        <input v-model="manual" type="checkbox">
        activationMode="manual"
      </label>
    </div>

    <div class="flex flex-wrap items-start gap-4">
      <GrTabs
        v-model="tab"
        :tabs="tabs"
        :orientation="orientation"
        :activation-mode="manual ? 'manual' : 'automatic'"
        id-base="activation-demo"
      />

      <GrTabPanels v-model="tab" id-base="activation-demo" class="min-w-[16rem] flex-1">
        <GrTabPanel v-for="item in tabs" :key="item.value" :value="item.value">
          Панель «{{ item.label }}»
        </GrTabPanel>
      </GrTabPanels>
    </div>

    <div class="rounded-2xl border border-dashed border-[var(--gr-brd)] p-3 text-sm text-[var(--gr-muted-fg)]">
      В ручном режиме стрелки двигают только фокус — выбор подтверждает `Enter` или `Space`.
      Отключённая вкладка остаётся объявленной, но пропускается при переборе.
    </div>
  </div>
</template>

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

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

const currentTab = ref('overview')
const tabs = [
  { value: 'overview', label: 'Overview' },
  { value: 'activity', label: 'Activity' },
  { value: 'billing', label: 'Billing' },
]

const panelContent = computed(() => {
  if (currentTab.value === 'activity')
    return 'Activity tab usually hosts timelines, audits and operator actions.'

  if (currentTab.value === 'billing')
    return 'Billing tab is a natural place for invoices, payment status and limits.'

  return 'Overview tab is the default landing surface for a compact summary.'
})
</script>

<template>
  <div class="grid gap-3">
    <GrTabs v-model="currentTab" :tabs="tabs" />

    <div class="rounded-2xl border border-[var(--gr-brd)] bg-[var(--gr-card)] p-4 text-sm text-[var(--gr-fg)] shadow-[var(--gr-shadow-1)]">
      {{ panelContent }}
    </div>

    <GrBadge>
      Active tab: {{ currentTab }}
    </GrBadge>
  </div>
</template>

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

import { GrButton, GrTabs, type GrTab } from '@feugene/granularity'

const initial: GrTab[] = [
  { value: 'readme', label: 'README.md', icon: 'i-lucide-pin', closable: false },
  { value: 'index', label: 'index.ts' },
  { value: 'styles', label: 'styles.css' },
  { value: 'config', label: 'vite.config.ts' },
]

const tabs = ref<GrTab[]>([...initial])
const currentTab = ref('index')

/**
 * Компонент эмитит только `close`: список — проп, и закрытие может не
 * состояться («сохранить изменения?»). Выбор соседа тоже за потребителем.
 */
function close(value: string) {
  const index = tabs.value.findIndex(tab => tab.value === value)
  if (index < 0)
    return

  tabs.value.splice(index, 1)

  if (currentTab.value === value)
    currentTab.value = tabs.value[index]?.value ?? tabs.value[index - 1]?.value ?? ''
}

function closeAll() {
  tabs.value = []
  currentTab.value = ''
}

function restore() {
  tabs.value = [...initial]
  currentTab.value = 'index'
}
</script>

<template>
  <div class="grid gap-3">
    <GrTabs
      v-model="currentTab"
      :tabs="tabs"
      closable
      variant="line"
      empty-text="No open files"
      @close="close"
    />

    <div class="flex flex-wrap items-center gap-3">
      <GrButton size="sm" variant="secondary" :disabled="tabs.length === initial.length" @click="restore">
        Reopen all
      </GrButton>

      <GrButton size="sm" variant="ghost-border" :disabled="tabs.length === 0" @click="closeAll">
        Close all
      </GrButton>

      <span class="text-sm text-[var(--gr-muted-fg)]">
        README.md is pinned (<code>closable: false</code>) and stays put — "Close all" empties the list to show the
        empty row. Click the close icon, or focus a tab and press <kbd>Delete</kbd>.
      </span>
    </div>
  </div>
</template>

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

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

const currentTab = ref('queue')
const tabs = [
  { value: 'queue', label: 'Queue', badge: '12', icon: 'i-lucide-inbox' },
  { value: 'reviews', label: 'Reviews', badge: '4', icon: 'i-lucide-eye' },
  { value: 'blocked', label: 'Blocked', badge: '2', icon: 'i-lucide-ban' },
]
</script>

<template>
  <div class="grid gap-3">
    <GrTabs v-model="currentTab" :tabs="tabs" />

    <GrTabs v-model="currentTab" :tabs="tabs" variant="line" />

    <div class="flex flex-wrap gap-2">
      <GrBadge v-for="tab in tabs" :key="tab.value" :tone="tab.value === currentTab ? 'primary' : 'neutral'">
        {{ tab.label }}: {{ tab.badge }}
      </GrBadge>
    </div>
  </div>
</template>

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

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

type ViewKey = 'summary' | 'incidents' | 'contacts'

const currentTab = ref<ViewKey>('summary')
const tabs = [
  { value: 'summary', label: 'Summary' },
  { value: 'incidents', label: 'Incidents', badge: '3' },
  { value: 'contacts', label: 'Contacts' },
] satisfies Array<{ value: ViewKey, label: string, badge?: string }>

const sectionTitle = computed(() => {
  if (currentTab.value === 'incidents')
    return 'Escalation queue'

  if (currentTab.value === 'contacts')
    return 'On-call contacts'

  return 'Service health summary'
})
</script>

<template>
  <div class="grid gap-4">
    <GrTabs v-model="currentTab" :tabs="tabs" />

    <div class="grid gap-3 rounded-2xl border border-[var(--gr-brd)] bg-[var(--gr-card)] p-4 shadow-[var(--gr-shadow-1)]">
      <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
          <div class="text-sm font-600 text-[var(--gr-fg)]">
            {{ sectionTitle }}
          </div>
          <div class="text-sm text-[var(--gr-muted-fg)]">
            Tabs stay presentation-focused while the page decides which panel to render.
          </div>
        </div>

        <GrButton size="sm" variant="outline">
          Refresh panel
        </GrButton>
      </div>

      <div class="flex flex-wrap gap-2">
        <GrBadge v-if="currentTab === 'summary'">
          Uptime 99.96%
        </GrBadge>
        <GrBadge v-else-if="currentTab === 'incidents'" tone="warning">
          3 incidents require follow-up
        </GrBadge>
        <GrBadge v-else>
          5 contacts in rotation
        </GrBadge>
      </div>
    </div>
  </div>
</template>

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

import { GrTabs } from '@feugene/granularity'

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

const active = ref('overview')

const tabs = [
  { value: 'overview', label: 'Overview' },
  { value: 'activity', label: 'Activity', badge: '12' },
  { value: 'settings', label: 'Settings' },
]
</script>

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

      <GrTabs v-model="active" :tabs="tabs" :size="size" />
    </div>
  </div>
</template>

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

import { GrSegmented, GrTabs } from '@feugene/granularity'

/**
 * Ширина контейнера, а не окна: переполнение считается по доступному месту,
 * поэтому увидеть его можно не трогая размер браузера.
 *
 * Вариант переключается рядом намеренно. Полоса `pills` несёт свой непрозрачный
 * фон, `line` прозрачна и лежит на фоне страницы — затухание обязано читаться на
 * обоих, и именно поэтому оно сделано маской, а не градиентом-подложкой:
 * градиенту было бы неоткуда взять цвет подложки для `line`.
 */
const width = ref('260')
const widths = [
  { value: '260', label: '260px' },
  { value: '375', label: '375px' },
  { value: '520', label: '520px' },
]

const variant = ref<'pills' | 'line'>('pills')
const variants = [
  { value: 'pills', label: 'pills' },
  { value: 'line', label: 'line' },
]

const active = ref('overview')
const tabs = [
  { value: 'overview', label: 'Обзор' },
  { value: 'security', label: 'Безопасность' },
  { value: 'notifications', label: 'Уведомления' },
  { value: 'plan', label: 'Тариф' },
  { value: 'account', label: 'Аккаунт' },
  { value: 'sessions', label: 'Сеансы' },
  { value: 'api', label: 'Ключи API' },
]
</script>

<template>
  <div class="grid gap-4">
    <div class="flex flex-wrap items-center gap-4">
      <label class="grid gap-1 text-[length:var(--gr-control-text-sm)]">
        <span class="showcase-demo-text">Ширина контейнера</span>
        <GrSegmented v-model="width" :options="widths" size="sm" />
      </label>

      <label class="grid gap-1 text-[length:var(--gr-control-text-sm)]">
        <span class="showcase-demo-text">Вид ряда</span>
        <GrSegmented v-model="variant" :options="variants" size="sm" />
      </label>
    </div>

    <div
      data-demo-tabs-box
      class="rounded-[var(--gr-radius-md)] border border-dashed border-[var(--gr-brd)] p-3"
      :style="{ width: `${width}px`, maxWidth: '100%' }"
    >
      <GrTabs v-model="active" :tabs="tabs" :variant="variant" size="sm" />
    </div>

    <p class="showcase-demo-text text-sm">
      Ряд гаснет <b>у того края, за которым есть продолжение</b>: в начале — справа, в конце —
      слева, в середине — с обеих сторон. Прокрутите ряд и проследите, как затухание переезжает.
      Влезает целиком — не гаснет вовсе.

      <br><br>

      Полоса прокрутки у ряда скрыта намеренно: под вкладками она выглядит чужеродно, а на macOS
      система прячет её до начала прокрутки — то есть показала бы продолжение уже после того, как
      пользователь о нём догадался.

      <br><br>

      Вкладки за краем <b>достижимы и без мыши</b>: стрелки ведут по ряду, а активная вкладка сама
      подтягивается в видимую часть — в том числе когда её выбрали снаружи. Отступ прокрутки равен
      ширине затухания, поэтому кольцо фокуса не оказывается под ним. Ширина — хук
      <code>--gr-tabs-scroll-fade</code>.
    </p>
  </div>
</template>