design.estate/dees-wcctools
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz 2022-04-14 16:56:04 +02:00
parent 6917145b58
commit 03c00919df
7 changed files with 916 additions and 1016 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1756
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

12
package.json
View File

@ -14,16 +14,16 @@
"author": "Lossless GmbH",
"license": "UNLICENSED",
"dependencies": {
"@designestate/dees-domtools": "^2.0.1",
"@designestate/dees-element": "^2.0.4",
"@gitzone/tsrun": "^1.2.31",
"@designestate/dees-domtools": "^2.0.6",
"@designestate/dees-element": "^2.0.6",
"@gitzone/tsrun": "^1.2.32",
"@pushrocks/smartdelay": "^2.0.13",
"@pushrocks/smartexpress": "^4.0.0"
"@pushrocks/smartexpress": "^4.0.4"
},
"devDependencies": {
"@gitzone/tsbuild": "^2.1.61",
"@gitzone/tsbundle": "^1.0.101",
"@gitzone/tswatch": "^1.0.73",
"@gitzone/tsbundle": "^1.0.102",
"@gitzone/tswatch": "^1.0.76",
"@pushrocks/projectinfo": "^4.0.5",
"tslint": "^6.1.3",
"tslint-config-prettier": "^1.17.0"

71
ts_web/elements/wcc-dashboard.ts
View File

@ -1,4 +1,4 @@
import { DeesElement, property, html, customElement, TemplateResult, queryAsync } from '@designestate/dees-element';
import { DeesElement, property, html, customElement, TemplateResult, queryAsync, render, domtools } from '@designestate/dees-element';
import * as plugins from '../wcctools.plugins.js';
@ -98,32 +98,6 @@ export class WccDashboard extends DeesElement {
}}
></wcc-properties>
<wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
${(() => {
if (this.selectedType === 'page' && this.selectedItem) {
if (typeof this.selectedItem === 'function') {
console.log('slotting page.');
return this.selectedItem();
} else {
console.error('The selected item looks strange:');
console.log(this.selectedItem);
}
} else if (this.selectedType === 'element' && this.selectedItem) {
console.log('slotting element.');
const anonItem: any = this.selectedItem;
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()}`;
}
})()}
</wcc-frame>
`;
}
@ -160,24 +134,39 @@ export class WccDashboard extends DeesElement {
);
}
private updating = false;
public async updated() {
if (this.updating) {
return;
}
this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
await this.domtools.router._handleRouteState();
this.updating = true;
const storeElement = this.selectedItem;
setTimeout(async () => {
this.selectedItem = null;
setTimeout(async () => {
this.selectedItem = storeElement;
setTimeout(() => {
this.updating = false;
}, 0);
});
}, 0);
const wccFrame: WccFrame = this.shadowRoot.querySelector('wcc-frame');
if (this.selectedType === 'page' && this.selectedItem) {
if (typeof this.selectedItem === 'function') {
console.log('slotting page.');
const viewport = await wccFrame.getViewportElement();
render(this.selectedItem(), viewport);
console.log('rendered page.');
} else {
console.error('The selected item looks strange:');
console.log(this.selectedItem);
}
} else if (this.selectedType === 'element' && this.selectedItem) {
console.log('slotting element.');
const anonItem: any = this.selectedItem;
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);
const viewport = await wccFrame.getViewportElement();
render(anonItem.demo(), viewport);;
}
}
public buildUrl() {

65
ts_web/elements/wcc-frame.ts
View File

@ -1,25 +1,45 @@
import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
'wcc-frame': WccFrame;
}
}
@customElement('wcc-frame')
export class WccFrame extends DeesElement {
@property()
public viewport: string;
public static styles = [
css`
:host {
border: 10px solid #ffaeaf;
position: absolute;
background: ${cssManager.bdTheme('#333', '#000')};
left: 200px;
right: 0px;
top: 0px;
bottom: 100px;
overflow-y: auto;
overflow-x: auto;
}
.viewport {
container-type: inline-size;
container-name: wccToolsViewport;
position: relative;
min-height: 100%;
}
`,
]
public render(): TemplateResult {
return html`
<style>
:host {
border: 10px solid #ffaeaf;
position: absolute;
background: ${this.goBright ? '#333': '#000'};
left: 200px;
right: 0px;
top: 0px;
bottom: 100px;
overflow-y: auto;
overflow-x: auto;
${(() => {
switch (this.viewport) {
case 'desktop':
@ -45,19 +65,17 @@ export class WccFrame extends DeesElement {
}px;
`;
}
})()}
})()}
}
.viewport {
container-type: inline-size;
container-name: wccToolsViewport;
position: relative;
${this.viewport !== 'desktop'
? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
: html``}
min-height: 100%;
? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
: html``
}
background:
${this.goBright ? `
${
this.goBright ? `
radial-gradient(#CCCCCC 3px, transparent 4px),
radial-gradient(#CCCCCC 3px, transparent 4px),
linear-gradient(#eeeeee 4px, transparent 0),
@ -75,11 +93,12 @@ export class WccFrame extends DeesElement {
#222222;
background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
`}
`
}
}
</style>
<div class="viewport">
<slot></slot>
</div>
`;
}
@ -89,4 +108,8 @@ export class WccFrame extends DeesElement {
const slottedContent = this.children;
console.log(slottedContent);
}
public async getViewportElement(): Promise<HTMLElement> {
return this.shadowRoot.querySelector('.viewport') as HTMLElement;
}
}

6
ts_web/elements/wcc-properties.ts
View File

@ -243,7 +243,7 @@ export class WccProperties extends DeesElement {
});
return enumValues;
};
const determinePropertyType = (propertyArg: any): TPropertyType => {
const determinePropertyType = async (propertyArg: any): Promise<TPropertyType> => {
const typeName: any | undefined = propertyArg.type.name;
if (typeName) {
return typeName;
@ -265,7 +265,7 @@ export class WccProperties extends DeesElement {
console.log(anonItem.elementProperties);
const wccFrame = await this.dashboardRef.wccFrame;
let firstFoundInstantiatedElement: HTMLElement;
for (const element of Array.from(wccFrame.children)) {
for (const element of Array.from((await wccFrame.getViewportElement()).children)) {
if (element instanceof (this.selectedItem as any)) {
firstFoundInstantiatedElement = element as HTMLElement;
break;
@ -287,7 +287,7 @@ export class WccProperties extends DeesElement {
continue;
}
const property = classProperties.get(key);
const propertyTypeString = determinePropertyType(property);
const propertyTypeString = await determinePropertyType(property);
propertyArray.push(
html`
<div class="property">

16
ts_web/tsconfig.json
View File

@ -1,16 +0,0 @@
{
"compilerOptions": {
"target": "es2017",
"module": "es2015",
"moduleResolution": "node",
"lib": ["es2017", "dom"],
"declaration": true,
"inlineSources": true,
"inlineSourceMap": true,
"noUnusedLocals": true,
"noFallthroughCasesInSwitch": true,
"outDir": "dist/",
"skipLibCheck": true,
"experimentalDecorators": true
}
}

6
tsconfig.json
View File

@ -1,7 +1,9 @@
{
"compilerOptions": {
"experimentalDecorators": true,
"target": "ES2017",
"moduleResolution": "Node"
"useDefineForClassFields": false,
"target": "ES2022",
"module": "ES2022",
"moduleResolution": "nodenext"
}
}