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

Fix html layout

This commit is contained in:
philipp lang 2024-04-08 20:44:50 +02:00
parent 2e232a95fd
commit 76186770b5
1 changed files with 7 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Content.vue
View File

@ -1,22 +1,19 @@
<template> <template>
<div class="text-sm leading-normal text-gray-800 sm:text-base prose"> <div class="text-sm leading-normal text-gray-800 sm:text-base prose">
<template v-for="block in modelValue.blocks" :key="block.id"> <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" <h2 class="font-arvo text-primary" v-if="block.type === 'heading' && block.data.level === 2" v-text="block.data.text"></h2>
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>
<h3 class="font-arvo text-primary" v-if="block.type === 'heading' && block.data.level === 3" <h4 class="font-arvo text-primary" v-if="block.type === 'heading' && block.data.level === 4" v-text="block.data.text"></h4>
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> <div v-if="block.type === 'paragraph'" v-html="block.data.text"></div>
<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-text="item.content"></span> <span v-html="item.content"></span>
<ul v-if="item.items.length"> <ul v-if="item.items.length">
<li v-for="(sitem, sindex) in item.items" :key="`${index}-${sindex}`"> <li v-for="(sitem, sindex) in item.items" :key="`${index}-${sindex}`">
<span v-text="sitem.content"></span> <span v-html="sitem.content"></span>
<ul v-if="sitem.items.length"> <ul v-if="sitem.items.length">
<li v-for="(ssitem, ssindex) in sitem.items" :key="`${index}-${sindex}-${ssindex}`"> <li v-for="(ssitem, ssindex) in sitem.items" :key="`${index}-${sindex}-${ssindex}`">
<span v-text="ssitem.content"></span> <span v-html="ssitem.content"></span>
</li> </li>
</ul> </ul>
</li> </li>
@ -31,8 +28,7 @@
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
required: true, required: true,
validator: (value) => validator: (value) => typeof value === 'object' && Object.keys(value).includes('blocks'),
typeof value === "object" && Object.keys(value).includes("blocks"),
}, },
}); });
</script> </script>