@cmstops/pro-compo 0.3.34 → 0.3.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.
Files changed (46) hide show
  1. package/dist/index.css +114 -58
  2. package/dist/index.min.css +1 -1
  3. package/es/hooks/useUpload.d.ts +15 -0
  4. package/es/hooks/useUpload.js +88 -0
  5. package/es/index.css +114 -58
  6. package/es/selectResourceModal/component.js +24 -8
  7. package/es/selectResourceModal/components/ListCardWrapper/index.d.ts +0 -0
  8. package/es/selectResourceModal/components/ListCardWrapper/index.js +56 -0
  9. package/es/selectResourceModal/components/ListContent/index.js +12 -35
  10. package/es/selectResourceModal/components/ListContentLocal/components/Upload.d.ts +0 -0
  11. package/es/selectResourceModal/components/ListContentLocal/components/Upload.js +67 -0
  12. package/es/selectResourceModal/components/ListContentLocal/index.d.ts +0 -0
  13. package/es/selectResourceModal/components/ListContentLocal/index.js +87 -0
  14. package/es/selectResourceModal/components/ListFilter/index.js +9 -2
  15. package/es/selectResourceModal/style/index.css +98 -58
  16. package/es/selectResourceModal/style/index.less +20 -2
  17. package/es/selectResourceModal/style/listCardWrapper.less +63 -0
  18. package/es/selectResourceModal/style/listContent.less +1 -63
  19. package/es/selectResourceModal/style/listContentLocal.less +26 -0
  20. package/es/selectResourceModal/style/listSelected.less +11 -3
  21. package/es/thumbCard/assets/magic.js +2 -0
  22. package/es/thumbCard/component.js +70 -43
  23. package/es/thumbCard/style/index.css +16 -0
  24. package/es/thumbCard/style/index.less +21 -0
  25. package/es/utils/tusUpload.d.ts +8 -0
  26. package/es/utils/tusUpload.js +35 -1
  27. package/lib/hooks/useUpload.js +91 -0
  28. package/lib/index.css +114 -58
  29. package/lib/selectResourceModal/component.js +25 -9
  30. package/lib/selectResourceModal/components/ListCardWrapper/index.js +57 -0
  31. package/lib/selectResourceModal/components/ListContent/index.js +15 -38
  32. package/lib/selectResourceModal/components/ListContentLocal/components/Upload.js +68 -0
  33. package/lib/selectResourceModal/components/ListContentLocal/index.js +88 -0
  34. package/lib/selectResourceModal/components/ListFilter/index.js +9 -2
  35. package/lib/selectResourceModal/style/index.css +98 -58
  36. package/lib/selectResourceModal/style/index.less +20 -2
  37. package/lib/selectResourceModal/style/listCardWrapper.less +63 -0
  38. package/lib/selectResourceModal/style/listContent.less +1 -63
  39. package/lib/selectResourceModal/style/listContentLocal.less +26 -0
  40. package/lib/selectResourceModal/style/listSelected.less +11 -3
  41. package/lib/thumbCard/assets/magic.js +3 -0
  42. package/lib/thumbCard/component.js +68 -41
  43. package/lib/thumbCard/style/index.css +16 -0
  44. package/lib/thumbCard/style/index.less +21 -0
  45. package/lib/utils/tusUpload.js +35 -0
  46. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -4254,6 +4254,18 @@
4254
4254
  border-radius: 2px;
4255
4255
  cursor: pointer;
4256
4256
  }
4257
+ .thumb-select-wrapper .thumb-upload-loading {
4258
+ display: flex;
4259
+ align-items: center;
4260
+ justify-content: center;
4261
+ width: 100%;
4262
+ height: 100%;
4263
+ color: #fff;
4264
+ background-color: rgba(0, 0, 0, 0.5);
4265
+ }
4266
+ .thumb-select-wrapper .thumb-upload-loading .arco-progress-circle-text {
4267
+ color: #fff;
4268
+ }
4257
4269
  .thumb-select-wrapper .thumb-add {
4258
4270
  color: var(--color-text-2);
4259
4271
  font-size: 16px;
@@ -4290,6 +4302,10 @@
4290
4302
  .thumb-select-wrapper:hover .thumb-handler-list {
4291
4303
  opacity: 1;
4292
4304
  }
4305
+ .thumb-select-wrapper.thumb-no-mask {
4306
+ background-color: #f2f3f5;
4307
+ border: 1px dashed #e5e6eb !important;
4308
+ }
4293
4309
  .arco-dropdown-option-content {
4294
4310
  display: flex;
4295
4311
  gap: 8px;
@@ -4299,59 +4315,7 @@
4299
4315
  .card-list-wrapper {
4300
4316
  display: grid;
4301
4317
  grid-gap: 20px;
4302
- grid-template-columns: repeat(4, 1fr);
4303
- }
4304
- .card-list-wrapper .card-wrapper-image {
4305
- position: relative;
4306
- overflow: hidden;
4307
- }
4308
- .card-list-wrapper .card-wrapper-image .card-wrapper {
4309
- overflow: hidden;
4310
- aspect-ratio: 4 / 3;
4311
- }
4312
- .card-list-wrapper .card-wrapper-image .card-alias {
4313
- width: 100%;
4314
- margin-top: 6px;
4315
- overflow: hidden;
4316
- color: #3d3d3d;
4317
- font-size: 14px;
4318
- line-height: 22px;
4319
- white-space: nowrap;
4320
- text-overflow: ellipsis;
4321
- }
4322
- .card-list-wrapper .card-wrapper-image:hover .check-box-wrapper .check-box,
4323
- .card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box.active {
4324
- opacity: 1;
4325
- }
4326
- .card-list-wrapper .card-wrapper-image .check-box-wrapper {
4327
- position: absolute;
4328
- top: 8px;
4329
- left: 8px;
4330
- cursor: pointer;
4331
- }
4332
- .card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box {
4333
- box-sizing: border-box;
4334
- width: 22px;
4335
- height: 22px;
4336
- font-size: 14px;
4337
- line-height: 22px;
4338
- text-align: center;
4339
- background-color: rgba(0, 0, 0, 0.2);
4340
- border: 1px solid white;
4341
- border-radius: 50%;
4342
- opacity: 0;
4343
- transition: all 0.3s ease-in-out;
4344
- }
4345
- .card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box::selection {
4346
- display: none;
4347
- }
4348
- .card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box:hover {
4349
- background-color: rgba(0, 0, 0, 0.3);
4350
- }
4351
- .card-list-wrapper .card-wrapper-image .check-box-wrapper .check-box.active {
4352
- color: white;
4353
- background-color: #165dff;
4354
- border-color: #165dff;
4318
+ grid-template-columns: repeat(5, 1fr);
4355
4319
  }
4356
4320
  .list-filter-wrapper {
4357
4321
  display: flex;
@@ -4369,7 +4333,6 @@
4369
4333
  }
4370
4334
  .list-panel-wrapper {
4371
4335
  width: 420px;
4372
- max-height: 600px;
4373
4336
  padding: 0 !important;
4374
4337
  overflow: hidden;
4375
4338
  border: none;
@@ -4383,7 +4346,12 @@
4383
4346
  display: none;
4384
4347
  }
4385
4348
  .list-panel-wrapper .arco-popover-content {
4349
+ display: flex;
4350
+ flex-direction: column;
4351
+ height: 100%;
4352
+ max-height: 600px;
4386
4353
  margin-top: 0;
4354
+ overflow: hidden;
4387
4355
  }
4388
4356
  .list-panel-wrapper .list-panel-header {
4389
4357
  display: flex;
@@ -4403,8 +4371,11 @@
4403
4371
  cursor: pointer;
4404
4372
  }
4405
4373
  .list-panel-wrapper .list-selected-record {
4406
- display: flex;
4407
- flex-direction: column;
4374
+ flex: 1;
4375
+ overflow-y: scroll;
4376
+ }
4377
+ .list-panel-wrapper .list-selected-record::-webkit-scrollbar {
4378
+ display: none;
4408
4379
  }
4409
4380
  .list-panel-wrapper .list-selected-record .list-selected-item {
4410
4381
  display: flex;
@@ -4424,6 +4395,85 @@
4424
4395
  white-space: nowrap;
4425
4396
  text-overflow: ellipsis;
4426
4397
  }
4398
+ .upload-list-wrapper .list-content {
4399
+ margin-top: 30px;
4400
+ }
4401
+ .upload-list-wrapper .list-content .list-tips {
4402
+ margin-bottom: 16px;
4403
+ color: #3d3d3d;
4404
+ }
4405
+ .upload-list-wrapper .upload-wrapper {
4406
+ display: flex;
4407
+ flex-direction: column;
4408
+ }
4409
+ .upload-list-wrapper .upload-wrapper .upload-buttons {
4410
+ display: flex;
4411
+ gap: 20px;
4412
+ justify-content: center;
4413
+ margin: 20px 0;
4414
+ }
4415
+ .upload-list-wrapper .upload-wrapper .upload-dragger {
4416
+ width: calc(100% - 2px);
4417
+ }
4418
+ .card-wrapper-image {
4419
+ position: relative;
4420
+ overflow: hidden;
4421
+ cursor: pointer;
4422
+ }
4423
+ .card-wrapper-image .card-wrapper {
4424
+ position: relative;
4425
+ overflow: hidden;
4426
+ aspect-ratio: 4 / 3;
4427
+ }
4428
+ .card-wrapper-image .card-alias {
4429
+ width: 100%;
4430
+ margin-top: 6px;
4431
+ overflow: hidden;
4432
+ color: #3d3d3d;
4433
+ font-size: 14px;
4434
+ line-height: 22px;
4435
+ white-space: nowrap;
4436
+ text-overflow: ellipsis;
4437
+ }
4438
+ .card-wrapper-image:hover .check-box-wrapper .check-box,
4439
+ .card-wrapper-image .check-box-wrapper .check-box.active {
4440
+ opacity: 1;
4441
+ }
4442
+ .card-wrapper-image .check-box-wrapper {
4443
+ position: absolute;
4444
+ top: 8px;
4445
+ left: 8px;
4446
+ cursor: pointer;
4447
+ }
4448
+ .card-wrapper-image .check-box-wrapper .check-box {
4449
+ box-sizing: border-box;
4450
+ width: 22px;
4451
+ height: 22px;
4452
+ font-size: 14px;
4453
+ line-height: 22px;
4454
+ text-align: center;
4455
+ background-color: rgba(0, 0, 0, 0.2);
4456
+ border: 1px solid white;
4457
+ border-radius: 50%;
4458
+ opacity: 0;
4459
+ transition: all 0.3s ease-in-out;
4460
+ }
4461
+ .card-wrapper-image .check-box-wrapper .check-box::selection {
4462
+ display: none;
4463
+ }
4464
+ .card-wrapper-image .check-box-wrapper .check-box:hover {
4465
+ background-color: rgba(0, 0, 0, 0.3);
4466
+ }
4467
+ .card-wrapper-image .check-box-wrapper .check-box.active {
4468
+ color: white;
4469
+ background-color: #165dff;
4470
+ border-color: #165dff;
4471
+ }
4472
+ .resource-select-drawer .arco-drawer-body {
4473
+ box-sizing: border-box;
4474
+ padding: 0;
4475
+ overflow: hidden;
4476
+ }
4427
4477
  .resource-select-container {
4428
4478
  display: flex;
4429
4479
  flex-direction: column;
@@ -4432,9 +4482,14 @@
4432
4482
  height: 100%;
4433
4483
  }
4434
4484
  .resource-select-container .resource-select-filter,
4435
- .resource-select-container .resource-select-content,
4436
4485
  .resource-select-container .resource-select-footer {
4437
- padding: 0 16px 0;
4486
+ padding: 0 40px;
4487
+ }
4488
+ .resource-select-container .resource-select-content .arco-scrollbar-container {
4489
+ padding: 0 40px;
4490
+ }
4491
+ .resource-select-container .resource-select-header {
4492
+ padding: 10px 24px 0;
4438
4493
  }
4439
4494
  .resource-select-container .resource-select-header .arco-tabs-nav::before {
4440
4495
  display: none;
@@ -4449,6 +4504,7 @@
4449
4504
  .resource-select-container .resource-select-footer {
4450
4505
  display: flex;
4451
4506
  justify-content: space-between;
4507
+ padding-bottom: 10px;
4452
4508
  }
4453
4509
  .resource-select-container .resource-select-footer .footer-right {
4454
4510
  display: flex;