cx 24.9.0 → 24.9.2

package/dist/widgets.css

@@ -1224,7 +1224,6 @@ th.cxe-calendar-display {
 }
 
 .cxe-lookupfield-input {
-  height: 100%;
   box-sizing: border-box;
   line-height: 16px;
   padding: 5px 24px 5px 5px;
@@ -1238,10 +1237,10 @@ th.cxe-calendar-display {
   color: black;
   outline-offset: 0;
   box-shadow: none;
-  text-overflow: ellipsis;
   -ms-appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
+  height: 100%;
 }
 .cxe-lookupfield-input:focus {
   border-color: rgba(77, 144, 254, 0.8);
@@ -2058,7 +2057,6 @@ th.cxe-calendar-display {
   left: 0;
   display: inline-block;
   position: absolute;
-  border-radius: 50%;
   opacity: 1;
   box-sizing: border-box;
   line-height: 16px;
@@ -2068,7 +2066,7 @@ th.cxe-calendar-display {
   font-family: inherit;
   border-color: #bfbfbf;
   border-style: solid;
-  border-radius: 0;
+  border-radius: 50%;
   background-color: white;
   color: currentColor;
   outline-offset: 0;
@@ -2406,7 +2404,6 @@ th.cxe-calendar-display {
 }
 .cxe-colorfield-left-icon {
   box-sizing: border-box;
-  opacity: 1;
   background-image: linear-gradient(45deg, rgba(128, 128, 128, 0.5) 25%, transparent 25%), linear-gradient(-45deg, rgba(128, 128, 128, 0.5) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(128, 128, 128, 0.5) 75%), linear-gradient(-45deg, transparent 75%, rgba(128, 128, 128, 0.5) 75%);
   background-size: 8px 8px;
   background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
@@ -2419,7 +2416,7 @@ th.cxe-calendar-display {
   height: 16px;
   width: 16px;
   line-height: 16px;
-  opacity: 0.6;
+  opacity: 1;
   text-align: center;
   cursor: pointer;
 }

package/dist/widgets.js

@@ -7137,7 +7137,8 @@ var Input$2 = /*#__PURE__*/ (function (_VDOM$Component) {
 		autoFocus(this.input, this);
 	};
 	_proto2.componentWillUnmount = function componentWillUnmount() {
-		if (this.input == getActiveElement()) this.onChange(this.input.value, "blur");
+		if (this.input == getActiveElement() && this.input.value != this.props.data.value)
+			this.onChange(this.input.value, "blur");
 		tooltipParentWillUnmount$1(this.props.instance);
 	};
 	_proto2.onKeyDown = function onKeyDown(e) {
@@ -10146,7 +10147,7 @@ var Input$1 = /*#__PURE__*/ (function (_VDOM$Component) {
 		autoFocus(this.input, this);
 	};
 	_proto2.componentWillUnmount = function componentWillUnmount() {
-		if (this.input == getActiveElement()) {
+		if (this.input == getActiveElement() && this.input.value != this.props.data.formatted) {
 			this.onChange(
 				{
 					target: {
@@ -12416,7 +12417,7 @@ var MonthInput = /*#__PURE__*/ (function (_VDOM$Component) {
 		autoFocus(this.input, this);
 	};
 	_proto2.componentWillUnmount = function componentWillUnmount() {
-		if (this.input == getActiveElement()) {
+		if (this.input == getActiveElement() && this.input.value != this.props.data.formatted) {
 			this.onChange(this.input.value, "blur");
 		}
 		tooltipParentWillUnmount$1(this.props.instance);
@@ -12801,7 +12802,7 @@ var ColorInput = /*#__PURE__*/ (function (_VDOM$Component) {
 		if (this.props.instance.widget.autoFocus && !isTouchDevice()) this.input.focus();
 	};
 	_proto2.componentWillUnmount = function componentWillUnmount() {
-		if (this.input == getActiveElement()) {
+		if (this.input == getActiveElement() && this.input.value != this.props.data.value) {
 			this.onChange(this.input.value, "blur");
 		}
 		tooltipParentWillUnmount$1(this.props.instance);
@@ -14948,7 +14949,7 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
 		autoFocus(this.input, this);
 	};
 	_proto2.componentWillUnmount = function componentWillUnmount() {
-		if (this.input == getActiveElement()) {
+		if (this.input == getActiveElement() && this.input.value != this.props.data.formatted) {
 			this.onChange(this.input.value, "blur");
 		}
 		tooltipParentWillUnmount$1(this.props.instance);

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "24.9.0",
+   "version": "24.9.2",
    "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/ui/layout/LabelsTopLayout.js

@@ -1,135 +1,135 @@
-import {VDOM, getContent, contentAppend} from '../Widget';
-import {Container} from '../Container';
-import {PureContainer} from '../PureContainer';
-import {isArray} from '../../util/isArray';
-import {isUndefined} from '../../util/isUndefined';
-import {isNumber} from "../../util/isNumber";
-
-function validContent(r) {
-   let content = [];
-   for (let key in r)
-      if (key != "label")
-         contentAppend(content, r[key]);
-   return content;
-}
-
-export class LabelsTopLayout extends Container {
-
-   init() {
-      if (this.vertical && isUndefined(this.columns))
-         this.columns = 1;
-
-      super.init();
-   }
-
-   render(context, instance, key) {
-      let {children, data} = instance;
-
-      let state = {
-         rows: [],
-         currentRow: 0,
-         labelCells: [],
-         fieldCells: [],
-         rowCapacities: [this.columns]
-      };
-
-      const processContent = (r) => {
-         if (!r)
-            return;
-         if (isArray(r.content) && r.useParentLayout)
-            r.content.forEach((x) => processContent(x));
-         else if (r.atomic && r.type == "layout-cell")
-            this.addItem(state, isArray(r.content) && r.content.length == 1 ? r.content[0] : r.content, r.data);
-         else
-            this.addItem(state, r, {});
-      };
-
-      children.forEach(item => processContent(item.vdom));
-
-      this.addRow(state);
-
-      return <table key={key} className={data.classNames} style={data.style}>
-         <tbody>
-         {state.rows}
-         </tbody>
-      </table>;
-   }
-
-   addRow(state) {
-      if (state.labelCells.length > 0)
-         state.rows.push(<tr key={state.rows.length}>{state.labelCells}</tr>);
-
-      if (state.fieldCells.length > 0)
-         state.rows.push(<tr key={state.rows.length}>{state.fieldCells}</tr>);
-
-      state.labelCells = [];
-      state.fieldCells = [];
-      state.currentRow++;
-      if (state.currentRow == state.rowCapacities.length)
-         state.rowCapacities.push(this.columns);
-   }
-
-
-   addItem(state, item, data) {
-
-      while (state.labelCells.length == state.rowCapacities[state.currentRow])
-         this.addRow(state);
-
-      if (data.rowSpan > 1) {
-         for (let row = state.currentRow + 1; row < state.currentRow + data.rowSpan; row++) {
-            if (row == state.rowCapacities.length)
-               state.rowCapacities.push(this.columns);
-            state.rowCapacities[row] -= data.colSpan || 1;
-         }
-      }
-
-      if (data.colSpan > 1)
-         state.rowCapacities[state.currentRow] -= data.colSpan - 1;
-
-      state.labelCells.push(
-         <td className={this.CSS.element(this.baseClass, "label")} key={state.labelCells.length} colSpan={data.colSpan}>
-            {getContent(item.label)}
-         </td>
-      );
-      state.fieldCells.push(
-         <td className={this.CSS.element(this.baseClass, "field")}
-             key={state.fieldCells.length}
-             colSpan={data.colSpan}
-             rowSpan={isNumber(data.rowSpan) ? 2 * data.rowSpan - 1 : undefined}
-             style={data.style}
-         >
-            {validContent(item)}
-         </td>
-      );
-   }
-}
-
-LabelsTopLayout.prototype.baseClass = 'labelstoplayout';
-LabelsTopLayout.prototype.vertical = false;
-LabelsTopLayout.prototype.columns = undefined;
-LabelsTopLayout.prototype.styled = true;
-
-export class LabelsTopLayoutCell extends PureContainer {
-
-   declareData(...args) {
-      super.declareData(...args, {
-         colSpan: undefined,
-         rowSpan: undefined
-      })
-   }
-
-   render(context, instance, key) {
-
-      let { content } = this.renderChildren(context, instance);
-
-      return {
-         atomic: true,
-         type: 'layout-cell',
-         data: instance.data,
-         content
-      }
-   }
-}
-
-LabelsTopLayoutCell.prototype.styled = true;
+import {VDOM, getContent, contentAppend} from '../Widget';
+import {Container} from '../Container';
+import {PureContainer} from '../PureContainer';
+import {isArray} from '../../util/isArray';
+import {isUndefined} from '../../util/isUndefined';
+import {isNumber} from "../../util/isNumber";
+
+function validContent(r) {
+   let content = [];
+   for (let key in r)
+      if (key != "label")
+         contentAppend(content, r[key]);
+   return content;
+}
+
+export class LabelsTopLayout extends Container {
+
+   init() {
+      if (this.vertical && isUndefined(this.columns))
+         this.columns = 1;
+
+      super.init();
+   }
+
+   render(context, instance, key) {
+      let {children, data} = instance;
+
+      let state = {
+         rows: [],
+         currentRow: 0,
+         labelCells: [],
+         fieldCells: [],
+         rowCapacities: [this.columns]
+      };
+
+      const processContent = (r) => {
+         if (!r)
+            return;
+         if (isArray(r.content) && r.useParentLayout)
+            r.content.forEach((x) => processContent(x));
+         else if (r.atomic && r.type == "layout-cell")
+            this.addItem(state, isArray(r.content) && r.content.length == 1 ? r.content[0] : r.content, r.data);
+         else
+            this.addItem(state, r, {});
+      };
+
+      children.forEach(item => processContent(item.vdom));
+
+      this.addRow(state);
+
+      return <table key={key} className={data.classNames} style={data.style}>
+         <tbody>
+         {state.rows}
+         </tbody>
+      </table>;
+   }
+
+   addRow(state) {
+      if (state.labelCells.length > 0)
+         state.rows.push(<tr key={state.rows.length}>{state.labelCells}</tr>);
+
+      if (state.fieldCells.length > 0)
+         state.rows.push(<tr key={state.rows.length}>{state.fieldCells}</tr>);
+
+      state.labelCells = [];
+      state.fieldCells = [];
+      state.currentRow++;
+      if (state.currentRow == state.rowCapacities.length)
+         state.rowCapacities.push(this.columns);
+   }
+
+
+   addItem(state, item, data) {
+
+      while (state.labelCells.length == state.rowCapacities[state.currentRow])
+         this.addRow(state);
+
+      if (data.rowSpan > 1) {
+         for (let row = state.currentRow + 1; row < state.currentRow + data.rowSpan; row++) {
+            if (row == state.rowCapacities.length)
+               state.rowCapacities.push(this.columns);
+            state.rowCapacities[row] -= data.colSpan || 1;
+         }
+      }
+
+      if (data.colSpan > 1)
+         state.rowCapacities[state.currentRow] -= data.colSpan - 1;
+
+      state.labelCells.push(
+         <td className={this.CSS.element(this.baseClass, "label")} key={state.labelCells.length} colSpan={data.colSpan}>
+            {getContent(item.label)}
+         </td>
+      );
+      state.fieldCells.push(
+         <td className={this.CSS.element(this.baseClass, "field")}
+             key={state.fieldCells.length}
+             colSpan={data.colSpan}
+             rowSpan={isNumber(data.rowSpan) ? 2 * data.rowSpan - 1 : undefined}
+             style={data.style}
+         >
+            {validContent(item)}
+         </td>
+      );
+   }
+}
+
+LabelsTopLayout.prototype.baseClass = 'labelstoplayout';
+LabelsTopLayout.prototype.vertical = false;
+LabelsTopLayout.prototype.columns = undefined;
+LabelsTopLayout.prototype.styled = true;
+
+export class LabelsTopLayoutCell extends PureContainer {
+
+   declareData(...args) {
+      super.declareData(...args, {
+         colSpan: undefined,
+         rowSpan: undefined
+      })
+   }
+
+   render(context, instance, key) {
+
+      let { content } = this.renderChildren(context, instance);
+
+      return {
+         atomic: true,
+         type: 'layout-cell',
+         data: instance.data,
+         content
+      }
+   }
+}
+
+LabelsTopLayoutCell.prototype.styled = true;
 LabelsTopLayoutCell.prototype.useParentLayout = true;