35 lines
8.5 KiB
JSON
35 lines
8.5 KiB
JSON
{
|
|
"name": "Sidebar05",
|
|
"type": "registry:block",
|
|
"dependencies": [],
|
|
"registryDependencies": [
|
|
"AppSidebar.vue",
|
|
"breadcrumb",
|
|
"separator",
|
|
"sidebar",
|
|
"SearchForm.vue",
|
|
"collapsible",
|
|
"label"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "block/Sidebar05/page.vue",
|
|
"content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible submenus.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar01/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 border-b 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 </header>\n <div class=\"flex flex-1 flex-col gap-4 p-4\">\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/Sidebar05/components/AppSidebar.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/default/block/Sidebar05/components/SearchForm.vue'\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarHeader,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n type SidebarProps,\n SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport { GalleryVerticalEnd, Minus, Plus } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n navMain: [\n {\n title: 'Getting Started',\n url: '#',\n items: [\n {\n title: 'Installation',\n url: '#',\n },\n {\n title: 'Project Structure',\n url: '#',\n },\n ],\n },\n {\n title: 'Building Your Application',\n url: '#',\n items: [\n {\n title: 'Routing',\n url: '#',\n },\n {\n title: 'Data Fetching',\n url: '#',\n isActive: true,\n },\n {\n title: 'Rendering',\n url: '#',\n },\n {\n title: 'Caching',\n url: '#',\n },\n {\n title: 'Styling',\n url: '#',\n },\n {\n title: 'Optimizing',\n url: '#',\n },\n {\n title: 'Configuring',\n url: '#',\n },\n {\n title: 'Testing',\n url: '#',\n },\n {\n title: 'Authentication',\n url: '#',\n },\n {\n title: 'Deploying',\n url: '#',\n },\n {\n title: 'Upgrading',\n url: '#',\n },\n {\n title: 'Examples',\n url: '#',\n },\n ],\n },\n {\n title: 'API Reference',\n url: '#',\n items: [\n {\n title: 'Components',\n url: '#',\n },\n {\n title: 'File Conventions',\n url: '#',\n },\n {\n title: 'Functions',\n url: '#',\n },\n {\n title: 'next.config.js Options',\n url: '#',\n },\n {\n title: 'CLI',\n url: '#',\n },\n {\n title: 'Edge Runtime',\n url: '#',\n },\n ],\n },\n {\n title: 'Architecture',\n url: '#',\n items: [\n {\n title: 'Accessibility',\n url: '#',\n },\n {\n title: 'Fast Refresh',\n url: '#',\n },\n {\n title: 'Next.js Compiler',\n url: '#',\n },\n {\n title: 'Supported Browsers',\n url: '#',\n },\n {\n title: 'Turbopack',\n url: '#',\n },\n ],\n },\n {\n title: 'Community',\n url: '#',\n items: [\n {\n title: 'Contribution Guide',\n url: '#',\n },\n ],\n },\n ],\n}\n</script>\n\n<template>\n <Sidebar v-bind=\"props\">\n <SidebarHeader>\n <SidebarMenu>\n <SidebarMenuItem>\n <SidebarMenuButton size=\"lg\" as-child>\n <a href=\"#\">\n <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n <GalleryVerticalEnd class=\"size-4\" />\n </div>\n <div class=\"flex flex-col gap-0.5 leading-none\">\n <span class=\"font-semibold\">Documentation</span>\n <span class=\"\">v1.0.0</span>\n </div>\n </a>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n <SearchForm />\n </SidebarHeader>\n <SidebarContent>\n <SidebarGroup>\n <SidebarMenu>\n <Collapsible\n v-for=\"(item, index) in data.navMain\"\n :key=\"item.title\"\n :default-open=\"index === 1\"\n class=\"group/collapsible\"\n >\n <SidebarMenuItem>\n <CollapsibleTrigger as-child>\n <SidebarMenuButton>\n {{ item.title }}\n <Plus class=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n <Minus class=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n </SidebarMenuButton>\n </CollapsibleTrigger>\n <CollapsibleContent v-if=\"item.items.length\">\n <SidebarMenuSub>\n <SidebarMenuSubItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n <SidebarMenuSubButton\n as-child\n :is-active=\"childItem.isActive\"\n >\n <a :href=\"childItem.url\">{{ childItem.title }}</a>\n </SidebarMenuSubButton>\n </SidebarMenuSubItem>\n </SidebarMenuSub>\n </CollapsibleContent>\n </SidebarMenuItem>\n </Collapsible>\n </SidebarMenu>\n </SidebarGroup>\n </SidebarContent>\n <SidebarRail />\n </Sidebar>\n</template>\n",
|
|
"type": "registry:component",
|
|
"target": ""
|
|
},
|
|
{
|
|
"path": "block/Sidebar05/components/SearchForm.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarInput,\n} from '@/registry/default/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n <form>\n <SidebarGroup class=\"py-0\">\n <SidebarGroupContent class=\"relative\">\n <Label for=\"search\" class=\"sr-only\">\n Search\n </Label>\n <SidebarInput\n id=\"search\"\n placeholder=\"Search the docs...\"\n class=\"pl-8\"\n />\n <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n </SidebarGroupContent>\n </SidebarGroup>\n </form>\n</template>\n",
|
|
"type": "registry:component",
|
|
"target": ""
|
|
}
|
|
]
|
|
}
|