code refactor

2026-05-16 16:07:33 +08:00 · 2025-06-02 00:31:45 +08:00
parent cab13cee3c
commit baa6850fcb
2 changed files with 186 additions and 137 deletions
@@ -0,0 +1,174 @@
+import { ref } from 'vue';
+
+import { useI18n } from '@/locales/helpers.ts';
+
+import { removeAll } from '@/lib/common.ts';
+import logger from '@/lib/logger.ts';
+
+export interface CommonNumberInputProps {
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    modelValue: number;
+}
+
+export type ParseNumberFunction = (value: string) => number;
+export type FormatNumberFunction = (value: number) => string;
+export type GetValidFormattedValueFunction = (value: number, textualValue: string, hasDecimalSeparator: boolean) => string;
+
+export function useCommonNumberInputBase(props: CommonNumberInputProps, maxDecimalCount: number, initValue: string, parseNumber: ParseNumberFunction, formatNumber: FormatNumberFunction, getValidFormattedValue: GetValidFormattedValueFunction) {
+    const {
+        getCurrentDecimalSeparator,
+        getCurrentDigitGroupingSymbol
+    } = useI18n();
+
+    const currentValue = ref<string>(initValue);
+
+    function onKeyUpDown(e: KeyboardEvent): void {
+        if (e.altKey || e.ctrlKey || e.metaKey || (e.key.indexOf('F') === 0 && (e.key.length === 2 || e.key.length === 3))
+            || e.key === 'ArrowLeft' || e.key === 'ArrowRight'
+            || e.key === 'Home' || e.key === 'End' || e.key === 'Tab'
+            || e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Del') {
+            return;
+        }
+
+        if (props.readonly || props.disabled) {
+            e.preventDefault();
+            return;
+        }
+
+        const digitGroupingSymbol = getCurrentDigitGroupingSymbol();
+        const decimalSeparator = getCurrentDecimalSeparator();
+
+        if (!('0' <= e.key && e.key <= '9') && e.key !== '-' && e.key !== decimalSeparator) {
+            e.preventDefault();
+            return;
+        }
+
+        if (maxDecimalCount === 0 && e.key === decimalSeparator) {
+            e.preventDefault();
+            return;
+        }
+
+        if (!e.target) {
+            return;
+        }
+
+        const target = e.target as HTMLInputElement;
+
+        let str = target.value;
+
+        if (str.indexOf(digitGroupingSymbol) >= 0) {
+            str = removeAll(str, digitGroupingSymbol);
+        }
+
+        if (e.key === '-' && str.lastIndexOf('-') > 0) {
+            const lastMinusPos = str.lastIndexOf('-');
+            target.value = str.substring(0, lastMinusPos) + str.substring(lastMinusPos + 1, str.length);
+            currentValue.value = target.value;
+            e.preventDefault();
+            return;
+        }
+
+        if (e.key === decimalSeparator && str.indexOf(decimalSeparator) !== str.lastIndexOf(decimalSeparator)) {
+            const lastDecimalSeparatorPos = str.lastIndexOf(decimalSeparator);
+            target.value = str.substring(0, lastDecimalSeparatorPos) + str.substring(lastDecimalSeparatorPos + 1, str.length);
+            currentValue.value = target.value;
+            e.preventDefault();
+            return;
+        }
+
+        if (e.key === decimalSeparator && (str.indexOf(decimalSeparator) === 0 || (str.indexOf(decimalSeparator) === 1 && str.charAt(0) === '-'))) {
+            const negative = str.charAt(0) === '-';
+
+            if (negative) {
+                str = str.substring(1);
+            }
+
+            str = (negative ? '-0' : '0') + str;
+            target.value = str;
+            currentValue.value = target.value;
+            e.preventDefault();
+            return;
+        }
+
+        let decimalLength = 0;
+        const decimalIndex = str.indexOf(decimalSeparator);
+
+        if (decimalIndex >= 0) {
+            decimalLength = str.length - str.indexOf(decimalSeparator) - 1;
+        } else if ((str.startsWith('0') && str.length >= 2) || (str.startsWith('-0') && str.length >= 3)) {
+            const negative = str.charAt(0) === '-';
+
+            if (negative) {
+                str = str.substring(1);
+            }
+
+            while (str.charAt(0) === '0' && (str.length >= 2 || e.key !== '0')) {
+                str = str.substring(1);
+            }
+
+            target.value = (negative ? '-' : '') + str;
+            currentValue.value = target.value;
+            e.preventDefault();
+            return;
+        }
+
+        if (maxDecimalCount > 0 && decimalLength > maxDecimalCount) {
+            target.value = str.substring(0, Math.min(decimalIndex + maxDecimalCount + 1, str.length - 1));
+            currentValue.value = target.value;
+            e.preventDefault();
+            return;
+        } else if (maxDecimalCount === 0 && decimalIndex >= 0) {
+            target.value = str.substring(0, decimalIndex);
+            currentValue.value = target.value;
+            e.preventDefault();
+            return;
+        }
+
+        try {
+            const val = parseNumber(str);
+            const finalValue = getValidFormattedValue(val, str, decimalIndex >= 0);
+
+            if (finalValue !== str) {
+                target.value = finalValue;
+                currentValue.value = finalValue;
+                e.preventDefault();
+            }
+        } catch (ex) {
+            logger.warn('cannot parse input number, original value is ' + str, ex);
+            target.value = '0';
+        }
+    }
+
+    function onPaste(e: ClipboardEvent): void {
+        if (!e.clipboardData || props.readonly || props.disabled) {
+            e.preventDefault();
+            return;
+        }
+
+        const text = e.clipboardData.getData('Text');
+
+        if (!text) {
+            e.preventDefault();
+            return;
+        }
+
+        const value = parseNumber(text);
+        const textualValue = formatNumber(value);
+        const decimalSeparator = getCurrentDecimalSeparator();
+        const hasDecimalSeparator = text.indexOf(decimalSeparator) >= 0;
+
+        currentValue.value = getValidFormattedValue(value, textualValue, hasDecimalSeparator);
+        e.preventDefault();
+    }
+
+    return {
+        // states
+        currentValue,
+        // functions
+        onKeyUpDown,
+        onPaste
+    };
+}