SidebarInset.vue 602 B

123456789101112131415161718192021
  1. <script setup lang="ts">
  2. import type { HTMLAttributes } from "vue"
  3. import { cn } from '@/Packages/Shadcn/Lib/utils'
  4. const props = defineProps<{
  5. class?: HTMLAttributes["class"]
  6. }>()
  7. </script>
  8. <template>
  9. <main
  10. data-slot="sidebar-inset"
  11. :class="cn(
  12. 'bg-background relative flex w-full flex-1 flex-col',
  13. 'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
  14. props.class,
  15. )"
  16. >
  17. <slot />
  18. </main>
  19. </template>