@robuust-digital/vue-components 1.3.1 → 2.0.0-rc.0

package/dist/_shared/icon-spinner-CmxIOqaK.js

@@ -0,0 +1,26 @@
+import { createElementBlock as o, openBlock as t, createElementVNode as r } from "vue";
+const n = {
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24"
+};
+function l(c, e) {
+  return t(), o("svg", n, e[0] || (e[0] = [
+    r("circle", {
+      cx: "12",
+      cy: "12",
+      r: "10",
+      stroke: "currentColor",
+      "stroke-width": "4",
+      style: { opacity: ".25" }
+    }, null, -1),
+    r("path", {
+      fill: "currentColor",
+      d: "M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12zm2 5.291A7.96 7.96 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938z"
+    }, null, -1)
+  ]));
+}
+const s = { render: l };
+export {
+  s as S
+};

package/dist/combobox/combobox.css

@@ -0,0 +1,203 @@
+:root {
+  --rvc-combobox-border-radius: var(--rvc-base-border-radius);
+  --rvc-combobox-border-width: var(--rvc-base-border-width);
+  --rvc-combobox-border-color: var(--rvc-base-border-color);
+  --rvc-combobox-font-size: var(--rvc-base-input-font-size);
+  --rvc-combobox-font-weight: var(--rvc-base-input-font-weight);
+  --rvc-combobox-box-shadow: var(--rvc-base-box-shadow);
+  --rvc-combobox-color: var(--rvc-base-input-color);
+  --rvc-combobox-bg-color: var(--rvc-base-input-bg-color);
+  --rvc-combobox-padding-x: var(--rvc-base-input-padding-x);
+  --rvc-combobox-height: var(--rvc-base-input-height);
+  --rvc-combobox-icon-size: var(--rvc-base-input-icon-size);
+  --rvc-combobox-icon-color: var(--rvc-base-input-icon-color);
+  --rvc-combobox-icon-loading-animation: var(--rvc-base-loading-animation);
+  --rvc-combobox-placeholder-color: var(--rvc-base-input-placeholder-color);
+  --rvc-combobox-clear-color: var(--rvc-base-input-icon-color);
+  --rvc-combobox-clear-color-hover: var(--color-slate-700);
+  --rvc-combobox-chip-icon-size: calc(var(--spacing) * 4);
+  --rvc-combobox-chip-color: var(--rvc-base-input-color);
+  --rvc-combobox-chip-color-hover: var(--color-slate-700);
+  --rvc-combobox-chips-spacing: calc(var(--spacing) * 2);
+  --rvc-combobox-options-offset: calc(var(--spacing) * 1);
+  --rvc-combobox-options-z-index: 10;
+  --rvc-combobox-options-max-height: calc(var(--spacing) * 60);
+  --rvc-combobox-options-padding-x: 0.1875rem;
+  --rvc-combobox-options-padding-y: 0.1875rem;
+  --rvc-combobox-option-padding-x: calc(var(--spacing) * 2);
+  --rvc-combobox-option-padding-y: calc(var(--spacing) * 1.5);
+  --rvc-combobox-option-bg-color-hover: var(--color-slate-100);
+  --rvc-combobox-option-bg-color-active: transparent;
+  --rvc-combobox-option-color-active: var(--rvc-base-input-color);
+  --rvc-combobox-option-font-weight-active: var(--font-weight-semibold);
+
+  /* Small variant */
+  --rvc-combobox-height-sm: 1.875rem;
+  --rvc-combobox-font-size-sm: calc(var(--rvc-base-input-font-size) * 0.9);
+  --rvc-combobox-padding-x-sm: calc(var(--rvc-base-input-padding-x) * 0.85);
+  --rvc-combobox-icon-size-sm: calc(var(--rvc-base-input-icon-size) * 0.85);
+}
+
+@layer components {
+  .rvc-combobox {
+    display: block;
+
+    .rvc-combobox-wrapper {
+      display: grid;
+      grid-template-columns: 1fr;
+      position: relative;
+      width: 100%;
+
+      /* Extra right padding */
+      &:has(.rvc-combobox-button svg) input {
+        padding-right: calc(var(--rvc-combobox-padding-x) + var(--rvc-combobox-icon-size) + 0.25rem);
+      }
+
+      > svg {
+        margin-left: var(--rvc-combobox-padding-x);
+        justify-self: start;
+      }
+    }
+
+    input {
+      border-radius: var(--rvc-combobox-border-radius);
+      border-width: var(--rvc-combobox-border-width);
+      border-color: var(--rvc-combobox-border-color);
+      padding-right: var(--rvc-combobox-padding-x);
+      padding-left: var(--rvc-combobox-padding-x);
+      background-color: var(--rvc-combobox-bg-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) {
+        padding-left: calc(var(--rvc-combobox-padding-x) + var(--rvc-combobox-icon-size) + 0.25rem);
+      }
+
+      &::placeholder {
+        color: var(--rvc-combobox-placeholder-color);
+      }
+    }
+
+    .rvc-combobox-button, .rvc-combobox-wrapper > svg {
+      color: var(--rvc-combobox-icon-color);
+      position: relative;
+      grid-column-start: 1;
+      grid-row-start: 1;
+      align-self: center;
+      z-index: 1;
+    }
+
+    .rvc-combobox-button {
+      justify-self: end;
+      margin-right: var(--rvc-combobox-padding-x);
+    }
+
+    svg {
+      pointer-events: none;
+
+      &:not([class]), &.rvc-combobox-spinner {
+        width: var(--rvc-combobox-icon-size);
+        height: var(--rvc-combobox-icon-size);
+        color: var(--rvc-select-icon-color);
+      }
+    }
+
+    .rvc-combobox-spinner {
+      animation: var(--rvc-combobox-icon-loading-animation);
+    }
+
+    .rvc-combobox-clear {
+      > * {
+        color: var(--rvc-combobox-clear-color);
+      }
+
+      &:hover > * {
+        color: var(--rvc-combobox-clear-color-hover);
+      }
+    }
+
+    .rvc-combobox-chips {
+      margin-top: var(--rvc-combobox-chips-spacing);
+      gap: var(--rvc-combobox-chips-spacing);
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .rvc-combobox-chip {
+      color: var(--rvc-combobox-chip-color);
+
+      svg {
+        width: var(--rvc-combobox-chip-icon-size);
+        height: var(--rvc-combobox-chip-icon-size);
+      }
+
+      &:hover svg {
+        color: var(--rvc-combobox-chip-color-hover);
+      }
+    }
+
+    .rvc-combobox-options {
+      padding-inline: var(--rvc-combobox-options-padding-x);
+      padding-block: var(--rvc-combobox-options-padding-y);
+      top: calc(var(--rvc-combobox-height) + var(--rvc-combobox-options-offset));
+      border-radius: var(--rvc-combobox-border-radius);
+      border-width: var(--rvc-combobox-border-width);
+      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;
+    }
+
+    .rvc-combobox-option {
+      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;
+
+      &.rvc-combobox-option-hover {
+        background-color: var(--rvc-combobox-option-bg-color-hover);
+      }
+
+      &.rvc-combobox-option-active {
+        background-color: var(--rvc-combobox-option-bg-color-active);
+        color: var(--rvc-combobox-option-color-active);
+        font-weight: var(--rvc-combobox-option-font-weight-active);
+
+        &.rvc-combobox-option-hover {
+          background-color: var(--rvc-combobox-option-bg-color-hover);
+        }
+      }
+    }
+
+    /* Size variants */
+    &.rvc-combobox-sm {
+      --rvc-combobox-height: var(--rvc-combobox-height-sm);
+      --rvc-combobox-font-size: var(--rvc-combobox-font-size-sm);
+      --rvc-combobox-padding-x: var(--rvc-combobox-padding-x-sm);
+      --rvc-combobox-icon-size: var(--rvc-combobox-icon-size-sm);
+    }
+  }
+}

package/dist/combobox/index.js

@@ -0,0 +1,349 @@
+import { createElementBlock as d, openBlock as n, createElementVNode as r, ref as h, computed as K, createBlock as g, unref as c, mergeProps as F, withCtx as x, createCommentVNode as C, renderSlot as v, createVNode as y, resolveDynamicComponent as N, withModifiers as P, Fragment as j, renderList as z, createTextVNode as Z, toDisplayString as S, normalizeClass as U } from "vue";
+import { useDebounceFn as G } from "@vueuse/core";
+import { Combobox as H, ComboboxInput as J, ComboboxButton as Q, ComboboxOptions as W, ComboboxOption as X } from "@headlessui/vue";
+import { r as Y, _ } from "../_shared/ChevronDownIcon-z-5U4fIb.js";
+import { S as ee } from "../_shared/icon-spinner-CmxIOqaK.js";
+function te(e, $) {
+  return n(), d("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    r("path", {
+      "fill-rule": "evenodd",
+      d: "M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm2.78-4.22a.75.75 0 0 1-1.06 0L8 9.06l-1.72 1.72a.75.75 0 1 1-1.06-1.06L6.94 8 5.22 6.28a.75.75 0 0 1 1.06-1.06L8 6.94l1.72-1.72a.75.75 0 1 1 1.06 1.06L9.06 8l1.72 1.72a.75.75 0 0 1 0 1.06Z",
+      "clip-rule": "evenodd"
+    })
+  ]);
+}
+function le(e, $) {
+  return n(), d("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    r("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" })
+  ]);
+}
+const oe = { class: "relative" }, ae = { class: "flex gap-x-1" }, ne = { class: "rvc-combobox-wrapper" }, ie = {
+  key: 0,
+  class: "rvc-combobox-chips"
+}, ue = ["onClick"], re = {
+  key: 0,
+  class: "relative cursor-default select-none py-2 pl-3 pr-9 text-slate-500"
+}, se = { class: "flex items-center" }, ce = {
+  key: 1,
+  class: "relative cursor-default select-none py-2 pl-3 pr-9 text-slate-500"
+}, de = { class: "block truncate" }, pe = /* @__PURE__ */ Object.assign({
+  inheritAttrs: !1
+}, {
+  __name: "Combobox",
+  props: {
+    id: {
+      type: String,
+      required: !0
+    },
+    rootClass: {
+      type: String,
+      default: ""
+    },
+    modelValue: {
+      type: [Number, String, Object, Array, null],
+      required: !1,
+      default: null
+    },
+    endpoint: {
+      type: String,
+      default: void 0
+    },
+    requestParams: {
+      type: Object,
+      required: !1,
+      default: () => ({})
+    },
+    manualInput: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    responseData: {
+      type: Function,
+      required: !1,
+      default: (e) => e
+    },
+    displayValue: {
+      type: Function,
+      required: !1,
+      default: (e) => (e == null ? void 0 : e.name) || null
+    },
+    optionText: {
+      type: Function,
+      required: !1,
+      default: (e) => (e == null ? void 0 : e.name) || null
+    },
+    disabled: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    minLength: {
+      type: Number,
+      default: 2,
+      required: !1
+    },
+    itemKey: {
+      type: String,
+      required: !1,
+      default: "id"
+    },
+    clearable: {
+      type: Boolean,
+      required: !1
+    },
+    rootAttrs: {
+      type: Object,
+      default: () => {
+      }
+    },
+    multiple: {
+      type: Boolean
+    },
+    onSearch: {
+      type: Function,
+      default: () => null
+    },
+    searchOnly: {
+      type: Boolean
+    },
+    icon: {
+      type: [Object, Function],
+      default: null
+    },
+    prefixIcon: {
+      type: [Object, Function],
+      default: null
+    },
+    size: {
+      type: String,
+      default: "base",
+      validator: (e) => ["sm", "base"].includes(e)
+    },
+    debounce: {
+      type: Number,
+      default: 150
+    },
+    minLoadingTime: {
+      type: Number,
+      default: 0
+    },
+    onCancel: {
+      type: Function,
+      default: null
+    }
+  },
+  emits: ["update:modelValue", "update:requestParams", "combobox:noResults", "combobox:error"],
+  setup(e, { emit: $ }) {
+    const a = e, m = $, s = h([]), b = h(!1), k = h(null), L = h(!0), q = h(null), f = K({
+      get: () => a.multiple ? a.modelValue || [] : a.modelValue,
+      set: (t) => m("update:modelValue", t)
+    }), O = K({
+      get: () => a.requestParams,
+      set: (t) => m("update:requestParams", t)
+    }), D = (t) => new Promise((l) => {
+      setTimeout(l, t);
+    }), T = (t, l) => {
+      s.value = [], m("combobox:error", t), m("combobox:noResults", l);
+    }, A = async (t) => {
+      if (!a.onSearch) return;
+      if (a.searchOnly && !t) {
+        s.value = [];
+        return;
+      }
+      if (t && t.length < a.minLength) {
+        s.value = [];
+        return;
+      }
+      q.value && a.onCancel && a.onCancel(q.value), b.value = !0;
+      const l = Date.now();
+      try {
+        const { data: i, error: p, cancel: w } = await a.onSearch(t, O.value, a.endpoint);
+        q.value = w;
+        const o = a.responseData(i), u = Date.now() - l;
+        !o.length && p && T(p, t), u < a.minLoadingTime && await D(a.minLoadingTime - u), o != null && o.length ? s.value = o : (s.value = [], m("combobox:noResults", t));
+      } catch (i) {
+        i.cancelled || T(i, t);
+      } finally {
+        b.value = !1;
+      }
+    }, M = G(A, a.debounce), B = (t) => {
+      L.value ? (L.value = !1, A(t)) : M(t);
+    }, R = (t) => {
+      var l;
+      ((l = t.target.value) == null ? void 0 : l.length) === 0 && (s.value = [], m("update:modelValue", null)), a.manualInput && m("update:modelValue", O.value.query);
+    }, V = (t) => {
+      var l;
+      return a.multiple ? f.value.some((i) => i[a.itemKey] === t) : ((l = f.value) == null ? void 0 : l[a.itemKey]) === t;
+    }, I = (t) => {
+      f.value = f.value.filter((l) => l[a.itemKey] !== t[a.itemKey]);
+    };
+    return (t, l) => (n(), g(c(H), F({
+      modelValue: f.value,
+      "onUpdate:modelValue": l[4] || (l[4] = (i) => f.value = i),
+      as: "div"
+    }, e.rootAttrs, {
+      multiple: e.multiple,
+      class: [
+        "rvc-combobox",
+        `rvc-combobox-${e.size}`,
+        e.rootClass
+      ]
+    }), {
+      default: x(() => {
+        var i, p, w;
+        return [
+          r("div", oe, [
+            r("div", ae, [
+              r("div", ne, [
+                e.prefixIcon ? v(t.$slots, "prefixIcon", {
+                  key: 0,
+                  icon: e.prefixIcon
+                }, () => [
+                  (n(), g(N(e.prefixIcon), { "aria-hidden": "true" }))
+                ]) : C("", !0),
+                y(c(J), F(t.$attrs, {
+                  id: e.id,
+                  "display-value": e.displayValue,
+                  disabled: e.disabled,
+                  autocomplete: "off",
+                  onChange: l[0] || (l[0] = (o) => B(o.target.value)),
+                  onSearch: R,
+                  onInput: l[1] || (l[1] = (o) => k.value = o.target.value)
+                }), null, 16, ["id", "display-value", "disabled"]),
+                y(c(Q), {
+                  disabled: e.disabled,
+                  class: "rvc-combobox-button",
+                  onClick: l[2] || (l[2] = (o) => B(k.value || null))
+                }, {
+                  default: x(() => {
+                    var o;
+                    return [
+                      b.value ? v(t.$slots, "spinner", {
+                        key: 0,
+                        spinning: b.value
+                      }, () => [
+                        y(c(ee), { class: "rvc-combobox-spinner" })
+                      ]) : (!e.searchOnly || (o = s.value) != null && o.length) && !b.value ? v(t.$slots, "icon", {
+                        key: 1,
+                        icon: e.icon
+                      }, () => [
+                        (n(), g(N(e.icon ?? c(Y)), { "aria-hidden": "true" }))
+                      ]) : C("", !0)
+                    ];
+                  }),
+                  _: 3
+                }, 8, ["disabled"])
+              ]),
+              e.clearable && ((i = e.modelValue) != null && i.length || (p = e.modelValue) != null && p.id) ? (n(), d("button", {
+                key: 0,
+                type: "button",
+                "aria-label": "Clear selection",
+                class: "rvc-combobox-clear",
+                onClick: l[3] || (l[3] = P((o) => m("update:modelValue", e.multiple ? [] : null), ["prevent"]))
+              }, [
+                v(t.$slots, "clear", {}, () => [
+                  y(c(le))
+                ])
+              ])) : C("", !0)
+            ]),
+            e.multiple && f.value.length ? (n(), d("ul", ie, [
+              (n(!0), d(j, null, z(f.value, (o) => (n(), d("li", {
+                key: `${e.id}-selected-option-${o[e.itemKey]}`
+              }, [
+                v(t.$slots, "chip", {
+                  optionText: e.optionText(o),
+                  option: o,
+                  removeOption: I
+                }, () => [
+                  y(_, {
+                    color: "gray",
+                    class: "rvc-combobox-chip",
+                    size: e.size
+                  }, {
+                    default: x(() => [
+                      Z(S(e.optionText(o)) + " ", 1),
+                      r("button", {
+                        type: "button",
+                        "aria-label": "Remove option",
+                        onClick: P((u) => I(o), ["prevent"])
+                      }, [
+                        y(c(te))
+                      ], 8, ue)
+                    ]),
+                    _: 2
+                  }, 1032, ["size"])
+                ])
+              ]))), 128))
+            ])) : C("", !0),
+            (!e.searchOnly || (w = k.value) != null && w.length) && (!b.value || s.value.length) ? (n(), g(c(W), {
+              key: 1,
+              class: "rvc-combobox-options"
+            }, {
+              default: x(() => {
+                var o;
+                return [
+                  ((o = k.value) == null ? void 0 : o.length) < e.minLength ? (n(), d("div", re, [
+                    r("div", se, [
+                      r("em", null, "Minimal " + S(e.minLength) + " characters.", 1)
+                    ])
+                  ])) : !b.value && !s.value.length ? (n(), d("div", ce, l[5] || (l[5] = [
+                    r("div", { class: "flex items-center" }, " No results found. ", -1)
+                  ]))) : (n(!0), d(j, { key: 2 }, z(s.value, (u) => (n(), g(c(X), {
+                    key: u[e.itemKey],
+                    value: u,
+                    as: "template"
+                  }, {
+                    default: x(({ active: E }) => [
+                      r("li", {
+                        class: U([
+                          "rvc-combobox-option",
+                          { "rvc-combobox-option-hover": E },
+                          { "rvc-combobox-option-active": V(u[e.itemKey]) }
+                        ])
+                      }, [
+                        v(t.$slots, "option", {
+                          option: u,
+                          isActive: V
+                        }, () => [
+                          v(t.$slots, "optionPrefix", {
+                            option: u[e.itemKey],
+                            isActive: V
+                          }),
+                          r("span", de, S(e.optionText(u)), 1),
+                          v(t.$slots, "optionSuffix", {
+                            option: u[e.itemKey],
+                            isActive: V
+                          })
+                        ])
+                      ], 2)
+                    ]),
+                    _: 2
+                  }, 1032, ["value"]))), 128))
+                ];
+              }),
+              _: 3
+            })) : C("", !0)
+          ])
+        ];
+      }),
+      _: 3
+    }, 16, ["modelValue", "multiple", "class"]));
+  }
+});
+export {
+  pe as Combobox,
+  pe as default
+};

package/dist/combobox/styles.css

@@ -0,0 +1 @@
+@import "./combobox.css";

package/dist/core/accordion.css

@@ -0,0 +1,47 @@
+:root {
+  --rvc-accordion-border-width: var(--rvc-base-border-width);
+  --rvc-accordion-border-style: var(--rvc-base-border-style);
+  --rvc-accordion-border-color: var(--rvc-base-border-color);
+  --rvc-accordion-padding-y: calc(var(--spacing) * 6);
+  --rvc-accordion-font-weight: var(--font-weight-normal);
+  --rvc-accordion-font-size: var(--text-base);
+  --rvc-accordion-color: var(--color-slate-600);
+  --rvc-accordion-summary-font-weight: var(--font-weight-medium);
+  --rvc-accordion-summary-font-size: var(--text-lg);
+  --rvc-accordion-summary-color: var(--color-black);
+  --rvc-accordion-summary-decoration-hover: underline;
+}
+
+@layer components {
+  .rvc-accordion {
+    details {
+      border-top-width: var(--rvc-accordion-border-width);
+      border-top-color: var(--rvc-accordion-border-color);
+      border-top-style: var(--rvc-accordion-border-style);
+    }
+
+    summary {
+      padding-block: var(--rvc-accordion-padding-y);
+      font-weight: var(--rvc-accordion-summary-font-weight);
+      font-size: var(--rvc-accordion-summary-font-size);
+      color: var(--rvc-accordion-summary-color);
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        text-decoration: var(--rvc-accordion-summary-decoration-hover);
+      }
+    }
+
+    .rvc-accordion-content {
+      padding-bottom: var(--rvc-accordion-padding-y);
+      font-weight: var(--rvc-accordion-font-weight);
+      font-size: var(--rvc-accordion-font-size);
+      color: var(--rvc-accordion-color);
+    }
+  }
+}