cx 24.3.1 → 24.3.3

package/src/widgets/form/Label.js

@@ -1,88 +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
-      );
-
-      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;
+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/UploadButton.d.ts

@@ -1,34 +1,34 @@
-import * as Cx from "../../core";
-import { FieldProps } from "./Field";
-
-interface UploadButtonProps extends FieldProps {
-   /** Text description. */
-   text?: Cx.StringProp;
-
-   url?: Cx.StringProp;
-
-   /** Base CSS class to be applied to the element. Default is 'uploadbutton'. */
-   baseClass?: string;
-
-   /** Defaults to `false`. Set to `true` to enable multiple selection. */
-   multiple?: boolean;
-
-   method?: string;
-   uploadInProgressText?: string;
-
-   /** Defaults to `false`. Set to `true` to abort uploads if the button is destroyed (unmounted). */
-   abortOnDestroy?: boolean;
-
-   /** Defines file types that are accepted for upload. */
-   accept?: Cx.StringProp;
-
-   /** Name of the icon to be put on the left side of the button. */
-   icon?: Cx.StringProp;
-
-   onUploadStarting?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => boolean) | string;
-   onUploadComplete?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => void) | string;
-   onUploadProgress?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
-   onUploadError?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
-}
-
-export class UploadButton extends Cx.Widget<UploadButtonProps> {}
+import * as Cx from "../../core";
+import { FieldProps } from "./Field";
+
+interface UploadButtonProps extends FieldProps {
+   /** Text description. */
+   text?: Cx.StringProp;
+
+   url?: Cx.StringProp;
+
+   /** Base CSS class to be applied to the element. Default is 'uploadbutton'. */
+   baseClass?: string;
+
+   /** Defaults to `false`. Set to `true` to enable multiple selection. */
+   multiple?: boolean;
+
+   method?: string;
+   uploadInProgressText?: string;
+
+   /** Defaults to `false`. Set to `true` to abort uploads if the button is destroyed (unmounted). */
+   abortOnDestroy?: boolean;
+
+   /** Defines file types that are accepted for upload. */
+   accept?: Cx.StringProp;
+
+   /** Name of the icon to be put on the left side of the button. */
+   icon?: Cx.StringProp;
+
+   onUploadStarting?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => boolean) | string;
+   onUploadComplete?: ((xhr: XMLHttpRequest, instance: any, file: File, formData: FormData) => void) | string;
+   onUploadProgress?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
+   onUploadError?: ((event: ProgressEvent, instance: any, file: File, formData: FormData) => void) | string;
+}
+
+export class UploadButton extends Cx.Widget<UploadButtonProps> {}

package/src/widgets/grid/Grid.js

@@ -157,15 +157,15 @@ export class Grid extends Container {
             )
                row.hasResizableColumns = true;
 
-            if (c.aggregate && (c.aggregateField || isDefined(c.aggregateValue))) {
+            if (c.aggregate && c.aggregateAlias && (c.aggregateField || isDefined(c.aggregateValue))) {
                aggregates[c.aggregateAlias] = {
                   value: isDefined(c.aggregateValue)
                      ? c.aggregateValue
                      : isDefined(c.value)
-                       ? c.value
-                       : c.aggregateField
-                         ? { bind: this.recordName + "." + c.aggregateField }
-                         : null,
+                     ? c.value
+                     : c.aggregateField
+                     ? { bind: this.recordName + "." + c.aggregateField }
+                     : null,
                   weight:
                      c.weight != null
                         ? c.weight
@@ -881,15 +881,22 @@ export class Grid extends Container {
                let v,
                   c = ci.widget,
                   colSpan,
-                  pad;
+                  pad,
+                  cls = "",
+                  style = null;
                if (c.caption) {
                   if (c.caption.children)
                      v = <Cx widget={c.caption.children} store={store} parentInstance={instance} subscribe />;
-                  else v = c.caption.value(data);
+                  else {
+                     v = c.caption.value(data);
+                     let fmt = c.caption.format(data);
+                     if (fmt) v = Format.value(v, fmt);
+                  }
                   pad = c.caption.pad;
                   colSpan = c.caption.colSpan;
                   empty = false;
-
+                  cls = CSS.expand(c.caption.class(data)) || "";
+                  style = parseStyle(c.caption.style(data));
                   if (c.caption.expand) {
                      colSpan = 1;
                      for (
@@ -903,19 +910,19 @@ export class Grid extends Container {
                   }
 
                   if (colSpan > 1) skip = colSpan - 1;
-               } else if (c.aggregate && c.aggregateField && c.caption !== false) {
+               } else if (c.aggregate && c.aggregateAlias && c.caption !== false) {
                   empty = false;
-                  v = group[c.aggregateField];
+                  v = group[c.aggregateAlias];
                   if (isString(ci.data.format)) v = Format.value(v, ci.data.format);
                }
 
-               let cls = "";
+               if (cls) cls += " ";
                if (c.align) cls += CSS.state("aligned-" + c.align);
 
                if (pad !== false) cls += (cls ? " " : "") + CSS.state("pad");
 
                return (
-                  <td key={i} className={cls} colSpan={colSpan}>
+                  <td key={i} className={cls} colSpan={colSpan} style={style}>
                      {v}
                   </td>
                );
@@ -986,9 +993,9 @@ export class Grid extends Container {
                }
 
                if (colSpan > 1) skip = colSpan - 1;
-            } else if (c.aggregate && c.aggregateField && c.footer !== false) {
+            } else if (c.aggregate && c.aggregateAlias && c.footer !== false) {
                empty = false;
-               v = group[c.aggregateField];
+               v = group[c.aggregateAlias];
                if (isString(ci.data.format)) v = Format.value(v, ci.data.format);
             }
 
@@ -3089,7 +3096,12 @@ class GridColumnHeader extends Widget {
          if (children) {
             delete this.caption.items;
             this.caption.children = Widget.create(children);
-         } else this.caption.value = getSelector(this.caption.value);
+         } else {
+            this.caption.value = getSelector(this.caption.value);
+            this.caption.class = getSelector(this.caption.class);
+            this.caption.style = getSelector(this.caption.style);
+            this.caption.format = getSelector(this.caption.format);
+         }
       }
 
       super.init();

package/src/widgets/overlay/captureMouse.js

@@ -1,124 +1,124 @@
-import { batchUpdates } from "../../ui/batchUpdates";
-import { getParentFrameBoundingClientRect } from "../../util/getParentFrameBoundingClientRect";
-
-export function captureMouse2(e, { onMouseMove, onMouseUp, onDblClick, captureData, cursor }) {
-   let surface = document.createElement("div");
-   surface.className = "cxb-mousecapture";
-   surface.style.cursor = cursor || getComputedStyle(e.currentTarget).cursor;
-
-   document.body.appendChild(surface);
-
-   // In case when the event originates from an iframe,
-   // we use that document as events do not bubble up.   //
-   let parentDocument = e.target.ownerDocument;
-   let options = { capture: true };
-
-   let active = true;
-   parentDocument.addEventListener("mousemove", move, options);
-   parentDocument.addEventListener("mouseup", end, options);
-   if (onDblClick) parentDocument.addEventListener("dblclick", doubleClick), options;
-
-   function tear() {
-      if (surface == null) return;
-      parentDocument.removeEventListener("mousemove", move, options);
-      parentDocument.removeEventListener("mouseup", end, options);
-      if (onDblClick) parentDocument.removeEventListener("dblclick", onDblClick, options);
-      document.body.removeChild(surface);
-      surface = null;
-   }
-
-   function doubleClick(e) {
-      try {
-         onDblClick(e);
-      } finally {
-         tear();
-      }
-   }
-
-   e.stopPropagation();
-
-   function move(e) {
-      if (!active) {
-         tear();
-         return;
-      }
-
-      //if mouse moves double clicking is off
-      onDblClick = null;
-
-      batchUpdates(() => {
-         if (onMouseMove) onMouseMove(e, captureData);
-         e.stopPropagation();
-         e.preventDefault(); //disable text selection
-      });
-   }
-
-   function end(e) {
-      active = false;
-      batchUpdates(() => {
-         // if (surface.releaseCapture)
-         //    surface.releaseCapture();
-
-         if (!onDblClick) surface.style.display = "none";
-         try {
-            if (onMouseUp) onMouseUp(e, captureData);
-         } finally {
-            if (onDblClick) {
-               //keep the surface a little longer to detect double clicks
-               setTimeout(tear, 1500);
-            } else tear();
-         }
-      });
-   }
-}
-
-export function captureMouseOrTouch2(e, { onMouseMove, onMouseUp, onDblClick, captureData, cursor }) {
-   if (e.type.indexOf("touch") == 0) {
-      let el = e.currentTarget;
-
-      let move = (e) => {
-         batchUpdates(() => {
-            if (onMouseMove) onMouseMove(e, captureData);
-            e.preventDefault();
-         });
-      };
-
-      let end = (e) => {
-         batchUpdates(() => {
-            el.removeEventListener("touchmove", move);
-            el.removeEventListener("touchend", end);
-
-            if (onMouseUp) onMouseUp(e);
-
-            e.preventDefault();
-         });
-      };
-
-      el.addEventListener("touchmove", move);
-      el.addEventListener("touchend", end);
-
-      e.stopPropagation();
-   } else captureMouse2(e, { onMouseMove, onMouseUp, captureData, onDblClick, cursor });
-}
-
-export function captureMouse(e, onMouseMove, onMouseUp, captureData, cursor) {
-   captureMouse2(e, {
-      onMouseMove,
-      onMouseUp,
-      captureData,
-      cursor,
-   });
-}
-
-export function captureMouseOrTouch(e, onMouseMove, onMouseUp, captureData, cursor) {
-   captureMouseOrTouch2(e, { onMouseMove, onMouseUp, captureData, cursor });
-}
-
-export function getCursorPos(e) {
-   let p = (e.touches && e.touches[0]) || e;
-   let offset = getParentFrameBoundingClientRect(e.target);
-   return {
-      clientX: p.clientX + offset.left,
-      clientY: p.clientY + offset.top,
-   };
-}
+import { batchUpdates } from "../../ui/batchUpdates";
+import { getParentFrameBoundingClientRect } from "../../util/getParentFrameBoundingClientRect";
+
+export function captureMouse2(e, { onMouseMove, onMouseUp, onDblClick, captureData, cursor }) {
+   let surface = document.createElement("div");
+   surface.className = "cxb-mousecapture";
+   surface.style.cursor = cursor || getComputedStyle(e.currentTarget).cursor;
+
+   document.body.appendChild(surface);
+
+   // In case when the event originates from an iframe,
+   // we use that document as events do not bubble up.   //
+   let parentDocument = e.target.ownerDocument;
+   let options = { capture: true };
+
+   let active = true;
+   parentDocument.addEventListener("mousemove", move, options);
+   parentDocument.addEventListener("mouseup", end, options);
+   if (onDblClick) parentDocument.addEventListener("dblclick", doubleClick), options;
+
+   function tear() {
+      if (surface == null) return;
+      parentDocument.removeEventListener("mousemove", move, options);
+      parentDocument.removeEventListener("mouseup", end, options);
+      if (onDblClick) parentDocument.removeEventListener("dblclick", onDblClick, options);
+      document.body.removeChild(surface);
+      surface = null;
+   }
+
+   function doubleClick(e) {
+      try {
+         onDblClick(e);
+      } finally {
+         tear();
+      }
+   }
+
+   e.stopPropagation();
+
+   function move(e) {
+      if (!active) {
+         tear();
+         return;
+      }
+
+      //if mouse moves double clicking is off
+      onDblClick = null;
+
+      batchUpdates(() => {
+         if (onMouseMove) onMouseMove(e, captureData);
+         e.stopPropagation();
+         e.preventDefault(); //disable text selection
+      });
+   }
+
+   function end(e) {
+      active = false;
+      batchUpdates(() => {
+         // if (surface.releaseCapture)
+         //    surface.releaseCapture();
+
+         if (!onDblClick) surface.style.display = "none";
+         try {
+            if (onMouseUp) onMouseUp(e, captureData);
+         } finally {
+            if (onDblClick) {
+               //keep the surface a little longer to detect double clicks
+               setTimeout(tear, 1500);
+            } else tear();
+         }
+      });
+   }
+}
+
+export function captureMouseOrTouch2(e, { onMouseMove, onMouseUp, onDblClick, captureData, cursor }) {
+   if (e.type.indexOf("touch") == 0) {
+      let el = e.currentTarget;
+
+      let move = (e) => {
+         batchUpdates(() => {
+            if (onMouseMove) onMouseMove(e, captureData);
+            e.preventDefault();
+         });
+      };
+
+      let end = (e) => {
+         batchUpdates(() => {
+            el.removeEventListener("touchmove", move);
+            el.removeEventListener("touchend", end);
+
+            if (onMouseUp) onMouseUp(e);
+
+            e.preventDefault();
+         });
+      };
+
+      el.addEventListener("touchmove", move);
+      el.addEventListener("touchend", end);
+
+      e.stopPropagation();
+   } else captureMouse2(e, { onMouseMove, onMouseUp, captureData, onDblClick, cursor });
+}
+
+export function captureMouse(e, onMouseMove, onMouseUp, captureData, cursor) {
+   captureMouse2(e, {
+      onMouseMove,
+      onMouseUp,
+      captureData,
+      cursor,
+   });
+}
+
+export function captureMouseOrTouch(e, onMouseMove, onMouseUp, captureData, cursor) {
+   captureMouseOrTouch2(e, { onMouseMove, onMouseUp, captureData, cursor });
+}
+
+export function getCursorPos(e) {
+   let p = (e.touches && e.touches[0]) || e;
+   let offset = getParentFrameBoundingClientRect(e.target);
+   return {
+      clientX: p.clientX + offset.left,
+      clientY: p.clientY + offset.top,
+   };
+}