generated from gitea_admin/default
92 lines
2.3 KiB
Vue
92 lines
2.3 KiB
Vue
<template>
|
|
<component v-if="isText && hasTextValue && wrapTag" :is="wrapTag">
|
|
{{ textValue }}
|
|
</component>
|
|
|
|
<template v-else-if="isText && hasTextValue">
|
|
{{ textValue }}
|
|
</template>
|
|
|
|
<component v-else-if="isList" :is="listTag">
|
|
<StrapiBlockChildsConvert
|
|
v-for="(child, i) in children"
|
|
:key="i"
|
|
:node="child"
|
|
/>
|
|
</component>
|
|
|
|
<li v-else-if="isListItem">
|
|
<StrapiBlockChildsConvert
|
|
v-for="(child, i) in children"
|
|
:key="i"
|
|
:node="child"
|
|
/>
|
|
</li>
|
|
|
|
<a
|
|
v-else-if="isLink"
|
|
:href="href"
|
|
class="strapi-inline__link"
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
>
|
|
<StrapiBlockChildsConvert
|
|
v-for="(child, i) in children"
|
|
:key="i"
|
|
:node="child"
|
|
/>
|
|
</a>
|
|
|
|
<template v-else>
|
|
<StrapiBlockChildsConvert
|
|
v-for="(child, i) in children"
|
|
:key="i"
|
|
:node="child"
|
|
/>
|
|
</template>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
node: { type: Object, required: true },
|
|
})
|
|
|
|
const isText = computed(() => props.node?.type === 'text')
|
|
const isLink = computed(() => props.node?.type === 'link')
|
|
const isList = computed(() => props.node?.type === 'list')
|
|
const isListItem = computed(() => props.node?.type === 'list-item')
|
|
const children = computed(() => props.node?.children || [])
|
|
const listTag = computed(() => (
|
|
props.node?.format === 'ordered' ? 'ol' : 'ul'
|
|
))
|
|
|
|
const textValue = computed(() => (props.node?.text ?? '').toString())
|
|
const hasTextValue = computed(() => textValue.value.length > 0)
|
|
|
|
// Dans Strapi blocks, les liens peuvent être "url" ou "href" selon les versions/plugins
|
|
const href = computed(() => props.node?.url || props.node?.href || '#')
|
|
|
|
/**
|
|
* Gestion des "marks" (bold/italic/underline/...)
|
|
* Ici on choisit une stratégie simple : UN seul wrapper.
|
|
* -> si tu veux combiner plusieurs marks (bold + italic), on le fait après.
|
|
*/
|
|
const wrapTag = computed(() => {
|
|
const n = props.node || {}
|
|
if (!isText.value) return null
|
|
|
|
if (n.code) return 'code'
|
|
if (n.bold) return 'strong'
|
|
if (n.italic) return 'em'
|
|
if (n.underline) return 'u'
|
|
if (n.strikethrough) return 's'
|
|
return null
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
</style>
|