cx 26.1.3 → 26.1.4

package/src/widgets/Section.scss

@@ -1,56 +1,56 @@
-@use "sass:map";
-
-@mixin cx-section(
-   $name: 'section',
-   $mods: $cx-section-mods,
-   $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} {
-      flex-direction: column;
-      display: flex;
-      box-sizing: border-box;
-
-      @include cx-add-rules($cx-section-styles);
-
-      @each $modname, $config in $mods {
-        &.#{$mod}#{$modname} {
-          @include cx-add-state-rules($config, default);
-        }
-      }
-      
-   }
-
-   .#{$element}#{$name}-header {
-      margin: 0 1.5rem;
-      padding: 1rem 0;
-      box-sizing: border-box;
-      border-bottom: 1px solid rgba(128, 128, 128, 0.3);
-   }
-
-   .#{$element}#{$name}-body {
-      flex: 1 1 auto;
-      box-sizing: border-box;
-      overflow: auto;
-
-      .#{$state}pad > & {
-         padding: 1rem 1.5rem;
-      }
-   }
-
-   .#{$element}#{$name}-footer {
-      margin: 0 1.5rem;
-      padding: 1rem 0;
-      box-sizing: border-box;
-      border-top: 1px solid rgba(128, 128, 128, 0.3);
-   }
-}
-
-@if (cx-should-include('cx/widgets/Section')) {
-   @include cx-section();
+@use "sass:map";
+
+@mixin cx-section(
+   $name: 'section',
+   $mods: $cx-section-mods,
+   $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} {
+      flex-direction: column;
+      display: flex;
+      box-sizing: border-box;
+
+      @include cx-add-rules($cx-section-styles);
+
+      @each $modname, $config in $mods {
+        &.#{$mod}#{$modname} {
+          @include cx-add-state-rules($config, default);
+        }
+      }
+      
+   }
+
+   .#{$element}#{$name}-header {
+      margin: 0 1.5rem;
+      padding: 1rem 0;
+      box-sizing: border-box;
+      border-bottom: 1px solid rgba(128, 128, 128, 0.3);
+   }
+
+   .#{$element}#{$name}-body {
+      flex: 1 1 auto;
+      box-sizing: border-box;
+      overflow: auto;
+
+      .#{$state}pad > & {
+         padding: 1rem 1.5rem;
+      }
+   }
+
+   .#{$element}#{$name}-footer {
+      margin: 0 1.5rem;
+      padding: 1rem 0;
+      box-sizing: border-box;
+      border-top: 1px solid rgba(128, 128, 128, 0.3);
+   }
+}
+
+@if (cx-should-include('cx/widgets/Section')) {
+   @include cx-section();
 }

package/src/widgets/Section.tsx

@@ -1,187 +1,187 @@
-/** @jsxImportSource react */
-import { Widget, VDOM, getContent } from "../ui/Widget";
-import { ChildNode, ContainerBase, StyledContainerConfig } from "../ui/Container";
-import { Heading } from "./Heading";
-import { isString } from "../util/isString";
-import { parseStyle } from "../util/parseStyle";
-import { RenderingContext } from "../ui/RenderingContext";
-import { Instance } from "../ui/Instance";
-import { BooleanProp, StringProp, StyleProp, ClassProp, Prop } from "../ui/Prop";
-import { Create } from "../util/Component";
-
-export interface SectionConfig extends StyledContainerConfig {
-   id?: Prop<string | number>;
-
-   /** Add default padding to the section body. Default is `true`. */
-   pad?: BooleanProp;
-
-   /** A custom style which will be applied to the header. */
-   headerStyle?: StyleProp;
-
-   /** Additional CSS class to be applied to the header. */
-   headerClass?: ClassProp;
-
-   /** A custom style which will be applied to the body. */
-   bodyStyle?: StyleProp;
-
-   /** Additional CSS class to be applied to the section body. */
-   bodyClass?: ClassProp;
-
-   /** A custom style which will be applied to the footer. */
-   footerStyle?: StyleProp;
-
-   /** Additional CSS class to be applied to the footer. */
-   footerClass?: ClassProp;
-
-   /** Section's title. */
-   title?: StringProp;
-
-   /** Contents that should go in the header. */
-   header?: Create<typeof Widget>;
-
-   /** Contents that should go in the footer. */
-   footer?: Create<typeof Widget>;
-
-   /** Title heading level (1-6) */
-   hLevel?: number;
-}
-
-export class Section extends ContainerBase<SectionConfig, Instance> {
-   declare headerStyle?: StyleProp;
-   declare footerStyle?: StyleProp;
-   declare bodyStyle?: StyleProp;
-   declare title?: StringProp;
-   declare header?: Create<typeof Widget>;
-   declare footer?: Create<typeof Widget>;
-   declare hLevel?: number;
-   declare pad?: BooleanProp;
-   declare baseClass: string;
-
-   init(): void {
-      if (isString(this.headerStyle)) this.headerStyle = parseStyle(this.headerStyle);
-
-      if (isString(this.footerStyle)) this.footerStyle = parseStyle(this.footerStyle);
-
-      if (isString(this.bodyStyle)) this.bodyStyle = parseStyle(this.bodyStyle);
-
-      super.init();
-   }
-
-   add(item: any): void {
-      if (item && item.putInto == "header")
-         this.header = {
-            ...item,
-            putInto: null,
-         };
-      else if (item && item.putInto == "footer")
-         this.footer = {
-            ...item,
-            putInto: null,
-         };
-      else super.add(item);
-   }
-
-   declareData(...args: Record<string, unknown>[]): void {
-      super.declareData(...args, {
-         id: undefined,
-         headerStyle: { structured: true },
-         headerClass: { structured: true },
-         bodyStyle: { structured: true },
-         bodyClass: { structured: true },
-         footerStyle: { structured: true },
-         footerClass: { structured: true },
-      });
-   }
-
-   initComponents(context: RenderingContext, instance: Instance): void {
-      super.initComponents(context, instance, {
-         header: this.getHeader(),
-         footer: this.getFooter(),
-      });
-   }
-
-   getHeader(): Widget | null {
-      if (this.title)
-         return Widget.create(Heading, {
-            text: this.title,
-            level: this.hLevel,
-         }) as Widget;
-
-      if (this.header) return Heading.create(this.header);
-
-      return null;
-   }
-
-   getFooter(): Widget | null {
-      if (this.footer) return Widget.create(this.footer);
-
-      return null;
-   }
-
-   prepareData(context: RenderingContext, instance: Instance): void {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         pad: this.pad,
-      };
-      super.prepareData(context, instance);
-   }
-
-   initInstance(context: RenderingContext, instance: Instance): void {
-      (instance as any).eventHandlers = instance.getJsxEventProps();
-      super.initInstance(context, instance);
-   }
-
-   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
-      let { data, components } = instance;
-      let eventHandlers = (instance as any).eventHandlers;
-      let header: React.ReactNode, footer: React.ReactNode;
-      let { CSS, baseClass } = this;
-
-      if (components?.header) {
-         header = (
-            <header
-               className={CSS.expand(CSS.element(baseClass, "header"), data.headerClass)}
-               style={data.headerStyle as any}
-            >
-               {getContent(components.header.render(context))}
-            </header>
-         );
-      }
-
-      if (components?.footer) {
-         footer = (
-            <footer
-               className={CSS.expand(CSS.element(baseClass, "footer"), data.footerClass)}
-               style={data.footerStyle as any}
-            >
-               {getContent(components.footer.render(context))}
-            </footer>
-         );
-      }
-
-      return (
-         <section
-            key={key}
-            className={data.classNames as string}
-            style={data.style as any}
-            id={data.id as string}
-            {...eventHandlers}
-         >
-            {header}
-            <div
-               className={CSS.expand(CSS.element(this.baseClass, "body"), data.bodyClass)}
-               style={data.bodyStyle as any}
-            >
-               {this.renderChildren(context, instance)}
-            </div>
-            {footer}
-         </section>
-      );
-   }
-}
-
-Section.prototype.styled = true;
-Section.prototype.pad = true;
-Section.prototype.baseClass = "section";
-Section.prototype.hLevel = 3;
+/** @jsxImportSource react */
+import { Widget, VDOM, getContent } from "../ui/Widget";
+import { ChildNode, ContainerBase, StyledContainerConfig } from "../ui/Container";
+import { Heading } from "./Heading";
+import { isString } from "../util/isString";
+import { parseStyle } from "../util/parseStyle";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { BooleanProp, StringProp, StyleProp, ClassProp, Prop } from "../ui/Prop";
+import { Create } from "../util/Component";
+
+export interface SectionConfig extends StyledContainerConfig {
+   id?: Prop<string | number>;
+
+   /** Add default padding to the section body. Default is `true`. */
+   pad?: BooleanProp;
+
+   /** A custom style which will be applied to the header. */
+   headerStyle?: StyleProp;
+
+   /** Additional CSS class to be applied to the header. */
+   headerClass?: ClassProp;
+
+   /** A custom style which will be applied to the body. */
+   bodyStyle?: StyleProp;
+
+   /** Additional CSS class to be applied to the section body. */
+   bodyClass?: ClassProp;
+
+   /** A custom style which will be applied to the footer. */
+   footerStyle?: StyleProp;
+
+   /** Additional CSS class to be applied to the footer. */
+   footerClass?: ClassProp;
+
+   /** Section's title. */
+   title?: StringProp;
+
+   /** Contents that should go in the header. */
+   header?: Create<typeof Widget>;
+
+   /** Contents that should go in the footer. */
+   footer?: Create<typeof Widget>;
+
+   /** Title heading level (1-6) */
+   hLevel?: number;
+}
+
+export class Section extends ContainerBase<SectionConfig, Instance> {
+   declare headerStyle?: StyleProp;
+   declare footerStyle?: StyleProp;
+   declare bodyStyle?: StyleProp;
+   declare title?: StringProp;
+   declare header?: Create<typeof Widget>;
+   declare footer?: Create<typeof Widget>;
+   declare hLevel?: number;
+   declare pad?: BooleanProp;
+   declare baseClass: string;
+
+   init(): void {
+      if (isString(this.headerStyle)) this.headerStyle = parseStyle(this.headerStyle);
+
+      if (isString(this.footerStyle)) this.footerStyle = parseStyle(this.footerStyle);
+
+      if (isString(this.bodyStyle)) this.bodyStyle = parseStyle(this.bodyStyle);
+
+      super.init();
+   }
+
+   add(item: any): void {
+      if (item && item.putInto == "header")
+         this.header = {
+            ...item,
+            putInto: null,
+         };
+      else if (item && item.putInto == "footer")
+         this.footer = {
+            ...item,
+            putInto: null,
+         };
+      else super.add(item);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         id: undefined,
+         headerStyle: { structured: true },
+         headerClass: { structured: true },
+         bodyStyle: { structured: true },
+         bodyClass: { structured: true },
+         footerStyle: { structured: true },
+         footerClass: { structured: true },
+      });
+   }
+
+   initComponents(context: RenderingContext, instance: Instance): void {
+      super.initComponents(context, instance, {
+         header: this.getHeader(),
+         footer: this.getFooter(),
+      });
+   }
+
+   getHeader(): Widget | null {
+      if (this.title)
+         return Widget.create(Heading, {
+            text: this.title,
+            level: this.hLevel,
+         }) as Widget;
+
+      if (this.header) return Heading.create(this.header);
+
+      return null;
+   }
+
+   getFooter(): Widget | null {
+      if (this.footer) return Widget.create(this.footer);
+
+      return null;
+   }
+
+   prepareData(context: RenderingContext, instance: Instance): void {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         pad: this.pad,
+      };
+      super.prepareData(context, instance);
+   }
+
+   initInstance(context: RenderingContext, instance: Instance): void {
+      (instance as any).eventHandlers = instance.getJsxEventProps();
+      super.initInstance(context, instance);
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      let { data, components } = instance;
+      let eventHandlers = (instance as any).eventHandlers;
+      let header: React.ReactNode, footer: React.ReactNode;
+      let { CSS, baseClass } = this;
+
+      if (components?.header) {
+         header = (
+            <header
+               className={CSS.expand(CSS.element(baseClass, "header"), data.headerClass)}
+               style={data.headerStyle as any}
+            >
+               {getContent(components.header.render(context))}
+            </header>
+         );
+      }
+
+      if (components?.footer) {
+         footer = (
+            <footer
+               className={CSS.expand(CSS.element(baseClass, "footer"), data.footerClass)}
+               style={data.footerStyle as any}
+            >
+               {getContent(components.footer.render(context))}
+            </footer>
+         );
+      }
+
+      return (
+         <section
+            key={key}
+            className={data.classNames as string}
+            style={data.style as any}
+            id={data.id as string}
+            {...eventHandlers}
+         >
+            {header}
+            <div
+               className={CSS.expand(CSS.element(this.baseClass, "body"), data.bodyClass)}
+               style={data.bodyStyle as any}
+            >
+               {this.renderChildren(context, instance)}
+            </div>
+            {footer}
+         </section>
+      );
+   }
+}
+
+Section.prototype.styled = true;
+Section.prototype.pad = true;
+Section.prototype.baseClass = "section";
+Section.prototype.hLevel = 3;

package/src/widgets/animations.scss

@@ -1,11 +1,11 @@
-@if cx-call-once('cx/widgets/animations') {
-   @keyframes cx-rotate {
-      from {
-         transform: rotate(0);
-      }
-
-      to {
-         transform: rotate(360deg);
-      }
-   }
+@if cx-call-once('cx/widgets/animations') {
+   @keyframes cx-rotate {
+      from {
+         transform: rotate(0);
+      }
+
+      to {
+         transform: rotate(360deg);
+      }
+   }
 }

package/src/widgets/autoFocus.ts

@@ -1,9 +1,9 @@
-import { FocusManager } from "../ui/FocusManager";
-import { isTouchEvent } from "../util/isTouchEvent";
-
-export function autoFocus(el: HTMLElement | undefined | null, component: any): void {
-   let data = component.props.data || component.props.instance.data;
-   let autoFocusValue = el && data.autoFocus;
-   if (autoFocusValue && autoFocusValue != component.autoFocusValue && !isTouchEvent()) FocusManager.focus(el!);
-   component.autoFocusValue = autoFocusValue;
-}
+import { FocusManager } from "../ui/FocusManager";
+import { isTouchEvent } from "../util/isTouchEvent";
+
+export function autoFocus(el: HTMLElement | undefined | null, component: any): void {
+   let data = component.props.data || component.props.instance.data;
+   let autoFocusValue = el && data.autoFocus;
+   if (autoFocusValue && autoFocusValue != component.autoFocusValue && !isTouchEvent()) FocusManager.focus(el!);
+   component.autoFocusValue = autoFocusValue;
+}

package/src/widgets/cx.ts

@@ -1,63 +1,63 @@
-import { HtmlElement } from "./HtmlElement";
-import { VDOM } from "../ui/Widget";
-import { createComponentFactory, isComponentFactory } from "../util/Component";
-import { createFunctionalComponent } from "../ui/createFunctionalComponent";
-import { isString } from "../util/isString";
-import { isNumber } from "../util/isNumber";
-import { isFunction } from "../util/isFunction";
-import { isUndefined } from "../util/isUndefined";
-import { isArray } from "../util/isArray";
-
-import { flattenProps } from "../ui/flattenProps";
-
-let htmlFactoryCache: Record<string, any> = {};
-
-function getHtmlElementFactory(tagName: string): any {
-   let factory = htmlFactoryCache[tagName];
-   if (factory) return factory;
-   return (htmlFactoryCache[tagName] = createComponentFactory(
-      () => {},
-      (config: any) => HtmlElement.create(HtmlElement, { tag: tagName }, flattenProps(config)),
-      { tag: tagName },
-   ));
-}
-
-export function cx(typeName: any, props?: any, ...children: any[]): any {
-   if (isArray(typeName)) return typeName;
-
-   if (isFunction(typeName) && isUndefined(props))
-      return createFunctionalComponent((config: any) => typeName(flattenProps(config)));
-
-   if (typeName.type || typeName.$type) return typeName;
-
-   if (children && children.length == 0) children = [];
-
-   if (children && children.length == 1) children = children[0];
-
-   if (typeName == "cx") return children;
-
-   if (typeName == "react") return react(children);
-
-   if (isString(typeName) && typeName[0] == typeName[0].toLowerCase()) typeName = getHtmlElementFactory(typeName);
-
-   return {
-      $type: typeName,
-      $props: props,
-      jsxAttributes: props && Object.keys(props),
-      children,
-   };
-}
-
-export function react(config: any): any {
-   if (!config || isString(config) || isNumber(config) || VDOM.isValidElement(config)) return config;
-
-   if (isArray(config)) return config.map(react);
-
-   let type = config.$type;
-
-   if (isComponentFactory(type) && type.$meta && type.$meta.tag) type = type.$meta.tag;
-
-   if (isArray(config.children)) return VDOM.createElement(type, config.$props, ...config.children.map(react));
-
-   return VDOM.createElement(type, config.$props, react(config.children));
-}
+import { HtmlElement } from "./HtmlElement";
+import { VDOM } from "../ui/Widget";
+import { createComponentFactory, isComponentFactory } from "../util/Component";
+import { createFunctionalComponent } from "../ui/createFunctionalComponent";
+import { isString } from "../util/isString";
+import { isNumber } from "../util/isNumber";
+import { isFunction } from "../util/isFunction";
+import { isUndefined } from "../util/isUndefined";
+import { isArray } from "../util/isArray";
+
+import { flattenProps } from "../ui/flattenProps";
+
+let htmlFactoryCache: Record<string, any> = {};
+
+function getHtmlElementFactory(tagName: string): any {
+   let factory = htmlFactoryCache[tagName];
+   if (factory) return factory;
+   return (htmlFactoryCache[tagName] = createComponentFactory(
+      () => {},
+      (config: any) => HtmlElement.create(HtmlElement, { tag: tagName }, flattenProps(config)),
+      { tag: tagName },
+   ));
+}
+
+export function cx(typeName: any, props?: any, ...children: any[]): any {
+   if (isArray(typeName)) return typeName;
+
+   if (isFunction(typeName) && isUndefined(props))
+      return createFunctionalComponent((config: any) => typeName(flattenProps(config)));
+
+   if (typeName.type || typeName.$type) return typeName;
+
+   if (children && children.length == 0) children = [];
+
+   if (children && children.length == 1) children = children[0];
+
+   if (typeName == "cx") return children;
+
+   if (typeName == "react") return react(children);
+
+   if (isString(typeName) && typeName[0] == typeName[0].toLowerCase()) typeName = getHtmlElementFactory(typeName);
+
+   return {
+      $type: typeName,
+      $props: props,
+      jsxAttributes: props && Object.keys(props),
+      children,
+   };
+}
+
+export function react(config: any): any {
+   if (!config || isString(config) || isNumber(config) || VDOM.isValidElement(config)) return config;
+
+   if (isArray(config)) return config.map(react);
+
+   let type = config.$type;
+
+   if (isComponentFactory(type) && type.$meta && type.$meta.tag) type = type.$meta.tag;
+
+   if (isArray(config.children)) return VDOM.createElement(type, config.$props, ...config.children.map(react));
+
+   return VDOM.createElement(type, config.$props, react(config.children));
+}