cx 26.3.5 → 26.3.7

package/dist/widgets.css

@@ -130,8 +130,7 @@
 
 .cxe-button-baseline {
   display: inline-block;
-  width: 1px;
-  margin-left: -1px;
+  min-width: 16px;
 }
 
 .cxb-button.cxs-icon {
@@ -139,7 +138,12 @@
 }
 
 .cxb-button.cxs-icon.cxs-empty {
-  padding: 5px 5px 5px 21px;
+  padding: 5px 5px 5px 5px;
+}
+
+.cxb-button.cxs-icon.cxs-empty .cxe-button-icon {
+  left: 50%;
+  margin-left: -8px;
 }
 
 .cxb-list {
@@ -2408,7 +2412,7 @@ th.cxe-calendar-display {
   width: 100%;
   height: 100%;
   line-height: 26px;
-  padding: 0 21px 0 26px;
+  padding: 0 22px 0 26px;
   border-width: 1px;
   font-size: 11px;
   font-family: "Consolas", monospace;
@@ -2965,8 +2969,7 @@ th.cxe-calendar-display {
 
 .cxe-uploadbutton-baseline {
   display: inline-block;
-  width: 1px;
-  margin-left: -1px;
+  min-width: 16px;
 }
 
 .cxb-uploadbutton.cxs-icon {
@@ -2974,7 +2977,12 @@ th.cxe-calendar-display {
 }
 
 .cxb-uploadbutton.cxs-icon.cxs-empty {
-  padding: 5px 5px 5px 21px;
+  padding: 5px 5px 5px 5px;
+}
+
+.cxb-uploadbutton.cxs-icon.cxs-empty .cxe-uploadbutton-icon {
+  left: 50%;
+  margin-left: -8px;
 }
 
 .cxe-uploadbutton-input {

package/dist/widgets.js

@@ -53,6 +53,9 @@ export {
 	DetachedScope,
 	GroupAdapter,
 	IsolatedScope,
+	LabelsLeftLayout,
+	LabelsTopLayout,
+	LabelsTopLayoutCell,
 	PrivateStore,
 	PureContainer,
 	Repeater,
@@ -3337,13 +3340,13 @@ class OverlayBeacon extends VDOM.Component {
 						display: "none",
 					},
 				}),
-				this.state?.children,
+				this.el && this.props.childrenFactory(this.el),
 			],
 		});
 	}
 	componentDidMount() {
 		this.setState({
-			children: this.props.childrenFactory(this.el),
+			beaconRendered: true,
 		});
 	}
 }
@@ -4252,11 +4255,11 @@ class Window extends OverlayBase {
 	render(context, instance, key) {
 		var header = this.renderHeader(context, instance, "header");
 		var footer = this.renderFooter(context, instance, "footer");
-		return jsx(OverlayBeacon, {
-			childrenFactory: (beaconEl) =>
-				jsx(
-					WindowComponent,
-					{
+		return jsx(
+			OverlayBeacon,
+			{
+				childrenFactory: (beaconEl) =>
+					jsx(WindowComponent, {
 						beaconEl: beaconEl,
 						instance: instance,
 						header: header,
@@ -4264,10 +4267,10 @@ class Window extends OverlayBase {
 						subscribeToBeforeDismiss: context.options.subscribeToBeforeDismiss,
 						parentEl: context.options.parentEl,
 						children: this.renderContents(context, instance),
-					},
-					key,
-				),
-		});
+					}),
+			},
+			key,
+		);
 	}
 }
 Window.prototype.baseClass = "window";
@@ -5217,8 +5220,9 @@ class Tab extends HtmlElement {
 			props.href = "#";
 			delete props.value;
 			props.onMouseDown = (e) => {
-				if (this.onMouseDown) instance.invoke("onMouseDown", e, instance);
-				preventFocusOnTouch(e);
+				if (this.onMouseDown && instance.invoke("onMouseDown", e, instance) === false) return;
+				if (!this.focusOnMouseDown) preventFocus(e);
+				else preventFocusOnTouch(e);
 			};
 			props.onClick = (e) => this.handleClick(e, instance);
 		}
@@ -7930,6 +7934,7 @@ const validationCheck = (date, data, disabledDaysOfWeek) => {
 };
 class CalendarCmp extends VDOM.Component {
 	el = null;
+	unsubscribeWheel;
 	constructor(props) {
 		super(props);
 		let { data } = props.instance;
@@ -8108,7 +8113,9 @@ class CalendarCmp extends VDOM.Component {
 		if (calendarWidget.autoFocus && this.el) this.el.focus();
 		if (this.el) {
 			tooltipParentDidMount$1(this.el, ...getFieldTooltip(this.props.instance));
-			this.el.addEventListener("wheel", (e) => this.handleWheel(e));
+			this.unsubscribeWheel = addEventListenerWithOptions(this.el, "wheel", (e) => this.handleWheel(e), {
+				passive: false,
+			});
 		}
 	}
 	UNSAFE_componentWillReceiveProps(props) {
@@ -8124,6 +8131,7 @@ class CalendarCmp extends VDOM.Component {
 	componentWillUnmount() {
 		offFocusOut(this);
 		tooltipParentWillUnmount$1(this.props.instance);
+		this.unsubscribeWheel?.();
 	}
 	showYearDropdown() {
 		if (this.el && this.el.firstChild) {
@@ -16237,7 +16245,7 @@ class GridComponent extends VDOM.Component {
 					{
 						ref: this.fixedScrollerRef,
 						className: CSS.element(baseClass, "fixed-scroll-area", {
-							"fixed-header": !!this.props.header,
+							"fixed-header": !!this.props.fixedHeader,
 							"fixed-footer": shouldRenderFixedFooter,
 						}),
 						children: jsx("div", {
@@ -16261,7 +16269,7 @@ class GridComponent extends VDOM.Component {
 					ref: this.scrollerRef,
 					onScroll: this.onScroll.bind(this),
 					className: CSS.element(baseClass, "scroll-area", {
-						"fixed-header": !!this.props.header,
+						"fixed-header": !!this.props.fixedHeader,
 						"fixed-footer": shouldRenderFixedFooter,
 					}),
 					children: jsx("div", {
@@ -16438,6 +16446,7 @@ class GridComponent extends VDOM.Component {
 						pageRecords.forEach((page) => {
 							if (Array.isArray(page)) {
 								records.push(...page);
+								lastPage = records.length < pageSize;
 							} else {
 								if (!Array.isArray(page.records))
 									throw new Error(
@@ -16452,13 +16461,16 @@ class GridComponent extends VDOM.Component {
 						let { data } = this.props;
 						if (!isNumber(totalRecordCount)) {
 							totalRecordCount = (startPage - 1) * pageSize + records.length;
-							if (!lastPage && records.length == (endPage - startPage + 1) * pageSize) totalRecordCount++;
-							if (data.totalRecordCount > totalRecordCount) totalRecordCount = data.totalRecordCount;
+							if (!lastPage) {
+								if (records.length == (endPage - startPage + 1) * pageSize) totalRecordCount++;
+								if (data.totalRecordCount > totalRecordCount) totalRecordCount = data.totalRecordCount;
+							}
 						}
 						instance.buffer.totalRecordCount = data.totalRecordCount = totalRecordCount;
 						instance.buffer.records = data.records = records;
 						instance.buffer.page = data.page = startPage;
 						data.offset = (startPage - 1) * pageSize;
+						data.empty = totalRecordCount == 0;
 						instance.store.silently(() => {
 							instance.set("records", records);
 							instance.set("page", startPage);
@@ -16477,7 +16489,7 @@ class GridComponent extends VDOM.Component {
 					})
 					.catch((error) => {
 						this.loading = false;
-						if (widget.onLoadingError) instance.invoke(error, "onLoadingError", instance);
+						if (widget.onLoadingError) instance.invoke("onLoadingError", error, instance);
 					});
 			}, 30);
 		if (startPage < this.loadingStartPage || endPage > this.loadingEndPage) {
@@ -17821,7 +17833,13 @@ class TreeNode extends ContainerBase {
 					jsxs("div", {
 						className: CSS.element(baseClass, "handle"),
 						onClick: (e) => this.toggle(e, instance),
-						onMouseDown: !this.hideIcon ? stopPropagation : undefined,
+						onMouseDown:
+							!this.hideIcon && !data.leaf
+								? (e) => {
+										e.stopPropagation();
+										e.preventDefault();
+									}
+								: undefined,
 						children: [
 							!data.leaf &&
 								!data.hideArrow &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cx",
-  "version": "26.3.5",
+  "version": "26.3.7",
   "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
   "exports": {
     "./data": {

package/src/charts/BarGraph.scss

@@ -1,31 +1,31 @@
-@use "sass:math";
-@use "sass:map";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "./variables" as *;
-
-@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: $cx-default-chart-shape-stroke-width;
-      fill: $cx-default-chart-shape-fill-color;
-      stroke: $cx-default-chart-shape-stroke-color;
-
-      &.#{$state}selectable {
-         cursor: pointer;
-      }
-
-      &.#{$state}selected {
-         stroke-width: $cx-default-chart-selected-stroke-width;
-      }
-   }
-}
-
-@if (cx-should-include("cx/charts/BarGraph")) {
-   @include cx-bargraph();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@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: $cx-default-chart-shape-stroke-width;
+      fill: $cx-default-chart-shape-fill-color;
+      stroke: $cx-default-chart-shape-stroke-color;
+
+      &.#{$state}selectable {
+         cursor: pointer;
+      }
+
+      &.#{$state}selected {
+         stroke-width: $cx-default-chart-selected-stroke-width;
+      }
+   }
+}
+
+@if (cx-should-include("cx/charts/BarGraph")) {
+   @include cx-bargraph();
+}

package/src/charts/Legend.scss

@@ -1,57 +1,57 @@
-@use "sass:math";
-@use "sass:map";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "./variables" as *;
-
-@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: $cx-default-chart-legend-gap;
-   }
-
-   .#{$block}#{$name}.#{$state}vertical {
-      flex-direction: column;
-   }
-
-   .#{$element}#{$name}-entry {
-      display: flex;
-      align-items: center;
-      padding: $cx-default-chart-legend-padding;
-      gap: $cx-default-chart-legend-entry-gap;
-      font-size: $cx-default-chart-legend-font-size;
-      position: relative;
-      box-sizing: border-box;
-      cursor: pointer;
-   }
-
-   .#{$element}#{$name}-svg {
-      flex-shrink: 0;
-   }
-
-   .#{$element}#{$name}-shape {
-      fill: $cx-default-chart-legend-shape-color;
-      stroke-width: $cx-default-chart-legend-shape-stroke-width;
-   }
-
-   .#{$element}#{$name}-value {
-      order: 3;
-   }
-
-   .#{$element}#{$name}-entry-text {
-      order: 2;
-   }
-}
-
-@if (cx-should-include("cx/charts/Legend")) {
-   @include cx-legend();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@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: $cx-default-chart-legend-gap;
+   }
+
+   .#{$block}#{$name}.#{$state}vertical {
+      flex-direction: column;
+   }
+
+   .#{$element}#{$name}-entry {
+      display: flex;
+      align-items: center;
+      padding: $cx-default-chart-legend-padding;
+      gap: $cx-default-chart-legend-entry-gap;
+      font-size: $cx-default-chart-legend-font-size;
+      position: relative;
+      box-sizing: border-box;
+      cursor: pointer;
+   }
+
+   .#{$element}#{$name}-svg {
+      flex-shrink: 0;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: $cx-default-chart-legend-shape-color;
+      stroke-width: $cx-default-chart-legend-shape-stroke-width;
+   }
+
+   .#{$element}#{$name}-value {
+      order: 3;
+   }
+
+   .#{$element}#{$name}-entry-text {
+      order: 2;
+   }
+}
+
+@if (cx-should-include("cx/charts/Legend")) {
+   @include cx-legend();
+}

package/src/charts/LegendEntry.scss

@@ -1,35 +1,35 @@
-@use "sass:math";
-@use "sass:map";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "./variables" as *;
-
-@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: $cx-default-chart-legend-padding;
-      gap: $cx-default-chart-legend-entry-gap;
-      position: relative;
-      box-sizing: border-box;
-      cursor: pointer;
-   }
-
-   .#{$element}#{$name}-svg {
-      flex-shrink: 0;
-   }
-
-   .#{$element}#{$name}-shape {
-      fill: $cx-default-chart-shape-fill-color;
-   }
-}
-
-@if (cx-should-include("cx/charts/LegendEntry")) {
-   @include cx-legendentry();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@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: $cx-default-chart-legend-padding;
+      gap: $cx-default-chart-legend-entry-gap;
+      position: relative;
+      box-sizing: border-box;
+      cursor: pointer;
+   }
+
+   .#{$element}#{$name}-svg {
+      flex-shrink: 0;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: $cx-default-chart-shape-fill-color;
+   }
+}
+
+@if (cx-should-include("cx/charts/LegendEntry")) {
+   @include cx-legendentry();
+}

package/src/charts/LineGraph.scss

@@ -1,28 +1,28 @@
-@use "sass:math";
-@use "sass:map";
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "./variables" as *;
-
-@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: $cx-default-chart-line-stroke-color;
-      stroke-width: $cx-default-chart-line-stroke-width;
-      fill: none !important;
-   }
-
-   .#{$element}#{$name}-area {
-      stroke-width: 0;
-      opacity: $cx-default-chart-area-opacity;
-   }
-}
-
-@if (cx-should-include("cx/charts/LineGraph")) {
-   @include cx-linegraph();
-}
+@use "sass:math";
+@use "sass:map";
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "./variables" as *;
+
+@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: $cx-default-chart-line-stroke-color;
+      stroke-width: $cx-default-chart-line-stroke-width;
+      fill: none !important;
+   }
+
+   .#{$element}#{$name}-area {
+      stroke-width: 0;
+      opacity: $cx-default-chart-area-opacity;
+   }
+}
+
+@if (cx-should-include("cx/charts/LineGraph")) {
+   @include cx-linegraph();
+}