@explorer-1/vue 0.2.34 → 0.2.36

package/package.json

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

package/src/components/BasePill/BasePill.vue

@@ -18,6 +18,7 @@ const sizeMap: Attributes = {
 }
 
 interface BasePillProps {
+  text?: string
   variant?: string
   size?: string
   contentType?: string
@@ -44,14 +45,16 @@ const metadataAttrs = computed(() => {
   }
   return { variant: undefined, label: undefined }
 })
+const theText = computed(() => {
+  return props.text || metadataAttrs.value.label
+})
 </script>
 <template>
   <p
     :class="`${variantMap[metadataAttrs.variant || props.variant]} ${sizeMap[props.size]}`"
     class="ThemeVariantLight text-contrast-none inline-block text-white font-bold edu:font-extrabold rounded-full leading-tight m-0 uppercase print:border-none print:px-0"
   >
-    <template v-if="metadataAttrs.label"> {{ metadataAttrs.label }} </template>
-    <template v-else> <slot /></template>
+    {{ theText }}
     <span class="sr-only">.</span>
   </p>
 </template>

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -47,9 +47,8 @@
           :class="{ 'mb-2': !large, 'mb-4': large }"
           size="sm"
           :content-type="metadataType"
-        >
-          {{ (theItem as EventCardObject).eventType }}
-        </BasePill>
+          :text="(theItem as EventCardObject).eventType"
+        />
       </template>
       <template
         v-else-if="themeStore.isEdu && theItem.parent?.title && theItem.parent?.title !== 'EDU'"
@@ -117,7 +116,7 @@
         <MetadataEvent
           v-if="metadataType === 'EDUEventPage'"
           :event="theItem"
-          :show-time="false"
+          :show-time="large"
           :show-location="false"
           compact
         />

package/src/components/BlockLinkCardList/BlockLinkCardList.vue

@@ -20,6 +20,7 @@ const props = withDefaults(defineProps<BlockLinkCardListProps>(), {
       :class="{ 'pt-3': index !== 0 }"
       :data="item"
       size="lg"
+      show-calendar-chip
     />
   </div>
 </template>

package/src/components/DetailHeadline/DetailHeadline.vue

@@ -9,9 +9,8 @@
           :variant="pillColor"
           size="lg"
           class="mr-3"
-        >
-          {{ pillLabel }}
-        </BasePill>
+          :text="pillLabel"
+        />
       </template>
       <template v-else>
         <div

package/src/components/HeroLarge/HeroLarge.vue

@@ -40,9 +40,8 @@
                 size="lg"
                 class="mr-3"
                 :content-type="customPillType"
-              >
-                {{ customPill }}
-              </BasePill>
+                :text="customPill"
+              />
               <div
                 v-else-if="label"
                 class="font-secondary text-base font-semibold tracking-wider no-underline uppercase"

package/src/components/HeroMedium/HeroMedium.vue

@@ -61,9 +61,8 @@
               size="sm"
               class="mr-3"
               :content-type="customPillType"
-            >
-              {{ customPill }}
-            </BasePill>
+              :text="customPill"
+            />
             <p
               v-if="customLabel || feature.label"
               class="text-subtitle"

package/src/components/SearchResultCard/SearchResultCard.vue

@@ -20,10 +20,13 @@
           startDate,
           endTime,
           endDate,
+          customDate,
           location,
-          eventType: eventType
+          eventType: eventType,
+          ongoing
         }
       }"
+      show-calendar-chip
     />
     <EventCard
       v-else-if="isEvents"
@@ -320,6 +323,11 @@ export default defineComponent({
       required: false,
       default: undefined
     },
+    customDate: {
+      type: String,
+      required: false,
+      default: undefined
+    },
     location: {
       type: String,
       required: false,
@@ -328,6 +336,10 @@ export default defineComponent({
     pageContentType: {
       type: String,
       default: undefined
+    },
+    ongoing: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {

package/src/components/SearchResultsList/SearchResultsList.vue

@@ -23,10 +23,13 @@
           :topic="page.topic"
           :image="page.image"
           :date="page.date"
+          :custom-date="page.customDate"
           :start-date="page.startDate"
           :end-date="page.endDate"
           :start-time="page.startTime"
           :end-time="page.endTime"
+          :event-type="page.eventType"
+          :ongoing="page.ongoing"
           :location="page.location"
           :title="page.title"
           :summary="page.summary"
@@ -57,6 +60,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { ElasticSearchPage } from '../../interfaces'
+
 // @ts-ignore
 import dayjs from 'dayjs'
 import SearchResultCard from './../SearchResultCard/SearchResultCard.vue'
@@ -131,6 +135,8 @@ export default defineComponent({
               const pageType = page._source[handle + '__label']
               if (handle === 'events_eventpage') {
                 date = 'Event date: ' + parseDate(page._source[handle + '__start_datetime'])
+              } else if (handle === 'edu_events_edueventpage') {
+                date = null
               } else if (handle === 'missions_mission') {
                 date = page._source.display_date_filter
                   ? 'Launch date: ' + page._source.display_date_filter
@@ -155,13 +161,37 @@ export default defineComponent({
               page.topic = topic
               // properties for event's page
               page.location =
-                handle === 'events_eventpage' ? page._source[handle + '__location'] : null
+                handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
+                  ? page._source[handle + '__location'] | page._source[handle + '__location_name']
+                  : null
               page.startDate =
-                handle === 'events_eventpage' ? page._source[handle + '__start_datetime'] : null
+                handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
+                  ? page._source[handle + '__start_datetime']
+                  : null
               page.endDate =
-                handle === 'events_eventpage' ? page._source[handle + '__end_datetime'] : null
+                handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
+                  ? page._source[handle + '__end_datetime']
+                  : null
               page.startTime =
-                handle === 'events_eventpage' ? page._source[handle + '__start_time_string'] : null
+                handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
+                  ? page._source[handle + '__start_time_string']
+                  : null
+              page.endTime =
+                handle === 'events_eventpage' || handle === 'edu_events_edueventpage'
+                  ? page._source[handle + '__end_time_string']
+                  : null
+              page.eventType =
+                handle === 'edu_events_edueventpage'
+                  ? page._source.edu_events_edueventpage__event_type_label_filter
+                  : undefined
+              page.customDate =
+                handle === 'edu_events_edueventpage'
+                  ? page._source.edu_events_edueventpage__custom_date
+                  : undefined
+              page.ongoing =
+                handle === 'edu_events_edueventpage'
+                  ? page._source.edu_events_edueventpage__ongoing
+                  : undefined
               // properties that are different for profiles page
               page.summary =
                 handle === 'profiles_profilepage'

package/src/constants.ts

@@ -2,6 +2,7 @@ import type { DictionaryInterface, PillDictionaryInterface } from './interfaces'
 
 export const eduMetadataDictionary: PillDictionaryInterface = {
   EDUEventPage: {
+    label: 'Event',
     variant: 'primary',
     icons: 'primary',
     type: 'event'
@@ -73,9 +74,9 @@ export const searchContentTypeToPageType: DictionaryInterface = {
   news_news: 'News',
   events_eventpage: 'EventPage',
   missions_mission: 'Mission',
-  eduevents_edueventpage: 'EDUEventPage',
-  eduresources_educollectionsdetailpage: 'EDUCollectionsDetailPage',
-  eduresources_eduexplainerarticlepage: 'EDUExplainerArticlePage',
-  eduresources_edulessonpage: 'EDULessonPage',
-  eduresources_eduteachablemomentpage: 'EDUTeachableMomentPage'
+  edu_events_edueventpage: 'EDUEventPage',
+  edu_resources_educollectionsdetailpage: 'EDUCollectionsDetailPage',
+  edu_resources_eduexplainerarticlepage: 'EDUExplainerArticlePage',
+  edu_resources_edulessonpage: 'EDULessonPage',
+  edu_resources_eduteachablemomentpage: 'EDUTeachableMomentPage'
 }

package/src/interfaces.ts

@@ -79,16 +79,19 @@ export interface ElasticSearchPage {
   content_type: string
   url: string
   type: string
-  topic: string
-  image: string | any
-  date: string
-  startDate: string
-  endDate: string
-  startTime: string
-  endTime: string
-  location: string
+  topic?: string
+  image?: string | any
+  date?: string
+  startDate?: string
+  endDate?: string
+  customDate?: string
+  startTime?: string
+  endTime?: string
+  location?: string
   title: string
-  summary: string
+  summary?: string
+  eventType?: string
+  ongoing?: boolean
 }
 
 export interface FormOption {

package/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue

@@ -36,9 +36,8 @@
         <BasePill
           variant="primary"
           size="lg"
-        >
-          {{ data.eventType }}
-        </BasePill>
+          :text="data.eventType"
+        />
       </div>
       <BaseHeading
         level="h1"

package/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue

@@ -115,7 +115,11 @@ const { data } = reactive(props)
               indent="col-2"
               class="mb-5 lg:mb-10"
             >
-              <BlockImageStandard :data="block.image" />
+              <BlockImageStandard
+                :data="block.image"
+                :caption="block.caption"
+                :display-caption="block.displayCaption"
+              />
             </LayoutHelper>
           </template>
           <template v-else-if="block.blockType === 'ImageComparisonBlock'">

package/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue

@@ -5,7 +5,7 @@ import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
 import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
 import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
 import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
-import BaseVideo from './../../../components/BaseVideo/BaseVideo.vue'
+import BlockVideo from './../../../components/BlockVideo/BlockVideo.vue'
 import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
 import BlockVideoEmbed from './../../../components/BlockVideoEmbed/BlockVideoEmbed.vue'
 import BaseButton from './../../../components/BaseButton/BaseButton.vue'
@@ -143,7 +143,7 @@ const creditText = computed(() => {
     case 'image':
       return heroImage.value?.credit
     case 'video':
-      return videoBlock.value?.caption
+      return videoBlock.value?.credit
     case 'document':
       return data.credit
     default:
@@ -263,8 +263,8 @@ const { data } = reactive(props)
       />
       <template v-if="videoBlock.blockType === 'VideoBlock' && videoBlock.video">
         <div class="max-w-screen-2xl lg:mb-24 mx-auto mt-10 mb-8">
-          <BaseVideo
-            :data="videoBlock.video"
+          <BlockVideo
+            :data="videoBlock"
             schema
           />
         </div>
@@ -297,7 +297,6 @@ const { data } = reactive(props)
       />
 
       <div class="max-w-screen-3xl lg:mb-24 mx-auto mt-10 mb-8">
-        <!-- inline hero content -->
         <LayoutHelper
           v-if="heroImage"
           indent="col-2"
@@ -311,8 +310,6 @@ const { data } = reactive(props)
       </div>
     </template>
 
-    <!-- !Gallery body -->
-
     <LayoutHelper indent="col-2">
       <div class="lg:grid grid-cols-12">
         <div
@@ -430,5 +427,14 @@ const { data } = reactive(props)
   .bg-stars .MixinCarousel__Heading {
     @apply text-white;
   }
+  .BlockVideo,
+  .BlockVideoEmbed {
+    .BaseImageCaption {
+      @apply px-4 sm:px-5;
+      @screen 3xl {
+        @apply px-0;
+      }
+    }
+  }
 }
 </style>