fix: product q-field

src/components/04_product-service/ฺBasicInfoProduct.vue

@@ -15,95 +15,102 @@ defineProps<{
 </script>
 
 <template>
-  <div class="row col-10">
+  <div class="col-3 app-text-muted">
-    <div class="col-4 app-text-muted">
+    • {{ $t(`formDialogTitleInformation`) }}
-      • {{ $t(`formDialogTitleInformation`) }}
+  </div>
-    </div>
 
-    <div class="col-8 row q-col-gutter-md">
+  <div class="col-9 row q-col-gutter-md">
-      <q-input
+    <q-input
-        for="input-code"
+      for="input-code"
-        :outlined="!readonly"
+      :outlined="!readonly"
-        :dense="dense"
+      :dense="dense"
-        :readonly="readonly"
+      :readonly="readonly"
-        :borderless="readonly"
+      :borderless="readonly"
-        hide-bottom-space
+      hide-bottom-space
-        class="col-3"
+      class="col-3"
-        :label="$t('productCode')"
+      :label="$t('productCode')"
-        v-model="code"
+      v-model="code"
-      />
+    />
 
-      <q-input
+    <q-input
-        for="input-name"
+      for="input-name"
-        :dense="dense"
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      class="col-9"
+      :label="$t('productName')"
+      v-model="name"
+    />
+
+    <q-input
+      for="input-detail"
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      type="textarea"
+      class="col-12"
+      :label="$t('serviceDetail')"
+      v-model="detail"
+      autogrow
+    />
+
+    <!-- <div class="col-12" v-if="readonly">
+      <q-field
+        class="rounded"
+        :class="{ 'surface-2': remark !== undefined }"
+        :label="$t('detail')"
+        stack-label
+        dense
+        readonly
+        borderless
+      >
+        <template #label>
+          {{ $t('detail') }}
+        </template>
+
+        <template #control>
+          <div class="full-width q-pa-xs rounded">
+            <q-card-section
+              v-if="!!remark"
+              class="rounded"
+              v-html="remark"
+              style="color: black; padding: 5px 0px 0px 0px"
+            />
+          </div>
+        </template>
+      </q-field>
+    </div> -->
+
+    <div class="col-12">
+      <q-field
+        class="full-width"
         :outlined="!readonly"
         :readonly="readonly"
         :borderless="readonly"
-        hide-bottom-space
+        :label="$t('detail')"
-        class="col-9"
+        stack-label
-        :label="$t('productName')"
+        dense
-        v-model="name"
+      >
-      />
+        <q-editor
-
-      <q-input
-        for="input-detail"
-        :dense="dense"
-        :outlined="!readonly"
-        :readonly="readonly"
-        :borderless="readonly"
-        hide-bottom-space
-        type="textarea"
-        class="col-12"
-        :label="$t('serviceDetail')"
-        v-model="detail"
-        autogrow
-      />
-
-      <div class="col-12" v-if="readonly">
-        <q-field
-          class="rounded"
-          :class="{ 'surface-2': remark !== undefined }"
-          :label="$t('detail')"
-          stack-label
           dense
-          readonly
+          v-model="remark"
-          borderless
+          min-height="5rem"
-        >
+          class="full-width q-mt-sm q-mb-xs"
-          <template #label>
+          :flat="!readonly"
-            {{ $t('detail') }}
+          :readonly="readonly"
-          </template>
+          :toolbar-color="
+            readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
+          "
+          :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
+          style="cursor: auto; color: black"
+        />
+      </q-field>
 
-          <template #control>
+      <!-- <div class="bordered rounded" style="padding-top: 12px">
-            <div class="full-width q-pa-xs rounded">
-              <q-card-section
-                v-if="!!remark"
-                class="rounded"
-                v-html="remark"
-                style="color: black; padding: 5px 0px 0px 0px"
-              />
-            </div>
-          </template>
-        </q-field>
-      </div>
-
-      <div class="col-12" v-else>
-        <q-field
-          class="full-width q-pb-md"
-          :label="$t('detail')"
-          stack-label
-          outlined
-          dense
-        >
-          <q-editor
-            dense
-            class="rounded full-width"
-            v-model="remark"
-            min-height="5rem"
-            style="border: none; cursor: auto; color: black; height: 80%"
-          />
-        </q-field>
-
-        <!-- <div class="bordered rounded" style="padding-top: 12px">
           <text style="padding-left: 12px; color: rgba(0, 0, 0, 0.6)">
             {{ $t('detail') }}
           </text>
@@ -116,26 +123,26 @@ defineProps<{
             style="border: none"
           />
         </div> -->
-      </div>
-
-      <q-input
-        for="input-process"
-        :dense="dense"
-        :outlined="!readonly"
-        :readonly="readonly"
-        :borderless="readonly"
-        hide-bottom-space
-        class="col-4"
-        :label="$t('processingTime')"
-        v-model="process"
-        type="number"
-      />
     </div>
+
+    <q-input
+      for="input-process"
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      class="col-4"
+      :label="$t('processingTime')"
+      v-model="process"
+      type="number"
+    />
   </div>
+
   <q-separator
     v-if="separator"
-    class="col-12 q-mt-xl q-mb-md"
+    class="col-12 q-mb-md"
-    style="padding-block: 0.5px"
+    style="padding-block: 0.5px; margin-top: 32px"
   />
 </template>
 
@@ -143,4 +150,8 @@ defineProps<{
 .q-editor__toolbar {
   border-bottom: none !important;
 }
+
+:deep(.q-editor__toolbar.row.no-wrap.scroll-x) {
+  background-color: var(--surface-3) !important;
+}
 </style>