@milaboratories/uikit 2.0.7 → 2.0.8
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@milaboratories/uikit",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.8",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/pl-uikit.umd.js",
|
|
6
6
|
"module": "dist/pl-uikit.js",
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
"vue-tsc": "^2.1.6",
|
|
33
33
|
"yarpm": "^1.2.0",
|
|
34
34
|
"svgo": "^3.3.2",
|
|
35
|
-
"@
|
|
36
|
-
"@
|
|
35
|
+
"@platforma-sdk/model": "^1.7.20",
|
|
36
|
+
"@milaboratories/helpers": "^1.6.6"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|
|
39
39
|
"dev": "vite",
|
|
@@ -70,12 +70,18 @@ const props = defineProps<{
|
|
|
70
70
|
* An array of validation rules to apply to the input field. Each rule is a function that takes the current value and returns `true` if valid or an error message if invalid.
|
|
71
71
|
*/
|
|
72
72
|
rules?: ((v: string) => boolean | string)[];
|
|
73
|
+
/**
|
|
74
|
+
* The string specifies whether the field should be a password or not, value could be "password" or undefined.
|
|
75
|
+
*/
|
|
76
|
+
type?: 'password';
|
|
73
77
|
}>();
|
|
74
78
|
|
|
75
79
|
const rootRef = ref<HTMLInputElement | undefined>(undefined);
|
|
76
80
|
|
|
77
81
|
const inputRef = ref<HTMLInputElement | undefined>();
|
|
78
82
|
|
|
83
|
+
const showPassword = ref(false);
|
|
84
|
+
|
|
79
85
|
const valueRef = computed<string>({
|
|
80
86
|
get() {
|
|
81
87
|
return props.modelValue ?? '';
|
|
@@ -85,6 +91,16 @@ const valueRef = computed<string>({
|
|
|
85
91
|
},
|
|
86
92
|
});
|
|
87
93
|
|
|
94
|
+
const fieldType = computed(() => {
|
|
95
|
+
if (props.type && props.type === 'password') {
|
|
96
|
+
return showPassword.value ? 'text' : props.type;
|
|
97
|
+
} else {
|
|
98
|
+
return 'text';
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
|
|
102
|
+
const passwordIcon = computed(() => (showPassword.value ? 'icon-view-off' : 'icon-view-on'));
|
|
103
|
+
|
|
88
104
|
const clear = () => {
|
|
89
105
|
if (props.clearable) {
|
|
90
106
|
emit('update:modelValue', props.clearable === true ? '' : props.clearable());
|
|
@@ -116,7 +132,13 @@ const displayErrors = computed(() => {
|
|
|
116
132
|
|
|
117
133
|
const hasErrors = computed(() => displayErrors.value.length > 0);
|
|
118
134
|
|
|
135
|
+
const canShowClearable = computed(() => props.clearable && nonEmpty.value && props.type !== 'password');
|
|
136
|
+
|
|
119
137
|
useLabelNotch(rootRef);
|
|
138
|
+
|
|
139
|
+
function togglePassword() {
|
|
140
|
+
showPassword.value = !showPassword.value;
|
|
141
|
+
}
|
|
120
142
|
</script>
|
|
121
143
|
|
|
122
144
|
<template>
|
|
@@ -143,9 +165,10 @@ useLabelNotch(rootRef);
|
|
|
143
165
|
<div v-if="prefix" class="ui-text-field__prefix">
|
|
144
166
|
{{ prefix }}
|
|
145
167
|
</div>
|
|
146
|
-
<input ref="inputRef" v-model="valueRef" :disabled="disabled" :placeholder="placeholder || '...'" type="
|
|
168
|
+
<input ref="inputRef" v-model="valueRef" :disabled="disabled" :placeholder="placeholder || '...'" :type="fieldType" spellcheck="false" />
|
|
147
169
|
<div class="ui-text-field__append">
|
|
148
|
-
<div v-if="
|
|
170
|
+
<div v-if="canShowClearable" class="icon icon--clear" @click="clear" />
|
|
171
|
+
<div v-if="type === 'password'" :class="passwordIcon" class="icon-24 uc-pointer" @click="togglePassword" />
|
|
149
172
|
<slot name="append" />
|
|
150
173
|
</div>
|
|
151
174
|
<DoubleContour class="ui-text-field__contour" />
|