cx 23.2.1 → 23.3.1

package/dist/util.js

@@ -587,7 +587,7 @@ function parseStyle(str) {
 
 function quoteStr(str) {
 	if (str == null) return str;
-	return "'" + str.replace(/'/g, "\\i") + "'";
+	return JSON.stringify(str);
 }
 
 function findScrollableParent(sourceEl, horizontal) {

package/dist/widgets.js

@@ -11709,7 +11709,7 @@ var Input$1 = /*#__PURE__*/ (function(_VDOM$Component) {
 			var decimalSeparator = this.getDecimalSeparator(fmt) || Format.value(1.1, "n;1")[1];
 			var formatted = Format.value(value, fmt); //re-parse to avoid differences between formatted value and value in the store
 
-			value = widget.parseValue(formatted, instance) * data.scale + data.offset; //allow users to type numbers like 100.0003 without interruptions
+			value = widget.parseValue(formatted, instance) * data.scale + data.offset; //allow users to type numbers like 100.0003 or -0.05 without interruptions
 			//if the last typed in character is zero or dot (decimal separator) skip processing it
 
 			if (
@@ -11717,7 +11717,8 @@ var Input$1 = /*#__PURE__*/ (function(_VDOM$Component) {
 				this.input.selectionStart == this.input.selectionEnd &&
 				this.input.selectionEnd >= this.getLengthWithoutSuffix(this.input.value, decimalSeparator) &&
 				(e.target.value[this.input.selectionEnd - 1] == decimalSeparator ||
-					(e.target.value.indexOf(decimalSeparator) >= 0 && e.target.value[this.input.selectionEnd - 1] == "0"))
+					(e.target.value.indexOf(decimalSeparator) >= 0 && e.target.value[this.input.selectionEnd - 1] == "0") ||
+					(this.input.selectionEnd == 2 && e.target.value[0] === "-" && e.target.value[1] === "0"))
 			)
 				return;
 

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "23.2.1",
+   "version": "23.3.1",
    "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/StringTemplate.js

@@ -1,68 +1,59 @@
-import {expression} from './Expression';
+import { expression } from "./Expression";
 
-import {quoteStr} from '../util/quote';
+import { quoteStr } from "../util/quote";
 
 function plus(str) {
-   return str.length ? str + ' + ' : str;
+   return str.length ? str + " + " : str;
 }
 
-var tplCache = {};
+let tplCache = {};
 
 export function stringTemplate(str) {
+   let expr = tplCache[str];
+   if (expr) return expr;
 
-   var expr = tplCache[str];
-   if (expr)
-      return expr;
+   expr = "";
 
-   expr = '';
-
-   var termStart = -1,
+   let termStart = -1,
       quoteStart = 0,
       term,
       bracketsOpen = 0,
       percentSign;
 
-   for (var i = 0; i < str.length; i++) {
-      var c = str[i];
+   for (let i = 0; i < str.length; i++) {
+      let c = str[i];
       switch (c) {
-
-         case '{':
+         case "{":
             if (termStart < 0) {
-               if (str[i + 1] == '{' && str[i - 1] != '%') {
-                  expr = plus(expr) + quoteStr(str.substring(quoteStart, i) + '{');
+               if (str[i + 1] == "{" && str[i - 1] != "%") {
+                  expr = plus(expr) + quoteStr(str.substring(quoteStart, i) + "{");
                   i++;
                   quoteStart = i + 1;
-               }
-               else {
+               } else {
                   termStart = i + 1;
-                  percentSign = str[i - 1] == '%';
-                  if (i > quoteStart)
-                     expr = plus(expr) + quoteStr(str.substring(quoteStart, percentSign ? i-1 : i));
+                  percentSign = str[i - 1] == "%";
+                  if (i > quoteStart) expr = plus(expr) + quoteStr(str.substring(quoteStart, percentSign ? i - 1 : i));
                   bracketsOpen = 1;
                }
-            }
-            else
-               bracketsOpen++;
+            } else bracketsOpen++;
             break;
 
-         case '}':
+         case "}":
             if (termStart >= 0) {
                if (--bracketsOpen == 0) {
                   term = str.substring(termStart, i);
-                  if (term.indexOf(':') == -1) {
-                     let nullSepIndex = term.indexOf('|');
-                     if (nullSepIndex == -1)
-                        term += ':s';
-                     else
-                        term = term.substring(0, nullSepIndex) + ":s" + term.substring(nullSepIndex);
+                  if (term.indexOf(":") == -1) {
+                     let nullSepIndex = term.indexOf("|");
+                     if (nullSepIndex == -1) term += ":s";
+                     else term = term.substring(0, nullSepIndex) + ":s" + term.substring(nullSepIndex);
                   }
-                  expr = plus(expr) + (percentSign ? '%{' : '{') + term + '}';
+                  expr = plus(expr) + (percentSign ? "%{" : "{") + term + "}";
                   termStart = -1;
                   quoteStart = i + 1;
                   bracketsOpen = 0;
                }
-            } else if (str[i + 1] == '}') {
-               expr = plus(expr) + quoteStr(str.substring(quoteStart, i) + '}');
+            } else if (str[i + 1] == "}") {
+               expr = plus(expr) + quoteStr(str.substring(quoteStart, i) + "}");
                i++;
                quoteStart = i + 1;
             }
@@ -70,16 +61,12 @@ export function stringTemplate(str) {
       }
    }
 
-   if (quoteStart < str.length)
-      expr = plus(expr) + quoteStr(str.substring(quoteStart));
-
-   //console.log(expr);
+   if (quoteStart < str.length) expr = plus(expr) + quoteStr(str.substring(quoteStart));
 
-   return tplCache[str] = expression(expr);
+   return (tplCache[str] = expression(expr));
 }
 
 export const StringTemplate = {
-
    get: function (str) {
       return stringTemplate(str);
    },
@@ -90,9 +77,9 @@ export const StringTemplate = {
 
    format: function (format, ...args) {
       return stringTemplate(format)(args);
-   }
-}
+   },
+};
 
 export function invalidateStringTemplateCache() {
    tplCache = {};
-}
+}

package/src/data/StringTemplate.spec.js

@@ -1,82 +1,95 @@
-import {StringTemplate} from './StringTemplate';
-import assert from 'assert';
+import { StringTemplate } from "./StringTemplate";
+import assert from "assert";
 
-describe('StringTemplate', function() {
-    describe('#compile()', function () {
-        it('returns a selector', function () {
-           var e = StringTemplate.compile('Hello {person.name}');
-           var state = {
-               person: {
-                  name: 'Jim'
-               }
-            };
-            assert.equal(e(state), 'Hello Jim');
-        });
-    });
+describe("StringTemplate", function () {
+   describe("#compile()", function () {
+      it("returns a selector", function () {
+         var e = StringTemplate.compile("Hello {person.name}");
+         var state = {
+            person: {
+               name: "Jim",
+            },
+         };
+         assert.equal(e(state), "Hello Jim");
+      });
+
+      it("properly encodes ' and \"", function () {
+         var e = StringTemplate.compile('It\'s "working"!');
+         assert.equal(e({}), 'It\'s "working"!');
+      });
+
+      it("supports multi-line strings", function () {
+         var e = StringTemplate.compile("a\nb");
+         assert.equal(e(), "a\nb");
+
+         var e = StringTemplate.compile("a\r\nb");
+         assert.equal(e(), "a\r\nb");
+      });
+   });
 
-   describe('double brackets are used to escape brackets', function() {
-      it('double brackets are preserved', function () {
-         var e = StringTemplate.compile('Hello {{person.name}}');
+   describe("double brackets are used to escape brackets", function () {
+      it("double brackets are preserved", function () {
+         var e = StringTemplate.compile("Hello {{person.name}}");
          var state = {
             person: {
-               name: 'Jim'
-            }
+               name: "Jim",
+            },
          };
-         assert.equal(e(state), 'Hello {person.name}');
+         assert.equal(e(state), "Hello {person.name}");
       });
 
-      it('triple brackets are converted to single brackets and a binding', function () {
-         var e = StringTemplate.compile('Hello {{{person.name}}}');
+      it("triple brackets are converted to single brackets and a binding", function () {
+         var e = StringTemplate.compile("Hello {{{person.name}}}");
          var state = {
             person: {
-               name: 'Jim'
-            }
+               name: "Jim",
+            },
          };
-         assert.equal(e(state), 'Hello {Jim}');
+         assert.equal(e(state), "Hello {Jim}");
       });
    });
 
-   describe('supports formatting', function() {
-      it('with colon', function () {
-         var e = StringTemplate.compile('{str:suffix;kg}');
-         assert.equal(e({ str: '5'}), '5kg');
+   describe("supports formatting", function () {
+      it("with colon", function () {
+         var e = StringTemplate.compile("{str:suffix;kg}");
+         assert.equal(e({ str: "5" }), "5kg");
       });
 
-      it('with multiple formats', function () {
-         var e = StringTemplate.compile('{str:suffix;kg:wrap;(;)}');
-         assert.equal(e({ str: '5'}), '(5kg)');
+      it("with multiple formats", function () {
+         var e = StringTemplate.compile("{str:suffix;kg:wrap;(;)}");
+         assert.equal(e({ str: "5" }), "(5kg)");
       });
 
       it("with null values", function () {
-         var e = StringTemplate.compile('{str:suffix;kg:|N/A}');
-         assert.equal(e({ str: null}), 'N/A');
+         var e = StringTemplate.compile("{str:suffix;kg:|N/A}");
+         assert.equal(e({ str: null }), "N/A");
       });
 
       it("of null values", function () {
-         var e = StringTemplate.compile('{str|N/A}');
-         assert.equal(e({ str: null}), 'N/A');
+         var e = StringTemplate.compile("{str|N/A}");
+         assert.equal(e({ str: null }), "N/A");
       });
    });
 
-   describe('supports expressions', function() {
-      it('using []', function () {
-         var e = StringTemplate.compile('1 + 2 = {[1+2]}');
-         assert.equal(e(), '1 + 2 = 3');
+   describe("supports expressions", function () {
+      it("using []", function () {
+         var e = StringTemplate.compile("1 + 2 = {[1+2]}");
+         assert.equal(e(), "1 + 2 = 3");
       });
 
-      it('using %', function () {
-         var e = StringTemplate.compile('1 + 2 = %{1+2}');
-         assert.equal(e(), '1 + 2 = 3');
+      it("using %", function () {
+         var e = StringTemplate.compile("1 + 2 = %{1+2}");
+         assert.equal(e(), "1 + 2 = 3");
       });
 
-      it('with subexpressions', function () {
-         var e = StringTemplate.compile('1 + 2 = {[%{1+2}]}');
-         assert.equal(e(), '1 + 2 = 3');
+      it("with subexpressions", function () {
+         var e = StringTemplate.compile("1 + 2 = {[%{1+2}]}");
+         assert.equal(e(), "1 + 2 = 3");
       });
 
-      it('with a conditional operator', function () {
-         var e = StringTemplate.compile('1 + 2 = {[true ? 3 : 2]:s}');
-         assert.equal(e(), '1 + 2 = 3');
+      it("with a conditional operator", function () {
+         var e = StringTemplate.compile("1 + 2 = {[true ? 3 : 2]:s}");
+         assert.equal(e(), "1 + 2 = 3");
       });
    });
 });

package/src/data/computable.d.ts

@@ -21,6 +21,44 @@ export function computable(
    p4: string,
    computeFn: (v1: any, v2: any, v3: any, v4: any) => any
 ): Computable;
+export function computable(
+   p1: string,
+   p2: string,
+   p3: string,
+   p4: string,
+   p5: string,
+   computeFn: (v1: any, v2: any, v3: any, v4: any, v5: any) => any
+): Computable;
+export function computable(
+   p1: string,
+   p2: string,
+   p3: string,
+   p4: string,
+   p5: string,
+   p6: string,
+   computeFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any) => any
+): Computable;
+export function computable(
+   p1: string,
+   p2: string,
+   p3: string,
+   p4: string,
+   p5: string,
+   p6: string,
+   p7: string,
+   computeFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any, v7: any) => any
+): Computable;
+export function computable(
+   p1: string,
+   p2: string,
+   p3: string,
+   p4: string,
+   p5: string,
+   p6: string,
+   p7: string,
+   p8: string,
+   computeFn: (v1: any, v2: any, v3: any, v4: any, v5: any, v6: any, v7: any, v8: any) => any
+): Computable;
 
 export function computable<V1, R>(arg1: AccessorChain<V1>, compute: (v1: V1) => R): Computable<R>;
 export function computable<V1, V2, R>(
@@ -43,3 +81,45 @@ export function computable<V1, V2, V3, V4, R>(
    arg4: AccessorChain<V4>,
    compute: (v1: V1, v2: V2, v3: V3, v4: V4) => R
 ): Computable<R>;
+
+export function computable<V1, V2, V3, V4, V5, R>(
+   arg1: AccessorChain<V1>,
+   arg2: AccessorChain<V2>,
+   arg3: AccessorChain<V3>,
+   arg4: AccessorChain<V4>,
+   arg5: AccessorChain<V5>,
+   compute: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5) => R
+): Computable<R>;
+
+export function computable<V1, V2, V3, V4, V5, V6, R>(
+   arg1: AccessorChain<V1>,
+   arg2: AccessorChain<V2>,
+   arg3: AccessorChain<V3>,
+   arg4: AccessorChain<V4>,
+   arg5: AccessorChain<V5>,
+   arg6: AccessorChain<V6>,
+   compute: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5, v6: V6) => R
+): Computable<R>;
+
+export function computable<V1, V2, V3, V4, V5, V6, V7, R>(
+   arg1: AccessorChain<V1>,
+   arg2: AccessorChain<V2>,
+   arg3: AccessorChain<V3>,
+   arg4: AccessorChain<V4>,
+   arg5: AccessorChain<V5>,
+   arg6: AccessorChain<V6>,
+   arg7: AccessorChain<V7>,
+   compute: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5, v6: V6, v7: V7) => R
+): Computable<R>;
+
+export function computable<V1, V2, V3, V4, V5, V6, V7, V8, R>(
+   arg1: AccessorChain<V1>,
+   arg2: AccessorChain<V2>,
+   arg3: AccessorChain<V3>,
+   arg4: AccessorChain<V4>,
+   arg5: AccessorChain<V5>,
+   arg6: AccessorChain<V6>,
+   arg7: AccessorChain<V7>,
+   arg8: AccessorChain<V8>,
+   compute: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5, v6: V6, v7: V7, v8: V8) => R
+): Computable<R>;

package/src/ui/Controller.d.ts

@@ -37,6 +37,60 @@ export class Controller<D = any> {
       callback: (v1: V1, v2: V2, v3: V3, v4: V4) => void,
       autoRun?: boolean
    ): void;
+   addTrigger<V1, V2, V3, V4, V5>(
+      name: string,
+      args: [
+         Cx.AccessorChain<V1>,
+         Cx.AccessorChain<V2>,
+         Cx.AccessorChain<V3>,
+         Cx.AccessorChain<V4>,
+         Cx.AccessorChain<V5>
+      ],
+      callback: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5) => void,
+      autoRun?: boolean
+   ): void;
+   addTrigger<V1, V2, V3, V4, V5, V6>(
+      name: string,
+      args: [
+         Cx.AccessorChain<V1>,
+         Cx.AccessorChain<V2>,
+         Cx.AccessorChain<V3>,
+         Cx.AccessorChain<V4>,
+         Cx.AccessorChain<V5>,
+         Cx.AccessorChain<V6>
+      ],
+      callback: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5, v6: V6) => void,
+      autoRun?: boolean
+   ): void;
+   addTrigger<V1, V2, V3, V4, V5, V6, V7>(
+      name: string,
+      args: [
+         Cx.AccessorChain<V1>,
+         Cx.AccessorChain<V2>,
+         Cx.AccessorChain<V3>,
+         Cx.AccessorChain<V4>,
+         Cx.AccessorChain<V5>,
+         Cx.AccessorChain<V6>,
+         Cx.AccessorChain<V7>
+      ],
+      callback: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5, v6: V6, v7: V7) => void,
+      autoRun?: boolean
+   ): void;
+   addTrigger<V1, V2, V3, V4, V5, V6, V7, V8>(
+      name: string,
+      args: [
+         Cx.AccessorChain<V1>,
+         Cx.AccessorChain<V2>,
+         Cx.AccessorChain<V3>,
+         Cx.AccessorChain<V4>,
+         Cx.AccessorChain<V5>,
+         Cx.AccessorChain<V6>,
+         Cx.AccessorChain<V7>,
+         Cx.AccessorChain<V8>
+      ],
+      callback: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5, v6: V6, v7: V7, v8: v8) => void,
+      autoRun?: boolean
+   ): void;
 
    addTrigger(
       name: string,
@@ -61,6 +115,56 @@ export class Controller<D = any> {
       args: [Cx.AccessorChain<V1>, Cx.AccessorChain<V2>, Cx.AccessorChain<V3>, Cx.AccessorChain<V4>],
       callback: (v1: V1, v2: V2, v3: V3, v4: V4) => R
    ): void;
+   addComputable<V1, V2, V3, V4, V5, R>(
+      path: Cx.AccessorChain<R>,
+      args: [
+         Cx.AccessorChain<V1>,
+         Cx.AccessorChain<V2>,
+         Cx.AccessorChain<V3>,
+         Cx.AccessorChain<V4>,
+         Cx.AccessorChain<V5>
+      ],
+      callback: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5) => R
+   ): void;
+   addComputable<V1, V2, V3, V4, V5, V6, R>(
+      path: Cx.AccessorChain<R>,
+      args: [
+         Cx.AccessorChain<V1>,
+         Cx.AccessorChain<V2>,
+         Cx.AccessorChain<V3>,
+         Cx.AccessorChain<V4>,
+         Cx.AccessorChain<V5>,
+         Cx.AccessorChain<V6>
+      ],
+      callback: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5, v6: V6) => R
+   ): void;
+   addComputable<V1, V2, V3, V4, V5, V6, V7, R>(
+      path: Cx.AccessorChain<R>,
+      args: [
+         Cx.AccessorChain<V1>,
+         Cx.AccessorChain<V2>,
+         Cx.AccessorChain<V3>,
+         Cx.AccessorChain<V4>,
+         Cx.AccessorChain<V5>,
+         Cx.AccessorChain<V6>,
+         Cx.AccessorChain<V7>
+      ],
+      callback: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5, v6: V6, v7: V7) => R
+   ): void;
+   addComputable<V1, V2, V3, V4, V5, V6, V7, V8, R>(
+      path: Cx.AccessorChain<R>,
+      args: [
+         Cx.AccessorChain<V1>,
+         Cx.AccessorChain<V2>,
+         Cx.AccessorChain<V3>,
+         Cx.AccessorChain<V4>,
+         Cx.AccessorChain<V5>,
+         Cx.AccessorChain<V6>,
+         Cx.AccessorChain<V7>,
+         Cx.AccessorChain<V8>
+      ],
+      callback: (v1: V1, v2: V2, v3: V3, v4: V4, v5: V5, v6: V6, v7: V7, v8: V8) => R
+   ): void;
 
    addComputable(path: string, args: (string | Cx.AccessorChain<any>)[], callback: (...args) => any): void;
 

package/src/util/quote.js

@@ -1,5 +1,4 @@
 export function quoteStr(str) {
-   if (str==null)
-      return str;
-   return "'" + str.replace(/'/g, "\\i") + "'";
+   if (str == null) return str;
+   return JSON.stringify(str);
 }

package/src/widgets/drag-drop/DragSource.d.ts

@@ -30,7 +30,7 @@ interface DragSourceProps extends Cx.StyledContainerProps {
    clone?: Cx.Config;
 
    /** CSS styles to be applied to the clone of the element being dragged. */
-   cloneStyle: Cx.StyleProp;
+   cloneStyle?: Cx.StyleProp;
 
    /** CSS styles to be applied to the element being dragged. */
    draggedStyle: Cx.StyleProp;

package/src/widgets/form/NumberField.js

@@ -417,14 +417,15 @@ class Input extends VDOM.Component {
 
          value = widget.parseValue(formatted, instance) * data.scale + data.offset;
 
-         //allow users to type numbers like 100.0003 without interruptions
+         //allow users to type numbers like 100.0003 or -0.05 without interruptions
          //if the last typed in character is zero or dot (decimal separator) skip processing it
          if (
             change == "change" &&
             this.input.selectionStart == this.input.selectionEnd &&
             this.input.selectionEnd >= this.getLengthWithoutSuffix(this.input.value, decimalSeparator) &&
             (e.target.value[this.input.selectionEnd - 1] == decimalSeparator ||
-               (e.target.value.indexOf(decimalSeparator) >= 0 && e.target.value[this.input.selectionEnd - 1] == "0"))
+               (e.target.value.indexOf(decimalSeparator) >= 0 && e.target.value[this.input.selectionEnd - 1] == "0") ||
+               (this.input.selectionEnd == 2 && e.target.value[0] === "-" && e.target.value[1] === "0"))
          )
             return;