element-assits 0.0.49 → 0.0.51

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/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,63 +41,6 @@ $--color-border-extralight: #F2F6FC !default;
158
41
  }
159
42
  }
160
43
 
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
-
218
44
  .ea-button-tooltip + .ea-button-tooltip {
219
45
  margin-left: 10px;
220
46
  }
@@ -280,6 +106,75 @@ td {
280
106
  }
281
107
  }
282
108
 
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
+
283
178
  .ea-split-container {
284
179
  display: flex;
285
180
  &.is-down {
@@ -331,18 +226,6 @@ td {
331
226
  }
332
227
  }
333
228
 
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
-
346
229
  .ea-list {
347
230
  .loading-text {
348
231
  color: $--color-secondary-text;
@@ -351,6 +234,10 @@ td {
351
234
  }
352
235
  }
353
236
 
237
+ .ea-number .el-input__inner {
238
+ text-align: left;
239
+ }
240
+
354
241
  .ea-desc {
355
242
  font-size: 14px;
356
243
  &__title {
@@ -395,10 +282,6 @@ td {
395
282
  }
396
283
  }
397
284
 
398
- .ea-number .el-input__inner {
399
- text-align: left;
400
- }
401
-
402
285
  .file-upload-dialog {
403
286
  // 拖拽区域铺满
404
287
  .el-upload,
@@ -682,6 +565,159 @@ td {
682
565
  color: $--color-secondary-text;
683
566
  }
684
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-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
+ }
751
784
  }
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;
785
+ &.is-checked .el-switch__core::after {
786
+ margin-left: -13px;
760
787
  }
761
788
  }
762
789
 
763
- .conf-header {
764
- border-bottom: 1px solid #DDD;
765
- padding-bottom: 10px;
766
- margin-bottom: 10px;
767
- }
768
- .conf-body {
769
- width: 300px;
790
+ .ea-form .el-form-item__content {
791
+ & > .el-input-number,
792
+ & > .el-input,
793
+ & > .ea-select,
794
+ & > .el-select {
795
+ width: 100%;
796
+ }
770
797
  }
771
- .dense-much .el-form-item {
772
- margin-bottom: 8px !important;
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
+ }
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.49",
3
+ "version": "0.0.51",
4
4
  "description": "element-ui 的扩展组件库",
5
5
  "main": "lib/index.js",
6
6
  "type": "module",