fix: extract several styling

Author: HerringtonDarkholme

website/src/catalog/Option.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+// hohoho option, not the 0dte one
+
+defineProps({
+  text: String,
+  highlight: Boolean,
+})
+</script>
+
+<template>
+  <code class="option" :class="{ highlight }">{{ text }}</code>
+</template>
+
+<style scoped>
+code.option {
+  cursor: pointer;
+  filter: saturate(0);
+  opacity: 0.8;
+  user-select: none;
+  border: 1px solid transparent;
+  min-width: 3em;
+  display: inline-block;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  padding-top: 0;
+}
+code.option:hover {
+  opacity: 1;
+  filter: saturate(1);
+}
+.highlight {
+  color: var(--vp-c-brand-1);
+}
+.highlight-filter:hover {
+  color: var(--vp-c-brand-1);
+}
+</style>

website/src/catalog/RuleFilter.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { watchEffect, ref } from 'vue'
+import Option from './Option.vue'
 import {
   languages,
   ruleFilters,
@@ -25,24 +26,24 @@ watchEffect(() => {
 <template>
   <form class="filters">
     <details open>
-      <summary>Language Filters</summary>
+      <summary>📚Language Filters</summary>
       <div class="checkbox-group">
         <label v-for="displayName, lang in languages" :key="lang">
           <input type="checkbox" v-model="filter.selectedLanguages" :value="lang">
-          <code class="option">{{ displayName }}</code>
+          <Option :text="displayName"/>
         </label>
       </div>
     </details>
 
-    <details class="filter-group" style="display: none;">
-      <summary>Rule Filters</summary>
+    <details class="filter-group">
+      <summary>📏Rule Filters</summary>
       <div class="rule-group">
         <div v-for="rules, type in ruleFilters">
           <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">
-              <code class="option">{{ rule }}</code>
+              <Option :text="rule"/>
             </label>
           </div>
         </div>
@@ -57,7 +58,7 @@ watchEffect(() => {
           <div class="checkbox-group">
             <label v-for="type in ruleTypes" :key="type">
               <input type="checkbox" v-model="filter.selectedTypes" :value="type">
-              <code class="option">{{ type }}</code>
+              <Option :text="type"/>
             </label>
           </div>
         </div>
@@ -66,7 +67,7 @@ watchEffect(() => {
           <div class="checkbox-group">
             <label v-for="feature in features" :key="feature">
               <input type="checkbox" v-model="filter.selectedFeatures" :value="feature">
-              <code class="option">{{ feature }}</code>
+              <Option :text="feature"/>
             </label>
           </div>
         </div>
@@ -77,8 +78,7 @@ watchEffect(() => {
 
 <style scoped>
 .rule-group {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(20%, 1fr));
+  display: flex;
   margin-top: -2px;
 }
 
@@ -114,24 +114,6 @@ input[type="checkbox"] {
   display: none;
 }
 
-code.option {
-  cursor: pointer;
-  filter: saturate(0);
-  opacity: 0.8;
-  user-select: none;
-  border: 1px solid var(--vp-code-bg);
-  min-width: 3em;
-  display: inline-block;
-  height: 24px;
-  line-height: 24px;
-  text-align: center;
-  padding-top: 0;
-}
-code.option:hover {
-  opacity: 1;
-  filter: saturate(1);
-}
-
 input[type="checkbox"]:checked + code.option {
   filter: saturate(1);
   opacity: 1;

website/src/catalog/RuleItem.vue

@@ -26,16 +26,11 @@ const moreFeatures = computed(() => Math.max(meta.features.length - 2, 0))
     <div class="rule-header">
       <a :href="meta.link" class="rule-name" target="_blank">{{ meta.name }}</a>
       <div class="rule-badges">
-        <Badge type="info">
-          <a
-            :href="`/catalog/${meta.language}/`"
-            class="override-badge-text-color"
-            :class="filter.selectedLanguages.length && 'highlight-filter'"
-            target="_blank"
-          >
+        <a :href="`/catalog/${meta.language}/`" target="_blank">
+          <Badge type="info" :class="filter.selectedLanguages.length && 'highlight-filter'">
             {{ languages[meta.language] }}
-          </a>
-        </Badge>
+          </Badge>
+        </a>
         <Badge v-if="meta.hasFix" type="tip">
           <span class="override-badge-text-color">🛠️ Fix</span>
         </Badge>
@@ -46,7 +41,7 @@ const moreFeatures = computed(() => Math.max(meta.features.length - 2, 0))
         <Badge v-if="meta.type === 'Pattern'" type="info" text="Simple Pattern Example" />
         <template v-else>
           📏<span class="emoji-offset"/>
-          <code class="used" v-for="rule in displayedRules">
+          <code class="used" v-for="rule in displayedRules" :class="filter.selectedRuleFilters.includes(rule) && 'highlight-filter'">
             {{ rule }}
           </code>
           <code class="used" v-if="moreRules">
@@ -136,8 +131,14 @@ a:hover {
   /* Offset emoji visual spacing */
   margin-right: -2px;
 }
+/* hack vpbage's border transition */
+.VPBadge {
+  transition-property: all;
+  transition-duration: 0.25s;
+}
 .highlight-filter {
   color: var(--vp-c-brand-1);
+  border-color: var(--vp-c-brand-1);
 }
 .highlight-filter:hover {
   color: var(--vp-c-brand-1);

website/src/catalog/data.ts

@@ -5,8 +5,10 @@ export function getRuleMetaData(filter: Filter) {
   const {
     selectedLanguages,
   } = filter
-  return allRules.filter(rule => {
-    return !selectedLanguages.length || selectedLanguages.includes(rule.language)
+  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))
+    return langFilter && ruleFilter
   })
 }