@krds.ui/vue 0.0.16 → 0.0.18
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 +84 -35
- package/dist/krds-vue.es.js +1028 -987
- 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 +11 -17
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,26 +123,26 @@ 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
|
-
const
|
|
130
|
-
return e.size &&
|
|
129
|
+
const d = ["krds-btn"];
|
|
130
|
+
return e.size && d.push(e.size), e.link && d.push("link"), e.basic && d.push("basic"), e.pure && d.push("pure"), e.class && d.push(e.class), d;
|
|
131
131
|
}), n = b(() => {
|
|
132
|
-
const
|
|
132
|
+
const d = {
|
|
133
133
|
href: e.href,
|
|
134
134
|
class: l.value
|
|
135
135
|
};
|
|
136
|
-
return e.target && (
|
|
137
|
-
}), s = (
|
|
138
|
-
a("click",
|
|
136
|
+
return e.target && (d.target = e.target), e.title && (d.title = e.title), e.target === "_blank" && (d.rel = "noopener noreferrer"), d;
|
|
137
|
+
}), s = (d) => {
|
|
138
|
+
a("click", d);
|
|
139
139
|
};
|
|
140
140
|
return () => t("a", {
|
|
141
141
|
...n.value,
|
|
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,33 +239,33 @@ 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"];
|
|
258
254
|
return e.size && S.push(e.size), e.class && S.push(e.class), S;
|
|
259
255
|
}), n = (S) => {
|
|
260
|
-
const
|
|
261
|
-
a("update:modelValue", e.type === "number" ? Number(
|
|
256
|
+
const $ = S.target;
|
|
257
|
+
a("update:modelValue", e.type === "number" ? Number($.value) : $.value), a("input", S);
|
|
262
258
|
}, s = (S) => {
|
|
263
259
|
a("change", S);
|
|
264
|
-
},
|
|
260
|
+
}, d = (S) => {
|
|
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,
|
|
@@ -284,22 +280,22 @@ var be = Object.defineProperty, Je = (e, a) => {
|
|
|
284
280
|
autofocus: e.autofocus,
|
|
285
281
|
onInput: n,
|
|
286
282
|
onChange: s,
|
|
287
|
-
onFocus:
|
|
283
|
+
onFocus: d,
|
|
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,53 +403,53 @@ 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,
|
|
417
|
-
s.value = null,
|
|
418
|
-
},
|
|
408
|
+
const r = /* @__PURE__ */ new Date(), l = D(e || r.getFullYear()), n = D(a || r.getMonth() + 1), s = D(null), d = 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 = () => {
|
|
413
|
+
s.value = null, d.value = null;
|
|
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
|
-
},
|
|
423
|
-
if (
|
|
424
|
-
s.value = i,
|
|
425
|
-
else if (!s.value || s.value &&
|
|
426
|
-
s.value = i,
|
|
418
|
+
}, $ = (i, g = !1) => {
|
|
419
|
+
if (g)
|
|
420
|
+
s.value = i, d.value = i;
|
|
421
|
+
else if (!s.value || s.value && d.value)
|
|
422
|
+
s.value = i, d.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, d.value = null) : d.value = i;
|
|
430
426
|
}
|
|
431
427
|
};
|
|
432
428
|
return {
|
|
433
429
|
currentYear: l,
|
|
434
430
|
currentMonth: n,
|
|
435
431
|
selectedStartDate: s,
|
|
436
|
-
selectedEndDate:
|
|
432
|
+
selectedEndDate: d,
|
|
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
|
-
handleDateSelection:
|
|
439
|
+
handleDateSelection: $,
|
|
444
440
|
selectToday: () => {
|
|
445
441
|
const i = `${r.getFullYear()}.${String(r.getMonth() + 1).padStart(2, "0")}.${String(r.getDate()).padStart(2, "0")}`;
|
|
446
|
-
|
|
442
|
+
$(i, !0);
|
|
447
443
|
},
|
|
448
444
|
isDateInSelectedRange: (i) => {
|
|
449
|
-
if (!s.value || !
|
|
445
|
+
if (!s.value || !d.value) return {
|
|
450
446
|
isInRange: !1,
|
|
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, "-")), x = new Date(d.value.replace(/\./g, "-")), C = i === s.value, E = i === d.value;
|
|
455
451
|
return {
|
|
456
|
-
isInRange:
|
|
452
|
+
isInRange: g >= m && g <= x,
|
|
457
453
|
isStart: C,
|
|
458
454
|
isEnd: E
|
|
459
455
|
};
|
|
@@ -462,23 +458,23 @@ function ct(e, a) {
|
|
|
462
458
|
}
|
|
463
459
|
function ft(e, a, r = {}) {
|
|
464
460
|
let l = null;
|
|
465
|
-
const { ignore: n, event: s = "click" } = typeof r == "string" ? { ignore: r } : r,
|
|
466
|
-
l = (
|
|
467
|
-
const w =
|
|
461
|
+
const { ignore: n, event: s = "click" } = typeof r == "string" ? { ignore: r } : r, d = () => {
|
|
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(() => {
|
|
477
|
-
|
|
473
|
+
d();
|
|
478
474
|
}), fe(() => {
|
|
479
475
|
h();
|
|
480
476
|
}), {
|
|
481
|
-
setupGlobalListeners:
|
|
477
|
+
setupGlobalListeners: d,
|
|
482
478
|
removeGlobalListeners: h
|
|
483
479
|
};
|
|
484
480
|
}
|
|
@@ -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,45 +541,41 @@ 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: d, currentMonth: h, selectedStartDate: v, selectedEndDate: w, yearOptions: c, monthOptions: B, prevMonth: S, nextMonth: $, 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",
|
|
573
565
|
"cal"
|
|
574
566
|
];
|
|
575
567
|
return e.size && L.push(e.size), e.class && L.push(e.class), L;
|
|
576
|
-
}),
|
|
568
|
+
}), x = b(() => ["form-conts", "calendar-conts"]), C = b(() => ({
|
|
577
569
|
"krds-calendar-area": !0,
|
|
578
570
|
active: n.value
|
|
579
571
|
})), E = b(() => {
|
|
580
|
-
const L =
|
|
572
|
+
const L = d.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
|
-
},
|
|
636
|
-
|
|
627
|
+
}, A = (L) => {
|
|
628
|
+
d.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 ? d.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
|
-
t("caption", null, `${
|
|
664
|
+
t("caption", null, `${d.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
|
-
return () => t("div", { class: "form-conts" }, [t("div", { class:
|
|
677
|
+
return () => t("div", { class: "form-conts" }, [t("div", { class: x.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,
|
|
@@ -723,7 +715,7 @@ var vt = [
|
|
|
723
715
|
t("button", {
|
|
724
716
|
type: "button",
|
|
725
717
|
class: "btn-cal-move next",
|
|
726
|
-
onClick:
|
|
718
|
+
onClick: $
|
|
727
719
|
}, [t("span", { class: "sr-only" }, "다음 달")])
|
|
728
720
|
]),
|
|
729
721
|
t("div", { class: "calendar-body" }, [t("div", { class: "calendar-table-wrap" }, [ne()])]),
|
|
@@ -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 });
|
|
@@ -832,17 +820,17 @@ var vt = [
|
|
|
832
820
|
}), s = (o) => {
|
|
833
821
|
const i = o.target.value;
|
|
834
822
|
r.value = i.length, a("update:modelValue", i), a("input", o);
|
|
835
|
-
},
|
|
823
|
+
}, d = (o) => {
|
|
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,
|
|
@@ -857,23 +845,23 @@ var vt = [
|
|
|
857
845
|
rows: e.rows,
|
|
858
846
|
cols: e.cols,
|
|
859
847
|
onInput: s,
|
|
860
|
-
onChange:
|
|
848
|
+
onChange: d,
|
|
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"]),
|
|
855
|
+
}), S = b(() => ["form-conts"]), $ = 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: $.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
|
-
},
|
|
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
|
+
}, d = (c) => {
|
|
935
|
+
a("blur", c);
|
|
944
936
|
}, h = b(() => ({
|
|
945
937
|
class: l.value,
|
|
946
938
|
value: e.modelValue ?? "",
|
|
@@ -950,30 +942,30 @@ var vt = [
|
|
|
950
942
|
disabled: e.disabled || e.readonly,
|
|
951
943
|
onChange: n,
|
|
952
944
|
onFocus: s,
|
|
953
|
-
onBlur:
|
|
954
|
-
})),
|
|
955
|
-
const
|
|
956
|
-
return e.state !== "default" &&
|
|
945
|
+
onBlur: d
|
|
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`, d = (p) => {
|
|
1071
|
+
const A = p.split(".");
|
|
1072
|
+
return A.length > 1 ? A.pop().toLowerCase() : "";
|
|
1073
|
+
}, h = (p) => {
|
|
1074
|
+
const A = d(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 = `.${d(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 || (
|
|
1115
|
-
},
|
|
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);
|
|
1107
|
+
}, $ = () => {
|
|
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 &&
|
|
1128
|
-
}),
|
|
1117
|
+
}, m = b(() => {
|
|
1118
|
+
const p = ["krds-file-upload", "line"];
|
|
1119
|
+
return e.class && p.push(e.class), p;
|
|
1120
|
+
}), x = () => 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
|
-
onDragleave:
|
|
1132
|
-
onDrop:
|
|
1123
|
+
onDragleave: $,
|
|
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 = [x()];
|
|
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,31 +1252,31 @@ ${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
|
-
const
|
|
1267
|
-
return e.link &&
|
|
1268
|
-
}), n = (
|
|
1269
|
-
a("remove",
|
|
1258
|
+
const d = ["krds-btn-tag"];
|
|
1259
|
+
return e.link && d.push("link"), e.class && d.push(e.class), d;
|
|
1260
|
+
}), n = (d) => {
|
|
1261
|
+
a("remove", d);
|
|
1270
1262
|
}, s = () => t("button", {
|
|
1271
1263
|
type: "button",
|
|
1272
1264
|
class: "btn-delete",
|
|
1273
1265
|
onClick: n
|
|
1274
1266
|
}, [t("span", { class: "sr-only" }, "삭제")]);
|
|
1275
1267
|
return () => {
|
|
1276
|
-
const
|
|
1277
|
-
if (h &&
|
|
1278
|
-
const
|
|
1268
|
+
const d = [], h = r.default?.();
|
|
1269
|
+
if (h && d.push(h), e.link || d.push(s()), e.link) {
|
|
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, d);
|
|
1283
1275
|
}
|
|
1284
|
-
return t("span", { class: l.value },
|
|
1276
|
+
return t("span", { class: l.value }, d);
|
|
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)), d = (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", {
|
|
@@ -1387,11 +1382,11 @@ var _t = A({
|
|
|
1387
1382
|
name: e.name,
|
|
1388
1383
|
checked: n.value,
|
|
1389
1384
|
disabled: e.disabled,
|
|
1390
|
-
onChange:
|
|
1385
|
+
onChange: d,
|
|
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), d = 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:
|
|
1461
|
-
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:
|
|
1455
|
+
}), t("label", { for: v.value }, l.default?.())];
|
|
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: d.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), d = 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: d.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,25 +1536,25 @@ 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
|
+
}, d = () => n.value++;
|
|
1555
1550
|
return Qe("stepIndicator", {
|
|
1556
1551
|
activeStep: b(() => e.modelValue || 0),
|
|
1557
1552
|
getStepStatus: l,
|
|
1558
|
-
getNextStepIndex:
|
|
1553
|
+
getNextStepIndex: d,
|
|
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
|
-
const l = Xe("stepIndicator"), n = l ? l.getNextStepIndex() : -1, s = b(() => e.status ? e.status : l && n >= 0 ? l.getStepStatus(n) : "pending"),
|
|
1585
|
-
const
|
|
1586
|
-
return e.class &&
|
|
1587
|
-
}), h = (
|
|
1588
|
-
a("click",
|
|
1579
|
+
const l = Xe("stepIndicator"), n = l ? l.getNextStepIndex() : -1, s = b(() => e.status ? e.status : l && n >= 0 ? l.getStepStatus(n) : "pending"), d = b(() => {
|
|
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
|
-
class:
|
|
1588
|
+
class: d.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);
|
|
@@ -1657,19 +1652,19 @@ var _t = A({
|
|
|
1657
1652
|
class: "krds-breadcrumb-wrap",
|
|
1658
1653
|
"aria-label": e.ariaLabel
|
|
1659
1654
|
}, [t("ol", { class: "breadcrumb" }, e.items.map((n, s) => {
|
|
1660
|
-
const
|
|
1655
|
+
const d = s === 0 && e.showHomeIcon;
|
|
1661
1656
|
return t("li", {
|
|
1662
1657
|
key: `breadcrumb-${s}`,
|
|
1663
|
-
class: { home:
|
|
1658
|
+
class: { home: d }
|
|
1664
1659
|
}, [t("a", {
|
|
1665
1660
|
href: n.href || "#",
|
|
1666
1661
|
class: "txt",
|
|
1667
1662
|
"aria-current": r(s) ? "page" : void 0,
|
|
1668
1663
|
onClick: (h) => l(n, h)
|
|
1669
|
-
},
|
|
1664
|
+
}, [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,96 +1696,96 @@ 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 &&
|
|
1710
|
-
}),
|
|
1711
|
-
const
|
|
1712
|
-
return (document.querySelector(
|
|
1713
|
-
}, h = (
|
|
1714
|
-
if (a("itemClick",
|
|
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;
|
|
1705
|
+
}), d = () => {
|
|
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 = d();
|
|
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 x = m[0], C = m[m.length - 1], E = x.element.offsetTop;
|
|
1738
|
+
let T = "";
|
|
1739
|
+
if (i >= g) T = C.href;
|
|
1740
|
+
else if (window.scrollY <= E) T = x.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", {},
|
|
1789
|
-
},
|
|
1783
|
+
return t("nav", { class: "in-page-navigation-list" }, [t("ul", {}, f)]);
|
|
1784
|
+
}, $ = () => 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
|
+
$()
|
|
1794
1789
|
].filter(Boolean))]);
|
|
1795
1790
|
}
|
|
1796
1791
|
}), Xt = Ut, De = {
|
|
@@ -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,88 +1828,85 @@ 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
|
-
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),
|
|
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), d = b(() => {
|
|
1839
1834
|
if (!n.value)
|
|
1840
1835
|
return "#";
|
|
1841
1836
|
}), h = b(() => {
|
|
1842
1837
|
if (!s.value)
|
|
1843
1838
|
return "#";
|
|
1844
|
-
}),
|
|
1845
|
-
const { max:
|
|
1846
|
-
if (
|
|
1839
|
+
}), v = b(() => {
|
|
1840
|
+
const { max: $ } = e, f = e.pageRange ?? Se, o = 1, i = [];
|
|
1841
|
+
if ($ <= f + 2) for (let g = r.value; g <= $; 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, $), m = Math.max($ - o + 1, 1), x = 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
|
-
key: "ellipsis-left"
|
|
1863
|
-
ariaLabel: "페이지 생략"
|
|
1857
|
+
key: "ellipsis-left"
|
|
1864
1858
|
});
|
|
1865
|
-
const
|
|
1866
|
-
for (let
|
|
1859
|
+
const T = Math.max(E, g + 1), _ = Math.min(C, m - 1);
|
|
1860
|
+
for (let p = T; p <= _; p++) i.push({
|
|
1867
1861
|
type: "page",
|
|
1868
|
-
key: `page-${
|
|
1869
|
-
page:
|
|
1862
|
+
key: `page-${p}`,
|
|
1863
|
+
page: p,
|
|
1870
1864
|
href: "#"
|
|
1871
1865
|
});
|
|
1872
|
-
C <
|
|
1866
|
+
C < m - 1 && i.push({
|
|
1873
1867
|
type: "ellipsis",
|
|
1874
|
-
key: "ellipsis-right"
|
|
1875
|
-
ariaLabel: "페이지 생략"
|
|
1868
|
+
key: "ellipsis-right"
|
|
1876
1869
|
});
|
|
1877
|
-
for (let
|
|
1870
|
+
for (let p = m; p <= $; p++) i.push({
|
|
1878
1871
|
type: "page",
|
|
1879
|
-
key: `page-${
|
|
1880
|
-
page:
|
|
1872
|
+
key: `page-${p}`,
|
|
1873
|
+
page: p,
|
|
1881
1874
|
href: "#"
|
|
1882
1875
|
});
|
|
1883
1876
|
}
|
|
1884
1877
|
return i;
|
|
1885
|
-
}), w = (
|
|
1886
|
-
if (
|
|
1887
|
-
|
|
1878
|
+
}), w = ($, f) => {
|
|
1879
|
+
if ($ === l.value) {
|
|
1880
|
+
f.preventDefault();
|
|
1888
1881
|
return;
|
|
1889
1882
|
}
|
|
1890
|
-
a("update:modelValue",
|
|
1891
|
-
},
|
|
1883
|
+
a("update:modelValue", $);
|
|
1884
|
+
}, c = ($) => {
|
|
1892
1885
|
if (n.value) {
|
|
1893
|
-
|
|
1886
|
+
$.preventDefault();
|
|
1894
1887
|
return;
|
|
1895
1888
|
}
|
|
1896
1889
|
a("update:modelValue", l.value - 1);
|
|
1897
|
-
},
|
|
1890
|
+
}, B = ($) => {
|
|
1898
1891
|
if (s.value) {
|
|
1899
|
-
|
|
1892
|
+
$.preventDefault();
|
|
1900
1893
|
return;
|
|
1901
1894
|
}
|
|
1902
1895
|
a("update:modelValue", l.value + 1);
|
|
1903
|
-
}, S = (
|
|
1904
|
-
if (
|
|
1905
|
-
const
|
|
1896
|
+
}, S = ($) => {
|
|
1897
|
+
if ($.type === "page") {
|
|
1898
|
+
const f = $.page === l.value;
|
|
1906
1899
|
return t("a", {
|
|
1907
|
-
key:
|
|
1908
|
-
href:
|
|
1909
|
-
class: ["page-link", { active:
|
|
1910
|
-
"aria-current":
|
|
1911
|
-
onClick: (o) => w(
|
|
1912
|
-
}, [
|
|
1900
|
+
key: $.key,
|
|
1901
|
+
href: $.href || "#",
|
|
1902
|
+
class: ["page-link", { active: f }],
|
|
1903
|
+
"aria-current": f ? "page" : void 0,
|
|
1904
|
+
onClick: (o) => w($.page, o)
|
|
1905
|
+
}, [f ? ve(t("span", null, "현재페이지"), [[De]]) : null, ` ${$.page} `]);
|
|
1913
1906
|
}
|
|
1914
1907
|
return t("span", {
|
|
1915
|
-
key:
|
|
1916
|
-
class: "page-link link-dot"
|
|
1917
|
-
"aria-label": x.ariaLabel
|
|
1908
|
+
key: $.key,
|
|
1909
|
+
class: "page-link link-dot"
|
|
1918
1910
|
});
|
|
1919
1911
|
};
|
|
1920
1912
|
return () => t("div", {
|
|
@@ -1922,15 +1914,15 @@ var _t = A({
|
|
|
1922
1914
|
class: "krds-pagination"
|
|
1923
1915
|
}, [
|
|
1924
1916
|
t(n.value ? "span" : "a", {
|
|
1925
|
-
href: n.value ? void 0 :
|
|
1917
|
+
href: n.value ? void 0 : d.value,
|
|
1926
1918
|
class: [
|
|
1927
1919
|
"page-navi",
|
|
1928
1920
|
"prev",
|
|
1929
1921
|
{ disabled: n.value }
|
|
1930
1922
|
],
|
|
1931
|
-
onClick:
|
|
1923
|
+
onClick: c
|
|
1932
1924
|
}, "이전"),
|
|
1933
|
-
t("div", { class: "page-links" },
|
|
1925
|
+
t("div", { class: "page-links" }, v.value.map(S)),
|
|
1934
1926
|
t(s.value ? "span" : "a", {
|
|
1935
1927
|
href: s.value ? void 0 : h.value,
|
|
1936
1928
|
class: [
|
|
@@ -1938,21 +1930,21 @@ var _t = A({
|
|
|
1938
1930
|
"next",
|
|
1939
1931
|
{ disabled: s.value }
|
|
1940
1932
|
],
|
|
1941
|
-
onClick:
|
|
1933
|
+
onClick: B
|
|
1942
1934
|
}, "다음")
|
|
1943
1935
|
]);
|
|
1944
1936
|
}
|
|
1945
|
-
}), Zt = Jt, ea =
|
|
1937
|
+
}), Zt = Jt, ea = M({
|
|
1946
1938
|
name: "KrdsPanel",
|
|
1947
1939
|
props: { modelValue: {
|
|
1948
1940
|
type: Boolean,
|
|
1949
1941
|
default: !1
|
|
1950
1942
|
} },
|
|
1951
|
-
emits:
|
|
1943
|
+
emits: { "update:modelValue": (e) => !0 },
|
|
1952
1944
|
setup(e, { emit: a, slots: r }) {
|
|
1953
1945
|
const l = b({
|
|
1954
1946
|
get: () => e.modelValue,
|
|
1955
|
-
set: (
|
|
1947
|
+
set: (d) => a("update:modelValue", d)
|
|
1956
1948
|
}), n = () => {
|
|
1957
1949
|
l.value = !0;
|
|
1958
1950
|
}, s = () => {
|
|
@@ -1972,7 +1964,7 @@ var _t = A({
|
|
|
1972
1964
|
t("i", { class: "svg-icon ico-angle right" })
|
|
1973
1965
|
])])])])]);
|
|
1974
1966
|
}
|
|
1975
|
-
}), ta = ea, aa =
|
|
1967
|
+
}), ta = ea, aa = M({
|
|
1976
1968
|
name: "KrdsContextualHelp",
|
|
1977
1969
|
props: {
|
|
1978
1970
|
tooltipTitle: {
|
|
@@ -1989,39 +1981,39 @@ var _t = A({
|
|
|
1989
1981
|
}
|
|
1990
1982
|
},
|
|
1991
1983
|
setup(e, { slots: a }) {
|
|
1992
|
-
const r =
|
|
1993
|
-
const o =
|
|
1994
|
-
|
|
1995
|
-
},
|
|
1996
|
-
!n.value || !l.value || (
|
|
1984
|
+
const r = D(), l = D(), n = D(), s = D(), d = D(!1), h = () => {
|
|
1985
|
+
const o = d.value;
|
|
1986
|
+
c(), o || v();
|
|
1987
|
+
}, v = () => {
|
|
1988
|
+
!n.value || !l.value || (d.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
1989
|
}, w = () => {
|
|
1998
|
-
!n.value || !l.value || (
|
|
1999
|
-
},
|
|
1990
|
+
!n.value || !l.value || (d.value = !1, n.value.style.display = "none", l.value.setAttribute("aria-expanded", "false"));
|
|
1991
|
+
}, c = () => {
|
|
2000
1992
|
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
|
-
|
|
2005
|
-
}),
|
|
2006
|
-
},
|
|
1993
|
+
o.forEach((g) => {
|
|
1994
|
+
g.style.display = "none";
|
|
1995
|
+
}), i.forEach((g) => {
|
|
1996
|
+
g.setAttribute("aria-expanded", "false");
|
|
1997
|
+
}), d.value = !1;
|
|
1998
|
+
}, B = () => {
|
|
2007
1999
|
if (!r.value || !n.value) return;
|
|
2008
2000
|
const o = window.innerWidth <= 768, i = r.value.querySelector(".tooltip-action");
|
|
2009
2001
|
if (o) {
|
|
2010
|
-
const
|
|
2011
|
-
n.value.style.left = `-${
|
|
2002
|
+
const g = getComputedStyle(document.querySelector(":root")).getPropertyValue("--krds-contents-padding-x").trim().split("px")[0], m = i.getBoundingClientRect().left - parseInt(g), x = document.body.clientWidth - parseInt(g) * 2;
|
|
2003
|
+
n.value.style.left = `-${m}px`, n.value.style.width = `${x}px`;
|
|
2012
2004
|
} else
|
|
2013
2005
|
n.value.style.left = "", n.value.style.right = "", n.value.style.width = "360px";
|
|
2014
2006
|
}, S = (o) => {
|
|
2015
|
-
(o.key === "Escape" || o.key === "Esc") &&
|
|
2016
|
-
},
|
|
2017
|
-
o.target.closest(".tooltip-action") ||
|
|
2018
|
-
},
|
|
2019
|
-
|
|
2007
|
+
(o.key === "Escape" || o.key === "Esc") && c();
|
|
2008
|
+
}, $ = (o) => {
|
|
2009
|
+
o.target.closest(".tooltip-action") || c();
|
|
2010
|
+
}, f = () => {
|
|
2011
|
+
d.value && B();
|
|
2020
2012
|
};
|
|
2021
2013
|
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",
|
|
2014
|
+
r.value && (l.value && l.value.setAttribute("aria-expanded", "false"), n.value && n.value.setAttribute("role", "tooltip"), document.addEventListener("keydown", S), document.addEventListener("click", $), window.addEventListener("resize", f));
|
|
2023
2015
|
}), re(() => {
|
|
2024
|
-
document.removeEventListener("keydown", S), document.removeEventListener("click",
|
|
2016
|
+
document.removeEventListener("keydown", S), document.removeEventListener("click", $), window.removeEventListener("resize", f);
|
|
2025
2017
|
}), () => t("div", {
|
|
2026
2018
|
ref: r,
|
|
2027
2019
|
class: ["krds-contextual-help", e.position]
|
|
@@ -2045,7 +2037,7 @@ var _t = A({
|
|
|
2045
2037
|
}, [t("span", { class: "sr-only" }, "닫기"), t("i", { class: "svg-icon ico-modal-close" })])
|
|
2046
2038
|
])])]);
|
|
2047
2039
|
}
|
|
2048
|
-
}), la = aa, na =
|
|
2040
|
+
}), la = aa, na = M({
|
|
2049
2041
|
name: "KrdsCoachMark",
|
|
2050
2042
|
props: {
|
|
2051
2043
|
coachMarkClass: {
|
|
@@ -2064,36 +2056,31 @@ var _t = A({
|
|
|
2064
2056
|
type: Number,
|
|
2065
2057
|
default: null
|
|
2066
2058
|
},
|
|
2067
|
-
class: {
|
|
2068
|
-
type: String,
|
|
2069
|
-
default: void 0
|
|
2070
|
-
},
|
|
2071
2059
|
style: {
|
|
2072
2060
|
type: [String, Object],
|
|
2073
2061
|
default: void 0
|
|
2074
|
-
},
|
|
2075
|
-
id: {
|
|
2076
|
-
type: String,
|
|
2077
|
-
default: void 0
|
|
2078
2062
|
}
|
|
2079
2063
|
},
|
|
2080
|
-
emits:
|
|
2064
|
+
emits: {
|
|
2065
|
+
"update:modelValue": (e) => !0,
|
|
2066
|
+
close: () => !0
|
|
2067
|
+
},
|
|
2081
2068
|
setup(e, { emit: a, slots: r }) {
|
|
2082
2069
|
const l = b(() => {
|
|
2083
|
-
const
|
|
2084
|
-
return e.stepsData &&
|
|
2070
|
+
const v = e.activeStep - 1;
|
|
2071
|
+
return e.stepsData && v >= 0 && v < e.stepsData.length ? e.stepsData[v] : null;
|
|
2085
2072
|
}), n = () => {
|
|
2086
2073
|
e.activeStep > 1 && a("update:modelValue", e.activeStep - 1);
|
|
2087
2074
|
}, s = () => {
|
|
2088
2075
|
e.activeStep < e.stepsData.length && a("update:modelValue", e.activeStep + 1);
|
|
2089
|
-
},
|
|
2076
|
+
}, d = () => {
|
|
2090
2077
|
a("close");
|
|
2091
2078
|
}, h = () => {
|
|
2092
|
-
const
|
|
2093
|
-
return e.modelValue !== e.activeStep || !
|
|
2079
|
+
const v = l.value;
|
|
2080
|
+
return e.modelValue !== e.activeStep || !v ? null : t("div", { class: "coach-balloon" }, [
|
|
2094
2081
|
t("h5", { class: "sr-only" }, "따라하기 가이드"),
|
|
2095
|
-
t("h6", { class: "coach-tit" }, `${e.activeStep}단계 : ${
|
|
2096
|
-
t("p", { class: "desc" },
|
|
2082
|
+
t("h6", { class: "coach-tit" }, `${e.activeStep}단계 : ${v.title}`),
|
|
2083
|
+
t("p", { class: "desc" }, v.description),
|
|
2097
2084
|
t("div", { class: "coach-controls" }, [t("div", { class: "num" }, [
|
|
2098
2085
|
t("span", { class: "sr-only" }, "현재 단계"),
|
|
2099
2086
|
t("strong", null, String(e.activeStep)),
|
|
@@ -2103,7 +2090,7 @@ var _t = A({
|
|
|
2103
2090
|
t("button", {
|
|
2104
2091
|
type: "button",
|
|
2105
2092
|
class: "krds-btn small text",
|
|
2106
|
-
onClick:
|
|
2093
|
+
onClick: d
|
|
2107
2094
|
}, "그만보기"),
|
|
2108
2095
|
e.activeStep !== 1 ? t("button", {
|
|
2109
2096
|
type: "button",
|
|
@@ -2123,7 +2110,7 @@ var _t = A({
|
|
|
2123
2110
|
style: e.style
|
|
2124
2111
|
}, [h(), r["coach-mark-content"]?.()]);
|
|
2125
2112
|
}
|
|
2126
|
-
}), sa = na, ra =
|
|
2113
|
+
}), sa = na, ra = M({
|
|
2127
2114
|
name: "KrdsTooltip",
|
|
2128
2115
|
props: {
|
|
2129
2116
|
type: {
|
|
@@ -2145,79 +2132,67 @@ var _t = A({
|
|
|
2145
2132
|
disabled: {
|
|
2146
2133
|
type: Boolean,
|
|
2147
2134
|
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
2135
|
}
|
|
2161
2136
|
},
|
|
2162
2137
|
setup(e, { slots: a }) {
|
|
2163
|
-
const r =
|
|
2164
|
-
const
|
|
2165
|
-
return e.type === "default" ?
|
|
2138
|
+
const r = D(null), l = D(null), n = D(!1), s = D({}), d = `tooltip-popover-${oe()}`, h = D(!1), v = b(() => {
|
|
2139
|
+
const m = ["krds-btn", "krds-tooltip"];
|
|
2140
|
+
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
2141
|
}), w = b(() => {
|
|
2167
|
-
const
|
|
2168
|
-
return e.box &&
|
|
2169
|
-
}),
|
|
2142
|
+
const m = [];
|
|
2143
|
+
return e.box && m.push("tooltip-box"), e.vertical && m.push("tooltip-vertical"), n.value && m.push("active"), m;
|
|
2144
|
+
}), c = b(() => r.value?.querySelector("button")?.textContent?.trim() || ""), B = () => window.innerWidth <= 768, S = () => {
|
|
2170
2145
|
if (!r.value || !l.value) return;
|
|
2171
|
-
const
|
|
2172
|
-
if (!
|
|
2173
|
-
const
|
|
2146
|
+
const m = r.value.querySelector("button");
|
|
2147
|
+
if (!m) return;
|
|
2148
|
+
const x = 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
2149
|
let G, j;
|
|
2175
2150
|
const X = [];
|
|
2176
|
-
h.value || e.box || e.vertical ? (
|
|
2151
|
+
h.value || e.box || e.vertical ? (T + A > H ? (G = T - C - x, X.push("top")) : (G = T + A + x, 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, X.push("right")) : j = p + x);
|
|
2177
2152
|
const le = window.innerWidth <= 420;
|
|
2178
2153
|
s.value = {
|
|
2179
2154
|
top: `${G}px`,
|
|
2180
2155
|
left: le ? "50%" : `${j}px`,
|
|
2181
2156
|
transform: le ? "translateX(-50%)" : "none"
|
|
2182
2157
|
}, l.value && (l.value.className = `krds-tooltip-popover ${X.join(" ")} ${w.value.join(" ")}`);
|
|
2183
|
-
},
|
|
2158
|
+
}, $ = async () => {
|
|
2184
2159
|
e.disabled || !e.tooltipContent || (n.value = !0, await ce(), S());
|
|
2185
|
-
},
|
|
2160
|
+
}, f = () => {
|
|
2186
2161
|
n.value = !1, s.value = {};
|
|
2187
|
-
}, o = (
|
|
2188
|
-
(
|
|
2162
|
+
}, o = (m) => {
|
|
2163
|
+
(m.key === "Escape" || m.key === "Esc") && n.value && f();
|
|
2189
2164
|
}, i = () => {
|
|
2190
|
-
h.value =
|
|
2191
|
-
},
|
|
2192
|
-
n.value &&
|
|
2165
|
+
h.value = B(), n.value && f();
|
|
2166
|
+
}, g = () => {
|
|
2167
|
+
n.value && f();
|
|
2193
2168
|
};
|
|
2194
2169
|
return ie(() => {
|
|
2195
|
-
h.value =
|
|
2170
|
+
h.value = B(), document.addEventListener("keydown", o), window.addEventListener("scroll", g), window.addEventListener("resize", i);
|
|
2196
2171
|
}), re(() => {
|
|
2197
|
-
document.removeEventListener("keydown", o), window.removeEventListener("scroll",
|
|
2172
|
+
document.removeEventListener("keydown", o), window.removeEventListener("scroll", g), window.removeEventListener("resize", i);
|
|
2198
2173
|
}), () => t("div", { ref: r }, [t("button", {
|
|
2199
2174
|
type: "button",
|
|
2200
|
-
class:
|
|
2175
|
+
class: v.value,
|
|
2201
2176
|
disabled: e.disabled,
|
|
2202
|
-
"aria-labelledby":
|
|
2203
|
-
onMouseover:
|
|
2204
|
-
onMouseout:
|
|
2205
|
-
onFocusin:
|
|
2206
|
-
onFocusout:
|
|
2177
|
+
"aria-labelledby": d,
|
|
2178
|
+
onMouseover: $,
|
|
2179
|
+
onMouseout: f,
|
|
2180
|
+
onFocusin: $,
|
|
2181
|
+
onFocusout: f
|
|
2207
2182
|
}, a.default?.()), ve(t("div", {
|
|
2208
|
-
id:
|
|
2183
|
+
id: d,
|
|
2209
2184
|
ref: l,
|
|
2210
2185
|
class: ["krds-tooltip-popover", w.value],
|
|
2211
2186
|
style: s.value,
|
|
2212
2187
|
"aria-hidden": !n.value,
|
|
2213
2188
|
role: "tooltip"
|
|
2214
2189
|
}, [
|
|
2215
|
-
t("span", { class: "sr-only" },
|
|
2190
|
+
t("span", { class: "sr-only" }, c.value),
|
|
2216
2191
|
" ",
|
|
2217
2192
|
e.tooltipContent
|
|
2218
2193
|
]), [[pe, n.value]])]);
|
|
2219
2194
|
}
|
|
2220
|
-
}), ia = ra, oa =
|
|
2195
|
+
}), ia = ra, oa = M({
|
|
2221
2196
|
name: "KrdsLanguageSwitcher",
|
|
2222
2197
|
props: {
|
|
2223
2198
|
languageList: {
|
|
@@ -2235,60 +2210,51 @@ var _t = A({
|
|
|
2235
2210
|
dropPosition: {
|
|
2236
2211
|
type: String,
|
|
2237
2212
|
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
2213
|
}
|
|
2251
2214
|
},
|
|
2252
|
-
emits:
|
|
2215
|
+
emits: {
|
|
2216
|
+
"update:modelValue": (e) => !0,
|
|
2217
|
+
close: () => !0
|
|
2218
|
+
},
|
|
2253
2219
|
setup(e, { emit: a, slots: r }) {
|
|
2254
|
-
const l =
|
|
2220
|
+
const l = D(!1), n = D(), s = D(), d = () => {
|
|
2255
2221
|
l.value = !l.value, l.value && n.value && w();
|
|
2256
2222
|
}, h = () => {
|
|
2257
2223
|
l.value = !1;
|
|
2258
|
-
},
|
|
2224
|
+
}, v = (i) => {
|
|
2259
2225
|
a("update:modelValue", i), h(), a("close"), s.value?.focus();
|
|
2260
2226
|
}, w = () => {
|
|
2261
2227
|
if (!n.value) return;
|
|
2262
2228
|
const i = n.value.querySelector(".drop-menu");
|
|
2263
2229
|
if (!i) return;
|
|
2264
|
-
const
|
|
2265
|
-
n.value.classList.remove("drop-left", "drop-right"),
|
|
2266
|
-
},
|
|
2230
|
+
const g = i.getBoundingClientRect(), m = window.innerWidth;
|
|
2231
|
+
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");
|
|
2232
|
+
}, c = (i) => {
|
|
2267
2233
|
i.key === "Escape" && (h(), s.value?.focus());
|
|
2268
|
-
},
|
|
2234
|
+
}, B = (i) => {
|
|
2269
2235
|
n.value?.contains(i.target) || h();
|
|
2270
2236
|
}, S = (i) => {
|
|
2271
2237
|
n.value?.contains(i.relatedTarget) || h();
|
|
2272
|
-
},
|
|
2238
|
+
}, $ = (i) => {
|
|
2273
2239
|
if (!n.value) return;
|
|
2274
|
-
n.value.querySelectorAll(".drop-list .item-link").forEach((
|
|
2275
|
-
|
|
2240
|
+
n.value.querySelectorAll(".drop-list .item-link").forEach((m) => {
|
|
2241
|
+
m.style.position = "relative", m.style.zIndex = "0";
|
|
2276
2242
|
});
|
|
2277
|
-
const
|
|
2278
|
-
|
|
2243
|
+
const g = i.target;
|
|
2244
|
+
g.style.zIndex = "1";
|
|
2279
2245
|
};
|
|
2280
2246
|
se(l, (i) => {
|
|
2281
|
-
i ? (document.addEventListener("keydown",
|
|
2247
|
+
i ? (document.addEventListener("keydown", c), document.addEventListener("click", B)) : (document.removeEventListener("keydown", c), document.removeEventListener("click", B));
|
|
2282
2248
|
}), re(() => {
|
|
2283
|
-
document.removeEventListener("keydown",
|
|
2249
|
+
document.removeEventListener("keydown", c), document.removeEventListener("click", B);
|
|
2284
2250
|
});
|
|
2285
|
-
const
|
|
2251
|
+
const f = () => t("ul", { class: "drop-list" }, e.languageList.map((i) => t("li", { key: i.code }, [t("a", {
|
|
2286
2252
|
href: "#",
|
|
2287
2253
|
class: ["item-link", { active: e.modelValue === i.code }],
|
|
2288
2254
|
lang: i.code,
|
|
2289
2255
|
"aria-selected": e.modelValue === i.code,
|
|
2290
|
-
onClick: ge(() =>
|
|
2291
|
-
onFocus:
|
|
2256
|
+
onClick: ge(() => v(i.code), ["prevent"]),
|
|
2257
|
+
onFocus: $
|
|
2292
2258
|
}, [
|
|
2293
2259
|
i.name,
|
|
2294
2260
|
" ",
|
|
@@ -2299,7 +2265,7 @@ var _t = A({
|
|
|
2299
2265
|
lang: i.code,
|
|
2300
2266
|
target: "_blank",
|
|
2301
2267
|
title: "새 창 열림",
|
|
2302
|
-
onFocus:
|
|
2268
|
+
onFocus: $
|
|
2303
2269
|
}, [
|
|
2304
2270
|
i.name,
|
|
2305
2271
|
" ",
|
|
@@ -2322,7 +2288,7 @@ var _t = A({
|
|
|
2322
2288
|
type: "button",
|
|
2323
2289
|
class: ["krds-btn small text drop-btn", { active: l.value }],
|
|
2324
2290
|
"aria-expanded": l.value,
|
|
2325
|
-
onClick:
|
|
2291
|
+
onClick: d
|
|
2326
2292
|
}, [
|
|
2327
2293
|
t("i", { class: "svg-icon ico-global" }),
|
|
2328
2294
|
r.default?.(),
|
|
@@ -2330,13 +2296,16 @@ var _t = A({
|
|
|
2330
2296
|
]), t("div", {
|
|
2331
2297
|
class: "drop-menu",
|
|
2332
2298
|
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" ?
|
|
2299
|
+
}, [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
2300
|
}
|
|
2335
|
-
}),
|
|
2301
|
+
}), ua = oa, da = M({
|
|
2336
2302
|
name: "KrdsResize",
|
|
2337
|
-
emits:
|
|
2303
|
+
emits: {
|
|
2304
|
+
"update:modelValue": (e) => !0,
|
|
2305
|
+
close: () => !0
|
|
2306
|
+
},
|
|
2338
2307
|
setup(e, { emit: a }) {
|
|
2339
|
-
const r =
|
|
2308
|
+
const r = D(!1), l = D(), n = D(), s = D("md"), d = [
|
|
2340
2309
|
{
|
|
2341
2310
|
key: "sm",
|
|
2342
2311
|
label: "작게",
|
|
@@ -2363,43 +2332,43 @@ var _t = A({
|
|
|
2363
2332
|
zoom: "1.5"
|
|
2364
2333
|
}
|
|
2365
2334
|
], h = () => {
|
|
2366
|
-
r.value = !r.value, r.value && l.value &&
|
|
2367
|
-
},
|
|
2335
|
+
r.value = !r.value, r.value && l.value && B();
|
|
2336
|
+
}, v = () => {
|
|
2368
2337
|
r.value = !1;
|
|
2369
2338
|
}, w = (i) => {
|
|
2370
|
-
|
|
2371
|
-
},
|
|
2372
|
-
const i =
|
|
2339
|
+
v(), a("close"), n.value?.focus(), s.value = i.key, document.body.style.zoom = i?.zoom;
|
|
2340
|
+
}, c = () => {
|
|
2341
|
+
const i = d.find((g) => g.key === "md");
|
|
2373
2342
|
i && w(i);
|
|
2374
|
-
},
|
|
2343
|
+
}, B = () => {
|
|
2375
2344
|
if (!l.value) return;
|
|
2376
2345
|
const i = l.value.querySelector(".drop-menu");
|
|
2377
2346
|
if (!i) return;
|
|
2378
|
-
const
|
|
2379
|
-
l.value.classList.remove("drop-left", "drop-right"),
|
|
2347
|
+
const g = i.getBoundingClientRect(), m = window.innerWidth;
|
|
2348
|
+
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
2349
|
}, S = (i) => {
|
|
2381
|
-
i.key === "Escape" && (
|
|
2382
|
-
},
|
|
2383
|
-
l.value?.contains(i.target) ||
|
|
2384
|
-
},
|
|
2385
|
-
l.value?.contains(i.relatedTarget) ||
|
|
2350
|
+
i.key === "Escape" && (v(), n.value?.focus());
|
|
2351
|
+
}, $ = (i) => {
|
|
2352
|
+
l.value?.contains(i.target) || v();
|
|
2353
|
+
}, f = (i) => {
|
|
2354
|
+
l.value?.contains(i.relatedTarget) || v();
|
|
2386
2355
|
}, o = (i) => {
|
|
2387
2356
|
if (!l.value) return;
|
|
2388
|
-
l.value.querySelectorAll(".drop-list .item-link").forEach((
|
|
2389
|
-
|
|
2357
|
+
l.value.querySelectorAll(".drop-list .item-link").forEach((m) => {
|
|
2358
|
+
m.style.position = "relative", m.style.zIndex = "0";
|
|
2390
2359
|
});
|
|
2391
|
-
const
|
|
2392
|
-
|
|
2360
|
+
const g = i.target;
|
|
2361
|
+
g.style.zIndex = "1";
|
|
2393
2362
|
};
|
|
2394
2363
|
return se(r, (i) => {
|
|
2395
|
-
i ? (document.addEventListener("keydown", S), document.addEventListener("click",
|
|
2364
|
+
i ? (document.addEventListener("keydown", S), document.addEventListener("click", $)) : (document.removeEventListener("keydown", S), document.removeEventListener("click", $));
|
|
2396
2365
|
}), re(() => {
|
|
2397
|
-
document.removeEventListener("keydown", S), document.removeEventListener("click",
|
|
2366
|
+
document.removeEventListener("keydown", S), document.removeEventListener("click", $);
|
|
2398
2367
|
}), () => t("div", {
|
|
2399
2368
|
ref: l,
|
|
2400
2369
|
class: "krds-drop-wrap krds-resize",
|
|
2401
2370
|
"data-adjust": "scale",
|
|
2402
|
-
onFocusout:
|
|
2371
|
+
onFocusout: f
|
|
2403
2372
|
}, [t("button", {
|
|
2404
2373
|
ref: n,
|
|
2405
2374
|
type: "button",
|
|
@@ -2408,7 +2377,7 @@ var _t = A({
|
|
|
2408
2377
|
}, ["화면크기 ", t("i", { class: "svg-icon ico-toggle" })]), t("div", {
|
|
2409
2378
|
class: "drop-menu",
|
|
2410
2379
|
style: { display: r.value ? "block" : "none" }
|
|
2411
|
-
}, [t("div", { class: "drop-in" }, [t("ul", { class: "drop-list" },
|
|
2380
|
+
}, [t("div", { class: "drop-in" }, [t("ul", { class: "drop-list" }, d.map((i) => t("li", { key: i.key }, [t("button", {
|
|
2412
2381
|
type: "button",
|
|
2413
2382
|
class: [
|
|
2414
2383
|
"item-link",
|
|
@@ -2422,11 +2391,11 @@ var _t = A({
|
|
|
2422
2391
|
type: "button",
|
|
2423
2392
|
class: "krds-btn medium text",
|
|
2424
2393
|
"data-adjust-scale": "md",
|
|
2425
|
-
onClick: ge(
|
|
2394
|
+
onClick: ge(c, ["prevent"]),
|
|
2426
2395
|
onFocus: o
|
|
2427
2396
|
}, [t("i", { class: "svg-icon ico-reset" }), " 초기화"])])])])]);
|
|
2428
2397
|
}
|
|
2429
|
-
}), ca =
|
|
2398
|
+
}), ca = da, fa = M({
|
|
2430
2399
|
name: "KrdsModal",
|
|
2431
2400
|
props: {
|
|
2432
2401
|
modelValue: {
|
|
@@ -2458,42 +2427,42 @@ var _t = A({
|
|
|
2458
2427
|
default: !1
|
|
2459
2428
|
}
|
|
2460
2429
|
},
|
|
2461
|
-
emits:
|
|
2430
|
+
emits: { "update:modelValue": (e) => !0 },
|
|
2462
2431
|
slots: Object,
|
|
2463
2432
|
setup(e, { slots: a, emit: r }) {
|
|
2464
2433
|
const l = xe()?.uid, n = b(() => e.modalId ?? `krds-modal-${l}`), s = b({
|
|
2465
2434
|
get: () => e.modelValue,
|
|
2466
2435
|
set: (i) => r("update:modelValue", i)
|
|
2467
|
-
}),
|
|
2436
|
+
}), d = b(() => `tit_${n.value}`), h = b(() => ({
|
|
2468
2437
|
small: "modal-sm",
|
|
2469
2438
|
medium: "modal-md",
|
|
2470
2439
|
large: "modal-lg"
|
|
2471
|
-
})[e.size]),
|
|
2440
|
+
})[e.size]), v = () => {
|
|
2472
2441
|
s.value = !1;
|
|
2473
2442
|
};
|
|
2474
|
-
let w = "",
|
|
2475
|
-
const
|
|
2476
|
-
if (!
|
|
2477
|
-
const
|
|
2478
|
-
if (
|
|
2443
|
+
let w = "", c = null;
|
|
2444
|
+
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"), $ = (i) => {
|
|
2445
|
+
if (!B.value || i.key !== "Tab") return;
|
|
2446
|
+
const g = S(B.value);
|
|
2447
|
+
if (g.length === 0) {
|
|
2479
2448
|
i.preventDefault();
|
|
2480
2449
|
return;
|
|
2481
2450
|
}
|
|
2482
|
-
const
|
|
2483
|
-
i.shiftKey && document.activeElement ===
|
|
2484
|
-
},
|
|
2485
|
-
i.key === "Escape" && !e.persistent &&
|
|
2451
|
+
const m = g[0], x = g[g.length - 1];
|
|
2452
|
+
i.shiftKey && document.activeElement === m ? (i.preventDefault(), x.focus()) : !i.shiftKey && document.activeElement === x && (i.preventDefault(), m.focus());
|
|
2453
|
+
}, f = (i) => {
|
|
2454
|
+
i.key === "Escape" && !e.persistent && v();
|
|
2486
2455
|
}, o = () => {
|
|
2487
|
-
document.body.style.overflow = w, document.removeEventListener("keydown",
|
|
2456
|
+
document.body.style.overflow = w, document.removeEventListener("keydown", $), document.removeEventListener("keydown", f), c && (c.focus(), c = null), B.value = null;
|
|
2488
2457
|
};
|
|
2489
2458
|
return se(() => e.modelValue, async (i) => {
|
|
2490
2459
|
if (i) {
|
|
2491
|
-
w = document.body.style.overflow, document.body.style.overflow = "hidden",
|
|
2492
|
-
const
|
|
2493
|
-
if (
|
|
2494
|
-
|
|
2495
|
-
const
|
|
2496
|
-
|
|
2460
|
+
w = document.body.style.overflow, document.body.style.overflow = "hidden", c = document.activeElement, await ce();
|
|
2461
|
+
const g = document.getElementById(n.value);
|
|
2462
|
+
if (g) {
|
|
2463
|
+
B.value = g;
|
|
2464
|
+
const m = g.querySelector(".modal-conts");
|
|
2465
|
+
m && (m.setAttribute("tabindex", "-1"), m.focus()), document.addEventListener("keydown", $), document.addEventListener("keydown", f);
|
|
2497
2466
|
}
|
|
2498
2467
|
} else o();
|
|
2499
2468
|
}, { immediate: !0 }), fe(() => {
|
|
@@ -2505,11 +2474,11 @@ var _t = A({
|
|
|
2505
2474
|
class: "krds-modal fade in shown",
|
|
2506
2475
|
role: "dialog",
|
|
2507
2476
|
"aria-modal": !0,
|
|
2508
|
-
"aria-labelledby":
|
|
2477
|
+
"aria-labelledby": d.value
|
|
2509
2478
|
};
|
|
2510
2479
|
return e.full ? i["data-type"] = "full" : e.bottomSheet && (i["data-type"] = "bottom-sheet"), t(Ce, { to: "body" }, t("section", i, [t("div", { class: `modal-dialog ${h.value}` }, [t("div", { class: "modal-content" }, [
|
|
2511
2480
|
a.title ? t("div", { class: "modal-header" }, [t("h2", {
|
|
2512
|
-
id:
|
|
2481
|
+
id: d.value,
|
|
2513
2482
|
class: "modal-title"
|
|
2514
2483
|
}, a.title())]) : null,
|
|
2515
2484
|
t("div", { class: "modal-conts" }, [t("div", { class: "conts-area" }, a.default?.())]),
|
|
@@ -2517,15 +2486,15 @@ var _t = A({
|
|
|
2517
2486
|
t("button", {
|
|
2518
2487
|
type: "button",
|
|
2519
2488
|
class: "krds-btn medium icon btn-close close-modal",
|
|
2520
|
-
onClick:
|
|
2489
|
+
onClick: v
|
|
2521
2490
|
}, [t("span", { class: "sr-only" }, "닫기"), t("i", { class: "svg-icon ico-popup-close" })])
|
|
2522
2491
|
].filter(Boolean))]), t("div", {
|
|
2523
2492
|
class: e.backdrop ? "modal-back in" : "modal-back",
|
|
2524
|
-
onClick: e.persistent ? void 0 :
|
|
2493
|
+
onClick: e.persistent ? void 0 : v
|
|
2525
2494
|
})]));
|
|
2526
2495
|
};
|
|
2527
2496
|
}
|
|
2528
|
-
}), va = fa, pa =
|
|
2497
|
+
}), va = fa, pa = M({
|
|
2529
2498
|
name: "KrdsAccordionGroup",
|
|
2530
2499
|
props: {
|
|
2531
2500
|
typeLine: {
|
|
@@ -2544,7 +2513,7 @@ var _t = A({
|
|
|
2544
2513
|
});
|
|
2545
2514
|
return () => t("div", { class: r.value }, a.default?.());
|
|
2546
2515
|
}
|
|
2547
|
-
}), ga = pa, ha =
|
|
2516
|
+
}), ga = pa, ha = M({
|
|
2548
2517
|
name: "KrdsAccordionItem",
|
|
2549
2518
|
props: {
|
|
2550
2519
|
id: {
|
|
@@ -2564,7 +2533,7 @@ var _t = A({
|
|
|
2564
2533
|
default: void 0
|
|
2565
2534
|
}
|
|
2566
2535
|
},
|
|
2567
|
-
emits:
|
|
2536
|
+
emits: { toggle: (e) => !0 },
|
|
2568
2537
|
setup(e, { emit: a, slots: r }) {
|
|
2569
2538
|
const l = b(() => e.openItem === e.id), n = () => {
|
|
2570
2539
|
a("toggle", e.id);
|
|
@@ -2586,7 +2555,7 @@ var _t = A({
|
|
|
2586
2555
|
"aria-labelledby": `accordion-header-${e.id}`
|
|
2587
2556
|
}, [t("div", { class: "accordion-body" }, r.content?.() ?? e.content)])]);
|
|
2588
2557
|
}
|
|
2589
|
-
}), ya = ha, ma =
|
|
2558
|
+
}), ya = ha, ma = M({
|
|
2590
2559
|
name: "KrdsTts",
|
|
2591
2560
|
props: {
|
|
2592
2561
|
text: {
|
|
@@ -2614,14 +2583,14 @@ var _t = A({
|
|
|
2614
2583
|
default: void 0
|
|
2615
2584
|
}
|
|
2616
2585
|
},
|
|
2617
|
-
emits:
|
|
2618
|
-
|
|
2619
|
-
|
|
2620
|
-
|
|
2621
|
-
|
|
2622
|
-
|
|
2586
|
+
emits: {
|
|
2587
|
+
play: (e) => !0,
|
|
2588
|
+
pause: () => !0,
|
|
2589
|
+
end: () => !0,
|
|
2590
|
+
error: (e) => !0
|
|
2591
|
+
},
|
|
2623
2592
|
setup(e, { emit: a }) {
|
|
2624
|
-
const r =
|
|
2593
|
+
const r = D(!1);
|
|
2625
2594
|
let l = null;
|
|
2626
2595
|
const n = () => {
|
|
2627
2596
|
typeof window < "u" && window.speechSynthesis && window.speechSynthesis.cancel(), r.value = !1, l = null;
|
|
@@ -2639,30 +2608,30 @@ var _t = A({
|
|
|
2639
2608
|
r.value = !0;
|
|
2640
2609
|
}, l.onend = () => {
|
|
2641
2610
|
r.value = !1, l = null, a("end");
|
|
2642
|
-
}, l.onerror = (
|
|
2643
|
-
r.value = !1, l = null,
|
|
2611
|
+
}, l.onerror = (v) => {
|
|
2612
|
+
r.value = !1, l = null, v.error !== "canceled" && a("error", new Error(v.error));
|
|
2644
2613
|
}, window.speechSynthesis.speak(l), a("play", e.text);
|
|
2645
2614
|
}
|
|
2646
|
-
},
|
|
2647
|
-
const
|
|
2648
|
-
return e.size &&
|
|
2615
|
+
}, d = b(() => {
|
|
2616
|
+
const v = ["krds-tts"];
|
|
2617
|
+
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
2618
|
}), h = b(() => r.value ? "ico-stop" : e.icon === "play" ? "ico-play" : "ico-volume");
|
|
2650
2619
|
return fe(() => {
|
|
2651
2620
|
n();
|
|
2652
2621
|
}), () => {
|
|
2653
|
-
const
|
|
2622
|
+
const v = [t("span", {
|
|
2654
2623
|
class: "krds-tts-icon",
|
|
2655
2624
|
"aria-hidden": "true"
|
|
2656
2625
|
}, [t("i", { class: `svg-icon ${h.value}` })])];
|
|
2657
|
-
return e.label &&
|
|
2626
|
+
return e.label && v.push(t("span", { class: "krds-tts-text" }, e.label)), t("button", {
|
|
2658
2627
|
type: "button",
|
|
2659
|
-
class:
|
|
2628
|
+
class: d.value,
|
|
2660
2629
|
disabled: e.disabled || void 0,
|
|
2661
2630
|
onClick: s
|
|
2662
|
-
},
|
|
2631
|
+
}, v);
|
|
2663
2632
|
};
|
|
2664
2633
|
}
|
|
2665
|
-
}), ba = ma, ka =
|
|
2634
|
+
}), ba = ma, ka = M({
|
|
2666
2635
|
name: "KrdsTable",
|
|
2667
2636
|
props: {
|
|
2668
2637
|
caption: {
|
|
@@ -2682,68 +2651,68 @@ var _t = A({
|
|
|
2682
2651
|
default: void 0
|
|
2683
2652
|
}
|
|
2684
2653
|
},
|
|
2685
|
-
emits:
|
|
2654
|
+
emits: { "row-click": (e, a) => !0 },
|
|
2686
2655
|
slots: Object,
|
|
2687
2656
|
setup(e, { emit: a, slots: r }) {
|
|
2688
2657
|
const l = b(() => {
|
|
2689
|
-
const
|
|
2690
|
-
return e.class &&
|
|
2691
|
-
}), n = b(() => ["krds-table-wrap"]), s = (
|
|
2658
|
+
const f = ["tbl"];
|
|
2659
|
+
return e.class && f.push(e.class), f;
|
|
2660
|
+
}), n = b(() => ["krds-table-wrap"]), s = (f) => f.headerStyle || void 0, d = (f) => {
|
|
2692
2661
|
const o = [];
|
|
2693
|
-
return
|
|
2694
|
-
}, h = (
|
|
2662
|
+
return f.align && o.push(`text-${f.align}`), f.headerClasses && o.push(f.headerClasses), o.length > 0 ? o : void 0;
|
|
2663
|
+
}, h = (f, o) => {
|
|
2695
2664
|
if (o.style)
|
|
2696
|
-
return typeof o.style == "function" ? o.style(
|
|
2697
|
-
},
|
|
2665
|
+
return typeof o.style == "function" ? o.style(f) : o.style;
|
|
2666
|
+
}, v = (f, o) => {
|
|
2698
2667
|
const i = [];
|
|
2699
2668
|
if (o.align && i.push(`text-${o.align}`), o.classes) {
|
|
2700
|
-
const
|
|
2701
|
-
i.push(
|
|
2669
|
+
const g = typeof o.classes == "function" ? o.classes(f) : o.classes;
|
|
2670
|
+
i.push(g);
|
|
2702
2671
|
}
|
|
2703
2672
|
return i.length > 0 ? i : void 0;
|
|
2704
|
-
}, w = () => !e.columns.length || !e.columns.some((
|
|
2705
|
-
if (!
|
|
2706
|
-
const o =
|
|
2673
|
+
}, w = () => !e.columns.length || !e.columns.some((f) => f.headerStyle && f.headerStyle.includes("width")) ? null : t("colgroup", e.columns.map((f) => {
|
|
2674
|
+
if (!f.headerStyle) return t("col");
|
|
2675
|
+
const o = f.headerStyle.match(/width\s*:\s*([^;]+)/i);
|
|
2707
2676
|
return t("col", { style: o ? { width: o[1].trim() } : void 0 });
|
|
2708
|
-
})),
|
|
2677
|
+
})), c = () => {
|
|
2709
2678
|
if (!e.columns.length) return null;
|
|
2710
|
-
const
|
|
2711
|
-
const i = s(o),
|
|
2679
|
+
const f = e.columns.map((o) => {
|
|
2680
|
+
const i = s(o), g = d(o);
|
|
2712
2681
|
return t("th", {
|
|
2713
2682
|
scope: "col",
|
|
2714
|
-
class:
|
|
2683
|
+
class: g,
|
|
2715
2684
|
style: i
|
|
2716
2685
|
}, o.label);
|
|
2717
2686
|
});
|
|
2718
|
-
return t("thead", [t("tr",
|
|
2719
|
-
},
|
|
2687
|
+
return t("thead", [t("tr", f)]);
|
|
2688
|
+
}, B = (f, o) => typeof o.field == "function" ? o.field(f) : f[o.field], S = () => {
|
|
2720
2689
|
if (!e.rows.length) return t("tbody", [t("tr", [t("td", {
|
|
2721
2690
|
colspan: e.columns.length || 1,
|
|
2722
2691
|
class: "text-center"
|
|
2723
2692
|
}, r["no-data"] ? r["no-data"]() : "데이터가 없습니다.")])]);
|
|
2724
|
-
const
|
|
2725
|
-
const
|
|
2726
|
-
const C =
|
|
2727
|
-
return t(
|
|
2728
|
-
scope:
|
|
2693
|
+
const f = e.rows.map((o, i) => {
|
|
2694
|
+
const g = e.columns.map((m, x) => {
|
|
2695
|
+
const C = B(o, m), E = typeof C == "function" ? C() : C, T = h(o, m), _ = v(o, m);
|
|
2696
|
+
return t(x === 0 ? "th" : "td", {
|
|
2697
|
+
scope: x === 0 ? "row" : void 0,
|
|
2729
2698
|
class: _,
|
|
2730
|
-
style:
|
|
2699
|
+
style: T
|
|
2731
2700
|
}, E);
|
|
2732
2701
|
});
|
|
2733
|
-
return t("tr", { onClick: () =>
|
|
2702
|
+
return t("tr", { onClick: () => $(o, i) }, g);
|
|
2734
2703
|
});
|
|
2735
|
-
return t("tbody",
|
|
2736
|
-
},
|
|
2737
|
-
a("row-click",
|
|
2704
|
+
return t("tbody", f);
|
|
2705
|
+
}, $ = (f, o) => {
|
|
2706
|
+
a("row-click", f, o);
|
|
2738
2707
|
};
|
|
2739
2708
|
return () => t("div", { class: n.value }, [t("table", { class: l.value }, [
|
|
2740
2709
|
e.caption && t("caption", e.caption),
|
|
2741
2710
|
w(),
|
|
2742
|
-
|
|
2711
|
+
c(),
|
|
2743
2712
|
S()
|
|
2744
2713
|
])]);
|
|
2745
2714
|
}
|
|
2746
|
-
}), Sa = ka, wa =
|
|
2715
|
+
}), Sa = ka, wa = M({
|
|
2747
2716
|
name: "KrdsHeader",
|
|
2748
2717
|
props: {
|
|
2749
2718
|
id: {
|
|
@@ -2775,7 +2744,7 @@ var _t = A({
|
|
|
2775
2744
|
}, n);
|
|
2776
2745
|
};
|
|
2777
2746
|
}
|
|
2778
|
-
}), Ka = wa, Ca =
|
|
2747
|
+
}), Ka = wa, Ca = M({
|
|
2779
2748
|
name: "KrdsFooter",
|
|
2780
2749
|
props: {
|
|
2781
2750
|
id: {
|
|
@@ -2791,18 +2760,18 @@ var _t = A({
|
|
|
2791
2760
|
const r = b(() => {
|
|
2792
2761
|
const h = [];
|
|
2793
2762
|
return e.class && h.push(e.class), h;
|
|
2794
|
-
}), 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,
|
|
2763
|
+
}), 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, d = () => a.bottom ? t("div", { class: "f-btm" }, a.bottom()) : null;
|
|
2795
2764
|
return () => {
|
|
2796
|
-
const h = l(),
|
|
2797
|
-
|
|
2765
|
+
const h = l(), v = n(), w = s(), c = d(), B = [];
|
|
2766
|
+
v && B.push(v), w && B.push(w), c && B.push(c);
|
|
2798
2767
|
const S = [];
|
|
2799
|
-
return h && S.push(h),
|
|
2768
|
+
return h && S.push(h), B.length > 0 && S.push(t("div", { class: "inner" }, B)), t("footer", {
|
|
2800
2769
|
id: e.id,
|
|
2801
2770
|
class: r.value
|
|
2802
2771
|
}, S);
|
|
2803
2772
|
};
|
|
2804
2773
|
}
|
|
2805
|
-
}), xa = Ca, $a =
|
|
2774
|
+
}), xa = Ca, $a = M({
|
|
2806
2775
|
name: "KrdsDisclosure",
|
|
2807
2776
|
props: {
|
|
2808
2777
|
title: {
|
|
@@ -2814,9 +2783,9 @@ var _t = A({
|
|
|
2814
2783
|
default: !1
|
|
2815
2784
|
}
|
|
2816
2785
|
},
|
|
2817
|
-
emits:
|
|
2786
|
+
emits: { "update:modelValue": (e) => !0 },
|
|
2818
2787
|
setup(e, { emit: a, slots: r }) {
|
|
2819
|
-
const l = `disclosure-${
|
|
2788
|
+
const l = `disclosure-${oe()}`, n = b(() => e.modelValue), s = () => {
|
|
2820
2789
|
a("update:modelValue", !e.modelValue);
|
|
2821
2790
|
};
|
|
2822
2791
|
return () => t("div", { class: [
|
|
@@ -2835,7 +2804,7 @@ var _t = A({
|
|
|
2835
2804
|
inert: !n.value
|
|
2836
2805
|
}, [t("div", { class: "expand-in" }, r.default?.())])]);
|
|
2837
2806
|
}
|
|
2838
|
-
}), La = $a, Da =
|
|
2807
|
+
}), La = $a, Da = M({
|
|
2839
2808
|
name: "KrdsIdentifier",
|
|
2840
2809
|
props: {
|
|
2841
2810
|
class: {
|
|
@@ -2847,7 +2816,7 @@ var _t = A({
|
|
|
2847
2816
|
default: "KRDS - Korea Design System"
|
|
2848
2817
|
}
|
|
2849
2818
|
},
|
|
2850
|
-
emits:
|
|
2819
|
+
emits: { click: (e) => !0 },
|
|
2851
2820
|
setup(e, { emit: a, slots: r }) {
|
|
2852
2821
|
const l = b(() => {
|
|
2853
2822
|
const s = ["krds-identifier"];
|
|
@@ -2860,7 +2829,7 @@ var _t = A({
|
|
|
2860
2829
|
onClick: n
|
|
2861
2830
|
}, [t("span", { class: "logo" }, [t("span", { class: "sr-only" }, e.logoLabel)]), t("span", { class: "ban-txt" }, r.default?.())]);
|
|
2862
2831
|
}
|
|
2863
|
-
}), Ba = Da,
|
|
2832
|
+
}), Ba = Da, Ta = 50, Ea = M({
|
|
2864
2833
|
name: "KrdsLayout",
|
|
2865
2834
|
props: {
|
|
2866
2835
|
id: {
|
|
@@ -2882,45 +2851,45 @@ var _t = A({
|
|
|
2882
2851
|
"scroll-height": (e) => !0
|
|
2883
2852
|
},
|
|
2884
2853
|
setup(e, { slots: a, emit: r }) {
|
|
2885
|
-
const l =
|
|
2886
|
-
const
|
|
2887
|
-
l.value = window.scrollY, n.value = document.body.scrollHeight,
|
|
2888
|
-
},
|
|
2854
|
+
const l = D(0), n = D(0), s = D(0), d = D(null), h = D(null), v = D(null), w = () => {
|
|
2855
|
+
const f = n.value;
|
|
2856
|
+
l.value = window.scrollY, n.value = document.body.scrollHeight, f !== n.value && f > 0 && r("scroll-height", n.value);
|
|
2857
|
+
}, c = () => {
|
|
2889
2858
|
if (!h.value || !e.enableScrollDetection) return;
|
|
2890
|
-
const
|
|
2891
|
-
if (!
|
|
2892
|
-
const o =
|
|
2893
|
-
i > o +
|
|
2894
|
-
},
|
|
2895
|
-
w(),
|
|
2859
|
+
const f = document.querySelector("#container");
|
|
2860
|
+
if (!f) return;
|
|
2861
|
+
const o = f.offsetTop, i = window.scrollY, g = i > s.value, m = i < s.value;
|
|
2862
|
+
i > o + Ta ? g ? (h.value.classList.add("scroll-down"), h.value.classList.remove("scroll-up"), d.value = "down") : m && (h.value.classList.add("scroll-up"), h.value.classList.remove("scroll-down"), d.value = "up") : (h.value.classList.remove("scroll-down", "scroll-up"), d.value = null), s.value = i;
|
|
2863
|
+
}, B = () => {
|
|
2864
|
+
w(), c(), r("scroll", {
|
|
2896
2865
|
scrollY: l.value,
|
|
2897
2866
|
scrollHeight: n.value,
|
|
2898
|
-
direction:
|
|
2867
|
+
direction: d.value,
|
|
2899
2868
|
timestamp: Date.now()
|
|
2900
2869
|
});
|
|
2901
|
-
}, S = (
|
|
2902
|
-
for (const o of
|
|
2903
|
-
const { width: i, height:
|
|
2870
|
+
}, S = (f) => {
|
|
2871
|
+
for (const o of f) {
|
|
2872
|
+
const { width: i, height: g } = o.contentRect;
|
|
2904
2873
|
r("resize", {
|
|
2905
2874
|
width: i,
|
|
2906
|
-
height:
|
|
2875
|
+
height: g
|
|
2907
2876
|
});
|
|
2908
2877
|
}
|
|
2909
|
-
},
|
|
2910
|
-
const
|
|
2911
|
-
return e.class &&
|
|
2878
|
+
}, $ = b(() => {
|
|
2879
|
+
const f = ["g-wrap"];
|
|
2880
|
+
return e.class && f.push(e.class), f;
|
|
2912
2881
|
});
|
|
2913
2882
|
return ie(() => {
|
|
2914
|
-
e.enableScrollDetection && (w(), window.addEventListener("scroll",
|
|
2883
|
+
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
2884
|
}), re(() => {
|
|
2916
|
-
e.enableScrollDetection && window.removeEventListener("scroll",
|
|
2885
|
+
e.enableScrollDetection && window.removeEventListener("scroll", B), v.value && (v.value.disconnect(), v.value = null);
|
|
2917
2886
|
}), () => t("div", {
|
|
2918
2887
|
id: e.id,
|
|
2919
|
-
class:
|
|
2888
|
+
class: $.value,
|
|
2920
2889
|
ref: h
|
|
2921
2890
|
}, a.default?.());
|
|
2922
2891
|
}
|
|
2923
|
-
}), _a =
|
|
2892
|
+
}), _a = Ea, Aa = M({
|
|
2924
2893
|
name: "KrdsSideNavigation",
|
|
2925
2894
|
props: {
|
|
2926
2895
|
title: {
|
|
@@ -2932,63 +2901,63 @@ var _t = A({
|
|
|
2932
2901
|
default: () => []
|
|
2933
2902
|
}
|
|
2934
2903
|
},
|
|
2935
|
-
emits:
|
|
2904
|
+
emits: { "update:modelValue": (e) => !0 },
|
|
2936
2905
|
setup(e, { emit: a }) {
|
|
2937
|
-
const r = b(() => e.modelValue || []), l =
|
|
2938
|
-
const
|
|
2939
|
-
|
|
2940
|
-
},
|
|
2941
|
-
const
|
|
2942
|
-
|
|
2943
|
-
}, w = (
|
|
2944
|
-
const
|
|
2945
|
-
|
|
2946
|
-
},
|
|
2906
|
+
const r = b(() => e.modelValue || []), l = D(/* @__PURE__ */ new Map()), n = D(/* @__PURE__ */ new Map()), s = D(/* @__PURE__ */ new Map()), d = D(null), h = (x, C, E) => {
|
|
2907
|
+
const T = `${C}-${E}`;
|
|
2908
|
+
x ? l.value.set(T, x) : l.value.delete(T);
|
|
2909
|
+
}, v = (x, C, E) => {
|
|
2910
|
+
const T = `${C}-${E}`;
|
|
2911
|
+
x ? n.value.set(T, x) : n.value.delete(T);
|
|
2912
|
+
}, w = (x, C, E) => {
|
|
2913
|
+
const T = `${C}-${E}`;
|
|
2914
|
+
x ? s.value.set(T, x) : s.value.delete(T);
|
|
2915
|
+
}, c = (x) => {
|
|
2947
2916
|
a("update:modelValue", r.value.map((C, E) => {
|
|
2948
|
-
if (E ===
|
|
2949
|
-
const
|
|
2917
|
+
if (E === x && C.subItems) {
|
|
2918
|
+
const T = C.expanded, _ = {
|
|
2950
2919
|
...C,
|
|
2951
2920
|
expanded: !C.expanded
|
|
2952
2921
|
};
|
|
2953
|
-
return
|
|
2954
|
-
...
|
|
2922
|
+
return T && !_.expanded && (_.subItems = C.subItems.map((p) => ({
|
|
2923
|
+
...p,
|
|
2955
2924
|
expanded: !1
|
|
2956
|
-
})),
|
|
2925
|
+
})), d.value = null), _;
|
|
2957
2926
|
}
|
|
2958
2927
|
return C;
|
|
2959
2928
|
}));
|
|
2960
|
-
},
|
|
2961
|
-
a("update:modelValue", r.value.map((E,
|
|
2929
|
+
}, B = (x, C) => {
|
|
2930
|
+
a("update:modelValue", r.value.map((E, T) => T === x && E.subItems ? {
|
|
2962
2931
|
...E,
|
|
2963
|
-
subItems: E.subItems.map((_,
|
|
2964
|
-
if (
|
|
2965
|
-
const
|
|
2932
|
+
subItems: E.subItems.map((_, p) => {
|
|
2933
|
+
if (p === C && _.subItems) {
|
|
2934
|
+
const A = {
|
|
2966
2935
|
..._,
|
|
2967
2936
|
expanded: !_.expanded
|
|
2968
2937
|
};
|
|
2969
|
-
if (
|
|
2970
|
-
const I = `${
|
|
2971
|
-
|
|
2972
|
-
const
|
|
2973
|
-
|
|
2938
|
+
if (A.expanded) {
|
|
2939
|
+
const I = `${x}-${C}`;
|
|
2940
|
+
d.value = l.value.get(I) || null;
|
|
2941
|
+
const O = n.value.get(I), H = s.value.get(I);
|
|
2942
|
+
O && H && O.addEventListener("transitionend", () => {
|
|
2974
2943
|
H.focus();
|
|
2975
2944
|
}, { once: !0 });
|
|
2976
2945
|
}
|
|
2977
|
-
return
|
|
2946
|
+
return A;
|
|
2978
2947
|
}
|
|
2979
2948
|
return _;
|
|
2980
2949
|
})
|
|
2981
2950
|
} : E));
|
|
2982
|
-
}, S = (
|
|
2983
|
-
a("update:modelValue", r.value.map((E,
|
|
2951
|
+
}, S = (x, C) => {
|
|
2952
|
+
a("update:modelValue", r.value.map((E, T) => T === x && E.subItems ? {
|
|
2984
2953
|
...E,
|
|
2985
|
-
subItems: E.subItems.map((_,
|
|
2986
|
-
if (
|
|
2987
|
-
if (
|
|
2988
|
-
const
|
|
2954
|
+
subItems: E.subItems.map((_, p) => {
|
|
2955
|
+
if (p === C && _.subItems && _.expanded) {
|
|
2956
|
+
if (d.value) {
|
|
2957
|
+
const A = d.value;
|
|
2989
2958
|
requestAnimationFrame(() => {
|
|
2990
|
-
|
|
2991
|
-
}),
|
|
2959
|
+
A.focus();
|
|
2960
|
+
}), d.value = null;
|
|
2992
2961
|
}
|
|
2993
2962
|
return {
|
|
2994
2963
|
..._,
|
|
@@ -2998,78 +2967,78 @@ var _t = A({
|
|
|
2998
2967
|
return _;
|
|
2999
2968
|
})
|
|
3000
2969
|
} : E));
|
|
3001
|
-
},
|
|
3002
|
-
const
|
|
3003
|
-
_ && !_.contains(
|
|
3004
|
-
},
|
|
3005
|
-
S(
|
|
3006
|
-
}, o = (
|
|
3007
|
-
|
|
3008
|
-
}, i = (
|
|
2970
|
+
}, $ = (x, C, E) => {
|
|
2971
|
+
const T = `${C}-${E}`, _ = n.value.get(T);
|
|
2972
|
+
_ && !_.contains(x.relatedTarget) && S(C, E);
|
|
2973
|
+
}, f = (x, C) => {
|
|
2974
|
+
S(x, C);
|
|
2975
|
+
}, o = (x, C) => {
|
|
2976
|
+
x.onClick && x.onClick(C);
|
|
2977
|
+
}, i = (x, C, E) => x.map((T, _) => t("li", {
|
|
3009
2978
|
key: `popup-item-${C}-${E}-${_}`,
|
|
3010
2979
|
role: "none"
|
|
3011
2980
|
}, t("a", {
|
|
3012
|
-
href:
|
|
2981
|
+
href: T.href || "#",
|
|
3013
2982
|
class: "lnb-btn",
|
|
3014
2983
|
role: "menuitem",
|
|
3015
|
-
onClick: (
|
|
3016
|
-
},
|
|
3017
|
-
const _ = `lnb-subitem-${C}-${
|
|
2984
|
+
onClick: (p) => o(T, p)
|
|
2985
|
+
}, T.text))), g = (x, C) => x.map((E, T) => {
|
|
2986
|
+
const _ = `lnb-subitem-${C}-${T}`;
|
|
3018
2987
|
return t("li", {
|
|
3019
2988
|
key: _,
|
|
3020
2989
|
class: ["lnb-subitem", { active: E.expanded }],
|
|
3021
2990
|
role: "none"
|
|
3022
2991
|
}, [E.subItems ? [t("button", {
|
|
3023
|
-
ref: (
|
|
2992
|
+
ref: (p) => h(p, C, T),
|
|
3024
2993
|
type: "button",
|
|
3025
2994
|
class: "lnb-btn lnb-toggle-popup",
|
|
3026
2995
|
role: "menuitem",
|
|
3027
|
-
"aria-controls": `lnbmenu-${C}-${
|
|
2996
|
+
"aria-controls": `lnbmenu-${C}-${T}`,
|
|
3028
2997
|
"aria-expanded": E.expanded ? "true" : "false",
|
|
3029
2998
|
"aria-haspopup": "true",
|
|
3030
|
-
onClick: () =>
|
|
2999
|
+
onClick: () => B(C, T)
|
|
3031
3000
|
}, E.text), t("div", {
|
|
3032
|
-
ref: (
|
|
3033
|
-
id: `lnbmenu-${C}-${
|
|
3001
|
+
ref: (p) => v(p, C, T),
|
|
3002
|
+
id: `lnbmenu-${C}-${T}`,
|
|
3034
3003
|
class: ["lnb-submenu-lv2", { active: E.expanded }],
|
|
3035
3004
|
role: "menu",
|
|
3036
|
-
onFocusout: (
|
|
3005
|
+
onFocusout: (p) => $(p, C, T)
|
|
3037
3006
|
}, [t("button", {
|
|
3038
|
-
ref: (
|
|
3007
|
+
ref: (p) => w(p, C, T),
|
|
3039
3008
|
type: "button",
|
|
3040
3009
|
class: "lnb-btn-tit",
|
|
3041
|
-
onClick: () =>
|
|
3042
|
-
}, E.popupTitle || E.text), t("ul", {}, i(E.subItems || [], C,
|
|
3010
|
+
onClick: () => f(C, T)
|
|
3011
|
+
}, E.popupTitle || E.text), t("ul", {}, i(E.subItems || [], C, T))])] : t("a", {
|
|
3043
3012
|
href: E.href || "#",
|
|
3044
3013
|
class: ["lnb-btn", "lnb-link"],
|
|
3045
3014
|
role: "menuitem",
|
|
3046
|
-
onClick: (
|
|
3015
|
+
onClick: (p) => o(E, p)
|
|
3047
3016
|
}, E.text)]);
|
|
3048
|
-
}),
|
|
3017
|
+
}), m = () => r.value.map((x, C) => t("li", {
|
|
3049
3018
|
key: `lnb-item-${C}`,
|
|
3050
|
-
class: ["lnb-item", { active:
|
|
3019
|
+
class: ["lnb-item", { active: x.expanded }],
|
|
3051
3020
|
role: "none"
|
|
3052
3021
|
}, [t("button", {
|
|
3053
3022
|
type: "button",
|
|
3054
3023
|
class: [
|
|
3055
3024
|
"lnb-btn",
|
|
3056
3025
|
"lnb-toggle",
|
|
3057
|
-
{ active:
|
|
3026
|
+
{ active: x.expanded }
|
|
3058
3027
|
],
|
|
3059
3028
|
role: "menuitem",
|
|
3060
3029
|
"aria-controls": `lnbmenu-${C}`,
|
|
3061
|
-
"aria-expanded":
|
|
3062
|
-
onClick: () =>
|
|
3063
|
-
},
|
|
3030
|
+
"aria-expanded": x.expanded ? "true" : "false",
|
|
3031
|
+
onClick: () => c(C)
|
|
3032
|
+
}, x.text), x.subItems ? t("div", { class: "lnb-submenu" }, [t("ul", {
|
|
3064
3033
|
id: `lnbmenu-${C}`,
|
|
3065
3034
|
role: "menu"
|
|
3066
|
-
},
|
|
3035
|
+
}, g(x.subItems, C))]) : null]));
|
|
3067
3036
|
return () => t("nav", { class: "krds-side-navigation" }, [t("h2", { class: "lnb-tit" }, e.title), t("ul", {
|
|
3068
3037
|
class: "lnb-list",
|
|
3069
3038
|
role: "menubar"
|
|
3070
|
-
},
|
|
3039
|
+
}, m())]);
|
|
3071
3040
|
}
|
|
3072
|
-
}),
|
|
3041
|
+
}), Ma = Aa, Va = M({
|
|
3073
3042
|
name: "KrdsStructuredList",
|
|
3074
3043
|
props: { full: {
|
|
3075
3044
|
type: Boolean,
|
|
@@ -3078,16 +3047,16 @@ var _t = A({
|
|
|
3078
3047
|
slots: Object,
|
|
3079
3048
|
setup(e, { slots: a }) {
|
|
3080
3049
|
return () => {
|
|
3081
|
-
const r = a.cardTop?.(), l = a.cardBody?.(), n = a.cardBtm?.(), s = a.cardBtn?.(),
|
|
3050
|
+
const r = a.cardTop?.(), l = a.cardBody?.(), n = a.cardBtm?.(), s = a.cardBtn?.(), d = t("li", { class: "structured-item" }, [t("div", { class: "in" }, [
|
|
3082
3051
|
r && t("div", { class: "card-top" }, r),
|
|
3083
3052
|
l && t("div", { class: "card-body" }, l),
|
|
3084
3053
|
n && t("div", { class: "card-btm" }, n),
|
|
3085
3054
|
s && t("div", { class: "card-btn" }, s)
|
|
3086
3055
|
].filter(Boolean))]);
|
|
3087
|
-
return t("ul", { class: ["krds-structured-list", e.full ? "type-full" : ""] }, [
|
|
3056
|
+
return t("ul", { class: ["krds-structured-list", e.full ? "type-full" : ""] }, [d]);
|
|
3088
3057
|
};
|
|
3089
3058
|
}
|
|
3090
|
-
}), Pa = Va, za =
|
|
3059
|
+
}), Pa = Va, za = M({
|
|
3091
3060
|
name: "KrdsTextList",
|
|
3092
3061
|
props: {
|
|
3093
3062
|
type: {
|
|
@@ -3102,7 +3071,7 @@ var _t = A({
|
|
|
3102
3071
|
setup(e, { slots: a }) {
|
|
3103
3072
|
return () => t(e.type, { class: ["krds-info-list", e.variant] }, a.default?.());
|
|
3104
3073
|
}
|
|
3105
|
-
}), Fa = za, Ra =
|
|
3074
|
+
}), Fa = za, Ra = M({
|
|
3106
3075
|
name: "KrdsCriticalAlerts",
|
|
3107
3076
|
props: {
|
|
3108
3077
|
type: {
|
|
@@ -3122,7 +3091,7 @@ var _t = A({
|
|
|
3122
3091
|
default: "자세히 보기"
|
|
3123
3092
|
}
|
|
3124
3093
|
},
|
|
3125
|
-
emits:
|
|
3094
|
+
emits: { "link-click": (e) => !0 },
|
|
3126
3095
|
setup(e, { emit: a }) {
|
|
3127
3096
|
const r = (n) => ({
|
|
3128
3097
|
danger: "긴급",
|
|
@@ -3141,7 +3110,7 @@ var _t = A({
|
|
|
3141
3110
|
}, [t("span", { class: "m-hide" }, e.linkText), t("i", { class: "svg-icon ico-angle right" })])
|
|
3142
3111
|
])])]);
|
|
3143
3112
|
}
|
|
3144
|
-
}), Ia = Ra, Ha = "새 창 열림",
|
|
3113
|
+
}), 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
3114
|
name: "KrdsMainMenu",
|
|
3146
3115
|
props: {
|
|
3147
3116
|
items: {
|
|
@@ -3173,166 +3142,166 @@ var _t = A({
|
|
|
3173
3142
|
default: "전체메뉴 닫기"
|
|
3174
3143
|
}
|
|
3175
3144
|
},
|
|
3176
|
-
emits:
|
|
3177
|
-
"update:open",
|
|
3178
|
-
"menu-toggle",
|
|
3179
|
-
"item-click"
|
|
3180
|
-
|
|
3145
|
+
emits: {
|
|
3146
|
+
"update:open": (e) => !0,
|
|
3147
|
+
"menu-toggle": (e, a) => !0,
|
|
3148
|
+
"item-click": (e, a) => !0
|
|
3149
|
+
},
|
|
3181
3150
|
slots: Object,
|
|
3182
3151
|
setup(e, { emit: a, slots: r }) {
|
|
3183
|
-
const l =
|
|
3152
|
+
const l = oe(), n = D(null), s = D(null), d = D(null), h = b(() => e.variant === "pc"), v = (u) => `${l}-gnb-panel-${u}`, w = (u, y) => `${l}-gnb-sub-${u}-${y}`, c = (u) => `${l}-gnb-tab-${u}`, B = (u, y) => `${l}-gnb-depth3-${u}-${y}`, S = (u) => !!u?.subItems?.length, $ = (u) => !S(u) && !!u?.items?.length, f = (u) => S(u) || $(u), o = (u) => !u.items?.length, i = (u) => u ? {
|
|
3184
3153
|
target: "_blank",
|
|
3185
3154
|
rel: "noopener noreferrer",
|
|
3186
3155
|
title: Ha
|
|
3187
|
-
} : {},
|
|
3188
|
-
|
|
3189
|
-
},
|
|
3190
|
-
|
|
3191
|
-
},
|
|
3192
|
-
const
|
|
3193
|
-
return
|
|
3194
|
-
},
|
|
3195
|
-
const
|
|
3196
|
-
return
|
|
3197
|
-
}, I = (
|
|
3156
|
+
} : {}, g = (u, y) => {
|
|
3157
|
+
u.onClick?.(y), a("item-click", u, y);
|
|
3158
|
+
}, m = D(-1), x = D({}), C = D(0), E = /* @__PURE__ */ new Map(), T = /* @__PURE__ */ new Map(), _ = (u, y, K) => {
|
|
3159
|
+
y ? u.set(K, y) : u.delete(K);
|
|
3160
|
+
}, p = (u) => {
|
|
3161
|
+
const y = u?.subItems?.findIndex((K) => !o(K));
|
|
3162
|
+
return y === void 0 ? -1 : y;
|
|
3163
|
+
}, A = (u) => {
|
|
3164
|
+
const y = x.value[u];
|
|
3165
|
+
return y === void 0 ? p(e.items[u]) : y;
|
|
3166
|
+
}, I = (u) => {
|
|
3198
3167
|
if (typeof document > "u") return;
|
|
3199
|
-
document.body.classList.toggle("is-gnb-web",
|
|
3200
|
-
const
|
|
3201
|
-
document.body.classList.toggle("hasScrollY",
|
|
3202
|
-
},
|
|
3168
|
+
document.body.classList.toggle("is-gnb-web", u);
|
|
3169
|
+
const y = document.body.scrollHeight > window.innerHeight;
|
|
3170
|
+
document.body.classList.toggle("hasScrollY", u && y);
|
|
3171
|
+
}, O = async () => {
|
|
3203
3172
|
await ce();
|
|
3204
|
-
const
|
|
3205
|
-
C.value =
|
|
3206
|
-
}, H = (
|
|
3207
|
-
if (
|
|
3208
|
-
const
|
|
3209
|
-
|
|
3210
|
-
}, G = (
|
|
3211
|
-
if (
|
|
3212
|
-
if (
|
|
3173
|
+
const u = E.get(m.value)?.querySelector(".gnb-sub-list.active");
|
|
3174
|
+
C.value = u?.scrollHeight ?? 0;
|
|
3175
|
+
}, H = (u = !1) => {
|
|
3176
|
+
if (m.value === -1) return;
|
|
3177
|
+
const y = m.value;
|
|
3178
|
+
m.value = -1, C.value = 0, I(!1), a("menu-toggle", y, !1), u && T.get(y)?.focus();
|
|
3179
|
+
}, G = (u) => {
|
|
3180
|
+
if (f(e.items[u])) {
|
|
3181
|
+
if (m.value === u) {
|
|
3213
3182
|
H();
|
|
3214
3183
|
return;
|
|
3215
3184
|
}
|
|
3216
|
-
|
|
3185
|
+
m.value = u, I(!0), a("menu-toggle", u, !0), O();
|
|
3217
3186
|
}
|
|
3218
|
-
}, j = (
|
|
3219
|
-
|
|
3220
|
-
|
|
3221
|
-
[
|
|
3222
|
-
},
|
|
3223
|
-
}, X = (
|
|
3224
|
-
const
|
|
3225
|
-
!
|
|
3226
|
-
}, le = (
|
|
3227
|
-
const
|
|
3228
|
-
!
|
|
3229
|
-
},
|
|
3230
|
-
if (
|
|
3187
|
+
}, j = (u, y) => {
|
|
3188
|
+
x.value = {
|
|
3189
|
+
...x.value,
|
|
3190
|
+
[u]: y
|
|
3191
|
+
}, O();
|
|
3192
|
+
}, X = (u) => {
|
|
3193
|
+
const y = n.value;
|
|
3194
|
+
!y || y.contains(u.target) || H();
|
|
3195
|
+
}, le = (u) => {
|
|
3196
|
+
const y = n.value, K = u.relatedTarget;
|
|
3197
|
+
!y || !K || y.contains(K) || H();
|
|
3198
|
+
}, de = (u) => {
|
|
3199
|
+
if (u.key === "Escape") {
|
|
3231
3200
|
H(!0);
|
|
3232
3201
|
return;
|
|
3233
3202
|
}
|
|
3234
|
-
const
|
|
3235
|
-
if (!
|
|
3203
|
+
const y = u.target;
|
|
3204
|
+
if (!y?.dataset.trigger) return;
|
|
3236
3205
|
const K = (k) => {
|
|
3237
|
-
const P =
|
|
3206
|
+
const P = y.closest("li");
|
|
3238
3207
|
(k === "next" ? P?.nextElementSibling : P?.previousElementSibling)?.querySelector("[data-trigger]")?.focus();
|
|
3239
3208
|
};
|
|
3240
|
-
switch (
|
|
3209
|
+
switch (u.key) {
|
|
3241
3210
|
case "Home":
|
|
3242
|
-
|
|
3211
|
+
u.preventDefault(), T.get(0)?.focus();
|
|
3243
3212
|
break;
|
|
3244
3213
|
case "End":
|
|
3245
|
-
|
|
3214
|
+
u.preventDefault(), T.get(e.items.length - 1)?.focus();
|
|
3246
3215
|
break;
|
|
3247
3216
|
case "ArrowRight":
|
|
3248
3217
|
case "ArrowDown":
|
|
3249
|
-
|
|
3218
|
+
u.preventDefault(), K("next");
|
|
3250
3219
|
break;
|
|
3251
3220
|
case "ArrowLeft":
|
|
3252
3221
|
case "ArrowUp":
|
|
3253
|
-
|
|
3222
|
+
u.preventDefault(), K("prev");
|
|
3254
3223
|
}
|
|
3255
|
-
}, ae =
|
|
3256
|
-
|
|
3224
|
+
}, 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 = (u, y, K) => {
|
|
3225
|
+
y ? u.set(K, y) : u.delete(K);
|
|
3257
3226
|
};
|
|
3258
3227
|
let J, ee;
|
|
3259
|
-
const
|
|
3260
|
-
typeof document > "u" || document.body.classList.toggle("is-gnb-mobile",
|
|
3261
|
-
},
|
|
3228
|
+
const ue = (u) => {
|
|
3229
|
+
typeof document > "u" || document.body.classList.toggle("is-gnb-mobile", u);
|
|
3230
|
+
}, Ee = () => {
|
|
3262
3231
|
ee && clearTimeout(ee), R.value = !0, J = setTimeout(() => {
|
|
3263
|
-
Y.value = !0,
|
|
3264
|
-
},
|
|
3232
|
+
Y.value = !0, ue(!0), s.value?.focus();
|
|
3233
|
+
}, Na);
|
|
3265
3234
|
}, _e = () => {
|
|
3266
3235
|
J && clearTimeout(J), Y.value = !1, ee = setTimeout(() => {
|
|
3267
|
-
R.value = !1,
|
|
3236
|
+
R.value = !1, ue(!1);
|
|
3268
3237
|
}, we);
|
|
3269
3238
|
};
|
|
3270
|
-
se(() => e.open, (
|
|
3271
|
-
|
|
3239
|
+
se(() => e.open, (u) => {
|
|
3240
|
+
u ? Ee() : _e();
|
|
3272
3241
|
});
|
|
3273
|
-
const
|
|
3274
|
-
|
|
3275
|
-
const K =
|
|
3242
|
+
const Ae = (u, y) => {
|
|
3243
|
+
u.preventDefault(), ae.value = y;
|
|
3244
|
+
const K = d.value, k = V.get(y);
|
|
3276
3245
|
K && k && K.scrollTo({
|
|
3277
3246
|
left: 0,
|
|
3278
3247
|
top: k.offsetTop,
|
|
3279
3248
|
behavior: "smooth"
|
|
3280
3249
|
});
|
|
3281
|
-
},
|
|
3282
|
-
const
|
|
3283
|
-
if (!
|
|
3284
|
-
const { scrollTop:
|
|
3250
|
+
}, Me = () => {
|
|
3251
|
+
const u = d.value;
|
|
3252
|
+
if (!u) return;
|
|
3253
|
+
const { scrollTop: y, scrollHeight: K, clientHeight: k } = u;
|
|
3285
3254
|
let P = ae.value;
|
|
3286
3255
|
V.forEach((q, W) => {
|
|
3287
|
-
(
|
|
3256
|
+
(y >= q.offsetTop || y + k >= K) && (P = W);
|
|
3288
3257
|
}), ae.value = P;
|
|
3289
|
-
}, Ve = (
|
|
3290
|
-
|
|
3258
|
+
}, Ve = (u, y) => {
|
|
3259
|
+
u.preventDefault(), Q.value = {
|
|
3291
3260
|
...Q.value,
|
|
3292
|
-
[
|
|
3261
|
+
[y]: !Q.value[y]
|
|
3293
3262
|
};
|
|
3294
|
-
}, Pe = async (
|
|
3295
|
-
|
|
3296
|
-
}, ye = (
|
|
3297
|
-
L.value = null, F.get(
|
|
3263
|
+
}, Pe = async (u, y) => {
|
|
3264
|
+
u.preventDefault(), ne.value = y, await ce(), L.value = y, await ce(), N.get(y)?.focus();
|
|
3265
|
+
}, ye = (u) => {
|
|
3266
|
+
L.value = null, F.get(u)?.focus(), setTimeout(() => {
|
|
3298
3267
|
L.value || (ne.value = null);
|
|
3299
3268
|
}, we);
|
|
3300
|
-
}, ze = (
|
|
3301
|
-
const K = Array.from(
|
|
3269
|
+
}, ze = (u, y) => {
|
|
3270
|
+
const K = Array.from(u.querySelectorAll(Oa));
|
|
3302
3271
|
if (!K.length) return;
|
|
3303
3272
|
const k = K[0], P = K[K.length - 1], q = document.activeElement;
|
|
3304
|
-
|
|
3305
|
-
}, Fe = (
|
|
3306
|
-
if (
|
|
3273
|
+
y.shiftKey && (q === k || q === u) ? (y.preventDefault(), P.focus()) : !y.shiftKey && q === P && (y.preventDefault(), k.focus());
|
|
3274
|
+
}, Fe = (u) => {
|
|
3275
|
+
if (u.key === "Escape") {
|
|
3307
3276
|
L.value ? ye(L.value) : a("update:open", !1);
|
|
3308
3277
|
return;
|
|
3309
3278
|
}
|
|
3310
|
-
if (
|
|
3311
|
-
const
|
|
3312
|
-
|
|
3279
|
+
if (u.key !== "Tab") return;
|
|
3280
|
+
const y = L.value ? z.get(L.value) : s.value;
|
|
3281
|
+
y && ze(y, u);
|
|
3313
3282
|
};
|
|
3314
3283
|
ie(() => {
|
|
3315
3284
|
if (h.value) {
|
|
3316
3285
|
document.addEventListener("click", X);
|
|
3317
3286
|
return;
|
|
3318
3287
|
}
|
|
3319
|
-
e.open && (R.value = !0, Y.value = !0,
|
|
3320
|
-
const
|
|
3321
|
-
e.items.forEach((
|
|
3322
|
-
|
|
3323
|
-
k.expanded && (
|
|
3288
|
+
e.open && (R.value = !0, Y.value = !0, ue(!0));
|
|
3289
|
+
const u = {};
|
|
3290
|
+
e.items.forEach((y, K) => {
|
|
3291
|
+
y.subItems?.forEach((k, P) => {
|
|
3292
|
+
k.expanded && (u[`${K}-${P}`] = !0);
|
|
3324
3293
|
});
|
|
3325
|
-
}), Q.value =
|
|
3294
|
+
}), Q.value = u;
|
|
3326
3295
|
}), fe(() => {
|
|
3327
3296
|
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
3297
|
});
|
|
3329
|
-
const Re = (
|
|
3330
|
-
const
|
|
3298
|
+
const Re = (u) => {
|
|
3299
|
+
const y = u.some((k) => !!k.description), K = u.map((k, P) => {
|
|
3331
3300
|
const q = i(k.external), W = k.external ? t("i", { class: "svg-icon ico-go" }) : null;
|
|
3332
|
-
if (
|
|
3301
|
+
if (y) return t("li", { key: `link-${P}` }, [t("h3", { class: "tit" }, [t("a", {
|
|
3333
3302
|
href: k.href || "#",
|
|
3334
3303
|
...q,
|
|
3335
|
-
onClick: (te) =>
|
|
3304
|
+
onClick: (te) => g(k, te)
|
|
3336
3305
|
}, [k.text, W])]), k.description ? t("p", { class: "txt" }, k.description) : null]);
|
|
3337
3306
|
const Z = k.href ? "a" : "button";
|
|
3338
3307
|
return t("li", { key: `link-${P}` }, [t(Z, {
|
|
@@ -3341,24 +3310,24 @@ var _t = A({
|
|
|
3341
3310
|
...q
|
|
3342
3311
|
} : { type: "button" },
|
|
3343
3312
|
class: { active: k.selected },
|
|
3344
|
-
onClick: (te) =>
|
|
3313
|
+
onClick: (te) => g(k, te)
|
|
3345
3314
|
}, [k.text, W])]);
|
|
3346
3315
|
});
|
|
3347
|
-
return t("ul", { class:
|
|
3348
|
-
}, me = (
|
|
3349
|
-
const
|
|
3350
|
-
href:
|
|
3316
|
+
return t("ul", { class: y ? "type-description" : void 0 }, K);
|
|
3317
|
+
}, me = (u) => {
|
|
3318
|
+
const y = u.titleLink ? [u.title, t("a", {
|
|
3319
|
+
href: u.titleLink.href,
|
|
3351
3320
|
class: "krds-btn link basic small"
|
|
3352
|
-
}, [t("span", { class: "underline" },
|
|
3321
|
+
}, [t("span", { class: "underline" }, u.titleLink.text || "바로가기"), t("i", { class: "svg-icon ico-angle right" })])] : [t("span", u.title)];
|
|
3353
3322
|
return t("div", {
|
|
3354
|
-
id:
|
|
3323
|
+
id: u.id,
|
|
3355
3324
|
class: ["gnb-sub-list", {
|
|
3356
|
-
active:
|
|
3357
|
-
between:
|
|
3358
|
-
"single-list":
|
|
3325
|
+
active: u.active,
|
|
3326
|
+
between: u.layout === "between",
|
|
3327
|
+
"single-list": u.single
|
|
3359
3328
|
}]
|
|
3360
|
-
}, [t("div", { class: "gnb-sub-content" }, [t("h2", { class: "sub-title" },
|
|
3361
|
-
}, Ie = (
|
|
3329
|
+
}, [t("div", { class: "gnb-sub-content" }, [t("h2", { class: "sub-title" }, y), Re(u.linkItems)]), u.banner]);
|
|
3330
|
+
}, Ie = (u, y) => (u.subItems ?? []).map((K, k) => {
|
|
3362
3331
|
if (o(K)) {
|
|
3363
3332
|
const W = K.href ? "a" : "button";
|
|
3364
3333
|
return t("li", { key: `sub-${k}` }, [t(W, {
|
|
@@ -3375,13 +3344,13 @@ var _t = A({
|
|
|
3375
3344
|
}
|
|
3376
3345
|
],
|
|
3377
3346
|
"data-trigger": "gnb",
|
|
3378
|
-
onClick: (Z) =>
|
|
3347
|
+
onClick: (Z) => g(K, Z)
|
|
3379
3348
|
}, K.text)]);
|
|
3380
3349
|
}
|
|
3381
|
-
const P =
|
|
3382
|
-
item:
|
|
3350
|
+
const P = A(y) === k, q = K.banner && r.banner ? t("div", { class: "gnb-sub-banner" }, r.banner({
|
|
3351
|
+
item: u,
|
|
3383
3352
|
subItem: K,
|
|
3384
|
-
index:
|
|
3353
|
+
index: y,
|
|
3385
3354
|
subIndex: k
|
|
3386
3355
|
})) : null;
|
|
3387
3356
|
return t("li", { key: `sub-${k}` }, [t("button", {
|
|
@@ -3391,14 +3360,14 @@ var _t = A({
|
|
|
3391
3360
|
selected: K.selected
|
|
3392
3361
|
}],
|
|
3393
3362
|
"data-trigger": "gnb",
|
|
3394
|
-
"aria-controls": w(
|
|
3363
|
+
"aria-controls": w(y, k),
|
|
3395
3364
|
"aria-expanded": P ? "true" : "false",
|
|
3396
3365
|
"aria-haspopup": "true",
|
|
3397
3366
|
onClick: (W) => {
|
|
3398
|
-
j(
|
|
3367
|
+
j(y, k), g(K, W);
|
|
3399
3368
|
}
|
|
3400
3369
|
}, K.text), me({
|
|
3401
|
-
id: w(
|
|
3370
|
+
id: w(y, k),
|
|
3402
3371
|
title: K.title || K.text,
|
|
3403
3372
|
titleLink: K.titleLink,
|
|
3404
3373
|
linkItems: K.items ?? [],
|
|
@@ -3406,31 +3375,31 @@ var _t = A({
|
|
|
3406
3375
|
active: P,
|
|
3407
3376
|
banner: q
|
|
3408
3377
|
})]);
|
|
3409
|
-
}), He = (
|
|
3410
|
-
const K =
|
|
3411
|
-
title:
|
|
3412
|
-
linkItems:
|
|
3413
|
-
layout:
|
|
3378
|
+
}), He = (u, y) => {
|
|
3379
|
+
const K = m.value === y, k = S(u), P = k ? [t("ul", {}, Ie(u, y))] : [me({
|
|
3380
|
+
title: u.title || u.text,
|
|
3381
|
+
linkItems: u.items ?? [],
|
|
3382
|
+
layout: u.layout,
|
|
3414
3383
|
single: !0,
|
|
3415
|
-
banner:
|
|
3416
|
-
item:
|
|
3417
|
-
index:
|
|
3384
|
+
banner: u.banner && r.banner ? t("div", { class: "gnb-sub-banner" }, r.banner({
|
|
3385
|
+
item: u,
|
|
3386
|
+
index: y,
|
|
3418
3387
|
subIndex: -1
|
|
3419
3388
|
})) : null
|
|
3420
3389
|
})];
|
|
3421
3390
|
return t("div", {
|
|
3422
|
-
id:
|
|
3391
|
+
id: v(y),
|
|
3423
3392
|
class: ["gnb-toggle-wrap", { "is-open": K }]
|
|
3424
3393
|
}, [t("div", {
|
|
3425
|
-
ref: (q) => _(E, q,
|
|
3394
|
+
ref: (q) => _(E, q, y),
|
|
3426
3395
|
class: "gnb-main-list",
|
|
3427
3396
|
...k ? { "data-has-submenu": "true" } : {},
|
|
3428
3397
|
style: K && C.value ? { minHeight: `${C.value}px` } : void 0
|
|
3429
3398
|
}, P)]);
|
|
3430
|
-
},
|
|
3431
|
-
const
|
|
3432
|
-
const P =
|
|
3433
|
-
ref: (te) => _(
|
|
3399
|
+
}, Ne = () => {
|
|
3400
|
+
const u = e.items.map((K, k) => {
|
|
3401
|
+
const P = f(K), q = m.value === k, W = !P && K.href ? "a" : "button", Z = t(W, {
|
|
3402
|
+
ref: (te) => _(T, te, k),
|
|
3434
3403
|
...W === "a" ? {
|
|
3435
3404
|
href: K.href,
|
|
3436
3405
|
...i(K.external)
|
|
@@ -3442,16 +3411,16 @@ var _t = A({
|
|
|
3442
3411
|
}],
|
|
3443
3412
|
"data-trigger": "gnb",
|
|
3444
3413
|
...P ? {
|
|
3445
|
-
"aria-controls":
|
|
3414
|
+
"aria-controls": v(k),
|
|
3446
3415
|
"aria-expanded": q ? "true" : "false",
|
|
3447
3416
|
"aria-haspopup": "true"
|
|
3448
3417
|
} : {},
|
|
3449
3418
|
onClick: (te) => {
|
|
3450
|
-
P && G(k),
|
|
3419
|
+
P && G(k), g(K, te);
|
|
3451
3420
|
}
|
|
3452
3421
|
}, K.text);
|
|
3453
3422
|
return t("li", { key: `main-${k}` }, [Z, P ? He(K, k) : null]);
|
|
3454
|
-
}),
|
|
3423
|
+
}), y = e.backdrop && m.value !== -1 ? t(Ce, { to: "body" }, [t("div", {
|
|
3455
3424
|
class: "gnb-backdrop active",
|
|
3456
3425
|
"aria-hidden": "true"
|
|
3457
3426
|
})]) : null;
|
|
@@ -3459,20 +3428,20 @@ var _t = A({
|
|
|
3459
3428
|
ref: n,
|
|
3460
3429
|
class: "krds-main-menu",
|
|
3461
3430
|
"aria-label": e.ariaLabel,
|
|
3462
|
-
onKeydown:
|
|
3431
|
+
onKeydown: de,
|
|
3463
3432
|
onFocusout: le
|
|
3464
3433
|
}, [t("div", { class: "inner" }, [t("ul", {
|
|
3465
3434
|
class: "gnb-menu",
|
|
3466
3435
|
"aria-label": e.ariaLabel
|
|
3467
|
-
},
|
|
3468
|
-
},
|
|
3469
|
-
const K = () => ye(
|
|
3436
|
+
}, u)]), y]);
|
|
3437
|
+
}, Oe = (u, y) => {
|
|
3438
|
+
const K = () => ye(y);
|
|
3470
3439
|
return t("div", {
|
|
3471
|
-
ref: (k) => U(z, k,
|
|
3472
|
-
class: ["depth4-wrap", { "is-open": L.value ===
|
|
3473
|
-
style: ne.value ===
|
|
3440
|
+
ref: (k) => U(z, k, y),
|
|
3441
|
+
class: ["depth4-wrap", { "is-open": L.value === y }],
|
|
3442
|
+
style: ne.value === y ? { display: "block" } : void 0
|
|
3474
3443
|
}, [t("div", { class: "depth4-head" }, [t("button", {
|
|
3475
|
-
ref: (k) => U(
|
|
3444
|
+
ref: (k) => U(N, k, y),
|
|
3476
3445
|
type: "button",
|
|
3477
3446
|
class: "krds-btn icon trigger-prev",
|
|
3478
3447
|
onClick: K
|
|
@@ -3480,15 +3449,15 @@ var _t = A({
|
|
|
3480
3449
|
type: "button",
|
|
3481
3450
|
class: "krds-btn icon trigger-close",
|
|
3482
3451
|
onClick: K
|
|
3483
|
-
}, [t("span", { class: "sr-only" }, e.closeLabel), t("i", { class: "svg-icon ico-popup-close" })])]), t("div", { class: "depth4-body" }, [t("h4", { class: "sub-title" },
|
|
3452
|
+
}, [t("span", { class: "sr-only" }, e.closeLabel), t("i", { class: "svg-icon ico-popup-close" })])]), t("div", { class: "depth4-body" }, [t("h4", { class: "sub-title" }, u.panelTitle || u.text), t("ul", { class: "depth4-ul" }, (u.items ?? []).map((k, P) => t("li", { key: `depth4-${P}` }, [t("a", {
|
|
3484
3453
|
href: k.href || "#",
|
|
3485
3454
|
...i(k.external),
|
|
3486
3455
|
class: { selected: k.selected },
|
|
3487
|
-
onClick: (q) =>
|
|
3456
|
+
onClick: (q) => g(k, q)
|
|
3488
3457
|
}, k.text)])))])]);
|
|
3489
|
-
}, qe = (
|
|
3490
|
-
const k = (
|
|
3491
|
-
const W = `${
|
|
3458
|
+
}, qe = (u, y, K) => {
|
|
3459
|
+
const k = (u.items ?? []).map((P, q) => {
|
|
3460
|
+
const W = `${y}-${K}-${q}`, Z = !!P.items?.length;
|
|
3492
3461
|
return t("li", { key: `depth3-${q}` }, [t("a", {
|
|
3493
3462
|
ref: (te) => U(F, te, W),
|
|
3494
3463
|
href: P.href || "#",
|
|
@@ -3502,14 +3471,14 @@ var _t = A({
|
|
|
3502
3471
|
"aria-expanded": L.value === W ? "true" : "false"
|
|
3503
3472
|
} : {},
|
|
3504
3473
|
onClick: (te) => {
|
|
3505
|
-
Z && Pe(te, W),
|
|
3474
|
+
Z && Pe(te, W), g(P, te);
|
|
3506
3475
|
}
|
|
3507
|
-
}, P.text), Z ?
|
|
3476
|
+
}, P.text), Z ? Oe(P, W) : null]);
|
|
3508
3477
|
});
|
|
3509
|
-
return t("div", { class: ["depth3-wrap", { "is-open": Q.value[`${
|
|
3510
|
-
}, We = (
|
|
3511
|
-
const K = (
|
|
3512
|
-
const q = `${
|
|
3478
|
+
return t("div", { class: ["depth3-wrap", { "is-open": Q.value[`${y}-${K}`] }] }, [t("ul", {}, k)]);
|
|
3479
|
+
}, We = (u, y) => {
|
|
3480
|
+
const K = (u.subItems ?? []).map((k, P) => {
|
|
3481
|
+
const q = `${y}-${P}`, W = !!k.items?.length;
|
|
3513
3482
|
return t("li", { key: `sub-${P}` }, [t("a", {
|
|
3514
3483
|
href: k.href || "#",
|
|
3515
3484
|
...W ? {} : i(k.external),
|
|
@@ -3519,39 +3488,39 @@ var _t = A({
|
|
|
3519
3488
|
selected: k.selected
|
|
3520
3489
|
}],
|
|
3521
3490
|
...W ? {
|
|
3522
|
-
"aria-controls":
|
|
3491
|
+
"aria-controls": B(y, P),
|
|
3523
3492
|
"aria-expanded": Q.value[q] ? "true" : "false"
|
|
3524
3493
|
} : {},
|
|
3525
3494
|
onClick: (Z) => {
|
|
3526
|
-
W && Ve(Z, q),
|
|
3495
|
+
W && Ve(Z, q), g(k, Z);
|
|
3527
3496
|
}
|
|
3528
|
-
}, k.text), W ? qe(k,
|
|
3497
|
+
}, k.text), W ? qe(k, y, P) : null]);
|
|
3529
3498
|
});
|
|
3530
3499
|
return t("div", {
|
|
3531
|
-
ref: (k) => _(V, k,
|
|
3532
|
-
id:
|
|
3500
|
+
ref: (k) => _(V, k, y),
|
|
3501
|
+
id: v(y),
|
|
3533
3502
|
class: "gnb-sub-list",
|
|
3534
3503
|
role: "tabpanel",
|
|
3535
|
-
"aria-labelledby":
|
|
3536
|
-
}, [t("h2", { class: "sub-title" },
|
|
3504
|
+
"aria-labelledby": c(y)
|
|
3505
|
+
}, [t("h2", { class: "sub-title" }, u.title || u.text), t("ul", {}, K)]);
|
|
3537
3506
|
}, Ye = () => {
|
|
3538
|
-
const
|
|
3507
|
+
const u = e.items.map((K, k) => t("li", {
|
|
3539
3508
|
key: `tab-${k}`,
|
|
3540
3509
|
role: "none"
|
|
3541
3510
|
}, [t("a", {
|
|
3542
|
-
id:
|
|
3543
|
-
href: `#${
|
|
3511
|
+
id: c(k),
|
|
3512
|
+
href: `#${v(k)}`,
|
|
3544
3513
|
class: ["gnb-main-trigger", { active: ae.value === k }],
|
|
3545
3514
|
role: "tab",
|
|
3546
|
-
"aria-controls":
|
|
3515
|
+
"aria-controls": v(k),
|
|
3547
3516
|
"aria-selected": ae.value === k ? "true" : "false",
|
|
3548
3517
|
onClick: (P) => {
|
|
3549
|
-
|
|
3518
|
+
Ae(P, k), g(K, P);
|
|
3550
3519
|
}
|
|
3551
|
-
}, K.text)])),
|
|
3520
|
+
}, K.text)])), y = [t("div", { class: "gnb-menu" }, [t("div", { class: "menu-wrap" }, [t("ul", {
|
|
3552
3521
|
role: "tablist",
|
|
3553
3522
|
"aria-label": e.ariaLabel
|
|
3554
|
-
},
|
|
3523
|
+
}, u)]), t("div", { class: "submenu-wrap" }, e.items.map(We))]), r.bottom ? t("div", { class: "gnb-bottom" }, r.bottom()) : null];
|
|
3555
3524
|
return t("div", {
|
|
3556
3525
|
ref: n,
|
|
3557
3526
|
id: e.mobileId,
|
|
@@ -3568,10 +3537,10 @@ var _t = A({
|
|
|
3568
3537
|
}, [
|
|
3569
3538
|
t("div", { class: "gnb-header" }, r.header ? r.header() : []),
|
|
3570
3539
|
t("div", {
|
|
3571
|
-
ref:
|
|
3540
|
+
ref: d,
|
|
3572
3541
|
class: "gnb-body",
|
|
3573
|
-
onScroll:
|
|
3574
|
-
},
|
|
3542
|
+
onScroll: Me
|
|
3543
|
+
}, y),
|
|
3575
3544
|
t("button", {
|
|
3576
3545
|
type: "button",
|
|
3577
3546
|
id: "close-nav",
|
|
@@ -3580,9 +3549,9 @@ var _t = A({
|
|
|
3580
3549
|
}, [t("span", { class: "sr-only" }, e.closeLabel), t("i", { class: "svg-icon ico-popup-close" })])
|
|
3581
3550
|
])]);
|
|
3582
3551
|
};
|
|
3583
|
-
return () => h.value ?
|
|
3552
|
+
return () => h.value ? Ne() : Ye();
|
|
3584
3553
|
}
|
|
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 =
|
|
3554
|
+
}), 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
3555
|
name: "KrdsCarousel",
|
|
3587
3556
|
props: {
|
|
3588
3557
|
variant: {
|
|
@@ -3658,27 +3627,27 @@ var _t = A({
|
|
|
3658
3627
|
default: void 0
|
|
3659
3628
|
}
|
|
3660
3629
|
},
|
|
3661
|
-
emits:
|
|
3662
|
-
"update:activeIndex",
|
|
3663
|
-
|
|
3664
|
-
|
|
3665
|
-
|
|
3666
|
-
"more-click"
|
|
3667
|
-
|
|
3630
|
+
emits: {
|
|
3631
|
+
"update:activeIndex": (e) => !0,
|
|
3632
|
+
change: (e) => !0,
|
|
3633
|
+
play: () => !0,
|
|
3634
|
+
stop: () => !0,
|
|
3635
|
+
"more-click": (e) => !0
|
|
3636
|
+
},
|
|
3668
3637
|
setup(e, { emit: a, slots: r }) {
|
|
3669
3638
|
const l = xe()?.uid, n = b(() => `${e.id ?? `krds-carousel-${l}`}-wrapper`);
|
|
3670
3639
|
let s = 0;
|
|
3671
|
-
const
|
|
3672
|
-
let
|
|
3673
|
-
const
|
|
3674
|
-
|
|
3640
|
+
const d = 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);
|
|
3641
|
+
let $;
|
|
3642
|
+
const f = () => {
|
|
3643
|
+
$ !== void 0 && (clearInterval($), $ = void 0);
|
|
3675
3644
|
}, o = (V) => {
|
|
3676
3645
|
if (s <= 0) return;
|
|
3677
3646
|
const F = e.loop ? (V % s + s) % s : Math.min(Math.max(V, 0), s - 1);
|
|
3678
|
-
F !==
|
|
3679
|
-
}, i = () => o(
|
|
3647
|
+
F !== d.value && (d.value = F, a("update:activeIndex", F), a("change", F));
|
|
3648
|
+
}, i = () => o(d.value - 1), g = () => o(d.value + 1), m = () => {
|
|
3680
3649
|
w.value || (w.value = !0, a("play"));
|
|
3681
|
-
},
|
|
3650
|
+
}, x = () => {
|
|
3682
3651
|
w.value && (w.value = !1, a("stop"));
|
|
3683
3652
|
};
|
|
3684
3653
|
se([
|
|
@@ -3686,37 +3655,37 @@ var _t = A({
|
|
|
3686
3655
|
S,
|
|
3687
3656
|
() => e.autoplayDelay
|
|
3688
3657
|
], () => {
|
|
3689
|
-
|
|
3690
|
-
if (!e.loop && s > 0 &&
|
|
3691
|
-
|
|
3658
|
+
f(), !(!w.value || S.value) && ($ = setInterval(() => {
|
|
3659
|
+
if (!e.loop && s > 0 && d.value >= s - 1) {
|
|
3660
|
+
x();
|
|
3692
3661
|
return;
|
|
3693
3662
|
}
|
|
3694
|
-
|
|
3663
|
+
g();
|
|
3695
3664
|
}, e.autoplayDelay));
|
|
3696
3665
|
}), se(() => e.autoplay, (V) => {
|
|
3697
|
-
V ?
|
|
3666
|
+
V ? m() : x();
|
|
3698
3667
|
}), se(() => e.activeIndex, (V) => {
|
|
3699
|
-
typeof V != "number" || V ===
|
|
3668
|
+
typeof V != "number" || V === d.value || (d.value = s > 0 ? Math.min(Math.max(V, 0), s - 1) : V);
|
|
3700
3669
|
});
|
|
3701
|
-
const E =
|
|
3702
|
-
let
|
|
3670
|
+
const E = D(!1);
|
|
3671
|
+
let T;
|
|
3703
3672
|
const _ = (V) => {
|
|
3704
3673
|
E.value = V.matches;
|
|
3705
|
-
},
|
|
3674
|
+
}, p = b(() => E.value ? 0 : e.speed);
|
|
3706
3675
|
ie(() => {
|
|
3707
|
-
typeof window < "u" && window.matchMedia && (
|
|
3676
|
+
typeof window < "u" && window.matchMedia && (T = window.matchMedia("(prefers-reduced-motion: reduce)"), E.value = T.matches, T.addEventListener("change", _)), e.autoplay && m();
|
|
3708
3677
|
}), fe(() => {
|
|
3709
|
-
|
|
3678
|
+
f(), T?.removeEventListener("change", _);
|
|
3710
3679
|
});
|
|
3711
|
-
const
|
|
3712
|
-
e.pauseOnHover && (
|
|
3680
|
+
const A = () => {
|
|
3681
|
+
e.pauseOnHover && (c.value = !0);
|
|
3713
3682
|
}, I = () => {
|
|
3714
|
-
|
|
3715
|
-
},
|
|
3716
|
-
|
|
3683
|
+
c.value = !1;
|
|
3684
|
+
}, O = () => {
|
|
3685
|
+
B.value = !0;
|
|
3717
3686
|
}, H = (V) => {
|
|
3718
3687
|
const F = V.currentTarget;
|
|
3719
|
-
F && F.contains(V.relatedTarget) || (
|
|
3688
|
+
F && F.contains(V.relatedTarget) || (B.value = !1);
|
|
3720
3689
|
}, G = (V) => {
|
|
3721
3690
|
a("more-click", V);
|
|
3722
3691
|
}, j = {
|
|
@@ -3732,68 +3701,68 @@ var _t = A({
|
|
|
3732
3701
|
gap: h.value > 0 ? `${h.value}px` : void 0,
|
|
3733
3702
|
transform: `translate3d(calc(${-V} * (100% + ${h.value}px)), 0, 0)`,
|
|
3734
3703
|
transitionProperty: "transform",
|
|
3735
|
-
transitionDuration: `${
|
|
3704
|
+
transitionDuration: `${p.value}ms`,
|
|
3736
3705
|
transitionTimingFunction: "ease-out",
|
|
3737
3706
|
willChange: "transform"
|
|
3738
|
-
}),
|
|
3707
|
+
}), de = (V) => ({
|
|
3739
3708
|
position: "absolute",
|
|
3740
3709
|
top: "50%",
|
|
3741
3710
|
left: V ? "0" : void 0,
|
|
3742
3711
|
right: V ? void 0 : "0",
|
|
3743
3712
|
transform: "translateY(-50%)",
|
|
3744
3713
|
zIndex: 10
|
|
3745
|
-
}), ae = (V, F) => V.map((z,
|
|
3746
|
-
const U =
|
|
3714
|
+
}), ae = (V, F) => V.map((z, N) => {
|
|
3715
|
+
const U = N === F;
|
|
3747
3716
|
return t("li", {
|
|
3748
|
-
key: z.key ?? `krds-carousel-slide-${
|
|
3717
|
+
key: z.key ?? `krds-carousel-slide-${N}`,
|
|
3749
3718
|
class: ["swiper-slide", { "swiper-slide-active": U }],
|
|
3750
3719
|
style: X,
|
|
3751
3720
|
"aria-roledescription": "slide",
|
|
3752
|
-
"aria-label": `${
|
|
3721
|
+
"aria-label": `${N + 1} / ${V.length}`,
|
|
3753
3722
|
"aria-hidden": U ? void 0 : "true",
|
|
3754
3723
|
inert: U ? void 0 : !0
|
|
3755
3724
|
}, [z]);
|
|
3756
3725
|
}), Q = (V, F, z) => {
|
|
3757
|
-
const
|
|
3726
|
+
const N = V === "prev", U = !e.loop && (N ? F <= 0 : F >= s - 1);
|
|
3758
3727
|
return t("button", {
|
|
3759
3728
|
type: "button",
|
|
3760
3729
|
class: [`swiper-button-${V}`, { "swiper-button-disabled": U }],
|
|
3761
|
-
style: z ?
|
|
3730
|
+
style: z ? de(N) : void 0,
|
|
3762
3731
|
disabled: U,
|
|
3763
3732
|
"aria-controls": n.value,
|
|
3764
|
-
onClick:
|
|
3765
|
-
}, [t("span", { class: "sr-only" },
|
|
3733
|
+
onClick: N ? i : g
|
|
3734
|
+
}, [t("span", { class: "sr-only" }, N ? e.prevLabel : e.nextLabel)]);
|
|
3766
3735
|
}, ne = () => t("a", {
|
|
3767
3736
|
href: e.moreHref,
|
|
3768
3737
|
class: "swiper-button-more",
|
|
3769
3738
|
onClick: G
|
|
3770
|
-
}, [t("span", { class: "sr-only" }, e.moreLabel)]), L = (V, F) =>
|
|
3739
|
+
}, [t("span", { class: "sr-only" }, e.moreLabel)]), L = (V, F) => v.value === "fraction" ? t("div", { class: "swiper-pagination swiper-pagination-fraction" }, [
|
|
3771
3740
|
t("span", { class: "swiper-pagination-current" }, String(F + 1)),
|
|
3772
3741
|
t("span", { "aria-hidden": "true" }, "/"),
|
|
3773
3742
|
t("span", { class: "swiper-pagination-total" }, String(V))
|
|
3774
|
-
]) : t("div", { class: "swiper-pagination" }, Array.from({ length: V }, (z,
|
|
3775
|
-
key: `krds-carousel-bullet-${
|
|
3743
|
+
]) : t("div", { class: "swiper-pagination" }, Array.from({ length: V }, (z, N) => t("button", {
|
|
3744
|
+
key: `krds-carousel-bullet-${N}`,
|
|
3776
3745
|
type: "button",
|
|
3777
|
-
class: ["swiper-pagination-bullet", { "swiper-pagination-bullet-active":
|
|
3778
|
-
"aria-label": `${
|
|
3779
|
-
"aria-current":
|
|
3746
|
+
class: ["swiper-pagination-bullet", { "swiper-pagination-bullet-active": N === F }],
|
|
3747
|
+
"aria-label": `${N + 1}번째 슬라이드로 이동`,
|
|
3748
|
+
"aria-current": N === F ? "true" : void 0,
|
|
3780
3749
|
"aria-controls": n.value,
|
|
3781
|
-
onClick: () => o(
|
|
3750
|
+
onClick: () => o(N)
|
|
3782
3751
|
}))), R = () => t("div", { class: "swiper-controller" }, [t("button", {
|
|
3783
3752
|
type: "button",
|
|
3784
3753
|
class: "swiper-button-play",
|
|
3785
3754
|
style: w.value ? { display: "none" } : void 0,
|
|
3786
3755
|
"aria-controls": n.value,
|
|
3787
|
-
onClick:
|
|
3756
|
+
onClick: m
|
|
3788
3757
|
}, [t("span", { class: "sr-only" }, e.playLabel)]), t("button", {
|
|
3789
3758
|
type: "button",
|
|
3790
3759
|
class: "swiper-button-stop",
|
|
3791
3760
|
style: w.value ? void 0 : { display: "none" },
|
|
3792
3761
|
"aria-controls": n.value,
|
|
3793
|
-
onClick:
|
|
3762
|
+
onClick: x
|
|
3794
3763
|
}, [t("span", { class: "sr-only" }, e.stopLabel)])]), Y = (V, F) => {
|
|
3795
|
-
const z = e.variant === "banner",
|
|
3796
|
-
if (
|
|
3764
|
+
const z = e.variant === "banner", N = v.value !== "none", U = !!e.moreHref, J = [];
|
|
3765
|
+
if (N && J.push(L(V, F)), e.autoplay && J.push(R()), z) {
|
|
3797
3766
|
const ee = [];
|
|
3798
3767
|
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
3768
|
} else U && J.push(ne());
|
|
@@ -3802,17 +3771,17 @@ var _t = A({
|
|
|
3802
3771
|
return () => {
|
|
3803
3772
|
const V = Be(r.default?.()), F = V.length;
|
|
3804
3773
|
s = F;
|
|
3805
|
-
const z = F > 0 ? Math.min(Math.max(
|
|
3774
|
+
const z = F > 0 ? Math.min(Math.max(d.value, 0), F - 1) : 0, N = e.variant === "banner";
|
|
3806
3775
|
return t("div", {
|
|
3807
3776
|
id: e.id,
|
|
3808
|
-
class: ["krds-carousel",
|
|
3777
|
+
class: ["krds-carousel", N ? "main-d-ban-swiper" : "vb-swiper"],
|
|
3809
3778
|
style: { position: "relative" },
|
|
3810
3779
|
role: "region",
|
|
3811
3780
|
"aria-roledescription": "carousel",
|
|
3812
3781
|
"aria-label": e.ariaLabel,
|
|
3813
|
-
onMouseenter:
|
|
3782
|
+
onMouseenter: A,
|
|
3814
3783
|
onMouseleave: I,
|
|
3815
|
-
onFocusin:
|
|
3784
|
+
onFocusin: O,
|
|
3816
3785
|
onFocusout: H
|
|
3817
3786
|
}, [
|
|
3818
3787
|
t("div", {
|
|
@@ -3824,13 +3793,83 @@ var _t = A({
|
|
|
3824
3793
|
class: "swiper-wrapper",
|
|
3825
3794
|
style: le(z)
|
|
3826
3795
|
}, ae(V, z))]),
|
|
3827
|
-
!
|
|
3828
|
-
!
|
|
3796
|
+
!N && e.navigation && F > 0 ? Q("prev", z, !0) : null,
|
|
3797
|
+
!N && e.navigation && F > 0 ? Q("next", z, !0) : null,
|
|
3829
3798
|
F > 0 ? Y(F, z) : null
|
|
3830
3799
|
]);
|
|
3831
3800
|
};
|
|
3832
3801
|
}
|
|
3833
|
-
}), Qa = Xa,
|
|
3802
|
+
}), Qa = Xa, Ja = M({
|
|
3803
|
+
name: "KrdsTabs",
|
|
3804
|
+
props: {
|
|
3805
|
+
tabs: {
|
|
3806
|
+
type: Array,
|
|
3807
|
+
required: !0
|
|
3808
|
+
},
|
|
3809
|
+
modelValue: {
|
|
3810
|
+
type: String,
|
|
3811
|
+
default: void 0
|
|
3812
|
+
},
|
|
3813
|
+
variant: {
|
|
3814
|
+
type: String,
|
|
3815
|
+
default: "line"
|
|
3816
|
+
},
|
|
3817
|
+
full: {
|
|
3818
|
+
type: Boolean,
|
|
3819
|
+
default: !1
|
|
3820
|
+
},
|
|
3821
|
+
selectedText: {
|
|
3822
|
+
type: String,
|
|
3823
|
+
default: "선택됨"
|
|
3824
|
+
},
|
|
3825
|
+
class: {
|
|
3826
|
+
type: String,
|
|
3827
|
+
default: void 0
|
|
3828
|
+
}
|
|
3829
|
+
},
|
|
3830
|
+
emits: {
|
|
3831
|
+
"update:modelValue": (e) => !0,
|
|
3832
|
+
change: (e) => !0
|
|
3833
|
+
},
|
|
3834
|
+
setup(e, { emit: a, slots: r }) {
|
|
3835
|
+
const l = oe(), n = (c) => `tab-${l}-${c}`, s = (c) => `panel-${l}-${c}`, d = D(e.tabs.find((c) => !c.disabled)?.id), h = b(() => e.modelValue ?? d.value), v = (c) => {
|
|
3836
|
+
c.disabled || c.id === h.value || (d.value = c.id, a("update:modelValue", c.id), a("change", c.id));
|
|
3837
|
+
}, w = (c) => {
|
|
3838
|
+
if (c.key !== "ArrowRight" && c.key !== "ArrowLeft") return;
|
|
3839
|
+
c.preventDefault();
|
|
3840
|
+
const B = c.currentTarget;
|
|
3841
|
+
(c.key === "ArrowRight" ? B.nextElementSibling : B.previousElementSibling)?.querySelector("button")?.focus();
|
|
3842
|
+
};
|
|
3843
|
+
return () => t("div", { class: [
|
|
3844
|
+
"krds-tab-area",
|
|
3845
|
+
"layer",
|
|
3846
|
+
e.class
|
|
3847
|
+
] }, [t("div", { class: [
|
|
3848
|
+
"tab",
|
|
3849
|
+
e.variant,
|
|
3850
|
+
{ full: e.full }
|
|
3851
|
+
] }, [t("ul", { role: "tablist" }, e.tabs.map((c) => t("li", {
|
|
3852
|
+
key: c.id,
|
|
3853
|
+
id: n(c.id),
|
|
3854
|
+
role: "tab",
|
|
3855
|
+
"aria-selected": c.id === h.value,
|
|
3856
|
+
"aria-controls": s(c.id),
|
|
3857
|
+
class: { active: c.id === h.value },
|
|
3858
|
+
onKeydown: w
|
|
3859
|
+
}, [t("button", {
|
|
3860
|
+
type: "button",
|
|
3861
|
+
class: "btn-tab",
|
|
3862
|
+
disabled: c.disabled || void 0,
|
|
3863
|
+
onClick: () => v(c)
|
|
3864
|
+
}, [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", {
|
|
3865
|
+
key: c.id,
|
|
3866
|
+
id: s(c.id),
|
|
3867
|
+
role: "tabpanel",
|
|
3868
|
+
"aria-labelledby": n(c.id),
|
|
3869
|
+
class: ["tab-conts", { active: c.id === h.value }]
|
|
3870
|
+
}, r[c.id]?.())))]);
|
|
3871
|
+
}
|
|
3872
|
+
}), Za = Ja, Ke = /* @__PURE__ */ Je({
|
|
3834
3873
|
KrdsAccordionGroup: () => ga,
|
|
3835
3874
|
KrdsAccordionItem: () => ya,
|
|
3836
3875
|
KrdsBadge: () => Ct,
|
|
@@ -3847,7 +3886,7 @@ var _t = A({
|
|
|
3847
3886
|
KrdsDisclosure: () => La,
|
|
3848
3887
|
KrdsFileUpload: () => wt,
|
|
3849
3888
|
KrdsFooter: () => xa,
|
|
3850
|
-
KrdsFormGroup: () =>
|
|
3889
|
+
KrdsFormGroup: () => dt,
|
|
3851
3890
|
KrdsFormHint: () => ot,
|
|
3852
3891
|
KrdsFormLabel: () => rt,
|
|
3853
3892
|
KrdsHeader: () => Ka,
|
|
@@ -3855,37 +3894,38 @@ var _t = A({
|
|
|
3855
3894
|
KrdsIdentifier: () => Ba,
|
|
3856
3895
|
KrdsInPageNavigation: () => Xt,
|
|
3857
3896
|
KrdsInput: () => nt,
|
|
3858
|
-
KrdsLanguageSwitcher: () =>
|
|
3897
|
+
KrdsLanguageSwitcher: () => ua,
|
|
3859
3898
|
KrdsLayout: () => _a,
|
|
3860
3899
|
KrdsLink: () => at,
|
|
3861
3900
|
KrdsMainMenu: () => Wa,
|
|
3862
|
-
KrdsMasthead: () =>
|
|
3901
|
+
KrdsMasthead: () => Tt,
|
|
3863
3902
|
KrdsModal: () => va,
|
|
3864
3903
|
KrdsPagination: () => Zt,
|
|
3865
3904
|
KrdsPanel: () => ta,
|
|
3866
3905
|
KrdsRadio: () => Rt,
|
|
3867
3906
|
KrdsResize: () => ca,
|
|
3868
3907
|
KrdsSelect: () => bt,
|
|
3869
|
-
KrdsSideNavigation: () =>
|
|
3908
|
+
KrdsSideNavigation: () => Ma,
|
|
3870
3909
|
KrdsSkipLink: () => Yt,
|
|
3871
3910
|
KrdsSpinner: () => It,
|
|
3872
3911
|
KrdsStep: () => qt,
|
|
3873
|
-
KrdsStepIndicator: () =>
|
|
3912
|
+
KrdsStepIndicator: () => Nt,
|
|
3874
3913
|
KrdsStructuredList: () => Pa,
|
|
3875
3914
|
KrdsTable: () => Sa,
|
|
3915
|
+
KrdsTabs: () => Za,
|
|
3876
3916
|
KrdsTag: () => $t,
|
|
3877
3917
|
KrdsTagGroup: () => Dt,
|
|
3878
3918
|
KrdsTextList: () => Fa,
|
|
3879
3919
|
KrdsTextarea: () => yt,
|
|
3880
|
-
KrdsToggleSwitch: () =>
|
|
3920
|
+
KrdsToggleSwitch: () => At,
|
|
3881
3921
|
KrdsTooltip: () => ia,
|
|
3882
3922
|
KrdsTts: () => ba
|
|
3883
|
-
}),
|
|
3923
|
+
}), Te = "0.0.18", ll = { install(e, a = {}) {
|
|
3884
3924
|
e.provide("krds:config", a), (a.components || Object.keys(Ke)).forEach((r) => {
|
|
3885
3925
|
const l = Ke[r];
|
|
3886
3926
|
l && e.component(r, l);
|
|
3887
|
-
}), Qt(e), e.config.globalProperties.$krds = { version:
|
|
3888
|
-
} },
|
|
3927
|
+
}), Qt(e), e.config.globalProperties.$krds = { version: Te };
|
|
3928
|
+
} }, nl = Te;
|
|
3889
3929
|
export {
|
|
3890
3930
|
ga as KrdsAccordionGroup,
|
|
3891
3931
|
ya as KrdsAccordionItem,
|
|
@@ -3903,7 +3943,7 @@ export {
|
|
|
3903
3943
|
La as KrdsDisclosure,
|
|
3904
3944
|
wt as KrdsFileUpload,
|
|
3905
3945
|
xa as KrdsFooter,
|
|
3906
|
-
|
|
3946
|
+
dt as KrdsFormGroup,
|
|
3907
3947
|
ot as KrdsFormHint,
|
|
3908
3948
|
rt as KrdsFormLabel,
|
|
3909
3949
|
Ka as KrdsHeader,
|
|
@@ -3911,36 +3951,37 @@ export {
|
|
|
3911
3951
|
Ba as KrdsIdentifier,
|
|
3912
3952
|
Xt as KrdsInPageNavigation,
|
|
3913
3953
|
nt as KrdsInput,
|
|
3914
|
-
|
|
3954
|
+
ua as KrdsLanguageSwitcher,
|
|
3915
3955
|
_a as KrdsLayout,
|
|
3916
3956
|
at as KrdsLink,
|
|
3917
3957
|
Wa as KrdsMainMenu,
|
|
3918
|
-
|
|
3958
|
+
Tt as KrdsMasthead,
|
|
3919
3959
|
va as KrdsModal,
|
|
3920
3960
|
Zt as KrdsPagination,
|
|
3921
3961
|
ta as KrdsPanel,
|
|
3922
3962
|
Rt as KrdsRadio,
|
|
3923
3963
|
ca as KrdsResize,
|
|
3924
3964
|
bt as KrdsSelect,
|
|
3925
|
-
|
|
3965
|
+
Ma as KrdsSideNavigation,
|
|
3926
3966
|
Yt as KrdsSkipLink,
|
|
3927
3967
|
It as KrdsSpinner,
|
|
3928
3968
|
qt as KrdsStep,
|
|
3929
|
-
|
|
3969
|
+
Nt as KrdsStepIndicator,
|
|
3930
3970
|
Pa as KrdsStructuredList,
|
|
3931
3971
|
Sa as KrdsTable,
|
|
3972
|
+
Za as KrdsTabs,
|
|
3932
3973
|
$t as KrdsTag,
|
|
3933
3974
|
Dt as KrdsTagGroup,
|
|
3934
3975
|
Fa as KrdsTextList,
|
|
3935
3976
|
yt as KrdsTextarea,
|
|
3936
|
-
|
|
3977
|
+
At as KrdsToggleSwitch,
|
|
3937
3978
|
ia as KrdsTooltip,
|
|
3938
3979
|
ba as KrdsTts,
|
|
3939
3980
|
he as classNames,
|
|
3940
|
-
|
|
3941
|
-
|
|
3942
|
-
|
|
3943
|
-
|
|
3981
|
+
ll as default,
|
|
3982
|
+
tl as generateId,
|
|
3983
|
+
al as generateUid,
|
|
3984
|
+
nl as version
|
|
3944
3985
|
};
|
|
3945
3986
|
|
|
3946
3987
|
//# sourceMappingURL=krds-vue.es.js.map
|