mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-22 07:50:36 +01:00
Merge branch 'v3' into feat/init-blog
This commit is contained in:
HugoRCD
@@ -0,0 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
const open = ref(false)
|
||||
const anchor = ref({ x: 0, y: 0 })
|
||||
|
||||
const reference = computed(() => ({
|
||||
getBoundingClientRect: () =>
|
||||
({
|
||||
width: 0,
|
||||
height: 0,
|
||||
left: anchor.value.x,
|
||||
right: anchor.value.x,
|
||||
top: anchor.value.y,
|
||||
bottom: anchor.value.y,
|
||||
...anchor.value
|
||||
} as DOMRect)
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UPopover
|
||||
:open="open"
|
||||
:reference="reference"
|
||||
:content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72"
|
||||
@pointerenter="open = true"
|
||||
@pointerleave="open = false"
|
||||
@pointermove="(ev) => {
|
||||
anchor.x = ev.clientX
|
||||
anchor.y = ev.clientY
|
||||
}"
|
||||
>
|
||||
Hover me
|
||||
</div>
|
||||
|
||||
<template #content>
|
||||
<div class="p-4">
|
||||
{{ anchor.x.toFixed(0) }} - {{ anchor.y.toFixed(0) }}
|
||||
</div>
|
||||
</template>
|
||||
</UPopover>
|
||||
</template>
|
||||
@@ -0,0 +1,159 @@
|
||||
<script setup lang="ts">
|
||||
import { h, resolveComponent } from 'vue'
|
||||
import type { ContextMenuItem, TableColumn, TableRow } from '@nuxt/ui'
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
|
||||
const UBadge = resolveComponent('UBadge')
|
||||
const UCheckbox = resolveComponent('UCheckbox')
|
||||
|
||||
const toast = useToast()
|
||||
const { copy } = useClipboard()
|
||||
|
||||
type Payment = {
|
||||
id: string
|
||||
date: string
|
||||
status: 'paid' | 'failed' | 'refunded'
|
||||
email: string
|
||||
amount: number
|
||||
}
|
||||
|
||||
const data = ref<Payment[]>([{
|
||||
id: '4600',
|
||||
date: '2024-03-11T15:30:00',
|
||||
status: 'paid',
|
||||
email: 'james.anderson@example.com',
|
||||
amount: 594
|
||||
}, {
|
||||
id: '4599',
|
||||
date: '2024-03-11T10:10:00',
|
||||
status: 'failed',
|
||||
email: 'mia.white@example.com',
|
||||
amount: 276
|
||||
}, {
|
||||
id: '4598',
|
||||
date: '2024-03-11T08:50:00',
|
||||
status: 'refunded',
|
||||
email: 'william.brown@example.com',
|
||||
amount: 315
|
||||
}, {
|
||||
id: '4597',
|
||||
date: '2024-03-10T19:45:00',
|
||||
status: 'paid',
|
||||
email: 'emma.davis@example.com',
|
||||
amount: 529
|
||||
}, {
|
||||
id: '4596',
|
||||
date: '2024-03-10T15:55:00',
|
||||
status: 'paid',
|
||||
email: 'ethan.harris@example.com',
|
||||
amount: 639
|
||||
}])
|
||||
|
||||
const columns: TableColumn<Payment>[] = [{
|
||||
id: 'select',
|
||||
header: ({ table }) => h(UCheckbox, {
|
||||
'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
|
||||
'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
|
||||
'aria-label': 'Select all'
|
||||
}),
|
||||
cell: ({ row }) => h(UCheckbox, {
|
||||
'modelValue': row.getIsSelected(),
|
||||
'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
|
||||
'aria-label': 'Select row'
|
||||
})
|
||||
}, {
|
||||
accessorKey: 'id',
|
||||
header: '#',
|
||||
cell: ({ row }) => `#${row.getValue('id')}`
|
||||
}, {
|
||||
accessorKey: 'date',
|
||||
header: 'Date',
|
||||
cell: ({ row }) => {
|
||||
return new Date(row.getValue('date')).toLocaleString('en-US', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
})
|
||||
}
|
||||
}, {
|
||||
accessorKey: 'status',
|
||||
header: 'Status',
|
||||
cell: ({ row }) => {
|
||||
const color = ({
|
||||
paid: 'success' as const,
|
||||
failed: 'error' as const,
|
||||
refunded: 'neutral' as const
|
||||
})[row.getValue('status') as string]
|
||||
|
||||
return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
|
||||
}
|
||||
}, {
|
||||
accessorKey: 'email',
|
||||
header: 'Email'
|
||||
}, {
|
||||
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: 'EUR'
|
||||
}).format(amount)
|
||||
|
||||
return h('div', { class: 'text-right font-medium' }, formatted)
|
||||
}
|
||||
}]
|
||||
|
||||
const items = ref<ContextMenuItem[]>([])
|
||||
|
||||
function getRowItems(row: TableRow<Payment>) {
|
||||
return [{
|
||||
type: 'label' as const,
|
||||
label: 'Actions'
|
||||
}, {
|
||||
label: 'Copy payment ID',
|
||||
onSelect() {
|
||||
copy(row.original.id)
|
||||
|
||||
toast.add({
|
||||
title: 'Payment ID copied to clipboard!',
|
||||
color: 'success',
|
||||
icon: 'i-lucide-circle-check'
|
||||
})
|
||||
}
|
||||
}, {
|
||||
label: row.getIsExpanded() ? 'Collapse' : 'Expand',
|
||||
onSelect() {
|
||||
row.toggleExpanded()
|
||||
}
|
||||
}, {
|
||||
type: 'separator' as const
|
||||
}, {
|
||||
label: 'View customer'
|
||||
}, {
|
||||
label: 'View payment details'
|
||||
}]
|
||||
}
|
||||
|
||||
function onContextmenu(_e: Event, row: TableRow<Payment>) {
|
||||
items.value = getRowItems(row)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UContextMenu :items="items">
|
||||
<UTable
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
class="flex-1"
|
||||
@contextmenu="onContextmenu"
|
||||
>
|
||||
<template #expanded="{ row }">
|
||||
<pre>{{ row.original }}</pre>
|
||||
</template>
|
||||
</UTable>
|
||||
</UContextMenu>
|
||||
</template>
|
||||
@@ -0,0 +1,157 @@
|
||||
<script setup lang="ts">
|
||||
import { h, resolveComponent } from 'vue'
|
||||
import type { TableColumn, TableRow } from '@nuxt/ui'
|
||||
|
||||
const UBadge = resolveComponent('UBadge')
|
||||
const UCheckbox = resolveComponent('UCheckbox')
|
||||
|
||||
type Payment = {
|
||||
id: string
|
||||
date: string
|
||||
status: 'paid' | 'failed' | 'refunded'
|
||||
email: string
|
||||
amount: number
|
||||
}
|
||||
|
||||
const data = ref<Payment[]>([{
|
||||
id: '4600',
|
||||
date: '2024-03-11T15:30:00',
|
||||
status: 'paid',
|
||||
email: 'james.anderson@example.com',
|
||||
amount: 594
|
||||
}, {
|
||||
id: '4599',
|
||||
date: '2024-03-11T10:10:00',
|
||||
status: 'failed',
|
||||
email: 'mia.white@example.com',
|
||||
amount: 276
|
||||
}, {
|
||||
id: '4598',
|
||||
date: '2024-03-11T08:50:00',
|
||||
status: 'refunded',
|
||||
email: 'william.brown@example.com',
|
||||
amount: 315
|
||||
}, {
|
||||
id: '4597',
|
||||
date: '2024-03-10T19:45:00',
|
||||
status: 'paid',
|
||||
email: 'emma.davis@example.com',
|
||||
amount: 529
|
||||
}, {
|
||||
id: '4596',
|
||||
date: '2024-03-10T15:55:00',
|
||||
status: 'paid',
|
||||
email: 'ethan.harris@example.com',
|
||||
amount: 639
|
||||
}])
|
||||
|
||||
const columns: TableColumn<Payment>[] = [{
|
||||
id: 'select',
|
||||
header: ({ table }) => h(UCheckbox, {
|
||||
'modelValue': table.getIsSomePageRowsSelected() ? 'indeterminate' : table.getIsAllPageRowsSelected(),
|
||||
'onUpdate:modelValue': (value: boolean | 'indeterminate') => table.toggleAllPageRowsSelected(!!value),
|
||||
'aria-label': 'Select all'
|
||||
}),
|
||||
cell: ({ row }) => h(UCheckbox, {
|
||||
'modelValue': row.getIsSelected(),
|
||||
'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
|
||||
'aria-label': 'Select row'
|
||||
})
|
||||
}, {
|
||||
accessorKey: 'id',
|
||||
header: '#',
|
||||
cell: ({ row }) => `#${row.getValue('id')}`
|
||||
}, {
|
||||
accessorKey: 'date',
|
||||
header: 'Date',
|
||||
cell: ({ row }) => {
|
||||
return new Date(row.getValue('date')).toLocaleString('en-US', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
})
|
||||
}
|
||||
}, {
|
||||
accessorKey: 'status',
|
||||
header: 'Status',
|
||||
cell: ({ row }) => {
|
||||
const color = ({
|
||||
paid: 'success' as const,
|
||||
failed: 'error' as const,
|
||||
refunded: 'neutral' as const
|
||||
})[row.getValue('status') as string]
|
||||
|
||||
return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () => row.getValue('status'))
|
||||
}
|
||||
}, {
|
||||
accessorKey: 'email',
|
||||
header: 'Email'
|
||||
}, {
|
||||
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: 'EUR'
|
||||
}).format(amount)
|
||||
|
||||
return h('div', { class: 'text-right font-medium' }, formatted)
|
||||
}
|
||||
}]
|
||||
|
||||
const anchor = ref({ x: 0, y: 0 })
|
||||
|
||||
const reference = computed(() => ({
|
||||
getBoundingClientRect: () =>
|
||||
({
|
||||
width: 0,
|
||||
height: 0,
|
||||
left: anchor.value.x,
|
||||
right: anchor.value.x,
|
||||
top: anchor.value.y,
|
||||
bottom: anchor.value.y,
|
||||
...anchor.value
|
||||
} as DOMRect)
|
||||
}))
|
||||
|
||||
const open = ref(false)
|
||||
const openDebounced = refDebounced(open, 10)
|
||||
const selectedRow = ref<TableRow<Payment> | null>(null)
|
||||
|
||||
function onHover(_e: Event, row: TableRow<Payment> | null) {
|
||||
selectedRow.value = row
|
||||
|
||||
open.value = !!row
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex w-full flex-1 gap-1">
|
||||
<UTable
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
class="flex-1"
|
||||
@pointermove="(ev: PointerEvent) => {
|
||||
anchor.x = ev.clientX
|
||||
anchor.y = ev.clientY
|
||||
}"
|
||||
@hover="onHover"
|
||||
/>
|
||||
|
||||
<UPopover
|
||||
:content="{ side: 'top', sideOffset: 16, updatePositionStrategy: 'always' }"
|
||||
:open="openDebounced"
|
||||
:reference="reference"
|
||||
>
|
||||
<template #content>
|
||||
<div class="p-4">
|
||||
{{ selectedRow?.original?.id }}
|
||||
</div>
|
||||
</template>
|
||||
</UPopover>
|
||||
</div>
|
||||
</template>
|
||||
@@ -112,7 +112,7 @@ function onSelect(row: TableRow<Payment>, e?: Event) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class=" flex w-full flex-1 gap-1">
|
||||
<div class="flex w-full flex-1 gap-1">
|
||||
<div class="flex-1">
|
||||
<UTable
|
||||
ref="table"
|
||||
@@ -16,12 +16,12 @@ function handleMessage(message) {
|
||||
async function handleFormatMessage(message) {
|
||||
if (!globalThis.prettier) {
|
||||
await Promise.all([
|
||||
import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/standalone.js'),
|
||||
import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/babel.js'),
|
||||
import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/estree.js'),
|
||||
import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/html.js'),
|
||||
import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/markdown.js'),
|
||||
import('https://cdn.jsdelivr.net/npm/prettier@3.5.2/plugins/typescript.js')
|
||||
import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/standalone.js'),
|
||||
import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/babel.js'),
|
||||
import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/estree.js'),
|
||||
import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/html.js'),
|
||||
import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/markdown.js'),
|
||||
import('https://cdn.jsdelivr.net/npm/prettier@3.6.2/plugins/typescript.js')
|
||||
])
|
||||
}
|
||||
|
||||
|
||||
@@ -32,6 +32,12 @@ props:
|
||||
You can use any name from the <https://icones.js.org> collection.
|
||||
::
|
||||
|
||||
::warning
|
||||
When using collections with a dash (`-`), you need to separate the icon name from the collection name with a colon (`:`) as `@iconify/vue` does not handle this case like `@nuxt/icon`. For example, instead of `i-simple-icons-github` you need to write `i-simple-icons:github` or `simple-icons:github`.
|
||||
|
||||
Learn more about the [Iconify naming convention](https://iconify.design/docs/icon-components/vue/#icon).
|
||||
::
|
||||
|
||||
### Component Props
|
||||
|
||||
Some components also have an `icon` prop to display an icon, like the [Button](/components/button) for example:
|
||||
|
||||
@@ -51,6 +51,17 @@ props:
|
||||
---
|
||||
::
|
||||
|
||||
### Max Length :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
Use the `max-length` prop to set the maximum number of characters allowed in a tag.
|
||||
|
||||
::component-code
|
||||
---
|
||||
props:
|
||||
maxLength: 4
|
||||
---
|
||||
::
|
||||
|
||||
### Color
|
||||
|
||||
Use the `color` prop to change the ring color when the InputTags is focused.
|
||||
|
||||
@@ -202,6 +202,16 @@ name: 'popover-command-palette-example'
|
||||
---
|
||||
::
|
||||
|
||||
### With following cursor :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
You can make the Popover follow the cursor when hovering over an element using the [`reference`](https://reka-ui.com/docs/components/tooltip#trigger) prop:
|
||||
|
||||
::component-example
|
||||
---
|
||||
name: 'popover-cursor-example'
|
||||
---
|
||||
::
|
||||
|
||||
### With anchor slot
|
||||
|
||||
You can use the `#anchor` slot to position the Popover against a custom element.
|
||||
|
||||
@@ -266,8 +266,8 @@ You can group rows based on a given column value and show/hide sub rows via some
|
||||
|
||||
#### Important parts:
|
||||
|
||||
* Add prop `grouping` to `UTable` component with an array of column ids you want to group by.
|
||||
* Add prop `grouping-options` to `UTable`. It must include `getGroupedRowModel`, you can import it from `@tanstack/vue-table` or implement your own.
|
||||
* Add `grouping` prop with an array of column ids you want to group by.
|
||||
* Add `grouping-options` prop. It must include `getGroupedRowModel`, you can import it from `@tanstack/vue-table` or implement your own.
|
||||
* Expand rows via `row.toggleExpanded()` method on any cell of the row. Keep in mind, it also toggles `#expanded` slot.
|
||||
* Use `aggregateFn` on column definition to define how to aggregate the rows.
|
||||
* `agregatedCell` renderer on column definition only works if there is no `cell` renderer.
|
||||
@@ -304,19 +304,19 @@ class: '!p-0'
|
||||
You can use the `row-selection` prop to control the selection state of the rows (can be binded with `v-model`).
|
||||
::
|
||||
|
||||
### With `@select` event
|
||||
### With row select event
|
||||
|
||||
You can add a `@select` listener to make rows clickable. The handler function receives the `TableRow` instance as the first argument and an optional `Event` as the second argument.
|
||||
You can add a `@select` listener to make rows clickable with or without a checkbox column.
|
||||
|
||||
::note
|
||||
You can use this to navigate to a page, open a modal or even to select the row manually.
|
||||
The handler function receives the `TableRow` instance as the first argument and an optional `Event` as the second argument.
|
||||
::
|
||||
|
||||
::component-example
|
||||
---
|
||||
prettier: true
|
||||
collapse: true
|
||||
name: 'table-row-selection-event-example'
|
||||
name: 'table-row-select-event-example'
|
||||
highlights:
|
||||
- 123
|
||||
- 130
|
||||
@@ -324,6 +324,54 @@ class: '!p-0'
|
||||
---
|
||||
::
|
||||
|
||||
::tip
|
||||
You can use this to navigate to a page, open a modal or even to select the row manually.
|
||||
::
|
||||
|
||||
### With row context menu event :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
You can add a `@contextmenu` listener to make rows right clickable and wrap the Table in a [ContextMenu](/components/context-menu) component to display row actions for example.
|
||||
|
||||
::note
|
||||
The handler function receives the `Event` and `TableRow` instance as the first and second arguments respectively.
|
||||
::
|
||||
|
||||
::component-example
|
||||
---
|
||||
prettier: true
|
||||
collapse: true
|
||||
name: 'table-row-context-menu-event-example'
|
||||
highlights:
|
||||
- 130
|
||||
- 170
|
||||
class: '!p-0'
|
||||
---
|
||||
::
|
||||
|
||||
### With row hover event :badge{label="Soon" class="align-text-top"}
|
||||
|
||||
You can add a `@hover` listener to make rows hoverable and use a [Popover](/components/popover) or a [Tooltip](/components/tooltip) component to display row details for example.
|
||||
|
||||
::note
|
||||
The handler function receives the `Event` and `TableRow` instance as the first and second arguments respectively.
|
||||
::
|
||||
|
||||
::component-example
|
||||
---
|
||||
prettier: true
|
||||
collapse: true
|
||||
name: 'table-row-hover-event-example'
|
||||
highlights:
|
||||
- 126
|
||||
- 149
|
||||
class: '!p-0'
|
||||
---
|
||||
::
|
||||
|
||||
::note
|
||||
This example is similar as the Popover [with following cursor example](/components/popover#with-following-cursor) and uses a [`refDebounced`](https://vueuse.org/shared/refDebounced/#refdebounced) to prevent the Popover from opening and closing too quickly when moving the cursor from one row to another.
|
||||
::
|
||||
|
||||
### With column sorting
|
||||
|
||||
You can update a column `header` to render a [Button](/components/button) component inside the `header` to toggle the sorting state using the TanStack Table [Sorting APIs](https://tanstack.com/table/latest/docs/api/features/sorting).
|
||||
|
||||
@@ -196,10 +196,6 @@ name: 'tooltip-cursor-example'
|
||||
---
|
||||
::
|
||||
|
||||
::note
|
||||
This example is based on Reka UI's [Tooltip Cursor](https://reka-ui.com/examples/tooltip-cursor) example.
|
||||
::
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
"joi": "^17.13.3",
|
||||
"maska": "^3.1.1",
|
||||
"motion-v": "^1.3.1",
|
||||
"nuxt": "^3.17.5",
|
||||
"nuxt": "^3.17.6",
|
||||
"nuxt-component-meta": "^0.12.0",
|
||||
"nuxt-llms": "^0.1.3",
|
||||
"nuxt-og-image": "^5.1.8",
|
||||
|
||||
Reference in New Issue
Block a user