Skip to content

Commit b9a714c

Browse files
author
Guillaume Chau
committed
feat(ui): wip plugins list
1 parent 601fb1f commit b9a714c

40 files changed

+501
-151
lines changed

‎packages/@vue/cli-shared-utils/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
'validate',
66
'openBrowser',
77
'pluginResolution',
8-
'exit'
8+
'exit',
9+
'request'
910
].forEach(m => {
1011
Object.assign(exports, require(`./lib/${m}`))
1112
})

‎packages/@vue/cli/lib/util/request.js ‎packages/@vue/cli-shared-utils/lib/request.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const request = require('request-promise-native')
22

3-
module.exports = {
4-
async get (uri) {
3+
exports.request = {
4+
get (uri) {
55
const reqOpts = {
66
method: 'GET',
77
resolveWithFullResponse: true,

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

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"dependencies": {
1212
"graphql": "^0.13.0",
1313
"lowdb": "^1.0.0",
14+
"lru-cache": "^4.1.2",
1415
"mkdirp": "^0.5.1",
1516
"rimraf": "^2.6.2",
1617
"shortid": "^2.2.8"

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

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<template>
2+
<div class="content-view">
3+
<div class="header">
4+
<h2 v-if="title" class="title">{{ title }}</h2>
5+
<slot name="header"/>
6+
</div>
7+
8+
<div class="content">
9+
<slot/>
10+
</div>
11+
</div>
12+
</template>
13+
14+
<script>
15+
export default {
16+
props: {
17+
title: {
18+
type: String,
19+
default: false
20+
}
21+
}
22+
}
23+
</script>
24+
25+
<style lang="stylus" scoped>
26+
@import "~@/style/imports"
27+
28+
.content-view
29+
height 100%
30+
display grid
31+
grid-template-columns 1fr
32+
grid-template-rows auto 1fr
33+
grid-template-areas "header" "content"
34+
35+
.header
36+
grid-area header
37+
h-box()
38+
box-center()
39+
background $vue-color-light-neutral
40+
padding $padding-item
41+
42+
.title
43+
flex 100% 1 1
44+
width 0
45+
margin 0
46+
47+
>>> > *
48+
space-between-x($padding-item)
49+
50+
.content
51+
grid-area content
52+
position relative
53+
</style>

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

-5
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,6 @@
101101
</template>
102102

103103
<script>
104-
import FolderExplorerItem from './FolderExplorerItem'
105104
import FOLDER_CURRENT from '../graphql/folderCurrent.gql'
106105
import FOLDERS_FAVORITE from '../graphql/foldersFavorite.gql'
107106
import FOLDER_OPEN from '../graphql/folderOpen.gql'
@@ -110,10 +109,6 @@ import FOLDER_SET_FAVORITE from '../graphql/folderSetFavorite.gql'
110109
import PROJECT_CWD_RESET from '../graphql/projectCwdReset.gql'
111110
112111
export default {
113-
components: {
114-
FolderExplorerItem,
115-
},
116-
117112
data () {
118113
return {
119114
error: false,

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

+13-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@
66
}"
77
>
88
<div class="name">{{ name }}</div>
9-
<div v-if="description || link" class="description">
10-
{{ description }}
9+
<div v-if="description || link || showDescription" class="description">
10+
<slot name="description">
11+
{{ description }}
12+
</slot>
1113
<a
1214
v-if="link"
1315
:href="link"
@@ -41,6 +43,11 @@ export default {
4143
selected: {
4244
type: Boolean,
4345
default: false
46+
},
47+
48+
showDescription: {
49+
type: Boolean,
50+
default: false
4451
}
4552
}
4653
}
@@ -57,6 +64,10 @@ export default {
5764
.description
5865
color $color-text-light
5966
67+
>>> .vue-icon
68+
svg
69+
fill @color
70+
6071
&.selected
6172
.name
6273
color $vue-color-primary

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

-6
Original file line numberDiff line numberDiff line change
@@ -65,17 +65,11 @@
6565
</template>
6666

6767
<script>
68-
import LoggerMessage from './LoggerMessage'
69-
7068
import CONSOLE_LOGS from '../graphql/consoleLogs.gql'
7169
import CONSOLE_LOG_LAST from '../graphql/consoleLogLast.gql'
7270
import CONSOLE_LOGS_CLEAR from '../graphql/consoleLogsClear.gql'
7371
7472
export default {
75-
components: {
76-
LoggerMessage
77-
},
78-
7973
methods: {
8074
onConsoleLogAdded (previousResult, { subscriptionData }) {
8175
this.scrollToBottom()

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

-6
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,7 @@
2020
</template>
2121

2222
<script>
23-
import ListItemInfo from './ListItemInfo'
24-
2523
export default {
26-
components: {
27-
ListItemInfo
28-
},
29-
3024
props: {
3125
feature: {
3226
type: Object,

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

+46-16
Original file line numberDiff line numberDiff line change
@@ -7,33 +7,63 @@
77
indicator
88
>
99
<VueGroupButton
10+
v-for="route of routes"
11+
:key="route.name"
1012
class="flat big icon-button"
11-
value="plugins"
12-
icon-left="widgets"
13-
v-tooltip.right="'Plugins'"
14-
/>
15-
<VueGroupButton
16-
class="flat big icon-button"
17-
value="config"
18-
icon-left="settings_applications"
19-
v-tooltip.right="'Configurations'"
20-
/>
21-
<VueGroupButton
22-
class="flat big icon-button"
23-
value="tasks"
24-
icon-left="assignment"
25-
v-tooltip.right="'Tasks'"
13+
:value="route.name"
14+
:icon-left="route.icon"
15+
v-tooltip.right="route.tooltip"
2616
/>
2717
</VueGroup>
2818
</div>
2919
</div>
3020
</template>
3121

3222
<script>
23+
const BUILTIN_ROUTES = [
24+
{
25+
name: 'project-plugins',
26+
icon: 'widgets',
27+
tooltip: 'Plugins'
28+
},
29+
{
30+
name: 'project-configuration',
31+
icon: 'settings_applications',
32+
tooltip: 'Configuration'
33+
},
34+
{
35+
name: 'project-tasks',
36+
icon: 'assignment',
37+
tooltip: 'Tasks'
38+
}
39+
]
40+
3341
export default {
3442
data () {
3543
return {
36-
currentRoute: 'plugins'
44+
currentRoute: null,
45+
routes: [
46+
...BUILTIN_ROUTES
47+
// Plugins routes here
48+
// TODO
49+
]
50+
}
51+
},
52+
53+
watch: {
54+
currentRoute (name) {
55+
if (this.$route.name !== name) {
56+
this.$router.push({ name })
57+
}
58+
},
59+
60+
'$route.name': {
61+
handler (value) {
62+
if (value !== this.currentRoute) {
63+
this.currentRoute = value
64+
}
65+
},
66+
immediate: true
3767
}
3868
}
3969
}

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

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<div class="project-plugin-item list-item">
3+
<ListItemInfo
4+
:name="plugin.id"
5+
:link="plugin.website"
6+
show-description
7+
>
8+
<span slot="description" class="plugin-description">
9+
<span class="info version">
10+
<span class="label">version</span>
11+
<span class="value">{{ plugin.version.current }}</span>
12+
</span>
13+
14+
<span class="info latest">
15+
<span class="label">latest</span>
16+
<VueIcon
17+
v-if="plugin.version.current !== plugin.version.latest"
18+
icon="warning"
19+
class="top medium"
20+
/>
21+
<span class="value">{{ plugin.version.latest }}</span>
22+
</span>
23+
24+
<span v-if="plugin.official" class="info">
25+
<VueIcon
26+
icon="star"
27+
class="top medium"
28+
/>
29+
Official
30+
</span>
31+
32+
<span v-if="plugin.installed" class="info">
33+
<VueIcon
34+
icon="check_circle"
35+
class="top medium"
36+
/>
37+
Installed
38+
</span>
39+
40+
<span v-if="plugin.description" class="package-description">
41+
{{ plugin.description }}
42+
</span>
43+
</span>
44+
</ListItemInfo>
45+
</div>
46+
</template>
47+
48+
<script>
49+
export default {
50+
props: {
51+
plugin: {
52+
type: Object,
53+
required: true
54+
}
55+
}
56+
}
57+
</script>
58+
59+
<style lang="stylus" scoped>
60+
@import "~@/style/imports"
61+
62+
.project-plugin-item
63+
padding $padding-item
64+
65+
.plugin-description
66+
margin-right $padding-item
67+
68+
.label
69+
opacity .7
70+
71+
.info
72+
space-between-x($padding-item)
73+
>>> > *
74+
space-between-x(4px)
75+
76+
.package-description
77+
font-style italic
78+
opacity .7
79+
</style>

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

-6
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,7 @@
2626
</template>
2727

2828
<script>
29-
import ListItemInfo from './ListItemInfo'
30-
3129
export default {
32-
components: {
33-
ListItemInfo
34-
},
35-
3630
props: {
3731
preset: {
3832
type: Object,

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

+1-7
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,11 @@
2727
</template>
2828

2929
<script>
30-
import ProjectSelectListItem from './ProjectSelectListItem'
31-
3230
import PROJECTS from '../graphql/projects.gql'
3331
import PROJECT_OPEN from '../graphql/projectOpen.gql'
3432
import PROJECT_REMOVE from '../graphql/projectRemove.gql'
3533
3634
export default {
37-
components: {
38-
ProjectSelectListItem
39-
},
40-
4135
methods: {
4236
async openProject (project) {
4337
await this.$apollo.mutate({
@@ -47,7 +41,7 @@ export default {
4741
}
4842
})
4943
50-
this.$router.push({ name: 'home' })
44+
this.$router.push({ name: 'project-home' })
5145
},
5246
5347
async removeProject (project) {

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

-6
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,7 @@
2828
</template>
2929

3030
<script>
31-
import ListItemInfo from './ListItemInfo'
32-
3331
export default {
34-
components: {
35-
ListItemInfo
36-
},
37-
3832
props: {
3933
project: {
4034
type: Object,

0 commit comments

Comments
 (0)