import { customElement, html, DeesElement, property, TemplateResult, cssManager, css, unsafeCSS, state, } from '@designestate/dees-element'; import * as domtools from '@designestate/dees-domtools'; declare global { interface HTMLElementTagNameMap { 'dees-table': DeesTable; } } export interface IDataAction { name: string; iconName: string; useTableBehaviour?: 'upload' | 'cancelUpload' | 'none'; actionFunc: (itemArg: T) => Promise; } @customElement('dees-table') export class DeesTable extends DeesElement { public static demo = () => html`
This is a slotted Text
`; // INSTANCE @property({ type: String, }) public heading1: string = 'heading 1'; @property({ type: String, }) public heading2: string = 'heading 2'; @property({ type: Array, }) public data: T[] = []; @property({ type: Array, }) public dataActions: IDataAction[] = []; @property({ type: Object, }) public selectedDataRow: T; @property({ type: String, }) public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal'; @property({ type: String, }) public status: 'normal' | 'pending' | 'success' | 'error' = 'normal'; public files: File[] = []; public fileWeakMap = new WeakMap(); constructor() { super(); } public static styles = [ cssManager.defaultStyles, css` .mainbox { color: ${cssManager.bdTheme('#333', '#fff')}; font-family: Roboto Mono; font-size: 16px; padding: 16px; display: block; width: 100%; min-height: 50px; 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); } .headingSeparation { margin-top: 7px; border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#bcbcbc')}; } table, .noDataSet { margin-top: 16px; color: ${cssManager.bdTheme('#333', '#fff')}; border-collapse: collapse; width: 100%; } .noDataSet { text-align: center; } tr { border-bottom: 1px dashed ${cssManager.bdTheme('#999', '#808080')}; text-align: left; } tr:last-child { border-bottom: none; text-align: left; } tr:hover { cursor: pointer; } tr:hover .innerCellContainer { background: ${cssManager.bdTheme('#22222210', '#ffffff20')}; } tr:first-child:hover { cursor: auto; } tr:first-child:hover .innerCellContainer { background: none; } tr.selected .innerCellContainer { background: ${cssManager.bdTheme('#22222220', '#ffffff20')}; } th { text-transform: uppercase; } th, td { padding: 3px 0px; border-right: 1px dashed ${cssManager.bdTheme('#999', '#808080')}; } .innerCellContainer { padding: 6px 8px; } th:first-child .innerCellContainer, td:first-child .innerCellContainer { padding-left: 0px; } th:last-child .innerCellContainer, td:last-child .innerCellContainer { padding-right: 0px; } th:last-child, td:last-child { border-right: none; } .action { margin: -8px 0px; padding: 8px; line-height: 16px; display: inline-block; } .action:first-child { margin-left: -8px; width: min-content; } .action:hover { background: ${cssManager.bdTheme('#CCC', '#111')}; } .tableStatistics { padding: 4px 16px; font-size: 12px; color: ${cssManager.bdTheme('#111', '#ffffff90')}; background: ${cssManager.bdTheme('#eeeeeb', '#00000050')}; margin: 16px -16px -16px -16px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; } `, ]; public render(): TemplateResult { return html`
${this.heading1}
${this.heading2}
${this.data.length > 0 ? (() => { const headings: string[] = Object.keys(this.data[0]); return html` ${headings.map( (headingArg) => html` ` )} ${(() => { if (this.dataActions && this.dataActions.length > 0) { return html` `; } })()} ${this.data.map( (itemArg) => html` { this.selectedDataRow = itemArg; }} @dragenter=${async (eventArg: DragEvent) => { console.log((eventArg.target as HTMLElement).tagName) console.log('dragenter'); eventArg.preventDefault(); eventArg.stopPropagation(); (eventArg.target as HTMLElement).parentElement.style.background = '#800000'; }} @dragleave=${async (eventArg: DragEvent) => { console.log((eventArg.target as HTMLElement).tagName) console.log('dragleave'); eventArg.preventDefault(); eventArg.stopPropagation(); (eventArg.target as HTMLElement).parentElement.style.background = 'none'; }} @dragover=${async (eventArg: DragEvent) => { eventArg.preventDefault(); }} @drop=${async (eventArg: DragEvent) => { eventArg.preventDefault(); const newFiles = [] for (const file of Array.from(eventArg.dataTransfer.files)) { this.files.push(file); newFiles.push(file); this.requestUpdate(); } const result: File[] = this.fileWeakMap.get(itemArg as object); if (!result) { this.fileWeakMap.set(itemArg as object, newFiles) } else { result.push(...newFiles); } }} class="${itemArg === this.selectedDataRow ? 'selected' : ''}" > ${headings.map( (headingArg) => html` ` )} ${(() => { if (this.dataActions && this.dataActions.length > 0) { return html` `; } })()} ` )}
${headingArg}
Actions
${itemArg[headingArg]}
${(() => { const actions: TemplateResult[] = []; for (const action of this.dataActions) { actions.push(html`
${action.iconName ? html` ` : action.name}
`) } return actions; })()}
`; })() : html`
No data set!
`}
${this.data.length} data rows (total) | ${this.selectedDataRow ? html`Row ${this.data.indexOf(this.selectedDataRow) + 1} selected` : html`No row selected`}
`; } public async firstUpdated() {} }