@lazhus/kg-ui 0.9.17 → 0.9.18
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 +32 -0
- package/dist/components/kg-datagrid.js +39 -35
- package/dist/react/KgDataGrid.js +1 -1
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -1606,6 +1606,38 @@
|
|
|
1606
1606
|
}
|
|
1607
1607
|
]
|
|
1608
1608
|
},
|
|
1609
|
+
{
|
|
1610
|
+
"kind": "method",
|
|
1611
|
+
"name": "_getMaxDepth",
|
|
1612
|
+
"parameters": [
|
|
1613
|
+
{
|
|
1614
|
+
"name": "columns"
|
|
1615
|
+
}
|
|
1616
|
+
]
|
|
1617
|
+
},
|
|
1618
|
+
{
|
|
1619
|
+
"kind": "method",
|
|
1620
|
+
"name": "_getLeafCount",
|
|
1621
|
+
"parameters": [
|
|
1622
|
+
{
|
|
1623
|
+
"name": "column"
|
|
1624
|
+
}
|
|
1625
|
+
]
|
|
1626
|
+
},
|
|
1627
|
+
{
|
|
1628
|
+
"kind": "method",
|
|
1629
|
+
"name": "_getLeafColumns",
|
|
1630
|
+
"parameters": [
|
|
1631
|
+
{
|
|
1632
|
+
"name": "columns",
|
|
1633
|
+
"default": "this.columns"
|
|
1634
|
+
}
|
|
1635
|
+
]
|
|
1636
|
+
},
|
|
1637
|
+
{
|
|
1638
|
+
"kind": "method",
|
|
1639
|
+
"name": "_getHeaderRows"
|
|
1640
|
+
},
|
|
1609
1641
|
{
|
|
1610
1642
|
"kind": "method",
|
|
1611
1643
|
"name": "render"
|
|
@@ -1,35 +1,39 @@
|
|
|
1
|
-
var e=Object.defineProperty,t=(t,i,
|
|
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 a}from"lit";import"lit/directives/class-map.js";import"./kg-checkbox.js";import"./kg-radio.js";import{unsafeHTML as s}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._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)}_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})))}_getProcessedData(){if(this.serverSide)return{data:this.data,total:this.total||this.data.length};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=(this.currentPage-1)*this.pageSize,i=t+this.pageSize;return{data:e.slice(t,i),total:e.length}}return{data:e,total:e.length}}_changePage(e){if(e<1)return;const t=this.serverSide&&this.total||this.data.length;e>Math.ceil(t/this.pageSize)||(this.currentPage=e,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:this.currentPage,pageSize:this.pageSize},bubbles:!0,composed:!0})))}_handlePageSizeChange(e){const t=parseInt(e.target.value);this.pageSize=t,this.currentPage=1,this.dispatchEvent(new CustomEvent("page-size-change",{detail:{pageSize:t,page:1},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("page-change",{detail:{page:1,pageSize:t},bubbles:!0,composed:!0}))}_renderCellContent(e,t){if(!e.render)return t[e.field];const i=e.render(t);return"string"==typeof i?s(i):i}_renderHeaderContent(e){if(e.headerRender){const t=e.headerRender(e);return"string"==typeof t?s(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,a)=>{r.forEach(r=>{const s=!r.children||0===r.children.length,o=this._getLeafCount(r),n=s?e-a:1;t[a].push({...r,colspan:o,rowspan:n}),r.children&&i(r.children,a+1)})};return i(this.columns,0),t}render(){const{data:e,total:t}=this._getProcessedData(),i=this.pagination?Math.ceil(t/this.pageSize):1,r=this.data.length>0&&this.selectedRows.length===this.data.length,s="single"===this.selectionMode,o=this._getHeaderRows(),n=o.length,l=this._getLeafColumns(),d=(()=>{const e=[],t=this.currentPage-2,r=this.currentPage+2+1;for(let a=1;a<=i;a++)(1===a||a===i||a>=t&&a<r)&&e.push(a);return e})();return a`
|
|
2
2
|
<div class="wrapper">
|
|
3
3
|
<div class="table-container">
|
|
4
4
|
<table>
|
|
5
5
|
<thead>
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
6
|
+
${o.map((e,t)=>a`
|
|
7
|
+
<tr>
|
|
8
|
+
${0===t&&this.selectable?a`
|
|
9
|
+
<th class="checkbox-cell" rowspan="${n}">
|
|
10
|
+
${s?"":a`
|
|
11
|
+
<kg-checkbox
|
|
12
|
+
.checked="${r}"
|
|
13
|
+
@change="${this._handleSelectAll}"
|
|
14
|
+
></kg-checkbox>
|
|
15
|
+
`}
|
|
16
|
+
</th>
|
|
17
|
+
`:""}
|
|
18
|
+
|
|
19
|
+
${e.map(e=>a`
|
|
20
|
+
<th
|
|
21
|
+
colspan="${e.colspan}"
|
|
22
|
+
rowspan="${e.rowspan}"
|
|
23
|
+
class="${e.sortable||this.sortable?"sortable":""} ${e.align?`align-${e.align}`:""} ${this._sortColumn===e.field?"active-sort":""}"
|
|
24
|
+
style="${e.width?`width: ${e.width}; min-width: ${e.width}; max-width: ${e.width};`:""}"
|
|
25
|
+
@click="${()=>e.children?null:this._handleSort(e)}"
|
|
26
|
+
>
|
|
27
|
+
${this._renderHeaderContent(e)}
|
|
28
|
+
${!e.sortable&&!this.sortable||e.children?"":a`
|
|
29
|
+
<span class="sort-icon">
|
|
30
|
+
${this._sortColumn===e.field?"asc"===this._sortDirection?"▲":"▼":"⇅"}
|
|
31
|
+
</span>
|
|
32
|
+
`}
|
|
33
|
+
</th>
|
|
34
|
+
`)}
|
|
35
|
+
</tr>
|
|
36
|
+
`)}
|
|
33
37
|
</thead>
|
|
34
38
|
<tbody>
|
|
35
39
|
${this.loading?a`
|
|
@@ -40,7 +44,7 @@ var e=Object.defineProperty,t=(t,i,s)=>((t,i,s)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
40
44
|
<kg-skeleton variant="rect" width="16px" height="16px" style="border-radius: 4px; display: inline-block;"></kg-skeleton>
|
|
41
45
|
</td>
|
|
42
46
|
`:""}
|
|
43
|
-
${
|
|
47
|
+
${l.map(()=>a`
|
|
44
48
|
<td>
|
|
45
49
|
<kg-skeleton variant="text" width="${Math.floor(50*Math.random()+40)}%" height="1rem"></kg-skeleton>
|
|
46
50
|
</td>
|
|
@@ -49,7 +53,7 @@ var e=Object.defineProperty,t=(t,i,s)=>((t,i,s)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
49
53
|
`)}
|
|
50
54
|
`:0===e.length?a`
|
|
51
55
|
<tr>
|
|
52
|
-
<td colspan="${
|
|
56
|
+
<td colspan="${l.length+(this.selectable?1:0)}" class="empty-state">
|
|
53
57
|
Veri bulunamadı.
|
|
54
58
|
</td>
|
|
55
59
|
</tr>
|
|
@@ -60,7 +64,7 @@ var e=Object.defineProperty,t=(t,i,s)=>((t,i,s)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
60
64
|
>
|
|
61
65
|
${this.selectable?a`
|
|
62
66
|
<td class="checkbox-cell">
|
|
63
|
-
${
|
|
67
|
+
${s?a`
|
|
64
68
|
<kg-radio
|
|
65
69
|
.checked="${this._isSelected(e)}"
|
|
66
70
|
style="pointer-events: none;"
|
|
@@ -75,7 +79,7 @@ var e=Object.defineProperty,t=(t,i,s)=>((t,i,s)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
75
79
|
</td>
|
|
76
80
|
`:""}
|
|
77
81
|
|
|
78
|
-
${
|
|
82
|
+
${l.map(t=>a`
|
|
79
83
|
<td class="${t.align?`align-${t.align}`:""}">
|
|
80
84
|
${this._renderCellContent(t,e)}
|
|
81
85
|
</td>
|
|
@@ -129,8 +133,8 @@ var e=Object.defineProperty,t=(t,i,s)=>((t,i,s)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
129
133
|
</kg-button>
|
|
130
134
|
|
|
131
135
|
<!-- Page Numbers -->
|
|
132
|
-
${
|
|
133
|
-
${t>0&&e-
|
|
136
|
+
${d.map((e,t)=>a`
|
|
137
|
+
${t>0&&e-d[t-1]>1?a`<span class="pagination-info">...</span>`:""}
|
|
134
138
|
<kg-button
|
|
135
139
|
@click="${()=>this._changePage(e)}"
|
|
136
140
|
color="${this.currentPage===e?"primary":"secondary"}"
|
|
@@ -169,7 +173,7 @@ var e=Object.defineProperty,t=(t,i,s)=>((t,i,s)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
169
173
|
</div>
|
|
170
174
|
`:""}
|
|
171
175
|
</div>
|
|
172
|
-
`}}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",
|
|
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`
|
|
173
177
|
:host {
|
|
174
178
|
display: block;
|
|
175
179
|
width: 100%;
|
package/dist/react/KgDataGrid.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{useState as t,useRef as r,useMemo as n,useEffect as a}from"react";import{createPortal as
|
|
1
|
+
import e,{useState as t,useRef as r,useMemo as n,useEffect as a}from"react";import{createPortal as c}from"react-dom";import{o}from"../chunks/create-component-jQ1kjF1Z.js";import{kgdatagrid as s}from"../components/kg-datagrid.js";"undefined"==typeof customElements||customElements.get("kg-datagrid")||customElements.define("kg-datagrid",s);const l=o({tagName:"kg-datagrid",elementClass:s,react:e,events:{onSelectionChange:"selection-change",onPageChange:"page-change",onPageSizeChange:"page-size-change",onSort:"sort"}}),d=({columns:o,...s})=>{const[d,i]=t(/* @__PURE__ */new Map),m=r(null),u=r(/* @__PURE__ */new WeakMap),g=r(/* @__PURE__ */new WeakMap),h=n(()=>{if(!o)return[];const t=r=>r.map(r=>{const n={...r};return r.render&&(n.render=t=>{const n=r.render(t);if(!e.isValidElement(n))return n;let a=u.current.get(t);a||(a=/* @__PURE__ */new Map,u.current.set(t,a));let c=a.get(r.field);return c||(c=document.createElement("div"),c.className="kg-react-cell-portal",c.style.display="contents",c.dataset.reactCellId=Math.random().toString(36).substr(2,9),a.set(r.field,c)),c._reactContent=n,c}),r.headerRender&&(n.headerRender=t=>{const n=r.headerRender(t);if(!e.isValidElement(n))return n;let a=g.current.get(r);return a||(a=document.createElement("div"),a.className="kg-react-cell-portal",a.style.display="contents",a.dataset.reactCellId="h-"+Math.random().toString(36).substr(2,9),g.current.set(r,a)),a._reactContent=n,a}),r.children&&r.children.length>0&&(n.children=t(r.children)),n});return t(o)},[o]);return a(()=>{const e=m.current;if(!e)return;const t=e.shadowRoot||e,r=()=>{const e=t.querySelectorAll(".kg-react-cell-portal"),r=/* @__PURE__ */new Map;e.forEach(e=>{e._reactContent&&r.set(e,e._reactContent)}),i(e=>{if(e.size!==r.size)return r;for(const[t,n]of r)if(e.get(t)!==n)return r;return e})},n=new MutationObserver(()=>{r()});return n.observe(t,{childList:!0,subtree:!0,attributes:!1,characterData:!1}),r(),()=>n.disconnect()},[h,s.data]),e.createElement(e.Fragment,null,e.createElement(l,{ref:m,columns:h,...s}),Array.from(d.entries()).map(([e,t])=>c(t,e,e.dataset.reactCellId)))};export{d as KgDataGrid};
|