Compare commits

...

30 Commits

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

View File

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

24
.vscode/launch.json vendored
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

@ -17,7 +17,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"

22257
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

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

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

View File

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

View File

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

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;
@ -150,7 +150,7 @@ export class WccSidebar extends LitElement {
`;
}
public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | LitElement) {
public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | DeesElement) {
console.log('selected item');
console.log(itemNameArg);
console.log(itemArg);

View File

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