add right click clear filter

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<number | "">({
+      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<number | "">({
+      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<number | "">({
-        get() {
-          return _inputMin.value;
-        },
-        set(value) {
-          _inputMin.value = value;
-          if (typeof value === "number") {
-            props.filter.value = value;
-          } else {
-            props.filter.value = 0;
-          }
-        },
-      }),
-      inputMax: computed<number | "">({
-        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();
+      },
     };
   },
 });

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
             />
             <input
@@ -76,6 +77,7 @@
               ref="inputMaxEl"
               v-model.number="inputMax"
               @focus="inputFocus($event, 'max')"
+              @mousedown.right.prevent="clearInput($event, 'max')"
               @mousewheel.stop
             />
           </div>
@@ -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(
         () =>