GrSplitter

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

const size = ref(28)

const files = ['src/', '  components/', '  composables/', '  styles/', 'docs/', 'package.json']
</script>

<template>
  <div class="grid gap-3">
    <div class="h-64 overflow-hidden rounded-[var(--gr-radius-md)] border border-[var(--gr-brd)]">
      <GrSplitter v-model="size" :min="15" :max="60" aria-label="Ширина дерева файлов">
        <template #start>
          <div class="h-full overflow-auto bg-[var(--gr-muted)] p-3" tabindex="0">
            <p
              v-for="file in files"
              :key="file"
              class="whitespace-pre text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-relaxed)] text-[var(--gr-muted-fg)]"
            >{{ file }}</p>
          </div>
        </template>

        <template #end>
          <div class="h-full overflow-auto p-4">
            <p class="text-[length:var(--gr-text-sm)] text-[var(--gr-fg)]">
              Тяните границу мышью или доведите до неё фокус клавишей Tab: стрелки двигают на процент,
              Shift + стрелка — на десять, Home и End упираются в границы.
            </p>
          </div>
        </template>
      </GrSplitter>
    </div>

    <p class="text-[length:var(--gr-text-xs)] text-[var(--gr-muted-fg)]">
      Доля первой панели: {{ Math.round(size) }} %
    </p>
  </div>
</template>

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

const treeWidth = ref(25)
const consoleHeight = ref(65)
</script>

<template>
  <div class="h-72 overflow-hidden rounded-[var(--gr-radius-md)] border border-[var(--gr-brd)]">
    <GrSplitter v-model="treeWidth" :min="15" :max="50" aria-label="Ширина дерева">
      <template #start>
        <div class="h-full bg-[var(--gr-muted)] p-3 text-[length:var(--gr-text-xs)] text-[var(--gr-muted-fg)]">
          Дерево
        </div>
      </template>

      <template #end>
        <!-- Трёхпанельная раскладка — это вложение, а не третья панель у сплиттера. -->
        <GrSplitter v-model="consoleHeight" orientation="vertical" :min="30" aria-label="Высота консоли">
          <template #start>
            <div class="h-full p-4 text-[length:var(--gr-text-sm)] text-[var(--gr-fg)]">
              Редактор
            </div>
          </template>

          <template #end>
            <div class="h-full overflow-auto bg-[var(--gr-muted)] p-3 font-mono text-[length:var(--gr-text-xs)] text-[var(--gr-muted-fg)]" tabindex="0">
              <p>$ yarn build</p>
              <p>✓ built in 692ms</p>
            </div>
          </template>
        </GrSplitter>
      </template>
    </GrSplitter>
  </div>
</template>

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

const size = ref(30)
const collapsed = ref(false)
</script>

<template>
  <div class="grid gap-3">
    <div class="h-56 overflow-hidden rounded-[var(--gr-radius-md)] border border-[var(--gr-brd)]">
      <GrSplitter
        v-model="size"
        v-model:collapsed="collapsed"
        collapsible
        :min="20"
        :min-end="30"
        :default-size="30"
        aria-label="Ширина боковой панели"
      >
        <template #start>
          <div class="h-full bg-[var(--gr-muted)] p-3 text-[length:var(--gr-text-xs)] text-[var(--gr-muted-fg)]">
            Фильтры
          </div>
        </template>

        <template #end>
          <div class="h-full p-4 text-[length:var(--gr-text-sm)] text-[var(--gr-fg)]">
            Enter на разделителе сворачивает панель и возвращает её туда же, откуда свернул.
            Двойной клик сбрасывает границу к значению по умолчанию, а перетаскивание вплотную
            к левому краю схлопывает панель мышью.
          </div>
        </template>
      </GrSplitter>
    </div>

    <p class="text-[length:var(--gr-text-xs)] text-[var(--gr-muted-fg)]">
      {{ collapsed ? 'Панель свёрнута' : `Доля панели: ${Math.round(size)} %` }}
    </p>
  </div>
</template>