Merge branch 'v3' into feat/3880

2026-01-24 17:00:36 +01:00 · 2025-07-03 16:41:03 +02:00
parent 48077c12e8 9debce737c
commit 7be03e0f51
85 changed files with 1206 additions and 716 deletions
--- a/test/components/snapshots/Table-vue.spec.ts.snap
+++ b/test/components/snapshots/Table-vue.spec.ts.snap
@@ -50,6 +50,7 @@ exports[`Table > renders with as correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </section>"
 `;
@@ -104,6 +105,7 @@ exports[`Table > renders with body-bottom slot correctly 1`] = `
      </tr>
      <!--v-if-->Body bottom slot
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -157,6 +159,7 @@ exports[`Table > renders with body-top slot correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -211,6 +214,7 @@ exports[`Table > renders with caption correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -265,6 +269,7 @@ exports[`Table > renders with caption slot correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -319,6 +324,7 @@ exports[`Table > renders with cell slot correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -373,6 +379,7 @@ exports[`Table > renders with class correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -564,6 +571,32 @@ exports[`Table > renders with columns correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <tfoot class="relative">
+      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right font-medium">Total: €2,990.00</div>
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+      </tr>
+    </tfoot>
  </table>
 </div>"
 `;
@@ -618,6 +651,7 @@ exports[`Table > renders with data correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -635,6 +669,7 @@ exports[`Table > renders with empty correctly 1`] = `
        <td colspan="0" class="py-6 text-center text-sm text-muted">There is no data</td>
      </tr>
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -674,6 +709,32 @@ exports[`Table > renders with empty slot correctly 1`] = `
        <td colspan="7" class="py-6 text-center text-sm text-muted">Empty slot</td>
      </tr>
    </tbody>
+    <tfoot class="relative">
+      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right font-medium">Total: €0.00</div>
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+      </tr>
+    </tfoot>
  </table>
 </div>"
 `;
@@ -728,6 +789,7 @@ exports[`Table > renders with expanded slot correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -782,6 +844,7 @@ exports[`Table > renders with header slot correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -836,6 +899,7 @@ exports[`Table > renders with loading animation carousel correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -890,6 +954,7 @@ exports[`Table > renders with loading animation carousel-inverse correctly 1`] =
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -944,6 +1009,7 @@ exports[`Table > renders with loading animation elastic correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -998,6 +1064,7 @@ exports[`Table > renders with loading animation swing correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1052,6 +1119,7 @@ exports[`Table > renders with loading color error correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1106,6 +1174,7 @@ exports[`Table > renders with loading color info correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1160,6 +1229,7 @@ exports[`Table > renders with loading color neutral correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1214,6 +1284,7 @@ exports[`Table > renders with loading color primary correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1268,6 +1339,7 @@ exports[`Table > renders with loading color secondary correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1322,6 +1394,7 @@ exports[`Table > renders with loading color success correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1376,6 +1449,7 @@ exports[`Table > renders with loading color warning correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1430,6 +1504,7 @@ exports[`Table > renders with loading correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1469,6 +1544,32 @@ exports[`Table > renders with loading slot correctly 1`] = `
        <td colspan="7" class="py-6 text-center">Loading slot</td>
      </tr>
    </tbody>
+    <tfoot class="relative">
+      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right font-medium">Total: €0.00</div>
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+      </tr>
+    </tfoot>
  </table>
 </div>"
 `;
@@ -1523,6 +1624,7 @@ exports[`Table > renders with sticky correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1577,6 +1679,7 @@ exports[`Table > renders with ui correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1594,6 +1697,7 @@ exports[`Table > renders without data correctly 1`] = `
        <td colspan="0" class="py-6 text-center text-sm text-muted">No data</td>
      </tr>
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
--- a/test/components/snapshots/Table.spec.ts.snap
+++ b/test/components/snapshots/Table.spec.ts.snap
@@ -50,6 +50,7 @@ exports[`Table > renders with as correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </section>"
 `;
@@ -104,6 +105,7 @@ exports[`Table > renders with body-bottom slot correctly 1`] = `
      </tr>
      <!--v-if-->Body bottom slot
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -157,6 +159,7 @@ exports[`Table > renders with body-top slot correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -211,6 +214,7 @@ exports[`Table > renders with caption correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -265,6 +269,7 @@ exports[`Table > renders with caption slot correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -319,6 +324,7 @@ exports[`Table > renders with cell slot correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -373,6 +379,7 @@ exports[`Table > renders with class correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -564,6 +571,32 @@ exports[`Table > renders with columns correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <tfoot class="relative">
+      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right font-medium">Total: €2,990.00</div>
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+      </tr>
+    </tfoot>
  </table>
 </div>"
 `;
@@ -618,6 +651,7 @@ exports[`Table > renders with data correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -635,6 +669,7 @@ exports[`Table > renders with empty correctly 1`] = `
        <td colspan="0" class="py-6 text-center text-sm text-muted">There is no data</td>
      </tr>
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -674,6 +709,32 @@ exports[`Table > renders with empty slot correctly 1`] = `
        <td colspan="7" class="py-6 text-center text-sm text-muted">Empty slot</td>
      </tr>
    </tbody>
+    <tfoot class="relative">
+      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right font-medium">Total: €0.00</div>
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+      </tr>
+    </tfoot>
  </table>
 </div>"
 `;
@@ -728,6 +789,7 @@ exports[`Table > renders with expanded slot correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -782,6 +844,7 @@ exports[`Table > renders with header slot correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -836,6 +899,7 @@ exports[`Table > renders with loading animation carousel correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -890,6 +954,7 @@ exports[`Table > renders with loading animation carousel-inverse correctly 1`] =
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -944,6 +1009,7 @@ exports[`Table > renders with loading animation elastic correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -998,6 +1064,7 @@ exports[`Table > renders with loading animation swing correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1052,6 +1119,7 @@ exports[`Table > renders with loading color error correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1106,6 +1174,7 @@ exports[`Table > renders with loading color info correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1160,6 +1229,7 @@ exports[`Table > renders with loading color neutral correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1214,6 +1284,7 @@ exports[`Table > renders with loading color primary correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1268,6 +1339,7 @@ exports[`Table > renders with loading color secondary correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1322,6 +1394,7 @@ exports[`Table > renders with loading color success correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1376,6 +1449,7 @@ exports[`Table > renders with loading color warning correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1430,6 +1504,7 @@ exports[`Table > renders with loading correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1469,6 +1544,32 @@ exports[`Table > renders with loading slot correctly 1`] = `
        <td colspan="7" class="py-6 text-center">Loading slot</td>
      </tr>
    </tbody>
+    <tfoot class="relative">
+      <tr class="absolute z-[1] left-0 w-full h-px bg-(--ui-border-accented)"></tr>
+      <tr class="data-[selected=true]:bg-elevated/50">
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <div class="text-right font-medium">Total: €0.00</div>
+        </th>
+        <th data-pinned="false" class="px-4 py-3.5 text-sm text-highlighted text-left rtl:text-right font-semibold [&amp;:has([role=checkbox])]:pe-0">
+          <!---->
+        </th>
+      </tr>
+    </tfoot>
  </table>
 </div>"
 `;
@@ -1523,6 +1624,7 @@ exports[`Table > renders with sticky correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1577,6 +1679,7 @@ exports[`Table > renders with ui correctly 1`] = `
      </tr>
      <!--v-if-->
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;
@@ -1594,6 +1697,7 @@ exports[`Table > renders without data correctly 1`] = `
        <td colspan="0" class="py-6 text-center text-sm text-muted">No data</td>
      </tr>
    </tbody>
+    <!--v-if-->
  </table>
 </div>"
 `;