57 lines
17 KiB
JSON
57 lines
17 KiB
JSON
{
|
|
"name": "Sidebar07",
|
|
"type": "registry:block",
|
|
"dependencies": [],
|
|
"registryDependencies": [
|
|
"AppSidebar.vue",
|
|
"breadcrumb",
|
|
"separator",
|
|
"sidebar",
|
|
"NavMain.vue",
|
|
"NavProjects.vue",
|
|
"NavUser.vue",
|
|
"TeamSwitcher.vue",
|
|
"collapsible",
|
|
"dropdown-menu",
|
|
"avatar"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "block/Sidebar07/page.vue",
|
|
"content": "<script lang=\"ts\">\nexport const description\n = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar07/components/AppSidebar.vue'\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n <SidebarProvider>\n <AppSidebar />\n <SidebarInset>\n <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n <div class=\"flex items-center gap-2 px-4\">\n <SidebarTrigger class=\"-ml-1\" />\n <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem class=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">\n Building Your Application\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator class=\"hidden md:block\" />\n <BreadcrumbItem>\n <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </div>\n </header>\n <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n <div class=\"aspect-video rounded-xl bg-muted/50\" />\n <div class=\"aspect-video rounded-xl bg-muted/50\" />\n <div class=\"aspect-video rounded-xl bg-muted/50\" />\n </div>\n <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n </div>\n </SidebarInset>\n </SidebarProvider>\n</template>\n",
|
|
"type": "registry:page",
|
|
"target": "pages/dashboard/index.vue"
|
|
},
|
|
{
|
|
"path": "block/Sidebar07/components/AppSidebar.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport type { SidebarProps } from '@/registry/default/ui/sidebar'\n\nimport NavMain from '@/registry/default/block/Sidebar07/components/NavMain.vue'\nimport NavProjects from '@/registry/default/block/Sidebar07/components/NavProjects.vue'\nimport NavUser from '@/registry/default/block/Sidebar07/components/NavUser.vue'\nimport TeamSwitcher from '@/registry/default/block/Sidebar07/components/TeamSwitcher.vue'\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarHeader,\n SidebarRail,\n} from '@/registry/default/ui/sidebar'\n\nimport {\n AudioWaveform,\n BookOpen,\n Bot,\n Command,\n Frame,\n GalleryVerticalEnd,\n Map,\n PieChart,\n Settings2,\n SquareTerminal,\n} from 'lucide-vue-next'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n collapsible: 'icon',\n})\n\n// This is sample data.\nconst data = {\n user: {\n name: 'shadcn',\n email: 'm@example.com',\n avatar: '/avatars/shadcn.jpg',\n },\n teams: [\n {\n name: 'Acme Inc',\n logo: GalleryVerticalEnd,\n plan: 'Enterprise',\n },\n {\n name: 'Acme Corp.',\n logo: AudioWaveform,\n plan: 'Startup',\n },\n {\n name: 'Evil Corp.',\n logo: Command,\n plan: 'Free',\n },\n ],\n navMain: [\n {\n title: 'Playground',\n url: '#',\n icon: SquareTerminal,\n isActive: true,\n items: [\n {\n title: 'History',\n url: '#',\n },\n {\n title: 'Starred',\n url: '#',\n },\n {\n title: 'Settings',\n url: '#',\n },\n ],\n },\n {\n title: 'Models',\n url: '#',\n icon: Bot,\n items: [\n {\n title: 'Genesis',\n url: '#',\n },\n {\n title: 'Explorer',\n url: '#',\n },\n {\n title: 'Quantum',\n url: '#',\n },\n ],\n },\n {\n title: 'Documentation',\n url: '#',\n icon: BookOpen,\n items: [\n {\n title: 'Introduction',\n url: '#',\n },\n {\n title: 'Get Started',\n url: '#',\n },\n {\n title: 'Tutorials',\n url: '#',\n },\n {\n title: 'Changelog',\n url: '#',\n },\n ],\n },\n {\n title: 'Settings',\n url: '#',\n icon: Settings2,\n items: [\n {\n title: 'General',\n url: '#',\n },\n {\n title: 'Team',\n url: '#',\n },\n {\n title: 'Billing',\n url: '#',\n },\n {\n title: 'Limits',\n url: '#',\n },\n ],\n },\n ],\n projects: [\n {\n name: 'Design Engineering',\n url: '#',\n icon: Frame,\n },\n {\n name: 'Sales & Marketing',\n url: '#',\n icon: PieChart,\n },\n {\n name: 'Travel',\n url: '#',\n icon: Map,\n },\n ],\n}\n</script>\n\n<template>\n <Sidebar v-bind=\"props\">\n <SidebarHeader>\n <TeamSwitcher :teams=\"data.teams\" />\n </SidebarHeader>\n <SidebarContent>\n <NavMain :items=\"data.navMain\" />\n <NavProjects :projects=\"data.projects\" />\n </SidebarContent>\n <SidebarFooter>\n <NavUser :user=\"data.user\" />\n </SidebarFooter>\n <SidebarRail />\n </Sidebar>\n</template>\n",
|
|
"type": "registry:component",
|
|
"target": ""
|
|
},
|
|
{
|
|
"path": "block/Sidebar07/components/NavMain.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n SidebarGroup,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, type LucideIcon } from 'lucide-vue-next'\n\ndefineProps<{\n items: {\n title: string\n url: string\n icon?: LucideIcon\n isActive?: boolean\n items?: {\n title: string\n url: string\n }[]\n }[]\n}>()\n</script>\n\n<template>\n <SidebarGroup>\n <SidebarGroupLabel>Platform</SidebarGroupLabel>\n <SidebarMenu>\n <Collapsible\n v-for=\"item in items\"\n :key=\"item.title\"\n as-child\n :default-open=\"item.isActive\"\n class=\"group/collapsible\"\n >\n <SidebarMenuItem>\n <CollapsibleTrigger as-child>\n <SidebarMenuButton :tooltip=\"item.title\">\n <component :is=\"item.icon\" v-if=\"item.icon\" />\n <span>{{ item.title }}</span>\n <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n </SidebarMenuButton>\n </CollapsibleTrigger>\n <CollapsibleContent>\n <SidebarMenuSub>\n <SidebarMenuSubItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n <SidebarMenuSubButton as-child>\n <a :href=\"subItem.url\">\n <span>{{ subItem.title }}</span>\n </a>\n </SidebarMenuSubButton>\n </SidebarMenuSubItem>\n </SidebarMenuSub>\n </CollapsibleContent>\n </SidebarMenuItem>\n </Collapsible>\n </SidebarMenu>\n </SidebarGroup>\n</template>\n",
|
|
"type": "registry:component",
|
|
"target": ""
|
|
},
|
|
{
|
|
"path": "block/Sidebar07/components/NavProjects.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n SidebarGroup,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n Folder,\n Forward,\n type LucideIcon,\n MoreHorizontal,\n Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n projects: {\n name: string\n url: string\n icon: LucideIcon\n }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n <SidebarGroupLabel>Projects</SidebarGroupLabel>\n <SidebarMenu>\n <SidebarMenuItem v-for=\"item in projects\" :key=\"item.name\">\n <SidebarMenuButton as-child>\n <a :href=\"item.url\">\n <component :is=\"item.icon\" />\n <span>{{ item.name }}</span>\n </a>\n </SidebarMenuButton>\n <DropdownMenu>\n <DropdownMenuTrigger as-child>\n <SidebarMenuAction show-on-hover>\n <MoreHorizontal />\n <span class=\"sr-only\">More</span>\n </SidebarMenuAction>\n </DropdownMenuTrigger>\n <DropdownMenuContent\n class=\"w-48 rounded-lg\"\n :side=\"isMobile ? 'bottom' : 'right'\"\n :align=\"isMobile ? 'end' : 'start'\"\n >\n <DropdownMenuItem>\n <Folder class=\"text-muted-foreground\" />\n <span>View Project</span>\n </DropdownMenuItem>\n <DropdownMenuItem>\n <Forward class=\"text-muted-foreground\" />\n <span>Share Project</span>\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n <Trash2 class=\"text-muted-foreground\" />\n <span>Delete Project</span>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </SidebarMenuItem>\n <SidebarMenuItem>\n <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n <span>More</span>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroup>\n</template>\n",
|
|
"type": "registry:component",
|
|
"target": ""
|
|
},
|
|
{
|
|
"path": "block/Sidebar07/components/NavUser.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from 'lucide-vue-next'\n\nconst props = defineProps<{\n user: {\n name: string\n email: string\n avatar: string\n }\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n <SidebarMenu>\n <SidebarMenuItem>\n <DropdownMenu>\n <DropdownMenuTrigger as-child>\n <SidebarMenuButton\n size=\"lg\"\n class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n >\n <Avatar class=\"h-8 w-8 rounded-lg\">\n <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n <AvatarFallback class=\"rounded-lg\">\n CN\n </AvatarFallback>\n </Avatar>\n <div class=\"grid flex-1 text-left text-sm leading-tight\">\n <span class=\"truncate font-semibold\">{{ user.name }}</span>\n <span class=\"truncate text-xs\">{{ user.email }}</span>\n </div>\n <ChevronsUpDown class=\"ml-auto size-4\" />\n </SidebarMenuButton>\n </DropdownMenuTrigger>\n <DropdownMenuContent\n class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n :side=\"isMobile ? 'bottom' : 'right'\"\n align=\"end\"\n :side-offset=\"4\"\n >\n <DropdownMenuLabel class=\"p-0 font-normal\">\n <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n <Avatar class=\"h-8 w-8 rounded-lg\">\n <AvatarImage :src=\"user.avatar\" :alt=\"user.name\" />\n <AvatarFallback class=\"rounded-lg\">\n CN\n </AvatarFallback>\n </Avatar>\n <div class=\"grid flex-1 text-left text-sm leading-tight\">\n <span class=\"truncate font-semibold\">{{ user.name }}</span>\n <span class=\"truncate text-xs\">{{ user.email }}</span>\n </div>\n </div>\n </DropdownMenuLabel>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <Sparkles />\n Upgrade to Pro\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <BadgeCheck />\n Account\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CreditCard />\n Billing\n </DropdownMenuItem>\n <DropdownMenuItem>\n <Bell />\n Notifications\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n <LogOut />\n Log out\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </SidebarMenuItem>\n </SidebarMenu>\n</template>\n",
|
|
"type": "registry:component",
|
|
"target": ""
|
|
},
|
|
{
|
|
"path": "block/Sidebar07/components/TeamSwitcher.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronsUpDown, Plus } from 'lucide-vue-next'\n\nimport { type Component, ref } from 'vue'\n\nconst props = defineProps<{\n teams: {\n name: string\n logo: Component\n plan: string\n }[]\n}>()\n\nconst { isMobile } = useSidebar()\nconst activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n <SidebarMenu>\n <SidebarMenuItem>\n <DropdownMenu>\n <DropdownMenuTrigger as-child>\n <SidebarMenuButton\n size=\"lg\"\n class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n >\n <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n <component :is=\"activeTeam.logo\" class=\"size-4\" />\n </div>\n <div class=\"grid flex-1 text-left text-sm leading-tight\">\n <span class=\"truncate font-semibold\">\n {{ activeTeam.name }}\n </span>\n <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n </div>\n <ChevronsUpDown class=\"ml-auto\" />\n </SidebarMenuButton>\n </DropdownMenuTrigger>\n <DropdownMenuContent\n class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n align=\"start\"\n :side=\"isMobile ? 'bottom' : 'right'\"\n :side-offset=\"4\"\n >\n <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n Teams\n </DropdownMenuLabel>\n <DropdownMenuItem\n v-for=\"(team, index) in teams\"\n :key=\"team.name\"\n class=\"gap-2 p-2\"\n @click=\"activeTeam = team\"\n >\n <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n </div>\n {{ team.name }}\n <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem class=\"gap-2 p-2\">\n <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n <Plus class=\"size-4\" />\n </div>\n <div class=\"font-medium text-muted-foreground\">\n Add team\n </div>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </SidebarMenuItem>\n </SidebarMenu>\n</template>\n",
|
|
"type": "registry:component",
|
|
"target": ""
|
|
}
|
|
]
|
|
}
|