coders-tm / vue-number-format

Easy formatted numbers, currency and percentage with input/directive mask for Vue.js
https://vue-number-format.netlify.app/
MIT License
115 stars 15 forks source link

Formatting with custom separator doesn't work after 3.28.0 #67

Open majed-badawi-condo opened 9 months ago

majed-badawi-condo commented 9 months ago

Hello, I am facing an issue with the component after upgrading from 3.27.0 to 3.28.0 where the formatting doesn't work while typing anymore.

The reason is that I'm using a custom separator and decimal props rather than the default ones.

Please find below the code sample:

<number
            class="number-input"
            :class="{ disabled: props.disabled }"
            v-model="value"
            :decimal="props.decimal"
            :separator="props.separator"
            :precision="props.precision"
            :min="props.min"
            :max="props.max"
            :suffix="props.suffix"
            :prefix="props.prefix"
            :disabled="props.disabled"
            :placeholder="props.placeholder"
            :minimum-fraction-digits="props.minimumFractionDigits"
            :null-value="null"
            :readonly="props.readonly"
            @blur="emit('blur')"
        />
export interface Props {
        modelValue?: number | string | null;
        suffix?: string;
        prefix?: string;
        precision?: number;
        separator?: string;
        decimal?: string;
        min?: number;
        max?: number;
        placeholder?: string;
        disabled?: boolean;
        readonly?: boolean;
        minimumFractionDigits?: number;
    }
const props = withDefaults(defineProps<Props>(), { precision: 2, separator: '.', decimal: ',' });
    const value = computed({
        get: () => (!isNil(props.modelValue) ? String(props.modelValue).replace('.', props.decimal) : ''),
        set: val => {
            let adjustedVal = typeof val === 'string' ? (val.length > 0 ? parseFloat(val) : null) : val;

            if (!isNil(props.max) && !isNil(adjustedVal) && adjustedVal > props.max) {
                adjustedVal = props.max;
            } else if (!isNil(props.min) && !isNil(adjustedVal) && adjustedVal < props.min) {
                adjustedVal = props.min;
            }

            emit('update:modelValue', adjustedVal);
        },
    });

For easier testing, I created two sandboxes: 3.27.0: https://codesandbox.io/p/sandbox/coders-tm-vue-number-format-3-forked-jdvj4d https://recordit.co/zIO6XtuU87 3.28.0: https://codesandbox.io/p/sandbox/coders-tm-vue-number-format-3-forked-jv8r9j https://recordit.co/XEuEVNMs6p

To reproduce the issue, start typing in the input and you'll notice that with the new version when the value reaches the fourth character it gets converted to decimal.

Thanks in advance.

razvaniacob commented 5 months ago

Yes, I'm facing the same problem. If I change separator to be a dot and decimal separator to be a comma, I get this problem.

Any idea how can this be solved?

Thank you for a great package!