vue-computed-helpers

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

💿 Installation

Via npm:

npm install vue-computed-helpers --save

Via yarn:

yarn add vue-computed-helpers

🚀 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
  }
}

⭐️ 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.

🔍 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>

🔒 License

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