docs: fix DataTableDemo repro links fix new-york style

[sadeghbarati]

https://www.shadcn-vue.com/docs/components/data-table.html

The way you handle the components with the start command is so nice 😮
I did it manually in (.vitepress/theme/plugins/utils|previewer.ts) with base config lol

---

BTW this PR will fix DataTableDemo and new-york code in reproduction buttons

[zernonia]

unfortunately this dynamic import wouldn't work, as we are rendering ComponentPreview dynamically, and not statically rendered.

[zernonia]

I think we would need to create a registry.json for demos .. so that the code can be imported correctly during production.

[sadeghbarati]

Seems working here 🤔

DataTableDemo.-.Radix.Vue.-.StackBlitz.-.Google.Chrome.2023-10-22.11-53-23.mp4

DataTableDemoColumn.vue (default style)

<script setup lang="ts">
import { MoreHorizontal } from 'lucide-vue-next'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
import { Button } from '@/components/ui/button'

defineProps<{
  payment: {
    id: string
  }
}>()

function copy(id: string) {
  navigator.clipboard.writeText(id)
}
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Button variant="ghost" class="h-8 w-8 p-0">
        <span class="sr-only">Open menu</span>
        <MoreHorizontal class="h-4 w-4" />
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
      <DropdownMenuLabel>Actions</DropdownMenuLabel>
      <DropdownMenuItem @click="copy(payment.id)">
        Copy payment ID
      </DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem>View customer</DropdownMenuItem>
      <DropdownMenuItem>View payment details</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

DataTableDemoColumn.vue (new-york style)

<script setup lang="ts">
import { DotsHorizontalIcon } from '@radix-icons/vue'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
import { Button } from '@/components/ui/button'

defineProps<{
  payment: {
    id: string
  }
}>()

function copy(id: string) {
  navigator.clipboard.writeText(id)
}
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Button variant="ghost" class="h-8 w-8 p-0">
        <span class="sr-only">Open menu</span>
        <DotsHorizontalIcon class="h-4 w-4" />
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
      <DropdownMenuLabel>Actions</DropdownMenuLabel>
      <DropdownMenuItem @click="copy(payment.id)">
        Copy payment ID
      </DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem>View customer</DropdownMenuItem>
      <DropdownMenuItem>View payment details</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

[zernonia]

Hmm.. what's the setup ya? after bundling (pnpm build) it fails to resolve ../../../src/lib/registry/${props.style}/example/${file}.vue?raw

[sadeghbarati]

Tested with vitepress build and vitepress preview still got the same result

BTW You're right it's local it's different from actual production