@robuust-digital/vue-components 2.4.0-beta.2 → 2.4.0-beta.3
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 +4 -3
- package/dist/_shared/ChevronDownIcon-CcE_K1lg.js +41 -0
- package/dist/_shared/{Combobox.vue_vue_type_script_setup_true_lang-C3AfEWj5.js → Combobox.vue_vue_type_script_setup_true_lang-CxRv55TC.js} +72 -61
- package/dist/_shared/Tabs.vue_vue_type_script_setup_true_lang-DMUJ5Emt.js +670 -0
- package/dist/combobox/index.js +1 -1
- package/dist/core/index.js +9 -10
- package/dist/core/styles.css +0 -1
- package/dist/core.d.ts +31 -100
- package/dist/index/index.js +17 -18
- package/dist/index.d.ts +78 -147
- package/package.json +6 -3
- package/dist/_shared/Tabs.vue_vue_type_script_setup_true_lang-Dc0jC2cn.js +0 -836
- package/dist/_shared/XMarkIcon-DdMV8USU.js +0 -53
- package/dist/core/file.css +0 -206
package/CHANGELOG.md
CHANGED
|
@@ -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
|
|
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 _,
|
|
5
|
-
import { S as
|
|
6
|
-
function
|
|
7
|
-
return n(),
|
|
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
|
-
|
|
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__ */
|
|
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:
|
|
60
|
-
const a = e,
|
|
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) =>
|
|
73
|
+
set: (t) => d("update:modelValue", t)
|
|
63
74
|
}), T = D({
|
|
64
75
|
get: () => a.requestParams,
|
|
65
|
-
set: (t) =>
|
|
66
|
-
}), N = (t) => a.displayValue(t) || "",
|
|
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
|
-
|
|
70
|
-
},
|
|
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
|
-
|
|
84
|
+
u.value = [];
|
|
74
85
|
return;
|
|
75
86
|
}
|
|
76
87
|
if (t && t.length < a.minLength) {
|
|
77
|
-
|
|
88
|
+
u.value = [];
|
|
78
89
|
return;
|
|
79
90
|
}
|
|
80
|
-
|
|
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:
|
|
84
|
-
|
|
85
|
-
const
|
|
86
|
-
|
|
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
|
-
},
|
|
93
|
-
L.value ? (L.value = !1,
|
|
94
|
-
},
|
|
95
|
-
t.target.value?.length === 0 && (
|
|
96
|
-
}, C = (t) => a.multiple ? s.value.some((o) => o[a.itemKey] === t) : s.value?.[a.itemKey] === 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
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
e.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) =>
|
|
127
|
-
onSearch:
|
|
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) =>
|
|
144
|
+
onClick: o[2] || (o[2] = (l) => I(f.value || null))
|
|
134
145
|
}, {
|
|
135
146
|
default: g(() => [
|
|
136
|
-
v.value ?
|
|
147
|
+
v.value ? m(t.$slots, "spinner", {
|
|
137
148
|
key: 0,
|
|
138
149
|
spinning: v.value
|
|
139
150
|
}, () => [
|
|
140
|
-
b(r(
|
|
141
|
-
]) : (!e.searchOnly ||
|
|
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(),
|
|
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) =>
|
|
167
|
+
onClick: o[3] || (o[3] = P((l) => d("update:modelValue", e.multiple ? [] : null), ["prevent"]))
|
|
157
168
|
}, [
|
|
158
|
-
|
|
159
|
-
b(r(
|
|
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(),
|
|
164
|
-
(n(!0),
|
|
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
|
-
|
|
178
|
+
m(t.$slots, "chip", {
|
|
168
179
|
optionText: e.optionText(l),
|
|
169
180
|
option: l,
|
|
170
|
-
removeOption:
|
|
181
|
+
removeOption: S
|
|
171
182
|
}, () => [
|
|
172
|
-
b(
|
|
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(
|
|
179
|
-
|
|
189
|
+
U(w(e.optionText(l)) + " ", 1),
|
|
190
|
+
i("button", {
|
|
180
191
|
type: "button",
|
|
181
192
|
"aria-label": "Remove option",
|
|
182
|
-
onClick: P((y) =>
|
|
193
|
+
onClick: P((y) => S(l), ["prevent"])
|
|
183
194
|
}, [
|
|
184
|
-
b(r(
|
|
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 ||
|
|
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(),
|
|
198
|
-
|
|
199
|
-
|
|
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 && !
|
|
202
|
-
|
|
203
|
-
])])) : (n(!0),
|
|
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
|
-
|
|
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
|
-
|
|
227
|
+
m(t.$slots, "option", {
|
|
217
228
|
option: l,
|
|
218
229
|
isActive: C
|
|
219
230
|
}, () => [
|
|
220
|
-
|
|
231
|
+
m(t.$slots, "optionPrefix", {
|
|
221
232
|
option: l[e.itemKey],
|
|
222
233
|
isActive: C
|
|
223
234
|
}),
|
|
224
|
-
|
|
225
|
-
|
|
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
|
})
|