silva
/
adrema-form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add alerts to editor

This commit is contained in:
philipp lang 2024-04-17 23:45:03 +02:00
parent f6bac84273
commit af70e8654d
1 changed files with 14 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Content.vue
View File

@ -5,6 +5,7 @@
<h3 class="font-arvo text-primary" v-if="block.type === 'heading' && block.data.level === 3" v-text="block.data.text"></h3> <h3 class="font-arvo text-primary" v-if="block.type === 'heading' && block.data.level === 3" v-text="block.data.text"></h3>
<h4 class="font-arvo text-primary" v-if="block.type === 'heading' && block.data.level === 4" v-text="block.data.text"></h4> <h4 class="font-arvo text-primary" v-if="block.type === 'heading' && block.data.level === 4" v-text="block.data.text"></h4>
<div v-if="block.type === 'paragraph'" v-html="block.data.text"></div> <div v-if="block.type === 'paragraph'" v-html="block.data.text"></div>
<blockquote v-if="block.type === 'alert'" :class="`${alertClass[block.data.type]} rounded-lg py-2 px-4 border-2`" v-html="block.data.message"></blockquote>
<ul v-if="block.type === 'list' && block.data.style === 'unordered'"> <ul v-if="block.type === 'list' && block.data.style === 'unordered'">
<li v-for="(item, index) in block.data.items" :key="index"> <li v-for="(item, index) in block.data.items" :key="index">
<span v-html="item.content"></span> <span v-html="item.content"></span>
@ -25,6 +26,19 @@
</template> </template>
<script setup> <script setup>
import {reactive} from 'vue';
const alertClass = reactive({
success: 'bg-green-300 border-green-600 text-green-900',
primary: 'bg-primary border-circle text-font',
secondary: 'bg-secondary border-circle text-font',
info: 'bg-blue-300 border-blue-600 text-blue-900',
light: 'bg-gray-300 border-gray-600 text-gray-900',
dark: 'bg-gray-800 border-gray-600 text-gray-200',
warning: 'bg-yellow-300 border-yellow-600 text-yellow-900',
danger: 'bg-red-300 border-red-600 text-red-900',
});
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
required: true, required: true,