Query Builder
Examples
Query String
Types
Comparators
Importing
Slots
Custom Properties
Parts
Dependencies

Query Builder

<zn-query-builder> | ZnQueryBuilder

Since 1.0

experimental

Short summary of the component’s intended use.


<zn-query-builder
  filters="[
      {
        &quot;id&quot;:&quot;title&quot;,
        &quot;name&quot;:&quot;Title&quot;,
        &quot;operators&quot;:[
          &quot;eq&quot;
        ]
      },
      {
        &quot;id&quot;:&quot;author&quot;,
        &quot;name&quot;:&quot;Author&quot;,
        &quot;operators&quot;:[
          &quot;eq&quot;,
          &quot;fuzzy&quot;
        ]
      }
    ]">
</zn-query-builder>

Examples

Query String

This example will show the produced query string from the selected parameters.

Query String:


<zn-query-builder
  id="query-string-example"
  filters="[
      {
        &quot;id&quot;:&quot;title&quot;,
        &quot;name&quot;:&quot;Title&quot;,
        &quot;operators&quot;:[
          &quot;eq&quot;
        ]
      },
      {
        &quot;id&quot;:&quot;author&quot;,
        &quot;name&quot;:&quot;Author&quot;,
        &quot;operators&quot;:[
          &quot;eq&quot;,
          &quot;fuzzy&quot;
        ]
      },
      {
        &quot;id&quot;:&quot;genre&quot;,
        &quot;name&quot;:&quot;Genre&quot;,
        &quot;options&quot;:{
          &quot;action&quot;:&quot;Action&quot;,
          &quot;comedy&quot;:&quot;Comedy&quot;,
          &quot;drama&quot;:&quot;Drama&quot;,
          &quot;fantasy&quot;:&quot;Fantasy&quot;,
          &quot;horror&quot;:&quot;Horror&quot;,
          &quot;mystery&quot;:&quot;Mystery&quot;,
          &quot;romance&quot;:&quot;Romance&quot;,
          &quot;thriller&quot;:&quot;Thriller&quot;,
          &quot;sci-fi&quot;:&quot;Science Fiction&quot;
        },
        &quot;maxOptionsVisible&quot;: &quot;3&quot;,
        &quot;operators&quot;:[
          &quot;eq&quot;,
          &quot;in&quot;
        ]
      },
      {
        &quot;id&quot;:&quot;rating&quot;,
        &quot;name&quot;:&quot;Rating&quot;,
        &quot;type&quot;:&quot;number&quot;,
        &quot;operators&quot;:[
          &quot;eq&quot;,
          &quot;gt&quot;,
          &quot;gte&quot;,
          &quot;lt&quot;,
          &quot;lte&quot;
        ]
      },
      {
        &quot;id&quot;:&quot;created&quot;,
        &quot;name&quot;:&quot;Created&quot;,
        &quot;type&quot;:&quot;date&quot;,
        &quot;operators&quot;:[
          &quot;eq&quot;,
          &quot;before&quot;,
          &quot;after&quot;
        ]
      }
    ]">
</zn-query-builder>

<br>

<div style="word-wrap: break-word;"><b>Query String:</b> </span><span class="query-string"></span></div>

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
`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@1.0.0/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@1.0.0/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.

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-example>
<zn-icon>
<zn-input>
<zn-option>
<zn-popup>
<zn-select>
<zn-tag>
<zn-tooltip>