#Sheet

<script setup lang="ts">
import { BrButton, BrSheet, BrSheetTrigger, BrSheetContent, BrSheetHeader, BrSheetTitle, BrSheetDescription, BrSheetFooter, BrSheetClose } from '@breezeui/vue'
</script>

<template>
  <BrSheet>
    <BrSheetTrigger as-child>
      <BrButton variant="outline">Open Sheet</BrButton>
    </BrSheetTrigger>
    <BrSheetContent>
      <BrSheetHeader>
        <BrSheetTitle>Edit Profile</BrSheetTitle>
        <BrSheetDescription>
          Make changes to your profile here. Click save when you're done.
        </BrSheetDescription>
      </BrSheetHeader>
      <div class="grid gap-4 py-4">
        <div class="h-32 rounded-md border border-dashed flex items-center justify-center text-muted-foreground text-sm">
          Form Content
        </div>
      </div>
      <BrSheetFooter>
        <BrSheetClose as-child>
          <BrButton type="submit">Save changes</BrButton>
        </BrSheetClose>
      </BrSheetFooter>
    </BrSheetContent>
  </BrSheet>
</template>

<script setup lang="ts">
import { BrButton, BrSheet, BrSheetTrigger, BrSheetContent, BrSheetHeader, BrSheetTitle } from '@breezeui/vue'

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

<template>
  <div class="flex flex-wrap gap-4">
    <BrSheet v-for="side in sides" :key="side">
      <BrSheetTrigger as-child>
        <BrButton variant="outline" class="capitalize">{{ side }}</BrButton>
      </BrSheetTrigger>
      <BrSheetContent :side="side">
        <BrSheetHeader>
          <BrSheetTitle>Sheet - {{ side }}</BrSheetTitle>
        </BrSheetHeader>
        <div class="py-4 text-sm text-muted-foreground">
          Sheet content sliding from the {{ side }}.
        </div>
      </BrSheetContent>
    </BrSheet>
  </div>
</template>

<script setup lang="ts">
import { BrButton, BrSheet, BrSheetTrigger, BrSheetContent, BrSheetHeader, BrSheetTitle } from '@breezeui/vue'
</script>

<template>
  <div class="flex flex-wrap gap-4">
    <BrSheet>
      <BrSheetTrigger as-child>
        <BrButton variant="outline">Custom Width (700px)</BrButton>
      </BrSheetTrigger>
      <BrSheetContent class="sm:max-w-[700px]">
        <BrSheetHeader>
          <BrSheetTitle>Wide Sheet</BrSheetTitle>
        </BrSheetHeader>
        <div class="py-4 text-sm text-muted-foreground leading-relaxed">
          Customize the maximum width of the sheet on large screens using the Tailwind class <code>sm:max-w-[700px]</code>. This is useful when you need to display wider forms or complex data.
        </div>
      </BrSheetContent>
    </BrSheet>

    <BrSheet>
      <BrSheetTrigger as-child>
        <BrButton variant="outline">Full Screen Sheet</BrButton>
      </BrSheetTrigger>
      <BrSheetContent class="w-screen sm:max-w-none">
        <BrSheetHeader>
          <BrSheetTitle>Full Screen Display</BrSheetTitle>
        </BrSheetHeader>
        <div class="py-4 text-sm text-muted-foreground leading-relaxed">
          Override the default max-width limit with <code>w-screen sm:max-w-none</code> to make the sheet occupy the entire screen.
        </div>
      </BrSheetContent>
    </BrSheet>
  </div>
</template>

<script setup lang="ts">
import { BrButton, BrSheet, BrSheetTrigger, BrSheetContent, BrSheetHeader, BrSheetTitle, BrScrollArea } from '@breezeui/vue'
</script>

<template>
  <BrSheet>
    <BrSheetTrigger as-child>
      <BrButton variant="outline">With Long Content</BrButton>
    </BrSheetTrigger>
    <BrSheetContent class="flex flex-col">
      <BrSheetHeader>
        <BrSheetTitle>Terms of Service</BrSheetTitle>
      </BrSheetHeader>
      
      <BrScrollArea class="flex-1 -mx-6 px-6 mt-4">
        <div class="space-y-4 pb-4">
          <p v-for="i in 10" :key="i" class="text-sm text-muted-foreground leading-relaxed">
            This is a placeholder text to demonstrate scrolling of long content. In a real application, detailed terms of service, privacy policies, or complex forms with many fields might be placed here. Using the BrScrollArea component ensures the content scrolls elegantly within the limited space, while keeping the header title fixed and visible. This is paragraph {{ i }}.
          </p>
        </div>
      </BrScrollArea>
    </BrSheetContent>
  </BrSheet>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { BrButton, BrSheet, BrSheetTrigger, BrSheetContent, BrSheetHeader, BrSheetTitle, BrSheetDescription, BrSheetFooter } from '@breezeui/vue'

const open = ref(false)
const loading = ref(false)

const handleSave = async () => {
  loading.value = true
  // 模拟异步请求
  await new Promise(resolve => setTimeout(resolve, 1500))
  loading.value = false
  open.value = false
}
</script>

<template>
  <BrSheet v-model:open="open">
    <BrSheetTrigger as-child>
      <BrButton variant="outline">Async Submit</BrButton>
    </BrSheetTrigger>
    <BrSheetContent 
      @interact-outside="(e) => loading && e.preventDefault()" 
      @escape-key-down="(e) => loading && e.preventDefault()"
    >
      <BrSheetHeader>
        <BrSheetTitle>Async Operation</BrSheetTitle>
        <BrSheetDescription>
          Clicking save will wait 1.5 seconds before closing the sheet. During this time, closing by clicking outside or pressing ESC is disabled.
        </BrSheetDescription>
      </BrSheetHeader>
      
      <div class="py-8 flex justify-center">
        <div v-if="loading" class="text-sm text-muted-foreground animate-pulse">
          Processing, please wait...
        </div>
        <div v-else class="text-sm text-muted-foreground">
          Ready, click save below to start.
        </div>
      </div>

      <BrSheetFooter>
        <BrButton :loading="loading" @click="handleSave">Save</BrButton>
      </BrSheetFooter>
    </BrSheetContent>
  </BrSheet>
</template>