refactor(05): component (quo card, date picker, select zone)

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 />

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"

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;
   }>(),
   {

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;
 }