refactor: branch card

src/components/01_branch-management/TableCardComponent.vue

@@ -58,23 +58,30 @@ const filter = ref('');
       row-key="name"
       :filter="filter"
       hide-header
+      card-container-class="q-col-gutter-lg"
     >
-      <template v-slot:item="prop">
+      <template #item="prop">
         <div
-          class="q-pr-sm q-pb-md col-6"
+          class="col-6"
           @click.stop="!subBranch && $emit('navigate', prop.row)"
         >
-          <q-card class="bordered">
+          <div class="bordered rounded" style="overflow: hidden">
-            <q-item
+            <div
-              class="bordered"
+              class="bordered-b row q-px-md q-py-sm"
-              :class="`table-card-color-${subBranch ? color[1] : color[0]} ${$q.dark.isActive ? 'dark-table-card' : ''}    ${i === 0 ? 'color-table-header' : ''} ${i % 2 === 0 && i !== 0 ? 'color-table-row' : ''}`"
+              :class="{
+                [`table-card__${color[+(subBranch || false)]}`]: true,
+                'table-header': i === 0,
+                'table-row': i !== 0 && i % 2 === 0,
+                dark: $q.dark.isActive,
+              }"
               :key="i"
               v-for="([k, v], i) in Object.entries(prop.row).slice(1)"
             >
-              <q-item-section
+              <div
                 avatar
+                class="row items-center"
                 style="width: 120px"
-                :style="`${!$q.dark.isActive && i !== 0 ? 'color:gray' : ''}`"
+                :style="{ color: (i !== 0 && 'grey') || 'currentColor' }"
               >
                 {{
                   $t(
@@ -85,39 +92,35 @@ const filter = ref('');
                       : prop.colsMap[k]?.label,
                   )
                 }}
-              </q-item-section>
+              </div>
 
-              <q-item-section>
+              <div class="row items-center" style="flex-grow: 1">
-                <div class="row items-center">
+                <div style="flex-grow: 1">
-                  <div>
+                  {{
-                    {{
+                    k !== 'type'
-                      k !== 'type'
+                      ? v
-                        ? v
+                      : (v && $t('branchHQLabel')) || $t('branchLabel')
-                        : (v && $t('branchHQLabel')) || $t('branchLabel')
+                  }}
-                    }}
-                  </div>
-
-                  <q-space />
-                  <q-btn
-                    v-if="i === 0"
-                    outline
-                    no-caps
-                    class="q-px-md"
-                    dense
-                    :label="$t('viewDetail')"
-                    @click.stop="$emit('showInfo', prop.row)"
-                  >
-                    <Icon
-                      icon="mdi:navigate-next"
-                      class="cursor-pointer"
-                      v-if="i === 0"
-                      width="20px"
-                    />
-                  </q-btn>
                 </div>
-              </q-item-section>
+                <q-btn
-            </q-item>
+                  v-if="i === 0"
-          </q-card>
+                  outline
+                  no-caps
+                  class="q-px-md"
+                  dense
+                  :label="$t('viewDetail')"
+                  @click.stop="$emit('showInfo', prop.row)"
+                >
+                  <Icon
+                    icon="mdi:navigate-next"
+                    class="cursor-pointer"
+                    v-if="i === 0"
+                    width="20px"
+                  />
+                </q-btn>
+              </div>
+            </div>
+          </div>
         </div>
       </template>
     </q-table>
@@ -136,31 +139,28 @@ const filter = ref('');
 </template>
 
 <style scoped>
-.table-card-color-pink {
+.table-card__pink {
   --bg-table-card-header: var(--pink-6-hsl);
-  --color-table-card-header: var(--pink-0-hsl);
+  --fg-table-card-header: var(--pink-0-hsl);
-  --bg-table-card-row: hsla(var(--pink-6-hsl) / 0.08);
+  &.dark {
-
-  &.dark-table-card {
     --bg-table-card-row: hsla(var(--gray-9-hsl) / 1);
   }
 }
 
-.table-card-color-violet {
+.table-card__violet {
   --bg-table-card-header: var(--purple-11-hsl);
-  --color-table-card-header: var(--violet-0-hsl);
+  --fg-table-card-header: var(--violet-0-hsl);
-  --bg-table-card-row: hsla(var(--purple-11-hsl) / 0.08);
+  &.dark {
-  &.dark-table-card {
     --bg-table-card-row: hsla(var(--gray-9-hsl) / 1);
   }
 }
 
-.color-table-header {
+.table-header {
   background: hsl(var(--bg-table-card-header));
-  color: hsl(var(--color-table-card-header));
+  color: hsl(var(--fg-table-card-header));
 }
 
-.color-table-row {
+.table-row {
-  background: var(--bg-table-card-row);
+  background: hsla(var(--bg-table-card-header) / 0.08);
 }
 </style>