Compare commits
36 Commits
Author | SHA1 | Date | |
---|---|---|---|
6917145b58 | |||
2e2ad98ed8 | |||
68375a5e58 | |||
5876225b39 | |||
342ac96429 | |||
85a472fe1c | |||
4fecae83dc | |||
b7a666ac66 | |||
e559ed072c | |||
c44d9e7365 | |||
53f53be991 | |||
9dec6e25b5 | |||
03fa323eb9 | |||
e0344bb513 | |||
a6f583b8c4 | |||
60e173b7be | |||
d51027d4be | |||
2efa465930 | |||
19081caacd | |||
c42e8b8bef | |||
750e8cef32 | |||
c0d057949d | |||
82a5283edd | |||
abb20def4b | |||
dd71751864 | |||
c4562c797e | |||
643317811b | |||
3667070094 | |||
a86ef5bfce | |||
77d058f403 | |||
1639a57bd1 | |||
b546d1a2c5 | |||
5639c152a2 | |||
05a093f080 | |||
08156b2d47 | |||
0b119c481c |
@ -12,6 +12,9 @@ stages:
|
||||
- release
|
||||
- metadata
|
||||
|
||||
before_script:
|
||||
- npm install -g @shipzone/npmci
|
||||
|
||||
# ====================
|
||||
# security stage
|
||||
# ====================
|
||||
@ -36,6 +39,7 @@ auditProductionDependencies:
|
||||
- npmci command npm audit --audit-level=high --only=prod --production
|
||||
tags:
|
||||
- docker
|
||||
allow_failure: true
|
||||
|
||||
auditDevDependencies:
|
||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||
@ -96,10 +100,9 @@ codequality:
|
||||
only:
|
||||
- tags
|
||||
script:
|
||||
- npmci command npm install -g tslint typescript
|
||||
- npmci command npm install -g typescript
|
||||
- npmci npm prepare
|
||||
- npmci npm install
|
||||
- npmci command "tslint -c tslint.json ./ts/**/*.ts"
|
||||
tags:
|
||||
- lossless
|
||||
- docker
|
||||
|
24
.vscode/launch.json
vendored
24
.vscode/launch.json
vendored
@ -2,28 +2,10 @@
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "current file",
|
||||
"type": "node",
|
||||
"command": "npm test",
|
||||
"name": "Run npm test",
|
||||
"request": "launch",
|
||||
"args": [
|
||||
"${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"
|
||||
"type": "node-terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
@ -17,7 +17,7 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="./index.ts"></script>
|
||||
<script type="module" src="/bundle.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
|
@ -1,10 +1,10 @@
|
||||
// dees tools
|
||||
import * as deesWccTools from '../ts_web';
|
||||
import * as deesWccTools from '../ts_web/index.js';
|
||||
import * as deesDomTools from '@designestate/dees-domtools';
|
||||
|
||||
// elements and pages
|
||||
import * as elements from '../test/elements';
|
||||
import * as pages from '../test/pages';
|
||||
import * as elements from '../test/elements/index.js';
|
||||
import * as pages from '../test/pages/index.js';
|
||||
|
||||
deesWccTools.setupWccTools(elements as any, pages);
|
||||
deesDomTools.elementBasic.setup();
|
||||
|
@ -5,7 +5,7 @@
|
||||
"githost": "gitlab.com",
|
||||
"gitscope": "designestate",
|
||||
"gitrepo": "dees-wcctools",
|
||||
"shortDescription": "wcc tools for creating element catalogues",
|
||||
"description": "wcc tools for creating element catalogues",
|
||||
"npmPackagename": "@designestate/dees-wcctools",
|
||||
"license": "MIT",
|
||||
"projectDomain": "design.estate"
|
||||
|
22257
package-lock.json
generated
22257
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
24
package.json
24
package.json
@ -1,31 +1,29 @@
|
||||
{
|
||||
"name": "@designestate/dees-wcctools",
|
||||
"version": "1.0.55",
|
||||
"version": "1.0.73",
|
||||
"private": false,
|
||||
"description": "wcc tools for creating element catalogues",
|
||||
"main": "dist_ts_web/index.js",
|
||||
"typings": "dist_ts_web/index.d.ts",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"test": "(npm run build)",
|
||||
"build": "(tsbuild custom ts_web --web && tsbundle element)",
|
||||
"build": "(tsbuild element --web --allowimplicitany --skiplibcheck && tsbundle element)",
|
||||
"watch": "tswatch element"
|
||||
},
|
||||
"author": "Lossless GmbH",
|
||||
"license": "UNLICENSED",
|
||||
"dependencies": {
|
||||
"@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.100",
|
||||
"lit-element": "^2.4.0",
|
||||
"lit-html": "^1.3.0",
|
||||
"typescript": "^4.2.3"
|
||||
"@designestate/dees-domtools": "^2.0.1",
|
||||
"@designestate/dees-element": "^2.0.4",
|
||||
"@gitzone/tsrun": "^1.2.31",
|
||||
"@pushrocks/smartdelay": "^2.0.13",
|
||||
"@pushrocks/smartexpress": "^4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gitzone/tsbuild": "^2.1.25",
|
||||
"@gitzone/tsbundle": "^1.0.80",
|
||||
"@gitzone/tswatch": "^1.0.52",
|
||||
"@gitzone/tsbuild": "^2.1.61",
|
||||
"@gitzone/tsbundle": "^1.0.101",
|
||||
"@gitzone/tswatch": "^1.0.73",
|
||||
"@pushrocks/projectinfo": "^4.0.5",
|
||||
"tslint": "^6.1.3",
|
||||
"tslint-config-prettier": "^1.17.0"
|
||||
|
@ -1 +1 @@
|
||||
export * from './test-demoelement';
|
||||
export * from './test-demoelement.js';
|
||||
|
@ -4,6 +4,8 @@ import {
|
||||
TemplateResult,
|
||||
html,
|
||||
property,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@designestate/dees-element';
|
||||
|
||||
import * as domtools from '@designestate/dees-domtools';
|
||||
@ -16,7 +18,18 @@ enum ETestEnum {
|
||||
|
||||
@customElement('test-demoelement')
|
||||
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({
|
||||
type: Boolean,
|
||||
@ -38,41 +51,61 @@ export class TestDemoelement extends DeesElement {
|
||||
})
|
||||
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() {
|
||||
return html`
|
||||
<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>
|
||||
<style></style>
|
||||
<div class="maincontainer"><slot>This is a demo element</slot></div>
|
||||
<div class="themeindicator">
|
||||
You have selected the ${this.goBright ? 'bright' : 'dark'} theme.
|
||||
<pre>
|
||||
demoBoolean is <b>"${this.demoBoolean}"</b>
|
||||
demoBoolean is <b>${this.demoBoolean}</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>
|
||||
</pre>
|
||||
</pre
|
||||
>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
@ -1,3 +1,3 @@
|
||||
import * as wcctools from '../ts_web/index';
|
||||
import * as elements from './elements';
|
||||
import * as wcctools from '../ts_web/index.js';
|
||||
import * as elements from './elements/index.js';
|
||||
wcctools.setupWccTools(elements as any, {});
|
||||
|
@ -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 { WccDefaultElement } from './wcc-defaultelement';
|
||||
import * as plugins from '../wcctools.plugins.js';
|
||||
|
||||
// wcc tools
|
||||
import './wcc-frame';
|
||||
import './wcc-sidebar';
|
||||
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';
|
||||
import './wcc-frame.js';
|
||||
import './wcc-sidebar.js';
|
||||
import './wcc-properties.js';
|
||||
import { TTheme } from './wcc-properties.js';
|
||||
import { TElementType } from './wcc-sidebar.js';
|
||||
import { breakpoints } from '@designestate/dees-domtools';
|
||||
import { WccFrame } from './wcc-frame.js';
|
||||
|
||||
@customElement('wcc-dashboard')
|
||||
export class WccDashboard extends LitElement {
|
||||
public domtools: plugins.deesDomtools.DomTools;
|
||||
export class WccDashboard extends DeesElement {
|
||||
|
||||
@property()
|
||||
public selectedType: TElementType;
|
||||
@ -24,7 +21,7 @@ export class WccDashboard extends LitElement {
|
||||
public selectedItemName: string;
|
||||
|
||||
@property()
|
||||
public selectedItem: (() => TemplateResult) | LitElement;
|
||||
public selectedItem: (() => TemplateResult) | DeesElement;
|
||||
|
||||
@property()
|
||||
public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
|
||||
@ -36,7 +33,7 @@ export class WccDashboard extends LitElement {
|
||||
public pages: { [key: string]: () => TemplateResult } = {};
|
||||
|
||||
@property()
|
||||
public elements: { [key: string]: LitElement } = {};
|
||||
public elements: { [key: string]: DeesElement } = {};
|
||||
|
||||
@property()
|
||||
public warning: string = null;
|
||||
@ -45,7 +42,7 @@ export class WccDashboard extends LitElement {
|
||||
public wccFrame: Promise<WccFrame>;
|
||||
|
||||
constructor(
|
||||
elementsArg?: { [key: string]: LitElement },
|
||||
elementsArg?: { [key: string]: DeesElement },
|
||||
pagesArg?: { [key: string]: () => TemplateResult }
|
||||
) {
|
||||
super();
|
||||
@ -94,7 +91,7 @@ export class WccDashboard extends LitElement {
|
||||
.selectedTheme=${this.selectedTheme}
|
||||
@selectedViewport=${(eventArg) => {
|
||||
this.selectedViewport = eventArg.detail;
|
||||
this.performUpdate();
|
||||
this.scheduleUpdate();
|
||||
}}
|
||||
@selectedTheme=${(eventArg) => {
|
||||
this.selectedTheme = eventArg.detail;
|
||||
@ -104,13 +101,14 @@ export class WccDashboard extends LitElement {
|
||||
${(() => {
|
||||
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(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.`);
|
||||
@ -135,7 +133,7 @@ export class WccDashboard extends LitElement {
|
||||
console.log(warningTextArg);
|
||||
this.warning = warningTextArg;
|
||||
setTimeout(() => {
|
||||
super.performUpdate();
|
||||
this.scheduleUpdate();
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
@ -147,7 +145,7 @@ export class WccDashboard extends LitElement {
|
||||
async (routeInfo) => {
|
||||
this.selectedType = routeInfo.params.itemType as TElementType;
|
||||
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;
|
||||
if (routeInfo.params.itemType === 'element') {
|
||||
this.selectedItem = this.elements[routeInfo.params.itemName];
|
||||
@ -155,7 +153,6 @@ export class WccDashboard extends LitElement {
|
||||
this.selectedItem = this.pages[routeInfo.params.itemName];
|
||||
}
|
||||
const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
|
||||
domtoolsInstance.setVirtualViewport(routeInfo.params.viewport as TViewport);
|
||||
this.selectedTheme === 'bright'
|
||||
? domtoolsInstance.themeManager.goBright()
|
||||
: domtoolsInstance.themeManager.goDark();
|
||||
|
@ -49,6 +49,8 @@ export class WccFrame extends DeesElement {
|
||||
}
|
||||
|
||||
.viewport {
|
||||
container-type: inline-size;
|
||||
container-name: wccToolsViewport;
|
||||
position: relative;
|
||||
${this.viewport !== 'desktop'
|
||||
? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
|
||||
|
@ -1,12 +1,5 @@
|
||||
import {
|
||||
LitElement,
|
||||
property,
|
||||
html,
|
||||
customElement,
|
||||
TemplateResult,
|
||||
internalProperty,
|
||||
} from 'lit-element';
|
||||
import { WccDashboard } from './wcc-dashboard';
|
||||
import { DeesElement, property, html, customElement, TemplateResult, state } from '@designestate/dees-element';
|
||||
import { WccDashboard } from './wcc-dashboard.js';
|
||||
|
||||
export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array';
|
||||
|
||||
@ -20,12 +13,14 @@ export const setEnvironment = (envArg) => {
|
||||
};
|
||||
|
||||
@customElement('wcc-properties')
|
||||
export class WccProperties extends LitElement {
|
||||
@property()
|
||||
dashboardRef: WccDashboard;
|
||||
export class WccProperties extends DeesElement {
|
||||
@property({
|
||||
type: WccDashboard
|
||||
})
|
||||
public dashboardRef: WccDashboard;
|
||||
|
||||
@property()
|
||||
public selectedItem: TemplateResult | LitElement;
|
||||
public selectedItem: (() => TemplateResult) | DeesElement;
|
||||
|
||||
@property()
|
||||
public selectedViewport: TEnvironment = 'native';
|
||||
@ -36,7 +31,7 @@ export class WccProperties extends LitElement {
|
||||
@property()
|
||||
public warning: string = null;
|
||||
|
||||
@internalProperty()
|
||||
@state()
|
||||
propertyContent: TemplateResult[] = [];
|
||||
|
||||
public render(): TemplateResult {
|
||||
@ -73,7 +68,8 @@ export class WccProperties extends LitElement {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.properties input, .properties select {
|
||||
.properties input,
|
||||
.properties select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: #333;
|
||||
@ -81,7 +77,6 @@ export class WccProperties extends LitElement {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.viewportSelector,
|
||||
.themeSelector {
|
||||
user-select: none;
|
||||
@ -137,13 +132,14 @@ export class WccProperties extends LitElement {
|
||||
|
||||
.warning {
|
||||
position: absolute;
|
||||
background: #800000;
|
||||
background: #222;
|
||||
color: #CCC;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
right: 520px;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
padding: 35px;
|
||||
font-size: 25px;
|
||||
}
|
||||
</style>
|
||||
@ -220,7 +216,8 @@ export class WccProperties extends LitElement {
|
||||
}
|
||||
|
||||
public async createProperties() {
|
||||
console.log('creating properties');
|
||||
console.log('creating properties for:');
|
||||
console.log(this.selectedItem);
|
||||
const isEnumeration = (propertyArg): boolean => {
|
||||
const keys = Object.keys(propertyArg.type);
|
||||
const values = [];
|
||||
@ -240,7 +237,7 @@ export class WccProperties extends LitElement {
|
||||
};
|
||||
const getEnumValues = (propertyArg): any[] => {
|
||||
console.log(JSON.stringify(propertyArg));
|
||||
const enumValues : any[] = [];
|
||||
const enumValues: any[] = [];
|
||||
Object.keys(propertyArg.type).forEach((valueArg: string) => {
|
||||
enumValues.push(valueArg);
|
||||
});
|
||||
@ -258,24 +255,35 @@ export class WccProperties extends LitElement {
|
||||
: '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;
|
||||
if (!anonItem._classProperties) {
|
||||
return html`You have selected a page!`;
|
||||
if (!anonItem) {
|
||||
this.warning = 'no element selected';
|
||||
return;
|
||||
}
|
||||
console.log(anonItem.elementProperties);
|
||||
const wccFrame = await this.dashboardRef.wccFrame;
|
||||
let selectedElement: HTMLElement;
|
||||
let firstFoundInstantiatedElement: HTMLElement;
|
||||
for (const element of Array.from(wccFrame.children)) {
|
||||
if (element instanceof (this.selectedItem as any)) {
|
||||
selectedElement = element as HTMLElement;
|
||||
firstFoundInstantiatedElement = element as HTMLElement;
|
||||
break;
|
||||
}
|
||||
}
|
||||
console.log(selectedElement);
|
||||
const classProperties: Map<string, any> = anonItem._classProperties;
|
||||
if (!firstFoundInstantiatedElement) {
|
||||
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[] = [];
|
||||
for (const key of classProperties.keys()) {
|
||||
if (key === 'goBright' || key === 'domtools') {
|
||||
if (key === 'goBright' || key === 'domtools') {
|
||||
continue;
|
||||
}
|
||||
const property = classProperties.get(key);
|
||||
@ -283,44 +291,50 @@ export class WccProperties extends LitElement {
|
||||
propertyArray.push(
|
||||
html`
|
||||
<div class="property">
|
||||
${key} / ${propertyTypeString}<br>
|
||||
${key} / ${propertyTypeString}<br />
|
||||
${(() => {
|
||||
switch (propertyTypeString) {
|
||||
case 'Boolean':
|
||||
return html`<input
|
||||
type="checkbox"
|
||||
?checked=${selectedElement[key]}
|
||||
?checked=${firstFoundInstantiatedElement[key]}
|
||||
@input="${(eventArg: any) => {
|
||||
selectedElement[key] = eventArg.target.checked;
|
||||
firstFoundInstantiatedElement[key] = eventArg.target.checked;
|
||||
}}"
|
||||
/>`;
|
||||
case 'String':
|
||||
return html`<input
|
||||
type="text"
|
||||
value=${selectedElement[key]}
|
||||
value=${firstFoundInstantiatedElement[key]}
|
||||
@input="${(eventArg: any) => {
|
||||
selectedElement[key] = eventArg.target.value;
|
||||
firstFoundInstantiatedElement[key] = eventArg.target.value;
|
||||
}}"
|
||||
/>`;
|
||||
case 'Number':
|
||||
return html`<input
|
||||
type="number"
|
||||
value=${selectedElement[key]}
|
||||
value=${firstFoundInstantiatedElement[key]}
|
||||
@input="${(eventArg: any) => {
|
||||
selectedElement[key] = eventArg.target.value;
|
||||
firstFoundInstantiatedElement[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>
|
||||
`;
|
||||
})}
|
||||
@change="${(eventArg: any) => {
|
||||
firstFoundInstantiatedElement[key] = eventArg.target.value;
|
||||
}}"
|
||||
>
|
||||
${enumValues.map((valueArg) => {
|
||||
return html`
|
||||
<option
|
||||
?selected=${valueArg === firstFoundInstantiatedElement[key] ? true : false}
|
||||
name="${valueArg}"
|
||||
>
|
||||
${valueArg}
|
||||
</option>
|
||||
`;
|
||||
})}
|
||||
</select>`;
|
||||
}
|
||||
})()}
|
||||
@ -330,6 +344,8 @@ export class WccProperties extends LitElement {
|
||||
}
|
||||
this.propertyContent = propertyArray;
|
||||
} else {
|
||||
console.log(`Cannot extract properties of ${(this.selectedItem as any)?.name}`);
|
||||
this.warning = `You selected a page.`;
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@ -345,9 +361,9 @@ export class WccProperties extends LitElement {
|
||||
this.dashboardRef.buildUrl();
|
||||
}
|
||||
|
||||
public async performUpdate() {
|
||||
public async scheduleUpdate() {
|
||||
await this.createProperties();
|
||||
super.performUpdate();
|
||||
super.scheduleUpdate();
|
||||
}
|
||||
|
||||
public selectViewport(viewport: TEnvironment) {
|
||||
|
@ -1,16 +1,16 @@
|
||||
import * as plugins from '../wcctools.plugins';
|
||||
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
||||
import { WccDashboard } from './wcc-dashboard';
|
||||
import * as plugins from '../wcctools.plugins.js';
|
||||
import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
|
||||
import { WccDashboard } from './wcc-dashboard.js';
|
||||
|
||||
export type TElementType = 'element' | 'page';
|
||||
|
||||
@customElement('wcc-sidebar')
|
||||
export class WccSidebar extends LitElement {
|
||||
export class WccSidebar extends DeesElement {
|
||||
@property({type: Array})
|
||||
public websites: string[] = [];
|
||||
|
||||
@property({ attribute: false })
|
||||
public selectedItem: LitElement | (() => TemplateResult);
|
||||
public selectedItem: DeesElement | (() => TemplateResult);
|
||||
|
||||
@property({ attribute: false })
|
||||
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(itemNameArg);
|
||||
console.log(itemArg);
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { WccDashboard } from './elements/wcc-dashboard';
|
||||
import { WccDashboard } from './elements/wcc-dashboard.js';
|
||||
import { LitElement, TemplateResult } from 'lit-element';
|
||||
|
||||
const setupWccTools = (elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: () => TemplateResult }) => {
|
||||
|
Reference in New Issue
Block a user