fix(core): update

This commit is contained in:
Philipp Kunz 2021-10-07 18:01:05 +02:00
parent 820d6ae40f
commit 72f7782898
2 changed files with 224 additions and 0 deletions

View File

@ -0,0 +1,223 @@
import {
customElement,
html,
DeesElement,
property,
TemplateResult,
cssManager,
css,
unsafeCSS,
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
'dees-table': DeesTable<any>;
}
}
@customElement('dees-table')
export class DeesTable<T> extends DeesElement {
public static demo = () => html`
<style>
.demoWrapper {
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
padding: 60px;
background: #000000;
}
</style>
<div class="demoWrapper">
<dees-table
heading1="Current Account Statement"
heading2="Bunq - Payment Account 2 - April 2021"
.data=${[
{
date: '2021-04-01',
amount: '2464.65 €',
description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
},
{
date: '2021-04-02',
amount: '165.65 €',
description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
},
{
date: '2021-04-03',
amount: '2999,00 €',
description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
},
{
date: '2021-04-01',
amount: '2464.65 €',
description: 'Office-Supplies - STAPLES BREMEN',
},
{
date: '2021-04-01',
amount: '2464.65 €',
description: 'Office-Supplies - STAPLES BREMEN',
},
]}
>This is a slotted Text</dees-table
>
</div>
`;
@property()
public heading1: string;
@property()
public heading2: string;
@property({
type: Array
})
public data: T[] = [];
@property()
public selectedDataRow: T;
@property({
type: String,
})
public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
@property({
type: String,
})
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
constructor() {
super();
}
public static styles = [
cssManager.defaultStyles,
css`
.mainbox {
color: #fff;
font-family: Roboto Mono;
padding: 20px;
display: block;
width: 100%;
min-height: 50px;
background: #393939;
border-radius: 3px;
}
.headingSeparation {
margin-top: 7px;
border-bottom: 1px solid #bcbcbc;
}
table,
.noDataSet {
margin-top: 20px;
color: #fff;
border-collapse: collapse;
width: 100%;
}
.noDataSet {
text-align: center;
}
tr {
border-bottom: 1px dashed #808080;
text-align: left;
}
tr:last-child {
border-bottom: none;
text-align: left;
}
tr:hover {
cursor: pointer;
}
tr:hover .innerCellContainer {
background: #ffffff10;
}
tr:first-child:hover {
cursor: auto;
}
tr:first-child:hover .innerCellContainer {
background: none;
}
th {
text-transform: uppercase;
}
th,
td {
padding: 3px 0px;
border-right: 1px dashed #808080;
}
.innerCellContainer {
padding: 7px 10px;
}
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;
}
.tableStatistics {
padding: 5px 20px;
font-size: 14px;
color: #ffffff90;
background: #00000050;
margin: 20px -20px -20px -20px;
}
`,
];
public render(): TemplateResult {
return html`
<div class="mainbox">
<!-- the heading part -->
<div>${this.heading1}</div>
<div>${this.heading2}</div>
<div class="headingSeparation"></div>
<!-- the actual table -->
<style></style>
${this.data.length > 0
? (() => {
const headings: string[] = Object.keys(this.data[0]);
return html`
<table>
<tr>
${headings.map(headingArg => html`
<th>
<div class="innerCellContainer">${headingArg}</div>
</th>
`)}
</tr>
${this.data.map(itemArg => html`
<tr>
${headings.map(headingArg => html`
<td>
<div class="innerCellContainer">${itemArg[headingArg]}</div>
</td>
`)}
</tr>
`)}
</table>
`;
})()
: html` <div class="noDataSet">No data set!</div> `}
<div class="tableStatistics">
${this.data.length} data rows (total) |
${this.selectedDataRow ? html`` : html`No row selected`}
</div>
</div>
`;
}
public async firstUpdated() {}
}

View File

@ -10,6 +10,7 @@ export * from './dees-input-radio';
export * from './dees-input-text'; export * from './dees-input-text';
export * from './dees-spinner'; export * from './dees-spinner';
export * from './dees-stepper'; export * from './dees-stepper';
export * from './dees-table';
export * from './dees-toast'; export * from './dees-toast';
export * from './dees-updater'; export * from './dees-updater';
export * from './dees-windowlayer'; export * from './dees-windowlayer';