@explorer-1/vue 0.2.10 → 0.2.12

package/dist/src/components/BaseTimer/BaseTimer.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { Duration } from 'dayjs/plugin/duration';
+import { Duration } from 'dayjs/plugin/duration.js';
 
 export declare const timerUnits: {
     readonly years: {

package/dist/src/components/EventCard/EventCard.vue.d.ts

@@ -1,5 +1,4 @@
 import { PropType } from 'vue';
-import { EventDateObject } from './../../utils/mixins';
 import { HeadingLevel } from './../BaseHeading/BaseHeading.vue';
 
 declare const _default: import('vue').DefineComponent<{
@@ -50,9 +49,6 @@ declare const _default: import('vue').DefineComponent<{
         default: string;
     };
 }, unknown, unknown, {
-    splitDate(): EventDateObject | null;
-    displayTime(): string | undefined;
-    formattedEventDates(): string | undefined;
     themeStore: () => import('pinia').Store<"theme", import('../../store/theme').State, {
         isEdu(state: {
             theme: import('../../interfaces').Explorer1Theme | null;

package/dist/src/components/HeroLarge/HeroLarge.stories.d.ts

@@ -29,6 +29,31 @@ export namespace HeroLargeData {
         }
         let alt: string;
     }
+    export namespace listingPageHeroImage {
+        export namespace src_1 {
+            let url_3: string;
+            export { url_3 as url };
+            let width_1: number;
+            export { width_1 as width };
+            let height_1: number;
+            export { height_1 as height };
+        }
+        export { src_1 as src };
+        let srcSet_1: string;
+        export { srcSet_1 as srcSet };
+        export namespace screenMd_1 {
+            let url_4: string;
+            export { url_4 as url };
+        }
+        export { screenMd_1 as screenMd };
+        export namespace screenSm_1 {
+            let url_5: string;
+            export { url_5 as url };
+        }
+        export { screenSm_1 as screenSm };
+        let alt_1: string;
+        export { alt_1 as alt };
+    }
 }
 export namespace BaseStory {
     let name: string;

package/dist/src/components/HomepageCarousel/HomepageCarousel.stories.d.ts

@@ -16,7 +16,7 @@ export const HomepageCarouselData: ({
     page: {
         url: string;
     };
-    image: {
+    listingPageHeroImage: {
         src: {
             url: string;
             width: number;
@@ -48,7 +48,7 @@ export const HomepageCarouselData: ({
         type: string;
         width: null;
     };
-    image: {
+    listingPageHeroImage: {
         src: {
             url: string;
             width: number;
@@ -68,7 +68,7 @@ export const HomepageCarouselData: ({
     slideTitle: string;
     heading: string;
     externalLink: string;
-    image: {
+    listingPageHeroImage: {
         src: {
             url: string;
             width: number;
@@ -102,7 +102,7 @@ export namespace Shuffled {
             page: {
                 url: string;
             };
-            image: {
+            listingPageHeroImage: {
                 src: {
                     url: string;
                     width: number;
@@ -134,7 +134,7 @@ export namespace Shuffled {
                 type: string;
                 width: null;
             };
-            image: {
+            listingPageHeroImage: {
                 src: {
                     url: string;
                     width: number;
@@ -154,7 +154,7 @@ export namespace Shuffled {
             slideTitle: string;
             heading: string;
             externalLink: string;
-            image: {
+            listingPageHeroImage: {
                 src: {
                     url: string;
                     width: number;
@@ -192,7 +192,7 @@ export namespace OneSlide {
             page: {
                 url: string;
             };
-            image: {
+            listingPageHeroImage: {
                 src: {
                     url: string;
                     width: number;
@@ -224,7 +224,7 @@ export namespace OneSlide {
                 type: string;
                 width: null;
             };
-            image: {
+            listingPageHeroImage: {
                 src: {
                     url: string;
                     width: number;
@@ -244,7 +244,7 @@ export namespace OneSlide {
             slideTitle: string;
             heading: string;
             externalLink: string;
-            image: {
+            listingPageHeroImage: {
                 src: {
                     url: string;
                     width: number;
@@ -277,7 +277,7 @@ export namespace FewSlides {
             page: {
                 url: string;
             };
-            image: {
+            listingPageHeroImage: {
                 src: {
                     url: string;
                     width: number;
@@ -309,7 +309,7 @@ export namespace FewSlides {
                 type: string;
                 width: null;
             };
-            image: {
+            listingPageHeroImage: {
                 src: {
                     url: string;
                     width: number;
@@ -329,7 +329,7 @@ export namespace FewSlides {
             slideTitle: string;
             heading: string;
             externalLink: string;
-            image: {
+            listingPageHeroImage: {
                 src: {
                     url: string;
                     width: number;

package/dist/src/components/HomepageCarouselItem/HomepageCarouselItem.stories.d.ts

@@ -24,7 +24,7 @@ export namespace HomepageCarouselItemData {
         export let externalLink: string;
         export let slideTitle: string;
         export { BaseVideoData as video };
-        export namespace image {
+        export namespace listingPageHeroImage {
             namespace src {
                 let url_1: string;
                 export { url_1 as url };

package/dist/src/components/HomepageCarouselItem/HomepageCarouselItem.vue.d.ts

@@ -13,7 +13,7 @@ export interface Slide {
         fileOgg: string;
         fileWebm: string;
     };
-    image: Partial<ImageObject>;
+    listingPageHeroImage: Partial<ImageObject>;
 }
 declare const _default: import('vue').DefineComponent<{
     item: {

package/dist/src/components/NavSearchForm/NavSearchForm.vue.d.ts

@@ -1,19 +1,34 @@
-declare const _default: import('vue').DefineComponent<{
-    mobile: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, unknown, {
-    searchQuery: undefined;
-}, {}, {
-    clearSearch(): void;
-    submitSearch(): void;
-}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    mobile: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>>, {
+interface NavSearchFormProps {
+    mobile?: boolean;
+}
+declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<NavSearchFormProps>, {
+    mobile: boolean;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    clearSearch: (...args: any[]) => void;
+    submitForm: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<NavSearchFormProps>, {
+    mobile: boolean;
+}>>> & {
+    onClearSearch?: ((...args: any[]) => any) | undefined;
+    onSubmitForm?: ((...args: any[]) => any) | undefined;
+}, {
     mobile: boolean;
 }, {}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/src/interfaces.d.ts

@@ -47,6 +47,7 @@ export interface ImageObject {
 export interface ImageBlock extends BlockData, ImageObject {
 }
 export interface ElasticSearchPage {
+    _source: string;
     id: string | number;
     content_type: string;
     url: string;

package/dist/src/templates/PageEventDetail/PageEventDetail.vue.d.ts

@@ -1,21 +1,22 @@
 import { EventCardObject } from './../../interfaces';
-import { EventDateObject } from './../../utils/mixins';
 
 declare const _default: import('vue').DefineComponent<{
     data: {
         type: ObjectConstructor;
         required: false;
+        default: undefined;
     };
 }, unknown, {
     PlaceholderPortrait: string;
 }, {
     moreEvents(): EventCardObject[];
-    startDateTimeForFormatting(): string;
-    formattedSplitEventDates(): string | EventDateObject | undefined;
 }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     data: {
         type: ObjectConstructor;
         required: false;
+        default: undefined;
     };
-}>>, {}, {}>;
+}>>, {
+    data: Record<string, any>;
+}, {}>;
 export default _default;

package/dist/src/templates/PageVideoDetail/PageVideoDetail.stories.d.ts

@@ -15,7 +15,7 @@ export namespace BaseStory {
     namespace args {
         namespace data {
             export let block: never[];
-            export let body: string;
+            export let videoDetailBody: string;
             export let firstPublishedAt: string;
             export let id: string;
             export let label: string;

package/dist/src/templates/www/PageAsteroidWatchIndex/PageAsteroidWatchIndex.stories.d.ts

@@ -1,4 +1,5 @@
 import { default as PageAsteroidWatchIndex } from './PageAsteroidWatchIndex.vue';
+import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js';
 declare namespace _default {
     export let title: string;
     export { PageAsteroidWatchIndex as component };
@@ -18,9 +19,28 @@ export default _default;
 export namespace BaseStory {
     let name: string;
     namespace args {
-        let data: {
-            title: string;
-            body: ({
+        namespace data {
+            export let description: string;
+            export namespace listingPageHeroImage {
+                namespace src {
+                    let url: string;
+                    let width: number;
+                    let height: number;
+                }
+                let srcSet: string;
+                namespace screenMd {
+                    let url_1: string;
+                    export { url_1 as url };
+                }
+                namespace screenSm {
+                    let url_2: string;
+                    export { url_2 as url };
+                }
+                let alt: string;
+            }
+            let title_1: string;
+            export { title_1 as title };
+            export let body: ({
                 blockType: string;
                 heading: string;
                 text: string;
@@ -408,49 +428,7 @@ export namespace BaseStory {
                 level?: undefined;
                 showTitle?: undefined;
             })[];
-            latestAsteroidNews: ({
-                url: string;
-                title: string;
-                slug: string;
-                label: string;
-                thumbnailImage: {
-                    src: {
-                        url: string;
-                        width: number;
-                        height: number;
-                    };
-                    alt: string;
-                };
-            } | {
-                url: string;
-                title: string;
-                slug: string;
-                thumbnailImage: {
-                    src: {
-                        url: string;
-                        width: number;
-                        height: number;
-                    };
-                    alt: string;
-                };
-                label?: undefined;
-            })[];
-            description: string;
-            heroImage: {
-                src: {
-                    url: string;
-                    width: number;
-                    height: number;
-                };
-                srcSet: string;
-                screenMd: {
-                    url: string;
-                };
-                screenSm: {
-                    url: string;
-                };
-                alt: string;
-            };
-        };
+            export { BlockLinkCardCarouselData as latestAsteroidNews };
+        }
     }
 }

package/dist/src/templates/www/PageHomepage/PageHomepage.stories.d.ts

@@ -57,7 +57,7 @@ export const PageHomepageData: {
         page: {
             url: string;
         };
-        image: {
+        listingPageHeroImage: {
             src: {
                 url: string;
                 width: number;
@@ -89,7 +89,7 @@ export const PageHomepageData: {
             type: string;
             width: null;
         };
-        image: {
+        listingPageHeroImage: {
             src: {
                 url: string;
                 width: number;
@@ -109,7 +109,7 @@ export const PageHomepageData: {
         slideTitle: string;
         heading: string;
         externalLink: string;
-        image: {
+        listingPageHeroImage: {
             src: {
                 url: string;
                 width: number;
@@ -408,7 +408,7 @@ export namespace LiveEvent {
                 page: {
                     url: string;
                 };
-                image: {
+                listingPageHeroImage: {
                     src: {
                         url: string;
                         width: number;
@@ -440,7 +440,7 @@ export namespace LiveEvent {
                     type: string;
                     width: null;
                 };
-                image: {
+                listingPageHeroImage: {
                     src: {
                         url: string;
                         width: number;
@@ -460,7 +460,7 @@ export namespace LiveEvent {
                 slideTitle: string;
                 heading: string;
                 externalLink: string;
-                image: {
+                listingPageHeroImage: {
                     src: {
                         url: string;
                         width: number;

package/dist/src/templates/www/PageInfographicDetail/PageInfographicDetail.stories.d.ts

@@ -35,7 +35,7 @@ export namespace BaseStory {
             let title_1: string;
             export { title_1 as title };
             export let topicLabel: string;
-            export let description: string;
+            export let descriptionString: string;
         }
     }
 }

package/dist/src/templates/www/PagePodcastSeason/PagePodcastSeason.stories.d.ts

@@ -41,7 +41,7 @@ export namespace PagePodcastSeasonData {
             };
         };
     };
-    export namespace heroImage {
+    export namespace listingPageHeroImage {
         namespace src {
             let url: string;
             let width: number;

package/dist/src/templates/www/PageRoboticsDetail/PageRoboticsDetail.stories.d.ts

@@ -209,6 +209,21 @@ export namespace Template {
                 };
                 alt: string;
             };
+            listingPageHeroImage: {
+                src: {
+                    url: string;
+                    width: number;
+                    height: number;
+                };
+                srcSet: string;
+                screenMd: {
+                    url: string;
+                };
+                screenSm: {
+                    url: string;
+                };
+                alt: string;
+            };
         };
     }
 }

package/dist/src/templates/www/PageTopicDetail/PageTopicDetail.stories.d.ts

@@ -224,7 +224,7 @@ export const TopicDetailData: {
     displayTitle: string;
     parentDisplayTitle: string;
     strapline: string;
-    heroImage: {
+    listingPageHeroImage: {
         src: {
             url: string;
             width: number;

package/dist/src/utils/rangeifyGrades.d.ts

@@ -1,3 +1,3 @@
 import { GradeLevelsObject } from './../interfaces';
 
-export declare const rangeifyGrades: (gradeLevels: GradeLevelsObject[]) => string;
+export declare const rangeifyGrades: (gradeLevels: GradeLevelsObject[]) => string | undefined;

package/package.json

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

package/src/components/BaseTimer/BaseTimer.vue

@@ -51,9 +51,10 @@
 <script lang="ts">
 import type { PropType } from 'vue'
 import { defineComponent } from 'vue'
-import dayjs, { type Dayjs } from 'dayjs'
-import duration, { type Duration } from 'dayjs/plugin/duration'
-import minMax from 'dayjs/plugin/minMax'
+import dayjs from './../../utils/dayjs'
+import { type Dayjs } from 'dayjs'
+import duration, { type Duration } from 'dayjs/plugin/duration.js'
+import minMax from 'dayjs/plugin/minMax.js'
 
 dayjs.extend(duration)
 dayjs.extend(minMax)

package/src/components/NavSearchForm/NavSearchForm.vue

@@ -1,3 +1,29 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import SearchInput from './../SearchInput/SearchInput.vue'
+const router = useRouter()
+
+interface NavSearchFormProps {
+  mobile?: boolean
+}
+const props = withDefaults(defineProps<NavSearchFormProps>(), {
+  mobile: false
+})
+const emit = defineEmits(['clearSearch', 'submitForm'])
+
+const searchQuery = ref()
+
+const clearSearch = () => {
+  searchQuery.value = undefined
+  emit('clearSearch')
+}
+const submitSearch = () => {
+  emit('submitForm')
+  console.log(searchQuery.value)
+  router.push({ path: '/search', query: searchQuery.value })
+}
+</script>
 <template>
   <form
     class="NavSearchForm"
@@ -6,11 +32,11 @@
     <SearchInput
       v-model="searchQuery"
       placeholder="Search JPL"
-      :underlined-input="!mobile"
+      :underlined-input="!props.mobile"
       :underlined-input-value="searchQuery"
-      :auto-focus="!mobile"
-      :inline="!mobile"
-      :default-colors="mobile"
+      :auto-focus="!props.mobile"
+      :inline="!props.mobile"
+      :default-colors="props.mobile"
       @esc="clearSearch()"
     />
     <button
@@ -22,43 +48,6 @@
     </button>
   </form>
 </template>
-<script lang="ts">
-import { defineComponent } from 'vue'
-import SearchInput from './../SearchInput/SearchInput.vue'
-
-export default defineComponent({
-  name: 'NavSearchForm',
-  components: {
-    SearchInput
-  },
-  props: {
-    mobile: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      searchQuery: undefined
-    }
-  },
-  methods: {
-    clearSearch() {
-      this.searchQuery = undefined
-      this.$emit('clearSearch')
-    },
-    submitSearch() {
-      this.$emit('submitForm')
-      if (this.$router) {
-        this.$router.push({
-          name: 'search',
-          query: { query: this.searchQuery }
-        })
-      }
-    }
-  }
-})
-</script>
 <style lang="scss">
 .NavSearchForm {
   ::placeholder {

package/src/components/PastEventsCarousel/PastEventsCarousel.vue

@@ -4,7 +4,7 @@
     heading="Past Events"
     variant="cards"
     :link="{
-      path: '/events',
+      // path: 'events',
       query: {
         event_status: 'Past events',
         sortBy: 'eventStartDateLatest',
@@ -28,7 +28,9 @@
   </MixinCarousel>
 </template>
 <script lang="ts">
+// relative link to view past events assumes that this component will only be used on an events index page.
 // @ts-nocheck
+// @ts-expect-error Elastic search response is not fully typed
 import { defineComponent } from 'vue'
 import type { ElasticSearchPage } from '../../interfaces'
 import MixinCarousel from './../MixinCarousel/MixinCarousel.vue'

package/src/interfaces.ts

@@ -49,6 +49,7 @@ export interface ImageObject {
 export interface ImageBlock extends BlockData, ImageObject {}
 
 export interface ElasticSearchPage {
+  _source: string
   id: string | number
   content_type: string
   url: string