@explorer-1/vue 0.2.58 → 0.2.59
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@explorer-1/vue",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.59",
|
|
4
4
|
"private": false,
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"vue-bind-once": "^0.2.1",
|
|
31
31
|
"vue3-compare-image": "^1.2.5",
|
|
32
32
|
"vue3-observe-visibility": "^1.0.1",
|
|
33
|
-
"@explorer-1/common": "1.1.
|
|
33
|
+
"@explorer-1/common": "1.1.15"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@vitejs/plugin-vue": "^5.0.4",
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import BlockRichTable from './BlockRichTable.vue'
|
|
2
|
+
import { BlockImageData } from './../BlockImage/BlockImage.stories'
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Components/Blocks/BlockRichTable',
|
|
6
|
+
component: BlockRichTable,
|
|
7
|
+
excludeStories: /.*Data$/
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export const BlockRichTableData = {
|
|
11
|
+
blockType: 'RichTableBlock',
|
|
12
|
+
tableCaption: 'table caption',
|
|
13
|
+
tableContent: {
|
|
14
|
+
tableHead: [
|
|
15
|
+
[
|
|
16
|
+
{
|
|
17
|
+
text: '1. Learn why we study geology on Earth and other planets'
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
text: '1. Learn why we study geology on Earth and other planets'
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
],
|
|
24
|
+
tableBody: [
|
|
25
|
+
[
|
|
26
|
+
{
|
|
27
|
+
...BlockImageData,
|
|
28
|
+
caption: '<p>My custom caption.</p>',
|
|
29
|
+
displayCaption: true,
|
|
30
|
+
blockType: 'ImageBlock'
|
|
31
|
+
},
|
|
32
|
+
{ ...BlockImageData, blockType: 'ImageBlock' }
|
|
33
|
+
],
|
|
34
|
+
[
|
|
35
|
+
{
|
|
36
|
+
blockType: 'CharBlock',
|
|
37
|
+
value:
|
|
38
|
+
"Geologists are scientists who study a planet's solid features, like soil, rocks, and minerals. There are all kinds of rocks and minerals that make up our planet – as well as the Moon, Mars, and other rocky worlds. By studying these features, we can learn more about how rocky worlds form and change over time."
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
blockType: 'CharBlock',
|
|
42
|
+
value:
|
|
43
|
+
"Geologists are scientists who study a planet's solid features, like soil, rocks, and minerals. There are all kinds of rocks and minerals that make up our planet – as well as the Moon, Mars, and other rocky worlds. By studying these features, we can learn more about how rocky worlds form and change over time."
|
|
44
|
+
}
|
|
45
|
+
]
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export const BaseStory = {
|
|
51
|
+
name: 'BlockRichTable',
|
|
52
|
+
args: {
|
|
53
|
+
table: BlockRichTableData
|
|
54
|
+
}
|
|
55
|
+
}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { defineComponent } from 'vue'
|
|
3
|
+
import BlockImageStandard from './../BlockImage/BlockImageStandard.vue'
|
|
4
|
+
import BlockText from './../BlockText/BlockText.vue'
|
|
5
|
+
|
|
6
|
+
export default defineComponent({
|
|
7
|
+
name: 'BlockRichTable',
|
|
8
|
+
components: {
|
|
9
|
+
BlockImageStandard,
|
|
10
|
+
BlockText
|
|
11
|
+
},
|
|
12
|
+
props: {
|
|
13
|
+
table: {
|
|
14
|
+
type: Object,
|
|
15
|
+
required: true
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
})
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<template>
|
|
22
|
+
<div
|
|
23
|
+
v-if="table"
|
|
24
|
+
class="BlockRichTable BlockText -small text-body-sm"
|
|
25
|
+
>
|
|
26
|
+
<div class="overflow-x-auto scrolling-touch max-w-screen-3xl mx-auto">
|
|
27
|
+
<table
|
|
28
|
+
class="min-w-full border-gray-light-mid w-full border-t border-b border-collapse table-auto"
|
|
29
|
+
>
|
|
30
|
+
<thead v-if="table.tableContent.tableHead?.length">
|
|
31
|
+
<tr>
|
|
32
|
+
<th
|
|
33
|
+
v-for="(headCell, headIndex) in table.tableContent.tableHead[0]"
|
|
34
|
+
:key="headIndex"
|
|
35
|
+
scope="col"
|
|
36
|
+
class="min-w-72 sm:min-w-80 bg-jpl-blue-darker text-subtitle text-white border-gray-light-mid lg:p-5 p-3 border-b"
|
|
37
|
+
>
|
|
38
|
+
{{ headCell.text }}
|
|
39
|
+
</th>
|
|
40
|
+
</tr>
|
|
41
|
+
</thead>
|
|
42
|
+
<tbody v-if="table.tableContent.tableBody?.length">
|
|
43
|
+
<tr
|
|
44
|
+
v-for="(row, rowIndex) in table.tableContent.tableBody"
|
|
45
|
+
:key="rowIndex"
|
|
46
|
+
>
|
|
47
|
+
<td
|
|
48
|
+
v-for="(cell, cellIndex) in row"
|
|
49
|
+
:key="cellIndex"
|
|
50
|
+
class="min-w-72 sm:min-w-80 bg-white text-gray-dark border-gray-light-mid"
|
|
51
|
+
>
|
|
52
|
+
<template v-if="cell.blockType === 'CharBlock'">
|
|
53
|
+
<p class="">
|
|
54
|
+
{{ cell.value }}
|
|
55
|
+
</p>
|
|
56
|
+
</template>
|
|
57
|
+
<template v-else-if="cell.blockType === 'RichTextBlock'">
|
|
58
|
+
<BlockText
|
|
59
|
+
variant="small"
|
|
60
|
+
:text="cell.value"
|
|
61
|
+
/>
|
|
62
|
+
</template>
|
|
63
|
+
<template v-else-if="cell.blockType === 'ImageBlock'">
|
|
64
|
+
<BlockImageStandard
|
|
65
|
+
class=""
|
|
66
|
+
:data="cell.image"
|
|
67
|
+
:display-caption="cell.displayCaption"
|
|
68
|
+
:caption="cell.caption"
|
|
69
|
+
:constrain="cell.constrain"
|
|
70
|
+
/>
|
|
71
|
+
</template>
|
|
72
|
+
</td>
|
|
73
|
+
</tr>
|
|
74
|
+
</tbody>
|
|
75
|
+
</table>
|
|
76
|
+
<template v-if="table.tableCaption">
|
|
77
|
+
<caption class="block text-left px-0 text-gray-mid-dark text-body-sm mt-4">
|
|
78
|
+
{{
|
|
79
|
+
table.tableCaption
|
|
80
|
+
}}
|
|
81
|
+
</caption>
|
|
82
|
+
</template>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</template>
|
|
86
|
+
|
|
87
|
+
<style lang="scss">
|
|
88
|
+
@import '@explorer-1/common/src/scss/components/BlockRichTable';
|
|
89
|
+
</style>
|
|
@@ -182,6 +182,15 @@
|
|
|
182
182
|
<BlockTable :data="block" />
|
|
183
183
|
</LayoutHelper>
|
|
184
184
|
|
|
185
|
+
<LayoutHelper
|
|
186
|
+
v-else-if="block.blockType == 'RichTableBlock'"
|
|
187
|
+
:key="`richTableBlock${index}`"
|
|
188
|
+
indent="col-3"
|
|
189
|
+
class="lg:mb-18 mb-10"
|
|
190
|
+
>
|
|
191
|
+
<BlockRichTable :table="block" />
|
|
192
|
+
</LayoutHelper>
|
|
193
|
+
|
|
185
194
|
<LayoutHelper
|
|
186
195
|
v-else-if="block.blockType == 'RelatedLinksBlock'"
|
|
187
196
|
:key="`relatedLinksBlock${index}`"
|
|
@@ -269,6 +278,7 @@ import BlockRelatedLinks, {
|
|
|
269
278
|
type BlockRelatedLinksObject
|
|
270
279
|
} from './../BlockRelatedLinks/BlockRelatedLinks.vue'
|
|
271
280
|
import BlockTable from './../BlockTable/BlockTable.vue'
|
|
281
|
+
import BlockRichTable from './../BlockRichTable/BlockRichTable.vue'
|
|
272
282
|
import BlockTeaser from './../BlockTeaser/BlockTeaser.vue'
|
|
273
283
|
import BlockText from './../BlockText/BlockText.vue'
|
|
274
284
|
import BlockIframeEmbed from './../BlockIframeEmbed/BlockIframeEmbed.vue'
|
|
@@ -308,6 +318,7 @@ export default defineComponent({
|
|
|
308
318
|
BlockQuote,
|
|
309
319
|
BlockRelatedLinks,
|
|
310
320
|
BlockTable,
|
|
321
|
+
BlockRichTable,
|
|
311
322
|
BlockTeaser,
|
|
312
323
|
BlockText,
|
|
313
324
|
BlockIframeEmbed,
|