vue-computed-helpers

This package contains bunch of useful helpers that can be used to simplify computed properties

:cd: Installation

Via npm:

npm install vue-computed-helpers --save

Via yarn:

yarn add vue-computed-helpers

:rocket: Usage

import { eq, count, countBy } from 'vue-computed-helpers'

export default {
  data() {
    return {
      todos: [
        { title: 'Clean house', done: false },
        { title: 'Buy beer', done: true },
        { title: 'Watch GoT', done: true }
      ]
    }
  },
  computed: {
    allTodosCount: count('todos'), // 3
    completedCount: countBy('todos', 'done', true), // 2
    allCompleted: eq('completedCount', 'allTodosCount') // false
  }
}

:star: Helpers

| Helper | Usage | Variable argument count allowed | |:-------|:------|:--------------------------------| | eq | eq('anyProperty', x) | no | | notEq | notEq('anyProperty', x) | no| | not | not('anyProperty', 'anotherProp', ...) | yes | | and | and('anyProperty', 'anotherProp', ...) | yes | | or | or('anyProperty', 'anotherProp', ...) | yes | | xor | xor('anyProperty', 'anotherProp') | no | | gt | gt('numProperty', x) | no | | gte | gte('numProperty', x) | no | | lt | lt('numProperty', x) | no | | lte | lte('numProperty', x) | no | | sum | sum('numProperty', x, ...) | yes | | alias | alias('anyProperty') | no | | bool | bool('anyProperty') | no | | empty | empty('anyProperty') | no | | min | min('arrayProperty') | no | | max | max('arrayProperty') | no | | filter | filter('arrayProperty', (el) => el.done === true) | no | | filterBy | filterBy('arrayProperty', 'done', true) | no | | find | find('arrayProperty', (el) => el.id === 5) | no | | findBy | findBy('arrayProperty', 'id', 5) | no | | map | map('arrayProperty', (el) => el.id) | no | | mapBy | mapBy('arrayProperty', 'id') | no | | count | count('arrayProperty') | no | | countBy | countBy('arrayProperty', 'done', true) | no | | classObject | classObject('isPrimary', 'has-title:title', 'wide') | yes |
x means that it can be either value or property name. If you provide a string and there will be a property with that name it's value will be used to perform the check.

:mag: Detailed usage of some helpers

classObject

Example code:

import { classObject } from 'vue-computed-helpers'

export default {
  props: ['isPrimary', 'title', 'wide']
  computed: {
    classObj: classObject('isPrimary', 'has-title:title', 'wide')
  }
}

Given all above props are set and truthy, this computed property will return the following object:

{
  'is-primary': true,
  'has-title': true,
  'wide': true
}

Which can be used in template:

<template>
  <div :class="classObj">
  </div>
</template>

:lock: License

See the LICENSE file for license rights and limitations (MIT).