@explorer-1/vue 1.0.5 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @explorer-1/vue
 
+## 1.1.0
+
+### Minor Changes
+
+- 582fa5e: Updating to Node 24. Updating dependencies.
+
+### Patch Changes
+
+- Updated dependencies [582fa5e]
+  - @explorer-1/common@2.1.0
+
+## 1.0.6
+
+### Patch Changes
+
+- 496d4fe: Adjusting usage of font-display in tables and secondary nav. Adjusting layout of Block CSR Table.
+- Updated dependencies [496d4fe]
+  - @explorer-1/common@2.0.4
+
 ## 1.0.5
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -13,37 +13,38 @@
   "type": "module",
   "prettier": "@explorer-1/prettier-config",
   "dependencies": {
-    "@fancyapps/ui": "^4.0.26",
-    "@tailwindcss/forms": "^0.5.7",
-    "ag-grid-vue3": "^33.2.0",
-    "animejs": "^3.2.2",
+    "@fancyapps/ui": "^6.1.11",
+    "@tailwindcss/forms": "^0.5.11",
+    "ag-grid-vue3": "^35.0.1",
+    "animejs": "^4.3.5",
     "click-outside-vue3": "^4.0.1",
     "datebook": "^8.0.1",
-    "dayjs": "^1.11.11",
-    "fast-qs": "^2.0.3",
-    "lodash": "^4.17.21",
+    "dayjs": "^1.11.19",
+    "fast-qs": "^2.1.2",
+    "lodash": "^4.17.23",
     "mitt": "^3.0.1",
-    "sass": "^1.77.4",
-    "swiper": "^11.1.3",
-    "tailwindcss": "^3.4.3",
+    "sass": "^1.97.3",
+    "swiper": "^12.1.2",
+    "tailwindcss": "^3.4.19",
     "twitter-widgets": "^2.0.0",
-    "vue": "^3.5.3",
+    "vue": "^3.5.28",
     "vue-bind-once": "^0.2.1",
+    "vue-router": "^5.0.2",
     "vue3-compare-image": "^1.2.5",
-    "vue3-observe-visibility": "^1.0.1",
-    "@explorer-1/common": "2.0.3"
+    "vue3-observe-visibility": "^1.0.4",
+    "@explorer-1/common": "2.1.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.4",
-    "a11y-dialog": "^8.1.0",
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.38",
-    "postcss-import": "^16.1.0",
-    "typescript": "^5.4.5",
-    "unplugin-vue-components": "^0.27.0",
-    "vite": "^5.3.1",
-    "vite-plugin-dts": "^3.9.1",
-    "vue-tsc": "^2.0.6",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "a11y-dialog": "^8.1.5",
+    "autoprefixer": "^10.4.24",
+    "postcss": "^8.5.6",
+    "postcss-import": "^16.1.1",
+    "typescript": "^5.9.3",
+    "unplugin-vue-components": "^31.0.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vue-tsc": "^3.2.4",
     "@explorer-1/prettier-config": "1.0.0"
   },
   "storybook": {

package/src/components/BlockAccordion/BlockAccordion.vue

@@ -26,7 +26,7 @@ export interface AccordionBlockObject {
   accordionItemsHeadingLevel: string
   accordionItems: AccordionItemBlock[]
 }
-interface BlockAccordionProps {
+export interface BlockAccordionProps {
   data: AccordionBlockObject
 }
 

package/src/components/BlockCsrTable/BlockCsrTable.stories.js

@@ -28,7 +28,8 @@ export const BlockCsrTableData = [
         TotalDose: '200',
         DoseRate: null,
         TotalFluence: null,
-        LETthOrEnergy: null,
+        LETthOrEnergy:
+          ' >= Single Event Gate Rupture (SEGR), Single Event Latchup (SEL) - Screen, Single Event Transient (SET), Single Event Burnout (SEB), Single Event Function Interrupt (SEFI) <= 61.6',
         Rates: null,
         Fluence: null,
         Energy: null,

package/src/components/BlockCsrTable/BlockCsrTable.vue

@@ -17,7 +17,7 @@ import { AgGridVue } from 'ag-grid-vue3'
 ModuleRegistry.registerModules([AllCommunityModule])
 ModuleRegistry.registerModules([ValidationModule])
 
-interface BlockCsrTableProps {
+export interface BlockCsrTableProps {
   rowData?: BlockCsrTableRow[]
   attachmentPrefix?: string
   apiEndpoint?: string
@@ -75,7 +75,7 @@ const theme = themeMaterial.withParams({
 })
 
 const headerClass = [
-  'min-w-[6rem] bg-jpl-blue-darker edu:bg-jpl-violet-darker font-display text-white text-sm border-gray-light-mid lg:p-5 p-3 border-b text-left'
+  'min-w-[6rem] bg-jpl-blue-darker edu:bg-jpl-violet-darker font-secondary text-white text-sm border-gray-light-mid lg:p-5 p-3 border-b text-left'
 ]
 const defaultcolDef = {
   flex: 1,

package/src/components/BlockCsrTable/CsrTestLimitsTable.vue

@@ -21,8 +21,9 @@ withDefaults(defineProps<CsrTestLimitsTableProps>(), {
 })
 
 const headerClass = [
-  'bg-jpl-blue-darker edu:bg-jpl-violet-darker text-subtitle text-white text-xs border-gray-light-mid px-3 border-b text-left'
+  'bg-jpl-blue-darker edu:bg-jpl-violet-darker font-secondary text-white text-sm border-gray-light-mid px-3 border-b text-left'
 ]
+// @ts-ignore
 const CsrTestLimitsTableRef = ref()
 const theme = themeMaterial.withParams({
   accentColor: 'rgb(25 156 227)', // jpl-blue-light
@@ -36,17 +37,21 @@ const colDefs = ref([
     flex: 0,
     width: 50
   },
-  { field: 'TotalDose' },
-  { field: 'DoseRate' },
-  { field: 'TotalFluence' },
+  { field: 'TotalDose', wrapText: true, autoHeight: true },
+  { field: 'DoseRate', wrapText: true, autoHeight: true },
+  { field: 'TotalFluence', wrapText: true, autoHeight: true },
   {
     field: 'LETthOrEnergy',
+    wrapText: true,
+    autoHeight: true,
     headerName: 'LETth or Energy Range'
   },
   {
-    field: 'Fluence'
+    field: 'Fluence',
+    wrapText: true,
+    autoHeight: true
   },
-  { field: 'Energy' }
+  { field: 'Energy', wrapText: true, autoHeight: true }
 ])
 const defaultcolDef = {
   flex: 1,

package/src/components/BlockGist/BlockGist.vue

@@ -9,11 +9,12 @@ export interface BlockGistData extends BlockData {
   id?: string
   url?: string
 }
-interface BlockGistProps {
+export interface BlockGistProps {
   data: BlockGistData
 }
 
 const props = defineProps<BlockGistProps>()
+// @ts-ignore
 const frame = ref()
 const loaded = ref(false)
 const checkGistLoaded = async () => {

package/src/components/BlockLinkCard/BlockLinkCardCollectionLg.vue

@@ -8,7 +8,7 @@ import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder
 import BasePill from './../BasePill/BasePill.vue'
 import MetadataEduResource from './../MetadataEduResource/MetadataEduResource.vue'
 
-interface BlockLinkCardCollectionLgProps {
+export interface BlockLinkCardCollectionLgProps {
   theItem?: EduResourceCardObject
   metadataType?: ContentTypeKey
   metadataAttrs?: any

package/src/components/BlockRichTable/BlockRichTable.vue

@@ -54,7 +54,7 @@ export default defineComponent({
               v-for="(headCell, headIndex) in table.tableContent.tableHead[0]"
               :key="headIndex"
               scope="col"
-              class="min-w-[6rem] bg-jpl-blue-darker edu:bg-jpl-violet-darker font-display text-white border-gray-light-mid lg:p-5 p-3 border-b text-left"
+              class="min-w-[6rem] bg-jpl-blue-darker edu:bg-jpl-violet-darker font-secondary text-sm text-white border-gray-light-mid lg:p-5 p-3 border-b text-left"
             >
               <template v-if="headCell">
                 {{ (headCell as HeadCell).text }}

package/src/components/CalendarChip/CalendarChip.vue

@@ -4,7 +4,7 @@ import { useThemeStore } from '../../store/theme'
 import { mixinFormatSplitEventDates } from './../../utils/mixins'
 const themeStore = useThemeStore()
 
-interface CalendarChipProps {
+export interface CalendarChipProps {
   startDate?: string
   endDate?: string
   ongoing?: boolean

package/src/components/HeroInlineMedia/HeroInlineMedia.vue

@@ -12,7 +12,7 @@ import BlockImageStandard from './../BlockImage/BlockImageStandard.vue'
 import BlockVideo, { type BlockVideoData } from './../BlockVideo/BlockVideo.vue'
 import type { StreamfieldBlockData } from './../../interfaces'
 
-interface HeroInlineMediaProps {
+export interface HeroInlineMediaProps {
   heroBlocks: StreamfieldBlockData[]
   constrain?: boolean
 }

package/src/components/MetadataEduResource/MetadataEduResource.vue

@@ -8,7 +8,7 @@ import IconProfile from './../Icons/IconProfile.vue'
 import IconTime from './../Icons/IconTime.vue'
 import { rangeifyGrades } from './../../utils/rangeifyGrades'
 
-interface MetadataEduResourceProps {
+export interface MetadataEduResourceProps {
   resource: EduResourceCardObject
   /** If compact styling should be used */
   compact?: boolean

package/src/components/MetadataEvent/MetadataEvent.vue

@@ -9,7 +9,7 @@ import IconLocation from './../Icons/IconLocation.vue'
 import { mixinFormatEventDates, mixinFormatEventTimeInHoursAndMinutes } from './../../utils/mixins'
 const themeStore = useThemeStore()
 
-interface MetadataEventProps {
+export interface MetadataEventProps {
   event: EventCardObject
   compact?: boolean
   allowBreak?: boolean

package/src/components/MissionDetailHighlights/MissionDetailHighlights.vue

@@ -168,7 +168,13 @@ import _throttle from 'lodash/throttle.js'
 import type { DebouncedFunc } from 'lodash'
 import type { Slide } from './MissionDetailHighlightsCarouselItem.vue'
 // @ts-ignore
-import anime from 'animejs'
+import {
+  animate,
+  createDrawable,
+  createMotionPath,
+  createTimeline,
+  type TargetsParam
+} from 'animejs'
 import MissionDetailHighlightsCarousel from './MissionDetailHighlightsCarousel.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 
@@ -254,32 +260,31 @@ export default defineComponent({
       this.lineFollower()
     },
     drawLine() {
-      anime({
-        targets: this.$refs.missionHighlightsPath,
-        strokeDashoffset: [anime.setDashoffset, 0],
-        easing: 'easeInOutSine',
+      animate(createDrawable(this.$refs.missionHighlightsPath as TargetsParam), {
+        draw: '0 1',
+        ease: 'easeInOutSine',
         duration: 2000,
-        delay(_: HTMLElement, i: number) {
-          return i * 250
+        delay(_: any, i: number) {
+          return (i * 250) as any
         },
-        direction: 'alternate',
+        alternate: true,
         loop: false
       })
     },
     lineFollower() {
-      const path = anime.path(this.$refs.missionHighlightsPath as SVGElement)
-      const tl = anime.timeline()
-      tl.add({
-        targets: this.$refs.missionHighlightsMovingDot,
-        translateX: path('x'),
-        translateY: path('y'),
-        easing: 'easeInOutSine',
+      const { translateX, translateY } = createMotionPath(
+        this.$refs.missionHighlightsPath as SVGElement
+      )
+      const tl = createTimeline()
+      tl.add(this.$refs.missionHighlightsMovingDot as TargetsParam, {
+        ease: 'easeInOutSine',
         duration: 2000,
-        loop: false
+        loop: false,
+        x: translateX,
+        y: translateY
       })
-      tl.add({
-        targets: this.$refs.missionHighlightsTitle,
-        easing: 'easeInOutSine',
+      tl.add(this.$refs.missionHighlightsTitle as TargetsParam, {
+        ease: 'easeInOutSine',
         duration: 250,
         opacity: ['0', '1'],
         loop: false

package/src/components/MixinFancybox/MixinFancybox.vue

@@ -1,9 +1,8 @@
 <script lang="ts">
 // @ts-nocheck
 import { defineComponent } from 'vue'
-import { Fancybox } from '@fancyapps/ui'
-import { Fullscreen } from '@fancyapps/ui/src/shared/utils/Fullscreen.js'
-import '@fancyapps/ui/dist/fancybox.css'
+import { Fancybox, Fullscreen } from '@fancyapps/ui'
+import '@fancyapps/ui/dist/fancybox/fancybox.css'
 import MixinFancyboxOpenButton from './MixinFancyboxOpenButton.vue'
 
 export const fancyboxThemes = {

package/src/components/NavDesktop/NavDesktopDropdown.vue

@@ -3,7 +3,7 @@
     <NavDropdownToggle
       v-click-outside="closeDropdown"
       :aria-expanded="dropdownVisible ? true : false"
-      class="group relative z-20 px-4 font-bold font-text tracking-[-.2px] border-t-2 border-transparent edu:text-sm edu:xl:text-base edu:px-2 edu:xl:px-4"
+      class="group relative z-20 px-4 font-bold font-text tracking-[-.03rem] border-t-2 border-transparent edu:text-sm edu:xl:text-base edu:px-2 edu:xl:px-4"
       :class="{
         '-open': dropdownVisible
       }"

package/src/components/NavDesktop/NavDesktopDropdownMore.vue

@@ -53,7 +53,7 @@
         <div
           v-for="(highlight, index) in highlightsColumn.highlights"
           :key="index"
-          :class="{ 'mb-10': index + 1 !== highlightsColumn.highlights.length }"
+          :class="{ 'mb-10': Number(index) + 1 !== highlightsColumn.highlights.length }"
         >
           <NavHighlight :highlight="highlight.highlight" />
         </div>

package/src/components/NavJumpMenu/NavJumpMenu.vue

@@ -37,7 +37,7 @@
   </NavSecondary>
 </template>
 <script setup lang="ts">
-import { computed, defineExpose, ref, onMounted, onUnmounted, watch } from 'vue'
+import { computed, ref, onMounted, onUnmounted, watch } from 'vue'
 import { mixinUpdateSecondary } from './../../utils/mixins'
 import { useRoute } from 'vue-router'
 import NavSecondary from './../NavSecondary/NavSecondary.vue'
@@ -49,7 +49,7 @@ import type { BlockTextObject } from './../BlockText/BlockText.vue'
 import type { BlockData, BreadcrumbPathObject, StreamfieldBlockData } from './../../interfaces'
 import { getHeadingId } from '../../utils/getHeadingId'
 
-interface NavJumpMenuProps {
+export interface NavJumpMenuProps {
   title?: string
   jumpLinks?: BreadcrumbPathObject[]
   blocks?: (StreamfieldBlockData | BlockData | BlockHeadingObject | BlockTextObject)[]

package/src/components/NavJumpMenu/NavJumpMenuContent.vue

@@ -15,7 +15,7 @@
             v-if="$attrs['steps-numbering']"
             :class="$attrs['steps-classes']"
             aria-hidden
-            >{{ `Step ${index + 1}:` }}</span
+            >{{ `Step ${Number(index) + 1}:` }}</span
           >
           {{ child.title }}
         </span>

package/src/components/NavSearchForm/NavSearchForm.vue

@@ -6,7 +6,7 @@ import SearchInput from './../SearchInput/SearchInput.vue'
 const router = useRouter()
 const themeStore = useThemeStore()
 
-interface NavSearchFormProps {
+export interface NavSearchFormProps {
   mobile?: boolean
   placeholder?: string
 }

package/src/components/NavSecondary/NavSecondaryDropdown.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-click-outside="closeDropdown"
-    class="NavSecondaryDropdown relative font-display"
+    class="NavSecondaryDropdown relative font-primary tracking-[-.03rem]"
     :class="{
       'mr-auto': index === 0
     }"

package/src/components/NavSecondary/NavSecondaryLink.vue

@@ -2,7 +2,7 @@
   <BaseLink
     :href="isExternal(item.path) ? item.path : undefined"
     :to="!isExternal(item.path) ? item.path : undefined"
-    link-class="block px-3 py-2 font-display"
+    link-class="block px-3 py-2 font-primary tracking-[-.03rem]"
     variant="none"
     class="NavSecondaryLink border-t-2 border-transparent"
     :class="baseLinkClasses(index)"

package/src/components/RoboticsDetailStats/RoboticsDetailStats.vue

@@ -127,9 +127,9 @@ export default defineComponent({
     hasContent(): boolean {
       return Boolean(
         this.allStats.length > 0 ||
-          this.status !== '' ||
-          this.robotDestinations.length > 0 ||
-          this.animalAnalogIcon
+        this.status !== '' ||
+        this.robotDestinations.length > 0 ||
+        this.animalAnalogIcon
       )
     },
     allStats(): AlternativeStat[] {

package/src/components/SearchResultsList/SearchResultsList.vue

@@ -116,7 +116,7 @@ export default defineComponent({
     }
   },
   computed: {
-    results(): ElasticSearchPage[] {
+    results(): ElasticSearchPage[] | undefined {
       function parseType(type: string): string {
         return type.toLowerCase().replace('.', '_')
       }

package/src/components/ShareButtonsEdu/ShareButtonsEdu.vue

@@ -11,7 +11,7 @@ import IconSocialPinterest from './../Icons/IconSocialPinterest.vue'
 import IconSocialTwitter from './../Icons/IconSocialTwitter.vue'
 import { mixinCanonicalUrl } from '../../utils/mixins'
 
-interface ShareButtonsEduProps {
+export interface ShareButtonsEduProps {
   title: string
   url: string
   image?: string

package/src/components/TextArea/TextArea.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-interface TextAreaProps {
+export interface TextAreaProps {
   inputName: string
   label: string
   cols?: number
@@ -25,6 +25,7 @@ const props = withDefaults(defineProps<TextAreaProps>(), {
 const emit = defineEmits(['input', 'esc'])
 
 const model = defineModel({ type: String })
+// @ts-ignore
 const TextAreaRef = ref(undefined)
 const isFocused = ref(false)
 

package/src/components/TextInput/TextInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
-interface TextInputProps {
+export interface TextInputProps {
   inputName: string
   type?: string
   required?: boolean

package/src/main.ts

@@ -7,7 +7,7 @@ import filters from './utils/filters'
 import vClickOutside from 'click-outside-vue3'
 import VueCompareImage from 'vue3-compare-image'
 import { BindOncePlugin } from 'vue-bind-once'
-import './assets/scss/styles-with-fonts.scss'
+import '@explorer-1/common/src/scss/styles-with-fonts.scss'
 import App from './App.vue'
 
 const pinia = createPinia()

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, defineExpose } from 'vue'
+import { computed, ref } from 'vue'
 import isEmpty from 'lodash/isEmpty.js'
 import type { AuthorObject, ImageObject, PageObject } from './../../../interfaces'
 import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'

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

@@ -244,7 +244,7 @@ const computedClass = computed((): string => {
   >
     <NavJumpMenu
       v-if="stepHeadings?.length"
-      :key="route.fullPath"
+      :key="route ? route.fullPath : undefined"
       ref="PageEduStudentProjectJumpMenu"
       :title="data.title"
       :blocks="stepHeadings"

package/vite.config.ts

@@ -19,8 +19,6 @@ export default defineConfig({
     preprocessorOptions: {
       scss: {
         silenceDeprecations: [
-          // Deprecation Warning: https://sass-lang.com/d/mixed-decls
-          'mixed-decls',
           // Deprecation Warning: https://sass-lang.com/d/import
           'import',
           // Deprecation Warning: https://sass-lang.com/d/legacy-js-api