smoothly 0.2.2 → 0.2.5

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

@@ -4,12 +4,16 @@ export class SmoothlyPicker {
     this.keepFocusOnReRender = false;
     this.emptyMenuLabel = "No Options";
     this.multiple = false;
+    this.mutable = false;
     this.options = [];
     this.selections = [];
     this.selectNoneName = "Select None";
+    this.selectAllName = "Select All";
     this.selectionName = "items selected";
+    this.newOptionLabel = "Add:";
+    this.valueValidator = _ => [true, undefined];
   }
-  isOpenChangeHander() {
+  isOpenChangeHandler() {
     if (this.isOpen == false) {
       this.menuClose.emit(this.selections);
     }
@@ -21,10 +25,26 @@ export class SmoothlyPicker {
       this.keepFocusOnReRender = false;
     }
   }
-  optionSelectHander(event) {
+  optionSelectHandler(event) {
     this.toggle(event.detail);
     event.stopPropagation();
   }
+  optionAddHandler(event) {
+    if (this.mutable) {
+      const [status, notice] = this.valueValidator(event.detail.value);
+      if (status) {
+        const option = Object.assign({}, event.detail);
+        this.options = [...this.options, option];
+        this.select(option);
+      }
+      notice && this.notice.emit(notice);
+    }
+    event.stopPropagation();
+  }
+  emptyHandler(event) {
+    this.empty = event.detail;
+    event.stopPropagation();
+  }
   toggle(option) {
     option.value == "select-none"
       ? this.toggleAll()
@@ -59,9 +79,19 @@ export class SmoothlyPicker {
   }
   toggleHighlighted() {
     var _a;
-    (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.getHighlighted().then((result) => {
-      result && this.toggle(result);
-    });
+    if (this.mutable && this.empty) {
+      const [status, notice] = this.valueValidator(this.inputElement.value);
+      if (status) {
+        const option = { name: this.inputElement.value, value: this.inputElement.value };
+        this.options = [...this.options, option];
+        this.select(option);
+      }
+      notice && this.notice.emit(notice);
+    }
+    else
+      (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.getHighlighted().then((result) => {
+        result && this.toggle(result);
+      });
   }
   highlightDefault() {
     var _a;
@@ -123,7 +153,7 @@ export class SmoothlyPicker {
         ? [
           {
             value: "select-none",
-            name: this.selectNoneName,
+            name: this.selections.length == this.options.length ? this.selectNoneName : this.selectAllName,
             left: this.getCheckHtml(this.selections.length == ((_c = this.options) === null || _c === void 0 ? void 0 : _c.length)),
             divider: true,
           },
@@ -140,7 +170,7 @@ export class SmoothlyPicker {
             : this.selections.map(selection => selection.name).join(", "), onKeyDown: e => this.onKeyDown(e), onInput: (e) => this.onInput(e) }),
         h("smoothly-icon", { class: "down", name: "chevron-down", size: "tiny" }),
         h("smoothly-icon", { class: "up", name: "chevron-up", size: "tiny" })),
-      h("smoothly-menu-options", { style: { width: "100%" }, optionStyle: Object.assign({}, this.optionStyle), order: false, emptyMenuLabel: this.emptyMenuLabel, "max-menu-height": this.maxMenuHeight, ref: (el) => (this.menuElement = el !== null && el !== void 0 ? el : this.menuElement), onClick: e => e.stopPropagation(), resetHighlightOnOptionsChange: false, options: options })));
+      h("smoothly-menu-options", { style: { width: "100%" }, optionStyle: Object.assign({}, this.optionStyle), order: false, emptyMenuLabel: this.emptyMenuLabel, newOptionLabel: this.newOptionLabel, "max-menu-height": this.maxMenuHeight, mutable: this.mutable, ref: (el) => (this.menuElement = el !== null && el !== void 0 ? el : this.menuElement), onClick: e => e.stopPropagation(), resetHighlightOnOptionsChange: false, options: options })));
   }
   static get is() { return "smoothly-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -221,6 +251,24 @@ export class SmoothlyPicker {
       "reflect": true,
       "defaultValue": "false"
     },
+    "mutable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "mutable",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "optionStyle": {
       "type": "any",
       "mutable": false,
@@ -332,6 +380,24 @@ export class SmoothlyPicker {
       "reflect": false,
       "defaultValue": "\"Select None\""
     },
+    "selectAllName": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "select-all-name",
+      "reflect": false,
+      "defaultValue": "\"Select All\""
+    },
     "selectionName": {
       "type": "string",
       "mutable": true,
@@ -349,10 +415,50 @@ export class SmoothlyPicker {
       "attribute": "selection-name",
       "reflect": false,
       "defaultValue": "\"items selected\""
+    },
+    "newOptionLabel": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "new-option-label",
+      "reflect": false,
+      "defaultValue": "\"Add:\""
+    },
+    "valueValidator": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(value: any) => [boolean, Notice | undefined]",
+        "resolved": "(value: any) => [boolean, Notice | undefined]",
+        "references": {
+          "Notice": {
+            "location": "import",
+            "path": "../../model"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "_ => [true, undefined]"
     }
   }; }
   static get states() { return {
-    "isOpen": {}
+    "isOpen": {},
+    "empty": {}
   }; }
   static get events() { return [{
       "method": "menuClose",
@@ -374,18 +480,50 @@ export class SmoothlyPicker {
           }
         }
       }
+    }, {
+      "method": "notice",
+      "name": "notice",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "Notice",
+        "resolved": "Notice",
+        "references": {
+          "Notice": {
+            "location": "import",
+            "path": "../../model"
+          }
+        }
+      }
     }]; }
   static get elementRef() { return "element"; }
   static get watchers() { return [{
       "propName": "selections",
-      "methodName": "isOpenChangeHander"
+      "methodName": "isOpenChangeHandler"
     }, {
       "propName": "isOpen",
-      "methodName": "isOpenChangeHander"
+      "methodName": "isOpenChangeHandler"
     }]; }
   static get listeners() { return [{
       "name": "optionSelect",
-      "method": "optionSelectHander",
+      "method": "optionSelectHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "optionAdd",
+      "method": "optionAddHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "menuEmpty",
+      "method": "emptyHandler",
       "target": undefined,
       "capture": false,
       "passive": false

package/dist/collection/components/select-demo/index.js

@@ -1,4 +1,5 @@
 import { Component, h, Listen } from "@stencil/core";
+import { Notice } from "../../model";
 export class SmoothlySelectDemo {
   constructor() {
     this.currencies = ["SEK", "EUR"];
@@ -63,7 +64,7 @@ export class SmoothlySelectDemo {
           { name: "Scary Kraken", value: "kraken" },
         ] }),
       h("br", null),
-      h("smoothly-picker", { label: "", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, options: [
+      h("smoothly-picker", { label: "Multiple", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, options: [
           { name: "Big Dog", value: "dog", aliases: ["WOFF"] },
           { name: "Cat Stevens", value: "cat", aliases: ["moew"] },
           { name: "Noble Pig", value: "pig" },
@@ -77,6 +78,13 @@ export class SmoothlySelectDemo {
           { name: "Scary Kraken", value: "kraken" },
         ] }),
       h("br", null),
+      h("smoothly-picker", { label: "Multiple mutable", "max-height": "58px", multiple: true, mutable: true, newOptionLabel: "Invite:", options: [
+          { name: "john@example.com", value: "john@example.com" },
+          { name: "jane@example.com", value: "jane@example.com" },
+          { name: "james@example.com", value: "james@example.com" },
+          { name: "jessie@example.com", value: "jessie@example.com" },
+        ], valueValidator: (email) => email.match(/^\w+@\w+/) ? [true, undefined] : [false, Notice.failed("Incorrectly formatted email")] }),
+      h("br", null),
       h("smoothly-picker", { label: "Single select", multiple: false, "max-menu-height": "200px", options: [
           { name: "Dog", value: "dog", aliases: ["WOFF"], right: "Woof 🐶" },
           { name: "Cat", value: "cat", aliases: ["moew"] },

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

@@ -1,18 +1,14 @@
-:host:not([open]) > label {
-	background-color: rgb(var(--smoothly-dark-shade));
+:host([open]) {
+	border-bottom: 3px solid rgb(var(--smoothly-primary-color));
+	box-sizing: border-box;
+	margin-bottom: -3px;
 }
 .hide {
 	display: none;
 }
 label {
 	display: block;
-	padding: 1em;
-	background-color: rgb(var(--smoothly-default-shade));
-	border-top-left-radius: 0.3rem;
-	border-top-right-radius: 0.3rem;
-	width: 6.25rem;
-}
-div {
-	background-color: rgb(var(--smoothly-default-shade));
-	padding: 1em;
+	padding: .5rem;
+	background-color: transparent;
+	width: auto;
 }

package/dist/collection/components/tab-switch/style.css

@@ -1,5 +1,6 @@
 :host {
 	display: flex;
 	flex-direction: row;
-	margin: 1em 1em 0em 0em;
+	justify-content: space-around;
+	border-bottom: 3px solid rgb(var(--smoothly-default-shade));
 }

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

@@ -1,6 +1,6 @@
 :host {
 	display: table-cell;
-	vertical-align: middle;
 	line-height: 1.5rem;
-	padding: 0.2rem 0 0.2rem 1rem;
+	white-space: nowrap;
+	padding: 0.3rem 0 0.3rem 1rem;
 }

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

@@ -7,8 +7,7 @@ export class TableDemo {
           h("smoothly-table-header", null, "Header A"),
           h("smoothly-table-header", null, "Header B"),
           h("smoothly-table-header", null, "Header C"),
-          h("smoothly-table-header", null, "Header D"),
-          h("smoothly-table-header", null)),
+          h("smoothly-table-header", null, "Header D")),
         h("smoothly-table-row", null,
           h("smoothly-table-expandable-cell", null,
             "normal row (exp.cell)",
@@ -39,19 +38,22 @@ export class TableDemo {
           h("div", { slot: "detail" }, "expandable row content"))),
       h("smoothly-table", null,
         h("smoothly-table-row", null,
-          h("smoothly-table-header", null, "Header A"),
-          h("smoothly-table-header", null)),
+          h("smoothly-table-header", null, "Header A")),
         h("smoothly-table-expandable-row", null,
-          "A Content",
+          h("smoothly-table-cell", null, "A Content"),
           h("div", { slot: "detail" },
             h("smoothly-tab-switch", null,
-              h("smoothly-tab", { label: "1", open: true },
+              h("smoothly-tab", { label: "innertable 1", open: true },
+                h("smoothly-table", null,
+                  h("smoothly-table-row", null,
+                    h("smoothly-table-header", null, "Header B")),
+                  h("smoothly-table-expandable-row", null, "B Content"))),
+              h("smoothly-tab", { label: "innertable 2" },
                 h("smoothly-table", null,
                   h("smoothly-table-row", null,
-                    h("smoothly-table-header", null, "Header B"),
-                    h("smoothly-table-header", null)),
+                    h("smoothly-table-header", null, "Header C")),
                   h("smoothly-table-expandable-row", null,
-                    h("smoothly-table-cell", null, "B Content")))))))),
+                    h("smoothly-table-cell", null, "C Content")))))))),
     ];
   }
   static get is() { return "smoothly-table-demo"; }

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

@@ -24,8 +24,9 @@ export class TableExpandableCell {
   }
   render() {
     return (h(Host, { style: { textAlign: this.align } },
-      h("slot", null),
-      h("smoothly-icon", { name: "chevron-forward", size: "tiny" }),
+      h("aside", null,
+        h("smoothly-icon", { name: "chevron-forward", size: "tiny" }),
+        h("slot", null)),
       h("tr", { ref: e => (this.expansionElement = e) },
         h("td", { colSpan: 999, class: !this.open ? "hide" : "" },
           h("div", { class: "slot-detail" },

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

@@ -1,44 +1,40 @@
 :host {
 	display: table-cell;
-	vertical-align: middle;
-	line-height: 1.5em;
+	padding: 0.3rem 0 0.3rem 0;
 	cursor: pointer;
-	padding: 0.2em 0 0.2em;
-	border-style: solid solid none solid;
-	border-width: 2px;
-	border-color: rgb(var(--smoothly-default-color));
-}
-.hide {
-	display: none;
+	line-height: 1.5rem;
 }
 :host[open] {
 	position: relative;
 	z-index: 3;
 	background-color: rgb(var(--smoothly-default-color));
-	border-style: solid solid none solid;
-	border-width: 2px;
-	border-color: rgb(var(--smoothly-dark-color));
+	border: 2px solid rgb(var(--smoothly-dark-color));
+	border-bottom: none;
+}
+:host smoothly-icon {
+	width: 0.6rem;
+	float: left;
+	padding: 0 0.3rem;
+	transition: transform 0.2s;
+}
+:host[open] smoothly-icon {
+	transform: rotate(90deg);
+}
+aside {
+	display: flex;
 }
+.hide {
+	display: none;
+}
+
 .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));
+	border-left: 2px solid rgb(var(--smoothly-tertiary-color));
 	box-shadow: 0px 0px 5px 4px 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);
-}
+

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

@@ -19,7 +19,7 @@ export class TableExpandableRow {
   render() {
     return (h(Host, { style: { textAlign: this.align } },
       h("slot", null),
-      h("smoothly-table-cell", null,
+      h("aside", null,
         h("smoothly-icon", { name: "chevron-forward", size: "tiny" })),
       h("tr", { ref: e => (this.expansionElement = e) },
         h("td", { colSpan: 999, class: !this.open ? "hide" : "" },

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

@@ -1,43 +1,44 @@
 :host {
-	display: table-row;
-	border: 1px solid rgb(var(--smoothly-default-color));
+	display: table-row-group;
 	cursor: pointer;
-	box-sizing: border-box;
+	line-height: 1.5rem;
 }
-.hide {
-	display: none;
-}
-.slot-detail {
+:host[open] {
 	position: relative;
+	z-index: 3;
 	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%;
+	border: 2px solid rgb(var(--smoothly-dark-color));
+	border-bottom: none;
 }
 :host smoothly-icon {
 	width: 0.6rem;
 	height: 1rem;
-	float: left;
-	padding-left: 0.2rem;
-	padding-right: 0.2rem;
-	padding-bottom: 0.5rem;
+	position: absolute;
+	right: 1rem;
+	top: -1.8rem;
 	transition: transform 0.2s;
 }
 :host[open] smoothly-icon {
 	transform: rotate(90deg);
 }
-:host[open] smoothly-table-cell {
-	padding-bottom: 0.5rem;
+
+aside {
+	display: table-row;
+	position: relative;
 }
-:host[open] {
+
+.hide {
+	display: none;
+}
+.slot-detail {
 	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));
+	width: 104%;
+	left: -2%;
+	border-left-style: solid;
+	border-left-color: rgb(var(--smoothly-tertiary-color));
+	box-shadow: 0px 0px 4px 2px rgb(var(--smoothly-dark-color));
+	box-sizing: border-box;
+	padding: 0.5rem 2%;
 }
+

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

@@ -5,5 +5,4 @@
 	border-bottom: 1px solid rgb(var(--smoothly-dark-color));
 	padding-left: 1rem;
 	font-weight: bold;
-	margin-bottom: 5rem;
 }

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

@@ -1,7 +1,7 @@
 :host {
 	display: table-row;
-	border: 1px solid rgb(var(--smoothly-dark-color), 0.5);
 	cursor: default;
+	line-height: 1.5rem;
 }
 .hide {
 	display: none;

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

@@ -1,14 +1,9 @@
 :host {
 	display: table;
-	text-align: left;
+	border-collapse: collapse;
 	border: 1px solid rgb(var(--smoothly-dark-color));
-	width: 80%;
+	width: var(--table-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;
+	margin: auto;
 }