@lazhus/kg-ui 0.10.12 → 0.10.13
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 +1 -1
- package/dist/components/kg-datagrid.js +47 -25
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -1526,7 +1526,7 @@
|
|
|
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; } /* 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; } /* Sticky Header & Sticky Columns */ :host([sticky-header]) .table-container { overflow: auto; max-height: var(--datagrid-max-height, 70vh); } :host([sticky-header]) thead th { position: sticky; top: 0; z-index: 10; background-color: var(--datagrid-header-bg); box-shadow: inset 0 -1px 0 var(--datagrid-border); } th.sticky-col, td.sticky-col, th.sticky-checkbox, td.sticky-checkbox { position: sticky; } th.sticky-checkbox { left: 0; z-index: 15; background-color: var(--datagrid-header-bg); } :host([sticky-header]) th.sticky-checkbox { top: 0; left: 0; z-index: 25; background-color: var(--datagrid-header-bg); box-shadow: inset 0 -1px 0 var(--datagrid-border); } td.sticky-checkbox { left: 0; z-index: 8; background-color: var(--kg-
|
|
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; } /* Sticky Header & Sticky Columns */ :host([sticky-header]) .table-container { overflow: auto; max-height: var(--datagrid-max-height, 70vh); } :host([sticky-header]) thead th { position: sticky; top: 0; z-index: 10; background-color: var(--datagrid-header-bg); box-shadow: inset 0 -1px 0 var(--datagrid-border); } th.sticky-col, td.sticky-col, th.sticky-checkbox, td.sticky-checkbox { position: sticky; } th.sticky-checkbox { left: 0; z-index: 15; background-color: var(--datagrid-header-bg); } :host([sticky-header]) th.sticky-checkbox { top: 0; left: 0; z-index: 25; background-color: var(--datagrid-header-bg); box-shadow: inset 0 -1px 0 var(--datagrid-border); } td.sticky-checkbox { left: 0; z-index: 8; background-color: var(--kg-bg, #ffffff); } th.sticky-col { z-index: 12; background-color: var(--datagrid-header-bg); } :host([sticky-header]) th.sticky-col { top: 0; z-index: 20; background-color: var(--datagrid-header-bg); box-shadow: inset 0 -1px 0 var(--datagrid-border), 2px 0 5px -2px rgba(0, 0, 0, 0.12); } td.sticky-col { z-index: 5; background-color: var(--kg-bg, #ffffff); box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.12); } /* Striped rows */ :host([striped]) tbody tr:nth-child(even) td.sticky-col, :host([striped]) tbody tr:nth-child(even) td.sticky-checkbox { background-color: var(--kg-surface, #f8fafc); } /* Hover: Must remain completely opaque so scrolled columns behind do not bleed through */ :host([hover]) tbody tr:hover td.sticky-col, :host([hover]) tbody tr:hover td.sticky-checkbox { background-color: var(--kg-bg, #ffffff); background-image: linear-gradient(var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)), var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04))), linear-gradient(var(--kg-bg, #ffffff), var(--kg-bg, #ffffff)); } :host([hover][striped]) tbody tr:nth-child(even):hover td.sticky-col, :host([hover][striped]) tbody tr:nth-child(even):hover td.sticky-checkbox { background-color: var(--kg-surface, #f8fafc); background-image: linear-gradient(var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)), var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04))), linear-gradient(var(--kg-surface, #f8fafc), var(--kg-surface, #f8fafc)); } /* Selected rows */ tbody tr.selected td.sticky-col, tbody tr.selected td.sticky-checkbox, :host([hover]) tbody tr.selected:hover td.sticky-col, :host([hover]) tbody tr.selected:hover td.sticky-checkbox { background-color: var(--kg-bg, #ffffff) !important; background-image: linear-gradient(var(--datagrid-selected-bg, rgba(65, 171, 52, 0.08)), var(--datagrid-selected-bg, rgba(65, 171, 52, 0.08))), linear-gradient(var(--kg-bg, #ffffff), var(--kg-bg, #ffffff)) !important; } /* Row danger */ tbody tr.row-danger td.sticky-col, tbody tr.row-danger td.sticky-checkbox, :host([hover]) tbody tr.row-danger:hover td.sticky-col, :host([hover]) tbody tr.row-danger:hover td.sticky-checkbox { background-color: var(--datagrid-row-danger-bg, #fdecea) !important; background-image: none !important; } `"
|
|
1530
1530
|
},
|
|
1531
1531
|
{
|
|
1532
1532
|
"kind": "method",
|
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
var t=Object.defineProperty,e=(e,i
|
|
1
|
+
var t=Object.defineProperty,e=(e,r,i)=>((e,r,i)=>r in e?t(e,r,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[r]=i)(e,"symbol"!=typeof r?r+"":r,i);import{LitElement as r,css as i,html as a}from"lit";import"lit/directives/class-map.js";import"./kg-checkbox.js";import"./kg-radio.js";import{unsafeHTML as o}from"lit/directives/unsafe-html.js";import"./kg-button.js";import"./kg-skeleton.js";class s extends r{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.stickyHeader=!1,this.maxHeight="",this.rowClassName=null,this._sortColumn=null,this._sortDirection=null}_handleSelectAll(t){if(!this.selectable||"single"===this.selectionMode)return;const e=t.detail.checked;this.selectedRows=e?[...this.data]:[],this._emitSelectionChange()}_handleRowSelect(t,e){if(this.selectable)if(e.stopPropagation(),"single"===this.selectionMode)this._isSelected(t)||(this.selectedRows=[t],this._emitSelectionChange());else{let r;r="change"===e.type&&void 0!==e.detail&&void 0!==e.detail.checked?e.detail.checked:!this._isSelected(t),this.selectedRows=r?[...this.selectedRows,t]:this.selectedRows.filter(e=>e!==t),this._emitSelectionChange()}}_isSelected(t){return this.selectedRows.includes(t)}_rowClasses(t){const e=[];if(this._isSelected(t)&&e.push("selected"),"function"==typeof this.rowClassName){const r=this.rowClassName(t);r&&e.push(r)}return e.join(" ")}_emitSelectionChange(){this.dispatchEvent(new CustomEvent("selection-change",{detail:{selectedRows:this.selectedRows},bubbles:!0,composed:!0}))}_handleSort(t){(t.sortable||this.sortable)&&(this._sortColumn===t.field?this._sortDirection="asc"===this._sortDirection?"desc":"asc":(this._sortColumn=t.field,this._sortDirection="asc"),this.dispatchEvent(new CustomEvent("sort",{detail:{column:this._sortColumn,direction:this._sortDirection},bubbles:!0,composed:!0})))}_getNormalizedPageSizeOptions(){let t=this.pageSizeOptions;if("string"==typeof t)try{t=JSON.parse(t)}catch(e){t=t.split(",").map(t=>Number(t.trim()))}return Array.isArray(t)&&0!==t.length||(t=[10,20,50,100]),t.map(t=>Number(t))}_getProcessedData(){if(this.serverSide)return{data:this.data||[],total:Number(this.total)||(this.data?this.data.length:0)};let t=[...this.data||[]];if(this._sortColumn&&t.sort((t,e)=>{const r=t[this._sortColumn],i=e[this._sortColumn];return r<i?"asc"===this._sortDirection?-1:1:r>i?"asc"===this._sortDirection?1:-1:0}),this.pagination){const e=Number(this.pageSize)||10,r=((Number(this.currentPage)||1)-1)*e,i=r+e;return{data:t.slice(r,i),total:t.length}}return{data:t,total:t.length}}_changePage(t){const e=Number(t);if(e<1)return;const r=Number(this.pageSize)||10,i=this.serverSide&&Number(this.total)||(this.data?this.data.length:0);if(e>Math.max(1,Math.ceil(i/r)))return;this.currentPage=e;const a={page:e,pageSize:r};this.dispatchEvent(new CustomEvent("page-change",{detail:a,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-change",{detail:a,bubbles:!0,composed:!0}))}_handlePageSizeChange(t){const e=parseInt(t.target.value,10)||10;this.pageSize=e,this.currentPage=1,this.requestUpdate();const r={pageSize:e,page:1},i={page:1,pageSize:e};this.dispatchEvent(new CustomEvent("page-size-change",{detail:r,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-size-change",{detail:r,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("page-change",{detail:i,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("kg-page-change",{detail:i,bubbles:!0,composed:!0}))}_renderCellContent(t,e){if(!t.render)return e[t.field];const r=t.render(e);return"string"==typeof r?o(r):r}_renderHeaderContent(t){if(t.headerRender){const e=t.headerRender(t);return"string"==typeof e?o(e):e}return t.label}_getMaxDepth(t){if(!t||0===t.length)return 1;let e=0;const r=(t,i)=>{e=Math.max(e,i),t.forEach(t=>{t.children&&t.children.length>0&&r(t.children,i+1)})};return r(t,1),e}_getLeafCount(t){return t.children&&0!==t.children.length?t.children.reduce((t,e)=>t+this._getLeafCount(e),0):1}_getLeafColumns(t=this.columns){if(!t)return[];const e=[],r=t=>{t.forEach(t=>{t.children&&t.children.length>0?r(t.children):e.push(t)})};return r(t),e}_getHeaderRows(){const t=this._getMaxDepth(this.columns),e=Array.from({length:t},()=>[]),r=(i,a)=>{i.forEach(i=>{const o=!i.children||0===i.children.length,s=this._getLeafCount(i),n=o?t-a:1;e[a].push({...i,colspan:s,rowspan:n}),i.children&&r(i.children,a+1)})};return r(this.columns,0),e}_hasStickyColumn(){return this._getLeafColumns().some(t=>this._isStickyCol(t))}_isStickyCol(t){return Boolean(t&&(t.sticky||"left"===t.fixed))}_getStickyLeft(t,e){if(!this._isStickyCol(t))return null;let r=0;this.selectable&&(r+=48);const i=this._getLeafColumns();for(let a=0;a<e;a++)this._isStickyCol(i[a])&&(r+=parseInt(i[a].width,10)||150);return`${r}px`}render(){const{data:t,total:e}=this._getProcessedData(),r=Number(this.pageSize)||10,i=Number(this.currentPage)||1,o=Number(e)||0,s=this.pagination?Math.max(1,Math.ceil(o/r)):1,n=this._getNormalizedPageSizeOptions(),d=this.data&&this.data.length>0&&this.selectedRows.length===this.data.length,c="single"===this.selectionMode,l=this._getHeaderRows(),h=l.length,g=this._getLeafColumns(),p=this._hasStickyColumn(),b=(()=>{const t=[],e=i-2,r=i+2+1;for(let i=1;i<=s;i++)(1===i||i===s||i>=e&&i<r)&&t.push(i);return t})();return a`
|
|
2
2
|
<div class="wrapper">
|
|
3
3
|
<div class="table-container" style="${this.maxHeight?`max-height: ${this.maxHeight};`:""}">
|
|
4
4
|
<table>
|
|
5
5
|
<thead>
|
|
6
|
-
${
|
|
6
|
+
${l.map((t,e)=>a`
|
|
7
7
|
<tr>
|
|
8
8
|
${0===e&&this.selectable?a`
|
|
9
9
|
<th class="checkbox-cell ${p?"sticky-checkbox":""}" rowspan="${h}">
|
|
10
10
|
${c?"":a`
|
|
11
11
|
<kg-checkbox
|
|
12
|
-
.checked="${
|
|
12
|
+
.checked="${d}"
|
|
13
13
|
@change="${this._handleSelectAll}"
|
|
14
14
|
></kg-checkbox>
|
|
15
15
|
`}
|
|
16
16
|
</th>
|
|
17
17
|
`:""}
|
|
18
18
|
|
|
19
|
-
${t.map((t,e)=>{const
|
|
19
|
+
${t.map((t,e)=>{const r=this._isStickyCol(t),i=this._getStickyLeft(t,e);let o=t.width?`width: ${t.width}; min-width: ${t.width}; max-width: ${t.width};`:"";return i&&(o+=` left: ${i};`),a`
|
|
20
20
|
<th
|
|
21
21
|
colspan="${t.colspan}"
|
|
22
22
|
rowspan="${t.rowspan}"
|
|
23
|
-
class="${t.sortable||this.sortable?"sortable":""} ${t.align?`align-${t.align}`:""} ${this._sortColumn===t.field?"active-sort":""} ${
|
|
24
|
-
style="${
|
|
23
|
+
class="${t.sortable||this.sortable?"sortable":""} ${t.align?`align-${t.align}`:""} ${this._sortColumn===t.field?"active-sort":""} ${r?"sticky-col":""}"
|
|
24
|
+
style="${o}"
|
|
25
25
|
@click="${()=>t.children?null:this._handleSort(t)}"
|
|
26
26
|
>
|
|
27
27
|
${this._renderHeaderContent(t)}
|
|
@@ -44,8 +44,8 @@ var t=Object.defineProperty,e=(e,i,r)=>((e,i,r)=>i in e?t(e,i,{enumerable:!0,con
|
|
|
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((t,e)=>{const
|
|
48
|
-
<td class="${
|
|
47
|
+
${g.map((t,e)=>{const r=this._isStickyCol(t),i=this._getStickyLeft(t,e);let o="";return i&&(o+=`left: ${i};`),a`
|
|
48
|
+
<td class="${r?"sticky-col":""}" style="${o}">
|
|
49
49
|
<kg-skeleton variant="text" width="${Math.floor(50*Math.random()+40)}%" height="1rem"></kg-skeleton>
|
|
50
50
|
</td>
|
|
51
51
|
`})}
|
|
@@ -79,8 +79,8 @@ var t=Object.defineProperty,e=(e,i,r)=>((e,i,r)=>i in e?t(e,i,{enumerable:!0,con
|
|
|
79
79
|
</td>
|
|
80
80
|
`:""}
|
|
81
81
|
|
|
82
|
-
${g.map((e,
|
|
83
|
-
<td class="${e.align?`align-${e.align}`:""} ${
|
|
82
|
+
${g.map((e,r)=>{const i=this._isStickyCol(e),o=this._getStickyLeft(e,r);let s="";return o&&(s+=`left: ${o};`),a`
|
|
83
|
+
<td class="${e.align?`align-${e.align}`:""} ${i?"sticky-col":""}" style="${s}">
|
|
84
84
|
${this._renderCellContent(e,t)}
|
|
85
85
|
</td>
|
|
86
86
|
`})}
|
|
@@ -90,18 +90,18 @@ var t=Object.defineProperty,e=(e,i,r)=>((e,i,r)=>i in e?t(e,i,{enumerable:!0,con
|
|
|
90
90
|
</table>
|
|
91
91
|
</div>
|
|
92
92
|
|
|
93
|
-
${this.pagination&&
|
|
93
|
+
${this.pagination&&o>0?a`
|
|
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>${o}</strong> kayıttan <strong>${(i-1)*r+1} - ${Math.min(i*r,o)}</strong> arası gösteriliyor
|
|
98
98
|
</div>
|
|
99
99
|
|
|
100
100
|
<div class="page-size-selector">
|
|
101
101
|
<span>Sayfa başına:</span>
|
|
102
|
-
<select class="page-size-select" .value="${String(
|
|
102
|
+
<select class="page-size-select" .value="${String(r)}" @change="${this._handlePageSizeChange}">
|
|
103
103
|
${n.map(t=>a`
|
|
104
|
-
<option value="${t}" ?selected="${
|
|
104
|
+
<option value="${t}" ?selected="${r===t}">${t}</option>
|
|
105
105
|
`)}
|
|
106
106
|
</select>
|
|
107
107
|
</div>
|
|
@@ -148,7 +148,7 @@ var t=Object.defineProperty,e=(e,i,r)=>((e,i,r)=>i in e?t(e,i,{enumerable:!0,con
|
|
|
148
148
|
|
|
149
149
|
<!-- Next Page -->
|
|
150
150
|
<kg-button
|
|
151
|
-
?disabled="${this.currentPage===
|
|
151
|
+
?disabled="${this.currentPage===s}"
|
|
152
152
|
@click="${()=>this._changePage(this.currentPage+1)}"
|
|
153
153
|
text
|
|
154
154
|
color="secondary"
|
|
@@ -160,8 +160,8 @@ var t=Object.defineProperty,e=(e,i,r)=>((e,i,r)=>i in e?t(e,i,{enumerable:!0,con
|
|
|
160
160
|
|
|
161
161
|
<!-- Last Page -->
|
|
162
162
|
<kg-button
|
|
163
|
-
?disabled="${this.currentPage===
|
|
164
|
-
@click="${()=>this._changePage(
|
|
163
|
+
?disabled="${this.currentPage===s}"
|
|
164
|
+
@click="${()=>this._changePage(s)}"
|
|
165
165
|
text
|
|
166
166
|
color="secondary"
|
|
167
167
|
size="medium"
|
|
@@ -173,7 +173,7 @@ var t=Object.defineProperty,e=(e,i,r)=>((e,i,r)=>i in e?t(e,i,{enumerable:!0,con
|
|
|
173
173
|
</div>
|
|
174
174
|
`:""}
|
|
175
175
|
</div>
|
|
176
|
-
`}}e(
|
|
176
|
+
`}}e(s,"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"},stickyHeader:{type:Boolean,reflect:!0,attribute:"sticky-header"},maxHeight:{type:String,attribute:"max-height"}}),e(s,"styles",i`
|
|
177
177
|
:host {
|
|
178
178
|
display: block;
|
|
179
179
|
width: 100%;
|
|
@@ -388,7 +388,7 @@ var t=Object.defineProperty,e=(e,i,r)=>((e,i,r)=>i in e?t(e,i,{enumerable:!0,con
|
|
|
388
388
|
td.sticky-checkbox {
|
|
389
389
|
left: 0;
|
|
390
390
|
z-index: 8;
|
|
391
|
-
background-color: var(--kg-
|
|
391
|
+
background-color: var(--kg-bg, #ffffff);
|
|
392
392
|
}
|
|
393
393
|
|
|
394
394
|
th.sticky-col {
|
|
@@ -405,22 +405,44 @@ var t=Object.defineProperty,e=(e,i,r)=>((e,i,r)=>i in e?t(e,i,{enumerable:!0,con
|
|
|
405
405
|
|
|
406
406
|
td.sticky-col {
|
|
407
407
|
z-index: 5;
|
|
408
|
-
background-color: var(--kg-
|
|
408
|
+
background-color: var(--kg-bg, #ffffff);
|
|
409
409
|
box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.12);
|
|
410
410
|
}
|
|
411
411
|
|
|
412
|
+
/* Striped rows */
|
|
413
|
+
:host([striped]) tbody tr:nth-child(even) td.sticky-col,
|
|
414
|
+
:host([striped]) tbody tr:nth-child(even) td.sticky-checkbox {
|
|
415
|
+
background-color: var(--kg-surface, #f8fafc);
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
/* Hover: Must remain completely opaque so scrolled columns behind do not bleed through */
|
|
412
419
|
:host([hover]) tbody tr:hover td.sticky-col,
|
|
413
420
|
:host([hover]) tbody tr:hover td.sticky-checkbox {
|
|
414
|
-
background-color: var(--
|
|
421
|
+
background-color: var(--kg-bg, #ffffff);
|
|
422
|
+
background-image: linear-gradient(var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)), var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04))), linear-gradient(var(--kg-bg, #ffffff), var(--kg-bg, #ffffff));
|
|
415
423
|
}
|
|
416
424
|
|
|
425
|
+
:host([hover][striped]) tbody tr:nth-child(even):hover td.sticky-col,
|
|
426
|
+
:host([hover][striped]) tbody tr:nth-child(even):hover td.sticky-checkbox {
|
|
427
|
+
background-color: var(--kg-surface, #f8fafc);
|
|
428
|
+
background-image: linear-gradient(var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04)), var(--datagrid-hover-bg, rgba(0, 0, 0, 0.04))), linear-gradient(var(--kg-surface, #f8fafc), var(--kg-surface, #f8fafc));
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
/* Selected rows */
|
|
417
432
|
tbody tr.selected td.sticky-col,
|
|
418
|
-
tbody tr.selected td.sticky-checkbox
|
|
419
|
-
|
|
433
|
+
tbody tr.selected td.sticky-checkbox,
|
|
434
|
+
:host([hover]) tbody tr.selected:hover td.sticky-col,
|
|
435
|
+
:host([hover]) tbody tr.selected:hover td.sticky-checkbox {
|
|
436
|
+
background-color: var(--kg-bg, #ffffff) !important;
|
|
437
|
+
background-image: linear-gradient(var(--datagrid-selected-bg, rgba(65, 171, 52, 0.08)), var(--datagrid-selected-bg, rgba(65, 171, 52, 0.08))), linear-gradient(var(--kg-bg, #ffffff), var(--kg-bg, #ffffff)) !important;
|
|
420
438
|
}
|
|
421
439
|
|
|
440
|
+
/* Row danger */
|
|
422
441
|
tbody tr.row-danger td.sticky-col,
|
|
423
|
-
tbody tr.row-danger td.sticky-checkbox
|
|
442
|
+
tbody tr.row-danger td.sticky-checkbox,
|
|
443
|
+
:host([hover]) tbody tr.row-danger:hover td.sticky-col,
|
|
444
|
+
:host([hover]) tbody tr.row-danger:hover td.sticky-checkbox {
|
|
424
445
|
background-color: var(--datagrid-row-danger-bg, #fdecea) !important;
|
|
446
|
+
background-image: none !important;
|
|
425
447
|
}
|
|
426
|
-
`),"undefined"==typeof customElements||customElements.get("kg-datagrid")||customElements.define("kg-datagrid",
|
|
448
|
+
`),"undefined"==typeof customElements||customElements.get("kg-datagrid")||customElements.define("kg-datagrid",s);export{s as kgdatagrid};
|