49 lines
2.4 KiB
Vue
49 lines
2.4 KiB
Vue
<template>
|
|
<div class="text-sm leading-normal text-gray-800 sm:text-base prose">
|
|
<template v-for="block in modelValue.blocks" :key="block.id">
|
|
<h2 class="font-arvo text-primary" v-if="block.type === 'heading' && block.data.level === 2" v-text="block.data.text"></h2>
|
|
<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>
|
|
<ul v-if="item.items.length">
|
|
<li v-for="(sitem, sindex) in item.items" :key="`${index}-${sindex}`">
|
|
<span v-html="sitem.content"></span>
|
|
<ul v-if="sitem.items.length">
|
|
<li v-for="(ssitem, ssindex) in sitem.items" :key="`${index}-${sindex}-${ssindex}`">
|
|
<span v-html="ssitem.content"></span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
</div>
|
|
</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,
|
|
validator: (value) => typeof value === 'object' && Object.keys(value).includes('blocks'),
|
|
},
|
|
});
|
|
</script>
|