Vue Module Manager
Component for module management with Vue.js.
Demo
Quick Start
NPM
Install the package:
$ npm install vue-module-manager
Register the component:
import Vue from 'vue'
import VueModuleManager from 'VueModuleManager'
Vue.component('VueModuleManager', VueModuleManager)Use the component:
<vue-module-manager :items="[]"></vue-module-manager>CDN
Include styles:
<link href="https://unpkg.com/vue-module-manager/dist/vue-module-manager.min.css">Include scripts:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-module-manager/dist/vue-module-manager.min.js"></script>Register the component:
Vue.component('VueModuleManager', VueModuleManager.VueModuleManager)Use the component:
<vue-module-manager :items="[]"></vue-module-manager>Examples
Examples of use for this component:
- Using CDN:
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/vue-module-manager/dist/vue-module-manager.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<vue-module-manager :items="[]"></vue-module-manager>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-module-manager/dist/vue-module-manager.min.js"></script>
<script>
Vue.component('VueModuleManager', VueModuleManager.VueModuleManager)
new Vue().$mount('#app')
</script>
</body>
</html>- Adding items:
<vue-module-manager
:items="items"
></vue-module-manager>new Vue({
el: '#app',
components: { VueModuleManager },
data () {
return {
{
'name': 'Minecraft',
'version': '1.12.2',
'description': 'Minecraft is a game about placing blocks and adventures.',
'state': 'active',
'url': 'https://github.com/Josantonius/vue-module-manager',
'image': '/static/minecraft.jpg'
},
{
'name': 'Crash Bandicoot',
'version': '8.1.1',
'description': 'Crash Bandicoot is a franchise of platform video games.',
'state': 'outdated',
'url': 'https://github.com/Josantonius/vue-module-manager',
'image': '/static/crash-bandicoot.jpg'
},
{
'name': 'Super Mario Bros',
'version': '3.8.4',
'description': 'Super Mario Bros is a video game developed by Nintendo.',
'state': 'inactive',
'url': 'https://github.com/Josantonius/vue-module-manager',
'image': '/static/super-mario-bros.jpg'
}
]
}
}
})- Setting the button translations:
<vue-module-manager
:items="items"
:translations="translations"
></vue-module-manager>new Vue({
el: '#app',
components: { VueModuleManager },
data () {
return {
items: [{}, {}, {}],
translations: {
active: 'activo',
activate: 'activar',
install: 'instalar',
update: 'actualizar',
uninstall: 'desinstalar'
},
}
}
})- Listening the events:
<vue-module-manager
:items="items"
@on-change="onChange"
@on-active="onActive"
@on-inactive="onInactive"
@on-update="onUpdate"
@on-install="onInstall"
@on-uninstall="onUninstall"
@on-uninstalled="onUninstalled"
></vue-module-manager>new Vue({
el: '#app',
components: { VueModuleManager },
data () {
return {
items: [
{'state': 'active'},
{'state': 'outdated'},
{'state': 'inactive'}
]
}
},
methods: {
onChange: function onChange (index, vm) {
console.info('@on-change: ' + index)
},
onActive: function onActive (index, vm) {
console.info('@on-active: ' + index)
},
onInactive: function onInactive (index, vm) {
console.info('@on-inactive: ' + index)
},
onUpdate: function onUpdate (index, vm) {
console.info('@on-update: ' + index)
},
onInstall: function onInstall (index, vm) {
console.info('@on-install: ' + index)
},
onUninstall: function onUninstall (index, vm) {
console.info('@on-uninstall: ' + index)
},
onUninstalled: function onUninstalled (index, vm) {
console.info('@on-uninstalled: ' + index)
}
}
})- Listening to the @on-install event and stopping the loader with set timetout.
<vue-module-manager
:items="items"
@on-install="onInstall"
></vue-module-manager>new Vue({
el: '#app',
components: { VueModuleManager },
data () {
return {
items: [
{'state': 'active'},
{'state': 'outdated'},
{'state': 'inactive'}
]
}
},
methods: {
onInstall: function onInstall (index, vm) {
setTimeout(function () {
vm.changeState(index)
}, 3000)
}
}
})- Listening to the @on-uninstall event and stopping the loader after a certain time.
<vue-module-manager
:items="items"
@on-uninstall="onUninstall"
></vue-module-manager>new Vue({
el: '#app',
components: { VueModuleManager },
data () {
return {
items: [
{'state': 'active'},
{'state': 'outdated'},
{'state': 'inactive'}
]
}
},
methods: {
onUninstall: function onUninstall (index, vm) {
setTimeout(function () {
vm.changeState(index)
}, 3000)
}
}
})- Listening to the @on-update event, stopping the loader after a certain time and updating the module information.
<vue-module-manager
:items="items"
@on-update="onUpdate"
></vue-module-manager>new Vue({
el: '#app',
components: { VueModuleManager },
data () {
return {
items: [
{
'name': 'Crash Bandicoot',
'version': '8.1.1',
'description': 'Crash Bandicoot is a franchise of platform video games.',
'state': 'outdated',
'url': 'https://github.com/Josantonius/vue-module-manager',
'image': '/static/crash-bandicoot.jpg'
}
]
}
},
methods: {
onUpdate: function onUpdate (index, vm) {
let self = this
console.info('@on-update: ' + index)
setTimeout(function () {
vm.changeState(index)
self.items[index].version = '8.1.2'
self.items[index].name = 'Crash Bandicoot III'
self.items[index].description = 'Crash Bandicoot N. Sane Trilogy is a video game compilation.'
self.items[index].image = 'static/crash-bandicoot-trilogy.jpg'
}, this.delay)
},
}
})Props
Available props in this component:
:items
Description: Modules array.
Type: Array
Required: true
Default: null
<vue-module-manager :items="[]">:translations
Description: Translations for module button states.
Type: Object
Default: null
<vue-module-manager :items="[]" :translations="{}">Events
Available events in this component:
@on-change
It's triggered every time change the module state.
onChange: function onChange (index, vm) { }| Attribute | Type | Description |
|---|---|---|
| index | Number |
Module index. |
| index | Object |
Component instance. |
<vue-module-manager :items="[]" @on-change="onChange">@on-active
It's triggered when the module state changes from inactive to active.
onActive: function onActive (index, vm) { }| Attribute | Type | Description |
|---|---|---|
| index | Number |
Module index. |
| index | Object |
Component instance. |
<vue-module-manager :items="[]" @on-active="onActive">@on-inactive
It's triggered when the module state changes from active to inactive.
onInactive: function onInactive (index, vm) { }| Attribute | Type | Description |
|---|---|---|
| index | Number |
Module index. |
| index | Object |
Component instance. |
<vue-module-manager :items="[]" @on-inactive="onInactive">@on-uninstalled
It's triggered when the module state changes from uninstall to uninstalled.
onUninstalled: function onUninstalled (index, vm) { }| Attribute | Type | Description |
|---|---|---|
| index | Number |
Module index. |
| index | Object |
Component instance. |
<vue-module-manager :items="[]" @on-uninstalled="onUninstalled">@on-install
It's triggered when the module state changes from uninstalled to install.
onInstall: function onInstall (index, vm) { }| Attribute | Type | Description |
|---|---|---|
| index | Number |
Module index. |
| index | Object |
Component instance. |
<vue-module-manager :items="[]" @on-install="onInstall">This state will activate an installation icon that must be disabled from the event through the changeState method:
vm.changeState(index)@on-uninstall
It's triggered when the module state changes from installed to install.
onUninstall: function onUninstall (index, vm) { }| Attribute | Type | Description |
|---|---|---|
| index | Number |
Module index. |
| index | Object |
Component instance. |
<vue-module-manager :items="[]" @on-uninstall="onUninstall">This state will activate an uninstallation icon that must be disabled from the event through the changeState method:
vm.changeState(index)@on-update
It's triggered when the module state changes from outdated to update.
onUpdate: function onUpdate (index, vm) { }| Attribute | Type | Description |
|---|---|---|
| index | Number |
Module index. |
| index | Object |
Component instance. |
<vue-module-manager :items="[]" @on-update="onUpdate">This state will activate an update icon that must be disabled from the event through the changeState method:
vm.changeState(index)Methods
Available methods in this component:
changeState
Switches to the next module state.
vm.changeState(index)| Attribute | Type | Description | Required |
|---|---|---|---|
| index | Number |
Module index. | true |
Tests
Clone the repository:
$ git clone https://github.com/Josantonius/vue-module-manager.git vue-module-manager
Go to the directory:
$ cd vue-module-manager
Install dependencies:
$ npm install
Run unit tests:
$ npm run test
Run ESLint to ensure that code style is compatible with Standar JavaScript:
$ npm run lint
Run serve with hot reload:
$ npm run dev
Build distribution with minification:
$ npm run bundle
Build demo for production with minification:
$ npm run build
Run all the above:
$ npm run finish
☑ TODO
- [ ] Improve button transitions.
- [ ] Fix error when trying to pass ESlint tests in Travis CI.
- [ ] Fix error when trying to pass E2E tests in Travis CI.
- [ ] Add new feature.
- [ ] Improve tests.
- [ ] Improve documentation.
Contribute
If you would like to help, please take a look at the list of issues or the To Do checklist.
Pull requests
- Fork and clone.
- Make changes and run the tests.
- Create a branch, commit, push and send me a pull request.
License
This project is licensed under MIT license. See the LICENSE file for more info.
Copyright
2018 Josantonius, josantonius.com
If you find it useful, let me know 😉