1.0.24

fix(core): update
1.0.23
2020-05-27 22:13:50 +00:00 · 2020-05-27 22:13:50 +00:00 · 2020-05-24 20:09:38 +00:00 · 2020-05-24 20:09:37 +00:00 · 2020-05-24 19:37:43 +00:00 · 2020-05-24 19:37:43 +00:00
7 changed files with 822 additions and 102 deletions
--- a/html/index.html
+++ b/html/index.html
@ -21,6 +21,6 @@
    <script src="../ts_web/index.ts"></script>
  </head>
  <body>
-    <></>
+    <wcc-dashboard></wcc-dashboard>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,29 +1,31 @@
 {
  "name": "@designestate/dees-wcctools",
-  "version": "1.0.21",
+  "version": "1.0.24",
  "private": false,
  "description": "wcc tools for creating element catalogues",
  "main": "dist_ts_web/index.js",
  "typings": "dist_ts_web/index.d.ts",
  "scripts": {
-    "test": "npm run build",
-    "build": "tsbuild custom ts_web --web",
+    "test": "(npm run build)",
+    "build": "(tsbuild custom ts_web --web && tsbundle element)",
    "watch": "tswatch element"
  },
  "author": "Lossless GmbH",
  "license": "UNLICENSED",
  "dependencies": {
+    "@designestate/dees-domtools": "^1.0.21",
    "@gitzone/tsrun": "^1.1.17",
    "@pushrocks/smartexpress": "^3.0.10",
    "lit-element": "^2.0.0-rc.5",
    "lit-html": "^1.0.0-rc.2",
-    "typescript": "^3.2.2"
+    "typescript": "^3.9.3"
  },
  "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.8",
-    "@gitzone/tswatch": "^1.0.30",
+    "@gitzone/tsbuild": "^2.1.24",
+    "@gitzone/tsbundle": "^1.0.69",
+    "@gitzone/tswatch": "^1.0.46",
    "@pushrocks/projectinfo": "^4.0.2",
-    "tslint": "^5.11.0",
+    "tslint": "^6.1.2",
    "tslint-config-prettier": "^1.17.0"
  },
  "files": [
@ -37,5 +39,8 @@
    "cli.js",
    "npmextra.json",
    "readme.md"
+  ],
+  "browserslist": [
+    "last 2 Chrome versions"
  ]
 }
--- a/ts_web/elements/wcc-dashboard.ts
+++ b/ts_web/elements/wcc-dashboard.ts
@ -1,5 +1,7 @@
 import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';

+import * as deesDomtools from '@designestate/dees-domtools';
+
 import { WccDefaultElement } from './wcc-defaultelement';

 // wcc tools
@ -16,7 +18,7 @@ export class WccDashboard extends LitElement {
  public selectedInstance;

  @property()
-  public selectedViewport: string = 'desktop';
+  public selectedViewport: deesDomtools.breakpoints.TViewport = 'desktop';

  @property()
  public pages: { [key: string]: TemplateResult } = {};
@ -24,6 +26,9 @@ export class WccDashboard extends LitElement {
  @property()
  public elements: { [key: string]: LitElement } = {};

+  @property()
+  public warning: string = null;
+
  constructor(elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: TemplateResult }) {
    super();
    if (elementsArg) {
@ -52,7 +57,7 @@ export class WccDashboard extends LitElement {
      <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-properties .warning="${this.warning}" .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) {
@ -60,13 +65,18 @@ export class WccDashboard extends LitElement {
          } 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.`);
+            if (!anonItem.demo) {
+              this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
+              return;
            }
+            if (!(typeof anonItem.demo === 'function')) {
+              this.setWarning(`component ${anonItem.name} has demo property, but it is not of type function`);
+              return;
+            }
+            this.setWarning(null);
+            return html`${anonItem.demo()}`;
          } else {
-
+            this.selectedItem = WccDefaultElement as any;
          }
        })()}
      </wcc-frame>
@ -74,14 +84,22 @@ export class WccDashboard extends LitElement {
    `;
  }

-  public updateSlot() {
+  public async updateSlot() {
    console.log('updateSlot');
    const oldSelectedItem = this.selectedItem;
    this.selectedItem = null;
-    setTimeout(() => {
-      this.selectedItem = oldSelectedItem;
-    }, 0);
+    const domtools = await deesDomtools.DomTools.setupDomTools();
+    domtools.setVirtualViewport(this.selectedViewport);
+    this.selectedItem = oldSelectedItem;
  }

-
+  public setWarning(warningTextArg: string) {
+    if (this.warning !== warningTextArg) {
+      console.log(warningTextArg);
+      this.warning = warningTextArg;
+      setTimeout(() => {
+        super.performUpdate();
+      }, 0);
+    }
+  }
 }
--- a/ts_web/elements/wcc-defaultelement.ts
+++ b/ts_web/elements/wcc-defaultelement.ts
@ -3,7 +3,7 @@ import { TemplateResult } from 'lit-html';

@customElement('wcc-defaultelement')
 export class WccDefaultElement extends LitElement {
-  public static demo = html`<wcc-defaultelement></wcc-defaultelement>`;
+  public static demo = () => html`<wcc-defaultelement></wcc-defaultelement>`;

  @property()
  public footerText = `Lossless GmbH - 2018`;
--- a/ts_web/elements/wcc-properties.ts
+++ b/ts_web/elements/wcc-properties.ts
@ -19,6 +19,9 @@ export class WccProperties extends LitElement {
  @property()
  public selectedViewport = 'native';

+  @property()
+  public warning: string = null;
+
  public render(): TemplateResult {
    return html`
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
@ -98,6 +101,18 @@ export class WccProperties extends LitElement {
          color: #333;
          background: #fff;
        }
+
+        .warning {
+          position: absolute;
+          background: #800000;
+          top: 0px;
+          bottom: 0px;
+          left: 0px;
+          right: 0px;
+          text-align: center;
+          padding: 20px;
+          font-size: 25px;
+        }
      </style>
      <div class="grid">
        <div class="properties">
@ -167,6 +182,9 @@ ${(() => {
        </div>
        <div class="docs">Docs</div>
      </div>
+      ${this.warning ? html`<div class="warning">
+        ${this.warning}
+      </div>` : null}
    `;
  }

--- a/ts_web/index.ts
+++ b/ts_web/index.ts
@ -1,5 +1,19 @@
 import { WccDashboard } from './elements/wcc-dashboard';
+import { LitElement, TemplateResult } from 'lit-element';
+
+const setupWccTools = (elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: TemplateResult }) => {
+  let hasRun = false;
+  const runWccToolsSetup = async () => {
+    if (document.readyState === 'complete' && !hasRun) {
+      hasRun = true;
+      const wccTools = new WccDashboard(elementsArg as any, pagesArg);
+      document.querySelector('body').append(wccTools);
+    }
+  };
+  document.addEventListener('readystatechange', runWccToolsSetup);
+  runWccToolsSetup();
+};

 export {
-  WccDashboard
+  setupWccTools
 };
Author	SHA1	Message	Date
Phil Kunz	b16c6948b2	1.0.24	2020-05-27 22:13:50 +00:00
Phil Kunz	2a51d7a7cd	fix(core): update	2020-05-27 22:13:50 +00:00
Phil Kunz	b12f35484d	1.0.23	2020-05-24 20:09:38 +00:00
Phil Kunz	7fe861f577	fix(core): update	2020-05-24 20:09:37 +00:00
Phil Kunz	ac999adfcb	1.0.22	2020-05-24 19:37:43 +00:00
Phil Kunz	fdd6e38e0c	fix(core): update	2020-05-24 19:37:43 +00:00