@vigilkids/section-renderer-vue 0.0.1 → 0.1.1
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/composables/useInlineEdit.d.ts +1 -1
- package/dist/composables/useInlineEdit.mjs +4 -2
- package/dist/composables/useLazyRender.mjs +2 -1
- package/dist/composables/useRegistry.d.ts +1 -1
- package/dist/composables/useRegistry.mjs +6 -3
- package/dist/composables/useSectionSEO.mjs +10 -5
- package/dist/composables/useSectionStyle.d.ts +1 -1
- package/dist/composables/useSectionStyle.mjs +10 -6
- package/dist/editor.d.ts +2 -2
- package/dist/editor.mjs +2 -2
- package/dist/index.d.ts +12 -12
- package/dist/index.mjs +8 -8
- package/dist/interactions/common.d.ts +5 -0
- package/dist/interactions/common.mjs +10 -0
- package/dist/interactions/vigilkids.d.ts +5 -0
- package/dist/interactions/vigilkids.mjs +26 -0
- package/dist/preview/createPreviewApp.mjs +33 -6
- package/dist/renderer/FallbackSection.vue +9 -3
- package/dist/renderer/LazySection.vue +25 -22
- package/dist/renderer/SectionErrorBoundary.vue +3 -1
- package/dist/renderer/SectionRenderer.vue +19 -6
- package/dist/renderer/SectionWrapper.vue +4 -5
- package/dist/sections/RichTextSection.vue +12 -12
- package/dist/sections/article/prosemirror.mjs +8 -4
- package/dist/sections/article/shared/ArticleCustomHtml.vue +46 -1
- package/dist/sections/article/shared/ArticleImage.vue +3 -3
- package/dist/sections/article/vigilkids/ArticleBulletList.vue +5 -10
- package/dist/sections/article/vigilkids/ArticleCta.vue +25 -39
- package/dist/sections/article/vigilkids/ArticleFaq.vue +4 -28
- package/dist/sections/article/vigilkids/ArticleFaqItem.vue +6 -7
- package/dist/sections/article/vigilkids/ArticleFeature.vue +8 -38
- package/dist/sections/article/vigilkids/ArticleHeading.vue +4 -14
- package/dist/sections/article/vigilkids/ArticleNotice.vue +7 -42
- package/dist/sections/article/vigilkids/ArticleProsCons.vue +11 -19
- package/dist/sections/article/vigilkids/ArticleQuestion.vue +9 -21
- package/dist/sections/article/vigilkids/ArticleQuote.vue +11 -13
- package/dist/sections/article/vigilkids/ArticleStepList.vue +9 -9
- package/dist/sections/article/vigilkids/ArticleSubheading.vue +8 -17
- package/dist/sections/article/vigilkids/ArticleTable.vue +10 -13
- package/dist/sections/article/vigilkids/ArticleToc.vue +14 -14
- package/dist/sections/article/visiva/ArticleBulletList.vue +4 -5
- package/dist/sections/article/visiva/ArticleCta.vue +127 -30
- package/dist/sections/article/visiva/ArticleFaq.vue +24 -11
- package/dist/sections/article/visiva/ArticleFeature.vue +22 -10
- package/dist/sections/article/visiva/ArticleHeading.vue +2 -2
- package/dist/sections/article/visiva/ArticleNotice.vue +19 -17
- package/dist/sections/article/visiva/ArticleProsCons.vue +41 -29
- package/dist/sections/article/visiva/ArticleQuestion.vue +20 -10
- package/dist/sections/article/visiva/ArticleQuote.vue +9 -5
- package/dist/sections/article/visiva/ArticleStepList.vue +9 -4
- package/dist/sections/article/visiva/ArticleSubheading.vue +32 -27
- package/dist/sections/article/visiva/ArticleTable.vue +79 -60
- package/dist/sections/article/visiva/ArticleToc.vue +42 -12
- package/dist/styles/products/vigilkids.css +1 -1
- package/dist/styles/products/visiva.css +1 -1
- package/package.json +18 -3
|
@@ -24,7 +24,7 @@ const title = computed(() => (props.settings.title as string) || '')
|
|
|
24
24
|
|
|
25
25
|
const items = computed(() =>
|
|
26
26
|
props.blockOrder
|
|
27
|
-
.map(
|
|
27
|
+
.map(id => props.blocks[id])
|
|
28
28
|
.filter((b): b is BlockData => !!b && b.type === 'faq_item'),
|
|
29
29
|
)
|
|
30
30
|
|
|
@@ -32,9 +32,9 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
32
32
|
editorMode: () => !!props.editorMode,
|
|
33
33
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
34
34
|
onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
|
|
35
|
-
onEditStart:
|
|
35
|
+
onEditStart: key => emit('inline-edit-start', key),
|
|
36
36
|
onEditEnd: () => emit('inline-edit-end'),
|
|
37
|
-
onUndoRedo:
|
|
37
|
+
onUndoRedo: action => emit('undo-redo', action),
|
|
38
38
|
})
|
|
39
39
|
</script>
|
|
40
40
|
|
|
@@ -42,18 +42,32 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
42
42
|
<div class="blog-qa-card3">
|
|
43
43
|
<div class="blog-qa-card3-header">
|
|
44
44
|
<!-- #faq -->
|
|
45
|
-
<svg
|
|
45
|
+
<svg
|
|
46
|
+
width="20"
|
|
47
|
+
height="20"
|
|
48
|
+
viewBox="0 0 20 20"
|
|
49
|
+
fill="none"
|
|
50
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
51
|
+
>
|
|
46
52
|
<g clip-path="url(#faq-clip0)">
|
|
47
|
-
<path
|
|
48
|
-
|
|
53
|
+
<path
|
|
54
|
+
d="M10 0.9375C4.995 0.9375 0.9375 4.995 0.9375 10L0.939583 10.1971C0.970862 11.7478 1.40154 13.2643 2.19 14.6L2.2975 14.7771L1.76417 16.2446L1.73583 16.3308C1.52417 17.1 1.92333 17.8767 2.64833 18.14L2.74667 18.1721C2.87917 18.2096 3.01625 18.2292 3.15417 18.2292L6.20125 18.2296L6.04542 18.1562C7.27779 18.7544 8.63012 19.0643 10 19.0625C15.005 19.0625 19.0625 15.005 19.0625 10C19.0625 4.995 15.005 0.9375 10 0.9375Z"
|
|
55
|
+
fill="#1FB04F"
|
|
56
|
+
/>
|
|
57
|
+
<path
|
|
58
|
+
d="M10 12.846C9.77992 12.846 9.56886 12.9334 9.41325 13.089C9.25763 13.2446 9.17021 13.4557 9.17021 13.6758C9.17021 13.8958 9.25763 14.1069 9.41325 14.2625C9.56886 14.4181 9.77992 14.5056 10 14.5056C10.2201 14.5056 10.4311 14.4181 10.5867 14.2625C10.7424 14.1069 10.8298 13.8958 10.8298 13.6758C10.8298 13.4557 10.7424 13.2446 10.5867 13.089C10.4311 12.9334 10.2201 12.846 10 12.846ZM10.0008 5.49514C9.26375 5.49514 8.56708 5.77555 8.03875 6.28472C7.76853 6.5439 7.55376 6.85525 7.40743 7.19989C7.26111 7.54454 7.18629 7.9153 7.1875 8.28972V8.4318L7.19041 8.47764C7.17499 8.56833 7.17912 8.66126 7.20253 8.75022C7.22593 8.83919 7.26807 8.92212 7.32613 8.99348C7.38418 9.06484 7.45681 9.12297 7.53915 9.16399C7.62149 9.205 7.71164 9.22795 7.80357 9.23131C7.8955 9.23466 7.98708 9.21834 8.07219 9.18343C8.1573 9.14852 8.23397 9.09583 8.29707 9.02889C8.36016 8.96195 8.40823 8.88231 8.43806 8.79528C8.46788 8.70826 8.47877 8.61588 8.47 8.52431L8.47833 8.45764L8.47958 8.29014L8.48166 8.21347C8.52333 7.48306 9.19083 6.89931 10.0008 6.89931C10.8408 6.89931 11.5221 7.52556 11.5221 8.28972C11.5221 8.80097 11.2096 9.27389 10.7154 9.51597L10.5362 9.59764C10.1943 9.76873 9.9069 10.0318 9.70625 10.3572C9.47583 10.726 9.35333 11.1697 9.35333 11.6251V12.0268L9.35625 12.0664C9.37958 12.1926 9.47625 12.2806 9.59291 12.2806H10.4054L10.4442 12.2768C10.5014 12.2648 10.5527 12.2333 10.5893 12.1877C10.6259 12.1421 10.6456 12.0853 10.645 12.0268V11.6026L10.6479 11.5335C10.6704 11.2347 10.8508 10.9693 11.105 10.8618C11.611 10.6485 12.0429 10.2907 12.3466 9.83323C12.6503 9.37574 12.8124 8.83885 12.8125 8.28972C12.8144 7.91532 12.7399 7.54447 12.5938 7.19976C12.4477 6.85505 12.2329 6.54371 11.9625 6.28472C11.4367 5.77566 10.7327 5.4923 10.0008 5.49514Z"
|
|
59
|
+
fill="white"
|
|
60
|
+
/>
|
|
49
61
|
</g>
|
|
50
62
|
<defs>
|
|
51
63
|
<clipPath id="faq-clip0">
|
|
52
|
-
<rect width="20" height="20" fill="white"/>
|
|
64
|
+
<rect width="20" height="20" fill="white" />
|
|
53
65
|
</clipPath>
|
|
54
66
|
</defs>
|
|
55
67
|
</svg>
|
|
56
|
-
<h2 class="blog-qa-card3-title" v-bind="editableAttrs('title')">
|
|
68
|
+
<h2 class="blog-qa-card3-title" v-bind="editableAttrs('title')">
|
|
69
|
+
{{ title }}
|
|
70
|
+
</h2>
|
|
57
71
|
</div>
|
|
58
72
|
|
|
59
73
|
<div
|
|
@@ -64,9 +78,8 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
64
78
|
<h3 class="blog-qa-card3-question" v-bind="blockEditableAttrs(blockOrder[index], 'question')">
|
|
65
79
|
{{ item.settings.question }}
|
|
66
80
|
</h3>
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
</p>
|
|
81
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
82
|
+
<div class="blog-qa-card3-answer" v-bind="blockEditableAttrs(blockOrder[index], 'answer')" v-html="item.settings.answer" />
|
|
70
83
|
</div>
|
|
71
84
|
</div>
|
|
72
85
|
</template>
|
|
@@ -30,9 +30,9 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
30
30
|
editorMode: () => !!props.editorMode,
|
|
31
31
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
32
32
|
onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
|
|
33
|
-
onEditStart:
|
|
33
|
+
onEditStart: key => emit('inline-edit-start', key),
|
|
34
34
|
onEditEnd: () => emit('inline-edit-end'),
|
|
35
|
-
onUndoRedo:
|
|
35
|
+
onUndoRedo: action => emit('undo-redo', action),
|
|
36
36
|
})
|
|
37
37
|
</script>
|
|
38
38
|
|
|
@@ -40,13 +40,14 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
40
40
|
<!-- blog-features-card / blog-features-card-dark -->
|
|
41
41
|
<div :class="isDark ? 'blog-features-card-dark' : 'blog-features-card'">
|
|
42
42
|
<div class="blog-features-card-content">
|
|
43
|
-
<h2 class="blog-features-card-title" v-bind="editableAttrs('title')">
|
|
43
|
+
<h2 class="blog-features-card-title" v-bind="editableAttrs('title')">
|
|
44
|
+
{{ s.title }}
|
|
45
|
+
</h2>
|
|
44
46
|
|
|
45
47
|
<ul :class="isDark ? 'blog-features-card-dark-list' : 'blog-features-card-list'">
|
|
46
48
|
<template v-for="blockId in blockOrder" :key="blockId">
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
</li>
|
|
49
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
50
|
+
<li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')" v-html="blocks[blockId]!.settings.text" />
|
|
50
51
|
</template>
|
|
51
52
|
</ul>
|
|
52
53
|
|
|
@@ -57,10 +58,21 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
57
58
|
rel="noopener noreferrer"
|
|
58
59
|
>
|
|
59
60
|
<!-- #living-beauty -->
|
|
60
|
-
<svg
|
|
61
|
-
|
|
61
|
+
<svg
|
|
62
|
+
width="16"
|
|
63
|
+
height="16"
|
|
64
|
+
viewBox="0 0 16 16"
|
|
65
|
+
fill="none"
|
|
66
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
67
|
+
>
|
|
68
|
+
<path
|
|
69
|
+
d="M6.23628 4.592C6.15503 4.51075 6.02222 4.51075 5.94097 4.592L4.15815 6.37481C4.0769 6.45606 4.0769 6.58887 4.15815 6.67012L12.016 14.5279C12.2738 14.7857 12.7644 14.7154 13.1097 14.3701L13.9363 13.5436C14.2816 13.1982 14.3519 12.7076 14.0941 12.4498L6.23628 4.592ZM3.2769 5.78731C3.35815 5.86856 3.49097 5.86856 3.57222 5.78731L5.35503 4.00449C5.43628 3.92324 5.43628 3.79043 5.35503 3.70918L3.33159 1.68731C3.07378 1.4295 2.58315 1.49981 2.23784 1.84512L1.41128 2.67168C1.06597 3.01699 0.995654 3.50762 1.25347 3.76543L3.2769 5.78731ZM4.64878 11.4982C4.48315 11.4279 4.3519 11.2967 4.28159 11.1311L3.68784 9.74356C3.67378 9.71074 3.64722 9.68418 3.6144 9.67012C3.54409 9.64043 3.46128 9.67324 3.43159 9.74356L2.83784 11.1311C2.76753 11.2967 2.63628 11.4279 2.47065 11.4982L1.08315 12.092C1.05034 12.1061 1.02378 12.1326 1.00972 12.1654C0.980029 12.2357 1.01284 12.3186 1.08315 12.3482L2.47065 12.942C2.63628 13.0123 2.76753 13.1436 2.83784 13.3092L3.43159 14.6967C3.44565 14.7295 3.47222 14.7561 3.50503 14.7701C3.57534 14.7998 3.65815 14.767 3.68784 14.6967L4.28159 13.3092C4.3519 13.1436 4.48315 13.0123 4.64878 12.942L6.03628 12.3482C6.06909 12.3342 6.09565 12.3076 6.10972 12.2748C6.1394 12.2045 6.10659 12.1217 6.03628 12.092L4.64878 11.4982ZM8.72065 3.55137C8.83784 3.60137 8.93003 3.69356 8.98003 3.81075L9.4019 4.79825C9.41128 4.82168 9.43003 4.84043 9.45347 4.84981C9.50347 4.87168 9.56128 4.84825 9.58315 4.79825L10.005 3.81075C10.055 3.69356 10.1472 3.60137 10.2644 3.55137L11.2519 3.1295C11.2753 3.12012 11.2941 3.10137 11.3035 3.07793C11.3253 3.02793 11.3019 2.97012 11.2519 2.94824L10.2644 2.52637C10.1472 2.47637 10.055 2.38418 10.005 2.267L9.58315 1.2795C9.57378 1.25606 9.55503 1.23731 9.53159 1.22793C9.48159 1.20606 9.42378 1.2295 9.4019 1.2795L8.98003 2.267C8.93003 2.38418 8.83784 2.47637 8.72065 2.52637L7.73315 2.94824C7.70972 2.95762 7.69097 2.97637 7.68159 2.99981C7.65972 3.04981 7.68315 3.10762 7.73315 3.1295L8.72065 3.55137ZM14.955 6.65137L14.2019 6.32949C14.1128 6.292 14.0425 6.22012 14.005 6.13106L13.6832 5.37793C13.6753 5.36074 13.6613 5.34668 13.6441 5.33887C13.6066 5.32325 13.5613 5.34043 13.5457 5.37793L13.2238 6.13106C13.1863 6.22012 13.1144 6.29043 13.0269 6.32949L12.2738 6.65137C12.2566 6.65918 12.2425 6.67324 12.2347 6.69043C12.2191 6.72793 12.2363 6.77324 12.2738 6.78887L13.0269 7.11074C13.116 7.14824 13.1863 7.22012 13.2238 7.30762L13.5457 8.06075C13.5535 8.07793 13.5675 8.092 13.5847 8.09981C13.6222 8.11543 13.6675 8.09825 13.6832 8.06075L14.005 7.30762C14.0425 7.21856 14.1144 7.14824 14.2019 7.11074L14.955 6.78887C14.9722 6.78106 14.9863 6.76699 14.9941 6.74981C15.0113 6.71231 14.9925 6.66856 14.955 6.65137Z"
|
|
70
|
+
fill="currentColor"
|
|
71
|
+
/>
|
|
62
72
|
</svg>
|
|
63
|
-
<span class="blog-button-group-text" v-bind="editableAttrs('button_text')">{{
|
|
73
|
+
<span class="blog-button-group-text" v-bind="editableAttrs('button_text')">{{
|
|
74
|
+
s.button_text
|
|
75
|
+
}}</span>
|
|
64
76
|
</a>
|
|
65
77
|
</div>
|
|
66
78
|
|
|
@@ -69,7 +81,7 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
69
81
|
:src="safeUrl(String(s.image_src || ''))"
|
|
70
82
|
alt="Feature Image"
|
|
71
83
|
class="blog-features-card-image"
|
|
72
|
-
|
|
84
|
+
>
|
|
73
85
|
</div>
|
|
74
86
|
</div>
|
|
75
87
|
</template>
|
|
@@ -27,9 +27,9 @@ const { editableAttrs } = useInlineEdit({
|
|
|
27
27
|
editorMode: () => !!props.editorMode,
|
|
28
28
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
29
29
|
onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
|
|
30
|
-
onEditStart:
|
|
30
|
+
onEditStart: key => emit('inline-edit-start', key),
|
|
31
31
|
onEditEnd: () => emit('inline-edit-end'),
|
|
32
|
-
onUndoRedo:
|
|
32
|
+
onUndoRedo: action => emit('undo-redo', action),
|
|
33
33
|
})
|
|
34
34
|
</script>
|
|
35
35
|
|
|
@@ -28,9 +28,9 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
28
28
|
editorMode: () => !!props.editorMode,
|
|
29
29
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
30
30
|
onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
|
|
31
|
-
onEditStart:
|
|
31
|
+
onEditStart: key => emit('inline-edit-start', key),
|
|
32
32
|
onEditEnd: () => emit('inline-edit-end'),
|
|
33
|
-
onUndoRedo:
|
|
33
|
+
onUndoRedo: action => emit('undo-redo', action),
|
|
34
34
|
})
|
|
35
35
|
</script>
|
|
36
36
|
|
|
@@ -44,14 +44,14 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
44
44
|
<img src="https://cdn.visiva.ai/blog/temp/idea.png" alt="Lightbulb" class="blog-note-style-badge-icon">
|
|
45
45
|
<span class="blog-note-style-badge-text">Tips</span>
|
|
46
46
|
</div>
|
|
47
|
-
|
|
47
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
48
|
+
<div
|
|
48
49
|
v-for="id in blockOrder"
|
|
49
50
|
:key="id"
|
|
50
51
|
class="blog-note-style-text"
|
|
51
52
|
v-bind="blockEditableAttrs(id, 'text')"
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
</p>
|
|
53
|
+
v-html="(blocks[id]?.settings as Record<string, unknown>)?.text ?? ''"
|
|
54
|
+
/>
|
|
55
55
|
</div>
|
|
56
56
|
|
|
57
57
|
<!-- note 变体: blog-note-style2 -->
|
|
@@ -63,14 +63,14 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
63
63
|
<img src="https://cdn.visiva.ai/blog/temp/note.png" alt="Note" class="blog-note-style-badge-icon">
|
|
64
64
|
<span class="blog-note-style-badge-text">{{ title || 'Tips' }}</span>
|
|
65
65
|
</div>
|
|
66
|
-
|
|
66
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
67
|
+
<div
|
|
67
68
|
v-for="id in blockOrder"
|
|
68
69
|
:key="id"
|
|
69
70
|
class="blog-note-style-text"
|
|
70
71
|
v-bind="blockEditableAttrs(id, 'text')"
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
</p>
|
|
72
|
+
v-html="(blocks[id]?.settings as Record<string, unknown>)?.text ?? ''"
|
|
73
|
+
/>
|
|
74
74
|
</div>
|
|
75
75
|
|
|
76
76
|
<!-- info 变体: blog-note-style3 -->
|
|
@@ -81,19 +81,21 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
81
81
|
<div class="blog-note-style3-header">
|
|
82
82
|
<!-- #info -->
|
|
83
83
|
<svg class="blog-note-style3-icon" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
84
|
-
<path d="M11 0.5C16.799 0.5 21.5 5.20101 21.5 11C21.5 16.799 16.799 21.5 11 21.5C5.20101 21.5 0.5 16.799 0.5 11C0.5 5.20101 5.20101 0.5 11 0.5Z" fill="white" stroke="#CDD2D7"/>
|
|
85
|
-
<path d="M12.5847 7.37917C12.9571 7.39087 13.3202 7.27513 13.5986 7.05598C13.8657 6.84097 14 6.5525 14 6.19058C14 5.82733 13.8657 5.53887 13.5986 5.32386C13.3242 5.10586 12.9653 4.99007 12.5968 5.00067C12.2282 4.99007 11.8693 5.10586 11.5949 5.32386C11.3278 5.53887 11.1935 5.82733 11.1935 6.18925C11.1935 6.5525 11.3278 6.84097 11.5949 7.05598C11.8654 7.27259 12.22 7.38837 12.5847 7.37917ZM12.8684 14.8913C12.8684 14.8071 12.8759 14.6963 12.891 14.5574C12.9061 14.4185 12.9061 14.2863 12.891 14.1608L11.6416 15.4335C11.5164 15.559 11.3851 15.6565 11.2524 15.7259C11.1181 15.7954 11.0049 15.8168 10.9114 15.7887C10.7695 15.7326 10.7061 15.6351 10.7227 15.4962L12.7974 9.71627C12.8744 9.3263 12.805 8.99243 12.5847 8.71465C12.3644 8.43687 12.0113 8.26993 11.524 8.21384C10.9732 8.2272 10.3727 8.43286 9.71935 8.8295C9.06752 9.22614 8.49717 9.73096 8.01132 10.3426V10.6551C7.99623 10.7953 7.99623 10.9276 8.01132 11.0531L9.25915 9.77903C9.38589 9.65483 9.51565 9.55734 9.64843 9.48656C9.78423 9.41712 9.88985 9.39708 9.96831 9.42513C10.1252 9.49324 10.1796 9.60542 10.1328 9.759L8.08072 15.5176C8.02381 15.673 8.00918 15.838 8.03802 15.9993C8.06686 16.1606 8.13837 16.3136 8.2467 16.4458C8.46699 16.7182 8.85175 16.9025 9.40249 17C10.1871 16.9866 10.848 16.7837 11.3821 16.3937C11.9593 15.9612 12.4603 15.4548 12.8684 14.8913Z" fill="#121212"/>
|
|
84
|
+
<path d="M11 0.5C16.799 0.5 21.5 5.20101 21.5 11C21.5 16.799 16.799 21.5 11 21.5C5.20101 21.5 0.5 16.799 0.5 11C0.5 5.20101 5.20101 0.5 11 0.5Z" fill="white" stroke="#CDD2D7" />
|
|
85
|
+
<path d="M12.5847 7.37917C12.9571 7.39087 13.3202 7.27513 13.5986 7.05598C13.8657 6.84097 14 6.5525 14 6.19058C14 5.82733 13.8657 5.53887 13.5986 5.32386C13.3242 5.10586 12.9653 4.99007 12.5968 5.00067C12.2282 4.99007 11.8693 5.10586 11.5949 5.32386C11.3278 5.53887 11.1935 5.82733 11.1935 6.18925C11.1935 6.5525 11.3278 6.84097 11.5949 7.05598C11.8654 7.27259 12.22 7.38837 12.5847 7.37917ZM12.8684 14.8913C12.8684 14.8071 12.8759 14.6963 12.891 14.5574C12.9061 14.4185 12.9061 14.2863 12.891 14.1608L11.6416 15.4335C11.5164 15.559 11.3851 15.6565 11.2524 15.7259C11.1181 15.7954 11.0049 15.8168 10.9114 15.7887C10.7695 15.7326 10.7061 15.6351 10.7227 15.4962L12.7974 9.71627C12.8744 9.3263 12.805 8.99243 12.5847 8.71465C12.3644 8.43687 12.0113 8.26993 11.524 8.21384C10.9732 8.2272 10.3727 8.43286 9.71935 8.8295C9.06752 9.22614 8.49717 9.73096 8.01132 10.3426V10.6551C7.99623 10.7953 7.99623 10.9276 8.01132 11.0531L9.25915 9.77903C9.38589 9.65483 9.51565 9.55734 9.64843 9.48656C9.78423 9.41712 9.88985 9.39708 9.96831 9.42513C10.1252 9.49324 10.1796 9.60542 10.1328 9.759L8.08072 15.5176C8.02381 15.673 8.00918 15.838 8.03802 15.9993C8.06686 16.1606 8.13837 16.3136 8.2467 16.4458C8.46699 16.7182 8.85175 16.9025 9.40249 17C10.1871 16.9866 10.848 16.7837 11.3821 16.3937C11.9593 15.9612 12.4603 15.4548 12.8684 14.8913Z" fill="#121212" />
|
|
86
86
|
</svg>
|
|
87
|
-
<h3 class="blog-note-style3-title" v-bind="editableAttrs('title')">
|
|
87
|
+
<h3 class="blog-note-style3-title" v-bind="editableAttrs('title')">
|
|
88
|
+
{{ title || 'Note' }}
|
|
89
|
+
</h3>
|
|
88
90
|
</div>
|
|
89
|
-
|
|
91
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
92
|
+
<div
|
|
90
93
|
v-for="id in blockOrder"
|
|
91
94
|
:key="id"
|
|
92
95
|
class="blog-note-style3-text"
|
|
93
96
|
v-bind="blockEditableAttrs(id, 'text')"
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
</p>
|
|
97
|
+
v-html="(blocks[id]?.settings as Record<string, unknown>)?.text ?? ''"
|
|
98
|
+
/>
|
|
97
99
|
</div>
|
|
98
100
|
</template>
|
|
99
101
|
|
|
@@ -20,27 +20,19 @@ const emit = defineEmits<{
|
|
|
20
20
|
(e: 'undo-redo', action: 'redo' | 'undo'): void
|
|
21
21
|
}>()
|
|
22
22
|
|
|
23
|
-
const prosTitle = computed(
|
|
24
|
-
|
|
25
|
-
)
|
|
26
|
-
const consTitle = computed(
|
|
27
|
-
() => (props.settings.cons_title as string) || 'Cons',
|
|
28
|
-
)
|
|
23
|
+
const prosTitle = computed(() => (props.settings.pros_title as string) || 'Pros')
|
|
24
|
+
const consTitle = computed(() => (props.settings.cons_title as string) || 'Cons')
|
|
29
25
|
|
|
30
|
-
const prosBlocks = computed(() =>
|
|
31
|
-
|
|
32
|
-
)
|
|
33
|
-
const consBlocks = computed(() =>
|
|
34
|
-
props.blockOrder.filter((id) => props.blocks[id]?.type === 'con'),
|
|
35
|
-
)
|
|
26
|
+
const prosBlocks = computed(() => props.blockOrder.filter(id => props.blocks[id]?.type === 'pro'))
|
|
27
|
+
const consBlocks = computed(() => props.blockOrder.filter(id => props.blocks[id]?.type === 'con'))
|
|
36
28
|
|
|
37
29
|
const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
38
30
|
editorMode: () => !!props.editorMode,
|
|
39
31
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
40
32
|
onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
|
|
41
|
-
onEditStart:
|
|
33
|
+
onEditStart: key => emit('inline-edit-start', key),
|
|
42
34
|
onEditEnd: () => emit('inline-edit-end'),
|
|
43
|
-
onUndoRedo:
|
|
35
|
+
onUndoRedo: action => emit('undo-redo', action),
|
|
44
36
|
})
|
|
45
37
|
</script>
|
|
46
38
|
|
|
@@ -50,17 +42,27 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
50
42
|
<div v-if="prosBlocks.length > 0" class="blog-pros-cons-card">
|
|
51
43
|
<div class="blog-pros-cons-header">
|
|
52
44
|
<!-- #like -->
|
|
53
|
-
<svg
|
|
54
|
-
|
|
55
|
-
|
|
45
|
+
<svg
|
|
46
|
+
width="28"
|
|
47
|
+
height="28"
|
|
48
|
+
viewBox="0 0 28 28"
|
|
49
|
+
fill="none"
|
|
50
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
51
|
+
>
|
|
52
|
+
<circle cx="14" cy="14" r="13" fill="#02A967" />
|
|
53
|
+
<path
|
|
54
|
+
d="M8.70457 11.3571C8.8854 11.3571 9.05883 11.4324 9.1867 11.5664C9.31456 11.7003 9.3864 11.882 9.3864 12.0714V20.2857C9.3864 20.4752 9.31456 20.6568 9.1867 20.7908C9.05883 20.9247 8.8854 21 8.70457 21H8.1932C7.87674 21 7.57325 20.8683 7.34948 20.6339C7.12571 20.3995 7 20.0815 7 19.75V12.6071C7 12.2756 7.12571 11.9577 7.34948 11.7233C7.57325 11.4888 7.87674 11.3571 8.1932 11.3571H8.70457ZM15.1871 6C15.5491 6 15.8963 6.15066 16.1523 6.41884C16.4083 6.68701 16.5521 7.05074 16.5521 7.43V10.6429C16.5521 10.8323 16.6239 11.014 16.7518 11.1479C16.8796 11.2819 17.0531 11.3571 17.2339 11.3571H19.9527C20.2711 11.357 20.5852 11.4347 20.8699 11.5841C21.1546 11.7334 21.4021 11.9503 21.5927 12.2175C21.7833 12.4847 21.9118 12.7948 21.968 13.1232C22.0241 13.4515 22.0063 13.789 21.916 14.1089L20.399 19.4661C20.2733 19.9092 20.0143 20.298 19.6605 20.5744C19.3068 20.8509 18.8773 21.0001 18.436 21H11.0917C11.0021 21 10.9134 20.9816 10.8306 20.9457C10.7478 20.9099 10.6726 20.8573 10.6092 20.7909C10.5458 20.7246 10.4955 20.6459 10.4612 20.5592C10.4269 20.4725 10.4092 20.3796 10.4091 20.2857V12.0714C10.4091 11.882 10.481 11.7003 10.6088 11.5664C10.7367 11.4324 10.9101 11.3571 11.091 11.3571H11.4329C11.7266 11.3572 12.0121 11.2556 12.245 11.0681C12.4779 10.8807 12.6452 10.618 12.7209 10.3207L13.4699 7.38143C13.5709 6.98517 13.794 6.63495 14.1045 6.38515C14.415 6.13535 14.7956 5.99996 15.1871 6Z"
|
|
55
|
+
fill="white"
|
|
56
|
+
/>
|
|
56
57
|
</svg>
|
|
57
|
-
<h3 class="blog-pros-cons-title" v-bind="editableAttrs('pros_title')">
|
|
58
|
+
<h3 class="blog-pros-cons-title" v-bind="editableAttrs('pros_title')">
|
|
59
|
+
{{ prosTitle }}
|
|
60
|
+
</h3>
|
|
58
61
|
</div>
|
|
59
62
|
<ul class="blog-pros-cons-list">
|
|
60
63
|
<template v-for="blockId in prosBlocks" :key="blockId">
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
</li>
|
|
64
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
65
|
+
<li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')" v-html="blocks[blockId]!.settings.text" />
|
|
64
66
|
</template>
|
|
65
67
|
</ul>
|
|
66
68
|
</div>
|
|
@@ -69,24 +71,34 @@ const { editableAttrs, blockEditableAttrs } = useInlineEdit({
|
|
|
69
71
|
<div v-if="consBlocks.length > 0" class="blog-pros-cons-card">
|
|
70
72
|
<div class="blog-pros-cons-header">
|
|
71
73
|
<!-- #unlike -->
|
|
72
|
-
<svg
|
|
74
|
+
<svg
|
|
75
|
+
width="28"
|
|
76
|
+
height="28"
|
|
77
|
+
viewBox="0 0 28 28"
|
|
78
|
+
fill="none"
|
|
79
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
80
|
+
>
|
|
73
81
|
<g clip-path="url(#unlike-clip0)">
|
|
74
|
-
<circle cx="14" cy="14" r="13" fill="#F3455C"/>
|
|
75
|
-
<path
|
|
82
|
+
<circle cx="14" cy="14" r="13" fill="#F3455C" />
|
|
83
|
+
<path
|
|
84
|
+
d="M8.70457 16.6429C8.8854 16.6429 9.05883 16.5676 9.1867 16.4336C9.31456 16.2997 9.3864 16.118 9.3864 15.9286V7.71429C9.3864 7.52485 9.31456 7.34317 9.1867 7.20921C9.05883 7.07526 8.8854 7 8.70457 7H8.1932C7.87674 7 7.57325 7.1317 7.34948 7.36612C7.12571 7.60054 7 7.91848 7 8.25V15.3929C7 15.7244 7.12571 16.0423 7.34948 16.2767C7.57325 16.5112 7.87674 16.6429 8.1932 16.6429H8.70457ZM15.1871 22C15.5491 22 15.8963 21.8493 16.1523 21.5812C16.4083 21.313 16.5521 20.9493 16.5521 20.57V17.3571C16.5521 17.1677 16.6239 16.986 16.7518 16.8521C16.8796 16.7181 17.0531 16.6429 17.2339 16.6429H19.9527C20.2711 16.643 20.5852 16.5653 20.8699 16.4159C21.1546 16.2666 21.4021 16.0497 21.5927 15.7825C21.7833 15.5153 21.9118 15.2052 21.968 14.8768C22.0241 14.5485 22.0063 14.211 21.916 13.8911L20.399 8.53393C20.2733 8.09076 20.0143 7.70199 19.6605 7.42557C19.3068 7.14915 18.8773 6.99988 18.436 7H11.0917C11.0021 6.99995 10.9134 7.01839 10.8306 7.05426C10.7478 7.09013 10.6726 7.14274 10.6092 7.20906C10.5458 7.27539 10.4955 7.35415 10.4612 7.44083C10.4269 7.52752 10.4092 7.62044 10.4091 7.71429V15.9286C10.4091 16.118 10.481 16.2997 10.6088 16.4336C10.7367 16.5676 10.9101 16.6429 11.091 16.6429H11.4329C11.7266 16.6428 12.0121 16.7444 12.245 16.9319C12.4779 17.1193 12.6452 17.382 12.7209 17.6793L13.4699 20.6186C13.5709 21.0148 13.794 21.365 14.1045 21.6148C14.415 21.8646 14.7956 22 15.1871 22Z"
|
|
85
|
+
fill="white"
|
|
86
|
+
/>
|
|
76
87
|
</g>
|
|
77
88
|
<defs>
|
|
78
89
|
<clipPath id="unlike-clip0">
|
|
79
|
-
<rect width="28" height="28" fill="white" transform="matrix(1 0 0 -1 0 28)"/>
|
|
90
|
+
<rect width="28" height="28" fill="white" transform="matrix(1 0 0 -1 0 28)" />
|
|
80
91
|
</clipPath>
|
|
81
92
|
</defs>
|
|
82
93
|
</svg>
|
|
83
|
-
<h3 class="blog-pros-cons-title" v-bind="editableAttrs('cons_title')">
|
|
94
|
+
<h3 class="blog-pros-cons-title" v-bind="editableAttrs('cons_title')">
|
|
95
|
+
{{ consTitle }}
|
|
96
|
+
</h3>
|
|
84
97
|
</div>
|
|
85
98
|
<ul class="blog-pros-cons-list">
|
|
86
99
|
<template v-for="blockId in consBlocks" :key="blockId">
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
</li>
|
|
100
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
101
|
+
<li v-if="blocks[blockId]" v-bind="blockEditableAttrs(blockId, 'text')" v-html="blocks[blockId]!.settings.text" />
|
|
90
102
|
</template>
|
|
91
103
|
</ul>
|
|
92
104
|
</div>
|
|
@@ -25,7 +25,7 @@ const variant = computed(() => (s.value.variant as string) || 'default')
|
|
|
25
25
|
|
|
26
26
|
const items = computed(() =>
|
|
27
27
|
props.blockOrder
|
|
28
|
-
.map(
|
|
28
|
+
.map(id => props.blocks[id])
|
|
29
29
|
.filter((b): b is BlockData => !!b && b.type === 'qa_item'),
|
|
30
30
|
)
|
|
31
31
|
|
|
@@ -33,9 +33,9 @@ const { blockEditableAttrs } = useInlineEdit({
|
|
|
33
33
|
editorMode: () => !!props.editorMode,
|
|
34
34
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
35
35
|
onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
|
|
36
|
-
onEditStart:
|
|
36
|
+
onEditStart: key => emit('inline-edit-start', key),
|
|
37
37
|
onEditEnd: () => emit('inline-edit-end'),
|
|
38
|
-
onUndoRedo:
|
|
38
|
+
onUndoRedo: action => emit('undo-redo', action),
|
|
39
39
|
})
|
|
40
40
|
</script>
|
|
41
41
|
|
|
@@ -50,26 +50,36 @@ const { blockEditableAttrs } = useInlineEdit({
|
|
|
50
50
|
<h3 class="blog-qa-question" v-bind="blockEditableAttrs(blockOrder[index], 'question')">
|
|
51
51
|
{{ item.settings.question }}
|
|
52
52
|
</h3>
|
|
53
|
-
<p
|
|
53
|
+
<p
|
|
54
|
+
class="blog-qa-answer"
|
|
55
|
+
v-bind="blockEditableAttrs(blockOrder[index], 'answer')"
|
|
56
|
+
v-html="String(item.settings.answer || '')"
|
|
57
|
+
/>
|
|
54
58
|
</div>
|
|
55
59
|
</div>
|
|
56
60
|
|
|
57
61
|
<!-- blog-qa-card2: titled -->
|
|
58
62
|
<template v-else-if="variant === 'titled'">
|
|
59
|
-
<h2 class="blog-qa-card2-title">
|
|
60
|
-
|
|
63
|
+
<h2 class="blog-qa-card2-title">
|
|
64
|
+
{{ s.title }}
|
|
65
|
+
</h2>
|
|
66
|
+
<p v-if="s.intro" class="blog-qa-card2-intro">
|
|
67
|
+
{{ s.intro }}
|
|
68
|
+
</p>
|
|
61
69
|
<div class="blog-qa-card2-container">
|
|
62
70
|
<div
|
|
63
71
|
v-for="(item, index) in items"
|
|
64
72
|
:key="blockOrder[index]"
|
|
65
73
|
:class="index === items.length - 1 ? 'blog-qa-item-last' : 'blog-qa-item'"
|
|
66
74
|
>
|
|
67
|
-
<h3
|
|
75
|
+
<h3
|
|
76
|
+
class="blog-qa-question-black"
|
|
77
|
+
v-bind="blockEditableAttrs(blockOrder[index], 'question')"
|
|
78
|
+
>
|
|
68
79
|
{{ item.settings.question }}
|
|
69
80
|
</h3>
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
</p>
|
|
81
|
+
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
82
|
+
<div class="blog-qa-answer" v-html="item.settings.answer" />
|
|
73
83
|
</div>
|
|
74
84
|
</div>
|
|
75
85
|
</template>
|
|
@@ -3,8 +3,8 @@ import type { BlockData } from '@vigilkids/section-core'
|
|
|
3
3
|
|
|
4
4
|
import { computed } from 'vue'
|
|
5
5
|
|
|
6
|
-
import { renderContent } from '../prosemirror'
|
|
7
6
|
import { useInlineEdit } from '../../../composables/useInlineEdit'
|
|
7
|
+
import { renderContent } from '../prosemirror'
|
|
8
8
|
|
|
9
9
|
const props = defineProps<{
|
|
10
10
|
blockOrder: string[]
|
|
@@ -28,19 +28,23 @@ const { editableAttrs } = useInlineEdit({
|
|
|
28
28
|
editorMode: () => !!props.editorMode,
|
|
29
29
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
30
30
|
onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
|
|
31
|
-
onEditStart:
|
|
31
|
+
onEditStart: key => emit('inline-edit-start', key),
|
|
32
32
|
onEditEnd: () => emit('inline-edit-end'),
|
|
33
|
-
onUndoRedo:
|
|
33
|
+
onUndoRedo: action => emit('undo-redo', action),
|
|
34
34
|
})
|
|
35
35
|
</script>
|
|
36
36
|
|
|
37
37
|
<template>
|
|
38
38
|
<div class="blog-quote">
|
|
39
|
-
<h3 v-if="s.title" class="blog-quote-title" v-bind="editableAttrs('title')">
|
|
39
|
+
<h3 v-if="s.title" class="blog-quote-title" v-bind="editableAttrs('title')">
|
|
40
|
+
{{ s.title }}
|
|
41
|
+
</h3>
|
|
40
42
|
<p class="blog-quote-text" v-html="renderedContent" />
|
|
41
43
|
<div v-if="s.attribution" class="blog-quote-footer">
|
|
42
44
|
<span class="blog-quote-divider" />
|
|
43
|
-
<p class="blog-quote-author">
|
|
45
|
+
<p class="blog-quote-author">
|
|
46
|
+
by <span v-bind="editableAttrs('attribution')">{{ s.attribution }}</span>
|
|
47
|
+
</p>
|
|
44
48
|
</div>
|
|
45
49
|
</div>
|
|
46
50
|
</template>
|
|
@@ -27,18 +27,23 @@ const { blockEditableAttrs } = useInlineEdit({
|
|
|
27
27
|
editorMode: () => !!props.editorMode,
|
|
28
28
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
29
29
|
onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
|
|
30
|
-
onEditStart:
|
|
30
|
+
onEditStart: key => emit('inline-edit-start', key),
|
|
31
31
|
onEditEnd: () => emit('inline-edit-end'),
|
|
32
|
-
onUndoRedo:
|
|
32
|
+
onUndoRedo: action => emit('undo-redo', action),
|
|
33
33
|
})
|
|
34
34
|
</script>
|
|
35
35
|
|
|
36
36
|
<template>
|
|
37
37
|
<template v-for="blockId in blockOrder" :key="blockId">
|
|
38
38
|
<h5 v-if="blocks[blockId]" class="blog-step">
|
|
39
|
-
<span class="blog-step-number" v-bind="blockEditableAttrs(blockId, 'label')">{{
|
|
39
|
+
<span class="blog-step-number" v-bind="blockEditableAttrs(blockId, 'label')">{{
|
|
40
|
+
blocks[blockId]!.settings.label
|
|
41
|
+
}}</span>
|
|
40
42
|
<span>. </span>
|
|
41
|
-
<span
|
|
43
|
+
<span
|
|
44
|
+
v-bind="blockEditableAttrs(blockId, 'description')"
|
|
45
|
+
v-html="String(blocks[blockId]!.settings.description || '')"
|
|
46
|
+
/>
|
|
42
47
|
</h5>
|
|
43
48
|
</template>
|
|
44
49
|
</template>
|
|
@@ -27,57 +27,62 @@ const { editableAttrs } = useInlineEdit({
|
|
|
27
27
|
editorMode: () => !!props.editorMode,
|
|
28
28
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
29
29
|
onBlockSettingUpdate: (blockId, key, value) => emit('update:block-setting', blockId, key, value),
|
|
30
|
-
onEditStart:
|
|
30
|
+
onEditStart: key => emit('inline-edit-start', key),
|
|
31
31
|
onEditEnd: () => emit('inline-edit-end'),
|
|
32
|
-
onUndoRedo:
|
|
32
|
+
onUndoRedo: action => emit('undo-redo', action),
|
|
33
33
|
})
|
|
34
34
|
</script>
|
|
35
35
|
|
|
36
36
|
<template>
|
|
37
37
|
<!-- blog-h3-style1: plain -->
|
|
38
|
-
<h3
|
|
39
|
-
v-if="variant === 'plain'"
|
|
40
|
-
:id="String(s.anchor || '')"
|
|
41
|
-
class="blog-h3-style1"
|
|
42
|
-
>
|
|
38
|
+
<h3 v-if="variant === 'plain'" :id="String(s.anchor || '')" class="blog-h3-style1">
|
|
43
39
|
<span v-bind="editableAttrs('title')">{{ s.title }}</span>
|
|
44
40
|
</h3>
|
|
45
41
|
|
|
46
42
|
<!-- blog-h3-style2: numbered -->
|
|
47
|
-
<h3
|
|
48
|
-
v-else-if="variant === 'numbered'"
|
|
49
|
-
:id="String(s.anchor || '')"
|
|
50
|
-
class="blog-h3-style2"
|
|
51
|
-
>
|
|
43
|
+
<h3 v-else-if="variant === 'numbered'" :id="String(s.anchor || '')" class="blog-h3-style2">
|
|
52
44
|
<span class="blog-h3-style2-number" v-bind="editableAttrs('number')">{{ s.number }}</span>
|
|
53
45
|
<span v-bind="editableAttrs('title')">{{ s.title }}</span>
|
|
54
46
|
</h3>
|
|
55
47
|
|
|
56
48
|
<!-- blog-h3-style3: pill -->
|
|
57
|
-
<h3
|
|
58
|
-
v-else-if="variant === 'pill'"
|
|
59
|
-
:id="String(s.anchor || '')"
|
|
60
|
-
class="blog-h3-style3"
|
|
61
|
-
>
|
|
49
|
+
<h3 v-else-if="variant === 'pill'" :id="String(s.anchor || '')" class="blog-h3-style3">
|
|
62
50
|
<span class="blog-h3-style3-badge" v-bind="editableAttrs('label')">{{ s.label }}</span>
|
|
63
51
|
<span v-bind="editableAttrs('title')">{{ s.title }}</span>
|
|
64
52
|
</h3>
|
|
65
53
|
|
|
66
54
|
<!-- blog-h3-style4: icon -->
|
|
67
|
-
<h3
|
|
68
|
-
v-else-if="variant === 'icon'"
|
|
69
|
-
:id="String(s.anchor || '')"
|
|
70
|
-
class="blog-h3-style4"
|
|
71
|
-
>
|
|
55
|
+
<h3 v-else-if="variant === 'icon'" :id="String(s.anchor || '')" class="blog-h3-style4">
|
|
72
56
|
<div class="blog-h3-style4-icon-wrapper">
|
|
73
57
|
<!-- #h3-round -->
|
|
74
|
-
<svg
|
|
75
|
-
|
|
76
|
-
|
|
58
|
+
<svg
|
|
59
|
+
class="blog-h3-style4-icon"
|
|
60
|
+
width="24"
|
|
61
|
+
height="24"
|
|
62
|
+
viewBox="0 0 24 24"
|
|
63
|
+
fill="none"
|
|
64
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
65
|
+
>
|
|
66
|
+
<mask
|
|
67
|
+
id="h3-round-mask0"
|
|
68
|
+
style="mask-type: alpha"
|
|
69
|
+
maskUnits="userSpaceOnUse"
|
|
70
|
+
x="0"
|
|
71
|
+
y="0"
|
|
72
|
+
width="24"
|
|
73
|
+
height="24"
|
|
74
|
+
>
|
|
75
|
+
<rect width="24" height="24" fill="#D9D9D9" />
|
|
77
76
|
</mask>
|
|
78
77
|
<g mask="url(#h3-round-mask0)">
|
|
79
|
-
<path
|
|
80
|
-
|
|
78
|
+
<path
|
|
79
|
+
d="M14.0337 0.558447C14.5853 0.180022 15.3451 0.38452 15.6344 0.989291L17.6614 5.22613C17.7689 5.45078 17.9497 5.63206 18.174 5.73992L22.4014 7.77291C23.0042 8.06278 23.2081 8.82181 22.8315 9.37363L20.1843 13.2521C20.0445 13.457 19.9788 13.7035 19.9979 13.9511L20.3599 18.6396C20.4114 19.3066 19.8569 19.8616 19.1907 19.8099L14.5177 19.4472C14.2698 19.428 14.0229 19.4941 13.818 19.6347L9.95375 22.2858C9.40216 22.6642 8.64241 22.4597 8.35308 21.855L6.32609 17.6181C6.21862 17.3935 6.03775 17.2122 5.81348 17.1043L1.58608 15.0713C0.983319 14.7815 0.779391 14.0225 1.15601 13.4706L3.80314 9.59211C3.94293 9.38728 4.0087 9.14072 3.98959 8.89312L3.62762 4.20466C3.57612 3.53761 4.13053 2.9827 4.79682 3.03441L9.46977 3.39706C9.71768 3.4163 9.96454 3.35015 10.1694 3.20958L14.0337 0.558447Z"
|
|
80
|
+
fill="#1FB04F"
|
|
81
|
+
/>
|
|
82
|
+
<path
|
|
83
|
+
d="M8.26009 1.55404C8.54364 0.946524 9.30138 0.734741 9.85654 1.10785L13.7459 3.72178C13.9521 3.86038 14.1996 3.92415 14.4473 3.90254L19.1165 3.49501C19.7823 3.43691 20.342 3.98649 20.2968 4.65402L19.9796 9.34576C19.9628 9.59354 20.0309 9.83947 20.1727 10.043L22.8566 13.8959C23.2385 14.4441 23.0418 15.205 22.4418 15.5007L18.234 17.5742C18.0108 17.6842 17.8317 17.8672 17.7264 18.0929L15.7399 22.3491C15.4563 22.9566 14.6986 23.1684 14.1434 22.7953L10.2541 20.1814C10.0478 20.0428 9.80035 19.979 9.55264 20.0006L4.88341 20.4081C4.21766 20.4662 3.65799 19.9167 3.70313 19.2491L4.02038 14.5574C4.03714 14.3096 3.96902 14.0637 3.82728 13.8602L1.14335 10.0073C0.761488 9.45907 0.958166 8.6981 1.55813 8.40245L5.76591 6.32891C5.98914 6.21891 6.16827 6.0359 6.2736 5.81023L8.26009 1.55404Z"
|
|
84
|
+
fill="#F7FFFA"
|
|
85
|
+
/>
|
|
81
86
|
</g>
|
|
82
87
|
</svg>
|
|
83
88
|
<span class="blog-h3-style4-number">{{ s.number }}</span>
|