element-assits 0.0.18 → 0.0.19

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/index.js CHANGED
@@ -2064,13 +2064,13 @@ var El = function() {
2064
2064
  ...e.$attrs
2065
2065
  }, !1), e.$listeners), [e._t("before-column"), e.theIndex.show ? n("el-table-column", e._b({ attrs: { type: "index" }, scopedSlots: e._u([{ key: "default", fn: function({ $index: r }) {
2066
2066
  return [e._v(" " + e._s((e.asyncPageCurrent - 1) * e.page.pageSize + r + 1) + " ")];
2067
- } }], null, !1, 2889338112) }, "el-table-column", { label: "\u5E8F\u53F7", align: "center", fixed: !0, width: 50 + Math.ceil((String(e.page.current).length - 1) * 7), ...e.theIndex.attrs }, !1)) : e._e(), e.theSelection.show ? n("el-table-column", e._b({ attrs: { type: "selection" } }, "el-table-column", { align: "center", fixed: !0, ...e.theSelection.attrs }, !1)) : e._e(), e._l(e.rawColumn.filter((r) => r.show !== !1), function(r) {
2067
+ } }], null, !1, 2889338112) }, "el-table-column", { label: "\u5E8F\u53F7", align: "center", fixed: !0, width: 50 + Math.ceil((String(e.page.current).length - 1) * 7), ...e.theIndex.attrs }, !1)) : e._e(), e.theSelection.show ? n("el-table-column", e._b({ attrs: { type: "selection" } }, "el-table-column", { align: "center", fixed: !0, width: 50, ...e.theSelection.attrs }, !1)) : e._e(), e._l(e.rawColumn.filter((r) => r.show !== !1), function(r) {
2068
2068
  return n("el-table-column", e._g(e._b({ key: r.key, attrs: { label: r.label, prop: r.prop }, scopedSlots: e._u([r.bind.render ? { key: "default", fn: function({ row: i, column: s }) {
2069
2069
  return [n(e.generateRender(i, r, s), { tag: "component" })];
2070
2070
  } } : null], null, !0) }, "el-table-column", r.bind, !1), r.on));
2071
2071
  }), e.theOperation.show ? n("el-table-column", e._b({ scopedSlots: e._u([{ key: "default", fn: function(r) {
2072
- return [e.theOperation.render ? n(e.theOperation.render, { key: e.uuid(), tag: "component", attrs: { scope: r } }) : e._t("row-menu", null, null, r)];
2073
- } }], null, !1, 3677384915) }, "el-table-column", { label: "\u64CD\u4F5C", align: "center", fixed: "right", ...e.theOperation.attrs }, !1)) : e._e(), e._t("after-column")], 2)], 1)];
2072
+ return [e.theOperation.render ? n(e.theOperation.render, { key: e.uuid(), tag: "component", attrs: { scope: r } }) : n("div", { key: e.uuid() }, [e._t("row-menu", null, null, r)], 2)];
2073
+ } }], null, !1, 931019466) }, "el-table-column", { label: "\u64CD\u4F5C", align: "center", fixed: "right", ...e.theOperation.attrs }, !1)) : e._e(), e._t("after-column")], 2)], 1)];
2074
2074
  }, { data: e.data }), e._t("footer", function() {
2075
2075
  return [n("div", { staticClass: "ea-table__footer" }, [n("div", [e._t("bottom-menu")], 2), e.thePagination.show && e.page.total ? n("el-pagination", e._b({ staticClass: "ea-table__footer-right", attrs: { layout: "total, sizes, prev, pager, next, jumper", "page-size": e.page.pageSize, "current-page": e.page.current, total: e.page.total, "page-sizes": [10, 20, 50, 100], background: "" }, on: { "size-change": e.handleSizeChange, "current-change": e.handleCurrentChange } }, "el-pagination", e.thePagination.attrs, !1)) : e._e()], 1)];
2076
2076
  })], 2);
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;
@@ -40,6 +157,61 @@ $--color-border-extralight: #F2F6FC !default;
40
157
  }
41
158
  }
42
159
 
160
+ .el-dialog.ea-modal {
161
+ &.is-closing {
162
+ margin: 0 !important;
163
+ }
164
+ &.is-fullscreen {
165
+ border-radius: 0;
166
+ margin: 0;
167
+ }
168
+ .el-dialog__header {
169
+ color: #555;
170
+ font-size: 18px;
171
+ .el-dialog__title {
172
+ color: inherit;
173
+ font-size: inherit;
174
+ }
175
+ }
176
+ }
177
+
178
+ .ea-split-container {
179
+ display: flex;
180
+ &.is-down {
181
+ user-select: none;
182
+ }
183
+ .sc-left {
184
+ flex-grow: 1;
185
+ flex-shrink: 1;
186
+ }
187
+ .sc-right {
188
+ flex-grow: 1;
189
+ flex-shrink: 1;
190
+ }
191
+ .sc-bamboo {
192
+ flex-grow: 0;
193
+ flex-shrink: 0;
194
+ width: 8px;
195
+ border: 1px solid #DCDEE2;
196
+ border-top: none;
197
+ border-bottom: none;
198
+ background-color: #F8F8F9;
199
+ cursor: col-resize;
200
+ user-select: none;
201
+ display: flex;
202
+ flex-direction: column;
203
+ justify-content: center;
204
+ align-items: center;
205
+ margin: 0 16px;
206
+ .sc-texture {
207
+ width: 4px;
208
+ height: 1px;
209
+ background: rgba(23, 35, 61, .25);
210
+ margin-top: 3px;
211
+ }
212
+ }
213
+ }
214
+
43
215
  .ea-button-tooltip + .ea-button-tooltip {
44
216
  margin-left: 10px;
45
217
  }
@@ -105,59 +277,20 @@ td {
105
277
  }
106
278
  }
107
279
 
108
- .ea-split-container {
109
- display: flex;
110
- &.is-down {
111
- user-select: none;
112
- }
113
- .sc-left {
114
- flex-grow: 1;
115
- flex-shrink: 1;
116
- }
117
- .sc-right {
118
- flex-grow: 1;
119
- flex-shrink: 1;
120
- }
121
- .sc-bamboo {
122
- flex-grow: 0;
123
- flex-shrink: 0;
124
- width: 8px;
125
- border: 1px solid #DCDEE2;
126
- border-top: none;
127
- border-bottom: none;
128
- background-color: #F8F8F9;
129
- cursor: col-resize;
130
- user-select: none;
131
- display: flex;
132
- flex-direction: column;
133
- justify-content: center;
134
- align-items: center;
135
- margin: 0 16px;
136
- .sc-texture {
137
- width: 4px;
138
- height: 1px;
139
- background: rgba(23, 35, 61, .25);
140
- margin-top: 3px;
280
+ .ea-tree {
281
+ .ea-tree-real {
282
+ .el-tree-node > .el-tree-node__content{
283
+ border-radius: 4px;
284
+ }
285
+ .el-tree-node.is-current > .el-tree-node__content {
286
+ color: $--color-primary;
287
+ background-color: rgba($--color-primary, 0.1);
141
288
  }
142
289
  }
143
290
  }
144
291
 
145
- .el-dialog.ea-modal {
146
- &.is-closing {
147
- margin: 0 !important;
148
- }
149
- &.is-fullscreen {
150
- border-radius: 0;
151
- margin: 0;
152
- }
153
- .el-dialog__header {
154
- color: #555;
155
- font-size: 18px;
156
- .el-dialog__title {
157
- color: inherit;
158
- font-size: inherit;
159
- }
160
- }
292
+ .ea-number .el-input__inner {
293
+ text-align: left;
161
294
  }
162
295
 
163
296
  .ea-list {
@@ -168,22 +301,6 @@ td {
168
301
  }
169
302
  }
170
303
 
171
- .ea-number .el-input__inner {
172
- text-align: left;
173
- }
174
-
175
- .ea-tree {
176
- .ea-tree-real {
177
- .el-tree-node > .el-tree-node__content{
178
- border-radius: 4px;
179
- }
180
- .el-tree-node.is-current > .el-tree-node__content {
181
- color: $--color-primary;
182
- background-color: rgba($--color-primary, 0.1);
183
- }
184
- }
185
- }
186
-
187
304
  .ea-desc {
188
305
  font-size: 14px;
189
306
  &__title {
@@ -254,147 +371,6 @@ td {
254
371
  }
255
372
  }
256
373
 
257
- // table
258
- .ea-table {
259
- // 表格头部样式美化
260
- .el-table {
261
- th {
262
- background-color: $--color-border-extralight;
263
- color: $--color-primary-text;
264
- .cell {
265
- min-height: 30px;
266
- display: flex;
267
- justify-content: flex-start;
268
- align-items: center;
269
- }
270
- &.is-center .cell { justify-content: center }
271
- &.is-right .cell { justify-content: flex-end }
272
- }
273
- td, th {
274
- .cell {
275
- line-height: 1.2;
276
- }
277
- }
278
- &.el-table--small {
279
- td, th {
280
- height: 48px;
281
- }
282
- }
283
- &.is-dense {
284
- td, th {
285
- height: 32px;
286
- padding: 2px 0;
287
- .el-button {
288
- padding-top: 0;
289
- padding-bottom: 0;
290
- }
291
- }
292
- }
293
- }
294
- // 列的更多菜单项
295
- .theader-th-cell {
296
- .cell-icon-menu {
297
- position: absolute;
298
- top: 50%;
299
- right: 4px;
300
- transform: rotate(90deg) translateX(-50%);
301
- color: $--color-placeholder-text;
302
- cursor: pointer;
303
- padding: 4px;
304
- border-radius: 2px;
305
- &:hover {
306
- color: $--color-primary-text;
307
- background-color: $--color-border-light;
308
- }
309
- }
310
- }
311
- // 表格底部
312
- .ea-table__footer {
313
- display: flex;
314
- justify-content: space-between;
315
- .ea-table__footer-right {
316
- margin-left: auto;
317
- padding-right: 0;
318
- }
319
- > * {
320
- margin-top: 12px;
321
- }
322
- }
323
-
324
- .column-transition-active {
325
- opacity: 0.33;
326
- }
327
-
328
- .el-button > i {
329
- min-width: 12px;
330
- }
331
-
332
- .more-btn > i{
333
- transform: rotate(-90deg);
334
- }
335
- }
336
-
337
- // table - popover
338
- .el-popover.ea-popover-no-padding {
339
- padding: 8px 0;
340
- min-width: 100px;
341
- &.dense {
342
- margin-top: 0px;
343
- margin-bottom: 0px;
344
- min-width: 70px;
345
- }
346
- }
347
-
348
- .more-btn-panel {
349
- &__item {
350
- &:hover {
351
- background-color: $--color-border-lighter;
352
- }
353
- .el-button {
354
- padding: 8px 12px;
355
- width: 100%;
356
- text-align: left;
357
- }
358
- }
359
- }
360
-
361
- .ea-zoom-in-top-enter-active,
362
- .ea-zoom-in-top-leave-active {
363
- opacity: 1;
364
- transform: scaleY(1);
365
- transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
366
- transform-origin: center top;
367
- }
368
- .ea-zoom-in-top-enter,
369
- .ea-zoom-in-top-leave-active {
370
- opacity: 0;
371
- transform: scaleY(0);
372
- }
373
-
374
- .ea-form .form-group-title {
375
- position: relative;
376
- height: 32px;
377
- margin-bottom: 22px;
378
- > span {
379
- position: absolute;
380
- top: 0;
381
- left: 20%;
382
- padding: 5px 25px;
383
- background-color: #fff;
384
- z-index: 1;
385
- color: $--color-secondary-text;
386
- }
387
- &::after {
388
- content: '';
389
- position: absolute;
390
- top: 50%;
391
- left: 0;
392
- width: 100%;
393
- height: 0;
394
- border-bottom: 1px dashed $--color-border-base;
395
- }
396
- }
397
-
398
374
  .ea-table-modal {
399
375
  overflow: visible;
400
376
  right: unset;
@@ -449,20 +425,27 @@ td {
449
425
  }
450
426
  }
451
427
 
452
- .ea-form .el-form-item__content {
453
- & > .el-input-number,
454
- & > .el-input,
455
- & > .ea-select,
456
- & > .el-select {
457
- width: 100%;
458
- }
459
- }
460
- .ea-form .el-form-item.hidden-label {
461
- > .el-form-item__label {
462
- display: none;
428
+ .ea-form .form-group-title {
429
+ position: relative;
430
+ height: 32px;
431
+ margin-bottom: 22px;
432
+ > span {
433
+ position: absolute;
434
+ top: 0;
435
+ left: 20%;
436
+ padding: 5px 25px;
437
+ background-color: #fff;
438
+ z-index: 1;
439
+ color: $--color-secondary-text;
463
440
  }
464
- > .el-form-item__content {
441
+ &::after {
442
+ content: '';
443
+ position: absolute;
444
+ top: 50%;
445
+ left: 0;
465
446
  width: 100%;
447
+ height: 0;
448
+ border-bottom: 1px dashed $--color-border-base;
466
449
  }
467
450
  }
468
451
 
@@ -505,3 +488,20 @@ td {
505
488
  }
506
489
  }
507
490
  }
491
+
492
+ .ea-form .el-form-item__content {
493
+ & > .el-input-number,
494
+ & > .el-input,
495
+ & > .ea-select,
496
+ & > .el-select {
497
+ width: 100%;
498
+ }
499
+ }
500
+ .ea-form .el-form-item.hidden-label {
501
+ > .el-form-item__label {
502
+ display: none;
503
+ }
504
+ > .el-form-item__content {
505
+ width: 100%;
506
+ }
507
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "element-assits",
3
- "version": "0.0.18",
3
+ "version": "0.0.19",
4
4
  "description": "element-ui 的扩展组件库",
5
5
  "main": "lib/index.js",
6
6
  "type": "module",