Skip to content

Commit ee59f54

Browse files
author
Guillaume Chau
committed
feat(ui): ProjectCreate features tab
1 parent d0703b0 commit ee59f54

18 files changed

+279
-47
lines changed

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

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<template>
2+
<div
3+
class="project-feature-item"
4+
:class="{
5+
enabled: feature.enabled
6+
}"
7+
>
8+
<VueSwitch
9+
:value="feature.enabled"
10+
class="extend-left"
11+
>
12+
<div class="content">
13+
<div class="name">{{ feature.name }}</div>
14+
<div class="description">
15+
{{ feature.description }}
16+
<a
17+
v-if="feature.link"
18+
:href="feature.link"
19+
target="_blank"
20+
@click.stop="() => {}"
21+
>
22+
More info
23+
</a>
24+
</div>
25+
</div>
26+
</VueSwitch>
27+
</div>
28+
</template>
29+
30+
<script>
31+
export default {
32+
props: {
33+
feature: {
34+
type: Object,
35+
required: true
36+
}
37+
}
38+
}
39+
</script>
40+
41+
<style lang="stylus" scoped>
42+
@import "~@/style/imports"
43+
44+
.project-feature-item
45+
user-select none
46+
cursor pointer
47+
48+
.vue-switch
49+
padding 12px
50+
width 100%
51+
box-sizing border-box
52+
53+
.content
54+
display grid
55+
grid-template-columns 1fr
56+
grid-template-rows repeat(2, 24px)
57+
grid-template-areas "name" "description"
58+
59+
.name
60+
grid-area name
61+
62+
.description
63+
grid-area description
64+
color lighten($vue-color-dark, 40%)
65+
66+
&.enabled
67+
background rgba($vue-color-primary, .05)
68+
.name
69+
color $vue-color-primary
70+
71+
&:hover
72+
background rgba($vue-color-primary, .1)
73+
74+
</style>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default {
4848
.content
4949
display grid
5050
grid-template-columns 64px auto
51-
grid-template-rows 24px 24px
51+
grid-template-rows repeat(2, 24px)
5252
grid-template-areas "icon name" "icon description"
5353
5454
.radio-icon

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

+103-26
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ const cwd = require('./cwd')
66

77
let currentProject = null
88
let creator = null
9+
let presets = []
10+
let features = []
911

1012
function list (context) {
1113
return context.db.get('projects').value()
@@ -26,44 +28,119 @@ function generatePresetDescription (preset) {
2628
}
2729

2830
function generateProjectCreation (creator) {
29-
const presets = creator.getPresets()
3031
return {
31-
presets: [
32-
...Object.keys(presets).map(
33-
key => {
34-
const preset = presets[key]
35-
const features = getFeatures(preset).map(
36-
f => toShortPluginId(f)
37-
)
38-
const info = {
39-
id: key,
40-
name: key === 'default' ? 'Default preset' : key,
41-
features,
42-
raw: preset
43-
}
44-
info.description = generatePresetDescription(info)
45-
return info
32+
presets,
33+
features
34+
}
35+
}
36+
37+
function initCreator () {
38+
const creator = new Creator('', cwd.get(), getPromptModules())
39+
40+
// Presets
41+
const presetsData = creator.getPresets()
42+
presets = [
43+
...Object.keys(presetsData).map(
44+
key => {
45+
const preset = presetsData[key]
46+
const features = getFeatures(preset).map(
47+
f => toShortPluginId(f)
48+
)
49+
const info = {
50+
id: key,
51+
name: key === 'default' ? 'Default preset' : key,
52+
features,
53+
raw: preset
4654
}
47-
),
48-
{
49-
id: 'manual',
50-
name: 'No preset',
51-
description: 'No included features',
52-
features: []
55+
info.description = generatePresetDescription(info)
56+
return info
5357
}
54-
]
55-
}
58+
),
59+
{
60+
id: 'manual',
61+
name: 'No preset',
62+
description: 'No included features',
63+
features: []
64+
}
65+
]
66+
67+
// Features
68+
const featuresData = creator.featurePrompt.choices
69+
features = [
70+
...featuresData.map(
71+
data => ({
72+
id: data.value,
73+
name: data.name,
74+
description: data.description || null,
75+
link: data.link || null,
76+
plugins: data.plugins || null,
77+
enabled: false
78+
})
79+
),
80+
{
81+
id: 'use-config-files',
82+
name: 'Use config files',
83+
description: `Use specific configuration files (like '.babelrc') instead of using 'package.json'.`,
84+
link: null,
85+
plugins: null,
86+
enabled: false
87+
}
88+
]
89+
90+
return creator
5691
}
5792

5893
function getCreation (context) {
5994
if (!creator) {
60-
creator = new Creator('', cwd.get(), getPromptModules())
95+
creator = initCreator()
6196
}
6297
return generateProjectCreation(creator)
6398
}
6499

100+
function setFeatureEnabled ({ id, enabled }, context) {
101+
const feature = features.find(f => f.id === id)
102+
if (feature) {
103+
feature.enabled = enabled
104+
} else {
105+
console.warn(`Feature '${id}' not found`)
106+
}
107+
return feature
108+
}
109+
110+
function applyPreset (id, context) {
111+
const preset = presets.find(p => p.id === id)
112+
if (preset) {
113+
for (const feature of features) {
114+
feature.enabled = !!(
115+
preset.features.includes(feature.id) ||
116+
(feature.plugins && preset.features.some(f => feature.plugins.includes(f)))
117+
)
118+
}
119+
if (preset.raw) {
120+
if (preset.raw.router) {
121+
setFeatureEnabled({ id: 'router', enabled: true }, context)
122+
}
123+
if (preset.raw.vuex) {
124+
setFeatureEnabled({ id: 'vuex', enabled: true }, context)
125+
}
126+
if (preset.raw.cssPreprocessor) {
127+
setFeatureEnabled({ id: 'css-preprocessor', enabled: true }, context)
128+
}
129+
if (preset.raw.useConfigFiles) {
130+
setFeatureEnabled({ id: 'use-config-files', enabled: true }, context)
131+
}
132+
}
133+
} else {
134+
console.warn(`Preset '${id}' not found`)
135+
}
136+
137+
return generateProjectCreation(creator)
138+
}
139+
65140
module.exports = {
66141
list,
67142
getCurrent,
68-
getCreation
143+
getCreation,
144+
applyPreset,
145+
setFeatureEnabled
69146
}

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@ module.exports = {
2525
folderSetFavorite: (root, args, context) => folders.setFavorite({
2626
file: args.path,
2727
favorite: args.favorite
28-
}, context)
28+
}, context),
29+
presetApply: (root, { id }, context) => projects.applyPreset(id, context),
30+
featureSetEnabled: (root, args, context) => projects.setFeatureEnabled(args, context)
2931
},
3032

3133
Subscription: {

‎packages/@vue/cli-ui/src/graphql-api/type-defs.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,9 @@ input PluginSearchInput {
7575
7676
type Feature {
7777
id: ID!
78-
label: String!
79-
description: String!
80-
link: String!
78+
name: String!
79+
description: String
80+
link: String
8181
enabled: Boolean!
8282
}
8383
@@ -128,6 +128,7 @@ type Preset {
128128
129129
type ProjectCreation {
130130
presets: [Preset]
131+
features: [Feature]
131132
}
132133
133134
type Query {
@@ -148,6 +149,8 @@ type Mutation {
148149
projectImport (input: ProjectImportInput!): Project!
149150
projectOpen (id: ID!): Project!
150151
projectSetFavorite (id: ID!, favorite: Int!): Project!
152+
presetApply (id: ID!): ProjectCreation
153+
featureSetEnabled (id: ID!, enabled: Boolean): Feature
151154
pluginAdd (id: ID!): Plugin
152155
promptAnswer (input: PromptInput!): Prompt
153156
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
fragment feature on Feature {
22
id
3-
label
3+
name
44
description
55
link
66
enabled

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
#import "./featureFragment.gql"
2+
3+
mutation featureSetEnabled ($id: ID!, $enabled: Boolean!) {
4+
featureSetEnabled (id: $id, enabled: $enabled) {
5+
...feature
6+
}
7+
}

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
#import "./projectCreationFragment.gql"
2+
3+
mutation presetApply ($id: ID!) {
4+
presetApply(id: $id) {
5+
...projectCreation
6+
}
7+
}

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

+4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
#import "./presetFragment.gql"
2+
#import "./featureFragment.gql"
23

34
fragment projectCreation on ProjectCreation {
45
presets {
56
...preset
67
}
8+
features {
9+
...feature
10+
}
711
}

0 commit comments

Comments
 (0)