@explorer-1/vue 0.2.72 → 0.2.74

package/package.json

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

package/src/components/HeroMedia/HeroMedia.vue

@@ -4,7 +4,7 @@
     class="HeroMedia"
   >
     <div class="vh-crop max-w-screen-3xl relative flex items-center mx-auto overflow-hidden">
-      <div class="hero">
+      <div class="hero w-full">
         <template v-if="theImageData">
           <img
             v-if="theImageData.src"

package/src/components/HomepageCarousel/HomepageCarousel.stories.js

@@ -4,6 +4,7 @@ import HomepageCarousel from './HomepageCarousel.vue'
 export default {
   title: 'Components/WWW/Homepage/HomepageCarousel',
   component: HomepageCarousel,
+  tags: ['!autodocs'],
   excludeStories: /.*Data$/,
   parameters: {
     viewMode: 'canvas'

package/src/components/HomepageCarousel/HomepageCarousel.vue

@@ -74,9 +74,11 @@
             </transition>
           </div>
           <!-- tabbed navigation -->
-          <div class="HomepageCarouselTabs relative container overflow-hidden mx-auto pt-5 pb-22">
+          <div
+            class="HomepageCarouselTabs relative container overflow-hidden px-0 mx-auto pt-5 pb-22"
+          >
             <!-- offset by one tab to allow for previous slide transitions -->
-            <div class="w-full -translate-x-1/5">
+            <div class="w-full -translate-x-1/5 ml-10 pr-10 2xl:ml-0 2xl:pr-0">
               <!-- tab container width adjusts automatically according to slide count when there are less than 6 slides -->
               <div :class="tabContainerWidthClass">
                 <!-- translate amount depends on tab container width, so the class is applied dynamically -->
@@ -95,7 +97,7 @@
                     external-target-blank
                     class="pr-5 flex-shrink-0 h-auto translate-x-0"
                     :class="tabWidthClass"
-                    link-class="
+                    :link-class="`
                       group
                       border-opacity-30 border-r border-white
                       can-hover:hover:text-white
@@ -107,7 +109,9 @@
                       -ml-5
                       font-semibold
                       text-base text-left text-white text-opacity-75
-                      transition-all duration-200 ease-in"
+                      transition-all duration-200 ease-in
+                      ${index === 0 ? '!text-white' : ''}
+                      `"
                   >
                     <span>
                       {{ item.slideTitle }}
@@ -157,6 +161,7 @@ export default defineComponent({
     sliderOptions: SwiperOptions
     tabbedItems: Slide[] | undefined
     slideToNext: Boolean
+    theIndex: number
   } {
     return {
       slideLoaded: false,
@@ -195,25 +200,23 @@ export default defineComponent({
             }
           },
           slideChange: (swiper: Swiper) => {
+            // @ts-ignore
+            this.theIndex = swiper.realIndex
             ;(this as any).videoHandler(swiper)
           }
         }
       },
+      theIndex: 0,
       tabbedItems: undefined,
       slideToNext: true
     }
   },
   computed: {
-    theIndex(): number | false {
-      if (this.slider) {
-        return this.slider.realIndex
-      }
-      return false
-    },
     onlyOneSlide(): boolean {
       return this.items?.length === 1
     },
     loopedTabs(): Array<Slide> {
+      // used to "cycle" through tabbed items
       // return a looped array starting at the active slide
       const items = this.items
       // offset by one to avoid slice(0,0) in reorderedItems
@@ -237,9 +240,9 @@ export default defineComponent({
       } else if (this.items?.length === 4) {
         return 'overflow-hidden w-4/5'
       } else if (this.items?.length === 5) {
-        return 'overflow-hidden container'
+        return 'overflow-hidden container px-0'
       }
-      return 'overflow-visible container'
+      return 'overflow-visible container px-0'
     },
     tabWidthClass(): string {
       if (this.items?.length === 2) {

package/src/components/HomepageCarouselItem/HomepageCarouselItem.vue

@@ -45,8 +45,6 @@
           :width="item.listingPageHeroImage.src.width"
           :height="item.listingPageHeroImage.src.height"
           alt=""
-          loading="lazy"
-          data-chromatic="ignore"
         />
       </picture>
     </div>

package/src/components/NavDesktopEdu/NavDesktopEdu.vue

@@ -96,6 +96,7 @@
             >
               <NavSearchForm
                 class="w-full"
+                placeholder="Search JPL Education"
                 @clear-search="closeSearch()"
                 @submit-form="closeSearch()"
               />

package/src/components/NavMobile/NavMobile.vue

@@ -67,6 +67,7 @@
           <!-- search input goes here -->
           <NavSearchForm
             mobile
+            :placeholder="themeStore.isEdu ? 'Search JPL Education' : undefined"
             class="px-4 my-5"
             @submit-form="closeMenu()"
           />

package/src/components/NavSearchForm/NavSearchForm.vue

@@ -8,9 +8,11 @@ const themeStore = useThemeStore()
 
 interface NavSearchFormProps {
   mobile?: boolean
+  placeholder?: string
 }
 const props = withDefaults(defineProps<NavSearchFormProps>(), {
-  mobile: false
+  mobile: false,
+  placeholder: 'Search JPL'
 })
 const emit = defineEmits(['clearSearch', 'submitForm'])
 
@@ -35,7 +37,7 @@ const submitSearch = () => {
   >
     <SearchInput
       v-model="searchQuery"
-      placeholder="Search JPL"
+      :placeholder="placeholder"
       :underlined-input="!props.mobile"
       :underlined-input-value="searchQuery"
       :auto-focus="!props.mobile"

package/src/components/SearchFilterGroupAccordionItem/SearchFilterGroupAccordionItem.vue

@@ -41,10 +41,10 @@ const emit = defineEmits(['filterGroupAccordionItemOpened', 'filterGroupAccordio
 </script>
 <template>
   <div
-    class="SearchFilterGroupAccordionItem border-t pt-2.5"
+    class="SearchFilterGroupAccordionItem border-t pt-[0.4375rem]"
     :class="{
       '-open border-gray-light-mid  -mb-px': !isHidden,
-      'border-transparent mb-3': isHidden
+      'border-transparent mb-2.5': isHidden
     }"
   >
     <div class="SearchFilterGroupAccordionItemHeader flex flex-row w-full content-between">

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

@@ -90,7 +90,9 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
           class="px-0 lg:px-4"
           indent="col-1"
         >
-          <div class="ThemeVariantGray bg-gray-light px-8 py-6 md:px-10 md:py-8 lg:px-18 lg:py-16">
+          <div
+            class="ThemeVariantGray bg-gray-light px-8 py-6 md:px-10 md:py-8 lg:px-18 lg:py-16 overflow-hidden"
+          >
             <template v-if="step.media?.length">
               <!-- split 50/50 -->
               <div class="lg:grid grid-cols-2 gap-6 lg:gap-10">