tp-elements/tp-table
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update and fixes

Browse Source
This commit is contained in:
trading_peter
2023-01-13 11:52:10 +01:00
parent 1f7f38932f
commit 98fbf98a7f
3 changed files with 38 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
tp-table-item.js
View File

@ -69,13 +69,13 @@ class TpTableItem extends BaseElement {
}
render() {
const { columns, item } = this;
const { columns, item, selected } = this;
return html`
<div id="grid" class="wrap" part="row">
${this.selectable ? html`
<div class="chk" part="chk">
<tp-checkbox id="selectionChk" @click=${this._updateSelectionState}></tp-checkbox>
<tp-checkbox id="selectionChk" .checked=${selected} @click=${this._updateSelectionState}></tp-checkbox>
</div>
` : null}
${Array.isArray(columns) ? columns.map((column, idx) => {
@ -93,6 +93,7 @@ class TpTableItem extends BaseElement {
item: { type: Object, hasChanged: () => true },
columns: { type: Array },
selectable: { type: Boolean },
selected: { type: Boolean, reflect: true },
};
}
@ -101,10 +102,6 @@ class TpTableItem extends BaseElement {
}
async updated(changes) {
if (changes.has('item') && this.selectable) {
this.$.selectionChk.checked = Boolean(this.item.__selected__);
}
if (changes.has('columns') && Array.isArray(this.columns)) {
let colWidths = this.columns.filter(col => col.required || col.visible).map(col => col.width).join(' ');
@ -135,9 +132,8 @@ class TpTableItem extends BaseElement {
_updateSelectionState(e) {
const target = e.target;
setTimeout(() => {
this.dispatchEvent(new CustomEvent('selection-changed', { detail: { item: this.item, selected: target.checked }, bubbles: true, composed: true }));
}, 0);
this.selected = e.target.checked;
this.dispatchEvent(new CustomEvent('row-selection-changed', { detail: { item: this.item, selected: target.checked }, bubbles: true, composed: true }));
}
}