@lazhus/kg-ui 0.10.10 → 0.10.11
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.
package/custom-elements.json
CHANGED
|
@@ -1520,13 +1520,13 @@
|
|
|
1520
1520
|
"text": "object"
|
|
1521
1521
|
},
|
|
1522
1522
|
"static": true,
|
|
1523
|
-
"default": "{ columns: { type: Array }, // [{ label: 'Name', field: 'name', width: '100px', align: 'left', sortable: true }] data: { type: Array }, loading: { type: Boolean }, striped: { type: Boolean, reflect: true }, bordered: { type: Boolean, reflect: true }, hover: { type: Boolean, reflect: true }, selectable: { type: Boolean }, selectionMode: { type: String, attribute: 'selection-mode' }, // 'single' | 'multiple', default 'multiple' selectedRows: { type: Array, state: true }, // Sorting sortable: { type: Boolean }, // Global sort enable/disable _sortColumn: { type: String, state: true }, _sortDirection: { type: String, state: true }, // 'asc' | 'desc' // Pagination pagination: { type: Boolean }, pageSize: { type: Number, attribute: 'page-size' }, pageSizeOptions: { type: Array, attribute: 'page-size-options' }, total: { type: Number }, // Total records for server-side serverSide: { type: Boolean, attribute: 'server-side' }, currentPage: { type: Number, attribute: 'current-page' } }"
|
|
1523
|
+
"default": "{ columns: { type: Array }, // [{ label: 'Name', field: 'name', width: '100px', align: 'left', sortable: true }] data: { type: Array }, loading: { type: Boolean }, striped: { type: Boolean, reflect: true }, bordered: { type: Boolean, reflect: true }, hover: { type: Boolean, reflect: true }, selectable: { type: Boolean }, selectionMode: { type: String, attribute: 'selection-mode' }, // 'single' | 'multiple', default 'multiple' selectedRows: { type: Array, state: true }, // Row styling: (row) => string. Returns extra class name(s) for a row. // Property-only (no attribute) because the value is a function. rowClassName: { attribute: false }, // Sorting sortable: { type: Boolean }, // Global sort enable/disable _sortColumn: { type: String, state: true }, _sortDirection: { type: String, state: true }, // 'asc' | 'desc' // Pagination pagination: { type: Boolean }, pageSize: { type: Number, attribute: 'page-size' }, pageSizeOptions: { type: Array, attribute: 'page-size-options' }, total: { type: Number }, // Total records for server-side serverSide: { type: Boolean, attribute: 'server-side' }, currentPage: { type: Number, attribute: 'current-page' } }"
|
|
1524
1524
|
},
|
|
1525
1525
|
{
|
|
1526
1526
|
"kind": "field",
|
|
1527
1527
|
"name": "styles",
|
|
1528
1528
|
"static": true,
|
|
1529
|
-
"default": "css` :host { display: block; width: 100%; font-family: inherit; color: var(--kg-text); --datagrid-border: var(--kg-border, #e2e8f0); --datagrid-header-bg: var(--kg-surface, #f8fafc); --datagrid-selected-bg: rgba(var(--kg-primary-rgb, 65, 171, 52), 0.08); } .wrapper { display: flex; flex-direction: column; gap: 1rem; width: 100%; } .table-container { width: 100%; overflow-x: auto; border: 1px solid var(--datagrid-border); border-radius: var(--kg-radius-md, 8px); background: var(--kg-bg); } table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; } thead { background-color: var(--datagrid-header-bg); border-bottom: 2px solid var(--datagrid-border); } th { padding: 12px 16px; font-weight: 600; color: var(--kg-text-muted); user-select: none; transition: background 0.2s; } th.sortable { cursor: pointer; } th.sortable:hover { background-color: rgba(0,0,0,0.03); color: var(--kg-text); } td { padding: 12px 16px; border-bottom: 1px solid var(--datagrid-border); transition: background 0.2s; } tr:last-child td { border-bottom: none; } /* Modifiers */ :host([striped]) tbody tr:nth-child(even) { background-color: var(--kg-surface); } :host([bordered]) td, :host([bordered]) th { border-right: 1px solid var(--datagrid-border); } :host([bordered]) td:last-child, :host([bordered]) th:last-child { border-right: none; } tbody tr { transition: background-color 0.2s; } :host([hover]) tbody tr:hover { background-color: var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)); } /* Selection */ .checkbox-cell { width: 48px; text-align: center; padding: 0 8px; } /* kg-checkbox and kg-radio handle their own sizing and cursor */ tr.selected { background-color: var(--datagrid-selected-bg) !important; } /* Alignment */ .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } /* Empty State */ .empty-state { padding: 3rem; text-align: center; color: var(--kg-text-muted); } /* Sort Icons */ .sort-icon { display: inline-block; margin-left: 4px; vertical-align: middle; opacity: 0.3; font-size: 0.8em; } th.sortable:hover .sort-icon { opacity: 0.7; } th.active-sort .sort-icon { opacity: 1; color: var(--kg-primary); } /* Pagination */ .pagination-footer { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--datagrid-border); margin-top: -1px; /* Overlap with table border if needed, or keeping it separate */ } .pagination-info { font-size: 0.85rem; color: var(--kg-text-muted); font-weight: 500; } .pagination-controls { display: flex; align-items: center; gap: 0.25rem; } .page-size-selector { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--kg-text-muted); } .page-size-select { padding: 4px 8px; border: 1px solid var(--datagrid-border); border-radius: var(--kg-radius-sm, 4px); background: var(--kg-surface); color: var(--kg-text); outline: none; cursor: pointer; } `"
|
|
1529
|
+
"default": "css` :host { display: block; width: 100%; font-family: inherit; color: var(--kg-text); --datagrid-border: var(--kg-border, #e2e8f0); --datagrid-header-bg: var(--kg-surface, #f8fafc); --datagrid-selected-bg: rgba(var(--kg-primary-rgb, 65, 171, 52), 0.08); } .wrapper { display: flex; flex-direction: column; gap: 1rem; width: 100%; } .table-container { width: 100%; overflow-x: auto; border: 1px solid var(--datagrid-border); border-radius: var(--kg-radius-md, 8px); background: var(--kg-bg); } table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem; } thead { background-color: var(--datagrid-header-bg); border-bottom: 2px solid var(--datagrid-border); } th { padding: 12px 16px; font-weight: 600; color: var(--kg-text-muted); user-select: none; transition: background 0.2s; } th.sortable { cursor: pointer; } th.sortable:hover { background-color: rgba(0,0,0,0.03); color: var(--kg-text); } td { padding: 12px 16px; border-bottom: 1px solid var(--datagrid-border); transition: background 0.2s; } tr:last-child td { border-bottom: none; } /* Modifiers */ :host([striped]) tbody tr:nth-child(even) { background-color: var(--kg-surface); } :host([bordered]) td, :host([bordered]) th { border-right: 1px solid var(--datagrid-border); } :host([bordered]) td:last-child, :host([bordered]) th:last-child { border-right: none; } tbody tr { transition: background-color 0.2s; } :host([hover]) tbody tr:hover { background-color: var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)); } /* Selection */ .checkbox-cell { width: 48px; text-align: center; padding: 0 8px; } /* kg-checkbox and kg-radio handle their own sizing and cursor */ tr.selected { background-color: var(--datagrid-selected-bg) !important; } /* Row status highlights (opt-in via the rowClassName property). Uses !important so it wins over the striped/hover modifiers. */ tbody tr.row-danger { background-color: var(--datagrid-row-danger-bg, #fdecea) !important; } /* Alignment */ .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } /* Empty State */ .empty-state { padding: 3rem; text-align: center; color: var(--kg-text-muted); } /* Sort Icons */ .sort-icon { display: inline-block; margin-left: 4px; vertical-align: middle; opacity: 0.3; font-size: 0.8em; } th.sortable:hover .sort-icon { opacity: 0.7; } th.active-sort .sort-icon { opacity: 1; color: var(--kg-primary); } /* Pagination */ .pagination-footer { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--datagrid-border); margin-top: -1px; /* Overlap with table border if needed, or keeping it separate */ } .pagination-info { font-size: 0.85rem; color: var(--kg-text-muted); font-weight: 500; } .pagination-controls { display: flex; align-items: center; gap: 0.25rem; } .page-size-selector { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--kg-text-muted); } .page-size-select { padding: 4px 8px; border: 1px solid var(--datagrid-border); border-radius: var(--kg-radius-sm, 4px); background: var(--kg-surface); color: var(--kg-text); outline: none; cursor: pointer; } `"
|
|
1530
1530
|
},
|
|
1531
1531
|
{
|
|
1532
1532
|
"kind": "method",
|
|
@@ -1558,6 +1558,16 @@
|
|
|
1558
1558
|
}
|
|
1559
1559
|
]
|
|
1560
1560
|
},
|
|
1561
|
+
{
|
|
1562
|
+
"kind": "method",
|
|
1563
|
+
"name": "_rowClasses",
|
|
1564
|
+
"parameters": [
|
|
1565
|
+
{
|
|
1566
|
+
"name": "row"
|
|
1567
|
+
}
|
|
1568
|
+
],
|
|
1569
|
+
"description": "Builds the class list for a body row: the built-in `selected` state plus\nany custom class names returned by the consumer's `rowClassName(row)`."
|
|
1570
|
+
},
|
|
1561
1571
|
{
|
|
1562
1572
|
"kind": "method",
|
|
1563
1573
|
"name": "_emitSelectionChange"
|
|
@@ -1782,6 +1792,14 @@
|
|
|
1782
1792
|
},
|
|
1783
1793
|
"default": "1"
|
|
1784
1794
|
},
|
|
1795
|
+
{
|
|
1796
|
+
"kind": "field",
|
|
1797
|
+
"name": "rowClassName",
|
|
1798
|
+
"type": {
|
|
1799
|
+
"text": "((row: any) => string) | null"
|
|
1800
|
+
},
|
|
1801
|
+
"default": "null"
|
|
1802
|
+
},
|
|
1785
1803
|
{
|
|
1786
1804
|
"kind": "field",
|
|
1787
1805
|
"name": "_sortColumn",
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[i]=r)(t,"symbol"!=typeof i?i+"":i,r);import{LitElement as i,css as r,html as
|
|
1
|
+
var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[i]=r)(t,"symbol"!=typeof i?i+"":i,r);import{LitElement as i,css as r,html as s}from"lit";import"lit/directives/class-map.js";import"./kg-checkbox.js";import"./kg-radio.js";import{unsafeHTML as a}from"lit/directives/unsafe-html.js";import"./kg-button.js";import"./kg-skeleton.js";class o extends i{constructor(){super(),this.columns=[],this.data=[],this.loading=!1,this.striped=!1,this.bordered=!1,this.hover=!0,this.selectable=!1,this.selectionMode="multiple",this.selectedRows=[],this.sortable=!1,this.pagination=!1,this.pageSize=10,this.pageSizeOptions=[10,20,50,100],this.total=0,this.serverSide=!1,this.currentPage=1,this.rowClassName=null,this._sortColumn=null,this._sortDirection=null}_handleSelectAll(e){if(!this.selectable||"single"===this.selectionMode)return;const t=e.detail.checked;this.selectedRows=t?[...this.data]:[],this._emitSelectionChange()}_handleRowSelect(e,t){if(this.selectable)if(t.stopPropagation(),"single"===this.selectionMode)this._isSelected(e)||(this.selectedRows=[e],this._emitSelectionChange());else{let i;i="change"===t.type&&void 0!==t.detail&&void 0!==t.detail.checked?t.detail.checked:!this._isSelected(e),this.selectedRows=i?[...this.selectedRows,e]:this.selectedRows.filter(t=>t!==e),this._emitSelectionChange()}}_isSelected(e){return this.selectedRows.includes(e)}_rowClasses(e){const t=[];if(this._isSelected(e)&&t.push("selected"),"function"==typeof this.rowClassName){const i=this.rowClassName(e);i&&t.push(i)}return t.join(" ")}_emitSelectionChange(){this.dispatchEvent(new CustomEvent("selection-change",{detail:{selectedRows:this.selectedRows},bubbles:!0,composed:!0}))}_handleSort(e){(e.sortable||this.sortable)&&(this._sortColumn===e.field?this._sortDirection="asc"===this._sortDirection?"desc":"asc":(this._sortColumn=e.field,this._sortDirection="asc"),this.dispatchEvent(new CustomEvent("sort",{detail:{column:this._sortColumn,direction:this._sortDirection},bubbles:!0,composed:!0})))}_getNormalizedPageSizeOptions(){let e=this.pageSizeOptions;if("string"==typeof e)try{e=JSON.parse(e)}catch(t){e=e.split(",").map(e=>Number(e.trim()))}return Array.isArray(e)&&0!==e.length||(e=[10,20,50,100]),e.map(e=>Number(e))}_getProcessedData(){if(this.serverSide)return{data:this.data||[],total:Number(this.total)||(this.data?this.data.length:0)};let e=[...this.data||[]];if(this._sortColumn&&e.sort((e,t)=>{const i=e[this._sortColumn],r=t[this._sortColumn];return i<r?"asc"===this._sortDirection?-1:1:i>r?"asc"===this._sortDirection?1:-1:0}),this.pagination){const t=Number(this.pageSize)||10,i=((Number(this.currentPage)||1)-1)*t,r=i+t;return{data:e.slice(i,r),total:e.length}}return{data:e,total:e.length}}_changePage(e){const t=Number(e);if(t<1)return;const i=Number(this.pageSize)||10,r=this.serverSide&&Number(this.total)||(this.data?this.data.length:0);if(t>Math.max(1,Math.ceil(r/i)))return;this.currentPage=t;const s={page:t,pageSize:i};this.dispatchEvent(new CustomEvent("page-change",{detail:s,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-change",{detail:s,bubbles:!0,composed:!0}))}_handlePageSizeChange(e){const t=parseInt(e.target.value,10)||10;this.pageSize=t,this.currentPage=1,this.requestUpdate();const i={pageSize:t,page:1},r={page:1,pageSize:t};this.dispatchEvent(new CustomEvent("page-size-change",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-size-change",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("page-change",{detail:r,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-change",{detail:r,bubbles:!0,composed:!0}))}_renderCellContent(e,t){if(!e.render)return t[e.field];const i=e.render(t);return"string"==typeof i?a(i):i}_renderHeaderContent(e){if(e.headerRender){const t=e.headerRender(e);return"string"==typeof t?a(t):t}return e.label}_getMaxDepth(e){if(!e||0===e.length)return 1;let t=0;const i=(e,r)=>{t=Math.max(t,r),e.forEach(e=>{e.children&&e.children.length>0&&i(e.children,r+1)})};return i(e,1),t}_getLeafCount(e){return e.children&&0!==e.children.length?e.children.reduce((e,t)=>e+this._getLeafCount(t),0):1}_getLeafColumns(e=this.columns){if(!e)return[];const t=[],i=e=>{e.forEach(e=>{e.children&&e.children.length>0?i(e.children):t.push(e)})};return i(e),t}_getHeaderRows(){const e=this._getMaxDepth(this.columns),t=Array.from({length:e},()=>[]),i=(r,s)=>{r.forEach(r=>{const a=!r.children||0===r.children.length,o=this._getLeafCount(r),n=a?e-s:1;t[s].push({...r,colspan:o,rowspan:n}),r.children&&i(r.children,s+1)})};return i(this.columns,0),t}render(){const{data:e,total:t}=this._getProcessedData(),i=Number(this.pageSize)||10,r=Number(this.currentPage)||1,a=Number(t)||0,o=this.pagination?Math.max(1,Math.ceil(a/i)):1,n=this._getNormalizedPageSizeOptions(),l=this.data&&this.data.length>0&&this.selectedRows.length===this.data.length,d="single"===this.selectionMode,c=this._getHeaderRows(),h=c.length,g=this._getLeafColumns(),p=(()=>{const e=[],t=r-2,i=r+2+1;for(let r=1;r<=o;r++)(1===r||r===o||r>=t&&r<i)&&e.push(r);return e})();return s`
|
|
2
2
|
<div class="wrapper">
|
|
3
3
|
<div class="table-container">
|
|
4
4
|
<table>
|
|
5
5
|
<thead>
|
|
6
|
-
${c.map((e,t)=>
|
|
6
|
+
${c.map((e,t)=>s`
|
|
7
7
|
<tr>
|
|
8
|
-
${0===t&&this.selectable?
|
|
8
|
+
${0===t&&this.selectable?s`
|
|
9
9
|
<th class="checkbox-cell" rowspan="${h}">
|
|
10
|
-
${d?"":
|
|
10
|
+
${d?"":s`
|
|
11
11
|
<kg-checkbox
|
|
12
12
|
.checked="${l}"
|
|
13
13
|
@change="${this._handleSelectAll}"
|
|
@@ -16,7 +16,7 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
16
16
|
</th>
|
|
17
17
|
`:""}
|
|
18
18
|
|
|
19
|
-
${e.map(e=>
|
|
19
|
+
${e.map(e=>s`
|
|
20
20
|
<th
|
|
21
21
|
colspan="${e.colspan}"
|
|
22
22
|
rowspan="${e.rowspan}"
|
|
@@ -25,7 +25,7 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
25
25
|
@click="${()=>e.children?null:this._handleSort(e)}"
|
|
26
26
|
>
|
|
27
27
|
${this._renderHeaderContent(e)}
|
|
28
|
-
${!e.sortable&&!this.sortable||e.children?"":
|
|
28
|
+
${!e.sortable&&!this.sortable||e.children?"":s`
|
|
29
29
|
<span class="sort-icon">
|
|
30
30
|
${this._sortColumn===e.field?"asc"===this._sortDirection?"▲":"▼":"⇅"}
|
|
31
31
|
</span>
|
|
@@ -36,40 +36,40 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
36
36
|
`)}
|
|
37
37
|
</thead>
|
|
38
38
|
<tbody>
|
|
39
|
-
${this.loading?
|
|
40
|
-
${Array.from({length:this.pagination&&this.pageSize?this.pageSize:5}).map(()=>
|
|
39
|
+
${this.loading?s`
|
|
40
|
+
${Array.from({length:this.pagination&&this.pageSize?this.pageSize:5}).map(()=>s`
|
|
41
41
|
<tr>
|
|
42
|
-
${this.selectable?
|
|
42
|
+
${this.selectable?s`
|
|
43
43
|
<td class="checkbox-cell">
|
|
44
44
|
<kg-skeleton variant="rect" width="16px" height="16px" style="border-radius: 4px; display: inline-block;"></kg-skeleton>
|
|
45
45
|
</td>
|
|
46
46
|
`:""}
|
|
47
|
-
${g.map(()=>
|
|
47
|
+
${g.map(()=>s`
|
|
48
48
|
<td>
|
|
49
49
|
<kg-skeleton variant="text" width="${Math.floor(50*Math.random()+40)}%" height="1rem"></kg-skeleton>
|
|
50
50
|
</td>
|
|
51
51
|
`)}
|
|
52
52
|
</tr>
|
|
53
53
|
`)}
|
|
54
|
-
`:0===e.length?
|
|
54
|
+
`:0===e.length?s`
|
|
55
55
|
<tr>
|
|
56
56
|
<td colspan="${g.length+(this.selectable?1:0)}" class="empty-state">
|
|
57
57
|
Veri bulunamadı.
|
|
58
58
|
</td>
|
|
59
59
|
</tr>
|
|
60
|
-
`:e.map(e=>
|
|
61
|
-
<tr
|
|
62
|
-
class="${this.
|
|
60
|
+
`:e.map(e=>s`
|
|
61
|
+
<tr
|
|
62
|
+
class="${this._rowClasses(e)}"
|
|
63
63
|
@click="${t=>this._handleRowSelect(e,t)}"
|
|
64
64
|
>
|
|
65
|
-
${this.selectable?
|
|
65
|
+
${this.selectable?s`
|
|
66
66
|
<td class="checkbox-cell">
|
|
67
|
-
${d?
|
|
67
|
+
${d?s`
|
|
68
68
|
<kg-radio
|
|
69
69
|
.checked="${this._isSelected(e)}"
|
|
70
70
|
style="pointer-events: none;"
|
|
71
71
|
></kg-radio>
|
|
72
|
-
`:
|
|
72
|
+
`:s`
|
|
73
73
|
<kg-checkbox
|
|
74
74
|
.checked="${this._isSelected(e)}"
|
|
75
75
|
@change="${t=>this._handleRowSelect(e,t)}"
|
|
@@ -79,7 +79,7 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
79
79
|
</td>
|
|
80
80
|
`:""}
|
|
81
81
|
|
|
82
|
-
${g.map(t=>
|
|
82
|
+
${g.map(t=>s`
|
|
83
83
|
<td class="${t.align?`align-${t.align}`:""}">
|
|
84
84
|
${this._renderCellContent(t,e)}
|
|
85
85
|
</td>
|
|
@@ -90,17 +90,17 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
90
90
|
</table>
|
|
91
91
|
</div>
|
|
92
92
|
|
|
93
|
-
${this.pagination&&
|
|
93
|
+
${this.pagination&&a>0?s`
|
|
94
94
|
<div class="pagination-footer">
|
|
95
95
|
<div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
|
|
96
96
|
<div class="pagination-info">
|
|
97
|
-
Toplam <strong>${
|
|
97
|
+
Toplam <strong>${a}</strong> kayıttan <strong>${(r-1)*i+1} - ${Math.min(r*i,a)}</strong> arası gösteriliyor
|
|
98
98
|
</div>
|
|
99
99
|
|
|
100
100
|
<div class="page-size-selector">
|
|
101
101
|
<span>Sayfa başına:</span>
|
|
102
102
|
<select class="page-size-select" .value="${String(i)}" @change="${this._handlePageSizeChange}">
|
|
103
|
-
${n.map(e=>
|
|
103
|
+
${n.map(e=>s`
|
|
104
104
|
<option value="${e}" ?selected="${i===e}">${e}</option>
|
|
105
105
|
`)}
|
|
106
106
|
</select>
|
|
@@ -133,8 +133,8 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
133
133
|
</kg-button>
|
|
134
134
|
|
|
135
135
|
<!-- Page Numbers -->
|
|
136
|
-
${p.map((e,t)=>
|
|
137
|
-
${t>0&&e-p[t-1]>1?
|
|
136
|
+
${p.map((e,t)=>s`
|
|
137
|
+
${t>0&&e-p[t-1]>1?s`<span class="pagination-info">...</span>`:""}
|
|
138
138
|
<kg-button
|
|
139
139
|
@click="${()=>this._changePage(e)}"
|
|
140
140
|
color="${this.currentPage===e?"primary":"secondary"}"
|
|
@@ -173,7 +173,7 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
173
173
|
</div>
|
|
174
174
|
`:""}
|
|
175
175
|
</div>
|
|
176
|
-
`}}t(o,"properties",{columns:{type:Array},data:{type:Array},loading:{type:Boolean},striped:{type:Boolean,reflect:!0},bordered:{type:Boolean,reflect:!0},hover:{type:Boolean,reflect:!0},selectable:{type:Boolean},selectionMode:{type:String,attribute:"selection-mode"},selectedRows:{type:Array,state:!0},sortable:{type:Boolean},_sortColumn:{type:String,state:!0},_sortDirection:{type:String,state:!0},pagination:{type:Boolean},pageSize:{type:Number,attribute:"page-size"},pageSizeOptions:{type:Array,attribute:"page-size-options"},total:{type:Number},serverSide:{type:Boolean,attribute:"server-side"},currentPage:{type:Number,attribute:"current-page"}}),t(o,"styles",r`
|
|
176
|
+
`}}t(o,"properties",{columns:{type:Array},data:{type:Array},loading:{type:Boolean},striped:{type:Boolean,reflect:!0},bordered:{type:Boolean,reflect:!0},hover:{type:Boolean,reflect:!0},selectable:{type:Boolean},selectionMode:{type:String,attribute:"selection-mode"},selectedRows:{type:Array,state:!0},rowClassName:{attribute:!1},sortable:{type:Boolean},_sortColumn:{type:String,state:!0},_sortDirection:{type:String,state:!0},pagination:{type:Boolean},pageSize:{type:Number,attribute:"page-size"},pageSizeOptions:{type:Array,attribute:"page-size-options"},total:{type:Number},serverSide:{type:Boolean,attribute:"server-side"},currentPage:{type:Number,attribute:"current-page"}}),t(o,"styles",r`
|
|
177
177
|
:host {
|
|
178
178
|
display: block;
|
|
179
179
|
width: 100%;
|
|
@@ -272,6 +272,12 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
272
272
|
background-color: var(--datagrid-selected-bg) !important;
|
|
273
273
|
}
|
|
274
274
|
|
|
275
|
+
/* Row status highlights (opt-in via the rowClassName property).
|
|
276
|
+
Uses !important so it wins over the striped/hover modifiers. */
|
|
277
|
+
tbody tr.row-danger {
|
|
278
|
+
background-color: var(--datagrid-row-danger-bg, #fdecea) !important;
|
|
279
|
+
}
|
|
280
|
+
|
|
275
281
|
/* Alignment */
|
|
276
282
|
.align-left { text-align: left; }
|
|
277
283
|
.align-center { text-align: center; }
|
package/package.json
CHANGED
|
@@ -34,6 +34,8 @@ export class kgdatagrid extends LitElement {
|
|
|
34
34
|
serverSide: boolean;
|
|
35
35
|
/** */
|
|
36
36
|
currentPage: number;
|
|
37
|
+
/** */
|
|
38
|
+
rowClassName: ((row: any) => string) | null;
|
|
37
39
|
}
|
|
38
40
|
|
|
39
41
|
declare global {
|
|
@@ -60,6 +62,7 @@ declare global {
|
|
|
60
62
|
total?: number;
|
|
61
63
|
serverSide?: boolean;
|
|
62
64
|
currentPage?: number;
|
|
65
|
+
rowClassName?: ((row: any) => string) | null;
|
|
63
66
|
onSelectionChange?: (e: any) => void;
|
|
64
67
|
onSort?: (e: any) => void;
|
|
65
68
|
onPageChange?: (e: any) => void;
|
package/types/index.d.ts
CHANGED