ADD: RichText

Added RichText system

app/components/RichText/General.vue

@@ -0,0 +1,40 @@
+<template>
+  <component :is="computedComponent.is" v-bind="computedComponent.props" />
+</template>
+
+<script setup lang="ts">
+import type { RichText } from './Types'
+
+type Props = {
+  element : RichText
+}
+
+const { element } = defineProps<Props>()
+
+const computedComponent = computed(() => {
+  let is : ReturnType<typeof resolveComponent> = {}
+
+  switch (element.type) {
+    case 'plain':
+      is = resolveComponent('RichTextPlain')
+      break
+    case 'p':
+      is = resolveComponent('RichTextParagraph')
+      break
+    case 'span':
+      is = resolveComponent('RichTextString')
+      break
+    case 'a':
+      is = resolveComponent('RichTextLink')
+      break
+    case 'br':
+      is = resolveComponent('RichTextNewLine')
+      break
+    default:
+      break
+  }
+
+  return { is, props: { ...element } }
+})
+
+</script>

app/components/RichText/Link.vue

@@ -0,0 +1,12 @@
+<template>
+  <a :href="href" :target="target" class="text inline-flex-row" :class="{ reverse : icon && icon.position === 'end' }">
+    <Icon v-if="icon" :name="icon.name" mode="svg" />
+    {{ content }}
+  </a>
+</template>
+
+<script setup lang="ts">
+import type { RichTextLink } from './Types'
+
+defineProps<RichTextLink>()
+</script>

app/components/RichText/NewLine.vue

@@ -0,0 +1,3 @@
+<template>
+  <br>
+</template>

app/components/RichText/Paragraph.vue

@@ -0,0 +1,11 @@
+<template>
+  <p :class="css">
+    <RichTextGeneral v-for="element in children" :element="element" />
+  </p>
+</template>
+
+<script setup lang="ts">
+import type { RichTextParagraph } from './Types'
+
+defineProps<RichTextParagraph>()
+</script>

app/components/RichText/Plain.vue

@@ -0,0 +1,9 @@
+<template>
+  {{ content }}
+</template>
+
+<script setup lang="ts">
+import type { RichTextPlain } from './Types'
+
+defineProps<RichTextPlain>()
+</script>

app/components/RichText/RichText.vue

@@ -0,0 +1,22 @@
+<template>
+  <section>
+    <template v-if="Array.isArray(elements)">
+      <General v-for="element in elements" :element="element" />
+    </template>
+    <template v-else>
+      <General :element="elements" />
+    </template>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { RichText } from './Types'
+import General from './General.vue'
+
+type Props = {
+  elements : RichText | RichText[]
+}
+
+
+defineProps<Props>()
+</script>

app/components/RichText/String.vue

@@ -0,0 +1,11 @@
+<template>
+  <span :class="css">
+    {{ content }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import type { RichTextSpan } from './Types'
+
+defineProps<RichTextSpan>()
+</script>

app/components/RichText/Types.ts

@@ -0,0 +1,34 @@
+type RichTextBasis = {
+  type: string
+  content: string
+  css ?: string
+}
+
+export type RichTextPlain = RichTextBasis & {
+  type: 'plain'
+}
+
+export type RichTextParagraph = Omit<RichTextBasis, 'content'> & {
+  type: 'p'
+  children ?: RichText[]
+}
+
+export type RichTextSpan = RichTextBasis & {
+  type: 'span'
+}
+
+export type RichTextLink = RichTextBasis & {
+  type: 'a'
+  href: string
+  icon ?: {
+    name: string
+    position : 'start' | 'end'
+  }
+  target ?: string
+}
+
+export type RichTextNewLine = {
+  type: 'br'
+}
+
+export type RichText = RichTextPlain | RichTextParagraph |  RichTextSpan | RichTextLink | RichTextNewLine