cx 22.1.0 → 22.1.3

package/dist/ui.js

@@ -4721,21 +4721,26 @@ var History = /*#__PURE__*/ (function() {
 		permanentNavigateConfirmation = permanent;
 	};
 
-	History.confirmAndNavigate = function confirmAndNavigate(state, title, url, replace) {
-		var _this2 = this;
-
-		if (!navigateConfirmationCallback) return this.navigate(state, title, url, replace);
-		var result = navigateConfirmationCallback(url);
+	History.confirm = function confirm(continueCallback, state) {
+		if (!navigateConfirmationCallback) return continueCallback();
+		var result = navigateConfirmationCallback(state);
 		Promise.resolve(result).then(function(value) {
 			if (value) {
 				if (!permanentNavigateConfirmation) navigateConfirmationCallback = null;
-
-				_this2.navigate(state, title, url, replace);
+				continueCallback();
 			}
 		});
 		return false;
 	};
 
+	History.confirmAndNavigate = function confirmAndNavigate(state, title, url, replace) {
+		var _this2 = this;
+
+		return this.confirm(function() {
+			return _this2.navigate(state, title, url, replace);
+		}, url);
+	};
+
 	History.navigate = function navigate(state, title, url, replace) {
 		var _this3 = this;
 

package/dist/widgets.css

@@ -4124,6 +4124,14 @@ th.cxe-calendar-display {
   width: 5px;
   cursor: col-resize; }
 
+.cxe-grid-col-resizer-prev-col {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 5px;
+  cursor: col-resize; }
+
 .cxe-grid-resize-overlay {
   position: absolute;
   display: block;

package/dist/widgets.js

@@ -5874,7 +5874,10 @@ var Tab = /*#__PURE__*/ (function(_HtmlElement) {
 	};
 
 	_proto.handleClick = function handleClick(e, instance) {
-		if (this.onClick) instance.invoke("onClick", e, instance);
+		if (this.onClick && instance.invoke("onClick", e, instance) === false) {
+			return;
+		}
+
 		e.preventDefault();
 		e.stopPropagation();
 		var data = instance.data;
@@ -17863,6 +17866,108 @@ var Grid = /*#__PURE__*/ (function(_Widget) {
 		);
 	};
 
+	_proto.renderResizer = function renderResizer(instance, hdinst, header, colIndex, forPreviousColumn) {
+		var widget = instance.widget;
+		var CSS = widget.CSS,
+			baseClass = widget.baseClass;
+		var hdwidget = hdinst.widget;
+		var resizerClassName = "col-resizer";
+		if (forPreviousColumn) resizerClassName += "-prev-col";
+		return /*#__PURE__*/ jsx("div", {
+			className: CSS.element(baseClass, resizerClassName),
+			onClick: function onClick(e) {
+				e.stopPropagation();
+			},
+			onMouseDown: function onMouseDown(e) {
+				if (e.buttons != 1) return;
+				var resizeOverlayEl = document.createElement("div");
+				var headerCell = e.target.parentElement;
+				if (forPreviousColumn) headerCell = headerCell.previousSibling;
+				var scrollAreaEl = headerCell.parentElement.parentElement.parentElement.parentElement;
+				var gridEl = scrollAreaEl.parentElement;
+				var initialWidth = headerCell.offsetWidth;
+				var initialPosition = getCursorPos(e);
+				resizeOverlayEl.className = CSS.element(baseClass, "resize-overlay");
+				resizeOverlayEl.style.width = initialWidth + "px";
+				resizeOverlayEl.style.left =
+					headerCell.getBoundingClientRect().left - gridEl.getBoundingClientRect().left + "px";
+				gridEl.appendChild(resizeOverlayEl);
+				captureMouse2(e, {
+					onMouseMove: function onMouseMove(e) {
+						var cursor = getCursorPos(e);
+						var width = Math.max(30, Math.round(initialWidth + cursor.clientX - initialPosition.clientX));
+						resizeOverlayEl.style.width = width + "px";
+					},
+					onMouseUp: function onMouseUp(e) {
+						var _objectSpread2$1;
+
+						if (!resizeOverlayEl) return; //dblclick
+
+						var width = resizeOverlayEl.offsetWidth;
+						hdinst.assignedWidth = width;
+						gridEl.removeChild(resizeOverlayEl);
+						resizeOverlayEl = null;
+						if (widget.onColumnResize)
+							instance.invoke(
+								"onColumnResize",
+								{
+									width: width,
+									column: hdwidget
+								},
+								hdinst
+							);
+						header.set("width", width);
+						instance.setState({
+							dimensionsVersion: instance.state.dimensionsVersion + 1,
+							colWidth: _objectSpread2(
+								_objectSpread2({}, instance.state.colWidth),
+								{},
+								((_objectSpread2$1 = {}), (_objectSpread2$1[hdwidget.uniqueColumnId] = width), _objectSpread2$1)
+							)
+						});
+					},
+					onDblClick: function onDblClick() {
+						var _objectSpread3;
+
+						var table = gridEl.querySelector("table");
+						var parentEl = table.parentElement;
+						var tableClone = table.cloneNode(true);
+						tableClone.childNodes.forEach(function(tbody) {
+							tbody.childNodes.forEach(function(tr) {
+								tr.childNodes.forEach(function(td, index) {
+									if (index == colIndex) {
+										td.style.maxWidth = null;
+										td.style.minWidth = null;
+										td.style.width = "auto";
+									} else {
+										td.style.display = "none";
+									}
+								});
+							});
+						});
+						tableClone.style.position = "absolute";
+						tableClone.style.visibility = "hidden";
+						tableClone.style.top = 0;
+						tableClone.style.left = 0;
+						tableClone.style.width = "auto";
+						parentEl.appendChild(tableClone);
+						var width = tableClone.offsetWidth;
+						parentEl.removeChild(tableClone);
+						header.set("width", width);
+						instance.setState({
+							dimensionsVersion: instance.state.dimensionsVersion + 1,
+							colWidth: _objectSpread2(
+								_objectSpread2({}, instance.state.colWidth),
+								{},
+								((_objectSpread3 = {}), (_objectSpread3[hdwidget.uniqueColumnId] = width), _objectSpread3)
+							)
+						});
+					}
+				});
+			}
+		});
+	};
+
 	_proto.renderHeader = function renderHeader(context, instance, key, fixed, fixedColumns) {
 		var _this3 = this;
 
@@ -17893,7 +17998,8 @@ var Grid = /*#__PURE__*/ (function(_Widget) {
 						content = void 0,
 						sortIcon = void 0,
 						tool = void 0;
-					var resizer = null;
+					var resizer = null,
+						prevColumnResizer = null;
 
 					if (header) {
 						empty[l] = false;
@@ -17956,100 +18062,13 @@ var Grid = /*#__PURE__*/ (function(_Widget) {
 						}
 
 						if ((hdwidget.resizable || header.data.resizable) && header.data.colSpan < 2) {
-							resizer = /*#__PURE__*/ jsx("div", {
-								className: CSS.element(baseClass, "col-resizer"),
-								onClick: function onClick(e) {
-									e.stopPropagation();
-								},
-								onMouseDown: function onMouseDown(e) {
-									if (e.buttons != 1) return;
-									var resizeOverlayEl = document.createElement("div");
-									var headerCell = e.target.parentElement;
-									var scrollAreaEl = headerCell.parentElement.parentElement.parentElement.parentElement;
-									var gridEl = scrollAreaEl.parentElement;
-									var initialWidth = headerCell.offsetWidth;
-									var initialPosition = getCursorPos(e);
-									resizeOverlayEl.className = CSS.element(baseClass, "resize-overlay");
-									resizeOverlayEl.style.width = initialWidth + "px";
-									resizeOverlayEl.style.left =
-										headerCell.getBoundingClientRect().left - gridEl.getBoundingClientRect().left + "px";
-									gridEl.appendChild(resizeOverlayEl);
-									captureMouse2(e, {
-										onMouseMove: function onMouseMove(e) {
-											var cursor = getCursorPos(e);
-											var width = Math.max(30, Math.round(initialWidth + cursor.clientX - initialPosition.clientX));
-											resizeOverlayEl.style.width = width + "px";
-										},
-										onMouseUp: function onMouseUp(e) {
-											var _objectSpread2$1;
-
-											if (!resizeOverlayEl) return; //dblclick
-
-											var width = resizeOverlayEl.offsetWidth;
-											hdinst.assignedWidth = width;
-											gridEl.removeChild(resizeOverlayEl);
-											resizeOverlayEl = null;
-											if (widget.onColumnResize)
-												instance.invoke(
-													"onColumnResize",
-													{
-														width: width,
-														column: hdwidget
-													},
-													hdinst
-												);
-											header.set("width", width);
-											instance.setState({
-												dimensionsVersion: instance.state.dimensionsVersion + 1,
-												colWidth: _objectSpread2(
-													_objectSpread2({}, instance.state.colWidth),
-													{},
-													((_objectSpread2$1 = {}),
-													(_objectSpread2$1[hdwidget.uniqueColumnId] = width),
-													_objectSpread2$1)
-												)
-											});
-										},
-										onDblClick: function onDblClick() {
-											var _objectSpread3;
-
-											var table = gridEl.querySelector("table");
-											var parentEl = table.parentElement;
-											var tableClone = table.cloneNode(true);
-											tableClone.childNodes.forEach(function(tbody) {
-												tbody.childNodes.forEach(function(tr) {
-													tr.childNodes.forEach(function(td, index) {
-														if (index == colIndex) {
-															td.style.maxWidth = null;
-															td.style.minWidth = null;
-															td.style.width = "auto";
-														} else {
-															td.style.display = "none";
-														}
-													});
-												});
-											});
-											tableClone.style.position = "absolute";
-											tableClone.style.visibility = "hidden";
-											tableClone.style.top = 0;
-											tableClone.style.left = 0;
-											tableClone.style.width = "auto";
-											parentEl.appendChild(tableClone);
-											var width = tableClone.offsetWidth;
-											parentEl.removeChild(tableClone);
-											header.set("width", width);
-											instance.setState({
-												dimensionsVersion: instance.state.dimensionsVersion + 1,
-												colWidth: _objectSpread2(
-													_objectSpread2({}, instance.state.colWidth),
-													{},
-													((_objectSpread3 = {}), (_objectSpread3[hdwidget.uniqueColumnId] = width), _objectSpread3)
-												)
-											});
-										}
-									});
-								}
-							});
+							resizer = _this3.renderResizer(instance, hdinst, header, colIndex);
+
+							if (colIndex > 0) {
+								var hdinstPrev = line.children[colIndex - 1];
+								var headerPrev = hdinstPrev.components["header" + (l + 1)];
+								prevColumnResizer = _this3.renderResizer(instance, hdinstPrev, headerPrev, colIndex, true);
+							}
 						}
 					}
 
@@ -18076,7 +18095,7 @@ var Grid = /*#__PURE__*/ (function(_Widget) {
 								},
 								onContextMenu: onContextMenu,
 								"data-unique-col-id": hdwidget.uniqueColumnId,
-								children: [getContent(content), sortIcon, tool, resizer]
+								children: [getContent(content), sortIcon, tool, prevColumnResizer, resizer]
 							},
 							colIndex
 						)
@@ -20116,16 +20135,33 @@ var GridComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 					}
 				}
 
-				if (futureState.cellEdit && !wasCellEditing)
-					_this11.cellEditUndoData = _this11.getRecordAt(futureState.cursor).data;
+				if (futureState.cellEdit && !wasCellEditing) {
+					var _record = _this11.getRecordAt(futureState.cursor);
+
+					var cellEditUndoData = _record.data;
+					if (
+						widget.onBeforeCellEdit &&
+						_this11.props.instance.invoke(
+							"onBeforeCellEdit",
+							{
+								column: visibleColumns[futureState.cursorCellIndex],
+								data: cellEditUndoData,
+								field: visibleColumns[futureState.cursorCellIndex].field
+							},
+							_record
+						) === false
+					)
+						return;
+					_this11.cellEditUndoData = cellEditUndoData;
+				}
 
 				_this11.setState(newState, function() {
 					if (_this11.state.focused && !_this11.state.cellEdit && wasCellEditing) FocusManager.focus(_this11.dom.el);
 
 					if (scrollIntoView) {
-						var _record = _this11.getRecordAt(index);
+						var _record2 = _this11.getRecordAt(index);
 
-						var item = _record && _this11.dom.table.querySelector('tbody[data-record-key="' + _record.key + '"]');
+						var item = _record2 && _this11.dom.table.querySelector('tbody[data-record-key="' + _record2.key + '"]');
 
 						var hscroll = false;
 
@@ -20136,7 +20172,7 @@ var GridComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 									item =
 										item.firstChild.children[_this11.state.cursorCellIndex - _this11.props.instance.fixedColumnCount];
 								} else {
-									var fixedItem = _this11.dom.fixedTable.querySelector('tbody[data-record-key="' + _record.key + '"]');
+									var fixedItem = _this11.dom.fixedTable.querySelector('tbody[data-record-key="' + _record2.key + '"]');
 
 									var cell = fixedItem && fixedItem.firstChild.children[_this11.state.cursorCellIndex];
 									if (cell) scrollElementIntoView(cell, false, true, 10);
@@ -20347,10 +20383,10 @@ var GridComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 
 			case KeyCode.down:
 				for (var _cursor = this.state.cursor + 1; ; _cursor++) {
-					var _record2 = this.getRecordAt(_cursor);
+					var _record3 = this.getRecordAt(_cursor);
 
-					if (!_record2) break;
-					if (_record2.type != "data") continue;
+					if (!_record3) break;
+					if (_record3.type != "data") continue;
 					this.moveCursor(_cursor, {
 						focused: true,
 						scrollIntoView: true,
@@ -20366,10 +20402,10 @@ var GridComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 
 			case KeyCode.up:
 				for (var _cursor2 = this.state.cursor - 1; _cursor2 >= 0; _cursor2--) {
-					var _record3 = this.getRecordAt(_cursor2);
+					var _record4 = this.getRecordAt(_cursor2);
 
-					if (!_record3) break;
-					if (_record3.type != "data") continue;
+					if (!_record4) break;
+					if (_record4.type != "data") continue;
 					this.moveCursor(_cursor2, {
 						focused: true,
 						scrollIntoView: true,

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "22.1.0",
+   "version": "22.1.3",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

package/src/charts/PieLabel.d.ts

@@ -1,10 +1,26 @@
 import * as Cx from "../core";
 import { BoundedObjectProps } from "../svg/BoundedObject";
 
-
 interface PieLabelProps extends BoundedObjectProps {
+   /** Distance in pixels, for which the labels will be separated from the pie chart. Default value is 100px. */
+   distance: Cx.NumberProp;
+
+   /**
+    * Index of the color in the default color palette.
+    */
+   lineColorIndex?: Cx.NumberProp;
+
+   /** A color used to paint the guideline. */
+   lineStroke?: Cx.StringProp;
 
-    /** Distance in pixels, for which the labels will be separated from the pie chart. Default value is 100px. */
-    distance: Cx.NumberProp
+   /** CSS class applied to the line element. */
+   lineClass?: Cx.StringProp;
+
+   /** CSS style applied to the line element. */
+   lineStyle?: Cx.StringProp;
+
+   /** Base CSS class to be applied to the element. Defaults to `pielabel`. */
+   baseClass?: string;
 }
-export class PieLabel extends Cx.Widget<PieLabelProps> {};
+
+export class PieLabel extends Cx.Widget<PieLabelProps> {}

package/src/charts/PieLabel.js

@@ -1,11 +1,21 @@
 import { VDOM } from "../ui/Widget";
 import { BoundedObject } from "../svg/BoundedObject";
 import { Rect } from "../svg/util/Rect";
+import { parseStyle } from "../util/parseStyle";
 
 export class PieLabel extends BoundedObject {
+   init() {
+      this.lineStyle = parseStyle(this.lineStyle);
+      super.init();
+   }
+
    declareData(...args) {
       super.declareData(...args, {
          distance: undefined,
+         lineStyle: { structured: true },
+         lineStroke: undefined,
+         lineClass: { structured: true },
+         lineColorIndex: undefined,
       });
    }
 
@@ -25,16 +35,22 @@ export class PieLabel extends BoundedObject {
    }
 
    render(context, instance, key) {
-      let { originalBounds, actualBounds } = instance;
+      let { originalBounds, actualBounds, data } = instance;
 
       return (
-         <g key={key}>
+         <g key={key} className={data.classNames}>
             <line
+               className={this.CSS.element(
+                  this.baseClass,
+                  "line",
+                  data.lineColorIndex != null && "color-" + data.lineColorIndex
+               )}
                x1={actualBounds.l < originalBounds.l ? actualBounds.r : actualBounds.l}
                y1={(actualBounds.t + actualBounds.b) / 2}
                x2={(originalBounds.l + originalBounds.r) / 2}
                y2={(originalBounds.t + originalBounds.b) / 2}
-               stroke="gray"
+               stroke={data.lineStroke}
+               style={data.lineStyle}
             />
             <g transform={`translate(${instance.actualBounds.l} ${instance.actualBounds.t})`}>
                {this.renderChildren(context, instance)}
@@ -45,3 +61,5 @@ export class PieLabel extends BoundedObject {
 }
 
 PieLabel.prototype.distance = 100;
+PieLabel.prototype.baseClass = "pielabel";
+PieLabel.prototype.styled = true;

package/src/ui/FocusManager.d.ts

@@ -1,27 +1,29 @@
-import * as Cx from '../core';
+import * as Cx from "../core";
 
 declare type FocusOutCallback = (Element) => void;
 
 export class FocusManager {
-    static subscribe(callback: FocusOutCallback): void;
+   static subscribe(callback: FocusOutCallback): void;
 
-    static onFocusOut(el : Element, callback: FocusOutCallback): () => void;
+   static onFocusOut(el: Element, callback: FocusOutCallback): () => void;
 
-    static oneFocusOut(el: Element, callback: FocusOutCallback): () => void;
+   static oneFocusOut(el: Element, callback: FocusOutCallback): () => void;
 
-    static nudge(): () => void;
+   static nudge(): () => void;
 
-    static focus(el: Element): () => void;
+   static focus(el: Element): () => void;
 
-    static focusFirst(el: Element): () => void;
+   static focusFirst(el: Element): () => void;
 
-    static setInterval(interval: number) : void;
+   static setInterval(interval: number): void;
 }
 
 export function oneFocusOut(component: any, el: Element, callback: FocusOutCallback);
 
-export function offFocusOut(component: any) : void;
+export function offFocusOut(component: any): void;
 
-export function preventFocus(e: Event) : void;
+export function preventFocus(e: Event): void;
 
 export function preventFocusOnTouch(e: Event, force?: boolean): void;
+
+export function unfocusElement(target?: Element, forceBlur?: boolean): void;

package/src/ui/app/History.d.ts

@@ -1,4 +1,4 @@
-import { View } from './../../data/View';
+import { View } from "./../../data/View";
 
 export class History {
    static connect(store: View, urlBinding: string, hashBinding?: string);
@@ -11,5 +11,7 @@ export class History {
 
    static reloadOnNextChange();
 
-   static addNavigateConfirmation(callback: ((url?: string) => boolean | Promise<boolean>), executeOnlyOnce?: boolean);
+   static addNavigateConfirmation(callback: (url?: string) => boolean | Promise<boolean>, executeOnlyOnce?: boolean);
+
+   static confirm(continueCallback: () => void, state: any);
 }

package/src/ui/app/History.js

@@ -1,6 +1,6 @@
-import {Url} from './Url';
-import {batchUpdatesAndNotify} from '../batchUpdates';
-import {SubscriberList} from '../../util/SubscriberList';
+import { Url } from "./Url";
+import { batchUpdatesAndNotify } from "../batchUpdates";
+import { SubscriberList } from "../../util/SubscriberList";
 
 let last = 0,
    next = 1,
@@ -10,16 +10,14 @@ let last = 0,
    navigateConfirmationCallback = null,
    permanentNavigateConfirmation = false;
 
-
 export class History {
-
    static connect(store, urlBinding, hashBinding) {
       this.store = store;
       this.urlBinding = urlBinding;
       this.hashBinding = hashBinding;
       this.updateStore();
       window.onpopstate = () => {
-         this.updateStore()
+         this.updateStore();
       };
    }
 
@@ -40,24 +38,24 @@ export class History {
       permanentNavigateConfirmation = permanent;
    }
 
-   static confirmAndNavigate(state, title, url, replace) {
-      if (!navigateConfirmationCallback)
-         return this.navigate(state, title, url, replace);
-
-      let result = navigateConfirmationCallback(url);
-
-      Promise
-         .resolve(result)
-         .then(value => {
-            if (value) {
-               if (!permanentNavigateConfirmation)
-                  navigateConfirmationCallback = null;
-               this.navigate(state, title, url, replace);
-            }
-         });
+   static confirm(continueCallback, state) {
+      if (!navigateConfirmationCallback) return continueCallback();
+
+      let result = navigateConfirmationCallback(state);
+      Promise.resolve(result).then((value) => {
+         if (value) {
+            if (!permanentNavigateConfirmation) navigateConfirmationCallback = null;
+            continueCallback();
+         }
+      });
+
       return false;
    }
 
+   static confirmAndNavigate(state, title, url, replace) {
+      return this.confirm(() => this.navigate(state, title, url, replace), url);
+   }
+
    static navigate(state, title, url, replace = false) {
       url = Url.resolve(url);
 
@@ -66,50 +64,51 @@ export class History {
          return true;
       }
 
-      let transition, changed = false;
-      batchUpdatesAndNotify(() => {
-         changed = this.updateStore(url);
-         if (changed)
-            transitions[++last] = transition = {
-               url,
-               state,
-               title,
-               replace
+      let transition,
+         changed = false;
+      batchUpdatesAndNotify(
+         () => {
+            changed = this.updateStore(url);
+            if (changed)
+               transitions[++last] = transition = {
+                  url,
+                  state,
+                  title,
+                  replace,
+               };
+         },
+         () => {
+            if (transition) transition.completed = true;
+
+            //update history once the page is rendered and the title is set
+            while (transitions[next] && transitions[next].completed) {
+               let tr = transitions[next];
+               delete transitions[next];
+               next++;
+               let op = tr.replace ? "replaceState" : "pushState";
+               window.history[op](tr.state, tr.title, tr.url);
+               if (subscribers) subscribers.notify(tr.url, op);
             }
-      }, () => {
-         if (transition)
-            transition.completed = true;
-
-         //update history once the page is rendered and the title is set
-         while (transitions[next] && transitions[next].completed) {
-            let tr = transitions[next];
-            delete transitions[next];
-            next++;
-            let op = tr.replace ? "replaceState" : "pushState";
-            window.history[op](tr.state, tr.title, tr.url);
-            if (subscribers)
-               subscribers.notify(tr.url, op);
          }
-      });
+      );
 
       return changed;
    }
 
    static updateStore(href) {
-      let url = Url.unresolve(href || document.location.href), hash = null;
-      let hashIndex = url.indexOf('#');
+      let url = Url.unresolve(href || document.location.href),
+         hash = null;
+      let hashIndex = url.indexOf("#");
       if (hashIndex !== -1) {
          hash = url.substring(hashIndex);
          url = url.substring(0, hashIndex);
       }
-      if (this.hashBinding)
-         this.store.set(this.hashBinding, hash);
+      if (this.hashBinding) this.store.set(this.hashBinding, hash);
       return this.store.set(this.urlBinding, url);
    }
 
    static subscribe(callback) {
-      if (!subscribers)
-         subscribers = new SubscriberList();
-      return subscribers.subscribe(callback)
+      if (!subscribers) subscribers = new SubscriberList();
+      return subscribers.subscribe(callback);
    }
 }

package/src/widgets/grid/Grid.d.ts

@@ -305,6 +305,9 @@ interface GridProps extends Cx.StyledContainerProps {
    /** Set to true to enable cell editing. Please note that all editable columns should specify the editor field. */
    cellEditable?: boolean;
 
+   /** A callback function which is executed before a cell editor is initalized. Return false from the callback to prevent the cell from going into the edit mode. */
+   onBeforeCellEdit?: (change, record) => any;
+
    /** A callback function which is executed after a cell has been successfully edited. */
    onCellEdited?: (change, record) => void;