feat(Table): add empty prop

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

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)

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">

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">