verstak 0.96.26022 → 0.96.26024

package/build/dist/source/components/Button.v.js

@@ -1,10 +1,10 @@
-import { ReactiveTreeNode, derivative } from "reactronic";
+import { ReactiveTreeNode, setBasis } from "reactronic";
 import { Block, OnClick } from "verstak";
 import { rxModel } from "./common/Utils.js";
 import { Theme } from "./Theme.js";
 import { Icon } from "./Icon.v.js";
 export function Button(declaration) {
-    return (Block(derivative(declaration, {
+    return (Block(setBasis(declaration, {
         preparation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = rxModel({

package/build/dist/source/components/Icon.v.js

@@ -1,8 +1,8 @@
-import { derivative } from "reactronic";
+import { setBasis } from "reactronic";
 import { Block } from "verstak";
 import { Theme } from "./Theme.js";
 export function Icon(name, declaration) {
-    return (Block(derivative(declaration, {
+    return (Block(setBasis(declaration, {
         signalArgs: { name },
         body() {
             const theme = Theme.current.icon;

package/build/dist/source/components/Image.v.js

@@ -1,8 +1,8 @@
-import { derivative } from "reactronic";
+import { setBasis } from "reactronic";
 import { Block } from "verstak";
 import { rxModel } from "./common/Utils.js";
 export function Image(declaration) {
-    return (Block(derivative(declaration, {
+    return (Block(setBasis(declaration, {
         preparation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = rxModel({ source: undefined }));

package/build/dist/source/components/Input.v.js

@@ -1,10 +1,10 @@
-import { Mode, derivative } from "reactronic";
-import { Block, OnFocus, rowBreak, Fragment, KeyboardModifiers, Horizontal, Vertical } from "verstak";
+import { Mode, setBasis } from "reactronic";
+import { Block, OnFocus, rowBreak, Fragment, KeyboardModifiers, H, V } from "verstak";
 import { rxModel } from "./common/Utils.js";
 import { Theme } from "./Theme.js";
 import { Icon } from "./Icon.v.js";
 export function Input(declaration) {
-    return (Block(derivative(declaration, {
+    return (Block(setBasis(declaration, {
         preparation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = composeInputModel());
@@ -48,8 +48,8 @@ function InputField(model, styling) {
         preparation(el, base) {
             const e = this.native;
             this.useStylingPreset(styling.field);
-            this.horizontally = Horizontal.stretch;
-            this.vertically = Vertical.stretch;
+            this.selfAlignmentHorizontal = H.stretch;
+            this.selfAlignmentVertical = V.stretch;
             this.textIsEditable = true;
             e.tabIndex = 0;
             e.dataForSensor.focus = model;

package/build/dist/source/components/{RealTimeClock.d.ts → LiveTime.d.ts}

@@ -1,14 +1,10 @@
 import { RxObject } from "reactronic";
-export declare class RealTimeClock extends RxObject {
+export declare class LiveTime extends RxObject {
     hour: number;
     minute: number;
     second: number;
     ms: number;
     interval: number;
-    paused: boolean;
     constructor(interval?: number);
-    pause(value?: boolean): void;
     private tick;
-    protected activate(): void;
-    private put;
 }

package/build/dist/source/components/{RealTimeClock.js → LiveTime.js}

@@ -7,8 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { RxObject, transaction, reaction } from "reactronic";
-export class RealTimeClock extends RxObject {
+import { RxObject, transaction } from "reactronic";
+export class LiveTime extends RxObject {
     constructor(interval = 1000) {
         super();
         this.hour = 0;
@@ -16,49 +16,27 @@ export class RealTimeClock extends RxObject {
         this.second = 0;
         this.ms = 0;
         this.interval = 0;
-        this.paused = false;
         this.interval = interval;
-        this.put(new Date());
-    }
-    pause(value = true) {
-        this.paused = value;
+        this.tick();
     }
     tick() {
         let calibration = 0;
         try {
             const now = new Date();
-            this.put(now);
+            this.hour = now.getHours();
+            this.minute = now.getMinutes();
+            this.second = now.getSeconds();
+            this.ms = now.getMilliseconds();
             calibration = now.getTime() % this.interval;
         }
         finally {
             setTimeout(() => this.tick(), this.interval - calibration);
         }
     }
-    activate() {
-        this.tick();
-    }
-    put(time) {
-        this.hour = time.getHours();
-        this.minute = time.getMinutes();
-        this.second = time.getSeconds();
-        this.ms = time.getMilliseconds();
-    }
 }
 __decorate([
     transaction,
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Boolean]),
-    __metadata("design:returntype", void 0)
-], RealTimeClock.prototype, "pause", null);
-__decorate([
-    transaction,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], RealTimeClock.prototype, "tick", null);
-__decorate([
-    reaction,
-    __metadata("design:type", Function),
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
-], RealTimeClock.prototype, "activate", null);
+], LiveTime.prototype, "tick", null);

package/build/dist/source/components/Spinner.v.js

@@ -1,8 +1,8 @@
-import { Mode, derivative } from "reactronic";
+import { Mode, setBasis } from "reactronic";
 import { Block } from "verstak";
 import { rxModel } from "./common/Utils.js";
 export function Spinner(declaration) {
-    return (Block(derivative(declaration, {
+    return (Block(setBasis(declaration, {
         preparation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = composeSpinnerModel());

package/build/dist/source/components/Toggle.v.js

@@ -1,10 +1,10 @@
-import { ReactiveTreeNode, Mode, derivative } from "reactronic";
+import { ReactiveTreeNode, Mode, setBasis } from "reactronic";
 import { Block, OnClick } from "verstak";
 import { rxModel } from "./common/Utils.js";
 import { Theme } from "./Theme.js";
 import { Icon } from "./Icon.v.js";
 export function Toggle(declaration) {
-    return (Block(derivative(declaration, {
+    return (Block(setBasis(declaration, {
         preparation() {
             var _a;
             (_a = this.model) !== null && _a !== void 0 ? _a : (this.model = rxModel({

package/build/dist/source/components/api.d.ts

@@ -7,4 +7,4 @@ export * from "./Toggle.v.js";
 export * from "./Markdown.v.js";
 export * from "./Theme.js";
 export { rxModel } from "./common/Utils.js";
-export { RealTimeClock } from "./RealTimeClock.js";
+export { LiveTime } from "./LiveTime.js";

package/build/dist/source/components/api.js

@@ -7,4 +7,4 @@ export * from "./Toggle.v.js";
 export * from "./Markdown.v.js";
 export * from "./Theme.js";
 export { rxModel } from "./common/Utils.js";
-export { RealTimeClock } from "./RealTimeClock.js";
+export { LiveTime } from "./LiveTime.js";

package/build/dist/source/core/El.d.ts

@@ -8,12 +8,14 @@ export type El<T = any, M = any> = {
     place: ElPlace;
     width: Range;
     height: Range;
-    horizontally: Horizontal | undefined;
-    contentHorizontally: Horizontal | undefined;
-    vertically: Vertical | undefined;
-    contentVertically: Vertical | undefined;
-    stretchingStrengthHorizontally: number | undefined;
-    stretchingStrengthVertically: number | undefined;
+    alignmentHorizontal: H | undefined;
+    alignmentVertical: V | undefined;
+    alignmentVerticalRowWise: V | undefined;
+    selfAlignmentHorizontal: H | undefined;
+    selfAlignmentVertical: V | undefined;
+    selfAlignmentVerticalRowWise: V | undefined;
+    selfStretchingStrengthHorizontal: number | undefined;
+    selfStretchingStrengthVertical: number | undefined;
     contentWrapping: boolean;
     overlayVisible: boolean | undefined;
     text: string | undefined;
@@ -48,16 +50,16 @@ export type ElCoords = {
     x2: number;
     y2: number;
 };
-export declare enum Horizontal {
-    left = 0,
-    center = 1,
+export declare enum H {
+    center = 0,
+    left = 1,
     right = 2,
     stretch = 3,
     stretchAndFix = 4
 }
-export declare enum Vertical {
-    top = 0,
-    center = 1,
+export declare enum V {
+    center = 0,
+    top = 1,
     bottom = 2,
     stretch = 3,
     stretchAndFix = 4

package/build/dist/source/core/El.js

@@ -8,22 +8,22 @@ export var ElKind;
     ElKind[ElKind["cursor"] = 5] = "cursor";
     ElKind[ElKind["native"] = 6] = "native";
 })(ElKind || (ElKind = {}));
-export var Horizontal;
-(function (Horizontal) {
-    Horizontal[Horizontal["left"] = 0] = "left";
-    Horizontal[Horizontal["center"] = 1] = "center";
-    Horizontal[Horizontal["right"] = 2] = "right";
-    Horizontal[Horizontal["stretch"] = 3] = "stretch";
-    Horizontal[Horizontal["stretchAndFix"] = 4] = "stretchAndFix";
-})(Horizontal || (Horizontal = {}));
-export var Vertical;
-(function (Vertical) {
-    Vertical[Vertical["top"] = 0] = "top";
-    Vertical[Vertical["center"] = 1] = "center";
-    Vertical[Vertical["bottom"] = 2] = "bottom";
-    Vertical[Vertical["stretch"] = 3] = "stretch";
-    Vertical[Vertical["stretchAndFix"] = 4] = "stretchAndFix";
-})(Vertical || (Vertical = {}));
+export var H;
+(function (H) {
+    H[H["center"] = 0] = "center";
+    H[H["left"] = 1] = "left";
+    H[H["right"] = 2] = "right";
+    H[H["stretch"] = 3] = "stretch";
+    H[H["stretchAndFix"] = 4] = "stretchAndFix";
+})(H || (H = {}));
+export var V;
+(function (V) {
+    V[V["center"] = 0] = "center";
+    V[V["top"] = 1] = "top";
+    V[V["bottom"] = 2] = "bottom";
+    V[V["stretch"] = 3] = "stretch";
+    V[V["stretchAndFix"] = 4] = "stretchAndFix";
+})(V || (V = {}));
 export var Direction;
 (function (Direction) {
     Direction[Direction["horizontal"] = 0] = "horizontal";

package/build/dist/source/core/ElDriver.d.ts

@@ -1,5 +1,5 @@
 import { ReactiveTreeNode, BaseDriver } from "reactronic";
-import { El, ElKind, Horizontal, Vertical, Range, ElPlace, Direction } from "./El.js";
+import { El, ElKind, H, V, Range, ElPlace, Direction } from "./El.js";
 export declare class ElDriver<T extends Element, M = unknown> extends BaseDriver<El<T, M>> {
     create(node: ReactiveTreeNode<El<T, M>>): El<T, M>;
 }
@@ -15,12 +15,14 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     private _coords;
     private _width;
     private _height;
-    private _horizontal;
-    private _vertical;
-    private _contentHorizontal;
-    private _contentVertical;
-    private _stretchingStrengthHorizontally;
-    private _stretchingStrengthVertically;
+    private _alignmentHorizontal;
+    private _alignmentVertical;
+    private _alignmentVerticalRowWise;
+    private _selfAlignmentHorizontal;
+    private _selfAlignmentVertical;
+    private _selfAlignmentVerticalRowWise;
+    private _selfStretchingStrengthHorizontal;
+    private _selfStretchingStrengthVertical;
     private _contentWrapping;
     private _overlayVisible;
     private _text;
@@ -59,18 +61,22 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
         minPx: number;
         maxPx: number;
     });
-    get horizontally(): Horizontal | undefined;
-    set horizontally(value: Horizontal | undefined);
-    get vertically(): Vertical | undefined;
-    set vertically(value: Vertical | undefined);
-    get contentHorizontally(): Horizontal | undefined;
-    set contentHorizontally(value: Horizontal | undefined);
-    get contentVertically(): Vertical | undefined;
-    set contentVertically(value: Vertical | undefined);
-    get stretchingStrengthHorizontally(): number | undefined;
-    set stretchingStrengthHorizontally(value: number | undefined);
-    get stretchingStrengthVertically(): number | undefined;
-    set stretchingStrengthVertically(value: number | undefined);
+    get alignmentHorizontal(): H | undefined;
+    set alignmentHorizontal(value: H | undefined);
+    get alignmentVertical(): V | undefined;
+    set alignmentVertical(value: V | undefined);
+    get alignmentVerticalRowWise(): V | undefined;
+    set alignmentVerticalRowWise(value: V | undefined);
+    get selfAlignmentHorizontal(): H | undefined;
+    set selfAlignmentHorizontal(value: H | undefined);
+    get selfAlignmentVertical(): V | undefined;
+    set selfAlignmentVertical(value: V | undefined);
+    get selfAlignmentVerticalRowWise(): V | undefined;
+    set selfAlignmentVerticalRowWise(value: V | undefined);
+    get selfStretchingStrengthHorizontal(): number | undefined;
+    set selfStretchingStrengthHorizontal(value: number | undefined);
+    get selfStretchingStrengthVertical(): number | undefined;
+    set selfStretchingStrengthVertical(value: number | undefined);
     get contentWrapping(): boolean;
     set contentWrapping(value: boolean);
     get overlayVisible(): boolean | undefined;
@@ -95,10 +101,14 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
     private static applyCoords;
     private static applyWidth;
     private static applyHeight;
-    private static applyHorizontal;
-    private static applyVertical;
-    private static applyStretchingStrengthH;
-    private static applyStretchingStrengthV;
+    private static applyAlignmentHorizontal;
+    private static applyAlignmentVertical;
+    private static applyAlignmentVerticalRowWise;
+    private static applySelfAlignmentHorizontal;
+    private static applyPartitionAlignmentVertical;
+    private static applySelfAlignmentVertical;
+    private static applySelfStretchingStrengthHorizontal;
+    private static applySelfStretchingStrengthVertical;
     private static applyContentWrapping;
     private static applyOverlayVisible;
     static applySealed<T extends Element>(element: El<T, any>, value: Direction | undefined): void;
@@ -151,4 +161,10 @@ export declare const Constants: {
     kindAttrName: string;
     ownReactiveTreeNodeKey: symbol;
 };
+export declare const StylingClassNameByAlignmentHorizontal: Array<string>;
+export declare const StylingClassNameByAlignmentVertical: Array<string>;
+export declare const StylingClassNameByAlignmentVerticalRowWise: Array<string>;
+export declare const StylingClassNameBySelfAlignmentHorizontal: Array<string>;
+export declare const StylingClassNameBySelfAlignmentVertical: Array<string>;
+export declare const StylingClassNameByPartitionAlignmentVertical: Array<string>;
 export {};