From 04d450f0f43b907211b0d27210152763900c56d1 Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Mon, 22 Apr 2024 16:42:47 +0700
Subject: [PATCH] feat: defineProps customerLabel

---
 src/components/FormDialog.vue | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index 97eefb6e..4a86e226 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -10,6 +10,7 @@ defineProps<{
   addressSeparator?: boolean;
   branchStatus?: string;
   badgeLabel?: string;
+  customerLabel?: string;
   badgeClass?: string;
   noFooter?: boolean;
   noAppBox?: boolean;
@@ -40,7 +41,20 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
             <div class="col text-subtitle1 text-weight-bold text-center">
               {{ title }}
 
-              <text>{{ branchStatus ? `(${branchStatus})` : '' }}</text>
+              <text v-if="customerLabel">
+                :
+                <text
+                  class="text-customer"
+                  :class="{ 'dark-text': $q.dark.isActive }"
+                  style="color: var(--purple-8)"
+                >
+                  {{ $t(customerLabel) }}
+                </text>
+              </text>
+
+              <text v-if="branchStatus">
+                {{ branchStatus }}
+              </text>
               <text
                 v-if="badgeLabel"
                 class="badge-label q-px-sm text-caption"
@@ -192,4 +206,13 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
   background-color: var(--surface-2);
   text-wrap: nowrap;
 }
+
+.text-customer {
+  --_var-filter: grayscale(30%);
+
+  filter: var(--_var-filter);
+  &.dark-text {
+    --_var-filter: grayscale(0%);
+  }
+}
 </style>