cx 26.4.0 → 26.4.1

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", 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);
-   });
-});
+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.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;

package/src/widgets/Button.scss

@@ -1,143 +1,143 @@
-@use "sass:math";
-@use "sass:map";
-@use "./variables" as *;
-@use "./maps" as *;
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/calc.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "../util/scss/include.scss" as *;
-
-@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);
-
-   $line-height: cx-get-state-rule(
-      $state-style-map,
-      default,
-      "line-height",
-      1.2em
-   );
-
-   .#{$block}#{$name} {
-      position: relative;
-      box-sizing: border-box;
-      display: inline-block;
-
-      $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-divide(cx-left($padding), 2);
-      margin-top: cx-multiply($icon-size, -0.5);
-      height: $icon-size;
-      width: $icon-size;
-      line-height: $icon-size;
-      text-align: center;
-   }
-
-   .#{$element}#{$name}-baseline {
-      display: inline-block;
-      min-width: $line-height;
-   }
-
-   .#{$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-top($padding) cx-bottom($padding)
-            cx-top($padding);
-
-         .#{$element}#{$name}-icon {
-            left: 50%;
-            margin-left: cx-multiply($icon-size, -0.5);
-         }
-      }
-   }
-}
-
-@if (cx-should-include("cx/widgets/Button")) {
-   @include cx-button;
-}
+@use "sass:math";
+@use "sass:map";
+@use "./variables" as *;
+@use "./maps" as *;
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/calc.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "../util/scss/include.scss" as *;
+
+@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);
+
+   $line-height: cx-get-state-rule(
+      $state-style-map,
+      default,
+      "line-height",
+      1.2em
+   );
+
+   .#{$block}#{$name} {
+      position: relative;
+      box-sizing: border-box;
+      display: inline-block;
+
+      $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-divide(cx-left($padding), 2);
+      margin-top: cx-multiply($icon-size, -0.5);
+      height: $icon-size;
+      width: $icon-size;
+      line-height: $icon-size;
+      text-align: center;
+   }
+
+   .#{$element}#{$name}-baseline {
+      display: inline-block;
+      min-width: $line-height;
+   }
+
+   .#{$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-top($padding) cx-bottom($padding)
+            cx-top($padding);
+
+         .#{$element}#{$name}-icon {
+            left: 50%;
+            margin-left: cx-multiply($icon-size, -0.5);
+         }
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/Button")) {
+   @include cx-button;
+}