From e0d4980e31161482e94852ddc2a1277c68a86555 Mon Sep 17 00:00:00 2001 From: zernonia <59365435+zernonia@users.noreply.github.com> Date: Mon, 28 Oct 2024 01:05:55 +0800 Subject: [PATCH] feat: Sidebar (1/2) (#827) * feat: add default sidebar * chore: add images, docs item * refactor: rename and fix styling` * feat: add new-york style * chore: move typescript to catalog * docs: fix block preview * chore: build registry, add sidebar block * docs: update sidebar demo * chore: bump radix-vue * chore: fix build --- .../theme/components/BlockContainer.vue | 237 ++ .../.vitepress/theme/components/BlockPage.vue | 4 +- .../theme/components/BlockPreview.vue | 255 +- .../.vitepress/theme/components/Blocks.vue | 4 +- apps/www/.vitepress/theme/components/index.ts | 1 + apps/www/.vitepress/theme/config/docs.ts | 11 +- apps/www/.vitepress/theme/style.css | 47 +- apps/www/__registry__/index.ts | 28 + apps/www/package.json | 2 +- apps/www/scripts/build-registry.ts | 101 +- .../src/content/docs/components/sidebar.md | 12 + .../lib/registry/default/block/Sidebar01.vue | 217 ++ .../lib/registry/default/block/Sidebar07.vue | 463 +++ .../ui/breadcrumb/BreadcrumbSeparator.vue | 2 +- .../lib/registry/default/ui/button/index.ts | 20 +- .../ui/dropdown-menu/DropdownMenuItem.vue | 2 +- .../registry/default/ui/sidebar/Sidebar.vue | 90 + .../default/ui/sidebar/SidebarContent.vue | 17 + .../default/ui/sidebar/SidebarFooter.vue | 17 + .../default/ui/sidebar/SidebarGroup.vue | 17 + .../default/ui/sidebar/SidebarGroupAction.vue | 27 + .../ui/sidebar/SidebarGroupContent.vue | 17 + .../default/ui/sidebar/SidebarGroupLabel.vue | 24 + .../default/ui/sidebar/SidebarHeader.vue | 17 + .../default/ui/sidebar/SidebarInput.vue | 21 + .../default/ui/sidebar/SidebarInset.vue | 20 + .../default/ui/sidebar/SidebarMenu.vue | 17 + .../default/ui/sidebar/SidebarMenuAction.vue | 32 + .../default/ui/sidebar/SidebarMenuBadge.vue | 25 + .../default/ui/sidebar/SidebarMenuButton.vue | 51 + .../ui/sidebar/SidebarMenuButtonChild.vue | 33 + .../default/ui/sidebar/SidebarMenuItem.vue | 17 + .../ui/sidebar/SidebarMenuSkeleton.vue | 33 + .../default/ui/sidebar/SidebarMenuSub.vue | 21 + .../ui/sidebar/SidebarMenuSubButton.vue | 35 + .../default/ui/sidebar/SidebarMenuSubItem.vue | 8 + .../default/ui/sidebar/SidebarProvider.vue | 79 + .../default/ui/sidebar/SidebarRail.vue | 32 + .../default/ui/sidebar/SidebarSeparator.vue | 18 + .../default/ui/sidebar/SidebarTrigger.vue | 26 + .../lib/registry/default/ui/sidebar/index.ts | 51 + .../lib/registry/default/ui/sidebar/utils.ts | 19 + .../lib/registry/new-york/block/Sidebar01.vue | 217 ++ .../lib/registry/new-york/block/Sidebar07.vue | 463 +++ .../ui/dropdown-menu/DropdownMenuItem.vue | 2 +- .../registry/new-york/ui/sidebar/Sidebar.vue | 90 + .../new-york/ui/sidebar/SidebarContent.vue | 17 + .../new-york/ui/sidebar/SidebarFooter.vue | 17 + .../new-york/ui/sidebar/SidebarGroup.vue | 17 + .../ui/sidebar/SidebarGroupAction.vue | 27 + .../ui/sidebar/SidebarGroupContent.vue | 17 + .../new-york/ui/sidebar/SidebarGroupLabel.vue | 24 + .../new-york/ui/sidebar/SidebarHeader.vue | 17 + .../new-york/ui/sidebar/SidebarInput.vue | 21 + .../new-york/ui/sidebar/SidebarInset.vue | 20 + .../new-york/ui/sidebar/SidebarMenu.vue | 17 + .../new-york/ui/sidebar/SidebarMenuAction.vue | 32 + .../new-york/ui/sidebar/SidebarMenuBadge.vue | 25 + .../new-york/ui/sidebar/SidebarMenuButton.vue | 51 + .../ui/sidebar/SidebarMenuButtonChild.vue | 33 + .../new-york/ui/sidebar/SidebarMenuItem.vue | 17 + .../ui/sidebar/SidebarMenuSkeleton.vue | 33 + .../new-york/ui/sidebar/SidebarMenuSub.vue | 21 + .../ui/sidebar/SidebarMenuSubButton.vue | 35 + .../ui/sidebar/SidebarMenuSubItem.vue | 8 + .../new-york/ui/sidebar/SidebarProvider.vue | 79 + .../new-york/ui/sidebar/SidebarRail.vue | 32 + .../new-york/ui/sidebar/SidebarSeparator.vue | 18 + .../new-york/ui/sidebar/SidebarTrigger.vue | 26 + .../lib/registry/new-york/ui/sidebar/index.ts | 51 + .../lib/registry/new-york/ui/sidebar/utils.ts | 19 + .../blocks/demo-sidebar-controlled-dark.png | Bin 0 -> 50019 bytes .../images/blocks/demo-sidebar-controlled.png | Bin 0 -> 50038 bytes .../images/blocks/demo-sidebar-dark.png | Bin 0 -> 40000 bytes .../blocks/demo-sidebar-footer-dark.png | Bin 0 -> 23391 bytes .../images/blocks/demo-sidebar-footer.png | Bin 0 -> 23321 bytes .../blocks/demo-sidebar-group-action-dark.png | Bin 0 -> 37070 bytes .../blocks/demo-sidebar-group-action.png | Bin 0 -> 37124 bytes .../demo-sidebar-group-collapsible-dark.png | Bin 0 -> 29356 bytes .../blocks/demo-sidebar-group-collapsible.png | Bin 0 -> 29374 bytes .../images/blocks/demo-sidebar-group-dark.png | Bin 0 -> 29012 bytes .../images/blocks/demo-sidebar-group.png | Bin 0 -> 29033 bytes .../blocks/demo-sidebar-header-dark.png | Bin 0 -> 26041 bytes .../images/blocks/demo-sidebar-header.png | Bin 0 -> 25986 bytes .../blocks/demo-sidebar-menu-action-dark.png | Bin 0 -> 46931 bytes .../blocks/demo-sidebar-menu-action.png | Bin 0 -> 46887 bytes .../blocks/demo-sidebar-menu-badge-dark.png | Bin 0 -> 48974 bytes .../images/blocks/demo-sidebar-menu-badge.png | Bin 0 -> 48998 bytes .../demo-sidebar-menu-collapsible-dark.png | Bin 0 -> 47744 bytes .../blocks/demo-sidebar-menu-collapsible.png | Bin 0 -> 47826 bytes .../images/blocks/demo-sidebar-menu-dark.png | Bin 0 -> 45430 bytes .../blocks/demo-sidebar-menu-sub-dark.png | Bin 0 -> 129693 bytes .../images/blocks/demo-sidebar-menu-sub.png | Bin 0 -> 129702 bytes .../images/blocks/demo-sidebar-menu.png | Bin 0 -> 45431 bytes .../images/blocks/demo-sidebar-rsc-dark.png | Bin 0 -> 45430 bytes .../public/images/blocks/demo-sidebar-rsc.png | Bin 0 -> 45431 bytes .../src/public/images/blocks/demo-sidebar.png | Bin 0 -> 39778 bytes .../public/images/blocks/login-01-dark.png | Bin 0 -> 71704 bytes .../www/src/public/images/blocks/login-01.png | Bin 0 -> 71704 bytes .../public/images/blocks/sidebar-01-dark.png | Bin 0 -> 130812 bytes .../src/public/images/blocks/sidebar-01.png | Bin 0 -> 129088 bytes .../public/images/blocks/sidebar-02-dark.png | Bin 0 -> 139217 bytes .../src/public/images/blocks/sidebar-02.png | Bin 0 -> 135880 bytes .../public/images/blocks/sidebar-03-dark.png | Bin 0 -> 141551 bytes .../src/public/images/blocks/sidebar-03.png | Bin 0 -> 140527 bytes .../public/images/blocks/sidebar-04-dark.png | Bin 0 -> 139341 bytes .../src/public/images/blocks/sidebar-04.png | Bin 0 -> 139035 bytes .../public/images/blocks/sidebar-05-dark.png | Bin 0 -> 112448 bytes .../src/public/images/blocks/sidebar-05.png | Bin 0 -> 111164 bytes .../public/images/blocks/sidebar-06-dark.png | Bin 0 -> 90569 bytes .../src/public/images/blocks/sidebar-06.png | Bin 0 -> 89817 bytes .../public/images/blocks/sidebar-07-dark.png | Bin 0 -> 105932 bytes .../src/public/images/blocks/sidebar-07.png | Bin 0 -> 105054 bytes .../public/images/blocks/sidebar-08-dark.png | Bin 0 -> 114901 bytes .../src/public/images/blocks/sidebar-08.png | Bin 0 -> 114686 bytes .../public/images/blocks/sidebar-09-dark.png | Bin 0 -> 240306 bytes .../src/public/images/blocks/sidebar-09.png | Bin 0 -> 236990 bytes .../public/images/blocks/sidebar-10-dark.png | Bin 0 -> 243595 bytes .../src/public/images/blocks/sidebar-10.png | Bin 0 -> 244591 bytes .../public/images/blocks/sidebar-11-dark.png | Bin 0 -> 103634 bytes .../src/public/images/blocks/sidebar-11.png | Bin 0 -> 102847 bytes .../public/images/blocks/sidebar-12-dark.png | Bin 0 -> 110515 bytes .../src/public/images/blocks/sidebar-12.png | Bin 0 -> 100312 bytes .../public/images/blocks/sidebar-13-dark.png | Bin 0 -> 95328 bytes .../src/public/images/blocks/sidebar-13.png | Bin 0 -> 24604 bytes .../public/images/blocks/sidebar-14-dark.png | Bin 0 -> 143486 bytes .../src/public/images/blocks/sidebar-14.png | Bin 0 -> 142005 bytes .../public/images/blocks/sidebar-15-dark.png | Bin 0 -> 260468 bytes .../src/public/images/blocks/sidebar-15.png | Bin 0 -> 250717 bytes .../src/public/images/sidebar-menu-dark.png | Bin 0 -> 39920 bytes apps/www/src/public/images/sidebar-menu.png | Bin 0 -> 40132 bytes .../public/images/sidebar-structure-dark.png | Bin 0 -> 40438 bytes .../src/public/images/sidebar-structure.png | Bin 0 -> 41061 bytes apps/www/src/public/registry/colors/gray.json | 2 +- apps/www/src/public/registry/colors/lime.json | 2 +- .../src/public/registry/colors/neutral.json | 2 +- .../www/src/public/registry/colors/slate.json | 2 +- .../www/src/public/registry/colors/stone.json | 2 +- apps/www/src/public/registry/colors/zinc.json | 2 +- apps/www/src/public/registry/index.json | 47 + .../registry/styles/default/breadcrumb.json | 2 +- .../registry/styles/default/button.json | 2 +- .../styles/default/dropdown-menu.json | 2 +- .../registry/styles/default/sidebar.json | 125 + .../styles/new-york/dropdown-menu.json | 2 +- .../registry/styles/new-york/sidebar.json | 125 + apps/www/src/public/registry/themes.css | 480 +-- apps/www/tailwind.config.js | 10 + package.json | 2 +- packages/cli/package.json | 2 +- pnpm-lock.yaml | 2788 ++++++++--------- pnpm-workspace.yaml | 3 +- 152 files changed, 5247 insertions(+), 1971 deletions(-) create mode 100644 apps/www/.vitepress/theme/components/BlockContainer.vue create mode 100644 apps/www/src/content/docs/components/sidebar.md create mode 100644 apps/www/src/lib/registry/default/block/Sidebar01.vue create mode 100644 apps/www/src/lib/registry/default/block/Sidebar07.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/Sidebar.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarContent.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarFooter.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarGroup.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarGroupAction.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarGroupContent.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarGroupLabel.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarHeader.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarInput.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarInset.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarMenu.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuAction.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuBadge.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuButton.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuButtonChild.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuItem.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuSkeleton.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuSub.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuSubButton.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarMenuSubItem.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarProvider.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarRail.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarSeparator.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/SidebarTrigger.vue create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/index.ts create mode 100644 apps/www/src/lib/registry/default/ui/sidebar/utils.ts create mode 100644 apps/www/src/lib/registry/new-york/block/Sidebar01.vue create mode 100644 apps/www/src/lib/registry/new-york/block/Sidebar07.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/Sidebar.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarContent.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarFooter.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroup.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroupAction.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroupContent.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarGroupLabel.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarHeader.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarInput.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarInset.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenu.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuAction.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuBadge.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuButton.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuButtonChild.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuItem.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuSkeleton.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuSub.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuSubButton.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarMenuSubItem.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarProvider.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarRail.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarSeparator.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/SidebarTrigger.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/index.ts create mode 100644 apps/www/src/lib/registry/new-york/ui/sidebar/utils.ts create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-controlled-dark.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-controlled.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-dark.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-footer-dark.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-footer.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-group-action-dark.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-group-action.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-group-collapsible-dark.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-group-collapsible.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-group-dark.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-group.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-header-dark.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-header.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-menu-action-dark.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-menu-action.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-menu-badge-dark.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-menu-badge.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-menu-collapsible-dark.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-menu-collapsible.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-menu-dark.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-menu-sub-dark.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-menu-sub.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-menu.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-rsc-dark.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar-rsc.png create mode 100644 apps/www/src/public/images/blocks/demo-sidebar.png create mode 100644 apps/www/src/public/images/blocks/login-01-dark.png create mode 100644 apps/www/src/public/images/blocks/login-01.png create mode 100644 apps/www/src/public/images/blocks/sidebar-01-dark.png create mode 100644 apps/www/src/public/images/blocks/sidebar-01.png create mode 100644 apps/www/src/public/images/blocks/sidebar-02-dark.png create mode 100644 apps/www/src/public/images/blocks/sidebar-02.png create mode 100644 apps/www/src/public/images/blocks/sidebar-03-dark.png create mode 100644 apps/www/src/public/images/blocks/sidebar-03.png create mode 100644 apps/www/src/public/images/blocks/sidebar-04-dark.png create mode 100644 apps/www/src/public/images/blocks/sidebar-04.png create mode 100644 apps/www/src/public/images/blocks/sidebar-05-dark.png create mode 100644 apps/www/src/public/images/blocks/sidebar-05.png create mode 100644 apps/www/src/public/images/blocks/sidebar-06-dark.png create mode 100644 apps/www/src/public/images/blocks/sidebar-06.png create mode 100644 apps/www/src/public/images/blocks/sidebar-07-dark.png create mode 100644 apps/www/src/public/images/blocks/sidebar-07.png create mode 100644 apps/www/src/public/images/blocks/sidebar-08-dark.png create mode 100644 apps/www/src/public/images/blocks/sidebar-08.png create mode 100644 apps/www/src/public/images/blocks/sidebar-09-dark.png create mode 100644 apps/www/src/public/images/blocks/sidebar-09.png create mode 100644 apps/www/src/public/images/blocks/sidebar-10-dark.png create mode 100644 apps/www/src/public/images/blocks/sidebar-10.png create mode 100644 apps/www/src/public/images/blocks/sidebar-11-dark.png create mode 100644 apps/www/src/public/images/blocks/sidebar-11.png create mode 100644 apps/www/src/public/images/blocks/sidebar-12-dark.png create mode 100644 apps/www/src/public/images/blocks/sidebar-12.png create mode 100644 apps/www/src/public/images/blocks/sidebar-13-dark.png create mode 100644 apps/www/src/public/images/blocks/sidebar-13.png create mode 100644 apps/www/src/public/images/blocks/sidebar-14-dark.png create mode 100644 apps/www/src/public/images/blocks/sidebar-14.png create mode 100644 apps/www/src/public/images/blocks/sidebar-15-dark.png create mode 100644 apps/www/src/public/images/blocks/sidebar-15.png create mode 100644 apps/www/src/public/images/sidebar-menu-dark.png create mode 100644 apps/www/src/public/images/sidebar-menu.png create mode 100644 apps/www/src/public/images/sidebar-structure-dark.png create mode 100644 apps/www/src/public/images/sidebar-structure.png create mode 100644 apps/www/src/public/registry/styles/default/sidebar.json create mode 100644 apps/www/src/public/registry/styles/new-york/sidebar.json diff --git a/apps/www/.vitepress/theme/components/BlockContainer.vue b/apps/www/.vitepress/theme/components/BlockContainer.vue new file mode 100644 index 000000000..b3ad339bc --- /dev/null +++ b/apps/www/.vitepress/theme/components/BlockContainer.vue @@ -0,0 +1,237 @@ + + + diff --git a/apps/www/.vitepress/theme/components/BlockPage.vue b/apps/www/.vitepress/theme/components/BlockPage.vue index 83c757f01..be644b625 100644 --- a/apps/www/.vitepress/theme/components/BlockPage.vue +++ b/apps/www/.vitepress/theme/components/BlockPage.vue @@ -2,11 +2,11 @@ import { useUrlSearchParams } from '@vueuse/core' import ComponentLoader from './ComponentLoader.vue' -const params = useUrlSearchParams('hash-params') +const params = useUrlSearchParams('history') diff --git a/apps/www/.vitepress/theme/components/BlockPreview.vue b/apps/www/.vitepress/theme/components/BlockPreview.vue index ccfcc04ac..93dfecee7 100644 --- a/apps/www/.vitepress/theme/components/BlockPreview.vue +++ b/apps/www/.vitepress/theme/components/BlockPreview.vue @@ -1,245 +1,44 @@