@webitel/ui-sdk 0.9.44 → 0.9.45
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/dist/ui-sdk.common.js +48 -30
- package/dist/ui-sdk.common.js.map +1 -1
- package/dist/ui-sdk.css +1 -1
- package/dist/ui-sdk.umd.js +48 -30
- package/dist/ui-sdk.umd.js.map +1 -1
- package/dist/ui-sdk.umd.min.js +2 -2
- package/dist/ui-sdk.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/molecules/wt-input/wt-input.vue +46 -21
- package/src/css/components/molecules/wt-input/_variables.scss +2 -0
package/package.json
CHANGED
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
:class="{
|
|
26
26
|
'wt-input--is-password': isPassword,
|
|
27
27
|
}"
|
|
28
|
+
ref="wt-input"
|
|
28
29
|
:value="value"
|
|
29
30
|
:type="inputType"
|
|
30
31
|
:placeholder="placeholder || label"
|
|
@@ -33,20 +34,28 @@
|
|
|
33
34
|
:max="numberMax"
|
|
34
35
|
v-on="listeners"
|
|
35
36
|
>
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
<div
|
|
38
|
+
class="wt-input__after-wrapper"
|
|
39
|
+
ref="after-wrapper"
|
|
40
|
+
>
|
|
41
|
+
<slot
|
|
42
|
+
name="after-input"
|
|
43
|
+
></slot>
|
|
44
|
+
<slot
|
|
45
|
+
v-if="isPassword"
|
|
46
|
+
name="show-password"
|
|
47
|
+
v-bind="{
|
|
40
48
|
isPasswordVisible,
|
|
41
49
|
switchVisibilityPassword,
|
|
42
50
|
}"
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
51
|
+
>
|
|
52
|
+
<wt-icon-btn
|
|
53
|
+
class="wt-input__password-button"
|
|
54
|
+
:icon="showPasswordIcon"
|
|
55
|
+
@click.native="switchVisibilityPassword"
|
|
56
|
+
></wt-icon-btn>
|
|
57
|
+
</slot>
|
|
58
|
+
</div>
|
|
50
59
|
</div>
|
|
51
60
|
<wt-input-info
|
|
52
61
|
v-if="isValidation"
|
|
@@ -57,9 +66,9 @@
|
|
|
57
66
|
</template>
|
|
58
67
|
|
|
59
68
|
<script>
|
|
60
|
-
|
|
69
|
+
import validationMixin from '../../../mixins/validationMixin/validationMixin';
|
|
61
70
|
|
|
62
|
-
|
|
71
|
+
export default {
|
|
63
72
|
name: 'wt-input',
|
|
64
73
|
mixins: [validationMixin],
|
|
65
74
|
props: {
|
|
@@ -207,8 +216,19 @@
|
|
|
207
216
|
this.isPasswordVisible = !this.isPasswordVisible;
|
|
208
217
|
this.inputType = this.isPasswordVisible ? 'text' : 'password';
|
|
209
218
|
},
|
|
219
|
+
|
|
220
|
+
updateInputPaddings() {
|
|
221
|
+
const afterWrapperWidth = this.$refs['after-wrapper'].offsetWidth;
|
|
222
|
+
const inputEl = this.$refs['wt-input'];
|
|
223
|
+
const defaultInputPadding = parseInt(getComputedStyle(document.documentElement)
|
|
224
|
+
.getPropertyValue('--input-padding'), 10);
|
|
225
|
+
inputEl.style.paddingRight = `${defaultInputPadding + afterWrapperWidth + defaultInputPadding}px`;
|
|
226
|
+
},
|
|
210
227
|
},
|
|
211
|
-
|
|
228
|
+
mounted() {
|
|
229
|
+
this.updateInputPaddings();
|
|
230
|
+
},
|
|
231
|
+
};
|
|
212
232
|
</script>
|
|
213
233
|
|
|
214
234
|
<style lang="scss" scoped>
|
|
@@ -298,19 +318,24 @@
|
|
|
298
318
|
}
|
|
299
319
|
}
|
|
300
320
|
|
|
301
|
-
.wt-
|
|
321
|
+
.wt-input__after-wrapper {
|
|
322
|
+
display: flex;
|
|
323
|
+
gap: var(--input-after-wrapper-gap);
|
|
324
|
+
align-items: center;
|
|
302
325
|
position: absolute;
|
|
303
326
|
top: 50%;
|
|
304
327
|
right: var(--input-icon-margin);
|
|
305
328
|
transform: translateY(-50%);
|
|
306
329
|
|
|
307
|
-
.wt-
|
|
308
|
-
|
|
309
|
-
|
|
330
|
+
.wt-input__password-button {
|
|
331
|
+
.wt-input--disabled & ::v-deep .wt-icon__icon {
|
|
332
|
+
fill: var(--icon-color-disabled);
|
|
333
|
+
}
|
|
310
334
|
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
335
|
+
.wt-input:hover & ::v-deep .wt-icon__icon,
|
|
336
|
+
.wt-input:focus-within & ::v-deep .wt-icon__icon {
|
|
337
|
+
fill: var(--icon-color--hover);
|
|
338
|
+
}
|
|
314
339
|
}
|
|
315
340
|
}
|
|
316
341
|
</style>
|