59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
const remark = defineModel<string>('remark', { default: '' });
|
|
|
|
defineProps<{
|
|
readonly: boolean;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="col-12 row">
|
|
<div class="col-12 q-mb-md text-weight-bold text-body1">
|
|
<q-icon
|
|
flat
|
|
size="xs"
|
|
class="q-pa-sm rounded q-mr-xs"
|
|
color="info"
|
|
name="mdi-asterisk-circle-outline"
|
|
style="background-color: var(--surface-3)"
|
|
/>
|
|
{{ $t('general.remark') }}
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<q-field
|
|
class="full-width"
|
|
outlined
|
|
for="input-detail"
|
|
id="input-detail"
|
|
:readonly="readonly"
|
|
:borderless="readonly"
|
|
:label="$t('general.remark')"
|
|
stack-label
|
|
dense
|
|
>
|
|
<q-editor
|
|
dense
|
|
:model-value="readonly ? remark || '-' : remark"
|
|
@update:model-value="
|
|
(v) => (typeof v === 'string' ? (remark = v) : '')
|
|
"
|
|
min-height="5rem"
|
|
class="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);
|
|
"
|
|
:style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
|
|
/>
|
|
</q-field>
|
|
</div>
|
|
</div>
|
|
</template>
|