@cmstops/pro-compo 3.9.1 → 3.9.2-alpha.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.
Files changed (29) hide show
  1. package/dist/index.css +39 -4
  2. package/dist/index.min.css +1 -1
  3. package/es/config.js +1 -1
  4. package/es/hooks/useAttachement.js +2 -9
  5. package/es/hooks/usePopper.d.ts +1 -1
  6. package/es/hooks/usePopper.js +3 -3
  7. package/es/index.css +39 -4
  8. package/es/selectResourceModal/__demo__/module/DivWrapper.d.ts +268 -0
  9. package/es/selectResourceModal/__demo__/module/basic.d.ts +299 -0
  10. package/es/selectResourceModal/components/List/ListNormal/Filter.js +169 -86
  11. package/es/selectResourceModal/components/List/ListNormal/index.js +21 -6
  12. package/es/selectResourceModal/hooks/useResponsiveFilter.d.ts +21 -0
  13. package/es/selectResourceModal/hooks/useResponsiveFilter.js +142 -0
  14. package/es/selectResourceModal/scripts/useCompoLf.js +1 -1
  15. package/es/selectResourceModal/style/index.css +39 -4
  16. package/es/selectResourceModal/style/index.less +5 -0
  17. package/es/selectResourceModal/style/list.less +39 -4
  18. package/lib/config.js +1 -1
  19. package/lib/hooks/useAttachement.js +2 -9
  20. package/lib/hooks/usePopper.js +3 -3
  21. package/lib/index.css +39 -4
  22. package/lib/selectResourceModal/components/List/ListNormal/Filter.js +166 -83
  23. package/lib/selectResourceModal/components/List/ListNormal/index.js +20 -5
  24. package/lib/selectResourceModal/hooks/useResponsiveFilter.js +144 -0
  25. package/lib/selectResourceModal/scripts/useCompoLf.js +1 -1
  26. package/lib/selectResourceModal/style/index.css +39 -4
  27. package/lib/selectResourceModal/style/index.less +5 -0
  28. package/lib/selectResourceModal/style/list.less +39 -4
  29. package/package.json +1 -1
package/lib/selectResourceModal/style/index.css CHANGED
@@ -177,6 +177,7 @@
177
177
  }
178
178
  .resource-list-footer {
179
179
  display: flex;
180
+ flex-wrap: wrap;
180
181
  justify-content: space-between;
181
182
  padding-bottom: 20px;
182
183
  }
@@ -186,6 +187,10 @@
186
187
  gap: 10px;
187
188
  align-items: center;
188
189
  justify-content: flex-end;
190
+ margin-top: 10px;
191
+ }
192
+ .resource-list-footer .footer-right .list-selected-wrapper {
193
+ font-size: 12px;
189
194
  }
190
195
  .resource-list-content-loading {
191
196
  display: flex;
@@ -197,7 +202,7 @@
197
202
  .resource-list .list-item-grid {
198
203
  display: grid;
199
204
  grid-gap: 20px;
200
- grid-template-columns: repeat(5, 1fr);
205
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
201
206
  }
202
207
  .resource-list .list-content {
203
208
  margin-top: 30px;
@@ -240,7 +245,8 @@
240
245
  }
241
246
  .resource-list .list-filter-wrapper .list-filter-tags {
242
247
  display: flex;
243
- justify-content: space-between;
248
+ flex-wrap: wrap;
249
+ gap: 10px;
244
250
  margin-top: 10px;
245
251
  }
246
252
  .resource-list .list-filter-wrapper .list-filter-tags .list-filter-tag {
@@ -261,16 +267,41 @@
261
267
  justify-content: space-between;
262
268
  }
263
269
  .resource-list .list-filter-wrapper .list-filter .filter-list {
270
+ position: relative;
271
+ /** 给 popup 一个参考 */
264
272
  display: flex;
265
- flex-wrap: wrap;
266
- gap: 10px;
267
273
  }
268
274
  .resource-list .list-filter-wrapper .list-filter .filter-list .filter-item {
269
275
  width: 100px;
276
+ margin-right: 10px;
277
+ }
278
+ .resource-list .list-filter-wrapper .list-filter .filter-list .arco-trigger-popup {
279
+ z-index: 100000 !important;
270
280
  }
271
281
  .resource-list .list-filter-wrapper .list-filter .arco-input-prepend {
272
282
  padding: 0;
273
283
  }
284
+ .resource-list .list-filter-wrapper .list-filter .more-btn {
285
+ position: relative;
286
+ /** 给 poperjs 一个参考 */
287
+ }
288
+ .resource-list .list-filter-wrapper .list-filter .more-btn .filter-pannel {
289
+ inset: 40px auto auto auto !important;
290
+ }
291
+ .resource-list .list-filter-wrapper .filter-extra {
292
+ display: flex;
293
+ gap: 10px;
294
+ }
295
+ .resource-list .list-filter-wrapper .filter-pannel {
296
+ z-index: 100000;
297
+ display: flex;
298
+ flex-direction: column;
299
+ gap: 10px;
300
+ padding: 10px;
301
+ background-color: #fff;
302
+ border-radius: 4px;
303
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
304
+ }
274
305
  .resource-list .title {
275
306
  display: flex;
276
307
  gap: 8px;
@@ -284,6 +315,10 @@
284
315
  height: 16px;
285
316
  background-color: #4886ff;
286
317
  }
318
+ .resource-select-wrap {
319
+ width: 100%;
320
+ height: 100%;
321
+ }
287
322
  .resource-select-modal-body {
288
323
  height: 80vh;
289
324
  padding: 0;
package/lib/selectResourceModal/style/index.less CHANGED
@@ -2,6 +2,11 @@
2
2
  @import './listCardWrapper.less';
3
3
  @import './list.less';
4
4
 
5
+ .resource-select-wrap {
6
+ width: 100%;
7
+ height: 100%;
8
+ }
9
+
5
10
  .resource-select-modal-body {
6
11
  height: 80vh;
7
12
  padding: 0;
package/lib/selectResourceModal/style/list.less CHANGED
@@ -20,6 +20,7 @@
20
20
 
21
21
  &-footer {
22
22
  display: flex;
23
+ flex-wrap: wrap;
23
24
  justify-content: space-between;
24
25
  padding-bottom: 20px;
25
26
 
@@ -29,6 +30,11 @@
29
30
  gap: 10px;
30
31
  align-items: center;
31
32
  justify-content: flex-end;
33
+ margin-top: 10px;
34
+
35
+ .list-selected-wrapper {
36
+ font-size: 12px;
37
+ }
32
38
  }
33
39
  }
34
40
 
@@ -47,7 +53,7 @@
47
53
  .list-item-grid {
48
54
  display: grid;
49
55
  grid-gap: 20px;
50
- grid-template-columns: repeat(5, 1fr);
56
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
51
57
  }
52
58
  }
53
59
 
@@ -108,7 +114,8 @@
108
114
  .resource-list .list-filter-wrapper {
109
115
  .list-filter-tags {
110
116
  display: flex;
111
- justify-content: space-between;
117
+ flex-wrap: wrap;
118
+ gap: 10px;
112
119
  margin-top: 10px;
113
120
 
114
121
  .list-filter-tag {
@@ -133,18 +140,46 @@
133
140
  justify-content: space-between;
134
141
 
135
142
  .filter-list {
143
+ position: relative; /** 给 popup 一个参考 */
136
144
  display: flex;
137
- flex-wrap: wrap;
138
- gap: 10px;
139
145
 
140
146
  .filter-item {
141
147
  width: 100px;
148
+ margin-right: 10px;
149
+ }
150
+
151
+ .arco-trigger-popup {
152
+ z-index: 100000 !important;
142
153
  }
143
154
  }
144
155
 
145
156
  .arco-input-prepend {
146
157
  padding: 0;
147
158
  }
159
+
160
+ .more-btn {
161
+ position: relative; /** 给 poperjs 一个参考 */
162
+
163
+ .filter-pannel {
164
+ inset: 40px auto auto auto !important;
165
+ }
166
+ }
167
+ }
168
+
169
+ .filter-extra {
170
+ display: flex;
171
+ gap: 10px;
172
+ }
173
+
174
+ .filter-pannel {
175
+ z-index: 100000;
176
+ display: flex;
177
+ flex-direction: column;
178
+ gap: 10px;
179
+ padding: 10px;
180
+ background-color: #fff;
181
+ border-radius: 4px;
182
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
148
183
  }
149
184
  }
150
185
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cmstops/pro-compo",
3
- "version": "3.9.1",
3
+ "version": "3.9.2-alpha.1",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "vue",