cx 26.1.13 → 26.2.1

package/src/widgets/Sandbox.ts

@@ -1,104 +1,104 @@
-import { Widget } from "../ui/Widget";
-import { PureContainerBase, PureContainerConfig } from "../ui/PureContainer";
-import { Binding, BindingInput } from "../data/Binding";
-import { ExposedValueView, ExposedValueViewConfig } from "../data/ExposedValueView";
-import { RenderingContext } from "../ui/RenderingContext";
-import { Instance } from "../ui/Instance";
-import { StringProp, WritableProp } from "../ui/Prop";
-import { AccessorChain } from "../data/createAccessorModelProxy";
-
-export interface SandboxConfig extends PureContainerConfig {
-   /** Binding to the object that holds sandbox data. */
-   storage: WritableProp<Record<string, any>>;
-
-   /** Key used to identify the sandbox instance within the storage. */
-   key?: StringProp;
-
-   /** Alias for `key`. */
-   accessKey?: StringProp;
-
-   /** Alias used to expose sandbox data. Default is `$page`. */
-   recordName?: string | AccessorChain<any>;
-
-   /** Alias for `recordName`. */
-   recordAlias?: string | AccessorChain<any>;
-
-   /** Indicate that parent store data should not be mutated. */
-   immutable?: boolean;
-
-   /** Indicate that sandbox store data should not be mutated. */
-   sealed?: boolean;
-}
-
-export interface SandboxInstance extends Instance {
-   store: ExposedValueView;
-}
-
-export class Sandbox extends PureContainerBase<SandboxConfig, SandboxInstance> {
-   declare storage: WritableProp<Record<string, any>>;
-   declare key?: StringProp;
-   declare recordName?: string;
-   declare recordAlias?: string;
-   declare accessKey?: StringProp;
-   declare immutable?: boolean;
-   declare sealed?: boolean;
-   declare storageBinding: Binding;
-   init(): void {
-      if (this.recordAlias) this.recordName = this.recordAlias;
-
-      if (this.accessKey) this.key = this.accessKey;
-
-      this.storageBinding = Binding.get(this.storage);
-
-      super.init();
-   }
-
-   initInstance(context: RenderingContext, instance: SandboxInstance): void {
-      instance.store = new ExposedValueView({
-         store: instance.parentStore,
-         containerBinding: this.storageBinding,
-         key: null,
-         recordName: this.recordName,
-         immutable: this.immutable,
-      });
-      super.initInstance(context, instance);
-   }
-
-   applyParentStore(instance: SandboxInstance): void {
-      instance.store.setStore(instance.parentStore);
-   }
-
-   declareData(...args: Record<string, unknown>[]): void {
-      super.declareData(
-         {
-            storage: undefined,
-            key: undefined,
-         },
-         ...args,
-      );
-   }
-
-   prepareData(context: RenderingContext, instance: SandboxInstance): void {
-      var { store, data } = instance;
-      if (store.getKey() !== data.key) {
-         //when navigating to a page using the same widget tree as the previous page
-         //everything needs to be reinstantiated, e.g. user/1 => user/2
-         instance.store = new ExposedValueView({
-            store: store,
-            containerBinding: this.storageBinding,
-            key: data.key,
-            recordName: this.recordName,
-            immutable: this.immutable,
-            sealed: this.sealed,
-         });
-         instance.clearChildrenCache();
-      }
-      super.prepareData(context, instance);
-   }
-}
-
-Sandbox.prototype.recordName = "$page";
-Sandbox.prototype.immutable = false;
-Sandbox.prototype.sealed = false;
-
-Widget.alias("sandbox", Sandbox);
+import { Widget } from "../ui/Widget";
+import { PureContainerBase, PureContainerConfig } from "../ui/PureContainer";
+import { Binding, BindingInput } from "../data/Binding";
+import { ExposedValueView, ExposedValueViewConfig } from "../data/ExposedValueView";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { StringProp, WritableProp } from "../ui/Prop";
+import { AccessorChain } from "../data/createAccessorModelProxy";
+
+export interface SandboxConfig extends PureContainerConfig {
+   /** Binding to the object that holds sandbox data. */
+   storage: WritableProp<Record<string, any>>;
+
+   /** Key used to identify the sandbox instance within the storage. */
+   key?: StringProp;
+
+   /** Alias for `key`. */
+   accessKey?: StringProp;
+
+   /** Alias used to expose sandbox data. Default is `$page`. */
+   recordName?: string | AccessorChain<any>;
+
+   /** Alias for `recordName`. */
+   recordAlias?: string | AccessorChain<any>;
+
+   /** Indicate that parent store data should not be mutated. */
+   immutable?: boolean;
+
+   /** Indicate that sandbox store data should not be mutated. */
+   sealed?: boolean;
+}
+
+export interface SandboxInstance extends Instance {
+   store: ExposedValueView;
+}
+
+export class Sandbox extends PureContainerBase<SandboxConfig, SandboxInstance> {
+   declare storage: WritableProp<Record<string, any>>;
+   declare key?: StringProp;
+   declare recordName?: string;
+   declare recordAlias?: string;
+   declare accessKey?: StringProp;
+   declare immutable?: boolean;
+   declare sealed?: boolean;
+   declare storageBinding: Binding;
+   init(): void {
+      if (this.recordAlias) this.recordName = this.recordAlias;
+
+      if (this.accessKey) this.key = this.accessKey;
+
+      this.storageBinding = Binding.get(this.storage);
+
+      super.init();
+   }
+
+   initInstance(context: RenderingContext, instance: SandboxInstance): void {
+      instance.store = new ExposedValueView({
+         store: instance.parentStore,
+         containerBinding: this.storageBinding,
+         key: null,
+         recordName: this.recordName,
+         immutable: this.immutable,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance: SandboxInstance): void {
+      instance.store.setStore(instance.parentStore);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(
+         {
+            storage: undefined,
+            key: undefined,
+         },
+         ...args,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: SandboxInstance): void {
+      var { store, data } = instance;
+      if (store.getKey() !== data.key) {
+         //when navigating to a page using the same widget tree as the previous page
+         //everything needs to be reinstantiated, e.g. user/1 => user/2
+         instance.store = new ExposedValueView({
+            store: store,
+            containerBinding: this.storageBinding,
+            key: data.key,
+            recordName: this.recordName,
+            immutable: this.immutable,
+            sealed: this.sealed,
+         });
+         instance.clearChildrenCache();
+      }
+      super.prepareData(context, instance);
+   }
+}
+
+Sandbox.prototype.recordName = "$page";
+Sandbox.prototype.immutable = false;
+Sandbox.prototype.sealed = false;
+
+Widget.alias("sandbox", Sandbox);

package/src/widgets/Section.scss

@@ -1,56 +1,56 @@
-@use "sass:map";
-
-@mixin cx-section(
-   $name: 'section',
-   $mods: $cx-section-mods,
-   $besm: $cx-besm
-) {
-
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-   $mod: map.get($besm, mod);
-
-   .#{$block}#{$name} {
-      flex-direction: column;
-      display: flex;
-      box-sizing: border-box;
-
-      @include cx-add-rules($cx-section-styles);
-
-      @each $modname, $config in $mods {
-        &.#{$mod}#{$modname} {
-          @include cx-add-state-rules($config, default);
-        }
-      }
-      
-   }
-
-   .#{$element}#{$name}-header {
-      margin: 0 1.5rem;
-      padding: 1rem 0;
-      box-sizing: border-box;
-      border-bottom: 1px solid rgba(128, 128, 128, 0.3);
-   }
-
-   .#{$element}#{$name}-body {
-      flex: 1 1 auto;
-      box-sizing: border-box;
-      overflow: auto;
-
-      .#{$state}pad > & {
-         padding: 1rem 1.5rem;
-      }
-   }
-
-   .#{$element}#{$name}-footer {
-      margin: 0 1.5rem;
-      padding: 1rem 0;
-      box-sizing: border-box;
-      border-top: 1px solid rgba(128, 128, 128, 0.3);
-   }
-}
-
-@if (cx-should-include('cx/widgets/Section')) {
-   @include cx-section();
+@use "sass:map";
+
+@mixin cx-section(
+   $name: 'section',
+   $mods: $cx-section-mods,
+   $besm: $cx-besm
+) {
+
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
+
+   .#{$block}#{$name} {
+      flex-direction: column;
+      display: flex;
+      box-sizing: border-box;
+
+      @include cx-add-rules($cx-section-styles);
+
+      @each $modname, $config in $mods {
+        &.#{$mod}#{$modname} {
+          @include cx-add-state-rules($config, default);
+        }
+      }
+      
+   }
+
+   .#{$element}#{$name}-header {
+      margin: 0 1.5rem;
+      padding: 1rem 0;
+      box-sizing: border-box;
+      border-bottom: 1px solid rgba(128, 128, 128, 0.3);
+   }
+
+   .#{$element}#{$name}-body {
+      flex: 1 1 auto;
+      box-sizing: border-box;
+      overflow: auto;
+
+      .#{$state}pad > & {
+         padding: 1rem 1.5rem;
+      }
+   }
+
+   .#{$element}#{$name}-footer {
+      margin: 0 1.5rem;
+      padding: 1rem 0;
+      box-sizing: border-box;
+      border-top: 1px solid rgba(128, 128, 128, 0.3);
+   }
+}
+
+@if (cx-should-include('cx/widgets/Section')) {
+   @include cx-section();
 }

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

@@ -1,74 +1,74 @@
-@use "sass:map";
-
-@mixin cx-dropzone($name: "dropzone", $besm: $cx-besm) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-   $mod: map.get($besm, mod);
-
-   .#{$block}#{$name} {
-      box-sizing: border-box;
-      position: relative;
-
-      &.#{$mod}hline {
-         height: 1px;
-         margin-top: -1px;
-         align-self: stretch;
-
-         &.#{$state}over {
-            background: black;
-            box-shadow: 0 0 2px black;
-         }
-      }
-
-      &.#{$mod}vline {
-         width: 1px;
-         margin-left: -1px;
-         min-height: 1em;
-         display: inline-block;
-         vertical-align: middle;
-         align-self: stretch;
-
-         &.#{$state}over {
-            background: black;
-            box-shadow: 0 0 2px black;
-         }
-      }
-
-      &.#{$mod}block {
-         min-height: 1px;
-         margin-top: -1px;
-         align-self: stretch;
-
-         &.#{$state}over {
-            height: 25px;
-            border: 2px dotted lightgray;
-            margin: 5px;
-         }
-      }
-
-      &.#{$mod}inline-block {
-         width: 1px;
-         margin-left: -1px;
-         min-height: 1em;
-         position: relative;
-         display: inline-block;
-         vertical-align: top;
-         align-self: stretch;
-
-         &:after {
-            content: " ";
-         }
-
-         &.#{$state}over {
-            width: 50px;
-            border: 2px dotted lightgray;
-            margin: 5px;
-         }
-      }
-   }
-}
-
-@if (cx-should-include("cx/widgets/DropZone")) {
-   @include cx-dropzone();
-}
+@use "sass:map";
+
+@mixin cx-dropzone($name: "dropzone", $besm: $cx-besm) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
+
+   .#{$block}#{$name} {
+      box-sizing: border-box;
+      position: relative;
+
+      &.#{$mod}hline {
+         height: 1px;
+         margin-top: -1px;
+         align-self: stretch;
+
+         &.#{$state}over {
+            background: black;
+            box-shadow: 0 0 2px black;
+         }
+      }
+
+      &.#{$mod}vline {
+         width: 1px;
+         margin-left: -1px;
+         min-height: 1em;
+         display: inline-block;
+         vertical-align: middle;
+         align-self: stretch;
+
+         &.#{$state}over {
+            background: black;
+            box-shadow: 0 0 2px black;
+         }
+      }
+
+      &.#{$mod}block {
+         min-height: 1px;
+         margin-top: -1px;
+         align-self: stretch;
+
+         &.#{$state}over {
+            height: 25px;
+            border: 2px dotted lightgray;
+            margin: 5px;
+         }
+      }
+
+      &.#{$mod}inline-block {
+         width: 1px;
+         margin-left: -1px;
+         min-height: 1em;
+         position: relative;
+         display: inline-block;
+         vertical-align: top;
+         align-self: stretch;
+
+         &:after {
+            content: " ";
+         }
+
+         &.#{$state}over {
+            width: 50px;
+            border: 2px dotted lightgray;
+            margin: 5px;
+         }
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/DropZone")) {
+   @include cx-dropzone();
+}