@j-solution/components 2.0.5 → 2.0.6
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 -7
- package/assets/jwms-portal-frontend-Cu-V5XAR.css +1 -0
- package/assets/styles/j-components.css +1 -1
- package/assets/styles/main.css +22 -0
- package/components/atoms/JSplitter.vue.cjs +1 -1
- package/components/atoms/JSplitter.vue.js +2 -2
- package/components/atoms/JSplitter.vue2.cjs +1 -1
- package/components/atoms/JSplitter.vue2.cjs.map +1 -1
- package/components/atoms/JSplitter.vue2.js +30 -28
- package/components/atoms/JSplitter.vue2.js.map +1 -1
- package/components/molecules/JFormField.vue.cjs +1 -1
- package/components/molecules/JFormField.vue.js +2 -2
- package/components/molecules/JFormField.vue2.cjs +1 -1
- package/components/molecules/JFormField.vue2.cjs.map +1 -1
- package/components/molecules/JFormField.vue2.js +80 -79
- package/components/molecules/JFormField.vue2.js.map +1 -1
- package/components/templates/JLayout.vue.cjs +6 -1
- package/components/templates/JLayout.vue.cjs.map +1 -1
- package/components/templates/JLayout.vue.js +10 -43
- package/components/templates/JLayout.vue.js.map +1 -1
- package/components/templates/JLayout.vue2.cjs +1 -1
- package/components/templates/JLayout.vue2.cjs.map +1 -1
- package/components/templates/JLayout.vue2.js +71 -2
- package/components/templates/JLayout.vue2.js.map +1 -1
- package/components/templates/JLayoutAdvanced.vue.cjs +1 -1
- package/components/templates/JLayoutAdvanced.vue.js +12 -12
- package/components/templates/JLayoutSimple.vue.cjs +1 -1
- package/components/templates/JLayoutSimple.vue.cjs.map +1 -1
- package/components/templates/JLayoutSimple.vue.js +32 -22
- package/components/templates/JLayoutSimple.vue.js.map +1 -1
- package/index.cjs +1 -1
- package/index.js +30 -28
- package/package.json +1 -1
- package/types/index.d.ts +22 -8
- package/assets/jwms-portal-frontend-CrtMPGot.css +0 -1
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as R, ref as J, computed as s, createElementBlock as F, openBlock as i, normalizeClass as c, unref as o, createVNode as h, withCtx as a, normalizeStyle as I, createTextVNode as v, createCommentVNode as y, toDisplayString as g, createBlock as n, resolveDynamicComponent as z, mergeProps as H } from "vue";
|
|
2
2
|
import "../shadcn/index.js";
|
|
3
3
|
import "lucide-vue-next";
|
|
4
4
|
/* empty css */
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import { cn as
|
|
5
|
+
import T from "../atoms/JInput.vue.js";
|
|
6
|
+
import Y from "../atoms/JTextarea.vue.js";
|
|
7
|
+
import G from "../atoms/JCheckbox.vue.js";
|
|
8
|
+
import K from "../atoms/JCombo.vue.js";
|
|
9
|
+
import Q from "../atoms/JSearchCombo.vue.js";
|
|
10
|
+
import X from "../atoms/JRadio.vue.js";
|
|
11
|
+
import Z from "../atoms/JSwitch.vue.js";
|
|
12
|
+
import ee from "../atoms/JDatepicker.vue.js";
|
|
13
|
+
import te from "../atoms/JEditor.vue.js";
|
|
14
|
+
import { cn as le } from "../../lib/utils.js";
|
|
15
15
|
import "../shadcn/badge-variants.js";
|
|
16
16
|
import "@vueuse/core";
|
|
17
17
|
import "reka-ui";
|
|
@@ -25,19 +25,20 @@ import "ag-grid-vue3";
|
|
|
25
25
|
import "ag-grid-community";
|
|
26
26
|
import "ag-grid-enterprise";
|
|
27
27
|
/* empty css */
|
|
28
|
+
import { useBreakpoint as oe } from "../../composables/useBreakpoint.js";
|
|
28
29
|
/* empty css */
|
|
29
30
|
/* empty css */
|
|
30
31
|
import "vue-sonner";
|
|
31
|
-
import
|
|
32
|
-
import
|
|
33
|
-
import
|
|
34
|
-
import
|
|
35
|
-
import
|
|
36
|
-
import
|
|
37
|
-
const
|
|
32
|
+
import x from "../shadcn/FieldGroup.vue.js";
|
|
33
|
+
import E from "../shadcn/Field.vue.js";
|
|
34
|
+
import M from "../shadcn/FieldLabel.vue.js";
|
|
35
|
+
import L from "../shadcn/FieldContent.vue.js";
|
|
36
|
+
import ie from "../shadcn/FieldDescription.vue.js";
|
|
37
|
+
import ae from "../shadcn/FieldError.vue.js";
|
|
38
|
+
const re = {
|
|
38
39
|
key: 0,
|
|
39
40
|
class: "text-destructive ml-0.5"
|
|
40
|
-
},
|
|
41
|
+
}, Ne = /* @__PURE__ */ R({
|
|
41
42
|
__name: "JFormField",
|
|
42
43
|
props: {
|
|
43
44
|
class: {},
|
|
@@ -65,8 +66,8 @@ const ie = {
|
|
|
65
66
|
fillHeight: { type: Boolean }
|
|
66
67
|
},
|
|
67
68
|
emits: ["update:modelValue", "change", "focus", "blur", "save"],
|
|
68
|
-
setup(l, { expose:
|
|
69
|
-
const
|
|
69
|
+
setup(l, { expose: j, emit: A }) {
|
|
70
|
+
const O = [
|
|
70
71
|
"class",
|
|
71
72
|
"label",
|
|
72
73
|
"description",
|
|
@@ -79,12 +80,12 @@ const ie = {
|
|
|
79
80
|
"radioDirection",
|
|
80
81
|
"editorHeight",
|
|
81
82
|
"fillHeight"
|
|
82
|
-
], e = l, m =
|
|
83
|
+
], e = l, m = A, d = J(""), b = s(() => e.errorMsg || d.value), k = s(() => {
|
|
83
84
|
const t = {}, r = e;
|
|
84
|
-
for (const
|
|
85
|
-
|
|
85
|
+
for (const p in r)
|
|
86
|
+
O.includes(p) || (t[p] = r[p]);
|
|
86
87
|
if (e.inputType && e.type === "input" && (t.type = e.inputType, delete t.inputType, !e.placeholder)) {
|
|
87
|
-
const
|
|
88
|
+
const p = {
|
|
88
89
|
text: "텍스트를 입력하세요",
|
|
89
90
|
email: "이메일을 입력하세요",
|
|
90
91
|
password: "비밀번호를 입력하세요",
|
|
@@ -98,24 +99,24 @@ const ie = {
|
|
|
98
99
|
month: "월을 선택하세요",
|
|
99
100
|
week: "주를 선택하세요"
|
|
100
101
|
};
|
|
101
|
-
t.placeholder =
|
|
102
|
+
t.placeholder = p[e.inputType] || "입력하세요";
|
|
102
103
|
}
|
|
103
104
|
return e.radioDirection && e.type === "radio" && (t.styletype = e.radioDirection, delete t.radioDirection), e.type === "editor" && (t.height = e.fillHeight ? "100%" : e.editorHeight ?? "300px", delete t.editorHeight, delete t.fillHeight), t;
|
|
104
|
-
}),
|
|
105
|
+
}), _ = (t) => {
|
|
105
106
|
if (!e.required) return;
|
|
106
107
|
d.value = "";
|
|
107
108
|
const r = t !== void 0 ? t : e.modelValue;
|
|
108
109
|
e.type === "checkbox" || e.type === "switch" ? r !== "Y" && (d.value = "필수 항목입니다.") : (r == null || r === "") && (d.value = "필수 입력 항목입니다.");
|
|
109
110
|
}, P = s(() => !(e.modelValue !== null && e.modelValue !== void 0 && e.modelValue !== "")), $ = (t) => {
|
|
110
|
-
m("update:modelValue", t),
|
|
111
|
+
m("update:modelValue", t), _(t);
|
|
111
112
|
}, w = (t) => {
|
|
112
|
-
m("change", t),
|
|
113
|
+
m("change", t), _(t);
|
|
113
114
|
}, S = (t) => {
|
|
114
115
|
m("save", t);
|
|
115
116
|
}, C = (t) => {
|
|
116
117
|
m("focus", t);
|
|
117
118
|
}, V = (t) => {
|
|
118
|
-
P.value &&
|
|
119
|
+
P.value && _(), m("blur", t);
|
|
119
120
|
}, U = s(() => {
|
|
120
121
|
const t = {
|
|
121
122
|
left: "justify-start",
|
|
@@ -125,8 +126,8 @@ const ie = {
|
|
|
125
126
|
right: "justify-end"
|
|
126
127
|
// 레이블 영역의 오른쪽에 레이블 위치 (input과 가까이)
|
|
127
128
|
}, r = { left: "text-left", middle: "text-center", right: "text-right" };
|
|
128
|
-
return
|
|
129
|
-
}),
|
|
129
|
+
return f.value === "horizontal" ? t[e.labelAlign] : r[e.labelAlign];
|
|
130
|
+
}), W = s(() => {
|
|
130
131
|
switch (e.styleType) {
|
|
131
132
|
case "md":
|
|
132
133
|
return "form-density-md";
|
|
@@ -138,92 +139,92 @@ const ie = {
|
|
|
138
139
|
}), D = s(() => {
|
|
139
140
|
const t = "h-[var(--ctl-h)] leading-[var(--ctl-h)]";
|
|
140
141
|
return e.type === "datepicker" ? `${t} max-w-xs` : e.type === "editor" ? e.fillHeight ? "h-full w-full" : "" : e.type === "radio" && e.radioDirection === "vertical" ? "" : t;
|
|
141
|
-
}),
|
|
142
|
-
input:
|
|
143
|
-
textarea:
|
|
144
|
-
checkbox:
|
|
145
|
-
switch:
|
|
146
|
-
combo:
|
|
147
|
-
radio:
|
|
148
|
-
searchCombo:
|
|
149
|
-
datepicker:
|
|
150
|
-
editor:
|
|
151
|
-
}, B = s(() =>
|
|
152
|
-
return
|
|
142
|
+
}), q = {
|
|
143
|
+
input: T,
|
|
144
|
+
textarea: Y,
|
|
145
|
+
checkbox: G,
|
|
146
|
+
switch: Z,
|
|
147
|
+
combo: K,
|
|
148
|
+
radio: X,
|
|
149
|
+
searchCombo: Q,
|
|
150
|
+
datepicker: ee,
|
|
151
|
+
editor: te
|
|
152
|
+
}, B = s(() => q[e.type] || T), u = s(() => e.fillHeight && e.type === "editor"), { isDesktop: N } = oe(), f = s(() => e.orientation === "responsive" ? N.value ? "horizontal" : "vertical" : e.orientation);
|
|
153
|
+
return j({
|
|
153
154
|
clearError: () => {
|
|
154
155
|
d.value = "";
|
|
155
156
|
}
|
|
156
|
-
}), (t, r) => (
|
|
157
|
-
class: c(
|
|
157
|
+
}), (t, r) => (i(), F("div", {
|
|
158
|
+
class: c(o(le)(u.value ? "flex-1 flex flex-col min-h-0" : l.type === "editor" ? "flex-1 min-w-0" : "space-y-2 flex-1 min-w-0", W.value, e.class))
|
|
158
159
|
}, [
|
|
159
|
-
|
|
160
|
-
class: c(
|
|
160
|
+
h(o(x), {
|
|
161
|
+
class: c(u.value ? "flex-1 flex flex-col min-h-0" : "")
|
|
161
162
|
}, {
|
|
162
163
|
default: a(() => [
|
|
163
|
-
|
|
164
|
+
h(o(E), {
|
|
164
165
|
class: c([
|
|
165
|
-
|
|
166
|
-
|
|
166
|
+
f.value === "horizontal" ? "grid grid-cols-[var(--label-w,8rem)_1fr] items-start space-y-0 gap-2" : l.type === "editor" ? "space-y-0 gap-0" : "space-y-1 gap-1",
|
|
167
|
+
u.value ? "flex-1 min-h-0" : ""
|
|
167
168
|
]),
|
|
168
|
-
style:
|
|
169
|
+
style: I(f.value === "horizontal" && l.labelWidth ? `--label-w:${l.labelWidth};` : "")
|
|
169
170
|
}, {
|
|
170
171
|
default: a(() => [
|
|
171
|
-
|
|
172
|
+
h(o(M), {
|
|
172
173
|
for: l.id,
|
|
173
174
|
class: c([
|
|
174
175
|
"text-xs font-medium",
|
|
175
176
|
// 컴팩트 디자인 + 라벨-값 weight 차별화
|
|
176
|
-
|
|
177
|
+
f.value === "horizontal" ? l.type === "editor" ? "flex items-start pt-1 w-full" : "flex items-center h-[var(--ctl-h)] w-full" : "flex items-center",
|
|
177
178
|
U.value
|
|
178
179
|
])
|
|
179
180
|
}, {
|
|
180
181
|
default: a(() => [
|
|
181
|
-
|
|
182
|
-
l.required ? (
|
|
182
|
+
v(g(l.label) + " ", 1),
|
|
183
|
+
l.required ? (i(), F("span", re, "*")) : y("", !0)
|
|
183
184
|
]),
|
|
184
185
|
_: 1
|
|
185
186
|
}, 8, ["for", "class"]),
|
|
186
|
-
|
|
187
|
+
h(o(L), {
|
|
187
188
|
class: c([
|
|
188
|
-
|
|
189
|
-
|
|
189
|
+
f.value === "horizontal" ? "min-h-[var(--ctl-h)] flex flex-col justify-start gap-0.5 mt-0" : "space-y-2 gap-0",
|
|
190
|
+
u.value ? "flex-1 flex flex-col min-h-0" : ""
|
|
190
191
|
])
|
|
191
192
|
}, {
|
|
192
193
|
default: a(() => [
|
|
193
|
-
l.type === "checkbox" || l.type === "switch" ? (
|
|
194
|
+
l.type === "checkbox" || l.type === "switch" ? (i(), n(o(x), {
|
|
194
195
|
key: 0,
|
|
195
196
|
"data-slot": "checkbox-group"
|
|
196
197
|
}, {
|
|
197
198
|
default: a(() => [
|
|
198
|
-
|
|
199
|
+
h(o(E), {
|
|
199
200
|
orientation: "horizontal",
|
|
200
201
|
class: "flex gap-2 space-y-0 h-[var(--ctl-h)] leading-[var(--ctl-h)] items-center"
|
|
201
202
|
}, {
|
|
202
203
|
default: a(() => [
|
|
203
|
-
(
|
|
204
|
+
(i(), n(z(B.value), H(k.value, {
|
|
204
205
|
"onUpdate:modelValue": $,
|
|
205
206
|
onChange: w,
|
|
206
207
|
onFocus: C,
|
|
207
208
|
onBlur: V
|
|
208
209
|
}), null, 16)),
|
|
209
|
-
l.inlineLabel ? (
|
|
210
|
+
l.inlineLabel ? (i(), n(o(M), {
|
|
210
211
|
key: 0,
|
|
211
212
|
for: l.id,
|
|
212
213
|
class: "text-xs font-normal m-0 h-[var(--ctl-h)] leading-[var(--ctl-h)]"
|
|
213
214
|
}, {
|
|
214
215
|
default: a(() => [
|
|
215
|
-
|
|
216
|
+
v(g(l.inlineLabel), 1)
|
|
216
217
|
]),
|
|
217
218
|
_: 1
|
|
218
|
-
}, 8, ["for"])) :
|
|
219
|
+
}, 8, ["for"])) : y("", !0)
|
|
219
220
|
]),
|
|
220
221
|
_: 1
|
|
221
222
|
})
|
|
222
223
|
]),
|
|
223
224
|
_: 1
|
|
224
|
-
})) : l.type === "radio" ? (
|
|
225
|
+
})) : l.type === "radio" ? (i(), n(o(x), { key: 1 }, {
|
|
225
226
|
default: a(() => [
|
|
226
|
-
(
|
|
227
|
+
(i(), n(z(B.value), H(k.value, {
|
|
227
228
|
"onUpdate:modelValue": $,
|
|
228
229
|
onChange: w,
|
|
229
230
|
onFocus: C,
|
|
@@ -232,12 +233,12 @@ const ie = {
|
|
|
232
233
|
}), null, 16, ["class"]))
|
|
233
234
|
]),
|
|
234
235
|
_: 1
|
|
235
|
-
})) : (
|
|
236
|
+
})) : (i(), n(o(x), {
|
|
236
237
|
key: 2,
|
|
237
|
-
class: c(
|
|
238
|
+
class: c(u.value ? "flex-1 flex flex-col min-h-0" : "")
|
|
238
239
|
}, {
|
|
239
240
|
default: a(() => [
|
|
240
|
-
(
|
|
241
|
+
(i(), n(z(B.value), H(k.value, {
|
|
241
242
|
"onUpdate:modelValue": $,
|
|
242
243
|
onChange: w,
|
|
243
244
|
onFocus: C,
|
|
@@ -248,23 +249,23 @@ const ie = {
|
|
|
248
249
|
]),
|
|
249
250
|
_: 1
|
|
250
251
|
}, 8, ["class"])),
|
|
251
|
-
l.description ||
|
|
252
|
+
l.description || b.value ? (i(), n(o(L), { key: 3 }, {
|
|
252
253
|
default: a(() => [
|
|
253
|
-
l.description ? (
|
|
254
|
+
l.description ? (i(), n(o(ie), { key: 0 }, {
|
|
254
255
|
default: a(() => [
|
|
255
|
-
|
|
256
|
+
v(g(l.description), 1)
|
|
256
257
|
]),
|
|
257
258
|
_: 1
|
|
258
|
-
})) :
|
|
259
|
-
|
|
259
|
+
})) : y("", !0),
|
|
260
|
+
b.value ? (i(), n(o(ae), { key: 1 }, {
|
|
260
261
|
default: a(() => [
|
|
261
|
-
|
|
262
|
+
v(g(b.value), 1)
|
|
262
263
|
]),
|
|
263
264
|
_: 1
|
|
264
|
-
})) :
|
|
265
|
+
})) : y("", !0)
|
|
265
266
|
]),
|
|
266
267
|
_: 1
|
|
267
|
-
})) :
|
|
268
|
+
})) : y("", !0)
|
|
268
269
|
]),
|
|
269
270
|
_: 1
|
|
270
271
|
}, 8, ["class"])
|
|
@@ -278,6 +279,6 @@ const ie = {
|
|
|
278
279
|
}
|
|
279
280
|
});
|
|
280
281
|
export {
|
|
281
|
-
|
|
282
|
+
Ne as default
|
|
282
283
|
};
|
|
283
284
|
//# sourceMappingURL=JFormField.vue2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JFormField.vue2.js","sources":["../../../../src/components/molecules/JFormField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Field, FieldContent, FieldLabel, FieldDescription, FieldError, FieldGroup } from '@/components/shadcn'\nimport { JInput, JTextarea, JCheckbox, JSwitch, JCombo, JRadio, JSearchCombo, JDatepicker, JEditor } from '@/components/atoms'\nimport { cn } from '@/lib/utils'\n\n// 컴포넌트 타입 정의\ntype ComponentType = 'input' | 'textarea' | 'checkbox' | 'switch' | 'combo' | 'radio' | 'searchCombo' | 'datepicker' | 'editor'\n\n// FormField 자체의 props (레이아웃 관련)\nconst FORM_FIELD_PROPS = [\n 'class',\n 'label',\n 'description',\n 'errorMsg',\n 'type',\n 'inlineLabel',\n 'orientation',\n 'labelAlign',\n 'labelWidth',\n 'radioDirection',\n 'editorHeight',\n 'fillHeight',\n] as const\n\nconst props = withDefaults(\n defineProps<{\n // ============ FormField 자체 props (레이아웃만) ============\n /** 추가 클래스 (외부 커스터마이징용) */\n class?: string\n /** 필드 레이블 */\n label?: string\n /** 필드 설명 (레이블 아래 표시) */\n description?: string\n /** 에러 메시지 */\n errorMsg?: string\n /** 컴포넌트 타입 (렌더링할 컴포넌트 지정) */\n type?: ComponentType\n /** 체크박스/스위치 타입일 때만 사용하는 옆 라벨 */\n inlineLabel?: string\n /** 레이블과 컨트롤의 배치 방향 */\n orientation?: 'vertical' | 'horizontal' | 'responsive'\n /** 레이블 텍스트 정렬 */\n labelAlign?: 'left' | 'middle' | 'right'\n /** 레이블 영역 너비 (horizontal orientation일 때만 적용) */\n labelWidth?: string\n\n // ============ 내부 컴포넌트로 전달할 공통 props ============\n /** Input 요소의 id (label for와 연결) */\n id?: string\n /** v-model로 양방향 데이터 바인딩 */\n modelValue?: any\n /** 입력 전 표시되는 안내문 (Input/Textarea/Select/Combobox) */\n placeholder?: string\n /** 비활성화 상태 (전체) */\n disabled?: boolean\n /** 읽기 전용 상태 (Input/Textarea) */\n readonly?: boolean\n /** 필수 입력/선택 여부 (전체) */\n required?: boolean\n /** form 데이터 전송 시 키 이름 (전체) */\n name?: string\n /** 스타일 테마 지정 (J-prefixed 컴포넌트의 styleType) */\n styleType?: string\n\n // ============ Input 전용 props ============\n /** Input 타입 (text, email, password 등) */\n inputType?: string\n\n\n // ============ Select/Combobox/Radio 전용 props ============\n /** 선택 가능한 항목 배열 */\n options?: Array<{ label: string; value: string | number; disabled?: boolean }>\n \n // ============ Select/Combobox 전용 props ============\n /** 다중 선택 허용 여부 */\n multiple?: boolean\n\n\n // ============ Radio 전용 props ============\n /** Radio 옵션 나열 방향 */\n radioDirection?: 'horizontal' | 'vertical'\n\n // ============ Editor 전용 props ============\n /** 에디터 높이 (기본값: '300px') */\n editorHeight?: string | number\n /** 에디터가 남은 세로 공간을 모두 채우도록 확장 (type='editor'일 때만 적용) */\n fillHeight?: boolean\n }>(),\n {\n type: 'input',\n orientation: 'horizontal',\n labelAlign: 'left',\n labelWidth: '80px',\n radioDirection: 'horizontal',\n }\n)\n\n// 이벤트 정의\nconst emit = defineEmits<{\n 'update:modelValue': [value: any]\n 'change': [value: any]\n 'focus': [event: FocusEvent]\n 'blur': [event: FocusEvent]\n 'save': [value: string]\n}>()\n\n// 내부 에러 상태 (props.error가 없을 때만 사용)\nconst internalError = ref<string>('')\n\n// 최종 에러 메시지 (외부 errorMsg가 우선)\nconst finalError = computed(() => props.errorMsg || internalError.value)\n\n// FormField 자체 props와 내부 컴포넌트 props 분리\nconst controlProps = computed(() => {\n const result: Record<string, any> = {}\n const propsObj = props as Record<string, any>\n \n for (const key in propsObj) {\n // FormField 자체 props는 제외\n if (!FORM_FIELD_PROPS.includes(key as any)) {\n result[key] = propsObj[key]\n }\n }\n \n // inputType을 type으로 변환 (JInput 컴포넌트에서 사용)\n if (props.inputType && props.type === 'input') {\n result.type = props.inputType\n delete result.inputType // inputType은 제거\n \n // placeholder가 없으면 inputType에 따라 기본값 설정\n if (!props.placeholder) {\n const defaultPlaceholders: Record<string, string> = {\n 'text': '텍스트를 입력하세요',\n 'email': '이메일을 입력하세요',\n 'password': '비밀번호를 입력하세요',\n 'tel': '전화번호를 입력하세요',\n 'url': 'URL을 입력하세요',\n 'number': '숫자를 입력하세요',\n 'search': '검색어를 입력하세요',\n 'date': '날짜를 선택하세요',\n 'time': '시간을 선택하세요',\n 'datetime-local': '날짜와 시간을 선택하세요',\n 'month': '월을 선택하세요',\n 'week': '주를 선택하세요',\n }\n \n result.placeholder = defaultPlaceholders[props.inputType] || '입력하세요'\n }\n }\n \n // radioDirection을 styletype으로 변환 (JRadio 컴포넌트에서 사용)\n if (props.radioDirection && props.type === 'radio') {\n result.styletype = props.radioDirection\n delete result.radioDirection // radioDirection은 제거\n }\n\n // editorHeight를 height로 변환 (JEditor 컴포넌트에서 사용)\n if (props.type === 'editor') {\n result.height = props.fillHeight ? '100%' : (props.editorHeight ?? '300px')\n delete result.editorHeight\n delete result.fillHeight\n }\n\n return result\n})\n\n // Built-in validation\n const validateField = (currentValue?: any) => {\n if (!props.required) return\n\n internalError.value = ''\n\n // 현재 값 또는 props.modelValue 사용\n const value = currentValue !== undefined ? currentValue : props.modelValue\n\n // Required 체크\n if (props.type === 'checkbox' || props.type === 'switch') {\n if (value !== 'Y') {\n internalError.value = '필수 항목입니다.'\n }\n } else {\n if (value === null || value === undefined || value === '') {\n internalError.value = '필수 입력 항목입니다.'\n }\n }\n }\n\n // 초기 로드 시 validation 실행 (blur 이벤트에서만)\n const shouldValidateOnMount = computed(() => {\n // Storybook에서 초기값이 있는 경우 validation 스킵\n if (props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== '') {\n return false\n }\n return true\n })\n\n// 이벤트 핸들러\nconst handleUpdateModelValue = (value: any) => {\n emit('update:modelValue', value)\n \n // 값이 변경되면 즉시 validation 실행 (현재 값 전달)\n validateField(value)\n}\n\nconst handleChange = (value: any) => {\n emit('change', value)\n \n // change 이벤트에서도 validation 실행 (현재 값 전달)\n validateField(value)\n}\n\nconst handleSave = (value: string) => {\n emit('save', value)\n}\n\nconst handleFocus = (event: FocusEvent) => {\n emit('focus', event)\n}\n\n const handleBlur = (event: FocusEvent) => {\n // blur 시에만 validation 실행 (초기 로드 시에는 실행하지 않음)\n if (shouldValidateOnMount.value) {\n validateField()\n }\n emit('blur', event)\n }\n\n// 레이블 정렬 클래스 (레이블 영역 내에서 레이블의 위치 제어)\nconst labelAlignClass = computed(() => {\n // horizontal일 때는 레이블 영역 내에서 레이블의 위치를 제어\n const mapHorizontal = { \n left: 'justify-start', // 레이블 영역의 왼쪽에 레이블 위치\n middle: 'justify-center', // 레이블 영역의 가운데에 레이블 위치\n right: 'justify-end' // 레이블 영역의 오른쪽에 레이블 위치 (input과 가까이)\n }\n // vertical일 때는 텍스트 정렬만 제어\n const mapVertical = { left: 'text-left', middle: 'text-center', right: 'text-right' }\n return props.orientation === 'horizontal' ? mapHorizontal[props.labelAlign] : mapVertical[props.labelAlign]\n})\n\n/** 행높이 토큰 클래스 매핑 */\nconst densityClass = computed(() => {\n switch (props.styleType) {\n case 'md': return 'form-density-md'\n case 'lg': return 'form-density-lg'\n default: return 'form-density-sm' // 기본값 변경: md → sm (컴팩트 디자인)\n }\n})\n\n/** 컨트롤 클래스 (datepicker는 최대 너비 제한, radio vertical은 높이 제한 없음) */\nconst controlClass = computed(() => {\n const baseClass = 'h-[var(--ctl-h)] leading-[var(--ctl-h)]'\n \n if (props.type === 'datepicker') {\n return `${baseClass} max-w-xs`\n }\n\n // Editor: fillHeight면 h-full, 아니면 높이 제한 없음\n if (props.type === 'editor') {\n return props.fillHeight ? 'h-full w-full' : ''\n }\n\n // Radio vertical: 고정 높이 제한 없음\n if (props.type === 'radio' && props.radioDirection === 'vertical') {\n return ''\n }\n\n return baseClass\n})\n\n// 컴포넌트 매핑\nconst componentMap: Record<ComponentType, any> = {\n input: JInput,\n textarea: JTextarea,\n checkbox: JCheckbox,\n switch: JSwitch,\n combo: JCombo,\n radio: JRadio,\n searchCombo: JSearchCombo,\n datepicker: JDatepicker,\n editor: JEditor,\n}\n\n// type에 따라 렌더링할 컴포넌트 결정\nconst resolvedComponent = computed(() => {\n return componentMap[props.type!] || JInput\n})\n\n/** fillHeight + editor 조합 여부 */\nconst fillHeightEditor = computed(() => props.fillHeight && props.type === 'editor')\n\n// 외부에서 수동으로 에러 클리어 가능하도록 expose\ndefineExpose({\n clearError: () => { internalError.value = '' }\n})\n</script>\n\n<template>\n <div :class=\"cn(fillHeightEditor ? 'flex-1 flex flex-col min-h-0' : type === 'editor' ? 'flex-1 min-w-0' : 'space-y-2 flex-1 min-w-0', densityClass, props.class)\">\n <FieldGroup :class=\"fillHeightEditor ? 'flex-1 flex flex-col min-h-0' : ''\">\n <Field :class=\"[\n orientation === 'horizontal'\n ? 'grid grid-cols-[var(--label-w,8rem)_1fr] items-start space-y-0 gap-2'\n : type === 'editor' ? 'space-y-0 gap-0' : 'space-y-1 gap-1',\n fillHeightEditor ? 'flex-1 min-h-0' : ''\n ]\"\n :style=\"orientation === 'horizontal' && labelWidth ? `--label-w:${labelWidth};` : ''\"\n >\n <!-- 메인 라벨 (필수표기 포함) -->\n <FieldLabel \n :for=\"id\" \n :class=\"[\n 'text-xs font-medium', // 컴팩트 디자인 + 라벨-값 weight 차별화\n orientation === 'horizontal'\n ? (type === 'editor' ? 'flex items-start pt-1 w-full' : 'flex items-center h-[var(--ctl-h)] w-full')\n : 'flex items-center',\n labelAlignClass\n ]\"\n >\n {{ label }}\n <span v-if=\"required\" class=\"text-destructive ml-0.5\">*</span>\n </FieldLabel>\n\n <FieldContent\n :class=\"[\n orientation === 'horizontal'\n ? 'min-h-[var(--ctl-h)] flex flex-col justify-start gap-0.5 mt-0'\n : 'space-y-2 gap-0',\n fillHeightEditor ? 'flex-1 flex flex-col min-h-0' : ''\n ]\"\n >\n <!-- 체크박스/스위치: 항상 가로 정렬로 컨트롤 + 인라인 라벨 묶기 -->\n <FieldGroup v-if=\"type === 'checkbox' || type === 'switch'\" data-slot=\"checkbox-group\">\n <!-- 부모 orientation과 무관하게 수평 정렬 고정 -->\n <Field orientation=\"horizontal\" class=\"flex gap-2 space-y-0 h-[var(--ctl-h)] leading-[var(--ctl-h)] items-center\">\n <component\n :is=\"resolvedComponent\"\n v-bind=\"controlProps\"\n @update:modelValue=\"handleUpdateModelValue\"\n @change=\"handleChange\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n />\n <FieldLabel\n v-if=\"inlineLabel\"\n :for=\"id\"\n class=\"text-xs font-normal m-0 h-[var(--ctl-h)] leading-[var(--ctl-h)]\"\n >\n {{ inlineLabel }}\n </FieldLabel>\n </Field>\n </FieldGroup>\n\n <!-- Radio 버튼: radioDirection에 따라 분기 처리 -->\n <FieldGroup v-else-if=\"type === 'radio'\">\n <component\n :is=\"resolvedComponent\"\n v-bind=\"controlProps\"\n @update:modelValue=\"handleUpdateModelValue\"\n @change=\"handleChange\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n :class=\"controlClass\"\n />\n </FieldGroup>\n\n <!-- 그 외 컨트롤: orientation 규칙 그대로 따름 -->\n <FieldGroup v-else :class=\"fillHeightEditor ? 'flex-1 flex flex-col min-h-0' : ''\">\n <component\n :is=\"resolvedComponent\"\n v-bind=\"controlProps\"\n @update:modelValue=\"handleUpdateModelValue\"\n @change=\"handleChange\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @save=\"handleSave\"\n :class=\"controlClass\"\n />\n </FieldGroup>\n \n <!-- 설명/에러: 항상 컨트롤 '바로 아래'에 표시 -->\n <FieldContent v-if=\"description || finalError\">\n <FieldDescription v-if=\"description\">\n {{ description }}\n </FieldDescription>\n <FieldError v-if=\"finalError\">\n {{ finalError }}\n </FieldError>\n </FieldContent>\n </FieldContent>\n </Field>\n </FieldGroup>\n </div>\n</template>\n\n\n\n<style scoped>\n/* 높이 토큰(밀도) — :root의 --j-ctl-h-* 를 참조, 앱에서 override 가능 */\n.form-density-sm { --ctl-h: var(--j-ctl-h-sm, 1.75rem); }\n.form-density-md { --ctl-h: var(--j-ctl-h-md, 2.25rem); }\n.form-density-lg { --ctl-h: var(--j-ctl-h-lg, 2.5rem); }\n</style>"],"names":["FORM_FIELD_PROPS","props","__props","emit","__emit","internalError","ref","finalError","computed","controlProps","result","propsObj","key","defaultPlaceholders","validateField","currentValue","value","shouldValidateOnMount","handleUpdateModelValue","handleChange","handleSave","handleFocus","event","handleBlur","labelAlignClass","mapHorizontal","mapVertical","densityClass","controlClass","baseClass","componentMap","JInput","JTextarea","JCheckbox","JSwitch","JCombo","JRadio","JSearchCombo","JDatepicker","JEditor","resolvedComponent","fillHeightEditor","__expose","_createElementBlock","_normalizeClass","_unref","cn","_createVNode","FieldGroup","Field","_normalizeStyle","FieldLabel","_createTextVNode","_toDisplayString","_hoisted_1","FieldContent","_createBlock","_openBlock","_resolveDynamicComponent","_mergeProps","FieldDescription","FieldError"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"JFormField.vue2.js","sources":["../../../../src/components/molecules/JFormField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Field, FieldContent, FieldLabel, FieldDescription, FieldError, FieldGroup } from '@/components/shadcn'\nimport { JInput, JTextarea, JCheckbox, JSwitch, JCombo, JRadio, JSearchCombo, JDatepicker, JEditor } from '@/components/atoms'\nimport { cn } from '@/lib/utils'\nimport { useBreakpoint } from '@/composables/useBreakpoint'\n\n// 컴포넌트 타입 정의\ntype ComponentType = 'input' | 'textarea' | 'checkbox' | 'switch' | 'combo' | 'radio' | 'searchCombo' | 'datepicker' | 'editor'\n\n// FormField 자체의 props (레이아웃 관련)\nconst FORM_FIELD_PROPS = [\n 'class',\n 'label',\n 'description',\n 'errorMsg',\n 'type',\n 'inlineLabel',\n 'orientation',\n 'labelAlign',\n 'labelWidth',\n 'radioDirection',\n 'editorHeight',\n 'fillHeight',\n] as const\n\nconst props = withDefaults(\n defineProps<{\n // ============ FormField 자체 props (레이아웃만) ============\n /** 추가 클래스 (외부 커스터마이징용) */\n class?: string\n /** 필드 레이블 */\n label?: string\n /** 필드 설명 (레이블 아래 표시) */\n description?: string\n /** 에러 메시지 */\n errorMsg?: string\n /** 컴포넌트 타입 (렌더링할 컴포넌트 지정) */\n type?: ComponentType\n /** 체크박스/스위치 타입일 때만 사용하는 옆 라벨 */\n inlineLabel?: string\n /** 레이블과 컨트롤의 배치 방향 */\n orientation?: 'vertical' | 'horizontal' | 'responsive'\n /** 레이블 텍스트 정렬 */\n labelAlign?: 'left' | 'middle' | 'right'\n /** 레이블 영역 너비 (horizontal orientation일 때만 적용) */\n labelWidth?: string\n\n // ============ 내부 컴포넌트로 전달할 공통 props ============\n /** Input 요소의 id (label for와 연결) */\n id?: string\n /** v-model로 양방향 데이터 바인딩 */\n modelValue?: any\n /** 입력 전 표시되는 안내문 (Input/Textarea/Select/Combobox) */\n placeholder?: string\n /** 비활성화 상태 (전체) */\n disabled?: boolean\n /** 읽기 전용 상태 (Input/Textarea) */\n readonly?: boolean\n /** 필수 입력/선택 여부 (전체) */\n required?: boolean\n /** form 데이터 전송 시 키 이름 (전체) */\n name?: string\n /** 스타일 테마 지정 (J-prefixed 컴포넌트의 styleType) */\n styleType?: string\n\n // ============ Input 전용 props ============\n /** Input 타입 (text, email, password 등) */\n inputType?: string\n\n\n // ============ Select/Combobox/Radio 전용 props ============\n /** 선택 가능한 항목 배열 */\n options?: Array<{ label: string; value: string | number; disabled?: boolean }>\n \n // ============ Select/Combobox 전용 props ============\n /** 다중 선택 허용 여부 */\n multiple?: boolean\n\n\n // ============ Radio 전용 props ============\n /** Radio 옵션 나열 방향 */\n radioDirection?: 'horizontal' | 'vertical'\n\n // ============ Editor 전용 props ============\n /** 에디터 높이 (기본값: '300px') */\n editorHeight?: string | number\n /** 에디터가 남은 세로 공간을 모두 채우도록 확장 (type='editor'일 때만 적용) */\n fillHeight?: boolean\n }>(),\n {\n type: 'input',\n orientation: 'horizontal',\n labelAlign: 'left',\n labelWidth: '80px',\n radioDirection: 'horizontal',\n }\n)\n\n// 이벤트 정의\nconst emit = defineEmits<{\n 'update:modelValue': [value: any]\n 'change': [value: any]\n 'focus': [event: FocusEvent]\n 'blur': [event: FocusEvent]\n 'save': [value: string]\n}>()\n\n// 내부 에러 상태 (props.error가 없을 때만 사용)\nconst internalError = ref<string>('')\n\n// 최종 에러 메시지 (외부 errorMsg가 우선)\nconst finalError = computed(() => props.errorMsg || internalError.value)\n\n// FormField 자체 props와 내부 컴포넌트 props 분리\nconst controlProps = computed(() => {\n const result: Record<string, any> = {}\n const propsObj = props as Record<string, any>\n \n for (const key in propsObj) {\n // FormField 자체 props는 제외\n if (!FORM_FIELD_PROPS.includes(key as any)) {\n result[key] = propsObj[key]\n }\n }\n \n // inputType을 type으로 변환 (JInput 컴포넌트에서 사용)\n if (props.inputType && props.type === 'input') {\n result.type = props.inputType\n delete result.inputType // inputType은 제거\n \n // placeholder가 없으면 inputType에 따라 기본값 설정\n if (!props.placeholder) {\n const defaultPlaceholders: Record<string, string> = {\n 'text': '텍스트를 입력하세요',\n 'email': '이메일을 입력하세요',\n 'password': '비밀번호를 입력하세요',\n 'tel': '전화번호를 입력하세요',\n 'url': 'URL을 입력하세요',\n 'number': '숫자를 입력하세요',\n 'search': '검색어를 입력하세요',\n 'date': '날짜를 선택하세요',\n 'time': '시간을 선택하세요',\n 'datetime-local': '날짜와 시간을 선택하세요',\n 'month': '월을 선택하세요',\n 'week': '주를 선택하세요',\n }\n \n result.placeholder = defaultPlaceholders[props.inputType] || '입력하세요'\n }\n }\n \n // radioDirection을 styletype으로 변환 (JRadio 컴포넌트에서 사용)\n if (props.radioDirection && props.type === 'radio') {\n result.styletype = props.radioDirection\n delete result.radioDirection // radioDirection은 제거\n }\n\n // editorHeight를 height로 변환 (JEditor 컴포넌트에서 사용)\n if (props.type === 'editor') {\n result.height = props.fillHeight ? '100%' : (props.editorHeight ?? '300px')\n delete result.editorHeight\n delete result.fillHeight\n }\n\n return result\n})\n\n // Built-in validation\n const validateField = (currentValue?: any) => {\n if (!props.required) return\n\n internalError.value = ''\n\n // 현재 값 또는 props.modelValue 사용\n const value = currentValue !== undefined ? currentValue : props.modelValue\n\n // Required 체크\n if (props.type === 'checkbox' || props.type === 'switch') {\n if (value !== 'Y') {\n internalError.value = '필수 항목입니다.'\n }\n } else {\n if (value === null || value === undefined || value === '') {\n internalError.value = '필수 입력 항목입니다.'\n }\n }\n }\n\n // 초기 로드 시 validation 실행 (blur 이벤트에서만)\n const shouldValidateOnMount = computed(() => {\n // Storybook에서 초기값이 있는 경우 validation 스킵\n if (props.modelValue !== null && props.modelValue !== undefined && props.modelValue !== '') {\n return false\n }\n return true\n })\n\n// 이벤트 핸들러\nconst handleUpdateModelValue = (value: any) => {\n emit('update:modelValue', value)\n \n // 값이 변경되면 즉시 validation 실행 (현재 값 전달)\n validateField(value)\n}\n\nconst handleChange = (value: any) => {\n emit('change', value)\n \n // change 이벤트에서도 validation 실행 (현재 값 전달)\n validateField(value)\n}\n\nconst handleSave = (value: string) => {\n emit('save', value)\n}\n\nconst handleFocus = (event: FocusEvent) => {\n emit('focus', event)\n}\n\n const handleBlur = (event: FocusEvent) => {\n // blur 시에만 validation 실행 (초기 로드 시에는 실행하지 않음)\n if (shouldValidateOnMount.value) {\n validateField()\n }\n emit('blur', event)\n }\n\n// 레이블 정렬 클래스 (레이블 영역 내에서 레이블의 위치 제어)\nconst labelAlignClass = computed(() => {\n // horizontal일 때는 레이블 영역 내에서 레이블의 위치를 제어\n const mapHorizontal = { \n left: 'justify-start', // 레이블 영역의 왼쪽에 레이블 위치\n middle: 'justify-center', // 레이블 영역의 가운데에 레이블 위치\n right: 'justify-end' // 레이블 영역의 오른쪽에 레이블 위치 (input과 가까이)\n }\n // vertical일 때는 텍스트 정렬만 제어\n const mapVertical = { left: 'text-left', middle: 'text-center', right: 'text-right' }\n return effectiveOrientation.value === 'horizontal' ? mapHorizontal[props.labelAlign] : mapVertical[props.labelAlign]\n})\n\n/** 행높이 토큰 클래스 매핑 */\nconst densityClass = computed(() => {\n switch (props.styleType) {\n case 'md': return 'form-density-md'\n case 'lg': return 'form-density-lg'\n default: return 'form-density-sm' // 기본값 변경: md → sm (컴팩트 디자인)\n }\n})\n\n/** 컨트롤 클래스 (datepicker는 최대 너비 제한, radio vertical은 높이 제한 없음) */\nconst controlClass = computed(() => {\n const baseClass = 'h-[var(--ctl-h)] leading-[var(--ctl-h)]'\n \n if (props.type === 'datepicker') {\n return `${baseClass} max-w-xs`\n }\n\n // Editor: fillHeight면 h-full, 아니면 높이 제한 없음\n if (props.type === 'editor') {\n return props.fillHeight ? 'h-full w-full' : ''\n }\n\n // Radio vertical: 고정 높이 제한 없음\n if (props.type === 'radio' && props.radioDirection === 'vertical') {\n return ''\n }\n\n return baseClass\n})\n\n// 컴포넌트 매핑\nconst componentMap: Record<ComponentType, any> = {\n input: JInput,\n textarea: JTextarea,\n checkbox: JCheckbox,\n switch: JSwitch,\n combo: JCombo,\n radio: JRadio,\n searchCombo: JSearchCombo,\n datepicker: JDatepicker,\n editor: JEditor,\n}\n\n// type에 따라 렌더링할 컴포넌트 결정\nconst resolvedComponent = computed(() => {\n return componentMap[props.type!] || JInput\n})\n\n/** fillHeight + editor 조합 여부 */\nconst fillHeightEditor = computed(() => props.fillHeight && props.type === 'editor')\n\n/** responsive orientation: 모바일에서 vertical, 데스크톱에서 horizontal */\nconst { isDesktop } = useBreakpoint()\nconst effectiveOrientation = computed(() => {\n if (props.orientation === 'responsive') {\n return isDesktop.value ? 'horizontal' : 'vertical'\n }\n return props.orientation\n})\n\n// 외부에서 수동으로 에러 클리어 가능하도록 expose\ndefineExpose({\n clearError: () => { internalError.value = '' }\n})\n</script>\n\n<template>\n <div :class=\"cn(fillHeightEditor ? 'flex-1 flex flex-col min-h-0' : type === 'editor' ? 'flex-1 min-w-0' : 'space-y-2 flex-1 min-w-0', densityClass, props.class)\">\n <FieldGroup :class=\"fillHeightEditor ? 'flex-1 flex flex-col min-h-0' : ''\">\n <Field :class=\"[\n effectiveOrientation === 'horizontal'\n ? 'grid grid-cols-[var(--label-w,8rem)_1fr] items-start space-y-0 gap-2'\n : type === 'editor' ? 'space-y-0 gap-0' : 'space-y-1 gap-1',\n fillHeightEditor ? 'flex-1 min-h-0' : ''\n ]\"\n :style=\"effectiveOrientation === 'horizontal' && labelWidth ? `--label-w:${labelWidth};` : ''\"\n >\n <!-- 메인 라벨 (필수표기 포함) -->\n <FieldLabel \n :for=\"id\" \n :class=\"[\n 'text-xs font-medium', // 컴팩트 디자인 + 라벨-값 weight 차별화\n effectiveOrientation === 'horizontal'\n ? (type === 'editor' ? 'flex items-start pt-1 w-full' : 'flex items-center h-[var(--ctl-h)] w-full')\n : 'flex items-center',\n labelAlignClass\n ]\"\n >\n {{ label }}\n <span v-if=\"required\" class=\"text-destructive ml-0.5\">*</span>\n </FieldLabel>\n\n <FieldContent\n :class=\"[\n effectiveOrientation === 'horizontal'\n ? 'min-h-[var(--ctl-h)] flex flex-col justify-start gap-0.5 mt-0'\n : 'space-y-2 gap-0',\n fillHeightEditor ? 'flex-1 flex flex-col min-h-0' : ''\n ]\"\n >\n <!-- 체크박스/스위치: 항상 가로 정렬로 컨트롤 + 인라인 라벨 묶기 -->\n <FieldGroup v-if=\"type === 'checkbox' || type === 'switch'\" data-slot=\"checkbox-group\">\n <!-- 부모 orientation과 무관하게 수평 정렬 고정 -->\n <Field orientation=\"horizontal\" class=\"flex gap-2 space-y-0 h-[var(--ctl-h)] leading-[var(--ctl-h)] items-center\">\n <component\n :is=\"resolvedComponent\"\n v-bind=\"controlProps\"\n @update:modelValue=\"handleUpdateModelValue\"\n @change=\"handleChange\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n />\n <FieldLabel\n v-if=\"inlineLabel\"\n :for=\"id\"\n class=\"text-xs font-normal m-0 h-[var(--ctl-h)] leading-[var(--ctl-h)]\"\n >\n {{ inlineLabel }}\n </FieldLabel>\n </Field>\n </FieldGroup>\n\n <!-- Radio 버튼: radioDirection에 따라 분기 처리 -->\n <FieldGroup v-else-if=\"type === 'radio'\">\n <component\n :is=\"resolvedComponent\"\n v-bind=\"controlProps\"\n @update:modelValue=\"handleUpdateModelValue\"\n @change=\"handleChange\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n :class=\"controlClass\"\n />\n </FieldGroup>\n\n <!-- 그 외 컨트롤: orientation 규칙 그대로 따름 -->\n <FieldGroup v-else :class=\"fillHeightEditor ? 'flex-1 flex flex-col min-h-0' : ''\">\n <component\n :is=\"resolvedComponent\"\n v-bind=\"controlProps\"\n @update:modelValue=\"handleUpdateModelValue\"\n @change=\"handleChange\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @save=\"handleSave\"\n :class=\"controlClass\"\n />\n </FieldGroup>\n \n <!-- 설명/에러: 항상 컨트롤 '바로 아래'에 표시 -->\n <FieldContent v-if=\"description || finalError\">\n <FieldDescription v-if=\"description\">\n {{ description }}\n </FieldDescription>\n <FieldError v-if=\"finalError\">\n {{ finalError }}\n </FieldError>\n </FieldContent>\n </FieldContent>\n </Field>\n </FieldGroup>\n </div>\n</template>\n\n\n\n<style scoped>\n/* 높이 토큰(밀도) — :root의 --j-ctl-h-* 를 참조, 앱에서 override 가능 */\n.form-density-sm { --ctl-h: var(--j-ctl-h-sm, 1.75rem); }\n.form-density-md { --ctl-h: var(--j-ctl-h-md, 2.25rem); }\n.form-density-lg { --ctl-h: var(--j-ctl-h-lg, 2.5rem); }\n</style>"],"names":["FORM_FIELD_PROPS","props","__props","emit","__emit","internalError","ref","finalError","computed","controlProps","result","propsObj","key","defaultPlaceholders","validateField","currentValue","value","shouldValidateOnMount","handleUpdateModelValue","handleChange","handleSave","handleFocus","event","handleBlur","labelAlignClass","mapHorizontal","mapVertical","effectiveOrientation","densityClass","controlClass","baseClass","componentMap","JInput","JTextarea","JCheckbox","JSwitch","JCombo","JRadio","JSearchCombo","JDatepicker","JEditor","resolvedComponent","fillHeightEditor","isDesktop","useBreakpoint","__expose","_createElementBlock","_normalizeClass","_unref","cn","_createVNode","FieldGroup","Field","_normalizeStyle","FieldLabel","_createTextVNode","_toDisplayString","_hoisted_1","FieldContent","_createBlock","_openBlock","_resolveDynamicComponent","_mergeProps","FieldDescription","FieldError"],"mappings":"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"}
|
|
@@ -1,2 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./JLayout.vue2.cjs");;/* empty css */const t = (t_comp, t_opts) => {
|
|
2
|
+
const t_merged = t_comp.__vccOpts || t_comp;
|
|
3
|
+
for (const [t_key, t_val] of t_opts)
|
|
4
|
+
t_merged[t_key] = t_val;
|
|
5
|
+
return t_merged;
|
|
6
|
+
};,u=t(e.default,[["__scopeId","data-v-af519966"]]);exports.default=u;
|
|
2
7
|
//# sourceMappingURL=JLayout.vue.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JLayout.vue.cjs","sources":[
|
|
1
|
+
{"version":3,"file":"JLayout.vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,46 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
setup(f) {
|
|
11
|
-
const e = f, n = {
|
|
12
|
-
default: {
|
|
13
|
-
containerClass: "flex flex-col h-screen w-full overflow-hidden",
|
|
14
|
-
contentClass: "flex flex-1 overflow-hidden"
|
|
15
|
-
},
|
|
16
|
-
minimal: {
|
|
17
|
-
containerClass: "flex flex-col h-screen w-full overflow-hidden",
|
|
18
|
-
contentClass: "flex flex-1 overflow-hidden"
|
|
19
|
-
}
|
|
20
|
-
}, s = r(() => n[e.styletype] ?? n.default), d = r(() => c(
|
|
21
|
-
s.value.contentClass,
|
|
22
|
-
!e.contentScroll && "overflow-hidden"
|
|
23
|
-
));
|
|
24
|
-
return (l, v) => (p(), i("div", {
|
|
25
|
-
class: t(m(c)(s.value.containerClass, e.class))
|
|
26
|
-
}, [
|
|
27
|
-
o(l.$slots, "header"),
|
|
28
|
-
a("div", {
|
|
29
|
-
class: t(d.value)
|
|
30
|
-
}, [
|
|
31
|
-
o(l.$slots, "sidebar"),
|
|
32
|
-
a("div", {
|
|
33
|
-
class: t(["flex-1 flex flex-col min-h-0", e.contentScroll ? "overflow-auto" : "overflow-hidden"])
|
|
34
|
-
}, [
|
|
35
|
-
o(l.$slots, "content", {}, () => [
|
|
36
|
-
o(l.$slots, "default")
|
|
37
|
-
])
|
|
38
|
-
], 2)
|
|
39
|
-
], 2)
|
|
40
|
-
], 2));
|
|
41
|
-
}
|
|
42
|
-
});
|
|
1
|
+
import o from "./JLayout.vue2.js";
|
|
2
|
+
/* empty css */
|
|
3
|
+
const t = (t_comp, t_opts) => {
|
|
4
|
+
const t_merged = t_comp.__vccOpts || t_comp;
|
|
5
|
+
for (const [t_key, t_val] of t_opts)
|
|
6
|
+
t_merged[t_key] = t_val;
|
|
7
|
+
return t_merged;
|
|
8
|
+
};
|
|
9
|
+
const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-af519966"]]);
|
|
43
10
|
export {
|
|
44
|
-
|
|
11
|
+
m as default
|
|
45
12
|
};
|
|
46
13
|
//# sourceMappingURL=JLayout.vue.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JLayout.vue.js","sources":[
|
|
1
|
+
{"version":3,"file":"JLayout.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("../../lib/utils.cjs"),m=require("../../composables/useBreakpoint.cjs"),v={key:0,class:"fixed inset-y-0 left-0 z-50 w-[280px] max-w-[80vw] shadow-xl"},p=e.defineComponent({__name:"JLayout",props:{styletype:{default:"default"},contentScroll:{type:Boolean,default:!0},class:{},sidebarOverlay:{type:Boolean,default:!1},sidebarOpen:{type:Boolean,default:!1}},emits:["backdrop-click"],setup(o,{emit:r}){const t=o,c=r,{isMobile:d}=m.useBreakpoint(),i=e.computed(()=>t.sidebarOverlay||d.value),n={default:{containerClass:"flex flex-col h-screen w-full overflow-hidden",contentClass:"flex flex-1 overflow-hidden"},minimal:{containerClass:"flex flex-col h-screen w-full overflow-hidden",contentClass:"flex flex-1 overflow-hidden"}},a=e.computed(()=>n[t.styletype]??n.default),u=e.computed(()=>s.cn(a.value.contentClass,!t.contentScroll&&"overflow-hidden")),f=()=>{c("backdrop-click")};return(l,k)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(s.cn)(a.value.containerClass,t.class))},[e.renderSlot(l.$slots,"header",{},void 0,!0),e.createElementVNode("div",{class:e.normalizeClass(u.value)},[i.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(e.Transition,{name:"j-sidebar-backdrop"},{default:e.withCtx(()=>[o.sidebarOpen?(e.openBlock(),e.createElementBlock("div",{key:0,class:"fixed inset-0 z-40 bg-black/40",onClick:f})):e.createCommentVNode("",!0)]),_:1}),e.createVNode(e.Transition,{name:"j-sidebar-drawer"},{default:e.withCtx(()=>[o.sidebarOpen?(e.openBlock(),e.createElementBlock("div",v,[e.renderSlot(l.$slots,"sidebar",{},void 0,!0)])):e.createCommentVNode("",!0)]),_:3})],64)):e.renderSlot(l.$slots,"sidebar",{key:1},void 0,!0),e.createElementVNode("div",{class:e.normalizeClass(["flex-1 flex flex-col min-h-0",t.contentScroll?"overflow-auto":"overflow-hidden"])},[e.renderSlot(l.$slots,"content",{},()=>[e.renderSlot(l.$slots,"default",{},void 0,!0)],!0)],2)],2)],2))}});exports.default=p;
|
|
2
2
|
//# sourceMappingURL=JLayout.vue2.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JLayout.vue2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"JLayout.vue2.cjs","sources":["../../../../src/components/templates/JLayout.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { useBreakpoint } from '@/composables/useBreakpoint'\n\n/**\n * JLayout - 기본 레이아웃 컴포넌트 (templates)\n * Base Layout Component\n *\n * @description\n * 공통 레이아웃 구조를 제공하는 기본 컴포넌트입니다.\n * Header, Sidebar, Content 영역을 슬롯으로 제공하여 유연한 레이아웃 구성이 가능합니다.\n * 모바일에서는 사이드바가 오버레이 드로어로 전환됩니다.\n *\n * 레이아웃 구조:\n * - header: 상단 헤더 영역 (슬롯)\n * - sidebar: 사이드바 영역 (슬롯)\n * - content: 메인 콘텐츠 영역 (슬롯, 기본 슬롯도 지원)\n *\n * @example\n * ```vue\n * <JLayout styletype=\"default\" :content-scroll=\"true\">\n * <template #header>\n * <JHeader logo-text=\"JWMS Portal\" />\n * </template>\n * <template #sidebar>\n * <JSidebarSimple :menu-items=\"menuItems\" />\n * </template>\n * <template #content>\n * <div>메인 콘텐츠</div>\n * </template>\n * </JLayout>\n * ```\n */\n\ntype StyleType = 'default' | 'minimal'\n\nconst props = withDefaults(\n defineProps<{\n /** 레이아웃 스타일 타입 */\n styletype?: StyleType\n /** 콘텐츠 영역 스크롤 가능 여부 */\n contentScroll?: boolean\n /** 추가 CSS 클래스 */\n class?: string\n /** 모바일에서 사이드바를 오버레이 드로어로 표시 */\n sidebarOverlay?: boolean\n /** 사이드바 오버레이 열림 상태 (sidebarOverlay=true일 때만 사용) */\n sidebarOpen?: boolean\n }>(),\n {\n styletype: 'default',\n contentScroll: true,\n sidebarOverlay: false,\n sidebarOpen: false,\n }\n)\n\nconst emit = defineEmits<{\n 'backdrop-click': []\n}>()\n\nconst { isMobile } = useBreakpoint()\n\n// 실제 오버레이 모드: prop으로 명시하거나 모바일 자동 감지\nconst isOverlayMode = computed(() => props.sidebarOverlay || isMobile.value)\n\n/**\n * 스타일 프리셋\n */\nconst STYLE_PRESETS: Record<StyleType, {\n containerClass: string\n contentClass: string\n}> = {\n default: {\n containerClass: 'flex flex-col h-screen w-full overflow-hidden',\n contentClass: 'flex flex-1 overflow-hidden',\n },\n minimal: {\n containerClass: 'flex flex-col h-screen w-full overflow-hidden',\n contentClass: 'flex flex-1 overflow-hidden',\n },\n}\n\nconst preset = computed(() => {\n return STYLE_PRESETS[props.styletype] ?? STYLE_PRESETS.default\n})\n\nconst contentClasses = computed(() => {\n return cn(\n preset.value.contentClass,\n !props.contentScroll && 'overflow-hidden'\n )\n})\n\nconst handleBackdropClick = () => {\n emit('backdrop-click')\n}\n</script>\n\n<template>\n <div :class=\"cn(preset.containerClass, props.class)\">\n <!-- 헤더 슬롯 -->\n <slot name=\"header\" />\n\n <!-- 메인 컨텐츠 영역 -->\n <div :class=\"contentClasses\">\n <!-- 사이드바: 데스크톱은 인라인, 모바일은 오버레이 -->\n <template v-if=\"isOverlayMode\">\n <!-- 모바일 오버레이 드로어 -->\n <Transition name=\"j-sidebar-backdrop\">\n <div\n v-if=\"sidebarOpen\"\n class=\"fixed inset-0 z-40 bg-black/40\"\n @click=\"handleBackdropClick\"\n />\n </Transition>\n <Transition name=\"j-sidebar-drawer\">\n <div\n v-if=\"sidebarOpen\"\n class=\"fixed inset-y-0 left-0 z-50 w-[280px] max-w-[80vw] shadow-xl\"\n >\n <slot name=\"sidebar\" />\n </div>\n </Transition>\n </template>\n <template v-else>\n <!-- 데스크톱 인라인 사이드바 -->\n <slot name=\"sidebar\" />\n </template>\n\n <!-- 콘텐츠 슬롯 -->\n <div class=\"flex-1 flex flex-col min-h-0\" :class=\"props.contentScroll ? 'overflow-auto' : 'overflow-hidden'\">\n <slot name=\"content\">\n <!-- 기본 슬롯도 지원 -->\n <slot />\n </slot>\n </div>\n </div>\n </div>\n</template>\n\n<style scoped>\n/* 사이드바 드로어 슬라이드 애니메이션 */\n.j-sidebar-drawer-enter-active,\n.j-sidebar-drawer-leave-active {\n transition: transform 0.25s ease;\n}\n.j-sidebar-drawer-enter-from,\n.j-sidebar-drawer-leave-to {\n transform: translateX(-100%);\n}\n\n/* 백드롭 페이드 애니메이션 */\n.j-sidebar-backdrop-enter-active,\n.j-sidebar-backdrop-leave-active {\n transition: opacity 0.25s ease;\n}\n.j-sidebar-backdrop-enter-from,\n.j-sidebar-backdrop-leave-to {\n opacity: 0;\n}\n</style>\n"],"names":["props","__props","emit","__emit","isMobile","useBreakpoint","isOverlayMode","computed","STYLE_PRESETS","preset","contentClasses","cn","handleBackdropClick","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_createElementVNode","_Fragment","_createVNode","_Transition","_openBlock","_hoisted_1"],"mappings":"2hBAqCA,MAAMA,EAAQC,EAqBRC,EAAOC,EAIP,CAAE,SAAAC,CAAA,EAAaC,gBAAA,EAGfC,EAAgBC,EAAAA,SAAS,IAAMP,EAAM,gBAAkBI,EAAS,KAAK,EAKrEI,EAGD,CACH,QAAS,CACP,eAAgB,gDAChB,aAAc,6BAAA,EAEhB,QAAS,CACP,eAAgB,gDAChB,aAAc,6BAAA,CAChB,EAGIC,EAASF,EAAAA,SAAS,IACfC,EAAcR,EAAM,SAAS,GAAKQ,EAAc,OACxD,EAEKE,EAAiBH,EAAAA,SAAS,IACvBI,EAAAA,GACLF,EAAO,MAAM,aACb,CAACT,EAAM,eAAiB,iBAAA,CAE3B,EAEKY,EAAsB,IAAM,CAChCV,EAAK,gBAAgB,CACvB,8BAIEW,EAAAA,mBAsCM,MAAA,CAtCA,MAAKC,EAAAA,eAAEC,EAAAA,YAAGN,EAAA,MAAO,eAAgBT,EAAM,KAAK,CAAA,CAAA,GAEhDgB,EAAAA,WAAsBC,EAAA,OAAA,SAAA,CAAA,EAAA,OAAA,EAAA,EAGtBC,EAAAA,mBAgCM,MAAA,CAhCA,uBAAOR,EAAA,KAAc,CAAA,GAETJ,EAAA,qBAAhBO,EAAAA,mBAiBWM,EAAAA,SAAA,CAAA,IAAA,GAAA,CAfTC,EAAAA,YAMaC,EAAAA,WAAA,CAND,KAAK,sBAAoB,mBACnC,IAIE,CAHMpB,EAAA,2BADRY,EAAAA,mBAIE,MAAA,OAFA,MAAM,iCACL,QAAOD,CAAA,wCAGZQ,EAAAA,YAOaC,EAAAA,WAAA,CAPD,KAAK,oBAAkB,mBACjC,IAKM,CAJEpB,EAAA,aADRqB,EAAAA,UAAA,EAAAT,EAAAA,mBAKM,MALNU,EAKM,CADJP,EAAAA,WAAuBC,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA,8CAM3BD,aAAuBC,EAAA,OAAA,UAAA,CAAA,IAAA,GAAA,OAAA,EAAA,EAIzBC,EAAAA,mBAKM,MAAA,CALD,MAAKJ,EAAAA,eAAA,CAAC,+BAAuCd,EAAM,cAAa,gBAAA,iBAAA,CAAA,CAAA,GACnEgB,EAAAA,WAGOC,sBAHP,IAGO,CADLD,EAAAA,WAAQC,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA"}
|