@vigilkids/section-renderer-vue 0.2.2 → 0.5.0

package/dist/interactions/vigilkids.d.ts

@@ -1,5 +1,48 @@
 /**
  * vigilkids 产品专属 DOM 交互
- * 使用事件委托，覆盖 innerHTML 直出内容的产品特有交互
+ *
+ * 使用场景：
+ * - admin preview-host：走 Vue 组件渲染路径，不调用本模块
+ * - marketing 站点（Nuxt）：innerHTML 直出 HTML 后 onMounted 激活交互
+ *
+ * 设计要点：
+ * - 幂等绑定：重复调用 setupInteractions 不会重复绑定事件
+ * - 可销毁：提供 destroyInteractions 清理 embla 实例和绑定标记，避免卸载后内存泄漏
+ * - 不破坏 vDOM：banner 隐藏用 style.display，而非 el.remove()，避免外层 Vue 重渲染冲突
+ */
+/**
+ * 推荐文章轮播（Module 4）
+ * - 桌面 ≥1025px：保持 grid 布局，仅做 dot 点击滚动定位
+ * - 移动端 ≤1024px：动态加载 embla-carousel，同步 dot / card 高亮
+ *
+ * 幂等：容器级 data-embla-init + dot 级 data-bound，重复调用不会重复绑定或重复 new 实例
+ * 内存：embla 实例存入 WeakMap，destroyInteractions 时调用 .destroy() 释放监听器和 DOM 引用
+ */
+export declare function setupCarousel(root?: Document | HTMLElement): void;
+/**
+ * 留存 Banner（Module 5）
+ *
+ * 关闭策略：style.display = 'none'
+ * - 不调用 el.remove()：marketing 侧 Nuxt 在 v-html 容器下，Vue diff 会检测 DOM 差异导致警告
+ * - admin 侧走 Vue 组件路径不进入本函数；innerHTML 场景靠本函数统一管理显隐
+ *
+ * localStorage key 规则：`retention-banner-dismissed:{dismissKey}`
+ */
+export declare function setupRetentionBanner(root?: Document | HTMLElement): void;
+/**
+ * 激活所有产品交互
+ * 幂等：所有子函数都有各自的绑定保护，重复调用安全
  */
 export declare function setupInteractions(): void;
+/**
+ * 销毁产品交互
+ *
+ * 必须在组件卸载前调用，避免：
+ * - embla 实例持有 viewport 引用 + resize/scroll 监听器导致内存泄漏
+ * - data-bound 标记残留导致重挂载后事件绑定失败
+ *
+ * 不强制解绑 FAQ document delegate：
+ * - document 级委托不持有 root 引用，卸载不会产生泄漏
+ * - 跨多次 mount/unmount 复用同一 listener 反而更省
+ */
+export declare function destroyInteractions(root?: Document | HTMLElement): void;

package/dist/interactions/vigilkids.mjs

@@ -1,4 +1,9 @@
-export function setupInteractions() {
+const emblaInstances = /* @__PURE__ */ new WeakMap();
+let faqDelegateBound = false;
+function setupFaqAccordion() {
+  if (faqDelegateBound)
+    return;
+  faqDelegateBound = true;
   document.addEventListener("click", (e) => {
     const faqTitle = e.target.closest?.(".faq-item-title");
     if (!faqTitle)
@@ -24,3 +29,112 @@ export function setupInteractions() {
       body.style.maxHeight = isActive ? "0" : `${body.scrollHeight}px`;
   });
 }
+function wireDesktopDotClicks(root) {
+  const dots = root.querySelectorAll(".recommend-dot");
+  const cards = root.querySelectorAll(".recommend-card");
+  dots.forEach((dot, i) => {
+    if (dot.dataset.bound === "1")
+      return;
+    dot.dataset.bound = "1";
+    dot.addEventListener("click", () => {
+      const target = cards[i];
+      if (target)
+        target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
+    });
+  });
+}
+export function setupCarousel(root = document) {
+  const els = root.querySelectorAll('[data-component="related-articles-carousel"]');
+  els.forEach((el) => {
+    if (el.dataset.emblaInit === "1")
+      return;
+    el.dataset.emblaInit = "1";
+    const viewport = el.querySelector(".recommend-grid");
+    if (!viewport)
+      return;
+    const mq = window.matchMedia("(max-width: 1024px)");
+    if (!mq.matches) {
+      wireDesktopDotClicks(el);
+      return;
+    }
+    import("embla-carousel").then(({ default: EmblaCarousel }) => {
+      if (el.dataset.emblaInit !== "1")
+        return;
+      const embla = EmblaCarousel(viewport, {
+        loop: false,
+        align: "start",
+        containScroll: "trimSnaps"
+      });
+      emblaInstances.set(el, embla);
+      viewport.classList.add("recommend-slider-ready");
+      const dots = el.querySelectorAll(".recommend-dot");
+      const cards = el.querySelectorAll(".recommend-card");
+      const syncActive = () => {
+        const idx = embla.selectedScrollSnap();
+        dots.forEach((d, i) => d.classList.toggle("active", i === idx));
+        cards.forEach((c, i) => c.classList.toggle("is-active", i === idx));
+      };
+      embla.on("select", syncActive);
+      embla.on("init", syncActive);
+      syncActive();
+      dots.forEach((dot, i) => {
+        if (dot.dataset.bound === "1")
+          return;
+        dot.dataset.bound = "1";
+        dot.addEventListener("click", () => embla.scrollTo(i));
+      });
+    });
+  });
+}
+export function setupRetentionBanner(root = document) {
+  const els = root.querySelectorAll('[data-component="retention-banner"]');
+  els.forEach((el) => {
+    const key = el.dataset.dismissKey;
+    if (!key)
+      return;
+    const storageKey = `retention-banner-dismissed:${key}`;
+    if (localStorage.getItem(storageKey)) {
+      el.style.display = "none";
+      return;
+    }
+    const closeBtn = el.querySelector(".retention-banner-close");
+    if (!closeBtn)
+      return;
+    if (closeBtn.dataset.bound === "1")
+      return;
+    closeBtn.dataset.bound = "1";
+    closeBtn.addEventListener("click", () => {
+      localStorage.setItem(storageKey, "1");
+      el.style.display = "none";
+    });
+  });
+}
+export function setupInteractions() {
+  setupFaqAccordion();
+  setupCarousel();
+  setupRetentionBanner();
+}
+export function destroyInteractions(root = document) {
+  const carousels = root.querySelectorAll('[data-component="related-articles-carousel"]');
+  carousels.forEach((el) => {
+    const embla = emblaInstances.get(el);
+    if (embla) {
+      embla.destroy();
+      emblaInstances.delete(el);
+    }
+    delete el.dataset.emblaInit;
+    el.querySelectorAll('.recommend-dot[data-bound="1"]').forEach((dot) => {
+      delete dot.dataset.bound;
+    });
+    const viewport = el.querySelector(".recommend-grid");
+    if (viewport)
+      viewport.classList.remove("recommend-slider-ready");
+  });
+  const banners = root.querySelectorAll('[data-component="retention-banner"]');
+  banners.forEach((el) => {
+    el.style.display = "";
+    const closeBtn = el.querySelector(".retention-banner-close");
+    if (closeBtn)
+      delete closeBtn.dataset.bound;
+  });
+}

package/dist/sections/article/index.mjs

@@ -93,6 +93,66 @@ export function registerArticleSections() {
     componentName: "ArticleToc",
     component: () => import("./vigilkids/ArticleToc.vue")
   });
+  registerSection({
+    name: "article-related-articles",
+    productCode: "vigilkids",
+    componentName: "ArticleRelatedArticles",
+    component: () => import("./vigilkids/ArticleRelatedArticles.vue")
+  });
+  registerSection({
+    name: "article-retention-banner",
+    productCode: "vigilkids",
+    componentName: "ArticleRetentionBanner",
+    component: () => import("./vigilkids/ArticleRetentionBanner.vue")
+  });
+  registerSection({
+    name: "article-tip-note",
+    productCode: "vigilkids",
+    componentName: "ArticleTipNote",
+    component: () => import("./vigilkids/ArticleTipNote.vue")
+  });
+  registerSection({
+    name: "article-top-ad",
+    productCode: "vigilkids",
+    componentName: "ArticleTopAd",
+    component: () => import("./vigilkids/ArticleTopAd.vue")
+  });
+  registerSection({
+    name: "article-highlight-paragraph",
+    productCode: "vigilkids",
+    componentName: "ArticleHighlightParagraph",
+    component: () => import("./vigilkids/ArticleHighlightParagraph.vue")
+  });
+  registerSection({
+    name: "article-section-intro",
+    productCode: "vigilkids",
+    componentName: "ArticleSectionIntro",
+    component: () => import("./vigilkids/ArticleSectionIntro.vue")
+  });
+  registerSection({
+    name: "article-toc-list",
+    productCode: "vigilkids",
+    componentName: "ArticleTocList",
+    component: () => import("./vigilkids/ArticleTocList.vue")
+  });
+  registerSection({
+    name: "article-styled-heading",
+    productCode: "vigilkids",
+    componentName: "ArticleStyledHeading",
+    component: () => import("./vigilkids/ArticleStyledHeading.vue")
+  });
+  registerSection({
+    name: "article-product-card",
+    productCode: "vigilkids",
+    componentName: "ArticleProductCard",
+    component: () => import("./vigilkids/ArticleProductCard.vue")
+  });
+  registerSection({
+    name: "article-product-info-banner",
+    productCode: "vigilkids",
+    componentName: "ArticleProductInfoBanner",
+    component: () => import("./vigilkids/ArticleProductInfoBanner.vue")
+  });
   registerSection({
     name: "article-heading",
     productCode: "visiva",

package/dist/sections/article/vigilkids/ArticleFaq.vue

@@ -19,7 +19,8 @@ const emit = defineEmits<{
   (e: 'undo-redo', action: 'redo' | 'undo'): void
 }>()
 
-useInlineEdit({
+// FAQ 的可编辑粒度在 block 维度（每个 Q/A pair），透传给子项
+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),
@@ -32,7 +33,13 @@ useInlineEdit({
 <template>
   <div class="faq-list">
     <template v-for="blockId in blockOrder" :key="blockId">
-      <ArticleFaqItem v-if="blocks[blockId]" :settings="blocks[blockId]!.settings" />
+      <ArticleFaqItem
+        v-if="blocks[blockId]"
+        :block-id="blockId"
+        :editor-mode="editorMode"
+        :block-editable-attrs="blockEditableAttrs"
+        :settings="blocks[blockId]!.settings"
+      />
     </template>
   </div>
 </template>

package/dist/sections/article/vigilkids/ArticleFaqItem.d.vue.ts

@@ -1,5 +1,8 @@
 type __VLS_Props = {
+    blockId: string;
+    editorMode?: boolean;
     settings: Record<string, unknown>;
+    blockEditableAttrs: (blockId: string, key: string) => Record<string, unknown>;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/sections/article/vigilkids/ArticleFaqItem.vue

@@ -1,28 +1,28 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
+// 展开/收起状态完全由 interactions/vigilkids.ts 的 document delegate 接管
+// 这里不再自持 active/answer ref，避免与 delegate 双重触发
 defineProps<{
+  blockId: string
+  editorMode?: boolean
   settings: Record<string, unknown>
+  // 从父 Section 透传的 block-scope 可编辑属性工厂
+  blockEditableAttrs: (blockId: string, key: string) => Record<string, unknown>
 }>()
-
-const active = ref(false)
-const answer = ref<HTMLElement>()
-
-function toggle() {
-  const el = answer.value
-  if (el) {
-    el.style.maxHeight = active.value ? '0' : `${el.scrollHeight}px`
-  }
-  active.value = !active.value
-}
 </script>
 
 <template>
-  <div class="faq-item" :class="{ active }" @click="toggle">
-    <p class="faq-item-title">
-      {{ settings.question }}
-    </p>
+  <div class="faq-item">
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <p
+      class="faq-item-title"
+      v-bind="blockEditableAttrs(blockId, 'question')"
+      v-html="settings.question"
+    />
     <!-- eslint-disable-next-line vue/no-v-html -->
-    <div ref="answer" class="faq-item-answer" v-html="settings.answer" />
+    <div
+      class="faq-item-answer"
+      v-bind="blockEditableAttrs(blockId, 'answer')"
+      v-html="settings.answer"
+    />
   </div>
 </template>

package/dist/sections/article/vigilkids/ArticleFaqItem.vue.d.ts

@@ -1,5 +1,8 @@
 type __VLS_Props = {
+    blockId: string;
+    editorMode?: boolean;
     settings: Record<string, unknown>;
+    blockEditableAttrs: (blockId: string, key: string) => Record<string, unknown>;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/sections/article/vigilkids/ArticleHeading.vue

@@ -38,6 +38,7 @@ const { editableAttrs } = useInlineEdit({
     :id="String(s.anchor || '')"
     :class="{ 'black-h2': variant === 'plain' }"
   >
-    <span v-bind="editableAttrs('title')">{{ s.title }}</span>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <span v-bind="editableAttrs('title')" v-html="s.title" />
   </h2>
 </template>

package/dist/sections/article/vigilkids/ArticleHighlightParagraph.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/vigilkids/ArticleHighlightParagraph.vue

@@ -0,0 +1,38 @@
+<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 { 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>
+  <!-- eslint-disable-next-line vue/no-v-html -->
+  <p class="highlight-paragraph" v-bind="editableAttrs('content')" v-html="s.content" />
+</template>

package/dist/sections/article/vigilkids/ArticleHighlightParagraph.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/vigilkids/ArticleProductCard.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/vigilkids/ArticleProductCard.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { computed } from 'vue'
+
+import ProductCardVariantA from './product-card/ProductCardVariantA.vue'
+import ProductCardVariantB from './product-card/ProductCardVariantB.vue'
+import ProductCardVariantC from './product-card/ProductCardVariantC.vue'
+import ProductCardVariantD from './product-card/ProductCardVariantD.vue'
+import ProductCardVariantE from './product-card/ProductCardVariantE.vue'
+import ProductCardVariantF from './product-card/ProductCardVariantF.vue'
+import ProductCardVariantG from './product-card/ProductCardVariantG.vue'
+
+// ArticleProductCard 分发器（Shopify Hydrogen section variants 模式）
+// 根据 variant 选择子组件 + 根 class，内联 HTML 全部下沉到 variant 子组件
+// 子组件各自持有完整 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 variant = computed(() => String(props.settings.variant || 'A').toUpperCase())
+
+// variant 到 { 根 class, 子组件 } 的映射（对齐 vigilkids.css 1494-1500）
+const VARIANT_MAP = {
+  A: { class: 'product-card', component: ProductCardVariantA },
+  B: { class: 'product-card-compact', component: ProductCardVariantB },
+  C: { class: 'product-card-image', component: ProductCardVariantC },
+  D: { class: 'product-card-features', component: ProductCardVariantD },
+  E: { class: 'product-card-split', component: ProductCardVariantE },
+  F: { class: 'product-card-vertical', component: ProductCardVariantF },
+  G: { class: 'product-card-checklist', component: ProductCardVariantG },
+} as const
+
+// 未知 variant 时回退到 A，保证数据异常不会渲染空节点
+const resolved = computed(() => VARIANT_MAP[variant.value as keyof typeof VARIANT_MAP] || VARIANT_MAP.A)
+</script>
+
+<template>
+  <div :class="resolved.class">
+    <component
+      :is="resolved.component"
+      :block-order="blockOrder"
+      :blocks="blocks"
+      :editor-mode="editorMode"
+      :settings="settings"
+      @update:setting="(key, value) => emit('update:setting', key, value)"
+      @update:block-setting="(blockId, key, value) => emit('update:block-setting', blockId, key, value)"
+      @inline-edit-start="key => emit('inline-edit-start', key)"
+      @inline-edit-end="() => emit('inline-edit-end')"
+      @undo-redo="action => emit('undo-redo', action)"
+    />
+  </div>
+</template>

package/dist/sections/article/vigilkids/ArticleProductCard.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/vigilkids/ArticleProductInfoBanner.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/vigilkids/ArticleProductInfoBanner.vue

@@ -0,0 +1,56 @@
+<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 { 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>
+  <section>
+    <div class="product-info-banner">
+      <img class="banner-logo" :src="(s.logo_url as string) || ''" :alt="(s.logo_alt as string) || ''">
+      <div class="banner-body">
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <h3 class="banner-title" v-bind="editableAttrs('title')" v-html="s.title" />
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <p class="banner-desc" v-bind="editableAttrs('desc')" v-html="s.desc" />
+        <div class="banner-platform-row">
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <span class="banner-available" v-bind="editableAttrs('available_text')" v-html="s.available_text" />
+          <span class="banner-platforms">
+            <img :src="(s.platforms_image_url as string) || ''" :alt="(s.platforms_image_alt as string) || ''">
+          </span>
+        </div>
+      </div>
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <a class="product-info-banner-btn" :href="(s.cta_url as string) || '#'" v-bind="editableAttrs('cta_label')" v-html="s.cta_label" />
+    </div>
+  </section>
+</template>

package/dist/sections/article/vigilkids/ArticleProductInfoBanner.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;