@bobbykim/manguito-theme 1.2.0 → 1.4.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.
- package/CHANGELOG.md +23 -0
- package/README.md +51 -17
- package/dist/composable.cjs +1 -1
- package/dist/composable.js +1 -1
- package/dist/core.cjs +2 -2
- package/dist/core.d.ts +32 -4
- package/dist/core.js +557 -527
- package/dist/directives.cjs +1 -1
- package/dist/directives.d.ts +13 -10
- package/dist/directives.js +47 -41
- package/dist/index-BjeE_nEZ.cjs +1 -0
- package/dist/index-CzXHE-4G.js +108 -0
- package/dist/mcl-theme-v4.css +7 -1
- package/dist/useModalScrollLock-ONrBOk5v.js +56 -0
- package/dist/useModalScrollLock-X2enYbzG.cjs +1 -0
- package/package.json +3 -2
- package/dist/index-CKV6der_.cjs +0 -1
- package/dist/index-r-cHwpQM.js +0 -101
- package/dist/useModalScrollLock-BUdEkX4m.cjs +0 -1
- package/dist/useModalScrollLock-CZPywtVE.js +0 -56
package/dist/core.js
CHANGED
|
@@ -1,204 +1,207 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode(".slide-prev-enter-active[data-v-e9caba8a]{transition:all .5s linear}.slide-prev-leave-active[data-v-e9caba8a]{transition:all .5s}.slide-prev-enter-from[data-v-e9caba8a]{transform:translate(-100%);opacity:0}.slide-prev-leave-to[data-v-e9caba8a]{transform:translate(100%);opacity:0}.slide-next-enter-active[data-v-e9caba8a]{transition:all .5s linear}.slide-next-leave-active[data-v-e9caba8a]{transition:all .5s}.slide-next-enter-from[data-v-e9caba8a]{transform:translate(100%);opacity:0}.slide-next-leave-to[data-v-e9caba8a]{transform:translate(-100%);opacity:0}.collapse-enter-active[data-v-
|
|
2
|
-
import { a as
|
|
3
|
-
import { defineComponent as $, openBlock as
|
|
4
|
-
import { useWindowSize as
|
|
5
|
-
import { p as
|
|
6
|
-
import { g as
|
|
7
|
-
import { v as
|
|
8
|
-
import { useFocusTrap as
|
|
9
|
-
const
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode(".slide-prev-enter-active[data-v-e9caba8a]{transition:all .5s linear}.slide-prev-leave-active[data-v-e9caba8a]{transition:all .5s}.slide-prev-enter-from[data-v-e9caba8a]{transform:translate(-100%);opacity:0}.slide-prev-leave-to[data-v-e9caba8a]{transform:translate(100%);opacity:0}.slide-next-enter-active[data-v-e9caba8a]{transition:all .5s linear}.slide-next-leave-active[data-v-e9caba8a]{transition:all .5s}.slide-next-enter-from[data-v-e9caba8a]{transform:translate(100%);opacity:0}.slide-next-leave-to[data-v-e9caba8a]{transform:translate(-100%);opacity:0}.collapse-enter-active[data-v-7c910f65],.collapse-leave-active[data-v-7c910f65]{transition-property:height,opacity;transition-duration:.5s;transition-timing-function:ease}.dropup-bottom[data-v-dd0b7b7b]{bottom:var(--button-height)}.dropdown-content-enter-active[data-v-dd0b7b7b],.dropdown-content-leave-active[data-v-dd0b7b7b]{transition:all .3s}.dropdown-content-enter-from[data-v-dd0b7b7b],.dropdown-content-leave-to[data-v-dd0b7b7b]{opacity:0;transform:translateY(-10px)}.hamburger__icon[data-v-5904b04a]:before,.hamburger__icon[data-v-5904b04a]:after{position:absolute;left:0;transition:all .3s linear}.hamburger__icon[data-v-5904b04a]:before{top:-.5rem}.hamburger__icon[data-v-5904b04a]:after{top:.5rem}.hamburger__button:focus .hamburger__icon[data-v-5904b04a],.hamburger__button:hover .hamburger__icon[data-v-5904b04a]{scale:1.05}.hamburger__checkbox:checked+.hamburger__icon[data-v-5904b04a]{background-color:transparent}.hamburger__checkbox:checked+.hamburger__icon[data-v-5904b04a]:before{top:0;transform:rotate(135deg)}.hamburger__checkbox:checked+.hamburger__icon[data-v-5904b04a]:after{top:0;transform:rotate(-135deg)}.collapse-enter-active[data-v-fb1e97dd]{transition:height .5s ease-in}.collapse-leave-active[data-v-fb1e97dd]{transition:height .5s ease-out}.header-desktop[data-v-a2d7d11b]{width:100%}@media screen and (min-width:1024px){.header-desktop[data-v-a2d7d11b]{width:var(--header-width)}}.slide-down-enter-active[data-v-a2d7d11b]{transition:transform .3s ease-in .2s,opacity .5s ease-in}.slide-down-leave-active[data-v-a2d7d11b]{transition:transform .5s ease-in,opacity .3s ease-in .2s}.slide-down-enter-from[data-v-a2d7d11b],.slide-down-leave-to[data-v-a2d7d11b]{opacity:0;transform:translateY(-100%)}.vertical-placement[data-v-9730e4f1]{top:var(--vertical-placement);left:50%;transform:translateY(calc(-1 * var(--vertical-placement))) translate(-50%)}.fade-enter-active[data-v-9730e4f1],.fade-leave-active[data-v-9730e4f1]{transition-property:opacity;transition-duration:.3s;transition-timing-function:linear}.fade-enter-from[data-v-9730e4f1],.fade-leave-to[data-v-9730e4f1]{opacity:0}.slide-down-enter-active[data-v-9730e4f1]{animation:slide-down-9730e4f1 .3s ease}.slide-down-leave-active[data-v-9730e4f1]{animation:slide-down-9730e4f1 reverse .3s ease}@keyframes slide-down-9730e4f1{0%{opacity:0;transform:translateY(-100%) translate(-50%)}to{opacity:1;transform:translateY(calc(-1 * var(--vertical-placement))) translate(-50%)}}.sidebar-body[data-v-658499cf]{width:100%}.sidebar-body-height[data-v-658499cf]{min-height:calc(100vh - var(--header-height) - var(--footer-height))}.fade-enter-active[data-v-658499cf],.fade-leave-active[data-v-658499cf]{transition-property:opacity;transition-duration:.3s;transition-timing-function:linear}.fade-enter-from[data-v-658499cf],.fade-leave-to[data-v-658499cf]{opacity:0}.sidebar-left-enter-active[data-v-658499cf],.sidebar-left-leave-active[data-v-658499cf],.sidebar-right-enter-active[data-v-658499cf],.sidebar-right-leave-active[data-v-658499cf]{transition-property:transform,opacity;transition-duration:.3s;transition-timing-function:linear}.sidebar-left-enter-from[data-v-658499cf],.sidebar-left-leave-to[data-v-658499cf]{transform:translate(-100%)}.sidebar-right-enter-from[data-v-658499cf],.sidebar-right-leave-to[data-v-658499cf]{transform:translate(100%)}@media screen and (min-width:768px){.sidebar-body[data-v-658499cf]{width:var(--sidebar-width)}.sidebar-left-enter-from[data-v-658499cf],.sidebar-left-leave-to[data-v-658499cf]{transform:translate(calc(-1 * var(--sidebar-width)))}.sidebar-right-enter-from[data-v-658499cf],.sidebar-right-leave-to[data-v-658499cf]{transform:translate(var(--sidebar-width))}}.container-hts[data-v-2d9322d9]{max-height:var(--container-hts, none)}.slide-prev-enter-active[data-v-2d9322d9]{transition:all .5s linear}.slide-prev-leave-active[data-v-2d9322d9]{transition:all .5s}.slide-prev-enter-from[data-v-2d9322d9]{transform:translate(-100%);opacity:0}.slide-prev-leave-to[data-v-2d9322d9]{transform:translate(100%);opacity:0}.slide-next-enter-active[data-v-2d9322d9]{transition:all .5s linear}.slide-next-leave-active[data-v-2d9322d9]{transition:all .5s}.slide-next-enter-from[data-v-2d9322d9]{transform:translate(100%);opacity:0}.slide-next-leave-to[data-v-2d9322d9]{transform:translate(-100%);opacity:0}")),document.head.appendChild(a)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
|
+
import { a as de, p as ue, b as fe, c as he, d as ve, e as ge, f as be, h as me, m as pe, i as ye, j as Ce, k as we, l as xe, n as ke, o as Ve, q as Be, r as Re, s as Oe, t as $e, u as Le, v as Ie, w as Te, x as De, y as Ae, z as Se, A as Ee, B as He, C as Ne, D as Ge, E as ze, F as Me, G as je, H as We, I as _e, J as Fe, K as Pe, L as Xe, M as Ye, N as Ue, O as Ke, P as qe, Q as Je, R as Qe, S as Ze, T as et, U as tt, V as ot, W as at, X as lt, Y as st, Z as rt, _ as nt, $ as it, a0 as ct, a1 as dt, a2 as ut, a3 as ft, a4 as ht, a5 as vt, g as y } from "./index-CDXrm85l.js";
|
|
3
|
+
import { defineComponent as $, openBlock as n, createElementBlock as c, renderSlot as C, ref as w, computed as R, watch as E, normalizeClass as b, createElementVNode as g, createCommentVNode as v, useSlots as M, toDisplayString as j, provide as Q, createVNode as D, Transition as A, withCtx as S, inject as Z, withDirectives as z, vShow as ee, useId as te, toRef as gt, unref as k, onMounted as F, withKeys as bt, createBlock as P, normalizeStyle as W, vModelCheckbox as mt, Teleport as pt, mergeProps as ae } from "vue";
|
|
4
|
+
import { useWindowSize as yt, useWindowScroll as Ct, useScrollLock as wt, useElementSize as xt } from "@vueuse/core";
|
|
5
|
+
import { p as kt, u as Vt, o as le, a as se } from "./useModalScrollLock-ONrBOk5v.js";
|
|
6
|
+
import { g as Bt } from "./getGlassmorphismClass-d_Ji96-u.js";
|
|
7
|
+
import { v as oe } from "./index-CzXHE-4G.js";
|
|
8
|
+
import { useFocusTrap as re } from "@vueuse/integrations/useFocusTrap";
|
|
9
|
+
const xo = (e, t) => {
|
|
10
10
|
switch (e) {
|
|
11
11
|
case "BGCOLOR":
|
|
12
|
-
return
|
|
12
|
+
return vt({ color: t });
|
|
13
13
|
case "HVBGCOLOR":
|
|
14
|
-
return
|
|
14
|
+
return ht({ color: t });
|
|
15
15
|
case "FCBGCOLOR":
|
|
16
|
-
return
|
|
16
|
+
return ft({ color: t });
|
|
17
17
|
case "BEFOREBG":
|
|
18
|
-
return
|
|
18
|
+
return ut({ color: t });
|
|
19
19
|
case "AFTERBG":
|
|
20
|
-
return
|
|
20
|
+
return dt({ color: t });
|
|
21
21
|
case "ACTIVEBG":
|
|
22
|
-
return
|
|
22
|
+
return ct({ color: t });
|
|
23
23
|
case "TEXTCOLOR":
|
|
24
|
-
return
|
|
24
|
+
return it({ color: t });
|
|
25
25
|
case "HVTEXTCOLOR":
|
|
26
|
-
return
|
|
26
|
+
return nt({ color: t });
|
|
27
27
|
case "FCTEXTCOLOR":
|
|
28
|
-
return
|
|
28
|
+
return rt({ color: t });
|
|
29
29
|
case "DISABLEDTEXTCOLOR":
|
|
30
|
-
return
|
|
30
|
+
return st({ color: t });
|
|
31
31
|
case "SVGFILL":
|
|
32
|
-
return
|
|
32
|
+
return lt({ color: t });
|
|
33
33
|
case "RINGCOLOR":
|
|
34
|
-
return
|
|
34
|
+
return at({ color: t });
|
|
35
35
|
case "FOCUSRING":
|
|
36
|
-
return
|
|
36
|
+
return ot({ color: t });
|
|
37
37
|
case "ACTIVERING":
|
|
38
|
-
return
|
|
38
|
+
return tt({ color: t });
|
|
39
39
|
case "OFFSETRING":
|
|
40
|
-
return
|
|
40
|
+
return et({ color: t });
|
|
41
41
|
case "OUTLINE":
|
|
42
|
-
return
|
|
42
|
+
return Ze({ color: t });
|
|
43
43
|
case "FOCUSOUTLINE":
|
|
44
|
-
return
|
|
44
|
+
return Qe({ color: t });
|
|
45
45
|
case "ACTIVEOUTLINE":
|
|
46
|
-
return
|
|
46
|
+
return Je({ color: t });
|
|
47
47
|
case "BTNCOLOR":
|
|
48
|
-
return
|
|
48
|
+
return qe({ color: t });
|
|
49
49
|
case "LISTCOLOR":
|
|
50
|
-
return
|
|
50
|
+
return Ke({ color: t });
|
|
51
51
|
case "BORDER":
|
|
52
|
-
return
|
|
52
|
+
return Ue({ color: t });
|
|
53
53
|
case "BORDERX":
|
|
54
|
-
return
|
|
54
|
+
return Ye({ color: t });
|
|
55
55
|
case "BORDERY":
|
|
56
|
-
return
|
|
56
|
+
return Xe({ color: t });
|
|
57
57
|
case "BORDERT":
|
|
58
|
-
return
|
|
58
|
+
return Pe({ color: t });
|
|
59
59
|
case "BORDERB":
|
|
60
|
-
return
|
|
60
|
+
return Fe({ color: t });
|
|
61
61
|
case "BORDERL":
|
|
62
|
-
return
|
|
62
|
+
return _e({ color: t });
|
|
63
63
|
case "BORDERR":
|
|
64
|
-
return
|
|
64
|
+
return We({ color: t });
|
|
65
65
|
case "H1":
|
|
66
|
-
return
|
|
66
|
+
return je({ size: t });
|
|
67
67
|
case "H2":
|
|
68
|
-
return
|
|
68
|
+
return Me({ size: t });
|
|
69
69
|
case "H3":
|
|
70
|
-
return
|
|
70
|
+
return ze({ size: t });
|
|
71
71
|
case "H4":
|
|
72
|
-
return
|
|
72
|
+
return Ge({ size: t });
|
|
73
73
|
case "BODYTEXT":
|
|
74
|
-
return
|
|
74
|
+
return Ne({ size: t });
|
|
75
75
|
case "FONTWEIGHT":
|
|
76
|
-
return
|
|
76
|
+
return He({ weight: t });
|
|
77
77
|
case "TEXTALIGN":
|
|
78
|
-
return
|
|
78
|
+
return Ee({ align: t });
|
|
79
79
|
case "BORDERW":
|
|
80
|
-
return
|
|
80
|
+
return Se({ width: t });
|
|
81
81
|
case "BORDERXW":
|
|
82
|
-
return
|
|
82
|
+
return Ae({ width: t });
|
|
83
83
|
case "BORDERYW":
|
|
84
|
-
return
|
|
84
|
+
return De({ width: t });
|
|
85
85
|
case "BORDERTW":
|
|
86
86
|
return Te({ width: t });
|
|
87
87
|
case "BORDERBW":
|
|
88
|
-
return
|
|
88
|
+
return Ie({ width: t });
|
|
89
89
|
case "BORDERLW":
|
|
90
|
-
return
|
|
90
|
+
return Le({ width: t });
|
|
91
91
|
case "BORDERRW":
|
|
92
|
-
return
|
|
92
|
+
return $e({ width: t });
|
|
93
93
|
case "OPACITY":
|
|
94
|
-
return
|
|
94
|
+
return Oe({ opacity: t });
|
|
95
95
|
case "BGOPACITY":
|
|
96
|
-
return
|
|
96
|
+
return Re({ opacity: t });
|
|
97
97
|
case "OUTLINEOPACITY":
|
|
98
|
-
return
|
|
98
|
+
return Be({ opacity: t });
|
|
99
99
|
case "MARGIN":
|
|
100
|
-
return
|
|
100
|
+
return Ve({ spacing: t });
|
|
101
101
|
case "MARGINX":
|
|
102
|
-
return
|
|
102
|
+
return ke({ spacing: t });
|
|
103
103
|
case "MARGINY":
|
|
104
|
-
return
|
|
104
|
+
return xe({ spacing: t });
|
|
105
105
|
case "MARGINT":
|
|
106
|
-
return
|
|
106
|
+
return we({ spacing: t });
|
|
107
107
|
case "MARGINB":
|
|
108
|
-
return
|
|
108
|
+
return Ce({ spacing: t });
|
|
109
109
|
case "MARGINL":
|
|
110
|
-
return
|
|
110
|
+
return ye({ spacing: t });
|
|
111
111
|
case "MARGINR":
|
|
112
|
-
return
|
|
112
|
+
return pe({ spacing: t });
|
|
113
113
|
case "PADDING":
|
|
114
|
-
return
|
|
114
|
+
return me({ spacing: t });
|
|
115
115
|
case "PADDINGX":
|
|
116
|
-
return
|
|
116
|
+
return be({ spacing: t });
|
|
117
117
|
case "PADDINGY":
|
|
118
|
-
return
|
|
118
|
+
return ge({ spacing: t });
|
|
119
119
|
case "PADDINGT":
|
|
120
|
-
return
|
|
120
|
+
return ve({ spacing: t });
|
|
121
121
|
case "PADDINGB":
|
|
122
|
-
return
|
|
122
|
+
return he({ spacing: t });
|
|
123
123
|
case "PADDINGL":
|
|
124
|
-
return
|
|
124
|
+
return fe({ spacing: t });
|
|
125
125
|
case "PADDINGR":
|
|
126
|
-
return
|
|
126
|
+
return ue({ spacing: t });
|
|
127
127
|
case "GAP":
|
|
128
|
-
return
|
|
128
|
+
return de({ spacing: t });
|
|
129
129
|
default:
|
|
130
130
|
return "";
|
|
131
131
|
}
|
|
132
|
-
},
|
|
132
|
+
}, ko = /* @__PURE__ */ $({
|
|
133
133
|
__name: "AccordionGroup",
|
|
134
134
|
setup(e) {
|
|
135
|
-
return
|
|
135
|
+
return kt(), (t, u) => (n(), c("div", null, [
|
|
136
136
|
C(t.$slots, "default")
|
|
137
137
|
]));
|
|
138
138
|
}
|
|
139
|
-
}),
|
|
139
|
+
}), Rt = { class: "flex w-full justify-between gap-2xs" }, Ot = { class: "w-full" }, $t = ["aria-label"], Vo = /* @__PURE__ */ $({
|
|
140
140
|
__name: "Alert",
|
|
141
141
|
props: {
|
|
142
142
|
color: { default: "danger" },
|
|
143
143
|
rounded: { type: Boolean, default: !0 },
|
|
144
144
|
shadow: { type: Boolean, default: !0 },
|
|
145
145
|
show: { type: Boolean, default: !1 },
|
|
146
|
-
dismissible: { type: Boolean, default: !1 }
|
|
146
|
+
dismissible: { type: Boolean, default: !1 },
|
|
147
|
+
dismissLabel: { default: "Dismiss" }
|
|
147
148
|
},
|
|
148
149
|
emits: ["close"],
|
|
149
150
|
setup(e, { expose: t, emit: u }) {
|
|
150
|
-
const
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
}), n = (r) => {
|
|
156
|
-
d.value = !1, s("close", r);
|
|
151
|
+
const s = e, o = u, d = w(s.show), l = R(() => {
|
|
152
|
+
const { color: r, rounded: f, shadow: p } = s, h = [y.bgColorVariant({ color: r })];
|
|
153
|
+
return f && h.push("rounded-md"), p && h.push("drop-shadow-md"), h.join(" ");
|
|
154
|
+
}), i = (r) => {
|
|
155
|
+
d.value = !1, o("close", r);
|
|
157
156
|
}, a = () => {
|
|
158
157
|
d.value = !1;
|
|
159
158
|
};
|
|
160
|
-
return
|
|
161
|
-
() =>
|
|
159
|
+
return E(
|
|
160
|
+
() => s.show,
|
|
162
161
|
(r) => {
|
|
163
162
|
d.value = r;
|
|
164
163
|
}
|
|
165
164
|
), t({
|
|
166
165
|
close: a
|
|
167
|
-
}), (r, f) => d.value ? (
|
|
166
|
+
}), (r, f) => d.value ? (n(), c("div", {
|
|
168
167
|
key: 0,
|
|
169
168
|
role: "alert",
|
|
170
169
|
"aria-live": "polite",
|
|
171
170
|
"aria-atomic": "true",
|
|
172
|
-
class:
|
|
171
|
+
class: b(["relative px-[1.25rem] py-[0.75rem]", [l.value]])
|
|
173
172
|
}, [
|
|
174
|
-
|
|
175
|
-
|
|
173
|
+
g("div", Rt, [
|
|
174
|
+
g("div", Ot, [
|
|
176
175
|
C(r.$slots, "default")
|
|
177
176
|
]),
|
|
178
|
-
e.dismissible ? (
|
|
177
|
+
e.dismissible ? (n(), c("button", {
|
|
179
178
|
key: 0,
|
|
180
|
-
|
|
179
|
+
type: "button",
|
|
180
|
+
"aria-label": e.dismissLabel,
|
|
181
|
+
onClick: i,
|
|
181
182
|
class: "flex items-center opacity-60 transition-opacity duration-300 ease-linear hover:opacity-40"
|
|
182
183
|
}, [...f[0] || (f[0] = [
|
|
183
|
-
|
|
184
|
+
g("svg", {
|
|
184
185
|
xmlns: "http://www.w3.org/2000/svg",
|
|
185
186
|
viewBox: "0 0 384 512",
|
|
186
187
|
fill: "currentColor",
|
|
188
|
+
"aria-hidden": "true",
|
|
189
|
+
focusable: "false",
|
|
187
190
|
class: "h-xs"
|
|
188
191
|
}, [
|
|
189
|
-
|
|
192
|
+
g("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" })
|
|
190
193
|
], -1)
|
|
191
|
-
])])) : v("", !0)
|
|
194
|
+
])], 8, $t)) : v("", !0)
|
|
192
195
|
])
|
|
193
196
|
], 2)) : v("", !0);
|
|
194
197
|
}
|
|
195
|
-
}),
|
|
198
|
+
}), Lt = ["src", "alt"], It = {
|
|
196
199
|
key: 2,
|
|
197
200
|
class: "flex-1 px-xs pt-xs pb-2xs"
|
|
198
|
-
},
|
|
201
|
+
}, Tt = {
|
|
199
202
|
key: 3,
|
|
200
203
|
class: "flex-1"
|
|
201
|
-
},
|
|
204
|
+
}, Bo = /* @__PURE__ */ $({
|
|
202
205
|
__name: "Card",
|
|
203
206
|
props: {
|
|
204
207
|
variant: { default: "light-1" },
|
|
@@ -221,80 +224,80 @@ const yo = (e, t) => {
|
|
|
221
224
|
cardClass: { default: "" }
|
|
222
225
|
},
|
|
223
226
|
setup(e) {
|
|
224
|
-
const t = e, u =
|
|
227
|
+
const t = e, u = M(), s = R(() => {
|
|
225
228
|
const {
|
|
226
|
-
variant:
|
|
229
|
+
variant: i,
|
|
227
230
|
rounded: a,
|
|
228
231
|
shadow: r,
|
|
229
232
|
border: f,
|
|
230
233
|
borderVariant: p,
|
|
231
|
-
glass:
|
|
232
|
-
glassBlur:
|
|
234
|
+
glass: h,
|
|
235
|
+
glassBlur: m,
|
|
233
236
|
glassOpacity: L
|
|
234
237
|
} = t;
|
|
235
238
|
return [
|
|
236
|
-
y.bgColorVariant({ color:
|
|
239
|
+
y.bgColorVariant({ color: i }),
|
|
237
240
|
a ? "rounded-lg" : "rounded-sm",
|
|
238
241
|
r && "drop-shadow-md",
|
|
239
242
|
f && "border",
|
|
240
243
|
f && y.borderColorVariant({ color: p }),
|
|
241
|
-
|
|
244
|
+
h && Bt(i, m, L)
|
|
242
245
|
].filter(Boolean).join(" ");
|
|
243
|
-
}),
|
|
244
|
-
const { titleVariant:
|
|
246
|
+
}), o = R(() => {
|
|
247
|
+
const { titleVariant: i, titleSize: a } = t;
|
|
245
248
|
return [
|
|
246
|
-
y.textColorVariant({ color:
|
|
249
|
+
y.textColorVariant({ color: i }),
|
|
247
250
|
y.h3Variant({ size: a })
|
|
248
251
|
].join(" ");
|
|
249
|
-
}), d =
|
|
250
|
-
const { border:
|
|
252
|
+
}), d = R(() => {
|
|
253
|
+
const { border: i, borderVariant: a, titleVariant: r } = t;
|
|
251
254
|
return [
|
|
252
255
|
y.textColorVariant({ color: r }),
|
|
253
|
-
|
|
256
|
+
i && "border-b",
|
|
254
257
|
y.borderColorVariant({ color: a })
|
|
255
258
|
].filter(Boolean).join(" ");
|
|
256
|
-
}),
|
|
257
|
-
const { border:
|
|
259
|
+
}), l = R(() => {
|
|
260
|
+
const { border: i, borderVariant: a } = t;
|
|
258
261
|
return [
|
|
259
|
-
|
|
260
|
-
|
|
262
|
+
i && "border-t",
|
|
263
|
+
i && y.borderColorVariant({ color: a })
|
|
261
264
|
].filter(Boolean).join(" ");
|
|
262
265
|
});
|
|
263
|
-
return (
|
|
264
|
-
class:
|
|
266
|
+
return (i, a) => (n(), c("div", {
|
|
267
|
+
class: b(["flex h-full w-full flex-col overflow-hidden", [s.value, e.cardClass]])
|
|
265
268
|
}, [
|
|
266
|
-
e.header || u.header ? C(
|
|
267
|
-
|
|
268
|
-
class:
|
|
269
|
+
e.header || u.header ? C(i.$slots, "header", { key: 0 }, () => [
|
|
270
|
+
g("div", {
|
|
271
|
+
class: b([[d.value], "px-xs py-2xs font-bold"])
|
|
269
272
|
}, [
|
|
270
|
-
|
|
273
|
+
g("p", null, j(e.header), 1)
|
|
271
274
|
], 2)
|
|
272
275
|
]) : v("", !0),
|
|
273
|
-
e.imageSrc && !e.noImage ? (
|
|
276
|
+
e.imageSrc && !e.noImage ? (n(), c("img", {
|
|
274
277
|
key: 1,
|
|
275
278
|
src: e.imageSrc,
|
|
276
279
|
alt: e.imageAlt,
|
|
277
280
|
class: "aspect-video min-w-full object-cover object-top"
|
|
278
|
-
}, null, 8,
|
|
279
|
-
e.noBody ? v("", !0) : (
|
|
280
|
-
|
|
281
|
-
class:
|
|
281
|
+
}, null, 8, Lt)) : v("", !0),
|
|
282
|
+
e.noBody ? v("", !0) : (n(), c("div", It, [
|
|
283
|
+
g("h3", {
|
|
284
|
+
class: b([[o.value], "mb-xs"])
|
|
282
285
|
}, j(e.title), 3),
|
|
283
|
-
u.body ? C(
|
|
286
|
+
u.body ? C(i.$slots, "body", { key: 0 }) : v("", !0)
|
|
284
287
|
])),
|
|
285
|
-
e.noBody && u.default ? (
|
|
286
|
-
C(
|
|
288
|
+
e.noBody && u.default ? (n(), c("div", Tt, [
|
|
289
|
+
C(i.$slots, "default")
|
|
287
290
|
])) : v("", !0),
|
|
288
|
-
e.footer || u.footer ? C(
|
|
289
|
-
|
|
290
|
-
class:
|
|
291
|
+
e.footer || u.footer ? C(i.$slots, "footer", { key: 4 }, () => [
|
|
292
|
+
g("div", {
|
|
293
|
+
class: b(["px-xs py-2xs", [l.value]])
|
|
291
294
|
}, [
|
|
292
|
-
|
|
295
|
+
g("p", null, j(e.footer), 1)
|
|
293
296
|
], 2)
|
|
294
297
|
]) : v("", !0)
|
|
295
298
|
], 2));
|
|
296
299
|
}
|
|
297
|
-
}),
|
|
300
|
+
}), ne = /* @__PURE__ */ Symbol(), Dt = /* @__PURE__ */ $({
|
|
298
301
|
__name: "CarouselContainer",
|
|
299
302
|
props: {
|
|
300
303
|
bodyClass: { default: "" },
|
|
@@ -304,82 +307,82 @@ const yo = (e, t) => {
|
|
|
304
307
|
loop: { type: Boolean, default: !1 }
|
|
305
308
|
},
|
|
306
309
|
setup(e, { expose: t }) {
|
|
307
|
-
const u = e,
|
|
308
|
-
d.value.push(
|
|
309
|
-
}, r = (
|
|
310
|
-
|
|
310
|
+
const u = e, s = M(), o = w(0), d = w([]), l = w(0), i = w("slide-next"), a = (h) => {
|
|
311
|
+
d.value.push(h), l.value = [...new Set(d.value)].length;
|
|
312
|
+
}, r = (h) => {
|
|
313
|
+
o.value = h;
|
|
311
314
|
};
|
|
312
|
-
|
|
313
|
-
activeIdx:
|
|
315
|
+
Q(ne, {
|
|
316
|
+
activeIdx: o,
|
|
314
317
|
setSlide: a
|
|
315
318
|
});
|
|
316
319
|
const f = () => {
|
|
317
|
-
const { loop:
|
|
318
|
-
|
|
320
|
+
const { loop: h } = u;
|
|
321
|
+
h && o.value === l.value - 1 ? o.value = 0 : o.value < l.value - 1 && (o.value = o.value + 1);
|
|
319
322
|
}, p = () => {
|
|
320
|
-
const { loop:
|
|
321
|
-
|
|
323
|
+
const { loop: h } = u;
|
|
324
|
+
h && o.value === 0 ? o.value = l.value - 1 : o.value > 0 && (o.value = o.value - 1);
|
|
322
325
|
};
|
|
323
|
-
return
|
|
324
|
-
() =>
|
|
325
|
-
(
|
|
326
|
-
|
|
326
|
+
return E(
|
|
327
|
+
() => o.value,
|
|
328
|
+
(h, m) => {
|
|
329
|
+
h > m || h === 0 && m === l.value - 1 ? i.value = "slide-next" : i.value = "slide-prev";
|
|
327
330
|
}
|
|
328
331
|
), t({
|
|
329
|
-
numberOfSlides:
|
|
332
|
+
numberOfSlides: l,
|
|
330
333
|
prev: p,
|
|
331
334
|
next: f,
|
|
332
335
|
setActive: r
|
|
333
|
-
}), (
|
|
334
|
-
class:
|
|
336
|
+
}), (h, m) => (n(), c("div", {
|
|
337
|
+
class: b([e.bodyClass, "relative overflow-x-hidden"])
|
|
335
338
|
}, [
|
|
336
|
-
|
|
339
|
+
s["controller-top"] ? (n(), c("div", {
|
|
337
340
|
key: 0,
|
|
338
|
-
class:
|
|
341
|
+
class: b(e.controllerTopClass)
|
|
339
342
|
}, [
|
|
340
|
-
C(
|
|
343
|
+
C(h.$slots, "controller-top", {
|
|
341
344
|
next: f,
|
|
342
345
|
prev: p,
|
|
343
346
|
setActive: r,
|
|
344
|
-
activeSlide:
|
|
345
|
-
numberOfSlides:
|
|
347
|
+
activeSlide: o.value,
|
|
348
|
+
numberOfSlides: l.value
|
|
346
349
|
}, void 0, !0)
|
|
347
350
|
], 2)) : v("", !0),
|
|
348
|
-
|
|
349
|
-
class:
|
|
351
|
+
g("div", {
|
|
352
|
+
class: b(["grid grid-cols-1 grid-rows-1", e.contentContainerClass])
|
|
350
353
|
}, [
|
|
351
|
-
A
|
|
352
|
-
default:
|
|
353
|
-
(
|
|
354
|
-
key:
|
|
354
|
+
D(A, { name: i.value }, {
|
|
355
|
+
default: S(() => [
|
|
356
|
+
(n(), c("div", {
|
|
357
|
+
key: o.value,
|
|
355
358
|
class: "col-start-1 col-end-1 row-start-1 row-end-1"
|
|
356
359
|
}, [
|
|
357
|
-
C(
|
|
360
|
+
C(h.$slots, "content", {}, void 0, !0)
|
|
358
361
|
]))
|
|
359
362
|
]),
|
|
360
363
|
_: 3
|
|
361
364
|
}, 8, ["name"])
|
|
362
365
|
], 2),
|
|
363
|
-
|
|
366
|
+
s["controller-bottom"] ? (n(), c("div", {
|
|
364
367
|
key: 1,
|
|
365
|
-
class:
|
|
368
|
+
class: b(e.controllerBottomClass)
|
|
366
369
|
}, [
|
|
367
|
-
C(
|
|
370
|
+
C(h.$slots, "controller-bottom", {
|
|
368
371
|
next: f,
|
|
369
372
|
prev: p,
|
|
370
373
|
setActive: r,
|
|
371
|
-
activeSlide:
|
|
372
|
-
numberOfSlides:
|
|
374
|
+
activeSlide: o.value,
|
|
375
|
+
numberOfSlides: l.value
|
|
373
376
|
}, void 0, !0)
|
|
374
377
|
], 2)) : v("", !0)
|
|
375
378
|
], 2));
|
|
376
379
|
}
|
|
377
380
|
}), H = (e, t) => {
|
|
378
381
|
const u = e.__vccOpts || e;
|
|
379
|
-
for (const [
|
|
380
|
-
u[
|
|
382
|
+
for (const [s, o] of t)
|
|
383
|
+
u[s] = o;
|
|
381
384
|
return u;
|
|
382
|
-
},
|
|
385
|
+
}, Ro = /* @__PURE__ */ H(Dt, [["__scopeId", "data-v-e9caba8a"]]), At = ["id"], Oo = /* @__PURE__ */ $({
|
|
383
386
|
__name: "CarouselContent",
|
|
384
387
|
props: {
|
|
385
388
|
slideNumber: {},
|
|
@@ -387,28 +390,27 @@ const yo = (e, t) => {
|
|
|
387
390
|
slideClass: { default: "" }
|
|
388
391
|
},
|
|
389
392
|
setup(e) {
|
|
390
|
-
const t = e, { activeIdx: u, setSlide:
|
|
391
|
-
|
|
392
|
-
)
|
|
393
|
-
|
|
394
|
-
const
|
|
395
|
-
const { slideNumber:
|
|
396
|
-
return u.value ===
|
|
393
|
+
const t = e, { activeIdx: u, setSlide: s } = Z(
|
|
394
|
+
ne
|
|
395
|
+
);
|
|
396
|
+
s(t.slideNumber);
|
|
397
|
+
const o = R(() => {
|
|
398
|
+
const { slideNumber: d } = t;
|
|
399
|
+
return u.value === d;
|
|
397
400
|
});
|
|
398
|
-
return (
|
|
399
|
-
|
|
400
|
-
ref: s,
|
|
401
|
+
return (d, l) => z((n(), c("div", {
|
|
402
|
+
ref: "slideRef",
|
|
401
403
|
id: e.id,
|
|
402
|
-
class:
|
|
404
|
+
class: b([e.slideClass, "w-full"]),
|
|
403
405
|
role: "tabpanel",
|
|
404
406
|
tabindex: "-1"
|
|
405
407
|
}, [
|
|
406
|
-
C(
|
|
407
|
-
], 10,
|
|
408
|
-
[
|
|
408
|
+
C(d.$slots, "default")
|
|
409
|
+
], 10, At)), [
|
|
410
|
+
[ee, o.value]
|
|
409
411
|
]);
|
|
410
412
|
}
|
|
411
|
-
}),
|
|
413
|
+
}), St = ["id"], Et = /* @__PURE__ */ $({
|
|
412
414
|
__name: "Collapse",
|
|
413
415
|
props: {
|
|
414
416
|
id: {},
|
|
@@ -417,174 +419,173 @@ const yo = (e, t) => {
|
|
|
417
419
|
},
|
|
418
420
|
emits: ["open", "close"],
|
|
419
421
|
setup(e, { expose: t, emit: u }) {
|
|
420
|
-
const
|
|
421
|
-
T();
|
|
422
|
-
const s = u, d = c.id ?? ee(), { isOpen: o, toggle: n, open: a, close: r } = xt(
|
|
422
|
+
const s = e, o = u, d = s.id ?? te(), { isOpen: l, toggle: i, open: a, close: r } = Vt(
|
|
423
423
|
d,
|
|
424
|
-
|
|
425
|
-
), f = (
|
|
426
|
-
|
|
427
|
-
const L = getComputedStyle(
|
|
428
|
-
|
|
429
|
-
}, p = (
|
|
430
|
-
|
|
431
|
-
},
|
|
432
|
-
|
|
424
|
+
gt(s, "visible")
|
|
425
|
+
), f = (m) => {
|
|
426
|
+
m.style.height = "auto", m.style.opacity = "0";
|
|
427
|
+
const L = getComputedStyle(m).height;
|
|
428
|
+
m.style.height = "0px", m.offsetHeight, m.style.height = L, m.style.opacity = "1";
|
|
429
|
+
}, p = (m) => {
|
|
430
|
+
m.style.height = "auto", m.style.opacity = "1";
|
|
431
|
+
}, h = (m) => {
|
|
432
|
+
m.style.height = getComputedStyle(m).height, m.offsetHeight, m.style.height = "0px", m.style.opacity = "0";
|
|
433
433
|
};
|
|
434
|
-
return
|
|
435
|
-
|
|
434
|
+
return E(l, (m) => {
|
|
435
|
+
m ? o("open", !0) : o("close", !1);
|
|
436
436
|
}), t({
|
|
437
|
-
|
|
437
|
+
isOpen: l,
|
|
438
|
+
toggle: i,
|
|
438
439
|
open: a,
|
|
439
440
|
close: r
|
|
440
|
-
}), (
|
|
441
|
-
A
|
|
441
|
+
}), (m, L) => (n(), c("div", { id: k(d) }, [
|
|
442
|
+
D(A, {
|
|
442
443
|
name: "collapse",
|
|
443
444
|
tag: "div",
|
|
444
445
|
onEnter: f,
|
|
445
446
|
onAfterEnter: p,
|
|
446
|
-
onLeave:
|
|
447
|
+
onLeave: h,
|
|
447
448
|
class: "overflow-y-clip"
|
|
448
449
|
}, {
|
|
449
|
-
default:
|
|
450
|
-
z(
|
|
451
|
-
|
|
452
|
-
class:
|
|
450
|
+
default: S(() => [
|
|
451
|
+
z(g("div", null, [
|
|
452
|
+
g("div", {
|
|
453
|
+
class: b(e.customClass)
|
|
453
454
|
}, [
|
|
454
|
-
C(
|
|
455
|
+
C(m.$slots, "default", {}, void 0, !0)
|
|
455
456
|
], 2)
|
|
456
457
|
], 512), [
|
|
457
|
-
[
|
|
458
|
+
[ee, k(l)]
|
|
458
459
|
])
|
|
459
460
|
]),
|
|
460
461
|
_: 3
|
|
461
462
|
})
|
|
462
|
-
], 8,
|
|
463
|
+
], 8, St));
|
|
463
464
|
}
|
|
464
|
-
}),
|
|
465
|
+
}), $o = /* @__PURE__ */ H(Et, [["__scopeId", "data-v-7c910f65"]]), ie = /* @__PURE__ */ Symbol(), Lo = /* @__PURE__ */ $({
|
|
465
466
|
__name: "DropdownContainer",
|
|
466
467
|
emits: ["click-outside", "toggle"],
|
|
467
468
|
setup(e, { emit: t }) {
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
active: s,
|
|
469
|
+
const u = t, s = w(), o = w(!1), d = w(0);
|
|
470
|
+
Q(ie, {
|
|
471
|
+
active: o,
|
|
472
472
|
buttonHeight: d,
|
|
473
473
|
closeDropdown: () => {
|
|
474
|
-
|
|
474
|
+
o.value = !1;
|
|
475
475
|
}
|
|
476
476
|
});
|
|
477
|
-
const
|
|
478
|
-
|
|
477
|
+
const i = (f) => {
|
|
478
|
+
o.value = !o.value, u("toggle", f);
|
|
479
479
|
}, a = (f) => {
|
|
480
|
-
|
|
480
|
+
o.value = !1, u("click-outside", f);
|
|
481
481
|
}, r = () => {
|
|
482
|
-
|
|
482
|
+
o.value = !1;
|
|
483
483
|
};
|
|
484
484
|
return F(() => {
|
|
485
|
-
d.value =
|
|
486
|
-
}), (f, p) => z((
|
|
485
|
+
d.value = s.value.scrollHeight;
|
|
486
|
+
}), (f, p) => z((n(), c("div", {
|
|
487
487
|
class: "relative",
|
|
488
488
|
ref_key: "dropdownTarget",
|
|
489
|
-
ref:
|
|
490
|
-
onKeyup:
|
|
489
|
+
ref: s,
|
|
490
|
+
onKeyup: bt(r, ["esc"])
|
|
491
491
|
}, [
|
|
492
492
|
C(f.$slots, "toggler", {
|
|
493
|
-
toggle:
|
|
494
|
-
dropdownState:
|
|
493
|
+
toggle: i,
|
|
494
|
+
dropdownState: o.value
|
|
495
495
|
}),
|
|
496
496
|
C(f.$slots, "default")
|
|
497
497
|
], 32)), [
|
|
498
|
-
[
|
|
498
|
+
[k(oe), a]
|
|
499
499
|
]);
|
|
500
500
|
}
|
|
501
|
-
}),
|
|
501
|
+
}), Ht = /* @__PURE__ */ $({
|
|
502
502
|
__name: "DropdownContent",
|
|
503
503
|
props: {
|
|
504
504
|
customClass: { default: "" }
|
|
505
505
|
},
|
|
506
506
|
setup(e) {
|
|
507
|
-
const { height: t } =
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
), o = B(() => ({ "--button-height": `${s}px` })), n = B(() => {
|
|
512
|
-
if (!(!c || !u.value) && t.value - u.value.getBoundingClientRect().bottom < 0)
|
|
507
|
+
const { height: t } = yt(), u = w(), { active: s, buttonHeight: o, closeDropdown: d } = Z(
|
|
508
|
+
ie
|
|
509
|
+
), l = R(() => ({ "--button-height": `${o}px` })), i = R(() => {
|
|
510
|
+
if (!(!s || !u.value) && t.value - u.value.getBoundingClientRect().bottom < 0)
|
|
513
511
|
return "dropup-bottom";
|
|
514
512
|
});
|
|
515
|
-
return (a, r) => (
|
|
516
|
-
default:
|
|
517
|
-
|
|
513
|
+
return (a, r) => (n(), P(A, { name: "dropdown-content" }, {
|
|
514
|
+
default: S(() => [
|
|
515
|
+
k(s) ? (n(), c("div", {
|
|
518
516
|
key: 0,
|
|
519
517
|
ref_key: "contentRef",
|
|
520
518
|
ref: u,
|
|
521
|
-
class:
|
|
522
|
-
style: W(
|
|
519
|
+
class: b(["absolute my-2xs w-max max-w-[14rem] overflow-hidden", [i.value, e.customClass]]),
|
|
520
|
+
style: W(l.value)
|
|
523
521
|
}, [
|
|
524
|
-
C(a.$slots, "default", { itemClick:
|
|
522
|
+
C(a.$slots, "default", { itemClick: k(d) }, void 0, !0)
|
|
525
523
|
], 6)) : v("", !0)
|
|
526
524
|
]),
|
|
527
525
|
_: 3
|
|
528
526
|
}));
|
|
529
527
|
}
|
|
530
|
-
}),
|
|
528
|
+
}), Io = /* @__PURE__ */ H(Ht, [["__scopeId", "data-v-dd0b7b7b"]]), Nt = ["aria-label", "aria-expanded"], Gt = /* @__PURE__ */ $({
|
|
531
529
|
__name: "NavDrawer",
|
|
532
530
|
props: {
|
|
533
531
|
color: { default: "dark-2" },
|
|
534
532
|
showBorder: { type: Boolean, default: !0 },
|
|
535
533
|
toggle: { type: Boolean },
|
|
536
|
-
bgColor: {}
|
|
534
|
+
bgColor: {},
|
|
535
|
+
label: { default: "Menu" }
|
|
537
536
|
},
|
|
538
537
|
emits: ["hbg-click"],
|
|
539
538
|
setup(e, { emit: t }) {
|
|
540
|
-
const u = e,
|
|
541
|
-
|
|
542
|
-
}, d =
|
|
539
|
+
const u = e, s = t, o = (a) => {
|
|
540
|
+
s("hbg-click", a);
|
|
541
|
+
}, d = R({
|
|
543
542
|
get() {
|
|
544
543
|
return u.toggle;
|
|
545
544
|
},
|
|
546
545
|
set(a) {
|
|
547
546
|
return a;
|
|
548
547
|
}
|
|
549
|
-
}),
|
|
548
|
+
}), l = (a, r, f) => {
|
|
550
549
|
const p = [
|
|
551
550
|
y.ringColorVariant({ color: a }),
|
|
552
551
|
y.ringOffsetColorVariant({ color: f })
|
|
553
552
|
];
|
|
554
553
|
return r && (p.push(y.borderColorVariant({ color: a })), p.push("border")), p.join(" ");
|
|
555
|
-
},
|
|
554
|
+
}, i = (a) => [
|
|
556
555
|
y.bgColorVariant({ color: a }),
|
|
557
556
|
y.beforeBgColorVariant({ color: a }),
|
|
558
557
|
y.afterBgColorVariant({ color: a })
|
|
559
558
|
].join(" ");
|
|
560
|
-
return (a, r) => (
|
|
561
|
-
class:
|
|
562
|
-
onClick:
|
|
563
|
-
"aria-label": e.
|
|
559
|
+
return (a, r) => (n(), c("button", {
|
|
560
|
+
class: b(["hamburger__button aspect-square rounded-md p-3xs ring-offset-2 transition-all duration-300 ease-linear outline-none hover:opacity-70 focus:opacity-70 focus:ring-4", l(e.color, e.showBorder, e.bgColor)]),
|
|
561
|
+
onClick: o,
|
|
562
|
+
"aria-label": e.label,
|
|
564
563
|
"aria-expanded": e.toggle
|
|
565
564
|
}, [
|
|
566
|
-
z(
|
|
565
|
+
z(g("input", {
|
|
567
566
|
type: "checkbox",
|
|
568
567
|
"onUpdate:modelValue": r[0] || (r[0] = (f) => d.value = f),
|
|
569
568
|
class: "hamburger__checkbox hidden"
|
|
570
569
|
}, null, 512), [
|
|
571
|
-
[
|
|
570
|
+
[mt, d.value]
|
|
572
571
|
]),
|
|
573
|
-
|
|
574
|
-
class:
|
|
572
|
+
g("div", {
|
|
573
|
+
class: b(["hamburger__icon relative h-[3px] w-sm transition-all duration-300 ease-linear before:h-[3px] before:w-sm after:h-[3px] after:w-sm", i(e.color)])
|
|
575
574
|
}, null, 2)
|
|
576
|
-
], 10,
|
|
575
|
+
], 10, Nt));
|
|
577
576
|
}
|
|
578
|
-
}),
|
|
577
|
+
}), J = /* @__PURE__ */ H(Gt, [["__scopeId", "data-v-5904b04a"]]), zt = ["aria-label"], Mt = { class: "min-h-[24px]" }, jt = { class: "ml-auto" }, Wt = {
|
|
579
578
|
key: 0,
|
|
580
579
|
class: "hidden lg:block"
|
|
581
|
-
},
|
|
580
|
+
}, _t = { class: "overflow-hidden lg:hidden" }, Ft = {
|
|
582
581
|
key: 0,
|
|
583
582
|
class: "overflow-hidden"
|
|
584
|
-
},
|
|
583
|
+
}, Pt = { key: 0 }, Xt = /* @__PURE__ */ $({
|
|
585
584
|
__name: "HeaderHorizontal",
|
|
586
585
|
props: {
|
|
587
586
|
bgColor: { default: "light-1" },
|
|
587
|
+
navLabel: { default: "Main" },
|
|
588
|
+
menuLabel: { default: "Menu" },
|
|
588
589
|
mobileMenuBgColor: { default: "light-2" },
|
|
589
590
|
drawerBtnColor: { default: "dark-1" },
|
|
590
591
|
showDrawerBorder: { type: Boolean, default: !0 },
|
|
@@ -594,63 +595,67 @@ const yo = (e, t) => {
|
|
|
594
595
|
},
|
|
595
596
|
emits: ["toggle-drawer"],
|
|
596
597
|
setup(e, { expose: t, emit: u }) {
|
|
597
|
-
const
|
|
598
|
+
const s = e, o = M(), d = w(!1), { y: l } = Ct(), i = u, a = () => {
|
|
598
599
|
d.value = !1;
|
|
599
600
|
}, r = (x) => {
|
|
600
|
-
d.value = !d.value,
|
|
601
|
+
d.value = !d.value, i("toggle-drawer", x, d.value);
|
|
601
602
|
}, f = (x) => {
|
|
602
603
|
x.style.height = "auto";
|
|
603
|
-
const
|
|
604
|
-
x.style.height = "0px", x.offsetHeight, x.style.height =
|
|
604
|
+
const I = getComputedStyle(x).height;
|
|
605
|
+
x.style.height = "0px", x.offsetHeight, x.style.height = I;
|
|
605
606
|
}, p = (x) => {
|
|
606
607
|
x.style.height = "auto";
|
|
607
|
-
},
|
|
608
|
+
}, h = (x) => {
|
|
608
609
|
x.style.height = getComputedStyle(x).height, x.offsetHeight, x.style.height = "0px";
|
|
609
|
-
},
|
|
610
|
-
const { bgColor: x, sticky:
|
|
610
|
+
}, m = R(() => {
|
|
611
|
+
const { bgColor: x, sticky: I } = s, V = [
|
|
611
612
|
y.bgColorVariant({ color: x })
|
|
612
613
|
];
|
|
613
|
-
return
|
|
614
|
-
}), L =
|
|
615
|
-
const { fadeInOnScroll: x, scrollDistance:
|
|
616
|
-
return x ?
|
|
614
|
+
return I === "all" ? (V.push("sticky top-0"), V.join(" ")) : I === "tablet" ? (V.push("md:sticky top-0"), V.join(" ")) : (I === "pc" && V.push("lg:sticky top-0"), V.join(" "));
|
|
615
|
+
}), L = R(() => {
|
|
616
|
+
const { fadeInOnScroll: x, scrollDistance: I } = s;
|
|
617
|
+
return x ? l.value >= I ? "lg:shadow-md bg-opacity-70" : "bg-opacity-100" : "";
|
|
617
618
|
});
|
|
618
619
|
return t({
|
|
619
620
|
headerClose: a
|
|
620
|
-
}), (x,
|
|
621
|
-
class:
|
|
621
|
+
}), (x, I) => (n(), c("header", {
|
|
622
|
+
class: b(["z-50 w-full items-center transition delay-150 duration-500 ease-in", [L.value, m.value]])
|
|
622
623
|
}, [
|
|
623
|
-
|
|
624
|
-
|
|
624
|
+
g("nav", {
|
|
625
|
+
"aria-label": e.navLabel,
|
|
626
|
+
class: "mx-xs flex flex-wrap items-center justify-between py-xs align-middle sm:max-w-[640px] md:mx-sm md:max-w-[768px] md:py-2xs lg:max-w-[1024px] xl:max-w-[1280px] 2xl:max-w-[1536px]"
|
|
627
|
+
}, [
|
|
628
|
+
g("div", Mt, [
|
|
625
629
|
C(x.$slots, "content", {}, void 0, !0)
|
|
626
630
|
]),
|
|
627
|
-
|
|
628
|
-
|
|
631
|
+
g("div", jt, [
|
|
632
|
+
D(J, {
|
|
633
|
+
label: e.menuLabel,
|
|
629
634
|
color: e.drawerBtnColor,
|
|
630
635
|
"show-border": e.showDrawerBorder,
|
|
631
636
|
class: "block lg:hidden",
|
|
632
637
|
onHbgClick: r,
|
|
633
638
|
toggle: d.value,
|
|
634
639
|
"bg-color": e.bgColor
|
|
635
|
-
}, null, 8, ["color", "show-border", "toggle", "bg-color"]),
|
|
636
|
-
|
|
640
|
+
}, null, 8, ["label", "color", "show-border", "toggle", "bg-color"]),
|
|
641
|
+
o["content-right"] ? (n(), c("div", Wt, [
|
|
637
642
|
C(x.$slots, "content-right", {}, void 0, !0)
|
|
638
643
|
])) : v("", !0)
|
|
639
644
|
])
|
|
640
|
-
]),
|
|
641
|
-
|
|
642
|
-
A
|
|
645
|
+
], 8, zt),
|
|
646
|
+
g("div", _t, [
|
|
647
|
+
D(A, {
|
|
643
648
|
name: "collapse",
|
|
644
649
|
onEnter: f,
|
|
645
650
|
onAfterEnter: p,
|
|
646
|
-
onLeave:
|
|
651
|
+
onLeave: h
|
|
647
652
|
}, {
|
|
648
|
-
default:
|
|
649
|
-
d.value ? (
|
|
650
|
-
|
|
651
|
-
class:
|
|
653
|
+
default: S(() => [
|
|
654
|
+
d.value ? (n(), c("div", Ft, [
|
|
655
|
+
g("div", {
|
|
656
|
+
class: b(["mx-xs my-2xs overflow-hidden rounded-md bg-opacity-80", k(y).bgColorVariant({ color: e.mobileMenuBgColor })])
|
|
652
657
|
}, [
|
|
653
|
-
|
|
658
|
+
o["mobile-content"] ? (n(), c("div", Pt, [
|
|
654
659
|
C(x.$slots, "mobile-content", { headerClose: a }, void 0, !0)
|
|
655
660
|
])) : v("", !0)
|
|
656
661
|
], 2)
|
|
@@ -661,92 +666,98 @@ const yo = (e, t) => {
|
|
|
661
666
|
])
|
|
662
667
|
], 2));
|
|
663
668
|
}
|
|
664
|
-
}),
|
|
669
|
+
}), To = /* @__PURE__ */ H(Xt, [["__scopeId", "data-v-fb1e97dd"]]), Yt = ["aria-label"], Ut = { class: "flex h-full flex-col justify-between" }, Kt = { key: 0 }, qt = {
|
|
665
670
|
key: 0,
|
|
666
671
|
class: "fixed top-0 right-0 z-50 mt-xs mr-xs block lg:hidden"
|
|
667
|
-
},
|
|
672
|
+
}, Jt = { class: "relative z-40 block lg:hidden" }, Qt = {
|
|
668
673
|
key: 0,
|
|
669
674
|
class: "fixed top-0 right-0 z-50 mt-xs mr-xs block lg:hidden"
|
|
670
|
-
},
|
|
675
|
+
}, Zt = ["aria-label"], eo = {
|
|
671
676
|
key: 0,
|
|
672
677
|
class: "h-full"
|
|
673
|
-
},
|
|
678
|
+
}, to = /* @__PURE__ */ $({
|
|
674
679
|
__name: "HeaderVertical",
|
|
675
680
|
props: {
|
|
676
681
|
bgColor: { default: "light-1" },
|
|
682
|
+
navLabel: { default: "Main" },
|
|
683
|
+
menuLabel: { default: "Menu" },
|
|
677
684
|
drawerBtnColor: { default: "dark-1" },
|
|
678
685
|
showDrawerBorder: { type: Boolean, default: !0 },
|
|
679
686
|
headerWidth: { default: 160 }
|
|
680
687
|
},
|
|
681
688
|
emits: ["toggle-drawer"],
|
|
682
689
|
setup(e, { expose: t, emit: u }) {
|
|
683
|
-
const
|
|
684
|
-
|
|
690
|
+
const s = e, o = M(), d = u, l = w(!1), i = w(!1), a = (p) => {
|
|
691
|
+
l.value = !l.value, d("toggle-drawer", p, l.value);
|
|
685
692
|
}, r = () => {
|
|
686
|
-
|
|
687
|
-
}, f =
|
|
693
|
+
l.value = !1;
|
|
694
|
+
}, f = R(() => ({ "--header-width": `${s.headerWidth}px` }));
|
|
688
695
|
return F(() => {
|
|
689
|
-
|
|
690
|
-
const p =
|
|
691
|
-
|
|
692
|
-
p.value =
|
|
696
|
+
i.value = !0;
|
|
697
|
+
const p = wt(document);
|
|
698
|
+
E(l, (h) => {
|
|
699
|
+
p.value = h;
|
|
693
700
|
});
|
|
694
701
|
}), t({
|
|
695
702
|
headerClose: r
|
|
696
|
-
}), (p,
|
|
703
|
+
}), (p, h) => (n(), c("header", {
|
|
697
704
|
class: "relative",
|
|
698
705
|
style: W(f.value)
|
|
699
706
|
}, [
|
|
700
|
-
|
|
701
|
-
|
|
707
|
+
g("nav", {
|
|
708
|
+
"aria-label": e.navLabel,
|
|
709
|
+
class: b(["header-desktop hidden overflow-y-scroll overscroll-contain py-sm lg:sticky lg:top-0 lg:left-0 lg:block lg:h-[100vh]", [k(y).bgColorVariant({ color: e.bgColor })]])
|
|
702
710
|
}, [
|
|
703
|
-
|
|
704
|
-
|
|
711
|
+
g("div", Ut, [
|
|
712
|
+
g("div", null, [
|
|
705
713
|
C(p.$slots, "content", {}, void 0, !0)
|
|
706
714
|
]),
|
|
707
|
-
|
|
715
|
+
o["content-bottom"] ? (n(), c("div", Kt, [
|
|
708
716
|
C(p.$slots, "content-bottom", {}, void 0, !0)
|
|
709
717
|
])) : v("", !0)
|
|
710
718
|
])
|
|
711
|
-
],
|
|
712
|
-
|
|
713
|
-
|
|
719
|
+
], 10, Yt),
|
|
720
|
+
o["mobile-content"] && !i.value ? (n(), c("div", qt, [
|
|
721
|
+
D(J, {
|
|
722
|
+
label: e.menuLabel,
|
|
714
723
|
color: e.drawerBtnColor,
|
|
715
724
|
"show-border": e.showDrawerBorder,
|
|
716
725
|
class: "relative block lg:hidden",
|
|
717
726
|
onHbgClick: a,
|
|
718
|
-
toggle:
|
|
727
|
+
toggle: l.value,
|
|
719
728
|
"bg-color": e.bgColor
|
|
720
|
-
}, null, 8, ["color", "show-border", "toggle", "bg-color"])
|
|
729
|
+
}, null, 8, ["label", "color", "show-border", "toggle", "bg-color"])
|
|
721
730
|
])) : v("", !0),
|
|
722
|
-
|
|
731
|
+
i.value ? (n(), P(pt, {
|
|
723
732
|
key: 1,
|
|
724
733
|
to: "body"
|
|
725
734
|
}, [
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
735
|
+
g("div", Jt, [
|
|
736
|
+
o["mobile-content"] ? (n(), c("div", Qt, [
|
|
737
|
+
D(J, {
|
|
738
|
+
label: e.menuLabel,
|
|
729
739
|
color: e.drawerBtnColor,
|
|
730
740
|
"show-border": e.showDrawerBorder,
|
|
731
741
|
class: "relative block lg:hidden",
|
|
732
742
|
onHbgClick: a,
|
|
733
|
-
toggle:
|
|
743
|
+
toggle: l.value,
|
|
734
744
|
"bg-color": e.bgColor
|
|
735
|
-
}, null, 8, ["color", "show-border", "toggle", "bg-color"])
|
|
745
|
+
}, null, 8, ["label", "color", "show-border", "toggle", "bg-color"])
|
|
736
746
|
])) : v("", !0),
|
|
737
|
-
A
|
|
747
|
+
D(A, {
|
|
738
748
|
name: "slide-down",
|
|
739
749
|
appear: ""
|
|
740
750
|
}, {
|
|
741
|
-
default:
|
|
742
|
-
|
|
751
|
+
default: S(() => [
|
|
752
|
+
l.value ? (n(), c("nav", {
|
|
743
753
|
key: 0,
|
|
744
|
-
|
|
754
|
+
"aria-label": e.navLabel,
|
|
755
|
+
class: b(["fixed inset-0 overflow-y-scroll overscroll-contain px-sm py-lg", k(y).bgColorVariant({ color: e.bgColor })])
|
|
745
756
|
}, [
|
|
746
|
-
|
|
757
|
+
o["mobile-content"] ? (n(), c("div", eo, [
|
|
747
758
|
C(p.$slots, "mobile-content", { headerClose: r }, void 0, !0)
|
|
748
759
|
])) : v("", !0)
|
|
749
|
-
],
|
|
760
|
+
], 10, Zt)) : v("", !0)
|
|
750
761
|
]),
|
|
751
762
|
_: 3
|
|
752
763
|
})
|
|
@@ -754,16 +765,17 @@ const yo = (e, t) => {
|
|
|
754
765
|
])) : v("", !0)
|
|
755
766
|
], 4));
|
|
756
767
|
}
|
|
757
|
-
}),
|
|
768
|
+
}), Do = /* @__PURE__ */ H(to, [["__scopeId", "data-v-a2d7d11b"]]), oo = ["visible"], ao = {
|
|
758
769
|
key: 0,
|
|
759
770
|
class: "sticky top-0"
|
|
760
|
-
},
|
|
771
|
+
}, lo = ["id"], so = {
|
|
761
772
|
key: 1,
|
|
762
773
|
class: "sticky bottom-0"
|
|
763
|
-
},
|
|
774
|
+
}, ro = /* @__PURE__ */ $({
|
|
764
775
|
__name: "Modal",
|
|
765
776
|
props: {
|
|
766
777
|
title: {},
|
|
778
|
+
ariaLabel: {},
|
|
767
779
|
titleColor: { default: "dark-3" },
|
|
768
780
|
customClass: { default: "" },
|
|
769
781
|
visible: { type: Boolean, default: !1 },
|
|
@@ -776,153 +788,163 @@ const yo = (e, t) => {
|
|
|
776
788
|
},
|
|
777
789
|
emits: ["open", "close"],
|
|
778
790
|
setup(e, { expose: t, emit: u }) {
|
|
779
|
-
const
|
|
780
|
-
let
|
|
781
|
-
const { activate:
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
791
|
+
const s = e, o = M(), d = u, l = w(), i = w(), a = w(s.visible), r = w(!1), f = te(), p = () => s.showHeader && (o.header ? !s.ariaLabel : !!s.title) ? { "aria-labelledby": f } : { "aria-label": s.ariaLabel };
|
|
792
|
+
let h = null;
|
|
793
|
+
const { activate: m, deactivate: L } = re(
|
|
794
|
+
i,
|
|
795
|
+
// Trap Tab focus only. Without allowOutsideClick the trap cancels every
|
|
796
|
+
// click outside the dialog, including the backdrop's own @click (#104).
|
|
797
|
+
// Escape closes the dialog; closing releases the trap and restores focus.
|
|
798
|
+
// Letting the trap handle Escape itself left the dialog open, untrapped (#110).
|
|
799
|
+
{
|
|
800
|
+
immediate: !1,
|
|
801
|
+
allowOutsideClick: !0,
|
|
802
|
+
escapeDeactivates: () => (V(), !1)
|
|
803
|
+
}
|
|
804
|
+
), x = () => {
|
|
785
805
|
a.value = !a.value;
|
|
786
|
-
},
|
|
806
|
+
}, I = () => {
|
|
787
807
|
a.value = !0;
|
|
788
|
-
},
|
|
808
|
+
}, V = () => {
|
|
789
809
|
r.value === !0 && (a.value = !1);
|
|
790
|
-
},
|
|
810
|
+
}, X = () => {
|
|
791
811
|
d("open", !0);
|
|
792
|
-
},
|
|
812
|
+
}, T = () => {
|
|
793
813
|
d("close", !1);
|
|
794
|
-
},
|
|
795
|
-
const
|
|
814
|
+
}, Y = R(() => {
|
|
815
|
+
const B = {
|
|
796
816
|
top: 25,
|
|
797
817
|
center: 50,
|
|
798
818
|
bottom: 75
|
|
799
|
-
}, { placement:
|
|
800
|
-
return { "--vertical-placement": (
|
|
801
|
-
}),
|
|
802
|
-
const { width:
|
|
819
|
+
}, { placement: N } = s;
|
|
820
|
+
return { "--vertical-placement": (B[N] ?? B.center) + "%" };
|
|
821
|
+
}), U = R(() => {
|
|
822
|
+
const { width: B } = s, N = {
|
|
803
823
|
small: "max-w-[28rem]",
|
|
804
824
|
medium: "max-w-[28rem] md:max-w-[36rem]",
|
|
805
825
|
large: "max-w-[28rem] md:max-w-[56rem]"
|
|
806
826
|
};
|
|
807
|
-
return
|
|
808
|
-
}),
|
|
809
|
-
r.value = !0,
|
|
810
|
-
},
|
|
827
|
+
return N[B] ?? N.small;
|
|
828
|
+
}), _ = () => {
|
|
829
|
+
r.value = !0, i.value && m();
|
|
830
|
+
}, K = () => {
|
|
811
831
|
r.value = !1;
|
|
812
832
|
};
|
|
813
833
|
return F(() => {
|
|
814
|
-
a.value && !r.value &&
|
|
815
|
-
}),
|
|
816
|
-
a.value =
|
|
817
|
-
}),
|
|
818
|
-
() =>
|
|
819
|
-
(
|
|
820
|
-
a.value =
|
|
834
|
+
a.value && !r.value && _();
|
|
835
|
+
}), le(l, (B = !1) => {
|
|
836
|
+
a.value = B;
|
|
837
|
+
}), E(
|
|
838
|
+
() => s.visible,
|
|
839
|
+
(B) => {
|
|
840
|
+
a.value = B;
|
|
821
841
|
}
|
|
822
|
-
),
|
|
823
|
-
|
|
824
|
-
}),
|
|
825
|
-
toggle:
|
|
826
|
-
close:
|
|
827
|
-
open:
|
|
828
|
-
}), (
|
|
829
|
-
style: W(
|
|
842
|
+
), E(a, (B) => {
|
|
843
|
+
B === !0 ? (typeof document < "u" && (h = document.activeElement), X()) : B === !1 && (L(), h?.focus(), h = null, r.value === !0 && T());
|
|
844
|
+
}), se(a), t({
|
|
845
|
+
toggle: x,
|
|
846
|
+
close: V,
|
|
847
|
+
open: I
|
|
848
|
+
}), (B, N) => (n(), c("div", {
|
|
849
|
+
style: W(Y.value),
|
|
830
850
|
visible: a.value,
|
|
831
851
|
ref_key: "modalRef",
|
|
832
|
-
ref:
|
|
852
|
+
ref: l
|
|
833
853
|
}, [
|
|
834
|
-
e.showBackdrop ? (
|
|
854
|
+
e.showBackdrop ? (n(), P(A, {
|
|
835
855
|
key: 0,
|
|
836
856
|
name: "fade",
|
|
837
857
|
appear: "",
|
|
838
858
|
tag: "div"
|
|
839
859
|
}, {
|
|
840
|
-
default:
|
|
841
|
-
a.value ? (
|
|
860
|
+
default: S(() => [
|
|
861
|
+
a.value ? (n(), c("section", {
|
|
842
862
|
key: 0,
|
|
843
|
-
onClick:
|
|
863
|
+
onClick: V,
|
|
844
864
|
"aria-hidden": "true",
|
|
845
|
-
class:
|
|
865
|
+
class: b(["fixed inset-0 z-[100] overflow-y-auto backdrop-blur bg-opacity-70", k(y).bgColorVariant({ color: e.backdropColor })])
|
|
846
866
|
}, null, 2)) : v("", !0)
|
|
847
867
|
]),
|
|
848
868
|
_: 1
|
|
849
869
|
})) : v("", !0),
|
|
850
|
-
A
|
|
870
|
+
D(A, {
|
|
851
871
|
name: "slide-down",
|
|
852
872
|
tag: "div",
|
|
853
|
-
onAfterEnter:
|
|
854
|
-
onAfterLeave:
|
|
873
|
+
onAfterEnter: _,
|
|
874
|
+
onAfterLeave: K,
|
|
855
875
|
appear: ""
|
|
856
876
|
}, {
|
|
857
|
-
default:
|
|
858
|
-
a.value ? (
|
|
877
|
+
default: S(() => [
|
|
878
|
+
a.value ? (n(), c("div", {
|
|
859
879
|
key: 0,
|
|
860
|
-
class:
|
|
880
|
+
class: b(["vertical-placement fixed z-[110] w-full px-xs", U.value])
|
|
861
881
|
}, [
|
|
862
|
-
z((
|
|
882
|
+
z((n(), c("div", ae({
|
|
863
883
|
ref_key: "dialogRef",
|
|
864
|
-
ref:
|
|
884
|
+
ref: i,
|
|
865
885
|
role: "dialog",
|
|
866
|
-
"aria-modal": "true"
|
|
867
|
-
|
|
868
|
-
class:
|
|
869
|
-
}, [
|
|
870
|
-
e.showHeader ? (
|
|
871
|
-
C(
|
|
872
|
-
close:
|
|
873
|
-
status: a.value
|
|
886
|
+
"aria-modal": "true"
|
|
887
|
+
}, p(), {
|
|
888
|
+
class: [[k(y).bgColorVariant({ color: e.color }), e.customClass], "relative max-h-[80vh] overflow-y-scroll overscroll-contain md:max-h-[60vh]"]
|
|
889
|
+
}), [
|
|
890
|
+
e.showHeader ? (n(), c("div", ao, [
|
|
891
|
+
C(B.$slots, "header", {
|
|
892
|
+
close: V,
|
|
893
|
+
status: a.value,
|
|
894
|
+
titleId: k(f)
|
|
874
895
|
}, () => [
|
|
875
|
-
|
|
876
|
-
class:
|
|
896
|
+
g("div", {
|
|
897
|
+
class: b(["flex items-center justify-between border-b-2 border-b-light-4 p-xs", k(y).bgColorVariant({ color: e.color })])
|
|
877
898
|
}, [
|
|
878
|
-
e.title ? (
|
|
899
|
+
e.title ? (n(), c("h3", {
|
|
879
900
|
key: 0,
|
|
880
|
-
id:
|
|
881
|
-
class:
|
|
882
|
-
}, j(e.title), 11,
|
|
883
|
-
|
|
901
|
+
id: k(f),
|
|
902
|
+
class: b(["h3-md", k(y).textColorVariant({ color: e.titleColor })])
|
|
903
|
+
}, j(e.title), 11, lo)) : v("", !0),
|
|
904
|
+
g("button", {
|
|
884
905
|
type: "button",
|
|
885
906
|
"aria-label": "Close",
|
|
886
|
-
onClick:
|
|
907
|
+
onClick: V
|
|
887
908
|
}, [
|
|
888
|
-
(
|
|
909
|
+
(n(), c("svg", {
|
|
889
910
|
xmlns: "http://www.w3.org/2000/svg",
|
|
890
911
|
height: "1em",
|
|
891
912
|
viewBox: "0 0 384 512",
|
|
892
913
|
"aria-hidden": "true",
|
|
893
|
-
class:
|
|
894
|
-
|
|
914
|
+
class: b(["h-sm transition-opacity duration-300 ease-in hover:opacity-75 focus:opacity-75", [
|
|
915
|
+
k(y).svgFillColorVariant({ color: e.titleColor })
|
|
895
916
|
]])
|
|
896
|
-
}, [...
|
|
897
|
-
|
|
917
|
+
}, [...N[0] || (N[0] = [
|
|
918
|
+
g("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" }, null, -1)
|
|
898
919
|
])], 2))
|
|
899
920
|
])
|
|
900
921
|
], 2)
|
|
901
922
|
], !0)
|
|
902
923
|
])) : v("", !0),
|
|
903
|
-
C(
|
|
904
|
-
close:
|
|
924
|
+
C(B.$slots, "body", {
|
|
925
|
+
close: V,
|
|
905
926
|
status: a.value
|
|
906
927
|
}, void 0, !0),
|
|
907
|
-
|
|
908
|
-
C(
|
|
909
|
-
close:
|
|
928
|
+
o.footer ? (n(), c("div", so, [
|
|
929
|
+
C(B.$slots, "footer", {
|
|
930
|
+
close: V,
|
|
910
931
|
status: a.value
|
|
911
932
|
}, void 0, !0)
|
|
912
933
|
])) : v("", !0)
|
|
913
|
-
],
|
|
914
|
-
[
|
|
934
|
+
], 16)), [
|
|
935
|
+
[k(oe), V]
|
|
915
936
|
])
|
|
916
937
|
], 2)) : v("", !0)
|
|
917
938
|
]),
|
|
918
939
|
_: 3
|
|
919
940
|
})
|
|
920
|
-
], 12,
|
|
941
|
+
], 12, oo));
|
|
921
942
|
}
|
|
922
|
-
}),
|
|
943
|
+
}), Ao = /* @__PURE__ */ H(ro, [["__scopeId", "data-v-9730e4f1"]]), no = ["visible"], io = ["id"], co = { class: "sidebar-body-height" }, uo = /* @__PURE__ */ $({
|
|
923
944
|
__name: "Sidebar",
|
|
924
945
|
props: {
|
|
925
946
|
title: {},
|
|
947
|
+
ariaLabel: {},
|
|
926
948
|
titleColor: { default: "dark-3" },
|
|
927
949
|
customClass: { default: "" },
|
|
928
950
|
visible: { type: Boolean, default: !1 },
|
|
@@ -935,173 +957,182 @@ const yo = (e, t) => {
|
|
|
935
957
|
},
|
|
936
958
|
emits: ["open", "close"],
|
|
937
959
|
setup(e, { expose: t, emit: u }) {
|
|
938
|
-
const
|
|
939
|
-
let
|
|
940
|
-
const { activate:
|
|
960
|
+
const s = e, o = M(), d = u, l = w(s.visible), i = w(!1), a = w(), r = w(), f = w(), p = w(), h = te(), m = () => s.showHeader && (o.header ? !s.ariaLabel : !!s.title) ? { "aria-labelledby": h } : { "aria-label": s.ariaLabel };
|
|
961
|
+
let L = null;
|
|
962
|
+
const { activate: x, deactivate: I } = re(
|
|
941
963
|
r,
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
964
|
+
// Trap Tab focus only. Without allowOutsideClick the trap cancels every
|
|
965
|
+
// click outside the dialog, including the backdrop's own @click (#104).
|
|
966
|
+
// Escape closes the dialog; closing releases the trap and restores focus.
|
|
967
|
+
// Letting the trap handle Escape itself left the dialog open, untrapped (#110).
|
|
968
|
+
{
|
|
969
|
+
immediate: !1,
|
|
970
|
+
allowOutsideClick: !0,
|
|
971
|
+
escapeDeactivates: () => (T(), !1)
|
|
972
|
+
}
|
|
973
|
+
), V = () => {
|
|
974
|
+
l.value = !l.value;
|
|
975
|
+
}, X = () => {
|
|
976
|
+
l.value = !0;
|
|
977
|
+
}, T = () => {
|
|
978
|
+
i.value === !0 && (l.value = !1);
|
|
951
979
|
}, Y = () => {
|
|
980
|
+
d("open", !0);
|
|
981
|
+
}, U = () => {
|
|
952
982
|
d("close", !1);
|
|
953
|
-
},
|
|
954
|
-
const O = (
|
|
983
|
+
}, _ = R(() => {
|
|
984
|
+
const O = (G) => G && l.value ? `${G.scrollHeight}px` : "0px";
|
|
955
985
|
return {
|
|
956
|
-
"--sidebar-width": `${
|
|
986
|
+
"--sidebar-width": `${s.width}px`,
|
|
957
987
|
"--header-height": O(f.value),
|
|
958
988
|
"--footer-height": O(p.value)
|
|
959
989
|
};
|
|
960
|
-
}),
|
|
961
|
-
|
|
962
|
-
},
|
|
963
|
-
|
|
990
|
+
}), K = R(() => s.placement === "left" ? "sidebar-left" : "sidebar-right"), q = () => {
|
|
991
|
+
i.value = !0, r.value && x();
|
|
992
|
+
}, B = () => {
|
|
993
|
+
i.value = !1;
|
|
964
994
|
};
|
|
965
995
|
return F(() => {
|
|
966
|
-
|
|
967
|
-
}),
|
|
968
|
-
|
|
969
|
-
}),
|
|
970
|
-
() =>
|
|
996
|
+
l.value && !i.value && q();
|
|
997
|
+
}), le(a, (O = !1) => {
|
|
998
|
+
l.value = O;
|
|
999
|
+
}), E(
|
|
1000
|
+
() => s.visible,
|
|
971
1001
|
(O) => {
|
|
972
|
-
|
|
1002
|
+
l.value = O;
|
|
973
1003
|
}
|
|
974
|
-
),
|
|
975
|
-
O === !0 ? (typeof document < "u" && (
|
|
976
|
-
}),
|
|
977
|
-
toggle:
|
|
978
|
-
open:
|
|
979
|
-
close:
|
|
980
|
-
}), (O,
|
|
981
|
-
style: W(
|
|
982
|
-
visible:
|
|
1004
|
+
), E(l, (O) => {
|
|
1005
|
+
O === !0 ? (typeof document < "u" && (L = document.activeElement), Y()) : O === !1 && (I(), L?.focus(), L = null, i.value === !0 && U());
|
|
1006
|
+
}), se(l), t({
|
|
1007
|
+
toggle: V,
|
|
1008
|
+
open: X,
|
|
1009
|
+
close: T
|
|
1010
|
+
}), (O, G) => (n(), c("div", {
|
|
1011
|
+
style: W(_.value),
|
|
1012
|
+
visible: l.value,
|
|
983
1013
|
ref_key: "sidebarRef",
|
|
984
1014
|
ref: a
|
|
985
1015
|
}, [
|
|
986
|
-
e.showBackdrop ? (
|
|
1016
|
+
e.showBackdrop ? (n(), P(A, {
|
|
987
1017
|
key: 0,
|
|
988
1018
|
name: "fade",
|
|
989
1019
|
appear: "",
|
|
990
1020
|
tag: "div"
|
|
991
1021
|
}, {
|
|
992
|
-
default:
|
|
993
|
-
|
|
1022
|
+
default: S(() => [
|
|
1023
|
+
l.value ? (n(), c("section", {
|
|
994
1024
|
key: 0,
|
|
995
|
-
onClick:
|
|
1025
|
+
onClick: T,
|
|
996
1026
|
"aria-hidden": "true",
|
|
997
|
-
class:
|
|
1027
|
+
class: b(["fixed inset-0 z-[100] overflow-y-auto backdrop-blur bg-opacity-70", k(y).bgColorVariant({ color: e.backdropColor })])
|
|
998
1028
|
}, null, 2)) : v("", !0)
|
|
999
1029
|
]),
|
|
1000
1030
|
_: 1
|
|
1001
1031
|
})) : v("", !0),
|
|
1002
|
-
A
|
|
1003
|
-
name:
|
|
1004
|
-
onAfterEnter:
|
|
1005
|
-
onAfterLeave:
|
|
1032
|
+
D(A, {
|
|
1033
|
+
name: K.value,
|
|
1034
|
+
onAfterEnter: q,
|
|
1035
|
+
onAfterLeave: B,
|
|
1006
1036
|
appear: ""
|
|
1007
1037
|
}, {
|
|
1008
|
-
default:
|
|
1009
|
-
|
|
1038
|
+
default: S(() => [
|
|
1039
|
+
l.value ? z((n(), c("div", ae({
|
|
1010
1040
|
key: 0,
|
|
1011
1041
|
ref_key: "dialogRef",
|
|
1012
1042
|
ref: r,
|
|
1013
1043
|
role: "dialog",
|
|
1014
|
-
"aria-modal": "true"
|
|
1015
|
-
|
|
1016
|
-
class:
|
|
1017
|
-
}, [
|
|
1018
|
-
|
|
1019
|
-
class:
|
|
1044
|
+
"aria-modal": "true"
|
|
1045
|
+
}, m(), {
|
|
1046
|
+
class: ["sidebar-body fixed inset-y-0 z-[110] h-full overflow-hidden shadow", [e.placement === "left" ? "left-0" : "right-0"]]
|
|
1047
|
+
}), [
|
|
1048
|
+
g("div", {
|
|
1049
|
+
class: b(["relative h-full overflow-y-scroll overscroll-contain", [k(y).bgColorVariant({ color: e.color }), e.customClass]])
|
|
1020
1050
|
}, [
|
|
1021
|
-
e.showHeader ? (
|
|
1051
|
+
e.showHeader ? (n(), c("div", {
|
|
1022
1052
|
key: 0,
|
|
1023
1053
|
class: "sticky top-0 z-10",
|
|
1024
1054
|
ref_key: "headerRef",
|
|
1025
1055
|
ref: f
|
|
1026
1056
|
}, [
|
|
1027
1057
|
C(O.$slots, "header", {
|
|
1028
|
-
close:
|
|
1029
|
-
status:
|
|
1058
|
+
close: T,
|
|
1059
|
+
status: l.value,
|
|
1060
|
+
titleId: k(h)
|
|
1030
1061
|
}, () => [
|
|
1031
|
-
|
|
1032
|
-
class:
|
|
1062
|
+
g("div", {
|
|
1063
|
+
class: b(["flex items-center justify-between p-xs", k(y).bgColorVariant({ color: e.color })])
|
|
1033
1064
|
}, [
|
|
1034
|
-
e.placement === "right" ? (
|
|
1065
|
+
e.placement === "right" ? (n(), c("button", {
|
|
1035
1066
|
key: 0,
|
|
1036
1067
|
type: "button",
|
|
1037
1068
|
"aria-label": "Close",
|
|
1038
|
-
onClick:
|
|
1069
|
+
onClick: T
|
|
1039
1070
|
}, [
|
|
1040
|
-
(
|
|
1071
|
+
(n(), c("svg", {
|
|
1041
1072
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1042
1073
|
height: "1em",
|
|
1043
1074
|
viewBox: "0 0 384 512",
|
|
1044
1075
|
"aria-hidden": "true",
|
|
1045
|
-
class:
|
|
1046
|
-
|
|
1076
|
+
class: b(["h-sm transition-opacity duration-300 ease-in hover:opacity-75 focus:opacity-75", [
|
|
1077
|
+
k(y).svgFillColorVariant({ color: e.titleColor })
|
|
1047
1078
|
]])
|
|
1048
|
-
}, [...
|
|
1049
|
-
|
|
1079
|
+
}, [...G[0] || (G[0] = [
|
|
1080
|
+
g("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" }, null, -1)
|
|
1050
1081
|
])], 2))
|
|
1051
1082
|
])) : v("", !0),
|
|
1052
|
-
e.title ? (
|
|
1083
|
+
e.title ? (n(), c("h3", {
|
|
1053
1084
|
key: 1,
|
|
1054
|
-
id:
|
|
1055
|
-
class:
|
|
1056
|
-
}, j(e.title), 11,
|
|
1057
|
-
e.placement === "left" ? (
|
|
1085
|
+
id: k(h),
|
|
1086
|
+
class: b(["h3-md", k(y).textColorVariant({ color: e.titleColor })])
|
|
1087
|
+
}, j(e.title), 11, io)) : v("", !0),
|
|
1088
|
+
e.placement === "left" ? (n(), c("button", {
|
|
1058
1089
|
key: 2,
|
|
1059
1090
|
type: "button",
|
|
1060
1091
|
"aria-label": "Close",
|
|
1061
|
-
onClick:
|
|
1092
|
+
onClick: T
|
|
1062
1093
|
}, [
|
|
1063
|
-
(
|
|
1094
|
+
(n(), c("svg", {
|
|
1064
1095
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1065
1096
|
height: "1em",
|
|
1066
1097
|
viewBox: "0 0 384 512",
|
|
1067
1098
|
"aria-hidden": "true",
|
|
1068
|
-
class:
|
|
1069
|
-
|
|
1099
|
+
class: b(["h-sm transition-opacity duration-300 ease-in hover:opacity-75 focus:opacity-75", [
|
|
1100
|
+
k(y).svgFillColorVariant({ color: e.titleColor })
|
|
1070
1101
|
]])
|
|
1071
|
-
}, [...
|
|
1072
|
-
|
|
1102
|
+
}, [...G[1] || (G[1] = [
|
|
1103
|
+
g("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" }, null, -1)
|
|
1073
1104
|
])], 2))
|
|
1074
1105
|
])) : v("", !0)
|
|
1075
1106
|
], 2)
|
|
1076
1107
|
], !0)
|
|
1077
1108
|
], 512)) : v("", !0),
|
|
1078
|
-
|
|
1109
|
+
g("div", co, [
|
|
1079
1110
|
C(O.$slots, "body", {
|
|
1080
|
-
close:
|
|
1081
|
-
status:
|
|
1111
|
+
close: T,
|
|
1112
|
+
status: l.value
|
|
1082
1113
|
}, void 0, !0)
|
|
1083
1114
|
]),
|
|
1084
|
-
|
|
1115
|
+
o.footer ? (n(), c("div", {
|
|
1085
1116
|
key: 1,
|
|
1086
1117
|
class: "sticky bottom-0",
|
|
1087
1118
|
ref_key: "footerRef",
|
|
1088
1119
|
ref: p
|
|
1089
1120
|
}, [
|
|
1090
1121
|
C(O.$slots, "footer", {
|
|
1091
|
-
close:
|
|
1092
|
-
status:
|
|
1122
|
+
close: T,
|
|
1123
|
+
status: l.value
|
|
1093
1124
|
}, void 0, !0)
|
|
1094
1125
|
], 512)) : v("", !0)
|
|
1095
1126
|
], 2)
|
|
1096
|
-
],
|
|
1097
|
-
[
|
|
1127
|
+
], 16)), [
|
|
1128
|
+
[k(oe), T]
|
|
1098
1129
|
]) : v("", !0)
|
|
1099
1130
|
]),
|
|
1100
1131
|
_: 3
|
|
1101
1132
|
}, 8, ["name"])
|
|
1102
|
-
], 12,
|
|
1133
|
+
], 12, no));
|
|
1103
1134
|
}
|
|
1104
|
-
}),
|
|
1135
|
+
}), So = /* @__PURE__ */ H(uo, [["__scopeId", "data-v-658499cf"]]), ce = /* @__PURE__ */ Symbol(), fo = { class: "container-hts grid grid-cols-1 grid-rows-1 transition-[max-height] duration-300" }, ho = /* @__PURE__ */ $({
|
|
1105
1136
|
__name: "TabContainer",
|
|
1106
1137
|
props: {
|
|
1107
1138
|
bodyClass: { default: "" },
|
|
@@ -1109,45 +1140,44 @@ const yo = (e, t) => {
|
|
|
1109
1140
|
contentContainerClass: { default: "" }
|
|
1110
1141
|
},
|
|
1111
1142
|
setup(e, { expose: t }) {
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
J(ne, {
|
|
1143
|
+
const u = w(0), s = w(0), o = w(!1), d = w("slide-next");
|
|
1144
|
+
Q(ce, {
|
|
1115
1145
|
activeTabIdx: u,
|
|
1116
|
-
containerHeight:
|
|
1146
|
+
containerHeight: s,
|
|
1117
1147
|
updateHeight: (r) => {
|
|
1118
|
-
r > 0 && (
|
|
1148
|
+
r > 0 && (o.value = !0), s.value = r;
|
|
1119
1149
|
}
|
|
1120
1150
|
});
|
|
1121
|
-
const
|
|
1151
|
+
const i = (r) => {
|
|
1122
1152
|
u.value = r;
|
|
1123
|
-
}, a =
|
|
1153
|
+
}, a = R(() => o.value ? { "--container-hts": `${s.value}px` } : void 0);
|
|
1124
1154
|
return t({
|
|
1125
|
-
update:
|
|
1126
|
-
}),
|
|
1155
|
+
update: i
|
|
1156
|
+
}), E(
|
|
1127
1157
|
() => u.value,
|
|
1128
1158
|
(r, f) => {
|
|
1129
1159
|
r > f ? d.value = "slide-next" : d.value = "slide-prev";
|
|
1130
1160
|
}
|
|
1131
|
-
), (r, f) => (
|
|
1132
|
-
class:
|
|
1161
|
+
), (r, f) => (n(), c("div", {
|
|
1162
|
+
class: b(e.bodyClass),
|
|
1133
1163
|
style: W(a.value)
|
|
1134
1164
|
}, [
|
|
1135
|
-
|
|
1136
|
-
class:
|
|
1165
|
+
g("div", {
|
|
1166
|
+
class: b(e.btnContainerClass),
|
|
1137
1167
|
role: "tablist"
|
|
1138
1168
|
}, [
|
|
1139
1169
|
C(r.$slots, "tab-button", {
|
|
1140
|
-
update:
|
|
1170
|
+
update: i,
|
|
1141
1171
|
activeTab: u.value
|
|
1142
1172
|
}, void 0, !0)
|
|
1143
1173
|
], 2),
|
|
1144
|
-
|
|
1145
|
-
class:
|
|
1174
|
+
g("div", {
|
|
1175
|
+
class: b(e.contentContainerClass)
|
|
1146
1176
|
}, [
|
|
1147
|
-
|
|
1148
|
-
A
|
|
1149
|
-
default:
|
|
1150
|
-
(
|
|
1177
|
+
g("div", fo, [
|
|
1178
|
+
D(A, { name: d.value }, {
|
|
1179
|
+
default: S(() => [
|
|
1180
|
+
(n(), c("div", {
|
|
1151
1181
|
key: u.value,
|
|
1152
1182
|
class: "relative col-start-1 col-end-1 row-start-1 row-end-1"
|
|
1153
1183
|
}, [
|
|
@@ -1160,7 +1190,7 @@ const yo = (e, t) => {
|
|
|
1160
1190
|
], 2)
|
|
1161
1191
|
], 6));
|
|
1162
1192
|
}
|
|
1163
|
-
}),
|
|
1193
|
+
}), Eo = /* @__PURE__ */ H(ho, [["__scopeId", "data-v-2d9322d9"]]), vo = ["id"], Ho = /* @__PURE__ */ $({
|
|
1164
1194
|
__name: "TabContent",
|
|
1165
1195
|
props: {
|
|
1166
1196
|
tabNumber: {},
|
|
@@ -1168,38 +1198,38 @@ const yo = (e, t) => {
|
|
|
1168
1198
|
tabClass: { default: "" }
|
|
1169
1199
|
},
|
|
1170
1200
|
setup(e) {
|
|
1171
|
-
const t = e, { activeTabIdx: u, updateHeight:
|
|
1172
|
-
|
|
1173
|
-
),
|
|
1174
|
-
return (
|
|
1201
|
+
const t = e, { activeTabIdx: u, updateHeight: s } = Z(
|
|
1202
|
+
ce
|
|
1203
|
+
), o = w(null), { height: d } = xt(o), l = R(() => u.value === t.tabNumber ? (s(d.value), !0) : !1);
|
|
1204
|
+
return (i, a) => z((n(), c("div", {
|
|
1175
1205
|
ref_key: "slotRef",
|
|
1176
|
-
ref:
|
|
1206
|
+
ref: o,
|
|
1177
1207
|
id: e.id,
|
|
1178
|
-
class:
|
|
1208
|
+
class: b([e.tabClass, "w-full"]),
|
|
1179
1209
|
role: "tabpanel",
|
|
1180
1210
|
tabindex: "-1"
|
|
1181
1211
|
}, [
|
|
1182
|
-
C(
|
|
1183
|
-
], 10,
|
|
1184
|
-
[
|
|
1212
|
+
C(i.$slots, "default")
|
|
1213
|
+
], 10, vo)), [
|
|
1214
|
+
[ee, l.value]
|
|
1185
1215
|
]);
|
|
1186
1216
|
}
|
|
1187
1217
|
});
|
|
1188
1218
|
export {
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1219
|
+
ko as AccordionGroup,
|
|
1220
|
+
Vo as Alert,
|
|
1221
|
+
Bo as Card,
|
|
1222
|
+
Ro as CarouselContainer,
|
|
1223
|
+
Oo as CarouselContent,
|
|
1224
|
+
$o as Collapse,
|
|
1225
|
+
Lo as DropdownContainer,
|
|
1226
|
+
Io as DropdownContent,
|
|
1227
|
+
To as HeaderHorizontal,
|
|
1228
|
+
Do as HeaderVertical,
|
|
1229
|
+
Ao as Modal,
|
|
1230
|
+
So as Sidebar,
|
|
1231
|
+
Eo as TabContainer,
|
|
1232
|
+
Ho as TabContent,
|
|
1233
|
+
xo as default,
|
|
1204
1234
|
y as generateClass
|
|
1205
1235
|
};
|