jws-frontend/src/components/04_product-service/BasicInfoProduct.vue

<script setup lang="ts">
const remark = defineModel<string>('remark', { default: '' });
const detail = defineModel<string>('detail');
const process = defineModel<number>('process');
const name = defineModel<string>('name');
const code = defineModel<string>('code');

defineProps<{
  dense?: boolean;
  outlined?: boolean;
  readonly?: boolean;
  separator?: boolean;
  isType?: boolean;
}>();
</script>

<template>
  <div class="col-3 app-text-muted">
    • {{ $t(`formDialogTitleInformation`) }}
  </div>

  <div class="col-9 row q-col-gutter-md">
    <q-input
      for="input-code"
      :outlined="!readonly"
      :dense="dense"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-3"
      :label="$t('productCode')"
      v-model="code"
      :rules="[(val: string) => (!!val && val === 'AC') || val === 'DO']"
    />

    <q-input
      for="input-name"
      :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"
        :label="$t('detail')"
        stack-label
        dense
      >
        <q-editor
          dense
          v-model="remark"
          min-height="5rem"
          class="full-width q-mt-sm q-mb-xs"
          :flat="!readonly"
          :readonly="readonly"
          :toolbar-color="
            readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
          "
          :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
          style="
            cursor: auto;
            color: var(--foreground);
            border-color: var(--surface-3);
          "
        />
      </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>

          <q-editor
            dense
            class="rounded surface-2"
            v-model="remark"
            min-height="5rem"
            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-separator
    v-if="separator"
    class="col-12 q-mb-md"
    style="padding-block: 0.5px; margin-top: 32px"
  />
</template>

<style scoped>
.q-editor__toolbar {
  border-bottom: none !important;
}

:deep(.q-editor__toolbar.row.no-wrap.scroll-x) {
  background-color: var(--surface-2) !important;
}

:deep(.q-editor__toolbar) {
  border-color: var(--surface-3) !important;
}
</style>