@iaclinical/components 1.0.7 → 1.0.8
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/dist/iaclinical-components.cjs +1 -1
- package/dist/iaclinical-components.js +196 -191
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as S, computed as p, createElementBlock as o, openBlock as s, normalizeClass as v, createElementVNode as a, createCommentVNode as c, renderSlot as C, toDisplayString as w, createBlock as q, Teleport as X, createVNode as G, Transition as Q, withCtx as U, withModifiers as H, createTextVNode as K, ref as j, normalizeStyle as W, onMounted as ee, onUnmounted as te, watch as Y, nextTick as J, Fragment as F, renderList as A, resolveDynamicComponent as Z, withDirectives as se, vModelText as oe } from "vue";
|
|
2
2
|
const le = { class: "flex items-center gap-4" }, ae = {
|
|
3
3
|
key: 1,
|
|
4
4
|
class: "text-lg font-bold text-primary-50 font-poppins"
|
|
@@ -8,7 +8,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
8
8
|
}, ie = { class: "flex items-center gap-3" }, de = {
|
|
9
9
|
key: 0,
|
|
10
10
|
class: "text-lg font-bold text-primary-50 font-poppins"
|
|
11
|
-
}, ue = /* @__PURE__ */
|
|
11
|
+
}, ue = /* @__PURE__ */ S({
|
|
12
12
|
__name: "AppBar",
|
|
13
13
|
props: {
|
|
14
14
|
title: { default: "" },
|
|
@@ -20,8 +20,8 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
20
20
|
height: { default: "md" }
|
|
21
21
|
},
|
|
22
22
|
emits: ["toggle-menu"],
|
|
23
|
-
setup(t, { emit:
|
|
24
|
-
const e = t, u =
|
|
23
|
+
setup(t, { emit: b }) {
|
|
24
|
+
const e = t, u = b, n = p(() => {
|
|
25
25
|
const d = "flex items-center justify-between px-6 z-50", r = {
|
|
26
26
|
default: "bg-primary-700 text-primary-50",
|
|
27
27
|
dark: "bg-secondary-900 text-white",
|
|
@@ -40,7 +40,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
40
40
|
].join(" ");
|
|
41
41
|
});
|
|
42
42
|
return (d, r) => (s(), o("header", {
|
|
43
|
-
class:
|
|
43
|
+
class: v(n.value)
|
|
44
44
|
}, [
|
|
45
45
|
a("div", le, [
|
|
46
46
|
t.showMenuButton ? (s(), o("button", {
|
|
@@ -77,15 +77,15 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
77
77
|
])
|
|
78
78
|
], 2));
|
|
79
79
|
}
|
|
80
|
-
}), R = (t,
|
|
80
|
+
}), R = (t, b) => {
|
|
81
81
|
const e = t.__vccOpts || t;
|
|
82
|
-
for (const [u, n] of
|
|
82
|
+
for (const [u, n] of b)
|
|
83
83
|
e[u] = n;
|
|
84
84
|
return e;
|
|
85
85
|
}, Ht = /* @__PURE__ */ R(ue, [["__scopeId", "data-v-883474b5"]]), ce = ["type", "disabled", "aria-label"], fe = {
|
|
86
86
|
key: 0,
|
|
87
87
|
class: "absolute top-0 right-0 inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold leading-none text-white transform translate-x-1/2 -translate-y-1/2 bg-danger-600 rounded-full min-w-[1.25rem]"
|
|
88
|
-
}, Ft = /* @__PURE__ */
|
|
88
|
+
}, Ft = /* @__PURE__ */ S({
|
|
89
89
|
__name: "Button",
|
|
90
90
|
props: {
|
|
91
91
|
variant: { default: "primary" },
|
|
@@ -95,11 +95,12 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
95
95
|
disabled: { type: Boolean, default: !1 },
|
|
96
96
|
badge: { default: 0 },
|
|
97
97
|
ariaLabel: { default: "" },
|
|
98
|
-
textColor: { default: void 0 }
|
|
98
|
+
textColor: { default: void 0 },
|
|
99
|
+
textColorHover: { default: void 0 }
|
|
99
100
|
},
|
|
100
101
|
emits: ["click"],
|
|
101
|
-
setup(t, { emit:
|
|
102
|
-
const e = t, u =
|
|
102
|
+
setup(t, { emit: b }) {
|
|
103
|
+
const e = t, u = b, n = p(() => e.variant === "icon"), d = p(() => e.badge > 99 ? "99+" : e.badge.toString()), r = p(() => {
|
|
103
104
|
const i = "inline-flex items-center justify-center font-semibold tracking-wide transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", y = {
|
|
104
105
|
primary: "bg-primary-500 text-white hover:bg-primary-600 active:bg-primary-700 focus-visible:ring-primary-700",
|
|
105
106
|
secondary: "bg-secondary-200 text-secondary-900 hover:bg-secondary-300 focus-visible:ring-secondary-500",
|
|
@@ -112,20 +113,23 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
112
113
|
sm: n.value ? "p-1.5" : "h-8 px-3 text-sm",
|
|
113
114
|
md: n.value ? "p-2" : "h-10 px-4 text-base",
|
|
114
115
|
lg: n.value ? "p-3" : "h-12 px-6 text-lg"
|
|
115
|
-
},
|
|
116
|
+
}, L = {
|
|
116
117
|
full: "rounded-full",
|
|
117
118
|
xl: "rounded-2xl",
|
|
118
119
|
lg: "rounded-xl",
|
|
119
120
|
md: "rounded-lg",
|
|
120
121
|
sm: "rounded-md",
|
|
121
122
|
none: "rounded-none"
|
|
122
|
-
},
|
|
123
|
-
|
|
123
|
+
}, D = e.textColor ? e.textColor : "", _ = p(() => {
|
|
124
|
+
var M, O;
|
|
125
|
+
return e.textColorHover ? e.textColorHover : (M = e.textColor) != null && M.includes("white") || (O = e.textColor) != null && O.includes("50") ? "hover:text-black" : "";
|
|
126
|
+
});
|
|
127
|
+
return `${i} ${y[e.variant]} ${x[e.size]} ${L[e.radius]} ${D} ${_.value}`;
|
|
124
128
|
}), f = (i) => {
|
|
125
129
|
e.disabled || u("click", i);
|
|
126
130
|
};
|
|
127
131
|
return (i, y) => (s(), o("button", {
|
|
128
|
-
class:
|
|
132
|
+
class: v(r.value),
|
|
129
133
|
type: t.type,
|
|
130
134
|
disabled: t.disabled,
|
|
131
135
|
onClick: f,
|
|
@@ -141,7 +145,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
141
145
|
}, ge = { class: "px-6 py-4" }, he = {
|
|
142
146
|
key: 1,
|
|
143
147
|
class: "border-t border-gray-100 px-6 py-4 bg-gray-50"
|
|
144
|
-
}, Pt = /* @__PURE__ */
|
|
148
|
+
}, Pt = /* @__PURE__ */ S({
|
|
145
149
|
__name: "Card",
|
|
146
150
|
props: {
|
|
147
151
|
shadow: { default: "md" },
|
|
@@ -149,7 +153,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
149
153
|
bordered: { type: Boolean, default: !1 }
|
|
150
154
|
},
|
|
151
155
|
setup(t) {
|
|
152
|
-
const
|
|
156
|
+
const b = t, e = {
|
|
153
157
|
none: "",
|
|
154
158
|
sm: "shadow-sm",
|
|
155
159
|
md: "shadow",
|
|
@@ -162,14 +166,14 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
162
166
|
lg: "rounded-lg",
|
|
163
167
|
xl: "rounded-xl",
|
|
164
168
|
full: "rounded-full"
|
|
165
|
-
}, n =
|
|
169
|
+
}, n = p(() => [
|
|
166
170
|
"w-full bg-white",
|
|
167
|
-
e[
|
|
168
|
-
u[
|
|
169
|
-
|
|
171
|
+
e[b.shadow],
|
|
172
|
+
u[b.rounded],
|
|
173
|
+
b.bordered ? "border border-gray-200" : ""
|
|
170
174
|
]);
|
|
171
175
|
return (d, r) => (s(), o("div", {
|
|
172
|
-
class:
|
|
176
|
+
class: v(n.value)
|
|
173
177
|
}, [
|
|
174
178
|
d.$slots.header ? (s(), o("div", pe, [
|
|
175
179
|
C(d.$slots, "header")
|
|
@@ -182,10 +186,10 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
182
186
|
])) : c("", !0)
|
|
183
187
|
], 2));
|
|
184
188
|
}
|
|
185
|
-
}),
|
|
189
|
+
}), ve = { class: "flex items-center justify-between border-b border-gray-100 px-8 py-6" }, be = { class: "text-xl font-semibold text-gray-900" }, ye = { class: "px-8 py-6" }, xe = {
|
|
186
190
|
key: 0,
|
|
187
191
|
class: "border-t border-gray-100 px-8 py-6 bg-gray-50"
|
|
188
|
-
}, me = /* @__PURE__ */
|
|
192
|
+
}, me = /* @__PURE__ */ S({
|
|
189
193
|
__name: "Dialog",
|
|
190
194
|
props: {
|
|
191
195
|
modelValue: { type: Boolean, default: !1 },
|
|
@@ -193,8 +197,8 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
193
197
|
closeOnBackdrop: { type: Boolean, default: !0 }
|
|
194
198
|
},
|
|
195
199
|
emits: ["update:modelValue"],
|
|
196
|
-
setup(t, { emit:
|
|
197
|
-
const e = t, u =
|
|
200
|
+
setup(t, { emit: b }) {
|
|
201
|
+
const e = t, u = b, n = p({
|
|
198
202
|
get: () => e.modelValue,
|
|
199
203
|
set: (f) => u("update:modelValue", f)
|
|
200
204
|
}), d = () => {
|
|
@@ -212,11 +216,11 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
212
216
|
}, [
|
|
213
217
|
a("div", {
|
|
214
218
|
class: "relative w-full max-w-2xl rounded-lg bg-white shadow-xl",
|
|
215
|
-
onClick: i[0] || (i[0] =
|
|
219
|
+
onClick: i[0] || (i[0] = H(() => {
|
|
216
220
|
}, ["stop"]))
|
|
217
221
|
}, [
|
|
218
|
-
a("div",
|
|
219
|
-
a("h2",
|
|
222
|
+
a("div", ve, [
|
|
223
|
+
a("h2", be, [
|
|
220
224
|
C(f.$slots, "title", {}, () => [
|
|
221
225
|
K(w(t.title), 1)
|
|
222
226
|
], !0)
|
|
@@ -267,7 +271,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
267
271
|
}, Se = {
|
|
268
272
|
key: 2,
|
|
269
273
|
class: "text-sm text-danger-500 mt-2"
|
|
270
|
-
}, At = /* @__PURE__ */
|
|
274
|
+
}, At = /* @__PURE__ */ S({
|
|
271
275
|
__name: "FileUpload",
|
|
272
276
|
props: {
|
|
273
277
|
modelValue: { default: null },
|
|
@@ -283,8 +287,8 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
283
287
|
maxSize: { default: void 0 }
|
|
284
288
|
},
|
|
285
289
|
emits: ["update:modelValue", "change", "error"],
|
|
286
|
-
setup(t, { emit:
|
|
287
|
-
const e = t, u =
|
|
290
|
+
setup(t, { emit: b }) {
|
|
291
|
+
const e = t, u = b, n = j(null), d = j(!1), r = j(e.modelValue), f = j(""), i = p(() => ({
|
|
288
292
|
sm: "w-20 h-20",
|
|
289
293
|
md: "w-32 h-32",
|
|
290
294
|
lg: "w-48 h-48"
|
|
@@ -293,9 +297,9 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
293
297
|
($ = n.value) == null || $.click();
|
|
294
298
|
}, x = () => {
|
|
295
299
|
e.disabled || y();
|
|
296
|
-
},
|
|
300
|
+
}, L = ($) => {
|
|
297
301
|
e.disabled || (d.value = !0);
|
|
298
|
-
},
|
|
302
|
+
}, D = () => {
|
|
299
303
|
d.value = !1;
|
|
300
304
|
}, _ = ($) => {
|
|
301
305
|
if (f.value = "", e.maxSize && $.size > e.maxSize) {
|
|
@@ -303,31 +307,31 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
303
307
|
return f.value = `El archivo excede el tamaño máximo de ${B}MB`, u("error", f.value), !1;
|
|
304
308
|
}
|
|
305
309
|
return !0;
|
|
310
|
+
}, M = ($) => {
|
|
311
|
+
var I;
|
|
312
|
+
const z = (I = $.target.files) == null ? void 0 : I[0];
|
|
313
|
+
z && _(z) && (r.value = z, u("update:modelValue", z), u("change", z));
|
|
306
314
|
}, O = ($) => {
|
|
307
|
-
var
|
|
308
|
-
const T = (D = $.target.files) == null ? void 0 : D[0];
|
|
309
|
-
T && _(T) && (r.value = T, u("update:modelValue", T), u("change", T));
|
|
310
|
-
}, F = ($) => {
|
|
311
|
-
var T;
|
|
315
|
+
var z;
|
|
312
316
|
d.value = !1;
|
|
313
|
-
const B = (
|
|
317
|
+
const B = (z = $.dataTransfer) == null ? void 0 : z.files[0];
|
|
314
318
|
B && _(B) && (r.value = B, u("update:modelValue", B), u("change", B));
|
|
315
319
|
}, P = () => {
|
|
316
320
|
r.value = null, f.value = "", n.value && (n.value.value = ""), u("update:modelValue", null), u("change", null);
|
|
317
|
-
},
|
|
321
|
+
}, E = ($) => {
|
|
318
322
|
if ($ === 0) return "0 Bytes";
|
|
319
|
-
const B = 1024,
|
|
320
|
-
return Math.round($ / Math.pow(B,
|
|
323
|
+
const B = 1024, z = ["Bytes", "KB", "MB", "GB"], I = Math.floor(Math.log($) / Math.log(B));
|
|
324
|
+
return Math.round($ / Math.pow(B, I) * 100) / 100 + " " + z[I];
|
|
321
325
|
};
|
|
322
326
|
return ($, B) => (s(), o("div", {
|
|
323
|
-
class:
|
|
327
|
+
class: v(["relative border-2 border-dashed rounded-lg p-8 transition-colors", [
|
|
324
328
|
d.value ? "border-primary-700 bg-primary-50" : "border-gray-300 bg-white hover:border-primary-500",
|
|
325
329
|
t.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
|
|
326
330
|
]]),
|
|
327
331
|
onClick: x,
|
|
328
|
-
onDragover:
|
|
329
|
-
onDragleave:
|
|
330
|
-
onDrop:
|
|
332
|
+
onDragover: H(L, ["prevent"]),
|
|
333
|
+
onDragleave: H(D, ["prevent"]),
|
|
334
|
+
onDrop: H(O, ["prevent"])
|
|
331
335
|
}, [
|
|
332
336
|
a("input", {
|
|
333
337
|
ref_key: "fileInput",
|
|
@@ -337,11 +341,11 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
337
341
|
multiple: t.multiple,
|
|
338
342
|
disabled: t.disabled,
|
|
339
343
|
class: "hidden",
|
|
340
|
-
onChange:
|
|
344
|
+
onChange: M
|
|
341
345
|
}, null, 40, ke),
|
|
342
346
|
a("div", we, [
|
|
343
347
|
a("div", {
|
|
344
|
-
class:
|
|
348
|
+
class: v([i.value, "flex items-center justify-center"])
|
|
345
349
|
}, [
|
|
346
350
|
t.illustration ? (s(), o("img", {
|
|
347
351
|
key: 0,
|
|
@@ -366,7 +370,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
366
370
|
r.value ? (s(), o("div", {
|
|
367
371
|
key: 0,
|
|
368
372
|
class: "w-full max-w-md bg-gray-50 rounded-lg p-4 flex items-center justify-between",
|
|
369
|
-
onClick: B[0] || (B[0] =
|
|
373
|
+
onClick: B[0] || (B[0] = H(() => {
|
|
370
374
|
}, ["stop"]))
|
|
371
375
|
}, [
|
|
372
376
|
a("div", ze, [
|
|
@@ -385,12 +389,12 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
385
389
|
], -1)),
|
|
386
390
|
a("div", Me, [
|
|
387
391
|
a("p", Ve, w(r.value.name), 1),
|
|
388
|
-
a("p", je, w(
|
|
392
|
+
a("p", je, w(E(r.value.size)), 1)
|
|
389
393
|
])
|
|
390
394
|
]),
|
|
391
395
|
t.disabled ? c("", !0) : (s(), o("button", {
|
|
392
396
|
key: 0,
|
|
393
|
-
onClick:
|
|
397
|
+
onClick: H(P, ["stop"]),
|
|
394
398
|
class: "ml-3 text-gray-400 hover:text-danger-500 transition-colors"
|
|
395
399
|
}, [...B[3] || (B[3] = [
|
|
396
400
|
a("svg", {
|
|
@@ -414,7 +418,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
414
418
|
}), De = ["stroke-width"], Oe = {
|
|
415
419
|
class: "w-full h-full rounded-lg overflow-hidden",
|
|
416
420
|
style: { "background-color": "#f7f7f7" }
|
|
417
|
-
}, Ie = /* @__PURE__ */
|
|
421
|
+
}, Ie = /* @__PURE__ */ S({
|
|
418
422
|
__name: "Loader",
|
|
419
423
|
props: {
|
|
420
424
|
type: { default: "circular" },
|
|
@@ -425,7 +429,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
425
429
|
progress: { default: void 0 }
|
|
426
430
|
},
|
|
427
431
|
setup(t) {
|
|
428
|
-
const
|
|
432
|
+
const b = t, e = {
|
|
429
433
|
primary: "text-primary-700",
|
|
430
434
|
secondary: "text-secondary-500",
|
|
431
435
|
success: "text-success-500",
|
|
@@ -439,10 +443,10 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
439
443
|
warning: "bg-warning-500",
|
|
440
444
|
danger: "bg-danger-500",
|
|
441
445
|
info: "bg-info-500"
|
|
442
|
-
}, n =
|
|
446
|
+
}, n = p(() => [e[b.color]]), d = p(() => [u[b.color]]);
|
|
443
447
|
return (r, f) => t.type === "circular" ? (s(), o("div", {
|
|
444
448
|
key: 0,
|
|
445
|
-
class:
|
|
449
|
+
class: v(n.value)
|
|
446
450
|
}, [
|
|
447
451
|
(s(), o("svg", {
|
|
448
452
|
class: "animate-spin",
|
|
@@ -471,7 +475,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
471
475
|
}, [
|
|
472
476
|
a("div", Oe, [
|
|
473
477
|
a("div", {
|
|
474
|
-
class:
|
|
478
|
+
class: v([d.value, "h-full rounded-lg animate-linear-loader"]),
|
|
475
479
|
style: W({ width: t.progress ? `${t.progress}%` : void 0 })
|
|
476
480
|
}, null, 6)
|
|
477
481
|
])
|
|
@@ -492,7 +496,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
492
496
|
fill: "none",
|
|
493
497
|
stroke: "currentColor",
|
|
494
498
|
viewBox: "0 0 24 24"
|
|
495
|
-
}, Qe = /* @__PURE__ */
|
|
499
|
+
}, Qe = /* @__PURE__ */ S({
|
|
496
500
|
__name: "Menu",
|
|
497
501
|
props: {
|
|
498
502
|
items: { default: () => [] },
|
|
@@ -511,79 +515,80 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
511
515
|
zIndex: { default: 50 }
|
|
512
516
|
},
|
|
513
517
|
emits: ["open", "close", "select"],
|
|
514
|
-
setup(t, { emit:
|
|
515
|
-
const e = t, u =
|
|
518
|
+
setup(t, { emit: b }) {
|
|
519
|
+
const e = t, u = b, n = j(!1), d = j(null), r = j(null), f = j({}), i = p(() => [
|
|
516
520
|
"inline-flex items-center justify-center px-4 py-2 text-sm font-medium",
|
|
517
521
|
"bg-white border border-secondary-300 rounded-md",
|
|
518
522
|
"hover:bg-secondary-50 focus:outline-none focus:ring-2 focus:ring-primary-500",
|
|
519
523
|
"disabled:opacity-50 disabled:cursor-not-allowed",
|
|
520
524
|
"transition-colors"
|
|
521
|
-
].join(" ")), y =
|
|
525
|
+
].join(" ")), y = p(() => [...[
|
|
522
526
|
"fixed bg-white rounded-lg shadow-lg border border-secondary-200",
|
|
523
527
|
"flex flex-col",
|
|
524
528
|
"focus:outline-none"
|
|
525
|
-
], `z-${e.zIndex}`].join(" ")), x =
|
|
529
|
+
], `z-${e.zIndex}`].join(" ")), x = p(() => "px-4 py-3 border-b border-secondary-200 bg-secondary-50"), L = p(() => "px-4 py-3 border-t border-secondary-200 bg-secondary-50"), D = p(() => "py-1 overflow-y-auto flex-1 min-h-0"), _ = p(() => "my-1 border-t border-secondary-200"), M = p(() => "px-4 py-2 text-xs font-semibold text-secondary-500 uppercase tracking-wider"), O = (l) => {
|
|
526
530
|
const k = [
|
|
527
531
|
"w-full flex items-center gap-3 px-4 py-2 text-sm text-left",
|
|
528
532
|
"transition-colors focus:outline-none",
|
|
529
533
|
"disabled:opacity-50 disabled:cursor-not-allowed"
|
|
530
|
-
],
|
|
534
|
+
], g = l.variant || "default", N = {
|
|
531
535
|
default: "text-secondary-700 hover:bg-secondary-50 focus:bg-secondary-50",
|
|
532
536
|
danger: "text-danger-600 hover:bg-danger-50 focus:bg-danger-50",
|
|
533
537
|
success: "text-success-600 hover:bg-success-50 focus:bg-success-50",
|
|
534
538
|
warning: "text-warning-600 hover:bg-warning-50 focus:bg-warning-50"
|
|
535
539
|
};
|
|
536
|
-
|
|
540
|
+
let T = "";
|
|
541
|
+
return l.color && (T = l.color, (l.color.includes("white") || l.color.includes("50")) && (T += " hover:text-black")), [...k, T || N[g]].join(" ");
|
|
537
542
|
}, P = () => {
|
|
538
|
-
e.disabled || (n.value ? $() :
|
|
539
|
-
},
|
|
543
|
+
e.disabled || (n.value ? $() : E());
|
|
544
|
+
}, E = () => {
|
|
540
545
|
n.value = !0, u("open"), J(() => {
|
|
541
|
-
m(), document.addEventListener("click",
|
|
546
|
+
m(), document.addEventListener("click", z), document.addEventListener("keydown", I);
|
|
542
547
|
});
|
|
543
548
|
}, $ = () => {
|
|
544
|
-
n.value = !1, u("close"), document.removeEventListener("click",
|
|
549
|
+
n.value = !1, u("close"), document.removeEventListener("click", z), document.removeEventListener("keydown", I);
|
|
545
550
|
}, B = (l) => {
|
|
546
551
|
l.disabled || (l.action && l.action(), u("select", l), e.closeOnClick && !l.children && $());
|
|
547
|
-
},
|
|
552
|
+
}, z = (l) => {
|
|
548
553
|
const k = l.target;
|
|
549
554
|
d.value && !d.value.contains(k) && r.value && !r.value.contains(k) && $();
|
|
550
|
-
},
|
|
555
|
+
}, I = (l) => {
|
|
551
556
|
l.key === "Escape" && $();
|
|
552
557
|
}, h = (l) => {
|
|
553
558
|
(l.key === "Enter" || l.key === " ") && (l.preventDefault(), P());
|
|
554
559
|
}, m = () => {
|
|
555
560
|
if (!d.value || !r.value) return;
|
|
556
|
-
const l = d.value.getBoundingClientRect(), k = r.value.getBoundingClientRect(),
|
|
557
|
-
let
|
|
561
|
+
const l = d.value.getBoundingClientRect(), k = r.value.getBoundingClientRect(), g = window.innerWidth, N = window.innerHeight;
|
|
562
|
+
let T = 0, V = 0;
|
|
558
563
|
switch (e.position) {
|
|
559
564
|
case "bottom-start":
|
|
560
|
-
|
|
565
|
+
T = l.bottom + e.offset.y, V = l.left + e.offset.x;
|
|
561
566
|
break;
|
|
562
567
|
case "bottom-end":
|
|
563
|
-
|
|
568
|
+
T = l.bottom + e.offset.y, V = l.right - k.width + e.offset.x;
|
|
564
569
|
break;
|
|
565
570
|
case "top-start":
|
|
566
|
-
|
|
571
|
+
T = l.top - k.height - e.offset.y, V = l.left + e.offset.x;
|
|
567
572
|
break;
|
|
568
573
|
case "top-end":
|
|
569
|
-
|
|
574
|
+
T = l.top - k.height - e.offset.y, V = l.right - k.width + e.offset.x;
|
|
570
575
|
break;
|
|
571
576
|
case "right-start":
|
|
572
|
-
|
|
577
|
+
T = l.top + e.offset.y, V = l.right + e.offset.x;
|
|
573
578
|
break;
|
|
574
579
|
case "right-end":
|
|
575
|
-
|
|
580
|
+
T = l.bottom - k.height + e.offset.y, V = l.right + e.offset.x;
|
|
576
581
|
break;
|
|
577
582
|
case "left-start":
|
|
578
|
-
|
|
583
|
+
T = l.top + e.offset.y, V = l.left - k.width - e.offset.x;
|
|
579
584
|
break;
|
|
580
585
|
case "left-end":
|
|
581
|
-
|
|
586
|
+
T = l.bottom - k.height + e.offset.y, V = l.left - k.width - e.offset.x;
|
|
582
587
|
break;
|
|
583
588
|
}
|
|
584
|
-
|
|
585
|
-
top: `${
|
|
586
|
-
left: `${
|
|
589
|
+
V + k.width > g && (V = g - k.width - 8), V < 8 && (V = 8), T + k.height > N && (T = N - k.height - 8), T < 8 && (T = 8), f.value = {
|
|
590
|
+
top: `${T}px`,
|
|
591
|
+
left: `${V}px`,
|
|
587
592
|
width: e.width === "auto" ? `${Math.max(l.width, 240)}px` : e.width,
|
|
588
593
|
maxHeight: e.maxHeight,
|
|
589
594
|
minWidth: "240px"
|
|
@@ -592,11 +597,11 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
592
597
|
return ee(() => {
|
|
593
598
|
window.addEventListener("scroll", m, !0), window.addEventListener("resize", m);
|
|
594
599
|
}), te(() => {
|
|
595
|
-
window.removeEventListener("scroll", m, !0), window.removeEventListener("resize", m), document.removeEventListener("click",
|
|
600
|
+
window.removeEventListener("scroll", m, !0), window.removeEventListener("resize", m), document.removeEventListener("click", z), document.removeEventListener("keydown", I);
|
|
596
601
|
}), Y(() => e.items, () => {
|
|
597
602
|
n.value && J(m);
|
|
598
603
|
}, { deep: !0 }), (l, k) => (s(), o("div", {
|
|
599
|
-
class:
|
|
604
|
+
class: v(["menu-wrapper", { "w-full": t.fullWidth }])
|
|
600
605
|
}, [
|
|
601
606
|
a("div", {
|
|
602
607
|
ref_key: "triggerRef",
|
|
@@ -608,7 +613,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
608
613
|
}, () => [
|
|
609
614
|
a("button", {
|
|
610
615
|
type: "button",
|
|
611
|
-
class:
|
|
616
|
+
class: v(i.value),
|
|
612
617
|
disabled: t.disabled,
|
|
613
618
|
onClick: P,
|
|
614
619
|
onKeydown: h,
|
|
@@ -622,7 +627,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
622
627
|
], !0),
|
|
623
628
|
t.showChevron ? (s(), o("svg", {
|
|
624
629
|
key: 0,
|
|
625
|
-
class:
|
|
630
|
+
class: v(["w-4 h-4 ml-2 transition-transform", n.value ? "rotate-180" : ""]),
|
|
626
631
|
fill: "none",
|
|
627
632
|
stroke: "currentColor",
|
|
628
633
|
viewBox: "0 0 24 24"
|
|
@@ -642,76 +647,76 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
642
647
|
key: 0,
|
|
643
648
|
ref_key: "menuRef",
|
|
644
649
|
ref: r,
|
|
645
|
-
class:
|
|
650
|
+
class: v(y.value),
|
|
646
651
|
style: W(f.value),
|
|
647
|
-
onClick: k[0] || (k[0] =
|
|
652
|
+
onClick: k[0] || (k[0] = H(() => {
|
|
648
653
|
}, ["stop"]))
|
|
649
654
|
}, [
|
|
650
655
|
l.$slots.header ? (s(), o("div", {
|
|
651
656
|
key: 0,
|
|
652
|
-
class:
|
|
657
|
+
class: v(x.value)
|
|
653
658
|
}, [
|
|
654
659
|
C(l.$slots, "header", { close: $ }, void 0, !0)
|
|
655
660
|
], 2)) : c("", !0),
|
|
656
661
|
a("div", {
|
|
657
|
-
class:
|
|
662
|
+
class: v(D.value)
|
|
658
663
|
}, [
|
|
659
664
|
C(l.$slots, "default", {
|
|
660
665
|
close: $,
|
|
661
666
|
isOpen: n.value
|
|
662
667
|
}, () => [
|
|
663
|
-
(s(!0), o(
|
|
664
|
-
key:
|
|
668
|
+
(s(!0), o(F, null, A(t.items, (g, N) => (s(), o(F, {
|
|
669
|
+
key: g.id || N
|
|
665
670
|
}, [
|
|
666
|
-
|
|
671
|
+
g.type === "divider" ? (s(), o("div", {
|
|
667
672
|
key: 0,
|
|
668
|
-
class:
|
|
669
|
-
}, null, 2)) :
|
|
673
|
+
class: v(_.value)
|
|
674
|
+
}, null, 2)) : g.type === "header" ? (s(), o("div", {
|
|
670
675
|
key: 1,
|
|
671
|
-
class:
|
|
672
|
-
}, w(
|
|
676
|
+
class: v(M.value)
|
|
677
|
+
}, w(g.label), 3)) : (s(), o("button", {
|
|
673
678
|
key: 2,
|
|
674
679
|
type: "button",
|
|
675
|
-
class:
|
|
676
|
-
disabled:
|
|
677
|
-
onClick: (
|
|
680
|
+
class: v(O(g)),
|
|
681
|
+
disabled: g.disabled,
|
|
682
|
+
onClick: (T) => B(g)
|
|
678
683
|
}, [
|
|
679
|
-
|
|
680
|
-
C(l.$slots, `icon-${
|
|
681
|
-
typeof
|
|
684
|
+
g.icon || l.$slots[`icon-${g.id}`] ? (s(), o("span", Fe, [
|
|
685
|
+
C(l.$slots, `icon-${g.id}`, { item: g }, () => [
|
|
686
|
+
typeof g.icon != "string" ? (s(), q(Z(g.icon), {
|
|
682
687
|
key: 0,
|
|
683
688
|
class: "w-5 h-5"
|
|
684
689
|
})) : (s(), o("span", {
|
|
685
690
|
key: 1,
|
|
686
|
-
innerHTML:
|
|
691
|
+
innerHTML: g.icon,
|
|
687
692
|
class: "w-5 h-5 inline-block"
|
|
688
693
|
}, null, 8, Pe))
|
|
689
694
|
], !0)
|
|
690
695
|
])) : c("", !0),
|
|
691
696
|
a("div", We, [
|
|
692
|
-
C(l.$slots, `item-${
|
|
693
|
-
item:
|
|
697
|
+
C(l.$slots, `item-${g.id}`, {
|
|
698
|
+
item: g,
|
|
694
699
|
close: $
|
|
695
700
|
}, () => [
|
|
696
701
|
a("div", Ae, [
|
|
697
702
|
a("span", {
|
|
698
703
|
class: "truncate w-full",
|
|
699
|
-
title:
|
|
700
|
-
}, w(
|
|
701
|
-
|
|
704
|
+
title: g.label
|
|
705
|
+
}, w(g.label), 9, Ke),
|
|
706
|
+
g.description ? (s(), o("span", {
|
|
702
707
|
key: 0,
|
|
703
708
|
class: "text-xs text-secondary-500 truncate w-full",
|
|
704
|
-
title:
|
|
705
|
-
}, w(
|
|
709
|
+
title: g.description
|
|
710
|
+
}, w(g.description), 9, Re)) : c("", !0)
|
|
706
711
|
])
|
|
707
712
|
], !0)
|
|
708
713
|
]),
|
|
709
|
-
|
|
710
|
-
C(l.$slots, `suffix-${
|
|
711
|
-
|
|
714
|
+
g.suffix || g.shortcut || l.$slots[`suffix-${g.id}`] ? (s(), o("span", Ne, [
|
|
715
|
+
C(l.$slots, `suffix-${g.id}`, { item: g }, () => [
|
|
716
|
+
g.shortcut ? (s(), o("span", qe, w(g.shortcut), 1)) : g.suffix ? (s(), o("span", Ue, w(g.suffix), 1)) : c("", !0)
|
|
712
717
|
], !0)
|
|
713
718
|
])) : c("", !0),
|
|
714
|
-
|
|
719
|
+
g.children && g.children.length > 0 ? (s(), o("svg", Ge, [...k[2] || (k[2] = [
|
|
715
720
|
a("path", {
|
|
716
721
|
"stroke-linecap": "round",
|
|
717
722
|
"stroke-linejoin": "round",
|
|
@@ -725,7 +730,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
725
730
|
], 2),
|
|
726
731
|
l.$slots.footer ? (s(), o("div", {
|
|
727
732
|
key: 1,
|
|
728
|
-
class:
|
|
733
|
+
class: v(L.value)
|
|
729
734
|
}, [
|
|
730
735
|
C(l.$slots, "footer", { close: $ }, void 0, !0)
|
|
731
736
|
], 2)) : c("", !0)
|
|
@@ -738,7 +743,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
738
743
|
]))
|
|
739
744
|
], 2));
|
|
740
745
|
}
|
|
741
|
-
}), Rt = /* @__PURE__ */ R(Qe, [["__scopeId", "data-v-
|
|
746
|
+
}), Rt = /* @__PURE__ */ R(Qe, [["__scopeId", "data-v-335f2699"]]), Je = ["for"], Xe = {
|
|
742
747
|
key: 0,
|
|
743
748
|
class: "text-danger-600"
|
|
744
749
|
}, Ye = { class: "relative" }, Ze = ["id", "disabled", "aria-expanded"], et = { class: "flex-1 text-left truncate" }, tt = {
|
|
@@ -763,7 +768,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
763
768
|
}, pt = {
|
|
764
769
|
key: 2,
|
|
765
770
|
class: "mt-1 text-sm text-secondary-600"
|
|
766
|
-
}, gt = /* @__PURE__ */
|
|
771
|
+
}, gt = /* @__PURE__ */ S({
|
|
767
772
|
__name: "Select",
|
|
768
773
|
props: {
|
|
769
774
|
modelValue: { default: null },
|
|
@@ -784,15 +789,15 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
784
789
|
menuPosition: { default: "bottom" }
|
|
785
790
|
},
|
|
786
791
|
emits: ["update:modelValue", "change", "action"],
|
|
787
|
-
setup(t, { emit:
|
|
788
|
-
const e = t, u =
|
|
792
|
+
setup(t, { emit: b }) {
|
|
793
|
+
const e = t, u = b, n = j(!1), d = j(""), r = j(null), f = p(
|
|
789
794
|
() => `select-${Math.random().toString(36).substr(2, 9)}`
|
|
790
|
-
), i =
|
|
795
|
+
), i = p(() => e.options.find((h) => h.value === e.modelValue) || null), y = p(() => {
|
|
791
796
|
if (!e.searchable || !d.value)
|
|
792
797
|
return e.options;
|
|
793
798
|
const h = d.value.toLowerCase();
|
|
794
799
|
return e.options.filter((m) => m.label.toLowerCase().includes(h));
|
|
795
|
-
}), x =
|
|
800
|
+
}), x = p(() => "block text-sm font-semibold text-secondary-700 mb-1"), L = p(() => {
|
|
796
801
|
const h = "w-full flex items-center justify-between gap-2 border rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed", m = {
|
|
797
802
|
sm: "px-3 py-1.5 text-sm",
|
|
798
803
|
md: "px-4 py-2 text-base",
|
|
@@ -808,40 +813,40 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
808
813
|
l[e.variant],
|
|
809
814
|
k
|
|
810
815
|
].join(" ");
|
|
811
|
-
}),
|
|
812
|
-
const m = "w-full px-4 py-2 text-left hover:bg-primary-50 transition-colors focus:outline-none focus:bg-primary-50 disabled:opacity-50 disabled:cursor-not-allowed", l =
|
|
816
|
+
}), D = p(() => `absolute ${e.menuPosition === "top" ? "bottom-full mb-1" : "top-full mt-1"} left-0 right-0 bg-white rounded-lg shadow-lg border border-secondary-200 z-50 overflow-hidden`), _ = (h) => {
|
|
817
|
+
const m = "w-full px-4 py-2 text-left hover:bg-primary-50 transition-colors focus:outline-none focus:bg-primary-50 disabled:opacity-50 disabled:cursor-not-allowed", l = O(h) ? "bg-primary-50" : "";
|
|
813
818
|
return [m, l].join(" ");
|
|
814
|
-
},
|
|
819
|
+
}, M = (h) => {
|
|
815
820
|
const m = "w-full px-4 py-2 text-left text-sm font-semibold transition-colors focus:outline-none flex items-center gap-3";
|
|
816
821
|
return h.variant === "danger" ? `${m} text-danger-600 hover:bg-danger-50 focus:bg-danger-50` : `${m} text-secondary-700 hover:bg-secondary-50 focus:bg-secondary-50`;
|
|
817
|
-
},
|
|
822
|
+
}, O = (h) => h.value === e.modelValue, P = () => {
|
|
818
823
|
e.disabled || (n.value = !n.value, n.value && e.searchable && J(() => {
|
|
819
824
|
var h;
|
|
820
825
|
(h = r.value) == null || h.focus();
|
|
821
826
|
}));
|
|
822
|
-
},
|
|
827
|
+
}, E = () => {
|
|
823
828
|
n.value = !1, d.value = "";
|
|
824
829
|
}, $ = (h) => {
|
|
825
|
-
h.disabled || (u("update:modelValue", h.value), u("change", h),
|
|
830
|
+
h.disabled || (u("update:modelValue", h.value), u("change", h), E());
|
|
826
831
|
}, B = (h) => {
|
|
827
|
-
h.action && h.action(), u("action", h),
|
|
828
|
-
},
|
|
832
|
+
h.action && h.action(), u("action", h), E();
|
|
833
|
+
}, z = (h) => {
|
|
829
834
|
const m = h.relatedTarget;
|
|
830
835
|
m && m.closest(".select-wrapper") || setTimeout(() => {
|
|
831
|
-
|
|
836
|
+
E();
|
|
832
837
|
}, 200);
|
|
833
|
-
},
|
|
834
|
-
h.key === "Escape" ?
|
|
838
|
+
}, I = (h) => {
|
|
839
|
+
h.key === "Escape" ? E() : (h.key === "Enter" || h.key === " ") && (h.preventDefault(), P());
|
|
835
840
|
};
|
|
836
841
|
return Y(n, (h) => {
|
|
837
842
|
h && (d.value = "");
|
|
838
843
|
}), (h, m) => (s(), o("div", {
|
|
839
|
-
class:
|
|
844
|
+
class: v(["select-wrapper", { "w-full": t.fullWidth }])
|
|
840
845
|
}, [
|
|
841
846
|
t.label ? (s(), o("label", {
|
|
842
847
|
key: 0,
|
|
843
848
|
for: f.value,
|
|
844
|
-
class:
|
|
849
|
+
class: v(x.value)
|
|
845
850
|
}, [
|
|
846
851
|
K(w(t.label) + " ", 1),
|
|
847
852
|
t.required ? (s(), o("span", Xe, "*")) : c("", !0)
|
|
@@ -850,17 +855,17 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
850
855
|
a("button", {
|
|
851
856
|
id: f.value,
|
|
852
857
|
type: "button",
|
|
853
|
-
class:
|
|
858
|
+
class: v(L.value),
|
|
854
859
|
disabled: t.disabled,
|
|
855
860
|
"aria-expanded": n.value,
|
|
856
861
|
"aria-haspopup": !0,
|
|
857
862
|
onClick: P,
|
|
858
|
-
onBlur:
|
|
859
|
-
onKeydown:
|
|
863
|
+
onBlur: z,
|
|
864
|
+
onKeydown: I
|
|
860
865
|
}, [
|
|
861
866
|
a("span", et, w(i.value ? i.value.label : t.placeholder), 1),
|
|
862
867
|
(s(), o("svg", {
|
|
863
|
-
class:
|
|
868
|
+
class: v(["w-5 h-5 flex-shrink-0 transition-transform text-secondary-600", n.value ? "rotate-180" : ""]),
|
|
864
869
|
fill: "none",
|
|
865
870
|
stroke: "currentColor",
|
|
866
871
|
viewBox: "0 0 24 24",
|
|
@@ -876,8 +881,8 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
876
881
|
], 42, Ze),
|
|
877
882
|
n.value ? (s(), o("div", {
|
|
878
883
|
key: 0,
|
|
879
|
-
class:
|
|
880
|
-
onClick: m[2] || (m[2] =
|
|
884
|
+
class: v(D.value),
|
|
885
|
+
onClick: m[2] || (m[2] = H(() => {
|
|
881
886
|
}, ["stop"]))
|
|
882
887
|
}, [
|
|
883
888
|
t.searchable ? (s(), o("div", tt, [
|
|
@@ -888,23 +893,23 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
888
893
|
type: "text",
|
|
889
894
|
class: "w-full px-3 py-2 text-sm border border-secondary-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500",
|
|
890
895
|
placeholder: t.searchPlaceholder,
|
|
891
|
-
onKeydown: m[1] || (m[1] =
|
|
896
|
+
onKeydown: m[1] || (m[1] = H(() => {
|
|
892
897
|
}, ["stop"]))
|
|
893
898
|
}, null, 40, st), [
|
|
894
899
|
[oe, d.value]
|
|
895
900
|
])
|
|
896
901
|
])) : c("", !0),
|
|
897
902
|
a("div", ot, [
|
|
898
|
-
y.value.length === 0 ? (s(), o("div", lt, w(t.emptyText), 1)) : (s(), o(
|
|
899
|
-
(s(!0), o(
|
|
903
|
+
y.value.length === 0 ? (s(), o("div", lt, w(t.emptyText), 1)) : (s(), o(F, { key: 1 }, [
|
|
904
|
+
(s(!0), o(F, null, A(y.value, (l) => (s(), o("button", {
|
|
900
905
|
key: l.value,
|
|
901
906
|
type: "button",
|
|
902
|
-
class:
|
|
907
|
+
class: v(_(l)),
|
|
903
908
|
onClick: (k) => $(l)
|
|
904
909
|
}, [
|
|
905
910
|
a("div", nt, [
|
|
906
911
|
a("span", rt, w(l.label), 1),
|
|
907
|
-
|
|
912
|
+
O(l) ? (s(), o("svg", it, [...m[4] || (m[4] = [
|
|
908
913
|
a("path", {
|
|
909
914
|
"stroke-linecap": "round",
|
|
910
915
|
"stroke-linejoin": "round",
|
|
@@ -915,10 +920,10 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
915
920
|
])
|
|
916
921
|
], 10, at))), 128)),
|
|
917
922
|
t.actionItems.length > 0 ? (s(), o("div", dt)) : c("", !0),
|
|
918
|
-
(s(!0), o(
|
|
923
|
+
(s(!0), o(F, null, A(t.actionItems, (l) => (s(), o("button", {
|
|
919
924
|
key: l.id,
|
|
920
925
|
type: "button",
|
|
921
|
-
class:
|
|
926
|
+
class: v(M(l)),
|
|
922
927
|
onClick: (k) => B(l)
|
|
923
928
|
}, [
|
|
924
929
|
l.icon ? (s(), o("svg", {
|
|
@@ -939,12 +944,12 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
939
944
|
t.error ? (s(), o("p", ft, w(t.error), 1)) : t.helperText ? (s(), o("p", pt, w(t.helperText), 1)) : c("", !0),
|
|
940
945
|
n.value ? (s(), o("div", {
|
|
941
946
|
key: 3,
|
|
942
|
-
onClick:
|
|
947
|
+
onClick: E,
|
|
943
948
|
class: "fixed inset-0 z-40"
|
|
944
949
|
})) : c("", !0)
|
|
945
950
|
], 2));
|
|
946
951
|
}
|
|
947
|
-
}), Nt = /* @__PURE__ */ R(gt, [["__scopeId", "data-v-f016a03c"]]), ht = /* @__PURE__ */
|
|
952
|
+
}), Nt = /* @__PURE__ */ R(gt, [["__scopeId", "data-v-f016a03c"]]), ht = /* @__PURE__ */ S({
|
|
948
953
|
__name: "Sidebar",
|
|
949
954
|
props: {
|
|
950
955
|
modelValue: { type: Boolean, default: !1 },
|
|
@@ -959,16 +964,16 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
959
964
|
padding: { default: "md" }
|
|
960
965
|
},
|
|
961
966
|
emits: ["update:modelValue", "close", "open"],
|
|
962
|
-
setup(t, { emit:
|
|
963
|
-
const e = t, u =
|
|
967
|
+
setup(t, { emit: b }) {
|
|
968
|
+
const e = t, u = b, n = p({
|
|
964
969
|
get: () => e.modelValue,
|
|
965
970
|
set: (_) => u("update:modelValue", _)
|
|
966
971
|
}), d = () => {
|
|
967
972
|
e.persistent || (n.value = !1, u("close"));
|
|
968
|
-
}, r =
|
|
969
|
-
const _ = "fixed top-0 h-full z-50 flex flex-col",
|
|
970
|
-
return [_,
|
|
971
|
-
}), i =
|
|
973
|
+
}, r = p(() => e.position === "left" ? "slide-right" : "slide-left"), f = p(() => {
|
|
974
|
+
const _ = "fixed top-0 h-full z-50 flex flex-col", M = e.position === "left" ? "left-0" : "right-0", O = e.shadow ? e.position === "left" ? "shadow-[2px_0_8px_rgba(0,0,0,0.1)]" : "shadow-[-2px_0_8px_rgba(0,0,0,0.1)]" : "";
|
|
975
|
+
return [_, M, O].filter(Boolean).join(" ");
|
|
976
|
+
}), i = p(() => ({
|
|
972
977
|
width: e.width,
|
|
973
978
|
backgroundColor: e.backgroundColor,
|
|
974
979
|
top: e.overlayTop,
|
|
@@ -978,8 +983,8 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
978
983
|
sm: "p-2",
|
|
979
984
|
md: "p-4",
|
|
980
985
|
lg: "p-6"
|
|
981
|
-
}, x =
|
|
982
|
-
return (_,
|
|
986
|
+
}, x = p(() => `flex items-center justify-between border-b border-gray-200 ${y[e.padding]}`), L = p(() => `flex-1 overflow-y-auto ${y[e.padding]}`), D = p(() => `border-t border-gray-200 ${y[e.padding]}`);
|
|
987
|
+
return (_, M) => (s(), q(X, { to: "body" }, [
|
|
983
988
|
G(Q, { name: "fade" }, {
|
|
984
989
|
default: U(() => [
|
|
985
990
|
n.value && t.overlay ? (s(), o("div", {
|
|
@@ -995,12 +1000,12 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
995
1000
|
default: U(() => [
|
|
996
1001
|
n.value ? (s(), o("aside", {
|
|
997
1002
|
key: 0,
|
|
998
|
-
class:
|
|
1003
|
+
class: v(f.value),
|
|
999
1004
|
style: W(i.value)
|
|
1000
1005
|
}, [
|
|
1001
1006
|
_.$slots.header ? (s(), o("div", {
|
|
1002
1007
|
key: 0,
|
|
1003
|
-
class:
|
|
1008
|
+
class: v(x.value)
|
|
1004
1009
|
}, [
|
|
1005
1010
|
C(_.$slots, "header", {}, void 0, !0),
|
|
1006
1011
|
t.closable ? (s(), o("button", {
|
|
@@ -1008,7 +1013,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
1008
1013
|
onClick: d,
|
|
1009
1014
|
class: "p-2 hover:bg-gray-100 rounded-md transition-colors",
|
|
1010
1015
|
"aria-label": "Cerrar menú"
|
|
1011
|
-
}, [...
|
|
1016
|
+
}, [...M[0] || (M[0] = [
|
|
1012
1017
|
a("svg", {
|
|
1013
1018
|
class: "w-5 h-5",
|
|
1014
1019
|
fill: "none",
|
|
@@ -1025,13 +1030,13 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
1025
1030
|
])])) : c("", !0)
|
|
1026
1031
|
], 2)) : c("", !0),
|
|
1027
1032
|
a("div", {
|
|
1028
|
-
class:
|
|
1033
|
+
class: v(L.value)
|
|
1029
1034
|
}, [
|
|
1030
1035
|
C(_.$slots, "default", {}, void 0, !0)
|
|
1031
1036
|
], 2),
|
|
1032
1037
|
_.$slots.footer ? (s(), o("div", {
|
|
1033
1038
|
key: 1,
|
|
1034
|
-
class:
|
|
1039
|
+
class: v(D.value)
|
|
1035
1040
|
}, [
|
|
1036
1041
|
C(_.$slots, "footer", {}, void 0, !0)
|
|
1037
1042
|
], 2)) : c("", !0)
|
|
@@ -1041,7 +1046,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
1041
1046
|
}, 8, ["name"])
|
|
1042
1047
|
]));
|
|
1043
1048
|
}
|
|
1044
|
-
}), qt = /* @__PURE__ */ R(ht, [["__scopeId", "data-v-fffb0e44"]]),
|
|
1049
|
+
}), qt = /* @__PURE__ */ R(ht, [["__scopeId", "data-v-fffb0e44"]]), vt = { class: "w-full overflow-x-auto" }, bt = { class: "w-full border-collapse" }, yt = { class: "w-full" }, xt = { class: "bg-white border-b border-gray-100 w-full" }, mt = ["onClick"], kt = { class: "flex items-center gap-2" }, wt = {
|
|
1045
1050
|
key: 0,
|
|
1046
1051
|
class: "text-xs text-gray-400"
|
|
1047
1052
|
}, $t = { key: 0 }, Ct = { key: 1 }, Bt = { class: "w-full" }, _t = {
|
|
@@ -1050,32 +1055,32 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
1050
1055
|
}, Tt = {
|
|
1051
1056
|
key: 1,
|
|
1052
1057
|
class: "w-full px-6 py-4 bg-white"
|
|
1053
|
-
}, zt = /* @__PURE__ */
|
|
1058
|
+
}, zt = /* @__PURE__ */ S({
|
|
1054
1059
|
__name: "Table",
|
|
1055
1060
|
props: {
|
|
1056
1061
|
columns: {},
|
|
1057
1062
|
data: {}
|
|
1058
1063
|
},
|
|
1059
1064
|
setup(t) {
|
|
1060
|
-
const
|
|
1065
|
+
const b = t, e = j(null), u = j("asc"), n = (r) => {
|
|
1061
1066
|
e.value === r ? u.value = u.value === "asc" ? "desc" : "asc" : (e.value = r, u.value = "asc");
|
|
1062
|
-
}, d =
|
|
1067
|
+
}, d = p(() => {
|
|
1063
1068
|
if (!e.value)
|
|
1064
|
-
return
|
|
1065
|
-
const r = [...
|
|
1069
|
+
return b.data;
|
|
1070
|
+
const r = [...b.data];
|
|
1066
1071
|
return r.sort((f, i) => {
|
|
1067
1072
|
const y = f[e.value], x = i[e.value];
|
|
1068
1073
|
return typeof y == "string" && typeof x == "string" ? u.value === "asc" ? y.localeCompare(x) : x.localeCompare(y) : typeof y == "number" && typeof x == "number" ? u.value === "asc" ? y - x : x - y : 0;
|
|
1069
1074
|
}), r;
|
|
1070
1075
|
});
|
|
1071
|
-
return (r, f) => (s(), o("div",
|
|
1072
|
-
a("table",
|
|
1076
|
+
return (r, f) => (s(), o("div", vt, [
|
|
1077
|
+
a("table", bt, [
|
|
1073
1078
|
a("thead", yt, [
|
|
1074
1079
|
a("tr", xt, [
|
|
1075
|
-
(s(!0), o(
|
|
1080
|
+
(s(!0), o(F, null, A(t.columns, (i) => (s(), o("th", {
|
|
1076
1081
|
key: i.key,
|
|
1077
1082
|
style: W(i.width ? { width: i.width } : {}),
|
|
1078
|
-
class:
|
|
1083
|
+
class: v([
|
|
1079
1084
|
"px-8 py-4 text-left text-base font-semibold text-gray-900 border-0",
|
|
1080
1085
|
i.sortable ? "cursor-pointer hover:text-primary-700 select-none transition-colors" : ""
|
|
1081
1086
|
]),
|
|
@@ -1091,11 +1096,11 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
1091
1096
|
])
|
|
1092
1097
|
]),
|
|
1093
1098
|
a("tbody", Bt, [
|
|
1094
|
-
(s(!0), o(
|
|
1099
|
+
(s(!0), o(F, null, A(d.value, (i, y) => (s(), o("tr", {
|
|
1095
1100
|
key: y,
|
|
1096
1101
|
class: "w-full hover:bg-gray-50 transition-colors"
|
|
1097
1102
|
}, [
|
|
1098
|
-
(s(!0), o(
|
|
1103
|
+
(s(!0), o(F, null, A(t.columns, (x) => (s(), o("td", {
|
|
1099
1104
|
key: `${y}-${x.key}`,
|
|
1100
1105
|
class: "px-8 py-4 text-base text-gray-700 border-0"
|
|
1101
1106
|
}, [
|
|
@@ -1122,31 +1127,31 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
1122
1127
|
}), Ut = /* @__PURE__ */ R(zt, [["__scopeId", "data-v-6b3ff0a8"]]), Mt = { class: "w-full" }, Vt = {
|
|
1123
1128
|
class: "flex border-b border-gray-100",
|
|
1124
1129
|
role: "tablist"
|
|
1125
|
-
}, jt = ["aria-selected", "onClick"], Lt = { role: "tabpanel" }, St = "relative px-6 py-3 text-base font-semibold tracking-wide transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500", Dt = "text-primary-700 border-b-4 border-primary-700", Ot = "text-gray-600 border-b-4 border-transparent hover:text-gray-800", Gt = /* @__PURE__ */
|
|
1130
|
+
}, jt = ["aria-selected", "onClick"], Lt = { role: "tabpanel" }, St = "relative px-6 py-3 text-base font-semibold tracking-wide transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-500", Dt = "text-primary-700 border-b-4 border-primary-700", Ot = "text-gray-600 border-b-4 border-transparent hover:text-gray-800", Gt = /* @__PURE__ */ S({
|
|
1126
1131
|
__name: "Tabs",
|
|
1127
1132
|
props: {
|
|
1128
1133
|
modelValue: {},
|
|
1129
1134
|
tabs: {}
|
|
1130
1135
|
},
|
|
1131
1136
|
emits: ["update:modelValue"],
|
|
1132
|
-
setup(t, { emit:
|
|
1133
|
-
const e = t, u =
|
|
1137
|
+
setup(t, { emit: b }) {
|
|
1138
|
+
const e = t, u = b, n = (i) => e.modelValue === i, d = (i) => {
|
|
1134
1139
|
n(i) || u("update:modelValue", i);
|
|
1135
|
-
}, r =
|
|
1140
|
+
}, r = p(() => e.modelValue), f = p(
|
|
1136
1141
|
() => e.tabs.find((i) => i.value === r.value)
|
|
1137
1142
|
);
|
|
1138
1143
|
return (i, y) => (s(), o("div", Mt, [
|
|
1139
1144
|
a("div", Vt, [
|
|
1140
|
-
(s(!0), o(
|
|
1145
|
+
(s(!0), o(F, null, A(t.tabs, (x) => (s(), o("button", {
|
|
1141
1146
|
key: x.value,
|
|
1142
1147
|
type: "button",
|
|
1143
|
-
class:
|
|
1148
|
+
class: v([
|
|
1144
1149
|
St,
|
|
1145
1150
|
n(x.value) ? Dt : Ot
|
|
1146
1151
|
]),
|
|
1147
1152
|
"aria-selected": n(x.value),
|
|
1148
1153
|
role: "tab",
|
|
1149
|
-
onClick: (
|
|
1154
|
+
onClick: (L) => d(x.value)
|
|
1150
1155
|
}, w(x.label), 11, jt))), 128))
|
|
1151
1156
|
]),
|
|
1152
1157
|
a("div", Lt, [
|
|
@@ -1157,7 +1162,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
1157
1162
|
])
|
|
1158
1163
|
]));
|
|
1159
1164
|
}
|
|
1160
|
-
}), It = "font-sans", Qt = /* @__PURE__ */
|
|
1165
|
+
}), It = "font-sans", Qt = /* @__PURE__ */ S({
|
|
1161
1166
|
__name: "Text",
|
|
1162
1167
|
props: {
|
|
1163
1168
|
variant: { default: "body1" },
|
|
@@ -1169,7 +1174,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
1169
1174
|
weight: {}
|
|
1170
1175
|
},
|
|
1171
1176
|
setup(t) {
|
|
1172
|
-
const
|
|
1177
|
+
const b = {
|
|
1173
1178
|
h1: "text-[40px] leading-[57px] tracking-[0px] font-extrabold",
|
|
1174
1179
|
h2: "text-[40px] leading-[57px] tracking-[0px] font-bold",
|
|
1175
1180
|
h3: "text-[28px] leading-[39px] tracking-[0px] font-extrabold",
|
|
@@ -1229,14 +1234,14 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
1229
1234
|
semibold: "font-semibold",
|
|
1230
1235
|
bold: "font-bold",
|
|
1231
1236
|
extrabold: "font-extrabold"
|
|
1232
|
-
}, r = t, f =
|
|
1233
|
-
return (
|
|
1234
|
-
class:
|
|
1237
|
+
}, r = t, f = p(() => r.variant), i = p(() => r.color), y = p(() => r.align), x = p(() => r.as || e[f.value] || "span"), L = p(() => r.weight ? d[r.weight] : "");
|
|
1238
|
+
return (D, _) => (s(), q(Z(x.value), {
|
|
1239
|
+
class: v([
|
|
1235
1240
|
It,
|
|
1236
|
-
|
|
1241
|
+
b[f.value],
|
|
1237
1242
|
n[i.value],
|
|
1238
1243
|
u[y.value],
|
|
1239
|
-
|
|
1244
|
+
L.value,
|
|
1240
1245
|
{
|
|
1241
1246
|
uppercase: t.uppercase || f.value === "overline",
|
|
1242
1247
|
truncate: t.truncate
|
|
@@ -1244,7 +1249,7 @@ const le = { class: "flex items-center gap-4" }, ae = {
|
|
|
1244
1249
|
])
|
|
1245
1250
|
}, {
|
|
1246
1251
|
default: U(() => [
|
|
1247
|
-
C(
|
|
1252
|
+
C(D.$slots, "default")
|
|
1248
1253
|
]),
|
|
1249
1254
|
_: 3
|
|
1250
1255
|
}, 8, ["class"]));
|