smoothly 1.0.0-alpha.13 → 1.0.0-alpha.131

package/dist/collection/components/input/clear/style.css

@@ -0,0 +1,254 @@
+[color=default] {
+	--smoothly-color: var(--smoothly-default-color);
+	--smoothly-color-contrast: var(--smoothly-default-contrast);
+	--smoothly-color-shade: var(--smoothly-default-shade);
+	--smoothly-color-tint: var(--smoothly-default-tint);
+}
+
+[color=primary] {
+	--smoothly-color: var(--smoothly-primary-color);
+	--smoothly-color-contrast: var(--smoothly-primary-contrast);
+	--smoothly-color-shade: var(--smoothly-primary-shade);
+	--smoothly-color-tint: var(--smoothly-primary-tint);
+}
+
+[color=secondary] {
+	--smoothly-color: var(--smoothly-secondary-color);
+	--smoothly-color-contrast: var(--smoothly-secondary-contrast);
+	--smoothly-color-shade: var(--smoothly-secondary-shade);
+	--smoothly-color-tint: var(--smoothly-secondary-tint);
+}
+
+[color=tertiary] {
+	--smoothly-color: var(--smoothly-tertiary-color);
+	--smoothly-color-contrast: var(--smoothly-tertiary-contrast);
+	--smoothly-color-shade: var(--smoothly-tertiary-shade);
+	--smoothly-color-tint: var(--smoothly-tertiary-tint);
+}
+
+[color=success] {
+	--smoothly-color: var(--smoothly-success-color);
+	--smoothly-color-contrast: var(--smoothly-success-color);
+	--smoothly-color-shade: var(--smoothly-success-shade);
+	--smoothly-color-tint: var(--smoothly-success-tint);
+}
+
+[color=warning] {
+	--smoothly-color: var(--smoothly-warning-color);
+	--smoothly-color-contrast: var(--smoothly-warning-contrast);
+	--smoothly-color-shade: var(--smoothly-warning-shade);
+	--smoothly-color-tint: var(--smoothly-warning-tint);
+}
+
+[color=danger] {
+	--smoothly-color: var(--smoothly-danger-color);
+	--smoothly-color-contrast: var(--smoothly-danger-contrast);
+	--smoothly-color-shade: var(--smoothly-danger-shade);
+	--smoothly-color-tint: var(--smoothly-danger-tint);
+}
+
+[color=light] {
+	--smoothly-color: var(--smoothly-light-color);
+	--smoothly-color-contrast: var(--smoothly-light-contrast);
+	--smoothly-color-shade: var(--smoothly-light-shade);
+	--smoothly-color-tint: var(--smoothly-light-tint);
+}
+
+[color=medium] {
+	--smoothly-color: var(--smoothly-medium-color);
+	--smoothly-color-contrast: var(--smoothly-medium-contrast);
+	--smoothly-color-shade: var(--smoothly-medium-shade);
+	--smoothly-color-tint: var(--smoothly-medium-tint);
+}
+
+[color=dark] {
+	--smoothly-color: var(--smoothly-dark-color);
+	--smoothly-color-contrast: var(--smoothly-dark-contrast);
+	--smoothly-color-shade: var(--smoothly-dark-shade);
+	--smoothly-color-tint: var(--smoothly-dark-tint);
+}
+
+
+:host{
+	display: inline-block;
+	margin: 1em;
+	box-sizing: border-box;
+	border-radius: 0.5rem;
+	border: solid 1px;
+	transition: background 150ms ease-in-out;
+	cursor: pointer;
+}
+:host([type=link]){
+	display: inline;
+	border: none;
+}
+:host([disabled]){
+	opacity: 0.5;
+	pointer-events: none;
+}
+a,
+button{
+	font-size: 110%;
+	font-weight: 400;
+	border: none;
+	background-color: transparent;
+	cursor: pointer;
+	display: inline-flex;
+	gap: 0.5rem;
+}
+button {
+	justify-content: center;
+	height: 100%;
+	width: 100%;
+	border-radius: 0.5rem;
+	min-width: 8em;
+	align-items: center;
+}
+:host(:not([size=icon])) > button {
+	padding: 0.8em;
+}
+:host([size=icon]) > button{
+	padding: 0.5em;
+}
+:host([shape=rounded]) > button,
+:host([shape=rounded]){
+	border-radius: 2rem;
+}
+:host([type=button]) > a {
+	text-align: center;
+	text-decoration: inherit;
+	width: calc(100% - 0.6em);
+}
+:host([size=small]) > button{
+	font-size: 100%;
+}
+:host([size=large]) > button{
+	font-size: 130%;
+}
+:host(:not([size=icon])){
+	min-width: 8em;
+}
+:host([size=flexible]) {
+	min-width: unset;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border: none;
+}
+:host([size=flexible]) > button {
+	min-width: unset;
+	padding: 0;
+	margin: 0 !important;
+}
+:host([expand]) {
+	width: 100%;
+}
+:host([expand=full]) {
+	border-left: none;
+	border-right: none;
+	border-radius: 0;
+}
+:host([shape=rounded]) > button,
+:host([shape=rounded]){
+	border-radius: 2rem;
+}
+:host(:not([fill=clear]):hover),
+:host(:not([fill=clear]):focus),	
+:host(:not([fill=clear]):active){
+	border-color: rgb(var(--smoothly-color-tint)) !important;
+	background: rgb(var(--smoothly-color-tint)) !important;
+}
+:host(:not([fill=clear]):hover) > button,
+:host(:not([fill=clear]):focus) > button,
+:host(:not([fill=clear]):active) > button,
+:host(:not([fill=clear]):hover) ::slotted(smoothly-icon),
+:host(:not([fill=clear]):focus) ::slotted(smoothly-icon),
+:host(:not([fill=clear]):active) ::slotted(smoothly-icon){
+	color: rgb(var(--smoothly-color-contrast)) !important;
+	stroke: rgb(var(--smoothly-color-contrast)) !important;
+	fill: rgb(var(--smoothly-color-contrast)) !important;
+}
+:host([fill=clear]:hover) > button,
+:host([fill=clear]:focus) > button,
+:host([fill=clear]:active) > button{
+	color: rgb(var(--smoothly-color-tint)) !important;
+	stroke: rgb(var(--smoothly-color-tint)) !important;
+	fill: rgb(var(--smoothly-color-tint)) !important;
+}
+:host([disabled]){
+	opacity: 0.5;
+	pointer-events: none;
+}
+:host(:not([fill])),
+:host([fill=default]) {
+	background: rgb(var(--smoothly-color));
+	border-color: transparent;
+}
+:host([fill=solid]) {
+	background: rgb(var(--smoothly-color));
+	border-color: rgb(var(--smoothly-color));
+}
+:host([fill=solid]) > button,
+:host([fill=default]) > button{
+	stroke: rgb(var(--smoothly-color-contrast));
+	fill: rgb(var(--smoothly-color-contrast));
+	color: rgb(var(--smoothly-color-contrast));
+}
+:host([fill=outline]) > button,
+:host([fill=clear]) > button{
+	stroke: rgb(var(--smoothly-color));
+	fill: rgb(var(--smoothly-color));
+	color: rgb(var(--smoothly-color));
+}
+:host([fill=outline]) {
+	background: transparent;
+	border-color: rgb(var(--smoothly-color));
+}
+:host([fill=clear]) {
+	background: transparent;
+	border-color: transparent;
+}
+::slotted(smoothly-icon[slot=start]),
+::slotted(smoothly-icon[slot=end]){
+	font-size: 0.65em;
+}
+:host([hidden]){
+	display: none;
+}
+
+
+:host(:not([display])) {
+	display: none;
+}
+
+:host() {
+	transition: 0.6s;
+	margin: 0rem;
+	min-width: 0rem;
+}
+
+:host([type="input"]) {
+	line-height: 1;
+}
+
+:host([type="form"]) {
+	margin: 1em 0em;
+}
+
+:host([type="input"]) ::slotted(smoothly-icon) {
+	filter: opacity(60%);
+	font-size: 70%;
+}
+
+:host([type="input"]):hover ::slotted(smoothly-icon) {
+	cursor: pointer;
+	filter: opacity(100%);
+}
+
+:host([type="input"]) button {
+ 	padding: 0rem;
+ 	margin: 0rem;
+ 	min-width: 0rem; 
+}

package/dist/collection/components/{input-date → input/date}/index.js

@@ -2,24 +2,42 @@ import { h } from "@stencil/core";
 import { Date } from "isoly";
 export class InputDate {
   constructor() {
+    this.color = undefined;
+    this.looks = "plain";
     this.name = undefined;
     this.value = undefined;
     this.open = undefined;
     this.max = undefined;
     this.min = undefined;
+    this.showLabel = true;
     this.disabled = undefined;
   }
+  componentWillLoad() {
+    this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)));
+  }
+  async clear() {
+    this.value = undefined;
+  }
   onStart(next) {
     this.valueChanged.emit(next);
+    this.smoothlyInput.emit({ [this.name]: next });
   }
-  dateSetHandler(e) {
+  smoothlyInputHandler(event) {
+    if (event.target != this.element)
+      event.stopPropagation();
+  }
+  smoothlyInputLooksHandler(event) {
+    if (event.target != this.element)
+      event.stopPropagation();
+  }
+  dateSetHandler(event) {
     this.open = false;
-    e.stopPropagation();
+    event.stopPropagation();
   }
   render() {
     var _a;
     return [
-      h("smoothly-input", { name: this.name, onFocus: () => (this.open = !this.open), onClick: () => (this.open = !this.open), disabled: this.disabled, type: "date", value: this.value, onSmoothlyInput: e => (this.value = e.detail.value) }, h("slot", null)),
+      h("smoothly-input", { color: this.color, name: this.name, onFocus: () => (this.open = !this.open), onClick: () => (this.open = !this.open), disabled: this.disabled, type: "date", value: this.value, looks: "plain", showLabel: this.showLabel, onSmoothlyInput: e => (this.value = e.detail[this.name]) }, h("slot", null)),
       this.open && !this.disabled
         ? [
           h("div", { onClick: () => (this.open = false) }),
@@ -45,6 +63,51 @@ export class InputDate {
   }
   static get properties() {
     return {
+      "color": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Color",
+          "resolved": "\"danger\" | \"dark\" | \"default\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | undefined",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": true
+      },
+      "looks": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Looks",
+          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\"",
+          "references": {
+            "Looks": {
+              "location": "import",
+              "path": "../Looks"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "looks",
+        "reflect": true,
+        "defaultValue": "\"plain\""
+      },
       "name": {
         "type": "string",
         "mutable": false,
@@ -145,6 +208,24 @@ export class InputDate {
         "attribute": "min",
         "reflect": false
       },
+      "showLabel": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-label",
+        "reflect": true,
+        "defaultValue": "true"
+      },
       "disabled": {
         "type": "boolean",
         "mutable": true,
@@ -185,8 +266,72 @@ export class InputDate {
             }
           }
         }
+      }, {
+        "method": "smoothlyInput",
+        "name": "smoothlyInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Record<string, any>",
+          "resolved": "{ [x: string]: any; }",
+          "references": {
+            "Record": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "smoothlyInputLooks",
+        "name": "smoothlyInputLooks",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "(looks: Looks, color: Color) => void",
+          "resolved": "(looks: Looks, color: Color) => void",
+          "references": {
+            "Looks": {
+              "location": "import",
+              "path": "../Looks"
+            },
+            "Color": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        }
       }];
   }
+  static get methods() {
+    return {
+      "clear": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
   static get watchers() {
     return [{
         "propName": "value",
@@ -195,6 +340,18 @@ export class InputDate {
   }
   static get listeners() {
     return [{
+        "name": "smoothlyInput",
+        "method": "smoothlyInputHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "smoothlyInputLooks",
+        "method": "smoothlyInputLooksHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
         "name": "dateSet",
         "method": "dateSetHandler",
         "target": undefined,

package/dist/collection/components/input/date/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/date/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, Watch } from \"@stencil/core\"\nimport { Date } from \"isoly\"\nimport { Color } from \"../../../model\"\nimport { Clearable } from \"../Clearable\"\nimport { Input } from \"../Input\"\nimport { Looks } from \"../Looks\"\n\n@Component({\n\ttag: \"smoothly-input-date\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class InputDate implements Clearable, Input {\n\t@Element() element: HTMLElement\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ mutable: true }) value?: Date\n\t@Prop({ mutable: true }) open: boolean\n\t@Prop({ mutable: true }) max: Date\n\t@Prop({ mutable: true }) min: Date\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop({ mutable: true }) disabled: boolean\n\t@Event() valueChanged: EventEmitter<Date>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>\n\n\tcomponentWillLoad() {\n\t\tthis.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)))\n\t}\n\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.value = undefined\n\t}\n\t@Watch(\"value\")\n\tonStart(next: Date) {\n\t\tthis.valueChanged.emit(next)\n\t\tthis.smoothlyInput.emit({ [this.name]: next })\n\t}\n\t@Listen(\"smoothlyInput\")\n\tsmoothlyInputHandler(event: CustomEvent<Record<string, any>>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"dateSet\")\n\tdateSetHandler(event: CustomEvent<Date>) {\n\t\tthis.open = false\n\t\tevent.stopPropagation()\n\t}\n\trender() {\n\t\treturn [\n\t\t\t<smoothly-input\n\t\t\t\tcolor={this.color}\n\t\t\t\tname={this.name}\n\t\t\t\tonFocus={() => (this.open = !this.open)}\n\t\t\t\tonClick={() => (this.open = !this.open)}\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\ttype=\"date\"\n\t\t\t\tvalue={this.value}\n\t\t\t\tlooks=\"plain\"\n\t\t\t\tshowLabel={this.showLabel}\n\t\t\t\tonSmoothlyInput={e => (this.value = e.detail[this.name])}>\n\t\t\t\t<slot></slot>\n\t\t\t</smoothly-input>,\n\t\t\tthis.open && !this.disabled\n\t\t\t\t? [\n\t\t\t\t\t\t<div onClick={() => (this.open = false)}></div>,\n\t\t\t\t\t\t<nav>\n\t\t\t\t\t\t\t<div class=\"arrow\"></div>\n\t\t\t\t\t\t\t<smoothly-calendar\n\t\t\t\t\t\t\t\tdoubleInput={false}\n\t\t\t\t\t\t\t\tvalue={this.value ?? Date.now()}\n\t\t\t\t\t\t\t\tonValueChanged={event => {\n\t\t\t\t\t\t\t\t\tthis.value = event.detail\n\t\t\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tmax={this.max}\n\t\t\t\t\t\t\t\tmin={this.min}></smoothly-calendar>\n\t\t\t\t\t\t</nav>,\n\t\t\t\t  ]\n\t\t\t\t: [],\n\t\t]\n\t}\n}\n"]}