@xplortech/apollo-core 0.5.3 → 1.0.0-beta.0

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

@@ -0,0 +1,344 @@
+import { v4 as uuid } from 'uuid';
+import { Component, Host, h, Prop, State } from '@stencil/core';
+import throttle from 'lodash.throttle';
+function tagWidth(text) {
+  const context = document.createElement('canvas').getContext('2d');
+  context.font =
+    "14px apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif";
+  return context.measureText(text).width + 44; // = text + l/r padding + margin-right
+}
+export class XplSelect {
+  constructor() {
+    /**
+     * An array of choices for the user to choose from.
+     * Each choice should be of the form:
+     * {
+     *   label: string;
+     *   href?: string;
+     *   value?: string;
+     *   isGroupHeading?: boolean;
+     * }
+     */
+    this.choices = [];
+    /**
+     * Whether to allow a single choice or multiple choices.
+     */
+    this.mode = 'single';
+    /**
+     * Only used in multi-choice selects. If `true`,
+     * badges representing selections that would overflow the
+     * container are replaced with "+x more" (where x is the
+     * number not shown). If `false`, the container's height will
+     * adjust to show all badges representing selections.
+     */
+    this.truncate = true;
+    this.active = false;
+    this.id = uuid();
+    this.keepFocus = false;
+    this.value = '';
+    this.displayValue = '';
+    // infinity isn't real, it's just a mathematical construct, it can't hurt you
+    this.visibleChoices = Infinity;
+  }
+  componentWillLoad() {
+    this.selected =
+      this.choices && this.choices.length > 0
+        ? this.choices.map(() => false)
+        : [];
+    window.addEventListener('click', (e) => {
+      const el = e.target;
+      const select = el.closest('.xpl-select');
+      if (select === null || select !== this.container) {
+        this.active = false;
+      }
+    });
+    window.addEventListener('resize', throttle(() => {
+      this.maybeTruncateChoices();
+    }, 250));
+  }
+  componentDidLoad() {
+    this.dropdown = this.container.querySelector('xpl-dropdown');
+  }
+  maybeTruncateChoices() {
+    if (this.mode === 'single' || !this.truncate)
+      return;
+    const containerWidth = this.container.getBoundingClientRect().width;
+    let visibleChoices = 0;
+    let visibleChoicesWidth = 0;
+    const actualNumSelected = this.selected.filter((a) => a).length;
+    for (let i = 0; i < actualNumSelected; i++) {
+      visibleChoicesWidth += tagWidth(this.getDisplayValue(i));
+      if (visibleChoicesWidth > containerWidth - 140)
+        break;
+      visibleChoices++;
+    }
+    if (visibleChoices >= actualNumSelected)
+      visibleChoices = Infinity;
+    if (visibleChoices < 1)
+      visibleChoices = 1;
+    this.visibleChoices = visibleChoices;
+  }
+  flattenChoices() {
+    return this.choices.reduce((acc, curr) => [
+      ...acc,
+      ...(curr.groupName ? curr.options : [curr]),
+    ], []);
+  }
+  getDisplayValue(i) {
+    return this.flattenChoices()[i].label || this.flattenChoices()[i].value;
+  }
+  getActualValue(i) {
+    return this.flattenChoices()[i].value || this.flattenChoices()[i].label;
+  }
+  update() {
+    this.selected = this.flattenChoices().map(({ isSelected }) => isSelected);
+    if (this.mode === 'single') {
+      const selected = this.selected.findIndex((v) => v);
+      this.value = selected >= 0 ? this.getActualValue(selected) : '';
+      this.displayValue =
+        selected >= 0 ? this.getDisplayValue(selected) : '';
+    }
+    else if (this.mode === 'multi') {
+      this.value = this.selected
+        .map((v, i) => {
+        return v ? this.getActualValue(i) : '';
+      })
+        .filter((v) => v.length > 0)
+        .join('|');
+    }
+  }
+  render() {
+    let visibleChoices = 0;
+    return (h(Host, { class: {
+        'xpl-select': true,
+        'xpl-select--disabled': this.disabled,
+        'xpl-select--no-truncate': !this.truncate,
+      }, onKeyDown: (e) => {
+        if (e.key === 'Escape')
+          this.active = false;
+      }, ref: (el) => (this.container = el) },
+      this.label || this.description ? (h("label", { class: {
+          'xpl-label': true,
+          'xpl-label--disabled': this.disabled,
+        }, htmlFor: this.id },
+        this.label,
+        this.description && (h("small", { class: {
+            'xpl-description': true,
+            'xpl-description--disabled': this.disabled,
+          } }, this.description)))) : null,
+      h("div", { class: {
+          'xpl-input': true,
+          'xpl-input--disabled': this.disabled,
+          'xpl-input--error': this.error !== undefined,
+        } },
+        h("div", { class: "xpl-input-wrapper" },
+          h("div", { class: {
+              'xpl-select-value': true,
+              'xpl-select-value--active': this.mode === 'multi' &&
+                this.value.length > 0,
+              'has-value': this.value.length > 0,
+            } },
+            this.mode === 'single'
+              ? this.displayValue || this.placeholder
+              : this.value.length > 0
+                ? this.selected.map((v, i) => {
+                  if (!v)
+                    return null;
+                  if (visibleChoices >= this.visibleChoices)
+                    return null;
+                  visibleChoices++;
+                  return (h("xpl-tag", { onClose: () => {
+                      this.flattenChoices().forEach((v, j) => {
+                        if (i === j)
+                          v.isSelected =
+                            false;
+                      });
+                      const mapOptions = (option) => {
+                        option.options =
+                          option.groupName
+                            ? option.options.map(mapOptions)
+                            : undefined;
+                        return option;
+                      };
+                      this.choices =
+                        this.choices.map(mapOptions);
+                      this.update();
+                      this.maybeTruncateChoices();
+                    } }, this.getDisplayValue(i)));
+                })
+                : this.placeholder,
+            this.visibleChoices < Infinity &&
+              `+ ${this.selected.filter((a) => a).length -
+                this.visibleChoices} more`),
+          h("button", { disabled: this.disabled, id: this.id, onKeyDown: (e) => {
+              if (e.key === 'Tab')
+                this.keepFocus = true;
+            }, onClick: () => {
+              const { dropdown } = this;
+              if (!this.disabled)
+                dropdown.isOpen = !dropdown.isOpen;
+            } })),
+        !this.disabled && (h("xpl-dropdown", { options: this.choices, mode: this.mode, triggerId: this.id, update: () => {
+            this.update();
+            this.maybeTruncateChoices();
+          } })),
+        this.error !== undefined && this.error.length > 0 && (h("label", { class: "xpl-input-error", htmlFor: this.id },
+          h("svg", { width: "10", height: "11", viewBox: "0 0 10 11", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            h("path", { d: "M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" })),
+          this.error))),
+      h("input", { type: "hidden", value: this.value })));
+  }
+  static get is() { return "xpl-select"; }
+  static get properties() { return {
+    "choices": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "SelectChoice[]",
+        "resolved": "SelectChoice[]",
+        "references": {
+          "SelectChoice": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "An array of choices for the user to choose from.\nEach choice should be of the form:\n{\n  label: string;\n  href?: string;\n  value?: string;\n  isGroupHeading?: boolean;\n}"
+      },
+      "defaultValue": "[]"
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Optional text that appears below the input label."
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "error": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "If an empty string (attribute present with no value),\nwill display visually as an error. If a string is\nincluded, will display visually as an error and include\nthe value as an error message."
+      },
+      "attribute": "error",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "mode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'single' | 'multi'",
+        "resolved": "\"multi\" | \"single\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Whether to allow a single choice or multiple choices."
+      },
+      "attribute": "mode",
+      "reflect": false,
+      "defaultValue": "'single'"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placeholder",
+      "reflect": false
+    },
+    "truncate": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Only used in multi-choice selects. If `true`,\nbadges representing selections that would overflow the\ncontainer are replaced with \"+x more\" (where x is the\nnumber not shown). If `false`, the container's height will\nadjust to show all badges representing selections."
+      },
+      "attribute": "truncate",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+  static get states() { return {
+    "active": {},
+    "id": {},
+    "keepFocus": {},
+    "selected": {},
+    "value": {},
+    "displayValue": {},
+    "visibleChoices": {}
+  }; }
+}

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

@@ -0,0 +1,200 @@
+import { Component, Host, Prop, State, Event, h, } from '@stencil/core';
+export class XplTable {
+  constructor() {
+    this.areAllSelected = false;
+    this.hasScrolled = false;
+    this.selectAll = (e) => {
+      const { target } = e;
+      if (!(target instanceof HTMLInputElement))
+        return;
+      const { checked } = target;
+      this.areAllSelected = checked;
+      this.selected = this.selected.map(() => checked);
+      this.onChange();
+    };
+    this.selectOne = (e, i) => {
+      const { target } = e;
+      if (!(target instanceof HTMLInputElement))
+        return;
+      const { checked } = target;
+      this.areAllSelected = false;
+      this.selected = this.selected.map((v, _i) => (_i === i ? checked : v));
+      this.onChange();
+    };
+    this.onChange = () => {
+      this.tableSelect.emit({
+        selected: this.selected,
+        areAllSelected: this.areAllSelected,
+      });
+    };
+    this.onScroll = () => {
+      this.hasScrolled = this.container.scrollLeft > 0;
+    };
+    /**
+     * TODO: Need to figure out how this interplays with data
+     * received from an API/server
+     */
+    this.sortBy = (col, 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);
+  }
+  render() {
+    let className = 'xpl-table';
+    if (this.striped)
+      className += ' xpl-table--striped';
+    if (this.freeze)
+      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 }))));
+            })));
+          }))))));
+  }
+  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": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "freeze",
+      "reflect": false
+    },
+    "multiselect": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "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": {}
+      }
+    }]; }
+}

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

@@ -0,0 +1,30 @@
+import { Component, Host, h, Event } 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")));
+  }
+  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": {}
+      }
+    }]; }
+}