@vigilkids/section-renderer-vue 0.2.1 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/dist/interactions/vigilkids.d.ts +44 -1
  2. package/dist/interactions/vigilkids.mjs +115 -1
  3. package/dist/sections/article/index.mjs +60 -0
  4. package/dist/sections/article/vigilkids/ArticleFaq.vue +9 -2
  5. package/dist/sections/article/vigilkids/ArticleFaqItem.d.vue.ts +3 -0
  6. package/dist/sections/article/vigilkids/ArticleFaqItem.vue +18 -18
  7. package/dist/sections/article/vigilkids/ArticleFaqItem.vue.d.ts +3 -0
  8. package/dist/sections/article/vigilkids/ArticleHeading.vue +2 -1
  9. package/dist/sections/article/vigilkids/ArticleHighlightParagraph.d.vue.ts +21 -0
  10. package/dist/sections/article/vigilkids/ArticleHighlightParagraph.vue +38 -0
  11. package/dist/sections/article/vigilkids/ArticleHighlightParagraph.vue.d.ts +21 -0
  12. package/dist/sections/article/vigilkids/ArticleProductCard.d.vue.ts +21 -0
  13. package/dist/sections/article/vigilkids/ArticleProductCard.vue +65 -0
  14. package/dist/sections/article/vigilkids/ArticleProductCard.vue.d.ts +21 -0
  15. package/dist/sections/article/vigilkids/ArticleProductInfoBanner.d.vue.ts +21 -0
  16. package/dist/sections/article/vigilkids/ArticleProductInfoBanner.vue +56 -0
  17. package/dist/sections/article/vigilkids/ArticleProductInfoBanner.vue.d.ts +21 -0
  18. package/dist/sections/article/vigilkids/ArticleRelatedArticles.d.vue.ts +21 -0
  19. package/dist/sections/article/vigilkids/ArticleRelatedArticles.vue +86 -0
  20. package/dist/sections/article/vigilkids/ArticleRelatedArticles.vue.d.ts +21 -0
  21. package/dist/sections/article/vigilkids/ArticleRetentionBanner.d.vue.ts +21 -0
  22. package/dist/sections/article/vigilkids/ArticleRetentionBanner.vue +100 -0
  23. package/dist/sections/article/vigilkids/ArticleRetentionBanner.vue.d.ts +21 -0
  24. package/dist/sections/article/vigilkids/ArticleSectionIntro.d.vue.ts +21 -0
  25. package/dist/sections/article/vigilkids/ArticleSectionIntro.vue +56 -0
  26. package/dist/sections/article/vigilkids/ArticleSectionIntro.vue.d.ts +21 -0
  27. package/dist/sections/article/vigilkids/ArticleStepList.vue +11 -6
  28. package/dist/sections/article/vigilkids/ArticleStyledHeading.d.vue.ts +21 -0
  29. package/dist/sections/article/vigilkids/ArticleStyledHeading.vue +48 -0
  30. package/dist/sections/article/vigilkids/ArticleStyledHeading.vue.d.ts +21 -0
  31. package/dist/sections/article/vigilkids/ArticleSubheading.vue +5 -4
  32. package/dist/sections/article/vigilkids/ArticleTable.d.vue.ts +13 -1
  33. package/dist/sections/article/vigilkids/ArticleTable.vue +26 -6
  34. package/dist/sections/article/vigilkids/ArticleTable.vue.d.ts +13 -1
  35. package/dist/sections/article/vigilkids/ArticleTipNote.d.vue.ts +21 -0
  36. package/dist/sections/article/vigilkids/ArticleTipNote.vue +58 -0
  37. package/dist/sections/article/vigilkids/ArticleTipNote.vue.d.ts +21 -0
  38. package/dist/sections/article/vigilkids/ArticleToc.vue +22 -7
  39. package/dist/sections/article/vigilkids/ArticleTocList.d.vue.ts +21 -0
  40. package/dist/sections/article/vigilkids/ArticleTocList.vue +56 -0
  41. package/dist/sections/article/vigilkids/ArticleTocList.vue.d.ts +21 -0
  42. package/dist/sections/article/vigilkids/ArticleTopAd.d.vue.ts +21 -0
  43. package/dist/sections/article/vigilkids/ArticleTopAd.vue +90 -0
  44. package/dist/sections/article/vigilkids/ArticleTopAd.vue.d.ts +21 -0
  45. package/dist/sections/article/vigilkids/product-card/ProductCardCtaGroup.d.vue.ts +6 -0
  46. package/dist/sections/article/vigilkids/product-card/ProductCardCtaGroup.vue +21 -0
  47. package/dist/sections/article/vigilkids/product-card/ProductCardCtaGroup.vue.d.ts +6 -0
  48. package/dist/sections/article/vigilkids/product-card/ProductCardVariantA.d.vue.ts +21 -0
  49. package/dist/sections/article/vigilkids/product-card/ProductCardVariantA.vue +46 -0
  50. package/dist/sections/article/vigilkids/product-card/ProductCardVariantA.vue.d.ts +21 -0
  51. package/dist/sections/article/vigilkids/product-card/ProductCardVariantB.d.vue.ts +21 -0
  52. package/dist/sections/article/vigilkids/product-card/ProductCardVariantB.vue +46 -0
  53. package/dist/sections/article/vigilkids/product-card/ProductCardVariantB.vue.d.ts +21 -0
  54. package/dist/sections/article/vigilkids/product-card/ProductCardVariantC.d.vue.ts +21 -0
  55. package/dist/sections/article/vigilkids/product-card/ProductCardVariantC.vue +46 -0
  56. package/dist/sections/article/vigilkids/product-card/ProductCardVariantC.vue.d.ts +21 -0
  57. package/dist/sections/article/vigilkids/product-card/ProductCardVariantD.d.vue.ts +21 -0
  58. package/dist/sections/article/vigilkids/product-card/ProductCardVariantD.vue +56 -0
  59. package/dist/sections/article/vigilkids/product-card/ProductCardVariantD.vue.d.ts +21 -0
  60. package/dist/sections/article/vigilkids/product-card/ProductCardVariantE.d.vue.ts +21 -0
  61. package/dist/sections/article/vigilkids/product-card/ProductCardVariantE.vue +55 -0
  62. package/dist/sections/article/vigilkids/product-card/ProductCardVariantE.vue.d.ts +21 -0
  63. package/dist/sections/article/vigilkids/product-card/ProductCardVariantF.d.vue.ts +21 -0
  64. package/dist/sections/article/vigilkids/product-card/ProductCardVariantF.vue +56 -0
  65. package/dist/sections/article/vigilkids/product-card/ProductCardVariantF.vue.d.ts +21 -0
  66. package/dist/sections/article/vigilkids/product-card/ProductCardVariantG.d.vue.ts +21 -0
  67. package/dist/sections/article/vigilkids/product-card/ProductCardVariantG.vue +52 -0
  68. package/dist/sections/article/vigilkids/product-card/ProductCardVariantG.vue.d.ts +21 -0
  69. package/dist/styles/products/vigilkids.css +1 -1
  70. package/dist/styles/products/visiva.css +1 -1
  71. package/package.json +12 -9
@@ -0,0 +1,46 @@
1
+ <script setup lang="ts">
2
+ import type { BlockData } from '@vigilkids/section-core'
3
+
4
+ import { computed } from 'vue'
5
+
6
+ import { useInlineEdit } from '../../../../composables/useInlineEdit'
7
+ import ProductCardCtaGroup from './ProductCardCtaGroup.vue'
8
+
9
+ // Variant C: 手机截图横向(product-card-image)
10
+ const props = defineProps<{
11
+ blockOrder: string[]
12
+ blocks: Record<string, BlockData>
13
+ editorMode?: boolean
14
+ settings: Record<string, unknown>
15
+ }>()
16
+
17
+ const emit = defineEmits<{
18
+ (e: 'update:setting', key: string, value: unknown): void
19
+ (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
20
+ (e: 'inline-edit-start', key: string): void
21
+ (e: 'inline-edit-end'): void
22
+ (e: 'undo-redo', action: 'redo' | 'undo'): void
23
+ }>()
24
+
25
+ const s = computed(() => props.settings)
26
+
27
+ const { editableAttrs } = useInlineEdit({
28
+ editorMode: () => !!props.editorMode,
29
+ onSettingUpdate: (key, value) => emit('update:setting', key, value),
30
+ onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
31
+ onEditStart: key => emit('inline-edit-start', key),
32
+ onEditEnd: () => emit('inline-edit-end'),
33
+ onUndoRedo: action => emit('undo-redo', action),
34
+ })
35
+ </script>
36
+
37
+ <template>
38
+ <img :src="(s.image_url as string) || ''" :alt="(s.image_alt as string) || ''">
39
+ <div>
40
+ <!-- eslint-disable-next-line vue/no-v-html -->
41
+ <p class="product-name" v-bind="editableAttrs('product_name')" v-html="s.product_name" />
42
+ <!-- eslint-disable-next-line vue/no-v-html -->
43
+ <p class="product-desc" v-bind="editableAttrs('product_desc')" v-html="s.product_desc" />
44
+ <ProductCardCtaGroup :s="s" :editable-attrs="editableAttrs" />
45
+ </div>
46
+ </template>
@@ -0,0 +1,21 @@
1
+ import type { BlockData } from '@vigilkids/section-core';
2
+ type __VLS_Props = {
3
+ blockOrder: string[];
4
+ blocks: Record<string, BlockData>;
5
+ editorMode?: boolean;
6
+ settings: Record<string, unknown>;
7
+ };
8
+ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
9
+ "update:setting": (key: string, value: unknown) => any;
10
+ "update:block-setting": (blockId: string, key: string, value: unknown) => any;
11
+ "inline-edit-start": (key: string) => any;
12
+ "inline-edit-end": () => any;
13
+ "undo-redo": (action: "redo" | "undo") => any;
14
+ }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
15
+ "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
16
+ "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
17
+ "onInline-edit-start"?: ((key: string) => any) | undefined;
18
+ "onInline-edit-end"?: (() => any) | undefined;
19
+ "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
20
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
21
+ export default _default;
@@ -0,0 +1,21 @@
1
+ import type { BlockData } from '@vigilkids/section-core';
2
+ type __VLS_Props = {
3
+ blockOrder: string[];
4
+ blocks: Record<string, BlockData>;
5
+ editorMode?: boolean;
6
+ settings: Record<string, unknown>;
7
+ };
8
+ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
9
+ "update:setting": (key: string, value: unknown) => any;
10
+ "update:block-setting": (blockId: string, key: string, value: unknown) => any;
11
+ "inline-edit-start": (key: string) => any;
12
+ "inline-edit-end": () => any;
13
+ "undo-redo": (action: "redo" | "undo") => any;
14
+ }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
15
+ "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
16
+ "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
17
+ "onInline-edit-start"?: ((key: string) => any) | undefined;
18
+ "onInline-edit-end"?: (() => any) | undefined;
19
+ "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
20
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
21
+ export default _default;
@@ -0,0 +1,56 @@
1
+ <script setup lang="ts">
2
+ import type { BlockData } from '@vigilkids/section-core'
3
+
4
+ import { computed } from 'vue'
5
+
6
+ import { useInlineEdit } from '../../../../composables/useInlineEdit'
7
+ import ProductCardCtaGroup from './ProductCardCtaGroup.vue'
8
+
9
+ // Variant D: 功能列表 + 手机图(product-card-features)
10
+ // 消费 feature_item 类型的 blocks 渲染功能列表项
11
+ const props = defineProps<{
12
+ blockOrder: string[]
13
+ blocks: Record<string, BlockData>
14
+ editorMode?: boolean
15
+ settings: Record<string, unknown>
16
+ }>()
17
+
18
+ const emit = defineEmits<{
19
+ (e: 'update:setting', key: string, value: unknown): void
20
+ (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
21
+ (e: 'inline-edit-start', key: string): void
22
+ (e: 'inline-edit-end'): void
23
+ (e: 'undo-redo', action: 'redo' | 'undo'): void
24
+ }>()
25
+
26
+ const s = computed(() => props.settings)
27
+
28
+ // 按 blockOrder 顺序过滤 feature_item,保证管理端拖拽顺序与渲染一致
29
+ const featureItems = computed(() =>
30
+ props.blockOrder
31
+ .filter(id => props.blocks[id]?.type === 'feature_item')
32
+ .map(id => ({ id, block: props.blocks[id]! })),
33
+ )
34
+
35
+ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
36
+ editorMode: () => !!props.editorMode,
37
+ onSettingUpdate: (key, value) => emit('update:setting', key, value),
38
+ onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
39
+ onEditStart: key => emit('inline-edit-start', key),
40
+ onEditEnd: () => emit('inline-edit-end'),
41
+ onUndoRedo: action => emit('undo-redo', action),
42
+ })
43
+ </script>
44
+
45
+ <template>
46
+ <img :src="(s.image_url as string) || ''" :alt="(s.image_alt as string) || ''">
47
+ <div>
48
+ <!-- eslint-disable-next-line vue/no-v-html -->
49
+ <p class="product-name" v-bind="editableAttrs('product_name')" v-html="s.product_name" />
50
+ <ul class="product-feature-list">
51
+ <!-- eslint-disable-next-line vue/no-v-html -->
52
+ <li v-for="item in featureItems" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.block.settings.text" />
53
+ </ul>
54
+ <ProductCardCtaGroup :s="s" :editable-attrs="editableAttrs" />
55
+ </div>
56
+ </template>
@@ -0,0 +1,21 @@
1
+ import type { BlockData } from '@vigilkids/section-core';
2
+ type __VLS_Props = {
3
+ blockOrder: string[];
4
+ blocks: Record<string, BlockData>;
5
+ editorMode?: boolean;
6
+ settings: Record<string, unknown>;
7
+ };
8
+ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
9
+ "update:setting": (key: string, value: unknown) => any;
10
+ "update:block-setting": (blockId: string, key: string, value: unknown) => any;
11
+ "inline-edit-start": (key: string) => any;
12
+ "inline-edit-end": () => any;
13
+ "undo-redo": (action: "redo" | "undo") => any;
14
+ }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
15
+ "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
16
+ "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
17
+ "onInline-edit-start"?: ((key: string) => any) | undefined;
18
+ "onInline-edit-end"?: (() => any) | undefined;
19
+ "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
20
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
21
+ export default _default;
@@ -0,0 +1,21 @@
1
+ import type { BlockData } from '@vigilkids/section-core';
2
+ type __VLS_Props = {
3
+ blockOrder: string[];
4
+ blocks: Record<string, BlockData>;
5
+ editorMode?: boolean;
6
+ settings: Record<string, unknown>;
7
+ };
8
+ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
9
+ "update:setting": (key: string, value: unknown) => any;
10
+ "update:block-setting": (blockId: string, key: string, value: unknown) => any;
11
+ "inline-edit-start": (key: string) => any;
12
+ "inline-edit-end": () => any;
13
+ "undo-redo": (action: "redo" | "undo") => any;
14
+ }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
15
+ "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
16
+ "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
17
+ "onInline-edit-start"?: ((key: string) => any) | undefined;
18
+ "onInline-edit-end"?: (() => any) | undefined;
19
+ "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
20
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
21
+ export default _default;
@@ -0,0 +1,55 @@
1
+ <script setup lang="ts">
2
+ import type { BlockData } from '@vigilkids/section-core'
3
+
4
+ import { computed } from 'vue'
5
+
6
+ import { useInlineEdit } from '../../../../composables/useInlineEdit'
7
+ import ProductCardCtaGroup from './ProductCardCtaGroup.vue'
8
+
9
+ // Variant E: 两侧装饰 + feature-dot(product-card-split)
10
+ // 消费 feature_dot 类型的 blocks,渲染带圆点装饰的特性列表
11
+ const props = defineProps<{
12
+ blockOrder: string[]
13
+ blocks: Record<string, BlockData>
14
+ editorMode?: boolean
15
+ settings: Record<string, unknown>
16
+ }>()
17
+
18
+ const emit = defineEmits<{
19
+ (e: 'update:setting', key: string, value: unknown): void
20
+ (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
21
+ (e: 'inline-edit-start', key: string): void
22
+ (e: 'inline-edit-end'): void
23
+ (e: 'undo-redo', action: 'redo' | 'undo'): void
24
+ }>()
25
+
26
+ const s = computed(() => props.settings)
27
+
28
+ const featureDots = computed(() =>
29
+ props.blockOrder
30
+ .filter(id => props.blocks[id]?.type === 'feature_dot')
31
+ .map(id => ({ id, block: props.blocks[id]! })),
32
+ )
33
+
34
+ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
35
+ editorMode: () => !!props.editorMode,
36
+ onSettingUpdate: (key, value) => emit('update:setting', key, value),
37
+ onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
38
+ onEditStart: key => emit('inline-edit-start', key),
39
+ onEditEnd: () => emit('inline-edit-end'),
40
+ onUndoRedo: action => emit('undo-redo', action),
41
+ })
42
+ </script>
43
+
44
+ <template>
45
+ <img :src="(s.image_url as string) || ''" :alt="(s.image_alt as string) || ''">
46
+ <div>
47
+ <!-- eslint-disable-next-line vue/no-v-html -->
48
+ <p class="split-product-name product-name" v-bind="editableAttrs('product_name')" v-html="s.product_name" />
49
+ <ul class="feature-dot-list">
50
+ <!-- eslint-disable-next-line vue/no-v-html -->
51
+ <li v-for="item in featureDots" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.block.settings.text" />
52
+ </ul>
53
+ <ProductCardCtaGroup :s="s" :editable-attrs="editableAttrs" />
54
+ </div>
55
+ </template>
@@ -0,0 +1,21 @@
1
+ import type { BlockData } from '@vigilkids/section-core';
2
+ type __VLS_Props = {
3
+ blockOrder: string[];
4
+ blocks: Record<string, BlockData>;
5
+ editorMode?: boolean;
6
+ settings: Record<string, unknown>;
7
+ };
8
+ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
9
+ "update:setting": (key: string, value: unknown) => any;
10
+ "update:block-setting": (blockId: string, key: string, value: unknown) => any;
11
+ "inline-edit-start": (key: string) => any;
12
+ "inline-edit-end": () => any;
13
+ "undo-redo": (action: "redo" | "undo") => any;
14
+ }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
15
+ "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
16
+ "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
17
+ "onInline-edit-start"?: ((key: string) => any) | undefined;
18
+ "onInline-edit-end"?: (() => any) | undefined;
19
+ "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
20
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
21
+ export default _default;
@@ -0,0 +1,21 @@
1
+ import type { BlockData } from '@vigilkids/section-core';
2
+ type __VLS_Props = {
3
+ blockOrder: string[];
4
+ blocks: Record<string, BlockData>;
5
+ editorMode?: boolean;
6
+ settings: Record<string, unknown>;
7
+ };
8
+ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
9
+ "update:setting": (key: string, value: unknown) => any;
10
+ "update:block-setting": (blockId: string, key: string, value: unknown) => any;
11
+ "inline-edit-start": (key: string) => any;
12
+ "inline-edit-end": () => any;
13
+ "undo-redo": (action: "redo" | "undo") => any;
14
+ }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
15
+ "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
16
+ "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
17
+ "onInline-edit-start"?: ((key: string) => any) | undefined;
18
+ "onInline-edit-end"?: (() => any) | undefined;
19
+ "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
20
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
21
+ export default _default;
@@ -0,0 +1,56 @@
1
+ <script setup lang="ts">
2
+ import type { BlockData } from '@vigilkids/section-core'
3
+
4
+ import { computed } from 'vue'
5
+
6
+ import { useInlineEdit } from '../../../../composables/useInlineEdit'
7
+
8
+ // Variant F: 按钮纵向排列(product-card-vertical)
9
+ // 左右分栏 + 中间分隔线结构,CTA 按钮垂直堆叠
10
+ // 因结构与其它 variant 的 action-buttons 横向布局差异大,未使用共享 CtaGroup
11
+ // 保留直接渲染 a 标签,保证纵向容器的样式作用于按钮本身
12
+ const props = defineProps<{
13
+ blockOrder: string[]
14
+ blocks: Record<string, BlockData>
15
+ editorMode?: boolean
16
+ settings: Record<string, unknown>
17
+ }>()
18
+
19
+ const emit = defineEmits<{
20
+ (e: 'update:setting', key: string, value: unknown): void
21
+ (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
22
+ (e: 'inline-edit-start', key: string): void
23
+ (e: 'inline-edit-end'): void
24
+ (e: 'undo-redo', action: 'redo' | 'undo'): void
25
+ }>()
26
+
27
+ const s = computed(() => props.settings)
28
+
29
+ const { editableAttrs } = useInlineEdit({
30
+ editorMode: () => !!props.editorMode,
31
+ onSettingUpdate: (key, value) => emit('update:setting', key, value),
32
+ onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
33
+ onEditStart: key => emit('inline-edit-start', key),
34
+ onEditEnd: () => emit('inline-edit-end'),
35
+ onUndoRedo: action => emit('undo-redo', action),
36
+ })
37
+ </script>
38
+
39
+ <template>
40
+ <div class="card-vertical-left">
41
+ <div class="card-vertical-header">
42
+ <img :src="(s.image_url as string) || ''" :alt="(s.image_alt as string) || ''">
43
+ <!-- eslint-disable-next-line vue/no-v-html -->
44
+ <p class="product-name" v-bind="editableAttrs('product_name')" v-html="s.product_name" />
45
+ </div>
46
+ <!-- eslint-disable-next-line vue/no-v-html -->
47
+ <p class="product-desc" v-bind="editableAttrs('product_desc')" v-html="s.product_desc" />
48
+ </div>
49
+ <div class="card-vertical-divider" />
50
+ <div class="card-vertical-right">
51
+ <!-- eslint-disable-next-line vue/no-v-html -->
52
+ <a :href="(s.cta_primary_url as string) || '#'" class="article-btn-primary" v-bind="editableAttrs('cta_primary_label')" v-html="s.cta_primary_label" />
53
+ <!-- eslint-disable-next-line vue/no-v-html -->
54
+ <a :href="(s.cta_outline_url as string) || '#'" class="article-btn-outline" v-bind="editableAttrs('cta_outline_label')" v-html="s.cta_outline_label" />
55
+ </div>
56
+ </template>
@@ -0,0 +1,21 @@
1
+ import type { BlockData } from '@vigilkids/section-core';
2
+ type __VLS_Props = {
3
+ blockOrder: string[];
4
+ blocks: Record<string, BlockData>;
5
+ editorMode?: boolean;
6
+ settings: Record<string, unknown>;
7
+ };
8
+ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
9
+ "update:setting": (key: string, value: unknown) => any;
10
+ "update:block-setting": (blockId: string, key: string, value: unknown) => any;
11
+ "inline-edit-start": (key: string) => any;
12
+ "inline-edit-end": () => any;
13
+ "undo-redo": (action: "redo" | "undo") => any;
14
+ }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
15
+ "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
16
+ "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
17
+ "onInline-edit-start"?: ((key: string) => any) | undefined;
18
+ "onInline-edit-end"?: (() => any) | undefined;
19
+ "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
20
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
21
+ export default _default;
@@ -0,0 +1,21 @@
1
+ import type { BlockData } from '@vigilkids/section-core';
2
+ type __VLS_Props = {
3
+ blockOrder: string[];
4
+ blocks: Record<string, BlockData>;
5
+ editorMode?: boolean;
6
+ settings: Record<string, unknown>;
7
+ };
8
+ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
9
+ "update:setting": (key: string, value: unknown) => any;
10
+ "update:block-setting": (blockId: string, key: string, value: unknown) => any;
11
+ "inline-edit-start": (key: string) => any;
12
+ "inline-edit-end": () => any;
13
+ "undo-redo": (action: "redo" | "undo") => any;
14
+ }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
15
+ "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
16
+ "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
17
+ "onInline-edit-start"?: ((key: string) => any) | undefined;
18
+ "onInline-edit-end"?: (() => any) | undefined;
19
+ "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
20
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
21
+ export default _default;
@@ -0,0 +1,52 @@
1
+ <script setup lang="ts">
2
+ import type { BlockData } from '@vigilkids/section-core'
3
+
4
+ import { computed } from 'vue'
5
+
6
+ import { useInlineEdit } from '../../../../composables/useInlineEdit'
7
+ import ProductCardCtaGroup from './ProductCardCtaGroup.vue'
8
+
9
+ // Variant G: 蓝底 checklist(product-card-checklist)
10
+ // 与 D 相同使用 feature_item blocks,但无图片,根 class 切换为深色主题
11
+ const props = defineProps<{
12
+ blockOrder: string[]
13
+ blocks: Record<string, BlockData>
14
+ editorMode?: boolean
15
+ settings: Record<string, unknown>
16
+ }>()
17
+
18
+ const emit = defineEmits<{
19
+ (e: 'update:setting', key: string, value: unknown): void
20
+ (e: 'update:block-setting', blockId: string, key: string, value: unknown): void
21
+ (e: 'inline-edit-start', key: string): void
22
+ (e: 'inline-edit-end'): void
23
+ (e: 'undo-redo', action: 'redo' | 'undo'): void
24
+ }>()
25
+
26
+ const s = computed(() => props.settings)
27
+
28
+ const featureItems = computed(() =>
29
+ props.blockOrder
30
+ .filter(id => props.blocks[id]?.type === 'feature_item')
31
+ .map(id => ({ id, block: props.blocks[id]! })),
32
+ )
33
+
34
+ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
35
+ editorMode: () => !!props.editorMode,
36
+ onSettingUpdate: (key, value) => emit('update:setting', key, value),
37
+ onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
38
+ onEditStart: key => emit('inline-edit-start', key),
39
+ onEditEnd: () => emit('inline-edit-end'),
40
+ onUndoRedo: action => emit('undo-redo', action),
41
+ })
42
+ </script>
43
+
44
+ <template>
45
+ <!-- eslint-disable-next-line vue/no-v-html -->
46
+ <p class="product-name" v-bind="editableAttrs('product_name')" v-html="s.product_name" />
47
+ <ul class="product-feature-list">
48
+ <!-- eslint-disable-next-line vue/no-v-html -->
49
+ <li v-for="item in featureItems" :key="item.id" v-bind="blockEditableAttrs(item.id, 'text')" v-html="item.block.settings.text" />
50
+ </ul>
51
+ <ProductCardCtaGroup :s="s" :editable-attrs="editableAttrs" />
52
+ </template>
@@ -0,0 +1,21 @@
1
+ import type { BlockData } from '@vigilkids/section-core';
2
+ type __VLS_Props = {
3
+ blockOrder: string[];
4
+ blocks: Record<string, BlockData>;
5
+ editorMode?: boolean;
6
+ settings: Record<string, unknown>;
7
+ };
8
+ declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
9
+ "update:setting": (key: string, value: unknown) => any;
10
+ "update:block-setting": (blockId: string, key: string, value: unknown) => any;
11
+ "inline-edit-start": (key: string) => any;
12
+ "inline-edit-end": () => any;
13
+ "undo-redo": (action: "redo" | "undo") => any;
14
+ }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
15
+ "onUpdate:setting"?: ((key: string, value: unknown) => any) | undefined;
16
+ "onUpdate:block-setting"?: ((blockId: string, key: string, value: unknown) => any) | undefined;
17
+ "onInline-edit-start"?: ((key: string) => any) | undefined;
18
+ "onInline-edit-end"?: (() => any) | undefined;
19
+ "onUndo-redo"?: ((action: "redo" | "undo") => any) | undefined;
20
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
21
+ export default _default;