@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.
- package/dist/interactions/vigilkids.d.ts +44 -1
- package/dist/interactions/vigilkids.mjs +115 -1
- package/dist/sections/article/index.mjs +60 -0
- package/dist/sections/article/vigilkids/ArticleFaq.vue +9 -2
- package/dist/sections/article/vigilkids/ArticleFaqItem.d.vue.ts +3 -0
- package/dist/sections/article/vigilkids/ArticleFaqItem.vue +18 -18
- package/dist/sections/article/vigilkids/ArticleFaqItem.vue.d.ts +3 -0
- package/dist/sections/article/vigilkids/ArticleHeading.vue +2 -1
- package/dist/sections/article/vigilkids/ArticleHighlightParagraph.d.vue.ts +21 -0
- package/dist/sections/article/vigilkids/ArticleHighlightParagraph.vue +38 -0
- package/dist/sections/article/vigilkids/ArticleHighlightParagraph.vue.d.ts +21 -0
- package/dist/sections/article/vigilkids/ArticleProductCard.d.vue.ts +21 -0
- package/dist/sections/article/vigilkids/ArticleProductCard.vue +65 -0
- package/dist/sections/article/vigilkids/ArticleProductCard.vue.d.ts +21 -0
- package/dist/sections/article/vigilkids/ArticleProductInfoBanner.d.vue.ts +21 -0
- package/dist/sections/article/vigilkids/ArticleProductInfoBanner.vue +56 -0
- package/dist/sections/article/vigilkids/ArticleProductInfoBanner.vue.d.ts +21 -0
- package/dist/sections/article/vigilkids/ArticleRelatedArticles.d.vue.ts +21 -0
- package/dist/sections/article/vigilkids/ArticleRelatedArticles.vue +86 -0
- package/dist/sections/article/vigilkids/ArticleRelatedArticles.vue.d.ts +21 -0
- package/dist/sections/article/vigilkids/ArticleRetentionBanner.d.vue.ts +21 -0
- package/dist/sections/article/vigilkids/ArticleRetentionBanner.vue +100 -0
- package/dist/sections/article/vigilkids/ArticleRetentionBanner.vue.d.ts +21 -0
- package/dist/sections/article/vigilkids/ArticleSectionIntro.d.vue.ts +21 -0
- package/dist/sections/article/vigilkids/ArticleSectionIntro.vue +56 -0
- package/dist/sections/article/vigilkids/ArticleSectionIntro.vue.d.ts +21 -0
- package/dist/sections/article/vigilkids/ArticleStepList.vue +11 -6
- package/dist/sections/article/vigilkids/ArticleStyledHeading.d.vue.ts +21 -0
- package/dist/sections/article/vigilkids/ArticleStyledHeading.vue +48 -0
- package/dist/sections/article/vigilkids/ArticleStyledHeading.vue.d.ts +21 -0
- package/dist/sections/article/vigilkids/ArticleSubheading.vue +5 -4
- package/dist/sections/article/vigilkids/ArticleTable.d.vue.ts +13 -1
- package/dist/sections/article/vigilkids/ArticleTable.vue +26 -6
- package/dist/sections/article/vigilkids/ArticleTable.vue.d.ts +13 -1
- package/dist/sections/article/vigilkids/ArticleTipNote.d.vue.ts +21 -0
- package/dist/sections/article/vigilkids/ArticleTipNote.vue +58 -0
- package/dist/sections/article/vigilkids/ArticleTipNote.vue.d.ts +21 -0
- package/dist/sections/article/vigilkids/ArticleToc.vue +22 -7
- package/dist/sections/article/vigilkids/ArticleTocList.d.vue.ts +21 -0
- package/dist/sections/article/vigilkids/ArticleTocList.vue +56 -0
- package/dist/sections/article/vigilkids/ArticleTocList.vue.d.ts +21 -0
- package/dist/sections/article/vigilkids/ArticleTopAd.d.vue.ts +21 -0
- package/dist/sections/article/vigilkids/ArticleTopAd.vue +90 -0
- package/dist/sections/article/vigilkids/ArticleTopAd.vue.d.ts +21 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardCtaGroup.d.vue.ts +6 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardCtaGroup.vue +21 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardCtaGroup.vue.d.ts +6 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantA.d.vue.ts +21 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantA.vue +46 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantA.vue.d.ts +21 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantB.d.vue.ts +21 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantB.vue +46 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantB.vue.d.ts +21 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantC.d.vue.ts +21 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantC.vue +46 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantC.vue.d.ts +21 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantD.d.vue.ts +21 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantD.vue +56 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantD.vue.d.ts +21 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantE.d.vue.ts +21 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantE.vue +55 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantE.vue.d.ts +21 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantF.d.vue.ts +21 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantF.vue +56 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantF.vue.d.ts +21 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantG.d.vue.ts +21 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantG.vue +52 -0
- package/dist/sections/article/vigilkids/product-card/ProductCardVariantG.vue.d.ts +21 -0
- package/dist/styles/products/vigilkids.css +1 -1
- package/dist/styles/products/visiva.css +1 -1
- 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;
|