fix(core): update

2020-09-13 16:24:48 +00:00
parent 4ad638dad8
commit 9f8a5fedfa
20 changed files with 3879 additions and 2513 deletions
--- a/ts_web/elements/dees-input-dropdown.ts
+++ b/ts_web/elements/dees-input-dropdown.ts
@ -0,0 +1,116 @@
+import { customElement, LitElement, TemplateResult, property, html } from 'lit-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+@customElement('dees-input-dropdown')
+export class DeesInputDropdown extends LitElement {
+  @property()
+  public label: string = 'Label';
+
+  @property()
+  public key: string;
+
+  @property()
+  public options: {option: string, key: string, payload?: any}[] = [];
+
+  @property()
+  public selectedOption: {option: string, key: string, payload?: any} = {
+    key: null,
+    option: null,
+    payload: null
+  };
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        * {
+          box-sizing: border-box;
+        }
+
+        :host {
+          position: relative;
+          display: block;
+          height: 40px;
+        }
+
+        .maincontainer {
+          display: block;
+        }
+
+        .label {
+          font-size: 14px;
+          margin-bottom: 15px;
+        }
+
+        .selectedBox {
+          cursor: pointer;
+          position: relative;
+          max-width: 420px;
+          height: 40px;
+          border: 1px solid #CCC;
+          padding: 12px;
+          z-index: 0px;
+        }
+
+        .selectionBox {
+          pointer-events: none;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          opacity: 0;
+          position: relative;
+          background: #ffffff;
+          max-width: 420px;
+          box-shadow: 0px 0px 5px  rgba(0,0,0,0.2);
+          height: 40px;
+          margin-top: -40px;
+          z-index: 100;
+        }
+
+        .selectionBox.show {
+          pointer-events: all;
+          opacity: 1;
+          min-height: 160px;
+        }
+
+        .option {
+          padding: 12px;
+        }
+
+        .option:hover {
+          background: #fafafa;
+        }
+      </style>
+      <div class="maincontainer">
+        <div class="selectedBox" @click="${event => {this.toggleSelectionBox();}}">
+          ${this.selectedOption?.option}
+        </div>
+        <div class="selectionBox">
+          ${this.options.map(option => {
+            return html`
+              <div class="option" @click=${() => {this.updateSelection(option);}}>${option.option}</div>
+            `
+          })}
+        </div>
+      </div>
+    `;
+  }
+
+  firstUpdated() {
+    this.selectedOption = this.options[0] || null;
+  }
+
+  public async updateSelection(selectedOption) {
+    this.selectedOption = selectedOption;
+
+    this.dispatchEvent(new CustomEvent('selectedOption', {
+      detail: selectedOption,
+      bubbles: true
+    }));
+    this.toggleSelectionBox();
+  }
+
+  public toggleSelectionBox() {
+    this.shadowRoot.querySelector('.selectionBox').classList.toggle('show');
+  }
+}