fix(core): update
This commit is contained in:
parent
71e885f3e4
commit
a812a12c10
2380
package-lock.json
generated
2380
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
@ -13,19 +13,19 @@
|
|||||||
"author": "Lossless GmbH",
|
"author": "Lossless GmbH",
|
||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@designestate/dees-domtools": "^1.0.81",
|
"@designestate/dees-domtools": "^1.0.87",
|
||||||
"@designestate/dees-element": "^1.0.10",
|
"@designestate/dees-element": "^1.0.19",
|
||||||
"@gitzone/tsrun": "^1.2.12",
|
"@gitzone/tsrun": "^1.2.12",
|
||||||
"@pushrocks/smartdelay": "^2.0.10",
|
"@pushrocks/smartdelay": "^2.0.10",
|
||||||
"@pushrocks/smartexpress": "^3.0.98",
|
"@pushrocks/smartexpress": "^3.0.100",
|
||||||
"lit-element": "^2.4.0",
|
"lit-element": "^2.4.0",
|
||||||
"lit-html": "^1.3.0",
|
"lit-html": "^1.3.0",
|
||||||
"typescript": "^4.1.2"
|
"typescript": "^4.2.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@gitzone/tsbuild": "^2.1.25",
|
"@gitzone/tsbuild": "^2.1.25",
|
||||||
"@gitzone/tsbundle": "^1.0.78",
|
"@gitzone/tsbundle": "^1.0.80",
|
||||||
"@gitzone/tswatch": "^1.0.50",
|
"@gitzone/tswatch": "^1.0.52",
|
||||||
"@pushrocks/projectinfo": "^4.0.5",
|
"@pushrocks/projectinfo": "^4.0.5",
|
||||||
"tslint": "^6.1.3",
|
"tslint": "^6.1.3",
|
||||||
"tslint-config-prettier": "^1.17.0"
|
"tslint-config-prettier": "^1.17.0"
|
||||||
|
@ -1,11 +1,43 @@
|
|||||||
import { DeesElement, customElement, TemplateResult, html } from '@designestate/dees-element';
|
import {
|
||||||
|
DeesElement,
|
||||||
|
customElement,
|
||||||
|
TemplateResult,
|
||||||
|
html,
|
||||||
|
property,
|
||||||
|
} from '@designestate/dees-element';
|
||||||
|
|
||||||
import * as domtools from '@designestate/dees-domtools';
|
import * as domtools from '@designestate/dees-domtools';
|
||||||
|
|
||||||
|
enum ETestEnum {
|
||||||
|
'first' = 'first',
|
||||||
|
'second' = 'second',
|
||||||
|
'awesome' = 'awesome',
|
||||||
|
}
|
||||||
|
|
||||||
@customElement('test-demoelement')
|
@customElement('test-demoelement')
|
||||||
export class TestDemoelement extends DeesElement {
|
export class TestDemoelement extends DeesElement {
|
||||||
public static demo = () => html`<test-demoelement></test-demoelement>`;
|
public static demo = () => html`<test-demoelement></test-demoelement>`;
|
||||||
|
|
||||||
|
@property({
|
||||||
|
type: Boolean,
|
||||||
|
})
|
||||||
|
public demoBoolean = false;
|
||||||
|
|
||||||
|
@property({
|
||||||
|
type: String,
|
||||||
|
})
|
||||||
|
public demoString = 'default demo string';
|
||||||
|
|
||||||
|
@property({
|
||||||
|
type: Number,
|
||||||
|
})
|
||||||
|
public demoNumber = 2;
|
||||||
|
|
||||||
|
@property({
|
||||||
|
type: ETestEnum,
|
||||||
|
})
|
||||||
|
public demoENum: ETestEnum = ETestEnum.first;
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
return html`
|
return html`
|
||||||
<style>
|
<style>
|
||||||
@ -28,10 +60,19 @@ export class TestDemoelement extends DeesElement {
|
|||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
}
|
}
|
||||||
`)}
|
`)}
|
||||||
|
pre b {
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="maincontainer"><slot>This is a demo element</slot></div>
|
<div class="maincontainer"><slot>This is a demo element</slot></div>
|
||||||
<div class="themeindicator">
|
<div class="themeindicator">
|
||||||
You have selected the ${this.goBright ? 'bright' : 'dark'} theme;
|
You have selected the ${this.goBright ? 'bright' : 'dark'} theme.
|
||||||
|
<pre>
|
||||||
|
demoBoolean is <b>"${this.demoBoolean}"</b>
|
||||||
|
demoString is <b>"${this.demoString}"</b>
|
||||||
|
demoNumber is <b>"${this.demoNumber}"</b>
|
||||||
|
demoEnum is <b>"${this.demoENum}"</b>
|
||||||
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
import { LitElement, property, html, customElement, TemplateResult, queryAsync } from 'lit-element';
|
||||||
|
|
||||||
import * as plugins from '../wcctools.plugins';
|
import * as plugins from '../wcctools.plugins';
|
||||||
|
|
||||||
@ -11,6 +11,7 @@ import './wcc-properties';
|
|||||||
import { TTheme } from './wcc-properties';
|
import { TTheme } from './wcc-properties';
|
||||||
import { TElementType } from './wcc-sidebar';
|
import { TElementType } from './wcc-sidebar';
|
||||||
import { TViewport } from '@designestate/dees-domtools/dist_ts/domtools.breakpoints';
|
import { TViewport } from '@designestate/dees-domtools/dist_ts/domtools.breakpoints';
|
||||||
|
import { WccFrame } from './wcc-frame';
|
||||||
|
|
||||||
@customElement('wcc-dashboard')
|
@customElement('wcc-dashboard')
|
||||||
export class WccDashboard extends LitElement {
|
export class WccDashboard extends LitElement {
|
||||||
@ -39,6 +40,9 @@ export class WccDashboard extends LitElement {
|
|||||||
|
|
||||||
@property()
|
@property()
|
||||||
public warning: string = null;
|
public warning: string = null;
|
||||||
|
|
||||||
|
@queryAsync('wcc-frame')
|
||||||
|
public wccFrame: Promise<WccFrame>;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
elementsArg?: { [key: string]: LitElement },
|
elementsArg?: { [key: string]: LitElement },
|
||||||
|
@ -1,37 +0,0 @@
|
|||||||
import { LitElement, property, html, customElement } from 'lit-element';
|
|
||||||
import { TemplateResult } from 'lit-html';
|
|
||||||
|
|
||||||
@customElement('wcc-defaultelement')
|
|
||||||
export class WccDefaultElement extends LitElement {
|
|
||||||
public static demo = () => html`<wcc-defaultelement></wcc-defaultelement>`;
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
|
|
||||||
// you have access to all kinds of things through this.
|
|
||||||
// this.setAttribute('gotIt','true');
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
public render(): TemplateResult {
|
|
||||||
return html`
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
font-family: 'Roboto', sans-serif;
|
|
||||||
background: #333;
|
|
||||||
text-align: center;
|
|
||||||
padding:30px;
|
|
||||||
box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
|
|
||||||
display: block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 30px;
|
|
||||||
}
|
|
||||||
:host([hidden]) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
No Element specified!
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
@ -81,4 +81,10 @@ export class WccFrame extends DeesElement {
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public async getDisplayedInstance() {
|
||||||
|
await this.updateComplete;
|
||||||
|
const slottedContent = this.children;
|
||||||
|
console.log(slottedContent);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,15 @@
|
|||||||
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
import {
|
||||||
|
LitElement,
|
||||||
|
property,
|
||||||
|
html,
|
||||||
|
customElement,
|
||||||
|
TemplateResult,
|
||||||
|
internalProperty,
|
||||||
|
} from 'lit-element';
|
||||||
import { WccDashboard } from './wcc-dashboard';
|
import { WccDashboard } from './wcc-dashboard';
|
||||||
|
|
||||||
|
export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array';
|
||||||
|
|
||||||
export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
|
export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
|
||||||
export type TTheme = 'bright' | 'dark';
|
export type TTheme = 'bright' | 'dark';
|
||||||
|
|
||||||
@ -27,6 +36,9 @@ export class WccProperties extends LitElement {
|
|||||||
@property()
|
@property()
|
||||||
public warning: string = null;
|
public warning: string = null;
|
||||||
|
|
||||||
|
@internalProperty()
|
||||||
|
propertyContent: TemplateResult[] = [];
|
||||||
|
|
||||||
public render(): TemplateResult {
|
public render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
||||||
@ -60,6 +72,16 @@ export class WccProperties extends LitElement {
|
|||||||
background: #444;
|
background: #444;
|
||||||
border: 1px solid #000;
|
border: 1px solid #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.properties input, .properties select {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
background: #333;
|
||||||
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.viewportSelector,
|
.viewportSelector,
|
||||||
.themeSelector {
|
.themeSelector {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
@ -128,22 +150,7 @@ export class WccProperties extends LitElement {
|
|||||||
<div class="grid">
|
<div class="grid">
|
||||||
<div class="properties">
|
<div class="properties">
|
||||||
<div class="panelheading">Properties</div>
|
<div class="panelheading">Properties</div>
|
||||||
${(() => {
|
${this.propertyContent}
|
||||||
if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) {
|
|
||||||
const anonItem: any = this.selectedItem;
|
|
||||||
if (!anonItem._classProperties) {
|
|
||||||
return `You have selected a page!`;
|
|
||||||
}
|
|
||||||
const classProperties: Map<string, any> = anonItem._classProperties;
|
|
||||||
const returnArray: TemplateResult[] = [];
|
|
||||||
for (const key of classProperties.keys()) {
|
|
||||||
returnArray.push(
|
|
||||||
html` <div class="property">${key} / ${classProperties.get(key).type.name}</div> `
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return returnArray;
|
|
||||||
}
|
|
||||||
})()}
|
|
||||||
</div>
|
</div>
|
||||||
<div class="themeSelector">
|
<div class="themeSelector">
|
||||||
<div class="panelheading">Theme</div>
|
<div class="panelheading">Theme</div>
|
||||||
@ -212,6 +219,121 @@ export class WccProperties extends LitElement {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public async createProperties() {
|
||||||
|
console.log('creating properties');
|
||||||
|
const isEnumeration = (propertyArg): boolean => {
|
||||||
|
const keys = Object.keys(propertyArg.type);
|
||||||
|
const values = [];
|
||||||
|
for (const key of keys) {
|
||||||
|
let value = propertyArg.type[key];
|
||||||
|
if (typeof value === 'number') {
|
||||||
|
value = value.toString();
|
||||||
|
}
|
||||||
|
values.push(value);
|
||||||
|
}
|
||||||
|
for (const key of keys) {
|
||||||
|
if (values.indexOf(key) < 0) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
const getEnumValues = (propertyArg): any[] => {
|
||||||
|
console.log(JSON.stringify(propertyArg));
|
||||||
|
const enumValues : any[] = [];
|
||||||
|
Object.keys(propertyArg.type).forEach((valueArg: string) => {
|
||||||
|
enumValues.push(valueArg);
|
||||||
|
});
|
||||||
|
return enumValues;
|
||||||
|
};
|
||||||
|
const determinePropertyType = (propertyArg: any): TPropertyType => {
|
||||||
|
const typeName: any | undefined = propertyArg.type.name;
|
||||||
|
if (typeName) {
|
||||||
|
return typeName;
|
||||||
|
} else {
|
||||||
|
return Array.isArray(propertyArg)
|
||||||
|
? 'Array'
|
||||||
|
: isEnumeration(propertyArg)
|
||||||
|
? 'Enum'
|
||||||
|
: 'Object';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) {
|
||||||
|
const anonItem: any = this.selectedItem;
|
||||||
|
if (!anonItem._classProperties) {
|
||||||
|
return html`You have selected a page!`;
|
||||||
|
}
|
||||||
|
const wccFrame = await this.dashboardRef.wccFrame;
|
||||||
|
let selectedElement: HTMLElement;
|
||||||
|
for (const element of Array.from(wccFrame.children)) {
|
||||||
|
if (element instanceof (this.selectedItem as any)) {
|
||||||
|
selectedElement = element as HTMLElement;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(selectedElement);
|
||||||
|
const classProperties: Map<string, any> = anonItem._classProperties;
|
||||||
|
const propertyArray: TemplateResult[] = [];
|
||||||
|
for (const key of classProperties.keys()) {
|
||||||
|
if (key === 'goBright' || key === 'domtools') {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
const property = classProperties.get(key);
|
||||||
|
const propertyTypeString = determinePropertyType(property);
|
||||||
|
propertyArray.push(
|
||||||
|
html`
|
||||||
|
<div class="property">
|
||||||
|
${key} / ${propertyTypeString}<br>
|
||||||
|
${(() => {
|
||||||
|
switch (propertyTypeString) {
|
||||||
|
case 'Boolean':
|
||||||
|
return html`<input
|
||||||
|
type="checkbox"
|
||||||
|
?checked=${selectedElement[key]}
|
||||||
|
@input="${(eventArg: any) => {
|
||||||
|
selectedElement[key] = eventArg.target.checked;
|
||||||
|
}}"
|
||||||
|
/>`;
|
||||||
|
case 'String':
|
||||||
|
return html`<input
|
||||||
|
type="text"
|
||||||
|
value=${selectedElement[key]}
|
||||||
|
@input="${(eventArg: any) => {
|
||||||
|
selectedElement[key] = eventArg.target.value;
|
||||||
|
}}"
|
||||||
|
/>`;
|
||||||
|
case 'Number':
|
||||||
|
return html`<input
|
||||||
|
type="number"
|
||||||
|
value=${selectedElement[key]}
|
||||||
|
@input="${(eventArg: any) => {
|
||||||
|
selectedElement[key] = eventArg.target.value;
|
||||||
|
}}"
|
||||||
|
/>`;
|
||||||
|
case 'Enum':
|
||||||
|
const enumValues: any[] = getEnumValues(property);
|
||||||
|
return html`<select
|
||||||
|
@change="${(eventArg:any)=>{
|
||||||
|
selectedElement[key]=eventArg.target.value;
|
||||||
|
}}">
|
||||||
|
${enumValues.map(valueArg => {
|
||||||
|
return html`
|
||||||
|
<option ?selected=${valueArg === selectedElement[key] ? true : false} name="${valueArg}">${valueArg}</option>
|
||||||
|
`;
|
||||||
|
})}
|
||||||
|
</select>`;
|
||||||
|
}
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
this.propertyContent = propertyArray;
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
public selectTheme(themeArg: TTheme) {
|
public selectTheme(themeArg: TTheme) {
|
||||||
this.selectedTheme = themeArg;
|
this.selectedTheme = themeArg;
|
||||||
this.dispatchEvent(
|
this.dispatchEvent(
|
||||||
@ -223,6 +345,11 @@ export class WccProperties extends LitElement {
|
|||||||
this.dashboardRef.buildUrl();
|
this.dashboardRef.buildUrl();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public async performUpdate() {
|
||||||
|
await this.createProperties();
|
||||||
|
super.performUpdate();
|
||||||
|
}
|
||||||
|
|
||||||
public selectViewport(viewport: TEnvironment) {
|
public selectViewport(viewport: TEnvironment) {
|
||||||
this.selectedViewport = viewport;
|
this.selectedViewport = viewport;
|
||||||
setEnvironment(viewport);
|
setEnvironment(viewport);
|
||||||
|
Loading…
Reference in New Issue
Block a user