Query Builder
<zn-query-builder> | ZnQueryBuilder
Short summary of the component’s intended use.
<zn-query-builder filters="[ { "id":"title", "name":"Title", "operators":[ "eq" ] }, { "id":"active", "name":"Active", "type":"boolean", "operators":[ "eq" ] }, { "id":"author", "name":"Author", "operators":[ "eq", "fuzzy" ] } ]"> </zn-query-builder>
Examples
Query String
This example will show the produced query string from the selected parameters.
<zn-query-builder id="query-string-example" filters="[ { "id":"title", "name":"Title", "operators":[ "eq" ] }, { "id":"author", "name":"Author", "operators":[ "eq", "fuzzy" ] }, { "id":"genre", "name":"Genre", "options":{ "action":"Action", "comedy":"Comedy", "drama":"Drama", "fantasy":"Fantasy", "horror":"Horror", "mystery":"Mystery", "romance":"Romance", "thriller":"Thriller", "sci-fi":"Science Fiction" }, "maxOptionsVisible": "3", "operators":[ "eq", "in" ] }, { "id":"rating", "name":"Rating", "type":"number", "operators":[ "eq", "gt", "gte", "lt", "lte" ] }, { "id":"created", "name":"Created", "type":"date", "operators":[ "eq", "before", "after" ] } ]"> </zn-query-builder> <br> <div style="word-wrap: break-word;"><b>Query String:</b> </span><span class="query-string"></span></div>
Starting Rules
Use rules to start with rules already added, in the same key,
comparator, value shape the builder submits. Add repeatable to let a
filter be used more than once, for example to filter a date between two days.
<zn-query-builder repeatable filters="[ {"id":"email","name":"Email","operators":["eq","starts"]}, {"id":"rating","name":"Rating","type":"number","operators":["gte","lte"]} ]" rules="[ {"key":"email","comparator":"starts","value":"sales@"}, {"key":"rating","comparator":"gte","value":"3"}, {"key":"rating","comparator":"lte","value":"5"} ]"> </zn-query-builder>
Types
| Name |
|---|
bool |
boolean |
date |
number |
Comparators
| Name | Description |
|---|---|
Eq |
Equals |
Neq |
Not Equals |
Before |
Was Before |
After |
Was After |
In |
In |
MatchPhrasePre |
Match Phrase Prefix |
NMatchPhrasePre |
Does Not Match Phrase Prefix |
MatchPhrase |
Match Phrase |
NMatchPhrase |
Does Not Match Phrase |
Match |
Match |
NMatch |
Does Not Match |
Starts |
Starts With |
NStarts |
Does Not Start With |
Wild |
Wildcard Match |
NWild |
Does Not Match Wildcard |
DnContain |
Does Not Contain |
LikeIn |
Like Any Of |
NLikeIn |
Not Like Any Of |
Fuzzy |
Fuzzy Match With |
NFuzzy |
Does Not Match Fuzzy With |
Gte |
Greater Than or Equals |
Gt |
Greater Than |
Lt |
Less Than |
Lte |
Less Than or Equals |
Importing
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.
To import this component from the CDN using a script tag:
<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@2.0.10/dist/components/query-builder/query-builder.js"></script>
To import this component from the CDN using a JavaScript import:
import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@2.0.10/dist/components/query-builder/query-builder.js';
To import this component using a bundler:
import '@kubex/zinc/dist/components/query-builder/query-builder.js';
Slots
| Name | Description |
|---|---|
| (default) | The default slot. |
example
|
An example slot. |
Learn more about using slots.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
rules
|
Rules to start with, in the shape the builder submits. |
QueryBuilderRule[]
|
[]
|
|
repeatable
|
Allows a filter to be added more than once, e.g. for a date range. |
boolean
|
false
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Custom Properties
| Name | Description | Default |
|---|---|---|
--example |
An example CSS custom property. |
Learn more about customizing CSS custom properties.
Parts
| Name | Description |
|---|---|
base |
The component’s base wrapper. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<zn-button><zn-color-picker><zn-example><zn-icon><zn-input><zn-opt-group><zn-option><zn-popup><zn-select><zn-slash-item><zn-slash-menu><zn-tag><zn-tooltip>