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

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.
Files changed (66) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/_shared/ButtonBase.vue_vue_type_script_setup_true_lang-B0YsKehI.js +60 -0
  3. package/dist/_shared/ChevronDownIcon-DaaXfD3C.js +41 -0
  4. package/dist/_shared/Combobox.vue_vue_type_script_setup_true_lang-D1vKMJok.js +266 -0
  5. package/dist/_shared/Drawer.vue_vue_type_script_setup_true_lang-DT6tBBZ7.js +186 -0
  6. package/dist/_shared/Dropdown.vue_vue_type_script_setup_true_lang-D5vTFLkq.js +115 -0
  7. package/dist/_shared/FormInput.vue_vue_type_script_setup_true_lang-BhJpG-Fw.js +75 -0
  8. package/dist/_shared/Lightswitch.vue_vue_type_script_setup_true_lang-CvN-2WJt.js +44 -0
  9. package/dist/_shared/Modal.vue_vue_type_script_setup_true_lang-DBEOIZnO.js +187 -0
  10. package/dist/_shared/RichTextEditor.vue_vue_type_script_setup_true_lang-Bs4WdJhA.js +274 -0
  11. package/dist/_shared/Tabs.vue_vue_type_script_setup_true_lang-CsGx6wBK.js +676 -0
  12. package/dist/_shared/Toast.vue_vue_type_script_setup_true_lang-FEeRXoIx.js +75 -0
  13. package/dist/_shared/Tooltip.vue_vue_type_script_setup_true_lang-CoydN9sS.js +96 -0
  14. package/dist/combobox/index.js +3 -347
  15. package/dist/combobox.d.ts +4 -0
  16. package/dist/components/Accordion.vue.d.ts +37 -0
  17. package/dist/components/Alert.vue.d.ts +39 -0
  18. package/dist/components/Badge.vue.d.ts +32 -0
  19. package/dist/components/ButtonBase.vue.d.ts +50 -0
  20. package/dist/components/Checkbox.vue.d.ts +39 -0
  21. package/dist/components/Combobox.vue.d.ts +112 -0
  22. package/dist/components/DataTable.vue.d.ts +122 -0
  23. package/dist/components/Drawer.vue.d.ts +103 -0
  24. package/dist/components/Dropdown.vue.d.ts +120 -0
  25. package/dist/components/EmptyState.vue.d.ts +23 -0
  26. package/dist/components/FormInput.vue.d.ts +49 -0
  27. package/dist/components/FormSelect.vue.d.ts +58 -0
  28. package/dist/components/FormTextarea.vue.d.ts +16 -0
  29. package/dist/components/Lightswitch.vue.d.ts +26 -0
  30. package/dist/components/Modal.vue.d.ts +98 -0
  31. package/dist/components/Pagination.vue.d.ts +60 -0
  32. package/dist/components/Radio.vue.d.ts +34 -0
  33. package/dist/components/RichTextEditor.vue.d.ts +71 -0
  34. package/dist/components/Tabs.vue.d.ts +26 -0
  35. package/dist/components/Toast.vue.d.ts +46 -0
  36. package/dist/components/Tooltip.vue.d.ts +45 -0
  37. package/dist/composables/useDialogContext.d.ts +18 -0
  38. package/dist/composables/useForm.d.ts +6 -0
  39. package/dist/core/button.css +1 -9
  40. package/dist/core/checkbox.css +6 -9
  41. package/dist/core/index.js +17 -799
  42. package/dist/core/input.css +8 -7
  43. package/dist/core/radio.css +6 -9
  44. package/dist/core/utilities.css +12 -0
  45. package/dist/core.d.ts +27 -0
  46. package/dist/dialogs/index.js +4 -206
  47. package/dist/dialogs.d.ts +5 -0
  48. package/dist/dropdown/index.js +3 -131
  49. package/dist/dropdown.d.ts +4 -0
  50. package/dist/index/index.js +35 -0
  51. package/dist/index.d.ts +8 -0
  52. package/dist/lightswitch/index.js +3 -47
  53. package/dist/lightswitch.d.ts +4 -0
  54. package/dist/rich-text-editor/index.js +3 -263
  55. package/dist/rich-text-editor.d.ts +4 -0
  56. package/dist/toast/index.js +3 -99
  57. package/dist/toast.d.ts +4 -0
  58. package/dist/tooltip/index.js +1 -1
  59. package/dist/tooltip.d.ts +4 -0
  60. package/dist/types/shared.d.ts +3 -0
  61. package/package.json +55 -24
  62. package/dist/_shared/ButtonBase-DfkwHIhN.js +0 -87
  63. package/dist/_shared/ChevronDownIcon-z-5U4fIb.js +0 -55
  64. package/dist/_shared/FormInput-C5LjZViC.js +0 -85
  65. package/dist/_shared/Modal-dqDGKVw5.js +0 -201
  66. package/dist/_shared/Tooltip-B93ZF7IF.js +0 -126
package/CHANGELOG.md CHANGED
@@ -1,3 +1,28 @@
1
+ ## 2.2.0-rc.0 (12-08-2025)
2
+
3
+ ### Added
4
+
5
+ * Typescript support for all components
6
+
7
+ ## 2.1.0 (05-08-2025)
8
+
9
+ ### Added
10
+
11
+ * `FormInput`: Added `suffix` slot for custom suffix content
12
+ * `FormSelect`: Added `options`, `optionValue`, and `optionLabel` props for programmatic option rendering
13
+ * `Drawer`: Added `resetHeader` and `resetFooter` props to reset/hide default header and footer content
14
+ * `Modal`: Added `resetHeader` and `resetFooter` props to reset/hide default header and footer content
15
+ * `DataTable`: Added `footer` slot for custom table footer content
16
+ * `DataTable`: Added `defaultSort` prop to set initial sorting state
17
+
18
+ ### Updated
19
+
20
+ * Improved `FormInput` CSS selectors for better maintainability (replaced generic SVG selectors with class-based selectors)
21
+ * `RichTextEditor`: Fixed duplicate extension warning by configuring link extension within StarterKit
22
+ * `Radio`: Improved accessibility by using proper `label` element wrapper and better CSS structure
23
+ * `Checkbox`: Improved accessibility by using proper `label` element wrapper and better CSS structure
24
+ * `Radio` and `Checkbox`: Enhanced cursor behavior and input hiding for better user experience
25
+
1
26
  ## 2.0.0 (13-06-2025)
2
27
 
3
28
  ### Added
@@ -0,0 +1,60 @@
1
+ import { defineComponent as b, watchEffect as p, createBlock as l, openBlock as e, resolveDynamicComponent as s, mergeProps as c, withCtx as d, createElementBlock as f, renderSlot as o, createCommentVNode as a, createTextVNode as t, toDisplayString as r, unref as y } from "vue";
2
+ import { S as m } from "./icon-spinner-CmxIOqaK.js";
3
+ const v = {
4
+ key: 0,
5
+ class: "rvc-button-label"
6
+ }, O = /* @__PURE__ */ b({
7
+ __name: "ButtonBase",
8
+ props: {
9
+ as: { default: "button" },
10
+ bindAs: { default: void 0 },
11
+ label: { default: "" },
12
+ icon: { type: [Function, Object, null], default: null },
13
+ iconOnly: { type: Boolean, default: !1 },
14
+ iconLeft: { type: Boolean, default: !1 },
15
+ size: { default: "base" },
16
+ spinning: { type: Boolean, default: !1 },
17
+ color: { default: "primary" }
18
+ },
19
+ setup(u) {
20
+ const i = u;
21
+ return p(() => {
22
+ i.iconOnly && !i.icon && console.warn("[ButtonBase] Using iconOnly prop without providing an icon may result in an empty button.");
23
+ }), (n, g) => (e(), l(s(n.as), c(n.bindAs ? { as: n.bindAs } : {}, {
24
+ class: ["rvc-button", `rvc-button-${n.color}`, `rvc-button-${n.size}`, { "rvc-button-reverse": n.iconLeft }, { "rvc-button-icon-only": n.iconOnly }],
25
+ "aria-label": n.iconOnly ? n.label : null,
26
+ "aria-busy": n.spinning
27
+ }), {
28
+ default: d(() => [
29
+ n.iconOnly && n.label ? (e(), f("span", v, [
30
+ o(n.$slots, "default", { label: n.label }, () => [
31
+ t(r(n.label), 1)
32
+ ])
33
+ ])) : n.label ? o(n.$slots, "default", {
34
+ key: 1,
35
+ label: n.label
36
+ }, () => [
37
+ t(r(n.label), 1)
38
+ ]) : a("", !0),
39
+ o(n.$slots, "icon", { icon: n.icon }, () => [
40
+ n.icon && !n.spinning ? (e(), l(s(n.icon), {
41
+ key: 0,
42
+ class: "rvc-button-icon",
43
+ "aria-hidden": !n.iconOnly
44
+ }, null, 8, ["aria-hidden"])) : a("", !0)
45
+ ]),
46
+ o(n.$slots, "spinner", { spinning: n.spinning }, () => [
47
+ n.spinning ? (e(), l(y(m), {
48
+ key: 0,
49
+ class: "rvc-button-icon rvc-button-icon-loading",
50
+ "aria-hidden": "true"
51
+ })) : a("", !0)
52
+ ])
53
+ ]),
54
+ _: 3
55
+ }, 16, ["class", "aria-label", "aria-busy"]));
56
+ }
57
+ });
58
+ export {
59
+ O as _
60
+ };
@@ -0,0 +1,41 @@
1
+ import { defineComponent as r, createBlock as o, openBlock as a, resolveDynamicComponent as t, normalizeClass as n, withCtx as s, renderSlot as d, createTextVNode as c, toDisplayString as i, createElementBlock as u, createElementVNode as p } from "vue";
2
+ const v = /* @__PURE__ */ r({
3
+ __name: "Badge",
4
+ props: {
5
+ as: { default: "span" },
6
+ label: { default: "" },
7
+ size: { default: "base" },
8
+ color: { default: "default" }
9
+ },
10
+ setup(l) {
11
+ return (e, f) => (a(), o(t(e.as), {
12
+ class: n(["rvc-badge", `rvc-badge-${e.color}`, `rvc-badge-${e.size}`])
13
+ }, {
14
+ default: s(() => [
15
+ d(e.$slots, "default", { label: e.label }, () => [
16
+ c(i(e.label), 1)
17
+ ])
18
+ ]),
19
+ _: 3
20
+ }, 8, ["class"]));
21
+ }
22
+ });
23
+ function b(l, e) {
24
+ return a(), 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
+ p("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
+ v as _,
40
+ b as r
41
+ };
@@ -0,0 +1,266 @@
1
+ import { createElementBlock as c, openBlock as n, createElementVNode as r, defineComponent as U, ref as g, computed as P, createBlock as C, unref as d, mergeProps as D, withCtx as V, createCommentVNode as k, renderSlot as v, createVNode as f, resolveDynamicComponent as q, withModifiers as z, Fragment as N, renderList as M, createTextVNode as G, toDisplayString as A, normalizeClass as H } from "vue";
2
+ import { useDebounceFn as J } from "@vueuse/core";
3
+ import { Combobox as Q, ComboboxInput as W, ComboboxButton as X, ComboboxOptions as Y, ComboboxOption as _ } from "@headlessui/vue";
4
+ import { r as ee, _ as oe } from "./ChevronDownIcon-DaaXfD3C.js";
5
+ import { S as le } from "./icon-spinner-CmxIOqaK.js";
6
+ function te(s, L) {
7
+ return n(), c("svg", {
8
+ xmlns: "http://www.w3.org/2000/svg",
9
+ viewBox: "0 0 16 16",
10
+ fill: "currentColor",
11
+ "aria-hidden": "true",
12
+ "data-slot": "icon"
13
+ }, [
14
+ r("path", {
15
+ "fill-rule": "evenodd",
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
+ "clip-rule": "evenodd"
18
+ })
19
+ ]);
20
+ }
21
+ function ae(s, L) {
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
+ 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" })
30
+ ]);
31
+ }
32
+ const ne = { class: "rvc-combobox-container" }, se = { class: "rvc-combobox-wrapper" }, re = { class: "rvc-combobox-field" }, ie = {
33
+ key: 0,
34
+ class: "rvc-combobox-chips"
35
+ }, ue = ["onClick"], de = {
36
+ key: 0,
37
+ class: "rvc-combobox-content"
38
+ }, ce = {
39
+ key: 1,
40
+ class: "rvc-combobox-content"
41
+ }, me = { class: "rvc-combobox-option-text" }, he = /* @__PURE__ */ U({
42
+ inheritAttrs: !1,
43
+ __name: "Combobox",
44
+ props: {
45
+ id: {},
46
+ rootClass: { default: "" },
47
+ modelValue: { default: null },
48
+ endpoint: { default: void 0 },
49
+ requestParams: { default: () => ({}) },
50
+ manualInput: { type: Boolean, default: !1 },
51
+ responseData: { type: Function, default: (s) => s },
52
+ displayValue: { type: Function, default: (s) => (s == null ? void 0 : s.name) || null },
53
+ optionText: { type: Function, default: (s) => (s == null ? void 0 : s.name) || null },
54
+ disabled: { type: Boolean, default: !1 },
55
+ minLength: { default: 2 },
56
+ itemKey: { default: "id" },
57
+ clearable: { type: Boolean, default: !1 },
58
+ rootAttrs: { default: () => ({}) },
59
+ multiple: { type: Boolean, default: !1 },
60
+ onSearch: { type: Function, default: () => Promise.resolve({ data: [] }) },
61
+ searchOnly: { type: Boolean, default: !1 },
62
+ icon: { type: [Function, Object, null], default: null },
63
+ prefixIcon: { type: [Function, Object, null], default: null },
64
+ size: { default: "base" },
65
+ debounce: { default: 150 },
66
+ minLoadingTime: { default: 0 },
67
+ onCancel: { type: Function, default: void 0 }
68
+ },
69
+ emits: ["update:modelValue", "update:requestParams", "combobox:noResults", "combobox:error"],
70
+ setup(s, { emit: L }) {
71
+ const t = s, m = L, i = g([]), b = g(!1), y = g(null), B = g(!0), T = g(null), u = P({
72
+ get: () => t.multiple ? t.modelValue || [] : t.modelValue,
73
+ set: (e) => m("update:modelValue", e)
74
+ }), I = P({
75
+ get: () => t.requestParams,
76
+ set: (e) => m("update:requestParams", e)
77
+ }), R = (e) => t.displayValue(e) || "", E = (e) => new Promise((l) => {
78
+ setTimeout(l, e);
79
+ }), S = (e, l) => {
80
+ i.value = [], m("combobox:error", e), m("combobox:noResults", l);
81
+ }, x = async (e) => {
82
+ if (!t.onSearch) return;
83
+ if (t.searchOnly && !e) {
84
+ i.value = [];
85
+ return;
86
+ }
87
+ if (e && e.length < t.minLength) {
88
+ i.value = [];
89
+ return;
90
+ }
91
+ T.value && t.onCancel && t.onCancel(T.value), b.value = !0;
92
+ const l = Date.now();
93
+ try {
94
+ const { data: a, error: h, cancel: w } = await t.onSearch(e, I.value, t.endpoint);
95
+ T.value = w || null;
96
+ const p = t.responseData(a), o = Date.now() - l;
97
+ !p.length && h && S(h, e), o < t.minLoadingTime && await E(t.minLoadingTime - o), p != null && p.length ? i.value = p : (i.value = [], m("combobox:noResults", e));
98
+ } catch (a) {
99
+ a != null && a.cancelled || S(a, e);
100
+ } finally {
101
+ b.value = !1;
102
+ }
103
+ }, Z = J(x, t.debounce), K = (e) => {
104
+ B.value ? (B.value = !1, x(e)) : Z(e);
105
+ }, j = (e) => {
106
+ var a;
107
+ ((a = e.target.value) == null ? void 0 : a.length) === 0 && (i.value = [], m("update:modelValue", null)), t.manualInput && m("update:modelValue", I.value.query);
108
+ }, $ = (e) => {
109
+ var l;
110
+ return t.multiple ? u.value.some((a) => a[t.itemKey] === e) : ((l = u.value) == null ? void 0 : l[t.itemKey]) === e;
111
+ }, F = (e) => {
112
+ u.value = u.value.filter((l) => l[t.itemKey] !== e[t.itemKey]);
113
+ };
114
+ return (e, l) => (n(), C(d(Q), D({
115
+ modelValue: u.value,
116
+ "onUpdate:modelValue": l[4] || (l[4] = (a) => u.value = a),
117
+ as: "div"
118
+ }, e.rootAttrs, {
119
+ multiple: e.multiple,
120
+ class: [
121
+ "rvc-combobox",
122
+ `rvc-combobox-${e.size}`,
123
+ e.rootClass
124
+ ]
125
+ }), {
126
+ default: V(() => {
127
+ var a, h, w, p;
128
+ return [
129
+ r("div", ne, [
130
+ r("div", se, [
131
+ r("div", re, [
132
+ e.prefixIcon ? v(e.$slots, "prefixIcon", {
133
+ key: 0,
134
+ icon: e.prefixIcon
135
+ }, () => [
136
+ (n(), C(q(e.prefixIcon), { "aria-hidden": "true" }))
137
+ ]) : k("", !0),
138
+ f(d(W), D(e.$attrs, {
139
+ id: e.id,
140
+ "display-value": R,
141
+ disabled: e.disabled,
142
+ autocomplete: "off",
143
+ onChange: l[0] || (l[0] = (o) => K(o.target.value)),
144
+ onSearch: j,
145
+ onInput: l[1] || (l[1] = (o) => y.value = o.target.value)
146
+ }), null, 16, ["id", "disabled"]),
147
+ f(d(X), {
148
+ disabled: e.disabled,
149
+ class: "rvc-combobox-button",
150
+ onClick: l[2] || (l[2] = (o) => K(y.value || null))
151
+ }, {
152
+ default: V(() => {
153
+ var o;
154
+ return [
155
+ b.value ? v(e.$slots, "spinner", {
156
+ key: 0,
157
+ spinning: b.value
158
+ }, () => [
159
+ f(d(le), { class: "rvc-combobox-spinner" })
160
+ ]) : (!e.searchOnly || (o = i.value) != null && o.length) && !b.value ? v(e.$slots, "icon", {
161
+ key: 1,
162
+ icon: e.icon
163
+ }, () => [
164
+ (n(), C(q(e.icon ?? d(ee)), { "aria-hidden": "true" }))
165
+ ]) : k("", !0)
166
+ ];
167
+ }),
168
+ _: 3
169
+ }, 8, ["disabled"])
170
+ ]),
171
+ e.clearable && (Array.isArray(e.modelValue) ? (a = e.modelValue) != null && a.length : (h = e.modelValue) != null && h.id) ? (n(), c("button", {
172
+ key: 0,
173
+ type: "button",
174
+ "aria-label": "Clear selection",
175
+ class: "rvc-combobox-clear",
176
+ onClick: l[3] || (l[3] = z((o) => m("update:modelValue", e.multiple ? [] : null), ["prevent"]))
177
+ }, [
178
+ v(e.$slots, "clear", {}, () => [
179
+ f(d(ae))
180
+ ])
181
+ ])) : k("", !0)
182
+ ]),
183
+ e.multiple && Array.isArray(u.value) && ((w = u.value) != null && w.length) ? (n(), c("ul", ie, [
184
+ (n(!0), c(N, null, M(u.value, (o) => (n(), c("li", {
185
+ key: `${e.id}-selected-option-${o[e.itemKey]}`
186
+ }, [
187
+ v(e.$slots, "chip", {
188
+ optionText: e.optionText(o),
189
+ option: o,
190
+ removeOption: F
191
+ }, () => [
192
+ f(oe, {
193
+ color: "gray",
194
+ class: "rvc-combobox-chip",
195
+ size: e.size
196
+ }, {
197
+ default: V(() => [
198
+ G(A(e.optionText(o)) + " ", 1),
199
+ r("button", {
200
+ type: "button",
201
+ "aria-label": "Remove option",
202
+ onClick: z((O) => F(o), ["prevent"])
203
+ }, [
204
+ f(d(te))
205
+ ], 8, ue)
206
+ ]),
207
+ _: 2
208
+ }, 1032, ["size"])
209
+ ])
210
+ ]))), 128))
211
+ ])) : k("", !0),
212
+ (!e.searchOnly || (p = y.value) != null && p.length) && (!b.value || i.value.length) ? (n(), C(d(Y), {
213
+ key: 1,
214
+ class: "rvc-combobox-options"
215
+ }, {
216
+ default: V(() => [
217
+ y.value && y.value.length < e.minLength ? (n(), c("div", de, [
218
+ r("div", null, [
219
+ r("em", null, "Minimal " + A(e.minLength) + " characters.", 1)
220
+ ])
221
+ ])) : !b.value && !i.value.length ? (n(), c("div", ce, l[5] || (l[5] = [
222
+ r("div", null, " No results found. ", -1)
223
+ ]))) : (n(!0), c(N, { key: 2 }, M(i.value, (o) => (n(), C(d(_), {
224
+ key: `option-${o[e.itemKey]}`,
225
+ value: o,
226
+ as: "template"
227
+ }, {
228
+ default: V(({ active: O }) => [
229
+ r("li", {
230
+ class: H([
231
+ "rvc-combobox-option",
232
+ { "rvc-combobox-option-hover": O },
233
+ { "rvc-combobox-option-active": $(o[e.itemKey]) }
234
+ ])
235
+ }, [
236
+ v(e.$slots, "option", {
237
+ option: o,
238
+ isActive: $
239
+ }, () => [
240
+ v(e.$slots, "optionPrefix", {
241
+ option: o[e.itemKey],
242
+ isActive: $
243
+ }),
244
+ r("span", me, A(e.optionText(o)), 1),
245
+ v(e.$slots, "optionSuffix", {
246
+ option: o[e.itemKey],
247
+ isActive: $
248
+ })
249
+ ])
250
+ ], 2)
251
+ ]),
252
+ _: 2
253
+ }, 1032, ["value"]))), 128))
254
+ ]),
255
+ _: 3
256
+ })) : k("", !0)
257
+ ])
258
+ ];
259
+ }),
260
+ _: 3
261
+ }, 16, ["modelValue", "multiple", "class"]));
262
+ }
263
+ });
264
+ export {
265
+ he as _
266
+ };
@@ -0,0 +1,186 @@
1
+ import { defineComponent as S, createBlock as w, openBlock as d, unref as a, withCtx as i, createVNode as s, withModifiers as L, createElementVNode as t, normalizeClass as c, createElementBlock as u, renderSlot as n, createCommentVNode as m, createTextVNode as T, toDisplayString as F } from "vue";
2
+ import { TransitionRoot as N, Dialog as V, TransitionChild as b, DialogPanel as R, DialogTitle as y } from "@headlessui/vue";
3
+ import { _ as k } from "./ButtonBase.vue_vue_type_script_setup_true_lang-B0YsKehI.js";
4
+ import { u as A } from "./Modal.vue_vue_type_script_setup_true_lang-DBEOIZnO.js";
5
+ import { r as C } from "./XMarkIcon-90mcPzBs.js";
6
+ const H = {
7
+ class: "rvc-drawer-presentation",
8
+ role: "presentation"
9
+ }, I = { class: "rvc-drawer-container" }, z = { class: "rvc-drawer-inner" }, M = { class: "rvc-drawer-panel-inner" }, P = { class: "rvc-drawer-header-inner" }, j = { class: "rvc-drawer-close-wrapper" }, q = ["id"], G = {
10
+ key: 2,
11
+ class: "rvc-drawer-footer"
12
+ }, W = /* @__PURE__ */ S({
13
+ __name: "Drawer",
14
+ props: {
15
+ as: { default: "form" },
16
+ id: {},
17
+ title: {},
18
+ showClose: { type: Boolean, default: !1 },
19
+ scrolledDown: { type: Boolean, default: !1 },
20
+ headerSticky: { type: Boolean, default: !1 },
21
+ spinning: { type: Boolean, default: !1 },
22
+ submitLabel: { default: "Save" },
23
+ cancelLabel: { default: "Cancel" },
24
+ panelClass: { default: "rvc-drawer-panel-max-width" },
25
+ resetHeader: { type: Boolean, default: !1 },
26
+ resetFooter: { type: Boolean, default: !1 }
27
+ },
28
+ emits: ["drawer:open", "drawer:opened", "drawer:close", "drawer:save", "drawer:closed"],
29
+ setup(g, { emit: $ }) {
30
+ const B = g, o = $, {
31
+ contentRef: h,
32
+ ready: v,
33
+ isForm: D,
34
+ titleId: f,
35
+ descriptionId: p,
36
+ initialFocusElement: E
37
+ } = A(B);
38
+ return (e, r) => (d(), w(a(N), { as: "template" }, {
39
+ default: i(() => [
40
+ s(a(V), {
41
+ as: e.as,
42
+ class: "rvc-drawer",
43
+ static: "",
44
+ "aria-modal": "true",
45
+ role: "dialog",
46
+ "initial-focus": a(E),
47
+ "aria-labelledby": a(f),
48
+ onClose: r[6] || (r[6] = (l) => o("drawer:close")),
49
+ onSubmit: r[7] || (r[7] = L((l) => o("drawer:save", l), ["prevent"]))
50
+ }, {
51
+ default: i(() => [
52
+ s(a(b), {
53
+ as: "template",
54
+ enter: "rvc-drawer-backdrop-transition-enter",
55
+ "enter-from": "rvc-drawer-backdrop-transition-enter-from",
56
+ "enter-to": "rvc-drawer-backdrop-transition-enter-to",
57
+ leave: "rvc-drawer-backdrop-transition-leave",
58
+ "leave-from": "rvc-drawer-backdrop-transition-leave-from",
59
+ "leave-to": "rvc-drawer-backdrop-transition-leave-to",
60
+ onBeforeEnter: r[0] || (r[0] = (l) => o("drawer:open")),
61
+ onAfterEnter: r[1] || (r[1] = (l) => o("drawer:opened"))
62
+ }, {
63
+ default: i(() => r[8] || (r[8] = [
64
+ t("div", {
65
+ class: "rvc-drawer-backdrop",
66
+ "aria-hidden": "true"
67
+ }, null, -1)
68
+ ])),
69
+ _: 1,
70
+ __: [8]
71
+ }),
72
+ t("div", H, [
73
+ t("div", I, [
74
+ t("div", z, [
75
+ s(a(b), {
76
+ as: "template",
77
+ enter: "rvc-drawer-transition-enter",
78
+ "enter-from": "rvc-drawer-transition-enter-from",
79
+ "enter-to": "rvc-drawer-transition-enter-to",
80
+ leave: "rvc-drawer-transition-leave",
81
+ "leave-from": "rvc-drawer-transition-leave-from",
82
+ "leave-to": "rvc-drawer-transition-leave-to",
83
+ onBeforeEnter: r[4] || (r[4] = (l) => v.value = !0),
84
+ onAfterLeave: r[5] || (r[5] = (l) => (v.value = !1, o("drawer:closed")))
85
+ }, {
86
+ default: i(() => [
87
+ s(a(R), {
88
+ class: c(["rvc-drawer-panel", e.panelClass]),
89
+ "aria-busy": e.spinning,
90
+ "aria-describedby": a(p)
91
+ }, {
92
+ default: i(() => [
93
+ t("div", M, [
94
+ e.resetHeader ? n(e.$slots, "header", { key: 1 }) : (d(), u("header", {
95
+ key: 0,
96
+ class: c([{ "rvc-drawer-header-sticky": e.headerSticky }, "rvc-drawer-header"])
97
+ }, [
98
+ n(e.$slots, "header", {
99
+ title: e.title,
100
+ showClose: e.showClose
101
+ }, () => [
102
+ t("div", P, [
103
+ n(e.$slots, "title", {
104
+ id: a(f),
105
+ dialogTitle: a(y),
106
+ title: e.title
107
+ }, () => [
108
+ s(a(y), {
109
+ id: a(f),
110
+ class: "rvc-drawer-title"
111
+ }, {
112
+ default: i(() => [
113
+ T(F(e.title), 1)
114
+ ]),
115
+ _: 1
116
+ }, 8, ["id"])
117
+ ]),
118
+ e.showClose ? n(e.$slots, "close", {
119
+ key: 0,
120
+ icon: a(C),
121
+ emitClose: () => o("drawer:close")
122
+ }, () => [
123
+ t("div", j, [
124
+ t("button", {
125
+ type: "button",
126
+ class: "rvc-drawer-close",
127
+ "aria-label": "Close panel",
128
+ onClick: r[2] || (r[2] = (l) => o("drawer:close"))
129
+ }, [
130
+ s(a(C), { "aria-hidden": "true" })
131
+ ])
132
+ ])
133
+ ]) : m("", !0)
134
+ ])
135
+ ])
136
+ ], 2)),
137
+ t("div", {
138
+ class: c([{ "rvc-drawer-scroll-reverse": e.scrolledDown }, "rvc-drawer-scroll"])
139
+ }, [
140
+ t("div", {
141
+ id: a(p),
142
+ ref_key: "contentRef",
143
+ ref: h,
144
+ class: "rvc-drawer-content"
145
+ }, [
146
+ n(e.$slots, "default", { ready: a(v) })
147
+ ], 8, q)
148
+ ], 2),
149
+ e.resetFooter ? n(e.$slots, "footer", { key: 3 }) : (d(), u("footer", G, [
150
+ n(e.$slots, "footer", { loading: e.spinning }, () => [
151
+ s(k, {
152
+ type: "button",
153
+ label: e.cancelLabel,
154
+ color: "light",
155
+ onClick: r[3] || (r[3] = (l) => o("drawer:close"))
156
+ }, null, 8, ["label"]),
157
+ a(D) ? (d(), w(k, {
158
+ key: 0,
159
+ type: "submit",
160
+ label: e.submitLabel,
161
+ spinning: e.spinning,
162
+ disabled: e.spinning
163
+ }, null, 8, ["label", "spinning", "disabled"])) : m("", !0)
164
+ ])
165
+ ]))
166
+ ])
167
+ ]),
168
+ _: 3
169
+ }, 8, ["class", "aria-busy", "aria-describedby"])
170
+ ]),
171
+ _: 3
172
+ })
173
+ ])
174
+ ])
175
+ ])
176
+ ]),
177
+ _: 3
178
+ }, 8, ["as", "initial-focus", "aria-labelledby"])
179
+ ]),
180
+ _: 3
181
+ }));
182
+ }
183
+ });
184
+ export {
185
+ W as _
186
+ };