From 4d08adc81e65b8a5fe8e31344c17fd16e7bf5b68 Mon Sep 17 00:00:00 2001 From: Saeid Zareie <65568529+Saeid-Za@users.noreply.github.com> Date: Wed, 13 Mar 2024 11:03:22 +0330 Subject: [PATCH 01/13] 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 --- apps/www/.vitepress/theme/config/docs.ts | 6 + .../.vitepress/theme/layout/MainLayout.vue | 11 +- apps/www/__registry__/index.ts | 84 +++++++ apps/www/package.json | 2 +- .../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 | 22 ++ .../default/ui/breadcrumb/BreadcrumbItem.vue | 16 ++ .../default/ui/breadcrumb/BreadcrumbLink.vue | 19 ++ .../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 | 22 ++ .../new-york/ui/breadcrumb/BreadcrumbItem.vue | 16 ++ .../new-york/ui/breadcrumb/BreadcrumbLink.vue | 19 ++ .../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 ++++ pnpm-lock.yaml | 19 +- 37 files changed, 1358 insertions(+), 17 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 9c2040c4..ea8631df 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 ca2c4f07..841f1ab8 100644 --- a/apps/www/.vitepress/theme/layout/MainLayout.vue +++ b/apps/www/.vitepress/theme/layout/MainLayout.vue @@ -2,7 +2,6 @@ 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' @@ -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" @click="isOpen = true" > - Search documentation... - Search... - - ⌘K - + + Search... + diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts index 152f0e1a..92472ada 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/package.json b/apps/www/package.json index fff425c8..7ef4d762 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/content/docs/components/breadcrumb.md b/apps/www/src/content/docs/components/breadcrumb.md new file mode 100644 index 00000000..86c44a6f --- /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 00000000..f0992b3f --- /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 00000000..ab603bb6 --- /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 00000000..73f5b22e --- /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 00000000..06cb3533 --- /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 00000000..746213b3 --- /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 00000000..4d4e7a1f --- /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 00000000..72ca1437 --- /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 00000000..4925600d --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue @@ -0,0 +1,22 @@ + + + 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 00000000..42e721cd --- /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 00000000..67de3947 --- /dev/null +++ b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbLink.vue @@ -0,0 +1,19 @@ + + + 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 00000000..60856cc4 --- /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 00000000..fe43bda6 --- /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 00000000..436015df --- /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 00000000..05909832 --- /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 00000000..9d003b3a --- /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 00000000..47fe7c4e --- /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 00000000..68d00baa --- /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 00000000..2107e89a --- /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 00000000..2d1b937a --- /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 00000000..157220a8 --- /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 00000000..72ca1437 --- /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 00000000..4efa9ac7 --- /dev/null +++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue @@ -0,0 +1,22 @@ + + + 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 00000000..42e721cd --- /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 00000000..67de3947 --- /dev/null +++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbLink.vue @@ -0,0 +1,19 @@ + + + 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 00000000..60856cc4 --- /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 00000000..fe43bda6 --- /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 00000000..1b03cbcd --- /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 00000000..05909832 --- /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 f2d46eb8..41e09b23 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 b597e1d3..b902af70 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": "BreadCrumbItem.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 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 00000000..5529cc9e --- /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" +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 464d3b83..1308de40 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 72f9bd5ef560be52528ecc1f105cce903a37a3c9 Mon Sep 17 00:00:00 2001 From: zernonia <59365435+zernonia@users.noreply.github.com> Date: Thu, 14 Mar 2024 18:28:13 +0800 Subject: [PATCH 02/13] refactor: code preview (#411) * feat: generate code dynamically * chore: cleanup and transform path on component * feat: create config sheet * feat: code wrapper * fix: not acting immediately * chore: add key to vnode * chore: add vue-sonner to demos dependencies, add placeholder for codeConfigs * chore: fix wrong icons * chore: improve crawling logic --------- Co-authored-by: Sadegh Barati --- apps/www/.vitepress/config.mts | 9 +- .../theme/components/CodeConfigCustomizer.vue | 98 +++++++++++++++++++ .../theme/components/CodeSandbox.vue | 11 ++- .../theme/components/CodeWrapper.ts | 46 +++++++++ .../theme/components/ComponentPreview.vue | 39 ++++++-- .../theme/components/Stackblitz.vue | 10 +- apps/www/.vitepress/theme/components/index.ts | 1 + apps/www/.vitepress/theme/config/shiki.ts | 6 ++ .../.vitepress/theme/layout/MainLayout.vue | 20 ++-- .../.vitepress/theme/plugins/codewrapper.ts | 20 ++++ .../www/.vitepress/theme/plugins/previewer.ts | 32 +----- apps/www/.vitepress/theme/plugins/utils.ts | 31 ------ apps/www/.vitepress/theme/utils/codeeditor.ts | 11 +-- apps/www/package.json | 1 + .../default/example/InputWithIcon.vue | 4 +- .../registry/new-york/example/DrawerDemo.vue | 6 +- apps/www/src/stores/config.ts | 31 +++++- apps/www/tsconfig.json | 2 +- pnpm-lock.yaml | 3 + 19 files changed, 278 insertions(+), 103 deletions(-) create mode 100644 apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue create mode 100644 apps/www/.vitepress/theme/components/CodeWrapper.ts create mode 100644 apps/www/.vitepress/theme/config/shiki.ts create mode 100644 apps/www/.vitepress/theme/plugins/codewrapper.ts diff --git a/apps/www/.vitepress/config.mts b/apps/www/.vitepress/config.mts index 69ffd5f9..d729444e 100644 --- a/apps/www/.vitepress/config.mts +++ b/apps/www/.vitepress/config.mts @@ -3,16 +3,12 @@ import { defineConfig } from 'vitepress' import Icons from 'unplugin-icons/vite' import tailwind from 'tailwindcss' import autoprefixer from 'autoprefixer' -import { createCssVariablesTheme } from 'shiki' +import { cssVariables } from './theme/config/shiki' // import { transformerMetaWordHighlight, transformerNotationWordHighlight } from '@shikijs/transformers' import { siteConfig } from './theme/config/site' import ComponentPreviewPlugin from './theme/plugins/previewer' - -const cssVariables = createCssVariablesTheme({ - variablePrefix: '--shiki-', - variableDefaults: {}, -}) +import CodeWrapperPlugin from './theme/plugins/codewrapper' // https://vitepress.dev/reference/site-config export default defineConfig({ @@ -65,6 +61,7 @@ export default defineConfig({ ], config(md) { md.use(ComponentPreviewPlugin) + md.use(CodeWrapperPlugin) }, }, rewrites: { diff --git a/apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue b/apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue new file mode 100644 index 00000000..fa85049a --- /dev/null +++ b/apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue @@ -0,0 +1,98 @@ + + + diff --git a/apps/www/.vitepress/theme/components/CodeSandbox.vue b/apps/www/.vitepress/theme/components/CodeSandbox.vue index 8b55d399..ce594013 100644 --- a/apps/www/.vitepress/theme/components/CodeSandbox.vue +++ b/apps/www/.vitepress/theme/components/CodeSandbox.vue @@ -1,10 +1,10 @@ -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/avatar.md b/apps/www/src/content/docs/components/avatar.md index 0f1dbdef..ae7668fd 100644 --- a/apps/www/src/content/docs/components/avatar.md +++ b/apps/www/src/content/docs/components/avatar.md @@ -1,20 +1,17 @@ --- title: Avatar description: An image element with a fallback for representing the user. -source: apps/www/src/lib/registry/default/ui/avatar +source: apps/www/src/lib/registry/default/ui/avatar primitive: https://www.radix-vue.com/components/avatar.html --- - - - + ## Installation - ```bash npx shadcn-vue@latest add avatar -``` +``` ## Usage @@ -29,4 +26,4 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' CN -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/badge.md b/apps/www/src/content/docs/components/badge.md index 08b8b030..714ba2cb 100644 --- a/apps/www/src/content/docs/components/badge.md +++ b/apps/www/src/content/docs/components/badge.md @@ -3,8 +3,7 @@ title: Badge description: Displays a badge or a component that looks like a badge. --- - - + ## Installation @@ -80,13 +79,11 @@ import { Badge } from '@/components/ui/badge' ``` - ## Examples ### Default - - + ### Secondary @@ -98,4 +95,4 @@ import { Badge } from '@/components/ui/badge' ### Destructive - \ No newline at end of file + diff --git a/apps/www/src/content/docs/components/button.md b/apps/www/src/content/docs/components/button.md index 3fb5d55e..d02a5357 100644 --- a/apps/www/src/content/docs/components/button.md +++ b/apps/www/src/content/docs/components/button.md @@ -3,8 +3,7 @@ title: Button description: Displays a button or a component that looks like a button. --- - - + ## Installation @@ -94,24 +93,20 @@ import { Button } from '@/components/ui/button' ``` - ## Examples ### Primary - - + ### Secondary - ### Destructive - ### Outline @@ -138,4 +133,4 @@ import { Button } from '@/components/ui/button' ### As Child - \ No newline at end of file + diff --git a/apps/www/src/content/docs/components/calendar.md b/apps/www/src/content/docs/components/calendar.md index ab0dff47..416aa0f8 100644 --- a/apps/www/src/content/docs/components/calendar.md +++ b/apps/www/src/content/docs/components/calendar.md @@ -1,12 +1,11 @@ --- title: Calendar description: A date field component that allows users to enter and edit date. -source: apps/www/src/lib/registry/default/ui/calendar +source: apps/www/src/lib/registry/default/ui/calendar primitive: https://vcalendar.io/ --- - - + ## About @@ -34,13 +33,10 @@ npm install v-calendar ### Copy and paste the following code into your project - <<< @/lib/registry/default/ui/calendar/Calendar.vue - - @@ -92,4 +88,4 @@ import { Calendar } from '@/components/ui/calendar' -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/card.md b/apps/www/src/content/docs/components/card.md index 512d1761..dd11d35c 100644 --- a/apps/www/src/content/docs/components/card.md +++ b/apps/www/src/content/docs/components/card.md @@ -3,16 +3,13 @@ title: Card description: Displays a card with header, content, and footer. --- - - + ## Installation - - ```bash npx shadcn-vue@latest add card -``` +``` ## Usage @@ -46,4 +43,4 @@ import { ## Examples - \ No newline at end of file + diff --git a/apps/www/src/content/docs/components/checkbox.md b/apps/www/src/content/docs/components/checkbox.md index 07697e6e..283d1fe4 100644 --- a/apps/www/src/content/docs/components/checkbox.md +++ b/apps/www/src/content/docs/components/checkbox.md @@ -1,20 +1,17 @@ --- title: Checkbox description: A control that allows the user to toggle between checked and not checked. -source: apps/www/src/lib/registry/default/ui/checkbox +source: apps/www/src/lib/registry/default/ui/checkbox primitive: https://www.radix-vue.com/components/checkbox.html --- - - - + ## Installation - ```bash npx shadcn-vue@latest add checkbox -``` +``` ## Usage diff --git a/apps/www/src/content/docs/components/collapsible.md b/apps/www/src/content/docs/components/collapsible.md index 19f32739..185601d4 100644 --- a/apps/www/src/content/docs/components/collapsible.md +++ b/apps/www/src/content/docs/components/collapsible.md @@ -1,23 +1,21 @@ ---- +--- title: Collapsible description: An interactive component which expands/collapses a panel. -source: apps/www/src/lib/registry/default/ui/collapsible +source: apps/www/src/lib/registry/default/ui/collapsible primitive: https://www.radix-vue.com/components/collapsible.html --- - - + ## Installation - ### Run the following command ```bash npx shadcn-vue@latest add collapsible -``` +``` ### Update `tailwind.config.js` @@ -46,9 +44,8 @@ module.exports = { }, } ``` - - + ## Usage @@ -73,4 +70,4 @@ const isOpen = ref(false) -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/command.md b/apps/www/src/content/docs/components/command.md index eb77f9b6..f059004d 100644 --- a/apps/www/src/content/docs/components/command.md +++ b/apps/www/src/content/docs/components/command.md @@ -1,21 +1,17 @@ --- title: Command description: Fast, composable, unstyled command menu. -source: apps/www/src/lib/registry/default/ui/command +source: apps/www/src/lib/registry/default/ui/command primitive: https://www.radix-vue.com/components/combobox.html --- - - - - + ## Installation - ```bash npx shadcn-vue@latest add command -``` +``` ## Usage ```vue @@ -66,9 +62,9 @@ import { ``` -## Examples +## Examples -### Dialog +### Dialog diff --git a/apps/www/src/content/docs/components/context-menu.md b/apps/www/src/content/docs/components/context-menu.md index 13bc11ec..cc718ce8 100644 --- a/apps/www/src/content/docs/components/context-menu.md +++ b/apps/www/src/content/docs/components/context-menu.md @@ -1,18 +1,17 @@ ---- +--- title: Context Menu description: Displays a menu to the user — such as a set of actions or functions — triggered by a button. -source: apps/www/src/lib/registry/default/ui/context-menu +source: apps/www/src/lib/registry/default/ui/context-menu primitive: https://www.radix-vue.com/components/context-menu.html --- - - + ## Installation - + ```bash npx shadcn-vue@latest add context-menu -``` +``` ## Usage @@ -46,4 +45,4 @@ import { -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/date-picker.md b/apps/www/src/content/docs/components/date-picker.md index 3fbdc563..7416c51c 100644 --- a/apps/www/src/content/docs/components/date-picker.md +++ b/apps/www/src/content/docs/components/date-picker.md @@ -3,8 +3,7 @@ title: Date Picker description: A date picker component with range and presets. --- - - + ## Installation @@ -53,7 +52,6 @@ const date = ref() ``` - ## Examples ### Date Picker diff --git a/apps/www/src/content/docs/components/dialog.md b/apps/www/src/content/docs/components/dialog.md index 5c407e19..de448dbb 100644 --- a/apps/www/src/content/docs/components/dialog.md +++ b/apps/www/src/content/docs/components/dialog.md @@ -1,13 +1,12 @@ --- title: Dialog description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. -source: apps/www/src/lib/registry/default/ui/dialog +source: apps/www/src/lib/registry/default/ui/dialog primitive: https://www.radix-vue.com/components/dialog.html --- + - - ## Installation ```bash npx shadcn-vue@latest add dialog @@ -49,11 +48,11 @@ import { ``` -## Examples +## Examples ### Custom close button - + ### Scroll body @@ -67,7 +66,6 @@ import { To activate the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or `Dropdown Menu` component in the `Dialog` component. For more information, refer to the linked issue [here](https://github.com/radix-ui/primitives/issues/1836). - ```js:line-numbers showLineNumber{14-25} diff --git a/apps/www/src/content/docs/components/form.md b/apps/www/src/content/docs/components/form.md index 955586e9..1bb4cf7f 100644 --- a/apps/www/src/content/docs/components/form.md +++ b/apps/www/src/content/docs/components/form.md @@ -16,12 +16,10 @@ Well-designed HTML forms are: In this guide, we will take a look at building forms with [`vee-validate`](https://vee-validate.logaretm.com/v4/) and [`zod`](https://zod.dev). We're going to use a `` component to compose accessible forms using Radix Vue components. - ## Features The `
` component is a wrapper around the `vee-validate` library. It provides a few things: - - Composable components for building forms. - A `` component for building controlled form fields. - Form validation using `zod`. @@ -53,7 +51,6 @@ The `` component is a wrapper around the `vee-validate` library. It prov ## Example - -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/navigation-menu.md b/apps/www/src/content/docs/components/navigation-menu.md index e8530cf6..f1748f57 100644 --- a/apps/www/src/content/docs/components/navigation-menu.md +++ b/apps/www/src/content/docs/components/navigation-menu.md @@ -1,13 +1,13 @@ --- title: Navigation Menu description: A collection of links for navigating websites. -source: apps/www/src/lib/registry/default/ui/navigation-menu +source: apps/www/src/lib/registry/default/ui/navigation-menu primitive: https://www.radix-vue.com/components/navigation-menu.html --- - + -## Installation +## Installation ```bash npx shadcn-vue@latest add navigation-menu @@ -43,7 +43,7 @@ import { ``` -## Examples +## Examples ### Link Component @@ -64,4 +64,3 @@ import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu' ``` - diff --git a/apps/www/src/content/docs/components/pagination.md b/apps/www/src/content/docs/components/pagination.md index 16d1429f..cdc75bce 100644 --- a/apps/www/src/content/docs/components/pagination.md +++ b/apps/www/src/content/docs/components/pagination.md @@ -5,15 +5,14 @@ source: apps/www/src/lib/registry/default/ui/pagination primitive: https://www.radix-vue.com/components/pagination.html --- - + ## Installation - ```bash npx shadcn-vue@latest add pagination ``` - + ## Usage ```vue diff --git a/apps/www/src/content/docs/components/popover.md b/apps/www/src/content/docs/components/popover.md index 4a19b82e..78263750 100644 --- a/apps/www/src/content/docs/components/popover.md +++ b/apps/www/src/content/docs/components/popover.md @@ -1,16 +1,14 @@ --- title: Popover description: Displays rich content in a portal, triggered by a button. -source: apps/www/src/lib/registry/default/ui/popover +source: apps/www/src/lib/registry/default/ui/popover primitive: https://www.radix-vue.com/components/popover.html --- - - + ## Installation - ```bash npx shadcn-vue@latest add popover ``` @@ -34,4 +32,4 @@ import { -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/progress.md b/apps/www/src/content/docs/components/progress.md index bb1515a6..98afe907 100644 --- a/apps/www/src/content/docs/components/progress.md +++ b/apps/www/src/content/docs/components/progress.md @@ -1,13 +1,11 @@ --- title: Progress description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. -source: apps/www/src/lib/registry/default/ui/progress +source: apps/www/src/lib/registry/default/ui/progress primitive: https://www.radix-vue.com/components/progress.html --- - - - + ## Installation @@ -48,4 +46,4 @@ import { Progress } from '@/components/ui/progress' -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/radio-group.md b/apps/www/src/content/docs/components/radio-group.md index 9dbbabbf..dc6b3a2c 100644 --- a/apps/www/src/content/docs/components/radio-group.md +++ b/apps/www/src/content/docs/components/radio-group.md @@ -1,15 +1,14 @@ --- title: Radio Group description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. -source: apps/www/src/lib/registry/default/ui/radio-group +source: apps/www/src/lib/registry/default/ui/radio-group primitive: https://www.radix-vue.com/components/radio-group.html --- - + ## Installation - ```bash npx shadcn-vue@latest add radio-group ``` diff --git a/apps/www/src/content/docs/components/scroll-area.md b/apps/www/src/content/docs/components/scroll-area.md index edac7a4c..671cc226 100644 --- a/apps/www/src/content/docs/components/scroll-area.md +++ b/apps/www/src/content/docs/components/scroll-area.md @@ -1,15 +1,14 @@ --- title: Scroll-area description: Augments native scroll functionality for custom, cross-browser styling. -source: apps/www/src/lib/registry/default/ui/scroll-area +source: apps/www/src/lib/registry/default/ui/scroll-area primitive: https://www.radix-vue.com/components/scroll-area.html --- - + ## Installation - ```bash npx shadcn-vue@latest add scroll-area ``` @@ -37,4 +36,3 @@ import { ScrollArea } from '@/components/ui/scroll-area' ### Horizontal Scrolling - diff --git a/apps/www/src/content/docs/components/separator.md b/apps/www/src/content/docs/components/separator.md index 3e0bc281..898bc9c8 100644 --- a/apps/www/src/content/docs/components/separator.md +++ b/apps/www/src/content/docs/components/separator.md @@ -1,12 +1,11 @@ --- title: Separator description: Visually or semantically separates content. -source: apps/www/src/lib/registry/default/ui/separator +source: apps/www/src/lib/registry/default/ui/separator primitive: https://www.radix-vue.com/components/separator.html --- - - + ## Installation @@ -32,7 +31,6 @@ npm install radix-vue <<< @/lib/registry/default/ui/separator/Separator.vue - @@ -48,4 +46,4 @@ import { Separator } from '@/components/ui/separator' -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/sheet.md b/apps/www/src/content/docs/components/sheet.md index 6d2e90ac..4447d310 100644 --- a/apps/www/src/content/docs/components/sheet.md +++ b/apps/www/src/content/docs/components/sheet.md @@ -1,15 +1,14 @@ --- title: Sheet description: Extends the Dialog component to display content that complements the main content of the screen. -source: apps/www/src/lib/registry/default/ui/sheet +source: apps/www/src/lib/registry/default/ui/sheet primitive: https://www.radix-vue.com/components/dialog.html --- - - + ## Installation - + ```bash npx shadcn-vue@latest add sheet ``` @@ -50,8 +49,7 @@ import { Use the `side` property to `` to indicate the edge of the screen where the component will appear. The values can be `top`, `right`, `bottom` or `left`. - - + ### Size diff --git a/apps/www/src/content/docs/components/sonner.md b/apps/www/src/content/docs/components/sonner.md index 792b4352..733276b0 100644 --- a/apps/www/src/content/docs/components/sonner.md +++ b/apps/www/src/content/docs/components/sonner.md @@ -2,7 +2,7 @@ title: Sonner description: An opinionated toast component for Vue. docs: https://vue-sonner.vercel.app -source: apps/www/src/lib/registry/default/ui/sonner +source: apps/www/src/lib/registry/default/ui/sonner --- @@ -34,7 +34,7 @@ import { Toaster } from '@/components/ui/sonner' ``` - + ## Usage diff --git a/apps/www/src/content/docs/components/switch.md b/apps/www/src/content/docs/components/switch.md index a359a4df..d1dbfd08 100644 --- a/apps/www/src/content/docs/components/switch.md +++ b/apps/www/src/content/docs/components/switch.md @@ -1,12 +1,11 @@ --- title: Switch description: A control that allows the user to toggle between checked and not checked. -source: apps/www/src/lib/registry/default/ui/switch +source: apps/www/src/lib/registry/default/ui/switch primitive: https://www.radix-vue.com/components/switch.html --- - - + ## Installation @@ -29,7 +28,7 @@ npm install radix-vue ``` ### Copy and paste the following code into your project - + <<< @/lib/registry/default/ui/switch/Switch.vue diff --git a/apps/www/src/content/docs/components/table.md b/apps/www/src/content/docs/components/table.md index e0701b58..8646b855 100644 --- a/apps/www/src/content/docs/components/table.md +++ b/apps/www/src/content/docs/components/table.md @@ -3,8 +3,7 @@ title: Table description: A responsive table component. --- - - + ## Installation @@ -64,4 +63,4 @@ You can use the `` component to build more complex data tables. Combine See the [Data Table](/docs/components/data-table) documentation for more information. -You can also see an example of a data table in the [Tasks](/examples/tasks) demo. \ No newline at end of file +You can also see an example of a data table in the [Tasks](/examples/tasks) demo. diff --git a/apps/www/src/content/docs/components/tabs.md b/apps/www/src/content/docs/components/tabs.md index 317836e7..416aee80 100644 --- a/apps/www/src/content/docs/components/tabs.md +++ b/apps/www/src/content/docs/components/tabs.md @@ -1,17 +1,14 @@ --- title: Tabs description: A set of layered sections of content—known as tab panels—that are displayed one at a time. -source: apps/www/src/lib/registry/default/ui/tabs +source: apps/www/src/lib/registry/default/ui/tabs primitive: https://www.radix-vue.com/components/tabs.html --- - - + ## Installation - - ```bash npx shadcn-vue@latest add tabs ``` @@ -41,4 +38,4 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/components/tags-input.md b/apps/www/src/content/docs/components/tags-input.md index 4833e967..97071831 100644 --- a/apps/www/src/content/docs/components/tags-input.md +++ b/apps/www/src/content/docs/components/tags-input.md @@ -5,7 +5,7 @@ source: apps/www/src/lib/registry/default/ui/tags-input primitive: https://www.radix-vue.com/components/tags-input.html --- - + ## Installation @@ -13,9 +13,8 @@ primitive: https://www.radix-vue.com/components/tags-input.html npx shadcn-vue@latest add tags-input ``` - ## Usage ### Tags with Combobox - + diff --git a/apps/www/src/content/docs/components/textarea.md b/apps/www/src/content/docs/components/textarea.md index 930a7762..f82873ea 100644 --- a/apps/www/src/content/docs/components/textarea.md +++ b/apps/www/src/content/docs/components/textarea.md @@ -3,8 +3,7 @@ title: Textarea description: Displays a form textarea or a component that looks like a textarea. --- - - + ## Installation diff --git a/apps/www/src/content/docs/components/toast.md b/apps/www/src/content/docs/components/toast.md index b2cc424e..1514472b 100644 --- a/apps/www/src/content/docs/components/toast.md +++ b/apps/www/src/content/docs/components/toast.md @@ -1,15 +1,13 @@ --- title: Toast description: A succinct message that is displayed temporarily. -source: apps/www/src/lib/registry/default/ui/toast +source: apps/www/src/lib/registry/default/ui/toast primitive: https://www.radix-vue.com/components/toast.html --- - ## Installation - @@ -32,9 +30,8 @@ import Toaster from '@/components/ui/toast/Toaster.vue' ``` - + - ## Usage diff --git a/apps/www/src/content/docs/components/toggle-group.md b/apps/www/src/content/docs/components/toggle-group.md index f622f630..96a8f463 100644 --- a/apps/www/src/content/docs/components/toggle-group.md +++ b/apps/www/src/content/docs/components/toggle-group.md @@ -5,7 +5,7 @@ source: apps/www/src/lib/registry/default/ui/toggle-group primitive: https://www.radix-vue.com/components/toggle-group.html --- - + ## Installation @@ -60,34 +60,26 @@ import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group' ## Examples -### Default - - +### Default + ### Outline - - + ### Single - ### Small - ### Large - ### Disabled - - - diff --git a/apps/www/src/content/docs/components/toggle.md b/apps/www/src/content/docs/components/toggle.md index c720bb3e..5bd4ec11 100644 --- a/apps/www/src/content/docs/components/toggle.md +++ b/apps/www/src/content/docs/components/toggle.md @@ -1,13 +1,11 @@ --- title: Toggle description: A two-state button that can be either on or off. -source: apps/www/src/lib/registry/default/ui/toggle +source: apps/www/src/lib/registry/default/ui/toggle primitive: https://www.radix-vue.com/components/toggle.html --- - - - + ## Installation @@ -52,34 +50,26 @@ import { Toggle } from '@/components/ui/toggle' ## Examples -### Default - - +### Default + ### Outline - - + ### With Text - ### Small - ### Large - ### Disabled - - - diff --git a/apps/www/src/content/docs/components/tooltip.md b/apps/www/src/content/docs/components/tooltip.md index 14108ed3..ab2a4d8b 100644 --- a/apps/www/src/content/docs/components/tooltip.md +++ b/apps/www/src/content/docs/components/tooltip.md @@ -1,12 +1,11 @@ --- title: Tooltip description: A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. -source: apps/www/src/lib/registry/default/ui/tooltip +source: apps/www/src/lib/registry/default/ui/tooltip primitive: https://www.radix-vue.com/components/tooltip.html --- - - + ## Installation @@ -36,4 +35,4 @@ import { -``` \ No newline at end of file +``` diff --git a/apps/www/src/content/docs/installation.md b/apps/www/src/content/docs/installation.md index 04a30608..567b225d 100644 --- a/apps/www/src/content/docs/installation.md +++ b/apps/www/src/content/docs/installation.md @@ -2,7 +2,7 @@ title: Installation description: How to install dependencies and structure your app. --- - + ## Frameworks
@@ -18,7 +18,7 @@ description: How to install dependencies and structure your app.

Vite

- + Nuxt @@ -53,11 +53,9 @@ description: How to install dependencies and structure your app.

Laravel

- +
- - ## TypeScript This project and the components are written in TypeScript. We recommend using TypeScript for your project as well. @@ -97,11 +95,11 @@ To configure import aliases, you can use the following `jsconfig.json`: ## VSCode extension -Install the [shadcn-vue](https://marketplace.visualstudio.com/items?itemName=Selemondev.shadcn-vue) extension by [@selemondev](https://github.com/selemondev) in Visual Studio Code to easily add Shadcn Vue components to your project. +Install the [shadcn-vue](https://marketplace.visualstudio.com/items?itemName=Selemondev.shadcn-vue) extension by [@selemondev](https://github.com/selemondev) in Visual Studio Code to easily add Shadcn Vue components to your project. This extension offers a range of features: - Ability to initialize the Shadcn Vue CLI - Install components - Open documentation -- Navigate to a specific component's documentation page directly from your IDE. +- Navigate to a specific component's documentation page directly from your IDE. - Handy snippets for quick and straightforward component imports and markup. diff --git a/apps/www/src/content/docs/installation/astro.md b/apps/www/src/content/docs/installation/astro.md index 3f5efd57..b465dd45 100644 --- a/apps/www/src/content/docs/installation/astro.md +++ b/apps/www/src/content/docs/installation/astro.md @@ -126,7 +126,7 @@ import '@/styles/globals.css' To prevent serving the Tailwind base styles twice, we need to tell Astro not to apply the base styles, since we already include them in our own `globals.css` file. To do this, set the `applyBaseStyles` config option for the tailwind plugin in `astro.config.mjs` to `false`. -```ts:line-numbers {3-5} +```ts:line-numbers {3-5} export default defineConfig({ integrations: [ tailwind({ @@ -161,4 +161,4 @@ import { Button } from "@/components/ui/button" ``` - \ No newline at end of file + diff --git a/apps/www/src/content/docs/installation/laravel.md b/apps/www/src/content/docs/installation/laravel.md index 791a1f3d..9f83e77d 100644 --- a/apps/www/src/content/docs/installation/laravel.md +++ b/apps/www/src/content/docs/installation/laravel.md @@ -34,7 +34,7 @@ Where is your global CSS file? › resources/css/app.css Do you want to use CSS variables for colors? › no / yes Where is your tailwind.config.js located? › tailwind.config.js Configure the import alias for components: › @/Components -Configure the import alias for utils: › @/lib/utils +Configure the import alias for utils: › @/lib/utils ``` ### Update tailwind.config.js @@ -150,4 +150,4 @@ import { Button } from '@/Components/ui/button' ``` - \ No newline at end of file + diff --git a/apps/www/src/content/docs/installation/nuxt.md b/apps/www/src/content/docs/installation/nuxt.md index ff91808f..c5dc56ac 100644 --- a/apps/www/src/content/docs/installation/nuxt.md +++ b/apps/www/src/content/docs/installation/nuxt.md @@ -41,7 +41,6 @@ npm install -D @nuxtjs/tailwindcss - Add the following code to `modules/shadcn.ts`. @@ -148,7 +147,6 @@ declare module '@nuxt/schema' { - ### Configure `nuxt.config.ts` ```ts @@ -189,7 +187,7 @@ Where is your global CSS file? › › src/index.css Do you want to use CSS variables for colors? › no / yes Where is your tailwind.config.js located? › tailwind.config.js Configure the import alias for components: › @/components -Configure the import alias for utils: › @/lib/utils +Configure the import alias for utils: › @/lib/utils ``` ### App structure @@ -197,7 +195,7 @@ Configure the import alias for utils: › @/lib/utils Here's the default structure of Nuxt app. You can use this as a reference: ```txt {6-16,20-21} -. +. ├── pages │ ├── index.vue │ └── dashboard.vue diff --git a/apps/www/src/content/docs/introduction.md b/apps/www/src/content/docs/introduction.md index aa4a55c9..e5957005 100644 --- a/apps/www/src/content/docs/introduction.md +++ b/apps/www/src/content/docs/introduction.md @@ -21,7 +21,6 @@ _Use this as a reference to build your own component libraries._ ## FAQ - @@ -58,4 +57,4 @@ Yes. Free to use for personal and commercial projects. No attribution required. But let us know if you do use it. We'd love to see what you build with it. - \ No newline at end of file + diff --git a/apps/www/src/content/docs/theming.md b/apps/www/src/content/docs/theming.md index f4fcdd58..3e229e41 100644 --- a/apps/www/src/content/docs/theming.md +++ b/apps/www/src/content/docs/theming.md @@ -3,7 +3,6 @@ title: Theming description: Use CSS Variables to customize the look and feel of your application. --- - You can choose between using CSS variables or Tailwind CSS utility classes for theming. ## Utility classes @@ -37,7 +36,6 @@ To use utility classes for theming set `tailwind.cssVariables` to `false` in you ``` To use CSS variables for theming set `tailwind.cssVariables` to `true` in your `components.json` file. - ```json {7} title="components.json" { @@ -96,64 +94,64 @@ Here's the list of variables available for customization: --foreground: 222.2 47.4% 11.2%; ``` -```css +```css /* Muted backgrounds such as , and */ --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; ``` -```css +```css /* Background color for */ --card: 0 0% 100%; --card-foreground: 222.2 47.4% 11.2%; ``` -```css +```css /* Background color for popovers such as , , */ --popover: 0 0% 100%; --popover-foreground: 222.2 47.4% 11.2%; ``` -```css +```css /* Default border color */ --border: 214.3 31.8% 91.4%; ``` -```css +```css /* Border color for inputs such as ,