@explorer-1/vue 0.2.57 → 0.2.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.57",
+  "version": "0.2.59",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
     "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5",
     "vue3-observe-visibility": "^1.0.1",
-    "@explorer-1/common": "1.1.14"
+    "@explorer-1/common": "1.1.15"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BlockRichTable/BlockRichTable.stories.js

@@ -0,0 +1,55 @@
+import BlockRichTable from './BlockRichTable.vue'
+import { BlockImageData } from './../BlockImage/BlockImage.stories'
+
+export default {
+  title: 'Components/Blocks/BlockRichTable',
+  component: BlockRichTable,
+  excludeStories: /.*Data$/
+}
+
+export const BlockRichTableData = {
+  blockType: 'RichTableBlock',
+  tableCaption: 'table caption',
+  tableContent: {
+    tableHead: [
+      [
+        {
+          text: '1. Learn why we study geology on Earth and other planets'
+        },
+        {
+          text: '1. Learn why we study geology on Earth and other planets'
+        }
+      ]
+    ],
+    tableBody: [
+      [
+        {
+          ...BlockImageData,
+          caption: '<p>My custom caption.</p>',
+          displayCaption: true,
+          blockType: 'ImageBlock'
+        },
+        { ...BlockImageData, blockType: 'ImageBlock' }
+      ],
+      [
+        {
+          blockType: 'CharBlock',
+          value:
+            "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."
+        },
+        {
+          blockType: 'CharBlock',
+          value:
+            "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."
+        }
+      ]
+    ]
+  }
+}
+
+export const BaseStory = {
+  name: 'BlockRichTable',
+  args: {
+    table: BlockRichTableData
+  }
+}

package/src/components/BlockRichTable/BlockRichTable.vue

@@ -0,0 +1,89 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BlockImageStandard from './../BlockImage/BlockImageStandard.vue'
+import BlockText from './../BlockText/BlockText.vue'
+
+export default defineComponent({
+  name: 'BlockRichTable',
+  components: {
+    BlockImageStandard,
+    BlockText
+  },
+  props: {
+    table: {
+      type: Object,
+      required: true
+    }
+  }
+})
+</script>
+
+<template>
+  <div
+    v-if="table"
+    class="BlockRichTable BlockText -small text-body-sm"
+  >
+    <div class="overflow-x-auto scrolling-touch max-w-screen-3xl mx-auto">
+      <table
+        class="min-w-full border-gray-light-mid w-full border-t border-b border-collapse table-auto"
+      >
+        <thead v-if="table.tableContent.tableHead?.length">
+          <tr>
+            <th
+              v-for="(headCell, headIndex) in table.tableContent.tableHead[0]"
+              :key="headIndex"
+              scope="col"
+              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"
+            >
+              {{ headCell.text }}
+            </th>
+          </tr>
+        </thead>
+        <tbody v-if="table.tableContent.tableBody?.length">
+          <tr
+            v-for="(row, rowIndex) in table.tableContent.tableBody"
+            :key="rowIndex"
+          >
+            <td
+              v-for="(cell, cellIndex) in row"
+              :key="cellIndex"
+              class="min-w-72 sm:min-w-80 bg-white text-gray-dark border-gray-light-mid"
+            >
+              <template v-if="cell.blockType === 'CharBlock'">
+                <p class="">
+                  {{ cell.value }}
+                </p>
+              </template>
+              <template v-else-if="cell.blockType === 'RichTextBlock'">
+                <BlockText
+                  variant="small"
+                  :text="cell.value"
+                />
+              </template>
+              <template v-else-if="cell.blockType === 'ImageBlock'">
+                <BlockImageStandard
+                  class=""
+                  :data="cell.image"
+                  :display-caption="cell.displayCaption"
+                  :caption="cell.caption"
+                  :constrain="cell.constrain"
+                />
+              </template>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <template v-if="table.tableCaption">
+        <caption class="block text-left px-0 text-gray-mid-dark text-body-sm mt-4">
+          {{
+            table.tableCaption
+          }}
+        </caption>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BlockRichTable';
+</style>

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -182,6 +182,15 @@
         <BlockTable :data="block" />
       </LayoutHelper>
 
+      <LayoutHelper
+        v-else-if="block.blockType == 'RichTableBlock'"
+        :key="`richTableBlock${index}`"
+        indent="col-3"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockRichTable :table="block" />
+      </LayoutHelper>
+
       <LayoutHelper
         v-else-if="block.blockType == 'RelatedLinksBlock'"
         :key="`relatedLinksBlock${index}`"
@@ -269,6 +278,7 @@ import BlockRelatedLinks, {
   type BlockRelatedLinksObject
 } from './../BlockRelatedLinks/BlockRelatedLinks.vue'
 import BlockTable from './../BlockTable/BlockTable.vue'
+import BlockRichTable from './../BlockRichTable/BlockRichTable.vue'
 import BlockTeaser from './../BlockTeaser/BlockTeaser.vue'
 import BlockText from './../BlockText/BlockText.vue'
 import BlockIframeEmbed from './../BlockIframeEmbed/BlockIframeEmbed.vue'
@@ -308,6 +318,7 @@ export default defineComponent({
     BlockQuote,
     BlockRelatedLinks,
     BlockTable,
+    BlockRichTable,
     BlockTeaser,
     BlockText,
     BlockIframeEmbed,

package/src/components/PodcastSeriesCarousel/PodcastSeriesCarousel.vue

@@ -46,7 +46,7 @@
         :initial-slide="
           activeSeasonId === initialSeasonId && initialEpisodeIndex ? initialEpisodeIndex : 0
         "
-        :slides="activeTabData.episodes"
+        :slides="activeTabData.episodes as Partial<Slide>[]"
       />
     </keep-alive>
   </div>
@@ -61,9 +61,10 @@ import ThumbnailCarousel from './../ThumbnailCarousel/ThumbnailCarousel.vue'
 
 const route = useRoute()
 
-interface ActiveTab {
+interface Slide {
+  url: string
   title: string
-  episodes: Episode[]
+  thumbnailImage: Partial<ImageObject>
 }
 
 interface Episode {
@@ -72,19 +73,25 @@ interface Episode {
   publicationDate: any
   thumbnailImage: Partial<ImageObject>
 }
+
+interface ActiveTab {
+  title?: string
+  episodes?: Episode[] | Season
+}
+
 interface Season {
   id: string
-  url: string
-  title: string
-  seasonNumber: number
-  episodes: Episode[]
+  url?: string
+  title?: string
+  seasonNumber?: number
+  episodes?: Episode[]
 }
 
 interface Series {
   id: string
-  title: string
-  url: string
-  seasons: Season[]
+  title?: string
+  url?: string
+  seasons?: Season[]
 }
 export default defineComponent({
   name: 'PodcastSeriesCarousel',
@@ -111,11 +118,17 @@ export default defineComponent({
     }
   },
   computed: {
-    sortedSeasons(): Season[] | null {
-      let seasons = null
+    sortedSeasons(): Season[] | undefined {
+      let seasons = undefined
       if (this.series && this.series.seasons) {
         seasons = this.series.seasons
-        return seasons.sort((a: Season, b: Season) => a.seasonNumber - b.seasonNumber)
+        // @ts-expect-error seasons is an array
+        seasons = seasons.toSorted((a: Season, b: Season) => {
+          if (a.seasonNumber && b.seasonNumber) {
+            return a.seasonNumber - b.seasonNumber
+          }
+        })
+        return seasons
       }
       return seasons
     },
@@ -142,9 +155,9 @@ export default defineComponent({
       }
       return null
     },
-    activeTabData(): ActiveTab | undefined {
-      let season: Season | undefined = undefined
-      if (this.series?.seasons) {
+    activeTabData(): ActiveTab | Season | undefined {
+      let season
+      if (this.series?.seasons?.length) {
         if (this.activeSeasonId) {
           season = this.series.seasons.find((o: Season) => {
             return o.id === this.activeSeasonId
@@ -152,14 +165,21 @@ export default defineComponent({
         } else {
           season = this.series.seasons[0]
         }
-        if (season?.episodes) {
-          season.episodes.sort(
-            (a: Episode, b: Episode) =>
-              new Date(a.publicationDate).getTime() - new Date(b.publicationDate).getTime()
-          )
+        if (season?.episodes?.length) {
+          let episodes: Episode[] = season.episodes
+          // @ts-expect-error episodes is an array
+          episodes = episodes.toSorted((a: Episode, b: Episode) => {
+            if (a.publicationDate && b.publicationDate) {
+              return new Date(a.publicationDate).getTime() - new Date(b.publicationDate).getTime()
+            }
+          })
+          season = {
+            ...season,
+            episodes: episodes
+          }
         }
       }
-      return season ? season : undefined
+      return season
     }
   },
   methods: {

package/src/templates/PageAudioDetail/PageAudioDetail.vue

@@ -204,6 +204,7 @@
     </LayoutHelper>
 
     <PodcastSeriesCarousel
+      v-if="data?.series"
       :series="data.series"
       :initial-season-id="data.parent ? data.parent.id : null"
       class="mb-12 lg:mb-24"

package/src/templates/PageImageDetail/PageImageDetail.vue

@@ -215,9 +215,9 @@
     </LayoutHelper>
     <LayoutHelper
       v-if="
-        (data.keepExploringMission && data.keepExploringMission.length) ||
-        (data.keepExploringTarget && data.keepExploringTarget.length) ||
-        (data.keepExploringInstrument && data.keepExploringInstrument.length)
+        data.keepExploringMission?.length ||
+        data.keepExploringTarget?.length ||
+        data.keepExploringInstrument?.length
       "
       indent="col-2"
     >
@@ -228,12 +228,7 @@
       </h2>
       <ul class="TopicTabs flex flex-row flex-wrap justify-start pb-4 mb-5 list-none">
         <li
-          v-if="
-            data.relatedMission &&
-            data.relatedMission.length &&
-            data.keepExploringMission &&
-            data.keepExploringMission.length
-          "
+          v-if="data.relatedMission?.length && data.keepExploringMission?.length"
           class="last:mr-0 sm:w-auto md:mr-16 w-full mr-10 text-center"
         >
           <button
@@ -247,12 +242,7 @@
           </button>
         </li>
         <li
-          v-if="
-            data.targets &&
-            data.targets.length &&
-            data.keepExploringTarget &&
-            data.keepExploringTarget.length
-          "
+          v-if="data.targets?.length && data.keepExploringTarget?.length"
           class="last:mr-0 sm:w-auto md:mr-16 w-full mr-10 text-center"
         >
           <button
@@ -265,12 +255,7 @@
           </button>
         </li>
         <li
-          v-if="
-            data.instruments &&
-            data.instruments.length &&
-            data.keepExploringInstrument &&
-            data.keepExploringInstrument.length
-          "
+          v-if="data.instruments?.length && data.keepExploringInstrument?.length"
           class="last:mr-0 sm:w-auto md:mr-16 w-full mr-10 text-center"
         >
           <button
@@ -285,9 +270,7 @@
       </ul>
     </LayoutHelper>
     <keep-alive>
-      <template
-        v-if="openTab === 1 && data.keepExploringMission && data.keepExploringMission.length"
-      >
+      <template v-if="openTab === 1 && data.keepExploringMission?.length">
         <ThumbnailCarousel
           :key="openTab"
           class="lg:mb-24 mb-12"
@@ -295,9 +278,7 @@
           :slides="data.keepExploringMission"
         />
       </template>
-      <template
-        v-else-if="openTab === 2 && data.keepExploringTarget && data.keepExploringTarget.length"
-      >
+      <template v-else-if="openTab === 2 && data.keepExploringTarget?.length">
         <ThumbnailCarousel
           :key="openTab"
           class="lg:mb-24 mb-12"
@@ -305,11 +286,7 @@
           :slides="data.keepExploringTarget"
         />
       </template>
-      <template
-        v-else-if="
-          openTab === 3 && data.keepExploringInstrument && data.keepExploringInstrument.length
-        "
-      >
+      <template v-else-if="openTab === 3 && data.keepExploringInstrument?.length">
         <ThumbnailCarousel
           :key="openTab"
           class="lg:mb-24 mb-12"
@@ -319,7 +296,7 @@
       </template>
     </keep-alive>
     <div
-      v-if="data.relatedTopics && data.relatedTopics.length"
+      v-if="data.relatedTopics?.length"
       class="bg-gray-light lg:py-24 py-12"
     >
       <BlockLinkCarousel
@@ -386,11 +363,11 @@ export default defineComponent({
   methods: {
     initExploreCarousels() {
       if (this.data) {
-        if (this.data.keepExploringMission && this.data.keepExploringMission.length) {
+        if (this.data.keepExploringMission?.length) {
           this.openTab = 1
-        } else if (this.data.keepExploringTarget && this.data.keepExploringTarget.length) {
+        } else if (this.data.keepExploringTarget?.length) {
           this.openTab = 2
-        } else if (this.data.keepExploringInstrument && this.data.keepExploringInstrument.length) {
+        } else if (this.data.keepExploringInstrument?.length) {
           this.openTab = 3
         }
       }

package/src/templates/www/PagePodcast/PagePodcast.vue

@@ -207,10 +207,10 @@ export default defineComponent({
       return this.defaultShowGridView
     },
     sortedSeasons() {
-      let seasons = null
+      let seasons = undefined
       if (this.data && this.data.seasons) {
         seasons = this.data.seasons
-        return seasons.sort((a, b) => a.seasonNumber - b.seasonNumber)
+        seasons = seasons.toSorted((a, b) => a.seasonNumber - b.seasonNumber)
       }
       return seasons
     }

package/tsconfig.json

@@ -3,7 +3,7 @@
     "target": "ES2020",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": ["ES2021", "DOM", "DOM.Iterable"],
+    "lib": ["ES2021", "DOM", "DOM.Iterable", "ESNext.Array"],
     "skipLibCheck": true,
 
     /* Bundler mode */