Skip to content

Commit a3b2be8

Browse files
Akryumyyx990803
Akryum
authored and
yyx990803
committed
fix(ui): fix beta.12 feedback (#1386)
* fix(ui): npm/yarn installing only dependencies * fix(ui): add all dependencies to package.json * fix(Service): give priority to devDependencies plugins * feat(ui): connection status banner * fix(ui): don't display disconnected banner for initial app load * fix(ui): default value for prompt type=checkbox * feat: builtin prompts default values * fix(ui): circular dep
1 parent 9846cd5 commit a3b2be8

File tree

18 files changed

+219
-21
lines changed

18 files changed

+219
-21
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,8 @@ module.exports = [
3939
choices: [
4040
{
4141
name: 'Lint on save',
42-
value: 'save'
42+
value: 'save',
43+
checked: true
4344
},
4445
{
4546
name: 'Lint and fix on commit' + (hasGit() ? '' : chalk.red(' (requires Git)')),

‎packages/@vue/cli-plugin-typescript/prompts.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ module.exports = [
88
{
99
name: `classComponent`,
1010
type: `confirm`,
11-
message: `Use class-style component syntax?`
11+
message: `Use class-style component syntax?`,
12+
default: true
1213
},
1314
{
1415
name: `useTsWithBabel`,
@@ -28,7 +29,8 @@ module.exports = [
2829
choices: [
2930
{
3031
name: 'Lint on save',
31-
value: 'save'
32+
value: 'save',
33+
checked: true
3234
},
3335
{
3436
name: 'Lint and fix on commit' + (hasGit() ? '' : chalk.red(' (requires Git)')),

‎packages/@vue/cli-service/lib/Service.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,8 +134,8 @@ module.exports = class Service {
134134
? builtInPlugins.concat(inlinePlugins)
135135
: inlinePlugins
136136
} else {
137-
const projectPlugins = Object.keys(this.pkg.dependencies || {})
138-
.concat(Object.keys(this.pkg.devDependencies || {}))
137+
const projectPlugins = Object.keys(this.pkg.devDependencies || {})
138+
.concat(Object.keys(this.pkg.dependencies || {}))
139139
.filter(isPlugin)
140140
.map(idToPlugin)
141141
return builtInPlugins.concat(projectPlugins)

‎packages/@vue/cli-ui/.eslintrc.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,8 @@ module.exports = {
66
],
77
globals: {
88
ClientAddonApi: false
9-
}
9+
},
10+
plugins: [
11+
'graphql'
12+
]
1013
}

‎packages/@vue/cli-ui/locales/en.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
{
22
"components": {
3+
"connection-status": {
4+
"disconnected": "Disconnected from UI server",
5+
"connected": "Connected!"
6+
},
37
"file-diff": {
48
"binary": "Binary file not shown",
59
"actions": {

‎packages/@vue/cli-ui/package.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,30 @@
1616
"test": "yarn run build && cd ../cli-ui-addon-webpack && yarn run build && cd ../cli-ui && yarn run test:run"
1717
},
1818
"dependencies": {
19+
"@vue/cli-shared-utils": "^3.0.0-beta.12",
20+
"chalk": "^2.4.1",
1921
"clone": "^2.1.1",
2022
"deepmerge": "^2.1.0",
23+
"execa": "^0.10.0",
2124
"express-history-api-fallback": "^2.2.1",
2225
"fs-extra": "^6.0.0",
26+
"globby": "^8.0.1",
2327
"graphql": "^0.13.0",
2428
"graphql-tag": "^2.9.2",
2529
"graphql-type-json": "^0.2.0",
30+
"javascript-stringify": "^1.6.0",
2631
"js-yaml": "^3.11.0",
2732
"launch-editor": "^2.2.1",
2833
"lodash.merge": "^4.6.1",
2934
"lowdb": "^1.0.0",
3035
"lru-cache": "^4.1.2",
36+
"node-ipc": "^9.1.1",
3137
"node-notifier": "^5.2.1",
38+
"portfinder": "^1.0.13",
3239
"semver": "^5.5.0",
3340
"shortid": "^2.2.8",
3441
"terminate": "^2.1.0",
35-
"vue-cli-plugin-apollo": "^0.11.0",
42+
"vue-cli-plugin-apollo": "^0.13.0",
3643
"watch": "^1.0.2"
3744
},
3845
"devDependencies": {
@@ -45,6 +52,7 @@
4552
"ansi_up": "^2.0.2",
4653
"cross-env": "^5.1.5",
4754
"eslint": "^4.16.0",
55+
"eslint-plugin-graphql": "^2.1.1",
4856
"file-icons-js": "^1.0.3",
4957
"lint-staged": "^6.0.0",
5058
"start-server-and-test": "^1.4.1",

‎packages/@vue/cli-ui/src/App.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<div id="app" class="app">
3+
<ConnectionStatus v-if="ready" />
34
<div v-if="ready" class="content">
45
<router-view/>
56
</div>
@@ -39,8 +40,11 @@ export default {
3940
.app
4041
display grid
4142
grid-template-columns 1fr
42-
grid-template-rows 1fr auto
43-
grid-template-areas "content" "status"
43+
grid-template-rows auto 1fr auto
44+
grid-template-areas "connection" "content" "status"
45+
46+
.connection-status
47+
grid-area connection
4448
4549
.content
4650
grid-area content

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

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<template>
2+
<ApolloQuery
3+
:query="require('../graphql/connected.gql')"
4+
class="connection-status"
5+
>
6+
<template slot-scope="{ result: { data: { connected } } }">
7+
<transition duration="1000">
8+
<div
9+
v-if="!connected"
10+
class="banner"
11+
>
12+
<div class="content disconnected">
13+
<VueIcon icon="cloud_off" class="medium"/>
14+
<span>{{ $t('components.connection-status.disconnected') }}</span>
15+
</div>
16+
<div class="content connected">
17+
<VueIcon icon="wifi" class="medium"/>
18+
<span>{{ $t('components.connection-status.connected') }}</span>
19+
</div>
20+
</div>
21+
</transition>
22+
</template>
23+
</ApolloQuery>
24+
</template>
25+
26+
<style lang="stylus" scoped>
27+
@import "~@/style/imports"
28+
29+
.content
30+
display flex
31+
align-items center
32+
justify-content center
33+
position absolute
34+
top 0
35+
left 0
36+
width 100%
37+
height 100%
38+
39+
.banner
40+
background $vue-ui-color-danger
41+
color $md-white
42+
height 45px
43+
position relative
44+
.vue-ui-icon
45+
margin-right $padding-item
46+
>>> svg
47+
fill @color
48+
49+
&.v-enter-active,
50+
&.v-leave-active
51+
overflow hidden
52+
&.v-enter-active
53+
transition height .15s ease-out
54+
.vue-ui-icon
55+
animation icon .5s
56+
&.v-leave-active
57+
transition height .15s .85s ease-out, background .15s
58+
.disconnected
59+
animation slide-to-bottom .15s forwards
60+
.connected
61+
animation slide-from-top .15s
62+
&:not(.v-leave-active)
63+
.connected
64+
display none
65+
66+
&.v-enter,
67+
&.v-leave-to
68+
height 0
69+
&.v-leave-to
70+
background $vue-ui-color-success
71+
72+
@keyframes icon
73+
0%
74+
transform scale(.8)
75+
opacity 0
76+
30%
77+
transform scale(.8)
78+
opacity 1
79+
50%
80+
transform scale(1.3)
81+
100%
82+
transform scale(1)
83+
84+
@keyframes slide-to-bottom
85+
0%
86+
transform none
87+
opacity 1
88+
100%
89+
transform translateY(45px)
90+
opacity 0
91+
92+
@keyframes slide-from-top
93+
0%
94+
transform translateY(-45px)
95+
opacity 0
96+
100%
97+
transform none
98+
opacity 1
99+
</style>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ async function getDefaultValue (prompt) {
218218
}
219219

220220
if (prompt.type === 'checkbox') {
221-
const choices = await getChoices(prompt)
221+
const choices = prompt.raw.choices
222222
if (choices) {
223223
return choices.filter(
224224
c => c.checked

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
// GraphQL directives here
3+
}

0 commit comments

Comments
 (0)