@wipco/sdui-editor 0.16.0 → 0.17.1
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/dist/index.d.ts +346 -8
- package/dist/index.js +1384 -714
- package/dist/styles.css +38 -2
- package/package.json +3 -3
package/dist/styles.css
CHANGED
|
@@ -55,6 +55,36 @@
|
|
|
55
55
|
.sdui-editor-limitations { margin: 4px 0 0; padding-left: 18px; }
|
|
56
56
|
.sdui-editor-limitations li { margin: 2px 0; }
|
|
57
57
|
|
|
58
|
+
/* ---------- 미리보기 시딩 패널 ----------
|
|
59
|
+
JSON 미리보기·뷰어 공용이라 (빌더 전용 CSS와 달리) 여기 산다 —
|
|
60
|
+
JSON 편집기만 쓰는 소비자도 이 패널을 받는다. */
|
|
61
|
+
.sdui-editor-seedpanel {
|
|
62
|
+
flex: none; display: flex; flex-direction: column; gap: 10px;
|
|
63
|
+
padding: 12px; background: var(--wp-surface-card);
|
|
64
|
+
border-bottom: 1px solid var(--wp-border-subtle);
|
|
65
|
+
max-height: 46vh; overflow-y: auto;
|
|
66
|
+
}
|
|
67
|
+
.sdui-editor-seedpanel__head { display: flex; align-items: center; gap: 8px; }
|
|
68
|
+
.sdui-editor-seedpanel__sec {
|
|
69
|
+
display: flex; flex-direction: column; gap: 6px;
|
|
70
|
+
padding-top: 8px; border-top: 1px dashed var(--wp-border-subtle);
|
|
71
|
+
}
|
|
72
|
+
.sdui-editor-seedpanel__label { font-size: var(--wp-size-xs); font-weight: 600; color: var(--wp-text-muted); }
|
|
73
|
+
.sdui-editor-seedpanel__note,
|
|
74
|
+
.sdui-editor-seedpanel__desc { margin: 0; font-size: var(--wp-size-xs); color: var(--wp-text-subtle); }
|
|
75
|
+
.sdui-editor-seedpanel__desc code { font-family: var(--wp-font-mono); font-size: var(--wp-size-2xs); }
|
|
76
|
+
.sdui-editor-seedpanel__err { margin: 0; font-size: var(--wp-size-xs); color: var(--wp-text-danger); }
|
|
77
|
+
.sdui-editor-seedpanel__row { display: flex; align-items: center; gap: 6px; }
|
|
78
|
+
.sdui-editor-seedpanel__row .wp-inputwrap { flex: 1; min-width: 0; }
|
|
79
|
+
.sdui-editor-seedpanel__entity { display: flex; flex-direction: column; gap: 4px; }
|
|
80
|
+
.sdui-editor-seedpanel__json {
|
|
81
|
+
width: 100%; min-height: 72px; resize: vertical;
|
|
82
|
+
font-family: var(--wp-font-mono); font-size: var(--wp-size-xs);
|
|
83
|
+
color: var(--wp-text); background: var(--wp-surface-page);
|
|
84
|
+
border: 1px solid var(--wp-border); border-radius: var(--wp-radius-sm);
|
|
85
|
+
padding: 8px;
|
|
86
|
+
}
|
|
87
|
+
|
|
58
88
|
/* ---------- 편집 화면 ---------- */
|
|
59
89
|
.sdui-editor-layout { flex: 1; min-height: 0; display: flex; flex-direction: column; }
|
|
60
90
|
.sdui-editor-toolbar {
|
|
@@ -92,7 +122,11 @@
|
|
|
92
122
|
background: var(--wp-slate-25);
|
|
93
123
|
}
|
|
94
124
|
.sdui-editor-preview__notice { font-size: 12px; color: var(--wp-text-info); }
|
|
95
|
-
|
|
125
|
+
/* contain: paint — 미리본 다이얼로그의 오버레이(SduiDialog 래퍼가 position:fixed로
|
|
126
|
+
뷰포트에 고정)를 이 상자의 컨테이닝 블록에 가둔다. 없으면 오버레이가 편집기
|
|
127
|
+
전체를 덮어 시딩 버튼·패널이 마우스로 조작 불가였다(0.17.1 검수 실측:
|
|
128
|
+
elementFromPoint=wp-overlay, 클릭 타임아웃). */
|
|
129
|
+
.sdui-editor-preview__body { flex: 1; overflow-y: auto; padding: 24px; position: relative; contain: paint; }
|
|
96
130
|
.sdui-editor-preview__body .sdui-root { display: flex; flex-direction: column; gap: var(--wp-space-4); }
|
|
97
131
|
|
|
98
132
|
/* ---------- 도움말 패널 ---------- */
|
|
@@ -134,7 +168,9 @@
|
|
|
134
168
|
border-bottom: 1px solid var(--wp-border-subtle);
|
|
135
169
|
}
|
|
136
170
|
.sdui-editor-viewer__id { color: var(--wp-text-subtle); }
|
|
137
|
-
|
|
171
|
+
/* contain: paint — 위 .sdui-editor-preview__body와 같은 이유. 뷰어도 다이얼로그
|
|
172
|
+
스펙을 열린 채 그리므로 오버레이가 상단 바·시딩 패널을 덮으면 안 된다. */
|
|
173
|
+
.sdui-editor-viewer__body { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 28px 24px 48px; contain: paint; }
|
|
138
174
|
.sdui-editor-viewer__body .sdui-root { display: flex; flex-direction: column; gap: var(--wp-space-4); }
|
|
139
175
|
|
|
140
176
|
@media (max-width: 900px) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wipco/sdui-editor",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.17.1",
|
|
4
4
|
"description": "SDUI 페이지 스펙 편집기 — 소비 프로젝트가 자기 라우트에 마운트하는 React 컴포넌트",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"sdui",
|
|
@@ -58,14 +58,14 @@
|
|
|
58
58
|
"codemirror": "^6.0.1"
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|
|
61
|
-
"@wipco/sdui": "^0.
|
|
61
|
+
"@wipco/sdui": "^0.17.0",
|
|
62
62
|
"react": ">=18",
|
|
63
63
|
"react-dom": ">=18"
|
|
64
64
|
},
|
|
65
65
|
"devDependencies": {
|
|
66
66
|
"@types/react": "^19.0.0",
|
|
67
67
|
"@types/react-dom": "^19.0.0",
|
|
68
|
-
"@wipco/sdui": "^0.
|
|
68
|
+
"@wipco/sdui": "^0.17.0",
|
|
69
69
|
"tsup": "^8.5.0",
|
|
70
70
|
"tsx": "^4.20.0",
|
|
71
71
|
"typescript": "^5.7.0"
|