smoothly 1.0.0-alpha.99 → 1.0.0

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

@@ -0,0 +1,229 @@
+import { h } from "@stencil/core";
+import { selectively } from "selectively";
+import { isly } from "isly";
+export class SmoothlyFilterPicker {
+  constructor() {
+    this.updating = false;
+    this.options = new Map();
+    this.label = undefined;
+    this.property = undefined;
+    this.multiple = false;
+    this.type = "string";
+  }
+  componentDidLoad() {
+    this.smoothlyFilterUpdate.emit(this.update.bind(this));
+  }
+  optionChangeHandler(event) {
+    event.stopPropagation();
+    this.options.set(event.detail.value, {
+      state: this.property.split(".").reduceRight((r, e) => ({ [e]: r }), event.detail.value),
+      selected: event.detail.set.selected,
+    });
+  }
+  update(expression) {
+    this.updating = true;
+    if (expression instanceof selectively.And && expression.rules.length > 0)
+      for (const option of this.options.values()) {
+        option.selected(expression.rules.some(r => this.isCriteria(r, this.property, option.state) &&
+          (this.type == "array" ? this.findInstanceOf(r, this.property) : r.is(option.state))));
+      }
+    else
+      this.options.forEach(o => o.selected(false));
+    this.updating = false;
+  }
+  isCriteria(criteria, key, value) {
+    const [property, ...rest] = key.split(".");
+    return criteria instanceof selectively.Property && criteria.name == property
+      ? this.isCriteria(criteria.criteria, rest.join("."), value[property])
+      : this.multiple
+        ? (criteria instanceof selectively.Within && criteria.value.some(e => e == value)) ||
+          (this.type == "array" && criteria instanceof selectively.Contains && criteria.criteria.some(e => e == value))
+        : criteria instanceof selectively.Is && criteria.value == value;
+  }
+  pickerHandler(event) {
+    event.stopPropagation();
+    if (!this.updating) {
+      const argument = event.detail[this.property];
+      const manipulate = (criteria) => {
+        let result = criteria;
+        const newCriteria = this.getCriteria(argument);
+        if (!(result instanceof selectively.Rule))
+          result = newCriteria ? selectively.and(result, newCriteria) : result;
+        else if (result instanceof selectively.And) {
+          const index = result.rules.findIndex(r => this.findInstanceOf(r, this.property));
+          !newCriteria && index >= 0
+            ? result.rules.splice(index, 1)
+            : !newCriteria
+              ? undefined
+              : index == -1
+                ? result.rules.push(newCriteria)
+                : (result.rules[index] = newCriteria);
+          result = selectively.and(...result.rules);
+        }
+        return result;
+      };
+      this.smoothlyFilterManipulate.emit(manipulate.bind(this));
+    }
+  }
+  findInstanceOf(criteria, key) {
+    const [property, ...rest] = key.split(".");
+    return (criteria instanceof selectively.Property &&
+      criteria.name == property &&
+      (criteria.criteria instanceof selectively.Within ||
+        criteria.criteria instanceof selectively.Is ||
+        criteria.criteria instanceof selectively.Contains ||
+        (criteria.criteria instanceof selectively.Property && this.findInstanceOf(criteria.criteria, rest.join(".")))));
+  }
+  getCriteria(detail) {
+    let result;
+    if (this.multiple && isly.string().array({ criteria: "minLength", value: 1 }).is(detail))
+      result = this.type == "array" ? selectively.contains(detail) : selectively.within(detail);
+    else if (typeof detail == "string")
+      result = selectively.is(detail);
+    else
+      result = undefined;
+    return result && this.property.split(".").reduceRight((r, e) => selectively.property(e, r), result);
+  }
+  render() {
+    return (h("smoothly-picker", { name: this.property, looks: "border", multiple: this.multiple, onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyChange: e => e.stopPropagation(), onSmoothlyPickerLoaded: e => e.stopPropagation(), onSmoothlyInput: e => this.pickerHandler(e) }, this.label && (h("span", { slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), h("span", { slot: "search" }, "Search"), h("slot", null)));
+  }
+  static get is() { return "smoothly-filter-picker"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "property": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "property",
+        "reflect": false
+      },
+      "multiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "multiple",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"array\" | \"string\"",
+          "resolved": "\"array\" | \"string\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"string\""
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "smoothlyFilterUpdate",
+        "name": "smoothlyFilterUpdate",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Filter.Update",
+          "resolved": "(expression: Criteria) => void",
+          "references": {
+            "Filter": {
+              "location": "import",
+              "path": "../Filter"
+            }
+          }
+        }
+      }, {
+        "method": "smoothlyFilterManipulate",
+        "name": "smoothlyFilterManipulate",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Filter.Manipulate",
+          "resolved": "(criteria: Criteria) => Criteria",
+          "references": {
+            "Filter": {
+              "location": "import",
+              "path": "../Filter"
+            }
+          }
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "smoothlyPickerOptionChange",
+        "method": "optionChangeHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/filter/picker/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Listen, Prop } from \"@stencil/core\"\nimport { selectively } from \"selectively\"\nimport { isly } from \"isly\"\nimport { Option } from \"../../../model\"\nimport { Filter } from \"../Filter\"\n\n@Component({\n\ttag: \"smoothly-filter-picker\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyFilterPicker implements Filter {\n\tupdating = false\n\toptions: Map<string, { state: Record<string, any>; selected: (selected: boolean) => void }> = new Map<\n\t\tstring,\n\t\t{ state: Record<string, any>; selected: (selected: boolean) => void }\n\t>()\n\t@Prop() label: string\n\t@Prop() property: string\n\t@Prop() multiple = false\n\t@Prop() type: \"array\" | \"string\" = \"string\"\n\t@Event() smoothlyFilterUpdate: EventEmitter<Filter.Update>\n\t@Event() smoothlyFilterManipulate: EventEmitter<Filter.Manipulate>\n\tcomponentDidLoad() {\n\t\tthis.smoothlyFilterUpdate.emit(this.update.bind(this))\n\t}\n\t@Listen(\"smoothlyPickerOptionChange\")\n\toptionChangeHandler(event: CustomEvent<Option>) {\n\t\tevent.stopPropagation()\n\t\tthis.options.set(event.detail.value, {\n\t\t\tstate: this.property.split(\".\").reduceRight((r, e) => ({ [e]: r }), event.detail.value),\n\t\t\tselected: event.detail.set.selected,\n\t\t})\n\t}\n\tupdate(expression: selectively.Criteria): void {\n\t\tthis.updating = true\n\t\tif (expression instanceof selectively.And && expression.rules.length > 0)\n\t\t\tfor (const option of this.options.values()) {\n\t\t\t\toption.selected(\n\t\t\t\t\texpression.rules.some(\n\t\t\t\t\t\tr =>\n\t\t\t\t\t\t\tthis.isCriteria(r, this.property, option.state) &&\n\t\t\t\t\t\t\t(this.type == \"array\" ? this.findInstanceOf(r, this.property) : r.is(option.state))\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t}\n\t\telse\n\t\t\tthis.options.forEach(o => o.selected(false))\n\t\tthis.updating = false\n\t}\n\tprivate isCriteria(criteria: selectively.Rule | undefined, key: string, value: Record<string, any> | any): boolean {\n\t\tconst [property, ...rest] = key.split(\".\")\n\t\treturn criteria instanceof selectively.Property && criteria.name == property\n\t\t\t? this.isCriteria(criteria.criteria, rest.join(\".\"), value[property])\n\t\t\t: this.multiple\n\t\t\t? (criteria instanceof selectively.Within && criteria.value.some(e => e == value)) ||\n\t\t\t  (this.type == \"array\" && criteria instanceof selectively.Contains && criteria.criteria.some(e => e == value))\n\t\t\t: criteria instanceof selectively.Is && criteria.value == value\n\t}\n\tpickerHandler(event: CustomEvent<Record<string, unknown>>) {\n\t\tevent.stopPropagation()\n\t\tif (!this.updating) {\n\t\t\tconst argument = event.detail[this.property]\n\t\t\tconst manipulate = (criteria: selectively.Criteria): selectively.Criteria => {\n\t\t\t\tlet result: selectively.Criteria = criteria\n\t\t\t\tconst newCriteria = this.getCriteria(argument)\n\t\t\t\tif (!(result instanceof selectively.Rule))\n\t\t\t\t\tresult = newCriteria ? selectively.and(result, newCriteria) : result\n\t\t\t\telse if (result instanceof selectively.And) {\n\t\t\t\t\tconst index = result.rules.findIndex(r => this.findInstanceOf(r, this.property))\n\t\t\t\t\t!newCriteria && index >= 0\n\t\t\t\t\t\t? result.rules.splice(index, 1)\n\t\t\t\t\t\t: !newCriteria\n\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t: index == -1\n\t\t\t\t\t\t? result.rules.push(newCriteria)\n\t\t\t\t\t\t: (result.rules[index] = newCriteria)\n\t\t\t\t\tresult = selectively.and(...result.rules)\n\t\t\t\t}\n\t\t\t\treturn result\n\t\t\t}\n\t\t\tthis.smoothlyFilterManipulate.emit(manipulate.bind(this))\n\t\t}\n\t}\n\tfindInstanceOf(criteria: selectively.Criteria, key: string): boolean {\n\t\tconst [property, ...rest] = key.split(\".\")\n\t\treturn (\n\t\t\tcriteria instanceof selectively.Property &&\n\t\t\tcriteria.name == property &&\n\t\t\t(criteria.criteria instanceof selectively.Within ||\n\t\t\t\tcriteria.criteria instanceof selectively.Is ||\n\t\t\t\tcriteria.criteria instanceof selectively.Contains ||\n\t\t\t\t(criteria.criteria instanceof selectively.Property && this.findInstanceOf(criteria.criteria, rest.join(\".\"))))\n\t\t)\n\t}\n\tprivate getCriteria(detail: unknown): selectively.Rule | undefined {\n\t\tlet result: selectively.Criteria | undefined\n\t\tif (this.multiple && isly.string().array({ criteria: \"minLength\", value: 1 }).is(detail))\n\t\t\tresult = this.type == \"array\" ? selectively.contains(detail) : selectively.within(detail)\n\t\telse if (typeof detail == \"string\")\n\t\t\tresult = selectively.is(detail)\n\t\telse\n\t\t\tresult = undefined\n\t\treturn result && this.property.split(\".\").reduceRight((r, e) => selectively.property(e, r), result)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<smoothly-picker\n\t\t\t\tname={this.property}\n\t\t\t\tlooks=\"border\"\n\t\t\t\tmultiple={this.multiple}\n\t\t\t\tonSmoothlyInputLooks={e => e.stopPropagation()}\n\t\t\t\tonSmoothlyChange={e => e.stopPropagation()}\n\t\t\t\tonSmoothlyPickerLoaded={e => e.stopPropagation()}\n\t\t\t\tonSmoothlyInput={e => this.pickerHandler(e)}>\n\t\t\t\t{this.label && (\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t{[this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(\"\")}\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t\t<span slot=\"search\">Search</span>\n\t\t\t\t<slot />\n\t\t\t</smoothly-picker>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/filter/picker/style.css

@@ -0,0 +1,8 @@
+:host {
+	display: contents;
+}
+
+:host>smoothly-picker {
+	flex-grow: 1;
+	width: 12.5em;
+}

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

@@ -1,103 +1,88 @@
-* {
-  box-sizing: border-box;
-}
-
 :host {
-  display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
 	position: relative;
-	width: 100%;
-	margin-bottom: 1em; 
+	border: 1px solid rgb(var(--smoothly-medium-tint));
+	margin-left: 1rem;
+	margin-right: 1rem;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
 }
 
-:host > smoothly-input {
-	margin-bottom: 0.5em;
+:host>div::slotted([slot=detail]) {
+	z-index: 5;
 }
 
-section {
-	display: flex;
-	justify-content: center;
-	align-items: center;
+:host::slotted([slot=bar]) {
+	pointer-events: auto;
+	margin-left: 0.3em;
+	margin-right: 0.3em;
 }
 
-.hidden {
-	display: flex;
-	width: 0px;
-	opacity: 0;
+:host>div:empty+smoothly-icon {
+	display: none;
 }
 
-.container {
-	width: inherit;
-	position: relative;
-	z-index: 3;
-	margin: 0.8em 0;
-	opacity: 1;
-	transition: opacity 100ms ease-in-out;
+:host>smoothly-icon {
+	cursor: pointer;
+	margin-left: 0.3em;
+	margin-right: 0.3em;
+	flex-shrink: 0;
 }
 
-.container:after {
-	content:"";
-	height: 100%;
-	width: 100%;
-	border: 1px solid rgb(var(--smoothly-color-contrast));
-	border-radius: 0.25em;
-	position: absolute;
+.close {
+	position: fixed;
+	z-index: 3;
 	top: 0;
 	left: 0;
+	width: 100dvw;
+	height: 100dvh;
+	background: transparent;
+}
+
+.hidden {
+	display: none;
+}
+
+:host>.container {
+	padding: 2em;
+	position: absolute;
+	right: 0.35em;
+	width: fit-content;
+	display: flex;
+	justify-content: center;
+	top: 100%;
+	width: fit-content;
+	z-index: 4;
+	background-color: rgb(var(--smoothly-color));
+	margin: 0.8em -2em;
 }
 
 /* arrow */
 .container:before {
-	content:"";
+	content: "";
 	width: 0.6em;
 	height: 0.6em;
 	transform: rotate(45deg);
-	border-top: 1px solid rgb(var(--smoothly-color-contrast));
-	border-left: 1px solid rgb(var(--smoothly-color-contrast));
-	background-color: rgb(var(--smoothly-default-color));
+	border-top: 1px solid rgb(var(--smoothly-medium-tint));
+	border-left: 1px solid rgb(var(--smoothly-medium-tint));
+	background-color: rgb(var(--smoothly-color));
 	position: absolute;
 	z-index: 3;
 }
 
 /* arrow placement */
 .container.arrow-top:before {
-	left: calc(84.5%);
+	left: calc(91%);
 	top: -5px;
 }
 
-/* wrapper for slot(filters) */
-.container-wrapper {
+.container:after {
+	content: "";
+	height: 100%;
 	width: 100%;
-	padding: 1em;
-	position: relative;
-}
-
-.btn.hidden {
-	margin-right: 0.25em;
-	opacity: 0;
-	cursor:text
-}
-
-.btn.clear {
-	margin-right: 0.25em;
-	opacity: 0.3;
-}
-
-::slotted(div[slot=filter]) {
-	display: grid;
-	grid-template-columns: 1fr;
-	justify-content: center;
-	align-items: center;
-	gap: 0.5em;
-}
-
-:host > smoothly-fom > smoothly-input > section[slot=end] > smoothly-button {
-	font-size: 100%;
-	min-width: min-content;
-	padding: 0;
-	margin: 0;
-	border: none !important;
+	border: 1px solid rgb(var(--smoothly-medium-tint));
+	border-radius: 0.25em;
+	position: absolute;
+	top: 0;
+	left: 0;
 }
-