cx 26.1.2 → 26.1.4

package/src/ui/exprHelpers.ts

@@ -1,78 +1,95 @@
-import { AccessorChain } from "../data/createAccessorModelProxy";
-import { Selector } from "../data/Selector";
-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);
-}
+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));
+}

package/src/ui/flattenProps.ts

@@ -1,21 +1,21 @@
-export const flattenProps = (props: any): any => {
-
-   if (!props) return {};
-
-   if (props.jsxSpread) {
-      props = {
-         ...props,
-         ...props.jsxSpread.reduce((acc: any, prop: any) => Object.assign(acc, prop), {})
-      };
-   }
-
-   if (props.$props !== undefined) {
-      props = {
-         ...props.$props,
-         jsxAttributes: props.jsxAttributes,
-         children: props.children
-      };
-   }
-
-   return {...props};
-};
+export const flattenProps = (props: any): any => {
+
+   if (!props) return {};
+
+   if (props.jsxSpread) {
+      props = {
+         ...props,
+         ...props.jsxSpread.reduce((acc: any, prop: any) => Object.assign(acc, prop), {})
+      };
+   }
+
+   if (props.$props !== undefined) {
+      props = {
+         ...props.$props,
+         jsxAttributes: props.jsxAttributes,
+         children: props.children
+      };
+   }
+
+   return {...props};
+};

package/src/ui/index.scss

@@ -1,2 +1,2 @@
-
-@import 'layout/index';
+
+@import 'layout/index';

package/src/ui/index.ts

@@ -1,47 +1,47 @@
-export * from "./Prop";
-export * from "./Controller";
-export * from "./Widget";
-export * from "./Container";
-export * from "./PureContainer";
-export * from "./Repeater";
-export * from "./Rescope";
-export * from "./StaticText";
-export * from "./Text";
-export * from "./CSS";
-export * from "./CSSHelper";
-export * from "./FocusManager";
-export * from "./ResizeManager";
-export * from "./ZIndexManager";
-export * from "./Format";
-export * from "./Culture";
-export * from "./Localization";
-export * from "./Cx";
-export * from "./Instance";
-export * from "./RenderingContext";
-export * from "./ContentResolver";
-export * from "./batchUpdates";
-export * from "./IsolatedScope";
-export * from "./DetachedScope";
-export * from "./Restate";
-export * from "./DataProxy";
-export * from "./keyboardShortcuts";
-export * from "./StructuredInstanceDataAccessor";
-export * from "./HoverSync";
-
-export * from "./createFunctionalComponent";
-export * from "./flattenProps";
-
-export * from "./selection/index";
-export * from "./layout/index";
-export * from "./app/index";
-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, AccessorChain } from "../data/createAccessorModelProxy";
-export { computable, createAccessorModelProxy, AccessorChain };
+export * from "./Prop";
+export * from "./Controller";
+export * from "./Widget";
+export * from "./Container";
+export * from "./PureContainer";
+export * from "./Repeater";
+export * from "./Rescope";
+export * from "./StaticText";
+export * from "./Text";
+export * from "./CSS";
+export * from "./CSSHelper";
+export * from "./FocusManager";
+export * from "./ResizeManager";
+export * from "./ZIndexManager";
+export * from "./Format";
+export * from "./Culture";
+export * from "./Localization";
+export * from "./Cx";
+export * from "./Instance";
+export * from "./RenderingContext";
+export * from "./ContentResolver";
+export * from "./batchUpdates";
+export * from "./IsolatedScope";
+export * from "./DetachedScope";
+export * from "./Restate";
+export * from "./DataProxy";
+export * from "./keyboardShortcuts";
+export * from "./StructuredInstanceDataAccessor";
+export * from "./HoverSync";
+
+export * from "./createFunctionalComponent";
+export * from "./flattenProps";
+
+export * from "./selection/index";
+export * from "./layout/index";
+export * from "./app/index";
+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, AccessorChain } from "../data/createAccessorModelProxy";
+export { computable, createAccessorModelProxy, AccessorChain };

package/src/ui/keyboardShortcuts.ts

@@ -1,40 +1,40 @@
-import { SubscriberList } from "../util/SubscriberList";
-import { isObject } from "../util/isObject";
-
-interface KeyDescriptor {
-   keyCode: number;
-   shiftKey?: boolean;
-   ctrlKey?: boolean;
-   altKey?: boolean;
-}
-
-export type KeyboardShortcut = number | KeyDescriptor;
-
-let subscribers: any, eventBan = 0;
-
-export function executeKeyboardShortcuts(e: KeyboardEvent) {
-   if (Date.now() < eventBan) return;
-   // Avoid duplicate executions as event.stopPropagation() for React events does not stop native events
-   eventBan = Date.now() + 5;
-   subscribers && subscribers.notify(e);
-}
-
-export function registerKeyboardShortcut(key: number | KeyDescriptor, callback: (e: KeyboardEvent) => void) {
-   const keyCode = isObject(key) ? (key as KeyDescriptor).keyCode : key;
-   const shiftKey = isObject(key) ? (key as KeyDescriptor).shiftKey : false;
-   const ctrlKey = isObject(key) ? (key as KeyDescriptor).ctrlKey : false;
-   const altKey = isObject(key) ? (key as KeyDescriptor).altKey : false;
-
-   if (!subscribers) {
-      subscribers = new SubscriberList();
-      document.addEventListener("keydown", (e: any) => {
-         if (e.target == document.body)
-            executeKeyboardShortcuts(e);
-      });
-   }
-
-   return subscribers.subscribe((e: any) => {
-      if (e.keyCode == keyCode && (!shiftKey || e.shiftKey) && (!ctrlKey || e.ctrlKey) && (!altKey || e.altKey))
-         callback(e);
-   });
-}
+import { SubscriberList } from "../util/SubscriberList";
+import { isObject } from "../util/isObject";
+
+interface KeyDescriptor {
+   keyCode: number;
+   shiftKey?: boolean;
+   ctrlKey?: boolean;
+   altKey?: boolean;
+}
+
+export type KeyboardShortcut = number | KeyDescriptor;
+
+let subscribers: any, eventBan = 0;
+
+export function executeKeyboardShortcuts(e: KeyboardEvent) {
+   if (Date.now() < eventBan) return;
+   // Avoid duplicate executions as event.stopPropagation() for React events does not stop native events
+   eventBan = Date.now() + 5;
+   subscribers && subscribers.notify(e);
+}
+
+export function registerKeyboardShortcut(key: number | KeyDescriptor, callback: (e: KeyboardEvent) => void) {
+   const keyCode = isObject(key) ? (key as KeyDescriptor).keyCode : key;
+   const shiftKey = isObject(key) ? (key as KeyDescriptor).shiftKey : false;
+   const ctrlKey = isObject(key) ? (key as KeyDescriptor).ctrlKey : false;
+   const altKey = isObject(key) ? (key as KeyDescriptor).altKey : false;
+
+   if (!subscribers) {
+      subscribers = new SubscriberList();
+      document.addEventListener("keydown", (e: any) => {
+         if (e.target == document.body)
+            executeKeyboardShortcuts(e);
+      });
+   }
+
+   return subscribers.subscribe((e: any) => {
+      if (e.keyCode == keyCode && (!shiftKey || e.shiftKey) && (!ctrlKey || e.ctrlKey) && (!altKey || e.altKey))
+         callback(e);
+   });
+}

package/src/ui/layout/Content.ts

@@ -1,30 +1,30 @@
-import { Widget } from "../Widget";
-import { PureContainerBase, PureContainerConfig } from "../PureContainer";
-import { Instance } from "../Instance";
-
-export interface ContentConfig extends PureContainerConfig {
-   /** Placeholder name where the content is rendered. */
-   name?: string;
-
-   /** Placeholder name where the content is rendered. */
-   for?: string;
-}
-
-export class Content extends PureContainerBase<ContentConfig, Instance> {
-   declare name?: string;
-   declare for?: string;
-
-   constructor(config?: ContentConfig) {
-      super(config);
-   }
-
-   init(): void {
-      super.init();
-      if (!this.putInto) this.putInto = this.for || this.name;
-   }
-}
-
-Content.prototype.name = "body";
-Content.prototype.isContent = true;
-
-Widget.alias("content", Content);
+import { Widget } from "../Widget";
+import { PureContainerBase, PureContainerConfig } from "../PureContainer";
+import { Instance } from "../Instance";
+
+export interface ContentConfig extends PureContainerConfig {
+   /** Placeholder name where the content is rendered. */
+   name?: string;
+
+   /** Placeholder name where the content is rendered. */
+   for?: string;
+}
+
+export class Content extends PureContainerBase<ContentConfig, Instance> {
+   declare name?: string;
+   declare for?: string;
+
+   constructor(config?: ContentConfig) {
+      super(config);
+   }
+
+   init(): void {
+      super.init();
+      if (!this.putInto) this.putInto = this.for || this.name;
+   }
+}
+
+Content.prototype.name = "body";
+Content.prototype.isContent = true;
+
+Widget.alias("content", Content);