arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-19 22:41:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Table): add support for context menu

Browse Source 
Resolves #4259
This commit is contained in:
Benjamin Canac
2025-07-01 13:15:00 +02:00
parent b96a1ccbab
commit f62c5ec20c
5 changed files with 259 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/runtime/components/Table.vue
View File

@@ -165,6 +165,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
*/
facetedOptions?: FacetedOptions<T>
onSelect?: (row: TableRow<T>, e?: Event) => void
onContextmenu?: ((e: Event, row: TableRow<T>) => void) | Array<((e: Event, row: TableRow<T>) => void)>
class?: any
ui?: Table['slots']
}
@@ -313,7 +314,7 @@ function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
}
function handleRowSelect(row: TableRow<T>, e: Event) {
function onRowSelect(e: Event, row: TableRow<T>) {
if (!props.onSelect) {
return
}
@@ -326,9 +327,22 @@ function handleRowSelect(row: TableRow<T>, e: Event) {
e.preventDefault()
e.stopPropagation()
// FIXME: `e` should be the first argument for consistency
props.onSelect(row, e)
}
function onRowContextmenu(e: Event, row: TableRow<T>) {
if (!props.onContextmenu) {
return
}
if (Array.isArray(props.onContextmenu)) {
props.onContextmenu.forEach(fn => fn(e, row))
} else {
props.onContextmenu(e, row)
}
}
watch(
() => props.data, () => {
data.value = props.data ? [...props.data] : []
@@ -382,7 +396,7 @@ defineExpose({
<template v-for="row in tableApi.getRowModel().rows" :key="row.id">
<tr
:data-selected="row.getIsSelected()"
:data-selectable="!!props.onSelect"
:data-selectable="!!props.onSelect || !!props.onContextmenu"
:data-expanded="row.getIsExpanded()"
:role="props.onSelect ? 'button' : undefined"
:tabindex="props.onSelect ? 0 : undefined"
@@ -392,7 +406,8 @@ defineExpose({
typeof tableApi.options.meta?.class?.tr === 'function' ? tableApi.options.meta.class.tr(row) : tableApi.options.meta?.class?.tr
]
})"
@click="handleRowSelect(row, $event)"
@click="onRowSelect($event, row)"
@contextmenu="onRowContextmenu($event, row)"
>
<td
v-for="cell in row.getVisibleCells()"