tabulator-tables 5.2.4 → 5.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabulator-tables",
-  "version": "5.2.4",
+  "version": "5.2.5",
   "description": "Interactive table generation JavaScript library",
   "style": "dist/css/tabulator.css",
   "main": "dist/js/tabulator.js",

package/src/js/core/RowManager.js

@@ -51,7 +51,7 @@ export default class RowManager extends CoreFeature{
 		
 		el.classList.add("tabulator-tableholder");
 		el.setAttribute("tabindex", 0);
-		el.setAttribute("role", "rowgroup");
+		// el.setAttribute("role", "rowgroup");
 		
 		return el;
 	}

package/src/js/core/cell/Cell.js

@@ -118,7 +118,6 @@ export default class Cell extends CoreFeature{
 			}
 			break;
 			case "undefined":
-			case "null":
 			this.element.innerHTML = "";
 			break;
 			default:
@@ -294,4 +293,4 @@ export default class Cell extends CoreFeature{
 
 		return this.component;
 	}
-}
+}

package/src/js/core/column/Column.js

@@ -158,8 +158,6 @@ class Column extends CoreFeature{
 			}
 		}
 
-		this.contentElement = this._bindEvents();
-
 		this.contentElement = this._buildColumnHeaderContent();
 
 		this.element.appendChild(this.contentElement);
@@ -173,83 +171,6 @@ class Column extends CoreFeature{
 		this.dispatch("column-init", this);
 	}
 
-	_bindEvents(){
-		var def = this.definition,
-		dblTap,	tapHold, tap;
-
-		//setup header click event bindings
-		if(typeof(def.headerClick) == "function"){
-			this.element.addEventListener("click", (e) => {def.headerClick(e, this.getComponent());});
-		}
-
-		if(typeof(def.headerDblClick) == "function"){
-			this.element.addEventListener("dblclick", (e) => {def.headerDblClick(e, this.getComponent());});
-		}
-
-		if(typeof(def.headerContext) == "function"){
-			this.element.addEventListener("contextmenu", (e) => {def.headerContext(e, this.getComponent());});
-		}
-
-		//setup header tap event bindings
-		if(typeof(def.headerTap) == "function"){
-			tap = false;
-
-			this.element.addEventListener("touchstart", (e) => {
-				tap = true;
-			}, {passive: true});
-
-			this.element.addEventListener("touchend", (e) => {
-				if(tap){
-					def.headerTap(e, this.getComponent());
-				}
-
-				tap = false;
-			});
-		}
-
-		if(typeof(def.headerDblTap) == "function"){
-			dblTap = null;
-
-			this.element.addEventListener("touchend", (e) => {
-
-				if(dblTap){
-					clearTimeout(dblTap);
-					dblTap = null;
-
-					def.headerDblTap(e, this.getComponent());
-				}else{
-
-					dblTap = setTimeout(() => {
-						clearTimeout(dblTap);
-						dblTap = null;
-					}, 300);
-				}
-
-			});
-		}
-
-		if(typeof(def.headerTapHold) == "function"){
-			tapHold = null;
-
-			this.element.addEventListener("touchstart", (e) => {
-				clearTimeout(tapHold);
-
-				tapHold = setTimeout(function(){
-					clearTimeout(tapHold);
-					tapHold = null;
-					tap = false;
-					def.headerTapHold(e, this.getComponent());
-				}, 1000);
-
-			}, {passive: true});
-
-			this.element.addEventListener("touchend", (e) => {
-				clearTimeout(tapHold);
-				tapHold = null;
-			});
-		}
-	}
-
 	//build header element for header
 	_buildColumnHeader(){
 		var def = this.definition,
@@ -377,7 +298,6 @@ class Column extends CoreFeature{
 			}
 			break;
 			case "undefined":
-			case "null":
 			el.innerHTML = "";
 			break;
 			default:
@@ -999,4 +919,4 @@ class Column extends CoreFeature{
 
 Column.defaultOptionList = defaultOptions;
 
-export default Column;
+export default Column;

package/src/js/core/rendering/Renderer.js

@@ -186,6 +186,8 @@ export default class Renderer extends CoreFeature{
 						this.elementVertical.scrollTop = this.elementVertical.scrollTop - this.elementVertical.clientHeight + rowEl.offsetHeight;
 					}
 
+					break;
+
 					case "top":
 					this.elementVertical.scrollTop = rowEl.offsetTop;					
 					break;

package/src/js/core/tools/Popup.js

@@ -22,6 +22,8 @@ export default class Popup extends CoreFeature{
         
         this.blurEvent = this.hide.bind(this, false);
         this.escEvent = this._escapeCheck.bind(this);
+
+        this.destroyBinding = this.hide.bind(this, true);
     }
     
     _lookupContainer(){
@@ -139,6 +141,8 @@ export default class Popup extends CoreFeature{
         this._fitToScreen(x, y, parentEl, parentOffset, position);
         
         this.visible = true;
+
+        this.subscribe("table-destroy", this.destroyBinding);
         
         return this;
     }
@@ -234,6 +238,8 @@ export default class Popup extends CoreFeature{
             if(this.blurCallback && !silent){
                 this.blurCallback();
             }
+
+            this.unsubscribe("table-destroy", this.destroyBinding);
         }
         
         return this;

package/src/js/modules/Download/defaults/downloaders/csv.js

@@ -30,11 +30,10 @@ export default function(list, options, setFileContents){
 
 					switch(typeof col.value){
 						case "object":
-						col.value = JSON.stringify(col.value);
+						col.value = col.value !== null ? JSON.stringify(col.value) : "";
 						break;
 
 						case "undefined":
-						case "null":
 						col.value = "";
 						break;
 					}
@@ -59,4 +58,4 @@ export default function(list, options, setFileContents){
 	}
 
 	setFileContents(fileContents, "text/csv");
-};
+};

package/src/js/modules/Download/defaults/downloaders/pdf.js

@@ -57,11 +57,10 @@ export default function(list, options, setFileContents){
 			if(col){
 				switch(typeof col.value){
 					case "object":
-					col.value = JSON.stringify(col.value);
+					col.value = col.value !== null ? JSON.stringify(col.value) : "";
 					break;
 
 					case "undefined":
-					case "null":
 					col.value = "";
 					break;
 				}
@@ -111,4 +110,4 @@ export default function(list, options, setFileContents){
 	}
 
 	setFileContents(doc.output("arraybuffer"), "application/pdf");
-};
+};

package/src/js/modules/Edit/List.js

@@ -70,7 +70,7 @@ export default class Edit{
         this.initialValues = this.params.multiselect ? initialValue : [initialValue];
         
         if(this.isFilter){
-            this.input.value = this.initialValues.join(",");
+            this.input.value = this.initialValues ? this.initialValues.join(",") : "";
             this.headerFilterInitialListGen();            
         }
     }

package/src/js/modules/Export/Export.js

@@ -510,11 +510,10 @@ class Export extends Module{
 				}else{
 					switch(typeof value){
 						case "object":
-						value = JSON.stringify(value);
+						value = value !== null ? JSON.stringify(value) : "";
 						break;
 
 						case "undefined":
-						case "null":
 						value = "";
 						break;
 

package/src/js/modules/Interaction/Interaction.js

@@ -1,8 +1,8 @@
 import Module from '../../core/Module.js';
 import Helpers from '../../core/tools/Helpers.js';
 
-import Cell from '../../core/cell/Cell';
-import Column from '../../core/column/Column';
+import Cell from '../../core/cell/Cell.js';
+import Column from '../../core/column/Column.js';
 
 class Interaction extends Module{
 
@@ -311,4 +311,4 @@ class Interaction extends Module{
 
 Interaction.moduleName = "interaction";
 
-export default Interaction;
+export default Interaction;

package/src/js/modules/Page/Page.js

@@ -609,7 +609,6 @@ class Page extends Module{
 				}
 				break;
 				case "undefined":
-				case "null":
 				this.pageCounterElement.innerHTML = "";
 				break;
 				default:
@@ -895,4 +894,4 @@ Page.moduleName = "page";
 //load defaults
 Page.pageCounters = defaultPageCounters;
 
-export default Page;
+export default Page;

package/src/js/modules/ResizeColumns/ResizeColumns.js

@@ -156,7 +156,7 @@ class ResizeColumns extends Module{
 			
 			config.handleEl = handle;
 			
-			if(element.parentNode){
+			if(element.parentNode && column.visible){
 				element.after(handle);			
 			}
 		}

package/src/js/modules/Sort/Sort.js

@@ -378,7 +378,7 @@ class Sort extends Module{
 	//set the column header sort direction
 	setColumnHeader(column, dir){
 		column.modules.sort.dir = dir;
-		column.getElement().setAttribute("aria-sort", dir);
+		column.getElement().setAttribute("aria-sort", dir === "asc" ? "ascending" : "descending");
 	}
 
 	//sort each item in sort list

package/src/scss/themes/bootstrap/tabulator_bootstrap5.scss

@@ -317,6 +317,15 @@ $table-cell-padding-sm: 5px;
 				}
 			}
 		}
+
+		.tabulator-row{
+			padding-top: 0;
+			padding-bottom: 0;
+		}
+
+		.tabulator-col-resize-handle{
+			padding:0;
+		}
 	}
 
 
@@ -325,56 +334,56 @@ $table-cell-padding-sm: 5px;
 		.tabulator-table{
 			.tabulator-row{
 				&.table-primary{
-					background:theme-color-level("primary", -9) !important;
+					background:map-get($table-variants, "primary") !important;
 				}
 				&.table-secondary{
-					background:theme-color-level("secondary", -9) !important;
+					background:map-get($table-variants, "secondary") !important;
 				}
 				&.table-success{
-					background:theme-color-level("success", -9) !important;
+					background:map-get($table-variants, "success") !important;
 				}
 				&.table-info{
-					background:theme-color-level("info", -9) !important;
+					background:map-get($table-variants, "info") !important;
 				}
 				&.table-warning{
-					background:theme-color-level("warning", -9) !important;
+					background:map-get($table-variants, "warning") !important;
 				}
 				&.table-danger{
-					background:theme-color-level("danger", -9) !important;
+					background:map-get($table-variants, "danger") !important;
 				}
 				&.table-light{
-					background:theme-color-level("light", -9) !important;
+					background:map-get($table-variants, "light") !important;
 				}
 				&.table{
-					background:theme-color-level("dark", -9) !important;
+					background:map-get($table-variants, "dark") !important;
 				}
 				&.table-active{
 					background:$table-active-bg !important;
 				}
 
 				&.bg-primary{
-					background:theme-color-level("primary", 0) !important;
+					background:map-get($table-variants, "primary") !important;
 				}
 				&.bg-secondary{
-					background:theme-color-level("secondary", 0) !important;
+					background:map-get($table-variants, "secondary") !important;
 				}
 				&.bg-success{
-					background:theme-color-level("success", 0) !important;
+					background:map-get($table-variants, "success") !important;
 				}
 				&.bg-info{
-					background:theme-color-level("info", 0) !important;
+					background:map-get($table-variants, "info") !important;
 				}
 				&.bg-warning{
-					background:theme-color-level("warning", 0) !important;
+					background:map-get($table-variants, "warning") !important;
 				}
 				&.bg-danger{
-					background:theme-color-level("danger", 0) !important;
+					background:map-get($table-variants, "danger") !important;
 				}
 				&.bg-light{
-					background:theme-color-level("light", 0) !important;
+					background:map-get($table-variants, "light") !important;
 				}
 				&.bg-dark{
-					background:theme-color-level("dark", 0) !important;
+					background:map-get($table-variants, "dark") !important;
 				}
 				&.bg-active{
 					background:$table-active-bg !important;
@@ -382,56 +391,56 @@ $table-cell-padding-sm: 5px;
 
 				.tabulator-cell{
 					&.table-primary{
-						background:theme-color-level("primary", -9) !important;
+						background:map-get($table-variants, "primary") !important;
 					}
 					&.table-secondary{
-						background:theme-color-level("secondary", -9) !important;
+						background:map-get($table-variants, "secondary") !important;
 					}
 					&.table-success{
-						background:theme-color-level("success", -9) !important;
+						background:map-get($table-variants, "success") !important;
 					}
 					&.table-info{
-						background:theme-color-level("info", -9) !important;
+						background:map-get($table-variants, "info") !important;
 					}
 					&.table-warning{
-						background:theme-color-level("warning", -9) !important;
+						background:map-get($table-variants, "warning") !important;
 					}
 					&.table-danger{
-						background:theme-color-level("danger", -9) !important;
+						background:map-get($table-variants, "danger") !important;
 					}
 					&.table-light{
-						background:theme-color-level("light", -9) !important;
+						background:map-get($table-variants, "light") !important;
 					}
 					&.table{
-						background:theme-color-level("dark", -9) !important;
+						background:map-get($table-variants, "dark") !important;
 					}
 					&.table-active{
 						background:$table-active-bg !important;
 					}
 
 					&.bg-primary{
-						background:theme-color-level("primary", 0) !important;
+						background:map-get($table-variants, "primary") !important;
 					}
 					&.bg-secondary{
-						background:theme-color-level("secondary", 0) !important;
+						background:map-get($table-variants, "secondary") !important;
 					}
 					&.bg-success{
-						background:theme-color-level("success", 0) !important;
+						background:map-get($table-variants, "success") !important;
 					}
 					&.bg-info{
-						background:theme-color-level("info", 0) !important;
+						background:map-get($table-variants, "info") !important;
 					}
 					&.bg-warning{
-						background:theme-color-level("warning", 0) !important;
+						background:map-get($table-variants, "warning") !important;
 					}
 					&.bg-danger{
-						background:theme-color-level("danger", 0) !important;
+						background:map-get($table-variants, "danger") !important;
 					}
 					&.bg-light{
-						background:theme-color-level("light", 0) !important;
+						background:map-get($table-variants, "light") !important;
 					}
 					&.bg-dark{
-						background:theme-color-level("dark", 0) !important;
+						background:map-get($table-variants, "dark") !important;
 					}
 					&.bg-active{
 						background:$table-active-bg !important;

package/src/scss/themes/bulma/tabulator_bulma.scss

@@ -42,45 +42,45 @@ $footerBorderColor:$grey-lighter !default; //footer border color
 
 .tabulator{
 	border:none;
-
+	
 	.tabulator-header{
 		border:$table-cell-border;
 		border-width:$table-head-cell-border-width;
-
+		
 		.tabulator-col{
 			border-right:none;
-
+			
 			&.tabulator-moving{
 				border:none;
 			}
-
+			
 			.tabulator-col-content{
 				padding:$table-cell-padding;
-
+				
 				.tabulator-col-sorter{
 					right:0px;
 				}
 			}
-
+			
 			.tabulator-header-filter{
 				input{
 					border:$button-border-width solid $button-border-color;
 				}
 			}
 		}
-
+		
 		.tabulator-calcs-holder{
 			.tabulator-row{
 				.tabulator-cell{
 					border-bottom-width:0;
 				}
 			}
-
+			
 			border:$table-cell-border;
 			border-width:$table-foot-cell-border-width;
 		}
 	}
-
+	
 	.tabulator-tableholder{
 		.tabulator-table{
 			.tabulator-row{
@@ -89,12 +89,12 @@ $footerBorderColor:$grey-lighter !default; //footer border color
 						border:$table-cell-border;
 						border-width:$table-head-cell-border-width;
 					}
-
+					
 					&.tabulator-calcs-bottom{
 						border:$table-cell-border;
 						border-width:$table-foot-cell-border-width;
 					}
-
+					
 					.tabulator-cell{
 						border-bottom-width:0;
 					}
@@ -102,39 +102,39 @@ $footerBorderColor:$grey-lighter !default; //footer border color
 			}
 		}
 	}
-
+	
 	.tabulator-footer{
 		padding:$table-cell-padding;
 		border:$table-cell-border;
 		border-width:$table-foot-cell-border-width;
-
+		
 		.tabulator-calcs-holder{
 			margin:-5px -10px 10px -10px;
-
+			
 			border:$table-cell-border;
 			border-width:$table-head-cell-border-width;
-
+			
 			.tabulator-row{
 				.tabulator-cell{
 					border-bottom-width:0;
 				}
 			}
 		}
-
+		
 		.tabulator-page{
 			margin:0 0.1875em;
 			padding:$button-padding-vertical $button-padding-horizontal;
-
+			
 			border:$button-border-width solid $button-border-color;
-
+			
 			font-size: $textSize;
-
+			
 			&.active{
 				border-color:$button-active-border-color;
 				color:$button-active-color;
 				font-weight:bold;
 			}
-
+			
 			&:not(.disabled){
 				&:hover{
 					cursor:pointer;
@@ -145,9 +145,9 @@ $footerBorderColor:$grey-lighter !default; //footer border color
 			}
 		}
 	}
-
+	
 	//Bulma theming classes
-
+	
 	&.is-striped{
 		.tabulator-row{
 			&:nth-child(even){
@@ -155,16 +155,16 @@ $footerBorderColor:$grey-lighter !default; //footer border color
 			}
 		}
 	}
-
+	
 	&.is-bordered{
 		border:$table-cell-border;
-
+		
 		.tabulator-header{
 			.tabulator-col{
 				border-right:$table-cell-border;
 			}
 		}
-
+		
 		.tabulator-tableholder{
 			.tabulator-table{
 				.tabulator-row{
@@ -175,7 +175,7 @@ $footerBorderColor:$grey-lighter !default; //footer border color
 			}
 		}
 	}
-
+	
 	&.is-narrow{
 		.tabulator-header{
 			.tabulator-col{
@@ -184,7 +184,7 @@ $footerBorderColor:$grey-lighter !default; //footer border color
 				}
 			}
 		}
-
+		
 		.tabulator-tableholder{
 			.tabulator-table{
 				.tabulator-row{
@@ -199,25 +199,25 @@ $footerBorderColor:$grey-lighter !default; //footer border color
 
 .tabulator-row{
 	min-height:14px + ($headerMargin * 2);
-
+	
 	&.tabulator-row-even{
 		background-color: inherit;
 	}
-
+	
 	&.tabulator-selected{
 		background-color:$rowSelectedBackground !important;
 	}
-
+	
 	&.tabulator-selected:hover{
 		background-color:darken($rowSelectedBackground, 10%) !important;
 	}
-
+	
 	.tabulator-cell{
 		padding:$table-cell-padding;
 		border:$table-cell-border;
 		border-width:$table-cell-border-width;
 	}
-
+	
 	&.tabulator-group{
 		border-bottom:1px solid #999;
 		border-right:none;
@@ -236,3 +236,18 @@ $footerBorderColor:$grey-lighter !default; //footer border color
 	}
 }
 
+.tabulator-popup-container{
+	background: $backgroundColor,
+}
+
+.tabulator-edit-list{
+	.tabulator-edit-list-item{
+		&.active{
+			color:$backgroundColor;
+		}
+
+		&:hover{
+			color:$backgroundColor;
+		}
+	}
+}