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

feat(Table): add empty prop

Browse Source
This commit is contained in:
Benjamin Canac
2025-03-26 17:06:42 +01:00
parent 7ec08017e0
commit afff54fecd
4 changed files with 41 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -75,6 +75,11 @@ export interface TableProps<T extends TableData> extends TableOptions<T> {
data?: T[]
columns?: TableColumn<T>[]
caption?: string
/**
* The text to display when the table is empty.
* @defaultValue t('table.noData')
*/
empty?: string
/**
* Whether the table should have a sticky header.
* @defaultValue false
@@ -369,7 +374,7 @@ defineExpose({
<tr v-else>
<td :colspan="columns?.length" :class="ui.empty({ class: props.ui?.empty })">
<slot name="empty">
{{ t('table.noData') }}
{{ empty || t('table.noData') }}
</slot>
</td>
</tr>

5
test/components/Table.spec.ts
View File

@@ -145,6 +145,7 @@ describe('Table', () => {
// Props
['with data', { props }],
['without data', {}],
['with empty', { props: { empty: 'There is no data' } }],
['with caption', { props: { ...props, caption: 'Table caption' } }],
['with columns', { props: { ...props, columns } }],
['with sticky', { props: { ...props, sticky: true } }],
@@ -158,8 +159,8 @@ describe('Table', () => {
['with header slot', { props, slots: { 'id-header': () => 'ID Header slot' } }],
['with cell slot', { props, slots: { 'id-cell': () => 'ID Cell slot' } }],
['with expanded slot', { props, slots: { expanded: () => 'Expanded slot' } }],
['with empty slot', { props: { ...props, data: [], columns }, slots: { empty: () => 'Empty slot' } }],
['with loading slot', { props: { ...props, data: [], columns, loading: true }, slots: { loading: () => 'Loading slot' } }],
['with empty slot', { props: { columns }, slots: { empty: () => 'Empty slot' } }],
['with loading slot', { props: { columns, loading: true }, slots: { loading: () => 'Loading slot' } }],
['with caption slot', { props, slots: { caption: () => 'Caption slot' } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: TableProps<typeof data[number]>, slots?: Partial<TableSlots<typeof data[number]>> }) => {
const html = await ComponentRender(nameOrHtml, options, Table)

16
test/components/__snapshots__/Table-vue.spec.ts.snap
View File

@@ -508,6 +508,22 @@ exports[`Table > renders with data correctly 1`] = `
</div>"
`;
exports[`Table > renders with empty correctly 1`] = `
"<div class="relative overflow-auto">
<table class="min-w-full overflow-clip">
<!--v-if-->
<thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented)">
<tr class="data-[selected=true]:bg-(--ui-bg-elevated)/50"></tr>
</thead>
<tbody class="divide-y divide-(--ui-border) [&amp;>tr]:data-[selectable=true]:hover:bg-(--ui-bg-elevated)/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-(--ui-primary)">
<tr>
<td colspan="0" class="py-6 text-center text-sm text-(--ui-text-muted)">There is no data</td>
</tr>
</tbody>
</table>
</div>"
`;
exports[`Table > renders with empty slot correctly 1`] = `
"<div class="relative overflow-auto">
<table class="min-w-full overflow-clip">

16
test/components/__snapshots__/Table.spec.ts.snap
View File

@@ -508,6 +508,22 @@ exports[`Table > renders with data correctly 1`] = `
</div>"
`;
exports[`Table > renders with empty correctly 1`] = `
"<div class="relative overflow-auto">
<table class="min-w-full overflow-clip">
<!--v-if-->
<thead class="relative [&amp;>tr]:after:absolute [&amp;>tr]:after:inset-x-0 [&amp;>tr]:after:bottom-0 [&amp;>tr]:after:h-px [&amp;>tr]:after:bg-(--ui-border-accented)">
<tr class="data-[selected=true]:bg-(--ui-bg-elevated)/50"></tr>
</thead>
<tbody class="divide-y divide-(--ui-border) [&amp;>tr]:data-[selectable=true]:hover:bg-(--ui-bg-elevated)/50 [&amp;>tr]:data-[selectable=true]:focus-visible:outline-(--ui-primary)">
<tr>
<td colspan="0" class="py-6 text-center text-sm text-(--ui-text-muted)">There is no data</td>
</tr>
</tbody>
</table>
</div>"
`;
exports[`Table > renders with empty slot correctly 1`] = `
"<div class="relative overflow-auto">
<table class="min-w-full overflow-clip">