tabulator-tables 6.5.0 → 6.5.1

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

@@ -0,0 +1,37 @@
+export default function(cell, onRendered, success, cancel, params){
+	var column = cell._getSelf().column,
+	lookup, editorFunc, editorParams;
+    
+	function defaultLookup(cell){
+		var value = cell.getValue(),
+		editor = "input";
+        
+		switch(typeof value){
+			case "number":
+				editor = "number";
+				break;
+            
+			case "boolean":
+				editor = "tickCross";
+				break;
+            
+			case "string":
+				if(value.includes("\n")){
+					editor = "textarea";
+				}
+				break;
+		}
+        
+		return editor;
+	}
+    
+	lookup = params.editorLookup ? params.editorLookup(cell) : defaultLookup(cell);
+
+	if(params.paramsLookup){
+		editorParams = typeof params.paramsLookup === "function" ? params.paramsLookup(lookup, cell) : params.paramsLookup[lookup];
+	}
+
+	editorFunc = this.table.modules.edit.lookupEditor(lookup, column);
+    
+	return  editorFunc.call(this, cell, onRendered, success, cancel, editorParams || {});
+}

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

@@ -0,0 +1,144 @@
+//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;
+	
+	//create and style input
+	var cellValue = cell.getValue(),
+	input = document.createElement("input");
+	
+	function convertDate(value){
+		var newDatetime;
+		
+		if(DT.isDateTime(value)){
+			newDatetime = value;
+		}else if(inputFormat === "x"){
+			newDatetime = DT.fromMillis(value);
+		}else if(inputFormat === "iso"){
+			newDatetime = DT.fromISO(String(value));
+		}else{
+			newDatetime = DT.fromFormat(String(value), inputFormat);
+		}
+		
+		return newDatetime.toFormat("yyyy-MM-dd");
+	}
+	
+	input.type = "date";
+	input.style.padding = "4px";
+	input.style.width = "100%";
+	input.style.boxSizing = "border-box";
+
+	if(editorParams.max){
+		input.setAttribute("max", inputFormat ? convertDate(editorParams.max) : editorParams.max);
+	}
+
+	if(editorParams.min){
+		input.setAttribute("min", inputFormat ? convertDate(editorParams.min) : editorParams.min);
+	}
+	
+	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){		
+			cellValue = convertDate(cellValue);			
+		}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,
+		luxDate;
+		
+		if(((cellValue === null || typeof cellValue === "undefined") && value !== "") || value !== cellValue){
+			
+			if(value && inputFormat){
+				luxDate = DT.fromFormat(String(value), "yyyy-MM-dd");
+
+				switch(inputFormat){
+					case true:
+						value = luxDate;
+						break;
+
+					case "x":
+						value = luxDate.toMillis();
+						break;
+						
+					case "iso":
+						value = luxDate.toISO();
+						break;
+
+					default:
+						value = luxDate.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.key){
+			// case "Tab":
+			case "Enter":
+				onChange();
+				break;
+			
+			case "Escape":
+				cancel();
+				break;
+			
+			case "End":
+			case "Home":
+				e.stopPropagation();
+				break;
+			
+			case "ArrowUp":
+			case "ArrowDown":
+				if(vertNav == "editor"){
+					e.stopImmediatePropagation();
+					e.stopPropagation();
+				}
+				break;
+		}
+	});
+	
+	return input;
+}

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

@@ -0,0 +1,131 @@
+//input element
+export default function(cell, onRendered, success, cancel, editorParams){
+	var inputFormat = editorParams.format,
+	vertNav = editorParams.verticalNavigation || "editor",
+	DT = inputFormat ? (this.table.dependencyRegistry.lookup(["luxon", "DateTime"], "DateTime")) : null, 
+	newDatetime;
+	
+	//create and style input
+	var cellValue = cell.getValue(),
+	input = document.createElement("input");
+	
+	input.type = "datetime-local";
+	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 === "x"){
+				newDatetime = DT.fromMillis(cellValue);	
+			}else if(inputFormat === "iso"){
+				newDatetime = DT.fromISO(String(cellValue));
+			}else{
+				newDatetime = DT.fromFormat(String(cellValue), inputFormat);
+			}
+			
+			cellValue = newDatetime.toFormat("yyyy-MM-dd")  + "T" + 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,
+		luxDateTime;
+		
+		if(((cellValue === null || typeof cellValue === "undefined") && value !== "") || value !== cellValue){
+
+			if(value && inputFormat){
+				luxDateTime = DT.fromISO(String(value));
+
+				switch(inputFormat){
+					case true:
+						value = luxDateTime;
+						break;
+
+					case "x":
+						value = luxDateTime.toMillis();
+						break;
+					
+					case "iso":
+						value = luxDateTime.toISO();
+						break;
+
+					default:
+						value = luxDateTime.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.key){
+			// case "Tab":
+			case "Enter":
+				onChange();
+				break;
+			
+			case "Escape":
+				cancel();
+				break;
+			
+			case "End":
+			case "Home":
+				e.stopPropagation();
+				break;
+
+			case "ArrowUp":
+			case "ArrowDown":
+				if(vertNav == "editor"){
+					e.stopImmediatePropagation();
+					e.stopPropagation();
+				}
+				break;
+		}
+	});
+	
+	return input;
+}

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

@@ -0,0 +1,77 @@
+import maskInput from '../../inputMask.js';
+
+//input element
+export default function(cell, onRendered, success, cancel, editorParams){
+	//create and style input
+	var cellValue = cell.getValue(),
+	input = document.createElement("input");
+
+	input.setAttribute("type", editorParams.search ? "search" : "text");
+
+	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]);
+			}
+		}
+	}
+
+	input.value = typeof cellValue !== "undefined" ? cellValue : "";
+
+	onRendered(function(){
+		if(cell.getType() === "cell"){
+			input.focus({preventScroll: true});
+			input.style.height = "100%";
+
+			if(editorParams.selectContents){
+				input.select();
+			}
+		}
+	});
+
+	function onChange(e){
+		if(((cellValue === null || typeof cellValue === "undefined") && input.value !== "") || input.value !== cellValue){
+			if(success(input.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.key){
+			// case "Tab":
+			case "Enter":
+				onChange(e);
+				break;
+
+			case "Escape":
+				cancel();
+				break;
+
+			case "End":
+			case "Home":
+				e.stopPropagation();
+				break;
+		}
+	});
+
+	if(editorParams.mask){
+		maskInput(input, editorParams);
+	}
+
+	return input;
+}

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

@@ -0,0 +1,7 @@
+import List from '../../List.js';
+
+export default function(cell, onRendered, success, cancel, editorParams){
+	var list = new List(this, cell, onRendered, success, cancel, editorParams);
+
+	return list.input;
+}

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

@@ -0,0 +1,110 @@
+import maskInput from '../../inputMask.js';
+
+//input element with type of number
+export default function(cell, onRendered, success, cancel, editorParams){
+	var cellValue = cell.getValue(),
+	vertNav = editorParams.verticalNavigation || "editor",
+	input = document.createElement("input");
+
+	input.setAttribute("type", "number");
+
+	if(typeof editorParams.max != "undefined"){
+		input.setAttribute("max", editorParams.max);
+	}
+
+	if(typeof editorParams.min != "undefined"){
+		input.setAttribute("min", editorParams.min);
+	}
+
+	if(typeof editorParams.step != "undefined"){
+		input.setAttribute("step", editorParams.step);
+	}
+
+	//create and style input
+	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]);
+			}
+		}
+	}
+
+	input.value = cellValue;
+
+	var blurFunc = function(e){
+		onChange();
+	};
+
+	onRendered(function () {
+		if(cell.getType() === "cell"){
+			//submit new value on blur
+			input.removeEventListener("blur", blurFunc);
+
+			input.focus({preventScroll: true});
+			input.style.height = "100%";
+
+			//submit new value on blur
+			input.addEventListener("blur", blurFunc);
+
+			if(editorParams.selectContents){
+				input.select();
+			}
+		}
+	});
+
+	function onChange(){
+		var value = input.value;
+
+		if(!isNaN(value) && value !==""){
+			value = Number(value);
+		}
+
+		if(value !== cellValue){
+			if(success(value)){
+				cellValue = value; //persist value if successfully validated incase editor is used as header filter
+			}
+		}else{
+			cancel();
+		}
+	}
+
+	//submit new value on enter
+	input.addEventListener("keydown", function(e){
+		switch(e.key){
+			case "Enter":
+			// case "Tab":
+				onChange();
+				break;
+
+			case "Escape":
+				cancel();
+				break;
+
+			case "ArrowUp":
+			case "ArrowDown":
+				if(vertNav == "editor"){
+					e.stopImmediatePropagation();
+					e.stopPropagation();
+				}
+				break;
+
+			case "End":
+			case "Home":
+				e.stopPropagation();
+				break;
+		}
+	});
+
+	if(editorParams.mask){
+		maskInput(input, editorParams);
+	}
+
+	return input;
+}

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

@@ -0,0 +1,127 @@
+//draggable progress bar
+export default function(cell, onRendered, success, cancel, editorParams){
+	var element = cell.getElement(),
+	max = typeof editorParams.max === "undefined" ? ((element.getElementsByTagName("div")[0] && element.getElementsByTagName("div")[0].getAttribute("max")) || 100) : editorParams.max,
+	min = typeof editorParams.min === "undefined" ? ((element.getElementsByTagName("div")[0] && element.getElementsByTagName("div")[0].getAttribute("min")) || 0) : editorParams.min,
+	percent = (max - min) / 100,
+	value = cell.getValue() || 0,
+	handle = document.createElement("div"),
+	bar = document.createElement("div"),
+	mouseDrag, mouseDragWidth;
+
+	//set new value
+	function updateValue(){
+		var style = window.getComputedStyle(element, null);
+
+		var calcVal = (percent * Math.round(bar.offsetWidth / ((element.clientWidth - parseInt(style.getPropertyValue("padding-left")) - parseInt(style.getPropertyValue("padding-right")))/100))) + min;
+		success(calcVal);
+		element.setAttribute("aria-valuenow", calcVal);
+		element.setAttribute("aria-label", value);
+	}
+
+	//style handle
+	handle.style.position = "absolute";
+	handle.style.right = "0";
+	handle.style.top = "0";
+	handle.style.bottom = "0";
+	handle.style.width = "5px";
+	handle.classList.add("tabulator-progress-handle");
+
+	//style bar
+	bar.style.display = "inline-block";
+	bar.style.position = "relative";
+	// bar.style.top = "8px";
+	// bar.style.bottom = "8px";
+	// bar.style.left = "4px";
+	// bar.style.marginRight = "4px";
+	bar.style.height = "100%";
+	bar.style.backgroundColor = "#488CE9";
+	bar.style.maxWidth = "100%";
+	bar.style.minWidth = "0%";
+
+	if(editorParams.elementAttributes && typeof editorParams.elementAttributes == "object"){
+		for (let key in editorParams.elementAttributes){
+			if(key.charAt(0) == "+"){
+				key = key.slice(1);
+				bar.setAttribute(key, bar.getAttribute(key) + editorParams.elementAttributes["+" + key]);
+			}else{
+				bar.setAttribute(key, editorParams.elementAttributes[key]);
+			}
+		}
+	}
+
+	//style cell
+	element.style.padding = "4px 4px";
+
+	//make sure value is in range
+	value = Math.min(parseFloat(value), max);
+	value = Math.max(parseFloat(value), min);
+
+	//workout percentage
+	value = Math.round((value - min) / percent);
+	// bar.style.right = value + "%";
+	bar.style.width = value + "%";
+
+	element.setAttribute("aria-valuemin", min);
+	element.setAttribute("aria-valuemax", max);
+
+	bar.appendChild(handle);
+
+	handle.addEventListener("mousedown", function(e){
+		mouseDrag = e.screenX;
+		mouseDragWidth = bar.offsetWidth;
+	});
+
+	handle.addEventListener("mouseover", function(){
+		handle.style.cursor = "ew-resize";
+	});
+
+	element.addEventListener("mousemove", function(e){
+		if(mouseDrag){
+			bar.style.width = (mouseDragWidth + e.screenX - mouseDrag) + "px";
+		}
+	});
+
+	element.addEventListener("mouseup", function(e){
+		if(mouseDrag){
+			e.stopPropagation();
+			e.stopImmediatePropagation();
+
+			mouseDrag = false;
+			mouseDragWidth = false;
+
+			updateValue();
+		}
+	});
+
+	//allow key based navigation
+	element.addEventListener("keydown", function(e){
+		switch(e.key){
+			case "ArrowRight":
+				e.preventDefault();
+				bar.style.width = (bar.clientWidth + element.clientWidth/100) + "px";
+				break;
+
+			case "ArrowLeft":
+				e.preventDefault();
+				bar.style.width = (bar.clientWidth - element.clientWidth/100) + "px";
+				break;
+
+			case "Tab":
+			case "Enter":
+				updateValue();
+				break;
+
+			case "Escape":
+				cancel();
+				break;
+
+		}
+	});
+
+	element.addEventListener("blur", function(){
+		cancel();
+	});
+
+	return bar;
+}