cx 22.3.4 → 22.3.5

package/dist/ui.js

@@ -12,6 +12,7 @@ import {
 	getSelector,
 	Binding,
 	ZoomIntoPropertyView,
+	isAccessorChain,
 	SubscribableView,
 	Store,
 	NestedDataView,
@@ -1072,7 +1073,10 @@ var ArrayAdapter = /*#__PURE__*/ (function(_DataAdapter) {
 	var _proto = ArrayAdapter.prototype;
 
 	_proto.init = function init() {
-		this.recordsAccessor = getAccessor(this.recordsBinding ? this.recordsBinding : this.recordsAccessor);
+		this.recordsAccessor = getAccessor(this.recordsBinding ? this.recordsBinding : this.recordsAccessor); //resolve accessor chains
+
+		this.recordName = this.recordName.toString();
+		this.indexName = this.indexName.toString();
 	};
 
 	_proto.initInstance = function initInstance(context, instance) {
@@ -2191,10 +2195,10 @@ var Instance = /*#__PURE__*/ (function() {
 					_this4.store.dispatch(action);
 
 					changed = true;
-				} else if (isString(p.bind)) {
+				} else if (isString(p.bind) || isAccessorChain(p.bind)) {
 					changed = _this4.store.set(p.bind, value);
 				}
-			}
+			} else if (isAccessorChain(p)) changed = _this4.store.set(p.toString(), value);
 		});
 		return changed;
 	};
@@ -5094,7 +5098,8 @@ TreeAdapter.prototype.isTreeAdapter = true;
 
 function bind(path, defaultValue) {
 	return {
-		bind: path,
+		//toString will ensure chain accessors are converted to strings
+		bind: path.toString(),
 		defaultValue: defaultValue
 	};
 }
@@ -5106,8 +5111,24 @@ function tpl(text) {
 }
 
 function expr(text) {
-	return {
-		expr: text
+	var _this = this;
+
+	if (isString(text))
+		return {
+			expr: text
+		};
+	var getters = [];
+	var compute = arguments[arguments.length - 1];
+
+	for (var i = 0; i < arguments.length - 1; i++) {
+		getters.push(Binding.get(arguments[i]).value);
+	}
+
+	return function(data) {
+		var argv = getters.map(function(g) {
+			return g(data);
+		});
+		return compute.apply(_this, argv);
 	};
 }
 

package/dist/widgets.js

@@ -18085,7 +18085,7 @@ var Grid = /*#__PURE__*/ (function(_Widget) {
 								(hdinstPrev.widget.resizable || (headerPrev && headerPrev.data.resizable)) &&
 								headerPrev.data.colSpan < 2
 							) {
-								prevColumnResizer = _this3.renderResizer(instance, hdinstPrev, headerPrev, colIndex, true);
+								prevColumnResizer = _this3.renderResizer(instance, hdinstPrev, headerPrev, colIndex - 1, true);
 							}
 						}
 					}

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "22.3.4",
+   "version": "22.3.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/core.d.ts

@@ -13,12 +13,10 @@ declare namespace Cx {
 
    type Tpl = {
       tpl: string;
-      defaultValue?: any;
    };
 
    type Expr = {
       expr: string;
-      defaultValue?: any;
    };
 
    type Binding = Bind | Tpl | Expr;
@@ -29,7 +27,13 @@ declare namespace Cx {
       [prop: string]: Selector<any>;
    }
 
-   type Prop<T> = Binding | T | Selector<T>;
+   type AccessorChain<M> = {
+      toString(): string;
+   } & {
+      [prop in keyof M]: AccessorChain<M[prop]>;
+   };
+
+   type Prop<T> = T | Binding | Selector<T> | AccessorChain<T>;
 
    interface Record {
       [prop: string]: any;
@@ -51,6 +55,8 @@ declare namespace Cx {
    type RecordsProp = Prop<Record[]>;
    type SortersProp = Prop<Sorter[]>;
 
+   type RecordAlias = string | { toString(): string };
+
    interface WidgetProps {
       /** Inner layout used to display children inside the widget. */
       layout?: any;
@@ -122,7 +128,7 @@ declare namespace Cx {
       style?: StyleProp;
 
       /** Style object applied to the element */
-      styles?: Cx.StyleProp;
+      styles?: StyleProp;
    }
 
    interface HtmlElementProps extends StyledContainerProps {
@@ -130,7 +136,7 @@ declare namespace Cx {
       id?: string | number | Binding | Selector<string | number>;
 
       /** Inner text contents. */
-      text?: string | number | Binding | Selector<string | number>;
+      text?: Cx.StringProp | Cx.NumberProp;
 
       /** Tooltip configuration. */
       tooltip?: StringProp | StructuredProp;
@@ -176,6 +182,35 @@ declare global {
       interface IntrinsicElements {
          cx: any;
       }
+
+      interface IntrinsicAttributes {
+         /** Inner layout used to display children inside the widget. */
+         layout?: any;
+
+         /** Outer (wrapper) layout used to display the widget in. */
+         outerLayout?: any;
+
+         /** Name of the ContentPlaceholder that should be used to display the widget. */
+         putInto?: string;
+
+         /** Name of the ContentPlaceholder that should be used to display the widget. */
+         contentFor?: string;
+
+         /** Controller. */
+         controller?: any;
+
+         /** Visibility of the widget. Defaults to `true`. */
+         visible?: Cx.BooleanProp;
+
+         /** Visibility of the widget. Defaults to `true`. */
+         if?: Cx.BooleanProp;
+
+         /** Appearance modifier. For example, mod="big" will add the CSS class `.cxm-big` to the block element. */
+         mod?: Cx.StringProp | Cx.Prop<string[]> | Cx.StructuredProp;
+
+         /** Cache render output. Default is `true`. */
+         memoize?: Cx.BooleanProp;
+      }
    }
 }
 
@@ -183,7 +218,7 @@ declare module "react" {
    interface ClassAttributes<T> extends Cx.PureContainerProps {
       class?: Cx.ClassProp;
       styles?: Cx.StyleProp;
-      text?: Cx.StringProp;
+      text?: Cx.StringProp | Cx.NumberProp;
       innerText?: Cx.StringProp;
       html?: Cx.StringProp;
       innerHtml?: Cx.StringProp;

package/src/data/Binding.d.ts

@@ -1,15 +1,16 @@
-import { Record } from "../core";
+import { Record, AccessorChain } from "../core";
 
-export class Binding {
+export class Binding<V = any> {
    constructor(path: string);
 
-   set(state: Record, value: any): Record;
+   set(state: Record, value: V): Record;
 
    delete(state: Record): Record;
 
    value(state: Record): any;
 
    static get(path: string): Binding;
+   static get<V>(chain: AccessorChain<V>): Binding<V>;
 }
 
 export function isBinding(value: any): boolean;

package/src/data/Binding.js

@@ -1,24 +1,25 @@
 let bindingCache = {};
 import { isString } from "../util/isString";
 import { isObject } from "../util/isObject";
+import { isAccessorChain } from "./createAccessorModelProxy";
 
 export class Binding {
    constructor(path) {
       this.path = path;
       this.parts = path.split(".");
-      let fstr = "return (x";
-      let cpath = "x";
+      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") cpath += "[" + this.parts[i] + "]";
-         else cpath += "." + this.parts[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) fstr += " && " + cpath;
-         else fstr += " ? " + cpath + " : undefined";
+         if (i + 1 < this.parts.length) body += " && " + selector;
+         else body += " ? " + selector + " : undefined";
       }
 
-      fstr += ")";
-      this.value = new Function("x", fstr);
+      body += ")";
+      this.value = new Function("x", body);
    }
 
    set(state, value) {
@@ -72,11 +73,14 @@ export class Binding {
 
       if (path instanceof Binding) return path;
 
+      if (isAccessorChain(path)) return this.get(path.toString());
+
       throw new Error("Invalid binding definition provided.");
    }
 }
 
 export function isBinding(value) {
    if (isObject(value) && isString(value.bind)) return true;
+   if (value && value.isAccessorChain) return true;
    return value instanceof Binding;
 }

package/src/data/Store.d.ts

@@ -1,12 +1,12 @@
-import {View, ViewConfig} from './View';
+import { View, ViewConfig } from "./View";
 
-interface StoreConfig extends ViewConfig {
+interface StoreConfig<D = any> extends ViewConfig {
    async?: boolean;
-   data?: any;
+   data?: D;
 }
 
-export class Store extends View {
-   constructor(config?: StoreConfig);
+export class Store<D = any> extends View<D> {
+   constructor(config?: StoreConfig<D>);
 
    unsubscribeAll(): void;
 

package/src/data/Store.js

@@ -24,7 +24,7 @@ export class Store extends SubscribableView {
       }
       return false;
    }
-   
+
    deleteItem(path) {
       let next = Binding.get(path).delete(this.data);
       if (next != this.data) {
@@ -35,7 +35,7 @@ export class Store extends SubscribableView {
       }
       return false;
    }
-   
+
    clear() {
       this.data = {};
       this.meta.version++;

package/src/data/StoreRef.js

@@ -1,8 +1,10 @@
+import { isAccessorChain } from "./createAccessorModelProxy";
 import { Ref } from "./Ref";
 
 export class StoreRef extends Ref {
    constructor(config) {
       super(config);
+      if (isAccessorChain(this.path)) this.path = this.path.toString();
    }
 
    get() {

package/src/data/StructuredSelector.js

@@ -1,94 +1,83 @@
-import {Binding} from './Binding';
-import {Expression} from './Expression';
-import {StringTemplate} from './StringTemplate';
-import {createStructuredSelector} from '../data/createStructuredSelector';
-import {getSelector} from '../data/getSelector';
-import {isFunction} from '../util/isFunction';
-import {isUndefined} from '../util/isUndefined';
-import {isDefined} from '../util/isDefined';
-import {isArray} from '../util/isArray';
+import { Binding } from "./Binding";
+import { Expression } from "./Expression";
+import { StringTemplate } from "./StringTemplate";
+import { createStructuredSelector } from "../data/createStructuredSelector";
+import { getSelector } from "../data/getSelector";
+import { isFunction } from "../util/isFunction";
+import { isUndefined } from "../util/isUndefined";
+import { isDefined } from "../util/isDefined";
+import { isArray } from "../util/isArray";
+import { isAccessorChain } from "./createAccessorModelProxy";
 
 function defaultValue(pv) {
-   if (typeof pv == 'object' && pv && pv.structured)
-      return pv.defaultValue;
+   if (typeof pv == "object" && pv && pv.structured) return pv.defaultValue;
 
    return pv;
 }
 
 function getSelectorConfig(props, values, nameMap) {
-
    let functions = {},
       structures = {},
       defaultValues = {},
-      constants, p, v, pv,
+      constants,
+      p,
+      v,
+      pv,
       constant = true;
 
    for (p in props) {
       v = values[p];
       pv = props[p];
 
-      if (isUndefined(v) && pv && (pv.bind || pv.tpl || pv.expr))
-         v = pv;
+      if (isUndefined(v) && pv && (pv.bind || pv.tpl || pv.expr)) v = pv;
 
       if (v === null) {
-         if (!constants)
-            constants = {};
+         if (!constants) constants = {};
          constants[p] = null;
-      }
-      else if (typeof v == 'object') {
+      } else if (typeof v == "object") {
          if (v.bind) {
-            if (isUndefined(v.defaultValue) && v != pv)
-               v.defaultValue = defaultValue(pv);
-            if (isDefined(v.defaultValue))
-               defaultValues[v.bind] = v.defaultValue;
+            if (isUndefined(v.defaultValue) && v != pv) v.defaultValue = defaultValue(pv);
+            if (isDefined(v.defaultValue)) defaultValues[v.bind] = v.defaultValue;
             nameMap[p] = v.bind;
             functions[p] = Binding.get(v.bind).value;
             constant = false;
-         }
-         else if (v.expr) {
+         } else if (v.expr) {
             functions[p] = Expression.get(v.expr);
             constant = false;
-         }
-         else if (v.get) {
+         } else if (v.get) {
             functions[p] = v.get;
             constant = false;
-         }
-         else if (v.tpl) {
+         } else if (v.tpl) {
             functions[p] = StringTemplate.get(v.tpl);
             constant = false;
-         }
-         else if (pv && typeof pv == 'object' && pv.structured) {
-            if (isArray(v))
-               functions[p] = getSelector(v);
+         } else if (pv && typeof pv == "object" && pv.structured) {
+            if (isArray(v)) functions[p] = getSelector(v);
             else {
                let s = getSelectorConfig(v, v, {});
                structures[p] = s;
                Object.assign(defaultValues, s.defaultValues);
             }
             constant = false;
-         } 
-         else {
-            if (!constants)
-               constants = {};
+         } else {
+            if (!constants) constants = {};
             constants[p] = v;
          }
-      }
-      else if (isFunction(v)) {
-         functions[p] = v;
+      } else if (isFunction(v)) {
+         if (isAccessorChain(v)) {
+            let path = v.toString();
+            nameMap[p] = path;
+            functions[p] = Binding.get(path).value;
+         } else functions[p] = v;
          constant = false;
-      }
-      else {
+      } else {
          if (isUndefined(v)) {
-            if (isUndefined(pv))
-               continue;
+            if (isUndefined(pv)) continue;
             v = defaultValue(pv);
          }
 
-         if (isUndefined(v))
-            continue;
+         if (isUndefined(v)) continue;
 
-         if (!constants)
-            constants = {};
+         if (!constants) constants = {};
 
          constants[p] = v;
       }
@@ -99,7 +88,7 @@ function getSelectorConfig(props, values, nameMap) {
       structures,
       defaultValues,
       constants,
-      constant
+      constant,
    };
 }
 
@@ -110,15 +99,13 @@ function createSelector({ functions, structures, constants, defaultValues }) {
       selector[n] = functions[n];
    }
 
-   for (let n in structures)
-      selector[n] = createSelector(structures[n]);
+   for (let n in structures) selector[n] = createSelector(structures[n]);
 
    return createStructuredSelector(selector, constants);
 }
 
 export class StructuredSelector {
-
-   constructor({props, values}) {
+   constructor({ props, values }) {
       this.nameMap = {};
       this.config = getSelectorConfig(props, values, this.nameMap);
    }
@@ -129,17 +116,16 @@ export class StructuredSelector {
 
    create() {
       let selector = createSelector(this.config);
-      if (selector.memoize)
-         return selector.memoize();
+      if (selector.memoize) return selector.memoize();
       return selector;
    }
 
    createStoreSelector() {
       if (this.config.constant) {
-         let result = {...this.config.constants};
+         let result = { ...this.config.constants };
          return () => result;
       }
       let selector = this.create();
-      return store => selector(store.getData());
+      return (store) => selector(store.getData());
    }
 }

package/src/data/StructuredSelector.spec.js

@@ -1,93 +1,94 @@
-import {StructuredSelector} from './StructuredSelector';
-import assert from 'assert';
+import { StructuredSelector } from "./StructuredSelector";
+import assert from "assert";
+import { createAccessorModelProxy } from "./createAccessorModelProxy";
 
-describe('StructuredSelector', function() {
-   describe('#create()', function () {
-      it('constants', function () {
+describe("StructuredSelector", function () {
+   describe("#create()", function () {
+      it("constants", function () {
          var x = {};
          var s = new StructuredSelector({
             props: {
                a: undefined,
-               b: undefined
+               b: undefined,
             },
             values: {
                a: 1,
-               b: 2
-            }
+               b: 2,
+            },
          }).create(x);
 
-         assert.deepEqual(s(x), {a: 1, b: 2});
+         assert.deepEqual(s(x), { a: 1, b: 2 });
       });
 
-      it('bindings', function () {
+      it("bindings", function () {
          var x = { a: 1, b: 2 };
          var s = new StructuredSelector({
             props: {
                a: undefined,
-               b: undefined
+               b: undefined,
             },
             values: {
-               a: { bind: 'b' },
-               b: { bind: 'a' }
-            }
+               a: { bind: "b" },
+               b: { bind: "a" },
+            },
          }).create(x);
 
-         assert.deepEqual(s(x), {a: 2, b: 1});
+         assert.deepEqual(s(x), { a: 2, b: 1 });
       });
 
-      it('templates', function () {
-         var x = {a: 1, b: 2};
+      it("templates", function () {
+         var x = { a: 1, b: 2 };
          var s = new StructuredSelector({
             props: {
                a: undefined,
-               b: undefined
+               b: undefined,
             },
             values: {
-               a: {tpl: 'b{a}'},
-               b: {tpl: 'a{b}'}
-            }
+               a: { tpl: "b{a}" },
+               b: { tpl: "a{b}" },
+            },
          }).create(x);
 
-         assert.deepEqual(s(x), {a: 'b1', b: 'a2'});
+         assert.deepEqual(s(x), { a: "b1", b: "a2" });
       });
 
-      it('structured', function () {
-         var x = {a: 1, b: 2};
+      it("structured", function () {
+         var x = { a: 1, b: 2 };
          var s = new StructuredSelector({
             props: {
                a: {
-                  structured: true
+                  structured: true,
                },
-               b: undefined
+               b: undefined,
             },
             values: {
                a: {
-                  x: { expr: '{a} == 1'},
-                  y: { expr: '{b} == 1'}
+                  x: { expr: "{a} == 1" },
+                  y: { expr: "{b} == 1" },
                },
-               b: {tpl: 'a{b}'}
-            }
+               b: { tpl: "a{b}" },
+            },
          }).create(x);
 
-         assert.deepEqual(s(x), {a: { x: true, y: false }, b: 'a2'});
+         assert.deepEqual(s(x), { a: { x: true, y: false }, b: "a2" });
       });
    });
 
-   it('structures do not change if data doesn\'t change', function () {
-      var x = {a: 1, b: 2};
+   it("structures do not change if data doesn't change", function () {
+      var x = { a: 1, b: 2 };
       var s = new StructuredSelector({
          props: {
             a: {
-               structured: true
-            }
+               structured: true,
+            },
          },
          values: {
             a: {
-               x: { expr: '{a} == 1'},
-               y: { expr: '{b} == 1'}
+               x: { expr: "{a} == 1" },
+               y: { expr: "{b} == 1" },
             },
-            b: {tpl: 'a{b}'}
-         }
+            b: { tpl: "a{b}" },
+         },
       }).create(x);
 
       let r1 = s(x);
@@ -95,4 +96,18 @@ describe('StructuredSelector', function() {
 
       assert.equal(r1, r2);
    });
+
+   it("structures do not change if data doesn't change", function () {
+      var x = { a: { b: 2 } };
+      var m = createAccessorModelProxy();
+      var s = new StructuredSelector({
+         props: {
+            b: undefined,
+         },
+         values: {
+            b: m.a.b,
+         },
+      }).create(x);
+      assert.deepEqual(s(x), { b: 2 });
+   });
 });