mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
1600 lines
134 KiB
Plaintext
1600 lines
134 KiB
Plaintext
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
|
|
exports[`Table > renders with as correctly 1`] = `
|
|
"<section class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</section>"
|
|
`;
|
|
|
|
exports[`Table > renders with body-bottom slot correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->Body bottom slot
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with body-top slot correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">Body top slot<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with caption correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<caption class="sr-only">Table caption</caption>
|
|
<thead class="relative">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with caption slot correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<caption class="sr-only">Caption slot</caption>
|
|
<thead class="relative">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with cell slot correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ID Cell slot</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ID Cell slot</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ID Cell slot</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ID Cell slot</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ID Cell slot</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with class correctly 1`] = `
|
|
"<div class="overflow-auto absolute">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with columns correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
|
<div class="relative flex items-start flex-row">
|
|
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>
|
|
</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Email</span>
|
|
<!--v-if-->
|
|
</button></th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
|
<div class="text-right">Amount</div>
|
|
</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
|
<!---->
|
|
</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="relative flex items-start flex-row">
|
|
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>
|
|
</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="lowercase">ken99@yahoo.com</div>
|
|
</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="text-right font-medium">€316.00</div>
|
|
</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-2" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>
|
|
<!---->
|
|
<!--teleport start-->
|
|
<!--teleport end-->
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="relative flex items-start flex-row">
|
|
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>
|
|
</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="lowercase">Abe45@gmail.com</div>
|
|
</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="text-right font-medium">€242.00</div>
|
|
</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-4" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>
|
|
<!---->
|
|
<!--teleport start-->
|
|
<!--teleport end-->
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="relative flex items-start flex-row">
|
|
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-5" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>
|
|
</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->processing<!--v-if--></span></td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="lowercase">Monserrat44@gmail.com</div>
|
|
</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="text-right font-medium">€837.00</div>
|
|
</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-6" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>
|
|
<!---->
|
|
<!--teleport start-->
|
|
<!--teleport end-->
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="relative flex items-start flex-row">
|
|
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-7" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>
|
|
</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-primary/10 text-primary ring ring-inset ring-primary/25 capitalize"><!--v-if-->success<!--v-if--></span></td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="lowercase">Silas22@gmail.com</div>
|
|
</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="text-right font-medium">€874.00</div>
|
|
</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-8" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>
|
|
<!---->
|
|
<!--teleport start-->
|
|
<!--teleport end-->
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="relative flex items-start flex-row">
|
|
<div class="flex items-center h-5"><button arialabel="Select row" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-9" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>
|
|
</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">#bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Invalid Date</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md bg-error/10 text-error ring ring-inset ring-error/25 capitalize"><!--v-if-->failed<!--v-if--></span></td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="lowercase">carmella@hotmail.com</div>
|
|
</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="text-right font-medium">€721.00</div>
|
|
</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">
|
|
<div class="text-right"><button type="button" id="reka-dropdown-menu-trigger-v-0-0-10" aria-haspopup="menu" aria-expanded="false" data-state="closed" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 ml-auto"><span class="iconify i-lucide:ellipsis-vertical shrink-0 size-5" aria-hidden="true"></span>
|
|
<!--v-if-->
|
|
<!--v-if-->
|
|
</button>
|
|
<!---->
|
|
<!--teleport start-->
|
|
<!--teleport end-->
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with data correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</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 class="data-[selected=true]:bg-elevated/50"></tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr>
|
|
<td colspan="0" class="py-6 text-center text-sm 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">
|
|
<!--v-if-->
|
|
<thead class="relative">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
|
<div class="relative flex items-start flex-row">
|
|
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>
|
|
</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Email</span>
|
|
<!--v-if-->
|
|
</button></th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
|
<div class="text-right">Amount</div>
|
|
</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
|
<!---->
|
|
</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr>
|
|
<td colspan="7" class="py-6 text-center text-sm text-muted">Empty slot</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with expanded slot correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with header slot correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">ID Header slot</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with loading animation carousel correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with loading animation carousel-inverse correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel-inverse_2s_ease-in-out_infinite] rtl:after:animate-[carousel-inverse-rtl_2s_ease-in-out_infinite]">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with loading animation elastic correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[elastic_2s_ease-in-out_infinite]">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with loading animation swing correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[swing_2s_ease-in-out_infinite]">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with loading color error correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative after:absolute after:z-[1] after:h-px after:bg-error after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with loading color info correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative after:absolute after:z-[1] after:h-px after:bg-info after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with loading color neutral correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative after:absolute after:z-[1] after:h-px after:bg-inverted after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with loading color primary correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with loading color secondary correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative after:absolute after:z-[1] after:h-px after:bg-secondary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with loading color success correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative after:absolute after:z-[1] after:h-px after:bg-success after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with loading color warning correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative after:absolute after:z-[1] after:h-px after:bg-warning after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with loading correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with loading slot correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative after:absolute after:z-[1] after:h-px after:bg-primary after:animate-[carousel_2s_ease-in-out_infinite] rtl:after:animate-[carousel-rtl_2s_ease-in-out_infinite]">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
|
<div class="relative flex items-start flex-row">
|
|
<div class="flex items-center h-5"><button arialabel="Select all" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4" id="v-0-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
|
|
<!---->
|
|
<!---->
|
|
</button></div>
|
|
<!--v-if-->
|
|
</div>
|
|
</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">#</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Date</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent -mx-2.5"><span class="iconify i-lucide:arrow-up-down shrink-0 size-5" aria-hidden="true"></span><span class="truncate">Email</span>
|
|
<!--v-if-->
|
|
</button></th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
|
<div class="text-right">Amount</div>
|
|
</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
|
|
<!---->
|
|
</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr>
|
|
<td colspan="7" class="py-6 text-center">Loading slot</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with sticky correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="sticky top-0 inset-x-0 bg-default/75 z-[1] backdrop-blur">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders with ui correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip table-auto">
|
|
<!--v-if-->
|
|
<thead class="relative">
|
|
<tr class="data-[selected=true]:bg-elevated/50">
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
|
|
<th data-pinned="false" scope="col" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
|
|
</tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">ken99@yahoo.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Abe45@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monserrat44@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">5kma53ae</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">874</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">Silas22@gmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
<tr data-selected="false" data-selectable="false" data-expanded="false" class="data-[selected=true]:bg-elevated/50">
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">bhqecj4p</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">721</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">failed</td>
|
|
<td data-pinned="false" class="p-4 text-sm text-muted whitespace-nowrap [&:has([role=checkbox])]:pe-0">carmella@hotmail.com</td>
|
|
</tr>
|
|
<!--v-if-->
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|
|
|
|
exports[`Table > renders without data correctly 1`] = `
|
|
"<div class="relative overflow-auto">
|
|
<table class="min-w-full overflow-clip">
|
|
<!--v-if-->
|
|
<thead class="relative">
|
|
<tr class="data-[selected=true]:bg-elevated/50"></tr>
|
|
<tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-default [&>tr]:data-[selectable=true]:hover:bg-elevated/50 [&>tr]:data-[selectable=true]:focus-visible:outline-primary">
|
|
<tr>
|
|
<td colspan="0" class="py-6 text-center text-sm text-muted">No data</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>"
|
|
`;
|