src/components/common/VnCurrency.vue

@@ -1,33 +1,45 @@
 <script setup>
-import { ref } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useCapitalize } from 'src/composables/useCapitalize';
+import { useValidNumber } from 'src/composables/useValidNumber';
 import VnInput from 'src/components/common/VnInput.vue';
-import { useFirstUpper } from 'src/composables/useFirstUpper';
+
+const props = defineProps({
+    modelValue: { type: String, default: '' },
+    currency: { type: String, default: 'euro' },
+    icon: { type: Boolean, default: false },
+});
 
 const { t } = useI18n();
-const amount = ref();
+const emit = defineEmits(['update:modelValue']);
 
-const isValidNumber = (value) => /^(\d|\d+(\.)?\d+)$/.test(value);
+const amount = computed({
+    get() {
+        return props.modelValue;
+    },
+    set(val) {
+        emit('update:modelValue', val.replaceAll(',', '.'));
+    },
+});
 </script>
 <template>
     <VnInput
-        :label="useFirstUpper(t('amount'))"
         v-model="amount"
+        :label="useCapitalize(t('amount'))"
+        :rules="[(val) => useValidNumber(val) || !val]"
         is-outlined
-        @update:model-value="
-            (value) => {
-                if (value.includes(',')) amount.value = amount.replace(',', '.');
-            }
-        "
-        :rules="[(val) => isValidNumber(val) || !val || 'Please type a number']"
-        lazy-rules
     >
-        <template #prepend>
-            <QIcon name="euro" size="sm" />
+        <template #prepend v-if="icon">
+            <QIcon :name="currency" size="sm" />
         </template>
     </VnInput>
 </template>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.q-input {
+    max-height: 44px;
+}
+</style>
 <i18n>
 es:
     amount: importe

src/composables/useValidNumber.js

@@ -0,0 +1,3 @@
+export function useValidNumber(value) {
+    return /^(\d|\d+(\.)?\d+)$/.test(value);
+}

src/pages/Customer/Payments/CustomerPaymentsFilter.vue

@@ -12,10 +12,6 @@ const props = defineProps({
         required: true,
     },
 });
-
-function isValidNumber(value) {
-    return /^(\d|\d+(\.|,)?\d+)$/.test(value);
-}
 </script>
 
 <template>

src/pages/InvoiceIn/Card/InvoiceInDueDay.vue

@@ -158,7 +158,12 @@ async function insert() {
                 </template>
                 <template #body-cell-amount="{ row }">
                     <QTd>
-                        <QInput v-model="row.amount" clearable clear-icon="close" />
+                        <QInput
+                            v-model="row.amount"
+                            type="number"
+                            clearable
+                            clear-icon="close"
+                        />
                     </QTd>
                 </template>
                 <template #body-cell-foreignvalue="{ row }">

src/pages/InvoiceIn/InvoiceInFilter.vue

@@ -8,6 +8,7 @@ import FetchData from 'components/FetchData.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import { useCapitalize } from 'src/composables/useCapitalize';
+import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -137,16 +138,7 @@ const suppliersRef = ref();
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnInput
-                        :label="t('Amount')"
-                        v-model="params.amount"
-                        is-outlined
-                        lazy-rules
-                    >
-                        <template #prepend>
-                            <QIcon name="euro" size="sm"></QIcon>
-                        </template>
-                    </VnInput>
+                    <VnCurrency v-model="params.amount" />
                 </QItemSection>
             </QItem>
             <QItem class="q-mb-md">

src/pages/InvoiceOut/InvoiceOutFilter.vue

@@ -6,6 +6,7 @@ import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -57,7 +58,12 @@ function setWorkers(data) {
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnInput :label="t('Amount')" v-model="params.amount" is-outlined />
+                    <VnCurrency
+                        :label="t('Amount')"
+                        v-model="params.amount"
+                        is-outlined
+                        :icon="false"
+                    />
                 </QItemSection>
             </QItem>
             <QItem>

src/pages/InvoiceOut/InvoiceOutNegativeBasesFilter.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import VnCurrency from 'src/components/common/VnCurrency.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -84,10 +85,10 @@ const props = defineProps({
             </QItem>
             <QItem>
                 <QItemSection>
-                    <VnInput
+                    <VnCurrency
                         v-model="params.amount"
                         :label="t('invoiceOut.negativeBases.amount')"
-                        is-outlined
+                        :icon="false"
                     />
                 </QItemSection>
             </QItem>