@explorer-1/vue 0.2.42 → 0.2.43

package/lib/main.ts

@@ -76,7 +76,6 @@ import BlockStreamfield from './../src/components/BlockStreamfield/BlockStreamfi
 import BlockTable from './../src/components/BlockTable/BlockTable.vue'
 import BlockTeaser from './../src/components/BlockTeaser/BlockTeaser.vue'
 import BlockText from './../src/components/BlockText/BlockText.vue'
-import BlockTwitterEmbed from './../src/components/BlockTwitterEmbed/BlockTwitterEmbed.vue'
 import BlockVideo from './../src/components/BlockVideo/BlockVideo.vue'
 import BlockVideoEmbed from './../src/components/BlockVideoEmbed/BlockVideoEmbed.vue'
 import CalendarButton from './../src/components/CalendarButton/CalendarButton.vue'
@@ -280,7 +279,6 @@ export {
   BlockTable,
   BlockTeaser,
   BlockText,
-  BlockTwitterEmbed,
   BlockVideo,
   BlockVideoEmbed,
   CalendarButton,

package/package.json

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

package/src/components/BaseButton/BaseButton.vue

@@ -75,6 +75,14 @@ export default defineComponent({
       }
       return undefined
     },
+    computedTo() {
+      let toValue = this.to
+      // filter out unnecessary `/home/` prefix from wagtail default site urlPaths
+      if (toValue && typeof toValue === 'string' && toValue.startsWith('/home/')) {
+        toValue = toValue.replace('/home/', '/')
+      }
+      return toValue
+    },
     variantClass(): string {
       let classes = variants[this.variant]
       if (!this.$slots.default && this.$slots.icon) {
@@ -99,7 +107,7 @@ export default defineComponent({
     :aria-label="ariaLabel"
     :disabled="disabled"
     :href="theHref"
-    :to="to ? to : undefined"
+    :to="computedTo ? computedTo : undefined"
     @click="$emit('click')"
   >
     <span class="label block">

package/src/components/BlockRelatedLinks/BlockRelatedLinks.vue

@@ -8,12 +8,12 @@
     >
       {{ data.heading }}
     </BaseHeading>
-    <ul
-      v-for="(link, index) in data.links"
-      :key="index"
-      class="sm:w-3/4 md:w-2/3 lg:w-3/4 xl:w-2/3 mb-2 print:list-disc print:ml-4"
-    >
-      <li>
+    <ul class="sm:w-3/4 md:w-2/3 lg:w-3/4 xl:w-2/3 print:list-disc print:ml-4">
+      <li
+        v-for="(link, index) in data.links"
+        :key="index"
+        class="mb-2"
+      >
         <template v-if="link.externalLink">
           <RelatedLink
             variant="external"

package/src/components/BlockRelatedLinks/RelatedLink.vue

@@ -2,8 +2,10 @@
   <component
     :is="tag"
     :to="to"
+    variant="none"
     :href="href"
     class="bg-gray-light group text-body-lg flex items-center justify-between px-4 py-4 cursor-pointer print:px-0 print:py-0 print:block"
+    link-class="bg-gray-light group text-body-lg flex items-center justify-between  w-full print:block"
     :target="target"
     rel="noopener"
   >
@@ -19,6 +21,7 @@
 </template>
 <script lang="ts">
 import { defineComponent, resolveComponent } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
 import IconArrow from './../Icons/IconArrow.vue'
 import IconDownload from './../Icons/IconDownload.vue'
 import IconExternal from './../Icons/IconExternal.vue'
@@ -36,6 +39,7 @@ export const variants: Variants = {
 export default defineComponent({
   name: 'BlockRelatedLinks',
   components: {
+    BaseLink,
     IconArrow,
     IconDownload,
     IconExternal
@@ -59,7 +63,7 @@ export default defineComponent({
   computed: {
     tag() {
       if (this.to) {
-        return resolveComponent('NuxtLink')
+        return resolveComponent('BaseLink')
       } else {
         return 'a'
       }

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -150,13 +150,6 @@
         <BlockImageComparison :data="block" />
       </LayoutHelper>
 
-      <BlockTwitterEmbed
-        v-else-if="block.blockType == 'TwitterEmbedBlock'"
-        :key="`twitterEmbedBlock${index}`"
-        class="lg:mb-18 mb-10"
-        :data="block"
-      />
-
       <LayoutHelper
         v-else-if="block.blockType == 'IframeEmbedBlock'"
         :key="`iframeEmbedBlock${index}`"
@@ -271,7 +264,6 @@ import BlockRelatedLinks, {
 import BlockTable from './../BlockTable/BlockTable.vue'
 import BlockTeaser from './../BlockTeaser/BlockTeaser.vue'
 import BlockText from './../BlockText/BlockText.vue'
-import BlockTwitterEmbed from './../BlockTwitterEmbed/BlockTwitterEmbed.vue'
 import BlockIframeEmbed from './../BlockIframeEmbed/BlockIframeEmbed.vue'
 import BlockGist from './../BlockGist/BlockGist.vue'
 import BlockVideo from './../BlockVideo/BlockVideo.vue'
@@ -311,7 +303,6 @@ export default defineComponent({
     BlockTable,
     BlockTeaser,
     BlockText,
-    BlockTwitterEmbed,
     BlockIframeEmbed,
     BlockGist,
     BlockVideo,

package/src/components/HeroMedium/HeroMedium.vue

@@ -47,7 +47,8 @@
           'my-6 lg:mt-0 lg:mb-10': compact
         }"
       >
-        <nuxt-link
+        <BaseLink
+          variant="none"
           :to="feature.url"
           class="lg:w-1/2 xl:w-5/12 block"
         >
@@ -79,7 +80,7 @@
               <IconArrow class="inline" />
             </span>
           </p>
-        </nuxt-link>
+        </BaseLink>
         <BaseLink
           :to="feature.url"
           class="lg:block hidden"

package/src/components/HomepageCarouselItem/HomepageCarouselItem.vue

@@ -66,7 +66,7 @@
             <span class="sr-only">.</span>
           </p>
           <component
-            :is="item.externalLink || (item.page && item.page.url) ? 'BaseLink' : 'div'"
+            :is="tag"
             variant="none"
             link-class="block"
             :href="item.externalLink ? item.externalLink : null"
@@ -98,7 +98,7 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, resolveComponent } from 'vue'
 import type { PropType } from 'vue'
 import type { ImageObject } from '../../interfaces'
 import BaseLink from './../BaseLink/BaseLink.vue'
@@ -128,7 +128,16 @@ export default defineComponent({
   props: {
     item: {
       type: Object as PropType<Slide>,
-      required: false
+      default: undefined
+    }
+  },
+  computed: {
+    tag() {
+      if (this.item?.externalLink || (this.item?.page && this.item?.page.url)) {
+        return resolveComponent('BaseLink')
+      } else {
+        return 'div'
+      }
     }
   }
 })

package/src/components/MissionDetailAbout/MissionDetailAbout.vue

@@ -42,7 +42,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import type { PropType } from 'vue'
-import { ObserveVisibility } from 'vue-observe-visibility'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 import BlockText from './../BlockText/BlockText.vue'
 
@@ -56,9 +55,6 @@ export default defineComponent({
     BaseHeading,
     BlockText
   },
-  directives: {
-    ObserveVisibility
-  },
   props: {
     descriptionHeading: {
       type: String,

package/src/components/MissionDetailHighlights/MissionDetailHighlights.vue

@@ -169,7 +169,6 @@ import type { DebouncedFunc } from 'lodash'
 import type { Slide } from './MissionDetailHighlightsCarouselItem.vue'
 // @ts-ignore
 import anime from 'animejs'
-import { ObserveVisibility } from 'vue-observe-visibility'
 import MissionDetailHighlightsCarousel from './MissionDetailHighlightsCarousel.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 
@@ -179,9 +178,6 @@ export default defineComponent({
     BaseHeading,
     MissionDetailHighlightsCarousel
   },
-  directives: {
-    ObserveVisibility
-  },
   props: {
     missionTitle: {
       type: String,

package/src/components/NavSearchForm/NavSearchForm.vue

@@ -20,7 +20,7 @@ const clearSearch = () => {
 }
 const submitSearch = () => {
   emit('submitForm')
-  router.push({ path: '/search', query: searchQuery.value })
+  router.push({ path: '/search', query: { query: searchQuery.value } })
 }
 </script>
 <template>

package/src/components/SwimlaneCTA/SwimlaneCTA.vue

@@ -10,9 +10,9 @@
       link-class="max-w-screen-3xl block w-full mx-auto"
     >
       <div
+        v-bind-once="{ style: 'background-image: url(' + randomizeImage + ');' }"
         role="presentation"
         :class="'SwimlaneCTA lg:block hidden' + computedClass"
-        :style="'background-image: url(' + randomizeImage + ');'"
       >
         <div class="absolute inset-0 z-10 bg-black bg-opacity-25"></div>
         <div
@@ -61,9 +61,9 @@
         </div>
       </div>
       <div
+        v-bind-once="{ style: 'background-image: url(' + randomizeImageSmall + ');' }"
         role="presentation"
         :class="'SwimlaneCTA lg:hidden block' + computedClass"
-        :style="'background-image: url(' + randomizeImageSmall + ');'"
       >
         <div
           class="lg:flex-row lg:pr-12 lg:py-5 flex flex-col justify-center w-full px-5 py-6 bg-black bg-opacity-25"

package/src/components/TopicDetailMissionCarouselItem/TopicDetailMissionCarouselItem.vue

@@ -1,6 +1,7 @@
 <template>
-  <nuxt-link
+  <BaseLink
     v-if="data"
+    variant="none"
     :to="data.url"
     class="TopicDetailMissionCarouselItem ThemeVariantLight group block cursor-pointer"
   >
@@ -59,7 +60,7 @@
         />
       </div>
     </div>
-  </nuxt-link>
+  </BaseLink>
 </template>
 
 <script lang="ts">
@@ -69,6 +70,7 @@ import type { ClockType } from '../MissionDetailStats/MissionDetailStats.vue'
 import type { PropType } from 'vue'
 import type { ImageObject } from '../../interfaces'
 import MissionDetailStatsMicro from './../MissionDetailStats/MissionDetailStatsMicro.vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 
@@ -87,7 +89,8 @@ export default defineComponent({
   components: {
     MissionDetailStatsMicro,
     BaseImage,
-    BaseImagePlaceholder
+    BaseImagePlaceholder,
+    BaseLink
   },
   props: {
     data: {

package/src/components/TopicDetailMore/TopicDetailMoreVisibility.vue

@@ -13,13 +13,9 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { ObserveVisibility } from 'vue-observe-visibility'
 
 export default defineComponent({
   name: 'TopicDetailMoreVisibility',
-  directives: {
-    ObserveVisibility
-  },
   data() {
     return {
       isVisible: false,

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

@@ -1,17 +0,0 @@
-import { default as BlockTwitterEmbed } from './BlockTwitterEmbed.vue';
-declare namespace _default {
-    export let title: string;
-    export { BlockTwitterEmbed as component };
-    export let excludeStories: RegExp;
-}
-export default _default;
-export namespace BlockTwitterEmbedData {
-    let blockType: string;
-    let username: string;
-}
-export namespace BaseStory {
-    let name: string;
-    namespace args {
-        export { BlockTwitterEmbedData as data };
-    }
-}

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

@@ -1,14 +0,0 @@
-declare const _default: import('vue').DefineComponent<{
-    data: {
-        type: ObjectConstructor;
-        required: false;
-    };
-}, unknown, unknown, {}, {
-    render(): void;
-}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    data: {
-        type: ObjectConstructor;
-        required: false;
-    };
-}>>, {}, {}>;
-export default _default;

package/src/components/BlockTwitterEmbed/BlockTwitterEmbed.stories.js

@@ -1,19 +0,0 @@
-import BlockTwitterEmbed from './BlockTwitterEmbed.vue'
-
-export default {
-  title: 'Components/Blocks/BlockTwitterEmbed',
-  component: BlockTwitterEmbed,
-  excludeStories: /.*Data$/
-}
-
-export const BlockTwitterEmbedData = {
-  blockType: 'TwitterEmbedBlock',
-  username: 'NASAJPL'
-}
-
-export const BaseStory = {
-  name: 'BlockTwitterEmbed',
-  args: {
-    data: BlockTwitterEmbedData
-  }
-}

package/src/components/BlockTwitterEmbed/BlockTwitterEmbed.vue

@@ -1,61 +0,0 @@
-<template>
-  <div
-    v-if="data"
-    class="BlockTwitterEmbed lg:px-0 px-8"
-  >
-    <div
-      ref="timeline"
-      class="border-gray-light-mid mx-auto border"
-    ></div>
-  </div>
-</template>
-
-<script lang="ts">
-// @ts-nocheck
-export default {
-  name: 'BlockTwitterEmbed',
-  props: {
-    data: {
-      type: Object,
-      required: false
-    }
-  },
-  mounted() {
-    this.render()
-  },
-  methods: {
-    render() {
-      // TODO: VUE3 -- find another way to make this client-only
-      if (typeof require !== 'undefined') {
-        require('twitter-widgets').load((err, twttr) => {
-          if (err) {
-            console.log('[twitter-widgets] Error: ' + err)
-            return
-          }
-          twttr.widgets.createTimeline(
-            {
-              sourceType: 'profile',
-              screenName: this.data.username
-            },
-            this.$refs.timeline
-          )
-        })
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.BlockTwitterEmbed {
-  > div {
-    height: 400px;
-    max-height: 60vh;
-    @apply overflow-y-auto;
-    @screen md {
-      height: 600px;
-      @apply w-xl max-h-none;
-    }
-  }
-}
-</style>