@vigilkids/section-renderer-vue 0.0.1

package/dist/sections/article/visiva/ArticleNotice.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { computed } from 'vue'
+
+import { useInlineEdit } from '../../../composables/useInlineEdit'
+
+const props = defineProps<{
+  blockOrder: string[]
+  blocks: Record<string, BlockData>
+  editorMode?: boolean
+  settings: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:setting', key: string, value: unknown): void
+  (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
+  (e: 'inline-edit-start', key: string): void
+  (e: 'inline-edit-end'): void
+  (e: 'undo-redo', action: 'redo' | 'undo'): void
+}>()
+
+const s = computed(() => props.settings)
+const variant = computed(() => (s.value.variant as string) || 'tips')
+const title = computed(() => (s.value.title as string) || '')
+
+const { editableAttrs, blockEditableAttrs } = useInlineEdit({
+  editorMode: () => !!props.editorMode,
+  onSettingUpdate: (key, value) => emit('update:setting', key, value),
+  onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
+  onEditStart: (key) => emit('inline-edit-start', key),
+  onEditEnd: () => emit('inline-edit-end'),
+  onUndoRedo: (action) => emit('undo-redo', action),
+})
+</script>
+
+<template>
+<!-- tips 变体: blog-note-style -->
+  <div
+    v-if="variant === 'tips'"
+    class="blog-note-style"
+  >
+    <div class="blog-note-style-badge">
+      <img src="https://cdn.visiva.ai/blog/temp/idea.png" alt="Lightbulb" class="blog-note-style-badge-icon">
+      <span class="blog-note-style-badge-text">Tips</span>
+    </div>
+    <p
+      v-for="id in blockOrder"
+      :key="id"
+      class="blog-note-style-text"
+      v-bind="blockEditableAttrs(id, 'text')"
+    >
+      {{ (blocks[id]?.settings as Record<string, unknown>)?.text ?? '' }}
+    </p>
+  </div>
+
+  <!-- note 变体: blog-note-style2 -->
+  <div
+    v-else-if="variant === 'note'"
+    class="blog-note-style2"
+  >
+    <div class="blog-note-style-badge">
+      <img src="https://cdn.visiva.ai/blog/temp/note.png" alt="Note" class="blog-note-style-badge-icon">
+      <span class="blog-note-style-badge-text">{{ title || 'Tips' }}</span>
+    </div>
+    <p
+      v-for="id in blockOrder"
+      :key="id"
+      class="blog-note-style-text"
+      v-bind="blockEditableAttrs(id, 'text')"
+    >
+      {{ (blocks[id]?.settings as Record<string, unknown>)?.text ?? '' }}
+    </p>
+  </div>
+
+  <!-- info 变体: blog-note-style3 -->
+  <div
+    v-else-if="variant === 'info'"
+    class="blog-note-style3"
+  >
+    <div class="blog-note-style3-header">
+      <!-- #info -->
+      <svg class="blog-note-style3-icon" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M11 0.5C16.799 0.5 21.5 5.20101 21.5 11C21.5 16.799 16.799 21.5 11 21.5C5.20101 21.5 0.5 16.799 0.5 11C0.5 5.20101 5.20101 0.5 11 0.5Z" fill="white" stroke="#CDD2D7"/>
+        <path d="M12.5847 7.37917C12.9571 7.39087 13.3202 7.27513 13.5986 7.05598C13.8657 6.84097 14 6.5525 14 6.19058C14 5.82733 13.8657 5.53887 13.5986 5.32386C13.3242 5.10586 12.9653 4.99007 12.5968 5.00067C12.2282 4.99007 11.8693 5.10586 11.5949 5.32386C11.3278 5.53887 11.1935 5.82733 11.1935 6.18925C11.1935 6.5525 11.3278 6.84097 11.5949 7.05598C11.8654 7.27259 12.22 7.38837 12.5847 7.37917ZM12.8684 14.8913C12.8684 14.8071 12.8759 14.6963 12.891 14.5574C12.9061 14.4185 12.9061 14.2863 12.891 14.1608L11.6416 15.4335C11.5164 15.559 11.3851 15.6565 11.2524 15.7259C11.1181 15.7954 11.0049 15.8168 10.9114 15.7887C10.7695 15.7326 10.7061 15.6351 10.7227 15.4962L12.7974 9.71627C12.8744 9.3263 12.805 8.99243 12.5847 8.71465C12.3644 8.43687 12.0113 8.26993 11.524 8.21384C10.9732 8.2272 10.3727 8.43286 9.71935 8.8295C9.06752 9.22614 8.49717 9.73096 8.01132 10.3426V10.6551C7.99623 10.7953 7.99623 10.9276 8.01132 11.0531L9.25915 9.77903C9.38589 9.65483 9.51565 9.55734 9.64843 9.48656C9.78423 9.41712 9.88985 9.39708 9.96831 9.42513C10.1252 9.49324 10.1796 9.60542 10.1328 9.759L8.08072 15.5176C8.02381 15.673 8.00918 15.838 8.03802 15.9993C8.06686 16.1606 8.13837 16.3136 8.2467 16.4458C8.46699 16.7182 8.85175 16.9025 9.40249 17C10.1871 16.9866 10.848 16.7837 11.3821 16.3937C11.9593 15.9612 12.4603 15.4548 12.8684 14.8913Z" fill="#121212"/>
+      </svg>
+      <h3 class="blog-note-style3-title" v-bind="editableAttrs('title')">{{ title || 'Note' }}</h3>
+    </div>
+    <p
+      v-for="id in blockOrder"
+      :key="id"
+      class="blog-note-style3-text"
+      v-bind="blockEditableAttrs(id, 'text')"
+    >
+      {{ (blocks[id]?.settings as Record<string, unknown>)?.text ?? '' }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.blog-note-style{padding:36px 16px 20px}.blog-note-style,.blog-note-style2{background:#f7f8fa;border-radius:0 0 5px 5px;margin-top:40px;position:relative}.blog-note-style2{padding:36px 12px 20px}.blog-note-style-badge{align-items:center;background:#02a967;border-radius:5px 0 10px 0;display:flex;gap:4px;height:24px;left:0;padding:0 8px;position:absolute;top:0}.blog-note-style-badge-icon{height:14px;width:14px}.blog-note-style-badge-text{color:#fff;font-size:14px;font-weight:700}.blog-note-style-text{color:#666262;font-size:14px;font-weight:300;line-height:1.625;margin:0}.blog-note-style3{background:#f7f8fa;border-radius:10px;margin-top:40px;padding:20px 16px}.blog-note-style3-header{align-items:center;display:flex;gap:12px;margin-bottom:14px}.blog-note-style3-icon{flex-shrink:0;height:22px;width:22px}.blog-note-style3-title{color:#000;font-weight:600;margin:0}.blog-note-style3-text{color:#666262;font-size:14px;font-weight:300;line-height:1.625;margin:0}@media (min-width:768px){.blog-note-style,.blog-note-style2{padding:36px 16px 20px}.blog-note-style-text{font-size:16px}.blog-note-style3{border-radius:15px;padding:24px}.blog-note-style3-text{font-size:16px}}
+</style>

package/dist/sections/article/visiva/ArticleNotice.vue.d.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/visiva/ArticleProsCons.d.vue.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/visiva/ArticleProsCons.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { computed } from 'vue'
+
+import { useInlineEdit } from '../../../composables/useInlineEdit'
+
+const props = defineProps<{
+  blockOrder: string[]
+  blocks: Record<string, BlockData>
+  editorMode?: boolean
+  settings: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:setting', key: string, value: unknown): void
+  (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
+  (e: 'inline-edit-start', key: string): void
+  (e: 'inline-edit-end'): void
+  (e: 'undo-redo', action: 'redo' | 'undo'): void
+}>()
+
+const prosTitle = computed(
+  () => (props.settings.pros_title as string) || 'Pros',
+)
+const consTitle = computed(
+  () => (props.settings.cons_title as string) || 'Cons',
+)
+
+const prosBlocks = computed(() =>
+  props.blockOrder.filter((id) => props.blocks[id]?.type === 'pro'),
+)
+const consBlocks = computed(() =>
+  props.blockOrder.filter((id) => props.blocks[id]?.type === 'con'),
+)
+
+const { editableAttrs, blockEditableAttrs } = useInlineEdit({
+  editorMode: () => !!props.editorMode,
+  onSettingUpdate: (key, value) => emit('update:setting', key, value),
+  onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
+  onEditStart: (key) => emit('inline-edit-start', key),
+  onEditEnd: () => emit('inline-edit-end'),
+  onUndoRedo: (action) => emit('undo-redo', action),
+})
+</script>
+
+<template>
+<div class="blog-pros-cons">
+    <!-- Pros -->
+    <div v-if="prosBlocks.length > 0" class="blog-pros-cons-card">
+      <div class="blog-pros-cons-header">
+        <!-- #like -->
+        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="14" cy="14" r="13" fill="#02A967"/>
+          <path d="M8.70457 11.3571C8.8854 11.3571 9.05883 11.4324 9.1867 11.5664C9.31456 11.7003 9.3864 11.882 9.3864 12.0714V20.2857C9.3864 20.4752 9.31456 20.6568 9.1867 20.7908C9.05883 20.9247 8.8854 21 8.70457 21H8.1932C7.87674 21 7.57325 20.8683 7.34948 20.6339C7.12571 20.3995 7 20.0815 7 19.75V12.6071C7 12.2756 7.12571 11.9577 7.34948 11.7233C7.57325 11.4888 7.87674 11.3571 8.1932 11.3571H8.70457ZM15.1871 6C15.5491 6 15.8963 6.15066 16.1523 6.41884C16.4083 6.68701 16.5521 7.05074 16.5521 7.43V10.6429C16.5521 10.8323 16.6239 11.014 16.7518 11.1479C16.8796 11.2819 17.0531 11.3571 17.2339 11.3571H19.9527C20.2711 11.357 20.5852 11.4347 20.8699 11.5841C21.1546 11.7334 21.4021 11.9503 21.5927 12.2175C21.7833 12.4847 21.9118 12.7948 21.968 13.1232C22.0241 13.4515 22.0063 13.789 21.916 14.1089L20.399 19.4661C20.2733 19.9092 20.0143 20.298 19.6605 20.5744C19.3068 20.8509 18.8773 21.0001 18.436 21H11.0917C11.0021 21 10.9134 20.9816 10.8306 20.9457C10.7478 20.9099 10.6726 20.8573 10.6092 20.7909C10.5458 20.7246 10.4955 20.6459 10.4612 20.5592C10.4269 20.4725 10.4092 20.3796 10.4091 20.2857V12.0714C10.4091 11.882 10.481 11.7003 10.6088 11.5664C10.7367 11.4324 10.9101 11.3571 11.091 11.3571H11.4329C11.7266 11.3572 12.0121 11.2556 12.245 11.0681C12.4779 10.8807 12.6452 10.618 12.7209 10.3207L13.4699 7.38143C13.5709 6.98517 13.794 6.63495 14.1045 6.38515C14.415 6.13535 14.7956 5.99996 15.1871 6Z" fill="white"/>
+        </svg>
+        <h3 class="blog-pros-cons-title" v-bind="editableAttrs('pros_title')">{{ prosTitle }}</h3>
+      </div>
+      <ul class="blog-pros-cons-list">
+        <template v-for="blockId in prosBlocks" :key="blockId">
+          <li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')">
+            {{ blocks[blockId]!.settings.text }}
+          </li>
+        </template>
+      </ul>
+    </div>
+
+    <!-- Cons -->
+    <div v-if="consBlocks.length > 0" class="blog-pros-cons-card">
+      <div class="blog-pros-cons-header">
+        <!-- #unlike -->
+        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g clip-path="url(#unlike-clip0)">
+            <circle cx="14" cy="14" r="13" fill="#F3455C"/>
+            <path d="M8.70457 16.6429C8.8854 16.6429 9.05883 16.5676 9.1867 16.4336C9.31456 16.2997 9.3864 16.118 9.3864 15.9286V7.71429C9.3864 7.52485 9.31456 7.34317 9.1867 7.20921C9.05883 7.07526 8.8854 7 8.70457 7H8.1932C7.87674 7 7.57325 7.1317 7.34948 7.36612C7.12571 7.60054 7 7.91848 7 8.25V15.3929C7 15.7244 7.12571 16.0423 7.34948 16.2767C7.57325 16.5112 7.87674 16.6429 8.1932 16.6429H8.70457ZM15.1871 22C15.5491 22 15.8963 21.8493 16.1523 21.5812C16.4083 21.313 16.5521 20.9493 16.5521 20.57V17.3571C16.5521 17.1677 16.6239 16.986 16.7518 16.8521C16.8796 16.7181 17.0531 16.6429 17.2339 16.6429H19.9527C20.2711 16.643 20.5852 16.5653 20.8699 16.4159C21.1546 16.2666 21.4021 16.0497 21.5927 15.7825C21.7833 15.5153 21.9118 15.2052 21.968 14.8768C22.0241 14.5485 22.0063 14.211 21.916 13.8911L20.399 8.53393C20.2733 8.09076 20.0143 7.70199 19.6605 7.42557C19.3068 7.14915 18.8773 6.99988 18.436 7H11.0917C11.0021 6.99995 10.9134 7.01839 10.8306 7.05426C10.7478 7.09013 10.6726 7.14274 10.6092 7.20906C10.5458 7.27539 10.4955 7.35415 10.4612 7.44083C10.4269 7.52752 10.4092 7.62044 10.4091 7.71429V15.9286C10.4091 16.118 10.481 16.2997 10.6088 16.4336C10.7367 16.5676 10.9101 16.6429 11.091 16.6429H11.4329C11.7266 16.6428 12.0121 16.7444 12.245 16.9319C12.4779 17.1193 12.6452 17.382 12.7209 17.6793L13.4699 20.6186C13.5709 21.0148 13.794 21.365 14.1045 21.6148C14.415 21.8646 14.7956 22 15.1871 22Z" fill="white"/>
+          </g>
+          <defs>
+            <clipPath id="unlike-clip0">
+              <rect width="28" height="28" fill="white" transform="matrix(1 0 0 -1 0 28)"/>
+            </clipPath>
+          </defs>
+        </svg>
+        <h3 class="blog-pros-cons-title" v-bind="editableAttrs('cons_title')">{{ consTitle }}</h3>
+      </div>
+      <ul class="blog-pros-cons-list">
+        <template v-for="blockId in consBlocks" :key="blockId">
+          <li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')">
+            {{ blocks[blockId]!.settings.text }}
+          </li>
+        </template>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.blog-pros-cons{display:flex;flex-direction:column;gap:12px;margin-top:40px}.blog-pros-cons-card{background:#f7f8fa;border-radius:10px;flex:1;padding:20px 12px}.blog-pros-cons-header{align-items:center;display:flex;gap:12px;margin-bottom:16px}.blog-pros-cons-title{color:#000;font-size:18px;font-weight:700;margin:0}.blog-pros-cons-list{color:#000;font-size:14px;list-style-position:inside;list-style-type:disc;margin:0;padding:0}.blog-pros-cons-list li+li{margin-top:12px}@media (min-width:768px){.blog-pros-cons{flex-direction:row;gap:24px}.blog-pros-cons-card{border-radius:20px;padding:26px 30px}}
+</style>

package/dist/sections/article/visiva/ArticleProsCons.vue.d.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/visiva/ArticleQuestion.d.vue.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/visiva/ArticleQuestion.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { computed } from 'vue'
+
+import { useInlineEdit } from '../../../composables/useInlineEdit'
+
+const props = defineProps<{
+  blockOrder: string[]
+  blocks: Record<string, BlockData>
+  editorMode?: boolean
+  settings: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:setting', key: string, value: unknown): void
+  (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
+  (e: 'inline-edit-start', key: string): void
+  (e: 'inline-edit-end'): void
+  (e: 'undo-redo', action: 'redo' | 'undo'): void
+}>()
+
+const s = computed(() => props.settings)
+const variant = computed(() => (s.value.variant as string) || 'default')
+
+const items = computed(() =>
+  props.blockOrder
+    .map((id) => props.blocks[id])
+    .filter((b): b is BlockData => !!b && b.type === 'qa_item'),
+)
+
+const { blockEditableAttrs } = useInlineEdit({
+  editorMode: () => !!props.editorMode,
+  onSettingUpdate: (key, value) => emit('update:setting', key, value),
+  onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
+  onEditStart: (key) => emit('inline-edit-start', key),
+  onEditEnd: () => emit('inline-edit-end'),
+  onUndoRedo: (action) => emit('undo-redo', action),
+})
+</script>
+
+<template>
+<!-- blog-qa-card: default -->
+  <div v-if="variant === 'default'" class="blog-qa-card">
+    <div
+      v-for="(item, index) in items"
+      :key="blockOrder[index]"
+      :class="index === items.length - 1 ? 'blog-qa-item-last' : 'blog-qa-item'"
+    >
+      <h3 class="blog-qa-question" v-bind="blockEditableAttrs(blockOrder[index], 'question')">
+        {{ item.settings.question }}
+      </h3>
+      <p class="blog-qa-answer" v-html="String(item.settings.answer || '')" />
+    </div>
+  </div>
+
+  <!-- blog-qa-card2: titled -->
+  <template v-else-if="variant === 'titled'">
+    <h2 class="blog-qa-card2-title">{{ s.title }}</h2>
+    <p v-if="s.intro" class="blog-qa-card2-intro">{{ s.intro }}</p>
+    <div class="blog-qa-card2-container">
+      <div
+        v-for="(item, index) in items"
+        :key="blockOrder[index]"
+        :class="index === items.length - 1 ? 'blog-qa-item-last' : 'blog-qa-item'"
+      >
+        <h3 class="blog-qa-question-black" v-bind="blockEditableAttrs(blockOrder[index], 'question')">
+          {{ item.settings.question }}
+        </h3>
+        <p class="blog-qa-answer">
+          {{ item.settings.answer }}
+        </p>
+      </div>
+    </div>
+  </template>
+</template>
+
+<style scoped>
+.blog-qa-card{background:#f7f8fa;border-radius:10px;font-size:14px;margin-top:40px;padding:20px 16px}.blog-qa-item{margin-bottom:24px}.blog-qa-item-last{margin-bottom:0}.blog-qa-question,.blog-qa-question-black{font-weight:600;margin:0 0 8px}.blog-qa-question-black{color:#000}.blog-qa-answer{color:#666262;line-height:1.625;margin:0}.blog-qa-answer :deep(span){color:#000;font-weight:600}.blog-qa-card2-title{font-size:24px;font-weight:700;margin-bottom:0;margin-top:40px}.blog-qa-card2-container,.blog-qa-card2-intro{font-size:14px;margin-top:20px}.blog-qa-card2-container{background:#f7f8fa;border-radius:10px;padding:20px 16px}@media (min-width:768px){.blog-qa-card{border-radius:20px;font-size:16px;padding:24px 20px}.blog-qa-card2-title{font-size:28px}.blog-qa-card2-intro{font-size:16px}.blog-qa-card2-container{border-radius:20px;font-size:16px;padding:24px 20px}}
+</style>

package/dist/sections/article/visiva/ArticleQuestion.vue.d.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/visiva/ArticleQuote.d.vue.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/visiva/ArticleQuote.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { computed } from 'vue'
+
+import { renderContent } from '../prosemirror'
+import { useInlineEdit } from '../../../composables/useInlineEdit'
+
+const props = defineProps<{
+  blockOrder: string[]
+  blocks: Record<string, BlockData>
+  editorMode?: boolean
+  settings: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:setting', key: string, value: unknown): void
+  (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
+  (e: 'inline-edit-start', key: string): void
+  (e: 'inline-edit-end'): void
+  (e: 'undo-redo', action: 'redo' | 'undo'): void
+}>()
+
+const s = computed(() => props.settings)
+const renderedContent = computed(() => renderContent(s.value.content))
+
+const { editableAttrs } = useInlineEdit({
+  editorMode: () => !!props.editorMode,
+  onSettingUpdate: (key, value) => emit('update:setting', key, value),
+  onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
+  onEditStart: (key) => emit('inline-edit-start', key),
+  onEditEnd: () => emit('inline-edit-end'),
+  onUndoRedo: (action) => emit('undo-redo', action),
+})
+</script>
+
+<template>
+<div class="blog-quote">
+    <h3 v-if="s.title" class="blog-quote-title" v-bind="editableAttrs('title')">{{ s.title }}</h3>
+    <p class="blog-quote-text" v-html="renderedContent" />
+    <div v-if="s.attribution" class="blog-quote-footer">
+      <span class="blog-quote-divider" />
+      <p class="blog-quote-author">by <span v-bind="editableAttrs('attribution')">{{ s.attribution }}</span></p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.blog-quote{background:#fff;border:1px solid #d4d4d4;border-radius:10px;margin-top:40px;padding:20px 12px}.blog-quote-title{font-size:16px;font-weight:600;margin:0 0 16px}.blog-quote-text{font-size:12px;font-style:italic;line-height:1.625;margin:0 0 8px}.blog-quote-footer{align-items:flex-end;display:flex;gap:8px}.blog-quote-divider{background:#666262;display:inline-block;height:1px;margin-bottom:4px;width:48px}.blog-quote-author{color:#666262;font-size:12px;margin:0}@media (min-width:768px){.blog-quote{border-radius:20px;padding:30px 28px}.blog-quote-title{font-size:20px}.blog-quote-text{font-size:14px;margin-bottom:16px}.blog-quote-author{font-size:14px}}
+</style>

package/dist/sections/article/visiva/ArticleQuote.vue.d.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/visiva/ArticleStepList.d.vue.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/visiva/ArticleStepList.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { computed } from 'vue'
+
+import { useInlineEdit } from '../../../composables/useInlineEdit'
+
+const props = defineProps<{
+  blockOrder: string[]
+  blocks: Record<string, BlockData>
+  editorMode?: boolean
+  settings: Record<string, unknown>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:setting', key: string, value: unknown): void
+  (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
+  (e: 'inline-edit-start', key: string): void
+  (e: 'inline-edit-end'): void
+  (e: 'undo-redo', action: 'redo' | 'undo'): void
+}>()
+
+const blockOrder = computed(() => props.blockOrder)
+const blocks = computed(() => props.blocks)
+
+const { blockEditableAttrs } = useInlineEdit({
+  editorMode: () => !!props.editorMode,
+  onSettingUpdate: (key, value) => emit('update:setting', key, value),
+  onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
+  onEditStart: (key) => emit('inline-edit-start', key),
+  onEditEnd: () => emit('inline-edit-end'),
+  onUndoRedo: (action) => emit('undo-redo', action),
+})
+</script>
+
+<template>
+<template v-for="blockId in blockOrder" :key="blockId">
+    <h5 v-if="blocks[blockId]" class="blog-step">
+      <span class="blog-step-number" v-bind="blockEditableAttrs(blockId, 'label')">{{ blocks[blockId]!.settings.label }}</span>
+      <span>. </span>
+      <span v-html="String(blocks[blockId]!.settings.description || '')" />
+    </h5>
+  </template>
+</template>
+
+<style scoped>
+.blog-step{font-size:16px;font-weight:400;margin-top:20px}.blog-step-number{color:#1fb04f;font-style:italic;font-weight:900}.blog-step :deep(a){color:#1fb04f;font-weight:900;text-decoration:none}@media (min-width:768px){.blog-step{font-size:20px}}
+</style>

package/dist/sections/article/visiva/ArticleStepList.vue.d.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/sections/article/visiva/ArticleSubheading.d.vue.ts

@@ -0,0 +1,21 @@
+import type { BlockData } from '@vigilkids/section-core';
+type __VLS_Props = {
+    blockOrder: string[];
+    blocks: Record<string, BlockData>;
+    editorMode?: boolean;
+    settings: Record<string, unknown>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:setting": (key: string, value: unknown) => any;
+    "update:block-setting": (blockId: string, key: string, value: unknown) => any;
+    "inline-edit-start": (key: string) => any;
+    "inline-edit-end": () => any;
+    "undo-redo": (action: "redo" | "undo") => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
+    "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
+    "onInline-edit-start"?: ((key: string) => any) | undefined;
+    "onInline-edit-end"?: (() => any) | undefined;
+    "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;