feat: defineProps customerLabel

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>