kanto-ds 1.4.0 → 1.5.2

package/dist/components/data/kt-table/kt-table.js

@@ -1,37 +1,61 @@
-import { css as k, html as d, nothing as h } from "lit";
-import { state as $, property as n } from "lit/decorators.js";
-import { classMap as v } from "lit/directives/class-map.js";
-import { styleMap as f } from "lit/directives/style-map.js";
-import { K as m, d as S } from "../../../chunks/kt-element-E-tfJpGQ.js";
-import { e as g } from "../../../chunks/events-Bjl5Zmmq.js";
-import { s as u } from "../../../chunks/index-DSSLJirw.js";
+import { css as k, nothing as d, html as c } from "lit";
+import { property as l, state as f } from "lit/decorators.js";
+import { classMap as S } from "lit/directives/class-map.js";
+import { styleMap as w } from "lit/directives/style-map.js";
+import { K as v, d as R } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { e as g } from "../../../chunks/events-r51msXNf.js";
+import { r as M } from "../../../chunks/locale-C5xLkGx5.js";
+import { s as u } from "../../../chunks/index-STEEvEP7.js";
+import "../../core/kt-icon/kt-icon.js";
 import "../kt-pagination/kt-pagination.js";
-var w = Object.defineProperty, a = (o, t, e, s) => {
-  for (var i = void 0, c = o.length - 1, l; c >= 0; c--)
-    (l = o[c]) && (i = l(t, e, i) || i);
-  return i && w(t, e, i), i;
+const H = 50;
+function z({
+  rowCount: r,
+  rowHeight: t,
+  viewportHeight: e,
+  scrollTop: i,
+  overscan: s
+}) {
+  if (r === 0) return { start: 0, end: 0 };
+  if (t <= 0) return { start: 0, end: Math.min(r, H) };
+  const h = Math.ceil(e / t), a = Math.min(Math.floor(i / t), Math.max(0, r - h)), p = Math.ceil((i + e) / t);
+  return {
+    start: Math.max(0, a - s),
+    end: Math.min(r, p + s)
+  };
+}
+var D = Object.defineProperty, n = (r, t, e, i) => {
+  for (var s = void 0, h = r.length - 1, a; h >= 0; h--)
+    (a = r[h]) && (s = a(t, e, s) || s);
+  return s && D(t, e, s), s;
 };
-const D = new Intl.Collator("en", { numeric: !0, sensitivity: "base" });
-function x(o) {
-  if (typeof o == "string") return o;
-  if (typeof o == "number" || typeof o == "boolean" || typeof o == "bigint")
-    return String(o);
+const K = 8, x = /* @__PURE__ */ new Map();
+function C(r) {
+  let t = x.get(r);
+  return t || (t = new Intl.Collator(r, { numeric: !0, sensitivity: "base" }), x.set(r, t)), t;
+}
+function $(r) {
+  if (typeof r == "string") return r;
+  if (typeof r == "number" || typeof r == "boolean" || typeof r == "bigint")
+    return String(r);
   try {
-    return JSON.stringify(o) ?? "";
+    return JSON.stringify(r) ?? "";
   } catch {
     return "";
   }
 }
-function y(o) {
-  return o.id ?? o.uid ?? o;
+function y(r) {
+  return r.id ?? r.uid ?? r;
 }
-class r extends m {
+class o extends v {
   constructor() {
-    super(...arguments), this.page = 1, this.columns = [], this.data = [], this.selectable = !1, this.selectionMode = "multiple", this.selected = [], this.pageSize = 0, this.loading = !1, this.compact = !1, this.sortKey = null, this.sortDirection = null, this.emptyText = void 0, this.loadingText = void 0, this.label = "";
+    super(...arguments), this.page = 1, this.manual = !1, this.virtual = !1, this.scrollOffset = 0, this.viewportHeight = 0, this.headerHeight = 0, this.rowHeight = 0, this.totalRows = 0, this.columns = [], this.data = [], this.selectable = !1, this.selectionMode = "multiple", this.selected = [], this.pageSize = 0, this.loading = !1, this.compact = !1, this.sortKey = null, this.sortDirection = null, this.emptyText = void 0, this.loadingText = void 0, this.label = "", this.locale = "", this.onScroll = (t) => {
+      this.scrollOffset = t.currentTarget.scrollTop;
+    };
   }
   static {
     this.styles = [
-      m.styles,
+      v.styles,
       k`
       :host {
         display: block;
@@ -89,12 +113,17 @@ class r extends m {
       }
 
       .indicator {
+        display: inline-flex;
         color: var(--color-primary-text);
-        font-size: 10px;
       }
 
       tbody tr {
-        transition: background-color 120ms linear;
+        transition: background-color var(--duration-instant) linear;
+      }
+
+      table[aria-busy='true'] tbody {
+        opacity: 0.5;
+        transition: opacity var(--duration-fast) var(--easing-standard);
       }
 
       tbody tr:hover {
@@ -114,6 +143,34 @@ class r extends m {
       :host([compact]) td {
         padding: 8px 12px;
       }
+
+      /* === VIRTUAL ===
+         The table scrolls inside its own box, whose height the page sets,
+         and the header stays on top of the rows passing under it. */
+      :host([virtual]) {
+        display: flex;
+        flex-direction: column;
+      }
+      :host([virtual]) .scroller {
+        flex: 1;
+        min-height: 0;
+      }
+      :host([virtual]) thead th {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        background: var(--surface-card);
+      }
+
+      /* Stand-ins for the rows above and below the window: height only. */
+      tbody tr.spacer,
+      tbody tr.spacer:hover {
+        background: none;
+      }
+      tr.spacer td {
+        padding: 0;
+        border: none;
+      }
       :host([compact]) th {
         padding: 10px 12px;
       }
@@ -149,22 +206,45 @@ class r extends m {
     `
     ];
   }
-  /** The rows after sorting, before paging. */
+  /**
+   * The rows after sorting, before paging.
+   *
+   * Sorted once per change of `data`, `sortKey`, `sortDirection` or locale, not on
+   * every render: hovering a row or ticking a box re-renders the table, and
+   * re-sorting a few thousand rows each time is what made that lag. Assign a
+   * new array to `data` rather than changing it in place.
+   */
   get sortedRows() {
+    if (this.manual) return this.data;
+    const t = this.sortCache, e = M(this.locale);
+    if (t?.data === this.data && t.key === this.sortKey && t.direction === this.sortDirection && t.locale === e)
+      return t.rows;
+    const i = this.sort(C(e));
+    return this.sortCache = {
+      data: this.data,
+      key: this.sortKey,
+      direction: this.sortDirection,
+      locale: e,
+      rows: i
+    }, i;
+  }
+  sort(t) {
     if (!this.sortKey || !this.sortDirection) return this.data;
-    const t = this.sortKey, e = this.sortDirection === "asc" ? 1 : -1;
-    return [...this.data].sort((s, i) => {
-      const c = s[t], l = i[t], p = c == null, b = l == null;
-      return p && b ? 0 : p ? 1 : b ? -1 : typeof c == "number" && typeof l == "number" ? (c - l) * e : D.compare(x(c), x(l)) * e;
+    const e = this.sortKey, i = this.sortDirection === "asc" ? 1 : -1;
+    return [...this.data].sort((s, h) => {
+      const a = s[e], p = h[e], b = a == null, m = p == null;
+      return b && m ? 0 : b ? 1 : m ? -1 : typeof a == "number" && typeof p == "number" ? (a - p) * i : t.compare($(a), $(p)) * i;
     });
   }
   get totalPages() {
-    return this.pageSize <= 0 ? 1 : Math.max(1, Math.ceil(this.data.length / this.pageSize));
+    if (this.pageSize <= 0) return 1;
+    const t = this.manual ? this.totalRows || this.data.length : this.data.length;
+    return Math.max(1, Math.ceil(t / this.pageSize));
   }
   /** The rows actually on screen. */
   get visibleRows() {
     const t = this.sortedRows;
-    if (this.pageSize <= 0) return t;
+    if (this.pageSize <= 0 || this.manual) return t;
     const e = Math.min(this.page, this.totalPages);
     return t.slice((e - 1) * this.pageSize, e * this.pageSize);
   }
@@ -173,24 +253,50 @@ class r extends m {
    * press restoring the original order is what makes sorting undoable.
    */
   toggleSort(t) {
-    t.sortable && (this.sortKey !== t.key ? (this.sortKey = t.key, this.sortDirection = "asc") : this.sortDirection === "asc" ? this.sortDirection = "desc" : (this.sortKey = null, this.sortDirection = null), g(this, "kt-sort-change", { key: this.sortKey, direction: this.sortDirection }));
+    t.sortable && (this.sortKey !== t.key ? (this.sortKey = t.key, this.sortDirection = "asc") : this.sortDirection === "asc" ? this.sortDirection = "desc" : (this.sortKey = null, this.sortDirection = null), this.manual && (this.page = 1), g(this, "kt-sort-change", { key: this.sortKey, direction: this.sortDirection }));
   }
   isSelected(t) {
     return this.selected.includes(y(t));
   }
   toggleSelection(t) {
     const e = y(t);
-    this.selectionMode === "single" ? this.selected = this.isSelected(t) ? [] : [e] : this.selected = this.isSelected(t) ? this.selected.filter((s) => s !== e) : [...this.selected, e], g(this, "kt-selection-change", { selected: this.selected, rows: this.selectedRows });
+    this.selectionMode === "single" ? this.selected = this.isSelected(t) ? [] : [e] : this.selected = this.isSelected(t) ? this.selected.filter((i) => i !== e) : [...this.selected, e], g(this, "kt-selection-change", { selected: this.selected, rows: this.selectedRows });
   }
   /** Selects or clears every row on the current page. */
   toggleAll() {
-    const e = this.visibleRows.map(y), s = e.every((i) => this.selected.includes(i));
-    this.selected = s ? this.selected.filter((i) => !e.includes(i)) : [.../* @__PURE__ */ new Set([...this.selected, ...e])], g(this, "kt-selection-change", { selected: this.selected, rows: this.selectedRows });
+    const e = this.visibleRows.map(y), i = e.every((s) => this.selected.includes(s));
+    this.selected = i ? this.selected.filter((s) => !e.includes(s)) : [.../* @__PURE__ */ new Set([...this.selected, ...e])], g(this, "kt-selection-change", { selected: this.selected, rows: this.selectedRows });
   }
   /** The selected rows themselves, not just their identities. */
   get selectedRows() {
     return this.data.filter((t) => this.selected.includes(y(t)));
   }
+  /** Virtual rendering, unless a page size pages the rows instead. */
+  get isVirtual() {
+    return this.virtual && this.pageSize <= 0;
+  }
+  // Untyped: the measurements are private, so not among PropertyValues<this>.
+  updated(t) {
+    if (t.has("compact") && (this.rowHeight = 0), !this.isVirtual) {
+      this.observe(void 0);
+      return;
+    }
+    const e = this.shadowRoot?.querySelector(".scroller") ?? void 0;
+    this.observe(e);
+    const i = this.shadowRoot?.querySelector('tbody tr[part="row"]');
+    i && this.rowHeight === 0 && (this.rowHeight = i.getBoundingClientRect().height);
+    const s = this.shadowRoot?.querySelector("thead");
+    s && (this.headerHeight = s.getBoundingClientRect().height), e && (this.viewportHeight = e.clientHeight);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.observe(void 0);
+  }
+  /** Follows the scroller's height, which the page can change at any time. */
+  observe(t) {
+    t !== this.observed && (this.resizeObserver?.disconnect(), this.observed = t, !(!t || typeof ResizeObserver > "u") && (this.resizeObserver ??= new ResizeObserver(([e]) => {
+      e && (this.viewportHeight = e.target.clientHeight);
+    }), this.resizeObserver.observe(t)));
+  }
   onPageChange(t) {
     t.stopPropagation(), this.page = t.detail.page, g(this, "kt-page-change", { page: this.page });
   }
@@ -204,74 +310,99 @@ class r extends m {
     return this.sortKey !== t.key || !this.sortDirection ? "none" : this.sortDirection === "asc" ? "ascending" : "descending";
   }
   renderHeaderCell(t) {
-    const e = t.label ?? t.key, s = this.sortKey === t.key && this.sortDirection !== null;
-    return d`<th
+    const e = t.label ?? t.key, i = this.sortKey === t.key && this.sortDirection !== null;
+    return c`<th
       part="header-cell"
       scope="col"
-      style=${f(t.width ? { width: t.width } : {})}
+      style=${w(t.width ? { width: t.width } : {})}
       aria-sort=${this.sortStateFor(t)}
     >
-      ${t.sortable ? d`<button type="button" @click=${() => this.toggleSort(t)}>
+      ${t.sortable ? c`<button type="button" @click=${() => this.toggleSort(t)}>
               <span>${e}</span>
-              <span class="indicator" aria-hidden="true"
-                >${s ? this.sortDirection === "asc" ? "▲" : "▼" : ""}</span
-              >
-            </button>` : d`<span>${e}</span>`}
+              <span class="indicator" aria-hidden="true">
+                ${i ? c`<kt-icon
+                        name=${this.sortDirection === "asc" ? "arrow-up" : "arrow-down"}
+                        size="14"
+                      ></kt-icon>` : d}
+              </span>
+            </button>` : c`<span>${e}</span>`}
     </th>`;
   }
   renderBody() {
     const t = this.visibleRows, e = this.columns.length + (this.selectable ? 1 : 0);
-    return t.length === 0 ? d`<tr>
+    if (t.length === 0)
+      return c`<tr>
         <td colspan=${e}>
           <div class="placeholder">${this.emptyText ?? u().noData}</div>
         </td>
-      </tr>` : d`${t.map((s, i) => {
-      const c = this.isSelected(s);
-      return d`<tr
-        part="row"
-        class=${v({ selected: c })}
-        aria-selected=${this.selectable ? String(c) : h}
-        @click=${() => g(this, "kt-row-click", { row: s, index: i })}
-      >
-        ${this.selectable ? d`<td class="select-cell">
-                <input
-                  type=${this.selectionMode === "single" ? "radio" : "checkbox"}
-                  name=${this.selectionMode === "single" ? "kt-table-selection" : h}
-                  .checked=${c}
-                  aria-label=${u().selectRow}
-                  @click=${(l) => l.stopPropagation()}
-                  @change=${() => this.toggleSelection(s)}
-                />
-              </td>` : h}
-        ${this.columns.map((l) => {
-        const p = this.renderCell?.(s, l);
-        return d`<td part="cell" style=${f({ textAlign: l.align ?? "left" })}>
-            ${p === void 0 ? s[l.key] : p}
-          </td>`;
-      })}
       </tr>`;
-    })}`;
+    if (!this.isVirtual)
+      return c`${t.map((a, p) => this.renderRow(a, p))}`;
+    const { start: i, end: s } = z({
+      rowCount: t.length,
+      rowHeight: this.rowHeight,
+      viewportHeight: Math.max(0, this.viewportHeight - this.headerHeight),
+      scrollTop: Math.max(0, this.scrollOffset - this.headerHeight),
+      overscan: K
+    }), h = (a) => a > 0 && this.rowHeight > 0 ? c`<tr class="spacer" aria-hidden="true">
+            <td colspan=${e} style=${`height: ${a * this.rowHeight}px`}></td>
+          </tr>` : d;
+    return c`${h(i)}${t.slice(i, s).map((a, p) => this.renderRow(a, i + p))}${h(t.length - s)}`;
+  }
+  /** `index` counts from the first row of the data, not of the rows rendered. */
+  renderRow(t, e) {
+    const i = this.isSelected(t);
+    return c`<tr
+      part="row"
+      class=${S({ selected: i })}
+      aria-selected=${this.selectable ? String(i) : d}
+      aria-rowindex=${this.isVirtual ? e + 2 : d}
+      @click=${() => g(this, "kt-row-click", { row: t, index: e })}
+    >
+      ${this.selectable ? c`<td class="select-cell">
+              <input
+                type=${this.selectionMode === "single" ? "radio" : "checkbox"}
+                name=${this.selectionMode === "single" ? "kt-table-selection" : d}
+                .checked=${i}
+                aria-label=${u().selectRow}
+                @click=${(s) => s.stopPropagation()}
+                @change=${() => this.toggleSelection(t)}
+              />
+            </td>` : d}
+      ${this.columns.map((s) => {
+      const h = this.renderCell?.(t, s);
+      return c`<td part="cell" style=${w({ textAlign: s.align ?? "left" })}>
+          ${h === void 0 ? t[s.key] : h}
+        </td>`;
+    })}
+    </tr>`;
   }
   render() {
-    if (this.loading)
-      return d`<div class="placeholder" role="status" aria-live="polite">
+    const t = this.loading && this.manual && this.data.length > 0;
+    if (this.loading && !t)
+      return c`<div class="placeholder" role="status" aria-live="polite">
         ${this.loadingText ?? u().loading}
       </div>`;
-    const t = this.visibleRows, e = t.length > 0 && t.every((i) => this.isSelected(i)), s = t.some((i) => this.isSelected(i));
-    return d`<div class="scroller">
-        <table part="table" aria-label=${this.label || h}>
+    const e = this.visibleRows, i = e.length > 0 && e.every((a) => this.isSelected(a)), s = e.some((a) => this.isSelected(a)), h = this.isVirtual;
+    return c`<div class="scroller" @scroll=${h ? this.onScroll : d}>
+        <table
+          part="table"
+          aria-label=${this.label || d}
+          aria-busy=${t ? "true" : d}
+          aria-rowcount=${h ? e.length + 1 : d}
+        >
           <thead>
-            <tr>
-              ${this.selectable ? d`<th class="select-cell" scope="col">
-                      ${this.selectionMode === "multiple" ? d`<input
+            <tr aria-rowindex=${h ? 1 : d}>
+              ${this.selectable ? c`<th class="select-cell" scope="col">
+                      ${this.selectionMode === "multiple" ? c`<input
                               type="checkbox"
-                              .checked=${e}
-                              .indeterminate=${s && !e}
+                              .checked=${i}
+                              .indeterminate=${s && !i}
                               aria-label=${u().selectAll}
                               @change=${this.toggleAll}
-                            />` : h}
-                    </th>` : h}
-              ${this.columns.map((i) => this.renderHeaderCell(i))}
+                            />` : d}
+                    </th>` : d}
+              ${this.columns.map((a) => this.renderHeaderCell(a))}
             </tr>
           </thead>
           <tbody>
@@ -280,62 +411,86 @@ class r extends m {
         </table>
       </div>
 
-      ${this.pageSize > 0 ? d`<footer>
+      ${this.pageSize > 0 ? c`<footer>
               <kt-pagination
                 .page=${Math.min(this.page, this.totalPages)}
                 .totalPages=${this.totalPages}
                 @kt-page-change=${this.onPageChange}
               ></kt-pagination>
-            </footer>` : h}`;
+            </footer>` : d}`;
   }
 }
-a([
-  $()
-], r.prototype, "page");
-a([
-  n({ attribute: !1 })
-], r.prototype, "columns");
-a([
-  n({ attribute: !1 })
-], r.prototype, "data");
-a([
-  n({ type: Boolean, reflect: !0 })
-], r.prototype, "selectable");
-a([
-  n({ type: String, attribute: "selection-mode" })
-], r.prototype, "selectionMode");
-a([
-  n({ attribute: !1 })
-], r.prototype, "selected");
-a([
-  n({ type: Number, attribute: "page-size" })
-], r.prototype, "pageSize");
-a([
-  n({ type: Boolean, reflect: !0 })
-], r.prototype, "loading");
-a([
-  n({ type: Boolean, reflect: !0 })
-], r.prototype, "compact");
-a([
-  n({ type: String, attribute: "sort-key" })
-], r.prototype, "sortKey");
-a([
-  n({ type: String, attribute: "sort-direction" })
-], r.prototype, "sortDirection");
-a([
-  n({ attribute: !1 })
-], r.prototype, "renderCell");
-a([
-  n({ type: String, attribute: "empty-text" })
-], r.prototype, "emptyText");
-a([
-  n({ type: String, attribute: "loading-text" })
-], r.prototype, "loadingText");
-a([
-  n({ type: String })
-], r.prototype, "label");
-S("kt-table", r);
+n([
+  l({ type: Number })
+], o.prototype, "page");
+n([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "manual");
+n([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "virtual");
+n([
+  f()
+], o.prototype, "scrollOffset");
+n([
+  f()
+], o.prototype, "viewportHeight");
+n([
+  f()
+], o.prototype, "headerHeight");
+n([
+  f()
+], o.prototype, "rowHeight");
+n([
+  l({ type: Number, attribute: "total-rows" })
+], o.prototype, "totalRows");
+n([
+  l({ attribute: !1 })
+], o.prototype, "columns");
+n([
+  l({ attribute: !1 })
+], o.prototype, "data");
+n([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "selectable");
+n([
+  l({ type: String, attribute: "selection-mode" })
+], o.prototype, "selectionMode");
+n([
+  l({ attribute: !1 })
+], o.prototype, "selected");
+n([
+  l({ type: Number, attribute: "page-size" })
+], o.prototype, "pageSize");
+n([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "loading");
+n([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "compact");
+n([
+  l({ type: String, attribute: "sort-key" })
+], o.prototype, "sortKey");
+n([
+  l({ type: String, attribute: "sort-direction" })
+], o.prototype, "sortDirection");
+n([
+  l({ attribute: !1 })
+], o.prototype, "renderCell");
+n([
+  l({ type: String, attribute: "empty-text" })
+], o.prototype, "emptyText");
+n([
+  l({ type: String, attribute: "loading-text" })
+], o.prototype, "loadingText");
+n([
+  l({ type: String })
+], o.prototype, "label");
+n([
+  l({ type: String })
+], o.prototype, "locale");
+R("kt-table", o);
 export {
-  r as KtTable
+  o as KtTable
 };
 //# sourceMappingURL=kt-table.js.map