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-domtools": "^2.0.23",
|
||||||
"@designestate/dees-element": "^2.0.16",
|
"@designestate/dees-element": "^2.0.16",
|
||||||
"@designestate/dees-wcctools": "^1.0.74",
|
"@designestate/dees-wcctools": "^1.0.74",
|
||||||
"@fortawesome/fontawesome-svg-core": "^6.1.2",
|
"@fortawesome/fontawesome-svg-core": "^6.2.1",
|
||||||
"@fortawesome/free-brands-svg-icons": "^6.1.2",
|
"@fortawesome/free-brands-svg-icons": "^6.2.1",
|
||||||
"@fortawesome/free-regular-svg-icons": "^6.1.2",
|
"@fortawesome/free-regular-svg-icons": "^6.2.1",
|
||||||
"@fortawesome/free-solid-svg-icons": "^6.1.2",
|
"@fortawesome/free-solid-svg-icons": "^6.2.1",
|
||||||
"@tsclass/tsclass": "^4.0.19",
|
"@pushrocks/smartpromise": "^3.1.7",
|
||||||
|
"@tsclass/tsclass": "^4.0.28",
|
||||||
"pdfjs-dist": "^2.15.349"
|
"pdfjs-dist": "^2.15.349"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@gitzone/tsbuild": "^2.1.65",
|
"@gitzone/tsbuild": "^2.1.65",
|
||||||
"@gitzone/tsbundle": "^2.0.7",
|
"@gitzone/tsbundle": "^2.0.7",
|
||||||
"@gitzone/tstest": "^1.0.73",
|
"@gitzone/tstest": "^1.0.74",
|
||||||
"@gitzone/tswatch": "^2.0.5",
|
"@gitzone/tswatch": "^2.0.5",
|
||||||
"@pushrocks/projectinfo": "^5.0.1",
|
"@pushrocks/projectinfo": "^5.0.1",
|
||||||
"@pushrocks/tapbundle": "^5.0.4"
|
"@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 = {
|
export const commitinfo = {
|
||||||
name: '@designestate/dees-catalog',
|
name: '@designestate/dees-catalog',
|
||||||
version: '1.0.100',
|
version: '1.0.101',
|
||||||
description: 'website for lossless.com'
|
description: 'website for lossless.com'
|
||||||
}
|
}
|
||||||
|
@ -48,12 +48,17 @@ export class DeesInputFileupload extends DeesElement {
|
|||||||
public required: boolean = false;
|
public required: boolean = false;
|
||||||
|
|
||||||
@property({
|
@property({
|
||||||
type: Boolean
|
type: Boolean,
|
||||||
})
|
})
|
||||||
public disabled: boolean = false;
|
public disabled: boolean = false;
|
||||||
|
|
||||||
|
@property({
|
||||||
|
type: String,
|
||||||
|
})
|
||||||
|
public buttonText: string = 'Upload File...';
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super()
|
super();
|
||||||
}
|
}
|
||||||
|
|
||||||
public static styles = [
|
public static styles = [
|
||||||
@ -78,27 +83,38 @@ export class DeesInputFileupload extends DeesElement {
|
|||||||
.uploadButton {
|
.uploadButton {
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 20px 20px;
|
padding: 8px;
|
||||||
max-width: 200px;
|
max-width: 600px;
|
||||||
background: ${cssManager.bdTheme('#fafafa', '#333333')};
|
background: ${cssManager.bdTheme('#fafafa', '#333333')};
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.uploadButton::after {
|
.uploadButton::after {
|
||||||
top: 7px;
|
top: 2px;
|
||||||
right: 7px;
|
right: 2px;
|
||||||
left: 7px;
|
left: 2px;
|
||||||
bottom: 7px;
|
bottom: 2px;
|
||||||
transform: scale3d(0.9, 0.9, 1);
|
transform: scale3d(0.98, 0.9, 1);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
border: 4px dashed rgba(255, 255, 255, 0);
|
border: 2px dashed rgba(255, 255, 255, 0);
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
}
|
}
|
||||||
.uploadButton.dragOver::after {
|
.uploadButton.dragOver::after {
|
||||||
transform: scale3d(1, 1, 1);
|
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`
|
return html`
|
||||||
<div class="maincontainer">
|
<div class="maincontainer">
|
||||||
${this.label ? html`<div class="label">${this.label}</div>` : null}
|
${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>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
@ -125,15 +144,21 @@ export class DeesInputFileupload extends DeesElement {
|
|||||||
switch (eventArg.type) {
|
switch (eventArg.type) {
|
||||||
case 'dragover':
|
case 'dragover':
|
||||||
this.state = 'dragOver';
|
this.state = 'dragOver';
|
||||||
|
this.buttonText = 'release to upload file...';
|
||||||
break;
|
break;
|
||||||
case 'dragleave':
|
case 'dragleave':
|
||||||
this.state = 'idle';
|
this.state = 'idle';
|
||||||
|
this.buttonText = 'Upload File...';
|
||||||
break;
|
break;
|
||||||
|
case 'drop':
|
||||||
|
this.state = 'idle';
|
||||||
|
this.buttonText = 'Upload more files...';
|
||||||
}
|
}
|
||||||
console.log(eventArg);
|
console.log(eventArg);
|
||||||
for (const file of Array.from(eventArg.dataTransfer.files)) {
|
for (const file of Array.from(eventArg.dataTransfer.files)) {
|
||||||
this.value.push(file);
|
this.value.push(file);
|
||||||
};
|
this.requestUpdate();
|
||||||
|
}
|
||||||
console.log(`Got ${this.value.length} files!`);
|
console.log(`Got ${this.value.length} files!`);
|
||||||
};
|
};
|
||||||
dropArea.addEventListener('dragenter', handlerFunction, false);
|
dropArea.addEventListener('dragenter', handlerFunction, false);
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import { DeesElement, property, html, customElement, domtools } from '@designestate/dees-element';
|
import { DeesElement, property, html, customElement, domtools, TemplateResult } from '@designestate/dees-element';
|
||||||
import { TemplateResult } from 'lit-html';
|
|
||||||
|
|
||||||
import { Deferred } from '@pushrocks/smartpromise';
|
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')
|
@customElement('dees-table')
|
||||||
export class DeesTable<T> extends DeesElement {
|
export class DeesTable<T> extends DeesElement {
|
||||||
public static demo = () => html`
|
public static demo = () => html`
|
||||||
@ -61,8 +68,15 @@ export class DeesTable<T> extends DeesElement {
|
|||||||
description: 'Office-Supplies - STAPLES BREMEN',
|
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>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@ -81,6 +95,11 @@ export class DeesTable<T> extends DeesElement {
|
|||||||
})
|
})
|
||||||
public data: T[] = [];
|
public data: T[] = [];
|
||||||
|
|
||||||
|
@property({
|
||||||
|
type: Array,
|
||||||
|
})
|
||||||
|
public dataActions: IDataAction[] = [];
|
||||||
|
|
||||||
@property({
|
@property({
|
||||||
type: Object,
|
type: Object,
|
||||||
})
|
})
|
||||||
@ -178,6 +197,20 @@ export class DeesTable<T> extends DeesElement {
|
|||||||
border-right: none;
|
border-right: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.action {
|
||||||
|
margin: -8px 0px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action:first-child {
|
||||||
|
margin-left: -8px;
|
||||||
|
width: min-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action:hover {
|
||||||
|
background: #111;
|
||||||
|
}
|
||||||
|
|
||||||
.tableStatistics {
|
.tableStatistics {
|
||||||
padding: 4px 16px;
|
padding: 4px 16px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
@ -213,6 +246,15 @@ export class DeesTable<T> extends DeesElement {
|
|||||||
</th>
|
</th>
|
||||||
`
|
`
|
||||||
)}
|
)}
|
||||||
|
${(() => {
|
||||||
|
if (this.dataActions) {
|
||||||
|
return html`
|
||||||
|
<th>
|
||||||
|
<div class="innerCellContainer">Actions</div>
|
||||||
|
</th>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
})()}
|
||||||
</tr>
|
</tr>
|
||||||
${this.data.map(
|
${this.data.map(
|
||||||
(itemArg) => html`
|
(itemArg) => html`
|
||||||
@ -220,6 +262,21 @@ export class DeesTable<T> extends DeesElement {
|
|||||||
@click=${() => {
|
@click=${() => {
|
||||||
this.selectedDataRow = itemArg;
|
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' : ''}"
|
class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
|
||||||
>
|
>
|
||||||
${headings.map(
|
${headings.map(
|
||||||
@ -229,6 +286,23 @@ export class DeesTable<T> extends DeesElement {
|
|||||||
</td>
|
</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>
|
</tr>
|
||||||
`
|
`
|
||||||
)}
|
)}
|
||||||
@ -238,7 +312,9 @@ export class DeesTable<T> extends DeesElement {
|
|||||||
: html` <div class="noDataSet">No data set!</div> `}
|
: html` <div class="noDataSet">No data set!</div> `}
|
||||||
<div class="tableStatistics">
|
<div class="tableStatistics">
|
||||||
${this.data.length} data rows (total) |
|
${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>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
Loading…
Reference in New Issue
Block a user