fix(core): update

2020-05-11 00:36:58 +00:00
parent addec288bd
commit c0900e265b
9 changed files with 495 additions and 19 deletions
--- a/ts_web/elements/wcc-dashboard.ts
+++ b/ts_web/elements/wcc-dashboard.ts
@ -0,0 +1,80 @@
+import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
+
+import { WccDefaultElement } from './wcc-defaultelement';
+
+// wcc tools
+import './wcc-frame';
+import './wcc-sidebar';
+import './wcc-properties';
+
+@customElement('wcc-dashboard')
+export class WccDashboard extends LitElement {
+  @property()
+  public selectedItem: TemplateResult | LitElement = WccDefaultElement as any;
+
+  @property()
+  public selectedInstance;
+
+  @property()
+  public selectedViewport: string = 'desktop';
+
+  @property()
+  public pages: TemplateResult[] = [];
+
+  @property()
+  public elements: LitElement[] = [];
+
+  constructor() {
+    super();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <style>
+        @import url('https://fonts.googleapis.com/css?family=Roboto');
+        :host {
+          font-family: 'Roboto', sans-serif;
+          background: #fcfcfc;
+          display: block;
+          box-sizing: border-box;
+        }
+        :host([hidden]) {
+          display: none;
+        }
+      </style>
+      <wcc-sidebar .pages=${this.pages} .elements=${this.elements} @selectedItem=${eventArg => {
+        this.selectedItem = eventArg.detail;
+      }}></wcc-sidebar>
+      <wcc-properties .selectedItem=${this.selectedItem} .selectedInstance=${this.selectedInstance} @selectedViewport=${eventArg => {this.selectedViewport = eventArg.detail; this.updateSlot();}}></wcc-properties>
+      <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
+        ${(() => {
+          if (this.selectedItem instanceof TemplateResult) {
+            return this.selectedItem;
+          } else if (this.selectedItem) {
+            console.log(this.selectedItem);
+            const anonItem: any = this.selectedItem;
+            if (anonItem.demo) {
+              return html`${anonItem.demo}`;
+            } else {
+              alert(`component does not expose a demo property.`);
+            }
+          } else {
+
+          }
+        })()}
+      </wcc-frame>
+      ${this.selectedViewport}
+    `;
+  }
+
+  public updateSlot() {
+    console.log('updateSlot');
+    const oldSelectedItem = this.selectedItem;
+    this.selectedItem = null;
+    setTimeout(() => {
+      this.selectedItem = oldSelectedItem;
+    }, 0);
+  }
+
+
+}