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

chore: update deps

Browse Source 
root
apps/www

fix line numbers line-height
This commit is contained in:
sadeghbarati 2024-05-21 15:06:41 +03:30
parent 1aa9b6172e
commit af5d0b323d
6 changed files with 1440 additions and 830 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/www/.vitepress/config.mts
View File

@ -3,9 +3,9 @@ import { defineConfig } from 'vitepress'
import Icons from 'unplugin-icons/vite' import Icons from 'unplugin-icons/vite'
import tailwind from 'tailwindcss' import tailwind from 'tailwindcss'
import autoprefixer from 'autoprefixer' import autoprefixer from 'autoprefixer'
import { transformerMetaWordHighlight } from '@shikijs/transformers'
import { cssVariables } from './theme/config/shiki' import { cssVariables } from './theme/config/shiki'
// import { transformerMetaWordHighlight, transformerNotationWordHighlight } from '@shikijs/transformers'
import { siteConfig } from './theme/config/site' import { siteConfig } from './theme/config/site'
import ComponentPreviewPlugin from './theme/plugins/previewer' import ComponentPreviewPlugin from './theme/plugins/previewer'
import CodeWrapperPlugin from './theme/plugins/codewrapper' import CodeWrapperPlugin from './theme/plugins/codewrapper'
@ -56,8 +56,7 @@ export default defineConfig({
markdown: { markdown: {
theme: cssVariables, theme: cssVariables,
codeTransformers: [ codeTransformers: [
// transformerMetaWordHighlight(), transformerMetaWordHighlight(),
// transformerNotationWordHighlight(),
], ],
config(md) { config(md) {
md.use(ComponentPreviewPlugin) md.use(ComponentPreviewPlugin)
@ -77,7 +76,7 @@ export default defineConfig({
}, },
}, },
plugins: [ plugins: [
Icons({ compiler: 'vue3', autoInstall: true }), Icons({ compiler: 'vue3', autoInstall: true }) as any,
], ],
resolve: { resolve: {
alias: { alias: {

14
apps/www/.vitepress/theme/style.css
View File

@ -164,15 +164,23 @@ pre {
} }
pre code { 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 { 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 { .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), ::view-transition-old(root),

60
apps/www/package.json
View File

@ -17,66 +17,66 @@
}, },
"dependencies": { "dependencies": {
"@formkit/auto-animate": "^0.8.2", "@formkit/auto-animate": "^0.8.2",
"@internationalized/date": "^3.5.2", "@internationalized/date": "^3.5.4",
"@radix-icons/vue": "^1.0.0", "@radix-icons/vue": "^1.0.0",
"@stackblitz/sdk": "^1.9.0", "@stackblitz/sdk": "^1.10.0",
"@tanstack/vue-table": "^8.16.0", "@tanstack/vue-table": "^8.17.3",
"@unovis/ts": "^1.4.0", "@unovis/ts": "^1.4.1",
"@unovis/vue": "^1.4.0", "@unovis/vue": "^1.4.1",
"@vee-validate/zod": "^4.12.6", "@vee-validate/zod": "^4.12.8",
"@vueuse/core": "^10.9.0", "@vueuse/core": "^10.9.0",
"class-variance-authority": "^0.7.0", "class-variance-authority": "^0.7.0",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"codesandbox": "^2.2.3", "codesandbox": "^2.2.3",
"date-fns": "^3.6.0", "date-fns": "^3.6.0",
"embla-carousel": "^8.0.2", "embla-carousel": "^8.1.3",
"embla-carousel-autoplay": "^8.0.2", "embla-carousel-autoplay": "^8.1.3",
"embla-carousel-vue": "^8.0.2", "embla-carousel-vue": "^8.1.3",
"lucide-vue-next": "^0.359.0", "lucide-vue-next": "^0.378.0",
"magic-string": "^0.30.10", "magic-string": "^0.30.10",
"radix-vue": "^1.7.3", "radix-vue": "^1.8.1",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"v-calendar": "^3.1.2", "v-calendar": "^3.1.2",
"vaul-vue": "^0.1.2", "vaul-vue": "^0.1.2",
"vee-validate": "4.12.6", "vee-validate": "4.12.6",
"vue": "^3.4.24", "vue": "^3.4.27",
"vue-sonner": "^1.1.2", "vue-sonner": "^1.1.2",
"vue-wrap-balancer": "^1.1.3", "vue-wrap-balancer": "^1.1.3",
"zod": "^3.23.3" "zod": "^3.23.8"
}, },
"devDependencies": { "devDependencies": {
"@babel/traverse": "^7.24.1", "@babel/traverse": "^7.24.5",
"@iconify-json/gravity-ui": "^1.1.2", "@iconify-json/gravity-ui": "^1.1.2",
"@iconify-json/lucide": "^1.1.180", "@iconify-json/lucide": "^1.1.187",
"@iconify-json/ph": "^1.1.12", "@iconify-json/ph": "^1.1.13",
"@iconify-json/radix-icons": "^1.1.14", "@iconify-json/radix-icons": "^1.1.14",
"@iconify-json/ri": "^1.1.18", "@iconify-json/ri": "^1.1.20",
"@iconify-json/simple-icons": "^1.1.94", "@iconify-json/simple-icons": "^1.1.102",
"@iconify-json/tabler": "^1.1.106", "@iconify-json/tabler": "^1.1.112",
"@iconify/vue": "^4.1.2", "@iconify/vue": "^4.1.2",
"@oxc-parser/wasm": "^0.1.0", "@oxc-parser/wasm": "^0.1.0",
"@shikijs/transformers": "^1.3.0", "@shikijs/transformers": "^1.6.0",
"@types/lodash-es": "^4.17.12", "@types/lodash-es": "^4.17.12",
"@types/node": "^20.12.7", "@types/node": "^20.12.12",
"@vitejs/plugin-vue": "^5.0.4", "@vitejs/plugin-vue": "^5.0.4",
"@vitejs/plugin-vue-jsx": "^3.1.0", "@vitejs/plugin-vue-jsx": "^3.1.0",
"@vue/compiler-core": "^3.4.24", "@vue/compiler-core": "^3.4.27",
"@vue/compiler-dom": "^3.4.24", "@vue/compiler-dom": "^3.4.27",
"@vue/tsconfig": "^0.5.1", "@vue/tsconfig": "^0.5.1",
"autoprefixer": "^10.4.19", "autoprefixer": "^10.4.19",
"fast-glob": "^3.3.2", "fast-glob": "^3.3.2",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"markdown-it": "^14.1.0", "markdown-it": "^14.1.0",
"pathe": "^1.1.2", "pathe": "^1.1.2",
"rimraf": "^5.0.5", "rimraf": "^5.0.7",
"shiki": "^1.3.0", "shiki": "^1.6.0",
"tailwind-merge": "^2.3.0", "tailwind-merge": "^2.3.0",
"tailwindcss": "^3.4.3", "tailwindcss": "^3.4.3",
"tsx": "^4.7.2", "tsx": "^4.10.5",
"typescript": "^5.4.5", "typescript": "^5.4.5",
"unplugin-icons": "^0.18.5", "unplugin-icons": "^0.19.0",
"vitepress": "^1.1.3", "vitepress": "^1.2.2",
"vue-component-meta": "^2.0.13", "vue-component-meta": "^2.0.19",
"vue-tsc": "^2.0.14" "vue-tsc": "^2.0.19"
} }
} }

310
apps/www/src/content/docs/components/data-table.md
View File

@ -114,7 +114,7 @@ Let's start by building a basic table.
First, we'll define our columns in the `columns.ts` file. First, we'll define our columns in the `columns.ts` file.
```ts:line-numbers {1,12-27} ```ts:line-numbers
import { h } from 'vue' import { h } from 'vue'
export const columns: ColumnDef<Payment>[] = [ export const columns: ColumnDef<Payment>[] = [
@ -146,66 +146,70 @@ formatted, sorted and filtered.
Next, we'll create a `<DataTable />` component to render our table. Next, we'll create a `<DataTable />` component to render our table.
```vue:line-numbers ```vue
<script setup lang="ts" generic="TData, TValue"> <script setup lang="ts" generic="TData, TValue">
import type { ColumnDef } from '@tanstack/vue-table' import type { ColumnDef } from '@tanstack/vue-table'
import { import {
FlexRender, FlexRender,
getCoreRowModel, getCoreRowModel,
useVueTable, useVueTable,
} from "@tanstack/vue-table" } from '@tanstack/vue-table'
import { import {
Table, Table,
TableBody, TableBody,
TableCell, TableCell,
TableHead, TableHead,
TableHeader, TableHeader,
TableRow, TableRow,
} from "@/components/ui/table" } from '@/components/ui/table'
const props = defineProps<{ const props = defineProps<{
columns: ColumnDef<TData, TValue>[] columns: ColumnDef<TData, TValue>[]
data: TData[] data: TData[]
}>() }>()
const table = useVueTable({ const table = useVueTable({
get data() { return props.data }, get data() { return props.data },
get columns() { return props.columns }, get columns() { return props.columns },
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
}) })
</script> </script>
<template> <template>
<div class="border rounded-md"> <div class="border rounded-md">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id"> <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
<TableHead v-for="header in headerGroup.headers" :key="header.id"> <TableHead v-for="header in headerGroup.headers" :key="header.id">
<FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header" <FlexRender
:props="header.getContext()" /> v-if="!header.isPlaceholder" :render="header.column.columnDef.header"
</TableHead> :props="header.getContext()"
</TableRow> />
</TableHeader> </TableHead>
<TableBody> </TableRow>
<template v-if="table.getRowModel().rows?.length"> </TableHeader>
<TableRow v-for="row in table.getRowModel().rows" :key="row.id" <TableBody>
:data-state="row.getIsSelected() ? 'selected' : undefined"> <template v-if="table.getRowModel().rows?.length">
<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id"> <TableRow
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" /> v-for="row in table.getRowModel().rows" :key="row.id"
</TableCell> :data-state="row.getIsSelected() ? 'selected' : undefined"
</TableRow> >
</template> <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
<template v-else> <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
<TableRow> </TableCell>
<TableCell :colSpan="columns.length" class="h-24 text-center"> </TableRow>
No results. </template>
</TableCell> <template v-else>
</TableRow> <TableRow>
</template> <TableCell :col-span="columns.length" class="h-24 text-center">
</TableBody> No results.
</Table> </TableCell>
</div> </TableRow>
</template>
</TableBody>
</Table>
</div>
</template> </template>
``` ```
@ -221,12 +225,12 @@ const table = useVueTable({
Finally, we'll render our table in our index component. Finally, we'll render our table in our index component.
```vue:line-numbers {28} ```vue
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue' import { onMounted, ref } from 'vue'
import { columns } from "./components/columns" import { columns } from './components/columns'
import type { Payment } from './components/columns'; import type { Payment } from './components/columns'
import DataTable from "./components/DataTable.vue" import DataTable from './components/DataTable.vue'
const data = ref<Payment[]>([]) const data = ref<Payment[]>([])
@ -234,18 +238,18 @@ async function getData(): Promise<Payment[]> {
// Fetch data from your API here. // Fetch data from your API here.
return [ return [
{ {
id: "728ed52f", id: '728ed52f',
amount: 100, amount: 100,
status: "pending", status: 'pending',
email: "m@example.com", email: 'm@example.com',
}, },
// ... // ...
] ]
} }
onMounted(async () => { onMounted(async () => {
data.value = await getData(); data.value = await getData()
}); })
</script> </script>
<template> <template>
@ -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: 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' import { h } from 'vue'
export const columns: ColumnDef<Payment>[] = [ export const columns: ColumnDef<Payment>[] = [
{ {
accessorKey: "amount", accessorKey: 'amount',
header: () => h('div', { class: 'text-right' }, 'Amount'), header: () => h('div', { class: 'text-right' }, 'Amount'),
cell: ({ row }) => { cell: ({ row }) => {
const amount = parseFloat(row.getValue("amount")) const amount = Number.parseFloat(row.getValue('amount'))
const formatted = new Intl.NumberFormat("en-US", { const formatted = new Intl.NumberFormat('en-US', {
style: "currency", style: 'currency',
currency: "USD", currency: 'USD',
}).format(amount) }).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. 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 `<Dropdown />` component for thi
<Steps> <Steps>
### Add the following into your `DataTableDropDown.vue` component: ### Add the following into your `DataTableDropDown.vue` component
```vue:line-numbers ```vue
// DataTableDropDown.vue
<script setup lang="ts"> <script setup lang="ts">
import { MoreHorizontal } from 'lucide-vue-next' import { MoreHorizontal } from 'lucide-vue-next'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu' import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
@ -334,32 +337,30 @@ function copy(id: string) {
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
</template> </template>
``` ```
### Update columns definition ### Update columns definition
Update our columns definition to add a new `actions` column. The `actions` cell returns a `<Dropdown />` component. Update our columns definition to add a new `actions` column. The `actions` cell returns a `<Dropdown />` component.
```ts:line-numbers showLineNumber{2,6-16} ```ts
import { ColumnDef } from "@tanstack/vue-table" import { ColumnDef } from '@tanstack/vue-table'
import DropdownAction from '@/components/DataTableDropDown.vue' import DropdownAction from '@/components/DataTableDropDown.vue'
export const columns: ColumnDef<Payment>[] = [ export const columns: ColumnDef<Payment>[] = [
// ... // ...
{ {
id: 'actions', id: 'actions',
enableHiding: false, enableHiding: false,
cell: ({ row }) => { cell: ({ row }) => {
const payment = row.original const payment = row.original
return h('div', { class: 'relative' }, h(DropdownAction, { return h('div', { class: 'relative' }, h(DropdownAction, {
payment, payment,
})) }))
},
}, },
},
] ]
``` ```
You can access the row data using `row.original` in the `cell` function. Use this to handle actions for your row eg. use the `id` to make a DELETE call to your API. You can access the row data using `row.original` in the `cell` function. Use this to handle actions for your row eg. use the `id` to make a DELETE call to your API.
@ -396,47 +397,45 @@ This will automatically paginate your rows into pages of 10. See the [pagination
We can add pagination controls to our table using the `<Button />` component and the `table.previousPage()`, `table.nextPage()` API methods. We can add pagination controls to our table using the `<Button />` component and the `table.previousPage()`, `table.nextPage()` API methods.
```vue:line-numbers {3,15,21-39} ```vue
<script lang="ts" generic="TData, TValue"> <script lang="ts" generic="TData, TValue">
import { Button } from "@/components/ui/button" import { Button } from '@/components/ui/button'
const table = useVueTable({ const table = useVueTable({
get data() { return props.data }, get data() { return props.data },
get columns() { return props.columns }, get columns() { return props.columns },
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(), getPaginationRowModel: getPaginationRowModel(),
}) })
</script> </script>
<template> <template>
<div> <div>
<div class="border rounded-md"> <div class="border rounded-md">
<Table> <Table>
{ // .... } { // .... }
</Table> </Table>
</div>
<div class="flex items-center justify-end py-4 space-x-2">
<Button
variant="outline"
size="sm"
:disabled="!table.getCanPreviousPage()"
@click="table.previousPage()"
>
Previous
</Button>
<Button
variant="outline"
size="sm"
:disabled="!table.getCanNextPage()"
@click="table.nextPage()"
>
Next
</Button>
</div>
</div> </div>
<div class="flex items-center justify-end py-4 space-x-2">
<Button
variant="outline"
size="sm"
:disabled="!table.getCanPreviousPage()"
@click="table.previousPage()"
>
Previous
</Button>
<Button
variant="outline"
size="sm"
:disabled="!table.getCanNextPage()"
@click="table.nextPage()"
>
Next
</Button>
</div>
</div>
</template> </template>
``` ```
See [Reusable Components](#reusable-components) section for a more advanced pagination component. See [Reusable Components](#reusable-components) section for a more advanced pagination component.
@ -449,24 +448,23 @@ Let's make the email column sortable.
<Steps> <Steps>
### 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 { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge' import { twMerge } from 'tailwind-merge'
import type { Updater } from '@tanstack/vue-table' import type { Updater } from '@tanstack/vue-table'
import { type Ref } from 'vue' import type { Ref } from 'vue'
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)) return twMerge(clsx(inputs))
} }
export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) { export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
ref.value ref.value = typeof updaterOrValue === 'function'
= typeof updaterOrValue === 'function' ? updaterOrValue(ref.value)
? updaterOrValue(ref.value) : updaterOrValue
: updaterOrValue
} }
``` ```
@ -474,62 +472,60 @@ The `valueUpdater` function updates a Vue `ref` object's value. It handles both
### Update `<DataTable>` ### Update `<DataTable>`
```vue:line-numbers {4,7,16,34,41-44} ```vue:line-numbers {4,14,17,33,40-44}
<script setup lang="ts" generic="TData, TValue"> <script setup lang="ts" generic="TData, TValue">
import type { import type {
ColumnDef, ColumnDef,
SortingState, SortingState,
} from '@tanstack/vue-table' } from '@tanstack/vue-table'
import { valueUpdater } from '@/lib/utils'
import { ArrowUpDown, ChevronDown } from 'lucide-vue-next' import { ArrowUpDown, ChevronDown } from 'lucide-vue-next'
import { h, ref } from 'vue' import { h, ref } from 'vue'
import { import {
FlexRender, FlexRender,
getCoreRowModel, getCoreRowModel,
getPaginationRowModel, getPaginationRowModel,
getSortedRowModel, getSortedRowModel,
useVueTable, useVueTable,
} from "@tanstack/vue-table" } from '@tanstack/vue-table'
import { valueUpdater } from '@/lib/utils'
import { import {
Table, Table,
TableBody, TableBody,
TableCell, TableCell,
TableHead, TableHead,
TableHeader, TableHeader,
TableRow, TableRow,
} from "@/components/ui/table" } from '@/components/ui/table'
const props = defineProps<{ const props = defineProps<{
columns: ColumnDef<TData, TValue>[] columns: ColumnDef<TData, TValue>[]
data: TData[] data: TData[]
}>() }>()
const sorting = ref<SortingState>([]) const sorting = ref<SortingState>([])
const table = useVueTable({ const table = useVueTable({
get data() { return props.data }, get data() { return props.data },
get columns() { return props.columns }, get columns() { return props.columns },
getCoreRowModel: getCoreRowModel(), getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(), getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(), getSortedRowModel: getSortedRowModel(),
onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting), onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
state: { state: {
get sorting() { return sorting.value }, get sorting() { return sorting.value },
}, },
}) })
</script> </script>
<template> <template>
<div> <div>
<div class="border rounded-md"> <div class="border rounded-md">
<Table>{ ... }</Table> <Table>{ ... }</Table>
</div>
</div> </div>
</div>
</template> </template>
``` ```

10
package.json
View File

@ -3,7 +3,7 @@
"type": "module", "type": "module",
"version": "0.10.5", "version": "0.10.5",
"private": true, "private": true,
"packageManager": "pnpm@9.0.5", "packageManager": "pnpm@9.1.2",
"license": "MIT", "license": "MIT",
"repository": "radix-vue/shadcn-vue", "repository": "radix-vue/shadcn-vue",
"workspaces": [ "workspaces": [
@ -28,15 +28,15 @@
"taze:minor": "taze minor -fwri --ignore-paths ./packages/cli/test/** --exclude /@iconify/" "taze:minor": "taze minor -fwri --ignore-paths ./packages/cli/test/** --exclude /@iconify/"
}, },
"devDependencies": { "devDependencies": {
"@antfu/eslint-config": "^2.15.0", "@antfu/eslint-config": "^2.18.1",
"@commitlint/cli": "^19.3.0", "@commitlint/cli": "^19.3.0",
"@commitlint/config-conventional": "^19.2.2", "@commitlint/config-conventional": "^19.2.2",
"@vitest/ui": "^1.6.0", "@vitest/ui": "^1.6.0",
"bumpp": "^9.4.0", "bumpp": "^9.4.1",
"eslint": "^9.1.1", "eslint": "^9.3.0",
"lint-staged": "^15.2.2", "lint-staged": "^15.2.2",
"simple-git-hooks": "^2.11.1", "simple-git-hooks": "^2.11.1",
"taze": "^0.13.6", "taze": "^0.13.8",
"typescript": "^5.4.5", "typescript": "^5.4.5",
"vitest": "^1.6.0" "vitest": "^1.6.0"
}, },

1869
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff