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
{ return todos: title: 'Clean house' done: false title: 'Buy beer' done: true title: 'Watch GoT' done: true } computed: allTodosCount: // 3 completedCount: // 2 allCompleted: // 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).