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

@@ -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,23 +101,21 @@ 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
                         v-model="defaultAddress"
                         :val="address.id"
                         class="q-mr-sm"
                         @update:model-value="changeDefaultAddress"
                     />
+                </template>
+                <template #content>
                     <div>
                         <QItemLabel class="text-bold q-mb-sm">
                             {{ address.nickname }}
@@ -126,9 +126,8 @@ onMounted(async () => {
                             {{ address.city }}
                         </QItemLabel>
                     </div>
-                    </div>
+                </template>
-                </QItemSection>
+                <template #actions>
-                <QItemSection class="actions-wrapper" side>
                     <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?',