11<script setup lang="ts">
2- import { ref , watchEffect } from ' vue'
3- import { features , type Filter , languages , ruleFilters , ruleTypes } from ' ./data'
2+ import { watchEffect , ref } from ' vue'
43import Option from ' ./Option.vue'
4+ import {
5+ languages ,
6+ ruleFilters ,
7+ features ,
8+ ruleTypes ,
9+ type Filter ,
10+ } from ' ./data'
511
612const model = defineModel <Filter >()
713
@@ -19,28 +25,29 @@ watchEffect(() => {
1925watchEffect (() => {
2026 filter .value = model .value !
2127})
28+
2229 </script >
2330<template >
2431 <form class =" filters" >
2532 <details open >
2633 <summary >📚 Example Language</summary >
2734 <div class =" checkbox-group" >
28- <label v-for =" ( displayName, lang) in languages" :key =" lang" >
35+ <label v-for =" displayName, lang in languages" :key =" lang" >
2936 <input type =" checkbox" v-model =" filter.selectedLanguages" :value =" lang" >
30- <Option :text =" displayName" class =" filter-option" />
37+ <Option :text =" displayName" class =" filter-option" />
3138 </label >
3239 </div >
3340 </details >
3441
3542 <details open >
3643 <summary >📏 Used Rule</summary >
3744 <div class =" filter-group rule-filter-group" >
38- <div v-for =" ( rules, type) in ruleFilters" >
39- <em style =" text-transform : capitalize " >{{ type }}</em >
45+ <div v-for =" rules, type in ruleFilters" >
46+ <em style =" text-transform : capitalize ; " >{{ type }}</em >
4047 <div class =" checkbox-group" >
4148 <label v-for =" rule in rules" :key =" rule" >
4249 <input type =" checkbox" v-model =" filter.selectedRules" :value =" rule" >
43- <Option :text =" rule" class =" filter-option" />
50+ <Option :text =" rule" class =" filter-option" />
4451 </label >
4552 </div >
4653 </div >
@@ -49,7 +56,7 @@ watchEffect(() => {
4956 <div class =" checkbox-group" >
5057 <label v-for =" type in ruleTypes" :key =" type" >
5158 <input type =" checkbox" v-model =" filter.selectedTypes" :value =" type" >
52- <Option :text =" type" class =" filter-option" />
59+ <Option :text =" type" class =" filter-option" />
5360 </label >
5461 </div >
5562 </div >
@@ -64,7 +71,7 @@ watchEffect(() => {
6471 <div class =" checkbox-group" >
6572 <label v-for =" feature in features" :key =" feature" >
6673 <input type =" checkbox" v-model =" filter.selectedFeatures" :value =" feature" >
67- <Option :text =" feature" class =" filter-option" />
74+ <Option :text =" feature" class =" filter-option" />
6875 </label >
6976 </div >
7077 </div >
@@ -143,11 +150,11 @@ input[type="checkbox"]:checked + code.option:hover {
143150
144151@keyframes details-show {
145152 from {
146- opacity : 0 ;
153+ opacity :0 ;
147154 transform : translateY (-0.5em );
148155 }
149156}
150157details [open ] > * :not (summary ) {
151158 animation : details-show 0.2s ease-in-out ;
152159}
153- </style >
160+ </style >
0 commit comments