feat: add sort by

Author: HerringtonDarkholme

website/src/catalog/RuleFilter.vue

@@ -7,7 +7,7 @@ import {
   features,
   ruleTypes,
   type Filter,
-} from './data'
+} from './data.js'
 
 const model = defineModel<Filter>()
 
@@ -23,7 +23,7 @@ watchEffect(() => {
 })
 // :( cyclic assign, for reset event
 watchEffect(() => {
-  filter.value = model.value
+  filter.value = model.value!
 })
 
 </script>

website/src/catalog/RuleList.vue

@@ -3,6 +3,7 @@ import NumberFlow, { continuous } from '@number-flow/vue'
 import { type Filter, getRuleMetaData } from './data'
 import { computed, type PropType } from 'vue'
 import RuleItem from './RuleItem.vue'
+import IconDown from '../components/utils/IconDown.vue'
 
 const props = defineProps({
   filter: {
@@ -27,6 +28,14 @@ const ruleMetaData = computed(() => getRuleMetaData(props.filter))
         :plugins="[continuous]"
         :value="ruleMetaData.length"
       />
+      <label class="sort-by">
+        Sort by:
+        <select>
+          <option>Name</option>
+          <option>Lang</option>
+        </select>
+        <IconDown/>
+      </label>
     </h3>
     <TransitionGroup class="rule-list" tag="ul">
       <RuleItem
@@ -109,6 +118,21 @@ h3 {
   color: var(--vp-c-text-2);
 }
 
+h3 {
+  display: flex;
+}
+.sort-by {
+  display: inline-flex;
+  align-items: center;
+  margin-left: auto;
+  font-size: 14px;
+  font-weight: 400;
+}
+.sort-by > select {
+  margin-left: 6px;
+  padding-right: 4px;
+}
+
 .not-found-enter-active,
 .not-found-leave-active {
   transition: all 0.4s cubic-bezier(0.59, 0.12, 0.34, 0.95);

website/src/catalog/data.ts

@@ -1,5 +1,5 @@
-import { data as allRules } from '../../_data/catalog.data'
-export type { RuleMeta } from '../../_data/catalog.data'
+import { data as allRules } from '../../_data/catalog.data.js'
+export type { RuleMeta } from '../../_data/catalog.data.js'
 
 export function intersect(a: string[], b: string[]) {
   return a.some(x => b.includes(x))