cx 26.0.5 → 26.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "26.0.5",
+   "version": "26.0.8",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "exports": {
       "./data/": "./build/data/",
@@ -19,7 +19,9 @@
       "./charts": "./build/charts/index.js",
       "./jsx-runtime": "./build/jsx-runtime.js",
       "./jsx-runtime.js": "./build/jsx-runtime.js",
-      "./src/": "./build/",
+      "./jsx-dev-runtime": "./build/jsx-runtime.js",
+      "./jsx-dev-runtime.js": "./build/jsx-runtime.js",
+      "./src/": "./src/",
       "./sass/": "./src/",
       "./build/": "./build/",
       "./locale/": "./build/locale/",

package/src/charts/Chart.ts

@@ -1,108 +1,108 @@
-import { Widget, VDOM, getContent } from "../ui/Widget";
-import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance, SvgRenderingContext } from "../svg/BoundedObject";
-import { Axis } from "./axis/Axis";
-import type { NumericAxis } from "./axis/NumericAxis";
-import type { CategoryAxis } from "./axis/CategoryAxis";
-import type { TimeAxis } from "./axis/TimeAxis";
-import { RenderingContext } from "../ui/RenderingContext";
-import { Create } from "../util/Component";
-
-/** Typed context interface for chart-related context properties */
-export interface ChartRenderingContext extends SvgRenderingContext {
-   axes?: Record<string, any>;
-}
-
-export interface ChartConfig extends BoundedObjectConfig {
-   /** Axis definition. Each key represent an axis, and each value hold axis configuration. */
-   axes?: Record<
-      string,
-      Create<typeof Axis> | Create<typeof NumericAxis> | Create<typeof CategoryAxis> | Create<typeof TimeAxis>
-   >;
-
-   /** Put axes over data series. */
-   axesOnTop?: boolean;
-}
-
-export interface ChartInstance extends BoundedObjectInstance {
-   calculators: Record<string, any>;
-   axes: Record<string, any>;
-}
-
-export class Chart extends BoundedObject<ChartConfig, ChartInstance> {
-   declare axes: Record<string, any>;
-   declare axesOnTop: boolean;
-
-   constructor(config?: ChartConfig) {
-      super(config);
-   }
-
-   init(): void {
-      super.init();
-
-      if (!this.axes) this.axes = {};
-
-      for (let axis in this.axes) {
-         this.axes[axis] = Axis.create(this.axes[axis]);
-      }
-   }
-
-   explore(context: ChartRenderingContext, instance: ChartInstance): void {
-      instance.calculators = { ...context.axes };
-
-      context.push("axes", instance.calculators);
-      instance.axes = {};
-
-      //axes need to be registered before children to be processed first
-      for (let axis in this.axes) {
-         let axisInstance = instance.getChild(context, this.axes[axis]);
-         if (axisInstance.scheduleExploreIfVisible(context)) {
-            instance.axes[axis] = axisInstance;
-            instance.calculators[axis] = this.axes[axis].report(context, axisInstance);
-         }
-      }
-
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context: ChartRenderingContext, instance: ChartInstance): void {
-      context.pop("axes");
-
-      for (let axis in instance.axes) {
-         instance.axes[axis].widget.reportData(context, instance.axes[axis]);
-      }
-   }
-
-   prepare(context: ChartRenderingContext, instance: ChartInstance): void {
-      context.push("axes", instance.calculators);
-      super.prepare(context, instance);
-   }
-
-   prepareCleanup(context: ChartRenderingContext, instance: ChartInstance): void {
-      context.pop("axes");
-      super.prepareCleanup(context, instance);
-   }
-
-   render(context: ChartRenderingContext, instance: ChartInstance, key: string): any[] {
-      let axes = [];
-      for (let k in instance.axes) {
-         axes.push(getContent(instance.axes[k].render(context, key + "-axis-" + k)));
-      }
-
-      let result = [];
-
-      if (!this.axesOnTop) result.push(axes);
-
-      result.push(this.renderChildren(context, instance));
-
-      if (this.axesOnTop) result.push(axes);
-
-      return result;
-   }
-}
-
-Chart.prototype.anchors = "0 1 1 0";
-Chart.prototype.styled = true;
-Chart.prototype.isPureContainer = true;
-Chart.prototype.axesOnTop = false;
-
-Widget.alias("chart", Chart);
+import { Widget, VDOM, getContent } from "../ui/Widget";
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance, SvgRenderingContext } from "../svg/BoundedObject";
+import { Axis } from "./axis/Axis";
+import type { NumericAxis } from "./axis/NumericAxis";
+import type { CategoryAxis } from "./axis/CategoryAxis";
+import type { TimeAxis } from "./axis/TimeAxis";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Create } from "../util/Component";
+
+/** Typed context interface for chart-related context properties */
+export interface ChartRenderingContext extends SvgRenderingContext {
+   axes?: Record<string, any>;
+}
+
+export interface ChartConfig extends BoundedObjectConfig {
+   /** Axis definition. Each key represent an axis, and each value hold axis configuration. */
+   axes?: Record<
+      string,
+      Create<typeof Axis> | Create<typeof NumericAxis> | Create<typeof CategoryAxis> | Create<typeof TimeAxis>
+   >;
+
+   /** Put axes over data series. */
+   axesOnTop?: boolean;
+}
+
+export interface ChartInstance extends BoundedObjectInstance {
+   calculators: Record<string, any>;
+   axes: Record<string, any>;
+}
+
+export class Chart extends BoundedObject<ChartConfig, ChartInstance> {
+   declare axes: Record<string, any>;
+   declare axesOnTop: boolean;
+
+   constructor(config?: ChartConfig) {
+      super(config);
+   }
+
+   init(): void {
+      super.init();
+
+      if (!this.axes) this.axes = {};
+
+      for (let axis in this.axes) {
+         this.axes[axis] = Axis.create(this.axes[axis]);
+      }
+   }
+
+   explore(context: ChartRenderingContext, instance: ChartInstance): void {
+      instance.calculators = { ...context.axes };
+
+      context.push("axes", instance.calculators);
+      instance.axes = {};
+
+      //axes need to be registered before children to be processed first
+      for (let axis in this.axes) {
+         let axisInstance = instance.getChild(context, this.axes[axis]);
+         if (axisInstance.scheduleExploreIfVisible(context)) {
+            instance.axes[axis] = axisInstance;
+            instance.calculators[axis] = this.axes[axis].report(context, axisInstance);
+         }
+      }
+
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: ChartRenderingContext, instance: ChartInstance): void {
+      context.pop("axes");
+
+      for (let axis in instance.axes) {
+         instance.axes[axis].widget.reportData(context, instance.axes[axis]);
+      }
+   }
+
+   prepare(context: ChartRenderingContext, instance: ChartInstance): void {
+      context.push("axes", instance.calculators);
+      super.prepare(context, instance);
+   }
+
+   prepareCleanup(context: ChartRenderingContext, instance: ChartInstance): void {
+      context.pop("axes");
+      super.prepareCleanup(context, instance);
+   }
+
+   render(context: ChartRenderingContext, instance: ChartInstance, key: string): any[] {
+      let axes = [];
+      for (let k in instance.axes) {
+         axes.push(getContent(instance.axes[k].render(context, key + "-axis-" + k)));
+      }
+
+      let result = [];
+
+      if (!this.axesOnTop) result.push(axes);
+
+      result.push(this.renderChildren(context, instance));
+
+      if (this.axesOnTop) result.push(axes);
+
+      return result;
+   }
+}
+
+Chart.prototype.anchors = "0 1 1 0";
+Chart.prototype.styled = true;
+Chart.prototype.isPureContainer = true;
+Chart.prototype.axesOnTop = false;
+
+Widget.alias("chart", Chart);

package/src/charts/LineGraph.tsx

@@ -7,6 +7,7 @@ import { Instance } from "../ui/Instance";
 import { RenderingContext } from "../ui/RenderingContext";
 import { NumberProp, BooleanProp, StringProp, RecordsProp, StyleProp } from "../ui/Prop";
 import type { ChartRenderingContext } from "./Chart";
+import { ClassProp } from "../ui/Prop";
 
 interface LinePoint {
    x: number;
@@ -88,6 +89,18 @@ export interface LineGraphConfig extends WidgetConfig {
 
    /** Shape to use in legend. */
    legendShape?: string;
+
+   /**
+    * Additional CSS classes to be applied to the field.
+    * If an object is provided, all keys with a "truthy" value will be added to the CSS class list.
+    */
+   class?: ClassProp;
+
+   /**
+    * Additional CSS classes to be applied to the field.
+    * If an object is provided, all keys with a "truthy" value will be added to the CSS class list.
+    */
+   className?: ClassProp;
 }
 
 export interface LineGraphInstance extends Instance {
@@ -437,5 +450,6 @@ LineGraph.prototype.hiddenBase = false;
 
 LineGraph.prototype.smooth = false;
 LineGraph.prototype.smoothingRatio = 0.05;
+LineGraph.prototype.styled = true;
 
 Widget.alias("line-graph", LineGraph);

package/src/data/ArrayElementView.ts

@@ -1,90 +1,90 @@
-import { AugmentedViewBase } from "./AugmentedViewBase";
-import { isArray } from "../util/isArray";
-import { Binding } from "./Binding";
-import { View } from "./View";
-
-export interface ArrayElementViewConfig {
-   store: View;
-   arrayAccessor: any;
-   immutable?: boolean;
-   recordAlias?: string;
-   indexAlias?: string;
-   lengthAlias?: string;
-   hasNestedAliases?: boolean;
-   recordBinding?: any;
-   indexBinding?: any;
-   lengthBinding?: any;
-   itemIndex: number;
-   sealed?: boolean;
-}
-
-export class ArrayElementView extends AugmentedViewBase {
-   declare arrayAccessor: any;
-   declare recordAlias: string;
-   declare indexAlias: string;
-   declare lengthAlias: string;
-   declare hasNestedAliases?: boolean;
-   declare recordBinding?: any;
-   declare indexBinding?: any;
-   declare lengthBinding?: any;
-   declare itemIndex: number;
-
-   constructor(config: ArrayElementViewConfig) {
-      super(config);
-      this.hasNestedAliases =
-         this.recordAlias.indexOf(".") >= 0 || this.indexAlias.indexOf(".") >= 0 || this.lengthAlias.indexOf(".") >= 0;
-      this.recordBinding = Binding.get(this.recordAlias);
-      if (this.hasNestedAliases) {
-         this.indexBinding = Binding.get(this.indexAlias);
-         this.lengthBinding = Binding.get(this.lengthAlias);
-      }
-   }
-
-   getExtraKeyBinding(key: string): any {
-      if (!key.startsWith(this.recordAlias)) return null;
-      if (key.length == this.recordAlias.length || key[this.recordAlias.length] == ".") return this.recordBinding;
-      return null;
-   }
-
-   deleteExtraKeyValue(key: string): boolean {
-      if (key != this.recordAlias) throw new Error(`Field ${key} cannot be deleted.`);
-      const array = this.arrayAccessor.get(this.store.getData());
-      if (!array) return false;
-      const newArray = [...array.slice(0, this.itemIndex), ...array.slice(this.itemIndex + 1)];
-      return this.arrayAccessor.set(newArray, this.store);
-   }
-
-   setExtraKeyValue(key: string, value: any): boolean {
-      if (key != this.recordAlias) throw new Error(`Field ${key} is read-only.`);
-      const array = this.arrayAccessor.get(this.store.getData());
-      if (!array || value === array[this.itemIndex]) return false;
-      const newArray = [...array.slice(0, this.itemIndex), value, ...array.slice(this.itemIndex + 1)];
-      return this.arrayAccessor.set(newArray, this.store);
-   }
-
-   embedAugmentData(result: any, parentStoreData: any): void {
-      let array = this.arrayAccessor.get(parentStoreData);
-      if (!isArray(array)) return;
-      if (!this.hasNestedAliases) {
-         result[this.recordAlias] = array[this.itemIndex];
-         result[this.indexAlias] = this.itemIndex;
-         result[this.lengthAlias] = array.length;
-      } else {
-         let copy = result;
-         copy = this.recordBinding.set(copy, array[this.itemIndex]);
-         copy = this.indexBinding.set(copy, this.itemIndex);
-         copy = this.lengthBinding.set(copy, array.length);
-         result[this.recordBinding.parts[0]] = copy[this.recordBinding.parts[0]];
-         result[this.indexBinding.parts[0]] = copy[this.indexBinding.parts[0]];
-         result[this.lengthBinding.parts[0]] = copy[this.lengthBinding.parts[0]];
-      }
-   }
-
-   setIndex(itemIndex: number): void {
-      this.itemIndex = itemIndex;
-   }
-}
-
-ArrayElementView.prototype.recordAlias = "$record";
-ArrayElementView.prototype.indexAlias = "$index";
-ArrayElementView.prototype.lengthAlias = "$length";
+import { AugmentedViewBase } from "./AugmentedViewBase";
+import { isArray } from "../util/isArray";
+import { Binding } from "./Binding";
+import { View } from "./View";
+
+export interface ArrayElementViewConfig {
+   store: View;
+   arrayAccessor: any;
+   immutable?: boolean;
+   recordAlias?: string;
+   indexAlias?: string;
+   lengthAlias?: string;
+   hasNestedAliases?: boolean;
+   recordBinding?: any;
+   indexBinding?: any;
+   lengthBinding?: any;
+   itemIndex: number;
+   sealed?: boolean;
+}
+
+export class ArrayElementView extends AugmentedViewBase {
+   declare arrayAccessor: any;
+   declare recordAlias: string;
+   declare indexAlias: string;
+   declare lengthAlias: string;
+   declare hasNestedAliases?: boolean;
+   declare recordBinding?: any;
+   declare indexBinding?: any;
+   declare lengthBinding?: any;
+   declare itemIndex: number;
+
+   constructor(config: ArrayElementViewConfig) {
+      super(config);
+      this.hasNestedAliases =
+         this.recordAlias.indexOf(".") >= 0 || this.indexAlias.indexOf(".") >= 0 || this.lengthAlias.indexOf(".") >= 0;
+      this.recordBinding = Binding.get(this.recordAlias);
+      if (this.hasNestedAliases) {
+         this.indexBinding = Binding.get(this.indexAlias);
+         this.lengthBinding = Binding.get(this.lengthAlias);
+      }
+   }
+
+   getExtraKeyBinding(key: string): any {
+      if (!key.startsWith(this.recordAlias)) return null;
+      if (key.length == this.recordAlias.length || key[this.recordAlias.length] == ".") return this.recordBinding;
+      return null;
+   }
+
+   deleteExtraKeyValue(key: string): boolean {
+      if (key != this.recordAlias) throw new Error(`Field ${key} cannot be deleted.`);
+      const array = this.arrayAccessor.get(this.store.getData());
+      if (!array) return false;
+      const newArray = [...array.slice(0, this.itemIndex), ...array.slice(this.itemIndex + 1)];
+      return this.arrayAccessor.set(newArray, this.store);
+   }
+
+   setExtraKeyValue(key: string, value: any): boolean {
+      if (key != this.recordAlias) throw new Error(`Field ${key} is read-only.`);
+      const array = this.arrayAccessor.get(this.store.getData());
+      if (!array || value === array[this.itemIndex]) return false;
+      const newArray = [...array.slice(0, this.itemIndex), value, ...array.slice(this.itemIndex + 1)];
+      return this.arrayAccessor.set(newArray, this.store);
+   }
+
+   embedAugmentData(result: any, parentStoreData: any): void {
+      let array = this.arrayAccessor.get(parentStoreData);
+      if (!isArray(array)) return;
+      if (!this.hasNestedAliases) {
+         result[this.recordAlias] = array[this.itemIndex];
+         result[this.indexAlias] = this.itemIndex;
+         result[this.lengthAlias] = array.length;
+      } else {
+         let copy = result;
+         copy = this.recordBinding.set(copy, array[this.itemIndex]);
+         copy = this.indexBinding.set(copy, this.itemIndex);
+         copy = this.lengthBinding.set(copy, array.length);
+         result[this.recordBinding.parts[0]] = copy[this.recordBinding.parts[0]];
+         result[this.indexBinding.parts[0]] = copy[this.indexBinding.parts[0]];
+         result[this.lengthBinding.parts[0]] = copy[this.lengthBinding.parts[0]];
+      }
+   }
+
+   setIndex(itemIndex: number): void {
+      this.itemIndex = itemIndex;
+   }
+}
+
+ArrayElementView.prototype.recordAlias = "$record";
+ArrayElementView.prototype.indexAlias = "$index";
+ArrayElementView.prototype.lengthAlias = "$length";

package/src/data/AugmentedViewBase.ts

@@ -1,88 +1,88 @@
-import { View, ViewConfig } from "./View";
-import { Binding } from "./Binding";
-
-export interface AugmentedViewBaseConfig extends ViewConfig {
-   store: View<any>;
-}
-
-export class AugmentedViewBase<D = any> extends View<D> {
-   declare immutable: boolean;
-   declare store: View;
-
-   constructor(config: AugmentedViewBaseConfig) {
-      super(config);
-   }
-
-   getData() {
-      if (this.sealed && this.meta.version === this.cache.version && this.meta === this.store.meta)
-         return this.cache.result;
-      let parentStoreData = this.store.getData();
-      let result = this.getBaseData(parentStoreData);
-      this.embedAugmentData(result, parentStoreData);
-      this.cache.result = result;
-      this.cache.parentStoreData = parentStoreData;
-      this.cache.version = this.meta.version;
-      this.meta = this.store.meta;
-      return this.cache.result;
-   }
-
-   protected getBaseData(parentStoreData: any): any {
-      if (this.sealed || this.immutable || this.store.sealed) return { ...parentStoreData };
-      return parentStoreData;
-   }
-
-   protected embedAugmentData(result: any, parentStoreData: any): void {
-      throw new Error("abstract");
-   }
-
-   protected isExtraKey(key: string): boolean {
-      throw new Error("abstract");
-   }
-
-   // Stores which need to support nested aliases should override this method
-   protected getExtraKeyBinding(key: string): any {
-      let binding = Binding.get(key);
-      return this.isExtraKey(binding.parts[0]) ? Binding.get(binding.parts[0]) : null;
-   }
-
-   protected setExtraKeyValue(key: string, value: any): boolean {
-      throw new Error("abstract");
-   }
-
-   protected deleteExtraKeyValue(key: string): boolean {
-      throw new Error("abstract");
-   }
-
-   setItem(path: string, value: any): boolean {
-      let extraKeyBinding = this.getExtraKeyBinding(path);
-      if (extraKeyBinding) {
-         let binding = Binding.get(path);
-         let newValue = value;
-         if (binding.parts.length > extraKeyBinding.parts.length) {
-            let data = {};
-            this.embedAugmentData(data, this.store.getData());
-            let binding = Binding.get(path);
-            data = binding.set(data, value);
-            newValue = extraKeyBinding.value(data);
-         }
-         return this.setExtraKeyValue(extraKeyBinding.path, newValue);
-      }
-      return super.setItem(path, value);
-   }
-
-   deleteItem(path: string): boolean {
-      let extraKeyBinding = this.getExtraKeyBinding(path);
-      if (extraKeyBinding) {
-         if (path == extraKeyBinding.path) return this.deleteExtraKeyValue(extraKeyBinding.path);
-         let data = {};
-         this.embedAugmentData(data, this.store.getData());
-         let binding = Binding.get(path);
-         data = binding.delete(data);
-         let newValue = extraKeyBinding.value(data);
-         return this.setExtraKeyValue(extraKeyBinding.path, newValue);
-      }
-      return super.deleteItem(path);
-   }
-}
-
-AugmentedViewBase.prototype.immutable = false;
+import { View, ViewConfig } from "./View";
+import { Binding } from "./Binding";
+
+export interface AugmentedViewBaseConfig extends ViewConfig {
+   store: View<any>;
+}
+
+export class AugmentedViewBase<D = any> extends View<D> {
+   declare immutable: boolean;
+   declare store: View;
+
+   constructor(config: AugmentedViewBaseConfig) {
+      super(config);
+   }
+
+   getData() {
+      if (this.sealed && this.meta.version === this.cache.version && this.meta === this.store.meta)
+         return this.cache.result;
+      let parentStoreData = this.store.getData();
+      let result = this.getBaseData(parentStoreData);
+      this.embedAugmentData(result, parentStoreData);
+      this.cache.result = result;
+      this.cache.parentStoreData = parentStoreData;
+      this.cache.version = this.meta.version;
+      this.meta = this.store.meta;
+      return this.cache.result;
+   }
+
+   protected getBaseData(parentStoreData: any): any {
+      if (this.sealed || this.immutable || this.store.sealed) return { ...parentStoreData };
+      return parentStoreData;
+   }
+
+   protected embedAugmentData(result: any, parentStoreData: any): void {
+      throw new Error("abstract");
+   }
+
+   protected isExtraKey(key: string): boolean {
+      throw new Error("abstract");
+   }
+
+   // Stores which need to support nested aliases should override this method
+   protected getExtraKeyBinding(key: string): any {
+      let binding = Binding.get(key);
+      return this.isExtraKey(binding.parts[0]) ? Binding.get(binding.parts[0]) : null;
+   }
+
+   protected setExtraKeyValue(key: string, value: any): boolean {
+      throw new Error("abstract");
+   }
+
+   protected deleteExtraKeyValue(key: string): boolean {
+      throw new Error("abstract");
+   }
+
+   setItem(path: string, value: any): boolean {
+      let extraKeyBinding = this.getExtraKeyBinding(path);
+      if (extraKeyBinding) {
+         let binding = Binding.get(path);
+         let newValue = value;
+         if (binding.parts.length > extraKeyBinding.parts.length) {
+            let data = {};
+            this.embedAugmentData(data, this.store.getData());
+            let binding = Binding.get(path);
+            data = binding.set(data, value);
+            newValue = extraKeyBinding.value(data);
+         }
+         return this.setExtraKeyValue(extraKeyBinding.path, newValue);
+      }
+      return super.setItem(path, value);
+   }
+
+   deleteItem(path: string): boolean {
+      let extraKeyBinding = this.getExtraKeyBinding(path);
+      if (extraKeyBinding) {
+         if (path == extraKeyBinding.path) return this.deleteExtraKeyValue(extraKeyBinding.path);
+         let data = {};
+         this.embedAugmentData(data, this.store.getData());
+         let binding = Binding.get(path);
+         data = binding.delete(data);
+         let newValue = extraKeyBinding.value(data);
+         return this.setExtraKeyValue(extraKeyBinding.path, newValue);
+      }
+      return super.deleteItem(path);
+   }
+}
+
+AugmentedViewBase.prototype.immutable = false;