cx 23.4.3 → 23.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "23.4.3",
+   "version": "23.4.5",
    "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/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");
+   });
 });

package/src/ui/Restate.js

@@ -1,158 +1,158 @@
-import { PureContainer } from "./PureContainer";
-import { Store } from "../data/Store";
-import { Cx } from "./Cx";
-import { isString } from "../util/isString";
-import { VDOM } from "./VDOM";
-import { isFunction } from "../util/isFunction";
-import { isObject } from "../util/isObject";
-import { isUndefined } from "../util/isUndefined";
-import { Binding } from "../data/Binding";
-import { StructuredSelector } from "../data/StructuredSelector";
-
-let persistenceCache = {};
-
-export class Restate extends PureContainer {
-   declareData() {
-      return super.declareData(...arguments, {
-         deferredUntilIdle: undefined,
-         idleTimeout: undefined,
-         cacheKey: undefined,
-      });
-   }
-
-   init() {
-      this.container = PureContainer.create({
-         type: PureContainer,
-         items: this.children || this.items,
-         layout: this.layout,
-         controller: this.controller,
-         outerLayout: this.outerLayout,
-         useParentLayout: !this.detached,
-         ws: this.ws,
-      });
-      this.privateDataSelector = new StructuredSelector({
-         props: this.data || {},
-         values: this.data,
-      });
-      delete this.items;
-      delete this.children;
-      delete this.controller;
-      delete this.outerLayout;
-      delete this.layout;
-      if (this.useParentLayout == null) this.useParentLayout = !this.detached;
-      super.init();
-   }
-
-   initSubStore(context, instance) {
-      let { cacheKey } = instance.data;
-      this.privateDataSelector.init(instance.store);
-      instance.subStore = new RestateStore({
-         store: instance.store,
-         detached: this.detached,
-         privateData: this.data || {},
-         data: cacheKey ? persistenceCache[cacheKey] || {} : {},
-         dataSelector: this.privateDataSelector.create(),
-         onSet: (path, value) => instance.nestedDataSet(path, value, this.data),
-      });
-
-      instance.setStore = (store) => {
-         instance.store = store;
-         instance.subStore.setStore(store);
-      };
-
-      if (cacheKey) {
-         instance.subscribeOnDestroy(() => {
-            persistenceCache[cacheKey] = instance.subStore.getData();
-         });
-      }
-   }
-
-   explore(context, instance) {
-      if (!instance.subStore) this.initSubStore(context, instance);
-      if (instance.subStore.parentDataCheck()) instance.markShouldUpdate();
-      super.explore(context, instance);
-   }
-
-   exploreItems(context, instance, items) {
-      if (!this.detached) {
-         instance.container = instance.getChild(context, this.container, "container", instance.subStore);
-         instance.container.scheduleExploreIfVisible(context);
-         instance.children = [instance.container];
-      }
-   }
-
-   render(context, instance, key) {
-      if (!this.detached) return instance.container.render(context);
-
-      return (
-         <Cx
-            key={key}
-            widget={this.container}
-            parentInstance={instance}
-            store={instance.subStore}
-            subscribe
-            options={this.options}
-            onError={this.onError}
-            deferredUntilIdle={instance.data.deferredUntilIdle}
-            idleTimeout={instance.data.idleTimeout}
-         />
-      );
-   }
-}
-
-Restate.prototype.detached = false;
-Restate.prototype.waitForIdle = false;
-
-export const PrivateStore = Restate;
-
-class RestateStore extends Store {
-   constructor(config) {
-      super(config);
-      this.parentDataVersion = -1;
-   }
-
-   getData() {
-      this.silently(() => {
-         this.parentDataCheck();
-      });
-      return super.getData();
-   }
-
-   parentDataCheck() {
-      if (this.parentDataVersion == this.store.meta.version) return false;
-      this.parentDataVersion = this.store.meta.version;
-      this.parentData = this.dataSelector(this.store.getData());
-      return this.batch(() => {
-         for (let key in this.parentData) {
-            super.setItem(key, this.parentData[key]);
-         }
-      });
-   }
-
-   setItem(path, value) {
-      let binding = Binding.get(path);
-      let bindingRoot = binding.parts[0];
-      if (!isObject(this.privateData) || !this.privateData.hasOwnProperty(bindingRoot)) {
-         let changed = isUndefined(value) ? super.deleteItem(path) : super.setItem(path, value);
-         return changed;
-      }
-
-      let newValue = value;
-      if (binding.parts.length > 1) newValue = binding.set(this.getData(), value)[bindingRoot];
-      this.onSet(bindingRoot, newValue);
-      this.batch(() => {
-         super.setItem(bindingRoot, newValue);
-         this.parentDataCheck();
-      });
-      return true;
-   }
-
-   deleteItem(path) {
-      return this.setItem(path, undefined);
-   }
-
-   doNotify() {
-      if (!this.detached) this.store.notify();
-      super.doNotify();
-   }
-}
+import { PureContainer } from "./PureContainer";
+import { Store } from "../data/Store";
+import { Cx } from "./Cx";
+import { isString } from "../util/isString";
+import { VDOM } from "./VDOM";
+import { isFunction } from "../util/isFunction";
+import { isObject } from "../util/isObject";
+import { isUndefined } from "../util/isUndefined";
+import { Binding } from "../data/Binding";
+import { StructuredSelector } from "../data/StructuredSelector";
+
+let persistenceCache = {};
+
+export class Restate extends PureContainer {
+   declareData() {
+      return super.declareData(...arguments, {
+         deferredUntilIdle: undefined,
+         idleTimeout: undefined,
+         cacheKey: undefined,
+      });
+   }
+
+   init() {
+      this.container = PureContainer.create({
+         type: PureContainer,
+         items: this.children || this.items,
+         layout: this.layout,
+         controller: this.controller,
+         outerLayout: this.outerLayout,
+         useParentLayout: !this.detached,
+         ws: this.ws,
+      });
+      this.privateDataSelector = new StructuredSelector({
+         props: this.data || {},
+         values: this.data,
+      });
+      delete this.items;
+      delete this.children;
+      delete this.controller;
+      delete this.outerLayout;
+      delete this.layout;
+      if (this.useParentLayout == null) this.useParentLayout = !this.detached;
+      super.init();
+   }
+
+   initSubStore(context, instance) {
+      let { cacheKey } = instance.data;
+      this.privateDataSelector.init(instance.store);
+      instance.subStore = new RestateStore({
+         store: instance.store,
+         detached: this.detached,
+         privateData: this.data || {},
+         data: cacheKey ? persistenceCache[cacheKey] || {} : {},
+         dataSelector: this.privateDataSelector.create(),
+         onSet: (path, value) => instance.nestedDataSet(path, value, this.data),
+      });
+
+      instance.setStore = (store) => {
+         instance.store = store;
+         instance.subStore.setStore(store);
+      };
+
+      if (cacheKey) {
+         instance.subscribeOnDestroy(() => {
+            persistenceCache[cacheKey] = instance.subStore.getData();
+         });
+      }
+   }
+
+   explore(context, instance) {
+      if (!instance.subStore) this.initSubStore(context, instance);
+      if (instance.subStore.parentDataCheck()) instance.markShouldUpdate();
+      super.explore(context, instance);
+   }
+
+   exploreItems(context, instance, items) {
+      if (!this.detached) {
+         instance.container = instance.getChild(context, this.container, "container", instance.subStore);
+         instance.container.scheduleExploreIfVisible(context);
+         instance.children = [instance.container];
+      }
+   }
+
+   render(context, instance, key) {
+      if (!this.detached) return instance.container.render(context);
+
+      return (
+         <Cx
+            key={key}
+            widget={this.container}
+            parentInstance={instance}
+            store={instance.subStore}
+            subscribe
+            options={this.options}
+            onError={this.onError}
+            deferredUntilIdle={instance.data.deferredUntilIdle}
+            idleTimeout={instance.data.idleTimeout}
+         />
+      );
+   }
+}
+
+Restate.prototype.detached = false;
+Restate.prototype.waitForIdle = false;
+
+export const PrivateStore = Restate;
+
+class RestateStore extends Store {
+   constructor(config) {
+      super(config);
+      this.parentDataVersion = -1;
+   }
+
+   getData() {
+      this.silently(() => {
+         this.parentDataCheck();
+      });
+      return super.getData();
+   }
+
+   parentDataCheck() {
+      if (this.parentDataVersion == this.store.meta.version) return false;
+      this.parentDataVersion = this.store.meta.version;
+      this.parentData = this.dataSelector(this.store.getData());
+      return this.batch(() => {
+         for (let key in this.parentData) {
+            super.setItem(key, this.parentData[key]);
+         }
+      });
+   }
+
+   setItem(path, value) {
+      let binding = Binding.get(path);
+      let bindingRoot = binding.parts[0];
+      if (!isObject(this.privateData) || !this.privateData.hasOwnProperty(bindingRoot)) {
+         let changed = isUndefined(value) ? super.deleteItem(path) : super.setItem(path, value);
+         return changed;
+      }
+
+      let newValue = value;
+      if (binding.parts.length > 1) newValue = binding.set(this.getData(), value)[bindingRoot];
+      this.onSet(bindingRoot, newValue);
+      this.batch(() => {
+         super.setItem(bindingRoot, newValue);
+         this.parentDataCheck();
+      });
+      return true;
+   }
+
+   deleteItem(path) {
+      return this.setItem(path, undefined);
+   }
+
+   doNotify() {
+      if (!this.detached) this.store.notify();
+      super.doNotify();
+   }
+}

package/src/widgets/grid/Grid.js

@@ -42,6 +42,7 @@ import { StaticText } from "../../ui/StaticText";
 import { unfocusElement } from "../../ui/FocusManager";
 import { tooltipMouseMove, tooltipMouseLeave } from "../overlay/tooltip-ops";
 import { Container } from "../../ui/Container";
+import { findFirstChild } from "../../util/DOM";
 
 export class Grid extends Container {
    declareData(...args) {
@@ -510,13 +511,16 @@ export class Grid extends Container {
             onClick={(e) => {
                e.stopPropagation();
             }}
+            data-unique-col-id={hdwidget.uniqueColumnId}
             onMouseDown={(e) => {
                if (e.buttons != 1) return;
                let resizeOverlayEl = document.createElement("div");
-               let headerCell = e.target.parentElement;
-               if (forPreviousColumn) headerCell = headerCell.previousSibling;
+               
+               let headerTBody = e.target.parentElement.parentElement.parentElement;
+               let uniqueColId = e.currentTarget.dataset.uniqueColId;
 
-               let scrollAreaEl = headerCell.parentElement.parentElement.parentElement.parentElement;
+               let headerCell = findFirstChild(headerTBody, el => el.tagName == 'TH' && el.dataset?.uniqueColId == uniqueColId);
+               let scrollAreaEl = headerTBody.parentElement.parentElement;
                let gridEl = scrollAreaEl.parentElement;
                let initialWidth = headerCell.offsetWidth;
                let initialPosition = getCursorPos(e);
@@ -640,15 +644,17 @@ export class Grid extends Container {
                      }
                   }
 
+                  let uniqueColumnId = header.data.colSpan > 1 ? null : hdwidget.uniqueColumnId;
+
                   style = header.data.style;
                   let 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;
                      let s = `${customWidth}px`;
                      style = {
                         ...style,
@@ -686,10 +692,15 @@ export class Grid extends Container {
 
                   if (colIndex > 0) {
                      let hdinstPrev = line.children[colIndex - 1];
-                     let headerPrev = hdinstPrev.components[`header${l + 1}`];
+                     let prevLine = 3;
+                     let 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?.data?.resizable) &&
+                        headerPrev?.data?.colSpan < 2
                      ) {
                         prevColumnResizer = this.renderResizer(instance, hdinstPrev, headerPrev, colIndex - 1, true);
                      }
@@ -714,7 +725,7 @@ export class Grid extends Container {
                      onMouseLeave={(e) => this.onHeaderMouseLeave(e, hdinst, l)}
                      onClick={(e) => this.onHeaderClick(e, hdwidget, instance, l)}
                      onContextMenu={onContextMenu}
-                     data-unique-col-id={hdwidget.uniqueColumnId}
+                     data-unique-col-id={colSpan > 1 ? null: hdwidget.uniqueColumnId}
                   >
                      {getContent(content)}
                      {sortIcon}