@explorer-1/vue 0.2.93 → 0.2.95

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @explorer-1/vue
 
+## 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
+
+- 28d3e9f: Fixing event times in search result listings
+
 ## 0.2.93
 
 ### Patch Changes

package/package.json

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

package/src/components/BlockCardGrid/BlockCardGrid.vue

@@ -7,7 +7,7 @@
       <BlockCardGridItem
         v-for="(card, index) of cards"
         :key="`item-${index}`"
-        class="col-span-1"
+        wrapper-class="col-span-1"
         :label="card.label"
         :title="card.title"
         :description="card.description"
@@ -23,12 +23,13 @@
     >
       <BlockCardGridItem
         v-for="(card, index) of cards"
-        :key="index"
+        :key="`item-mobile-${index}`"
         :label="card.label"
         :title="card.title"
         :text="card.description"
         :image="card.image"
-        class="swiper-slide mb-5"
+        :link="card.link"
+        wrapper-class="swiper-slide mb-5"
       />
     </MixinCarousel>
   </div>

package/src/components/BlockCardGridItem/BlockCardGridItem.vue

@@ -5,6 +5,7 @@
     :to="link?.page?.url ? link.page.url : undefined"
     :href="link?.externalLink ? link?.externalLink : undefined"
     class="BlockCardGridItem group"
+    :class="wrapperClass"
     external-target-blank
   >
     <BlockCardGridItemElement
@@ -14,6 +15,7 @@
   </BaseLink>
   <BlockCardGridItemElement
     v-else
+    :class="wrapperClass"
     v-bind="$attrs"
   />
 </template>
@@ -34,6 +36,11 @@ export default defineComponent({
       type: Object as PropType<LinkObject>,
       required: false,
       default: undefined
+    },
+    wrapperClass: {
+      type: String,
+      required: false,
+      default: undefined
     }
   }
 })

package/src/components/EventCard/EventCard.vue

@@ -29,6 +29,8 @@
             endTime,
             startDate,
             endDate,
+            startDatetime,
+            endDatetime,
             location
           }"
           compact
@@ -121,6 +123,16 @@ export default defineComponent({
       type: String,
       required: false
     },
+    startDatetime: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    endDatetime: {
+      type: String,
+      required: false,
+      default: undefined
+    },
     location: {
       type: String,
       required: false

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/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/components/SearchResultCard/SearchResultCard.stories.js

@@ -46,10 +46,12 @@ export const EventCard = {
     ...SearchResultCardData,
     isEvents: true,
     type: 'Event',
-    startTime: '00:00:00-08:00',
-    endTime: '23:59:59.999999-08:00',
-    startDate: '2021-11-11',
-    endDate: '2021-11-11',
+    endDate: '2028-02-26',
+    endTime: '12:00:00',
+    startDate: '2028-02-26',
+    startTime: '08:00:00',
+    startDatetime: '2028-02-26T08:00:00-08:00',
+    endDatetime: '2028-02-26T12:00:00-08:00',
     location: 'On lab',
     compact: false
   }

package/src/components/SearchResultCard/SearchResultCard.vue

@@ -18,6 +18,8 @@
           startDate,
           endTime,
           endDate,
+          startDatetime,
+          endDatetime,
           customDate,
           location,
           eventType,
@@ -42,6 +44,8 @@
       :start-date="startDate"
       :end-time="endTime"
       :end-date="endDate"
+      :start-datetime="startDatetime"
+      :end-datetime="endDatetime"
       :heading-level="headingLevel"
       compact
     />
@@ -332,6 +336,16 @@ export default defineComponent({
       required: false,
       default: undefined
     },
+    startDatetime: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    endDatetime: {
+      type: String,
+      required: false,
+      default: undefined
+    },
     location: {
       type: String,
       required: false,

package/src/components/SearchResultGridItem/SearchResultGridItem.vue

@@ -15,6 +15,8 @@
           startDate,
           endTime,
           endDate,
+          startDatetime,
+          endDatetime,
           customDate,
           location,
           eventType,
@@ -157,6 +159,16 @@ export default defineComponent({
       type: String,
       required: false
     },
+    startDatetime: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    endDatetime: {
+      type: String,
+      required: false,
+      default: undefined
+    },
     customDate: {
       type: String,
       required: false,

package/src/components/SearchResultsList/SearchResultsList.vue

@@ -28,6 +28,8 @@
           :end-date="page.endDate"
           :start-time="page.startTime"
           :end-time="page.endTime"
+          :start-datetime="page.startDatetime"
+          :end-datetime="page.endDatetime"
           :event-type="page.eventType"
           :ongoing="page.ongoing"
           :target-audience="page.targetAudience"
@@ -54,6 +56,8 @@
           :end-date="page.endDate"
           :start-time="page.startTime"
           :end-time="page.endTime"
+          :start-datetime="page.startDatetime"
+          :end-datetime="page.endDatetime"
           :event-type="page.eventType"
           :ongoing="page.ongoing"
           :target-audience="page.targetAudience"
@@ -220,6 +224,14 @@ export default defineComponent({
                 handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
                   ? page._source[handle + '__end_time_string']
                   : null
+              page.startDatetime =
+                handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
+                  ? page._source[handle + '__start_datetime']
+                  : null
+              page.endDatetime =
+                handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
+                  ? page._source[handle + '__end_datetime']
+                  : null
               page.eventType =
                 handle === 'edu_events_edueventpage'
                   ? page._source.edu_events_edueventpage__event_type_label_filter

package/src/interfaces.ts

@@ -88,6 +88,8 @@ export interface ElasticSearchPage {
   customDate?: string
   startTime?: string
   endTime?: string
+  startDatetime?: string
+  endDatetime?: string
   location?: string
   title: string
   summary?: string

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;