Compare commits
76 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 43897f0fb5 | |||
| 2e57176dcc | |||
| d1fe66f1ba | |||
| 8ea7c53154 | |||
| ea0858fd27 | |||
| 03c00919df | |||
| 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 | |||
| bf4ef900f8 | |||
| a812a12c10 | |||
| 71e885f3e4 | |||
| 57bc2b76bc | |||
| f21a20b652 | |||
| 91b9c424d8 | |||
| 5cf4752ad9 | |||
| 5f347153fc | |||
| e1aebc7db8 | |||
| 97b88d965c | |||
| 37d343da03 | |||
| 47cb726716 | |||
| 4220131bc4 | |||
| edee4fa446 | |||
| c2a0fd26e2 | |||
| 693c8ca3f0 | |||
| ca58c55a37 | |||
| 79d2be98c5 | |||
| 7971f48963 | |||
| a15629a960 | |||
| ad5c25d80e | |||
| a713d88f27 | |||
| 100f657e04 | |||
| 46e0b9f9db | |||
| 64d6379cd2 | |||
| 847733286c | |||
| 67a037c511 | |||
| 21bcdb2e01 | |||
| 1743490a26 | |||
| 2f9ec6a700 | |||
| 3a89888289 | |||
| 98909c61ff | |||
| 324808dd03 | |||
| c5eec2ac22 |
@ -12,30 +12,38 @@ stages:
|
|||||||
- release
|
- release
|
||||||
- metadata
|
- metadata
|
||||||
|
|
||||||
|
before_script:
|
||||||
|
- pnpm install -g pnpm
|
||||||
|
- pnpm install -g @shipzone/npmci
|
||||||
|
- npmci npm prepare
|
||||||
|
|
||||||
# ====================
|
# ====================
|
||||||
# security stage
|
# security stage
|
||||||
# ====================
|
# ====================
|
||||||
mirror:
|
# ====================
|
||||||
stage: security
|
# security stage
|
||||||
script:
|
# ====================
|
||||||
- npmci git mirror
|
auditProductionDependencies:
|
||||||
tags:
|
|
||||||
- lossless
|
|
||||||
- docker
|
|
||||||
- notpriv
|
|
||||||
|
|
||||||
audit:
|
|
||||||
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||||
stage: security
|
stage: security
|
||||||
script:
|
script:
|
||||||
- npmci npm prepare
|
|
||||||
- npmci command npm install --ignore-scripts
|
|
||||||
- npmci command npm config set registry https://registry.npmjs.org
|
- npmci command npm config set registry https://registry.npmjs.org
|
||||||
- npmci command npm audit --audit-level=high
|
- npmci command pnpm audit --audit-level=high --prod
|
||||||
tags:
|
tags:
|
||||||
- lossless
|
- lossless
|
||||||
- docker
|
- docker
|
||||||
- notpriv
|
allow_failure: true
|
||||||
|
|
||||||
|
auditDevDependencies:
|
||||||
|
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
|
||||||
|
stage: security
|
||||||
|
script:
|
||||||
|
- npmci command npm config set registry https://registry.npmjs.org
|
||||||
|
- npmci command pnpm audit --audit-level=high --dev
|
||||||
|
tags:
|
||||||
|
- lossless
|
||||||
|
- docker
|
||||||
|
allow_failure: true
|
||||||
|
|
||||||
# ====================
|
# ====================
|
||||||
# test stage
|
# test stage
|
||||||
@ -44,28 +52,22 @@ audit:
|
|||||||
testStable:
|
testStable:
|
||||||
stage: test
|
stage: test
|
||||||
script:
|
script:
|
||||||
- npmci npm prepare
|
|
||||||
- npmci node install stable
|
- npmci node install stable
|
||||||
- npmci npm install
|
- npmci npm install
|
||||||
- npmci npm test
|
- npmci npm test
|
||||||
coverage: /\d+.?\d+?\%\s*coverage/
|
coverage: /\d+.?\d+?\%\s*coverage/
|
||||||
tags:
|
tags:
|
||||||
- lossless
|
|
||||||
- docker
|
- docker
|
||||||
- priv
|
|
||||||
|
|
||||||
testBuild:
|
testBuild:
|
||||||
stage: test
|
stage: test
|
||||||
script:
|
script:
|
||||||
- npmci npm prepare
|
|
||||||
- npmci node install stable
|
- npmci node install stable
|
||||||
- npmci npm install
|
- npmci npm install
|
||||||
- npmci command npm run build
|
- npmci npm build
|
||||||
coverage: /\d+.?\d+?\%\s*coverage/
|
coverage: /\d+.?\d+?\%\s*coverage/
|
||||||
tags:
|
tags:
|
||||||
- lossless
|
|
||||||
- docker
|
- docker
|
||||||
- notpriv
|
|
||||||
|
|
||||||
release:
|
release:
|
||||||
stage: release
|
stage: release
|
||||||
@ -85,11 +87,12 @@ release:
|
|||||||
codequality:
|
codequality:
|
||||||
stage: metadata
|
stage: metadata
|
||||||
allow_failure: true
|
allow_failure: true
|
||||||
|
only:
|
||||||
|
- 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
|
||||||
@ -109,11 +112,9 @@ trigger:
|
|||||||
pages:
|
pages:
|
||||||
stage: metadata
|
stage: metadata
|
||||||
script:
|
script:
|
||||||
- npmci node install lts
|
- npmci node install stable
|
||||||
- npmci command npm install -g @gitzone/tsdoc
|
|
||||||
- npmci npm prepare
|
|
||||||
- npmci npm install
|
- npmci npm install
|
||||||
- npmci command tsdoc
|
- npmci command npm run buildDocs
|
||||||
tags:
|
tags:
|
||||||
- lossless
|
- lossless
|
||||||
- docker
|
- docker
|
||||||
|
|||||||
24
.vscode/launch.json
vendored
24
.vscode/launch.json
vendored
@ -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"
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
@ -15,7 +15,7 @@
|
|||||||
"properties": {
|
"properties": {
|
||||||
"projectType": {
|
"projectType": {
|
||||||
"type": "string",
|
"type": "string",
|
||||||
"enum": ["website", "element", "service", "npm"]
|
"enum": ["website", "element", "service", "npm", "wcc"]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<!--gitzone element-->
|
<!--gitzone element-->
|
||||||
<!-- made by Lossless GmbH -->
|
<!-- made by Task Venture Capital GmbH -->
|
||||||
<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
|
<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
@ -9,7 +9,12 @@
|
|||||||
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
|
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
|
||||||
/>
|
/>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
|
||||||
|
<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>
|
<style>
|
||||||
body {
|
body {
|
||||||
@ -18,7 +23,8 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script src="../test/index.ts"></script>
|
<script type="module" src="/bundle.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body></body>
|
<body>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
10
html/index.ts
Normal file
10
html/index.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
// dees tools
|
||||||
|
import * as deesWccTools from '../ts_web/index.js';
|
||||||
|
import * as deesDomTools from '@designestate/dees-domtools';
|
||||||
|
|
||||||
|
// elements and 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();
|
||||||
@ -1,11 +1,11 @@
|
|||||||
{
|
{
|
||||||
"gitzone": {
|
"gitzone": {
|
||||||
"projectType": "element",
|
"projectType": "wcc",
|
||||||
"module": {
|
"module": {
|
||||||
"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"
|
||||||
|
|||||||
12555
package-lock.json
generated
12555
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
31
package.json
31
package.json
@ -1,33 +1,32 @@
|
|||||||
{
|
{
|
||||||
"name": "@designestate/dees-wcctools",
|
"name": "@designestate/dees-wcctools",
|
||||||
"version": "1.0.38",
|
"version": "1.0.76",
|
||||||
"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 && tsbundle element)",
|
||||||
"watch": "tswatch element"
|
"watch": "tswatch element",
|
||||||
|
"buildDocs": "tsdoc"
|
||||||
},
|
},
|
||||||
"author": "Lossless GmbH",
|
"author": "Lossless GmbH",
|
||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@designestate/dees-domtools": "^1.0.74",
|
"@designestate/dees-domtools": "^2.0.6",
|
||||||
"@gitzone/tsrun": "^1.2.12",
|
"@designestate/dees-element": "^2.0.6",
|
||||||
"@pushrocks/smartdelay": "^2.0.10",
|
"@gitzone/tsrun": "^1.2.32",
|
||||||
"@pushrocks/smartexpress": "^3.0.97",
|
"@pushrocks/smartdelay": "^2.0.13",
|
||||||
"lit-element": "^2.4.0",
|
"@pushrocks/smartexpress": "^4.0.4",
|
||||||
"lit-html": "^1.3.0",
|
"lit": "^2.5.0"
|
||||||
"typescript": "^4.1.2"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@gitzone/tsbuild": "^2.1.25",
|
"@gitzone/tsbuild": "^2.1.61",
|
||||||
"@gitzone/tsbundle": "^1.0.78",
|
"@gitzone/tsbundle": "^2.0.7",
|
||||||
"@gitzone/tswatch": "^1.0.50",
|
"@gitzone/tswatch": "^2.0.5",
|
||||||
"@pushrocks/projectinfo": "^4.0.5",
|
"@pushrocks/projectinfo": "^5.0.1"
|
||||||
"tslint": "^6.1.3",
|
|
||||||
"tslint-config-prettier": "^1.17.0"
|
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"ts/**/*",
|
"ts/**/*",
|
||||||
|
|||||||
2744
pnpm-lock.yaml
generated
Normal file
2744
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -21,7 +21,6 @@ Code Style | [](htt
|
|||||||
PackagePhobia (total standalone install weight) | [](https://lossless.cloud)
|
PackagePhobia (total standalone install weight) | [](https://lossless.cloud)
|
||||||
PackagePhobia (package size on registry) | [](https://lossless.cloud)
|
PackagePhobia (package size on registry) | [](https://lossless.cloud)
|
||||||
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
BundlePhobia (total size when bundled) | [](https://lossless.cloud)
|
||||||
Platform support | [](https://lossless.cloud) [](https://lossless.cloud)
|
|
||||||
|
|
||||||
## Usage
|
## 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.
|
For further information read the linked docs at the top of this readme.
|
||||||
|
|
||||||
> MIT licensed | **©** [Lossless GmbH](https://lossless.gmbh)
|
## Legal
|
||||||
|
> MIT licensed | **©** [Task Venture Capital GmbH](https://task.vc)
|
||||||
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
|
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
|
||||||
|
|
||||||
[](https://maintainedby.lossless.com)
|
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
export * from './test-demoelement';
|
export * from './test-demoelement.js';
|
||||||
|
|||||||
@ -1,27 +1,112 @@
|
|||||||
import { LitElement, customElement, TemplateResult, html } from 'lit-element';
|
import {
|
||||||
|
DeesElement,
|
||||||
|
customElement,
|
||||||
|
TemplateResult,
|
||||||
|
html,
|
||||||
|
property,
|
||||||
|
css,
|
||||||
|
cssManager,
|
||||||
|
} from '@designestate/dees-element';
|
||||||
|
|
||||||
import * as domtools from '@designestate/dees-domtools';
|
import * as domtools from '@designestate/dees-domtools';
|
||||||
|
|
||||||
|
enum ETestEnum {
|
||||||
|
'first' = 'first',
|
||||||
|
'second' = 'second',
|
||||||
|
'awesome' = 'awesome',
|
||||||
|
}
|
||||||
|
|
||||||
@customElement('test-demoelement')
|
@customElement('test-demoelement')
|
||||||
export class TestDemoelement extends LitElement {
|
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() {
|
public render() {
|
||||||
return html`
|
return html`
|
||||||
<style>
|
<style></style>
|
||||||
.maincontainer {
|
<div class="maincontainer"><slot>This is a demo element</slot></div>
|
||||||
display: block;
|
<div class="themeindicator">
|
||||||
background: #fff;
|
You have selected the ${this.goBright ? 'bright' : 'dark'} theme.
|
||||||
padding: 10px;
|
<pre>
|
||||||
border-radius: 10px;
|
demoBoolean is <b>${this.demoBoolean}</b>
|
||||||
}
|
demoString is <b>"${this.demoString}"</b>
|
||||||
${domtools.breakpoints.cssForPhablet(`
|
demoNumber is <b>${this.demoNumber}</b>
|
||||||
.maincontainer {
|
demoEnum is <b>"${this.demoENum}"</b>
|
||||||
background: #000;
|
</pre
|
||||||
}
|
>
|
||||||
`)}
|
</div>
|
||||||
</style>
|
|
||||||
<div class="maincontainer">This is a demo element</div>
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -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, {});
|
||||||
|
|||||||
8
ts_web/00_commitinfo_data.ts
Normal file
8
ts_web/00_commitinfo_data.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
/**
|
||||||
|
* autocreated commitinfo by @pushrocks/commitinfo
|
||||||
|
*/
|
||||||
|
export const commitinfo = {
|
||||||
|
name: '@designestate/dees-wcctools',
|
||||||
|
version: '1.0.76',
|
||||||
|
description: 'wcc tools for creating element catalogues'
|
||||||
|
}
|
||||||
@ -1,26 +1,27 @@
|
|||||||
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 * 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.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;
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public selectedItem: TemplateResult | LitElement;
|
public selectedItemName: string;
|
||||||
|
|
||||||
|
@property()
|
||||||
|
public selectedItem: (() => TemplateResult) | DeesElement;
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
|
public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
|
||||||
@ -29,17 +30,20 @@ export class WccDashboard extends LitElement {
|
|||||||
public selectedTheme: TTheme = 'dark';
|
public selectedTheme: TTheme = 'dark';
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
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;
|
||||||
|
|
||||||
|
@queryAsync('wcc-frame')
|
||||||
|
public wccFrame: Promise<WccFrame>;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
elementsArg?: { [key: string]: LitElement },
|
elementsArg?: { [key: string]: DeesElement },
|
||||||
pagesArg?: { [key: string]: TemplateResult }
|
pagesArg?: { [key: string]: () => TemplateResult }
|
||||||
) {
|
) {
|
||||||
super();
|
super();
|
||||||
if (elementsArg) {
|
if (elementsArg) {
|
||||||
@ -56,7 +60,6 @@ export class WccDashboard extends LitElement {
|
|||||||
public render(): TemplateResult {
|
public render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
<style>
|
<style>
|
||||||
@import url('https://fonts.googleapis.com/css?family=Roboto');
|
|
||||||
:host {
|
:host {
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
background: #fcfcfc;
|
background: #fcfcfc;
|
||||||
@ -70,31 +73,85 @@ export class WccDashboard extends LitElement {
|
|||||||
<wcc-sidebar
|
<wcc-sidebar
|
||||||
.dashboardRef=${this}
|
.dashboardRef=${this}
|
||||||
.selectedItem=${this.selectedItem}
|
.selectedItem=${this.selectedItem}
|
||||||
@selectedItem=${(eventArg) => {
|
|
||||||
this.selectedItem = eventArg.detail;
|
|
||||||
}}
|
|
||||||
@selectedType=${(eventArg) => {
|
@selectedType=${(eventArg) => {
|
||||||
this.selectedType = eventArg.detail;
|
this.selectedType = eventArg.detail;
|
||||||
}}
|
}}
|
||||||
|
@selectedItemName=${(eventArg) => {
|
||||||
|
this.selectedItemName = eventArg.detail;
|
||||||
|
}}
|
||||||
|
@selectedItem=${(eventArg) => {
|
||||||
|
this.selectedItem = eventArg.detail;
|
||||||
|
}}
|
||||||
></wcc-sidebar>
|
></wcc-sidebar>
|
||||||
<wcc-properties
|
<wcc-properties
|
||||||
.dashboardRef=${this}
|
.dashboardRef=${this}
|
||||||
.warning="${this.warning}"
|
.warning="${this.warning}"
|
||||||
.selectedItem=${this.selectedItem}
|
.selectedItem=${this.selectedItem}
|
||||||
|
.selectedViewport=${this.selectedViewport}
|
||||||
|
.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;
|
||||||
}}
|
}}
|
||||||
></wcc-properties>
|
></wcc-properties>
|
||||||
<wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
|
<wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
|
||||||
${(() => {
|
</wcc-frame>
|
||||||
if (this.selectedItem instanceof TemplateResult) {
|
`;
|
||||||
return this.selectedItem;
|
}
|
||||||
} else if (this.selectedItem) {
|
|
||||||
// console.log(this.selectedItem);
|
public setWarning(warningTextArg: string) {
|
||||||
|
if (this.warning !== warningTextArg) {
|
||||||
|
console.log(warningTextArg);
|
||||||
|
this.warning = warningTextArg;
|
||||||
|
setTimeout(() => {
|
||||||
|
this.scheduleUpdate();
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public async firstUpdated() {
|
||||||
|
this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
public async updated() {
|
||||||
|
this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
|
||||||
|
await this.domtools.router._handleRouteState();
|
||||||
|
const storeElement = this.selectedItem;
|
||||||
|
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;
|
const anonItem: any = this.selectedItem;
|
||||||
if (!anonItem.demo) {
|
if (!anonItem.demo) {
|
||||||
this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
|
this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
|
||||||
@ -107,68 +164,14 @@ export class WccDashboard extends LitElement {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.setWarning(null);
|
this.setWarning(null);
|
||||||
return html`${anonItem.demo()}`;
|
const viewport = await wccFrame.getViewportElement();
|
||||||
|
render(anonItem.demo(), viewport);;
|
||||||
}
|
}
|
||||||
})()}
|
|
||||||
</wcc-frame>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
public setWarning(warningTextArg: string) {
|
|
||||||
if (this.warning !== warningTextArg) {
|
|
||||||
console.log(warningTextArg);
|
|
||||||
this.warning = warningTextArg;
|
|
||||||
setTimeout(() => {
|
|
||||||
super.performUpdate();
|
|
||||||
}, 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.pageName];
|
|
||||||
}
|
|
||||||
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;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public buildUrl() {
|
public buildUrl() {
|
||||||
this.domtools.router.pushUrl(
|
this.domtools.router.pushUrl(
|
||||||
`/${this.selectedType}/${(this.selectedItem as any).name}/${this.selectedViewport}/${
|
`/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`
|
||||||
this.selectedTheme
|
|
||||||
}`,
|
|
||||||
0
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,38 +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>
|
|
||||||
@import url('https://fonts.googleapis.com/css?family=Roboto');
|
|
||||||
: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!
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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';
|
import * as domtools from '@designestate/dees-domtools';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
'wcc-frame': WccFrame;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@customElement('wcc-frame')
|
@customElement('wcc-frame')
|
||||||
export class WccFrame extends LitElement {
|
export class WccFrame extends DeesElement {
|
||||||
@property()
|
@property()
|
||||||
public viewport: string;
|
public viewport: string;
|
||||||
|
|
||||||
public render(): TemplateResult {
|
public static styles = [
|
||||||
return html`
|
css`
|
||||||
<style>
|
|
||||||
:host {
|
:host {
|
||||||
border: 10px solid #ffaeaf;
|
border: 10px solid #ffaeaf;
|
||||||
background: #222;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
background: ${cssManager.bdTheme('#333', '#000')};
|
||||||
left: 200px;
|
left: 200px;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
bottom: 100px;
|
bottom: 100px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.viewport {
|
||||||
|
container-type: inline-size;
|
||||||
|
container-name: wccToolsViewport;
|
||||||
|
position: relative;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
]
|
||||||
|
|
||||||
|
public render(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
${(() => {
|
${(() => {
|
||||||
switch (this.viewport) {
|
switch (this.viewport) {
|
||||||
case 'desktop':
|
case 'desktop':
|
||||||
@ -49,12 +69,22 @@ export class WccFrame extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.viewport {
|
.viewport {
|
||||||
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; `
|
||||||
: html``}
|
: html``
|
||||||
min-height: 100%;
|
}
|
||||||
background:
|
background:
|
||||||
|
${
|
||||||
|
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),
|
||||||
radial-gradient(#444444 3px, transparent 4px),
|
radial-gradient(#444444 3px, transparent 4px),
|
||||||
linear-gradient(#222222 4px, transparent 0),
|
linear-gradient(#222222 4px, transparent 0),
|
||||||
@ -63,11 +93,23 @@ export class WccFrame extends LitElement {
|
|||||||
#222222;
|
#222222;
|
||||||
background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
|
background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
|
||||||
background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
|
background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
|
||||||
|
`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="viewport">
|
<div class="viewport">
|
||||||
<slot></slot>
|
|
||||||
</div>
|
</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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,7 @@
|
|||||||
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
|
import { DeesElement, property, html, customElement, TemplateResult, state } from '@designestate/dees-element';
|
||||||
import { WccDashboard } from './wcc-dashboard';
|
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 TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
|
||||||
export type TTheme = 'bright' | 'dark';
|
export type TTheme = 'bright' | 'dark';
|
||||||
@ -11,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';
|
||||||
@ -27,9 +31,11 @@ export class WccProperties extends LitElement {
|
|||||||
@property()
|
@property()
|
||||||
public warning: string = null;
|
public warning: string = null;
|
||||||
|
|
||||||
|
@state()
|
||||||
|
propertyContent: TemplateResult[] = [];
|
||||||
|
|
||||||
public render(): TemplateResult {
|
public render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
|
||||||
<style>
|
<style>
|
||||||
:host {
|
:host {
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
@ -55,13 +61,39 @@ export class WccProperties extends LitElement {
|
|||||||
grid-template-columns: 33% 33% 33%;
|
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' 400, 'GRAD' 0, 'opsz' 48;
|
||||||
|
}
|
||||||
|
|
||||||
.properties .property {
|
.properties .property {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
background: #444;
|
background: #444;
|
||||||
border: 1px solid #000;
|
border: 1px solid #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.properties input,
|
||||||
|
.properties select {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
background: #333;
|
||||||
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.viewportSelector,
|
.viewportSelector,
|
||||||
.themeSelector {
|
.themeSelector {
|
||||||
|
user-select: none;
|
||||||
border-right: 1px solid #999;
|
border-right: 1px solid #999;
|
||||||
}
|
}
|
||||||
.selectorButtons2 {
|
.selectorButtons2 {
|
||||||
@ -114,32 +146,21 @@ 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>
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
<div class="properties">
|
<div class="properties">
|
||||||
<div class="panelheading">Properties</div>
|
<div class="panelheading">Properties</div>
|
||||||
${(() => {
|
${this.propertyContent}
|
||||||
if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) {
|
|
||||||
const anonItem: any = this.selectedItem;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
})()}
|
|
||||||
</div>
|
</div>
|
||||||
<div class="themeSelector">
|
<div class="themeSelector">
|
||||||
<div class="panelheading">Theme</div>
|
<div class="panelheading">Theme</div>
|
||||||
@ -150,7 +171,7 @@ export class WccProperties extends LitElement {
|
|||||||
this.selectTheme('dark');
|
this.selectTheme('dark');
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Dark<br /><i class="material-icons">nights_stay</i>
|
Dark<br /><i class="material-symbols-outlined">brightness_3</i>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"
|
class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"
|
||||||
@ -158,7 +179,7 @@ export class WccProperties extends LitElement {
|
|||||||
this.selectTheme('bright');
|
this.selectTheme('bright');
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Bright<br /><i class="material-icons">flare</i>
|
Bright<br /><i class="material-symbols-outlined">flare</i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -171,7 +192,7 @@ export class WccProperties extends LitElement {
|
|||||||
this.selectViewport('phone');
|
this.selectViewport('phone');
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Phone<br /><i class="material-icons">smartphone</i>
|
Phone<br /><i class="material-symbols-outlined">smartphone</i>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="button ${this.selectedViewport === 'phablet' ? 'selected' : null}"
|
class="button ${this.selectedViewport === 'phablet' ? 'selected' : null}"
|
||||||
@ -179,7 +200,7 @@ export class WccProperties extends LitElement {
|
|||||||
this.selectViewport('phablet');
|
this.selectViewport('phablet');
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Phablet<br /><i class="material-icons">smartphone</i>
|
Phablet<br /><i class="material-symbols-outlined">smartphone</i>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="button ${this.selectedViewport === 'tablet' ? 'selected' : null}"
|
class="button ${this.selectedViewport === 'tablet' ? 'selected' : null}"
|
||||||
@ -187,7 +208,7 @@ export class WccProperties extends LitElement {
|
|||||||
this.selectViewport('tablet');
|
this.selectViewport('tablet');
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Tablet<br /><i class="material-icons">tablet</i>
|
Tablet<br /><i class="material-symbols-outlined">tablet</i>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="button ${this.selectedViewport === 'desktop' ||
|
class="button ${this.selectedViewport === 'desktop' ||
|
||||||
@ -198,7 +219,7 @@ export class WccProperties extends LitElement {
|
|||||||
this.selectViewport('native');
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -208,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) {
|
public selectTheme(themeArg: TTheme) {
|
||||||
this.selectedTheme = themeArg;
|
this.selectedTheme = themeArg;
|
||||||
this.dispatchEvent(
|
this.dispatchEvent(
|
||||||
@ -219,6 +375,11 @@ export class WccProperties extends LitElement {
|
|||||||
this.dashboardRef.buildUrl();
|
this.dashboardRef.buildUrl();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public async scheduleUpdate() {
|
||||||
|
await this.createProperties();
|
||||||
|
super.scheduleUpdate();
|
||||||
|
}
|
||||||
|
|
||||||
public selectViewport(viewport: TEnvironment) {
|
public selectViewport(viewport: TEnvironment) {
|
||||||
this.selectedViewport = viewport;
|
this.selectedViewport = viewport;
|
||||||
setEnvironment(viewport);
|
setEnvironment(viewport);
|
||||||
|
|||||||
@ -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;
|
||||||
@ -39,11 +39,32 @@ export class WccSidebar extends LitElement {
|
|||||||
padding: 5px;
|
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' 400, 'GRAD' 0, 'opsz' 48;
|
||||||
|
}
|
||||||
|
|
||||||
.heading {
|
.heading {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 20px 5px 5px 5px;
|
margin: 20px 5px 5px 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.heading a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.subheading {
|
.subheading {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@ -72,13 +93,13 @@ export class WccSidebar extends LitElement {
|
|||||||
background: #455A64;
|
background: #455A64;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectOption .material-icons {
|
.selectOption .material-symbols-outlined {
|
||||||
color: #666;
|
color: #666;
|
||||||
display: block;
|
display: block;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectOption.selected .material-icons {
|
.selectOption.selected .material-symbols-outlined {
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -92,15 +113,15 @@ export class WccSidebar extends LitElement {
|
|||||||
|
|
||||||
</style>
|
</style>
|
||||||
<div class="heading">
|
<div class="heading">
|
||||||
lele-catalog
|
<a href="https://gitlab.com/designestate/dees-wcctools" target="_blank">wcctools</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="subheading">
|
<div class="subheading">
|
||||||
Lossless GmbH
|
by Lossless GmbH
|
||||||
</div>
|
</div>
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<h3>Live Websites</h3>
|
<h3>Live Websites</h3>
|
||||||
${this.websites.map(website => {
|
${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>
|
<h3>Pages</h3>
|
||||||
${(() => {
|
${(() => {
|
||||||
@ -109,13 +130,13 @@ export class WccSidebar extends LitElement {
|
|||||||
const item = this.dashboardRef.pages[pageName];
|
const item = this.dashboardRef.pages[pageName];
|
||||||
return html`
|
return html`
|
||||||
<div
|
<div
|
||||||
class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
|
class="selectOption ${this.selectedItem === item ? 'selected' : null}"
|
||||||
@click=${async () => {
|
@click=${async () => {
|
||||||
const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
|
const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
|
||||||
this.selectItem('page', item);
|
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 class="text">${pageName}</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@ -128,13 +149,13 @@ export class WccSidebar extends LitElement {
|
|||||||
const item = this.dashboardRef.elements[elementName];
|
const item = this.dashboardRef.elements[elementName];
|
||||||
return html`
|
return html`
|
||||||
<div
|
<div
|
||||||
class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
|
class="selectOption ${this.selectedItem === item ? 'selected' : null}"
|
||||||
@click=${async () => {
|
@click=${async () => {
|
||||||
const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
|
const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
|
||||||
this.selectItem('element', item);
|
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 class="text">${elementName}</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@ -144,20 +165,28 @@ export class WccSidebar extends LitElement {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
public selectItem(typeArg: TElementType, 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(itemArg);
|
||||||
this.selectedItem = itemArg;
|
this.selectedItem = itemArg;
|
||||||
this.selectedType = typeArg;
|
this.selectedType = typeArg;
|
||||||
this.dispatchEvent(
|
|
||||||
new CustomEvent('selectedItem', {
|
|
||||||
detail: itemArg
|
|
||||||
})
|
|
||||||
);
|
|
||||||
this.dispatchEvent(
|
this.dispatchEvent(
|
||||||
new CustomEvent('selectedType', {
|
new CustomEvent('selectedType', {
|
||||||
detail: typeArg
|
detail: typeArg
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
this.dispatchEvent(
|
||||||
|
new CustomEvent('selectedItemName', {
|
||||||
|
detail: itemNameArg
|
||||||
|
})
|
||||||
|
);
|
||||||
|
this.dispatchEvent(
|
||||||
|
new CustomEvent('selectedItem', {
|
||||||
|
detail: itemArg
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
this.dashboardRef.buildUrl();
|
this.dashboardRef.buildUrl();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
import { WccDashboard } from './elements/wcc-dashboard';
|
import { WccDashboard } from './elements/wcc-dashboard.js';
|
||||||
import { LitElement, TemplateResult } from 'lit-element';
|
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;
|
let hasRun = false;
|
||||||
const runWccToolsSetup = async () => {
|
const runWccToolsSetup = async () => {
|
||||||
if (document.readyState === 'complete' && !hasRun) {
|
if (document.readyState === 'complete' && !hasRun) {
|
||||||
|
|||||||
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,7 +1,9 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"experimentalDecorators": true,
|
"experimentalDecorators": true,
|
||||||
"target": "ES2017",
|
"useDefineForClassFields": false,
|
||||||
"moduleResolution": "Node"
|
"target": "ES2022",
|
||||||
|
"module": "ES2022",
|
||||||
|
"moduleResolution": "nodenext"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
17
tslint.json
17
tslint.json
@ -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"
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user