@lazhus/kg-ui 0.2.2

package/dist/components/kg-datagrid.js

@@ -0,0 +1,428 @@
+import { LitElement as d, css as c, html as r } from "lit";
+import "lit/directives/class-map.js";
+import "./kg-checkbox.js";
+import "./kg-radio.js";
+import { unsafeHTML as l } from "lit/directives/unsafe-html.js";
+import "./kg-button.js";
+import "./kg-skeleton.js";
+class h extends d {
+  static properties = {
+    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: !0 },
+    // Sorting
+    sortable: { type: Boolean },
+    // Global sort enable/disable
+    _sortColumn: { type: String, state: !0 },
+    _sortDirection: { type: String, state: !0 },
+    // 'asc' | 'desc'
+    // Pagination
+    pagination: { type: Boolean },
+    pageSize: { type: Number, attribute: "page-size" },
+    _currentPage: { type: Number, state: !0 }
+  };
+  static styles = c`
+    :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;
+    }
+
+
+  `;
+  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 || this.selectionMode === "single") return;
+    e.detail.checked ? this.selectedRows = [...this.data] : this.selectedRows = [], this._emitSelectionChange();
+  }
+  _handleRowSelect(e, t) {
+    if (this.selectable)
+      if (t.stopPropagation(), this.selectionMode === "single")
+        this._isSelected(e) || (this.selectedRows = [e], this._emitSelectionChange());
+      else {
+        let s;
+        t.type === "change" && t.detail !== void 0 && t.detail.checked !== void 0 ? s = t.detail.checked : s = !this._isSelected(e), s ? this.selectedRows = [...this.selectedRows, e] : this.selectedRows = this.selectedRows.filter((o) => o !== 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 = this._sortDirection === "asc" ? "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((t, s) => {
+      const o = t[this._sortColumn], n = s[this._sortColumn];
+      return o < n ? this._sortDirection === "asc" ? -1 : 1 : o > n ? this._sortDirection === "asc" ? 1 : -1 : 0;
+    }), this.pagination) {
+      const t = (this._currentPage - 1) * this.pageSize, s = t + this.pageSize;
+      return {
+        data: e.slice(t, s),
+        total: e.length
+      };
+    }
+    return { data: e, total: e.length };
+  }
+  _changePage(e) {
+    if (e < 1) return;
+    const t = this.data.length, s = Math.ceil(t / this.pageSize);
+    e > s || (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 s = e.render(t);
+    return typeof s == "string" ? l(s) : s;
+  }
+  _renderHeaderContent(e) {
+    if (e.headerRender) {
+      const t = e.headerRender(e);
+      return typeof t == "string" ? l(t) : t;
+    }
+    return e.label;
+  }
+  render() {
+    const { data: e, total: t } = this._getProcessedData(), s = this.pagination ? Math.ceil(t / this.pageSize) : 1, o = this.data.length > 0 && this.selectedRows.length === this.data.length, n = this.selectionMode === "single";
+    return r`
+      <div class="wrapper">
+          <div class="table-container">
+            <table>
+              <thead>
+                <tr>
+                  ${this.selectable ? r`
+                    <th class="checkbox-cell">
+                       ${n ? "" : r`
+                        <kg-checkbox 
+                            .checked="${o}"
+                            @change="${this._handleSelectAll}"
+                        ></kg-checkbox>
+                       `}
+                    </th>
+                  ` : ""}
+                  
+                  ${this.columns.map((i) => r`
+                    <th 
+                        class="${i.sortable || this.sortable ? "sortable" : ""} ${i.align ? `align-${i.align}` : ""} ${this._sortColumn === i.field ? "active-sort" : ""}"
+                        style="${i.width ? `width: ${i.width}; min-width: ${i.width}; max-width: ${i.width};` : ""}"
+                        @click="${() => this._handleSort(i)}"
+                    >
+                      ${this._renderHeaderContent(i)}
+                      ${i.sortable || this.sortable ? r`
+                        <span class="sort-icon">
+                            ${this._sortColumn === i.field ? this._sortDirection === "asc" ? "▲" : "▼" : "⇅"}
+                        </span>
+                      ` : ""}
+                    </th>
+                  `)}
+                </tr>
+              </thead>
+              <tbody>
+                ${this.loading ? r`
+                    ${Array.from({ length: this.pagination && this.pageSize ? this.pageSize : 5 }).map(() => r`
+                        <tr>
+                             ${this.selectable ? r`
+                                <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(() => r`
+                                <td>
+                                    <kg-skeleton variant="text" width="${Math.floor(Math.random() * 50 + 40)}%" height="1rem"></kg-skeleton>
+                                </td>
+                             `)}
+                        </tr>
+                    `)}
+                ` : e.length === 0 ? r`
+                  <tr>
+                     <td colspan="${this.columns.length + (this.selectable ? 1 : 0)}" class="empty-state">
+                        Veri bulunamadı.
+                     </td>
+                  </tr>
+                ` : e.map((i) => r`
+                  <tr 
+                    class="${this._isSelected(i) ? "selected" : ""}"
+                    @click="${(a) => this._handleRowSelect(i, a)}"
+                  >
+                    ${this.selectable ? r`
+                      <td class="checkbox-cell">
+                        ${n ? r`
+                            <kg-radio 
+                                .checked="${this._isSelected(i)}"
+                                style="pointer-events: none;" 
+                            ></kg-radio>
+                        ` : r`
+                            <kg-checkbox 
+                                .checked="${this._isSelected(i)}"
+                                @change="${(a) => this._handleRowSelect(i, a)}"
+                                @click="${(a) => a.stopPropagation()}"
+                            ></kg-checkbox>
+                        `}
+                      </td>
+                    ` : ""}
+    
+                    ${this.columns.map((a) => r`
+                      <td class="${a.align ? `align-${a.align}` : ""}">
+                        ${this._renderCellContent(a, i)}
+                      </td>
+                    `)}
+                  </tr>
+                `)}
+              </tbody>
+            </table>
+          </div>
+
+          ${this.pagination && t > 0 ? r`
+            <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>
+                <div class="pagination-controls">
+                    <!-- First Page -->
+                    <kg-button 
+                        ?disabled="${this._currentPage === 1}"
+                        @click="${() => this._changePage(1)}"
+                        text
+                        color="secondary"
+                        size="medium"
+                        square
+                    >
+                        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 17l-5-5 5-5M18 17l-5-5 5-5"/></svg>
+                    </kg-button>
+
+                    <!-- Previous Page -->
+                    <kg-button 
+                        ?disabled="${this._currentPage === 1}"
+                        @click="${() => this._changePage(this._currentPage - 1)}"
+                        text
+                        color="secondary"
+                        size="medium"
+                        square
+                    >
+                        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
+                    </kg-button>
+
+                    <!-- Page Numbers -->
+                    ${Array.from({ length: s }, (i, a) => a + 1).map((i) => r`
+                        <kg-button 
+                            @click="${() => this._changePage(i)}"
+                            color="${this._currentPage === i ? "primary" : "secondary"}"
+                            ?text="${this._currentPage !== i}"
+                            size="medium"
+                            square
+                        >
+                            ${i}
+                        </kg-button>
+                    `)}
+
+                    <!-- Next Page -->
+                    <kg-button 
+                        ?disabled="${this._currentPage === s}"
+                        @click="${() => this._changePage(this._currentPage + 1)}"
+                        text
+                        color="secondary"
+                        size="medium"
+                        square
+                    >
+                         <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
+                    </kg-button>
+                    
+                    <!-- Last Page -->
+                    <kg-button 
+                        ?disabled="${this._currentPage === s}"
+                        @click="${() => this._changePage(s)}"
+                        text
+                        color="secondary"
+                        size="medium"
+                        square
+                    >
+                        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 17l5-5-5-5M6 17l5-5-5-5"/></svg>
+                    </kg-button>
+                </div>
+            </div>
+          ` : ""}
+      </div>
+    `;
+  }
+}
+customElements.define("kg-datagrid", h);
+export {
+  h as kgdatagrid
+};