Skip to content

Commit 38ca543

Browse files
committed
updated component with blur, focus event
1 parent f8ec92e commit 38ca543

File tree

3 files changed

+67
-9
lines changed

3 files changed

+67
-9
lines changed

docs/.vuepress/components/Example.vue

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@
1515
:id="id"
1616
class="q-field__input"
1717
:value="value"
18-
@input="emitValue"
18+
@change="emitValue"
19+
@blur="onBlur"
20+
@input="onInput"
21+
@focus="onFocus"
1922
v-bind="config"
2023
v-show="floatingLabel"
2124
/>
@@ -94,9 +97,9 @@
9497
export default {
9598
data () {
9699
return {
97-
price: 154.52,
100+
price: 1234.56,
98101
priceDirective: null,
99-
priceUnmasked: 6789.10,
102+
priceUnmasked: 1234.56,
100103
config: {
101104
decimal: '.',
102105
separator: ',',
@@ -107,13 +110,24 @@ export default {
107110
masked: false,
108111
reverseFill: false
109112
},
110-
reverseFill: 6789.10,
113+
reverseFill: 1234.56,
111114
configReverseFill: {
112115
reverseFill: true,
113116
suffix: '',
114117
}
115118
}
116-
}
119+
},
120+
methods: {
121+
onInput (val){
122+
console.log('onInput', arguments, val);
123+
},
124+
onBlur ({target}){
125+
console.log('onBlur', arguments, target.unmaskedValue);
126+
},
127+
onFocus ({target}){
128+
console.log('onFocus', arguments, target.unmaskedValue);
129+
},
130+
},
117131
}
118132
</script>
119133

src/component.vue

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
:value="maskedValue"
66
@change="change"
77
@input="input"
8+
@blur="(evt) => $emit('blur', evt)"
9+
@focus="(evt) => $emit('focus', evt)"
810
v-number="config"
911
class="v-number"
1012
/>
@@ -32,14 +34,30 @@ export default {
3234
type: Boolean,
3335
default: options.reverseFill
3436
},
37+
prefill: {
38+
type: Boolean,
39+
default: options.prefill
40+
},
3541
precision: {
3642
type: Number,
3743
default: () => options.precision
3844
},
45+
minimumFractionDigits: {
46+
type: [Number, Boolean],
47+
default: () => options.minimumFractionDigits
48+
},
3949
decimal: {
4050
type: String,
4151
default: () => options.decimal
4252
},
53+
min: {
54+
type: [Number, Boolean],
55+
default: () => options.min
56+
},
57+
max: {
58+
type: [Number, Boolean],
59+
default: () => options.max
60+
},
4361
separator: {
4462
type: String,
4563
default: () => options.separator
@@ -77,7 +95,20 @@ export default {
7795
return this.masked ? this.maskedValue : this.unmaskedValue
7896
},
7997
config() {
80-
return this.$props
98+
const config = {}
99+
Object.keys(this.$props)
100+
.filter((item) => item !== 'value')
101+
.forEach((item) => {
102+
config[item] = this.$props[item]
103+
})
104+
return config
105+
}
106+
},
107+
watch: {
108+
value(val) {
109+
if (this.unmaskedValue !== val) {
110+
this.maskedValue = val
111+
}
81112
}
82113
}
83114
}

src/core.js

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,19 @@ export function FacadeInputEvent() {
1414
detail: { facade: true }
1515
})
1616
}
17+
18+
/**
19+
* Creates a CustomEvent('blur') with detail = { facade: true }
20+
* used as a way to identify our own blur event
21+
*/
22+
export function FacadeBlurEvent() {
23+
return new CustomEvent('blur', {
24+
bubbles: true,
25+
cancelable: true,
26+
detail: { facade: true }
27+
})
28+
}
29+
1730
/**
1831
* Transform an array or string config into an object
1932
*
@@ -81,10 +94,10 @@ export function updateValue(el, vnode, { emit = true, force = false, clean = fal
8194

8295
// check value with in range max and min value
8396
if (clean) {
84-
if (config.max && unmasked > config.max) {
97+
if (Number(config.max) && unmasked > Number(config.max)) {
8598
masked = number.format(config.max)
8699
unmasked = number.unformat(config.max)
87-
} else if (config.min && unmasked < config.min) {
100+
} else if (Number(config.min) && unmasked < Number(config.min)) {
88101
masked = number.format(config.min)
89102
unmasked = number.unformat(config.min)
90103
}
@@ -152,6 +165,6 @@ export function blurHandler(event) {
152165
updateValue(target, null, { force: true, clean: true }, event)
153166

154167
if (oldValue !== target.value) {
155-
target.dispatchEvent(FacadeInputEvent())
168+
target.dispatchEvent(FacadeBlurEvent())
156169
}
157170
}

0 commit comments

Comments
 (0)