cx 23.4.4 → 23.5.0

package/dist/widgets.js

@@ -14589,6 +14589,7 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
 					type: DateTimePicker,
 					segment: widget.segment,
 					encoding: widget.encoding,
+					showSeconds: widget.showSeconds,
 				};
 				break;
 		}
@@ -15849,12 +15850,19 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 			onClick: function onClick(e) {
 				e.stopPropagation();
 			},
+			"data-unique-col-id": hdwidget.uniqueColumnId,
 			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 headerTBody = e.target.parentElement.parentElement.parentElement;
+				var uniqueColId = e.currentTarget.dataset.uniqueColId;
+				var headerCell = findFirstChild(headerTBody, function (el) {
+					var _el$dataset;
+					return (
+						el.tagName == "TH" && ((_el$dataset = el.dataset) == null ? void 0 : _el$dataset.uniqueColId) == uniqueColId
+					);
+				});
+				var scrollAreaEl = headerTBody.parentElement.parentElement;
 				var gridEl = scrollAreaEl.parentElement;
 				var initialWidth = headerCell.offsetWidth;
 				var initialPosition = getCursorPos(e);
@@ -15978,15 +15986,16 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 								});
 							}
 						}
+						var uniqueColumnId = header.data.colSpan > 1 ? null : hdwidget.uniqueColumnId;
 						style = header.data.style;
 						var customWidth =
 							header.data.width ||
-							instance.state.colWidth[hdwidget.uniqueColumnId] ||
+							instance.state.colWidth[uniqueColumnId] ||
 							header.data.defaultWidth ||
-							instance.state.lockedColWidth[hdwidget.uniqueColumnId];
+							instance.state.lockedColWidth[uniqueColumnId];
 						if (customWidth) {
-							if (instance.state.colWidth[hdwidget.uniqueColumnId] != customWidth)
-								instance.state.colWidth[hdwidget.uniqueColumnId] = customWidth;
+							if (instance.state.colWidth[uniqueColumnId] != customWidth)
+								instance.state.colWidth[uniqueColumnId] = customWidth;
 							var s = customWidth + "px";
 							style = _objectSpread2(
 								_objectSpread2({}, style),
@@ -16018,11 +16027,24 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 							resizer = _this3.renderResizer(instance, hdinst, header, colIndex);
 						}
 						if (colIndex > 0) {
+							var _headerPrev, _headerPrev$data, _headerPrev2, _headerPrev2$data;
 							var hdinstPrev = line.children[colIndex - 1];
-							var headerPrev = hdinstPrev.components["header" + (l + 1)];
+							var prevLine = 3;
+							var headerPrev;
+							while (!headerPrev && prevLine >= 0) {
+								headerPrev = hdinstPrev.components["header" + (prevLine + 1)];
+								prevLine--;
+							}
 							if (
-								(hdinstPrev.widget.resizable || (headerPrev && headerPrev.data.resizable)) &&
-								headerPrev.data.colSpan < 2
+								(hdinstPrev.widget.resizable ||
+									((_headerPrev = headerPrev) != null &&
+										(_headerPrev$data = _headerPrev.data) != null &&
+										_headerPrev$data.resizable)) &&
+								((_headerPrev2 = headerPrev) == null
+									? void 0
+									: (_headerPrev2$data = _headerPrev2.data) == null
+									? void 0
+									: _headerPrev2$data.colSpan) < 2
 							) {
 								prevColumnResizer = _this3.renderResizer(instance, hdinstPrev, headerPrev, colIndex - 1, true);
 							}
@@ -16053,7 +16075,7 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 									return _this3.onHeaderClick(e, hdwidget, instance, l);
 								},
 								onContextMenu: onContextMenu,
-								"data-unique-col-id": hdwidget.uniqueColumnId,
+								"data-unique-col-id": colSpan > 1 ? null : hdwidget.uniqueColumnId,
 								children: [getContent(content), sortIcon, tool, prevColumnResizer, resizer],
 							},
 							colIndex

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "23.4.4",
+   "version": "23.5.0",
    "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/Legend.d.ts

@@ -1,27 +1,27 @@
-import * as Cx from '../core';
+import * as Cx from "../core";
 
 interface LegendProps extends Cx.HtmlElementProps {
-   
    /** Name of the legend. Default is `legend`. */
-   name?: string,
-   
+   name?: string;
+
    /** Base CSS class to be applied to the element. Defaults to `legend`. */
-   baseClass?: string,
-   
+   baseClass?: string;
+
    /** Switch to vertical mode. */
-   vertical?: boolean,
+   vertical?: boolean;
 
    /** Size of the svg shape container in pixels. Default value is 20. */
-   svgSize?: number,
+   svgSize?: number;
 
    /** Shape size in pixels. Default value is 18. */
-   shapeSize?: number
+   shapeSize?: number;
+
+   /** Default shape that will be applied to the all legend items. */
+   shape?: Cx.StringProp;
 }
 
 export class Legend extends Cx.Widget<LegendProps> {
-   static Scope() : any;
+   static Scope(): any;
 }
 
-export class LegendScope extends  Cx.Widget<Cx.PureContainerProps> {
-
-}
+export class LegendScope extends Cx.Widget<Cx.PureContainerProps> {}

package/src/charts/Legend.js

@@ -15,6 +15,12 @@ export class Legend extends HtmlElement {
       super.prepareData(context, instance);
    }
 
+   declareData() {
+      super.declareData(...arguments, {
+         shape: undefined,
+      });
+   }
+
    isValidHtmlAttribute(attrName) {
       switch (attrName) {
          case "shapeSize":
@@ -74,7 +80,7 @@ export class Legend extends HtmlElement {
                         onMouseMove={onMouseMove}
                         onMouseLeave={onMouseLeave}
                      >
-                        {this.renderShape(e)}
+                        {this.renderShape(e, instance.data.shape)}
                         {e.name}
                      </div>
                   ))
@@ -86,11 +92,11 @@ export class Legend extends HtmlElement {
       return [list, super.renderChildren(context, instance)];
    }
 
-   renderShape(entry) {
+   renderShape(entry, legendEntriesShape) {
       const className = this.CSS.element(this.baseClass, "shape", {
          [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
       });
-      const shape = getShape(entry.shape || "square");
+      const shape = getShape(legendEntriesShape || entry.shape || "square");
 
       return (
          <svg
@@ -115,14 +121,14 @@ Legend.prototype.baseClass = "legend";
 Legend.prototype.vertical = false;
 Legend.prototype.memoize = false;
 Legend.prototype.shapeSize = 18;
+Legend.prototype.shape = null;
 Legend.prototype.svgSize = 20;
 
 Widget.alias("legend", Legend);
 
 Legend.Scope = class extends PureContainer {
    explore(context, instance) {
-      context.push("legends", (instance.legends = {
-      }));
+      context.push("legends", (instance.legends = {}));
       super.explore(context, instance);
    }
 

package/src/charts/PieChart.js

@@ -13,7 +13,7 @@ export class PieChart extends BoundedObject {
       super.declareData(...arguments, {
          angle: undefined,
          startAngle: 0,
-         clockwise: undefined
+         clockwise: undefined,
       });
    }
 
@@ -42,7 +42,7 @@ export class PieChart extends BoundedObject {
    }
 }
 
-      PieChart.prototype.anchors = "0 1 1 0";
+PieChart.prototype.anchors = "0 1 1 0";
 
 class PieCalculator {
    reset(angle, startAngle, clockwise) {
@@ -88,10 +88,8 @@ class PieCalculator {
       var angle = value * s.angleFactor;
       var startAngle = s.lastAngle;
 
-      if (!this.clockwise)
-         s.lastAngle += angle;
-      else
-         s.lastAngle -= angle;
+      if (!this.clockwise) s.lastAngle += angle;
+      else s.lastAngle -= angle;
 
       return {
          startAngle,
@@ -354,17 +352,17 @@ export class PieSlice extends Container {
    }
 }
 
-   PieSlice.prototype.offset = 0;
-   PieSlice.prototype.r0 = 0;
-   PieSlice.prototype.r = 50;
-   PieSlice.prototype.percentageRadius = true;
-   PieSlice.prototype.baseClass = "pieslice";
-   PieSlice.prototype.legend = "legend";
-   PieSlice.prototype.active = true;
-   PieSlice.prototype.stack = "stack";
-   PieSlice.prototype.legendAction = "auto";
-   PieSlice.prototype.legendShape = "rect";
-   PieSlice.prototype.hoverChannel = "default";
-   PieSlice.prototype.styled = true;
+PieSlice.prototype.offset = 0;
+PieSlice.prototype.r0 = 0;
+PieSlice.prototype.r = 50;
+PieSlice.prototype.percentageRadius = true;
+PieSlice.prototype.baseClass = "pieslice";
+PieSlice.prototype.legend = "legend";
+PieSlice.prototype.active = true;
+PieSlice.prototype.stack = "stack";
+PieSlice.prototype.legendAction = "auto";
+PieSlice.prototype.legendShape = "circle";
+PieSlice.prototype.hoverChannel = "default";
+PieSlice.prototype.styled = true;
 
 Widget.alias("pie-chart", PieChart);

package/src/data/Binding.js

@@ -7,18 +7,8 @@ export class Binding {
    constructor(path) {
       this.path = path;
       this.parts = path.split(".");
-      let body = "return (x";
-      let selector = "x";
-
-      for (let i = 0; i < this.parts.length; i++) {
-         if (this.parts[i][0] >= "0" && this.parts[i][0] <= "9") selector += "[" + this.parts[i] + "]";
-         else selector += "." + this.parts[i];
-
-         if (i + 1 < this.parts.length) body += " && " + selector;
-         else body += " ? " + selector + " : undefined";
-      }
-
-      body += ")";
+      let body = "return x";
+      for (let i = 0; i < this.parts.length; i++) body += '?.["' + this.parts[i] + '"]';
       this.value = new Function("x", body);
    }
 

package/src/data/Binding.spec.js

@@ -1,49 +1,59 @@
-import {Binding} from './Binding';
-import assert from 'assert';
-
-describe('Binding', function() {
-
-    describe('#get()', function () {
-        it('should get value if value is defined', function () {
-            var state = {person: {name: 'Joe'}};
-            var b = Binding.get('person.name');
-            assert.equal(b.value(state), 'Joe');
-        });
-    });
+import { Binding } from "./Binding";
+import assert from "assert";
+
+describe("Binding", function () {
+   describe("#get()", function () {
+      it("should get value if value is defined", function () {
+         var state = { person: { name: "Joe" } };
+         var b = Binding.get("person.name");
+         assert.equal(b.value(state), "Joe");
+      });
 
-    describe('#set()', function () {
+      it("allows non-standard property identifiers", function () {
+         var state = { person: { "@schema": "Person" } };
+         var b = Binding.get("person.@schema");
+         assert.equal(b.value(state), "Person");
+      });
+   });
 
-        it('produces new objects along the binding path', function () {
-            var state = {person: {name: 'Joe'}};
-            var b = Binding.get('person.name');
-            var ns = b.set(state, 'Jack');
-            assert.equal(ns.person.name, 'Jack');
-            assert.notEqual(state, ns);
-            assert.notEqual(state.person, ns.person);
-            assert.notEqual(state.person.name, ns.person.name);
-        });
+   describe("#set()", function () {
+      it("produces new objects along the binding path", function () {
+         var state = { person: { name: "Joe" } };
+         var b = Binding.get("person.name");
+         var ns = b.set(state, "Jack");
+         assert.equal(ns.person.name, "Jack");
+         assert.notEqual(state, ns);
+         assert.notEqual(state.person, ns.person);
+         assert.notEqual(state.person.name, ns.person.name);
+      });
 
-        it('returns same state object if value does not change', function () {
-            var state = {person: {name: 'Joe'}};
-            var b = Binding.get('person.name');
-            var ns = b.set(state, 'Joe');
-            assert.equal(state, ns);
-        });
-    });
+      it("returns same state object if value does not change", function () {
+         var state = { person: { name: "Joe" } };
+         var b = Binding.get("person.name");
+         var ns = b.set(state, "Joe");
+         assert.equal(state, ns);
+      });
 
-   describe('.delete()', function () {
+      it("allows non-standard property identifiers", function () {
+         var state = { person: { "@schema": "Person" } };
+         var b = Binding.get("person.@schema");
+         var ns = b.set(state, "Test");
+         assert.equal(ns.person["@schema"], "Test");
+      });
+   });
 
-      it('correctly removes pointed properties', function () {
-         var state = {person: {name: 'Joe'}};
-         var b = Binding.get('person.name');
+   describe(".delete()", function () {
+      it("correctly removes pointed properties", function () {
+         var state = { person: { name: "Joe" } };
+         var b = Binding.get("person.name");
          var ns = b.delete(state);
-         assert('person' in ns);
-         assert(!('name' in ns.person));
+         assert("person" in ns);
+         assert(!("name" in ns.person));
       });
 
-      it('does not change state if property is non-existent', function () {
-         var state = {person: {name: 'Joe'}};
-         var b = Binding.get('person.name2');
+      it("does not change state if property is non-existent", function () {
+         var state = { person: { name: "Joe" } };
+         var b = Binding.get("person.name2");
          var ns = b.delete(state);
          assert(ns == state);
       });

package/src/data/createAccessorModelProxy.spec.tsx

@@ -7,6 +7,7 @@ interface Model {
       city: string;
       streetNumber: number;
    };
+   "@crazy": string;
 }
 
 describe("createAccessorModelProxy", () => {
@@ -35,4 +36,9 @@ describe("createAccessorModelProxy", () => {
       assert.strictEqual(streetNumber.nameOf(), "streetNumber");
       assert.strictEqual(city.nameOf(), "city");
    });
+
+   it("allows non-standard property identifiers ", () => {
+      let model = createAccessorModelProxy<Model>();
+      assert.strictEqual(model["@crazy"].nameOf(), "@crazy");
+   });
 });