Skip to content

Commit b9c5979

Browse files
AkryumAkryum
committed
feat: basic fonctionality, welcome and kill port widgets
1 parent 5e261be commit b9c5979

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1915
-27
lines changed

‎packages/@vue/cli-ui-addon-widgets/.browserslistrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> 1%
2+
last 2 versions
3+
not ie <= 8

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
node: true
5+
},
6+
'extends': [
7+
'plugin:vue/essential',
8+
'@vue/standard'
9+
],
10+
rules: {
11+
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12+
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13+
},
14+
parserOptions: {
15+
parser: 'babel-eslint'
16+
},
17+
globals: {
18+
ClientAddonApi: false,
19+
mapSharedData: false,
20+
Vue: false
21+
}
22+
}

‎packages/@vue/cli-ui-addon-widgets/.gitignore

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
14+
# Editor directories and files
15+
.idea
16+
.vscode
17+
*.suo
18+
*.ntvs*
19+
*.njsproj
20+
*.sln
21+
*.sw*

‎packages/@vue/cli-ui-addon-widgets/README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# cli-ui-addon-widgets
2+
3+
## Project setup
4+
```
5+
yarn install
6+
```
7+
8+
### Compiles and hot-reloads for development
9+
```
10+
yarn run serve
11+
```
12+
13+
### Compiles and minifies for production
14+
```
15+
yarn run build
16+
```
17+
18+
### Lints and fixes files
19+
```
20+
yarn run lint
21+
```

‎packages/@vue/cli-ui-addon-widgets/babel.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/app'
4+
]
5+
}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "cli-ui-addon-widgets",
3+
"version": "3.0.3",
4+
"files": [
5+
"dist",
6+
"src"
7+
],
8+
"scripts": {
9+
"serve": "vue-cli-service serve",
10+
"build": "vue-cli-service build",
11+
"lint": "vue-cli-service lint",
12+
"prepublishOnly": "yarn run lint --no-fix && yarn run build"
13+
},
14+
"devDependencies": {
15+
"@vue/cli-plugin-babel": "^3.0.3",
16+
"@vue/cli-plugin-eslint": "^3.0.3",
17+
"@vue/cli-service": "^3.0.3",
18+
"@vue/eslint-config-standard": "^3.0.3",
19+
"stylus": "^0.54.5",
20+
"stylus-loader": "^3.0.2",
21+
"vue-template-compiler": "^2.5.17"
22+
},
23+
"publishConfig": {
24+
"access": "public"
25+
}
26+
}

‎packages/@vue/cli-ui-addon-widgets/postcss.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
plugins: {
3+
autoprefixer: {}
4+
}
5+
}

‎packages/@vue/cli-ui-addon-widgets/public/favicon.ico

1.12 KB
Binary file not shown.

‎packages/@vue/cli-ui-addon-widgets/public/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8+
<title>cli-ui-addon-widgets</title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but cli-ui-addon-widgets doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎packages/@vue/cli-ui-addon-widgets/src/components/DependencyUpdates.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div class="dependency-updates">
3+
Updates
4+
</div>
5+
</template>

‎packages/@vue/cli-ui-addon-widgets/src/components/KillPort.vue

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<template>
2+
<div
3+
class="kill-port"
4+
:class="[
5+
`status-${status}`
6+
]"
7+
>
8+
<div class="wrapper">
9+
<div class="status">
10+
<VueLoadingIndicator
11+
v-if="status === 'killing'"
12+
class="icon"
13+
/>
14+
<VueIcon
15+
v-else
16+
:icon="icon"
17+
class="icon large"
18+
/>
19+
<div class="info">
20+
{{ $t(`org.vue.widgets.kill-port.status.${status}`) }}
21+
</div>
22+
</div>
23+
24+
<div class="actions">
25+
<VueInput
26+
v-model="port"
27+
:placeholder="$t('org.vue.widgets.kill-port.input.placeholder')"
28+
class="input big"
29+
type="number"
30+
@keyup.enter="kill()"
31+
/>
32+
<VueButton
33+
:label="$t('org.vue.widgets.kill-port.kill')"
34+
icon-left="flash_on"
35+
class="primary big"
36+
@click="kill()"
37+
/>
38+
</div>
39+
</div>
40+
</div>
41+
</template>
42+
43+
<script>
44+
const ICONS = {
45+
idle: 'flash_on',
46+
killed: 'check_circle',
47+
error: 'error'
48+
}
49+
50+
export default {
51+
sharedData () {
52+
return mapSharedData('org.vue.widgets.kill-port.', {
53+
status: 'status'
54+
})
55+
},
56+
57+
data () {
58+
return {
59+
port: ''
60+
}
61+
},
62+
63+
computed: {
64+
icon () {
65+
return ICONS[this.status] || ICONS.idle
66+
},
67+
68+
inputValid () {
69+
return /\d+/.test(this.port)
70+
}
71+
},
72+
73+
watch: {
74+
status (value) {
75+
if (value === 'killed') {
76+
this.port = ''
77+
}
78+
if (value !== 'killing' && value !== 'idle') {
79+
this.$_statusTimer = setTimeout(() => {
80+
this.status = 'idle'
81+
}, 3000)
82+
}
83+
}
84+
},
85+
86+
methods: {
87+
kill () {
88+
clearTimeout(this.$_statusTimer)
89+
this.$callPluginAction('org.vue.widgets.actions.kill-port', {
90+
port: this.port
91+
})
92+
}
93+
}
94+
}
95+
</script>
96+
97+
<style lang="stylus" scoped>
98+
@import "~@vue/cli-ui/src/style/imports"
99+
100+
.wrapper
101+
height 100%
102+
position relative
103+
padding $padding-item
104+
box-sizing border-box
105+
v-box()
106+
justify-content space-between
107+
108+
.status
109+
color $vue-ui-color-primary
110+
.icon
111+
position relative
112+
left (-($padding-item * 2))
113+
margin-right (-($padding-item * 2) + 4px)
114+
>>> svg
115+
fill @color
116+
.info
117+
font-size 24px
118+
font-weight lighter
119+
120+
.status-error
121+
.status
122+
color $vue-ui-color-danger
123+
.icon >>> svg
124+
fill @color
125+
126+
.status,
127+
.actions
128+
h-box()
129+
box-center()
130+
131+
.input
132+
flex 1
133+
margin-right $padding-item
134+
</style>

‎packages/@vue/cli-ui-addon-widgets/src/components/PluginUpdates.vue

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<div class="plugin-updates">
3+
<StatusWidget
4+
v-if="status"
5+
:icon="icons[status.status]"
6+
/>
7+
</div>
8+
</template>
9+
10+
<script>
11+
import { UPDATES_ICONS } from '../util/icons'
12+
13+
import StatusWidget from './StatusWidget.vue'
14+
15+
export default {
16+
components: {
17+
StatusWidget
18+
},
19+
20+
sharedData () {
21+
return mapSharedData('org.vue.widgets.plugin-updates.', {
22+
status: 'status'
23+
})
24+
},
25+
26+
created () {
27+
this.icons = UPDATES_ICONS
28+
}
29+
}
30+
</script>

‎packages/@vue/cli-ui-addon-widgets/src/components/StatusWidget.vue

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<div class="status-widget">
3+
<div class="icon-wrapper">
4+
<ItemLogo
5+
:image="icon"
6+
class="icon"
7+
:class="iconClass"
8+
/>
9+
<VueIcon
10+
v-if="secondaryIcon"
11+
:icon="secondaryIcon"
12+
class="secondary-icon"
13+
/>
14+
</div>
15+
16+
<div class="info">
17+
<div class="title" v-html="title"/>
18+
<div class="description" v-html="description"/>
19+
</div>
20+
</div>
21+
</template>
22+
23+
<script>
24+
export default {
25+
props: {
26+
icon: {
27+
type: String,
28+
required: true
29+
},
30+
31+
iconClass: {
32+
type: [String, Array, Object],
33+
default: undefined
34+
},
35+
36+
secondaryIcon: {
37+
type: String,
38+
default: undefined
39+
},
40+
41+
title: {
42+
type: String,
43+
required: true
44+
},
45+
46+
description: {
47+
type: String,
48+
required: true
49+
}
50+
}
51+
}
52+
</script>
53+
54+
<style lang="stylus" scoped>
55+
@import "~@vue/cli-ui/src/style/imports"
56+
57+
.status-widget
58+
h-box()
59+
box-center()
60+
61+
.icon-wrapper
62+
position relative
63+
</style>

0 commit comments

Comments
 (0)