iov-design 2.15.58 → 2.15.59

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 (45) hide show
  1. package/lib/button.js +7 -1
  2. package/lib/dialog.js +1 -1
  3. package/lib/image.js +1 -1
  4. package/lib/index.js +1 -1
  5. package/lib/iov-design.common.js +22 -10
  6. package/lib/popover.js +9 -3
  7. package/lib/table-column.js +3 -3
  8. package/lib/theme-chalk/autocomplete.css +1 -1
  9. package/lib/theme-chalk/base.css +1 -1
  10. package/lib/theme-chalk/button.css +1 -1
  11. package/lib/theme-chalk/calendar.css +1 -1
  12. package/lib/theme-chalk/cascader-panel.css +1 -1
  13. package/lib/theme-chalk/cascader.css +1 -1
  14. package/lib/theme-chalk/date-picker.css +1 -1
  15. package/lib/theme-chalk/dropdown.css +1 -1
  16. package/lib/theme-chalk/index.css +1 -1
  17. package/lib/theme-chalk/iovfont.css +1 -1
  18. package/lib/theme-chalk/message-box.css +1 -1
  19. package/lib/theme-chalk/pagination.css +1 -1
  20. package/lib/theme-chalk/popover.css +1 -1
  21. package/lib/theme-chalk/popper.css +1 -1
  22. package/lib/theme-chalk/select-dropdown.css +1 -1
  23. package/lib/theme-chalk/select.css +1 -1
  24. package/lib/theme-chalk/slider.css +1 -1
  25. package/lib/theme-chalk/table.css +1 -1
  26. package/lib/theme-chalk/time-picker.css +1 -1
  27. package/lib/theme-chalk/time-select.css +1 -1
  28. package/lib/theme-chalk/tooltip.css +1 -1
  29. package/lib/theme-chalk/transfer.css +1 -1
  30. package/package.json +1 -1
  31. package/packages/button/src/button.vue +6 -1
  32. package/packages/dialog/src/component.vue +1 -1
  33. package/packages/image/src/image-viewer.vue +1 -1
  34. package/packages/popover/src/main.vue +3 -1
  35. package/packages/table/src/config.js +3 -3
  36. package/packages/theme-chalk/src/button.scss +72 -0
  37. package/packages/theme-chalk/src/cascader-panel.scss +5 -1
  38. package/packages/theme-chalk/src/common/popup.scss +2 -2
  39. package/packages/theme-chalk/src/common/var.scss +0 -38
  40. package/packages/theme-chalk/src/iovfont.scss +8 -2
  41. package/packages/theme-chalk/src/popover.scss +18 -12
  42. package/packages/theme-chalk/src/popper.scss +59 -60
  43. package/packages/theme-chalk/src/table.scss +36 -22
  44. package/packages/theme-chalk/src/tooltip.scss +35 -33
  45. package/src/index.js +1 -1
package/packages/theme-chalk/src/popper.scss CHANGED
@@ -13,90 +13,89 @@
13
13
  }
14
14
 
15
15
  .popper__arrow {
16
- display: none;
17
- border-width: $--popover-arrow-size;
16
+ border-width: 6px;
18
17
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
19
18
  }
20
19
 
21
20
  .popper__arrow::after {
22
21
  content: " ";
23
- border-width: $--popover-arrow-size;
22
+ border-width: 6px;
24
23
  }
25
24
 
26
25
  &[x-placement^="top"] {
27
- margin-bottom: 4px;
26
+ margin-bottom: 10px;
28
27
  }
29
28
 
30
- // &[x-placement^="top"] .popper__arrow {
31
- // bottom: -$--popover-arrow-size;
32
- // left: 50%;
33
- // margin-right: #{$--tooltip-arrow-size / 2};
34
- // border-top-color: $--popover-border-color;
35
- // border-bottom-width: 0;
29
+ &[x-placement^="top"] .popper__arrow {
30
+ bottom: -6px;
31
+ left: 50%;
32
+ margin-right: 3px;
33
+ border-top-color: $--color-line-2;
34
+ border-bottom-width: 0;
36
35
 
37
- // &::after {
38
- // bottom: 1px;
39
- // margin-left: -$--popover-arrow-size;
40
- // border-top-color: $--popover-background-color;
41
- // border-bottom-width: 0;
42
- // }
43
- // }
36
+ &::after {
37
+ bottom: 0.5px;
38
+ margin-left: -6px;
39
+ border-top-color: #fff;
40
+ border-bottom-width: 0;
41
+ }
42
+ }
44
43
 
45
44
  &[x-placement^="bottom"] {
46
- margin-top: 4px;
45
+ margin-top: 10px;
47
46
  }
48
47
 
49
- // &[x-placement^="bottom"] .popper__arrow {
50
- // top: -$--popover-arrow-size;
51
- // left: 50%;
52
- // margin-right: #{$--tooltip-arrow-size / 2};
53
- // border-top-width: 0;
54
- // border-bottom-color: $--popover-border-color;
48
+ &[x-placement^="bottom"] .popper__arrow {
49
+ top: -6px;
50
+ left: 50%;
51
+ margin-right: 3px;
52
+ border-top-width: 0;
53
+ border-bottom-color: $--color-line-2;
55
54
 
56
- // &::after {
57
- // top: 1px;
58
- // margin-left: -$--popover-arrow-size;
59
- // border-top-width: 0;
60
- // border-bottom-color: $--popover-background-color;
61
- // }
62
- // }
55
+ &::after {
56
+ top: 0.5px;
57
+ margin-left: -6px;
58
+ border-top-width: 0;
59
+ border-bottom-color: #fff;
60
+ }
61
+ }
63
62
 
64
63
  &[x-placement^="right"] {
65
- margin-left: 4px;
64
+ margin-left: 10px;
66
65
  }
67
66
 
68
- // &[x-placement^="right"] .popper__arrow {
69
- // top: 50%;
70
- // left: -$--popover-arrow-size;
71
- // margin-bottom: #{$--tooltip-arrow-size / 2};
72
- // border-right-color: $--popover-border-color;
73
- // border-left-width: 0;
67
+ &[x-placement^="right"] .popper__arrow {
68
+ top: 50%;
69
+ left: -6px;
70
+ margin-bottom: 3px;
71
+ border-right-color: $--color-line-2;
72
+ border-left-width: 0;
74
73
 
75
- // &::after {
76
- // bottom: -$--popover-arrow-size;
77
- // left: 1px;
78
- // border-right-color: $--popover-background-color;
79
- // border-left-width: 0;
80
- // }
81
- // }
74
+ &::after {
75
+ bottom: -6px;
76
+ left: 0.5px;
77
+ border-right-color: #fff;
78
+ border-left-width: 0;
79
+ }
80
+ }
82
81
 
83
82
  &[x-placement^="left"] {
84
- margin-right: 4px;
83
+ margin-right: 10px;
85
84
  }
86
85
 
87
- // &[x-placement^="left"] .popper__arrow {
88
- // top: 50%;
89
- // right: -$--popover-arrow-size;
90
- // margin-bottom: #{$--tooltip-arrow-size / 2};
91
- // border-right-width: 0;
92
- // border-left-color: $--popover-border-color;
86
+ &[x-placement^="left"] .popper__arrow {
87
+ top: 50%;
88
+ right: -6px;
89
+ margin-bottom: 3px;
90
+ border-right-width: 0;
91
+ border-left-color: $--color-line-2;
93
92
 
94
- // &::after {
95
- // right: 1px;
96
- // bottom: -$--popover-arrow-size;
97
- // margin-left: -$--popover-arrow-size;
98
- // border-right-width: 0;
99
- // border-left-color: $--popover-background-color;
100
- // }
101
- // }
93
+ &::after {
94
+ right: 0.5px;
95
+ bottom: -6px;
96
+ margin-left: -6px;
97
+ border-right-width: 0;
98
+ border-left-color: #fff;
99
+ }
100
+ }
102
101
  }
package/packages/theme-chalk/src/table.scss CHANGED
@@ -62,31 +62,40 @@
62
62
  @include e(expand-icon) {
63
63
  position: relative;
64
64
  cursor: pointer;
65
- color: #666;
66
- font-size: 12px;
67
- transition: transform 0.2s ease-in-out;
68
- height: 20px;
69
-
65
+ width: 16px;
66
+ height: 16px;
67
+ background-size: contain;
68
+ background-position: 0 0;
69
+ background-repeat: no-repeat;
70
+ .el-icon:before {
71
+ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzU1MTM5NTUyMTQ4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjY3MjAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTc2LjggNzYuOG0xMDguOCAwbDY1Mi44IDBxMTA4LjggMCAxMDguOCAxMDguOGwwIDY1Mi44cTAgMTA4LjgtMTA4LjggMTA4LjhsLTY1Mi44IDBxLTEwOC44IDAtMTA4LjgtMTA4LjhsMC02NTIuOHEwLTEwOC44IDEwOC44LTEwOC44WiIgZmlsbD0iIzQ5NEI1MyIgcC1pZD0iNjcyMSI+PC9wYXRoPjxwYXRoIGQ9Ik04OTYgMGExMjggMTI4IDAgMCAxIDEyOCAxMjh2NzY4YTEyOCAxMjggMCAwIDEtMTI4IDEyOEgxMjhhMTI4IDEyOCAwIDAgMS0xMjgtMTI4VjEyOGExMjggMTI4IDAgMCAxIDEyOC0xMjhoNzY4ek01NTYuOCAzMjBoLTg5LjZ2MTQ3LjJIMzIwdjg5LjZoMTQ3LjJ2MTQ3LjJoODkuNnYtMTQ3LjJoMTQ3LjJ2LTg5LjZoLTE0Ny4yVjMyMHoiIGZpbGw9IiNGRkZGRkYiIHAtaWQ9IjY3MjIiPjwvcGF0aD48cGF0aCBkPSJNODk2IDBhMTI4IDEyOCAwIDAgMSAxMjggMTI4djc2OGExMjggMTI4IDAgMCAxLTEyOCAxMjhIMTI4YTEyOCAxMjggMCAwIDEtMTI4LTEyOFYxMjhhMTI4IDEyOCAwIDAgMSAxMjgtMTI4aDc2OHogbTAgNjRIMTI4QTY0IDY0IDAgMCAwIDY0IDEyOHY3NjhBNjQgNjQgMCAwIDAgMTI4IDk2MGg3NjhhNjQgNjQgMCAwIDAgNjQtNjRWMTI4QTY0IDY0IDAgMCAwIDg5NiA2NHoiIGZpbGw9IiNEMkQ1REYiIHAtaWQ9IjY3MjMiPjwvcGF0aD48L3N2Zz4=);
72
+ }
70
73
  @include m(expanded) {
71
- transform: rotate(90deg);
74
+ .el-icon:before {
75
+ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzU1MTM5NTYxODQ0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjY4NjQiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTc2LjggNzYuOGg4NzAuNHY4NzAuNEg3Ni44eiIgZmlsbD0iIzQ5NEI1MyIgcC1pZD0iNjg2NSI+PC9wYXRoPjxwYXRoIGQ9Ik04OTYgMGExMjggMTI4IDAgMCAxIDEyOCAxMjh2NzY4YTEyOCAxMjggMCAwIDEtMTI4IDEyOEgxMjhhMTI4IDEyOCAwIDAgMS0xMjgtMTI4VjEyOGExMjggMTI4IDAgMCAxIDEyOC0xMjhoNzY4eiBtLTE5MiA0NjcuMmgtMzg0djg5LjZoMzg0di04OS42eiIgZmlsbD0iI0ZGRkZGRiIgcC1pZD0iNjg2NiI+PC9wYXRoPjxwYXRoIGQ9Ik04OTYgMGExMjggMTI4IDAgMCAxIDEyOCAxMjh2NzY4YTEyOCAxMjggMCAwIDEtMTI4IDEyOEgxMjhhMTI4IDEyOCAwIDAgMS0xMjgtMTI4VjEyOGExMjggMTI4IDAgMCAxIDEyOC0xMjhoNzY4eiBtMCA2NEgxMjhBNjQgNjQgMCAwIDAgNjQgMTI4djc2OEE2NCA2NCAwIDAgMCAxMjggOTYwaDc2OGE2NCA2NCAwIDAgMCA2NC02NFYxMjhBNjQgNjQgMCAwIDAgODk2IDY0eiIgZmlsbD0iI0QyRDVERiIgcC1pZD0iNjg2NyI+PC9wYXRoPjwvc3ZnPg==);
76
+ }
72
77
  }
73
-
74
- > .el-icon {
75
- position: absolute;
76
- left: 50%;
77
- top: 50%;
78
- margin-left: -5px;
79
- margin-top: -5px;
78
+ .el-icon {
79
+ &:before {
80
+ content: '';
81
+ width: 16px;
82
+ height: 16px;
83
+ position: absolute;
84
+ left: 50%;
85
+ top: 50%;
86
+ margin-left: -8px;
87
+ margin-top: -8px;
88
+ background-size: contain;
89
+ background-position: 0 0;
90
+ background-repeat: no-repeat;
91
+ }
80
92
  }
81
93
  }
82
94
 
83
95
  @include e(expanded-cell) {
84
96
  background-color: $--color-white;
85
97
 
86
- // 纯属为了增加权重
87
- &[class*=cell] {
88
- padding: 20px 50px;
89
- }
98
+ padding: 0 !important;
90
99
 
91
100
  &:hover {
92
101
  background-color: transparent !important;
@@ -95,7 +104,7 @@
95
104
 
96
105
  @include e(placeholder) {
97
106
  display: inline-block;
98
- width: 20px;
107
+ width: 14px;
99
108
  }
100
109
 
101
110
  @include e(append-wrapper) {
@@ -647,11 +656,16 @@
647
656
  [class*=el-table__row--level] {
648
657
  .el-table__expand-icon {
649
658
  display: inline-block;
650
- width: 20px;
651
- line-height: 20px;
652
- height: 20px;
659
+ width: 14px;
660
+ height: 14px;
653
661
  text-align: center;
654
- margin-right: 3px;
662
+ margin-right: 8px;
663
+ margin-top: -2px;
664
+ vertical-align: middle;
665
+ .iov-icon-loading:before {
666
+ width: 14px;
667
+ height: 14px;
668
+ }
655
669
  }
656
670
  }
657
671
  }
package/packages/theme-chalk/src/tooltip.scss CHANGED
@@ -8,12 +8,14 @@
8
8
  @include e(popper) {
9
9
  position: absolute;
10
10
  border-radius: 4px;
11
- padding: $--tooltip-padding;
12
- z-index: $--index-popper;
13
- font-size: $--tooltip-font-size;
14
- line-height: 1.2;
11
+ padding: 9px 12px;
12
+ z-index: 2000;
13
+ font-size: 13px;
14
+ font-weight: 500;
15
+ line-height: 18px;
15
16
  min-width: 10px;
16
17
  word-wrap: break-word;
18
+ box-shadow: 0px 2px 8px 0px rgba(73,75,83,0.12);
17
19
 
18
20
  .popper__arrow,
19
21
  .popper__arrow::after {
@@ -26,7 +28,7 @@
26
28
  }
27
29
 
28
30
  .popper__arrow {
29
- border-width: $--tooltip-arrow-size;
31
+ border-width: 6px;
30
32
  }
31
33
 
32
34
  .popper__arrow::after {
@@ -35,105 +37,105 @@
35
37
  }
36
38
 
37
39
  &[x-placement^="top"] {
38
- margin-bottom: #{$--tooltip-arrow-size + 6px};
40
+ margin-bottom: 12px;
39
41
  }
40
42
 
41
43
  &[x-placement^="top"] .popper__arrow {
42
- bottom: -$--tooltip-arrow-size;
43
- border-top-color: $--tooltip-border-color;
44
+ bottom: -6px;
45
+ border-top-color: $--color-fill-8;
44
46
  border-bottom-width: 0;
45
47
 
46
48
  &::after {
47
49
  bottom: 1px;
48
50
  margin-left: -5px;
49
- border-top-color: $--tooltip-fill;
51
+ border-top-color: $--color-fill-8;
50
52
  border-bottom-width: 0;
51
53
  }
52
54
  }
53
55
 
54
56
  &[x-placement^="bottom"] {
55
- margin-top: #{$--tooltip-arrow-size + 6px};
57
+ margin-top: 12px;
56
58
  }
57
59
 
58
60
  &[x-placement^="bottom"] .popper__arrow {
59
- top: -$--tooltip-arrow-size;
61
+ top: -6px;
60
62
  border-top-width: 0;
61
- border-bottom-color: $--tooltip-border-color;
63
+ border-bottom-color: $--color-fill-8;
62
64
 
63
65
  &::after {
64
66
  top: 1px;
65
67
  margin-left: -5px;
66
68
  border-top-width: 0;
67
- border-bottom-color: $--tooltip-fill;
69
+ border-bottom-color: $--color-fill-8;
68
70
  }
69
71
  }
70
72
 
71
73
  &[x-placement^="right"] {
72
- margin-left: #{$--tooltip-arrow-size + 6px};
74
+ margin-left: 12px;
73
75
  }
74
76
 
75
77
  &[x-placement^="right"] .popper__arrow {
76
- left: -$--tooltip-arrow-size;
77
- border-right-color: $--tooltip-border-color;
78
+ left: -6px;
79
+ border-right-color: $--color-fill-8;
78
80
  border-left-width: 0;
79
81
 
80
82
  &::after {
81
83
  bottom: -5px;
82
84
  left: 1px;
83
- border-right-color: $--tooltip-fill;
85
+ border-right-color: $--color-fill-8;
84
86
  border-left-width: 0;
85
87
  }
86
88
  }
87
89
 
88
90
  &[x-placement^="left"] {
89
- margin-right: #{$--tooltip-arrow-size + 6px};
91
+ margin-right: 12px;
90
92
  }
91
93
 
92
94
  &[x-placement^="left"] .popper__arrow {
93
- right: -$--tooltip-arrow-size;
95
+ right: -6px;
94
96
  border-right-width: 0;
95
- border-left-color: $--tooltip-border-color;
97
+ border-left-color: $--color-fill-8;
96
98
 
97
99
  &::after {
98
100
  right: 1px;
99
101
  bottom: -5px;
100
102
  margin-left: -5px;
101
103
  border-right-width: 0;
102
- border-left-color: $--tooltip-fill;
104
+ border-left-color: $--color-fill-8;
103
105
  }
104
106
  }
105
107
 
106
108
  @include when(dark) {
107
- background: $--tooltip-fill;
108
- color: $--tooltip-color;
109
+ background: $--color-fill-8;
110
+ color: #fff;
109
111
  }
110
112
 
111
113
  @include when(light) {
112
- background: $--tooltip-color;
113
- border: 1px solid $--tooltip-fill;
114
+ background: #fff;
115
+ border: 0.5px solid $--color-line-2;
114
116
 
115
117
  &[x-placement^="top"] .popper__arrow {
116
- border-top-color: $--tooltip-fill;
118
+ border-top-color: $--color-line-2;
117
119
  &::after {
118
- border-top-color: $--tooltip-color;
120
+ border-top-color: #fff;
119
121
  }
120
122
  }
121
123
  &[x-placement^="bottom"] .popper__arrow {
122
- border-bottom-color: $--tooltip-fill;
124
+ border-bottom-color: $--color-line-2;
123
125
  &::after {
124
- border-bottom-color: $--tooltip-color;
126
+ border-bottom-color: #fff;
125
127
  }
126
128
  }
127
129
  &[x-placement^="left"] .popper__arrow {
128
- border-left-color: $--tooltip-fill;
130
+ border-left-color: $--color-line-2;
129
131
  &::after {
130
- border-left-color: $--tooltip-color;
132
+ border-left-color: #fff;
131
133
  }
132
134
  }
133
135
  &[x-placement^="right"] .popper__arrow {
134
- border-right-color: $--tooltip-fill;
136
+ border-right-color: $--color-line-2;
135
137
  &::after {
136
- border-right-color: $--tooltip-color;
138
+ border-right-color: #fff;
137
139
  }
138
140
  }
139
141
  }
package/src/index.js CHANGED
@@ -212,7 +212,7 @@ if (typeof window !== 'undefined' && window.Vue) {
212
212
  }
213
213
 
214
214
  export default {
215
- version: '2.15.58',
215
+ version: '2.15.59',
216
216
  locale: locale.use,
217
217
  i18n: locale.i18n,
218
218
  install,