cx 23.5.1 → 23.5.2

package/dist/widgets.js

@@ -6517,7 +6517,8 @@ var Label = /*#__PURE__*/ (function (_HtmlElement) {
 			data._disabled,
 			context.parentDisabled
 		);
-		if (instance.cache("disabled", data.disabled)) {
+		data.asterisk = context.parentAsterisk || this.asterisk;
+		if (instance.cache("disabled", data.disabled) || instance.cache("asterisk", data.asterisk)) {
 			instance.markShouldUpdate(context);
 			this.prepareCSS(context, instance);
 		}
@@ -6544,7 +6545,7 @@ var Label = /*#__PURE__*/ (function (_HtmlElement) {
 				};
 		}
 		if (!props.id && data.htmlFor) props.id = data.htmlFor + "-label";
-		if (this.asterisk && data.required) {
+		if (data.required && data.asterisk) {
 			if (!isArray(props.children)) props.children = [props.children];
 			props.children.push(" ");
 			props.children.push(
@@ -10530,6 +10531,7 @@ var ValidationGroup = /*#__PURE__*/ (function (_PureContainer) {
 					isolated: undefined,
 					visited: undefined,
 					strict: undefined,
+					asterisk: undefined,
 				},
 			])
 		);
@@ -10545,6 +10547,7 @@ var ValidationGroup = /*#__PURE__*/ (function (_PureContainer) {
 		context.push("parentViewMode", coalesce(instance.data.viewMode, context.parentViewMode));
 		context.push("parentTabOnEnterKey", coalesce(instance.data.tabOnEnterKey, context.parentTabOnEnterKey));
 		context.push("parentVisited", coalesce(instance.data.visited, context.parentVisited));
+		context.push("parentAsterisk", coalesce(instance.data.asterisk, context.parentAsterisk));
 		context.push("validation", instance.validation);
 		_PureContainer.prototype.explore.call(this, context, instance);
 	};
@@ -10557,6 +10560,7 @@ var ValidationGroup = /*#__PURE__*/ (function (_PureContainer) {
 		context.pop("parentViewMode");
 		context.pop("parentTabOnEnterKey");
 		context.pop("parentStrict");
+		context.pop("parentAsterisk");
 		instance.valid = instance.validation.errors.length == 0;
 		if (!instance.valid && !this.isolated && context.validation)
 			(_context$validation$e = context.validation.errors).push.apply(_context$validation$e, instance.validation.errors);

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "23.5.1",
+   "version": "23.5.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/widgets/form/Field.js

@@ -41,7 +41,7 @@ export class Field extends PureContainer {
    }
 
    init() {
-      if (this.validationMode == 'tooltip' && isUndefined(this.errorTooltip)) {
+      if (this.validationMode == "tooltip" && isUndefined(this.errorTooltip)) {
          this.errorTooltip = {
             text: { bind: "$error" },
             mod: "error",
@@ -243,7 +243,11 @@ export class Field extends PureContainer {
       if (!data.error) {
          if (state.inputError) data.error = state.inputError;
          else if (state.validating && !empty) data.error = this.validatingText;
-         else if (state.validationError && data.value === state.lastValidatedValue && shallowEquals(data.validationParams, state.lastValidationParams))
+         else if (
+            state.validationError &&
+            data.value === state.lastValidatedValue &&
+            shallowEquals(data.validationParams, state.lastValidationParams)
+         )
             data.error = state.validationError;
          else if (data.required) data.error = this.validateRequired(context, instance);
       }
@@ -253,7 +257,9 @@ export class Field extends PureContainer {
          !state.validating &&
          !data.error &&
          this.onValidate &&
-         (!state.previouslyValidated || data.value != state.lastValidatedValue || data.validationParams != state.lastValidationParams)
+         (!state.previouslyValidated ||
+            data.value != state.lastValidatedValue ||
+            data.validationParams != state.lastValidationParams)
       ) {
          let result = instance.invoke("onValidate", data.value, instance, data.validationParams);
          if (isPromise(result)) {
@@ -262,14 +268,16 @@ export class Field extends PureContainer {
                validating: true,
                lastValidatedValue: data.value,
                previouslyValidated: true,
-               lastValidationParams: data.validationParams
+               lastValidationParams: data.validationParams,
             });
             result
                .then((r) => {
                   let { data, state } = instance;
-                  let error = data.value == state.lastValidatedValue && shallowEquals(data.validationParams, state.lastValidationParams)
-                     ? r
-                     : this.validatingText; //parameters changed, this will be revalidated
+                  let error =
+                     data.value == state.lastValidatedValue &&
+                     shallowEquals(data.validationParams, state.lastValidationParams)
+                        ? r
+                        : this.validatingText; //parameters changed, this will be revalidated
 
                   instance.setState({
                      validating: false,
@@ -416,4 +424,3 @@ export function getFieldTooltip(instance) {
       ];
    return [instance, widget.tooltip];
 }
-

package/src/widgets/form/Label.js

@@ -1,86 +1,88 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { HtmlElement } from "../HtmlElement";
-import { FocusManager } from "../../ui/FocusManager";
-import { isArray } from "../../util/isArray";
-import { coalesce } from "../../util/coalesce";
-
-export class Label extends HtmlElement {
-   declareData() {
-      super.declareData(...arguments, {
-         required: undefined,
-         disabled: undefined,
-         htmlFor: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         disabled: data.disabled,
-      };
-      data._disabled = data.disabled;
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      let { data } = instance;
-
-      if (!data.htmlFor) data.htmlFor = context.lastFieldId;
-
-      data.disabled = data.stateMods.disabled = coalesce(
-         context.parentStrict ? context.parentDisabled : null,
-         data._disabled,
-         context.parentDisabled
-      );
-
-      if (instance.cache('disabled', data.disabled)) {
-         instance.markShouldUpdate(context);
-         this.prepareCSS(context, instance);
-      }
-
-      super.explore(context, instance);
-   }
-
-   isValidHtmlAttribute(attrName) {
-      switch (attrName) {
-         case "asterisk":
-         case "required":
-            return false;
-      }
-      return super.isValidHtmlAttribute(attrName);
-   }
-
-   attachProps(context, instance, props) {
-      super.attachProps(context, instance, props);
-
-      let { data } = instance;
-
-      if (data.htmlFor) {
-         props.htmlFor = data.htmlFor;
-
-         if (!props.onClick)
-            props.onClick = () => {
-               //additional focus for LookupFields which are not input based
-               let el = document.getElementById(instance.data.htmlFor);
-               if (el) FocusManager.focusFirst(el);
-            };
-      }
-
-      if (!props.id && data.htmlFor) props.id = `${data.htmlFor}-label`;
-
-      if (this.asterisk && data.required) {
-         if (!isArray(props.children)) props.children = [props.children];
-         props.children.push(" ");
-         props.children.push(
-            <span key="asterisk" className={this.CSS.element(this.baseClass, "asterisk")}>
-               *
-            </span>
-         );
-      }
-   }
-}
-
-Label.prototype.baseClass = "label";
-Label.prototype.tag = "label";
-Label.prototype.asterisk = false;
+import { Widget, VDOM } from "../../ui/Widget";
+import { HtmlElement } from "../HtmlElement";
+import { FocusManager } from "../../ui/FocusManager";
+import { isArray } from "../../util/isArray";
+import { coalesce } from "../../util/coalesce";
+
+export class Label extends HtmlElement {
+   declareData() {
+      super.declareData(...arguments, {
+         required: undefined,
+         disabled: undefined,
+         htmlFor: undefined,
+      });
+   }
+
+   prepareData(context, instance) {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         disabled: data.disabled,
+      };
+      data._disabled = data.disabled;
+      super.prepareData(context, instance);
+   }
+
+   explore(context, instance) {
+      let { data } = instance;
+
+      if (!data.htmlFor) data.htmlFor = context.lastFieldId;
+
+      data.disabled = data.stateMods.disabled = coalesce(
+         context.parentStrict ? context.parentDisabled : null,
+         data._disabled,
+         context.parentDisabled
+      );
+
+      data.asterisk = context.parentAsterisk || this.asterisk;
+
+      if (instance.cache("disabled", data.disabled) || instance.cache("asterisk", data.asterisk)) {
+         instance.markShouldUpdate(context);
+         this.prepareCSS(context, instance);
+      }
+
+      super.explore(context, instance);
+   }
+
+   isValidHtmlAttribute(attrName) {
+      switch (attrName) {
+         case "asterisk":
+         case "required":
+            return false;
+      }
+      return super.isValidHtmlAttribute(attrName);
+   }
+
+   attachProps(context, instance, props) {
+      super.attachProps(context, instance, props);
+
+      let { data } = instance;
+
+      if (data.htmlFor) {
+         props.htmlFor = data.htmlFor;
+
+         if (!props.onClick)
+            props.onClick = () => {
+               //additional focus for LookupFields which are not input based
+               let el = document.getElementById(instance.data.htmlFor);
+               if (el) FocusManager.focusFirst(el);
+            };
+      }
+
+      if (!props.id && data.htmlFor) props.id = `${data.htmlFor}-label`;
+
+      if (data.required && data.asterisk) {
+         if (!isArray(props.children)) props.children = [props.children];
+         props.children.push(" ");
+         props.children.push(
+            <span key="asterisk" className={this.CSS.element(this.baseClass, "asterisk")}>
+               *
+            </span>
+         );
+      }
+   }
+}
+
+Label.prototype.baseClass = "label";
+Label.prototype.tag = "label";
+Label.prototype.asterisk = false;

package/src/widgets/form/ValidationGroup.d.ts

@@ -33,6 +33,9 @@ export interface ValidationGroupProps extends Cx.PureContainerProps {
 
    /** Set to `true` to force children to respect disabled, readOnly, viewMode and visited flags set on the group level. */
    strict?: Cx.BooleanProp;
+
+   /** Set to `true` to add red asterisk for all required fields inside the group. */
+   asterisk?: boolean;
 }
 
 export class ValidationGroup extends Cx.Widget<ValidationGroupProps> {}

package/src/widgets/form/ValidationGroup.js

@@ -18,6 +18,7 @@ export class ValidationGroup extends PureContainer {
          isolated: undefined,
          visited: undefined,
          strict: undefined,
+         asterisk: undefined,
       });
    }
 
@@ -34,6 +35,7 @@ export class ValidationGroup extends PureContainer {
       context.push("parentViewMode", coalesce(instance.data.viewMode, context.parentViewMode));
       context.push("parentTabOnEnterKey", coalesce(instance.data.tabOnEnterKey, context.parentTabOnEnterKey));
       context.push("parentVisited", coalesce(instance.data.visited, context.parentVisited));
+      context.push("parentAsterisk", coalesce(instance.data.asterisk, context.parentAsterisk));
       context.push("validation", instance.validation);
 
       super.explore(context, instance);
@@ -47,6 +49,7 @@ export class ValidationGroup extends PureContainer {
       context.pop("parentViewMode");
       context.pop("parentTabOnEnterKey");
       context.pop("parentStrict");
+      context.pop("parentAsterisk");
 
       instance.valid = instance.validation.errors.length == 0;
       if (!instance.valid && !this.isolated && context.validation)