@explorer-1/vue 1.1.6 → 1.1.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @explorer-1/vue
 
+## 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.7",
   "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,6 +158,11 @@ export default {
     SearchFilterGroupAccordionItem
   },
   props: {
+    /* Input type */
+    inputType: {
+      type: String as PropType<'checkbox' | 'radio'>,
+      default: 'checkbox'
+    },
     filterBy: {
       type: Array,
       default: undefined