smoothly 0.1.120 → 0.2.3

package/dist/collection/components/table/expandable/row/style.css

@@ -2,11 +2,42 @@
 	display: table-row;
 	border: 1px solid rgb(var(--smoothly-default-color));
 	cursor: pointer;
+	box-sizing: border-box;
 }
-:host:nth-child(even) {
-	background-color: rgb(var(--smoothly-default-tint));
+.hide {
+	display: none;
 }
-:host:hover {
+.slot-detail {
+	position: relative;
 	background-color: rgb(var(--smoothly-default-color));
+	width: 104%;
+	left: -2%;
+	border-left-style: solid;
+	border-left-color: rgb(var(--smoothly-tertiary-color));
+	box-shadow: 0px 0px 5px 2px rgb(var(--smoothly-dark-color), 0.5);
+	box-sizing: border-box;
+	padding: 0.5rem 2%;
+}
+:host smoothly-icon {
+	width: 0.6rem;
+	height: 1rem;
+	float: left;
+	padding-left: 0.2rem;
+	padding-right: 0.2rem;
+	padding-bottom: 0.5rem;
+	transition: transform 0.2s;
+}
+:host[open] smoothly-icon {
+	transform: rotate(90deg);
+}
+:host[open] smoothly-table-cell {
+	padding-bottom: 0.5rem;
+}
+:host[open] {
+	position: relative;
+	z-index: 3;
+	background-color: rgb(var(--smoothly-default-color));
+	border-style: solid;
+	border-width: 5px;
+	box-shadow: inset 2px 0px 0px 0px rgb(var(--smoothly-dark-color)), inset 0px 2px 0px 0px rgb(var(--smoothly-dark-color)), inset -2px 0px 0px 0px rgb(var(--smoothly-dark-color)), inset 0px 0px 0px 2px rgb(var(--smoothly-default-color));
 }
-

package/dist/collection/components/table/header/index.js

@@ -1,7 +1,8 @@
-import { Component, h } from "@stencil/core";
+import { Component, h, Host, Prop } from "@stencil/core";
 export class TableHeader {
   render() {
-    return h("slot", null);
+    return (h(Host, null,
+      h("slot", null)));
   }
   static get is() { return "smoothly-table-header"; }
   static get encapsulation() { return "scoped"; }
@@ -11,4 +12,23 @@ export class TableHeader {
   static get styleUrls() { return {
     "$": ["style.css"]
   }; }
+  static get properties() { return {
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    }
+  }; }
 }

package/dist/collection/components/table/header/style.css

@@ -1,7 +1,9 @@
 :host {
 	display: table-cell;
-	padding: 0.75rem 0.5rem;
-	background-color: rgb(var(--smoothly-default-color));
-	border: 1px solid rgb(var(--smoothly-dark-color), 0.5);
 	line-height: 2.5rem;
+	background-color: rgb(var(--smoothly-color-shade));
+	border-bottom: 1px solid rgb(var(--smoothly-dark-color));
+	padding-left: 1rem;
+	font-weight: bold;
+	margin-bottom: 5rem;
 }

package/dist/collection/components/table/index.js

@@ -1,5 +1,8 @@
-import { Component, Element, h } from "@stencil/core";
+import { Component, Element, Event, h, Listen } from "@stencil/core";
 export class Table {
+  handleEvents(event) {
+    event.stopPropagation();
+  }
   render() {
     return [h("slot", null)];
   }
@@ -11,5 +14,34 @@ export class Table {
   static get styleUrls() { return {
     "$": ["style.css"]
   }; }
+  static get events() { return [{
+      "method": "loadMore",
+      "name": "loadMore",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
   static get elementRef() { return "element"; }
+  static get listeners() { return [{
+      "name": "expansionLoad",
+      "method": "handleEvents",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "expansionOpen",
+      "method": "handleEvents",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
 }

package/dist/collection/components/table/row/index.js

@@ -1,27 +1,21 @@
-import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
+import { Component, Element, h, Listen } from "@stencil/core";
 export class TableRow {
   constructor() {
-    this.align = "left";
+    this.expansions = [];
   }
-  openChanged(value) {
-    if (this.expansionElement)
-      this.element.after(this.expansionElement);
+  onExpansionLoad(event) {
+    this.expansions.push(event.target);
   }
-  onClick(e) {
-    this.open = !this.open;
-    e.stopPropagation();
-  }
-  componentDidRender() {
-    this.expansionOpen.emit(this.expansionElement);
-    if (this.expansionElement && this.open)
-      this.element.after(this.expansionElement);
+  onExpansionOpen(event) {
+    this.expansions.forEach(cell => {
+      if (cell != event.target)
+        cell.open = false;
+    });
+    if (event.detail)
+      this.element.after(event.detail);
   }
   render() {
-    return (h(Host, { style: { textAlign: this.align } },
-      h("slot", null),
-      h("tr", { ref: e => (this.expansionElement = e) },
-        h("td", { colSpan: 500, class: !this.open ? "hide" : "" },
-          h("slot", { name: "detail" })))));
+    return h("slot", null);
   }
   static get is() { return "smoothly-table-row"; }
   static get encapsulation() { return "scoped"; }
@@ -31,74 +25,16 @@ export class TableRow {
   static get styleUrls() { return {
     "$": ["style.css"]
   }; }
-  static get properties() { return {
-    "align": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"left\" | \"center\" | \"right\"",
-        "resolved": "\"center\" | \"left\" | \"right\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "align",
-      "reflect": false,
-      "defaultValue": "\"left\""
-    },
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "open",
-      "reflect": true
-    }
-  }; }
-  static get states() { return {
-    "beginOpen": {}
-  }; }
-  static get events() { return [{
-      "method": "expansionOpen",
-      "name": "expansionOpen",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "HTMLElement",
-        "resolved": "HTMLElement",
-        "references": {
-          "HTMLElement": {
-            "location": "global"
-          }
-        }
-      }
-    }]; }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "open",
-      "methodName": "openChanged"
-    }]; }
   static get listeners() { return [{
-      "name": "click",
-      "method": "onClick",
+      "name": "expansionLoad",
+      "method": "onExpansionLoad",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "expansionOpen",
+      "method": "onExpansionOpen",
       "target": undefined,
       "capture": false,
       "passive": false

package/dist/collection/components/table/row/style.css

@@ -1,14 +1,8 @@
 :host {
 	display: table-row;
 	border: 1px solid rgb(var(--smoothly-dark-color), 0.5);
-	cursor: pointer;
+	cursor: default;
 }
-:host:nth-child(even) {
-	background-color: rgb(var(--smoothly-default-color));
-}
-:host:hover {
-	background-color: rgb(var(--smoothly-default-color));
-}
-.hide{
+.hide {
 	display: none;
 }

package/dist/collection/components/table/style.css

@@ -1,9 +1,14 @@
 :host {
 	display: table;
 	text-align: left;
-	border-collapse: collapse;
-	border: 3px solid rgb(var(--smoothly-dark-color), 0.5);
-	width: 100%;
+	border: 1px solid rgb(var(--smoothly-dark-color));
+	width: 80%;
 	box-sizing: border-box;
 	background-color: rgb(var(--smoothly-default-color));
+	margin: 1rem 9.5%;
+	padding-bottom: 0.5rem;
+}
+.slot-detail > div {
+	padding: 10rem 0;
+	margin-left: 10rem;
 }