@krds.ui/vue 0.0.16 → 0.0.17
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/README.md +83 -35
- package/dist/krds-vue.es.js +855 -811
- package/dist/krds-vue.es.js.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/index.d.ts +2828 -131
- package/package.json +9 -15
package/dist/krds-vue.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Comment as je, Fragment as Ge, Teleport as Ce, Text as Ue, computed as b, defineComponent as
|
|
1
|
+
import { Comment as je, Fragment as Ge, Teleport as Ce, Text as Ue, computed as b, defineComponent as M, getCurrentInstance as xe, h as t, inject as Xe, nextTick as ce, onBeforeUnmount as fe, onMounted as ie, onUnmounted as re, provide as Qe, ref as D, useId as oe, vShow as pe, watch as se, withDirectives as ve, withModifiers as ge } from "vue";
|
|
2
2
|
var be = Object.defineProperty, Je = (e, a) => {
|
|
3
3
|
let r = {};
|
|
4
4
|
for (var l in e)
|
|
@@ -7,7 +7,7 @@ var be = Object.defineProperty, Je = (e, a) => {
|
|
|
7
7
|
enumerable: !0
|
|
8
8
|
});
|
|
9
9
|
return a || be(r, Symbol.toStringTag, { value: "Module" }), r;
|
|
10
|
-
}, $e =
|
|
10
|
+
}, $e = M({
|
|
11
11
|
name: "KrdsButton",
|
|
12
12
|
props: {
|
|
13
13
|
type: {
|
|
@@ -47,7 +47,7 @@ var be = Object.defineProperty, Je = (e, a) => {
|
|
|
47
47
|
default: void 0
|
|
48
48
|
}
|
|
49
49
|
},
|
|
50
|
-
emits:
|
|
50
|
+
emits: { click: (e) => !0 },
|
|
51
51
|
setup(e, { emit: a, slots: r }) {
|
|
52
52
|
const l = b(() => {
|
|
53
53
|
const s = ["krds-btn"];
|
|
@@ -62,13 +62,13 @@ var be = Object.defineProperty, Je = (e, a) => {
|
|
|
62
62
|
onClick: n
|
|
63
63
|
}, r.default?.());
|
|
64
64
|
}
|
|
65
|
-
}), Ze = $e, et =
|
|
65
|
+
}), Ze = $e, et = M({
|
|
66
66
|
name: "KrdsButtonGroup",
|
|
67
67
|
props: {},
|
|
68
68
|
setup(e, { slots: a }) {
|
|
69
69
|
return () => t("div", { class: "btn-group" }, a.default?.());
|
|
70
70
|
}
|
|
71
|
-
}), tt =
|
|
71
|
+
}), tt = M({
|
|
72
72
|
name: "KrdsIcon",
|
|
73
73
|
props: {
|
|
74
74
|
name: {
|
|
@@ -87,7 +87,7 @@ var be = Object.defineProperty, Je = (e, a) => {
|
|
|
87
87
|
e.class
|
|
88
88
|
].filter(Boolean).join(" ") });
|
|
89
89
|
}
|
|
90
|
-
}), at =
|
|
90
|
+
}), at = M({
|
|
91
91
|
name: "KrdsLink",
|
|
92
92
|
props: {
|
|
93
93
|
href: {
|
|
@@ -123,7 +123,7 @@ var be = Object.defineProperty, Je = (e, a) => {
|
|
|
123
123
|
default: void 0
|
|
124
124
|
}
|
|
125
125
|
},
|
|
126
|
-
emits:
|
|
126
|
+
emits: { click: (e) => !0 },
|
|
127
127
|
setup(e, { emit: a, slots: r }) {
|
|
128
128
|
const l = b(() => {
|
|
129
129
|
const u = ["krds-btn"];
|
|
@@ -142,7 +142,7 @@ var be = Object.defineProperty, Je = (e, a) => {
|
|
|
142
142
|
onClick: s
|
|
143
143
|
}, r.default?.());
|
|
144
144
|
}
|
|
145
|
-
}), Le =
|
|
145
|
+
}), Le = M({
|
|
146
146
|
name: "KrdsSpinner",
|
|
147
147
|
props: { label: {
|
|
148
148
|
type: String,
|
|
@@ -155,7 +155,7 @@ var be = Object.defineProperty, Je = (e, a) => {
|
|
|
155
155
|
role: "status"
|
|
156
156
|
}, e);
|
|
157
157
|
}
|
|
158
|
-
}), lt =
|
|
158
|
+
}), lt = M({
|
|
159
159
|
name: "KrdsInput",
|
|
160
160
|
props: {
|
|
161
161
|
modelValue: {
|
|
@@ -218,10 +218,6 @@ var be = Object.defineProperty, Je = (e, a) => {
|
|
|
218
218
|
type: Boolean,
|
|
219
219
|
default: !1
|
|
220
220
|
},
|
|
221
|
-
error: {
|
|
222
|
-
type: String,
|
|
223
|
-
default: void 0
|
|
224
|
-
},
|
|
225
221
|
state: {
|
|
226
222
|
type: String,
|
|
227
223
|
default: "default"
|
|
@@ -243,15 +239,15 @@ var be = Object.defineProperty, Je = (e, a) => {
|
|
|
243
239
|
default: void 0
|
|
244
240
|
}
|
|
245
241
|
},
|
|
246
|
-
emits:
|
|
247
|
-
"update:modelValue",
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
242
|
+
emits: {
|
|
243
|
+
"update:modelValue": (e) => !0,
|
|
244
|
+
input: (e) => !0,
|
|
245
|
+
change: (e) => !0,
|
|
246
|
+
focus: (e) => !0,
|
|
247
|
+
blur: (e) => !0,
|
|
248
|
+
keydown: (e) => !0,
|
|
249
|
+
keyup: (e) => !0
|
|
250
|
+
},
|
|
255
251
|
setup(e, { emit: a, slots: r }) {
|
|
256
252
|
const l = b(() => {
|
|
257
253
|
const S = ["krds-input"];
|
|
@@ -265,11 +261,11 @@ var be = Object.defineProperty, Je = (e, a) => {
|
|
|
265
261
|
a("focus", S);
|
|
266
262
|
}, h = (S) => {
|
|
267
263
|
a("blur", S);
|
|
268
|
-
},
|
|
264
|
+
}, v = (S) => {
|
|
269
265
|
a("keydown", S);
|
|
270
266
|
}, w = (S) => {
|
|
271
267
|
a("keyup", S);
|
|
272
|
-
},
|
|
268
|
+
}, c = b(() => {
|
|
273
269
|
const S = {
|
|
274
270
|
type: e.type,
|
|
275
271
|
class: l.value,
|
|
@@ -286,20 +282,20 @@ var be = Object.defineProperty, Je = (e, a) => {
|
|
|
286
282
|
onChange: s,
|
|
287
283
|
onFocus: u,
|
|
288
284
|
onBlur: h,
|
|
289
|
-
onKeydown:
|
|
285
|
+
onKeydown: v,
|
|
290
286
|
onKeyup: w
|
|
291
287
|
};
|
|
292
288
|
return e.maxlength !== void 0 && (S.maxlength = e.maxlength), e.minlength !== void 0 && (S.minlength = e.minlength), e.type === "number" && (e.max !== void 0 && (S.max = e.max), e.min !== void 0 && (S.min = e.min), e.step !== void 0 && (S.step = e.step)), S;
|
|
293
|
-
}),
|
|
289
|
+
}), B = b(() => {
|
|
294
290
|
const S = ["form-conts"];
|
|
295
291
|
return e.state !== "default" && S.push(`is-${e.state}`), e.icon && S.push("btn-ico-wrap"), S;
|
|
296
292
|
});
|
|
297
293
|
return () => {
|
|
298
|
-
const S = [t("input",
|
|
299
|
-
return e.loading ? t("div", { class:
|
|
294
|
+
const S = [t("input", c.value)];
|
|
295
|
+
return e.loading ? t("div", { class: B.value }, [t("div", { class: "form-spinner" }, [...S, t(Le)])]) : (r.default && S.push(...r.default()), t("div", { class: B.value }, S));
|
|
300
296
|
};
|
|
301
297
|
}
|
|
302
|
-
}), nt = lt, st =
|
|
298
|
+
}), nt = lt, st = M({
|
|
303
299
|
name: "KrdsFormLabel",
|
|
304
300
|
props: {
|
|
305
301
|
for: {
|
|
@@ -319,7 +315,7 @@ var be = Object.defineProperty, Je = (e, a) => {
|
|
|
319
315
|
default: void 0
|
|
320
316
|
}
|
|
321
317
|
},
|
|
322
|
-
emits:
|
|
318
|
+
emits: { click: (e) => !0 },
|
|
323
319
|
setup(e, { emit: a, slots: r }) {
|
|
324
320
|
const l = (n) => {
|
|
325
321
|
a("click", n);
|
|
@@ -332,7 +328,7 @@ var be = Object.defineProperty, Je = (e, a) => {
|
|
|
332
328
|
onClick: l
|
|
333
329
|
}, r.default?.())]);
|
|
334
330
|
}
|
|
335
|
-
}), rt = st, it =
|
|
331
|
+
}), rt = st, it = M({
|
|
336
332
|
name: "KrdsFormHint",
|
|
337
333
|
props: {
|
|
338
334
|
type: {
|
|
@@ -352,7 +348,7 @@ var be = Object.defineProperty, Je = (e, a) => {
|
|
|
352
348
|
default: void 0
|
|
353
349
|
}
|
|
354
350
|
},
|
|
355
|
-
emits:
|
|
351
|
+
emits: { click: (e) => !0 },
|
|
356
352
|
setup(e, { emit: a, slots: r }) {
|
|
357
353
|
const l = (s) => {
|
|
358
354
|
a("click", s);
|
|
@@ -380,7 +376,7 @@ var be = Object.defineProperty, Je = (e, a) => {
|
|
|
380
376
|
onClick: l
|
|
381
377
|
}, r.default?.());
|
|
382
378
|
}
|
|
383
|
-
}), ot = it,
|
|
379
|
+
}), ot = it, ut = M({
|
|
384
380
|
name: "KrdsFormGroup",
|
|
385
381
|
props: {
|
|
386
382
|
class: {
|
|
@@ -407,26 +403,26 @@ var be = Object.defineProperty, Je = (e, a) => {
|
|
|
407
403
|
style: e.style
|
|
408
404
|
}, a.default?.());
|
|
409
405
|
}
|
|
410
|
-
}),
|
|
406
|
+
}), dt = ut;
|
|
411
407
|
function ct(e, a) {
|
|
412
|
-
const r = /* @__PURE__ */ new Date(), l =
|
|
413
|
-
const i = r.getFullYear(),
|
|
414
|
-
for (let
|
|
415
|
-
return
|
|
416
|
-
}), w = b(() => Array.from({ length: 12 }, (i,
|
|
408
|
+
const r = /* @__PURE__ */ new Date(), l = D(e || r.getFullYear()), n = D(a || r.getMonth() + 1), s = D(null), u = D(null), h = D(null), v = b(() => {
|
|
409
|
+
const i = r.getFullYear(), g = [];
|
|
410
|
+
for (let m = i - 10; m <= i + 10; m++) g.push(m);
|
|
411
|
+
return g;
|
|
412
|
+
}), w = b(() => Array.from({ length: 12 }, (i, g) => g + 1)), c = () => {
|
|
417
413
|
s.value = null, u.value = null;
|
|
418
|
-
},
|
|
414
|
+
}, B = () => {
|
|
419
415
|
n.value === 1 ? (n.value = 12, l.value -= 1) : n.value -= 1;
|
|
420
416
|
}, S = () => {
|
|
421
417
|
n.value === 12 ? (n.value = 1, l.value += 1) : n.value += 1;
|
|
422
|
-
}, x = (i,
|
|
423
|
-
if (
|
|
418
|
+
}, x = (i, g = !1) => {
|
|
419
|
+
if (g)
|
|
424
420
|
s.value = i, u.value = i;
|
|
425
421
|
else if (!s.value || s.value && u.value)
|
|
426
422
|
s.value = i, u.value = null;
|
|
427
423
|
else {
|
|
428
|
-
const
|
|
429
|
-
new Date(i.replace(/\./g, "-")) <
|
|
424
|
+
const m = new Date(s.value.replace(/\./g, "-"));
|
|
425
|
+
new Date(i.replace(/\./g, "-")) < m ? (s.value = i, u.value = null) : u.value = i;
|
|
430
426
|
}
|
|
431
427
|
};
|
|
432
428
|
return {
|
|
@@ -435,10 +431,10 @@ function ct(e, a) {
|
|
|
435
431
|
selectedStartDate: s,
|
|
436
432
|
selectedEndDate: u,
|
|
437
433
|
activeDateSelector: h,
|
|
438
|
-
yearOptions:
|
|
434
|
+
yearOptions: v,
|
|
439
435
|
monthOptions: w,
|
|
440
|
-
clearDateSelection:
|
|
441
|
-
prevMonth:
|
|
436
|
+
clearDateSelection: c,
|
|
437
|
+
prevMonth: B,
|
|
442
438
|
nextMonth: S,
|
|
443
439
|
handleDateSelection: x,
|
|
444
440
|
selectToday: () => {
|
|
@@ -451,9 +447,9 @@ function ct(e, a) {
|
|
|
451
447
|
isStart: !1,
|
|
452
448
|
isEnd: !1
|
|
453
449
|
};
|
|
454
|
-
const
|
|
450
|
+
const g = new Date(i.replace(/\./g, "-")), m = new Date(s.value.replace(/\./g, "-")), $ = new Date(u.value.replace(/\./g, "-")), C = i === s.value, E = i === u.value;
|
|
455
451
|
return {
|
|
456
|
-
isInRange:
|
|
452
|
+
isInRange: g >= m && g <= $,
|
|
457
453
|
isStart: C,
|
|
458
454
|
isEnd: E
|
|
459
455
|
};
|
|
@@ -463,14 +459,14 @@ function ct(e, a) {
|
|
|
463
459
|
function ft(e, a, r = {}) {
|
|
464
460
|
let l = null;
|
|
465
461
|
const { ignore: n, event: s = "click" } = typeof r == "string" ? { ignore: r } : r, u = () => {
|
|
466
|
-
l = (
|
|
467
|
-
const w =
|
|
462
|
+
l = (v) => {
|
|
463
|
+
const w = v.target;
|
|
468
464
|
e.value?.contains(w) || n && w.closest(n) || a();
|
|
469
465
|
}, document.addEventListener(s, l);
|
|
470
466
|
}, h = () => {
|
|
471
467
|
if (l) {
|
|
472
|
-
const
|
|
473
|
-
document.removeEventListener(
|
|
468
|
+
const v = typeof r == "string" ? "click" : r.event || "click";
|
|
469
|
+
document.removeEventListener(v, l), l = null;
|
|
474
470
|
}
|
|
475
471
|
};
|
|
476
472
|
return ie(() => {
|
|
@@ -490,7 +486,7 @@ var vt = [
|
|
|
490
486
|
"목",
|
|
491
487
|
"금",
|
|
492
488
|
"토"
|
|
493
|
-
], pt =
|
|
489
|
+
], pt = M({
|
|
494
490
|
name: "KrdsDateInput",
|
|
495
491
|
props: {
|
|
496
492
|
modelValue: {
|
|
@@ -545,28 +541,24 @@ var vt = [
|
|
|
545
541
|
type: String,
|
|
546
542
|
default: void 0
|
|
547
543
|
},
|
|
548
|
-
style: {
|
|
549
|
-
type: [String, Object],
|
|
550
|
-
default: void 0
|
|
551
|
-
},
|
|
552
544
|
id: {
|
|
553
545
|
type: String,
|
|
554
546
|
default: void 0
|
|
555
547
|
}
|
|
556
548
|
},
|
|
557
|
-
emits:
|
|
558
|
-
"update:modelValue",
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
549
|
+
emits: {
|
|
550
|
+
"update:modelValue": (e) => !0,
|
|
551
|
+
input: (e) => !0,
|
|
552
|
+
change: (e) => !0,
|
|
553
|
+
focus: (e) => !0,
|
|
554
|
+
blur: (e) => !0
|
|
555
|
+
},
|
|
564
556
|
setup(e, { emit: a }) {
|
|
565
|
-
const r =
|
|
557
|
+
const r = D(), l = D(), n = D(!1), s = D(null), { currentYear: u, currentMonth: h, selectedStartDate: v, selectedEndDate: w, yearOptions: c, monthOptions: B, prevMonth: S, nextMonth: x, handleDateSelection: f, selectToday: o, isDateInSelectedRange: i } = ct(e.initialYear, e.initialMonth), g = () => {
|
|
566
558
|
n.value && l.value?.focus(), n.value = !1, s.value = null;
|
|
567
559
|
};
|
|
568
|
-
ft(r,
|
|
569
|
-
const
|
|
560
|
+
ft(r, g, ".calendar-conts");
|
|
561
|
+
const m = b(() => {
|
|
570
562
|
const L = [
|
|
571
563
|
"krds-input",
|
|
572
564
|
"datepicker",
|
|
@@ -580,10 +572,10 @@ var vt = [
|
|
|
580
572
|
const L = u.value, R = h.value, Y = new Date(L, R - 1, 1), V = new Date(Y);
|
|
581
573
|
V.setDate(V.getDate() - Y.getDay());
|
|
582
574
|
const F = [], z = new Date(V);
|
|
583
|
-
for (let
|
|
575
|
+
for (let N = 0; N < 6; N++) {
|
|
584
576
|
const U = [];
|
|
585
577
|
for (let J = 0; J < 7; J++) {
|
|
586
|
-
const ee = `${z.getFullYear()}.${String(z.getMonth() + 1).padStart(2, "0")}.${String(z.getDate()).padStart(2, "0")}`,
|
|
578
|
+
const ee = `${z.getFullYear()}.${String(z.getMonth() + 1).padStart(2, "0")}.${String(z.getDate()).padStart(2, "0")}`, ue = z.getDay();
|
|
587
579
|
U.push({
|
|
588
580
|
day: z.getDate(),
|
|
589
581
|
dateString: ee,
|
|
@@ -591,14 +583,14 @@ var vt = [
|
|
|
591
583
|
isToday: z.toDateString() === (/* @__PURE__ */ new Date()).toDateString(),
|
|
592
584
|
isPrevMonth: z.getMonth() < R - 1 || z.getMonth() === 11 && R === 1,
|
|
593
585
|
isNextMonth: z.getMonth() > R - 1 || z.getMonth() === 0 && R === 12,
|
|
594
|
-
isSunday:
|
|
595
|
-
isSaturday:
|
|
586
|
+
isSunday: ue === 0,
|
|
587
|
+
isSaturday: ue === 6
|
|
596
588
|
}), z.setDate(z.getDate() + 1);
|
|
597
589
|
}
|
|
598
590
|
F.push(U);
|
|
599
591
|
}
|
|
600
592
|
return F;
|
|
601
|
-
}),
|
|
593
|
+
}), T = (L) => {
|
|
602
594
|
const R = [];
|
|
603
595
|
if (L.isPrevMonth && R.push("old"), L.isNextMonth && R.push("new"), L.isToday && R.push("today"), L.isSunday && R.push("day-off"), e.holidays?.includes(L.dateString) && R.push("day-off"), e.eventDates?.includes(L.dateString) && R.push("day-event"), L.isCurrentMonth) {
|
|
604
596
|
const Y = i(L.dateString);
|
|
@@ -620,7 +612,7 @@ var vt = [
|
|
|
620
612
|
class: void 0,
|
|
621
613
|
variant: "tertiary",
|
|
622
614
|
size: "small",
|
|
623
|
-
handler:
|
|
615
|
+
handler: g
|
|
624
616
|
},
|
|
625
617
|
{
|
|
626
618
|
id: "confirm-btn",
|
|
@@ -628,64 +620,64 @@ var vt = [
|
|
|
628
620
|
class: void 0,
|
|
629
621
|
variant: "primary",
|
|
630
622
|
size: "small",
|
|
631
|
-
handler:
|
|
623
|
+
handler: O
|
|
632
624
|
}
|
|
633
|
-
]),
|
|
625
|
+
]), p = (L) => {
|
|
634
626
|
s.value === L ? s.value = null : s.value = L;
|
|
635
|
-
},
|
|
627
|
+
}, A = (L) => {
|
|
636
628
|
u.value = L, s.value = null;
|
|
637
629
|
}, I = (L) => {
|
|
638
630
|
h.value = L, s.value = null;
|
|
639
|
-
},
|
|
640
|
-
|
|
631
|
+
}, O = () => {
|
|
632
|
+
v.value && (w.value && v.value !== w.value ? a("update:modelValue", `${v.value} ~ ${w.value}`) : a("update:modelValue", v.value), g());
|
|
641
633
|
}, H = () => {
|
|
642
634
|
n.value = !0, s.value = null, setTimeout(() => {
|
|
643
635
|
r.value?.querySelector(".calendar-wrap")?.focus();
|
|
644
636
|
}, 50);
|
|
645
637
|
}, G = () => {
|
|
646
|
-
n.value ?
|
|
638
|
+
n.value ? g() : H();
|
|
647
639
|
}, j = (L) => {
|
|
648
|
-
L.code === "Escape" && (s.value ? s.value = null : n.value &&
|
|
640
|
+
L.code === "Escape" && (s.value ? s.value = null : n.value && g());
|
|
649
641
|
}, X = (L) => {
|
|
650
642
|
const R = L.target;
|
|
651
643
|
a("update:modelValue", R.value), a("input", L);
|
|
652
644
|
}, le = (L) => {
|
|
653
645
|
a("change", L);
|
|
654
|
-
},
|
|
646
|
+
}, de = (L) => {
|
|
655
647
|
a("focus", L);
|
|
656
648
|
}, ae = (L) => {
|
|
657
649
|
a("blur", L);
|
|
658
650
|
}, Q = (L) => {
|
|
659
|
-
const R = L === "year", Y = R ?
|
|
651
|
+
const R = L === "year", Y = R ? c.value : B.value, V = R ? u.value : h.value, F = (z) => R ? `${z}년` : `${z.toString().padStart(2, "0")}월`;
|
|
660
652
|
return t("div", { class: "calendar-drop-down" }, [t("button", {
|
|
661
653
|
type: "button",
|
|
662
654
|
class: `btn-cal-switch ${L}`,
|
|
663
655
|
"aria-label": R ? "연도 선택" : "월 선택",
|
|
664
656
|
"aria-expanded": s.value === L,
|
|
665
|
-
onClick: () =>
|
|
657
|
+
onClick: () => p(L)
|
|
666
658
|
}, F(V)), ve(t("div", { class: `calendar-select ${R ? "calendar-year-wrap" : "calendar-mon-wrap"}` }, [t("ul", { class: `sel ${L}` }, Y.map((z) => t("li", { key: z }, [t("button", {
|
|
667
659
|
type: "button",
|
|
668
660
|
class: { active: z === V },
|
|
669
|
-
onClick: () => R ?
|
|
661
|
+
onClick: () => R ? A(z) : I(z)
|
|
670
662
|
}, F(z))])))]), [[pe, s.value === L]])]);
|
|
671
663
|
}, ne = () => t("table", { class: "calendar-tbl" }, [
|
|
672
664
|
t("caption", null, `${u.value}년 ${h.value.toString().padStart(2, "0")}월`),
|
|
673
665
|
t("thead", null, [t("tr", null, vt.map((L) => t("th", null, L)))]),
|
|
674
666
|
t("tbody", null, E.value.map((L, R) => t("tr", { key: R }, L.map((Y, V) => t("td", {
|
|
675
667
|
key: V,
|
|
676
|
-
class:
|
|
668
|
+
class: T(Y),
|
|
677
669
|
"data-date": Y.dateString
|
|
678
670
|
}, [t("button", {
|
|
679
671
|
type: "button",
|
|
680
672
|
class: "btn-set-date",
|
|
681
673
|
"aria-pressed": i(Y.dateString).isInRange ? "true" : "false",
|
|
682
|
-
onClick: () =>
|
|
674
|
+
onClick: () => f(Y.dateString)
|
|
683
675
|
}, [t("span", null, String(Y.day))])])))))
|
|
684
676
|
]);
|
|
685
677
|
return () => t("div", { class: "form-conts" }, [t("div", { class: $.value }, [t("div", { class: "calendar-input" }, [t("input", {
|
|
686
678
|
id: e.id,
|
|
687
679
|
name: e.name,
|
|
688
|
-
class:
|
|
680
|
+
class: m.value,
|
|
689
681
|
placeholder: e.placeholder,
|
|
690
682
|
value: e.modelValue,
|
|
691
683
|
readonly: e.readonly,
|
|
@@ -695,7 +687,7 @@ var vt = [
|
|
|
695
687
|
type: "text",
|
|
696
688
|
onInput: X,
|
|
697
689
|
onChange: le,
|
|
698
|
-
onFocus:
|
|
690
|
+
onFocus: de,
|
|
699
691
|
onBlur: ae
|
|
700
692
|
}), t("button", {
|
|
701
693
|
ref: l,
|
|
@@ -737,7 +729,7 @@ var vt = [
|
|
|
737
729
|
}, { default: () => L.label })))])
|
|
738
730
|
]), [[pe, n.value]])])])]);
|
|
739
731
|
}
|
|
740
|
-
}), gt = pt, ht =
|
|
732
|
+
}), gt = pt, ht = M({
|
|
741
733
|
name: "KrdsTextarea",
|
|
742
734
|
props: {
|
|
743
735
|
modelValue: {
|
|
@@ -800,26 +792,22 @@ var vt = [
|
|
|
800
792
|
type: String,
|
|
801
793
|
default: void 0
|
|
802
794
|
},
|
|
803
|
-
style: {
|
|
804
|
-
type: [String, Object],
|
|
805
|
-
default: void 0
|
|
806
|
-
},
|
|
807
795
|
id: {
|
|
808
796
|
type: String,
|
|
809
797
|
default: void 0
|
|
810
798
|
}
|
|
811
799
|
},
|
|
812
|
-
emits:
|
|
813
|
-
"update:modelValue",
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
800
|
+
emits: {
|
|
801
|
+
"update:modelValue": (e) => !0,
|
|
802
|
+
input: (e) => !0,
|
|
803
|
+
change: (e) => !0,
|
|
804
|
+
focus: (e) => !0,
|
|
805
|
+
blur: (e) => !0,
|
|
806
|
+
keydown: (e) => !0,
|
|
807
|
+
keyup: (e) => !0
|
|
808
|
+
},
|
|
821
809
|
setup(e, { emit: a }) {
|
|
822
|
-
const r =
|
|
810
|
+
const r = D(0);
|
|
823
811
|
se(() => e.modelValue, (o) => {
|
|
824
812
|
r.value = (o || "").length;
|
|
825
813
|
}, { immediate: !0 });
|
|
@@ -836,13 +824,13 @@ var vt = [
|
|
|
836
824
|
a("change", o);
|
|
837
825
|
}, h = (o) => {
|
|
838
826
|
a("focus", o);
|
|
839
|
-
},
|
|
827
|
+
}, v = (o) => {
|
|
840
828
|
a("blur", o);
|
|
841
829
|
}, w = (o) => {
|
|
842
830
|
a("keydown", o);
|
|
843
|
-
},
|
|
831
|
+
}, c = (o) => {
|
|
844
832
|
a("keyup", o);
|
|
845
|
-
},
|
|
833
|
+
}, B = b(() => {
|
|
846
834
|
const o = {
|
|
847
835
|
class: l.value,
|
|
848
836
|
style: n.value,
|
|
@@ -859,21 +847,21 @@ var vt = [
|
|
|
859
847
|
onInput: s,
|
|
860
848
|
onChange: u,
|
|
861
849
|
onFocus: h,
|
|
862
|
-
onBlur:
|
|
850
|
+
onBlur: v,
|
|
863
851
|
onKeydown: w,
|
|
864
|
-
onKeyup:
|
|
852
|
+
onKeyup: c
|
|
865
853
|
};
|
|
866
854
|
return e.maxlength !== void 0 && (o.maxlength = e.maxlength), e.minlength !== void 0 && (o.minlength = e.minlength), o;
|
|
867
|
-
}), S = b(() => ["form-conts"]), x = b(() => ["textarea-wrap"]),
|
|
855
|
+
}), S = b(() => ["form-conts"]), x = b(() => ["textarea-wrap"]), f = b(() => e.showCount ? {
|
|
868
856
|
current: r.value,
|
|
869
857
|
max: e.maxlength || ""
|
|
870
858
|
} : null);
|
|
871
859
|
return () => {
|
|
872
|
-
const o = [t("textarea",
|
|
873
|
-
return
|
|
860
|
+
const o = [t("textarea", B.value)];
|
|
861
|
+
return f.value && o.push(t("p", { class: "textarea-count" }, [t("span", { class: "count-now" }, f.value.current), t("span", { class: "count-total" }, f.value.max ? `/${f.value.max}` : "")])), t("div", { class: S.value }, [t("div", { class: x.value }, o)]);
|
|
874
862
|
};
|
|
875
863
|
}
|
|
876
|
-
}), yt = ht, mt =
|
|
864
|
+
}), yt = ht, mt = M({
|
|
877
865
|
name: "KrdsSelect",
|
|
878
866
|
props: {
|
|
879
867
|
modelValue: {
|
|
@@ -904,6 +892,10 @@ var vt = [
|
|
|
904
892
|
type: String,
|
|
905
893
|
default: void 0
|
|
906
894
|
},
|
|
895
|
+
readonly: {
|
|
896
|
+
type: Boolean,
|
|
897
|
+
default: !1
|
|
898
|
+
},
|
|
907
899
|
disabled: {
|
|
908
900
|
type: Boolean,
|
|
909
901
|
default: !1
|
|
@@ -925,22 +917,22 @@ var vt = [
|
|
|
925
917
|
default: void 0
|
|
926
918
|
}
|
|
927
919
|
},
|
|
928
|
-
emits:
|
|
929
|
-
"update:modelValue",
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
920
|
+
emits: {
|
|
921
|
+
"update:modelValue": (e) => !0,
|
|
922
|
+
focus: (e) => !0,
|
|
923
|
+
blur: (e) => !0
|
|
924
|
+
},
|
|
933
925
|
setup(e, { emit: a, slots: r }) {
|
|
934
926
|
const l = b(() => {
|
|
935
|
-
const
|
|
936
|
-
return e.sort ?
|
|
937
|
-
}), n = (
|
|
938
|
-
const
|
|
939
|
-
a("update:modelValue",
|
|
940
|
-
}, s = (
|
|
941
|
-
a("focus",
|
|
942
|
-
}, u = (
|
|
943
|
-
a("blur",
|
|
927
|
+
const c = [];
|
|
928
|
+
return e.sort ? c.push("krds-form-select-sort") : c.push("krds-form-select"), e.size && c.push(e.size), e.class && c.push(e.class), c;
|
|
929
|
+
}), n = (c) => {
|
|
930
|
+
const B = c.target;
|
|
931
|
+
a("update:modelValue", B.value === "" ? null : B.value);
|
|
932
|
+
}, s = (c) => {
|
|
933
|
+
a("focus", c);
|
|
934
|
+
}, u = (c) => {
|
|
935
|
+
a("blur", c);
|
|
944
936
|
}, h = b(() => ({
|
|
945
937
|
class: l.value,
|
|
946
938
|
value: e.modelValue ?? "",
|
|
@@ -951,29 +943,29 @@ var vt = [
|
|
|
951
943
|
onChange: n,
|
|
952
944
|
onFocus: s,
|
|
953
945
|
onBlur: u
|
|
954
|
-
})),
|
|
955
|
-
const
|
|
956
|
-
return e.state !== "default" &&
|
|
946
|
+
})), v = b(() => {
|
|
947
|
+
const c = ["form-conts"];
|
|
948
|
+
return e.state !== "default" && c.push(`is-${e.state}`), c;
|
|
957
949
|
}), w = () => {
|
|
958
|
-
const
|
|
959
|
-
return e.placeholder && !e.modelValue &&
|
|
950
|
+
const c = [];
|
|
951
|
+
return e.placeholder && !e.modelValue && c.push(t("option", {
|
|
960
952
|
value: "",
|
|
961
953
|
disabled: !0,
|
|
962
954
|
selected: !0
|
|
963
|
-
}, e.placeholder)), e.options && e.options.length > 0 && e.options.forEach((
|
|
964
|
-
|
|
965
|
-
value:
|
|
966
|
-
disabled:
|
|
967
|
-
selected:
|
|
968
|
-
},
|
|
969
|
-
}), r.default &&
|
|
955
|
+
}, e.placeholder)), e.options && e.options.length > 0 && e.options.forEach((B) => {
|
|
956
|
+
c.push(t("option", {
|
|
957
|
+
value: B.value,
|
|
958
|
+
disabled: B.disabled,
|
|
959
|
+
selected: B.value === e.modelValue
|
|
960
|
+
}, B.label));
|
|
961
|
+
}), r.default && c.push(...r.default()), c;
|
|
970
962
|
};
|
|
971
963
|
return () => {
|
|
972
|
-
const
|
|
973
|
-
return e.sort ?
|
|
964
|
+
const c = t("select", h.value, w());
|
|
965
|
+
return e.sort ? c : t("div", { class: v.value }, [c]);
|
|
974
966
|
};
|
|
975
967
|
}
|
|
976
|
-
}), bt = mt, kt = 0, St =
|
|
968
|
+
}), bt = mt, kt = 0, St = M({
|
|
977
969
|
name: "KrdsFileUpload",
|
|
978
970
|
props: {
|
|
979
971
|
modelValue: {
|
|
@@ -1061,42 +1053,42 @@ var vt = [
|
|
|
1061
1053
|
default: void 0
|
|
1062
1054
|
}
|
|
1063
1055
|
},
|
|
1064
|
-
emits:
|
|
1065
|
-
"update:modelValue",
|
|
1066
|
-
"file-added",
|
|
1067
|
-
"file-removed",
|
|
1068
|
-
"file-error",
|
|
1069
|
-
"upload-start",
|
|
1070
|
-
"upload-progress",
|
|
1071
|
-
"upload-complete",
|
|
1072
|
-
"upload-error",
|
|
1073
|
-
"clear-all",
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1056
|
+
emits: {
|
|
1057
|
+
"update:modelValue": (e) => !0,
|
|
1058
|
+
"file-added": (e) => !0,
|
|
1059
|
+
"file-removed": (e) => !0,
|
|
1060
|
+
"file-error": (e, a) => !0,
|
|
1061
|
+
"upload-start": (e) => !0,
|
|
1062
|
+
"upload-progress": (e, a) => !0,
|
|
1063
|
+
"upload-complete": (e) => !0,
|
|
1064
|
+
"upload-error": (e, a) => !0,
|
|
1065
|
+
"clear-all": () => !0,
|
|
1066
|
+
download: (e) => !0,
|
|
1067
|
+
preview: (e) => !0
|
|
1068
|
+
},
|
|
1077
1069
|
setup(e, { emit: a }) {
|
|
1078
|
-
const r =
|
|
1079
|
-
const
|
|
1080
|
-
return
|
|
1081
|
-
}, h = (
|
|
1082
|
-
const
|
|
1083
|
-
return
|
|
1084
|
-
},
|
|
1085
|
-
if (e.maxFileSize &&
|
|
1070
|
+
const r = D(!1), l = D(null), n = e.id ? `${e.id}-input` : `krds-file-upload-${++kt}`, s = (p) => p < 1024 ? `${p}B` : p < 1048576 ? `${Math.round(p / 1024)}KB` : `${(p / 1048576).toFixed(1)}MB`, u = (p) => {
|
|
1071
|
+
const A = p.split(".");
|
|
1072
|
+
return A.length > 1 ? A.pop().toLowerCase() : "";
|
|
1073
|
+
}, h = (p) => {
|
|
1074
|
+
const A = u(p.name), I = A ? p.name.slice(0, -(A.length + 1)) : p.name;
|
|
1075
|
+
return A ? `${I} [${A}, ${s(p.size)}]` : `${p.name} [${s(p.size)}]`;
|
|
1076
|
+
}, v = () => `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, w = (p) => {
|
|
1077
|
+
if (e.maxFileSize && p.size > e.maxFileSize) return `등록 가능한 파일 용량을 초과하였습니다.
|
|
1086
1078
|
${s(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
|
|
1087
1079
|
if (e.accept) {
|
|
1088
|
-
const
|
|
1089
|
-
if (!
|
|
1080
|
+
const A = e.accept.split(",").map((H) => H.trim().toLowerCase()), I = `.${u(p.name)}`, O = p.type;
|
|
1081
|
+
if (!A.some((H) => H.startsWith(".") ? I === H : H.endsWith("/*") ? O.startsWith(H.replace("/*", "/")) : O === H)) return "허용되지 않는 파일 형식입니다.";
|
|
1090
1082
|
}
|
|
1091
1083
|
return null;
|
|
1092
|
-
},
|
|
1084
|
+
}, c = (p) => {
|
|
1093
1085
|
if (e.disabled || e.readonly) return;
|
|
1094
|
-
let
|
|
1095
|
-
!e.multiple &&
|
|
1086
|
+
let A = [...e.modelValue || []];
|
|
1087
|
+
!e.multiple && A.length > 0 && (A = []);
|
|
1096
1088
|
const I = [];
|
|
1097
|
-
for (let
|
|
1098
|
-
const H =
|
|
1099
|
-
id:
|
|
1089
|
+
for (let O = 0; O < p.length && !(A.length + I.length >= e.maxFiles); O++) {
|
|
1090
|
+
const H = p[O], G = w(H), j = {
|
|
1091
|
+
id: v(),
|
|
1100
1092
|
file: H,
|
|
1101
1093
|
name: H.name,
|
|
1102
1094
|
size: H.size,
|
|
@@ -1106,30 +1098,30 @@ ${s(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
|
|
|
1106
1098
|
};
|
|
1107
1099
|
I.push(j), G ? a("file-error", j, G) : a("file-added", j);
|
|
1108
1100
|
}
|
|
1109
|
-
I.length > 0 && a("update:modelValue", [...
|
|
1110
|
-
},
|
|
1111
|
-
const
|
|
1112
|
-
|
|
1113
|
-
}, S = (
|
|
1114
|
-
e.disabled || e.readonly || !e.dragAndDrop || (
|
|
1101
|
+
I.length > 0 && a("update:modelValue", [...A, ...I]);
|
|
1102
|
+
}, B = (p) => {
|
|
1103
|
+
const A = p.target;
|
|
1104
|
+
A.files?.length && (c(A.files), A.value = "");
|
|
1105
|
+
}, S = (p) => {
|
|
1106
|
+
e.disabled || e.readonly || !e.dragAndDrop || (p.preventDefault(), r.value = !0);
|
|
1115
1107
|
}, x = () => {
|
|
1116
1108
|
r.value = !1;
|
|
1117
|
-
},
|
|
1118
|
-
|
|
1109
|
+
}, f = (p) => {
|
|
1110
|
+
p.preventDefault(), r.value = !1, !(e.disabled || e.readonly || !e.dragAndDrop) && p.dataTransfer?.files && c(p.dataTransfer.files);
|
|
1119
1111
|
}, o = () => {
|
|
1120
1112
|
e.disabled || e.readonly || l.value?.click();
|
|
1121
|
-
}, i = (
|
|
1122
|
-
e.disabled || e.readonly || (a("update:modelValue", (e.modelValue || []).filter((
|
|
1123
|
-
},
|
|
1113
|
+
}, i = (p) => {
|
|
1114
|
+
e.disabled || e.readonly || (a("update:modelValue", (e.modelValue || []).filter((A) => A.id !== p)), a("file-removed", p));
|
|
1115
|
+
}, g = () => {
|
|
1124
1116
|
e.disabled || e.readonly || (a("update:modelValue", []), a("clear-all"));
|
|
1125
|
-
},
|
|
1126
|
-
const
|
|
1127
|
-
return e.class &&
|
|
1117
|
+
}, m = b(() => {
|
|
1118
|
+
const p = ["krds-file-upload", "line"];
|
|
1119
|
+
return e.class && p.push(e.class), p;
|
|
1128
1120
|
}), $ = () => t("div", { class: "file-head" }, [t("h3", { class: "tit" }, e.title), t("div", null, [t("p", null, e.description)])]), C = () => t("div", {
|
|
1129
1121
|
class: "file-upload",
|
|
1130
1122
|
onDragover: S,
|
|
1131
1123
|
onDragleave: x,
|
|
1132
|
-
onDrop:
|
|
1124
|
+
onDrop: f
|
|
1133
1125
|
}, [t("p", { class: "txt" }, e.placeholder), t("div", { class: "file-upload-btn-wrap" }, [t("input", {
|
|
1134
1126
|
ref: l,
|
|
1135
1127
|
type: "file",
|
|
@@ -1138,64 +1130,64 @@ ${s(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
|
|
|
1138
1130
|
hidden: !0,
|
|
1139
1131
|
accept: e.accept || void 0,
|
|
1140
1132
|
multiple: e.multiple,
|
|
1141
|
-
onChange:
|
|
1133
|
+
onChange: B
|
|
1142
1134
|
}), t("label", { for: n }, [t("button", {
|
|
1143
1135
|
type: "button",
|
|
1144
1136
|
class: ["krds-btn", e.size],
|
|
1145
1137
|
disabled: e.disabled || void 0,
|
|
1146
1138
|
onClick: o
|
|
1147
|
-
}, [t("i", { class: "svg-icon ico-upload" }), "파일선택"])])])]), E = (
|
|
1148
|
-
const
|
|
1149
|
-
return
|
|
1139
|
+
}, [t("i", { class: "svg-icon ico-upload" }), "파일선택"])])])]), E = (p) => {
|
|
1140
|
+
const A = [];
|
|
1141
|
+
return p.status === "uploading" ? A.push(t("span", {
|
|
1150
1142
|
class: "krds-spinner",
|
|
1151
1143
|
role: "status"
|
|
1152
|
-
}, [t("span", { class: "sr-only" }, "업로드 중")])) :
|
|
1144
|
+
}, [t("span", { class: "sr-only" }, "업로드 중")])) : p.downloadUrl ? (e.showDownload && A.push(t("button", {
|
|
1153
1145
|
type: "button",
|
|
1154
1146
|
class: "krds-btn medium text",
|
|
1155
|
-
onClick: () => a("download",
|
|
1156
|
-
}, ["다운로드 ", t("i", { class: "svg-icon ico-down" })])), e.showPreviewButton &&
|
|
1147
|
+
onClick: () => a("download", p)
|
|
1148
|
+
}, ["다운로드 ", t("i", { class: "svg-icon ico-down" })])), e.showPreviewButton && A.push(t("button", {
|
|
1157
1149
|
type: "button",
|
|
1158
1150
|
class: "krds-btn medium text",
|
|
1159
|
-
onClick: () => a("preview",
|
|
1160
|
-
}, ["바로보기 ", t("i", { class: "svg-icon ico-angle right" })]))) :
|
|
1151
|
+
onClick: () => a("preview", p)
|
|
1152
|
+
}, ["바로보기 ", t("i", { class: "svg-icon ico-angle right" })]))) : p.status === "completed" ? A.push(t("span", { class: "ico-invalid complete" }, [t("em", { class: "sr-only" }, "업로드 완료")])) : e.readonly || A.push(t("button", {
|
|
1161
1153
|
type: "button",
|
|
1162
1154
|
class: "krds-btn medium text",
|
|
1163
1155
|
disabled: e.disabled || void 0,
|
|
1164
|
-
onClick: () => i(
|
|
1165
|
-
}, ["삭제 ", t("i", { class: "svg-icon ico-delete-fill" })])),
|
|
1166
|
-
},
|
|
1167
|
-
const
|
|
1168
|
-
if (
|
|
1169
|
-
const I =
|
|
1170
|
-
`),
|
|
1156
|
+
onClick: () => i(p.id)
|
|
1157
|
+
}, ["삭제 ", t("i", { class: "svg-icon ico-delete-fill" })])), A;
|
|
1158
|
+
}, T = (p) => {
|
|
1159
|
+
const A = [t("div", { class: p.downloadUrl ? "file-info m-column" : "file-info" }, [t("div", { class: "file-name" }, h(p)), t("div", { class: "btn-wrap" }, E(p))])];
|
|
1160
|
+
if (p.status === "error" && p.errorMessage) {
|
|
1161
|
+
const I = p.errorMessage.split(`
|
|
1162
|
+
`), O = [];
|
|
1171
1163
|
I.forEach((H, G) => {
|
|
1172
|
-
G > 0 &&
|
|
1173
|
-
}),
|
|
1164
|
+
G > 0 && O.push(t("br")), O.push(H);
|
|
1165
|
+
}), A.push(t("p", { class: "file-hint-invalid" }, O));
|
|
1174
1166
|
}
|
|
1175
1167
|
return t("li", {
|
|
1176
|
-
key:
|
|
1177
|
-
class:
|
|
1178
|
-
},
|
|
1179
|
-
}, _ = (
|
|
1180
|
-
const
|
|
1168
|
+
key: p.id,
|
|
1169
|
+
class: p.status === "error" ? "is-error" : void 0
|
|
1170
|
+
}, A);
|
|
1171
|
+
}, _ = (p) => {
|
|
1172
|
+
const A = p.filter((O) => O.status !== "error").length, I = [t("div", { class: "total" }, [t("span", { class: "current" }, `${A}개`), ` / ${e.maxFiles}개`]), t("ul", { class: "upload-list" }, p.map(T))];
|
|
1181
1173
|
return e.showClearAll && !e.readonly && I.push(t("div", { class: "upload-delete-btn" }, [t("button", {
|
|
1182
1174
|
type: "button",
|
|
1183
1175
|
class: "krds-btn xsmall tertiary",
|
|
1184
1176
|
disabled: e.disabled || void 0,
|
|
1185
|
-
onClick:
|
|
1177
|
+
onClick: g
|
|
1186
1178
|
}, ["전체 파일 삭제", t("i", { class: "svg-icon ico-angle right" })])])), t("div", { class: "file-list" }, I);
|
|
1187
1179
|
};
|
|
1188
1180
|
return () => {
|
|
1189
|
-
const
|
|
1190
|
-
e.readonly ||
|
|
1191
|
-
const
|
|
1192
|
-
return
|
|
1193
|
-
class:
|
|
1181
|
+
const p = [$()];
|
|
1182
|
+
e.readonly || p.push(C());
|
|
1183
|
+
const A = e.modelValue || [];
|
|
1184
|
+
return A.length > 0 && p.push(_(A)), t("div", {
|
|
1185
|
+
class: m.value,
|
|
1194
1186
|
style: e.style || void 0
|
|
1195
|
-
},
|
|
1187
|
+
}, p);
|
|
1196
1188
|
};
|
|
1197
1189
|
}
|
|
1198
|
-
}), wt = St, Kt =
|
|
1190
|
+
}), wt = St, Kt = M({
|
|
1199
1191
|
name: "KrdsBadge",
|
|
1200
1192
|
props: {
|
|
1201
1193
|
type: {
|
|
@@ -1219,7 +1211,7 @@ ${s(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
|
|
|
1219
1211
|
default: void 0
|
|
1220
1212
|
}
|
|
1221
1213
|
},
|
|
1222
|
-
emits:
|
|
1214
|
+
emits: { click: (e) => !0 },
|
|
1223
1215
|
setup(e, { emit: a, slots: r }) {
|
|
1224
1216
|
const l = b(() => {
|
|
1225
1217
|
const s = ["krds-badge"];
|
|
@@ -1236,7 +1228,7 @@ ${s(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
|
|
|
1236
1228
|
onClick: n
|
|
1237
1229
|
}, r.default?.());
|
|
1238
1230
|
}
|
|
1239
|
-
}), Ct = Kt, xt =
|
|
1231
|
+
}), Ct = Kt, xt = M({
|
|
1240
1232
|
name: "KrdsTag",
|
|
1241
1233
|
props: {
|
|
1242
1234
|
link: {
|
|
@@ -1260,7 +1252,7 @@ ${s(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
|
|
|
1260
1252
|
default: void 0
|
|
1261
1253
|
}
|
|
1262
1254
|
},
|
|
1263
|
-
emits:
|
|
1255
|
+
emits: { remove: (e) => !0 },
|
|
1264
1256
|
setup(e, { emit: a, slots: r }) {
|
|
1265
1257
|
const l = b(() => {
|
|
1266
1258
|
const u = ["krds-btn-tag"];
|
|
@@ -1275,16 +1267,16 @@ ${s(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
|
|
|
1275
1267
|
return () => {
|
|
1276
1268
|
const u = [], h = r.default?.();
|
|
1277
1269
|
if (h && u.push(h), e.link || u.push(s()), e.link) {
|
|
1278
|
-
const
|
|
1270
|
+
const v = {
|
|
1279
1271
|
href: e.href,
|
|
1280
1272
|
class: l.value
|
|
1281
1273
|
};
|
|
1282
|
-
return e.target && (
|
|
1274
|
+
return e.target && (v.target = e.target), e.rel && (v.rel = e.rel), t("a", v, u);
|
|
1283
1275
|
}
|
|
1284
1276
|
return t("span", { class: l.value }, u);
|
|
1285
1277
|
};
|
|
1286
1278
|
}
|
|
1287
|
-
}), $t = xt, Lt =
|
|
1279
|
+
}), $t = xt, Lt = M({
|
|
1288
1280
|
name: "KrdsTagGroup",
|
|
1289
1281
|
props: {
|
|
1290
1282
|
size: {
|
|
@@ -1303,13 +1295,13 @@ ${s(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
|
|
|
1303
1295
|
});
|
|
1304
1296
|
return () => t("div", { class: r.value }, a.default?.());
|
|
1305
1297
|
}
|
|
1306
|
-
}), Dt = Lt, Bt =
|
|
1298
|
+
}), Dt = Lt, Bt = M({
|
|
1307
1299
|
name: "KrdsMasthead",
|
|
1308
1300
|
props: { class: {
|
|
1309
1301
|
type: String,
|
|
1310
1302
|
default: void 0
|
|
1311
1303
|
} },
|
|
1312
|
-
emits:
|
|
1304
|
+
emits: { click: (e) => !0 },
|
|
1313
1305
|
setup(e, { emit: a, slots: r }) {
|
|
1314
1306
|
const l = b(() => {
|
|
1315
1307
|
const s = [""];
|
|
@@ -1323,17 +1315,17 @@ ${s(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
|
|
|
1323
1315
|
onClick: n
|
|
1324
1316
|
}, [t("div", { class: "toggle-wrap" }, [t("div", { class: "toggle-head" }, [t("div", { class: "inner" }, [t("span", { class: "nuri-txt" }, r.default?.())])])])]);
|
|
1325
1317
|
}
|
|
1326
|
-
}),
|
|
1327
|
-
function
|
|
1328
|
-
return `${e}-${++
|
|
1318
|
+
}), Tt = Bt, Et = 0;
|
|
1319
|
+
function tl(e = "krds") {
|
|
1320
|
+
return `${e}-${++Et}`;
|
|
1329
1321
|
}
|
|
1330
|
-
function
|
|
1322
|
+
function al() {
|
|
1331
1323
|
return `${Date.now().toString(36).slice(-4)}${Math.random().toString(36).substring(2, 5)}`;
|
|
1332
1324
|
}
|
|
1333
1325
|
function he(...e) {
|
|
1334
1326
|
return e.filter(Boolean).join(" ");
|
|
1335
1327
|
}
|
|
1336
|
-
var _t =
|
|
1328
|
+
var _t = M({
|
|
1337
1329
|
name: "KrdsToggleSwitch",
|
|
1338
1330
|
props: {
|
|
1339
1331
|
modelValue: {
|
|
@@ -1374,11 +1366,14 @@ var _t = A({
|
|
|
1374
1366
|
default: void 0
|
|
1375
1367
|
}
|
|
1376
1368
|
},
|
|
1377
|
-
emits:
|
|
1369
|
+
emits: {
|
|
1370
|
+
"update:modelValue": (e) => !0,
|
|
1371
|
+
change: (e) => !0
|
|
1372
|
+
},
|
|
1378
1373
|
setup(e, { emit: a, attrs: r }) {
|
|
1379
|
-
const l = `toggle-switch-${
|
|
1374
|
+
const l = `toggle-switch-${oe()}`, n = b(() => e.modelValue), s = b(() => he("krds-form-toggle-switch", e.size, e.class)), u = (v) => {
|
|
1380
1375
|
if (e.disabled) return;
|
|
1381
|
-
const w =
|
|
1376
|
+
const w = v.target.checked;
|
|
1382
1377
|
a("update:modelValue", w), a("change", w);
|
|
1383
1378
|
}, h = b(() => e.id || l);
|
|
1384
1379
|
return () => t("div", { class: s.value }, [t("input", {
|
|
@@ -1391,7 +1386,7 @@ var _t = A({
|
|
|
1391
1386
|
...r
|
|
1392
1387
|
}), t("label", { for: h.value }, [t("span", { class: "switch-toggle" }, [t("i")]), e.label || ""])]);
|
|
1393
1388
|
}
|
|
1394
|
-
}),
|
|
1389
|
+
}), At = _t, Mt = M({
|
|
1395
1390
|
name: "KrdsCheckArea",
|
|
1396
1391
|
props: {
|
|
1397
1392
|
class: {
|
|
@@ -1409,7 +1404,7 @@ var _t = A({
|
|
|
1409
1404
|
return e.column && r.push("chk-column"), e.class && r.push(e.class), t("div", { class: r }, a.default?.());
|
|
1410
1405
|
};
|
|
1411
1406
|
}
|
|
1412
|
-
}), Vt =
|
|
1407
|
+
}), Vt = Mt, Pt = M({
|
|
1413
1408
|
name: "KrdsCheckbox",
|
|
1414
1409
|
props: {
|
|
1415
1410
|
modelValue: {
|
|
@@ -1438,30 +1433,30 @@ var _t = A({
|
|
|
1438
1433
|
default: void 0
|
|
1439
1434
|
}
|
|
1440
1435
|
},
|
|
1441
|
-
emits:
|
|
1436
|
+
emits: { "update:modelValue": (e) => !0 },
|
|
1442
1437
|
slots: Object,
|
|
1443
1438
|
setup(e, { emit: a, attrs: r, slots: l }) {
|
|
1444
|
-
const n = `checkbox-${
|
|
1439
|
+
const n = `checkbox-${oe()}`, s = b(() => e.modelValue), u = b(() => {
|
|
1445
1440
|
const w = e.chip ? "krds-form-chip" : "krds-form-check";
|
|
1446
1441
|
return he(w, e.size, e.class);
|
|
1447
1442
|
}), h = (w) => {
|
|
1448
1443
|
if (e.disabled) return;
|
|
1449
|
-
const
|
|
1450
|
-
a("update:modelValue",
|
|
1451
|
-
},
|
|
1444
|
+
const c = w.target.checked;
|
|
1445
|
+
a("update:modelValue", c);
|
|
1446
|
+
}, v = b(() => e.id || n);
|
|
1452
1447
|
return () => {
|
|
1453
1448
|
const w = [t("input", {
|
|
1454
1449
|
type: "checkbox",
|
|
1455
|
-
id:
|
|
1450
|
+
id: v.value,
|
|
1456
1451
|
checked: s.value,
|
|
1457
1452
|
disabled: e.disabled,
|
|
1458
1453
|
onChange: h,
|
|
1459
1454
|
...r
|
|
1460
|
-
}), t("label", { for:
|
|
1455
|
+
}), t("label", { for: v.value }, l.default?.())];
|
|
1461
1456
|
return l.description && !e.chip && w.push(t("div", { class: "krds-form-check-cnt" }, t("p", { class: "krds-form-check-p" }, l.description()))), t("div", { class: u.value }, w);
|
|
1462
1457
|
};
|
|
1463
1458
|
}
|
|
1464
|
-
}), zt = Pt, Ft =
|
|
1459
|
+
}), zt = Pt, Ft = M({
|
|
1465
1460
|
name: "KrdsRadio",
|
|
1466
1461
|
props: {
|
|
1467
1462
|
modelValue: {
|
|
@@ -1506,30 +1501,30 @@ var _t = A({
|
|
|
1506
1501
|
default: void 0
|
|
1507
1502
|
}
|
|
1508
1503
|
},
|
|
1509
|
-
emits:
|
|
1504
|
+
emits: { "update:modelValue": (e) => !0 },
|
|
1510
1505
|
slots: Object,
|
|
1511
1506
|
setup(e, { emit: a, attrs: r, slots: l }) {
|
|
1512
|
-
const n = `radio-${
|
|
1513
|
-
const
|
|
1514
|
-
return he(
|
|
1515
|
-
}), h = (
|
|
1516
|
-
e.disabled ||
|
|
1517
|
-
},
|
|
1507
|
+
const n = `radio-${oe()}`, s = b(() => e.modelValue === e.value), u = b(() => {
|
|
1508
|
+
const c = e.chip ? "krds-form-chip" : "krds-form-check";
|
|
1509
|
+
return he(c, e.size, e.class);
|
|
1510
|
+
}), h = (c) => {
|
|
1511
|
+
e.disabled || c.target.checked && a("update:modelValue", e.value);
|
|
1512
|
+
}, v = b(() => e.id || n), w = b(() => e.name);
|
|
1518
1513
|
return () => {
|
|
1519
|
-
const
|
|
1514
|
+
const c = [t("input", {
|
|
1520
1515
|
type: "radio",
|
|
1521
|
-
id:
|
|
1516
|
+
id: v.value,
|
|
1522
1517
|
name: w.value,
|
|
1523
1518
|
value: String(e.value),
|
|
1524
1519
|
checked: s.value,
|
|
1525
1520
|
disabled: e.disabled,
|
|
1526
1521
|
onChange: h,
|
|
1527
1522
|
...r
|
|
1528
|
-
}), t("label", { for:
|
|
1529
|
-
return l.description && !e.chip &&
|
|
1523
|
+
}), t("label", { for: v.value }, l.default?.())];
|
|
1524
|
+
return l.description && !e.chip && c.push(t("div", { class: "krds-form-check-cnt" }, t("p", { class: "krds-form-check-p" }, l.description()))), t("div", { class: u.value }, c);
|
|
1530
1525
|
};
|
|
1531
1526
|
}
|
|
1532
|
-
}), Rt = Ft, It = Le, Ht =
|
|
1527
|
+
}), Rt = Ft, It = Le, Ht = M({
|
|
1533
1528
|
name: "KrdsStepIndicator",
|
|
1534
1529
|
props: {
|
|
1535
1530
|
modelValue: {
|
|
@@ -1541,15 +1536,15 @@ var _t = A({
|
|
|
1541
1536
|
default: void 0
|
|
1542
1537
|
}
|
|
1543
1538
|
},
|
|
1544
|
-
emits:
|
|
1539
|
+
emits: { "update:modelValue": (e) => !0 },
|
|
1545
1540
|
setup(e, { slots: a }) {
|
|
1546
1541
|
const r = b(() => {
|
|
1547
1542
|
const h = ["krds-step-wrap"];
|
|
1548
1543
|
return e.class && h.push(e.class), h;
|
|
1549
1544
|
}), l = (h) => {
|
|
1550
|
-
const
|
|
1551
|
-
return h <
|
|
1552
|
-
}, n =
|
|
1545
|
+
const v = e.modelValue || 0;
|
|
1546
|
+
return h < v ? "done" : h === v ? "active" : "pending";
|
|
1547
|
+
}, n = D(0), s = () => {
|
|
1553
1548
|
n.value = 0;
|
|
1554
1549
|
}, u = () => n.value++;
|
|
1555
1550
|
return Qe("stepIndicator", {
|
|
@@ -1559,7 +1554,7 @@ var _t = A({
|
|
|
1559
1554
|
resetStepIndex: s
|
|
1560
1555
|
}), () => (s(), t("ol", { class: r.value }, a.default?.()));
|
|
1561
1556
|
}
|
|
1562
|
-
}),
|
|
1557
|
+
}), Nt = Ht, Ot = M({
|
|
1563
1558
|
name: "KrdsStep",
|
|
1564
1559
|
props: {
|
|
1565
1560
|
step: {
|
|
@@ -1579,28 +1574,28 @@ var _t = A({
|
|
|
1579
1574
|
default: void 0
|
|
1580
1575
|
}
|
|
1581
1576
|
},
|
|
1582
|
-
emits:
|
|
1577
|
+
emits: { click: (e, a) => !0 },
|
|
1583
1578
|
setup(e, { emit: a, slots: r }) {
|
|
1584
1579
|
const l = Xe("stepIndicator"), n = l ? l.getNextStepIndex() : -1, s = b(() => e.status ? e.status : l && n >= 0 ? l.getStepStatus(n) : "pending"), u = b(() => {
|
|
1585
|
-
const
|
|
1586
|
-
return e.class &&
|
|
1587
|
-
}), h = (
|
|
1588
|
-
a("click",
|
|
1580
|
+
const v = [s.value];
|
|
1581
|
+
return e.class && v.push(e.class), v;
|
|
1582
|
+
}), h = (v) => {
|
|
1583
|
+
a("click", v, e.step);
|
|
1589
1584
|
};
|
|
1590
1585
|
return () => {
|
|
1591
|
-
const
|
|
1586
|
+
const v = s.value === "active";
|
|
1592
1587
|
return t("li", {
|
|
1593
1588
|
class: u.value,
|
|
1594
1589
|
onClick: h
|
|
1595
1590
|
}, [t("span", [
|
|
1596
|
-
|
|
1591
|
+
v && t("em", { class: "sr-only" }, "현재단계"),
|
|
1597
1592
|
t("i", { class: "step" }, e.step),
|
|
1598
1593
|
t("span", { class: "step-tit" }, e.title),
|
|
1599
1594
|
r.default?.()
|
|
1600
1595
|
])]);
|
|
1601
1596
|
};
|
|
1602
1597
|
}
|
|
1603
|
-
}), qt =
|
|
1598
|
+
}), qt = Ot, Wt = M({
|
|
1604
1599
|
name: "KrdsSkipLink",
|
|
1605
1600
|
props: {
|
|
1606
1601
|
href: {
|
|
@@ -1627,7 +1622,7 @@ var _t = A({
|
|
|
1627
1622
|
class: e.class
|
|
1628
1623
|
}, [t("a", { href: e.href }, a.default?.())]);
|
|
1629
1624
|
}
|
|
1630
|
-
}), Yt = Wt, jt =
|
|
1625
|
+
}), Yt = Wt, jt = M({
|
|
1631
1626
|
name: "KrdsBreadcrumb",
|
|
1632
1627
|
props: {
|
|
1633
1628
|
items: {
|
|
@@ -1647,7 +1642,7 @@ var _t = A({
|
|
|
1647
1642
|
default: !0
|
|
1648
1643
|
}
|
|
1649
1644
|
},
|
|
1650
|
-
emits:
|
|
1645
|
+
emits: { "item-click": (e, a) => !0 },
|
|
1651
1646
|
setup(e, { emit: a }) {
|
|
1652
1647
|
const r = (n) => n === e.items.length - 1, l = (n, s) => {
|
|
1653
1648
|
n.onClick && n.onClick(s), a("item-click", n, s);
|
|
@@ -1669,7 +1664,7 @@ var _t = A({
|
|
|
1669
1664
|
}, u ? [] : [t("span", null, n.text)])]);
|
|
1670
1665
|
}))]);
|
|
1671
1666
|
}
|
|
1672
|
-
}), Gt = jt, Ut =
|
|
1667
|
+
}), Gt = jt, Ut = M({
|
|
1673
1668
|
name: "KrdsInPageNavigation",
|
|
1674
1669
|
props: {
|
|
1675
1670
|
title: {
|
|
@@ -1701,94 +1696,94 @@ var _t = A({
|
|
|
1701
1696
|
default: void 0
|
|
1702
1697
|
}
|
|
1703
1698
|
},
|
|
1704
|
-
emits:
|
|
1699
|
+
emits: { itemClick: (e, a) => !0 },
|
|
1705
1700
|
slots: Object,
|
|
1706
1701
|
setup(e, { emit: a, slots: r }) {
|
|
1707
|
-
const l =
|
|
1708
|
-
const
|
|
1709
|
-
return e.class &&
|
|
1702
|
+
const l = D(""), n = D(/* @__PURE__ */ new Map()), s = b(() => {
|
|
1703
|
+
const f = ["krds-in-page-navigation-type"];
|
|
1704
|
+
return e.class && f.push(e.class), f;
|
|
1710
1705
|
}), u = () => {
|
|
1711
|
-
const
|
|
1712
|
-
return (document.querySelector(
|
|
1713
|
-
}, h = (
|
|
1714
|
-
if (a("itemClick",
|
|
1706
|
+
const f = e.headerTopSelector, o = e.headerInnerSelector;
|
|
1707
|
+
return (document.querySelector(f)?.clientHeight || 0) + (document.querySelector(o)?.clientHeight || 0);
|
|
1708
|
+
}, h = (f, o) => {
|
|
1709
|
+
if (a("itemClick", f, o), f.href.startsWith("#")) {
|
|
1715
1710
|
o.preventDefault();
|
|
1716
|
-
const i = document.querySelector(
|
|
1711
|
+
const i = document.querySelector(f.href);
|
|
1717
1712
|
if (i) {
|
|
1718
|
-
const
|
|
1713
|
+
const g = u();
|
|
1719
1714
|
if (window.scrollTo({
|
|
1720
1715
|
left: 0,
|
|
1721
|
-
top: i.getBoundingClientRect().top + window.scrollY -
|
|
1716
|
+
top: i.getBoundingClientRect().top + window.scrollY - g,
|
|
1722
1717
|
behavior: "smooth"
|
|
1723
|
-
}), l.value =
|
|
1724
|
-
const
|
|
1725
|
-
|
|
1718
|
+
}), l.value = f.href, o instanceof KeyboardEvent) {
|
|
1719
|
+
const m = i.querySelector(".sec-tit, h1, h2, h3, h4, h5, h6");
|
|
1720
|
+
m && m instanceof HTMLElement && (m.setAttribute("tabindex", "-1"), m.focus({ preventScroll: !0 }));
|
|
1726
1721
|
}
|
|
1727
1722
|
}
|
|
1728
1723
|
}
|
|
1729
|
-
},
|
|
1730
|
-
n.value.clear(), e.items && e.items.filter((
|
|
1731
|
-
const o = document.querySelector(
|
|
1732
|
-
o && n.value.set(
|
|
1724
|
+
}, v = () => {
|
|
1725
|
+
n.value.clear(), e.items && e.items.filter((f) => f.href.startsWith("#")).forEach((f) => {
|
|
1726
|
+
const o = document.querySelector(f.href);
|
|
1727
|
+
o && n.value.set(f.href, o);
|
|
1733
1728
|
});
|
|
1734
1729
|
}, w = () => {
|
|
1735
1730
|
if (!e.autoActive || !e.items || n.value.size === 0) return;
|
|
1736
|
-
const
|
|
1731
|
+
const f = window.innerHeight, o = Math.ceil(f / 5), i = window.scrollY + f, g = document.body.scrollHeight, m = e.items.filter((_) => _.href.startsWith("#") && n.value.has(_.href)).map((_) => ({
|
|
1737
1732
|
href: _.href,
|
|
1738
1733
|
element: n.value.get(_.href),
|
|
1739
1734
|
item: _
|
|
1740
1735
|
}));
|
|
1741
|
-
if (
|
|
1742
|
-
const $ =
|
|
1743
|
-
let
|
|
1744
|
-
if (i >=
|
|
1745
|
-
else if (window.scrollY <= E)
|
|
1746
|
-
else for (const _ of
|
|
1747
|
-
const
|
|
1748
|
-
if (window.scrollY >
|
|
1749
|
-
|
|
1736
|
+
if (m.length === 0) return;
|
|
1737
|
+
const $ = m[0], C = m[m.length - 1], E = $.element.offsetTop;
|
|
1738
|
+
let T = "";
|
|
1739
|
+
if (i >= g) T = C.href;
|
|
1740
|
+
else if (window.scrollY <= E) T = $.href;
|
|
1741
|
+
else for (const _ of m) {
|
|
1742
|
+
const p = _.element.offsetHeight, A = _.element.offsetTop - o;
|
|
1743
|
+
if (window.scrollY > A && window.scrollY <= A + p) {
|
|
1744
|
+
T = _.href;
|
|
1750
1745
|
break;
|
|
1751
1746
|
}
|
|
1752
1747
|
}
|
|
1753
|
-
|
|
1754
|
-
},
|
|
1748
|
+
T && T !== l.value && (l.value = T);
|
|
1749
|
+
}, c = () => {
|
|
1755
1750
|
if (!e.items) return;
|
|
1756
|
-
const
|
|
1757
|
-
|
|
1751
|
+
const f = e.items.find((o) => o.active);
|
|
1752
|
+
f ? l.value = f.href : e.items.length > 0 && (l.value = e.items[0].href);
|
|
1758
1753
|
};
|
|
1759
1754
|
ie(() => {
|
|
1760
|
-
if (
|
|
1761
|
-
|
|
1762
|
-
const
|
|
1763
|
-
|
|
1755
|
+
if (c(), e.autoActive) {
|
|
1756
|
+
v(), w(), window.addEventListener("scroll", w, { passive: !0 });
|
|
1757
|
+
const f = new MutationObserver(() => {
|
|
1758
|
+
v();
|
|
1764
1759
|
});
|
|
1765
|
-
|
|
1760
|
+
f.observe(document.body, {
|
|
1766
1761
|
childList: !0,
|
|
1767
1762
|
subtree: !0
|
|
1768
1763
|
}), re(() => {
|
|
1769
|
-
|
|
1764
|
+
f.disconnect();
|
|
1770
1765
|
});
|
|
1771
1766
|
}
|
|
1772
1767
|
}), re(() => {
|
|
1773
1768
|
e.autoActive && (window.removeEventListener("scroll", w), n.value.clear());
|
|
1774
1769
|
});
|
|
1775
|
-
const
|
|
1770
|
+
const B = () => !e.caption && !e.title ? null : t("div", { class: "in-page-navigation-header" }, [e.caption && t("p", { class: "quick-caption" }, e.caption), e.title && t("p", { class: "quick-title" }, e.title)]), S = () => {
|
|
1776
1771
|
if (!e.items) return null;
|
|
1777
|
-
const
|
|
1772
|
+
const f = e.items.map((o) => {
|
|
1778
1773
|
const i = l.value === o.href || !e.autoActive && o.active;
|
|
1779
1774
|
return t("li", { key: o.href }, [t("a", {
|
|
1780
1775
|
href: o.href,
|
|
1781
1776
|
class: i ? "active" : "",
|
|
1782
|
-
onClick: (
|
|
1783
|
-
onKeydown: (
|
|
1784
|
-
(
|
|
1777
|
+
onClick: (g) => h(o, g),
|
|
1778
|
+
onKeydown: (g) => {
|
|
1779
|
+
(g.key === "Enter" || g.key === " ") && (g.preventDefault(), h(o, g));
|
|
1785
1780
|
}
|
|
1786
1781
|
}, o.text)]);
|
|
1787
1782
|
});
|
|
1788
|
-
return t("nav", { class: "in-page-navigation-list" }, [t("ul", {},
|
|
1783
|
+
return t("nav", { class: "in-page-navigation-list" }, [t("ul", {}, f)]);
|
|
1789
1784
|
}, x = () => r.action ? t("div", { class: "in-page-navigation-action" }, [r.action()]) : null;
|
|
1790
1785
|
return () => t("div", { class: s.value }, [t("div", { class: "krds-in-page-navigation-area" }, [
|
|
1791
|
-
|
|
1786
|
+
B(),
|
|
1792
1787
|
S(),
|
|
1793
1788
|
x()
|
|
1794
1789
|
].filter(Boolean))]);
|
|
@@ -1805,7 +1800,7 @@ var _t = A({
|
|
|
1805
1800
|
}
|
|
1806
1801
|
}, Qt = (e) => {
|
|
1807
1802
|
e.directive("sr-only", De);
|
|
1808
|
-
}, ke = 1, Se = 8, Jt =
|
|
1803
|
+
}, ke = 1, Se = 8, Jt = M({
|
|
1809
1804
|
name: "KrdsPagination",
|
|
1810
1805
|
props: {
|
|
1811
1806
|
modelValue: {
|
|
@@ -1833,7 +1828,7 @@ var _t = A({
|
|
|
1833
1828
|
default: Se
|
|
1834
1829
|
}
|
|
1835
1830
|
},
|
|
1836
|
-
emits:
|
|
1831
|
+
emits: { "update:modelValue": (e) => !0 },
|
|
1837
1832
|
setup(e, { emit: a }) {
|
|
1838
1833
|
const r = b(() => Math.max(1, e.min ?? ke)), l = b(() => e.modelValue ?? r.value), n = b(() => l.value <= r.value), s = b(() => l.value >= e.max), u = b(() => {
|
|
1839
1834
|
if (!n.value)
|
|
@@ -1841,60 +1836,60 @@ var _t = A({
|
|
|
1841
1836
|
}), h = b(() => {
|
|
1842
1837
|
if (!s.value)
|
|
1843
1838
|
return "#";
|
|
1844
|
-
}),
|
|
1845
|
-
const { max: x } = e,
|
|
1846
|
-
if (x <=
|
|
1839
|
+
}), v = b(() => {
|
|
1840
|
+
const { max: x } = e, f = e.pageRange ?? Se, o = 1, i = [];
|
|
1841
|
+
if (x <= f + 2) for (let g = r.value; g <= x; g++) i.push({
|
|
1847
1842
|
type: "page",
|
|
1848
|
-
key: `page-${
|
|
1849
|
-
page:
|
|
1843
|
+
key: `page-${g}`,
|
|
1844
|
+
page: g,
|
|
1850
1845
|
href: "#"
|
|
1851
1846
|
});
|
|
1852
1847
|
else {
|
|
1853
|
-
const
|
|
1854
|
-
for (let
|
|
1848
|
+
const g = Math.min(o, x), m = Math.max(x - o + 1, 1), $ = Math.max(r.value, l.value - Math.floor(f / 2)), C = Math.min(x, $ + f - 1), E = Math.max(r.value, C - f + 1);
|
|
1849
|
+
for (let p = r.value; p <= g; p++) i.push({
|
|
1855
1850
|
type: "page",
|
|
1856
|
-
key: `page-${
|
|
1857
|
-
page:
|
|
1851
|
+
key: `page-${p}`,
|
|
1852
|
+
page: p,
|
|
1858
1853
|
href: "#"
|
|
1859
1854
|
});
|
|
1860
|
-
E >
|
|
1855
|
+
E > g + 1 && i.push({
|
|
1861
1856
|
type: "ellipsis",
|
|
1862
1857
|
key: "ellipsis-left",
|
|
1863
1858
|
ariaLabel: "페이지 생략"
|
|
1864
1859
|
});
|
|
1865
|
-
const
|
|
1866
|
-
for (let
|
|
1860
|
+
const T = Math.max(E, g + 1), _ = Math.min(C, m - 1);
|
|
1861
|
+
for (let p = T; p <= _; p++) i.push({
|
|
1867
1862
|
type: "page",
|
|
1868
|
-
key: `page-${
|
|
1869
|
-
page:
|
|
1863
|
+
key: `page-${p}`,
|
|
1864
|
+
page: p,
|
|
1870
1865
|
href: "#"
|
|
1871
1866
|
});
|
|
1872
|
-
C <
|
|
1867
|
+
C < m - 1 && i.push({
|
|
1873
1868
|
type: "ellipsis",
|
|
1874
1869
|
key: "ellipsis-right",
|
|
1875
1870
|
ariaLabel: "페이지 생략"
|
|
1876
1871
|
});
|
|
1877
|
-
for (let
|
|
1872
|
+
for (let p = m; p <= x; p++) i.push({
|
|
1878
1873
|
type: "page",
|
|
1879
|
-
key: `page-${
|
|
1880
|
-
page:
|
|
1874
|
+
key: `page-${p}`,
|
|
1875
|
+
page: p,
|
|
1881
1876
|
href: "#"
|
|
1882
1877
|
});
|
|
1883
1878
|
}
|
|
1884
1879
|
return i;
|
|
1885
|
-
}), w = (x,
|
|
1880
|
+
}), w = (x, f) => {
|
|
1886
1881
|
if (x === l.value) {
|
|
1887
|
-
|
|
1882
|
+
f.preventDefault();
|
|
1888
1883
|
return;
|
|
1889
1884
|
}
|
|
1890
1885
|
a("update:modelValue", x);
|
|
1891
|
-
},
|
|
1886
|
+
}, c = (x) => {
|
|
1892
1887
|
if (n.value) {
|
|
1893
1888
|
x.preventDefault();
|
|
1894
1889
|
return;
|
|
1895
1890
|
}
|
|
1896
1891
|
a("update:modelValue", l.value - 1);
|
|
1897
|
-
},
|
|
1892
|
+
}, B = (x) => {
|
|
1898
1893
|
if (s.value) {
|
|
1899
1894
|
x.preventDefault();
|
|
1900
1895
|
return;
|
|
@@ -1902,14 +1897,14 @@ var _t = A({
|
|
|
1902
1897
|
a("update:modelValue", l.value + 1);
|
|
1903
1898
|
}, S = (x) => {
|
|
1904
1899
|
if (x.type === "page") {
|
|
1905
|
-
const
|
|
1900
|
+
const f = x.page === l.value;
|
|
1906
1901
|
return t("a", {
|
|
1907
1902
|
key: x.key,
|
|
1908
1903
|
href: x.href || "#",
|
|
1909
|
-
class: ["page-link", { active:
|
|
1910
|
-
"aria-current":
|
|
1904
|
+
class: ["page-link", { active: f }],
|
|
1905
|
+
"aria-current": f ? "page" : void 0,
|
|
1911
1906
|
onClick: (o) => w(x.page, o)
|
|
1912
|
-
}, [
|
|
1907
|
+
}, [f ? ve(t("span", null, "현재페이지"), [[De]]) : null, ` ${x.page} `]);
|
|
1913
1908
|
}
|
|
1914
1909
|
return t("span", {
|
|
1915
1910
|
key: x.key,
|
|
@@ -1928,9 +1923,9 @@ var _t = A({
|
|
|
1928
1923
|
"prev",
|
|
1929
1924
|
{ disabled: n.value }
|
|
1930
1925
|
],
|
|
1931
|
-
onClick:
|
|
1926
|
+
onClick: c
|
|
1932
1927
|
}, "이전"),
|
|
1933
|
-
t("div", { class: "page-links" },
|
|
1928
|
+
t("div", { class: "page-links" }, v.value.map(S)),
|
|
1934
1929
|
t(s.value ? "span" : "a", {
|
|
1935
1930
|
href: s.value ? void 0 : h.value,
|
|
1936
1931
|
class: [
|
|
@@ -1938,17 +1933,17 @@ var _t = A({
|
|
|
1938
1933
|
"next",
|
|
1939
1934
|
{ disabled: s.value }
|
|
1940
1935
|
],
|
|
1941
|
-
onClick:
|
|
1936
|
+
onClick: B
|
|
1942
1937
|
}, "다음")
|
|
1943
1938
|
]);
|
|
1944
1939
|
}
|
|
1945
|
-
}), Zt = Jt, ea =
|
|
1940
|
+
}), Zt = Jt, ea = M({
|
|
1946
1941
|
name: "KrdsPanel",
|
|
1947
1942
|
props: { modelValue: {
|
|
1948
1943
|
type: Boolean,
|
|
1949
1944
|
default: !1
|
|
1950
1945
|
} },
|
|
1951
|
-
emits:
|
|
1946
|
+
emits: { "update:modelValue": (e) => !0 },
|
|
1952
1947
|
setup(e, { emit: a, slots: r }) {
|
|
1953
1948
|
const l = b({
|
|
1954
1949
|
get: () => e.modelValue,
|
|
@@ -1972,7 +1967,7 @@ var _t = A({
|
|
|
1972
1967
|
t("i", { class: "svg-icon ico-angle right" })
|
|
1973
1968
|
])])])])]);
|
|
1974
1969
|
}
|
|
1975
|
-
}), ta = ea, aa =
|
|
1970
|
+
}), ta = ea, aa = M({
|
|
1976
1971
|
name: "KrdsContextualHelp",
|
|
1977
1972
|
props: {
|
|
1978
1973
|
tooltipTitle: {
|
|
@@ -1989,39 +1984,39 @@ var _t = A({
|
|
|
1989
1984
|
}
|
|
1990
1985
|
},
|
|
1991
1986
|
setup(e, { slots: a }) {
|
|
1992
|
-
const r =
|
|
1987
|
+
const r = D(), l = D(), n = D(), s = D(), u = D(!1), h = () => {
|
|
1993
1988
|
const o = u.value;
|
|
1994
|
-
|
|
1995
|
-
},
|
|
1996
|
-
!n.value || !l.value || (u.value = !0, n.value.style.display = "block", l.value.setAttribute("aria-expanded", "true"), n.value.querySelector('a, button, [tabindex="0"], input, textarea, select')?.focus(),
|
|
1989
|
+
c(), o || v();
|
|
1990
|
+
}, v = () => {
|
|
1991
|
+
!n.value || !l.value || (u.value = !0, n.value.style.display = "block", l.value.setAttribute("aria-expanded", "true"), n.value.querySelector('a, button, [tabindex="0"], input, textarea, select')?.focus(), B());
|
|
1997
1992
|
}, w = () => {
|
|
1998
1993
|
!n.value || !l.value || (u.value = !1, n.value.style.display = "none", l.value.setAttribute("aria-expanded", "false"));
|
|
1999
|
-
},
|
|
1994
|
+
}, c = () => {
|
|
2000
1995
|
const o = document.querySelectorAll(".krds-contextual-help .tooltip-popover"), i = document.querySelectorAll(".krds-contextual-help .tooltip-btn");
|
|
2001
|
-
o.forEach((
|
|
2002
|
-
|
|
2003
|
-
}), i.forEach((
|
|
2004
|
-
|
|
1996
|
+
o.forEach((g) => {
|
|
1997
|
+
g.style.display = "none";
|
|
1998
|
+
}), i.forEach((g) => {
|
|
1999
|
+
g.setAttribute("aria-expanded", "false");
|
|
2005
2000
|
}), u.value = !1;
|
|
2006
|
-
},
|
|
2001
|
+
}, B = () => {
|
|
2007
2002
|
if (!r.value || !n.value) return;
|
|
2008
2003
|
const o = window.innerWidth <= 768, i = r.value.querySelector(".tooltip-action");
|
|
2009
2004
|
if (o) {
|
|
2010
|
-
const
|
|
2011
|
-
n.value.style.left = `-${
|
|
2005
|
+
const g = getComputedStyle(document.querySelector(":root")).getPropertyValue("--krds-contents-padding-x").trim().split("px")[0], m = i.getBoundingClientRect().left - parseInt(g), $ = document.body.clientWidth - parseInt(g) * 2;
|
|
2006
|
+
n.value.style.left = `-${m}px`, n.value.style.width = `${$}px`;
|
|
2012
2007
|
} else
|
|
2013
2008
|
n.value.style.left = "", n.value.style.right = "", n.value.style.width = "360px";
|
|
2014
2009
|
}, S = (o) => {
|
|
2015
|
-
(o.key === "Escape" || o.key === "Esc") &&
|
|
2010
|
+
(o.key === "Escape" || o.key === "Esc") && c();
|
|
2016
2011
|
}, x = (o) => {
|
|
2017
|
-
o.target.closest(".tooltip-action") ||
|
|
2018
|
-
},
|
|
2019
|
-
u.value &&
|
|
2012
|
+
o.target.closest(".tooltip-action") || c();
|
|
2013
|
+
}, f = () => {
|
|
2014
|
+
u.value && B();
|
|
2020
2015
|
};
|
|
2021
2016
|
return ie(() => {
|
|
2022
|
-
r.value && (l.value && l.value.setAttribute("aria-expanded", "false"), n.value && n.value.setAttribute("role", "tooltip"), document.addEventListener("keydown", S), document.addEventListener("click", x), window.addEventListener("resize",
|
|
2017
|
+
r.value && (l.value && l.value.setAttribute("aria-expanded", "false"), n.value && n.value.setAttribute("role", "tooltip"), document.addEventListener("keydown", S), document.addEventListener("click", x), window.addEventListener("resize", f));
|
|
2023
2018
|
}), re(() => {
|
|
2024
|
-
document.removeEventListener("keydown", S), document.removeEventListener("click", x), window.removeEventListener("resize",
|
|
2019
|
+
document.removeEventListener("keydown", S), document.removeEventListener("click", x), window.removeEventListener("resize", f);
|
|
2025
2020
|
}), () => t("div", {
|
|
2026
2021
|
ref: r,
|
|
2027
2022
|
class: ["krds-contextual-help", e.position]
|
|
@@ -2045,7 +2040,7 @@ var _t = A({
|
|
|
2045
2040
|
}, [t("span", { class: "sr-only" }, "닫기"), t("i", { class: "svg-icon ico-modal-close" })])
|
|
2046
2041
|
])])]);
|
|
2047
2042
|
}
|
|
2048
|
-
}), la = aa, na =
|
|
2043
|
+
}), la = aa, na = M({
|
|
2049
2044
|
name: "KrdsCoachMark",
|
|
2050
2045
|
props: {
|
|
2051
2046
|
coachMarkClass: {
|
|
@@ -2064,24 +2059,19 @@ var _t = A({
|
|
|
2064
2059
|
type: Number,
|
|
2065
2060
|
default: null
|
|
2066
2061
|
},
|
|
2067
|
-
class: {
|
|
2068
|
-
type: String,
|
|
2069
|
-
default: void 0
|
|
2070
|
-
},
|
|
2071
2062
|
style: {
|
|
2072
2063
|
type: [String, Object],
|
|
2073
2064
|
default: void 0
|
|
2074
|
-
},
|
|
2075
|
-
id: {
|
|
2076
|
-
type: String,
|
|
2077
|
-
default: void 0
|
|
2078
2065
|
}
|
|
2079
2066
|
},
|
|
2080
|
-
emits:
|
|
2067
|
+
emits: {
|
|
2068
|
+
"update:modelValue": (e) => !0,
|
|
2069
|
+
close: () => !0
|
|
2070
|
+
},
|
|
2081
2071
|
setup(e, { emit: a, slots: r }) {
|
|
2082
2072
|
const l = b(() => {
|
|
2083
|
-
const
|
|
2084
|
-
return e.stepsData &&
|
|
2073
|
+
const v = e.activeStep - 1;
|
|
2074
|
+
return e.stepsData && v >= 0 && v < e.stepsData.length ? e.stepsData[v] : null;
|
|
2085
2075
|
}), n = () => {
|
|
2086
2076
|
e.activeStep > 1 && a("update:modelValue", e.activeStep - 1);
|
|
2087
2077
|
}, s = () => {
|
|
@@ -2089,11 +2079,11 @@ var _t = A({
|
|
|
2089
2079
|
}, u = () => {
|
|
2090
2080
|
a("close");
|
|
2091
2081
|
}, h = () => {
|
|
2092
|
-
const
|
|
2093
|
-
return e.modelValue !== e.activeStep || !
|
|
2082
|
+
const v = l.value;
|
|
2083
|
+
return e.modelValue !== e.activeStep || !v ? null : t("div", { class: "coach-balloon" }, [
|
|
2094
2084
|
t("h5", { class: "sr-only" }, "따라하기 가이드"),
|
|
2095
|
-
t("h6", { class: "coach-tit" }, `${e.activeStep}단계 : ${
|
|
2096
|
-
t("p", { class: "desc" },
|
|
2085
|
+
t("h6", { class: "coach-tit" }, `${e.activeStep}단계 : ${v.title}`),
|
|
2086
|
+
t("p", { class: "desc" }, v.description),
|
|
2097
2087
|
t("div", { class: "coach-controls" }, [t("div", { class: "num" }, [
|
|
2098
2088
|
t("span", { class: "sr-only" }, "현재 단계"),
|
|
2099
2089
|
t("strong", null, String(e.activeStep)),
|
|
@@ -2123,7 +2113,7 @@ var _t = A({
|
|
|
2123
2113
|
style: e.style
|
|
2124
2114
|
}, [h(), r["coach-mark-content"]?.()]);
|
|
2125
2115
|
}
|
|
2126
|
-
}), sa = na, ra =
|
|
2116
|
+
}), sa = na, ra = M({
|
|
2127
2117
|
name: "KrdsTooltip",
|
|
2128
2118
|
props: {
|
|
2129
2119
|
type: {
|
|
@@ -2145,35 +2135,23 @@ var _t = A({
|
|
|
2145
2135
|
disabled: {
|
|
2146
2136
|
type: Boolean,
|
|
2147
2137
|
default: !1
|
|
2148
|
-
},
|
|
2149
|
-
class: {
|
|
2150
|
-
type: String,
|
|
2151
|
-
default: void 0
|
|
2152
|
-
},
|
|
2153
|
-
style: {
|
|
2154
|
-
type: [String, Object],
|
|
2155
|
-
default: void 0
|
|
2156
|
-
},
|
|
2157
|
-
id: {
|
|
2158
|
-
type: String,
|
|
2159
|
-
default: void 0
|
|
2160
2138
|
}
|
|
2161
2139
|
},
|
|
2162
2140
|
setup(e, { slots: a }) {
|
|
2163
|
-
const r =
|
|
2164
|
-
const
|
|
2165
|
-
return e.type === "default" ?
|
|
2141
|
+
const r = D(null), l = D(null), n = D(!1), s = D({}), u = `tooltip-popover-${oe()}`, h = D(!1), v = b(() => {
|
|
2142
|
+
const m = ["krds-btn", "krds-tooltip"];
|
|
2143
|
+
return e.type === "default" ? m.push("small", "text") : e.type === "icon" ? m.push("icon") : e.type === "button" && m.push(""), !e.box && e.vertical && m.push("tooltip-vertical"), e.box && !e.vertical && m.push("tooltip-box"), m.join(" ");
|
|
2166
2144
|
}), w = b(() => {
|
|
2167
|
-
const
|
|
2168
|
-
return e.box &&
|
|
2169
|
-
}),
|
|
2145
|
+
const m = [];
|
|
2146
|
+
return e.box && m.push("tooltip-box"), e.vertical && m.push("tooltip-vertical"), n.value && m.push("active"), m;
|
|
2147
|
+
}), c = b(() => r.value?.querySelector("button")?.textContent?.trim() || ""), B = () => window.innerWidth <= 768, S = () => {
|
|
2170
2148
|
if (!r.value || !l.value) return;
|
|
2171
|
-
const
|
|
2172
|
-
if (!
|
|
2173
|
-
const $ = 12, { clientHeight: C, clientWidth: E } = l.value, { top:
|
|
2149
|
+
const m = r.value.querySelector("button");
|
|
2150
|
+
if (!m) return;
|
|
2151
|
+
const $ = 12, { clientHeight: C, clientWidth: E } = l.value, { top: T, left: _, right: p, height: A, width: I } = m.getBoundingClientRect(), O = window.innerWidth / 2, H = window.innerHeight / 2;
|
|
2174
2152
|
let G, j;
|
|
2175
2153
|
const X = [];
|
|
2176
|
-
h.value || e.box || e.vertical ? (
|
|
2154
|
+
h.value || e.box || e.vertical ? (T + A > H ? (G = T - C - $, X.push("top")) : (G = T + A + $, X.push("bottom")), _ + I > O ? (j = p - E, X.push("right"), window.innerWidth - (_ + I) > E / 2 && (j = _ + (I - E) / 2, X.splice(X.indexOf("right"), 1))) : (j = _ + (I - E) / 2, j < 0 && (j = _, X.push("left")))) : (G = T + (A - C) / 2, _ + I > O ? (j = _ - E - $, X.push("right")) : j = p + $);
|
|
2177
2155
|
const le = window.innerWidth <= 420;
|
|
2178
2156
|
s.value = {
|
|
2179
2157
|
top: `${G}px`,
|
|
@@ -2182,28 +2160,28 @@ var _t = A({
|
|
|
2182
2160
|
}, l.value && (l.value.className = `krds-tooltip-popover ${X.join(" ")} ${w.value.join(" ")}`);
|
|
2183
2161
|
}, x = async () => {
|
|
2184
2162
|
e.disabled || !e.tooltipContent || (n.value = !0, await ce(), S());
|
|
2185
|
-
},
|
|
2163
|
+
}, f = () => {
|
|
2186
2164
|
n.value = !1, s.value = {};
|
|
2187
|
-
}, o = (
|
|
2188
|
-
(
|
|
2165
|
+
}, o = (m) => {
|
|
2166
|
+
(m.key === "Escape" || m.key === "Esc") && n.value && f();
|
|
2189
2167
|
}, i = () => {
|
|
2190
|
-
h.value =
|
|
2191
|
-
},
|
|
2192
|
-
n.value &&
|
|
2168
|
+
h.value = B(), n.value && f();
|
|
2169
|
+
}, g = () => {
|
|
2170
|
+
n.value && f();
|
|
2193
2171
|
};
|
|
2194
2172
|
return ie(() => {
|
|
2195
|
-
h.value =
|
|
2173
|
+
h.value = B(), document.addEventListener("keydown", o), window.addEventListener("scroll", g), window.addEventListener("resize", i);
|
|
2196
2174
|
}), re(() => {
|
|
2197
|
-
document.removeEventListener("keydown", o), window.removeEventListener("scroll",
|
|
2175
|
+
document.removeEventListener("keydown", o), window.removeEventListener("scroll", g), window.removeEventListener("resize", i);
|
|
2198
2176
|
}), () => t("div", { ref: r }, [t("button", {
|
|
2199
2177
|
type: "button",
|
|
2200
|
-
class:
|
|
2178
|
+
class: v.value,
|
|
2201
2179
|
disabled: e.disabled,
|
|
2202
2180
|
"aria-labelledby": u,
|
|
2203
2181
|
onMouseover: x,
|
|
2204
|
-
onMouseout:
|
|
2182
|
+
onMouseout: f,
|
|
2205
2183
|
onFocusin: x,
|
|
2206
|
-
onFocusout:
|
|
2184
|
+
onFocusout: f
|
|
2207
2185
|
}, a.default?.()), ve(t("div", {
|
|
2208
2186
|
id: u,
|
|
2209
2187
|
ref: l,
|
|
@@ -2212,12 +2190,12 @@ var _t = A({
|
|
|
2212
2190
|
"aria-hidden": !n.value,
|
|
2213
2191
|
role: "tooltip"
|
|
2214
2192
|
}, [
|
|
2215
|
-
t("span", { class: "sr-only" },
|
|
2193
|
+
t("span", { class: "sr-only" }, c.value),
|
|
2216
2194
|
" ",
|
|
2217
2195
|
e.tooltipContent
|
|
2218
2196
|
]), [[pe, n.value]])]);
|
|
2219
2197
|
}
|
|
2220
|
-
}), ia = ra, oa =
|
|
2198
|
+
}), ia = ra, oa = M({
|
|
2221
2199
|
name: "KrdsLanguageSwitcher",
|
|
2222
2200
|
props: {
|
|
2223
2201
|
languageList: {
|
|
@@ -2235,59 +2213,50 @@ var _t = A({
|
|
|
2235
2213
|
dropPosition: {
|
|
2236
2214
|
type: String,
|
|
2237
2215
|
default: "center"
|
|
2238
|
-
},
|
|
2239
|
-
class: {
|
|
2240
|
-
type: String,
|
|
2241
|
-
default: void 0
|
|
2242
|
-
},
|
|
2243
|
-
style: {
|
|
2244
|
-
type: [String, Object],
|
|
2245
|
-
default: void 0
|
|
2246
|
-
},
|
|
2247
|
-
id: {
|
|
2248
|
-
type: String,
|
|
2249
|
-
default: void 0
|
|
2250
2216
|
}
|
|
2251
2217
|
},
|
|
2252
|
-
emits:
|
|
2218
|
+
emits: {
|
|
2219
|
+
"update:modelValue": (e) => !0,
|
|
2220
|
+
close: () => !0
|
|
2221
|
+
},
|
|
2253
2222
|
setup(e, { emit: a, slots: r }) {
|
|
2254
|
-
const l =
|
|
2223
|
+
const l = D(!1), n = D(), s = D(), u = () => {
|
|
2255
2224
|
l.value = !l.value, l.value && n.value && w();
|
|
2256
2225
|
}, h = () => {
|
|
2257
2226
|
l.value = !1;
|
|
2258
|
-
},
|
|
2227
|
+
}, v = (i) => {
|
|
2259
2228
|
a("update:modelValue", i), h(), a("close"), s.value?.focus();
|
|
2260
2229
|
}, w = () => {
|
|
2261
2230
|
if (!n.value) return;
|
|
2262
2231
|
const i = n.value.querySelector(".drop-menu");
|
|
2263
2232
|
if (!i) return;
|
|
2264
|
-
const
|
|
2265
|
-
n.value.classList.remove("drop-left", "drop-right"),
|
|
2266
|
-
},
|
|
2233
|
+
const g = i.getBoundingClientRect(), m = window.innerWidth;
|
|
2234
|
+
n.value.classList.remove("drop-left", "drop-right"), g.left < 0 ? n.value.classList.add("drop-left") : m < g.left + g.width && n.value.classList.add("drop-right");
|
|
2235
|
+
}, c = (i) => {
|
|
2267
2236
|
i.key === "Escape" && (h(), s.value?.focus());
|
|
2268
|
-
},
|
|
2237
|
+
}, B = (i) => {
|
|
2269
2238
|
n.value?.contains(i.target) || h();
|
|
2270
2239
|
}, S = (i) => {
|
|
2271
2240
|
n.value?.contains(i.relatedTarget) || h();
|
|
2272
2241
|
}, x = (i) => {
|
|
2273
2242
|
if (!n.value) return;
|
|
2274
|
-
n.value.querySelectorAll(".drop-list .item-link").forEach((
|
|
2275
|
-
|
|
2243
|
+
n.value.querySelectorAll(".drop-list .item-link").forEach((m) => {
|
|
2244
|
+
m.style.position = "relative", m.style.zIndex = "0";
|
|
2276
2245
|
});
|
|
2277
|
-
const
|
|
2278
|
-
|
|
2246
|
+
const g = i.target;
|
|
2247
|
+
g.style.zIndex = "1";
|
|
2279
2248
|
};
|
|
2280
2249
|
se(l, (i) => {
|
|
2281
|
-
i ? (document.addEventListener("keydown",
|
|
2250
|
+
i ? (document.addEventListener("keydown", c), document.addEventListener("click", B)) : (document.removeEventListener("keydown", c), document.removeEventListener("click", B));
|
|
2282
2251
|
}), re(() => {
|
|
2283
|
-
document.removeEventListener("keydown",
|
|
2252
|
+
document.removeEventListener("keydown", c), document.removeEventListener("click", B);
|
|
2284
2253
|
});
|
|
2285
|
-
const
|
|
2254
|
+
const f = () => t("ul", { class: "drop-list" }, e.languageList.map((i) => t("li", { key: i.code }, [t("a", {
|
|
2286
2255
|
href: "#",
|
|
2287
2256
|
class: ["item-link", { active: e.modelValue === i.code }],
|
|
2288
2257
|
lang: i.code,
|
|
2289
2258
|
"aria-selected": e.modelValue === i.code,
|
|
2290
|
-
onClick: ge(() =>
|
|
2259
|
+
onClick: ge(() => v(i.code), ["prevent"]),
|
|
2291
2260
|
onFocus: x
|
|
2292
2261
|
}, [
|
|
2293
2262
|
i.name,
|
|
@@ -2330,13 +2299,16 @@ var _t = A({
|
|
|
2330
2299
|
]), t("div", {
|
|
2331
2300
|
class: "drop-menu",
|
|
2332
2301
|
style: { display: l.value ? "block" : "none" }
|
|
2333
|
-
}, [t("div", { class: "drop-in" }, [r["prev-item"] ? t("div", { class: "drop-top" }, r["prev-item"]()) : null, e.type === "default" ?
|
|
2302
|
+
}, [t("div", { class: "drop-in" }, [r["prev-item"] ? t("div", { class: "drop-top" }, r["prev-item"]()) : null, e.type === "default" ? f() : e.type === "external" ? o() : null])])]);
|
|
2334
2303
|
}
|
|
2335
|
-
}),
|
|
2304
|
+
}), ua = oa, da = M({
|
|
2336
2305
|
name: "KrdsResize",
|
|
2337
|
-
emits:
|
|
2306
|
+
emits: {
|
|
2307
|
+
"update:modelValue": (e) => !0,
|
|
2308
|
+
close: () => !0
|
|
2309
|
+
},
|
|
2338
2310
|
setup(e, { emit: a }) {
|
|
2339
|
-
const r =
|
|
2311
|
+
const r = D(!1), l = D(), n = D(), s = D("md"), u = [
|
|
2340
2312
|
{
|
|
2341
2313
|
key: "sm",
|
|
2342
2314
|
label: "작게",
|
|
@@ -2363,33 +2335,33 @@ var _t = A({
|
|
|
2363
2335
|
zoom: "1.5"
|
|
2364
2336
|
}
|
|
2365
2337
|
], h = () => {
|
|
2366
|
-
r.value = !r.value, r.value && l.value &&
|
|
2367
|
-
},
|
|
2338
|
+
r.value = !r.value, r.value && l.value && B();
|
|
2339
|
+
}, v = () => {
|
|
2368
2340
|
r.value = !1;
|
|
2369
2341
|
}, w = (i) => {
|
|
2370
|
-
|
|
2371
|
-
},
|
|
2372
|
-
const i = u.find((
|
|
2342
|
+
v(), a("close"), n.value?.focus(), s.value = i.key, document.body.style.zoom = i?.zoom;
|
|
2343
|
+
}, c = () => {
|
|
2344
|
+
const i = u.find((g) => g.key === "md");
|
|
2373
2345
|
i && w(i);
|
|
2374
|
-
},
|
|
2346
|
+
}, B = () => {
|
|
2375
2347
|
if (!l.value) return;
|
|
2376
2348
|
const i = l.value.querySelector(".drop-menu");
|
|
2377
2349
|
if (!i) return;
|
|
2378
|
-
const
|
|
2379
|
-
l.value.classList.remove("drop-left", "drop-right"),
|
|
2350
|
+
const g = i.getBoundingClientRect(), m = window.innerWidth;
|
|
2351
|
+
l.value.classList.remove("drop-left", "drop-right"), g.left < 0 ? l.value.classList.add("drop-left") : m < g.left + g.width && l.value.classList.add("drop-right");
|
|
2380
2352
|
}, S = (i) => {
|
|
2381
|
-
i.key === "Escape" && (
|
|
2353
|
+
i.key === "Escape" && (v(), n.value?.focus());
|
|
2382
2354
|
}, x = (i) => {
|
|
2383
|
-
l.value?.contains(i.target) ||
|
|
2384
|
-
},
|
|
2385
|
-
l.value?.contains(i.relatedTarget) ||
|
|
2355
|
+
l.value?.contains(i.target) || v();
|
|
2356
|
+
}, f = (i) => {
|
|
2357
|
+
l.value?.contains(i.relatedTarget) || v();
|
|
2386
2358
|
}, o = (i) => {
|
|
2387
2359
|
if (!l.value) return;
|
|
2388
|
-
l.value.querySelectorAll(".drop-list .item-link").forEach((
|
|
2389
|
-
|
|
2360
|
+
l.value.querySelectorAll(".drop-list .item-link").forEach((m) => {
|
|
2361
|
+
m.style.position = "relative", m.style.zIndex = "0";
|
|
2390
2362
|
});
|
|
2391
|
-
const
|
|
2392
|
-
|
|
2363
|
+
const g = i.target;
|
|
2364
|
+
g.style.zIndex = "1";
|
|
2393
2365
|
};
|
|
2394
2366
|
return se(r, (i) => {
|
|
2395
2367
|
i ? (document.addEventListener("keydown", S), document.addEventListener("click", x)) : (document.removeEventListener("keydown", S), document.removeEventListener("click", x));
|
|
@@ -2399,7 +2371,7 @@ var _t = A({
|
|
|
2399
2371
|
ref: l,
|
|
2400
2372
|
class: "krds-drop-wrap krds-resize",
|
|
2401
2373
|
"data-adjust": "scale",
|
|
2402
|
-
onFocusout:
|
|
2374
|
+
onFocusout: f
|
|
2403
2375
|
}, [t("button", {
|
|
2404
2376
|
ref: n,
|
|
2405
2377
|
type: "button",
|
|
@@ -2422,11 +2394,11 @@ var _t = A({
|
|
|
2422
2394
|
type: "button",
|
|
2423
2395
|
class: "krds-btn medium text",
|
|
2424
2396
|
"data-adjust-scale": "md",
|
|
2425
|
-
onClick: ge(
|
|
2397
|
+
onClick: ge(c, ["prevent"]),
|
|
2426
2398
|
onFocus: o
|
|
2427
2399
|
}, [t("i", { class: "svg-icon ico-reset" }), " 초기화"])])])])]);
|
|
2428
2400
|
}
|
|
2429
|
-
}), ca =
|
|
2401
|
+
}), ca = da, fa = M({
|
|
2430
2402
|
name: "KrdsModal",
|
|
2431
2403
|
props: {
|
|
2432
2404
|
modelValue: {
|
|
@@ -2458,7 +2430,7 @@ var _t = A({
|
|
|
2458
2430
|
default: !1
|
|
2459
2431
|
}
|
|
2460
2432
|
},
|
|
2461
|
-
emits:
|
|
2433
|
+
emits: { "update:modelValue": (e) => !0 },
|
|
2462
2434
|
slots: Object,
|
|
2463
2435
|
setup(e, { slots: a, emit: r }) {
|
|
2464
2436
|
const l = xe()?.uid, n = b(() => e.modalId ?? `krds-modal-${l}`), s = b({
|
|
@@ -2468,32 +2440,32 @@ var _t = A({
|
|
|
2468
2440
|
small: "modal-sm",
|
|
2469
2441
|
medium: "modal-md",
|
|
2470
2442
|
large: "modal-lg"
|
|
2471
|
-
})[e.size]),
|
|
2443
|
+
})[e.size]), v = () => {
|
|
2472
2444
|
s.value = !1;
|
|
2473
2445
|
};
|
|
2474
|
-
let w = "",
|
|
2475
|
-
const
|
|
2476
|
-
if (!
|
|
2477
|
-
const
|
|
2478
|
-
if (
|
|
2446
|
+
let w = "", c = null;
|
|
2447
|
+
const B = D(null), S = (i) => Array.from(i.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter((g) => !g.hasAttribute("disabled") && g.getAttribute("tabindex") !== "-1"), x = (i) => {
|
|
2448
|
+
if (!B.value || i.key !== "Tab") return;
|
|
2449
|
+
const g = S(B.value);
|
|
2450
|
+
if (g.length === 0) {
|
|
2479
2451
|
i.preventDefault();
|
|
2480
2452
|
return;
|
|
2481
2453
|
}
|
|
2482
|
-
const
|
|
2483
|
-
i.shiftKey && document.activeElement ===
|
|
2484
|
-
},
|
|
2485
|
-
i.key === "Escape" && !e.persistent &&
|
|
2454
|
+
const m = g[0], $ = g[g.length - 1];
|
|
2455
|
+
i.shiftKey && document.activeElement === m ? (i.preventDefault(), $.focus()) : !i.shiftKey && document.activeElement === $ && (i.preventDefault(), m.focus());
|
|
2456
|
+
}, f = (i) => {
|
|
2457
|
+
i.key === "Escape" && !e.persistent && v();
|
|
2486
2458
|
}, o = () => {
|
|
2487
|
-
document.body.style.overflow = w, document.removeEventListener("keydown", x), document.removeEventListener("keydown",
|
|
2459
|
+
document.body.style.overflow = w, document.removeEventListener("keydown", x), document.removeEventListener("keydown", f), c && (c.focus(), c = null), B.value = null;
|
|
2488
2460
|
};
|
|
2489
2461
|
return se(() => e.modelValue, async (i) => {
|
|
2490
2462
|
if (i) {
|
|
2491
|
-
w = document.body.style.overflow, document.body.style.overflow = "hidden",
|
|
2492
|
-
const
|
|
2493
|
-
if (
|
|
2494
|
-
|
|
2495
|
-
const
|
|
2496
|
-
|
|
2463
|
+
w = document.body.style.overflow, document.body.style.overflow = "hidden", c = document.activeElement, await ce();
|
|
2464
|
+
const g = document.getElementById(n.value);
|
|
2465
|
+
if (g) {
|
|
2466
|
+
B.value = g;
|
|
2467
|
+
const m = g.querySelector(".modal-conts");
|
|
2468
|
+
m && (m.setAttribute("tabindex", "-1"), m.focus()), document.addEventListener("keydown", x), document.addEventListener("keydown", f);
|
|
2497
2469
|
}
|
|
2498
2470
|
} else o();
|
|
2499
2471
|
}, { immediate: !0 }), fe(() => {
|
|
@@ -2517,15 +2489,15 @@ var _t = A({
|
|
|
2517
2489
|
t("button", {
|
|
2518
2490
|
type: "button",
|
|
2519
2491
|
class: "krds-btn medium icon btn-close close-modal",
|
|
2520
|
-
onClick:
|
|
2492
|
+
onClick: v
|
|
2521
2493
|
}, [t("span", { class: "sr-only" }, "닫기"), t("i", { class: "svg-icon ico-popup-close" })])
|
|
2522
2494
|
].filter(Boolean))]), t("div", {
|
|
2523
2495
|
class: e.backdrop ? "modal-back in" : "modal-back",
|
|
2524
|
-
onClick: e.persistent ? void 0 :
|
|
2496
|
+
onClick: e.persistent ? void 0 : v
|
|
2525
2497
|
})]));
|
|
2526
2498
|
};
|
|
2527
2499
|
}
|
|
2528
|
-
}), va = fa, pa =
|
|
2500
|
+
}), va = fa, pa = M({
|
|
2529
2501
|
name: "KrdsAccordionGroup",
|
|
2530
2502
|
props: {
|
|
2531
2503
|
typeLine: {
|
|
@@ -2544,7 +2516,7 @@ var _t = A({
|
|
|
2544
2516
|
});
|
|
2545
2517
|
return () => t("div", { class: r.value }, a.default?.());
|
|
2546
2518
|
}
|
|
2547
|
-
}), ga = pa, ha =
|
|
2519
|
+
}), ga = pa, ha = M({
|
|
2548
2520
|
name: "KrdsAccordionItem",
|
|
2549
2521
|
props: {
|
|
2550
2522
|
id: {
|
|
@@ -2564,7 +2536,7 @@ var _t = A({
|
|
|
2564
2536
|
default: void 0
|
|
2565
2537
|
}
|
|
2566
2538
|
},
|
|
2567
|
-
emits:
|
|
2539
|
+
emits: { toggle: (e) => !0 },
|
|
2568
2540
|
setup(e, { emit: a, slots: r }) {
|
|
2569
2541
|
const l = b(() => e.openItem === e.id), n = () => {
|
|
2570
2542
|
a("toggle", e.id);
|
|
@@ -2586,7 +2558,7 @@ var _t = A({
|
|
|
2586
2558
|
"aria-labelledby": `accordion-header-${e.id}`
|
|
2587
2559
|
}, [t("div", { class: "accordion-body" }, r.content?.() ?? e.content)])]);
|
|
2588
2560
|
}
|
|
2589
|
-
}), ya = ha, ma =
|
|
2561
|
+
}), ya = ha, ma = M({
|
|
2590
2562
|
name: "KrdsTts",
|
|
2591
2563
|
props: {
|
|
2592
2564
|
text: {
|
|
@@ -2614,14 +2586,14 @@ var _t = A({
|
|
|
2614
2586
|
default: void 0
|
|
2615
2587
|
}
|
|
2616
2588
|
},
|
|
2617
|
-
emits:
|
|
2618
|
-
|
|
2619
|
-
|
|
2620
|
-
|
|
2621
|
-
|
|
2622
|
-
|
|
2589
|
+
emits: {
|
|
2590
|
+
play: (e) => !0,
|
|
2591
|
+
pause: () => !0,
|
|
2592
|
+
end: () => !0,
|
|
2593
|
+
error: (e) => !0
|
|
2594
|
+
},
|
|
2623
2595
|
setup(e, { emit: a }) {
|
|
2624
|
-
const r =
|
|
2596
|
+
const r = D(!1);
|
|
2625
2597
|
let l = null;
|
|
2626
2598
|
const n = () => {
|
|
2627
2599
|
typeof window < "u" && window.speechSynthesis && window.speechSynthesis.cancel(), r.value = !1, l = null;
|
|
@@ -2639,30 +2611,30 @@ var _t = A({
|
|
|
2639
2611
|
r.value = !0;
|
|
2640
2612
|
}, l.onend = () => {
|
|
2641
2613
|
r.value = !1, l = null, a("end");
|
|
2642
|
-
}, l.onerror = (
|
|
2643
|
-
r.value = !1, l = null,
|
|
2614
|
+
}, l.onerror = (v) => {
|
|
2615
|
+
r.value = !1, l = null, v.error !== "canceled" && a("error", new Error(v.error));
|
|
2644
2616
|
}, window.speechSynthesis.speak(l), a("play", e.text);
|
|
2645
2617
|
}
|
|
2646
2618
|
}, u = b(() => {
|
|
2647
|
-
const
|
|
2648
|
-
return e.size &&
|
|
2619
|
+
const v = ["krds-tts"];
|
|
2620
|
+
return e.size && v.push(e.size), r.value ? v.push("pause") : e.icon === "play" && v.push("play"), e.class && v.push(e.class), v;
|
|
2649
2621
|
}), h = b(() => r.value ? "ico-stop" : e.icon === "play" ? "ico-play" : "ico-volume");
|
|
2650
2622
|
return fe(() => {
|
|
2651
2623
|
n();
|
|
2652
2624
|
}), () => {
|
|
2653
|
-
const
|
|
2625
|
+
const v = [t("span", {
|
|
2654
2626
|
class: "krds-tts-icon",
|
|
2655
2627
|
"aria-hidden": "true"
|
|
2656
2628
|
}, [t("i", { class: `svg-icon ${h.value}` })])];
|
|
2657
|
-
return e.label &&
|
|
2629
|
+
return e.label && v.push(t("span", { class: "krds-tts-text" }, e.label)), t("button", {
|
|
2658
2630
|
type: "button",
|
|
2659
2631
|
class: u.value,
|
|
2660
2632
|
disabled: e.disabled || void 0,
|
|
2661
2633
|
onClick: s
|
|
2662
|
-
},
|
|
2634
|
+
}, v);
|
|
2663
2635
|
};
|
|
2664
2636
|
}
|
|
2665
|
-
}), ba = ma, ka =
|
|
2637
|
+
}), ba = ma, ka = M({
|
|
2666
2638
|
name: "KrdsTable",
|
|
2667
2639
|
props: {
|
|
2668
2640
|
caption: {
|
|
@@ -2682,68 +2654,68 @@ var _t = A({
|
|
|
2682
2654
|
default: void 0
|
|
2683
2655
|
}
|
|
2684
2656
|
},
|
|
2685
|
-
emits:
|
|
2657
|
+
emits: { "row-click": (e, a) => !0 },
|
|
2686
2658
|
slots: Object,
|
|
2687
2659
|
setup(e, { emit: a, slots: r }) {
|
|
2688
2660
|
const l = b(() => {
|
|
2689
|
-
const
|
|
2690
|
-
return e.class &&
|
|
2691
|
-
}), n = b(() => ["krds-table-wrap"]), s = (
|
|
2661
|
+
const f = ["tbl"];
|
|
2662
|
+
return e.class && f.push(e.class), f;
|
|
2663
|
+
}), n = b(() => ["krds-table-wrap"]), s = (f) => f.headerStyle || void 0, u = (f) => {
|
|
2692
2664
|
const o = [];
|
|
2693
|
-
return
|
|
2694
|
-
}, h = (
|
|
2665
|
+
return f.align && o.push(`text-${f.align}`), f.headerClasses && o.push(f.headerClasses), o.length > 0 ? o : void 0;
|
|
2666
|
+
}, h = (f, o) => {
|
|
2695
2667
|
if (o.style)
|
|
2696
|
-
return typeof o.style == "function" ? o.style(
|
|
2697
|
-
},
|
|
2668
|
+
return typeof o.style == "function" ? o.style(f) : o.style;
|
|
2669
|
+
}, v = (f, o) => {
|
|
2698
2670
|
const i = [];
|
|
2699
2671
|
if (o.align && i.push(`text-${o.align}`), o.classes) {
|
|
2700
|
-
const
|
|
2701
|
-
i.push(
|
|
2672
|
+
const g = typeof o.classes == "function" ? o.classes(f) : o.classes;
|
|
2673
|
+
i.push(g);
|
|
2702
2674
|
}
|
|
2703
2675
|
return i.length > 0 ? i : void 0;
|
|
2704
|
-
}, w = () => !e.columns.length || !e.columns.some((
|
|
2705
|
-
if (!
|
|
2706
|
-
const o =
|
|
2676
|
+
}, w = () => !e.columns.length || !e.columns.some((f) => f.headerStyle && f.headerStyle.includes("width")) ? null : t("colgroup", e.columns.map((f) => {
|
|
2677
|
+
if (!f.headerStyle) return t("col");
|
|
2678
|
+
const o = f.headerStyle.match(/width\s*:\s*([^;]+)/i);
|
|
2707
2679
|
return t("col", { style: o ? { width: o[1].trim() } : void 0 });
|
|
2708
|
-
})),
|
|
2680
|
+
})), c = () => {
|
|
2709
2681
|
if (!e.columns.length) return null;
|
|
2710
|
-
const
|
|
2711
|
-
const i = s(o),
|
|
2682
|
+
const f = e.columns.map((o) => {
|
|
2683
|
+
const i = s(o), g = u(o);
|
|
2712
2684
|
return t("th", {
|
|
2713
2685
|
scope: "col",
|
|
2714
|
-
class:
|
|
2686
|
+
class: g,
|
|
2715
2687
|
style: i
|
|
2716
2688
|
}, o.label);
|
|
2717
2689
|
});
|
|
2718
|
-
return t("thead", [t("tr",
|
|
2719
|
-
},
|
|
2690
|
+
return t("thead", [t("tr", f)]);
|
|
2691
|
+
}, B = (f, o) => typeof o.field == "function" ? o.field(f) : f[o.field], S = () => {
|
|
2720
2692
|
if (!e.rows.length) return t("tbody", [t("tr", [t("td", {
|
|
2721
2693
|
colspan: e.columns.length || 1,
|
|
2722
2694
|
class: "text-center"
|
|
2723
2695
|
}, r["no-data"] ? r["no-data"]() : "데이터가 없습니다.")])]);
|
|
2724
|
-
const
|
|
2725
|
-
const
|
|
2726
|
-
const C =
|
|
2696
|
+
const f = e.rows.map((o, i) => {
|
|
2697
|
+
const g = e.columns.map((m, $) => {
|
|
2698
|
+
const C = B(o, m), E = typeof C == "function" ? C() : C, T = h(o, m), _ = v(o, m);
|
|
2727
2699
|
return t($ === 0 ? "th" : "td", {
|
|
2728
2700
|
scope: $ === 0 ? "row" : void 0,
|
|
2729
2701
|
class: _,
|
|
2730
|
-
style:
|
|
2702
|
+
style: T
|
|
2731
2703
|
}, E);
|
|
2732
2704
|
});
|
|
2733
|
-
return t("tr", { onClick: () => x(o, i) },
|
|
2705
|
+
return t("tr", { onClick: () => x(o, i) }, g);
|
|
2734
2706
|
});
|
|
2735
|
-
return t("tbody",
|
|
2736
|
-
}, x = (
|
|
2737
|
-
a("row-click",
|
|
2707
|
+
return t("tbody", f);
|
|
2708
|
+
}, x = (f, o) => {
|
|
2709
|
+
a("row-click", f, o);
|
|
2738
2710
|
};
|
|
2739
2711
|
return () => t("div", { class: n.value }, [t("table", { class: l.value }, [
|
|
2740
2712
|
e.caption && t("caption", e.caption),
|
|
2741
2713
|
w(),
|
|
2742
|
-
|
|
2714
|
+
c(),
|
|
2743
2715
|
S()
|
|
2744
2716
|
])]);
|
|
2745
2717
|
}
|
|
2746
|
-
}), Sa = ka, wa =
|
|
2718
|
+
}), Sa = ka, wa = M({
|
|
2747
2719
|
name: "KrdsHeader",
|
|
2748
2720
|
props: {
|
|
2749
2721
|
id: {
|
|
@@ -2775,7 +2747,7 @@ var _t = A({
|
|
|
2775
2747
|
}, n);
|
|
2776
2748
|
};
|
|
2777
2749
|
}
|
|
2778
|
-
}), Ka = wa, Ca =
|
|
2750
|
+
}), Ka = wa, Ca = M({
|
|
2779
2751
|
name: "KrdsFooter",
|
|
2780
2752
|
props: {
|
|
2781
2753
|
id: {
|
|
@@ -2793,16 +2765,16 @@ var _t = A({
|
|
|
2793
2765
|
return e.class && h.push(e.class), h;
|
|
2794
2766
|
}), l = () => a.top ? t("div", { class: "foot-quick" }, [t("div", { class: "inner" }, a.top())]) : null, n = () => a.logo ? t("div", { class: "f-logo" }, a.logo()) : null, s = () => a.content ? t("div", { class: "f-cnt" }, a.content()) : null, u = () => a.bottom ? t("div", { class: "f-btm" }, a.bottom()) : null;
|
|
2795
2767
|
return () => {
|
|
2796
|
-
const h = l(),
|
|
2797
|
-
|
|
2768
|
+
const h = l(), v = n(), w = s(), c = u(), B = [];
|
|
2769
|
+
v && B.push(v), w && B.push(w), c && B.push(c);
|
|
2798
2770
|
const S = [];
|
|
2799
|
-
return h && S.push(h),
|
|
2771
|
+
return h && S.push(h), B.length > 0 && S.push(t("div", { class: "inner" }, B)), t("footer", {
|
|
2800
2772
|
id: e.id,
|
|
2801
2773
|
class: r.value
|
|
2802
2774
|
}, S);
|
|
2803
2775
|
};
|
|
2804
2776
|
}
|
|
2805
|
-
}), xa = Ca, $a =
|
|
2777
|
+
}), xa = Ca, $a = M({
|
|
2806
2778
|
name: "KrdsDisclosure",
|
|
2807
2779
|
props: {
|
|
2808
2780
|
title: {
|
|
@@ -2814,9 +2786,9 @@ var _t = A({
|
|
|
2814
2786
|
default: !1
|
|
2815
2787
|
}
|
|
2816
2788
|
},
|
|
2817
|
-
emits:
|
|
2789
|
+
emits: { "update:modelValue": (e) => !0 },
|
|
2818
2790
|
setup(e, { emit: a, slots: r }) {
|
|
2819
|
-
const l = `disclosure-${
|
|
2791
|
+
const l = `disclosure-${oe()}`, n = b(() => e.modelValue), s = () => {
|
|
2820
2792
|
a("update:modelValue", !e.modelValue);
|
|
2821
2793
|
};
|
|
2822
2794
|
return () => t("div", { class: [
|
|
@@ -2835,7 +2807,7 @@ var _t = A({
|
|
|
2835
2807
|
inert: !n.value
|
|
2836
2808
|
}, [t("div", { class: "expand-in" }, r.default?.())])]);
|
|
2837
2809
|
}
|
|
2838
|
-
}), La = $a, Da =
|
|
2810
|
+
}), La = $a, Da = M({
|
|
2839
2811
|
name: "KrdsIdentifier",
|
|
2840
2812
|
props: {
|
|
2841
2813
|
class: {
|
|
@@ -2847,7 +2819,7 @@ var _t = A({
|
|
|
2847
2819
|
default: "KRDS - Korea Design System"
|
|
2848
2820
|
}
|
|
2849
2821
|
},
|
|
2850
|
-
emits:
|
|
2822
|
+
emits: { click: (e) => !0 },
|
|
2851
2823
|
setup(e, { emit: a, slots: r }) {
|
|
2852
2824
|
const l = b(() => {
|
|
2853
2825
|
const s = ["krds-identifier"];
|
|
@@ -2860,7 +2832,7 @@ var _t = A({
|
|
|
2860
2832
|
onClick: n
|
|
2861
2833
|
}, [t("span", { class: "logo" }, [t("span", { class: "sr-only" }, e.logoLabel)]), t("span", { class: "ban-txt" }, r.default?.())]);
|
|
2862
2834
|
}
|
|
2863
|
-
}), Ba = Da,
|
|
2835
|
+
}), Ba = Da, Ta = 50, Ea = M({
|
|
2864
2836
|
name: "KrdsLayout",
|
|
2865
2837
|
props: {
|
|
2866
2838
|
id: {
|
|
@@ -2882,45 +2854,45 @@ var _t = A({
|
|
|
2882
2854
|
"scroll-height": (e) => !0
|
|
2883
2855
|
},
|
|
2884
2856
|
setup(e, { slots: a, emit: r }) {
|
|
2885
|
-
const l =
|
|
2886
|
-
const
|
|
2887
|
-
l.value = window.scrollY, n.value = document.body.scrollHeight,
|
|
2888
|
-
},
|
|
2857
|
+
const l = D(0), n = D(0), s = D(0), u = D(null), h = D(null), v = D(null), w = () => {
|
|
2858
|
+
const f = n.value;
|
|
2859
|
+
l.value = window.scrollY, n.value = document.body.scrollHeight, f !== n.value && f > 0 && r("scroll-height", n.value);
|
|
2860
|
+
}, c = () => {
|
|
2889
2861
|
if (!h.value || !e.enableScrollDetection) return;
|
|
2890
|
-
const
|
|
2891
|
-
if (!
|
|
2892
|
-
const o =
|
|
2893
|
-
i > o +
|
|
2894
|
-
},
|
|
2895
|
-
w(),
|
|
2862
|
+
const f = document.querySelector("#container");
|
|
2863
|
+
if (!f) return;
|
|
2864
|
+
const o = f.offsetTop, i = window.scrollY, g = i > s.value, m = i < s.value;
|
|
2865
|
+
i > o + Ta ? g ? (h.value.classList.add("scroll-down"), h.value.classList.remove("scroll-up"), u.value = "down") : m && (h.value.classList.add("scroll-up"), h.value.classList.remove("scroll-down"), u.value = "up") : (h.value.classList.remove("scroll-down", "scroll-up"), u.value = null), s.value = i;
|
|
2866
|
+
}, B = () => {
|
|
2867
|
+
w(), c(), r("scroll", {
|
|
2896
2868
|
scrollY: l.value,
|
|
2897
2869
|
scrollHeight: n.value,
|
|
2898
2870
|
direction: u.value,
|
|
2899
2871
|
timestamp: Date.now()
|
|
2900
2872
|
});
|
|
2901
|
-
}, S = (
|
|
2902
|
-
for (const o of
|
|
2903
|
-
const { width: i, height:
|
|
2873
|
+
}, S = (f) => {
|
|
2874
|
+
for (const o of f) {
|
|
2875
|
+
const { width: i, height: g } = o.contentRect;
|
|
2904
2876
|
r("resize", {
|
|
2905
2877
|
width: i,
|
|
2906
|
-
height:
|
|
2878
|
+
height: g
|
|
2907
2879
|
});
|
|
2908
2880
|
}
|
|
2909
2881
|
}, x = b(() => {
|
|
2910
|
-
const
|
|
2911
|
-
return e.class &&
|
|
2882
|
+
const f = ["g-wrap"];
|
|
2883
|
+
return e.class && f.push(e.class), f;
|
|
2912
2884
|
});
|
|
2913
2885
|
return ie(() => {
|
|
2914
|
-
e.enableScrollDetection && (w(), window.addEventListener("scroll",
|
|
2886
|
+
e.enableScrollDetection && (w(), window.addEventListener("scroll", B, { passive: !0 })), h.value && typeof ResizeObserver < "u" && (v.value = new ResizeObserver(S), v.value.observe(h.value));
|
|
2915
2887
|
}), re(() => {
|
|
2916
|
-
e.enableScrollDetection && window.removeEventListener("scroll",
|
|
2888
|
+
e.enableScrollDetection && window.removeEventListener("scroll", B), v.value && (v.value.disconnect(), v.value = null);
|
|
2917
2889
|
}), () => t("div", {
|
|
2918
2890
|
id: e.id,
|
|
2919
2891
|
class: x.value,
|
|
2920
2892
|
ref: h
|
|
2921
2893
|
}, a.default?.());
|
|
2922
2894
|
}
|
|
2923
|
-
}), _a =
|
|
2895
|
+
}), _a = Ea, Aa = M({
|
|
2924
2896
|
name: "KrdsSideNavigation",
|
|
2925
2897
|
props: {
|
|
2926
2898
|
title: {
|
|
@@ -2932,62 +2904,62 @@ var _t = A({
|
|
|
2932
2904
|
default: () => []
|
|
2933
2905
|
}
|
|
2934
2906
|
},
|
|
2935
|
-
emits:
|
|
2907
|
+
emits: { "update:modelValue": (e) => !0 },
|
|
2936
2908
|
setup(e, { emit: a }) {
|
|
2937
|
-
const r = b(() => e.modelValue || []), l =
|
|
2938
|
-
const
|
|
2939
|
-
$ ? l.value.set(
|
|
2940
|
-
},
|
|
2941
|
-
const
|
|
2942
|
-
$ ? n.value.set(
|
|
2909
|
+
const r = b(() => e.modelValue || []), l = D(/* @__PURE__ */ new Map()), n = D(/* @__PURE__ */ new Map()), s = D(/* @__PURE__ */ new Map()), u = D(null), h = ($, C, E) => {
|
|
2910
|
+
const T = `${C}-${E}`;
|
|
2911
|
+
$ ? l.value.set(T, $) : l.value.delete(T);
|
|
2912
|
+
}, v = ($, C, E) => {
|
|
2913
|
+
const T = `${C}-${E}`;
|
|
2914
|
+
$ ? n.value.set(T, $) : n.value.delete(T);
|
|
2943
2915
|
}, w = ($, C, E) => {
|
|
2944
|
-
const
|
|
2945
|
-
$ ? s.value.set(
|
|
2946
|
-
},
|
|
2916
|
+
const T = `${C}-${E}`;
|
|
2917
|
+
$ ? s.value.set(T, $) : s.value.delete(T);
|
|
2918
|
+
}, c = ($) => {
|
|
2947
2919
|
a("update:modelValue", r.value.map((C, E) => {
|
|
2948
2920
|
if (E === $ && C.subItems) {
|
|
2949
|
-
const
|
|
2921
|
+
const T = C.expanded, _ = {
|
|
2950
2922
|
...C,
|
|
2951
2923
|
expanded: !C.expanded
|
|
2952
2924
|
};
|
|
2953
|
-
return
|
|
2954
|
-
...
|
|
2925
|
+
return T && !_.expanded && (_.subItems = C.subItems.map((p) => ({
|
|
2926
|
+
...p,
|
|
2955
2927
|
expanded: !1
|
|
2956
2928
|
})), u.value = null), _;
|
|
2957
2929
|
}
|
|
2958
2930
|
return C;
|
|
2959
2931
|
}));
|
|
2960
|
-
},
|
|
2961
|
-
a("update:modelValue", r.value.map((E,
|
|
2932
|
+
}, B = ($, C) => {
|
|
2933
|
+
a("update:modelValue", r.value.map((E, T) => T === $ && E.subItems ? {
|
|
2962
2934
|
...E,
|
|
2963
|
-
subItems: E.subItems.map((_,
|
|
2964
|
-
if (
|
|
2965
|
-
const
|
|
2935
|
+
subItems: E.subItems.map((_, p) => {
|
|
2936
|
+
if (p === C && _.subItems) {
|
|
2937
|
+
const A = {
|
|
2966
2938
|
..._,
|
|
2967
2939
|
expanded: !_.expanded
|
|
2968
2940
|
};
|
|
2969
|
-
if (
|
|
2941
|
+
if (A.expanded) {
|
|
2970
2942
|
const I = `${$}-${C}`;
|
|
2971
2943
|
u.value = l.value.get(I) || null;
|
|
2972
|
-
const
|
|
2973
|
-
|
|
2944
|
+
const O = n.value.get(I), H = s.value.get(I);
|
|
2945
|
+
O && H && O.addEventListener("transitionend", () => {
|
|
2974
2946
|
H.focus();
|
|
2975
2947
|
}, { once: !0 });
|
|
2976
2948
|
}
|
|
2977
|
-
return
|
|
2949
|
+
return A;
|
|
2978
2950
|
}
|
|
2979
2951
|
return _;
|
|
2980
2952
|
})
|
|
2981
2953
|
} : E));
|
|
2982
2954
|
}, S = ($, C) => {
|
|
2983
|
-
a("update:modelValue", r.value.map((E,
|
|
2955
|
+
a("update:modelValue", r.value.map((E, T) => T === $ && E.subItems ? {
|
|
2984
2956
|
...E,
|
|
2985
|
-
subItems: E.subItems.map((_,
|
|
2986
|
-
if (
|
|
2957
|
+
subItems: E.subItems.map((_, p) => {
|
|
2958
|
+
if (p === C && _.subItems && _.expanded) {
|
|
2987
2959
|
if (u.value) {
|
|
2988
|
-
const
|
|
2960
|
+
const A = u.value;
|
|
2989
2961
|
requestAnimationFrame(() => {
|
|
2990
|
-
|
|
2962
|
+
A.focus();
|
|
2991
2963
|
}), u.value = null;
|
|
2992
2964
|
}
|
|
2993
2965
|
return {
|
|
@@ -2999,53 +2971,53 @@ var _t = A({
|
|
|
2999
2971
|
})
|
|
3000
2972
|
} : E));
|
|
3001
2973
|
}, x = ($, C, E) => {
|
|
3002
|
-
const
|
|
2974
|
+
const T = `${C}-${E}`, _ = n.value.get(T);
|
|
3003
2975
|
_ && !_.contains($.relatedTarget) && S(C, E);
|
|
3004
|
-
},
|
|
2976
|
+
}, f = ($, C) => {
|
|
3005
2977
|
S($, C);
|
|
3006
2978
|
}, o = ($, C) => {
|
|
3007
2979
|
$.onClick && $.onClick(C);
|
|
3008
|
-
}, i = ($, C, E) => $.map((
|
|
2980
|
+
}, i = ($, C, E) => $.map((T, _) => t("li", {
|
|
3009
2981
|
key: `popup-item-${C}-${E}-${_}`,
|
|
3010
2982
|
role: "none"
|
|
3011
2983
|
}, t("a", {
|
|
3012
|
-
href:
|
|
2984
|
+
href: T.href || "#",
|
|
3013
2985
|
class: "lnb-btn",
|
|
3014
2986
|
role: "menuitem",
|
|
3015
|
-
onClick: (
|
|
3016
|
-
},
|
|
3017
|
-
const _ = `lnb-subitem-${C}-${
|
|
2987
|
+
onClick: (p) => o(T, p)
|
|
2988
|
+
}, T.text))), g = ($, C) => $.map((E, T) => {
|
|
2989
|
+
const _ = `lnb-subitem-${C}-${T}`;
|
|
3018
2990
|
return t("li", {
|
|
3019
2991
|
key: _,
|
|
3020
2992
|
class: ["lnb-subitem", { active: E.expanded }],
|
|
3021
2993
|
role: "none"
|
|
3022
2994
|
}, [E.subItems ? [t("button", {
|
|
3023
|
-
ref: (
|
|
2995
|
+
ref: (p) => h(p, C, T),
|
|
3024
2996
|
type: "button",
|
|
3025
2997
|
class: "lnb-btn lnb-toggle-popup",
|
|
3026
2998
|
role: "menuitem",
|
|
3027
|
-
"aria-controls": `lnbmenu-${C}-${
|
|
2999
|
+
"aria-controls": `lnbmenu-${C}-${T}`,
|
|
3028
3000
|
"aria-expanded": E.expanded ? "true" : "false",
|
|
3029
3001
|
"aria-haspopup": "true",
|
|
3030
|
-
onClick: () =>
|
|
3002
|
+
onClick: () => B(C, T)
|
|
3031
3003
|
}, E.text), t("div", {
|
|
3032
|
-
ref: (
|
|
3033
|
-
id: `lnbmenu-${C}-${
|
|
3004
|
+
ref: (p) => v(p, C, T),
|
|
3005
|
+
id: `lnbmenu-${C}-${T}`,
|
|
3034
3006
|
class: ["lnb-submenu-lv2", { active: E.expanded }],
|
|
3035
3007
|
role: "menu",
|
|
3036
|
-
onFocusout: (
|
|
3008
|
+
onFocusout: (p) => x(p, C, T)
|
|
3037
3009
|
}, [t("button", {
|
|
3038
|
-
ref: (
|
|
3010
|
+
ref: (p) => w(p, C, T),
|
|
3039
3011
|
type: "button",
|
|
3040
3012
|
class: "lnb-btn-tit",
|
|
3041
|
-
onClick: () =>
|
|
3042
|
-
}, E.popupTitle || E.text), t("ul", {}, i(E.subItems || [], C,
|
|
3013
|
+
onClick: () => f(C, T)
|
|
3014
|
+
}, E.popupTitle || E.text), t("ul", {}, i(E.subItems || [], C, T))])] : t("a", {
|
|
3043
3015
|
href: E.href || "#",
|
|
3044
3016
|
class: ["lnb-btn", "lnb-link"],
|
|
3045
3017
|
role: "menuitem",
|
|
3046
|
-
onClick: (
|
|
3018
|
+
onClick: (p) => o(E, p)
|
|
3047
3019
|
}, E.text)]);
|
|
3048
|
-
}),
|
|
3020
|
+
}), m = () => r.value.map(($, C) => t("li", {
|
|
3049
3021
|
key: `lnb-item-${C}`,
|
|
3050
3022
|
class: ["lnb-item", { active: $.expanded }],
|
|
3051
3023
|
role: "none"
|
|
@@ -3059,17 +3031,17 @@ var _t = A({
|
|
|
3059
3031
|
role: "menuitem",
|
|
3060
3032
|
"aria-controls": `lnbmenu-${C}`,
|
|
3061
3033
|
"aria-expanded": $.expanded ? "true" : "false",
|
|
3062
|
-
onClick: () =>
|
|
3034
|
+
onClick: () => c(C)
|
|
3063
3035
|
}, $.text), $.subItems ? t("div", { class: "lnb-submenu" }, [t("ul", {
|
|
3064
3036
|
id: `lnbmenu-${C}`,
|
|
3065
3037
|
role: "menu"
|
|
3066
|
-
},
|
|
3038
|
+
}, g($.subItems, C))]) : null]));
|
|
3067
3039
|
return () => t("nav", { class: "krds-side-navigation" }, [t("h2", { class: "lnb-tit" }, e.title), t("ul", {
|
|
3068
3040
|
class: "lnb-list",
|
|
3069
3041
|
role: "menubar"
|
|
3070
|
-
},
|
|
3042
|
+
}, m())]);
|
|
3071
3043
|
}
|
|
3072
|
-
}),
|
|
3044
|
+
}), Ma = Aa, Va = M({
|
|
3073
3045
|
name: "KrdsStructuredList",
|
|
3074
3046
|
props: { full: {
|
|
3075
3047
|
type: Boolean,
|
|
@@ -3087,7 +3059,7 @@ var _t = A({
|
|
|
3087
3059
|
return t("ul", { class: ["krds-structured-list", e.full ? "type-full" : ""] }, [u]);
|
|
3088
3060
|
};
|
|
3089
3061
|
}
|
|
3090
|
-
}), Pa = Va, za =
|
|
3062
|
+
}), Pa = Va, za = M({
|
|
3091
3063
|
name: "KrdsTextList",
|
|
3092
3064
|
props: {
|
|
3093
3065
|
type: {
|
|
@@ -3102,7 +3074,7 @@ var _t = A({
|
|
|
3102
3074
|
setup(e, { slots: a }) {
|
|
3103
3075
|
return () => t(e.type, { class: ["krds-info-list", e.variant] }, a.default?.());
|
|
3104
3076
|
}
|
|
3105
|
-
}), Fa = za, Ra =
|
|
3077
|
+
}), Fa = za, Ra = M({
|
|
3106
3078
|
name: "KrdsCriticalAlerts",
|
|
3107
3079
|
props: {
|
|
3108
3080
|
type: {
|
|
@@ -3122,7 +3094,7 @@ var _t = A({
|
|
|
3122
3094
|
default: "자세히 보기"
|
|
3123
3095
|
}
|
|
3124
3096
|
},
|
|
3125
|
-
emits:
|
|
3097
|
+
emits: { "link-click": (e) => !0 },
|
|
3126
3098
|
setup(e, { emit: a }) {
|
|
3127
3099
|
const r = (n) => ({
|
|
3128
3100
|
danger: "긴급",
|
|
@@ -3141,7 +3113,7 @@ var _t = A({
|
|
|
3141
3113
|
}, [t("span", { class: "m-hide" }, e.linkText), t("i", { class: "svg-icon ico-angle right" })])
|
|
3142
3114
|
])])]);
|
|
3143
3115
|
}
|
|
3144
|
-
}), Ia = Ra, Ha = "새 창 열림",
|
|
3116
|
+
}), Ia = Ra, Ha = "새 창 열림", Na = 100, we = 400, Oa = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', qa = M({
|
|
3145
3117
|
name: "KrdsMainMenu",
|
|
3146
3118
|
props: {
|
|
3147
3119
|
items: {
|
|
@@ -3173,76 +3145,76 @@ var _t = A({
|
|
|
3173
3145
|
default: "전체메뉴 닫기"
|
|
3174
3146
|
}
|
|
3175
3147
|
},
|
|
3176
|
-
emits:
|
|
3177
|
-
"update:open",
|
|
3178
|
-
"menu-toggle",
|
|
3179
|
-
"item-click"
|
|
3180
|
-
|
|
3148
|
+
emits: {
|
|
3149
|
+
"update:open": (e) => !0,
|
|
3150
|
+
"menu-toggle": (e, a) => !0,
|
|
3151
|
+
"item-click": (e, a) => !0
|
|
3152
|
+
},
|
|
3181
3153
|
slots: Object,
|
|
3182
3154
|
setup(e, { emit: a, slots: r }) {
|
|
3183
|
-
const l =
|
|
3155
|
+
const l = oe(), n = D(null), s = D(null), u = D(null), h = b(() => e.variant === "pc"), v = (d) => `${l}-gnb-panel-${d}`, w = (d, y) => `${l}-gnb-sub-${d}-${y}`, c = (d) => `${l}-gnb-tab-${d}`, B = (d, y) => `${l}-gnb-depth3-${d}-${y}`, S = (d) => !!d?.subItems?.length, x = (d) => !S(d) && !!d?.items?.length, f = (d) => S(d) || x(d), o = (d) => !d.items?.length, i = (d) => d ? {
|
|
3184
3156
|
target: "_blank",
|
|
3185
3157
|
rel: "noopener noreferrer",
|
|
3186
3158
|
title: Ha
|
|
3187
|
-
} : {},
|
|
3188
|
-
d.onClick?.(
|
|
3189
|
-
},
|
|
3190
|
-
|
|
3191
|
-
},
|
|
3192
|
-
const
|
|
3193
|
-
return
|
|
3194
|
-
},
|
|
3195
|
-
const
|
|
3196
|
-
return
|
|
3159
|
+
} : {}, g = (d, y) => {
|
|
3160
|
+
d.onClick?.(y), a("item-click", d, y);
|
|
3161
|
+
}, m = D(-1), $ = D({}), C = D(0), E = /* @__PURE__ */ new Map(), T = /* @__PURE__ */ new Map(), _ = (d, y, K) => {
|
|
3162
|
+
y ? d.set(K, y) : d.delete(K);
|
|
3163
|
+
}, p = (d) => {
|
|
3164
|
+
const y = d?.subItems?.findIndex((K) => !o(K));
|
|
3165
|
+
return y === void 0 ? -1 : y;
|
|
3166
|
+
}, A = (d) => {
|
|
3167
|
+
const y = $.value[d];
|
|
3168
|
+
return y === void 0 ? p(e.items[d]) : y;
|
|
3197
3169
|
}, I = (d) => {
|
|
3198
3170
|
if (typeof document > "u") return;
|
|
3199
3171
|
document.body.classList.toggle("is-gnb-web", d);
|
|
3200
|
-
const
|
|
3201
|
-
document.body.classList.toggle("hasScrollY", d &&
|
|
3202
|
-
},
|
|
3172
|
+
const y = document.body.scrollHeight > window.innerHeight;
|
|
3173
|
+
document.body.classList.toggle("hasScrollY", d && y);
|
|
3174
|
+
}, O = async () => {
|
|
3203
3175
|
await ce();
|
|
3204
|
-
const d = E.get(
|
|
3176
|
+
const d = E.get(m.value)?.querySelector(".gnb-sub-list.active");
|
|
3205
3177
|
C.value = d?.scrollHeight ?? 0;
|
|
3206
3178
|
}, H = (d = !1) => {
|
|
3207
|
-
if (
|
|
3208
|
-
const
|
|
3209
|
-
|
|
3179
|
+
if (m.value === -1) return;
|
|
3180
|
+
const y = m.value;
|
|
3181
|
+
m.value = -1, C.value = 0, I(!1), a("menu-toggle", y, !1), d && T.get(y)?.focus();
|
|
3210
3182
|
}, G = (d) => {
|
|
3211
|
-
if (
|
|
3212
|
-
if (
|
|
3183
|
+
if (f(e.items[d])) {
|
|
3184
|
+
if (m.value === d) {
|
|
3213
3185
|
H();
|
|
3214
3186
|
return;
|
|
3215
3187
|
}
|
|
3216
|
-
|
|
3188
|
+
m.value = d, I(!0), a("menu-toggle", d, !0), O();
|
|
3217
3189
|
}
|
|
3218
|
-
}, j = (d,
|
|
3190
|
+
}, j = (d, y) => {
|
|
3219
3191
|
$.value = {
|
|
3220
3192
|
...$.value,
|
|
3221
|
-
[d]:
|
|
3222
|
-
},
|
|
3193
|
+
[d]: y
|
|
3194
|
+
}, O();
|
|
3223
3195
|
}, X = (d) => {
|
|
3224
|
-
const
|
|
3225
|
-
!
|
|
3196
|
+
const y = n.value;
|
|
3197
|
+
!y || y.contains(d.target) || H();
|
|
3226
3198
|
}, le = (d) => {
|
|
3227
|
-
const
|
|
3228
|
-
!
|
|
3229
|
-
},
|
|
3199
|
+
const y = n.value, K = d.relatedTarget;
|
|
3200
|
+
!y || !K || y.contains(K) || H();
|
|
3201
|
+
}, de = (d) => {
|
|
3230
3202
|
if (d.key === "Escape") {
|
|
3231
3203
|
H(!0);
|
|
3232
3204
|
return;
|
|
3233
3205
|
}
|
|
3234
|
-
const
|
|
3235
|
-
if (!
|
|
3206
|
+
const y = d.target;
|
|
3207
|
+
if (!y?.dataset.trigger) return;
|
|
3236
3208
|
const K = (k) => {
|
|
3237
|
-
const P =
|
|
3209
|
+
const P = y.closest("li");
|
|
3238
3210
|
(k === "next" ? P?.nextElementSibling : P?.previousElementSibling)?.querySelector("[data-trigger]")?.focus();
|
|
3239
3211
|
};
|
|
3240
3212
|
switch (d.key) {
|
|
3241
3213
|
case "Home":
|
|
3242
|
-
d.preventDefault(),
|
|
3214
|
+
d.preventDefault(), T.get(0)?.focus();
|
|
3243
3215
|
break;
|
|
3244
3216
|
case "End":
|
|
3245
|
-
d.preventDefault(),
|
|
3217
|
+
d.preventDefault(), T.get(e.items.length - 1)?.focus();
|
|
3246
3218
|
break;
|
|
3247
3219
|
case "ArrowRight":
|
|
3248
3220
|
case "ArrowDown":
|
|
@@ -3252,74 +3224,74 @@ var _t = A({
|
|
|
3252
3224
|
case "ArrowUp":
|
|
3253
3225
|
d.preventDefault(), K("prev");
|
|
3254
3226
|
}
|
|
3255
|
-
}, ae =
|
|
3256
|
-
|
|
3227
|
+
}, ae = D(0), Q = D({}), ne = D(null), L = D(null), R = D(e.open), Y = D(e.open), V = /* @__PURE__ */ new Map(), F = /* @__PURE__ */ new Map(), z = /* @__PURE__ */ new Map(), N = /* @__PURE__ */ new Map(), U = (d, y, K) => {
|
|
3228
|
+
y ? d.set(K, y) : d.delete(K);
|
|
3257
3229
|
};
|
|
3258
3230
|
let J, ee;
|
|
3259
|
-
const
|
|
3231
|
+
const ue = (d) => {
|
|
3260
3232
|
typeof document > "u" || document.body.classList.toggle("is-gnb-mobile", d);
|
|
3261
|
-
},
|
|
3233
|
+
}, Ee = () => {
|
|
3262
3234
|
ee && clearTimeout(ee), R.value = !0, J = setTimeout(() => {
|
|
3263
|
-
Y.value = !0,
|
|
3264
|
-
},
|
|
3235
|
+
Y.value = !0, ue(!0), s.value?.focus();
|
|
3236
|
+
}, Na);
|
|
3265
3237
|
}, _e = () => {
|
|
3266
3238
|
J && clearTimeout(J), Y.value = !1, ee = setTimeout(() => {
|
|
3267
|
-
R.value = !1,
|
|
3239
|
+
R.value = !1, ue(!1);
|
|
3268
3240
|
}, we);
|
|
3269
3241
|
};
|
|
3270
3242
|
se(() => e.open, (d) => {
|
|
3271
|
-
d ?
|
|
3243
|
+
d ? Ee() : _e();
|
|
3272
3244
|
});
|
|
3273
|
-
const
|
|
3274
|
-
d.preventDefault(), ae.value =
|
|
3275
|
-
const K = u.value, k = V.get(
|
|
3245
|
+
const Ae = (d, y) => {
|
|
3246
|
+
d.preventDefault(), ae.value = y;
|
|
3247
|
+
const K = u.value, k = V.get(y);
|
|
3276
3248
|
K && k && K.scrollTo({
|
|
3277
3249
|
left: 0,
|
|
3278
3250
|
top: k.offsetTop,
|
|
3279
3251
|
behavior: "smooth"
|
|
3280
3252
|
});
|
|
3281
|
-
},
|
|
3253
|
+
}, Me = () => {
|
|
3282
3254
|
const d = u.value;
|
|
3283
3255
|
if (!d) return;
|
|
3284
|
-
const { scrollTop:
|
|
3256
|
+
const { scrollTop: y, scrollHeight: K, clientHeight: k } = d;
|
|
3285
3257
|
let P = ae.value;
|
|
3286
3258
|
V.forEach((q, W) => {
|
|
3287
|
-
(
|
|
3259
|
+
(y >= q.offsetTop || y + k >= K) && (P = W);
|
|
3288
3260
|
}), ae.value = P;
|
|
3289
|
-
}, Ve = (d,
|
|
3261
|
+
}, Ve = (d, y) => {
|
|
3290
3262
|
d.preventDefault(), Q.value = {
|
|
3291
3263
|
...Q.value,
|
|
3292
|
-
[
|
|
3264
|
+
[y]: !Q.value[y]
|
|
3293
3265
|
};
|
|
3294
|
-
}, Pe = async (d,
|
|
3295
|
-
d.preventDefault(), ne.value =
|
|
3266
|
+
}, Pe = async (d, y) => {
|
|
3267
|
+
d.preventDefault(), ne.value = y, await ce(), L.value = y, await ce(), N.get(y)?.focus();
|
|
3296
3268
|
}, ye = (d) => {
|
|
3297
3269
|
L.value = null, F.get(d)?.focus(), setTimeout(() => {
|
|
3298
3270
|
L.value || (ne.value = null);
|
|
3299
3271
|
}, we);
|
|
3300
|
-
}, ze = (d,
|
|
3301
|
-
const K = Array.from(d.querySelectorAll(
|
|
3272
|
+
}, ze = (d, y) => {
|
|
3273
|
+
const K = Array.from(d.querySelectorAll(Oa));
|
|
3302
3274
|
if (!K.length) return;
|
|
3303
3275
|
const k = K[0], P = K[K.length - 1], q = document.activeElement;
|
|
3304
|
-
|
|
3276
|
+
y.shiftKey && (q === k || q === d) ? (y.preventDefault(), P.focus()) : !y.shiftKey && q === P && (y.preventDefault(), k.focus());
|
|
3305
3277
|
}, Fe = (d) => {
|
|
3306
3278
|
if (d.key === "Escape") {
|
|
3307
3279
|
L.value ? ye(L.value) : a("update:open", !1);
|
|
3308
3280
|
return;
|
|
3309
3281
|
}
|
|
3310
3282
|
if (d.key !== "Tab") return;
|
|
3311
|
-
const
|
|
3312
|
-
|
|
3283
|
+
const y = L.value ? z.get(L.value) : s.value;
|
|
3284
|
+
y && ze(y, d);
|
|
3313
3285
|
};
|
|
3314
3286
|
ie(() => {
|
|
3315
3287
|
if (h.value) {
|
|
3316
3288
|
document.addEventListener("click", X);
|
|
3317
3289
|
return;
|
|
3318
3290
|
}
|
|
3319
|
-
e.open && (R.value = !0, Y.value = !0,
|
|
3291
|
+
e.open && (R.value = !0, Y.value = !0, ue(!0));
|
|
3320
3292
|
const d = {};
|
|
3321
|
-
e.items.forEach((
|
|
3322
|
-
|
|
3293
|
+
e.items.forEach((y, K) => {
|
|
3294
|
+
y.subItems?.forEach((k, P) => {
|
|
3323
3295
|
k.expanded && (d[`${K}-${P}`] = !0);
|
|
3324
3296
|
});
|
|
3325
3297
|
}), Q.value = d;
|
|
@@ -3327,12 +3299,12 @@ var _t = A({
|
|
|
3327
3299
|
typeof document < "u" && (document.removeEventListener("click", X), document.body.classList.remove("is-gnb-web", "hasScrollY", "is-gnb-mobile")), J && clearTimeout(J), ee && clearTimeout(ee);
|
|
3328
3300
|
});
|
|
3329
3301
|
const Re = (d) => {
|
|
3330
|
-
const
|
|
3302
|
+
const y = d.some((k) => !!k.description), K = d.map((k, P) => {
|
|
3331
3303
|
const q = i(k.external), W = k.external ? t("i", { class: "svg-icon ico-go" }) : null;
|
|
3332
|
-
if (
|
|
3304
|
+
if (y) return t("li", { key: `link-${P}` }, [t("h3", { class: "tit" }, [t("a", {
|
|
3333
3305
|
href: k.href || "#",
|
|
3334
3306
|
...q,
|
|
3335
|
-
onClick: (te) =>
|
|
3307
|
+
onClick: (te) => g(k, te)
|
|
3336
3308
|
}, [k.text, W])]), k.description ? t("p", { class: "txt" }, k.description) : null]);
|
|
3337
3309
|
const Z = k.href ? "a" : "button";
|
|
3338
3310
|
return t("li", { key: `link-${P}` }, [t(Z, {
|
|
@@ -3341,12 +3313,12 @@ var _t = A({
|
|
|
3341
3313
|
...q
|
|
3342
3314
|
} : { type: "button" },
|
|
3343
3315
|
class: { active: k.selected },
|
|
3344
|
-
onClick: (te) =>
|
|
3316
|
+
onClick: (te) => g(k, te)
|
|
3345
3317
|
}, [k.text, W])]);
|
|
3346
3318
|
});
|
|
3347
|
-
return t("ul", { class:
|
|
3319
|
+
return t("ul", { class: y ? "type-description" : void 0 }, K);
|
|
3348
3320
|
}, me = (d) => {
|
|
3349
|
-
const
|
|
3321
|
+
const y = d.titleLink ? [d.title, t("a", {
|
|
3350
3322
|
href: d.titleLink.href,
|
|
3351
3323
|
class: "krds-btn link basic small"
|
|
3352
3324
|
}, [t("span", { class: "underline" }, d.titleLink.text || "바로가기"), t("i", { class: "svg-icon ico-angle right" })])] : [t("span", d.title)];
|
|
@@ -3357,8 +3329,8 @@ var _t = A({
|
|
|
3357
3329
|
between: d.layout === "between",
|
|
3358
3330
|
"single-list": d.single
|
|
3359
3331
|
}]
|
|
3360
|
-
}, [t("div", { class: "gnb-sub-content" }, [t("h2", { class: "sub-title" },
|
|
3361
|
-
}, Ie = (d,
|
|
3332
|
+
}, [t("div", { class: "gnb-sub-content" }, [t("h2", { class: "sub-title" }, y), Re(d.linkItems)]), d.banner]);
|
|
3333
|
+
}, Ie = (d, y) => (d.subItems ?? []).map((K, k) => {
|
|
3362
3334
|
if (o(K)) {
|
|
3363
3335
|
const W = K.href ? "a" : "button";
|
|
3364
3336
|
return t("li", { key: `sub-${k}` }, [t(W, {
|
|
@@ -3375,13 +3347,13 @@ var _t = A({
|
|
|
3375
3347
|
}
|
|
3376
3348
|
],
|
|
3377
3349
|
"data-trigger": "gnb",
|
|
3378
|
-
onClick: (Z) =>
|
|
3350
|
+
onClick: (Z) => g(K, Z)
|
|
3379
3351
|
}, K.text)]);
|
|
3380
3352
|
}
|
|
3381
|
-
const P =
|
|
3353
|
+
const P = A(y) === k, q = K.banner && r.banner ? t("div", { class: "gnb-sub-banner" }, r.banner({
|
|
3382
3354
|
item: d,
|
|
3383
3355
|
subItem: K,
|
|
3384
|
-
index:
|
|
3356
|
+
index: y,
|
|
3385
3357
|
subIndex: k
|
|
3386
3358
|
})) : null;
|
|
3387
3359
|
return t("li", { key: `sub-${k}` }, [t("button", {
|
|
@@ -3391,14 +3363,14 @@ var _t = A({
|
|
|
3391
3363
|
selected: K.selected
|
|
3392
3364
|
}],
|
|
3393
3365
|
"data-trigger": "gnb",
|
|
3394
|
-
"aria-controls": w(
|
|
3366
|
+
"aria-controls": w(y, k),
|
|
3395
3367
|
"aria-expanded": P ? "true" : "false",
|
|
3396
3368
|
"aria-haspopup": "true",
|
|
3397
3369
|
onClick: (W) => {
|
|
3398
|
-
j(
|
|
3370
|
+
j(y, k), g(K, W);
|
|
3399
3371
|
}
|
|
3400
3372
|
}, K.text), me({
|
|
3401
|
-
id: w(
|
|
3373
|
+
id: w(y, k),
|
|
3402
3374
|
title: K.title || K.text,
|
|
3403
3375
|
titleLink: K.titleLink,
|
|
3404
3376
|
linkItems: K.items ?? [],
|
|
@@ -3406,31 +3378,31 @@ var _t = A({
|
|
|
3406
3378
|
active: P,
|
|
3407
3379
|
banner: q
|
|
3408
3380
|
})]);
|
|
3409
|
-
}), He = (d,
|
|
3410
|
-
const K =
|
|
3381
|
+
}), He = (d, y) => {
|
|
3382
|
+
const K = m.value === y, k = S(d), P = k ? [t("ul", {}, Ie(d, y))] : [me({
|
|
3411
3383
|
title: d.title || d.text,
|
|
3412
3384
|
linkItems: d.items ?? [],
|
|
3413
3385
|
layout: d.layout,
|
|
3414
3386
|
single: !0,
|
|
3415
3387
|
banner: d.banner && r.banner ? t("div", { class: "gnb-sub-banner" }, r.banner({
|
|
3416
3388
|
item: d,
|
|
3417
|
-
index:
|
|
3389
|
+
index: y,
|
|
3418
3390
|
subIndex: -1
|
|
3419
3391
|
})) : null
|
|
3420
3392
|
})];
|
|
3421
3393
|
return t("div", {
|
|
3422
|
-
id:
|
|
3394
|
+
id: v(y),
|
|
3423
3395
|
class: ["gnb-toggle-wrap", { "is-open": K }]
|
|
3424
3396
|
}, [t("div", {
|
|
3425
|
-
ref: (q) => _(E, q,
|
|
3397
|
+
ref: (q) => _(E, q, y),
|
|
3426
3398
|
class: "gnb-main-list",
|
|
3427
3399
|
...k ? { "data-has-submenu": "true" } : {},
|
|
3428
3400
|
style: K && C.value ? { minHeight: `${C.value}px` } : void 0
|
|
3429
3401
|
}, P)]);
|
|
3430
|
-
},
|
|
3402
|
+
}, Ne = () => {
|
|
3431
3403
|
const d = e.items.map((K, k) => {
|
|
3432
|
-
const P =
|
|
3433
|
-
ref: (te) => _(
|
|
3404
|
+
const P = f(K), q = m.value === k, W = !P && K.href ? "a" : "button", Z = t(W, {
|
|
3405
|
+
ref: (te) => _(T, te, k),
|
|
3434
3406
|
...W === "a" ? {
|
|
3435
3407
|
href: K.href,
|
|
3436
3408
|
...i(K.external)
|
|
@@ -3442,16 +3414,16 @@ var _t = A({
|
|
|
3442
3414
|
}],
|
|
3443
3415
|
"data-trigger": "gnb",
|
|
3444
3416
|
...P ? {
|
|
3445
|
-
"aria-controls":
|
|
3417
|
+
"aria-controls": v(k),
|
|
3446
3418
|
"aria-expanded": q ? "true" : "false",
|
|
3447
3419
|
"aria-haspopup": "true"
|
|
3448
3420
|
} : {},
|
|
3449
3421
|
onClick: (te) => {
|
|
3450
|
-
P && G(k),
|
|
3422
|
+
P && G(k), g(K, te);
|
|
3451
3423
|
}
|
|
3452
3424
|
}, K.text);
|
|
3453
3425
|
return t("li", { key: `main-${k}` }, [Z, P ? He(K, k) : null]);
|
|
3454
|
-
}),
|
|
3426
|
+
}), y = e.backdrop && m.value !== -1 ? t(Ce, { to: "body" }, [t("div", {
|
|
3455
3427
|
class: "gnb-backdrop active",
|
|
3456
3428
|
"aria-hidden": "true"
|
|
3457
3429
|
})]) : null;
|
|
@@ -3459,20 +3431,20 @@ var _t = A({
|
|
|
3459
3431
|
ref: n,
|
|
3460
3432
|
class: "krds-main-menu",
|
|
3461
3433
|
"aria-label": e.ariaLabel,
|
|
3462
|
-
onKeydown:
|
|
3434
|
+
onKeydown: de,
|
|
3463
3435
|
onFocusout: le
|
|
3464
3436
|
}, [t("div", { class: "inner" }, [t("ul", {
|
|
3465
3437
|
class: "gnb-menu",
|
|
3466
3438
|
"aria-label": e.ariaLabel
|
|
3467
|
-
}, d)]),
|
|
3468
|
-
},
|
|
3469
|
-
const K = () => ye(
|
|
3439
|
+
}, d)]), y]);
|
|
3440
|
+
}, Oe = (d, y) => {
|
|
3441
|
+
const K = () => ye(y);
|
|
3470
3442
|
return t("div", {
|
|
3471
|
-
ref: (k) => U(z, k,
|
|
3472
|
-
class: ["depth4-wrap", { "is-open": L.value ===
|
|
3473
|
-
style: ne.value ===
|
|
3443
|
+
ref: (k) => U(z, k, y),
|
|
3444
|
+
class: ["depth4-wrap", { "is-open": L.value === y }],
|
|
3445
|
+
style: ne.value === y ? { display: "block" } : void 0
|
|
3474
3446
|
}, [t("div", { class: "depth4-head" }, [t("button", {
|
|
3475
|
-
ref: (k) => U(
|
|
3447
|
+
ref: (k) => U(N, k, y),
|
|
3476
3448
|
type: "button",
|
|
3477
3449
|
class: "krds-btn icon trigger-prev",
|
|
3478
3450
|
onClick: K
|
|
@@ -3484,11 +3456,11 @@ var _t = A({
|
|
|
3484
3456
|
href: k.href || "#",
|
|
3485
3457
|
...i(k.external),
|
|
3486
3458
|
class: { selected: k.selected },
|
|
3487
|
-
onClick: (q) =>
|
|
3459
|
+
onClick: (q) => g(k, q)
|
|
3488
3460
|
}, k.text)])))])]);
|
|
3489
|
-
}, qe = (d,
|
|
3461
|
+
}, qe = (d, y, K) => {
|
|
3490
3462
|
const k = (d.items ?? []).map((P, q) => {
|
|
3491
|
-
const W = `${
|
|
3463
|
+
const W = `${y}-${K}-${q}`, Z = !!P.items?.length;
|
|
3492
3464
|
return t("li", { key: `depth3-${q}` }, [t("a", {
|
|
3493
3465
|
ref: (te) => U(F, te, W),
|
|
3494
3466
|
href: P.href || "#",
|
|
@@ -3502,14 +3474,14 @@ var _t = A({
|
|
|
3502
3474
|
"aria-expanded": L.value === W ? "true" : "false"
|
|
3503
3475
|
} : {},
|
|
3504
3476
|
onClick: (te) => {
|
|
3505
|
-
Z && Pe(te, W),
|
|
3477
|
+
Z && Pe(te, W), g(P, te);
|
|
3506
3478
|
}
|
|
3507
|
-
}, P.text), Z ?
|
|
3479
|
+
}, P.text), Z ? Oe(P, W) : null]);
|
|
3508
3480
|
});
|
|
3509
|
-
return t("div", { class: ["depth3-wrap", { "is-open": Q.value[`${
|
|
3510
|
-
}, We = (d,
|
|
3481
|
+
return t("div", { class: ["depth3-wrap", { "is-open": Q.value[`${y}-${K}`] }] }, [t("ul", {}, k)]);
|
|
3482
|
+
}, We = (d, y) => {
|
|
3511
3483
|
const K = (d.subItems ?? []).map((k, P) => {
|
|
3512
|
-
const q = `${
|
|
3484
|
+
const q = `${y}-${P}`, W = !!k.items?.length;
|
|
3513
3485
|
return t("li", { key: `sub-${P}` }, [t("a", {
|
|
3514
3486
|
href: k.href || "#",
|
|
3515
3487
|
...W ? {} : i(k.external),
|
|
@@ -3519,36 +3491,36 @@ var _t = A({
|
|
|
3519
3491
|
selected: k.selected
|
|
3520
3492
|
}],
|
|
3521
3493
|
...W ? {
|
|
3522
|
-
"aria-controls":
|
|
3494
|
+
"aria-controls": B(y, P),
|
|
3523
3495
|
"aria-expanded": Q.value[q] ? "true" : "false"
|
|
3524
3496
|
} : {},
|
|
3525
3497
|
onClick: (Z) => {
|
|
3526
|
-
W && Ve(Z, q),
|
|
3498
|
+
W && Ve(Z, q), g(k, Z);
|
|
3527
3499
|
}
|
|
3528
|
-
}, k.text), W ? qe(k,
|
|
3500
|
+
}, k.text), W ? qe(k, y, P) : null]);
|
|
3529
3501
|
});
|
|
3530
3502
|
return t("div", {
|
|
3531
|
-
ref: (k) => _(V, k,
|
|
3532
|
-
id:
|
|
3503
|
+
ref: (k) => _(V, k, y),
|
|
3504
|
+
id: v(y),
|
|
3533
3505
|
class: "gnb-sub-list",
|
|
3534
3506
|
role: "tabpanel",
|
|
3535
|
-
"aria-labelledby":
|
|
3507
|
+
"aria-labelledby": c(y)
|
|
3536
3508
|
}, [t("h2", { class: "sub-title" }, d.title || d.text), t("ul", {}, K)]);
|
|
3537
3509
|
}, Ye = () => {
|
|
3538
3510
|
const d = e.items.map((K, k) => t("li", {
|
|
3539
3511
|
key: `tab-${k}`,
|
|
3540
3512
|
role: "none"
|
|
3541
3513
|
}, [t("a", {
|
|
3542
|
-
id:
|
|
3543
|
-
href: `#${
|
|
3514
|
+
id: c(k),
|
|
3515
|
+
href: `#${v(k)}`,
|
|
3544
3516
|
class: ["gnb-main-trigger", { active: ae.value === k }],
|
|
3545
3517
|
role: "tab",
|
|
3546
|
-
"aria-controls":
|
|
3518
|
+
"aria-controls": v(k),
|
|
3547
3519
|
"aria-selected": ae.value === k ? "true" : "false",
|
|
3548
3520
|
onClick: (P) => {
|
|
3549
|
-
|
|
3521
|
+
Ae(P, k), g(K, P);
|
|
3550
3522
|
}
|
|
3551
|
-
}, K.text)])),
|
|
3523
|
+
}, K.text)])), y = [t("div", { class: "gnb-menu" }, [t("div", { class: "menu-wrap" }, [t("ul", {
|
|
3552
3524
|
role: "tablist",
|
|
3553
3525
|
"aria-label": e.ariaLabel
|
|
3554
3526
|
}, d)]), t("div", { class: "submenu-wrap" }, e.items.map(We))]), r.bottom ? t("div", { class: "gnb-bottom" }, r.bottom()) : null];
|
|
@@ -3570,8 +3542,8 @@ var _t = A({
|
|
|
3570
3542
|
t("div", {
|
|
3571
3543
|
ref: u,
|
|
3572
3544
|
class: "gnb-body",
|
|
3573
|
-
onScroll:
|
|
3574
|
-
},
|
|
3545
|
+
onScroll: Me
|
|
3546
|
+
}, y),
|
|
3575
3547
|
t("button", {
|
|
3576
3548
|
type: "button",
|
|
3577
3549
|
id: "close-nav",
|
|
@@ -3580,9 +3552,9 @@ var _t = A({
|
|
|
3580
3552
|
}, [t("span", { class: "sr-only" }, e.closeLabel), t("i", { class: "svg-icon ico-popup-close" })])
|
|
3581
3553
|
])]);
|
|
3582
3554
|
};
|
|
3583
|
-
return () => h.value ?
|
|
3555
|
+
return () => h.value ? Ne() : Ye();
|
|
3584
3556
|
}
|
|
3585
|
-
}), Wa = qa, Ya = 400, ja = 2500, Ga = 0, Ua = 16, Be = (e) => e ? e.flatMap((a) => a.type === Ge ? Array.isArray(a.children) ? Be(a.children) : [] : a.type === je ? [] : a.type === Ue && typeof a.children == "string" && a.children.trim() === "" ? [] : [a]) : [], Xa =
|
|
3557
|
+
}), Wa = qa, Ya = 400, ja = 2500, Ga = 0, Ua = 16, Be = (e) => e ? e.flatMap((a) => a.type === Ge ? Array.isArray(a.children) ? Be(a.children) : [] : a.type === je ? [] : a.type === Ue && typeof a.children == "string" && a.children.trim() === "" ? [] : [a]) : [], Xa = M({
|
|
3586
3558
|
name: "KrdsCarousel",
|
|
3587
3559
|
props: {
|
|
3588
3560
|
variant: {
|
|
@@ -3658,25 +3630,25 @@ var _t = A({
|
|
|
3658
3630
|
default: void 0
|
|
3659
3631
|
}
|
|
3660
3632
|
},
|
|
3661
|
-
emits:
|
|
3662
|
-
"update:activeIndex",
|
|
3663
|
-
|
|
3664
|
-
|
|
3665
|
-
|
|
3666
|
-
"more-click"
|
|
3667
|
-
|
|
3633
|
+
emits: {
|
|
3634
|
+
"update:activeIndex": (e) => !0,
|
|
3635
|
+
change: (e) => !0,
|
|
3636
|
+
play: () => !0,
|
|
3637
|
+
stop: () => !0,
|
|
3638
|
+
"more-click": (e) => !0
|
|
3639
|
+
},
|
|
3668
3640
|
setup(e, { emit: a, slots: r }) {
|
|
3669
3641
|
const l = xe()?.uid, n = b(() => `${e.id ?? `krds-carousel-${l}`}-wrapper`);
|
|
3670
3642
|
let s = 0;
|
|
3671
|
-
const u =
|
|
3643
|
+
const u = D(e.activeIndex ?? 0), h = b(() => e.spaceBetween ?? (e.variant === "banner" ? Ua : Ga)), v = b(() => e.pagination ?? (e.variant === "banner" ? "fraction" : "bullets")), w = D(!1), c = D(!1), B = D(!1), S = b(() => c.value || B.value);
|
|
3672
3644
|
let x;
|
|
3673
|
-
const
|
|
3645
|
+
const f = () => {
|
|
3674
3646
|
x !== void 0 && (clearInterval(x), x = void 0);
|
|
3675
3647
|
}, o = (V) => {
|
|
3676
3648
|
if (s <= 0) return;
|
|
3677
3649
|
const F = e.loop ? (V % s + s) % s : Math.min(Math.max(V, 0), s - 1);
|
|
3678
3650
|
F !== u.value && (u.value = F, a("update:activeIndex", F), a("change", F));
|
|
3679
|
-
}, i = () => o(u.value - 1),
|
|
3651
|
+
}, i = () => o(u.value - 1), g = () => o(u.value + 1), m = () => {
|
|
3680
3652
|
w.value || (w.value = !0, a("play"));
|
|
3681
3653
|
}, $ = () => {
|
|
3682
3654
|
w.value && (w.value = !1, a("stop"));
|
|
@@ -3686,37 +3658,37 @@ var _t = A({
|
|
|
3686
3658
|
S,
|
|
3687
3659
|
() => e.autoplayDelay
|
|
3688
3660
|
], () => {
|
|
3689
|
-
|
|
3661
|
+
f(), !(!w.value || S.value) && (x = setInterval(() => {
|
|
3690
3662
|
if (!e.loop && s > 0 && u.value >= s - 1) {
|
|
3691
3663
|
$();
|
|
3692
3664
|
return;
|
|
3693
3665
|
}
|
|
3694
|
-
|
|
3666
|
+
g();
|
|
3695
3667
|
}, e.autoplayDelay));
|
|
3696
3668
|
}), se(() => e.autoplay, (V) => {
|
|
3697
|
-
V ?
|
|
3669
|
+
V ? m() : $();
|
|
3698
3670
|
}), se(() => e.activeIndex, (V) => {
|
|
3699
3671
|
typeof V != "number" || V === u.value || (u.value = s > 0 ? Math.min(Math.max(V, 0), s - 1) : V);
|
|
3700
3672
|
});
|
|
3701
|
-
const E =
|
|
3702
|
-
let
|
|
3673
|
+
const E = D(!1);
|
|
3674
|
+
let T;
|
|
3703
3675
|
const _ = (V) => {
|
|
3704
3676
|
E.value = V.matches;
|
|
3705
|
-
},
|
|
3677
|
+
}, p = b(() => E.value ? 0 : e.speed);
|
|
3706
3678
|
ie(() => {
|
|
3707
|
-
typeof window < "u" && window.matchMedia && (
|
|
3679
|
+
typeof window < "u" && window.matchMedia && (T = window.matchMedia("(prefers-reduced-motion: reduce)"), E.value = T.matches, T.addEventListener("change", _)), e.autoplay && m();
|
|
3708
3680
|
}), fe(() => {
|
|
3709
|
-
|
|
3681
|
+
f(), T?.removeEventListener("change", _);
|
|
3710
3682
|
});
|
|
3711
|
-
const
|
|
3712
|
-
e.pauseOnHover && (
|
|
3683
|
+
const A = () => {
|
|
3684
|
+
e.pauseOnHover && (c.value = !0);
|
|
3713
3685
|
}, I = () => {
|
|
3714
|
-
|
|
3715
|
-
},
|
|
3716
|
-
|
|
3686
|
+
c.value = !1;
|
|
3687
|
+
}, O = () => {
|
|
3688
|
+
B.value = !0;
|
|
3717
3689
|
}, H = (V) => {
|
|
3718
3690
|
const F = V.currentTarget;
|
|
3719
|
-
F && F.contains(V.relatedTarget) || (
|
|
3691
|
+
F && F.contains(V.relatedTarget) || (B.value = !1);
|
|
3720
3692
|
}, G = (V) => {
|
|
3721
3693
|
a("more-click", V);
|
|
3722
3694
|
}, j = {
|
|
@@ -3732,59 +3704,59 @@ var _t = A({
|
|
|
3732
3704
|
gap: h.value > 0 ? `${h.value}px` : void 0,
|
|
3733
3705
|
transform: `translate3d(calc(${-V} * (100% + ${h.value}px)), 0, 0)`,
|
|
3734
3706
|
transitionProperty: "transform",
|
|
3735
|
-
transitionDuration: `${
|
|
3707
|
+
transitionDuration: `${p.value}ms`,
|
|
3736
3708
|
transitionTimingFunction: "ease-out",
|
|
3737
3709
|
willChange: "transform"
|
|
3738
|
-
}),
|
|
3710
|
+
}), de = (V) => ({
|
|
3739
3711
|
position: "absolute",
|
|
3740
3712
|
top: "50%",
|
|
3741
3713
|
left: V ? "0" : void 0,
|
|
3742
3714
|
right: V ? void 0 : "0",
|
|
3743
3715
|
transform: "translateY(-50%)",
|
|
3744
3716
|
zIndex: 10
|
|
3745
|
-
}), ae = (V, F) => V.map((z,
|
|
3746
|
-
const U =
|
|
3717
|
+
}), ae = (V, F) => V.map((z, N) => {
|
|
3718
|
+
const U = N === F;
|
|
3747
3719
|
return t("li", {
|
|
3748
|
-
key: z.key ?? `krds-carousel-slide-${
|
|
3720
|
+
key: z.key ?? `krds-carousel-slide-${N}`,
|
|
3749
3721
|
class: ["swiper-slide", { "swiper-slide-active": U }],
|
|
3750
3722
|
style: X,
|
|
3751
3723
|
"aria-roledescription": "slide",
|
|
3752
|
-
"aria-label": `${
|
|
3724
|
+
"aria-label": `${N + 1} / ${V.length}`,
|
|
3753
3725
|
"aria-hidden": U ? void 0 : "true",
|
|
3754
3726
|
inert: U ? void 0 : !0
|
|
3755
3727
|
}, [z]);
|
|
3756
3728
|
}), Q = (V, F, z) => {
|
|
3757
|
-
const
|
|
3729
|
+
const N = V === "prev", U = !e.loop && (N ? F <= 0 : F >= s - 1);
|
|
3758
3730
|
return t("button", {
|
|
3759
3731
|
type: "button",
|
|
3760
3732
|
class: [`swiper-button-${V}`, { "swiper-button-disabled": U }],
|
|
3761
|
-
style: z ?
|
|
3733
|
+
style: z ? de(N) : void 0,
|
|
3762
3734
|
disabled: U,
|
|
3763
3735
|
"aria-controls": n.value,
|
|
3764
|
-
onClick:
|
|
3765
|
-
}, [t("span", { class: "sr-only" },
|
|
3736
|
+
onClick: N ? i : g
|
|
3737
|
+
}, [t("span", { class: "sr-only" }, N ? e.prevLabel : e.nextLabel)]);
|
|
3766
3738
|
}, ne = () => t("a", {
|
|
3767
3739
|
href: e.moreHref,
|
|
3768
3740
|
class: "swiper-button-more",
|
|
3769
3741
|
onClick: G
|
|
3770
|
-
}, [t("span", { class: "sr-only" }, e.moreLabel)]), L = (V, F) =>
|
|
3742
|
+
}, [t("span", { class: "sr-only" }, e.moreLabel)]), L = (V, F) => v.value === "fraction" ? t("div", { class: "swiper-pagination swiper-pagination-fraction" }, [
|
|
3771
3743
|
t("span", { class: "swiper-pagination-current" }, String(F + 1)),
|
|
3772
3744
|
t("span", { "aria-hidden": "true" }, "/"),
|
|
3773
3745
|
t("span", { class: "swiper-pagination-total" }, String(V))
|
|
3774
|
-
]) : t("div", { class: "swiper-pagination" }, Array.from({ length: V }, (z,
|
|
3775
|
-
key: `krds-carousel-bullet-${
|
|
3746
|
+
]) : t("div", { class: "swiper-pagination" }, Array.from({ length: V }, (z, N) => t("button", {
|
|
3747
|
+
key: `krds-carousel-bullet-${N}`,
|
|
3776
3748
|
type: "button",
|
|
3777
|
-
class: ["swiper-pagination-bullet", { "swiper-pagination-bullet-active":
|
|
3778
|
-
"aria-label": `${
|
|
3779
|
-
"aria-current":
|
|
3749
|
+
class: ["swiper-pagination-bullet", { "swiper-pagination-bullet-active": N === F }],
|
|
3750
|
+
"aria-label": `${N + 1}번째 슬라이드로 이동`,
|
|
3751
|
+
"aria-current": N === F ? "true" : void 0,
|
|
3780
3752
|
"aria-controls": n.value,
|
|
3781
|
-
onClick: () => o(
|
|
3753
|
+
onClick: () => o(N)
|
|
3782
3754
|
}))), R = () => t("div", { class: "swiper-controller" }, [t("button", {
|
|
3783
3755
|
type: "button",
|
|
3784
3756
|
class: "swiper-button-play",
|
|
3785
3757
|
style: w.value ? { display: "none" } : void 0,
|
|
3786
3758
|
"aria-controls": n.value,
|
|
3787
|
-
onClick:
|
|
3759
|
+
onClick: m
|
|
3788
3760
|
}, [t("span", { class: "sr-only" }, e.playLabel)]), t("button", {
|
|
3789
3761
|
type: "button",
|
|
3790
3762
|
class: "swiper-button-stop",
|
|
@@ -3792,8 +3764,8 @@ var _t = A({
|
|
|
3792
3764
|
"aria-controls": n.value,
|
|
3793
3765
|
onClick: $
|
|
3794
3766
|
}, [t("span", { class: "sr-only" }, e.stopLabel)])]), Y = (V, F) => {
|
|
3795
|
-
const z = e.variant === "banner",
|
|
3796
|
-
if (
|
|
3767
|
+
const z = e.variant === "banner", N = v.value !== "none", U = !!e.moreHref, J = [];
|
|
3768
|
+
if (N && J.push(L(V, F)), e.autoplay && J.push(R()), z) {
|
|
3797
3769
|
const ee = [];
|
|
3798
3770
|
e.navigation && ee.push(Q("prev", F, !1), Q("next", F, !1)), U && ee.push(ne()), ee.length > 0 && J.push(t("div", { class: "swiper-navigation" }, ee));
|
|
3799
3771
|
} else U && J.push(ne());
|
|
@@ -3802,17 +3774,17 @@ var _t = A({
|
|
|
3802
3774
|
return () => {
|
|
3803
3775
|
const V = Be(r.default?.()), F = V.length;
|
|
3804
3776
|
s = F;
|
|
3805
|
-
const z = F > 0 ? Math.min(Math.max(u.value, 0), F - 1) : 0,
|
|
3777
|
+
const z = F > 0 ? Math.min(Math.max(u.value, 0), F - 1) : 0, N = e.variant === "banner";
|
|
3806
3778
|
return t("div", {
|
|
3807
3779
|
id: e.id,
|
|
3808
|
-
class: ["krds-carousel",
|
|
3780
|
+
class: ["krds-carousel", N ? "main-d-ban-swiper" : "vb-swiper"],
|
|
3809
3781
|
style: { position: "relative" },
|
|
3810
3782
|
role: "region",
|
|
3811
3783
|
"aria-roledescription": "carousel",
|
|
3812
3784
|
"aria-label": e.ariaLabel,
|
|
3813
|
-
onMouseenter:
|
|
3785
|
+
onMouseenter: A,
|
|
3814
3786
|
onMouseleave: I,
|
|
3815
|
-
onFocusin:
|
|
3787
|
+
onFocusin: O,
|
|
3816
3788
|
onFocusout: H
|
|
3817
3789
|
}, [
|
|
3818
3790
|
t("div", {
|
|
@@ -3824,13 +3796,83 @@ var _t = A({
|
|
|
3824
3796
|
class: "swiper-wrapper",
|
|
3825
3797
|
style: le(z)
|
|
3826
3798
|
}, ae(V, z))]),
|
|
3827
|
-
!
|
|
3828
|
-
!
|
|
3799
|
+
!N && e.navigation && F > 0 ? Q("prev", z, !0) : null,
|
|
3800
|
+
!N && e.navigation && F > 0 ? Q("next", z, !0) : null,
|
|
3829
3801
|
F > 0 ? Y(F, z) : null
|
|
3830
3802
|
]);
|
|
3831
3803
|
};
|
|
3832
3804
|
}
|
|
3833
|
-
}), Qa = Xa,
|
|
3805
|
+
}), Qa = Xa, Ja = M({
|
|
3806
|
+
name: "KrdsTabs",
|
|
3807
|
+
props: {
|
|
3808
|
+
tabs: {
|
|
3809
|
+
type: Array,
|
|
3810
|
+
required: !0
|
|
3811
|
+
},
|
|
3812
|
+
modelValue: {
|
|
3813
|
+
type: String,
|
|
3814
|
+
default: void 0
|
|
3815
|
+
},
|
|
3816
|
+
variant: {
|
|
3817
|
+
type: String,
|
|
3818
|
+
default: "line"
|
|
3819
|
+
},
|
|
3820
|
+
full: {
|
|
3821
|
+
type: Boolean,
|
|
3822
|
+
default: !1
|
|
3823
|
+
},
|
|
3824
|
+
selectedText: {
|
|
3825
|
+
type: String,
|
|
3826
|
+
default: "선택됨"
|
|
3827
|
+
},
|
|
3828
|
+
class: {
|
|
3829
|
+
type: String,
|
|
3830
|
+
default: void 0
|
|
3831
|
+
}
|
|
3832
|
+
},
|
|
3833
|
+
emits: {
|
|
3834
|
+
"update:modelValue": (e) => !0,
|
|
3835
|
+
change: (e) => !0
|
|
3836
|
+
},
|
|
3837
|
+
setup(e, { emit: a, slots: r }) {
|
|
3838
|
+
const l = oe(), n = (c) => `tab-${l}-${c}`, s = (c) => `panel-${l}-${c}`, u = D(e.tabs.find((c) => !c.disabled)?.id), h = b(() => e.modelValue ?? u.value), v = (c) => {
|
|
3839
|
+
c.disabled || c.id === h.value || (u.value = c.id, a("update:modelValue", c.id), a("change", c.id));
|
|
3840
|
+
}, w = (c) => {
|
|
3841
|
+
if (c.key !== "ArrowRight" && c.key !== "ArrowLeft") return;
|
|
3842
|
+
c.preventDefault();
|
|
3843
|
+
const B = c.currentTarget;
|
|
3844
|
+
(c.key === "ArrowRight" ? B.nextElementSibling : B.previousElementSibling)?.querySelector("button")?.focus();
|
|
3845
|
+
};
|
|
3846
|
+
return () => t("div", { class: [
|
|
3847
|
+
"krds-tab-area",
|
|
3848
|
+
"layer",
|
|
3849
|
+
e.class
|
|
3850
|
+
] }, [t("div", { class: [
|
|
3851
|
+
"tab",
|
|
3852
|
+
e.variant,
|
|
3853
|
+
{ full: e.full }
|
|
3854
|
+
] }, [t("ul", { role: "tablist" }, e.tabs.map((c) => t("li", {
|
|
3855
|
+
key: c.id,
|
|
3856
|
+
id: n(c.id),
|
|
3857
|
+
role: "tab",
|
|
3858
|
+
"aria-selected": c.id === h.value,
|
|
3859
|
+
"aria-controls": s(c.id),
|
|
3860
|
+
class: { active: c.id === h.value },
|
|
3861
|
+
onKeydown: w
|
|
3862
|
+
}, [t("button", {
|
|
3863
|
+
type: "button",
|
|
3864
|
+
class: "btn-tab",
|
|
3865
|
+
disabled: c.disabled || void 0,
|
|
3866
|
+
onClick: () => v(c)
|
|
3867
|
+
}, [c.label, c.id === h.value ? t("i", { class: "sr-only" }, ` ${e.selectedText}`) : null])])))]), t("div", { class: "tab-conts-wrap" }, e.tabs.map((c) => t("section", {
|
|
3868
|
+
key: c.id,
|
|
3869
|
+
id: s(c.id),
|
|
3870
|
+
role: "tabpanel",
|
|
3871
|
+
"aria-labelledby": n(c.id),
|
|
3872
|
+
class: ["tab-conts", { active: c.id === h.value }]
|
|
3873
|
+
}, r[c.id]?.())))]);
|
|
3874
|
+
}
|
|
3875
|
+
}), Za = Ja, Ke = /* @__PURE__ */ Je({
|
|
3834
3876
|
KrdsAccordionGroup: () => ga,
|
|
3835
3877
|
KrdsAccordionItem: () => ya,
|
|
3836
3878
|
KrdsBadge: () => Ct,
|
|
@@ -3847,7 +3889,7 @@ var _t = A({
|
|
|
3847
3889
|
KrdsDisclosure: () => La,
|
|
3848
3890
|
KrdsFileUpload: () => wt,
|
|
3849
3891
|
KrdsFooter: () => xa,
|
|
3850
|
-
KrdsFormGroup: () =>
|
|
3892
|
+
KrdsFormGroup: () => dt,
|
|
3851
3893
|
KrdsFormHint: () => ot,
|
|
3852
3894
|
KrdsFormLabel: () => rt,
|
|
3853
3895
|
KrdsHeader: () => Ka,
|
|
@@ -3855,37 +3897,38 @@ var _t = A({
|
|
|
3855
3897
|
KrdsIdentifier: () => Ba,
|
|
3856
3898
|
KrdsInPageNavigation: () => Xt,
|
|
3857
3899
|
KrdsInput: () => nt,
|
|
3858
|
-
KrdsLanguageSwitcher: () =>
|
|
3900
|
+
KrdsLanguageSwitcher: () => ua,
|
|
3859
3901
|
KrdsLayout: () => _a,
|
|
3860
3902
|
KrdsLink: () => at,
|
|
3861
3903
|
KrdsMainMenu: () => Wa,
|
|
3862
|
-
KrdsMasthead: () =>
|
|
3904
|
+
KrdsMasthead: () => Tt,
|
|
3863
3905
|
KrdsModal: () => va,
|
|
3864
3906
|
KrdsPagination: () => Zt,
|
|
3865
3907
|
KrdsPanel: () => ta,
|
|
3866
3908
|
KrdsRadio: () => Rt,
|
|
3867
3909
|
KrdsResize: () => ca,
|
|
3868
3910
|
KrdsSelect: () => bt,
|
|
3869
|
-
KrdsSideNavigation: () =>
|
|
3911
|
+
KrdsSideNavigation: () => Ma,
|
|
3870
3912
|
KrdsSkipLink: () => Yt,
|
|
3871
3913
|
KrdsSpinner: () => It,
|
|
3872
3914
|
KrdsStep: () => qt,
|
|
3873
|
-
KrdsStepIndicator: () =>
|
|
3915
|
+
KrdsStepIndicator: () => Nt,
|
|
3874
3916
|
KrdsStructuredList: () => Pa,
|
|
3875
3917
|
KrdsTable: () => Sa,
|
|
3918
|
+
KrdsTabs: () => Za,
|
|
3876
3919
|
KrdsTag: () => $t,
|
|
3877
3920
|
KrdsTagGroup: () => Dt,
|
|
3878
3921
|
KrdsTextList: () => Fa,
|
|
3879
3922
|
KrdsTextarea: () => yt,
|
|
3880
|
-
KrdsToggleSwitch: () =>
|
|
3923
|
+
KrdsToggleSwitch: () => At,
|
|
3881
3924
|
KrdsTooltip: () => ia,
|
|
3882
3925
|
KrdsTts: () => ba
|
|
3883
|
-
}),
|
|
3926
|
+
}), Te = "0.0.17", ll = { install(e, a = {}) {
|
|
3884
3927
|
e.provide("krds:config", a), (a.components || Object.keys(Ke)).forEach((r) => {
|
|
3885
3928
|
const l = Ke[r];
|
|
3886
3929
|
l && e.component(r, l);
|
|
3887
|
-
}), Qt(e), e.config.globalProperties.$krds = { version:
|
|
3888
|
-
} },
|
|
3930
|
+
}), Qt(e), e.config.globalProperties.$krds = { version: Te };
|
|
3931
|
+
} }, nl = Te;
|
|
3889
3932
|
export {
|
|
3890
3933
|
ga as KrdsAccordionGroup,
|
|
3891
3934
|
ya as KrdsAccordionItem,
|
|
@@ -3903,7 +3946,7 @@ export {
|
|
|
3903
3946
|
La as KrdsDisclosure,
|
|
3904
3947
|
wt as KrdsFileUpload,
|
|
3905
3948
|
xa as KrdsFooter,
|
|
3906
|
-
|
|
3949
|
+
dt as KrdsFormGroup,
|
|
3907
3950
|
ot as KrdsFormHint,
|
|
3908
3951
|
rt as KrdsFormLabel,
|
|
3909
3952
|
Ka as KrdsHeader,
|
|
@@ -3911,36 +3954,37 @@ export {
|
|
|
3911
3954
|
Ba as KrdsIdentifier,
|
|
3912
3955
|
Xt as KrdsInPageNavigation,
|
|
3913
3956
|
nt as KrdsInput,
|
|
3914
|
-
|
|
3957
|
+
ua as KrdsLanguageSwitcher,
|
|
3915
3958
|
_a as KrdsLayout,
|
|
3916
3959
|
at as KrdsLink,
|
|
3917
3960
|
Wa as KrdsMainMenu,
|
|
3918
|
-
|
|
3961
|
+
Tt as KrdsMasthead,
|
|
3919
3962
|
va as KrdsModal,
|
|
3920
3963
|
Zt as KrdsPagination,
|
|
3921
3964
|
ta as KrdsPanel,
|
|
3922
3965
|
Rt as KrdsRadio,
|
|
3923
3966
|
ca as KrdsResize,
|
|
3924
3967
|
bt as KrdsSelect,
|
|
3925
|
-
|
|
3968
|
+
Ma as KrdsSideNavigation,
|
|
3926
3969
|
Yt as KrdsSkipLink,
|
|
3927
3970
|
It as KrdsSpinner,
|
|
3928
3971
|
qt as KrdsStep,
|
|
3929
|
-
|
|
3972
|
+
Nt as KrdsStepIndicator,
|
|
3930
3973
|
Pa as KrdsStructuredList,
|
|
3931
3974
|
Sa as KrdsTable,
|
|
3975
|
+
Za as KrdsTabs,
|
|
3932
3976
|
$t as KrdsTag,
|
|
3933
3977
|
Dt as KrdsTagGroup,
|
|
3934
3978
|
Fa as KrdsTextList,
|
|
3935
3979
|
yt as KrdsTextarea,
|
|
3936
|
-
|
|
3980
|
+
At as KrdsToggleSwitch,
|
|
3937
3981
|
ia as KrdsTooltip,
|
|
3938
3982
|
ba as KrdsTts,
|
|
3939
3983
|
he as classNames,
|
|
3940
|
-
|
|
3941
|
-
|
|
3942
|
-
|
|
3943
|
-
|
|
3984
|
+
ll as default,
|
|
3985
|
+
tl as generateId,
|
|
3986
|
+
al as generateUid,
|
|
3987
|
+
nl as version
|
|
3944
3988
|
};
|
|
3945
3989
|
|
|
3946
3990
|
//# sourceMappingURL=krds-vue.es.js.map
|