A UI component for building complex queries with nested conditionals.

Overview

Vue Query Builder

A UI component for building complex queries with nested conditionals.

Vue Query Builder is a user interface that makes it easy for your users to create queries of any kind. It's useful if you need an interface for generating reports, filtering data, and more.

Demo and documentation

Demo Screenshot

Comments
  • Allow for custom components

    Allow for custom components

    A simple change to allow for custom components which provides the user with ultimate flexibility.

    The component should implement the "v-model" interface.

    Example:

    {
    	type: {
    		props: ['value'],
    		render (h) {
    			return <MyTaggingComponent onChange={value => this.$emit('input', value)}></MyTaggingComponent>;
    		}
    	},
    	id: 'tags',
    	label: 'Tags',
    	operators: ['Has Tag']
    }
    
    opened by blocka 10
  • deepClone is not defined

    deepClone is not defined

    Hey, thanks for the great library. I am running across the following error:

    Uncaught ReferenceError: deepClone is not defined
        at deepClone (eval at <anonymous> (app-c97455196b.js:1519), <anonymous>:14:21)
        at VueComponent.mounted (eval at <anonymous> (app-c97455196b.js:1471), <anonymous>:125:85)
        at callHook (eval at <anonymous> (app-c97455196b.js:756), <anonymous>:2758:19)
        at Object.insert (eval at <anonymous> (app-c97455196b.js:756), <anonymous>:1769:5)
        at invokeInsertHook (eval at <anonymous> (app-c97455196b.js:756), <anonymous>:4472:28)
        at Vue$3.patch [as __patch__] (eval at <anonymous> (app-c97455196b.js:756), <anonymous>:4636:5)
        at Vue$3.Vue._update (eval at <anonymous> (app-c97455196b.js:756), <anonymous>:2639:19)
        at Vue$3.updateComponent (eval at <anonymous> (app-c97455196b.js:756), <anonymous>:2613:10)
        at Watcher.get (eval at <anonymous> (app-c97455196b.js:756), <anonymous>:2936:27)
        at new Watcher (eval at <anonymous> (app-c97455196b.js:756), <anonymous>:2928:12)
    

    Any advice on how to fix it? Thanks

    opened by SimplyCorey 8
  • Vue-query-builder doesn't load or render rules for existing query

    Vue-query-builder doesn't load or render rules for existing query

    HI, I have used vue-query-builder . and getting an issue for load rules for existing query . i have added record with se of rules so query was generated and saved to data base. while trying to retrieve and display the record query bulder does not set or load the rules based on teh existing query . Could you please help me to load exsiting rules based the query generated during add record. thanks in Asvance

    opened by kunchamreddy 6
  • Fixed Select and Checkbox values when set via the initial query

    Fixed Select and Checkbox values when set via the initial query

    Both Select and checkbox values were being set to the 1st choice in 'rules' and ignored any values passed in by 'initailQuery'. Added logic to check for 'query.value' to be null. Only then, 'updated_query.value' is changed to 1st choice provided in 'rule'.

    opened by fhafiz 6
  • Cannot catch update:query event emit

    Cannot catch update:query event emit

    This is probably more to do with incorrect syntax/code on my side, but I cannot catch the emit event from the component.

    Usually I would just do:

    <my-component @emit_event="function"></my-component>
    

    To catch the emitted event, but when I update the query and try to catch with @update:query nothing happens.

    <vue-query-builder :rules="rules" :initial-query="initialQuery" @update:query="updateQuery"></vue-query-builder>
    

    Instead I am using v-model on the query builder, which is actually working but I think the intention is to be using the event?

    This may be more of a stack overflow issue, but hopefully you are able to help!

    opened by booni3 4
  • Select input as new ruleType

    Select input as new ruleType

    Great component, thanks.

    I have added a select input because for my use case I wanted to specify a list of options that was too long to use the checkbox or radio options.

    opened by marksalmon 4
  • TypeError: Cannot read property '$options' of undefined

    TypeError: Cannot read property '$options' of undefined

    "query-builder-vue": "^1.0.5",
    "vue": "^2.5.22",
    

    I have a problem with drag and drop in production version. Everything works in developer mode yarn dev, but on production yarn build I have this error when I try to drag and drop element (it shows on drop actually). I think the problem is with function below:

    function getNextGroup(group) {
      if (group.depth < 1) {
        return group;
      }
    
      var vm = group;
    
      do {
        vm = vm.$parent;
      } while (vm.$options.name !== 'QueryBuilderGroup');
    
      return vm;
    }
    

    Maybe vm.$options does not exists for minified version?

    opened by jasiek-net 3
  • When logical operators changed - there is still

    When logical operators changed - there is still "All" option selected

    Hi there!

    Thanks for this plugin as it is great and saved a lot of time for me by not writing the whole query builder from scratch.

    Despite, I'm having some problems with it and also have suggestions.

    1. Problem: When changing operator labels, there is still preselected 'All' value even if it is called in other way. Here I've made a cover (:)) on your sendbox, but added labels on the component. Under the query builder form you will see labels object that is used. https://codesandbox.io/s/q96zl47919?view=preview As you will see when page have just loaded - Match type selects are blank until you explicitly click on it and choose an option. Also this causes a problem as I'm expecting to get only AND or OR on the backend.

    2. Suggestion: It would be great to have ability to add more than two operators 'All' or 'Any'. Anyway, except they are used only as select options and as an attribute in query.

    3. Suggestion: It would be great to have operators when using select field type. It would be great to have two operators for the select type: ['=', '<>'] so there would be a possibility to choose what to exclude in query.

    opened by alexeyeva 3
  • Where we can change the JSON data structure?

    Where we can change the JSON data structure?

    Where can we change the json data structure? as for now what i have so far is the example below but what if i changed the structure like for example I have question where in question contains answers and and then answers contains products. something like that.

    #the structure that i want , something like this , changing the generated json structure where can we modity that from you're builder?

    [

    store1: [
    {
        question1: [
            {
                answer1: [
                    product1,
                    product2,
                    product3,
                ]
            },
            {
                answer2: [
                    product1,
                    product2,
                    product3,
                ]
            }
    
        ]
    }]
    

    ]

    #what i have so far { "logicalOperator": "All", "children": [ { "type": "query-builder-rule", "query": { "rule": "question", "selectedOperator": "equals", "selectedOperand": "Question", "value": "What is my name?" } }, { "type": "query-builder-rule", "query": { "rule": "answer", "selectedOperator": "equals", "selectedOperand": "Answer", "value": "Test" } }, { "type": "query-builder-rule", "query": { "rule": "multi-select-field", "selectedOperator": "=", "selectedOperand": "Products", "value": [ "Red", "Orange", "Yellow", "Green" ] } } ] }

    opened by jelordreygulle 3
  • Camel case event queryUpdated

    Camel case event queryUpdated

    Under some circumstances (when using in-dom templates), camelCase events don't fire - see https://github.com/vuejs/vue/issues/4044

    Consider changing this query-updated throughout. I can provide a PR if you want.

    opened by rettigd 3
  • ReferenceError: _h is not defined

    ReferenceError: _h is not defined

    My Vue versiyon is 2.2.1

    screenshot_24

    i import like this:

    import builder from 'vue-query-builder';
    Vue.component('vue-query-builder',builder);
    
    

    and i use like this :

                    <vue-query-builder
                            :rules="myRules"
                            :maxDepth="2"
                    ></vue-query-builder>
    

    how can i fix it ?

    thanks.

    opened by aligundogdu 3
  • Bump terser from 4.6.2 to 4.8.1

    Bump terser from 4.6.2 to 4.8.1

    Bumps terser from 4.6.2 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)

    v4.8.0

    • Support for numeric separators (million = 1_000_000) was added.
    • Assigning properties to a class is now assumed to be pure.
    • Fixed bug where yield wasn't considered a valid property key in generators.

    v4.7.0

    • A bug was fixed where an arrow function would have the wrong size
    • arguments object is now considered safe to retrieve properties from (useful for length, or 0) even when pure_getters is not set.
    • Fixed erroneous const declarations without value (which is invalid) in some corner cases when using collapse_vars.

    v4.6.13

    • Fixed issue where ES5 object properties were being turned into ES6 object properties due to more lax unicode rules.
    • Fixed parsing of BigInt with lowercase e in them.

    v4.6.12

    • Fixed subtree comparison code, making it see that [1,[2, 3]] is different from [1, 2, [3]]
    • Printing of unicode identifiers has been improved

    v4.6.11

    • Read unused classes' properties and method keys, to figure out if they use other variables.
    • Prevent inlining into block scopes when there are name collisions
    • Functions are no longer inlined into parameter defaults, because they live in their own special scope.
    • When inlining identity functions, take into account the fact they may be used to drop this in function calls.
    • Nullish coalescing operator (x ?? y), plus basic optimization for it.
    • Template literals in binary expressions such as + have been further optimized

    v4.6.10

    • Do not use reduce_vars when classes are present

    v4.6.9

    • Check if block scopes actually exist in blocks

    v4.6.8

    • Take into account "executed bits" of classes like static properties or computed keys, when checking if a class evaluation might throw or have side effects.

    v4.6.7

    • Some new performance gains through a AST_Node.size() method which measures a node's source code length without printing it to a string first.

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump thenify from 3.3.0 to 3.3.1

    Bump thenify from 3.3.0 to 3.3.1

    Bumps thenify from 3.3.0 to 3.3.1.

    Changelog

    Sourced from thenify's changelog.

    3.3.1 / 2020-06-18

    fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Operator Options Enhancement

    Operator Options Enhancement

    It would be nice to provide a way to specify options associated with operators. For instance if a user wants to test string equality, they may also want an option to specify whether the test should be case sensitive or not.

    opened by Devmond 0
  • Bump eventsource from 1.0.7 to 1.1.1

    Bump eventsource from 1.0.7 to 1.1.1

    Bumps eventsource from 1.0.7 to 1.1.1.

    Changelog

    Sourced from eventsource's changelog.

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)

    1.1.0

    • Improve performance for large messages across many chunks (#130 Trent Willis)
    • Add createConnection option for http or https requests (#120 Vasily Lavrov)
    • Support HTTP 302 redirects (#116 Ryan Bonte)
    • Prevent sequential errors from attempting multiple reconnections (#125 David Patty)
    • Add new to correct test (#111 Stéphane Alnet)
    • Fix reconnections attempts now happen more than once (#136 Icy Fish)
    Commits
    • aa7a408 1.1.1
    • 56d489e chore: rebuild polyfill
    • 4a951e5 docs: update history for 1.1.1
    • f9f6416 fix: strip sensitive headers on redirect to different origin
    • 9dd0687 1.1.0
    • 49497ba Update history for 1.1.0 (#146)
    • 3a38537 Update history for #136
    • 46fe04e Merge pull request #136 from icy-fish/master
    • 9a4190f Fix issue: reconnection only happends for 1 time after connection drops
    • 61e1b19 test: destroy both proxied request and response on close
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Ability to name groups

    Ability to name groups

    This component is superb :)

    What would be awesome is the ability to name rule groups. I gave it a go and obviously it's trivial to add the v-text-field and styling, but I couldn't find a valid way of adding the property and value to the config or query object. My workaround results in the group names being messed up when I re-order the rules.

    opened by d0dge 0
  • Bump prismjs from 1.18.0 to 1.27.0

    Bump prismjs from 1.18.0 to 1.27.0

    Bumps prismjs from 1.18.0 to 1.27.0.

    Release notes

    Sourced from prismjs's releases.

    v1.27.0

    Release 1.27.0

    v1.26.0

    Release 1.26.0

    v1.25.0

    Release 1.25.0

    v1.24.1

    Release 1.24.1

    v1.24.0

    Release 1.24.0

    v1.23.0

    Release 1.23.0

    v1.22.0

    Release 1.22.0

    v1.21.0

    Release 1.21.0

    v1.20.0

    Release 1.20.0

    v1.19.0

    Release 1.19.0

    Changelog

    Sourced from prismjs's changelog.

    1.27.0 (2022-02-17)

    New components

    Updated components

    Updated plugins

    Other

    • Core
      • Added better error message for missing grammars (#3311) 2cc4660b

    1.26.0 (2022-01-06)

    New components

    Updated components

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by rundevelopment, a new releaser for prismjs since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v0.8.1)
  • v0.8.1(Jan 13, 2020)

    This release was a major refactor, and a big step toward a stable release. The biggest new feature is the ability to completely replace the template of the query builder, to provide better support for folks who need to integrate with other CSS frameworks or just want more control over the display of the query builder.

    Breaking changes:

    • selectedOperator and selectedOperand in the query input/output were changed to operator and operand.
    • styled prop was removed
    • default styling uses Bootstrap 4 classes, rather than Bootstrap 3

    See the documentation for more information on providing a custom template.

    Source code(tar.gz)
    Source code(zip)
  • v0.7.0(Feb 11, 2019)

    A couple of minor breaking changes:

    • Rather than just 2 match types, you can now add as many as you want and specify the label and key. The key will be used for the raw output. The matchTypeAny and matchTypeAll properties on the labels prop have been replaced with matchTypes; see the Configuration section of the docs for more details.

    • All rules can now have operators, including multiple choice rules. You just need to provide an array of operators with the rule and they'll be included. If you only have one or zero operators, nothing will show.

    Source code(tar.gz)
    Source code(zip)
  • v0.6.1(Jul 26, 2018)

  • v0.6.0(Jul 26, 2018)

Owner
Daniel Abernathy
Web Developer at ReviewPush
Daniel Abernathy
Get an overview of all your Grapher links and Collection2 schemas, and create queries just by clicking (with live results)

Graphical Grapher Get an overview of all your Grapher links and Collection2 schemas, and create queries just by clicking (with live results) Demo Inst

Simon Herteby 13 May 6, 2022
Leverages Netlify Graph to authenticate against GitHub, and then execute one of stored GraphQL queries

⭐ gravity A web application designed to visualize cross-referenced issues in a GitHub repository. It leverages Netlify Graph to authenticate against G

Den Delimarsky 2 Feb 21, 2022
VueJS mixin plugin for creating element size queries in components

VueJS mixin plugin for creating element size queries in components.

Enzo Eghermanne 53 Jan 17, 2022
Toolbox for building full-stack Vue.js apps

Basys Basys is a toolbox for building Vue.js full-stack apps with a focus on great developer experience. An easy way to create full-stack Express-base

Basys 116 Jun 7, 2022
🎨 A Toolset for Building Extensible Page Builders with Vue.js

V-Craft V-Craft (inspired by Craft.js) is a toolset for building extensible page builders with Vue.js. Instead of a complete page builder with a user

Yong-Yuan Chen 217 Oct 4, 2022
A framework for building VR applications with Vue

A Wrapper of Panolens for building VR applications with Vue based on threejs

Mudin Ibrahim 445 Sep 30, 2022
Singlepage.js is a pure Javascript portal platform for building modular Web applications

Singlepage.js is a pure Javascript portal platform for building modular Web applications.

Padmanabh Dabke 0 Jan 22, 2021
This is my project in building a simple tool to extract text from an image.

Extract Text About this is my project in building a simple tool to extract text from an image. I am implementing a Tesseract JS library in my project.

BAGUS BUDI SATOTO 2 Aug 30, 2022
An avatar component for vue.js

vue-avatar An avatar component for vue.js. This component display an avatar image and if none is provided fallback to the user initials. This componen

Elie 613 Sep 16, 2022
👆 Touch ripple component for @vuejs

Vue-Touch-Ripple Touch ripple component for Vue. Example Demo Page CDN Example Install CDN <script type="text/javascript" src="path/to/vue.min.js"></s

Surmon 460 Sep 25, 2022
Vue component that simulates a user typing, selecting, and erasing text.

Vue component that simulates a user typing, selecting, and erasing text. Play with vue-typer in this interactive demo. Getting Started Usage Props tex

null 773 Sep 27, 2022
A dead-simple gravatar component for VueJS

vue-gravatar A dead-simple gravatar component for VueJS applications. DEMO Installation yarn add vue-gravatar Usage Register the component import Vue

Jiří Chára 111 Sep 16, 2022
Rich flashcard component for vue js 2⚡

Vue Flashcard ⚡ This is on GitHub so let me know if I've b0rked it somewhere, give me a star ⭐ if you like it ✅ Install ?? npm i vue-flashcard ✅ Usage

NO ACTIVITES 120 May 19, 2022
A simple component that truncates your text and adds a 'Read More/Show Less' clickable.

vue-truncate-collapsed A simple Vue 2 Component that's truncate your text and adds a "Read Me/Show Less" clickable. Getting Started NPM $ npm install

Johnny Cavalcante 106 Feb 5, 2022
A simple and elegant letter avatar component for vue.js

vue-letter-avatar Introduction An elegant and easy to use letter avatar component for vue.js 2.0+ Install $ yarn add vue-letter-avatar or $ npm instal

null 62 May 24, 2022
A simple component to implement Invisible Recaptcha with no hassle

vue-invisible-recaptcha Super easy Invisible Recaptcha integration with VueJS Library is kind of unstable. Bugs, missing features might be present Fea

Yousef Sultan 60 Aug 10, 2021
Vue 2.x component based on embed.js https://github.com/ritz078/embed.js

vue-embed Embed component is based on embed.js for Vue 2.x. Embed.js is a lightweight JavaScript plugin to embed emojis, media, maps, tweets, code and

Thomas Marrec 62 May 8, 2022
Simple and beautiful card component with an elegant spark line, for VueJS.

Simple and beautiful card component with an elegant spark line, for VueJS. Demo Live demo of the component can be found here. Installation npm i -S vu

Burak Karakan 190 Sep 12, 2022
:electric_plug: Simple VueJS component to detect offline & online changes.

V-Offline ⚡ Detect offline & online events for your vue app. This is on GitHub so let me know if I've b0rked it somewhere, give me a star ⭐ if you lik

Vinayak Kulkarni 352 Sep 7, 2022