@iyulab/data-components 0.1.0 → 0.1.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/CHANGELOG.md +3 -3
- package/README.md +89 -89
- package/dist/components/data-grid/UDataGrid.d.ts +1 -1
- package/dist/components/data-grid/UDataGrid.js +6 -4
- package/dist/components/data-grid/UDataGrid.types.d.ts +3 -0
- package/dist/components/data-view/UDataView.component.d.ts +39 -50
- package/dist/components/data-view/UDataView.component.js +162 -237
- package/dist/components/data-view/UDataView.d.ts +1 -1
- package/dist/components/data-view/UDataView.styles.js +126 -229
- package/dist/components/simple-sheet/USimpleSheet.component.d.ts +138 -0
- package/dist/components/simple-sheet/USimpleSheet.component.js +855 -0
- package/dist/components/simple-sheet/USimpleSheet.d.ts +8 -0
- package/dist/components/simple-sheet/USimpleSheet.styles.d.ts +1 -0
- package/dist/components/simple-sheet/USimpleSheet.styles.js +245 -0
- package/dist/index.d.ts +4 -2
- package/dist/index.js +1 -3
- package/package.json +75 -75
- package/dist/components/data-view/UDataView.js +0 -5
- package/dist/components/index.d.ts +0 -3
- package/dist/styles/devextreme-overrides.css.js +0 -3
- package/dist/utils/devExtremeCssInjection.js +0 -164
- package/dist/utils/index.d.ts +0 -2
- package/dist/utils/shadowDomProtection.js +0 -82
- /package/dist/{utils → utilities}/devExtremeCssInjection.d.ts +0 -0
- /package/dist/{utils → utilities}/shadowDomProtection.d.ts +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import('lit').CSSResult;
|
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
import { css } from 'lit';
|
|
2
|
+
|
|
3
|
+
const styles = css`
|
|
4
|
+
:host {
|
|
5
|
+
display: block;
|
|
6
|
+
width: 100%;
|
|
7
|
+
height: 400px;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.sheet-container {
|
|
11
|
+
width: 100%;
|
|
12
|
+
height: 100%;
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
outline: none;
|
|
15
|
+
border: 1px solid var(--u-border-color, #e2e8f0);
|
|
16
|
+
border-radius: 4px;
|
|
17
|
+
background: var(--u-bg-color, #fff);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.sheet-container:focus-within {
|
|
21
|
+
border-color: var(--u-blue-500, #3b82f6);
|
|
22
|
+
box-shadow: 0 0 0 2px var(--u-blue-100, #dbeafe);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.sheet-scroll {
|
|
26
|
+
width: 100%;
|
|
27
|
+
height: 100%;
|
|
28
|
+
overflow: auto;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.sheet-table {
|
|
32
|
+
border-collapse: collapse;
|
|
33
|
+
table-layout: fixed;
|
|
34
|
+
user-select: none;
|
|
35
|
+
font-family: inherit;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* Corner cell (top-left) */
|
|
39
|
+
.corner {
|
|
40
|
+
position: sticky;
|
|
41
|
+
left: 0;
|
|
42
|
+
top: 0;
|
|
43
|
+
z-index: 4;
|
|
44
|
+
width: 48px;
|
|
45
|
+
min-width: 48px;
|
|
46
|
+
background: var(--u-neutral-100, #f1f5f9);
|
|
47
|
+
border-right: 1px solid var(--u-border-color, #e2e8f0);
|
|
48
|
+
border-bottom: 2px solid var(--u-border-color, #e2e8f0);
|
|
49
|
+
cursor: pointer;
|
|
50
|
+
user-select: none;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.corner:hover {
|
|
54
|
+
background: var(--u-neutral-200, #e2e8f0);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/* Column headers (A, B, C...) */
|
|
58
|
+
.col-header {
|
|
59
|
+
position: sticky;
|
|
60
|
+
top: 0;
|
|
61
|
+
z-index: 2;
|
|
62
|
+
background: var(--u-neutral-100, #f1f5f9);
|
|
63
|
+
padding: 4px 8px;
|
|
64
|
+
text-align: center;
|
|
65
|
+
font-size: 12px;
|
|
66
|
+
font-weight: 600;
|
|
67
|
+
color: var(--u-txt-color-weak, #64748b);
|
|
68
|
+
border-right: 1px solid var(--u-border-color, #e2e8f0);
|
|
69
|
+
border-bottom: 2px solid var(--u-border-color, #e2e8f0);
|
|
70
|
+
white-space: nowrap;
|
|
71
|
+
min-width: 80px;
|
|
72
|
+
cursor: pointer;
|
|
73
|
+
letter-spacing: 0.05em;
|
|
74
|
+
user-select: none;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.col-header.col-selected {
|
|
78
|
+
background: var(--u-blue-200, #bfdbfe);
|
|
79
|
+
color: var(--u-blue-800, #1e40af);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.resize-handle {
|
|
83
|
+
position: absolute;
|
|
84
|
+
right: 0;
|
|
85
|
+
top: 0;
|
|
86
|
+
bottom: 0;
|
|
87
|
+
width: 5px;
|
|
88
|
+
cursor: col-resize;
|
|
89
|
+
z-index: 1;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.resize-handle::after {
|
|
93
|
+
content: '';
|
|
94
|
+
position: absolute;
|
|
95
|
+
right: 1px;
|
|
96
|
+
top: 20%;
|
|
97
|
+
bottom: 20%;
|
|
98
|
+
width: 2px;
|
|
99
|
+
background: transparent;
|
|
100
|
+
border-radius: 1px;
|
|
101
|
+
transition: background 0.15s;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.resize-handle:hover::after {
|
|
105
|
+
background: var(--u-blue-500, #3b82f6);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.sheet-container.is-resizing {
|
|
109
|
+
cursor: col-resize;
|
|
110
|
+
user-select: none;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.sheet-container.is-resizing * {
|
|
114
|
+
cursor: col-resize !important;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* Row number cells */
|
|
118
|
+
.row-num {
|
|
119
|
+
position: sticky;
|
|
120
|
+
left: 0;
|
|
121
|
+
z-index: 1;
|
|
122
|
+
width: 48px;
|
|
123
|
+
min-width: 48px;
|
|
124
|
+
text-align: right;
|
|
125
|
+
padding: 0 6px;
|
|
126
|
+
font-size: 11px;
|
|
127
|
+
color: var(--u-txt-color-weak, #64748b);
|
|
128
|
+
background: var(--u-neutral-50, #f8fafc);
|
|
129
|
+
border-right: 1px solid var(--u-border-color, #e2e8f0);
|
|
130
|
+
border-bottom: 1px solid var(--u-border-color-weak, #f1f5f9);
|
|
131
|
+
cursor: pointer;
|
|
132
|
+
user-select: none;
|
|
133
|
+
vertical-align: middle;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.row-num.row-selected {
|
|
137
|
+
background: var(--u-blue-100, #dbeafe);
|
|
138
|
+
color: var(--u-blue-800, #1e40af);
|
|
139
|
+
font-weight: 600;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* Data cells */
|
|
143
|
+
.cell {
|
|
144
|
+
padding: 0 6px;
|
|
145
|
+
border-right: 1px solid var(--u-border-color-weak, #f1f5f9);
|
|
146
|
+
border-bottom: 1px solid var(--u-border-color-weak, #f1f5f9);
|
|
147
|
+
font-size: 13px;
|
|
148
|
+
color: var(--u-txt-color, #0f172a);
|
|
149
|
+
min-width: 80px;
|
|
150
|
+
overflow: hidden;
|
|
151
|
+
text-overflow: ellipsis;
|
|
152
|
+
white-space: nowrap;
|
|
153
|
+
cursor: cell;
|
|
154
|
+
height: 24px;
|
|
155
|
+
line-height: 24px;
|
|
156
|
+
vertical-align: middle;
|
|
157
|
+
position: relative;
|
|
158
|
+
box-sizing: border-box;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.cell.selected {
|
|
162
|
+
background: var(--u-blue-50, #eff6ff);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* The anchor cell (top-left of selection) */
|
|
166
|
+
.cell.anchor {
|
|
167
|
+
background: var(--u-bg-color, #fff);
|
|
168
|
+
outline: 2px solid var(--u-blue-500, #3b82f6);
|
|
169
|
+
outline-offset: -2px;
|
|
170
|
+
overflow: visible;
|
|
171
|
+
z-index: 1;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/* Editing cell */
|
|
175
|
+
.cell.editing {
|
|
176
|
+
overflow: visible;
|
|
177
|
+
z-index: 2;
|
|
178
|
+
padding: 0;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.cell-input {
|
|
182
|
+
position: absolute;
|
|
183
|
+
inset: -1px;
|
|
184
|
+
width: calc(100% + 2px);
|
|
185
|
+
min-width: 100%;
|
|
186
|
+
height: calc(100% + 2px);
|
|
187
|
+
border: none;
|
|
188
|
+
outline: 2px solid var(--u-blue-500, #3b82f6);
|
|
189
|
+
outline-offset: -1px;
|
|
190
|
+
padding: 0 6px;
|
|
191
|
+
font-size: 13px;
|
|
192
|
+
font-family: inherit;
|
|
193
|
+
color: var(--u-txt-color, #0f172a);
|
|
194
|
+
background: var(--u-bg-color, #fff);
|
|
195
|
+
box-sizing: border-box;
|
|
196
|
+
z-index: 10;
|
|
197
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* Readonly mode */
|
|
201
|
+
:host([readonly]) .cell {
|
|
202
|
+
cursor: default;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
/* ── Dark mode ──
|
|
206
|
+
헤더/셀 배경·텍스트는 CSS 변수(--u-neutral-*, --u-txt-color 등)가
|
|
207
|
+
테마에 따라 자동 처리되므로 선택 상태와 포커스 효과만 재정의한다. */
|
|
208
|
+
|
|
209
|
+
:host-context([theme="dark"]) .sheet-container:focus-within {
|
|
210
|
+
border-color: var(--u-blue-500, #6ba3e3);
|
|
211
|
+
box-shadow: 0 0 0 2px var(--u-blue-100, #1e3a5f);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
:host-context([theme="dark"]) .col-header.col-selected {
|
|
215
|
+
background: var(--u-blue-100, #1e3a5f);
|
|
216
|
+
color: var(--u-blue-800, #c2deff);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
:host-context([theme="dark"]) .row-num.row-selected {
|
|
220
|
+
background: var(--u-blue-100, #1e3a5f);
|
|
221
|
+
color: var(--u-blue-800, #c2deff);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
:host-context([theme="dark"]) .cell.selected {
|
|
225
|
+
background: var(--u-blue-0, #0a1e3d);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
:host-context([theme="dark"]) .cell.anchor {
|
|
229
|
+
background: var(--u-bg-color);
|
|
230
|
+
outline-color: var(--u-blue-500, #6ba3e3);
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
:host-context([theme="dark"]) .resize-handle:hover::after {
|
|
234
|
+
background: var(--u-blue-500, #6ba3e3);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
:host-context([theme="dark"]) .cell-input {
|
|
238
|
+
background: var(--u-bg-color);
|
|
239
|
+
color: var(--u-txt-color);
|
|
240
|
+
outline-color: var(--u-blue-500, #6ba3e3);
|
|
241
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
|
|
242
|
+
}
|
|
243
|
+
`;
|
|
244
|
+
|
|
245
|
+
export { styles };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
1
|
+
export { UDataGrid } from './components/data-grid/UDataGrid';
|
|
2
|
+
export type { UDataGridColumn, UDataGridProps } from './components/data-grid/UDataGrid.types';
|
|
3
|
+
export * from './components/data-view/UDataView';
|
|
4
|
+
export * from './components/simple-sheet/USimpleSheet';
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
export { initShadowDomProtection, registerProtectedStylesheet } from './utils/shadowDomProtection.js';
|
|
2
|
-
export { initDevExtremeCssInjection, injectCssToShadowDoms } from './utils/devExtremeCssInjection.js';
|
|
3
1
|
export { UDataGrid } from './components/data-grid/UDataGrid.js';
|
|
4
|
-
import './components/data-view/UDataView.js';
|
|
5
2
|
export { UDataView } from './components/data-view/UDataView.component.js';
|
|
3
|
+
export { USimpleSheet } from './components/simple-sheet/USimpleSheet.component.js';
|
package/package.json
CHANGED
|
@@ -1,75 +1,75 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@iyulab/data-components",
|
|
3
|
-
"description": "iyulab data visualization components",
|
|
4
|
-
"version": "0.1.
|
|
5
|
-
"keywords": [
|
|
6
|
-
"iyulab",
|
|
7
|
-
"web-components",
|
|
8
|
-
"lit-element"
|
|
9
|
-
],
|
|
10
|
-
"license": "MIT",
|
|
11
|
-
"author": "iyulab",
|
|
12
|
-
"repository": {
|
|
13
|
-
"type": "git",
|
|
14
|
-
"url": "https://github.com/iyulab/node-data-components.git"
|
|
15
|
-
},
|
|
16
|
-
"files": [
|
|
17
|
-
"dist",
|
|
18
|
-
"LICENSE",
|
|
19
|
-
"README.md",
|
|
20
|
-
"CHANGELOG.md",
|
|
21
|
-
"package.json"
|
|
22
|
-
],
|
|
23
|
-
"type": "module",
|
|
24
|
-
"types": "./dist/index.d.ts",
|
|
25
|
-
"exports": {
|
|
26
|
-
".": {
|
|
27
|
-
"types": "./
|
|
28
|
-
"import": "./
|
|
29
|
-
},
|
|
30
|
-
"./dist/*": {
|
|
31
|
-
"types": "./
|
|
32
|
-
"import": "./
|
|
33
|
-
},
|
|
34
|
-
"./init": {
|
|
35
|
-
"types": "./
|
|
36
|
-
"import": "./
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
"sideEffects": [
|
|
40
|
-
"./dist/utilities/shadowDomProtection.js",
|
|
41
|
-
"./dist/utilities/devExtremeCssInjection.js",
|
|
42
|
-
"./dist/components/data-grid/UDataGrid.js",
|
|
43
|
-
"./dist/components/data-view/UDataView.js",
|
|
44
|
-
"./dist/components/simple-sheet/USimpleSheet.js",
|
|
45
|
-
"./dist/init.js"
|
|
46
|
-
],
|
|
47
|
-
"scripts": {
|
|
48
|
-
"start": "vite",
|
|
49
|
-
"build": "eslint && vite build"
|
|
50
|
-
},
|
|
51
|
-
"dependencies": {
|
|
52
|
-
"@iyulab/components": "^0.4.0",
|
|
53
|
-
"devextreme": "^25.2.4",
|
|
54
|
-
"devextreme-react": "^25.2.4",
|
|
55
|
-
"lit": "^3.3.2",
|
|
56
|
-
"react": "^19.2.4",
|
|
57
|
-
"react-dom": "^19.2.4"
|
|
58
|
-
},
|
|
59
|
-
"devDependencies": {
|
|
60
|
-
"@eslint/js": "^9.39.3",
|
|
61
|
-
"@lit/react": "^1.0.8",
|
|
62
|
-
"@types/node": "^25.3.2",
|
|
63
|
-
"@types/react": "^19.2.14",
|
|
64
|
-
"@types/react-dom": "^19.2.3",
|
|
65
|
-
"@vitejs/plugin-react": "^5.1.4",
|
|
66
|
-
"eslint": "^9.39.3",
|
|
67
|
-
"eslint-plugin-react-hooks": "^7.0.1",
|
|
68
|
-
"eslint-plugin-react-refresh": "^0.5.2",
|
|
69
|
-
"globals": "^17.3.0",
|
|
70
|
-
"typescript": "~5.9.3",
|
|
71
|
-
"typescript-eslint": "^8.56.1",
|
|
72
|
-
"vite": "^7.3.1",
|
|
73
|
-
"vite-plugin-dts": "^4.5.4"
|
|
74
|
-
}
|
|
75
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@iyulab/data-components",
|
|
3
|
+
"description": "iyulab data visualization components",
|
|
4
|
+
"version": "0.1.1",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"iyulab",
|
|
7
|
+
"web-components",
|
|
8
|
+
"lit-element"
|
|
9
|
+
],
|
|
10
|
+
"license": "MIT",
|
|
11
|
+
"author": "iyulab",
|
|
12
|
+
"repository": {
|
|
13
|
+
"type": "git",
|
|
14
|
+
"url": "https://github.com/iyulab/node-data-components.git"
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist",
|
|
18
|
+
"LICENSE",
|
|
19
|
+
"README.md",
|
|
20
|
+
"CHANGELOG.md",
|
|
21
|
+
"package.json"
|
|
22
|
+
],
|
|
23
|
+
"type": "module",
|
|
24
|
+
"types": "./dist/index.d.ts",
|
|
25
|
+
"exports": {
|
|
26
|
+
".": {
|
|
27
|
+
"types": "./dist/index.d.ts",
|
|
28
|
+
"import": "./dist/index.js"
|
|
29
|
+
},
|
|
30
|
+
"./dist/*": {
|
|
31
|
+
"types": "./dist/*.d.ts",
|
|
32
|
+
"import": "./dist/*"
|
|
33
|
+
},
|
|
34
|
+
"./init": {
|
|
35
|
+
"types": "./dist/init.d.ts",
|
|
36
|
+
"import": "./dist/init.js"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
"sideEffects": [
|
|
40
|
+
"./dist/utilities/shadowDomProtection.js",
|
|
41
|
+
"./dist/utilities/devExtremeCssInjection.js",
|
|
42
|
+
"./dist/components/data-grid/UDataGrid.js",
|
|
43
|
+
"./dist/components/data-view/UDataView.js",
|
|
44
|
+
"./dist/components/simple-sheet/USimpleSheet.js",
|
|
45
|
+
"./dist/init.js"
|
|
46
|
+
],
|
|
47
|
+
"scripts": {
|
|
48
|
+
"start": "vite",
|
|
49
|
+
"build": "eslint && vite build"
|
|
50
|
+
},
|
|
51
|
+
"dependencies": {
|
|
52
|
+
"@iyulab/components": "^0.4.0",
|
|
53
|
+
"devextreme": "^25.2.4",
|
|
54
|
+
"devextreme-react": "^25.2.4",
|
|
55
|
+
"lit": "^3.3.2",
|
|
56
|
+
"react": "^19.2.4",
|
|
57
|
+
"react-dom": "^19.2.4"
|
|
58
|
+
},
|
|
59
|
+
"devDependencies": {
|
|
60
|
+
"@eslint/js": "^9.39.3",
|
|
61
|
+
"@lit/react": "^1.0.8",
|
|
62
|
+
"@types/node": "^25.3.2",
|
|
63
|
+
"@types/react": "^19.2.14",
|
|
64
|
+
"@types/react-dom": "^19.2.3",
|
|
65
|
+
"@vitejs/plugin-react": "^5.1.4",
|
|
66
|
+
"eslint": "^9.39.3",
|
|
67
|
+
"eslint-plugin-react-hooks": "^7.0.1",
|
|
68
|
+
"eslint-plugin-react-refresh": "^0.5.2",
|
|
69
|
+
"globals": "^17.3.0",
|
|
70
|
+
"typescript": "~5.9.3",
|
|
71
|
+
"typescript-eslint": "^8.56.1",
|
|
72
|
+
"vite": "^7.3.1",
|
|
73
|
+
"vite-plugin-dts": "^4.5.4"
|
|
74
|
+
}
|
|
75
|
+
}
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
const devExtremeOverridesCssText = "/* ================================================================\r\n DevExtreme Custom Styles for Shadow DOM\r\n - 이 스타일들은 Shadow DOM에 주입되어 DataGrid 등에 적용됨\r\n - dx.light.css와 함께 adoptedStyleSheets로 주입됨\r\n ================================================================ */\r\n\r\n/* Prevent DevExtreme from using 100vw which ignores sidebar */\r\n.dx-widget {\r\n max-width: 100% !important;\r\n}\r\n\r\n/* DevExtreme DataGrid 스타일 보정 */\r\n.dx-datagrid {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\r\n background-color: #fff;\r\n border: 1px solid #ddd;\r\n border-radius: 4px;\r\n}\r\n\r\n.dx-datagrid .dx-header-row {\r\n background-color: #f8f9fa;\r\n border-bottom: 2px solid #dee2e6;\r\n}\r\n\r\n.dx-datagrid .dx-header-row .dx-header-cell {\r\n border-right: 1px solid #dee2e6;\r\n padding: 12px 8px;\r\n font-weight: 600;\r\n color: #495057;\r\n}\r\n\r\n.dx-datagrid .dx-data-row {\r\n border-bottom: 1px solid #dee2e6;\r\n}\r\n\r\n.dx-datagrid .dx-data-row .dx-cell {\r\n border-right: 1px solid #f1f3f4;\r\n padding: 10px 8px;\r\n}\r\n\r\n.dx-datagrid .dx-data-row:hover {\r\n background-color: #f8f9fa;\r\n}\r\n\r\n.dx-datagrid .dx-data-row.dx-row-alt {\r\n background-color: #fbfbfb;\r\n}\r\n\r\n.dx-datagrid .dx-data-row.dx-row-alt:hover {\r\n background-color: #f5f5f5;\r\n}\r\n\r\n/* 그룹 패널 스타일 */\r\n.dx-datagrid .dx-group-panel {\r\n background-color: #e9ecef;\r\n border-bottom: 1px solid #dee2e6;\r\n padding: 10px 15px;\r\n min-height: 40px;\r\n}\r\n\r\n.dx-datagrid .dx-group-panel-message {\r\n color: #6c757d;\r\n font-style: italic;\r\n}\r\n\r\n/* 필터 행 스타일 */\r\n.dx-datagrid .dx-filter-row {\r\n background-color: #fff;\r\n}\r\n\r\n.dx-datagrid .dx-filter-row .dx-cell {\r\n border-bottom: 1px solid #dee2e6;\r\n padding: 5px 8px;\r\n}\r\n\r\n/* 페이징 스타일 */\r\n.dx-datagrid .dx-pager {\r\n background-color: #f8f9fa;\r\n border-top: 1px solid #dee2e6;\r\n padding: 10px;\r\n}\r\n\r\n/* 도구 모음 스타일 */\r\n.dx-datagrid .dx-toolbar {\r\n background-color: #f8f9fa;\r\n border-bottom: 1px solid #dee2e6;\r\n padding: 8px 12px;\r\n}\r\n\r\n/* 로딩 패널 스타일 */\r\n.dx-loadpanel {\r\n background-color: rgba(255, 255, 255, 0.9);\r\n}\r\n\r\n.dx-loadpanel .dx-loadpanel-content {\r\n border: 1px solid #dee2e6;\r\n border-radius: 4px;\r\n background-color: #fff;\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n/* 선택 체크박스 스타일 */\r\n.dx-datagrid .dx-select-checkbox {\r\n margin: 0 auto;\r\n}\r\n\r\n/* 고정된 컬럼 스타일 */\r\n.dx-datagrid .dx-col-fixed {\r\n background-color: #fff;\r\n box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n/* 상태별 컬럼 너비 조정 */\r\n.dx-datagrid .dx-command-select {\r\n width: 50px !important;\r\n min-width: 50px !important;\r\n}\r\n\r\n/* 반응형 디자인 */\r\n@media (max-width: 768px) {\r\n .dx-datagrid .dx-cell {\r\n padding: 8px 4px;\r\n font-size: 14px;\r\n }\r\n\r\n .dx-datagrid .dx-header-cell {\r\n padding: 10px 4px;\r\n font-size: 14px;\r\n }\r\n}\r\n\r\n/* DevExtreme 아이콘 폰트 문제 해결 */\r\n.dx-icon {\r\n font-family: 'DXIcons', 'Helvetica Neue', 'Segoe UI', sans-serif !important;\r\n}\r\n\r\n/* 버튼 스타일 개선 */\r\n.dx-button {\r\n border-radius: 4px;\r\n}\r\n\r\n.dx-button.dx-button-normal {\r\n background-color: #007bff;\r\n border-color: #007bff;\r\n color: #fff;\r\n}\r\n\r\n.dx-button.dx-button-normal:hover {\r\n background-color: #0056b3;\r\n border-color: #0056b3;\r\n}\r\n\r\n/* 입력 필드 스타일 */\r\n.dx-texteditor {\r\n border-radius: 4px;\r\n}\r\n\r\n.dx-texteditor .dx-texteditor-input {\r\n padding: 8px 12px;\r\n}\r\n\r\n/* 셀렉트박스 스타일 */\r\n.dx-selectbox {\r\n border-radius: 4px;\r\n}\r\n\r\n/* 날짜 피커 스타일 */\r\n.dx-datebox {\r\n border-radius: 4px;\r\n}\r\n";
|
|
2
|
-
|
|
3
|
-
export { devExtremeOverridesCssText as default };
|
|
@@ -1,164 +0,0 @@
|
|
|
1
|
-
import devExtremeCssText from 'devextreme/dist/css/dx.light.css?inline';
|
|
2
|
-
import devExtremeOverridesCssText from '../styles/devextreme-overrides.css.js';
|
|
3
|
-
import { registerProtectedStylesheet } from './shadowDomProtection.js';
|
|
4
|
-
|
|
5
|
-
let isInitialized = false;
|
|
6
|
-
let devExtremeStyleSheet = null;
|
|
7
|
-
let devExtremeOverridesStyleSheet = null;
|
|
8
|
-
const injectedShadowRoots = /* @__PURE__ */ new WeakSet();
|
|
9
|
-
function injectToShadowRoot(shadowRoot) {
|
|
10
|
-
if (!devExtremeStyleSheet || injectedShadowRoots.has(shadowRoot)) return;
|
|
11
|
-
try {
|
|
12
|
-
const currentSheets = [...shadowRoot.adoptedStyleSheets];
|
|
13
|
-
const sheetsToAdd = [];
|
|
14
|
-
if (!currentSheets.includes(devExtremeStyleSheet)) {
|
|
15
|
-
sheetsToAdd.push(devExtremeStyleSheet);
|
|
16
|
-
}
|
|
17
|
-
if (devExtremeOverridesStyleSheet && !currentSheets.includes(devExtremeOverridesStyleSheet)) {
|
|
18
|
-
sheetsToAdd.push(devExtremeOverridesStyleSheet);
|
|
19
|
-
}
|
|
20
|
-
if (sheetsToAdd.length > 0) {
|
|
21
|
-
shadowRoot.adoptedStyleSheets = [...currentSheets, ...sheetsToAdd];
|
|
22
|
-
injectedShadowRoots.add(shadowRoot);
|
|
23
|
-
if (process.env.NODE_ENV === "development") {
|
|
24
|
-
console.log("[data-components] DevExtreme CSS injected into Shadow DOM");
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
} catch (e) {
|
|
28
|
-
console.warn("[data-components] Failed to inject DevExtreme CSS:", e);
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
function injectToExistingShadowRoots() {
|
|
32
|
-
document.querySelectorAll("*").forEach((el) => {
|
|
33
|
-
if (el.shadowRoot) {
|
|
34
|
-
injectToShadowRoot(el.shadowRoot);
|
|
35
|
-
}
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
function initDevExtremeCssInjection() {
|
|
39
|
-
if (isInitialized) return;
|
|
40
|
-
if (typeof window === "undefined") return;
|
|
41
|
-
try {
|
|
42
|
-
devExtremeStyleSheet = new CSSStyleSheet();
|
|
43
|
-
devExtremeStyleSheet.replaceSync(devExtremeCssText || "");
|
|
44
|
-
if (process.env.NODE_ENV === "development") {
|
|
45
|
-
console.log("[data-components] DevExtreme base CSS stylesheet created");
|
|
46
|
-
console.log("[data-components] Base CSS length:", devExtremeCssText?.length || 0);
|
|
47
|
-
}
|
|
48
|
-
} catch (e) {
|
|
49
|
-
console.warn("[data-components] Failed to create DevExtreme base CSSStyleSheet:", e);
|
|
50
|
-
return;
|
|
51
|
-
}
|
|
52
|
-
try {
|
|
53
|
-
if (devExtremeOverridesCssText && devExtremeOverridesCssText.length > 0) {
|
|
54
|
-
devExtremeOverridesStyleSheet = new CSSStyleSheet();
|
|
55
|
-
devExtremeOverridesStyleSheet.replaceSync(devExtremeOverridesCssText);
|
|
56
|
-
registerProtectedStylesheet(devExtremeOverridesStyleSheet);
|
|
57
|
-
if (process.env.NODE_ENV === "development") {
|
|
58
|
-
console.log("[data-components] DevExtreme overrides CSS stylesheet created");
|
|
59
|
-
console.log("[data-components] Overrides CSS length:", devExtremeOverridesCssText.length);
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
} catch (e) {
|
|
63
|
-
console.warn("[data-components] Failed to create DevExtreme overrides CSSStyleSheet:", e);
|
|
64
|
-
}
|
|
65
|
-
const observer = new MutationObserver((mutations) => {
|
|
66
|
-
mutations.forEach((mutation) => {
|
|
67
|
-
mutation.addedNodes.forEach((node) => {
|
|
68
|
-
if (node instanceof Element) {
|
|
69
|
-
if (node.shadowRoot) {
|
|
70
|
-
injectToShadowRoot(node.shadowRoot);
|
|
71
|
-
}
|
|
72
|
-
node.querySelectorAll("*").forEach((el) => {
|
|
73
|
-
if (el.shadowRoot) {
|
|
74
|
-
injectToShadowRoot(el.shadowRoot);
|
|
75
|
-
}
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
});
|
|
79
|
-
});
|
|
80
|
-
});
|
|
81
|
-
const startObserving = () => {
|
|
82
|
-
injectToExistingShadowRoots();
|
|
83
|
-
observer.observe(document.body, { childList: true, subtree: true });
|
|
84
|
-
setTimeout(injectToExistingShadowRoots, 1e3);
|
|
85
|
-
setTimeout(injectToExistingShadowRoots, 3e3);
|
|
86
|
-
};
|
|
87
|
-
if (document.readyState === "loading") {
|
|
88
|
-
document.addEventListener("DOMContentLoaded", startObserving);
|
|
89
|
-
} else {
|
|
90
|
-
startObserving();
|
|
91
|
-
}
|
|
92
|
-
isInitialized = true;
|
|
93
|
-
}
|
|
94
|
-
const customStylesheets = [];
|
|
95
|
-
function injectCustomStylesToShadowRoot(shadowRoot) {
|
|
96
|
-
if (customStylesheets.length === 0) return;
|
|
97
|
-
try {
|
|
98
|
-
const currentSheets = [...shadowRoot.adoptedStyleSheets];
|
|
99
|
-
const newSheets = customStylesheets.filter((sheet) => !currentSheets.includes(sheet));
|
|
100
|
-
if (newSheets.length > 0) {
|
|
101
|
-
shadowRoot.adoptedStyleSheets = [...currentSheets, ...newSheets];
|
|
102
|
-
}
|
|
103
|
-
} catch (e) {
|
|
104
|
-
console.warn("[data-components] Failed to inject custom styles:", e);
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
function injectCssToShadowDoms(cssText) {
|
|
108
|
-
if (typeof window === "undefined") return null;
|
|
109
|
-
try {
|
|
110
|
-
const stylesheet = new CSSStyleSheet();
|
|
111
|
-
stylesheet.replaceSync(cssText || "");
|
|
112
|
-
registerProtectedStylesheet(stylesheet);
|
|
113
|
-
customStylesheets.push(stylesheet);
|
|
114
|
-
document.querySelectorAll("*").forEach((el) => {
|
|
115
|
-
if (el.shadowRoot) {
|
|
116
|
-
const currentSheets = [...el.shadowRoot.adoptedStyleSheets];
|
|
117
|
-
if (!currentSheets.includes(stylesheet)) {
|
|
118
|
-
el.shadowRoot.adoptedStyleSheets = [...currentSheets, stylesheet];
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
});
|
|
122
|
-
setupCustomStylesObserver();
|
|
123
|
-
if (process.env.NODE_ENV === "development") {
|
|
124
|
-
console.log("[data-components] Custom CSS registered for Shadow DOM injection");
|
|
125
|
-
}
|
|
126
|
-
return stylesheet;
|
|
127
|
-
} catch (e) {
|
|
128
|
-
console.warn("[data-components] Failed to inject custom CSS:", e);
|
|
129
|
-
return null;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
let customStylesObserverInitialized = false;
|
|
133
|
-
function setupCustomStylesObserver() {
|
|
134
|
-
if (customStylesObserverInitialized) return;
|
|
135
|
-
if (typeof window === "undefined") return;
|
|
136
|
-
const observer = new MutationObserver((mutations) => {
|
|
137
|
-
mutations.forEach((mutation) => {
|
|
138
|
-
mutation.addedNodes.forEach((node) => {
|
|
139
|
-
if (node instanceof Element) {
|
|
140
|
-
if (node.shadowRoot) {
|
|
141
|
-
injectCustomStylesToShadowRoot(node.shadowRoot);
|
|
142
|
-
}
|
|
143
|
-
node.querySelectorAll("*").forEach((el) => {
|
|
144
|
-
if (el.shadowRoot) {
|
|
145
|
-
injectCustomStylesToShadowRoot(el.shadowRoot);
|
|
146
|
-
}
|
|
147
|
-
});
|
|
148
|
-
}
|
|
149
|
-
});
|
|
150
|
-
});
|
|
151
|
-
});
|
|
152
|
-
const startObserving = () => {
|
|
153
|
-
observer.observe(document.body, { childList: true, subtree: true });
|
|
154
|
-
};
|
|
155
|
-
if (document.readyState === "loading") {
|
|
156
|
-
document.addEventListener("DOMContentLoaded", startObserving);
|
|
157
|
-
} else {
|
|
158
|
-
startObserving();
|
|
159
|
-
}
|
|
160
|
-
customStylesObserverInitialized = true;
|
|
161
|
-
}
|
|
162
|
-
initDevExtremeCssInjection();
|
|
163
|
-
|
|
164
|
-
export { initDevExtremeCssInjection, injectCssToShadowDoms };
|
package/dist/utils/index.d.ts
DELETED