@krds.ui/vue 0.0.20 → 0.0.21
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/LICENSE +1 -1
- package/README.md +6 -3
- package/dist/krds-vue.es.js +1541 -1383
- package/dist/krds-vue.es.js.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/index.d.ts +337 -28
- package/package.json +2 -2
package/dist/krds-vue.es.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { Comment as
|
|
2
|
-
var
|
|
1
|
+
import { Comment as Je, Fragment as Ze, Teleport as Ce, Text as et, computed as C, defineComponent as _, getCurrentInstance as xe, h as t, inject as tt, mergeProps as Ee, nextTick as pe, onActivated as at, onBeforeUnmount as oe, onMounted as ee, onUnmounted as ue, onUpdated as lt, provide as nt, ref as E, shallowRef as st, useId as de, vShow as Se, watch as se, withDirectives as ge, withModifiers as Ke } from "vue";
|
|
2
|
+
var De = Object.defineProperty, rt = (e, a) => {
|
|
3
3
|
let r = {};
|
|
4
4
|
for (var l in e)
|
|
5
|
-
|
|
5
|
+
De(r, l, {
|
|
6
6
|
get: e[l],
|
|
7
7
|
enumerable: !0
|
|
8
8
|
});
|
|
9
|
-
return a ||
|
|
10
|
-
},
|
|
9
|
+
return a || De(r, Symbol.toStringTag, { value: "Module" }), r;
|
|
10
|
+
}, Fe = /* @__PURE__ */ _({
|
|
11
11
|
name: "KrdsButton",
|
|
12
12
|
props: {
|
|
13
13
|
type: {
|
|
@@ -49,7 +49,7 @@ var Be = Object.defineProperty, tt = (e, a) => {
|
|
|
49
49
|
},
|
|
50
50
|
emits: { click: (e) => !0 },
|
|
51
51
|
setup(e, { emit: a, slots: r }) {
|
|
52
|
-
const l =
|
|
52
|
+
const l = C(() => {
|
|
53
53
|
const s = ["krds-btn"];
|
|
54
54
|
return e.icon && s.push("icon"), e.border && s.push("border"), e.pure && s.push("pure"), e.text && s.push("text"), e.variant && !e.icon && s.push(e.variant), e.size && s.push(e.size), e.class && s.push(e.class), s;
|
|
55
55
|
}), n = (s) => {
|
|
@@ -62,13 +62,13 @@ var Be = Object.defineProperty, tt = (e, a) => {
|
|
|
62
62
|
onClick: n
|
|
63
63
|
}, r.default?.());
|
|
64
64
|
}
|
|
65
|
-
}),
|
|
65
|
+
}), it = Fe, ot = /* @__PURE__ */ _({
|
|
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
|
-
}),
|
|
71
|
+
}), ut = /* @__PURE__ */ _({
|
|
72
72
|
name: "KrdsIcon",
|
|
73
73
|
props: {
|
|
74
74
|
name: {
|
|
@@ -87,7 +87,115 @@ var Be = Object.defineProperty, tt = (e, a) => {
|
|
|
87
87
|
e.class
|
|
88
88
|
].filter(Boolean).join(" ") });
|
|
89
89
|
}
|
|
90
|
-
}),
|
|
90
|
+
}), dt = /* @__PURE__ */ _({
|
|
91
|
+
name: "KrdsFloatingButton",
|
|
92
|
+
inheritAttrs: !1,
|
|
93
|
+
props: {
|
|
94
|
+
label: {
|
|
95
|
+
type: String,
|
|
96
|
+
required: !0
|
|
97
|
+
},
|
|
98
|
+
icon: {
|
|
99
|
+
type: String,
|
|
100
|
+
default: "ico-plus"
|
|
101
|
+
},
|
|
102
|
+
href: {
|
|
103
|
+
type: String,
|
|
104
|
+
default: void 0
|
|
105
|
+
},
|
|
106
|
+
external: {
|
|
107
|
+
type: Boolean,
|
|
108
|
+
default: !1
|
|
109
|
+
},
|
|
110
|
+
hideLabel: {
|
|
111
|
+
type: Boolean,
|
|
112
|
+
default: !1
|
|
113
|
+
},
|
|
114
|
+
items: {
|
|
115
|
+
type: Array,
|
|
116
|
+
default: void 0
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
emits: {
|
|
120
|
+
click: (e) => !0,
|
|
121
|
+
select: (e, a, r) => !0
|
|
122
|
+
},
|
|
123
|
+
setup(e, { emit: a, attrs: r }) {
|
|
124
|
+
const l = E(null), n = E(null), s = `floating-list-${de()}`, u = E(!1), g = (S = !1) => {
|
|
125
|
+
u.value = !1, S && n.value?.focus();
|
|
126
|
+
}, h = (S) => {
|
|
127
|
+
S.key === "Escape" && u.value && g(!0);
|
|
128
|
+
};
|
|
129
|
+
ee(() => document.addEventListener("keydown", h)), ue(() => document.removeEventListener("keydown", h));
|
|
130
|
+
const y = (S) => {
|
|
131
|
+
const k = S.relatedTarget;
|
|
132
|
+
k && !l.value?.contains(k) && g();
|
|
133
|
+
}, d = (S, k, K = !1, m = {}) => t(S.href ? "a" : "button", Ee({
|
|
134
|
+
class: "floating-action",
|
|
135
|
+
...S.href ? {
|
|
136
|
+
href: S.href,
|
|
137
|
+
...S.external && {
|
|
138
|
+
target: "_blank",
|
|
139
|
+
rel: "noopener noreferrer",
|
|
140
|
+
title: "새 창 열림"
|
|
141
|
+
}
|
|
142
|
+
} : { type: "button" },
|
|
143
|
+
onClick: k
|
|
144
|
+
}, m), [t("span", { class: "floating-icon" }, [t("i", {
|
|
145
|
+
class: ["svg-icon", S.icon],
|
|
146
|
+
"aria-hidden": "true"
|
|
147
|
+
})]), t("span", { class: K ? "sr-only" : "floating-label" }, S.label)]);
|
|
148
|
+
return () => {
|
|
149
|
+
const { items: S } = e;
|
|
150
|
+
if (!S) {
|
|
151
|
+
const { class: k, style: K, ...m } = r;
|
|
152
|
+
return t("div", {
|
|
153
|
+
class: ["krds-floating-button", k],
|
|
154
|
+
style: K
|
|
155
|
+
}, [d({
|
|
156
|
+
label: e.label,
|
|
157
|
+
icon: e.icon,
|
|
158
|
+
href: e.href,
|
|
159
|
+
external: e.external
|
|
160
|
+
}, (v) => a("click", v), e.hideLabel, m)]);
|
|
161
|
+
}
|
|
162
|
+
return t("div", Ee(r, {
|
|
163
|
+
ref: l,
|
|
164
|
+
class: [
|
|
165
|
+
"krds-floating-button",
|
|
166
|
+
"expand",
|
|
167
|
+
{ active: u.value }
|
|
168
|
+
],
|
|
169
|
+
onFocusout: y
|
|
170
|
+
}), [
|
|
171
|
+
u.value ? t("div", {
|
|
172
|
+
class: "floating-dim",
|
|
173
|
+
"aria-hidden": "true",
|
|
174
|
+
onClick: () => g()
|
|
175
|
+
}) : null,
|
|
176
|
+
t("button", {
|
|
177
|
+
ref: n,
|
|
178
|
+
type: "button",
|
|
179
|
+
class: "floating-toggle",
|
|
180
|
+
"aria-expanded": u.value,
|
|
181
|
+
"aria-controls": s,
|
|
182
|
+
onClick: () => u.value = !u.value
|
|
183
|
+
}, [t("span", { class: "floating-icon" }, [t("i", {
|
|
184
|
+
class: "svg-icon ico-plus",
|
|
185
|
+
"aria-hidden": "true"
|
|
186
|
+
})]), t("span", { class: "sr-only" }, e.label)]),
|
|
187
|
+
ge(t("ul", {
|
|
188
|
+
id: s,
|
|
189
|
+
class: "floating-list"
|
|
190
|
+
}, S.map((k, K) => t("li", { key: K }, [d(k, (m) => {
|
|
191
|
+
g(!0), a("select", k, K, m);
|
|
192
|
+
const v = k.href?.startsWith("#") ? decodeURIComponent(k.href.slice(1)) : "";
|
|
193
|
+
v && !m.defaultPrevented && document.getElementById(v) && document.activeElement === n.value && n.value?.blur();
|
|
194
|
+
})]))), [[Se, u.value]])
|
|
195
|
+
]);
|
|
196
|
+
};
|
|
197
|
+
}
|
|
198
|
+
}), ct = dt, ft = /* @__PURE__ */ _({
|
|
91
199
|
name: "KrdsLink",
|
|
92
200
|
props: {
|
|
93
201
|
href: {
|
|
@@ -125,24 +233,24 @@ var Be = Object.defineProperty, tt = (e, a) => {
|
|
|
125
233
|
},
|
|
126
234
|
emits: { click: (e) => !0 },
|
|
127
235
|
setup(e, { emit: a, slots: r }) {
|
|
128
|
-
const l =
|
|
129
|
-
const
|
|
130
|
-
return e.size &&
|
|
131
|
-
}), n =
|
|
132
|
-
const
|
|
236
|
+
const l = C(() => {
|
|
237
|
+
const u = ["krds-btn"];
|
|
238
|
+
return e.size && u.push(e.size), e.link && u.push("link"), e.basic && u.push("basic"), e.pure && u.push("pure"), e.class && u.push(e.class), u;
|
|
239
|
+
}), n = C(() => {
|
|
240
|
+
const u = {
|
|
133
241
|
href: e.href,
|
|
134
242
|
class: l.value
|
|
135
243
|
};
|
|
136
|
-
return e.target && (
|
|
137
|
-
}), s = (
|
|
138
|
-
a("click",
|
|
244
|
+
return e.target && (u.target = e.target), e.title && (u.title = e.title), e.target === "_blank" && (u.rel = "noopener noreferrer"), u;
|
|
245
|
+
}), s = (u) => {
|
|
246
|
+
a("click", u);
|
|
139
247
|
};
|
|
140
248
|
return () => t("a", {
|
|
141
249
|
...n.value,
|
|
142
250
|
onClick: s
|
|
143
251
|
}, r.default?.());
|
|
144
252
|
}
|
|
145
|
-
}),
|
|
253
|
+
}), Pe = /* @__PURE__ */ _({
|
|
146
254
|
name: "KrdsSpinner",
|
|
147
255
|
props: { label: {
|
|
148
256
|
type: String,
|
|
@@ -155,7 +263,7 @@ var Be = Object.defineProperty, tt = (e, a) => {
|
|
|
155
263
|
role: "status"
|
|
156
264
|
}, e);
|
|
157
265
|
}
|
|
158
|
-
}),
|
|
266
|
+
}), vt = /* @__PURE__ */ _({
|
|
159
267
|
name: "KrdsInput",
|
|
160
268
|
props: {
|
|
161
269
|
modelValue: {
|
|
@@ -249,24 +357,24 @@ var Be = Object.defineProperty, tt = (e, a) => {
|
|
|
249
357
|
keyup: (e) => !0
|
|
250
358
|
},
|
|
251
359
|
setup(e, { emit: a, slots: r }) {
|
|
252
|
-
const l =
|
|
253
|
-
const
|
|
254
|
-
return e.size &&
|
|
255
|
-
}), n = (
|
|
256
|
-
const
|
|
257
|
-
a("update:modelValue", e.type === "number" ? Number(
|
|
258
|
-
}, s = (
|
|
259
|
-
a("change",
|
|
260
|
-
},
|
|
261
|
-
a("focus",
|
|
262
|
-
},
|
|
263
|
-
a("blur",
|
|
264
|
-
},
|
|
265
|
-
a("keydown",
|
|
266
|
-
},
|
|
267
|
-
a("keyup",
|
|
268
|
-
},
|
|
269
|
-
const
|
|
360
|
+
const l = C(() => {
|
|
361
|
+
const k = ["krds-input"];
|
|
362
|
+
return e.size && k.push(e.size), e.class && k.push(e.class), k;
|
|
363
|
+
}), n = (k) => {
|
|
364
|
+
const K = k.target;
|
|
365
|
+
a("update:modelValue", e.type === "number" ? Number(K.value) : K.value), a("input", k);
|
|
366
|
+
}, s = (k) => {
|
|
367
|
+
a("change", k);
|
|
368
|
+
}, u = (k) => {
|
|
369
|
+
a("focus", k);
|
|
370
|
+
}, g = (k) => {
|
|
371
|
+
a("blur", k);
|
|
372
|
+
}, h = (k) => {
|
|
373
|
+
a("keydown", k);
|
|
374
|
+
}, y = (k) => {
|
|
375
|
+
a("keyup", k);
|
|
376
|
+
}, d = C(() => {
|
|
377
|
+
const k = {
|
|
270
378
|
type: e.type,
|
|
271
379
|
class: l.value,
|
|
272
380
|
value: e.modelValue,
|
|
@@ -280,22 +388,22 @@ var Be = Object.defineProperty, tt = (e, a) => {
|
|
|
280
388
|
autofocus: e.autofocus,
|
|
281
389
|
onInput: n,
|
|
282
390
|
onChange: s,
|
|
283
|
-
onFocus:
|
|
284
|
-
onBlur:
|
|
285
|
-
onKeydown:
|
|
286
|
-
onKeyup:
|
|
391
|
+
onFocus: u,
|
|
392
|
+
onBlur: g,
|
|
393
|
+
onKeydown: h,
|
|
394
|
+
onKeyup: y
|
|
287
395
|
};
|
|
288
|
-
return e.maxlength !== void 0 && (
|
|
289
|
-
}),
|
|
290
|
-
const
|
|
291
|
-
return e.state !== "default" &&
|
|
396
|
+
return e.maxlength !== void 0 && (k.maxlength = e.maxlength), e.minlength !== void 0 && (k.minlength = e.minlength), e.type === "number" && (e.max !== void 0 && (k.max = e.max), e.min !== void 0 && (k.min = e.min), e.step !== void 0 && (k.step = e.step)), k;
|
|
397
|
+
}), S = C(() => {
|
|
398
|
+
const k = ["form-conts"];
|
|
399
|
+
return e.state !== "default" && k.push(`is-${e.state}`), e.icon && k.push("btn-ico-wrap"), k;
|
|
292
400
|
});
|
|
293
401
|
return () => {
|
|
294
|
-
const
|
|
295
|
-
return e.loading ? t("div", { class:
|
|
402
|
+
const k = [t("input", d.value)];
|
|
403
|
+
return e.loading ? t("div", { class: S.value }, [t("div", { class: "form-spinner" }, [...k, t(Pe)])]) : (r.default && k.push(...r.default()), t("div", { class: S.value }, k));
|
|
296
404
|
};
|
|
297
405
|
}
|
|
298
|
-
}),
|
|
406
|
+
}), pt = vt, ht = /* @__PURE__ */ _({
|
|
299
407
|
name: "KrdsFormLabel",
|
|
300
408
|
props: {
|
|
301
409
|
for: {
|
|
@@ -328,7 +436,7 @@ var Be = Object.defineProperty, tt = (e, a) => {
|
|
|
328
436
|
onClick: l
|
|
329
437
|
}, r.default?.())]);
|
|
330
438
|
}
|
|
331
|
-
}),
|
|
439
|
+
}), gt = ht, yt = /* @__PURE__ */ _({
|
|
332
440
|
name: "KrdsFormHint",
|
|
333
441
|
props: {
|
|
334
442
|
type: {
|
|
@@ -376,7 +484,7 @@ var Be = Object.defineProperty, tt = (e, a) => {
|
|
|
376
484
|
onClick: l
|
|
377
485
|
}, r.default?.());
|
|
378
486
|
}
|
|
379
|
-
}),
|
|
487
|
+
}), mt = yt, bt = /* @__PURE__ */ _({
|
|
380
488
|
name: "KrdsFormGroup",
|
|
381
489
|
props: {
|
|
382
490
|
class: {
|
|
@@ -393,7 +501,7 @@ var Be = Object.defineProperty, tt = (e, a) => {
|
|
|
393
501
|
}
|
|
394
502
|
},
|
|
395
503
|
setup(e, { slots: a }) {
|
|
396
|
-
const r =
|
|
504
|
+
const r = C(() => {
|
|
397
505
|
const l = ["form-group"];
|
|
398
506
|
return e.class && l.push(e.class), l;
|
|
399
507
|
});
|
|
@@ -403,88 +511,88 @@ var Be = Object.defineProperty, tt = (e, a) => {
|
|
|
403
511
|
style: e.style
|
|
404
512
|
}, a.default?.());
|
|
405
513
|
}
|
|
406
|
-
}),
|
|
407
|
-
function
|
|
408
|
-
const r = /* @__PURE__ */ new Date(), l = E(e || r.getFullYear()), n = E(a || r.getMonth() + 1), s = E(null),
|
|
409
|
-
const
|
|
410
|
-
for (let
|
|
411
|
-
return
|
|
412
|
-
}),
|
|
413
|
-
s.value = null,
|
|
414
|
-
}, _ = () => {
|
|
415
|
-
n.value === 1 ? (n.value = 12, l.value -= 1) : n.value -= 1;
|
|
514
|
+
}), kt = bt;
|
|
515
|
+
function St(e, a) {
|
|
516
|
+
const r = /* @__PURE__ */ new Date(), l = E(e || r.getFullYear()), n = E(a || r.getMonth() + 1), s = E(null), u = E(null), g = E(null), h = C(() => {
|
|
517
|
+
const o = r.getFullYear(), i = [];
|
|
518
|
+
for (let p = o - 10; p <= o + 10; p++) i.push(p);
|
|
519
|
+
return i;
|
|
520
|
+
}), y = C(() => Array.from({ length: 12 }, (o, i) => i + 1)), d = () => {
|
|
521
|
+
s.value = null, u.value = null;
|
|
416
522
|
}, S = () => {
|
|
523
|
+
n.value === 1 ? (n.value = 12, l.value -= 1) : n.value -= 1;
|
|
524
|
+
}, k = () => {
|
|
417
525
|
n.value === 12 ? (n.value = 1, l.value += 1) : n.value += 1;
|
|
418
|
-
},
|
|
419
|
-
if (
|
|
420
|
-
s.value =
|
|
421
|
-
else if (!s.value || s.value &&
|
|
422
|
-
s.value =
|
|
526
|
+
}, K = (o, i = !1) => {
|
|
527
|
+
if (i)
|
|
528
|
+
s.value = o, u.value = o;
|
|
529
|
+
else if (!s.value || s.value && u.value)
|
|
530
|
+
s.value = o, u.value = null;
|
|
423
531
|
else {
|
|
424
|
-
const
|
|
425
|
-
new Date(
|
|
532
|
+
const p = new Date(s.value.replace(/\./g, "-"));
|
|
533
|
+
new Date(o.replace(/\./g, "-")) < p ? (s.value = o, u.value = null) : u.value = o;
|
|
426
534
|
}
|
|
427
535
|
};
|
|
428
536
|
return {
|
|
429
537
|
currentYear: l,
|
|
430
538
|
currentMonth: n,
|
|
431
539
|
selectedStartDate: s,
|
|
432
|
-
selectedEndDate:
|
|
433
|
-
activeDateSelector:
|
|
434
|
-
yearOptions:
|
|
435
|
-
monthOptions:
|
|
436
|
-
clearDateSelection:
|
|
437
|
-
prevMonth:
|
|
438
|
-
nextMonth:
|
|
439
|
-
handleDateSelection:
|
|
540
|
+
selectedEndDate: u,
|
|
541
|
+
activeDateSelector: g,
|
|
542
|
+
yearOptions: h,
|
|
543
|
+
monthOptions: y,
|
|
544
|
+
clearDateSelection: d,
|
|
545
|
+
prevMonth: S,
|
|
546
|
+
nextMonth: k,
|
|
547
|
+
handleDateSelection: K,
|
|
440
548
|
selectToday: () => {
|
|
441
|
-
const
|
|
442
|
-
|
|
549
|
+
const o = `${r.getFullYear()}.${String(r.getMonth() + 1).padStart(2, "0")}.${String(r.getDate()).padStart(2, "0")}`;
|
|
550
|
+
K(o, !0);
|
|
443
551
|
},
|
|
444
|
-
isDateInSelectedRange: (
|
|
552
|
+
isDateInSelectedRange: (o) => {
|
|
445
553
|
if (!s.value) return {
|
|
446
554
|
isInRange: !1,
|
|
447
555
|
isStart: !1,
|
|
448
556
|
isEnd: !1
|
|
449
557
|
};
|
|
450
|
-
const
|
|
451
|
-
if (!
|
|
452
|
-
isInRange:
|
|
453
|
-
isStart:
|
|
558
|
+
const i = o === s.value;
|
|
559
|
+
if (!u.value) return {
|
|
560
|
+
isInRange: i,
|
|
561
|
+
isStart: i,
|
|
454
562
|
isEnd: !1
|
|
455
563
|
};
|
|
456
|
-
const
|
|
564
|
+
const p = new Date(o.replace(/\./g, "-")), M = new Date(s.value.replace(/\./g, "-")), A = new Date(u.value.replace(/\./g, "-")), D = o === u.value;
|
|
457
565
|
return {
|
|
458
|
-
isInRange:
|
|
459
|
-
isStart:
|
|
460
|
-
isEnd:
|
|
566
|
+
isInRange: p >= M && p <= A,
|
|
567
|
+
isStart: i,
|
|
568
|
+
isEnd: D
|
|
461
569
|
};
|
|
462
570
|
}
|
|
463
571
|
};
|
|
464
572
|
}
|
|
465
|
-
function
|
|
573
|
+
function wt(e, a, r = {}) {
|
|
466
574
|
let l = null;
|
|
467
|
-
const { ignore: n, event: s = "click" } = typeof r == "string" ? { ignore: r } : r,
|
|
468
|
-
l = (
|
|
469
|
-
const
|
|
470
|
-
e.value?.contains(
|
|
575
|
+
const { ignore: n, event: s = "click" } = typeof r == "string" ? { ignore: r } : r, u = () => {
|
|
576
|
+
l = (h) => {
|
|
577
|
+
const y = h.target;
|
|
578
|
+
e.value?.contains(y) || n && y.closest(n) || a();
|
|
471
579
|
}, document.addEventListener(s, l);
|
|
472
|
-
},
|
|
580
|
+
}, g = () => {
|
|
473
581
|
if (l) {
|
|
474
|
-
const
|
|
475
|
-
document.removeEventListener(
|
|
582
|
+
const h = typeof r == "string" ? "click" : r.event || "click";
|
|
583
|
+
document.removeEventListener(h, l), l = null;
|
|
476
584
|
}
|
|
477
585
|
};
|
|
478
|
-
return
|
|
479
|
-
|
|
480
|
-
}),
|
|
481
|
-
|
|
586
|
+
return ee(() => {
|
|
587
|
+
u();
|
|
588
|
+
}), oe(() => {
|
|
589
|
+
g();
|
|
482
590
|
}), {
|
|
483
|
-
setupGlobalListeners:
|
|
484
|
-
removeGlobalListeners:
|
|
591
|
+
setupGlobalListeners: u,
|
|
592
|
+
removeGlobalListeners: g
|
|
485
593
|
};
|
|
486
594
|
}
|
|
487
|
-
var
|
|
595
|
+
var Kt = [
|
|
488
596
|
"일",
|
|
489
597
|
"월",
|
|
490
598
|
"화",
|
|
@@ -492,7 +600,7 @@ var ht = [
|
|
|
492
600
|
"목",
|
|
493
601
|
"금",
|
|
494
602
|
"토"
|
|
495
|
-
],
|
|
603
|
+
], ke = /* @__PURE__ */ new Set(), Ct = /* @__PURE__ */ _({
|
|
496
604
|
name: "KrdsDateInput",
|
|
497
605
|
props: {
|
|
498
606
|
modelValue: {
|
|
@@ -564,79 +672,79 @@ var ht = [
|
|
|
564
672
|
blur: (e) => !0
|
|
565
673
|
},
|
|
566
674
|
setup(e, { emit: a }) {
|
|
567
|
-
const r = E(), l = E(), n = E(!1), s = E(null),
|
|
568
|
-
|
|
569
|
-
const
|
|
570
|
-
const
|
|
571
|
-
|
|
675
|
+
const r = E(), l = E(), n = E(!1), s = E(null), u = E(!0), g = E(), h = E(!1);
|
|
676
|
+
ee(() => h.value = !0);
|
|
677
|
+
const y = () => {
|
|
678
|
+
const w = l.value?.parentElement?.getBoundingClientRect();
|
|
679
|
+
w && (g.value = {
|
|
572
680
|
position: "absolute",
|
|
573
|
-
top: `${
|
|
574
|
-
left: `${
|
|
575
|
-
width: `${
|
|
681
|
+
top: `${w.bottom + window.scrollY}px`,
|
|
682
|
+
left: `${w.left + window.scrollX}px`,
|
|
683
|
+
width: `${w.width}px`
|
|
576
684
|
});
|
|
577
|
-
},
|
|
578
|
-
const
|
|
579
|
-
if (!
|
|
580
|
-
const I =
|
|
581
|
-
|
|
582
|
-
},
|
|
583
|
-
const
|
|
584
|
-
window[
|
|
685
|
+
}, d = () => {
|
|
686
|
+
const w = l.value?.parentElement?.getBoundingClientRect(), V = r.value?.querySelector(".calendar-wrap");
|
|
687
|
+
if (!w || !V) return;
|
|
688
|
+
const I = w.top, J = window.innerHeight - w.bottom;
|
|
689
|
+
u.value = I >= V.offsetHeight || I >= J, e.teleport && y();
|
|
690
|
+
}, S = (w) => {
|
|
691
|
+
const V = w ? "addEventListener" : "removeEventListener";
|
|
692
|
+
window[V]("scroll", y, { capture: !0 }), window[V]("resize", y);
|
|
585
693
|
};
|
|
586
|
-
|
|
587
|
-
e.teleport &&
|
|
588
|
-
}),
|
|
589
|
-
const { currentYear:
|
|
590
|
-
n.value && l.value?.focus(), n.value = !1, s.value = null,
|
|
694
|
+
se(n, async (w) => {
|
|
695
|
+
e.teleport && S(w), w && (await pe(), d());
|
|
696
|
+
}), oe(() => S(!1));
|
|
697
|
+
const { currentYear: k, currentMonth: K, selectedStartDate: m, selectedEndDate: v, yearOptions: o, monthOptions: i, prevMonth: p, nextMonth: M, handleDateSelection: A, selectToday: D, isDateInSelectedRange: L } = St(e.initialYear, e.initialMonth), $ = () => {
|
|
698
|
+
n.value && l.value?.focus(), n.value = !1, s.value = null, ke.delete($);
|
|
591
699
|
};
|
|
592
|
-
|
|
593
|
-
const f =
|
|
594
|
-
const
|
|
700
|
+
oe(() => ke.delete($)), wt(r, $, ".calendar-conts");
|
|
701
|
+
const f = C(() => {
|
|
702
|
+
const w = [
|
|
595
703
|
"krds-input",
|
|
596
704
|
"datepicker",
|
|
597
705
|
"cal"
|
|
598
706
|
];
|
|
599
|
-
return e.size &&
|
|
600
|
-
}),
|
|
707
|
+
return e.size && w.push(e.size), e.class && w.push(e.class), w;
|
|
708
|
+
}), T = C(() => ["form-conts", "calendar-conts"]), R = C(() => ({
|
|
601
709
|
"krds-calendar-area": !0,
|
|
602
710
|
active: n.value
|
|
603
|
-
})), H =
|
|
604
|
-
const
|
|
711
|
+
})), H = C(() => {
|
|
712
|
+
const w = k.value, V = K.value, I = new Date(w, V - 1, 1), J = new Date(I);
|
|
605
713
|
J.setDate(J.getDate() - I.getDay());
|
|
606
|
-
const
|
|
607
|
-
for (let
|
|
608
|
-
const
|
|
609
|
-
for (let
|
|
610
|
-
const
|
|
611
|
-
|
|
714
|
+
const ie = [], X = new Date(J);
|
|
715
|
+
for (let ae = 0; ae < 6; ae++) {
|
|
716
|
+
const ye = [];
|
|
717
|
+
for (let me = 0; me < 7; me++) {
|
|
718
|
+
const we = `${X.getFullYear()}.${String(X.getMonth() + 1).padStart(2, "0")}.${String(X.getDate()).padStart(2, "0")}`, be = X.getDay();
|
|
719
|
+
ye.push({
|
|
612
720
|
day: X.getDate(),
|
|
613
|
-
dateString:
|
|
614
|
-
isCurrentMonth: X.getMonth() ===
|
|
721
|
+
dateString: we,
|
|
722
|
+
isCurrentMonth: X.getMonth() === V - 1,
|
|
615
723
|
isToday: X.toDateString() === (/* @__PURE__ */ new Date()).toDateString(),
|
|
616
724
|
isPrevMonth: X < I,
|
|
617
|
-
isNextMonth: X.getMonth() !==
|
|
618
|
-
isSunday:
|
|
619
|
-
isSaturday:
|
|
725
|
+
isNextMonth: X.getMonth() !== V - 1 && X > I,
|
|
726
|
+
isSunday: be === 0,
|
|
727
|
+
isSaturday: be === 6
|
|
620
728
|
}), X.setDate(X.getDate() + 1);
|
|
621
729
|
}
|
|
622
|
-
|
|
730
|
+
ie.push(ye);
|
|
623
731
|
}
|
|
624
|
-
return
|
|
625
|
-
}),
|
|
626
|
-
const
|
|
627
|
-
if (
|
|
628
|
-
const I =
|
|
629
|
-
I.isInRange && (
|
|
732
|
+
return ie;
|
|
733
|
+
}), O = (w) => {
|
|
734
|
+
const V = [];
|
|
735
|
+
if (w.isPrevMonth && V.push("old"), w.isNextMonth && V.push("new"), w.isToday && V.push("today"), w.isSunday && V.push("day-off"), e.holidays?.includes(w.dateString) && V.push("day-off"), e.eventDates?.includes(w.dateString) && V.push("day-event"), w.isCurrentMonth) {
|
|
736
|
+
const I = L(w.dateString);
|
|
737
|
+
I.isInRange && (V.push("period"), I.isStart && V.push("start"), I.isEnd && V.push("end"));
|
|
630
738
|
}
|
|
631
|
-
return
|
|
632
|
-
},
|
|
739
|
+
return V;
|
|
740
|
+
}, N = C(() => [
|
|
633
741
|
{
|
|
634
742
|
id: "get-today",
|
|
635
743
|
label: "오늘",
|
|
636
744
|
class: "text",
|
|
637
745
|
variant: void 0,
|
|
638
746
|
size: "small",
|
|
639
|
-
handler:
|
|
747
|
+
handler: D
|
|
640
748
|
},
|
|
641
749
|
{
|
|
642
750
|
id: "cancel-btn",
|
|
@@ -644,7 +752,7 @@ var ht = [
|
|
|
644
752
|
class: void 0,
|
|
645
753
|
variant: "tertiary",
|
|
646
754
|
size: "small",
|
|
647
|
-
handler:
|
|
755
|
+
handler: $
|
|
648
756
|
},
|
|
649
757
|
{
|
|
650
758
|
id: "confirm-btn",
|
|
@@ -652,69 +760,69 @@ var ht = [
|
|
|
652
760
|
class: void 0,
|
|
653
761
|
variant: "primary",
|
|
654
762
|
size: "small",
|
|
655
|
-
handler:
|
|
763
|
+
handler: re
|
|
656
764
|
}
|
|
657
|
-
]), j = (
|
|
658
|
-
r.value?.querySelector(`.btn-cal-switch.${
|
|
659
|
-
}, U = (
|
|
660
|
-
s.value ===
|
|
661
|
-
},
|
|
662
|
-
|
|
663
|
-
},
|
|
664
|
-
|
|
665
|
-
},
|
|
666
|
-
m.value && (
|
|
765
|
+
]), j = (w) => {
|
|
766
|
+
r.value?.querySelector(`.btn-cal-switch.${w}`)?.focus();
|
|
767
|
+
}, U = (w) => {
|
|
768
|
+
s.value === w ? s.value = null : s.value = w;
|
|
769
|
+
}, ce = (w) => {
|
|
770
|
+
k.value = w, s.value = null;
|
|
771
|
+
}, he = (w) => {
|
|
772
|
+
K.value = w, s.value = null;
|
|
773
|
+
}, re = () => {
|
|
774
|
+
m.value && (v.value && m.value !== v.value ? a("update:modelValue", `${m.value} ~ ${v.value}`) : a("update:modelValue", m.value), $());
|
|
667
775
|
}, Q = () => {
|
|
668
|
-
|
|
776
|
+
ke.forEach((w) => w()), ke.add($), n.value = !0, s.value = null, setTimeout(() => {
|
|
669
777
|
r.value?.querySelector(".calendar-wrap")?.focus();
|
|
670
778
|
}, 50);
|
|
671
|
-
},
|
|
672
|
-
n.value ?
|
|
673
|
-
},
|
|
674
|
-
|
|
675
|
-
},
|
|
676
|
-
const
|
|
677
|
-
a("update:modelValue",
|
|
678
|
-
},
|
|
679
|
-
a("change",
|
|
680
|
-
}, P = (
|
|
681
|
-
a("focus",
|
|
682
|
-
},
|
|
683
|
-
a("blur",
|
|
684
|
-
}, G = (
|
|
685
|
-
const
|
|
779
|
+
}, fe = () => {
|
|
780
|
+
n.value ? $() : Q();
|
|
781
|
+
}, te = (w) => {
|
|
782
|
+
w.code === "Escape" && (s.value ? s.value = null : n.value && $());
|
|
783
|
+
}, ve = (w) => {
|
|
784
|
+
const V = w.target;
|
|
785
|
+
a("update:modelValue", V.value), a("input", w);
|
|
786
|
+
}, ne = (w) => {
|
|
787
|
+
a("change", w);
|
|
788
|
+
}, P = (w) => {
|
|
789
|
+
a("focus", w);
|
|
790
|
+
}, z = (w) => {
|
|
791
|
+
a("blur", w);
|
|
792
|
+
}, G = (w) => {
|
|
793
|
+
const V = w === "year", I = V ? o.value : i.value, J = V ? k.value : K.value, ie = (ae) => V ? `${ae}년` : `${ae.toString().padStart(2, "0")}월`, X = s.value === w;
|
|
686
794
|
return t("div", { class: "calendar-drop-down" }, [t("button", {
|
|
687
795
|
type: "button",
|
|
688
|
-
class: `btn-cal-switch ${
|
|
689
|
-
"aria-label":
|
|
796
|
+
class: `btn-cal-switch ${w}`,
|
|
797
|
+
"aria-label": V ? "연도 선택" : "월 선택",
|
|
690
798
|
"aria-expanded": X,
|
|
691
|
-
onClick: () => U(
|
|
692
|
-
},
|
|
799
|
+
onClick: () => U(w)
|
|
800
|
+
}, ie(J)), ge(t("div", { class: [
|
|
693
801
|
"calendar-select",
|
|
694
|
-
|
|
802
|
+
V ? "calendar-year-wrap" : "calendar-mon-wrap",
|
|
695
803
|
{ active: X }
|
|
696
|
-
] }, [t("ul", { class: `sel ${
|
|
804
|
+
] }, [t("ul", { class: `sel ${w}` }, I.map((ae) => t("li", { key: ae }, [t("button", {
|
|
697
805
|
type: "button",
|
|
698
|
-
class: { active:
|
|
806
|
+
class: { active: ae === J },
|
|
699
807
|
onClick: () => {
|
|
700
|
-
|
|
808
|
+
V ? ce(ae) : he(ae), j(w);
|
|
701
809
|
}
|
|
702
|
-
},
|
|
810
|
+
}, ie(ae))])))]), [[Se, X]])]);
|
|
703
811
|
}, q = () => t("table", { class: "calendar-tbl" }, [
|
|
704
|
-
t("caption", null, `${
|
|
705
|
-
t("thead", null, [t("tr", null,
|
|
706
|
-
t("tbody", null, H.value.map((
|
|
812
|
+
t("caption", null, `${k.value}년 ${K.value.toString().padStart(2, "0")}월`),
|
|
813
|
+
t("thead", null, [t("tr", null, Kt.map((w) => t("th", null, w)))]),
|
|
814
|
+
t("tbody", null, H.value.map((w, V) => t("tr", { key: V }, w.map((I, J) => t("td", {
|
|
707
815
|
key: J,
|
|
708
|
-
class:
|
|
816
|
+
class: O(I),
|
|
709
817
|
"data-date": I.dateString
|
|
710
818
|
}, [t("button", {
|
|
711
819
|
type: "button",
|
|
712
820
|
class: "btn-set-date",
|
|
713
|
-
"aria-pressed":
|
|
714
|
-
onClick: () =>
|
|
821
|
+
"aria-pressed": L(I.dateString).isInRange ? "true" : "false",
|
|
822
|
+
onClick: () => A(I.dateString)
|
|
715
823
|
}, [t("span", null, String(I.day))])])))))
|
|
716
824
|
]);
|
|
717
|
-
return () => t("div", { class: "form-conts" }, [t("div", { class:
|
|
825
|
+
return () => t("div", { class: "form-conts" }, [t("div", { class: T.value }, [t("div", { class: "calendar-input" }, [t("input", {
|
|
718
826
|
id: e.id,
|
|
719
827
|
name: e.name,
|
|
720
828
|
class: f.value,
|
|
@@ -725,55 +833,55 @@ var ht = [
|
|
|
725
833
|
required: e.required,
|
|
726
834
|
autofocus: e.autofocus,
|
|
727
835
|
type: "text",
|
|
728
|
-
onInput:
|
|
729
|
-
onChange:
|
|
836
|
+
onInput: ve,
|
|
837
|
+
onChange: ne,
|
|
730
838
|
onFocus: P,
|
|
731
|
-
onBlur:
|
|
839
|
+
onBlur: z
|
|
732
840
|
}), t("button", {
|
|
733
841
|
ref: l,
|
|
734
842
|
class: `krds-btn ${e.size || "medium"} icon form-btn-datepicker`,
|
|
735
843
|
disabled: e.disabled,
|
|
736
844
|
"aria-expanded": n.value,
|
|
737
845
|
type: "button",
|
|
738
|
-
onClick:
|
|
846
|
+
onClick: fe
|
|
739
847
|
}, [t("span", { class: "sr-only" }, "달력 열기"), t("i", { class: "svg-icon ico-calendar" })])]), t(Ce, {
|
|
740
848
|
to: "body",
|
|
741
|
-
disabled: !(e.teleport &&
|
|
849
|
+
disabled: !(e.teleport && h.value)
|
|
742
850
|
}, [t("div", {
|
|
743
851
|
ref: r,
|
|
744
852
|
class: R.value,
|
|
745
|
-
style: e.teleport ?
|
|
746
|
-
}, [
|
|
747
|
-
class: ["calendar-wrap", { bottom:
|
|
853
|
+
style: e.teleport ? g.value : void 0
|
|
854
|
+
}, [ge(t("div", {
|
|
855
|
+
class: ["calendar-wrap", { bottom: u.value }],
|
|
748
856
|
"aria-label": "달력",
|
|
749
857
|
tabindex: "0",
|
|
750
|
-
onKeydown:
|
|
858
|
+
onKeydown: te
|
|
751
859
|
}, [
|
|
752
860
|
t("div", { class: "calendar-head" }, [
|
|
753
861
|
t("button", {
|
|
754
862
|
type: "button",
|
|
755
863
|
class: "btn-cal-move prev",
|
|
756
|
-
onClick:
|
|
864
|
+
onClick: p
|
|
757
865
|
}, [t("span", { class: "sr-only" }, "이전 달")]),
|
|
758
866
|
t("div", { class: "calendar-switch-wrap" }, [G("year"), G("month")]),
|
|
759
867
|
t("button", {
|
|
760
868
|
type: "button",
|
|
761
869
|
class: "btn-cal-move next",
|
|
762
|
-
onClick:
|
|
870
|
+
onClick: M
|
|
763
871
|
}, [t("span", { class: "sr-only" }, "다음 달")])
|
|
764
872
|
]),
|
|
765
873
|
t("div", { class: "calendar-body" }, [t("div", { class: "calendar-table-wrap" }, [q()])]),
|
|
766
|
-
t("div", { class: "calendar-footer" }, [t("div", { class: "calendar-btn-wrap" },
|
|
767
|
-
id:
|
|
768
|
-
key:
|
|
769
|
-
class:
|
|
770
|
-
variant:
|
|
771
|
-
size:
|
|
772
|
-
onClick:
|
|
773
|
-
}, { default: () =>
|
|
774
|
-
]), [[
|
|
874
|
+
t("div", { class: "calendar-footer" }, [t("div", { class: "calendar-btn-wrap" }, N.value.map((w) => t(Fe, {
|
|
875
|
+
id: w.id,
|
|
876
|
+
key: w.id,
|
|
877
|
+
class: w.class,
|
|
878
|
+
variant: w.variant,
|
|
879
|
+
size: w.size,
|
|
880
|
+
onClick: w.handler
|
|
881
|
+
}, { default: () => w.label })))])
|
|
882
|
+
]), [[Se, n.value]])])])])]);
|
|
775
883
|
}
|
|
776
|
-
}),
|
|
884
|
+
}), xt = Ct, $t = /* @__PURE__ */ _({
|
|
777
885
|
name: "KrdsTextarea",
|
|
778
886
|
props: {
|
|
779
887
|
modelValue: {
|
|
@@ -852,30 +960,30 @@ var ht = [
|
|
|
852
960
|
},
|
|
853
961
|
setup(e, { emit: a }) {
|
|
854
962
|
const r = E(0);
|
|
855
|
-
|
|
856
|
-
r.value = (
|
|
963
|
+
se(() => e.modelValue, (v) => {
|
|
964
|
+
r.value = (v || "").length;
|
|
857
965
|
}, { immediate: !0 });
|
|
858
|
-
const l =
|
|
859
|
-
const
|
|
860
|
-
return e.size &&
|
|
861
|
-
}), n =
|
|
862
|
-
const
|
|
863
|
-
return e.resize && (
|
|
864
|
-
}), s = (
|
|
865
|
-
const
|
|
866
|
-
r.value =
|
|
867
|
-
},
|
|
868
|
-
a("change",
|
|
869
|
-
},
|
|
870
|
-
a("focus",
|
|
871
|
-
},
|
|
872
|
-
a("blur",
|
|
873
|
-
},
|
|
874
|
-
a("keydown",
|
|
875
|
-
},
|
|
876
|
-
a("keyup",
|
|
877
|
-
},
|
|
878
|
-
const
|
|
966
|
+
const l = C(() => {
|
|
967
|
+
const v = ["krds-input"];
|
|
968
|
+
return e.size && v.push(e.size), e.class && v.push(e.class), v;
|
|
969
|
+
}), n = C(() => {
|
|
970
|
+
const v = {};
|
|
971
|
+
return e.resize && (v.resize = e.resize), v;
|
|
972
|
+
}), s = (v) => {
|
|
973
|
+
const o = v.target.value;
|
|
974
|
+
r.value = o.length, a("update:modelValue", o), a("input", v);
|
|
975
|
+
}, u = (v) => {
|
|
976
|
+
a("change", v);
|
|
977
|
+
}, g = (v) => {
|
|
978
|
+
a("focus", v);
|
|
979
|
+
}, h = (v) => {
|
|
980
|
+
a("blur", v);
|
|
981
|
+
}, y = (v) => {
|
|
982
|
+
a("keydown", v);
|
|
983
|
+
}, d = (v) => {
|
|
984
|
+
a("keyup", v);
|
|
985
|
+
}, S = C(() => {
|
|
986
|
+
const v = {
|
|
879
987
|
class: l.value,
|
|
880
988
|
style: n.value,
|
|
881
989
|
value: e.modelValue,
|
|
@@ -889,23 +997,23 @@ var ht = [
|
|
|
889
997
|
rows: e.rows,
|
|
890
998
|
cols: e.cols,
|
|
891
999
|
onInput: s,
|
|
892
|
-
onChange:
|
|
893
|
-
onFocus:
|
|
894
|
-
onBlur:
|
|
895
|
-
onKeydown:
|
|
896
|
-
onKeyup:
|
|
1000
|
+
onChange: u,
|
|
1001
|
+
onFocus: g,
|
|
1002
|
+
onBlur: h,
|
|
1003
|
+
onKeydown: y,
|
|
1004
|
+
onKeyup: d
|
|
897
1005
|
};
|
|
898
|
-
return e.maxlength !== void 0 && (
|
|
899
|
-
}),
|
|
1006
|
+
return e.maxlength !== void 0 && (v.maxlength = e.maxlength), e.minlength !== void 0 && (v.minlength = e.minlength), v;
|
|
1007
|
+
}), k = C(() => ["form-conts"]), K = C(() => ["textarea-wrap"]), m = C(() => e.showCount ? {
|
|
900
1008
|
current: r.value,
|
|
901
1009
|
max: e.maxlength || ""
|
|
902
1010
|
} : null);
|
|
903
1011
|
return () => {
|
|
904
|
-
const
|
|
905
|
-
return m.value &&
|
|
1012
|
+
const v = [t("textarea", S.value)];
|
|
1013
|
+
return m.value && v.push(t("p", { class: "textarea-count" }, [t("span", { class: "count-now" }, m.value.current), t("span", { class: "count-total" }, m.value.max ? `/${m.value.max}` : "")])), t("div", { class: k.value }, [t("div", { class: K.value }, v)]);
|
|
906
1014
|
};
|
|
907
1015
|
}
|
|
908
|
-
}),
|
|
1016
|
+
}), Lt = $t, Bt = /* @__PURE__ */ _({
|
|
909
1017
|
name: "KrdsSelect",
|
|
910
1018
|
props: {
|
|
911
1019
|
modelValue: {
|
|
@@ -967,17 +1075,17 @@ var ht = [
|
|
|
967
1075
|
blur: (e) => !0
|
|
968
1076
|
},
|
|
969
1077
|
setup(e, { emit: a, slots: r }) {
|
|
970
|
-
const l =
|
|
971
|
-
const
|
|
972
|
-
return e.sort ?
|
|
973
|
-
}), n = (
|
|
974
|
-
const
|
|
975
|
-
a("update:modelValue",
|
|
976
|
-
}, s = (
|
|
977
|
-
a("focus",
|
|
978
|
-
},
|
|
979
|
-
a("blur",
|
|
980
|
-
},
|
|
1078
|
+
const l = C(() => {
|
|
1079
|
+
const d = [];
|
|
1080
|
+
return e.sort ? d.push("krds-form-select-sort") : d.push("krds-form-select"), e.size && d.push(e.size), e.class && d.push(e.class), d;
|
|
1081
|
+
}), n = (d) => {
|
|
1082
|
+
const S = d.target;
|
|
1083
|
+
a("update:modelValue", S.value === "" ? null : S.value);
|
|
1084
|
+
}, s = (d) => {
|
|
1085
|
+
a("focus", d);
|
|
1086
|
+
}, u = (d) => {
|
|
1087
|
+
a("blur", d);
|
|
1088
|
+
}, g = C(() => ({
|
|
981
1089
|
class: l.value,
|
|
982
1090
|
value: e.modelValue ?? "",
|
|
983
1091
|
title: e.title || e.placeholder,
|
|
@@ -986,30 +1094,30 @@ var ht = [
|
|
|
986
1094
|
disabled: e.disabled || e.readonly,
|
|
987
1095
|
onChange: n,
|
|
988
1096
|
onFocus: s,
|
|
989
|
-
onBlur:
|
|
990
|
-
})),
|
|
991
|
-
const
|
|
992
|
-
return e.state !== "default" &&
|
|
993
|
-
}),
|
|
994
|
-
const
|
|
995
|
-
return e.placeholder && !e.modelValue &&
|
|
1097
|
+
onBlur: u
|
|
1098
|
+
})), h = C(() => {
|
|
1099
|
+
const d = ["form-conts"];
|
|
1100
|
+
return e.state !== "default" && d.push(`is-${e.state}`), d;
|
|
1101
|
+
}), y = () => {
|
|
1102
|
+
const d = [];
|
|
1103
|
+
return e.placeholder && !e.modelValue && d.push(t("option", {
|
|
996
1104
|
value: "",
|
|
997
1105
|
disabled: !0,
|
|
998
1106
|
selected: !0
|
|
999
|
-
}, e.placeholder)), e.options && e.options.length > 0 && e.options.forEach((
|
|
1000
|
-
|
|
1001
|
-
value:
|
|
1002
|
-
disabled:
|
|
1003
|
-
selected:
|
|
1004
|
-
},
|
|
1005
|
-
}), r.default &&
|
|
1107
|
+
}, e.placeholder)), e.options && e.options.length > 0 && e.options.forEach((S) => {
|
|
1108
|
+
d.push(t("option", {
|
|
1109
|
+
value: S.value,
|
|
1110
|
+
disabled: S.disabled,
|
|
1111
|
+
selected: S.value === e.modelValue
|
|
1112
|
+
}, S.label));
|
|
1113
|
+
}), r.default && d.push(...r.default()), d;
|
|
1006
1114
|
};
|
|
1007
1115
|
return () => {
|
|
1008
|
-
const
|
|
1009
|
-
return e.sort ?
|
|
1116
|
+
const d = t("select", g.value, y());
|
|
1117
|
+
return e.sort ? d : t("div", { class: h.value }, [d]);
|
|
1010
1118
|
};
|
|
1011
1119
|
}
|
|
1012
|
-
}),
|
|
1120
|
+
}), Et = Bt, Dt = 0, Tt = /* @__PURE__ */ _({
|
|
1013
1121
|
name: "KrdsFileUpload",
|
|
1014
1122
|
props: {
|
|
1015
1123
|
modelValue: {
|
|
@@ -1111,65 +1219,65 @@ var ht = [
|
|
|
1111
1219
|
preview: (e) => !0
|
|
1112
1220
|
},
|
|
1113
1221
|
setup(e, { emit: a }) {
|
|
1114
|
-
const r = E(!1), l = E(null), n = e.id ? `${e.id}-input` : `krds-file-upload-${++
|
|
1115
|
-
const
|
|
1116
|
-
return
|
|
1117
|
-
},
|
|
1118
|
-
const
|
|
1119
|
-
return
|
|
1120
|
-
},
|
|
1222
|
+
const r = E(!1), l = E(null), n = e.id ? `${e.id}-input` : `krds-file-upload-${++Dt}`, s = (f) => f < 1024 ? `${f}B` : f < 1048576 ? `${Math.round(f / 1024)}KB` : `${Number((f / 1048576).toFixed(1))}MB`, u = (f) => {
|
|
1223
|
+
const T = f.split(".");
|
|
1224
|
+
return T.length > 1 ? T.pop().toLowerCase() : "";
|
|
1225
|
+
}, g = (f) => {
|
|
1226
|
+
const T = u(f.name), R = T ? f.name.slice(0, -(T.length + 1)) : f.name;
|
|
1227
|
+
return T ? `${R} [${T}, ${s(f.size)}]` : `${f.name} [${s(f.size)}]`;
|
|
1228
|
+
}, h = () => `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`, y = (f) => {
|
|
1121
1229
|
if (e.maxFileSize && f.size >= e.maxFileSize) return `등록 가능한 파일 용량을 초과하였습니다.
|
|
1122
1230
|
${s(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
|
|
1123
1231
|
if (e.accept) {
|
|
1124
|
-
const
|
|
1125
|
-
if (!
|
|
1232
|
+
const T = e.accept.split(",").map((O) => O.trim().toLowerCase()), R = `.${u(f.name)}`, H = f.type;
|
|
1233
|
+
if (!T.some((O) => O.startsWith(".") ? R === O : O.endsWith("/*") ? H.startsWith(O.replace("/*", "/")) : H === O)) return "허용되지 않는 파일 형식입니다.";
|
|
1126
1234
|
}
|
|
1127
1235
|
return null;
|
|
1128
|
-
},
|
|
1236
|
+
}, d = (f) => {
|
|
1129
1237
|
if (e.disabled || e.readonly) return;
|
|
1130
|
-
let
|
|
1131
|
-
!e.multiple &&
|
|
1238
|
+
let T = [...e.modelValue || []];
|
|
1239
|
+
!e.multiple && T.length > 0 && (T = []);
|
|
1132
1240
|
const R = [];
|
|
1133
|
-
let H =
|
|
1134
|
-
const
|
|
1135
|
-
for (const
|
|
1241
|
+
let H = T.filter((N) => N.status !== "error").length;
|
|
1242
|
+
const O = e.multiple ? Array.from(f) : Array.from(f).slice(0, 1);
|
|
1243
|
+
for (const N of O) {
|
|
1136
1244
|
if (H >= e.maxFiles) break;
|
|
1137
|
-
const j =
|
|
1245
|
+
const j = y(N);
|
|
1138
1246
|
j || H++;
|
|
1139
1247
|
const U = {
|
|
1140
|
-
id:
|
|
1141
|
-
file:
|
|
1142
|
-
name:
|
|
1143
|
-
size:
|
|
1144
|
-
type:
|
|
1248
|
+
id: h(),
|
|
1249
|
+
file: N,
|
|
1250
|
+
name: N.name,
|
|
1251
|
+
size: N.size,
|
|
1252
|
+
type: N.type,
|
|
1145
1253
|
status: j ? "error" : "pending",
|
|
1146
1254
|
errorMessage: j || void 0
|
|
1147
1255
|
};
|
|
1148
1256
|
R.push(U), j ? a("file-error", U, j) : a("file-added", U);
|
|
1149
1257
|
}
|
|
1150
|
-
R.length > 0 && a("update:modelValue", [...
|
|
1151
|
-
}, _ = (f) => {
|
|
1152
|
-
const B = f.target;
|
|
1153
|
-
B.files?.length && (c(B.files), B.value = "");
|
|
1258
|
+
R.length > 0 && a("update:modelValue", [...T, ...R]);
|
|
1154
1259
|
}, S = (f) => {
|
|
1260
|
+
const T = f.target;
|
|
1261
|
+
T.files?.length && (d(T.files), T.value = "");
|
|
1262
|
+
}, k = (f) => {
|
|
1155
1263
|
e.disabled || e.readonly || !e.dragAndDrop || (f.preventDefault(), r.value = !0);
|
|
1156
|
-
},
|
|
1264
|
+
}, K = () => {
|
|
1157
1265
|
r.value = !1;
|
|
1158
1266
|
}, m = (f) => {
|
|
1159
|
-
f.preventDefault(), r.value = !1, !(e.disabled || e.readonly || !e.dragAndDrop) && f.dataTransfer?.files &&
|
|
1160
|
-
},
|
|
1267
|
+
f.preventDefault(), r.value = !1, !(e.disabled || e.readonly || !e.dragAndDrop) && f.dataTransfer?.files && d(f.dataTransfer.files);
|
|
1268
|
+
}, v = () => {
|
|
1161
1269
|
e.disabled || e.readonly || l.value?.click();
|
|
1162
|
-
},
|
|
1163
|
-
e.disabled || e.readonly || (a("update:modelValue", (e.modelValue || []).filter((
|
|
1164
|
-
},
|
|
1270
|
+
}, o = (f) => {
|
|
1271
|
+
e.disabled || e.readonly || (a("update:modelValue", (e.modelValue || []).filter((T) => T.id !== f)), a("file-removed", f));
|
|
1272
|
+
}, i = () => {
|
|
1165
1273
|
e.disabled || e.readonly || (a("update:modelValue", []), a("clear-all"));
|
|
1166
|
-
},
|
|
1274
|
+
}, p = C(() => {
|
|
1167
1275
|
const f = ["krds-file-upload", "line"];
|
|
1168
1276
|
return e.class && f.push(e.class), f;
|
|
1169
|
-
}),
|
|
1277
|
+
}), M = () => t("div", { class: "file-head" }, [t("h3", { class: "tit" }, e.title), t("div", null, [t("p", null, e.description)])]), A = () => t("div", {
|
|
1170
1278
|
class: ["file-upload", { active: r.value }],
|
|
1171
|
-
onDragover:
|
|
1172
|
-
onDragleave:
|
|
1279
|
+
onDragover: k,
|
|
1280
|
+
onDragleave: K,
|
|
1173
1281
|
onDrop: m
|
|
1174
1282
|
}, [t("p", { class: "txt" }, e.placeholder), t("div", { class: "file-upload-btn-wrap" }, [t("input", {
|
|
1175
1283
|
ref: l,
|
|
@@ -1179,64 +1287,64 @@ ${s(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
|
|
|
1179
1287
|
hidden: !0,
|
|
1180
1288
|
accept: e.accept || void 0,
|
|
1181
1289
|
multiple: e.multiple,
|
|
1182
|
-
onChange:
|
|
1290
|
+
onChange: S
|
|
1183
1291
|
}), t("label", { for: n }, [t("button", {
|
|
1184
1292
|
type: "button",
|
|
1185
1293
|
class: ["krds-btn", e.size],
|
|
1186
1294
|
disabled: e.disabled || void 0,
|
|
1187
|
-
onClick:
|
|
1188
|
-
}, [t("i", { class: "svg-icon ico-upload" }), "파일선택"])])])]),
|
|
1189
|
-
const
|
|
1190
|
-
return f.status === "uploading" ?
|
|
1295
|
+
onClick: v
|
|
1296
|
+
}, [t("i", { class: "svg-icon ico-upload" }), "파일선택"])])])]), D = (f) => {
|
|
1297
|
+
const T = [];
|
|
1298
|
+
return f.status === "uploading" ? T.push(t("span", {
|
|
1191
1299
|
class: "krds-spinner",
|
|
1192
1300
|
role: "status"
|
|
1193
|
-
}, [t("span", { class: "sr-only" }, "업로드 중")])) : f.downloadUrl ? (e.showDownload &&
|
|
1301
|
+
}, [t("span", { class: "sr-only" }, "업로드 중")])) : f.downloadUrl ? (e.showDownload && T.push(t("button", {
|
|
1194
1302
|
type: "button",
|
|
1195
1303
|
class: "krds-btn medium text",
|
|
1196
1304
|
onClick: () => a("download", f)
|
|
1197
|
-
}, ["다운로드 ", t("i", { class: "svg-icon ico-down" })])), e.showPreviewButton &&
|
|
1305
|
+
}, ["다운로드 ", t("i", { class: "svg-icon ico-down" })])), e.showPreviewButton && T.push(t("button", {
|
|
1198
1306
|
type: "button",
|
|
1199
1307
|
class: "krds-btn medium text",
|
|
1200
1308
|
onClick: () => a("preview", f)
|
|
1201
|
-
}, ["바로보기 ", t("i", { class: "svg-icon ico-angle right" })]))) : f.status === "completed" ?
|
|
1309
|
+
}, ["바로보기 ", t("i", { class: "svg-icon ico-angle right" })]))) : f.status === "completed" ? T.push(t("span", { class: "ico-invalid complete" }, [t("em", { class: "sr-only" }, "업로드 완료")])) : e.readonly || T.push(t("button", {
|
|
1202
1310
|
type: "button",
|
|
1203
1311
|
class: "krds-btn medium text",
|
|
1204
1312
|
disabled: e.disabled || void 0,
|
|
1205
|
-
onClick: () =>
|
|
1206
|
-
}, ["삭제 ", t("i", { class: "svg-icon ico-delete-fill" })])),
|
|
1207
|
-
},
|
|
1208
|
-
const
|
|
1313
|
+
onClick: () => o(f.id)
|
|
1314
|
+
}, ["삭제 ", t("i", { class: "svg-icon ico-delete-fill" })])), T;
|
|
1315
|
+
}, L = (f) => {
|
|
1316
|
+
const T = [t("div", { class: f.downloadUrl ? "file-info m-column" : "file-info" }, [t("div", { class: "file-name" }, g(f)), t("div", { class: "btn-wrap" }, D(f))])];
|
|
1209
1317
|
if (f.status === "error" && f.errorMessage) {
|
|
1210
1318
|
const R = f.errorMessage.split(`
|
|
1211
1319
|
`), H = [];
|
|
1212
|
-
R.forEach((
|
|
1213
|
-
|
|
1214
|
-
}),
|
|
1320
|
+
R.forEach((O, N) => {
|
|
1321
|
+
N > 0 && H.push(t("br")), H.push(O);
|
|
1322
|
+
}), T.push(t("p", { class: "file-hint-invalid" }, H));
|
|
1215
1323
|
}
|
|
1216
1324
|
return t("li", {
|
|
1217
1325
|
key: f.id,
|
|
1218
1326
|
class: f.status === "error" ? "is-error" : void 0
|
|
1219
|
-
},
|
|
1220
|
-
},
|
|
1221
|
-
const
|
|
1327
|
+
}, T);
|
|
1328
|
+
}, $ = (f) => {
|
|
1329
|
+
const T = f.filter((H) => H.status !== "error").length, R = [t("div", { class: "total" }, [t("span", { class: "current" }, `${T}개`), ` / ${e.maxFiles}개`]), t("ul", { class: "upload-list" }, f.map(L))];
|
|
1222
1330
|
return e.showClearAll && !e.readonly && R.push(t("div", { class: "upload-delete-btn" }, [t("button", {
|
|
1223
1331
|
type: "button",
|
|
1224
1332
|
class: "krds-btn xsmall tertiary",
|
|
1225
1333
|
disabled: e.disabled || void 0,
|
|
1226
|
-
onClick:
|
|
1334
|
+
onClick: i
|
|
1227
1335
|
}, ["전체 파일 삭제", t("i", { class: "svg-icon ico-angle right" })])])), t("div", { class: "file-list" }, R);
|
|
1228
1336
|
};
|
|
1229
1337
|
return () => {
|
|
1230
|
-
const f = [
|
|
1231
|
-
e.readonly || f.push(
|
|
1232
|
-
const
|
|
1233
|
-
return
|
|
1234
|
-
class:
|
|
1338
|
+
const f = [M()];
|
|
1339
|
+
e.readonly || f.push(A());
|
|
1340
|
+
const T = e.modelValue || [];
|
|
1341
|
+
return T.length > 0 && f.push($(T)), t("div", {
|
|
1342
|
+
class: p.value,
|
|
1235
1343
|
style: e.style || void 0
|
|
1236
1344
|
}, f);
|
|
1237
1345
|
};
|
|
1238
1346
|
}
|
|
1239
|
-
}),
|
|
1347
|
+
}), At = Tt, _t = /* @__PURE__ */ _({
|
|
1240
1348
|
name: "KrdsBadge",
|
|
1241
1349
|
props: {
|
|
1242
1350
|
type: {
|
|
@@ -1262,7 +1370,7 @@ ${s(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
|
|
|
1262
1370
|
},
|
|
1263
1371
|
emits: { click: (e) => !0 },
|
|
1264
1372
|
setup(e, { emit: a, slots: r }) {
|
|
1265
|
-
const l =
|
|
1373
|
+
const l = C(() => {
|
|
1266
1374
|
const s = ["krds-badge"];
|
|
1267
1375
|
return s.push(`${e.type}-${e.color}`), e.size && s.push(e.size), e.number && s.push("number"), e.class && s.push(e.class), s;
|
|
1268
1376
|
}), n = (s) => {
|
|
@@ -1277,7 +1385,7 @@ ${s(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
|
|
|
1277
1385
|
onClick: n
|
|
1278
1386
|
}, r.default?.());
|
|
1279
1387
|
}
|
|
1280
|
-
}),
|
|
1388
|
+
}), Mt = _t, Vt = /* @__PURE__ */ _({
|
|
1281
1389
|
name: "KrdsTag",
|
|
1282
1390
|
props: {
|
|
1283
1391
|
link: {
|
|
@@ -1303,29 +1411,29 @@ ${s(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
|
|
|
1303
1411
|
},
|
|
1304
1412
|
emits: { remove: (e) => !0 },
|
|
1305
1413
|
setup(e, { emit: a, slots: r }) {
|
|
1306
|
-
const l =
|
|
1307
|
-
const
|
|
1308
|
-
return e.link &&
|
|
1309
|
-
}), n = (
|
|
1310
|
-
a("remove",
|
|
1414
|
+
const l = C(() => {
|
|
1415
|
+
const u = ["krds-btn-tag"];
|
|
1416
|
+
return e.link && u.push("link"), e.class && u.push(e.class), u;
|
|
1417
|
+
}), n = (u) => {
|
|
1418
|
+
a("remove", u);
|
|
1311
1419
|
}, s = () => t("button", {
|
|
1312
1420
|
type: "button",
|
|
1313
1421
|
class: "btn-delete",
|
|
1314
1422
|
onClick: n
|
|
1315
1423
|
}, [t("span", { class: "sr-only" }, "삭제")]);
|
|
1316
1424
|
return () => {
|
|
1317
|
-
const
|
|
1318
|
-
if (
|
|
1319
|
-
const
|
|
1425
|
+
const u = [], g = r.default?.();
|
|
1426
|
+
if (g && u.push(g), e.link || u.push(s()), e.link) {
|
|
1427
|
+
const h = {
|
|
1320
1428
|
href: e.href,
|
|
1321
1429
|
class: l.value
|
|
1322
1430
|
};
|
|
1323
|
-
return e.target && (
|
|
1431
|
+
return e.target && (h.target = e.target), e.rel && (h.rel = e.rel), t("a", h, u);
|
|
1324
1432
|
}
|
|
1325
|
-
return t("span", { class: l.value },
|
|
1433
|
+
return t("span", { class: l.value }, u);
|
|
1326
1434
|
};
|
|
1327
1435
|
}
|
|
1328
|
-
}),
|
|
1436
|
+
}), Ft = Vt, Pt = /* @__PURE__ */ _({
|
|
1329
1437
|
name: "KrdsTagGroup",
|
|
1330
1438
|
props: {
|
|
1331
1439
|
size: {
|
|
@@ -1338,13 +1446,13 @@ ${s(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
|
|
|
1338
1446
|
}
|
|
1339
1447
|
},
|
|
1340
1448
|
setup(e, { slots: a }) {
|
|
1341
|
-
const r =
|
|
1449
|
+
const r = C(() => {
|
|
1342
1450
|
const l = ["krds-tag-wrap"];
|
|
1343
1451
|
return e.size && l.push(e.size), e.class && l.push(e.class), l;
|
|
1344
1452
|
});
|
|
1345
1453
|
return () => t("div", { class: r.value }, a.default?.());
|
|
1346
1454
|
}
|
|
1347
|
-
}),
|
|
1455
|
+
}), zt = Pt, Rt = /* @__PURE__ */ _({
|
|
1348
1456
|
name: "KrdsMasthead",
|
|
1349
1457
|
props: { class: {
|
|
1350
1458
|
type: String,
|
|
@@ -1352,7 +1460,7 @@ ${s(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
|
|
|
1352
1460
|
} },
|
|
1353
1461
|
emits: { click: (e) => !0 },
|
|
1354
1462
|
setup(e, { emit: a, slots: r }) {
|
|
1355
|
-
const l =
|
|
1463
|
+
const l = C(() => {
|
|
1356
1464
|
const s = [""];
|
|
1357
1465
|
return e.class && s.push(e.class), s;
|
|
1358
1466
|
}), n = (s) => {
|
|
@@ -1364,17 +1472,17 @@ ${s(e.maxFileSize)} 미만의 파일만 등록할 수 있습니다.`;
|
|
|
1364
1472
|
onClick: n
|
|
1365
1473
|
}, [t("div", { class: "toggle-wrap" }, [t("div", { class: "toggle-head" }, [t("div", { class: "inner" }, [t("span", { class: "nuri-txt" }, r.default?.())])])])]);
|
|
1366
1474
|
}
|
|
1367
|
-
}),
|
|
1368
|
-
function
|
|
1369
|
-
return `${e}-${++
|
|
1475
|
+
}), It = Rt, Ht = 0;
|
|
1476
|
+
function cl(e = "krds") {
|
|
1477
|
+
return `${e}-${++Ht}`;
|
|
1370
1478
|
}
|
|
1371
|
-
function
|
|
1479
|
+
function fl() {
|
|
1372
1480
|
return `${Date.now().toString(36).slice(-4)}${Math.random().toString(36).substring(2, 5)}`;
|
|
1373
1481
|
}
|
|
1374
1482
|
function $e(...e) {
|
|
1375
1483
|
return e.filter(Boolean).join(" ");
|
|
1376
1484
|
}
|
|
1377
|
-
var
|
|
1485
|
+
var Ot = /* @__PURE__ */ _({
|
|
1378
1486
|
name: "KrdsToggleSwitch",
|
|
1379
1487
|
props: {
|
|
1380
1488
|
modelValue: {
|
|
@@ -1420,22 +1528,22 @@ var Vt = /* @__PURE__ */ A({
|
|
|
1420
1528
|
change: (e) => !0
|
|
1421
1529
|
},
|
|
1422
1530
|
setup(e, { emit: a, attrs: r }) {
|
|
1423
|
-
const l = `toggle-switch-${
|
|
1531
|
+
const l = `toggle-switch-${de()}`, n = C(() => e.modelValue), s = C(() => $e("krds-form-toggle-switch", e.size, e.class)), u = (h) => {
|
|
1424
1532
|
if (e.disabled) return;
|
|
1425
|
-
const
|
|
1426
|
-
a("update:modelValue",
|
|
1427
|
-
},
|
|
1533
|
+
const y = h.target.checked;
|
|
1534
|
+
a("update:modelValue", y), a("change", y);
|
|
1535
|
+
}, g = C(() => e.id || l);
|
|
1428
1536
|
return () => t("div", { class: s.value }, [t("input", {
|
|
1429
1537
|
type: "checkbox",
|
|
1430
|
-
id:
|
|
1538
|
+
id: g.value,
|
|
1431
1539
|
name: e.name,
|
|
1432
1540
|
checked: n.value,
|
|
1433
1541
|
disabled: e.disabled,
|
|
1434
|
-
onChange:
|
|
1542
|
+
onChange: u,
|
|
1435
1543
|
...r
|
|
1436
|
-
}), t("label", { for:
|
|
1544
|
+
}), t("label", { for: g.value }, [t("span", { class: "switch-toggle" }, [t("i")]), e.label || ""])]);
|
|
1437
1545
|
}
|
|
1438
|
-
}),
|
|
1546
|
+
}), qt = Ot, Nt = /* @__PURE__ */ _({
|
|
1439
1547
|
name: "KrdsCheckArea",
|
|
1440
1548
|
props: {
|
|
1441
1549
|
class: {
|
|
@@ -1453,7 +1561,7 @@ var Vt = /* @__PURE__ */ A({
|
|
|
1453
1561
|
return e.column && r.push("chk-column"), e.class && r.push(e.class), t("div", { class: r }, a.default?.());
|
|
1454
1562
|
};
|
|
1455
1563
|
}
|
|
1456
|
-
}),
|
|
1564
|
+
}), Wt = Nt, Yt = /* @__PURE__ */ _({
|
|
1457
1565
|
name: "KrdsCheckbox",
|
|
1458
1566
|
props: {
|
|
1459
1567
|
modelValue: {
|
|
@@ -1485,27 +1593,27 @@ var Vt = /* @__PURE__ */ A({
|
|
|
1485
1593
|
emits: { "update:modelValue": (e) => !0 },
|
|
1486
1594
|
slots: Object,
|
|
1487
1595
|
setup(e, { emit: a, attrs: r, slots: l }) {
|
|
1488
|
-
const n = `checkbox-${
|
|
1489
|
-
const
|
|
1490
|
-
return $e(
|
|
1491
|
-
}),
|
|
1596
|
+
const n = `checkbox-${de()}`, s = C(() => e.modelValue), u = C(() => {
|
|
1597
|
+
const y = e.chip ? "krds-form-chip" : "krds-form-check";
|
|
1598
|
+
return $e(y, e.size, e.class);
|
|
1599
|
+
}), g = (y) => {
|
|
1492
1600
|
if (e.disabled) return;
|
|
1493
|
-
const
|
|
1494
|
-
a("update:modelValue",
|
|
1495
|
-
},
|
|
1601
|
+
const d = y.target.checked;
|
|
1602
|
+
a("update:modelValue", d);
|
|
1603
|
+
}, h = C(() => e.id || n);
|
|
1496
1604
|
return () => {
|
|
1497
|
-
const
|
|
1605
|
+
const y = [t("input", {
|
|
1498
1606
|
type: "checkbox",
|
|
1499
|
-
id:
|
|
1607
|
+
id: h.value,
|
|
1500
1608
|
checked: s.value,
|
|
1501
1609
|
disabled: e.disabled,
|
|
1502
|
-
onChange:
|
|
1610
|
+
onChange: g,
|
|
1503
1611
|
...r
|
|
1504
|
-
}), t("label", { for:
|
|
1505
|
-
return l.description && !e.chip &&
|
|
1612
|
+
}), t("label", { for: h.value }, l.default?.())];
|
|
1613
|
+
return l.description && !e.chip && y.push(t("div", { class: "krds-form-check-cnt" }, t("p", { class: "krds-form-check-p" }, l.description()))), t("div", { class: u.value }, y);
|
|
1506
1614
|
};
|
|
1507
1615
|
}
|
|
1508
|
-
}),
|
|
1616
|
+
}), jt = Yt, Gt = /* @__PURE__ */ _({
|
|
1509
1617
|
name: "KrdsRadio",
|
|
1510
1618
|
props: {
|
|
1511
1619
|
modelValue: {
|
|
@@ -1553,27 +1661,27 @@ var Vt = /* @__PURE__ */ A({
|
|
|
1553
1661
|
emits: { "update:modelValue": (e) => !0 },
|
|
1554
1662
|
slots: Object,
|
|
1555
1663
|
setup(e, { emit: a, attrs: r, slots: l }) {
|
|
1556
|
-
const n = `radio-${
|
|
1557
|
-
const
|
|
1558
|
-
return $e(
|
|
1559
|
-
}),
|
|
1560
|
-
e.disabled ||
|
|
1561
|
-
},
|
|
1664
|
+
const n = `radio-${de()}`, s = C(() => e.modelValue === e.value), u = C(() => {
|
|
1665
|
+
const d = e.chip ? "krds-form-chip" : "krds-form-check";
|
|
1666
|
+
return $e(d, e.size, e.class);
|
|
1667
|
+
}), g = (d) => {
|
|
1668
|
+
e.disabled || d.target.checked && a("update:modelValue", e.value);
|
|
1669
|
+
}, h = C(() => e.id || n), y = C(() => e.name);
|
|
1562
1670
|
return () => {
|
|
1563
|
-
const
|
|
1671
|
+
const d = [t("input", {
|
|
1564
1672
|
type: "radio",
|
|
1565
|
-
id:
|
|
1566
|
-
name:
|
|
1673
|
+
id: h.value,
|
|
1674
|
+
name: y.value,
|
|
1567
1675
|
value: String(e.value),
|
|
1568
1676
|
checked: s.value,
|
|
1569
1677
|
disabled: e.disabled,
|
|
1570
|
-
onChange:
|
|
1678
|
+
onChange: g,
|
|
1571
1679
|
...r
|
|
1572
|
-
}), t("label", { for:
|
|
1573
|
-
return l.description && !e.chip &&
|
|
1680
|
+
}), t("label", { for: h.value }, l.default?.())];
|
|
1681
|
+
return l.description && !e.chip && d.push(t("div", { class: "krds-form-check-cnt" }, t("p", { class: "krds-form-check-p" }, l.description()))), t("div", { class: u.value }, d);
|
|
1574
1682
|
};
|
|
1575
1683
|
}
|
|
1576
|
-
}),
|
|
1684
|
+
}), Ut = Gt, Xt = Pe, Qt = /* @__PURE__ */ _({
|
|
1577
1685
|
name: "KrdsStepIndicator",
|
|
1578
1686
|
props: {
|
|
1579
1687
|
modelValue: {
|
|
@@ -1587,23 +1695,29 @@ var Vt = /* @__PURE__ */ A({
|
|
|
1587
1695
|
},
|
|
1588
1696
|
emits: { "update:modelValue": (e) => !0 },
|
|
1589
1697
|
setup(e, { slots: a }) {
|
|
1590
|
-
const r =
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
},
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1698
|
+
const r = E(null), l = C(() => e.modelValue || 0), n = st(null), s = /* @__PURE__ */ new WeakSet(), u = () => {
|
|
1699
|
+
n.value = r.value ? Array.from(r.value.children).filter((y) => s.has(y)) : null;
|
|
1700
|
+
};
|
|
1701
|
+
let g = 0, h;
|
|
1702
|
+
return ee(() => {
|
|
1703
|
+
u(), h = new MutationObserver(u), h.observe(r.value, { childList: !0 });
|
|
1704
|
+
}), lt(u), oe(() => h?.disconnect()), nt("stepIndicator", {
|
|
1705
|
+
register: () => g++,
|
|
1706
|
+
track: (y) => s.add(y),
|
|
1707
|
+
untrack: (y) => {
|
|
1708
|
+
s.delete(y), u();
|
|
1709
|
+
},
|
|
1710
|
+
indexOf: (y, d) => {
|
|
1711
|
+
const S = y && n.value ? n.value.indexOf(y) : -1;
|
|
1712
|
+
return S >= 0 ? S : d;
|
|
1713
|
+
},
|
|
1714
|
+
statusAt: (y) => y < l.value ? "done" : y === l.value ? "active" : "pending"
|
|
1715
|
+
}), () => (g = 0, t("ol", {
|
|
1716
|
+
ref: r,
|
|
1717
|
+
class: ["krds-step-wrap", e.class]
|
|
1718
|
+
}, a.default?.()));
|
|
1605
1719
|
}
|
|
1606
|
-
}),
|
|
1720
|
+
}), Jt = Qt, Zt = /* @__PURE__ */ _({
|
|
1607
1721
|
name: "KrdsStep",
|
|
1608
1722
|
props: {
|
|
1609
1723
|
step: {
|
|
@@ -1625,26 +1739,29 @@ var Vt = /* @__PURE__ */ A({
|
|
|
1625
1739
|
},
|
|
1626
1740
|
emits: { click: (e, a) => !0 },
|
|
1627
1741
|
setup(e, { emit: a, slots: r }) {
|
|
1628
|
-
const l =
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1742
|
+
const l = tt("stepIndicator", null), n = l ? l.register() : -1, s = E(null);
|
|
1743
|
+
ee(() => s.value && l?.track(s.value)), oe(() => s.value && l?.untrack(s.value));
|
|
1744
|
+
const u = C(() => e.status || (l ? l.statusAt(l.indexOf(s.value, n)) : "pending")), g = C(() => {
|
|
1745
|
+
const y = [u.value];
|
|
1746
|
+
return e.class && y.push(e.class), y;
|
|
1747
|
+
}), h = (y) => {
|
|
1748
|
+
a("click", y, e.step);
|
|
1633
1749
|
};
|
|
1634
1750
|
return () => {
|
|
1635
|
-
const
|
|
1751
|
+
const y = u.value === "active";
|
|
1636
1752
|
return t("li", {
|
|
1637
|
-
|
|
1753
|
+
ref: s,
|
|
1754
|
+
class: g.value,
|
|
1638
1755
|
onClick: h
|
|
1639
1756
|
}, [t("span", [
|
|
1640
|
-
|
|
1757
|
+
y && t("em", { class: "sr-only" }, "현재단계"),
|
|
1641
1758
|
t("i", { class: "step" }, e.step),
|
|
1642
1759
|
t("span", { class: "step-tit" }, e.title),
|
|
1643
1760
|
r.default?.()
|
|
1644
1761
|
])]);
|
|
1645
1762
|
};
|
|
1646
1763
|
}
|
|
1647
|
-
}),
|
|
1764
|
+
}), ea = Zt, ta = /* @__PURE__ */ _({
|
|
1648
1765
|
name: "KrdsSkipLink",
|
|
1649
1766
|
props: {
|
|
1650
1767
|
href: {
|
|
@@ -1676,7 +1793,7 @@ var Vt = /* @__PURE__ */ A({
|
|
|
1676
1793
|
class: e.class
|
|
1677
1794
|
}, e.links ? e.links.map((r) => t("a", { href: r.href }, r.label)) : [t("a", { href: e.href }, a.default?.())]);
|
|
1678
1795
|
}
|
|
1679
|
-
}),
|
|
1796
|
+
}), aa = ta, la = /* @__PURE__ */ _({
|
|
1680
1797
|
name: "KrdsBreadcrumb",
|
|
1681
1798
|
props: {
|
|
1682
1799
|
items: {
|
|
@@ -1706,19 +1823,19 @@ var Vt = /* @__PURE__ */ A({
|
|
|
1706
1823
|
class: "krds-breadcrumb-wrap",
|
|
1707
1824
|
"aria-label": e.ariaLabel
|
|
1708
1825
|
}, [t("ol", { class: "breadcrumb" }, e.items.map((n, s) => {
|
|
1709
|
-
const
|
|
1826
|
+
const u = s === 0 && e.showHomeIcon;
|
|
1710
1827
|
return t("li", {
|
|
1711
1828
|
key: `breadcrumb-${s}`,
|
|
1712
|
-
class: { home:
|
|
1829
|
+
class: { home: u }
|
|
1713
1830
|
}, [t("a", {
|
|
1714
1831
|
href: n.href || "#",
|
|
1715
1832
|
class: "txt",
|
|
1716
1833
|
"aria-current": r(s) ? "page" : void 0,
|
|
1717
|
-
onClick: (
|
|
1834
|
+
onClick: (g) => l(n, g)
|
|
1718
1835
|
}, [t("span", null, n.text)])]);
|
|
1719
1836
|
}))]);
|
|
1720
1837
|
}
|
|
1721
|
-
}),
|
|
1838
|
+
}), na = la, sa = /* @__PURE__ */ _({
|
|
1722
1839
|
name: "KrdsInPageNavigation",
|
|
1723
1840
|
props: {
|
|
1724
1841
|
title: {
|
|
@@ -1753,96 +1870,96 @@ var Vt = /* @__PURE__ */ A({
|
|
|
1753
1870
|
emits: { itemClick: (e, a) => !0 },
|
|
1754
1871
|
slots: Object,
|
|
1755
1872
|
setup(e, { emit: a, slots: r }) {
|
|
1756
|
-
const l = E(""), n = E(/* @__PURE__ */ new Map()), s =
|
|
1873
|
+
const l = E(""), n = E(/* @__PURE__ */ new Map()), s = C(() => {
|
|
1757
1874
|
const m = ["krds-in-page-navigation-type"];
|
|
1758
1875
|
return e.class && m.push(e.class), m;
|
|
1759
|
-
}),
|
|
1760
|
-
const m = e.headerTopSelector,
|
|
1761
|
-
return (document.querySelector(m)?.clientHeight || 0) + (document.querySelector(
|
|
1762
|
-
},
|
|
1763
|
-
if (a("itemClick", m,
|
|
1764
|
-
|
|
1765
|
-
const
|
|
1766
|
-
if (
|
|
1767
|
-
const
|
|
1876
|
+
}), u = () => {
|
|
1877
|
+
const m = e.headerTopSelector, v = e.headerInnerSelector;
|
|
1878
|
+
return (document.querySelector(m)?.clientHeight || 0) + (document.querySelector(v)?.clientHeight || 0);
|
|
1879
|
+
}, g = (m, v) => {
|
|
1880
|
+
if (a("itemClick", m, v), m.href.startsWith("#")) {
|
|
1881
|
+
v.preventDefault();
|
|
1882
|
+
const o = document.querySelector(m.href);
|
|
1883
|
+
if (o) {
|
|
1884
|
+
const i = u();
|
|
1768
1885
|
if (window.scrollTo({
|
|
1769
1886
|
left: 0,
|
|
1770
|
-
top:
|
|
1887
|
+
top: o.getBoundingClientRect().top + window.scrollY - i,
|
|
1771
1888
|
behavior: "smooth"
|
|
1772
|
-
}), l.value = m.href,
|
|
1773
|
-
const
|
|
1774
|
-
|
|
1889
|
+
}), l.value = m.href, v instanceof KeyboardEvent) {
|
|
1890
|
+
const p = o.querySelector(".sec-tit, h1, h2, h3, h4, h5, h6");
|
|
1891
|
+
p && p instanceof HTMLElement && (p.setAttribute("tabindex", "-1"), p.focus({ preventScroll: !0 }));
|
|
1775
1892
|
}
|
|
1776
1893
|
}
|
|
1777
1894
|
}
|
|
1778
|
-
},
|
|
1895
|
+
}, h = () => {
|
|
1779
1896
|
n.value.clear(), e.items && e.items.filter((m) => m.href.startsWith("#")).forEach((m) => {
|
|
1780
|
-
const
|
|
1781
|
-
|
|
1897
|
+
const v = document.querySelector(m.href);
|
|
1898
|
+
v && n.value.set(m.href, v);
|
|
1782
1899
|
});
|
|
1783
|
-
},
|
|
1900
|
+
}, y = () => {
|
|
1784
1901
|
if (!e.autoActive || !e.items || n.value.size === 0) return;
|
|
1785
|
-
const m = window.innerHeight,
|
|
1786
|
-
href:
|
|
1787
|
-
element: n.value.get(
|
|
1788
|
-
item:
|
|
1902
|
+
const m = window.innerHeight, v = Math.ceil(m / 5), o = window.scrollY + m, i = document.body.scrollHeight, p = e.items.filter(($) => $.href.startsWith("#") && n.value.has($.href)).map(($) => ({
|
|
1903
|
+
href: $.href,
|
|
1904
|
+
element: n.value.get($.href),
|
|
1905
|
+
item: $
|
|
1789
1906
|
}));
|
|
1790
|
-
if (
|
|
1791
|
-
const
|
|
1792
|
-
let
|
|
1793
|
-
if (
|
|
1794
|
-
else if (window.scrollY <=
|
|
1795
|
-
else for (const
|
|
1796
|
-
const f =
|
|
1797
|
-
if (window.scrollY >
|
|
1798
|
-
|
|
1907
|
+
if (p.length === 0) return;
|
|
1908
|
+
const M = p[0], A = p[p.length - 1], D = M.element.offsetTop;
|
|
1909
|
+
let L = "";
|
|
1910
|
+
if (o >= i) L = A.href;
|
|
1911
|
+
else if (window.scrollY <= D) L = M.href;
|
|
1912
|
+
else for (const $ of p) {
|
|
1913
|
+
const f = $.element.offsetHeight, T = $.element.offsetTop - v;
|
|
1914
|
+
if (window.scrollY > T && window.scrollY <= T + f) {
|
|
1915
|
+
L = $.href;
|
|
1799
1916
|
break;
|
|
1800
1917
|
}
|
|
1801
1918
|
}
|
|
1802
|
-
|
|
1803
|
-
},
|
|
1919
|
+
L && L !== l.value && (l.value = L);
|
|
1920
|
+
}, d = () => {
|
|
1804
1921
|
if (!e.items) return;
|
|
1805
|
-
const m = e.items.find((
|
|
1922
|
+
const m = e.items.find((v) => v.active);
|
|
1806
1923
|
m ? l.value = m.href : e.items.length > 0 && (l.value = e.items[0].href);
|
|
1807
1924
|
};
|
|
1808
|
-
|
|
1809
|
-
if (
|
|
1810
|
-
|
|
1925
|
+
ee(() => {
|
|
1926
|
+
if (d(), e.autoActive) {
|
|
1927
|
+
h(), y(), window.addEventListener("scroll", y, { passive: !0 });
|
|
1811
1928
|
const m = new MutationObserver(() => {
|
|
1812
|
-
|
|
1929
|
+
h();
|
|
1813
1930
|
});
|
|
1814
1931
|
m.observe(document.body, {
|
|
1815
1932
|
childList: !0,
|
|
1816
1933
|
subtree: !0
|
|
1817
|
-
}),
|
|
1934
|
+
}), ue(() => {
|
|
1818
1935
|
m.disconnect();
|
|
1819
1936
|
});
|
|
1820
1937
|
}
|
|
1821
|
-
}),
|
|
1822
|
-
e.autoActive && (window.removeEventListener("scroll",
|
|
1938
|
+
}), ue(() => {
|
|
1939
|
+
e.autoActive && (window.removeEventListener("scroll", y), n.value.clear());
|
|
1823
1940
|
});
|
|
1824
|
-
const
|
|
1941
|
+
const S = () => !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)]), k = () => {
|
|
1825
1942
|
if (!e.items) return null;
|
|
1826
|
-
const m = e.items.map((
|
|
1827
|
-
const
|
|
1828
|
-
return t("li", { key:
|
|
1829
|
-
href:
|
|
1830
|
-
class:
|
|
1831
|
-
onClick: (
|
|
1832
|
-
onKeydown: (
|
|
1833
|
-
(
|
|
1943
|
+
const m = e.items.map((v) => {
|
|
1944
|
+
const o = l.value === v.href || !e.autoActive && v.active;
|
|
1945
|
+
return t("li", { key: v.href }, [t("a", {
|
|
1946
|
+
href: v.href,
|
|
1947
|
+
class: o ? "active" : "",
|
|
1948
|
+
onClick: (i) => g(v, i),
|
|
1949
|
+
onKeydown: (i) => {
|
|
1950
|
+
(i.key === "Enter" || i.key === " ") && (i.preventDefault(), g(v, i));
|
|
1834
1951
|
}
|
|
1835
|
-
},
|
|
1952
|
+
}, v.text)]);
|
|
1836
1953
|
});
|
|
1837
1954
|
return t("nav", { class: "in-page-navigation-list" }, [t("ul", {}, m)]);
|
|
1838
|
-
},
|
|
1955
|
+
}, K = () => r.action ? t("div", { class: "in-page-navigation-action" }, [r.action()]) : null;
|
|
1839
1956
|
return () => t("div", { class: s.value }, [t("div", { class: "krds-in-page-navigation-area" }, [
|
|
1840
|
-
_(),
|
|
1841
1957
|
S(),
|
|
1842
|
-
|
|
1958
|
+
k(),
|
|
1959
|
+
K()
|
|
1843
1960
|
].filter(Boolean))]);
|
|
1844
1961
|
}
|
|
1845
|
-
}),
|
|
1962
|
+
}), ra = sa, ze = {
|
|
1846
1963
|
mounted(e, a) {
|
|
1847
1964
|
a.value !== !1 && e.classList.add("sr-only");
|
|
1848
1965
|
},
|
|
@@ -1852,9 +1969,9 @@ var Vt = /* @__PURE__ */ A({
|
|
|
1852
1969
|
unmounted(e) {
|
|
1853
1970
|
e.classList.remove("sr-only");
|
|
1854
1971
|
}
|
|
1855
|
-
},
|
|
1856
|
-
e.directive("sr-only",
|
|
1857
|
-
},
|
|
1972
|
+
}, ia = (e) => {
|
|
1973
|
+
e.directive("sr-only", ze);
|
|
1974
|
+
}, Te = 1, Ae = 8, oa = /* @__PURE__ */ _({
|
|
1858
1975
|
name: "KrdsPagination",
|
|
1859
1976
|
props: {
|
|
1860
1977
|
modelValue: {
|
|
@@ -1863,7 +1980,7 @@ var Vt = /* @__PURE__ */ A({
|
|
|
1863
1980
|
},
|
|
1864
1981
|
min: {
|
|
1865
1982
|
type: Number,
|
|
1866
|
-
default:
|
|
1983
|
+
default: Te
|
|
1867
1984
|
},
|
|
1868
1985
|
max: {
|
|
1869
1986
|
type: Number,
|
|
@@ -1879,87 +1996,87 @@ var Vt = /* @__PURE__ */ A({
|
|
|
1879
1996
|
},
|
|
1880
1997
|
pageRange: {
|
|
1881
1998
|
type: Number,
|
|
1882
|
-
default:
|
|
1999
|
+
default: Ae
|
|
1883
2000
|
}
|
|
1884
2001
|
},
|
|
1885
2002
|
emits: { "update:modelValue": (e) => !0 },
|
|
1886
2003
|
setup(e, { emit: a }) {
|
|
1887
|
-
const r =
|
|
2004
|
+
const r = C(() => Math.max(1, e.min ?? Te)), l = C(() => e.modelValue ?? r.value), n = C(() => l.value <= r.value), s = C(() => l.value >= e.max), u = C(() => {
|
|
1888
2005
|
if (!n.value)
|
|
1889
2006
|
return "#";
|
|
1890
|
-
}),
|
|
2007
|
+
}), g = C(() => {
|
|
1891
2008
|
if (!s.value)
|
|
1892
2009
|
return "#";
|
|
1893
|
-
}),
|
|
1894
|
-
const { max:
|
|
1895
|
-
if (
|
|
2010
|
+
}), h = C(() => {
|
|
2011
|
+
const { max: K } = e, m = e.pageRange ?? Ae, v = 1, o = [];
|
|
2012
|
+
if (K <= m + 2) for (let i = r.value; i <= K; i++) o.push({
|
|
1896
2013
|
type: "page",
|
|
1897
|
-
key: `page-${
|
|
1898
|
-
page:
|
|
2014
|
+
key: `page-${i}`,
|
|
2015
|
+
page: i,
|
|
1899
2016
|
href: "#"
|
|
1900
2017
|
});
|
|
1901
2018
|
else {
|
|
1902
|
-
const
|
|
1903
|
-
for (let f = r.value; f <=
|
|
2019
|
+
const i = Math.min(v, K), p = Math.max(K - v + 1, 1), M = Math.max(r.value, l.value - Math.floor(m / 2)), A = Math.min(K, M + m - 1), D = Math.max(r.value, A - m + 1);
|
|
2020
|
+
for (let f = r.value; f <= i; f++) o.push({
|
|
1904
2021
|
type: "page",
|
|
1905
2022
|
key: `page-${f}`,
|
|
1906
2023
|
page: f,
|
|
1907
2024
|
href: "#"
|
|
1908
2025
|
});
|
|
1909
|
-
|
|
2026
|
+
D > i + 1 && o.push({
|
|
1910
2027
|
type: "ellipsis",
|
|
1911
2028
|
key: "ellipsis-left"
|
|
1912
2029
|
});
|
|
1913
|
-
const
|
|
1914
|
-
for (let f =
|
|
2030
|
+
const L = Math.max(D, i + 1), $ = Math.min(A, p - 1);
|
|
2031
|
+
for (let f = L; f <= $; f++) o.push({
|
|
1915
2032
|
type: "page",
|
|
1916
2033
|
key: `page-${f}`,
|
|
1917
2034
|
page: f,
|
|
1918
2035
|
href: "#"
|
|
1919
2036
|
});
|
|
1920
|
-
|
|
2037
|
+
A < p - 1 && o.push({
|
|
1921
2038
|
type: "ellipsis",
|
|
1922
2039
|
key: "ellipsis-right"
|
|
1923
2040
|
});
|
|
1924
|
-
for (let f =
|
|
2041
|
+
for (let f = p; f <= K; f++) o.push({
|
|
1925
2042
|
type: "page",
|
|
1926
2043
|
key: `page-${f}`,
|
|
1927
2044
|
page: f,
|
|
1928
2045
|
href: "#"
|
|
1929
2046
|
});
|
|
1930
2047
|
}
|
|
1931
|
-
return
|
|
1932
|
-
}),
|
|
1933
|
-
if (
|
|
2048
|
+
return o;
|
|
2049
|
+
}), y = (K, m) => {
|
|
2050
|
+
if (K === l.value) {
|
|
1934
2051
|
m.preventDefault();
|
|
1935
2052
|
return;
|
|
1936
2053
|
}
|
|
1937
|
-
a("update:modelValue",
|
|
1938
|
-
},
|
|
2054
|
+
a("update:modelValue", K);
|
|
2055
|
+
}, d = (K) => {
|
|
1939
2056
|
if (n.value) {
|
|
1940
|
-
|
|
2057
|
+
K.preventDefault();
|
|
1941
2058
|
return;
|
|
1942
2059
|
}
|
|
1943
2060
|
a("update:modelValue", l.value - 1);
|
|
1944
|
-
},
|
|
2061
|
+
}, S = (K) => {
|
|
1945
2062
|
if (s.value) {
|
|
1946
|
-
|
|
2063
|
+
K.preventDefault();
|
|
1947
2064
|
return;
|
|
1948
2065
|
}
|
|
1949
2066
|
a("update:modelValue", l.value + 1);
|
|
1950
|
-
},
|
|
1951
|
-
if (
|
|
1952
|
-
const m =
|
|
2067
|
+
}, k = (K) => {
|
|
2068
|
+
if (K.type === "page") {
|
|
2069
|
+
const m = K.page === l.value;
|
|
1953
2070
|
return t("a", {
|
|
1954
|
-
key:
|
|
1955
|
-
href:
|
|
2071
|
+
key: K.key,
|
|
2072
|
+
href: K.href || "#",
|
|
1956
2073
|
class: ["page-link", { active: m }],
|
|
1957
2074
|
"aria-current": m ? "page" : void 0,
|
|
1958
|
-
onClick: (
|
|
1959
|
-
}, [m ?
|
|
2075
|
+
onClick: (v) => y(K.page, v)
|
|
2076
|
+
}, [m ? ge(t("span", null, "현재페이지"), [[ze]]) : null, ` ${K.page} `]);
|
|
1960
2077
|
}
|
|
1961
2078
|
return t("span", {
|
|
1962
|
-
key:
|
|
2079
|
+
key: K.key,
|
|
1963
2080
|
class: "page-link link-dot"
|
|
1964
2081
|
});
|
|
1965
2082
|
};
|
|
@@ -1968,45 +2085,75 @@ var Vt = /* @__PURE__ */ A({
|
|
|
1968
2085
|
class: "krds-pagination"
|
|
1969
2086
|
}, [
|
|
1970
2087
|
t(n.value ? "span" : "a", {
|
|
1971
|
-
href: n.value ? void 0 :
|
|
2088
|
+
href: n.value ? void 0 : u.value,
|
|
1972
2089
|
class: [
|
|
1973
2090
|
"page-navi",
|
|
1974
2091
|
"prev",
|
|
1975
2092
|
{ disabled: n.value }
|
|
1976
2093
|
],
|
|
1977
|
-
onClick:
|
|
2094
|
+
onClick: d
|
|
1978
2095
|
}, "이전"),
|
|
1979
|
-
t("div", { class: "page-links" },
|
|
2096
|
+
t("div", { class: "page-links" }, h.value.map(k)),
|
|
1980
2097
|
t(s.value ? "span" : "a", {
|
|
1981
|
-
href: s.value ? void 0 :
|
|
2098
|
+
href: s.value ? void 0 : g.value,
|
|
1982
2099
|
class: [
|
|
1983
2100
|
"page-navi",
|
|
1984
2101
|
"next",
|
|
1985
2102
|
{ disabled: s.value }
|
|
1986
2103
|
],
|
|
1987
|
-
onClick:
|
|
2104
|
+
onClick: S
|
|
1988
2105
|
}, "다음")
|
|
1989
2106
|
]);
|
|
1990
2107
|
}
|
|
1991
|
-
}),
|
|
2108
|
+
}), ua = oa, _e = null, da = /* @__PURE__ */ _({
|
|
1992
2109
|
name: "KrdsPanel",
|
|
1993
|
-
props: {
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
2110
|
+
props: {
|
|
2111
|
+
modelValue: {
|
|
2112
|
+
type: Boolean,
|
|
2113
|
+
default: !1
|
|
2114
|
+
},
|
|
2115
|
+
headerTopSelector: {
|
|
2116
|
+
type: String,
|
|
2117
|
+
default: "#krds-masthead"
|
|
2118
|
+
},
|
|
2119
|
+
headerInnerSelector: {
|
|
2120
|
+
type: String,
|
|
2121
|
+
default: "#krds-header .header-in"
|
|
2122
|
+
}
|
|
2123
|
+
},
|
|
1997
2124
|
emits: { "update:modelValue": (e) => !0 },
|
|
1998
2125
|
setup(e, { emit: a, slots: r }) {
|
|
1999
|
-
const l =
|
|
2126
|
+
const l = C({
|
|
2000
2127
|
get: () => e.modelValue,
|
|
2001
|
-
set: (
|
|
2128
|
+
set: (S) => a("update:modelValue", S)
|
|
2002
2129
|
}), n = () => {
|
|
2003
2130
|
l.value = !0;
|
|
2004
2131
|
}, s = () => {
|
|
2005
2132
|
l.value = !1;
|
|
2133
|
+
}, u = E(0), g = E(null), h = /* @__PURE__ */ Symbol("KrdsPanel");
|
|
2134
|
+
let y = 0;
|
|
2135
|
+
const d = () => {
|
|
2136
|
+
cancelAnimationFrame(y), y = requestAnimationFrame(() => {
|
|
2137
|
+
const S = document.querySelector(e.headerTopSelector), k = document.querySelector(e.headerInnerSelector), K = !!S && S.getBoundingClientRect().bottom > 0, m = !!document.querySelector(".g-wrap.scroll-down");
|
|
2138
|
+
u.value = k ? K ? S.offsetHeight + k.offsetHeight : m ? 0 : k.offsetHeight : 0;
|
|
2139
|
+
const v = g.value;
|
|
2140
|
+
if (!v?.isConnected) return;
|
|
2141
|
+
const o = parseFloat(getComputedStyle(v).top) + u.value + v.offsetHeight;
|
|
2142
|
+
Number.isFinite(o) && (document.documentElement.style.setProperty("--krds-help-panel--button-bottom", `${o}px`), _e = h);
|
|
2143
|
+
});
|
|
2006
2144
|
};
|
|
2007
|
-
return () =>
|
|
2145
|
+
return ee(() => {
|
|
2146
|
+
d(), window.addEventListener("scroll", d, { passive: !0 }), window.addEventListener("resize", d);
|
|
2147
|
+
}), at(d), ue(() => {
|
|
2148
|
+
cancelAnimationFrame(y), _e === h && document.documentElement.style.removeProperty("--krds-help-panel--button-bottom"), window.removeEventListener("scroll", d), window.removeEventListener("resize", d);
|
|
2149
|
+
}), () => t("div", {
|
|
2150
|
+
class: "inner help-panel-flexible",
|
|
2151
|
+
style: { "--krds-help-panel--header-offset": `${u.value}px` }
|
|
2152
|
+
}, [t("button", {
|
|
2153
|
+
ref: g,
|
|
2008
2154
|
type: "button",
|
|
2009
2155
|
class: "krds-btn small tertiary btn-help-panel expand btn-help-exec",
|
|
2156
|
+
onTransitionend: d,
|
|
2010
2157
|
onClick: n
|
|
2011
2158
|
}, [t("i", { class: "svg-icon ico-fold" }), " 도움말"]), t("div", { class: ["krds-help-panel", { expand: l.value }] }, [t("div", { class: "help-panel-wrap" }, [t("div", { class: "help-conts-area" }, [r.default?.(), t("button", {
|
|
2012
2159
|
type: "button",
|
|
@@ -2018,7 +2165,7 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2018
2165
|
t("i", { class: "svg-icon ico-angle right" })
|
|
2019
2166
|
])])])])]);
|
|
2020
2167
|
}
|
|
2021
|
-
}),
|
|
2168
|
+
}), ca = da, fa = /* @__PURE__ */ _({
|
|
2022
2169
|
name: "KrdsContextualHelp",
|
|
2023
2170
|
props: {
|
|
2024
2171
|
tooltipTitle: {
|
|
@@ -2035,39 +2182,39 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2035
2182
|
}
|
|
2036
2183
|
},
|
|
2037
2184
|
setup(e, { slots: a }) {
|
|
2038
|
-
const r = E(), l = E(), n = E(), s = E(),
|
|
2039
|
-
const
|
|
2040
|
-
|
|
2041
|
-
},
|
|
2042
|
-
!n.value || !l.value || (
|
|
2043
|
-
},
|
|
2044
|
-
!n.value || !l.value || (
|
|
2045
|
-
},
|
|
2046
|
-
const
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
}),
|
|
2050
|
-
|
|
2051
|
-
}),
|
|
2052
|
-
},
|
|
2185
|
+
const r = E(), l = E(), n = E(), s = E(), u = E(!1), g = () => {
|
|
2186
|
+
const v = u.value;
|
|
2187
|
+
d(), v || h();
|
|
2188
|
+
}, h = () => {
|
|
2189
|
+
!n.value || !l.value || (u.value = !0, n.value.style.display = "block", l.value.setAttribute("aria-expanded", "true"), n.value.querySelector('a, button, [tabindex="0"], input, textarea, select')?.focus(), S());
|
|
2190
|
+
}, y = () => {
|
|
2191
|
+
!n.value || !l.value || (u.value = !1, n.value.style.display = "none", l.value.setAttribute("aria-expanded", "false"));
|
|
2192
|
+
}, d = () => {
|
|
2193
|
+
const v = document.querySelectorAll(".krds-contextual-help .tooltip-popover"), o = document.querySelectorAll(".krds-contextual-help .tooltip-btn");
|
|
2194
|
+
v.forEach((i) => {
|
|
2195
|
+
i.style.display = "none";
|
|
2196
|
+
}), o.forEach((i) => {
|
|
2197
|
+
i.setAttribute("aria-expanded", "false");
|
|
2198
|
+
}), u.value = !1;
|
|
2199
|
+
}, S = () => {
|
|
2053
2200
|
if (!r.value || !n.value) return;
|
|
2054
|
-
const
|
|
2055
|
-
if (
|
|
2056
|
-
const
|
|
2057
|
-
n.value.style.left = `-${
|
|
2201
|
+
const v = window.innerWidth <= 768, o = r.value.querySelector(".tooltip-action");
|
|
2202
|
+
if (v) {
|
|
2203
|
+
const i = getComputedStyle(document.querySelector(":root")).getPropertyValue("--krds-contents-padding-x").trim().split("px")[0], p = o.getBoundingClientRect().left - parseInt(i), M = document.body.clientWidth - parseInt(i) * 2;
|
|
2204
|
+
n.value.style.left = `-${p}px`, n.value.style.width = `${M}px`;
|
|
2058
2205
|
} else
|
|
2059
2206
|
n.value.style.left = "", n.value.style.right = "", n.value.style.width = "360px";
|
|
2060
|
-
},
|
|
2061
|
-
(
|
|
2062
|
-
},
|
|
2063
|
-
|
|
2207
|
+
}, k = (v) => {
|
|
2208
|
+
(v.key === "Escape" || v.key === "Esc") && d();
|
|
2209
|
+
}, K = (v) => {
|
|
2210
|
+
v.target.closest(".tooltip-action") || d();
|
|
2064
2211
|
}, m = () => {
|
|
2065
|
-
|
|
2212
|
+
u.value && S();
|
|
2066
2213
|
};
|
|
2067
|
-
return
|
|
2068
|
-
r.value && (l.value && l.value.setAttribute("aria-expanded", "false"), n.value && n.value.setAttribute("role", "tooltip"), document.addEventListener("keydown",
|
|
2069
|
-
}),
|
|
2070
|
-
document.removeEventListener("keydown",
|
|
2214
|
+
return ee(() => {
|
|
2215
|
+
r.value && (l.value && l.value.setAttribute("aria-expanded", "false"), n.value && n.value.setAttribute("role", "tooltip"), document.addEventListener("keydown", k), document.addEventListener("click", K), window.addEventListener("resize", m));
|
|
2216
|
+
}), ue(() => {
|
|
2217
|
+
document.removeEventListener("keydown", k), document.removeEventListener("click", K), window.removeEventListener("resize", m);
|
|
2071
2218
|
}), () => t("div", {
|
|
2072
2219
|
ref: r,
|
|
2073
2220
|
class: ["krds-contextual-help", e.position]
|
|
@@ -2075,7 +2222,7 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2075
2222
|
ref: l,
|
|
2076
2223
|
type: "button",
|
|
2077
2224
|
class: "krds-btn medium icon tooltip-btn",
|
|
2078
|
-
onClick:
|
|
2225
|
+
onClick: g
|
|
2079
2226
|
}, [t("span", { class: "sr-only" }, "도움말"), e.helpIcon ? t("i", { class: "svg-icon ico-help" }) : t("i", { class: "svg-icon ico-tooltip" })]), t("div", {
|
|
2080
2227
|
ref: n,
|
|
2081
2228
|
class: "tooltip-popover",
|
|
@@ -2087,11 +2234,11 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2087
2234
|
ref: s,
|
|
2088
2235
|
type: "button",
|
|
2089
2236
|
class: "krds-btn xsmall icon tooltip-close",
|
|
2090
|
-
onClick:
|
|
2237
|
+
onClick: y
|
|
2091
2238
|
}, [t("span", { class: "sr-only" }, "닫기"), t("i", { class: "svg-icon ico-modal-close" })])
|
|
2092
2239
|
])])]);
|
|
2093
2240
|
}
|
|
2094
|
-
}),
|
|
2241
|
+
}), va = fa, pa = /* @__PURE__ */ _({
|
|
2095
2242
|
name: "KrdsCoachMark",
|
|
2096
2243
|
props: {
|
|
2097
2244
|
coachMarkClass: {
|
|
@@ -2120,21 +2267,21 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2120
2267
|
close: () => !0
|
|
2121
2268
|
},
|
|
2122
2269
|
setup(e, { emit: a, slots: r }) {
|
|
2123
|
-
const l =
|
|
2124
|
-
const
|
|
2125
|
-
return e.stepsData &&
|
|
2270
|
+
const l = C(() => {
|
|
2271
|
+
const h = e.activeStep - 1;
|
|
2272
|
+
return e.stepsData && h >= 0 && h < e.stepsData.length ? e.stepsData[h] : null;
|
|
2126
2273
|
}), n = () => {
|
|
2127
2274
|
e.activeStep > 1 && a("update:modelValue", e.activeStep - 1);
|
|
2128
2275
|
}, s = () => {
|
|
2129
2276
|
e.activeStep < e.stepsData.length && a("update:modelValue", e.activeStep + 1);
|
|
2130
|
-
},
|
|
2277
|
+
}, u = () => {
|
|
2131
2278
|
a("close");
|
|
2132
|
-
},
|
|
2133
|
-
const
|
|
2134
|
-
return e.modelValue !== e.activeStep || !
|
|
2279
|
+
}, g = () => {
|
|
2280
|
+
const h = l.value;
|
|
2281
|
+
return e.modelValue !== e.activeStep || !h ? null : t("div", { class: "coach-balloon" }, [
|
|
2135
2282
|
t("h5", { class: "sr-only" }, "따라하기 가이드"),
|
|
2136
|
-
t("h6", { class: "coach-tit" }, `${e.activeStep}단계 : ${
|
|
2137
|
-
t("p", { class: "desc" },
|
|
2283
|
+
t("h6", { class: "coach-tit" }, `${e.activeStep}단계 : ${h.title}`),
|
|
2284
|
+
t("p", { class: "desc" }, h.description),
|
|
2138
2285
|
t("div", { class: "coach-controls" }, [t("div", { class: "num" }, [
|
|
2139
2286
|
t("span", { class: "sr-only" }, "현재 단계"),
|
|
2140
2287
|
t("strong", null, String(e.activeStep)),
|
|
@@ -2144,7 +2291,7 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2144
2291
|
t("button", {
|
|
2145
2292
|
type: "button",
|
|
2146
2293
|
class: "krds-btn small text",
|
|
2147
|
-
onClick:
|
|
2294
|
+
onClick: u
|
|
2148
2295
|
}, "그만보기"),
|
|
2149
2296
|
e.activeStep !== 1 ? t("button", {
|
|
2150
2297
|
type: "button",
|
|
@@ -2162,9 +2309,9 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2162
2309
|
return () => t("div", {
|
|
2163
2310
|
class: ["krds-coach-mark", e.coachMarkClass],
|
|
2164
2311
|
style: e.style
|
|
2165
|
-
}, [
|
|
2312
|
+
}, [g(), r["coach-mark-content"]?.()]);
|
|
2166
2313
|
}
|
|
2167
|
-
}),
|
|
2314
|
+
}), ha = pa, ga = /* @__PURE__ */ _({
|
|
2168
2315
|
name: "KrdsTooltip",
|
|
2169
2316
|
props: {
|
|
2170
2317
|
type: {
|
|
@@ -2189,64 +2336,64 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2189
2336
|
}
|
|
2190
2337
|
},
|
|
2191
2338
|
setup(e, { slots: a }) {
|
|
2192
|
-
const r = E(null), l = E(null), n = E(!1), s = E({}),
|
|
2193
|
-
const
|
|
2194
|
-
return e.type === "default" ?
|
|
2195
|
-
}),
|
|
2196
|
-
const
|
|
2197
|
-
return e.box &&
|
|
2198
|
-
}),
|
|
2339
|
+
const r = E(null), l = E(null), n = E(!1), s = E({}), u = `tooltip-popover-${de()}`, g = E(!1), h = C(() => {
|
|
2340
|
+
const p = ["krds-btn", "krds-tooltip"];
|
|
2341
|
+
return e.type === "default" ? p.push("small", "text") : e.type === "icon" ? p.push("icon") : e.type === "button" && p.push(""), !e.box && e.vertical && p.push("tooltip-vertical"), e.box && !e.vertical && p.push("tooltip-box"), p.join(" ");
|
|
2342
|
+
}), y = C(() => {
|
|
2343
|
+
const p = [];
|
|
2344
|
+
return e.box && p.push("tooltip-box"), e.vertical && p.push("tooltip-vertical"), n.value && p.push("active"), p;
|
|
2345
|
+
}), d = C(() => r.value?.querySelector("button")?.textContent?.trim() || ""), S = () => window.innerWidth <= 768, k = () => {
|
|
2199
2346
|
if (!r.value || !l.value) return;
|
|
2200
|
-
const
|
|
2201
|
-
if (!
|
|
2202
|
-
const
|
|
2203
|
-
let
|
|
2347
|
+
const p = r.value.querySelector("button");
|
|
2348
|
+
if (!p) return;
|
|
2349
|
+
const M = 12, { clientHeight: A, clientWidth: D } = l.value, { top: L, left: $, right: f, height: T, width: R } = p.getBoundingClientRect(), H = window.innerWidth / 2, O = window.innerHeight / 2;
|
|
2350
|
+
let N, j;
|
|
2204
2351
|
const U = [];
|
|
2205
|
-
|
|
2206
|
-
const
|
|
2352
|
+
g.value || e.box || e.vertical ? (L + T > O ? (N = L - A - M, U.push("top")) : (N = L + T + M, U.push("bottom")), $ + R > H ? (j = f - D, U.push("right"), window.innerWidth - ($ + R) > D / 2 && (j = $ + (R - D) / 2, U.splice(U.indexOf("right"), 1))) : (j = $ + (R - D) / 2, j < 0 && (j = $, U.push("left")))) : (N = L + (T - A) / 2, $ + R > H ? (j = $ - D - M, U.push("right")) : j = f + M);
|
|
2353
|
+
const ce = window.innerWidth <= 420;
|
|
2207
2354
|
s.value = {
|
|
2208
|
-
top: `${
|
|
2209
|
-
left:
|
|
2210
|
-
transform:
|
|
2211
|
-
}, l.value && (l.value.className = `krds-tooltip-popover ${U.join(" ")} ${
|
|
2212
|
-
},
|
|
2213
|
-
e.disabled || !e.tooltipContent || (n.value = !0, await pe(),
|
|
2355
|
+
top: `${N}px`,
|
|
2356
|
+
left: ce ? "50%" : `${j}px`,
|
|
2357
|
+
transform: ce ? "translateX(-50%)" : "none"
|
|
2358
|
+
}, l.value && (l.value.className = `krds-tooltip-popover ${U.join(" ")} ${y.value.join(" ")}`);
|
|
2359
|
+
}, K = async () => {
|
|
2360
|
+
e.disabled || !e.tooltipContent || (n.value = !0, await pe(), k());
|
|
2214
2361
|
}, m = () => {
|
|
2215
2362
|
n.value = !1, s.value = {};
|
|
2216
|
-
},
|
|
2217
|
-
(
|
|
2218
|
-
}, i = () => {
|
|
2219
|
-
h.value = _(), n.value && m();
|
|
2363
|
+
}, v = (p) => {
|
|
2364
|
+
(p.key === "Escape" || p.key === "Esc") && n.value && m();
|
|
2220
2365
|
}, o = () => {
|
|
2366
|
+
g.value = S(), n.value && m();
|
|
2367
|
+
}, i = () => {
|
|
2221
2368
|
n.value && m();
|
|
2222
2369
|
};
|
|
2223
|
-
return
|
|
2224
|
-
|
|
2225
|
-
}),
|
|
2226
|
-
document.removeEventListener("keydown",
|
|
2370
|
+
return ee(() => {
|
|
2371
|
+
g.value = S(), document.addEventListener("keydown", v), window.addEventListener("scroll", i), window.addEventListener("resize", o);
|
|
2372
|
+
}), ue(() => {
|
|
2373
|
+
document.removeEventListener("keydown", v), window.removeEventListener("scroll", i), window.removeEventListener("resize", o);
|
|
2227
2374
|
}), () => t("div", { ref: r }, [t("button", {
|
|
2228
2375
|
type: "button",
|
|
2229
|
-
class:
|
|
2376
|
+
class: h.value,
|
|
2230
2377
|
disabled: e.disabled,
|
|
2231
|
-
"aria-labelledby":
|
|
2232
|
-
onMouseover:
|
|
2378
|
+
"aria-labelledby": u,
|
|
2379
|
+
onMouseover: K,
|
|
2233
2380
|
onMouseout: m,
|
|
2234
|
-
onFocusin:
|
|
2381
|
+
onFocusin: K,
|
|
2235
2382
|
onFocusout: m
|
|
2236
|
-
}, a.default?.()),
|
|
2237
|
-
id:
|
|
2383
|
+
}, a.default?.()), ge(t("div", {
|
|
2384
|
+
id: u,
|
|
2238
2385
|
ref: l,
|
|
2239
|
-
class: ["krds-tooltip-popover",
|
|
2386
|
+
class: ["krds-tooltip-popover", y.value],
|
|
2240
2387
|
style: s.value,
|
|
2241
2388
|
"aria-hidden": !n.value,
|
|
2242
2389
|
role: "tooltip"
|
|
2243
2390
|
}, [
|
|
2244
|
-
t("span", { class: "sr-only" },
|
|
2391
|
+
t("span", { class: "sr-only" }, d.value),
|
|
2245
2392
|
" ",
|
|
2246
2393
|
e.tooltipContent
|
|
2247
|
-
]), [[
|
|
2394
|
+
]), [[Se, n.value]])]);
|
|
2248
2395
|
}
|
|
2249
|
-
}),
|
|
2396
|
+
}), ya = ga, ma = /* @__PURE__ */ _({
|
|
2250
2397
|
name: "KrdsLanguageSwitcher",
|
|
2251
2398
|
props: {
|
|
2252
2399
|
languageList: {
|
|
@@ -2271,57 +2418,57 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2271
2418
|
close: () => !0
|
|
2272
2419
|
},
|
|
2273
2420
|
setup(e, { emit: a, slots: r }) {
|
|
2274
|
-
const l = E(!1), n = E(), s = E(),
|
|
2275
|
-
l.value = !l.value, l.value && n.value &&
|
|
2276
|
-
},
|
|
2421
|
+
const l = E(!1), n = E(), s = E(), u = () => {
|
|
2422
|
+
l.value = !l.value, l.value && n.value && y();
|
|
2423
|
+
}, g = () => {
|
|
2277
2424
|
l.value = !1;
|
|
2278
|
-
},
|
|
2279
|
-
a("update:modelValue",
|
|
2280
|
-
},
|
|
2425
|
+
}, h = (o) => {
|
|
2426
|
+
a("update:modelValue", o), g(), a("close"), s.value?.focus();
|
|
2427
|
+
}, y = () => {
|
|
2281
2428
|
if (!n.value) return;
|
|
2282
|
-
const
|
|
2283
|
-
if (!
|
|
2284
|
-
const
|
|
2285
|
-
n.value.classList.remove("drop-left", "drop-right"),
|
|
2286
|
-
},
|
|
2287
|
-
|
|
2288
|
-
},
|
|
2289
|
-
n.value?.contains(
|
|
2290
|
-
},
|
|
2291
|
-
n.value?.contains(
|
|
2292
|
-
},
|
|
2429
|
+
const o = n.value.querySelector(".drop-menu");
|
|
2430
|
+
if (!o) return;
|
|
2431
|
+
const i = o.getBoundingClientRect(), p = window.innerWidth;
|
|
2432
|
+
n.value.classList.remove("drop-left", "drop-right"), i.left < 0 ? n.value.classList.add("drop-left") : p < i.left + i.width && n.value.classList.add("drop-right");
|
|
2433
|
+
}, d = (o) => {
|
|
2434
|
+
o.key === "Escape" && (g(), s.value?.focus());
|
|
2435
|
+
}, S = (o) => {
|
|
2436
|
+
n.value?.contains(o.target) || g();
|
|
2437
|
+
}, k = (o) => {
|
|
2438
|
+
n.value?.contains(o.relatedTarget) || g();
|
|
2439
|
+
}, K = (o) => {
|
|
2293
2440
|
if (!n.value) return;
|
|
2294
|
-
n.value.querySelectorAll(".drop-list .item-link").forEach((
|
|
2295
|
-
|
|
2441
|
+
n.value.querySelectorAll(".drop-list .item-link").forEach((p) => {
|
|
2442
|
+
p.style.position = "relative", p.style.zIndex = "0";
|
|
2296
2443
|
});
|
|
2297
|
-
const
|
|
2298
|
-
|
|
2444
|
+
const i = o.target;
|
|
2445
|
+
i.style.zIndex = "1";
|
|
2299
2446
|
};
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
}),
|
|
2303
|
-
document.removeEventListener("keydown",
|
|
2447
|
+
se(l, (o) => {
|
|
2448
|
+
o ? (document.addEventListener("keydown", d), document.addEventListener("click", S)) : (document.removeEventListener("keydown", d), document.removeEventListener("click", S));
|
|
2449
|
+
}), ue(() => {
|
|
2450
|
+
document.removeEventListener("keydown", d), document.removeEventListener("click", S);
|
|
2304
2451
|
});
|
|
2305
|
-
const m = () => t("ul", { class: "drop-list" }, e.languageList.map((
|
|
2452
|
+
const m = () => t("ul", { class: "drop-list" }, e.languageList.map((o) => t("li", { key: o.code }, [t("a", {
|
|
2306
2453
|
href: "#",
|
|
2307
|
-
class: ["item-link", { active: e.modelValue ===
|
|
2308
|
-
lang:
|
|
2309
|
-
"aria-selected": e.modelValue ===
|
|
2310
|
-
onClick: Ke(() =>
|
|
2311
|
-
onFocus:
|
|
2454
|
+
class: ["item-link", { active: e.modelValue === o.code }],
|
|
2455
|
+
lang: o.code,
|
|
2456
|
+
"aria-selected": e.modelValue === o.code,
|
|
2457
|
+
onClick: Ke(() => h(o.code), ["prevent"]),
|
|
2458
|
+
onFocus: K
|
|
2312
2459
|
}, [
|
|
2313
|
-
|
|
2460
|
+
o.name,
|
|
2314
2461
|
" ",
|
|
2315
|
-
t("span", { class: "sr-only" }, e.modelValue ===
|
|
2316
|
-
])]))),
|
|
2317
|
-
href:
|
|
2462
|
+
t("span", { class: "sr-only" }, e.modelValue === o.code ? "선택됨" : "")
|
|
2463
|
+
])]))), v = () => t("ul", { class: "drop-list" }, e.languageList.map((o) => t("li", { key: o.code }, [t("a", {
|
|
2464
|
+
href: o.url || "#",
|
|
2318
2465
|
class: "item-link",
|
|
2319
|
-
lang:
|
|
2466
|
+
lang: o.code,
|
|
2320
2467
|
target: "_blank",
|
|
2321
2468
|
title: "새 창 열림",
|
|
2322
|
-
onFocus:
|
|
2469
|
+
onFocus: K
|
|
2323
2470
|
}, [
|
|
2324
|
-
|
|
2471
|
+
o.name,
|
|
2325
2472
|
" ",
|
|
2326
2473
|
t("i", { class: "svg-icon ico-go" })
|
|
2327
2474
|
])])));
|
|
@@ -2336,13 +2483,13 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2336
2483
|
"drop-right": e.dropPosition === "right"
|
|
2337
2484
|
}
|
|
2338
2485
|
],
|
|
2339
|
-
onFocusout:
|
|
2486
|
+
onFocusout: k
|
|
2340
2487
|
}, [t("button", {
|
|
2341
2488
|
ref: s,
|
|
2342
2489
|
type: "button",
|
|
2343
2490
|
class: ["krds-btn small text drop-btn", { active: l.value }],
|
|
2344
2491
|
"aria-expanded": l.value,
|
|
2345
|
-
onClick:
|
|
2492
|
+
onClick: u
|
|
2346
2493
|
}, [
|
|
2347
2494
|
t("i", { class: "svg-icon ico-global" }),
|
|
2348
2495
|
r.default?.(),
|
|
@@ -2350,16 +2497,20 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2350
2497
|
]), t("div", {
|
|
2351
2498
|
class: "drop-menu",
|
|
2352
2499
|
style: { display: l.value ? "block" : "none" }
|
|
2353
|
-
}, [t("div", { class: "drop-in" }, [r["prev-item"] ? t("div", { class: "drop-top" }, r["prev-item"]()) : null, e.type === "default" ? m() : e.type === "external" ?
|
|
2500
|
+
}, [t("div", { class: "drop-in" }, [r["prev-item"] ? t("div", { class: "drop-top" }, r["prev-item"]()) : null, e.type === "default" ? m() : e.type === "external" ? v() : null])])]);
|
|
2354
2501
|
}
|
|
2355
|
-
}),
|
|
2502
|
+
}), ba = ma, ka = /* @__PURE__ */ _({
|
|
2356
2503
|
name: "KrdsResize",
|
|
2504
|
+
props: { modelValue: {
|
|
2505
|
+
type: String,
|
|
2506
|
+
default: void 0
|
|
2507
|
+
} },
|
|
2357
2508
|
emits: {
|
|
2358
2509
|
"update:modelValue": (e) => !0,
|
|
2359
2510
|
close: () => !0
|
|
2360
2511
|
},
|
|
2361
2512
|
setup(e, { emit: a }) {
|
|
2362
|
-
const r = E(!1), l = E(), n = E(), s = E("md"),
|
|
2513
|
+
const r = E(!1), l = E(), n = E(), s = E(e.modelValue ?? "md"), u = [
|
|
2363
2514
|
{
|
|
2364
2515
|
key: "sm",
|
|
2365
2516
|
label: "작게",
|
|
@@ -2385,53 +2536,58 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2385
2536
|
label: "가장 크게",
|
|
2386
2537
|
zoom: "1.5"
|
|
2387
2538
|
}
|
|
2388
|
-
],
|
|
2389
|
-
r.value = !r.value, r.value && l.value &&
|
|
2390
|
-
},
|
|
2539
|
+
], g = () => {
|
|
2540
|
+
r.value = !r.value, r.value && l.value && k();
|
|
2541
|
+
}, h = () => {
|
|
2391
2542
|
r.value = !1;
|
|
2392
|
-
},
|
|
2393
|
-
|
|
2394
|
-
|
|
2395
|
-
|
|
2396
|
-
|
|
2397
|
-
}
|
|
2543
|
+
}, y = (i) => {
|
|
2544
|
+
const p = u.find((M) => M.key === i);
|
|
2545
|
+
p && (s.value = p.key, document.body.style.zoom = p.zoom);
|
|
2546
|
+
}, d = (i) => {
|
|
2547
|
+
h(), a("close"), n.value?.focus(), y(i.key), a("update:modelValue", i.key);
|
|
2548
|
+
};
|
|
2549
|
+
ee(() => e.modelValue && y(e.modelValue)), se(() => e.modelValue, (i) => i && y(i));
|
|
2550
|
+
const S = () => {
|
|
2551
|
+
const i = u.find((p) => p.key === "md");
|
|
2552
|
+
i && d(i);
|
|
2553
|
+
}, k = () => {
|
|
2398
2554
|
if (!l.value) return;
|
|
2399
2555
|
const i = l.value.querySelector(".drop-menu");
|
|
2400
2556
|
if (!i) return;
|
|
2401
|
-
const
|
|
2402
|
-
l.value.classList.remove("drop-left", "drop-right"),
|
|
2403
|
-
},
|
|
2404
|
-
i.key === "Escape" && (
|
|
2405
|
-
}, D = (i) => {
|
|
2406
|
-
l.value?.contains(i.target) || v();
|
|
2557
|
+
const p = i.getBoundingClientRect(), M = window.innerWidth;
|
|
2558
|
+
l.value.classList.remove("drop-left", "drop-right"), p.left < 0 ? l.value.classList.add("drop-left") : M < p.left + p.width && l.value.classList.add("drop-right");
|
|
2559
|
+
}, K = (i) => {
|
|
2560
|
+
i.key === "Escape" && (h(), n.value?.focus());
|
|
2407
2561
|
}, m = (i) => {
|
|
2408
|
-
l.value?.contains(i.
|
|
2409
|
-
},
|
|
2562
|
+
l.value?.contains(i.target) || h();
|
|
2563
|
+
}, v = (i) => {
|
|
2564
|
+
l.value?.contains(i.relatedTarget) || h();
|
|
2565
|
+
}, o = (i) => {
|
|
2410
2566
|
if (!l.value) return;
|
|
2411
|
-
l.value.querySelectorAll(".drop-list .item-link").forEach((
|
|
2412
|
-
|
|
2567
|
+
l.value.querySelectorAll(".drop-list .item-link").forEach((M) => {
|
|
2568
|
+
M.style.position = "relative", M.style.zIndex = "0";
|
|
2413
2569
|
});
|
|
2414
|
-
const
|
|
2415
|
-
|
|
2570
|
+
const p = i.target;
|
|
2571
|
+
p.style.zIndex = "1";
|
|
2416
2572
|
};
|
|
2417
|
-
return
|
|
2418
|
-
i ? (document.addEventListener("keydown",
|
|
2419
|
-
}),
|
|
2420
|
-
document.removeEventListener("keydown",
|
|
2573
|
+
return se(r, (i) => {
|
|
2574
|
+
i ? (document.addEventListener("keydown", K), document.addEventListener("click", m)) : (document.removeEventListener("keydown", K), document.removeEventListener("click", m));
|
|
2575
|
+
}), ue(() => {
|
|
2576
|
+
document.removeEventListener("keydown", K), document.removeEventListener("click", m);
|
|
2421
2577
|
}), () => t("div", {
|
|
2422
2578
|
ref: l,
|
|
2423
2579
|
class: "krds-drop-wrap krds-resize",
|
|
2424
2580
|
"data-adjust": "scale",
|
|
2425
|
-
onFocusout:
|
|
2581
|
+
onFocusout: v
|
|
2426
2582
|
}, [t("button", {
|
|
2427
2583
|
ref: n,
|
|
2428
2584
|
type: "button",
|
|
2429
2585
|
class: "krds-btn small text drop-btn",
|
|
2430
|
-
onClick:
|
|
2586
|
+
onClick: g
|
|
2431
2587
|
}, ["화면크기 ", t("i", { class: "svg-icon ico-toggle" })]), t("div", {
|
|
2432
2588
|
class: "drop-menu",
|
|
2433
2589
|
style: { display: r.value ? "block" : "none" }
|
|
2434
|
-
}, [t("div", { class: "drop-in" }, [t("ul", { class: "drop-list" },
|
|
2590
|
+
}, [t("div", { class: "drop-in" }, [t("ul", { class: "drop-list" }, u.map((i) => t("li", { key: i.key }, [t("button", {
|
|
2435
2591
|
type: "button",
|
|
2436
2592
|
class: [
|
|
2437
2593
|
"item-link",
|
|
@@ -2439,17 +2595,17 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2439
2595
|
i.key === s.value ? "active" : ""
|
|
2440
2596
|
],
|
|
2441
2597
|
"data-adjust-scale": i.key,
|
|
2442
|
-
onClick: Ke(() =>
|
|
2443
|
-
onFocus:
|
|
2598
|
+
onClick: Ke(() => d(i), ["prevent"]),
|
|
2599
|
+
onFocus: o
|
|
2444
2600
|
}, i.label)]))), t("div", { class: "drop-bottom" }, [t("button", {
|
|
2445
2601
|
type: "button",
|
|
2446
2602
|
class: "krds-btn medium text",
|
|
2447
2603
|
"data-adjust-scale": "md",
|
|
2448
|
-
onClick: Ke(
|
|
2449
|
-
onFocus:
|
|
2604
|
+
onClick: Ke(S, ["prevent"]),
|
|
2605
|
+
onFocus: o
|
|
2450
2606
|
}, [t("i", { class: "svg-icon ico-reset" }), " 초기화"])])])])]);
|
|
2451
2607
|
}
|
|
2452
|
-
}),
|
|
2608
|
+
}), Sa = ka, wa = /* @__PURE__ */ _({
|
|
2453
2609
|
name: "KrdsModal",
|
|
2454
2610
|
props: {
|
|
2455
2611
|
modelValue: {
|
|
@@ -2484,55 +2640,55 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2484
2640
|
emits: { "update:modelValue": (e) => !0 },
|
|
2485
2641
|
slots: Object,
|
|
2486
2642
|
setup(e, { slots: a, emit: r }) {
|
|
2487
|
-
const l = xe()?.uid, n =
|
|
2643
|
+
const l = xe()?.uid, n = C(() => e.modalId ?? `krds-modal-${l}`), s = C({
|
|
2488
2644
|
get: () => e.modelValue,
|
|
2489
|
-
set: (
|
|
2490
|
-
}),
|
|
2645
|
+
set: (i) => r("update:modelValue", i)
|
|
2646
|
+
}), u = C(() => `tit_${n.value}`), g = C(() => ({
|
|
2491
2647
|
small: "modal-sm",
|
|
2492
2648
|
medium: "modal-md",
|
|
2493
2649
|
large: "modal-lg"
|
|
2494
|
-
})[e.size]),
|
|
2650
|
+
})[e.size]), h = () => {
|
|
2495
2651
|
s.value = !1;
|
|
2496
2652
|
};
|
|
2497
|
-
let
|
|
2498
|
-
const
|
|
2499
|
-
if (!
|
|
2500
|
-
const
|
|
2501
|
-
if (
|
|
2502
|
-
|
|
2653
|
+
let y = "", d = null;
|
|
2654
|
+
const S = E(null), k = (i) => Array.from(i.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter((p) => !p.hasAttribute("disabled") && p.getAttribute("tabindex") !== "-1"), K = (i) => {
|
|
2655
|
+
if (!S.value || i.key !== "Tab") return;
|
|
2656
|
+
const p = k(S.value);
|
|
2657
|
+
if (p.length === 0) {
|
|
2658
|
+
i.preventDefault();
|
|
2503
2659
|
return;
|
|
2504
2660
|
}
|
|
2505
|
-
const
|
|
2506
|
-
|
|
2507
|
-
}, m = (
|
|
2508
|
-
|
|
2509
|
-
},
|
|
2510
|
-
document.body.style.overflow =
|
|
2511
|
-
},
|
|
2512
|
-
|
|
2513
|
-
const
|
|
2514
|
-
if (
|
|
2515
|
-
|
|
2516
|
-
const
|
|
2517
|
-
|
|
2661
|
+
const M = p[0], A = p[p.length - 1];
|
|
2662
|
+
i.shiftKey && document.activeElement === M ? (i.preventDefault(), A.focus()) : !i.shiftKey && document.activeElement === A && (i.preventDefault(), M.focus());
|
|
2663
|
+
}, m = (i) => {
|
|
2664
|
+
i.key === "Escape" && !e.persistent && h();
|
|
2665
|
+
}, v = () => {
|
|
2666
|
+
document.body.style.overflow = y, document.removeEventListener("keydown", K), document.removeEventListener("keydown", m), d && (d.focus(), d = null), S.value = null;
|
|
2667
|
+
}, o = async () => {
|
|
2668
|
+
y = document.body.style.overflow, document.body.style.overflow = "hidden", d = document.activeElement, await pe();
|
|
2669
|
+
const i = document.getElementById(n.value);
|
|
2670
|
+
if (i) {
|
|
2671
|
+
S.value = i;
|
|
2672
|
+
const p = i.querySelector(".modal-conts");
|
|
2673
|
+
p && (p.setAttribute("tabindex", "-1"), p.focus()), document.addEventListener("keydown", K), document.addEventListener("keydown", m);
|
|
2518
2674
|
}
|
|
2519
2675
|
};
|
|
2520
|
-
return
|
|
2521
|
-
e.modelValue &&
|
|
2522
|
-
}),
|
|
2523
|
-
e.modelValue &&
|
|
2676
|
+
return se(() => e.modelValue, (i) => i ? o() : v()), ee(() => {
|
|
2677
|
+
e.modelValue && o();
|
|
2678
|
+
}), oe(() => {
|
|
2679
|
+
e.modelValue && v();
|
|
2524
2680
|
}), () => {
|
|
2525
2681
|
if (!s.value) return null;
|
|
2526
|
-
const
|
|
2682
|
+
const i = {
|
|
2527
2683
|
id: n.value,
|
|
2528
2684
|
class: "krds-modal fade in shown",
|
|
2529
2685
|
role: "dialog",
|
|
2530
2686
|
"aria-modal": !0,
|
|
2531
|
-
"aria-labelledby":
|
|
2687
|
+
"aria-labelledby": u.value
|
|
2532
2688
|
};
|
|
2533
|
-
return e.full ?
|
|
2689
|
+
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 ${g.value}` }, [t("div", { class: "modal-content" }, [
|
|
2534
2690
|
a.title ? t("div", { class: "modal-header" }, [t("h2", {
|
|
2535
|
-
id:
|
|
2691
|
+
id: u.value,
|
|
2536
2692
|
class: "modal-title"
|
|
2537
2693
|
}, a.title())]) : null,
|
|
2538
2694
|
t("div", { class: "modal-conts" }, [t("div", { class: "conts-area" }, a.default?.())]),
|
|
@@ -2540,15 +2696,15 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2540
2696
|
t("button", {
|
|
2541
2697
|
type: "button",
|
|
2542
2698
|
class: "krds-btn medium icon btn-close close-modal",
|
|
2543
|
-
onClick:
|
|
2699
|
+
onClick: h
|
|
2544
2700
|
}, [t("span", { class: "sr-only" }, "닫기"), t("i", { class: "svg-icon ico-popup-close" })])
|
|
2545
2701
|
].filter(Boolean))]), t("div", {
|
|
2546
2702
|
class: e.backdrop ? "modal-back in" : "modal-back",
|
|
2547
|
-
onClick: e.persistent ? void 0 :
|
|
2703
|
+
onClick: e.persistent ? void 0 : h
|
|
2548
2704
|
})]));
|
|
2549
2705
|
};
|
|
2550
2706
|
}
|
|
2551
|
-
}),
|
|
2707
|
+
}), Ka = wa, Ca = /* @__PURE__ */ _({
|
|
2552
2708
|
name: "KrdsAccordionGroup",
|
|
2553
2709
|
props: {
|
|
2554
2710
|
typeLine: {
|
|
@@ -2561,13 +2717,13 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2561
2717
|
}
|
|
2562
2718
|
},
|
|
2563
2719
|
setup(e, { slots: a }) {
|
|
2564
|
-
const r =
|
|
2720
|
+
const r = C(() => {
|
|
2565
2721
|
const l = ["krds-accordion"];
|
|
2566
2722
|
return e.typeLine && l.push("type-line"), e.class && l.push(e.class), l;
|
|
2567
2723
|
});
|
|
2568
2724
|
return () => t("div", { class: r.value }, a.default?.());
|
|
2569
2725
|
}
|
|
2570
|
-
}),
|
|
2726
|
+
}), xa = Ca, $a = /* @__PURE__ */ _({
|
|
2571
2727
|
name: "KrdsAccordionItem",
|
|
2572
2728
|
props: {
|
|
2573
2729
|
id: {
|
|
@@ -2589,7 +2745,7 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2589
2745
|
},
|
|
2590
2746
|
emits: { toggle: (e) => !0 },
|
|
2591
2747
|
setup(e, { emit: a, slots: r }) {
|
|
2592
|
-
const l =
|
|
2748
|
+
const l = C(() => e.openItem === e.id), n = () => {
|
|
2593
2749
|
a("toggle", e.id);
|
|
2594
2750
|
};
|
|
2595
2751
|
return () => t("div", {
|
|
@@ -2609,7 +2765,7 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2609
2765
|
"aria-labelledby": `accordion-header-${e.id}`
|
|
2610
2766
|
}, [t("div", { class: "accordion-body" }, r.content?.() ?? e.content)])]);
|
|
2611
2767
|
}
|
|
2612
|
-
}),
|
|
2768
|
+
}), La = $a, Ba = /* @__PURE__ */ _({
|
|
2613
2769
|
name: "KrdsTts",
|
|
2614
2770
|
props: {
|
|
2615
2771
|
text: {
|
|
@@ -2662,30 +2818,30 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2662
2818
|
r.value = !0;
|
|
2663
2819
|
}, l.onend = () => {
|
|
2664
2820
|
r.value = !1, l = null, a("end");
|
|
2665
|
-
}, l.onerror = (
|
|
2666
|
-
r.value = !1, l = null,
|
|
2821
|
+
}, l.onerror = (h) => {
|
|
2822
|
+
r.value = !1, l = null, h.error !== "canceled" && a("error", new Error(h.error));
|
|
2667
2823
|
}, window.speechSynthesis.speak(l), a("play", e.text);
|
|
2668
2824
|
}
|
|
2669
|
-
},
|
|
2670
|
-
const
|
|
2671
|
-
return e.size &&
|
|
2672
|
-
}),
|
|
2673
|
-
return
|
|
2825
|
+
}, u = C(() => {
|
|
2826
|
+
const h = ["krds-tts"];
|
|
2827
|
+
return e.size && h.push(e.size), r.value ? h.push("pause") : e.icon === "play" && h.push("play"), e.class && h.push(e.class), h;
|
|
2828
|
+
}), g = C(() => r.value ? "ico-stop" : e.icon === "play" ? "ico-play" : "ico-volume");
|
|
2829
|
+
return oe(() => {
|
|
2674
2830
|
n();
|
|
2675
2831
|
}), () => {
|
|
2676
|
-
const
|
|
2832
|
+
const h = [t("span", {
|
|
2677
2833
|
class: "krds-tts-icon",
|
|
2678
2834
|
"aria-hidden": "true"
|
|
2679
|
-
}, [t("i", { class: `svg-icon ${
|
|
2680
|
-
return e.label &&
|
|
2835
|
+
}, [t("i", { class: `svg-icon ${g.value}` })])];
|
|
2836
|
+
return e.label && h.push(t("span", { class: "krds-tts-text" }, e.label)), t("button", {
|
|
2681
2837
|
type: "button",
|
|
2682
|
-
class:
|
|
2838
|
+
class: u.value,
|
|
2683
2839
|
disabled: e.disabled || void 0,
|
|
2684
2840
|
onClick: s
|
|
2685
|
-
},
|
|
2841
|
+
}, h);
|
|
2686
2842
|
};
|
|
2687
2843
|
}
|
|
2688
|
-
}),
|
|
2844
|
+
}), Ea = Ba, Da = /* @__PURE__ */ _({
|
|
2689
2845
|
name: "KrdsTable",
|
|
2690
2846
|
props: {
|
|
2691
2847
|
caption: {
|
|
@@ -2708,71 +2864,71 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2708
2864
|
emits: { "row-click": (e, a) => !0 },
|
|
2709
2865
|
slots: Object,
|
|
2710
2866
|
setup(e, { emit: a, slots: r }) {
|
|
2711
|
-
const l = xe(), n =
|
|
2712
|
-
const
|
|
2713
|
-
return e.class &&
|
|
2714
|
-
}), s =
|
|
2715
|
-
const
|
|
2716
|
-
return
|
|
2717
|
-
},
|
|
2718
|
-
if (
|
|
2719
|
-
return typeof
|
|
2720
|
-
},
|
|
2721
|
-
const
|
|
2722
|
-
if (
|
|
2723
|
-
const
|
|
2724
|
-
|
|
2867
|
+
const l = xe(), n = C(() => {
|
|
2868
|
+
const o = ["tbl"];
|
|
2869
|
+
return e.class && o.push(e.class), o;
|
|
2870
|
+
}), s = C(() => ["krds-table-wrap"]), u = (o) => o.headerStyle || void 0, g = (o) => {
|
|
2871
|
+
const i = [];
|
|
2872
|
+
return o.align && i.push(`text-${o.align}`), o.headerClasses && i.push(o.headerClasses), i.length > 0 ? i : void 0;
|
|
2873
|
+
}, h = (o, i) => {
|
|
2874
|
+
if (i.style)
|
|
2875
|
+
return typeof i.style == "function" ? i.style(o) : i.style;
|
|
2876
|
+
}, y = (o, i) => {
|
|
2877
|
+
const p = [];
|
|
2878
|
+
if (i.align && p.push(`text-${i.align}`), i.classes) {
|
|
2879
|
+
const M = typeof i.classes == "function" ? i.classes(o) : i.classes;
|
|
2880
|
+
p.push(M);
|
|
2725
2881
|
}
|
|
2726
|
-
return
|
|
2727
|
-
},
|
|
2728
|
-
if (!
|
|
2729
|
-
const
|
|
2730
|
-
return t("col", { style:
|
|
2731
|
-
})),
|
|
2882
|
+
return p.length > 0 ? p : void 0;
|
|
2883
|
+
}, d = () => !e.columns.length || !e.columns.some((o) => o.headerStyle && o.headerStyle.includes("width")) ? null : t("colgroup", e.columns.map((o) => {
|
|
2884
|
+
if (!o.headerStyle) return t("col");
|
|
2885
|
+
const i = o.headerStyle.match(/width\s*:\s*([^;]+)/i);
|
|
2886
|
+
return t("col", { style: i ? { width: i[1].trim() } : void 0 });
|
|
2887
|
+
})), S = () => {
|
|
2732
2888
|
if (!e.columns.length) return null;
|
|
2733
|
-
const
|
|
2734
|
-
const
|
|
2889
|
+
const o = e.columns.map((i) => {
|
|
2890
|
+
const p = u(i), M = g(i);
|
|
2735
2891
|
return t("th", {
|
|
2736
2892
|
scope: "col",
|
|
2737
|
-
class:
|
|
2738
|
-
style:
|
|
2739
|
-
},
|
|
2893
|
+
class: M,
|
|
2894
|
+
style: p
|
|
2895
|
+
}, i.label);
|
|
2740
2896
|
});
|
|
2741
|
-
return t("thead", [t("tr",
|
|
2742
|
-
},
|
|
2897
|
+
return t("thead", [t("tr", o)]);
|
|
2898
|
+
}, k = (o, i) => typeof i.field == "function" ? i.field(o) : o[i.field], K = () => {
|
|
2743
2899
|
if (!e.rows.length) return t("tbody", [t("tr", [t("td", {
|
|
2744
2900
|
colspan: e.columns.length || 1,
|
|
2745
2901
|
class: "text-center"
|
|
2746
2902
|
}, r["no-data"] ? r["no-data"]() : "데이터가 없습니다.")])]);
|
|
2747
|
-
const
|
|
2748
|
-
const
|
|
2749
|
-
const f =
|
|
2750
|
-
return t(
|
|
2751
|
-
scope:
|
|
2903
|
+
const o = l?.vnode.props, i = !!(o?.onRowClick || o?.["onRow-click"]), p = e.rows.map((M, A) => {
|
|
2904
|
+
const D = e.columns.map((L, $) => {
|
|
2905
|
+
const f = k(M, L), T = typeof f == "function" ? f() : f, R = h(M, L), H = y(M, L);
|
|
2906
|
+
return t($ === 0 ? "th" : "td", {
|
|
2907
|
+
scope: $ === 0 ? "row" : void 0,
|
|
2752
2908
|
class: H,
|
|
2753
2909
|
style: R
|
|
2754
|
-
},
|
|
2910
|
+
}, T);
|
|
2755
2911
|
});
|
|
2756
|
-
return t("tr",
|
|
2912
|
+
return t("tr", i ? {
|
|
2757
2913
|
tabindex: 0,
|
|
2758
|
-
onClick: () => m(
|
|
2759
|
-
onKeydown: (
|
|
2760
|
-
} : null,
|
|
2914
|
+
onClick: () => m(M, A),
|
|
2915
|
+
onKeydown: (L) => v(L, M, A)
|
|
2916
|
+
} : null, D);
|
|
2761
2917
|
});
|
|
2762
|
-
return t("tbody",
|
|
2763
|
-
}, m = (
|
|
2764
|
-
a("row-click",
|
|
2765
|
-
},
|
|
2766
|
-
|
|
2918
|
+
return t("tbody", p);
|
|
2919
|
+
}, m = (o, i) => {
|
|
2920
|
+
a("row-click", o, i);
|
|
2921
|
+
}, v = (o, i, p) => {
|
|
2922
|
+
o.target !== o.currentTarget || o.key !== "Enter" && o.key !== " " || (o.preventDefault(), m(i, p));
|
|
2767
2923
|
};
|
|
2768
2924
|
return () => t("div", { class: s.value }, [t("table", { class: n.value }, [
|
|
2769
2925
|
e.caption && t("caption", e.caption),
|
|
2770
|
-
|
|
2771
|
-
|
|
2772
|
-
|
|
2926
|
+
d(),
|
|
2927
|
+
S(),
|
|
2928
|
+
K()
|
|
2773
2929
|
])]);
|
|
2774
2930
|
}
|
|
2775
|
-
}),
|
|
2931
|
+
}), Ta = Da, Aa = /* @__PURE__ */ _({
|
|
2776
2932
|
name: "KrdsHeader",
|
|
2777
2933
|
props: {
|
|
2778
2934
|
id: {
|
|
@@ -2786,7 +2942,7 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2786
2942
|
},
|
|
2787
2943
|
slots: Object,
|
|
2788
2944
|
setup(e, { slots: a }) {
|
|
2789
|
-
const r =
|
|
2945
|
+
const r = C(() => {
|
|
2790
2946
|
const l = [];
|
|
2791
2947
|
return e.class && l.push(e.class), l;
|
|
2792
2948
|
});
|
|
@@ -2804,7 +2960,7 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2804
2960
|
}, n);
|
|
2805
2961
|
};
|
|
2806
2962
|
}
|
|
2807
|
-
}),
|
|
2963
|
+
}), _a = Aa, Ma = /* @__PURE__ */ _({
|
|
2808
2964
|
name: "KrdsFooter",
|
|
2809
2965
|
props: {
|
|
2810
2966
|
id: {
|
|
@@ -2817,21 +2973,21 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2817
2973
|
}
|
|
2818
2974
|
},
|
|
2819
2975
|
setup(e, { slots: a }) {
|
|
2820
|
-
const r =
|
|
2821
|
-
const
|
|
2822
|
-
return e.class &&
|
|
2823
|
-
}), 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,
|
|
2976
|
+
const r = C(() => {
|
|
2977
|
+
const g = [];
|
|
2978
|
+
return e.class && g.push(e.class), g;
|
|
2979
|
+
}), l = () => a.top ? t("div", { class: "foot-quick" }, [t("div", { class: "inner" }, a.top())]) : null, n = () => a.logo ? t("div", { class: "f-logo" }, a.logo()) : null, s = () => a.content ? t("div", { class: "f-cnt" }, a.content()) : null, u = () => a.bottom ? t("div", { class: "f-btm" }, a.bottom()) : null;
|
|
2824
2980
|
return () => {
|
|
2825
|
-
const
|
|
2826
|
-
|
|
2827
|
-
const
|
|
2828
|
-
return
|
|
2981
|
+
const g = l(), h = n(), y = s(), d = u(), S = [];
|
|
2982
|
+
h && S.push(h), y && S.push(y), d && S.push(d);
|
|
2983
|
+
const k = [];
|
|
2984
|
+
return g && k.push(g), S.length > 0 && k.push(t("div", { class: "inner" }, S)), t("footer", {
|
|
2829
2985
|
id: e.id,
|
|
2830
2986
|
class: r.value
|
|
2831
|
-
},
|
|
2987
|
+
}, k);
|
|
2832
2988
|
};
|
|
2833
2989
|
}
|
|
2834
|
-
}),
|
|
2990
|
+
}), Va = Ma, Fa = /* @__PURE__ */ _({
|
|
2835
2991
|
name: "KrdsDisclosure",
|
|
2836
2992
|
props: {
|
|
2837
2993
|
title: {
|
|
@@ -2845,7 +3001,7 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2845
3001
|
},
|
|
2846
3002
|
emits: { "update:modelValue": (e) => !0 },
|
|
2847
3003
|
setup(e, { emit: a, slots: r }) {
|
|
2848
|
-
const l = `disclosure-${
|
|
3004
|
+
const l = `disclosure-${de()}`, n = C(() => e.modelValue), s = () => {
|
|
2849
3005
|
a("update:modelValue", !e.modelValue);
|
|
2850
3006
|
};
|
|
2851
3007
|
return () => t("div", { class: [
|
|
@@ -2864,7 +3020,7 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2864
3020
|
inert: !n.value
|
|
2865
3021
|
}, [t("div", { class: "expand-in" }, r.default?.())])]);
|
|
2866
3022
|
}
|
|
2867
|
-
}),
|
|
3023
|
+
}), Pa = Fa, za = /* @__PURE__ */ _({
|
|
2868
3024
|
name: "KrdsIdentifier",
|
|
2869
3025
|
props: {
|
|
2870
3026
|
class: {
|
|
@@ -2878,7 +3034,7 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2878
3034
|
},
|
|
2879
3035
|
emits: { click: (e) => !0 },
|
|
2880
3036
|
setup(e, { emit: a, slots: r }) {
|
|
2881
|
-
const l =
|
|
3037
|
+
const l = C(() => {
|
|
2882
3038
|
const s = ["krds-identifier"];
|
|
2883
3039
|
return e.class && s.push(e.class), s;
|
|
2884
3040
|
}), n = (s) => {
|
|
@@ -2889,7 +3045,7 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2889
3045
|
onClick: n
|
|
2890
3046
|
}, [t("span", { class: "logo" }, [t("span", { class: "sr-only" }, e.logoLabel)]), t("span", { class: "ban-txt" }, r.default?.())]);
|
|
2891
3047
|
}
|
|
2892
|
-
}),
|
|
3048
|
+
}), Ra = za, Ia = 50, Ha = /* @__PURE__ */ _({
|
|
2893
3049
|
name: "KrdsLayout",
|
|
2894
3050
|
props: {
|
|
2895
3051
|
id: {
|
|
@@ -2911,45 +3067,45 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2911
3067
|
"scroll-height": (e) => !0
|
|
2912
3068
|
},
|
|
2913
3069
|
setup(e, { slots: a, emit: r }) {
|
|
2914
|
-
const l = E(0), n = E(0), s = E(0),
|
|
3070
|
+
const l = E(0), n = E(0), s = E(0), u = E(null), g = E(null), h = E(null), y = () => {
|
|
2915
3071
|
const m = n.value;
|
|
2916
3072
|
l.value = window.scrollY, n.value = document.body.scrollHeight, m !== n.value && m > 0 && r("scroll-height", n.value);
|
|
2917
|
-
},
|
|
2918
|
-
if (!
|
|
3073
|
+
}, d = () => {
|
|
3074
|
+
if (!g.value || !e.enableScrollDetection) return;
|
|
2919
3075
|
const m = document.querySelector("#container");
|
|
2920
3076
|
if (!m) return;
|
|
2921
|
-
const
|
|
2922
|
-
|
|
2923
|
-
},
|
|
2924
|
-
|
|
3077
|
+
const v = m.offsetTop, o = window.scrollY, i = o > s.value, p = o < s.value;
|
|
3078
|
+
o > v + Ia ? i ? (g.value.classList.add("scroll-down"), g.value.classList.remove("scroll-up"), u.value = "down") : p && (g.value.classList.add("scroll-up"), g.value.classList.remove("scroll-down"), u.value = "up") : (g.value.classList.remove("scroll-down", "scroll-up"), u.value = null), s.value = o;
|
|
3079
|
+
}, S = () => {
|
|
3080
|
+
y(), d(), r("scroll", {
|
|
2925
3081
|
scrollY: l.value,
|
|
2926
3082
|
scrollHeight: n.value,
|
|
2927
|
-
direction:
|
|
3083
|
+
direction: u.value,
|
|
2928
3084
|
timestamp: Date.now()
|
|
2929
3085
|
});
|
|
2930
|
-
},
|
|
2931
|
-
for (const
|
|
2932
|
-
const { width:
|
|
3086
|
+
}, k = (m) => {
|
|
3087
|
+
for (const v of m) {
|
|
3088
|
+
const { width: o, height: i } = v.contentRect;
|
|
2933
3089
|
r("resize", {
|
|
2934
|
-
width:
|
|
2935
|
-
height:
|
|
3090
|
+
width: o,
|
|
3091
|
+
height: i
|
|
2936
3092
|
});
|
|
2937
3093
|
}
|
|
2938
|
-
},
|
|
3094
|
+
}, K = C(() => {
|
|
2939
3095
|
const m = ["g-wrap"];
|
|
2940
3096
|
return e.class && m.push(e.class), m;
|
|
2941
3097
|
});
|
|
2942
|
-
return
|
|
2943
|
-
e.enableScrollDetection && (
|
|
2944
|
-
}),
|
|
2945
|
-
e.enableScrollDetection && window.removeEventListener("scroll",
|
|
3098
|
+
return ee(() => {
|
|
3099
|
+
e.enableScrollDetection && (y(), window.addEventListener("scroll", S, { passive: !0 })), g.value && typeof ResizeObserver < "u" && (h.value = new ResizeObserver(k), h.value.observe(g.value));
|
|
3100
|
+
}), ue(() => {
|
|
3101
|
+
e.enableScrollDetection && window.removeEventListener("scroll", S), h.value && (h.value.disconnect(), h.value = null);
|
|
2946
3102
|
}), () => t("div", {
|
|
2947
3103
|
id: e.id,
|
|
2948
|
-
class:
|
|
2949
|
-
ref:
|
|
3104
|
+
class: K.value,
|
|
3105
|
+
ref: g
|
|
2950
3106
|
}, a.default?.());
|
|
2951
3107
|
}
|
|
2952
|
-
}),
|
|
3108
|
+
}), Oa = Ha, qa = /* @__PURE__ */ _({
|
|
2953
3109
|
name: "KrdsSideNavigation",
|
|
2954
3110
|
props: {
|
|
2955
3111
|
title: {
|
|
@@ -2963,63 +3119,63 @@ var Vt = /* @__PURE__ */ A({
|
|
|
2963
3119
|
},
|
|
2964
3120
|
emits: { "update:modelValue": (e) => !0 },
|
|
2965
3121
|
setup(e, { emit: a }) {
|
|
2966
|
-
const r =
|
|
2967
|
-
const
|
|
2968
|
-
|
|
2969
|
-
},
|
|
2970
|
-
const
|
|
2971
|
-
|
|
2972
|
-
},
|
|
2973
|
-
const
|
|
2974
|
-
|
|
2975
|
-
},
|
|
2976
|
-
a("update:modelValue", r.value.map((
|
|
2977
|
-
if (
|
|
2978
|
-
const
|
|
2979
|
-
...
|
|
2980
|
-
expanded: !
|
|
3122
|
+
const r = C(() => e.modelValue || []), l = de(), n = E(/* @__PURE__ */ new Map()), s = E(/* @__PURE__ */ new Map()), u = E(/* @__PURE__ */ new Map()), g = E(null), h = (A, D, L) => {
|
|
3123
|
+
const $ = `${D}-${L}`;
|
|
3124
|
+
A ? n.value.set($, A) : n.value.delete($);
|
|
3125
|
+
}, y = (A, D, L) => {
|
|
3126
|
+
const $ = `${D}-${L}`;
|
|
3127
|
+
A ? s.value.set($, A) : s.value.delete($);
|
|
3128
|
+
}, d = (A, D, L) => {
|
|
3129
|
+
const $ = `${D}-${L}`;
|
|
3130
|
+
A ? u.value.set($, A) : u.value.delete($);
|
|
3131
|
+
}, S = (A) => {
|
|
3132
|
+
a("update:modelValue", r.value.map((D, L) => {
|
|
3133
|
+
if (L === A && D.subItems) {
|
|
3134
|
+
const $ = D.expanded, f = {
|
|
3135
|
+
...D,
|
|
3136
|
+
expanded: !D.expanded
|
|
2981
3137
|
};
|
|
2982
|
-
return
|
|
2983
|
-
...
|
|
3138
|
+
return $ && !f.expanded && (f.subItems = D.subItems.map((T) => ({
|
|
3139
|
+
...T,
|
|
2984
3140
|
expanded: !1
|
|
2985
|
-
})),
|
|
3141
|
+
})), g.value = null), f;
|
|
2986
3142
|
}
|
|
2987
|
-
return
|
|
3143
|
+
return D;
|
|
2988
3144
|
}));
|
|
2989
|
-
},
|
|
2990
|
-
a("update:modelValue", r.value.map((
|
|
2991
|
-
...
|
|
2992
|
-
subItems:
|
|
2993
|
-
if (
|
|
3145
|
+
}, k = (A, D) => {
|
|
3146
|
+
a("update:modelValue", r.value.map((L, $) => $ === A && L.subItems ? {
|
|
3147
|
+
...L,
|
|
3148
|
+
subItems: L.subItems.map((f, T) => {
|
|
3149
|
+
if (T === D && f.subItems) {
|
|
2994
3150
|
const R = {
|
|
2995
3151
|
...f,
|
|
2996
3152
|
expanded: !f.expanded
|
|
2997
3153
|
};
|
|
2998
3154
|
if (R.expanded) {
|
|
2999
|
-
const H = `${
|
|
3000
|
-
|
|
3001
|
-
const
|
|
3002
|
-
|
|
3003
|
-
|
|
3155
|
+
const H = `${A}-${D}`;
|
|
3156
|
+
g.value = n.value.get(H) || null;
|
|
3157
|
+
const O = s.value.get(H), N = u.value.get(H);
|
|
3158
|
+
O && N && (O.addEventListener("transitionend", () => {
|
|
3159
|
+
N.focus();
|
|
3004
3160
|
}, { once: !0 }), requestAnimationFrame(() => {
|
|
3005
|
-
|
|
3161
|
+
O.getAnimations({ subtree: !0 }).length || N.focus();
|
|
3006
3162
|
}));
|
|
3007
3163
|
}
|
|
3008
3164
|
return R;
|
|
3009
3165
|
}
|
|
3010
3166
|
return f;
|
|
3011
3167
|
})
|
|
3012
|
-
} :
|
|
3013
|
-
},
|
|
3014
|
-
a("update:modelValue", r.value.map((
|
|
3015
|
-
...
|
|
3016
|
-
subItems:
|
|
3017
|
-
if (
|
|
3018
|
-
if (
|
|
3019
|
-
const R =
|
|
3168
|
+
} : L));
|
|
3169
|
+
}, K = (A, D) => {
|
|
3170
|
+
a("update:modelValue", r.value.map((L, $) => $ === A && L.subItems ? {
|
|
3171
|
+
...L,
|
|
3172
|
+
subItems: L.subItems.map((f, T) => {
|
|
3173
|
+
if (T === D && f.subItems && f.expanded) {
|
|
3174
|
+
if (g.value) {
|
|
3175
|
+
const R = g.value;
|
|
3020
3176
|
requestAnimationFrame(() => {
|
|
3021
3177
|
R.focus();
|
|
3022
|
-
}),
|
|
3178
|
+
}), g.value = null;
|
|
3023
3179
|
}
|
|
3024
3180
|
return {
|
|
3025
3181
|
...f,
|
|
@@ -3028,84 +3184,84 @@ var Vt = /* @__PURE__ */ A({
|
|
|
3028
3184
|
}
|
|
3029
3185
|
return f;
|
|
3030
3186
|
})
|
|
3031
|
-
} :
|
|
3032
|
-
}, m = (
|
|
3033
|
-
const
|
|
3034
|
-
f && !f.contains(
|
|
3035
|
-
},
|
|
3036
|
-
|
|
3037
|
-
},
|
|
3038
|
-
|
|
3039
|
-
},
|
|
3040
|
-
key: `popup-item-${
|
|
3187
|
+
} : L));
|
|
3188
|
+
}, m = (A, D, L) => {
|
|
3189
|
+
const $ = `${D}-${L}`, f = s.value.get($);
|
|
3190
|
+
f && !f.contains(A.relatedTarget) && K(D, L);
|
|
3191
|
+
}, v = (A, D) => {
|
|
3192
|
+
K(A, D);
|
|
3193
|
+
}, o = (A, D) => {
|
|
3194
|
+
A.onClick && A.onClick(D);
|
|
3195
|
+
}, i = (A, D, L) => A.map(($, f) => t("li", {
|
|
3196
|
+
key: `popup-item-${D}-${L}-${f}`,
|
|
3041
3197
|
role: "none"
|
|
3042
3198
|
}, t("a", {
|
|
3043
|
-
href:
|
|
3199
|
+
href: $.href || "#",
|
|
3044
3200
|
class: "lnb-btn",
|
|
3045
3201
|
role: "menuitem",
|
|
3046
|
-
onClick: (
|
|
3047
|
-
},
|
|
3048
|
-
const f = `lnb-subitem-${
|
|
3202
|
+
onClick: (T) => o($, T)
|
|
3203
|
+
}, $.text))), p = (A, D) => A.map((L, $) => {
|
|
3204
|
+
const f = `lnb-subitem-${D}-${$}`;
|
|
3049
3205
|
return t("li", {
|
|
3050
3206
|
key: f,
|
|
3051
|
-
class: ["lnb-subitem", { active:
|
|
3207
|
+
class: ["lnb-subitem", { active: L.expanded }],
|
|
3052
3208
|
role: "none"
|
|
3053
|
-
}, [
|
|
3054
|
-
ref: (
|
|
3209
|
+
}, [L.subItems ? [t("button", {
|
|
3210
|
+
ref: (T) => h(T, D, $),
|
|
3055
3211
|
type: "button",
|
|
3056
3212
|
class: "lnb-btn lnb-toggle-popup",
|
|
3057
3213
|
role: "menuitem",
|
|
3058
|
-
"aria-controls": `${l}-lnbmenu-${
|
|
3059
|
-
"aria-expanded":
|
|
3214
|
+
"aria-controls": `${l}-lnbmenu-${D}-${$}`,
|
|
3215
|
+
"aria-expanded": L.expanded ? "true" : "false",
|
|
3060
3216
|
"aria-haspopup": "true",
|
|
3061
|
-
onClick: () =>
|
|
3062
|
-
},
|
|
3063
|
-
ref: (
|
|
3064
|
-
id: `${l}-lnbmenu-${
|
|
3065
|
-
class: ["lnb-submenu-lv2", { active:
|
|
3217
|
+
onClick: () => k(D, $)
|
|
3218
|
+
}, L.text), t("div", {
|
|
3219
|
+
ref: (T) => y(T, D, $),
|
|
3220
|
+
id: `${l}-lnbmenu-${D}-${$}`,
|
|
3221
|
+
class: ["lnb-submenu-lv2", { active: L.expanded }],
|
|
3066
3222
|
role: "menu",
|
|
3067
|
-
onFocusout: (
|
|
3223
|
+
onFocusout: (T) => m(T, D, $)
|
|
3068
3224
|
}, [t("button", {
|
|
3069
|
-
ref: (
|
|
3225
|
+
ref: (T) => d(T, D, $),
|
|
3070
3226
|
type: "button",
|
|
3071
3227
|
class: "lnb-btn-tit",
|
|
3072
|
-
onClick: () =>
|
|
3073
|
-
},
|
|
3074
|
-
href:
|
|
3228
|
+
onClick: () => v(D, $)
|
|
3229
|
+
}, L.popupTitle || L.text), t("ul", {}, i(L.subItems || [], D, $))])] : t("a", {
|
|
3230
|
+
href: L.href || "#",
|
|
3075
3231
|
class: ["lnb-btn", "lnb-link"],
|
|
3076
3232
|
role: "menuitem",
|
|
3077
|
-
onClick: (
|
|
3078
|
-
},
|
|
3079
|
-
}),
|
|
3080
|
-
key: `lnb-item-${
|
|
3081
|
-
class: ["lnb-item", { active:
|
|
3233
|
+
onClick: (T) => o(L, T)
|
|
3234
|
+
}, L.text)]);
|
|
3235
|
+
}), M = () => r.value.map((A, D) => t("li", {
|
|
3236
|
+
key: `lnb-item-${D}`,
|
|
3237
|
+
class: ["lnb-item", { active: A.expanded }],
|
|
3082
3238
|
role: "none"
|
|
3083
|
-
}, [
|
|
3239
|
+
}, [A.subItems ? t("button", {
|
|
3084
3240
|
type: "button",
|
|
3085
3241
|
class: [
|
|
3086
3242
|
"lnb-btn",
|
|
3087
3243
|
"lnb-toggle",
|
|
3088
|
-
{ active:
|
|
3244
|
+
{ active: A.expanded }
|
|
3089
3245
|
],
|
|
3090
3246
|
role: "menuitem",
|
|
3091
|
-
"aria-controls": `${l}-lnbmenu-${
|
|
3092
|
-
"aria-expanded":
|
|
3093
|
-
onClick: () =>
|
|
3094
|
-
},
|
|
3095
|
-
href:
|
|
3247
|
+
"aria-controls": `${l}-lnbmenu-${D}`,
|
|
3248
|
+
"aria-expanded": A.expanded ? "true" : "false",
|
|
3249
|
+
onClick: () => S(D)
|
|
3250
|
+
}, A.text) : t("a", {
|
|
3251
|
+
href: A.href || "#",
|
|
3096
3252
|
class: ["lnb-btn", "lnb-link"],
|
|
3097
3253
|
role: "menuitem",
|
|
3098
|
-
onClick: (
|
|
3099
|
-
},
|
|
3100
|
-
id: `${l}-lnbmenu-${
|
|
3254
|
+
onClick: (L) => o(A, L)
|
|
3255
|
+
}, A.text), A.subItems ? t("div", { class: "lnb-submenu" }, [t("ul", {
|
|
3256
|
+
id: `${l}-lnbmenu-${D}`,
|
|
3101
3257
|
role: "menu"
|
|
3102
|
-
},
|
|
3258
|
+
}, p(A.subItems, D))]) : null]));
|
|
3103
3259
|
return () => t("nav", { class: "krds-side-navigation" }, [t("h2", { class: "lnb-tit" }, e.title), t("ul", {
|
|
3104
3260
|
class: "lnb-list",
|
|
3105
3261
|
role: "menubar"
|
|
3106
|
-
},
|
|
3262
|
+
}, M())]);
|
|
3107
3263
|
}
|
|
3108
|
-
}),
|
|
3264
|
+
}), Na = qa, Wa = /* @__PURE__ */ _({
|
|
3109
3265
|
name: "KrdsStructuredList",
|
|
3110
3266
|
props: { full: {
|
|
3111
3267
|
type: Boolean,
|
|
@@ -3114,16 +3270,16 @@ var Vt = /* @__PURE__ */ A({
|
|
|
3114
3270
|
slots: Object,
|
|
3115
3271
|
setup(e, { slots: a }) {
|
|
3116
3272
|
return () => {
|
|
3117
|
-
const r = a.cardTop?.(), l = a.cardBody?.(), n = a.cardBtm?.(), s = a.cardBtn?.(),
|
|
3273
|
+
const r = a.cardTop?.(), l = a.cardBody?.(), n = a.cardBtm?.(), s = a.cardBtn?.(), u = t("li", { class: "structured-item" }, [t("div", { class: "in" }, [
|
|
3118
3274
|
r && t("div", { class: "card-top" }, r),
|
|
3119
3275
|
l && t("div", { class: "card-body" }, l),
|
|
3120
3276
|
n && t("div", { class: "card-btm" }, n),
|
|
3121
3277
|
s && t("div", { class: "card-btn" }, s)
|
|
3122
3278
|
].filter(Boolean))]);
|
|
3123
|
-
return t("ul", { class: ["krds-structured-list", e.full ? "type-full" : ""] }, [
|
|
3279
|
+
return t("ul", { class: ["krds-structured-list", e.full ? "type-full" : ""] }, [u]);
|
|
3124
3280
|
};
|
|
3125
3281
|
}
|
|
3126
|
-
}),
|
|
3282
|
+
}), Ya = Wa, ja = /* @__PURE__ */ _({
|
|
3127
3283
|
name: "KrdsTextList",
|
|
3128
3284
|
props: {
|
|
3129
3285
|
type: {
|
|
@@ -3138,7 +3294,7 @@ var Vt = /* @__PURE__ */ A({
|
|
|
3138
3294
|
setup(e, { slots: a }) {
|
|
3139
3295
|
return () => t(e.type, { class: ["krds-info-list", e.variant] }, a.default?.());
|
|
3140
3296
|
}
|
|
3141
|
-
}),
|
|
3297
|
+
}), Ga = ja, Ua = /* @__PURE__ */ _({
|
|
3142
3298
|
name: "KrdsCriticalAlerts",
|
|
3143
3299
|
props: {
|
|
3144
3300
|
type: {
|
|
@@ -3177,7 +3333,7 @@ var Vt = /* @__PURE__ */ A({
|
|
|
3177
3333
|
}, [t("span", { class: "m-hide" }, e.linkText), t("i", { class: "svg-icon ico-angle right" })])
|
|
3178
3334
|
])])]);
|
|
3179
3335
|
}
|
|
3180
|
-
}),
|
|
3336
|
+
}), Xa = Ua, Qa = "새 창 열림", Ja = 100, Me = 400, Za = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', el = /* @__PURE__ */ _({
|
|
3181
3337
|
name: "KrdsMainMenu",
|
|
3182
3338
|
props: {
|
|
3183
3339
|
items: {
|
|
@@ -3216,283 +3372,283 @@ var Vt = /* @__PURE__ */ A({
|
|
|
3216
3372
|
},
|
|
3217
3373
|
slots: Object,
|
|
3218
3374
|
setup(e, { emit: a, slots: r }) {
|
|
3219
|
-
const l =
|
|
3375
|
+
const l = de(), n = E(null), s = E(null), u = E(null), g = C(() => e.variant === "pc"), h = (c) => `${l}-gnb-panel-${c}`, y = (c, b) => `${l}-gnb-sub-${c}-${b}`, d = (c) => `${l}-gnb-tab-${c}`, S = (c, b) => `${l}-gnb-depth3-${c}-${b}`, k = (c) => !!c?.subItems?.length, K = (c) => !k(c) && !!c?.items?.length, m = (c) => k(c) || K(c), v = (c) => !c.items?.length, o = (c) => c ? {
|
|
3220
3376
|
target: "_blank",
|
|
3221
3377
|
rel: "noopener noreferrer",
|
|
3222
|
-
title:
|
|
3223
|
-
} : {},
|
|
3224
|
-
|
|
3225
|
-
},
|
|
3226
|
-
|
|
3227
|
-
}, f = (
|
|
3228
|
-
const
|
|
3229
|
-
return
|
|
3230
|
-
},
|
|
3231
|
-
const
|
|
3232
|
-
return
|
|
3233
|
-
}, R = (
|
|
3378
|
+
title: Qa
|
|
3379
|
+
} : {}, i = (c, b) => {
|
|
3380
|
+
c.onClick?.(b), a("item-click", c, b);
|
|
3381
|
+
}, p = E(-1), M = E({}), A = E(0), D = /* @__PURE__ */ new Map(), L = /* @__PURE__ */ new Map(), $ = (c, b, B) => {
|
|
3382
|
+
b ? c.set(B, b) : c.delete(B);
|
|
3383
|
+
}, f = (c) => {
|
|
3384
|
+
const b = c?.subItems?.findIndex((B) => !v(B));
|
|
3385
|
+
return b === void 0 ? -1 : b;
|
|
3386
|
+
}, T = (c) => {
|
|
3387
|
+
const b = M.value[c];
|
|
3388
|
+
return b === void 0 ? f(e.items[c]) : b;
|
|
3389
|
+
}, R = (c) => {
|
|
3234
3390
|
if (typeof document > "u") return;
|
|
3235
|
-
document.body.classList.toggle("is-gnb-web",
|
|
3236
|
-
const
|
|
3237
|
-
document.body.classList.toggle("hasScrollY",
|
|
3391
|
+
document.body.classList.toggle("is-gnb-web", c);
|
|
3392
|
+
const b = document.body.scrollHeight > window.innerHeight;
|
|
3393
|
+
document.body.classList.toggle("hasScrollY", c && b);
|
|
3238
3394
|
}, H = async () => {
|
|
3239
3395
|
await pe();
|
|
3240
|
-
const
|
|
3241
|
-
|
|
3242
|
-
},
|
|
3243
|
-
if (
|
|
3244
|
-
const
|
|
3245
|
-
|
|
3246
|
-
},
|
|
3247
|
-
if (m(e.items[
|
|
3248
|
-
if (
|
|
3249
|
-
|
|
3396
|
+
const c = D.get(p.value)?.querySelector(".gnb-sub-list.active");
|
|
3397
|
+
A.value = c?.scrollHeight ?? 0;
|
|
3398
|
+
}, O = (c = !1) => {
|
|
3399
|
+
if (p.value === -1) return;
|
|
3400
|
+
const b = p.value;
|
|
3401
|
+
p.value = -1, A.value = 0, R(!1), a("menu-toggle", b, !1), c && L.get(b)?.focus();
|
|
3402
|
+
}, N = (c) => {
|
|
3403
|
+
if (m(e.items[c])) {
|
|
3404
|
+
if (p.value === c) {
|
|
3405
|
+
O();
|
|
3250
3406
|
return;
|
|
3251
3407
|
}
|
|
3252
|
-
|
|
3408
|
+
O(), p.value = c, R(!0), a("menu-toggle", c, !0), H();
|
|
3253
3409
|
}
|
|
3254
|
-
}, j = (
|
|
3255
|
-
|
|
3256
|
-
...
|
|
3257
|
-
[
|
|
3410
|
+
}, j = (c, b) => {
|
|
3411
|
+
M.value = {
|
|
3412
|
+
...M.value,
|
|
3413
|
+
[c]: b
|
|
3258
3414
|
}, H();
|
|
3259
|
-
}, U = (
|
|
3260
|
-
const
|
|
3261
|
-
!
|
|
3262
|
-
},
|
|
3263
|
-
const
|
|
3264
|
-
!
|
|
3265
|
-
},
|
|
3266
|
-
if (
|
|
3267
|
-
|
|
3415
|
+
}, U = (c) => {
|
|
3416
|
+
const b = n.value;
|
|
3417
|
+
!b || b.contains(c.target) || O();
|
|
3418
|
+
}, ce = (c) => {
|
|
3419
|
+
const b = n.value, B = c.relatedTarget;
|
|
3420
|
+
!b || !B || b.contains(B) || O();
|
|
3421
|
+
}, he = (c) => {
|
|
3422
|
+
if (c.key === "Escape") {
|
|
3423
|
+
O(!0);
|
|
3268
3424
|
return;
|
|
3269
3425
|
}
|
|
3270
|
-
const
|
|
3271
|
-
if (!
|
|
3272
|
-
const
|
|
3273
|
-
const
|
|
3274
|
-
(
|
|
3426
|
+
const b = c.target;
|
|
3427
|
+
if (!b?.dataset.trigger) return;
|
|
3428
|
+
const B = (x) => {
|
|
3429
|
+
const F = b.closest("li");
|
|
3430
|
+
(x === "next" ? F?.nextElementSibling : F?.previousElementSibling)?.querySelector("[data-trigger]")?.focus();
|
|
3275
3431
|
};
|
|
3276
|
-
switch (
|
|
3432
|
+
switch (c.key) {
|
|
3277
3433
|
case "Home":
|
|
3278
|
-
|
|
3434
|
+
c.preventDefault(), L.get(0)?.focus();
|
|
3279
3435
|
break;
|
|
3280
3436
|
case "End":
|
|
3281
|
-
|
|
3437
|
+
c.preventDefault(), L.get(e.items.length - 1)?.focus();
|
|
3282
3438
|
break;
|
|
3283
3439
|
case "ArrowRight":
|
|
3284
3440
|
case "ArrowDown":
|
|
3285
|
-
|
|
3441
|
+
c.preventDefault(), B("next");
|
|
3286
3442
|
break;
|
|
3287
3443
|
case "ArrowLeft":
|
|
3288
3444
|
case "ArrowUp":
|
|
3289
|
-
|
|
3445
|
+
c.preventDefault(), B("prev");
|
|
3290
3446
|
}
|
|
3291
|
-
},
|
|
3292
|
-
|
|
3447
|
+
}, re = E(0), Q = E({}), fe = E(null), te = E(null), ve = E(e.open), ne = E(e.open), P = /* @__PURE__ */ new Map(), z = /* @__PURE__ */ new Map(), G = /* @__PURE__ */ new Map(), q = /* @__PURE__ */ new Map(), w = (c, b, B) => {
|
|
3448
|
+
b ? c.set(B, b) : c.delete(B);
|
|
3293
3449
|
};
|
|
3294
|
-
let
|
|
3295
|
-
const
|
|
3296
|
-
typeof document > "u" || document.body.classList.toggle("is-gnb-mobile",
|
|
3450
|
+
let V, I, J = null;
|
|
3451
|
+
const ie = (c) => {
|
|
3452
|
+
typeof document > "u" || document.body.classList.toggle("is-gnb-mobile", c);
|
|
3297
3453
|
}, X = () => {
|
|
3298
|
-
|
|
3299
|
-
},
|
|
3300
|
-
I && clearTimeout(I), J = document.activeElement,
|
|
3301
|
-
|
|
3454
|
+
ne.value && s.value?.focus();
|
|
3455
|
+
}, ae = () => {
|
|
3456
|
+
I && clearTimeout(I), J = document.activeElement, ve.value = !0, V = setTimeout(() => {
|
|
3457
|
+
ne.value = !0, ie(!0), n.value?.addEventListener("transitionend", X, { once: !0 }), requestAnimationFrame(() => {
|
|
3302
3458
|
n.value?.getAnimations().length || X();
|
|
3303
3459
|
});
|
|
3304
|
-
},
|
|
3305
|
-
},
|
|
3306
|
-
|
|
3307
|
-
|
|
3308
|
-
},
|
|
3460
|
+
}, Ja);
|
|
3461
|
+
}, ye = () => {
|
|
3462
|
+
V && clearTimeout(V), ne.value = !1, J?.focus(), J = null, I = setTimeout(() => {
|
|
3463
|
+
ve.value = !1, ie(!1);
|
|
3464
|
+
}, Me);
|
|
3309
3465
|
};
|
|
3310
|
-
|
|
3311
|
-
|
|
3466
|
+
se(() => e.open, (c) => {
|
|
3467
|
+
c ? ae() : ye();
|
|
3312
3468
|
});
|
|
3313
|
-
const
|
|
3314
|
-
|
|
3315
|
-
const
|
|
3316
|
-
|
|
3469
|
+
const me = (c, b) => {
|
|
3470
|
+
c.preventDefault(), re.value = b;
|
|
3471
|
+
const B = u.value, x = P.get(b);
|
|
3472
|
+
B && x && B.scrollTo({
|
|
3317
3473
|
left: 0,
|
|
3318
|
-
top:
|
|
3474
|
+
top: x.offsetTop,
|
|
3319
3475
|
behavior: "smooth"
|
|
3320
3476
|
});
|
|
3321
|
-
},
|
|
3322
|
-
const
|
|
3323
|
-
if (!
|
|
3324
|
-
const { scrollTop:
|
|
3325
|
-
let
|
|
3477
|
+
}, we = () => {
|
|
3478
|
+
const c = u.value;
|
|
3479
|
+
if (!c) return;
|
|
3480
|
+
const { scrollTop: b, scrollHeight: B, clientHeight: x } = c;
|
|
3481
|
+
let F = re.value;
|
|
3326
3482
|
P.forEach((W, Y) => {
|
|
3327
|
-
(
|
|
3328
|
-
}),
|
|
3329
|
-
},
|
|
3330
|
-
|
|
3483
|
+
(b >= W.offsetTop || b + x >= B) && (F = Y);
|
|
3484
|
+
}), re.value = F;
|
|
3485
|
+
}, be = (c, b) => {
|
|
3486
|
+
c.preventDefault(), Q.value = {
|
|
3331
3487
|
...Q.value,
|
|
3332
|
-
[
|
|
3488
|
+
[b]: !Q.value[b]
|
|
3333
3489
|
};
|
|
3334
|
-
},
|
|
3335
|
-
|
|
3336
|
-
}, Le = (
|
|
3337
|
-
|
|
3338
|
-
|
|
3339
|
-
},
|
|
3340
|
-
},
|
|
3341
|
-
const
|
|
3342
|
-
if (
|
|
3343
|
-
const
|
|
3344
|
-
|
|
3345
|
-
},
|
|
3346
|
-
if (
|
|
3347
|
-
|
|
3490
|
+
}, He = async (c, b) => {
|
|
3491
|
+
c.preventDefault(), fe.value = b, await pe(), te.value = b, await pe(), q.get(b)?.focus();
|
|
3492
|
+
}, Le = (c) => {
|
|
3493
|
+
te.value = null, z.get(c)?.focus(), setTimeout(() => {
|
|
3494
|
+
te.value || (fe.value = null);
|
|
3495
|
+
}, Me);
|
|
3496
|
+
}, Oe = (c, b) => {
|
|
3497
|
+
const B = Array.from(c.querySelectorAll(Za));
|
|
3498
|
+
if (!B.length) return;
|
|
3499
|
+
const x = B[0], F = B[B.length - 1], W = document.activeElement;
|
|
3500
|
+
b.shiftKey && (W === x || W === c) ? (b.preventDefault(), F.focus()) : !b.shiftKey && W === F && (b.preventDefault(), x.focus());
|
|
3501
|
+
}, qe = (c) => {
|
|
3502
|
+
if (c.key === "Escape") {
|
|
3503
|
+
te.value ? Le(te.value) : a("update:open", !1);
|
|
3348
3504
|
return;
|
|
3349
3505
|
}
|
|
3350
|
-
if (
|
|
3351
|
-
const
|
|
3352
|
-
|
|
3506
|
+
if (c.key !== "Tab") return;
|
|
3507
|
+
const b = te.value ? G.get(te.value) : s.value;
|
|
3508
|
+
b && Oe(b, c);
|
|
3353
3509
|
};
|
|
3354
|
-
|
|
3355
|
-
if (
|
|
3510
|
+
ee(() => {
|
|
3511
|
+
if (g.value) {
|
|
3356
3512
|
document.addEventListener("click", U);
|
|
3357
3513
|
return;
|
|
3358
3514
|
}
|
|
3359
|
-
e.open && (
|
|
3360
|
-
const
|
|
3361
|
-
e.items.forEach((
|
|
3362
|
-
|
|
3363
|
-
|
|
3515
|
+
e.open && (ve.value = !0, ne.value = !0, ie(!0));
|
|
3516
|
+
const c = {};
|
|
3517
|
+
e.items.forEach((b, B) => {
|
|
3518
|
+
b.subItems?.forEach((x, F) => {
|
|
3519
|
+
x.expanded && (c[`${B}-${F}`] = !0);
|
|
3364
3520
|
});
|
|
3365
|
-
}), Q.value =
|
|
3366
|
-
}),
|
|
3367
|
-
typeof document < "u" && (document.removeEventListener("click", U), document.body.classList.remove("is-gnb-web", "hasScrollY", "is-gnb-mobile")),
|
|
3521
|
+
}), Q.value = c;
|
|
3522
|
+
}), oe(() => {
|
|
3523
|
+
typeof document < "u" && (document.removeEventListener("click", U), document.body.classList.remove("is-gnb-web", "hasScrollY", "is-gnb-mobile")), V && clearTimeout(V), I && clearTimeout(I);
|
|
3368
3524
|
});
|
|
3369
|
-
const Ne = (
|
|
3370
|
-
const
|
|
3371
|
-
const W =
|
|
3372
|
-
if (
|
|
3373
|
-
href:
|
|
3525
|
+
const Ne = (c) => {
|
|
3526
|
+
const b = c.some((x) => !!x.description), B = c.map((x, F) => {
|
|
3527
|
+
const W = o(x.external), Y = x.external ? t("i", { class: "svg-icon ico-go" }) : null;
|
|
3528
|
+
if (b) return t("li", { key: `link-${F}` }, [t("h3", { class: "tit" }, [t("a", {
|
|
3529
|
+
href: x.href || "#",
|
|
3374
3530
|
...W,
|
|
3375
|
-
class: { active:
|
|
3376
|
-
onClick: (
|
|
3377
|
-
}, [
|
|
3378
|
-
const Z =
|
|
3379
|
-
return t("li", { key: `link-${
|
|
3380
|
-
...
|
|
3381
|
-
href:
|
|
3531
|
+
class: { active: x.selected },
|
|
3532
|
+
onClick: (le) => i(x, le)
|
|
3533
|
+
}, [x.text, Y])]), x.description ? t("p", { class: "txt" }, x.description) : null]);
|
|
3534
|
+
const Z = x.href ? "a" : "button";
|
|
3535
|
+
return t("li", { key: `link-${F}` }, [t(Z, {
|
|
3536
|
+
...x.href ? {
|
|
3537
|
+
href: x.href,
|
|
3382
3538
|
...W
|
|
3383
3539
|
} : { type: "button" },
|
|
3384
|
-
class: { active:
|
|
3385
|
-
onClick: (
|
|
3386
|
-
}, [
|
|
3540
|
+
class: { active: x.selected },
|
|
3541
|
+
onClick: (le) => i(x, le)
|
|
3542
|
+
}, [x.text, Y])]);
|
|
3387
3543
|
});
|
|
3388
|
-
return t("ul", { class:
|
|
3389
|
-
},
|
|
3390
|
-
const
|
|
3391
|
-
href:
|
|
3544
|
+
return t("ul", { class: b ? "type-description" : void 0 }, B);
|
|
3545
|
+
}, Be = (c) => {
|
|
3546
|
+
const b = c.titleLink ? [c.title, t("a", {
|
|
3547
|
+
href: c.titleLink.href,
|
|
3392
3548
|
class: "krds-btn link basic small"
|
|
3393
|
-
}, [t("span", { class: "underline" },
|
|
3549
|
+
}, [t("span", { class: "underline" }, c.titleLink.text || "바로가기"), t("i", { class: "svg-icon ico-angle right" })])] : [t("span", c.title)];
|
|
3394
3550
|
return t("div", {
|
|
3395
|
-
id:
|
|
3551
|
+
id: c.id,
|
|
3396
3552
|
class: ["gnb-sub-list", {
|
|
3397
|
-
active:
|
|
3398
|
-
between:
|
|
3399
|
-
"single-list":
|
|
3553
|
+
active: c.active,
|
|
3554
|
+
between: c.layout === "between",
|
|
3555
|
+
"single-list": c.single
|
|
3400
3556
|
}]
|
|
3401
|
-
}, [t("div", { class: "gnb-sub-content" }, [t("h2", { class: "sub-title" },
|
|
3402
|
-
},
|
|
3403
|
-
if (
|
|
3404
|
-
const Y =
|
|
3405
|
-
return t("li", { key: `sub-${
|
|
3406
|
-
|
|
3407
|
-
href:
|
|
3408
|
-
...
|
|
3557
|
+
}, [t("div", { class: "gnb-sub-content" }, [t("h2", { class: "sub-title" }, b), Ne(c.linkItems)]), c.banner]);
|
|
3558
|
+
}, We = (c, b) => (c.subItems ?? []).map((B, x) => {
|
|
3559
|
+
if (v(B)) {
|
|
3560
|
+
const Y = B.href ? "a" : "button";
|
|
3561
|
+
return t("li", { key: `sub-${x}` }, [t(Y, {
|
|
3562
|
+
...B.href ? {
|
|
3563
|
+
href: B.href,
|
|
3564
|
+
...o(B.external)
|
|
3409
3565
|
} : { type: "button" },
|
|
3410
3566
|
class: [
|
|
3411
3567
|
"gnb-sub-trigger",
|
|
3412
3568
|
"is-link",
|
|
3413
3569
|
{
|
|
3414
|
-
"external-link":
|
|
3415
|
-
selected:
|
|
3570
|
+
"external-link": B.external,
|
|
3571
|
+
selected: B.selected
|
|
3416
3572
|
}
|
|
3417
3573
|
],
|
|
3418
3574
|
"data-trigger": "gnb",
|
|
3419
|
-
onClick: (Z) =>
|
|
3420
|
-
},
|
|
3575
|
+
onClick: (Z) => i(B, Z)
|
|
3576
|
+
}, B.text)]);
|
|
3421
3577
|
}
|
|
3422
|
-
const
|
|
3423
|
-
item:
|
|
3424
|
-
subItem:
|
|
3425
|
-
index:
|
|
3426
|
-
subIndex:
|
|
3578
|
+
const F = T(b) === x, W = B.banner && r.banner ? t("div", { class: "gnb-sub-banner" }, r.banner({
|
|
3579
|
+
item: c,
|
|
3580
|
+
subItem: B,
|
|
3581
|
+
index: b,
|
|
3582
|
+
subIndex: x
|
|
3427
3583
|
})) : null;
|
|
3428
|
-
return t("li", { key: `sub-${
|
|
3584
|
+
return t("li", { key: `sub-${x}` }, [t("button", {
|
|
3429
3585
|
type: "button",
|
|
3430
3586
|
class: ["gnb-sub-trigger", {
|
|
3431
|
-
active:
|
|
3432
|
-
selected:
|
|
3587
|
+
active: F,
|
|
3588
|
+
selected: B.selected
|
|
3433
3589
|
}],
|
|
3434
3590
|
"data-trigger": "gnb",
|
|
3435
|
-
"aria-controls":
|
|
3436
|
-
"aria-expanded":
|
|
3591
|
+
"aria-controls": y(b, x),
|
|
3592
|
+
"aria-expanded": F ? "true" : "false",
|
|
3437
3593
|
"aria-haspopup": "true",
|
|
3438
3594
|
onClick: (Y) => {
|
|
3439
|
-
j(
|
|
3595
|
+
j(b, x), i(B, Y);
|
|
3440
3596
|
}
|
|
3441
|
-
},
|
|
3442
|
-
id:
|
|
3443
|
-
title:
|
|
3444
|
-
titleLink:
|
|
3445
|
-
linkItems:
|
|
3446
|
-
layout:
|
|
3447
|
-
active:
|
|
3597
|
+
}, B.text), Be({
|
|
3598
|
+
id: y(b, x),
|
|
3599
|
+
title: B.title || B.text,
|
|
3600
|
+
titleLink: B.titleLink,
|
|
3601
|
+
linkItems: B.items ?? [],
|
|
3602
|
+
layout: B.layout,
|
|
3603
|
+
active: F,
|
|
3448
3604
|
banner: W
|
|
3449
3605
|
})]);
|
|
3450
|
-
}),
|
|
3451
|
-
const
|
|
3452
|
-
title:
|
|
3453
|
-
linkItems:
|
|
3454
|
-
layout:
|
|
3606
|
+
}), Ye = (c, b) => {
|
|
3607
|
+
const B = p.value === b, x = k(c), F = x ? [t("ul", {}, We(c, b))] : [Be({
|
|
3608
|
+
title: c.title || c.text,
|
|
3609
|
+
linkItems: c.items ?? [],
|
|
3610
|
+
layout: c.layout,
|
|
3455
3611
|
single: !0,
|
|
3456
|
-
banner:
|
|
3457
|
-
item:
|
|
3458
|
-
index:
|
|
3612
|
+
banner: c.banner && r.banner ? t("div", { class: "gnb-sub-banner" }, r.banner({
|
|
3613
|
+
item: c,
|
|
3614
|
+
index: b,
|
|
3459
3615
|
subIndex: -1
|
|
3460
3616
|
})) : null
|
|
3461
3617
|
})];
|
|
3462
3618
|
return t("div", {
|
|
3463
|
-
id:
|
|
3464
|
-
class: ["gnb-toggle-wrap", { "is-open":
|
|
3619
|
+
id: h(b),
|
|
3620
|
+
class: ["gnb-toggle-wrap", { "is-open": B }]
|
|
3465
3621
|
}, [t("div", {
|
|
3466
|
-
ref: (W) =>
|
|
3622
|
+
ref: (W) => $(D, W, b),
|
|
3467
3623
|
class: "gnb-main-list",
|
|
3468
|
-
...
|
|
3469
|
-
style:
|
|
3470
|
-
},
|
|
3471
|
-
},
|
|
3472
|
-
const
|
|
3473
|
-
const
|
|
3474
|
-
ref: (
|
|
3624
|
+
...x ? { "data-has-submenu": "true" } : {},
|
|
3625
|
+
style: B && A.value ? { minHeight: `${A.value}px` } : void 0
|
|
3626
|
+
}, F)]);
|
|
3627
|
+
}, je = () => {
|
|
3628
|
+
const c = e.items.map((B, x) => {
|
|
3629
|
+
const F = m(B), W = p.value === x, Y = !F && B.href ? "a" : "button", Z = t(Y, {
|
|
3630
|
+
ref: (le) => $(L, le, x),
|
|
3475
3631
|
...Y === "a" ? {
|
|
3476
|
-
href:
|
|
3477
|
-
...
|
|
3632
|
+
href: B.href,
|
|
3633
|
+
...o(B.external)
|
|
3478
3634
|
} : { type: "button" },
|
|
3479
3635
|
class: ["gnb-main-trigger", {
|
|
3480
3636
|
active: W,
|
|
3481
|
-
"is-link": !
|
|
3482
|
-
selected:
|
|
3637
|
+
"is-link": !F,
|
|
3638
|
+
selected: B.selected
|
|
3483
3639
|
}],
|
|
3484
3640
|
"data-trigger": "gnb",
|
|
3485
|
-
...
|
|
3486
|
-
"aria-controls":
|
|
3641
|
+
...F ? {
|
|
3642
|
+
"aria-controls": h(x),
|
|
3487
3643
|
"aria-expanded": W ? "true" : "false",
|
|
3488
3644
|
"aria-haspopup": "true"
|
|
3489
3645
|
} : {},
|
|
3490
|
-
onClick: (
|
|
3491
|
-
|
|
3646
|
+
onClick: (le) => {
|
|
3647
|
+
F && N(x), i(B, le);
|
|
3492
3648
|
}
|
|
3493
|
-
},
|
|
3494
|
-
return t("li", { key: `main-${
|
|
3495
|
-
}),
|
|
3649
|
+
}, B.text);
|
|
3650
|
+
return t("li", { key: `main-${x}` }, [Z, F ? Ye(B, x) : null]);
|
|
3651
|
+
}), b = e.backdrop && p.value !== -1 ? t(Ce, { to: "body" }, [t("div", {
|
|
3496
3652
|
class: "gnb-backdrop active",
|
|
3497
3653
|
"aria-hidden": "true"
|
|
3498
3654
|
})]) : null;
|
|
@@ -3500,111 +3656,111 @@ var Vt = /* @__PURE__ */ A({
|
|
|
3500
3656
|
ref: n,
|
|
3501
3657
|
class: "krds-main-menu",
|
|
3502
3658
|
"aria-label": e.ariaLabel,
|
|
3503
|
-
onKeydown:
|
|
3504
|
-
onFocusout:
|
|
3659
|
+
onKeydown: he,
|
|
3660
|
+
onFocusout: ce
|
|
3505
3661
|
}, [t("div", { class: "inner" }, [t("ul", {
|
|
3506
3662
|
class: "gnb-menu",
|
|
3507
3663
|
"aria-label": e.ariaLabel
|
|
3508
|
-
},
|
|
3509
|
-
},
|
|
3510
|
-
const
|
|
3664
|
+
}, c)]), b]);
|
|
3665
|
+
}, Ge = (c, b) => {
|
|
3666
|
+
const B = () => Le(b);
|
|
3511
3667
|
return t("div", {
|
|
3512
|
-
ref: (
|
|
3513
|
-
class: ["depth4-wrap", { "is-open":
|
|
3514
|
-
style:
|
|
3668
|
+
ref: (x) => w(G, x, b),
|
|
3669
|
+
class: ["depth4-wrap", { "is-open": te.value === b }],
|
|
3670
|
+
style: fe.value === b ? { display: "block" } : void 0
|
|
3515
3671
|
}, [t("div", { class: "depth4-head" }, [t("button", {
|
|
3516
|
-
ref: (
|
|
3672
|
+
ref: (x) => w(q, x, b),
|
|
3517
3673
|
type: "button",
|
|
3518
3674
|
class: "krds-btn icon trigger-prev",
|
|
3519
|
-
onClick:
|
|
3675
|
+
onClick: B
|
|
3520
3676
|
}, [t("span", { class: "sr-only" }, "이전화면"), t("i", { class: "svg-icon ico-angle left" })]), t("button", {
|
|
3521
3677
|
type: "button",
|
|
3522
3678
|
class: "krds-btn icon trigger-close",
|
|
3523
|
-
onClick:
|
|
3524
|
-
}, [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" },
|
|
3525
|
-
href:
|
|
3526
|
-
...
|
|
3527
|
-
class: { selected:
|
|
3528
|
-
onClick: (W) =>
|
|
3529
|
-
},
|
|
3530
|
-
},
|
|
3531
|
-
const
|
|
3532
|
-
const Y = `${
|
|
3679
|
+
onClick: B
|
|
3680
|
+
}, [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" }, c.panelTitle || c.text), t("ul", { class: "depth4-ul" }, (c.items ?? []).map((x, F) => t("li", { key: `depth4-${F}` }, [t("a", {
|
|
3681
|
+
href: x.href || "#",
|
|
3682
|
+
...o(x.external),
|
|
3683
|
+
class: { selected: x.selected },
|
|
3684
|
+
onClick: (W) => i(x, W)
|
|
3685
|
+
}, x.text)])))])]);
|
|
3686
|
+
}, Ue = (c, b, B) => {
|
|
3687
|
+
const x = (c.items ?? []).map((F, W) => {
|
|
3688
|
+
const Y = `${b}-${B}-${W}`, Z = !!F.items?.length;
|
|
3533
3689
|
return t("li", { key: `depth3-${W}` }, [t("a", {
|
|
3534
|
-
ref: (
|
|
3535
|
-
href:
|
|
3536
|
-
...Z ? {} :
|
|
3690
|
+
ref: (le) => w(z, le, Y),
|
|
3691
|
+
href: F.href || "#",
|
|
3692
|
+
...Z ? {} : o(F.external),
|
|
3537
3693
|
class: ["depth3-trigger", {
|
|
3538
3694
|
"has-depth4": Z,
|
|
3539
|
-
selected:
|
|
3695
|
+
selected: F.selected
|
|
3540
3696
|
}],
|
|
3541
3697
|
...Z ? {
|
|
3542
3698
|
"aria-haspopup": "true",
|
|
3543
|
-
"aria-expanded":
|
|
3699
|
+
"aria-expanded": te.value === Y ? "true" : "false"
|
|
3544
3700
|
} : {},
|
|
3545
|
-
onClick: (
|
|
3546
|
-
Z &&
|
|
3701
|
+
onClick: (le) => {
|
|
3702
|
+
Z && He(le, Y), i(F, le);
|
|
3547
3703
|
}
|
|
3548
|
-
},
|
|
3704
|
+
}, F.text), Z ? Ge(F, Y) : null]);
|
|
3549
3705
|
});
|
|
3550
3706
|
return t("div", {
|
|
3551
|
-
id:
|
|
3552
|
-
class: ["depth3-wrap", { "is-open": Q.value[`${
|
|
3553
|
-
}, [t("ul", {},
|
|
3554
|
-
},
|
|
3555
|
-
const
|
|
3556
|
-
const W = `${
|
|
3557
|
-
return t("li", { key: `sub-${
|
|
3558
|
-
href:
|
|
3559
|
-
...Y ? {} :
|
|
3707
|
+
id: S(b, B),
|
|
3708
|
+
class: ["depth3-wrap", { "is-open": Q.value[`${b}-${B}`] }]
|
|
3709
|
+
}, [t("ul", {}, x)]);
|
|
3710
|
+
}, Xe = (c, b) => {
|
|
3711
|
+
const B = (c.subItems ?? []).map((x, F) => {
|
|
3712
|
+
const W = `${b}-${F}`, Y = !!x.items?.length;
|
|
3713
|
+
return t("li", { key: `sub-${F}` }, [t("a", {
|
|
3714
|
+
href: x.href || "#",
|
|
3715
|
+
...Y ? {} : o(x.external),
|
|
3560
3716
|
class: ["gnb-sub-trigger", {
|
|
3561
3717
|
"has-depth3": Y,
|
|
3562
3718
|
active: Y && Q.value[W],
|
|
3563
|
-
selected:
|
|
3719
|
+
selected: x.selected
|
|
3564
3720
|
}],
|
|
3565
3721
|
...Y ? {
|
|
3566
|
-
"aria-controls":
|
|
3722
|
+
"aria-controls": S(b, F),
|
|
3567
3723
|
"aria-expanded": Q.value[W] ? "true" : "false"
|
|
3568
3724
|
} : {},
|
|
3569
3725
|
onClick: (Z) => {
|
|
3570
|
-
Y &&
|
|
3726
|
+
Y && be(Z, W), i(x, Z);
|
|
3571
3727
|
}
|
|
3572
|
-
},
|
|
3728
|
+
}, x.text), Y ? Ue(x, b, F) : null]);
|
|
3573
3729
|
});
|
|
3574
3730
|
return t("div", {
|
|
3575
|
-
ref: (
|
|
3576
|
-
id:
|
|
3731
|
+
ref: (x) => $(P, x, b),
|
|
3732
|
+
id: h(b),
|
|
3577
3733
|
class: "gnb-sub-list",
|
|
3578
3734
|
role: "tabpanel",
|
|
3579
|
-
"aria-labelledby":
|
|
3580
|
-
}, [t("h2", { class: "sub-title" },
|
|
3581
|
-
},
|
|
3582
|
-
const
|
|
3583
|
-
key: `tab-${
|
|
3735
|
+
"aria-labelledby": d(b)
|
|
3736
|
+
}, [t("h2", { class: "sub-title" }, c.title || c.text), t("ul", {}, B)]);
|
|
3737
|
+
}, Qe = () => {
|
|
3738
|
+
const c = e.items.map((B, x) => t("li", {
|
|
3739
|
+
key: `tab-${x}`,
|
|
3584
3740
|
role: "none"
|
|
3585
3741
|
}, [t("a", {
|
|
3586
|
-
id:
|
|
3587
|
-
href: `#${
|
|
3588
|
-
class: ["gnb-main-trigger", { active:
|
|
3742
|
+
id: d(x),
|
|
3743
|
+
href: `#${h(x)}`,
|
|
3744
|
+
class: ["gnb-main-trigger", { active: re.value === x }],
|
|
3589
3745
|
role: "tab",
|
|
3590
|
-
"aria-controls":
|
|
3591
|
-
"aria-selected":
|
|
3592
|
-
onClick: (
|
|
3593
|
-
|
|
3746
|
+
"aria-controls": h(x),
|
|
3747
|
+
"aria-selected": re.value === x ? "true" : "false",
|
|
3748
|
+
onClick: (F) => {
|
|
3749
|
+
me(F, x), i(B, F);
|
|
3594
3750
|
}
|
|
3595
|
-
},
|
|
3751
|
+
}, B.text)])), b = [t("div", { class: "gnb-menu" }, [t("div", { class: "menu-wrap" }, [t("ul", {
|
|
3596
3752
|
role: "tablist",
|
|
3597
3753
|
"aria-label": e.ariaLabel
|
|
3598
|
-
},
|
|
3754
|
+
}, c)]), t("div", { class: "submenu-wrap" }, e.items.map(Xe))]), r.bottom ? t("div", { class: "gnb-bottom" }, r.bottom()) : null];
|
|
3599
3755
|
return t("div", {
|
|
3600
3756
|
ref: n,
|
|
3601
3757
|
id: e.mobileId,
|
|
3602
3758
|
class: ["krds-main-menu-mobile", {
|
|
3603
|
-
"is-open":
|
|
3604
|
-
"is-backdrop":
|
|
3759
|
+
"is-open": ne.value,
|
|
3760
|
+
"is-backdrop": ne.value
|
|
3605
3761
|
}],
|
|
3606
|
-
style:
|
|
3607
|
-
onKeydown:
|
|
3762
|
+
style: ve.value ? void 0 : { display: "none" },
|
|
3763
|
+
onKeydown: qe
|
|
3608
3764
|
}, [t("div", {
|
|
3609
3765
|
ref: s,
|
|
3610
3766
|
class: "gnb-wrap",
|
|
@@ -3612,10 +3768,10 @@ var Vt = /* @__PURE__ */ A({
|
|
|
3612
3768
|
}, [
|
|
3613
3769
|
t("div", { class: "gnb-header" }, r.header ? r.header() : []),
|
|
3614
3770
|
t("div", {
|
|
3615
|
-
ref:
|
|
3771
|
+
ref: u,
|
|
3616
3772
|
class: "gnb-body",
|
|
3617
|
-
onScroll:
|
|
3618
|
-
},
|
|
3773
|
+
onScroll: we
|
|
3774
|
+
}, b),
|
|
3619
3775
|
t("button", {
|
|
3620
3776
|
type: "button",
|
|
3621
3777
|
id: "close-nav",
|
|
@@ -3624,9 +3780,9 @@ var Vt = /* @__PURE__ */ A({
|
|
|
3624
3780
|
}, [t("span", { class: "sr-only" }, e.closeLabel), t("i", { class: "svg-icon ico-popup-close" })])
|
|
3625
3781
|
])]);
|
|
3626
3782
|
};
|
|
3627
|
-
return () =>
|
|
3783
|
+
return () => g.value ? je() : Qe();
|
|
3628
3784
|
}
|
|
3629
|
-
}),
|
|
3785
|
+
}), tl = el, al = 400, ll = 2500, nl = 0, sl = 16, Re = (e) => e ? e.flatMap((a) => a.type === Ze ? Array.isArray(a.children) ? Re(a.children) : [] : a.type === Je ? [] : a.type === et && typeof a.children == "string" && a.children.trim() === "" ? [] : [a]) : [], rl = /* @__PURE__ */ _({
|
|
3630
3786
|
name: "KrdsCarousel",
|
|
3631
3787
|
props: {
|
|
3632
3788
|
variant: {
|
|
@@ -3647,7 +3803,7 @@ var Vt = /* @__PURE__ */ A({
|
|
|
3647
3803
|
},
|
|
3648
3804
|
autoplayDelay: {
|
|
3649
3805
|
type: Number,
|
|
3650
|
-
default:
|
|
3806
|
+
default: ll
|
|
3651
3807
|
},
|
|
3652
3808
|
pauseOnHover: {
|
|
3653
3809
|
type: Boolean,
|
|
@@ -3655,7 +3811,7 @@ var Vt = /* @__PURE__ */ A({
|
|
|
3655
3811
|
},
|
|
3656
3812
|
speed: {
|
|
3657
3813
|
type: Number,
|
|
3658
|
-
default:
|
|
3814
|
+
default: al
|
|
3659
3815
|
},
|
|
3660
3816
|
spaceBetween: {
|
|
3661
3817
|
type: Number,
|
|
@@ -3710,58 +3866,58 @@ var Vt = /* @__PURE__ */ A({
|
|
|
3710
3866
|
"more-click": (e) => !0
|
|
3711
3867
|
},
|
|
3712
3868
|
setup(e, { emit: a, slots: r }) {
|
|
3713
|
-
const l = xe()?.uid, n =
|
|
3869
|
+
const l = xe()?.uid, n = C(() => `${e.id ?? `krds-carousel-${l}`}-wrapper`);
|
|
3714
3870
|
let s = 0;
|
|
3715
|
-
const
|
|
3716
|
-
let
|
|
3871
|
+
const u = E(e.activeIndex ?? 0), g = C(() => e.spaceBetween ?? (e.variant === "banner" ? sl : nl)), h = C(() => e.pagination ?? (e.variant === "banner" ? "fraction" : "bullets")), y = E(!1), d = E(!1), S = E(!1), k = C(() => d.value || S.value);
|
|
3872
|
+
let K;
|
|
3717
3873
|
const m = () => {
|
|
3718
|
-
|
|
3719
|
-
},
|
|
3874
|
+
K !== void 0 && (clearInterval(K), K = void 0);
|
|
3875
|
+
}, v = (P) => {
|
|
3720
3876
|
if (s <= 0) return;
|
|
3721
|
-
const
|
|
3722
|
-
|
|
3723
|
-
},
|
|
3724
|
-
|
|
3725
|
-
},
|
|
3726
|
-
|
|
3877
|
+
const z = e.loop ? (P % s + s) % s : Math.min(Math.max(P, 0), s - 1);
|
|
3878
|
+
z !== u.value && (u.value = z, a("update:activeIndex", z), a("change", z));
|
|
3879
|
+
}, o = () => v(u.value - 1), i = () => v(u.value + 1), p = () => {
|
|
3880
|
+
y.value || (y.value = !0, a("play"));
|
|
3881
|
+
}, M = () => {
|
|
3882
|
+
y.value && (y.value = !1, a("stop"));
|
|
3727
3883
|
};
|
|
3728
|
-
|
|
3729
|
-
|
|
3730
|
-
|
|
3884
|
+
se([
|
|
3885
|
+
y,
|
|
3886
|
+
k,
|
|
3731
3887
|
() => e.autoplayDelay
|
|
3732
3888
|
], () => {
|
|
3733
|
-
m(), !(!
|
|
3734
|
-
if (!e.loop && s > 0 &&
|
|
3735
|
-
|
|
3889
|
+
m(), !(!y.value || k.value) && (K = setInterval(() => {
|
|
3890
|
+
if (!e.loop && s > 0 && u.value >= s - 1) {
|
|
3891
|
+
M();
|
|
3736
3892
|
return;
|
|
3737
3893
|
}
|
|
3738
|
-
|
|
3894
|
+
i();
|
|
3739
3895
|
}, e.autoplayDelay));
|
|
3740
|
-
}),
|
|
3741
|
-
P ?
|
|
3742
|
-
}),
|
|
3743
|
-
typeof P != "number" || P ===
|
|
3896
|
+
}), se(() => e.autoplay, (P) => {
|
|
3897
|
+
P ? p() : M();
|
|
3898
|
+
}), se(() => e.activeIndex, (P) => {
|
|
3899
|
+
typeof P != "number" || P === u.value || (u.value = s > 0 ? Math.min(Math.max(P, 0), s - 1) : P);
|
|
3744
3900
|
});
|
|
3745
|
-
const
|
|
3746
|
-
let
|
|
3747
|
-
const
|
|
3748
|
-
|
|
3749
|
-
}, f =
|
|
3750
|
-
|
|
3751
|
-
typeof window < "u" && window.matchMedia && (
|
|
3752
|
-
}),
|
|
3753
|
-
m(),
|
|
3901
|
+
const D = E(!1);
|
|
3902
|
+
let L;
|
|
3903
|
+
const $ = (P) => {
|
|
3904
|
+
D.value = P.matches;
|
|
3905
|
+
}, f = C(() => D.value ? 0 : e.speed);
|
|
3906
|
+
ee(() => {
|
|
3907
|
+
typeof window < "u" && window.matchMedia && (L = window.matchMedia("(prefers-reduced-motion: reduce)"), D.value = L.matches, L.addEventListener("change", $)), e.autoplay && p();
|
|
3908
|
+
}), oe(() => {
|
|
3909
|
+
m(), L?.removeEventListener("change", $);
|
|
3754
3910
|
});
|
|
3755
|
-
const
|
|
3756
|
-
e.pauseOnHover && (
|
|
3911
|
+
const T = () => {
|
|
3912
|
+
e.pauseOnHover && (d.value = !0);
|
|
3757
3913
|
}, R = () => {
|
|
3758
|
-
|
|
3914
|
+
d.value = !1;
|
|
3759
3915
|
}, H = () => {
|
|
3760
|
-
|
|
3761
|
-
}, N = (P) => {
|
|
3762
|
-
const F = P.currentTarget;
|
|
3763
|
-
F && F.contains(P.relatedTarget) || (_.value = !1);
|
|
3916
|
+
S.value = !0;
|
|
3764
3917
|
}, O = (P) => {
|
|
3918
|
+
const z = P.currentTarget;
|
|
3919
|
+
z && z.contains(P.relatedTarget) || (S.value = !1);
|
|
3920
|
+
}, N = (P) => {
|
|
3765
3921
|
a("more-click", P);
|
|
3766
3922
|
}, j = {
|
|
3767
3923
|
position: "relative",
|
|
@@ -3770,83 +3926,83 @@ var Vt = /* @__PURE__ */ A({
|
|
|
3770
3926
|
}, U = {
|
|
3771
3927
|
flex: "0 0 100%",
|
|
3772
3928
|
width: "100%"
|
|
3773
|
-
},
|
|
3929
|
+
}, ce = (P) => ({
|
|
3774
3930
|
display: "flex",
|
|
3775
3931
|
width: "100%",
|
|
3776
|
-
gap:
|
|
3777
|
-
transform: `translate3d(calc(${-P} * (100% + ${
|
|
3932
|
+
gap: g.value > 0 ? `${g.value}px` : void 0,
|
|
3933
|
+
transform: `translate3d(calc(${-P} * (100% + ${g.value}px)), 0, 0)`,
|
|
3778
3934
|
transitionProperty: "transform",
|
|
3779
3935
|
transitionDuration: `${f.value}ms`,
|
|
3780
3936
|
transitionTimingFunction: "ease-out",
|
|
3781
3937
|
willChange: "transform"
|
|
3782
|
-
}),
|
|
3938
|
+
}), he = (P) => ({
|
|
3783
3939
|
position: "absolute",
|
|
3784
3940
|
top: "50%",
|
|
3785
3941
|
left: P ? "0" : void 0,
|
|
3786
3942
|
right: P ? void 0 : "0",
|
|
3787
3943
|
transform: "translateY(-50%)",
|
|
3788
3944
|
zIndex: 10
|
|
3789
|
-
}),
|
|
3790
|
-
const
|
|
3945
|
+
}), re = (P, z) => P.map((G, q) => {
|
|
3946
|
+
const w = q === z;
|
|
3791
3947
|
return t("li", {
|
|
3792
3948
|
key: G.key ?? `krds-carousel-slide-${q}`,
|
|
3793
|
-
class: ["swiper-slide", { "swiper-slide-active":
|
|
3949
|
+
class: ["swiper-slide", { "swiper-slide-active": w }],
|
|
3794
3950
|
style: U,
|
|
3795
3951
|
"aria-roledescription": "slide",
|
|
3796
3952
|
"aria-label": `${q + 1} / ${P.length}`,
|
|
3797
|
-
"aria-hidden":
|
|
3798
|
-
inert:
|
|
3953
|
+
"aria-hidden": w ? void 0 : "true",
|
|
3954
|
+
inert: w ? void 0 : !0
|
|
3799
3955
|
}, [G]);
|
|
3800
|
-
}), Q = (P,
|
|
3801
|
-
const q = P === "prev",
|
|
3956
|
+
}), Q = (P, z, G) => {
|
|
3957
|
+
const q = P === "prev", w = !e.loop && (q ? z <= 0 : z >= s - 1);
|
|
3802
3958
|
return t("button", {
|
|
3803
3959
|
type: "button",
|
|
3804
|
-
class: [`swiper-button-${P}`, { "swiper-button-disabled":
|
|
3805
|
-
style: G ?
|
|
3806
|
-
disabled:
|
|
3960
|
+
class: [`swiper-button-${P}`, { "swiper-button-disabled": w }],
|
|
3961
|
+
style: G ? he(q) : void 0,
|
|
3962
|
+
disabled: w,
|
|
3807
3963
|
"aria-controls": n.value,
|
|
3808
|
-
onClick: q ?
|
|
3964
|
+
onClick: q ? o : i
|
|
3809
3965
|
}, [t("span", { class: "sr-only" }, q ? e.prevLabel : e.nextLabel)]);
|
|
3810
|
-
},
|
|
3966
|
+
}, fe = () => t("a", {
|
|
3811
3967
|
href: e.moreHref,
|
|
3812
3968
|
class: "swiper-button-more",
|
|
3813
|
-
onClick:
|
|
3814
|
-
}, [t("span", { class: "sr-only" }, e.moreLabel)]),
|
|
3815
|
-
t("span", { class: "swiper-pagination-current" }, String(
|
|
3969
|
+
onClick: N
|
|
3970
|
+
}, [t("span", { class: "sr-only" }, e.moreLabel)]), te = (P, z) => h.value === "fraction" ? t("div", { class: "swiper-pagination swiper-pagination-fraction" }, [
|
|
3971
|
+
t("span", { class: "swiper-pagination-current" }, String(z + 1)),
|
|
3816
3972
|
t("span", { "aria-hidden": "true" }, "/"),
|
|
3817
3973
|
t("span", { class: "swiper-pagination-total" }, String(P))
|
|
3818
3974
|
]) : t("div", { class: "swiper-pagination" }, Array.from({ length: P }, (G, q) => t("button", {
|
|
3819
3975
|
key: `krds-carousel-bullet-${q}`,
|
|
3820
3976
|
type: "button",
|
|
3821
|
-
class: ["swiper-pagination-bullet", { "swiper-pagination-bullet-active": q ===
|
|
3977
|
+
class: ["swiper-pagination-bullet", { "swiper-pagination-bullet-active": q === z }],
|
|
3822
3978
|
"aria-label": `${q + 1}번째 슬라이드로 이동`,
|
|
3823
|
-
"aria-current": q ===
|
|
3979
|
+
"aria-current": q === z ? "true" : void 0,
|
|
3824
3980
|
"aria-controls": n.value,
|
|
3825
|
-
onClick: () =>
|
|
3826
|
-
}))),
|
|
3981
|
+
onClick: () => v(q)
|
|
3982
|
+
}))), ve = () => t("div", { class: "swiper-controller" }, [t("button", {
|
|
3827
3983
|
type: "button",
|
|
3828
3984
|
class: "swiper-button-play",
|
|
3829
|
-
style:
|
|
3985
|
+
style: y.value ? { display: "none" } : void 0,
|
|
3830
3986
|
"aria-controls": n.value,
|
|
3831
|
-
onClick:
|
|
3987
|
+
onClick: p
|
|
3832
3988
|
}, [t("span", { class: "sr-only" }, e.playLabel)]), t("button", {
|
|
3833
3989
|
type: "button",
|
|
3834
3990
|
class: "swiper-button-stop",
|
|
3835
|
-
style:
|
|
3991
|
+
style: y.value ? void 0 : { display: "none" },
|
|
3836
3992
|
"aria-controls": n.value,
|
|
3837
|
-
onClick:
|
|
3838
|
-
}, [t("span", { class: "sr-only" }, e.stopLabel)])]),
|
|
3839
|
-
const G = e.variant === "banner", q =
|
|
3840
|
-
if (q &&
|
|
3993
|
+
onClick: M
|
|
3994
|
+
}, [t("span", { class: "sr-only" }, e.stopLabel)])]), ne = (P, z) => {
|
|
3995
|
+
const G = e.variant === "banner", q = h.value !== "none", w = !!e.moreHref, V = [];
|
|
3996
|
+
if (q && V.push(te(P, z)), e.autoplay && V.push(ve()), G) {
|
|
3841
3997
|
const I = [];
|
|
3842
|
-
e.navigation && I.push(Q("prev",
|
|
3843
|
-
} else
|
|
3844
|
-
return
|
|
3998
|
+
e.navigation && I.push(Q("prev", z, !1), Q("next", z, !1)), w && I.push(fe()), I.length > 0 && V.push(t("div", { class: "swiper-navigation" }, I));
|
|
3999
|
+
} else w && V.push(fe());
|
|
4000
|
+
return V.length === 0 ? null : t("div", { class: ["swiper-indicator", { "text-center": !G }] }, V);
|
|
3845
4001
|
};
|
|
3846
4002
|
return () => {
|
|
3847
|
-
const P =
|
|
3848
|
-
s =
|
|
3849
|
-
const G =
|
|
4003
|
+
const P = Re(r.default?.()), z = P.length;
|
|
4004
|
+
s = z;
|
|
4005
|
+
const G = z > 0 ? Math.min(Math.max(u.value, 0), z - 1) : 0, q = e.variant === "banner";
|
|
3850
4006
|
return t("div", {
|
|
3851
4007
|
id: e.id,
|
|
3852
4008
|
class: ["krds-carousel", q ? "main-d-ban-swiper" : "vb-swiper"],
|
|
@@ -3854,27 +4010,27 @@ var Vt = /* @__PURE__ */ A({
|
|
|
3854
4010
|
role: "region",
|
|
3855
4011
|
"aria-roledescription": "carousel",
|
|
3856
4012
|
"aria-label": e.ariaLabel,
|
|
3857
|
-
onMouseenter:
|
|
4013
|
+
onMouseenter: T,
|
|
3858
4014
|
onMouseleave: R,
|
|
3859
4015
|
onFocusin: H,
|
|
3860
|
-
onFocusout:
|
|
4016
|
+
onFocusout: O
|
|
3861
4017
|
}, [
|
|
3862
4018
|
t("div", {
|
|
3863
4019
|
class: "swiper",
|
|
3864
4020
|
style: j,
|
|
3865
|
-
"aria-live":
|
|
4021
|
+
"aria-live": y.value ? "off" : "polite"
|
|
3866
4022
|
}, [t("ul", {
|
|
3867
4023
|
id: n.value,
|
|
3868
4024
|
class: "swiper-wrapper",
|
|
3869
|
-
style:
|
|
3870
|
-
},
|
|
3871
|
-
!q && e.navigation &&
|
|
3872
|
-
!q && e.navigation &&
|
|
3873
|
-
|
|
4025
|
+
style: ce(G)
|
|
4026
|
+
}, re(P, G))]),
|
|
4027
|
+
!q && e.navigation && z > 0 ? Q("prev", G, !0) : null,
|
|
4028
|
+
!q && e.navigation && z > 0 ? Q("next", G, !0) : null,
|
|
4029
|
+
z > 0 ? ne(z, G) : null
|
|
3874
4030
|
]);
|
|
3875
4031
|
};
|
|
3876
4032
|
}
|
|
3877
|
-
}),
|
|
4033
|
+
}), il = rl, ol = /* @__PURE__ */ _({
|
|
3878
4034
|
name: "KrdsTabs",
|
|
3879
4035
|
props: {
|
|
3880
4036
|
tabs: {
|
|
@@ -3907,13 +4063,13 @@ var Vt = /* @__PURE__ */ A({
|
|
|
3907
4063
|
change: (e) => !0
|
|
3908
4064
|
},
|
|
3909
4065
|
setup(e, { emit: a, slots: r }) {
|
|
3910
|
-
const l =
|
|
3911
|
-
|
|
3912
|
-
},
|
|
3913
|
-
if (
|
|
3914
|
-
|
|
3915
|
-
const
|
|
3916
|
-
(
|
|
4066
|
+
const l = de(), n = (d) => `tab-${l}-${d}`, s = (d) => `panel-${l}-${d}`, u = E(e.tabs.find((d) => !d.disabled)?.id), g = C(() => e.modelValue ?? u.value), h = (d) => {
|
|
4067
|
+
d.disabled || d.id === g.value || (u.value = d.id, a("update:modelValue", d.id), a("change", d.id));
|
|
4068
|
+
}, y = (d) => {
|
|
4069
|
+
if (d.key !== "ArrowRight" && d.key !== "ArrowLeft") return;
|
|
4070
|
+
d.preventDefault();
|
|
4071
|
+
const S = d.currentTarget;
|
|
4072
|
+
(d.key === "ArrowRight" ? S.nextElementSibling : S.previousElementSibling)?.querySelector("button")?.focus();
|
|
3917
4073
|
};
|
|
3918
4074
|
return () => t("div", { class: [
|
|
3919
4075
|
"krds-tab-area",
|
|
@@ -3923,140 +4079,142 @@ var Vt = /* @__PURE__ */ A({
|
|
|
3923
4079
|
"tab",
|
|
3924
4080
|
e.variant,
|
|
3925
4081
|
{ full: e.full }
|
|
3926
|
-
] }, [t("ul", { role: "tablist" }, e.tabs.map((
|
|
3927
|
-
key:
|
|
3928
|
-
id: n(
|
|
4082
|
+
] }, [t("ul", { role: "tablist" }, e.tabs.map((d) => t("li", {
|
|
4083
|
+
key: d.id,
|
|
4084
|
+
id: n(d.id),
|
|
3929
4085
|
role: "tab",
|
|
3930
|
-
"aria-selected":
|
|
3931
|
-
"aria-controls": s(
|
|
3932
|
-
class: { active:
|
|
3933
|
-
onKeydown:
|
|
4086
|
+
"aria-selected": d.id === g.value,
|
|
4087
|
+
"aria-controls": s(d.id),
|
|
4088
|
+
class: { active: d.id === g.value },
|
|
4089
|
+
onKeydown: y
|
|
3934
4090
|
}, [t("button", {
|
|
3935
4091
|
type: "button",
|
|
3936
4092
|
class: "btn-tab",
|
|
3937
|
-
disabled:
|
|
3938
|
-
onClick: () =>
|
|
3939
|
-
}, [
|
|
3940
|
-
key:
|
|
3941
|
-
id: s(
|
|
4093
|
+
disabled: d.disabled || void 0,
|
|
4094
|
+
onClick: () => h(d)
|
|
4095
|
+
}, [d.label, d.id === g.value ? t("i", { class: "sr-only" }, ` ${e.selectedText}`) : null])])))]), t("div", { class: "tab-conts-wrap" }, e.tabs.map((d) => t("section", {
|
|
4096
|
+
key: d.id,
|
|
4097
|
+
id: s(d.id),
|
|
3942
4098
|
role: "tabpanel",
|
|
3943
|
-
"aria-labelledby": n(
|
|
3944
|
-
class: ["tab-conts", { active:
|
|
3945
|
-
}, r[
|
|
4099
|
+
"aria-labelledby": n(d.id),
|
|
4100
|
+
class: ["tab-conts", { active: d.id === g.value }]
|
|
4101
|
+
}, r[d.id]?.())))]);
|
|
3946
4102
|
}
|
|
3947
|
-
}),
|
|
3948
|
-
KrdsAccordionGroup: () =>
|
|
3949
|
-
KrdsAccordionItem: () =>
|
|
3950
|
-
KrdsBadge: () =>
|
|
3951
|
-
KrdsBreadcrumb: () =>
|
|
3952
|
-
KrdsButton: () =>
|
|
3953
|
-
KrdsButtonGroup: () =>
|
|
3954
|
-
KrdsCarousel: () =>
|
|
3955
|
-
KrdsCheckArea: () =>
|
|
3956
|
-
KrdsCheckbox: () =>
|
|
3957
|
-
KrdsCoachMark: () =>
|
|
3958
|
-
KrdsContextualHelp: () =>
|
|
3959
|
-
KrdsCriticalAlerts: () =>
|
|
3960
|
-
KrdsDateInput: () =>
|
|
3961
|
-
KrdsDisclosure: () =>
|
|
3962
|
-
KrdsFileUpload: () =>
|
|
3963
|
-
|
|
3964
|
-
|
|
3965
|
-
|
|
3966
|
-
|
|
3967
|
-
|
|
3968
|
-
|
|
3969
|
-
|
|
3970
|
-
|
|
3971
|
-
|
|
3972
|
-
|
|
3973
|
-
|
|
3974
|
-
|
|
3975
|
-
|
|
3976
|
-
|
|
3977
|
-
|
|
3978
|
-
|
|
3979
|
-
|
|
3980
|
-
|
|
3981
|
-
|
|
3982
|
-
|
|
3983
|
-
|
|
3984
|
-
|
|
3985
|
-
|
|
3986
|
-
|
|
3987
|
-
|
|
3988
|
-
|
|
3989
|
-
|
|
3990
|
-
|
|
3991
|
-
|
|
3992
|
-
|
|
3993
|
-
|
|
3994
|
-
|
|
3995
|
-
|
|
3996
|
-
|
|
3997
|
-
|
|
3998
|
-
|
|
3999
|
-
|
|
4000
|
-
|
|
4103
|
+
}), ul = ol, Ve = /* @__PURE__ */ rt({
|
|
4104
|
+
KrdsAccordionGroup: () => xa,
|
|
4105
|
+
KrdsAccordionItem: () => La,
|
|
4106
|
+
KrdsBadge: () => Mt,
|
|
4107
|
+
KrdsBreadcrumb: () => na,
|
|
4108
|
+
KrdsButton: () => it,
|
|
4109
|
+
KrdsButtonGroup: () => ot,
|
|
4110
|
+
KrdsCarousel: () => il,
|
|
4111
|
+
KrdsCheckArea: () => Wt,
|
|
4112
|
+
KrdsCheckbox: () => jt,
|
|
4113
|
+
KrdsCoachMark: () => ha,
|
|
4114
|
+
KrdsContextualHelp: () => va,
|
|
4115
|
+
KrdsCriticalAlerts: () => Xa,
|
|
4116
|
+
KrdsDateInput: () => xt,
|
|
4117
|
+
KrdsDisclosure: () => Pa,
|
|
4118
|
+
KrdsFileUpload: () => At,
|
|
4119
|
+
KrdsFloatingButton: () => ct,
|
|
4120
|
+
KrdsFooter: () => Va,
|
|
4121
|
+
KrdsFormGroup: () => kt,
|
|
4122
|
+
KrdsFormHint: () => mt,
|
|
4123
|
+
KrdsFormLabel: () => gt,
|
|
4124
|
+
KrdsHeader: () => _a,
|
|
4125
|
+
KrdsIcon: () => ut,
|
|
4126
|
+
KrdsIdentifier: () => Ra,
|
|
4127
|
+
KrdsInPageNavigation: () => ra,
|
|
4128
|
+
KrdsInput: () => pt,
|
|
4129
|
+
KrdsLanguageSwitcher: () => ba,
|
|
4130
|
+
KrdsLayout: () => Oa,
|
|
4131
|
+
KrdsLink: () => ft,
|
|
4132
|
+
KrdsMainMenu: () => tl,
|
|
4133
|
+
KrdsMasthead: () => It,
|
|
4134
|
+
KrdsModal: () => Ka,
|
|
4135
|
+
KrdsPagination: () => ua,
|
|
4136
|
+
KrdsPanel: () => ca,
|
|
4137
|
+
KrdsRadio: () => Ut,
|
|
4138
|
+
KrdsResize: () => Sa,
|
|
4139
|
+
KrdsSelect: () => Et,
|
|
4140
|
+
KrdsSideNavigation: () => Na,
|
|
4141
|
+
KrdsSkipLink: () => aa,
|
|
4142
|
+
KrdsSpinner: () => Xt,
|
|
4143
|
+
KrdsStep: () => ea,
|
|
4144
|
+
KrdsStepIndicator: () => Jt,
|
|
4145
|
+
KrdsStructuredList: () => Ya,
|
|
4146
|
+
KrdsTable: () => Ta,
|
|
4147
|
+
KrdsTabs: () => ul,
|
|
4148
|
+
KrdsTag: () => Ft,
|
|
4149
|
+
KrdsTagGroup: () => zt,
|
|
4150
|
+
KrdsTextList: () => Ga,
|
|
4151
|
+
KrdsTextarea: () => Lt,
|
|
4152
|
+
KrdsToggleSwitch: () => qt,
|
|
4153
|
+
KrdsTooltip: () => ya,
|
|
4154
|
+
KrdsTts: () => Ea
|
|
4155
|
+
}), Ie = "0.0.21", vl = { install(e, a = {}) {
|
|
4156
|
+
e.provide("krds:config", a), (a.components || Object.keys(Ve)).forEach((r) => {
|
|
4157
|
+
const l = Ve[r];
|
|
4001
4158
|
l && e.component(r, l);
|
|
4002
|
-
}),
|
|
4003
|
-
} },
|
|
4159
|
+
}), ia(e), e.config.globalProperties.$krds = { version: Ie };
|
|
4160
|
+
} }, pl = Ie;
|
|
4004
4161
|
export {
|
|
4005
|
-
|
|
4006
|
-
|
|
4007
|
-
|
|
4008
|
-
|
|
4009
|
-
|
|
4010
|
-
|
|
4011
|
-
|
|
4012
|
-
|
|
4013
|
-
|
|
4014
|
-
|
|
4015
|
-
|
|
4016
|
-
|
|
4017
|
-
|
|
4018
|
-
|
|
4019
|
-
|
|
4020
|
-
|
|
4021
|
-
|
|
4022
|
-
|
|
4023
|
-
|
|
4024
|
-
|
|
4025
|
-
|
|
4026
|
-
|
|
4027
|
-
|
|
4028
|
-
|
|
4029
|
-
|
|
4030
|
-
|
|
4031
|
-
|
|
4032
|
-
|
|
4033
|
-
|
|
4034
|
-
|
|
4035
|
-
|
|
4036
|
-
|
|
4037
|
-
|
|
4038
|
-
|
|
4039
|
-
|
|
4040
|
-
|
|
4041
|
-
|
|
4042
|
-
|
|
4043
|
-
|
|
4044
|
-
|
|
4045
|
-
|
|
4046
|
-
|
|
4047
|
-
|
|
4048
|
-
|
|
4049
|
-
|
|
4050
|
-
|
|
4051
|
-
|
|
4052
|
-
|
|
4053
|
-
|
|
4054
|
-
|
|
4162
|
+
xa as KrdsAccordionGroup,
|
|
4163
|
+
La as KrdsAccordionItem,
|
|
4164
|
+
Mt as KrdsBadge,
|
|
4165
|
+
na as KrdsBreadcrumb,
|
|
4166
|
+
it as KrdsButton,
|
|
4167
|
+
ot as KrdsButtonGroup,
|
|
4168
|
+
il as KrdsCarousel,
|
|
4169
|
+
Wt as KrdsCheckArea,
|
|
4170
|
+
jt as KrdsCheckbox,
|
|
4171
|
+
ha as KrdsCoachMark,
|
|
4172
|
+
va as KrdsContextualHelp,
|
|
4173
|
+
Xa as KrdsCriticalAlerts,
|
|
4174
|
+
xt as KrdsDateInput,
|
|
4175
|
+
Pa as KrdsDisclosure,
|
|
4176
|
+
At as KrdsFileUpload,
|
|
4177
|
+
ct as KrdsFloatingButton,
|
|
4178
|
+
Va as KrdsFooter,
|
|
4179
|
+
kt as KrdsFormGroup,
|
|
4180
|
+
mt as KrdsFormHint,
|
|
4181
|
+
gt as KrdsFormLabel,
|
|
4182
|
+
_a as KrdsHeader,
|
|
4183
|
+
ut as KrdsIcon,
|
|
4184
|
+
Ra as KrdsIdentifier,
|
|
4185
|
+
ra as KrdsInPageNavigation,
|
|
4186
|
+
pt as KrdsInput,
|
|
4187
|
+
ba as KrdsLanguageSwitcher,
|
|
4188
|
+
Oa as KrdsLayout,
|
|
4189
|
+
ft as KrdsLink,
|
|
4190
|
+
tl as KrdsMainMenu,
|
|
4191
|
+
It as KrdsMasthead,
|
|
4192
|
+
Ka as KrdsModal,
|
|
4193
|
+
ua as KrdsPagination,
|
|
4194
|
+
ca as KrdsPanel,
|
|
4195
|
+
Ut as KrdsRadio,
|
|
4196
|
+
Sa as KrdsResize,
|
|
4197
|
+
Et as KrdsSelect,
|
|
4198
|
+
Na as KrdsSideNavigation,
|
|
4199
|
+
aa as KrdsSkipLink,
|
|
4200
|
+
Xt as KrdsSpinner,
|
|
4201
|
+
ea as KrdsStep,
|
|
4202
|
+
Jt as KrdsStepIndicator,
|
|
4203
|
+
Ya as KrdsStructuredList,
|
|
4204
|
+
Ta as KrdsTable,
|
|
4205
|
+
ul as KrdsTabs,
|
|
4206
|
+
Ft as KrdsTag,
|
|
4207
|
+
zt as KrdsTagGroup,
|
|
4208
|
+
Ga as KrdsTextList,
|
|
4209
|
+
Lt as KrdsTextarea,
|
|
4210
|
+
qt as KrdsToggleSwitch,
|
|
4211
|
+
ya as KrdsTooltip,
|
|
4212
|
+
Ea as KrdsTts,
|
|
4055
4213
|
$e as classNames,
|
|
4056
|
-
|
|
4057
|
-
|
|
4058
|
-
|
|
4059
|
-
|
|
4214
|
+
vl as default,
|
|
4215
|
+
cl as generateId,
|
|
4216
|
+
fl as generateUid,
|
|
4217
|
+
pl as version
|
|
4060
4218
|
};
|
|
4061
4219
|
|
|
4062
4220
|
//# sourceMappingURL=krds-vue.es.js.map
|