Skip to content

Commit 810a751

Browse files
ota-meshiota-meshi
committed
update demo
1 parent f0e5281 commit 810a751

File tree

3 files changed

+238
-64
lines changed

3 files changed

+238
-64
lines changed

‎.vscode/settings.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,9 @@
1212
"editor.formatOnSave": true,
1313
"editor.defaultFormatter": "esbenp.prettier-vscode",
1414
"vetur.validation.script": false,
15-
"vetur.validation.style": false
15+
"vetur.validation.style": false,
16+
"editor.codeActionsOnSave": {
17+
"source.fixAll": true,
18+
"source.fixAll.stylelint": true
19+
}
1620
}

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

Lines changed: 225 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,123 @@
11
<template>
22
<div class="rules-settings">
3-
<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">
3+
<div class="tools">
4+
<div class="tools-title" @click="state.toolsClose = !state.toolsClose">
5+
Tools
6+
<button
7+
class="tools-button"
8+
:class="{ 'tools-button--close': state.toolsClose }"
9+
>
10+
<svg
11+
xmlns="http://www.w3.org/2000/svg"
12+
height="10"
13+
viewBox="0 0 10 10"
14+
width="10"
15+
>
16+
<path d="M2.5 10l5-5-5-5v10z" fill="#ddd" />
17+
</svg>
18+
</button>
19+
</div>
20+
<template v-if="!state.toolsClose">
21+
<div class="tool">
22+
<button class="tool-button" @click="onAllOffClick">
23+
Turn OFF All Rules
24+
</button>
25+
</div>
26+
<div class="tool">
27+
<label>
28+
<span class="tool-label">Filter:</span>
1229
<input
13-
:checked="
14-
category.rules.every((rule) => isErrorState(rule.ruleId))
15-
"
16-
type="checkbox"
17-
:indeterminate.prop="
18-
!category.rules.every((rule) => isErrorState(rule.ruleId)) &&
19-
!category.rules.every((rule) => !isErrorState(rule.ruleId))
20-
"
21-
@input="onAllClick(category, $event)"
30+
v-model="filterValue"
31+
type="search"
32+
placeholder="Rule Filter"
33+
class="tool-form"
2234
/>
23-
{{ category.title }}
2435
</label>
2536
</div>
26-
27-
<ul class="rules">
28-
<li
29-
v-for="rule in category.rules"
30-
:key="rule.ruleId"
31-
class="rule"
32-
:class="rule.classes"
37+
</template>
38+
</div>
39+
<ul class="categories">
40+
<template v-for="category in categories">
41+
<li
42+
v-if="category.rules.length"
43+
:key="category.title"
44+
class="category"
45+
:class="category.classes"
46+
>
47+
<button
48+
class="category-button"
49+
:class="{
50+
'category-button--close': categoryState[category.title].close,
51+
}"
52+
@click="
53+
categoryState[category.title].close =
54+
!categoryState[category.title].close
55+
"
3356
>
34-
<label>
57+
<svg
58+
xmlns="http://www.w3.org/2000/svg"
59+
height="10"
60+
viewBox="0 0 10 10"
61+
width="10"
62+
>
63+
<path d="M2.5 10l5-5-5-5v10z" fill="#ddd" />
64+
</svg>
65+
</button>
66+
<div class="category-title-wrapper">
67+
<label class="category-title">
3568
<input
36-
:checked="isErrorState(rule.ruleId)"
69+
:checked="
70+
category.rules.every((rule) => isErrorState(rule.ruleId))
71+
"
3772
type="checkbox"
38-
@input="onClick(rule.ruleId, $event)"
73+
:indeterminate.prop="
74+
!category.rules.every((rule) => isErrorState(rule.ruleId)) &&
75+
!category.rules.every((rule) => !isErrorState(rule.ruleId))
76+
"
77+
@input="onAllClick(category, $event)"
3978
/>
40-
{{ rule.ruleId }}
79+
{{ category.title }}
4180
</label>
42-
<a :href="rule.url" target="_blank"
43-
><svg
44-
xmlns="http://www.w3.org/2000/svg"
45-
aria-hidden="true"
46-
x="0px"
47-
y="0px"
48-
viewBox="0 0 100 100"
49-
width="15"
50-
height="15"
51-
class="icon outbound"
52-
>
53-
<path
54-
fill="currentColor"
55-
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"
81+
</div>
82+
83+
<ul v-show="!categoryState[category.title].close" class="rules">
84+
<li
85+
v-for="rule in filterRules(category.rules)"
86+
:key="rule.ruleId"
87+
class="rule"
88+
:class="rule.classes"
89+
>
90+
<label>
91+
<input
92+
:checked="isErrorState(rule.ruleId)"
93+
type="checkbox"
94+
@input="onClick(rule.ruleId, $event)"
5695
/>
57-
<polygon
58-
fill="currentColor"
59-
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"
60-
/></svg
61-
></a>
62-
</li>
63-
</ul>
64-
</li>
96+
{{ rule.ruleId }}
97+
</label>
98+
<a :href="rule.url" target="_blank"
99+
><svg
100+
xmlns="http://www.w3.org/2000/svg"
101+
aria-hidden="true"
102+
x="0px"
103+
y="0px"
104+
viewBox="0 0 100 100"
105+
width="15"
106+
height="15"
107+
>
108+
<path
109+
fill="currentColor"
110+
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"
111+
/>
112+
<polygon
113+
fill="currentColor"
114+
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"
115+
/></svg
116+
></a>
117+
</li>
118+
</ul>
119+
</li>
120+
</template>
65121
</ul>
66122
</div>
67123
</template>
@@ -79,14 +135,43 @@ export default {
79135
},
80136
data() {
81137
return {
82-
categories,
138+
categoryState: Object.fromEntries(
139+
categories.map((c) => {
140+
return [
141+
c.title,
142+
{
143+
close: true,
144+
},
145+
]
146+
}),
147+
),
148+
state: {
149+
toolsClose: true,
150+
},
151+
filterValue: "",
83152
}
84153
},
85-
watch: {},
154+
computed: {
155+
categories() {
156+
return categories.map((c) => {
157+
let rules = this.filterRules(c.rules)
158+
if (this.filterValue) {
159+
rules = rules.filter((r) => r.ruleId.includes(this.filterValue))
160+
}
161+
return {
162+
...c,
163+
rules,
164+
}
165+
})
166+
},
167+
},
86168
methods: {
169+
filterRules(rules) {
170+
return rules.filter((rule) => rule.ruleId !== "jsonc/auto")
171+
},
87172
onAllClick(category, e) {
88173
const rules = Object.assign({}, this.rules)
89-
for (const rule of category.rules) {
174+
for (const rule of this.filterRules(category.rules)) {
90175
if (e.target.checked) {
91176
rules[rule.ruleId] = "error"
92177
} else {
@@ -95,6 +180,9 @@ export default {
95180
}
96181
this.$emit("update:rules", rules)
97182
},
183+
onAllOffClick() {
184+
this.$emit("update:rules", {})
185+
},
98186
onClick(ruleId, e) {
99187
const rules = Object.assign({}, this.rules)
100188
if (e.target.checked) {
@@ -112,15 +200,95 @@ export default {
112200
</script>
113201

114202
<style scoped>
203+
.tools {
204+
background-color: #222;
205+
}
206+
207+
.tool {
208+
display: flex;
209+
}
210+
211+
.tool,
212+
.tools-title {
213+
padding: 4px;
214+
}
215+
216+
.tool > label {
217+
display: flex;
218+
width: 100%;
219+
}
220+
221+
.tool > button {
222+
margin: auto;
223+
}
224+
225+
.tool-label {
226+
width: 3.5rem;
227+
flex-shrink: 0;
228+
}
229+
230+
.tool-form {
231+
width: 100%;
232+
}
233+
234+
.tools-button {
235+
background-color: transparent;
236+
color: #ddd;
237+
border: none;
238+
appearance: none;
239+
cursor: pointer;
240+
padding: 0;
241+
}
242+
243+
.tools-button--close {
244+
transform: rotate(90deg);
245+
}
246+
247+
.filter .tool-label {
248+
color: #ddd;
249+
}
250+
115251
.categories {
116252
font-size: 14px;
253+
list-style-type: none;
254+
}
255+
256+
.category {
257+
position: relative;
258+
color: #fff;
259+
}
260+
261+
.category-button {
262+
position: absolute;
263+
left: -12px;
264+
top: 4px;
265+
background-color: transparent;
266+
color: #ddd;
267+
border: none;
268+
appearance: none;
269+
cursor: pointer;
270+
padding: 0;
271+
}
272+
273+
.category-button--close {
274+
transform: rotate(90deg);
117275
}
118276
119277
.category-title {
120278
font-size: 14px;
121279
font-weight: bold;
122280
}
123281
282+
.eslint-plugin-svelte__category .category-title,
283+
.eslint-plugin-svelte__rule a {
284+
color: #40b3ff;
285+
}
286+
287+
.eslint-category .category-title,
288+
.eslint-rule a {
289+
color: #8080f2;
290+
}
291+
124292
.rules {
125293
padding-left: 0;
126294
}
@@ -135,17 +303,11 @@ export default {
135303
136304
.rule a {
137305
margin-left: auto;
306+
display: inline-flex;
307+
align-items: center;
138308
}
139309
140310
a {
141311
text-decoration: none;
142312
}
143-
144-
.category {
145-
color: #fff;
146-
}
147-
148-
.eslint-plugin-svelte__category {
149-
color: #ffdcd3;
150-
}
151313
</style>

‎docs/.vuepress/components/rules/index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,13 @@ const CATEGORY_CLASSES = {
4141
"Stylistic Issues": "eslint-plugin-svelte__category",
4242
"Extension Rules": "eslint-plugin-svelte__category",
4343
System: "eslint-plugin-svelte__category",
44+
"eslint-core-rules@Possible Errors": "eslint-category",
45+
"eslint-core-rules@Best Practices": "eslint-category",
46+
"eslint-core-rules@Strict Mode": "eslint-category",
47+
"eslint-core-rules@Variables": "eslint-category",
48+
"[email protected] and CommonJS": "eslint-category",
49+
"eslint-core-rules@Stylistic Issues": "eslint-category",
50+
"eslint-core-rules@ECMAScript 6": "eslint-category",
4451
}
4552

4653
const allRules = []
@@ -64,6 +71,7 @@ for (const k of Object.keys(plugin.rules)) {
6471
for (const k of Object.keys(coreRules)) {
6572
const rule = coreRules[k]
6673
allRules.push({
74+
classes: "eslint-rule",
6775
category: `eslint-core-rules@${rule.meta.docs.category}`,
6876
fallbackTitle: `ESLint core rules(${rule.meta.docs.category})`,
6977
ruleId: k,

0 commit comments

Comments
 (0)