@lazhus/kg-ui 0.9.17 → 0.10.0
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
|
@@ -753,13 +753,13 @@
|
|
|
753
753
|
"text": "object"
|
|
754
754
|
},
|
|
755
755
|
"static": true,
|
|
756
|
-
"default": "{ raised: { type: Boolean }, vertical: { type: Boolean }, inverted: { type: Boolean }, color: { type: String }, // primary, secondary, tertiary basic: { type: Boolean }, padded: { type: Boolean } }"
|
|
756
|
+
"default": "{ raised: { type: Boolean }, vertical: { type: Boolean }, inverted: { type: Boolean }, color: { type: String }, // primary, secondary, tertiary basic: { type: Boolean }, padded: { type: Boolean }, fullWidth: { type: Boolean }, height: { type: String }, width: { type: String } }"
|
|
757
757
|
},
|
|
758
758
|
{
|
|
759
759
|
"kind": "field",
|
|
760
760
|
"name": "styles",
|
|
761
761
|
"static": true,
|
|
762
|
-
"default": "css` :host { display: block; margin: 1rem 0; } .ui-card { position: relative; background: var(--kg-bg); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); border-radius: var(--kg-radius-lg, 12px); border: 1px solid var(--kg-border); color: var(--kg-text); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; } .card-header { padding: 1rem 1.25rem; background: var(--kg-surface); border-bottom: 1px solid var(--kg-border); font-weight: 700; font-size: 1.1rem; border-top-left-radius: var(--kg-radius-lg, 12px); border-top-right-radius: var(--kg-radius-lg, 12px); } .card-content { padding: 1.25rem; flex: 1; } .card-footer { padding: 0.75rem 1.25rem; background: var(--kg-surface); border-top: 1px solid var(--kg-border); font-size: 0.9rem; color: var(--kg-text-muted); border-bottom-left-radius: var(--kg-radius-lg, 12px); border-bottom-right-radius: var(--kg-radius-lg, 12px); } /* Variations */ .raised { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .raised:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .basic { background: transparent; border: 1px dashed var(--kg-border); box-shadow: none; } .padded .card-content { padding: 2.5rem; } .inverted { background: #1B1C1D !important; color: #FFFFFF !important; border-color: #3d3e3f !important; } .inverted .card-header, .inverted .card-footer { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #FFFFFF !important; } .inverted .card-footer { color: rgba(255, 255, 255, 0.6) !important; } /* States / Colors */ .primary { border-top: 4px solid var(--kg-primary); } .secondary { border-top: 4px solid var(--kg-secondary); } .tertiary { border-top: 4px solid var(--kg-tertiary); } `"
|
|
762
|
+
"default": "css` :host { display: block; margin: 1rem 0; } .ui-card { position: relative; background: var(--kg-bg); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); border-radius: var(--kg-radius-lg, 12px); border: 1px solid var(--kg-border); color: var(--kg-text); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; box-sizing: border-box; } .full-width { width: 100%; } .card-header { padding: 1rem 1.25rem; background: var(--kg-surface); border-bottom: 1px solid var(--kg-border); font-weight: 700; font-size: 1.1rem; border-top-left-radius: var(--kg-radius-lg, 12px); border-top-right-radius: var(--kg-radius-lg, 12px); } .card-content { padding: 1.25rem; flex: 1; } .card-footer { padding: 0.75rem 1.25rem; background: var(--kg-surface); border-top: 1px solid var(--kg-border); font-size: 0.9rem; color: var(--kg-text-muted); border-bottom-left-radius: var(--kg-radius-lg, 12px); border-bottom-right-radius: var(--kg-radius-lg, 12px); } /* Variations */ .raised { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .raised:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .basic { background: transparent; border: 1px dashed var(--kg-border); box-shadow: none; } .padded .card-content { padding: 2.5rem; } .inverted { background: #1B1C1D !important; color: #FFFFFF !important; border-color: #3d3e3f !important; } .inverted .card-header, .inverted .card-footer { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.1) !important; color: #FFFFFF !important; } .inverted .card-footer { color: rgba(255, 255, 255, 0.6) !important; } /* States / Colors */ .primary { border-top: 4px solid var(--kg-primary); } .secondary { border-top: 4px solid var(--kg-secondary); } .tertiary { border-top: 4px solid var(--kg-tertiary); } `"
|
|
763
763
|
},
|
|
764
764
|
{
|
|
765
765
|
"kind": "method",
|
|
@@ -796,6 +796,14 @@
|
|
|
796
796
|
"text": "boolean"
|
|
797
797
|
},
|
|
798
798
|
"default": "false"
|
|
799
|
+
},
|
|
800
|
+
{
|
|
801
|
+
"kind": "field",
|
|
802
|
+
"name": "fullWidth",
|
|
803
|
+
"type": {
|
|
804
|
+
"text": "boolean"
|
|
805
|
+
},
|
|
806
|
+
"default": "false"
|
|
799
807
|
}
|
|
800
808
|
],
|
|
801
809
|
"superclass": {
|
|
@@ -1606,6 +1614,38 @@
|
|
|
1606
1614
|
}
|
|
1607
1615
|
]
|
|
1608
1616
|
},
|
|
1617
|
+
{
|
|
1618
|
+
"kind": "method",
|
|
1619
|
+
"name": "_getMaxDepth",
|
|
1620
|
+
"parameters": [
|
|
1621
|
+
{
|
|
1622
|
+
"name": "columns"
|
|
1623
|
+
}
|
|
1624
|
+
]
|
|
1625
|
+
},
|
|
1626
|
+
{
|
|
1627
|
+
"kind": "method",
|
|
1628
|
+
"name": "_getLeafCount",
|
|
1629
|
+
"parameters": [
|
|
1630
|
+
{
|
|
1631
|
+
"name": "column"
|
|
1632
|
+
}
|
|
1633
|
+
]
|
|
1634
|
+
},
|
|
1635
|
+
{
|
|
1636
|
+
"kind": "method",
|
|
1637
|
+
"name": "_getLeafColumns",
|
|
1638
|
+
"parameters": [
|
|
1639
|
+
{
|
|
1640
|
+
"name": "columns",
|
|
1641
|
+
"default": "this.columns"
|
|
1642
|
+
}
|
|
1643
|
+
]
|
|
1644
|
+
},
|
|
1645
|
+
{
|
|
1646
|
+
"kind": "method",
|
|
1647
|
+
"name": "_getHeaderRows"
|
|
1648
|
+
},
|
|
1609
1649
|
{
|
|
1610
1650
|
"kind": "method",
|
|
1611
1651
|
"name": "render"
|
|
@@ -1,6 +1,12 @@
|
|
|
1
|
-
var r=Object.defineProperty,e=(e,o
|
|
2
|
-
<
|
|
3
|
-
|
|
1
|
+
var r=Object.defineProperty,e=(e,t,o)=>((e,t,o)=>t in e?r(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o)(e,"symbol"!=typeof t?t+"":t,o);import{LitElement as t,css as o,html as a}from"lit";import{classMap as d}from"lit/directives/class-map.js";import{styleMap as i}from"lit/directives/style-map.js";class s extends t{constructor(){super(),this.raised=!1,this.inverted=!1,this.basic=!1,this.padded=!1,this.fullWidth=!1}render(){const r={"ui-card":!0,raised:this.raised,inverted:this.inverted,basic:this.basic,padded:this.padded,"full-width":this.fullWidth,[this.color]:!!this.color},e={height:this.height||"auto",width:this.fullWidth?"100%":this.width||"auto"},t=this.fullWidth?"0":"1rem 0",o=this.fullWidth?"100%":"auto",s=this.querySelector('[slot="header"]'),l=this.querySelector('[slot="footer"]');return a`
|
|
2
|
+
<style>
|
|
3
|
+
:host {
|
|
4
|
+
margin: ${t};
|
|
5
|
+
width: ${o};
|
|
6
|
+
}
|
|
7
|
+
</style>
|
|
8
|
+
<div class="${d(r)}" style="${i(e)}">
|
|
9
|
+
${s?a`
|
|
4
10
|
<div class="card-header">
|
|
5
11
|
<slot name="header" @slotchange=${()=>this.requestUpdate()}></slot>
|
|
6
12
|
</div>
|
|
@@ -10,13 +16,13 @@ var r=Object.defineProperty,e=(e,o,t)=>((e,o,t)=>o in e?r(e,o,{enumerable:!0,con
|
|
|
10
16
|
<slot></slot>
|
|
11
17
|
</div>
|
|
12
18
|
|
|
13
|
-
${
|
|
19
|
+
${l?a`
|
|
14
20
|
<div class="card-footer">
|
|
15
21
|
<slot name="footer" @slotchange=${()=>this.requestUpdate()}></slot>
|
|
16
22
|
</div>
|
|
17
23
|
`:a`<slot name="footer" @slotchange=${()=>this.requestUpdate()} style="display:none"></slot>`}
|
|
18
24
|
</div>
|
|
19
|
-
`}}e(s,"properties",{raised:{type:Boolean},vertical:{type:Boolean},inverted:{type:Boolean},color:{type:String},basic:{type:Boolean},padded:{type:Boolean}}),e(s,"styles",
|
|
25
|
+
`}}e(s,"properties",{raised:{type:Boolean},vertical:{type:Boolean},inverted:{type:Boolean},color:{type:String},basic:{type:Boolean},padded:{type:Boolean},fullWidth:{type:Boolean},height:{type:String},width:{type:String}}),e(s,"styles",o`
|
|
20
26
|
:host {
|
|
21
27
|
display: block;
|
|
22
28
|
margin: 1rem 0;
|
|
@@ -32,6 +38,11 @@ var r=Object.defineProperty,e=(e,o,t)=>((e,o,t)=>o in e?r(e,o,{enumerable:!0,con
|
|
|
32
38
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
33
39
|
display: flex;
|
|
34
40
|
flex-direction: column;
|
|
41
|
+
box-sizing: border-box;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.full-width {
|
|
45
|
+
width: 100%;
|
|
35
46
|
}
|
|
36
47
|
|
|
37
48
|
.card-header {
|
|
@@ -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};
|
package/package.json
CHANGED
|
@@ -10,10 +10,16 @@ export class kgcard extends LitElement {
|
|
|
10
10
|
basic: boolean;
|
|
11
11
|
/** */
|
|
12
12
|
padded: boolean;
|
|
13
|
+
/** */
|
|
14
|
+
fullWidth: boolean;
|
|
13
15
|
/** Generated from static properties */
|
|
14
16
|
vertical: boolean;
|
|
15
17
|
/** Generated from static properties */
|
|
16
18
|
color: string;
|
|
19
|
+
/** Generated from static properties */
|
|
20
|
+
height: string;
|
|
21
|
+
/** Generated from static properties */
|
|
22
|
+
width: string;
|
|
17
23
|
}
|
|
18
24
|
|
|
19
25
|
declare global {
|
|
@@ -28,8 +34,11 @@ declare global {
|
|
|
28
34
|
inverted?: boolean;
|
|
29
35
|
basic?: boolean;
|
|
30
36
|
padded?: boolean;
|
|
37
|
+
fullWidth?: boolean;
|
|
31
38
|
vertical?: boolean;
|
|
32
39
|
color?: string;
|
|
40
|
+
height?: string;
|
|
41
|
+
width?: string;
|
|
33
42
|
[key: string]: any;
|
|
34
43
|
};
|
|
35
44
|
}
|
package/types/index.d.ts
CHANGED
|
@@ -150,8 +150,11 @@ declare global {
|
|
|
150
150
|
inverted?: boolean;
|
|
151
151
|
basic?: boolean;
|
|
152
152
|
padded?: boolean;
|
|
153
|
+
fullWidth?: boolean;
|
|
153
154
|
vertical?: boolean;
|
|
154
155
|
color?: string;
|
|
156
|
+
height?: string;
|
|
157
|
+
width?: string;
|
|
155
158
|
[key: string]: any;
|
|
156
159
|
};
|
|
157
160
|
'kg-checkbox': {
|