ydb-components-material 0.1.16 → 0.1.18

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.
Files changed (36) hide show
  1. package/build/docs/404.html +3 -3
  2. package/build/docs/_demos/:uuid +3 -3
  3. package/build/docs/colorful-button.html +3 -3
  4. package/build/docs/colorful-input.html +3 -3
  5. package/build/docs/index.html +3 -3
  6. package/build/docs/umi.98b9987e.js +1 -0
  7. package/build/docs/{umi.04e1542b.css → umi.c8589a88.css} +1 -1
  8. package/build/docs/~demos/:uuid.html +3 -3
  9. package/build/docs/~demos/colorful-button-demo.html +3 -3
  10. package/build/docs/~demos/colorful-input-demo.html +3 -3
  11. package/build/lowcode/assets-daily.json +11 -11
  12. package/build/lowcode/assets-dev.json +2 -2
  13. package/build/lowcode/assets-prod.json +11 -11
  14. package/build/lowcode/meta.js +1 -1
  15. package/build/lowcode/render/default/view.css +1 -1
  16. package/build/lowcode/render/default/view.js +1 -1
  17. package/build/lowcode/view.css +1 -1
  18. package/build/lowcode/view.js +1 -1
  19. package/dist/BizComps.css +1 -1
  20. package/dist/BizComps.js +1 -1
  21. package/dist/BizComps.js.map +1 -1
  22. package/es/components/file-item/index.d.ts +4 -10
  23. package/es/components/file-item/index.js +100 -115
  24. package/es/components/file-item/index.scss +228 -239
  25. package/es/components/scene-tree/index.js +8 -9
  26. package/lib/components/file-item/index.d.ts +4 -10
  27. package/lib/components/file-item/index.js +100 -115
  28. package/lib/components/file-item/index.scss +228 -239
  29. package/lib/components/scene-tree/index.js +7 -8
  30. package/lowcode/file-item/meta.ts +22 -112
  31. package/lowcode_es/file-item/meta.js +20 -105
  32. package/lowcode_es/meta.js +1 -1
  33. package/lowcode_lib/file-item/meta.js +20 -105
  34. package/lowcode_lib/meta.js +1 -1
  35. package/package.json +3 -3
  36. package/build/docs/umi.6c098144.js +0 -1
@@ -1,308 +1,297 @@
1
- .file_main {
2
- .file_name {
3
- font-size: 14px;
4
- font-weight: 500;
5
- color: #323232;
6
- margin-bottom: 8px;
7
- }
8
- .file_tip {
9
- font-size: 12px;
10
- color: #999999;
1
+
2
+ .file_item {
3
+ border-radius: 8px;
4
+ opacity: 1;
5
+ background: #F7F7F7;
6
+ padding: 12px;
7
+ width: 100%;
8
+
9
+ .file {
10
+ display: flex;
11
+ justify-content: space-between;
12
+ align-items: center;
11
13
  margin-bottom: 12px;
12
- }
13
- .file_item {
14
- border-radius: 8px;
15
- opacity: 1;
16
- background: #F7F7F7;
17
- padding: 12px;
18
14
 
19
- .file {
15
+ .file_img {
16
+ width: 80px;
17
+ height: 80px;
18
+ border-radius: 4px;
19
+ position: relative;
20
+ border-radius: 8px;
21
+ position: relative;
20
22
  display: flex;
21
- justify-content: space-between;
23
+ justify-content: center;
22
24
  align-items: center;
23
- margin-bottom: 12px;
25
+ background: #fff;
26
+ font-size: 12px;
27
+ color: #666666;
28
+ flex-direction: column;
24
29
 
25
- .file_img {
26
- width: 80px;
27
- height: 80px;
28
- border-radius: 4px;
29
- position: relative;
30
- border-radius: 8px;
31
- position: relative;
30
+ .filed {
32
31
  display: flex;
33
32
  justify-content: center;
34
33
  align-items: center;
35
- background: #fff;
36
- font-size: 12px;
37
- color: #666666;
38
34
  flex-direction: column;
35
+ }
39
36
 
40
- .filed {
41
- display: flex;
42
- justify-content: center;
43
- align-items: center;
44
- flex-direction: column;
45
- }
37
+ .small_img {
38
+ width: 24px;
39
+ height: 24px;
46
40
 
47
- .small_img {
48
- width: 24px;
49
- height: 24px;
41
+ }
50
42
 
43
+ .add {
44
+ display: flex;
45
+ flex-direction: column;
46
+ justify-content: center;
47
+ align-items: center;
48
+ .add_icon {
49
+ width: 14px;
50
+ margin-left: -5px;
51
51
  }
52
+ color: #1678FF;
53
+ }
52
54
 
53
- .add {
54
- display: flex;
55
- flex-direction: column;
56
- justify-content: center;
57
- align-items: center;
58
- .add_icon {
59
- width: 14px;
60
- margin-left: -5px;
61
- }
62
- color: #1678FF;
63
- }
55
+ .del {
56
+ position: absolute;
57
+ width: 16px;
58
+ height: 16px;
59
+ top: -6px;
60
+ right: -6px;
61
+ z-index: 9;
62
+ }
64
63
 
65
- .del {
66
- position: absolute;
67
- width: 16px;
68
- height: 16px;
69
- top: -6px;
70
- right: -6px;
71
- z-index: 9;
72
- }
64
+ .error_msg {
65
+ position: absolute;
66
+ top: 30px;
67
+ right: 22px;
68
+ }
73
69
 
74
- .error_msg {
75
- position: absolute;
76
- top: 30px;
77
- right: 22px;
78
- }
70
+ .mask {
71
+ // display: none !important;
72
+ border-radius: 8px;
73
+ position: absolute;
74
+ top: 0;
75
+ left: 0;
76
+ width: 100%;
77
+ height: 100%;
78
+ // opacity: 0.5;
79
+ background: #2222227d;
80
+ display: flex;
81
+ justify-content: center;
82
+ align-items: center;
83
+ color: #fff;
84
+ z-index: 8;
79
85
 
80
- .mask {
81
- // display: none !important;
82
- border-radius: 8px;
83
- position: absolute;
84
- top: 0;
85
- left: 0;
86
- width: 100%;
87
- height: 100%;
88
- // opacity: 0.5;
89
- background: #2222227d;
86
+ .checked {
90
87
  display: flex;
91
- justify-content: center;
92
88
  align-items: center;
93
- color: #fff;
94
- z-index: 8;
95
89
 
96
- .checked {
97
- display: flex;
98
- align-items: center;
99
-
100
- img {
101
- width: 14px;
102
- height: 14px;
103
- margin-right: 3px;
104
- }
90
+ img {
91
+ width: 14px;
92
+ height: 14px;
93
+ margin-right: 3px;
105
94
  }
106
95
  }
107
96
  }
97
+ }
108
98
 
109
- .operation {
110
- .btn {
111
- display: flex;
112
- flex-direction: row;
113
-
114
- .img_btn {
115
- margin-left: 8px;
116
- width: 68px;
117
- height: 26px;
118
- border-radius: 4px;
119
- opacity: 1;
120
- box-sizing: border-box;
121
- border: 1px solid #1678FF;
122
- color: #1678FF;
123
- font-size: 13px;
124
- line-height: 26px;
125
- text-align: center;
126
- cursor: pointer;
127
- }
99
+ .operation {
100
+ .btn {
101
+ display: flex;
102
+ flex-direction: row;
128
103
 
129
- }
130
- .operation_btn {
131
- cursor: pointer;
104
+ .img_btn {
132
105
  margin-left: 8px;
133
106
  width: 68px;
134
107
  height: 26px;
135
108
  border-radius: 4px;
136
109
  opacity: 1;
137
110
  box-sizing: border-box;
138
- background: linear-gradient(90deg, #73AEFF 0%, #1678FF 100%);
139
- color: #fff;
111
+ border: 1px solid #1678FF;
112
+ color: #1678FF;
140
113
  font-size: 13px;
141
114
  line-height: 26px;
142
115
  text-align: center;
116
+ cursor: pointer;
143
117
  }
118
+
119
+ }
120
+ .operation_btn {
121
+ cursor: pointer;
122
+ margin-left: 8px;
123
+ width: 68px;
124
+ height: 26px;
125
+ border-radius: 4px;
126
+ opacity: 1;
127
+ box-sizing: border-box;
128
+ background: linear-gradient(90deg, #73AEFF 0%, #1678FF 100%);
129
+ color: #fff;
130
+ font-size: 13px;
131
+ line-height: 26px;
132
+ text-align: center;
144
133
  }
145
134
  }
135
+ }
146
136
 
147
- .file_item_bottom {
148
- border-top: 1px solid #EAEAEA;
149
- display: flex;
137
+ .file_item_bottom {
138
+ border-top: 1px solid #EAEAEA;
139
+ display: flex;
140
+ display: flex;
141
+ justify-content: space-evenly;
142
+ align-items: center;
143
+ padding-top: 12px;
144
+
145
+ .line {
146
+ width: 1px;
147
+ height: 20px;
148
+ background-color: #EAEAEA;
149
+ }
150
+
151
+ .icon_text {
150
152
  display: flex;
151
- justify-content: space-evenly;
152
153
  align-items: center;
153
- padding-top: 12px;
154
+ font-size: 14px;
155
+ color: #1678FF;
154
156
 
155
- .line {
156
- width: 1px;
157
- height: 20px;
158
- background-color: #EAEAEA;
159
- }
157
+ img {
158
+ width: 16px;
159
+ height: 11px;
160
+ margin-right: 5px;
160
161
 
161
- .icon_text {
162
- display: flex;
163
- align-items: center;
164
- font-size: 14px;
165
- color: #1678FF;
166
-
167
- img {
168
- width: 16px;
169
- height: 11px;
170
- margin-right: 5px;
171
-
172
- }
173
162
  }
174
163
  }
164
+ }
175
165
 
176
- .img_view {
166
+ .img_view {
167
+ position: absolute;
168
+ top: 0;
169
+ left: 0;
170
+ width: 100%;
171
+ height: 100%;
172
+ background-color: rgba(0, 0, 0, 0.5);
173
+ display: flex;
174
+ justify-content: center;
175
+ align-items: center;
176
+
177
+ .close {
178
+ width: 17px;
179
+ height: 17px;
180
+ color: #fff;
177
181
  position: absolute;
178
- top: 0;
179
- left: 0;
180
- width: 100%;
181
- height: 100%;
182
- background-color: rgba(0, 0, 0, 0.5);
183
- display: flex;
184
- justify-content: center;
185
- align-items: center;
186
-
187
- .close {
188
- width: 17px;
189
- height: 17px;
190
- color: #fff;
191
- position: absolute;
192
- top: 40px;
193
- right: 20px;
194
- }
182
+ top: 40px;
183
+ right: 20px;
184
+ }
195
185
 
196
- .view {
197
- width: 100%;
198
- height: auto;
199
- }
186
+ .view {
187
+ width: 100%;
188
+ height: auto;
200
189
  }
190
+ }
191
+
192
+ .material_lib {
193
+ width: 100%;
194
+ height: 100%;
195
+ position: absolute;
196
+ top: 0;
197
+ left: 0;
198
+ z-index: 999;
199
+ background-color: rgba(0, 0, 0, 0.5);
201
200
 
202
- .material_lib {
201
+ .material_lib_content {
203
202
  width: 100%;
204
- height: 100%;
205
203
  position: absolute;
206
- top: 0;
204
+ bottom: 0;
207
205
  left: 0;
208
- z-index: 999;
209
- background-color: rgba(0, 0, 0, 0.5);
206
+ background-color: #fff;
207
+ border-radius: 16px 16px 0px 0px;
208
+
209
+ .material_lib_title {
210
+ font-size: 16px;
211
+ color: #333333;
212
+ line-height: 54px;
213
+ text-align: center;
214
+ }
210
215
 
211
- .material_lib_content {
212
- width: 100%;
213
- position: absolute;
214
- bottom: 0;
215
- left: 0;
216
- background-color: #fff;
217
- border-radius: 16px 16px 0px 0px;
216
+ .tips {
217
+ padding: 12px;
218
+ background: #FFF6E8;
219
+ font-size: 14px;
220
+ line-height: 24px;
221
+ color: #F29655;
222
+ display: flex;
223
+ align-items: flex-start;
218
224
 
219
- .material_lib_title {
220
- font-size: 16px;
221
- color: #333333;
222
- line-height: 54px;
223
- text-align: center;
225
+ img {
226
+ width: 14px;
227
+ height: 14px;
228
+ margin-right: 8px;
229
+ margin-top: 5px;
224
230
  }
231
+ }
225
232
 
226
- .tips {
227
- padding: 12px;
228
- background: #FFF6E8;
229
- font-size: 14px;
230
- line-height: 24px;
231
- color: #F29655;
232
- display: flex;
233
- align-items: flex-start;
234
-
235
- img {
236
- width: 14px;
237
- height: 14px;
238
- margin-right: 8px;
239
- margin-top: 5px;
240
- }
241
- }
233
+ .list {
234
+ padding: 12px 12px 0 12px;
235
+ width: 100%;
236
+ background-color: #F5F5F5;
237
+ margin-bottom: 64px;
238
+ max-height: 300px;
239
+ overflow: auto;
242
240
 
243
- .list {
244
- padding: 12px 12px 0 12px;
241
+ .item {
242
+ padding: 16px 12px;
243
+ border-radius: 8px;
244
+ background: #FFF;
245
+ display: flex;
246
+ align-items: center;
247
+ color: #333333;
248
+ font-size: 14px;
245
249
  width: 100%;
246
- background-color: #F5F5F5;
247
- margin-bottom: 64px;
248
- max-height: 300px;
249
- overflow: auto;
250
-
251
- .item {
252
- padding: 16px 12px;
253
- border-radius: 8px;
254
- background: #FFF;
250
+ margin-bottom: 12px;
251
+
252
+ .preview_icon {
253
+ margin-left: auto;
255
254
  display: flex;
256
255
  align-items: center;
257
- color: #333333;
258
- font-size: 14px;
259
- width: 100%;
260
- margin-bottom: 12px;
261
-
262
- .preview_icon {
263
- margin-left: auto;
264
- display: flex;
265
- align-items: center;
266
- color: #1678FF;
267
-
268
- img {
269
- width: 16px;
270
- margin-right: 4px;
271
- }
256
+ color: #1678FF;
257
+
258
+ img {
259
+ width: 16px;
260
+ margin-right: 4px;
272
261
  }
273
262
  }
274
263
  }
264
+ }
275
265
 
276
- .bottom_btn {
277
- background-color: #fff;
278
- height: 64px;
279
- display: flex;
280
- align-items: center;
281
- justify-content: space-around;
282
- position: fixed;
283
- bottom: 0;
284
- left: 0;
285
- right: 0;
286
-
287
- .btn {
288
- width: 169px;
289
- height: 40px;
290
- border-radius: 50px;
291
- font-size: 16px;
292
- line-height: 40px;
293
- text-align: center;
294
- }
266
+ .bottom_btn {
267
+ background-color: #fff;
268
+ height: 64px;
269
+ display: flex;
270
+ align-items: center;
271
+ justify-content: space-around;
272
+ position: fixed;
273
+ bottom: 0;
274
+ left: 0;
275
+ right: 0;
295
276
 
296
- .cancel {
297
- background-color: #fff;
298
- border: 1px solid #E7E7E7;
299
- color: #333;
300
- }
277
+ .btn {
278
+ width: 169px;
279
+ height: 40px;
280
+ border-radius: 50px;
281
+ font-size: 16px;
282
+ line-height: 40px;
283
+ text-align: center;
284
+ }
301
285
 
302
- .ok {
303
- background: linear-gradient(90deg, #73AEFF 0%, #1678FF 100%);
304
- color: #fff;
305
- }
286
+ .cancel {
287
+ background-color: #fff;
288
+ border: 1px solid #E7E7E7;
289
+ color: #333;
290
+ }
291
+
292
+ .ok {
293
+ background: linear-gradient(90deg, #73AEFF 0%, #1678FF 100%);
294
+ color: #fff;
306
295
  }
307
296
  }
308
297
  }
@@ -20,16 +20,15 @@ var SceneTree = function SceneTree(_ref) {
20
20
  _ref$style = _ref.style,
21
21
  style = _ref$style === void 0 ? {} : _ref$style,
22
22
  valChange = _ref.valChange;
23
- var _useState = (0, _react.useState)(function () {
24
- console.log('---', dataSource);
25
- if (dataSource) {
26
- dataSource.children = [];
27
- return dataSource;
28
- }
29
- return null;
30
- }),
23
+ var _useState = (0, _react.useState)(undefined),
31
24
  curTree = _useState[0],
32
25
  setCurTree = _useState[1];
26
+ (0, _react.useEffect)(function () {
27
+ if (dataSource) {
28
+ dataSource.children = [];
29
+ setCurTree(dataSource);
30
+ }
31
+ }, [dataSource]);
33
32
  console.log('curTree', curTree);
34
33
  // const dataSource = {
35
34
  // title: '题目1',