Concerts

app/components/strapiconvert/StrapiBlockChildsConvert.vue

@@ -0,0 +1,91 @@
+<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>