iov-design 2.15.23 → 2.15.24
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/cascader-panel.js +2 -2
- package/lib/cascader.js +25 -9
- package/lib/index.js +1 -1
- package/lib/iov-design.common.js +29 -13
- package/lib/tag.js +1 -1
- package/lib/theme-chalk/cascader-panel.css +1 -1
- package/lib/theme-chalk/cascader.css +1 -1
- package/lib/theme-chalk/index.css +1 -1
- package/lib/theme-chalk/pagination.css +1 -1
- package/lib/theme-chalk/select.css +1 -1
- package/lib/theme-chalk/table-column.css +1 -1
- package/lib/theme-chalk/table.css +1 -1
- package/lib/theme-chalk/tag.css +1 -1
- package/package.json +1 -1
- package/packages/cascader/src/cascader.vue +11 -4
- package/packages/cascader-panel/src/cascader-node.vue +2 -2
- package/packages/tag/src/tag.vue +1 -1
- package/packages/theme-chalk/src/cascader-panel.scss +31 -18
- package/packages/theme-chalk/src/cascader.scss +30 -20
- package/packages/theme-chalk/src/common/var.scss +8 -11
- package/packages/theme-chalk/src/tag.scss +4 -4
- package/src/index.js +1 -1
|
@@ -24,18 +24,25 @@
|
|
|
24
24
|
@focus="handleFocus"
|
|
25
25
|
@blur="handleBlur"
|
|
26
26
|
@input="handleInput">
|
|
27
|
+
<template slot="prefixLabel" v-if="$slots.prefixLabel">
|
|
28
|
+
<slot name="prefixLabel"></slot>
|
|
29
|
+
</template>
|
|
30
|
+
<template slot="prefix" v-if="$slots.prefix">
|
|
31
|
+
<slot name="prefix"></slot>
|
|
32
|
+
</template>
|
|
27
33
|
<template slot="suffix">
|
|
28
34
|
<i
|
|
29
35
|
v-if="clearBtnVisible"
|
|
36
|
+
style="padding-right: 0;"
|
|
30
37
|
key="clear"
|
|
31
|
-
class="el-input__icon
|
|
38
|
+
class="el-input__icon iov-icon-close-mini el-input__clear"
|
|
32
39
|
@click.stop="handleClear"></i>
|
|
33
40
|
<i
|
|
34
41
|
v-else
|
|
35
42
|
key="arrow-down"
|
|
36
43
|
:class="[
|
|
37
44
|
'el-input__icon',
|
|
38
|
-
'
|
|
45
|
+
'iov-icon-arrow-up',
|
|
39
46
|
dropDownVisible && 'is-reverse'
|
|
40
47
|
]"
|
|
41
48
|
@click.stop="toggleDropDownVisible()"></i>
|
|
@@ -50,6 +57,7 @@
|
|
|
50
57
|
:size="tagSize"
|
|
51
58
|
:hit="tag.hitState"
|
|
52
59
|
:closable="tag.closable"
|
|
60
|
+
:class="{'is-disabled': !tag.closable && tag.key !== -1}"
|
|
53
61
|
disable-transitions
|
|
54
62
|
@close="deleteTag(tag)">
|
|
55
63
|
<span>{{ tag.text }}</span>
|
|
@@ -99,7 +107,6 @@
|
|
|
99
107
|
:tabindex="-1"
|
|
100
108
|
@click="handleSuggestionClick(index)">
|
|
101
109
|
<span>{{ item.text }}</span>
|
|
102
|
-
<i v-if="item.checked" class="el-icon-check"></i>
|
|
103
110
|
</li>
|
|
104
111
|
</template>
|
|
105
112
|
<slot v-else name="empty">
|
|
@@ -528,7 +535,7 @@ export default {
|
|
|
528
535
|
if (collapseTags) {
|
|
529
536
|
tags.push({
|
|
530
537
|
key: -1,
|
|
531
|
-
text:
|
|
538
|
+
text: `+${restCount}`,
|
|
532
539
|
closable: false
|
|
533
540
|
});
|
|
534
541
|
} else {
|
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
|
|
163
163
|
renderCheckIcon(h) {
|
|
164
164
|
return (
|
|
165
|
-
<i class="el-
|
|
165
|
+
<i class="el-cascader-node__prefix"></i>
|
|
166
166
|
);
|
|
167
167
|
},
|
|
168
168
|
|
|
@@ -174,7 +174,7 @@
|
|
|
174
174
|
|
|
175
175
|
renderExpandIcon(h) {
|
|
176
176
|
return (
|
|
177
|
-
<i class="
|
|
177
|
+
<i class="iov-icon-right el-cascader-node__postfix"></i>
|
|
178
178
|
);
|
|
179
179
|
},
|
|
180
180
|
|
package/packages/tag/src/tag.vue
CHANGED
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
{ this.icon && <i class={`${this.icon} el-tag-icon`}></i> }
|
|
53
53
|
<span class="el-tag__text">{ this.$slots.default }</span>
|
|
54
54
|
{
|
|
55
|
-
this.closable && <i class="el-tag__close
|
|
55
|
+
this.closable && <i class="el-tag__close iov-icon-close" on-click={ this.handleClose }></i>
|
|
56
56
|
}
|
|
57
57
|
</span>
|
|
58
58
|
</span>
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
position: relative;
|
|
37
37
|
min-height: 100%;
|
|
38
38
|
margin: 0;
|
|
39
|
-
padding:
|
|
39
|
+
padding: 4px;
|
|
40
40
|
list-style: none;
|
|
41
41
|
box-sizing: border-box;
|
|
42
42
|
}
|
|
@@ -64,10 +64,16 @@
|
|
|
64
64
|
position: relative;
|
|
65
65
|
display: flex;
|
|
66
66
|
align-items: center;
|
|
67
|
-
padding: 0
|
|
68
|
-
height:
|
|
69
|
-
line-height:
|
|
67
|
+
padding: 0 12px;
|
|
68
|
+
height: 32px;
|
|
69
|
+
line-height: 32px;
|
|
70
70
|
outline: none;
|
|
71
|
+
border-radius: 2px;
|
|
72
|
+
transition: all .2s ease;
|
|
73
|
+
cursor: pointer;
|
|
74
|
+
&:hover, &:focus {
|
|
75
|
+
background: $--cascader-node-background-hover;
|
|
76
|
+
}
|
|
71
77
|
|
|
72
78
|
&.is-selectable.in-active-path {
|
|
73
79
|
color: $--cascader-menu-font-color;
|
|
@@ -77,44 +83,51 @@
|
|
|
77
83
|
&.is-selectable.in-checked-path,
|
|
78
84
|
&.is-active {
|
|
79
85
|
color: $--cascader-menu-selected-font-color;
|
|
80
|
-
font-weight:
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
cursor: pointer;
|
|
85
|
-
&:hover, &:focus {
|
|
86
|
-
background: $--cascader-node-background-hover;
|
|
86
|
+
font-weight: 500;
|
|
87
|
+
background: $--color-primary-1;
|
|
88
|
+
&:hover {
|
|
89
|
+
background: $--color-primary-1;
|
|
87
90
|
}
|
|
88
91
|
}
|
|
89
92
|
|
|
90
93
|
@include when(disabled) {
|
|
91
94
|
color: $--cascader-node-color-disabled;
|
|
92
95
|
cursor: not-allowed;
|
|
96
|
+
background: #fff;
|
|
97
|
+
&:hover {
|
|
98
|
+
background: #fff;
|
|
99
|
+
}
|
|
93
100
|
}
|
|
94
101
|
|
|
95
102
|
@include e(prefix) {
|
|
96
103
|
position: absolute;
|
|
97
|
-
left:
|
|
104
|
+
left: 8px;
|
|
98
105
|
}
|
|
99
106
|
|
|
100
107
|
@include e(postfix) {
|
|
101
108
|
position: absolute;
|
|
102
|
-
right:
|
|
109
|
+
right: 8px;
|
|
110
|
+
font-size: 14px;
|
|
103
111
|
}
|
|
104
112
|
|
|
105
113
|
@include e(label) {
|
|
106
114
|
flex: 1;
|
|
107
|
-
padding: 0
|
|
115
|
+
padding: 0;
|
|
108
116
|
white-space: nowrap;
|
|
109
117
|
overflow: hidden;
|
|
110
118
|
text-overflow: ellipsis;
|
|
111
119
|
}
|
|
112
120
|
|
|
121
|
+
> .el-checkbox {
|
|
122
|
+
margin-right: 8px;
|
|
123
|
+
.el-checkbox__input {
|
|
124
|
+
margin-right: 0;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
113
127
|
> .el-radio {
|
|
114
|
-
margin-right:
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
padding-left: 0;
|
|
128
|
+
margin-right: 8px;
|
|
129
|
+
.el-radio__input {
|
|
130
|
+
margin-right: 0;
|
|
118
131
|
}
|
|
119
132
|
}
|
|
120
133
|
}
|
|
@@ -6,9 +6,9 @@
|
|
|
6
6
|
@import "./cascader-panel";
|
|
7
7
|
|
|
8
8
|
@include b(cascader) {
|
|
9
|
-
display:
|
|
9
|
+
display: block;
|
|
10
10
|
position: relative;
|
|
11
|
-
font-size: $--font-size
|
|
11
|
+
font-size: $--input-font-size;
|
|
12
12
|
line-height: $--input-height;
|
|
13
13
|
|
|
14
14
|
&:not(.is-disabled):hover {
|
|
@@ -21,6 +21,9 @@
|
|
|
21
21
|
.el-input {
|
|
22
22
|
cursor: pointer;
|
|
23
23
|
|
|
24
|
+
.el-input__suffix {
|
|
25
|
+
right: 8px;
|
|
26
|
+
}
|
|
24
27
|
.el-input__inner {
|
|
25
28
|
text-overflow: ellipsis;
|
|
26
29
|
|
|
@@ -29,12 +32,15 @@
|
|
|
29
32
|
}
|
|
30
33
|
}
|
|
31
34
|
|
|
32
|
-
.
|
|
35
|
+
.iov-icon-arrow-up {
|
|
36
|
+
padding-right: 0;
|
|
37
|
+
color: $--select-input-color;
|
|
38
|
+
font-size: $--select-icon-size;
|
|
33
39
|
transition: transform .3s;
|
|
34
|
-
|
|
40
|
+
transform: rotateZ(180deg);
|
|
35
41
|
|
|
36
42
|
@include when(reverse) {
|
|
37
|
-
transform: rotateZ(
|
|
43
|
+
transform: rotateZ(0deg);
|
|
38
44
|
}
|
|
39
45
|
}
|
|
40
46
|
|
|
@@ -72,12 +78,15 @@
|
|
|
72
78
|
}
|
|
73
79
|
|
|
74
80
|
@include e(dropdown) {
|
|
75
|
-
margin:
|
|
81
|
+
margin: 4px 0;
|
|
76
82
|
font-size: $--cascader-menu-font-size;
|
|
77
83
|
background: $--cascader-menu-fill;
|
|
78
84
|
border: $--cascader-menu-border;
|
|
79
85
|
border-radius: $--cascader-menu-radius;
|
|
80
86
|
box-shadow: $--cascader-menu-shadow;
|
|
87
|
+
.popper__arrow {
|
|
88
|
+
display: none;
|
|
89
|
+
}
|
|
81
90
|
}
|
|
82
91
|
|
|
83
92
|
@include e(tags) {
|
|
@@ -98,7 +107,12 @@
|
|
|
98
107
|
max-width: 100%;
|
|
99
108
|
margin: 2px 0 2px 6px;
|
|
100
109
|
text-overflow: ellipsis;
|
|
101
|
-
|
|
110
|
+
color: $--color-text-6;
|
|
111
|
+
|
|
112
|
+
&.is-disabled {
|
|
113
|
+
color: $--color-text-3;
|
|
114
|
+
background: $--color-fill-3;
|
|
115
|
+
}
|
|
102
116
|
|
|
103
117
|
&:not(.is-hit) {
|
|
104
118
|
border-color: transparent;
|
|
@@ -110,14 +124,8 @@
|
|
|
110
124
|
text-overflow: ellipsis;
|
|
111
125
|
}
|
|
112
126
|
|
|
113
|
-
.
|
|
127
|
+
.iov-icon-close {
|
|
114
128
|
flex: none;
|
|
115
|
-
background-color: $--color-text-placeholder;
|
|
116
|
-
color: $--color-white;
|
|
117
|
-
|
|
118
|
-
&:hover {
|
|
119
|
-
background-color: $--color-text-secondary;
|
|
120
|
-
}
|
|
121
129
|
}
|
|
122
130
|
}
|
|
123
131
|
}
|
|
@@ -129,7 +137,7 @@
|
|
|
129
137
|
@include e(suggestion-list) {
|
|
130
138
|
max-height: 204px;
|
|
131
139
|
margin: 0;
|
|
132
|
-
padding:
|
|
140
|
+
padding: 4px;
|
|
133
141
|
font-size: $--font-size-base;
|
|
134
142
|
color: $--cascader-menu-font-color;
|
|
135
143
|
text-align: center;
|
|
@@ -139,11 +147,12 @@
|
|
|
139
147
|
display: flex;
|
|
140
148
|
justify-content: space-between;
|
|
141
149
|
align-items: center;
|
|
142
|
-
height:
|
|
143
|
-
padding: 0
|
|
150
|
+
height: 32px;
|
|
151
|
+
padding: 0 12px;
|
|
144
152
|
text-align: left;
|
|
145
153
|
outline: none;
|
|
146
154
|
cursor: pointer;
|
|
155
|
+
border-radius: 2px;
|
|
147
156
|
|
|
148
157
|
&:hover, &:focus {
|
|
149
158
|
background: $--cascader-node-background-hover;
|
|
@@ -151,7 +160,8 @@
|
|
|
151
160
|
|
|
152
161
|
&.is-checked {
|
|
153
162
|
color: $--cascader-menu-selected-font-color;
|
|
154
|
-
font-weight:
|
|
163
|
+
font-weight: 500;
|
|
164
|
+
background: $--color-primary-1;
|
|
155
165
|
}
|
|
156
166
|
|
|
157
167
|
> span {
|
|
@@ -160,7 +170,7 @@
|
|
|
160
170
|
}
|
|
161
171
|
|
|
162
172
|
@include e(empty-text) {
|
|
163
|
-
margin:
|
|
173
|
+
margin: 8px 0;
|
|
164
174
|
color: $--cascader-color-empty;
|
|
165
175
|
}
|
|
166
176
|
|
|
@@ -168,7 +178,7 @@
|
|
|
168
178
|
flex: 1;
|
|
169
179
|
height: 24px;
|
|
170
180
|
min-width: 60px;
|
|
171
|
-
margin: 2px 0 2px
|
|
181
|
+
margin: 2px 0 2px 12px;
|
|
172
182
|
padding: 0;
|
|
173
183
|
color: $--cascader-menu-font-color;
|
|
174
184
|
border: none;
|
|
@@ -413,19 +413,16 @@ $--input-mini-height: 26px !default;
|
|
|
413
413
|
|
|
414
414
|
/* Cascader
|
|
415
415
|
-------------------------- */
|
|
416
|
-
|
|
417
|
-
$--cascader-menu-font-color: $--color-text-
|
|
418
|
-
/// color||Color|0
|
|
419
|
-
$--cascader-menu-selected-font-color: $--color-primary !default;
|
|
416
|
+
$--cascader-menu-font-color: $--color-text-6 !default;
|
|
417
|
+
$--cascader-menu-selected-font-color: $--color-text-6 !default;
|
|
420
418
|
$--cascader-menu-fill: $--fill-base !default;
|
|
421
|
-
$--cascader-menu-font-size: $--font-size-
|
|
419
|
+
$--cascader-menu-font-size: $--font-size-small !default;
|
|
422
420
|
$--cascader-menu-radius: $--border-radius-base !default;
|
|
423
|
-
$--cascader-menu-border: solid 1px $--
|
|
424
|
-
$--cascader-menu-shadow:
|
|
425
|
-
$--cascader-node-background-hover: $--
|
|
426
|
-
$--cascader-node-color-disabled
|
|
427
|
-
$--cascader-color-empty
|
|
428
|
-
$--cascader-tag-background: #f0f2f5;
|
|
421
|
+
$--cascader-menu-border: solid 1px $--color-line-2 !default;
|
|
422
|
+
$--cascader-menu-shadow: 0px 2px 8px 0px rgba(73, 75, 83, 0.12) !default;
|
|
423
|
+
$--cascader-node-background-hover: $--color-fill-1 !default;
|
|
424
|
+
$--cascader-node-color-disabled: $--color-text-2 !default;
|
|
425
|
+
$--cascader-color-empty: $--color-text-placeholder !default;
|
|
429
426
|
|
|
430
427
|
/* Group
|
|
431
428
|
-------------------------- */
|
|
@@ -247,7 +247,7 @@
|
|
|
247
247
|
font-size: 16px;
|
|
248
248
|
}
|
|
249
249
|
|
|
250
|
-
.
|
|
250
|
+
.iov-icon-close {
|
|
251
251
|
margin-left: 4px;
|
|
252
252
|
border-radius: 50%;
|
|
253
253
|
text-align: center;
|
|
@@ -293,7 +293,7 @@
|
|
|
293
293
|
.el-tag-icon {
|
|
294
294
|
font-size: 16px;
|
|
295
295
|
}
|
|
296
|
-
.
|
|
296
|
+
.iov-icon-close {
|
|
297
297
|
font-size: 12px;
|
|
298
298
|
}
|
|
299
299
|
}
|
|
@@ -308,7 +308,7 @@
|
|
|
308
308
|
font-size: 12px;
|
|
309
309
|
}
|
|
310
310
|
|
|
311
|
-
.
|
|
311
|
+
.iov-icon-close {
|
|
312
312
|
font-size: 10px;
|
|
313
313
|
}
|
|
314
314
|
}
|
|
@@ -323,7 +323,7 @@
|
|
|
323
323
|
font-size: 12px;
|
|
324
324
|
}
|
|
325
325
|
|
|
326
|
-
.
|
|
326
|
+
.iov-icon-close {
|
|
327
327
|
font-size: 10px;
|
|
328
328
|
}
|
|
329
329
|
}
|