Skip to content

Commit cdda3c0

Browse files
AkryumAkryum
committed
feat: news + wip resizing
1 parent 2bffb9b commit cdda3c0

File tree

11 files changed

+479
-10
lines changed

11 files changed

+479
-10
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"@vue/cli-plugin-eslint": "^3.0.3",
1717
"@vue/cli-service": "^3.0.3",
1818
"@vue/eslint-config-standard": "^3.0.3",
19+
"rss-parser": "^3.4.3",
1920
"stylus": "^0.54.5",
2021
"stylus-loader": "^3.0.2",
2122
"vue-template-compiler": "^2.5.17"

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

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<template>
2+
<div class="news">
3+
<div
4+
v-if="loading"
5+
class="loading"
6+
>
7+
<VueLoadingIndicator/>
8+
</div>
9+
<div
10+
v-else
11+
class="feed"
12+
>
13+
<NewsItem
14+
v-for="(item, index) of feed.items"
15+
:key="index"
16+
:item="item"
17+
/>
18+
</div>
19+
</div>
20+
</template>
21+
22+
<script>
23+
import Parser from 'rss-parser'
24+
25+
import NewsItem from './NewsItem.vue'
26+
27+
const parser = new Parser()
28+
29+
const CORS_PROXY = 'https://cors-anywhere.herokuapp.com/'
30+
31+
export default {
32+
components: {
33+
NewsItem
34+
},
35+
36+
inject: [
37+
'widget'
38+
],
39+
40+
data () {
41+
return {
42+
loading: false,
43+
feed: null
44+
}
45+
},
46+
47+
watch: {
48+
'widget.data.config.url': {
49+
handler: 'fetchFeed',
50+
immediate: true
51+
}
52+
},
53+
54+
methods: {
55+
async fetchFeed () {
56+
this.loading = true
57+
try {
58+
this.feed = await parser.parseURL(CORS_PROXY + this.widget.data.config.url)
59+
} catch (e) {
60+
console.error(e)
61+
}
62+
this.loading = false
63+
}
64+
}
65+
}
66+
</script>
67+
68+
<style lang="stylus" scoped>
69+
@import "~@vue/cli-ui/src/style/imports"
70+
71+
.loading,
72+
.feed
73+
height 100%
74+
75+
.loading
76+
h-box()
77+
box-center()
78+
79+
.feed
80+
overflow-x hidden
81+
overflow-y auto
82+
</style>

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<template>
2+
<div class="news-item">
3+
<div class="info">
4+
<div class="head">
5+
<div class="title">
6+
<a
7+
:href="item.link"
8+
target="_blank"
9+
>
10+
{{ item.title }}
11+
</a>
12+
</div>
13+
<div class="snippet">{{ item.contentSnippet }}</div>
14+
<div class="date">{{ item.pubDate | date }}</div>
15+
</div>
16+
17+
<div
18+
v-if="item.enclosure"
19+
class="media"
20+
>
21+
<img
22+
v-if="item.enclosure.type.indexOf('image/') === 0"
23+
:src="item.enclosure.url"
24+
class="image media-content"
25+
/>
26+
27+
<audio
28+
v-if="item.enclosure.type.indexOf('audio/') === 0"
29+
:src="item.enclosure.url"
30+
controls
31+
/>
32+
33+
<video
34+
v-if="item.enclosure.type.indexOf('video/') === 0"
35+
:src="item.enclosure.url"
36+
controls
37+
/>
38+
</div>
39+
</div>
40+
</div>
41+
</template>
42+
43+
<script>
44+
export default {
45+
props: {
46+
item: {
47+
type: Object,
48+
required: true
49+
}
50+
}
51+
}
52+
</script>
53+
54+
<style lang="stylus" scoped>
55+
@import "~@vue/cli-ui/src/style/imports"
56+
57+
.news-item
58+
padding ($padding-item / 2) $padding-item
59+
&:not(:last-child)
60+
border-bottom rgba($vue-ui-color-primary, .3) solid 1px
61+
62+
.title
63+
margin-bottom ($padding-item /2)
64+
65+
.snippet,
66+
.date
67+
font-size 14px
68+
69+
.date
70+
opacity .5
71+
72+
.media
73+
margin-top ($padding-item / 2)
74+
75+
.media-content
76+
max-width 100%
77+
max-height 100px
78+
</style>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,14 @@ import PluginUpdates from './components/PluginUpdates.vue'
44
import DependencyUpdates from './components/DependencyUpdates.vue'
55
import Vulnerability from './components/Vulnerability.vue'
66
import RunTask from './components/RunTask.vue'
7+
import News from './components/News.vue'
8+
import Nuxt from './components/Nuxt.vue'
79

810
ClientAddonApi.component('org.vue.widgets.components.welcome', Welcome)
911
ClientAddonApi.component('org.vue.widgets.components.kill-port', KillPort)
1012
ClientAddonApi.component('org.vue.widgets.components.plugin-updates', PluginUpdates)
1113
ClientAddonApi.component('org.vue.widgets.components.dependency-updates', DependencyUpdates)
1214
ClientAddonApi.component('org.vue.widgets.components.vulnerability', Vulnerability)
1315
ClientAddonApi.component('org.vue.widgets.components.run-task', RunTask)
16+
ClientAddonApi.component('org.vue.widgets.components.news', News)
17+
ClientAddonApi.component('org.vue.widgets.components.nuxt', Nuxt)

‎packages/@vue/cli-ui/apollo-server/connectors/widgets.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,9 @@ function add ({ definitionId }, context) {
159159

160160
// Default config
161161
if (definition.defaultConfig) {
162-
widget.config = definition.defaultConfig()
162+
widget.config = definition.defaultConfig({
163+
definition
164+
})
163165
}
164166

165167
updateCount(definitionId, 1)
@@ -227,6 +229,7 @@ function move (input, context) {
227229
widget.y = input.y
228230
const definition = findDefinition(widget, context)
229231
widget.width = input.width
232+
widget.height = input.height
230233
if (widget.width < definition.minWidth) widget.width = definition.minWidth
231234
if (widget.width > definition.maxWidth) widget.width = definition.maxWidth
232235
if (widget.height < definition.minHeight) widget.height = definition.minHeight

‎packages/@vue/cli-ui/apollo-server/schema/widget.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ type WidgetDefinition {
2727
component: String!
2828
canAddMore: Boolean!
2929
hasConfigPrompts: Boolean!
30+
minWidth: Int!
31+
minHeight: Int!
32+
maxWidth: Int!
33+
maxHeight: Int!
3034
}
3135
3236
type Widget {

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -788,6 +788,13 @@
788788
"task": "Select a task"
789789
},
790790
"page": "Go to Task"
791+
},
792+
"news": {
793+
"title": "News",
794+
"description": "Read news feed",
795+
"prompts": {
796+
"url": "RSS feed URL"
797+
}
791798
}
792799
}
793800
}

0 commit comments

Comments
 (0)