Add alerts to editor
This commit is contained in:
parent
f6bac84273
commit
af70e8654d
|
@ -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>
|
||||
<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>
|
||||
<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'">
|
||||
<li v-for="(item, index) in block.data.items" :key="index">
|
||||
<span v-html="item.content"></span>
|
||||
|
@ -25,6 +26,19 @@
|
|||
</template>
|
||||
|
||||
<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({
|
||||
modelValue: {
|
||||
required: true,
|
||||
|
|
Loading…
Reference in New Issue