11<template >
2- <!-- ===================================================================================== -->
3- <!-- Mew Input -->
4- <!-- ===================================================================================== -->
2+ <!--
3+ =====================================================================================
4+ Mew Input
5+ =====================================================================================
6+ -->
57 <v-text-field
6- v-model =" inputValue"
78 class =" mew-input rounded-lg"
8- :class =" hideValue ? 'hide-value' : ''"
99 :disabled =" disabled"
1010 :label =" label"
1111 :placeholder =" placeholder"
1414 :solo =" hasNoBorder"
1515 color =" primary"
1616 :autofocus =" autofocus"
17+ v-model =" inputValue"
1718 :hint =" resolvedAddr ? resolvedAddr : hint"
1819 :persistent-hint =" persistentHint || resolvedAddr.length > 0"
1920 :suffix =" rightLabel"
2223 :type =" inputType"
2324 :append-icon =" showPasswordIcon"
2425 :readonly =" isReadOnly"
26+ @click:append =" onPasswordIconClick"
27+ @keydown.native =" preventCharE($event)"
2528 validate-on-blur
2629 height =" 62"
27- @click:append =" onPasswordIconClick"
2830 >
29- <!-- ===================================================================================== -->
30- <!-- Mew Input: Error Messages -->
31- <!-- ===================================================================================== -->
32- <template #message =" item " >
31+ <!--
32+ =====================================================================================
33+ Mew Input: Error Messages
34+ =====================================================================================
35+ -->
36+ <template v-slot :message =" item " >
3337 <span
3438 class =" mew-label"
3539 >{{ item.message }}
4044 @click =" emitBuyMore"
4145 >{{ buyMoreStr }}</a ></span >
4246 </template >
43- <template #prepend-inner >
44- <!-- ===================================================================================== -->
45- <!-- Mew Input: Blockie (displays at the beginning of the input) -->
46- <!-- ===================================================================================== -->
47+ <template v-slot :prepend-inner >
48+ <!--
49+ =====================================================================================
50+ Mew Input: Blockie (displays at the beginning of the input)
51+ =====================================================================================
52+ -->
4753 <div
4854 v-if =" showBlockie && !value"
4955 class =" blockie-placeholder mr-1 selectHover"
5561 height =" 25px"
5662 />
5763 <div class =" d-flex align-center justify-center"
58- <!-- ===================================================================================== -->
59- <!-- slot: prependInnerIcon -->
60- <!-- prepends content to the beginning of the input. -->
61- <!-- ===================================================================================== -->
64+ <!--
65+ =====================================================================================
66+ slot: prependInnerIcon
67+ prepends content to the beginning of the input.
68+ =====================================================================================
69+ -->
6270 <slot name =" prependInnerIcon"
63-
64- <!-- ===================================================================================== -->
65- <!-- Mew Input: Token Image (displays at the beginning of the input) -->
66- <!-- ===================================================================================== -->
71+ <!--
72+ =====================================================================================
73+ Mew Input: Token Image (displays at the beginning of the input)
74+ =====================================================================================
75+ -->
6776 <mew-token-container
6877 v-if =" image"
6978 class =" mx-1 mt-1"
7382 />
7483 </div >
7584 </template >
76-
77- <!-- ===================================================================================== -->
78- <!-- Max Button (displays at the end of the input) -->
79- <!-- ===================================================================================== -->
80- <template #append >
85+ <!--
86+ =====================================================================================
87+ Max Button (displays at the end of the input)
88+ =====================================================================================
89+ -->
90+ <template v-slot :append >
8191 <v-btn
8292 v-if =" maxBtnObj.method"
93+ @click =" maxBtnObj.method"
8394 :class =" [
8495 maxBtnObj.disabled
8596 ? 'disabled--text no-pointer-events'
8697 : 'greyPrimary--text',
87- 'rounded-lg mt-n2 mew-caption font-weight-medium'
98+ 'rounded-lg mt-n2 mew-caption font-weight-medium',
8899 ]"
89100 min-width =" 40"
90101 min-height =" 40"
91102 height =" 40"
92103 width =" 40"
93104 depressed
94105 color =" greyLight"
95- @click =" maxBtnObj.method"
96106 >
97107 {{ maxBtnObj.title }}
98108 </v-btn >
@@ -110,85 +120,85 @@ export default {
110120 name: ' MewInput'
111121 components: {
112122 MewBlockie,
113- MewTokenContainer
123+ MewTokenContainer,
114124 },
115125 props: {
116126 /**
117127 * Error messages to display at the bottom of the input.
118128 */
119129 errorMessages: {
120130 type: [String , Array ],
121- default: ' '
131+ default: ' ' ,
122132 },
123133 /**
124134 * Input becomes read only.
125135 */
126136 isReadOnly: {
127137 type: Boolean ,
128- default: false
138+ default: false ,
129139 },
130140 /**
131141 * Prepends the blockie to the beginning of the input.
132142 */
133143 showBlockie: {
134144 type: Boolean ,
135- default: false
145+ default: false ,
136146 },
137147 /**
138148 * Removes the input border and adds a box shadow.
139149 */
140150 hasNoBorder: {
141151 type: Boolean ,
142- default: false
152+ default: false ,
143153 },
144154 /**
145155 * Disables the input.
146156 */
147157 disabled: {
148158 type: Boolean ,
149- default: false
159+ default: false ,
150160 },
151161 /**
152162 * The input label.
153163 */
154164 label: {
155165 type: String ,
156- default: ' '
166+ default: ' ' ,
157167 },
158168 /**
159169 * The input placeholder.
160170 */
161171 placeholder: {
162172 type: String ,
163- default: ' '
173+ default: ' ' ,
164174 },
165175 /**
166176 * The input value.
167177 */
168178 value: {
169179 type: String ,
170- default: ' '
180+ default: ' ' ,
171181 },
172182 /**
173183 * The input id.
174184 */
175185 id: {
176186 type: Number ,
177- default: null
187+ default: null ,
178188 },
179189 /**
180190 * Displays text on the right inner side of the input.
181191 */
182192 rightLabel: {
183193 type: String ,
184- default: ' '
194+ default: ' ' ,
185195 },
186196 /**
187197 * Hides input clear functionality. Clear symbol will be displayed on the right side.
188198 */
189199 hideClearBtn: {
190200 type: Boolean ,
191- default: false
201+ default: false ,
192202 },
193203 /**
194204 * For validating your input - accepts an array of functions that take an input value as an argument and returns either true / false
@@ -198,49 +208,49 @@ export default {
198208 type: Array ,
199209 default : () => {
200210 return [];
201- }
211+ },
202212 },
203213 /**
204214 * The resolved address.
205215 */
206216 resolvedAddr: {
207217 type: String ,
208- default: ' '
218+ default: ' ' ,
209219 },
210220 /**
211221 * Enables persistent hint.
212222 */
213223 persistentHint: {
214224 type: Boolean ,
215- default: false
225+ default: false ,
216226 },
217227 /**
218228 * Hint text (will be displayed at the bottom of the input).
219229 */
220230 hint: {
221231 type: String ,
222- default: ' '
232+ default: ' ' ,
223233 },
224234 /**
225235 * Sets input type.
226236 */
227237 type: {
228238 type: String ,
229- default: ' text'
239+ default: ' text' ,
230240 },
231241 /**
232242 * Prepends an image to the beginning of the input.
233243 */
234244 image: {
235245 type: String ,
236- default: ' '
246+ default: ' ' ,
237247 },
238248 /**
239249 * Adds a "Buy more" string to the end of the first index of the errorMessages prop.
240250 */
241251 buyMoreStr: {
242252 type: String ,
243- default: ' '
253+ default: ' ' ,
244254 },
245255 /**
246256 * Displays a button to the right inner side of the input.
@@ -251,37 +261,42 @@ export default {
251261 type: Object ,
252262 default : () => {
253263 return {};
254- }
264+ },
255265 },
256266 /**
257267 * Autofocuses the input.
258268 */
259269 autofocus: {
260270 type: Boolean ,
261- default: false
271+ default: false ,
262272 },
263273 /**
264274 * Hides the toggle show password icon on the right
265275 * when input type is password.
266276 */
267277 hidePasswordIcon: {
268278 type: Boolean ,
269- default: false
279+ default: false ,
270280 },
271- /**
272- * Hide password and key value
273- */
274- hideValue: {
275- type: Boolean ,
276- default: false
277- }
278281 },
279282 data () {
280283 return {
281284 inputValue: ' '
282- showPassword: false
285+ showPassword: false ,
283286 };
284287 },
288+ watch: {
289+ inputValue (newVal , oldVal ) {
290+ if (newVal !== oldVal) {
291+ this .$emit (' input' this .id );
292+ }
293+ },
294+ value (newVal , oldVal ) {
295+ if (newVal !== oldVal) {
296+ this .inputValue = newVal;
297+ }
298+ },
299+ },
285300 computed: {
286301 isPasswordType () {
287302 return this .type === types[0 ];
@@ -297,19 +312,7 @@ export default {
297312 return types[1 ];
298313 }
299314 return this .type ;
300- }
301- },
302- watch: {
303- inputValue (newVal , oldVal ) {
304- if (newVal !== oldVal) {
305- this .$emit (' input' this .id );
306- }
307315 },
308- value (newVal , oldVal ) {
309- if (newVal !== oldVal) {
310- this .inputValue = newVal;
311- }
312- }
313316 },
314317 mounted () {
315318 this .inputValue = this .value ;
@@ -325,21 +328,18 @@ export default {
325328 },
326329 clear (val ) {
327330 this .inputValue = val ? val : ' '
328- }
329- }
331+ },
332+ preventCharE (e ) {
333+ if (this .type === ' number' && e .key === ' e' e .preventDefault ();
334+ },
335+ },
330336};
331337script >
332-
333338<style lang="scss">
334339/* *
335340 * Mew Input styles
336341 */
337342.mew-input {
338- & .hide-value {
339- input {
340- -webkit-text-security disc ;
341- }
342- }
343343 .mdi-close {
344344 font-size 20px !important ;
345345 }
0 commit comments