refact: rewrite all views to script setup syntax

src/components/Button.vue

@@ -1,6 +1,6 @@
 <template>
   <ion-button
-    class="d-flex align-items-center justify-content-center ion-activatable ripple-parent"
+    class="btn ion-activatable ripple-parent"
     :color="color"
     :expand="expand"
     :size="size"
@@ -37,7 +37,7 @@ import {
   IonSpinner,
   IonRippleEffect,
 } from "@ionic/vue";
-import { defineProps, computed } from "vue";
+import { defineProps, computed, toRefs } from "vue";
 import { useRouter } from "vue-router";
 
 const props = defineProps({
@@ -86,6 +86,7 @@ const props = defineProps({
     default: "solid",
   },
   to: {
+    type: [String, Object],
     required: false,
   },
   download: {
@@ -98,15 +99,25 @@ const props = defineProps({
   },
 });
 
+const { icon, iosIcon, mdIcon, to } = toRefs(props);
+
 const hasIcon = computed(() => {
-  return props.icon || props.iosIcon || props.mdIcon;
+  return icon.value || iosIcon.value || mdIcon.value;
 });
 
 const router = useRouter();
 
 function redirectToRoute() {
-  if (!this.to) return;
+  if (!to.value) return;
 
-  router.push(this.to);
+  router.push(to.value);
 }
 </script>
+
+<style scoped>
+.btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/components/Menu.vue

@@ -84,14 +84,16 @@ import {
   IonTitle,
 } from "@ionic/vue";
 
-import { onBeforeUnmount, onMounted, ref,computed } from "vue";
+import { onBeforeUnmount, onMounted, ref, computed } from "vue";
 
 import { useRouter } from "vue-router";
 
 import { Storage } from "@capacitor/storage";
 import { useMenuStore } from "../store/menu";
 import { useUserStore } from "../store/user";
+import useEmitter from "../composition/useEmitter";
 
+const { emitter } = useEmitter();
 const menuStore = useMenuStore();
 const userStore = useUserStore();
 
@@ -122,7 +124,7 @@ const Icon = ref({
 const appPages = ref([]);
 
 onMounted(() => {
-  this.emitter.on("logged", async () => {
+  emitter.on("logged", async () => {
     await mountMenu();
     fillUserName();
   });
@@ -146,12 +148,12 @@ async function mountMenu() {
   let userType = await getUserType;
   userType = await getUserType;
 
-  const userMenuItems = await getMenuByUserType(userType);
+  const userMenuItems = await getMenuByUserType.value(userType.value);
 
   appPages.value = [
     ...(isLoggedIn.value && userMenuItems ? userMenuItems : []),
-    ...(isLoggedIn.value ? getNeedAuth : getWithoutAuth),
-    ...getPublic,
+    ...(isLoggedIn.value ? getNeedAuth.value : getWithoutAuth.value),
+    ...getPublic.value,
   ];
 }
 function redirect(index, menuItem) {
@@ -169,7 +171,10 @@ function redirect(index, menuItem) {
 }
 
 async function fillUserName() {
-  const name = await getUserName;
+  const name = await getUserName.value;
+
+  if (!name) return;
+
   userName.value = name.split(" ")[0] || "";
 }
 </script>

src/components/inputs/File.vue

@@ -21,15 +21,15 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits } from "vue";
+import { defineProps, defineEmits, ref } from "vue";
 import { IonInput } from "@ionic/vue";
 import { document as documentIcon } from "ionicons/icons";
 
 import usePhotoGallery from "@/composition/usePhotoGallery";
 
 import Button from "../Button.vue";
 
-defineEmits(["files"]);
+const emit = defineEmits(["files"]);
 
 defineProps({
   openCamera: {
@@ -66,21 +66,22 @@ defineProps({
 });
 
 const { takePhoto } = usePhotoGallery();
+const fileInput = ref(null);
 
 function getFiles() {
-  const fileInput = this.$refs.fileInput.$el.getElementsByTagName("input")[0];
-  fileInput.click();
+  const fileSelect = fileInput.value.$el.getElementsByTagName("input")[0];
+  fileSelect.click();
 }
 
 async function getFilesByCamera() {
   const result = await takePhoto();
   const file = dataUriToBlob(result);
 
-  this.$emit("files", [file] || []);
+  emit("files", [file] || []);
 }
 
 function filesChange(event) {
-  this.$emit("files", event.target.files || []);
+  emit("files", event.target.files || []);
 }
 
 function dataUriToBlob(dataURI) {

src/components/inputs/SelectExample.vue

@@ -1,17 +1,17 @@
 <template>
-  <ion-item class="d-flex align-items-center justify-content-between">
-    <ion-label>{{ label }}</ion-label>
+  <ion-item class="container">
     <ion-select
-      v-model="Fields.value"
+      v-model="fields.value"
+      :label="label"
       :ok-text="okText"
       :cancel-text="cancelText"
       :placeholder="placeholder"
       :multiple="multiple"
       :disabled="disabled"
       @ionChange="
         () => {
-          $emit('update:modelValue', Fields.value);
-          Errors.value = null;
+          emit('update:modelValue', fields.value);
+          errors.value = null;
         }
       "
     >
@@ -33,17 +33,17 @@
       @click="cleanSelect()"
     />
   </ion-item>
-  <error-message class="mt-1" :text="Errors.value" />
+  <error-message class="mt-1" :text="errors.value" />
 </template>
 
 <script setup>
 import { close } from "ionicons/icons";
-import { IonLabel, IonSelect, IonSelectOption, IonItem } from "@ionic/vue";
+import { IonSelect, IonSelectOption, IonItem } from "@ionic/vue";
 import { onMounted, ref, defineProps, defineEmits, toRefs, watch } from "vue";
 
 import Button from "../Button.vue";
 
-defineEmits(["update:modelValue"]);
+const emit = defineEmits(["update:modelValue"]);
 
 const props = defineProps({
   okText: {
@@ -84,26 +84,35 @@ const list = ref([
   { code: 2, name: "Item B" },
 ]);
 
-const Fields = ref({
-  value: "",
+const fields = ref({
+  value: {},
 });
 
-const Errors = ref({
+const errors = ref({
   value: null,
 });
 
-const { modelValue, errorMessage } = toRefs(props);
+const { modelValue } = toRefs(props);
 
 watch(modelValue, (value) => {
-  Fields.value = value;
+  fields.value = value || {};
 });
 
 function cleanSelect() {
-  Fields.value = null;
-  this.$emit("update:modelValue", Fields.value);
-  Errors.value = null;
+  fields.value.value = null;
+  emit("update:modelValue", fields.value);
+  errors.value.value = null;
 }
+
 onMounted(() => {
-  Fields.value = modelValue.value;
+  fields.value = modelValue.value || {};
 });
 </script>
+
+<style scoped>
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+</style>

src/composition/login.js

@@ -1,18 +1,19 @@
+import { useLoginStore } from "../store/login";
 import redirectToHome from "./redirectToHome";
 import useToast from "./useToast";
 
 export default function () {
   const { openToast } = useToast();
   const { redirectTo } = redirectToHome();
+  const loginStore = useLoginStore();
 
   async function userLogin(userCredentials) {
     const data = {
       email: userCredentials.email,
       password: userCredentials.password,
     };
 
-    return this.$store
-      .dispatch("login/login", data)
+    loginStore.login(data)
       .then((response) => {
         openToast("Logged with sucess", "success", "top");
 

src/composition/useEmitter.js

@@ -0,0 +1,9 @@
+import mitt from "mitt";
+
+export default function () {
+  const emitter = mitt();
+
+  return {
+    emitter,
+  };
+}

src/main.js

@@ -2,7 +2,6 @@ import { createApp } from "vue";
 import { createPinia } from 'pinia'
 import { IonicVue } from "@ionic/vue";
 import { Storage } from "@capacitor/storage";
-import mitt from "mitt";
 import { defineCustomElements } from "@ionic/pwa-elements/loader";
 
 import App from "./App.vue";
@@ -35,17 +34,17 @@ import "./theme/index.css";
 
 router.beforeEach(async (to, from, next) => {
   const user = await Storage.get({ key: "user" });
-  let lUserId = 0;
-  let lUserType = 0;
+  let _userId = 0;
+  let _userType = 0;
 
   if (user.value) {
     const { userId, userType } = JSON.parse(user.value);
-    lUserId = userId;
-    lUserType = userType;
+    _userId = userId;
+    _userType = userType;
   }
 
   if (["login", "home", "register"].includes(to.name) && user.value) {
-    next({ name: redirectToHome().routes[lUserType] });
+    next({ name: redirectToHome().routes[_userType] });
     return;
   }
 
@@ -59,20 +58,20 @@ router.beforeEach(async (to, from, next) => {
     return;
   }
 
-  if (!lUserId || !lUserType) {
+  if (!_userId || !_userType) {
     next({ name: "logout" });
     return;
   }
 
-  to.matched.some((route) => {
+  to.matched.forEach((route) => {
     if (typeof route.meta.userType === "object") {
-      if (!route.meta.userType.some((type) => type === lUserType)) {
+      if (!route.meta.userType.some((type) => type === _userType)) {
         next({ name: "not-authorized" });
         return;
       }
     }
 
-    if (!route.meta.userType === lUserType) {
+    if (!route.meta.userType === _userType) {
       next({ name: "not-authorized" });
       return;
     }
@@ -87,8 +86,6 @@ const app = createApp(App)
   .use(router)
   .use(pinia);
 
-app.config.globalProperties.emitter = mitt();
-
 app.component("BaseLayout", BaseLayout);
 app.component("ErrorMessage", ErrorMessage);
 app.component("Loading", Loading);