chore: update deps
root apps/www fix line numbers line-height
This commit is contained in:
sadeghbarati
parent
1aa9b6172e
commit
af5d0b323d
|
|
@ -3,9 +3,9 @@ import { defineConfig } from 'vitepress'
|
|||
import Icons from 'unplugin-icons/vite'
|
||||
import tailwind from 'tailwindcss'
|
||||
import autoprefixer from 'autoprefixer'
|
||||
import { transformerMetaWordHighlight } from '@shikijs/transformers'
|
||||
import { cssVariables } from './theme/config/shiki'
|
||||
|
||||
// import { transformerMetaWordHighlight, transformerNotationWordHighlight } from '@shikijs/transformers'
|
||||
import { siteConfig } from './theme/config/site'
|
||||
import ComponentPreviewPlugin from './theme/plugins/previewer'
|
||||
import CodeWrapperPlugin from './theme/plugins/codewrapper'
|
||||
|
|
@ -56,8 +56,7 @@ export default defineConfig({
|
|||
markdown: {
|
||||
theme: cssVariables,
|
||||
codeTransformers: [
|
||||
// transformerMetaWordHighlight(),
|
||||
// transformerNotationWordHighlight(),
|
||||
transformerMetaWordHighlight(),
|
||||
],
|
||||
config(md) {
|
||||
md.use(ComponentPreviewPlugin)
|
||||
|
|
@ -77,7 +76,7 @@ export default defineConfig({
|
|||
},
|
||||
},
|
||||
plugins: [
|
||||
Icons({ compiler: 'vue3', autoInstall: true }),
|
||||
Icons({ compiler: 'vue3', autoInstall: true }) as any,
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
|
|
|
|||
|
|
@ -167,12 +167,20 @@ pre code {
|
|||
@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),
|
||||
|
|
|
|||
|
|
@ -17,66 +17,66 @@
|
|||
},
|
||||
"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",
|
||||
"@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.12.8",
|
||||
"@vueuse/core": "^10.9.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": "^8.1.3",
|
||||
"embla-carousel-autoplay": "^8.1.3",
|
||||
"embla-carousel-vue": "^8.1.3",
|
||||
"lucide-vue-next": "^0.378.0",
|
||||
"magic-string": "^0.30.10",
|
||||
"radix-vue": "^1.7.3",
|
||||
"radix-vue": "^1.8.1",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"v-calendar": "^3.1.2",
|
||||
"vaul-vue": "^0.1.2",
|
||||
"vee-validate": "4.12.6",
|
||||
"vue": "^3.4.24",
|
||||
"vue": "^3.4.27",
|
||||
"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",
|
||||
"@babel/traverse": "^7.24.5",
|
||||
"@iconify-json/gravity-ui": "^1.1.2",
|
||||
"@iconify-json/lucide": "^1.1.180",
|
||||
"@iconify-json/ph": "^1.1.12",
|
||||
"@iconify-json/lucide": "^1.1.187",
|
||||
"@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.102",
|
||||
"@iconify-json/tabler": "^1.1.112",
|
||||
"@iconify/vue": "^4.1.2",
|
||||
"@oxc-parser/wasm": "^0.1.0",
|
||||
"@shikijs/transformers": "^1.3.0",
|
||||
"@shikijs/transformers": "^1.6.0",
|
||||
"@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-jsx": "^3.1.0",
|
||||
"@vue/compiler-core": "^3.4.24",
|
||||
"@vue/compiler-dom": "^3.4.24",
|
||||
"@vue/compiler-core": "^3.4.27",
|
||||
"@vue/compiler-dom": "^3.4.27",
|
||||
"@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.6.0",
|
||||
"tailwind-merge": "^2.3.0",
|
||||
"tailwindcss": "^3.4.3",
|
||||
"tsx": "^4.7.2",
|
||||
"tsx": "^4.10.5",
|
||||
"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.2",
|
||||
"vue-component-meta": "^2.0.19",
|
||||
"vue-tsc": "^2.0.19"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<Payment>[] = [
|
||||
|
|
@ -146,14 +146,14 @@ formatted, sorted and filtered.
|
|||
|
||||
Next, we'll create a `<DataTable />` component to render our table.
|
||||
|
||||
```vue:line-numbers
|
||||
```vue
|
||||
<script setup lang="ts" generic="TData, TValue">
|
||||
import type { ColumnDef } from '@tanstack/vue-table'
|
||||
import {
|
||||
FlexRender,
|
||||
getCoreRowModel,
|
||||
useVueTable,
|
||||
} from "@tanstack/vue-table"
|
||||
} from '@tanstack/vue-table'
|
||||
|
||||
import {
|
||||
Table,
|
||||
|
|
@ -162,7 +162,7 @@ import {
|
|||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
} from '@/components/ui/table'
|
||||
|
||||
const props = defineProps<{
|
||||
columns: ColumnDef<TData, TValue>[]
|
||||
|
|
@ -182,15 +182,19 @@ const table = useVueTable({
|
|||
<TableHeader>
|
||||
<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
|
||||
<TableHead v-for="header in headerGroup.headers" :key="header.id">
|
||||
<FlexRender v-if="!header.isPlaceholder" :render="header.column.columnDef.header"
|
||||
:props="header.getContext()" />
|
||||
<FlexRender
|
||||
v-if="!header.isPlaceholder" :render="header.column.columnDef.header"
|
||||
:props="header.getContext()"
|
||||
/>
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
<template v-if="table.getRowModel().rows?.length">
|
||||
<TableRow v-for="row in table.getRowModel().rows" :key="row.id"
|
||||
:data-state="row.getIsSelected() ? 'selected' : undefined">
|
||||
<TableRow
|
||||
v-for="row in table.getRowModel().rows" :key="row.id"
|
||||
:data-state="row.getIsSelected() ? 'selected' : undefined"
|
||||
>
|
||||
<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
|
||||
<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
|
||||
</TableCell>
|
||||
|
|
@ -198,7 +202,7 @@ const table = useVueTable({
|
|||
</template>
|
||||
<template v-else>
|
||||
<TableRow>
|
||||
<TableCell :colSpan="columns.length" class="h-24 text-center">
|
||||
<TableCell :col-span="columns.length" class="h-24 text-center">
|
||||
No results.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
|
@ -221,12 +225,12 @@ const table = useVueTable({
|
|||
|
||||
Finally, we'll render our table in our index component.
|
||||
|
||||
```vue:line-numbers {28}
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { columns } from "./components/columns"
|
||||
import type { Payment } from './components/columns';
|
||||
import DataTable from "./components/DataTable.vue"
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { columns } from './components/columns'
|
||||
import type { Payment } from './components/columns'
|
||||
import DataTable from './components/DataTable.vue'
|
||||
|
||||
const data = ref<Payment[]>([])
|
||||
|
||||
|
|
@ -234,18 +238,18 @@ async function getData(): Promise<Payment[]> {
|
|||
// Fetch data from your API here.
|
||||
return [
|
||||
{
|
||||
id: "728ed52f",
|
||||
id: '728ed52f',
|
||||
amount: 100,
|
||||
status: "pending",
|
||||
email: "m@example.com",
|
||||
status: 'pending',
|
||||
email: 'm@example.com',
|
||||
},
|
||||
// ...
|
||||
]
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
data.value = await getData();
|
||||
});
|
||||
data.value = await getData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -267,18 +271,18 @@ 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<Payment>[] = [
|
||||
{
|
||||
accessorKey: "amount",
|
||||
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",
|
||||
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)
|
||||
|
|
@ -295,10 +299,9 @@ Let's add row actions to our table. We'll use a `<Dropdown />` component for thi
|
|||
|
||||
<Steps>
|
||||
|
||||
### Add the following into your `DataTableDropDown.vue` component:
|
||||
### Add the following into your `DataTableDropDown.vue` component
|
||||
|
||||
```vue:line-numbers
|
||||
// DataTableDropDown.vue
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { MoreHorizontal } from 'lucide-vue-next'
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
|
||||
|
|
@ -334,15 +337,14 @@ function copy(id: string) {
|
|||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</template>
|
||||
|
||||
```
|
||||
|
||||
### Update columns definition
|
||||
|
||||
Update our columns definition to add a new `actions` column. The `actions` cell returns a `<Dropdown />` component.
|
||||
|
||||
```ts:line-numbers showLineNumber{2,6-16}
|
||||
import { ColumnDef } from "@tanstack/vue-table"
|
||||
```ts
|
||||
import { ColumnDef } from '@tanstack/vue-table'
|
||||
import DropdownAction from '@/components/DataTableDropDown.vue'
|
||||
|
||||
export const columns: ColumnDef<Payment>[] = [
|
||||
|
|
@ -359,7 +361,6 @@ export const columns: ColumnDef<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.
|
||||
|
|
@ -396,9 +397,9 @@ 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.
|
||||
|
||||
```vue:line-numbers {3,15,21-39}
|
||||
```vue
|
||||
<script lang="ts" generic="TData, TValue">
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Button } from '@/components/ui/button'
|
||||
|
||||
const table = useVueTable({
|
||||
get data() { return props.data },
|
||||
|
|
@ -406,7 +407,6 @@ const table = useVueTable({
|
|||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -436,7 +436,6 @@ const table = useVueTable({
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
```
|
||||
|
||||
See [Reusable Components](#reusable-components) section for a more advanced pagination component.
|
||||
|
|
@ -449,22 +448,21 @@ Let's make the email column sortable.
|
|||
|
||||
<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 { 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<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
|
||||
ref.value
|
||||
= typeof updaterOrValue === 'function'
|
||||
ref.value = typeof updaterOrValue === 'function'
|
||||
? updaterOrValue(ref.value)
|
||||
: updaterOrValue
|
||||
}
|
||||
|
|
@ -474,15 +472,13 @@ The `valueUpdater` function updates a Vue `ref` object's value. It handles both
|
|||
|
||||
### 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">
|
||||
import type {
|
||||
ColumnDef,
|
||||
SortingState,
|
||||
} from '@tanstack/vue-table'
|
||||
|
||||
import { valueUpdater } from '@/lib/utils'
|
||||
|
||||
import { ArrowUpDown, ChevronDown } from 'lucide-vue-next'
|
||||
import { h, ref } from 'vue'
|
||||
|
||||
|
|
@ -492,7 +488,8 @@ import {
|
|||
getPaginationRowModel,
|
||||
getSortedRowModel,
|
||||
useVueTable,
|
||||
} from "@tanstack/vue-table"
|
||||
} from '@tanstack/vue-table'
|
||||
import { valueUpdater } from '@/lib/utils'
|
||||
|
||||
import {
|
||||
Table,
|
||||
|
|
@ -501,7 +498,7 @@ import {
|
|||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
} from '@/components/ui/table'
|
||||
|
||||
const props = defineProps<{
|
||||
columns: ColumnDef<TData, TValue>[]
|
||||
|
|
@ -521,7 +518,6 @@ const table = useVueTable({
|
|||
get sorting() { return sorting.value },
|
||||
},
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -3,7 +3,7 @@
|
|||
"type": "module",
|
||||
"version": "0.10.5",
|
||||
"private": true,
|
||||
"packageManager": "pnpm@9.0.5",
|
||||
"packageManager": "pnpm@9.1.2",
|
||||
"license": "MIT",
|
||||
"repository": "radix-vue/shadcn-vue",
|
||||
"workspaces": [
|
||||
|
|
@ -28,15 +28,15 @@
|
|||
"taze:minor": "taze minor -fwri --ignore-paths ./packages/cli/test/** --exclude /@iconify/"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antfu/eslint-config": "^2.15.0",
|
||||
"@antfu/eslint-config": "^2.18.1",
|
||||
"@commitlint/cli": "^19.3.0",
|
||||
"@commitlint/config-conventional": "^19.2.2",
|
||||
"@vitest/ui": "^1.6.0",
|
||||
"bumpp": "^9.4.0",
|
||||
"eslint": "^9.1.1",
|
||||
"bumpp": "^9.4.1",
|
||||
"eslint": "^9.3.0",
|
||||
"lint-staged": "^15.2.2",
|
||||
"simple-git-hooks": "^2.11.1",
|
||||
"taze": "^0.13.6",
|
||||
"taze": "^0.13.8",
|
||||
"typescript": "^5.4.5",
|
||||
"vitest": "^1.6.0"
|
||||
},
|
||||
|
|
|
|||
1869
pnpm-lock.yaml
1869
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user