mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
feat(Table): add empty prop
This commit is contained in:
@@ -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)
|
||||
|
||||
@@ -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 [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>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) [&>tr]:data-[selectable=true]:hover:bg-(--ui-bg-elevated)/50 [&>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">
|
||||
|
||||
@@ -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 [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>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) [&>tr]:data-[selectable=true]:hover:bg-(--ui-bg-elevated)/50 [&>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">
|
||||
|
||||
Reference in New Issue
Block a user