Uses list-header instead of toolbar. Better loading tags.

src/components/CollectionList.vue

@@ -1,19 +1,16 @@
 <template>
-    <ion-list>
-        <ion-item v-for="collection of collections" :key="collection.id" :router-link="`/collections/${collection.id}`">
-            <ion-thumbnail slot="start"> 
-                <ion-img v-if="collection.thumbnail.thumbnail[0]" :src="collection.thumbnail.thumbnail[0]" :alt="collection.name"></ion-img>
-                <ion-img v-else :src="image" :alt="collection.name"></ion-img>
-            </ion-thumbnail>
-            <ion-label> {{ collection.name }} </ion-label>
-        </ion-item>
-    </ion-list> 
+    <ion-item v-for="collection of collections" :key="collection.id" :router-link="`/collections/${collection.id}`">
+        <ion-thumbnail slot="start"> 
+            <ion-img v-if="collection.thumbnail.thumbnail[0]" :src="collection.thumbnail.thumbnail[0]" :alt="collection.name"></ion-img>
+            <ion-img v-else :src="image" :alt="collection.name"></ion-img>
+        </ion-thumbnail>
+        <ion-label> {{ collection.name }} </ion-label>
+    </ion-item>
 </template>
 
 <script lang="ts">
 
 import {
-    IonList,
     IonItem,
     IonImg,
     IonThumbnail,
@@ -25,7 +22,6 @@ export default {
         "collections"
     ],
     components: {
-        IonList,
         IonItem,
         IonImg,
         IonThumbnail,

src/components/ItemList.vue

@@ -1,8 +1,7 @@
 <template>
     <ion-loading
-    :is-open="isOpenRef"
-    cssClass="my-custom-class"
-    message="Carregando..."
+            :is-open="isLoading"
+            message="Carregando..."
     >
     </ion-loading>
     <ion-card v-for="item of collectionStore.items" :key="item.id">
@@ -36,10 +35,10 @@ export default {
         IonCardContent
     },
     setup() {
-        const isOpenRef = ref(false);
-        const setOpen = (state: boolean) => isOpenRef.value = state;
+        const isLoading = ref(false);
+        const setOpen = (state: boolean) => isLoading.value = state;
         let collectionStore = useCollectionsStore();
-        return { isOpenRef, setOpen, collectionStore }
+        return { isLoading, setOpen, collectionStore }
     },
     data() {
         return {

src/components/base/BaseLayout.vue

@@ -15,9 +15,6 @@
                 </ion-buttons>
                 <ion-title> {{ pageTitle }} </ion-title>
             </ion-toolbar>
-            <ion-toolbar>
-                <ion-title> Login: {{collectionStore.userLogin }} Senha: {{collectionStore.userPassword }} </ion-title>
-            </ion-toolbar>
         </ion-header>
         <ion-content>
             <slot />

src/pages/ColletionsFull.vue

@@ -1,22 +1,23 @@
 <template>
     <ion-loading
-    :is-open="isOpenRef"
-    cssClass="my-custom-class"
-    message="Carregando..."
+            :is-open="isLoading"
+            message="Carregando..."
     >
     </ion-loading>
     <base-layout>
-        <ion-toolbar>
-            <ion-label>Coleções</ion-label>
-        </ion-toolbar>
-        <base-collection-list :collections="collectionStore.collections"></base-collection-list>
+        <ion-list>
+            <ion-list-header>
+                Coleções
+            </ion-list-header>
+            <collection-list :collections="collectionStore.collections"></collection-list>
+        </ion-list>
     </base-layout>
 </template>
 
 <script>
-import BaseCollectionList from '@/components/CollectionList.vue';
+import CollectionList from '@/components/CollectionList.vue';
 import BaseLayout from '@/components/base/BaseLayout.vue';
-import { IonLoading, IonToolbar, IonLabel } from '@ionic/vue';
+import { IonLoading, IonListHeader, IonList } from '@ionic/vue';
 
 import {
     useCollectionsStore
@@ -26,17 +27,17 @@ import { ref } from 'vue';
 
 export default {
     components: {
-        BaseCollectionList,
+        CollectionList,
         BaseLayout,
         IonLoading,
-        IonToolbar,
-        IonLabel
+        IonList,
+        IonListHeader
     },
     setup() {
-        const isOpenRef = ref(false);
-        const setOpen = (state) => isOpenRef.value = state;
+        const isLoading = ref(false);
+        const setOpen = (state) => isLoading.value = state;
         let collectionStore = useCollectionsStore();
-        return { collectionStore, isOpenRef, setOpen }
+        return { collectionStore, isLoading, setOpen }
     },
     async created(){
         this.setOpen(true);

src/pages/HomeView.vue

@@ -1,31 +1,34 @@
 <template>
     <ion-loading
-    :is-open="isOpenRef"
-    cssClass="my-custom-class"
-    message="Carregando..."
+        :is-open="isLoading"
+        message="Carregando..."
     >
     </ion-loading>
     <base-layout>
-        <ion-toolbar>
-            <ion-label>Coleções</ion-label>
-        </ion-toolbar>
-        <base-collection-list :collections="collectionStore.collections"></base-collection-list>
-        <ion-button expand="block" routerLink="/collectionsfull">
+        <ion-list>
+            <ion-list-header>
+                Coleções
+            </ion-list-header>
+            <collection-list :collections="collectionStore.collections"></collection-list>
+        </ion-list>
+        <ion-button fill="clear" size="small" routerLink="/collectionsfull">
             Acessar lista completa de coleções
         </ion-button>
-        <ion-toolbar>
-            <ion-label>Items</ion-label>
-        </ion-toolbar>
-        <base-item-list></base-item-list>
-        <ion-button expand="block" routerLink="/itemsfull">
-            Acessar lista completa de itens
-        </ion-button>
+        <ion-list>
+            <ion-list-header>
+                Items
+            </ion-list-header>
+            <item-list></item-list>
+            <ion-button fill="clear" size="small" routerLink="/itemsfull">
+                Acessar lista completa de itens
+            </ion-button>
+        </ion-list>
     </base-layout>
 </template>
 
 <script>
-import BaseCollectionList from '@/components/CollectionList.vue';
-import BaseItemList from '@/components/ItemList.vue';
+import CollectionList from '@/components/CollectionList.vue';
+import ItemList from '@/components/ItemList.vue';
 import BaseLayout from '@/components/base/BaseLayout.vue';
 
 import {
@@ -33,29 +36,29 @@ import {
 } from '../store/storeCollection';
 
 import {
-    IonToolbar,
-    IonLabel,
     IonButton,
-    IonLoading
+    IonLoading,
+    IonList,
+    IonListHeader,
 } from '@ionic/vue';
 
 import { ref } from 'vue';
 
 export default {
     components: {
-        BaseCollectionList,
-        BaseItemList,
+        CollectionList,
+        ItemList,
         BaseLayout,
-        IonToolbar,
-        IonLabel,
+        IonList,
+        IonListHeader,
         IonButton,
         IonLoading
     },
     setup() {
-        const isOpenRef = ref(false);
-        const setOpen = (state) => isOpenRef.value = state;
+        const isLoading = ref(false);
+        const setOpen = (state) => isLoading.value = state;
         let collectionStore = useCollectionsStore();
-        return { collectionStore, isOpenRef, setOpen }
+        return { collectionStore, isLoading, setOpen }
     },
     async created(){
         this.setOpen(true);

src/pages/ItemsByCollection.vue

@@ -1,9 +1,8 @@
 <template>
     <base-layout page-title="Items List" page-default-back-link="/collections">
     <ion-loading
-    :is-open="isOpenRef"
-    cssClass="my-custom-class"
-    message="Carregando..."
+            :is-open="isLoading"
+            message="Carregando..."
     >
     </ion-loading>
     <ion-card v-for="item of collectionStore.items" :key="item.id">
@@ -39,10 +38,10 @@ export default {
         IonImg
     },
     setup() {
-        const isOpenRef = ref(false);
-        const setOpen = (state: boolean) => isOpenRef.value = state;
+        const isLoading = ref(false);
+        const setOpen = (state: boolean) => isLoading.value = state;
         let collectionStore = useCollectionsStore();
-        return { isOpenRef, setOpen, collectionStore }
+        return { isLoading, setOpen, collectionStore }
     },
 
     data() {

src/pages/ItemsFull.vue

@@ -1,9 +1,8 @@
 <template>
     <base-layout page-title="Items List" page-default-back-link="/collections">
     <ion-loading
-    :is-open="isOpenRef"
-    cssClass="my-custom-class"
-    message="Carregando..."
+            :is-open="isLoading"
+            message="Carregando..."
     >
     </ion-loading>
     <ion-card v-for="item of collectionStore.items" :key="item.id">
@@ -39,10 +38,10 @@ export default {
         IonImg
     },
     setup() {
-        const isOpenRef = ref(false);
-        const setOpen = (state: boolean) => isOpenRef.value = state;
+        const isLoading = ref(false);
+        const setOpen = (state: boolean) => isLoading.value = state;
         let collectionStore = useCollectionsStore();
-        return { isOpenRef, setOpen, collectionStore }
+        return { isLoading, setOpen, collectionStore }
     },
     data() {
         return {