@fluid-topics/ft-filterable-table 1.1.38 → 1.1.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -8,7 +8,7 @@ import { html, nothing } from "lit";
|
|
|
8
8
|
import { property, state } from "lit/decorators.js";
|
|
9
9
|
import { repeat } from "lit/directives/repeat.js";
|
|
10
10
|
import { unsafeHTML } from "lit/directives/unsafe-html.js";
|
|
11
|
-
import { FtLitElement } from "@fluid-topics/ft-wc-utils";
|
|
11
|
+
import { FtLitElement, jsonProperty } from "@fluid-topics/ft-wc-utils";
|
|
12
12
|
import "@fluid-topics/ft-select";
|
|
13
13
|
import "@fluid-topics/ft-text-field";
|
|
14
14
|
import "@fluid-topics/ft-button";
|
|
@@ -39,7 +39,7 @@ class FtFilterableTable extends FtLitElement {
|
|
|
39
39
|
return html `
|
|
40
40
|
<style>
|
|
41
41
|
.table {
|
|
42
|
-
grid-template-columns:
|
|
42
|
+
grid-template-columns: ${this.columns.map(column => { var _a; return (_a = column.gridTemplateColumn) !== null && _a !== void 0 ? _a : "minmax(min-content, auto)"; }).join(" ")};
|
|
43
43
|
}
|
|
44
44
|
</style>
|
|
45
45
|
<div class="table">
|
|
@@ -47,11 +47,11 @@ class FtFilterableTable extends FtLitElement {
|
|
|
47
47
|
${repeat(this.columns, (_, index) => "header-cell-" + index, (column, index) => this.renderHeader(column, index))}
|
|
48
48
|
</div>
|
|
49
49
|
${repeat(data, (_, rowIndex) => "row-" + rowIndex, (row, rowIndex) => html `
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
50
|
+
<div class="row"
|
|
51
|
+
@click=${() => this.dispatchEvent(new RowClickEvent(row))}>
|
|
52
|
+
${repeat(this.columns, (_, columnIndex) => "cell-" + columnIndex + "-" + rowIndex, (column, columnIndex) => this.renderCell(column, columnIndex, row, rowIndex))}
|
|
53
|
+
</div>
|
|
54
|
+
`)}
|
|
55
55
|
</div>
|
|
56
56
|
`;
|
|
57
57
|
}
|
|
@@ -147,14 +147,14 @@ class FtFilterableTable extends FtLitElement {
|
|
|
147
147
|
};
|
|
148
148
|
return html `
|
|
149
149
|
<ft-button
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
150
|
+
round
|
|
151
|
+
dense
|
|
152
|
+
class="${((_a = column.sortable) !== null && _a !== void 0 ? _a : true) ? "" : "hidden"}"
|
|
153
|
+
iconVariant="material"
|
|
154
|
+
icon="${sortIcon}"
|
|
155
|
+
label="Sort ${column.title}"
|
|
156
|
+
@click=${sort}
|
|
157
|
+
part="${this.columnPart("sort-button", index)}"
|
|
158
158
|
></ft-button>
|
|
159
159
|
`;
|
|
160
160
|
}
|
|
@@ -169,9 +169,9 @@ class FtFilterableTable extends FtLitElement {
|
|
|
169
169
|
return html `
|
|
170
170
|
<div class="column-filter" part="${this.columnPart("filter-container", index)}">
|
|
171
171
|
<ft-text-field
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
172
|
+
label="Search ${column.title}"
|
|
173
|
+
@live-change="${onChange}"
|
|
174
|
+
part="${this.columnPart("filter", index)}"
|
|
175
175
|
></ft-text-field>
|
|
176
176
|
</div>
|
|
177
177
|
`;
|
|
@@ -221,16 +221,16 @@ class FtFilterableTable extends FtLitElement {
|
|
|
221
221
|
}
|
|
222
222
|
FtFilterableTable.styles = styles;
|
|
223
223
|
__decorate([
|
|
224
|
-
|
|
224
|
+
jsonProperty([])
|
|
225
225
|
], FtFilterableTable.prototype, "data", void 0);
|
|
226
226
|
__decorate([
|
|
227
|
-
|
|
227
|
+
jsonProperty([])
|
|
228
228
|
], FtFilterableTable.prototype, "columns", void 0);
|
|
229
229
|
__decorate([
|
|
230
|
-
|
|
230
|
+
jsonProperty(undefined)
|
|
231
231
|
], FtFilterableTable.prototype, "sort", void 0);
|
|
232
232
|
__decorate([
|
|
233
|
-
property()
|
|
233
|
+
property({ type: Boolean })
|
|
234
234
|
], FtFilterableTable.prototype, "stickyHeaders", void 0);
|
|
235
235
|
__decorate([
|
|
236
236
|
state()
|
|
@@ -1490,7 +1490,7 @@ const Do={fontSize:o.FtCssVariableFactory.create("--ft-text-field-font-size","",
|
|
|
1490
1490
|
`;var Ni=function(t,o,e,i){for(var r,n=arguments.length,a=n<3?o:null===i?i=Object.getOwnPropertyDescriptor(o,e):i,l=t.length-1;l>=0;l--)(r=t[l])&&(a=(n<3?r(a):n>3?r(o,e,a):r(o,e))||a);return n>3&&a&&Object.defineProperty(o,e,a),a};const Si=t=>e.html`${t}`,wi=(t,o)=>t-o;class Ci extends o.FtLitElement{constructor(){super(...arguments),this.data=[],this.columns=[],this.stickyHeaders=!1,this.filters=[],this.selectData=[]}init(t,o,e){this.data=t,this.columns=o,this.sort=e}render(){let t=this.sortData(this.filterData());return e.html`
|
|
1491
1491
|
<style>
|
|
1492
1492
|
.table {
|
|
1493
|
-
grid-template-columns:
|
|
1493
|
+
grid-template-columns: ${this.columns.map((t=>{var o;return null!==(o=t.gridTemplateColumn)&&void 0!==o?o:"minmax(min-content, auto)"})).join(" ")};
|
|
1494
1494
|
}
|
|
1495
1495
|
</style>
|
|
1496
1496
|
<div class="table">
|
|
@@ -1498,11 +1498,11 @@ const Do={fontSize:o.FtCssVariableFactory.create("--ft-text-field-font-size","",
|
|
|
1498
1498
|
${r.repeat(this.columns,((t,o)=>"header-cell-"+o),((t,o)=>this.renderHeader(t,o)))}
|
|
1499
1499
|
</div>
|
|
1500
1500
|
${r.repeat(t,((t,o)=>"row-"+o),((t,o)=>e.html`
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1505
|
-
|
|
1501
|
+
<div class="row"
|
|
1502
|
+
@click=${()=>this.dispatchEvent(new vi(t))}>
|
|
1503
|
+
${r.repeat(this.columns,((t,e)=>"cell-"+e+"-"+o),((e,i)=>this.renderCell(e,i,t,o)))}
|
|
1504
|
+
</div>
|
|
1505
|
+
`))}
|
|
1506
1506
|
</div>
|
|
1507
1507
|
`}filterData(){return this.filters.reduce(((t,o,e)=>{var i;const r=this.columns[e];if(o&&o.value)switch(null!==(i=r.filter)&&void 0!==i?i:"text"){case"text":return t.filter((t=>this.getValueAsString(r,t,e).toLowerCase().includes(o.value.toLowerCase())));case"select":return t.filter((t=>this.getValueAsString(r,t,e)===o.value))}return t}),this.data)}sortData(t){var o;if(this.currentSort){const e=this.columns[this.currentSort.column],i=null!==(o=e.comparator)&&void 0!==o?o:wi,r="asc"===this.currentSort.order?i:(t,o)=>-i(t,o);return[...t].sort(((t,o)=>r(this.getValue(e,t),this.getValue(e,o))))}return t}update(t){super.update(t),t.has("sort")&&(this.currentSort=this.sort),(t.has("data")||t.has("columns"))&&this.updateSelectData()}updateSelectData(){this.selectData=[];const t=this.data,o=this.columns;for(let e in o){const i=o[e];"select"===i.filter&&(this.selectData[e]=[...new Set(t.map(((t,o)=>this.getValueAsString(i,t,o))))].sort(((t,o)=>t.localeCompare(o))))}this.requestUpdate()}renderHeader(t,o){const i={"header-cell":!0,"header-cell--sticky":this.stickyHeaders};return e.html`
|
|
1508
1508
|
<div class="${a.classMap(i)}"
|
|
@@ -1518,21 +1518,21 @@ const Do={fontSize:o.FtCssVariableFactory.create("--ft-text-field-font-size","",
|
|
|
1518
1518
|
</div>
|
|
1519
1519
|
`}renderColumnSort(t,o){var i;const r=this.currentSort&&this.currentSort.column===o,n=r?"asc"===this.currentSort.order?"expand_more":"expand_less":"unfold_more";return e.html`
|
|
1520
1520
|
<ft-button
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1521
|
+
round
|
|
1522
|
+
dense
|
|
1523
|
+
class="${null===(i=t.sortable)||void 0===i||i?"":"hidden"}"
|
|
1524
|
+
iconVariant="material"
|
|
1525
|
+
icon="${n}"
|
|
1526
|
+
label="Sort ${t.title}"
|
|
1527
|
+
@click=${()=>{var t;r?"asc"===(null===(t=this.currentSort)||void 0===t?void 0:t.order)?this.currentSort={column:o,order:"desc"}:this.currentSort=void 0:this.currentSort={column:o,order:"asc"}}}
|
|
1528
|
+
part="${this.columnPart("sort-button",o)}"
|
|
1529
1529
|
></ft-button>
|
|
1530
1530
|
`}renderColumnFilter(t,o){var i,r;const n=t=>{this.filters[o]={value:t.detail},this.requestUpdate()};switch(null!==(i=t.filter)&&void 0!==i?i:"text"){case"text":return e.html`
|
|
1531
1531
|
<div class="column-filter" part="${this.columnPart("filter-container",o)}">
|
|
1532
1532
|
<ft-text-field
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1533
|
+
label="Search ${t.title}"
|
|
1534
|
+
@live-change="${n}"
|
|
1535
|
+
part="${this.columnPart("filter",o)}"
|
|
1536
1536
|
></ft-text-field>
|
|
1537
1537
|
</div>
|
|
1538
1538
|
`;case"select":const i=null!==(r=this.selectData[o])&&void 0!==r?r:[];return i.length?e.html`
|
|
@@ -1551,4 +1551,4 @@ const Do={fontSize:o.FtCssVariableFactory.create("--ft-text-field-font-size","",
|
|
|
1551
1551
|
part="${this.columnPart("cell",o)} cell-row-${r} cell-column-${o}-row-${r}">
|
|
1552
1552
|
${(t=>{const o=l(t,r);return"string"==typeof o?n.unsafeHTML(o):o})(this.getValue(t,i))}
|
|
1553
1553
|
</div>
|
|
1554
|
-
`}getValue(t,o){return"string"==typeof t.getter?o[t.getter]:t.getter(o)}getValueAsString(t,o,e){const i=this.getValue(t,o);return"function"==typeof t.stringify?t.stringify(i,e):(t=>""+t)(i)}}Ci.styles=$i,Ni([
|
|
1554
|
+
`}getValue(t,o){return"string"==typeof t.getter?o[t.getter]:t.getter(o)}getValueAsString(t,o,e){const i=this.getValue(t,o);return"function"==typeof t.stringify?t.stringify(i,e):(t=>""+t)(i)}}Ci.styles=$i,Ni([o.jsonProperty([])],Ci.prototype,"data",void 0),Ni([o.jsonProperty([])],Ci.prototype,"columns",void 0),Ni([o.jsonProperty(void 0)],Ci.prototype,"sort",void 0),Ni([i.property({type:Boolean})],Ci.prototype,"stickyHeaders",void 0),Ni([i.state()],Ci.prototype,"currentSort",void 0),o.customElement("ft-filterable-table")(Ci),t.FtFilterableTable=Ci,t.FtFilterableTableCssVariables=Oi,t.RowClickEvent=vi,t.styles=$i}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litRepeat,ftGlobals.litUnsafeHTML,ftGlobals.litClassMap);
|