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",
|
||||
"license": "UNLICENSED",
|
||||
"dependencies": {
|
||||
"@designestate/dees-domtools": "^1.0.81",
|
||||
"@designestate/dees-element": "^1.0.10",
|
||||
"@designestate/dees-domtools": "^1.0.87",
|
||||
"@designestate/dees-element": "^1.0.19",
|
||||
"@gitzone/tsrun": "^1.2.12",
|
||||
"@pushrocks/smartdelay": "^2.0.10",
|
||||
"@pushrocks/smartexpress": "^3.0.98",
|
||||
"@pushrocks/smartexpress": "^3.0.100",
|
||||
"lit-element": "^2.4.0",
|
||||
"lit-html": "^1.3.0",
|
||||
"typescript": "^4.1.2"
|
||||
"typescript": "^4.2.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gitzone/tsbuild": "^2.1.25",
|
||||
"@gitzone/tsbundle": "^1.0.78",
|
||||
"@gitzone/tswatch": "^1.0.50",
|
||||
"@gitzone/tsbundle": "^1.0.80",
|
||||
"@gitzone/tswatch": "^1.0.52",
|
||||
"@pushrocks/projectinfo": "^4.0.5",
|
||||
"tslint": "^6.1.3",
|
||||
"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';
|
||||
|
||||
enum ETestEnum {
|
||||
'first' = 'first',
|
||||
'second' = 'second',
|
||||
'awesome' = 'awesome',
|
||||
}
|
||||
|
||||
@customElement('test-demoelement')
|
||||
export class TestDemoelement extends DeesElement {
|
||||
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() {
|
||||
return html`
|
||||
<style>
|
||||
@ -28,10 +60,19 @@ export class TestDemoelement extends DeesElement {
|
||||
border-radius: 50px;
|
||||
}
|
||||
`)}
|
||||
pre b {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<div class="maincontainer"><slot>This is a demo element</slot></div>
|
||||
<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>
|
||||
`;
|
||||
}
|
||||
|
@ -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';
|
||||
|
||||
@ -11,6 +11,7 @@ import './wcc-properties';
|
||||
import { TTheme } from './wcc-properties';
|
||||
import { TElementType } from './wcc-sidebar';
|
||||
import { TViewport } from '@designestate/dees-domtools/dist_ts/domtools.breakpoints';
|
||||
import { WccFrame } from './wcc-frame';
|
||||
|
||||
@customElement('wcc-dashboard')
|
||||
export class WccDashboard extends LitElement {
|
||||
@ -40,6 +41,9 @@ export class WccDashboard extends LitElement {
|
||||
@property()
|
||||
public warning: string = null;
|
||||
|
||||
@queryAsync('wcc-frame')
|
||||
public wccFrame: Promise<WccFrame>;
|
||||
|
||||
constructor(
|
||||
elementsArg?: { [key: string]: LitElement },
|
||||
pagesArg?: { [key: string]: () => TemplateResult }
|
||||
|
@ -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>
|
||||
`;
|
||||
}
|
||||
|
||||
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';
|
||||
|
||||
export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array';
|
||||
|
||||
export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
|
||||
export type TTheme = 'bright' | 'dark';
|
||||
|
||||
@ -27,6 +36,9 @@ export class WccProperties extends LitElement {
|
||||
@property()
|
||||
public warning: string = null;
|
||||
|
||||
@internalProperty()
|
||||
propertyContent: TemplateResult[] = [];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
||||
@ -60,6 +72,16 @@ export class WccProperties extends LitElement {
|
||||
background: #444;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.properties input, .properties select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: #333;
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.viewportSelector,
|
||||
.themeSelector {
|
||||
user-select: none;
|
||||
@ -128,22 +150,7 @@ export class WccProperties extends LitElement {
|
||||
<div class="grid">
|
||||
<div class="properties">
|
||||
<div class="panelheading">Properties</div>
|
||||
${(() => {
|
||||
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;
|
||||
}
|
||||
})()}
|
||||
${this.propertyContent}
|
||||
</div>
|
||||
<div class="themeSelector">
|
||||
<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) {
|
||||
this.selectedTheme = themeArg;
|
||||
this.dispatchEvent(
|
||||
@ -223,6 +345,11 @@ export class WccProperties extends LitElement {
|
||||
this.dashboardRef.buildUrl();
|
||||
}
|
||||
|
||||
public async performUpdate() {
|
||||
await this.createProperties();
|
||||
super.performUpdate();
|
||||
}
|
||||
|
||||
public selectViewport(viewport: TEnvironment) {
|
||||
this.selectedViewport = viewport;
|
||||
setEnvironment(viewport);
|
||||
|
Loading…
Reference in New Issue
Block a user