Skip to content

Commit 6af029e

Browse files
author
Guillaume Chau
committed
feat(ui): Prompt groups + fixes + some vue eslint config
1 parent 5fdb9b4 commit 6af029e

File tree

7 files changed

+193
-37
lines changed

7 files changed

+193
-37
lines changed

‎packages/@vue/cli-plugin-eslint/ui.js

Lines changed: 131 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,17 @@ module.exports = api => {
1212
package: 'eslintConfig'
1313
},
1414
onRead: ({ data }) => {
15+
console.log('rules', data.rules)
1516
return {
1617
prompts: [
1718
{
18-
name: 'rules.commaDangle',
19+
name: 'vue/attribute-hyphenation',
1920
type: 'list',
20-
message: 'Trailing commas',
21-
description: 'Enforce or disallow trailing commas at the end of the lines',
22-
link: 'https://eslint.org/docs/rules/comma-dangle',
23-
default: JSON.stringify(['error', 'never']),
21+
message: 'Attribute hyphenation',
22+
group: 'Strongly recommended',
23+
description: 'Enforce attribute naming style in template (`my-prop` or `myProp`)',
24+
link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/attribute-hyphenation.md',
25+
default: JSON.stringify('off'),
2426
choices: [
2527
{
2628
name: 'Off',
@@ -33,25 +35,140 @@ module.exports = api => {
3335
{
3436
name: 'Always',
3537
value: JSON.stringify(['error', 'always'])
38+
}
39+
],
40+
value: data.rules && JSON.stringify(data.rules['vue/attribute-hyphenation'])
41+
},
42+
{
43+
name: 'vue/html-end-tags',
44+
type: 'confirm',
45+
message: 'Template end tags style',
46+
group: 'Strongly recommended',
47+
description: 'End tag on Void elements, end tags and self-closing opening tags',
48+
link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-end-tags.md',
49+
default: false,
50+
value: data.rules && data.rules['vue/html-end-tags'] === 'error',
51+
filter: input => JSON.stringify(input ? 'error' : 'off')
52+
},
53+
{
54+
name: 'vue/html-indent',
55+
type: 'list',
56+
message: 'Template indentation',
57+
group: 'Strongly recommended',
58+
description: 'Enforce indentation in template',
59+
link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-indent.md',
60+
default: JSON.stringify('off'),
61+
choices: [
62+
{
63+
name: 'Off',
64+
value: JSON.stringify('off')
65+
},
66+
{
67+
name: 'Tabs',
68+
value: JSON.stringify(['error', 'tabs'])
69+
},
70+
{
71+
name: '2 spaces',
72+
value: JSON.stringify(['error', 2])
73+
},
74+
{
75+
name: '4 spaces',
76+
value: JSON.stringify(['error', 4])
3677
},
3778
{
38-
name: 'Always on multiline',
39-
value: JSON.stringify(['error', 'always-multiline'])
79+
name: '8 spaces',
80+
value: JSON.stringify(['error', 8])
81+
}
82+
],
83+
value: data.rules && JSON.stringify(data.rules['vue/html-indent'])
84+
},
85+
{
86+
name: 'vue/html-self-closing',
87+
type: 'confirm',
88+
message: 'Template tag self-closing style',
89+
group: 'Strongly recommended',
90+
description: 'Self-close any component or non-Void element tags',
91+
link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-self-closing.md',
92+
default: false,
93+
value: data.rules && data.rules['vue/html-self-closing'] === 'error',
94+
filter: input => JSON.stringify(input ? 'error' : 'off')
95+
},
96+
{
97+
name: 'vue/require-default-prop',
98+
type: 'confirm',
99+
message: 'Require default in required props',
100+
group: 'Strongly recommended',
101+
description: 'This rule requires default value to be set for each props that are not marked as `required`',
102+
link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-default-prop.md',
103+
default: false,
104+
value: data.rules && data.rules['vue/require-default-prop'] === 'error',
105+
filter: input => JSON.stringify(input ? 'error' : 'off')
106+
},
107+
{
108+
name: 'vue/require-prop-types',
109+
type: 'confirm',
110+
message: 'Require types for props',
111+
group: 'Strongly recommended',
112+
description: 'In committed code, prop definitions should always be as detailed as possible, specifying at least type(s)',
113+
link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-prop-types.md',
114+
default: false,
115+
value: data.rules && data.rules['vue/require-prop-types'] === 'error',
116+
filter: input => JSON.stringify(input ? 'error' : 'off')
117+
},
118+
{
119+
name: 'vue/attributes-order',
120+
type: 'confirm',
121+
message: 'Attribute order',
122+
group: 'Recommended',
123+
description: 'This rule aims to enforce ordering of component attributes (the default order is specified in the Vue style guide)',
124+
link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/attributes-order.md',
125+
default: false,
126+
value: data.rules && data.rules['vue/attributes-order'] === 'error',
127+
filter: input => JSON.stringify(input ? 'error' : 'off')
128+
},
129+
{
130+
name: 'vue/html-quotes',
131+
type: 'list',
132+
message: 'Attribute quote style',
133+
group: 'Recommended',
134+
description: 'Enforce style of the attribute quotes in templates',
135+
link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-quotes.md',
136+
default: JSON.stringify('off'),
137+
choices: [
138+
{
139+
name: 'Off',
140+
value: JSON.stringify('off')
40141
},
41142
{
42-
name: 'Only on multiline',
43-
value: JSON.stringify(['error', 'only-multiline'])
143+
name: 'Double quotes',
144+
value: JSON.stringify(['error', 'double'])
145+
},
146+
{
147+
name: 'Single quotes',
148+
value: JSON.stringify(['error', 'single'])
44149
}
45150
],
46-
value: JSON.stringify(data.rules && data.rules['comma-dangle'])
151+
value: data.rules && JSON.stringify(data.rules['vue/html-quotes'])
152+
},
153+
{
154+
name: 'vue/order-in-components',
155+
type: 'confirm',
156+
message: 'Component options order',
157+
group: 'Recommended',
158+
description: 'This rule aims to enforce ordering of component options (the default order is specified in the Vue style guide)',
159+
link: 'https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/order-in-components.md',
160+
default: false,
161+
value: data.rules && data.rules['vue/order-in-components'] === 'error',
162+
filter: input => JSON.stringify(input ? 'error' : 'off')
47163
}
48164
]
49165
}
50166
},
51-
onWrite: ({ api }) => {
52-
api.setData({
53-
'rules.comma-dangle': api.getAnswer('rules.commaDangle', JSON.parse)
54-
})
167+
onWrite: ({ api, prompts }) => {
168+
api.setData(prompts.reduce((obj, prompt) => {
169+
obj[`rules.${prompt.id}`] = api.getAnswer(prompt.id, JSON.parse)
170+
return obj
171+
}, {}))
55172
}
56173
})
57174

‎packages/@vue/cli-ui/src/components/ListItemInfo.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</div>
1313
<div v-if="description || link || showDescription" class="description">
1414
<slot name="description">
15-
{{ description }}
15+
<span v-html="description"/>
1616
</slot>
1717
<a
1818
v-if="link"

‎packages/@vue/cli-ui/src/components/PromptsList.vue

Lines changed: 43 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
<template>
22
<div class="prompts-list">
33
<div class="content">
4-
<component
5-
v-for="prompt of prompts"
6-
v-if="prompt.visible"
7-
:key="prompt.id"
8-
:is="getModule(prompt)"
9-
:prompt="prompt"
10-
@answer="value => $emit('answer', { prompt, value })"
11-
/>
4+
<div
5+
v-for="group of groups"
6+
:key="group.id"
7+
class="group"
8+
>
9+
<div v-if="group.id" class="group-name">{{ $t(group.id) }}</div>
10+
11+
<component
12+
v-for="prompt of group.prompts"
13+
v-if="prompt.visible"
14+
:key="prompt.id"
15+
:is="getModule(prompt)"
16+
:prompt="prompt"
17+
@answer="value => $emit('answer', { prompt, value })"
18+
/>
19+
</div>
1220

1321
<div v-if="!prompts.length" class="vue-ui-empty">
1422
<VueIcon icon="check_circle" class="empty-icon"/>
@@ -32,6 +40,25 @@ export default {
3240
}
3341
},
3442
43+
computed: {
44+
groups () {
45+
const groupMap = {}
46+
const groups = []
47+
this.prompts.forEach(prompt => {
48+
let group = groups[prompt.group]
49+
if (!group) {
50+
group = groups[prompt.group] = {
51+
id: prompt.group,
52+
prompts: []
53+
}
54+
groups.push(group)
55+
}
56+
group.prompts.push(prompt)
57+
})
58+
return groups
59+
}
60+
},
61+
3562
methods: {
3663
getModule (prompt) {
3764
let type = prompt.type
@@ -48,4 +75,12 @@ export default {
4875
<style lang="stylus" scoped>
4976
@import "~@/style/imports"
5077
78+
.group
79+
margin-bottom ($padding-item * 2)
80+
81+
.group-name
82+
padding $padding-item $padding-item ($padding-item / 2)
83+
font-size 1.6em
84+
font-weight lighter
85+
color $vue-ui-color-accent
5186
</style>

‎packages/@vue/cli-ui/src/graphql-api/connectors/configurations.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@ function save (id, context) {
114114
const answers = prompts.getAnswers()
115115
let data = clone(current.data)
116116
config.onWrite({
117+
prompts: prompts.list(),
117118
answers,
118119
data,
119120
file: config.file,

‎packages/@vue/cli-ui/src/graphql-api/connectors/prompts.js

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,9 @@ function getValue (prompt, value) {
4343
}
4444

4545
function getDisplayedValue (prompt, value) {
46-
const transform = prompt.raw.transform
47-
if (typeof transform === 'function') {
48-
value = transform(value)
46+
const transformer = prompt.raw.transformer
47+
if (typeof transformer === 'function') {
48+
value = transformer(value, answers)
4949
}
5050
return JSON.stringify(value)
5151
}
@@ -84,10 +84,6 @@ function setAnswer (id, value) {
8484
ObjectUtil.set(answers, id, value)
8585
}
8686

87-
function getAnswer (id) {
88-
return ObjectUtil.get(answers, id)
89-
}
90-
9187
function removeAnswer (id) {
9288
ObjectUtil.remove(answers, id)
9389
}
@@ -100,6 +96,7 @@ function generatePrompt (data) {
10096
enabled: true,
10197
name: data.short || null,
10298
message: data.message,
99+
group: data.group || null,
103100
description: data.description || null,
104101
link: data.link || null,
105102
choices: null,
@@ -122,19 +119,18 @@ function updatePrompts () {
122119
prompt.valueChanged = false
123120
} else if (prompt.visible && !prompt.valueChanged) {
124121
let value
125-
const answer = getAnswer(prompt.id)
126-
if (typeof answer !== 'undefined') {
127-
value = answer
128-
} else if (typeof prompt.raw.value !== 'undefined') {
122+
if (typeof prompt.raw.value !== 'undefined') {
129123
value = prompt.raw.value
130124
} else {
131125
value = getDefaultValue(prompt)
132126
}
133-
prompt.value = getDisplayedValue(prompt, value)
134127
prompt.rawValue = value
128+
prompt.value = getDisplayedValue(prompt, value)
135129
setAnswer(prompt.id, getValue(prompt, value))
136130
}
137131
}
132+
133+
if (process.env.NODE_ENV !== 'production') console.log('answers =', answers)
138134
}
139135

140136
// Public API
@@ -153,6 +149,10 @@ function getAnswers () {
153149
return answers
154150
}
155151

152+
function getAnswer (id) {
153+
return ObjectUtil.get(answers, id)
154+
}
155+
156156
function reset () {
157157
prompts = []
158158
setAnswers({})
@@ -188,9 +188,9 @@ function setValue ({ id, value }) {
188188
} else {
189189
prompt.error = null
190190
}
191-
prompt.value = getDisplayedValue(prompt, value)
192-
prompt.rawValue = value
193191
const finalValue = getValue(prompt, value)
192+
prompt.rawValue = value
193+
prompt.value = getDisplayedValue(prompt, value)
194194
prompt.valueChanged = true
195195
setAnswer(prompt.id, finalValue)
196196
updatePrompts()
@@ -231,6 +231,7 @@ module.exports = {
231231
setAnswers,
232232
changeAnswers,
233233
getAnswers,
234+
getAnswer,
234235
reset,
235236
list,
236237
add,

‎packages/@vue/cli-ui/src/graphql-api/schema/prompt.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ type Prompt implements DescribedEntity {
1414
enabled: Boolean
1515
name: String
1616
message: String
17+
group: String
1718
description: String
1819
link: String
1920
choices: [PromptChoice]

‎packages/@vue/cli-ui/src/graphql/promptFragment.gql

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ fragment prompt on Prompt {
88
enabled
99
name
1010
message
11+
group
1112
description
1213
link
1314
choices {

0 commit comments

Comments
 (0)