GrPopover

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

import { GrButton, GrFormField, GrInput, GrPopover } from '@feugene/granularity'

const open = ref(false)
const name = ref('Weekly digest')
const recipients = ref('[email protected]')

function save(): void {
  open.value = false
}
</script>

<template>
  <GrPopover v-model:open="open" aria-label="Report settings" placement="bottom-start">
    <template #trigger="{ triggerProps }">
      <GrButton variant="outline" v-bind="triggerProps">
        Report settings
      </GrButton>
    </template>

    <template #content>
      <div class="grid w-64 gap-3">
        <GrFormField label="Name">
          <GrInput v-model="name" size="sm" />
        </GrFormField>

        <GrFormField label="Recipients">
          <GrInput v-model="recipients" size="sm" />
        </GrFormField>

        <div class="flex justify-end gap-2">
          <GrButton variant="ghost" size="sm" @click="open = false">
            Cancel
          </GrButton>
          <GrButton size="sm" @click="save">
            Save
          </GrButton>
        </div>
      </div>
    </template>
  </GrPopover>
</template>

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

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

const open = ref(false)
const archived = ref(false)

function confirm(): void {
  archived.value = true
  open.value = false
}
</script>

<template>
  <div class="flex items-center gap-3">
    <GrPopover
      v-model:open="open"
      aria-label="Confirm archiving"
      placement="top"
      size="sm"
    >
      <template #trigger="{ triggerProps }">
        <GrButton variant="outline" tone="danger" v-bind="triggerProps">
          Archive invoice
        </GrButton>
      </template>

      <template #content>
        <div class="grid w-56 gap-3">
          <p class="text-[var(--gr-fg)]">
            Archive this invoice? You can restore it from the archive later.
          </p>

          <div class="flex justify-end gap-2">
            <GrButton variant="ghost" size="xs" @click="open = false">
              Cancel
            </GrButton>
            <GrButton size="xs" tone="danger" @click="confirm">
              Archive
            </GrButton>
          </div>
        </div>
      </template>
    </GrPopover>

    <span v-if="archived" class="text-sm text-[var(--gr-muted-fg)]">
      Invoice archived
    </span>
  </div>
</template>

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

import { GrButton, GrFormField, GrInput, GrPopover, GrSwitch } from '@feugene/granularity'

const modal = ref(true)
const open = ref(false)
const amount = ref('1200')
const comment = ref('')
const lastBackgroundClick = ref<string | null>(null)
</script>

<template>
  <div class="grid gap-4">
    <GrSwitch v-model="modal">
      Modal mode
    </GrSwitch>

    <GrPopover v-model:open="open" :modal="modal" aria-label="Refund request" placement="bottom-start">
      <template #trigger="{ triggerProps }">
        <GrButton class="justify-self-start" variant="outline" v-bind="triggerProps">
          Request a refund
        </GrButton>
      </template>

      <template #content>
        <div class="grid w-72 gap-3">
          <GrFormField label="Amount">
            <GrInput v-model="amount" size="sm" />
          </GrFormField>

          <GrFormField label="Comment">
            <GrInput v-model="comment" size="sm" placeholder="Optional" />
          </GrFormField>

          <div class="flex justify-end gap-2">
            <GrButton variant="ghost" size="sm" @click="open = false">
              Cancel
            </GrButton>
            <GrButton size="sm" @click="open = false">
              Send
            </GrButton>
          </div>
        </div>
      </template>
    </GrPopover>

    <!-- Фон для проверки изоляции: в модальном режиме кнопка не кликается,
         не получает фокус по Tab и не читается диктором. -->
    <div class="grid gap-2 rounded-xl border border-[var(--gr-brd)] p-4">
      <div class="text-sm text-[var(--gr-muted-fg)]">
        Background stays interactive only while the popover is not modal.
      </div>
      <GrButton
        class="justify-self-start"
        variant="ghost"
        size="sm"
        @click="lastBackgroundClick = new Date().toLocaleTimeString()"
      >
        Click me
      </GrButton>
      <div class="text-sm">
        Last background click: {{ lastBackgroundClick ?? 'never' }}
      </div>
    </div>
  </div>
</template>

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

const placements = ['top', 'right', 'bottom', 'left'] as const
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <GrPopover
      v-for="placement in placements"
      :key="placement"
      :placement="placement"
      :aria-label="`Opens on the ${placement}`"
      size="sm"
    >
      <template #trigger="{ triggerProps }">
        <GrButton variant="outline" size="sm" v-bind="triggerProps">
          {{ placement }}
        </GrButton>
      </template>

      <template #content>
        <div class="w-40 text-[var(--gr-fg)]">
          Opens on the <b>{{ placement }}</b> and flips itself when the edge is close.
        </div>
      </template>
    </GrPopover>
  </div>
</template>

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

import { GrButton, GrPopover, GrSegmented } from '@feugene/granularity'

/**
 * Ширина панели — две независимые оси, и демо показывает именно их
 * независимость: потолок переключается слева, источник ширины — справа, и
 * любое сочетание осмысленно.
 *
 * Триггер намеренно широкий: при узком разница между «по содержимому» и «по
 * триггеру» не видна вовсе, а именно она тут и предмет.
 *
 * Хук приезжает через `contentClass`, а не инлайновым стилем на `GrPopover`:
 * панель телепортируется в портал, и кастомное свойство с обёртки триггера до
 * неё не наследуется — она ей не потомок.
 */
const ceiling = ref<'default' | 'none'>('default')
const source = ref<'content' | 'trigger' | 'trigger-min'>('content')

const ceilingOptions = [
  { value: 'default', label: 'Потолок 22rem' },
  { value: 'none', label: 'Потолок снят' },
]

const sourceOptions = [
  { value: 'content', label: 'По содержимому' },
  { value: 'trigger', label: 'По триггеру' },
  { value: 'trigger-min', label: 'Минимум — триггер' },
]

const LONG = 'Панель с длинным текстом, по которому видно, где именно проходит потолок ширины: '
  + 'по умолчанию это 22rem — читаемая ширина колонки, дальше строка переносится.'
</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="ceiling" :options="ceilingOptions" size="sm" />
      </label>

      <label class="grid gap-1 text-[length:var(--gr-control-text-sm)]">
        <span class="showcase-demo-text">Источник ширины — проп</span>
        <GrSegmented v-model="source" :options="sourceOptions" size="sm" />
      </label>
    </div>

    <div>
      <GrPopover
        :key="`${ceiling}-${source}`"
        :match-width="source === 'trigger' ? true : source === 'trigger-min' ? 'min' : false"
        :content-class="ceiling === 'none' ? '[--gr-popover-max-width:100vw]' : undefined"
        placement="bottom-start"
        aria-label="Ширина панели"
        size="sm"
      >
        <template #trigger="{ triggerProps }">
          <GrButton variant="outline" v-bind="triggerProps" class="w-[26rem]">
            Широкий триггер — 26rem
          </GrButton>
        </template>

        <template #content>
          <div class="text-[var(--gr-fg)]">{{ LONG }}</div>
        </template>
      </GrPopover>
    </div>

    <p class="showcase-demo-text text-sm">
      <b>Потолок</b> — значение, поэтому это CSS-хук <code>--gr-popover-max-width</code>, а не проп:
      его можно менять по брейкпоинту и по теме, и он не спорит по специфичности с классом панели.
      Снимают его значением <code>100vw</code>, а не <code>none</code>: <code>min(none, …)</code> —
      невалидный CSS.

      <br><br>

      Доставляется хук <b>через <code>contentClass</code></b>, потому что панель живёт в портале:
      инлайновый стиль на <code>&lt;GrPopover&gt;</code> ляжет на обёртку триггера, а панель ей не
      потомок — свойство до неё не дойдёт и молча ничего не сделает. Глобально (в теме, на
      <code>:root</code>) хук работает как обычно: портал лежит в <code>body</code>.
    </p>

    <p class="showcase-demo-text text-sm">
      <b>Источник</b> — поведение, поэтому проп <code>matchWidth</code>. Оси сочетаются, но
      разрешаются по-разному, и это следствие CSS: «по триггеру» с потолком даёт
      <b>352px</b> — <code>width</code> от триггера срезан <code>max-width</code>;
      «минимум — триггер» даёт <b>416px</b>, потому что <code>min-width</code> в CSS сильнее
      <code>max-width</code>. Пол выигрывает у потолка — и это смысл режима, а не изъян:
      <code>min</code> задаёт нижнюю границу ширины, а не саму ширину. Переключите оба и сравните
      числа.
    </p>

    <p class="showcase-demo-text text-sm">
      <b>Не шире вьюпорта</b> не настраивается ничем: <code>calc(100vw - 1rem)</code> стоит вторым
      операндом <code>min()</code>, и снятый потолок его не отменяет — сузьте окно и убедитесь.
    </p>
  </div>
</template>

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

import { GrButton, GrPopover, GrSegmented } from '@feugene/granularity'

/**
 * Высота устроена как ширина — `min()` из хука и неотключаемого предела, — но
 * второй операнд здесь не константа, а замер слоя: сколько места осталось до
 * края вьюпорта на той стороне, куда панель встала.
 *
 * Содержимое намеренно длинное: пока потолок не упёрся, не видно ни его, ни
 * скролла, и демонстрировать было бы нечего.
 */
const ceiling = ref<'auto' | 'short'>('auto')

const ceilingOptions = [
  { value: 'auto', label: 'Мнения нет' },
  { value: 'short', label: 'Потолок 12rem' },
]

const ROWS = Array.from({ length: 24 }, (_, i) => `Строка ${i + 1} — содержимое, которого заведомо больше, чем экрана`)
</script>

<template>
  <div class="grid gap-4">
    <label class="grid gap-1 text-[length:var(--gr-control-text-sm)]">
      <span class="showcase-demo-text">Потолок содержимого — хук</span>
      <GrSegmented v-model="ceiling" :options="ceilingOptions" size="sm" />
    </label>

    <div>
      <GrPopover
        :key="ceiling"
        :content-class="ceiling === 'short' ? '[--gr-popover-max-height:12rem]' : undefined"
        placement="bottom-start"
        aria-label="Высота панели"
        size="sm"
      >
        <template #trigger="{ triggerProps }">
          <GrButton variant="outline" v-bind="triggerProps">
            Открыть длинную панель — 24 строки
          </GrButton>
        </template>

        <template #content>
          <div class="grid gap-1 text-[var(--gr-fg)]">
            <div v-for="row in ROWS" :key="row">{{ row }}</div>
          </div>
        </template>
      </GrPopover>
    </div>

    <p class="showcase-demo-text text-sm">
      <b>Не выше, чем есть места</b> — предел, который не настраивается. Слой пишет на панель замер
      <code>--gr-floating-available-height</code>: расстояние до края вьюпорта на той стороне, куда
      панель в итоге встала. Он стоит вторым операндом <code>min()</code> и снаружи не снимается.

      <br><br>

      Прокрутите страницу так, чтобы триггер оказался у нижнего края, и откройте снова: панель
      сожмётся под оставшееся место, а не уедет за экран. <code>flip</code> перевернёт её на
      свободную сторону, <code>shift</code> подвинет вдоль края — но сжать её не может ни тот, ни
      другой, и без этого предела низ длинной панели был бы недостижим ничем.
    </p>

    <p class="showcase-demo-text text-sm">
      <b>Потолок содержимого</b> — хук <code>--gr-popover-max-height</code>, по умолчанию
      <code>100vh</code>, то есть мнения нет: высоту диктует замер. Задают его, когда панель обязана
      быть <b>ниже</b> доступного места. Доставляется через <code>contentClass</code> по той же
      причине, что и потолок ширины: панель живёт в портале, и инлайновый стиль ляжет на обёртку
      триггера, а не на неё.

      <br><br>

      <b>Скролл приезжает вместе с потолком.</b> Потолок без скролла не ограничивает, а обрезает —
      содержимое молча уходит под нижний край. Пока потолок не упёрся, полосы прокрутки нет: для
      коротких панелей не меняется ничего.
    </p>
  </div>
</template>

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

import { GrButton, GrPopover, GrSegmented } from '@feugene/granularity'

/**
 * Чем открывается панель и что считается триггером.
 *
 * Второй пример здесь важнее первого: он показывает не возможность, а границу.
 * Триггером считается элемент с `triggerProps`, а не весь слот, — и увидеть это
 * можно только рядом с соседней кнопкой, которая панель не открывает.
 */
const mode = ref<'click' | 'hover'>('click')

const modeOptions = [
  { value: 'click', label: 'По клику' },
  { value: 'hover', label: 'По наведению' },
]

const saved = ref(0)
</script>

<template>
  <div class="grid gap-5">
    <div class="grid gap-2">
      <label class="grid gap-1 text-[length:var(--gr-control-text-sm)]">
        <span class="showcase-demo-text">Чем открывается</span>
        <GrSegmented v-model="mode" :options="modeOptions" size="sm" />
      </label>

      <div>
        <GrPopover
          :key="mode"
          :trigger="mode"
          :open-delay="120"
          :close-delay="160"
          placement="bottom-start"
          aria-label="Режим открытия"
          size="sm"
        >
          <template #trigger="{ triggerProps }">
            <GrButton variant="outline" v-bind="triggerProps">
              {{ mode === 'hover' ? 'Наведите курсор' : 'Нажмите' }}
            </GrButton>
          </template>

          <template #content>
            <div class="w-56 text-[var(--gr-fg)]">
              Панель держится, пока курсор на ней: задержка закрытия даёт перейти
              с триггера через зазор.
            </div>
          </template>
        </GrPopover>
      </div>

      <p class="showcase-demo-text text-sm">
        <code>openDelay</code> и <code>closeDelay</code> нужны обе: без первой панель выпрыгивает на
        любое пересечение курсором, без второй её не удержать при переходе с триггера на панель —
        между ними зазор <code>offsetPx</code>. Клик в режиме наведения продолжает работать: с
        клавиатуры и с тачскрина наведения не бывает.
      </p>
    </div>

    <div class="grid gap-2">
      <span class="showcase-demo-text text-[length:var(--gr-control-text-sm)]">
        Триггер — элемент с <code>triggerProps</code>, а не весь слот
      </span>

      <GrPopover placement="bottom-start" aria-label="Что считается триггером" size="sm">
        <template #trigger="{ triggerProps }">
          <div class="flex items-center gap-2">
            <GrButton variant="outline" v-bind="triggerProps">Открыть панель</GrButton>
            <GrButton variant="ghost" @click="saved += 1">Сохранить</GrButton>
          </div>
        </template>

        <template #content>
          <div class="w-56 text-[var(--gr-fg)]">Открыла только левая кнопка.</div>
        </template>
      </GrPopover>

      <p class="showcase-demo-text text-sm">
        Обе кнопки лежат внутри слота <code>#trigger</code>, но панель открывает только левая.
        «Сохранить» делает своё дело — счётчик: <b>{{ saved }}</b> — и панели не касается.
        Клик живёт в <code>triggerProps</code>, а не на обёртке слота: иначе кнопка рядом,
        ссылка в карточке-триггере или крестик на чипе открывали бы панель мимо намерения.
      </p>

      <p class="showcase-demo-text text-sm">
        Слот без <code>v-bind="triggerProps"</code> по-прежнему открывается кликом по обёртке —
        так работало раньше, и это не отняли. Но такой триггер остаётся без клавиатуры и без
        <code>aria-haspopup</code>/<code>aria-expanded</code>, поэтому в dev-сборке компонент
        предупреждает о нём в консоли.
      </p>
    </div>
  </div>
</template>