feat: breadcrumb component (#405)
* feat: adding breadcrumb component, resolves #395 * fix: revert kbd component in main layout * feat: add slot for `BreadcrumbEllipsis` icons too build registry, bump radix-vue * refactor: using primitive instead of computed * chore: update --------- Co-authored-by: Sadegh Barati <sadeghbaratiwork@gmail.com>
This commit is contained in:
Saeid Zareie
GitHub
parent
454ecf0df7
commit
4d08adc81e
|
|
@ -158,6 +158,12 @@ export const docsConfig: DocsConfig = {
|
||||||
href: '/docs/components/badge',
|
href: '/docs/components/badge',
|
||||||
items: [],
|
items: [],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: 'Breadcrumb',
|
||||||
|
href: '/docs/components/breadcrumb',
|
||||||
|
items: [],
|
||||||
|
label: 'New',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: 'Button',
|
title: 'Button',
|
||||||
href: '/docs/components/button',
|
href: '/docs/components/button',
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
import { useMagicKeys, useToggle } from '@vueuse/core'
|
import { useMagicKeys, useToggle } from '@vueuse/core'
|
||||||
import { onMounted, ref, watch } from 'vue'
|
import { onMounted, ref, watch } from 'vue'
|
||||||
import { Content, useData, useRoute, useRouter } from 'vitepress'
|
import { Content, useData, useRoute, useRouter } from 'vitepress'
|
||||||
import { SearchIcon } from 'lucide-vue-next'
|
|
||||||
import { type NavItem, docsConfig } from '../config/docs'
|
import { type NavItem, docsConfig } from '../config/docs'
|
||||||
import Logo from '../components/Logo.vue'
|
import Logo from '../components/Logo.vue'
|
||||||
import MobileNav from '../components/MobileNav.vue'
|
import MobileNav from '../components/MobileNav.vue'
|
||||||
|
|
@ -119,11 +118,11 @@ 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"
|
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"
|
@click="isOpen = true"
|
||||||
>
|
>
|
||||||
<span className="hidden lg:inline-flex">Search documentation...</span>
|
<span class="hidden lg:inline-flex">Search documentation...</span>
|
||||||
<span className="inline-flex lg:hidden">Search...</span>
|
<span class="inline-flex lg:hidden">Search...</span>
|
||||||
<kbd className="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
|
<Kbd class="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
|
||||||
<span className="text-xs">⌘</span>K
|
<span class="text-xs">⌘</span>K
|
||||||
</kbd>
|
</Kbd>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -73,6 +73,48 @@ export const Index = {
|
||||||
component: () => import("../src/lib/registry/default/example/BadgeSecondaryDemo.vue").then((m) => m.default),
|
component: () => import("../src/lib/registry/default/example/BadgeSecondaryDemo.vue").then((m) => m.default),
|
||||||
files: ["../src/lib/registry/default/example/BadgeSecondaryDemo.vue"],
|
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": {
|
"ButtonAsChildDemo": {
|
||||||
name: "ButtonAsChildDemo",
|
name: "ButtonAsChildDemo",
|
||||||
type: "components:example",
|
type: "components:example",
|
||||||
|
|
@ -1131,6 +1173,48 @@ export const Index = {
|
||||||
component: () => import("../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue").then((m) => m.default),
|
component: () => import("../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue").then((m) => m.default),
|
||||||
files: ["../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue"],
|
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": {
|
"ButtonAsChildDemo": {
|
||||||
name: "ButtonAsChildDemo",
|
name: "ButtonAsChildDemo",
|
||||||
type: "components:example",
|
type: "components:example",
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
"embla-carousel-autoplay": "^8.0.0",
|
"embla-carousel-autoplay": "^8.0.0",
|
||||||
"embla-carousel-vue": "^8.0.0",
|
"embla-carousel-vue": "^8.0.0",
|
||||||
"lucide-vue-next": "^0.350.0",
|
"lucide-vue-next": "^0.350.0",
|
||||||
"radix-vue": "^1.5.0",
|
"radix-vue": "^1.5.2",
|
||||||
"tailwindcss-animate": "^1.0.7",
|
"tailwindcss-animate": "^1.0.7",
|
||||||
"v-calendar": "^3.1.2",
|
"v-calendar": "^3.1.2",
|
||||||
"vaul-vue": "^0.1.0",
|
"vaul-vue": "^0.1.0",
|
||||||
|
|
|
||||||
205
apps/www/src/content/docs/components/breadcrumb.md
Normal file
205
apps/www/src/content/docs/components/breadcrumb.md
Normal file
|
|
@ -0,0 +1,205 @@
|
||||||
|
---
|
||||||
|
title: Breadcrumb
|
||||||
|
description: Displays the path to the current resource using a hierarchy of links.
|
||||||
|
---
|
||||||
|
|
||||||
|
<ComponentPreview name="BreadcrumbDemo" class="[&_.preview]:p-2" />
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx shadcn-ui@latest add breadcrumb
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/lib/components/ui/breadcrumb'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/">
|
||||||
|
Home
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/components">
|
||||||
|
Components
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Custom separator
|
||||||
|
|
||||||
|
Use a custom component as `slot` for `<BreadcrumbSeparator />` to create a custom separator.
|
||||||
|
|
||||||
|
<ComponentPreview name="BreadcrumbSeparatorDemo" />
|
||||||
|
|
||||||
|
```vue showLineNumbers {2,20-22}
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Slash } from 'lucide-react'
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/lib/components/ui/breadcrumb'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/">
|
||||||
|
Home
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator>
|
||||||
|
<Slash />
|
||||||
|
</BreadcrumbSeparator>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/components">
|
||||||
|
Components
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Dropdown
|
||||||
|
|
||||||
|
You can compose `<BreadcrumbItem />` with a `<DropdownMenu />` to create a dropdown in the breadcrumb.
|
||||||
|
|
||||||
|
<ComponentPreview name="BreadcrumbDropdown" class="[&_.preview]:p-2" />
|
||||||
|
|
||||||
|
```vue showLineNumbers {2-7,16-26}
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@/lib/components/ui/dropdown-menu'
|
||||||
|
|
||||||
|
import { BreadcrumbItem } from '@/lib/components/ui/breadcrumb'
|
||||||
|
|
||||||
|
import ChevronDownIcon from '~icons/radix-icons/chevron-down'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger class="flex items-center gap-1">
|
||||||
|
Components
|
||||||
|
<ChevronDownIcon />
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="start">
|
||||||
|
<DropdownMenuItem>Documentation</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>Themes</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>GitHub</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Collapsed
|
||||||
|
|
||||||
|
We provide a `<BreadcrumbEllipsis />` component to show a collapsed state when the breadcrumb is too long.
|
||||||
|
|
||||||
|
<ComponentPreview name="BreadcrumbEllipsisDemo" class="[&_.preview]:p-2" />
|
||||||
|
|
||||||
|
```vue showLineNumbers {3,15}
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbEllipsis,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbList,
|
||||||
|
} from '@/lib/components/ui/breadcrumb'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<!-- ... -->
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbEllipsis />
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<!-- ... -->
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Link component
|
||||||
|
|
||||||
|
To use a custom link component from your routing library, you can use the `asChild` prop on `<BreadcrumbLink />`.
|
||||||
|
|
||||||
|
<ComponentPreview name="BreadcrumbLinkDemo" />
|
||||||
|
|
||||||
|
```vue showLineNumbers {15-19}
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { RouterLink } from 'vue-router'
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
} from '@/lib/components/ui/breadcrumb'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink as-child>
|
||||||
|
<RouterLink to="/">
|
||||||
|
Home
|
||||||
|
</RouterLink>
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<!-- -->
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Responsive
|
||||||
|
|
||||||
|
Here's an example of a responsive breadcrumb that composes `<BreadcrumbItem />` with `<BreadcrumbEllipsis />`, `<DropdownMenu />`, and `<Drawer />`.
|
||||||
|
|
||||||
|
It displays a dropdown on desktop and a drawer on mobile.
|
||||||
|
|
||||||
|
<ComponentPreview name="BreadcrumbResponsive" class="[&_.preview]:p-2" />
|
||||||
53
apps/www/src/lib/registry/default/example/BreadcrumbDemo.vue
Normal file
53
apps/www/src/lib/registry/default/example/BreadcrumbDemo.vue
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbEllipsis,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/lib/registry/default/ui/breadcrumb'
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@/lib/registry/default/ui/dropdown-menu'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/">
|
||||||
|
Home
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger class="flex items-center gap-1">
|
||||||
|
<BreadcrumbEllipsis class="h-4 w-4" />
|
||||||
|
<span class="sr-only">Toggle menu</span>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="start">
|
||||||
|
<DropdownMenuItem>Documentation</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>Themes</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>GitHub</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/docs/components/accordion.html">
|
||||||
|
Components
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ChevronDown, Slash } from 'lucide-vue-next'
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/lib/registry/default/ui/breadcrumb'
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@/lib/registry/default/ui/dropdown-menu'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/">
|
||||||
|
Home
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator>
|
||||||
|
<Slash />
|
||||||
|
</BreadcrumbSeparator>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger class="flex items-center gap-1">
|
||||||
|
Components
|
||||||
|
<ChevronDown class="h-4 w-4" />
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="start">
|
||||||
|
<DropdownMenuItem>Documentation</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>Themes</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>GitHub</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator>
|
||||||
|
<Slash />
|
||||||
|
</BreadcrumbSeparator>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbEllipsis,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/lib/registry/default/ui/breadcrumb'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink as-child>
|
||||||
|
<a href="/">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbEllipsis />
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink as-child>
|
||||||
|
<a href="/docs/components/accordion.html">
|
||||||
|
Components
|
||||||
|
</a>
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/lib/registry/default/ui/breadcrumb'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink>
|
||||||
|
<a href="/">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink>
|
||||||
|
<a href="/docs/components/accordion.html">
|
||||||
|
Components
|
||||||
|
</a>
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,125 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useMediaQuery } from '@vueuse/core'
|
||||||
|
import { computed, ref } from 'vue'
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbEllipsis,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/lib/registry/default/ui/breadcrumb'
|
||||||
|
import { Button } from '@/lib/registry/default/ui/button'
|
||||||
|
import {
|
||||||
|
Drawer,
|
||||||
|
DrawerClose,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerDescription,
|
||||||
|
DrawerFooter,
|
||||||
|
DrawerHeader,
|
||||||
|
DrawerTitle,
|
||||||
|
DrawerTrigger,
|
||||||
|
} from '@/lib/registry/default/ui/drawer'
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@/lib/registry/default/ui/dropdown-menu'
|
||||||
|
|
||||||
|
const isDesktop = useMediaQuery('(min-width: 768px)')
|
||||||
|
const isOpen = ref(false)
|
||||||
|
const items = ref([
|
||||||
|
{ href: '#', label: 'Home' },
|
||||||
|
{ href: '#', label: 'Documentation' },
|
||||||
|
{ href: '#', label: 'Building Your Application' },
|
||||||
|
{ href: '#', label: 'Data Fetching' },
|
||||||
|
{ label: 'Caching and Revalidating' },
|
||||||
|
])
|
||||||
|
|
||||||
|
const itemsToDisplay = 3
|
||||||
|
const firstLabel = computed(() => items.value[0]?.label)
|
||||||
|
|
||||||
|
const allButLastTwoItems = computed(() => items.value.slice(1, -2))
|
||||||
|
const remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="{items[0].href}">
|
||||||
|
{{ firstLabel }}
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<template v-if="items.length > itemsToDisplay">
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<DropdownMenu v-if="isDesktop" v-model:open="isOpen">
|
||||||
|
<DropdownMenuTrigger
|
||||||
|
class="flex items-center gap-1"
|
||||||
|
aria-label="Toggle menu"
|
||||||
|
>
|
||||||
|
<BreadcrumbEllipsis class="h-4 w-4" />
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="start">
|
||||||
|
<DropdownMenuItem v-for="item of allButLastTwoItems" :key="item.label">
|
||||||
|
<a :href="item.href || '#'">
|
||||||
|
{{ item.label }}
|
||||||
|
</a>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
<Drawer v-else v-model:open="isOpen">
|
||||||
|
<DrawerTrigger aria-label="Toggle Menu">
|
||||||
|
<BreadcrumbEllipsis class="h-4 w-4" />
|
||||||
|
</DrawerTrigger>
|
||||||
|
<DrawerContent>
|
||||||
|
<DrawerHeader class="text-left">
|
||||||
|
<DrawerTitle>Navigate to</DrawerTitle>
|
||||||
|
<DrawerDescription>
|
||||||
|
Select a page to navigate to.
|
||||||
|
</DrawerDescription>
|
||||||
|
</DrawerHeader>
|
||||||
|
<div class="grid gap-1 px-4">
|
||||||
|
<a
|
||||||
|
v-for="item of allButLastTwoItems"
|
||||||
|
:key="item.label"
|
||||||
|
:href="item.href"
|
||||||
|
class="py-1 text-sm"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<DrawerFooter class="pt-4">
|
||||||
|
<DrawerClose as-child>
|
||||||
|
<Button variant="outline">
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
</DrawerClose>
|
||||||
|
</DrawerFooter>
|
||||||
|
</DrawerContent>
|
||||||
|
</Drawer>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
</template>
|
||||||
|
<BreadcrumbItem v-for=" item of remainingItems" :key="item.label">
|
||||||
|
<template v-if="item.href">
|
||||||
|
<BreadcrumbLink
|
||||||
|
as-child
|
||||||
|
class="max-w-20 truncate md:max-w-none"
|
||||||
|
>
|
||||||
|
<a :href="item.href">
|
||||||
|
{{ item.label }}
|
||||||
|
</a>
|
||||||
|
</BreadcrumbLink>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
</template>
|
||||||
|
<BreadcrumbPage v-else class="max-w-20 truncate md:max-w-none">
|
||||||
|
{{ item.label }}
|
||||||
|
</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { Slash } from 'lucide-vue-next'
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/lib/registry/default/ui/breadcrumb'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/">
|
||||||
|
Home
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator>
|
||||||
|
<Slash />
|
||||||
|
</BreadcrumbSeparator>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/docs/components/accordion.html">
|
||||||
|
Components
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator>
|
||||||
|
<Slash />
|
||||||
|
</BreadcrumbSeparator>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { HTMLAttributes } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
class?: HTMLAttributes['class']
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<nav aria-label="breadcrumb" :class="props.class">
|
||||||
|
<slot />
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { HTMLAttributes } from 'vue'
|
||||||
|
import { MoreHorizontal } from 'lucide-vue-next'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
class?: HTMLAttributes['class']
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<span
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
:class="cn('flex h-9 w-9 items-center justify-center', props.class)"
|
||||||
|
>
|
||||||
|
<slot>
|
||||||
|
<MoreHorizontal class="h-4 w-4" />
|
||||||
|
</slot>
|
||||||
|
<span class="sr-only">More</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { HTMLAttributes } from 'vue'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
class?: HTMLAttributes['class']
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<li
|
||||||
|
:class="cn('inline-flex items-center gap-1.5', props.class)"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { HTMLAttributes } from 'vue'
|
||||||
|
import { Primitive, type PrimitiveProps } from 'radix-vue'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
|
||||||
|
as: 'a',
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Primitive
|
||||||
|
:as="as"
|
||||||
|
:as-child="asChild"
|
||||||
|
:class="cn('transition-colors hover:text-foreground', props.class)"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</Primitive>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { HTMLAttributes } from 'vue'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
class?: HTMLAttributes['class']
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ol
|
||||||
|
:class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</ol>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { HTMLAttributes } from 'vue'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
class?: HTMLAttributes['class']
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<span
|
||||||
|
role="link"
|
||||||
|
aria-disabled="true"
|
||||||
|
aria-current="page"
|
||||||
|
:class="cn('font-normal text-foreground', props.class)"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { HTMLAttributes } from 'vue'
|
||||||
|
import { ChevronRight } from 'lucide-vue-next'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
class?: HTMLAttributes['class']
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<li
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
:class="cn('[&>svg]:size-3.5', props.class)"
|
||||||
|
>
|
||||||
|
<slot>
|
||||||
|
<ChevronRight />
|
||||||
|
</slot>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
7
apps/www/src/lib/registry/default/ui/breadcrumb/index.ts
Normal file
7
apps/www/src/lib/registry/default/ui/breadcrumb/index.ts
Normal file
|
|
@ -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'
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbEllipsis,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/lib/registry/new-york/ui/breadcrumb'
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@/lib/registry/new-york/ui/dropdown-menu'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/">
|
||||||
|
Home
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger class="flex items-center gap-1">
|
||||||
|
<BreadcrumbEllipsis class="h-4 w-4" />
|
||||||
|
<span class="sr-only">Toggle menu</span>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="start">
|
||||||
|
<DropdownMenuItem>Documentation</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>Themes</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>GitHub</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/docs/components/accordion.html">
|
||||||
|
Components
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ChevronDownIcon, SlashIcon } from '@radix-icons/vue'
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/lib/registry/new-york/ui/breadcrumb'
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@/lib/registry/new-york/ui/dropdown-menu'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/">
|
||||||
|
Home
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator>
|
||||||
|
<SlashIcon />
|
||||||
|
</BreadcrumbSeparator>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger class="flex items-center gap-1">
|
||||||
|
Components
|
||||||
|
<ChevronDownIcon class="h-4 w-4" />
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="start">
|
||||||
|
<DropdownMenuItem>Documentation</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>Themes</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem>GitHub</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator>
|
||||||
|
<SlashIcon />
|
||||||
|
</BreadcrumbSeparator>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbEllipsis,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/lib/registry/new-york/ui/breadcrumb'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink as-child>
|
||||||
|
<a href="/">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbEllipsis />
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink as-child>
|
||||||
|
<a href="/docs/components/accordion.html">
|
||||||
|
Components
|
||||||
|
</a>
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/lib/registry/new-york/ui/breadcrumb'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink>
|
||||||
|
<a href="/">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink>
|
||||||
|
<a href="/docs/components/accordion.html">
|
||||||
|
Components
|
||||||
|
</a>
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,125 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useMediaQuery } from '@vueuse/core'
|
||||||
|
import { computed, ref } from 'vue'
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbEllipsis,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/lib/registry/new-york/ui/breadcrumb'
|
||||||
|
import { Button } from '@/lib/registry/new-york/ui/button'
|
||||||
|
import {
|
||||||
|
Drawer,
|
||||||
|
DrawerClose,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerDescription,
|
||||||
|
DrawerFooter,
|
||||||
|
DrawerHeader,
|
||||||
|
DrawerTitle,
|
||||||
|
DrawerTrigger,
|
||||||
|
} from '@/lib/registry/new-york/ui/drawer'
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@/lib/registry/new-york/ui/dropdown-menu'
|
||||||
|
|
||||||
|
const isDesktop = useMediaQuery('(min-width: 768px)')
|
||||||
|
const isOpen = ref(false)
|
||||||
|
const items = ref([
|
||||||
|
{ href: '#', label: 'Home' },
|
||||||
|
{ href: '#', label: 'Documentation' },
|
||||||
|
{ href: '#', label: 'Building Your Application' },
|
||||||
|
{ href: '#', label: 'Data Fetching' },
|
||||||
|
{ label: 'Caching and Revalidating' },
|
||||||
|
])
|
||||||
|
|
||||||
|
const itemsToDisplay = 3
|
||||||
|
const firstLabel = computed(() => items.value[0]?.label)
|
||||||
|
|
||||||
|
const allButLastTwoItems = computed(() => items.value.slice(1, -2))
|
||||||
|
const remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="{items[0].href}">
|
||||||
|
{{ firstLabel }}
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
<template v-if="items.length > itemsToDisplay">
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<DropdownMenu v-if="isDesktop" v-model:open="isOpen">
|
||||||
|
<DropdownMenuTrigger
|
||||||
|
class="flex items-center gap-1"
|
||||||
|
aria-label="Toggle menu"
|
||||||
|
>
|
||||||
|
<BreadcrumbEllipsis class="h-4 w-4" />
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="start">
|
||||||
|
<DropdownMenuItem v-for="item of allButLastTwoItems" :key="item.label">
|
||||||
|
<a :href="item.href || '#'">
|
||||||
|
{{ item.label }}
|
||||||
|
</a>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
<Drawer v-else v-model:open="isOpen">
|
||||||
|
<DrawerTrigger aria-label="Toggle Menu">
|
||||||
|
<BreadcrumbEllipsis class="h-4 w-4" />
|
||||||
|
</DrawerTrigger>
|
||||||
|
<DrawerContent>
|
||||||
|
<DrawerHeader class="text-left">
|
||||||
|
<DrawerTitle>Navigate to</DrawerTitle>
|
||||||
|
<DrawerDescription>
|
||||||
|
Select a page to navigate to.
|
||||||
|
</DrawerDescription>
|
||||||
|
</DrawerHeader>
|
||||||
|
<div class="grid gap-1 px-4">
|
||||||
|
<a
|
||||||
|
v-for="item of allButLastTwoItems"
|
||||||
|
:key="item.label"
|
||||||
|
:href="item.href"
|
||||||
|
class="py-1 text-sm"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<DrawerFooter class="pt-4">
|
||||||
|
<DrawerClose as-child>
|
||||||
|
<Button variant="outline">
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
</DrawerClose>
|
||||||
|
</DrawerFooter>
|
||||||
|
</DrawerContent>
|
||||||
|
</Drawer>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
</template>
|
||||||
|
<BreadcrumbItem v-for=" item of remainingItems" :key="item.label">
|
||||||
|
<template v-if="item.href">
|
||||||
|
<BreadcrumbLink
|
||||||
|
as-child
|
||||||
|
class="max-w-20 truncate md:max-w-none"
|
||||||
|
>
|
||||||
|
<a :href="item.href">
|
||||||
|
{{ item.label }}
|
||||||
|
</a>
|
||||||
|
</BreadcrumbLink>
|
||||||
|
<BreadcrumbSeparator />
|
||||||
|
</template>
|
||||||
|
<BreadcrumbPage v-else class="max-w-20 truncate md:max-w-none">
|
||||||
|
{{ item.label }}
|
||||||
|
</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { SlashIcon } from '@radix-icons/vue'
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/lib/registry/new-york/ui/breadcrumb'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Breadcrumb>
|
||||||
|
<BreadcrumbList>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/">
|
||||||
|
Home
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator>
|
||||||
|
<SlashIcon />
|
||||||
|
</BreadcrumbSeparator>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbLink href="/docs/components/accordion.html">
|
||||||
|
Components
|
||||||
|
</BreadcrumbLink>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
<BreadcrumbSeparator>
|
||||||
|
<SlashIcon />
|
||||||
|
</BreadcrumbSeparator>
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { HTMLAttributes } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
class?: HTMLAttributes['class']
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<nav aria-label="breadcrumb" :class="props.class">
|
||||||
|
<slot />
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { HTMLAttributes } from 'vue'
|
||||||
|
import { DotsHorizontalIcon } from '@radix-icons/vue'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
class?: HTMLAttributes['class']
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<span
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
:class="cn('flex h-9 w-9 items-center justify-center', props.class)"
|
||||||
|
>
|
||||||
|
<slot>
|
||||||
|
<DotsHorizontalIcon class="h-4 w-4" />
|
||||||
|
</slot>
|
||||||
|
<span class="sr-only">More</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { HTMLAttributes } from 'vue'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
class?: HTMLAttributes['class']
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<li
|
||||||
|
:class="cn('inline-flex items-center gap-1.5', props.class)"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { HTMLAttributes } from 'vue'
|
||||||
|
import { Primitive, type PrimitiveProps } from 'radix-vue'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
|
||||||
|
as: 'a',
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Primitive
|
||||||
|
:as="as"
|
||||||
|
:as-child="asChild"
|
||||||
|
:class="cn('transition-colors hover:text-foreground', props.class)"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</Primitive>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { HTMLAttributes } from 'vue'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
class?: HTMLAttributes['class']
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ol
|
||||||
|
:class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</ol>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { HTMLAttributes } from 'vue'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
class?: HTMLAttributes['class']
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<span
|
||||||
|
role="link"
|
||||||
|
aria-disabled="true"
|
||||||
|
aria-current="page"
|
||||||
|
:class="cn('font-normal text-foreground', props.class)"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import type { HTMLAttributes } from 'vue'
|
||||||
|
import { ChevronRightIcon } from '@radix-icons/vue'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
class?: HTMLAttributes['class']
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<li
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
:class="cn('[&>svg]:size-3.5', props.class)"
|
||||||
|
>
|
||||||
|
<slot>
|
||||||
|
<ChevronRightIcon />
|
||||||
|
</slot>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
|
@ -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'
|
||||||
|
|
@ -85,6 +85,24 @@
|
||||||
],
|
],
|
||||||
"type": "components:ui"
|
"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",
|
"name": "button",
|
||||||
"dependencies": [],
|
"dependencies": [],
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,42 @@
|
||||||
{
|
{
|
||||||
"name": "breadcrumb",
|
"name": "breadcrumb",
|
||||||
"dependencies": [],
|
"dependencies": [],
|
||||||
"registryDependencies": [],
|
"registryDependencies": [
|
||||||
|
"utils"
|
||||||
|
],
|
||||||
"files": [
|
"files": [
|
||||||
{
|
{
|
||||||
"name": "BreadCrumb.vue",
|
"name": "Breadcrumb.vue",
|
||||||
"content": "<template>\n <ol class=\"flex items-center whitespace-nowrap min-w-0\">\n <slot />\n </ol>\n</template>\n"
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <nav aria-label=\"breadcrumb\" :class=\"props.class\">\n <slot />\n </nav>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "BreadCrumbItem.vue",
|
"name": "BreadcrumbEllipsis.vue",
|
||||||
"content": "<script setup lang=\"ts\">\nimport { ChevronRight } from 'lucide-vue-next'\n\ninterface BreadCrumbItemProps {\n path?: string\n lastItem?: boolean\n as?: string | object\n}\n\nconst props = withDefaults(defineProps<BreadCrumbItemProps>(), {\n as: 'span',\n})\n</script>\n\n<template>\n <li class=\"text-sm text-muted\">\n <component\n :is=\"props.as\"\n :to=\"props.path\"\n class=\"flex items-center\"\n :class=\"{\n '!font-semibold !text-foreground': $route.path === props.path,\n }\"\n >\n <slot />\n <ChevronRight\n v-if=\"!props.lastItem\"\n class=\"flex-shrink-0 h-3 w-3 text-muted mx-2\"\n />\n </component>\n </li>\n</template>\n"
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <span\n role=\"presentation\"\n aria-hidden=\"true\"\n :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n >\n <slot>\n <MoreHorizontal class=\"h-4 w-4\" />\n </slot>\n <span class=\"sr-only\">More</span>\n </span>\n</template>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "BreadcrumbItem.vue",
|
||||||
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <li\n :class=\"cn('inline-flex items-center gap-1.5', props.class)\"\n >\n <slot />\n </li>\n</template>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "BreadcrumbLink.vue",
|
||||||
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { PrimitiveProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends PrimitiveProps {\n as?: string\n class?: HTMLAttributes['class']\n}\nconst props = withDefaults(defineProps<Props>(), {\n as: 'a',\n})\n</script>\n\n<template>\n <Primitive\n :as=\"as\"\n :as-child=\"asChild\"\n :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n >\n <slot />\n </Primitive>\n</template>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "BreadcrumbList.vue",
|
||||||
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <ol\n :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)\"\n >\n <slot />\n </ol>\n</template>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "BreadcrumbPage.vue",
|
||||||
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <span\n role=\"link\"\n aria-disabled=\"true\"\n aria-current=\"page\"\n :class=\"cn('font-normal text-foreground', props.class)\"\n >\n <slot />\n </span>\n</template>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "BreadcrumbSeparator.vue",
|
||||||
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <li\n role=\"presentation\"\n aria-hidden=\"true\"\n :class=\"cn('[&>svg]:size-3.5', props.class)\"\n >\n <slot>\n <ChevronRight />\n </slot>\n </li>\n</template>\n"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "index.ts",
|
"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"
|
"type": "components:ui"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
42
apps/www/src/public/registry/styles/new-york/breadcrumb.json
Normal file
42
apps/www/src/public/registry/styles/new-york/breadcrumb.json
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
{
|
||||||
|
"name": "breadcrumb",
|
||||||
|
"dependencies": [],
|
||||||
|
"registryDependencies": [
|
||||||
|
"utils"
|
||||||
|
],
|
||||||
|
"files": [
|
||||||
|
{
|
||||||
|
"name": "Breadcrumb.vue",
|
||||||
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <nav aria-label=\"breadcrumb\" :class=\"props.class\">\n <slot />\n </nav>\n</template>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "BreadcrumbEllipsis.vue",
|
||||||
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <span\n role=\"presentation\"\n aria-hidden=\"true\"\n :class=\"cn('flex h-9 w-9 items-center justify-center', props.class)\"\n >\n <slot>\n <DotsHorizontalIcon class=\"h-4 w-4\" />\n </slot>\n <span class=\"sr-only\">More</span>\n </span>\n</template>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "BreadcrumbItem.vue",
|
||||||
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <li\n :class=\"cn('inline-flex items-center gap-1.5', props.class)\"\n >\n <slot />\n </li>\n</template>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "BreadcrumbLink.vue",
|
||||||
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { PrimitiveProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\ninterface Props extends PrimitiveProps {\n as?: string\n class?: HTMLAttributes['class']\n}\nconst props = withDefaults(defineProps<Props>(), {\n as: 'a',\n})\n</script>\n\n<template>\n <Primitive\n :as=\"as\"\n :as-child=\"asChild\"\n :class=\"cn('transition-colors hover:text-foreground', props.class)\"\n >\n <slot />\n </Primitive>\n</template>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "BreadcrumbList.vue",
|
||||||
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <ol\n :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)\"\n >\n <slot />\n </ol>\n</template>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "BreadcrumbPage.vue",
|
||||||
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <span\n role=\"link\"\n aria-disabled=\"true\"\n aria-current=\"page\"\n :class=\"cn('font-normal text-foreground', props.class)\"\n >\n <slot />\n </span>\n</template>\n"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "BreadcrumbSeparator.vue",
|
||||||
|
"content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n class?: HTMLAttributes['class']\n}>()\n</script>\n\n<template>\n <li\n role=\"presentation\"\n aria-hidden=\"true\"\n :class=\"cn('[&>svg]:size-3.5', props.class)\"\n >\n <slot>\n <ChevronRightIcon />\n </slot>\n </li>\n</template>\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"
|
||||||
|
}
|
||||||
|
|
@ -90,8 +90,8 @@ importers:
|
||||||
specifier: ^0.350.0
|
specifier: ^0.350.0
|
||||||
version: 0.350.0(vue@3.4.21)
|
version: 0.350.0(vue@3.4.21)
|
||||||
radix-vue:
|
radix-vue:
|
||||||
specifier: ^1.5.0
|
specifier: ^1.5.2
|
||||||
version: 1.5.0(vue@3.4.21)
|
version: 1.5.2(vue@3.4.21)
|
||||||
tailwindcss-animate:
|
tailwindcss-animate:
|
||||||
specifier: ^1.0.7
|
specifier: ^1.0.7
|
||||||
version: 1.0.7(tailwindcss@3.4.1)
|
version: 1.0.7(tailwindcss@3.4.1)
|
||||||
|
|
@ -11166,6 +11166,19 @@ packages:
|
||||||
- vue
|
- vue
|
||||||
dev: false
|
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:
|
/radix3@1.1.0:
|
||||||
resolution: {integrity: sha512-pNsHDxbGORSvuSScqNJ+3Km6QAVqk8CfsCBIEoDgpqLrkD2f3QM4I7d1ozJJ172OmIcoUcerZaNWqtLkRXTV3A==}
|
resolution: {integrity: sha512-pNsHDxbGORSvuSScqNJ+3Km6QAVqk8CfsCBIEoDgpqLrkD2f3QM4I7d1ozJJ172OmIcoUcerZaNWqtLkRXTV3A==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
@ -13049,7 +13062,7 @@ packages:
|
||||||
resolution: {integrity: sha512-3PYWMbN3cSdsciv3fzewskxZFnX61PYq1uNsbvizXDo/8sN4SMrWkYDqWaPdTD3GTEm6wpx7j5flRLg7A5ZXbQ==}
|
resolution: {integrity: sha512-3PYWMbN3cSdsciv3fzewskxZFnX61PYq1uNsbvizXDo/8sN4SMrWkYDqWaPdTD3GTEm6wpx7j5flRLg7A5ZXbQ==}
|
||||||
dependencies:
|
dependencies:
|
||||||
'@vueuse/core': 10.9.0(vue@3.4.21)
|
'@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)
|
vue: 3.4.21(typescript@5.4.2)
|
||||||
transitivePeerDependencies:
|
transitivePeerDependencies:
|
||||||
- '@vue/composition-api'
|
- '@vue/composition-api'
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user