robonen
aa2938cb34
Genuinely type composable any usages (useStepper/useStorage/useForm/ createEventHook/useSorted/etc.) as proper generics/unknown; keep idiomatic any-function and overload-impl signatures with comments; skipped test -> .todo.
74 lines
2.8 KiB
Vue
74 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { useTemplateRef } from 'vue';
|
|
import { useFullscreen } from './index';
|
|
|
|
const target = useTemplateRef<HTMLElement>('target');
|
|
const { isSupported, isFullscreen, enter, exit, toggle } = useFullscreen(target);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-stack max-w-sm">
|
|
<div
|
|
v-if="!isSupported"
|
|
class="rounded-xl border border-amber-500/30 bg-amber-500/10 p-4 text-center text-sm text-amber-600 dark:text-amber-400"
|
|
>
|
|
The Fullscreen API is not supported in this browser.
|
|
</div>
|
|
|
|
<div
|
|
ref="target"
|
|
class="demo-card relative flex h-44 flex-col items-center justify-center gap-3 overflow-hidden transition-colors"
|
|
:class="isFullscreen && 'bg-bg-inset'"
|
|
>
|
|
<span
|
|
class="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-xs font-medium"
|
|
:class="isFullscreen
|
|
? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
|
|
: 'border-border bg-bg-inset text-fg-muted'"
|
|
>
|
|
<span class="size-1.5 rounded-full" :class="isFullscreen ? 'bg-emerald-500' : 'bg-fg-subtle'" />
|
|
{{ isFullscreen ? 'Fullscreen' : 'Windowed' }}
|
|
</span>
|
|
|
|
<p class="px-6 text-center text-sm text-fg-muted">
|
|
This panel becomes the fullscreen target. Press
|
|
<kbd class="rounded border border-border bg-bg px-1.5 py-0.5 font-mono text-xs text-fg">Esc</kbd>
|
|
to leave.
|
|
</p>
|
|
|
|
<button
|
|
class="demo-btn-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
|
|
:disabled="!isSupported"
|
|
@click="toggle"
|
|
>
|
|
<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<template v-if="isFullscreen">
|
|
<path d="M8 3v3a2 2 0 0 1-2 2H3" /><path d="M21 8h-3a2 2 0 0 1-2-2V3" /><path d="M3 16h3a2 2 0 0 1 2 2v3" /><path d="M16 21v-3a2 2 0 0 1 2-2h3" />
|
|
</template>
|
|
<template v-else>
|
|
<path d="M8 3H5a2 2 0 0 0-2 2v3" /><path d="M21 8V5a2 2 0 0 0-2-2h-3" /><path d="M3 16v3a2 2 0 0 0 2 2h3" /><path d="M16 21h3a2 2 0 0 0 2-2v-3" />
|
|
</template>
|
|
</svg>
|
|
{{ isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen' }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex gap-2">
|
|
<button
|
|
class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
|
|
:disabled="!isSupported || isFullscreen"
|
|
@click="enter"
|
|
>
|
|
Enter
|
|
</button>
|
|
<button
|
|
class="demo-btn flex-1 disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100"
|
|
:disabled="!isSupported || !isFullscreen"
|
|
@click="exit"
|
|
>
|
|
Exit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|