fix(core): update
This commit is contained in:
parent
c3bdec176b
commit
7baab5d7ea
14805
package-lock.json
generated
14805
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
13
package.json
13
package.json
@ -17,17 +17,18 @@
|
||||
"@designestate/dees-domtools": "^2.0.23",
|
||||
"@designestate/dees-element": "^2.0.16",
|
||||
"@designestate/dees-wcctools": "^1.0.74",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.1.2",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.1.2",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.1.2",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.1.2",
|
||||
"@tsclass/tsclass": "^4.0.19",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.2.1",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.2.1",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.2.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.2.1",
|
||||
"@pushrocks/smartpromise": "^3.1.7",
|
||||
"@tsclass/tsclass": "^4.0.28",
|
||||
"pdfjs-dist": "^2.15.349"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gitzone/tsbuild": "^2.1.65",
|
||||
"@gitzone/tsbundle": "^2.0.7",
|
||||
"@gitzone/tstest": "^1.0.73",
|
||||
"@gitzone/tstest": "^1.0.74",
|
||||
"@gitzone/tswatch": "^2.0.5",
|
||||
"@pushrocks/projectinfo": "^5.0.1",
|
||||
"@pushrocks/tapbundle": "^5.0.4"
|
||||
|
||||
4440
pnpm-lock.yaml
Normal file
4440
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@designestate/dees-catalog',
|
||||
version: '1.0.100',
|
||||
version: '1.0.101',
|
||||
description: 'website for lossless.com'
|
||||
}
|
||||
|
||||
@ -48,12 +48,17 @@ export class DeesInputFileupload extends DeesElement {
|
||||
public required: boolean = false;
|
||||
|
||||
@property({
|
||||
type: Boolean
|
||||
type: Boolean,
|
||||
})
|
||||
public disabled: boolean = false;
|
||||
|
||||
@property({
|
||||
type: String,
|
||||
})
|
||||
public buttonText: string = 'Upload File...';
|
||||
|
||||
constructor() {
|
||||
super()
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
@ -78,27 +83,38 @@ export class DeesInputFileupload extends DeesElement {
|
||||
.uploadButton {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 20px 20px;
|
||||
max-width: 200px;
|
||||
padding: 8px;
|
||||
max-width: 600px;
|
||||
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);
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
transform: scale3d(0.98, 0.9, 1);
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: block;
|
||||
border: 4px dashed rgba(255, 255, 255, 0);
|
||||
border: 2px 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);
|
||||
border: 2px dashed rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.uploadCandidate {
|
||||
text-align: left;
|
||||
border-bottom: 1px dashed #444;
|
||||
color: #fff;
|
||||
padding: 8px;
|
||||
font-family: 'Roboto Mono';
|
||||
}
|
||||
.uploadCandidate:last-child {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
@ -107,7 +123,10 @@ export class DeesInputFileupload extends DeesElement {
|
||||
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 class="uploadButton ${this.state === 'dragOver' ? 'dragOver' : ''}">
|
||||
${this.value.map((fileArg) => html` <div class="uploadCandidate">${fileArg.name} | ${fileArg.size}</div> `)}
|
||||
${this.buttonText}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@ -122,18 +141,24 @@ export class DeesInputFileupload extends DeesElement {
|
||||
const dropArea = this.shadowRoot.querySelector('.uploadButton');
|
||||
const handlerFunction = (eventArg: DragEvent) => {
|
||||
eventArg.preventDefault();
|
||||
switch(eventArg.type) {
|
||||
switch (eventArg.type) {
|
||||
case 'dragover':
|
||||
this.state = 'dragOver';
|
||||
this.buttonText = 'release to upload file...';
|
||||
break;
|
||||
case 'dragleave':
|
||||
this.state = 'idle';
|
||||
this.buttonText = 'Upload File...';
|
||||
break;
|
||||
case 'drop':
|
||||
this.state = 'idle';
|
||||
this.buttonText = 'Upload more files...';
|
||||
}
|
||||
console.log(eventArg);
|
||||
for (const file of Array.from(eventArg.dataTransfer.files)) {
|
||||
this.value.push(file);
|
||||
};
|
||||
this.requestUpdate();
|
||||
}
|
||||
console.log(`Got ${this.value.length} files!`);
|
||||
};
|
||||
dropArea.addEventListener('dragenter', handlerFunction, false);
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { DeesElement, property, html, customElement, domtools } from '@designestate/dees-element';
|
||||
import { TemplateResult } from 'lit-html';
|
||||
import { DeesElement, property, html, customElement, domtools, TemplateResult } from '@designestate/dees-element';
|
||||
|
||||
import { Deferred } from '@pushrocks/smartpromise';
|
||||
|
||||
|
||||
@ -17,6 +17,13 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
export interface IDataAction<T = any> {
|
||||
name: string;
|
||||
icon: string;
|
||||
useTableBehaviour?: 'upload' | 'cancelUpload' | 'none';
|
||||
actionFunc: (itemArg: T) => Promise<any>;
|
||||
}
|
||||
|
||||
@customElement('dees-table')
|
||||
export class DeesTable<T> extends DeesElement {
|
||||
public static demo = () => html`
|
||||
@ -61,8 +68,15 @@ export class DeesTable<T> extends DeesElement {
|
||||
description: 'Office-Supplies - STAPLES BREMEN',
|
||||
},
|
||||
]}
|
||||
>This is a slotted Text</dees-table
|
||||
>
|
||||
.dataActions="${[{
|
||||
name: 'upload',
|
||||
icon: 'upload',
|
||||
useTableBehaviour: 'upload',
|
||||
actionFunc: async (itemArg: any) => {
|
||||
|
||||
},
|
||||
}] as IDataAction[]}"
|
||||
>This is a slotted Text</dees-table>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -81,6 +95,11 @@ export class DeesTable<T> extends DeesElement {
|
||||
})
|
||||
public data: T[] = [];
|
||||
|
||||
@property({
|
||||
type: Array,
|
||||
})
|
||||
public dataActions: IDataAction[] = [];
|
||||
|
||||
@property({
|
||||
type: Object,
|
||||
})
|
||||
@ -114,7 +133,7 @@ export class DeesTable<T> extends DeesElement {
|
||||
background: ${cssManager.bdTheme('#fafafa', '#333333')};
|
||||
border-radius: 3px;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
|
||||
box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.headingSeparation {
|
||||
margin-top: 7px;
|
||||
@ -178,6 +197,20 @@ export class DeesTable<T> extends DeesElement {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.action {
|
||||
margin: -8px 0px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.action:first-child {
|
||||
margin-left: -8px;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.action:hover {
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.tableStatistics {
|
||||
padding: 4px 16px;
|
||||
font-size: 12px;
|
||||
@ -213,6 +246,15 @@ export class DeesTable<T> extends DeesElement {
|
||||
</th>
|
||||
`
|
||||
)}
|
||||
${(() => {
|
||||
if (this.dataActions) {
|
||||
return html`
|
||||
<th>
|
||||
<div class="innerCellContainer">Actions</div>
|
||||
</th>
|
||||
`;
|
||||
}
|
||||
})()}
|
||||
</tr>
|
||||
${this.data.map(
|
||||
(itemArg) => html`
|
||||
@ -220,6 +262,21 @@ export class DeesTable<T> extends DeesElement {
|
||||
@click=${() => {
|
||||
this.selectedDataRow = itemArg;
|
||||
}}
|
||||
@dragenter=${async (eventArg) => {
|
||||
console.log('hey');
|
||||
eventArg.preventDefault();
|
||||
eventArg.stopPropagation();
|
||||
}}
|
||||
@dragover=${async (eventArg) => {
|
||||
console.log('hey');
|
||||
eventArg.preventDefault();
|
||||
eventArg.stopPropagation();
|
||||
}}
|
||||
@drop=${async (eventArg) => {
|
||||
console.log('hey');
|
||||
eventArg.preventDefault();
|
||||
eventArg.stopPropagation();
|
||||
}}
|
||||
class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
|
||||
>
|
||||
${headings.map(
|
||||
@ -229,6 +286,23 @@ export class DeesTable<T> extends DeesElement {
|
||||
</td>
|
||||
`
|
||||
)}
|
||||
${(() => {
|
||||
if (this.dataActions) {
|
||||
return html`
|
||||
<td>
|
||||
<div class="innerCellContainer">
|
||||
${(() => {
|
||||
const actions: TemplateResult[] = [];
|
||||
for (const action of this.dataActions) {
|
||||
actions.push(html`<div class="action">${action.name}</div>`)
|
||||
}
|
||||
return actions;
|
||||
})()}
|
||||
</div>
|
||||
</td>
|
||||
`;
|
||||
}
|
||||
})()}
|
||||
</tr>
|
||||
`
|
||||
)}
|
||||
@ -238,7 +312,9 @@ export class DeesTable<T> extends DeesElement {
|
||||
: html` <div class="noDataSet">No data set!</div> `}
|
||||
<div class="tableStatistics">
|
||||
${this.data.length} data rows (total) |
|
||||
${this.selectedDataRow ? html`Row ${this.data.indexOf(this.selectedDataRow) + 1} selected` : html`No row selected`}
|
||||
${this.selectedDataRow
|
||||
? html`Row ${this.data.indexOf(this.selectedDataRow) + 1} selected`
|
||||
: html`No row selected`}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user