cx 26.3.3 → 26.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cx",
-  "version": "26.3.3",
+  "version": "26.3.4",
   "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
   "exports": {
     "./data": {

package/src/charts/variables.scss

@@ -36,8 +36,7 @@ $cx-default-chart-legend-entry-gap: 5px !default;
 $cx-default-chart-legend-shape-color: rgba(128, 128, 128, 0.1) !default;
 $cx-default-chart-legend-shape-stroke-width: 1px !default;
 
-$cx-dependencies: map.merge(
-   $cx-dependencies,
+@include cx-register-dependencies(
    (
       "cx/charts/Bar": "cx/charts/palette",
       "cx/charts/BarGraph": "cx/charts/palette",

package/src/util/scss/include.scss

@@ -1,56 +1,69 @@
-@forward "colors";
-@use "call-once" as *;
-@use "colors" as *;
-@use "sass:map";
-
-$cx-include-all: true !default;
-
-$cx-excluded: () !default;
-$cx-used: null !default;
-
-$cx-dependencies: () !default;
-
-@function cx-should-include($name, $once: true) {
-   @return (
-         (map.get($cx-excluded, $name) != true) and
-            (
-               $cx-include-all or
-                  ($cx-used != null and map.get($cx-used, $name) == true)
-            )
-      )
-      and ($once != true or cx-call-once($name));
-}
-
-@function cx-included($name) {
-   @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);
-   }
-}
+@forward "colors";
+@use "call-once" as *;
+@use "colors" as *;
+@use "sass:map";
+
+$cx-include-all: true !default;
+
+$cx-excluded: () !default;
+$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))
+      )
+      and ($once != true or cx-call-once($name));
+}
+
+@function cx-included($name) {
+   @return cx-called-once($name);
+}
+
+@mixin cx-widgets($names...) {
+   $cx-used: () !default !global;
+
+   @each $name in $names {
+      $cx-used: map.merge(
+         $cx-used,
+         (
+            $name: true,
+         )
+      ) !global;
+   }
+}

package/src/widgets/drag-drop/variables.scss

@@ -10,8 +10,7 @@ $cx-dragclone-style: (
    opacity: 0.9,
 ) !default;
 
-$cx-dependencies: map.merge(
-   $cx-dependencies,
+@include cx-register-dependencies(
    (
       "cx/widgets/DragSource": "cx/widgets/DragClone",
    )

package/src/widgets/form/variables.scss

@@ -91,8 +91,7 @@ $cx-default-input-tag-padding: cx-calc($cx-default-input-padding-top, -$cx-defau
 @forward "./Radio.variables.scss";
 @forward "./ColorPicker.variables.scss";
 
-$cx-dependencies: map.merge(
-   $cx-dependencies,
+@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"

package/src/widgets/grid/variables.scss

@@ -40,8 +40,7 @@ $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,
+@include cx-register-dependencies(
    (
       "cx/widgets/Grid": "cx/widgets/DragClone",
    )

package/src/widgets/nav/Menu.variables.scss

@@ -4,8 +4,7 @@
 // MENU
 $cx-default-menu-separator-color: lightgray !default;
 
-$cx-dependencies: map.merge(
-   $cx-dependencies,
+@include cx-register-dependencies(
    (
       "cx/widgets/Menu": "cx/widgets/MenuItem",
       "cx/widgets/MenuItem": "cx/widgets/Dropdown",

package/src/widgets/nav/variables.scss

@@ -11,8 +11,7 @@ $cx-default-scroller-button-size: 20px !default;
 @forward "Menu.variables";
 @forward "Tab.variables";
 
-$cx-dependencies: map.merge(
-   $cx-dependencies,
+@include cx-register-dependencies(
    (
       "cx/widgets/HScroller": "cx/widgets/Scroller",
       "cx/widgets/VScroller": "cx/widgets/Scroller",

package/src/widgets/overlay/variables.scss

@@ -40,8 +40,7 @@ $cx-default-toast-padding: 10px !default;
 // WINDOW
 @forward "Window.variables";
 
-$cx-dependencies: map.merge(
-   $cx-dependencies,
+@include cx-register-dependencies(
    (
       "cx/widgets/Overlay": "cx/widgets/captureMouse",
       "cx/widgets/Dropdown": "cx/widgets/Overlay",

package/src/widgets/variables.scss

@@ -50,8 +50,7 @@ $cx-default-progressbar-indicator-background-color: rgba(#98d4ff, 0.8) !default;
 @forward "drag-drop/variables";
 @forward "overlay/variables";
 
-$cx-dependencies: map.merge(
-   include.$cx-dependencies,
+@include include.cx-register-dependencies(
    (
       "cx/widgets/FlexRow": "cx/widgets/FlexBox",
       "cx/widgets/FlexCol": "cx/widgets/FlexBox",