rtucek / vue-query-builder Goto Github PK

Is there any guidance on using this query builder with GraphQL/Apollo?

I am facing error while using the with in my vue3 project. Could you please let me know if this is compatible with vue 3.2.

Hi,

is there an easy way to show / hide / disable the delete buttons? It is barely possible to do achieve that with pure css.

it could be possible via config like the dragging disable toggle. for my purposes it would be totaly fineto control it globaly.

Bg

Thanks for component!
Please add custom lables and maxDepth in component params.

I need to add some custom components but with dynamic values (fill a dropdown with values coming from DB)
is it possible?

thanks!

Is there currently a way to build rules with operators? I would like to have comparisons within the rule.

For example:

I see the rules array in the config and the query have fields for the name and value of the rule, but nothing for an operator.

The selected object from rules might be necessary in the ruleSlot.
For example, rule is a dropdown and available values are also dropdowns, with collection depending on selected rule.

When will it be support vue3?

I would like to use this library/component in my Vue 3 application. When will this be ready for Vue 3?

This looks really neat.

Apologies for my ignorance here, but how does one actually use the generated "query"? I would love to generate mongodb queries from this. I see that https://querybuilder.js.org/ has a plugin to do this for mongodb. Does your package have a similar methodolgy?

Hi,

i want to implement a "LIMIT" operation with your query builder. But i am struggeling to bring addtional information to the GroupOperatorControlComponent and back to the Query.

In the end i am thinking of using a custom GroupOperatorControlComponent and place there some kind of input box for a number that "limits" the result.

Is there any possibility to achieve that?

Btw. thank you for your code / time and of course an answer :-)

On Linux, Google Chrome's recent release of v97 seems to have a regression with drag'n'drop functionality.
On other OS', the bug doesn't seem to be present.

Confirmed per SortableJS/Sortable#2117 and multiple browser bugs [1] [2]

seem like this component doesn't support Vue3 sir :D

Hi,

are rule operators not supported?
For example, for constructing a query: "numA > 3"

Note - these are not the And/Or group operators.

Hi - This is a great library for building queries.
I'm trying to use the Number component with operators following the example here (https://codesandbox.io/s/njrm3?file=/src/App.vue) but get the following error.
Vue warn]: Invalid prop: type check failed for prop "value". Expected Number with value NaN, got Object

I worked around it by using code from the Type Component, it works but then I cannot set the default value. Appreciate any suggestions.

I'm having this issue when try to follow the docs. Using Vue 2.6.12

vue.esm.js?a026:628 [Vue warn]: Error in nextTick: "TypeError: Cannot use 'in' operator to search for '__reactiveInject__' in undefined" vue.esm.js?a026:1897 TypeError: Cannot use 'in' operator to search for '__reactiveInject__' in undefined at resolveInject (vue.esm.js?aba4:4649:1) at initInjections (vue.esm.js?aba4:4619:1) at Vue._init (vue.esm.js?aba4:4710:1) at new QueryBuilder (vue.esm.js?aba4:5836:1) at createComponentInstanceForVnode (vue.esm.js?a026:3292:1) at init (vue.esm.js?a026:3123:1) at createComponent (vue.esm.js?a026:5989:1) at createElm (vue.esm.js?a026:5936:1) at createChildren (vue.esm.js?a026:6064:1) at createElm (vue.esm.js?a026:5965:1)

Currently it is not possible to edit the labels of buttons or selectors like in the version from dabernathy89/vue-query-builder:
This would be an important feature for supporting other languages.

Example from dabernathy89's query-builder
labels optional Type: Object
Replace the default labels used in the UI. The default values are:

{
  "matchType": "Match Type",
  "matchTypes": [
    {"id": "all", "label": "All"},
    {"id": "any", "label": "Any"}
  ],
  "addRule": "Add Rule",
  "removeRule": "×",
  "addGroup": "Add Group",
  "removeGroup": "×",
  "textInputPlaceholder": "value",
}

I was wondering if there is an easy way to store and reload all the selections on the query-builder when it is remounted? Thank you.

If it's easy for you, can you provide the better way to test a rule ?
i'm struggling a bit with it (in order to pass configuration and model) and maybe you've already done this before.

Thanks!

Hi, first of all thank you for such a great library!

I am facing an issue where I have multiple rules using the same component.
I noticed this behavior when trying to get data into the (custom) component of a (custom / scoped) RuleSlot. Within this component, I have a drop-down that eventually will fetch data from a DB / API. In the end there will be ~30 rules that have a dropdown selection, and in my opinion it is not worth creating 30 custom (pretty much duplicate) dropdown components. Therefor I am trying to use a single component in multiple rules, with different data fetched in the dropdown.

One of the main issue is the identification of the exact rule based on the data that is being forwarded into the RuleSlot:
src/QueryBuilderRule.vue#L81 and src/QueryBuilderRule.vue#L42
Only with this information currently provided, the exact rule can only be found out by matching the ruleComponent (and ruleData, dependend if initialValue is different):

    ruleName() {
      return this.rules
        .find(r => r.component === this.ruleCtrl.ruleComponent)
        .name;
    },

however, as I have multiple rules that have the same component, this won't work (it only give back the first element in the rules array it finds).

To fix this behavior, the identifier from the rules would be needed inside the RuleSlot.

Basically in the get ruleSlotProps (src/QueryBuilderRule.vue#L42) adding one item to the object being forwarded to the RuleSlot:

  get ruleSlotProps(): RuleSlotProps {
    return {
      ruleComponent: this.component,
      ruleData: this.query.value,
      ruleIdentifier: this.query.identifier
      updateRuleData: (ruleData: any) => this.ruleUpdate(ruleData),
    };
  }

When this ruleIdentifier is available in the RuleSlot the ruleName (and exact rule) can be found:

.find(r => r.identifier=== this.ruleCtrl.ruleIdentifier)

Thank you!

In the documentation it says "Control maximum depth of nested groups." but I couldn't figure out how. Couldn't find an example in the documentation too. Any help?

Hello, will you make an update for the new version of vue?
I'm building a project and can't find any query builder component for vue 3! Does anyone know one?