@explorer-1/vue 0.2.39 → 0.2.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.39",
+  "version": "0.2.41",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
     "vue-bind-once": "^0.2.1",
     "vue-observe-visibility": "^1.0.0",
     "vue3-compare-image": "^1.2.5",
-    "@explorer-1/common": "1.1.10"
+    "@explorer-1/common": "1.1.12"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BaseButton/BaseButton.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, resolveComponent } from 'vue'
 
 interface Variants {
   [key: string]: string
@@ -54,11 +54,11 @@ export default defineComponent({
   },
   emits: ['click'],
   computed: {
-    tag(): string {
+    tag() {
       if (this.disabled) {
         return 'button'
       } else if (this.to) {
-        return 'nuxt-link'
+        return resolveComponent('NuxtLink')
       } else if (this.href) {
         return 'a'
       } else {

package/src/components/BaseCarousel/BaseCarousel.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="BaseCarousel w-full overflow-hidden relative">
+    <div
+      ref="BaseCarousel"
+      class="swiper relative"
+    >
+      <div class="swiper-wrapper">
+        <slot />
+      </div>
+      <div class="swiper-nav lg:block absolute bottom-0 right-0 z-100">
+        <div class="relative z-10 flex">
+          <BaseButton
+            class="swiper-prev xl:text-xl border-collapse"
+            aria-label="Previous slide"
+          >
+            <template #icon>
+              <IconPrev />
+            </template>
+          </BaseButton>
+          <BaseButton
+            class="swiper-next xl:text-xl border-collapse"
+            aria-label="Next slide"
+          >
+            <template #icon>
+              <IconNext />
+            </template>
+          </BaseButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Swiper from 'swiper'
+import { A11y, Navigation } from 'swiper/modules'
+import type { SwiperOptions } from 'swiper/types'
+import swiperOptions from '@explorer-1/common/src/js/_swiperOptions'
+import IconPrev from './../Icons/IconPrev.vue'
+import IconNext from './../Icons/IconNext.vue'
+import BaseButton from './../BaseButton/BaseButton.vue'
+const BaseCarouselOptions = swiperOptions.BlockImageCarousel
+
+Swiper.use([Navigation, A11y])
+
+export default defineComponent({
+  name: 'BaseCarousel',
+  components: {
+    BaseButton,
+    IconPrev,
+    IconNext
+  },
+  props: {
+    loop: {
+      type: Boolean,
+      default: false
+    },
+    itemRole: {
+      type: String,
+      default: undefined
+    }
+  },
+  data(): {
+    currentIndex: number
+    slider: Swiper | null
+    currentCaption: string
+    sliderOptions: SwiperOptions
+  } {
+    return {
+      currentIndex: 0,
+      currentCaption: '',
+      slider: null,
+      sliderOptions: {
+        ...BaseCarouselOptions,
+        loop: this.loop,
+        // this component has custom pagination
+        pagination: false,
+        a11y: {
+          slideRole: this.itemRole as string | undefined
+        }
+      }
+    }
+  },
+  computed: {},
+  watch: {
+    slide(value) {
+      this.slideTo(value)
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.slider = new Swiper(this.$refs.BaseCarousel as HTMLElement, this.sliderOptions)
+      this.currentIndex = this.slider.realIndex
+    },
+    updateIndex(val: number) {
+      this.currentIndex = val
+    },
+    slideTo(val: number) {
+      if (this.slider) {
+        this.slider.slideTo(val)
+      }
+    }
+  }
+})
+</script>
+<style lang="scss">
+@import 'swiper/swiper-bundle.css';
+.BaseCarousel {
+  .swiper {
+    .swiper-prev {
+      @apply mr-px;
+    }
+
+    .swiper-prev,
+    .swiper-next {
+      &.swiper-button-disabled {
+        @apply opacity-75 cursor-default bg-none;
+      }
+    }
+  }
+
+  .swiper-nav {
+    padding-top: 56.25%;
+  }
+
+  // .swiper-dots {
+  //   padding-top: 56.25%;
+  //   @apply pointer-events-none;
+
+  //   .swiper-dot {
+  //     @apply inline-block px-1 py-3 cursor-pointer pointer-events-auto;
+
+  //     &:focus {
+  //       @apply outline-none ring-1;
+  //     }
+
+  //     > span {
+  //       @apply inline-block w-3 h-3 rounded-full bg-gray-light-mid;
+  //     }
+
+  //     &.swiper-dot-active {
+  //       > span {
+  //         @apply bg-primary;
+  //       }
+  //     }
+  //   }
+  // }
+}
+</style>

package/src/components/BaseImageCaption/BaseImageCaption.vue

@@ -31,7 +31,10 @@ export default defineComponent({
     v-if="data"
     class="BaseImageCaption text-body-sm"
   >
-    <div class="inline mr-2">
+    <div
+      v-if="data.caption || data.credit"
+      class="inline mr-2"
+    >
       <div
         class="the-caption-text inline"
         v-html="data.caption"
@@ -44,20 +47,20 @@ export default defineComponent({
       </span>
     </div>
     <BaseLink
-      v-if="data.detailUrl"
+      v-if="customLink"
       class="inline-block"
       variant="default"
-      :to="data.detailUrl"
+      :to="customLink"
     >
-      Full Image Details
+      {{ customLinkText }}
     </BaseLink>
     <BaseLink
-      v-else-if="customLink"
+      v-else-if="data.detailUrl"
       class="inline-block"
       variant="default"
-      :to="customLink"
+      :to="data.detailUrl"
     >
-      {{ customLinkText }}
+      Full Image Details
     </BaseLink>
   </div>
 </template>

package/src/components/BlockImage/BlockImageFullBleed.vue

@@ -1,6 +1,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
+
 import MixinFancybox from './../MixinFancybox/MixinFancybox.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
@@ -19,7 +22,7 @@ export default defineComponent({
   props: {
     data: {
       type: Object as PropType<ImageObject>,
-      required: false
+      default: undefined
     },
     // if a caption should even be visible
     displayCaption: {
@@ -29,7 +32,12 @@ export default defineComponent({
     // overrides caption provided with image model
     caption: {
       type: String,
-      required: false
+      default: undefined
+    },
+    // overrides detail url provided with image model. Also forces hasCaption to be true
+    customDetailUrl: {
+      type: String,
+      default: undefined
     },
     // if the image should be constrained to a fixed aspect ratio (21:9 on smaller screens, 2:1 on larger screens)
     constrain: {
@@ -43,6 +51,7 @@ export default defineComponent({
     }
   },
   computed: {
+    ...mapStores(useThemeStore),
     theCaption(): string | undefined {
       if (this.caption && this.caption.length > 2 && this.displayCaption) {
         return this.caption
@@ -59,19 +68,36 @@ export default defineComponent({
     theSrcSet(): string | undefined {
       return this.theData ? mixinGetSrcSet(this.theData) : undefined
     },
+    theCredit() {
+      if (this.themeStore.isEdu && !this.displayCaption) {
+        return undefined
+      }
+      return this.data?.credit
+    },
     // reform the data object with the computed caption
     theData(): ImageObject | undefined {
       if (this.data) {
         return {
           ...this.data,
-          caption: this.theCaption
+          caption: this.theCaption,
+          credit: this.theCredit,
+          detailUrl: this.customDetailUrl
         }
       }
       return undefined
     },
     hasCaptionArea(): boolean {
-      if (this.data && (this.theCaption || this.data.credit || this.data.detailUrl)) {
-        return true
+      if (this.data) {
+        if (this.themeStore.isEdu) {
+          return this.theData?.caption || this.customDetailUrl ? true : false
+        } else if (
+          this.theData?.caption ||
+          this.theData?.credit ||
+          this.theData?.detailUrl ||
+          this.customDetailUrl
+        ) {
+          return true
+        }
       }
       return false
     }
@@ -87,7 +113,7 @@ export default defineComponent({
           :src="theData.original || theData.src?.url"
           :caption="theData.caption"
           :credit="theData.credit"
-          :detail-url="theData.detailUrl"
+          :detail-url="customDetailUrl || theData.detailUrl"
         >
           <BaseImagePlaceholder
             :aspect-ratio="constrain ? '16:9' : 'none'"
@@ -113,7 +139,11 @@ export default defineComponent({
       v-if="data && hasCaptionArea"
       class="max-w-screen-3xl p-4 pb-0 mx-auto"
     >
-      <BaseImageCaption :data="theData" />
+      <BaseImageCaption
+        :data="theData"
+        :custom-link="customDetailUrl"
+        custom-link-text="Full Image Details"
+      />
     </div>
   </div>
 </template>

package/src/components/BlockImage/BlockImageStandard.vue

@@ -1,7 +1,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
-
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import type { ImageObject } from './../../interfaces'
 import MixinFancybox from './../MixinFancybox/MixinFancybox.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
@@ -19,7 +20,7 @@ export default defineComponent({
   props: {
     data: {
       type: Object as PropType<ImageObject>,
-      required: false
+      default: undefined
     },
     // if a caption should even be visible
     displayCaption: {
@@ -29,7 +30,12 @@ export default defineComponent({
     // overrides caption provided with image model
     caption: {
       type: String,
-      required: false
+      default: undefined
+    },
+    // overrides detail url provided with image model. Also forces hasCaption to be true
+    customDetailUrl: {
+      type: String,
+      default: undefined
     },
     // if the image should be constrained to a 16:9 aspect ratio
     constrain: {
@@ -38,6 +44,7 @@ export default defineComponent({
     }
   },
   computed: {
+    ...mapStores(useThemeStore),
     theCaption(): string | undefined {
       if (this.caption && this.caption.length > 2 && this.displayCaption) {
         return this.caption
@@ -51,19 +58,36 @@ export default defineComponent({
       }
       return undefined
     },
+    theCredit() {
+      if (this.themeStore.isEdu && !this.displayCaption) {
+        return undefined
+      }
+      return this.data?.credit
+    },
     // reform the data object with the computed caption
     theData(): ImageObject | undefined {
       if (this.data) {
         return {
           ...this.data,
-          caption: this.theCaption
+          caption: this.theCaption,
+          credit: this.theCredit,
+          detailUrl: this.customDetailUrl
         }
       }
       return undefined
     },
     hasCaptionArea(): boolean {
-      if (this.data && (this.theCaption || this.data.credit || this.data.detailUrl)) {
-        return true
+      if (this.theData) {
+        if (this.themeStore.isEdu) {
+          return this.theData.caption || this.customDetailUrl ? true : false
+        } else if (
+          this.theData.caption ||
+          this.theData.credit ||
+          this.theData.detailUrl ||
+          this.customDetailUrl
+        ) {
+          return true
+        }
       }
       return false
     }
@@ -77,7 +101,7 @@ export default defineComponent({
       :src="theData.original || theData.src?.url"
       :caption="theData.caption"
       :credit="theData.credit"
-      :detail-url="theData.detailUrl"
+      :detail-url="customDetailUrl || theData.detailUrl"
     >
       <BaseImagePlaceholder
         :aspect-ratio="constrain ? '16:9' : 'none'"
@@ -100,7 +124,11 @@ export default defineComponent({
       v-if="theData && hasCaptionArea"
       class="lg:px-0 p-4 pb-0 print:pl-0"
     >
-      <BaseImageCaption :data="theData" />
+      <BaseImageCaption
+        :data="theData"
+        :custom-link="customDetailUrl"
+        custom-link-text="Full Image Details"
+      />
     </div>
   </div>
 </template>

package/src/components/BlockImageComparison/BlockImageComparison.vue

@@ -1,38 +1,41 @@
 <template>
   <div v-if="data">
-    <client-only placeholder="Loading Image Comparison...">
-      <VueCompareImage
-        v-if="theBeforeImageSrc && theAfterImageSrc"
-        class="h-full animate-fadeIn"
-        :left-image="theBeforeImageSrc.url"
-        left-image-alt="Left image"
-        :right-image="theAfterImageSrc.url"
-        right-image-alt="Right image"
-      />
-    </client-only>
+    <VueCompareImage
+      v-if="theBeforeImageSrc && theAfterImageSrc"
+      class="h-full animate-fadeIn"
+      :left-image="theBeforeImageSrc.url"
+      left-image-alt="Left image"
+      :right-image="theAfterImageSrc.url"
+      right-image-alt="Right image"
+    />
     <div
-      v-if="data.caption && data.caption.length > 2"
-      class="text-gray-mid-dark mt-3"
-      v-html="data.caption"
-    ></div>
+      v-if="data.caption || customDetailUrl"
+      class="lg:px-0 p-4 pb-0 print:pl-0"
+    >
+      <BaseImageCaption
+        :data="{ caption: data.caption }"
+        :custom-link="customDetailUrl"
+        custom-link-text="Full Image Details"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-// import VueCompareImage from 'vue3-compare-image'
-
-// const VueCompareImage = process.browser ? require('vue3-compare-image') : null
+import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
 
 export default defineComponent({
   name: 'BlockImageComparison',
-  // components: {
-  //   VueCompareImage,
-  // },
+  components: { BaseImageCaption },
   props: {
     data: {
       type: Object,
       required: true
+    },
+    customDetailUrl: {
+      type: String,
+      default: undefined
     }
   },
   computed: {

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -133,6 +133,7 @@
           v-else-if="metadataAttrs.type === 'resource'"
           :resource="theItem as EduResourceCardObject"
           :variant="metadataAttrs.icons"
+          :show-time="true"
           compact
         />
       </div>

package/src/components/BlockRelatedLinks/RelatedLink.vue

@@ -18,7 +18,7 @@
   </component>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, resolveComponent } from 'vue'
 import IconArrow from './../Icons/IconArrow.vue'
 import IconDownload from './../Icons/IconDownload.vue'
 import IconExternal from './../Icons/IconExternal.vue'
@@ -59,7 +59,7 @@ export default defineComponent({
   computed: {
     tag() {
       if (this.to) {
-        return 'nuxt-link'
+        return resolveComponent('NuxtLink')
       } else {
         return 'a'
       }

package/src/components/BlockVideo/BlockVideo.vue

@@ -9,15 +9,21 @@
     />
 
     <div
-      v-if="(data.caption && data.caption.length > 2) || data.credit"
+      v-if="hasCaption"
       class="lg:px-0 p-4 pb-0 print:pl-0"
     >
-      <BaseImageCaption :data="data" />
+      <BaseImageCaption
+        :data="data"
+        :custom-link="customDetailUrl"
+        custom-link-text="Full Video Details"
+      />
     </div>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import BaseVideo from './../BaseVideo/BaseVideo.vue'
 import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
 
@@ -35,6 +41,20 @@ export default defineComponent({
     autoplay: {
       type: Boolean,
       default: false
+    },
+    customDetailUrl: {
+      type: String,
+      default: undefined
+    }
+  },
+  computed: {
+    ...mapStores(useThemeStore),
+    hasCaption() {
+      if (this.themeStore.isEdu) {
+        return this.data?.caption || this.customDetailUrl
+      } else {
+        return this.data?.caption || this.data?.credit || this.customDetailUrl
+      }
     }
   }
 })

package/src/components/BlockVideoEmbed/BlockVideoEmbed.vue

@@ -10,10 +10,14 @@
       <div v-html="data.embed.embed"></div>
     </BaseImagePlaceholder>
     <div
-      v-if="data.caption"
+      v-if="data.caption || customDetailUrl"
       class="lg:px-0 p-4 print:pl-0"
     >
-      <BaseImageCaption :data="data" />
+      <BaseImageCaption
+        :data="data"
+        :custom-link="customDetailUrl"
+        custom-link-text="Full Video Details"
+      />
     </div>
   </div>
 </template>
@@ -45,6 +49,10 @@ export default defineComponent({
       type: Object as PropType<Partial<BlockData>>,
       required: false,
       default: undefined
+    },
+    customDetailUrl: {
+      type: String,
+      default: undefined
     }
   },
   mounted() {

package/src/components/DetailHeadline/DetailHeadline.vue

@@ -100,12 +100,13 @@
         <span :itemprop="schema ? 'name' : undefined"> Jet Propulsion Laboratory </span>
         <span :itemprop="schema ? 'url' : undefined"> https://www.jpl.nasa.gov/ </span>
       </span>
-      <span v-if="publicationDate">
-        <meta
-          v-if="schema"
-          itemprop="datePublished"
-          :content="pubDatetime"
-        />
+      <meta
+        v-if="schema && publicationDate"
+        itemprop="datePublished"
+        :content="pubDatetime"
+      />
+
+      <span v-if="publicationDate && !hideDate">
         {{
           // @ts-ignore
           $filters.displayDate(publicationDate)
@@ -186,6 +187,10 @@ export default defineComponent({
     schema: {
       type: Boolean,
       default: false
+    },
+    hideDate: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {