@parksw/sw-ui-components 0.0.2 → 0.0.3

package/dist/my-grid-DduCSbuo.js

@@ -0,0 +1,592 @@
+import { t as __decorate } from "./decorate-BnP3GfGh.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { repeat } from "lit/directives/repeat.js";
+var MyGrid = class extends LitElement {
+	constructor() {
+		super(), this.columns = [], this.data = [], this.itemsPerPage = 10, this.columnReordering = !0, this.height = "auto", this.enableColumnVisibility = !0, this.enableFilter = !0, this._sortKey = null, this._sortDirection = "asc", this._draggedColumnIndex = null, this._dragOverColumnIndex = null, this._selectedRowId = null, this._selectedColumnKey = null, this._filterValues = {}, this._activeFilterColumn = null, this._filterSearchTerm = "", this._currentPage = 1, this._hiddenColumns = /* @__PURE__ */ new Set(), this._showColumnMenu = !1, this._filterMenuSortDirection = "asc", this._resizingColumnIndex = null, this._startX = 0, this._startWidth = 0, this._handleDocumentClick = this._handleDocumentClick.bind(this), this._handleResizeMove = this._handleResizeMove.bind(this), this._handleResizeEnd = this._handleResizeEnd.bind(this);
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("click", this._handleDocumentClick), document.addEventListener("mousemove", this._handleResizeMove), document.addEventListener("mouseup", this._handleResizeEnd);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), document.removeEventListener("click", this._handleDocumentClick), document.removeEventListener("mousemove", this._handleResizeMove), document.removeEventListener("mouseup", this._handleResizeEnd);
+	}
+	updated(e) {
+		super.updated(e), e.has("enableFilter") && (this._filterValues = {}, this._activeFilterColumn = null, this._filterSearchTerm = "", this._resetPage());
+	}
+	_handleDocumentClick(e) {
+		this._showColumnMenu &&= !1, this._activeFilterColumn && (this._activeFilterColumn = null, this._filterSearchTerm = "");
+	}
+	get _visibleColumns() {
+		return this.columns.filter((e) => !this._hiddenColumns.has(e.key));
+	}
+	get _gridColumnTemplate() {
+		let e = "";
+		return this.enableColumnVisibility && (e += "40px "), e += this._visibleColumns.map((e) => e.width || "minmax(150px, 1fr)").join(" "), e;
+	}
+	_resetPage() {
+		this._currentPage = 1;
+	}
+	_toggleColumnMenu(e) {
+		e.stopPropagation(), this._showColumnMenu = !this._showColumnMenu, this._activeFilterColumn = null;
+	}
+	_toggleColumnVisibility(e) {
+		let o = new Set(this._hiddenColumns);
+		o.has(e) ? o.delete(e) : o.add(e), this._hiddenColumns = o;
+	}
+	_handleItemsPerPageChange(e) {
+		let o = e.target;
+		this.itemsPerPage = Number(o.value), this._resetPage();
+	}
+	_handleHeaderClick(e) {
+		this._sortKey === e ? this._sortDirection = this._sortDirection === "asc" ? "desc" : "asc" : (this._sortKey = e, this._sortDirection = "asc"), this._resetPage();
+	}
+	_toggleFilterMenu(e, o) {
+		e.stopPropagation(), this._activeFilterColumn === o ? this._activeFilterColumn = null : (this._activeFilterColumn = o, this._showColumnMenu = !1, this._filterMenuSortDirection = "asc"), this._filterSearchTerm = "";
+	}
+	_toggleFilterMenuSort(e) {
+		e.stopPropagation(), this._filterMenuSortDirection = this._filterMenuSortDirection === "asc" ? "desc" : "asc";
+	}
+	_getUniqueValues(e) {
+		let o = new Set(this.data.map((o) => o[e]));
+		return Array.from(o).sort((e, o) => {
+			if (e === o) return 0;
+			if (e == null) return 1;
+			if (o == null) return -1;
+			let s = 0;
+			if (typeof e == "number" && typeof o == "number") s = e - o;
+			else {
+				let c = Date.parse(String(e)), l = Date.parse(String(o));
+				s = !isNaN(c) && !isNaN(l) && String(e).includes("-") && String(o).includes("-") ? c - l : String(e).localeCompare(String(o));
+			}
+			return this._filterMenuSortDirection === "asc" ? s : -s;
+		});
+	}
+	_isFilterActive(e) {
+		return !!this._filterValues[e];
+	}
+	_handleFilterValueChange(e, o, s) {
+		let c = this._filterValues[e];
+		if (c) {
+			let l = new Set(c);
+			s ? l.add(o) : l.delete(o);
+			let u = this._getUniqueValues(e);
+			if (l.size === u.length) {
+				let o = { ...this._filterValues };
+				delete o[e], this._filterValues = o;
+			} else this._filterValues = {
+				...this._filterValues,
+				[e]: l
+			};
+		} else if (!s) {
+			let s = this._getUniqueValues(e);
+			c = new Set(s), c.delete(o), this._filterValues = {
+				...this._filterValues,
+				[e]: c
+			};
+		}
+		this._resetPage();
+	}
+	_handleSelectAll(e, o) {
+		if (o) {
+			let o = { ...this._filterValues };
+			delete o[e], this._filterValues = o;
+		} else this._filterValues = {
+			...this._filterValues,
+			[e]: /* @__PURE__ */ new Set()
+		};
+		this._resetPage();
+	}
+	_handleFilterSearch(e) {
+		this._filterSearchTerm = e.target.value;
+	}
+	_handleResizeStart(e, o) {
+		e.preventDefault(), e.stopPropagation(), this._resizingColumnIndex = o, this._startX = e.pageX;
+		let s = this.shadowRoot?.querySelectorAll(".header-cell"), c = o + (this.enableColumnVisibility ? 1 : 0);
+		s && s[c] ? this._startWidth = s[c].getBoundingClientRect().width : this._startWidth = 150;
+	}
+	_handleResizeMove(e) {
+		if (this._resizingColumnIndex !== null) {
+			let o = e.pageX - this._startX, s = Math.max(50, this._startWidth + o), c = this._visibleColumns[this._resizingColumnIndex], l = this.columns.findIndex((e) => e.key === c.key);
+			if (l !== -1) {
+				let e = [...this.columns];
+				e[l] = {
+					...e[l],
+					width: `${s}px`
+				}, this.columns = e;
+			}
+		}
+	}
+	_handleResizeEnd() {
+		this._resizingColumnIndex = null;
+	}
+	get _filteredData() {
+		if (!this.enableFilter) return this.data;
+		let e = this.data, o = Object.keys(this._filterValues);
+		return o.length > 0 && (e = e.filter((e) => o.every((o) => {
+			let s = this._filterValues[o];
+			return !s || s.size === 0 ? !1 : s ? s.has(e[o]) : !0;
+		}))), e;
+	}
+	get _sortedData() {
+		let e = this._filteredData;
+		return this._sortKey ? [...e].sort((e, o) => {
+			let s = e[this._sortKey], c = o[this._sortKey];
+			if (s === c) return 0;
+			if (s == null) return 1;
+			if (c == null) return -1;
+			let l = 0;
+			return l = typeof s == "string" && typeof c == "string" ? s.localeCompare(c) : typeof s == "number" && typeof c == "number" ? s - c : String(s).localeCompare(String(c)), this._sortDirection === "asc" ? l : -l;
+		}) : e;
+	}
+	get _paginatedData() {
+		let e = (this._currentPage - 1) * this.itemsPerPage, o = e + this.itemsPerPage;
+		return this._sortedData.slice(e, o);
+	}
+	_handleCellClick(e, o) {
+		let s = e.id;
+		this._selectedRowId === s && this._selectedColumnKey === o ? (this._selectedRowId = null, this._selectedColumnKey = null) : (this._selectedRowId = s, this._selectedColumnKey = o);
+	}
+	_handleDragStart(e, o) {
+		if (this._resizingColumnIndex !== null) {
+			e.preventDefault();
+			return;
+		}
+		if (!this.columnReordering) {
+			e.preventDefault();
+			return;
+		}
+		if (this._draggedColumnIndex = o, e.dataTransfer) {
+			e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", o.toString());
+			let s = e.target;
+			e.dataTransfer.setDragImage(s, e.offsetX, e.offsetY);
+		}
+	}
+	_handleDragOver(e, o) {
+		this.columnReordering && (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move"), this._draggedColumnIndex !== null && this._draggedColumnIndex !== o && (this._dragOverColumnIndex = o));
+	}
+	_handleDragLeave() {
+		this.columnReordering && (this._dragOverColumnIndex = null);
+	}
+	_handleDrop(e, o) {
+		if (this.columnReordering) {
+			if (e.preventDefault(), e.dataTransfer) {
+				let s = parseInt(e.dataTransfer.getData("text/plain"), 10);
+				if (this._draggedColumnIndex !== null && s !== o) {
+					let e = [...this._visibleColumns], [c] = e.splice(s, 1);
+					e.splice(o, 0, c);
+					let l = [], u = 0;
+					for (let o of this.columns) this._hiddenColumns.has(o.key) ? l.push(o) : l.push(e[u++]);
+					this.columns = l;
+				}
+			}
+			this._draggedColumnIndex = null, this._dragOverColumnIndex = null;
+		}
+	}
+	_handleDragEnd() {
+		this.columnReordering && (this._draggedColumnIndex = null, this._dragOverColumnIndex = null);
+	}
+	_formatLink(e, o) {
+		return e.replace(/{(\w+)}/g, (e, s) => o[s] === void 0 ? e : String(o[s]));
+	}
+	_renderCell(e, o) {
+		let s = e[o.key];
+		return o.linkTemplate ? html`<a href="${this._formatLink(o.linkTemplate, e)}">${s}</a>` : s;
+	}
+	_renderColumnMenu() {
+		return this._showColumnMenu ? html`
+      <div class="column-menu" @click=${(e) => e.stopPropagation()}>
+        ${this.columns.map((e) => html`
+          <label>
+            <input
+              type="checkbox"
+              .checked=${!this._hiddenColumns.has(e.key)}
+              @change=${() => this._toggleColumnVisibility(e.key)}
+            />
+            ${e.header}
+          </label>
+        `)}
+      </div>
+    ` : null;
+	}
+	_renderFilterMenu(e, o) {
+		if (this._activeFilterColumn !== e) return null;
+		let s = this._getUniqueValues(e).filter((e) => String(e).toLowerCase().includes(this._filterSearchTerm.toLowerCase())), l = this._filterValues[e], u = !l, d = u || !!l && s.every((e) => l.has(e));
+		return html`
+        <div class="${o > this._visibleColumns.length - 3 ? "filter-menu right-aligned" : "filter-menu"}" @click=${(e) => e.stopPropagation()}>
+            <div class="filter-search-container">
+                <input 
+                    type="text" 
+                    class="filter-search" 
+                    placeholder="Search..." 
+                    .value=${this._filterSearchTerm}
+                    @input=${this._handleFilterSearch}
+                />
+                <button class="filter-sort-btn" @click=${this._toggleFilterMenuSort} title="Sort Values">
+                    ${this._filterMenuSortDirection === "asc" ? "▲" : "▼"}
+                </button>
+            </div>
+            <div class="filter-list">
+                <label>
+                    <input 
+                        type="checkbox" 
+                        .checked=${d}
+                        @change=${(o) => this._handleSelectAll(e, o.target.checked)}
+                    />
+                    (Select All)
+                </label>
+                ${s.map((o) => html`
+                    <label>
+                        <input 
+                            type="checkbox" 
+                            .checked=${u || !!l && l.has(o)}
+                            @change=${(s) => this._handleFilterValueChange(e, o, s.target.checked)}
+                        />
+                        ${String(o)}
+                    </label>
+                `)}
+            </div>
+        </div>
+      `;
+	}
+	_renderHeader(e) {
+		return html`
+      <div class="grid-header">
+        <div class="grid-row" style=${styleMap(e)}>
+          ${when(this.enableColumnVisibility, () => html`
+            <div class="grid-cell header-cell settings-cell" @click=${this._toggleColumnMenu}>
+              ⚙️
+              ${this._renderColumnMenu()}
+            </div>
+          `)}
+          ${this._visibleColumns.map((e, o) => {
+			let s = {
+				"grid-cell": !0,
+				"header-cell": !0,
+				"drag-over": this._dragOverColumnIndex === o,
+				reorderable: this.columnReordering,
+				"align-center": e.align === "center",
+				"align-right": e.align === "right"
+			};
+			return html`
+            <div
+              .draggable=${this.columnReordering}
+              class=${classMap(s)}
+              @click=${() => this._handleHeaderClick(e.key)}
+              @dragstart=${(e) => this._handleDragStart(e, o)}
+              @dragover=${(e) => this._handleDragOver(e, o)}
+              @dragleave=${this._handleDragLeave}
+              @drop=${(e) => this._handleDrop(e, o)}
+              @dragend=${this._handleDragEnd}
+            >
+              <span class="header-text">${e.header}</span>
+              <div class="header-icons">
+                  ${when(this.enableFilter, () => html`
+                    <span class="filter-icon ${this._isFilterActive(e.key) ? "active" : ""}" @click=${(o) => this._toggleFilterMenu(o, e.key)}>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
+                        </svg>
+                    </span>
+                  `)}
+                  ${this._sortKey === e.key ? html`<span class="sort-indicator">${this._sortDirection === "asc" ? "▲" : "▼"}</span>` : ""}
+              </div>
+              ${this._renderFilterMenu(e.key, o)}
+              <div class="resize-handle" @mousedown=${(e) => this._handleResizeStart(e, o)} @click=${(e) => e.stopPropagation()}></div>
+            </div>
+          `;
+		})}
+        </div>
+      </div>
+    `;
+	}
+	_renderBody(e) {
+		return html`
+      <div class="grid-body">
+        ${repeat(this._paginatedData, (e) => e.id, (o) => html`
+            <div class="grid-row ${this.rowClass ? this.rowClass(o) : ""}" style=${styleMap(e)}>
+              ${when(this.enableColumnVisibility, () => html`<div class="grid-cell data-cell"></div>`)}
+              ${this._visibleColumns.map((e) => {
+			let s = {
+				"grid-cell": !0,
+				"data-cell": !0,
+				selected: this._selectedRowId === o.id && this._selectedColumnKey === e.key,
+				"align-center": e.align === "center",
+				"align-right": e.align === "right",
+				[`col-${e.key}`]: !0
+			};
+			return html`
+                  <div
+                    title="${String(o[e.key] ?? "")}"
+                    class=${classMap(s)}
+                    @click=${() => this._handleCellClick(o, e.key)}
+                  >
+                    ${this._renderCell(o, e)}
+                  </div>
+                `;
+		})}
+            </div>
+          `)}
+      </div>
+    `;
+	}
+	_renderPaginationControls() {
+		let e = this._sortedData.length, o = Math.ceil(e / this.itemsPerPage);
+		return o <= 1 ? "" : html`
+      <div class="pagination">
+        <div class="pagination-group">
+          <button @click=${() => this._currentPage = 1} ?disabled=${this._currentPage === 1}>&lt;&lt; First</button>
+          <button @click=${() => this._currentPage--} ?disabled=${this._currentPage === 1}>&lt; Previous</button>
+        </div>
+        <div class="pagination-info">
+          <span>Page ${this._currentPage} of ${o}</span>
+        </div>
+        <div class="pagination-group">
+          <button @click=${() => this._currentPage++} ?disabled=${this._currentPage === o}>Next &gt;</button>
+          <button @click=${() => this._currentPage = o} ?disabled=${this._currentPage === o}>Last &gt;&gt;</button>
+        </div>
+      </div>
+    `;
+	}
+	render() {
+		let e = { height: this.height }, o = { "grid-template-columns": this._gridColumnTemplate };
+		return html`
+      <div class="toolbar">
+        <div class="items-per-page">
+          <span>Rows per page:</span>
+          <select @change=${this._handleItemsPerPageChange} .value=${this.itemsPerPage.toString()}>
+            <option value="10">10</option>
+            <option value="20">20</option>
+            <option value="50">50</option>
+          </select>
+        </div>
+      </div>
+      <div class="grid-wrapper" style=${styleMap(e)}>
+        <div class="grid-container">
+          ${this._renderHeader(o)}
+          ${this._renderBody(o)}
+        </div>
+      </div>
+      ${this._renderPaginationControls()}
+    `;
+	}
+	static #e = this.styles = css`
+    :host {
+      display: block;
+      font-family: sans-serif;
+    }
+    /* Default styles for all elements inside the component */
+    * {
+      box-sizing: border-box;
+      color: #000; /* Default text color black */
+    }
+    input, select, button {
+      background-color: #fff; /* Default background white */
+      color: #000; /* Default text color black */
+      border: 1px solid #ccc;
+    }
+
+    .toolbar { 
+      margin-bottom: 8px; 
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+    .toolbar button { padding: 6px 12px; border-radius: 4px; background-color: #f8f8f8; cursor: pointer; }
+    .toolbar button:hover { background-color: #eee; }
+    
+    .items-per-page {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 0.9em;
+    }
+    .items-per-page select {
+      padding: 4px 8px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 1em;
+      color: #000;
+    }
+    .items-per-page select:hover {
+      border-color: #888;
+    }
+    
+    .grid-wrapper {
+      overflow: auto;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+    .grid-container {
+      display: inline-block;
+      min-width: 100%;
+      vertical-align: top;
+    }
+    .grid-header {
+      position: sticky;
+      top: 0;
+      z-index: 2;
+      background-color: #e8e8e8;
+    }
+    .grid-row {
+      display: grid;
+      border-bottom: 1px solid #ddd;
+    }
+    .grid-body .grid-row:last-of-type {
+      border-bottom: none;
+    }
+    .grid-cell {
+      padding: 12px 15px;
+      text-align: left;
+      color: #000;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      border-right: 1px solid #ddd; /* Add right border */
+    }
+    .grid-cell:last-child {
+      border-right: none; /* Remove right border for last cell */
+    }
+    .grid-cell.align-center { justify-content: center; text-align: center; }
+    .grid-cell.align-right { justify-content: flex-end; text-align: right; }
+
+    .header-cell {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-weight: bold;
+      cursor: pointer;
+      user-select: none;
+      position: relative;
+      overflow: visible;
+      border-bottom: 1px solid #ccc; /* Add bottom border to header */
+    }
+    .header-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex-grow: 1;
+    }
+    .header-icons {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+    .sort-indicator {
+      flex-shrink: 0;
+    }
+    .filter-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px;
+        height: 16px;
+        color: #888; /* Default grey icon */
+        padding: 2px;
+        border-radius: 2px;
+        cursor: pointer;
+    }
+    .filter-icon:hover {
+        color: #000; /* Black icon on hover */
+    }
+    .filter-icon.active {
+        color: #007bff; /* Blue icon when active */
+    }
+
+    .settings-cell {
+      justify-content: center;
+      position: relative;
+      overflow: visible;
+    }
+
+    .column-menu, .filter-menu {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      background-color: white;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      padding: 8px;
+      z-index: 100;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+      min-width: 150px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      max-height: 250px;
+      overflow-y: auto;
+      text-align: left;
+      font-weight: normal;
+    }
+    .filter-menu.right-aligned {
+        left: auto;
+        right: 0;
+    }
+    .column-menu label, .filter-menu label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      font-weight: normal;
+      white-space: nowrap;
+      padding: 2px 0;
+    }
+    .filter-search-container {
+        display: flex;
+        gap: 4px;
+        margin-bottom: 4px;
+    }
+    .filter-search {
+        width: 100%;
+        padding: 4px;
+        border-radius: 4px;
+        flex-grow: 1;
+    }
+    .filter-sort-btn {
+        padding: 4px 8px;
+        cursor: pointer;
+        font-size: 0.8em;
+    }
+
+    .data-cell { cursor: pointer; }
+    .data-cell.selected { background-color: #aedcff; }
+    .data-cell a { color: #007bff; text-decoration: none; }
+    .data-cell a:hover { text-decoration: underline; }
+    
+    .header-cell.reorderable { cursor: grab; }
+    .header-cell.drag-over { background-color: #cceeff; }
+    
+    .grid-body .grid-row:nth-of-type(even) { background-color: #f2f2f2; }
+    .grid-body .grid-row:hover { background-color: #e0e0e0; }
+    
+    .pagination { 
+      display: flex; 
+      justify-content: space-between; 
+      align-items: center; 
+      padding: 12px 0; 
+      font-size: 0.9em; 
+      color: #000;
+    }
+    .pagination-group { display: flex; gap: 8px; }
+    .pagination button { padding: 6px 12px; border-radius: 4px; background-color: #f8f8f8; cursor: pointer; }
+    .pagination button:disabled { cursor: not-allowed; opacity: 0.5; }
+
+    .resize-handle {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 5px;
+      height: 100%;
+      cursor: col-resize;
+      z-index: 1;
+    }
+    .resize-handle:hover {
+      background-color: #007bff;
+    }
+  `;
+};
+__decorate([property({ type: Array })], MyGrid.prototype, "columns", void 0), __decorate([property({ type: Array })], MyGrid.prototype, "data", void 0), __decorate([property({ type: Number })], MyGrid.prototype, "itemsPerPage", void 0), __decorate([property({ type: Boolean })], MyGrid.prototype, "columnReordering", void 0), __decorate([property({ type: String })], MyGrid.prototype, "height", void 0), __decorate([property({ type: Boolean })], MyGrid.prototype, "enableColumnVisibility", void 0), __decorate([property({ type: Boolean })], MyGrid.prototype, "enableFilter", void 0), __decorate([property()], MyGrid.prototype, "rowClass", void 0), __decorate([state()], MyGrid.prototype, "_sortKey", void 0), __decorate([state()], MyGrid.prototype, "_sortDirection", void 0), __decorate([state()], MyGrid.prototype, "_draggedColumnIndex", void 0), __decorate([state()], MyGrid.prototype, "_dragOverColumnIndex", void 0), __decorate([state()], MyGrid.prototype, "_selectedRowId", void 0), __decorate([state()], MyGrid.prototype, "_selectedColumnKey", void 0), __decorate([state()], MyGrid.prototype, "_filterValues", void 0), __decorate([state()], MyGrid.prototype, "_activeFilterColumn", void 0), __decorate([state()], MyGrid.prototype, "_filterSearchTerm", void 0), __decorate([state()], MyGrid.prototype, "_currentPage", void 0), __decorate([state()], MyGrid.prototype, "_hiddenColumns", void 0), __decorate([state()], MyGrid.prototype, "_showColumnMenu", void 0), __decorate([state()], MyGrid.prototype, "_filterMenuSortDirection", void 0), __decorate([state()], MyGrid.prototype, "_resizingColumnIndex", void 0), MyGrid = __decorate([customElement("my-grid")], MyGrid);
+export { MyGrid as t };