Compare commits

...

34 Commits

Author SHA1 Message Date
68375a5e58 1.0.72 2022-03-24 17:08:26 +01:00
5876225b39 fix(core): update 2022-03-24 17:08:25 +01:00
342ac96429 1.0.71 2022-03-24 16:14:12 +01:00
85a472fe1c fix(core): update 2022-03-24 16:14:12 +01:00
4fecae83dc 1.0.70 2022-03-24 15:53:03 +01:00
b7a666ac66 fix(core): update 2022-03-24 15:53:02 +01:00
e559ed072c 1.0.69 2022-03-24 15:39:18 +01:00
c44d9e7365 fix(core): update 2022-03-24 15:39:17 +01:00
53f53be991 1.0.68 2022-03-04 10:24:04 +01:00
9dec6e25b5 fix(core): update 2022-03-04 10:24:03 +01:00
03fa323eb9 1.0.67 2022-03-02 20:01:15 +01:00
e0344bb513 fix(core): update 2022-03-02 20:01:14 +01:00
a6f583b8c4 1.0.66 2021-11-26 19:18:14 +01:00
60e173b7be fix(core): update 2021-11-26 19:18:14 +01:00
d51027d4be 1.0.65 2021-11-26 19:16:09 +01:00
2efa465930 fix(core): update 2021-11-26 19:16:09 +01:00
19081caacd 1.0.64 2021-11-26 19:05:05 +01:00
c42e8b8bef fix(core): update 2021-11-26 19:05:04 +01:00
750e8cef32 1.0.63 2021-11-26 18:52:44 +01:00
c0d057949d fix(core): update 2021-11-26 18:52:44 +01:00
82a5283edd 1.0.62 2021-11-26 18:27:29 +01:00
abb20def4b fix(core): update 2021-11-26 18:27:29 +01:00
dd71751864 1.0.61 2021-11-26 17:53:05 +01:00
c4562c797e fix(core): update 2021-11-26 17:53:04 +01:00
643317811b 1.0.60 2021-11-26 17:47:09 +01:00
3667070094 fix(core): update 2021-11-26 17:47:08 +01:00
a86ef5bfce 1.0.59 2021-09-27 14:45:06 +02:00
77d058f403 fix(core): update 2021-09-27 14:45:05 +02:00
1639a57bd1 1.0.58 2021-09-27 13:30:03 +02:00
b546d1a2c5 fix(core): update 2021-09-27 13:30:02 +02:00
5639c152a2 1.0.57 2021-04-02 09:55:15 +00:00
05a093f080 fix(core): update 2021-04-02 09:55:15 +00:00
08156b2d47 1.0.56 2021-04-01 19:11:24 +00:00
0b119c481c fix(core): update 2021-04-01 19:11:23 +00:00
16 changed files with 14430 additions and 8149 deletions

View File

@ -12,6 +12,9 @@ stages:
- release - release
- metadata - metadata
before_script:
- npm install -g @shipzone/npmci
# ==================== # ====================
# security stage # security stage
# ==================== # ====================
@ -36,6 +39,7 @@ auditProductionDependencies:
- npmci command npm audit --audit-level=high --only=prod --production - npmci command npm audit --audit-level=high --only=prod --production
tags: tags:
- docker - docker
allow_failure: true
auditDevDependencies: auditDevDependencies:
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
@ -96,10 +100,9 @@ codequality:
only: only:
- tags - tags
script: script:
- npmci command npm install -g tslint typescript - npmci command npm install -g typescript
- npmci npm prepare - npmci npm prepare
- npmci npm install - npmci npm install
- npmci command "tslint -c tslint.json ./ts/**/*.ts"
tags: tags:
- lossless - lossless
- docker - docker

24
.vscode/launch.json vendored
View File

@ -2,28 +2,10 @@
"version": "0.2.0", "version": "0.2.0",
"configurations": [ "configurations": [
{ {
"name": "current file", "command": "npm test",
"type": "node", "name": "Run npm test",
"request": "launch", "request": "launch",
"args": [ "type": "node-terminal"
"${relativeFile}"
],
"runtimeArgs": ["-r", "@gitzone/tsrun"],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"internalConsoleOptions": "openOnSessionStart"
},
{
"name": "test.ts",
"type": "node",
"request": "launch",
"args": [
"test/test.ts"
],
"runtimeArgs": ["-r", "@gitzone/tsrun"],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"internalConsoleOptions": "openOnSessionStart"
} }
] ]
} }

View File

@ -17,7 +17,7 @@
} }
</style> </style>
<script src="./index.ts"></script> <script type="module" src="/bundle.js"></script>
</head> </head>
<body> <body>
</body> </body>

View File

@ -1,10 +1,10 @@
// dees tools // dees tools
import * as deesWccTools from '../ts_web'; import * as deesWccTools from '../ts_web/index.js';
import * as deesDomTools from '@designestate/dees-domtools'; import * as deesDomTools from '@designestate/dees-domtools';
// elements and pages // elements and pages
import * as elements from '../test/elements'; import * as elements from '../test/elements/index.js';
import * as pages from '../test/pages'; import * as pages from '../test/pages/index.js';
deesWccTools.setupWccTools(elements as any, pages); deesWccTools.setupWccTools(elements as any, pages);
deesDomTools.elementBasic.setup(); deesDomTools.elementBasic.setup();

View File

@ -5,7 +5,7 @@
"githost": "gitlab.com", "githost": "gitlab.com",
"gitscope": "designestate", "gitscope": "designestate",
"gitrepo": "dees-wcctools", "gitrepo": "dees-wcctools",
"shortDescription": "wcc tools for creating element catalogues", "description": "wcc tools for creating element catalogues",
"npmPackagename": "@designestate/dees-wcctools", "npmPackagename": "@designestate/dees-wcctools",
"license": "MIT", "license": "MIT",
"projectDomain": "design.estate" "projectDomain": "design.estate"

22257
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,31 +1,29 @@
{ {
"name": "@designestate/dees-wcctools", "name": "@designestate/dees-wcctools",
"version": "1.0.55", "version": "1.0.72",
"private": false, "private": false,
"description": "wcc tools for creating element catalogues", "description": "wcc tools for creating element catalogues",
"main": "dist_ts_web/index.js", "main": "dist_ts_web/index.js",
"typings": "dist_ts_web/index.d.ts", "typings": "dist_ts_web/index.d.ts",
"type": "module",
"scripts": { "scripts": {
"test": "(npm run build)", "test": "(npm run build)",
"build": "(tsbuild custom ts_web --web && tsbundle element)", "build": "(tsbuild element --web --allowimplicitany --skiplibcheck && tsbundle element)",
"watch": "tswatch element" "watch": "tswatch element"
}, },
"author": "Lossless GmbH", "author": "Lossless GmbH",
"license": "UNLICENSED", "license": "UNLICENSED",
"dependencies": { "dependencies": {
"@designestate/dees-domtools": "^1.0.87", "@designestate/dees-domtools": "^2.0.1",
"@designestate/dees-element": "^1.0.19", "@designestate/dees-element": "^2.0.4",
"@gitzone/tsrun": "^1.2.12", "@gitzone/tsrun": "^1.2.31",
"@pushrocks/smartdelay": "^2.0.10", "@pushrocks/smartdelay": "^2.0.13",
"@pushrocks/smartexpress": "^3.0.100", "@pushrocks/smartexpress": "^4.0.0"
"lit-element": "^2.4.0",
"lit-html": "^1.3.0",
"typescript": "^4.2.3"
}, },
"devDependencies": { "devDependencies": {
"@gitzone/tsbuild": "^2.1.25", "@gitzone/tsbuild": "^2.1.60",
"@gitzone/tsbundle": "^1.0.80", "@gitzone/tsbundle": "^1.0.101",
"@gitzone/tswatch": "^1.0.52", "@gitzone/tswatch": "^1.0.73",
"@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"

View File

@ -1 +1 @@
export * from './test-demoelement'; export * from './test-demoelement.js';

View File

@ -4,6 +4,8 @@ import {
TemplateResult, TemplateResult,
html, html,
property, property,
css,
cssManager,
} from '@designestate/dees-element'; } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@designestate/dees-domtools';
@ -16,7 +18,18 @@ enum ETestEnum {
@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>This is a slot text</test-demoelement>`;
@property()
public notTyped = 'hello';
@property({
type: String,
})
public typedAndNotInitizalized: string;
@property()
public notTypedAndNotInitizalized: string;
@property({ @property({
type: Boolean, type: Boolean,
@ -38,41 +51,61 @@ export class TestDemoelement extends DeesElement {
}) })
public demoENum: ETestEnum = ETestEnum.first; public demoENum: ETestEnum = ETestEnum.first;
constructor() {
super();
}
public static styles = [
css`
.maincontainer,
.themeindicator {
display: block;
padding: 10px;
border-radius: 10px;
margin-bottom: 20px;
}
.maincontainer {
color: #fff;
background: #000;
}
.themeindicator {
color: ${cssManager.bdTheme('#000', '#fff')};
background: ${cssManager.bdTheme('#fff', '#000')};
}
@container wccToolsViewport size(min-width: 1px) {
.maincontainer,
.themeindicator {
border-radius: 50px;
}
}
${domtools.breakpoints.cssForPhablet(css`
.maincontainer,
.themeindicator {
border-radius: 50px;
}
`)}
pre b {
color: green;
}
`,
];
public render() { public render() {
return html` return html`
<style> <style></style>
.maincontainer, .themeindicator {
display: block;
padding: 10px;
border-radius: 10px;
margin-bottom: 20px;
}
.maincontainer {
color: #fff;
background: #000;
}
.themeindicator {
color: ${this.goBright ? '#000' : '#fff'};
background: ${this.goBright ? '#fff' : '#000'};
}
${domtools.breakpoints.cssForPhablet(`
.maincontainer, .themeindicator {
border-radius: 50px;
}
`)}
pre b {
color: green;
}
</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> <pre>
demoBoolean is <b>"${this.demoBoolean}"</b> demoBoolean is <b>${this.demoBoolean}</b>
demoString is <b>"${this.demoString}"</b> demoString is <b>"${this.demoString}"</b>
demoNumber is <b>"${this.demoNumber}"</b> demoNumber is <b>${this.demoNumber}</b>
demoEnum is <b>"${this.demoENum}"</b> demoEnum is <b>"${this.demoENum}"</b>
</pre> </pre
>
</div> </div>
`; `;
} }

View File

@ -1,3 +1,3 @@
import * as wcctools from '../ts_web/index'; import * as wcctools from '../ts_web/index.js';
import * as elements from './elements'; import * as elements from './elements/index.js';
wcctools.setupWccTools(elements as any, {}); wcctools.setupWccTools(elements as any, {});

View File

@ -1,21 +1,18 @@
import { LitElement, property, html, customElement, TemplateResult, queryAsync } from 'lit-element'; import { DeesElement, property, html, customElement, TemplateResult, queryAsync } from '@designestate/dees-element';
import * as plugins from '../wcctools.plugins'; import * as plugins from '../wcctools.plugins.js';
import { WccDefaultElement } from './wcc-defaultelement';
// wcc tools // wcc tools
import './wcc-frame'; import './wcc-frame.js';
import './wcc-sidebar'; import './wcc-sidebar.js';
import './wcc-properties'; import './wcc-properties.js';
import { TTheme } from './wcc-properties'; import { TTheme } from './wcc-properties.js';
import { TElementType } from './wcc-sidebar'; import { TElementType } from './wcc-sidebar.js';
import { TViewport } from '@designestate/dees-domtools/dist_ts/domtools.breakpoints'; import { breakpoints } from '@designestate/dees-domtools';
import { WccFrame } from './wcc-frame'; import { WccFrame } from './wcc-frame.js';
@customElement('wcc-dashboard') @customElement('wcc-dashboard')
export class WccDashboard extends LitElement { export class WccDashboard extends DeesElement {
public domtools: plugins.deesDomtools.DomTools;
@property() @property()
public selectedType: TElementType; public selectedType: TElementType;
@ -24,7 +21,7 @@ export class WccDashboard extends LitElement {
public selectedItemName: string; public selectedItemName: string;
@property() @property()
public selectedItem: (() => TemplateResult) | LitElement; public selectedItem: (() => TemplateResult) | DeesElement;
@property() @property()
public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop'; public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
@ -36,7 +33,7 @@ export class WccDashboard extends LitElement {
public pages: { [key: string]: () => TemplateResult } = {}; public pages: { [key: string]: () => TemplateResult } = {};
@property() @property()
public elements: { [key: string]: LitElement } = {}; public elements: { [key: string]: DeesElement } = {};
@property() @property()
public warning: string = null; public warning: string = null;
@ -45,7 +42,7 @@ export class WccDashboard extends LitElement {
public wccFrame: Promise<WccFrame>; public wccFrame: Promise<WccFrame>;
constructor( constructor(
elementsArg?: { [key: string]: LitElement }, elementsArg?: { [key: string]: DeesElement },
pagesArg?: { [key: string]: () => TemplateResult } pagesArg?: { [key: string]: () => TemplateResult }
) { ) {
super(); super();
@ -94,7 +91,7 @@ export class WccDashboard extends LitElement {
.selectedTheme=${this.selectedTheme} .selectedTheme=${this.selectedTheme}
@selectedViewport=${(eventArg) => { @selectedViewport=${(eventArg) => {
this.selectedViewport = eventArg.detail; this.selectedViewport = eventArg.detail;
this.performUpdate(); this.scheduleUpdate();
}} }}
@selectedTheme=${(eventArg) => { @selectedTheme=${(eventArg) => {
this.selectedTheme = eventArg.detail; this.selectedTheme = eventArg.detail;
@ -102,8 +99,10 @@ export class WccDashboard extends LitElement {
></wcc-properties> ></wcc-properties>
<wcc-frame id="wccFrame" viewport=${this.selectedViewport}> <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
${(() => { ${(() => {
console.log('jojo');
if (this.selectedType === 'page' && this.selectedItem) { if (this.selectedType === 'page' && this.selectedItem) {
if (typeof this.selectedItem === 'function') { if (typeof this.selectedItem === 'function') {
console.log('jojo page')
return this.selectedItem(); return this.selectedItem();
} else { } else {
console.error('The selected item looks strange:'); console.error('The selected item looks strange:');
@ -135,7 +134,7 @@ export class WccDashboard extends LitElement {
console.log(warningTextArg); console.log(warningTextArg);
this.warning = warningTextArg; this.warning = warningTextArg;
setTimeout(() => { setTimeout(() => {
super.performUpdate(); this.scheduleUpdate();
}, 0); }, 0);
} }
} }
@ -147,7 +146,7 @@ export class WccDashboard extends LitElement {
async (routeInfo) => { async (routeInfo) => {
this.selectedType = routeInfo.params.itemType as TElementType; this.selectedType = routeInfo.params.itemType as TElementType;
this.selectedItemName = routeInfo.params.itemName; this.selectedItemName = routeInfo.params.itemName;
this.selectedViewport = routeInfo.params.viewport as TViewport; this.selectedViewport = routeInfo.params.viewport as breakpoints.TViewport;
this.selectedTheme = routeInfo.params.theme as TTheme; this.selectedTheme = routeInfo.params.theme as TTheme;
if (routeInfo.params.itemType === 'element') { if (routeInfo.params.itemType === 'element') {
this.selectedItem = this.elements[routeInfo.params.itemName]; this.selectedItem = this.elements[routeInfo.params.itemName];
@ -155,7 +154,6 @@ export class WccDashboard extends LitElement {
this.selectedItem = this.pages[routeInfo.params.itemName]; this.selectedItem = this.pages[routeInfo.params.itemName];
} }
const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup(); const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
domtoolsInstance.setVirtualViewport(routeInfo.params.viewport as TViewport);
this.selectedTheme === 'bright' this.selectedTheme === 'bright'
? domtoolsInstance.themeManager.goBright() ? domtoolsInstance.themeManager.goBright()
: domtoolsInstance.themeManager.goDark(); : domtoolsInstance.themeManager.goDark();

View File

@ -49,6 +49,8 @@ export class WccFrame extends DeesElement {
} }
.viewport { .viewport {
container-type: inline-size;
container-name: wccToolsViewport;
position: relative; position: relative;
${this.viewport !== 'desktop' ${this.viewport !== 'desktop'
? html` border-right: 1px dotted #444; border-left: 1px dotted #444; ` ? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `

View File

@ -1,12 +1,5 @@
import { import { DeesElement, property, html, customElement, TemplateResult, state } from '@designestate/dees-element';
LitElement, import { WccDashboard } from './wcc-dashboard.js';
property,
html,
customElement,
TemplateResult,
internalProperty,
} from 'lit-element';
import { WccDashboard } from './wcc-dashboard';
export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array'; export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array';
@ -20,12 +13,14 @@ export const setEnvironment = (envArg) => {
}; };
@customElement('wcc-properties') @customElement('wcc-properties')
export class WccProperties extends LitElement { export class WccProperties extends DeesElement {
@property() @property({
dashboardRef: WccDashboard; type: WccDashboard
})
public dashboardRef: WccDashboard;
@property() @property()
public selectedItem: TemplateResult | LitElement; public selectedItem: (() => TemplateResult) | DeesElement;
@property() @property()
public selectedViewport: TEnvironment = 'native'; public selectedViewport: TEnvironment = 'native';
@ -36,7 +31,7 @@ export class WccProperties extends LitElement {
@property() @property()
public warning: string = null; public warning: string = null;
@internalProperty() @state()
propertyContent: TemplateResult[] = []; propertyContent: TemplateResult[] = [];
public render(): TemplateResult { public render(): TemplateResult {
@ -73,7 +68,8 @@ export class WccProperties extends LitElement {
border: 1px solid #000; border: 1px solid #000;
} }
.properties input, .properties select { .properties input,
.properties select {
display: block; display: block;
width: 100%; width: 100%;
background: #333; background: #333;
@ -81,7 +77,6 @@ export class WccProperties extends LitElement {
color: #fff; color: #fff;
} }
.viewportSelector, .viewportSelector,
.themeSelector { .themeSelector {
user-select: none; user-select: none;
@ -137,13 +132,14 @@ export class WccProperties extends LitElement {
.warning { .warning {
position: absolute; position: absolute;
background: #800000; background: #222;
color: #CCC;
top: 0px; top: 0px;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
right: 0px; right: 520px;
text-align: center; text-align: center;
padding: 20px; padding: 35px;
font-size: 25px; font-size: 25px;
} }
</style> </style>
@ -220,7 +216,8 @@ export class WccProperties extends LitElement {
} }
public async createProperties() { public async createProperties() {
console.log('creating properties'); console.log('creating properties for:');
console.log(this.selectedItem);
const isEnumeration = (propertyArg): boolean => { const isEnumeration = (propertyArg): boolean => {
const keys = Object.keys(propertyArg.type); const keys = Object.keys(propertyArg.type);
const values = []; const values = [];
@ -240,7 +237,7 @@ export class WccProperties extends LitElement {
}; };
const getEnumValues = (propertyArg): any[] => { const getEnumValues = (propertyArg): any[] => {
console.log(JSON.stringify(propertyArg)); console.log(JSON.stringify(propertyArg));
const enumValues : any[] = []; const enumValues: any[] = [];
Object.keys(propertyArg.type).forEach((valueArg: string) => { Object.keys(propertyArg.type).forEach((valueArg: string) => {
enumValues.push(valueArg); enumValues.push(valueArg);
}); });
@ -258,24 +255,35 @@ export class WccProperties extends LitElement {
: 'Object'; : 'Object';
} }
}; };
if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) { if (this.selectedItem && (this.selectedItem as any).demo) {
console.log(`Got Dees-Element for property evaluation.`);
const anonItem: any = this.selectedItem; const anonItem: any = this.selectedItem;
if (!anonItem._classProperties) { if (!anonItem) {
return html`You have selected a page!`; this.warning = 'no element selected';
return;
} }
console.log(anonItem.elementProperties);
const wccFrame = await this.dashboardRef.wccFrame; const wccFrame = await this.dashboardRef.wccFrame;
let selectedElement: HTMLElement; let firstFoundInstantiatedElement: HTMLElement;
for (const element of Array.from(wccFrame.children)) { for (const element of Array.from(wccFrame.children)) {
if (element instanceof (this.selectedItem as any)) { if (element instanceof (this.selectedItem as any)) {
selectedElement = element as HTMLElement; firstFoundInstantiatedElement = element as HTMLElement;
break; break;
} }
} }
console.log(selectedElement); if (!firstFoundInstantiatedElement) {
const classProperties: Map<string, any> = anonItem._classProperties; this.warning = `no first instantiated element found for >>${anonItem.name}<<`;
return;
}
const classProperties: Map<string, any> = anonItem.elementProperties;
if (!classProperties) {
this.warning = `selected element >>${anonItem.name}<< does not expose element properties`;
return;
}
this.warning = null;
const propertyArray: TemplateResult[] = []; const propertyArray: TemplateResult[] = [];
for (const key of classProperties.keys()) { for (const key of classProperties.keys()) {
if (key === 'goBright' || key === 'domtools') { if (key === 'goBright' || key === 'domtools') {
continue; continue;
} }
const property = classProperties.get(key); const property = classProperties.get(key);
@ -283,44 +291,50 @@ export class WccProperties extends LitElement {
propertyArray.push( propertyArray.push(
html` html`
<div class="property"> <div class="property">
${key} / ${propertyTypeString}<br> ${key} / ${propertyTypeString}<br />
${(() => { ${(() => {
switch (propertyTypeString) { switch (propertyTypeString) {
case 'Boolean': case 'Boolean':
return html`<input return html`<input
type="checkbox" type="checkbox"
?checked=${selectedElement[key]} ?checked=${firstFoundInstantiatedElement[key]}
@input="${(eventArg: any) => { @input="${(eventArg: any) => {
selectedElement[key] = eventArg.target.checked; firstFoundInstantiatedElement[key] = eventArg.target.checked;
}}" }}"
/>`; />`;
case 'String': case 'String':
return html`<input return html`<input
type="text" type="text"
value=${selectedElement[key]} value=${firstFoundInstantiatedElement[key]}
@input="${(eventArg: any) => { @input="${(eventArg: any) => {
selectedElement[key] = eventArg.target.value; firstFoundInstantiatedElement[key] = eventArg.target.value;
}}" }}"
/>`; />`;
case 'Number': case 'Number':
return html`<input return html`<input
type="number" type="number"
value=${selectedElement[key]} value=${firstFoundInstantiatedElement[key]}
@input="${(eventArg: any) => { @input="${(eventArg: any) => {
selectedElement[key] = eventArg.target.value; firstFoundInstantiatedElement[key] = eventArg.target.value;
}}" }}"
/>`; />`;
case 'Enum': case 'Enum':
const enumValues: any[] = getEnumValues(property); const enumValues: any[] = getEnumValues(property);
return html`<select return html`<select
@change="${(eventArg:any)=>{ @change="${(eventArg: any) => {
selectedElement[key]=eventArg.target.value; firstFoundInstantiatedElement[key] = eventArg.target.value;
}}"> }}"
${enumValues.map(valueArg => { >
return html` ${enumValues.map((valueArg) => {
<option ?selected=${valueArg === selectedElement[key] ? true : false} name="${valueArg}">${valueArg}</option> return html`
`; <option
})} ?selected=${valueArg === firstFoundInstantiatedElement[key] ? true : false}
name="${valueArg}"
>
${valueArg}
</option>
`;
})}
</select>`; </select>`;
} }
})()} })()}
@ -330,6 +344,8 @@ export class WccProperties extends LitElement {
} }
this.propertyContent = propertyArray; this.propertyContent = propertyArray;
} else { } else {
console.log(`Cannot extract properties of ${(this.selectedItem as any)?.name}`);
this.warning = `You selected a page.`;
return null; return null;
} }
} }
@ -345,9 +361,9 @@ export class WccProperties extends LitElement {
this.dashboardRef.buildUrl(); this.dashboardRef.buildUrl();
} }
public async performUpdate() { public async scheduleUpdate() {
await this.createProperties(); await this.createProperties();
super.performUpdate(); super.scheduleUpdate();
} }
public selectViewport(viewport: TEnvironment) { public selectViewport(viewport: TEnvironment) {

View File

@ -1,16 +1,16 @@
import * as plugins from '../wcctools.plugins'; import * as plugins from '../wcctools.plugins.js';
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element'; import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
import { WccDashboard } from './wcc-dashboard'; import { WccDashboard } from './wcc-dashboard.js';
export type TElementType = 'element' | 'page'; export type TElementType = 'element' | 'page';
@customElement('wcc-sidebar') @customElement('wcc-sidebar')
export class WccSidebar extends LitElement { export class WccSidebar extends DeesElement {
@property({type: Array}) @property({type: Array})
public websites: string[] = []; public websites: string[] = [];
@property({ attribute: false }) @property({ attribute: false })
public selectedItem: LitElement | (() => TemplateResult); public selectedItem: DeesElement | (() => TemplateResult);
@property({ attribute: false }) @property({ attribute: false })
public selectedType: TElementType; public selectedType: TElementType;
@ -150,7 +150,7 @@ export class WccSidebar extends LitElement {
`; `;
} }
public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | LitElement) { public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | DeesElement) {
console.log('selected item'); console.log('selected item');
console.log(itemNameArg); console.log(itemNameArg);
console.log(itemArg); console.log(itemArg);

View File

@ -1,4 +1,4 @@
import { WccDashboard } from './elements/wcc-dashboard'; import { WccDashboard } from './elements/wcc-dashboard.js';
import { LitElement, TemplateResult } from 'lit-element'; import { LitElement, TemplateResult } from 'lit-element';
const setupWccTools = (elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: () => TemplateResult }) => { const setupWccTools = (elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: () => TemplateResult }) => {