cx 26.1.2 → 26.1.4

package/src/widgets/nav/Tab.ts

@@ -1,120 +1,120 @@
-import { Widget, VDOM } from "../../ui/Widget";
-import { HtmlElement, HtmlElementConfigBase, HtmlElementInstance } from "../HtmlElement";
-import { Instance } from "../../ui/Instance";
-import { RenderingContext } from "../../ui/RenderingContext";
-import { preventFocusOnTouch } from "../../ui/FocusManager";
-import { isUndefined } from "../../util/isUndefined";
-import { BooleanProp, Prop, StringProp } from "../../ui/Prop";
-
-export interface TabConfig extends HtmlElementConfigBase {
-   /** A value to be written to the `value` property if the tab is clicked. */
-   tab?: Prop<string | number>;
-
-   /**
-    * Value of the currently selected tab.
-    * If `value` is equal to `tab`, the tab appears active.
-    */
-   value?: StringProp;
-
-   /** Set to `true` to disable selection. */
-   disabled?: BooleanProp;
-
-   /** Base CSS class to be applied to the element. No class is applied by default. */
-   baseClass?: string;
-
-   /** Name of the HTML element to be rendered. Default is `div`. */
-   tag?: string;
-
-   /**
-    * Determines if tab should receive focus on `mousedown` event.
-    * Default is `false`, which means that focus can be set only using the keyboard `Tab` key.
-    */
-   focusOnMouseDown?: boolean;
-
-   /** Set to true to set the default tab. */
-   default?: boolean;
-}
-
-export class Tab extends HtmlElement<TabConfig> {
-   declare public baseClass: string;
-   declare public tag: string;
-   declare public focusOnMouseDown: boolean;
-   declare public default: boolean;
-   declare public shape?: string;
-   declare public onMouseDown?: any;
-   declare public onClick?: any;
-   declareData() {
-      super.declareData(
-         {
-            tab: undefined,
-            value: undefined,
-            disabled: undefined,
-            text: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   prepareData(context: RenderingContext, instance: HtmlElementInstance) {
-      let { data } = instance;
-      data.stateMods = {
-         active: data.tab == data.value,
-         disabled: data.disabled,
-         shape: this.shape,
-      };
-      if (this.default && isUndefined(data.value)) instance.set("value", data.tab);
-      super.prepareData(context, instance);
-   }
-
-   isValidHtmlAttribute(attrName: string) {
-      switch (attrName) {
-         case "value":
-         case "tab":
-         case "text":
-         case "disabled":
-         case "default":
-            return false;
-
-         default: return super.isValidHtmlAttribute(attrName);
-      }
-   }
-
-   attachProps(context: RenderingContext, instance: HtmlElementInstance, props: any) {
-      super.attachProps(context, instance, props);
-
-      let { data } = instance;
-      if (!data.disabled) {
-         props.href = "#";
-         delete props.value;
-
-         props.onMouseDown = (e: any) => {
-            if (this.onMouseDown) instance.invoke("onMouseDown", e, instance);
-            preventFocusOnTouch(e);
-         };
-
-         props.onClick = (e: any) => this.handleClick(e, instance);
-      }
-   }
-
-   handleClick(e: any, instance: Instance) {
-      if (this.onClick && instance.invoke("onClick", e, instance) === false) {
-         return;
-      }
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      let { data } = instance;
-
-      if (data.disabled) return;
-
-      instance.set("value", data.tab);
-   }
-}
-
-Tab.prototype.baseClass = "tab";
-Tab.prototype.tag = "a";
-Tab.prototype.focusOnMouseDown = false;
-Tab.prototype.default = false;
-
-Widget.alias("tab", Tab);
+import { Widget, VDOM } from "../../ui/Widget";
+import { HtmlElement, HtmlElementConfigBase, HtmlElementInstance } from "../HtmlElement";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { preventFocusOnTouch } from "../../ui/FocusManager";
+import { isUndefined } from "../../util/isUndefined";
+import { BooleanProp, Prop, StringProp } from "../../ui/Prop";
+
+export interface TabConfig extends HtmlElementConfigBase {
+   /** A value to be written to the `value` property if the tab is clicked. */
+   tab?: Prop<string | number>;
+
+   /**
+    * Value of the currently selected tab.
+    * If `value` is equal to `tab`, the tab appears active.
+    */
+   value?: StringProp;
+
+   /** Set to `true` to disable selection. */
+   disabled?: BooleanProp;
+
+   /** Base CSS class to be applied to the element. No class is applied by default. */
+   baseClass?: string;
+
+   /** Name of the HTML element to be rendered. Default is `div`. */
+   tag?: string;
+
+   /**
+    * Determines if tab should receive focus on `mousedown` event.
+    * Default is `false`, which means that focus can be set only using the keyboard `Tab` key.
+    */
+   focusOnMouseDown?: boolean;
+
+   /** Set to true to set the default tab. */
+   default?: boolean;
+}
+
+export class Tab extends HtmlElement<TabConfig> {
+   declare public baseClass: string;
+   declare public tag: string;
+   declare public focusOnMouseDown: boolean;
+   declare public default: boolean;
+   declare public shape?: string;
+   declare public onMouseDown?: any;
+   declare public onClick?: any;
+   declareData() {
+      super.declareData(
+         {
+            tab: undefined,
+            value: undefined,
+            disabled: undefined,
+            text: undefined,
+         },
+         ...arguments,
+      );
+   }
+
+   prepareData(context: RenderingContext, instance: HtmlElementInstance) {
+      let { data } = instance;
+      data.stateMods = {
+         active: data.tab == data.value,
+         disabled: data.disabled,
+         shape: this.shape,
+      };
+      if (this.default && isUndefined(data.value)) instance.set("value", data.tab);
+      super.prepareData(context, instance);
+   }
+
+   isValidHtmlAttribute(attrName: string) {
+      switch (attrName) {
+         case "value":
+         case "tab":
+         case "text":
+         case "disabled":
+         case "default":
+            return false;
+
+         default: return super.isValidHtmlAttribute(attrName);
+      }
+   }
+
+   attachProps(context: RenderingContext, instance: HtmlElementInstance, props: any) {
+      super.attachProps(context, instance, props);
+
+      let { data } = instance;
+      if (!data.disabled) {
+         props.href = "#";
+         delete props.value;
+
+         props.onMouseDown = (e: any) => {
+            if (this.onMouseDown) instance.invoke("onMouseDown", e, instance);
+            preventFocusOnTouch(e);
+         };
+
+         props.onClick = (e: any) => this.handleClick(e, instance);
+      }
+   }
+
+   handleClick(e: any, instance: Instance) {
+      if (this.onClick && instance.invoke("onClick", e, instance) === false) {
+         return;
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      let { data } = instance;
+
+      if (data.disabled) return;
+
+      instance.set("value", data.tab);
+   }
+}
+
+Tab.prototype.baseClass = "tab";
+Tab.prototype.tag = "a";
+Tab.prototype.focusOnMouseDown = false;
+Tab.prototype.default = false;
+
+Widget.alias("tab", Tab);

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

@@ -1,84 +1,84 @@
-$cx-default-tab-color: inherit !default;
-$cx-default-tab-font-size: null !default;
-$cx-default-tab-font-weight: inherit !default;
-$cx-default-tab-background-color: transparent !default;
-$cx-default-tab-border-width: $cx-default-box-border-width !default;
-$cx-default-tab-border-color: transparent !default;
-$cx-default-tab-border-radius: $cx-default-border-radius !default;
-$cx-default-tab-padding: cx-top($cx-default-box-padding) 2 * cx-right($cx-default-box-padding)
-   cx-bottom($cx-default-box-padding) 2 * cx-left($cx-default-box-padding) !default;
-$cx-default-tab-box-shadow: none !default;
-
-$cx-tab-state-style-map: cx-deep-map-merge(
-   $cx-list-item,
-   (
-      default: (
-         color: $cx-default-tab-color,
-         font-size: $cx-default-tab-font-size,
-         line-height: $cx-default-box-line-height,
-         font-weight: $cx-default-tab-font-weight,
-         text-decoration: none,
-         cursor: pointer,
-         text-align: center,
-         background-color: $cx-default-tab-background-color,
-         border-radius: $cx-default-tab-border-radius,
-         padding: $cx-default-tab-padding,
-         border-width: $cx-default-tab-border-width,
-         border-color: $cx-default-tab-border-color,
-         border-style: solid,
-         box-shadow: $cx-default-tab-box-shadow,
-      ),
-      hover: (
-         text-decoration: none,
-      ),
-      disabled: (
-         background-color: transparent,
-         pointer-events: none,
-      ),
-   )
-) !default;
-
-$cx-tab-mods: (
-   classic: (
-      default: (
-         position: relative,
-         border-width: 1px,
-         border-bottom-left-radius: 0,
-         border-bottom-right-radius: 0,
-      ),
-      selected: (
-         border-color: $cx-default-border-color,
-         background-color: $cx-default-cover-background-color,
-      ),
-   ),
-   line: (
-      default: (
-         background-color: transparent !important,
-         border-left-color: transparent !important,
-         border-right-color: transparent !important,
-         border-top-color: transparent !important,
-         border-left-width: 0,
-         border-right-width: 0,
-         border-bottom-width: 2px,
-         border-top-width: 0,
-         border-bottom-left-radius: 0,
-         border-bottom-right-radius: 0,
-      ),
-      hover: (
-         border-color: rgba(128, 128, 128, 0.2),
-      ),
-      cursor: (
-         border-color: rgba(123, 190, 255, 0.3),
-      ),
-      selected: (
-         border-color: rgba(128, 128, 128, 0.4),
-      ),
-      selected-cursor: (
-         border-color: rgba(123, 190, 255, 0.7),
-      ),
-      active: (),
-      disabled: (
-         border-color: transparent,
-      ),
-   ),
-) !default;
+$cx-default-tab-color: inherit !default;
+$cx-default-tab-font-size: null !default;
+$cx-default-tab-font-weight: inherit !default;
+$cx-default-tab-background-color: transparent !default;
+$cx-default-tab-border-width: $cx-default-box-border-width !default;
+$cx-default-tab-border-color: transparent !default;
+$cx-default-tab-border-radius: $cx-default-border-radius !default;
+$cx-default-tab-padding: cx-top($cx-default-box-padding) 2 * cx-right($cx-default-box-padding)
+   cx-bottom($cx-default-box-padding) 2 * cx-left($cx-default-box-padding) !default;
+$cx-default-tab-box-shadow: none !default;
+
+$cx-tab-state-style-map: cx-deep-map-merge(
+   $cx-list-item,
+   (
+      default: (
+         color: $cx-default-tab-color,
+         font-size: $cx-default-tab-font-size,
+         line-height: $cx-default-box-line-height,
+         font-weight: $cx-default-tab-font-weight,
+         text-decoration: none,
+         cursor: pointer,
+         text-align: center,
+         background-color: $cx-default-tab-background-color,
+         border-radius: $cx-default-tab-border-radius,
+         padding: $cx-default-tab-padding,
+         border-width: $cx-default-tab-border-width,
+         border-color: $cx-default-tab-border-color,
+         border-style: solid,
+         box-shadow: $cx-default-tab-box-shadow,
+      ),
+      hover: (
+         text-decoration: none,
+      ),
+      disabled: (
+         background-color: transparent,
+         pointer-events: none,
+      ),
+   )
+) !default;
+
+$cx-tab-mods: (
+   classic: (
+      default: (
+         position: relative,
+         border-width: 1px,
+         border-bottom-left-radius: 0,
+         border-bottom-right-radius: 0,
+      ),
+      selected: (
+         border-color: $cx-default-border-color,
+         background-color: $cx-default-cover-background-color,
+      ),
+   ),
+   line: (
+      default: (
+         background-color: transparent !important,
+         border-left-color: transparent !important,
+         border-right-color: transparent !important,
+         border-top-color: transparent !important,
+         border-left-width: 0,
+         border-right-width: 0,
+         border-bottom-width: 2px,
+         border-top-width: 0,
+         border-bottom-left-radius: 0,
+         border-bottom-right-radius: 0,
+      ),
+      hover: (
+         border-color: rgba(128, 128, 128, 0.2),
+      ),
+      cursor: (
+         border-color: rgba(123, 190, 255, 0.3),
+      ),
+      selected: (
+         border-color: rgba(128, 128, 128, 0.4),
+      ),
+      selected-cursor: (
+         border-color: rgba(123, 190, 255, 0.7),
+      ),
+      active: (),
+      disabled: (
+         border-color: transparent,
+      ),
+   ),
+) !default;

package/src/widgets/nav/cover.scss

@@ -1,22 +1,22 @@
-@use "sass:map";
-
-@mixin cx-cover(
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-   $mod: map.get($besm, mod);
-
-   .#{$mod}cover {
-      background-color: $cx-default-cover-background-color;
-      border-color: $cx-default-cover-border-color;
-      border-style: solid;
-      fill: $cx-default-cover-background-color;
-      stroke: $cx-default-cover-border-color;
-   }
-}
-
-@if (cx-should-include('cx/widgets/cover')) {  // check path
-   @include cx-cover();
-}
+@use "sass:map";
+
+@mixin cx-cover(
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
+
+   .#{$mod}cover {
+      background-color: $cx-default-cover-background-color;
+      border-color: $cx-default-cover-border-color;
+      border-style: solid;
+      fill: $cx-default-cover-background-color;
+      stroke: $cx-default-cover-border-color;
+   }
+}
+
+@if (cx-should-include('cx/widgets/cover')) {  // check path
+   @include cx-cover();
+}

package/src/widgets/nav/index.scss

@@ -1,6 +1,6 @@
-@import 'cover';
-@import 'Tab';
-@import 'Menu';
-@import 'MenuItem';
-@import 'Link';
+@import 'cover';
+@import 'Tab';
+@import 'Menu';
+@import 'MenuItem';
+@import 'Link';
 @import 'Scroller';

package/src/widgets/nav/index.ts

@@ -1,10 +1,10 @@
-export * from './Route';
-export * from './RedirectRoute';
-export * from './Tab';
-export * from './Link';
-export * from './LinkButton';
-export * from './Menu';
-export * from './MenuItem';
-export * from './MenuSpacer';
-export * from './Submenu';
-export * from './Scroller';
+export * from './Route';
+export * from './RedirectRoute';
+export * from './Tab';
+export * from './Link';
+export * from './LinkButton';
+export * from './Menu';
+export * from './MenuItem';
+export * from './MenuSpacer';
+export * from './Submenu';
+export * from './Scroller';

package/src/widgets/nav/variables.scss

@@ -1,27 +1,27 @@
-@use "sass:map";
-
-// COVER
-$cx-default-cover-border-color: $cx-default-border-color !default;
-$cx-default-cover-background-color: white !default;
-
-$cx-default-scroller-button-size: 20px !default;
-
-$cx-link-state-style-map: (
-   active: (
-      font-weight: bold,
-   ),
-) !default;
-
-//MENU
-@import "Menu.variables";
-
-// TAB
-@import "Tab.variables";
-
-$cx-dependencies: map.merge(
-   $cx-dependencies,
-   (
-      "cx/widgets/HScroller": "cx/widgets/Scroller",
-      "cx/widgets/VScroller": "cx/widgets/Scroller",
-   )
-);
+@use "sass:map";
+
+// COVER
+$cx-default-cover-border-color: $cx-default-border-color !default;
+$cx-default-cover-background-color: white !default;
+
+$cx-default-scroller-button-size: 20px !default;
+
+$cx-link-state-style-map: (
+   active: (
+      font-weight: bold,
+   ),
+) !default;
+
+//MENU
+@import "Menu.variables";
+
+// TAB
+@import "Tab.variables";
+
+$cx-dependencies: map.merge(
+   $cx-dependencies,
+   (
+      "cx/widgets/HScroller": "cx/widgets/Scroller",
+      "cx/widgets/VScroller": "cx/widgets/Scroller",
+   )
+);

package/src/widgets/overlay/ContextMenu.ts

@@ -1,42 +1,42 @@
-import { Store } from "../../data/Store";
-import { Instance } from "../../ui/Instance";
-import { Dropdown, DropdownConfig } from "./Dropdown";
-import { getCursorPos } from "./captureMouse";
-
-export interface ContextMenuConfig extends DropdownConfig {}
-
-export class ContextMenu extends Dropdown {
-   constructor(config?: ContextMenuConfig) {
-      super(config);
-   }
-}
-ContextMenu.prototype.trackMouse = true;
-ContextMenu.prototype.dismissOnFocusOut = true;
-ContextMenu.prototype.firstChildDefinesWidth = true;
-ContextMenu.prototype.matchWidth = false;
-ContextMenu.prototype.placementOrder = "down-right right up-right down-left left up-left";
-ContextMenu.prototype.offset = 0;
-ContextMenu.prototype.autoFocus = true;
-ContextMenu.prototype.autoFocusFirstChild = false;
-ContextMenu.prototype.focusable = true;
-
-export const openContextMenu = (
-   e: React.MouseEvent,
-   content: any,
-   storeOrInstance?: Store | Instance,
-   options?: any,
-) => {
-   e.preventDefault();
-   e.stopPropagation();
-   let position = getCursorPos(e);
-   let menu = ContextMenu.create({
-      relatedElement: e.currentTarget,
-      mousePosition: {
-         x: position.clientX,
-         y: position.clientY,
-      },
-      trackMouse: true,
-      items: content,
-   });
-   return menu.open(storeOrInstance, options);
-};
+import { Store } from "../../data/Store";
+import { Instance } from "../../ui/Instance";
+import { Dropdown, DropdownConfig } from "./Dropdown";
+import { getCursorPos } from "./captureMouse";
+
+export interface ContextMenuConfig extends DropdownConfig {}
+
+export class ContextMenu extends Dropdown {
+   constructor(config?: ContextMenuConfig) {
+      super(config);
+   }
+}
+ContextMenu.prototype.trackMouse = true;
+ContextMenu.prototype.dismissOnFocusOut = true;
+ContextMenu.prototype.firstChildDefinesWidth = true;
+ContextMenu.prototype.matchWidth = false;
+ContextMenu.prototype.placementOrder = "down-right right up-right down-left left up-left";
+ContextMenu.prototype.offset = 0;
+ContextMenu.prototype.autoFocus = true;
+ContextMenu.prototype.autoFocusFirstChild = false;
+ContextMenu.prototype.focusable = true;
+
+export const openContextMenu = (
+   e: React.MouseEvent,
+   content: any,
+   storeOrInstance?: Store | Instance,
+   options?: any,
+) => {
+   e.preventDefault();
+   e.stopPropagation();
+   let position = getCursorPos(e);
+   let menu = ContextMenu.create({
+      relatedElement: e.currentTarget,
+      mousePosition: {
+         x: position.clientX,
+         y: position.clientY,
+      },
+      trackMouse: true,
+      items: content,
+   });
+   return menu.open(storeOrInstance, options);
+};