@explorer-1/vue 0.2.3 → 0.2.5

package/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, defineExpose } from 'vue'
 import isEmpty from 'lodash/isEmpty.js'
 import type { StreamfieldBlockData } from './../../../components/BlockStreamfield/BlockStreamfield.vue'
 import type {
@@ -17,8 +17,10 @@ import ShareButtonsEdu from './../../../components/ShareButtonsEdu/ShareButtonsE
 import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
 import BlockText from './../../../components/BlockText/BlockText.vue'
 import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
 
 interface PageEduNewsDetailObject extends PageResponseObject {
+  readTime: string
   url: string
   heroImage: ImageObject
   heroImageInline: ImageObject
@@ -34,6 +36,7 @@ interface PageEduNewsDetailObject extends PageResponseObject {
   topper: string
   relatedLinks: RelatedLinkObject[]
   body: StreamfieldBlockData[]
+  showJumpMenu: boolean
 }
 
 interface PageEduNewsDetailProps {
@@ -43,6 +46,8 @@ interface PageEduNewsDetailProps {
 // define props
 const props = defineProps<PageEduNewsDetailProps>()
 
+const PageEduNewsDetailJumpMenu = ref()
+
 const heroEmpty = computed(() => {
   return isEmpty(props.data?.heroImage)
 })
@@ -66,6 +71,10 @@ const computedClass = computed(() => {
 const dateTimeArray = computed(() => {
   return props.data.publicationDate.split(' ')
 })
+
+defineExpose({
+  PageEduNewsDetailJumpMenu
+})
 </script>
 <template>
   <div
@@ -75,6 +84,13 @@ const dateTimeArray = computed(() => {
     itemscope
     itemtype="http://schema.org/Article"
   >
+    <NavJumpMenu
+      ref="PageEduNewsDetailJumpMenu"
+      :title="data.title"
+      :blocks="data.body"
+      :enabled="true"
+    />
+
     <!-- schema.org -->
     <meta
       v-if="data.thumbnailImage && data.thumbnailImage.original"
@@ -99,6 +115,7 @@ const dateTimeArray = computed(() => {
     >
       <DetailHeadline
         :title="data.title"
+        :read-time="data.readTime"
         :author="data.authors"
         :publication-date="dateTimeArray?.length ? dateTimeArray[0] : undefined"
         :publication-time="dateTimeArray?.length ? dateTimeArray[1] : undefined"
@@ -145,7 +162,6 @@ const dateTimeArray = computed(() => {
         {{ data.summary }}
       </p>
     </LayoutHelper>
-
     <!-- streamfield blocks -->
     <BlockStreamfield
       itemprop="articleBody"

package/src/utils/eventBus.ts

@@ -0,0 +1,3 @@
+import mitt from 'mitt'
+
+export const eventBus = mitt()

package/src/utils/getHeadingId.ts

@@ -0,0 +1,5 @@
+import { camelCase } from 'lodash'
+
+export const getHeadingId = (heading: string, index?: number) => {
+  return camelCase(heading + (index ? index : ''))
+}

package/src/utils/mixins.ts

@@ -123,9 +123,13 @@ export const mixinUpdateGlobalChildren = (value: [BreadcrumbPathObject] | null)
 /* -- mixinUpdateSecondary --
       This mixin is used by the navigation to share secondary nav override items between components
     */
-export const mixinUpdateSecondary = (value: [BreadcrumbPathObject] | null) => {
+export const mixinUpdateSecondary = (
+  value: BreadcrumbPathObject[] | undefined,
+  isJumpMenu: boolean = false
+) => {
   const headerStore = useHeaderStore()
   headerStore.updateSecondary(value)
+  headerStore.updateSecondaryNavIsJumpMenu(isJumpMenu)
 }
 /* -- mixinHighlightPrimary --
       This mixin is used to specify if active primary navigation items should be highlighted/underlined

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

@@ -1,32 +0,0 @@
-import { default as BlockCardGroup } from './BlockCardGroup.vue';
-declare namespace _default {
-    export let title: string;
-    export { BlockCardGroup as component };
-    export let excludeStories: RegExp;
-}
-export default _default;
-export const BlockCardGroupData: ({
-    type: string;
-    title: string;
-    description: string;
-    image: {
-        alt: string;
-        src: {
-            height: number;
-            url: string;
-            width: number;
-        };
-        srcSet: string;
-    };
-} | {
-    type: string;
-    title: string;
-    description: string;
-    image: null;
-})[];
-export namespace BaseStory {
-    let name: string;
-    namespace args {
-        export { BlockCardGroupData as facts };
-    }
-}