72 lines
21 KiB
JSON
72 lines
21 KiB
JSON
{
|
|
"name": "Sidebar10",
|
|
"type": "registry:block",
|
|
"dependencies": [],
|
|
"registryDependencies": [
|
|
"AppSidebar.vue",
|
|
"NavActions.vue",
|
|
"breadcrumb",
|
|
"separator",
|
|
"sidebar",
|
|
"NavFavorites.vue",
|
|
"NavMain.vue",
|
|
"NavSecondary.vue",
|
|
"NavWorkspaces.vue",
|
|
"TeamSwitcher.vue",
|
|
"button",
|
|
"popover",
|
|
"dropdown-menu",
|
|
"collapsible"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "block/Sidebar10/page.vue",
|
|
"content": "<script lang=\"ts\">\nexport const description = 'A sidebar in a popover.'\nexport const iframeHeight = '800px'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar10/components/AppSidebar.vue'\nimport NavActions from '@/registry/default/block/Sidebar10/components/NavActions.vue'\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbList,\n BreadcrumbPage,\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-14 shrink-0 items-center gap-2\">\n <div class=\"flex flex-1 items-center gap-2 px-3\">\n <SidebarTrigger />\n <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbPage class=\"line-clamp-1\">\n Project Management & Task Tracking\n </BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n </div>\n <div class=\"ml-auto px-3\">\n <NavActions />\n </div>\n </header>\n <div class=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n <div class=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n <div class=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n </div>\n </SidebarInset>\n </SidebarProvider>\n</template>\n",
|
|
"type": "registry:page",
|
|
"target": "pages/dashboard/index.vue"
|
|
},
|
|
{
|
|
"path": "block/Sidebar10/components/AppSidebar.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport NavFavorites from '@/registry/default/block/Sidebar10/components/NavFavorites.vue'\n\nimport NavMain from '@/registry/default/block/Sidebar10/components/NavMain.vue'\nimport NavSecondary from '@/registry/default/block/Sidebar10/components/NavSecondary.vue'\nimport NavWorkspaces from '@/registry/default/block/Sidebar10/components/NavWorkspaces.vue'\nimport TeamSwitcher from '@/registry/default/block/Sidebar10/components/TeamSwitcher.vue'\nimport {\n Sidebar,\n SidebarContent,\n SidebarHeader,\n type SidebarProps,\n SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport {\n AudioWaveform,\n Blocks,\n Calendar,\n Command,\n Home,\n Inbox,\n MessageCircleQuestion,\n Search,\n Settings2,\n Sparkles,\n Trash2,\n} from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n teams: [\n {\n name: 'Acme Inc',\n logo: Command,\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: 'Search',\n url: '#',\n icon: Search,\n },\n {\n title: 'Ask AI',\n url: '#',\n icon: Sparkles,\n },\n {\n title: 'Home',\n url: '#',\n icon: Home,\n isActive: true,\n },\n {\n title: 'Inbox',\n url: '#',\n icon: Inbox,\n badge: '10',\n },\n ],\n navSecondary: [\n {\n title: 'Calendar',\n url: '#',\n icon: Calendar,\n },\n {\n title: 'Settings',\n url: '#',\n icon: Settings2,\n },\n {\n title: 'Templates',\n url: '#',\n icon: Blocks,\n },\n {\n title: 'Trash',\n url: '#',\n icon: Trash2,\n },\n {\n title: 'Help',\n url: '#',\n icon: MessageCircleQuestion,\n },\n ],\n favorites: [\n {\n name: 'Project Management & Task Tracking',\n url: '#',\n emoji: '📊',\n },\n {\n name: 'Family Recipe Collection & Meal Planning',\n url: '#',\n emoji: '🍳',\n },\n {\n name: 'Fitness Tracker & Workout Routines',\n url: '#',\n emoji: '💪',\n },\n {\n name: 'Book Notes & Reading List',\n url: '#',\n emoji: '📚',\n },\n {\n name: 'Sustainable Gardening Tips & Plant Care',\n url: '#',\n emoji: '🌱',\n },\n {\n name: 'Language Learning Progress & Resources',\n url: '#',\n emoji: '🗣️',\n },\n {\n name: 'Home Renovation Ideas & Budget Tracker',\n url: '#',\n emoji: '🏠',\n },\n {\n name: 'Personal Finance & Investment Portfolio',\n url: '#',\n emoji: '💰',\n },\n {\n name: 'Movie & TV Show Watchlist with Reviews',\n url: '#',\n emoji: '🎬',\n },\n {\n name: 'Daily Habit Tracker & Goal Setting',\n url: '#',\n emoji: '✅',\n },\n ],\n workspaces: [\n {\n name: 'Personal Life Management',\n emoji: '🏠',\n pages: [\n {\n name: 'Daily Journal & Reflection',\n url: '#',\n emoji: '📔',\n },\n {\n name: 'Health & Wellness Tracker',\n url: '#',\n emoji: '🍏',\n },\n {\n name: 'Personal Growth & Learning Goals',\n url: '#',\n emoji: '🌟',\n },\n ],\n },\n {\n name: 'Professional Development',\n emoji: '💼',\n pages: [\n {\n name: 'Career Objectives & Milestones',\n url: '#',\n emoji: '🎯',\n },\n {\n name: 'Skill Acquisition & Training Log',\n url: '#',\n emoji: '🧠',\n },\n {\n name: 'Networking Contacts & Events',\n url: '#',\n emoji: '🤝',\n },\n ],\n },\n {\n name: 'Creative Projects',\n emoji: '🎨',\n pages: [\n {\n name: 'Writing Ideas & Story Outlines',\n url: '#',\n emoji: '✍️',\n },\n {\n name: 'Art & Design Portfolio',\n url: '#',\n emoji: '🖼️',\n },\n {\n name: 'Music Composition & Practice Log',\n url: '#',\n emoji: '🎵',\n },\n ],\n },\n {\n name: 'Home Management',\n emoji: '🏡',\n pages: [\n {\n name: 'Household Budget & Expense Tracking',\n url: '#',\n emoji: '💰',\n },\n {\n name: 'Home Maintenance Schedule & Tasks',\n url: '#',\n emoji: '🔧',\n },\n {\n name: 'Family Calendar & Event Planning',\n url: '#',\n emoji: '📅',\n },\n ],\n },\n {\n name: 'Travel & Adventure',\n emoji: '🧳',\n pages: [\n {\n name: 'Trip Planning & Itineraries',\n url: '#',\n emoji: '🗺️',\n },\n {\n name: 'Travel Bucket List & Inspiration',\n url: '#',\n emoji: '🌎',\n },\n {\n name: 'Travel Journal & Photo Gallery',\n url: '#',\n emoji: '📸',\n },\n ],\n },\n ],\n}\n</script>\n\n<template>\n <Sidebar class=\"border-r-0\" v-bind=\"props\">\n <SidebarHeader>\n <TeamSwitcher :teams=\"data.teams\" />\n <NavMain :items=\"data.navMain\" />\n </SidebarHeader>\n <SidebarContent>\n <NavFavorites :favorites=\"data.favorites\" />\n <NavWorkspaces :workspaces=\"data.workspaces\" />\n <NavSecondary :items=\"data.navSecondary\" class=\"mt-auto\" />\n </SidebarContent>\n <SidebarRail />\n </Sidebar>\n</template>\n",
|
|
"type": "registry:component",
|
|
"target": ""
|
|
},
|
|
{
|
|
"path": "block/Sidebar10/components/NavActions.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport {\n ArrowDown,\n ArrowUp,\n Bell,\n Copy,\n CornerUpLeft,\n CornerUpRight,\n FileText,\n GalleryVerticalEnd,\n LineChart,\n Link,\n MoreHorizontal,\n Settings2,\n Star,\n Trash,\n Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst data = [\n [\n {\n label: 'Customize Page',\n icon: Settings2,\n },\n {\n label: 'Turn into wiki',\n icon: FileText,\n },\n ],\n [\n {\n label: 'Copy Link',\n icon: Link,\n },\n {\n label: 'Duplicate',\n icon: Copy,\n },\n {\n label: 'Move to',\n icon: CornerUpRight,\n },\n {\n label: 'Move to Trash',\n icon: Trash2,\n },\n ],\n [\n {\n label: 'Undo',\n icon: CornerUpLeft,\n },\n {\n label: 'View analytics',\n icon: LineChart,\n },\n {\n label: 'Version History',\n icon: GalleryVerticalEnd,\n },\n {\n label: 'Show delete pages',\n icon: Trash,\n },\n {\n label: 'Notifications',\n icon: Bell,\n },\n ],\n [\n {\n label: 'Import',\n icon: ArrowUp,\n },\n {\n label: 'Export',\n icon: ArrowDown,\n },\n ],\n]\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n <div class=\"flex items-center gap-2 text-sm\">\n <div class=\"hidden font-medium text-muted-foreground md:inline-block\">\n Edit Oct 08\n </div>\n <Button variant=\"ghost\" size=\"icon\" class=\"h-7 w-7\">\n <Star />\n </Button>\n <Popover v-model:open=\"isOpen\">\n <PopoverTrigger as-child>\n <Button\n variant=\"ghost\"\n size=\"icon\"\n class=\"h-7 w-7 data-[state=open]:bg-accent\"\n >\n <MoreHorizontal />\n </Button>\n </PopoverTrigger>\n <PopoverContent\n class=\"w-56 overflow-hidden rounded-lg p-0\"\n align=\"end\"\n >\n <Sidebar collapsible=\"none\" class=\"bg-transparent\">\n <SidebarContent>\n <SidebarGroup v-for=\"(group, index) in data\" :key=\"index\" class=\"border-b last:border-none\">\n <SidebarGroupContent class=\"gap-0\">\n <SidebarMenu>\n <SidebarMenuItem v-for=\"(item, index) in group\" :key=\"index\">\n <SidebarMenuButton>\n <component :is=\"item.icon\" /> <span>{{ item.label }}</span>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n </Sidebar>\n </PopoverContent>\n </Popover>\n </div>\n</template>\n",
|
|
"type": "registry:component",
|
|
"target": ""
|
|
},
|
|
{
|
|
"path": "block/Sidebar10/components/NavFavorites.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 ArrowUpRight,\n Link,\n MoreHorizontal,\n StarOff,\n Trash2,\n} from 'lucide-vue-next'\n\ndefineProps<{\n favorites: {\n name: string\n url: string\n emoji: string\n }[]\n}>()\n\nconst { isMobile } = useSidebar()\n</script>\n\n<template>\n <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n <SidebarMenu>\n <SidebarMenuItem v-for=\"item in favorites\" :key=\"item.name\">\n <SidebarMenuButton as-child>\n <a :href=\"item.url\" :title=\"item.name\">\n <span>{{ item.emoji }}</span>\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-56 rounded-lg\"\n :side=\"isMobile ? 'bottom' : 'right'\"\n :align=\"isMobile ? 'end' : 'start'\"\n >\n <DropdownMenuItem>\n <StarOff class=\"text-muted-foreground\" />\n <span>Remove from Favorites</span>\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n <Link class=\"text-muted-foreground\" />\n <span>Copy Link</span>\n </DropdownMenuItem>\n <DropdownMenuItem>\n <ArrowUpRight class=\"text-muted-foreground\" />\n <span>Open in New Tab</span>\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n <Trash2 class=\"text-muted-foreground\" />\n <span>Delete</span>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </SidebarMenuItem>\n\n <SidebarMenuItem>\n <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n <MoreHorizontal />\n <span>More</span>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroup>\n</template>\n",
|
|
"type": "registry:component",
|
|
"target": ""
|
|
},
|
|
{
|
|
"path": "block/Sidebar10/components/NavMain.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\n\ndefineProps<{\n items: {\n title: string\n url: string\n icon: LucideIcon\n isActive?: boolean\n }[]\n}>()\n</script>\n\n<template>\n <SidebarMenu>\n <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n <SidebarMenuButton as-child :is-active=\"item.isActive\">\n <a :href=\"item.url\">\n <component :is=\"item.icon\" />\n <span>{{ item.title }}</span>\n </a>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n</template>\n",
|
|
"type": "registry:component",
|
|
"target": ""
|
|
},
|
|
{
|
|
"path": "block/Sidebar10/components/NavSecondary.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport type { LucideIcon } from 'lucide-vue-next'\n\nimport type { Component } from 'vue'\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\n\ndefineProps<{\n items: {\n title: string\n url: string\n icon: LucideIcon\n badge?: Component\n }[]\n}>()\n</script>\n\n<template>\n <SidebarGroup>\n <SidebarGroupContent>\n <SidebarMenu>\n <SidebarMenuItem v-for=\"item in items\" :key=\"item.title\">\n <SidebarMenuButton as-child>\n <a :href=\"item.url\">\n <component :is=\"item.icon\" />\n <span>{{ item.title }}</span>\n </a>\n </SidebarMenuButton>\n <SidebarMenuBadge v-if=\"item.badge\">\n <component :is=\"item.badge\" />\n </SidebarMenuBadge>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n</template>\n",
|
|
"type": "registry:component",
|
|
"target": ""
|
|
},
|
|
{
|
|
"path": "block/Sidebar10/components/NavWorkspaces.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\n\nimport {\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight, MoreHorizontal, Plus } from 'lucide-vue-next'\n\ndefineProps<{\n workspaces: {\n name: string\n emoji: string\n pages: {\n name: string\n emoji: string\n }[]\n }[]\n}>()\n</script>\n\n<template>\n <SidebarGroup>\n <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n <Collapsible v-for=\"workspace in workspaces\" :key=\"workspace.name\">\n <SidebarMenuItem>\n <SidebarMenuButton as-child>\n <a href=\"#\">\n <span>{{ workspace.emoji }}</span>\n <span>{{ workspace.name }}</span>\n </a>\n </SidebarMenuButton>\n <CollapsibleTrigger as-child>\n <SidebarMenuAction\n class=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n show-on-hover\n >\n <ChevronRight />\n </SidebarMenuAction>\n </CollapsibleTrigger>\n <SidebarMenuAction show-on-hover>\n <Plus />\n </SidebarMenuAction>\n <CollapsibleContent>\n <SidebarMenuSub>\n <SidebarMenuSubItem v-for=\"page in workspace.pages\" :key=\"page.name\">\n <SidebarMenuSubButton as-child>\n <a href=\"#\">\n <span>{{ page.emoji }}</span>\n <span>{{ page.name }}</span>\n </a>\n </SidebarMenuSubButton>\n </SidebarMenuSubItem>\n </SidebarMenuSub>\n </CollapsibleContent>\n </SidebarMenuItem>\n </Collapsible>\n\n <SidebarMenuItem>\n <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n <MoreHorizontal />\n <span>More</span>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n</template>\n",
|
|
"type": "registry:component",
|
|
"target": ""
|
|
},
|
|
{
|
|
"path": "block/Sidebar10/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'\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronDown, 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 activeTeam = ref(props.teams[0])\n</script>\n\n<template>\n <SidebarMenu>\n <SidebarMenuItem>\n <DropdownMenu>\n <DropdownMenuTrigger as-child>\n <SidebarMenuButton class=\"w-fit px-1.5\">\n <div class=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n <component :is=\"activeTeam.logo\" class=\"size-3\" />\n </div>\n <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n <ChevronDown class=\"opacity-50\" />\n </SidebarMenuButton>\n </DropdownMenuTrigger>\n <DropdownMenuContent\n class=\"w-64 rounded-lg\"\n align=\"start\"\n side=\"bottom\"\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": ""
|
|
}
|
|
]
|
|
}
|