sp-component 0.0.2 → 0.0.3

package/dist/components/table/sp-table.js

@@ -1,92 +1,247 @@
-import { unsafeCSS as c, LitElement as y } from "lit";
-import { property as s, state as h, customElement as d } from "lit/decorators.js";
-import u from "./sp-table.css.js";
-import { tableTemplate as f } from "./sp-table.template.js";
-var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, t = (o, r, i, a) => {
-  for (var p = a > 1 ? void 0 : a ? b(r, i) : r, l = o.length - 1, n; l >= 0; l--)
-    (n = o[l]) && (p = (a ? n(r, i, p) : n(p)) || p);
-  return a && p && m(r, i, p), p;
+import { unsafeCSS as u, LitElement as g } from "lit";
+import { property as l, state as p, customElement as f } from "lit/decorators.js";
+import y from "./sp-table.css.js";
+import { tableTemplate as m } from "./sp-table.template.js";
+var S = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (t, e, s, o) => {
+  for (var a = o > 1 ? void 0 : o ? b(e, s) : e, h = t.length - 1, n; h >= 0; h--)
+    (n = t[h]) && (a = (o ? n(e, s, a) : n(a)) || a);
+  return o && a && S(e, s, a), a;
 };
-let e = class extends y {
+let r = class extends g {
   constructor() {
-    super(...arguments), this.columns = [], this.data = [], this.loading = !1, this.bordered = !1, this.striped = !1, this.hoverable = !0, this.compact = !1, this.emptyText = "No data available", this.sortKey = "", this.sortDirection = "none", this.stickyHeader = !1, this.selectable = !1, this.caption = "", this.selectedRows = /* @__PURE__ */ new Set(), this._handleRowSelect = (o, r) => {
-      const i = new Set(this.selectedRows);
-      r ? i.add(o) : i.delete(o), this.selectedRows = i, this.dispatchEvent(
-        new CustomEvent("sp-selection-change", {
-          detail: { indices: Array.from(i) },
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }, this._handleSelectAll = (o) => {
-      const r = o ? new Set(this.data.map((i, a) => a)) : /* @__PURE__ */ new Set();
-      this.selectedRows = r, this.dispatchEvent(
-        new CustomEvent("sp-selection-change", {
-          detail: { indices: Array.from(r) },
-          bubbles: !0,
-          composed: !0
-        })
-      );
-    }, this._handleSort = (o) => {
-      o.sortable && (this.sortKey === o.key ? (this.sortDirection = this.sortDirection === "asc" ? "desc" : this.sortDirection === "desc" ? "none" : "asc", this.sortDirection === "none" && (this.sortKey = "")) : (this.sortKey = o.key, this.sortDirection = "asc"), this.dispatchEvent(
-        new CustomEvent("sp-sort", {
-          detail: { key: this.sortKey, direction: this.sortDirection },
-          bubbles: !0,
-          composed: !0
-        })
+    super(...arguments), this.columns = [], this.data = [], this.loading = !1, this.bordered = !1, this.striped = !1, this.hoverable = !0, this.compact = !1, this.emptyText = "No data available", this.sortKey = "", this.sortDirection = "none", this.stickyHeader = !1, this.selectable = !1, this.caption = "", this.reorderable = !1, this.searchable = !1, this.pageSize = 0, this.pageSizeOptions = [10, 25, 50, 100], this.actions = [], this.virtual = !1, this.rowHeight = 48, this.maxHeight = "400px", this.selectedRows = /* @__PURE__ */ new Set(), this._columnOrder = [], this._hiddenCols = /* @__PURE__ */ new Set(), this._filters = {}, this._globalSearch = "", this._page = 1, this._showColPicker = !1, this._dragOverIndex = -1, this._dragFromIndex = -1, this._openFilterCol = null, this._scrollTop = 0, this._containerH = 400, this._onVirtualScroll = (t) => {
+      this._scrollTop = t.target.scrollTop;
+    }, this._handlePageSizeChange = (t) => {
+      this.pageSize = t, this._page = 1, this.selectedRows = /* @__PURE__ */ new Set(), this._emit("sp-page-size-change", { pageSize: t });
+    }, this._handleRowSelect = (t, e) => {
+      const s = new Set(this.selectedRows);
+      e ? s.add(t) : s.delete(t), this.selectedRows = s, this._emit("sp-selection-change", { indices: Array.from(s) });
+    }, this._handleSelectAll = (t) => {
+      const e = t ? this._pagedData.map((s, o) => o) : [];
+      this.selectedRows = new Set(e), this._emit("sp-selection-change", { indices: e });
+    }, this._handleSort = (t) => {
+      t.sortable && (this.sortKey === t.key ? (this.sortDirection = this.sortDirection === "asc" ? "desc" : this.sortDirection === "desc" ? "none" : "asc", this.sortDirection === "none" && (this.sortKey = "")) : (this.sortKey = t.key, this.sortDirection = "asc"), this._page = 1, this._emit("sp-sort", { key: this.sortKey, direction: this.sortDirection }));
+    }, this._handleDragStart = (t, e) => {
+      this._dragFromIndex = e, t.dataTransfer && (t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData("text/plain", String(e)));
+    }, this._handleDragOver = (t, e) => {
+      t.preventDefault(), t.dataTransfer && (t.dataTransfer.dropEffect = "move"), this._dragOverIndex = e;
+    }, this._handleDragLeave = () => {
+      this._dragOverIndex = -1;
+    }, this._handleDrop = (t, e) => {
+      var d, _;
+      if (t.preventDefault(), this._dragOverIndex = -1, this._dragFromIndex === -1 || this._dragFromIndex === e) return;
+      const s = [...this._columnOrder], o = this._orderedColumns, a = (d = o[this._dragFromIndex]) == null ? void 0 : d.key, h = (_ = o[e]) == null ? void 0 : _.key;
+      if (!a || !h) return;
+      const n = s.indexOf(a), c = s.indexOf(h);
+      n === -1 || c === -1 || (s.splice(n, 1), s.splice(c, 0, a), this._columnOrder = s, this._dragFromIndex = -1, this._emit("sp-column-reorder", { order: s }));
+    }, this._handleDragEnd = () => {
+      this._dragFromIndex = -1, this._dragOverIndex = -1;
+    }, this._toggleFilterCol = (t) => {
+      this._openFilterCol = this._openFilterCol === t ? null : t;
+    }, this._handleFilter = (t, e) => {
+      this._filters = { ...this._filters, [t]: e }, this._page = 1, this.selectedRows = /* @__PURE__ */ new Set();
+    }, this._handleGlobalSearch = (t) => {
+      this._globalSearch = t, this._page = 1, this.selectedRows = /* @__PURE__ */ new Set();
+    }, this._clearFilters = () => {
+      this._filters = {}, this._globalSearch = "", this._page = 1, this.selectedRows = /* @__PURE__ */ new Set();
+    }, this._toggleColumn = (t) => {
+      const e = new Set(this._hiddenCols);
+      e.has(t) ? e.delete(t) : e.add(t), this._hiddenCols = e;
+    }, this._goToPage = (t) => {
+      this._page = Math.max(1, Math.min(t, this._totalPages)), this.selectedRows = /* @__PURE__ */ new Set();
+    }, this._handleAction = (t, e, s) => {
+      t.onClick(e, s), this._emit("sp-row-action", { action: t.label, row: e, index: s });
+    };
+  }
+  // ── Lifecycle ─────────────────────────────────────────────
+  firstUpdated() {
+    this.virtual && this._setupVirtualScroll();
+  }
+  updated(t) {
+    if (t.has("columns")) {
+      const e = this._columnOrder, s = this.columns.map((n) => n.key), o = e.filter((n) => s.includes(n)), a = s.filter((n) => !o.includes(n));
+      this._columnOrder = [...o, ...a];
+      const h = new Set(this._hiddenCols);
+      this.columns.forEach((n) => {
+        n.hidden && h.add(n.key);
+      }), this._hiddenCols = h, this._page = 1;
+    }
+    t.has("data") && (this._page = 1, this.selectedRows = /* @__PURE__ */ new Set()), t.has("virtual") && this.virtual && this._setupVirtualScroll();
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = this._resizeObs) == null || t.disconnect();
+  }
+  _setupVirtualScroll() {
+    const t = this.renderRoot.querySelector(".sp-table-wrapper");
+    t && (this._containerH = t.clientHeight || 400, this._resizeObs = new ResizeObserver((e) => {
+      var o;
+      const s = (o = e[0]) == null ? void 0 : o.contentRect.height;
+      s && s > 0 && (this._containerH = s);
+    }), this._resizeObs.observe(t));
+  }
+  // ── Derived getters ───────────────────────────────────────
+  get _orderedColumns() {
+    if (!this._columnOrder.length) return this.columns;
+    const t = new Map(this.columns.map((e) => [e.key, e]));
+    return this._columnOrder.map((e) => t.get(e)).filter(Boolean);
+  }
+  get _visibleColumns() {
+    return this._orderedColumns.filter((t) => !this._hiddenCols.has(t.key));
+  }
+  get _filteredData() {
+    let t = this.data;
+    const e = this._globalSearch.trim().toLowerCase();
+    e && (t = t.filter(
+      (s) => Object.values(s).some((o) => String(o ?? "").toLowerCase().includes(e))
+    ));
+    for (const [s, o] of Object.entries(this._filters)) {
+      const a = o.trim().toLowerCase();
+      a && (t = t.filter(
+        (h) => String(h[s] ?? "").toLowerCase().includes(a)
       ));
+    }
+    if (this.sortKey && this.sortDirection !== "none") {
+      const s = this.sortDirection === "asc" ? 1 : -1;
+      t = [...t].sort((o, a) => {
+        const h = String(o[this.sortKey] ?? ""), n = String(a[this.sortKey] ?? "");
+        return h.localeCompare(n, void 0, { numeric: !0, sensitivity: "base" }) * s;
+      });
+    }
+    return t;
+  }
+  get _pagedData() {
+    if (this.virtual) return this._filteredData;
+    if (!this.pageSize) return this._filteredData;
+    const t = (this._page - 1) * this.pageSize;
+    return this._filteredData.slice(t, t + this.pageSize);
+  }
+  get _totalPages() {
+    return this.pageSize ? Math.max(1, Math.ceil(this._filteredData.length / this.pageSize)) : 1;
+  }
+  get _virtualSlice() {
+    const t = this._filteredData, e = t.length, s = this.rowHeight, o = 3, a = Math.max(0, Math.floor(this._scrollTop / s) - o), h = Math.ceil((this._containerH || 400) / s) + o * 2, n = Math.min(e, a + h);
+    return {
+      rows: t.slice(a, n),
+      startIndex: a,
+      topPad: a * s,
+      bottomPad: Math.max(0, (e - n) * s)
     };
   }
+  get _hasActiveFilters() {
+    return !!this._globalSearch.trim() || Object.values(this._filters).some((t) => !!t.trim());
+  }
+  // ── Helpers ───────────────────────────────────────────────
+  _emit(t, e) {
+    this.dispatchEvent(new CustomEvent(t, { detail: e, bubbles: !0, composed: !0 }));
+  }
   render() {
-    return f.call(this);
+    return m.call(this);
   }
 };
-e.styles = c(u);
-t([
-  s({ type: Array })
-], e.prototype, "columns", 2);
-t([
-  s({ type: Array })
-], e.prototype, "data", 2);
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "loading", 2);
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "bordered", 2);
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "striped", 2);
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "hoverable", 2);
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "compact", 2);
-t([
-  s({ type: String })
-], e.prototype, "emptyText", 2);
-t([
-  s({ type: String })
-], e.prototype, "sortKey", 2);
-t([
-  s({ type: String })
-], e.prototype, "sortDirection", 2);
-t([
-  s({ type: Boolean, reflect: !0, attribute: "sticky-header" })
-], e.prototype, "stickyHeader", 2);
-t([
-  s({ type: Boolean, reflect: !0 })
-], e.prototype, "selectable", 2);
-t([
-  s({ type: String })
-], e.prototype, "caption", 2);
-t([
-  h()
-], e.prototype, "selectedRows", 2);
-e = t([
-  d("sp-table")
-], e);
+r.styles = u(y);
+i([
+  l({ type: Array })
+], r.prototype, "columns", 2);
+i([
+  l({ type: Array })
+], r.prototype, "data", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "loading", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "bordered", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "striped", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "hoverable", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "compact", 2);
+i([
+  l({ type: String })
+], r.prototype, "emptyText", 2);
+i([
+  l({ type: String })
+], r.prototype, "sortKey", 2);
+i([
+  l({ type: String })
+], r.prototype, "sortDirection", 2);
+i([
+  l({ type: Boolean, reflect: !0, attribute: "sticky-header" })
+], r.prototype, "stickyHeader", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "selectable", 2);
+i([
+  l({ type: String })
+], r.prototype, "caption", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "reorderable", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "searchable", 2);
+i([
+  l({ type: Number, attribute: "page-size" })
+], r.prototype, "pageSize", 2);
+i([
+  l({ type: Array, attribute: "page-size-options" })
+], r.prototype, "pageSizeOptions", 2);
+i([
+  l({ type: Array })
+], r.prototype, "actions", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "virtual", 2);
+i([
+  l({ type: Number, attribute: "row-height" })
+], r.prototype, "rowHeight", 2);
+i([
+  l({ type: String, attribute: "max-height" })
+], r.prototype, "maxHeight", 2);
+i([
+  p()
+], r.prototype, "selectedRows", 2);
+i([
+  p()
+], r.prototype, "_columnOrder", 2);
+i([
+  p()
+], r.prototype, "_hiddenCols", 2);
+i([
+  p()
+], r.prototype, "_filters", 2);
+i([
+  p()
+], r.prototype, "_globalSearch", 2);
+i([
+  p()
+], r.prototype, "_page", 2);
+i([
+  p()
+], r.prototype, "_showColPicker", 2);
+i([
+  p()
+], r.prototype, "_dragOverIndex", 2);
+i([
+  p()
+], r.prototype, "_dragFromIndex", 2);
+i([
+  p()
+], r.prototype, "_openFilterCol", 2);
+i([
+  p()
+], r.prototype, "_scrollTop", 2);
+i([
+  p()
+], r.prototype, "_containerH", 2);
+r = i([
+  f("sp-table")
+], r);
 export {
-  e as SpTableComponent
+  r as SpTableComponent
 };

package/dist/components/table/sp-table.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sp-table.template.d.ts","sourceRoot":"","sources":["../../../src/components/table/sp-table.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,wBAAgB,aAAa,CAAC,IAAI,EAAE,gBAAgB,GAAG,cAAc,CA4HpE"}
+{"version":3,"file":"sp-table.template.d.ts","sourceRoot":"","sources":["../../../src/components/table/sp-table.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,wBAAgB,aAAa,CAAC,IAAI,EAAE,gBAAgB,GAAG,cAAc,CA8apE"}