@j-solution/components 1.7.0 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -8
- package/assets/jwms-portal-frontend-BtHTA-UF.css +1 -0
- package/assets/styles/global-utilities.css +34 -0
- package/assets/styles/j-components.css +1 -1
- package/assets/styles/themes.css +21 -21
- package/components/atoms/JButton.vue.cjs +6 -1
- package/components/atoms/JButton.vue.cjs.map +1 -1
- package/components/atoms/JButton.vue.js +10 -85
- package/components/atoms/JButton.vue.js.map +1 -1
- package/components/atoms/JButton.vue2.cjs +1 -1
- package/components/atoms/JButton.vue2.cjs.map +1 -1
- package/components/atoms/JButton.vue2.js +85 -2
- package/components/atoms/JButton.vue2.js.map +1 -1
- package/components/atoms/JGrid.vue.cjs +1 -1
- package/components/atoms/JGrid.vue.js +1 -1
- package/components/atoms/JGrid.vue2.cjs +1 -1
- package/components/atoms/JGrid.vue2.cjs.map +1 -1
- package/components/atoms/JGrid.vue2.js +39 -35
- package/components/atoms/JGrid.vue2.js.map +1 -1
- package/components/atoms/JLabel.vue.cjs +1 -1
- package/components/atoms/JLabel.vue.cjs.map +1 -1
- package/components/atoms/JLabel.vue.js +26 -22
- package/components/atoms/JLabel.vue.js.map +1 -1
- package/components/atoms/JSectionTitle.vue.cjs +7 -0
- package/components/atoms/JSectionTitle.vue.cjs.map +1 -0
- package/components/atoms/JSectionTitle.vue.js +13 -0
- package/components/atoms/JSectionTitle.vue.js.map +1 -0
- package/components/atoms/JSectionTitle.vue2.cjs +2 -0
- package/components/atoms/JSectionTitle.vue2.cjs.map +1 -0
- package/components/atoms/JSectionTitle.vue2.js +67 -0
- package/components/atoms/JSectionTitle.vue2.js.map +1 -0
- package/components/atoms/JSplitter.vue.cjs +6 -1
- package/components/atoms/JSplitter.vue.cjs.map +1 -1
- package/components/atoms/JSplitter.vue.js +10 -59
- package/components/atoms/JSplitter.vue.js.map +1 -1
- package/components/atoms/JSplitter.vue2.cjs +1 -1
- package/components/atoms/JSplitter.vue2.cjs.map +1 -1
- package/components/atoms/JSplitter.vue2.js +59 -2
- package/components/atoms/JSplitter.vue2.js.map +1 -1
- package/components/examples/ExampleCrudPage.vue.cjs +1 -1
- package/components/examples/ExampleCrudPage.vue.cjs.map +1 -1
- package/components/examples/ExampleCrudPage.vue.js +228 -208
- package/components/examples/ExampleCrudPage.vue.js.map +1 -1
- package/components/examples/ExampleTabMappingPage.vue.cjs +1 -1
- package/components/examples/ExampleTabMappingPage.vue.cjs.map +1 -1
- package/components/examples/ExampleTabMappingPage.vue.js +341 -368
- package/components/examples/ExampleTabMappingPage.vue.js.map +1 -1
- package/components/molecules/JAlert.vue.cjs +1 -1
- package/components/molecules/JAlert.vue.cjs.map +1 -1
- package/components/molecules/JAlert.vue.js +18 -16
- package/components/molecules/JAlert.vue.js.map +1 -1
- package/components/molecules/JCard.vue.cjs +1 -1
- package/components/molecules/JCard.vue.cjs.map +1 -1
- package/components/molecules/JCard.vue.js +55 -39
- package/components/molecules/JCard.vue.js.map +1 -1
- package/components/molecules/JEmptyState.vue.cjs +7 -0
- package/components/molecules/JEmptyState.vue.cjs.map +1 -0
- package/components/molecules/JEmptyState.vue.js +13 -0
- package/components/molecules/JEmptyState.vue.js.map +1 -0
- package/components/molecules/JEmptyState.vue2.cjs +2 -0
- package/components/molecules/JEmptyState.vue2.cjs.map +1 -0
- package/components/molecules/JEmptyState.vue2.js +127 -0
- package/components/molecules/JEmptyState.vue2.js.map +1 -0
- package/components/molecules/JFormField.vue.cjs +6 -1
- package/components/molecules/JFormField.vue.cjs.map +1 -1
- package/components/molecules/JFormField.vue.js +10 -264
- package/components/molecules/JFormField.vue.js.map +1 -1
- package/components/molecules/JFormField.vue2.cjs +2 -0
- package/components/molecules/JFormField.vue2.cjs.map +1 -0
- package/components/molecules/JFormField.vue2.js +271 -0
- package/components/molecules/JFormField.vue2.js.map +1 -0
- package/components/molecules/JTabs.vue.cjs +1 -1
- package/components/molecules/JTabs.vue.js +1 -1
- package/components/molecules/JTabs.vue2.cjs +1 -1
- package/components/molecules/JTabs.vue2.cjs.map +1 -1
- package/components/molecules/JTabs.vue2.js +44 -50
- package/components/molecules/JTabs.vue2.js.map +1 -1
- package/components/molecules/JTitlebar.vue.cjs +1 -1
- package/components/molecules/JTitlebar.vue.cjs.map +1 -1
- package/components/molecules/JTitlebar.vue.js +23 -20
- package/components/molecules/JTitlebar.vue.js.map +1 -1
- package/components/organisms/JDynamicForm.vue2.cjs +1 -1
- package/components/organisms/JDynamicForm.vue2.cjs.map +1 -1
- package/components/organisms/JDynamicForm.vue2.js +35 -32
- package/components/organisms/JDynamicForm.vue2.js.map +1 -1
- package/components/organisms/JDynamicTabs.vue.cjs +1 -1
- package/components/organisms/JDynamicTabs.vue.cjs.map +1 -1
- package/components/organisms/JDynamicTabs.vue.js +47 -52
- package/components/organisms/JDynamicTabs.vue.js.map +1 -1
- package/components/organisms/JFilterBar.vue.cjs +6 -1
- package/components/organisms/JFilterBar.vue.cjs.map +1 -1
- package/components/organisms/JFilterBar.vue.js +10 -137
- package/components/organisms/JFilterBar.vue.js.map +1 -1
- package/components/organisms/JFilterBar.vue2.cjs +1 -1
- package/components/organisms/JFilterBar.vue2.cjs.map +1 -1
- package/components/organisms/JFilterBar.vue2.js +141 -2
- package/components/organisms/JFilterBar.vue2.js.map +1 -1
- package/components/organisms/JFormModal.vue.cjs +1 -1
- package/components/organisms/JFormModal.vue.cjs.map +1 -1
- package/components/organisms/JFormModal.vue.js +54 -49
- package/components/organisms/JFormModal.vue.js.map +1 -1
- package/components/organisms/JHeader.vue.cjs +1 -1
- package/components/organisms/JHeader.vue.cjs.map +1 -1
- package/components/organisms/JHeader.vue.js +191 -190
- package/components/organisms/JHeader.vue.js.map +1 -1
- package/components/organisms/JModal.vue.cjs +1 -1
- package/components/organisms/JModal.vue.cjs.map +1 -1
- package/components/organisms/JModal.vue.js +47 -45
- package/components/organisms/JModal.vue.js.map +1 -1
- package/components/organisms/JPageContainer.vue.cjs +1 -1
- package/components/organisms/JPageContainer.vue.cjs.map +1 -1
- package/components/organisms/JPageContainer.vue.js +22 -22
- package/components/organisms/JPageContainer.vue.js.map +1 -1
- package/components/organisms/JSearchPanel.vue2.cjs +1 -1
- package/components/organisms/JSearchPanel.vue2.cjs.map +1 -1
- package/components/organisms/JSearchPanel.vue2.js +34 -32
- package/components/organisms/JSearchPanel.vue2.js.map +1 -1
- package/components/organisms/JShuttle.vue.cjs +7 -0
- package/components/organisms/JShuttle.vue.cjs.map +1 -0
- package/components/organisms/JShuttle.vue.js +13 -0
- package/components/organisms/JShuttle.vue.js.map +1 -0
- package/components/organisms/JShuttle.vue2.cjs +2 -0
- package/components/organisms/JShuttle.vue2.cjs.map +1 -0
- package/components/organisms/JShuttle.vue2.js +216 -0
- package/components/organisms/JShuttle.vue2.js.map +1 -0
- package/components/organisms/JSidebarSimple/JDynamicMenuItem.vue.cjs +1 -1
- package/components/organisms/JSidebarSimple/JDynamicMenuItem.vue.cjs.map +1 -1
- package/components/organisms/JSidebarSimple/JDynamicMenuItem.vue.js +52 -52
- package/components/organisms/JSidebarSimple/JDynamicMenuItem.vue.js.map +1 -1
- package/components/shadcn/Card.vue.cjs +1 -1
- package/components/shadcn/Card.vue.cjs.map +1 -1
- package/components/shadcn/Card.vue.js +1 -1
- package/components/shadcn/Card.vue.js.map +1 -1
- package/components/shadcn/CardContent.vue.cjs +1 -1
- package/components/shadcn/CardContent.vue.cjs.map +1 -1
- package/components/shadcn/CardContent.vue.js +4 -4
- package/components/shadcn/CardContent.vue.js.map +1 -1
- package/components/shadcn/CardHeader.vue.cjs +1 -1
- package/components/shadcn/CardHeader.vue.cjs.map +1 -1
- package/components/shadcn/CardHeader.vue.js +5 -5
- package/components/shadcn/CardHeader.vue.js.map +1 -1
- package/components/shadcn/Input.vue.cjs +1 -1
- package/components/shadcn/Input.vue.cjs.map +1 -1
- package/components/shadcn/Input.vue.js +3 -3
- package/components/shadcn/Input.vue.js.map +1 -1
- package/components/shadcn/SelectTrigger.vue.cjs +1 -1
- package/components/shadcn/SelectTrigger.vue.cjs.map +1 -1
- package/components/shadcn/SelectTrigger.vue.js +1 -1
- package/components/shadcn/SelectTrigger.vue.js.map +1 -1
- package/components/shadcn/TabsContent.vue.cjs +1 -1
- package/components/shadcn/TabsContent.vue.cjs.map +1 -1
- package/components/shadcn/TabsContent.vue.js +1 -1
- package/components/shadcn/TabsContent.vue.js.map +1 -1
- package/components/shadcn/TabsList.vue.cjs +1 -1
- package/components/shadcn/TabsList.vue.cjs.map +1 -1
- package/components/shadcn/TabsList.vue.js +10 -10
- package/components/shadcn/TabsList.vue.js.map +1 -1
- package/components/shadcn/Textarea.vue.cjs +1 -1
- package/components/shadcn/Textarea.vue.cjs.map +1 -1
- package/components/shadcn/Textarea.vue.js +1 -1
- package/components/shadcn/Textarea.vue.js.map +1 -1
- package/components/shadcn/index.cjs +1 -1
- package/components/shadcn/index.cjs.map +1 -1
- package/components/shadcn/index.js +4 -4
- package/components/shadcn/index.js.map +1 -1
- package/components/templates/JLayout.vue.cjs.map +1 -1
- package/components/templates/JLayout.vue.js.map +1 -1
- package/index.cjs +1 -1
- package/index.js +73 -67
- package/package.json +1 -1
- package/types/index.d.ts +920 -777
- package/assets/jwms-portal-frontend-CwxPfHfa.css +0 -1
- package/components/molecules/JFormField.vue3.cjs +0 -2
- package/components/molecules/JFormField.vue3.cjs.map +0 -1
- package/components/molecules/JFormField.vue3.js +0 -6
- package/components/molecules/JFormField.vue3.js.map +0 -1
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { defineComponent as X, reactive as Z, watch as
|
|
1
|
+
import { defineComponent as X, reactive as Z, watch as q, computed as ee, createElementBlock as c, openBlock as i, normalizeClass as p, withModifiers as te, createCommentVNode as D, Fragment as g, renderList as h, normalizeStyle as z, createVNode as _, unref as w, mergeProps as U, createBlock as oe, withCtx as le, createElementVNode as W, toDisplayString as M } from "vue";
|
|
2
2
|
import B from "../molecules/JFormField.vue.js";
|
|
3
|
-
/* empty css */
|
|
4
3
|
import "../shadcn/index.js";
|
|
5
4
|
import "@vueuse/core";
|
|
6
5
|
import "reka-ui";
|
|
@@ -11,6 +10,7 @@ import "lucide-vue-next";
|
|
|
11
10
|
/* empty css */
|
|
12
11
|
/* empty css */
|
|
13
12
|
import re from "../molecules/JCard.vue.js";
|
|
13
|
+
/* empty css */
|
|
14
14
|
import "@internationalized/date";
|
|
15
15
|
import "md-editor-v3";
|
|
16
16
|
/* empty css */
|
|
@@ -27,7 +27,10 @@ import "ag-grid-enterprise";
|
|
|
27
27
|
/* empty css */
|
|
28
28
|
/* empty css */
|
|
29
29
|
/* empty css */
|
|
30
|
+
/* empty css */
|
|
31
|
+
/* empty css */
|
|
30
32
|
import "vue-sonner";
|
|
33
|
+
/* empty css */
|
|
31
34
|
import { resolveGlobalStyle as se } from "../../lib/styleTypePreset.js";
|
|
32
35
|
const ae = {
|
|
33
36
|
key: 1,
|
|
@@ -38,7 +41,7 @@ const ae = {
|
|
|
38
41
|
}, ie = { class: "font-semibold text-lg" }, ce = {
|
|
39
42
|
key: 0,
|
|
40
43
|
class: "text-muted-foreground text-sm mb-2"
|
|
41
|
-
},
|
|
44
|
+
}, Ye = /* @__PURE__ */ X({
|
|
42
45
|
__name: "JDynamicForm",
|
|
43
46
|
props: {
|
|
44
47
|
schema: {},
|
|
@@ -47,7 +50,7 @@ const ae = {
|
|
|
47
50
|
emits: ["update:modelValue", "submit", "change", "error"],
|
|
48
51
|
setup(u, { expose: Y, emit: j }) {
|
|
49
52
|
const r = u, b = j, y = ["checkbox", "switch"], s = Z({});
|
|
50
|
-
|
|
53
|
+
q(
|
|
51
54
|
() => r.modelValue,
|
|
52
55
|
(e) => {
|
|
53
56
|
e && Object.assign(s, e);
|
|
@@ -63,7 +66,7 @@ const ae = {
|
|
|
63
66
|
function v(e) {
|
|
64
67
|
return e.isRequired !== void 0 ? e.isRequired : e.required || !1;
|
|
65
68
|
}
|
|
66
|
-
|
|
69
|
+
q(
|
|
67
70
|
() => r.schema,
|
|
68
71
|
(e) => {
|
|
69
72
|
const o = [];
|
|
@@ -86,14 +89,14 @@ const ae = {
|
|
|
86
89
|
});
|
|
87
90
|
},
|
|
88
91
|
{ immediate: !0 }
|
|
89
|
-
),
|
|
92
|
+
), q(s, (e) => b("update:modelValue", e), { deep: !0 });
|
|
90
93
|
function P() {
|
|
91
94
|
b("submit", { ...s }), typeof r.schema.events?.onSubmit == "function" && r.schema.events.onSubmit({ ...s });
|
|
92
95
|
}
|
|
93
96
|
function G(e, o) {
|
|
94
97
|
b("change", { field: e, value: o }), typeof r.schema.events?.onChange == "function" && r.schema.events.onChange(e, o);
|
|
95
98
|
}
|
|
96
|
-
function
|
|
99
|
+
function J(e) {
|
|
97
100
|
b("error", e), typeof r.schema.events?.onError == "function" && r.schema.events.onError(e);
|
|
98
101
|
}
|
|
99
102
|
function A(e) {
|
|
@@ -105,7 +108,7 @@ const ae = {
|
|
|
105
108
|
});
|
|
106
109
|
}
|
|
107
110
|
const S = ee(() => {
|
|
108
|
-
const e = r.schema.globalStyle?.colCount || (r.schema.layout?.columns ? `row-${r.schema.layout.columns}` : "row-1"), o =
|
|
111
|
+
const e = r.schema.globalStyle?.colCount || (r.schema.layout?.columns ? `row-${r.schema.layout.columns}` : "row-1"), o = H(e);
|
|
109
112
|
let t = "";
|
|
110
113
|
switch (e) {
|
|
111
114
|
case "row-1":
|
|
@@ -162,7 +165,7 @@ const ae = {
|
|
|
162
165
|
return 1;
|
|
163
166
|
}
|
|
164
167
|
}
|
|
165
|
-
function
|
|
168
|
+
function H(e) {
|
|
166
169
|
switch (e) {
|
|
167
170
|
case "row-1":
|
|
168
171
|
return "gap-6";
|
|
@@ -189,10 +192,10 @@ const ae = {
|
|
|
189
192
|
const e = r.schema.globalStyle?.colCount || (r.schema.layout?.columns ? `row-${r.schema.layout.columns}` : "row-1"), o = E(e);
|
|
190
193
|
return o >= 6 ? "6rem" : o >= 5 ? "7rem" : "8rem";
|
|
191
194
|
}
|
|
192
|
-
function
|
|
195
|
+
function N() {
|
|
193
196
|
return r.schema.globalStyle?.labelPosition || "horizontal";
|
|
194
197
|
}
|
|
195
|
-
function
|
|
198
|
+
function $() {
|
|
196
199
|
return r.schema.globalStyle?.labelAlign || "left";
|
|
197
200
|
}
|
|
198
201
|
function L(e) {
|
|
@@ -202,13 +205,13 @@ const ae = {
|
|
|
202
205
|
};
|
|
203
206
|
}
|
|
204
207
|
function T(e) {
|
|
205
|
-
const o = x(e), t = e.isDisabled !== void 0 ? e.isDisabled : e.disabled || !1, l = e.isReadonly !== void 0 ? e.isReadonly : e.readonly || !1, n = y.includes(e.type) ? "inline-flex items-center gap-2 w-auto" : "w-full", f = se(r.schema.globalStyle), K = r.schema.globalStyle?.colCount || (r.schema.layout?.columns ? `row-${r.schema.layout.columns}` : "row-1"),
|
|
208
|
+
const o = x(e), t = e.isDisabled !== void 0 ? e.isDisabled : e.disabled || !1, l = e.isReadonly !== void 0 ? e.isReadonly : e.readonly || !1, n = y.includes(e.type) ? "inline-flex items-center gap-2 w-auto" : "w-full", f = se(r.schema.globalStyle), K = r.schema.globalStyle?.colCount || (r.schema.layout?.columns ? `row-${r.schema.layout.columns}` : "row-1"), F = E(K);
|
|
206
209
|
let m = f.controlSize;
|
|
207
|
-
|
|
208
|
-
const d = (a,
|
|
209
|
-
if (o && (s[o] =
|
|
210
|
+
F >= 6 || F >= 5 ? m = "sm" : F >= 4 && f.controlSize === "lg" && (m = "md");
|
|
211
|
+
const d = (a, O) => {
|
|
212
|
+
if (o && (s[o] = O, G(o, O)), e.events?.[a]) {
|
|
210
213
|
const Q = e.events[a];
|
|
211
|
-
console.log(`Event ${a}: Calling handler "${Q}" with value:`,
|
|
214
|
+
console.log(`Event ${a}: Calling handler "${Q}" with value:`, O);
|
|
212
215
|
}
|
|
213
216
|
};
|
|
214
217
|
return y.includes(e.type) ? {
|
|
@@ -288,7 +291,7 @@ const ae = {
|
|
|
288
291
|
label: o ? "전체" : "선택"
|
|
289
292
|
}, ...e.options || []];
|
|
290
293
|
}
|
|
291
|
-
function
|
|
294
|
+
function I() {
|
|
292
295
|
Object.keys(s).forEach((o) => {
|
|
293
296
|
delete s[o];
|
|
294
297
|
});
|
|
@@ -314,8 +317,8 @@ const ae = {
|
|
|
314
317
|
return Y({
|
|
315
318
|
formState: s,
|
|
316
319
|
submit: P,
|
|
317
|
-
reset:
|
|
318
|
-
handleError:
|
|
320
|
+
reset: I,
|
|
321
|
+
handleError: J
|
|
319
322
|
}), (e, o) => (i(), c("form", {
|
|
320
323
|
onSubmit: te(P, ["prevent"]),
|
|
321
324
|
class: p(S.value)
|
|
@@ -323,13 +326,13 @@ const ae = {
|
|
|
323
326
|
u.schema.type === "simple" ? (i(!0), c(g, { key: 0 }, h(A(u.schema.fields || []), (t, l) => (i(), c("div", {
|
|
324
327
|
key: C(t, l),
|
|
325
328
|
class: p(k(t)),
|
|
326
|
-
style:
|
|
329
|
+
style: z(L(t))
|
|
327
330
|
}, [
|
|
328
|
-
|
|
331
|
+
_(w(B), U({
|
|
329
332
|
label: t.label,
|
|
330
333
|
required: v(t),
|
|
331
|
-
orientation:
|
|
332
|
-
labelAlign:
|
|
334
|
+
orientation: N(),
|
|
335
|
+
labelAlign: $(),
|
|
333
336
|
labelWidth: V(),
|
|
334
337
|
type: t.type === "searchcombo" ? "searchCombo" : t.type,
|
|
335
338
|
"input-type": t.inputType,
|
|
@@ -350,13 +353,13 @@ const ae = {
|
|
|
350
353
|
(i(!0), c(g, null, h(A(t.fields || []), (l, n) => (i(), c("div", {
|
|
351
354
|
key: C(l, n),
|
|
352
355
|
class: p(k(l)),
|
|
353
|
-
style:
|
|
356
|
+
style: z(L(l))
|
|
354
357
|
}, [
|
|
355
|
-
|
|
358
|
+
_(w(B), U({
|
|
356
359
|
label: l.label,
|
|
357
360
|
required: v(l),
|
|
358
|
-
orientation:
|
|
359
|
-
labelAlign:
|
|
361
|
+
orientation: N(),
|
|
362
|
+
labelAlign: $(),
|
|
360
363
|
labelWidth: V(),
|
|
361
364
|
type: l.type === "searchcombo" ? "searchCombo" : l.type,
|
|
362
365
|
"input-type": l.inputType,
|
|
@@ -381,13 +384,13 @@ const ae = {
|
|
|
381
384
|
(i(!0), c(g, null, h(A(t.fields || []), (l, n) => (i(), c("div", {
|
|
382
385
|
key: C(l, n),
|
|
383
386
|
class: p(k(l)),
|
|
384
|
-
style:
|
|
387
|
+
style: z(L(l))
|
|
385
388
|
}, [
|
|
386
|
-
|
|
389
|
+
_(w(B), U({
|
|
387
390
|
label: l.label,
|
|
388
391
|
required: v(l),
|
|
389
|
-
orientation:
|
|
390
|
-
labelAlign:
|
|
392
|
+
orientation: N(),
|
|
393
|
+
labelAlign: $(),
|
|
391
394
|
labelWidth: V(),
|
|
392
395
|
type: l.type === "searchcombo" ? "searchCombo" : l.type,
|
|
393
396
|
"input-type": l.inputType,
|
|
@@ -402,6 +405,6 @@ const ae = {
|
|
|
402
405
|
}
|
|
403
406
|
});
|
|
404
407
|
export {
|
|
405
|
-
|
|
408
|
+
Ye as default
|
|
406
409
|
};
|
|
407
410
|
//# sourceMappingURL=JDynamicForm.vue2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JDynamicForm.vue2.js","sources":["../../../../src/components/organisms/JDynamicForm.vue"],"sourcesContent":["<template>\n <form @submit.prevent=\"handleSubmit\" :class=\"formClasses\">\n <!-- 🧱 단순형 폼 -->\n <template v-if=\"schema.type === 'simple'\">\n <div\n v-for=\"(field, index) in getOrderedFields(schema.fields || [])\"\n :key=\"getFieldKey(field, index)\"\n :class=\"fieldBaseClass(field)\"\n :style=\"getFieldStyle(field)\"\n >\n <JFormField\n :label=\"field.label\"\n :required=\"getFieldRequired(field)\"\n :orientation=\"getLabelPosition()\"\n :labelAlign=\"getLabelAlign()\"\n :labelWidth=\"getLabelWidth()\"\n :type=\"(field.type === 'searchcombo' ? 'searchCombo' : field.type) as any\"\n :input-type=\"field.inputType\"\n :description=\"field.description\"\n :inline-label=\"field.inlineLabel\"\n v-bind=\"getFieldProps(field)\"\n />\n </div>\n </template>\n\n <!-- 📦 섹션형 폼 -->\n <template v-else-if=\"schema.type === 'sectioned'\">\n <div class=\"space-y-6\">\n <JCard\n v-for=\"section in schema.sections\"\n :key=\"section.id\"\n :title=\"section.title\"\n :collapsible=\"section.collapsible\"\n :default-collapsed=\"section.defaultCollapsed\"\n >\n <div :class=\"formClasses\">\n <div\n v-for=\"(field, index) in getOrderedFields(section.fields || [])\"\n :key=\"getFieldKey(field, index)\"\n :class=\"fieldBaseClass(field)\"\n :style=\"getFieldStyle(field)\"\n >\n <JFormField\n :label=\"field.label\"\n :required=\"getFieldRequired(field)\"\n :orientation=\"getLabelPosition()\"\n :labelAlign=\"getLabelAlign()\"\n :labelWidth=\"getLabelWidth()\"\n :type=\"(field.type === 'searchcombo' ? 'searchCombo' : field.type) as any\"\n :input-type=\"field.inputType\"\n :description=\"field.description\"\n :inline-label=\"field.inlineLabel\"\n v-bind=\"getFieldProps(field)\"\n />\n </div>\n </div>\n </JCard>\n </div>\n </template>\n\n <!-- 🪜 스텝형 (Wizard) -->\n <template v-else-if=\"schema.type === 'wizard'\">\n <div class=\"space-y-4\">\n <div\n v-for=\"step in schema.steps\"\n :key=\"step.id\"\n class=\"p-4 border rounded-xl\"\n >\n <h3 class=\"font-semibold text-lg\">{{ step.title }}</h3>\n <p v-if=\"step.description\" class=\"text-muted-foreground text-sm mb-2\">\n {{ step.description }}\n </p>\n <div :class=\"formClasses\">\n <div\n v-for=\"(field, index) in getOrderedFields(step.fields || [])\"\n :key=\"getFieldKey(field, index)\"\n :class=\"fieldBaseClass(field)\"\n :style=\"getFieldStyle(field)\"\n >\n <JFormField\n :label=\"field.label\"\n :required=\"getFieldRequired(field)\"\n :orientation=\"getLabelPosition()\"\n :labelAlign=\"getLabelAlign()\"\n :labelWidth=\"getLabelWidth()\"\n :type=\"(field.type === 'searchcombo' ? 'searchCombo' : field.type) as any\"\n :input-type=\"field.inputType\"\n :description=\"field.description\"\n :inline-label=\"field.inlineLabel\"\n v-bind=\"getFieldProps(field)\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n\n </form>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, reactive, watch } from 'vue';\nimport { JFormField, JCard } from '@/components/molecules';\nimport type { FormSchema, DynamicFormField } from '@/types/dynamic-form';\nimport { resolveGlobalStyle } from '@/lib/styleTypePreset';\n\n// props\nconst props = defineProps<{\n schema: FormSchema;\n modelValue?: Record<string, any>;\n}>();\n\nconst emit = defineEmits(['update:modelValue', 'submit', 'change', 'error']);\n\nconst BOOLEAN_TYPES: Array<DynamicFormField['type']> = ['checkbox', 'switch'];\n\n// 폼 상태 관리\nconst formState = reactive<Record<string, any>>({});\n\n// 초기값 설정\nwatch(\n () => props.modelValue,\n (newValues) => {\n if (newValues) {\n Object.assign(formState, newValues);\n }\n },\n { immediate: true, deep: true }\n);\n\n// 필드 키 가져오기 (controlId > controlName > name > label 순서)\nfunction getFieldKey(field: DynamicFormField, index: number): string {\n return field.controlId || field.controlName || (field as any).name || field.label || `field-${index}`;\n}\n\n// 필드 이름 가져오기 (controlName > name 순서)\nfunction getFieldName(field: DynamicFormField): string {\n return field.controlName || (field as any).name || '';\n}\n\n// 필드 required 가져오기 (isRequired > required 순서)\nfunction getFieldRequired(field: DynamicFormField): boolean {\n return field.isRequired !== undefined ? field.isRequired : ((field as any).required || false);\n}\n\n// 필드 초기화\nwatch(\n () => props.schema,\n (newSchema) => {\n const allFields: DynamicFormField[] = [];\n \n if (newSchema.type === 'simple' && newSchema.fields) {\n allFields.push(...newSchema.fields);\n } else if (newSchema.type === 'sectioned' && newSchema.sections) {\n newSchema.sections.forEach(section => {\n if (section.fields) allFields.push(...section.fields);\n });\n } else if (newSchema.type === 'wizard' && newSchema.steps) {\n newSchema.steps.forEach(step => {\n if (step.fields) allFields.push(...step.fields);\n });\n }\n \n allFields.forEach((field) => {\n const fieldName = getFieldName(field);\n if (fieldName && formState[fieldName] === undefined) {\n if (BOOLEAN_TYPES.includes(field.type)) {\n formState[fieldName] = 'N';\n } else if (field.type === 'radio') {\n formState[fieldName] = field.options?.[0]?.value ?? '';\n } else if (field.type === 'select' || field.type === 'searchcombo') {\n const addAll = field.addAll !== undefined ? field.addAll : ((field as any).allowAll || false);\n formState[fieldName] = addAll ? 'ALL' : 'SELECT';\n } else {\n formState[fieldName] = '';\n }\n }\n });\n },\n { immediate: true }\n);\n\n// 값 변경 감지 → 상위 emit\nwatch(formState, (val) => emit('update:modelValue', val), { deep: true });\n\n// 이벤트 핸들러\nfunction handleSubmit() {\n emit('submit', { ...formState });\n if (typeof props.schema.events?.onSubmit === 'function') {\n props.schema.events.onSubmit({ ...formState });\n }\n}\n\nfunction handleChange(field: string, value: any) {\n emit('change', { field, value });\n if (typeof props.schema.events?.onChange === 'function') {\n props.schema.events.onChange(field, value);\n }\n}\n\nfunction handleError(errs: any) {\n emit('error', errs);\n if (typeof props.schema.events?.onError === 'function') {\n props.schema.events.onError(errs);\n }\n}\n\n// 정렬된 필드 가져오기\nfunction getOrderedFields(fields: DynamicFormField[]): DynamicFormField[] {\n const visibleFields = fields.filter((field) => field.isVisible !== false);\n return visibleFields.sort((a, b) => {\n // sortOrder 기준으로 정렬\n if (a.sortOrder !== undefined && b.sortOrder !== undefined) {\n if (a.sortOrder !== b.sortOrder) {\n return a.sortOrder - b.sortOrder;\n }\n }\n const aName = a.controlName || (a as any).name || a.label || '';\n const bName = b.controlName || (b as any).name || b.label || '';\n return aName.localeCompare(bName);\n });\n}\n\n// 폼 클래스 계산\nconst formClasses = computed(() => {\n const colCount = props.schema.globalStyle?.colCount || \n (props.schema.layout?.columns ? `row-${props.schema.layout.columns}` : 'row-1');\n const gapClass = getGapClass(colCount);\n \n // 반응형: 화면 크기에 따라 열 수 자동 조정\n let classes = '';\n switch (colCount) {\n case 'row-1':\n classes = `flex flex-col ${gapClass}`;\n break;\n case 'row':\n case 'row-2':\n classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 auto-rows-min`;\n break;\n case 'row-3':\n classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 lg:grid-cols-3 auto-rows-min`;\n break;\n case 'row-4':\n classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 lg:grid-cols-4 auto-rows-min`;\n break;\n case 'row-5':\n classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 auto-rows-min`;\n break;\n case 'row-6':\n classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 auto-rows-min`;\n break;\n case 'row-7':\n classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-7 auto-rows-min`;\n break;\n case 'row-8':\n classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8 auto-rows-min`;\n break;\n default:\n classes = `flex flex-col ${gapClass}`;\n }\n \n return classes;\n});\n\n// 필드 기본 클래스\nfunction fieldBaseClass(field: DynamicFormField): string {\n return BOOLEAN_TYPES.includes(field.type)\n ? 'min-w-0 w-auto inline-flex items-center'\n : 'min-w-0 w-full';\n}\n\n// 최대 열 수 계산\nfunction getMaxCols(colCount?: string): number {\n switch (colCount) {\n case 'row':\n case 'row-2': return 2;\n case 'row-3': return 3;\n case 'row-4': return 4;\n case 'row-5': return 5;\n case 'row-6': return 6;\n case 'row-7': return 7;\n case 'row-8': return 8;\n default: return 1;\n }\n}\n\n// 열 수에 따른 gap 계산\nfunction getGapClass(colCount: string): string {\n switch (colCount) {\n case 'row-1': return 'gap-6';\n case 'row':\n case 'row-2': return 'gap-4';\n case 'row-3': return 'gap-4';\n case 'row-4': return 'gap-3';\n case 'row-5': return 'gap-2';\n case 'row-6': return 'gap-2';\n case 'row-7': return 'gap-2';\n case 'row-8': return 'gap-2';\n default: return 'gap-6';\n }\n}\n\n// 열 수에 따른 라벨 너비 계산\nfunction getLabelWidth(): string {\n const colCount = props.schema.globalStyle?.colCount || \n (props.schema.layout?.columns ? `row-${props.schema.layout.columns}` : 'row-1');\n const maxCols = getMaxCols(colCount);\n if (maxCols >= 6) return '6rem';\n if (maxCols >= 5) return '7rem';\n return '8rem';\n}\n\n// 라벨 위치 가져오기\nfunction getLabelPosition(): 'horizontal' | 'vertical' {\n return props.schema.globalStyle?.labelPosition || 'horizontal';\n}\n\n// 라벨 정렬 가져오기\nfunction getLabelAlign(): 'left' | 'middle' | 'right' {\n return props.schema.globalStyle?.labelAlign || 'left';\n}\n\n// 필드 스타일 계산\nfunction getFieldStyle(field: DynamicFormField): Record<string, string> {\n const colCount = props.schema.globalStyle?.colCount || \n (props.schema.layout?.columns ? `row-${props.schema.layout.columns}` : 'row-1');\n const maxCols = getMaxCols(colCount);\n const span = Math.min(maxCols, Math.max(1, field.colSpan || 1));\n return {\n gridColumn: `span ${span}`\n };\n}\n\n// 필드 props 생성\nfunction getFieldProps(field: DynamicFormField) {\n const fieldName = getFieldName(field);\n const disabled = field.isDisabled !== undefined ? field.isDisabled : ((field as any).disabled || false);\n const readonly = field.isReadonly !== undefined ? field.isReadonly : ((field as any).readonly || false);\n \n // baseClass 조정\n const baseClass = BOOLEAN_TYPES.includes(field.type)\n ? 'inline-flex items-center gap-2 w-auto'\n : 'w-full';\n \n // 전역 스타일 해결\n const resolvedStyle = resolveGlobalStyle(props.schema.globalStyle);\n \n // 열 수에 따라 컨트롤 크기 동적 조정\n const colCount = props.schema.globalStyle?.colCount || \n (props.schema.layout?.columns ? `row-${props.schema.layout.columns}` : 'row-1');\n const maxCols = getMaxCols(colCount);\n let finalSize = resolvedStyle.controlSize;\n \n // 4열 이상일 때 컨트롤 크기를 작게 조정\n if (maxCols >= 6) {\n finalSize = 'sm';\n } else if (maxCols >= 5) {\n finalSize = 'sm';\n } else if (maxCols >= 4) {\n if (resolvedStyle.controlSize === 'lg') {\n finalSize = 'md';\n }\n }\n\n const createEventHandler = (eventType: string, value: any) => {\n if (fieldName) {\n formState[fieldName] = value;\n handleChange(fieldName, value);\n }\n \n if (field.events?.[eventType as keyof typeof field.events]) {\n const handlerName = field.events[eventType as keyof typeof field.events];\n console.log(`Event ${eventType}: Calling handler \"${handlerName}\" with value:`, value);\n }\n };\n\n if (BOOLEAN_TYPES.includes(field.type)) {\n return {\n modelValue: formState[fieldName] === 'Y' ? 'Y' : 'N',\n disabled,\n styleType: finalSize,\n class: baseClass,\n 'onUpdate:modelValue': (value: string) => {\n if (fieldName) {\n formState[fieldName] = value;\n }\n createEventHandler('onChange', value === 'Y');\n }\n };\n }\n\n if (field.type === 'radio') {\n return {\n modelValue: String(formState[fieldName] ?? ''),\n options: field.options ?? [],\n multiple: field.multiple,\n disabled,\n styleType: finalSize,\n class: baseClass,\n 'onUpdate:modelValue': (value: string) => {\n createEventHandler('onChange', value);\n }\n };\n }\n\n if (field.type === 'select' || field.type === 'combo') {\n return {\n modelValue: String(formState[fieldName] ?? ''),\n options: getSelectOptions(field),\n multiple: field.multiple,\n disabled,\n styleType: finalSize,\n class: baseClass,\n 'onUpdate:modelValue': (value: string) => {\n createEventHandler('onChange', value);\n }\n };\n }\n\n if (field.type === 'searchcombo') {\n return {\n modelValue: String(formState[fieldName] ?? ''),\n options: getSelectOptions(field),\n disabled,\n styleType: finalSize,\n class: baseClass,\n 'onUpdate:modelValue': (value: string) => {\n createEventHandler('onChange', value);\n }\n };\n }\n\n if (field.type === 'textarea') {\n return {\n modelValue: String(formState[fieldName] ?? ''),\n placeholder: field.placeholder ?? '',\n disabled,\n readonly,\n styleType: finalSize,\n class: baseClass,\n 'onUpdate:modelValue': (value: string) => {\n createEventHandler('onChange', value);\n }\n };\n }\n\n if (field.type === 'datepicker') {\n return {\n modelValue: String(formState[fieldName] ?? ''),\n placeholder: field.placeholder ?? '',\n disabled,\n readonly,\n styleType: finalSize,\n class: baseClass,\n 'onUpdate:modelValue': (value: string) => {\n createEventHandler('onChange', value);\n }\n };\n }\n\n // 기본 input\n return {\n modelValue: String(formState[fieldName] ?? ''),\n inputType: field.inputType || (field.dataType === 'number' ? 'number' : 'text'),\n placeholder: field.placeholder ?? '',\n disabled,\n readonly,\n styleType: finalSize,\n class: baseClass,\n 'onUpdate:modelValue': (value: string | number) => {\n createEventHandler('onChange', value);\n }\n };\n}\n\n// Select 옵션 생성\nfunction getSelectOptions(field: DynamicFormField) {\n const addAll = field.addAll !== undefined ? field.addAll : ((field as any).allowAll || false);\n const defaultOption = {\n value: addAll ? 'ALL' : 'SELECT',\n label: addAll ? '전체' : '선택'\n };\n return [defaultOption, ...(field.options || [])];\n}\n\n// 폼 리셋\nfunction reset() {\n Object.keys(formState).forEach(key => {\n delete formState[key];\n });\n \n // 모든 필드 수집\n const allFields: DynamicFormField[] = [];\n \n if (props.schema.type === 'simple' && props.schema.fields) {\n allFields.push(...props.schema.fields);\n } else if (props.schema.type === 'sectioned' && props.schema.sections) {\n props.schema.sections.forEach(section => {\n if (section.fields) allFields.push(...section.fields);\n });\n } else if (props.schema.type === 'wizard' && props.schema.steps) {\n props.schema.steps.forEach(step => {\n if (step.fields) allFields.push(...step.fields);\n });\n }\n \n // 초기값으로 재설정\n allFields.forEach((field) => {\n const fieldName = getFieldName(field);\n if (fieldName) {\n if (BOOLEAN_TYPES.includes(field.type)) {\n formState[fieldName] = 'N';\n } else if (field.type === 'radio') {\n formState[fieldName] = field.options?.[0]?.value ?? '';\n } else if (field.type === 'select' || field.type === 'searchcombo') {\n const addAll = field.addAll !== undefined ? field.addAll : ((field as any).allowAll || false);\n formState[fieldName] = addAll ? 'ALL' : 'SELECT';\n } else {\n formState[fieldName] = '';\n }\n }\n });\n}\n\n// 폼 상태 노출\ndefineExpose({\n formState,\n submit: handleSubmit,\n reset,\n handleError\n});\n</script>\n\n<style scoped>\nform {\n width: 100%;\n}\n</style>\n"],"names":["props","__props","emit","__emit","BOOLEAN_TYPES","formState","reactive","watch","newValues","getFieldKey","field","index","getFieldName","getFieldRequired","newSchema","allFields","section","step","fieldName","addAll","val","handleSubmit","handleChange","value","handleError","errs","getOrderedFields","fields","a","b","aName","bName","formClasses","computed","colCount","gapClass","getGapClass","classes","fieldBaseClass","getMaxCols","getLabelWidth","maxCols","getLabelPosition","getLabelAlign","getFieldStyle","getFieldProps","disabled","readonly","baseClass","resolvedStyle","resolveGlobalStyle","finalSize","createEventHandler","eventType","handlerName","getSelectOptions","reset","key","__expose","_createElementBlock","_Fragment","_renderList","_normalizeClass","_normalizeStyle","_createVNode","_unref","_mergeProps","_openBlock","_hoisted_1","_createBlock","JCard","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_hoisted_4"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"JDynamicForm.vue2.js","sources":["../../../../src/components/organisms/JDynamicForm.vue"],"sourcesContent":["<template>\n <form @submit.prevent=\"handleSubmit\" :class=\"formClasses\">\n <!-- 🧱 단순형 폼 -->\n <template v-if=\"schema.type === 'simple'\">\n <div\n v-for=\"(field, index) in getOrderedFields(schema.fields || [])\"\n :key=\"getFieldKey(field, index)\"\n :class=\"fieldBaseClass(field)\"\n :style=\"getFieldStyle(field)\"\n >\n <JFormField\n :label=\"field.label\"\n :required=\"getFieldRequired(field)\"\n :orientation=\"getLabelPosition()\"\n :labelAlign=\"getLabelAlign()\"\n :labelWidth=\"getLabelWidth()\"\n :type=\"(field.type === 'searchcombo' ? 'searchCombo' : field.type) as any\"\n :input-type=\"field.inputType\"\n :description=\"field.description\"\n :inline-label=\"field.inlineLabel\"\n v-bind=\"getFieldProps(field)\"\n />\n </div>\n </template>\n\n <!-- 📦 섹션형 폼 -->\n <template v-else-if=\"schema.type === 'sectioned'\">\n <div class=\"space-y-6\">\n <JCard\n v-for=\"section in schema.sections\"\n :key=\"section.id\"\n :title=\"section.title\"\n :collapsible=\"section.collapsible\"\n :default-collapsed=\"section.defaultCollapsed\"\n >\n <div :class=\"formClasses\">\n <div\n v-for=\"(field, index) in getOrderedFields(section.fields || [])\"\n :key=\"getFieldKey(field, index)\"\n :class=\"fieldBaseClass(field)\"\n :style=\"getFieldStyle(field)\"\n >\n <JFormField\n :label=\"field.label\"\n :required=\"getFieldRequired(field)\"\n :orientation=\"getLabelPosition()\"\n :labelAlign=\"getLabelAlign()\"\n :labelWidth=\"getLabelWidth()\"\n :type=\"(field.type === 'searchcombo' ? 'searchCombo' : field.type) as any\"\n :input-type=\"field.inputType\"\n :description=\"field.description\"\n :inline-label=\"field.inlineLabel\"\n v-bind=\"getFieldProps(field)\"\n />\n </div>\n </div>\n </JCard>\n </div>\n </template>\n\n <!-- 🪜 스텝형 (Wizard) -->\n <template v-else-if=\"schema.type === 'wizard'\">\n <div class=\"space-y-4\">\n <div\n v-for=\"step in schema.steps\"\n :key=\"step.id\"\n class=\"p-4 border rounded-xl\"\n >\n <h3 class=\"font-semibold text-lg\">{{ step.title }}</h3>\n <p v-if=\"step.description\" class=\"text-muted-foreground text-sm mb-2\">\n {{ step.description }}\n </p>\n <div :class=\"formClasses\">\n <div\n v-for=\"(field, index) in getOrderedFields(step.fields || [])\"\n :key=\"getFieldKey(field, index)\"\n :class=\"fieldBaseClass(field)\"\n :style=\"getFieldStyle(field)\"\n >\n <JFormField\n :label=\"field.label\"\n :required=\"getFieldRequired(field)\"\n :orientation=\"getLabelPosition()\"\n :labelAlign=\"getLabelAlign()\"\n :labelWidth=\"getLabelWidth()\"\n :type=\"(field.type === 'searchcombo' ? 'searchCombo' : field.type) as any\"\n :input-type=\"field.inputType\"\n :description=\"field.description\"\n :inline-label=\"field.inlineLabel\"\n v-bind=\"getFieldProps(field)\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n\n </form>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, reactive, watch } from 'vue';\nimport { JFormField, JCard } from '@/components/molecules';\nimport type { FormSchema, DynamicFormField } from '@/types/dynamic-form';\nimport { resolveGlobalStyle } from '@/lib/styleTypePreset';\n\n// props\nconst props = defineProps<{\n schema: FormSchema;\n modelValue?: Record<string, any>;\n}>();\n\nconst emit = defineEmits(['update:modelValue', 'submit', 'change', 'error']);\n\nconst BOOLEAN_TYPES: Array<DynamicFormField['type']> = ['checkbox', 'switch'];\n\n// 폼 상태 관리\nconst formState = reactive<Record<string, any>>({});\n\n// 초기값 설정\nwatch(\n () => props.modelValue,\n (newValues) => {\n if (newValues) {\n Object.assign(formState, newValues);\n }\n },\n { immediate: true, deep: true }\n);\n\n// 필드 키 가져오기 (controlId > controlName > name > label 순서)\nfunction getFieldKey(field: DynamicFormField, index: number): string {\n return field.controlId || field.controlName || (field as any).name || field.label || `field-${index}`;\n}\n\n// 필드 이름 가져오기 (controlName > name 순서)\nfunction getFieldName(field: DynamicFormField): string {\n return field.controlName || (field as any).name || '';\n}\n\n// 필드 required 가져오기 (isRequired > required 순서)\nfunction getFieldRequired(field: DynamicFormField): boolean {\n return field.isRequired !== undefined ? field.isRequired : ((field as any).required || false);\n}\n\n// 필드 초기화\nwatch(\n () => props.schema,\n (newSchema) => {\n const allFields: DynamicFormField[] = [];\n \n if (newSchema.type === 'simple' && newSchema.fields) {\n allFields.push(...newSchema.fields);\n } else if (newSchema.type === 'sectioned' && newSchema.sections) {\n newSchema.sections.forEach(section => {\n if (section.fields) allFields.push(...section.fields);\n });\n } else if (newSchema.type === 'wizard' && newSchema.steps) {\n newSchema.steps.forEach(step => {\n if (step.fields) allFields.push(...step.fields);\n });\n }\n \n allFields.forEach((field) => {\n const fieldName = getFieldName(field);\n if (fieldName && formState[fieldName] === undefined) {\n if (BOOLEAN_TYPES.includes(field.type)) {\n formState[fieldName] = 'N';\n } else if (field.type === 'radio') {\n formState[fieldName] = field.options?.[0]?.value ?? '';\n } else if (field.type === 'select' || field.type === 'searchcombo') {\n const addAll = field.addAll !== undefined ? field.addAll : ((field as any).allowAll || false);\n formState[fieldName] = addAll ? 'ALL' : 'SELECT';\n } else {\n formState[fieldName] = '';\n }\n }\n });\n },\n { immediate: true }\n);\n\n// 값 변경 감지 → 상위 emit\nwatch(formState, (val) => emit('update:modelValue', val), { deep: true });\n\n// 이벤트 핸들러\nfunction handleSubmit() {\n emit('submit', { ...formState });\n if (typeof props.schema.events?.onSubmit === 'function') {\n props.schema.events.onSubmit({ ...formState });\n }\n}\n\nfunction handleChange(field: string, value: any) {\n emit('change', { field, value });\n if (typeof props.schema.events?.onChange === 'function') {\n props.schema.events.onChange(field, value);\n }\n}\n\nfunction handleError(errs: any) {\n emit('error', errs);\n if (typeof props.schema.events?.onError === 'function') {\n props.schema.events.onError(errs);\n }\n}\n\n// 정렬된 필드 가져오기\nfunction getOrderedFields(fields: DynamicFormField[]): DynamicFormField[] {\n const visibleFields = fields.filter((field) => field.isVisible !== false);\n return visibleFields.sort((a, b) => {\n // sortOrder 기준으로 정렬\n if (a.sortOrder !== undefined && b.sortOrder !== undefined) {\n if (a.sortOrder !== b.sortOrder) {\n return a.sortOrder - b.sortOrder;\n }\n }\n const aName = a.controlName || (a as any).name || a.label || '';\n const bName = b.controlName || (b as any).name || b.label || '';\n return aName.localeCompare(bName);\n });\n}\n\n// 폼 클래스 계산\nconst formClasses = computed(() => {\n const colCount = props.schema.globalStyle?.colCount || \n (props.schema.layout?.columns ? `row-${props.schema.layout.columns}` : 'row-1');\n const gapClass = getGapClass(colCount);\n \n // 반응형: 화면 크기에 따라 열 수 자동 조정\n let classes = '';\n switch (colCount) {\n case 'row-1':\n classes = `flex flex-col ${gapClass}`;\n break;\n case 'row':\n case 'row-2':\n classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 auto-rows-min`;\n break;\n case 'row-3':\n classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 lg:grid-cols-3 auto-rows-min`;\n break;\n case 'row-4':\n classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 lg:grid-cols-4 auto-rows-min`;\n break;\n case 'row-5':\n classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 auto-rows-min`;\n break;\n case 'row-6':\n classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 auto-rows-min`;\n break;\n case 'row-7':\n classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-7 auto-rows-min`;\n break;\n case 'row-8':\n classes = `flex flex-col md:grid md:grid-flow-row md:items-start ${gapClass} md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8 auto-rows-min`;\n break;\n default:\n classes = `flex flex-col ${gapClass}`;\n }\n \n return classes;\n});\n\n// 필드 기본 클래스\nfunction fieldBaseClass(field: DynamicFormField): string {\n return BOOLEAN_TYPES.includes(field.type)\n ? 'min-w-0 w-auto inline-flex items-center'\n : 'min-w-0 w-full';\n}\n\n// 최대 열 수 계산\nfunction getMaxCols(colCount?: string): number {\n switch (colCount) {\n case 'row':\n case 'row-2': return 2;\n case 'row-3': return 3;\n case 'row-4': return 4;\n case 'row-5': return 5;\n case 'row-6': return 6;\n case 'row-7': return 7;\n case 'row-8': return 8;\n default: return 1;\n }\n}\n\n// 열 수에 따른 gap 계산\nfunction getGapClass(colCount: string): string {\n switch (colCount) {\n case 'row-1': return 'gap-6';\n case 'row':\n case 'row-2': return 'gap-4';\n case 'row-3': return 'gap-4';\n case 'row-4': return 'gap-3';\n case 'row-5': return 'gap-2';\n case 'row-6': return 'gap-2';\n case 'row-7': return 'gap-2';\n case 'row-8': return 'gap-2';\n default: return 'gap-6';\n }\n}\n\n// 열 수에 따른 라벨 너비 계산\nfunction getLabelWidth(): string {\n const colCount = props.schema.globalStyle?.colCount || \n (props.schema.layout?.columns ? `row-${props.schema.layout.columns}` : 'row-1');\n const maxCols = getMaxCols(colCount);\n if (maxCols >= 6) return '6rem';\n if (maxCols >= 5) return '7rem';\n return '8rem';\n}\n\n// 라벨 위치 가져오기\nfunction getLabelPosition(): 'horizontal' | 'vertical' {\n return props.schema.globalStyle?.labelPosition || 'horizontal';\n}\n\n// 라벨 정렬 가져오기\nfunction getLabelAlign(): 'left' | 'middle' | 'right' {\n return props.schema.globalStyle?.labelAlign || 'left';\n}\n\n// 필드 스타일 계산\nfunction getFieldStyle(field: DynamicFormField): Record<string, string> {\n const colCount = props.schema.globalStyle?.colCount || \n (props.schema.layout?.columns ? `row-${props.schema.layout.columns}` : 'row-1');\n const maxCols = getMaxCols(colCount);\n const span = Math.min(maxCols, Math.max(1, field.colSpan || 1));\n return {\n gridColumn: `span ${span}`\n };\n}\n\n// 필드 props 생성\nfunction getFieldProps(field: DynamicFormField) {\n const fieldName = getFieldName(field);\n const disabled = field.isDisabled !== undefined ? field.isDisabled : ((field as any).disabled || false);\n const readonly = field.isReadonly !== undefined ? field.isReadonly : ((field as any).readonly || false);\n \n // baseClass 조정\n const baseClass = BOOLEAN_TYPES.includes(field.type)\n ? 'inline-flex items-center gap-2 w-auto'\n : 'w-full';\n \n // 전역 스타일 해결\n const resolvedStyle = resolveGlobalStyle(props.schema.globalStyle);\n \n // 열 수에 따라 컨트롤 크기 동적 조정\n const colCount = props.schema.globalStyle?.colCount || \n (props.schema.layout?.columns ? `row-${props.schema.layout.columns}` : 'row-1');\n const maxCols = getMaxCols(colCount);\n let finalSize = resolvedStyle.controlSize;\n \n // 4열 이상일 때 컨트롤 크기를 작게 조정\n if (maxCols >= 6) {\n finalSize = 'sm';\n } else if (maxCols >= 5) {\n finalSize = 'sm';\n } else if (maxCols >= 4) {\n if (resolvedStyle.controlSize === 'lg') {\n finalSize = 'md';\n }\n }\n\n const createEventHandler = (eventType: string, value: any) => {\n if (fieldName) {\n formState[fieldName] = value;\n handleChange(fieldName, value);\n }\n \n if (field.events?.[eventType as keyof typeof field.events]) {\n const handlerName = field.events[eventType as keyof typeof field.events];\n console.log(`Event ${eventType}: Calling handler \"${handlerName}\" with value:`, value);\n }\n };\n\n if (BOOLEAN_TYPES.includes(field.type)) {\n return {\n modelValue: formState[fieldName] === 'Y' ? 'Y' : 'N',\n disabled,\n styleType: finalSize,\n class: baseClass,\n 'onUpdate:modelValue': (value: string) => {\n if (fieldName) {\n formState[fieldName] = value;\n }\n createEventHandler('onChange', value === 'Y');\n }\n };\n }\n\n if (field.type === 'radio') {\n return {\n modelValue: String(formState[fieldName] ?? ''),\n options: field.options ?? [],\n multiple: field.multiple,\n disabled,\n styleType: finalSize,\n class: baseClass,\n 'onUpdate:modelValue': (value: string) => {\n createEventHandler('onChange', value);\n }\n };\n }\n\n if (field.type === 'select' || field.type === 'combo') {\n return {\n modelValue: String(formState[fieldName] ?? ''),\n options: getSelectOptions(field),\n multiple: field.multiple,\n disabled,\n styleType: finalSize,\n class: baseClass,\n 'onUpdate:modelValue': (value: string) => {\n createEventHandler('onChange', value);\n }\n };\n }\n\n if (field.type === 'searchcombo') {\n return {\n modelValue: String(formState[fieldName] ?? ''),\n options: getSelectOptions(field),\n disabled,\n styleType: finalSize,\n class: baseClass,\n 'onUpdate:modelValue': (value: string) => {\n createEventHandler('onChange', value);\n }\n };\n }\n\n if (field.type === 'textarea') {\n return {\n modelValue: String(formState[fieldName] ?? ''),\n placeholder: field.placeholder ?? '',\n disabled,\n readonly,\n styleType: finalSize,\n class: baseClass,\n 'onUpdate:modelValue': (value: string) => {\n createEventHandler('onChange', value);\n }\n };\n }\n\n if (field.type === 'datepicker') {\n return {\n modelValue: String(formState[fieldName] ?? ''),\n placeholder: field.placeholder ?? '',\n disabled,\n readonly,\n styleType: finalSize,\n class: baseClass,\n 'onUpdate:modelValue': (value: string) => {\n createEventHandler('onChange', value);\n }\n };\n }\n\n // 기본 input\n return {\n modelValue: String(formState[fieldName] ?? ''),\n inputType: field.inputType || (field.dataType === 'number' ? 'number' : 'text'),\n placeholder: field.placeholder ?? '',\n disabled,\n readonly,\n styleType: finalSize,\n class: baseClass,\n 'onUpdate:modelValue': (value: string | number) => {\n createEventHandler('onChange', value);\n }\n };\n}\n\n// Select 옵션 생성\nfunction getSelectOptions(field: DynamicFormField) {\n const addAll = field.addAll !== undefined ? field.addAll : ((field as any).allowAll || false);\n const defaultOption = {\n value: addAll ? 'ALL' : 'SELECT',\n label: addAll ? '전체' : '선택'\n };\n return [defaultOption, ...(field.options || [])];\n}\n\n// 폼 리셋\nfunction reset() {\n Object.keys(formState).forEach(key => {\n delete formState[key];\n });\n \n // 모든 필드 수집\n const allFields: DynamicFormField[] = [];\n \n if (props.schema.type === 'simple' && props.schema.fields) {\n allFields.push(...props.schema.fields);\n } else if (props.schema.type === 'sectioned' && props.schema.sections) {\n props.schema.sections.forEach(section => {\n if (section.fields) allFields.push(...section.fields);\n });\n } else if (props.schema.type === 'wizard' && props.schema.steps) {\n props.schema.steps.forEach(step => {\n if (step.fields) allFields.push(...step.fields);\n });\n }\n \n // 초기값으로 재설정\n allFields.forEach((field) => {\n const fieldName = getFieldName(field);\n if (fieldName) {\n if (BOOLEAN_TYPES.includes(field.type)) {\n formState[fieldName] = 'N';\n } else if (field.type === 'radio') {\n formState[fieldName] = field.options?.[0]?.value ?? '';\n } else if (field.type === 'select' || field.type === 'searchcombo') {\n const addAll = field.addAll !== undefined ? field.addAll : ((field as any).allowAll || false);\n formState[fieldName] = addAll ? 'ALL' : 'SELECT';\n } else {\n formState[fieldName] = '';\n }\n }\n });\n}\n\n// 폼 상태 노출\ndefineExpose({\n formState,\n submit: handleSubmit,\n reset,\n handleError\n});\n</script>\n\n<style scoped>\nform {\n width: 100%;\n}\n</style>\n"],"names":["props","__props","emit","__emit","BOOLEAN_TYPES","formState","reactive","watch","newValues","getFieldKey","field","index","getFieldName","getFieldRequired","newSchema","allFields","section","step","fieldName","addAll","val","handleSubmit","handleChange","value","handleError","errs","getOrderedFields","fields","a","b","aName","bName","formClasses","computed","colCount","gapClass","getGapClass","classes","fieldBaseClass","getMaxCols","getLabelWidth","maxCols","getLabelPosition","getLabelAlign","getFieldStyle","getFieldProps","disabled","readonly","baseClass","resolvedStyle","resolveGlobalStyle","finalSize","createEventHandler","eventType","handlerName","getSelectOptions","reset","key","__expose","_createElementBlock","_Fragment","_renderList","_normalizeClass","_normalizeStyle","_createVNode","_unref","_mergeProps","_openBlock","_hoisted_1","_createBlock","JCard","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_hoisted_4"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),C=require("../molecules/JTabs.vue.cjs"),_={key:1,class:"flex items-center justify-center h-full w-full"},
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),C=require("../molecules/JTabs.vue.cjs"),_=require("../../lib/utils.cjs"),k={key:1,class:"flex items-center justify-center h-full w-full"},B={class:"text-center"},E={class:"text-muted-foreground text-lg"},I=a.defineComponent({__name:"JDynamicTabs",props:{initialTabs:{default:()=>[]},defaultActiveId:{},maxTabs:{default:0},emptyMessage:{default:"탭을 추가해주세요."},class:{},contentClass:{},styletype:{default:"default"}},emits:["tabChange","tabClose","tabAdd"],setup(d,{expose:v,emit:f}){const s=d,i=f,t=a.ref(Array.isArray(s.initialTabs)?[...s.initialTabs]:[]),n=a.ref(s.defaultActiveId||(Array.isArray(s.initialTabs)&&s.initialTabs.length>0?s.initialTabs[0]?.id:"")||"");a.watch(()=>s.initialTabs,e=>{if(!e){t.value=[];return}Array.isArray(e)&&e.length>0?(t.value=[...e],!n.value&&e[0]&&(n.value=e[0].id)):Array.isArray(e)?t.value=[]:t.value=[]},{immediate:!0});const b=e=>{if(Array.isArray(t.value)||(t.value=[]),t.value.find(r=>r.id===e.id)){u(e.id);return}if(s.maxTabs>0&&t.value.length>=s.maxTabs){console.warn(`최대 ${s.maxTabs}개의 탭만 열 수 있습니다.`);return}t.value.push({...e,closable:e.closable!==!1}),u(e.id),i("tabAdd",e)},o=e=>{if(!Array.isArray(t.value))return;const l=t.value.findIndex(r=>r.id===e);if(l!==-1){if(t.value.splice(l,1),n.value===e)if(t.value.length>0){const r=Math.min(l,t.value.length-1);n.value=t.value[r]?.id||""}else n.value="";i("tabClose",e)}},u=e=>{if(!Array.isArray(t.value))return;t.value.find(r=>r.id===e)&&(n.value=e)},y=e=>{if(Array.isArray(t.value))return t.value.find(l=>l.id===e)},m=()=>{if(!Array.isArray(t.value))return;t.value.filter(l=>l.closable).forEach(l=>o(l.id))},p=e=>{n.value=e,i("tabChange",e)},A=e=>{o(e)};v({addTab:b,closeTab:o,activateTab:u,findTab:y,closeAllTabs:m});const c=a.computed(()=>Array.isArray(t.value)?t.value:[]),T=a.computed(()=>c.value.length>0),h=a.computed(()=>_.cn("w-full h-full",s.class)),g=a.computed(()=>s.contentClass||"");return(e,l)=>(a.openBlock(),a.createElementBlock("div",{class:a.normalizeClass(h.value)},[T.value?(a.openBlock(),a.createBlock(C.default,{key:0,tabs:c.value,"active-tab-id":n.value,styletype:s.styletype,class:a.normalizeClass(g.value),onTabChange:p,onTabClose:A},a.createSlots({_:2},[a.renderList(c.value,r=>({name:`content-${r.id}`,fn:a.withCtx(x=>[a.renderSlot(e.$slots,`content-${r.id}`,a.normalizeProps(a.guardReactiveProps(x)))])}))]),1032,["tabs","active-tab-id","styletype","class"])):(a.openBlock(),a.createElementBlock("div",k,[a.createElementVNode("div",B,[a.createElementVNode("p",E,a.toDisplayString(d.emptyMessage),1),l[0]||(l[0]=a.createElementVNode("p",{class:"text-muted-foreground/60 text-sm mt-2"}," 메뉴를 클릭하여 탭을 추가하세요. ",-1))])]))],2))}});exports.default=I;
|
|
2
2
|
//# sourceMappingURL=JDynamicTabs.vue.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JDynamicTabs.vue.cjs","sources":["../../../../src/components/organisms/JDynamicTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { ref, computed, watch } from 'vue'\r\nimport JTabs from '@/components/molecules/JTabs.vue'\r\nimport type { \r\n JDynamicTabsProps, \r\n JDynamicTabsEmits, \r\n JDynamicTabsMethods,\r\n DynamicTab \r\n} from '@/types/dynamic-tabs.types'\r\n\r\n/**\r\n * JDynamicTabs - 동적 탭 컴포넌트 (organisms)\r\n * Dynamic Tabs Component\r\n * \r\n * @description\r\n * 사이드 메뉴 클릭으로 탭을 동적으로 추가/제거할 수 있는 탭 컴포넌트입니다.\r\n * \r\n * Features:\r\n * - 탭 동적 추가/제거\r\n * - 중복 탭 방지 (이미 있으면 활성화)\r\n * - 닫기 버튼으로 탭 제거\r\n * - 활성 탭 자동 재설정\r\n * - 최대 탭 개수 제한\r\n * \r\n * @example\r\n * const tabsRef = ref()\r\n * \r\n * const handleMenuClick = (menuItem) => {\r\n * tabsRef.value?.addTab({\r\n * id: menuItem.id,\r\n * label: menuItem.label,\r\n * component: menuItem.component,\r\n * closable: true\r\n * })\r\n * }\r\n */\r\n\r\nconst props = withDefaults(defineProps<JDynamicTabsProps>(), {\r\n initialTabs: () => [],\r\n maxTabs: 0, // 0 = unlimited\r\n emptyMessage: '탭을 추가해주세요.',\r\n styletype: 'default',\r\n})\r\n\r\nconst emit = defineEmits<JDynamicTabsEmits>()\r\n\r\n/**\r\n * 탭 목록 (내부 상태)\r\n * Tabs list (internal state)\r\n */\r\nconst tabs = ref<DynamicTab[]>(Array.isArray(props.initialTabs) ? [...props.initialTabs] : [])\r\n\r\n/**\r\n * 현재 활성화된 탭 ID (내부 상태)\r\n * Current active tab ID (internal state)\r\n */\r\nconst activeTabId = ref<string>(\r\n props.defaultActiveId || (Array.isArray(props.initialTabs) && props.initialTabs.length > 0 ? props.initialTabs[0]?.id : '') || ''\r\n)\r\n\r\n/**\r\n * initialTabs가 변경되면 내부 상태 업데이트\r\n * Update internal state when initialTabs changes\r\n */\r\nwatch(() => props.initialTabs, (newTabs) => {\r\n if (!newTabs) {\r\n tabs.value = []\r\n return\r\n }\r\n \r\n if (Array.isArray(newTabs) && newTabs.length > 0) {\r\n tabs.value = [...newTabs]\r\n if (!activeTabId.value && newTabs[0]) {\r\n activeTabId.value = newTabs[0].id\r\n }\r\n } else if (Array.isArray(newTabs)) {\r\n // 빈 배열인 경우\r\n tabs.value = []\r\n } else {\r\n // 배열이 아닌 경우\r\n tabs.value = []\r\n }\r\n}, { immediate: true })\r\n\r\n/**\r\n * 탭 추가\r\n * Add tab (if exists, activate it; otherwise, add to array and activate)\r\n * \r\n * @param tab - 추가할 탭 정보\r\n */\r\nconst addTab = (tab: DynamicTab) => {\r\n // tabs.value가 배열이 아니면 초기화\r\n if (!Array.isArray(tabs.value)) {\r\n tabs.value = []\r\n }\r\n \r\n // 이미 존재하는 탭인지 확인\r\n const existingTab = tabs.value.find(t => t.id === tab.id)\r\n \r\n if (existingTab) {\r\n // 이미 있으면 해당 탭 활성화\r\n activateTab(tab.id)\r\n return\r\n }\r\n \r\n // 최대 탭 개수 체크\r\n if (props.maxTabs > 0 && tabs.value.length >= props.maxTabs) {\r\n console.warn(`최대 ${props.maxTabs}개의 탭만 열 수 있습니다.`)\r\n return\r\n }\r\n \r\n // 새 탭 추가\r\n tabs.value.push({\r\n ...tab,\r\n closable: tab.closable !== false, // 기본값 true\r\n })\r\n \r\n // 새로 추가된 탭 활성화\r\n activateTab(tab.id)\r\n \r\n // 이벤트 발생\r\n emit('tabAdd', tab)\r\n}\r\n\r\n/**\r\n * 탭 닫기\r\n * Close tab (remove from array and reset active tab)\r\n * \r\n * @param id - 닫을 탭 ID\r\n */\r\nconst closeTab = (id: string) => {\r\n if (!Array.isArray(tabs.value)) {\r\n return\r\n }\r\n \r\n const tabIndex = tabs.value.findIndex(t => t.id === id)\r\n \r\n if (tabIndex === -1) return\r\n \r\n // 탭 제거\r\n tabs.value.splice(tabIndex, 1)\r\n \r\n // 활성 탭 재설정\r\n if (activeTabId.value === id) {\r\n if (tabs.value.length > 0) {\r\n // 이전 탭이 있으면 이전 탭 활성화, 없으면 다음 탭 활성화\r\n const newIndex = Math.min(tabIndex, tabs.value.length - 1)\r\n activeTabId.value = tabs.value[newIndex]?.id || ''\r\n } else {\r\n activeTabId.value = ''\r\n }\r\n }\r\n \r\n // 이벤트 발생\r\n emit('tabClose', id)\r\n}\r\n\r\n/**\r\n * 탭 활성화\r\n * Activate tab\r\n * \r\n * @param id - 활성화할 탭 ID\r\n */\r\nconst activateTab = (id: string) => {\r\n if (!Array.isArray(tabs.value)) {\r\n return\r\n }\r\n const tab = tabs.value.find(t => t.id === id)\r\n if (tab) {\r\n activeTabId.value = id\r\n }\r\n}\r\n\r\n/**\r\n * 특정 탭 찾기\r\n * Find specific tab\r\n * \r\n * @param id - 찾을 탭 ID\r\n */\r\nconst findTab = (id: string): DynamicTab | undefined => {\r\n if (!Array.isArray(tabs.value)) {\r\n return undefined\r\n }\r\n return tabs.value.find(t => t.id === id)\r\n}\r\n\r\n/**\r\n * 모든 탭 닫기 (closable이 true인 탭만)\r\n * Close all tabs (only closable tabs)\r\n */\r\nconst closeAllTabs = () => {\r\n if (!Array.isArray(tabs.value)) {\r\n return\r\n }\r\n const closableTabs = tabs.value.filter(t => t.closable)\r\n closableTabs.forEach(tab => closeTab(tab.id))\r\n}\r\n\r\n/**\r\n * 탭 변경 핸들러\r\n * Tab change handler\r\n */\r\nconst handleTabChange = (id: string) => {\r\n activeTabId.value = id\r\n emit('tabChange', id)\r\n}\r\n\r\n/**\r\n * 탭 닫기 핸들러\r\n * Tab close handler\r\n */\r\nconst handleTabClose = (id: string) => {\r\n closeTab(id)\r\n}\r\n\r\n/**\r\n * 외부에서 호출 가능한 메서드 노출\r\n * Expose methods for external use\r\n */\r\ndefineExpose<JDynamicTabsMethods>({\r\n addTab,\r\n closeTab,\r\n activateTab,\r\n findTab,\r\n closeAllTabs,\r\n})\r\n\r\n/**\r\n * 안전한 tabs 배열\r\n * Safe tabs array\r\n */\r\nconst safeTabs = computed(() => {\r\n return Array.isArray(tabs.value) ? tabs.value : []\r\n})\r\n\r\n/**\r\n * 탭이 있는지 여부\r\n * Whether there are tabs\r\n */\r\nconst hasTabs = computed(() => safeTabs.value.length > 0)\r\n\r\n/**\r\n * 루트 클래스\r\n * Root classes\r\n */\r\nconst rootClasses = computed(() => {\r\n const classes = ['w-full', 'h-full']\r\n \r\n if (props.className) {\r\n classes.push(props.className)\r\n }\r\n \r\n return classes.join(' ')\r\n})\r\n\r\n/**\r\n * 콘텐츠 클래스\r\n * Content classes\r\n */\r\nconst contentClasses = computed(() => {\r\n const classes = []\r\n \r\n if (props.contentClassName) {\r\n classes.push(props.contentClassName)\r\n }\r\n \r\n return classes.join(' ')\r\n})\r\n</script>\r\n\r\n<template>\r\n <div :class=\"rootClasses\">\r\n <!-- 탭이 있을 경우 / When there are tabs -->\r\n <JTabs\r\n v-if=\"hasTabs\"\r\n :tabs=\"safeTabs\"\r\n :active-tab-id=\"activeTabId\"\r\n :styletype=\"props.styletype\"\r\n :class=\"contentClasses\"\r\n @tab-change=\"handleTabChange\"\r\n @tab-close=\"handleTabClose\"\r\n >\r\n <!-- 각 탭 콘텐츠 슬롯 전달 / Forward slots for each tab content -->\r\n <template\r\n v-for=\"tab in safeTabs\"\r\n :key=\"tab.id\"\r\n #[`content-${tab.id}`]=\"slotProps\"\r\n >\r\n <slot :name=\"`content-${tab.id}`\" v-bind=\"slotProps\" />\r\n </template>\r\n </JTabs>\r\n \r\n <!-- 탭이 없을 경우 / When there are no tabs -->\r\n <div\r\n v-else\r\n class=\"flex items-center justify-center h-full w-full\"\r\n >\r\n <div class=\"text-center\">\r\n <p class=\"text-muted-foreground text-lg\">{{ emptyMessage }}</p>\r\n <p class=\"text-muted-foreground/60 text-sm mt-2\">\r\n 메뉴를 클릭하여 탭을 추가하세요.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n"],"names":["props","__props","emit","__emit","tabs","ref","activeTabId","watch","newTabs","addTab","tab","t","activateTab","closeTab","id","tabIndex","newIndex","findTab","closeAllTabs","handleTabChange","handleTabClose","__expose","safeTabs","computed","hasTabs","rootClasses","classes","contentClasses","_createElementBlock","_createBlock","JTabs","_renderList","_withCtx","slotProps","_renderSlot","_ctx","_openBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_cache"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"JDynamicTabs.vue.cjs","sources":["../../../../src/components/organisms/JDynamicTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { ref, computed, watch } from 'vue'\r\nimport JTabs from '@/components/molecules/JTabs.vue'\r\nimport { cn } from '@/lib/utils'\r\nimport type {\r\n JDynamicTabsProps, \r\n JDynamicTabsEmits, \r\n JDynamicTabsMethods,\r\n DynamicTab \r\n} from '@/types/dynamic-tabs.types'\r\n\r\n/**\r\n * JDynamicTabs - 동적 탭 컴포넌트 (organisms)\r\n * Dynamic Tabs Component\r\n * \r\n * @description\r\n * 사이드 메뉴 클릭으로 탭을 동적으로 추가/제거할 수 있는 탭 컴포넌트입니다.\r\n * \r\n * Features:\r\n * - 탭 동적 추가/제거\r\n * - 중복 탭 방지 (이미 있으면 활성화)\r\n * - 닫기 버튼으로 탭 제거\r\n * - 활성 탭 자동 재설정\r\n * - 최대 탭 개수 제한\r\n * \r\n * @example\r\n * const tabsRef = ref()\r\n * \r\n * const handleMenuClick = (menuItem) => {\r\n * tabsRef.value?.addTab({\r\n * id: menuItem.id,\r\n * label: menuItem.label,\r\n * component: menuItem.component,\r\n * closable: true\r\n * })\r\n * }\r\n */\r\n\r\nconst props = withDefaults(defineProps<JDynamicTabsProps>(), {\r\n initialTabs: () => [],\r\n maxTabs: 0, // 0 = unlimited\r\n emptyMessage: '탭을 추가해주세요.',\r\n styletype: 'default',\r\n})\r\n\r\nconst emit = defineEmits<JDynamicTabsEmits>()\r\n\r\n/**\r\n * 탭 목록 (내부 상태)\r\n * Tabs list (internal state)\r\n */\r\nconst tabs = ref<DynamicTab[]>(Array.isArray(props.initialTabs) ? [...props.initialTabs] : [])\r\n\r\n/**\r\n * 현재 활성화된 탭 ID (내부 상태)\r\n * Current active tab ID (internal state)\r\n */\r\nconst activeTabId = ref<string>(\r\n props.defaultActiveId || (Array.isArray(props.initialTabs) && props.initialTabs.length > 0 ? props.initialTabs[0]?.id : '') || ''\r\n)\r\n\r\n/**\r\n * initialTabs가 변경되면 내부 상태 업데이트\r\n * Update internal state when initialTabs changes\r\n */\r\nwatch(() => props.initialTabs, (newTabs) => {\r\n if (!newTabs) {\r\n tabs.value = []\r\n return\r\n }\r\n \r\n if (Array.isArray(newTabs) && newTabs.length > 0) {\r\n tabs.value = [...newTabs]\r\n if (!activeTabId.value && newTabs[0]) {\r\n activeTabId.value = newTabs[0].id\r\n }\r\n } else if (Array.isArray(newTabs)) {\r\n // 빈 배열인 경우\r\n tabs.value = []\r\n } else {\r\n // 배열이 아닌 경우\r\n tabs.value = []\r\n }\r\n}, { immediate: true })\r\n\r\n/**\r\n * 탭 추가\r\n * Add tab (if exists, activate it; otherwise, add to array and activate)\r\n * \r\n * @param tab - 추가할 탭 정보\r\n */\r\nconst addTab = (tab: DynamicTab) => {\r\n // tabs.value가 배열이 아니면 초기화\r\n if (!Array.isArray(tabs.value)) {\r\n tabs.value = []\r\n }\r\n \r\n // 이미 존재하는 탭인지 확인\r\n const existingTab = tabs.value.find(t => t.id === tab.id)\r\n \r\n if (existingTab) {\r\n // 이미 있으면 해당 탭 활성화\r\n activateTab(tab.id)\r\n return\r\n }\r\n \r\n // 최대 탭 개수 체크\r\n if (props.maxTabs > 0 && tabs.value.length >= props.maxTabs) {\r\n console.warn(`최대 ${props.maxTabs}개의 탭만 열 수 있습니다.`)\r\n return\r\n }\r\n \r\n // 새 탭 추가\r\n tabs.value.push({\r\n ...tab,\r\n closable: tab.closable !== false, // 기본값 true\r\n })\r\n \r\n // 새로 추가된 탭 활성화\r\n activateTab(tab.id)\r\n \r\n // 이벤트 발생\r\n emit('tabAdd', tab)\r\n}\r\n\r\n/**\r\n * 탭 닫기\r\n * Close tab (remove from array and reset active tab)\r\n * \r\n * @param id - 닫을 탭 ID\r\n */\r\nconst closeTab = (id: string) => {\r\n if (!Array.isArray(tabs.value)) {\r\n return\r\n }\r\n \r\n const tabIndex = tabs.value.findIndex(t => t.id === id)\r\n \r\n if (tabIndex === -1) return\r\n \r\n // 탭 제거\r\n tabs.value.splice(tabIndex, 1)\r\n \r\n // 활성 탭 재설정\r\n if (activeTabId.value === id) {\r\n if (tabs.value.length > 0) {\r\n // 이전 탭이 있으면 이전 탭 활성화, 없으면 다음 탭 활성화\r\n const newIndex = Math.min(tabIndex, tabs.value.length - 1)\r\n activeTabId.value = tabs.value[newIndex]?.id || ''\r\n } else {\r\n activeTabId.value = ''\r\n }\r\n }\r\n \r\n // 이벤트 발생\r\n emit('tabClose', id)\r\n}\r\n\r\n/**\r\n * 탭 활성화\r\n * Activate tab\r\n * \r\n * @param id - 활성화할 탭 ID\r\n */\r\nconst activateTab = (id: string) => {\r\n if (!Array.isArray(tabs.value)) {\r\n return\r\n }\r\n const tab = tabs.value.find(t => t.id === id)\r\n if (tab) {\r\n activeTabId.value = id\r\n }\r\n}\r\n\r\n/**\r\n * 특정 탭 찾기\r\n * Find specific tab\r\n * \r\n * @param id - 찾을 탭 ID\r\n */\r\nconst findTab = (id: string): DynamicTab | undefined => {\r\n if (!Array.isArray(tabs.value)) {\r\n return undefined\r\n }\r\n return tabs.value.find(t => t.id === id)\r\n}\r\n\r\n/**\r\n * 모든 탭 닫기 (closable이 true인 탭만)\r\n * Close all tabs (only closable tabs)\r\n */\r\nconst closeAllTabs = () => {\r\n if (!Array.isArray(tabs.value)) {\r\n return\r\n }\r\n const closableTabs = tabs.value.filter(t => t.closable)\r\n closableTabs.forEach(tab => closeTab(tab.id))\r\n}\r\n\r\n/**\r\n * 탭 변경 핸들러\r\n * Tab change handler\r\n */\r\nconst handleTabChange = (id: string) => {\r\n activeTabId.value = id\r\n emit('tabChange', id)\r\n}\r\n\r\n/**\r\n * 탭 닫기 핸들러\r\n * Tab close handler\r\n */\r\nconst handleTabClose = (id: string) => {\r\n closeTab(id)\r\n}\r\n\r\n/**\r\n * 외부에서 호출 가능한 메서드 노출\r\n * Expose methods for external use\r\n */\r\ndefineExpose<JDynamicTabsMethods>({\r\n addTab,\r\n closeTab,\r\n activateTab,\r\n findTab,\r\n closeAllTabs,\r\n})\r\n\r\n/**\r\n * 안전한 tabs 배열\r\n * Safe tabs array\r\n */\r\nconst safeTabs = computed(() => {\r\n return Array.isArray(tabs.value) ? tabs.value : []\r\n})\r\n\r\n/**\r\n * 탭이 있는지 여부\r\n * Whether there are tabs\r\n */\r\nconst hasTabs = computed(() => safeTabs.value.length > 0)\r\n\r\n/**\r\n * 루트 클래스\r\n * Root classes\r\n */\r\nconst rootClasses = computed(() => {\r\n return cn('w-full h-full', props.class)\r\n})\r\n\r\n/**\r\n * 콘텐츠 클래스\r\n * Content classes\r\n */\r\nconst contentClasses = computed(() => {\r\n return props.contentClass || ''\r\n})\r\n</script>\r\n\r\n<template>\r\n <div :class=\"rootClasses\">\r\n <!-- 탭이 있을 경우 / When there are tabs -->\r\n <JTabs\r\n v-if=\"hasTabs\"\r\n :tabs=\"safeTabs\"\r\n :active-tab-id=\"activeTabId\"\r\n :styletype=\"props.styletype\"\r\n :class=\"contentClasses\"\r\n @tab-change=\"handleTabChange\"\r\n @tab-close=\"handleTabClose\"\r\n >\r\n <!-- 각 탭 콘텐츠 슬롯 전달 / Forward slots for each tab content -->\r\n <template\r\n v-for=\"tab in safeTabs\"\r\n :key=\"tab.id\"\r\n #[`content-${tab.id}`]=\"slotProps\"\r\n >\r\n <slot :name=\"`content-${tab.id}`\" v-bind=\"slotProps\" />\r\n </template>\r\n </JTabs>\r\n \r\n <!-- 탭이 없을 경우 / When there are no tabs -->\r\n <div\r\n v-else\r\n class=\"flex items-center justify-center h-full w-full\"\r\n >\r\n <div class=\"text-center\">\r\n <p class=\"text-muted-foreground text-lg\">{{ emptyMessage }}</p>\r\n <p class=\"text-muted-foreground/60 text-sm mt-2\">\r\n 메뉴를 클릭하여 탭을 추가하세요.\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n"],"names":["props","__props","emit","__emit","tabs","ref","activeTabId","watch","newTabs","addTab","tab","t","activateTab","closeTab","id","tabIndex","newIndex","findTab","closeAllTabs","handleTabChange","handleTabClose","__expose","safeTabs","computed","hasTabs","rootClasses","cn","contentClasses","_createElementBlock","_createBlock","JTabs","_renderList","_withCtx","slotProps","_renderSlot","_ctx","_openBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_cache"],"mappings":"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"}
|
|
@@ -1,116 +1,111 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import
|
|
3
|
-
|
|
1
|
+
import { defineComponent as B, ref as b, watch as E, computed as i, createElementBlock as y, openBlock as d, normalizeClass as m, createBlock as M, createSlots as S, renderList as z, withCtx as D, renderSlot as J, normalizeProps as P, guardReactiveProps as j, createElementVNode as v, toDisplayString as L } from "vue";
|
|
2
|
+
import N from "../molecules/JTabs.vue.js";
|
|
3
|
+
import { cn as R } from "../../lib/utils.js";
|
|
4
|
+
const V = {
|
|
4
5
|
key: 1,
|
|
5
6
|
class: "flex items-center justify-center h-full w-full"
|
|
6
|
-
},
|
|
7
|
+
}, q = { class: "text-center" }, w = { class: "text-muted-foreground text-lg" }, K = /* @__PURE__ */ B({
|
|
7
8
|
__name: "JDynamicTabs",
|
|
8
9
|
props: {
|
|
9
10
|
initialTabs: { default: () => [] },
|
|
10
11
|
defaultActiveId: {},
|
|
11
12
|
maxTabs: { default: 0 },
|
|
12
13
|
emptyMessage: { default: "탭을 추가해주세요." },
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
class: {},
|
|
15
|
+
contentClass: {},
|
|
15
16
|
styletype: { default: "default" }
|
|
16
17
|
},
|
|
17
18
|
emits: ["tabChange", "tabClose", "tabAdd"],
|
|
18
|
-
setup(
|
|
19
|
-
const
|
|
20
|
-
|
|
19
|
+
setup(f, { expose: A, emit: p }) {
|
|
20
|
+
const s = f, n = p, a = b(Array.isArray(s.initialTabs) ? [...s.initialTabs] : []), r = b(
|
|
21
|
+
s.defaultActiveId || (Array.isArray(s.initialTabs) && s.initialTabs.length > 0 ? s.initialTabs[0]?.id : "") || ""
|
|
21
22
|
);
|
|
22
|
-
|
|
23
|
+
E(() => s.initialTabs, (e) => {
|
|
23
24
|
if (!e) {
|
|
24
25
|
a.value = [];
|
|
25
26
|
return;
|
|
26
27
|
}
|
|
27
|
-
Array.isArray(e) && e.length > 0 ? (a.value = [...e], !
|
|
28
|
+
Array.isArray(e) && e.length > 0 ? (a.value = [...e], !r.value && e[0] && (r.value = e[0].id)) : Array.isArray(e) ? a.value = [] : a.value = [];
|
|
28
29
|
}, { immediate: !0 });
|
|
29
|
-
const
|
|
30
|
+
const T = (e) => {
|
|
30
31
|
if (Array.isArray(a.value) || (a.value = []), a.value.find((l) => l.id === e.id)) {
|
|
31
32
|
u(e.id);
|
|
32
33
|
return;
|
|
33
34
|
}
|
|
34
|
-
if (
|
|
35
|
-
console.warn(`최대 ${
|
|
35
|
+
if (s.maxTabs > 0 && a.value.length >= s.maxTabs) {
|
|
36
|
+
console.warn(`최대 ${s.maxTabs}개의 탭만 열 수 있습니다.`);
|
|
36
37
|
return;
|
|
37
38
|
}
|
|
38
39
|
a.value.push({
|
|
39
40
|
...e,
|
|
40
41
|
closable: e.closable !== !1
|
|
41
42
|
// 기본값 true
|
|
42
|
-
}), u(e.id),
|
|
43
|
+
}), u(e.id), n("tabAdd", e);
|
|
43
44
|
}, o = (e) => {
|
|
44
45
|
if (!Array.isArray(a.value))
|
|
45
46
|
return;
|
|
46
|
-
const
|
|
47
|
-
if (
|
|
48
|
-
if (a.value.splice(
|
|
47
|
+
const t = a.value.findIndex((l) => l.id === e);
|
|
48
|
+
if (t !== -1) {
|
|
49
|
+
if (a.value.splice(t, 1), r.value === e)
|
|
49
50
|
if (a.value.length > 0) {
|
|
50
|
-
const l = Math.min(
|
|
51
|
-
|
|
51
|
+
const l = Math.min(t, a.value.length - 1);
|
|
52
|
+
r.value = a.value[l]?.id || "";
|
|
52
53
|
} else
|
|
53
|
-
|
|
54
|
-
|
|
54
|
+
r.value = "";
|
|
55
|
+
n("tabClose", e);
|
|
55
56
|
}
|
|
56
57
|
}, u = (e) => {
|
|
57
58
|
if (!Array.isArray(a.value))
|
|
58
59
|
return;
|
|
59
|
-
a.value.find((l) => l.id === e) && (
|
|
60
|
-
},
|
|
60
|
+
a.value.find((l) => l.id === e) && (r.value = e);
|
|
61
|
+
}, h = (e) => {
|
|
61
62
|
if (Array.isArray(a.value))
|
|
62
|
-
return a.value.find((
|
|
63
|
+
return a.value.find((t) => t.id === e);
|
|
63
64
|
}, g = () => {
|
|
64
65
|
if (!Array.isArray(a.value))
|
|
65
66
|
return;
|
|
66
|
-
a.value.filter((
|
|
67
|
+
a.value.filter((t) => t.closable).forEach((t) => o(t.id));
|
|
67
68
|
}, x = (e) => {
|
|
68
|
-
|
|
69
|
+
r.value = e, n("tabChange", e);
|
|
69
70
|
}, C = (e) => {
|
|
70
71
|
o(e);
|
|
71
72
|
};
|
|
72
|
-
|
|
73
|
-
addTab:
|
|
73
|
+
A({
|
|
74
|
+
addTab: T,
|
|
74
75
|
closeTab: o,
|
|
75
76
|
activateTab: u,
|
|
76
|
-
findTab:
|
|
77
|
+
findTab: h,
|
|
77
78
|
closeAllTabs: g
|
|
78
79
|
});
|
|
79
|
-
const c =
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}), I = n(() => {
|
|
83
|
-
const e = [];
|
|
84
|
-
return t.contentClassName && e.push(t.contentClassName), e.join(" ");
|
|
85
|
-
});
|
|
86
|
-
return (e, s) => (d(), b("div", {
|
|
87
|
-
class: y(N.value)
|
|
80
|
+
const c = i(() => Array.isArray(a.value) ? a.value : []), _ = i(() => c.value.length > 0), I = i(() => R("w-full h-full", s.class)), k = i(() => s.contentClass || "");
|
|
81
|
+
return (e, t) => (d(), y("div", {
|
|
82
|
+
class: m(I.value)
|
|
88
83
|
}, [
|
|
89
|
-
_.value ? (d(),
|
|
84
|
+
_.value ? (d(), M(N, {
|
|
90
85
|
key: 0,
|
|
91
86
|
tabs: c.value,
|
|
92
|
-
"active-tab-id":
|
|
93
|
-
styletype:
|
|
94
|
-
class:
|
|
87
|
+
"active-tab-id": r.value,
|
|
88
|
+
styletype: s.styletype,
|
|
89
|
+
class: m(k.value),
|
|
95
90
|
onTabChange: x,
|
|
96
91
|
onTabClose: C
|
|
97
|
-
},
|
|
98
|
-
|
|
92
|
+
}, S({ _: 2 }, [
|
|
93
|
+
z(c.value, (l) => ({
|
|
99
94
|
name: `content-${l.id}`,
|
|
100
|
-
fn:
|
|
101
|
-
|
|
95
|
+
fn: D(($) => [
|
|
96
|
+
J(e.$slots, `content-${l.id}`, P(j($)))
|
|
102
97
|
])
|
|
103
98
|
}))
|
|
104
|
-
]), 1032, ["tabs", "active-tab-id", "styletype", "class"])) : (d(),
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
99
|
+
]), 1032, ["tabs", "active-tab-id", "styletype", "class"])) : (d(), y("div", V, [
|
|
100
|
+
v("div", q, [
|
|
101
|
+
v("p", w, L(f.emptyMessage), 1),
|
|
102
|
+
t[0] || (t[0] = v("p", { class: "text-muted-foreground/60 text-sm mt-2" }, " 메뉴를 클릭하여 탭을 추가하세요. ", -1))
|
|
108
103
|
])
|
|
109
104
|
]))
|
|
110
105
|
], 2));
|
|
111
106
|
}
|
|
112
107
|
});
|
|
113
108
|
export {
|
|
114
|
-
|
|
109
|
+
K as default
|
|
115
110
|
};
|
|
116
111
|
//# sourceMappingURL=JDynamicTabs.vue.js.map
|