@lazhus/kg-ui 0.10.5 → 0.10.10
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 +45 -16
- package/dist/components/kg-datagrid.js +19 -19
- package/dist/components/kg-modal.js +3 -3
- package/dist/components/kg-select.js +13 -8
- package/dist/react/KgDataGrid.js +1 -1
- package/package.json +1 -1
- package/types/components/kg-datagrid.d.ts +2 -0
- package/types/index.d.ts +2 -0
package/custom-elements.json
CHANGED
|
@@ -1571,6 +1571,10 @@
|
|
|
1571
1571
|
}
|
|
1572
1572
|
]
|
|
1573
1573
|
},
|
|
1574
|
+
{
|
|
1575
|
+
"kind": "method",
|
|
1576
|
+
"name": "_getNormalizedPageSizeOptions"
|
|
1577
|
+
},
|
|
1574
1578
|
{
|
|
1575
1579
|
"kind": "method",
|
|
1576
1580
|
"name": "_getProcessedData"
|
|
@@ -1814,11 +1818,23 @@
|
|
|
1814
1818
|
"text": "CustomEvent"
|
|
1815
1819
|
}
|
|
1816
1820
|
},
|
|
1821
|
+
{
|
|
1822
|
+
"name": "kg-page-change",
|
|
1823
|
+
"type": {
|
|
1824
|
+
"text": "CustomEvent"
|
|
1825
|
+
}
|
|
1826
|
+
},
|
|
1817
1827
|
{
|
|
1818
1828
|
"name": "page-size-change",
|
|
1819
1829
|
"type": {
|
|
1820
1830
|
"text": "CustomEvent"
|
|
1821
1831
|
}
|
|
1832
|
+
},
|
|
1833
|
+
{
|
|
1834
|
+
"name": "kg-page-size-change",
|
|
1835
|
+
"type": {
|
|
1836
|
+
"text": "CustomEvent"
|
|
1837
|
+
}
|
|
1822
1838
|
}
|
|
1823
1839
|
],
|
|
1824
1840
|
"superclass": {
|
|
@@ -3857,7 +3873,7 @@
|
|
|
3857
3873
|
"kind": "field",
|
|
3858
3874
|
"name": "styles",
|
|
3859
3875
|
"static": true,
|
|
3860
|
-
"default": "css` :host { display: block; --kg-modal-z-index: 2000; } .kg-modal-dimmer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: var(--kg-modal-z-index); opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: var(--kg-space-md); box-sizing: border-box; } .kg-modal-dimmer.open { opacity: 1; visibility: visible; } .kg-modal-content { background: var(--kg-bg); color: var(--kg-text); border-radius: var(--kg-radius-lg); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); width: 100%; max-width: 600px;
|
|
3876
|
+
"default": "css` :host { display: block; --kg-modal-z-index: 2000; } .kg-modal-dimmer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: var(--kg-modal-z-index); opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: var(--kg-space-md); box-sizing: border-box; } .kg-modal-dimmer.open { opacity: 1; visibility: visible; } .kg-modal-content { background: var(--kg-bg); color: var(--kg-text); border-radius: var(--kg-radius-lg); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); width: 100%; max-width: 600px; opacity: 0; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; max-height: 90vh; overflow: visible; } .kg-modal-dimmer.open .kg-modal-content { opacity: 1; } /* Sizes */ .size-mini { max-width: 350px; } .size-tiny { max-width: 450px; } .size-small { max-width: 550px; } .size-large { max-width: 900px; } .size-fullscreen { max-width: 95vw; height: 95vh; } /* Basic style */ :host([basic]) .kg-modal-content { background: transparent; box-shadow: none; color: white; } .modal-header { padding: var(--kg-space-lg); font-size: 1.25rem; font-weight: 700; border-bottom: 1px solid var(--kg-border); display: flex; justify-content: space-between; align-items: center; } .modal-body { padding: var(--kg-space-lg); overflow-y: auto; flex: 1; } .modal-footer { padding: var(--kg-space-md) var(--kg-space-lg); border-top: 1px solid var(--kg-border); background: var(--kg-surface); display: flex; justify-content: flex-end; gap: 0.75rem; } .close-button { background: none; border: none; color: var(--kg-text-muted); cursor: pointer; font-size: 1.5rem; padding: 0.5rem; line-height: 1; border-radius: var(--kg-radius-sm); transition: all 0.2s; } .close-button:hover { background: var(--kg-surface); color: var(--kg-text); } `"
|
|
3861
3877
|
},
|
|
3862
3878
|
{
|
|
3863
3879
|
"kind": "field",
|
|
@@ -4720,7 +4736,7 @@
|
|
|
4720
4736
|
"kind": "field",
|
|
4721
4737
|
"name": "styles",
|
|
4722
4738
|
"static": true,
|
|
4723
|
-
"default": "css` :host { display: inline-block; width: 100%; position: relative; font-family: inherit; user-select: none; } .kg-select-container { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; position: relative; } .select-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; margin-left: 2px; } * { box-sizing: border-box; } .select-trigger { display: flex; align-items: center; justify-content: space-between; height: var(--kg-form-height); padding: 0 1rem; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); cursor: pointer; transition: all 0.2s ease; gap: 8px; flex-wrap: nowrap; overflow: hidden; } .select-trigger:hover { border-color: var(--kg-primary); } .select-trigger.open { border-color: var(--kg-primary); box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); } .select-trigger.disabled { opacity: 0.5; cursor: not-allowed; background: var(--kg-bg-secondary); } .placeholder { color: var(--kg-text-muted); opacity: 0.6; } .selected-text { color: var(--kg-text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tags-container { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; } .tag { background: var(--kg-primary); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; display: flex; align-items: center; gap: 4px; } .tag-remove { cursor: pointer; opacity: 0.8; } .tag-remove:hover { opacity: 1; } .chevron { transition: transform 0.2s ease; color: var(--kg-text-muted); flex-shrink: 0; } .open .chevron { transform: rotate(180deg); } .clear-button { display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--kg-text-muted); opacity: 0.6; transition: all 0.2s; flex-shrink: 0; padding: 4px; border-radius: 50%; } .clear-button:hover { opacity: 1; background: var(--kg-bg-secondary, rgba(0, 0, 0, 0.04)); color: var(--kg-primary); } /* Dropdown */ .select-dropdown { position:
|
|
4739
|
+
"default": "css` :host { display: inline-block; width: 100%; position: relative; font-family: inherit; user-select: none; } .kg-select-container { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; position: relative; } .select-label { font-size: 0.875rem; font-weight: 600; color: var(--kg-text); opacity: 0.8; margin-left: 2px; } * { box-sizing: border-box; } .select-trigger { display: flex; align-items: center; justify-content: space-between; height: var(--kg-form-height); padding: 0 1rem; background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); cursor: pointer; transition: all 0.2s ease; gap: 8px; flex-wrap: nowrap; overflow: hidden; } .select-trigger:hover { border-color: var(--kg-primary); } .select-trigger.open { border-color: var(--kg-primary); box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2); } .select-trigger.disabled { opacity: 0.5; cursor: not-allowed; background: var(--kg-bg-secondary); } .placeholder { color: var(--kg-text-muted); opacity: 0.6; } .selected-text { color: var(--kg-text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tags-container { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; } .tag { background: var(--kg-primary); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; display: flex; align-items: center; gap: 4px; } .tag-remove { cursor: pointer; opacity: 0.8; } .tag-remove:hover { opacity: 1; } .chevron { transition: transform 0.2s ease; color: var(--kg-text-muted); flex-shrink: 0; } .open .chevron { transform: rotate(180deg); } .clear-button { display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--kg-text-muted); opacity: 0.6; transition: all 0.2s; flex-shrink: 0; padding: 4px; border-radius: 50%; } .clear-button:hover { opacity: 1; background: var(--kg-bg-secondary, rgba(0, 0, 0, 0.04)); color: var(--kg-primary); } /* Dropdown */ /* * Positioned as fixed (coordinates computed in _positionDropdown) so the * dropdown escapes any ancestor with overflow auto/hidden -- e.g. a modal * body or a scroll container -- instead of being clipped by it. */ .select-dropdown { position: fixed; top: 0; left: 0; width: 100%; background: var(--kg-surface, var(--kg-bg, #fff)); border: 1px solid var(--kg-border); border-radius: var(--kg-radius-md, 8px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); z-index: 9999; max-height: 300px; overflow-y: auto; display: none; animation: slideDown 0.2s ease-out; } .select-dropdown.visible { display: block; } @keyframes slideDown { from { transform: translateY(-6px); } to { transform: translateY(0); } } .search-container { padding: 8px; border-bottom: 1px solid var(--kg-border); position: sticky; top: 0; background: var(--kg-surface); z-index: 10; } .search-input { width: 100%; padding: 6px 10px; border: 1px solid var(--kg-border); border-radius: 4px; outline: none; font-family: inherit; font-size: 0.9rem; } .search-input:focus { border-color: var(--kg-primary); } .option-item { padding: 10px 16px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background 0.15s; color: var(--kg-text); } .option-item:hover { background: var(--kg-bg-secondary, rgba(0, 0, 0, 0.04)); } .option-item.selected { background: rgba(var(--kg-primary-rgb, 19, 103, 255), 0.08); color: var(--kg-primary); font-weight: 600; } .no-results { padding: 16px; text-align: center; color: var(--kg-text-muted); font-size: 0.9rem; } .check-icon { width: 16px; height: 16px; } .select-trigger.error { border-color: #DB2828 !important; background-color: rgba(219, 40, 40, 0.02) !important; } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 2px; font-weight: 500; animation: fadeIn 0.2s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
|
|
4724
4740
|
},
|
|
4725
4741
|
{
|
|
4726
4742
|
"kind": "method",
|
|
@@ -4750,7 +4766,20 @@
|
|
|
4750
4766
|
},
|
|
4751
4767
|
{
|
|
4752
4768
|
"kind": "method",
|
|
4753
|
-
"name": "_positionDropdown"
|
|
4769
|
+
"name": "_positionDropdown",
|
|
4770
|
+
"description": "The dropdown is `position: fixed`, so anchor it to the trigger's viewport\nrect. This lets it overflow any clipping ancestor (modal body, scroll\ncontainer). Flips above the trigger when there isn't enough room below."
|
|
4771
|
+
},
|
|
4772
|
+
{
|
|
4773
|
+
"kind": "method",
|
|
4774
|
+
"name": "_handleReposition"
|
|
4775
|
+
},
|
|
4776
|
+
{
|
|
4777
|
+
"kind": "method",
|
|
4778
|
+
"name": "_setupReposition"
|
|
4779
|
+
},
|
|
4780
|
+
{
|
|
4781
|
+
"kind": "method",
|
|
4782
|
+
"name": "_teardownReposition"
|
|
4754
4783
|
},
|
|
4755
4784
|
{
|
|
4756
4785
|
"kind": "method",
|
|
@@ -4790,6 +4819,19 @@
|
|
|
4790
4819
|
}
|
|
4791
4820
|
]
|
|
4792
4821
|
},
|
|
4822
|
+
{
|
|
4823
|
+
"kind": "method",
|
|
4824
|
+
"name": "updated",
|
|
4825
|
+
"parameters": [
|
|
4826
|
+
{
|
|
4827
|
+
"name": "changedProperties"
|
|
4828
|
+
}
|
|
4829
|
+
],
|
|
4830
|
+
"inheritedFrom": {
|
|
4831
|
+
"name": "FormAssociated",
|
|
4832
|
+
"module": "src/mixins/FormAssociated.js"
|
|
4833
|
+
}
|
|
4834
|
+
},
|
|
4793
4835
|
{
|
|
4794
4836
|
"kind": "method",
|
|
4795
4837
|
"name": "_removeTag",
|
|
@@ -4907,19 +4949,6 @@
|
|
|
4907
4949
|
"module": "src/mixins/FormAssociated.js"
|
|
4908
4950
|
}
|
|
4909
4951
|
},
|
|
4910
|
-
{
|
|
4911
|
-
"kind": "method",
|
|
4912
|
-
"name": "updated",
|
|
4913
|
-
"parameters": [
|
|
4914
|
-
{
|
|
4915
|
-
"name": "changedProperties"
|
|
4916
|
-
}
|
|
4917
|
-
],
|
|
4918
|
-
"inheritedFrom": {
|
|
4919
|
-
"name": "FormAssociated",
|
|
4920
|
-
"module": "src/mixins/FormAssociated.js"
|
|
4921
|
-
}
|
|
4922
|
-
},
|
|
4923
4952
|
{
|
|
4924
4953
|
"kind": "method",
|
|
4925
4954
|
"name": "formResetCallback",
|
|
@@ -1,15 +1,15 @@
|
|
|
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)*
|
|
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})))}_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 a={page:t,pageSize:i};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(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?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=Number(this.pageSize)||10,r=Number(this.currentPage)||1,s=Number(t)||0,o=this.pagination?Math.max(1,Math.ceil(s/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 a`
|
|
2
2
|
<div class="wrapper">
|
|
3
3
|
<div class="table-container">
|
|
4
4
|
<table>
|
|
5
5
|
<thead>
|
|
6
|
-
${
|
|
6
|
+
${c.map((e,t)=>a`
|
|
7
7
|
<tr>
|
|
8
8
|
${0===t&&this.selectable?a`
|
|
9
|
-
<th class="checkbox-cell" rowspan="${
|
|
10
|
-
${
|
|
9
|
+
<th class="checkbox-cell" rowspan="${h}">
|
|
10
|
+
${d?"":a`
|
|
11
11
|
<kg-checkbox
|
|
12
|
-
.checked="${
|
|
12
|
+
.checked="${l}"
|
|
13
13
|
@change="${this._handleSelectAll}"
|
|
14
14
|
></kg-checkbox>
|
|
15
15
|
`}
|
|
@@ -44,7 +44,7 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,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
|
-
${
|
|
47
|
+
${g.map(()=>a`
|
|
48
48
|
<td>
|
|
49
49
|
<kg-skeleton variant="text" width="${Math.floor(50*Math.random()+40)}%" height="1rem"></kg-skeleton>
|
|
50
50
|
</td>
|
|
@@ -53,7 +53,7 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
53
53
|
`)}
|
|
54
54
|
`:0===e.length?a`
|
|
55
55
|
<tr>
|
|
56
|
-
<td colspan="${
|
|
56
|
+
<td colspan="${g.length+(this.selectable?1:0)}" class="empty-state">
|
|
57
57
|
Veri bulunamadı.
|
|
58
58
|
</td>
|
|
59
59
|
</tr>
|
|
@@ -64,7 +64,7 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
64
64
|
>
|
|
65
65
|
${this.selectable?a`
|
|
66
66
|
<td class="checkbox-cell">
|
|
67
|
-
${
|
|
67
|
+
${d?a`
|
|
68
68
|
<kg-radio
|
|
69
69
|
.checked="${this._isSelected(e)}"
|
|
70
70
|
style="pointer-events: none;"
|
|
@@ -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
|
-
${
|
|
82
|
+
${g.map(t=>a`
|
|
83
83
|
<td class="${t.align?`align-${t.align}`:""}">
|
|
84
84
|
${this._renderCellContent(t,e)}
|
|
85
85
|
</td>
|
|
@@ -90,18 +90,18 @@ 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&&s>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>${s}</strong> kayıttan <strong>${(r-1)*i+1} - ${Math.min(r*i,s)}</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" @change="${this._handlePageSizeChange}">
|
|
103
|
-
${
|
|
104
|
-
<option value="${e}" ?selected="${
|
|
102
|
+
<select class="page-size-select" .value="${String(i)}" @change="${this._handlePageSizeChange}">
|
|
103
|
+
${n.map(e=>a`
|
|
104
|
+
<option value="${e}" ?selected="${i===e}">${e}</option>
|
|
105
105
|
`)}
|
|
106
106
|
</select>
|
|
107
107
|
</div>
|
|
@@ -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
|
-
${
|
|
137
|
-
${t>0&&e-
|
|
136
|
+
${p.map((e,t)=>a`
|
|
137
|
+
${t>0&&e-p[t-1]>1?a`<span class="pagination-info">...</span>`:""}
|
|
138
138
|
<kg-button
|
|
139
139
|
@click="${()=>this._changePage(e)}"
|
|
140
140
|
color="${this.currentPage===e?"primary":"secondary"}"
|
|
@@ -148,7 +148,7 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
|
|
|
148
148
|
|
|
149
149
|
<!-- Next Page -->
|
|
150
150
|
<kg-button
|
|
151
|
-
?disabled="${this.currentPage===
|
|
151
|
+
?disabled="${this.currentPage===o}"
|
|
152
152
|
@click="${()=>this._changePage(this.currentPage+1)}"
|
|
153
153
|
text
|
|
154
154
|
color="secondary"
|
|
@@ -160,8 +160,8 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,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===o}"
|
|
164
|
+
@click="${()=>this._changePage(o)}"
|
|
165
165
|
text
|
|
166
166
|
color="secondary"
|
|
167
167
|
size="medium"
|
|
@@ -52,8 +52,8 @@ var e=Object.defineProperty,o=(o,t,i)=>((o,t,i)=>t in o?e(o,t,{enumerable:!0,con
|
|
|
52
52
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
53
53
|
width: 100%;
|
|
54
54
|
max-width: 600px;
|
|
55
|
-
|
|
56
|
-
transition:
|
|
55
|
+
opacity: 0;
|
|
56
|
+
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
57
57
|
display: flex;
|
|
58
58
|
flex-direction: column;
|
|
59
59
|
max-height: 90vh;
|
|
@@ -61,7 +61,7 @@ var e=Object.defineProperty,o=(o,t,i)=>((o,t,i)=>t in o?e(o,t,{enumerable:!0,con
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
.kg-modal-dimmer.open .kg-modal-content {
|
|
64
|
-
|
|
64
|
+
opacity: 1;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
/* Sizes */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var e,t=Object.defineProperty;import{LitElement as
|
|
1
|
+
var e,t=Object.defineProperty;import{LitElement as i,css as o,html as s}from"lit";import"lit/directives/class-map.js";import{F as r}from"../chunks/FormAssociated-jTk7w1I7.js";class a extends(r(i)){static get properties(){return{...super.properties,options:{type:Array},value:{type:Object},placeholder:{type:String},label:{type:String},multiple:{type:Boolean},searchable:{type:Boolean},clearable:{type:Boolean},_open:{type:Boolean,state:!0},_searchQuery:{type:String,state:!0}}}constructor(){super(),this.options=[],this.value=null,this.placeholder="Seçiniz...",this.multiple=!1,this.searchable=!1,this.clearable=!1,this._open=!1,this._searchQuery="",this._handleOutsideClick=this._handleOutsideClick.bind(this),this._handleReposition=this._handleReposition.bind(this)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick),this._teardownReposition()}_updateFormValue(){if(this.multiple&&Array.isArray(this.value)){const e=new FormData;this.value.forEach(t=>e.append(this.name,t)),this.internals.setFormValue(e)}else this.internals.setFormValue(this.value)}_handleOutsideClick(e){this._open&&(e.composedPath().includes(this)||this._closeDropdown())}_toggleDropdown(e){this.disabled||(this._open=!this._open,this._open?(this._searchQuery="",this.updateComplete.then(()=>this._positionDropdown()),this._setupReposition(),setTimeout(()=>{const e=this.shadowRoot.querySelector(".search-input");e&&e.focus()},100)):this._teardownReposition())}_positionDropdown(){const e=this.shadowRoot.querySelector(".select-trigger"),t=this.shadowRoot.querySelector(".select-dropdown");if(!e||!t)return;const i=e.getBoundingClientRect(),o=t.offsetHeight,s=window.innerHeight-i.bottom,r=i.top,a=s<o+4&&r>s;t.style.width=`${i.width}px`,t.style.left=`${i.left}px`,t.style.top=a?`${Math.max(4,i.top-o-4)}px`:`${i.bottom+4}px`}_handleReposition(){this._open&&this._positionDropdown()}_setupReposition(){window.addEventListener("scroll",this._handleReposition,!0),window.addEventListener("resize",this._handleReposition)}_teardownReposition(){window.removeEventListener("scroll",this._handleReposition,!0),window.removeEventListener("resize",this._handleReposition)}_closeDropdown(){this._open=!1,this._teardownReposition()}_selectOption(e,t){if(t.stopPropagation(),this.multiple){let t=Array.isArray(this.value)?[...this.value]:[];const i=t.indexOf(e.value);i>-1?t.splice(i,1):t.push(e.value),this.value=t}else this.value=e.value,this._closeDropdown();this._dispatchChange()}_dispatchChange(){this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))}_clearValue(e){e.stopPropagation(),this.value=this.multiple?[]:null,this._dispatchChange(),this._open&&this._closeDropdown()}_handleSearch(e){this._searchQuery=e.target.value.toLowerCase()}updated(e){super.updated?.(e),this._open&&e.has("_searchQuery")&&this._positionDropdown()}_removeTag(e,t){t.stopPropagation();let i=[...this.value];const o=i.indexOf(e);o>-1&&(i.splice(o,1),this.value=i,this._dispatchChange())}render(){const e=e=>this.multiple&&Array.isArray(this.value)?this.value.includes(e):this.value===e,t=(()=>{if(!this.value)return null;if(this.multiple&&Array.isArray(this.value))return this.options.filter(e=>this.value.includes(e.value));const e=this.options.find(e=>e.value===this.value);return e?e.label:null})(),i=(this.options||[]).filter(e=>e.label.toLowerCase().includes(this._searchQuery||""));return s`
|
|
2
2
|
<div class="kg-select-container">
|
|
3
3
|
${this.label?s`<label class="select-label">${this.label}</label>`:""}
|
|
4
4
|
|
|
@@ -55,7 +55,7 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
|
|
|
55
55
|
</div>
|
|
56
56
|
`:""}
|
|
57
57
|
|
|
58
|
-
${
|
|
58
|
+
${i.length>0?i.map(t=>s`
|
|
59
59
|
<div
|
|
60
60
|
class="option-item ${e(t.value)?"selected":""}"
|
|
61
61
|
@click="${e=>this._selectOption(t,e)}"
|
|
@@ -73,7 +73,7 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
|
|
|
73
73
|
</div>
|
|
74
74
|
${this.errorText?s`<div class="error-text">${this.errorText}</div>`:""}
|
|
75
75
|
</div>
|
|
76
|
-
`}}((e,
|
|
76
|
+
`}}((e,i,o)=>{i in e?t(e,i,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[i]=o})(a,"symbol"!=typeof(e="styles")?e+"":e,o`
|
|
77
77
|
:host {
|
|
78
78
|
display: inline-block;
|
|
79
79
|
width: 100%;
|
|
@@ -203,12 +203,17 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
|
|
|
203
203
|
}
|
|
204
204
|
|
|
205
205
|
/* Dropdown */
|
|
206
|
+
/*
|
|
207
|
+
* Positioned as fixed (coordinates computed in _positionDropdown) so the
|
|
208
|
+
* dropdown escapes any ancestor with overflow auto/hidden -- e.g. a modal
|
|
209
|
+
* body or a scroll container -- instead of being clipped by it.
|
|
210
|
+
*/
|
|
206
211
|
.select-dropdown {
|
|
207
|
-
position:
|
|
208
|
-
top:
|
|
212
|
+
position: fixed;
|
|
213
|
+
top: 0;
|
|
209
214
|
left: 0;
|
|
210
215
|
width: 100%;
|
|
211
|
-
background: var(--kg-surface);
|
|
216
|
+
background: var(--kg-surface, var(--kg-bg, #fff));
|
|
212
217
|
border: 1px solid var(--kg-border);
|
|
213
218
|
border-radius: var(--kg-radius-md, 8px);
|
|
214
219
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
@@ -224,8 +229,8 @@ var e,t=Object.defineProperty;import{LitElement as r,css as i,html as s}from"lit
|
|
|
224
229
|
}
|
|
225
230
|
|
|
226
231
|
@keyframes slideDown {
|
|
227
|
-
from {
|
|
228
|
-
to {
|
|
232
|
+
from { transform: translateY(-6px); }
|
|
233
|
+
to { transform: translateY(0); }
|
|
229
234
|
}
|
|
230
235
|
|
|
231
236
|
.search-container {
|
package/dist/react/KgDataGrid.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{useState as t,useRef as
|
|
1
|
+
import e,{useState as t,useRef as n,useMemo as r,useEffect as a}from"react";import{createPortal as o}from"react-dom";import{o as c}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=c({tagName:"kg-datagrid",elementClass:s,react:e,events:{onSelectionChange:"selection-change",onKgSelectionChange:"selection-change",onPageChange:"page-change",onKgPageChange:"page-change",onPageSizeChange:"page-size-change",onKgPageSizeChange:"page-size-change",onSort:"sort",onKgSort:"sort"}}),i=({columns:c,...s})=>{const[i,d]=t(/* @__PURE__ */new Map),g=n(null),m=n(/* @__PURE__ */new WeakMap),u=n(/* @__PURE__ */new WeakMap),h=r(()=>{if(!c)return[];const t=n=>n.map(n=>{const r={...n};return n.render&&(r.render=t=>{const r=n.render(t);if(!e.isValidElement(r))return r;let a=m.current.get(t);a||(a=/* @__PURE__ */new Map,m.current.set(t,a));let o=a.get(n.field);return o||(o=document.createElement("div"),o.className="kg-react-cell-portal",o.style.display="contents",o.dataset.reactCellId=Math.random().toString(36).substr(2,9),a.set(n.field,o)),o._reactContent=r,o}),n.headerRender&&(r.headerRender=t=>{const r=n.headerRender(t);if(!e.isValidElement(r))return r;let a=u.current.get(n);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),u.current.set(n,a)),a._reactContent=r,a}),n.children&&n.children.length>0&&(r.children=t(n.children)),r});return t(c)},[c]);return a(()=>{const e=g.current;if(!e)return;const t=e.shadowRoot||e,n=()=>{const e=t.querySelectorAll(".kg-react-cell-portal"),n=/* @__PURE__ */new Map;e.forEach(e=>{e._reactContent&&n.set(e,e._reactContent)}),d(e=>{if(e.size!==n.size)return n;for(const[t,r]of n)if(e.get(t)!==r)return n;return e})},r=new MutationObserver(()=>{n()});return r.observe(t,{childList:!0,subtree:!0,attributes:!1,characterData:!1}),n(),()=>r.disconnect()},[h,s.data]),e.createElement(e.Fragment,null,e.createElement(l,{ref:g,columns:h,...s}),Array.from(i.entries()).map(([e,t])=>o(t,e,e.dataset.reactCellId)))};export{i as KgDataGrid};
|
package/package.json
CHANGED
|
@@ -63,7 +63,9 @@ declare global {
|
|
|
63
63
|
onSelectionChange?: (e: any) => void;
|
|
64
64
|
onSort?: (e: any) => void;
|
|
65
65
|
onPageChange?: (e: any) => void;
|
|
66
|
+
onKgPageChange?: (e: any) => void;
|
|
66
67
|
onPageSizeChange?: (e: any) => void;
|
|
68
|
+
onKgPageSizeChange?: (e: any) => void;
|
|
67
69
|
[key: string]: any;
|
|
68
70
|
};
|
|
69
71
|
}
|
package/types/index.d.ts
CHANGED
|
@@ -209,7 +209,9 @@ declare global {
|
|
|
209
209
|
onSelectionChange?: (e: any) => void;
|
|
210
210
|
onSort?: (e: any) => void;
|
|
211
211
|
onPageChange?: (e: any) => void;
|
|
212
|
+
onKgPageChange?: (e: any) => void;
|
|
212
213
|
onPageSizeChange?: (e: any) => void;
|
|
214
|
+
onKgPageSizeChange?: (e: any) => void;
|
|
213
215
|
[key: string]: any;
|
|
214
216
|
};
|
|
215
217
|
'kg-datepicker': {
|