@robuust-digital/vue-components 2.4.0-beta.1 → 2.4.0-beta.2

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 2.4.0 (16-12-2025)
+
+### Added
+
+* Added `FormFile` component with file input, image preview, and delete/clear actions
+
 ## 2.3.2 (16-12-2025)
 
 ### Fixed

package/dist/_shared/{Combobox.vue_vue_type_script_setup_true_lang-CxRv55TC.js → Combobox.vue_vue_type_script_setup_true_lang-C3AfEWj5.js}

@@ -1,34 +1,23 @@
-import { createElementBlock as c, openBlock as n, createElementVNode as i, defineComponent as j, ref as h, computed as D, createBlock as x, unref as r, mergeProps as F, withCtx as g, createCommentVNode as p, renderSlot as m, createVNode as b, resolveDynamicComponent as O, withModifiers as P, Fragment as q, renderList as z, createTextVNode as U, toDisplayString as w, normalizeClass as G } from "vue";
+import { createElementBlock as m, openBlock as n, createElementVNode as u, defineComponent as Z, ref as h, computed as D, createBlock as x, unref as r, mergeProps as F, withCtx as g, createCommentVNode as p, renderSlot as d, createVNode as b, resolveDynamicComponent as O, withModifiers as P, Fragment as q, renderList as z, createTextVNode as U, toDisplayString as $, normalizeClass as G } from "vue";
 import { useDebounceFn as H } from "@vueuse/core";
 import { Combobox as J, ComboboxInput as Q, ComboboxButton as W, ComboboxOptions as X, ComboboxOption as Y } from "@headlessui/vue";
-import { r as _, _ as ee } from "./ChevronDownIcon-CcE_K1lg.js";
-import { S as te } from "./icon-spinner-CP0VP_YM.js";
-function le(e, V) {
-  return n(), c("svg", {
+import { r as _, a as ee, _ as te } from "./XMarkIcon-DdMV8USU.js";
+import { S as le } from "./icon-spinner-CP0VP_YM.js";
+function oe(e, w) {
+  return n(), m("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
     fill: "currentColor",
     "aria-hidden": "true",
     "data-slot": "icon"
   }, [
-    i("path", {
+    u("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 oe(e, V) {
-  return n(), c("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 20 20",
-    fill: "currentColor",
-    "aria-hidden": "true",
-    "data-slot": "icon"
-  }, [
-    i("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 ae = { class: "rvc-combobox-container" }, ne = { class: "rvc-combobox-wrapper" }, ie = { class: "rvc-combobox-field" }, ue = {
   key: 0,
   class: "rvc-combobox-chips"
@@ -38,7 +27,7 @@ const ae = { class: "rvc-combobox-container" }, ne = { class: "rvc-combobox-wrap
 }, ce = {
   key: 1,
   class: "rvc-combobox-content"
-}, de = { class: "rvc-combobox-option-text" }, he = /* @__PURE__ */ j({
+}, de = { class: "rvc-combobox-option-text" }, he = /* @__PURE__ */ Z({
   inheritAttrs: !1,
   __name: "Combobox",
   props: {
@@ -67,44 +56,44 @@ const ae = { class: "rvc-combobox-container" }, ne = { class: "rvc-combobox-wrap
     onCancel: { type: Function, default: void 0 }
   },
   emits: ["update:modelValue", "update:requestParams", "combobox:noResults", "combobox:error"],
-  setup(e, { emit: V }) {
-    const a = e, d = V, u = h([]), v = h(!1), f = h(null), L = h(!0), k = h(null), s = D({
+  setup(e, { emit: w }) {
+    const a = e, c = w, i = h([]), v = h(!1), f = h(null), L = h(!0), V = h(null), s = D({
       get: () => a.multiple ? a.modelValue || [] : a.modelValue,
-      set: (t) => d("update:modelValue", t)
+      set: (t) => c("update:modelValue", t)
     }), T = D({
       get: () => a.requestParams,
-      set: (t) => d("update:requestParams", t)
-    }), N = (t) => a.displayValue(t) || "", M = (t) => new Promise((o) => {
+      set: (t) => c("update:requestParams", t)
+    }), N = (t) => a.displayValue(t) || "", R = (t) => new Promise((o) => {
       setTimeout(o, t);
     }), A = (t, o) => {
-      u.value = [], d("combobox:error", t), d("combobox:noResults", o);
-    }, B = async (t) => {
+      i.value = [], c("combobox:error", t), c("combobox:noResults", o);
+    }, I = async (t) => {
       if (!a.onSearch) return;
       if (a.searchOnly && !t) {
-        u.value = [];
+        i.value = [];
         return;
       }
       if (t && t.length < a.minLength) {
-        u.value = [];
+        i.value = [];
         return;
       }
-      k.value && a.onCancel && a.onCancel(k.value), v.value = !0;
+      V.value && a.onCancel && a.onCancel(V.value), v.value = !0;
       const o = Date.now();
       try {
-        const { data: l, error: y, cancel: Z } = await a.onSearch(t, T.value, a.endpoint);
-        k.value = Z || null;
-        const $ = a.responseData(l), K = Date.now() - o;
-        !$.length && y && A(y, t), K < a.minLoadingTime && await M(a.minLoadingTime - K), $?.length ? u.value = $ : (u.value = [], d("combobox:noResults", t));
+        const { data: l, error: y, cancel: j } = await a.onSearch(t, T.value, a.endpoint);
+        V.value = j || null;
+        const k = a.responseData(l), K = Date.now() - o;
+        !k.length && y && A(y, t), K < a.minLoadingTime && await R(a.minLoadingTime - K), k?.length ? i.value = k : (i.value = [], c("combobox:noResults", t));
       } catch (l) {
         l?.cancelled || A(l, t);
       } finally {
         v.value = !1;
       }
-    }, R = H(B, a.debounce), I = (t) => {
-      L.value ? (L.value = !1, B(t)) : R(t);
-    }, E = (t) => {
-      t.target.value?.length === 0 && (u.value = [], d("update:modelValue", null)), a.manualInput && d("update:modelValue", T.value.query);
-    }, C = (t) => a.multiple ? s.value.some((o) => o[a.itemKey] === t) : s.value?.[a.itemKey] === t, S = (t) => {
+    }, E = H(I, a.debounce), S = (t) => {
+      L.value ? (L.value = !1, I(t)) : E(t);
+    }, M = (t) => {
+      t.target.value?.length === 0 && (i.value = [], c("update:modelValue", null)), a.manualInput && c("update:modelValue", T.value.query);
+    }, C = (t) => a.multiple ? s.value.some((o) => o[a.itemKey] === t) : s.value?.[a.itemKey] === t, B = (t) => {
       s.value = s.value.filter((o) => o[a.itemKey] !== t[a.itemKey]);
     };
     return (t, o) => (n(), x(r(J), F({
@@ -120,10 +109,10 @@ const ae = { class: "rvc-combobox-container" }, ne = { class: "rvc-combobox-wrap
       ]
     }), {
       default: g(() => [
-        i("div", ae, [
-          i("div", ne, [
-            i("div", ie, [
-              e.prefixIcon ? m(t.$slots, "prefixIcon", {
+        u("div", ae, [
+          u("div", ne, [
+            u("div", ie, [
+              e.prefixIcon ? d(t.$slots, "prefixIcon", {
                 key: 0,
                 icon: e.prefixIcon
               }, () => [
@@ -134,22 +123,22 @@ const ae = { class: "rvc-combobox-container" }, ne = { class: "rvc-combobox-wrap
                 "display-value": N,
                 disabled: e.disabled,
                 autocomplete: "off",
-                onChange: o[0] || (o[0] = (l) => I(l.target.value)),
-                onSearch: E,
+                onChange: o[0] || (o[0] = (l) => S(l.target.value)),
+                onSearch: M,
                 onInput: o[1] || (o[1] = (l) => f.value = l.target.value)
               }), null, 16, ["id", "disabled"]),
               b(r(W), {
                 disabled: e.disabled,
                 class: "rvc-combobox-button",
-                onClick: o[2] || (o[2] = (l) => I(f.value || null))
+                onClick: o[2] || (o[2] = (l) => S(f.value || null))
               }, {
                 default: g(() => [
-                  v.value ? m(t.$slots, "spinner", {
+                  v.value ? d(t.$slots, "spinner", {
                     key: 0,
                     spinning: v.value
                   }, () => [
-                    b(r(te), { class: "rvc-combobox-spinner" })
-                  ]) : (!e.searchOnly || u.value?.length) && !v.value ? m(t.$slots, "icon", {
+                    b(r(le), { class: "rvc-combobox-spinner" })
+                  ]) : (!e.searchOnly || i.value?.length) && !v.value ? d(t.$slots, "icon", {
                     key: 1,
                     icon: e.icon
                   }, () => [
@@ -159,40 +148,40 @@ const ae = { class: "rvc-combobox-container" }, ne = { class: "rvc-combobox-wrap
                 _: 3
               }, 8, ["disabled"])
             ]),
-            e.clearable && (Array.isArray(e.modelValue) ? e.modelValue?.length : e.modelValue?.id) ? (n(), c("button", {
+            e.clearable && (Array.isArray(e.modelValue) ? e.modelValue?.length : e.modelValue?.id) ? (n(), m("button", {
               key: 0,
               type: "button",
               "aria-label": "Clear selection",
               class: "rvc-combobox-clear",
-              onClick: o[3] || (o[3] = P((l) => d("update:modelValue", e.multiple ? [] : null), ["prevent"]))
+              onClick: o[3] || (o[3] = P((l) => c("update:modelValue", e.multiple ? [] : null), ["prevent"]))
             }, [
-              m(t.$slots, "clear", {}, () => [
-                b(r(oe))
+              d(t.$slots, "clear", {}, () => [
+                b(r(ee))
               ])
             ])) : p("", !0)
           ]),
-          e.multiple && Array.isArray(s.value) && s.value?.length ? (n(), c("ul", ue, [
-            (n(!0), c(q, null, z(s.value, (l) => (n(), c("li", {
+          e.multiple && Array.isArray(s.value) && s.value?.length ? (n(), m("ul", ue, [
+            (n(!0), m(q, null, z(s.value, (l) => (n(), m("li", {
               key: `${e.id}-selected-option-${l[e.itemKey]}`
             }, [
-              m(t.$slots, "chip", {
+              d(t.$slots, "chip", {
                 optionText: e.optionText(l),
                 option: l,
-                removeOption: S
+                removeOption: B
               }, () => [
-                b(ee, {
+                b(te, {
                   color: "gray",
                   class: "rvc-combobox-chip",
                   size: e.size
                 }, {
                   default: g(() => [
-                    U(w(e.optionText(l)) + " ", 1),
-                    i("button", {
+                    U($(e.optionText(l)) + " ", 1),
+                    u("button", {
                       type: "button",
                       "aria-label": "Remove option",
-                      onClick: P((y) => S(l), ["prevent"])
+                      onClick: P((y) => B(l), ["prevent"])
                     }, [
-                      b(r(le))
+                      b(r(oe))
                     ], 8, se)
                   ]),
                   _: 2
@@ -200,40 +189,40 @@ const ae = { class: "rvc-combobox-container" }, ne = { class: "rvc-combobox-wrap
               ])
             ]))), 128))
           ])) : p("", !0),
-          (!e.searchOnly || f.value?.length) && (!v.value || u.value.length) ? (n(), x(r(X), {
+          (!e.searchOnly || f.value?.length) && (!v.value || i.value.length) ? (n(), x(r(X), {
             key: 1,
             class: "rvc-combobox-options"
           }, {
             default: g(() => [
-              f.value && f.value.length < e.minLength ? (n(), c("div", re, [
-                i("div", null, [
-                  i("em", null, "Minimal " + w(e.minLength) + " characters.", 1)
+              f.value && f.value.length < e.minLength ? (n(), m("div", re, [
+                u("div", null, [
+                  u("em", null, "Minimal " + $(e.minLength) + " characters.", 1)
                 ])
-              ])) : !v.value && !u.value.length ? (n(), c("div", ce, [...o[5] || (o[5] = [
-                i("div", null, " No results found. ", -1)
-              ])])) : (n(!0), c(q, { key: 2 }, z(u.value, (l) => (n(), x(r(Y), {
+              ])) : !v.value && !i.value.length ? (n(), m("div", ce, [...o[5] || (o[5] = [
+                u("div", null, " No results found. ", -1)
+              ])])) : (n(!0), m(q, { key: 2 }, z(i.value, (l) => (n(), x(r(Y), {
                 key: `option-${l[e.itemKey]}`,
                 value: l,
                 as: "template"
               }, {
                 default: g(({ active: y }) => [
-                  i("li", {
+                  u("li", {
                     class: G([
                       "rvc-combobox-option",
                       { "rvc-combobox-option-hover": y },
                       { "rvc-combobox-option-active": C(l[e.itemKey]) }
                     ])
                   }, [
-                    m(t.$slots, "option", {
+                    d(t.$slots, "option", {
                       option: l,
                       isActive: C
                     }, () => [
-                      m(t.$slots, "optionPrefix", {
+                      d(t.$slots, "optionPrefix", {
                         option: l[e.itemKey],
                         isActive: C
                       }),
-                      i("span", de, w(e.optionText(l)), 1),
-                      m(t.$slots, "optionSuffix", {
+                      u("span", de, $(e.optionText(l)), 1),
+                      d(t.$slots, "optionSuffix", {
                         option: l[e.itemKey],
                         isActive: C
                       })