vue-rule-editor
v0.0.1
Published
A vue component for building complex filtering rules
Downloads
8
Readme
What is this?
This component can be used whenever you need a UI for created complex filters. The UI is used to build up a data structure which can be used to generate a query of some sort.
Installation
npm install vue-rule-builder
(or use yarn)
To use globally:
import RuleBuilder from 'vue-rule-builder'
Vue.use(RuleBuilder)
or import { RuleBuilder } from 'vue-rule-builder'
for "local" installation.
You can import the built in stylesheet as well: import 'vue-rule-builder/dist/styles.css
A rule consists of three fields, a name, operation and value
{ name: 'firstName', operation: 'startsWith', value: 'B' }
The name and operation are arbitrary values, and you would have to have a parser which understands what those mean.
Rules can be put in a group:
{ all: true, rules: [] }
Rules can be filtered further:
{
name: 'totalPayments',
filter: {
all: true,
rules: [
]
}
The basic component can takes two props, filter
and fields
. filter
is a rule group, and fields is an array of field
s. A field
looks like:
{
name: 'firstName',
label: 'First Name',
operations: [["Starts With", "startWith"]]
}
The component will emit update:filter
so you can use the .sync
modifier.
The component comes with a built in UI, and there is a stylesheet which can be included as well, to get the default look and feel. Alternatively, a scoped slot can be provided instead, for the ultimate in flexibility.
Check out the storybook which demonstrates usage.