fix: renaming

website/src/catalog/RuleFilter.vue

@@ -13,7 +13,7 @@ const model = defineModel<Filter>()
 
 const filter = ref<Filter>({
   selectedLanguages: [],
-  selectedRuleFilters: [],
+  selectedRules: [],
   selectedFeatures: [],
   selectedTypes: [],
 })
@@ -42,7 +42,7 @@ watchEffect(() => {
           <em style="text-transform: capitalize;">{{ type }}</em>
           <div class="checkbox-group">
             <label v-for="rule in rules" :key="rule">
-              <input type="checkbox" v-model="filter.selectedRuleFilters" :value="rule">
+              <input type="checkbox" v-model="filter.selectedRules" :value="rule">
               <Option :text="rule" class="filter-option"/>
             </label>
           </div>

website/src/catalog/RuleItem.vue

@@ -34,7 +34,7 @@ const displayRuleCount = computed(() => {
   return Math.min(meta.rules.length, maxRule)
 })
 
-const sortedRules = computed(() => sortedOptions(meta.rules, filter.selectedRuleFilters))
+const sortedRules = computed(() => sortedOptions(meta.rules, filter.selectedRules))
 const displayedRules = computed(() => sortedRules.value.slice(0, displayRuleCount.value))
 const moreRules = computed(() => sortedRules.value.slice(displayRuleCount.value))
 
@@ -73,13 +73,13 @@ const moreFeatures = computed(() => sortedFeatures.value.slice(2))
             v-for="rule in displayedRules"
             :key="rule"
             :text="rule"
-            :highlight="filter.selectedRuleFilters.includes(rule)"
+            :highlight="filter.selectedRules.includes(rule)"
           />
           <Option
             v-if="moreRules.length"
             :text="`+${moreRules.length}`"
             :data-title="moreRules.join(', ')"
-            :highlight="intersect(moreRules, filter.selectedRuleFilters)"
+            :highlight="intersect(moreRules, filter.selectedRules)"
           />
         </template>
       </div>

website/src/catalog/data.ts

@@ -11,7 +11,7 @@ export function getRuleMetaData(filter: Filter) {
   } = filter
   return allRules.filter(meta => {
     const langFilter = !selectedLanguages.length || selectedLanguages.includes(meta.language)
-    const ruleFilter = !filter.selectedRuleFilters.length || intersect(filter.selectedRuleFilters, meta.rules)
+    const ruleFilter = !filter.selectedRules.length || intersect(filter.selectedRules, meta.rules)
     const featureFilter = !filter.selectedFeatures.length || intersect(filter.selectedFeatures, meta.features)
     const typeFilter = !filter.selectedTypes.length || filter.selectedTypes.includes(meta.type)
     return langFilter && ruleFilter && featureFilter && typeFilter
@@ -20,7 +20,7 @@ export function getRuleMetaData(filter: Filter) {
 
 export type Filter = {
   selectedLanguages: ExampleLangs[],
-  selectedRuleFilters: string[],
+  selectedRules: string[],
   selectedFeatures: string[],
   selectedTypes: string[],
 }

website/src/catalog/index.vue

@@ -6,7 +6,7 @@ import type { Filter } from './data';
 
 const filter = ref<Filter>({
   selectedLanguages: [],
-  selectedRuleFilters: [],
+  selectedRules: [],
   selectedFeatures: [],
   selectedTypes: [],
 })