diff --git a/renderer/src/web/price-check/filters/FilterBtnNumeric.vue b/renderer/src/web/price-check/filters/FilterBtnNumeric.vue index 13f8e569..c79c72db 100644 --- a/renderer/src/web/price-check/filters/FilterBtnNumeric.vue +++ b/renderer/src/web/price-check/filters/FilterBtnNumeric.vue @@ -9,6 +9,7 @@ type="number" v-model.number="inputMin" @focus="inputFocus" + @mousedown.right.prevent="clearInput($event, 'min')" @blur="inputMinBlur" @mousewheel.stop :style="{ width: `${1.2 + Math.max(String(inputMin).length, 2)}ch` }" @@ -21,6 +22,7 @@ type="number" v-model.number="inputMax" @focus="inputFocus" + @mousedown.right.prevent="clearInput($event, 'max')" @mousewheel.stop :style="{ width: `${1.2 + Math.max(String(inputMax).length, 2)}ch` }" placeholder="…" @@ -64,33 +66,37 @@ export default defineComponent({ { immediate: true }, ); + const inputMin = computed({ + get() { + return _inputMin.value; + }, + set(value) { + _inputMin.value = value; + if (typeof value === "number") { + props.filter.value = value; + } else { + props.filter.value = 0; + } + }, + }); + + const inputMax = computed({ + get() { + return _inputMax.value; + }, + set(value) { + _inputMax.value = value; + if (typeof value === "number") { + props.filter.max = value; + } else { + props.filter.max = undefined; + } + }, + }); + return { - inputMin: computed({ - get() { - return _inputMin.value; - }, - set(value) { - _inputMin.value = value; - if (typeof value === "number") { - props.filter.value = value; - } else { - props.filter.value = 0; - } - }, - }), - inputMax: computed({ - get() { - return _inputMax.value; - }, - set(value) { - _inputMax.value = value; - if (typeof value === "number") { - props.filter.max = value; - } else { - props.filter.max = undefined; - } - }, - }), + inputMin, + inputMax, inputFocus(e: FocusEvent) { const target = e.target as HTMLInputElement; target.select(); @@ -102,6 +108,17 @@ export default defineComponent({ props.filter.disabled = true; } }, + clearInput(e: MouseEvent, which: "min" | "max") { + const target = e.target as HTMLInputElement; + + if (which === "min") { + inputMin.value = ""; + } else { + inputMax.value = ""; + } + + target.focus(); + }, }; }, }); diff --git a/renderer/src/web/price-check/filters/FilterModifier.vue b/renderer/src/web/price-check/filters/FilterModifier.vue index 22ad6867..ba064824 100644 --- a/renderer/src/web/price-check/filters/FilterModifier.vue +++ b/renderer/src/web/price-check/filters/FilterModifier.vue @@ -63,6 +63,7 @@ ref="inputMinEl" v-model.number="inputMin" @focus="inputFocus($event, 'min')" + @mousedown.right.prevent="clearInput($event, 'min')" @mousewheel.stop /> @@ -266,6 +268,18 @@ export default defineComponent({ props.filter.disabled = false; } + function clearInput(e: MouseEvent, which: "min" | "max") { + const target = e.target as HTMLInputElement; + + if (which === "min") { + inputMin.value = ""; + } else { + inputMax.value = ""; + } + + target.focus(); + } + function toggleFilter(e: MouseEvent) { if (e.detail === 0) { ctx.emit("submit"); @@ -286,6 +300,25 @@ export default defineComponent({ } }); + const inputMin = computed({ + // this can be undefined + get(): number | "" { + return props.filter.roll!.min!; + }, + set(value: "" | number) { + props.filter.roll!.min = value; + }, + }); + const inputMax = computed({ + // this can be undefined + get(): number | "" { + return props.filter.roll!.max!; + }, + set(value: "" | number) { + props.filter.roll!.max = value; + }, + }); + const { t } = useI18n(); return { @@ -297,24 +330,8 @@ export default defineComponent({ inputMinEl, inputMaxEl, sliderValue, - inputMin: computed({ - // this can be undefined - get(): number | "" { - return props.filter.roll!.min!; - }, - set(value: "" | number) { - props.filter.roll!.min = value; - }, - }), - inputMax: computed({ - // this can be undefined - get(): number | "" { - return props.filter.roll!.max!; - }, - set(value: "" | number) { - props.filter.roll!.max = value; - }, - }), + inputMin, + inputMax, tag: computed(() => props.filter.tag), // TODO: change changeStep: computed(() => (props.filter.roll!.dp ? 0.01 : 1)), @@ -363,6 +380,7 @@ export default defineComponent({ props.filter.sources[0].modifier.info.rank != null), ), inputFocus, + clearInput, toggleFilter, showShortText: computed( () =>