@lazhus/kg-ui 0.8.8 → 0.9.0

package/README.md

@@ -10,6 +10,7 @@ Modern, lightweight UI component library built with LitElement.
 - 📱 **Responsive** - Mobile-first design
 - ⚡ **Lightweight** - Built with LitElement
 - 🎯 **TypeScript Ready** - Full type support (Global & React/JSX)
+- 📊 **Powerful DataGrid** - Server-side pagination, sorting, and custom rendering
 - ♿ **Accessible** - ARIA compliant components
 
 ## 📦 Installation

package/custom-elements.json

@@ -1407,13 +1407,13 @@
                 "text": "object"
               },
               "static": true,
-              "default": "{ columns: { type: Array }, // [{ label: 'Name', field: 'name', width: '100px', align: 'left', sortable: true }] data: { type: Array }, loading: { type: Boolean }, striped: { type: Boolean }, bordered: { type: Boolean }, hover: { type: Boolean }, selectable: { type: Boolean }, selectionMode: { type: String, attribute: 'selection-mode' }, // 'single' | 'multiple', default 'multiple' selectedRows: { type: Array, state: true }, // Sorting sortable: { type: Boolean }, // Global sort enable/disable _sortColumn: { type: String, state: true }, _sortDirection: { type: String, state: true }, // 'asc' | 'desc' // Pagination pagination: { type: Boolean }, pageSize: { type: Number, attribute: 'page-size' }, _currentPage: { type: Number, state: true } }"
+              "default": "{ columns: { type: Array }, // [{ label: 'Name', field: 'name', width: '100px', align: 'left', sortable: true }] data: { type: Array }, loading: { type: Boolean }, striped: { type: Boolean }, bordered: { type: Boolean }, hover: { type: Boolean }, selectable: { type: Boolean }, selectionMode: { type: String, attribute: 'selection-mode' }, // 'single' | 'multiple', default 'multiple' selectedRows: { type: Array, state: true }, // Sorting sortable: { type: Boolean }, // Global sort enable/disable _sortColumn: { type: String, state: true }, _sortDirection: { type: String, state: true }, // 'asc' | 'desc' // Pagination pagination: { type: Boolean }, pageSize: { type: Number, attribute: 'page-size' }, pageSizeOptions: { type: Array, attribute: 'page-size-options' }, total: { type: Number }, // Total records for server-side serverSide: { type: Boolean, attribute: 'server-side' }, currentPage: { type: Number, attribute: 'current-page' } }"
             },
             {
               "kind": "field",
               "name": "styles",
               "static": true,
-              "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); white-space: nowrap; user-select: none; transition: background 0.2s; overflow: hidden; text-overflow: ellipsis; } 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; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 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; } /* 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; } `"
+              "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); white-space: nowrap; user-select: none; transition: background 0.2s; overflow: hidden; text-overflow: ellipsis; } 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; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 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; } /* 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; } `"
             },
             {
               "kind": "method",
@@ -1471,6 +1471,15 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "_handlePageSizeChange",
+              "parameters": [
+                {
+                  "name": "e"
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_renderCellContent",
@@ -1594,7 +1603,31 @@
             },
             {
               "kind": "field",
-              "name": "_currentPage",
+              "name": "pageSizeOptions",
+              "type": {
+                "text": "array"
+              },
+              "default": "[10, 20, 50, 100]"
+            },
+            {
+              "kind": "field",
+              "name": "total",
+              "type": {
+                "text": "number"
+              },
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "serverSide",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "currentPage",
               "type": {
                 "text": "number"
               },
@@ -1635,6 +1668,12 @@
               "type": {
                 "text": "CustomEvent"
               }
+            },
+            {
+              "name": "page-size-change",
+              "type": {
+                "text": "CustomEvent"
+              }
             }
           ],
           "superclass": {
@@ -5307,7 +5346,7 @@
               "kind": "field",
               "name": "styles",
               "static": true,
-              "default": "css` :host { display: inline-block; vertical-align: middle; cursor: pointer; user-select: none; font-family: inherit; } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } .kg-switch-wrapper { display: flex; align-items: center; gap: 0.75rem; } .kg-switch-track { position: relative; width: 44px; height: 24px; background: var(--kg-border); border-radius: 24px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); } .kg-switch-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Checked State */ :host([checked]) .kg-switch-track { background: var(--switch-active-color, var(--kg-primary)); } :host([checked]) .kg-switch-thumb { transform: translateX(20px); .label { font-size: 0.95rem; font-weight: 500; color: var(--kg-text); } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 4px; font-weight: 500; animation: fadeIn 0.2s ease-in; white-space: nowrap; } .error .kg-switch-track { box-shadow: 0 0 0 2px rgba(219, 40, 40, 0.2); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
+              "default": "css` :host { display: inline-block; vertical-align: middle; cursor: pointer; user-select: none; font-family: inherit; } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } .kg-switch-wrapper { display: flex; align-items: center; gap: 0.75rem; } .kg-switch-track { position: relative; width: 44px; height: 24px; background: var(--kg-border); border-radius: 24px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); } .kg-switch-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Checked State */ :host([checked]) .kg-switch-track { background: var(--switch-active-color, var(--kg-primary)); } :host([checked]) .kg-switch-thumb { transform: translateX(20px); } .label { font-size: 0.95rem; font-weight: 500; color: var(--kg-text); } .error-text { position: absolute; top: 100%; left: 2px; color: #DB2828; font-size: 0.75rem; margin-top: 4px; font-weight: 500; animation: fadeIn 0.2s ease-in; white-space: nowrap; } .error .kg-switch-track { box-shadow: 0 0 0 2px rgba(219, 40, 40, 0.2); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } `"
             },
             {
               "kind": "method",
@@ -5375,6 +5414,30 @@
               },
               "default": "'primary'"
             },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "leftLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "rightLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''"
+            },
             {
               "kind": "field",
               "name": "value",

package/dist/components/kg-datagrid.js

@@ -1,28 +1,28 @@
-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 o}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 a 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._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(){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.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})))}_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}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;return o`
+var e=Object.defineProperty,t=(t,i,s)=>((t,i,s)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[i]=s)(t,"symbol"!=typeof i?i+"":i,s);import{LitElement as i,css as s,html as a}from"lit";import"lit/directives/class-map.js";import"./kg-checkbox.js";import"./kg-radio.js";import{unsafeHTML as r}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],s=t[this._sortColumn];return i<s?"asc"===this._sortDirection?-1:1:i>s?"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?r(i):i}_renderHeaderContent(e){if(e.headerRender){const t=e.headerRender(e);return"string"==typeof t?r(t):t}return e.label}render(){const{data:e,total:t}=this._getProcessedData(),i=this.pagination?Math.ceil(t/this.pageSize):1,s=this.data.length>0&&this.selectedRows.length===this.data.length,r="single"===this.selectionMode,o=(()=>{const e=[],t=this.currentPage-2,s=this.currentPage+2+1;for(let a=1;a<=i;a++)(1===a||a===i||a>=t&&a<s)&&e.push(a);return e})();return a`
       <div class="wrapper">
           <div class="table-container">
             <table>
               <thead>
                 <tr>
-                  ${this.selectable?o`
+                  ${this.selectable?a`
                     <th class="checkbox-cell">
-                       ${s?"":o`
+                       ${r?"":a`
                         <kg-checkbox 
-                            .checked="${r}"
+                            .checked="${s}"
                             @change="${this._handleSelectAll}"
                         ></kg-checkbox>
                        `}
                     </th>
                   `:""}
                   
-                  ${this.columns.map(e=>o`
+                  ${this.columns.map(e=>a`
                     <th 
                         class="${e.sortable||this.sortable?"sortable":""} ${e.align?`align-${e.align}`:""} ${this._sortColumn===e.field?"active-sort":""}"
                         style="${e.width?`width: ${e.width}; min-width: ${e.width}; max-width: ${e.width};`:""}"
                         @click="${()=>this._handleSort(e)}"
                     >
                       ${this._renderHeaderContent(e)}
-                      ${e.sortable||this.sortable?o`
+                      ${e.sortable||this.sortable?a`
                         <span class="sort-icon">
                             ${this._sortColumn===e.field?"asc"===this._sortDirection?"▲":"▼":"⇅"}
                         </span>
@@ -32,40 +32,40 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
                 </tr>
               </thead>
               <tbody>
-                ${this.loading?o`
-                    ${Array.from({length:this.pagination&&this.pageSize?this.pageSize:5}).map(()=>o`
+                ${this.loading?a`
+                    ${Array.from({length:this.pagination&&this.pageSize?this.pageSize:5}).map(()=>a`
                         <tr>
-                             ${this.selectable?o`
+                             ${this.selectable?a`
                                 <td class="checkbox-cell">
                                     <kg-skeleton variant="rect" width="16px" height="16px" style="border-radius: 4px; display: inline-block;"></kg-skeleton>
                                 </td>
                              `:""}
-                             ${this.columns.map(()=>o`
+                             ${this.columns.map(()=>a`
                                 <td>
                                     <kg-skeleton variant="text" width="${Math.floor(50*Math.random()+40)}%" height="1rem"></kg-skeleton>
                                 </td>
                              `)}
                         </tr>
                     `)}
-                `:0===e.length?o`
+                `:0===e.length?a`
                   <tr>
                      <td colspan="${this.columns.length+(this.selectable?1:0)}" class="empty-state">
                         Veri bulunamadı.
                      </td>
                   </tr>
-                `:e.map(e=>o`
+                `:e.map(e=>a`
                   <tr 
                     class="${this._isSelected(e)?"selected":""}"
                     @click="${t=>this._handleRowSelect(e,t)}"
                   >
-                    ${this.selectable?o`
+                    ${this.selectable?a`
                       <td class="checkbox-cell">
-                        ${s?o`
+                        ${r?a`
                             <kg-radio 
                                 .checked="${this._isSelected(e)}"
                                 style="pointer-events: none;" 
                             ></kg-radio>
-                        `:o`
+                        `:a`
                             <kg-checkbox 
                                 .checked="${this._isSelected(e)}"
                                 @change="${t=>this._handleRowSelect(e,t)}"
@@ -75,7 +75,7 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
                       </td>
                     `:""}
     
-                    ${this.columns.map(t=>o`
+                    ${this.columns.map(t=>a`
                       <td class="${t.align?`align-${t.align}`:""}">
                         ${this._renderCellContent(t,e)}
                       </td>
@@ -86,15 +86,27 @@ 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?o`
+          ${this.pagination&&t>0?a`
             <div class="pagination-footer">
-                <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
+                <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
+                    </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>
+                    </div>
                 </div>
+                
                 <div class="pagination-controls">
                     <!-- First Page -->
                     <kg-button 
-                        ?disabled="${1===this._currentPage}"
+                        ?disabled="${1===this.currentPage}"
                         @click="${()=>this._changePage(1)}"
                         text
                         color="secondary"
@@ -106,8 +118,8 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
 
                     <!-- Previous Page -->
                     <kg-button 
-                        ?disabled="${1===this._currentPage}"
-                        @click="${()=>this._changePage(this._currentPage-1)}"
+                        ?disabled="${1===this.currentPage}"
+                        @click="${()=>this._changePage(this.currentPage-1)}"
                         text
                         color="secondary"
                         size="medium"
@@ -117,11 +129,12 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
                     </kg-button>
 
                     <!-- Page Numbers -->
-                    ${Array.from({length:i},(e,t)=>t+1).map(e=>o`
+                    ${o.map((e,t)=>a`
+                        ${t>0&&e-o[t-1]>1?a`<span class="pagination-info">...</span>`:""}
                         <kg-button 
                             @click="${()=>this._changePage(e)}"
-                            color="${this._currentPage===e?"primary":"secondary"}"
-                            ?text="${this._currentPage!==e}"
+                            color="${this.currentPage===e?"primary":"secondary"}"
+                            ?text="${this.currentPage!==e}"
                             size="medium"
                             square
                         >
@@ -131,8 +144,8 @@ 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}"
-                        @click="${()=>this._changePage(this._currentPage+1)}"
+                        ?disabled="${this.currentPage===i}"
+                        @click="${()=>this._changePage(this.currentPage+1)}"
                         text
                         color="secondary"
                         size="medium"
@@ -143,7 +156,7 @@ 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}"
+                        ?disabled="${this.currentPage===i}"
                         @click="${()=>this._changePage(i)}"
                         text
                         color="secondary"
@@ -156,7 +169,7 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
             </div>
           `:""}
       </div>
-    `}}t(a,"properties",{columns:{type:Array},data:{type:Array},loading:{type:Boolean},striped:{type:Boolean},bordered:{type:Boolean},hover:{type:Boolean},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"},_currentPage:{type:Number,state:!0}}),t(a,"styles",r`
+    `}}t(o,"properties",{columns:{type:Array},data:{type:Array},loading:{type:Boolean},striped:{type:Boolean},bordered:{type:Boolean},hover:{type:Boolean},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",s`
     :host {
       display: block;
       width: 100%;
@@ -315,5 +328,23 @@ var e=Object.defineProperty,t=(t,i,r)=>((t,i,r)=>i in t?e(t,i,{enumerable:!0,con
         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;
+    }
+
 
-  `),"undefined"==typeof customElements||customElements.get("kg-datagrid")||customElements.define("kg-datagrid",a);export{a as kgdatagrid};
+  `),"undefined"==typeof customElements||customElements.get("kg-datagrid")||customElements.define("kg-datagrid",o);export{o as kgdatagrid};

package/dist/components/kg-switch.js

@@ -1,14 +1,15 @@
-var e,t=Object.defineProperty;import{LitElement as r,css as s,html as i}from"lit";import"lit/directives/class-map.js";import{F as a}from"../chunks/FormAssociated-Cx5D8YQA.js";class c extends(a(r)){static get properties(){return{...super.properties,checked:{type:Boolean,reflect:!0},label:{type:String},color:{type:String}}}constructor(){super(),this.checked=!1,this.color="primary",this.value="on"}formResetCallback(){this.checked=this.hasAttribute("checked"),this._updateFormValue()}formStateRestoreCallback(e){"checked"===e?this.checked=!0:"unchecked"===e&&(this.checked=!1),this._updateFormValue()}updated(e){e.has("checked")&&this._updateFormValue(),super.updated(e)}_updateFormValue(){const e=this.checked?this.value||"on":null;this.internals.setFormValue(e,this.checked?"checked":"unchecked")}_toggle(){this.disabled||(this.checked=!this.checked,this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked},bubbles:!0,composed:!0})))}render(){const e=(r=this.color)&&"primary"!==r?r.startsWith("#")||r.startsWith("rgb")||r.startsWith("hsl")?r:{secondary:"var(--kg-secondary)",tertiary:"var(--kg-tertiary)",error:"#e74c3c",red:"#e74c3c",green:"#2ecc71",blue:"#3498db",orange:"#f39c12",purple:"#9b59b6"}[r]||`var(--kg-${r}, ${r})`:"var(--kg-primary)",t=this.checked?`--switch-active-color: ${e};`:"";var r;return i`
+var e,t=Object.defineProperty;import{LitElement as r,css as s,html as i}from"lit";import"lit/directives/class-map.js";import{F as a}from"../chunks/FormAssociated-Cx5D8YQA.js";class c extends(a(r)){static get properties(){return{...super.properties,checked:{type:Boolean,reflect:!0},label:{type:String},leftLabel:{type:String},rightLabel:{type:String},color:{type:String}}}constructor(){super(),this.checked=!1,this.color="primary",this.label="",this.leftLabel="",this.rightLabel="",this.value="on"}formResetCallback(){this.checked=this.hasAttribute("checked"),this._updateFormValue()}formStateRestoreCallback(e){"checked"===e?this.checked=!0:"unchecked"===e&&(this.checked=!1),this._updateFormValue()}updated(e){e.has("checked")&&this._updateFormValue(),super.updated(e)}_updateFormValue(){const e=this.checked?this.value||"on":null;this.internals.setFormValue(e,this.checked?"checked":"unchecked")}_toggle(){this.disabled||(this.checked=!this.checked,this.dispatchEvent(new CustomEvent("change",{detail:{checked:this.checked},bubbles:!0,composed:!0})))}render(){const e=(r=this.color)&&"primary"!==r?r.startsWith("#")||r.startsWith("rgb")||r.startsWith("hsl")?r:{secondary:"var(--kg-secondary)",tertiary:"var(--kg-tertiary)",error:"#e74c3c",red:"#e74c3c",green:"#2ecc71",blue:"#3498db",orange:"#f39c12",purple:"#9b59b6"}[r]||`var(--kg-${r}, ${r})`:"var(--kg-primary)",t=this.checked?`--switch-active-color: ${e};`:"";var r;return i`
       <div style="position: relative; display: inline-block;">
         <div
           class="kg-switch-wrapper ${this.errorText?"error":""}"
           style="${t}"
           @click="${this._toggle}"
         >
+          ${this.leftLabel?i`<span class="label left-label">${this.leftLabel}</span>`:""}
           <div class="kg-switch-track">
             <div class="kg-switch-thumb"></div>
           </div>
-          ${this.label?i`<span class="label">${this.label}</span>`:""}
+          ${this.rightLabel||this.label?i`<span class="label right-label">${this.rightLabel||this.label}</span>`:""}
         </div>
         ${this.errorText?i`<div class="error-text">${this.errorText}</div>`:""}
       </div>
@@ -61,6 +62,8 @@ var e,t=Object.defineProperty;import{LitElement as r,css as s,html as i}from"lit
 
     :host([checked]) .kg-switch-thumb {
       transform: translateX(20px);
+    }
+
     .label {
       font-size: 0.95rem;
       font-weight: 500;

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 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",onPageChange:"page-change",onSort:"sort"}}),m=({columns:c,...s})=>{const[m,i]=t(/* @__PURE__ */new Map),d=r(null),u=r(/* @__PURE__ */new WeakMap),g=n(()=>c?c.map(t=>t.render?{...t,render:r=>{const n=t.render(r);if(!e.isValidElement(n))return n;let a=u.current.get(r);a||(a=/* @__PURE__ */new Map,u.current.set(r,a));let o=a.get(t.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(t.field,o)),o._reactContent=n,o}}:t):[],[c]);return a(()=>{const e=d.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()},[g,s.data]),e.createElement(e.Fragment,null,e.createElement(l,{ref:d,columns:g,...s}),Array.from(m.entries()).map(([e,t])=>o(t,e,e.dataset.reactCellId)))};export{m as KgDataGrid};
+import e,{useState as t,useRef as r,useMemo as n,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",onPageChange:"page-change",onPageSizeChange:"page-size-change",onSort:"sort"}}),i=({columns:c,...s})=>{const[i,m]=t(/* @__PURE__ */new Map),d=r(null),g=r(/* @__PURE__ */new WeakMap),u=n(()=>c?c.map(t=>t.render?{...t,render:r=>{const n=t.render(r);if(!e.isValidElement(n))return n;let a=g.current.get(r);a||(a=/* @__PURE__ */new Map,g.current.set(r,a));let o=a.get(t.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(t.field,o)),o._reactContent=n,o}}:t):[],[c]);return a(()=>{const e=d.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)}),m(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()},[u,s.data]),e.createElement(e.Fragment,null,e.createElement(l,{ref:d,columns:u,...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.8.8",
+  "version": "0.9.0",
   "type": "module",
   "files": [
     "dist",

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

@@ -26,6 +26,14 @@ export class kgdatagrid extends LitElement {
   pagination: boolean;
   /**  */
   pageSize: number;
+  /**  */
+  pageSizeOptions: any[];
+  /**  */
+  total: number;
+  /**  */
+  serverSide: boolean;
+  /**  */
+  currentPage: number;
 }
 
 declare global {
@@ -48,9 +56,14 @@ declare global {
       sortable?: boolean;
       pagination?: boolean;
       pageSize?: number;
+      pageSizeOptions?: any[];
+      total?: number;
+      serverSide?: boolean;
+      currentPage?: number;
       onSelectionChange?: (e: any) => void;
       onSort?: (e: any) => void;
       onPageChange?: (e: any) => void;
+      onPageSizeChange?: (e: any) => void;
         [key: string]: any;
       };
     }

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

@@ -17,6 +17,12 @@ export class kgswitch extends LitElement {
   /**  */
   color: string;
   /**  */
+  label: string;
+  /**  */
+  leftLabel: string;
+  /**  */
+  rightLabel: string;
+  /**  */
   form: any;
   /**  */
   type: string;
@@ -37,6 +43,9 @@ declare global {
       errorText?: string;
       checked?: boolean;
       color?: string;
+      label?: string;
+      leftLabel?: string;
+      rightLabel?: string;
       form?: any;
       type?: string;
       onChange?: (e: any) => void;

package/types/index.d.ts

@@ -198,9 +198,14 @@ declare global {
       sortable?: boolean;
       pagination?: boolean;
       pageSize?: number;
+      pageSizeOptions?: any[];
+      total?: number;
+      serverSide?: boolean;
+      currentPage?: number;
       onSelectionChange?: (e: any) => void;
       onSort?: (e: any) => void;
       onPageChange?: (e: any) => void;
+      onPageSizeChange?: (e: any) => void;
       [key: string]: any;
     };
     'kg-datepicker': {
@@ -424,6 +429,9 @@ declare global {
       errorText?: string;
       checked?: boolean;
       color?: string;
+      label?: string;
+      leftLabel?: string;
+      rightLabel?: string;
       form?: any;
       type?: string;
       onChange?: (e: any) => void;