cx 26.3.5 → 26.3.7

package/src/widgets/form/variables.scss

@@ -1,110 +1,110 @@
-@use "sass:map";
-@use "../../util/scss/include.scss" as *;
-@use "../../util/scss/defaults.scss" as *;
-@use "../../util/scss/clockwise.scss" as *;
-@use "../../util/scss/calc.scss" as *;
-@use "../box.scss" as *;
-@use "./Field.variables.scss" as *;
-
-// Label
-$cx-default-label-padding: $cx-default-box-padding 0 !default;
-$cx-default-label-font-size: $cx-default-box-font-size !default;
-$cx-default-label-font-family: $cx-default-box-font-family !default;
-$cx-default-label-font-weight: normal !default;
-$cx-default-label-line-height: $cx-default-box-line-height !default;
-$cx-default-label-color: null !default;
-$cx-default-label-asterisk-color: #a80000 !default;
-
-// DATE TIME PICKER
-$cx-default-datetimepicker-font-size: $cx-default-font-size !default;
-$cx-default-datetimepicker-background-color: #fff !default;
-$cx-default-datetimepicker-border-width: 1px !default;
-$cx-default-datetimepicker-border-radius: 0 !default;
-$cx-default-datetimepicker-border-color: #d3d3d3 !default;
-$cx-default-datetimepicker-padding: 0 5px !default;
-
-// wheel
-$cx-default-wheel-clip-background-color: #fff !default;
-$cx-default-wheel-clip-border-width: 1px !default;
-$cx-default-wheel-clip-border-radius: 0 !default;
-$cx-default-wheel-clip-border-color: #d3d3d3 !default;
-
-$cx-wheel-selection-state-style-map: (
-   default: (
-      border-width: 2px 0 2px 0,
-      border-style: solid,
-      border-color: #9bc8ff,
-      background-color: rgba(#9bc8ff, 0.1),
-   ),
-   active: (
-      border-color: #3c7eff,
-      background: rgba(#3c7eff, 0.1),
-   ),
-) !default;
-
-// COLORFIELD
-$cx-default-colorfield-font-family: "Consolas", monospace !default;
-
-// MONTHPICKER
-@forward "./MonthPicker.variables.scss";
-
-// SLIDER
-$cx-default-slider-axis-size: 8px !default;
-$cx-default-slider-axis-background-color: rgba(128, 128, 128, 0.2) !default;
-$cx-default-slider-range-background-color: #98d4ff !default;
-
-// handle
-$cx-default-slider-handle-size: 18px !default;
-$cx-default-slider-handle-background-color: rgb(235, 235, 235) !default;
-$cx-default-slider-handle-border-width: 1px !default;
-$cx-default-slider-handle-border-color: rgb(204, 204, 204) !default;
-$cx-default-slider-handle-border-radius: 50% !default;
-$cx-default-slider-handle-box-shadow: 0 0 3px rgba(128, 128, 128, 0.3) !default;
-
-// SWITCH
-$cx-default-switch-axis-background-color: $cx-default-slider-axis-background-color !default;
-$cx-default-switch-range-background-color: #87cc8a !default;
-$cx-default-switch-axis-size: 20px !default;
-$cx-default-switch-width: 32px !default;
-
-$cx-default-switch-handle-background-color: $cx-default-slider-handle-background-color !default;
-$cx-default-switch-handle-border-width: $cx-default-slider-handle-border-width !default;
-$cx-default-switch-handle-border-color: $cx-default-slider-handle-border-color !default;
-$cx-default-switch-handle-border-radius: $cx-default-slider-handle-border-radius !default;
-$cx-default-switch-handle-box-shadow: $cx-default-slider-handle-box-shadow !default;
-$cx-default-switch-handle-size: 18px !default;
-
-// TEXTAREA
-$cx-default-textarea-width: 300px !default;
-
-// LOOKUPFIELD TAG
-$cx-default-input-tag-spacing: 3px !default;
-$cx-default-input-tag-font-size: null !default;
-$cx-default-input-tag-background-color: #eee !default;
-$cx-default-input-tag-border-radius: $cx-default-border-radius !default;
-$cx-default-input-tag-padding: cx-calc($cx-default-input-padding-top, -$cx-default-input-tag-spacing) !default;
-
-// Note: Field.variables.scss is @use'd above, not @forward'd here
-// to avoid "module already loaded" errors with @forward...with() configuration
-@forward "./Calendar.variables.scss";
-@forward "./Checkbox.variables.scss";
-@forward "./Radio.variables.scss";
-@forward "./ColorPicker.variables.scss";
-
-@include cx-register-dependencies(
-   (
-      "cx/widgets/Field": "cx/widgets/Label" "cx/widgets/Tooltip" "cx/widgets/ValidationError" "cx/widgets/HelpText",
-      "cx/widgets/DateTimeField": "cx/widgets/Field" "cx/widgets/DateTimePicker" "cx/widgets/Calendar"
-         "cx/widgets/Dropdown",
-      "cx/widgets/DateField": "cx/widgets/DateTimeField",
-      "cx/widgets/TimeField": "cx/widgets/DateTimeField",
-      "cx/widgets/TextField": "cx/widgets/Field",
-      "cx/widgets/NumberField": "cx/widgets/Field",
-      "cx/widgets/MonthField": "cx/widgets/Field" "cx/widgets/MonthPicker" "cx/widgets/Dropdown",
-      "cx/widgets/ColorField": "cx/widgets/Field" "cx/widgets/ColorPicker" "cx/widgets/Dropdown",
-      "cx/widgets/LookupField": "cx/widgets/Field" "cx/widgets/Dropdown" "cx/widgets/List",
-      "cx/widgets/Select": "cx/widgets/Field",
-      "cx/widgets/Slider": "cx/widgets/Field",
-      "cx/widgets/Switch": "cx/widgets/Field",
-   )
-);
+@use "sass:map";
+@use "../../util/scss/include.scss" as *;
+@use "../../util/scss/defaults.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../box.scss" as *;
+@use "./Field.variables.scss" as *;
+
+// Label
+$cx-default-label-padding: $cx-default-box-padding 0 !default;
+$cx-default-label-font-size: $cx-default-box-font-size !default;
+$cx-default-label-font-family: $cx-default-box-font-family !default;
+$cx-default-label-font-weight: normal !default;
+$cx-default-label-line-height: $cx-default-box-line-height !default;
+$cx-default-label-color: null !default;
+$cx-default-label-asterisk-color: #a80000 !default;
+
+// DATE TIME PICKER
+$cx-default-datetimepicker-font-size: $cx-default-font-size !default;
+$cx-default-datetimepicker-background-color: #fff !default;
+$cx-default-datetimepicker-border-width: 1px !default;
+$cx-default-datetimepicker-border-radius: 0 !default;
+$cx-default-datetimepicker-border-color: #d3d3d3 !default;
+$cx-default-datetimepicker-padding: 0 5px !default;
+
+// wheel
+$cx-default-wheel-clip-background-color: #fff !default;
+$cx-default-wheel-clip-border-width: 1px !default;
+$cx-default-wheel-clip-border-radius: 0 !default;
+$cx-default-wheel-clip-border-color: #d3d3d3 !default;
+
+$cx-wheel-selection-state-style-map: (
+   default: (
+      border-width: 2px 0 2px 0,
+      border-style: solid,
+      border-color: #9bc8ff,
+      background-color: rgba(#9bc8ff, 0.1),
+   ),
+   active: (
+      border-color: #3c7eff,
+      background: rgba(#3c7eff, 0.1),
+   ),
+) !default;
+
+// COLORFIELD
+$cx-default-colorfield-font-family: "Consolas", monospace !default;
+
+// MONTHPICKER
+@forward "./MonthPicker.variables.scss";
+
+// SLIDER
+$cx-default-slider-axis-size: 8px !default;
+$cx-default-slider-axis-background-color: rgba(128, 128, 128, 0.2) !default;
+$cx-default-slider-range-background-color: #98d4ff !default;
+
+// handle
+$cx-default-slider-handle-size: 18px !default;
+$cx-default-slider-handle-background-color: rgb(235, 235, 235) !default;
+$cx-default-slider-handle-border-width: 1px !default;
+$cx-default-slider-handle-border-color: rgb(204, 204, 204) !default;
+$cx-default-slider-handle-border-radius: 50% !default;
+$cx-default-slider-handle-box-shadow: 0 0 3px rgba(128, 128, 128, 0.3) !default;
+
+// SWITCH
+$cx-default-switch-axis-background-color: $cx-default-slider-axis-background-color !default;
+$cx-default-switch-range-background-color: #87cc8a !default;
+$cx-default-switch-axis-size: 20px !default;
+$cx-default-switch-width: 32px !default;
+
+$cx-default-switch-handle-background-color: $cx-default-slider-handle-background-color !default;
+$cx-default-switch-handle-border-width: $cx-default-slider-handle-border-width !default;
+$cx-default-switch-handle-border-color: $cx-default-slider-handle-border-color !default;
+$cx-default-switch-handle-border-radius: $cx-default-slider-handle-border-radius !default;
+$cx-default-switch-handle-box-shadow: $cx-default-slider-handle-box-shadow !default;
+$cx-default-switch-handle-size: 18px !default;
+
+// TEXTAREA
+$cx-default-textarea-width: 300px !default;
+
+// LOOKUPFIELD TAG
+$cx-default-input-tag-spacing: 3px !default;
+$cx-default-input-tag-font-size: null !default;
+$cx-default-input-tag-background-color: #eee !default;
+$cx-default-input-tag-border-radius: $cx-default-border-radius !default;
+$cx-default-input-tag-padding: cx-calc($cx-default-input-padding-top, -$cx-default-input-tag-spacing) !default;
+
+// Note: Field.variables.scss is @use'd above, not @forward'd here
+// to avoid "module already loaded" errors with @forward...with() configuration
+@forward "./Calendar.variables.scss";
+@forward "./Checkbox.variables.scss";
+@forward "./Radio.variables.scss";
+@forward "./ColorPicker.variables.scss";
+
+@include cx-register-dependencies(
+   (
+      "cx/widgets/Field": "cx/widgets/Label" "cx/widgets/Tooltip" "cx/widgets/ValidationError" "cx/widgets/HelpText",
+      "cx/widgets/DateTimeField": "cx/widgets/Field" "cx/widgets/DateTimePicker" "cx/widgets/Calendar"
+         "cx/widgets/Dropdown",
+      "cx/widgets/DateField": "cx/widgets/DateTimeField",
+      "cx/widgets/TimeField": "cx/widgets/DateTimeField",
+      "cx/widgets/TextField": "cx/widgets/Field",
+      "cx/widgets/NumberField": "cx/widgets/Field",
+      "cx/widgets/MonthField": "cx/widgets/Field" "cx/widgets/MonthPicker" "cx/widgets/Dropdown",
+      "cx/widgets/ColorField": "cx/widgets/Field" "cx/widgets/ColorPicker" "cx/widgets/Dropdown",
+      "cx/widgets/LookupField": "cx/widgets/Field" "cx/widgets/Dropdown" "cx/widgets/List",
+      "cx/widgets/Select": "cx/widgets/Field",
+      "cx/widgets/Slider": "cx/widgets/Field",
+      "cx/widgets/Switch": "cx/widgets/Field",
+   )
+);

package/src/widgets/grid/Grid.tsx

@@ -2647,6 +2647,7 @@ class GridComponent extends VDOM.Component<GridComponentProps, GridComponentStat
                   pageRecords.forEach((page) => {
                      if (Array.isArray(page)) {
                         records.push(...page);
+                        lastPage = records.length < pageSize;
                      } else {
                         if (!Array.isArray(page.records))
                            throw new Error(
@@ -2663,14 +2664,17 @@ class GridComponent extends VDOM.Component<GridComponentProps, GridComponentStat
 
                   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);
@@ -2693,7 +2697,7 @@ class GridComponent extends VDOM.Component<GridComponentProps, GridComponentStat
                })
                .catch((error) => {
                   this.loading = false;
-                  if (widget.onLoadingError) instance.invoke(error, "onLoadingError", instance);
+                  if (widget.onLoadingError) instance.invoke("onLoadingError", error, instance);
                });
          }, 30);
 

package/src/widgets/grid/variables.scss

@@ -1,47 +1,47 @@
-@use "sass:map";
-@use "../box" as *;
-@use "../../util/scss/defaults" as *;
-@use "../../util/scss/include" as *;
-@use "../../util/scss/clockwise.scss" as *;
-@use "../../util/scss/calc.scss" as *;
-
-// GRID
-$cx-default-grid-font-size: $cx-default-box-font-size !default;
-$cx-default-grid-border-color: $cx-default-border-color !default;
-$cx-default-grid-background: null !default;
-$cx-default-grid-border-radius: null !default;
-$cx-default-grid-box-shadow: null !default;
-
-// header
-$cx-default-grid-header-font-size: $cx-default-box-font-size !default;
-$cx-default-grid-header-font-weight: normal !default;
-$cx-default-grid-header-line-height: null !default;
-$cx-default-grid-header-color: $cx-default-color !default;
-$cx-default-grid-header-background-color: #eee !default;
-$cx-default-grid-header-border-color: $cx-default-border-color !default;
-$cx-default-grid-header-box-shadow: null !default;
-$cx-default-grid-header-padding: null !default;
-
-// data
-$cx-default-grid-data-font-size: null !default;
-$cx-default-grid-data-font-weight: null !default;
-$cx-default-grid-data-line-height: null !default;
-$cx-default-grid-data-background-color: transparent !default;
-$cx-default-grid-data-alternate-background-color: null !default;
-$cx-default-grid-data-border-color: $cx-default-grid-border-color !default;
-$cx-default-grid-data-padding: 5px !default;
-$cx-default-grid-scroll-wrapper-padding-top: 0 !default;
-$cx-default-grid-caption-gap: 15px !default;
-
-// pagination
-$cx-grid-pagination-default-border-width: $cx-default-border-width !default;
-$cx-grid-pagination-default-border-color: $cx-default-border-color !default;
-$cx-grid-pagination-default-border-radius: null !default;
-$cx-grid-pagination-default-outer-border-radius: $cx-default-border-radius !default;
-$cx-grid-pagination-default-padding: $cx-default-box-padding-top cx-multiply(2, $cx-default-box-padding-top) !default;
-
-@include cx-register-dependencies(
-   (
-      "cx/widgets/Grid": "cx/widgets/DragClone",
-   )
-);
+@use "sass:map";
+@use "../box" as *;
+@use "../../util/scss/defaults" as *;
+@use "../../util/scss/include" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+
+// GRID
+$cx-default-grid-font-size: $cx-default-box-font-size !default;
+$cx-default-grid-border-color: $cx-default-border-color !default;
+$cx-default-grid-background: null !default;
+$cx-default-grid-border-radius: null !default;
+$cx-default-grid-box-shadow: null !default;
+
+// header
+$cx-default-grid-header-font-size: $cx-default-box-font-size !default;
+$cx-default-grid-header-font-weight: normal !default;
+$cx-default-grid-header-line-height: null !default;
+$cx-default-grid-header-color: $cx-default-color !default;
+$cx-default-grid-header-background-color: #eee !default;
+$cx-default-grid-header-border-color: $cx-default-border-color !default;
+$cx-default-grid-header-box-shadow: null !default;
+$cx-default-grid-header-padding: null !default;
+
+// data
+$cx-default-grid-data-font-size: null !default;
+$cx-default-grid-data-font-weight: null !default;
+$cx-default-grid-data-line-height: null !default;
+$cx-default-grid-data-background-color: transparent !default;
+$cx-default-grid-data-alternate-background-color: null !default;
+$cx-default-grid-data-border-color: $cx-default-grid-border-color !default;
+$cx-default-grid-data-padding: 5px !default;
+$cx-default-grid-scroll-wrapper-padding-top: 0 !default;
+$cx-default-grid-caption-gap: 15px !default;
+
+// pagination
+$cx-grid-pagination-default-border-width: $cx-default-border-width !default;
+$cx-grid-pagination-default-border-color: $cx-default-border-color !default;
+$cx-grid-pagination-default-border-radius: null !default;
+$cx-grid-pagination-default-outer-border-radius: $cx-default-border-radius !default;
+$cx-grid-pagination-default-padding: $cx-default-box-padding-top cx-multiply(2, $cx-default-box-padding-top) !default;
+
+@include cx-register-dependencies(
+   (
+      "cx/widgets/Grid": "cx/widgets/DragClone",
+   )
+);

package/src/widgets/index.ts

@@ -1,63 +1,63 @@
-import { Widget } from "../ui/Widget";
-import { Text } from "../ui/Text";
-import { StaticText } from "../ui/StaticText";
-import { PureContainer } from "../ui/PureContainer";
-import { IsolatedScope } from "../ui/IsolatedScope";
-import { DetachedScope } from "../ui/DetachedScope";
-import { Restate, PrivateStore } from "../ui/Restate";
-import { DataProxy } from "../ui/DataProxy";
-import { Content } from "../ui/layout/Content";
-import { ContentPlaceholder, ContentPlaceholderScope } from "../ui/layout/ContentPlaceholder";
-import { LabelsTopLayout, LabelsTopLayoutCell } from "../ui/layout/LabelsTopLayout";
-import { LabelsLeftLayout } from "../ui/layout/LabelsLeftLayout";
-import { ContentResolver } from "../ui/ContentResolver";
-import { Rescope } from "../ui/Rescope";
-import { Repeater } from "../ui/Repeater";
-
-//re-export widgets defined in ui namespace
-export {
-   Widget,
-   StaticText,
-   Text,
-   PureContainer,
-   Content,
-   ContentPlaceholder,
-   ContentPlaceholderScope,
-   ContentResolver,
-   Rescope,
-   Repeater,
-   IsolatedScope,
-   DetachedScope,
-   Restate,
-   PrivateStore,
-   DataProxy,
-   LabelsTopLayout,
-   LabelsTopLayoutCell,
-   LabelsLeftLayout,
-};
-
-export * from "./cx";
-export * from "./HtmlElement";
-export * from "./Button";
-export * from "./DocumentTitle";
-export * from "./List";
-export * from "./Sandbox";
-export * from "./CxCredit";
-export * from "./Heading";
-export * from "./Section";
-export * from "./FlexBox";
-export * from "./Icon";
-export * from "./ProgressBar";
-export * from "./Resizer";
-export * from "./HighlightedSearchText";
-export * from "./autoFocus";
-export * from "./ReactElementWrapper";
-
-export * from "./icons/index";
-export * from "./overlay/index";
-export * from "./nav/index";
-export * from "./form/index";
-export * from "./grid/index";
-export * from "./drag-drop/index";
-
-export * from "./enableAllInternalDependencies";
+import { Widget } from "../ui/Widget";
+import { Text } from "../ui/Text";
+import { StaticText } from "../ui/StaticText";
+import { PureContainer } from "../ui/PureContainer";
+import { IsolatedScope } from "../ui/IsolatedScope";
+import { DetachedScope } from "../ui/DetachedScope";
+import { Restate, PrivateStore } from "../ui/Restate";
+import { DataProxy } from "../ui/DataProxy";
+import { Content } from "../ui/layout/Content";
+import { ContentPlaceholder, ContentPlaceholderScope } from "../ui/layout/ContentPlaceholder";
+import { LabelsTopLayout, LabelsTopLayoutCell } from "../ui/layout/LabelsTopLayout";
+import { LabelsLeftLayout } from "../ui/layout/LabelsLeftLayout";
+import { ContentResolver } from "../ui/ContentResolver";
+import { Rescope } from "../ui/Rescope";
+import { Repeater } from "../ui/Repeater";
+
+//re-export widgets defined in ui namespace
+export {
+   Widget,
+   StaticText,
+   Text,
+   PureContainer,
+   Content,
+   ContentPlaceholder,
+   ContentPlaceholderScope,
+   ContentResolver,
+   Rescope,
+   Repeater,
+   IsolatedScope,
+   DetachedScope,
+   Restate,
+   PrivateStore,
+   DataProxy,
+   LabelsTopLayout,
+   LabelsTopLayoutCell,
+   LabelsLeftLayout,
+};
+
+export * from "./cx";
+export * from "./HtmlElement";
+export * from "./Button";
+export * from "./DocumentTitle";
+export * from "./List";
+export * from "./Sandbox";
+export * from "./CxCredit";
+export * from "./Heading";
+export * from "./Section";
+export * from "./FlexBox";
+export * from "./Icon";
+export * from "./ProgressBar";
+export * from "./Resizer";
+export * from "./HighlightedSearchText";
+export * from "./autoFocus";
+export * from "./ReactElementWrapper";
+
+export * from "./icons/index";
+export * from "./overlay/index";
+export * from "./nav/index";
+export * from "./form/index";
+export * from "./grid/index";
+export * from "./drag-drop/index";
+
+export * from "./enableAllInternalDependencies";