@explorer-1/vue 0.2.60 → 0.2.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.60",
+  "version": "0.2.62",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
     "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5",
     "vue3-observe-visibility": "^1.0.1",
-    "@explorer-1/common": "1.1.15"
+    "@explorer-1/common": "1.1.16"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BaseAccordionItem/BaseAccordionItem.vue

@@ -3,6 +3,7 @@ import { computed, reactive, ref } from 'vue'
 import type { AccordionItemObject } from './../../interfaces.ts'
 import { uniqueId } from 'lodash'
 import IconPlus from './../Icons/IconPlus.vue'
+import IconMinus from './../Icons/IconMinus.vue'
 
 export interface BaseAccordionItemProps {
   headingLevel?: string
@@ -76,9 +77,9 @@ const emit = defineEmits(['accordionItemOpened', 'accordionItemClosed'])
               </slot>
               <span
                 class="BaseAccordion-icon pointer-events-none text-xs text-action flex-shrink-0 transform transition-transform"
-                :class="{ 'rotate-45': !isHidden }"
               >
-                <IconPlus />
+                <IconPlus v-if="isHidden" />
+                <IconMinus v-else />
               </span>
             </button>
           </component>

package/src/components/BlockHeading/BlockHeading.vue

@@ -6,7 +6,9 @@
     class="BlockHeading"
     :class="{ 'has-anchor': generateId }"
   >
-    {{ data.heading }}
+    <slot>
+      {{ data.heading }}
+    </slot>
   </BaseHeading>
 </template>
 

package/src/components/NavMobile/NavMobile.vue

@@ -111,7 +111,7 @@
           </nav>
           <div class="pl-8">
             <nav
-              v-if="data.footerMoreFromJpl && data.footerMoreFromJpl.length > 0"
+              v-if="data.footerMoreFromJpl?.length"
               aria-label="Other JPL Sites"
               class="mt-6"
             >
@@ -133,7 +133,6 @@
   </transition>
 </template>
 <script lang="ts">
-// @ts-nocheck
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { eventBus } from './../../utils/eventBus'
@@ -256,19 +255,19 @@ export default defineComponent({
       if (this.menuVisible) {
         this.menuVisible = false
         this.$emit('closeMobileMenu')
-        document.body.classList.remove('overflow-hidden')
+        if (document.body) document.body.classList.remove('overflow-hidden')
       }
     },
     openMenu() {
       if (!this.menuVisible) {
         this.menuVisible = true
         this.$emit('openMobileMenu')
-        document.body.classList.add('overflow-hidden')
+        if (document.body) document.body.classList.add('overflow-hidden')
       }
     },
     // safe way to retrieve url key from nav items. used with breadcrumb to determine active class.
     getUrlKey(item: LinkObject): string | null {
-      if (item.linkPage) {
+      if (item?.linkPage) {
         return item.linkPage.url
       }
       return null
@@ -276,7 +275,7 @@ export default defineComponent({
     // to determine active class on menu links and 'more' menu links
     checkActive(item: LinkObject) {
       const urlKey = this.getUrlKey(item)
-      if (urlKey && this.breadcrumb && this.breadcrumb.menu_links) {
+      if (urlKey && this.breadcrumb?.menu_links) {
         // key into the breadcrumbs for each section
         const objArray = this.breadcrumb.menu_links[urlKey]
         // check if any of the paths contained in the array are active

package/src/components/SearchFilterGroup/SearchFilterGroup.vue

@@ -81,7 +81,8 @@
           <!-- correct for zero based index -->
           <div
             v-if="!truncateFilters || index <= checkbox.checkboxLimit - 1"
-            class="flex my-2"
+            class="flex"
+            :class="{ 'pt-2 mt-2 mb-3': styleAsAccordion, 'my-2': !styleAsAccordion }"
           >
             <input
               :id="
@@ -102,9 +103,10 @@
                   : generateId(bucket.key, groupKey)
               "
               class="form-check-label pl-2 tracking-normal align-middle"
+              :class="{ 'font-extrabold': styleAsAccordion }"
             >
               {{ prettyFilterNames(bucket.key_as_string ? bucket.key_as_string : bucket.key) }}
-              <span class="text-gray-mid-dark text-sm">
+              <span class="text-gray-mid-dark text-sm font-normal">
                 ({{ bucket.doc_count.toLocaleString() }})
               </span>
             </label>
@@ -180,6 +182,12 @@ export default {
     subFilterAggKey: {
       type: String,
       default: undefined
+    },
+    // force accordion styles and spacing even if there are no subfilters
+    // useful when mixing filters with and without subfilters together
+    styleAsAccordion: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:filterBy'],

package/src/components/SearchFilterGroupAccordionItem/SearchFilterGroupAccordionItem.vue

@@ -2,6 +2,7 @@
 import { computed, reactive, ref } from 'vue'
 import { uniqueId } from 'lodash'
 import IconPlus from './../Icons/IconPlus.vue'
+import IconMinus from './../Icons/IconMinus.vue'
 
 export interface SearchFilterGroupAccordionItemProps {
   initOpen?: boolean
@@ -57,10 +58,10 @@ const emit = defineEmits(['filterGroupAccordionItemOpened', 'filterGroupAccordio
           @click="handleClick()"
         >
           <span
-            class="SearchFilterGroupAccordionItem-icon inline-block text-xs text-action flex-shrink-0 transform transition-transform"
-            :class="{ '!rotate-45': !isHidden }"
+            class="SearchFilterGroupAccordionItem-icon inline-block text-xs text-action flex-shrink-0"
           >
-            <IconPlus />
+            <IconPlus v-if="isHidden" />
+            <IconMinus v-else />
           </span>
         </button>
       </template>

package/src/components/SearchResultsList/SearchResultsList.vue

@@ -193,9 +193,11 @@ export default defineComponent({
               page.id = page._id
               page.score = page._score
               // ensure router links
+              // TODO: issues with router links so disabling for now
+              // page.url = page._source.url
+              //   ? page._source.url.replace(/^[^:]+:\/\/[^/?#]+/, '')
+              //   : undefined
               page.url = page._source.url
-                ? page._source.url.replace(/^[^:]+:\/\/[^/?#]+/, '')
-                : undefined
               page.title = page._source.title
               page.type = pageType
               page.topic = topic

package/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue

@@ -87,7 +87,7 @@ export default defineComponent({
 <template>
   <div
     v-if="data"
-    class="ThemeVariantLight"
+    class="ThemeVariantLight PageEduExplainerArticle"
     :class="computedClass"
     itemscope
     itemtype="http://schema.org/Article"
@@ -226,3 +226,16 @@ export default defineComponent({
     </LayoutHelper>
   </div>
 </template>
+<style lang="scss">
+.PageEduExplainerArticle {
+  .BlockText {
+    ul {
+      li {
+        &::before {
+          @apply bg-secondary;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -257,5 +257,14 @@ const { data } = reactive(props)
       }
     }
   }
+  .BlockText {
+    ul {
+      li {
+        &::before {
+          @apply bg-secondary;
+        }
+      }
+    }
+  }
 }
 </style>

package/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue

@@ -240,7 +240,7 @@ const computedClass = computed((): string => {
 <template>
   <div
     v-if="data"
-    class="ThemeVariantLight"
+    class="ThemeVariantLight PageEduStudentProject"
     :class="computedClass"
   >
     <!-- hero title -->
@@ -446,3 +446,17 @@ const computedClass = computed((): string => {
     </LayoutHelper>
   </div>
 </template>
+<style lang="scss">
+.PageEduStudentProject {
+  .BlockText {
+    ul {
+      li {
+        &::before {
+          // intentionally using a specific red
+          @apply bg-jpl-red;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
 import type { ImageObject, StreamfieldBlockData } from './../../../interfaces'
+import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
 import BlockHeading, {
   type BlockHeadingObject
 } from './../../../components/BlockHeading/BlockHeading.vue'
 import type { EduStudentProjectStep } from './PageEduStudentProject.vue'
-import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
 import HeroInlineMedia from './../../../components/HeroInlineMedia/HeroInlineMedia.vue'
-import BlockText from './../../../components/BlockText/BlockText.vue'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import BlockInlineImage from './../../../components/BlockInlineImage/BlockInlineImage.vue'
 import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
 import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import { getHeadingId } from './../../../utils/getHeadingId'
 
 export interface PageEduStudentProjectSectionProps {
   heading?: BlockHeadingObject
@@ -48,8 +49,19 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
       />
     </LayoutHelper>
 
+    <!-- simple richtext -->
+    <BlockInlineImage
+      v-if="text"
+      :data="{
+        text: text,
+        image: image,
+        alignTo: 'right'
+      }"
+      class="lg:mb-18 mb-10"
+    />
+
     <LayoutHelper
-      v-if="image"
+      v-else-if="image"
       indent="col-2"
       class="lg:mb-8 mb-5"
     >
@@ -71,6 +83,7 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
       <li
         v-for="(step, index) in steps"
         :key="index"
+        v-bind-once="{ id: step.heading ? getHeadingId(step.heading) : undefined }"
         class="PageEduStudentProjectStep lg:mb-12 mb-10 px-4 lg:px-0"
       >
         <LayoutHelper
@@ -149,15 +162,6 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
         </LayoutHelper>
       </li>
     </component>
-
-    <!-- simple richtext -->
-    <LayoutHelper
-      v-else-if="text"
-      indent="col-3"
-      class="lg:mb-18 mb-10"
-    >
-      <BlockText :text="text" />
-    </LayoutHelper>
   </section>
 </template>
 <style lang="scss">
@@ -167,6 +171,9 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
   @return math.div($pxValue, 16) * 1rem;
 }
 .PageEduStudentProjectStep {
+  &:target {
+    @apply scroll-mt-14;
+  }
   .BlockStreamfield {
     div:last-child {
       @apply mb-0 #{!important};
@@ -179,7 +186,6 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
     // intentionally overriding correction that occurs within ThemeVariantGray
     @apply text-jpl-red;
   }
-
   .PageEduStudentProjectStep__fullWidth {
     .LayoutHelper > div > .BlockText {
       @screen lg {