cx 24.7.5 → 24.8.0

package/src/variables.scss

@@ -1,217 +1,217 @@
-// FUNCTIONS
-@import "util/scss/index";
-
-// SCREEN SIZE
-$cx-screen-size-small: 400px !default;
-$cx-screen-size-medium: 800px !default;
-$cx-screen-size-large: 1300px !default;
-$cx-screen-size-extra-large: 1800px !default;
-
-//
-// BESM
-//
-// B - block - top level HTML element
-// E - element - part of the component (block)
-// S - state - indicator of the component state which affects the appearance
-// M - mod - user supplied instruction which overrides default appearance
-//
-
-$cx-besm: (
-   block: "cxb-",
-   element: "cxe-",
-   state: "cxs-",
-   mod: "cxm-"
-) !default;
-
-//
-// Boxes
-// -----
-//
-// Boxes are inline-block elements which are likely to appear in the same row, such as buttons and form elements.
-// These elements should have the same height in order to avoid problems when put together in a toolbar
-// or a complex form.
-//
-// To ensure the height consistency, all box models should use the same line-height, top/bottom padding and border-width;
-//
-// For elements which do not have a natural border, such as checkboxes, radios and buttons,
-// border-color should be set to transparent.
-//
-//  box height = line-height + padding-top + padding-bottom + border-width-top + border-width-bottom
-//
-// Some browsers do not respect the line-height being set and therefore explicit height value is
-// calculated and set on all box elements.
-//
-// Hint: Use em units to make the box height grow with the font-size, but note that the elements
-//       will not be aligned in case of pixel boundaries and icons may appear blurry in some desktop browsers.
-//
-
-$cx-default-box-font-size: 13px !default;
-$cx-default-box-font-family: inherit !default;
-$cx-default-box-line-height: 16px !default;
-$cx-default-box-padding: 5px !default; //should not be a list
-$cx-default-box-border-width: 1px !default;
-
-// Borders
-// -------
-
-$cx-default-border-color: #bfbfbf !default;
-$cx-default-border-radius: 0 !default;
-$cx-default-border-width: 1px !default;
-
-// Padding
-// -------
-
-$cx-default-container-padding: 5px !default;
-
-// Empty Texts
-// ------------
-//
-// Displayed instead of whitespace
-
-$cx-default-empty-text-color: rgba(128, 128, 128, 0.7) !default;
-
-$cx-empty-text: (
-   color: $cx-default-empty-text-color
-) !default;
-
-//Icons
-$cx-default-icon-size: 16px !default;
-
-//Selection
-$cx-selection-background-color: rgba(135, 206, 250, 0.6);
-
-//List
-$cx-default-list-item-padding: 5px 10px !default;
-
-//Lists
-$cx-list: (
-   default: (
-      -webkit-overflow-scrolling: touch
-   ),
-   hover: (),
-   focus: (
-      outline: none
-   )
-);
-
-$cx-list-item: (
-   default: (),
-   hover: (
-      background-color: rgba(128, 128, 128, 0.1),
-      outline: none,
-      cursor: pointer
-   ),
-   cursor: (
-      background-color: rgba(123, 190, 255, 0.15),
-      outline: none
-   ),
-   selected: (
-      background-color: rgba(123, 190, 255, 0.4)
-   ),
-   selected-hover: (
-      background-color: rgba(123, 190, 255, 0.2)
-   ),
-   selected-cursor: (
-      background-color: rgba(123, 190, 255, 0.3),
-      outline: none
-   ),
-   disabled: (
-      cursor: default,
-      opacity: 0.5,
-      pointer-events: none
-   ),
-   active: (
-      //causes flickering
-         //background: rgba(123,190,255, 0.7)
-   )
-) !default;
-
-$cx-default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-   "Helvetica Neue", Arial, sans-serif !default;
-
-$cx-default-font-size: 14px !default;
-$cx-default-color: #373a3c !default;
-
-$cx-element-style-map: (
-   html: (
-      font-family: $cx-default-font-family,
-      font-size: $cx-default-font-size,
-      height: 100%,
-      background-color: #eee
-   ),
-   body: (
-      margin: 0,
-      padding: 0,
-      height: 100%,
-      color: $cx-default-color
-   ),
-   h1: (
-      font-size: 2rem,
-      line-height: 1.1,
-      margin: 0 0 0.75rem 0,
-      font-weight: 500
-   ),
-   h2: (
-      font-size: 1.75rem,
-      line-height: 1.1,
-      margin: 0 0 0.5rem 0,
-      font-weight: 500
-   ),
-   h3: (
-      font-size: 1.5rem,
-      line-height: 1.1,
-      margin: 0 0 0.5rem 0,
-      font-weight: 500
-   ),
-   h4: (
-      font-size: 1.3rem,
-      line-height: 1.1,
-      margin: 0 0 0.5rem 0,
-      font-weight: 500
-   ),
-   h5: (
-      font-size: 1.15rem,
-      line-height: 1.1,
-      margin: 0 0 0.5rem 0,
-      font-weight: 500
-   ),
-   h6: (
-      font-size: 1rem,
-      line-height: 1.1,
-      margin: 0 0 0.5rem 0,
-      font-weight: 500
-   ),
-   p: (
-      margin: 0 0 1rem 0
-   ),
-   a: (
-      text-decoration: none,
-      color: #0275d8
-   ),
-   "a:hover": (
-      text-decoration: underline
-   ),
-   ul: (
-      margin: 0 0 1rem 0
-   ),
-   ol: (
-      margin: 0 0 1rem 0
-   ),
-   th: (
-      font-weight: 500
-   ),
-   text: (
-      fill: currentColor,
-      stroke: none
-   ),
-   table: (
-      font-size: inherit
-   )
-) !default;
-
-$cx-default-cover-border-color: $cx-default-border-color !default;
-$cx-default-cover-background-color: white !default;
-
-@import "charts/variables";
-@import "ui/variables";
-@import "widgets/variables";
+// FUNCTIONS
+@import "util/scss/index";
+
+// SCREEN SIZE
+$cx-screen-size-small: 400px !default;
+$cx-screen-size-medium: 800px !default;
+$cx-screen-size-large: 1300px !default;
+$cx-screen-size-extra-large: 1800px !default;
+
+//
+// BESM
+//
+// B - block - top level HTML element
+// E - element - part of the component (block)
+// S - state - indicator of the component state which affects the appearance
+// M - mod - user supplied instruction which overrides default appearance
+//
+
+$cx-besm: (
+   block: "cxb-",
+   element: "cxe-",
+   state: "cxs-",
+   mod: "cxm-"
+) !default;
+
+//
+// Boxes
+// -----
+//
+// Boxes are inline-block elements which are likely to appear in the same row, such as buttons and form elements.
+// These elements should have the same height in order to avoid problems when put together in a toolbar
+// or a complex form.
+//
+// To ensure the height consistency, all box models should use the same line-height, top/bottom padding and border-width;
+//
+// For elements which do not have a natural border, such as checkboxes, radios and buttons,
+// border-color should be set to transparent.
+//
+//  box height = line-height + padding-top + padding-bottom + border-width-top + border-width-bottom
+//
+// Some browsers do not respect the line-height being set and therefore explicit height value is
+// calculated and set on all box elements.
+//
+// Hint: Use em units to make the box height grow with the font-size, but note that the elements
+//       will not be aligned in case of pixel boundaries and icons may appear blurry in some desktop browsers.
+//
+
+$cx-default-box-font-size: 13px !default;
+$cx-default-box-font-family: inherit !default;
+$cx-default-box-line-height: 16px !default;
+$cx-default-box-padding: 5px !default; //should not be a list
+$cx-default-box-border-width: 1px !default;
+
+// Borders
+// -------
+
+$cx-default-border-color: #bfbfbf !default;
+$cx-default-border-radius: 0 !default;
+$cx-default-border-width: 1px !default;
+
+// Padding
+// -------
+
+$cx-default-container-padding: 5px !default;
+
+// Empty Texts
+// ------------
+//
+// Displayed instead of whitespace
+
+$cx-default-empty-text-color: rgba(128, 128, 128, 0.7) !default;
+
+$cx-empty-text: (
+   color: $cx-default-empty-text-color
+) !default;
+
+//Icons
+$cx-default-icon-size: 16px !default;
+
+//Selection
+$cx-selection-background-color: rgba(135, 206, 250, 0.6);
+
+//List
+$cx-default-list-item-padding: 5px 10px !default;
+
+//Lists
+$cx-list: (
+   default: (
+      -webkit-overflow-scrolling: touch
+   ),
+   hover: (),
+   focus: (
+      outline: none
+   )
+);
+
+$cx-list-item: (
+   default: (),
+   hover: (
+      background-color: rgba(128, 128, 128, 0.1),
+      outline: none,
+      cursor: pointer
+   ),
+   cursor: (
+      background-color: rgba(123, 190, 255, 0.15),
+      outline: none
+   ),
+   selected: (
+      background-color: rgba(123, 190, 255, 0.4)
+   ),
+   selected-hover: (
+      background-color: rgba(123, 190, 255, 0.2)
+   ),
+   selected-cursor: (
+      background-color: rgba(123, 190, 255, 0.3),
+      outline: none
+   ),
+   disabled: (
+      cursor: default,
+      opacity: 0.5,
+      pointer-events: none
+   ),
+   active: (
+      //causes flickering
+         //background: rgba(123,190,255, 0.7)
+   )
+) !default;
+
+$cx-default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+   "Helvetica Neue", Arial, sans-serif !default;
+
+$cx-default-font-size: 14px !default;
+$cx-default-color: #373a3c !default;
+
+$cx-element-style-map: (
+   html: (
+      font-family: $cx-default-font-family,
+      font-size: $cx-default-font-size,
+      height: 100%,
+      background-color: #eee
+   ),
+   body: (
+      margin: 0,
+      padding: 0,
+      height: 100%,
+      color: $cx-default-color
+   ),
+   h1: (
+      font-size: 2rem,
+      line-height: 1.1,
+      margin: 0 0 0.75rem 0,
+      font-weight: 500
+   ),
+   h2: (
+      font-size: 1.75rem,
+      line-height: 1.1,
+      margin: 0 0 0.5rem 0,
+      font-weight: 500
+   ),
+   h3: (
+      font-size: 1.5rem,
+      line-height: 1.1,
+      margin: 0 0 0.5rem 0,
+      font-weight: 500
+   ),
+   h4: (
+      font-size: 1.3rem,
+      line-height: 1.1,
+      margin: 0 0 0.5rem 0,
+      font-weight: 500
+   ),
+   h5: (
+      font-size: 1.15rem,
+      line-height: 1.1,
+      margin: 0 0 0.5rem 0,
+      font-weight: 500
+   ),
+   h6: (
+      font-size: 1rem,
+      line-height: 1.1,
+      margin: 0 0 0.5rem 0,
+      font-weight: 500
+   ),
+   p: (
+      margin: 0 0 1rem 0
+   ),
+   a: (
+      text-decoration: none,
+      color: #0275d8
+   ),
+   "a:hover": (
+      text-decoration: underline
+   ),
+   ul: (
+      margin: 0 0 1rem 0
+   ),
+   ol: (
+      margin: 0 0 1rem 0
+   ),
+   th: (
+      font-weight: 500
+   ),
+   text: (
+      fill: currentColor,
+      stroke: none
+   ),
+   table: (
+      font-size: inherit
+   )
+) !default;
+
+$cx-default-cover-border-color: $cx-default-border-color !default;
+$cx-default-cover-background-color: white !default;
+
+@import "charts/variables";
+@import "ui/variables";
+@import "widgets/variables";

package/src/widgets/AccessorBindings.spec.tsx

@@ -1,66 +1,66 @@
-import assert from "assert";
-import reactTestRenderer from "react-test-renderer";
-import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
-import { Store } from "../data/Store";
-import { expr } from "../ui";
-import { Cx } from "../ui/Cx";
-import { HtmlElement } from "./HtmlElement";
-
-let DummyHack = HtmlElement;
-
-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 = reactTestRenderer.create(<Cx widget={widget} store={store} />);
-
-      let tree = component.toJSON();
-      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 = reactTestRenderer.create(<Cx widget={widget} store={store} />);
-
-      let tree = component.toJSON();
-      assert(tree.type === "div");
-      assert.deepStrictEqual(tree.children, ["4"]);
-   });
-});
+import assert from "assert";
+import reactTestRenderer from "react-test-renderer";
+import { createAccessorModelProxy } from "../data/createAccessorModelProxy";
+import { Store } from "../data/Store";
+import { expr } from "../ui";
+import { Cx } from "../ui/Cx";
+import { HtmlElement } from "./HtmlElement";
+
+let DummyHack = HtmlElement;
+
+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 = reactTestRenderer.create(<Cx widget={widget} store={store} />);
+
+      let tree = component.toJSON();
+      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 = reactTestRenderer.create(<Cx widget={widget} store={store} />);
+
+      let tree = component.toJSON();
+      assert(tree.type === "div");
+      assert.deepStrictEqual(tree.children, ["4"]);
+   });
+});

package/src/widgets/Button.d.ts

@@ -1,58 +1,58 @@
-import * as Cx from "../core";
-import * as React from "react";
-import { Instance } from "../ui/Instance";
-
-export interface ButtonProps extends Cx.HtmlElementProps {
-   /** Confirmation text or configuration object. See MsgBox.yesNo for more details. */
-   confirm?: Cx.Prop<string | Cx.Config>;
-
-   /** If true button appears in pressed state. Useful for implementing toggle buttons. */
-   pressed?: Cx.BooleanProp;
-
-   /** Name of the icon to be put on the left side of the button. */
-   icon?: Cx.StringProp;
-
-   /** HTML tag to be used. Default is `button`. */
-   tag?: string;
-
-   /** Base CSS class to be applied to the element. Default is 'button'. */
-   baseClass?: string;
-
-   /**
-    * Determines if button should receive focus on mousedown event.
-    * Default is `false`, which means that focus can be set only using the keyboard `Tab` key.
-    */
-   focusOnMouseDown?: boolean;
-
-   /** Add type="submit" to the button. */
-   submit?: boolean;
-
-   /** Set to `true` to disable the button. */
-   disabled?: Cx.BooleanProp;
-
-   /** Set to `false` to disable the button. */
-   enabled?: Cx.BooleanProp;
-
-   /**
-    * Click handler.
-    *
-    * @param e - Event.
-    * @param instance - Cx widget instance that fired the event.
-    */
-   onClick?: string | ((e: MouseEvent, instance: Instance) => void);
-
-   onMouseDown?: string | ((e: MouseEvent, instance: Instance) => void);
-
-   /** Button type. */
-   type?: "submit" | "button";
-
-   /** If set to `true`, the Button will cause its parent Overlay (if one exists) to close. This, however, can be prevented if `onClick` explicitly returns `false`. */
-   dismiss?: boolean;
-
-   /** The form attribute specifies the form the button belongs to.
-    * The value of this attribute must be equal to the `id` attribute of a `<form>` element in the same document.
-    */
-   form?: Cx.StringProp;
-}
-
-export class Button extends Cx.Widget<ButtonProps> {}
+import * as Cx from "../core";
+import * as React from "react";
+import { Instance } from "../ui/Instance";
+
+export interface ButtonProps extends Cx.HtmlElementProps {
+   /** Confirmation text or configuration object. See MsgBox.yesNo for more details. */
+   confirm?: Cx.Prop<string | Cx.Config>;
+
+   /** If true button appears in pressed state. Useful for implementing toggle buttons. */
+   pressed?: Cx.BooleanProp;
+
+   /** Name of the icon to be put on the left side of the button. */
+   icon?: Cx.StringProp;
+
+   /** HTML tag to be used. Default is `button`. */
+   tag?: string;
+
+   /** Base CSS class to be applied to the element. Default is 'button'. */
+   baseClass?: string;
+
+   /**
+    * Determines if button should receive focus on mousedown event.
+    * Default is `false`, which means that focus can be set only using the keyboard `Tab` key.
+    */
+   focusOnMouseDown?: boolean;
+
+   /** Add type="submit" to the button. */
+   submit?: boolean;
+
+   /** Set to `true` to disable the button. */
+   disabled?: Cx.BooleanProp;
+
+   /** Set to `false` to disable the button. */
+   enabled?: Cx.BooleanProp;
+
+   /**
+    * Click handler.
+    *
+    * @param e - Event.
+    * @param instance - Cx widget instance that fired the event.
+    */
+   onClick?: string | ((e: MouseEvent, instance: Instance) => void);
+
+   onMouseDown?: string | ((e: MouseEvent, instance: Instance) => void);
+
+   /** Button type. */
+   type?: "submit" | "button";
+
+   /** If set to `true`, the Button will cause its parent Overlay (if one exists) to close. This, however, can be prevented if `onClick` explicitly returns `false`. */
+   dismiss?: boolean;
+
+   /** The form attribute specifies the form the button belongs to.
+    * The value of this attribute must be equal to the `id` attribute of a `<form>` element in the same document.
+    */
+   form?: Cx.StringProp;
+}
+
+export class Button extends Cx.Widget<ButtonProps> {}