@lazhus/kg-ui 0.10.9 → 0.10.10

package/custom-elements.json

@@ -1571,6 +1571,10 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_getNormalizedPageSizeOptions"
+            },
             {
               "kind": "method",
               "name": "_getProcessedData"
@@ -1814,11 +1818,23 @@
                 "text": "CustomEvent"
               }
             },
+            {
+              "name": "kg-page-change",
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
             {
               "name": "page-size-change",
               "type": {
                 "text": "CustomEvent"
               }
+            },
+            {
+              "name": "kg-page-size-change",
+              "type": {
+                "text": "CustomEvent"
+              }
             }
           ],
           "superclass": {

package/dist/components/kg-datagrid.js

@@ -1,15 +1,15 @@
-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`
+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`
       <div class="wrapper">
           <div class="table-container">
             <table>
               <thead>
-                ${o.map((e,t)=>a`
+                ${c.map((e,t)=>a`
                   <tr>
                     ${0===t&&this.selectable?a`
-                      <th class="checkbox-cell" rowspan="${n}">
-                         ${s?"":a`
+                      <th class="checkbox-cell" rowspan="${h}">
+                         ${d?"":a`
                           <kg-checkbox 
-                              .checked="${r}"
+                              .checked="${l}"
                               @change="${this._handleSelectAll}"
                           ></kg-checkbox>
                          `}
@@ -44,7 +44,7 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
                                     <kg-skeleton variant="rect" width="16px" height="16px" style="border-radius: 4px; display: inline-block;"></kg-skeleton>
                                 </td>
                              `:""}
-                             ${l.map(()=>a`
+                             ${g.map(()=>a`
                                 <td>
                                     <kg-skeleton variant="text" width="${Math.floor(50*Math.random()+40)}%" height="1rem"></kg-skeleton>
                                 </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
                     `)}
                 `:0===e.length?a`
                   <tr>
-                     <td colspan="${l.length+(this.selectable?1:0)}" class="empty-state">
+                     <td colspan="${g.length+(this.selectable?1:0)}" class="empty-state">
                         Veri bulunamadı.
                      </td>
                   </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
                   >
                     ${this.selectable?a`
                       <td class="checkbox-cell">
-                        ${s?a`
+                        ${d?a`
                             <kg-radio 
                                 .checked="${this._isSelected(e)}"
                                 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
                       </td>
                     `:""}
     
-                    ${l.map(t=>a`
+                    ${g.map(t=>a`
                       <td class="${t.align?`align-${t.align}`:""}">
                         ${this._renderCellContent(t,e)}
                       </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
             </table>
           </div>
 
-          ${this.pagination&&t>0?a`
+          ${this.pagination&&s>0?a`
             <div class="pagination-footer">
                 <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
                     <div class="pagination-info">
-                        Toplam <strong>${t}</strong> kayıttan <strong>${(this.currentPage-1)*this.pageSize+1} - ${Math.min(this.currentPage*this.pageSize,t)}</strong> arası gösteriliyor
+                        Toplam <strong>${s}</strong> kayıttan <strong>${(r-1)*i+1} - ${Math.min(r*i,s)}</strong> arası gösteriliyor
                     </div>
 
                     <div class="page-size-selector">
                         <span>Sayfa başına:</span>
-                        <select class="page-size-select" @change="${this._handlePageSizeChange}">
-                            ${this.pageSizeOptions.map(e=>a`
-                                <option value="${e}" ?selected="${this.pageSize===e}">${e}</option>
+                        <select class="page-size-select" .value="${String(i)}" @change="${this._handlePageSizeChange}">
+                            ${n.map(e=>a`
+                                <option value="${e}" ?selected="${i===e}">${e}</option>
                             `)}
                         </select>
                     </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
                     </kg-button>
 
                     <!-- Page Numbers -->
-                    ${d.map((e,t)=>a`
-                        ${t>0&&e-d[t-1]>1?a`<span class="pagination-info">...</span>`:""}
+                    ${p.map((e,t)=>a`
+                        ${t>0&&e-p[t-1]>1?a`<span class="pagination-info">...</span>`:""}
                         <kg-button 
                             @click="${()=>this._changePage(e)}"
                             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
 
                     <!-- Next Page -->
                     <kg-button 
-                        ?disabled="${this.currentPage===i}"
+                        ?disabled="${this.currentPage===o}"
                         @click="${()=>this._changePage(this.currentPage+1)}"
                         text
                         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
                     
                     <!-- Last Page -->
                     <kg-button 
-                        ?disabled="${this.currentPage===i}"
-                        @click="${()=>this._changePage(i)}"
+                        ?disabled="${this.currentPage===o}"
+                        @click="${()=>this._changePage(o)}"
                         text
                         color="secondary"
                         size="medium"

package/dist/react/KgDataGrid.js

@@ -1 +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};
+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

@@ -1,6 +1,6 @@
 {
   "name": "@lazhus/kg-ui",
-  "version": "0.10.9",
+  "version": "0.10.10",
   "type": "module",
   "files": [
     "dist",

package/types/components/kg-datagrid.d.ts

@@ -63,7 +63,9 @@ declare global {
       onSelectionChange?: (e: any) => void;
       onSort?: (e: any) => void;
       onPageChange?: (e: any) => void;
+      onKgPageChange?: (e: any) => void;
       onPageSizeChange?: (e: any) => void;
+      onKgPageSizeChange?: (e: any) => void;
         [key: string]: any;
       };
     }

package/types/index.d.ts

@@ -209,7 +209,9 @@ declare global {
       onSelectionChange?: (e: any) => void;
       onSort?: (e: any) => void;
       onPageChange?: (e: any) => void;
+      onKgPageChange?: (e: any) => void;
       onPageSizeChange?: (e: any) => void;
+      onKgPageSizeChange?: (e: any) => void;
       [key: string]: any;
     };
     'kg-datepicker': {