@explorer-1/vue 1.1.6 → 1.1.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @explorer-1/vue
 
+## 1.1.8
+
+### Patch Changes
+
+- a8c2efe: Updating types of SearchFilterGroup to be compatible with radio inputs.
+
+## 1.1.7
+
+### Patch Changes
+
+- 391a6be: Adds option to use radio input in SearchFilterGroup
+
 ## 1.1.6
 
 ### Patch Changes

package/package.json

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

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

@@ -59,6 +59,23 @@ export const DateFilter = {
     truncateFilters: true
   }
 }
+
+export const RadioInput = {
+  name: 'Radio Group',
+  args: {
+    inputType: 'radio',
+    filterBy: '',
+    buckets: [
+      { key: 'Solar System', doc_count: 3308 },
+      { key: 'Earth', doc_count: 1179 },
+      { key: 'Stars and Galaxies', doc_count: 979 },
+      { key: 'Technology', doc_count: 480 }
+    ],
+    groupKey: 'topics',
+    groupTitle: 'Topic',
+    truncateFilters: false
+  }
+}
 export const SubFilters = {
   decorators: [
     () => ({

package/src/components/SearchFilterGroup/SearchFilterGroup.vue

@@ -36,7 +36,7 @@
                     : generateId(bucket.key, groupKey)
                 "
                 v-model="filterByHandler"
-                type="checkbox"
+                :type="inputType"
                 :value="bucket.key_as_string ? bucket.key_as_string : bucket.key"
                 class="text-primary focus:ring-2 focus:ring-primary flex-shrink-0 w-5 h-5 mt-px mr-1 align-middle border rounded-none"
               />
@@ -94,9 +94,11 @@
                   : generateId(bucket.key, groupKey)
               "
               v-model="filterByHandler"
-              type="checkbox"
+              :name="inputType === 'radio' ? groupKey : undefined"
+              :type="inputType"
               :value="bucket.key_as_string ? bucket.key_as_string : bucket.key"
-              class="text-primary focus:ring-2 focus:ring-primary flex-shrink-0 w-5 h-5 mt-px mr-1 align-middle border rounded-none"
+              class="text-primary focus:ring-2 focus:ring-primary flex-shrink-0 w-5 h-5 mt-px mr-1 align-middle border"
+              :class="inputType === 'radio' ? 'rounded-full' : 'rounded-none'"
             />
             <!-- 'key_as_string' exists for dates to have a human readable version -->
             <label
@@ -156,9 +158,21 @@ export default {
     SearchFilterGroupAccordionItem
   },
   props: {
+    /* Input type */
+    inputType: {
+      type: String as PropType<'checkbox' | 'radio'>,
+      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"
         />