feat: add indicador de obrigatoriedade nos campos que tem rules.required + add use submit handler com use form update tracker e use scroll nos formularios

src/boot/defaultPropsComponents.js

@@ -1,5 +1,6 @@
 import { QDialog, QInput, QSelect, QScrollArea, QCard } from "quasar";
 import { defineBoot } from "#q-app/wrappers";
+import DefaultForm from "src/components/defaults/DefaultForm.vue";
 
 /**
  * Set some default properties on a component
@@ -14,7 +15,8 @@ const SetComponentDefaults = (component, defaults) => {
   });
 };
 
-export default defineBoot(() => {
+export default defineBoot(({ app }) => {
+  app.component("DefaultForm", DefaultForm);
   SetComponentDefaults(QDialog, {
     transitionShow: "slide-up",
     transitionHide: "slide-down",

src/components/defaults/DefaultForm.vue

@@ -0,0 +1,23 @@
+<template>
+  <q-form ref="formRef" v-bind="$attrs" @validation-error="onValidationError">
+    <slot />
+  </q-form>
+</template>
+
+<script setup>
+import { useTemplateRef } from "vue";
+import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";
+
+defineOptions({ inheritAttrs: false });
+
+const formRef = useTemplateRef("formRef");
+const { onValidationError } = useFormUpdateTracker({});
+
+const validate = (...args) => formRef.value?.validate(...args);
+const resetValidation = (...args) => formRef.value?.resetValidation(...args);
+const getValidationComponents = (...args) =>
+  formRef.value?.getValidationComponents(...args);
+const submit = (...args) => formRef.value?.submit(...args);
+
+defineExpose({ validate, resetValidation, getValidationComponents, submit });
+</script>

src/components/defaults/DefaultInput.vue

@@ -7,7 +7,7 @@
         v-bind="inputAttrs"
         hide-bottom-space
         :bg-color="bgColor"
-        :class="inputClass"
+        :class="[inputClass, { 'required-field': required }]"
         :color
         :error="!!error || !!errorMessageProp"
         :error-message="errorMessage"
@@ -148,4 +148,9 @@ defineExpose({
 :deep(.q-field--outlined.q-field--rounded .q-field__control) {
   border-radius: 8px;
 }
+
+:deep(.required-field .q-field__label::after) {
+  color: var(--q-negative);
+  content: " *";
+}
 </style>

src/components/defaults/DefaultSelect.vue

@@ -13,7 +13,7 @@
         :outlined
         hide-bottom-space
         :bg-color
-        :class="inputClass"
+        :class="[inputClass, { 'required-field': required }]"
         :popup-content-class="popupContentClass"
         hide-dropdown-icon
         @update:model-value="error = null"
@@ -112,3 +112,10 @@ defineExpose({
   selectRef,
 });
 </script>
+
+<style scoped>
+:deep(.required-field .q-field__label::after) {
+  color: var(--q-negative);
+  content: " *";
+}
+</style>

src/components/financial/AddAccountReceivableDialog.vue

@@ -3,7 +3,7 @@
     <q-card class="q-dialog-plugin overflow-hidden" style="width: 520px; max-width: 90vw">
       <DefaultDialogHeader title="Nova conta a receber" @close="onDialogCancel" />
 
-      <q-form ref="formRef" @submit.prevent="onSubmit">
+      <DefaultForm ref="formRef" @submit.prevent="onSubmit">
         <q-card-section class="row q-col-gutter-md q-pt-none">
           <DefaultInput
             v-model="form.history"
@@ -74,7 +74,7 @@
           <q-btn outline label="Cancelar" color="negative" no-caps @click="onDialogCancel" />
           <q-btn color="primary" label="Salvar" type="submit" no-caps unelevated :loading="loading" />
         </q-card-actions>
-      </q-form>
+      </DefaultForm>
     </q-card>
   </q-dialog>
 </template>

src/components/financial/AddCompanyPayableDialog.vue

@@ -3,7 +3,7 @@
     <q-card class="q-dialog-plugin overflow-hidden" style="width: 500px; max-width: 90vw">
       <DefaultDialogHeader title="Nova conta a pagar" @close="onDialogCancel" />
 
-      <q-form ref="formRef" @submit.prevent="onSubmit">
+      <DefaultForm ref="formRef" @submit.prevent="onSubmit">
         <q-card-section class="row q-col-gutter-md q-pt-none">
           <DefaultInput
             v-model="form.history"
@@ -62,7 +62,7 @@
             :loading="loading"
           />
         </q-card-actions>
-      </q-form>
+      </DefaultForm>
     </q-card>
   </q-dialog>
 </template>

src/components/financial/AddEditTreasuryAccountDialog.vue

@@ -2,7 +2,7 @@
   <q-dialog ref="dialogRef" @hide="onDialogHide">
     <q-card class="q-dialog-plugin overflow-hidden" style="width: 600px; max-width: 90vw">
       <DefaultDialogHeader :title="title" @close="onDialogCancel" />
-      <q-form ref="formRef" @submit="onOKClick">
+      <DefaultForm ref="formRef" @submit="onOKClick">
         <q-card-section class="row q-col-gutter-sm q-pt-none">
           <DefaultInput
             v-model="form.name"
@@ -60,7 +60,7 @@
             :loading="loading"
           />
         </q-card-actions>
-      </q-form>
+      </DefaultForm>
     </q-card>
   </q-dialog>
 </template>

src/components/financial/AddFinancialPlanAccountDialog.vue

@@ -2,7 +2,7 @@
   <q-dialog ref="dialogRef" @hide="onDialogHide">
     <q-card class="q-dialog-plugin overflow-hidden" style="width: 520px; max-width: 90vw">
       <DefaultDialogHeader title="Nova Conta" @close="onDialogCancel" />
-      <q-form ref="formRef" @submit="onOKClick">
+      <DefaultForm ref="formRef" @submit="onOKClick">
         <q-card-section class="q-pt-none">
           <!-- Tipo: conta pai (raiz) ou conta filha (vinculada a um pai) -->
           <q-option-group
@@ -71,7 +71,7 @@
           <q-btn outline color="negative" label="Cancelar" @click="onDialogCancel" />
           <q-btn color="primary" label="Salvar" type="submit" :loading="loading" />
         </q-card-actions>
-      </q-form>
+      </DefaultForm>
     </q-card>
   </q-dialog>
 </template>

src/components/financial/AddTreasuryLaunchDialog.vue

@@ -2,7 +2,7 @@
   <q-dialog ref="dialogRef" @hide="onDialogHide">
     <q-card class="q-dialog-plugin overflow-hidden" style="width: 520px; max-width: 90vw">
       <DefaultDialogHeader :title="title" @close="onDialogCancel" />
-      <q-form ref="formRef" @submit="onOKClick">
+      <DefaultForm ref="formRef" @submit="onOKClick">
         <q-card-section class="row q-col-gutter-sm q-pt-none">
           <DefaultSelect
             v-model="form.transaction_type"
@@ -52,7 +52,7 @@
           <q-btn outline color="negative" label="Cancelar" @click="onDialogCancel" />
           <q-btn color="primary" label="Salvar" type="submit" :loading="loading" />
         </q-card-actions>
-      </q-form>
+      </DefaultForm>
     </q-card>
   </q-dialog>
 </template>

src/components/financial/FinancialAuthDialog.vue

@@ -7,7 +7,7 @@
         <div class="text-caption text-grey-6 q-mb-sm">
           Confirme sua senha para acessar o módulo Financeiro.
         </div>
-        <q-form @submit.prevent="onConfirm">
+        <DefaultForm @submit.prevent="onConfirm">
           <q-input
             ref="passwordInput"
             v-model="password"
@@ -24,7 +24,7 @@
               <q-icon name="mdi-lock-outline" />
             </template>
           </q-input>
-        </q-form>
+        </DefaultForm>
       </q-card-section>
 
       <q-card-actions align="right">

src/components/financial/SettleAccountReceivableDialog.vue

@@ -2,7 +2,7 @@
   <q-dialog ref="dialogRef" @hide="onDialogHide">
     <q-card class="q-dialog-plugin overflow-hidden" style="width: 420px; max-width: 90vw">
       <DefaultDialogHeader title="Marcar como pago" @close="onDialogCancel" />
-      <q-form ref="formRef" @submit.prevent="onSubmit">
+      <DefaultForm ref="formRef" @submit.prevent="onSubmit">
         <q-card-section class="q-pt-none">
           <div class="text-body2 q-mb-md">{{ receivable.history }}</div>
           <DefaultInputDatePicker
@@ -18,7 +18,7 @@
           <q-btn outline color="negative" label="Cancelar" no-caps @click="onDialogCancel" />
           <q-btn color="primary" label="Confirmar" type="submit" no-caps :loading="loading" />
         </q-card-actions>
-      </q-form>
+      </DefaultForm>
     </q-card>
   </q-dialog>
 </template>

src/components/financial/SettleCompanyPayableDialog.vue

@@ -3,7 +3,7 @@
     <q-card class="q-dialog-plugin overflow-hidden" style="width: 460px; max-width: 90vw">
       <DefaultDialogHeader title="Dar baixa" @close="onDialogCancel" />
 
-      <q-form ref="formRef" @submit.prevent="onSubmit">
+      <DefaultForm ref="formRef" @submit.prevent="onSubmit">
         <q-card-section class="row q-col-gutter-md q-pt-none">
           <div class="col-12 text-body2 text-grey-8">{{ payable.history }}</div>
 
@@ -45,7 +45,7 @@
             :loading="loading"
           />
         </q-card-actions>
-      </q-form>
+      </DefaultForm>
     </q-card>
   </q-dialog>
 </template>

src/composables/useFormUpdateTracker.js

@@ -1,8 +1,10 @@
-import { reactive, computed, toRaw, isReactive, watch } from "vue";
+import { reactive, computed, toRaw, isReactive, nextTick, watch } from "vue";
 import isEqual from "fast-deep-equal";
+import { useScroll } from "src/composables/useScroll";
 
-export const useFormUpdateTracker = (initialFormValue) => {
+export const useFormUpdateTracker = (initialFormValue, options = {}) => {
   const form = reactive(deepClone(initialFormValue));
+  const { scrollToComponent } = useScroll();
   let originalForm = deepClone(initialFormValue);
   const updatedFields = reactive({});
 
@@ -50,6 +52,13 @@ export const useFormUpdateTracker = (initialFormValue) => {
     return formData;
   };
 
+  const onValidationError = async (invalidComponent) => {
+    if (!invalidComponent) return;
+    await nextTick();
+    invalidComponent.focus?.();
+    scrollToComponent(invalidComponent, options.containerRef);
+  };
+
   return {
     form,
     getUpdatedFields,
@@ -58,6 +67,7 @@ export const useFormUpdateTracker = (initialFormValue) => {
     setUpdateFormAsOriginal,
     getFormAsFormData,
     getUpdatedFieldsAsFormData,
+    onValidationError,
   };
 };
 

src/composables/useScroll.js

@@ -16,10 +16,13 @@ export const useScroll = () => {
     const { offset = 150, duration = 150 } = options;
 
     const targetInstance = unref(targetRef);
-    const containerInstance = unref(containerRef);
+    const providedContainer = unref(containerRef);
 
     const targetElement = targetInstance?.$el ?? targetInstance;
-
+    const detectedContainer = targetElement?.closest?.(
+      ".q-scrollarea__container, .scroll, .scroll-y",
+    );
+    const containerInstance = providedContainer ?? detectedContainer ?? document.body;
     const containerElement = containerInstance?.$el ?? containerInstance;
 
     if (!targetElement || !containerElement) {
@@ -61,7 +64,10 @@ export const useScroll = () => {
         );
       } else {
         const scrollable =
-          containerElement === document.body ? window : containerElement;
+          containerElement === document.body ||
+          containerElement === document.documentElement
+            ? window
+            : containerElement;
         scrollable.scrollTo({
           top: targetPosition,
           behavior: "smooth",

src/css/app.scss

@@ -2,6 +2,11 @@
 @use "src/css/quasar.variables.scss";
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap');
 
+.required-field .q-field__label::after {
+  color: var(--q-negative);
+  content: " *";
+}
+
 body {
   font-family: "Inter", sans-serif;
 }
@@ -133,4 +138,4 @@ input[type="number"]::-webkit-outer-spin-button {
 .q-field--standout.q-field--highlighted .q-field__control {
   box-shadow: none;
   border-radius: 8px;
-}
+}

src/pages/cadastros/components/AddEditGroupDialog.vue

@@ -7,7 +7,7 @@
           @close="onDialogCancel"
         />
 
-        <q-form ref="formRef" @submit="onOKClick">
+        <DefaultForm ref="formRef" @submit="onOKClick">
           <q-card-section class="q-pt-sm column q-gutter-y-sm">
             <DefaultInput
               v-model="form.name"
@@ -49,7 +49,7 @@
               :loading="loading"
             />
           </q-card-actions>
-        </q-form>
+        </DefaultForm>
       </q-card>
     </div>
   </q-dialog>

src/pages/financial/AsaasIntegrationPage.vue

@@ -22,7 +22,7 @@
           padrão do ambiente.
         </div>
 
-        <q-form ref="formRef">
+        <DefaultForm ref="formRef">
           <DefaultPasswordInput
             v-model="apiKey"
             v-model:error="validationErrors.asaas_api_key"
@@ -54,7 +54,7 @@
               @click="onSave"
             />
           </div>
-        </q-form>
+        </DefaultForm>
       </q-card>
     </div>
   </div>

src/pages/forgot-password/EmailDataStep.vue

@@ -18,7 +18,7 @@
       Informe o seu e-mail para redefinir sua senha
     </div>
 
-    <q-form class="full-width q-px-lg column q-gutter-y-lg q-mt-xs" @submit.prevent="emit('submit', email)">
+    <DefaultForm class="full-width q-px-lg column q-gutter-y-lg q-mt-xs" @submit.prevent="emit('submit', email)">
       <DefaultInput
         v-model="email"
         type="email"
@@ -45,7 +45,7 @@
           </template>
         </q-btn>
       </div>
-    </q-form>
+    </DefaultForm>
   </div>
 </template>
 

src/pages/forgot-password/NewPasswordStep.vue

@@ -18,7 +18,7 @@
       <div class="bg-primary" style="height: 1px; flex: 1"></div>
     </div>
 
-    <q-form
+    <DefaultForm
       class="full-width q-px-lg column q-gutter-y-md q-mt-md"
       @submit.prevent="emit('submit', { password, passwordConfirmation })"
     >
@@ -49,7 +49,7 @@
           <q-spinner />
         </template>
       </q-btn>
-    </q-form>
+    </DefaultForm>
   </div>
 </template>
 

src/pages/kanban/components/AddEditKanbanDialog.vue

@@ -7,7 +7,7 @@
           @close="onDialogCancel"
         />
 
-        <q-form
+        <DefaultForm
           ref="formRef"
           style="flex: 1; display: flex; flex-direction: column; overflow: hidden"
           @submit="onOKClick"
@@ -189,7 +189,7 @@
             <q-btn outline color="primary" label="Cancelar" @click="onDialogCancel" />
             <q-btn v-if="card?.id ? canEdit : canAdd" color="primary" label="Salvar" type="submit" :loading="loading" />
           </q-card-actions>
-        </q-form>
+        </DefaultForm>
       </q-card>
     </div>
   </q-dialog>

src/pages/login/LoginPage.vue

@@ -30,7 +30,7 @@
         </div>
       </div>
 
-      <q-form
+      <DefaultForm
         ref="formRef"
         class="full-width q-px-lg column q-gutter-y-md q-mt-xs"
         autocorrect="off"
@@ -78,7 +78,7 @@
             </template>
           </q-btn>
         </div>
-      </q-form>
+      </DefaultForm>
     </div>
   </q-page>
 </template>

src/pages/packages/components/AddEditPackageDialog.vue

@@ -7,7 +7,7 @@
           @close="onDialogCancel"
         />
 
-        <q-form ref="formRef" @submit="onOKClick">
+        <DefaultForm ref="formRef" @submit="onOKClick">
           <q-card-section class="q-pt-sm">
             <CustomTabComponent
               v-model:active-tab="currentTab"
@@ -451,7 +451,7 @@
               :loading="loading"
             />
           </q-card-actions>
-        </q-form>
+        </DefaultForm>
       </q-card>
     </div>
   </q-dialog>

src/pages/permissions/components/AddEditPermissionGroupDialog.vue

@@ -3,7 +3,7 @@
     <q-card style="min-width: 440px">
       <DefaultDialogHeader :title="dialogTitle" @close="onDialogCancel" />
 
-      <q-form ref="formRef" @submit="onSave">
+      <DefaultForm ref="formRef" @submit="onSave">
         <q-card-section class="column q-gutter-md">
           <DefaultInput
             v-model="form.label"
@@ -38,7 +38,7 @@
             :loading="loading"
           />
         </q-card-actions>
-      </q-form>
+      </DefaultForm>
     </q-card>
   </q-dialog>
 </template>

src/pages/products/components/AddEditProductDialog.vue

@@ -7,7 +7,7 @@
           @close="onDialogCancel"
         />
 
-        <q-form ref="formRef" @submit="onOKClick">
+        <DefaultForm ref="formRef" @submit="onOKClick">
           <q-card-section class="q-pt-sm">
             <div class="text-h6 q-mb-sm">Produto</div>
 
@@ -64,7 +64,7 @@
               :loading="loading"
             />
           </q-card-actions>
-        </q-form>
+        </DefaultForm>
       </q-card>
     </div>
   </q-dialog>

src/pages/products/components/AddEditStockProductDialog.vue

@@ -4,7 +4,7 @@
       <q-card class="overflow-hidden" style="width: 100%">
         <DefaultDialogHeader title="Ajustar Estoque" @close="onDialogCancel" />
 
-        <q-form @submit="onOKClick">
+        <DefaultForm @submit="onOKClick">
           <q-card-section class="q-pt-sm">
             <div class="text-h6 q-mb-sm">Produto</div>
 
@@ -87,7 +87,7 @@
               :loading="loading"
             />
           </q-card-actions>
-        </q-form>
+        </DefaultForm>
       </q-card>
     </div>
   </q-dialog>

src/pages/products/components/AddProductDialog.vue

@@ -4,7 +4,7 @@
       <q-card class="overflow-hidden" style="width: 100%">
         <DefaultDialogHeader title="Novo Produto" @close="onDialogCancel" />
 
-        <q-form ref="formRef" @submit="onOKClick">
+        <DefaultForm ref="formRef" @submit="onOKClick">
           <q-card-section class="q-pt-sm">
             <div class="text-h6 q-mb-sm">Produto</div>
 
@@ -61,7 +61,7 @@
               :loading="loading"
             />
           </q-card-actions>
-        </q-form>
+        </DefaultForm>
       </q-card>
     </div>
   </q-dialog>

src/pages/support/components/AddEditReplyDialog.vue

@@ -7,7 +7,7 @@
           @close="onDialogCancel"
         />
 
-        <q-form ref="formRef" @submit="onOKClick">
+        <DefaultForm ref="formRef" @submit="onOKClick">
           <q-card-section class="q-pt-sm">
             <DefaultInput
               v-model="replyText"
@@ -31,7 +31,7 @@
               :loading="loading"
             />
           </q-card-actions>
-        </q-form>
+        </DefaultForm>
       </q-card>
     </div>
   </q-dialog>

src/pages/support/components/AddEditTicketDialog.vue

@@ -7,7 +7,7 @@
           @close="onDialogCancel"
         />
 
-        <q-form
+        <DefaultForm
           ref="formRef"
           style="
             flex: 1;
@@ -149,7 +149,7 @@
               :loading="loading"
             />
           </q-card-actions>
-        </q-form>
+        </DefaultForm>
       </q-card>
     </div>
   </q-dialog>

src/pages/support/components/AddReplyDialog.vue

@@ -4,7 +4,7 @@
       <q-card class="overflow-hidden" style="width: 100%">
         <DefaultDialogHeader title="Responder Suporte" @close="onDialogCancel" />
 
-        <q-form ref="formRef" @submit="onOKClick">
+        <DefaultForm ref="formRef" @submit="onOKClick">
           <q-card-section class="q-pt-sm">
             <DefaultInput
               v-model="reply"
@@ -28,7 +28,7 @@
               :loading="loading"
             />
           </q-card-actions>
-        </q-form>
+        </DefaultForm>
       </q-card>
     </div>
   </q-dialog>

src/pages/tbr/components/AddEditInhabitantClassificationDialog.vue

@@ -9,7 +9,7 @@
         @close="onDialogCancel"
       />
 
-      <q-form ref="formRef" @submit="onOKClick">
+      <DefaultForm ref="formRef" @submit="onOKClick">
         <q-card-section class="row q-col-gutter-sm q-pt-none">
           <DefaultInput
             v-model="form.description"
@@ -76,7 +76,7 @@
             :loading="loading"
           />
         </q-card-actions>
-      </q-form>
+      </DefaultForm>
     </q-card>
   </q-dialog>
 </template>

src/pages/tbr/components/AddEditTbrDialog.vue

@@ -9,7 +9,7 @@
         @close="onDialogCancel"
       />
 
-      <q-form ref="formRef" @submit="onOKClick">
+      <DefaultForm ref="formRef" @submit="onOKClick">
         <q-card-section class="q-pt-none">
           <p class="text-subtitle2 q-mb-md">Definir Valores e TBR</p>
 
@@ -82,7 +82,7 @@
             :loading="loading"
           />
         </q-card-actions>
-      </q-form>
+      </DefaultForm>
     </q-card>
   </q-dialog>
 </template>

src/pages/tbr/components/GenerateBillingsDialog.vue

@@ -3,7 +3,7 @@
     <q-card class="q-dialog-plugin overflow-hidden" style="width: 100%; max-width: 400px">
       <DefaultDialogHeader title="Mês de Cobrança" @close="onDialogCancel" />
 
-      <q-form ref="formRef" @submit="onGenerate">
+      <DefaultForm ref="formRef" @submit="onGenerate">
         <q-card-section class="q-pt-none">
           <DefaultSelect
             v-model="month"
@@ -18,7 +18,7 @@
           <q-btn outline label="Cancelar" @click="onDialogCancel" />
           <q-btn color="primary-2" label="Gerar" type="submit" />
         </q-card-actions>
-      </q-form>
+      </DefaultForm>
     </q-card>
   </q-dialog>
 </template>

src/pages/unit/components/AddEditHistoryDialog.vue

@@ -6,7 +6,7 @@
         @close="onDialogCancel"
       />
 
-      <q-form ref="formRef" @submit="onOKClick">
+      <DefaultForm ref="formRef" @submit="onOKClick">
         <q-card-section class="q-pt-none">
           <div class="column q-gutter-sm">
             <DefaultInput
@@ -35,7 +35,7 @@
           <q-btn outline color="primary" label="Cancelar" @click="onDialogCancel" />
           <q-btn color="primary-2" :label="history ? 'Salvar' : 'Adicionar'" type="submit" :loading="loading" />
         </q-card-actions>
-      </q-form>
+      </DefaultForm>
     </q-card>
   </q-dialog>
 </template>

src/pages/unit/components/AddEditPartnerDialog.vue

@@ -9,7 +9,7 @@
         @close="onDialogCancel"
       />
 
-      <q-form ref="formRef" @submit="onOKClick">
+      <DefaultForm ref="formRef" @submit="onOKClick">
         <q-card-section class="q-pt-none">
           <div class="column items-center q-mb-md">
             <AvatarImageComponent
@@ -175,7 +175,7 @@
             :loading="loading"
           />
         </q-card-actions>
-      </q-form>
+      </DefaultForm>
     </q-card>
   </q-dialog>
 </template>

src/pages/unit/components/AddMediaDialog.vue

@@ -3,7 +3,7 @@
     <q-card class="q-dialog-plugin overflow-hidden" style="width: 480px; max-width: 95vw">
       <DefaultDialogHeader title="Adicionar Mídia" @close="onDialogCancel" />
 
-      <q-form ref="formRef" @submit="onOKClick">
+      <DefaultForm ref="formRef" @submit="onOKClick">
         <q-card-section class="q-pt-none">
           <div class="column q-gutter-sm">
             <DefaultInput
@@ -15,6 +15,7 @@
 
             <q-file
               v-model="selectedFile"
+              class="required-field"
               label="Arquivo"
               outlined
               accept="image/*,video/*,.pdf"
@@ -37,7 +38,7 @@
           <q-btn outline color="primary" label="Cancelar" @click="onDialogCancel" />
           <q-btn color="primary-2" label="Adicionar" type="submit" :loading="loading" />
         </q-card-actions>
-      </q-form>
+      </DefaultForm>
     </q-card>
   </q-dialog>
 </template>

src/pages/unit/tabs/UnitDataTab.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="q-pa-md">
-    <q-form ref="formRef">
+    <DefaultForm ref="formRef">
       <div class="column justify-center items-center q-mb-lg">
         <AvatarImageComponent ref="avatarRef" @update:file="onAvatarChange" />
 
@@ -158,7 +158,7 @@
           </div>
         </div>
       </div>
-    </q-form>
+    </DefaultForm>
   </div>
 </template>
 

src/pages/user_types/components/AddUserTypeDialog.vue

@@ -3,7 +3,7 @@
     <q-card style="min-width: 400px">
       <DefaultDialogHeader title="Novo Tipo de Usuário" @close="onDialogCancel" />
 
-      <q-form ref="formRef" @submit="onSave">
+      <DefaultForm ref="formRef" @submit="onSave">
         <q-card-section>
           <DefaultInput
             v-model="form.label"
@@ -28,7 +28,7 @@
             :loading="loading"
           />
         </q-card-actions>
-      </q-form>
+      </DefaultForm>
     </q-card>
   </q-dialog>
 </template>

src/pages/users/UserActionPage.vue

@@ -5,7 +5,7 @@
     />
 
     <div class="q-pa-md">
-      <q-form ref="formRef">
+      <DefaultForm ref="formRef">
         <div class="column justify-center items-center q-mb-lg">
           <AvatarImageComponent
             ref="avatarRef"
@@ -157,7 +157,7 @@
             />
           </div>
         </div>
-      </q-form>
+      </DefaultForm>
     </div>
   </div>
 </template>