From 9765f80caab0e298f2fb8f8d4f74bcab3a7c12c5 Mon Sep 17 00:00:00 2001 From: Saeid Zareie Date: Tue, 12 Mar 2024 15:51:28 +0330 Subject: [PATCH 1/5] feat: adding breadcrumb component, resolves #395 --- apps/www/.vitepress/theme/config/docs.ts | 6 + .../.vitepress/theme/layout/MainLayout.vue | 10 +- apps/www/__registry__/index.ts | 84 +++++++ .../src/content/docs/components/breadcrumb.md | 205 ++++++++++++++++++ .../default/example/BreadcrumbDemo.vue | 53 +++++ .../default/example/BreadcrumbDropdown.vue | 51 +++++ .../example/BreadcrumbEllipsisDemo.vue | 41 ++++ .../default/example/BreadcrumbLinkDemo.vue | 36 +++ .../default/example/BreadcrumbResponsive.vue | 125 +++++++++++ .../example/BreadcrumbSeparatorDemo.vue | 37 ++++ .../default/ui/breadcrumb/Breadcrumb.vue | 13 ++ .../ui/breadcrumb/BreadcrumbEllipsis.vue | 20 ++ .../default/ui/breadcrumb/BreadcrumbItem.vue | 16 ++ .../default/ui/breadcrumb/BreadcrumbLink.vue | 18 ++ .../default/ui/breadcrumb/BreadcrumbList.vue | 16 ++ .../default/ui/breadcrumb/BreadcrumbPage.vue | 19 ++ .../ui/breadcrumb/BreadcrumbSeparator.vue | 21 ++ .../registry/default/ui/breadcrumb/index.ts | 7 + .../new-york/example/BreadcrumbDemo.vue | 53 +++++ .../new-york/example/BreadcrumbDropdown.vue | 51 +++++ .../example/BreadcrumbEllipsisDemo.vue | 41 ++++ .../new-york/example/BreadcrumbLinkDemo.vue | 36 +++ .../new-york/example/BreadcrumbResponsive.vue | 125 +++++++++++ .../example/BreadcrumbSeparatorDemo.vue | 37 ++++ .../new-york/ui/breadcrumb/Breadcrumb.vue | 13 ++ .../ui/breadcrumb/BreadcrumbEllipsis.vue | 20 ++ .../new-york/ui/breadcrumb/BreadcrumbItem.vue | 16 ++ .../new-york/ui/breadcrumb/BreadcrumbLink.vue | 18 ++ .../new-york/ui/breadcrumb/BreadcrumbList.vue | 16 ++ .../new-york/ui/breadcrumb/BreadcrumbPage.vue | 19 ++ .../ui/breadcrumb/BreadcrumbSeparator.vue | 21 ++ .../registry/new-york/ui/breadcrumb/index.ts | 7 + apps/www/src/public/registry/index.json | 18 ++ .../registry/styles/default/breadcrumb.json | 36 ++- .../registry/styles/new-york/breadcrumb.json | 42 ++++ 35 files changed, 1334 insertions(+), 13 deletions(-) create mode 100644 apps/www/src/content/docs/components/breadcrumb.md create mode 100644 apps/www/src/lib/registry/default/example/BreadcrumbDemo.vue create mode 100644 apps/www/src/lib/registry/default/example/BreadcrumbDropdown.vue create mode 100644 apps/www/src/lib/registry/default/example/BreadcrumbEllipsisDemo.vue create mode 100644 apps/www/src/lib/registry/default/example/BreadcrumbLinkDemo.vue create mode 100644 apps/www/src/lib/registry/default/example/BreadcrumbResponsive.vue create mode 100644 apps/www/src/lib/registry/default/example/BreadcrumbSeparatorDemo.vue create mode 100644 apps/www/src/lib/registry/default/ui/breadcrumb/Breadcrumb.vue create mode 100644 apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue create mode 100644 apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbItem.vue create mode 100644 apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue create mode 100644 apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbList.vue create mode 100644 apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbPage.vue create mode 100644 apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbSeparator.vue create mode 100644 apps/www/src/lib/registry/default/ui/breadcrumb/index.ts create mode 100644 apps/www/src/lib/registry/new-york/example/BreadcrumbDemo.vue create mode 100644 apps/www/src/lib/registry/new-york/example/BreadcrumbDropdown.vue create mode 100644 apps/www/src/lib/registry/new-york/example/BreadcrumbEllipsisDemo.vue create mode 100644 apps/www/src/lib/registry/new-york/example/BreadcrumbLinkDemo.vue create mode 100644 apps/www/src/lib/registry/new-york/example/BreadcrumbResponsive.vue create mode 100644 apps/www/src/lib/registry/new-york/example/BreadcrumbSeparatorDemo.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/breadcrumb/Breadcrumb.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbItem.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbList.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbPage.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue create mode 100644 apps/www/src/lib/registry/new-york/ui/breadcrumb/index.ts create mode 100644 apps/www/src/public/registry/styles/new-york/breadcrumb.json diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts index 9c2040c40..ea8631df7 100644 --- a/apps/www/.vitepress/theme/config/docs.ts +++ b/apps/www/.vitepress/theme/config/docs.ts @@ -158,6 +158,12 @@ export const docsConfig: DocsConfig = { href: '/docs/components/badge', items: [], }, + { + title: 'Breadcrumb', + href: '/docs/components/breadcrumb', + items: [], + label: 'New', + }, { title: 'Button', href: '/docs/components/button', diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue index ca2c4f071..796c32b1b 100644 --- a/apps/www/.vitepress/theme/layout/MainLayout.vue +++ b/apps/www/.vitepress/theme/layout/MainLayout.vue @@ -2,12 +2,10 @@ import { useMagicKeys, useToggle } from '@vueuse/core' import { onMounted, ref, watch } from 'vue' import { Content, useData, useRoute, useRouter } from 'vitepress' -import { SearchIcon } from 'lucide-vue-next' import { type NavItem, docsConfig } from '../config/docs' import Logo from '../components/Logo.vue' import MobileNav from '../components/MobileNav.vue' -import Kbd from '../components/Kbd.vue' import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/lib/registry/default/ui/command' import { Button } from '@/lib/registry/default/ui/button' @@ -119,10 +117,10 @@ watch(() => $route.path, (n) => { class="relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64" @click="isOpen = true" > - Search documentation... - Search... - - ⌘K + + Search... + diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts index 152f0e1a5..92472ada4 100644 --- a/apps/www/__registry__/index.ts +++ b/apps/www/__registry__/index.ts @@ -73,6 +73,48 @@ export const Index = { component: () => import("../src/lib/registry/default/example/BadgeSecondaryDemo.vue").then((m) => m.default), files: ["../src/lib/registry/default/example/BadgeSecondaryDemo.vue"], }, + "BreadcrumbDemo": { + name: "BreadcrumbDemo", + type: "components:example", + registryDependencies: ["breadcrumb","dropdown-menu"], + component: () => import("../src/lib/registry/default/example/BreadcrumbDemo.vue").then((m) => m.default), + files: ["../src/lib/registry/default/example/BreadcrumbDemo.vue"], + }, + "BreadcrumbDropdown": { + name: "BreadcrumbDropdown", + type: "components:example", + registryDependencies: ["breadcrumb","dropdown-menu"], + component: () => import("../src/lib/registry/default/example/BreadcrumbDropdown.vue").then((m) => m.default), + files: ["../src/lib/registry/default/example/BreadcrumbDropdown.vue"], + }, + "BreadcrumbEllipsisDemo": { + name: "BreadcrumbEllipsisDemo", + type: "components:example", + registryDependencies: ["breadcrumb"], + component: () => import("../src/lib/registry/default/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default), + files: ["../src/lib/registry/default/example/BreadcrumbEllipsisDemo.vue"], + }, + "BreadcrumbLinkDemo": { + name: "BreadcrumbLinkDemo", + type: "components:example", + registryDependencies: ["breadcrumb"], + component: () => import("../src/lib/registry/default/example/BreadcrumbLinkDemo.vue").then((m) => m.default), + files: ["../src/lib/registry/default/example/BreadcrumbLinkDemo.vue"], + }, + "BreadcrumbResponsive": { + name: "BreadcrumbResponsive", + type: "components:example", + registryDependencies: ["breadcrumb","button","drawer","dropdown-menu"], + component: () => import("../src/lib/registry/default/example/BreadcrumbResponsive.vue").then((m) => m.default), + files: ["../src/lib/registry/default/example/BreadcrumbResponsive.vue"], + }, + "BreadcrumbSeparatorDemo": { + name: "BreadcrumbSeparatorDemo", + type: "components:example", + registryDependencies: ["breadcrumb"], + component: () => import("../src/lib/registry/default/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default), + files: ["../src/lib/registry/default/example/BreadcrumbSeparatorDemo.vue"], + }, "ButtonAsChildDemo": { name: "ButtonAsChildDemo", type: "components:example", @@ -1131,6 +1173,48 @@ export const Index = { component: () => import("../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue").then((m) => m.default), files: ["../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue"], }, + "BreadcrumbDemo": { + name: "BreadcrumbDemo", + type: "components:example", + registryDependencies: ["breadcrumb","dropdown-menu"], + component: () => import("../src/lib/registry/new-york/example/BreadcrumbDemo.vue").then((m) => m.default), + files: ["../src/lib/registry/new-york/example/BreadcrumbDemo.vue"], + }, + "BreadcrumbDropdown": { + name: "BreadcrumbDropdown", + type: "components:example", + registryDependencies: ["breadcrumb","dropdown-menu"], + component: () => import("../src/lib/registry/new-york/example/BreadcrumbDropdown.vue").then((m) => m.default), + files: ["../src/lib/registry/new-york/example/BreadcrumbDropdown.vue"], + }, + "BreadcrumbEllipsisDemo": { + name: "BreadcrumbEllipsisDemo", + type: "components:example", + registryDependencies: ["breadcrumb"], + component: () => import("../src/lib/registry/new-york/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default), + files: ["../src/lib/registry/new-york/example/BreadcrumbEllipsisDemo.vue"], + }, + "BreadcrumbLinkDemo": { + name: "BreadcrumbLinkDemo", + type: "components:example", + registryDependencies: ["breadcrumb"], + component: () => import("../src/lib/registry/new-york/example/BreadcrumbLinkDemo.vue").then((m) => m.default), + files: ["../src/lib/registry/new-york/example/BreadcrumbLinkDemo.vue"], + }, + "BreadcrumbResponsive": { + name: "BreadcrumbResponsive", + type: "components:example", + registryDependencies: ["breadcrumb","button","drawer","dropdown-menu"], + component: () => import("../src/lib/registry/new-york/example/BreadcrumbResponsive.vue").then((m) => m.default), + files: ["../src/lib/registry/new-york/example/BreadcrumbResponsive.vue"], + }, + "BreadcrumbSeparatorDemo": { + name: "BreadcrumbSeparatorDemo", + type: "components:example", + registryDependencies: ["breadcrumb"], + component: () => import("../src/lib/registry/new-york/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default), + files: ["../src/lib/registry/new-york/example/BreadcrumbSeparatorDemo.vue"], + }, "ButtonAsChildDemo": { name: "ButtonAsChildDemo", type: "components:example", diff --git a/apps/www/src/content/docs/components/breadcrumb.md b/apps/www/src/content/docs/components/breadcrumb.md new file mode 100644 index 000000000..86c44a6fb --- /dev/null +++ b/apps/www/src/content/docs/components/breadcrumb.md @@ -0,0 +1,205 @@ +--- +title: Breadcrumb +description: Displays the path to the current resource using a hierarchy of links. +--- + + + +## Installation + +```bash +npx shadcn-ui@latest add breadcrumb +``` + +## Usage + +```vue + + + +``` + +## Examples + +### Custom separator + +Use a custom component as `slot` for `` to create a custom separator. + + + +```vue showLineNumbers {2,20-22} + + + +``` + +--- + +### Dropdown + +You can compose `` with a `` to create a dropdown in the breadcrumb. + + + +```vue showLineNumbers {2-7,16-26} + + + +``` + +--- + +### Collapsed + +We provide a `` component to show a collapsed state when the breadcrumb is too long. + + + +```vue showLineNumbers {3,15} + + + +``` + +--- + +### Link component + +To use a custom link component from your routing library, you can use the `asChild` prop on ``. + + + +```vue showLineNumbers {15-19} + + + +``` + +--- + +### Responsive + +Here's an example of a responsive breadcrumb that composes `` with ``, ``, and ``. + +It displays a dropdown on desktop and a drawer on mobile. + + diff --git a/apps/www/src/lib/registry/default/example/BreadcrumbDemo.vue b/apps/www/src/lib/registry/default/example/BreadcrumbDemo.vue new file mode 100644 index 000000000..f0992b3fe --- /dev/null +++ b/apps/www/src/lib/registry/default/example/BreadcrumbDemo.vue @@ -0,0 +1,53 @@ + + + diff --git a/apps/www/src/lib/registry/default/example/BreadcrumbDropdown.vue b/apps/www/src/lib/registry/default/example/BreadcrumbDropdown.vue new file mode 100644 index 000000000..ab603bb69 --- /dev/null +++ b/apps/www/src/lib/registry/default/example/BreadcrumbDropdown.vue @@ -0,0 +1,51 @@ + + + diff --git a/apps/www/src/lib/registry/default/example/BreadcrumbEllipsisDemo.vue b/apps/www/src/lib/registry/default/example/BreadcrumbEllipsisDemo.vue new file mode 100644 index 000000000..73f5b22e8 --- /dev/null +++ b/apps/www/src/lib/registry/default/example/BreadcrumbEllipsisDemo.vue @@ -0,0 +1,41 @@ + + + diff --git a/apps/www/src/lib/registry/default/example/BreadcrumbLinkDemo.vue b/apps/www/src/lib/registry/default/example/BreadcrumbLinkDemo.vue new file mode 100644 index 000000000..06cb3533b --- /dev/null +++ b/apps/www/src/lib/registry/default/example/BreadcrumbLinkDemo.vue @@ -0,0 +1,36 @@ + + + diff --git a/apps/www/src/lib/registry/default/example/BreadcrumbResponsive.vue b/apps/www/src/lib/registry/default/example/BreadcrumbResponsive.vue new file mode 100644 index 000000000..746213b3d --- /dev/null +++ b/apps/www/src/lib/registry/default/example/BreadcrumbResponsive.vue @@ -0,0 +1,125 @@ + + + diff --git a/apps/www/src/lib/registry/default/example/BreadcrumbSeparatorDemo.vue b/apps/www/src/lib/registry/default/example/BreadcrumbSeparatorDemo.vue new file mode 100644 index 000000000..4d4e7a1f3 --- /dev/null +++ b/apps/www/src/lib/registry/default/example/BreadcrumbSeparatorDemo.vue @@ -0,0 +1,37 @@ + + + diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/Breadcrumb.vue b/apps/www/src/lib/registry/default/ui/breadcrumb/Breadcrumb.vue new file mode 100644 index 000000000..72ca14371 --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/breadcrumb/Breadcrumb.vue @@ -0,0 +1,13 @@ + + + diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue new file mode 100644 index 000000000..238e7fda9 --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue @@ -0,0 +1,20 @@ + + + diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbItem.vue b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbItem.vue new file mode 100644 index 000000000..42e721cda --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbItem.vue @@ -0,0 +1,16 @@ + + + diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue new file mode 100644 index 000000000..f25365d55 --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue @@ -0,0 +1,18 @@ + + + diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbList.vue b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbList.vue new file mode 100644 index 000000000..60856cc45 --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbList.vue @@ -0,0 +1,16 @@ + + + diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbPage.vue b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbPage.vue new file mode 100644 index 000000000..fe43bda69 --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbPage.vue @@ -0,0 +1,19 @@ + + + diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbSeparator.vue b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbSeparator.vue new file mode 100644 index 000000000..436015df1 --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbSeparator.vue @@ -0,0 +1,21 @@ + + + diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/index.ts b/apps/www/src/lib/registry/default/ui/breadcrumb/index.ts new file mode 100644 index 000000000..05909832b --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/breadcrumb/index.ts @@ -0,0 +1,7 @@ +export { default as Breadcrumb } from './Breadcrumb.vue' +export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue' +export { default as BreadcrumbItem } from './BreadcrumbItem.vue' +export { default as BreadcrumbLink } from './BreadcrumbLink.vue' +export { default as BreadcrumbList } from './BreadcrumbList.vue' +export { default as BreadcrumbPage } from './BreadcrumbPage.vue' +export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue' diff --git a/apps/www/src/lib/registry/new-york/example/BreadcrumbDemo.vue b/apps/www/src/lib/registry/new-york/example/BreadcrumbDemo.vue new file mode 100644 index 000000000..9d003b3a2 --- /dev/null +++ b/apps/www/src/lib/registry/new-york/example/BreadcrumbDemo.vue @@ -0,0 +1,53 @@ + + + diff --git a/apps/www/src/lib/registry/new-york/example/BreadcrumbDropdown.vue b/apps/www/src/lib/registry/new-york/example/BreadcrumbDropdown.vue new file mode 100644 index 000000000..47fe7c4ec --- /dev/null +++ b/apps/www/src/lib/registry/new-york/example/BreadcrumbDropdown.vue @@ -0,0 +1,51 @@ + + + diff --git a/apps/www/src/lib/registry/new-york/example/BreadcrumbEllipsisDemo.vue b/apps/www/src/lib/registry/new-york/example/BreadcrumbEllipsisDemo.vue new file mode 100644 index 000000000..68d00baae --- /dev/null +++ b/apps/www/src/lib/registry/new-york/example/BreadcrumbEllipsisDemo.vue @@ -0,0 +1,41 @@ + + + diff --git a/apps/www/src/lib/registry/new-york/example/BreadcrumbLinkDemo.vue b/apps/www/src/lib/registry/new-york/example/BreadcrumbLinkDemo.vue new file mode 100644 index 000000000..2107e89a9 --- /dev/null +++ b/apps/www/src/lib/registry/new-york/example/BreadcrumbLinkDemo.vue @@ -0,0 +1,36 @@ + + + diff --git a/apps/www/src/lib/registry/new-york/example/BreadcrumbResponsive.vue b/apps/www/src/lib/registry/new-york/example/BreadcrumbResponsive.vue new file mode 100644 index 000000000..2d1b937af --- /dev/null +++ b/apps/www/src/lib/registry/new-york/example/BreadcrumbResponsive.vue @@ -0,0 +1,125 @@ + + + diff --git a/apps/www/src/lib/registry/new-york/example/BreadcrumbSeparatorDemo.vue b/apps/www/src/lib/registry/new-york/example/BreadcrumbSeparatorDemo.vue new file mode 100644 index 000000000..157220a8f --- /dev/null +++ b/apps/www/src/lib/registry/new-york/example/BreadcrumbSeparatorDemo.vue @@ -0,0 +1,37 @@ + + + diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/Breadcrumb.vue b/apps/www/src/lib/registry/new-york/ui/breadcrumb/Breadcrumb.vue new file mode 100644 index 000000000..72ca14371 --- /dev/null +++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/Breadcrumb.vue @@ -0,0 +1,13 @@ + + + diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue new file mode 100644 index 000000000..08bc8b790 --- /dev/null +++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue @@ -0,0 +1,20 @@ + + + diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbItem.vue b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbItem.vue new file mode 100644 index 000000000..42e721cda --- /dev/null +++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbItem.vue @@ -0,0 +1,16 @@ + + + diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue new file mode 100644 index 000000000..f25365d55 --- /dev/null +++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue @@ -0,0 +1,18 @@ + + + diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbList.vue b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbList.vue new file mode 100644 index 000000000..60856cc45 --- /dev/null +++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbList.vue @@ -0,0 +1,16 @@ + + + diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbPage.vue b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbPage.vue new file mode 100644 index 000000000..fe43bda69 --- /dev/null +++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbPage.vue @@ -0,0 +1,19 @@ + + + diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue new file mode 100644 index 000000000..1b03cbcd4 --- /dev/null +++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue @@ -0,0 +1,21 @@ + + + diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/index.ts b/apps/www/src/lib/registry/new-york/ui/breadcrumb/index.ts new file mode 100644 index 000000000..05909832b --- /dev/null +++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/index.ts @@ -0,0 +1,7 @@ +export { default as Breadcrumb } from './Breadcrumb.vue' +export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue' +export { default as BreadcrumbItem } from './BreadcrumbItem.vue' +export { default as BreadcrumbLink } from './BreadcrumbLink.vue' +export { default as BreadcrumbList } from './BreadcrumbList.vue' +export { default as BreadcrumbPage } from './BreadcrumbPage.vue' +export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue' diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json index f2d46eb80..41e09b234 100644 --- a/apps/www/src/public/registry/index.json +++ b/apps/www/src/public/registry/index.json @@ -85,6 +85,24 @@ ], "type": "components:ui" }, + { + "name": "breadcrumb", + "dependencies": [], + "registryDependencies": [ + "utils" + ], + "files": [ + "ui/breadcrumb/Breadcrumb.vue", + "ui/breadcrumb/BreadcrumbEllipsis.vue", + "ui/breadcrumb/BreadcrumbItem.vue", + "ui/breadcrumb/BreadcrumbLink.vue", + "ui/breadcrumb/BreadcrumbList.vue", + "ui/breadcrumb/BreadcrumbPage.vue", + "ui/breadcrumb/BreadcrumbSeparator.vue", + "ui/breadcrumb/index.ts" + ], + "type": "components:ui" + }, { "name": "button", "dependencies": [], diff --git a/apps/www/src/public/registry/styles/default/breadcrumb.json b/apps/www/src/public/registry/styles/default/breadcrumb.json index b597e1d31..c08be5857 100644 --- a/apps/www/src/public/registry/styles/default/breadcrumb.json +++ b/apps/www/src/public/registry/styles/default/breadcrumb.json @@ -1,20 +1,42 @@ { "name": "breadcrumb", "dependencies": [], - "registryDependencies": [], + "registryDependencies": [ + "utils" + ], "files": [ { - "name": "BreadCrumb.vue", - "content": "\n" + "name": "Breadcrumb.vue", + "content": "\n\n\n" + }, + { + "name": "BreadcrumbEllipsis.vue", + "content": "\n\n\n" + }, + { + "name": "BreadcrumbItem.vue", + "content": "\n\n\n" + }, + { + "name": "BreadcrumbLink.vue", + "content": "\n\n\n" + }, + { + "name": "BreadcrumbList.vue", + "content": "\n\n\n" + }, + { + "name": "BreadcrumbPage.vue", + "content": "\n\n\n" }, { - "name": "BreadCrumbItem.vue", - "content": "\n\n\n" + "name": "BreadcrumbSeparator.vue", + "content": "\n\n\n" }, { "name": "index.ts", - "content": "export { default as BreadCrumb } from './BreadCrumb.vue'\nexport { default as BreadCrumbItem } from './BreadCrumbItem.vue'\n" + "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n" } ], "type": "components:ui" -} \ No newline at end of file +} diff --git a/apps/www/src/public/registry/styles/new-york/breadcrumb.json b/apps/www/src/public/registry/styles/new-york/breadcrumb.json new file mode 100644 index 000000000..a5c242c9b --- /dev/null +++ b/apps/www/src/public/registry/styles/new-york/breadcrumb.json @@ -0,0 +1,42 @@ +{ + "name": "breadcrumb", + "dependencies": [], + "registryDependencies": [ + "utils" + ], + "files": [ + { + "name": "Breadcrumb.vue", + "content": "\n\n\n" + }, + { + "name": "BreadcrumbEllipsis.vue", + "content": "\n\n\n" + }, + { + "name": "BreadcrumbItem.vue", + "content": "\n\n\n" + }, + { + "name": "BreadcrumbLink.vue", + "content": "\n\n\n" + }, + { + "name": "BreadcrumbList.vue", + "content": "\n\n\n" + }, + { + "name": "BreadcrumbPage.vue", + "content": "\n\n\n" + }, + { + "name": "BreadcrumbSeparator.vue", + "content": "\n\n\n" + }, + { + "name": "index.ts", + "content": "export { default as Breadcrumb } from './Breadcrumb.vue'\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue'\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue'\nexport { default as BreadcrumbList } from './BreadcrumbList.vue'\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue'\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'\n" + } + ], + "type": "components:ui" +} From 2cf4453551c1cc44d7e355ebceae0fb02b6bfa85 Mon Sep 17 00:00:00 2001 From: Saeid Zareie Date: Tue, 12 Mar 2024 16:10:00 +0330 Subject: [PATCH 2/5] fix: revert kbd component in main layout --- apps/www/.vitepress/theme/layout/MainLayout.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue index 796c32b1b..841f1ab88 100644 --- a/apps/www/.vitepress/theme/layout/MainLayout.vue +++ b/apps/www/.vitepress/theme/layout/MainLayout.vue @@ -6,6 +6,7 @@ import { type NavItem, docsConfig } from '../config/docs' import Logo from '../components/Logo.vue' import MobileNav from '../components/MobileNav.vue' +import Kbd from '../components/Kbd.vue' import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/lib/registry/default/ui/command' import { Button } from '@/lib/registry/default/ui/button' @@ -119,9 +120,9 @@ watch(() => $route.path, (n) => { > Search... - From f340cd7e1ce6da2f6daa2271e7432a9dc529ca5c Mon Sep 17 00:00:00 2001 From: Sadegh Barati Date: Tue, 12 Mar 2024 19:55:06 +0330 Subject: [PATCH 3/5] feat: add slot for `BreadcrumbEllipsis` icons too build registry, bump radix-vue --- apps/www/package.json | 2 +- .../ui/breadcrumb/BreadcrumbEllipsis.vue | 4 +++- .../ui/breadcrumb/BreadcrumbEllipsis.vue | 4 +++- .../registry/styles/default/breadcrumb.json | 2 +- .../registry/styles/new-york/breadcrumb.json | 2 +- pnpm-lock.yaml | 19 ++++++++++++++++--- 6 files changed, 25 insertions(+), 8 deletions(-) diff --git a/apps/www/package.json b/apps/www/package.json index fff425c8b..7ef4d7629 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -31,7 +31,7 @@ "embla-carousel-autoplay": "^8.0.0", "embla-carousel-vue": "^8.0.0", "lucide-vue-next": "^0.350.0", - "radix-vue": "^1.5.0", + "radix-vue": "^1.5.2", "tailwindcss-animate": "^1.0.7", "v-calendar": "^3.1.2", "vaul-vue": "^0.1.0", diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue index 238e7fda9..4925600d1 100644 --- a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue +++ b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue @@ -14,7 +14,9 @@ const props = defineProps<{ aria-hidden="true" :class="cn('flex h-9 w-9 items-center justify-center', props.class)" > - + + + More diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue index 08bc8b790..4efa9ac7e 100644 --- a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue +++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue @@ -14,7 +14,9 @@ const props = defineProps<{ aria-hidden="true" :class="cn('flex h-9 w-9 items-center justify-center', props.class)" > - + + + More diff --git a/apps/www/src/public/registry/styles/default/breadcrumb.json b/apps/www/src/public/registry/styles/default/breadcrumb.json index c08be5857..a6c594c3d 100644 --- a/apps/www/src/public/registry/styles/default/breadcrumb.json +++ b/apps/www/src/public/registry/styles/default/breadcrumb.json @@ -11,7 +11,7 @@ }, { "name": "BreadcrumbEllipsis.vue", - "content": "\n\n\n" + "content": "\n\n\n" }, { "name": "BreadcrumbItem.vue", diff --git a/apps/www/src/public/registry/styles/new-york/breadcrumb.json b/apps/www/src/public/registry/styles/new-york/breadcrumb.json index a5c242c9b..3e8957680 100644 --- a/apps/www/src/public/registry/styles/new-york/breadcrumb.json +++ b/apps/www/src/public/registry/styles/new-york/breadcrumb.json @@ -11,7 +11,7 @@ }, { "name": "BreadcrumbEllipsis.vue", - "content": "\n\n\n" + "content": "\n\n\n" }, { "name": "BreadcrumbItem.vue", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 464d3b836..1308de406 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -90,8 +90,8 @@ importers: specifier: ^0.350.0 version: 0.350.0(vue@3.4.21) radix-vue: - specifier: ^1.5.0 - version: 1.5.0(vue@3.4.21) + specifier: ^1.5.2 + version: 1.5.2(vue@3.4.21) tailwindcss-animate: specifier: ^1.0.7 version: 1.0.7(tailwindcss@3.4.1) @@ -11166,6 +11166,19 @@ packages: - vue dev: false + /radix-vue@1.5.2(vue@3.4.21): + resolution: {integrity: sha512-XyXB6mYm7dthW56LDHG4ttR3x+XtspTi48nSq4vHoHldgGZzAEa5VXlqUCr2J21fNKrt3NIYhIIRLB6kKwWwrA==} + dependencies: + '@floating-ui/dom': 1.6.1 + '@floating-ui/vue': 1.0.6(vue@3.4.21) + '@internationalized/date': 3.5.2 + fast-deep-equal: 3.1.3 + nanoid: 5.0.6 + transitivePeerDependencies: + - '@vue/composition-api' + - vue + dev: false + /radix3@1.1.0: resolution: {integrity: sha512-pNsHDxbGORSvuSScqNJ+3Km6QAVqk8CfsCBIEoDgpqLrkD2f3QM4I7d1ozJJ172OmIcoUcerZaNWqtLkRXTV3A==} dev: true @@ -13049,7 +13062,7 @@ packages: resolution: {integrity: sha512-3PYWMbN3cSdsciv3fzewskxZFnX61PYq1uNsbvizXDo/8sN4SMrWkYDqWaPdTD3GTEm6wpx7j5flRLg7A5ZXbQ==} dependencies: '@vueuse/core': 10.9.0(vue@3.4.21) - radix-vue: 1.5.0(vue@3.4.21) + radix-vue: 1.5.2(vue@3.4.21) vue: 3.4.21(typescript@5.4.2) transitivePeerDependencies: - '@vue/composition-api' From e41b20b32ee5764c0f116f4cb55beb4a1a98d634 Mon Sep 17 00:00:00 2001 From: Saeid Zareie Date: Wed, 13 Mar 2024 10:28:56 +0330 Subject: [PATCH 4/5] refactor: using primitive instead of computed --- .../default/ui/breadcrumb/BreadcrumbLink.vue | 23 +++++++++++-------- .../new-york/ui/breadcrumb/BreadcrumbLink.vue | 23 +++++++++++-------- .../registry/styles/default/breadcrumb.json | 2 +- .../registry/styles/new-york/breadcrumb.json | 2 +- 4 files changed, 30 insertions(+), 20 deletions(-) diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue index f25365d55..073dac4c6 100644 --- a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue +++ b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue @@ -1,18 +1,23 @@ diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue index f25365d55..073dac4c6 100644 --- a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue +++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue @@ -1,18 +1,23 @@ diff --git a/apps/www/src/public/registry/styles/default/breadcrumb.json b/apps/www/src/public/registry/styles/default/breadcrumb.json index c08be5857..b0eacc42b 100644 --- a/apps/www/src/public/registry/styles/default/breadcrumb.json +++ b/apps/www/src/public/registry/styles/default/breadcrumb.json @@ -19,7 +19,7 @@ }, { "name": "BreadcrumbLink.vue", - "content": "\n\n\n" + "content": "\n\n\n" }, { "name": "BreadcrumbList.vue", diff --git a/apps/www/src/public/registry/styles/new-york/breadcrumb.json b/apps/www/src/public/registry/styles/new-york/breadcrumb.json index a5c242c9b..1e099dd55 100644 --- a/apps/www/src/public/registry/styles/new-york/breadcrumb.json +++ b/apps/www/src/public/registry/styles/new-york/breadcrumb.json @@ -19,7 +19,7 @@ }, { "name": "BreadcrumbLink.vue", - "content": "\n\n\n" + "content": "\n\n\n" }, { "name": "BreadcrumbList.vue", From 5b684fe1620a293f69f7cee8621b4e7acd209fe0 Mon Sep 17 00:00:00 2001 From: sadeghbarati Date: Wed, 13 Mar 2024 10:52:10 +0330 Subject: [PATCH 5/5] chore: update --- .../lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue | 8 ++------ .../registry/new-york/ui/breadcrumb/BreadcrumbLink.vue | 8 ++------ 2 files changed, 4 insertions(+), 12 deletions(-) diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue index 073dac4c6..67de3947e 100644 --- a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue +++ b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue @@ -1,13 +1,9 @@ diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue index 073dac4c6..67de3947e 100644 --- a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue +++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue @@ -1,13 +1,9 @@