Create CardList component

src/components/ui/CardList.vue

@@ -0,0 +1,44 @@
+<script setup>
+const props = defineProps({
+    clickable: { type: Boolean, default: true },
+    rounded: { type: Boolean, default: true }
+});
+
+const emit = defineEmits(['click']);
+
+const handleClick = () => {
+    if (props.clickable) {
+        emit('click');
+    }
+};
+</script>
+
+<template>
+    <QCard
+        v-bind="$attrs"
+        v-ripple="clickable"
+        flat
+        class="full-width row items-center justify-between card no-border-radius"
+        :class="{ 'cursor-pointer': clickable, 'no-radius': !rounded }"
+        @click="handleClick()"
+    >
+        <QCardSection class="no-padding">
+            <div class="row">
+                <slot name="prepend" />
+                <div>
+                    <slot name="content" />
+                </div>
+            </div>
+        </QCardSection>
+        <QCardSection class="no-padding" side>
+            <slot name="actions" />
+        </QCardSection>
+    </QCard>
+</template>
+
+<style lang="scss" scoped>
+.card {
+    border-bottom: 1px solid $gray-light;
+    padding: 20px;
+}
+</style>

src/css/app.scss

@@ -1,8 +1,8 @@
 // app global css in SCSS form
 
 @font-face {
-  font-family: Poppins;
+    font-family: Poppins;
-  src: url(./poppins.ttf) format('truetype');
+    src: url(./poppins.ttf) format('truetype');
 }
 @font-face {
     font-family: 'Open Sans';
@@ -36,3 +36,9 @@ a.link {
 .q-page-sticky.fixed-bottom-right {
     margin: 18px;
 }
+.no-border-radius {
+    border-radius: 0 !important;
+}
+.no-padding {
+    padding: 0 !important;
+}

src/css/quasar.variables.scss

@@ -15,7 +15,7 @@
 $primary: #1a1a1a;
 $secondary: #26a69a;
 $accent: #8cc63f;
-
+$gray-light: #ddd;
 $dark: #1d1d1d;
 $dark-page: #121212;
 

src/pages/Account/AddressList.vue

@@ -3,6 +3,8 @@ import { useI18n } from 'vue-i18n';
 import { ref, onMounted, inject } from 'vue';
 import { useRouter } from 'vue-router';
 
+import CardList from 'src/components/ui/CardList.vue';
+
 import useNotify from 'src/composables/useNotify.js';
 import { useVnConfirm } from 'src/composables/useVnConfirm.js';
 
@@ -99,36 +101,33 @@ onMounted(async () => {
             style="max-width: 544px"
             separator
         >
-            <QItem
+            <CardList
                 v-for="(address, index) in addresses"
                 :key="index"
-                clickable
+                :rounded="false"
-                v-ripple
                 tag="label"
-                class="full-width row items-center justify-between address-item"
-                style="padding: 20px"
             >
-                <QItemSection>
+                <template #prepend>
-                    <div class="row">
+                    <QRadio
-                        <QRadio
+                        v-model="defaultAddress"
-                            v-model="defaultAddress"
+                        :val="address.id"
-                            :val="address.id"
+                        class="q-mr-sm"
-                            class="q-mr-sm"
+                        @update:model-value="changeDefaultAddress"
-                            @update:model-value="changeDefaultAddress"
+                    />
-                        />
+                </template>
-                        <div>
+                <template #content>
-                            <QItemLabel class="text-bold q-mb-sm">
+                    <div>
-                                {{ address.nickname }}
+                        <QItemLabel class="text-bold q-mb-sm">
-                            </QItemLabel>
+                            {{ address.nickname }}
-                            <QItemLabel>{{ address.street }}</QItemLabel>
+                        </QItemLabel>
-                            <QItemLabel>
+                        <QItemLabel>{{ address.street }}</QItemLabel>
-                                {{ address.postalCode }},
+                        <QItemLabel>
-                                {{ address.city }}
+                            {{ address.postalCode }},
-                            </QItemLabel>
+                            {{ address.city }}
-                        </div>
+                        </QItemLabel>
                     </div>
-                </QItemSection>
+                </template>
-                <QItemSection class="actions-wrapper" side>
+                <template #actions>
                     <QBtn
                         icon="delete"
                         flat
@@ -147,25 +146,12 @@ onMounted(async () => {
                         rounded
                         @click.stop="goToAddressDetails(address.id)"
                     />
-                </QItemSection>
+                </template>
-            </QItem>
+            </CardList>
         </QList>
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.address-item {
-    .actions-wrapper {
-        visibility: hidden;
-    }
-    &:hover {
-        .actions-wrapper {
-            visibility: visible;
-        }
-    }
-}
-</style>
-
 <i18n lang="yaml">
 en-US:
     addAddress: Add address

src/pages/Ecomerce/PendingOrders.vue

@@ -0,0 +1,7 @@
+<script setup></script>
+
+<template></template>
+
+<style lang="scss" scoped></style>
+
+<i18n lang="yaml"></i18n>

src/router/routes.js

@@ -49,6 +49,11 @@ const routes = [
                 path: '/ecomerce/invoices',
                 component: () => import('pages/Ecomerce/Invoices.vue')
             },
+            {
+                name: 'PendingOrders',
+                path: '/ecomerce/pending',
+                component: () => import('pages/Ecomerce/PendingOrders.vue')
+            },
             {
                 name: 'catalog',
                 path: '/ecomerce/catalog/:category?/:type?',