feat: add intersect util

website/src/catalog/RuleItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type PropType, computed } from 'vue'
 
-import { type RuleMeta, type Filter, languages } from './data'
+import { type RuleMeta, type Filter, languages, intersect } from './data'
 import Option from './Option.vue'
 
 const { meta, filter } = defineProps({
@@ -37,13 +37,13 @@ const displayedRules = computed(() => {
   const result = sortedOptions(meta.rules, filter.selectedRuleFilters)
   return result.slice(0, displayRuleCount.value)
 })
-const moreRules = computed(() => meta.rules.length - displayRuleCount.value)
+const moreRules = computed(() => meta.rules.slice(displayRuleCount.value))
 
 const displayFeatures = computed(() => {
   const result = sortedOptions(meta.features, filter.selectedFeatures)
   return result.slice(0, 2)
 })
-const moreFeatures = computed(() => Math.max(displayFeatures.value.length - 2, 0))
+const moreFeatures = computed(() => meta.features.slice(2))
 </script>
 
 <template>
@@ -76,9 +76,10 @@ const moreFeatures = computed(() => Math.max(displayFeatures.value.length - 2, 0
             :highlight="filter.selectedRuleFilters.includes(rule)"
           />
           <Option
-            v-if="moreRules"
-            :text="`+${moreRules}`"
-            :data-title="meta.rules.slice(displayRuleCount).join(', ')"
+            v-if="moreRules.length"
+            :text="`+${moreRules.length}`"
+            :data-title="moreRules.join(', ')"
+            :highlight="intersect(moreRules, filter.selectedRuleFilters)"
           />
         </template>
       </div>
@@ -91,9 +92,10 @@ const moreFeatures = computed(() => Math.max(displayFeatures.value.length - 2, 0
             :highlight="filter.selectedFeatures.includes(feature)"
           />
           <Option
-            v-if="moreFeatures"
-            :text="`+${moreFeatures}`"
-            :data-title="meta.features.slice(2).join(', ')"
+            v-if="moreFeatures.length"
+            :text="`+${moreFeatures.length}`"
+            :data-title="moreFeatures.join(', ')"
+            :highlight="intersect(moreFeatures, filter.selectedFeatures)"
           />
       </div>
       <a :href="meta.playgroundLink" class="playground link" target="_blank">

website/src/catalog/data.ts

@@ -1,14 +1,18 @@
 import { data as allRules } from '../../_data/catalog.data'
 export type { RuleMeta } from '../../_data/catalog.data'
 
+export function intersect(a: string[], b: string[]) {
+  return a.some(x => b.includes(x))
+}
+
 export function getRuleMetaData(filter: Filter) {
   const {
     selectedLanguages,
   } = filter
   return allRules.filter(meta => {
     const langFilter = !selectedLanguages.length || selectedLanguages.includes(meta.language)
-    const ruleFilter = !filter.selectedRuleFilters.length || filter.selectedRuleFilters.some(r => meta.rules.includes(r))
-    const featureFilter = !filter.selectedFeatures.length || filter.selectedFeatures.some(f => meta.features.includes(f))
+    const ruleFilter = !filter.selectedRuleFilters.length || intersect(filter.selectedRuleFilters, 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
   })