@explorer-1/vue 0.2.46 → 0.2.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.46",
+  "version": "0.2.48",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -26,7 +26,7 @@
     "swiper": "^11.1.3",
     "tailwindcss": "^3.4.3",
     "twitter-widgets": "^2.0.0",
-    "vue": "^3.4.21",
+    "vue": "^3.5.3",
     "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5",
     "vue3-observe-visibility": "^1.0.1",
@@ -34,7 +34,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
-    "a11y-dialog": "^8.0.4",
+    "a11y-dialog": "^8.1.0",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",

package/src/components/BaseButton/BaseButton.vue

@@ -77,9 +77,7 @@ export default defineComponent({
     // must account for <a>, <nuxt-link>, and <button> use-cases
     theHref(): string | undefined {
       let href = undefined
-      if (this.computedTo && typeof this.computedTo === 'string') {
-        href = this.computedTo
-      } else if (this.tag === 'a') {
+      if (this.tag === 'a') {
         href = this.href
       }
       return href

package/src/components/HomepageMissionsCarousel/HomepageMissionsCarousel.vue

@@ -1,104 +1,108 @@
 <template>
-  <section
+  <div
     v-if="data"
-    class="HomepageMissionsCarousel ThemeVariantDark bg-stars max-w-screen-3xl mx-auto overflow-hidden text-white bg-black"
+    class="bg-star-pattern bg-black"
   >
-    <div class="lg:BaseGrid lg:py-24 pt-14 container flex flex-col pb-5 mx-auto">
-      <div class="xl:px-0 lg:col-end-8 xl:col-end-7 order-1 col-start-2 px-4">
-        <p
-          v-if="data.label"
-          class="text-subtitle text-primary edu:text-white mb-3"
-        >
-          {{ data.label }}
-        </p>
-        <BaseHeading
-          v-if="data.heading"
-          level="h2"
-          class="mb-3"
-        >
-          {{ data.heading }}
-        </BaseHeading>
-        <p
-          v-if="data.summary"
-          class="text-body-md"
-        >
-          {{ data.summary }}
-        </p>
-      </div>
-      <div class="lg:order-2 xl:px-0 flex justify-end order-3 col-start-10 col-end-13 px-4">
-        <BaseLink
-          :to="{ name: 'missions' }"
-          variant="primary"
-        >
-          All Missions
-        </BaseLink>
-      </div>
-      <!-- Slider main container -->
-      <div class="lg:order-3 order-2 col-start-2 col-end-12">
-        <div
-          ref="HomepageMissionsCarousel"
-          class="swiper lg:mt-0 lg:mb-0 mb-14 mt-3"
-        >
-          <!-- Additional required wrapper -->
-          <nav
-            :aria-label="data.heading || 'Missions'"
-            class="swiper-wrapper"
+    <section
+      class="HomepageMissionsCarousel ThemeVariantDark max-w-screen-3xl mx-auto overflow-hidden text-white bg-black bg-stars"
+    >
+      <div class="lg:BaseGrid lg:py-24 pt-14 container flex flex-col pb-5 mx-auto">
+        <div class="xl:px-0 lg:col-end-8 xl:col-end-7 order-1 col-start-2 px-4">
+          <p
+            v-if="data.label"
+            class="text-subtitle text-primary edu:text-white mb-3"
           >
-            <!-- slide -->
-            <HomepageMissionsCarouselItem
-              v-for="(item, index) in data.targets"
-              :key="index"
-              :data="item"
-              class="swiper-slide"
-            />
-          </nav>
-          <!-- swiper navigation -->
-          <div class="swiper-navigation xl:block absolute top-0 left-0 hidden w-full">
-            <div class="top-1/2 absolute left-0 z-30">
-              <BaseButton
-                class="swiper-prev xl:text-base -ml-16"
-                :aria-label="data.heading + ' - Previous slide'"
-              >
-                <template #icon>
-                  <span
-                    class="arrow-wrapper"
-                    aria-hidden="true"
-                  >
-                    <span class="arrow">
-                      <IconPrev />
-                    </span>
-                    <span class="arrow-fixed">
-                      <IconPrev />
-                    </span>
-                  </span>
-                </template>
-              </BaseButton>
-            </div>
-            <div class="top-1/2 absolute right-0 z-30">
-              <BaseButton
-                class="swiper-next xl:text-base -mr-16"
-                :aria-label="data.heading + ' - Next slide'"
-              >
-                <template #icon>
-                  <span
-                    class="arrow-wrapper"
-                    aria-hidden="true"
-                  >
-                    <span class="arrow">
-                      <IconNext />
+            {{ data.label }}
+          </p>
+          <BaseHeading
+            v-if="data.heading"
+            level="h2"
+            class="mb-3"
+          >
+            {{ data.heading }}
+          </BaseHeading>
+          <p
+            v-if="data.summary"
+            class="text-body-md"
+          >
+            {{ data.summary }}
+          </p>
+        </div>
+        <div class="lg:order-2 xl:px-0 flex justify-end order-3 col-start-10 col-end-13 px-4">
+          <BaseLink
+            :to="{ name: 'missions' }"
+            variant="primary"
+          >
+            {{ `All Missions` }}
+          </BaseLink>
+        </div>
+        <!-- Slider main container -->
+        <div class="lg:order-3 order-2 col-start-2 col-end-12">
+          <div
+            ref="HomepageMissionsCarousel"
+            class="swiper lg:mt-0 lg:mb-0 mb-14 mt-3"
+          >
+            <!-- Additional required wrapper -->
+            <nav
+              :aria-label="data.heading || 'Missions'"
+              class="swiper-wrapper"
+            >
+              <!-- slide -->
+              <HomepageMissionsCarouselItem
+                v-for="(item, index) in data.targets"
+                :key="index"
+                :data="item"
+                class="swiper-slide"
+              />
+            </nav>
+            <!-- swiper navigation -->
+            <div class="swiper-navigation xl:block absolute top-0 left-0 hidden w-full">
+              <div class="top-1/2 absolute left-0 z-30">
+                <BaseButton
+                  class="swiper-prev xl:text-base -ml-16"
+                  :aria-label="data.heading + ' - Previous slide'"
+                >
+                  <template #icon>
+                    <span
+                      class="arrow-wrapper"
+                      aria-hidden="true"
+                    >
+                      <span class="arrow">
+                        <IconPrev />
+                      </span>
+                      <span class="arrow-fixed">
+                        <IconPrev />
+                      </span>
                     </span>
-                    <span class="arrow-fixed">
-                      <IconNext />
+                  </template>
+                </BaseButton>
+              </div>
+              <div class="top-1/2 absolute right-0 z-30">
+                <BaseButton
+                  class="swiper-next xl:text-base -mr-16"
+                  :aria-label="data.heading + ' - Next slide'"
+                >
+                  <template #icon>
+                    <span
+                      class="arrow-wrapper"
+                      aria-hidden="true"
+                    >
+                      <span class="arrow">
+                        <IconNext />
+                      </span>
+                      <span class="arrow-fixed">
+                        <IconNext />
+                      </span>
                     </span>
-                  </span>
-                </template>
-              </BaseButton>
+                  </template>
+                </BaseButton>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-  </section>
+    </section>
+  </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'

package/src/components/SwimlaneCTA/SwimlaneCTA.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="justify-items-center flex w-full">
+  <div class="justify-items-center flex w-full relative overflow-hidden">
     <BaseLink
       v-if="targetLink"
       class="w-full"
@@ -42,7 +42,9 @@
               </template>
             </div>
             <div class="lg:p-1 text-contrast relative z-20 pt-2 pl-0">
-              <p class="text-secondary lg:text-7xl mb-0 text-4xl font-medium">is a place for</p>
+              <p class="text-secondary text-white lg:text-7xl mb-0 text-4xl font-medium">
+                is a place for
+              </p>
             </div>
           </div>
 
@@ -66,7 +68,7 @@
         :class="'SwimlaneCTA lg:hidden block' + computedClass"
       >
         <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"
+          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 font-primary"
         >
           <div class="lg:flex-row lg:pr-3 lg:pb-0 flex flex-col items-center justify-center pb-2">
             <div class="relative z-20 p-2 pl-0">
@@ -92,7 +94,9 @@
               </template>
             </div>
             <div class="lg:p-1 relative z-20 pt-2 pl-0">
-              <p class="text-secondary text-contrast lg:text-7xl mb-0 text-4xl font-medium">
+              <p
+                class="text-secondary text-white text-contrast lg:text-7xl mb-0 text-4xl font-medium"
+              >
                 is a place for
               </p>
             </div>

package/src/components/TextInput/TextInput.vue

@@ -10,7 +10,7 @@ interface TextInputProps {
   maxlength?: string
   pattern?: string
   title?: string
-  autofocus?: boolean
+  autoFocus?: boolean
   labelClass?: string
   inputClass?: string
 }

package/src/components/TimelineDialog/TimelineDialog.stories.js

@@ -39,7 +39,7 @@ export const BaseStory = {
     setup() {
       return { args }
     },
-    template: `<div>
+    template: `<div style="min-height: 80vh">
     <button type="button" :data-a11y-dialog-show="args.data.id">Open the dialog</button>
     <TimelineDialog :data="args.data" :dialog-box-class="args.dialogBoxClass"></TimelineDialog>
   </div>`

package/src/components/YearTicker/YearTicker.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    v-if="mounted"
     class="YearTicker"
     :style="`--duration:${duration}ms`"
   >
@@ -8,17 +9,19 @@
       v-for="(digit, index) in Array.from(targetYear)"
       :key="index"
       :name="animation"
-      :duration="duration"
+      mode="out-in"
+      tag="span"
     >
       <!-- Key by digit so there can be two digits rendered at the same time. -->
       <span
-        :key="digit"
+        :key="digit + index"
         class="Digit"
         >{{ digit }}</span
       >
     </transition-group>
   </div>
 </template>
+
 <script lang="ts">
 import { defineComponent } from 'vue'
 
@@ -34,17 +37,22 @@ export default defineComponent({
     return {
       year: this.targetYear,
       animation: 'digits-increment',
-      duration: 100
+      duration: 100,
+      mounted: false // Track if the component is mounted
     }
   },
   watch: {
-    targetYear(newYear) {
-      this.animation = this.year > newYear ? 'digits-increment' : 'digits-decrement'
+    targetYear(newYear, oldYear) {
+      this.animation = newYear > oldYear ? 'digits-increment' : 'digits-decrement'
       this.year = newYear
     }
+  },
+  mounted() {
+    this.mounted = true // Set mounted to true after mounting
   }
 })
 </script>
+
 <style lang="scss">
 .YearTicker {
   @apply sticky transform text-gray-light-mid translate-x-0.5 md:translate-x-0 ml-7 md:ml-8 lg:ml-30 pt-10 md:pt-5;
@@ -78,7 +86,7 @@ export default defineComponent({
 
   .header-sticky-showing & {
     // For the mobile viewport, offset by the height of the top header and NavSecondary combined.
-    top: calc(theme('spacing.18') + theme('spacing.16') + var(--top-offset));
+    top: calc(theme('spacing.18') + theme('spacing.16') + var (--top-offset));
   }
 
   &::after {
@@ -103,7 +111,6 @@ export default defineComponent({
   }
 
   .Digit {
-    // Force all digits in the same cell so they superpose.
     grid-area: 1 / 1 / 1 / 1;
     transition: transform var(--duration);
     transform: translateY(0);
@@ -112,6 +119,7 @@ export default defineComponent({
       transition-duration: 0.1ms;
     }
   }
+
   // transitions
   .digits-decrement-enter-active {
     transform: translateY(100%);

package/src/templates/www/PageTimeline/PageTimeline.vue

@@ -1,114 +1,29 @@
-<template>
-  <div
-    v-if="data"
-    class="-nav-offset"
-  >
-    <HeroLarge
-      :title="data.heroTitle"
-      :summary="data.heroSummary"
-      :image="data.heroImage"
-      has-overlay
-    />
-    <!--
-    /**
-     * This page contains a lot of overlapping elements. Layers from highest to lowest:
-     * - TimelineDialog
-     * - Dropdown menus within NavSecondary
-     * - BackToTop, Main navigation, NavSecondary
-     * - (YearTicker on mobile viewport)
-     * - Milestone cards (BlockMilestone / BlockCircleImageCard)
-     * - VerticalLine
-     * - Milestone background images
-     * - (YearTicker on desktop viewport)
-     */ -->
-    <NavSecondary>
-      <!-- Use a fixed height to simplify sticky positioning. -->
-      <div class="w-full flex gap-4 align-content h-16">
-        <!-- Use a SearchSelectMenu for consistency with the "sort by" dropdown. -->
-        <SearchSelectMenu
-          v-model="jumpTo"
-          v-model:select-value="jumpTo"
-          class="flex"
-          :options="getJumpDecades()"
-          title="Jump to"
-          group-key="jumpTo"
-        />
-        <SearchSelectMenu
-          v-model="sortBy"
-          v-model:select-value="sortBy"
-          class="flex"
-          :options="sortByOptions"
-          title="Sort by"
-          group-key="sortBy"
-        />
-      </div>
-    </NavSecondary>
-    <YearTicker :target-year="currentYear as string" />
-    <h2 class="sr-only">Milestones</h2>
-    <ParallaxContainer
-      class="MilestoneList BaseGrid"
-      :style="{ '--rows': milestones.length }"
-    >
-      <div
-        v-for="(milestone, index) in milestones"
-        :id="`milestone-${milestone.date}`"
-        :key="`${milestone.id}-fg`"
-        class="MilestoneListItem"
-        :style="{ '--row': index + 1 }"
-        :data-milestone-year="milestone.date.split('-')[0]"
-      >
-        <ParallaxElement
-          v-if="milestone.backgroundImage"
-          class="MilestoneImageWrapper"
-          :factor="index % 2 === 0 ? 0.18 : 0.22"
-          :offset="index * 80"
-        >
-          <img
-            class="MilestoneImage"
-            :src="milestone.backgroundImage.src.url"
-            :width="milestone.backgroundImage.src.width"
-            :height="milestone.backgroundImage.src.height"
-            :srcset="`${milestone.backgroundImage.screenMd.url} ${milestone.backgroundImage.screenMd.width}w ${milestone.backgroundImage.src.url} ${milestone.backgroundImage.src.width}w`"
-            :style="{
-              // Shift images left or right based on column, and then by a variable amount to create a staggered effect.
-              '--x-translate': `${(index % 2 === 0 ? 180 : -130) + 10 * (index % 3)}%`
-            }"
-            alt=""
-          />
-        </ParallaxElement>
-        <BlockMilestone
-          :data="milestone"
-          :handle-click="showMilestone"
-        />
-      </div>
-      <div class="VerticalLine"></div>
-    </ParallaxContainer>
-    <BackToTop
-      class="fixed right-10 bottom-10"
-      :threshold="900"
-      @click="handleBackToTop()"
-    />
-
-    <TimelineDialog
-      v-if="activeMilestone"
-      :data="activeMilestone"
-      dialog-box-class="sm:max-w-xl md:max-w-3xl"
-      @hide="() => (activeMilestone = null)"
-    ></TimelineDialog>
-  </div>
-</template>
 <script lang="ts">
+// PageTimeline.vue - Timeline component for displaying milestones.
 import { defineComponent, type PropType } from 'vue'
 import BackToTop from './../../../components/BackToTop/BackToTop.vue'
 import BlockMilestone, { Milestone } from './BlockMilestone.vue'
 import HeroLarge from './../../../components/HeroLarge/HeroLarge.vue'
 import NavSecondary from './../../../components/NavSecondary/NavSecondary.vue'
+// Use a SearchSelectMenu for consistency with the "sort by" dropdown.
 import SearchSelectMenu from './../../../components/SearchSelectMenu/SearchSelectMenu.vue'
 import TimelineDialog from './../../../components/TimelineDialog/TimelineDialog.vue'
 import YearTicker from './../../../components/YearTicker/YearTicker.vue'
 import ParallaxContainer from './../../../components/ParallaxContainer/ParallaxContainer.vue'
 import ParallaxElement from './../../../components/ParallaxElement/ParallaxElement.vue'
 
+/**
+ * This page contains a lot of overlapping elements. Layers from highest to lowest:
+ * - TimelineDialog
+ * - Dropdown menus within NavSecondary
+ * - BackToTop, Main navigation, NavSecondary
+ * - (YearTicker on mobile viewport)
+ * - Milestone cards (BlockMilestone / BlockCircleImageCard)
+ * - VerticalLine
+ * - Milestone background images
+ * - (YearTicker on desktop viewport)
+ */
+
 type SortBy = '' | 'latestDate' | 'oldestDate'
 
 type Decades = {
@@ -243,7 +158,8 @@ export default defineComponent({
     },
     getJumpDecades() {
       const decades: Decades = {
-        Top: ''
+        // uppercase string to avoid conflict with the lowercase 's' in the decade
+        TOP: ''
       }
 
       this.milestones.forEach((milestone) => {
@@ -301,16 +217,112 @@ export default defineComponent({
   }
 })
 </script>
+
+<template>
+  <div
+    v-if="data"
+    class="-nav-offset"
+  >
+    <HeroLarge
+      :title="data.heroTitle"
+      :summary="data.heroSummary"
+      :image="data.heroImage"
+      has-overlay
+    />
+
+    <NavSecondary>
+      <!-- Use a fixed height to simplify sticky positioning. -->
+      <div class="w-full flex gap-4 align-content h-16">
+        <SearchSelectMenu
+          v-model="jumpTo"
+          v-model:select-value="jumpTo"
+          class="flex"
+          :options="getJumpDecades()"
+          title="JUMP TO"
+          group-key="jumpTo"
+        />
+        <SearchSelectMenu
+          v-model="sortBy"
+          v-model:select-value="sortBy"
+          class="flex"
+          :options="sortByOptions"
+          title="SORT BY"
+          group-key="sortBy"
+        />
+      </div>
+    </NavSecondary>
+    <YearTicker :target-year="currentYear as string" />
+    <h2 class="sr-only">Milestones</h2>
+    <ParallaxContainer
+      class="MilestoneList BaseGrid"
+      :style="{ '--rows': milestones.length }"
+    >
+      <div
+        v-for="(milestone, index) in milestones"
+        :id="`milestone-${milestone.date}`"
+        :key="`${milestone.id}-fg`"
+        class="MilestoneListItem"
+        :style="{ '--row': index + 1 }"
+        :data-milestone-year="milestone.date.split('-')[0]"
+      >
+        <ParallaxElement
+          v-if="milestone.backgroundImage"
+          class="MilestoneImageWrapper"
+          :factor="0.18"
+          :offset="index * 80"
+        >
+          <img
+            class="MilestoneImage"
+            :src="milestone.backgroundImage.src.url"
+            :width="milestone.backgroundImage.src.width"
+            :height="milestone.backgroundImage.src.height"
+            :srcset="`${milestone.backgroundImage.screenMd.url} ${milestone.backgroundImage.screenMd.width}w ${milestone.backgroundImage.src.url} ${milestone.backgroundImage.src.width}w`"
+            :style="{
+              // Shift images left or right based on column, and then by a variable amount to create a staggered effect.
+              '--x-translate': `${(index % 2 === 0 ? 180 : -130) + 10 * (index % 3)}%`
+            }"
+            alt=""
+          />
+        </ParallaxElement>
+        <BlockMilestone
+          :data="milestone"
+          :handle-click="showMilestone"
+        />
+      </div>
+      <div class="VerticalLine"></div>
+    </ParallaxContainer>
+    <BackToTop
+      class="fixed right-10 bottom-10"
+      :threshold="900"
+      @click="handleBackToTop()"
+    />
+
+    <TimelineDialog
+      v-if="activeMilestone"
+      :data="activeMilestone"
+      dialog-box-class="sm:max-w-xl md:max-w-3xl"
+      @hide="() => (activeMilestone = null)"
+    ></TimelineDialog>
+  </div>
+</template>
+
 <style lang="scss">
 $line-width: 2px;
 $column-gap-width: 1.5rem;
 
+// makes the years able to have a lowercase 's' in the decade
+select {
+  &#select_jumpTo {
+    text-transform: none;
+  }
+}
+
 .NavSecondary {
   @apply block;
 }
 
 .MilestoneList {
-  @apply gap-y-0;
+  @apply gap-y-0 max-w-screen-4xl mx-auto;
 
   // Offset the list up so the vertical line starts from the secondary nav.
   @screen md {
@@ -347,6 +359,10 @@ $column-gap-width: 1.5rem;
   transform: translateX($line-width);
   grid-row: var(--row);
 
+  &:nth-of-type(1) {
+    @apply md:pt-20;
+  }
+
   &:nth-of-type(even) {
     @apply md:justify-start md:col-start-7;
 
@@ -369,7 +385,7 @@ $column-gap-width: 1.5rem;
 }
 
 .VerticalLine {
-  @apply border-l border-r border-jpl-red top-5 md:top-0 bottom-0 col-start-3 md:col-start-7;
+  @apply border-l border-r border-jpl-red top-5 md:top-2 bottom-0 col-start-3 md:col-start-7 mb-12;
 
   // Use CSS grid positioning rather than position absolute within relative,
   // so we don’t create a new stacking context within the ParallaxContainer.
@@ -384,5 +400,11 @@ $column-gap-width: 1.5rem;
     border-image-slice: 1;
     transform: translateX(-1 * $column-gap-width);
   }
+
+  &::before {
+    @apply absolute -top-px -left-2px w-1 h-30 bg-gradient-to-b from-white to-transparent;
+
+    content: '';
+  }
 }
 </style>