adrema/resources/js/components/form/Editor.vue

226 lines
5.9 KiB
Vue
Raw Normal View History

2024-02-02 01:05:45 +01:00
<template>
<div>
2024-04-19 13:49:47 +02:00
<div>
<span v-if="label" class="font-semibold text-gray-400" :class="labelClass(size)">{{ label }}<span v-show="required" class="text-red-800">&nbsp;*</span></span>
<div class="relative w-full h-full">
<div :id="id" :class="[defaultFieldClass, fieldClass(size)]"></div>
<div v-if="hint" v-tooltip="hint" class="absolute right-0 top-0 mr-2 mt-2">
<ui-sprite src="info-button" class="w-5 h-5 text-indigo-200"></ui-sprite>
</div>
2024-02-02 01:05:45 +01:00
</div>
</div>
2024-04-19 13:49:47 +02:00
<ui-popup
v-if="condition !== null"
heading="Bedingungen"
@close="
condition.resolve(condition.data);
condition = null;
"
>
<slot name="conditions" :data="condition.data" :resolve="condition.resolve" :reject="condition.reject"></slot>
</ui-popup>
2024-02-02 01:05:45 +01:00
</div>
</template>
<script setup>
import {debounce} from 'lodash';
import {onMounted, ref} from 'vue';
import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import Paragraph from '@editorjs/paragraph';
2024-02-02 02:03:39 +01:00
import NestedList from '@editorjs/nested-list';
2024-04-17 23:05:55 +02:00
import Alert from 'editorjs-alert';
2024-02-02 01:05:45 +01:00
import useFieldSize from '../../composables/useFieldSize.js';
const emit = defineEmits(['update:modelValue']);
const {labelClass, fieldClass, defaultFieldClass} = useFieldSize();
const props = defineProps({
required: {
type: Boolean,
default: false,
},
size: {
default: null,
},
rows: {
default: function () {
return 4;
},
},
id: {
required: true,
},
2024-04-19 13:49:47 +02:00
conditions: {
required: false,
type: Boolean,
default: () => false,
},
2024-02-02 01:05:45 +01:00
hint: {
default: null,
},
modelValue: {
default: undefined,
},
label: {
default: false,
},
placeholder: {
default: '',
},
});
const editor = ref(null);
2024-04-19 13:49:47 +02:00
const condition = ref(null);
2024-04-19 22:06:09 +02:00
async function openPopup(data) {
2024-04-19 13:49:47 +02:00
return new Promise((resolve, reject) => {
new Promise((innerResolve, innerReject) => {
condition.value = {
resolve: innerResolve,
reject: innerReject,
2024-04-19 22:06:09 +02:00
data: data,
2024-04-19 13:49:47 +02:00
};
}).then((data) => {
resolve(data);
condition.value = null;
});
});
}
class ConditionTune {
constructor({api, data, config, block}) {
this.api = api;
this.data = data || {
2024-04-19 22:06:09 +02:00
mode: 'all',
ifs: [],
2024-04-19 13:49:47 +02:00
};
this.config = config;
this.block = block;
this.wrapper = null;
}
static get isTune() {
return true;
}
wrap(blockContent) {
this.wrapper = document.createElement('div');
var tooltip = document.createElement('div');
tooltip.setAttribute('data-tooltip', '');
var content = document.createElement('div');
content.setAttribute('data-content', '');
content.appendChild(blockContent);
this.wrapper.appendChild(tooltip);
this.wrapper.appendChild(content);
2024-04-19 13:49:47 +02:00
this.styleWrapper();
2024-04-19 13:49:47 +02:00
return this.wrapper;
}
2024-04-19 22:06:09 +02:00
hasData() {
return this.data.ifs.length > 0;
}
2024-04-19 13:49:47 +02:00
styleWrapper() {
2024-04-19 22:06:09 +02:00
if (this.hasData()) {
this.wrapper.querySelector('[data-content]').className = 'p-1 border border-blue-200 rounded';
this.wrapper.querySelector('[data-tooltip]').className = 'inline-block ml-2 px-2 py-1 items-center text-xs leading-none bg-blue-200 text-blue-900 rounded-t-lg';
this.wrapper.querySelector('[data-tooltip]').innerHTML = 'Bedingung';
2024-04-19 13:49:47 +02:00
} else {
this.wrapper.querySelector('[data-content]').className = '';
this.wrapper.querySelector('[data-tooltip]').className = '';
this.wrapper.querySelector('[data-tooltip]').innerHTML = '';
2024-04-19 13:49:47 +02:00
}
}
render() {
return {
label: 'Bedingungen',
closeOnActivate: true,
toggle: true,
onActivate: async () => {
2024-04-19 22:06:09 +02:00
this.data = await openPopup(this.data);
2024-04-19 13:49:47 +02:00
this.styleWrapper();
this.block.dispatchChange();
},
};
}
save() {
return this.data;
}
}
2024-02-02 01:05:45 +01:00
onMounted(async () => {
2024-04-19 13:49:47 +02:00
var tools = {
paragraph: {
class: Paragraph,
shortcut: 'CTRL+P',
inlineToolbar: true,
config: {
preserveBlank: true,
placeholder: 'Absatz',
},
},
alert: {
class: Alert,
inlineToolbar: true,
config: {
defaultType: 'primary',
},
},
heading: {
class: Header,
shortcut: 'CTRL+H',
inlineToolbar: true,
config: {
placeholder: 'Überschrift',
levels: [2, 3, 4],
defaultLevel: 2,
},
},
list: {
class: NestedList,
shortcut: 'CTRL+L',
inlineToolbar: true,
},
};
var tunes = [];
if (props.conditions) {
tools.condition = {
class: ConditionTune,
};
tunes.push('condition');
}
2024-02-02 01:05:45 +01:00
editor.value = new EditorJS({
placeholder: props.placeholder,
holder: props.id,
2024-02-02 02:14:44 +01:00
minHeight: 0,
2024-02-02 01:05:45 +01:00
defaultBlock: 'paragraph',
data: JSON.parse(JSON.stringify(props.modelValue)),
2024-04-19 13:49:47 +02:00
tunes: tunes,
tools: tools,
2024-02-02 01:05:45 +01:00
onChange: debounce(async (api, event) => {
const data = await editor.value.save();
2024-04-19 13:49:47 +02:00
console.log(data);
2024-02-02 01:05:45 +01:00
emit('update:modelValue', data);
2024-04-20 00:18:10 +02:00
}, 200),
2024-04-19 13:49:47 +02:00
onPopup: () => {
console.log('opened');
},
2024-02-02 01:05:45 +01:00
});
await editor.value.isReady;
console.log('Editor is ready');
});
</script>