@robuust-digital/vue-components 2.5.0-beta.3 → 2.5.0

package/CHANGELOG.md

@@ -1,14 +1,39 @@
-## 2.4.0 (UNRELEASED)
+## 2.5.0 (14-04-2026)
+
+### Added
+
+* `Modal`: Added `panel` slot to replace the full content inside `DialogPanel` with a custom modal layout
+* `Drawer`: Added `panel` slot to replace the full content inside `DialogPanel` with a custom drawer layout
+
+### Updated
+
+* `Modal` and `Drawer` docs: Added examples for the new full-panel override slot
+* `Modal`: Forward `showClose` to the `header` slot to match the documented slot API
+
+## 2.4.1 (13-04-2026)
+
+### Fixed
+
+* `Pagination`: Do not apply hover background styles to active pagination buttons
+
+## 2.4.0 (10-04-2026)
 
 ### Added
 
 * `Pagination`: Added `prevIcon` and `nextIcon` props to customize previous/next navigation icons
 * `Pagination`: Added `prevIcon` and `nextIcon` slots for full control over previous/next navigation icon rendering
+* `Pagination`: Added `--rvc-pagination-border-color` CSS variable for pagination button border customization
+* `DataTable`: Added striped row token hooks (`--rvc-table-striped-cell-border-color`, `--rvc-table-striped-cell-border-style`, `--rvc-table-striped-cell-border-width`, `--rvc-table-striped-row-bg-color-hover`)
+* `Pagination`: Added token hooks for active state and navigation layout (`--rvc-pagination-bg-color-active`, `--rvc-pagination-nav-gap-md`, `--rvc-pagination-nav-gap-xl`, `--rvc-pagination-icon-color`)
+* `Tabs`: Added button variant border token hooks (`--rvc-tabs-tab-button-border-width`, `--rvc-tabs-tab-button-border-style`, `--rvc-tabs-tab-button-border-color`, `--rvc-tabs-tab-button-border-color-active`)
+* `Badge`: Added border token hooks (`--rvc-badge-border-width`, `--rvc-badge-border-style`, `--rvc-badge-border-color`)
+* `EmptyState`: Added border token hooks (`--rvc-empty-state-border-width`, `--rvc-empty-state-border-style`, `--rvc-empty-state-border-color`)
 * `DataTable`: Added support for forwarding `prevIcon` and `nextIcon` props to the built-in `Pagination` component
 
 ### Updated
 
 * `Pagination` and `DataTable` documentation: Added examples and prop documentation for custom pagination navigation icons
+* Updated `DataTable`, `Pagination`, `Tabs`, `Badge`, and `EmptyState` docs with new CSS variables
 
 ## 2.3.5 (09-04-2026)
 

package/dist/_shared/Drawer.vue_vue_type_script_setup_true_lang-DjP68vua.js

@@ -0,0 +1,197 @@
+import { defineComponent as E, openBlock as v, createBlock as k, unref as e, withCtx as d, createVNode as s, withModifiers as T, createElementVNode as o, normalizeClass as m, renderSlot as i, createElementBlock as p, createTextVNode as F, toDisplayString as L, createCommentVNode as g } from "vue";
+import { TransitionRoot as I, Dialog as N, TransitionChild as C, DialogPanel as R, DialogTitle as u } from "@headlessui/vue";
+import { _ as $ } from "./ButtonBase.vue_vue_type_script_setup_true_lang-ZYVNEyNx.js";
+import { u as V } from "./Modal.vue_vue_type_script_setup_true_lang-MN3D46CX.js";
+import { r as B } from "./XMarkIcon-CPr_Rd8y.js";
+const A = {
+  class: "rvc-drawer-presentation",
+  role: "presentation"
+}, H = { class: "rvc-drawer-container" }, z = { class: "rvc-drawer-inner" }, M = { class: "rvc-drawer-panel-inner" }, P = { class: "rvc-drawer-header-inner" }, j = { class: "rvc-drawer-close-wrapper" }, q = ["id"], G = {
+  key: 2,
+  class: "rvc-drawer-footer"
+}, W = /* @__PURE__ */ E({
+  __name: "Drawer",
+  props: {
+    as: { default: "form" },
+    id: {},
+    title: {},
+    showClose: { type: Boolean, default: !1 },
+    scrolledDown: { type: Boolean, default: !1 },
+    headerSticky: { type: Boolean, default: !1 },
+    spinning: { type: Boolean, default: !1 },
+    submitLabel: { default: "Save" },
+    cancelLabel: { default: "Cancel" },
+    panelClass: { default: "rvc-drawer-panel-max-width" },
+    resetHeader: { type: Boolean, default: !1 },
+    resetFooter: { type: Boolean, default: !1 }
+  },
+  emits: ["drawer:open", "drawer:opened", "drawer:close", "drawer:save", "drawer:closed"],
+  setup(r, { emit: h }) {
+    const D = r, a = h, {
+      contentRef: b,
+      ready: f,
+      isForm: y,
+      titleId: c,
+      descriptionId: w,
+      initialFocusElement: S
+    } = V(D);
+    return (n, t) => (v(), k(e(I), { as: "template" }, {
+      default: d(() => [
+        s(e(N), {
+          as: r.as,
+          class: "rvc-drawer",
+          static: "",
+          "aria-modal": "true",
+          role: "dialog",
+          "initial-focus": e(S),
+          "aria-labelledby": e(c),
+          onClose: t[6] || (t[6] = (l) => a("drawer:close")),
+          onSubmit: t[7] || (t[7] = T((l) => a("drawer:save", l), ["prevent"]))
+        }, {
+          default: d(() => [
+            s(e(C), {
+              as: "template",
+              enter: "rvc-drawer-backdrop-transition-enter",
+              "enter-from": "rvc-drawer-backdrop-transition-enter-from",
+              "enter-to": "rvc-drawer-backdrop-transition-enter-to",
+              leave: "rvc-drawer-backdrop-transition-leave",
+              "leave-from": "rvc-drawer-backdrop-transition-leave-from",
+              "leave-to": "rvc-drawer-backdrop-transition-leave-to",
+              onBeforeEnter: t[0] || (t[0] = (l) => a("drawer:open")),
+              onAfterEnter: t[1] || (t[1] = (l) => a("drawer:opened"))
+            }, {
+              default: d(() => [...t[8] || (t[8] = [
+                o("div", {
+                  class: "rvc-drawer-backdrop",
+                  "aria-hidden": "true"
+                }, null, -1)
+              ])]),
+              _: 1
+            }),
+            o("div", A, [
+              o("div", H, [
+                o("div", z, [
+                  s(e(C), {
+                    as: "template",
+                    enter: "rvc-drawer-transition-enter",
+                    "enter-from": "rvc-drawer-transition-enter-from",
+                    "enter-to": "rvc-drawer-transition-enter-to",
+                    leave: "rvc-drawer-transition-leave",
+                    "leave-from": "rvc-drawer-transition-leave-from",
+                    "leave-to": "rvc-drawer-transition-leave-to",
+                    onBeforeEnter: t[4] || (t[4] = (l) => f.value = !0),
+                    onAfterLeave: t[5] || (t[5] = (l) => (f.value = !1, a("drawer:closed")))
+                  }, {
+                    default: d(() => [
+                      s(e(R), {
+                        class: m(["rvc-drawer-panel", r.panelClass]),
+                        "aria-busy": r.spinning,
+                        "aria-describedby": e(w)
+                      }, {
+                        default: d(() => [
+                          i(n.$slots, "panel", {
+                            title: r.title,
+                            loading: r.spinning,
+                            isForm: e(y),
+                            titleId: e(c),
+                            descriptionId: e(w),
+                            contentRef: e(b),
+                            dialogTitle: e(u),
+                            emitClose: () => a("drawer:close"),
+                            emitSave: (l = void 0) => a("drawer:save", l)
+                          }, () => [
+                            o("div", M, [
+                              r.resetHeader ? i(n.$slots, "header", { key: 1 }) : (v(), p("header", {
+                                key: 0,
+                                class: m([{ "rvc-drawer-header-sticky": r.headerSticky }, "rvc-drawer-header"])
+                              }, [
+                                i(n.$slots, "header", {
+                                  title: r.title,
+                                  showClose: r.showClose
+                                }, () => [
+                                  o("div", P, [
+                                    i(n.$slots, "title", {
+                                      id: e(c),
+                                      dialogTitle: e(u),
+                                      title: r.title
+                                    }, () => [
+                                      s(e(u), {
+                                        id: e(c),
+                                        class: "rvc-drawer-title"
+                                      }, {
+                                        default: d(() => [
+                                          F(L(r.title), 1)
+                                        ]),
+                                        _: 1
+                                      }, 8, ["id"])
+                                    ]),
+                                    r.showClose ? i(n.$slots, "close", {
+                                      key: 0,
+                                      icon: e(B),
+                                      emitClose: () => a("drawer:close")
+                                    }, () => [
+                                      o("div", j, [
+                                        o("button", {
+                                          type: "button",
+                                          class: "rvc-drawer-close",
+                                          "aria-label": "Close panel",
+                                          onClick: t[2] || (t[2] = (l) => a("drawer:close"))
+                                        }, [
+                                          s(e(B), { "aria-hidden": "true" })
+                                        ])
+                                      ])
+                                    ]) : g("", !0)
+                                  ])
+                                ])
+                              ], 2)),
+                              o("div", {
+                                class: m([{ "rvc-drawer-scroll-reverse": r.scrolledDown }, "rvc-drawer-scroll"])
+                              }, [
+                                o("div", {
+                                  id: e(w),
+                                  ref_key: "contentRef",
+                                  ref: b,
+                                  class: "rvc-drawer-content"
+                                }, [
+                                  i(n.$slots, "default", { ready: e(f) })
+                                ], 8, q)
+                              ], 2),
+                              r.resetFooter ? i(n.$slots, "footer", { key: 3 }) : (v(), p("footer", G, [
+                                i(n.$slots, "footer", { loading: r.spinning }, () => [
+                                  s($, {
+                                    type: "button",
+                                    label: r.cancelLabel,
+                                    color: "light",
+                                    onClick: t[3] || (t[3] = (l) => a("drawer:close"))
+                                  }, null, 8, ["label"]),
+                                  e(y) ? (v(), k($, {
+                                    key: 0,
+                                    type: "submit",
+                                    label: r.submitLabel,
+                                    spinning: r.spinning,
+                                    disabled: r.spinning
+                                  }, null, 8, ["label", "spinning", "disabled"])) : g("", !0)
+                                ])
+                              ]))
+                            ])
+                          ])
+                        ]),
+                        _: 3
+                      }, 8, ["class", "aria-busy", "aria-describedby"])
+                    ]),
+                    _: 3
+                  })
+                ])
+              ])
+            ])
+          ]),
+          _: 3
+        }, 8, ["as", "initial-focus", "aria-labelledby"])
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  W as _
+};

package/dist/_shared/Modal.vue_vue_type_script_setup_true_lang-MN3D46CX.js

@@ -0,0 +1,198 @@
+import { ref as k, computed as b, defineComponent as I, openBlock as C, createBlock as T, unref as e, withCtx as d, createVNode as i, withModifiers as h, createElementVNode as r, normalizeClass as D, renderSlot as s, createElementBlock as $, createTextVNode as L, toDisplayString as R, createCommentVNode as S } from "vue";
+import { TransitionRoot as N, Dialog as V, TransitionChild as B, DialogPanel as A, DialogTitle as g } from "@headlessui/vue";
+import { _ as w } from "./ButtonBase.vue_vue_type_script_setup_true_lang-ZYVNEyNx.js";
+import { r as E } from "./XMarkIcon-CPr_Rd8y.js";
+function H(t) {
+  const v = k(null), y = k(!1), l = b(() => t.as === "form"), f = b(() => `${t.id}-title`), m = b(() => `${t.id}-content`), c = b(() => v.value?.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
+  return {
+    contentRef: v,
+    ready: y,
+    isForm: l,
+    titleId: f,
+    descriptionId: m,
+    initialFocusElement: c
+  };
+}
+const M = {
+  role: "presentation",
+  class: "rvc-modal-presentation"
+}, q = { class: "rvc-modal-container" }, x = {
+  key: 0,
+  class: "rvc-modal-header"
+}, z = { class: "rvc-modal-header-inner" }, P = { class: "rvc-modal-close-wrapper" }, j = ["id"], G = {
+  key: 2,
+  class: "rvc-modal-footer"
+}, U = /* @__PURE__ */ I({
+  __name: "Modal",
+  props: {
+    as: { default: "div" },
+    id: {},
+    title: {},
+    showClose: { type: Boolean, default: !1 },
+    spinning: { type: Boolean, default: !1 },
+    submitLabel: { default: "Confirm" },
+    cancelLabel: { default: "Cancel" },
+    panelClass: { default: "rvc-modal-panel-max-width" },
+    resetHeader: { type: Boolean, default: !1 },
+    resetFooter: { type: Boolean, default: !1 }
+  },
+  emits: ["modal:open", "modal:opened", "modal:close", "modal:save", "modal:closed"],
+  setup(t, { emit: v }) {
+    const y = t, l = v, {
+      contentRef: f,
+      ready: m,
+      isForm: c,
+      titleId: u,
+      descriptionId: p,
+      initialFocusElement: F
+    } = H(y);
+    return (n, o) => (C(), T(e(N), { as: "template" }, {
+      default: d(() => [
+        i(e(V), {
+          as: t.as,
+          class: "rvc-modal",
+          static: "",
+          "aria-modal": "true",
+          role: "dialog",
+          "initial-focus": e(F),
+          "aria-labelledby": e(u),
+          onClose: o[7] || (o[7] = (a) => l("modal:close")),
+          onSubmit: o[8] || (o[8] = h((a) => l("modal:save", a), ["prevent"]))
+        }, {
+          default: d(() => [
+            i(e(B), {
+              as: "template",
+              enter: "rvc-modal-backdrop-transition-enter",
+              "enter-from": "rvc-modal-backdrop-transition-enter-from",
+              "enter-to": "rvc-modal-backdrop-transition-enter-to",
+              leave: "rvc-modal-backdrop-transition-leave",
+              "leave-from": "rvc-modal-backdrop-transition-leave-from",
+              "leave-to": "rvc-modal-backdrop-transition-leave-to",
+              onBeforeEnter: o[0] || (o[0] = (a) => l("modal:open")),
+              onAfterEnter: o[1] || (o[1] = (a) => l("modal:opened"))
+            }, {
+              default: d(() => [...o[9] || (o[9] = [
+                r("div", {
+                  "aria-hidden": "true",
+                  class: "rvc-modal-backdrop"
+                }, null, -1)
+              ])]),
+              _: 1
+            }),
+            r("div", M, [
+              r("div", q, [
+                i(e(B), {
+                  as: "template",
+                  enter: "rvc-modal-transition-enter",
+                  "enter-from": "rvc-modal-transition-enter-from",
+                  "enter-to": "rvc-modal-transition-enter-to",
+                  leave: "rvc-modal-transition-leave",
+                  "leave-from": "rvc-modal-transition-leave-from",
+                  "leave-to": "rvc-modal-transition-leave-to",
+                  onBeforeEnter: o[5] || (o[5] = (a) => m.value = !0),
+                  onAfterLeave: o[6] || (o[6] = (a) => (m.value = !1, l("modal:closed")))
+                }, {
+                  default: d(() => [
+                    i(e(A), {
+                      class: D(["rvc-modal-panel", t.panelClass]),
+                      "aria-busy": t.spinning,
+                      "aria-describedby": e(p)
+                    }, {
+                      default: d(() => [
+                        s(n.$slots, "panel", {
+                          title: t.title,
+                          loading: t.spinning,
+                          isForm: e(c),
+                          titleId: e(u),
+                          descriptionId: e(p),
+                          contentRef: e(f),
+                          dialogTitle: e(g),
+                          emitClose: () => l("modal:close"),
+                          emitSave: (a = void 0) => l("modal:save", a)
+                        }, () => [
+                          t.resetHeader ? s(n.$slots, "header", { key: 1 }) : (C(), $("header", x, [
+                            s(n.$slots, "header", {
+                              title: t.title,
+                              showClose: t.showClose
+                            }, () => [
+                              r("div", z, [
+                                s(n.$slots, "title", {
+                                  id: e(u),
+                                  dialogTitle: e(g),
+                                  title: t.title
+                                }, () => [
+                                  i(e(g), {
+                                    id: e(u),
+                                    class: "rvc-modal-title"
+                                  }, {
+                                    default: d(() => [
+                                      L(R(t.title), 1)
+                                    ]),
+                                    _: 1
+                                  }, 8, ["id"])
+                                ]),
+                                t.showClose ? s(n.$slots, "close", {
+                                  key: 0,
+                                  icon: e(E),
+                                  emitClose: () => l("modal:close")
+                                }, () => [
+                                  r("div", P, [
+                                    r("button", {
+                                      type: "button",
+                                      class: "rvc-modal-close",
+                                      "aria-label": "Close panel",
+                                      onClick: o[2] || (o[2] = (a) => l("modal:close"))
+                                    }, [
+                                      i(e(E), { "aria-hidden": "true" })
+                                    ])
+                                  ])
+                                ]) : S("", !0)
+                              ])
+                            ])
+                          ])),
+                          r("div", {
+                            id: e(p),
+                            ref_key: "contentRef",
+                            ref: f,
+                            class: "rvc-modal-content"
+                          }, [
+                            s(n.$slots, "default", { ready: e(m) })
+                          ], 8, j),
+                          t.resetFooter ? s(n.$slots, "footer", { key: 3 }) : (C(), $("footer", G, [
+                            s(n.$slots, "footer", { loading: t.spinning }, () => [
+                              i(w, {
+                                type: e(c) ? "submit" : "button",
+                                label: t.submitLabel,
+                                spinning: t.spinning,
+                                disabled: t.spinning,
+                                onClick: o[3] || (o[3] = (a) => !e(c) && l("modal:save"))
+                              }, null, 8, ["type", "label", "spinning", "disabled"]),
+                              i(w, {
+                                type: "button",
+                                color: "light",
+                                label: t.cancelLabel,
+                                onClick: o[4] || (o[4] = (a) => l("modal:close"))
+                              }, null, 8, ["label"])
+                            ])
+                          ]))
+                        ])
+                      ]),
+                      _: 3
+                    }, 8, ["class", "aria-busy", "aria-describedby"])
+                  ]),
+                  _: 3
+                })
+              ])
+            ])
+          ]),
+          _: 3
+        }, 8, ["as", "initial-focus", "aria-labelledby"])
+      ]),
+      _: 3
+    }));
+  }
+});
+export {
+  U as _,
+  H as u
+};