fix(flightkit): now correctly renders as an iife

dist/flightkit-v0.0.20/flightkit.js → dist/flightkit-v0.0.21/flightkit.js

@@ -581,36 +581,6 @@
             super();
             /** We can not inherit from this using extends, because of vue3  */
             this.base = new BaseComponent();
-            this.setContents(this.getAttribute('contents'));
-            this.setTemplates(this.getAttribute('templates'));
-            this.setColumnOrder(this.getAttribute('columns'));
-            this.filter = this.getAttribute('filter') || '';
-            this.setAnnotations(this.getAttribute('annotations'));
-            this.setHiddenRows(this.getAttribute('hide'));
-
-            const presetOrder = this.getAttribute('order');
-            if (presetOrder) {
-                this.orderBy = presetOrder;
-            }
-
-            const selectionProperty = this.getAttribute('selection-property');
-            if (selectionProperty) {
-                this._selectionProperty = selectionProperty;
-            }
-
-            const innerTemplates = this.getElementsByTagName('template');
-
-            if (innerTemplates.length) {
-                const templatesToAdd = {};
-                for (const template of innerTemplates) {
-                    const templateName = template.getAttribute('name');
-                    templatesToAdd[templateName] = template.innerHTML;
-                    if (template.classList.length) {
-                        this._templateClasses[templateName] = [...template.classList];
-                    }
-                }
-                this.setTemplates(templatesToAdd);
-            }
         }
 
         /** we only need this if we dont use get/set */
@@ -707,6 +677,37 @@
         }
 
         connectedCallback() {
+            this.setContents(this.getAttribute('contents'));
+            this.setTemplates(this.getAttribute('templates'));
+            this.setColumnOrder(this.getAttribute('columns'));
+            this.filter = this.getAttribute('filter') || '';
+            this.setAnnotations(this.getAttribute('annotations'));
+            this.setHiddenRows(this.getAttribute('hide'));
+
+            const presetOrder = this.getAttribute('order');
+            if (presetOrder) {
+                this.orderBy = presetOrder;
+            }
+
+            const selectionProperty = this.getAttribute('selection-property');
+            if (selectionProperty) {
+                this._selectionProperty = selectionProperty;
+            }
+
+            const innerTemplates = this.getElementsByTagName('template');
+
+            if (innerTemplates.length) {
+                const templatesToAdd = {};
+                for (const template of innerTemplates) {
+                    const templateName = template.getAttribute('name');
+                    templatesToAdd[templateName] = template.innerHTML;
+                    if (template.classList.length) {
+                        this._templateClasses[templateName] = [...template.classList];
+                    }
+                }
+                this.setTemplates(templatesToAdd);
+            }
+
             this.createHtml();
             this.base.render(this);
         };
@@ -1650,20 +1651,6 @@
         constructor() {
             super();
             this.base = new BaseComponent();
-            /** Check if there is contents already there. */
-            this.setContents(this.getAttribute('contents'));
-            this.commentType = this.getAttribute('comment') ?? '';
-            this.iconSet = this.getAttribute('icon-set') ?? 'file';
-            this.searchStyle = this.getAttribute('search-style') ?? 'highlight';
-            this.maxDepth = this.getAttribute('max-depth') ? parseInt(this.getAttribute('max-depth')) : -1;
-            this.invertComment = this.getAttribute('invert-comment') ? true : false;
-            this.setFilter(this.getAttribute('filter'));
-
-            this.style.display = 'block';
-            this.style.maxWidth = 'fit-content';
-            this.style.margin = '0 1rem 0 0';
-            this.base.addEvent('.flk-branch', 'click', this.emitNodeToggle);
-            this.base.addEvent('.flk-tree-summary', 'click', this.stopCollapseWhenJustFiltered);
         }
 
         stopCollapseWhenJustFiltered(event) {
@@ -2209,8 +2196,22 @@
             }
         }
 
-        /** grab inner HTML from here */
         connectedCallback() {
+            /** Check if there is contents already there. */
+            this.setContents(this.getAttribute('contents'));
+            this.commentType = this.getAttribute('comment') ?? '';
+            this.iconSet = this.getAttribute('icon-set') ?? 'file';
+            this.searchStyle = this.getAttribute('search-style') ?? 'highlight';
+            this.maxDepth = this.getAttribute('max-depth') ? parseInt(this.getAttribute('max-depth')) : -1;
+            this.invertComment = this.getAttribute('invert-comment') ? true : false;
+            this.setFilter(this.getAttribute('filter'));
+
+            this.style.display = 'block';
+            this.style.maxWidth = 'fit-content';
+            this.style.margin = '0 1rem 0 0';
+            this.base.addEvent('.flk-branch', 'click', this.emitNodeToggle);
+            this.base.addEvent('.flk-tree-summary', 'click', this.stopCollapseWhenJustFiltered);
+
             if (!this._setup) {
                 this.init();
             }

documentation/src/assets/js/databaseSet.js

@@ -0,0 +1,106 @@
+export const databaseSet = {
+    "database1": {
+        "table1": [
+            {
+                "column1": "value1",
+                "column2": 2,
+                "column3": true,
+                "column4": null,
+                "column5": "value5",
+                "column6": "a1"
+            },
+            {
+                "column1": "value6",
+                "column2": 7,
+                "column3": false,
+                "column4": "value8",
+                "column5": 9,
+                "column6": "b2"
+            },
+            {
+                "column1": "value10",
+                "column2": 11,
+                "column3": true,
+                "column4": "value12",
+                "column5": 13,
+                "column6": "A1"
+            },
+            {
+                "column1": "value14",
+                "column2": 15,
+                "column3": false,
+                "column4": "value16",
+                "column5": 17,
+                "column6": "b3"
+            },
+            {
+                "column1": "value18",
+                "column2": 18,
+                "column3": true,
+                "column4": "value20",
+                "column5": 21,
+                "column6": "a2"
+            },
+            {
+                "column1": "value18",
+                "column2": 19,
+                "column3": true,
+                "column4": "value 28",
+                "column5": 17.5,
+                "column6": "b1"
+            }
+        ],
+        "table2": [
+            {
+                "column1": "value14",
+                "column2": 15,
+                "column3": false,
+                "column4": "value16",
+                "column5": 17,
+                "column6": "b3"
+            },
+            {
+                "column1": "value18",
+                "column2": 19,
+                "column3": true,
+                "column4": "value29",
+                "column5": 21,
+                "column6": "a2"
+            }
+        ]
+    },
+    "database2": {
+        "table1": [
+            {
+                "column1": "value22",
+                "column2": 23,
+                "column3": false,
+                "column4": "value24",
+                "column5": 25
+            },
+            {
+                "column1": "value26",
+                "column2": 27,
+                "column3": true,
+                "column4": "value28",
+                "column5": 29
+            }
+        ],
+        "table2": [
+            {
+                "column1": "value30",
+                "column2": 31,
+                "column3": false,
+                "column4": "value32",
+                "column5": 33
+            },
+            {
+                "column1": "value34",
+                "column2": 35,
+                "column3": true,
+                "column4": "value36",
+                "column5": 37
+            }
+        ]
+    }
+}