Fix `oh-stepper` sends command on Item state update due to rounding (#2096)
Fixes #1186: Widget sends command on external update due to rounding. This is done by replacing the generic change listener with listeners for plusclick, minusclick and input for input element events. Signed-off-by: Florian Hotze <florianh_dev@icloud.com>pull/2296/head
parent
89766f32bb
commit
660b8f1578
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<f7-stepper ref="stepper" v-bind="config" :value="value" @stepper:change="onChange" @click.native.stop
|
||||
:input="config.enableInput === true" :manual-input-mode="false" :format-value="formatValue" />
|
||||
<f7-stepper ref="stepper" v-bind="config" @stepper:plusclick="onPlusMinusClick" @stepper:minusclick="onPlusMinusClick" @input="onInput"
|
||||
:input="config.enableInput === true" :manual-input-mode="true" :format-value="formatValue" />
|
||||
</template>
|
||||
|
||||
<style lang="stylus">
|
||||
|
@ -18,6 +18,7 @@ export default {
|
|||
widget: OhStepperDefinition,
|
||||
mounted () {
|
||||
delete this.config.value
|
||||
this.$refs.stepper.setValue(this.value)
|
||||
},
|
||||
computed: {
|
||||
value () {
|
||||
|
@ -51,7 +52,20 @@ export default {
|
|||
// do NOT convert to number, instead return string, otherwise formatting wouldn't work
|
||||
return parseFloat(value).toFixed(nbDecimals ? nbDecimals.length : 0)
|
||||
},
|
||||
onChange (value) {
|
||||
onPlusMinusClick () {
|
||||
setTimeout(() => {
|
||||
this.sendCommand(this.$refs.stepper.getValue())
|
||||
}, 10)
|
||||
},
|
||||
onInput () {
|
||||
if (!this.config.enableInput) return
|
||||
setTimeout(() => {
|
||||
const newValue = this.$refs.stepper.getValue()
|
||||
if (Math.abs(newValue - this.value) < (this.config.step || 1)) return
|
||||
this.sendCommand(newValue)
|
||||
}, 1500)
|
||||
},
|
||||
sendCommand (value) {
|
||||
const applyOffset = (num) => (!isNaN(this.config.offset)) ? Number(this.toStepFixed(num - Number(this.config.offset))) : num
|
||||
let newValue = applyOffset(Number(this.toStepFixed(value)))
|
||||
if (isNaN(newValue)) newValue = this.config.min || this.config.max || 0
|
||||
|
|
Loading…
Reference in New Issue