cx 26.2.2 → 26.2.4

package/src/widgets/grid/maps.scss

@@ -0,0 +1,110 @@
+@use "../variables" as *;
+@use "../lists" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/deep-merge" as *;
+@use "../../util/scss/clockwise.scss" as *;
+
+$cx-grid-header-state-style-map: (
+   default: (
+      font-size: $cx-default-grid-header-font-size,
+      font-weight: $cx-default-grid-header-font-weight,
+      line-height: $cx-default-grid-header-line-height,
+      color: $cx-default-grid-header-color,
+      background-color: $cx-default-grid-header-background-color,
+      border-color: $cx-default-grid-header-border-color,
+      background-clip: border-box,
+      padding: $cx-default-grid-header-padding,
+   ),
+   hover: (
+      background-color: color-mix(
+            in srgb,
+            $cx-default-grid-header-background-color,
+            black 2%
+         ),
+   ),
+   sorted: (
+      background-color: color-mix(
+            in srgb,
+            $cx-default-grid-header-background-color,
+            black 7%
+         ),
+   ),
+   sorted-hover: (
+      background-color: color-mix(
+            in srgb,
+            $cx-default-grid-header-background-color,
+            black 5%
+         ),
+   ),
+) !default;
+
+$cx-grid-data-state-style-map: cx-deep-map-merge(
+   $cx-list-item,
+   (
+      default: (
+         font-size: $cx-default-grid-data-font-size,
+         line-height: $cx-default-grid-data-line-height,
+         font-weight: $cx-default-grid-data-font-weight,
+         background-color: $cx-default-grid-data-background-color,
+         border-color: $cx-default-grid-data-border-color,
+         padding: $cx-default-grid-data-padding,
+      ),
+      alternate: (
+         background-color: $cx-default-grid-data-alternate-background-color,
+      ),
+   )
+) !default;
+
+$cx-grid-pagination-state-style-map: cx-deep-map-merge(
+   $cx-list-item,
+   ()
+) !default;
+
+$cx-grid-cell-cursor-style: (
+   left: -1px,
+   top: -1px,
+   right: -1px,
+   bottom: -1px,
+   background: rgba(green, 0.1),
+   border: 2px solid rgba(green, 1),
+);
+
+$cx-grid-group-caption-level-style-map: (
+   level-1: (
+      font-size: 115%,
+   ),
+   level-2: (
+      font-size: 130%,
+      border-bottom: 1px solid grey,
+   ),
+   level-3: (
+      font-size: 145%,
+      border-bottom: 1px solid grey,
+   ),
+   level-4: (
+      font-size: 160%,
+      border-bottom: 1px solid grey,
+   ),
+) !default;
+
+$cx-grid-group-footer-level-style-map: (
+   level-1: (
+      font-weight: bold,
+      border-top: 1px solid $cx-default-grid-border-color,
+   ),
+   level-2: (
+      font-weight: bold,
+      font-size: 110%,
+      border-top: 1px solid grey,
+   ),
+   level-3: (
+      font-weight: bold,
+      font-size: 115%,
+      border-top: 1px solid grey,
+   ),
+   level-4: (
+      font-weight: bold,
+      font-size: 120%,
+      border-top: 1px solid grey,
+   ),
+) !default;

package/src/widgets/grid/variables.scss

@@ -1,137 +1,48 @@
-// 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-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;
-
-@use "sass:color";
-
-$cx-grid-header-state-style-map: (
-   default: (
-      font-size: $cx-default-grid-header-font-size,
-      font-weight: $cx-default-grid-header-font-weight,
-      line-height: $cx-default-grid-header-line-height,
-      color: $cx-default-grid-header-color,
-      background-color: $cx-default-grid-header-background-color,
-      border-color: $cx-default-grid-header-border-color,
-      background-clip: border-box,
-      padding: $cx-default-grid-header-padding,
-   ),
-   hover: (
-      background-color: color.adjust($cx-default-grid-header-background-color, $lightness: -2%),
-   ),
-   sorted: (
-      background-color: color.adjust($cx-default-grid-header-background-color, $lightness: -7%),
-   ),
-   sorted-hover: (
-      background-color: color.adjust($cx-default-grid-header-background-color, $lightness: -5%),
-   ),
-) !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-caption-gap: 15px !default;
-
-$cx-grid-data-state-style-map: cx-deep-map-merge(
-   $cx-list-item,
-   (
-      default: (
-         font-size: $cx-default-grid-data-font-size,
-         line-height: $cx-default-grid-data-line-height,
-         font-weight: $cx-default-grid-data-font-weight,
-         background-color: $cx-default-grid-data-background-color,
-         border-color: $cx-default-grid-data-border-color,
-         padding: $cx-default-grid-data-padding,
-      ),
-      alternate: (
-         background-color: $cx-default-grid-data-alternate-background-color,
-      ),
-   )
-) !default;
-
-$cx-grid-group-caption-level-style-map: (
-   level-1: (
-      font-weight: bold,
-      font-size: 115%,
-   ),
-   level-2: (
-      font-weight: bold,
-      font-size: 130%,
-      border-bottom: 1px solid grey,
-   ),
-   level-3: (
-      font-weight: bold,
-      font-size: 145%,
-      border-bottom: 1px solid grey,
-   ),
-   level-4: (
-      font-weight: bold,
-      font-size: 160%,
-      border-bottom: 1px solid grey,
-   ),
-);
-
-$cx-grid-group-footer-level-style-map: (
-   level-1: (
-      font-weight: bold,
-      border-top: 1px solid $cx-default-grid-border-color,
-   ),
-   level-2: (
-      font-weight: bold,
-      font-size: 110%,
-      border-top: 1px solid grey,
-   ),
-   level-3: (
-      font-weight: bold,
-      font-size: 120%,
-      border-top: 1px solid grey,
-   ),
-   level-4: (
-      font-weight: bold,
-      font-size: 130%,
-      border-top: 1px solid grey,
-   ),
-);
-
-// 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-top($cx-default-box-padding) 2 * cx-top($cx-default-box-padding) !default;
-
-$cx-grid-pagination-state-style-map: cx-deep-map-merge($cx-list-item, ()) !default;
-
-$cx-grid-cell-cursor-style: (
-   left: -1px,
-   top: -1px,
-   right: -1px,
-   bottom: -1px,
-   background: rgba(green, 0.1),
-   border: 2px solid rgba(green, 1),
-);
-
-@use "sass:map";
-
-$cx-dependencies: map.merge(
-   $cx-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;
+
+$cx-dependencies: map.merge(
+   $cx-dependencies,
+   (
+      "cx/widgets/Grid": "cx/widgets/DragClone",
+   )
+);

package/src/widgets/icons/folder.tsx

@@ -1,6 +1,5 @@
 /** @jsxImportSource react */
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
+import { registerIcon } from './registry';
 
 export default registerIcon('folder', ({ key, ...props }: any) => {
    return <svg

package/src/widgets/icons/forward.tsx

@@ -1,23 +1,26 @@
 /** @jsxImportSource react */
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
+import { registerIcon } from "./registry";
 
-export default registerIcon('forward', ({ key, ...props }: any) => {
-   return <svg
-      key={key}
-      {...props}
-      viewBox="0 0 20 20">
-
-      <path fill="currentColor"
-         strokeWidth="0"
-         stroke="currentColor"
-         d="M10.15 15.5L14.5 10l-4.33-5.47-.65.47 3.98 5-4 5z" />
-
-      <path fill="currentColor"
-         strokeWidth="0"
-         stroke="currentColor"
-         d="M6.15 15.5L10.5 10 6.17 4.53 5.52 5l3.98 5-4 5z" />
-
-   </svg>
-}, true);
+export default registerIcon(
+  "forward",
+  ({ key, ...props }: any) => {
+    return (
+      <svg key={key} {...props} viewBox="0 0 20 20">
+        <path
+          fill="currentColor"
+          strokeWidth="0"
+          stroke="currentColor"
+          d="M10.15 15.5L14.5 10l-4.33-5.47-.65.47 3.98 5-4 5z"
+        />
 
+        <path
+          fill="currentColor"
+          strokeWidth="0"
+          stroke="currentColor"
+          d="M6.15 15.5L10.5 10 6.17 4.53 5.52 5l3.98 5-4 5z"
+        />
+      </svg>
+    );
+  },
+  true,
+);

package/src/widgets/icons/loading.tsx

@@ -1,25 +1,28 @@
 /** @jsxImportSource react */
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
+import { registerIcon } from "./registry";
 
-export default registerIcon('loading', ({ key, ...props }: any) => {
-   let style = {
-      animation: 'linear infinite 0.5s cx-rotate'
-   };
+export default registerIcon(
+  "loading",
+  ({ key, ...props }: any) => {
+    let style = {
+      animation: "linear infinite 0.5s cx-rotate",
+    };
 
-   if (props && props.style)
-      Object.assign(style, props.style);
+    if (props && props.style) Object.assign(style, props.style);
 
-   props = {
+    props = {
       ...props,
-      style
-   };
-
-   return <svg
-      key={key}
-      {...props}
-      viewBox="0 0 50 50">
-      <path fill="currentColor" d="M43.94 25.14c0-10.3-8.37-18.68-18.7-18.68-10.3 0-18.67 8.37-18.67 18.68h4.07c0-8.07 6.54-14.6 14.6-14.6 8.08 0 14.63 6.53 14.63 14.6h4.07z" />
-   </svg>
-}, true);
+      style,
+    };
 
+    return (
+      <svg key={key} {...props} viewBox="0 0 50 50">
+        <path
+          fill="currentColor"
+          d="M43.94 25.14c0-10.3-8.37-18.68-18.7-18.68-10.3 0-18.67 8.37-18.67 18.68h4.07c0-8.07 6.54-14.6 14.6-14.6 8.08 0 14.63 6.53 14.63 14.6h4.07z"
+        />
+      </svg>
+    );
+  },
+  true,
+);

package/src/widgets/icons/square.tsx

@@ -1,19 +1,22 @@
 /** @jsxImportSource react */
-import {VDOM} from '../../ui/Widget';
-import {registerIcon} from './registry';
-
-export default registerIcon('square', ({ key, ...props }: any) => {
-   return <svg
-      key={key}
-      {...props}
-      viewBox="0 0 64 64">
-      <rect
-         x="12"
-         y="12"
-         width="40"
-         height="40"
-         fill="currentColor"
-      />
-   </svg>
-}, true);
+import { VDOM } from "../../ui/Widget";
+import { registerIcon } from "./registry";
 
+export default registerIcon(
+  "square",
+  ({ key, ...props }: any) => {
+    return (
+      <svg key={key} {...props} viewBox="0 0 64 64">
+        <rect
+          x="12"
+          y="12"
+          width="40"
+          height="40"
+          fill="currentColor"
+          shapeRendering="crispEdges"
+        />
+      </svg>
+    );
+  },
+  true,
+);

package/src/widgets/index.scss

@@ -1,16 +1,16 @@
-@import "animations";
-@import "Button";
-@import "List";
-@import "CxCredit";
-@import "Section";
-@import "Heading";
-@import "FlexBox";
-@import "Icon";
-@import "form/index";
-@import "nav/index";
-@import "overlay/index";
-@import "grid/index";
-@import "drag-drop/index";
-@import "ProgressBar";
-@import "Resizer";
-@import "HighlightedSearchText";
+@use "animations";
+@use "Button";
+@use "List";
+@use "CxCredit";
+@use "Section";
+@use "Heading";
+@use "FlexBox";
+@use "Icon";
+@use "form/index";
+@use "nav/index" as *;
+@use "overlay/index" as *;
+@use "grid/index" as *;
+@use "drag-drop/index" as *;
+@use "ProgressBar";
+@use "Resizer";
+@use "HighlightedSearchText";

package/src/widgets/index.ts

@@ -1,58 +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 { 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,
-};
-
-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";

package/src/widgets/lists.scss

@@ -0,0 +1,42 @@
+//Lists
+$cx-list: (
+   default: (
+      -webkit-overflow-scrolling: touch,
+   ),
+   hover: (),
+   focus: (
+      outline: none,
+   ),
+);
+
+$cx-list-item: (
+   default: (),
+   hover: (
+      background-color: rgba(128, 128, 128, 0.1),
+      outline: none,
+      cursor: pointer,
+   ),
+   cursor: (
+      background-color: rgba(123, 190, 255, 0.15),
+      outline: none,
+   ),
+   selected: (
+      background-color: rgba(123, 190, 255, 0.4),
+   ),
+   selected-hover: (
+      background-color: rgba(123, 190, 255, 0.2),
+   ),
+   selected-cursor: (
+      background-color: rgba(123, 190, 255, 0.3),
+      outline: none,
+   ),
+   disabled: (
+      cursor: default,
+      opacity: 0.5,
+      pointer-events: none,
+   ),
+   active: (
+      //causes flickering
+      //background: rgba(123,190,255, 0.7),
+   ),
+) !default;