1
1
<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'
4
3
import Option from ' ./Option.vue'
4
+ import {
5
+ languages ,
6
+ ruleFilters ,
7
+ features ,
8
+ ruleTypes ,
9
+ type Filter ,
10
+ } from ' ./data'
5
11
6
12
const model = defineModel <Filter >()
7
13
@@ -19,28 +25,29 @@ watchEffect(() => {
19
25
watchEffect (() => {
20
26
filter .value = model .value !
21
27
})
28
+
22
29
</script >
23
30
<template >
24
31
<form class =" filters" >
25
32
<details open >
26
33
<summary >📚 Example Language</summary >
27
34
<div class =" checkbox-group" >
28
- <label v-for =" ( displayName, lang) in languages" :key =" lang" >
35
+ <label v-for =" displayName, lang in languages" :key =" lang" >
29
36
<input type =" checkbox" v-model =" filter.selectedLanguages" :value =" lang" >
30
- <Option :text =" displayName" class =" filter-option" />
37
+ <Option :text =" displayName" class =" filter-option" />
31
38
</label >
32
39
</div >
33
40
</details >
34
41
35
42
<details open >
36
43
<summary >📏 Used Rule</summary >
37
44
<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 >
40
47
<div class =" checkbox-group" >
41
48
<label v-for =" rule in rules" :key =" rule" >
42
49
<input type =" checkbox" v-model =" filter.selectedRules" :value =" rule" >
43
- <Option :text =" rule" class =" filter-option" />
50
+ <Option :text =" rule" class =" filter-option" />
44
51
</label >
45
52
</div >
46
53
</div >
@@ -49,7 +56,7 @@ watchEffect(() => {
49
56
<div class =" checkbox-group" >
50
57
<label v-for =" type in ruleTypes" :key =" type" >
51
58
<input type =" checkbox" v-model =" filter.selectedTypes" :value =" type" >
52
- <Option :text =" type" class =" filter-option" />
59
+ <Option :text =" type" class =" filter-option" />
53
60
</label >
54
61
</div >
55
62
</div >
@@ -64,7 +71,7 @@ watchEffect(() => {
64
71
<div class =" checkbox-group" >
65
72
<label v-for =" feature in features" :key =" feature" >
66
73
<input type =" checkbox" v-model =" filter.selectedFeatures" :value =" feature" >
67
- <Option :text =" feature" class =" filter-option" />
74
+ <Option :text =" feature" class =" filter-option" />
68
75
</label >
69
76
</div >
70
77
</div >
@@ -143,11 +150,11 @@ input[type="checkbox"]:checked + code.option:hover {
143
150
144
151
@keyframes details-show {
145
152
from {
146
- opacity : 0 ;
153
+ opacity :0 ;
147
154
transform : translateY (-0.5em );
148
155
}
149
156
}
150
157
details [open ] > * :not (summary ) {
151
158
animation : details-show 0.2s ease-in-out ;
152
159
}
153
- </style >
160
+ </style >
0 commit comments