Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: build registry

Browse Source
This commit is contained in:
Sadegh Barati 2024-12-05 00:04:34 +03:30
parent 8a8d1ef20a
commit 5eee449df5
3 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/www/src/public/r/styles/default/BreadcrumbResponsive.json
View File

@ -13,7 +13,7 @@
"files": [
{
"path": "example/BreadcrumbResponsive.vue",
"content": "<script lang=\"ts\" setup>\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n { href: '#', label: 'Home' },\n { href: '#', label: 'Documentation' },\n { href: '#', label: 'Building Your Application' },\n { href: '#', label: 'Data Fetching' },\n { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"{items[0].href}\">\n {{ firstLabel }}\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <template v-if=\"items.length > itemsToDisplay\">\n <BreadcrumbItem>\n <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n <DropdownMenuTrigger\n class=\"flex items-center gap-1\"\n aria-label=\"Toggle menu\"\n >\n <BreadcrumbEllipsis class=\"h-4 w-4\" />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n <a :href=\"item.href || '#'\">\n {{ item.label }}\n </a>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n <Drawer v-else v-model:open=\"isOpen\">\n <DrawerTrigger aria-label=\"Toggle Menu\">\n <BreadcrumbEllipsis class=\"h-4 w-4\" />\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader class=\"text-left\">\n <DrawerTitle>Navigate to</DrawerTitle>\n <DrawerDescription>\n Select a page to navigate to.\n </DrawerDescription>\n </DrawerHeader>\n <div class=\"grid gap-1 px-4\">\n <a\n v-for=\"item of allButLastTwoItems\"\n :key=\"item.label\"\n :href=\"item.href\"\n class=\"py-1 text-sm\"\n >\n {{ item.label }}\n </a>\n </div>\n <DrawerFooter class=\"pt-4\">\n <DrawerClose as-child>\n <Button variant=\"outline\">\n Close\n </Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n </template>\n <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n <template v-if=\"item.href\">\n <BreadcrumbLink\n as-child\n class=\"max-w-20 truncate md:max-w-none\"\n >\n <a :href=\"item.href\">\n {{ item.label }}\n </a>\n </BreadcrumbLink>\n <BreadcrumbSeparator />\n </template>\n <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n {{ item.label }}\n </BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n</template>\n",
"content": "<script lang=\"ts\" setup>\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n { href: '#', label: 'Home' },\n { href: '#', label: 'Documentation' },\n { href: '#', label: 'Building Your Application' },\n { href: '#', label: 'Data Fetching' },\n { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-Math.min(itemsToDisplay, items.value.length) + 1))\n</script>\n\n<template>\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"{items[0].href}\">\n {{ firstLabel }}\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <template v-if=\"items.length > itemsToDisplay\">\n <BreadcrumbItem>\n <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n <DropdownMenuTrigger\n class=\"flex items-center gap-1\"\n aria-label=\"Toggle menu\"\n >\n <BreadcrumbEllipsis class=\"h-4 w-4\" />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n <a :href=\"item.href || '#'\">\n {{ item.label }}\n </a>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n <Drawer v-else v-model:open=\"isOpen\">\n <DrawerTrigger aria-label=\"Toggle Menu\">\n <BreadcrumbEllipsis class=\"h-4 w-4\" />\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader class=\"text-left\">\n <DrawerTitle>Navigate to</DrawerTitle>\n <DrawerDescription>\n Select a page to navigate to.\n </DrawerDescription>\n </DrawerHeader>\n <div class=\"grid gap-1 px-4\">\n <a\n v-for=\"item of allButLastTwoItems\"\n :key=\"item.label\"\n :href=\"item.href\"\n class=\"py-1 text-sm\"\n >\n {{ item.label }}\n </a>\n </div>\n <DrawerFooter class=\"pt-4\">\n <DrawerClose as-child>\n <Button variant=\"outline\">\n Close\n </Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n </template>\n <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n <template v-if=\"item.href\">\n <BreadcrumbLink\n as-child\n class=\"max-w-20 truncate md:max-w-none\"\n >\n <a :href=\"item.href\">\n {{ item.label }}\n </a>\n </BreadcrumbLink>\n <BreadcrumbSeparator />\n </template>\n <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n {{ item.label }}\n </BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n</template>\n",
"type": "registry:example",
"target": ""
}

2
apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json
View File

@ -13,7 +13,7 @@
"files": [
{
"path": "example/BreadcrumbResponsive.vue",
"content": "<script lang=\"ts\" setup>\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n { href: '#', label: 'Home' },\n { href: '#', label: 'Documentation' },\n { href: '#', label: 'Building Your Application' },\n { href: '#', label: 'Data Fetching' },\n { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"{items[0].href}\">\n {{ firstLabel }}\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <template v-if=\"items.length > itemsToDisplay\">\n <BreadcrumbItem>\n <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n <DropdownMenuTrigger\n class=\"flex items-center gap-1\"\n aria-label=\"Toggle menu\"\n >\n <BreadcrumbEllipsis class=\"h-4 w-4\" />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n <a :href=\"item.href || '#'\">\n {{ item.label }}\n </a>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n <Drawer v-else v-model:open=\"isOpen\">\n <DrawerTrigger aria-label=\"Toggle Menu\">\n <BreadcrumbEllipsis class=\"h-4 w-4\" />\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader class=\"text-left\">\n <DrawerTitle>Navigate to</DrawerTitle>\n <DrawerDescription>\n Select a page to navigate to.\n </DrawerDescription>\n </DrawerHeader>\n <div class=\"grid gap-1 px-4\">\n <a\n v-for=\"item of allButLastTwoItems\"\n :key=\"item.label\"\n :href=\"item.href\"\n class=\"py-1 text-sm\"\n >\n {{ item.label }}\n </a>\n </div>\n <DrawerFooter class=\"pt-4\">\n <DrawerClose as-child>\n <Button variant=\"outline\">\n Close\n </Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n </template>\n <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n <template v-if=\"item.href\">\n <BreadcrumbLink\n as-child\n class=\"max-w-20 truncate md:max-w-none\"\n >\n <a :href=\"item.href\">\n {{ item.label }}\n </a>\n </BreadcrumbLink>\n <BreadcrumbSeparator />\n </template>\n <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n {{ item.label }}\n </BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n</template>\n",
"content": "<script lang=\"ts\" setup>\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n { href: '#', label: 'Home' },\n { href: '#', label: 'Documentation' },\n { href: '#', label: 'Building Your Application' },\n { href: '#', label: 'Data Fetching' },\n { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-Math.min(itemsToDisplay, items.value.length) + 1))\n</script>\n\n<template>\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"{items[0].href}\">\n {{ firstLabel }}\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <template v-if=\"items.length > itemsToDisplay\">\n <BreadcrumbItem>\n <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n <DropdownMenuTrigger\n class=\"flex items-center gap-1\"\n aria-label=\"Toggle menu\"\n >\n <BreadcrumbEllipsis class=\"h-4 w-4\" />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n <a :href=\"item.href || '#'\">\n {{ item.label }}\n </a>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n <Drawer v-else v-model:open=\"isOpen\">\n <DrawerTrigger aria-label=\"Toggle Menu\">\n <BreadcrumbEllipsis class=\"h-4 w-4\" />\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader class=\"text-left\">\n <DrawerTitle>Navigate to</DrawerTitle>\n <DrawerDescription>\n Select a page to navigate to.\n </DrawerDescription>\n </DrawerHeader>\n <div class=\"grid gap-1 px-4\">\n <a\n v-for=\"item of allButLastTwoItems\"\n :key=\"item.label\"\n :href=\"item.href\"\n class=\"py-1 text-sm\"\n >\n {{ item.label }}\n </a>\n </div>\n <DrawerFooter class=\"pt-4\">\n <DrawerClose as-child>\n <Button variant=\"outline\">\n Close\n </Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n </template>\n <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n <template v-if=\"item.href\">\n <BreadcrumbLink\n as-child\n class=\"max-w-20 truncate md:max-w-none\"\n >\n <a :href=\"item.href\">\n {{ item.label }}\n </a>\n </BreadcrumbLink>\n <BreadcrumbSeparator />\n </template>\n <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n {{ item.label }}\n </BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n</template>\n",
"type": "registry:example",
"target": ""
}

4
apps/www/src/public/r/temp.json
View File

@ -3520,7 +3520,7 @@
"files": [
{
"path": "example/BreadcrumbResponsive.vue",
"content": "<script lang=\"ts\" setup>\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n { href: '#', label: 'Home' },\n { href: '#', label: 'Documentation' },\n { href: '#', label: 'Building Your Application' },\n { href: '#', label: 'Data Fetching' },\n { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"{items[0].href}\">\n {{ firstLabel }}\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <template v-if=\"items.length > itemsToDisplay\">\n <BreadcrumbItem>\n <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n <DropdownMenuTrigger\n class=\"flex items-center gap-1\"\n aria-label=\"Toggle menu\"\n >\n <BreadcrumbEllipsis class=\"h-4 w-4\" />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n <a :href=\"item.href || '#'\">\n {{ item.label }}\n </a>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n <Drawer v-else v-model:open=\"isOpen\">\n <DrawerTrigger aria-label=\"Toggle Menu\">\n <BreadcrumbEllipsis class=\"h-4 w-4\" />\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader class=\"text-left\">\n <DrawerTitle>Navigate to</DrawerTitle>\n <DrawerDescription>\n Select a page to navigate to.\n </DrawerDescription>\n </DrawerHeader>\n <div class=\"grid gap-1 px-4\">\n <a\n v-for=\"item of allButLastTwoItems\"\n :key=\"item.label\"\n :href=\"item.href\"\n class=\"py-1 text-sm\"\n >\n {{ item.label }}\n </a>\n </div>\n <DrawerFooter class=\"pt-4\">\n <DrawerClose as-child>\n <Button variant=\"outline\">\n Close\n </Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n </template>\n <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n <template v-if=\"item.href\">\n <BreadcrumbLink\n as-child\n class=\"max-w-20 truncate md:max-w-none\"\n >\n <a :href=\"item.href\">\n {{ item.label }}\n </a>\n </BreadcrumbLink>\n <BreadcrumbSeparator />\n </template>\n <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n {{ item.label }}\n </BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n</template>\n",
"content": "<script lang=\"ts\" setup>\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n { href: '#', label: 'Home' },\n { href: '#', label: 'Documentation' },\n { href: '#', label: 'Building Your Application' },\n { href: '#', label: 'Data Fetching' },\n { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-Math.min(itemsToDisplay, items.value.length) + 1))\n</script>\n\n<template>\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"{items[0].href}\">\n {{ firstLabel }}\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <template v-if=\"items.length > itemsToDisplay\">\n <BreadcrumbItem>\n <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n <DropdownMenuTrigger\n class=\"flex items-center gap-1\"\n aria-label=\"Toggle menu\"\n >\n <BreadcrumbEllipsis class=\"h-4 w-4\" />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n <a :href=\"item.href || '#'\">\n {{ item.label }}\n </a>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n <Drawer v-else v-model:open=\"isOpen\">\n <DrawerTrigger aria-label=\"Toggle Menu\">\n <BreadcrumbEllipsis class=\"h-4 w-4\" />\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader class=\"text-left\">\n <DrawerTitle>Navigate to</DrawerTitle>\n <DrawerDescription>\n Select a page to navigate to.\n </DrawerDescription>\n </DrawerHeader>\n <div class=\"grid gap-1 px-4\">\n <a\n v-for=\"item of allButLastTwoItems\"\n :key=\"item.label\"\n :href=\"item.href\"\n class=\"py-1 text-sm\"\n >\n {{ item.label }}\n </a>\n </div>\n <DrawerFooter class=\"pt-4\">\n <DrawerClose as-child>\n <Button variant=\"outline\">\n Close\n </Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n </template>\n <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n <template v-if=\"item.href\">\n <BreadcrumbLink\n as-child\n class=\"max-w-20 truncate md:max-w-none\"\n >\n <a :href=\"item.href\">\n {{ item.label }}\n </a>\n </BreadcrumbLink>\n <BreadcrumbSeparator />\n </template>\n <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n {{ item.label }}\n </BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n</template>\n",
"type": "registry:example",
"target": ""
}
@ -10812,7 +10812,7 @@
"files": [
{
"path": "example/BreadcrumbResponsive.vue",
"content": "<script lang=\"ts\" setup>\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n { href: '#', label: 'Home' },\n { href: '#', label: 'Documentation' },\n { href: '#', label: 'Building Your Application' },\n { href: '#', label: 'Data Fetching' },\n { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"{items[0].href}\">\n {{ firstLabel }}\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <template v-if=\"items.length > itemsToDisplay\">\n <BreadcrumbItem>\n <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n <DropdownMenuTrigger\n class=\"flex items-center gap-1\"\n aria-label=\"Toggle menu\"\n >\n <BreadcrumbEllipsis class=\"h-4 w-4\" />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n <a :href=\"item.href || '#'\">\n {{ item.label }}\n </a>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n <Drawer v-else v-model:open=\"isOpen\">\n <DrawerTrigger aria-label=\"Toggle Menu\">\n <BreadcrumbEllipsis class=\"h-4 w-4\" />\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader class=\"text-left\">\n <DrawerTitle>Navigate to</DrawerTitle>\n <DrawerDescription>\n Select a page to navigate to.\n </DrawerDescription>\n </DrawerHeader>\n <div class=\"grid gap-1 px-4\">\n <a\n v-for=\"item of allButLastTwoItems\"\n :key=\"item.label\"\n :href=\"item.href\"\n class=\"py-1 text-sm\"\n >\n {{ item.label }}\n </a>\n </div>\n <DrawerFooter class=\"pt-4\">\n <DrawerClose as-child>\n <Button variant=\"outline\">\n Close\n </Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n </template>\n <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n <template v-if=\"item.href\">\n <BreadcrumbLink\n as-child\n class=\"max-w-20 truncate md:max-w-none\"\n >\n <a :href=\"item.href\">\n {{ item.label }}\n </a>\n </BreadcrumbLink>\n <BreadcrumbSeparator />\n </template>\n <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n {{ item.label }}\n </BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n</template>\n",
"content": "<script lang=\"ts\" setup>\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n { href: '#', label: 'Home' },\n { href: '#', label: 'Documentation' },\n { href: '#', label: 'Building Your Application' },\n { href: '#', label: 'Data Fetching' },\n { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-Math.min(itemsToDisplay, items.value.length) + 1))\n</script>\n\n<template>\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem>\n <BreadcrumbLink href=\"{items[0].href}\">\n {{ firstLabel }}\n </BreadcrumbLink>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n <template v-if=\"items.length > itemsToDisplay\">\n <BreadcrumbItem>\n <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n <DropdownMenuTrigger\n class=\"flex items-center gap-1\"\n aria-label=\"Toggle menu\"\n >\n <BreadcrumbEllipsis class=\"h-4 w-4\" />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\">\n <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n <a :href=\"item.href || '#'\">\n {{ item.label }}\n </a>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n <Drawer v-else v-model:open=\"isOpen\">\n <DrawerTrigger aria-label=\"Toggle Menu\">\n <BreadcrumbEllipsis class=\"h-4 w-4\" />\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader class=\"text-left\">\n <DrawerTitle>Navigate to</DrawerTitle>\n <DrawerDescription>\n Select a page to navigate to.\n </DrawerDescription>\n </DrawerHeader>\n <div class=\"grid gap-1 px-4\">\n <a\n v-for=\"item of allButLastTwoItems\"\n :key=\"item.label\"\n :href=\"item.href\"\n class=\"py-1 text-sm\"\n >\n {{ item.label }}\n </a>\n </div>\n <DrawerFooter class=\"pt-4\">\n <DrawerClose as-child>\n <Button variant=\"outline\">\n Close\n </Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n </BreadcrumbItem>\n <BreadcrumbSeparator />\n </template>\n <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n <template v-if=\"item.href\">\n <BreadcrumbLink\n as-child\n class=\"max-w-20 truncate md:max-w-none\"\n >\n <a :href=\"item.href\">\n {{ item.label }}\n </a>\n </BreadcrumbLink>\n <BreadcrumbSeparator />\n </template>\n <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n {{ item.label }}\n </BreadcrumbPage>\n </BreadcrumbItem>\n </BreadcrumbList>\n </Breadcrumb>\n</template>\n",
"type": "registry:example",
"target": ""
}