cx 24.4.6 → 24.4.7

package/dist/widgets.js

@@ -19323,7 +19323,7 @@ var DropZoneComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		var nearDistance = widget.nearDistance;
 		var over = rect.left <= clientX && clientX < rect.right && rect.top <= clientY && clientY < rect.bottom;
 		return {
-			over: over && distance,
+			over: over && Math.abs(clientX - (rect.left + rect.right) / 2) + Math.abs(clientY - (rect.top + rect.bottom) / 2),
 			near: nearDistance && (over || distance < nearDistance),
 		};
 	};

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "24.4.6",
+   "version": "24.4.7",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

package/src/charts/Chart.js

@@ -1,75 +1,75 @@
-import { Widget, VDOM, getContent } from "../ui/Widget";
-import { BoundedObject } from "../svg/BoundedObject";
-import { Axis } from "./axis/Axis";
-
-export class Chart extends BoundedObject {
-   init() {
-      super.init();
-
-      if (!this.axes) this.axes = {};
-
-      for (let axis in this.axes) {
-         this.axes[axis] = Axis.create(this.axes[axis]);
-      }
-   }
-
-   explore(context, instance) {
-      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, instance) {
-      context.pop("axes");
-
-      for (let axis in instance.axes) {
-         instance.axes[axis].widget.reportData(context, instance.axes[axis]);
-      }
-   }
-
-   prepare(context, instance) {
-      context.push("axes", instance.calculators);
-      super.prepare(context, instance);
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop("axes");
-      super.prepareCleanup(context, instance);
-   }
-
-   render(context, instance, key) {
-      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 } from "../svg/BoundedObject";
+import { Axis } from "./axis/Axis";
+
+export class Chart extends BoundedObject {
+   init() {
+      super.init();
+
+      if (!this.axes) this.axes = {};
+
+      for (let axis in this.axes) {
+         this.axes[axis] = Axis.create(this.axes[axis]);
+      }
+   }
+
+   explore(context, instance) {
+      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, instance) {
+      context.pop("axes");
+
+      for (let axis in instance.axes) {
+         instance.axes[axis].widget.reportData(context, instance.axes[axis]);
+      }
+   }
+
+   prepare(context, instance) {
+      context.push("axes", instance.calculators);
+      super.prepare(context, instance);
+   }
+
+   prepareCleanup(context, instance) {
+      context.pop("axes");
+      super.prepareCleanup(context, instance);
+   }
+
+   render(context, instance, key) {
+      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/ColumnBarBase.d.ts

@@ -1,64 +1,64 @@
-import * as Cx from "../core";
-
-interface ColumnBarBaseProps extends Cx.StyledContainerProps {
-   /** The `x` value binding or expression. */
-   x?: Cx.Prop<string | number>;
-
-   /** The `y` value binding or expression. */
-   y?: Cx.Prop<string | number>;
-
-   disabled?: Cx.BooleanProp;
-
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.NumberProp;
-
-   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
-   colorMap?: Cx.StringProp;
-
-   /** Name used to resolve the color. If not provided, `name` is used instead. */
-   colorName?: Cx.StringProp;
-
-   /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp;
-
-   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp;
-
-   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
-   stacked?: Cx.BooleanProp;
-
-   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
-   stack?: Cx.StringProp;
-
-   /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
-   offset?: Cx.NumberProp;
-
-   /** Border radius of the column/bar. */
-   borderRadius?: Cx.NumberProp;
-
-   /**
-    * Name of the horizontal axis. The value should match one of the horizontal axes set
-    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
-    */
-   xAxis?: string;
-
-   /**
-    * Name of the vertical axis. The value should match one of the vertical axes set
-    *  in the `axes` configuration if the parent `Chart` component. Default value is `y`.
-    */
-   yAxis?: string;
-
-   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
-   legend?: string | false;
-
-   legendAction?: string;
-   legendShape?: string;
-
-   /** A value used to identify the group of components participating in hover effect synchronization. */
-   hoverChannel?: string;
-
-   /** A value used to uniquely identify the record within the hover sync group. */
-   hoverId?: Cx.StringProp;
-}
-
-export class ColumnBarBase extends Cx.Widget<ColumnBarBaseProps> {}
+import * as Cx from "../core";
+
+interface ColumnBarBaseProps extends Cx.StyledContainerProps {
+   /** The `x` value binding or expression. */
+   x?: Cx.Prop<string | number>;
+
+   /** The `y` value binding or expression. */
+   y?: Cx.Prop<string | number>;
+
+   disabled?: Cx.BooleanProp;
+
+   /** Index of a color from the standard palette of colors. 0-15. */
+   colorIndex?: Cx.NumberProp;
+
+   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
+   colorMap?: Cx.StringProp;
+
+   /** Name used to resolve the color. If not provided, `name` is used instead. */
+   colorName?: Cx.StringProp;
+
+   /** Name of the item as it will appear in the legend. */
+   name?: Cx.StringProp;
+
+   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
+   active?: Cx.BooleanProp;
+
+   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
+   stacked?: Cx.BooleanProp;
+
+   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
+   stack?: Cx.StringProp;
+
+   /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
+   offset?: Cx.NumberProp;
+
+   /** Border radius of the column/bar. */
+   borderRadius?: Cx.NumberProp;
+
+   /**
+    * Name of the horizontal axis. The value should match one of the horizontal axes set
+    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
+    */
+   xAxis?: string;
+
+   /**
+    * Name of the vertical axis. The value should match one of the vertical axes set
+    *  in the `axes` configuration if the parent `Chart` component. Default value is `y`.
+    */
+   yAxis?: string;
+
+   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
+   legend?: string | false;
+
+   legendAction?: string;
+   legendShape?: string;
+
+   /** A value used to identify the group of components participating in hover effect synchronization. */
+   hoverChannel?: string;
+
+   /** A value used to uniquely identify the record within the hover sync group. */
+   hoverId?: Cx.StringProp;
+}
+
+export class ColumnBarBase extends Cx.Widget<ColumnBarBaseProps> {}

package/src/charts/ColumnBarGraphBase.d.ts

@@ -1,73 +1,73 @@
-import * as Cx from "../core";
-import { KeySelection, PropertySelection } from "../ui/selection";
-
-interface ColumnBarGraphBaseProps extends Cx.WidgetProps {
-   /**
-    * Data for the graph. Each entry should be an object with at least two properties
-    *  whose names should match the `xField` and `yField` values.
-    */
-   data?: Cx.RecordsProp;
-
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.NumberProp;
-
-   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
-   colorMap?: Cx.StringProp;
-
-   /** Name used to resolve the color. If not provided, `name` is used instead. */
-   colorName?: Cx.StringProp;
-
-   /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp;
-
-   /** Size (width) of the column in axis units. */
-   size?: Cx.NumberProp;
-
-   /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
-   offset?: Cx.NumberProp;
-
-   /** Set to true to auto-calculate size and offset. Available only if the x axis is a category axis. */
-   autoSize?: Cx.BooleanProp;
-
-   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp;
-
-   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
-   stacked?: Cx.BooleanProp;
-
-   /** Border radius of the column/bar. */
-   borderRadius?: Cx.NumberProp;
-
-   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
-   stack?: Cx.StringProp;
-
-   /** Name of the horizontal axis. The value should match one of the horizontal axes set
-    *  in the `axes` configuration of the parent `Chart` component. Default value is `x`.
-    */
-   xAxis?: string;
-
-   /**
-    *  Name of the vertical axis. The value should match one of the vertical axes set
-    * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
-    */
-   yAxis?: string;
-
-   /** Name of the property which holds the x value. Default value is `x`. */
-   xField?: string;
-
-   /** Name of the property which holds the y value. Default value is `y`. */
-   yField?: string;
-
-   colorIndexField?: boolean;
-
-   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
-   legend?: string | false;
-
-   legendAction?: string;
-   legendShape?: string;
-
-   /** Selection configuration. */
-   selection?: { type: typeof PropertySelection | typeof KeySelection; [prop: string]: any };
-}
-
-export class ColumnBarGraphBase extends Cx.Widget<ColumnBarGraphBaseProps> {}
+import * as Cx from "../core";
+import { KeySelection, PropertySelection } from "../ui/selection";
+
+interface ColumnBarGraphBaseProps extends Cx.WidgetProps {
+   /**
+    * Data for the graph. Each entry should be an object with at least two properties
+    *  whose names should match the `xField` and `yField` values.
+    */
+   data?: Cx.RecordsProp;
+
+   /** Index of a color from the standard palette of colors. 0-15. */
+   colorIndex?: Cx.NumberProp;
+
+   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
+   colorMap?: Cx.StringProp;
+
+   /** Name used to resolve the color. If not provided, `name` is used instead. */
+   colorName?: Cx.StringProp;
+
+   /** Name of the item as it will appear in the legend. */
+   name?: Cx.StringProp;
+
+   /** Size (width) of the column in axis units. */
+   size?: Cx.NumberProp;
+
+   /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
+   offset?: Cx.NumberProp;
+
+   /** Set to true to auto-calculate size and offset. Available only if the x axis is a category axis. */
+   autoSize?: Cx.BooleanProp;
+
+   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
+   active?: Cx.BooleanProp;
+
+   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
+   stacked?: Cx.BooleanProp;
+
+   /** Border radius of the column/bar. */
+   borderRadius?: Cx.NumberProp;
+
+   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
+   stack?: Cx.StringProp;
+
+   /** Name of the horizontal axis. The value should match one of the horizontal axes set
+    *  in the `axes` configuration of the parent `Chart` component. Default value is `x`.
+    */
+   xAxis?: string;
+
+   /**
+    *  Name of the vertical axis. The value should match one of the vertical axes set
+    * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
+    */
+   yAxis?: string;
+
+   /** Name of the property which holds the x value. Default value is `x`. */
+   xField?: string;
+
+   /** Name of the property which holds the y value. Default value is `y`. */
+   yField?: string;
+
+   colorIndexField?: boolean;
+
+   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
+   legend?: string | false;
+
+   legendAction?: string;
+   legendShape?: string;
+
+   /** Selection configuration. */
+   selection?: { type: typeof PropertySelection | typeof KeySelection; [prop: string]: any };
+}
+
+export class ColumnBarGraphBase extends Cx.Widget<ColumnBarGraphBaseProps> {}

package/src/charts/Legend.js

@@ -25,6 +25,7 @@ export class Legend extends HtmlElement {
       switch (attrName) {
          case "shapeSize":
          case "svgSize":
+         case "shape":
             return false;
 
          default:

package/src/charts/LineGraph.d.ts

@@ -1,92 +1,92 @@
-import * as Cx from "../core";
-
-interface LineGraphProps extends Cx.WidgetProps {
-   /**
-    * Data for the graph. Each entry should be an object with at least two properties
-    * whose names should match the `xField` and `yField` values.
-    */
-   data?: Cx.RecordsProp;
-
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.NumberProp;
-
-   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
-   colorMap?: Cx.StringProp;
-
-   /** Name used to resolve the color. If not provided, `name` is used instead. */
-   colorName?: Cx.StringProp;
-
-   /**
-    * 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?: Cx.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?: Cx.ClassProp;
-
-   /** Additional styles to be applied to the line element. */
-   lineStyle?: Cx.StyleProp;
-
-   /** Additional styles to be applied to the area below the line. */
-   areaStyle?: Cx.StyleProp;
-
-   /** Area switch. Default value is `false`. */
-   area?: Cx.BooleanProp;
-
-   /** Line switch. By default, the line is shown. Set to `false` to hide the line and draw only the area. */
-   line?: Cx.BooleanProp;
-
-   /** Base value used for area charts. Default value is `0`. */
-   y0?: Cx.NumberProp;
-
-   /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp;
-
-   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp;
-
-   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
-   stack?: Cx.StringProp;
-
-   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
-   stacked?: Cx.BooleanProp;
-
-   /**
-    * Name of the horizontal axis. The value should match one of the horizontal axes set
-    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
-    */
-   xAxis?: string;
-
-   /**
-    * Name of the vertical axis. The value should match one of the vertical axes set
-    * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
-    */
-   yAxis?: string;
-
-   /** Name of the property which holds the x value. Default value is `x`. */
-   xField?: string;
-
-   /** Name of the property which holds the y value. Default value is `y`. */
-   yField?: string;
-
-   /** Base CSS class to be applied to the element. Defaults to `linegraph`. */
-   baseClass?: string;
-
-   /** Name of the property which holds the y0 value. Default value is `false`, which means y0 value is not read from the data array. */
-   y0Field?: string | false;
-
-   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
-   legend?: string | false;
-
-   legendAction?: string;
-   legendShape?: string;
-
-   /** Set to true to avoid forcing the vertical axis to accommodate y0 values. */
-   hiddenBase?: boolean;
-}
-
-export class LineGraph extends Cx.Widget<LineGraphProps> {}
+import * as Cx from "../core";
+
+interface LineGraphProps extends Cx.WidgetProps {
+   /**
+    * Data for the graph. Each entry should be an object with at least two properties
+    * whose names should match the `xField` and `yField` values.
+    */
+   data?: Cx.RecordsProp;
+
+   /** Index of a color from the standard palette of colors. 0-15. */
+   colorIndex?: Cx.NumberProp;
+
+   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
+   colorMap?: Cx.StringProp;
+
+   /** Name used to resolve the color. If not provided, `name` is used instead. */
+   colorName?: Cx.StringProp;
+
+   /**
+    * 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?: Cx.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?: Cx.ClassProp;
+
+   /** Additional styles to be applied to the line element. */
+   lineStyle?: Cx.StyleProp;
+
+   /** Additional styles to be applied to the area below the line. */
+   areaStyle?: Cx.StyleProp;
+
+   /** Area switch. Default value is `false`. */
+   area?: Cx.BooleanProp;
+
+   /** Line switch. By default, the line is shown. Set to `false` to hide the line and draw only the area. */
+   line?: Cx.BooleanProp;
+
+   /** Base value used for area charts. Default value is `0`. */
+   y0?: Cx.NumberProp;
+
+   /** Name of the item as it will appear in the legend. */
+   name?: Cx.StringProp;
+
+   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
+   active?: Cx.BooleanProp;
+
+   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
+   stack?: Cx.StringProp;
+
+   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
+   stacked?: Cx.BooleanProp;
+
+   /**
+    * Name of the horizontal axis. The value should match one of the horizontal axes set
+    * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
+    */
+   xAxis?: string;
+
+   /**
+    * Name of the vertical axis. The value should match one of the vertical axes set
+    * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
+    */
+   yAxis?: string;
+
+   /** Name of the property which holds the x value. Default value is `x`. */
+   xField?: string;
+
+   /** Name of the property which holds the y value. Default value is `y`. */
+   yField?: string;
+
+   /** Base CSS class to be applied to the element. Defaults to `linegraph`. */
+   baseClass?: string;
+
+   /** Name of the property which holds the y0 value. Default value is `false`, which means y0 value is not read from the data array. */
+   y0Field?: string | false;
+
+   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
+   legend?: string | false;
+
+   legendAction?: string;
+   legendShape?: string;
+
+   /** Set to true to avoid forcing the vertical axis to accommodate y0 values. */
+   hiddenBase?: boolean;
+}
+
+export class LineGraph extends Cx.Widget<LineGraphProps> {}