perf: approach

src/components/FormModel.vue

@@ -22,7 +22,7 @@ const { t } = useI18n();
 const { validate } = useValidator();
 const { notify } = useNotify();
 const route = useRoute();
-
+const myForm = ref(null);
 const $props = defineProps({
     url: {
         type: String,
@@ -106,11 +106,14 @@ const defaultButtons = computed(() => ({
         color: 'primary',
         icon: 'save',
         label: 'globals.save',
+        click: () => myForm.value.submit(),
+        type: 'submit',
     },
     reset: {
         color: 'primary',
         icon: 'restart_alt',
         label: 'globals.reset',
+        click: () => reset(),
     },
     ...$props.defaultButtons,
 }));
@@ -262,6 +265,7 @@ defineExpose({
 <template>
     <div class="column items-center full-width">
         <QForm
+            ref="myForm"
             v-if="formData"
             @submit="save"
             @reset="reset"
@@ -290,7 +294,7 @@ defineExpose({
                     :color="defaultButtons.reset.color"
                     :icon="defaultButtons.reset.icon"
                     flat
-                    @click="reset"
+                    @click="defaultButtons.reset.click"
                     :disable="!hasChanges"
                     :title="t(defaultButtons.reset.label)"
                 />
@@ -330,7 +334,7 @@ defineExpose({
                     :label="tMobile('globals.save')"
                     color="primary"
                     icon="save"
-                    @click="save"
+                    @click="defaultButtons.save.click"
                     :disable="!hasChanges"
                     :title="t(defaultButtons.save.label)"
                 />

src/components/FormModelPopup.vue

@@ -68,6 +68,7 @@ defineExpose({
                 <QBtn
                     :label="t('globals.save')"
                     :title="t('globals.save')"
+                    @submit="() => formModelRef.save()"
                     type="submit"
                     color="primary"
                     class="q-ml-sm"

src/components/common/VnInput.vue

@@ -25,7 +25,6 @@ const $props = defineProps({
 });
 
 const { t } = useI18n();
-const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
 const vnInputRef = ref(null);
 const value = computed({
     get() {
@@ -63,11 +62,7 @@ const inputRules = [
 </script>
 
 <template>
-    <div
+    <div @mouseover="hover = true" @mouseleave="hover = false">
-        @mouseover="hover = true"
-        @mouseleave="hover = false"
-        :rules="$attrs.required ? [requiredFieldRule] : null"
-    >
         <QInput
             ref="vnInputRef"
             v-model="value"
@@ -76,7 +71,6 @@ const inputRules = [
             :class="{ required: $attrs.required }"
             @keyup.enter="emit('keyup.enter')"
             :clearable="false"
-            :rules="inputRules"
             :lazy-rules="true"
             hide-bottom-space
         >

src/components/common/VnSelect.vue

@@ -143,7 +143,6 @@ async function filterHandler(val, update) {
 watch(options, (newValue) => {
     setOptions(newValue);
 });
-
 watch(modelValue, (newValue) => {
     if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
         fetchFilter(newValue);
@@ -175,7 +174,6 @@ watch(modelValue, (newValue) => {
         ref="vnSelectRef"
         lazy-rules
         :class="{ required: $attrs.required }"
-        :rules="$attrs.required ? [requiredFieldRule] : null"
         virtual-scroll-slice-size="options.length"
     >
         <template v-if="isClearable" #append>

src/composables/useValidator.js

@@ -40,7 +40,7 @@ export function useValidator() {
                 if (!isValid) return message;
             },
             presence: (value) => {
-                let message = `Value can't be empty`;
+                let message = t(`globals.valueCantBeEmpty`);
                 if (validation.message)
                     message = t(validation.message) || validation.message;
 

src/i18n/locale/en.yml

@@ -74,7 +74,7 @@ globals:
     notificationSent: Notification sent
     warehouse: Warehouse
     company: Company
-    fieldRequired: Field required
+    fieldRequired: Field requdired
     allowedFilesText: 'Allowed file types: { allowedContentTypes }'
     smsSent: SMS sent
     confirmDeletion: Confirm deletion

src/i18n/locale/es.yml

@@ -75,6 +75,9 @@ globals:
     warehouse: Almacén
     company: Empresa
     fieldRequired: Campo requerido
+    valueCantBeEmpty: El valor no puede estar vacío
+    Value can't be blank: El valor no puede estar en blanco
+    Value can't be null: El valor no puede ser nulo
     allowedFilesText: 'Tipos de archivo permitidos: { allowedContentTypes }'
     smsSent: SMS enviado
     confirmDeletion: Confirmar eliminación