element-assits 0.0.53 → 0.0.55

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 (4) hide show
  1. package/README.md +2 -0
  2. package/lib/index.js +1829 -1824
  3. package/lib/style.scss +334 -334
  4. package/package.json +1 -1
package/lib/style.scss CHANGED
@@ -11,123 +11,6 @@ $--color-border-base: #DCDFE6 !default;
11
11
  $--color-border-light: #E4E7ED !default;
12
12
  $--color-border-lighter: #EBEEF5 !default;
13
13
  $--color-border-extralight: #F2F6FC !default;
14
- // table
15
- .ea-table {
16
- // 表格头部样式美化
17
- .el-table {
18
- th {
19
- background-color: $--color-border-extralight;
20
- color: $--color-primary-text;
21
- .cell {
22
- min-height: 30px;
23
- display: flex;
24
- justify-content: flex-start;
25
- align-items: center;
26
- }
27
- &.is-center .cell { justify-content: center }
28
- &.is-right .cell { justify-content: flex-end }
29
- }
30
- td, th {
31
- .cell {
32
- line-height: 1.2;
33
- }
34
- }
35
- &.el-table--small {
36
- td, th {
37
- height: 48px;
38
- }
39
- }
40
- &.is-dense {
41
- td, th {
42
- height: 32px;
43
- padding: 2px 0;
44
- .el-button {
45
- padding-top: 0;
46
- padding-bottom: 0;
47
- }
48
- }
49
- }
50
- }
51
- // 列的更多菜单项
52
- .theader-th-cell {
53
- .cell-icon-menu {
54
- position: absolute;
55
- top: 50%;
56
- right: 4px;
57
- transform: rotate(90deg) translateX(-50%);
58
- color: $--color-placeholder-text;
59
- cursor: pointer;
60
- padding: 4px;
61
- border-radius: 2px;
62
- &:hover {
63
- color: $--color-primary-text;
64
- background-color: $--color-border-light;
65
- }
66
- }
67
- }
68
- // 表格底部
69
- .ea-table__footer {
70
- display: flex;
71
- justify-content: space-between;
72
- .ea-table__footer-right {
73
- margin-left: auto;
74
- padding-right: 0;
75
- }
76
- > * {
77
- margin-top: 12px;
78
- }
79
- }
80
-
81
- .column-transition-active {
82
- opacity: 0.33;
83
- }
84
-
85
- .el-button > i {
86
- min-width: 12px;
87
- }
88
-
89
- .more-btn > i{
90
- transform: rotate(-90deg);
91
- }
92
- }
93
-
94
- // table - popover
95
- .el-popover.ea-popover-no-padding {
96
- padding: 8px 0;
97
- min-width: 100px;
98
- &.dense {
99
- margin-top: 0px;
100
- margin-bottom: 0px;
101
- min-width: 70px;
102
- }
103
- }
104
-
105
- .more-btn-panel {
106
- &__item {
107
- &:hover {
108
- background-color: $--color-border-lighter;
109
- }
110
- .el-button {
111
- padding: 8px 12px;
112
- width: 100%;
113
- text-align: left;
114
- }
115
- }
116
- }
117
-
118
- .ea-zoom-in-top-enter-active,
119
- .ea-zoom-in-top-leave-active {
120
- opacity: 1;
121
- transform: scaleY(1);
122
- transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
123
- transform-origin: center top;
124
- }
125
- .ea-zoom-in-top-enter,
126
- .ea-zoom-in-top-leave-active {
127
- opacity: 0;
128
- transform: scaleY(0);
129
- }
130
-
131
14
  .ea-select {
132
15
  display: inline-block;
133
16
  position: relative;
@@ -158,6 +41,24 @@ $--color-border-extralight: #F2F6FC !default;
158
41
  }
159
42
  }
160
43
 
44
+ .el-dialog.ea-modal {
45
+ &.is-closing {
46
+ margin: 0 0 50px !important;
47
+ }
48
+ &.is-fullscreen {
49
+ border-radius: 0;
50
+ margin: 0;
51
+ }
52
+ .el-dialog__header {
53
+ color: #555;
54
+ font-size: 18px;
55
+ .el-dialog__title {
56
+ color: inherit;
57
+ font-size: inherit;
58
+ }
59
+ }
60
+ }
61
+
161
62
  .ea-data-table {
162
63
  .edt-row {
163
64
  display: flex;
@@ -197,24 +98,6 @@ $--color-border-extralight: #F2F6FC !default;
197
98
  }
198
99
  }
199
100
 
200
- .el-dialog.ea-modal {
201
- &.is-closing {
202
- margin: 0 0 50px !important;
203
- }
204
- &.is-fullscreen {
205
- border-radius: 0;
206
- margin: 0;
207
- }
208
- .el-dialog__header {
209
- color: #555;
210
- font-size: 18px;
211
- .el-dialog__title {
212
- color: inherit;
213
- font-size: inherit;
214
- }
215
- }
216
- }
217
-
218
101
  .ea-button-tooltip + .ea-button-tooltip {
219
102
  margin-left: 10px;
220
103
  }
@@ -280,6 +163,57 @@ td {
280
163
  }
281
164
  }
282
165
 
166
+ .ea-split-container {
167
+ display: flex;
168
+ &.is-down {
169
+ user-select: none;
170
+ }
171
+ .sc-left {
172
+ flex-grow: 1;
173
+ flex-shrink: 1;
174
+ }
175
+ .sc-right {
176
+ flex-grow: 1;
177
+ flex-shrink: 1;
178
+ }
179
+ .sc-center {
180
+ flex-grow: 0;
181
+ flex-shrink: 0;
182
+ position: relative;
183
+ }
184
+ .sc-bamboo {
185
+ width: 8px;
186
+ height: 100%;
187
+ border: 1px solid #DCDEE2;
188
+ border-top: none;
189
+ border-bottom: none;
190
+ background-color: #F8F8F9;
191
+ cursor: col-resize;
192
+ user-select: none;
193
+ display: flex;
194
+ flex-direction: column;
195
+ justify-content: center;
196
+ align-items: center;
197
+ margin: 0 16px;
198
+ .sc-texture {
199
+ width: 4px;
200
+ height: 1px;
201
+ background: rgba(23, 35, 61, .25);
202
+ margin-top: 3px;
203
+ }
204
+ }
205
+ .sc-on-bamboo {
206
+ position: absolute;
207
+ top: 50%;
208
+ left: 50%;
209
+ transform: translate(-50%, -50%);
210
+ background-color: #FFF;
211
+ display: flex;
212
+ justify-content: center;
213
+ align-items: center;
214
+ }
215
+ }
216
+
283
217
  .ea-tree {
284
218
  .ea-tree-real {
285
219
  .el-tree-node > .el-tree-node__content{
@@ -292,6 +226,14 @@ td {
292
226
  }
293
227
  }
294
228
 
229
+ .ea-list {
230
+ .loading-text {
231
+ color: $--color-secondary-text;
232
+ text-align: center;
233
+ font-size: inherit;
234
+ }
235
+ }
236
+
295
237
  .ea-number .el-input__inner {
296
238
  text-align: left;
297
239
  }
@@ -340,147 +282,31 @@ td {
340
282
  }
341
283
  }
342
284
 
343
- .ea-split-container {
344
- display: flex;
345
- &.is-down {
346
- user-select: none;
347
- }
348
- .sc-left {
349
- flex-grow: 1;
350
- flex-shrink: 1;
285
+ .file-upload-dialog {
286
+ // 拖拽区域铺满
287
+ .el-upload,
288
+ .el-upload .el-upload-dragger {
289
+ width: 100%;
351
290
  }
352
- .sc-right {
353
- flex-grow: 1;
354
- flex-shrink: 1;
291
+ // 文件列表项边框
292
+ .el-upload-list {
293
+ .el-upload-list__item {
294
+ border: 1px dashed #aaa;
295
+ .el-icon-close {
296
+ display: inline-block;
297
+ }
298
+ }
355
299
  }
356
- .sc-center {
357
- flex-grow: 0;
358
- flex-shrink: 0;
359
- position: relative;
300
+ // 清除文件列表变动过渡动画
301
+ .el-list-enter,
302
+ .el-list-enter-active,
303
+ .el-list-enter-to,
304
+ .el-list-leave,
305
+ .el-list-leave-active,
306
+ .el-list-leave-to {
307
+ -webkit-transition: none !important;
308
+ transition: none !important;
360
309
  }
361
- .sc-bamboo {
362
- width: 8px;
363
- height: 100%;
364
- border: 1px solid #DCDEE2;
365
- border-top: none;
366
- border-bottom: none;
367
- background-color: #F8F8F9;
368
- cursor: col-resize;
369
- user-select: none;
370
- display: flex;
371
- flex-direction: column;
372
- justify-content: center;
373
- align-items: center;
374
- margin: 0 16px;
375
- .sc-texture {
376
- width: 4px;
377
- height: 1px;
378
- background: rgba(23, 35, 61, .25);
379
- margin-top: 3px;
380
- }
381
- }
382
- .sc-on-bamboo {
383
- position: absolute;
384
- top: 50%;
385
- left: 50%;
386
- transform: translate(-50%, -50%);
387
- background-color: #FFF;
388
- display: flex;
389
- justify-content: center;
390
- align-items: center;
391
- }
392
- }
393
-
394
- .ea-list {
395
- .loading-text {
396
- color: $--color-secondary-text;
397
- text-align: center;
398
- font-size: inherit;
399
- }
400
- }
401
-
402
- .file-upload-dialog {
403
- // 拖拽区域铺满
404
- .el-upload,
405
- .el-upload .el-upload-dragger {
406
- width: 100%;
407
- }
408
- // 文件列表项边框
409
- .el-upload-list {
410
- .el-upload-list__item {
411
- border: 1px dashed #aaa;
412
- .el-icon-close {
413
- display: inline-block;
414
- }
415
- }
416
- }
417
- // 清除文件列表变动过渡动画
418
- .el-list-enter,
419
- .el-list-enter-active,
420
- .el-list-enter-to,
421
- .el-list-leave,
422
- .el-list-leave-active,
423
- .el-list-leave-to {
424
- -webkit-transition: none !important;
425
- transition: none !important;
426
- }
427
- }
428
-
429
- .ea-data-tree-body {
430
- &.ea-data-tree-body__border {
431
- border: 1px solid $--color-border-light;
432
- }
433
- }
434
-
435
- .ea-data-tree-row {
436
- height: 32px;
437
- line-height: 32px;
438
- display: flex;
439
- justify-content: flex-start;
440
- position: relative;
441
- padding-left: 20px;
442
- &.odd { background-color: #F8F8F8; }
443
- &:hover { background-color: #EBEEF5; }
444
- .ea-data-tree-cell {
445
- flex: 0 0 auto;
446
- height: 100%;
447
- font-size: 14px;
448
- box-sizing: border-box;
449
- padding: 0 8px;
450
- position: relative;
451
- overflow: hidden;
452
- text-overflow: ellipsis;
453
- white-space: nowrap;
454
- word-break: break-all;
455
- & > .ea-data-tree-checkbox {
456
- position: absolute;
457
- top: 0;
458
- }
459
- }
460
- .ea-data-tree-icon {
461
- cursor: pointer;
462
- position: absolute;
463
- height: 100%;
464
- color: #CCC;
465
- display: flex;
466
- align-items: center;
467
- z-index: 1;
468
- &:hover {
469
- color: #333;
470
- }
471
- }
472
- }
473
-
474
- .ea-data-tree-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
475
- background-color: $--color-secondary-text;
476
- border-color: $--color-secondary-text;
477
- }
478
-
479
- .ea-data-tree-empty {
480
- display: flex;
481
- justify-content: center;
482
- align-items: center;
483
- color: $--color-secondary-text;
484
310
  }
485
311
 
486
312
  .vjs-table {
@@ -682,6 +508,216 @@ td {
682
508
  .ea-icon-more:before { content: "\e60e" }
683
509
  .eafont.ea-icon-conf.has { color: #000 }
684
510
 
511
+ .ea-data-tree-body {
512
+ &.ea-data-tree-body__border {
513
+ border: 1px solid $--color-border-light;
514
+ }
515
+ }
516
+
517
+ .ea-data-tree-row {
518
+ height: 32px;
519
+ line-height: 32px;
520
+ display: flex;
521
+ justify-content: flex-start;
522
+ position: relative;
523
+ padding-left: 20px;
524
+ &.odd { background-color: #F8F8F8; }
525
+ &:hover { background-color: #EBEEF5; }
526
+ .ea-data-tree-cell {
527
+ flex: 0 0 auto;
528
+ height: 100%;
529
+ font-size: 14px;
530
+ box-sizing: border-box;
531
+ padding: 0 8px;
532
+ position: relative;
533
+ overflow: hidden;
534
+ text-overflow: ellipsis;
535
+ white-space: nowrap;
536
+ word-break: break-all;
537
+ & > .ea-data-tree-checkbox {
538
+ position: absolute;
539
+ top: 0;
540
+ }
541
+ }
542
+ .ea-data-tree-icon {
543
+ cursor: pointer;
544
+ position: absolute;
545
+ height: 100%;
546
+ color: #CCC;
547
+ display: flex;
548
+ align-items: center;
549
+ z-index: 1;
550
+ &:hover {
551
+ color: #333;
552
+ }
553
+ }
554
+ }
555
+
556
+ .ea-data-tree-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
557
+ background-color: $--color-secondary-text;
558
+ border-color: $--color-secondary-text;
559
+ }
560
+
561
+ .ea-data-tree-empty {
562
+ display: flex;
563
+ justify-content: center;
564
+ align-items: center;
565
+ color: $--color-secondary-text;
566
+ }
567
+
568
+ // table
569
+ .ea-table {
570
+ // 表格头部样式美化
571
+ .el-table {
572
+ th {
573
+ background-color: $--color-border-extralight;
574
+ color: $--color-primary-text;
575
+ .cell {
576
+ min-height: 30px;
577
+ display: flex;
578
+ justify-content: flex-start;
579
+ align-items: center;
580
+ }
581
+ &.is-center .cell { justify-content: center }
582
+ &.is-right .cell { justify-content: flex-end }
583
+ }
584
+ td, th {
585
+ .cell {
586
+ line-height: 1.2;
587
+ }
588
+ }
589
+ &.el-table--small {
590
+ td, th {
591
+ height: 48px;
592
+ }
593
+ }
594
+ &.is-dense {
595
+ td, th {
596
+ height: 32px;
597
+ padding: 2px 0;
598
+ .el-button {
599
+ padding-top: 0;
600
+ padding-bottom: 0;
601
+ }
602
+ }
603
+ }
604
+ }
605
+ // 列的更多菜单项
606
+ .theader-th-cell {
607
+ .cell-icon-menu {
608
+ position: absolute;
609
+ top: 50%;
610
+ right: 4px;
611
+ transform: rotate(90deg) translateX(-50%);
612
+ color: $--color-placeholder-text;
613
+ cursor: pointer;
614
+ padding: 4px;
615
+ border-radius: 2px;
616
+ &:hover {
617
+ color: $--color-primary-text;
618
+ background-color: $--color-border-light;
619
+ }
620
+ }
621
+ }
622
+ // 表格底部
623
+ .ea-table__footer {
624
+ display: flex;
625
+ justify-content: space-between;
626
+ .ea-table__footer-right {
627
+ margin-left: auto;
628
+ padding-right: 0;
629
+ }
630
+ > * {
631
+ margin-top: 12px;
632
+ }
633
+ }
634
+
635
+ .column-transition-active {
636
+ opacity: 0.33;
637
+ }
638
+
639
+ .el-button > i {
640
+ min-width: 12px;
641
+ }
642
+
643
+ .more-btn > i{
644
+ transform: rotate(-90deg);
645
+ }
646
+ }
647
+
648
+ // table - popover
649
+ .el-popover.ea-popover-no-padding {
650
+ padding: 8px 0;
651
+ min-width: 100px;
652
+ &.dense {
653
+ margin-top: 0px;
654
+ margin-bottom: 0px;
655
+ min-width: 70px;
656
+ }
657
+ }
658
+
659
+ .more-btn-panel {
660
+ &__item {
661
+ &:hover {
662
+ background-color: $--color-border-lighter;
663
+ }
664
+ .el-button {
665
+ padding: 8px 12px;
666
+ width: 100%;
667
+ text-align: left;
668
+ }
669
+ }
670
+ }
671
+
672
+ .ea-zoom-in-top-enter-active,
673
+ .ea-zoom-in-top-leave-active {
674
+ opacity: 1;
675
+ transform: scaleY(1);
676
+ transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
677
+ transform-origin: center top;
678
+ }
679
+ .ea-zoom-in-top-enter,
680
+ .ea-zoom-in-top-leave-active {
681
+ opacity: 0;
682
+ transform: scaleY(0);
683
+ }
684
+
685
+ .ea-form .form-group-title {
686
+ position: relative;
687
+ height: 32px;
688
+ margin-bottom: 22px;
689
+ > span {
690
+ position: absolute;
691
+ top: 0;
692
+ left: 20%;
693
+ padding: 5px 25px;
694
+ background-color: #fff;
695
+ z-index: 1;
696
+ color: $--color-secondary-text;
697
+ }
698
+ &::after {
699
+ content: '';
700
+ position: absolute;
701
+ top: 50%;
702
+ left: 0;
703
+ width: 100%;
704
+ height: 0;
705
+ border-bottom: 1px dashed $--color-border-base;
706
+ }
707
+ }
708
+
709
+ .conf-header {
710
+ border-bottom: 1px solid #DDD;
711
+ padding-bottom: 10px;
712
+ margin-bottom: 10px;
713
+ }
714
+ .conf-body {
715
+ width: 300px;
716
+ }
717
+ .dense-much .el-form-item {
718
+ margin-bottom: 8px !important;
719
+ }
720
+
685
721
  .ea-table-modal {
686
722
  overflow: visible;
687
723
  right: unset;
@@ -736,40 +772,36 @@ td {
736
772
  }
737
773
  }
738
774
 
739
- .ea-form .form-group-title {
740
- position: relative;
741
- height: 32px;
742
- margin-bottom: 22px;
743
- > span {
744
- position: absolute;
745
- top: 0;
746
- left: 20%;
747
- padding: 5px 25px;
748
- background-color: #fff;
749
- z-index: 1;
750
- color: $--color-secondary-text;
775
+ .ea-form .el-form-item__content {
776
+ & > .el-input-number,
777
+ & > .el-input,
778
+ & > .ea-select,
779
+ & > .el-select {
780
+ width: 100%;
751
781
  }
752
- &::after {
753
- content: '';
754
- position: absolute;
755
- top: 50%;
756
- left: 0;
782
+ }
783
+ .ea-form .el-form-item.hidden-label {
784
+ > .el-form-item__label {
785
+ display: none;
786
+ }
787
+ > .el-form-item__content {
757
788
  width: 100%;
758
- height: 0;
759
- border-bottom: 1px dashed $--color-border-base;
760
789
  }
761
790
  }
762
791
 
763
- .conf-header {
764
- border-bottom: 1px solid #DDD;
765
- padding-bottom: 10px;
766
- margin-bottom: 10px;
767
- }
768
- .conf-body {
769
- width: 300px;
770
- }
771
- .dense-much .el-form-item {
772
- margin-bottom: 8px !important;
792
+ .ea-switch-mini {
793
+ .el-switch__core {
794
+ width: 30px !important;
795
+ height: 16px;
796
+ &::after {
797
+ width: 12px;
798
+ height: 12px;
799
+ left: 2px;
800
+ }
801
+ }
802
+ &.is-checked .el-switch__core::after {
803
+ margin-left: -13px;
804
+ }
773
805
  }
774
806
 
775
807
  .ea-select-container {
@@ -811,35 +843,3 @@ td {
811
843
  }
812
844
  }
813
845
  }
814
-
815
- .ea-form .el-form-item__content {
816
- & > .el-input-number,
817
- & > .el-input,
818
- & > .ea-select,
819
- & > .el-select {
820
- width: 100%;
821
- }
822
- }
823
- .ea-form .el-form-item.hidden-label {
824
- > .el-form-item__label {
825
- display: none;
826
- }
827
- > .el-form-item__content {
828
- width: 100%;
829
- }
830
- }
831
-
832
- .ea-switch-mini {
833
- .el-switch__core {
834
- width: 30px !important;
835
- height: 16px;
836
- &::after {
837
- width: 12px;
838
- height: 12px;
839
- left: 2px;
840
- }
841
- }
842
- &.is-checked .el-switch__core::after {
843
- margin-left: -13px;
844
- }
845
- }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "element-assits",
3
- "version": "0.0.53",
3
+ "version": "0.0.55",
4
4
  "description": "element-ui 的扩展组件库",
5
5
  "main": "lib/index.js",
6
6
  "type": "module",