tabulator-tables 5.2.6 → 5.2.7

package/package.json

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

package/src/js/core/Tabulator.js

@@ -50,6 +50,7 @@ class Tabulator {
 		this.optionsList = new OptionsList(this, "table constructor");
 		
 		this.initialized = false;
+		this.destroyed = false;
 		
 		if(this.initializeElement(element)){
 			
@@ -279,6 +280,8 @@ class Tabulator {
 	destroy(){
 		var element = this.element;
 		
+		this.destroyed = true;
+		
 		TableRegistry.deregister(this); //deregister table from inter-device communication
 		
 		this.eventBus.dispatch("table-destroy");

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

@@ -23,7 +23,13 @@ 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);
+        this.destroyBinding = this.tableDestroyed;
+        this.destroyed = false;
+    }
+
+    tableDestroyed(){
+        this.destroyed = true;
+        this.hide(true);
     }
     
     _lookupContainer(){
@@ -107,6 +113,10 @@ export default class Popup extends CoreFeature{
     
     show(origin, position){
         var x, y, parentEl, parentOffset, containerOffset, coords;
+
+        if(this.destroyed || this.table.destroyed){
+            return this;
+        }
         
         if(origin instanceof HTMLElement){
             parentEl = origin;
@@ -143,6 +153,10 @@ export default class Popup extends CoreFeature{
         this.visible = true;
 
         this.subscribe("table-destroy", this.destroyBinding);
+
+        this.element.addEventListener("mousedown", (e) => {
+            e.stopPropagation();
+        })
         
         return this;
     }
@@ -194,8 +208,10 @@ export default class Popup extends CoreFeature{
                 this.subscribe("cell-editing", this.blurEvent);
                 document.body.addEventListener("click", this.blurEvent);
                 document.body.addEventListener("contextmenu", this.blurEvent);
+                document.body.addEventListener("mousedown", this.blurEvent);
                 window.addEventListener("resize", this.blurEvent);
                 document.body.addEventListener("keydown", this.escEvent);
+
             }, 100);
             
             this.blurCallback = callback;
@@ -216,6 +232,7 @@ export default class Popup extends CoreFeature{
                 document.body.removeEventListener("keydown", this.escEvent);
                 document.body.removeEventListener("click", this.blurEvent);
                 document.body.removeEventListener("contextmenu", this.blurEvent);
+                document.body.removeEventListener("mousedown", this.blurEvent);
                 window.removeEventListener("resize", this.blurEvent);
                 this.table.rowManager.element.removeEventListener("scroll", this.blurEvent);
                 this.unsubscribe("cell-editing", this.blurEvent);

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

@@ -29,6 +29,8 @@ export default class Edit{
         
         this.listIteration = 0;
         
+        this.lastAction="";
+        
         this.blurable = true;
         
         this.actions = {
@@ -159,7 +161,7 @@ export default class Edit{
     _initializeParams(params){
         var valueKeys = ["values", "valuesURL", "valuesLookup"],
         valueCheck;
-
+        
         params = Object.assign({}, params);
         
         params.verticalNavigation = params.verticalNavigation || "editor";
@@ -168,9 +170,9 @@ export default class Edit{
         params.filterDelay = typeof params.filterDelay === "undefined" ? 300 : params.filterDelay;
         
         params.emptyValue = Object.keys(params).includes("emptyValue") ? params.emptyValue : "";
-
+        
         valueCheck = Object.keys(params).filter(key => valueKeys.includes(key)).length;
-
+        
         if(!valueCheck){
             console.warn("list editor config error - either the values, valuesURL, or valuesLookup option must be set")
         }else if(valueCheck > 1){
@@ -370,10 +372,12 @@ export default class Edit{
     }
     
     _keyEnter(e){
-        if(this.focusedItem){
-            this._chooseItem(this.focusedItem);
+        if(this.params.autocomplete && this.lastAction === "typing"){
+            this._resolveValue(true);
         }else{
-            this._cancel();
+            if(this.focusedItem){
+                this._chooseItem(this.focusedItem);
+            }
         }
     }
     
@@ -402,6 +406,7 @@ export default class Edit{
     
     _keyAutoCompLetter(e){
         this._filter();
+        this.lastAction = "typing";
         this.typing = true;
     }
     
@@ -426,6 +431,8 @@ export default class Edit{
     }
     
     _focusItem(item){
+        this.lastAction = "focus";
+        
         if(this.focusedItem && this.focusedItem.element){
             this.focusedItem.element.classList.remove("focused");
         }
@@ -595,6 +602,12 @@ export default class Edit{
             
             this._parseListItem(value, data, 0);
         });
+
+        if(!this.currentItems.length && this.params.freetext){
+            this.input.value = this.initialValues;
+            this.typing = true;
+            this.lastAction = "typing";
+        }
         
         this.data = data;
         
@@ -939,6 +952,8 @@ export default class Edit{
         }else{
             this.currentItems = [item];
             item.selected = true;
+
+            console.log("choose")
             
             this.input.value = item.label;
             

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

@@ -166,29 +166,29 @@ $table-cell-padding-sm: 5px;
 
 	&.thead-dark{
 		.tabulator-header{
-			border-color: $table-border-color;
-			background-color: $table-bg;
+			border-color: $borderColor;
+			background-color: $backgroundColor;
 			color: $table-color;
 
 			.tabulator-col{
-				border-color: $table-border-color;
-				background-color: $table-bg;
+				border-color: $borderColor;
+				background-color: $backgroundColor;
 				color: $table-color;
 			}
 		}
 	}
 
 	&.table{
-		background-color: $table-bg;
+		background-color: $backgroundColor;
 
 		&:not(.thead-light) .tabulator-header{
-			border-color: $table-border-color;
-			background-color: $table-bg;
+			border-color: $borderColor;
+			background-color: $backgroundColor;
 			color: $table-color;
 
 			.tabulator-col{
-				border-color: $table-border-color;
-				background-color: $table-bg;
+				border-color: $borderColor;
+				background-color: $backgroundColor;
 				color: $table-color;
 			}
 		}
@@ -199,12 +199,12 @@ $table-cell-padding-sm: 5px;
 
 
 		.tabulator-row{
-			border-color: $table-border-color;
-			background-color: $table-bg;
+			border-color: $borderColor;
+			background-color: $backgroundColor;
 			color: $table-color;
 
 			&:hover{
-				background-color: $table-border-color;
+				background-color: $borderColor;
 
 				.tabulator-cell{
 					background-color: $table-hover-bg;
@@ -217,15 +217,15 @@ $table-cell-padding-sm: 5px;
 		}
 
 		.tabulator-footer{
-			border-color: $table-border-color !important;
+			border-color: $borderColor !important;
 
 			.tabulator-calcs-holder{
-				border-color: $table-border-color !important;
-				background:$table-bg !important;
+				border-color: $borderColor !important;
+				background:$backgroundColor !important;
 
 				.tabulator-row{
-					border-color: $table-border-color !important;
-					background-color: $table-bg !important;
+					border-color: $borderColor !important;
+					background-color: $backgroundColor !important;
 					color: $table-color !important;
 				}
 			}

package/src/scss/themes/bootstrap/variables5.scss

@@ -692,22 +692,22 @@ $table-cell-padding-x-sm:     .25rem !default;
 $table-cell-vertical-align:   top !default;
 
 $table-color:                 $body-color !default;
-$table-bg:                    transparent !default;
+$table-bg:                    #fff !default;
 $table-accent-bg:             transparent !default;
 
 $table-th-font-weight:        null !default;
 
 $table-striped-color:         $table-color !default;
 $table-striped-bg-factor:     .05 !default;
-$table-striped-bg:            rgba($black, $table-striped-bg-factor) !default;
+$table-striped-bg:            $gray-200 !default;
 
 $table-active-color:          $table-color !default;
 $table-active-bg-factor:      .1 !default;
-$table-active-bg:             rgba($black, $table-active-bg-factor) !default;
+$table-active-bg:             $gray-600 !default;
 
 $table-hover-color:           $table-color !default;
 $table-hover-bg-factor:       .075 !default;
-$table-hover-bg:              rgba($black, $table-hover-bg-factor) !default;
+$table-hover-bg:              $gray-400 !default;
 
 $table-border-factor:         .1 !default;
 $table-border-width:          $border-width !default;