@robuust-digital/vue-components 2.0.0-rc.9 → 2.1.0

package/CHANGELOG.md

@@ -1,4 +1,29 @@
-## 2.0.0-rc.9 (15-05-2025)
+## 2.1.0 (05-08-2025)
+
+### Added
+
+* `FormInput`: Added `suffix` slot for custom suffix content
+* `FormSelect`: Added `options`, `optionValue`, and `optionLabel` props for programmatic option rendering
+* `Drawer`: Added `resetHeader` and `resetFooter` props to reset/hide default header and footer content
+* `Modal`: Added `resetHeader` and `resetFooter` props to reset/hide default header and footer content
+* `DataTable`: Added `footer` slot for custom table footer content
+* `DataTable`: Added `defaultSort` prop to set initial sorting state
+
+### Updated
+
+* Improved `FormInput` CSS selectors for better maintainability (replaced generic SVG selectors with class-based selectors)
+* `RichTextEditor`: Fixed duplicate extension warning by configuring link extension within StarterKit
+* `Radio`: Improved accessibility by using proper `label` element wrapper and better CSS structure
+* `Checkbox`: Improved accessibility by using proper `label` element wrapper and better CSS structure
+* `Radio` and `Checkbox`: Enhanced cursor behavior and input hiding for better user experience
+
+## 2.0.0 (13-06-2025)
+
+### Added
+
+* Added native input refs
+
+## 2.0.0-rc.11 (26-05-2025)
 
 ### Added
 
@@ -15,6 +40,9 @@
 * `Toast`: `open` prop is now `show`
 * `DataTable`: `items` slot is renamed to `item` and added a parent `items` slot to customize the whole row 
 * `DataTable`: `headers` slot is renamed to `header` and added a parent `headers` slot to customize the whole row
+* `Accordion`: `defaultOpenIndex` param can now accept `Number` and `String` as type
+* `Accordion`: `active` prop is removed from the `summary` slot, as it's not needed
+* `Accordion`: `items` prop can now also accept an `Object` as type
 
 ### Updated
 

package/dist/_shared/FormInput-B-SQTZTA.js

@@ -0,0 +1,92 @@
+import { computed as v, getCurrentInstance as $, useSlots as I, ref as b, createElementBlock as s, openBlock as n, normalizeClass as x, createCommentVNode as u, renderSlot as i, unref as r, createBlock as f, resolveDynamicComponent as m, normalizeProps as V, guardReactiveProps as B, withDirectives as C, mergeProps as y, vModelDynamic as O } from "vue";
+const S = () => ({ hasModelBinding: v(() => {
+  var l;
+  const o = $();
+  return ((l = o == null ? void 0 : o.vnode) == null ? void 0 : l.props) && Object.prototype.hasOwnProperty.call(o.vnode.props, "onUpdate:modelValue");
+}) }), j = {
+  key: 0,
+  class: "rvc-input-prefix"
+}, z = ["type"], F = ["type"], M = {
+  key: 1,
+  class: "rvc-input-suffix"
+}, D = /* @__PURE__ */ Object.assign({
+  inheritAttrs: !1
+}, {
+  __name: "FormInput",
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    rootClass: {
+      type: String,
+      default: ""
+    },
+    prefixIcon: {
+      type: [Object, Function],
+      default: null
+    },
+    icon: {
+      type: [Object, Function],
+      default: null
+    },
+    size: {
+      type: String,
+      default: "base",
+      validator: (e) => ["sm", "base"].includes(e)
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: o }) {
+    const l = e, g = o, { hasModelBinding: h } = S(), a = I(), c = b(null), d = v({
+      get: () => l.modelValue,
+      set: (t) => g("update:modelValue", t)
+    });
+    return (t, p) => (n(), s("div", {
+      class: x([
+        "rvc-input",
+        `rvc-input-${e.size}`,
+        e.rootClass
+      ])
+    }, [
+      r(a).prefix || r(a).prefixIcon || e.prefixIcon ? (n(), s("span", j, [
+        i(t.$slots, "prefix", {}, () => [
+          i(t.$slots, "prefixIcon", { icon: e.prefixIcon }, () => [
+            e.prefixIcon ? (n(), f(m(e.prefixIcon), {
+              key: 0,
+              "aria-hidden": "true"
+            })) : u("", !0)
+          ])
+        ])
+      ])) : u("", !0),
+      i(t.$slots, "input", V(B(t.$attrs)), () => [
+        r(h) ? C((n(), s("input", y({ key: 0 }, t.$attrs, {
+          ref_key: "input",
+          ref: c,
+          "onUpdate:modelValue": p[0] || (p[0] = (k) => d.value = k),
+          type: t.$attrs.type || "text"
+        }), null, 16, z)), [
+          [O, d.value]
+        ]) : (n(), s("input", y({ key: 1 }, t.$attrs, {
+          ref_key: "input",
+          ref: c,
+          type: t.$attrs.type || "text"
+        }), null, 16, F))
+      ]),
+      r(a).suffix || r(a).icon || e.icon ? (n(), s("span", M, [
+        i(t.$slots, "suffix", {}, () => [
+          i(t.$slots, "icon", { icon: e.icon }, () => [
+            e.icon ? (n(), f(m(e.icon), {
+              key: 0,
+              "aria-hidden": "true"
+            })) : u("", !0)
+          ])
+        ])
+      ])) : u("", !0)
+    ], 2));
+  }
+});
+export {
+  D as _,
+  S as u
+};

package/dist/_shared/Modal-Bw2sID1x.js

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

package/dist/core/button.css

@@ -214,15 +214,7 @@
     }
 
     .rvc-button-label {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      margin: -1px;
-      padding: 0;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      border-width: 0;
-      white-space: nowrap;
+      @apply rvc-sr-only;
     }
 
     .rvc-button-icon.rvc-button-icon-loading {

package/dist/core/checkbox.css

@@ -25,7 +25,11 @@
     cursor: pointer;
     gap: var(--rvc-checkbox-gap);
 
-    label {
+    &:has(*:disabled) {
+      cursor: default;
+    }
+
+    .rvc-checkbox-label {
       display: block;
       color: var(--rvc-checkbox-color);
       font-size: var(--rvc-checkbox-font-size);
@@ -53,14 +57,7 @@
     }
 
     input {
-      position: absolute;
-      opacity: 0;
-      inset: 0;
-      cursor: pointer;
-
-      &:disabled {
-        cursor: default;
-      }
+      display: none;
     }
 
     input:checked + .rvc-checkbox-input {