#Container 容器

<script setup lang="ts">
import { BrContainer } from '@breezeui/vue'
</script>

<template>
  <div class="w-full bg-muted/30 p-4 rounded-md">
    <BrContainer class="bg-primary/10 border border-primary/20 py-4 rounded-md">
      <p class="text-center text-primary font-medium">Basic Centered Container</p>
      <p class="text-center text-sm text-primary/80 mt-2">Restricts maximum width and centers display by default</p>
    </BrContainer>
  </div>
</template>

<script setup lang="ts">
import { BrContainer } from '@breezeui/vue'
</script>

<template>
  <div class="w-full bg-muted/30 p-4 rounded-md space-y-4 flex flex-col items-center">
    <BrContainer max-width="sm" class="bg-primary/10 border border-primary/20 py-2 rounded-md">
      <p class="text-center text-primary text-sm">sm (max-w-screen-sm)</p>
    </BrContainer>
    
    <BrContainer max-width="md" class="bg-primary/10 border border-primary/20 py-2 rounded-md">
      <p class="text-center text-primary text-sm">md (max-w-screen-md)</p>
    </BrContainer>

    <BrContainer max-width="lg" class="bg-primary/10 border border-primary/20 py-2 rounded-md">
      <p class="text-center text-primary text-sm">lg (max-w-screen-lg)</p>
    </BrContainer>
  </div>
</template>

<script setup lang="ts">
import { BrContainer } from '@breezeui/vue'
</script>

<template>
  <div class="w-full bg-muted/30 p-4 rounded-md">
    <BrContainer fluid class="bg-success/10 border border-success/20 py-4 rounded-md">
      <p class="text-center text-success font-medium">Fluid Layout Container</p>
      <p class="text-center text-sm text-success/80 mt-2">Width 100%，No maximum width restriction</p>
    </BrContainer>
  </div>
</template>

<script setup lang="ts">
import { BrContainer } from '@breezeui/vue'
</script>

<template>
  <div class="w-full bg-muted/30 p-4 rounded-md space-y-4">
    <BrContainer padding="none" max-width="md" class="bg-warning/10 border border-warning/20 py-2 rounded-md">
      <div class="bg-warning/20 h-8 flex items-center justify-center text-warning text-sm">No padding (padding="none")</div>
    </BrContainer>
    
    <BrContainer padding="md" max-width="md" class="bg-info/10 border border-info/20 py-2 rounded-md">
      <div class="bg-info/20 h-8 flex items-center justify-center text-info text-sm">Medium padding (padding="md")</div>
    </BrContainer>

    <BrContainer padding="2xl" max-width="md" class="bg-primary/10 border border-primary/20 py-2 rounded-md">
      <div class="bg-primary/20 h-8 flex items-center justify-center text-primary text-sm">Extra large padding (padding="2xl")</div>
    </BrContainer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { BrContainer, BrConfigProvider, BrButton } from '@breezeui/vue'

const currentSizing = ref({
  md: { paddingX: '1rem', width: '768px' },
  lg: { paddingX: '2rem', width: '1024px' }
})

const toggleSizing = () => {
  if (currentSizing.value.md.paddingX === '1rem') {
    currentSizing.value = {
      md: { paddingX: '3rem', width: '600px' },
      lg: { paddingX: '4rem', width: '800px' }
    }
  } else {
    currentSizing.value = {
      md: { paddingX: '1rem', width: '768px' },
      lg: { paddingX: '2rem', width: '1024px' }
    }
  }
}
</script>

<template>
  <div class="space-y-4">
    <div class="flex gap-2">
      <BrButton @click="toggleSizing">Toggle global size config</BrButton>
    </div>
    
    <BrConfigProvider :sizing="currentSizing">
      <div class="w-full bg-muted/30 p-4 rounded-md space-y-4">
        <BrContainer max-width="md" padding="md" class="bg-primary/10 border border-primary/20 py-4 rounded-md transition-all duration-300">
          <p class="text-center text-primary font-medium">Use MD Container for size variables</p>
          <p class="text-center text-sm text-primary/80 mt-2">
            Current padding-x: {{ currentSizing.md.paddingX }} <br>
            Overridden --br-px-md Variable
          </p>
        </BrContainer>
        
        <BrContainer max-width="lg" padding="lg" class="bg-secondary border border-border py-4 rounded-md transition-all duration-300">
          <p class="text-center text-secondary-foreground font-medium">Use LG Container for size variables</p>
          <p class="text-center text-sm text-secondary-foreground/80 mt-2">
            Current padding-x: {{ currentSizing.lg.paddingX }} <br>
            Overridden --br-px-lg Variable
          </p>
        </BrContainer>
        
        <BrContainer class="bg-destructive/10 border border-destructive/20 py-4 rounded-md !px-0">
          <p class="text-center text-destructive font-medium">Local override style</p>
          <p class="text-center text-sm text-destructive/80 mt-2">Use TailwindCSS of !px-0 Force override padding</p>
        </BrContainer>
      </div>
    </BrConfigProvider>
  </div>
</template>

<template>
  <BrContainer class="!px-0 sm:!px-4 bg-primary/10">
    局部覆盖了内边距，并在 sm 断点下改变了内边�?  </BrContainer>
</template>