@explorer-1/vue 0.2.94 → 0.2.96

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @explorer-1/vue
 
+## 0.2.96
+
+### Patch Changes
+
+- 2735223: Fixing link logic in HomepageTeaserBlock
+
+## 0.2.95
+
+### Patch Changes
+
+- c06cf28: Adding srcset to HeroLarge component
+- 4bcdacd: Hides Jump Menu when overscrolling
+- f750419: Fixing anchor link positioning on EDU Lesson pages.
+
 ## 0.2.94
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.94",
+  "version": "0.2.96",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/HeroLarge/HeroLarge.vue

@@ -4,7 +4,7 @@
       <picture v-if="image && image.src">
         <source
           media="(min-width: 768px)"
-          :srcset="image.srcSet"
+          :srcset="theSrcSet"
         />
         <source
           media="(min-width: 420px)"
@@ -71,7 +71,7 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { mixinTransparentHeader } from './../../utils/mixins'
+import { mixinTransparentHeader, mixinGetSrcSet } from './../../utils/mixins'
 import { mapStores } from 'pinia'
 import { useThemeStore } from '../../store/theme'
 import BasePill from './../BasePill/BasePill.vue'
@@ -119,7 +119,14 @@ export default defineComponent({
     }
   },
   computed: {
-    ...mapStores(useThemeStore)
+    ...mapStores(useThemeStore),
+    theSrcSet() {
+      return this.image
+        ? mixinGetSrcSet(this.image)
+          ? mixinGetSrcSet(this.image)
+          : this.image.srcSet
+        : undefined
+    }
   },
   mounted() {
     mixinTransparentHeader()

package/src/components/HomepageTeaserBlock/HomepageTeaserBlock.vue

@@ -33,14 +33,14 @@
             class="lg:pr-14"
             :text="data.paragraph"
           />
-          <template v-if="data.link && theLink">
+          <template v-if="data.link || theExternalLink">
             <BaseLink
               variant="primary"
               class="mt-5"
               link-class="inline-block"
               caret-wrapper-class="py-2"
-              :href="theLink"
-              :to="data.link.page ? data.link.page.url : null"
+              :href="theExternalLink"
+              :to="data.link.page ? data.link.page.url : undefined"
               external-target-blank
             >
               {{ data.link.text }}
@@ -60,13 +60,13 @@
               v-if="theCard.image"
               class="relative h-auto"
             >
-              <template v-if="theCard.link && theLink">
+              <template v-if="theCard.link || theCardExternalLink">
                 <BaseLink
                   variant="none"
                   link-class="block"
                   :aria-label="theCard.link.text || 'Learn more'"
-                  :href="theLink"
-                  :to="theCard.link.page ? theCard.link.page.url : null"
+                  :href="theCardExternalLink"
+                  :to="theCard.link.page?.url || undefined"
                   external-target-blank
                 >
                   <HomepageTeaserBlockCardImage :data="theCard" />
@@ -87,14 +87,14 @@
                 {{ theCard.description }}
               </p>
 
-              <template v-if="theCard.link && theLink">
+              <template v-if="theCard.link || theCardExternalLink">
                 <BaseLink
                   variant="primary"
                   class="mt-3"
                   link-class="inline-block"
                   caret-wrapper-class="py-2"
-                  :href="theLink"
-                  :to="theCard.link.page ? theCard.link.page.url : null"
+                  :href="theCardExternalLink"
+                  :to="theCard.link.page ? theCard.link.page.url : undefined"
                   external-target-blank
                 >
                   {{ theCard.link.text }}
@@ -135,11 +135,11 @@ export default defineComponent({
     }
   },
   computed: {
-    theCard(): object | null {
-      if (this.data.card && this.data.card.length > 0) {
-        return this.data.card[0]
+    theCard(): object | undefined {
+      if (this.data?.card && this.data.card.length > 0) {
+        return this.data?.card[0]
       }
-      return null
+      return undefined
     },
     hasCoverImage(): boolean {
       if (this.data.coverImage && this.data.coverImage.src) {
@@ -147,8 +147,11 @@ export default defineComponent({
       }
       return false
     },
-    theLink() {
-      return mixinGetExternalLink(this.data.link) || undefined
+    theExternalLink() {
+      return mixinGetExternalLink(this.data?.link) || undefined
+    },
+    theCardExternalLink() {
+      return mixinGetExternalLink(this.theCard?.link) || undefined
     },
     theSrcSet() {
       return this.data.coverImage

package/src/components/NavJumpMenu/NavJumpMenu.vue

@@ -185,6 +185,9 @@ watch(
   &.-ready {
     @apply visible #{!important};
   }
+  &.-at-top {
+    @apply invisible #{!important};
+  }
   .NavSecondaryLink.secondary-root {
     span {
       @apply border-primary #{!important};

package/src/components/NavSecondary/NavSecondary.vue

@@ -7,7 +7,8 @@
     :class="{
       'has-intro': hasIntro,
       '!bg-transparent border-none': invert,
-      '-scrolled-up': scrollDirection === 'up'
+      '-scrolled-up': scrollDirection === 'up',
+      '-at-top': posY === 0
     }"
   >
     <div

package/src/templates/edu/PageEduLesson/PageEduLessonSection.vue

@@ -124,7 +124,6 @@ const { heading, blocks, image, procedures, text } = reactive(props)
   @return math.div($pxValue, 16) * 1rem;
 }
 .PageEduLessonSection {
-  @apply overflow-x-hidden;
   .PageEduProcedureSection {
     .PageEduProcedureSectionSteps {
       counter-reset: step;

package/src/utils/mixins.ts

@@ -217,9 +217,9 @@ export const mixinGetSrcSet = (srcSetObject: Partial<ImageObject>): string => {
 }
 // Use with RelatedLinkBlock to retrieve the external link to use with an href prop
 export const mixinGetExternalLink = (link: RelatedLinkObject): string | undefined => {
-  if (link.externalLink) {
+  if (link?.externalLink) {
     return link.externalLink
-  } else if (link.document) {
+  } else if (link?.document) {
     return link.document.url
   }
   return undefined