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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,8 +1,9 @@
1
- ## 2.4.0 (16-12-2025)
1
+ ## 2.3.3 (23-01-2026)
2
2
 
3
- ### Added
3
+ ### Updated
4
4
 
5
- * Added `FormFile` component with file input, image preview, and delete/clear actions
5
+ * Update dependencies
6
+ * Added Vue as a peer dependency
6
7
 
7
8
  ## 2.3.2 (16-12-2025)
8
9
 
@@ -0,0 +1,41 @@
1
+ import { defineComponent as t, createBlock as r, openBlock as l, resolveDynamicComponent as o, normalizeClass as n, withCtx as c, renderSlot as d, createTextVNode as s, toDisplayString as i, createElementBlock as u, createElementVNode as f } from "vue";
2
+ const b = /* @__PURE__ */ t({
3
+ __name: "Badge",
4
+ props: {
5
+ as: { default: "span" },
6
+ label: { default: "" },
7
+ size: { default: "base" },
8
+ color: { default: "default" }
9
+ },
10
+ setup(e) {
11
+ return (a, m) => (l(), r(o(e.as), {
12
+ class: n(["rvc-badge", `rvc-badge-${e.color}`, `rvc-badge-${e.size}`])
13
+ }, {
14
+ default: c(() => [
15
+ d(a.$slots, "default", { label: e.label }, () => [
16
+ s(i(e.label), 1)
17
+ ])
18
+ ]),
19
+ _: 3
20
+ }, 8, ["class"]));
21
+ }
22
+ });
23
+ function g(e, a) {
24
+ return l(), u("svg", {
25
+ xmlns: "http://www.w3.org/2000/svg",
26
+ viewBox: "0 0 20 20",
27
+ fill: "currentColor",
28
+ "aria-hidden": "true",
29
+ "data-slot": "icon"
30
+ }, [
31
+ f("path", {
32
+ "fill-rule": "evenodd",
33
+ d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z",
34
+ "clip-rule": "evenodd"
35
+ })
36
+ ]);
37
+ }
38
+ export {
39
+ b as _,
40
+ g as r
41
+ };
@@ -1,23 +1,34 @@
1
- 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";
1
+ 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";
2
2
  import { useDebounceFn as H } from "@vueuse/core";
3
3
  import { Combobox as J, ComboboxInput as Q, ComboboxButton as W, ComboboxOptions as X, ComboboxOption as Y } from "@headlessui/vue";
4
- import { r as _, a as ee, _ as te } from "./XMarkIcon-DdMV8USU.js";
5
- import { S as le } from "./icon-spinner-CP0VP_YM.js";
6
- function oe(e, w) {
7
- return n(), m("svg", {
4
+ import { r as _, _ as ee } from "./ChevronDownIcon-CcE_K1lg.js";
5
+ import { S as te } from "./icon-spinner-CP0VP_YM.js";
6
+ function le(e, V) {
7
+ return n(), c("svg", {
8
8
  xmlns: "http://www.w3.org/2000/svg",
9
9
  viewBox: "0 0 16 16",
10
10
  fill: "currentColor",
11
11
  "aria-hidden": "true",
12
12
  "data-slot": "icon"
13
13
  }, [
14
- u("path", {
14
+ i("path", {
15
15
  "fill-rule": "evenodd",
16
16
  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",
17
17
  "clip-rule": "evenodd"
18
18
  })
19
19
  ]);
20
20
  }
21
+ function oe(e, V) {
22
+ return n(), c("svg", {
23
+ xmlns: "http://www.w3.org/2000/svg",
24
+ viewBox: "0 0 20 20",
25
+ fill: "currentColor",
26
+ "aria-hidden": "true",
27
+ "data-slot": "icon"
28
+ }, [
29
+ 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" })
30
+ ]);
31
+ }
21
32
  const ae = { class: "rvc-combobox-container" }, ne = { class: "rvc-combobox-wrapper" }, ie = { class: "rvc-combobox-field" }, ue = {
22
33
  key: 0,
23
34
  class: "rvc-combobox-chips"
@@ -27,7 +38,7 @@ const ae = { class: "rvc-combobox-container" }, ne = { class: "rvc-combobox-wrap
27
38
  }, ce = {
28
39
  key: 1,
29
40
  class: "rvc-combobox-content"
30
- }, de = { class: "rvc-combobox-option-text" }, he = /* @__PURE__ */ Z({
41
+ }, de = { class: "rvc-combobox-option-text" }, he = /* @__PURE__ */ j({
31
42
  inheritAttrs: !1,
32
43
  __name: "Combobox",
33
44
  props: {
@@ -56,44 +67,44 @@ const ae = { class: "rvc-combobox-container" }, ne = { class: "rvc-combobox-wrap
56
67
  onCancel: { type: Function, default: void 0 }
57
68
  },
58
69
  emits: ["update:modelValue", "update:requestParams", "combobox:noResults", "combobox:error"],
59
- setup(e, { emit: w }) {
60
- const a = e, c = w, i = h([]), v = h(!1), f = h(null), L = h(!0), V = h(null), s = D({
70
+ setup(e, { emit: V }) {
71
+ const a = e, d = V, u = h([]), v = h(!1), f = h(null), L = h(!0), k = h(null), s = D({
61
72
  get: () => a.multiple ? a.modelValue || [] : a.modelValue,
62
- set: (t) => c("update:modelValue", t)
73
+ set: (t) => d("update:modelValue", t)
63
74
  }), T = D({
64
75
  get: () => a.requestParams,
65
- set: (t) => c("update:requestParams", t)
66
- }), N = (t) => a.displayValue(t) || "", R = (t) => new Promise((o) => {
76
+ set: (t) => d("update:requestParams", t)
77
+ }), N = (t) => a.displayValue(t) || "", M = (t) => new Promise((o) => {
67
78
  setTimeout(o, t);
68
79
  }), A = (t, o) => {
69
- i.value = [], c("combobox:error", t), c("combobox:noResults", o);
70
- }, I = async (t) => {
80
+ u.value = [], d("combobox:error", t), d("combobox:noResults", o);
81
+ }, B = async (t) => {
71
82
  if (!a.onSearch) return;
72
83
  if (a.searchOnly && !t) {
73
- i.value = [];
84
+ u.value = [];
74
85
  return;
75
86
  }
76
87
  if (t && t.length < a.minLength) {
77
- i.value = [];
88
+ u.value = [];
78
89
  return;
79
90
  }
80
- V.value && a.onCancel && a.onCancel(V.value), v.value = !0;
91
+ k.value && a.onCancel && a.onCancel(k.value), v.value = !0;
81
92
  const o = Date.now();
82
93
  try {
83
- const { data: l, error: y, cancel: j } = await a.onSearch(t, T.value, a.endpoint);
84
- V.value = j || null;
85
- const k = a.responseData(l), K = Date.now() - o;
86
- !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));
94
+ const { data: l, error: y, cancel: Z } = await a.onSearch(t, T.value, a.endpoint);
95
+ k.value = Z || null;
96
+ const $ = a.responseData(l), K = Date.now() - o;
97
+ !$.length && y && A(y, t), K < a.minLoadingTime && await M(a.minLoadingTime - K), $?.length ? u.value = $ : (u.value = [], d("combobox:noResults", t));
87
98
  } catch (l) {
88
99
  l?.cancelled || A(l, t);
89
100
  } finally {
90
101
  v.value = !1;
91
102
  }
92
- }, E = H(I, a.debounce), S = (t) => {
93
- L.value ? (L.value = !1, I(t)) : E(t);
94
- }, M = (t) => {
95
- t.target.value?.length === 0 && (i.value = [], c("update:modelValue", null)), a.manualInput && c("update:modelValue", T.value.query);
96
- }, C = (t) => a.multiple ? s.value.some((o) => o[a.itemKey] === t) : s.value?.[a.itemKey] === t, B = (t) => {
103
+ }, R = H(B, a.debounce), I = (t) => {
104
+ L.value ? (L.value = !1, B(t)) : R(t);
105
+ }, E = (t) => {
106
+ t.target.value?.length === 0 && (u.value = [], d("update:modelValue", null)), a.manualInput && d("update:modelValue", T.value.query);
107
+ }, C = (t) => a.multiple ? s.value.some((o) => o[a.itemKey] === t) : s.value?.[a.itemKey] === t, S = (t) => {
97
108
  s.value = s.value.filter((o) => o[a.itemKey] !== t[a.itemKey]);
98
109
  };
99
110
  return (t, o) => (n(), x(r(J), F({
@@ -109,10 +120,10 @@ const ae = { class: "rvc-combobox-container" }, ne = { class: "rvc-combobox-wrap
109
120
  ]
110
121
  }), {
111
122
  default: g(() => [
112
- u("div", ae, [
113
- u("div", ne, [
114
- u("div", ie, [
115
- e.prefixIcon ? d(t.$slots, "prefixIcon", {
123
+ i("div", ae, [
124
+ i("div", ne, [
125
+ i("div", ie, [
126
+ e.prefixIcon ? m(t.$slots, "prefixIcon", {
116
127
  key: 0,
117
128
  icon: e.prefixIcon
118
129
  }, () => [
@@ -123,22 +134,22 @@ const ae = { class: "rvc-combobox-container" }, ne = { class: "rvc-combobox-wrap
123
134
  "display-value": N,
124
135
  disabled: e.disabled,
125
136
  autocomplete: "off",
126
- onChange: o[0] || (o[0] = (l) => S(l.target.value)),
127
- onSearch: M,
137
+ onChange: o[0] || (o[0] = (l) => I(l.target.value)),
138
+ onSearch: E,
128
139
  onInput: o[1] || (o[1] = (l) => f.value = l.target.value)
129
140
  }), null, 16, ["id", "disabled"]),
130
141
  b(r(W), {
131
142
  disabled: e.disabled,
132
143
  class: "rvc-combobox-button",
133
- onClick: o[2] || (o[2] = (l) => S(f.value || null))
144
+ onClick: o[2] || (o[2] = (l) => I(f.value || null))
134
145
  }, {
135
146
  default: g(() => [
136
- v.value ? d(t.$slots, "spinner", {
147
+ v.value ? m(t.$slots, "spinner", {
137
148
  key: 0,
138
149
  spinning: v.value
139
150
  }, () => [
140
- b(r(le), { class: "rvc-combobox-spinner" })
141
- ]) : (!e.searchOnly || i.value?.length) && !v.value ? d(t.$slots, "icon", {
151
+ b(r(te), { class: "rvc-combobox-spinner" })
152
+ ]) : (!e.searchOnly || u.value?.length) && !v.value ? m(t.$slots, "icon", {
142
153
  key: 1,
143
154
  icon: e.icon
144
155
  }, () => [
@@ -148,40 +159,40 @@ const ae = { class: "rvc-combobox-container" }, ne = { class: "rvc-combobox-wrap
148
159
  _: 3
149
160
  }, 8, ["disabled"])
150
161
  ]),
151
- e.clearable && (Array.isArray(e.modelValue) ? e.modelValue?.length : e.modelValue?.id) ? (n(), m("button", {
162
+ e.clearable && (Array.isArray(e.modelValue) ? e.modelValue?.length : e.modelValue?.id) ? (n(), c("button", {
152
163
  key: 0,
153
164
  type: "button",
154
165
  "aria-label": "Clear selection",
155
166
  class: "rvc-combobox-clear",
156
- onClick: o[3] || (o[3] = P((l) => c("update:modelValue", e.multiple ? [] : null), ["prevent"]))
167
+ onClick: o[3] || (o[3] = P((l) => d("update:modelValue", e.multiple ? [] : null), ["prevent"]))
157
168
  }, [
158
- d(t.$slots, "clear", {}, () => [
159
- b(r(ee))
169
+ m(t.$slots, "clear", {}, () => [
170
+ b(r(oe))
160
171
  ])
161
172
  ])) : p("", !0)
162
173
  ]),
163
- e.multiple && Array.isArray(s.value) && s.value?.length ? (n(), m("ul", ue, [
164
- (n(!0), m(q, null, z(s.value, (l) => (n(), m("li", {
174
+ e.multiple && Array.isArray(s.value) && s.value?.length ? (n(), c("ul", ue, [
175
+ (n(!0), c(q, null, z(s.value, (l) => (n(), c("li", {
165
176
  key: `${e.id}-selected-option-${l[e.itemKey]}`
166
177
  }, [
167
- d(t.$slots, "chip", {
178
+ m(t.$slots, "chip", {
168
179
  optionText: e.optionText(l),
169
180
  option: l,
170
- removeOption: B
181
+ removeOption: S
171
182
  }, () => [
172
- b(te, {
183
+ b(ee, {
173
184
  color: "gray",
174
185
  class: "rvc-combobox-chip",
175
186
  size: e.size
176
187
  }, {
177
188
  default: g(() => [
178
- U($(e.optionText(l)) + " ", 1),
179
- u("button", {
189
+ U(w(e.optionText(l)) + " ", 1),
190
+ i("button", {
180
191
  type: "button",
181
192
  "aria-label": "Remove option",
182
- onClick: P((y) => B(l), ["prevent"])
193
+ onClick: P((y) => S(l), ["prevent"])
183
194
  }, [
184
- b(r(oe))
195
+ b(r(le))
185
196
  ], 8, se)
186
197
  ]),
187
198
  _: 2
@@ -189,40 +200,40 @@ const ae = { class: "rvc-combobox-container" }, ne = { class: "rvc-combobox-wrap
189
200
  ])
190
201
  ]))), 128))
191
202
  ])) : p("", !0),
192
- (!e.searchOnly || f.value?.length) && (!v.value || i.value.length) ? (n(), x(r(X), {
203
+ (!e.searchOnly || f.value?.length) && (!v.value || u.value.length) ? (n(), x(r(X), {
193
204
  key: 1,
194
205
  class: "rvc-combobox-options"
195
206
  }, {
196
207
  default: g(() => [
197
- f.value && f.value.length < e.minLength ? (n(), m("div", re, [
198
- u("div", null, [
199
- u("em", null, "Minimal " + $(e.minLength) + " characters.", 1)
208
+ f.value && f.value.length < e.minLength ? (n(), c("div", re, [
209
+ i("div", null, [
210
+ i("em", null, "Minimal " + w(e.minLength) + " characters.", 1)
200
211
  ])
201
- ])) : !v.value && !i.value.length ? (n(), m("div", ce, [...o[5] || (o[5] = [
202
- u("div", null, " No results found. ", -1)
203
- ])])) : (n(!0), m(q, { key: 2 }, z(i.value, (l) => (n(), x(r(Y), {
212
+ ])) : !v.value && !u.value.length ? (n(), c("div", ce, [...o[5] || (o[5] = [
213
+ i("div", null, " No results found. ", -1)
214
+ ])])) : (n(!0), c(q, { key: 2 }, z(u.value, (l) => (n(), x(r(Y), {
204
215
  key: `option-${l[e.itemKey]}`,
205
216
  value: l,
206
217
  as: "template"
207
218
  }, {
208
219
  default: g(({ active: y }) => [
209
- u("li", {
220
+ i("li", {
210
221
  class: G([
211
222
  "rvc-combobox-option",
212
223
  { "rvc-combobox-option-hover": y },
213
224
  { "rvc-combobox-option-active": C(l[e.itemKey]) }
214
225
  ])
215
226
  }, [
216
- d(t.$slots, "option", {
227
+ m(t.$slots, "option", {
217
228
  option: l,
218
229
  isActive: C
219
230
  }, () => [
220
- d(t.$slots, "optionPrefix", {
231
+ m(t.$slots, "optionPrefix", {
221
232
  option: l[e.itemKey],
222
233
  isActive: C
223
234
  }),
224
- u("span", de, $(e.optionText(l)), 1),
225
- d(t.$slots, "optionSuffix", {
235
+ i("span", de, w(e.optionText(l)), 1),
236
+ m(t.$slots, "optionSuffix", {
226
237
  option: l[e.itemKey],
227
238
  isActive: C
228
239
  })