verstak 0.23.107 → 0.23.109

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

@@ -1,5 +1,4 @@
+export * from "./Interfaces";
 export * from "./Utils";
-export * from "./CellRange";
-export * from "./Cursor";
 export * from "./Restyler";
-export * from "./VBlock";
+export * from "./Verstak";

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

@@ -1,5 +1,4 @@
+export * from "./Interfaces";
 export * from "./Utils";
-export * from "./CellRange";
-export * from "./Cursor";
 export * from "./Restyler";
-export * from "./VBlock";
+export * from "./Verstak";

package/build/dist/source/html/Blocks.d.ts

@@ -1,25 +1,27 @@
-import { VBlock, Layout, BlockBuilder, Align, CellRange } from "../core/api";
+import { Block, BlockKind, BlockBuilder, Align, BlockCoords, BlockArea } from "../core/api";
 import { HtmlDriver } from "./HtmlDriver";
-export declare function VSection<M = unknown, R = void>(builder?: BlockBuilder<HTMLElement, M, R>, base?: BlockBuilder<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
-export declare function VTable<M = unknown, R = void>(builder?: BlockBuilder<HTMLElement, M, R>, base?: BlockBuilder<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
-export declare function row<T = void>(builder?: (block: void) => T, key?: string): void;
-export declare function fromNewRow(key?: string): void;
-export declare function VNote(content: string, builder?: BlockBuilder<HTMLElement, void, void>): VBlock<HTMLElement, void, void>;
-export declare function VHtmlNote(content: string, builder?: BlockBuilder<HTMLElement, void, void>): VBlock<HTMLElement, void, void>;
-export declare function VGroup<M = unknown, R = void>(builder?: BlockBuilder<HTMLElement, M, R>, base?: BlockBuilder<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
+export declare function Band<M = unknown, R = void>(builder?: BlockBuilder<HTMLElement, M, R>, base?: BlockBuilder<HTMLElement, M, R>): Block<HTMLElement, M, R>;
+export declare function Table<M = unknown, R = void>(builder?: BlockBuilder<HTMLElement, M, R>, base?: BlockBuilder<HTMLElement, M, R>): Block<HTMLElement, M, R>;
+export declare function row<T = void>(builder?: (block: void) => T, shiftCursorDown?: number): void;
+export declare function fromNewRow(shiftCursorDown?: number): void;
+export declare function cursor(areaParams: BlockArea): void;
+export declare function Note(content: string, builder?: BlockBuilder<HTMLElement, void, void>): Block<HTMLElement, void, void>;
+export declare function HtmlNote(content: string, builder?: BlockBuilder<HTMLElement, void, void>): Block<HTMLElement, void, void>;
+export declare function Group<M = unknown, R = void>(builder?: BlockBuilder<HTMLElement, M, R>, base?: BlockBuilder<HTMLElement, M, R>): Block<HTMLElement, M, R>;
+export declare function Fragment<M = unknown, R = void>(builder?: BlockBuilder<void, M, R>, base?: BlockBuilder<void, M, R>): Block<void, M, R>;
 export declare class VerstakHtmlDriver<T extends HTMLElement> extends HtmlDriver<T> {
-    applyChildrenLayout(block: VBlock<T, any, any>, value: Layout): void;
-    applyCellRange(block: VBlock<T>, value: CellRange | undefined): void;
-    applyWidthGrowth(block: VBlock<T>, value: number): void;
-    applyMinWidth(block: VBlock<T>, value: string): void;
-    applyMaxWidth(block: VBlock<T>, value: string): void;
-    applyHeightGrowth(block: VBlock<T>, value: number): void;
-    applyMinHeight(block: VBlock<T>, value: string): void;
-    applyMaxHeight(block: VBlock<T>, value: string): void;
-    applyContentAlignment(block: VBlock<T>, value: Align): void;
-    applyBlockAlignment(block: VBlock<T>, value: Align): void;
-    applyContentWrapping(block: VBlock<T>, value: boolean): void;
-    applyOverlayVisible(block: VBlock<T>, value: boolean | undefined): void;
-    applyStyle(block: VBlock<T, any, any>, secondary: boolean, styleName: string, enabled?: boolean): void;
-    render(block: VBlock<T>): void | Promise<void>;
+    applyKind(block: Block<T, any, any>, value: BlockKind): void;
+    applyCoords(block: Block<T>, value: BlockCoords | undefined): void;
+    applyWidthGrowth(block: Block<T>, value: number): void;
+    applyMinWidth(block: Block<T>, value: string): void;
+    applyMaxWidth(block: Block<T>, value: string): void;
+    applyHeightGrowth(block: Block<T>, value: number): void;
+    applyMinHeight(block: Block<T>, value: string): void;
+    applyMaxHeight(block: Block<T>, value: string): void;
+    applyContentAlignment(block: Block<T>, value: Align): void;
+    applyBlockAlignment(block: Block<T>, value: Align): void;
+    applyContentWrapping(block: Block<T>, value: boolean): void;
+    applyOverlayVisible(block: Block<T>, value: boolean | undefined): void;
+    applyStyle(block: Block<T, any, any>, secondary: boolean, styleName: string, enabled?: boolean): void;
+    render(block: Block<T>): void | Promise<void>;
 }

package/build/dist/source/html/Blocks.js

@@ -1,64 +1,74 @@
-import { VBlock, Layout, Align } from "../core/api";
+import { Verstak, BlockKind, Align, CursorCommandDriver, BaseDriver } from "../core/api";
 import { HtmlDriver } from "./HtmlDriver";
-export function VSection(builder, base) {
-    return VBlock.claim(Drivers.section, builder, base);
+export function Band(builder, base) {
+    return Verstak.claim(Drivers.band, builder, base);
 }
-export function VTable(builder, base) {
-    return VBlock.claim(Drivers.table, builder, base);
+export function Table(builder, base) {
+    return Verstak.claim(Drivers.table, builder, base);
 }
-export function row(builder, key) {
-    fromNewRow(key);
+export function row(builder, shiftCursorDown) {
+    fromNewRow(shiftCursorDown);
     builder === null || builder === void 0 ? void 0 : builder();
 }
-export function fromNewRow(key) {
-    VBlock.claim(Drivers.row, { key });
+export function fromNewRow(shiftCursorDown) {
+    Verstak.claim(Drivers.row);
 }
-export function VNote(content, builder) {
-    return VBlock.claim(Drivers.note, builder, {
+export function cursor(areaParams) {
+    Verstak.claim(Drivers.cursor, {
+        render(b) {
+            b.area = areaParams;
+        },
+    });
+}
+export function Note(content, builder) {
+    return Verstak.claim(Drivers.note, builder, {
         render(b) {
             b.native.innerText = content;
         }
     });
 }
-export function VHtmlNote(content, builder) {
-    return VBlock.claim(Drivers.note, builder, {
+export function HtmlNote(content, builder) {
+    return Verstak.claim(Drivers.note, builder, {
         render(b) {
             b.native.innerHTML = content;
         }
     });
 }
-export function VGroup(builder, base) {
-    return VBlock.claim(Drivers.group, builder, base);
+export function Group(builder, base) {
+    return Verstak.claim(Drivers.group, builder, base);
+}
+export function Fragment(builder, base) {
+    return Verstak.claim(BaseDriver.fragment, builder, base);
 }
 export class VerstakHtmlDriver extends HtmlDriver {
-    applyChildrenLayout(block, value) {
+    applyKind(block, value) {
         const kind = Constants.layouts[value];
         kind && block.native.setAttribute(Constants.attribute, kind);
         VerstakDriversByLayout[value](block);
-        super.applyChildrenLayout(block, value);
+        super.applyKind(block, value);
     }
-    applyCellRange(block, value) {
-        const css = block.native.style;
+    applyCoords(block, value) {
+        const s = block.native.style;
         if (value) {
             const x1 = value.x1 || 1;
             const y1 = value.y1 || 1;
             const x2 = value.x2 || x1;
             const y2 = value.y2 || y1;
-            css.gridArea = `${y1} / ${x1} / span ${y2 - y1 + 1} / span ${x2 - x1 + 1}`;
+            s.gridArea = `${y1} / ${x1} / span ${y2 - y1 + 1} / span ${x2 - x1 + 1}`;
         }
         else
-            css.gridArea = "";
-        super.applyCellRange(block, value);
+            s.gridArea = "";
+        super.applyCoords(block, value);
     }
     applyWidthGrowth(block, value) {
-        const css = block.native.style;
+        const s = block.native.style;
         if (value > 0) {
-            css.flexGrow = `${value}`;
-            css.flexBasis = "0";
+            s.flexGrow = `${value}`;
+            s.flexBasis = "0";
         }
         else {
-            css.flexGrow = "";
-            css.flexBasis = "";
+            s.flexGrow = "";
+            s.flexBasis = "";
         }
     }
     applyMinWidth(block, value) {
@@ -68,16 +78,21 @@ export class VerstakHtmlDriver extends HtmlDriver {
         block.native.style.maxWidth = `${value}`;
     }
     applyHeightGrowth(block, value) {
-        if (block.driver.isRow) {
-            const css = block.native.style;
+        const bNode = block.descriptor;
+        const driver = bNode.driver;
+        if (driver.isRow) {
+            const s = block.native.style;
             if (value > 0)
-                css.flexGrow = `${value}`;
+                s.flexGrow = `${value}`;
             else
-                css.flexGrow = "";
+                s.flexGrow = "";
         }
-        else if (block.host.driver.isRow) {
-            block.driver.applyBlockAlignment(block, Align.Stretch);
-            block.host.driver.applyHeightGrowth(block.host, value);
+        else {
+            const hostDriver = bNode.host.descriptor.driver;
+            if (hostDriver.isRow) {
+                driver.applyBlockAlignment(block, Align.Stretch);
+                hostDriver.applyHeightGrowth(bNode.host, value);
+            }
         }
     }
     applyMinHeight(block, value) {
@@ -87,71 +102,71 @@ export class VerstakHtmlDriver extends HtmlDriver {
         block.native.style.maxHeight = `${value}`;
     }
     applyContentAlignment(block, value) {
-        const css = block.native.style;
+        const s = block.native.style;
         if ((value & Align.Default) === 0) {
             const v = AlignToCss[(value >> 2) & 0b11];
             const h = AlignToCss[value & 0b11];
             const t = TextAlignCss[value & 0b11];
-            css.justifyContent = v;
-            css.alignItems = h;
-            css.textAlign = t;
+            s.justifyContent = v;
+            s.alignItems = h;
+            s.textAlign = t;
         }
         else
-            css.justifyContent = css.alignContent = css.textAlign = "";
+            s.justifyContent = s.alignContent = s.textAlign = "";
     }
     applyBlockAlignment(block, value) {
-        const css = block.native.style;
+        const s = block.native.style;
         if ((value & Align.Default) === 0) {
             const v = AlignToCss[(value >> 2) & 0b11];
             const h = AlignToCss[value & 0b11];
-            css.alignSelf = v;
-            css.justifySelf = h;
+            s.alignSelf = v;
+            s.justifySelf = h;
         }
         else
-            css.alignSelf = css.justifySelf = "";
+            s.alignSelf = s.justifySelf = "";
     }
     applyContentWrapping(block, value) {
-        const css = block.native.style;
+        const s = block.native.style;
         if (value) {
-            css.flexFlow = "wrap";
-            css.overflow = "";
-            css.textOverflow = "";
-            css.whiteSpace = "";
+            s.flexFlow = "wrap";
+            s.overflow = "";
+            s.textOverflow = "";
+            s.whiteSpace = "";
         }
         else {
-            css.flexFlow = "";
-            css.overflow = "hidden";
-            css.textOverflow = "ellipsis";
-            css.whiteSpace = "nowrap";
+            s.flexFlow = "";
+            s.overflow = "hidden";
+            s.textOverflow = "ellipsis";
+            s.whiteSpace = "nowrap";
         }
     }
     applyOverlayVisible(block, value) {
         const e = block.native;
-        const css = e.style;
-        const parent = HtmlDriver.findNearestParentHtmlBlock(block).native;
+        const s = e.style;
+        const host = HtmlDriver.findEffectiveHtmlBlockHost(block).native;
         if (value === true) {
             const doc = document.body;
-            const rect = parent.getBoundingClientRect();
+            const rect = host.getBoundingClientRect();
             if (doc.offsetWidth - rect.left > rect.right)
-                css.left = "0", css.right = "";
+                s.left = "0", s.right = "";
             else
-                css.left = "", css.right = "0";
+                s.left = "", s.right = "0";
             if (doc.clientHeight - rect.top > rect.bottom)
-                css.top = "100%", css.bottom = "";
+                s.top = "100%", s.bottom = "";
             else
-                css.top = "", css.bottom = "100%";
-            css.display = "";
-            css.position = "absolute";
-            css.minWidth = "100%";
-            css.boxSizing = "border-box";
-            parent.style.position = "relative";
+                s.top = "", s.bottom = "100%";
+            s.display = "";
+            s.position = "absolute";
+            s.minWidth = "100%";
+            s.boxSizing = "border-box";
+            host.style.position = "relative";
         }
         else {
-            parent.style.position = "";
+            host.style.position = "";
             if (value === false)
-                css.display = "none";
+                s.display = "none";
             else
-                css.position = css.display = css.left = css.right = css.top = css.bottom = "";
+                s.position = s.display = s.left = s.right = s.top = s.bottom = "";
         }
     }
     applyStyle(block, secondary, styleName, enabled) {
@@ -163,7 +178,7 @@ export class VerstakHtmlDriver extends HtmlDriver {
             e.className = enabled ? styleName : "";
     }
     render(block) {
-        if (block.childrenLayout < Layout.Row)
+        if (block.kind <= BlockKind.Table)
             fromNewRow();
         return super.render(block);
     }
@@ -171,54 +186,53 @@ export class VerstakHtmlDriver extends HtmlDriver {
 const Constants = {
     block: "block",
     row: "row",
-    layouts: ["section", "table", "", "group", "note"],
+    layouts: ["band", "table", "note", "group", "", ""],
     attribute: "kind",
 };
 const Drivers = {
-    section: new VerstakHtmlDriver(Constants.block, false, b => b.childrenLayout = Layout.Section),
-    table: new VerstakHtmlDriver(Constants.block, false, b => b.childrenLayout = Layout.Table),
-    row: new VerstakHtmlDriver(Constants.row, true, b => b.childrenLayout = Layout.Row),
-    group: new VerstakHtmlDriver(Constants.block, false, b => b.childrenLayout = Layout.Group),
-    note: new VerstakHtmlDriver(Constants.block, false, b => b.childrenLayout = Layout.Note),
+    band: new VerstakHtmlDriver(Constants.block, false, b => b.kind = BlockKind.Band),
+    table: new VerstakHtmlDriver(Constants.block, false, b => b.kind = BlockKind.Table),
+    note: new VerstakHtmlDriver(Constants.block, false, b => b.kind = BlockKind.Note),
+    group: new VerstakHtmlDriver(Constants.block, false, b => b.kind = BlockKind.Group),
+    row: new VerstakHtmlDriver(Constants.row, true, b => b.kind = BlockKind.Row),
+    cursor: new CursorCommandDriver(),
 };
 const VerstakDriversByLayout = [
     b => {
-        const css = b.native.style;
-        css.alignSelf = "center";
-        css.display = "flex";
-        css.flexDirection = "column";
-        css.justifyContent = "center";
-        css.textAlign = "initial";
-        css.flexShrink = "1";
-        css.minWidth = "0";
+        const s = b.native.style;
+        s.display = "flex";
+        s.flexDirection = "column";
+        s.alignSelf = b.descriptor.owner.isTable ? "stretch" : "center";
+        s.textAlign = "initial";
+        s.flexShrink = "1";
+        s.minWidth = "0";
     },
     b => {
-        const css = b.native.style;
-        css.alignSelf = "center";
-        css.display = "grid";
-        css.flexBasis = "0";
-        css.gridAutoRows = "minmax(min-content, 1fr)";
-        css.gridAutoColumns = "minmax(min-content, 1fr)";
-        css.textAlign = "initial";
+        const s = b.native.style;
+        s.alignSelf = b.descriptor.owner.isTable ? "stretch" : "center";
+        s.display = "grid";
+        s.flexBasis = "0";
+        s.gridAutoRows = "minmax(min-content, 1fr)";
+        s.gridAutoColumns = "minmax(min-content, 1fr)";
+        s.textAlign = "initial";
     },
     b => {
-        const css = b.native.style;
-        css.display = "flex";
-        css.flexDirection = "row";
+        const s = b.native.style;
+        s.alignSelf = b.descriptor.owner.isTable ? "stretch" : "center";
+        s.display = "inline-grid";
+        s.flexShrink = "1";
+        s.overflow = "";
+        s.textOverflow = "";
+        s.whiteSpace = "";
     },
     b => {
-        const css = b.native.style;
-        css.alignSelf = "center";
-        css.display = "contents";
+        const s = b.native.style;
+        s.display = "contents";
     },
     b => {
-        const css = b.native.style;
-        css.alignSelf = "center";
-        css.display = "inline-block";
-        css.flexShrink = "1";
-        css.overflow = "";
-        css.textOverflow = "";
-        css.whiteSpace = "";
+        const s = b.native.style;
+        s.display = b.descriptor.owner.isTable ? "none" : "flex";
+        s.flexDirection = "row";
     },
 ];
 const AlignToCss = ["stretch", "start", "center", "end"];