@robuust-digital/vue-components 2.0.0-rc.4 → 2.0.0-rc.6

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-BXOR8t7c.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 l, normalizeClass as L, renderSlot as c, createCommentVNode as T, createTextVNode as F, toDisplayString as I } from "vue";
+import { TransitionRoot as N, Dialog as R, TransitionChild as $, DialogPanel as V, DialogTitle as C } from "@headlessui/vue";
+import { _ as k } from "./ButtonBase-DfkwHIhN.js";
+import { r as S } from "./XMarkIcon-90mcPzBs.js";
+function h(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: "sm:max-w-lg"
+    }
+  },
+  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
+    } = h(b);
+    return (a, e) => (D(), B(t(N), { as: "template" }, {
+      default: d(() => [
+        i(t(R), {
+          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) => a.$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] = [
+                l("div", {
+                  "aria-hidden": "true",
+                  class: "rvc-modal-backdrop"
+                }, null, -1)
+              ])),
+              _: 1
+            }),
+            l("div", q, [
+              l("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(V), {
+                      class: L(["rvc-modal-panel", o.panelClass]),
+                      "aria-busy": o.spinning,
+                      "aria-describedby": t(y)
+                    }, {
+                      default: d(() => [
+                        l("header", x, [
+                          c(a.$slots, "header", { title: o.title }, () => [
+                            l("div", z, [
+                              c(a.$slots, "title", {
+                                id: t(s),
+                                dialogTitle: t(C),
+                                title: o.title
+                              }, () => [
+                                i(t(C), {
+                                  id: t(s),
+                                  class: "rvc-modal-title"
+                                }, {
+                                  default: d(() => [
+                                    F(I(o.title), 1)
+                                  ]),
+                                  _: 1
+                                }, 8, ["id"])
+                              ]),
+                              o.showClose ? c(a.$slots, "close", {
+                                key: 0,
+                                icon: t(S),
+                                emitClose: () => r("drawer:close")
+                              }, () => [
+                                l("div", A, [
+                                  l("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)
+                            ])
+                          ])
+                        ]),
+                        l("div", {
+                          id: t(y),
+                          ref_key: "contentRef",
+                          ref: p,
+                          class: "rvc-modal-content"
+                        }, [
+                          c(a.$slots, "default", { ready: t(m) })
+                        ], 8, P),
+                        l("footer", j, [
+                          c(a.$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) && a.$emit("modal:save"))
+                            }, null, 8, ["type", "label", "spinning", "disabled"]),
+                            i(k, {
+                              type: "button",
+                              color: "light",
+                              label: o.cancelLabel,
+                              onClick: e[3] || (e[3] = (n) => a.$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 _,
+  h 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));
   }

package/dist/combobox/combobox.css

@@ -42,10 +42,19 @@
   .rvc-combobox {
     display: block;
 
+    .rvc-combobox-container {
+      position: relative;
+    }
+
     .rvc-combobox-wrapper {
+      display: flex;
+      column-gap: calc(var(--spacing) * 1);
+    }
+
+    .rvc-combobox-field {
       display: grid;
-      grid-template-columns: 1fr;
       position: relative;
+      grid-template-columns: 1fr;
       width: 100%;
 
       /* Extra right padding */
@@ -60,24 +69,24 @@
     }
 
     input {
-      border-radius: var(--rvc-combobox-border-radius);
-      border-width: var(--rvc-combobox-border-width);
-      border-color: var(--rvc-combobox-border-color);
+      position: relative;
+      grid-column-start: 1;
+      grid-row-start: 1;
+      width: 100%;
+      height: var(--rvc-combobox-height);
       padding-right: var(--rvc-combobox-padding-x);
       padding-left: var(--rvc-combobox-padding-x);
+      border-width: var(--rvc-combobox-border-width);
+      border-radius: var(--rvc-combobox-border-radius);
+      border-color: var(--rvc-combobox-border-color);
+      outline-width: 0;
       background-color: var(--rvc-combobox-bg-color);
+      background-image: none;
+      box-shadow: var(--rvc-combobox-box-shadow);
+      color: var(--rvc-combobox-color);
       font-size: var(--rvc-combobox-font-size);
       font-weight: var(--rvc-combobox-font-weight);
-      color: var(--rvc-combobox-color);
-      box-shadow: var(--rvc-combobox-box-shadow);
-      height: var(--rvc-combobox-height);
-      background-image: none;
-      width: 100%;
-      position: relative;
-      grid-column-start: 1;
-      grid-row-start: 1;
       appearance: none;
-      outline-width: 0;
 
       /* Extra left padding */
       &:nth-child(2) {
@@ -89,13 +98,13 @@
       }
     }
 
-    .rvc-combobox-button, .rvc-combobox-wrapper > svg {
-      color: var(--rvc-combobox-icon-color);
+    .rvc-combobox-button, .rvc-combobox-field > svg {
       position: relative;
+      z-index: 1;
       grid-column-start: 1;
       grid-row-start: 1;
       align-self: center;
-      z-index: 1;
+      color: var(--rvc-combobox-icon-color);
     }
 
     .rvc-combobox-button {
@@ -128,10 +137,10 @@
     }
 
     .rvc-combobox-chips {
-      margin-top: var(--rvc-combobox-chips-spacing);
-      gap: var(--rvc-combobox-chips-spacing);
       display: flex;
       flex-wrap: wrap;
+      margin-top: var(--rvc-combobox-chips-spacing);
+      gap: var(--rvc-combobox-chips-spacing);
     }
 
     .rvc-combobox-chip {
@@ -148,34 +157,34 @@
     }
 
     .rvc-combobox-options {
-      padding-inline: var(--rvc-combobox-options-padding-x);
-      padding-block: var(--rvc-combobox-options-padding-y);
+      position: absolute;
+      z-index: var(--rvc-combobox-options-z-index);
       top: calc(var(--rvc-combobox-height) + var(--rvc-combobox-options-offset));
-      border-radius: var(--rvc-combobox-border-radius);
+      width: 100%;
+      max-height: var(--rvc-combobox-options-max-height);
+      margin-top: var(--rvc-combobox-options-offset);
+      padding-block: var(--rvc-combobox-options-padding-y);
+      padding-inline: var(--rvc-combobox-options-padding-x);
+      overflow-y: auto;
       border-width: var(--rvc-combobox-border-width);
+      border-radius: var(--rvc-combobox-border-radius);
       border-color: var(--rvc-combobox-border-color);
       background-color: var(--rvc-combobox-bg-color);
-      font-size: var(--rvc-combobox-font-size);
-      color: var(--rvc-combobox-color);
       box-shadow: var(--rvc-combobox-box-shadow);
-      margin-top: var(--rvc-combobox-options-offset);
-      z-index: var(--rvc-combobox-options-z-index);
-      max-height: var(--rvc-combobox-options-max-height);
-      position: absolute;
-      width: 100%;
-      overflow-y: auto;
+      color: var(--rvc-combobox-color);
+      font-size: var(--rvc-combobox-font-size);
     }
 
     .rvc-combobox-option {
+      display: flex;
+      position: relative;
+      align-items: center;
       padding: var(--rvc-combobox-option-padding-y) var(--rvc-combobox-option-padding-x);
       border-radius: var(--rvc-combobox-border-radius);
       color: var(--rvc-combobox-color);
-      gap: calc(var(--spacing) * 2);
-      align-items: center;
-      position: relative;
-      display: flex;
-      user-select: none;
       cursor: pointer;
+      user-select: none;
+      gap: calc(var(--spacing) * 2);
 
       &.rvc-combobox-option-hover {
         background-color: var(--rvc-combobox-option-bg-color-hover);
@@ -192,6 +201,28 @@
       }
     }
 
+    .rvc-combobox-option-text {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .rvc-combobox-content {
+      position: relative;
+      padding-right: calc(var(--spacing) * 9);
+      padding-left: calc(var(--spacing) * 3);
+      padding-block: calc(var(--spacing) * 2);
+      color: var(--color-slate-500);
+      cursor: default;
+      user-select: none;
+
+      > * {
+        display: flex;
+        align-items: center;
+      }
+    }
+
     /* Size variants */
     &.rvc-combobox-sm {
       --rvc-combobox-height: var(--rvc-combobox-height-sm);