iov-design 2.15.16 → 2.15.17
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 +1 -1
- package/lib/input.js +155 -138
- package/lib/iov-design.common.js +156 -139
- package/lib/theme-chalk/autocomplete.css +1 -1
- package/lib/theme-chalk/cascader.css +1 -1
- package/lib/theme-chalk/date-picker.css +1 -1
- package/lib/theme-chalk/form.css +1 -1
- package/lib/theme-chalk/index.css +1 -1
- package/lib/theme-chalk/input-number.css +1 -1
- package/lib/theme-chalk/input.css +1 -1
- package/lib/theme-chalk/message-box.css +1 -1
- package/lib/theme-chalk/pagination.css +1 -1
- package/lib/theme-chalk/select.css +1 -1
- package/lib/theme-chalk/slider.css +1 -1
- package/lib/theme-chalk/time-picker.css +1 -1
- package/lib/theme-chalk/transfer.css +1 -1
- package/package.json +1 -1
- package/packages/input/src/input.vue +57 -53
- package/packages/theme-chalk/src/form.scss +14 -13
- package/packages/theme-chalk/src/input.scss +49 -18
- package/src/index.js +1 -1
|
@@ -8,8 +8,6 @@
|
|
|
8
8
|
'el-input-group': $slots.prepend || $slots.append || $slots.prefixLabel || $slots.suffixLabel,
|
|
9
9
|
'el-input-group--append': $slots.append,
|
|
10
10
|
'el-input-group--prepend': $slots.prepend,
|
|
11
|
-
'el-input-group--prefix-label': $slots.prefixLabel,
|
|
12
|
-
'el-input-group--suffix-label': $slots.suffixLabel,
|
|
13
11
|
'is-focus': ($slots.suffixLabel || $slots.prefixLabel) && focused,
|
|
14
12
|
'el-input--prefix': $slots.prefix || prefixIcon,
|
|
15
13
|
'el-input--suffix': $slots.suffix || suffixIcon || clearable || showPassword
|
|
@@ -23,55 +21,61 @@
|
|
|
23
21
|
<div class="el-input-group__prepend" v-if="$slots.prepend">
|
|
24
22
|
<slot name="prepend"></slot>
|
|
25
23
|
</div>
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
v-if="
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
<i
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
24
|
+
<div class="el-input-group__inner" :class="{
|
|
25
|
+
'el-input-group--prefix': $slots.prefixLabel,
|
|
26
|
+
'el-input-group--suffix': $slots.suffixLabel,
|
|
27
|
+
'is-focus': ($slots.suffixLabel || $slots.prefixLabel) && focused
|
|
28
|
+
}">
|
|
29
|
+
<!-- 前置标签 -->
|
|
30
|
+
<div class="el-input-group__prefix-label" v-if="$slots.prefixLabel">
|
|
31
|
+
<slot name="prefixLabel"></slot>
|
|
32
|
+
</div>
|
|
33
|
+
<input
|
|
34
|
+
:tabindex="tabindex"
|
|
35
|
+
v-if="type !== 'textarea'"
|
|
36
|
+
class="el-input__inner"
|
|
37
|
+
v-bind="$attrs"
|
|
38
|
+
:type="showPassword ? (passwordVisible ? 'text': 'password') : type"
|
|
39
|
+
:disabled="inputDisabled"
|
|
40
|
+
:readonly="readonly"
|
|
41
|
+
:autocomplete="autoComplete || autocomplete"
|
|
42
|
+
ref="input"
|
|
43
|
+
@compositionstart="handleCompositionStart"
|
|
44
|
+
@compositionupdate="handleCompositionUpdate"
|
|
45
|
+
@compositionend="handleCompositionEnd"
|
|
46
|
+
@input="handleInput"
|
|
47
|
+
@focus="handleFocus"
|
|
48
|
+
@blur="handleBlur"
|
|
49
|
+
@change="handleChange"
|
|
50
|
+
:aria-label="label"
|
|
51
|
+
>
|
|
52
|
+
<!-- 前置内容 -->
|
|
53
|
+
<span class="el-input__prefix" v-if="$slots.prefix || prefixIcon">
|
|
54
|
+
<slot name="prefix"></slot>
|
|
55
|
+
<i class="el-input__icon" v-if="prefixIcon" :class="prefixIcon"></i>
|
|
56
|
+
</span>
|
|
57
|
+
<!-- 后置内容 -->
|
|
58
|
+
<span class="el-input__suffix" v-if="getSuffixVisible()">
|
|
59
|
+
<span class="el-input__suffix-inner">
|
|
60
|
+
<i v-if="showClear" class="el-input__icon iov-icon-close-mini el-input__clear" @mousedown.prevent @click="clear"></i>
|
|
61
|
+
<!-- 后置标签 -->
|
|
62
|
+
<span class="el-input-group__suffix-label" v-if="$slots.suffixLabel">
|
|
63
|
+
<slot name="suffixLabel"></slot>
|
|
64
|
+
</span>
|
|
65
|
+
<template v-if="!showClear || !showPwdVisible || !isWordLimitVisible">
|
|
66
|
+
<slot name="suffix"></slot>
|
|
67
|
+
<i class="el-input__icon" v-if="suffixIcon" :class="suffixIcon"></i>
|
|
68
|
+
</template>
|
|
69
|
+
<i v-if="showPwdVisible" class="el-input__icon" :class="passwordVisible ? 'iov-icon-eye' : 'iov-icon-eye-close'" @click="handlePasswordVisible"></i>
|
|
70
|
+
<span v-if="isWordLimitVisible" class="el-input__count">
|
|
71
|
+
<span class="el-input__count-inner">
|
|
72
|
+
{{ textLength }}/{{ upperLimit }}
|
|
73
|
+
</span>
|
|
70
74
|
</span>
|
|
71
75
|
</span>
|
|
76
|
+
<i class="el-input__icon" v-if="validateState" :class="['el-input__validateIcon', validateIcon]"></i>
|
|
72
77
|
</span>
|
|
73
|
-
|
|
74
|
-
</span>
|
|
78
|
+
</div>
|
|
75
79
|
<!-- 后置元素 -->
|
|
76
80
|
<div class="el-input-group__append" v-if="$slots.append">
|
|
77
81
|
<slot name="append"></slot>
|
|
@@ -377,10 +381,10 @@
|
|
|
377
381
|
const isSelect = pendantEl.querySelector('.el-select');
|
|
378
382
|
const isButton = pendantEl.querySelector('.el-button');
|
|
379
383
|
if (isSelect) {
|
|
380
|
-
addClass(pendantEl, '
|
|
384
|
+
addClass(pendantEl, 'is-select');
|
|
381
385
|
}
|
|
382
386
|
if (isButton) {
|
|
383
|
-
addClass(pendantEl, '
|
|
387
|
+
addClass(pendantEl, 'is-button');
|
|
384
388
|
}
|
|
385
389
|
},
|
|
386
390
|
calcIconOffset(place) {
|
|
@@ -388,7 +392,7 @@
|
|
|
388
392
|
if (!elList.length) return;
|
|
389
393
|
let el = null;
|
|
390
394
|
for (let i = 0; i < elList.length; i++) {
|
|
391
|
-
if (elList[i].parentNode === this.$el) {
|
|
395
|
+
if (elList[i].parentNode.parentNode === this.$el) {
|
|
392
396
|
el = elList[i];
|
|
393
397
|
break;
|
|
394
398
|
}
|
|
@@ -410,9 +414,9 @@
|
|
|
410
414
|
const embedEl = this.$el.querySelector(`.el-input-group__${place}-label`);
|
|
411
415
|
|
|
412
416
|
if (this.$slots[pendant] && this.$slots[embed]) {
|
|
413
|
-
el.style.transform = place === 'prefix' ? `translateX(${pendantEl.offsetWidth + embedEl.offsetWidth}px)` :
|
|
417
|
+
el.style.transform = place === 'prefix' ? `translateX(${pendantEl.offsetWidth + embedEl.offsetWidth}px)` : '';
|
|
414
418
|
} else if (this.$slots[pendant]) {
|
|
415
|
-
el.style.transform = place === 'prefix' ? `translateX(${pendantEl.offsetWidth}px)` :
|
|
419
|
+
el.style.transform = place === 'prefix' ? `translateX(${pendantEl.offsetWidth}px)` : '';
|
|
416
420
|
} else if (this.$slots[embed]) {
|
|
417
421
|
el.style.transform = place === 'prefix' ? `translateX(${embedEl.offsetWidth}px)` : '';
|
|
418
422
|
} else {
|
|
@@ -144,19 +144,20 @@
|
|
|
144
144
|
}
|
|
145
145
|
|
|
146
146
|
@include when(error) {
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
border-color: $--color-danger-6;
|
|
151
|
-
}
|
|
152
|
-
&.is-focus {
|
|
147
|
+
.el-input-group__inner {
|
|
148
|
+
&.el-input-group--prefix,
|
|
149
|
+
&.el-input-group--suffix {
|
|
153
150
|
border-color: $--color-danger-6;
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
151
|
+
z-index: 3;
|
|
152
|
+
&.is-focus {
|
|
153
|
+
border-color: $--color-danger-6;
|
|
154
|
+
box-shadow: 0 0 0 2px rgba(245,63,63,0.1);
|
|
155
|
+
}
|
|
156
|
+
.el-input__inner,
|
|
157
|
+
.el-input__inner:focus {
|
|
158
|
+
border-color: transparent;
|
|
159
|
+
box-shadow: none;
|
|
160
|
+
}
|
|
160
161
|
}
|
|
161
162
|
}
|
|
162
163
|
& .el-input__inner,
|
|
@@ -173,7 +174,7 @@
|
|
|
173
174
|
& .el-input-group__prepend {
|
|
174
175
|
& .el-input__inner,
|
|
175
176
|
& .el-input__inner:focus {
|
|
176
|
-
border-color:
|
|
177
|
+
border-color: $--color-line-2;
|
|
177
178
|
box-shadow: none;
|
|
178
179
|
}
|
|
179
180
|
}
|
|
@@ -293,8 +293,8 @@
|
|
|
293
293
|
line-height: $--input-medium-height - 2px;
|
|
294
294
|
}
|
|
295
295
|
|
|
296
|
-
|
|
297
|
-
|
|
296
|
+
.el-input-group--prefix,
|
|
297
|
+
.el-input-group--suffix {
|
|
298
298
|
height: $--input-medium-height;
|
|
299
299
|
.el-input__inner {
|
|
300
300
|
height: $--input-medium-height - 2px;
|
|
@@ -327,8 +327,8 @@
|
|
|
327
327
|
line-height: $--input-small-height - 2px;
|
|
328
328
|
}
|
|
329
329
|
|
|
330
|
-
|
|
331
|
-
|
|
330
|
+
.el-input-group--prefix,
|
|
331
|
+
.el-input-group--suffix {
|
|
332
332
|
height: $--input-small-height;
|
|
333
333
|
.el-input__inner {
|
|
334
334
|
height: $--input-small-height - 2px;
|
|
@@ -361,8 +361,8 @@
|
|
|
361
361
|
line-height: $--input-mini-height - 2px;
|
|
362
362
|
}
|
|
363
363
|
|
|
364
|
-
|
|
365
|
-
|
|
364
|
+
.el-input-group--prefix,
|
|
365
|
+
.el-input-group--suffix {
|
|
366
366
|
height: $--input-mini-height;
|
|
367
367
|
.el-input__inner {
|
|
368
368
|
height: $--input-mini-height - 2px;
|
|
@@ -384,28 +384,32 @@
|
|
|
384
384
|
display: block;
|
|
385
385
|
// border-radius: 0;
|
|
386
386
|
}
|
|
387
|
-
.el-
|
|
388
|
-
|
|
387
|
+
.el-input-group__inner {
|
|
388
|
+
flex: 1;
|
|
389
|
+
display: flex;
|
|
390
|
+
position: relative;
|
|
389
391
|
&:hover {
|
|
390
|
-
z-index:
|
|
392
|
+
z-index: 2;
|
|
391
393
|
}
|
|
392
|
-
|
|
394
|
+
.el-input__inner:focus {
|
|
393
395
|
z-index: 2;
|
|
394
396
|
}
|
|
395
397
|
}
|
|
396
398
|
@include m(append) {
|
|
397
|
-
.el-input__inner
|
|
399
|
+
.el-input__inner,
|
|
400
|
+
.el-input-group__inner {
|
|
398
401
|
border-top-right-radius: 0;
|
|
399
402
|
border-bottom-right-radius: 0;
|
|
400
403
|
}
|
|
401
404
|
}
|
|
402
405
|
@include m(prepend) {
|
|
403
|
-
.el-input__inner
|
|
406
|
+
.el-input__inner,
|
|
407
|
+
.el-input-group__inner {
|
|
404
408
|
border-top-left-radius: 0;
|
|
405
409
|
border-bottom-left-radius: 0;
|
|
406
410
|
}
|
|
407
411
|
}
|
|
408
|
-
@include m((prefix
|
|
412
|
+
@include m((prefix, suffix)) {
|
|
409
413
|
color: $--input-font-color;
|
|
410
414
|
background-color: $--input-background-color;
|
|
411
415
|
background-image: none;
|
|
@@ -426,6 +430,7 @@
|
|
|
426
430
|
outline: none;
|
|
427
431
|
border-color: $--input-focus-border;
|
|
428
432
|
box-shadow: $--input-box-shadow;
|
|
433
|
+
z-index: 2;
|
|
429
434
|
}
|
|
430
435
|
&.is-disabled {
|
|
431
436
|
background-color: $--input-disabled-fill;
|
|
@@ -464,11 +469,26 @@
|
|
|
464
469
|
&:focus {
|
|
465
470
|
outline: none;
|
|
466
471
|
}
|
|
472
|
+
.el-select {
|
|
473
|
+
.el-input.is-focus .el-input__inner {
|
|
474
|
+
border: 0 none;
|
|
475
|
+
box-shadow: none;
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
@include e(prefix-label) {
|
|
481
|
+
.el-select {
|
|
482
|
+
margin-left: -12px;
|
|
483
|
+
}
|
|
467
484
|
}
|
|
468
485
|
|
|
469
486
|
@include e(suffix-label) {
|
|
470
487
|
padding: 0 12px 0 0;
|
|
471
488
|
display: inline;
|
|
489
|
+
.el-select {
|
|
490
|
+
margin-right: -12px;
|
|
491
|
+
}
|
|
472
492
|
}
|
|
473
493
|
|
|
474
494
|
@include e((append, prepend)) {
|
|
@@ -490,16 +510,27 @@
|
|
|
490
510
|
box-shadow: $--input-box-shadow;
|
|
491
511
|
}
|
|
492
512
|
|
|
493
|
-
&.
|
|
494
|
-
&.
|
|
513
|
+
&.is-select,
|
|
514
|
+
&.is-button {
|
|
495
515
|
border: 0 none;
|
|
496
516
|
padding: 0;
|
|
497
517
|
.el-input__suffix {
|
|
498
518
|
background: none;
|
|
499
519
|
}
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
520
|
+
// &:hover {
|
|
521
|
+
// z-index: 2;
|
|
522
|
+
// }
|
|
523
|
+
// &:hover {
|
|
524
|
+
// .el-input {
|
|
525
|
+
// z-index: 2;
|
|
526
|
+
// }
|
|
527
|
+
// }
|
|
528
|
+
// .el-input.is-focus {
|
|
529
|
+
// z-index: 2;
|
|
530
|
+
// }
|
|
531
|
+
// .el-input__inner:focus {
|
|
532
|
+
// z-index: 2;
|
|
533
|
+
// }
|
|
503
534
|
}
|
|
504
535
|
.is-focus {
|
|
505
536
|
.el-input__inner {
|