Query builder updates (#23)

* Add default value to comparator select

* Cleanup re-rendering of elements

* Remove need for `lodash` imports

* Move delete button to `query-builder__wrapper`

* Split switch statement logic into method calls

* Add `ZnButton` type hint

* Remove unused date logic

* Refactor comparator option text

* Add `ZnButton` and `ZnInput` dependencies

* Create `litToHTML` utility

* Use lit for element rendering

* Add query builder example doc

* Use lit for element rendering comparator

* Use lit for element rendering rows

* Remove unused method

* Fix `showPopover` being run on deleted elements

* Add live query string example doc

* Rename example to use a generic filter

* Reformat query-builder docs

* Add comparators table

* Add types table

* Fix query builder row widths

* Update query builder docs

* Add `in` operator example to docs

* Add string IDs to query builder filters in docs

* Tidy data-table component

* Split out duplicate page logic

* Shorten if statement

* Increase key and comparator flex-basis values

* Add optional query builder to data table component

* Remove unused styling

* Disable confirm dialog for disabled buttons

* Disable data table action buttons by default

* Add filter query to data-table

* Replace pagination defaults values with constants

* Refactor to only re-render table body & footer with new data

* Refactor click event for `show` method

* Move styles onto separate line

* Add actions to `HasSlotController`

Author: Jonezzyboy

docs/assets/scripts/docs.js

@@ -347,3 +347,28 @@
 
   document.addEventListener('turbo:load', updateVersion);
 })();
+
+//
+// Show query on query builder example
+//
+(() =>
+{
+  ['click', 'keyup'].forEach(function (evt)
+  {
+    document.addEventListener(evt, function (e)
+    {
+      if(!document.getElementById('query-string-example'))
+      {
+        return;
+      }
+      const target = e.target;
+
+      if(target.id === 'query-string-example')
+      {
+        document.querySelector('.query-string').innerText = target.value;
+      }
+    });
+  });
+})();
+
+

docs/pages/components/query-builder.md

@@ -6,17 +6,135 @@ layout: component
 ---
 
 ```html:preview
-<zn-query-builder></zn-query-builder>
+
+<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
 
-### First Example
+### Query String
+
+This example will show the produced query string from the selected parameters.
+
+```html:preview
 
-TODO
+<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>
+```
 
-### Second Example
+## Types
 
-TODO
+| 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          |

src/components/confirm/confirm.component.ts

@@ -87,12 +87,14 @@ export default class ZnConfirm extends ZincElement {
     if (this.trigger) {
       const trigger = this.parentElement?.querySelector('#' + this.trigger);
       if (trigger) {
-        trigger.addEventListener('click', () => this.show());
+        trigger.addEventListener('click', this.show);
       }
     }
   }
 
-  show() {
+  show = (event: Event | undefined = undefined) =>{
+    const trigger = event?.target as HTMLButtonElement
+    if (trigger?.disabled) return;
     this.dialog.show();
   }