@vigilkids/section-renderer-vue 0.2.1 → 0.5.0

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

@@ -0,0 +1,86 @@
+<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 items = computed(() =>
+  props.blockOrder
+    .filter(id => props.blocks[id]?.type === 'related_item')
+    .map(id => ({ id, block: props.blocks[id]! })),
+)
+
+const showDots = computed(() => !!s.value.show_dots)
+
+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>
+  <section class="article-recommend" data-component="related-articles-carousel">
+    <h2 v-if="s.title" class="article-recommend-title" v-bind="editableAttrs('title')">
+      {{ s.title }}
+    </h2>
+    <div class="recommend-grid">
+      <a
+        v-for="(item, i) in items"
+        :key="item.id"
+        :href="(item.block.settings.url as string) || '#'"
+        class="recommend-card"
+      >
+        <div class="recommend-card-image">
+          <img
+            :src="(item.block.settings.image_url as string) || ''"
+            :alt="(item.block.settings.image_alt as string) || ''"
+          >
+        </div>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <p
+          class="recommend-card-title"
+          v-bind="blockEditableAttrs(item.id, 'title')"
+          v-html="item.block.settings.title"
+        />
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <p
+          class="recommend-card-desc"
+          v-bind="blockEditableAttrs(item.id, 'description')"
+          v-html="item.block.settings.description"
+        />
+        <span class="sr-only">{{ i + 1 }}</span>
+      </a>
+    </div>
+    <div v-if="showDots && items.length > 0" class="recommend-dots">
+      <!-- 首屏先给第一个 dot 标 active 作为 init 前视觉提示；embla 初始化后由 interactions/vigilkids.ts 的 syncActive 接管 -->
+      <span
+        v-for="(item, i) in items"
+        :key="item.id"
+        class="recommend-dot"
+        :class="{ active: i === 0 }"
+      />
+    </div>
+  </section>
+</template>

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

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { BlockData } from '@vigilkids/section-core'
+
+import { computed, onMounted, ref } 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 dismissKey = computed(() => (s.value.dismiss_key as string) || '')
+// dismissKey 为空时也允许关闭，只是本次会话内关闭不持久化
+const storageKey = computed(() => (dismissKey.value ? `retention-banner-dismissed:${dismissKey.value}` : ''))
+
+const dismissed = ref(false)
+
+// 初始挂载时读取持久化状态；editorMode 下跳过以方便运营预览样式
+onMounted(() => {
+  if (props.editorMode)
+    return
+  if (storageKey.value && typeof localStorage !== 'undefined' && localStorage.getItem(storageKey.value)) {
+    dismissed.value = true
+  }
+})
+
+function handleClose() {
+  if (storageKey.value && typeof localStorage !== 'undefined') {
+    localStorage.setItem(storageKey.value, '1')
+  }
+  dismissed.value = true
+}
+
+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 v-if="!dismissed">
+    <div
+      class="retention-banner"
+      data-component="retention-banner"
+      :data-dismiss-key="dismissKey"
+    >
+      <div class="retention-banner-inner">
+        <img
+          class="retention-banner-img"
+          :src="(s.image_url as string) || ''"
+          :alt="(s.image_alt as string) || ''"
+        >
+        <div>
+          <p class="retention-banner-text">
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <span v-bind="editableAttrs('text_prefix')" v-html="s.text_prefix" />
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <span class="retention-highlight" v-bind="editableAttrs('highlight_text')" v-html="s.highlight_text" />
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <span v-bind="editableAttrs('text_suffix')" v-html="s.text_suffix" />
+          </p>
+          <a
+            v-if="s.cta_label"
+            class="retention-banner-btn"
+            :href="(s.cta_url as string) || '#'"
+            v-bind="editableAttrs('cta_label')"
+          >
+            {{ s.cta_label }}
+          </a>
+        </div>
+      </div>
+      <button
+        type="button"
+        class="retention-banner-close"
+        aria-label="Close"
+        @click.stop="handleClose"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4 4L12 12M12 4L4 12" stroke="#000" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+      </button>
+    </div>
+  </section>
+</template>

package/dist/sections/article/vigilkids/ArticleRetentionBanner.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/ArticleSectionIntro.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/ArticleSectionIntro.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 items = computed(() =>
+  props.blockOrder
+    .filter(id => props.blocks[id]?.type === 'intro_item')
+    .map(id => ({ id, block: props.blocks[id]! })),
+)
+
+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>
+  <section>
+    <p class="section-intro">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <span class="section-intro-bold" v-bind="editableAttrs('bold_text')" v-html="s.bold_text" />
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <span v-bind="editableAttrs('intro_text')" v-html="s.intro_text" />
+    </p>
+    <ul class="section-intro-list">
+      <li v-for="item in items" :key="item.id">
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <span v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.block.settings.text" />
+      </li>
+    </ul>
+  </section>
+</template>

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

@@ -37,12 +37,17 @@ const { blockEditableAttrs } = useInlineEdit({
   <ul class="step-list">
     <template v-for="blockId in blockOrder" :key="blockId">
       <li v-if="blocks[blockId]">
-        <span class="primary-color" v-bind="blockEditableAttrs(blockId, 'label')">{{
-          blocks[blockId]!.settings.label
-        }}</span>
-        <span v-bind="blockEditableAttrs(blockId, 'description')">{{
-          blocks[blockId]!.settings.description
-        }}</span>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <span
+          class="primary-color"
+          v-bind="blockEditableAttrs(blockId, 'label')"
+          v-html="blocks[blockId]!.settings.label"
+        />
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <span
+          v-bind="blockEditableAttrs(blockId, 'description')"
+          v-html="blocks[blockId]!.settings.description"
+        />
       </li>
     </template>
   </ul>

package/dist/sections/article/vigilkids/ArticleStyledHeading.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/ArticleStyledHeading.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 s = computed(() => props.settings)
+
+const variant = computed(() => String(s.value.variant || 'num-circle'))
+
+const headingClass = computed(() => `h3-${variant.value}`)
+
+const iconClass = computed(() => (variant.value === 'tips-badge' ? 'h3-badge' : 'h3-icon'))
+
+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>
+  <h3 :class="headingClass">
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <span :class="iconClass" v-bind="editableAttrs('number')" v-html="s.number" />
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <span v-bind="editableAttrs('text')" v-html="s.text" />
+  </h3>
+</template>

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

@@ -35,13 +35,14 @@ const { editableAttrs } = useInlineEdit({
 
 <template>
   <h3 :class="{ 'black-h3': variant === 'numbered' }">
+    <!-- eslint-disable-next-line vue/no-v-html -->
     <span
       v-if="variant === 'numbered' && s.number"
       class="green-text"
       v-bind="editableAttrs('number')"
-    >
-      {{ s.number }}
-    </span>
-    <span v-bind="editableAttrs('title')">{{ s.title }}</span>
+      v-html="s.number"
+    />
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <span v-bind="editableAttrs('title')" v-html="s.title" />
   </h3>
 </template>

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

@@ -5,5 +5,17 @@ type __VLS_Props = {
     editorMode?: boolean;
     settings: 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>;
+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/ArticleTable.vue

@@ -3,6 +3,8 @@ 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>
@@ -10,6 +12,14 @@ const props = defineProps<{
   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)
 
 interface ColumnDef {
@@ -42,9 +52,19 @@ const rows = computed(() =>
     .filter(id => props.blocks[id]?.type === 'table-row')
     .map((id) => {
       const block = props.blocks[id]!
-      return parseJsonOrArray<string>(block.settings.cells)
+      return { id, cells: parseJsonOrArray<string>(block.settings.cells) }
     }),
 )
+
+// 保留完整 5-emit 契约，与其他 section 统一；columns/cells 为 JSON 聚合字段，内联编辑暂由配置面板承担
+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>
@@ -52,19 +72,19 @@ const rows = computed(() =>
     <table cellspacing="0">
       <thead align="left">
         <tr>
+          <!-- eslint-disable-next-line vue/no-v-html -->
           <th
             v-for="(col, idx) in columns"
             :key="idx"
             :style="col.min_width ? { minWidth: `${col.min_width}px` } : undefined"
-          >
-            {{ col.label }}
-          </th>
+            v-html="col.label"
+          />
         </tr>
       </thead>
       <tbody align="left">
-        <tr v-for="(row, rowIdx) in rows" :key="rowIdx">
+        <tr v-for="row in rows" :key="row.id">
           <!-- eslint-disable-next-line vue/no-v-html -->
-          <td v-for="(cell, cellIdx) in row" :key="cellIdx" v-html="cell" />
+          <td v-for="(cell, cellIdx) in row.cells" :key="cellIdx" v-html="cell" />
         </tr>
       </tbody>
     </table>

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

@@ -5,5 +5,17 @@ type __VLS_Props = {
     editorMode?: boolean;
     settings: 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>;
+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/ArticleTipNote.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;