@robuust-digital/vue-components 2.6.6 → 2.6.8

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 2.6.8 (18-05-2026)
+
+### Added
+
+* `DataTable`: Added `--rvc-table-striped-border-radius` to customize rounded striped table rows
+
+### Fixed
+
+* `DataTable`: Do not render `id="undefined"` for headers without an `id`
+
+## 2.6.7 (13-05-2026)
+
+### Added
+
+* `Drawer`: Added `--rvc-drawer-panel-bg-color` variable on `.rvc-drawer-panel-inner` so the panel background covers the scroll container, preventing transparent gaps during elastic/overflow scrolling. Defaults to `var(--rvc-drawer-content-bg-color)` for backwards compatibility.
+
+### Updated
+
+* `Drawer` docs: Documented the new `--rvc-drawer-panel-bg-color` variable
+
 ## 2.6.6 (06-05-2026)
 
 ### Fixed

package/dist/_shared/{Tabs.vue_vue_type_script_setup_true_lang-CLF0EEY-.js → Tabs.vue_vue_type_script_setup_true_lang-BkxgXUlf.js}

@@ -399,8 +399,8 @@ const ae = ["value"], le = ["value"], N = /* @__PURE__ */ w({
                   header: t,
                   index: i
                 }, () => [
-                  (l(), n("th", y({ ref_for: !0 }, { ...t, id: String(t.id) }, {
-                    key: `rvc-table-header-${t.id}`,
+                  (l(), n("th", y({ ref_for: !0 }, { ...t, id: t.id === void 0 || t.id === null ? void 0 : String(t.id) }, {
+                    key: `rvc-table-header-${t.id ?? t.key ?? i}`,
                     class: {
                       "rvc-table-text-left": t.align === "left" || !t.align,
                       "rvc-table-text-center": t.align === "center",

package/dist/core/index.js

@@ -1,4 +1,4 @@
-import { _ as e, a as s, b as t, c as r, d as m, e as p, f as x, g as c, h as f, i } from "../_shared/Tabs.vue_vue_type_script_setup_true_lang-CLF0EEY-.js";
+import { _ as e, a as s, b as t, c as r, d as m, e as p, f as x, g as c, h as f, i } from "../_shared/Tabs.vue_vue_type_script_setup_true_lang-BkxgXUlf.js";
 import { _ as b } from "../_shared/ChevronDownIcon-BYWciGnh.js";
 import { _ } from "../_shared/ButtonBase.vue_vue_type_script_setup_true_lang-ZYVNEyNx.js";
 import { _ as l } from "../_shared/FormInput.vue_vue_type_script_setup_true_lang-Bg7YPGyY.js";

package/dist/core/table.css

@@ -16,9 +16,11 @@
   --rvc-table-white-space: nowrap;
   --rvc-table-line-height: 1.1;
   --rvc-table-spinner-size: calc(var(--spacing) * 5);
+  --rvc-table-striped-border-radius: 0;
   --rvc-table-striped-cell-border-color: transparent;
   --rvc-table-striped-cell-border-style: solid;
   --rvc-table-striped-cell-border-width: 0;
+  --rvc-table-striped-row-bg-color-hover: var(--rvc-table-bg-color);
 }
 
 @layer components {
@@ -30,6 +32,8 @@
 
   .rvc-table {
     width: 100%;
+    border-spacing: 0;
+    border-collapse: separate;
 
     &.rvc-table-striped {
       thead th {
@@ -37,18 +41,31 @@
         background-color: var(--rvc-table-head-bg-color);
       }
 
+      th,
+      td {
+        &:first-child {
+          border-start-start-radius: var(--rvc-table-striped-border-radius);
+          border-end-start-radius: var(--rvc-table-striped-border-radius);
+        }
+
+        &:last-child {
+          border-start-end-radius: var(--rvc-table-striped-border-radius);
+          border-end-end-radius: var(--rvc-table-striped-border-radius);
+        }
+      }
+
       tr:nth-of-type(even) td {
         background-color: var(--rvc-table-bg-color);
+
+        &:hover {
+          background-color: var(--rvc-table-striped-row-bg-color-hover);
+        }
       }
 
       td {
         padding-inline: var(--rvc-table-padding-x);
         border-bottom: var(--rvc-table-striped-cell-border-width) var(--rvc-table-striped-cell-border-style) var(--rvc-table-striped-cell-border-color);
       }
-
-      tr:hover td {
-        background-color: var(--rvc-table-striped-row-bg-color-hover);
-      }
     }
 
     &:not(.rvc-table-striped) {

package/dist/core.d.ts

@@ -518,7 +518,7 @@ declare interface CheckboxProps {
 export declare const DataTable: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
 
 declare interface DataTableHeader {
-    id: string | number;
+    id?: string | number;
     label: string;
     key?: string;
     align?: 'left' | 'center' | 'right';

package/dist/dialogs/drawer.css

@@ -14,6 +14,7 @@
   --rvc-drawer-close-color: var(--rvc-dialog-close-color);
   --rvc-drawer-close-color-hover: var(--rvc-dialog-close-color-hover);
   --rvc-drawer-content-bg-color: var(--rvc-dialog-content-bg-color);
+  --rvc-drawer-panel-bg-color: var(--rvc-drawer-content-bg-color);
   --rvc-drawer-footer-bg-color: var(--rvc-dialog-footer-bg-color);
   --rvc-drawer-footer-gap: var(--rvc-dialog-footer-gap);
   --rvc-drawer-footer-justify-content: space-between;
@@ -71,6 +72,7 @@
       display: flex;
       flex-direction: column;
       height: 100%;
+      background-color: var(--rvc-drawer-panel-bg-color);
       box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
     }
 

package/dist/index/index.js

@@ -1,4 +1,4 @@
-import { _ as r, a as t, b as e, c as s, d as m, e as p, f as x, g as f, h as _, i } from "../_shared/Tabs.vue_vue_type_script_setup_true_lang-CLF0EEY-.js";
+import { _ as r, a as t, b as e, c as s, d as m, e as p, f as x, g as f, h as _, i } from "../_shared/Tabs.vue_vue_type_script_setup_true_lang-BkxgXUlf.js";
 import { _ as d } from "../_shared/ChevronDownIcon-BYWciGnh.js";
 import { _ as n } from "../_shared/ButtonBase.vue_vue_type_script_setup_true_lang-ZYVNEyNx.js";
 import { _ as h } from "../_shared/FormInput.vue_vue_type_script_setup_true_lang-Bg7YPGyY.js";

package/dist/index.d.ts

@@ -1166,7 +1166,7 @@ declare interface CustomCommand {
 export declare const DataTable: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
 
 declare interface DataTableHeader {
-    id: string | number;
+    id?: string | number;
     label: string;
     key?: string;
     align?: 'left' | 'center' | 'right';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robuust-digital/vue-components",
-  "version": "2.6.6",
+  "version": "2.6.8",
   "type": "module",
   "publishConfig": {
     "access": "public"