core/client/components/form/KTextareaField.vue
<template> <KTextArea v-if="readOnly" :text="model" :length="150" /> <q-field v-else :value="model" :label="label" :error-message="errorLabel" :error="hasError" :disable="disabled" bottom-slots > <!-- Content --> <template v-slot:default> <div class="q-pt-md full-width"> <q-editor :id="properties.name + '-field'" v-model="model" :definitions="definitions" :toolbar="editorToolbar" content-class="text-grey-8" min-height="5rem" max-height="10rem" dense /> </div> </template> <!-- Helper --> <template v-if="hasHelper" v-slot:append> <KAction :id="properties.name + '-helper'" :label="helperLabel" :icon="helperIcon" :tooltip="helperTooltip" :url="helperUrl" :dialog="helperDialog" :context="helperContext" @dialog-confirmed="onHelperDialogConfirmed" color="primary" /> </template> </q-field></template> <script>import _ from 'lodash'import { baseField } from '../../mixins'import KTextArea from '../KTextArea.vue' export default { mixins: [baseField], components: { KTextArea }, props: { toolbar: { type: Object, default: () => null } }, data () { return { definitions: { clear: { tip: this.$t('KTextAreaField.CLEAR_TOOLTIP'), icon: 'cancel', handler: this.clear } }, defaultToolbar: { xs: [ ['bold', 'italic', 'underline', 'strike', 'align'], [{ label: '', icon: this.$q.iconSet.editor.align, list: 'only-icons', options: ['left', 'center', 'right', 'justify'] }], ['undo', 'redo'], ['clear'] ], 'gt.xs': [ ['bold', 'italic', 'underline', 'strike', 'unordered', 'ordered'], ['quote', 'link', 'hr'], [{ label: this.$q.lang.editor.align, icon: this.$q.iconSet.editor.align, fixedLabel: true, list: 'only-icons', options: ['left', 'center', 'right', 'justify'] }], ['undo', 'redo'], ['clear'] ] } } }, computed: { editorToolbar () { let configuration _.forEach(this.properties.toolbar || this.toolbar || this.defaultToolbar, (value, key) => { if (_.get(this.$q.screen, key)) { configuration = value return false } }) return configuration } }}</script>