@robuust-digital/vue-components 2.0.0-rc.5 → 2.0.0-rc.7

package/CHANGELOG.md

@@ -0,0 +1,242 @@
+## 2.0.0-rc.7 (27-02-2025)
+
+### Added
+
+* `Radio` and `Checkbox` `modelValue` now allows `Number` type
+* `wrapperClass` prop to `DataTable` component
+* Introduced `--rvc-table-wrapper-border-radius` variable for `DataTable` component
+* `Radio`: background color is now customizable with `--rvc-radio-bg-color` CSS variable
+* `Checkbox`: background color is now customizable with `--rvc-checkbox-input-bg-color` CSS variable
+ 
+### Changed
+
+* `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
+
+### Updated
+
+* Upgraded to **Tailwind v4.0.0** 🚀
+* Customize RVC components with CSS variables
+* Improved `Drawer` and `Modal` slots: Added `title` and `close` slots
+* `FormSelect`: `modelValue` now allows `Boolean` type
+* Improved zIndex order for Dialogs and Toast
+
+### Deprecated
+
+* ⚠️ **Nuxt 3** module support. You can manually integrate the components into your Nuxt 3 project now.
+
+## 1.3.2 (24-01-2025)
+
+### Updated
+
+* Fixed `FormInput` modelValue type to allow `Number` type
+
+## 1.3.1 (17-01-2025)
+
+### Added
+
+* Introduced `peerDependenciesMeta` to the `package.json` file to prevent installation issues
+
+## 1.3.0 (16-01-2025)
+
+### Added
+
+* `RichTextEditor` component
+* `--rvc-base-input-font-weight` to inputs
+* `Tooltip` `size` prop. `sm` is now supported
+* Added a `fullWidth` prop to the `Dropdown` Component
+
+### Changed
+
+* `@floating-ui/vue`, `@headlessui/vue`, and `vue` are now peer dependencies
+
+### Updated
+
+* This library only supports ES format builds now
+
+## 1.2.10 (13-01-2025)
+
+### Updated
+
+* Fixed `Combobox` `searchOnly`: prevent firing the request if no value is present
+* Respect the `Combobox` `minLength` prop
+* Combobox `onSearch` params order: `searchValue` first, `params` second and last `endpoint`
+
+## 1.2.9 (10-01-2025)
+
+### Changed
+
+* For `Combobox`, `FormInput`, `FormSelect` renamed `iconLeft` prop to `prefixIcon`
+
+## 1.2.8 (10-01-2025)
+
+### Added
+
+* `FormTextarea` component
+* `Combobox` component
+* `rvc-radio` to Tailwind safelist
+
+### Updated
+
+* `Drawer` fixed docs slots section
+  
+## 1.2.7 (08-01-2025)
+
+### Added
+
+* `FormInput` component
+
+### Changed
+
+* Renamed `--rvc-input-*` CSS variables to `--rvc-base-input-*`
+
+## 1.2.6 (07-01-2025)
+
+### Updated
+
+* Bugfix for nesting in tabs.js, empty-state.js and dropdown.js
+* Refactor `Dropdown` component
+* Added the icon-left prop to the `FormSelect` component
+
+## 1.2.5 (06-01-2025)
+
+### Added
+
+* `Dropdown` component
+* `EmptyState` component
+* `Toast` component
+* `Pagination` component
+* `Tabs` component
+
+## 1.2.4 (21-12-2024)
+
+### Added
+
+* Bind `header` data to `DataTable` `<th>` element
+* `FormSelect` component
+* `Checkbox`: introduced `rootClass` prop
+* Do not map `id` from `DataTable` component items
+
+### Updated
+
+* Improved `DataTable` `headers` prop validators
+* `Checkbox`: `id` prop is not required anymore
+
+## 1.2.3 (18-12-2024)
+
+### Added
+
+* Global CSS variables and Tailwind config. See the [docs](https://robuust.github.io/vue-components/base/) for more information.
+
+## 1.2.2 (17-12-2024)
+
+### Added
+
+* Added `loading` prop to Modal footer slot
+
+## 1.2.1 (12-12-2024)
+
+### Added
+
+* `Modal` component
+* `Tooltip` component
+* `Accordion` component
+* `@drawer:closed` event to `Drawer` component
+* `@modal:closed` event to `Modal` component
+* `Checkbox` component
+* `Radio` component
+* `Lightswitch` component
+* Added crucial safelisting for component library
+
+### Updated
+
+* Improved customizability for all components
+
+## 1.2.0 (11-12-2024)
+
+### Added
+
+* Introduced CSS variables for component customization
+* `Modal` component
+* `Tooltip` component
+* `Accordion` component
+* `Checkbox` component
+* `Lightswitch` component
+* `DataTable` component
+* `@drawer:closed` event to `Drawer` component
+* `@modal:closed` event to `Modal` component
+* Added hover color for the `Alert` component
+
+### Changed
+
+* `rvc-` prefix for all components
+* Changed the colors of the `Badge` component
+* `fontSize` `base` to 15px and `sm` to 13px
+* `xs` and `lg` from `size` prop in `Badge` component
+* `ButtonBase` default color variants
+
+## 1.1.1 (27-11-2024)
+
+### Added
+
+* `Alert` component
+* `iconOnly` prop to `ButtonBase` component for icon-only button variant
+* a11y attributes to `ButtonBase` component
+
+### Updated
+
+* Added slot bindings to `ButtonBase` component:
+  * Default slot: Access to `label` prop
+  * Icon slot: Access to `icon` prop
+  * Spinner slot: Access to `spinning` state
+  
+### Deprecated
+
+* `xs` and `lg` from `size` prop in `ButtonBase` component
+
+## 1.1.0-rc.0 (25-11-2024)
+
+### Added
+
+* `Badge` component
+* `Drawer` component
+* Export component library utilities CSS
+* Library Tailwind `prefix: 'rvc-'` so it doesn't conflict with the consuming application
+* `bindAs` prop to `ButtonBase` component to have more flexible component rendering [#30](https://github.com/robuust/vue-components/issues/30)
+
+### Changed
+
+* Removed `@apply` style classes from `./tailwind/components/button` to prevent conflicts with the consuming application. Added native CSS props instead.
+
+### Updated
+
+* Added CSS section to docs guide
+* Added docs for `ButtonBase` slots
+
+## 1.0.1-rc.3 (15-11-2024)
+
+### Added
+
+* `disabled` and `icon` customizations for `custom` `ButtonBase` component
+
+### Changed
+
+* Improved `custom` button Tailwind CSS configuration see [#22](https://github.com/robuust/vue-components/issues/22)
+
+### Deprecated
+
+* `hoverBackgroundColor`, `hoverColor`, `styles`, and `hoverStyles` properties for `custom` `ButtonBase` component
+
+## 1.0.1-rc.2 (14-11-2024)
+
+### Changed
+
+* `ButtonBase` component improvements
+* Updated docs
+  
+## 1.0.1-rc.1 (12-11-2024)
+
+### Added
+
+* `ButtonBase` component

package/dist/_shared/{ButtonBase-CQjlJ85F.js → ButtonBase-DfkwHIhN.js}

@@ -1,8 +1,8 @@
-import { watchEffect as u, createBlock as l, openBlock as t, resolveDynamicComponent as c, mergeProps as y, withCtx as d, createElementBlock as b, renderSlot as i, createCommentVNode as a, createTextVNode as r, toDisplayString as s, unref as f } from "vue";
+import { watchEffect as u, createBlock as i, openBlock as t, resolveDynamicComponent as c, mergeProps as b, withCtx as d, createElementBlock as y, renderSlot as l, createCommentVNode as a, createTextVNode as r, toDisplayString as s, unref as f } from "vue";
 import { S as g } from "./icon-spinner-CmxIOqaK.js";
 const m = {
   key: 0,
-  class: "sr-only"
+  class: "rvc-button-label"
 }, O = {
   __name: "ButtonBase",
   props: {
@@ -47,31 +47,31 @@ const m = {
     const o = n;
     return u(() => {
       o.iconOnly && !o.icon && console.warn("[ButtonBase] Using iconOnly prop without providing an icon may result in an empty button.");
-    }), (e, h) => (t(), l(c(n.as), y(n.bindAs ? { as: n.bindAs } : {}, {
+    }), (e, v) => (t(), i(c(n.as), b(n.bindAs ? { as: n.bindAs } : {}, {
       class: ["rvc-button", `rvc-button-${n.color}`, `rvc-button-${n.size}`, { "rvc-button-reverse": n.iconLeft }, { "rvc-button-icon-only": n.iconOnly }],
       "aria-label": n.iconOnly ? n.label : null,
       "aria-busy": n.spinning
     }), {
       default: d(() => [
-        n.iconOnly && n.label ? (t(), b("span", m, [
-          i(e.$slots, "default", { label: n.label }, () => [
+        n.iconOnly && n.label ? (t(), y("span", m, [
+          l(e.$slots, "default", { label: n.label }, () => [
             r(s(n.label), 1)
           ])
-        ])) : n.label ? i(e.$slots, "default", {
+        ])) : n.label ? l(e.$slots, "default", {
           key: 1,
           label: n.label
         }, () => [
           r(s(n.label), 1)
         ]) : a("", !0),
-        i(e.$slots, "icon", { icon: n.icon }, () => [
-          n.icon && !n.spinning ? (t(), l(c(n.icon), {
+        l(e.$slots, "icon", { icon: n.icon }, () => [
+          n.icon && !n.spinning ? (t(), i(c(n.icon), {
             key: 0,
             class: "rvc-button-icon",
             "aria-hidden": !n.iconOnly
           }, null, 8, ["aria-hidden"])) : a("", !0)
         ]),
-        i(e.$slots, "spinner", { spinning: n.spinning }, () => [
-          n.spinning ? (t(), l(f(g), {
+        l(e.$slots, "spinner", { spinning: n.spinning }, () => [
+          n.spinning ? (t(), i(f(g), {
             key: 0,
             class: "rvc-button-icon rvc-button-icon-loading",
             "aria-hidden": "true"

package/dist/_shared/Modal-BztsrTZC.js

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

package/dist/_shared/{Tooltip-BKXJoJ1x.js → Tooltip-B93ZF7IF.js}

@@ -1,4 +1,4 @@
-import { shallowRef as a, createElementBlock as d, openBlock as u, renderSlot as f, createElementVNode as g, normalizeStyle as x, normalizeClass as S, unref as h, createCommentVNode as $, mergeProps as R } from "vue";
+import { shallowRef as a, createElementBlock as p, openBlock as f, renderSlot as u, createElementVNode as g, normalizeStyle as x, normalizeClass as S, unref as h, createCommentVNode as $, mergeProps as R } from "vue";
 import { useFloating as k, autoUpdate as z, autoPlacement as P, offset as W, shift as C, arrow as M, size as A } from "@floating-ui/vue";
 const B = ["innerHTML"], N = {
   __name: "Tooltip",
@@ -46,7 +46,7 @@ const B = ["innerHTML"], N = {
   setup(t) {
     const o = t, i = a(), s = a(), l = a(), {
       floatingStyles: y,
-      middlewareData: b,
+      middlewareData: w,
       placement: c
     } = k(i, s, {
       middleware: [
@@ -65,13 +65,13 @@ const B = ["innerHTML"], N = {
       ],
       whileElementsMounted: z,
       placement: o.placement
-    }), v = (e) => ({
+    }), b = (e) => ({
       top: 0,
       bottom: 180,
       left: -90,
       right: 90
-    })[e.split("-")[0]] || 0, w = (e) => {
-      var p, m;
+    })[e.split("-")[0]] || 0, v = (e) => {
+      var m, d;
       const r = c.value.split("-")[0], n = {
         left: "right",
         right: "left",
@@ -80,34 +80,34 @@ const B = ["innerHTML"], N = {
       }[r];
       return {
         style: {
-          left: (p = e.arrow) != null && p.x ? `${e.arrow.x}px` : "",
-          top: (m = e.arrow) != null && m.y ? `${e.arrow.y}px` : "",
+          left: (m = e.arrow) != null && m.x ? `${e.arrow.x}px` : "",
+          top: (d = e.arrow) != null && d.y ? `${e.arrow.y}px` : "",
           bottom: "",
           right: "",
           [n]: l.value ? `${l.value.offsetWidth * -1}px` : "",
-          transform: `rotate(${v(c.value)}deg)`
+          transform: `rotate(${b(c.value)}deg)`
         }
       };
     };
-    return (e, r) => (u(), d("div", {
+    return (e, r) => (f(), p("div", {
       ref_key: "wrapperRef",
       ref: i,
-      class: "group/tooltip"
+      class: "rvc-tooltip-wrapper"
     }, [
-      f(e.$slots, "default"),
+      u(e.$slots, "default"),
       g("div", {
         ref_key: "tooltipRef",
         ref: s,
         class: S([
-          "rvc-tooltip group-hover/tooltip:opacity-100 group-hover/tooltip:visible invisible opacity-0",
+          "rvc-tooltip",
           t.tooltipClass,
           `rvc-tooltip-${t.size}`,
           { "rvc-tooltip-blur": t.blur }
         ]),
         style: x(h(y))
       }, [
-        f(e.$slots, "content", { content: t.content }, () => [
-          t.content ? (u(), d("div", {
+        u(e.$slots, "content", { content: t.content }, () => [
+          t.content ? (f(), p("div", {
             key: 0,
             innerHTML: t.content
           }, null, 8, B)) : $("", !0)
@@ -115,8 +115,8 @@ const B = ["innerHTML"], N = {
         g("div", R({
           ref_key: "arrowRef",
           ref: l,
-          class: "absolute rvc-tooltip-arrow"
-        }, w(h(b))), null, 16)
+          class: "rvc-tooltip-arrow"
+        }, v(h(w))), null, 16)
       ], 6)
     ], 512));
   }