feat/fix: new component(select input/zone, quoCard)

src/components/05_quotation/QuotationCard.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import { formatNumberDecimal } from 'src/stores/utils';
+import KebabAction from '../shared/KebabAction.vue';
+
+defineProps<{
+  type?:
+    | 'fullAmountCash'
+    | 'installmentsCash'
+    | 'fullAmountBill'
+    | 'installmentsBill'
+    | string;
+  title?: string;
+  code?: string;
+  amount?: number;
+  date?: string;
+  customerName?: string;
+  reporter?: string;
+  totalPrice?: number;
+}>();
+
+defineEmits<{
+  (e: 'view'): void;
+  (e: 'edit'): void;
+  (e: 'link'): void;
+  (e: 'upload'): void;
+  (e: 'delete'): void;
+  (e: 'changeStatus'): void;
+  (e: 'example'): void;
+}>();
+</script>
+<template>
+  <div class="surface-1 rounded bordered q-pa-sm quo-card">
+    <!-- SEC: header -->
+    <header class="row items-center no-wrap">
+      <div
+        class="badge-card rounded q-pa-xs"
+        :class="{ [`badge-card__${type}`]: true }"
+      >
+        {{ $t(`quotation.type.${type}`) }}
+      </div>
+
+      <div class="column q-ml-md relative-position" style="font-size: 12px">
+        <span>
+          {{ $t('general.itemNo', { msg: $t('quotation.title') }) }}
+        </span>
+        <span class="text-caption app-text-muted" style="top: 10px">
+          {{ code }}
+        </span>
+      </div>
+
+      <nav class="col text-right">
+        <q-btn
+          flat
+          dense
+          rounded
+          icon="mdi-eye-outline"
+          size="12px"
+          @click.stop="$emit('view')"
+        />
+        <KebabAction
+          :idName="code"
+          status="ACTIVE"
+          use-link
+          use-upload
+          @view="$emit('view')"
+          @edit="$emit('edit')"
+          @link="$emit('link')"
+          @upload="$emit('upload')"
+          @delete="$emit('delete')"
+          @change-status="$emit('changeStatus')"
+        />
+      </nav>
+    </header>
+
+    <!-- SEC: body -->
+    <section class="row no-wrap q-py-md">
+      <q-img src="/images/quotation-avatar.png" width="4rem" class="q-mr-lg" />
+      <div class="column">
+        <span class="col q-pt-sm">{{ title || '-' }}</span>
+        <span class="app-text-muted">x {{ amount || '0' }}</span>
+      </div>
+      <div
+        class="col text-right app-text-muted q-mr-md self-end"
+        style="font-size: 12px"
+      >
+        {{ date || '-' }}
+      </div>
+    </section>
+    <q-separator />
+    <section class="row q-py-sm">
+      <div class="col-3 app-text-muted">{{ $t('quotation.customerName') }}</div>
+      <div class="col-9">{{ customerName || '-' }}</div>
+      <div class="col-3 app-text-muted">{{ $t('quotation.reporter') }}</div>
+      <div class="col-9">{{ reporter || '-' }}</div>
+    </section>
+    <q-separator />
+    <footer class="row no-wrap items-center q-mt-sm">
+      <Icon
+        class="q-mr-md"
+        icon="ph:money-fill"
+        style="font-size: 24px; color: var(--green-9)"
+      />
+      {{ $t('quotation.totalPrice') }} :
+      <div class="q-pl-xs" style="color: var(--orange-5)">
+        {{ formatNumberDecimal(totalPrice || 0, 2) }}
+      </div>
+      <q-btn
+        dense
+        outline
+        color="primary"
+        class="rounded q-ml-auto"
+        padding="2px 8px"
+      >
+        <q-icon name="mdi-play-box-outline" size="xs" class="q-mr-xs" />
+        {{ $t('general.view', { msg: $t('general.example') }) }}
+      </q-btn>
+    </footer>
+  </div>
+</template>
+
+<style scoped>
+.badge-card {
+  font-size: 12px;
+  color: hsla(var(--gray-0-hsl) / 1);
+  background: hsla(var(--_color) / 1);
+}
+
+.badge-card__fullAmountCash {
+  --_color: var(--red-6-hsl);
+}
+
+.badge-card__installmentsCash {
+  --_color: var(--blue-6-hsl);
+}
+
+.badge-card__fullAmountBill {
+  --_color: var(--jungle-8-hsl);
+}
+
+.badge-card__installmentsBill {
+  --_color: var(--purple-7-hsl);
+}
+
+.dark .badge-card__installmentsCash {
+  --_color: var(--blue-10-hsl);
+}
+
+span {
+  display: inline-block;
+  /*new:*/
+  line-height: 12px;
+  height: 12px;
+}
+</style>