element-assits 0.0.51 → 0.0.52

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
@@ -85,7 +85,7 @@ Vue 原型上挂载了 `$asyncLoad` 方法(与asyncLoad相同)
85
85
  #### events
86
86
  | 事件名 | 说明 | 参数 |
87
87
  |:---|:---|:---|
88
- |search-reset| 搜索重置事件|callback 重置表单并搜索(不监听时默认行为) <br> reset 仅重置表单<br> search 仅搜索 |
88
+ |search-reset| 搜索重置事件|params.callback 重置表单并搜索(不监听时默认行为) <br> params.reset 仅重置表单<br> params.search 仅搜索 |
89
89
  #### column-attributes
90
90
  | 属性名 | 类型 | 默认值 | 说明 |
91
91
  |:---|:---|:---|:---|
package/lib/index.js CHANGED
@@ -2363,7 +2363,7 @@ const Zx = {
2363
2363
  this.getList();
2364
2364
  },
2365
2365
  handleReset({ callback: r, reset: n, search: i }) {
2366
- this.$listeners["search-reset"] ? this.$emit("search-reset", r, n, i) : r && r();
2366
+ this.$listeners["search-reset"] ? this.$emit("search-reset", { callback: r, reset: n, search: i }) : r && r();
2367
2367
  },
2368
2368
  handleClear() {
2369
2369
  this.tableData = [], this.page.total = 0;
package/lib/style.scss CHANGED
@@ -11,6 +11,123 @@ $--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
+
14
131
  .ea-select {
15
132
  display: inline-block;
16
133
  position: relative;
@@ -41,6 +158,63 @@ $--color-border-extralight: #F2F6FC !default;
41
158
  }
42
159
  }
43
160
 
161
+ .ea-data-table {
162
+ .edt-row {
163
+ display: flex;
164
+ .edt-cell {
165
+ padding: 0 8px;
166
+ flex: 0 0 auto;
167
+ box-sizing: border-box;
168
+ overflow: hidden;
169
+ text-overflow: ellipsis;
170
+ white-space: nowrap;
171
+ word-break: break-all;
172
+ }
173
+ &.edt-header {
174
+ background-color: $--color-border-extralight;
175
+ color: $--color-primary-text;
176
+ }
177
+ }
178
+ &--border {
179
+ border: 1px solid $--color-border-light;
180
+ .edt-row {
181
+ .edt-cell {
182
+ border-bottom: 1px solid $--color-border-light;
183
+ border-left: 1px solid $--color-border-light;
184
+ &:first-child {
185
+ border-left: 0;
186
+ }
187
+ }
188
+ &:last-child .edt-cell{
189
+ border-bottom: 0;
190
+ }
191
+ }
192
+ }
193
+ .loading-text {
194
+ color: $--color-secondary-text;
195
+ text-align: center;
196
+ font-size: inherit;
197
+ }
198
+ }
199
+
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
+
44
218
  .ea-button-tooltip + .ea-button-tooltip {
45
219
  margin-left: 10px;
46
220
  }
@@ -106,75 +280,6 @@ td {
106
280
  }
107
281
  }
108
282
 
109
- .ea-data-table {
110
- .edt-row {
111
- display: flex;
112
- .edt-cell {
113
- padding: 0 8px;
114
- flex: 0 0 auto;
115
- box-sizing: border-box;
116
- overflow: hidden;
117
- text-overflow: ellipsis;
118
- white-space: nowrap;
119
- word-break: break-all;
120
- }
121
- &.edt-header {
122
- background-color: $--color-border-extralight;
123
- color: $--color-primary-text;
124
- }
125
- }
126
- &--border {
127
- border: 1px solid $--color-border-light;
128
- .edt-row {
129
- .edt-cell {
130
- border-bottom: 1px solid $--color-border-light;
131
- border-left: 1px solid $--color-border-light;
132
- &:first-child {
133
- border-left: 0;
134
- }
135
- }
136
- &:last-child .edt-cell{
137
- border-bottom: 0;
138
- }
139
- }
140
- }
141
- .loading-text {
142
- color: $--color-secondary-text;
143
- text-align: center;
144
- font-size: inherit;
145
- }
146
- }
147
-
148
- .el-dialog.ea-modal {
149
- &.is-closing {
150
- margin: 0 0 50px !important;
151
- }
152
- &.is-fullscreen {
153
- border-radius: 0;
154
- margin: 0;
155
- }
156
- .el-dialog__header {
157
- color: #555;
158
- font-size: 18px;
159
- .el-dialog__title {
160
- color: inherit;
161
- font-size: inherit;
162
- }
163
- }
164
- }
165
-
166
- .ea-tree {
167
- .ea-tree-real {
168
- .el-tree-node > .el-tree-node__content{
169
- border-radius: 4px;
170
- }
171
- .el-tree-node.is-current > .el-tree-node__content {
172
- color: $--color-primary;
173
- background-color: rgba($--color-primary, 0.1);
174
- }
175
- }
176
- }
177
-
178
283
  .ea-split-container {
179
284
  display: flex;
180
285
  &.is-down {
@@ -226,6 +331,18 @@ td {
226
331
  }
227
332
  }
228
333
 
334
+ .ea-tree {
335
+ .ea-tree-real {
336
+ .el-tree-node > .el-tree-node__content{
337
+ border-radius: 4px;
338
+ }
339
+ .el-tree-node.is-current > .el-tree-node__content {
340
+ color: $--color-primary;
341
+ background-color: rgba($--color-primary, 0.1);
342
+ }
343
+ }
344
+ }
345
+
229
346
  .ea-list {
230
347
  .loading-text {
231
348
  color: $--color-secondary-text;
@@ -234,10 +351,6 @@ td {
234
351
  }
235
352
  }
236
353
 
237
- .ea-number .el-input__inner {
238
- text-align: left;
239
- }
240
-
241
354
  .ea-desc {
242
355
  font-size: 14px;
243
356
  &__title {
@@ -282,6 +395,10 @@ td {
282
395
  }
283
396
  }
284
397
 
398
+ .ea-number .el-input__inner {
399
+ text-align: left;
400
+ }
401
+
285
402
  .file-upload-dialog {
286
403
  // 拖拽区域铺满
287
404
  .el-upload,
@@ -309,6 +426,63 @@ td {
309
426
  }
310
427
  }
311
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
+ }
485
+
312
486
  .vjs-table {
313
487
  position: relative;
314
488
  overflow: hidden;
@@ -508,216 +682,6 @@ td {
508
682
  .ea-icon-more:before { content: "\e60e" }
509
683
  .eafont.ea-icon-conf.has { color: #000 }
510
684
 
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
-
721
685
  .ea-table-modal {
722
686
  overflow: visible;
723
687
  right: unset;
@@ -772,36 +736,40 @@ td {
772
736
  }
773
737
  }
774
738
 
775
- .ea-switch-mini {
776
- .el-switch__core {
777
- width: 30px !important;
778
- height: 16px;
779
- &::after {
780
- width: 12px;
781
- height: 12px;
782
- left: 2px;
783
- }
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;
784
751
  }
785
- &.is-checked .el-switch__core::after {
786
- margin-left: -13px;
752
+ &::after {
753
+ content: '';
754
+ position: absolute;
755
+ top: 50%;
756
+ left: 0;
757
+ width: 100%;
758
+ height: 0;
759
+ border-bottom: 1px dashed $--color-border-base;
787
760
  }
788
761
  }
789
762
 
790
- .ea-form .el-form-item__content {
791
- & > .el-input-number,
792
- & > .el-input,
793
- & > .ea-select,
794
- & > .el-select {
795
- width: 100%;
796
- }
763
+ .conf-header {
764
+ border-bottom: 1px solid #DDD;
765
+ padding-bottom: 10px;
766
+ margin-bottom: 10px;
797
767
  }
798
- .ea-form .el-form-item.hidden-label {
799
- > .el-form-item__label {
800
- display: none;
801
- }
802
- > .el-form-item__content {
803
- width: 100%;
804
- }
768
+ .conf-body {
769
+ width: 300px;
770
+ }
771
+ .dense-much .el-form-item {
772
+ margin-bottom: 8px !important;
805
773
  }
806
774
 
807
775
  .ea-select-container {
@@ -843,3 +811,35 @@ td {
843
811
  }
844
812
  }
845
813
  }
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.51",
3
+ "version": "0.0.52",
4
4
  "description": "element-ui 的扩展组件库",
5
5
  "main": "lib/index.js",
6
6
  "type": "module",