Compare commits

...

60 Commits

Author SHA1 Message Date
d1fe66f1ba 1.0.75 2023-01-07 14:05:26 +01:00
8ea7c53154 fix(core): update 2023-01-07 14:05:25 +01:00
ea0858fd27 1.0.74 2022-04-14 16:56:04 +02:00
03c00919df fix(core): update 2022-04-14 16:56:04 +02:00
6917145b58 1.0.73 2022-03-24 18:30:55 +01:00
2e2ad98ed8 fix(core): update 2022-03-24 18:30:54 +01:00
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
bf4ef900f8 1.0.55 2021-04-01 19:09:57 +00:00
a812a12c10 fix(core): update 2021-04-01 19:09:57 +00:00
71e885f3e4 1.0.54 2020-12-09 18:35:49 +00:00
57bc2b76bc fix(core): update 2020-12-09 18:35:49 +00:00
f21a20b652 1.0.53 2020-12-09 18:32:12 +00:00
91b9c424d8 fix(core): update 2020-12-09 18:32:11 +00:00
5cf4752ad9 1.0.52 2020-12-07 04:20:30 +00:00
5f347153fc fix(core): update 2020-12-07 04:20:29 +00:00
e1aebc7db8 1.0.51 2020-12-07 04:07:32 +00:00
97b88d965c fix(core): update 2020-12-07 04:07:32 +00:00
37d343da03 1.0.50 2020-12-07 04:07:03 +00:00
47cb726716 fix(core): update 2020-12-07 04:07:03 +00:00
4220131bc4 1.0.49 2020-11-30 00:50:48 +00:00
edee4fa446 fix(core): update 2020-11-30 00:50:47 +00:00
c2a0fd26e2 1.0.48 2020-11-30 00:45:42 +00:00
693c8ca3f0 fix(core): update 2020-11-30 00:45:41 +00:00
ca58c55a37 1.0.47 2020-11-27 17:09:34 +00:00
79d2be98c5 fix(core): update 2020-11-27 17:09:33 +00:00
7971f48963 1.0.46 2020-11-27 16:49:58 +00:00
a15629a960 fix(core): update 2020-11-27 16:49:57 +00:00
23 changed files with 3269 additions and 10888 deletions

View File

@ -12,40 +12,36 @@ stages:
- release
- metadata
before_script:
- pnpm install -g pnpm
- pnpm install -g @shipzone/npmci
- npmci npm prepare
# ====================
# security stage
# ====================
# ====================
# security stage
# ====================
mirror:
stage: security
script:
- npmci git mirror
only:
- tags
tags:
- lossless
- docker
- notpriv
auditProductionDependencies:
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
stage: security
script:
- npmci npm prepare
- npmci command npm install --production --ignore-scripts
- npmci command npm config set registry https://registry.npmjs.org
- npmci command npm audit --audit-level=high --only=prod --production
- npmci command npm config set registry https://registry.npmjs.org
- npmci command pnpm audit --audit-level=high --prod
tags:
- lossless
- docker
allow_failure: true
auditDevDependencies:
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
stage: security
script:
- npmci npm prepare
- npmci command npm install --ignore-scripts
- npmci command npm config set registry https://registry.npmjs.org
- npmci command npm audit --audit-level=high --only=dev
- npmci command pnpm audit --audit-level=high --dev
tags:
- lossless
- docker
allow_failure: true
@ -56,7 +52,6 @@ auditDevDependencies:
testStable:
stage: test
script:
- npmci npm prepare
- npmci node install stable
- npmci npm install
- npmci npm test
@ -67,10 +62,9 @@ testStable:
testBuild:
stage: test
script:
- npmci npm prepare
- npmci node install stable
- npmci npm install
- npmci command npm run build
- npmci npm build
coverage: /\d+.?\d+?\%\s*coverage/
tags:
- docker
@ -96,10 +90,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
@ -119,11 +112,9 @@ trigger:
pages:
stage: metadata
script:
- npmci node install lts
- npmci command npm install -g @gitzone/tsdoc
- npmci npm prepare
- npmci node install stable
- npmci npm install
- npmci command tsdoc
- npmci command npm run buildDocs
tags:
- lossless
- docker

24
.vscode/launch.json vendored
View File

@ -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"
}
]
}

View File

@ -1,5 +1,5 @@
<!--gitzone element-->
<!-- made by Lossless GmbH -->
<!-- made by Task Venture Capital GmbH -->
<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
<html lang="en">
<head>
@ -10,6 +10,12 @@
/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="preconnect" href="https://rsms.me/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<style>
body {
margin: 0px;
@ -17,7 +23,7 @@
}
</style>
<script src="./index.ts"></script>
<script type="module" src="/bundle.js"></script>
</head>
<body>
</body>

View File

@ -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();

View File

@ -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"

10567
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,34 +1,32 @@
{
"name": "@designestate/dees-wcctools",
"version": "1.0.45",
"version": "1.0.75",
"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)",
"watch": "tswatch element"
"build": "(tsbuild element --web --allowimplicitany && tsbundle element)",
"watch": "tswatch element",
"buildDocs": "tsdoc"
},
"author": "Lossless GmbH",
"license": "UNLICENSED",
"dependencies": {
"@designestate/dees-domtools": "^1.0.74",
"@designestate/dees-element": "^1.0.6",
"@gitzone/tsrun": "^1.2.12",
"@pushrocks/smartdelay": "^2.0.10",
"@pushrocks/smartexpress": "^3.0.97",
"lit-element": "^2.4.0",
"lit-html": "^1.3.0",
"typescript": "^4.1.2"
"@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.4",
"lit": "^2.5.0"
},
"devDependencies": {
"@gitzone/tsbuild": "^2.1.25",
"@gitzone/tsbundle": "^1.0.78",
"@gitzone/tswatch": "^1.0.50",
"@pushrocks/projectinfo": "^4.0.5",
"tslint": "^6.1.3",
"tslint-config-prettier": "^1.17.0"
"@gitzone/tsbuild": "^2.1.61",
"@gitzone/tsbundle": "^2.0.7",
"@gitzone/tswatch": "^2.0.5",
"@pushrocks/projectinfo": "^5.0.1"
},
"files": [
"ts/**/*",

2744
pnpm-lock.yaml generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -21,7 +21,6 @@ Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](htt
PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@designestate/dees-wcctools)](https://lossless.cloud)
PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@designestate/dees-wcctools)](https://lossless.cloud)
BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@designestate/dees-wcctools)](https://lossless.cloud)
Platform support | [![Supports Windows 10](https://badgen.net/badge/supports%20Windows%2010/yes/green?icon=windows)](https://lossless.cloud) [![Supports Mac OS X](https://badgen.net/badge/supports%20Mac%20OS%20X/yes/green?icon=apple)](https://lossless.cloud)
## Usage
@ -35,7 +34,6 @@ We are always happy for code contributions. If you are not the code contributing
For further information read the linked docs at the top of this readme.
> MIT licensed | **&copy;** [Lossless GmbH](https://lossless.gmbh)
## Legal
> MIT licensed | **&copy;** [Task Venture Capital GmbH](https://task.vc)
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
[![repo-footer](https://lossless.gitlab.io/publicrelations/repofooter.svg)](https://maintainedby.lossless.com)

View File

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

View File

@ -1,37 +1,111 @@
import { DeesElement, customElement, TemplateResult, html } from '@designestate/dees-element';
import {
DeesElement,
customElement,
TemplateResult,
html,
property,
css,
cssManager,
} 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>`;
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,
})
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;
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;
}
`)}
</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;
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>
`;
}

View File

@ -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, {});

View File

@ -0,0 +1,8 @@
/**
* autocreated commitinfo by @pushrocks/commitinfo
*/
export const commitinfo = {
name: '@designestate/dees-wcctools',
version: '1.0.75',
description: 'wcc tools for creating element catalogues'
}

View File

@ -1,20 +1,18 @@
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
import { DeesElement, property, html, customElement, TemplateResult, queryAsync, render, domtools } 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 './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;
@ -23,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';
@ -35,13 +33,16 @@ 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;
@queryAsync('wcc-frame')
public wccFrame: Promise<WccFrame>;
constructor(
elementsArg?: { [key: string]: LitElement },
elementsArg?: { [key: string]: DeesElement },
pagesArg?: { [key: string]: () => TemplateResult }
) {
super();
@ -90,38 +91,13 @@ export class WccDashboard extends LitElement {
.selectedTheme=${this.selectedTheme}
@selectedViewport=${(eventArg) => {
this.selectedViewport = eventArg.detail;
this.performUpdate();
this.scheduleUpdate();
}}
@selectedTheme=${(eventArg) => {
this.selectedTheme = eventArg.detail;
}}
></wcc-properties>
<wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
${(() => {
if (this.selectedType === 'page' && this.selectedItem) {
if (typeof this.selectedItem === 'function') {
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);
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>
`;
}
@ -131,54 +107,71 @@ export class WccDashboard extends LitElement {
console.log(warningTextArg);
this.warning = warningTextArg;
setTimeout(() => {
super.performUpdate();
this.scheduleUpdate();
}, 0);
}
}
public async firstUpdated() {
this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
this.domtools.router.on('/:itemType/:itemName/:viewport/:theme', async (routeInfo) => {
if (routeInfo.params.itemType === 'element') {
this.selectedType = 'element';
this.selectedItem = this.elements[routeInfo.params.itemName];
} else if (routeInfo.params.itemType === 'page') {
this.selectedType = 'page';
this.selectedItem = this.pages[routeInfo.params.itemName];
this.domtools.router.on(
'/wcctools-route/:itemType/:itemName/:viewport/:theme',
async (routeInfo) => {
this.selectedType = routeInfo.params.itemType as TElementType;
this.selectedItemName = routeInfo.params.itemName;
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];
} else if (routeInfo.params.itemType === 'page') {
this.selectedItem = this.pages[routeInfo.params.itemName];
}
const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
this.selectedTheme === 'bright'
? domtoolsInstance.themeManager.goBright()
: domtoolsInstance.themeManager.goDark();
}
const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
domtoolsInstance.setVirtualViewport(routeInfo.params.viewport as TViewport);
this.selectedViewport = routeInfo.params.viewport as TViewport;
this.selectedTheme = routeInfo.params.theme as TTheme;
domtoolsInstance.themeManager.goBrightBoolean = this.selectedTheme === 'bright';
});
);
}
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() {
this.domtools.router.pushUrl(
`/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${
this.selectedTheme
}`
`/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`
);
}
}

View File

@ -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!
`;
}
}

View File

@ -1,25 +1,45 @@
import { LitElement, property, html, customElement, TemplateResult } from 'lit-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 LitElement {
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;
background: #222;
position: absolute;
left: 200px;
right: 0px;
top: 0px;
bottom: 100px;
overflow-y: auto;
overflow-x: auto;
${(() => {
switch (this.viewport) {
case 'desktop':
@ -45,29 +65,51 @@ export class WccFrame extends LitElement {
}px;
`;
}
})()}
})()}
}
.viewport {
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:
radial-gradient(#444444 3px, transparent 4px),
radial-gradient(#444444 3px, transparent 4px),
linear-gradient(#222222 4px, transparent 0),
linear-gradient(45deg, transparent 74px, transparent 75px, #444444 75px, #444444 76px, transparent 77px, transparent 109px),
linear-gradient(-45deg, transparent 75px, transparent 76px, #444444 76px, #444444 77px, transparent 78px, transparent 109px),
#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;
${
this.goBright ? `
radial-gradient(#CCCCCC 3px, transparent 4px),
radial-gradient(#CCCCCC 3px, transparent 4px),
linear-gradient(#eeeeee 4px, transparent 0),
linear-gradient(45deg, transparent 74px, transparent 75px, #CCCCCC 75px, #CCCCCC 76px, transparent 77px, transparent 109px),
linear-gradient(-45deg, transparent 75px, transparent 76px, #CCCCCC 76px, #CCCCCC 77px, transparent 78px, transparent 109px),
#eeeeee;
background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
` : `
radial-gradient(#444444 3px, transparent 4px),
radial-gradient(#444444 3px, transparent 4px),
linear-gradient(#222222 4px, transparent 0),
linear-gradient(45deg, transparent 74px, transparent 75px, #444444 75px, #444444 76px, transparent 77px, transparent 109px),
linear-gradient(-45deg, transparent 75px, transparent 76px, #444444 76px, #444444 77px, transparent 78px, transparent 109px),
#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>
`;
}
public async getDisplayedInstance() {
await this.updateComplete;
const slottedContent = this.children;
console.log(slottedContent);
}
public async getViewportElement(): Promise<HTMLElement> {
return this.shadowRoot.querySelector('.viewport') as HTMLElement;
}
}

View File

@ -1,5 +1,7 @@
import { LitElement, property, html, customElement, TemplateResult } 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';
export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
export type TTheme = 'bright' | 'dark';
@ -11,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';
@ -27,9 +31,11 @@ export class WccProperties extends LitElement {
@property()
public warning: string = null;
@state()
propertyContent: TemplateResult[] = [];
public render(): TemplateResult {
return html`
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<style>
:host {
font-family: 'Roboto', sans-serif;
@ -55,13 +61,39 @@ export class WccProperties extends LitElement {
grid-template-columns: 33% 33% 33%;
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
}
.properties .property {
padding: 5px;
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;
border-right: 1px solid #999;
}
.selectorButtons2 {
@ -114,35 +146,21 @@ 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>
<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>
@ -153,7 +171,7 @@ export class WccProperties extends LitElement {
this.selectTheme('dark');
}}
>
Dark<br /><i class="material-icons">brightness_3</i>
Dark<br /><i class="material-symbols-outlined">brightness_3</i>
</div>
<div
class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"
@ -161,7 +179,7 @@ export class WccProperties extends LitElement {
this.selectTheme('bright');
}}
>
Bright<br /><i class="material-icons">flare</i>
Bright<br /><i class="material-symbols-outlined">flare</i>
</div>
</div>
</div>
@ -174,7 +192,7 @@ export class WccProperties extends LitElement {
this.selectViewport('phone');
}}
>
Phone<br /><i class="material-icons">smartphone</i>
Phone<br /><i class="material-symbols-outlined">smartphone</i>
</div>
<div
class="button ${this.selectedViewport === 'phablet' ? 'selected' : null}"
@ -182,7 +200,7 @@ export class WccProperties extends LitElement {
this.selectViewport('phablet');
}}
>
Phablet<br /><i class="material-icons">smartphone</i>
Phablet<br /><i class="material-symbols-outlined">smartphone</i>
</div>
<div
class="button ${this.selectedViewport === 'tablet' ? 'selected' : null}"
@ -190,7 +208,7 @@ export class WccProperties extends LitElement {
this.selectViewport('tablet');
}}
>
Tablet<br /><i class="material-icons">tablet</i>
Tablet<br /><i class="material-symbols-outlined">tablet</i>
</div>
<div
class="button ${this.selectedViewport === 'desktop' ||
@ -201,7 +219,7 @@ export class WccProperties extends LitElement {
this.selectViewport('native');
}}
>
Desktop<br /><i class="material-icons">desktop_windows</i>
Desktop<br /><i class="material-symbols-outlined">desktop_windows</i>
</div>
</div>
</div>
@ -211,6 +229,141 @@ export class WccProperties extends LitElement {
`;
}
public async createProperties() {
console.log('creating properties for:');
console.log(this.selectedItem);
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 = async (propertyArg: any): Promise<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 as any).demo) {
console.log(`Got Dees-Element for property evaluation.`);
const anonItem: any = this.selectedItem;
if (!anonItem) {
this.warning = 'no element selected';
return;
}
console.log(anonItem.elementProperties);
const wccFrame = await this.dashboardRef.wccFrame;
let firstFoundInstantiatedElement: HTMLElement;
for (const element of Array.from((await wccFrame.getViewportElement()).children)) {
if (element instanceof (this.selectedItem as any)) {
firstFoundInstantiatedElement = element as HTMLElement;
break;
}
}
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') {
continue;
}
const property = classProperties.get(key);
const propertyTypeString = await determinePropertyType(property);
propertyArray.push(
html`
<div class="property">
${key} / ${propertyTypeString}<br />
${(() => {
switch (propertyTypeString) {
case 'Boolean':
return html`<input
type="checkbox"
?checked=${firstFoundInstantiatedElement[key]}
@input="${(eventArg: any) => {
firstFoundInstantiatedElement[key] = eventArg.target.checked;
}}"
/>`;
case 'String':
return html`<input
type="text"
value=${firstFoundInstantiatedElement[key]}
@input="${(eventArg: any) => {
firstFoundInstantiatedElement[key] = eventArg.target.value;
}}"
/>`;
case 'Number':
return html`<input
type="number"
value=${firstFoundInstantiatedElement[key]}
@input="${(eventArg: any) => {
firstFoundInstantiatedElement[key] = eventArg.target.value;
}}"
/>`;
case 'Enum':
const enumValues: any[] = getEnumValues(property);
return html`<select
@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>`;
}
})()}
</div>
`
);
}
this.propertyContent = propertyArray;
} else {
console.log(`Cannot extract properties of ${(this.selectedItem as any)?.name}`);
this.warning = `You selected a page.`;
return null;
}
}
public selectTheme(themeArg: TTheme) {
this.selectedTheme = themeArg;
this.dispatchEvent(
@ -222,6 +375,11 @@ export class WccProperties extends LitElement {
this.dashboardRef.buildUrl();
}
public async scheduleUpdate() {
await this.createProperties();
super.scheduleUpdate();
}
public selectViewport(viewport: TEnvironment) {
this.selectedViewport = viewport;
setEnvironment(viewport);

View File

@ -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;
@ -39,11 +39,32 @@ export class WccSidebar extends LitElement {
padding: 5px;
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
}
.heading {
font-size: 24px;
text-align: center;
text-align: center;
margin: 20px 5px 5px 5px;
}
.heading a {
text-decoration: none;
color: #fff;
}
.subheading {
text-align: center;
}
@ -72,13 +93,13 @@ export class WccSidebar extends LitElement {
background: #455A64;
}
.selectOption .material-icons {
.selectOption .material-symbols-outlined {
color: #666;
display: block;
transition: all 0.2s;
}
.selectOption.selected .material-icons {
.selectOption.selected .material-symbols-outlined {
color: #000;
}
@ -92,14 +113,15 @@ export class WccSidebar extends LitElement {
</style>
<div class="heading">
wcc-tools
<a href="https://gitlab.com/designestate/dees-wcctools" target="_blank">wcctools</a>
</div>
<div class="subheading">
by Lossless GmbH
</div>
<div class="menu">
<h3>Live Websites</h3>
${this.websites.map(website => {
return html`<div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">${website}</div></div>`;
return html`<div class="selectOption"><i class="material-symbols-outlined">ondemand_video</i><div class="text">${website}</div></div>`;
})}
<h3>Pages</h3>
${(() => {
@ -114,7 +136,7 @@ export class WccSidebar extends LitElement {
this.selectItem('page', pageName, item);
}}
>
<i class="material-icons">insert_drive_file</i>
<i class="material-symbols-outlined">insert_drive_file</i>
<div class="text">${pageName}</div>
</div>
`;
@ -127,13 +149,13 @@ export class WccSidebar extends LitElement {
const item = this.dashboardRef.elements[elementName];
return html`
<div
class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
class="selectOption ${this.selectedItem === item ? 'selected' : null}"
@click=${async () => {
const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
this.selectItem('element', elementName, item);
}}
>
<i class="material-icons">featured_video</i>
<i class="material-symbols-outlined">featured_video</i>
<div class="text">${elementName}</div>
</div>
`;
@ -143,7 +165,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);

View File

@ -1,7 +1,7 @@
import { WccDashboard } from './elements/wcc-dashboard';
import { LitElement, TemplateResult } from 'lit-element';
import { WccDashboard } from './elements/wcc-dashboard.js';
import { LitElement, TemplateResult } from 'lit';
const setupWccTools = (elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: TemplateResult }) => {
const setupWccTools = (elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: () => TemplateResult }) => {
let hasRun = false;
const runWccToolsSetup = async () => {
if (document.readyState === 'complete' && !hasRun) {

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
}
}

View File

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

View File

@ -1,17 +0,0 @@
{
"extends": ["tslint:latest", "tslint-config-prettier"],
"rules": {
"semicolon": [true, "always"],
"no-console": false,
"ordered-imports": false,
"object-literal-sort-keys": false,
"member-ordering": {
"options":{
"order": [
"static-method"
]
}
}
},
"defaultSeverity": "warning"
}