@explorer-1/vue 1.1.7 → 1.1.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @explorer-1/vue
 
+## 1.1.8
+
+### Patch Changes
+
+- a8c2efe: Updating types of SearchFilterGroup to be compatible with radio inputs.
+
 ## 1.1.7
 
 ### Patch Changes

package/package.json

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

package/src/components/SearchFilterGroup/SearchFilterGroup.stories.js

@@ -64,7 +64,7 @@ export const RadioInput = {
   name: 'Radio Group',
   args: {
     inputType: 'radio',
-    filterBy: [],
+    filterBy: '',
     buckets: [
       { key: 'Solar System', doc_count: 3308 },
       { key: 'Earth', doc_count: 1179 },

package/src/components/SearchFilterGroup/SearchFilterGroup.vue

@@ -164,8 +164,15 @@ export default {
       default: 'checkbox'
     },
     filterBy: {
-      type: Array,
-      default: undefined
+      /* array for checkbox, string for radio */
+      type: [Array, String] as PropType<string[] | string>,
+      required: true,
+      validator: (value: string[] | string, props: any) => {
+        if (props.inputType === 'radio') {
+          return typeof value === 'string'
+        }
+        return Array.isArray(value)
+      }
     },
     buckets: {
       type: Object,

package/src/interfaces.ts

@@ -58,7 +58,8 @@ export interface ThumbnailObject {
   original: string
   width: number
   height: number
-  url: string
+  src?: ImageSrcObject
+  srcCropped?: ImageSrcObject
 }
 export interface ImageObject {
   title?: string

package/src/templates/explore-jpl/PageSiteExploreApp/PageSiteExploreApp.stories.js

@@ -23,9 +23,17 @@ export const ExploreAppSitePageData = {
   displayLabel: 'Explore JPL',
   showShareLinks: false,
   thumbnailImage: {
-    url: 'https://picsum.photos/512/288',
-    width: 512,
-    height: 288,
+    original: 'https://picsum.photos/512/288',
+    src: {
+      url: 'https://picsum.photos/512/288',
+      width: 512,
+      height: 288
+    },
+    srcCropped: {
+      url: 'https://picsum.photos/512/288',
+      width: 512,
+      height: 288
+    },
     id: 12345
   },
   location: 'Cafe 186',

package/src/templates/explore-jpl/PageSiteExploreApp/PageSiteExploreApp.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue'
 import { useRoute } from 'vue-router'
-import type { PageObject } from '../../../interfaces'
+import type { PageObject, ImageObject } from '../../../interfaces'
 import { useThemeStore } from '../../../store/theme'
 import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
 import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
@@ -27,22 +27,6 @@ const props = defineProps({
 })
 const { data } = reactive(props)
 
-// Convert thumbnailImage data for BlockImageStandard compatibility
-const detailImage = computed(() => {
-  return {
-    src: {
-      url: data?.thumbnailImage?.url!,
-      width: data?.thumbnailImage?.width!,
-      height: data?.thumbnailImage?.height!
-    },
-    srcCropped: {
-      url: data?.thumbnailImage?.url!,
-      width: data?.thumbnailImage?.width!,
-      height: data?.thumbnailImage?.height!
-    }
-  }
-})
-
 // Handle navigating back to Sites page
 const previousPath = computed(() => {
   try {
@@ -113,14 +97,16 @@ const mapPath = computed(() => {
 
         <!-- inline hero image -->
         <LayoutHelper
+          v-if="data.thumbnailImage?.src"
           indent="col-2"
           class="mt-10 mb-22 hidden lg:block"
         >
-          <BlockImageStandard :data="detailImage" />
+          <BlockImageStandard :data="data.thumbnailImage as ImageObject" />
         </LayoutHelper>
 
         <BlockImageFullBleed
-          :data="detailImage"
+          v-if="data.thumbnailImage?.src"
+          :data="data.thumbnailImage as ImageObject"
           class="lg:hidden mt-10 mb-10"
         />