Skip to content

Commit 3474296

Browse files
ArmourArmour
committed
Fix(components): fix material-input maxlength bug and Mallki animation bug
1 parent cd966b5 commit 3474296

File tree

16 files changed

+3171
-3114
lines changed

16 files changed

+3171
-3114
lines changed

‎package.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"cors": "^2.8.5",
2222
"driver.js": "^0.9.7",
2323
"echarts": "^4.2.1",
24-
"element-ui": "^2.9.2",
24+
"element-ui": "^2.10.0",
2525
"faker": "^4.1.0",
2626
"file-saver": "^2.0.2",
2727
"fuse.js": "^3.4.5",
@@ -37,7 +37,7 @@
3737
"screenfull": "^4.2.0",
3838
"script-loader": "^0.7.2",
3939
"sortablejs": "^1.9.0",
40-
"tinymce": "^5.0.8",
40+
"tinymce": "^5.0.9",
4141
"tui-editor": "^1.4.3",
4242
"vue": "^2.6.10",
4343
"vue-class-component": "^7.1.0",
@@ -58,7 +58,7 @@
5858
},
5959
"devDependencies": {
6060
"@types/clipboard": "^2.0.1",
61-
"@types/codemirror": "^0.0.74",
61+
"@types/codemirror": "^0.0.76",
6262
"@types/compression": "^0.0.36",
6363
"@types/cors": "^2.8.5",
6464
"@types/echarts": "^4.1.9",
@@ -68,7 +68,7 @@
6868
"@types/jest": "^24.0.15",
6969
"@types/js-cookie": "^2.2.2",
7070
"@types/jszip": "^3.1.6",
71-
"@types/lodash": "^4.14.134",
71+
"@types/lodash": "^4.14.135",
7272
"@types/morgan": "^1.7.35",
7373
"@types/nprogress": "^0.2.0",
7474
"@types/sortablejs": "^1.7.2",
@@ -87,13 +87,13 @@
8787
"@vue/test-utils": "^1.0.0-beta.29",
8888
"babel-core": "^7.0.0-bridge.0",
8989
"babel-eslint": "^10.0.2",
90-
"concurrently": "^4.1.0",
91-
"eslint": "^5.16.0",
92-
"eslint-plugin-vue": "^5.2.2",
90+
"concurrently": "^4.1.1",
91+
"eslint": "^6.0.1",
92+
"eslint-plugin-vue": "^5.2.3",
9393
"fibers": "^4.0.1",
9494
"jest": "^24.8.0",
95-
"lint-staged": "^8.2.1",
96-
"sass": "^1.21.0",
95+
"lint-staged": "^9.0.0",
96+
"sass": "^1.22.2",
9797
"sass-loader": "^7.1.0",
9898
"style-resources-loader": "^1.2.1",
9999
"swagger-routes-express": "^3.0.1",
@@ -103,7 +103,7 @@
103103
"vue-cli-plugin-element": "^1.0.1",
104104
"vue-cli-plugin-style-resources-loader": "^0.1.3",
105105
"vue-template-compiler": "^2.6.10",
106-
"webpack": "^4.35.0"
106+
"webpack": "^4.35.2"
107107
},
108108
"bugs": {
109109
"url": "https://github.com/armour/vue-typescript-admin-template/issues"

‎src/components/BackToTop/index.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,7 @@ export default class extends Vue {
3636
background: '#e7eaf1'
3737
}
3838
}
39-
})
40-
private customStyle!: object
39+
}) private customStyle!: object
4140
4241
private visible = false
4342
private isMoving = false

‎src/components/MaterialInput/index.vue‎

Lines changed: 76 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -11,99 +11,106 @@
1111
/>
1212
<input
1313
v-if="type === 'email'"
14-
v-model="currentValue"
14+
:id="id"
15+
v-model="valueCopy"
16+
type="email"
17+
class="material-input"
1518
:name="name"
16-
:placeholder="fillPlaceHolder"
19+
:placeholder="filledPlaceholder"
1720
:readonly="readonly"
1821
:disabled="disabled"
1922
:autocomplete="autoComplete"
2023
:required="required"
21-
type="email"
22-
class="material-input"
2324
@focus="handleFocus"
2425
@blur="handleBlur"
2526
@input="handleInput"
2627
>
2728
<input
2829
v-if="type === 'url'"
29-
v-model="currentValue"
30+
:id="id"
31+
v-model="valueCopy"
32+
type="url"
33+
class="material-input"
3034
:name="name"
31-
:placeholder="fillPlaceHolder"
35+
:placeholder="filledPlaceholder"
3236
:readonly="readonly"
3337
:disabled="disabled"
3438
:autocomplete="autoComplete"
3539
:required="required"
36-
type="url"
37-
class="material-input"
3840
@focus="handleFocus"
3941
@blur="handleBlur"
4042
@input="handleInput"
4143
>
4244
<input
4345
v-if="type === 'number'"
44-
v-model="currentValue"
46+
:id="id"
47+
v-model="valueCopy"
48+
type="number"
49+
class="material-input"
4550
:name="name"
46-
:placeholder="fillPlaceHolder"
47-
:step="step"
51+
:placeholder="filledPlaceholder"
4852
:readonly="readonly"
4953
:disabled="disabled"
5054
:autocomplete="autoComplete"
5155
:max="max"
5256
:min="min"
57+
:step="step"
5358
:minlength="minlength"
5459
:maxlength="maxlength"
5560
:required="required"
56-
type="number"
57-
class="material-input"
5861
@focus="handleFocus"
5962
@blur="handleBlur"
6063
@input="handleInput"
6164
>
6265
<input
6366
v-if="type === 'password'"
64-
v-model="currentValue"
67+
:id="id"
68+
v-model="valueCopy"
69+
type="password"
70+
class="material-input"
6571
:name="name"
66-
:placeholder="fillPlaceHolder"
72+
:placeholder="filledPlaceholder"
6773
:readonly="readonly"
6874
:disabled="disabled"
6975
:autocomplete="autoComplete"
7076
:max="max"
7177
:min="min"
78+
:step="step"
7279
:required="required"
73-
type="password"
74-
class="material-input"
7580
@focus="handleFocus"
7681
@blur="handleBlur"
7782
@input="handleInput"
7883
>
7984
<input
8085
v-if="type === 'tel'"
81-
v-model="currentValue"
86+
:id="id"
87+
v-model="valueCopy"
88+
type="tel"
89+
class="material-input"
8290
:name="name"
83-
:placeholder="fillPlaceHolder"
91+
:placeholder="filledPlaceholder"
8492
:readonly="readonly"
8593
:disabled="disabled"
8694
:autocomplete="autoComplete"
8795
:required="required"
88-
type="tel"
89-
class="material-input"
9096
@focus="handleFocus"
9197
@blur="handleBlur"
9298
@input="handleInput"
9399
>
94100
<input
95101
v-if="type === 'text'"
96-
v-model="currentValue"
102+
:id="id"
103+
v-model="valueCopy"
104+
type="text"
105+
class="material-input"
97106
:name="name"
98-
:placeholder="fillPlaceHolder"
107+
:placeholder="filledPlaceholder"
99108
:readonly="readonly"
100109
:disabled="disabled"
101110
:autocomplete="autoComplete"
102111
:minlength="minlength"
103112
:maxlength="maxlength"
104113
:required="required"
105-
type="text"
106-
class="material-input"
107114
@focus="handleFocus"
108115
@blur="handleBlur"
109116
@input="handleInput"
@@ -124,37 +131,44 @@ import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
124131
name: 'MaterialInput'
125132
})
126133
export default class extends Vue {
134+
@Prop({ required: true }) private value!: any
135+
@Prop({ default: 'text' }) private type!: string
136+
@Prop({ default: '' }) private id!: string
127137
@Prop({ default: '' }) private icon!: string
128138
@Prop({ default: '' }) private name!: string
129-
@Prop({ default: 'text' }) private type!: string
130-
@Prop({ default: () => [] }) private value!: (string | number)[]
131-
@Prop({ default: null }) private placeholder!: string | null
139+
@Prop({ default: '' }) private placeholder!: string
132140
@Prop({ default: false }) private readonly!: boolean
133141
@Prop({ default: false }) private disabled!: boolean
134-
@Prop({ default: '' }) private min!: string
135-
@Prop({ default: '' }) private max!: string
136-
@Prop({ default: '' }) private step!: string
137-
@Prop({ default: 0 }) private minlength!: number
138-
@Prop({ default: 0 }) private maxlength!: number
139142
@Prop({ default: true }) private required!: boolean
140143
@Prop({ default: 'off' }) private autoComplete!: string
144+
@Prop({ default: 0 }) private min!: number | Date
145+
@Prop({ default: 10000 }) private max!: number | Date
146+
@Prop({ default: 1 }) private step!: number
147+
@Prop({ default: 0 }) private minlength!: number
148+
@Prop({ default: 20 }) private maxlength!: number
141149
@Prop({ default: true }) private validateEvent!: boolean
142150
143-
private currentValue = this.value
151+
private valueCopy = this.value
144152
private focus = false
145-
private fillPlaceHolder: string | null = null
153+
154+
@Watch('value')
155+
private onValueChange(value: any) {
156+
this.valueCopy = value
157+
}
146158
147159
get computedClasses() {
148160
return {
149161
'material--active': this.focus,
150162
'material--disabled': this.disabled,
151-
'material--raised': Boolean(this.focus || this.currentValue) // has value
163+
'material--raised': Boolean(this.focus || this.valueCopy)
152164
}
153165
}
154166
155-
@Watch('value')
156-
private onValueChange(value: (string | number)[]) {
157-
this.currentValue = value
167+
get filledPlaceholder() {
168+
if (this.focus) {
169+
return this.placeholder
170+
}
171+
return ''
158172
}
159173
160174
private handleInput(event: KeyboardEvent) {
@@ -165,24 +179,19 @@ export default class extends Vue {
165179
this.$parent.$emit('el.form.change', [value])
166180
}
167181
}
168-
this.$emit('change', value)
169182
}
170183
171184
private handleFocus(event: FocusEvent) {
172185
this.focus = true
173186
this.$emit('focus', event)
174-
if (this.placeholder && this.placeholder !== '') {
175-
this.fillPlaceHolder = this.placeholder
176-
}
177187
}
178188
179189
private handleBlur(event: FocusEvent) {
180190
this.focus = false
181191
this.$emit('blur', event)
182-
this.fillPlaceHolder = null
183192
if (this.$parent.$options.name === 'ElFormItem') {
184193
if (this.validateEvent) {
185-
this.$parent.$emit('el.form.blur', [this.currentValue])
194+
this.$parent.$emit('el.form.blur', [this.valueCopy])
186195
}
187196
}
188197
}
@@ -192,16 +201,14 @@ export default class extends Vue {
192201
<style lang="scss" scoped>
193202
// Fonts:
194203
$font-size-base: 16px;
195-
$font-size-small: 18px;
204+
$font-size-small: 14px;
196205
$font-size-smallest: 12px;
197206
$font-weight-normal: normal;
198207
$font-weight-bold: bold;
199-
$apixel: 1px;
200208
201209
// Utils
202-
$spacer: 12px;
210+
$spacer: 10px;
203211
$transition: 0.2s ease all;
204-
$index: 0px;
205212
$index-has-icon: 30px;
206213
207214
// Theme:
@@ -232,7 +239,7 @@ $color-black: black;
232239
233240
// Component:
234241
.material-input__component {
235-
margin-top: 36px;
242+
margin-top: 45px;
236243
position: relative;
237244
238245
* {
@@ -264,11 +271,10 @@ $color-black: black;
264271
265272
.material-input {
266273
font-size: $font-size-base;
267-
padding: $spacer $spacer $spacer - $apixel * 10 $spacer / 2;
274+
padding: $spacer $spacer $spacer $spacer / 2;
268275
display: block;
269276
width: 100%;
270277
border: none;
271-
line-height: 1;
272278
border-radius: 0;
273279
274280
&:focus {
@@ -279,13 +285,13 @@ $color-black: black;
279285
}
280286
281287
.material-label {
288+
font-size: $font-size-small;
282289
font-weight: $font-weight-normal;
283290
position: absolute;
284291
pointer-events: none;
285-
left: $index;
292+
left: 0;
286293
top: 0;
287294
transition: $transition;
288-
font-size: $font-size-small;
289295
}
290296
291297
.material-input-bar {
@@ -327,6 +333,22 @@ $color-black: black;
327333
}
328334
}
329335
}
336+
337+
// Errors:
338+
.material-errors {
339+
position: relative;
340+
overflow: hidden;
341+
342+
.material-error {
343+
font-size: $font-size-smallest;
344+
line-height: $font-size-smallest + 2px;
345+
overflow: hidden;
346+
margin-top: 0;
347+
padding-top: $spacer / 2;
348+
padding-right: $spacer / 2;
349+
padding-left: 0;
350+
}
351+
}
330352
}
331353
332354
.material-input__component {
@@ -335,7 +357,6 @@ $color-black: black;
335357
.material-input {
336358
background: none;
337359
color: $color-black;
338-
text-indent: $index;
339360
border-bottom: 1px solid $color-grey-light;
340361
}
341362
@@ -356,19 +377,5 @@ $color-black: black;
356377
color: $color-blue;
357378
}
358379
}
359-
360-
// Errors:
361-
&.material--has-errors {
362-
&.material--active .material-label {
363-
color: $color-red;
364-
}
365-
366-
.material-input-bar {
367-
&:before,
368-
&:after {
369-
background: transparent;
370-
}
371-
}
372-
}
373380
}
374381
</style>

0 commit comments

Comments
 (0)