@vigilkids/section-renderer-vue 0.6.1 → 0.6.2
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/README.md
CHANGED
|
@@ -62,12 +62,27 @@ import '@vigilkids/section-renderer-vue/styles/visiva'
|
|
|
62
62
|
- 字重：`font-normal` `font-medium` `font-semibold` `font-bold` `font-black`
|
|
63
63
|
- 对齐：`text-left` `text-center` `text-right`
|
|
64
64
|
- 行高：`leading-tight` `leading-normal` `leading-relaxed` `leading-loose`
|
|
65
|
+
- 表格容器：`table-fixed`（用在 `<table>`，启用固定列宽布局 + 自动换行）
|
|
66
|
+
- 列宽（像素）：`col-60` `col-80` `col-100` `col-120` `col-150` `col-180` `col-200` `col-250` `col-300` `col-350` `col-400` `col-500`
|
|
67
|
+
- 列宽（百分比）：`col-10p` `col-15p` `col-20p` `col-25p` `col-30p` `col-33p` `col-40p` `col-50p` `col-60p` `col-66p` `col-70p` `col-75p` `col-80p`
|
|
65
68
|
|
|
66
69
|
示例：
|
|
67
70
|
|
|
68
71
|
```html
|
|
69
72
|
<img class="block w-fit mx-auto mb-20" src="..." alt="..." />
|
|
70
73
|
<p class="mb-20 text-18 font-bold">%base_year%</p>
|
|
74
|
+
|
|
75
|
+
<!-- 表格列宽：必须先在 <table> 加 .table-fixed，.col-* 才会生效 -->
|
|
76
|
+
<table class="table-fixed">
|
|
77
|
+
<colgroup>
|
|
78
|
+
<col class="col-120" />
|
|
79
|
+
<col class="col-300" />
|
|
80
|
+
<col class="col-25p" />
|
|
81
|
+
</colgroup>
|
|
82
|
+
<thead>
|
|
83
|
+
<tr><th>方法</th><th>说明</th><th>限制</th></tr>
|
|
84
|
+
</thead>
|
|
85
|
+
</table>
|
|
71
86
|
```
|
|
72
87
|
|
|
73
88
|
## Components
|
|
@@ -4,6 +4,7 @@ import type { BlockData } from '@vigilkids/section-core'
|
|
|
4
4
|
import { computed } from 'vue'
|
|
5
5
|
|
|
6
6
|
import { useInlineEdit } from '../../../composables/useInlineEdit'
|
|
7
|
+
import { resolveArticleAnchor } from '../../../utils/article-anchor'
|
|
7
8
|
|
|
8
9
|
const props = defineProps<{
|
|
9
10
|
blockOrder: string[]
|
|
@@ -28,6 +29,8 @@ const headingClass = computed(() => `h3-${variant.value}`)
|
|
|
28
29
|
|
|
29
30
|
const iconClass = computed(() => (variant.value === 'tips-badge' ? 'h3-badge' : 'h3-icon'))
|
|
30
31
|
|
|
32
|
+
const resolvedAnchor = computed(() => resolveArticleAnchor(s.value.anchor, s.value.text))
|
|
33
|
+
|
|
31
34
|
const { editableAttrs } = useInlineEdit({
|
|
32
35
|
editorMode: () => !!props.editorMode,
|
|
33
36
|
onSettingUpdate: (key, value) => emit('update:setting', key, value),
|
|
@@ -39,7 +42,7 @@ const { editableAttrs } = useInlineEdit({
|
|
|
39
42
|
</script>
|
|
40
43
|
|
|
41
44
|
<template>
|
|
42
|
-
<h3 :class="headingClass">
|
|
45
|
+
<h3 :id="resolvedAnchor || undefined" :class="headingClass">
|
|
43
46
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
44
47
|
<span :class="iconClass" v-bind="editableAttrs('badge_text')" v-html="s.badge_text" />
|
|
45
48
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.article-content .mt-0{margin-top:0}.article-content .mt-5{margin-top:5px}.article-content .mt-10{margin-top:10px}.article-content .mt-15{margin-top:15px}.article-content .mt-20{margin-top:20px}.article-content .mt-30{margin-top:30px}.article-content .mt-40{margin-top:40px}.article-content .mb-0{margin-bottom:0}.article-content .mb-5{margin-bottom:5px}.article-content .mb-10{margin-bottom:10px}.article-content .mb-15{margin-bottom:15px}.article-content .mb-20{margin-bottom:20px}.article-content .mb-30{margin-bottom:30px}.article-content .mb-40{margin-bottom:40px}.article-content .ml-5{margin-left:5px}.article-content .ml-10{margin-left:10px}.article-content .ml-15{margin-left:15px}.article-content .ml-20{margin-left:20px}.article-content .ml-auto{margin-left:auto}.article-content .mr-5{margin-right:5px}.article-content .mr-10{margin-right:10px}.article-content .mr-15{margin-right:15px}.article-content .mr-20{margin-right:20px}.article-content .mr-auto{margin-right:auto}.article-content .mx-auto{margin-left:auto;margin-right:auto}.article-content .pt-5{padding-top:5px}.article-content .pt-10{padding-top:10px}.article-content .pt-15{padding-top:15px}.article-content .pt-20{padding-top:20px}.article-content .pb-5{padding-bottom:5px}.article-content .pb-10{padding-bottom:10px}.article-content .pb-15{padding-bottom:15px}.article-content .pb-20{padding-bottom:20px}.article-content .pl-5{padding-left:5px}.article-content .pl-10{padding-left:10px}.article-content .pl-15{padding-left:15px}.article-content .pl-20{padding-left:20px}.article-content .pr-5{padding-right:5px}.article-content .pr-10{padding-right:10px}.article-content .pr-15{padding-right:15px}.article-content .pr-20{padding-right:20px}.article-content .p-5{padding:5px}.article-content .p-10{padding:10px}.article-content .p-15{padding:15px}.article-content .p-20{padding:20px}.article-content .px-5{padding-left:5px;padding-right:5px}.article-content .px-10{padding-left:10px;padding-right:10px}.article-content .px-15{padding-left:15px;padding-right:15px}.article-content .px-20{padding-left:20px;padding-right:20px}.article-content .py-5{padding-bottom:5px;padding-top:5px}.article-content .py-10{padding-bottom:10px;padding-top:10px}.article-content .py-15{padding-bottom:15px;padding-top:15px}.article-content .py-20{padding-bottom:20px;padding-top:20px}.article-content .block{display:block}.article-content .inline-block{display:inline-block}.article-content .w-full{width:100%}.article-content .w-fit{width:-moz-fit-content;width:fit-content}.article-content .text-12{font-size:12px}.article-content .text-14{font-size:14px}.article-content .text-16{font-size:16px}.article-content .text-18{font-size:18px}.article-content .text-20{font-size:20px}.article-content .text-24{font-size:24px}.article-content .text-28{font-size:28px}.article-content .text-30{font-size:30px}.article-content .text-32{font-size:32px}.article-content .text-36{font-size:36px}.article-content .font-normal{font-weight:400}.article-content .font-medium{font-weight:500}.article-content .font-semibold{font-weight:600}.article-content .font-bold{font-weight:700}.article-content .font-black{font-weight:900}.article-content .text-left{text-align:left}.article-content .text-center{text-align:center}.article-content .text-right{text-align:right}.article-content .leading-tight{line-height:1.25}.article-content .leading-normal{line-height:1.5}.article-content .leading-relaxed{line-height:1.75}.article-content .leading-loose{line-height:2}.article-content .article-image{display:flex;flex-direction:column;gap:10px;margin:10px 0 30px}.article-content .article-image--align-left{align-items:flex-start;text-align:left}.article-content .article-image--align-center{align-items:center;text-align:center}.article-content .article-image--align-right{align-items:flex-end;text-align:right}.article-content .article-image .article-image__img{border-radius:24px;display:block;margin:0;max-width:100%}.article-content .article-image--size-standard .article-image__img{max-width:500px;width:100%}.article-content .article-image--size-wide .article-image__img{max-width:760px;width:100%}.article-content .article-image--size-full .article-image__img{max-width:none;width:100%}.article-content .article-image--fit-contain .article-image__img{-o-object-fit:contain;object-fit:contain}.article-content .article-image--fit-cover .article-image__img{-o-object-fit:cover;object-fit:cover}.article-content .article-image--radius-none .article-image__img{border-radius:0}.article-content .article-image--radius-sm .article-image__img{border-radius:10px}.article-content .article-image--radius-md .article-image__img{border-radius:16px}.article-content .article-image--radius-lg .article-image__img{border-radius:24px}.article-content .article-image--radius-xl .article-image__img{border-radius:32px}.article-content .article-image .article-image__caption{color:#999;font-size:14px;line-height:1.6;margin:0;max-width:100%}
|
|
1
|
+
.article-content .mt-0{margin-top:0}.article-content .mt-5{margin-top:5px}.article-content .mt-10{margin-top:10px}.article-content .mt-15{margin-top:15px}.article-content .mt-20{margin-top:20px}.article-content .mt-30{margin-top:30px}.article-content .mt-40{margin-top:40px}.article-content .mb-0{margin-bottom:0}.article-content .mb-5{margin-bottom:5px}.article-content .mb-10{margin-bottom:10px}.article-content .mb-15{margin-bottom:15px}.article-content .mb-20{margin-bottom:20px}.article-content .mb-30{margin-bottom:30px}.article-content .mb-40{margin-bottom:40px}.article-content .ml-5{margin-left:5px}.article-content .ml-10{margin-left:10px}.article-content .ml-15{margin-left:15px}.article-content .ml-20{margin-left:20px}.article-content .ml-auto{margin-left:auto}.article-content .mr-5{margin-right:5px}.article-content .mr-10{margin-right:10px}.article-content .mr-15{margin-right:15px}.article-content .mr-20{margin-right:20px}.article-content .mr-auto{margin-right:auto}.article-content .mx-auto{margin-left:auto;margin-right:auto}.article-content .pt-5{padding-top:5px}.article-content .pt-10{padding-top:10px}.article-content .pt-15{padding-top:15px}.article-content .pt-20{padding-top:20px}.article-content .pb-5{padding-bottom:5px}.article-content .pb-10{padding-bottom:10px}.article-content .pb-15{padding-bottom:15px}.article-content .pb-20{padding-bottom:20px}.article-content .pl-5{padding-left:5px}.article-content .pl-10{padding-left:10px}.article-content .pl-15{padding-left:15px}.article-content .pl-20{padding-left:20px}.article-content .pr-5{padding-right:5px}.article-content .pr-10{padding-right:10px}.article-content .pr-15{padding-right:15px}.article-content .pr-20{padding-right:20px}.article-content .p-5{padding:5px}.article-content .p-10{padding:10px}.article-content .p-15{padding:15px}.article-content .p-20{padding:20px}.article-content .px-5{padding-left:5px;padding-right:5px}.article-content .px-10{padding-left:10px;padding-right:10px}.article-content .px-15{padding-left:15px;padding-right:15px}.article-content .px-20{padding-left:20px;padding-right:20px}.article-content .py-5{padding-bottom:5px;padding-top:5px}.article-content .py-10{padding-bottom:10px;padding-top:10px}.article-content .py-15{padding-bottom:15px;padding-top:15px}.article-content .py-20{padding-bottom:20px;padding-top:20px}.article-content .block{display:block}.article-content .inline-block{display:inline-block}.article-content .w-full{width:100%}.article-content .w-fit{width:-moz-fit-content;width:fit-content}.article-content .text-12{font-size:12px}.article-content .text-14{font-size:14px}.article-content .text-16{font-size:16px}.article-content .text-18{font-size:18px}.article-content .text-20{font-size:20px}.article-content .text-24{font-size:24px}.article-content .text-28{font-size:28px}.article-content .text-30{font-size:30px}.article-content .text-32{font-size:32px}.article-content .text-36{font-size:36px}.article-content .font-normal{font-weight:400}.article-content .font-medium{font-weight:500}.article-content .font-semibold{font-weight:600}.article-content .font-bold{font-weight:700}.article-content .font-black{font-weight:900}.article-content .text-left{text-align:left}.article-content .text-center{text-align:center}.article-content .text-right{text-align:right}.article-content .leading-tight{line-height:1.25}.article-content .leading-normal{line-height:1.5}.article-content .leading-relaxed{line-height:1.75}.article-content .leading-loose{line-height:2}.article-content .article-image{display:flex;flex-direction:column;gap:10px;margin:10px 0 30px}.article-content .article-image--align-left{align-items:flex-start;text-align:left}.article-content .article-image--align-center{align-items:center;text-align:center}.article-content .article-image--align-right{align-items:flex-end;text-align:right}.article-content .article-image .article-image__img{border-radius:24px;display:block;margin:0;max-width:100%}.article-content .article-image--size-standard .article-image__img{max-width:500px;width:100%}.article-content .article-image--size-wide .article-image__img{max-width:760px;width:100%}.article-content .article-image--size-full .article-image__img{max-width:none;width:100%}.article-content .article-image--fit-contain .article-image__img{-o-object-fit:contain;object-fit:contain}.article-content .article-image--fit-cover .article-image__img{-o-object-fit:cover;object-fit:cover}.article-content .article-image--radius-none .article-image__img{border-radius:0}.article-content .article-image--radius-sm .article-image__img{border-radius:10px}.article-content .article-image--radius-md .article-image__img{border-radius:16px}.article-content .article-image--radius-lg .article-image__img{border-radius:24px}.article-content .article-image--radius-xl .article-image__img{border-radius:32px}.article-content .article-image .article-image__caption{color:#999;font-size:14px;line-height:1.6;margin:0;max-width:100%}.article-content .table-fixed{border-collapse:collapse;table-layout:fixed;width:100%}.article-content .table-fixed td,.article-content .table-fixed th{word-wrap:break-word;overflow-wrap:break-word;white-space:normal}.article-content .col-60{width:60px}.article-content .col-80{width:80px}.article-content .col-100{width:100px}.article-content .col-120{width:120px}.article-content .col-150{width:150px}.article-content .col-180{width:180px}.article-content .col-200{width:200px}.article-content .col-250{width:250px}.article-content .col-300{width:300px}.article-content .col-350{width:350px}.article-content .col-400{width:400px}.article-content .col-500{width:500px}.article-content .col-10p{width:10%}.article-content .col-15p{width:15%}.article-content .col-20p{width:20%}.article-content .col-25p{width:25%}.article-content .col-30p{width:30%}.article-content .col-33p{width:33.33%}.article-content .col-40p{width:40%}.article-content .col-50p{width:50%}.article-content .col-60p{width:60%}.article-content .col-66p{width:66.67%}.article-content .col-70p{width:70%}.article-content .col-75p{width:75%}.article-content .col-80p{width:80%}
|