https://github.com/blocka/vue-rule-builder

A component for building complex rules
https://github.com/blocka/vue-rule-builder

rule-builder scoped-slot vue

Last synced: 2 months ago
JSON representation

A component for building complex rules

• Host: GitHub
• URL: https://github.com/blocka/vue-rule-builder
• Owner: blocka
• License: mit
• Created: 2018-02-19T10:48:59.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-03-17T15:50:04.000Z (11 months ago)
• Last Synced: 2024-11-24T13:34:11.876Z (2 months ago)
• Topics: rule-builder, scoped-slot, vue
• Language: JavaScript
• Homepage: https://blocka.github.io/vue-rule-builder/
• Size: 648 KB
• Stars: 45
• Watchers: 3
• Forks: 7
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

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:

```js

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:

```js

{

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.