@nethru/ui 1.0.33 → 1.0.35

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 CHANGED
@@ -1,28 +1,28 @@
1
- # <center>Nethru UI</center>
2
- * * *
3
- Nethru UI is a wrapper library of [MUI](https://mui.com) components that features our implementation of Google's Material Design system.
4
-
5
-
6
- ### Installation
7
- * * *
8
- Install the package in your project directory with:
9
- ```
10
- npm install @nethru/ui
11
- ```
12
-
13
-
14
-
15
- ### Documentation
16
- * * *
17
- Visit [document](https://nethru.atlassian.net/wiki/spaces/UIUX/overview) to view the full documentation.
18
-
19
-
20
- ### Examples
21
- * * *
22
- Visit [examples](https://nethru.atlassian.net/wiki/spaces/UIUX/pages/916422813/UI) to view several examples.
23
-
24
-
25
- ### Changelog
26
- * * *
27
- The [changelog](https://nethru.atlassian.net/wiki/spaces/combuff/overview) is regularly updated to reflect what's changed in each new release.
28
-
1
+ # <center>Nethru UI</center>
2
+ * * *
3
+ Nethru UI is a wrapper library of [MUI](https://mui.com) components that features our implementation of Google's Material Design system.
4
+
5
+
6
+ ### Installation
7
+ * * *
8
+ Install the package in your project directory with:
9
+ ```
10
+ npm install @nethru/ui
11
+ ```
12
+
13
+
14
+
15
+ ### Documentation
16
+ * * *
17
+ Visit [document](https://nethru.atlassian.net/wiki/spaces/UIUX/overview) to view the full documentation.
18
+
19
+
20
+ ### Examples
21
+ * * *
22
+ Visit [examples](https://nethru.atlassian.net/wiki/spaces/UIUX/pages/916422813/UI) to view several examples.
23
+
24
+
25
+ ### Changelog
26
+ * * *
27
+ The [changelog](https://nethru.atlassian.net/wiki/spaces/combuff/overview) is regularly updated to reflect what's changed in each new release.
28
+
@@ -8,6 +8,8 @@ export default function ColumnedSection({
8
8
  columns,
9
9
  labels = [],
10
10
  contents = [],
11
+ horizontalGap = 1,
12
+ verticalGap = 0.5,
11
13
  sx
12
14
  }) {
13
15
  const width = useMemo(() => {
@@ -28,9 +30,9 @@ export default function ColumnedSection({
28
30
  xs: 12,
29
31
  children: /*#__PURE__*/_jsx(Stack, {
30
32
  direction: "row",
31
- gap: 1,
33
+ gap: horizontalGap,
32
34
  children: labels.map((label, index) => /*#__PURE__*/_jsx(Stack, {
33
- spacing: 1,
35
+ gap: verticalGap,
34
36
  sx: {
35
37
  width: width
36
38
  },
@@ -46,9 +48,9 @@ export default function ColumnedSection({
46
48
  xs: 12,
47
49
  children: /*#__PURE__*/_jsx(Stack, {
48
50
  direction: "row",
49
- gap: 1,
51
+ gap: horizontalGap,
50
52
  children: contents.map((content, index) => /*#__PURE__*/_jsx(Stack, {
51
- spacing: 1,
53
+ gap: verticalGap,
52
54
  sx: {
53
55
  ...styles,
54
56
  ...sx
package/dist/Editor.js CHANGED
@@ -7,7 +7,7 @@ import { useMemo, useState } from "react";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
9
  export default function Editor({
10
- editable = true,
10
+ readOnly = false,
11
11
  error = false,
12
12
  helperText,
13
13
  basicSetup,
@@ -20,23 +20,23 @@ export default function Editor({
20
20
  const [focused, setFocused] = useState(false);
21
21
  const styles = useMemo(() => {
22
22
  return {
23
- borderBottom: focused ? `3px solid ${error ? '#d32f2f' : '#1976d2'}` : `${editable ? '2px' : '0px'} solid rgba(0, 0, 0, 0.42)`
23
+ borderBottom: focused ? `3px solid ${error ? '#d32f2f' : '#1976d2'}` : `${!readOnly ? '2px' : '0px'} solid rgba(0, 0, 0, 0.42)`
24
24
  };
25
- }, [editable, error, focused]);
25
+ }, [readOnly, error, focused]);
26
26
  const handleUpdate = viewUpdate => {
27
27
  setFocused(viewUpdate.view.hasFocus);
28
28
  if (onUpdate) onUpdate(viewUpdate);
29
29
  };
30
30
  return /*#__PURE__*/_jsxs(Box, {
31
31
  children: [/*#__PURE__*/_jsx(CodeMirror, {
32
- editable: editable,
32
+ editable: !readOnly,
33
33
  extensions: [jsonFormat ? json() : javascript({
34
34
  jsx: true
35
35
  }), EditorView.lineWrapping, ...extensions],
36
36
  basicSetup: {
37
37
  ...basicSetup,
38
38
  highlightActiveLineGutter: false,
39
- highlightActiveLine: editable
39
+ highlightActiveLine: !readOnly
40
40
  },
41
41
  onUpdate: handleUpdate,
42
42
  style: {
@@ -11,6 +11,9 @@ export default function PropertyTable({
11
11
  }) {
12
12
  const styles = useMemo(() => {
13
13
  const result = {
14
+ '&.MuiDataGrid-root': {
15
+ borderBottom: 'none'
16
+ },
14
17
  '.MuiDataGrid-columnHeaders': {
15
18
  backgroundColor: '#f8f9fa'
16
19
  },
@@ -1,59 +1,59 @@
1
- /* variable */
2
- :root {
3
- --body-background-color: #f8f9fa;
4
- --gnb-height: 64px;
5
- --primary-menu-width: 56px;
6
- --secondary-menu-width: 256px;
7
- }
8
-
9
-
10
- /* global */
11
- html, body {
12
- margin: 0;
13
- height: 100%;
14
- }
15
-
16
- #root {
17
- display: flex;
18
- flex-direction: column;
19
- height: 100%;
20
- }
21
-
22
-
23
- /* margin */
24
- .ml-auto {
25
- margin-left: auto;
26
- }
27
- .mr-auto {
28
- margin-right: auto;
29
- }
30
- .mt-auto {
31
- margin-top: auto;
32
- }
33
- .mt-bottom {
34
- margin-bottom: auto;
35
- }
36
-
37
-
38
- /* Highchart */
39
- .highcharts-tooltip-box {
40
- fill-opacity: 0;
41
- }
42
-
43
- .highcharts-tooltip > span {
44
- background: #fff;
45
- border: 1px solid #ccc;
46
- border-radius: 3px;
47
- padding: 8px;
48
- }
49
-
50
-
51
- /* CodeMirror */
52
- .cm-theme-light {
53
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
54
- font-size: 14px;
55
- }
56
-
57
- .cm-editor, .cm-editor.cm-focused {
58
- outline: 1px solid #eaeaea;
1
+ /* variable */
2
+ :root {
3
+ --body-background-color: #f8f9fa;
4
+ --gnb-height: 64px;
5
+ --primary-menu-width: 56px;
6
+ --secondary-menu-width: 256px;
7
+ }
8
+
9
+
10
+ /* global */
11
+ html, body {
12
+ margin: 0;
13
+ height: 100%;
14
+ }
15
+
16
+ #root {
17
+ display: flex;
18
+ flex-direction: column;
19
+ height: 100%;
20
+ }
21
+
22
+
23
+ /* margin */
24
+ .ml-auto {
25
+ margin-left: auto;
26
+ }
27
+ .mr-auto {
28
+ margin-right: auto;
29
+ }
30
+ .mt-auto {
31
+ margin-top: auto;
32
+ }
33
+ .mt-bottom {
34
+ margin-bottom: auto;
35
+ }
36
+
37
+
38
+ /* Highchart */
39
+ .highcharts-tooltip-box {
40
+ fill-opacity: 0;
41
+ }
42
+
43
+ .highcharts-tooltip > span {
44
+ background: #fff;
45
+ border: 1px solid #ccc;
46
+ border-radius: 3px;
47
+ padding: 8px;
48
+ }
49
+
50
+
51
+ /* CodeMirror */
52
+ .cm-theme-light {
53
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
54
+ font-size: 14px;
55
+ }
56
+
57
+ .cm-editor, .cm-editor.cm-focused {
58
+ outline: 1px solid #eaeaea;
59
59
  }
@@ -1,303 +1,303 @@
1
- [
2
- {
3
- "id": "0",
4
- "name": "모니터링",
5
- "href": "/monitor",
6
- "sections": [
7
- {
8
- "id": "01",
9
- "name": "",
10
- "menu": [
11
- {
12
- "id": "011",
13
- "name": "대시보드",
14
- "href": "/report/dashboard",
15
- "submenu": []
16
- }
17
- ]
18
- },
19
- {
20
- "id": "02",
21
- "name": "태스크",
22
- "menu": [
23
- {
24
- "id": "021",
25
- "name": "수집",
26
- "href": "/report/collect",
27
- "submenu": []
28
- },
29
- {
30
- "id": "022",
31
- "name": "변환",
32
- "href": "/report/convert",
33
- "submenu": []
34
- },
35
- {
36
- "id": "023",
37
- "name": "전송",
38
- "href": "/report/transport",
39
- "submenu": []
40
- }
41
- ]
42
- }
43
- ]
44
- },
45
- {
46
- "id": "1",
47
- "name": "태깅",
48
- "href": "/tagging",
49
- "sections": [
50
- {
51
- "id": "10",
52
- "name": "",
53
- "menu": [
54
- {
55
- "id": "101",
56
- "name": "태그",
57
- "href": "/tagging/tag",
58
- "submenu": []
59
- },
60
- {
61
- "id": "102",
62
- "name": "트리거",
63
- "href": "/tagging/trigger",
64
- "submenu": []
65
- },
66
- {
67
- "id": "103",
68
- "name": "변수",
69
- "href": "/tagging/variable",
70
- "submenu": []
71
- },
72
- {
73
- "id": "104",
74
- "name": "변수 그룹",
75
- "href": "/tagging/vgroup",
76
- "submenu": []
77
- }
78
- ]
79
- },
80
- {
81
- "id": "11",
82
- "name": "",
83
- "menu": [
84
- {
85
- "id": "111",
86
- "name": "디버그 뷰",
87
- "href": "/tagging/debugview",
88
- "submenu": []
89
- }
90
- ]
91
- }
92
- ]
93
- },
94
- {
95
- "id": "2",
96
- "name": "태스크",
97
- "href": "/task",
98
- "sections": [
99
- {
100
- "id": "21",
101
- "name": "",
102
- "menu": [
103
- {
104
- "id": "211",
105
- "name": "모니터링",
106
- "href": "/task/monitor",
107
- "submenu": []
108
- }
109
- ]
110
- },
111
- {
112
- "id": "22",
113
- "name": "수집",
114
- "menu": [
115
- {
116
- "id": "221",
117
- "name": "관리",
118
- "href": "/task/collect",
119
- "container": false,
120
- "submenu": []
121
- },
122
- {
123
- "id": "222",
124
- "name": "수집 결과",
125
- "href": "/task/collect/result",
126
- "submenu": []
127
- },
128
- {
129
- "id": "223",
130
- "name": "실행 로그",
131
- "href": "/task/collect/console",
132
- "container": false,
133
- "submenu": []
134
- }
135
- ]
136
- },
137
- {
138
- "id": "23",
139
- "name": "변환",
140
- "menu": [
141
- {
142
- "id": "231",
143
- "name": "관리",
144
- "href": "/task/convert/list",
145
- "submenu": []
146
- },
147
- {
148
- "id": "232",
149
- "name": "변환 결과",
150
- "href": "/task/convert/result",
151
- "submenu": []
152
- },
153
- {
154
- "id": "234",
155
- "name": "실행 로그",
156
- "href": "/task/convert/console",
157
- "container": false,
158
- "submenu": []
159
- }
160
- ]
161
- },
162
- {
163
- "id": "24",
164
- "name": "전송",
165
- "menu": [
166
- {
167
- "id": "241",
168
- "name": "관리",
169
- "href": "/task/transport/list",
170
- "submenu": []
171
- },
172
- {
173
- "id": "242",
174
- "name": "전송 결과",
175
- "href": "/task/transport/result",
176
- "submenu": []
177
- },
178
- {
179
- "id": "243",
180
- "name": "실행 로그",
181
- "href": "/task/transport/console",
182
- "container": false,
183
- "submenu": []
184
- }
185
- ]
186
- }
187
- ]
188
- },
189
- {
190
- "id": "3",
191
- "name": "카프카",
192
- "href": "/kafka",
193
- "sections": [
194
- {
195
- "id": "31",
196
- "name": "모니터링",
197
- "menu": [
198
- {
199
- "id": "311",
200
- "name": "시스템",
201
- "href": "/kafka/monitor/system",
202
- "submenu": []
203
- },
204
- {
205
- "id": "312",
206
- "name": "처리 및 지연",
207
- "href": "/kafka/monitor/lag",
208
- "submenu": []
209
- }
210
- ]
211
- },
212
- {
213
- "id": "32",
214
- "name": "브로커",
215
- "menu": [
216
- {
217
- "id": "321",
218
- "name": "관리",
219
- "href": "/kafka/broker/edit",
220
- "container": false,
221
- "submenu": []
222
- },
223
- {
224
- "id": "322",
225
- "name": "실행 로그",
226
- "href": "/kafka/broker/console",
227
- "container": false,
228
- "submenu": []
229
- }
230
- ]
231
- },
232
- {
233
- "id": "33",
234
- "name": "커넥트",
235
- "menu": [
236
- {
237
- "id": "331",
238
- "name": "관리",
239
- "href": "/kafka/connect/edit",
240
- "submenu": []
241
- },
242
- {
243
- "id": "332",
244
- "name": "실행 로그",
245
- "href": "/kafka/connect/console",
246
- "container": false,
247
- "submenu": []
248
- }
249
- ]
250
- },
251
- {
252
- "id": "34",
253
- "name": "토픽",
254
- "menu": [
255
- {
256
- "id": "341",
257
- "name": "관리",
258
- "href": "/kafka/topic",
259
- "submenu": []
260
- }
261
- ]
262
- }
263
- ]
264
- },
265
- {
266
- "id": "4",
267
- "name": "관리",
268
- "href": "/settings",
269
- "last": true,
270
- "sections": [
271
- {
272
- "id": "41",
273
- "name": "",
274
- "menu": [
275
- {
276
- "id": "411",
277
- "name": "에이전트 관리",
278
- "href": "/settings/agent",
279
- "submenu": []
280
- },
281
- {
282
- "id": "412",
283
- "name": "컨테이너 관리",
284
- "href": "/settings/container",
285
- "submenu": []
286
- },
287
- {
288
- "id": "413",
289
- "name": "실행 로그 설정",
290
- "href": "/settings/consolelog",
291
- "submenu": []
292
- },
293
- {
294
- "id": "414",
295
- "name": "회원 관리",
296
- "href": "/settings/account",
297
- "submenu": []
298
- }
299
- ]
300
- }
301
- ]
302
- }
1
+ [
2
+ {
3
+ "id": "0",
4
+ "name": "모니터링",
5
+ "href": "/monitor",
6
+ "sections": [
7
+ {
8
+ "id": "01",
9
+ "name": "",
10
+ "menu": [
11
+ {
12
+ "id": "011",
13
+ "name": "대시보드",
14
+ "href": "/report/dashboard",
15
+ "submenu": []
16
+ }
17
+ ]
18
+ },
19
+ {
20
+ "id": "02",
21
+ "name": "태스크",
22
+ "menu": [
23
+ {
24
+ "id": "021",
25
+ "name": "수집",
26
+ "href": "/report/collect",
27
+ "submenu": []
28
+ },
29
+ {
30
+ "id": "022",
31
+ "name": "변환",
32
+ "href": "/report/convert",
33
+ "submenu": []
34
+ },
35
+ {
36
+ "id": "023",
37
+ "name": "전송",
38
+ "href": "/report/transport",
39
+ "submenu": []
40
+ }
41
+ ]
42
+ }
43
+ ]
44
+ },
45
+ {
46
+ "id": "1",
47
+ "name": "태깅",
48
+ "href": "/tagging",
49
+ "sections": [
50
+ {
51
+ "id": "10",
52
+ "name": "",
53
+ "menu": [
54
+ {
55
+ "id": "101",
56
+ "name": "태그",
57
+ "href": "/tagging/tag",
58
+ "submenu": []
59
+ },
60
+ {
61
+ "id": "102",
62
+ "name": "트리거",
63
+ "href": "/tagging/trigger",
64
+ "submenu": []
65
+ },
66
+ {
67
+ "id": "103",
68
+ "name": "변수",
69
+ "href": "/tagging/variable",
70
+ "submenu": []
71
+ },
72
+ {
73
+ "id": "104",
74
+ "name": "변수 그룹",
75
+ "href": "/tagging/vgroup",
76
+ "submenu": []
77
+ }
78
+ ]
79
+ },
80
+ {
81
+ "id": "11",
82
+ "name": "",
83
+ "menu": [
84
+ {
85
+ "id": "111",
86
+ "name": "디버그 뷰",
87
+ "href": "/tagging/debugview",
88
+ "submenu": []
89
+ }
90
+ ]
91
+ }
92
+ ]
93
+ },
94
+ {
95
+ "id": "2",
96
+ "name": "태스크",
97
+ "href": "/task",
98
+ "sections": [
99
+ {
100
+ "id": "21",
101
+ "name": "",
102
+ "menu": [
103
+ {
104
+ "id": "211",
105
+ "name": "모니터링",
106
+ "href": "/task/monitor",
107
+ "submenu": []
108
+ }
109
+ ]
110
+ },
111
+ {
112
+ "id": "22",
113
+ "name": "수집",
114
+ "menu": [
115
+ {
116
+ "id": "221",
117
+ "name": "관리",
118
+ "href": "/task/collect",
119
+ "container": false,
120
+ "submenu": []
121
+ },
122
+ {
123
+ "id": "222",
124
+ "name": "수집 결과",
125
+ "href": "/task/collect/result",
126
+ "submenu": []
127
+ },
128
+ {
129
+ "id": "223",
130
+ "name": "실행 로그",
131
+ "href": "/task/collect/console",
132
+ "container": false,
133
+ "submenu": []
134
+ }
135
+ ]
136
+ },
137
+ {
138
+ "id": "23",
139
+ "name": "변환",
140
+ "menu": [
141
+ {
142
+ "id": "231",
143
+ "name": "관리",
144
+ "href": "/task/convert/list",
145
+ "submenu": []
146
+ },
147
+ {
148
+ "id": "232",
149
+ "name": "변환 결과",
150
+ "href": "/task/convert/result",
151
+ "submenu": []
152
+ },
153
+ {
154
+ "id": "234",
155
+ "name": "실행 로그",
156
+ "href": "/task/convert/console",
157
+ "container": false,
158
+ "submenu": []
159
+ }
160
+ ]
161
+ },
162
+ {
163
+ "id": "24",
164
+ "name": "전송",
165
+ "menu": [
166
+ {
167
+ "id": "241",
168
+ "name": "관리",
169
+ "href": "/task/transport/list",
170
+ "submenu": []
171
+ },
172
+ {
173
+ "id": "242",
174
+ "name": "전송 결과",
175
+ "href": "/task/transport/result",
176
+ "submenu": []
177
+ },
178
+ {
179
+ "id": "243",
180
+ "name": "실행 로그",
181
+ "href": "/task/transport/console",
182
+ "container": false,
183
+ "submenu": []
184
+ }
185
+ ]
186
+ }
187
+ ]
188
+ },
189
+ {
190
+ "id": "3",
191
+ "name": "카프카",
192
+ "href": "/kafka",
193
+ "sections": [
194
+ {
195
+ "id": "31",
196
+ "name": "모니터링",
197
+ "menu": [
198
+ {
199
+ "id": "311",
200
+ "name": "시스템",
201
+ "href": "/kafka/monitor/system",
202
+ "submenu": []
203
+ },
204
+ {
205
+ "id": "312",
206
+ "name": "처리 및 지연",
207
+ "href": "/kafka/monitor/lag",
208
+ "submenu": []
209
+ }
210
+ ]
211
+ },
212
+ {
213
+ "id": "32",
214
+ "name": "브로커",
215
+ "menu": [
216
+ {
217
+ "id": "321",
218
+ "name": "관리",
219
+ "href": "/kafka/broker/edit",
220
+ "container": false,
221
+ "submenu": []
222
+ },
223
+ {
224
+ "id": "322",
225
+ "name": "실행 로그",
226
+ "href": "/kafka/broker/console",
227
+ "container": false,
228
+ "submenu": []
229
+ }
230
+ ]
231
+ },
232
+ {
233
+ "id": "33",
234
+ "name": "커넥트",
235
+ "menu": [
236
+ {
237
+ "id": "331",
238
+ "name": "관리",
239
+ "href": "/kafka/connect/edit",
240
+ "submenu": []
241
+ },
242
+ {
243
+ "id": "332",
244
+ "name": "실행 로그",
245
+ "href": "/kafka/connect/console",
246
+ "container": false,
247
+ "submenu": []
248
+ }
249
+ ]
250
+ },
251
+ {
252
+ "id": "34",
253
+ "name": "토픽",
254
+ "menu": [
255
+ {
256
+ "id": "341",
257
+ "name": "관리",
258
+ "href": "/kafka/topic",
259
+ "submenu": []
260
+ }
261
+ ]
262
+ }
263
+ ]
264
+ },
265
+ {
266
+ "id": "4",
267
+ "name": "관리",
268
+ "href": "/settings",
269
+ "last": true,
270
+ "sections": [
271
+ {
272
+ "id": "41",
273
+ "name": "",
274
+ "menu": [
275
+ {
276
+ "id": "411",
277
+ "name": "에이전트 관리",
278
+ "href": "/settings/agent",
279
+ "submenu": []
280
+ },
281
+ {
282
+ "id": "412",
283
+ "name": "컨테이너 관리",
284
+ "href": "/settings/container",
285
+ "submenu": []
286
+ },
287
+ {
288
+ "id": "413",
289
+ "name": "실행 로그 설정",
290
+ "href": "/settings/consolelog",
291
+ "submenu": []
292
+ },
293
+ {
294
+ "id": "414",
295
+ "name": "회원 관리",
296
+ "href": "/settings/account",
297
+ "submenu": []
298
+ }
299
+ ]
300
+ }
301
+ ]
302
+ }
303
303
  ]
@@ -1,80 +1,80 @@
1
- .container {
2
- display: flex;
3
- flex-direction: column;
4
- position: absolute;
5
- width: var(--primary-menu-width);
6
- height: 100%;
7
- border-right: 1px solid #dee2e6;
8
- z-index: 30;
9
- transition-property: width background-color;
10
- transition-duration: .2s;
11
- }
12
- .container:hover {
13
- width: 240px;
14
- background-color: #fff;
15
- box-shadow: 1px 1px 12px #dadce0;
16
- }
17
- .container a {
18
- text-decoration: none;
19
- cursor: pointer;
20
- }
21
- .container a:first-child {
22
- padding-top: 10px;
23
- }
24
- .container a:last-child {
25
- padding-bottom: 10px;
26
- }
27
-
28
- .nav-item {
29
- position: relative;
30
- display: flex;
31
- height: 48px;
32
- align-items: center;
33
- color: #495057;
34
- }
35
- .nav-item:hover {
36
- /*border-radius: 0 48px 48px 0;*/
37
- background-color: #e9ecef;
38
- }
39
- .nav-item.active {
40
- /*color: #fff;*/
41
- /*border-left: 5px solid #0d6efd;*/
42
- }
43
- .container:hover .nav-item.active {
44
- /*border-radius: 0 48px 48px 0;*/
45
- /*background-color: #0d6efd !important;*/
46
- }
47
-
48
- .highlight {
49
- position: absolute;
50
- left: 0px;
51
- width: 5px;
52
- height: 36px;
53
- z-index: 100;
54
- /*border-radius: 50%;*/
55
- background-color: #0d6efd;
56
- transition-property: height;
57
- transition-duration: .2s;
58
- }
59
- .container:hover .highlight {
60
- height: 48px;
61
- /*display: none;*/
62
- }
63
-
64
- .icon {
65
- margin: 4px 15px 0px 16px;
66
- }
67
- .icon > svg {
68
- width: 24px;
69
- height: 24px;
70
- }
71
-
72
- .text {
73
- font-size: .9rem;
74
- display: none;
75
- white-space: nowrap;
76
- overflow-x: hidden;
77
- }
78
- .container:hover .text {
79
- display: block;
1
+ .container {
2
+ display: flex;
3
+ flex-direction: column;
4
+ position: absolute;
5
+ width: var(--primary-menu-width);
6
+ height: 100%;
7
+ border-right: 1px solid #dee2e6;
8
+ z-index: 30;
9
+ transition-property: width background-color;
10
+ transition-duration: .2s;
11
+ }
12
+ .container:hover {
13
+ width: 240px;
14
+ background-color: #fff;
15
+ box-shadow: 1px 1px 12px #dadce0;
16
+ }
17
+ .container a {
18
+ text-decoration: none;
19
+ cursor: pointer;
20
+ }
21
+ .container a:first-child {
22
+ padding-top: 10px;
23
+ }
24
+ .container a:last-child {
25
+ padding-bottom: 10px;
26
+ }
27
+
28
+ .nav-item {
29
+ position: relative;
30
+ display: flex;
31
+ height: 48px;
32
+ align-items: center;
33
+ color: #495057;
34
+ }
35
+ .nav-item:hover {
36
+ /*border-radius: 0 48px 48px 0;*/
37
+ background-color: #e9ecef;
38
+ }
39
+ .nav-item.active {
40
+ /*color: #fff;*/
41
+ /*border-left: 5px solid #0d6efd;*/
42
+ }
43
+ .container:hover .nav-item.active {
44
+ /*border-radius: 0 48px 48px 0;*/
45
+ /*background-color: #0d6efd !important;*/
46
+ }
47
+
48
+ .highlight {
49
+ position: absolute;
50
+ left: 0px;
51
+ width: 5px;
52
+ height: 36px;
53
+ z-index: 100;
54
+ /*border-radius: 50%;*/
55
+ background-color: #0d6efd;
56
+ transition-property: height;
57
+ transition-duration: .2s;
58
+ }
59
+ .container:hover .highlight {
60
+ height: 48px;
61
+ /*display: none;*/
62
+ }
63
+
64
+ .icon {
65
+ margin: 4px 15px 0px 16px;
66
+ }
67
+ .icon > svg {
68
+ width: 24px;
69
+ height: 24px;
70
+ }
71
+
72
+ .text {
73
+ font-size: .9rem;
74
+ display: none;
75
+ white-space: nowrap;
76
+ overflow-x: hidden;
77
+ }
78
+ .container:hover .text {
79
+ display: block;
80
80
  }
@@ -1,50 +1,50 @@
1
- .container {
2
- display: flex;
3
- position: relative;
4
- background-color: var(--body-background-color);
5
- transition: width .2s;
6
- }
7
- .container.opened {
8
- width: calc(var(--primary-menu-width) + var(--secondary-menu-width));
9
- }
10
- .container.closed {
11
- width: var(--primary-menu-width);
12
- }
13
-
14
-
15
- .secondary {
16
- position: absolute;
17
- left: var(--primary-menu-width);
18
- height: 100%;
19
- z-index: 0;
20
- white-space: nowrap;
21
- overflow-x: hidden;
22
- }
23
- .secondary.opened {
24
- width: var(--secondary-menu-width);
25
- }
26
- .secondary.closed {
27
- width: 0px;
28
- overflow: hidden;
29
- }
30
-
31
- .toggler {
32
- position: absolute;
33
- bottom: 12px;
34
- width: 24px;
35
- height: 32px;
36
- padding-top: 2px;
37
- z-index: 15;
38
- cursor: pointer;
39
- transition: left .2s;
40
- }
41
- .toggler.opened {
42
- left: 264px;
43
- }
44
- .toggler.closed {
45
- left: var(--primary-menu-width);
46
- background-color: #f1f3f4;
47
- border: unset;
48
- border-radius: 0 50% 50% 0/0 50% 50% 0;
49
- box-shadow: 1px 1px 1px 1px #e8eaed;
1
+ .container {
2
+ display: flex;
3
+ position: relative;
4
+ background-color: var(--body-background-color);
5
+ transition: width .2s;
6
+ }
7
+ .container.opened {
8
+ width: calc(var(--primary-menu-width) + var(--secondary-menu-width));
9
+ }
10
+ .container.closed {
11
+ width: var(--primary-menu-width);
12
+ }
13
+
14
+
15
+ .secondary {
16
+ position: absolute;
17
+ left: var(--primary-menu-width);
18
+ height: 100%;
19
+ z-index: 0;
20
+ white-space: nowrap;
21
+ overflow-x: hidden;
22
+ }
23
+ .secondary.opened {
24
+ width: var(--secondary-menu-width);
25
+ }
26
+ .secondary.closed {
27
+ width: 0px;
28
+ overflow: hidden;
29
+ }
30
+
31
+ .toggler {
32
+ position: absolute;
33
+ bottom: 12px;
34
+ width: 24px;
35
+ height: 32px;
36
+ padding-top: 2px;
37
+ z-index: 15;
38
+ cursor: pointer;
39
+ transition: left .2s;
40
+ }
41
+ .toggler.opened {
42
+ left: 264px;
43
+ }
44
+ .toggler.closed {
45
+ left: var(--primary-menu-width);
46
+ background-color: #f1f3f4;
47
+ border: unset;
48
+ border-radius: 0 50% 50% 0/0 50% 50% 0;
49
+ box-shadow: 1px 1px 1px 1px #e8eaed;
50
50
  }
package/package.json CHANGED
@@ -1,70 +1,70 @@
1
- {
2
- "name": "@nethru/ui",
3
- "version": "1.0.33",
4
- "main": "dist/index.js",
5
- "files": [
6
- "/dist"
7
- ],
8
- "dependencies": {
9
- "@codemirror/lang-javascript": "^6.2.1",
10
- "@codemirror/lang-json": "^6.0.1",
11
- "@emotion/react": "^11.11.1",
12
- "@emotion/styled": "^11.11.0",
13
- "@fontsource/roboto": "^5.0.8",
14
- "@mui/icons-material": "^5.14.18",
15
- "@mui/material": "^5.14.18",
16
- "@mui/x-data-grid": "^6.18.2",
17
- "@mui/x-date-pickers": "^6.18.2",
18
- "@mui/x-tree-view": "^6.17.0",
19
- "@nethru/ui": "^1.0.19",
20
- "@testing-library/jest-dom": "^5.17.0",
21
- "@testing-library/react": "^13.4.0",
22
- "@testing-library/user-event": "^13.5.0",
23
- "@uiw/react-codemirror": "^4.21.21",
24
- "days": "^1.1.1",
25
- "immer": "^10.0.3",
26
- "react": "^18.2.0",
27
- "react-dom": "^18.2.0",
28
- "react-router-dom": "^6.20.1",
29
- "react-scripts": "5.0.1"
30
- },
31
- "scripts": {
32
- "start": "react-scripts start",
33
- "build": "react-scripts build",
34
- "test": "react-scripts test",
35
- "eject": "react-scripts eject",
36
- "publish:npm": "rm -rf dist && mkdir dist && babel src/lib -d dist --copy-files"
37
- },
38
- "babel": {
39
- "presets": [
40
- [
41
- "@babel/preset-react",
42
- {
43
- "runtime": "automatic"
44
- }
45
- ]
46
- ]
47
- },
48
- "eslintConfig": {
49
- "extends": [
50
- "react-app",
51
- "react-app/jest"
52
- ]
53
- },
54
- "browserslist": {
55
- "production": [
56
- ">0.2%",
57
- "not dead",
58
- "not op_mini all"
59
- ],
60
- "development": [
61
- "last 1 chrome version",
62
- "last 1 firefox version",
63
- "last 1 safari version"
64
- ]
65
- },
66
- "devDependencies": {
67
- "@babel/cli": "^7.23.4",
68
- "@babel/preset-react": "^7.23.3"
69
- }
70
- }
1
+ {
2
+ "name": "@nethru/ui",
3
+ "version": "1.0.35",
4
+ "main": "dist/index.js",
5
+ "files": [
6
+ "/dist"
7
+ ],
8
+ "dependencies": {
9
+ "@codemirror/lang-javascript": "^6.2.1",
10
+ "@codemirror/lang-json": "^6.0.1",
11
+ "@emotion/react": "^11.11.1",
12
+ "@emotion/styled": "^11.11.0",
13
+ "@fontsource/roboto": "^5.0.8",
14
+ "@mui/icons-material": "^5.14.18",
15
+ "@mui/material": "^5.14.18",
16
+ "@mui/x-data-grid": "^6.18.2",
17
+ "@mui/x-date-pickers": "^6.18.2",
18
+ "@mui/x-tree-view": "^6.17.0",
19
+ "@nethru/ui": "^1.0.19",
20
+ "@testing-library/jest-dom": "^5.17.0",
21
+ "@testing-library/react": "^13.4.0",
22
+ "@testing-library/user-event": "^13.5.0",
23
+ "@uiw/react-codemirror": "^4.21.21",
24
+ "days": "^1.1.1",
25
+ "immer": "^10.0.3",
26
+ "react": "^18.2.0",
27
+ "react-dom": "^18.2.0",
28
+ "react-router-dom": "^6.20.1",
29
+ "react-scripts": "5.0.1"
30
+ },
31
+ "scripts": {
32
+ "start": "react-scripts start",
33
+ "build": "react-scripts build",
34
+ "test": "react-scripts test",
35
+ "eject": "react-scripts eject",
36
+ "publish:npm": "rm -rf dist && mkdir dist && babel src/lib -d dist --copy-files"
37
+ },
38
+ "babel": {
39
+ "presets": [
40
+ [
41
+ "@babel/preset-react",
42
+ {
43
+ "runtime": "automatic"
44
+ }
45
+ ]
46
+ ]
47
+ },
48
+ "eslintConfig": {
49
+ "extends": [
50
+ "react-app",
51
+ "react-app/jest"
52
+ ]
53
+ },
54
+ "browserslist": {
55
+ "production": [
56
+ ">0.2%",
57
+ "not dead",
58
+ "not op_mini all"
59
+ ],
60
+ "development": [
61
+ "last 1 chrome version",
62
+ "last 1 firefox version",
63
+ "last 1 safari version"
64
+ ]
65
+ },
66
+ "devDependencies": {
67
+ "@babel/cli": "^7.23.4",
68
+ "@babel/preset-react": "^7.23.3"
69
+ }
70
+ }