feat(Table): add select event
#2822
+310
−142
Open
Annotations
10 errors and 4 warnings
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders with data correctly 1` mismatched
- Expected
+ Received
@@ -1,46 +1,46 @@
"<div class="relative overflow-auto">
<table class="min-w-full overflow-clip">
<!--v-if-->
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]">
- <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
</tr>
</thead>
<tbody class="divide-y divide-[var(--ui-border)]">
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">Monser
|
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders without data correctly 1` mismatched
- Expected
+ Received
"<div class="relative overflow-auto">
<table class="min-w-full overflow-clip">
<!--v-if-->
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]">
- <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50"></tr>
+ <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50"></tr>
</thead>
<tbody class="divide-y divide-[var(--ui-border)]">
- <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td colspan="0" class="py-6 text-center text-sm text-[var(--ui-text-muted)]">No data</td>
</tr>
</tbody>
</table>
</div>"
❯ test/components/Table.spec.ts:165:18
|
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders with caption correctly 1` mismatched
- Expected
+ Received
@@ -1,46 +1,46 @@
"<div class="relative overflow-auto">
<table class="min-w-full overflow-clip">
<caption class="sr-only">Table caption</caption>
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]">
- <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
</tr>
</thead>
<tbody class="divide-y divide-[var(--ui-border)]">
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowr
|
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders with columns correctly 1` mismatched
- Expected
+ Received
@@ -1,10 +1,10 @@
"<div class="relative overflow-auto">
<table class="min-w-full overflow-clip">
<!--v-if-->
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)]">
- <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">
<div class="relative flex items-start" arialabel="Select all">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
@@ -26,11 +26,11 @@
<!---->
</th>
</tr>
</thead>
<tbody class="divide-y divide-[var(--ui-border)]">
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">
<div class="relative flex items-start" arialabel="Select row">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
@@ -58,11 +58,11 @@
<!--teleport end-->
</div>
</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">
<div class="relative flex items-start" arialabel="Select row">
<div class="flex items-center h-5"><button class="shrink-0 flex items-center justify-center rounded-[var(--ui-radius)] text-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)] size-4" id="v-3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
@@ -90,11 +90,11 @@
<!--teleport end-->
</div>
</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)]
|
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders with sticky correctly 1` mismatched
- Expected
+ Received
@@ -1,46 +1,46 @@
"<div class="relative overflow-auto">
<table class="min-w-full overflow-clip">
<!--v-if-->
<thead class="[&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] sticky top-0 inset-x-0 bg-[var(--ui-bg)]/75 z-[1] backdrop-blur">
- <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
</tr>
</thead>
<tbody class="divide-y divide-[var(--ui-border)]">
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">processing</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)
|
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders with loading correctly 1` mismatched
- Expected
+ Received
@@ -1,46 +1,46 @@
"<div class="relative overflow-auto">
<table class="min-w-full overflow-clip">
<!--v-if-->
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-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-[var(--ui-bg-elevated)]/50">
+ <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
</tr>
</thead>
<tbody class="divide-y divide-[var(--ui-border)]">
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whites
|
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders with loading color primary correctly 1` mismatched
- Expected
+ Received
@@ -1,46 +1,46 @@
"<div class="relative overflow-auto">
<table class="min-w-full overflow-clip">
<!--v-if-->
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-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-[var(--ui-bg-elevated)]/50">
+ <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
</tr>
</thead>
<tbody class="divide-y divide-[var(--ui-border)]">
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-
|
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders with loading color secondary correctly 1` mismatched
- Expected
+ Received
@@ -1,46 +1,46 @@
"<div class="relative overflow-auto">
<table class="min-w-full overflow-clip">
<!--v-if-->
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-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-[var(--ui-bg-elevated)]/50">
+ <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
</tr>
</thead>
<tbody class="divide-y divide-[var(--ui-border)]">
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-t
|
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders with loading color success correctly 1` mismatched
- Expected
+ Received
@@ -1,46 +1,46 @@
"<div class="relative overflow-auto">
<table class="min-w-full overflow-clip">
<!--v-if-->
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-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-[var(--ui-bg-elevated)]/50">
+ <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
</tr>
</thead>
<tbody class="divide-y divide-[var(--ui-border)]">
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-
|
|
Test (vue):
test/components/Table.spec.ts#L165
Error: Snapshot `Table > renders with loading color info correctly 1` mismatched
- Expected
+ Received
@@ -1,46 +1,46 @@
"<div class="relative overflow-auto">
<table class="min-w-full overflow-clip">
<!--v-if-->
<thead class="relative [&>tr]:after:absolute [&>tr]:after:inset-x-0 [&>tr]:after:bottom-0 [&>tr]:after:h-px [&>tr]:after:bg-[var(--ui-border-accented)] after:absolute after:bottom-0 after:inset-x-0 after:h-px after:bg-[var(--ui-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-[var(--ui-bg-elevated)]/50">
+ <tr class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Id</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Amount</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Status</th>
<th data-pinned="false" class="px-4 py-3.5 text-sm text-[var(--ui-text-highlighted)] text-left rtl:text-right font-semibold [&:has([role=checkbox])]:pe-0">Email</th>
</tr>
</thead>
<tbody class="divide-y divide-[var(--ui-border)]">
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">m5gr84i9</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">316</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">3u1reuv4</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">242</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">success</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">[email protected]</td>
</tr>
<!--v-if-->
- <tr data-selected="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50">
+ <tr data-selected="false" data-can-select="false" data-expanded="false" class="data-[selected=true]:bg-[var(--ui-bg-elevated)]/50 data-[can-select=true]:hover:bg-[var(--ui-bg-elevated)]/50">
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">derv1ws0</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)] whitespace-nowrap [&:has([role=checkbox])]:pe-0">837</td>
<td data-pinned="false" class="p-4 text-sm text-[var(--ui-text-muted)
|
|
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Lint:
src/runtime/components/InputMenu.vue#L332
Variable 'modelValue' is already declared in the upper scope
|
|
Lint:
src/runtime/components/Select.vue#L172
Variable 'modelValue' is already declared in the upper scope
|
|
Lint:
src/runtime/components/SelectMenu.vue#L302
Variable 'modelValue' is already declared in the upper scope
|
Loading