Vue-module-manager NPM

Vue Module Manager

Versión en español

Component for module management with Vue.js.

Demo

GitHub

CodePen

Quick Start

NPM

Install the package:

$ npm install vue-module-manager

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>

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)

See examples.

@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)

See examples.

@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)

See examples.

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 :wink:

You can contact me on Twitter or through my email.

@infinitebrahmanuniverse/nolb-vue-mo @everything-registry/sub-chunk-3086

1.0.1

6 years ago

1.0.0

6 years ago