cx 26.3.3 → 26.3.5

package/src/ui/exprHelpers.ts

@@ -1,96 +1,96 @@
-import { computable } from "../data/computable";
-import { AccessorChain } from "../data/createAccessorModelProxy";
-import { Selector } from "../data/Selector";
-import { Format } from "../util/Format";
-import { expr } from "./expr";
-
-/** Returns a selector that converts the value to boolean using !! */
-export function truthy<V>(arg: AccessorChain<V>): Selector<boolean> {
-   return expr(arg, (x) => !!x);
-}
-
-/** Returns a selector that checks if the value is falsy using ! */
-export function falsy<V>(arg: AccessorChain<V>): Selector<boolean> {
-   return expr(arg, (x) => !x);
-}
-
-/** Returns a selector that checks if the value is strictly true (=== true) */
-export function isTrue(arg: AccessorChain<any>): Selector<boolean> {
-   return expr(arg, (x) => x === true);
-}
-
-/** Returns a selector that checks if the value is strictly false (=== false) */
-export function isFalse(arg: AccessorChain<any>): Selector<boolean> {
-   return expr(arg, (x) => x === false);
-}
-
-/** Returns a selector that checks if the value is not null or undefined (x != null) */
-export function hasValue<V>(arg: AccessorChain<V>): Selector<boolean> {
-   return expr(arg, (x) => x != null);
-}
-
-/** Returns a selector that checks if a string or array is empty (null, undefined, or length === 0) */
-export function isEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean> {
-   return expr(arg, (x) => x == null || x.length === 0);
-}
-
-/** Returns a selector that checks if a string or array is non-empty (not null/undefined and length > 0) */
-export function isNonEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean> {
-   return expr(arg, (x) => x != null && x.length > 0);
-}
-
-/** Returns a selector that checks if the value is less than the given value */
-export function lessThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x < value);
-}
-
-/** Returns a selector that checks if the value is less than or equal to the given value */
-export function lessThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x <= value);
-}
-
-/** Returns a selector that checks if the value is greater than the given value */
-export function greaterThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x > value);
-}
-
-/** Returns a selector that checks if the value is greater than or equal to the given value */
-export function greaterThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x >= value);
-}
-
-/** Returns a selector that checks if the value equals the given value using == */
-export function equal<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x == value);
-}
-
-/** Returns a selector that checks if the value does not equal the given value using != */
-export function notEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x != value);
-}
-
-/** Returns a selector that checks if the value strictly equals the given value using === */
-export function strictEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x === value);
-}
-
-/** Returns a selector that checks if the value strictly does not equal the given value using !== */
-export function strictNotEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
-   return expr(arg, (x) => x !== value);
-}
-
-/** Returns a selector that formats the value using the specified format string.
- * Format strings use semicolon-separated syntax: "formatType;param1;param2"
- * @param arg - The accessor chain to the value
- * @param fmt - The format string
- * @param nullText - Optional text to display for null/undefined values
- * @example
- * format(m.price, "n;2") // formats as number with 2 decimal places
- * format(m.date, "d") // formats as date
- * format(m.value, "p;0;2") // formats as percentage with 0-2 decimal places
- * format(m.value, "n;2", "N/A") // shows "N/A" for null values
- */
-export function format<V>(arg: AccessorChain<V>, fmt: string, nullText?: string): Selector<string> {
-   let f = nullText != null ? `${fmt}|${nullText}` : fmt;
-   return computable(arg, (x) => Format.value(x, f));
-}
+import { computable } from "../data/computable";
+import { AccessorChain } from "../data/createAccessorModelProxy";
+import { Selector } from "../data/Selector";
+import { Format } from "../util/Format";
+import { expr } from "./expr";
+
+/** Returns a selector that converts the value to boolean using !! */
+export function truthy<V>(arg: AccessorChain<V>): Selector<boolean> {
+   return expr(arg, (x) => !!x);
+}
+
+/** Returns a selector that checks if the value is falsy using ! */
+export function falsy<V>(arg: AccessorChain<V>): Selector<boolean> {
+   return expr(arg, (x) => !x);
+}
+
+/** Returns a selector that checks if the value is strictly true (=== true) */
+export function isTrue(arg: AccessorChain<any>): Selector<boolean> {
+   return expr(arg, (x) => x === true);
+}
+
+/** Returns a selector that checks if the value is strictly false (=== false) */
+export function isFalse(arg: AccessorChain<any>): Selector<boolean> {
+   return expr(arg, (x) => x === false);
+}
+
+/** Returns a selector that checks if the value is not null or undefined (x != null) */
+export function hasValue<V>(arg: AccessorChain<V>): Selector<boolean> {
+   return expr(arg, (x) => x != null);
+}
+
+/** Returns a selector that checks if a string or array is empty (null, undefined, or length === 0) */
+export function isEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean> {
+   return expr(arg, (x) => x == null || x.length === 0);
+}
+
+/** Returns a selector that checks if a string or array is non-empty (not null/undefined and length > 0) */
+export function isNonEmpty(arg: AccessorChain<string | any[] | null | undefined>): Selector<boolean> {
+   return expr(arg, (x) => x != null && x.length > 0);
+}
+
+/** Returns a selector that checks if the value is less than the given value */
+export function lessThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x < value);
+}
+
+/** Returns a selector that checks if the value is less than or equal to the given value */
+export function lessThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x <= value);
+}
+
+/** Returns a selector that checks if the value is greater than the given value */
+export function greaterThan<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x > value);
+}
+
+/** Returns a selector that checks if the value is greater than or equal to the given value */
+export function greaterThanOrEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x >= value);
+}
+
+/** Returns a selector that checks if the value equals the given value using == */
+export function equal<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x == value);
+}
+
+/** Returns a selector that checks if the value does not equal the given value using != */
+export function notEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x != value);
+}
+
+/** Returns a selector that checks if the value strictly equals the given value using === */
+export function strictEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x === value);
+}
+
+/** Returns a selector that checks if the value strictly does not equal the given value using !== */
+export function strictNotEqual<V>(arg: AccessorChain<V>, value: V): Selector<boolean> {
+   return expr(arg, (x) => x !== value);
+}
+
+/** Returns a selector that formats the value using the specified format string.
+ * Format strings use semicolon-separated syntax: "formatType;param1;param2"
+ * @param arg - The accessor chain to the value
+ * @param fmt - The format string
+ * @param nullText - Optional text to display for null/undefined values
+ * @example
+ * format(m.price, "n;2") // formats as number with 2 decimal places
+ * format(m.date, "d") // formats as date
+ * format(m.value, "p;0;2") // formats as percentage with 0-2 decimal places
+ * format(m.value, "n;2", "N/A") // shows "N/A" for null values
+ */
+export function format<V>(arg: AccessorChain<V>, fmt: string, nullText?: string): Selector<string> {
+   let f = nullText != null ? `${fmt}|${nullText}` : fmt;
+   return computable(arg, (x) => Format.value(x, f));
+}

package/src/util/scss/include.scss

@@ -10,13 +10,43 @@ $cx-used: null !default;
 
 $cx-dependencies: () !default;
 
+@mixin cx-register-dependencies($deps) {
+   $cx-dependencies: map.merge($cx-dependencies, $deps) !global;
+}
+
+$cx-deps-resolved: false !default;
+
+// Recursively add all transitive dependencies of $name into $used
+@function cx-resolve-module-deps($name, $used) {
+   $deps: map.get($cx-dependencies, $name);
+   @if $deps != null {
+      @each $dep in $deps {
+         @if map.get($used, $dep) != true {
+            $used: map.merge(
+               $used,
+               (
+                  $dep: true,
+               )
+            );
+            $used: cx-resolve-module-deps($dep, $used);
+         }
+      }
+   }
+   @return $used;
+}
+
 @function cx-should-include($name, $once: true) {
+   // Resolve dependencies once, on first call (after all deps are registered)
+   @if not $cx-deps-resolved and $cx-used != null {
+      @each $module in map.keys($cx-used) {
+         $cx-used: cx-resolve-module-deps($module, $cx-used) !global;
+      }
+      $cx-deps-resolved: true !global;
+   }
+
    @return (
          (map.get($cx-excluded, $name) != true) and
-            (
-               $cx-include-all or
-                  ($cx-used != null and map.get($cx-used, $name) == true)
-            )
+            ($cx-include-all or ($cx-used != null and map.get($cx-used, $name) == true))
       )
       and ($once != true or cx-call-once($name));
 }
@@ -25,32 +55,15 @@ $cx-dependencies: () !default;
    @return cx-called-once($name);
 }
 
-@function cx-widget($name) {
-   @if (map.get($cx-excluded, $name)) {
-      @return 0;
-   }
-   $cx-used: map.merge(
-      $cx-used,
-      (
-         $name: true,
-      )
-   ) !global;
-   $dummy: 1;
-   $deps: map.get($cx-dependencies, $name);
-   @if ($deps == null) {
-      @return 0;
-   }
-   @each $dep in $deps {
-      $dummy: cx-widget($dep);
-   }
-   @return $dummy;
-}
-
 @mixin cx-widgets($names...) {
-   $dummy: 1;
    $cx-used: () !default !global;
 
    @each $name in $names {
-      $dummy: cx-widget($name);
+      $cx-used: map.merge(
+         $cx-used,
+         (
+            $name: true,
+         )
+      ) !global;
    }
 }

package/src/widgets/Button.maps.scss

@@ -1,103 +1,103 @@
-@use "sass:map";
-@use "./lists" as *;
-@use "./variables" as *;
-
-$cx-button-state-style-map: (
-   default: (
-      background-color: $cx-default-button-background-color,
-      box-shadow: $cx-default-button-box-shadow,
-      border-color: $cx-default-button-border-color,
-      border-width: $cx-default-button-border-width,
-      border-radius: $cx-default-button-border-radius,
-      border-style: solid,
-      user-select: none,
-      color: $cx-default-button-color,
-      font-family: $cx-default-button-font-family,
-      font-size: $cx-default-button-font-size,
-      font-weight: $cx-default-button-font-weight,
-      line-height: $cx-default-button-line-height,
-      padding: $cx-default-button-padding,
-      cursor: pointer,
-      -webkit-appearance: none,
-      -moz-appearance: none,
-      appearance: none,
-      white-space: nowrap,
-      text-decoration: none,
-   ),
-   hover: (
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),
-      text-decoration: none,
-   ),
-   focus: (
-      outline: none,
-      box-shadow: 0 0 1px 1px rgba(77, 144, 254, 0.8),
-   ),
-   hover-focus: (),
-   disabled: (
-      color: gray,
-      box-shadow: none,
-      pointer-events: none,
-   ),
-   active: (
-      top: 1px,
-      box-shadow: none,
-   ),
-) !default;
-
-$cx-button-mods: (
-   primary: (
-      default: (
-         background-color: #1f99f8,
-         border-color: #1e88e5,
-         color: white,
-      ),
-      disabled: (
-         background-color: rgba(31, 153, 248, 0.5),
-         border-color: rgba(30, 136, 229, 0.1),
-         color: rgba(255, 255, 255, 0.6),
-      ),
-      hover: (
-         background-color: #1f99f8,
-      ),
-   ),
-   danger: (
-      default: (
-         background-color: #d32f2f,
-         border-color: #c62828,
-         color: white,
-      ),
-      disabled: (
-         background-color: rgba(211, 47, 47, 0.6),
-         border-color: rgba(198, 40, 40, 0.1),
-         color: rgba(255, 255, 255, 0.5),
-      ),
-      hover: (
-         background-color: #d32f2f,
-      ),
-   ),
-   hollow: (
-      default: (
-         background-color: transparent,
-         border-color: transparent,
-         color: inherit,
-         box-shadow: none,
-      ),
-      hover: map.merge(
-            map.get($cx-list-item, hover),
-            (
-               box-shadow: none,
-               border-color: transparent,
-            )
-         ),
-      focus: map.merge(
-            map.get($cx-list-item, selected-cursor),
-            (
-               box-shadow: none,
-               border-color: transparent,
-            )
-         ),
-      disabled: (
-         color: rgba(128, 128, 128, 0.5),
-      ),
-   ),
-) !default;
+@use "sass:map";
+@use "./lists" as *;
+@use "./variables" as *;
+
+$cx-button-state-style-map: (
+   default: (
+      background-color: $cx-default-button-background-color,
+      box-shadow: $cx-default-button-box-shadow,
+      border-color: $cx-default-button-border-color,
+      border-width: $cx-default-button-border-width,
+      border-radius: $cx-default-button-border-radius,
+      border-style: solid,
+      user-select: none,
+      color: $cx-default-button-color,
+      font-family: $cx-default-button-font-family,
+      font-size: $cx-default-button-font-size,
+      font-weight: $cx-default-button-font-weight,
+      line-height: $cx-default-button-line-height,
+      padding: $cx-default-button-padding,
+      cursor: pointer,
+      -webkit-appearance: none,
+      -moz-appearance: none,
+      appearance: none,
+      white-space: nowrap,
+      text-decoration: none,
+   ),
+   hover: (
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),
+      text-decoration: none,
+   ),
+   focus: (
+      outline: none,
+      box-shadow: 0 0 1px 1px rgba(77, 144, 254, 0.8),
+   ),
+   hover-focus: (),
+   disabled: (
+      color: gray,
+      box-shadow: none,
+      pointer-events: none,
+   ),
+   active: (
+      top: 1px,
+      box-shadow: none,
+   ),
+) !default;
+
+$cx-button-mods: (
+   primary: (
+      default: (
+         background-color: #1f99f8,
+         border-color: #1e88e5,
+         color: white,
+      ),
+      disabled: (
+         background-color: rgba(31, 153, 248, 0.5),
+         border-color: rgba(30, 136, 229, 0.1),
+         color: rgba(255, 255, 255, 0.6),
+      ),
+      hover: (
+         background-color: #1f99f8,
+      ),
+   ),
+   danger: (
+      default: (
+         background-color: #d32f2f,
+         border-color: #c62828,
+         color: white,
+      ),
+      disabled: (
+         background-color: rgba(211, 47, 47, 0.6),
+         border-color: rgba(198, 40, 40, 0.1),
+         color: rgba(255, 255, 255, 0.5),
+      ),
+      hover: (
+         background-color: #d32f2f,
+      ),
+   ),
+   hollow: (
+      default: (
+         background-color: transparent,
+         border-color: transparent,
+         color: inherit,
+         box-shadow: none,
+      ),
+      hover: map.merge(
+            map.get($cx-list-item, hover),
+            (
+               box-shadow: none,
+               border-color: transparent,
+            )
+         ),
+      focus: map.merge(
+            map.get($cx-list-item, selected-cursor),
+            (
+               box-shadow: none,
+               border-color: transparent,
+            )
+         ),
+      disabled: (
+         color: rgba(128, 128, 128, 0.5),
+      ),
+   ),
+) !default;