34 lines
982 B
Svelte
34 lines
982 B
Svelte
<script lang="ts">
|
|
import * as Dialog from '$lib/components/ui/dialog';
|
|
import * as Sheet from '$lib/components/ui/sheet';
|
|
import { IsMobile } from '$lib/hooks/is-mobile.svelte.js';
|
|
import { cn } from '$lib/utils.js';
|
|
import type { Snippet } from 'svelte';
|
|
|
|
interface Props {
|
|
children: Snippet;
|
|
class?: string;
|
|
/** 移动端 Sheet 的方向，默认 bottom */
|
|
side?: 'top' | 'bottom' | 'left' | 'right';
|
|
}
|
|
|
|
let { children, class: className, side = 'bottom' }: Props = $props();
|
|
|
|
const isMobile = new IsMobile();
|
|
</script>
|
|
|
|
{#if isMobile.current}
|
|
<Sheet.Content
|
|
{side}
|
|
class={cn('max-h-[90vh] overflow-y-auto flex flex-col', className)}
|
|
>
|
|
<!-- 拖拽指示器 (移动端抽屉常见设计) -->
|
|
<div class="mx-auto mt-2 h-1.5 w-12 shrink-0 rounded-full bg-muted"></div>
|
|
{@render children?.()}
|
|
</Sheet.Content>
|
|
{:else}
|
|
<Dialog.Content class={cn('max-h-[85vh] overflow-y-auto flex flex-col', className)}>
|
|
{@render children?.()}
|
|
</Dialog.Content>
|
|
{/if}
|