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
Florian Hotze 2024-01-29 20:37:19 +01:00 committed by GitHub
parent 89766f32bb
commit 660b8f1578
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 17 additions and 3 deletions

View File

@ -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