cx 26.1.4 → 26.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "26.1.4",
+   "version": "26.1.5",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "exports": {
       "./data": {

package/src/ui/exprHelpers.ts

@@ -1,95 +1,96 @@
-import { AccessorChain } from "../data/createAccessorModelProxy";
-import { Selector } from "../data/Selector";
-import { Format } from "../util/Format";
-import { expr } from "./expr";
-
-/** Returns a selector that converts the value to boolean using !! */
-export function truthy<V>(arg: AccessorChain<V>): Selector<boolean> {
-   return expr(arg, (x) => !!x);
-}
-
-/** Returns a selector that checks if the value is falsy using ! */
-export function falsy<V>(arg: AccessorChain<V>): Selector<boolean> {
-   return expr(arg, (x) => !x);
-}
-
-/** Returns a selector that checks if the value is strictly true (=== true) */
-export function isTrue(arg: AccessorChain<any>): Selector<boolean> {
-   return expr(arg, (x) => x === true);
-}
-
-/** Returns a selector that checks if the value is strictly false (=== false) */
-export function isFalse(arg: AccessorChain<any>): Selector<boolean> {
-   return expr(arg, (x) => x === false);
-}
-
-/** Returns a selector that checks if the value is not null or undefined (x != null) */
-export function hasValue<V>(arg: AccessorChain<V>): Selector<boolean> {
-   return expr(arg, (x) => x != null);
-}
-
-/** Returns a selector that checks if a string or array is empty (null, undefined, or length === 0) */
-export function isEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean> {
-   return expr(arg, (x) => x == null || x.length === 0);
-}
-
-/** Returns a selector that checks if a string or array is non-empty (not null/undefined and length > 0) */
-export function isNonEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean> {
-   return expr(arg, (x) => x != null && x.length > 0);
-}
-
-/** Returns a selector that checks if the value is less than the given value */
-export function lessThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x < value);
-}
-
-/** Returns a selector that checks if the value is less than or equal to the given value */
-export function lessThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x <= value);
-}
-
-/** Returns a selector that checks if the value is greater than the given value */
-export function greaterThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x > value);
-}
-
-/** Returns a selector that checks if the value is greater than or equal to the given value */
-export function greaterThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x >= value);
-}
-
-/** Returns a selector that checks if the value equals the given value using == */
-export function equal<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x == value);
-}
-
-/** Returns a selector that checks if the value does not equal the given value using != */
-export function notEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x != value);
-}
-
-/** Returns a selector that checks if the value strictly equals the given value using === */
-export function strictEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x === value);
-}
-
-/** Returns a selector that checks if the value strictly does not equal the given value using !== */
-export function strictNotEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x !== value);
-}
-
-/** Returns a selector that formats the value using the specified format string.
- * Format strings use semicolon-separated syntax: "formatType;param1;param2"
- * @param arg - The accessor chain to the value
- * @param fmt - The format string
- * @param nullText - Optional text to display for null/undefined values
- * @example
- * format(m.price, "n;2") // formats as number with 2 decimal places
- * format(m.date, "d") // formats as date
- * format(m.value, "p;0;2") // formats as percentage with 0-2 decimal places
- * format(m.value, "n;2", "N/A") // shows "N/A" for null values
- */
-export function format<V>(arg: AccessorChain<V>, fmt: string, nullText?: string): Selector<string> {
-   let f = nullText != null ? `${fmt}|${nullText}` : fmt;
-   return expr(arg, (x) => Format.value(x, f));
-}
+import { computable } from "../data/computable";
+import { AccessorChain } from "../data/createAccessorModelProxy";
+import { Selector } from "../data/Selector";
+import { Format } from "../util/Format";
+import { expr } from "./expr";
+
+/** Returns a selector that converts the value to boolean using !! */
+export function truthy<V>(arg: AccessorChain<V>): Selector<boolean> {
+   return expr(arg, (x) => !!x);
+}
+
+/** Returns a selector that checks if the value is falsy using ! */
+export function falsy<V>(arg: AccessorChain<V>): Selector<boolean> {
+   return expr(arg, (x) => !x);
+}
+
+/** Returns a selector that checks if the value is strictly true (=== true) */
+export function isTrue(arg: AccessorChain<any>): Selector<boolean> {
+   return expr(arg, (x) => x === true);
+}
+
+/** Returns a selector that checks if the value is strictly false (=== false) */
+export function isFalse(arg: AccessorChain<any>): Selector<boolean> {
+   return expr(arg, (x) => x === false);
+}
+
+/** Returns a selector that checks if the value is not null or undefined (x != null) */
+export function hasValue<V>(arg: AccessorChain<V>): Selector<boolean> {
+   return expr(arg, (x) => x != null);
+}
+
+/** Returns a selector that checks if a string or array is empty (null, undefined, or length === 0) */
+export function isEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean> {
+   return expr(arg, (x) => x == null || x.length === 0);
+}
+
+/** Returns a selector that checks if a string or array is non-empty (not null/undefined and length > 0) */
+export function isNonEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean> {
+   return expr(arg, (x) => x != null && x.length > 0);
+}
+
+/** Returns a selector that checks if the value is less than the given value */
+export function lessThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x < value);
+}
+
+/** Returns a selector that checks if the value is less than or equal to the given value */
+export function lessThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x <= value);
+}
+
+/** Returns a selector that checks if the value is greater than the given value */
+export function greaterThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x > value);
+}
+
+/** Returns a selector that checks if the value is greater than or equal to the given value */
+export function greaterThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x >= value);
+}
+
+/** Returns a selector that checks if the value equals the given value using == */
+export function equal<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x == value);
+}
+
+/** Returns a selector that checks if the value does not equal the given value using != */
+export function notEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x != value);
+}
+
+/** Returns a selector that checks if the value strictly equals the given value using === */
+export function strictEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x === value);
+}
+
+/** Returns a selector that checks if the value strictly does not equal the given value using !== */
+export function strictNotEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x !== value);
+}
+
+/** Returns a selector that formats the value using the specified format string.
+ * Format strings use semicolon-separated syntax: "formatType;param1;param2"
+ * @param arg - The accessor chain to the value
+ * @param fmt - The format string
+ * @param nullText - Optional text to display for null/undefined values
+ * @example
+ * format(m.price, "n;2") // formats as number with 2 decimal places
+ * format(m.date, "d") // formats as date
+ * format(m.value, "p;0;2") // formats as percentage with 0-2 decimal places
+ * format(m.value, "n;2", "N/A") // shows "N/A" for null values
+ */
+export function format<V>(arg: AccessorChain<V>, fmt: string, nullText?: string): Selector<string> {
+   let f = nullText != null ? `${fmt}|${nullText}` : fmt;
+   return computable(arg, (x) => Format.value(x, f));
+}

package/src/ui/tpl.spec.ts

@@ -0,0 +1,69 @@
+import { tpl } from "./tpl";
+import assert from "assert";
+import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
+
+interface Model {
+   firstName: string;
+   lastName: string;
+   age: number;
+   city: string;
+}
+
+describe("tpl", function () {
+   const m = createAccessorModelProxy<Model>();
+
+   describe("string-only form", function () {
+      it("returns a tpl object", function () {
+         const result = tpl("{firstName} {lastName}");
+         assert.deepStrictEqual(result, { tpl: "{firstName} {lastName}" });
+      });
+   });
+
+   describe("accessor chain form", function () {
+      it("formats with a single accessor", function () {
+         const selector = tpl(m.firstName, "Hello, {0}!");
+         assert.strictEqual(selector({ firstName: "John" }), "Hello, John!");
+      });
+
+      it("formats with two accessors", function () {
+         const selector = tpl(m.firstName, m.lastName, "{0} {1}");
+         assert.strictEqual(selector({ firstName: "John", lastName: "Doe" }), "John Doe");
+      });
+
+      it("formats with three accessors", function () {
+         const selector = tpl(m.firstName, m.lastName, m.age, "{0} {1} is {2} years old");
+         assert.strictEqual(
+            selector({ firstName: "John", lastName: "Doe", age: 30 }),
+            "John Doe is 30 years old",
+         );
+      });
+
+      it("formats with four accessors", function () {
+         const selector = tpl(m.firstName, m.lastName, m.age, m.city, "{0} {1}, {2}, from {3}");
+         assert.strictEqual(
+            selector({ firstName: "John", lastName: "Doe", age: 30, city: "NYC" }),
+            "John Doe, 30, from NYC",
+         );
+      });
+
+      it("handles null values", function () {
+         const selector = tpl(m.firstName, m.lastName, "{0} {1}");
+         assert.strictEqual(selector({ firstName: "John", lastName: null }), "John ");
+      });
+
+      it("handles undefined values", function () {
+         const selector = tpl(m.firstName, m.lastName, "{0} {1}");
+         assert.strictEqual(selector({ firstName: undefined, lastName: "Doe" }), " Doe");
+      });
+
+      it("supports formatting in template", function () {
+         const selector = tpl(m.age, "Age: {0:n;0}");
+         assert.strictEqual(selector({ age: 30 }), "Age: 30");
+      });
+
+      it("supports null text in template", function () {
+         const selector = tpl(m.firstName, "Name: {0|N/A}");
+         assert.strictEqual(selector({ firstName: null }), "Name: N/A");
+      });
+   });
+});

package/src/ui/tpl.ts

@@ -1,5 +1,18 @@
-export function tpl(text: string) {
-   return {
-      tpl: text
-   }
+import { computable, ComputableSelector } from "../data/computable";
+import { MemoSelector } from "../data/Selector";
+import { StringTemplate } from "../data/StringTemplate";
+import { Tpl } from "./Prop";
+
+export function tpl(text: string): Tpl;
+export function tpl<T extends ComputableSelector[]>(...args: [...T, string]): MemoSelector<string>;
+export function tpl(...args: any[]): any {
+   if (args.length === 1)
+      return {
+         tpl: args[0],
+      };
+
+   let template = args[args.length - 1];
+   let formatter = StringTemplate.get(template);
+   let selectors = args.slice(0, -1);
+   return computable(...selectors, (...values: any[]) => formatter(values));
 }