cx 26.1.2 → 26.1.4

package/src/widgets/Button.variables.scss

@@ -1,117 +1,117 @@
-@use "sass:color";
-@use "sass:map";
-
-$cx-default-button-font-family: $cx-default-box-font-family !default;
-$cx-default-button-font-size: $cx-default-box-font-size !default;
-$cx-default-button-font-weight: normal !default;
-$cx-default-button-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-button-border-width: $cx-default-box-border-width !default;
-$cx-default-button-line-height: $cx-default-box-line-height !default;
-$cx-default-button-background-color: #eee !default;
-$cx-default-button-border-color: #ccc !default;
-$cx-default-button-border-radius: $cx-default-border-radius !default;
-$cx-default-button-color: null !default;
-$cx-default-button-box-shadow: inset 0 -2px rgba(128, 128, 128, 0.1) !default;
-
-$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: color.adjust(#1f99f8, $alpha: -0.5),
-         border-color: color.adjust(#1e88e5, $alpha: -0.9),
-         color: color.adjust(white, $alpha: -0.4),
-      ),
-      hover: (
-         background-color: #1f99f8,
-      ),
-   ),
-   danger: (
-      default: (
-         background-color: #d32f2f,
-         border-color: #c62828,
-         color: white,
-      ),
-      disabled: (
-         background-color: color.adjust(#d32f2f, $alpha: -0.4),
-         border-color: color.adjust(#c62828, $alpha: -0.9),
-         color: color.adjust(white, $alpha: -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:color";
+@use "sass:map";
+
+$cx-default-button-font-family: $cx-default-box-font-family !default;
+$cx-default-button-font-size: $cx-default-box-font-size !default;
+$cx-default-button-font-weight: normal !default;
+$cx-default-button-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-button-border-width: $cx-default-box-border-width !default;
+$cx-default-button-line-height: $cx-default-box-line-height !default;
+$cx-default-button-background-color: #eee !default;
+$cx-default-button-border-color: #ccc !default;
+$cx-default-button-border-radius: $cx-default-border-radius !default;
+$cx-default-button-color: null !default;
+$cx-default-button-box-shadow: inset 0 -2px rgba(128, 128, 128, 0.1) !default;
+
+$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: color.adjust(#1f99f8, $alpha: -0.5),
+         border-color: color.adjust(#1e88e5, $alpha: -0.9),
+         color: color.adjust(white, $alpha: -0.4),
+      ),
+      hover: (
+         background-color: #1f99f8,
+      ),
+   ),
+   danger: (
+      default: (
+         background-color: #d32f2f,
+         border-color: #c62828,
+         color: white,
+      ),
+      disabled: (
+         background-color: color.adjust(#d32f2f, $alpha: -0.4),
+         border-color: color.adjust(#c62828, $alpha: -0.9),
+         color: color.adjust(white, $alpha: -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/CxCredit.scss

@@ -1,39 +1,39 @@
-@use "sass:map";
-
-@mixin cx-cxcredit($name: "cxcredit", $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} {
-      width: 50px;
-      height: 50px;
-      opacity: 0.5;
-      transition: opacity 0.3s ease-in-out;
-      background: rgba(255, 255, 255, 0.1);
-      cursor: pointer;
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
-
-      &:hover {
-         opacity: 1;
-      }
-
-      &.#{$mod}inline {
-         position: relative;
-         bottom: auto;
-         right: auto;
-      }
-   }
-
-   .#{$element}#{$name}-icon {
-      width: 100%;
-      height: 100%;
-   }
-}
-
-@if (cx-should-include("cx/widgets/CxCredit")) {
-   @include cx-cxcredit();
-}
+@use "sass:map";
+
+@mixin cx-cxcredit($name: "cxcredit", $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} {
+      width: 50px;
+      height: 50px;
+      opacity: 0.5;
+      transition: opacity 0.3s ease-in-out;
+      background: rgba(255, 255, 255, 0.1);
+      cursor: pointer;
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+
+      &:hover {
+         opacity: 1;
+      }
+
+      &.#{$mod}inline {
+         position: relative;
+         bottom: auto;
+         right: auto;
+      }
+   }
+
+   .#{$element}#{$name}-icon {
+      width: 100%;
+      height: 100%;
+   }
+}
+
+@if (cx-should-include("cx/widgets/CxCredit")) {
+   @include cx-cxcredit();
+}

package/src/widgets/CxCredit.tsx

@@ -1,46 +1,46 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "./HtmlElement";
-import { Icon } from "./Icon";
-import { RenderingContext } from "../ui/RenderingContext";
-import { RenderProps } from "../ui/Instance";
-
-export interface CxCreditConfig extends HtmlElementConfig {}
-
-export class CxCredit extends HtmlElement<CxCreditConfig, HtmlElementInstance> {
-   declare baseClass: string;
-
-   constructor(config?: CxCreditConfig) {
-      super(config);
-   }
-
-   init(): void {
-      this.tooltip = {
-         mouseTrap: true,
-         title: "Credits",
-         items: (
-            <cx>
-               <div ws>
-                  User interface of this project is implemented using the CxJS framework. For more information about
-                  CxJS, please visit
-                  <a href="https://cxjs.io/" target="_blank">
-                     the CxJS homepage
-                  </a>
-                  .
-               </div>
-            </cx>
-         ),
-      };
-      super.init();
-   }
-
-   attachProps(context: RenderingContext, instance: HtmlElementInstance, props: RenderProps): void {
-      props.children = Icon.render("cx", {
-         className: this.CSS.element(this.baseClass, "icon"),
-      });
-   }
-}
-
-CxCredit.prototype.baseClass = "cxcredit";
-CxCredit.prototype.tag = "div";
-
-Widget.alias("cx-credit", CxCredit);
+import { Widget, VDOM } from "../ui/Widget";
+import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "./HtmlElement";
+import { Icon } from "./Icon";
+import { RenderingContext } from "../ui/RenderingContext";
+import { RenderProps } from "../ui/Instance";
+
+export interface CxCreditConfig extends HtmlElementConfig {}
+
+export class CxCredit extends HtmlElement<CxCreditConfig, HtmlElementInstance> {
+   declare baseClass: string;
+
+   constructor(config?: CxCreditConfig) {
+      super(config);
+   }
+
+   init(): void {
+      this.tooltip = {
+         mouseTrap: true,
+         title: "Credits",
+         items: (
+            <cx>
+               <div ws>
+                  User interface of this project is implemented using the CxJS framework. For more information about
+                  CxJS, please visit
+                  <a href="https://cxjs.io/" target="_blank">
+                     the CxJS homepage
+                  </a>
+                  .
+               </div>
+            </cx>
+         ),
+      };
+      super.init();
+   }
+
+   attachProps(context: RenderingContext, instance: HtmlElementInstance, props: RenderProps): void {
+      props.children = Icon.render("cx", {
+         className: this.CSS.element(this.baseClass, "icon"),
+      });
+   }
+}
+
+CxCredit.prototype.baseClass = "cxcredit";
+CxCredit.prototype.tag = "div";
+
+Widget.alias("cx-credit", CxCredit);

package/src/widgets/DocumentTitle.ts

@@ -1,95 +1,95 @@
-import { Widget, WidgetConfig } from "../ui/Widget";
-import { RenderingContext } from "../ui/RenderingContext";
-import { Instance } from "../ui/Instance";
-import { StringProp } from "../ui/Prop";
-
-export interface DocumentTitleConfig extends WidgetConfig {
-   /** Text value to be used for the document title. */
-   value?: StringProp;
-
-   /** Text value to be used for the document title. */
-   text?: StringProp;
-
-   /** Deprecated. Use `action: "append"` instead. */
-   append?: boolean;
-
-   /** How to combine the title with existing document title. Default is `append`. */
-   action?: "append" | "replace" | "prepend";
-
-   /** Separator used when appending or prepending to the title. Default is empty string. */
-   separator?: StringProp;
-}
-
-export class DocumentTitle extends Widget<DocumentTitleConfig> {
-   declare value?: StringProp;
-   declare text?: StringProp;
-   declare append?: boolean;
-   declare action?: "append" | "replace" | "prepend";
-   declare separator?: StringProp;
-
-   constructor(config?: DocumentTitleConfig) {
-      super(config);
-   }
-
-   init(): void {
-      if (this.value) this.text = this.value;
-
-      if (this.append) this.action = "append";
-
-      super.init();
-   }
-
-   declareData(...args: Record<string, unknown>[]): void {
-      super.declareData(...args, {
-         value: undefined,
-         text: undefined,
-         action: undefined,
-         separator: undefined,
-      });
-   }
-
-   explore(context: RenderingContext, instance: Instance): void {
-      if (!(context as any).documentTitle) {
-         (context as any).documentTitle = {
-            activeInstance: instance,
-            title: "",
-         };
-      }
-
-      let { data } = instance;
-
-      if (data.text) {
-         switch (data.action) {
-            case "append":
-               if ((context as any).documentTitle.title) (context as any).documentTitle.title += data.separator;
-               (context as any).documentTitle.title += data.text;
-               break;
-
-            case "prepend":
-               (context as any).documentTitle.title = data.text + data.separator + (context as any).documentTitle.title;
-               break;
-
-            default:
-            case "replace":
-               (context as any).documentTitle.title = data.text;
-               break;
-         }
-      }
-
-      super.explore(context, instance);
-   }
-
-   prepare(context: RenderingContext, instance: Instance): void {
-      if ((context as any).documentTitle.activeInstance == instance)
-         document.title = (context as any).documentTitle.title;
-   }
-
-   render(): null {
-      return null;
-   }
-}
-
-DocumentTitle.prototype.action = "append";
-DocumentTitle.prototype.separator = "";
-
-Widget.alias("document-title", DocumentTitle);
+import { Widget, WidgetConfig } from "../ui/Widget";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { StringProp } from "../ui/Prop";
+
+export interface DocumentTitleConfig extends WidgetConfig {
+   /** Text value to be used for the document title. */
+   value?: StringProp;
+
+   /** Text value to be used for the document title. */
+   text?: StringProp;
+
+   /** Deprecated. Use `action: "append"` instead. */
+   append?: boolean;
+
+   /** How to combine the title with existing document title. Default is `append`. */
+   action?: "append" | "replace" | "prepend";
+
+   /** Separator used when appending or prepending to the title. Default is empty string. */
+   separator?: StringProp;
+}
+
+export class DocumentTitle extends Widget<DocumentTitleConfig> {
+   declare value?: StringProp;
+   declare text?: StringProp;
+   declare append?: boolean;
+   declare action?: "append" | "replace" | "prepend";
+   declare separator?: StringProp;
+
+   constructor(config?: DocumentTitleConfig) {
+      super(config);
+   }
+
+   init(): void {
+      if (this.value) this.text = this.value;
+
+      if (this.append) this.action = "append";
+
+      super.init();
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         value: undefined,
+         text: undefined,
+         action: undefined,
+         separator: undefined,
+      });
+   }
+
+   explore(context: RenderingContext, instance: Instance): void {
+      if (!(context as any).documentTitle) {
+         (context as any).documentTitle = {
+            activeInstance: instance,
+            title: "",
+         };
+      }
+
+      let { data } = instance;
+
+      if (data.text) {
+         switch (data.action) {
+            case "append":
+               if ((context as any).documentTitle.title) (context as any).documentTitle.title += data.separator;
+               (context as any).documentTitle.title += data.text;
+               break;
+
+            case "prepend":
+               (context as any).documentTitle.title = data.text + data.separator + (context as any).documentTitle.title;
+               break;
+
+            default:
+            case "replace":
+               (context as any).documentTitle.title = data.text;
+               break;
+         }
+      }
+
+      super.explore(context, instance);
+   }
+
+   prepare(context: RenderingContext, instance: Instance): void {
+      if ((context as any).documentTitle.activeInstance == instance)
+         document.title = (context as any).documentTitle.title;
+   }
+
+   render(): null {
+      return null;
+   }
+}
+
+DocumentTitle.prototype.action = "append";
+DocumentTitle.prototype.separator = "";
+
+Widget.alias("document-title", DocumentTitle);