fix(core): update
This commit is contained in:
parent
e88605a4aa
commit
e6adbf9b6d
2556
package-lock.json
generated
2556
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
20
package.json
20
package.json
@ -13,20 +13,20 @@
|
||||
"author": "Lossless GmbH",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@designestate/dees-domtools": "^1.0.84",
|
||||
"@designestate/dees-element": "^1.0.10",
|
||||
"@designestate/dees-wcctools": "^1.0.54",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.34",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.15.2",
|
||||
"@fortawesome/free-regular-svg-icons": "^5.15.2",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.2",
|
||||
"typescript": "^4.1.5"
|
||||
"@designestate/dees-domtools": "^1.0.87",
|
||||
"@designestate/dees-element": "^1.0.19",
|
||||
"@designestate/dees-wcctools": "^1.0.57",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.35",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.15.3",
|
||||
"@fortawesome/free-regular-svg-icons": "^5.15.3",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.3",
|
||||
"typescript": "^4.2.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gitzone/tsbuild": "^2.1.25",
|
||||
"@gitzone/tsbundle": "^1.0.78",
|
||||
"@gitzone/tsbundle": "^1.0.80",
|
||||
"@gitzone/tstest": "^1.0.52",
|
||||
"@gitzone/tswatch": "^1.0.50",
|
||||
"@gitzone/tswatch": "^1.0.52",
|
||||
"@pushrocks/projectinfo": "^4.0.5",
|
||||
"@pushrocks/tapbundle": "^3.2.14",
|
||||
"tslint": "^6.1.3",
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -10,7 +19,7 @@ declare global {
|
||||
|
||||
@customElement('dees-button')
|
||||
export class DeesButton extends DeesElement {
|
||||
public static demo = () => html`<dees-button></dees-button>`
|
||||
public static demo = () => html`<dees-button></dees-button>`;
|
||||
|
||||
@property()
|
||||
text: string;
|
||||
@ -31,79 +40,87 @@ export class DeesButton extends DeesElement {
|
||||
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 {
|
||||
return html`
|
||||
${domtools.elementBasic.styles}
|
||||
<style>
|
||||
: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: ${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}">
|
||||
<div
|
||||
class="button ${this.isHidden ? 'hidden' : 'block'} ${this.type} ${this.disabled
|
||||
? 'disabled'
|
||||
: null}"
|
||||
@click="${this.dispatchClick}"
|
||||
>
|
||||
${this.text ? this.text : this.textContent}
|
||||
</div>
|
||||
`;
|
||||
@ -111,19 +128,20 @@ export class DeesButton extends DeesElement {
|
||||
|
||||
public async dispatchClick() {
|
||||
if (this.disabled) {
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
this.dispatchEvent(new CustomEvent('clicked', {
|
||||
detail: {
|
||||
data: this.eventDetailData
|
||||
},
|
||||
bubbles: true
|
||||
}));
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('clicked', {
|
||||
detail: {
|
||||
data: this.eventDetailData,
|
||||
},
|
||||
bubbles: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
public async firstUpdated () {
|
||||
public async firstUpdated() {
|
||||
if (!this.textContent) {
|
||||
this.textContent = 'Button';
|
||||
this.performUpdate();
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { customElement, html, LitElement } from 'lit-element';
|
||||
|
||||
import {DeesForm} from './dees-form';
|
||||
import { customElement, html, DeesElement, css, cssManager } from '@designestate/dees-element';
|
||||
import { DeesForm } from './dees-form';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@ -9,13 +8,15 @@ declare global {
|
||||
}
|
||||
|
||||
@customElement('dees-form-submit')
|
||||
export class DeesFormSubmit extends LitElement {
|
||||
export class DeesFormSubmit extends DeesElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [cssManager.defaultStyles, css``];
|
||||
|
||||
public render() {
|
||||
return html`
|
||||
<dees-button @click="${this.submit}">${this.textContent}</dees-button>
|
||||
`;
|
||||
return html` <dees-button @click="${this.submit}">${this.textContent}</dees-button> `;
|
||||
}
|
||||
|
||||
public async submit() {
|
||||
|
||||
124
ts_web/elements/dees-input-fileupload.ts
Normal file
124
ts_web/elements/dees-input-fileupload.ts
Normal 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);
|
||||
}
|
||||
}
|
||||
22
ts_web/elements/dees-newelement.ts
Normal file
22
ts_web/elements/dees-newelement.ts
Normal 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
|
||||
`;
|
||||
}
|
||||
}
|
||||
@ -4,9 +4,11 @@ export * from './dees-form-submit';
|
||||
export * from './dees-icon';
|
||||
export * from './dees-input-checkbox';
|
||||
export * from './dees-input-dropdown';
|
||||
export * from './dees-input-fileupload';
|
||||
export * from './dees-input-quantityselector';
|
||||
export * from './dees-input-radio';
|
||||
export * from './dees-input-text';
|
||||
export * from './dees-toast';
|
||||
export * from './dees-updater';
|
||||
export * from './dees-windowlayer';
|
||||
export * from './dees-newelement';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user