@guiexpert/preact-table 10.1.96 → 10.1.98

package/DetailComponentRendererWrapper.d.ts

@@ -0,0 +1,27 @@
+import { DetailRenderContextIf, DetailRendererIf, TableApi } from '@guiexpert/table';
+
+/**
+ * The props of a Preact component that renders a detail row (master/detail).
+ *
+ * @since 1.1.97
+ */
+export interface DetailComponentProps<T = any> {
+    row: T;
+    rowIndex: number;
+    tableApi: TableApi;
+    context: DetailRenderContextIf<T>;
+}
+/**
+ * Renders a Preact component as the content of a detail row (master/detail, `tableOptions.masterDetail`). Mounted
+ * once when the detail row becomes visible, kept while scrolling, unmounted when it is collapsed.
+ *
+ * @example
+ * masterDetail: { detailHeight: 180, detailRenderer: new DetailComponentRendererWrapper(OrderItems) }
+ *
+ * @since 1.1.97
+ */
+export declare class DetailComponentRendererWrapper<T = any> implements DetailRendererIf<T> {
+    private readonly Component;
+    constructor(Component: any);
+    render(container: HTMLDivElement, row: T, context: DetailRenderContextIf<T>): () => void;
+}

package/GuiexpertTable.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'preact';
-import { FocusModelIf, GeModelChangeEvent, GeBatchEditEvent, GeMouseEvent, GeRowDragEvent, GeScrollEvent, GeStateChangeEvent, SelectionModelIf, TableApi, TableModelIf, TableOptions } from '@guiexpert/table';
+import { FocusModelIf, GeModelChangeEvent, GeBatchEditEvent, GeDetailEvent, GeMouseEvent, GeRowDragEvent, GeScrollEvent, GeStateChangeEvent, SelectionModelIf, TableApi, TableModelIf, TableOptions } from '@guiexpert/table';
 
 export type GeMouseEventFn = (evt: GeMouseEvent) => void;
 export type GeCheckboxEventFn = (evt: any[]) => void;
@@ -11,6 +11,7 @@ export type GeScrollEventFn = (evt: GeScrollEvent) => void;
 export type GeStateChangeEventFn = (evt: GeStateChangeEvent) => void;
 export type GeRowDragEventFn = (evt: GeRowDragEvent) => void;
 export type GeBatchEditEventFn = (evt: GeBatchEditEvent) => void;
+export type GeDetailEventFn = (evt: GeDetailEvent) => void;
 export interface GuiexpertTableProps {
     tableModel: TableModelIf;
     tableOptions?: TableOptions;
@@ -38,6 +39,8 @@ export interface GuiexpertTableProps {
     rowDragEnd?: GeRowDragEventFn;
     /** Batch edit: values marked, set back, written or discarded (since 1.1.96). */
     batchEditChanged?: GeBatchEditEventFn;
+    /** Master/detail: a detail row was expanded or collapsed (since 1.1.97). */
+    detailExpandedChanged?: GeDetailEventFn;
     /**
      * `true` shows the loading overlay ("Loading…" with a CSS spinner) over the body, `false` hides it.
      * Changing it does **not** re-create the table. Texts: `tableOptions.overlayOptions`. @since 1.1.92

package/index.cjs

@@ -1 +1 @@
-"use strict";var b=Object.defineProperty;var u=(r,a,o)=>a in r?b(r,a,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[a]=o;var h=(r,a,o)=>u(r,typeof a!="symbol"?a+"":a,o);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("preact/jsx-runtime"),d=require("preact"),c=require("@guiexpert/table");class m extends d.Component{constructor(o){super(o);h(this,"ref",d.createRef());h(this,"tableScope");h(this,"shownByProp",!1)}componentDidMount(){const o=this.ref.current;o&&this.initTable(o,this.props)}componentDidUpdate(o){const s=this.ref.current;s&&(o.tableModel!==this.props.tableModel||o.tableOptions!==this.props.tableOptions)&&this.initTable(s,this.props),!!o.loading!=!!this.props.loading&&this.applyLoading(),this.props.licenseKey&&this.props.licenseKey!==o.licenseKey&&c.LicenseManager.getInstance().setLicenseKey(this.props.licenseKey)}componentWillUnmount(){this.destroyTable()}initTable(o,s){var p;this.destroyTable();const i=()=>this.props,g={onSelectionChanged:t=>{var e,n;return(n=(e=i()).selectionChanged)==null?void 0:n.call(e,t)},onFocusChanged:t=>{var e,n;return(n=(e=i()).focusChanged)==null?void 0:n.call(e,t)},onScroll:t=>{var e,n;return(n=(e=i()).scroll)==null?void 0:n.call(e,t)},onCheckboxChanged:t=>{var e,n;return(n=(e=i()).checkboxChanged)==null?void 0:n.call(e,t)},onContextmenu:t=>{var e,n;return(n=(e=i()).contextmenu)==null?void 0:n.call(e,t)},onModelChanged:t=>{var e,n;return(n=(e=i()).modelChanged)==null?void 0:n.call(e,t)},onMouseClicked:t=>{var e,n;return(n=(e=i()).mouseClicked)==null?void 0:n.call(e,t)},onMouseDragging:t=>{var e,n;return(n=(e=i()).mouseDragging)==null?void 0:n.call(e,t)},onMouseDraggingEnd:t=>{var e,n;return(n=(e=i()).mouseDraggingEnd)==null?void 0:n.call(e,t)},onMouseMoved:t=>{var e,n;return(n=(e=i()).mouseMoved)==null?void 0:n.call(e,t)},onStateChanged:t=>{var e,n;return(n=(e=i()).stateChanged)==null?void 0:n.call(e,t)},onRowDragStart:t=>{var e,n;return(n=(e=i()).rowDragStart)==null?void 0:n.call(e,t)},onRowDragMove:t=>{var e,n;return(n=(e=i()).rowDragMove)==null?void 0:n.call(e,t)},onRowDragEnd:t=>{var e,n;return(n=(e=i()).rowDragEnd)==null?void 0:n.call(e,t)},onBatchEditChanged:t=>{var e,n;return(n=(e=i()).batchEditChanged)==null?void 0:n.call(e,t)}},l=new c.TableScope(o,s.tableModel,new c.SimpleDomService,s.tableOptions??new c.TableOptions,g);this.tableScope=l,l.firstInit(),this.shownByProp=!1,this.applyLoading(),(p=s.tableReady)==null||p.call(s,l.getApi()),s.licenseKey&&c.LicenseManager.getInstance().setLicenseKey(s.licenseKey)}applyLoading(){var o,s;this.props.loading?((o=this.tableScope)==null||o.showLoadingOverlay(),this.shownByProp=!0):this.shownByProp&&((s=this.tableScope)==null||s.hideOverlay(),this.shownByProp=!1)}destroyTable(){var o;(o=this.tableScope)==null||o.destroy(),this.tableScope=void 0}render(){return y.jsx("div",{ref:this.ref,className:"container-div",style:{width:"100%",height:"100%",backgroundColor:"transparent",padding:"0",margin:"0"}})}}class C{constructor(a){this.Component=a}render(a,o,s,i,g,l,p){const t={cellDiv:a,rowIndex:o,columnIndex:s,areaIdent:i,areaModel:g,cellValue:l};return d.render(d.h(this.Component,t),a),()=>{d.render(null,a)}}}exports.ComponentRendererWrapper=C;exports.GuiexpertTable=m;
+"use strict";var u=Object.defineProperty;var b=(s,a,o)=>a in s?u(s,a,{enumerable:!0,configurable:!0,writable:!0,value:o}):s[a]=o;var h=(s,a,o)=>b(s,typeof a!="symbol"?a+"":a,o);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("preact/jsx-runtime"),l=require("preact"),c=require("@guiexpert/table");class m extends l.Component{constructor(o){super(o);h(this,"ref",l.createRef());h(this,"tableScope");h(this,"shownByProp",!1)}componentDidMount(){const o=this.ref.current;o&&this.initTable(o,this.props)}componentDidUpdate(o){const i=this.ref.current;i&&(o.tableModel!==this.props.tableModel||o.tableOptions!==this.props.tableOptions)&&this.initTable(i,this.props),!!o.loading!=!!this.props.loading&&this.applyLoading(),this.props.licenseKey&&this.props.licenseKey!==o.licenseKey&&c.LicenseManager.getInstance().setLicenseKey(this.props.licenseKey)}componentWillUnmount(){this.destroyTable()}initTable(o,i){var g;this.destroyTable();const r=()=>this.props,p={onSelectionChanged:t=>{var e,n;return(n=(e=r()).selectionChanged)==null?void 0:n.call(e,t)},onFocusChanged:t=>{var e,n;return(n=(e=r()).focusChanged)==null?void 0:n.call(e,t)},onScroll:t=>{var e,n;return(n=(e=r()).scroll)==null?void 0:n.call(e,t)},onCheckboxChanged:t=>{var e,n;return(n=(e=r()).checkboxChanged)==null?void 0:n.call(e,t)},onContextmenu:t=>{var e,n;return(n=(e=r()).contextmenu)==null?void 0:n.call(e,t)},onModelChanged:t=>{var e,n;return(n=(e=r()).modelChanged)==null?void 0:n.call(e,t)},onMouseClicked:t=>{var e,n;return(n=(e=r()).mouseClicked)==null?void 0:n.call(e,t)},onMouseDragging:t=>{var e,n;return(n=(e=r()).mouseDragging)==null?void 0:n.call(e,t)},onMouseDraggingEnd:t=>{var e,n;return(n=(e=r()).mouseDraggingEnd)==null?void 0:n.call(e,t)},onMouseMoved:t=>{var e,n;return(n=(e=r()).mouseMoved)==null?void 0:n.call(e,t)},onStateChanged:t=>{var e,n;return(n=(e=r()).stateChanged)==null?void 0:n.call(e,t)},onRowDragStart:t=>{var e,n;return(n=(e=r()).rowDragStart)==null?void 0:n.call(e,t)},onRowDragMove:t=>{var e,n;return(n=(e=r()).rowDragMove)==null?void 0:n.call(e,t)},onRowDragEnd:t=>{var e,n;return(n=(e=r()).rowDragEnd)==null?void 0:n.call(e,t)},onBatchEditChanged:t=>{var e,n;return(n=(e=r()).batchEditChanged)==null?void 0:n.call(e,t)},onDetailExpandedChanged:t=>{var e,n;return(n=(e=r()).detailExpandedChanged)==null?void 0:n.call(e,t)}},d=new c.TableScope(o,i.tableModel,new c.SimpleDomService,i.tableOptions??new c.TableOptions,p);this.tableScope=d,d.firstInit(),this.shownByProp=!1,this.applyLoading(),(g=i.tableReady)==null||g.call(i,d.getApi()),i.licenseKey&&c.LicenseManager.getInstance().setLicenseKey(i.licenseKey)}applyLoading(){var o,i;this.props.loading?((o=this.tableScope)==null||o.showLoadingOverlay(),this.shownByProp=!0):this.shownByProp&&((i=this.tableScope)==null||i.hideOverlay(),this.shownByProp=!1)}destroyTable(){var o;(o=this.tableScope)==null||o.destroy(),this.tableScope=void 0}render(){return C.jsx("div",{ref:this.ref,className:"container-div",style:{width:"100%",height:"100%",backgroundColor:"transparent",padding:"0",margin:"0"}})}}class y{constructor(a){this.Component=a}render(a,o,i,r,p,d,g){const t={cellDiv:a,rowIndex:o,columnIndex:i,areaIdent:r,areaModel:p,cellValue:d};return l.render(l.h(this.Component,t),a),()=>{l.render(null,a)}}}class f{constructor(a){this.Component=a}render(a,o,i){const r={row:o,rowIndex:i.rowIndex,tableApi:i.tableApi,context:i};return l.render(l.h(this.Component,r),a),()=>l.render(null,a)}}exports.ComponentRendererWrapper=y;exports.DetailComponentRendererWrapper=f;exports.GuiexpertTable=m;

package/index.d.ts

@@ -1,2 +1,3 @@
 export * from './GuiexpertTable.js';
 export * from './ComponentRendererWrapper.js';
+export * from './DetailComponentRendererWrapper.js';

package/index.js

@@ -1,24 +1,24 @@
-var m = Object.defineProperty;
-var b = (r, a, o) => a in r ? m(r, a, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[a] = o;
-var h = (r, a, o) => b(r, typeof a != "symbol" ? a + "" : a, o);
-import { jsx as y } from "preact/jsx-runtime";
-import { Component as u, createRef as C, render as g, h as f } from "preact";
-import { LicenseManager as p, TableScope as w, SimpleDomService as S, TableOptions as M } from "@guiexpert/table";
-class L extends u {
+var b = Object.defineProperty;
+var C = (r, s, o) => s in r ? b(r, s, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[s] = o;
+var d = (r, s, o) => C(r, typeof s != "symbol" ? s + "" : s, o);
+import { jsx as u } from "preact/jsx-runtime";
+import { Component as y, createRef as f, render as h, h as m } from "preact";
+import { LicenseManager as g, TableScope as w, SimpleDomService as S, TableOptions as M } from "@guiexpert/table";
+class K extends y {
   constructor(o) {
     super(o);
-    h(this, "ref", C());
-    h(this, "tableScope");
+    d(this, "ref", f());
+    d(this, "tableScope");
     /** the overlay was shown by the loading prop: loading={false} hides only that one */
-    h(this, "shownByProp", !1);
+    d(this, "shownByProp", !1);
   }
   componentDidMount() {
     const o = this.ref.current;
     o && this.initTable(o, this.props);
   }
   componentDidUpdate(o) {
-    const s = this.ref.current;
-    s && (o.tableModel !== this.props.tableModel || o.tableOptions !== this.props.tableOptions) && this.initTable(s, this.props), !!o.loading != !!this.props.loading && this.applyLoading(), this.props.licenseKey && this.props.licenseKey !== o.licenseKey && p.getInstance().setLicenseKey(this.props.licenseKey);
+    const a = this.ref.current;
+    a && (o.tableModel !== this.props.tableModel || o.tableOptions !== this.props.tableOptions) && this.initTable(a, this.props), !!o.loading != !!this.props.loading && this.applyLoading(), this.props.licenseKey && this.props.licenseKey !== o.licenseKey && g.getInstance().setLicenseKey(this.props.licenseKey);
   }
   componentWillUnmount() {
     this.destroyTable();
@@ -27,10 +27,10 @@ class L extends u {
    * Creates the table in `ele` (a table created before is destroyed first) and calls `tableReady`.
    * The event callbacks are always taken from the current props.
    */
-  initTable(o, s) {
-    var c;
+  initTable(o, a) {
+    var p;
     this.destroyTable();
-    const i = () => this.props, d = {
+    const i = () => this.props, c = {
       onSelectionChanged: (t) => {
         var e, n;
         return (n = (e = i()).selectionChanged) == null ? void 0 : n.call(e, t);
@@ -90,20 +90,24 @@ class L extends u {
       onBatchEditChanged: (t) => {
         var e, n;
         return (n = (e = i()).batchEditChanged) == null ? void 0 : n.call(e, t);
+      },
+      onDetailExpandedChanged: (t) => {
+        var e, n;
+        return (n = (e = i()).detailExpandedChanged) == null ? void 0 : n.call(e, t);
       }
     }, l = new w(
       o,
-      s.tableModel,
+      a.tableModel,
       new S(),
-      s.tableOptions ?? new M(),
-      d
+      a.tableOptions ?? new M(),
+      c
     );
-    this.tableScope = l, l.firstInit(), this.shownByProp = !1, this.applyLoading(), (c = s.tableReady) == null || c.call(s, l.getApi()), s.licenseKey && p.getInstance().setLicenseKey(s.licenseKey);
+    this.tableScope = l, l.firstInit(), this.shownByProp = !1, this.applyLoading(), (p = a.tableReady) == null || p.call(a, l.getApi()), a.licenseKey && g.getInstance().setLicenseKey(a.licenseKey);
   }
   /** Shows or hides the loading overlay according to the `loading` prop. */
   applyLoading() {
-    var o, s;
-    this.props.loading ? ((o = this.tableScope) == null || o.showLoadingOverlay(), this.shownByProp = !0) : this.shownByProp && ((s = this.tableScope) == null || s.hideOverlay(), this.shownByProp = !1);
+    var o, a;
+    this.props.loading ? ((o = this.tableScope) == null || o.showLoadingOverlay(), this.shownByProp = !0) : this.shownByProp && ((a = this.tableScope) == null || a.hideOverlay(), this.shownByProp = !1);
   }
   /** Releases the table (listeners, resize observer, cell renderers). */
   destroyTable() {
@@ -111,7 +115,7 @@ class L extends u {
     (o = this.tableScope) == null || o.destroy(), this.tableScope = void 0;
   }
   render() {
-    return /* @__PURE__ */ y(
+    return /* @__PURE__ */ u(
       "div",
       {
         ref: this.ref,
@@ -127,21 +131,21 @@ class L extends u {
     );
   }
 }
-class v {
-  constructor(a) {
-    this.Component = a;
+class L {
+  constructor(s) {
+    this.Component = s;
   }
-  render(a, o, s, i, d, l, c) {
+  render(s, o, a, i, c, l, p) {
     const t = {
-      cellDiv: a,
+      cellDiv: s,
       rowIndex: o,
-      columnIndex: s,
+      columnIndex: a,
       areaIdent: i,
-      areaModel: d,
+      areaModel: c,
       cellValue: l
     };
-    return g(f(this.Component, t), a), () => {
-      g(null, a);
+    return h(m(this.Component, t), s), () => {
+      h(null, s);
     };
   }
   // private mount(
@@ -164,7 +168,17 @@ class v {
   //   return cleanupFn;
   // }
 }
+class R {
+  constructor(s) {
+    this.Component = s;
+  }
+  render(s, o, a) {
+    const i = { row: o, rowIndex: a.rowIndex, tableApi: a.tableApi, context: a };
+    return h(m(this.Component, i), s), () => h(null, s);
+  }
+}
 export {
-  v as ComponentRendererWrapper,
-  L as GuiexpertTable
+  L as ComponentRendererWrapper,
+  R as DetailComponentRendererWrapper,
+  K as GuiexpertTable
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guiexpert/preact-table",
-  "version": "10.1.96",
+  "version": "10.1.98",
   "license": "MIT",
   "author": "Dr. Marc Kronberg <info@gui.expert> (https://gui.expert)",
   "repository": {
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "tslib": "^2.3.0",
-    "@guiexpert/table": "^1.1.96"
+    "@guiexpert/table": "^1.1.98"
   },
   "peerDependencies": {
     "preact": "^10.0.0"