@robuust-digital/vue-components 2.0.0-rc.3 → 2.0.0-rc.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.
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
import { ref as g, computed as y, createBlock as x, openBlock as B, unref as t, withCtx as d, createVNode as n, withModifiers as D, createElementVNode as a, normalizeClass as E, renderSlot as u, createCommentVNode as L, createTextVNode as T, toDisplayString as h } from "vue";
|
|
2
|
+
import { TransitionRoot as F, Dialog as I, TransitionChild as $, DialogPanel as N, DialogTitle as C } from "@headlessui/vue";
|
|
3
|
+
import { _ as S } from "./ButtonBase-CQjlJ85F.js";
|
|
4
|
+
import { r as w } from "./XMarkIcon-90mcPzBs.js";
|
|
5
|
+
function R(l) {
|
|
6
|
+
const c = g(null), s = g(!1), v = y(() => l.as === "form"), b = y(() => `${l.id}-title`), m = y(() => `${l.id}-content`), f = y(() => {
|
|
7
|
+
var r;
|
|
8
|
+
return (r = c.value) == null ? void 0 : r.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
9
|
+
});
|
|
10
|
+
return {
|
|
11
|
+
contentRef: c,
|
|
12
|
+
ready: s,
|
|
13
|
+
isForm: v,
|
|
14
|
+
titleId: b,
|
|
15
|
+
descriptionId: m,
|
|
16
|
+
initialFocusElement: f
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
const V = {
|
|
20
|
+
role: "presentation",
|
|
21
|
+
class: "fixed inset-0 z-10 w-screen overflow-y-auto"
|
|
22
|
+
}, q = { class: "flex min-h-full justify-center p-4 items-center sm:p-0" }, z = { class: "rvc-modal-header" }, j = { class: "flex items-center justify-between" }, M = { class: "ml-3 flex h-7 items-center" }, A = ["id"], P = { class: "rvc-modal-footer" }, O = {
|
|
23
|
+
__name: "Modal",
|
|
24
|
+
props: {
|
|
25
|
+
as: {
|
|
26
|
+
type: String,
|
|
27
|
+
default: "div"
|
|
28
|
+
},
|
|
29
|
+
id: {
|
|
30
|
+
type: String,
|
|
31
|
+
required: !0
|
|
32
|
+
},
|
|
33
|
+
title: {
|
|
34
|
+
type: String,
|
|
35
|
+
required: !0
|
|
36
|
+
},
|
|
37
|
+
showClose: {
|
|
38
|
+
type: Boolean
|
|
39
|
+
},
|
|
40
|
+
spinning: {
|
|
41
|
+
type: Boolean
|
|
42
|
+
},
|
|
43
|
+
submitLabel: {
|
|
44
|
+
type: String,
|
|
45
|
+
default: "Confirm"
|
|
46
|
+
},
|
|
47
|
+
cancelLabel: {
|
|
48
|
+
type: String,
|
|
49
|
+
default: "Cancel"
|
|
50
|
+
},
|
|
51
|
+
panelClass: {
|
|
52
|
+
type: String,
|
|
53
|
+
default: "sm:max-w-lg"
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
emits: ["modal:open", "modal:close", "modal:save", "modal:closed"],
|
|
57
|
+
setup(l, { emit: c }) {
|
|
58
|
+
const s = c, v = l, {
|
|
59
|
+
contentRef: b,
|
|
60
|
+
ready: m,
|
|
61
|
+
isForm: f,
|
|
62
|
+
titleId: r,
|
|
63
|
+
descriptionId: p,
|
|
64
|
+
initialFocusElement: k
|
|
65
|
+
} = R(v);
|
|
66
|
+
return (i, e) => (B(), x(t(F), { as: "template" }, {
|
|
67
|
+
default: d(() => [
|
|
68
|
+
n(t(I), {
|
|
69
|
+
as: l.as,
|
|
70
|
+
class: "rvc-modal",
|
|
71
|
+
static: "",
|
|
72
|
+
"aria-modal": "true",
|
|
73
|
+
role: "dialog",
|
|
74
|
+
"initial-focus": t(k),
|
|
75
|
+
"aria-labelledby": t(r),
|
|
76
|
+
onClose: e[6] || (e[6] = (o) => i.$emit("modal:close")),
|
|
77
|
+
onSubmit: e[7] || (e[7] = D((o) => s("modal:save", o), ["prevent"]))
|
|
78
|
+
}, {
|
|
79
|
+
default: d(() => [
|
|
80
|
+
n(t($), {
|
|
81
|
+
as: "template",
|
|
82
|
+
enter: "ease-out duration-300",
|
|
83
|
+
"enter-from": "opacity-0",
|
|
84
|
+
"enter-to": "opacity-100",
|
|
85
|
+
leave: "ease-in duration-200",
|
|
86
|
+
"leave-from": "opacity-100",
|
|
87
|
+
"leave-to": "opacity-0",
|
|
88
|
+
onBeforeEnter: e[0] || (e[0] = (o) => s("modal:open"))
|
|
89
|
+
}, {
|
|
90
|
+
default: d(() => e[8] || (e[8] = [
|
|
91
|
+
a("div", {
|
|
92
|
+
"aria-hidden": "true",
|
|
93
|
+
class: "fixed inset-0 transition-opacity rvc-modal-backdrop"
|
|
94
|
+
}, null, -1)
|
|
95
|
+
])),
|
|
96
|
+
_: 1
|
|
97
|
+
}),
|
|
98
|
+
a("div", V, [
|
|
99
|
+
a("div", q, [
|
|
100
|
+
n(t($), {
|
|
101
|
+
as: "template",
|
|
102
|
+
enter: "ease-out duration-300",
|
|
103
|
+
"enter-from": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
|
|
104
|
+
"enter-to": "opacity-100 translate-y-0 sm:scale-100",
|
|
105
|
+
leave: "ease-in duration-200",
|
|
106
|
+
"leave-from": "opacity-100 translate-y-0 sm:scale-100",
|
|
107
|
+
"leave-to": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
|
|
108
|
+
onBeforeEnter: e[4] || (e[4] = (o) => m.value = !0),
|
|
109
|
+
onAfterLeave: e[5] || (e[5] = (o) => (m.value = !1, s("modal:closed")))
|
|
110
|
+
}, {
|
|
111
|
+
default: d(() => [
|
|
112
|
+
n(t(N), {
|
|
113
|
+
class: E(["rvc-modal-panel", l.panelClass]),
|
|
114
|
+
"aria-busy": l.spinning,
|
|
115
|
+
"aria-describedby": t(p)
|
|
116
|
+
}, {
|
|
117
|
+
default: d(() => [
|
|
118
|
+
a("header", z, [
|
|
119
|
+
u(i.$slots, "header", { title: l.title }, () => [
|
|
120
|
+
a("div", j, [
|
|
121
|
+
u(i.$slots, "title", {
|
|
122
|
+
id: t(r),
|
|
123
|
+
dialogTitle: t(C),
|
|
124
|
+
title: l.title
|
|
125
|
+
}, () => [
|
|
126
|
+
n(t(C), {
|
|
127
|
+
id: t(r),
|
|
128
|
+
class: "rvc-modal-title"
|
|
129
|
+
}, {
|
|
130
|
+
default: d(() => [
|
|
131
|
+
T(h(l.title), 1)
|
|
132
|
+
]),
|
|
133
|
+
_: 1
|
|
134
|
+
}, 8, ["id"])
|
|
135
|
+
]),
|
|
136
|
+
l.showClose ? u(i.$slots, "close", {
|
|
137
|
+
key: 0,
|
|
138
|
+
icon: t(w),
|
|
139
|
+
emitClose: () => s("drawer:close")
|
|
140
|
+
}, () => [
|
|
141
|
+
a("div", M, [
|
|
142
|
+
a("button", {
|
|
143
|
+
type: "button",
|
|
144
|
+
class: "relative rvc-modal-close",
|
|
145
|
+
"aria-label": "Close panel",
|
|
146
|
+
onClick: e[1] || (e[1] = (o) => s("modal:close"))
|
|
147
|
+
}, [
|
|
148
|
+
n(t(w), {
|
|
149
|
+
class: "size-full",
|
|
150
|
+
"aria-hidden": "true"
|
|
151
|
+
})
|
|
152
|
+
])
|
|
153
|
+
])
|
|
154
|
+
]) : L("", !0)
|
|
155
|
+
])
|
|
156
|
+
])
|
|
157
|
+
]),
|
|
158
|
+
a("div", {
|
|
159
|
+
id: t(p),
|
|
160
|
+
ref_key: "contentRef",
|
|
161
|
+
ref: b,
|
|
162
|
+
class: "rvc-modal-content"
|
|
163
|
+
}, [
|
|
164
|
+
u(i.$slots, "default", { ready: t(m) })
|
|
165
|
+
], 8, A),
|
|
166
|
+
a("footer", P, [
|
|
167
|
+
u(i.$slots, "footer", { loading: l.spinning }, () => [
|
|
168
|
+
n(S, {
|
|
169
|
+
type: t(f) ? "submit" : "button",
|
|
170
|
+
label: l.submitLabel,
|
|
171
|
+
spinning: l.spinning,
|
|
172
|
+
disabled: l.spinning,
|
|
173
|
+
onClick: e[2] || (e[2] = (o) => !t(f) && i.$emit("modal:save"))
|
|
174
|
+
}, null, 8, ["type", "label", "spinning", "disabled"]),
|
|
175
|
+
n(S, {
|
|
176
|
+
type: "button",
|
|
177
|
+
color: "light",
|
|
178
|
+
label: l.cancelLabel,
|
|
179
|
+
onClick: e[3] || (e[3] = (o) => i.$emit("modal:close"))
|
|
180
|
+
}, null, 8, ["label"])
|
|
181
|
+
])
|
|
182
|
+
])
|
|
183
|
+
]),
|
|
184
|
+
_: 3
|
|
185
|
+
}, 8, ["class", "aria-busy", "aria-describedby"])
|
|
186
|
+
]),
|
|
187
|
+
_: 3
|
|
188
|
+
})
|
|
189
|
+
])
|
|
190
|
+
])
|
|
191
|
+
]),
|
|
192
|
+
_: 3
|
|
193
|
+
}, 8, ["as", "initial-focus", "aria-labelledby"])
|
|
194
|
+
]),
|
|
195
|
+
_: 3
|
|
196
|
+
}));
|
|
197
|
+
}
|
|
198
|
+
};
|
|
199
|
+
export {
|
|
200
|
+
O as _,
|
|
201
|
+
R as u
|
|
202
|
+
};
|
package/dist/dialogs/index.js
CHANGED
|
@@ -1,16 +1,13 @@
|
|
|
1
|
-
import { createBlock as
|
|
2
|
-
import { TransitionRoot as
|
|
3
|
-
import { _ as
|
|
4
|
-
import { u as V } from "../_shared/Modal-
|
|
5
|
-
import { _ as
|
|
6
|
-
import { r as
|
|
7
|
-
const
|
|
1
|
+
import { createBlock as v, openBlock as w, unref as e, withCtx as n, createVNode as r, withModifiers as D, createElementVNode as a, normalizeClass as c, renderSlot as d, createCommentVNode as y, createTextVNode as B, toDisplayString as L } from "vue";
|
|
2
|
+
import { TransitionRoot as T, Dialog as E, TransitionChild as b, DialogPanel as N, DialogTitle as p } from "@headlessui/vue";
|
|
3
|
+
import { _ as g } from "../_shared/ButtonBase-CQjlJ85F.js";
|
|
4
|
+
import { u as V } from "../_shared/Modal-CsI5mZlJ.js";
|
|
5
|
+
import { _ as W } from "../_shared/Modal-CsI5mZlJ.js";
|
|
6
|
+
import { r as x } from "../_shared/XMarkIcon-90mcPzBs.js";
|
|
7
|
+
const z = {
|
|
8
8
|
class: "fixed inset-0 overflow-hidden",
|
|
9
9
|
role: "presentation"
|
|
10
|
-
},
|
|
11
|
-
key: 0,
|
|
12
|
-
class: "ml-3 flex h-7 items-center"
|
|
13
|
-
}, A = ["id"], P = { class: "flex shrink-0 rvc-drawer-footer" }, Q = {
|
|
10
|
+
}, R = { class: "absolute inset-0 overflow-hidden" }, q = { class: "pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10" }, F = { class: "flex h-full flex-col shadow-xl" }, I = { class: "flex items-center justify-between" }, M = { class: "ml-3 flex h-7 items-center" }, j = ["id"], A = { class: "flex shrink-0 rvc-drawer-footer" }, O = {
|
|
14
11
|
__name: "Drawer",
|
|
15
12
|
props: {
|
|
16
13
|
as: {
|
|
@@ -51,30 +48,30 @@ const R = {
|
|
|
51
48
|
}
|
|
52
49
|
},
|
|
53
50
|
emits: ["drawer:open", "drawer:close", "drawer:save", "drawer:closed"],
|
|
54
|
-
setup(t, { emit:
|
|
55
|
-
const
|
|
56
|
-
contentRef:
|
|
57
|
-
ready:
|
|
58
|
-
isForm:
|
|
59
|
-
titleId:
|
|
60
|
-
descriptionId:
|
|
61
|
-
initialFocusElement:
|
|
62
|
-
} = V(
|
|
63
|
-
return (s,
|
|
64
|
-
default:
|
|
65
|
-
|
|
51
|
+
setup(t, { emit: C }) {
|
|
52
|
+
const o = C, h = t, {
|
|
53
|
+
contentRef: $,
|
|
54
|
+
ready: f,
|
|
55
|
+
isForm: k,
|
|
56
|
+
titleId: u,
|
|
57
|
+
descriptionId: m,
|
|
58
|
+
initialFocusElement: S
|
|
59
|
+
} = V(h);
|
|
60
|
+
return (s, l) => (w(), v(e(T), { as: "template" }, {
|
|
61
|
+
default: n(() => [
|
|
62
|
+
r(e(E), {
|
|
66
63
|
as: t.as,
|
|
67
64
|
class: "rvc-drawer",
|
|
68
65
|
static: "",
|
|
69
66
|
"aria-modal": "true",
|
|
70
67
|
role: "dialog",
|
|
71
|
-
"initial-focus":
|
|
72
|
-
"aria-labelledby":
|
|
73
|
-
onClose:
|
|
74
|
-
onSubmit:
|
|
68
|
+
"initial-focus": e(S),
|
|
69
|
+
"aria-labelledby": e(u),
|
|
70
|
+
onClose: l[5] || (l[5] = (i) => s.$emit("drawer:close")),
|
|
71
|
+
onSubmit: l[6] || (l[6] = D((i) => o("drawer:save", i), ["prevent"]))
|
|
75
72
|
}, {
|
|
76
|
-
default:
|
|
77
|
-
|
|
73
|
+
default: n(() => [
|
|
74
|
+
r(e(b), {
|
|
78
75
|
as: "template",
|
|
79
76
|
enter: "ease-in-out duration-500",
|
|
80
77
|
"enter-from": "opacity-0",
|
|
@@ -82,9 +79,9 @@ const R = {
|
|
|
82
79
|
leave: "ease-in-out duration-500",
|
|
83
80
|
"leave-from": "opacity-100",
|
|
84
81
|
"leave-to": "opacity-0",
|
|
85
|
-
onBeforeEnter:
|
|
82
|
+
onBeforeEnter: l[0] || (l[0] = (i) => o("drawer:open"))
|
|
86
83
|
}, {
|
|
87
|
-
default:
|
|
84
|
+
default: n(() => l[7] || (l[7] = [
|
|
88
85
|
a("div", {
|
|
89
86
|
class: "fixed inset-0 transition-opacity rvc-drawer-backdrop",
|
|
90
87
|
"aria-hidden": "true"
|
|
@@ -92,10 +89,10 @@ const R = {
|
|
|
92
89
|
])),
|
|
93
90
|
_: 1
|
|
94
91
|
}),
|
|
95
|
-
a("div",
|
|
96
|
-
a("div",
|
|
97
|
-
a("div",
|
|
98
|
-
|
|
92
|
+
a("div", z, [
|
|
93
|
+
a("div", R, [
|
|
94
|
+
a("div", q, [
|
|
95
|
+
r(e(b), {
|
|
99
96
|
as: "template",
|
|
100
97
|
enter: "transform transition ease-in-out duration-500 sm:duration-700",
|
|
101
98
|
"enter-from": "translate-x-full",
|
|
@@ -103,71 +100,83 @@ const R = {
|
|
|
103
100
|
leave: "transform transition ease-in-out duration-500 sm:duration-700",
|
|
104
101
|
"leave-from": "translate-x-0",
|
|
105
102
|
"leave-to": "translate-x-full",
|
|
106
|
-
onBeforeEnter:
|
|
107
|
-
onAfterLeave:
|
|
103
|
+
onBeforeEnter: l[3] || (l[3] = (i) => f.value = !0),
|
|
104
|
+
onAfterLeave: l[4] || (l[4] = (i) => (f.value = !1, o("drawer:closed")))
|
|
108
105
|
}, {
|
|
109
|
-
default:
|
|
110
|
-
|
|
111
|
-
class:
|
|
106
|
+
default: n(() => [
|
|
107
|
+
r(e(N), {
|
|
108
|
+
class: c(["pointer-events-auto w-screen", t.panelClass]),
|
|
112
109
|
"aria-busy": t.spinning,
|
|
113
|
-
"aria-describedby":
|
|
110
|
+
"aria-describedby": e(m)
|
|
114
111
|
}, {
|
|
115
|
-
default:
|
|
116
|
-
a("div",
|
|
112
|
+
default: n(() => [
|
|
113
|
+
a("div", F, [
|
|
117
114
|
a("header", {
|
|
118
|
-
class:
|
|
115
|
+
class: c([{ "sticky top-0 left-0 -w-full z-10": t.headerSticky }, "rvc-drawer-header"])
|
|
119
116
|
}, [
|
|
120
|
-
|
|
117
|
+
d(s.$slots, "header", {
|
|
121
118
|
title: t.title,
|
|
122
119
|
showClose: t.showClose
|
|
123
120
|
}, () => [
|
|
124
|
-
a("div",
|
|
125
|
-
|
|
126
|
-
id:
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
121
|
+
a("div", I, [
|
|
122
|
+
d(s.$slots, "title", {
|
|
123
|
+
id: e(u),
|
|
124
|
+
dialogTitle: e(p),
|
|
125
|
+
title: t.title
|
|
126
|
+
}, () => [
|
|
127
|
+
r(e(p), {
|
|
128
|
+
id: e(u),
|
|
129
|
+
class: "rvc-drawer-title"
|
|
130
|
+
}, {
|
|
131
|
+
default: n(() => [
|
|
132
|
+
B(L(t.title), 1)
|
|
133
|
+
]),
|
|
134
|
+
_: 1
|
|
135
|
+
}, 8, ["id"])
|
|
136
|
+
]),
|
|
137
|
+
t.showClose ? d(s.$slots, "close", {
|
|
138
|
+
key: 0,
|
|
139
|
+
icon: e(x),
|
|
140
|
+
emitClose: () => o("drawer:close")
|
|
141
|
+
}, () => [
|
|
142
|
+
a("div", M, [
|
|
143
|
+
a("button", {
|
|
144
|
+
type: "button",
|
|
145
|
+
class: "relative rvc-drawer-close",
|
|
146
|
+
"aria-label": "Close panel",
|
|
147
|
+
onClick: l[1] || (l[1] = (i) => o("drawer:close"))
|
|
148
|
+
}, [
|
|
149
|
+
r(e(x), {
|
|
150
|
+
class: "size-full",
|
|
151
|
+
"aria-hidden": "true"
|
|
152
|
+
})
|
|
153
|
+
])
|
|
145
154
|
])
|
|
146
|
-
])
|
|
155
|
+
]) : y("", !0)
|
|
147
156
|
])
|
|
148
157
|
])
|
|
149
158
|
], 2),
|
|
150
159
|
a("div", {
|
|
151
|
-
class:
|
|
160
|
+
class: c([t.scrolledDown ? "flex-col-reverse" : "flex-col", "flex min-h-0 flex-1 overflow-y-scroll"])
|
|
152
161
|
}, [
|
|
153
162
|
a("div", {
|
|
154
|
-
id:
|
|
163
|
+
id: e(m),
|
|
155
164
|
ref_key: "contentRef",
|
|
156
|
-
ref:
|
|
165
|
+
ref: $,
|
|
157
166
|
class: "relative flex-1 rvc-drawer-content"
|
|
158
167
|
}, [
|
|
159
|
-
|
|
160
|
-
], 8,
|
|
168
|
+
d(s.$slots, "default", { ready: e(f) })
|
|
169
|
+
], 8, j)
|
|
161
170
|
], 2),
|
|
162
|
-
a("footer",
|
|
163
|
-
|
|
164
|
-
|
|
171
|
+
a("footer", A, [
|
|
172
|
+
d(s.$slots, "footer", { loading: t.spinning }, () => [
|
|
173
|
+
r(g, {
|
|
165
174
|
type: "button",
|
|
166
175
|
label: t.cancelLabel,
|
|
167
176
|
color: "light",
|
|
168
|
-
onClick:
|
|
177
|
+
onClick: l[2] || (l[2] = (i) => o("drawer:close"))
|
|
169
178
|
}, null, 8, ["label"]),
|
|
170
|
-
|
|
179
|
+
e(k) ? (w(), v(g, {
|
|
171
180
|
key: 0,
|
|
172
181
|
type: "submit",
|
|
173
182
|
label: t.submitLabel,
|
|
@@ -195,6 +204,6 @@ const R = {
|
|
|
195
204
|
}
|
|
196
205
|
};
|
|
197
206
|
export {
|
|
198
|
-
|
|
199
|
-
|
|
207
|
+
O as Drawer,
|
|
208
|
+
W as Modal
|
|
200
209
|
};
|
|
@@ -4,7 +4,7 @@ import N from "@tiptap/extension-link";
|
|
|
4
4
|
import U from "@tiptap/starter-kit";
|
|
5
5
|
import { _ as q } from "../_shared/Tooltip-BKXJoJ1x.js";
|
|
6
6
|
import { _ as z } from "../_shared/FormInput-abFMz_J4.js";
|
|
7
|
-
import { _ as D } from "../_shared/Modal-
|
|
7
|
+
import { _ as D } from "../_shared/Modal-CsI5mZlJ.js";
|
|
8
8
|
function I(a, c) {
|
|
9
9
|
return s(), r("svg", {
|
|
10
10
|
xmlns: "http://www.w3.org/2000/svg",
|
package/package.json
CHANGED
|
@@ -1,193 +0,0 @@
|
|
|
1
|
-
import { ref as g, computed as f, createBlock as w, openBlock as C, unref as a, withCtx as r, createVNode as n, withModifiers as x, createElementVNode as o, normalizeClass as B, renderSlot as b, createElementBlock as E, createCommentVNode as D, createTextVNode as L, toDisplayString as h } from "vue";
|
|
2
|
-
import { TransitionRoot as F, Dialog as I, TransitionChild as $, DialogPanel as N, DialogTitle as R } from "@headlessui/vue";
|
|
3
|
-
import { _ as S } from "./ButtonBase-CQjlJ85F.js";
|
|
4
|
-
import { r as T } from "./XMarkIcon-90mcPzBs.js";
|
|
5
|
-
function V(t) {
|
|
6
|
-
const c = g(null), i = g(!1), y = f(() => t.as === "form"), v = f(() => `${t.id}-title`), d = f(() => `${t.id}-content`), u = f(() => {
|
|
7
|
-
var m;
|
|
8
|
-
return (m = c.value) == null ? void 0 : m.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
9
|
-
});
|
|
10
|
-
return {
|
|
11
|
-
contentRef: c,
|
|
12
|
-
ready: i,
|
|
13
|
-
isForm: y,
|
|
14
|
-
titleId: v,
|
|
15
|
-
descriptionId: d,
|
|
16
|
-
initialFocusElement: u
|
|
17
|
-
};
|
|
18
|
-
}
|
|
19
|
-
const q = {
|
|
20
|
-
role: "presentation",
|
|
21
|
-
class: "fixed inset-0 z-10 w-screen overflow-y-auto"
|
|
22
|
-
}, z = { class: "flex min-h-full justify-center p-4 items-center sm:p-0" }, j = { class: "rvc-modal-header" }, M = { class: "flex items-center justify-between" }, A = {
|
|
23
|
-
key: 0,
|
|
24
|
-
class: "ml-3 flex h-7 items-center"
|
|
25
|
-
}, P = ["id"], G = { class: "rvc-modal-footer" }, Q = {
|
|
26
|
-
__name: "Modal",
|
|
27
|
-
props: {
|
|
28
|
-
as: {
|
|
29
|
-
type: String,
|
|
30
|
-
default: "div"
|
|
31
|
-
},
|
|
32
|
-
id: {
|
|
33
|
-
type: String,
|
|
34
|
-
required: !0
|
|
35
|
-
},
|
|
36
|
-
title: {
|
|
37
|
-
type: String,
|
|
38
|
-
required: !0
|
|
39
|
-
},
|
|
40
|
-
showClose: {
|
|
41
|
-
type: Boolean
|
|
42
|
-
},
|
|
43
|
-
spinning: {
|
|
44
|
-
type: Boolean
|
|
45
|
-
},
|
|
46
|
-
submitLabel: {
|
|
47
|
-
type: String,
|
|
48
|
-
default: "Confirm"
|
|
49
|
-
},
|
|
50
|
-
cancelLabel: {
|
|
51
|
-
type: String,
|
|
52
|
-
default: "Cancel"
|
|
53
|
-
},
|
|
54
|
-
panelClass: {
|
|
55
|
-
type: String,
|
|
56
|
-
default: "sm:max-w-lg"
|
|
57
|
-
}
|
|
58
|
-
},
|
|
59
|
-
emits: ["modal:open", "modal:close", "modal:save", "modal:closed"],
|
|
60
|
-
setup(t, { emit: c }) {
|
|
61
|
-
const i = c, y = t, {
|
|
62
|
-
contentRef: v,
|
|
63
|
-
ready: d,
|
|
64
|
-
isForm: u,
|
|
65
|
-
titleId: m,
|
|
66
|
-
descriptionId: p,
|
|
67
|
-
initialFocusElement: k
|
|
68
|
-
} = V(y);
|
|
69
|
-
return (s, e) => (C(), w(a(F), { as: "template" }, {
|
|
70
|
-
default: r(() => [
|
|
71
|
-
n(a(I), {
|
|
72
|
-
as: t.as,
|
|
73
|
-
class: "rvc-modal",
|
|
74
|
-
static: "",
|
|
75
|
-
"aria-modal": "true",
|
|
76
|
-
role: "dialog",
|
|
77
|
-
"initial-focus": a(k),
|
|
78
|
-
"aria-labelledby": a(m),
|
|
79
|
-
onClose: e[6] || (e[6] = (l) => s.$emit("modal:close")),
|
|
80
|
-
onSubmit: e[7] || (e[7] = x((l) => i("modal:save", l), ["prevent"]))
|
|
81
|
-
}, {
|
|
82
|
-
default: r(() => [
|
|
83
|
-
n(a($), {
|
|
84
|
-
as: "template",
|
|
85
|
-
enter: "ease-out duration-300",
|
|
86
|
-
"enter-from": "opacity-0",
|
|
87
|
-
"enter-to": "opacity-100",
|
|
88
|
-
leave: "ease-in duration-200",
|
|
89
|
-
"leave-from": "opacity-100",
|
|
90
|
-
"leave-to": "opacity-0",
|
|
91
|
-
onBeforeEnter: e[0] || (e[0] = (l) => i("modal:open"))
|
|
92
|
-
}, {
|
|
93
|
-
default: r(() => e[8] || (e[8] = [
|
|
94
|
-
o("div", {
|
|
95
|
-
"aria-hidden": "true",
|
|
96
|
-
class: "fixed inset-0 transition-opacity rvc-modal-backdrop"
|
|
97
|
-
}, null, -1)
|
|
98
|
-
])),
|
|
99
|
-
_: 1
|
|
100
|
-
}),
|
|
101
|
-
o("div", q, [
|
|
102
|
-
o("div", z, [
|
|
103
|
-
n(a($), {
|
|
104
|
-
as: "template",
|
|
105
|
-
enter: "ease-out duration-300",
|
|
106
|
-
"enter-from": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
|
|
107
|
-
"enter-to": "opacity-100 translate-y-0 sm:scale-100",
|
|
108
|
-
leave: "ease-in duration-200",
|
|
109
|
-
"leave-from": "opacity-100 translate-y-0 sm:scale-100",
|
|
110
|
-
"leave-to": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
|
|
111
|
-
onBeforeEnter: e[4] || (e[4] = (l) => d.value = !0),
|
|
112
|
-
onAfterLeave: e[5] || (e[5] = (l) => (d.value = !1, i("modal:closed")))
|
|
113
|
-
}, {
|
|
114
|
-
default: r(() => [
|
|
115
|
-
n(a(N), {
|
|
116
|
-
class: B(["rvc-modal-panel", t.panelClass]),
|
|
117
|
-
"aria-busy": t.spinning,
|
|
118
|
-
"aria-describedby": a(p)
|
|
119
|
-
}, {
|
|
120
|
-
default: r(() => [
|
|
121
|
-
o("header", j, [
|
|
122
|
-
b(s.$slots, "header", { title: t.title }, () => [
|
|
123
|
-
o("div", M, [
|
|
124
|
-
n(a(R), {
|
|
125
|
-
id: a(m),
|
|
126
|
-
class: "rvc-modal-title"
|
|
127
|
-
}, {
|
|
128
|
-
default: r(() => [
|
|
129
|
-
L(h(t.title), 1)
|
|
130
|
-
]),
|
|
131
|
-
_: 1
|
|
132
|
-
}, 8, ["id"]),
|
|
133
|
-
t.showClose ? (C(), E("div", A, [
|
|
134
|
-
o("button", {
|
|
135
|
-
type: "button",
|
|
136
|
-
class: "relative rvc-modal-close",
|
|
137
|
-
"aria-label": "Close panel",
|
|
138
|
-
onClick: e[1] || (e[1] = (l) => i("modal:close"))
|
|
139
|
-
}, [
|
|
140
|
-
n(a(T), {
|
|
141
|
-
class: "size-full",
|
|
142
|
-
"aria-hidden": "true"
|
|
143
|
-
})
|
|
144
|
-
])
|
|
145
|
-
])) : D("", !0)
|
|
146
|
-
])
|
|
147
|
-
])
|
|
148
|
-
]),
|
|
149
|
-
o("div", {
|
|
150
|
-
id: a(p),
|
|
151
|
-
ref_key: "contentRef",
|
|
152
|
-
ref: v,
|
|
153
|
-
class: "rvc-modal-content"
|
|
154
|
-
}, [
|
|
155
|
-
b(s.$slots, "default", { ready: a(d) })
|
|
156
|
-
], 8, P),
|
|
157
|
-
o("footer", G, [
|
|
158
|
-
b(s.$slots, "footer", { loading: t.spinning }, () => [
|
|
159
|
-
n(S, {
|
|
160
|
-
type: a(u) ? "submit" : "button",
|
|
161
|
-
label: t.submitLabel,
|
|
162
|
-
spinning: t.spinning,
|
|
163
|
-
disabled: t.spinning,
|
|
164
|
-
onClick: e[2] || (e[2] = (l) => !a(u) && s.$emit("modal:save"))
|
|
165
|
-
}, null, 8, ["type", "label", "spinning", "disabled"]),
|
|
166
|
-
n(S, {
|
|
167
|
-
type: "button",
|
|
168
|
-
color: "light",
|
|
169
|
-
label: t.cancelLabel,
|
|
170
|
-
onClick: e[3] || (e[3] = (l) => s.$emit("modal:close"))
|
|
171
|
-
}, null, 8, ["label"])
|
|
172
|
-
])
|
|
173
|
-
])
|
|
174
|
-
]),
|
|
175
|
-
_: 3
|
|
176
|
-
}, 8, ["class", "aria-busy", "aria-describedby"])
|
|
177
|
-
]),
|
|
178
|
-
_: 3
|
|
179
|
-
})
|
|
180
|
-
])
|
|
181
|
-
])
|
|
182
|
-
]),
|
|
183
|
-
_: 3
|
|
184
|
-
}, 8, ["as", "initial-focus", "aria-labelledby"])
|
|
185
|
-
]),
|
|
186
|
-
_: 3
|
|
187
|
-
}));
|
|
188
|
-
}
|
|
189
|
-
};
|
|
190
|
-
export {
|
|
191
|
-
Q as _,
|
|
192
|
-
V as u
|
|
193
|
-
};
|