@guiexpert/preact-table 10.0.8 → 10.0.10

package/README.md

@@ -7,7 +7,7 @@ This is the preact component of the GuiExpert Table Project.
 
 This is the UI-agnostic table component for your next web app. 😊
 
-<img src="https://raw.githubusercontent.com/guiexperttable/ge-table/main/apps/table-website/src/assets/screens/heatmap.png" width="50%">
+<img src="https://raw.githubusercontent.com/guiexperttable/ge-table/main/apps/webpage-guiexpert/src/assets/screens/heatmap.png" width="50%">
 
 ### Features
 - Handle large datasets easily

package/index.cjs

@@ -1,4 +1,4 @@
-"use strict";var De=Object.defineProperty;var ke=(r,e,t)=>e in r?De(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t;var ee=(r,e,t)=>(ke(r,typeof e!="symbol"?e+"":e,t),t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("preact"),Oe=require("preact/jsx-runtime");class F{constructor(){this.alreadySet=!1}static getInstance(){return F.instance||(F.instance=new F),F.instance}setLicenseKey(e){if(e&&!this.alreadySet){const t=document.createElement("meta");t.content="license="+e,t.name="guiexperttable",document.getElementsByTagName("head")[0].appendChild(t),this.alreadySet=!0}}}function j(r){return r&&r.type==="TreeRow"}function X(r){return r&&r.type==="AreaModelTree"}class Y{constructor(e=-1,t=-1,o=-1,i=-1,s,l,n,a=0,d=0,c=0,h=""){this.rowIndex=e,this.rowTop=t,this.columnIndex=o,this.columnLeft=i,this.areaIdent=s,this.sideIdent=l,this.originalEvent=n,this.clickCount=a,this.draggingX=d,this.draggingY=c,this.action=h}clone(){return new Y(this.rowIndex,this.rowTop,this.columnIndex,this.columnLeft,this.areaIdent,this.sideIdent,this.originalEvent,this.clickCount,this.draggingX,this.draggingY,this.action)}}class O{constructor(e=">",t="",o=[]){this.content=e,this.style=t,this.classes=o}}class Ce{constructor(e=new O(">","transform: rotate(90deg) translate(66%, -66%); transform-origin: 0 0;",["gt-table-tree-arrow-expanded"]),t=new O(">","",["ge-table-tree-arrow-collapsed"]),o=new O(">","color:transparent;",["gt-table-tree-arrow-hidden"]),i=new O("↕","",["gt-table-tree-arrow-expanded-all"])){this.arrowExpanded=e,this.arrowCollapsed=t,this.arrowPlaceholder=o,this.arrowExpandCollapseAll=i}}class we{constructor(e=new O("↑","",["ge-header-sorted-asc"]),t=new O("↓","",["ge-header-sorted-desc"]),o=new O("↑","color:transparent;",[])){this.iconAsc=e,this.iconDesc=t,this.iconPlaceholder=o}}class Fe{constructor(e){this.domService=e}setStyle(e,t,o){return this.domService.setStyle(e,t,o),e}applyStyle(e,t){for(const o in t)this.domService.setStyle(e,o,t[o]);return e}applyDisplayNoneStyle(e){return this.domService.setStyle(e,"display","none"),e}applyDisplayBlockStyle(e){return this.domService.setStyle(e,"display","block"),e}applyStyleInPx(e,t){return Object.entries(t).forEach(([o,i])=>this.domService.setStyle(e,o,i+"px")),e}applyStylePosistionRelative(e){return this.domService.setStyle(e,"position","relative"),this.domService.setStyle(e,"overflow","clip"),e}applyStylePosistionAbsolute(e){return this.domService.setStyle(e,"position","absolute"),e}applyStyleFullSize(e){return this.domService.setStyle(e,"width","100%"),this.domService.setStyle(e,"height","100%"),e}applyStyleOverflowAuto(e="auto",t="auto",o){return this.domService.setStyle(o,"overflow-x",e),this.domService.setStyle(o,"overflow-y",t),o}applyStyleNoPadding(e){return this.domService.setStyle(e,"padding","0"),this.domService.setStyle(e,"margin","0"),this.domService.setStyle(e,"border","0"),e}appendRelativeChildDiv(e){const t=this.applyStylePosistionRelative(this.applyStyleFullSize(this.applyStyleNoPadding(this.domService.createElement("div"))));return this.domService.appendChild(e,t),this.applyStylePosistionAbsolute(e),{parent:e,child:t,cache:{}}}appendText(e,t){const o=this.domService.createText(t);return this.domService.appendChild(e,o),o}addClass(e,t){return e.includes(" ")?e.split(" ").forEach(o=>this.domService.addClass(t,o)):this.domService.addClass(t,e),t}removeClass(e,t){return e.includes(" ")?e.split(" ").forEach(o=>this.domService.removeClass(t,o)):this.domService.removeClass(t,e),t}addClasses(e,t){if(e)for(const o of e)this.domService.addClass(t,o);return t}setAttribute(e,t,o){return t&&o&&this.domService.setAttribute(e,t,o),e}createAreaDivWithClass(e,t,o,i){const s=this.domService.createElement("div");return this.addClass(e,s),this.domService.setAttribute(s,"data-area",o),this.domService.setAttribute(s,"data-side",i),this.domService.appendChild(t,s),s}createDivWithClass(e,t){const o=this.domService.createElement("div");return this.addClass(e,o),this.domService.appendChild(t,o),o}addRowDiv(e,t,o=-1,i,s,l=""){const n=t.index??-1,a=this.getDivOrCreateDiv(n,e);if(this.domService.addClass(a,"ge-table-row-div"),this.domService.addClass(a,`ge-table-row-div-${t.index}`),i==="body"&&s==="center"){const d=((t==null?void 0:t.index)??0)%2===0?"even":"odd";this.domService.addClass(a,`ge-table-row-${d}`)}if(this.domService.setStyle(a,"display","clip"),this.domService.setStyle(a,"position","absolute"),this.domService.setStyle(a,"left",`${t.left}px`),this.domService.setStyle(a,"top",`${t.top}px`),this.domService.setStyle(a,"width",`${t.width}px`),this.domService.setStyle(a,"height",`${t.height}px`),this.domService.setAttribute(a,"data-row-index",`${o}`),this.domService.setAttribute(a,"data-area",`${i}`),l){const d=this.domService.createText(l);this.domService.appendChild(a,d)}return this.domService.appendChild(e.child,a),a}addColumnDiv(e){const{parent:t,geo:o,rowIndex:i=-1,columnIndex:s=-1,areaIdent:l,sideIdent:n,text:a="",treeArrow:d,tableOptions:c,checkedType:h=void 0,sortState:g}=e,m=c==null?void 0:c.treeOptions,f=c==null?void 0:c.showCheckboxWihoutExtraColumn,b=this.domService.createElement("div");this.domService.addClass(b,"ge-table-col-div"),this.domService.addClass(b,`ge-table-col-div-${o.index}`),this.domService.setAttribute(b,"data-col-index",`${o.index}`),this.domService.setAttribute(b,"data-row-index",`${i}`),this.domService.setAttribute(b,"data-area",`${l}`);const u=((o==null?void 0:o.index)??0)%2===0?"even":"odd";if(l==="body"&&n==="center"&&this.domService.addClass(b,`ge-table-column-${u}`),this.domService.setStyle(b,"display","clip"),this.domService.setStyle(b,"position","absolute"),this.domService.setStyle(b,"left",`${o.left}px`),this.domService.setStyle(b,"top",`${o.top}px`),this.domService.setStyle(b,"width",`${o.width}px`),this.domService.setStyle(b,"height",`${o.height}px`),d&&d!=="none"&&(this.domService.addClass(b,"ge-table-col-tree"),this.addArrowDiv(b,d,m,i,s,l)),f&&s===0&&h&&this.addCheckboxToDiv(b,h,l,i),a){const p=d!=="none"&&s===0;this.addLabelDiv(b,a,p,i,s,l)}return g&&this.addSortedIcon(b,g,c==null?void 0:c.sortedOptions,s),this.domService.appendChild(t,b),b}addCheckboxToDiv(e,t,o,i){const s=this.domService.createElement("div"),l=t==="full"?"checked":"";return s.innerHTML=`
+"use strict";var De=Object.defineProperty;var ke=(r,e,t)=>e in r?De(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t;var ee=(r,e,t)=>(ke(r,typeof e!="symbol"?e+"":e,t),t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("preact"),Oe=require("preact/jsx-runtime");class F{constructor(){this.alreadySet=!1}static getInstance(){return F.instance||(F.instance=new F),F.instance}setLicenseKey(e){if(e&&!this.alreadySet){const t=document.createElement("meta");t.content="license="+e,t.name="guiexperttable",document.getElementsByTagName("head")[0].appendChild(t),this.alreadySet=!0}}}function j(r){return r&&r.type==="TreeRow"}function X(r){return r&&r.type==="AreaModelTree"}class Y{constructor(e=-1,t=-1,o=-1,i=-1,s,l,n,a=0,d=0,c=0,h=""){this.rowIndex=e,this.rowTop=t,this.columnIndex=o,this.columnLeft=i,this.areaIdent=s,this.sideIdent=l,this.originalEvent=n,this.clickCount=a,this.draggingX=d,this.draggingY=c,this.action=h}clone(){return new Y(this.rowIndex,this.rowTop,this.columnIndex,this.columnLeft,this.areaIdent,this.sideIdent,this.originalEvent,this.clickCount,this.draggingX,this.draggingY,this.action)}}class O{constructor(e=">",t="",o=[]){this.content=e,this.style=t,this.classes=o}}class Ce{constructor(e=new O(">","transform: rotate(90deg) translate(66%, -66%); transform-origin: 0 0;",["gt-table-tree-arrow-expanded"]),t=new O(">","",["ge-table-tree-arrow-collapsed"]),o=new O(">","color:transparent;",["gt-table-tree-arrow-hidden"]),i=new O("↕","",["gt-table-tree-arrow-expanded-all"])){this.arrowExpanded=e,this.arrowCollapsed=t,this.arrowPlaceholder=o,this.arrowExpandCollapseAll=i}}class we{constructor(e=new O("↑","",["ge-header-sorted-asc"]),t=new O("↓","",["ge-header-sorted-desc"]),o=new O("↑","color:transparent;",[])){this.iconAsc=e,this.iconDesc=t,this.iconPlaceholder=o}}class Fe{constructor(e){this.domService=e}setStyle(e,t,o){return this.domService.setStyle(e,t,o),e}applyStyle(e,t){for(const o in t)this.domService.setStyle(e,o,t[o]);return e}applyDisplayNoneStyle(e){return this.domService.setStyle(e,"display","none"),e}applyDisplayBlockStyle(e){return this.domService.setStyle(e,"display","block"),e}applyStyleInPx(e,t){return Object.entries(t).forEach(([o,i])=>this.domService.setStyle(e,o,i+"px")),e}applyStylePosistionRelative(e){return this.domService.setStyle(e,"position","relative"),this.domService.setStyle(e,"overflow","clip"),e}applyStylePosistionAbsolute(e){return this.domService.setStyle(e,"position","absolute"),e}applyStyleFullSize(e){return this.domService.setStyle(e,"width","100%"),this.domService.setStyle(e,"height","100%"),e}applyStyleOverflowAuto(e="auto",t="auto",o){return this.domService.setStyle(o,"overflow-x",e),this.domService.setStyle(o,"overflow-y",t),o}applyStyleNoPadding(e){return this.domService.setStyle(e,"padding","0"),this.domService.setStyle(e,"margin","0"),this.domService.setStyle(e,"border","0"),e}appendRelativeChildDiv(e){const t=this.applyStylePosistionRelative(this.applyStyleFullSize(this.applyStyleNoPadding(this.domService.createElement("div"))));return this.domService.appendChild(e,t),this.applyStylePosistionAbsolute(e),{parent:e,child:t,cache:{}}}appendText(e,t){const o=this.domService.createText(t);return this.domService.appendChild(e,o),o}addClass(e,t){return e.includes(" ")?e.split(" ").forEach(o=>this.domService.addClass(t,o)):this.domService.addClass(t,e),t}removeClass(e,t){return e.includes(" ")?e.split(" ").forEach(o=>this.domService.removeClass(t,o)):this.domService.removeClass(t,e),t}addClasses(e,t){if(e)for(const o of e)this.domService.addClass(t,o);return t}setAttribute(e,t,o){return t&&o&&this.domService.setAttribute(e,t,o),e}createAreaDivWithClass(e,t,o,i){const s=this.domService.createElement("div");return this.addClass(e,s),this.domService.setAttribute(s,"data-area",o),this.domService.setAttribute(s,"data-side",i),this.domService.appendChild(t,s),s}createDivWithClass(e,t){const o=this.domService.createElement("div");return this.addClass(e,o),this.domService.appendChild(t,o),o}addRowDiv(e,t,o=-1,i,s,l=""){const n=t.index??-1,a=this.getDivOrCreateDiv(n,e);if(this.domService.addClass(a,"ge-table-row-div"),this.domService.addClass(a,`ge-table-row-div-${t.index}`),i==="body"&&s==="center"){const d=((t==null?void 0:t.index)??0)%2===0?"even":"odd";this.domService.addClass(a,`ge-table-row-${d}`)}if(this.domService.setStyle(a,"display","clip"),this.domService.setStyle(a,"position","absolute"),this.domService.setStyle(a,"left",`${t.left}px`),this.domService.setStyle(a,"top",`${t.top}px`),this.domService.setStyle(a,"width",`${t.width}px`),this.domService.setStyle(a,"height",`${t.height}px`),this.domService.setAttribute(a,"data-row-index",`${o}`),this.domService.setAttribute(a,"data-area",`${i}`),l){const d=this.domService.createText(l);this.domService.appendChild(a,d)}return this.domService.appendChild(e.child,a),a}addColumnDiv(e){const{parent:t,geo:o,rowIndex:i=-1,columnIndex:s=-1,areaIdent:l,sideIdent:n,text:a="",treeArrow:d,tableOptions:c,checkedType:h=void 0,sortState:g}=e,m=c==null?void 0:c.treeOptions,f=c==null?void 0:c.showCheckboxWihoutExtraColumn,b=this.domService.createElement("div");this.domService.addClass(b,"ge-table-col-div"),f&&this.domService.addClass(b,"ge-with-checkbox"),this.domService.addClass(b,`ge-table-col-div-${o.index}`),this.domService.setAttribute(b,"data-col-index",`${o.index}`),this.domService.setAttribute(b,"data-row-index",`${i}`),this.domService.setAttribute(b,"data-area",`${l}`);const u=((o==null?void 0:o.index)??0)%2===0?"even":"odd";if(l==="body"&&n==="center"&&this.domService.addClass(b,`ge-table-column-${u}`),this.domService.setStyle(b,"display","clip"),this.domService.setStyle(b,"position","absolute"),this.domService.setStyle(b,"left",`${o.left}px`),this.domService.setStyle(b,"top",`${o.top}px`),this.domService.setStyle(b,"width",`${o.width}px`),this.domService.setStyle(b,"height",`${o.height}px`),d&&d!=="none"&&(this.domService.addClass(b,"ge-table-col-tree"),this.addArrowDiv(b,d,m,i,s,l)),f&&s===0&&h&&this.addCheckboxToDiv(b,h,l,i),a){const p=d!=="none"&&s===0;this.addLabelDiv(b,a,p,i,s,l)}return g&&this.addSortedIcon(b,g,c==null?void 0:c.sortedOptions,s),this.domService.appendChild(t,b),b}addCheckboxToDiv(e,t,o,i){const s=this.domService.createElement("div"),l=t==="full"?"checked":"";return s.innerHTML=`
             <input
                 type="checkbox"
                 data-area="${o}"

package/index.js

@@ -172,7 +172,7 @@ class Pe {
   }
   addColumnDiv(e) {
     const { parent: t, geo: o, rowIndex: i = -1, columnIndex: s = -1, areaIdent: l, sideIdent: n, text: a = "", treeArrow: d, tableOptions: c, checkedType: h = void 0, sortState: g } = e, m = c == null ? void 0 : c.treeOptions, f = c == null ? void 0 : c.showCheckboxWihoutExtraColumn, b = this.domService.createElement("div");
-    this.domService.addClass(b, "ge-table-col-div"), this.domService.addClass(b, `ge-table-col-div-${o.index}`), this.domService.setAttribute(b, "data-col-index", `${o.index}`), this.domService.setAttribute(b, "data-row-index", `${i}`), this.domService.setAttribute(b, "data-area", `${l}`);
+    this.domService.addClass(b, "ge-table-col-div"), f && this.domService.addClass(b, "ge-with-checkbox"), this.domService.addClass(b, `ge-table-col-div-${o.index}`), this.domService.setAttribute(b, "data-col-index", `${o.index}`), this.domService.setAttribute(b, "data-row-index", `${i}`), this.domService.setAttribute(b, "data-area", `${l}`);
     const p = ((o == null ? void 0 : o.index) ?? 0) % 2 === 0 ? "even" : "odd";
     if (l === "body" && n === "center" && this.domService.addClass(b, `ge-table-column-${p}`), this.domService.setStyle(b, "display", "clip"), this.domService.setStyle(b, "position", "absolute"), this.domService.setStyle(b, "left", `${o.left}px`), this.domService.setStyle(b, "top", `${o.top}px`), this.domService.setStyle(b, "width", `${o.width}px`), this.domService.setStyle(b, "height", `${o.height}px`), d && d !== "none" && (this.domService.addClass(b, "ge-table-col-tree"), this.addArrowDiv(b, d, m, i, s, l)), f && s === 0 && h && this.addCheckboxToDiv(b, h, l, i), a) {
       const u = d !== "none" && s === 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guiexpert/preact-table",
-  "version": "10.0.8",
+  "version": "10.0.10",
   "type": "module",
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -19,7 +19,7 @@
   "dependencies": {
     "tslib": "^2.3.0",
     "preact": "^10.19.4",
-    "@guiexpert/table": "^1.1.25"
+    "@guiexpert/table": "^1.1.27"
   },
   "devDependencies": {
     "react-scripts-ts": "^3.1.0",