docs: fix and cleanup some of demos (#773)

chore: update deps

apps/www/package.json

@@ -24,23 +24,23 @@
     "@unovis/ts": "^1.4.4",
     "@unovis/vue": "^1.4.4",
     "@vee-validate/zod": "^4.13.2",
-    "@vueuse/core": "^11.0.3",
+    "@vueuse/core": "^11.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "codesandbox": "^2.2.3",
-    "date-fns": "^3.6.0",
-    "embla-carousel-autoplay": "^8.2.0",
-    "embla-carousel-vue": "^8.2.0",
-    "lucide-vue-next": "^0.436.0",
+    "date-fns": "^4.1.0",
+    "embla-carousel-autoplay": "^8.3.0",
+    "embla-carousel-vue": "^8.3.0",
+    "lucide-vue-next": "^0.441.0",
     "magic-string": "^0.30.11",
     "radix-vue": "catalog:",
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
     "vaul-vue": "^0.2.0",
     "vee-validate": "4.13.2",
-    "vue": "^3.4.38",
+    "vue": "^3.5.6",
     "vue-sonner": "^1.1.5",
-    "vue-wrap-balancer": "^1.1.3",
+    "vue-wrap-balancer": "^1.2.1",
     "zod": "catalog:"
   },
   "devDependencies": {
@@ -54,28 +54,28 @@
     "@iconify-json/tabler": "^1.1.116",
     "@iconify/vue": "^4.1.2",
     "@oxc-parser/wasm": "catalog:",
-    "@shikijs/transformers": "^1.15.1",
+    "@shikijs/transformers": "^1.17.7",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.16.2",
-    "@vitejs/plugin-vue": "^5.1.3",
+    "@types/node": "^22.5.5",
+    "@vitejs/plugin-vue": "^5.1.4",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
-    "@vue/compiler-core": "^3.4.38",
-    "@vue/compiler-dom": "^3.4.38",
+    "@vue/compiler-core": "^3.5.6",
+    "@vue/compiler-dom": "^3.5.6",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.20",
     "fast-glob": "^3.3.2",
     "lodash-es": "^4.17.21",
     "markdown-it": "^14.1.0",
     "pathe": "^1.1.2",
     "rimraf": "^6.0.1",
-    "shiki": "^1.15.1",
+    "shiki": "^1.17.7",
     "tailwind-merge": "^2.5.2",
-    "tailwindcss": "^3.4.10",
-    "tsx": "^4.19.0",
-    "typescript": "^5.5.4",
-    "unplugin-icons": "^0.19.2",
+    "tailwindcss": "^3.4.12",
+    "tsx": "^4.19.1",
+    "typescript": "^5.6.2",
+    "unplugin-icons": "^0.19.3",
     "vitepress": "^1.3.4",
-    "vue-component-meta": "^2.1.2",
-    "vue-tsc": "^2.1.2"
+    "vue-component-meta": "^2.1.6",
+    "vue-tsc": "^2.1.6"
   }
 }

apps/www/src/examples/cards/components/DatePicker.vue

@@ -11,7 +11,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'
         <Label for="date" class="shrink-0">
           Pick a date
         </Label>
-        <DatePickerWithRange class="[&>button]:w-[260px]" />
+        <DatePickerWithRange />
       </div>
     </CardContent>
   </Card>

apps/www/src/lib/registry/default/example/PinInputFormDemo.vue

@@ -1,13 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-import {
-  PinInput,
-  PinInputGroup,
-  PinInputInput,
-} from '@/lib/registry/default/ui/pin-input'
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   FormControl,
@@ -17,7 +8,16 @@ import {
   FormLabel,
   FormMessage,
 } from '@/lib/registry/default/ui/form'
+import {
+  PinInput,
+  PinInputGroup,
+  PinInputInput,
+} from '@/lib/registry/default/ui/pin-input'
 import { toast } from '@/lib/registry/default/ui/toast'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const formSchema = toTypedSchema(z.object({
   pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),
@@ -48,7 +48,7 @@ const handleComplete = (e: string[]) => console.log(e.join(''))
         <FormControl>
           <PinInput
             id="pin-input"
-            v-model="value!"
+            :model-value="value"
             placeholder="○"
             class="flex gap-2 items-center mt-1"
             otp

apps/www/src/lib/registry/new-york/example/DataTableDemo.vue

@@ -6,19 +6,6 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/vue-table'
-import {
-  FlexRender,
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useVueTable,
-} from '@tanstack/vue-table'
-import { h, ref } from 'vue'
-import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
-import DropdownAction from './DataTableDemoColumn.vue'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
 import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
 import {
@@ -28,6 +15,7 @@ import {
   DropdownMenuTrigger,
 } from '@/lib/registry/new-york/ui/dropdown-menu'
 import { Input } from '@/lib/registry/new-york/ui/input'
+
 import {
   Table,
   TableBody,
@@ -37,6 +25,18 @@ import {
   TableRow,
 } from '@/lib/registry/new-york/ui/table'
 import { valueUpdater } from '@/lib/utils'
+import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
+import {
+  FlexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useVueTable,
+} from '@tanstack/vue-table'
+import { h, ref } from 'vue'
+import DropdownAction from './DataTableDemoColumn.vue'
 
 export interface Payment {
   id: string
@@ -105,7 +105,7 @@ const columns: ColumnDef<Payment>[] = [
       return h(Button, {
         variant: 'ghost',
         onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),
-      }, ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
+      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])
     },
     cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),
   },

apps/www/src/lib/registry/new-york/example/PinInputFormDemo.vue

@@ -1,13 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-import {
-  PinInput,
-  PinInputGroup,
-  PinInputInput,
-} from '@/lib/registry/new-york/ui/pin-input'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   FormControl,
@@ -17,7 +8,16 @@ import {
   FormLabel,
   FormMessage,
 } from '@/lib/registry/new-york/ui/form'
+import {
+  PinInput,
+  PinInputGroup,
+  PinInputInput,
+} from '@/lib/registry/new-york/ui/pin-input'
 import { toast } from '@/lib/registry/new-york/ui/toast'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const formSchema = toTypedSchema(z.object({
   pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),
@@ -48,7 +48,7 @@ const handleComplete = (e: string[]) => console.log(e.join(''))
         <FormControl>
           <PinInput
             id="pin-input"
-            v-model="value!"
+            :model-value="value"
             placeholder="○"
             class="flex gap-2 items-center mt-1"
             otp

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.10.5",
   "private": true,
-  "packageManager": "pnpm@9.9.0",
+  "packageManager": "pnpm@9.10.0",
   "license": "MIT",
   "repository": "radix-vue/shadcn-vue",
   "workspaces": [
@@ -31,17 +31,17 @@
     "taze:minor": "taze minor -fwri --ignore-paths ./packages/cli/test/** --exclude /@iconify/"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^3.0.0",
-    "@commitlint/cli": "^19.4.1",
-    "@commitlint/config-conventional": "^19.4.1",
-    "@vitest/ui": "^2.0.5",
+    "@antfu/eslint-config": "^3.6.2",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
+    "@vitest/ui": "^2.1.1",
     "bumpp": "^9.5.2",
-    "eslint": "^9.9.1",
-    "lint-staged": "^15.2.9",
+    "eslint": "^9.10.0",
+    "lint-staged": "^15.2.10",
     "simple-git-hooks": "^2.11.1",
-    "taze": "^0.16.7",
-    "typescript": "^5.5.4",
-    "vitest": "^2.0.5"
+    "taze": "^0.16.9",
+    "typescript": "^5.6.2",
+    "vitest": "^2.1.1"
   },
   "commitlint": {
     "extends": [