cx 26.1.0 → 26.1.2

package/src/widgets/AccessorBindings.spec.tsx

@@ -1,90 +1,90 @@
-import assert from "assert";
-import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
-import { Store } from "../data/Store";
-import { expr } from "../ui";
-import { createTestRenderer } from "../util/test/createTestRenderer";
-
-interface Model {
-   $page: {
-      text?: string;
-      a?: number;
-      b?: number;
-   };
-}
-
-let { $page } = createAccessorModelProxy<Model>();
-
-describe("Accessors", () => {
-   it("work as regular bindings", () => {
-      let widget = (
-         <cx>
-            <div text={$page.text} />
-         </cx>
-      );
-
-      let store = new Store<Model>({
-         data: {
-            $page: {
-               text: "Test",
-            },
-         },
-      });
-
-      const component = createTestRenderer(store, widget);
-
-      let tree = component.toJSON();
-      assert(tree && !Array.isArray(tree));
-      assert(tree.type === "div");
-      assert.deepStrictEqual(tree.children, ["Test"]);
-   });
-
-   it("support expressions", () => {
-      let widget = (
-         <cx>
-            <div text={expr($page.a, $page.b, (a, b) => a + b)} />
-         </cx>
-      );
-
-      let store = new Store<Model>({
-         data: {
-            $page: {
-               a: 1,
-               b: 3,
-            },
-         },
-      });
-
-      const component = createTestRenderer(store, widget);
-
-      let tree = component.toJSON();
-      assert(tree && !Array.isArray(tree));
-      assert(tree.type === "div");
-      assert.deepStrictEqual(tree.children, ["4"]);
-   });
-
-   it("expr infers correct types from accessor chains", () => {
-      let selector = expr($page.a, $page.b, (a, b) => {
-         // a and b should be inferred as number | undefined
-         const typedA: number | undefined = a;
-         const typedB: number | undefined = b;
-         // @ts-expect-error - a should not be string
-         const wrongA: string = a;
-         // @ts-expect-error - b should not be string
-         const wrongB: string = b;
-         return (typedA ?? 0) + (typedB ?? 0);
-      });
-      assert.ok(selector);
-   });
-
-   it("expr resolves AccessorChain<any> and nested properties to any", () => {
-      let m = createAccessorModelProxy<{ data: any }>();
-      let selector = expr(m.data.nested.value, (value) => {
-         // value should be any, so all assignments should work
-         const asString: string = value;
-         const asNumber: number = value;
-         const asBoolean: boolean = value;
-         return value;
-      });
-      assert.ok(selector);
-   });
-});
+import assert from "assert";
+import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
+import { Store } from "../data/Store";
+import { expr } from "../ui";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+
+interface Model {
+   $page: {
+      text?: string;
+      a?: number;
+      b?: number;
+   };
+}
+
+let { $page } = createAccessorModelProxy<Model>();
+
+describe("Accessors", () => {
+   it("work as regular bindings", async () => {
+      let widget = (
+         <cx>
+            <div text={$page.text} />
+         </cx>
+      );
+
+      let store = new Store<Model>({
+         data: {
+            $page: {
+               text: "Test",
+            },
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree));
+      assert(tree.type === "div");
+      assert.deepStrictEqual(tree.children, ["Test"]);
+   });
+
+   it("support expressions", async () => {
+      let widget = (
+         <cx>
+            <div text={expr($page.a, $page.b, (a, b) => a + b)} />
+         </cx>
+      );
+
+      let store = new Store<Model>({
+         data: {
+            $page: {
+               a: 1,
+               b: 3,
+            },
+         },
+      });
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree));
+      assert(tree.type === "div");
+      assert.deepStrictEqual(tree.children, ["4"]);
+   });
+
+   it("expr infers correct types from accessor chains", () => {
+      let selector = expr($page.a, $page.b, (a, b) => {
+         // a and b should be inferred as number | undefined
+         const typedA: number | undefined = a;
+         const typedB: number | undefined = b;
+         // @ts-expect-error - a should not be string
+         const wrongA: string = a;
+         // @ts-expect-error - b should not be string
+         const wrongB: string = b;
+         return (typedA ?? 0) + (typedB ?? 0);
+      });
+      assert.ok(selector);
+   });
+
+   it("expr resolves AccessorChain<any> and nested properties to any", () => {
+      let m = createAccessorModelProxy<{ data: any }>();
+      let selector = expr(m.data.nested.value, (value) => {
+         // value should be any, so all assignments should work
+         const asString: string = value;
+         const asNumber: number = value;
+         const asBoolean: boolean = value;
+         return value;
+      });
+      assert.ok(selector);
+   });
+});

package/src/widgets/Button.scss

@@ -1,119 +1,119 @@
-@use "sass:map";
-
-@mixin cx-button(
-   $name: "button",
-   $state-style-map: $cx-button-state-style-map,
-   $mods: $cx-button-mods,
-   $icon-size: $cx-default-icon-size,
-   $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} {
-      position: relative;
-      box-sizing: border-box;
-      display: inline-block;
-
-      $line-height: cx-get-state-rule($state-style-map, default, "line-height", 1.2em);
-      $padding: cx-get-state-rule($state-style-map, default, "padding", 0);
-      $border-width: cx-get-state-rule($state-style-map, default, "border-width", 1px);
-
-      height: cx-calc(
-         $line-height,
-         cx-top($padding),
-         cx-bottom($padding),
-         cx-top($border-width),
-         cx-bottom($border-width)
-      );
-
-      @include cx-add-state-rules($state-style-map, "default");
-
-      &::-moz-focus-inner {
-         border: 0;
-         padding: 0;
-         margin: -1px;
-      }
-
-      &:hover {
-         @include cx-add-state-rules($state-style-map, "hover");
-      }
-
-      &:focus {
-         @include cx-add-state-rules($state-style-map, "focus");
-      }
-
-      &:hover:focus {
-         @include cx-add-state-rules($state-style-map, "hover-focus");
-      }
-
-      &:active,
-      &.#{$state}pressed {
-         @include cx-add-state-rules($state-style-map, "active");
-      }
-
-      &[disabled],
-      &.#{$state}disabled {
-         @include cx-add-state-rules($state-style-map, "disabled");
-      }
-
-      @each $modname, $config in $mods {
-         &.#{$mod}#{$modname} {
-            @include cx-add-state-rules($config, default);
-
-            &[disabled],
-            &.#{$state}disabled {
-               @include cx-add-state-rules($config, disabled);
-            }
-
-            &:hover {
-               @include cx-add-state-rules($config, hover);
-            }
-
-            &:focus {
-               @include cx-add-state-rules($config, focus);
-            }
-
-            &:active,
-            &.#{$state}pressed {
-               @include cx-add-state-rules($config, active);
-            }
-         }
-      }
-   }
-
-   $padding: cx-get-state-rule($state-style-map, default, padding);
-
-   .#{$element}#{$name}-icon {
-      display: inline-block;
-      position: absolute;
-      top: 50%;
-      left: cx-left($padding) * 0.5;
-      margin-top: -$icon-size * 0.5;
-      height: $icon-size;
-      width: $icon-size;
-      line-height: $icon-size;
-      text-align: center;
-   }
-
-   .#{$element}#{$name}-baseline {
-      display: inline-block;
-      width: 1px;
-      margin-left: -1px;
-   }
-
-   .#{$block}#{$name}.#{$state}icon {
-      padding: cx-top($padding) cx-right($padding) cx-bottom($padding) cx-calc(cx-left($padding), $icon-size);
-
-      &.#{$state}empty {
-         padding: cx-top($padding) cx-right($padding) * 0.5 cx-bottom($padding)
-            cx-calc(cx-left($padding) * 0.5, $icon-size);
-      }
-   }
-}
-
-@if (cx-should-include("cx/widgets/Button")) {
-   @include cx-button;
-}
+@use "sass:map";
+
+@mixin cx-button(
+   $name: "button",
+   $state-style-map: $cx-button-state-style-map,
+   $mods: $cx-button-mods,
+   $icon-size: $cx-default-icon-size,
+   $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} {
+      position: relative;
+      box-sizing: border-box;
+      display: inline-block;
+
+      $line-height: cx-get-state-rule($state-style-map, default, "line-height", 1.2em);
+      $padding: cx-get-state-rule($state-style-map, default, "padding", 0);
+      $border-width: cx-get-state-rule($state-style-map, default, "border-width", 1px);
+
+      height: cx-calc(
+         $line-height,
+         cx-top($padding),
+         cx-bottom($padding),
+         cx-top($border-width),
+         cx-bottom($border-width)
+      );
+
+      @include cx-add-state-rules($state-style-map, "default");
+
+      &::-moz-focus-inner {
+         border: 0;
+         padding: 0;
+         margin: -1px;
+      }
+
+      &:hover {
+         @include cx-add-state-rules($state-style-map, "hover");
+      }
+
+      &:focus {
+         @include cx-add-state-rules($state-style-map, "focus");
+      }
+
+      &:hover:focus {
+         @include cx-add-state-rules($state-style-map, "hover-focus");
+      }
+
+      &:active,
+      &.#{$state}pressed {
+         @include cx-add-state-rules($state-style-map, "active");
+      }
+
+      &[disabled],
+      &.#{$state}disabled {
+         @include cx-add-state-rules($state-style-map, "disabled");
+      }
+
+      @each $modname, $config in $mods {
+         &.#{$mod}#{$modname} {
+            @include cx-add-state-rules($config, default);
+
+            &[disabled],
+            &.#{$state}disabled {
+               @include cx-add-state-rules($config, disabled);
+            }
+
+            &:hover {
+               @include cx-add-state-rules($config, hover);
+            }
+
+            &:focus {
+               @include cx-add-state-rules($config, focus);
+            }
+
+            &:active,
+            &.#{$state}pressed {
+               @include cx-add-state-rules($config, active);
+            }
+         }
+      }
+   }
+
+   $padding: cx-get-state-rule($state-style-map, default, padding);
+
+   .#{$element}#{$name}-icon {
+      display: inline-block;
+      position: absolute;
+      top: 50%;
+      left: cx-left($padding) * 0.5;
+      margin-top: -$icon-size * 0.5;
+      height: $icon-size;
+      width: $icon-size;
+      line-height: $icon-size;
+      text-align: center;
+   }
+
+   .#{$element}#{$name}-baseline {
+      display: inline-block;
+      width: 1px;
+      margin-left: -1px;
+   }
+
+   .#{$block}#{$name}.#{$state}icon {
+      padding: cx-top($padding) cx-right($padding) cx-bottom($padding) cx-calc(cx-left($padding), $icon-size);
+
+      &.#{$state}empty {
+         padding: cx-top($padding) cx-right($padding) * 0.5 cx-bottom($padding)
+            cx-calc(cx-left($padding) * 0.5, $icon-size);
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/Button")) {
+   @include cx-button;
+}