feat: add reset button

Author: HerringtonDarkholme

website/src/catalog/RuleFilter.vue

@@ -21,6 +21,10 @@ const filter = ref<Filter>({
 watchEffect(() => {
   model.value = filter.value
 })
+// :( cyclic assign, for reset event
+watchEffect(() => {
+  filter.value = model.value
+})
 
 </script>
 <template>

website/src/catalog/RuleList.vue

@@ -10,6 +10,9 @@ const props = defineProps({
     required: true,
   }
 })
+const emit = defineEmits<{
+  reset: []
+}>()
 
 const ruleMetaData = computed(() => getRuleMetaData(props.filter))
 </script>
@@ -38,7 +41,7 @@ const ruleMetaData = computed(() => getRuleMetaData(props.filter))
         <p class="title">No Matching Rule</p>
         <hr class="divider"/>
         <div class="actions">
-          Try resetting the filter to discover all rules.<br/>
+          You can <a href="" @click="emit('reset')">reset the filter</a> to discover all rules.<br/>
           Contributing a new rule is also warmly welcomed. 🎉
           <ol>
             <li>

website/src/catalog/index.vue

@@ -10,12 +10,21 @@ const filter = ref<Filter>({
   selectedFeatures: [],
   selectedTypes: [],
 })
+
+function reset() {
+  filter.value = {
+    selectedLanguages: [],
+    selectedRules: [],
+    selectedFeatures: [],
+    selectedTypes: [],
+  }
+}
 </script>
 
 <template>
   <div class="catalog-filter">
     <RuleFilter v-model="filter" />
-    <RuleList :filter="filter"/>
+    <RuleList :filter="filter" @reset="reset"/>
   </div>
 </template>