@xplortech/apollo-core 1.0.0-beta.7 → 1.0.0-beta.8

package/dist/collection/components/xpl-table/xpl-table.js

@@ -1,8 +1,6 @@
-import { Component, Host, Prop, State, Event, h, } from '@stencil/core';
+import { Host, h, } from '@stencil/core';
 export class XplTable {
   constructor() {
-    this.areAllSelected = false;
-    this.hasScrolled = false;
     this.selectAll = (e) => {
       const { target } = e;
       if (!(target instanceof HTMLInputElement))
@@ -30,28 +28,43 @@ export class XplTable {
     this.onScroll = () => {
       this.hasScrolled = this.container.scrollLeft > 0;
     };
+    /**
+     * TODO: Need to figure out how this interplays with data
+     * received from an API/server
+     */
+    // private sortBy = (col: number, ascending = true) => {
+    //     this.rowData.sort((a, b) => {
+    //         const A = a[col];
+    //         const B = b[col];
+    //         if (typeof A === 'number' && typeof B === 'number') {
+    //             const f = ascending ? 1 : -1;
+    //             return A > B ? f : -f;
+    //         }
+    //         return -1;
+    //     });
+    //     this.rowData = Array.from(this.rowData);
+    //     this.render();
+    // };
+    this.setData = () => {
+      this.rowData = this.data !== undefined ? Array.from(this.data) : [];
+      this.selected = new Array(this.rowData.length).fill(false);
+    };
+    this.columns = undefined;
+    this.data = undefined;
+    this.freeze = undefined;
+    this.multiselect = undefined;
+    this.striped = undefined;
+    this.areAllSelected = false;
+    this.rowData = undefined;
+    this.hasScrolled = false;
+    this.selected = undefined;
+  }
+  watchData() {
+    this.setData();
   }
-  /**
-   * TODO: Need to figure out how this interplays with data
-   * received from an API/server
-   */
-  // private sortBy = (col: number, ascending = true) => {
-  //     this.rowData.sort((a, b) => {
-  //         const A = a[col];
-  //         const B = b[col];
-  //         if (typeof A === 'number' && typeof B === 'number') {
-  //             const f = ascending ? 1 : -1;
-  //             return A > B ? f : -f;
-  //         }
-  //         return -1;
-  //     });
-  //     this.rowData = Array.from(this.rowData);
-  //     this.render();
-  // };
   componentWillLoad() {
     this.areAllSelected = false;
-    this.rowData = this.data !== undefined ? Array.from(this.data) : [];
-    this.selected = new Array(this.rowData.length).fill(false);
+    this.setData();
   }
   render() {
     let className = 'xpl-table';
@@ -61,140 +74,144 @@ export class XplTable {
       className += ' xpl-table--freeze';
     if (this.hasScrolled)
       className += ' xpl-table--has-scrolled';
-    return (h(Host, null,
-      h("div", { class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => (this.container = el) },
-        h("table", { class: className },
-          this.columns && (h("thead", null, this.columns.map((column, i) => {
-            return (h("th", null, this.multiselect && i === 0 ? (h("label", { htmlFor: "__xpl-table-th" },
-              h("input", { checked: this.areAllSelected, id: "__xpl-table-th", 
-                // appear indeterminate when at least one but not all
-                // are selected
-                indeterminate: !this
-                  .areAllSelected &&
-                  this.selected.some((a) => a), onChange: (e) => {
-                  this.selectAll(e);
-                }, type: "checkbox" }),
-              column)) : (column)));
-          }))),
-          h("tbody", null, this.rowData.map((row, rowNum) => {
-            return (h("tr", { class: this.selected &&
-                this.selected[rowNum]
-                ? 'xpl-table-row-selected'
-                : '' }, row.map((cell, i) => {
-              return (h("td", null, this.multiselect &&
-                i === 0 ? (h("label", { htmlFor: '__xpl-table-row-' +
-                  rowNum },
-                h("input", { id: '__xpl-table-row-' +
-                    rowNum, checked: this
-                    .selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum) }),
-                h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))));
-            })));
-          }))))));
+    return (h(Host, null, h("div", { class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => (this.container = el) }, h("table", { class: className }, this.columns && (h("thead", null, this.columns.map((column, i) => {
+      return (h("th", null, this.multiselect && i === 0 ? (h("label", { htmlFor: "__xpl-table-th" }, h("input", { checked: this.areAllSelected, id: "__xpl-table-th",
+        // appear indeterminate when at least one but not all
+        // are selected
+        indeterminate: !this
+          .areAllSelected &&
+          this.selected.some((a) => a), onChange: (e) => {
+          this.selectAll(e);
+        }, type: "checkbox" }), column)) : (column)));
+    }))), h("tbody", null, this.rowData.map((row, rowNum) => {
+      return (h("tr", { class: this.selected &&
+          this.selected[rowNum]
+          ? 'xpl-table-row-selected'
+          : '' }, row.map((cell, i) => {
+        return (h("td", null, this.multiselect &&
+          i === 0 ? (h("label", { htmlFor: '__xpl-table-row-' +
+            rowNum }, h("input", { id: '__xpl-table-row-' +
+            rowNum, checked: this
+            .selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum) }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell }))));
+      })));
+    }))))));
   }
   static get is() { return "xpl-table"; }
-  static get properties() { return {
-    "columns": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "data": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[][]",
-        "resolved": "string[][]",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      }
-    },
-    "freeze": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get properties() {
+    return {
+      "columns": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "data": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[][]",
+          "resolved": "string[][]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
       },
-      "attribute": "freeze",
-      "reflect": false
-    },
-    "multiselect": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "freeze": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "freeze",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "multiselect": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "multiselect",
+        "reflect": false
       },
-      "attribute": "multiselect",
-      "reflect": false
-    },
-    "striped": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "striped",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "areAllSelected": {},
-    "rowData": {},
-    "hasScrolled": {},
-    "selected": {}
-  }; }
-  static get events() { return [{
-      "method": "tableSelect",
-      "name": "tableSelect",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+      "striped": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "striped",
+        "reflect": false
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "areAllSelected": {},
+      "rowData": {},
+      "hasScrolled": {},
+      "selected": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tableSelect",
+        "name": "tableSelect",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get watchers() {
+    return [{
+        "propName": "data",
+        "methodName": "watchData"
+      }];
+  }
 }

package/dist/collection/components/xpl-tag/xpl-tag.js

@@ -1,30 +1,29 @@
-import { Component, Host, h, Event } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 export class XplTag {
   render() {
-    return (h(Host, { class: "xpl-tag-container" },
-      h("button", { class: "xpl-tag", onClick: () => {
-          this.close.emit();
-        } },
-        h("slot", null)),
-      h("button", { class: "xpl-tag__close", onClick: () => {
-          this.close.emit();
-        } }, "\u00D7")));
+    return (h(Host, { class: "xpl-tag-container" }, h("button", { class: "xpl-tag", onClick: () => {
+        this.close.emit();
+      } }, h("slot", null)), h("button", { class: "xpl-tag__close", onClick: () => {
+        this.close.emit();
+      } }, "\u00D7")));
   }
   static get is() { return "xpl-tag"; }
-  static get events() { return [{
-      "method": "close",
-      "name": "close",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
+  static get events() {
+    return [{
+        "method": "close",
+        "name": "close",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
 }