fix(core): update

This commit is contained in:
Philipp Kunz 2021-05-05 20:55:49 +00:00
parent e88605a4aa
commit e6adbf9b6d
7 changed files with 1957 additions and 962 deletions

2556
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -13,20 +13,20 @@
"author": "Lossless GmbH", "author": "Lossless GmbH",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@designestate/dees-domtools": "^1.0.84", "@designestate/dees-domtools": "^1.0.87",
"@designestate/dees-element": "^1.0.10", "@designestate/dees-element": "^1.0.19",
"@designestate/dees-wcctools": "^1.0.54", "@designestate/dees-wcctools": "^1.0.57",
"@fortawesome/fontawesome-svg-core": "^1.2.34", "@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.2", "@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-regular-svg-icons": "^5.15.2", "@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.2", "@fortawesome/free-solid-svg-icons": "^5.15.3",
"typescript": "^4.1.5" "typescript": "^4.2.4"
}, },
"devDependencies": { "devDependencies": {
"@gitzone/tsbuild": "^2.1.25", "@gitzone/tsbuild": "^2.1.25",
"@gitzone/tsbundle": "^1.0.78", "@gitzone/tsbundle": "^1.0.80",
"@gitzone/tstest": "^1.0.52", "@gitzone/tstest": "^1.0.52",
"@gitzone/tswatch": "^1.0.50", "@gitzone/tswatch": "^1.0.52",
"@pushrocks/projectinfo": "^4.0.5", "@pushrocks/projectinfo": "^4.0.5",
"@pushrocks/tapbundle": "^3.2.14", "@pushrocks/tapbundle": "^3.2.14",
"tslint": "^6.1.3", "tslint": "^6.1.3",

View File

@ -1,4 +1,13 @@
import { customElement, html, DeesElement, property, TemplateResult } from '@designestate/dees-element'; import {
customElement,
html,
DeesElement,
property,
TemplateResult,
cssManager,
css,
unsafeCSS,
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@designestate/dees-domtools';
@ -10,7 +19,7 @@ declare global {
@customElement('dees-button') @customElement('dees-button')
export class DeesButton extends DeesElement { export class DeesButton extends DeesElement {
public static demo = () => html`<dees-button></dees-button>` public static demo = () => html`<dees-button></dees-button>`;
@property() @property()
text: string; text: string;
@ -31,79 +40,87 @@ export class DeesButton extends DeesElement {
super(); super();
} }
public static styles = [
cssManager.defaultStyles,
css`
:host {
display: block;
box-sizing: border-box;
}
:host([hidden]) {
display: none;
}
.button {
transition: all 0.2s ease;
font-size: 14px;
display: block;
text-align: center;
background: ${cssManager.bdTheme('#eee', '#333')};
border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
border-radius: 2px;
line-height: 40px;
padding: 0px 10px;
min-width: 100px;
user-select: none;
color: ${cssManager.bdTheme('#333', ' #ccc')};
}
.button:hover {
cursor: pointer;
background: #039be5;
border-top: 1px solid #039be5;
color: #ffffff;
}
.button:active {
background: #0277bd;
border-top: 1px solid #0277bd;
}
.button.disabled {
background: #fff;
border: 1px solid #eeeff3;
color: #9b9b9e;
cursor: default;
}
.button.highlighted {
background: #e4002b;
color: #fff;
}
.button.discreet {
background: none;
border: 1px solid #9b9b9e;
color: #000;
}
.button.discreet:hover {
background: rgba(0, 0, 0, 0.1);
}
.hidden {
display: none;
}
.big {
display: inline-block;
line-height: 48px;
font-size: 16px;
padding: 0px 48px;
margin-top: 36px;
}
`,
];
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
${domtools.elementBasic.styles} <div
<style> class="button ${this.isHidden ? 'hidden' : 'block'} ${this.type} ${this.disabled
:host { ? 'disabled'
display: block; : null}"
box-sizing: border-box; @click="${this.dispatchClick}"
} >
:host([hidden]) {
display: none;
}
.button {
transition: all 0.2s ease;
font-size: 14px;
display: block;
text-align: center;
background: ${this.goBright ? '#eee' : '#333'};
border-top: ${this.goBright ? '1px solid #eee' : '1px solid #444'};
border-radius: 2px;
line-height: 40px;
padding: 0px 10px;
min-width: 100px;
user-select: none;
color: ${this.goBright ? '#333' : ' #ccc'};
}
.button:hover {
cursor: pointer;
background: #039BE5;
border-top: 1px solid #039BE5;
color: #ffffff;
}
.button:active {
background: #0277BD;
border-top: 1px solid #0277BD;
}
.button.disabled {
background: #fff;
border: 1px solid #eeeff3;
color: #9b9b9e;
cursor: default;
}
.button.highlighted {
background: #e4002b;
color: #fff;
}
.button.discreet {
background: none;
border: 1px solid #9b9b9e;
color: #000;
}
.button.discreet:hover {
background: rgba(0,0,0,0.1)
}
.hidden {
display: none;
}
.big {
display: inline-block;
line-height: 48px;
font-size: 16px;
padding: 0px 48px;
margin-top: 36px;
}
</style>
<div class="button ${this.isHidden ? 'hidden' : 'block'} ${this.type} ${this.disabled ? 'disabled' : null}" @click="${this.dispatchClick}">
${this.text ? this.text : this.textContent} ${this.text ? this.text : this.textContent}
</div> </div>
`; `;
@ -111,19 +128,20 @@ export class DeesButton extends DeesElement {
public async dispatchClick() { public async dispatchClick() {
if (this.disabled) { if (this.disabled) {
return; return;
} }
this.dispatchEvent(new CustomEvent('clicked', { this.dispatchEvent(
detail: { new CustomEvent('clicked', {
data: this.eventDetailData detail: {
}, data: this.eventDetailData,
bubbles: true },
})); bubbles: true,
})
);
} }
public async firstUpdated () { public async firstUpdated() {
if (!this.textContent) { if (!this.textContent) {
this.textContent = 'Button'; this.textContent = 'Button';
this.performUpdate(); this.performUpdate();

View File

@ -1,6 +1,5 @@
import { customElement, html, LitElement } from 'lit-element'; import { customElement, html, DeesElement, css, cssManager } from '@designestate/dees-element';
import { DeesForm } from './dees-form';
import {DeesForm} from './dees-form';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
@ -9,13 +8,15 @@ declare global {
} }
@customElement('dees-form-submit') @customElement('dees-form-submit')
export class DeesFormSubmit extends LitElement { export class DeesFormSubmit extends DeesElement {
constructor() {
super();
}
public static styles = [cssManager.defaultStyles, css``];
public render() { public render() {
return html` return html` <dees-button @click="${this.submit}">${this.textContent}</dees-button> `;
<dees-button @click="${this.submit}">${this.textContent}</dees-button>
`;
} }
public async submit() { public async submit() {

View File

@ -0,0 +1,124 @@
import {
customElement,
DeesElement,
TemplateResult,
property,
html,
css,
unsafeCSS,
cssManager,
} from '@designestate/dees-element';
declare global {
interface HTMLElementTagNameMap {
'dees-input-fileupload': DeesInputFileupload;
}
}
@customElement('dees-input-fileupload')
export class DeesInputFileupload extends DeesElement {
public static demo = () => html`<dees-input-fileupload></dees-input-fileupload>`;
@property({
type: String,
})
public label: string = null;
@property({
type: String,
})
public key: string;
@property({
attribute: false,
})
public value: File[] = [];
@property()
public state: 'idle' | 'dragOver' | 'dropped' | 'uploading' | 'completed' = 'idle';
public static styles = [
cssManager.defaultStyles,
css`
:host {
position: relative;
display: grid;
margin: 10px 0px;
margin-bottom: 24px;
}
.maincontainer {
color: ${cssManager.bdTheme('#333', '#ccc')};
}
.label {
font-size: 14px;
margin-bottom: 5px;
}
.uploadButton {
position: relative;
cursor: pointer;
padding: 20px 20px;
max-width: 200px;
background: ${cssManager.bdTheme('#fafafa', '#333333')};
border-radius: 3px;
text-align: center;
}
.uploadButton::after {
top: 7px;
right: 7px;
left: 7px;
bottom: 7px;
transform: scale3d(0.9, 0.9, 1);
position: absolute;
content: '';
display: block;
border: 4px dashed rgba(255, 255, 255, 0);
transition: all 0.2s;
}
.uploadButton.dragOver::after {
transform: scale3d(1, 1, 1);
border: 4px dashed rgba(255, 255, 255, 0.3);
}
`,
];
public render(): TemplateResult {
return html`
<div class="maincontainer">
${this.label ? html`<div class="label">${this.label}</div>` : null}
<div class="uploadButton ${this.state === 'dragOver' ? 'dragOver' : ''}">Upload File! (Drag/Drop enabled)</div>
</div>
`;
}
public async updateValue(eventArg: Event) {
const target: any = eventArg.target;
this.value = target.value;
}
public firstUpdated() {
const dropArea = this.shadowRoot.querySelector('.uploadButton');
const handlerFunction = (eventArg: DragEvent) => {
eventArg.preventDefault();
switch(eventArg.type) {
case 'dragover':
this.state = 'dragOver';
break;
case 'dragleave':
this.state = 'idle';
break;
}
console.log(eventArg);
for (const file of Array.from(eventArg.dataTransfer.files)) {
this.value.push(file);
};
console.log(`Got ${this.value.length} files!`);
};
dropArea.addEventListener('dragenter', handlerFunction, false);
dropArea.addEventListener('dragleave', handlerFunction, false);
dropArea.addEventListener('dragover', handlerFunction, false);
dropArea.addEventListener('drop', handlerFunction, false);
}
}

View File

@ -0,0 +1,22 @@
import { DeesElement, html, customElement, cssManager, css } from '@designestate/dees-element';
@customElement('dees-newelement')
export class NewElement extends DeesElement {
public static css = [
cssManager.defaultStyles,
css`
:host {
display: block;
background: ${cssManager.bdTheme('#000', '#fff')};
}
`
]
public static demo = () => html`<dees-newelement></dees-newelement>`;
public render() {
return html`
Hello
`;
}
}

View File

@ -4,9 +4,11 @@ export * from './dees-form-submit';
export * from './dees-icon'; export * from './dees-icon';
export * from './dees-input-checkbox'; export * from './dees-input-checkbox';
export * from './dees-input-dropdown'; export * from './dees-input-dropdown';
export * from './dees-input-fileupload';
export * from './dees-input-quantityselector'; export * from './dees-input-quantityselector';
export * from './dees-input-radio'; export * from './dees-input-radio';
export * from './dees-input-text'; export * from './dees-input-text';
export * from './dees-toast'; export * from './dees-toast';
export * from './dees-updater'; export * from './dees-updater';
export * from './dees-windowlayer'; export * from './dees-windowlayer';
export * from './dees-newelement';