cx 26.0.12 → 26.0.14

package/build/ui/createFunctionalComponent.spec.js

@@ -0,0 +1,272 @@
+import { jsx as _jsx, jsxs as _jsxs } from "cx/jsx-runtime";
+import { Store } from "../data/Store";
+import { createFunctionalComponent } from "./createFunctionalComponent";
+import { bind } from "./bind";
+import { expr } from "./expr";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import assert from "assert";
+import { Rescope } from "./Rescope";
+import { LabelsLeftLayout } from "./layout/LabelsLeftLayout";
+import { LabeledContainer } from "../widgets/form/LabeledContainer";
+import { Repeater } from "./Repeater";
+import { FirstVisibleChildLayout } from "./layout/FirstVisibleChildLayout";
+import { useStoreMethods } from "../hooks";
+describe("createFunctionalComponent", () => {
+    it("allows spread", () => {
+        const SuperDiv = createFunctionalComponent(({ ...props }) => {
+            return (_jsx("cx", { children: _jsx("div", { ...props }) }));
+        });
+        let props = {
+            text: "Spread",
+            style: "background: red;",
+        };
+        const widget = (_jsx("cx", { children: _jsx(SuperDiv, { ...props, class: "test" }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            children: ["Spread"],
+            props: {
+                className: "test",
+                style: {
+                    background: "red",
+                },
+            },
+        });
+    });
+    it("visible and Rescope behave as expected", () => {
+        const RootRescope = createFunctionalComponent(({}) => {
+            return (_jsx("cx", { children: _jsx(Rescope, { bind: "x", children: _jsx("div", { text: bind("y") }) }) }));
+        });
+        const widget = (_jsx("cx", { children: _jsx(RootRescope, { visible: expr("!!{x}") }) }));
+        let store = new Store({
+            data: {
+                x: {
+                    y: "OK",
+                },
+            },
+        });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            children: ["OK"],
+            props: {},
+        });
+    });
+    it("visible and multiple items behave as expected", () => {
+        const FComponent = createFunctionalComponent(({}) => {
+            return (_jsxs("cx", { children: [_jsx("div", { children: "1" }), _jsx("div", { visible: false, children: "2" }), _jsx("div", { children: "3" })] }));
+        });
+        const widget = (_jsx("cx", { children: _jsx(FComponent, {}) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, [
+            {
+                type: "div",
+                children: ["1"],
+                props: {},
+            },
+            {
+                type: "div",
+                children: ["3"],
+                props: {},
+            },
+        ]);
+    });
+    it("respects inner layouts", () => {
+        const FComponent = createFunctionalComponent(({}) => {
+            return (_jsxs("cx", { children: [_jsx(LabeledContainer, { label: "Test" }), _jsx(LabeledContainer, { label: "Test" })] }));
+        });
+        const widget = (_jsx("cx", { children: _jsx("div", { layout: LabelsLeftLayout, children: _jsx(FComponent, {}) }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            props: {},
+            children: [
+                {
+                    type: "table",
+                    props: {
+                        className: "cxb-labelsleftlayout",
+                        style: undefined,
+                    },
+                    children: [
+                        {
+                            type: "tbody",
+                            props: {},
+                            children: [
+                                {
+                                    type: "tr",
+                                    props: {},
+                                    children: [
+                                        {
+                                            type: "td",
+                                            props: {
+                                                className: "cxe-labelsleftlayout-label",
+                                                style: undefined,
+                                            },
+                                            children: [
+                                                {
+                                                    type: "label",
+                                                    props: {
+                                                        className: "cxb-label",
+                                                    },
+                                                    children: ["Test"],
+                                                },
+                                            ],
+                                        },
+                                        {
+                                            type: "td",
+                                            props: {
+                                                className: "cxe-labelsleftlayout-field",
+                                            },
+                                            children: null,
+                                        },
+                                    ],
+                                },
+                                {
+                                    type: "tr",
+                                    props: {},
+                                    children: [
+                                        {
+                                            type: "td",
+                                            props: {
+                                                className: "cxe-labelsleftlayout-label",
+                                                style: undefined,
+                                            },
+                                            children: [
+                                                {
+                                                    type: "label",
+                                                    props: {
+                                                        className: "cxb-label",
+                                                    },
+                                                    children: ["Test"],
+                                                },
+                                            ],
+                                        },
+                                        {
+                                            type: "td",
+                                            props: {
+                                                className: "cxe-labelsleftlayout-field",
+                                            },
+                                            children: null,
+                                        },
+                                    ],
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        });
+    });
+    it("can use refs for data bindings", () => {
+        const X = createFunctionalComponent(({}) => {
+            let { ref } = useStoreMethods();
+            let x = ref("x", "OK");
+            return (_jsx("cx", { children: _jsx("div", { text: x }) }));
+        });
+        const widget = (_jsx("cx", { children: _jsx(X, { visible: true }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            children: ["OK"],
+            props: {},
+        });
+    });
+    it("adds children at the right place", () => {
+        const X = createFunctionalComponent(({ children }) => (_jsxs("cx", { children: [_jsx("header", {}), _jsx("main", { children: children }), _jsx("footer", {})] })));
+        const widget = (_jsx("cx", { children: _jsx(X, { children: _jsx("div", {}) }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, [
+            {
+                type: "header",
+                children: null,
+                props: {},
+            },
+            {
+                type: "main",
+                children: [
+                    {
+                        type: "div",
+                        children: null,
+                        props: {},
+                    },
+                ],
+                props: {},
+            },
+            {
+                type: "footer",
+                children: null,
+                props: {},
+            },
+        ]);
+    });
+    it("works well with repeaters", () => {
+        const X = createFunctionalComponent(({}) => {
+            let { ref } = useStoreMethods();
+            let text = ref("$record.text");
+            return (_jsx("cx", { children: _jsx("div", { text: text }) }));
+        });
+        const widget = (_jsx("cx", { children: _jsx(Repeater, { records: bind("array"), children: _jsx(X, {}) }) }));
+        let store = new Store({ data: { array: [{ text: "0" }, { text: "1" }, { text: "2" }] } });
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, [
+            {
+                type: "div",
+                children: ["0"],
+                props: {},
+            },
+            {
+                type: "div",
+                children: ["1"],
+                props: {},
+            },
+            {
+                type: "div",
+                children: ["2"],
+                props: {},
+            },
+        ]);
+        store.update("array", (array) => [array[0], { text: "10" }, array[2]]);
+        tree = component.toJSON();
+        assert.deepEqual(tree, [
+            {
+                type: "div",
+                children: ["0"],
+                props: {},
+            },
+            {
+                type: "div",
+                children: ["10"],
+                props: {},
+            },
+            {
+                type: "div",
+                children: ["2"],
+                props: {},
+            },
+        ]);
+    });
+    it("can have its own layout", () => {
+        const X = createFunctionalComponent(() => (_jsxs("cx", { children: [_jsx("div", { children: "1" }), _jsx("div", { children: "2" }), _jsx("div", { children: "3" })] })));
+        const widget = (_jsx("cx", { children: _jsx(X, { layout: FirstVisibleChildLayout }) }));
+        let store = new Store();
+        const component = createTestRenderer(store, widget);
+        let tree = component.toJSON();
+        assert.deepEqual(tree, {
+            type: "div",
+            children: ["1"],
+            props: {},
+        });
+    });
+});

package/build/ui/expr.d.ts

@@ -1,11 +1,13 @@
 import { AccessorChain } from "../data/createAccessorModelProxy";
 import { Selector } from "../data/Selector";
 import { Expr } from "./Prop";
+type InferAccessorValue<T> = 0 extends 1 & T ? any : T extends AccessorChain<infer V> ? V : never;
 export declare function expr(code: string): Expr;
 export declare function expr<V1, R>(arg1: AccessorChain<V1>, compute: (v1: V1) => R): Selector<R>;
 export declare function expr<V1, V2, R>(arg1: AccessorChain<V1>, arg2: AccessorChain<V2>, compute: (v1: V1, v2: V2) => R): Selector<R>;
 export declare function expr<V1, V2, V3, R>(arg1: AccessorChain<V1>, arg2: AccessorChain<V2>, arg3: AccessorChain<V3>, compute: (v1: V1, v2: V2, v3: V3) => R): Selector<R>;
 export declare function expr<V1, V2, V3, V4, R>(arg1: AccessorChain<V1>, arg2: AccessorChain<V2>, arg3: AccessorChain<V3>, arg4: AccessorChain<V4>, compute: (v1: V1, v2: V2, v3: V3, v4: V4) => R): Selector<R>;
 export declare function expr<T extends AccessorChain<any>[], R>(...args: [...accessors: T, compute: (...values: {
-    [K in keyof T]: T[K] extends AccessorChain<infer V> ? V : never;
+    [K in keyof T]: InferAccessorValue<T[K]>;
 }) => R]): Selector<R>;
+export {};

package/build/ui/exprHelpers.d.ts

@@ -0,0 +1,32 @@
+import { AccessorChain } from "../data/createAccessorModelProxy";
+import { Selector } from "../data/Selector";
+/** Returns a selector that converts the value to boolean using !! */
+export declare function truthy<V>(arg: AccessorChain<V>): Selector<boolean>;
+/** Returns a selector that checks if the value is falsy using ! */
+export declare function falsy<V>(arg: AccessorChain<V>): Selector<boolean>;
+/** Returns a selector that checks if the value is strictly true (=== true) */
+export declare function isTrue(arg: AccessorChain<any>): Selector<boolean>;
+/** Returns a selector that checks if the value is strictly false (=== false) */
+export declare function isFalse(arg: AccessorChain<any>): Selector<boolean>;
+/** Returns a selector that checks if the value is not null or undefined (x != null) */
+export declare function hasValue<V>(arg: AccessorChain<V>): Selector<boolean>;
+/** Returns a selector that checks if a string or array is empty (null, undefined, or length === 0) */
+export declare function isEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean>;
+/** Returns a selector that checks if a string or array is non-empty (not null/undefined and length > 0) */
+export declare function isNonEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean>;
+/** Returns a selector that checks if the value is less than the given value */
+export declare function lessThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean>;
+/** Returns a selector that checks if the value is less than or equal to the given value */
+export declare function lessThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean>;
+/** Returns a selector that checks if the value is greater than the given value */
+export declare function greaterThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean>;
+/** Returns a selector that checks if the value is greater than or equal to the given value */
+export declare function greaterThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean>;
+/** Returns a selector that checks if the value equals the given value using == */
+export declare function equal<V>(arg: AccessorChain<V>, value: V): Selector<boolean>;
+/** Returns a selector that checks if the value does not equal the given value using != */
+export declare function notEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean>;
+/** Returns a selector that checks if the value strictly equals the given value using === */
+export declare function strictEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean>;
+/** Returns a selector that checks if the value strictly does not equal the given value using !== */
+export declare function strictNotEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean>;

package/build/ui/exprHelpers.js

@@ -0,0 +1,61 @@
+import { expr } from "./expr";
+/** Returns a selector that converts the value to boolean using !! */
+export function truthy(arg) {
+    return expr(arg, (x) => !!x);
+}
+/** Returns a selector that checks if the value is falsy using ! */
+export function falsy(arg) {
+    return expr(arg, (x) => !x);
+}
+/** Returns a selector that checks if the value is strictly true (=== true) */
+export function isTrue(arg) {
+    return expr(arg, (x) => x === true);
+}
+/** Returns a selector that checks if the value is strictly false (=== false) */
+export function isFalse(arg) {
+    return expr(arg, (x) => x === false);
+}
+/** Returns a selector that checks if the value is not null or undefined (x != null) */
+export function hasValue(arg) {
+    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) {
+    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) {
+    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(arg, value) {
+    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(arg, value) {
+    return expr(arg, (x) => x <= value);
+}
+/** Returns a selector that checks if the value is greater than the given value */
+export function greaterThan(arg, value) {
+    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(arg, value) {
+    return expr(arg, (x) => x >= value);
+}
+/** Returns a selector that checks if the value equals the given value using == */
+export function equal(arg, value) {
+    return expr(arg, (x) => x == value);
+}
+/** Returns a selector that checks if the value does not equal the given value using != */
+export function notEqual(arg, value) {
+    return expr(arg, (x) => x != value);
+}
+/** Returns a selector that checks if the value strictly equals the given value using === */
+export function strictEqual(arg, value) {
+    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(arg, value) {
+    return expr(arg, (x) => x !== value);
+}

package/build/ui/index.d.ts

@@ -36,6 +36,7 @@ export * from "./adapter/index";
 export * from "./bind";
 export * from "./tpl";
 export * from "./expr";
+export * from "./exprHelpers";
 import { computable } from "../data/computable";
 import { createAccessorModelProxy, AccessorChain } from "../data/createAccessorModelProxy";
 export { computable, createAccessorModelProxy, AccessorChain };

package/build/ui/index.js

@@ -36,6 +36,7 @@ export * from "./adapter/index";
 export * from "./bind";
 export * from "./tpl";
 export * from "./expr";
+export * from "./exprHelpers";
 //re-export computable here
 import { computable } from "../data/computable";
 import { createAccessorModelProxy } from "../data/createAccessorModelProxy";

package/build/ui/layout/ContentPlaceholder.spec.d.ts

@@ -0,0 +1 @@
+export {};