From 270deacba7d8a83cffd721af31c30e74c6bf6040 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 24 Sep 2024 11:25:39 +0700
Subject: [PATCH] refactor(05): component (quo card, date picker, select zone)

---
 src/components/05_quotation/QuotationCard.vue |  2 +-
 src/components/shared/DatePicker.vue          |  2 ++
 src/components/shared/SelectZone.vue          |  3 ++-
 src/css/quasar.variables.scss                 | 27 ++++++++++++++++---
 4 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/components/05_quotation/QuotationCard.vue b/src/components/05_quotation/QuotationCard.vue
index eec62803..3e5d31ae 100644
--- a/src/components/05_quotation/QuotationCard.vue
+++ b/src/components/05_quotation/QuotationCard.vue
@@ -91,7 +91,7 @@ defineEmits<{
     <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-3 app-text-muted">{{ $t('quotation.actor') }}</div>
       <div class="col-9">{{ reporter || '-' }}</div>
     </section>
     <q-separator />
diff --git a/src/components/shared/DatePicker.vue b/src/components/shared/DatePicker.vue
index 42bb16ea..9c57e190 100644
--- a/src/components/shared/DatePicker.vue
+++ b/src/components/shared/DatePicker.vue
@@ -11,6 +11,7 @@ const props = defineProps<{
   readonly?: boolean;
   clearable?: boolean;
   label?: string;
+  bgColor?: string;
   rules?: ((value: string) => string | true)[];
   disabledDates?: string[] | Date[] | ((date: Date) => boolean);
 }>();
@@ -79,6 +80,7 @@ function valueUpdate(value: string) {
         hide-bottom-space
         dense
         outlined
+        :bg-color="bgColor"
         :rules
         :label
         :for="id"
diff --git a/src/components/shared/SelectZone.vue b/src/components/shared/SelectZone.vue
index 0d69f30b..e0f9234e 100644
--- a/src/components/shared/SelectZone.vue
+++ b/src/components/shared/SelectZone.vue
@@ -4,7 +4,8 @@ const selectedItem = defineModel<unknown[]>('selectedItem', { default: [] });
 
 const props = withDefaults(
   defineProps<{
-    items: unknown[];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    items: any;
     color?: string;
   }>(),
   {
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 44eeb29d..5ffe90d4 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -15,6 +15,7 @@ $info: var(--blue-6);
 $warning: #ffc224;
 
 $disabled: var(--stone-4);
+$input-border: var(--gray-2);
 
 $separator-color: var(--border-color);
 $separator-dark-color: var(--border-color);
@@ -94,6 +95,21 @@ div.fullscreen.q-drawer__backdrop {
   color: $disabled;
 }
 
+.input-border,
+.input-border *,
+[input-border],
+[input-border] * :not(:deep(.q-checkbox)) {
+  color: hsl(var(--text-mute)) !important;
+}
+
+.bg-input-border {
+  background: $input-border;
+}
+
+.text-input-border {
+  color: $input-border;
+}
+
 .q-field--outlined.q-field--readonly .q-field__control:before {
   border-color: transparent;
 }
@@ -113,11 +129,15 @@ div.fullscreen.q-drawer__backdrop {
   color: hsl(var(--text-mute));
 }
 
-.q-tree__node-header.relative-position.row.no-wrap.items-center:has(.clickable-node):hover {
+.q-tree__node-header.relative-position.row.no-wrap.items-center:has(
+    .clickable-node
+  ):hover {
   background-color: hsla(var(--info-bg) / 0.1);
 }
 
-.q-tree__node-header.relative-position.row.no-wrap.items-center:has(.clickable-node.active-node) {
+.q-tree__node-header.relative-position.row.no-wrap.items-center:has(
+    .clickable-node.active-node
+  ) {
   background-color: hsla(var(--info-bg) / 0.1);
 }
 
@@ -125,7 +145,8 @@ div.fullscreen.q-drawer__backdrop {
   padding-left: 0px !important;
 }
 
-.q-tree__node.relative-position.q-tree__node--child:not(:first-child) .q-tree__node-header:before {
+.q-tree__node.relative-position.q-tree__node--child:not(:first-child)
+  .q-tree__node-header:before {
   top: -32px !important;
 }