tabulator-tables 5.4.3 → 5.5.0

package/src/js/modules/Edit/defaults/editors/tickCross.js

@@ -1,97 +1,95 @@
-//checkbox
-export default function(cell, onRendered, success, cancel, editorParams){
-	var value = cell.getValue(),
-	input = document.createElement("input"),
-	tristate = editorParams.tristate,
-	indetermValue = typeof editorParams.indeterminateValue === "undefined" ? null : editorParams.indeterminateValue,
-	indetermState = false,
-	trueValueSet = Object.keys(editorParams).includes("trueValue"),
-	falseValueSet = Object.keys(editorParams).includes("falseValue");
-
-	input.setAttribute("type", "checkbox");
-	input.style.marginTop = "5px";
-	input.style.boxSizing = "border-box";
-
-	if(editorParams.elementAttributes && typeof editorParams.elementAttributes == "object"){
-		for (let key in editorParams.elementAttributes){
-			if(key.charAt(0) == "+"){
-				key = key.slice(1);
-				input.setAttribute(key, input.getAttribute(key) + editorParams.elementAttributes["+" + key]);
-			}else{
-				input.setAttribute(key, editorParams.elementAttributes[key]);
-			}
-		}
-	}
-
-	input.value = value;
-
-	if(tristate && (typeof value === "undefined" || value === indetermValue || value === "")){
-		indetermState = true;
-		input.indeterminate = true;
-	}
-
-	if(this.table.browser != "firefox"){ //prevent blur issue on mac firefox
-		onRendered(function(){
-			input.focus({preventScroll: true});
-		});
-	}
-
-	input.checked = trueValueSet ? value === editorParams.trueValue : (value === true || value === "true" || value === "True" || value === 1);
-
-	onRendered(function(){
-		input.focus();
-	});
-
-	function setValue(blur){
-		var checkedValue = input.checked;
-
-		if(trueValueSet && checkedValue){
-			checkedValue = editorParams.trueValue;
-		}else if(falseValueSet && !checkedValue){
-			checkedValue = editorParams.falseValue;
-		}
-
-		if(tristate){
-			if(!blur){
-				if(input.checked && !indetermState){
-					input.checked = false;
-					input.indeterminate = true;
-					indetermState = true;
-					return indetermValue;
-				}else{
-					indetermState = false;
-					return checkedValue;
-				}
-			}else{
-				if(indetermState){
-					return indetermValue;
-				}else{
-					return checkedValue;
-				}
-			}
-		}else{
-			return checkedValue;
-		}
-	}
-
-	//submit new value on blur
-	input.addEventListener("change", function(e){
-		success(setValue());
-	});
-
-	input.addEventListener("blur", function(e){
-		success(setValue(true));
-	});
-
-	//submit new value on enter
-	input.addEventListener("keydown", function(e){
-		if(e.keyCode == 13){
-			success(setValue());
-		}
-		if(e.keyCode == 27){
-			cancel();
-		}
-	});
-
-	return input;
+//checkbox
+export default function(cell, onRendered, success, cancel, editorParams){
+	var value = cell.getValue(),
+	input = document.createElement("input"),
+	tristate = editorParams.tristate,
+	indetermValue = typeof editorParams.indeterminateValue === "undefined" ? null : editorParams.indeterminateValue,
+	indetermState = false,
+	trueValueSet = Object.keys(editorParams).includes("trueValue"),
+	falseValueSet = Object.keys(editorParams).includes("falseValue");
+	
+	input.setAttribute("type", "checkbox");
+	input.style.marginTop = "5px";
+	input.style.boxSizing = "border-box";
+	
+	if(editorParams.elementAttributes && typeof editorParams.elementAttributes == "object"){
+		for (let key in editorParams.elementAttributes){
+			if(key.charAt(0) == "+"){
+				key = key.slice(1);
+				input.setAttribute(key, input.getAttribute(key) + editorParams.elementAttributes["+" + key]);
+			}else{
+				input.setAttribute(key, editorParams.elementAttributes[key]);
+			}
+		}
+	}
+	
+	input.value = value;
+	
+	if(tristate && (typeof value === "undefined" || value === indetermValue || value === "")){
+		indetermState = true;
+		input.indeterminate = true;
+	}
+	
+	if(this.table.browser != "firefox" && this.table.browser != "safari"){ //prevent blur issue on mac firefox
+		onRendered(function(){
+			if(cell.getType() === "cell"){
+				input.focus({preventScroll: true});
+			}
+		});
+	}
+	
+	input.checked = trueValueSet ? value === editorParams.trueValue : (value === true || value === "true" || value === "True" || value === 1);
+	
+	function setValue(blur){
+		var checkedValue = input.checked;
+		
+		if(trueValueSet && checkedValue){
+			checkedValue = editorParams.trueValue;
+		}else if(falseValueSet && !checkedValue){
+			checkedValue = editorParams.falseValue;
+		}
+		
+		if(tristate){
+			if(!blur){
+				if(input.checked && !indetermState){
+					input.checked = false;
+					input.indeterminate = true;
+					indetermState = true;
+					return indetermValue;
+				}else{
+					indetermState = false;
+					return checkedValue;
+				}
+			}else{
+				if(indetermState){
+					return indetermValue;
+				}else{
+					return checkedValue;
+				}
+			}
+		}else{
+			return checkedValue;
+		}
+	}
+	
+	//submit new value on blur
+	input.addEventListener("change", function(e){
+		success(setValue());
+	});
+
+	input.addEventListener("blur", function(e){
+		success(setValue(true));
+	});
+	
+	//submit new value on enter
+	input.addEventListener("keydown", function(e){
+		if(e.keyCode == 13){
+			success(setValue());
+		}
+		if(e.keyCode == 27){
+			cancel();
+		}
+	});
+	
+	return input;
 }

package/src/js/modules/Edit/defaults/editors/time.js

@@ -1,98 +1,126 @@
-//input element
-export default function(cell, onRendered, success, cancel, editorParams){
-	var inputFormat = editorParams.format,
-	DT = inputFormat ? (window.DateTime || luxon.DateTime) : null, 
-	newDatetime;
-
-	//create and style input
-	var cellValue = cell.getValue(),
-	input = document.createElement("input");
-	
-	input.type = "time";
-	input.style.padding = "4px";
-	input.style.width = "100%";
-	input.style.boxSizing = "border-box";
-	
-	if(editorParams.elementAttributes && typeof editorParams.elementAttributes == "object"){
-		for (let key in editorParams.elementAttributes){
-			if(key.charAt(0) == "+"){
-				key = key.slice(1);
-				input.setAttribute(key, input.getAttribute(key) + editorParams.elementAttributes["+" + key]);
-			}else{
-				input.setAttribute(key, editorParams.elementAttributes[key]);
-			}
-		}
-	}
-	
-	cellValue = typeof cellValue !== "undefined" ? cellValue : "";
-	
-	if(inputFormat){
-		if(DT){
-			if(DT.isDateTime(cellValue)){
-				newDatetime = cellValue;
-			}else if(inputFormat === "iso"){
-				newDatetime = DT.fromISO(String(cellValue));
-			}else{
-				newDatetime = DT.fromFormat(String(cellValue), inputFormat);
-			}
-
-			cellValue = newDatetime.toFormat("hh:mm");
-
-		}else{
-			console.error("Editor Error - 'date' editor 'inputFormat' param is dependant on luxon.js");
-		}
-	}
-
-	input.value = cellValue;
-	
-	onRendered(function(){
-		input.focus({preventScroll: true});
-		input.style.height = "100%";
-		
-		if(editorParams.selectContents){
-			input.select();
-		}
-	});
-	
-	function onChange(e){
-		var value = input.value;
-
-		if(((cellValue === null || typeof cellValue === "undefined") && value !== "") || value !== cellValue){
-
-			if(value && inputFormat){
-				value = DT.fromFormat(String(value), "hh:mm").toFormat(inputFormat);
-			}
-
-			if(success(value)){
-				cellValue = input.value; //persist value if successfully validated incase editor is used as header filter
-			}
-		}else{
-			cancel();
-		}
-	}
-	
-	//submit new value on blur or change
-	input.addEventListener("change", onChange);
-	input.addEventListener("blur", onChange);
-	
-	//submit new value on enter
-	input.addEventListener("keydown", function(e){
-		switch(e.keyCode){
-			// case 9:
-			case 13:
-				onChange(e);
-				break;
-			
-			case 27:
-				cancel();
-				break;
-			
-			case 35:
-			case 36:
-				e.stopPropagation();
-				break;
-		}
-	});
-	
-	return input;
-}
+//input element
+export default function(cell, onRendered, success, cancel, editorParams){
+	var inputFormat = editorParams.format,
+	vertNav = editorParams.verticalNavigation || "editor",
+	DT = inputFormat ? (window.DateTime || luxon.DateTime) : null, 
+	newDatetime;
+	
+	//create and style input
+	var cellValue = cell.getValue(),
+	input = document.createElement("input");
+	
+	input.type = "time";
+	input.style.padding = "4px";
+	input.style.width = "100%";
+	input.style.boxSizing = "border-box";
+	
+	if(editorParams.elementAttributes && typeof editorParams.elementAttributes == "object"){
+		for (let key in editorParams.elementAttributes){
+			if(key.charAt(0) == "+"){
+				key = key.slice(1);
+				input.setAttribute(key, input.getAttribute(key) + editorParams.elementAttributes["+" + key]);
+			}else{
+				input.setAttribute(key, editorParams.elementAttributes[key]);
+			}
+		}
+	}
+	
+	cellValue = typeof cellValue !== "undefined" ? cellValue : "";
+	
+	if(inputFormat){
+		if(DT){
+			if(DT.isDateTime(cellValue)){
+				newDatetime = cellValue;
+			}else if(inputFormat === "iso"){
+				newDatetime = DT.fromISO(String(cellValue));
+			}else{
+				newDatetime = DT.fromFormat(String(cellValue), inputFormat);
+			}
+			
+			cellValue = newDatetime.toFormat("hh:mm");
+			
+		}else{
+			console.error("Editor Error - 'date' editor 'format' param is dependant on luxon.js");
+		}
+	}
+	
+	input.value = cellValue;
+	
+	onRendered(function(){
+		if(cell.getType() == "cell"){
+			input.focus({preventScroll: true});
+			input.style.height = "100%";
+			
+			if(editorParams.selectContents){
+				input.select();
+			}
+		}
+	});
+	
+	function onChange(){
+		var value = input.value,
+		luxTime;
+		
+		if(((cellValue === null || typeof cellValue === "undefined") && value !== "") || value !== cellValue){
+			
+			if(value && inputFormat){
+				luxTime = DT.fromFormat(String(value), "hh:mm");
+
+				switch(inputFormat){
+					case true:
+						value = luxTime;
+						break;
+
+					case "iso":
+						value = luxTime.toISO();
+						break;
+
+					default:
+						value = luxTime.toFormat(inputFormat);
+				}
+			}
+			
+			if(success(value)){
+				cellValue = input.value; //persist value if successfully validated incase editor is used as header filter
+			}
+		}else{
+			cancel();
+		}
+	}
+	
+	//submit new value on blur
+	input.addEventListener("blur", function(e) {
+		if (e.relatedTarget || e.rangeParent || e.explicitOriginalTarget !== input) {
+			onChange(); // only on a "true" blur; not when focusing browser's date/time picker
+		}
+	});
+	
+	//submit new value on enter
+	input.addEventListener("keydown", function(e){
+		switch(e.keyCode){
+			// case 9:
+			case 13:
+				onChange();
+				break;
+			
+			case 27:
+				cancel();
+				break;
+			
+			case 35:
+			case 36:
+				e.stopPropagation();
+				break;
+
+			case 38: //up arrow
+			case 40: //down arrow
+				if(vertNav == "editor"){
+					e.stopImmediatePropagation();
+					e.stopPropagation();
+				}
+				break;
+		}
+	});
+	
+	return input;
+}

package/src/js/modules/Edit/defaults/editors.js

@@ -1,29 +1,29 @@
-import input from './editors/input.js';
-import textarea from './editors/textarea.js';
-import number from './editors/number.js';
-import range from './editors/range.js';
-import date from './editors/date.js';
-import time from './editors/time.js';
-import datetime from './editors/datetime.js';
-import select from './editors/select.js';
-import list from './editors/list.js';
-import autocomplete from './editors/autocomplete.js';
-import star from './editors/star.js';
-import progress from './editors/progress.js';
-import tickCross from './editors/tickCross.js';
-
-export default {
-	input:input,
-	textarea:textarea,
-	number:number,
-	range:range,
-	date:date,
-	time:time,
-	datetime:datetime,
-	select:select,
-	list:list,
-	autocomplete:autocomplete,
-	star:star,
-	progress:progress,
-	tickCross:tickCross,
+import input from './editors/input.js';
+import textarea from './editors/textarea.js';
+import number from './editors/number.js';
+import range from './editors/range.js';
+import date from './editors/date.js';
+import time from './editors/time.js';
+import datetime from './editors/datetime.js';
+import select from './editors/select.js';
+import list from './editors/list.js';
+import autocomplete from './editors/autocomplete.js';
+import star from './editors/star.js';
+import progress from './editors/progress.js';
+import tickCross from './editors/tickCross.js';
+
+export default {
+	input:input,
+	textarea:textarea,
+	number:number,
+	range:range,
+	date:date,
+	time:time,
+	datetime:datetime,
+	select:select,
+	list:list,
+	autocomplete:autocomplete,
+	star:star,
+	progress:progress,
+	tickCross:tickCross,
 };

package/src/js/modules/Edit/inputMask.js

@@ -1,74 +1,74 @@
-export default function maskInput(el, options){
-	var mask = options.mask,
-	maskLetter = typeof options.maskLetterChar !== "undefined" ? options.maskLetterChar : "A",
-	maskNumber = typeof options.maskNumberChar !== "undefined" ? options.maskNumberChar : "9",
-	maskWildcard = typeof options.maskWildcardChar !== "undefined" ? options.maskWildcardChar : "*";
-
-	function fillSymbols(index){
-		var symbol = mask[index];
-		if(typeof symbol !== "undefined" && symbol !== maskWildcard && symbol !== maskLetter && symbol !== maskNumber){
-			el.value = el.value + "" + symbol;
-			fillSymbols(index+1);
-		}
-	}
-
-	el.addEventListener("keydown", (e) => {
-		var index = el.value.length,
-		char = e.key;
-
-		if(e.keyCode > 46 && !e.ctrlKey && !e.metaKey){
-			if(index >= mask.length){
-				e.preventDefault();
-				e.stopPropagation();
-				return false;
-			}else{
-				switch(mask[index]){
-					case maskLetter:
-						if(char.toUpperCase() == char.toLowerCase()){
-							e.preventDefault();
-							e.stopPropagation();
-							return false;
-						}
-						break;
-
-					case maskNumber:
-						if(isNaN(char)){
-							e.preventDefault();
-							e.stopPropagation();
-							return false;
-						}
-						break;
-
-					case maskWildcard:
-						break;
-
-					default:
-						if(char !== mask[index]){
-							e.preventDefault();
-							e.stopPropagation();
-							return false;
-						}
-				}
-			}
-		}
-
-		return;
-	});
-
-	el.addEventListener("keyup", (e) => {
-		if(e.keyCode > 46){
-			if(options.maskAutoFill){
-				fillSymbols(el.value.length);
-			}
-		}
-	});
-
-
-	if(!el.placeholder){
-		el.placeholder = mask;
-	}
-
-	if(options.maskAutoFill){
-		fillSymbols(el.value.length);
-	}
+export default function maskInput(el, options){
+	var mask = options.mask,
+	maskLetter = typeof options.maskLetterChar !== "undefined" ? options.maskLetterChar : "A",
+	maskNumber = typeof options.maskNumberChar !== "undefined" ? options.maskNumberChar : "9",
+	maskWildcard = typeof options.maskWildcardChar !== "undefined" ? options.maskWildcardChar : "*";
+
+	function fillSymbols(index){
+		var symbol = mask[index];
+		if(typeof symbol !== "undefined" && symbol !== maskWildcard && symbol !== maskLetter && symbol !== maskNumber){
+			el.value = el.value + "" + symbol;
+			fillSymbols(index+1);
+		}
+	}
+
+	el.addEventListener("keydown", (e) => {
+		var index = el.value.length,
+		char = e.key;
+
+		if(e.keyCode > 46 && !e.ctrlKey && !e.metaKey){
+			if(index >= mask.length){
+				e.preventDefault();
+				e.stopPropagation();
+				return false;
+			}else{
+				switch(mask[index]){
+					case maskLetter:
+						if(char.toUpperCase() == char.toLowerCase()){
+							e.preventDefault();
+							e.stopPropagation();
+							return false;
+						}
+						break;
+
+					case maskNumber:
+						if(isNaN(char)){
+							e.preventDefault();
+							e.stopPropagation();
+							return false;
+						}
+						break;
+
+					case maskWildcard:
+						break;
+
+					default:
+						if(char !== mask[index]){
+							e.preventDefault();
+							e.stopPropagation();
+							return false;
+						}
+				}
+			}
+		}
+
+		return;
+	});
+
+	el.addEventListener("keyup", (e) => {
+		if(e.keyCode > 46){
+			if(options.maskAutoFill){
+				fillSymbols(el.value.length);
+			}
+		}
+	});
+
+
+	if(!el.placeholder){
+		el.placeholder = mask;
+	}
+
+	if(options.maskAutoFill){
+		fillSymbols(el.value.length);
+	}
 }