Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

vue-computed-helpers

NPM version Build Status

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

About

Computed helpers for Vue apps

Resources

License

Stars

Watchers

Forks

Packages

No packages published