diff --git a/packages/@vue/cli-ui/locales/en.json b/packages/@vue/cli-ui/locales/en.json index 764399d9d..9609673ac 100644 --- a/packages/@vue/cli-ui/locales/en.json +++ b/packages/@vue/cli-ui/locales/en.json @@ -118,7 +118,11 @@ "update": "Update {target}", "refresh": "Force Refresh {target}
Press [Shift] for Quick Refresh (node_modules won't be updated)" }, - "local": "Local" + "local": "Local", + "features": { + "generator": "This plugin has a generator and can modify your project files and add new files for you.", + "ui-integration": "This plugin includes additional UI features like enhanced tasks, configuration screens, dashboard widgets..." + } }, "project-dependency-item": { "version": "version", diff --git a/packages/@vue/cli-ui/src/components/dependency/NpmPackageSearch.vue b/packages/@vue/cli-ui/src/components/dependency/NpmPackageSearch.vue index 06b58e0a2..baea7b103 100644 --- a/packages/@vue/cli-ui/src/components/dependency/NpmPackageSearch.vue +++ b/packages/@vue/cli-ui/src/components/dependency/NpmPackageSearch.vue @@ -37,7 +37,7 @@ slot-scope="{ result }" :pkg="result" :selected="selectedIdModel === result.name" - :try-logo="tryLogos" + :load-metadata="loadMetadata" @click.native="selectedIdModel = result.name" /> @@ -98,7 +98,7 @@ export default { default: 20 }, - tryLogos: { + loadMetadata: { type: Boolean, default: false } diff --git a/packages/@vue/cli-ui/src/components/dependency/PackageSearchItem.vue b/packages/@vue/cli-ui/src/components/dependency/PackageSearchItem.vue index 6ec686475..3397d5ffc 100644 --- a/packages/@vue/cli-ui/src/components/dependency/PackageSearchItem.vue +++ b/packages/@vue/cli-ui/src/components/dependency/PackageSearchItem.vue @@ -49,6 +49,27 @@ + +
+ +
+
+ +
@@ -65,7 +86,7 @@ export default { default: false }, - tryLogo: { + loadMetadata: { type: Boolean, default: false } @@ -73,7 +94,9 @@ export default { data () { return { - logoUrl: null + logoUrl: null, + hasGenerator: false, + hasUiIntegration: false } }, @@ -85,25 +108,38 @@ export default { watch: { 'pkg.name': { - handler: 'updateLogo', + handler: 'updateMetadata', immediate: true } }, methods: { - updateLogo () { + updateMetadata () { + const name = this.pkg.name + + this.hasUiIntegration = false + this.hasGenerator = false // By default, show the npm user avatar this.logoUrl = this.pkg.owner.avatar // Try to load the logo.png file inside the package - if (this.tryLogo) { - const name = this.pkg.name + if (this.loadMetadata) { const img = new Image() img.onload = () => { if (name !== this.pkg.name) return this.logoUrl = img.src } img.src = `https://unpkg.com/${name}/logo.png` + + fetch(`https://unpkg.com/${name}/ui`).then(response => { + if (name !== this.pkg.name) return + this.hasUiIntegration = response.ok + }) + + fetch(`https://unpkg.com/${name}/generator`).then(response => { + if (name !== this.pkg.name) return + this.hasGenerator = response.ok + }) } } } @@ -147,4 +183,10 @@ export default { &.owner .vue-ui-icon margin-right 2px + + .feature + margin-right 12px + opacity .3 + &:hover + opacity 1 diff --git a/packages/@vue/cli-ui/src/components/plugin/ProjectPluginsAdd.vue b/packages/@vue/cli-ui/src/components/plugin/ProjectPluginsAdd.vue index 7eaabe808..cc8ca04f1 100644 --- a/packages/@vue/cli-ui/src/components/plugin/ProjectPluginsAdd.vue +++ b/packages/@vue/cli-ui/src/components/plugin/ProjectPluginsAdd.vue @@ -15,7 +15,7 @@ >