diff --git a/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue b/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue
index 9873fb8a..bcb56a32 100644
--- a/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue
+++ b/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue
@@ -6,7 +6,6 @@ import {
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
- BreadcrumbPage,
BreadcrumbSeparator,
} from '@/lib/registry/new-york/ui/breadcrumb'
diff --git a/apps/www/.vitepress/theme/components/ExamplesNav.vue b/apps/www/.vitepress/theme/components/ExamplesNav.vue
index 7176d942..039c010f 100644
--- a/apps/www/.vitepress/theme/components/ExamplesNav.vue
+++ b/apps/www/.vitepress/theme/components/ExamplesNav.vue
@@ -35,7 +35,7 @@ const examples = [
},
{
name: 'Forms',
- href: '/examples/forms/forms',
+ href: '/examples/forms',
code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/forms',
},
{
diff --git a/apps/www/.vitepress/theme/components/LandingPage.vue b/apps/www/.vitepress/theme/components/LandingPage.vue
index aae8de0b..6a6a7dd0 100644
--- a/apps/www/.vitepress/theme/components/LandingPage.vue
+++ b/apps/www/.vitepress/theme/components/LandingPage.vue
@@ -8,7 +8,6 @@ import Announcement from '../components/Announcement.vue'
import GitHubIcon from '~icons/radix-icons/github-logo'
import { buttonVariants } from '@/lib/registry/new-york/ui/button'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
import { cn } from '@/lib/utils'
import MailExample from '@/examples/mail/Example.vue'
diff --git a/apps/www/.vitepress/theme/components/MobileNav.vue b/apps/www/.vitepress/theme/components/MobileNav.vue
index 73a7dcae..c6d0916c 100644
--- a/apps/www/.vitepress/theme/components/MobileNav.vue
+++ b/apps/www/.vitepress/theme/components/MobileNav.vue
@@ -5,7 +5,6 @@ import Logo from './Logo.vue'
import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
import { Button } from '@/lib/registry/default/ui/button'
import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
-import { Badge } from '@/lib/registry/new-york/ui/badge'
const open = ref(false)
diff --git a/apps/www/.vitepress/theme/components/PageHeaderDescription.vue b/apps/www/.vitepress/theme/components/PageHeaderDescription.vue
index 24e04dd5..68430c80 100644
--- a/apps/www/.vitepress/theme/components/PageHeaderDescription.vue
+++ b/apps/www/.vitepress/theme/components/PageHeaderDescription.vue
@@ -4,7 +4,7 @@ import { cn } from '@/lib/utils'
-
+
diff --git a/apps/www/.vitepress/theme/components/PageHeaderHeading.vue b/apps/www/.vitepress/theme/components/PageHeaderHeading.vue
index bab35a82..917bc898 100644
--- a/apps/www/.vitepress/theme/components/PageHeaderHeading.vue
+++ b/apps/www/.vitepress/theme/components/PageHeaderHeading.vue
@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'
diff --git a/apps/www/.vitepress/theme/components/TableOfContent.vue b/apps/www/.vitepress/theme/components/TableOfContent.vue
index e6c1e693..7e02aae4 100644
--- a/apps/www/.vitepress/theme/components/TableOfContent.vue
+++ b/apps/www/.vitepress/theme/components/TableOfContent.vue
@@ -24,7 +24,7 @@ function getHeadingsWithHierarchy(divId: string) {
const level = Number.parseInt(heading.tagName.charAt(1))
if (!heading.id) {
const newId = heading.textContent
- .replaceAll(/[^a-zA-Z0-9 ]/g, '')
+ .replaceAll(/[^a-z0-9 ]/gi, '')
.replaceAll(' ', '-')
.toLowerCase()
heading.id = `${newId}`
diff --git a/apps/www/.vitepress/theme/components/theming/utils/data.ts b/apps/www/.vitepress/theme/components/theming/utils/data.ts
index 1ef53ce0..41166bad 100644
--- a/apps/www/.vitepress/theme/components/theming/utils/data.ts
+++ b/apps/www/.vitepress/theme/components/theming/utils/data.ts
@@ -32,11 +32,11 @@ export const allColors: Color[] = [
'violet',
]
-interface Payment {
- status: string
- email: string
- amount: number
-}
+// interface Payment {
+// status: string
+// email: string
+// amount: number
+// }
interface TeamMember {
name: string
diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
index e58047e9..698dcc4b 100644
--- a/apps/www/.vitepress/theme/config/docs.ts
+++ b/apps/www/.vitepress/theme/config/docs.ts
@@ -256,12 +256,17 @@ export const docsConfig: DocsConfig = {
title: 'Navigation Menu',
href: '/docs/components/navigation-menu',
},
+ {
+ title: 'Number Field',
+ href: '/docs/components/number-field',
+ label: 'New Alpha',
+ },
{
title: 'Pagination',
href: '/docs/components/pagination',
},
{
- title: 'Pin Input',
+ title: 'PIN Input',
href: '/docs/components/pin-input',
items: [],
},
diff --git a/apps/www/.vitepress/theme/layout/DocsLayout.vue b/apps/www/.vitepress/theme/layout/DocsLayout.vue
index c46b3d11..d4ad12e0 100644
--- a/apps/www/.vitepress/theme/layout/DocsLayout.vue
+++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue
@@ -7,7 +7,6 @@ import DocsBreadcrumb from '../components/DocsBreadcrumb.vue'
import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
import RadixIconsCode from '~icons/radix-icons/code'
import RadixIconsExternalLink from '~icons/radix-icons/external-link'
-import ChevronRightIcon from '~icons/lucide/chevron-right'
const $route = useRoute()
const { frontmatter } = useData()
diff --git a/apps/www/.vitepress/theme/layout/ExamplesLayout.vue b/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
index 18b0bf78..30db29d6 100644
--- a/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
+++ b/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
@@ -7,7 +7,6 @@ import ExamplesNav from '../components/ExamplesNav.vue'
import Announcement from '../components/Announcement.vue'
import { buttonVariants } from '@/lib/registry/new-york/ui/button'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
import { cn } from '@/lib/utils'
diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index 13ebeaf7..1b67e924 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -303,7 +303,7 @@ watch(() => $route.path, (n) => {
-
+
diff --git a/apps/www/.vitepress/theme/style.css b/apps/www/.vitepress/theme/style.css
index 9c4ed1c4..48376839 100644
--- a/apps/www/.vitepress/theme/style.css
+++ b/apps/www/.vitepress/theme/style.css
@@ -164,15 +164,23 @@ pre {
}
pre code {
- @apply relative font-mono text-sm ;
+ @apply relative font-mono text-sm ;
+}
+
+.line-numbers-wrapper, code {
+ --vp-code-line-height: 1.7;
+}
+
+.line-numbers-wrapper {
+ @apply font-mono;
}
pre code .line {
- @apply px-4 min-h-6 !py-0.5 w-full inline-block;
+ @apply px-4 min-h-4 !py-0.5 w-full inline-block leading-[--vp-code-line-height];
}
.line-number {
- @apply min-h-[1.375rem] !text-sm !inline-block text-muted-foreground;
+ @apply !text-[.75rem] !inline-block text-muted-foreground leading-[--vp-code-line-height];
}
::view-transition-old(root),
diff --git a/apps/www/.vitepress/theme/styles/vp-doc.css b/apps/www/.vitepress/theme/styles/vp-doc.css
index d088d325..b100cefd 100644
--- a/apps/www/.vitepress/theme/styles/vp-doc.css
+++ b/apps/www/.vitepress/theme/styles/vp-doc.css
@@ -351,8 +351,8 @@
width: calc(100% + 2 * 24px);
display: inline-block;
@apply bg-[hsl(var(--foreground))] dark:bg-[hsl(var(--background)_/_50%)]
-}
-hsl(var(--foreground) / 50%)
+}
+
.vp-doc [class*='language-'] code .highlighted.error {
background-color: var(--vp-code-line-error-color);
}
diff --git a/apps/www/.vitepress/theme/utils/codeeditor.ts b/apps/www/.vitepress/theme/utils/codeeditor.ts
index 02239879..11424e4f 100644
--- a/apps/www/.vitepress/theme/utils/codeeditor.ts
+++ b/apps/www/.vitepress/theme/utils/codeeditor.ts
@@ -2,7 +2,9 @@ import { getParameters } from 'codesandbox/lib/api/define'
import sdk from '@stackblitz/sdk'
import { dependencies as deps } from '../../../package.json'
import { Index as demoIndex } from '../../../../www/__registry__'
+// @ts-expect-error ?raw
import tailwindConfigRaw from '../../../tailwind.config?raw'
+// @ts-expect-error ?raw
import cssRaw from '../../../../../packages/cli/test/fixtures/nuxt/assets/css/tailwind.css?raw'
import type { Style } from '@/lib/registry/styles'
@@ -35,7 +37,15 @@ const viteConfig = {
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
+import tailwind from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+
export default defineConfig({
+ css: {
+ postcss: {
+ plugins: [tailwind(), autoprefixer()],
+ },
+ },
plugins: [vue()],
resolve: {
alias: {
@@ -102,7 +112,6 @@ function constructFiles(componentName: string, style: Style, sources: Record import("../src/lib/registry/default/example/NavigationMenuDemoItem.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/NavigationMenuDemoItem.vue"],
},
+ "NumberFieldCurrency": {
+ name: "NumberFieldCurrency",
+ type: "components:example",
+ registryDependencies: ["number-field","label"],
+ component: () => import("../src/lib/registry/default/example/NumberFieldCurrency.vue").then((m) => m.default),
+ files: ["../src/lib/registry/default/example/NumberFieldCurrency.vue"],
+ },
+ "NumberFieldDecimal": {
+ name: "NumberFieldDecimal",
+ type: "components:example",
+ registryDependencies: ["number-field","label"],
+ component: () => import("../src/lib/registry/default/example/NumberFieldDecimal.vue").then((m) => m.default),
+ files: ["../src/lib/registry/default/example/NumberFieldDecimal.vue"],
+ },
+ "NumberFieldDemo": {
+ name: "NumberFieldDemo",
+ type: "components:example",
+ registryDependencies: ["number-field","label"],
+ component: () => import("../src/lib/registry/default/example/NumberFieldDemo.vue").then((m) => m.default),
+ files: ["../src/lib/registry/default/example/NumberFieldDemo.vue"],
+ },
+ "NumberFieldDisabled": {
+ name: "NumberFieldDisabled",
+ type: "components:example",
+ registryDependencies: ["number-field","label"],
+ component: () => import("../src/lib/registry/default/example/NumberFieldDisabled.vue").then((m) => m.default),
+ files: ["../src/lib/registry/default/example/NumberFieldDisabled.vue"],
+ },
+ "NumberFieldForm": {
+ name: "NumberFieldForm",
+ type: "components:example",
+ registryDependencies: ["button","form","number-field","toast"],
+ component: () => import("../src/lib/registry/default/example/NumberFieldForm.vue").then((m) => m.default),
+ files: ["../src/lib/registry/default/example/NumberFieldForm.vue"],
+ },
+ "NumberFieldPercentage": {
+ name: "NumberFieldPercentage",
+ type: "components:example",
+ registryDependencies: ["number-field","label"],
+ component: () => import("../src/lib/registry/default/example/NumberFieldPercentage.vue").then((m) => m.default),
+ files: ["../src/lib/registry/default/example/NumberFieldPercentage.vue"],
+ },
"PaginationDemo": {
name: "PaginationDemo",
type: "components:example",
@@ -948,6 +990,13 @@ export const Index = {
component: () => import("../src/lib/registry/default/example/SonnerDemo.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/SonnerDemo.vue"],
},
+ "SonnerWithDialog": {
+ name: "SonnerWithDialog",
+ type: "components:example",
+ registryDependencies: ["button","dialog"],
+ component: () => import("../src/lib/registry/default/example/SonnerWithDialog.vue").then((m) => m.default),
+ files: ["../src/lib/registry/default/example/SonnerWithDialog.vue"],
+ },
"SwitchDemo": {
name: "SwitchDemo",
type: "components:example",
@@ -1308,7 +1357,7 @@ export const Index = {
"ActivityGoal": {
name: "ActivityGoal",
type: "components:example",
- registryDependencies: ["button","card","themes","config"],
+ registryDependencies: ["button","card"],
component: () => import("../src/lib/registry/default/example/Cards/ActivityGoal.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/Cards/ActivityGoal.vue"],
},
@@ -1322,7 +1371,7 @@ export const Index = {
"Metric": {
name: "Metric",
type: "components:example",
- registryDependencies: ["card","config"],
+ registryDependencies: ["card"],
component: () => import("../src/lib/registry/default/example/Cards/Metric.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/Cards/Metric.vue"],
},
@@ -2160,6 +2209,48 @@ export const Index = {
component: () => import("../src/lib/registry/new-york/example/NavigationMenuDemoItem.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/NavigationMenuDemoItem.vue"],
},
+ "NumberFieldCurrency": {
+ name: "NumberFieldCurrency",
+ type: "components:example",
+ registryDependencies: ["number-field","label"],
+ component: () => import("../src/lib/registry/new-york/example/NumberFieldCurrency.vue").then((m) => m.default),
+ files: ["../src/lib/registry/new-york/example/NumberFieldCurrency.vue"],
+ },
+ "NumberFieldDecimal": {
+ name: "NumberFieldDecimal",
+ type: "components:example",
+ registryDependencies: ["number-field","label"],
+ component: () => import("../src/lib/registry/new-york/example/NumberFieldDecimal.vue").then((m) => m.default),
+ files: ["../src/lib/registry/new-york/example/NumberFieldDecimal.vue"],
+ },
+ "NumberFieldDemo": {
+ name: "NumberFieldDemo",
+ type: "components:example",
+ registryDependencies: ["number-field","label"],
+ component: () => import("../src/lib/registry/new-york/example/NumberFieldDemo.vue").then((m) => m.default),
+ files: ["../src/lib/registry/new-york/example/NumberFieldDemo.vue"],
+ },
+ "NumberFieldDisabled": {
+ name: "NumberFieldDisabled",
+ type: "components:example",
+ registryDependencies: ["number-field","label"],
+ component: () => import("../src/lib/registry/new-york/example/NumberFieldDisabled.vue").then((m) => m.default),
+ files: ["../src/lib/registry/new-york/example/NumberFieldDisabled.vue"],
+ },
+ "NumberFieldForm": {
+ name: "NumberFieldForm",
+ type: "components:example",
+ registryDependencies: ["button","form","number-field","toast"],
+ component: () => import("../src/lib/registry/new-york/example/NumberFieldForm.vue").then((m) => m.default),
+ files: ["../src/lib/registry/new-york/example/NumberFieldForm.vue"],
+ },
+ "NumberFieldPercentage": {
+ name: "NumberFieldPercentage",
+ type: "components:example",
+ registryDependencies: ["number-field","label"],
+ component: () => import("../src/lib/registry/new-york/example/NumberFieldPercentage.vue").then((m) => m.default),
+ files: ["../src/lib/registry/new-york/example/NumberFieldPercentage.vue"],
+ },
"PaginationDemo": {
name: "PaginationDemo",
type: "components:example",
@@ -2349,6 +2440,13 @@ export const Index = {
component: () => import("../src/lib/registry/new-york/example/SonnerDemo.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/SonnerDemo.vue"],
},
+ "SonnerWithDialog": {
+ name: "SonnerWithDialog",
+ type: "components:example",
+ registryDependencies: ["button","dialog"],
+ component: () => import("../src/lib/registry/new-york/example/SonnerWithDialog.vue").then((m) => m.default),
+ files: ["../src/lib/registry/new-york/example/SonnerWithDialog.vue"],
+ },
"SwitchDemo": {
name: "SwitchDemo",
type: "components:example",
@@ -2709,7 +2807,7 @@ export const Index = {
"ActivityGoal": {
name: "ActivityGoal",
type: "components:example",
- registryDependencies: ["button","card","themes","config"],
+ registryDependencies: ["button","card"],
component: () => import("../src/lib/registry/new-york/example/Cards/ActivityGoal.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/Cards/ActivityGoal.vue"],
},
@@ -2723,7 +2821,7 @@ export const Index = {
"Metric": {
name: "Metric",
type: "components:example",
- registryDependencies: ["card","config"],
+ registryDependencies: ["card"],
component: () => import("../src/lib/registry/new-york/example/Cards/Metric.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/Cards/Metric.vue"],
},
diff --git a/apps/www/package.json b/apps/www/package.json
index d4b4b5ab..9f2edc89 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -1,7 +1,7 @@
{
"name": "www",
"type": "module",
- "version": "0.10.4",
+ "version": "0.10.5",
"files": [
"dist"
],
@@ -17,66 +17,65 @@
},
"dependencies": {
"@formkit/auto-animate": "^0.8.2",
- "@internationalized/date": "^3.5.2",
+ "@internationalized/date": "^3.5.4",
"@radix-icons/vue": "^1.0.0",
- "@stackblitz/sdk": "^1.9.0",
- "@tanstack/vue-table": "^8.16.0",
- "@unovis/ts": "^1.4.0",
- "@unovis/vue": "^1.4.0",
- "@vee-validate/zod": "^4.12.6",
- "@vueuse/core": "^10.9.0",
+ "@stackblitz/sdk": "^1.10.0",
+ "@tanstack/vue-table": "^8.17.3",
+ "@unovis/ts": "^1.4.1",
+ "@unovis/vue": "^1.4.1",
+ "@vee-validate/zod": "^4.13.1",
+ "@vueuse/core": "^10.11.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"codesandbox": "^2.2.3",
"date-fns": "^3.6.0",
- "embla-carousel": "^8.0.2",
- "embla-carousel-autoplay": "^8.0.2",
- "embla-carousel-vue": "^8.0.2",
- "lucide-vue-next": "^0.359.0",
+ "embla-carousel-autoplay": "^8.1.5",
+ "embla-carousel-vue": "^8.1.5",
+ "lucide-vue-next": "^0.383.0",
"magic-string": "^0.30.10",
- "radix-vue": "^1.7.2",
+ "radix-vue": "^1.8.4",
"tailwindcss-animate": "^1.0.7",
"v-calendar": "^3.1.2",
- "vaul-vue": "^0.1.0",
- "vee-validate": "4.12.6",
- "vue": "^3.4.24",
+ "vaul-vue": "^0.2.0",
+ "vee-validate": "4.13.1",
+ "vue": "^3.4.29",
"vue-sonner": "^1.1.2",
"vue-wrap-balancer": "^1.1.3",
- "zod": "^3.23.3"
+ "zod": "^3.23.8"
},
"devDependencies": {
- "@babel/traverse": "^7.24.1",
- "@iconify-json/gravity-ui": "^1.1.2",
- "@iconify-json/lucide": "^1.1.180",
- "@iconify-json/ph": "^1.1.12",
+ "@babel/traverse": "^7.24.7",
+ "@iconify-json/gravity-ui": "^1.1.3",
+ "@iconify-json/lucide": "^1.1.190",
+ "@iconify-json/ph": "^1.1.13",
"@iconify-json/radix-icons": "^1.1.14",
- "@iconify-json/ri": "^1.1.18",
- "@iconify-json/simple-icons": "^1.1.94",
- "@iconify-json/tabler": "^1.1.106",
+ "@iconify-json/ri": "^1.1.20",
+ "@iconify-json/simple-icons": "^1.1.104",
+ "@iconify-json/tabler": "^1.1.113",
"@iconify/vue": "^4.1.2",
- "@oxc-parser/wasm": "^0.1.0",
- "@shikijs/transformers": "^1.3.0",
+ "@oxc-parser/wasm": "^0.14.0",
+ "@shikijs/transformers": "^1.7.0",
"@types/lodash-es": "^4.17.12",
- "@types/node": "^20.12.7",
- "@vitejs/plugin-vue": "^5.0.4",
- "@vitejs/plugin-vue-jsx": "^3.1.0",
- "@vue/compiler-core": "^3.4.24",
- "@vue/compiler-dom": "^3.4.24",
+ "@types/node": "^20.14.4",
+ "@vitejs/plugin-vue": "^5.0.5",
+ "@vitejs/plugin-vue-jsx": "^4.0.0",
+ "@vue/compiler-core": "^3.4.29",
+ "@vue/compiler-dom": "^3.4.29",
"@vue/tsconfig": "^0.5.1",
"autoprefixer": "^10.4.19",
"fast-glob": "^3.3.2",
"lodash-es": "^4.17.21",
"markdown-it": "^14.1.0",
"pathe": "^1.1.2",
- "rimraf": "^5.0.5",
- "shiki": "^1.3.0",
+ "rimraf": "^5.0.7",
+ "shiki": "^1.7.0",
"tailwind-merge": "^2.3.0",
- "tailwindcss": "^3.4.3",
- "tsx": "^4.7.2",
+ "tailwindcss": "^3.4.4",
+ "tsx": "^4.15.6",
"typescript": "^5.4.5",
- "unplugin-icons": "^0.18.5",
- "vitepress": "^1.1.3",
- "vue-component-meta": "^2.0.13",
- "vue-tsc": "^2.0.14"
+ "unplugin-icons": "^0.19.0",
+ "vitepress": "^1.2.3",
+ "vue-component-meta": "^2.0.21",
+ "vue-tsc": "^2.0.21"
}
}
diff --git a/apps/www/scripts/build-registry.ts b/apps/www/scripts/build-registry.ts
index 56535b0d..773fae96 100644
--- a/apps/www/scripts/build-registry.ts
+++ b/apps/www/scripts/build-registry.ts
@@ -282,7 +282,7 @@ for (const baseColor of ['slate', 'gray', 'zinc', 'neutral', 'stone', 'lime']) {
for (const [key, value] of Object.entries(values)) {
if (typeof value === 'string') {
const resolvedColor = value.replace(
- /{{base}}-/g,
+ /\{\{base\}\}-/g,
`${baseColor}-`,
)
base.inlineColors[mode][key] = resolvedColor
diff --git a/apps/www/src/components.d.ts b/apps/www/src/components.d.ts
new file mode 100644
index 00000000..ef8d56a7
--- /dev/null
+++ b/apps/www/src/components.d.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+// @ts-nocheck
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+ export interface GlobalComponents {
+ ComponentPreview: typeof import('../.vitepress/theme/components/ComponentPreview.vue')['default']
+ }
+}
\ No newline at end of file
diff --git a/apps/www/src/content/docs/changelog.md b/apps/www/src/content/docs/changelog.md
index 6afbcc5f..26f8dd31 100644
--- a/apps/www/src/content/docs/changelog.md
+++ b/apps/www/src/content/docs/changelog.md
@@ -1,3 +1,139 @@
---
title: Changelog
+description: Latest updates and announcements.
---
+
+## June 2024
+
+### New Component - Number Field
+A new component has been added to the project [`NumberField`](/docs/components/number-field.html).
+
+A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
+
+
+
+## May 2024
+
+### New Component - Charts
+Several kinds of chart components has been added to the project.
+
+Charts are versatile visualization tools, allowing users to represent data using various options for effective analysis.
+
+1. [`Area Chart`](/docs/charts/area) - An area chart visually represents data over time, displaying trends and patterns through filled-in areas under a line graph.
+
+
+
+2. [`Bar Chart`](/docs/charts/bar) - A line chart visually represents data using rectangular bars of varying lengths to compare quantities across different categories or groups.
+
+
+
+3. [`Donut Chart`](/docs/charts/donut) - A line chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories.
+
+
+
+4. [`Line Chart`](/docs/charts/line) - A line chart visually displays data points connected by straight lines, illustrating trends or relationships over a continuous axis.
+
+
+
+### New Component - Auto Form
+
+[`Auto Form`](/docs/components/auto-form.html) is a drop-in form builder for your internal and low-priority forms with existing zod schemas.
+
+For example, if you already have zod schemas for your API and want to create a simple admin panel to edit user profiles, simply pass the schema to AutoForm and you're done.
+
+The following form has been created by passing a `zod` schema object to our `AutoForm` component.
+
+
+
+## April 2024
+
+### Component Updated - Calendar
+
+The [`Calendar`](/docs/components/calendar.html) component has been updated and is now built on top of the [RadixVue Calendar](https://www.radix-vue.com/components/calendar.html) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.
+
+If you're looking for a range calendar, check out the [`Range Calendar`](/docs/components/range-calendar.html) component.
+
+And if you're looking for a date picker input, check out the [`Date Picker`](/docs/components/date-picker.html) component.
+
+
+
+
+
+
+
+### Building Blocks for the Web
+
+[`Blocks`](/blocks) are composed of different components that can be used to build your apps, with each block being a standalone section of your application. These blocks are fully responsive, accessible, and composable, and are built using the same principles as the other components in `shadcn-vue`.
+
+
+
+
+
+
+## March 2024
+
+### New Component - Breadcrumb
+
+[`Breadcrumb`](/docs/components/breadcrumb.html) displays the path to the current resource using a hierarchy of links.
+
+
+
+### New Component - Pin Input (OTP Input)
+
+[`Pin Input`](/docs/components/pin-input.html) allows users to input a sequence of one-character alphanumeric inputs.
+
+
+
+### New Component - Resizable
+
+[`Resizable`](/docs/components/resizable.html) - Accessible resizable panel groups and layouts with keyboard support.
+
+
+
+### New Component - Drawer
+
+[`Drawer`](/docs/components/drawer.html) - A drawer component for vue that is built on top of [Vaul Vue](https://github.com/radix-vue/vaul-vue).
+
+
+
+## February 2024
+
+### New Component - Tag Inputs
+
+[`Tag inputs`](/docs/components/tags-input.html) render tags inside an input, followed by an actual text input.
+
+
+
+## January 2024
+
+### New Component - Sonner
+
+[`Sonner`](/docs/components/sonner.html) is an opinionated toast component for Vue.
+
+The Sonner component is provided by [vue-sonner](https://vue-sonner.vercel.app/), which is a Vue port of Sonner, originally created by [Emil Kowalski](https://twitter.com/emilkowalski_) for React.
+
+
+
+### New Component - Toggle Group
+
+[`Toggle Group`](/docs/components/toggle-group.html) - A set of two-state buttons that can be toggled on or off.
+
+
+
+### New Component - Carousel
+
+[`Carousel`](/docs/components/toggle-group.html) - A carousel with motion and swipe built using [Embla](https://www.embla-carousel.com/) library.
+
+
diff --git a/apps/www/src/content/docs/charts/bar.md b/apps/www/src/content/docs/charts/bar.md
index fa0f8029..73e69c3b 100644
--- a/apps/www/src/content/docs/charts/bar.md
+++ b/apps/www/src/content/docs/charts/bar.md
@@ -1,6 +1,6 @@
---
title: Bar
-description: An line chart visually represents data using rectangular bars of varying lengths to compare quantities across different categories or groups.
+description: A line chart visually represents data using rectangular bars of varying lengths to compare quantities across different categories or groups.
source: apps/www/src/lib/registry/default/ui/chart-bar
label: Alpha
---
diff --git a/apps/www/src/content/docs/charts/donut.md b/apps/www/src/content/docs/charts/donut.md
index 2ed86267..b238dee9 100644
--- a/apps/www/src/content/docs/charts/donut.md
+++ b/apps/www/src/content/docs/charts/donut.md
@@ -1,6 +1,6 @@
---
title: Donut
-description: An line chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories.
+description: A line chart visually represents data in a circular form, similar to a pie chart but with a central void, emphasizing proportions within categories.
source: apps/www/src/lib/registry/default/ui/chart-donut
label: Alpha
---
diff --git a/apps/www/src/content/docs/charts/line.md b/apps/www/src/content/docs/charts/line.md
index 39cf6f3a..b984f822 100644
--- a/apps/www/src/content/docs/charts/line.md
+++ b/apps/www/src/content/docs/charts/line.md
@@ -1,6 +1,6 @@
---
title: Line
-description: An line chart visually displays data points connected by straight lines, illustrating trends or relationships over a continuous axis.
+description: A line chart visually displays data points connected by straight lines, illustrating trends or relationships over a continuous axis.
source: apps/www/src/lib/registry/default/ui/chart-line
label: Alpha
---
diff --git a/apps/www/src/content/docs/components/auto-form.md b/apps/www/src/content/docs/components/auto-form.md
index 49913db2..9dd5286f 100644
--- a/apps/www/src/content/docs/components/auto-form.md
+++ b/apps/www/src/content/docs/components/auto-form.md
@@ -414,9 +414,7 @@ const form = useForm({
validationSchema: toTypedSchema(schema),
})
-form.setValues({
- username: 'foo'
-})
+form.setFieldValue('username', 'bar')
diff --git a/apps/www/src/content/docs/components/breadcrumb.md b/apps/www/src/content/docs/components/breadcrumb.md
index c4b0d534..3e31b094 100644
--- a/apps/www/src/content/docs/components/breadcrumb.md
+++ b/apps/www/src/content/docs/components/breadcrumb.md
@@ -22,7 +22,7 @@ import {
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
-} from '@/lib/components/ui/breadcrumb'
+} from '@/components/ui/breadcrumb'
@@ -65,7 +65,7 @@ import {
BreadcrumbLink,
BreadcrumbList,
BreadcrumbSeparator,
-} from '@/lib/components/ui/breadcrumb'
+} from '@/components/ui/breadcrumb'
@@ -106,7 +106,7 @@ import {
DropdownMenuTrigger,
} from '@/lib/components/ui/dropdown-menu'
-import { BreadcrumbItem } from '@/lib/components/ui/breadcrumb'
+import { BreadcrumbItem } from '@/components/ui/breadcrumb'
import ChevronDownIcon from '~icons/radix-icons/chevron-down'
@@ -143,7 +143,7 @@ import {
BreadcrumbEllipsis,
BreadcrumbItem,
BreadcrumbList,
-} from '@/lib/components/ui/breadcrumb'
+} from '@/components/ui/breadcrumb'
@@ -175,7 +175,7 @@ import {
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
-} from '@/lib/components/ui/breadcrumb'
+} from '@/components/ui/breadcrumb'
diff --git a/apps/www/src/content/docs/components/combobox.md b/apps/www/src/content/docs/components/combobox.md
index dd8c410a..3a919d56 100644
--- a/apps/www/src/content/docs/components/combobox.md
+++ b/apps/www/src/content/docs/components/combobox.md
@@ -44,7 +44,7 @@ import {
const frameworks = [
{ value: 'next.js', label: 'Next.js' },
{ value: 'sveltekit', label: 'SvelteKit' },
- { value: 'nuxt.js', label: 'Nuxt.js' },
+ { value: 'nuxt', label: 'Nuxt' },
{ value: 'remix', label: 'Remix' },
{ value: 'astro', label: 'Astro' },
]
diff --git a/apps/www/src/content/docs/components/command.md b/apps/www/src/content/docs/components/command.md
index f059004d..d6235555 100644
--- a/apps/www/src/content/docs/components/command.md
+++ b/apps/www/src/content/docs/components/command.md
@@ -101,7 +101,7 @@ watch(CmdJ, (v) => {
⌘J
-
+ No results found.
diff --git a/apps/www/src/content/docs/components/data-table.md b/apps/www/src/content/docs/components/data-table.md
index a001d652..d36f2104 100644
--- a/apps/www/src/content/docs/components/data-table.md
+++ b/apps/www/src/content/docs/components/data-table.md
@@ -97,7 +97,7 @@ Start by creating the following file structure:
└── app.vue
```
-I'm using a Nuxt.js example here but this works for any other Vue framework.
+I'm using a Nuxt example here but this works for any other Vue framework.
- `columns.ts` It will contain our column definitions.
- `data-table.vue` It will contain our `` component.
@@ -114,7 +114,7 @@ Let's start by building a basic table.
First, we'll define our columns in the `columns.ts` file.
-```ts:line-numbers {1,12-27}
+```ts:line-numbers
import { h } from 'vue'
export const columns: ColumnDef[] = [
@@ -146,66 +146,70 @@ formatted, sorted and filtered.
Next, we'll create a `` component to render our table.
-```vue:line-numbers
+```vue
-
```
@@ -221,12 +225,12 @@ const table = useVueTable({
Finally, we'll render our table in our index component.
-```vue:line-numbers {28}
+```vue
@@ -267,23 +271,23 @@ Let's format the amount cell to display the dollar amount. We'll also align the
Update the `header` and `cell` definitions for amount as follows:
-```ts:line-numbers title="components/payments/columns.ts" {5-17}
+```ts
import { h } from 'vue'
export const columns: ColumnDef[] = [
- {
- accessorKey: "amount",
- header: () => h('div', { class: 'text-right' }, 'Amount'),
- cell: ({ row }) => {
- const amount = parseFloat(row.getValue("amount"))
- const formatted = new Intl.NumberFormat("en-US", {
- style: "currency",
- currency: "USD",
- }).format(amount)
+ {
+ accessorKey: 'amount',
+ header: () => h('div', { class: 'text-right' }, 'Amount'),
+ cell: ({ row }) => {
+ const amount = Number.parseFloat(row.getValue('amount'))
+ const formatted = new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+ }).format(amount)
- return h('div', { class: 'text-right font-medium' }, formatted)
- },
- }
+ return h('div', { class: 'text-right font-medium' }, formatted)
+ },
+ }
]
```
You can use the same approach to format other cells and headers.
@@ -295,10 +299,9 @@ Let's add row actions to our table. We'll use a `` component for thi
-### Add the following into your `DataTableDropDown.vue` component:
+### Add the following into your `DataTableDropDown.vue` component
-```vue:line-numbers
-// DataTableDropDown.vue
+```vue
-
-
-
- { // .... }
-
-
-
-
-
-
+
+
+
+ { // .... }
+
+
+
+
+
+
-
```
See [Reusable Components](#reusable-components) section for a more advanced pagination component.
@@ -449,24 +448,23 @@ Let's make the email column sortable.
-### Add the following into your `utils` file:
+### Add the following into your `utils` file
-```ts:line-numbers {5,6,12-17}
+```ts
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
import type { Updater } from '@tanstack/vue-table'
-import { type Ref } from 'vue'
+import type { Ref } from 'vue'
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
export function valueUpdater>(updaterOrValue: T, ref: Ref) {
- ref.value
- = typeof updaterOrValue === 'function'
- ? updaterOrValue(ref.value)
- : updaterOrValue
+ ref.value = typeof updaterOrValue === 'function'
+ ? updaterOrValue(ref.value)
+ : updaterOrValue
}
```
@@ -474,62 +472,60 @@ The `valueUpdater` function updates a Vue `ref` object's value. It handles both
### Update ``
-```vue:line-numbers {4,7,16,34,41-44}
+```vue:line-numbers {4,14,17,33,40-44}
-
-
-
{ ... }
-
+
+
+
{ ... }
+
```
diff --git a/apps/www/src/content/docs/components/navigation-menu.md b/apps/www/src/content/docs/components/navigation-menu.md
index f1748f57..1ca99120 100644
--- a/apps/www/src/content/docs/components/navigation-menu.md
+++ b/apps/www/src/content/docs/components/navigation-menu.md
@@ -47,7 +47,7 @@ import {
### Link Component
-When using the Nuxt.js `` component, you can use `navigationMenuTriggerStyle()` to apply the correct styles to the trigger.
+When using the Nuxt `` component, you can use `navigationMenuTriggerStyle()` to apply the correct styles to the trigger.
```ts
import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'
diff --git a/apps/www/src/content/docs/components/number-field.md b/apps/www/src/content/docs/components/number-field.md
new file mode 100644
index 00000000..e47d05aa
--- /dev/null
+++ b/apps/www/src/content/docs/components/number-field.md
@@ -0,0 +1,71 @@
+---
+title: Number Field
+description: A number field allows a user to enter a number and increment or decrement the value using stepper buttons.
+source: apps/www/src/lib/registry/default/ui/number-field
+primitive: https://www.radix-vue.com/components/number-field.html
+---
+
+
+
+## Installation
+
+
+
+
+```bash
+npx shadcn-vue@latest add number-field
+```
+
+
+
+## Usage
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Examples
+
+### Default
+
+
+
+### Disabled
+
+
+
+### Decimal
+
+
+
+### Percentage
+
+
+
+### Currency
+
+
+
+### Form
+
+
diff --git a/apps/www/src/content/docs/components/separator.md b/apps/www/src/content/docs/components/separator.md
index 898bc9c8..eca5a6c3 100644
--- a/apps/www/src/content/docs/components/separator.md
+++ b/apps/www/src/content/docs/components/separator.md
@@ -44,6 +44,6 @@ import { Separator } from '@/components/ui/separator'
-
+
```
diff --git a/apps/www/src/content/docs/components/sheet.md b/apps/www/src/content/docs/components/sheet.md
index 4447d310..15efbb08 100644
--- a/apps/www/src/content/docs/components/sheet.md
+++ b/apps/www/src/content/docs/components/sheet.md
@@ -32,7 +32,7 @@ import {
Open
- Are you sure absolutely sure?
+ Are you absolutely sure?
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
@@ -61,7 +61,7 @@ You can adjust the size of the sheet using CSS classes:
Open
- Are you sure absolutely sure?
+ Are you absolutely sure?
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
diff --git a/apps/www/src/content/docs/components/sonner.md b/apps/www/src/content/docs/components/sonner.md
index 733276b0..c78cf2e8 100644
--- a/apps/www/src/content/docs/components/sonner.md
+++ b/apps/www/src/content/docs/components/sonner.md
@@ -61,3 +61,23 @@ import { Button } from '@/components/ui/button'
```
+
+## Examples
+
+### Sonner with Dialog
+
+Related issue https://github.com/radix-vue/shadcn-vue/issues/462
+
+Add `pointer-events-auto` class to Toaster component in your `App.vue` file:
+
+```vue {6}
+
+
+
+
+
+```
+
+
diff --git a/apps/www/src/content/docs/installation/astro.md b/apps/www/src/content/docs/installation/astro.md
index b465dd45..b268ed1f 100644
--- a/apps/www/src/content/docs/installation/astro.md
+++ b/apps/www/src/content/docs/installation/astro.md
@@ -104,6 +104,7 @@ Would you like to use TypeScript (recommended)? no / yes
Which framework are you using? Astro
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
+Where is your tsconfig.json or jsconfig.json file? › ./tsconfig.json
Where is your global CSS file? › src/styles/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config located? › tailwind.config.mjs
@@ -152,12 +153,12 @@ import { Button } from "@/components/ui/button"
---
-
- Astro
-
-
-
-
+
+ Astro
+
+
+
+
```
diff --git a/apps/www/src/content/docs/installation/laravel.md b/apps/www/src/content/docs/installation/laravel.md
index 9f83e77d..fc8fd8ae 100644
--- a/apps/www/src/content/docs/installation/laravel.md
+++ b/apps/www/src/content/docs/installation/laravel.md
@@ -30,11 +30,13 @@ Would you like to use TypeScript (recommended)? no / yes
Which framework are you using? Vite / Nuxt / Laravel
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
+Where is your tsconfig.json or jsconfig.json file? › ./tsconfig.json
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
+Write configuration to components.json. Proceed? > Y/n
```
### Update tailwind.config.js
diff --git a/apps/www/src/content/docs/installation/nuxt.md b/apps/www/src/content/docs/installation/nuxt.md
index 2e5567e1..b698435e 100644
--- a/apps/www/src/content/docs/installation/nuxt.md
+++ b/apps/www/src/content/docs/installation/nuxt.md
@@ -20,6 +20,7 @@ If you encounter the error `ERROR: Cannot read properties of undefined (reading
```bash
npm install -D typescript
```
+
### Install TailwindCSS module
```bash
@@ -76,7 +77,7 @@ export default defineNuxtModule({
configKey: 'shadcn',
version: '0.0.1',
compatibility: {
- nuxt: '^3.9.0',
+ nuxt: '>=3.9.0',
bridge: false,
},
},
@@ -183,11 +184,13 @@ Would you like to use TypeScript (recommended)? no / yes
Which framework are you using? Vite / Nuxt / Laravel
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
+Where is your tsconfig.json or jsconfig.json file? › ./tsconfig.json
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
+Write configuration to components.json. Proceed? > Y/n
```
### App structure
diff --git a/apps/www/src/content/docs/installation/vite.md b/apps/www/src/content/docs/installation/vite.md
index 2d223dc5..97011ae0 100644
--- a/apps/www/src/content/docs/installation/vite.md
+++ b/apps/www/src/content/docs/installation/vite.md
@@ -45,12 +45,12 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
#### `vite.config`
```typescript {5,6,9-13}
- import path from "path"
- import { defineConfig } from "vite"
- import vue from "@vitejs/plugin-vue"
+ import path from 'node:path'
+ import { defineConfig } from 'vite'
+ import vue from '@vitejs/plugin-vue'
- import tailwind from "tailwindcss"
- import autoprefixer from "autoprefixer"
+ import tailwind from 'tailwindcss'
+ import autoprefixer from 'autoprefixer'
export default defineConfig({
css: {
@@ -61,7 +61,7 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
plugins: [vue()],
resolve: {
alias: {
- "@": path.resolve(__dirname, "./src"),
+ '@': path.resolve(__dirname, './src'),
},
},
})
@@ -75,7 +75,7 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
npm install -D tailwindcss autoprefixer postcss
```
- #### `postcss.config.js`
+#### `postcss.config.js`
```js
module.exports = {
@@ -116,12 +116,12 @@ npm i -D @types/node
```
```typescript {15-19}
-import path from "path"
-import vue from "@vitejs/plugin-vue"
-import { defineConfig } from "vite"
+import path from 'node:path'
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
-import tailwind from "tailwindcss"
-import autoprefixer from "autoprefixer"
+import tailwind from 'tailwindcss'
+import autoprefixer from 'autoprefixer'
export default defineConfig({
css: {
@@ -132,7 +132,7 @@ export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
- "@": path.resolve(__dirname, "./src"),
+ '@': path.resolve(__dirname, './src'),
},
},
})
@@ -159,11 +159,13 @@ Would you like to use TypeScript (recommended)? no / yes
Which framework are you using? Vite / Nuxt / Laravel
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
-Where is your global CSS file? › › src/index.css
+Where is your tsconfig.json or jsconfig.json file? › ./tsconfig.json
+Where is your global CSS file? › › src/assets/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
+Write configuration to components.json. Proceed? > Y/n
```
### Update main.ts
diff --git a/apps/www/src/content/examples/forms/forms.md b/apps/www/src/content/examples/forms/index.md
similarity index 100%
rename from apps/www/src/content/examples/forms/forms.md
rename to apps/www/src/content/examples/forms/index.md
diff --git a/apps/www/src/examples/cards/components/CreateAccount.vue b/apps/www/src/examples/cards/components/CreateAccount.vue
index 0ca2ea18..9a06dd94 100644
--- a/apps/www/src/examples/cards/components/CreateAccount.vue
+++ b/apps/www/src/examples/cards/components/CreateAccount.vue
@@ -27,7 +27,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'