fix: correct all warnings in devtools

Author: pferreirafabricio

.env

@@ -2,6 +2,6 @@ VUE_APP_TITLE="Dev - Ionic Vue Boilerplate"
 VUE_APP_PORT="8080"
 VUE_APP_API_URL="http://localhost:8000"
 VUE_APP_CURRENT_SITE_ADDRESS="http://localhost:${VUE_APP_PORT}"
-VUE_APP_IMAGES_ADDRESS="https://qa.api.boilerplate.com/medias"
+VUE_APP_IMAGES_ADDRESS="http://localhost:8080"
 VUE_APP_WHATS_TELEPHONE="+559999999999"
 VUE_APP_CONTACT_EMAIL="contact@boilerplate.com"

public/assets/icon/logo.png

@@ -12,6 +12,7 @@ import {
 } from '@ionic/vue';
 
 export default {
+  name: 'Divider',
   components: {
     IonCol,
     IonItem,

src/components/Divider.vue

@@ -8,6 +8,7 @@
 import { IonText } from '@ionic/vue';
 
 export default {
+  name: 'ErrorMessage',
   components: {
     IonText,
   },

src/components/ErrorMessage.vue

@@ -1,15 +1,15 @@
 <template>
   <ion-img
     :src="
-      !imageFailsToLoad && !!src
-        ? `${getImagesAddress}${src}`
-        : defaultImage
+      !imageFailsToLoad && !!src ? `${getImagesAddress}/${src}` : defaultImage
     "
     @ionError="imageFailsToLoad = true"
   />
 </template>
 
 <script>
+import { IonImg } from '@ionic/vue';
+
 import { ref } from '@vue/reactivity';
 import { mapGetters } from 'vuex';
 
@@ -19,7 +19,7 @@ export default {
     /** The image path or url */
     src: {
       type: String,
-      required: true,
+      required: false,
     },
   },
   computed: {
@@ -33,5 +33,8 @@ export default {
       defaultImage: 'assets/vectors/blank.svg',
     };
   },
+  components: {
+    IonImg,
+  },
 };
 </script>

src/components/Image.vue

@@ -33,10 +33,10 @@
               class="fs-16"
             ></ion-icon>
           </ion-item>
-          <span v-else-if="menuItem.type === 2 && (i !== appPages.length - 1)">
+          <span v-else-if="menuItem.type === 2 && (index !== appPages.length - 1)">
             <hr />
           </span>
-          <span v-else-if="menuItem.type === 'category' && (i !== appPages.length - 1)">
+          <span v-else-if="menuItem.type === 'category' && (index !== appPages.length - 1)">
             <ion-item>
               <h1 class="">
                 <b>{{ menuItem.title }}</b>
@@ -73,7 +73,6 @@ import {
   IonHeader,
   IonToolbar,
   IonTitle,
-  IonImg,
 } from '@ionic/vue';
 
 import { ref } from 'vue';
@@ -88,7 +87,6 @@ export default {
   components: {
     IonContent,
     IonIcon,
-    IonImg,
     IonItem,
     IonLabel,
     IonList,

src/components/Menu.vue

@@ -10,6 +10,7 @@
 import { IonImg, IonText } from '@ionic/vue';
 
 export default {
+  name: 'NoContent',
   components: {
     IonImg, IonText,
   },

src/components/NoContent.vue

@@ -42,6 +42,7 @@ import {
   IonBackButton,
   IonButtons,
   IonMenuButton,
+  IonText,
 } from '@ionic/vue';
 import { useRouter } from 'vue-router';
 
@@ -70,6 +71,7 @@ export default {
     },
   },
   components: {
+    IonText,
     IonPage,
     IonHeader,
     IonToolbar,

src/components/base/BaseLayout.vue

@@ -1,21 +1,23 @@
 <template>
-  <Button
-    :size="size"
-    :text="iconOnly ? '' : label"
-    :icon="icon"
-    :iconOnly="iconOnly"
-    :isLoading="loading"
-    @click="openCamera ? getFilesByCamera() : getFiles()"
-  />
-  <ion-input
-    hidden
-    class="d-none"
-    type="file"
-    ref="fileInput"
-    :multiple="multiple"
-    :accept="`${accept};capture=camera`"
-    @change="filesChange"
-  />
+  <div>
+    <Button
+      :size="size"
+      :text="iconOnly ? '' : label"
+      :icon="icon"
+      :iconOnly="iconOnly"
+      :isLoading="loading"
+      @click="openCamera ? getFilesByCamera() : getFiles()"
+    />
+    <ion-input
+      hidden
+      class="d-none"
+      type="file"
+      ref="fileInput"
+      :multiple="multiple"
+      :accept="`${accept};capture=camera`"
+      @change="filesChange"
+    />
+  </div>
 </template>
 
 <script>
@@ -75,7 +77,8 @@ export default {
   },
   methods: {
     getFiles() {
-      const fileInput = this.$refs.fileInput.$el.getElementsByTagName('input')[0];
+      const fileInput =
+        this.$refs.fileInput.$el.getElementsByTagName('input')[0];
       fileInput.click();
     },
     async getFilesByCamera() {
@@ -89,13 +92,15 @@ export default {
     },
     dataUriToBlob(dataURI) {
       const splitDataURI = dataURI.split(',');
-      const byteString = splitDataURI[0].indexOf('base64') >= 0
-        ? atob(splitDataURI[1])
-        : decodeURI(splitDataURI[1]);
+      const byteString =
+        splitDataURI[0].indexOf('base64') >= 0
+          ? atob(splitDataURI[1])
+          : decodeURI(splitDataURI[1]);
       const mimeString = splitDataURI[0].split(':')[1].split(';')[0];
 
       const ia = new Uint8Array(byteString.length);
-      for (let i = 0; i < byteString.length; i++) ia[i] = byteString.charCodeAt(i);
+      for (let i = 0; i < byteString.length; i++)
+        ia[i] = byteString.charCodeAt(i);
 
       return new Blob([ia], { type: mimeString });
     },

src/components/inputs/File.vue

@@ -10,7 +10,7 @@
       v-model="Fields.value"
       @ionChange="
         () => {
-          $emit('update:value', Fields.value);
+          $emit('update:modelValue', Fields.value);
           Errors.value = null;
         }
       "
@@ -49,7 +49,7 @@ import Button from '../Button.vue';
 
 export default {
   name: 'SelectExample',
-  emits: ['update:value'],
+  emits: ['update:modelValue'],
   components: {
     IonLabel,
     IonSelect,
@@ -66,7 +66,7 @@ export default {
       type: String,
       default: 'Cancel',
     },
-    value: {
+    modelValue: {
       required: true,
     },
     disabled: {
@@ -139,7 +139,7 @@ export default {
     },
     cleanSelect() {
       this.Fields.value = null;
-      this.$emit('update:value', this.Fields.value);
+      this.$emit('update:modelValue', this.Fields.value);
       this.Errors.value = null;
     },
   },