cx 26.0.9 → 26.0.11

package/dist/ui.js

@@ -21,7 +21,7 @@ import {
 	Grouper,
 	getComparer,
 } from "cx/data";
-export { computable } from "cx/data";
+export { computable, createAccessorModelProxy } from "cx/data";
 import {
 	Component,
 	isArray,

package/package.json

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

package/src/jsx-dev-runtime.ts

@@ -0,0 +1,4 @@
+import { jsx, jsxs } from "./jsx-runtime";
+
+export const jsxDEV = jsx;
+export const jsxsDEV = jsxs;

package/src/ui/Controller.ts

@@ -57,7 +57,7 @@ export type ControllerFactory<T extends BaseControllerConfig = BaseControllerCon
    config: ViewMethods,
 ) => ControllerConfig<T>;
 
-export class Controller extends Component implements ControllerMethods {
+export class Controller<D = any> extends Component implements ControllerMethods {
    initialized?: boolean;
    onInit?(context: RenderingContext): void;
    onExplore?(context: RenderingContext): void;
@@ -65,7 +65,7 @@ export class Controller extends Component implements ControllerMethods {
    onCleanup?(context: RenderingContext): void;
    onDestroy?(): void;
    declare instance: Instance;
-   declare store: View;
+   declare store: View<D>;
    declare widget?: Widget;
    computables?: Record<string, ComputableEntry>;
 

package/src/ui/index.ts

@@ -42,4 +42,5 @@ export * from "./expr";
 
 //re-export computable here
 import { computable } from "../data/computable";
-export { computable };
+import { createAccessorModelProxy, AccessorChain } from "../data/createAccessorModelProxy";
+export { computable, createAccessorModelProxy, AccessorChain };

package/src/widgets/HtmlElement.spec.tsx

@@ -33,13 +33,14 @@ describe("HtmlElement", () => {
          },
       });
 
-      const component = createTestRenderer(store, (
+      const component = createTestRenderer(
+         store,
          <cx>
             <a href="#" {...{ title: { bind: "title" } }}>
                Link
             </a>
-         </cx>
-      ));
+         </cx>,
+      );
 
       let tree = component.toJSON();
       assert(tree && !Array.isArray(tree), "Expected single element");
@@ -62,13 +63,14 @@ describe("HtmlElement", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, (
+      const component = createTestRenderer(
+         store,
          <cx>
             <MyReactComponent>
                <span>Child content</span>
             </MyReactComponent>
-         </cx>
-      ));
+         </cx>,
+      );
 
       let tree = component.toJSON();
       assert(tree && !Array.isArray(tree), "Expected single element");

package/build/charts/Bar.scss

@@ -1,29 +0,0 @@
-
-@use "sass:map";
-
-@mixin cx-bar(
-   $name: 'bar',
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-rect {
-      stroke-width: 1px;
-      fill: #eee;
-      stroke: #ccc;
-
-      &.#{$state}selectable {
-         cursor: pointer;
-      }
-
-      &.#{$state}selected {
-         stroke-width: 2px;
-      }
-   }
-}
-
-@if (cx-should-include('cx/charts/Bar')) {
-   @include cx-bar();
-}

package/build/charts/BarGraph.scss

@@ -1,29 +0,0 @@
-@use "sass:map";
-
-@mixin cx-bargraph(
-   $name: 'bargraph',
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-bar {
-      stroke-width: 1px;
-      fill: #eee;
-      stroke: #ccc;
-
-      &.#{$state}selectable {
-         cursor: pointer;
-      }
-
-      &.#{$state}selected {
-         stroke-width: 2px;
-      }
-   }
-}
-
-
-@if (cx-should-include('cx/charts/BarGraph')) {
-   @include cx-bargraph();
-}

package/build/charts/BubbleGraph.scss

@@ -1,32 +0,0 @@
-
-@use "sass:map";
-
-@mixin cx-bubblegraph(
-   $name: 'bubblegraph',
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-   }
-
-   .#{$element}#{$name}-bubble {
-      fill: rgb(128, 128, 128);
-      opacity: 0.5;
-
-      &:hover {
-         opacity: 0.75;
-      }
-
-      &.#{$state}selected {
-         stroke: black;
-         stroke-width: 2px;
-      }
-   }
-}
-
-@if (cx-should-include('cx/charts/BubbleGraph')) {
-   @include cx-bubblegraph();
-}

package/build/charts/Column.scss

@@ -1,29 +0,0 @@
-
-@use "sass:map";
-
-@mixin cx-column(
-   $name: 'column',
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-rect {
-      stroke-width: 1px;
-      fill: #eee;
-      stroke: #ccc;
-
-      &.#{$state}selectable {
-         cursor: pointer;
-      }
-
-      &.#{$state}selected {
-         stroke-width: 2px;
-      }
-   }
-}
-
-@if (cx-should-include('cx/charts/Column')) {
-   @include cx-column();
-}

package/build/charts/ColumnGraph.scss

@@ -1,30 +0,0 @@
-
-@use "sass:map";
-
-@mixin cx-columngraph(
-   $name: 'columngraph',
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-column {
-      stroke-width: 1px;
-      fill: #eee;
-      stroke: #ccc;
-
-      &.#{$state}selectable {
-         cursor: pointer;
-      }
-
-      &.#{$state}selected {
-         stroke-width: 2px;
-      }
-   }
-}
-
-
-@if (cx-should-include('cx/charts/ColumnGraph')) {
-   @include cx-columngraph();
-}

package/build/charts/Gridlines.scss

@@ -1,25 +0,0 @@
-
-@use "sass:map";
-
-@mixin cx-gridlines(
-   $name: 'gridlines',
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      shape-rendering: crispEdges;
-
-      path {
-         stroke: rgba(128, 128, 128, 0.15);
-         fill: none;
-         stroke-width: 1;
-      }
-   }
-}
-
-@if (cx-should-include('cx/charts/Gridlines')) {
-   @include cx-gridlines();
-}

package/build/charts/Legend.scss

@@ -1,50 +0,0 @@
-@use "sass:map";
-
-@mixin cx-legend($name: "legend", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      display: flex;
-      justify-content: center;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      gap: 5px 10px;
-   }
-
-   .#{$block}#{$name}.#{$state}vertical {
-      flex-direction: column;
-   }
-
-   .#{$element}#{$name}-entry {
-      display: flex;
-      align-items: center;
-      padding: 5px;
-      gap: 5px;
-      font-size: smaller;
-      position: relative;
-      box-sizing: border-box;
-      cursor: pointer;
-   }
-
-   .#{$element}#{$name}-svg {
-      flex-shrink: 0;
-   }
-
-   .#{$element}#{$name}-shape {
-      fill: rgba(128, 128, 128, 0.1);
-   }
-
-   .#{$element}#{$name}-value {
-      order: 3;
-   }
-
-   .#{$element}#{$name}-entry-text {
-      order: 2;
-   }
-}
-
-@if (cx-should-include("cx/charts/Legend")) {
-   @include cx-legend();
-}

package/build/charts/LegendEntry.scss

@@ -1,29 +0,0 @@
-@use "sass:map";
-
-@mixin cx-legendentry($name: "legendentry", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      display: inline-flex;
-      align-items: center;
-      padding: 5px;
-      gap: 5px;
-      position: relative;
-      box-sizing: border-box;
-      cursor: pointer;
-   }
-
-   .#{$element}#{$name}-svg {
-      flex-shrink: 0;
-   }
-
-   .#{$element}#{$name}-shape {
-      fill: #eee;
-   }
-}
-
-@if (cx-should-include("cx/charts/LegendEntry")) {
-   @include cx-legendentry();
-}

package/build/charts/LineGraph.scss

@@ -1,25 +0,0 @@
-@use "sass:map";
-
-@mixin cx-linegraph(
-   $name: 'linegraph',
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-line {
-      stroke: gray;
-      stroke-width: 2px;
-      fill: none !important;
-   }
-
-   .#{$element}#{$name}-area {
-      stroke-width: 0;
-      opacity: 0.5;
-   }
-}
-
-@if (cx-should-include('cx/charts/LineGraph')) {
-   @include cx-linegraph();
-}

package/build/charts/Marker.scss

@@ -1,44 +0,0 @@
-
-@use "sass:map";
-
-@mixin cx-marker(
-   $name: 'marker',
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-shape {
-      fill: rgb(128, 128, 128);
-      stroke: rgb(128, 128, 128);
-      stroke-width: 1px;
-
-      .#{$state}draggable-x > & {
-         cursor: ew-resize;
-         touch-action: none;
-      }
-
-      .#{$state}draggable-y > & {
-         cursor: ns-resize;
-         touch-action: none;
-      }
-
-      .#{$state}draggable-xy > & {
-         cursor: move;
-         touch-action: none;
-      }
-
-      .#{$state}selectable > & {
-         cursor: pointer;
-      }
-
-      &.#{$state}hidden {
-         visibility: hidden;
-      }
-   }
-}
-
-@if (cx-should-include('cx/charts/Marker')) {
-   @include cx-marker();
-}

package/build/charts/MarkerLine.scss

@@ -1,20 +0,0 @@
-
-@use "sass:map";
-
-@mixin cx-markerline(
-   $name: 'markerline',
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-line {
-      stroke: rgb(128, 128, 128);
-      stroke-width: 1px;
-   }
-}
-
-@if (cx-should-include('cx/charts/MarkerLine')) {
-   @include cx-markerline();
-}

package/build/charts/PieChart.scss

@@ -1,29 +0,0 @@
-
-@use "sass:map";
-
-@mixin cx-pieslice(
-   $name: 'pieslice',
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-slice {
-      stroke-width: 0;
-      fill: #eee;
-      stroke: #ccc;
-
-      &.#{$state}selectable {
-         cursor: pointer;
-      }
-
-      &.#{$state}selected {
-         stroke-width: 2px;
-      }
-   }
-}
-
-@if (cx-should-include('cx/charts/PieSlice')) {
-   @include cx-pieslice();
-}

package/build/charts/Range.scss

@@ -1,20 +0,0 @@
-@use "sass:map";
-
-@mixin cx-range(
-   $name: 'range',
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-rect {
-      stroke-width: 0;
-      fill-opacity: 0.3;
-      fill: lightgray;
-   }
-}
-
-@if (cx-should-include('cx/charts/Range')) {
-   @include cx-range();
-}

package/build/charts/RangeMarker.scss

@@ -1,17 +0,0 @@
-@use "sass:map";
-
-@mixin cx-rangemarker($name: "rangemarker", $besm: $cx-besm, $range-marker-color: $cx-default-range-marker-color) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-path {
-      stroke: $range-marker-color;
-      fill: none;
-      stroke-width: 1px;
-   }
-}
-
-@if (cx-should-include("cx/charts/RangeMarker")) {
-   @include cx-rangemarker();
-}

package/build/charts/ScatterGraph.scss

@@ -1,24 +0,0 @@
-@use "sass:map";
-
-
-@mixin cx-scattergraph(
-   $name: 'scattergraph',
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-shape {
-      fill: rgb(128, 128, 128);
-      opacity: 0.8;
-
-      &.#{$state}selected {
-         stroke-width: 2px;
-      }
-   }
-}
-
-@if (cx-should-include('cx/charts/ScatterGraph')) {
-   @include cx-scattergraph();
-}

package/build/charts/Swimlane.scss

@@ -1,16 +0,0 @@
-@use "sass:map";
-
-@mixin cx-swimlane($name: "swimlane", $besm: $cx-besm, $lane-color: $cx-default-swimlanes-lane-background-color) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-lane {
-      fill: $lane-color;
-      stroke: none;
-   }
-}
-
-@if (cx-should-include("cx/charts/Swimlane")) {
-   @include cx-swimlane();
-}

package/build/charts/Swimlanes.scss

@@ -1,16 +0,0 @@
-@use "sass:map";
-
-@mixin cx-swimlanes($name: "swimlanes", $besm: $cx-besm, $lane-color: $cx-default-swimlanes-lane-background-color) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$element}#{$name}-lane {
-      fill: $lane-color;
-      stroke: none;
-   }
-}
-
-@if (cx-should-include("cx/charts/Swimlanes")) {
-   @include cx-swimlanes();
-}

package/build/charts/axis/Axis.scss

@@ -1,23 +0,0 @@
-
-@mixin cxb-axis() {
-   shape-rendering: crispEdges;
-}
-
-@mixin cxe-axis-ticks() {
-   stroke: $cx-axis-ticks-stroke;
-   stroke-width: 1px;
-}
-
-@mixin cxe-axis-line() {
-   stroke: $cx-axis-line-stroke;
-   stroke-width: 1px;
-}
-
-@mixin cxe-axis-label() {
-   font-size: smaller;
-   fill: currentColor;
-}
-
-@mixin cxe-axis-label-offset() {
-   visibility: hidden;
-}

package/build/charts/axis/CategoryAxis.scss

@@ -1,35 +0,0 @@
-@use "sass:map";
-
-
-@mixin cx-categoryaxis(
-   $name: 'categoryaxis',
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      @include cxb-axis();
-   }
-
-   .#{$element}#{$name}-ticks {
-      @include cxe-axis-ticks();
-   }
-
-   .#{$element}#{$name}-line {
-      @include cxe-axis-line();
-   }
-
-   .#{$element}#{$name}-label {
-      @include cxe-axis-label();
-   }
-
-   .#{$element}#{$name}-label-offset {
-      @include cxe-axis-label-offset();
-   }
-}
-
-@if (cx-should-include('cx/charts/CategoryAxis')) {
-   @include cx-categoryaxis();
-}

package/build/charts/axis/NumericAxis.scss

@@ -1,35 +0,0 @@
-
-@use "sass:map";
-
-@mixin cx-numericaxis(
-   $name: 'numericaxis',
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-
-   .#{$block}#{$name} {
-      @include cxb-axis();
-   }
-
-   .#{$element}#{$name}-ticks {
-      @include cxe-axis-ticks();
-   }
-
-   .#{$element}#{$name}-line {
-      @include cxe-axis-line();
-   }
-
-   .#{$element}#{$name}-label {
-      @include cxe-axis-label();
-   }
-
-   .#{$element}#{$name}-label-offset {
-      @include cxe-axis-label-offset();
-   }
-}
-
-@if (cx-should-include('cx/charts/NumericAxis')) {
-   @include cx-numericaxis();
-}