fix: :bug: some fixes

quasar.config.js

@@ -14,7 +14,7 @@ export default configure((ctx) => {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: ["i18n", "axios", "setPermissions"],
+    boot: ["i18n", "axios", "setPermissions", "defaultPropsComponents"],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
     css: ["app.scss"],

src/boot/defaultPropsComponents.js

@@ -0,0 +1,40 @@
+import { QDialog, QInput, QSelect, QScrollArea } from "quasar";
+import { boot } from "quasar/wrappers";
+
+/**
+ * Set some default properties on a component
+ */
+const SetComponentDefaults = (component, defaults) => {
+  Object.keys(defaults).forEach((prop) => {
+    component.props[prop] =
+      Array.isArray(component.props[prop]) === true ||
+      typeof component.props[prop] === "function"
+        ? { type: component.props[prop], default: defaults[prop] }
+        : { ...component.props[prop], default: defaults[prop] };
+  });
+};
+
+export default boot(() => {
+  SetComponentDefaults(QDialog, {
+    transitionShow: "slide-up",
+    transitionHide: "slide-down",
+  });
+  SetComponentDefaults(QInput, {
+    filled: false,
+    outlined: true,
+  });
+  SetComponentDefaults(QSelect, {
+    filled: false,
+    outlined: true,
+  });
+  SetComponentDefaults(QScrollArea, {
+    thumbStyle: {
+      borderRadius: "4px",
+      background: "#A6A6A6",
+      width: "6px",
+      opacity: 0.6,
+    },
+    verticalOffset: [4, 2],
+    horizontalOffset: [0, 2],
+  });
+});

src/components/PasswordField.vue

@@ -41,5 +41,7 @@
 
 <script setup>
 import { ref } from "vue";
+import { useInputRules } from "src/composables/useInputRules";
+const { inputRules } = useInputRules();
 const isPwd = ref(true);
 </script>

src/helpers/utils.js

@@ -1,37 +1,5 @@
 import { useI18n } from "vue-i18n";
 
-/**
- * Este é um arquivo que contem funções utilitárias.
- * Siga o padrão de descrição de funções.
- */
-
-/**
- * @description Regras de validação de inputs.
- */
-const inputRules = {
-  required: (value) => !!value || useI18n().t("rules.required"),
-  requiredNumber: (value) => !isNaN(value) || useI18n().t("rules.required"),
-  requiredHideMessage: (value) => !!value,
-  min: (value) => value.length >= 3 || useI18n().t("rules.min", { min: 3 }),
-  email: (value) => {
-    const pattern =
-      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-    if (!value || value == "") return true;
-    return pattern.test(value) || useI18n().t("rules.email");
-  },
-  emails: (value) => {
-    if (!value || value == "") return true;
-    const emails = value
-      .split(";")
-      .map((email) => email.trim())
-      .filter((email) => email);
-    return (
-      emails.every((email) => inputRules.email(email) == true) ||
-      useI18n().t("rules.email", 2)
-    );
-  },
-};
-
 /**
  * @description Corta uma string em um determinado tamanho.
  * @param {string} string string a ser cortada.
@@ -244,23 +212,7 @@ const formatCurrency = (value) => {
   return value;
 };
 
-/**
- * @description Verifica se os emails são válidos.
- * @param {string} data emails.
- *
- * @returns {boolean} true se os emails são válidos, false caso contrário.
- */
-const verificaEmails = (data = "") => {
-  if (!data || data == null || data == "") return false;
-  const emails = data
-    .split(";")
-    .map((email) => email.trim())
-    .filter((email) => email);
-  return emails.every((email) => inputRules.email(email) == true);
-};
-
 export {
-  inputRules,
   formatDateDMYtoYMD,
   formatDateYMDtoDMY,
   excerpt,
@@ -273,5 +225,4 @@ export {
   validaDataHora,
   formatQuantity,
   formatCurrency,
-  verificaEmails,
 };

src/layouts/MainLayout.vue

@@ -1,13 +1,20 @@
 <template>
   <q-layout class="relative" view="hHh lpR fFf">
-    <LeftMenuLayout
-      v-model="leftDrawerOpen"
-    />
+    <LeftMenuLayout v-model="leftDrawerOpen" />
 
     <q-page-container>
       <q-page>
-        <q-scroll-area style="height: 100vh !important">
-          <router-view />
+        <q-scroll-area
+          ref="scrollAreaRef"
+          style="
+            height: calc(100dvh - 50px - env(safe-area-inset-top)) !important;
+          "
+        >
+          <router-view v-slot="{ Component }">
+            <Transition>
+              <component :is="Component" />
+            </Transition>
+          </router-view>
         </q-scroll-area>
       </q-page>
     </q-page-container>
@@ -15,7 +22,8 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, useTemplateRef, watch } from "vue";
+import { useRoute } from "vue-router";
 import LeftMenuLayout from "src/components/geral/LeftMenuLayout.vue";
 
 defineOptions({
@@ -23,4 +31,36 @@ defineOptions({
 });
 
 const leftDrawerOpen = ref(false);
+const scrollAreaRef = useTemplateRef("scrollAreaRef");
+const route = useRoute();
+
+let oldValue = route.path;
+watch(route, (value) => {
+  if (oldValue.path != value.path) {
+    scrollAreaRef.value.setScrollPosition("vertical", 0, 250);
+    scrollAreaRef.value.setScrollPosition("horizontal", 0, 250);
+  }
+  oldValue = value.path;
+});
 </script>
+<style scoped>
+.v-enter-active {
+  opacity: 1;
+  transition: all 0.15s ease-in;
+}
+
+.v-leave-active {
+  opacity: 1;
+  transition: all 0.15s ease-out;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+  transition: all 0.15s ease-in;
+}
+
+.v-leave-to {
+  transition: all 0.15s ease-out;
+}
+</style>

src/pages/LoginPage.vue

@@ -26,6 +26,7 @@
             label="Email"
             lazy-rules
             autofocus
+            :rules="[inputRules.required, inputRules.email]"
           />
 
           <q-input
@@ -35,6 +36,7 @@
             :type="isPwd ? 'password' : 'text'"
             class="q-mt-xs"
             lazy-rules
+            :rules="[inputRules.required, inputRules.min(6)]"
           >
             <template #append>
               <q-icon
@@ -72,10 +74,12 @@ import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useAuth } from "src/composables/useAuth";
 import { useRouter } from "vue-router";
+import { useInputRules } from "src/composables/useInputRules";
 
 const router = useRouter();
 const $q = useQuasar();
 
+const { inputRules } = useInputRules();
 const email = ref("");
 const password = ref(process.env.PASSWORD);
 const isPwd = ref(true);

src/pages/users/components/AddEditUserDialog.vue

@@ -35,7 +35,7 @@
 </template>
 <script setup>
 import { ref } from "vue";
-import { inputRules } from "src/helpers/utils";
+import { useInputRules } from "src/composables/useInputRules";
 import { useDialogPluginComponent } from "quasar";
 import { useI18n } from "vue-i18n";
 
@@ -61,6 +61,8 @@ const props = defineProps({
 const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
   useDialogPluginComponent();
 
+const { inputRules } = useInputRules();
+
 const formRef = ref(null);
 
 const name = ref(props.user?.name || "");