78 |
86 |
90 |
96 |
103 |
104 |
105 |
106 |
135 |
--------------------------------------------------------------------------------
/src/QueryBuilderGroup.vue:
--------------------------------------------------------------------------------
1 |
377 |
378 |
379 |
380 |
460 |
470 |
474 |
480 |
481 |
482 |
483 |
484 |
546 |
--------------------------------------------------------------------------------
/src/QueryBuilderRule.vue:
--------------------------------------------------------------------------------
1 |
70 |
71 |
72 |
381 |
382 |
451 |
383 | 
389 |
394 |
395 |
396 |
389 |
397 |
403 | Operator
404 |
413 |
414 |
415 |
416 |
403 | Operator
404 |
413 |
423 |
432 |
439 |
440 |
441 |
447 |
448 |
449 |
450 |
73 |
79 |
80 |
95 |
96 |
97 |
130 |
--------------------------------------------------------------------------------
/src/grip-vertical-solid.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/guards.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Rule, RuleSet, QueryBuilderConfig, OperatorDefinition, RuleDefinition,
3 | } from '@/types';
4 |
5 | export function isRule(param: any): param is Rule {
6 | if (typeof param !== 'object' || param === null) {
7 | return false;
8 | }
9 |
10 | if (typeof param.identifier !== 'string') {
11 | return false;
12 | }
13 |
14 | const { hasOwnProperty } = Object.prototype;
15 |
16 | return hasOwnProperty.call(param, 'value');
17 | }
18 |
19 | export function isRuleSet(param: any): param is RuleSet {
20 | if (typeof param !== 'object' || param === null) {
21 | return false;
22 | }
23 |
24 | if (typeof param.operatorIdentifier !== 'string') {
25 | return false;
26 | }
27 |
28 | return Array.isArray(param.children)
29 | && param.children.every((child: any) => isRule(child) || isRuleSet(child));
30 | }
31 |
32 | export function isOperatorDefinition(param: any): param is OperatorDefinition {
33 | if (typeof param !== 'object' || param === null) {
34 | return false;
35 | }
36 |
37 | if (typeof param.identifier !== 'string') {
38 | return false;
39 | }
40 |
41 | return typeof param.name === 'string';
42 | }
43 |
44 | export function isRuleDefinition(param: any): param is RuleDefinition {
45 | if (typeof param !== 'object' || param === null) {
46 | return false;
47 | }
48 |
49 | if (typeof param.identifier !== 'string') {
50 | return false;
51 | }
52 |
53 | if (typeof param.name !== 'string') {
54 | return false;
55 | }
56 |
57 | return ['function', 'object', 'string'].includes(typeof param.component);
58 | }
59 |
60 | export function isQueryBuilderConfig(param: any): param is QueryBuilderConfig {
61 | if (typeof param !== 'object' || param === null) {
62 | return false;
63 | }
64 |
65 | return Array.isArray(param.operators)
66 | && param.operators.every((operator: any) => isOperatorDefinition(operator))
67 | && Array.isArray(param.rules)
68 | && param.rules.every((rule: any) => isRuleDefinition(rule))
69 | && (
70 | !param.colors
71 | || (
72 | Array.isArray(param.colors)
73 | && param.colors.every((color: any) => typeof color === 'string')
74 | )
75 | )
76 | && (
77 | typeof param.maxDepth === 'undefined' // optional config value not present
78 | || (
79 | typeof param.maxDepth === 'number'
80 | && param.maxDepth >= 0
81 | )
82 | );
83 | }
84 |
--------------------------------------------------------------------------------
/src/shims-tsx.d.ts:
--------------------------------------------------------------------------------
1 | import Vue, { VNode } from 'vue';
2 |
3 | declare global {
4 | namespace JSX {
5 | // tslint:disable no-empty-interface
6 | interface Element extends VNode {}
7 | // tslint:disable no-empty-interface
8 | interface ElementClass extends Vue {}
9 | interface IntrinsicElements {
10 | [elem: string]: any
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 | import Vue from 'vue';
3 |
4 | export default Vue;
5 | }
6 |
--------------------------------------------------------------------------------
/src/shims-vuedraggable.d.ts:
--------------------------------------------------------------------------------
1 | declare module 'vuedraggable' {
2 | type element
79 |
80 |
88 |
93 |
94 |
3 |
7 |
8 |
9 |
10 |
11 |
31 |
--------------------------------------------------------------------------------
/tests/components/Component.vue:
--------------------------------------------------------------------------------
1 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/tests/unit/colored-borders.spec.ts:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils';
2 | import Draggable from 'vuedraggable';
3 | import { QueryBuilderConfig, RuleSet } from '@/types';
4 | import QueryBuilder from '@/QueryBuilder.vue';
5 | import QueryBuilderGroup from '@/QueryBuilderGroup.vue';
6 | import QueryBuilderChild from '@/QueryBuilderChild.vue';
7 | import Component from '../components/Component.vue';
8 |
9 | describe('Testing drag\'n\'drop related features', () => {
10 | const config: QueryBuilderConfig = {
11 | operators: [
12 | {
13 | name: 'and',
14 | identifier: 'AND',
15 | },
16 | {
17 | name: 'or',
18 | identifier: 'OR',
19 | },
20 | ],
21 | rules: [
22 | {
23 | identifier: 'txt',
24 | name: 'Text Selection',
25 | component: Component,
26 | initialValue: 'foo',
27 | },
28 | {
29 | identifier: 'num',
30 | name: 'Number Selection',
31 | component: Component,
32 | initialValue: 10,
33 | },
34 | ],
35 | };
36 |
37 | const value: RuleSet = {
38 | operatorIdentifier: 'OR',
39 | children: [{
40 | operatorIdentifier: 'AND',
41 | children: [{
42 | identifier: 'txt',
43 | value: 'A',
44 | }, {
45 | identifier: 'txt',
46 | value: 'B',
47 | }, {
48 | identifier: 'txt',
49 | value: 'C',
50 | }, {
51 | operatorIdentifier: 'AND',
52 | children: [{
53 | identifier: 'txt',
54 | value: 'c',
55 | }, {
56 | identifier: 'txt',
57 | value: 'd',
58 | }, {
59 | operatorIdentifier: 'AND',
60 | children: [{
61 | identifier: 'txt',
62 | value: 'a',
63 | }, {
64 | identifier: 'txt',
65 | value: 'b',
66 | }],
67 | }],
68 | }],
69 | }, {
70 | operatorIdentifier: 'AND',
71 | children: [{
72 | identifier: 'txt',
73 | value: 'X',
74 | }, {
75 | identifier: 'txt',
76 | value: 'Y',
77 | }, {
78 | identifier: 'txt',
79 | value: 'Z',
80 | }, {
81 | operatorIdentifier: 'AND',
82 | children: [{
83 | identifier: 'txt',
84 | value: '',
85 | }, {
86 | operatorIdentifier: 'AND',
87 | children: [{
88 | identifier: 'txt',
89 | value: '',
90 | }, {
91 | operatorIdentifier: 'AND',
92 | children: [{
93 | operatorIdentifier: 'AND',
94 | children: [{
95 | identifier: 'txt',
96 | value: '',
97 | }, {
98 | identifier: 'num',
99 | value: 10,
100 | }],
101 | }],
102 | }],
103 | }],
104 | }],
105 | }],
106 | };
107 |
108 | it('asserts nothing happens if colors are not configured', () => {
109 | const app = mount(QueryBuilder, {
110 | propsData: {
111 | value,
112 | config,
113 | },
114 | });
115 |
116 | const groups = app.findAllComponents(QueryBuilderGroup);
117 | expect(groups).toHaveLength(9);
118 |
119 | groups.wrappers
120 | .forEach(w => {
121 | expect(w.vm.$props).toHaveProperty('depth');
122 | const el = (w.findComponent(QueryBuilderChild)).element as HTMLDivElement;
123 | expect(el.style.borderColor).toBeFalsy();
124 | });
125 | });
126 |
127 | it('checks border colors are applied properly', () => {
128 | const colors = [
129 | 'hsl(88, 50%, 55%)',
130 | 'hsl(187, 100%, 45%)',
131 | 'hsl(15, 100%, 55%)',
132 | ];
133 | const newConfig: QueryBuilderConfig = { ...config, colors };
134 |
135 | const app = mount(QueryBuilder, {
136 | propsData: {
137 | value,
138 | config: newConfig,
139 | },
140 | });
141 |
142 | const groups = app.findAllComponents(QueryBuilderGroup);
143 | expect(groups).toHaveLength(9);
144 |
145 | groups.wrappers
146 | .forEach(w => {
147 | expect(w.vm.$props).toHaveProperty('depth');
148 | const el = (w.findComponent(Draggable)).element as HTMLDivElement;
149 | const targetIdx = w.vm.$props.depth % w.vm.$props.config.colors.length;
150 | expect(el.style).toHaveProperty('borderColor', colors[targetIdx]);
151 | });
152 | });
153 | });
154 |
--------------------------------------------------------------------------------
/tests/unit/drag-n-drop.spec.ts:
--------------------------------------------------------------------------------
1 | import { mount } from '@vue/test-utils';
2 | import Draggable, { ChangeEvent } from 'vuedraggable';
3 | import QueryBuilder from '@/QueryBuilder.vue';
4 | import QueryBuilderGroup from '@/QueryBuilderGroup.vue';
5 | import {
6 | RuleSet, Rule, QueryBuilderConfig, QueryBuilderGroup as QueryBuilderGroupInterface,
7 | } from '@/types';
8 | import Component from '../components/Component.vue';
9 |
10 | // Schedule a microtask, so all pending promises can be executed
11 | const flushPromises = (): Promise
168 | SLOT
169 |
177 |
183 |
190 |
191 | `,
192 | },
193 | });
194 |
195 | let app = createApp();
196 | let group = app.findAllComponents(QueryBuilderGroup)
197 | .wrappers
198 | .filter(g => g.vm.$props.depth === 3)
199 | .shift() as Wrapper
64 | SLOT Operator
65 |
77 |
78 | `,
79 | },
80 | });
81 |
82 | const group = app.findComponent(QueryBuilderGroup);
83 | const slot = group.find('.slot-wrapper');
84 |
85 | // Check if current operator is selected
86 | const select = slot.find('.slot-select');
87 | expect((select.element as HTMLSelectElement).value).toBe('OR');
88 |
89 | // Check if operators are properly rendered
90 | const options = select.findAll('option');
91 | expect(options).toHaveLength(2);
92 | expect((options.at(0).element as HTMLOptionElement).value).toBe('AND');
93 | expect((options.at(0).element as HTMLOptionElement).text).toBe('and');
94 | expect((options.at(1).element as HTMLOptionElement).value).toBe('OR');
95 | expect((options.at(1).element as HTMLOptionElement).text).toBe('or');
96 |
97 | // Update operator
98 | options.at(0).setSelected();
99 | expect((group.emitted('query-update') as any)[0][0]).toStrictEqual({ operatorIdentifier: 'AND', children: propsData.value.children });
100 | const expected: RuleSet = JSON.parse(JSON.stringify(propsData.value));
101 | expected.operatorIdentifier = 'AND';
102 | expect((app.emitted('input') as any)[0][0]).toStrictEqual(expected);
103 | });
104 |
105 | it('tests the `groupControl` slot', async () => {
106 | const app = mount(QueryBuilder, {
107 | propsData,
108 | scopedSlots: {
109 | groupControl: `
110 |
114 | SLOT
115 |
123 |
129 |
135 |
136 | `,
137 | },
138 | });
139 |
140 | const slot = app.find('.slot-wrapper');
141 | const group = app.findComponent(QueryBuilderGroup);
142 |
143 | // Some data we'll be using for our assertions
144 | const query: RuleSet = JSON.parse(JSON.stringify(propsData.value));
145 | const children = [...propsData.value.children];
146 |
147 | // check if rules are properly rendered
148 | const options = slot.findAll('option');
149 | expect(options).toHaveLength(2);
150 | expect((options.at(0).element as HTMLOptionElement).value).toBe('txt');
151 | expect((options.at(0).element as HTMLOptionElement).text).toBe('Text Selection');
152 | expect((options.at(1).element as HTMLOptionElement).value).toBe('num');
153 | expect((options.at(1).element as HTMLOptionElement).text).toBe('Number Selection');
154 |
155 | // Add a new rule
156 | slot.find('.slot-new-rule').trigger('click');
157 | children.push({ identifier: 'txt', value: 'foo' });
158 | query.children = [...children];
159 | expect((group.emitted('query-update') as any)[0][0]).toStrictEqual({ operatorIdentifier: 'OR', children });
160 | expect((app.emitted('input') as any)[0][0]).toStrictEqual(query);
161 |
162 | // Add new group
163 | app.setProps({ value: { ...query }, config: { ...propsData.config } });
164 | await app.vm.$nextTick();
165 | slot.find('.slot-new-group').trigger('click');
166 | children.push({ operatorIdentifier: 'AND', children: [] });
167 | query.children = [...children];
168 | expect((group.emitted('query-update') as any)[1][0]).toStrictEqual({ operatorIdentifier: 'OR', children });
169 | expect((app.emitted('input') as any)[1][0]).toStrictEqual(query);
170 | });
171 |
172 | it('tests the `rule` slot', () => {
173 | const app = mount(QueryBuilder, {
174 | propsData,
175 | scopedSlots: {
176 | rule: `
177 |
181 | SLOT
182 |
190 | `,
191 | },
192 | });
193 |
194 | const rule = app.findComponent(QueryBuilderRule);
195 | const slot = rule.find('.slot-wrapper');
196 | const ruleComponent = slot.find('.slot-rule');
197 |
198 | // Verify rule slot is properly rendered
199 | expect(ruleComponent.is(Component)).toBeTruthy();
200 | expect(ruleComponent.vm.$props.value).toBe('A');
201 | expect(rule.vm.$props.query.identifier).toBe('txt');
202 | expect(ruleComponent.vm.$props.identifier).toBe('txt');
203 | ruleComponent.vm.$emit('input', 'a');
204 | expect((rule.emitted('query-update') as any)[0][0]).toStrictEqual({ identifier: 'txt', value: 'a' });
205 |
206 | // Verify update event propagates
207 | const expected: RuleSet = JSON.parse(JSON.stringify(propsData.value));
208 | (expected.children[0] as Rule).value = 'a';
209 | expect((app.emitted('input') as any)[0][0]).toStrictEqual(expected);
210 | });
211 | });
212 |
--------------------------------------------------------------------------------
/tests/unit/validation.spec.ts:
--------------------------------------------------------------------------------
1 | import {
2 | isQueryBuilderConfig, isRule, isRuleSet, isOperatorDefinition, isRuleDefinition,
3 | } from '@/guards';
4 | import Component from '../components/Component.vue';
5 |
6 | describe('Testing component props and guards', () => {
7 | it('checks isRule guard', () => {
8 | // VALID
9 | [
10 | {
11 | identifier: 'foo',
12 | value: null,
13 | },
14 | ].forEach(t => expect(isRule(t)).toBeTruthy());
15 | expect((t: any) => expect(isRule(t)).toBeTruthy());
16 |
17 | // INVALID
18 | [
19 | null,
20 | {},
21 | 'xyz',
22 | { value: null },
23 | { identifier: 'foo' },
24 | { identifier: 123, value: null },
25 | ].forEach((t: any) => expect(isRule(t)).toBeFalsy());
26 | });
27 |
28 | it('checks isRuleSet guard', () => {
29 | // VALID
30 | [
31 | {
32 | operatorIdentifier: 'bar',
33 | children: [],
34 | },
35 |
36 | {
37 | operatorIdentifier: 'foo',
38 | children: [
39 | {
40 | identifier: 'bar',
41 | value: null,
42 | },
43 | {
44 | operatorIdentifier: 'baz',
45 | children: [],
46 | },
47 | ],
48 | },
49 | ].forEach(t => expect(isRuleSet(t)).toBeTruthy());
50 |
51 | // INVALID
52 | [
53 | null,
54 | {},
55 | 'xyz',
56 | { operatorIdentifier: 'bar' },
57 | { children: [] },
58 | { operatorIdentifier: 'bar', children: null },
59 | { operatorIdentifier: 'bar', children: {} },
60 | { identifier: 123, value: null },
61 | { operatorIdentifier: 'foo', children: [{ identifier: 123, value: null }, { operatorIdentifier: 'baz', children: [] }] },
62 | { operatorIdentifier: 'foo', children: [{ identifier: 'bar', value: null }, { operatorIdentifier: 'baz', children: 'invalid' }] },
63 | ].forEach((t: any) => expect(isRuleSet(t)).toBeFalsy());
64 | });
65 |
66 | it('checks isOperatorDefinition guards', () => {
67 | // VALID
68 | [
69 | {
70 | identifier: 'foo',
71 | name: 'foo',
72 | },
73 | ].forEach((t: any) => expect(isOperatorDefinition(t)).toBeTruthy());
74 |
75 | // INVALID
76 | [
77 | { name: 'bar' },
78 | { identifier: 'bar' },
79 | {},
80 | [],
81 | null,
82 | ].forEach((t: any) => expect(isOperatorDefinition(t)).toBeFalsy());
83 | });
84 |
85 | it('checks isRuleDefinition guards', () => {
86 | // VALID
87 | [
88 | {
89 | identifier: 'foo',
90 | name: 'foo',
91 | component: 'foo',
92 | initialValue: 'asdf',
93 | },
94 | {
95 | identifier: 'bar',
96 | name: 'bar',
97 | component: () => {},
98 | },
99 | {
100 | identifier: 'baz',
101 | name: 'baz',
102 | component: Component,
103 | },
104 | ].forEach((t: any) => expect(isRuleDefinition(t)).toBeTruthy());
105 |
106 | // INVALID
107 | [
108 | {},
109 | null,
110 | [],
111 | { name: 'baz', component: Component },
112 | { identifier: 'baz', component: Component },
113 | { identifier: 'baz', name: 'baz', component: 1234 },
114 | ].forEach((t: any) => expect(isRuleDefinition(t)).toBeFalsy());
115 | });
116 |
117 | it('checks isQueryBuilderConfig guard', () => {
118 | // VALID
119 | [
120 | { // Default, minimal example with all valid combinations
121 | operators: [
122 | {
123 | identifier: 'foo',
124 | name: 'foo',
125 | },
126 | ],
127 | rules: [
128 | {
129 | identifier: 'foo',
130 | name: 'foo',
131 | component: 'foo',
132 | },
133 | {
134 | identifier: 'bar',
135 | name: 'bar',
136 | component: () => {},
137 | },
138 | {
139 | identifier: 'baz',
140 | name: 'baz',
141 | component: Component,
142 | },
143 | ],
144 | },
145 |
146 | { // Only checking for valid colors
147 | operators: [],
148 | rules: [],
149 | colors: ['foo', 'bar'],
150 | },
151 |
152 | { // Only checking for maxDepth
153 | operators: [],
154 | rules: [],
155 | maxDepth: undefined,
156 | },
157 | {
158 | operators: [],
159 | rules: [],
160 | maxDepth: 10,
161 | },
162 | ].forEach((t: any) => expect(isQueryBuilderConfig(t)).toBeTruthy());
163 |
164 | // INVALID
165 | [
166 | null, // Check nulled parameter
167 |
168 | { // Invalid operator
169 | operators: [
170 | {
171 | identifier: 'foo',
172 | },
173 | ],
174 | rules: [],
175 | },
176 |
177 | { // Invalid rule
178 | operators: [
179 | ],
180 | rules: [
181 | {
182 | identifier: 'foo',
183 | name: 'foo',
184 | component: 123,
185 | },
186 | ],
187 | },
188 |
189 | { // Invalid color
190 | operators: [],
191 | rules: [],
192 | colors: [
193 | 123,
194 | ],
195 | },
196 |
197 | { // Invalid maxDepth
198 | operators: [],
199 | rules: [],
200 | maxDepth: -1,
201 | },
202 | {
203 | operators: [],
204 | rules: [],
205 | maxDepth: 'asdf',
206 | },
207 | ].forEach((t: any) => expect(isQueryBuilderConfig(t)).toBeFalsy());
208 | expect(isQueryBuilderConfig(null)).toBeFalsy();
209 | });
210 | });
211 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "module": "esnext",
5 | "strict": true,
6 | "jsx": "preserve",
7 | "importHelpers": true,
8 | "moduleResolution": "node",
9 | "experimentalDecorators": true,
10 | "esModuleInterop": true,
11 | "allowSyntheticDefaultImports": true,
12 | "sourceMap": true,
13 | "baseUrl": ".",
14 | "types": [
15 | "webpack-env",
16 | "jest"
17 | ],
18 | "paths": {
19 | "@/*": [
20 | "src/*"
21 | ]
22 | },
23 | "lib": [
24 | "esnext",
25 | "dom",
26 | "dom.iterable",
27 | "scripthost"
28 | ]
29 | },
30 | "include": [
31 | "src/**/*.ts",
32 | "src/**/*.tsx",
33 | "src/**/*.vue",
34 | "dev/**/*.ts",
35 | "dev/**/*.tsx",
36 | "dev/**/*.vue",
37 | "tests/**/*.ts",
38 | "tests/**/*.tsx"
39 | ],
40 | "exclude": [
41 | "node_modules"
42 | ]
43 | }
44 |
--------------------------------------------------------------------------------
/types/index.d.ts:
--------------------------------------------------------------------------------
1 | import { Component } from 'vue';
2 | import { SortableOptions } from 'sortablejs';
3 |
4 | export interface Rule {
5 | identifier: string,
6 | value: any,
7 | }
8 |
9 | export interface RuleSet {
10 | operatorIdentifier: string,
11 | children: Array