Skip to content

Commit 3bed552

Browse files
ota-meshiota-meshi
authored
Update Playground (#314)
1 parent 1800921 commit 3bed552

File tree

5 files changed

+381
-150
lines changed

5 files changed

+381
-150
lines changed

‎docs/.vuepress/components/components/RulesSettings.vue

Lines changed: 231 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,136 @@
11
<template>
22
<div class="rules-settings">
3+
<div class="tools">
4+
<label class="tool">
5+
<span class="tool-label">Filter:</span>
6+
<input
7+
v-model="filterValue"
8+
type="search"
9+
placeholder="Rule Filter"
10+
class="tool-form"
11+
/>
12+
</label>
13+
<label class="tool">
14+
<input
15+
:checked="
16+
categories.every((category) =>
17+
category.rules.every((rule) =>
18+
isErrorState(rule.ruleId),
19+
),
20+
)
21+
"
22+
type="checkbox"
23+
:indeterminate.prop="
24+
categories.some((category) =>
25+
category.rules.some((rule) =>
26+
isErrorState(rule.ruleId),
27+
),
28+
) &&
29+
categories.some((category) =>
30+
category.rules.some(
31+
(rule) => !isErrorState(rule.ruleId),
32+
),
33+
)
34+
"
35+
@input="onAllClick($event)"
36+
/>
37+
<span class="tool-label">All Rules</span>
38+
</label>
39+
</div>
340
<ul class="categories">
4-
<li
5-
v-for="category in categories"
6-
:key="category.title"
7-
class="category"
8-
:class="category.classes"
9-
>
10-
<div class="category-title-wrapper">
11-
<label class="category-title">
12-
<input
13-
:checked="
14-
category.rules.every((rule) =>
15-
isErrorState(rule.ruleId),
16-
)
17-
"
18-
type="checkbox"
19-
:indeterminate.prop="
20-
!category.rules.every((rule) =>
21-
isErrorState(rule.ruleId),
22-
) &&
23-
!category.rules.every(
24-
(rule) => !isErrorState(rule.ruleId),
25-
)
26-
"
27-
@input="onAllClick(category, $event)"
28-
/>
29-
{{ category.title }}
30-
</label>
31-
</div>
32-
33-
<ul class="rules">
34-
<li
35-
v-for="rule in category.rules"
36-
:key="rule.ruleId"
37-
class="rule"
38-
:class="rule.classes"
41+
<template v-for="category in categories">
42+
<li
43+
v-if="category.rules.length"
44+
:key="category.title"
45+
class="category"
46+
:class="category.classes"
47+
>
48+
<button
49+
class="category-button"
50+
:class="{
51+
'category-button--close':
52+
categoryState[category.title].close,
53+
}"
54+
@click="
55+
categoryState[
56+
category.title
57+
].close = !categoryState[category.title].close
58+
"
3959
>
40-
<label>
60+
<svg
61+
xmlns="http://www.w3.org/2000/svg"
62+
height="10"
63+
viewBox="0 0 10 10"
64+
width="10"
65+
>
66+
<path d="M2.5 10l5-5-5-5v10z" fill="#ddd" />
67+
</svg>
68+
</button>
69+
<div class="category-title-wrapper">
70+
<label class="category-title">
4171
<input
42-
:checked="isErrorState(rule.ruleId)"
72+
:checked="
73+
category.rules.every((rule) =>
74+
isErrorState(rule.ruleId),
75+
)
76+
"
4377
type="checkbox"
44-
@input="onClick(rule.ruleId, $event)"
78+
:indeterminate.prop="
79+
!category.rules.every((rule) =>
80+
isErrorState(rule.ruleId),
81+
) &&
82+
!category.rules.every(
83+
(rule) => !isErrorState(rule.ruleId),
84+
)
85+
"
86+
@input="onCategoryClick(category, $event)"
4587
/>
46-
{{ rule.ruleId }}
88+
{{ category.title }}
4789
</label>
48-
<a :href="rule.url" target="_blank"
49-
><svg
50-
xmlns="http://www.w3.org/2000/svg"
51-
aria-hidden="true"
52-
x="0px"
53-
y="0px"
54-
viewBox="0 0 100 100"
55-
width="15"
56-
height="15"
57-
class="icon outbound"
58-
>
59-
<path
60-
fill="currentColor"
61-
d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
90+
</div>
91+
92+
<ul
93+
v-show="!categoryState[category.title].close"
94+
class="rules"
95+
>
96+
<li
97+
v-for="rule in category.rules"
98+
:key="rule.ruleId"
99+
class="rule"
100+
:class="rule.classes"
101+
>
102+
<label>
103+
<input
104+
:checked="isErrorState(rule.ruleId)"
105+
type="checkbox"
106+
@input="onClick(rule.ruleId, $event)"
62107
/>
63-
<polygon
64-
fill="currentColor"
65-
points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
66-
/></svg
67-
></a>
68-
</li>
69-
</ul>
70-
</li>
108+
{{ rule.ruleId }}
109+
</label>
110+
<a :href="rule.url" target="_blank"
111+
><svg
112+
xmlns="http://www.w3.org/2000/svg"
113+
aria-hidden="true"
114+
x="0px"
115+
y="0px"
116+
viewBox="0 0 100 100"
117+
width="15"
118+
height="15"
119+
class="icon outbound"
120+
>
121+
<path
122+
fill="currentColor"
123+
d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"
124+
/>
125+
<polygon
126+
fill="currentColor"
127+
points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"
128+
/></svg
129+
></a>
130+
</li>
131+
</ul>
132+
</li>
133+
</template>
71134
</ul>
72135
</div>
73136
</template>
@@ -85,12 +148,40 @@ export default {
85148
},
86149
data() {
87150
return {
88-
categories,
151+
categoryState: Object.fromEntries(
152+
categories.map((c) => {
153+
return [
154+
c.title,
155+
{
156+
close: true,
157+
},
158+
]
159+
}),
160+
),
161+
filterValue: "",
89162
}
90163
},
91-
watch: {},
164+
computed: {
165+
categories() {
166+
return categories.map((c) => {
167+
return {
168+
...c,
169+
rules: this.filterRules(c.rules),
170+
}
171+
})
172+
},
173+
},
92174
methods: {
93-
onAllClick(category, e) {
175+
filterRules(rules) {
176+
let filteredRules = rules
177+
if (this.filterValue) {
178+
filteredRules = filteredRules.filter((r) =>
179+
r.ruleId.includes(this.filterValue),
180+
)
181+
}
182+
return filteredRules
183+
},
184+
onCategoryClick(category, e) {
94185
const rules = Object.assign({}, this.rules)
95186
for (const rule of category.rules) {
96187
if (e.target.checked) {
@@ -101,6 +192,19 @@ export default {
101192
}
102193
this.$emit("update:rules", rules)
103194
},
195+
onAllClick(e) {
196+
const rules = Object.assign({}, this.rules)
197+
for (const category of this.categories) {
198+
for (const rule of category.rules) {
199+
if (e.target.checked) {
200+
rules[rule.ruleId] = "error"
201+
} else {
202+
delete rules[rule.ruleId]
203+
}
204+
}
205+
}
206+
this.$emit("update:rules", rules)
207+
},
104208
onClick(ruleId, e) {
105209
const rules = Object.assign({}, this.rules)
106210
if (e.target.checked) {
@@ -118,15 +222,75 @@ export default {
118222
</script>
119223

120224
<style scoped>
225+
.tools {
226+
background-color: #222;
227+
}
228+
229+
.tool {
230+
display: flex;
231+
padding: 4px;
232+
}
233+
234+
.tool-label {
235+
flex-shrink: 0;
236+
padding: 0 4px;
237+
}
238+
239+
.tool-form {
240+
width: 100%;
241+
}
242+
243+
.tools-button {
244+
background-color: transparent;
245+
color: #ddd;
246+
border: none;
247+
appearance: none;
248+
cursor: pointer;
249+
padding: 0;
250+
}
251+
252+
.tools-button--close {
253+
transform: rotate(90deg);
254+
}
255+
121256
.categories {
122257
font-size: 14px;
258+
list-style-type: none;
259+
}
260+
261+
.category {
262+
position: relative;
263+
}
264+
265+
.category-button {
266+
position: absolute;
267+
left: -12px;
268+
top: 2px;
269+
background-color: transparent;
270+
color: #ddd;
271+
border: none;
272+
appearance: none;
273+
cursor: pointer;
274+
padding: 0;
275+
}
276+
277+
.category-button--close {
278+
transform: rotate(90deg);
123279
}
124280
125281
.category-title {
126282
font-size: 14px;
127283
font-weight: bold;
128284
}
129285
286+
.eslint-plugin-regexp-category .category-title {
287+
color: #f8c555;
288+
}
289+
290+
.eslint-core-category .category-title {
291+
color: #8080f2;
292+
}
293+
130294
.rules {
131295
padding-left: 0;
132296
}
@@ -147,11 +311,11 @@ a {
147311
text-decoration: none;
148312
}
149313
150-
.category {
151-
color: #fff;
314+
.eslint-core-rule a > svg {
315+
color: #8080f2;
152316
}
153317
154-
.eslint-plugin-regexp__category {
318+
.eslint-plugin-regexp-rule a > svg {
155319
color: #f8c555;
156320
}
157321
</style>

0 commit comments

Comments
 (0)