@explorer-1/vue 0.2.87 → 0.2.88

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @explorer-1/vue
+
+## 0.2.88
+
+### Patch Changes
+
+- 9324948: upgrades packages to match www/frontend, fixes misc bugs for edu launch

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.87",
+  "version": "0.2.88",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -14,35 +14,36 @@
   "prettier": "@explorer-1/prettier-config",
   "dependencies": {
     "@fancyapps/ui": "^4.0.26",
-    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/forms": "^0.5.9",
     "animejs": "^3.2.2",
     "click-outside-vue3": "^4.0.1",
     "datebook": "^8.0.1",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.13",
     "fast-qs": "^2.0.3",
     "lodash": "^4.17.21",
     "mitt": "^3.0.1",
-    "sass": "^1.77.4",
+    "sass": "^1.80.5",
     "swiper": "^11.1.3",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.14",
     "twitter-widgets": "^2.0.0",
-    "vue": "^3.5.3",
+    "vue": "^3.5.12",
     "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5",
-    "vue3-observe-visibility": "^1.0.1",
+    "vue3-observe-visibility": "^1.0.2",
     "@explorer-1/common": "1.1.23"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.4",
-    "a11y-dialog": "^8.1.0",
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.38",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "a11y-dialog": "^8.1.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.14.0",
+    "postcss": "^8.4.47",
     "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",
+    "typescript": "^5.6.3",
+    "unplugin-vue-components": "^0.27.4",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.3.0",
+    "vue-tsc": "^2.1.10",
     "@explorer-1/prettier-config": "1.0.0"
   },
   "scripts": {

package/src/components/BlockImageCarousel/BlockImageCarousel.vue

@@ -52,7 +52,7 @@
         >
           <span
             class="inline-block w-3 h-3 rounded-full"
-            :class="currentIndex === index ? 'bg-jpl-red' : 'bg-gray-light-mid'"
+            :class="currentIndex === index ? 'bg-primary' : 'bg-gray-light-mid'"
           ></span>
         </button>
       </div>
@@ -60,17 +60,17 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
-import type { PropType } from 'vue'
+import swiperOptions from '@explorer-1/common/src/js/_swiperOptions'
 import Swiper from 'swiper'
 import { A11y, Navigation } from 'swiper/modules'
 import type { SwiperOptions } from 'swiper/types'
-import swiperOptions from '@explorer-1/common/src/js/_swiperOptions'
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import type { ImageObject } from '../../interfaces'
+import BaseButton from './../BaseButton/BaseButton.vue'
 import BlockImageCarouselItem from './../BlockImageCarouselItem/BlockImageCarouselItem.vue'
-import IconPrev from './../Icons/IconPrev.vue'
 import IconNext from './../Icons/IconNext.vue'
-import BaseButton from './../BaseButton/BaseButton.vue'
-import type { ImageObject } from '../../interfaces'
+import IconPrev from './../Icons/IconPrev.vue'
 const BlockImageCarouselOptions = swiperOptions.BlockImageCarousel
 
 Swiper.use([Navigation, A11y])

package/src/components/MetaPanel/MetaPanel.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue'
 import {
-  MetaPanelTheme,
   EduResourcesGradeLevel,
-  EduResourceStandardItem,
   EduResourcesSubject,
-  EduResourcesTime
+  EduResourceStandardItem,
+  EduResourcesTime,
+  MetaPanelTheme
 } from './../../interfaces'
-import MetaPanelAccordion from './../MetaPanelAccordion/MetaPanelAccordion.vue'
-import MetaPanelItems from './../MetaPanelItems/MetaPanelItems.vue'
+import BaseButton from './../BaseButton/BaseButton.vue'
 import IconMinus from './../Icons/IconMinus.vue'
 import IconPlus from './../Icons/IconPlus.vue'
-import BaseButton from './../BaseButton/BaseButton.vue'
+import MetaPanelAccordion from './../MetaPanelAccordion/MetaPanelAccordion.vue'
+import MetaPanelItems from './../MetaPanelItems/MetaPanelItems.vue'
 
 interface MetaPanelProps {
   button?: string
@@ -117,8 +117,8 @@ const standardsIste = computed(() => {
     aria-label="Metadata"
     class="MetaPanel z-20 relative overflow-hidden"
     :class="{
-      '-mt-14': negativeTop,
-      '-mb-14': negativeBottom
+      '-mt-4 lg:-mt-10 xl:-mt-14': negativeTop,
+      '-mb-4 lg:-mb-10 xl:-mb-14': negativeBottom
     }"
   >
     <div class="MixedBleedGrid pl-4 lg:pl-0">

package/src/components/MixinFancybox/MixinFancybox.vue

@@ -1,9 +1,12 @@
+<!-- eslint-disable vue/require-explicit-emits -->
+<!-- eslint-disable vue/require-default-prop -->
 <script lang="ts">
+// MixinFancybox.vue
 // @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 { Fullscreen } from '@fancyapps/ui/src/shared/utils/Fullscreen.js'
+import { defineComponent } from 'vue'
 import MixinFancyboxOpenButton from './MixinFancyboxOpenButton.vue'
 
 export const fancyboxThemes = {

package/src/components/SearchInput/SearchInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import IconSearch from './../Icons/IconSearch.vue'
 
 interface SearchInputProps {
@@ -69,7 +69,7 @@ onMounted(() => {
     <input
       ref="searchQueryRef"
       v-model="model"
-      class="pl-14 h-full focus:ring-2 relative z-10 w-full px-5 text-sm md:text-base lg:text-lg bg-transparent border-0"
+      class="pl-14 h-full focus:ring-2 relative z-10 w-full px-5 text-base lg:text-lg bg-transparent border-0"
       :class="{
         'text-gray-dark': defaultColors,
         'py-1': underlinedInput,
@@ -95,6 +95,13 @@ onMounted(() => {
   </div>
 </template>
 <style lang="scss" scoped>
+input[type='search'] {
+  transform: scale(0.875);
+  transform-origin: left;
+  @media screen and (min-width: 1024px) {
+    transform: scale(1);
+  }
+}
 .custom-focus {
   input {
     outline: none;

package/src/components/TheFooter/TheFooterSignUp.vue

@@ -3,7 +3,7 @@
     <div class="border-opacity-40 relative flex items-center border border-white">
       <input
         v-model="email"
-        class="EmailInput border-0 text-opacity-90 pl-14 relative z-10 w-full py-3 pr-3 text-sm text-white bg-transparent"
+        class="EmailInput text-base border-0 text-opacity-90 pl-14 relative z-10 w-full py-3 pr-3 text-white bg-transparent"
         type="email"
         name="email"
         required
@@ -57,5 +57,9 @@ export default defineComponent({
   .EmailInput::placeholder {
     @apply text-white text-opacity-40;
   }
+  input[type='email'].EmailInput {
+    transform: scale(0.875);
+    transform-origin: left;
+  }
 }
 </style>

package/src/templates/edu/PageEduLesson/PageEduLessonSection.vue

@@ -1,15 +1,15 @@
 <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 { EduLessonProcedure } from './PageEduLesson.vue'
-import BaseHeading from './../../../components/BaseHeading/BaseHeading.vue'
-import BlockText from './../../../components/BlockText/BlockText.vue'
-import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
 import BlockImageStandard from './../../../components/BlockImage/BlockImageStandard.vue'
 import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+import BlockText from './../../../components/BlockText/BlockText.vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import type { ImageObject, StreamfieldBlockData } from './../../../interfaces'
+import type { EduLessonProcedure } from './PageEduLesson.vue'
 
 export interface PageEduLessonSectionProps {
   heading?: BlockHeadingObject
@@ -135,7 +135,8 @@ const { heading, blocks, image, procedures, text } = reactive(props)
       }
     }
     ol.PageEduProcedureSectionSingleStep {
-      @apply list-none;
+      @apply list-none indent-7 pr-4 xl:indent-0.5 xl:pr-0.5;
+      text-wrap: pretty;
       > li {
         @apply relative w-full;
         counter-increment: step;