verstak 0.23.106 → 0.23.107

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

@@ -1,53 +1,59 @@
-import { VBlock, LayoutKind, Align, GridCursor } from "../core/api";
+import { VBlock, Layout, Align } from "../core/api";
 import { HtmlDriver } from "./HtmlDriver";
-export function Ribbon(body, base) {
-    return VBlock.claim(VerstakTags.block, body, base);
+export function VSection(builder, base) {
+    return VBlock.claim(Drivers.section, builder, base);
 }
-export function Table(body, base) {
-    return VBlock.claim(VerstakTags.grid, body, base);
+export function VTable(builder, base) {
+    return VBlock.claim(Drivers.table, builder, base);
 }
-export function line(body) {
-    lineFeed();
-    body();
+export function row(builder, key) {
+    fromNewRow(key);
+    builder === null || builder === void 0 ? void 0 : builder();
 }
-export function lineFeed(noCoalescing, key) {
-    return VBlock.claim(VerstakTags.line, { key });
+export function fromNewRow(key) {
+    VBlock.claim(Drivers.row, { key });
 }
-export function Note(content, body) {
-    return VBlock.claim(VerstakTags.text, body, {
+export function VNote(content, builder) {
+    return VBlock.claim(Drivers.note, builder, {
         render(b) {
             b.native.innerText = content;
         }
     });
 }
-export function HtmlNote(content, body) {
-    return VBlock.claim(VerstakTags.text, body, {
+export function VHtmlNote(content, builder) {
+    return VBlock.claim(Drivers.note, builder, {
         render(b) {
             b.native.innerHTML = content;
         }
     });
 }
-export function Group(body, base) {
-    return VBlock.claim(VerstakTags.group, body, base);
+export function VGroup(builder, base) {
+    return VBlock.claim(Drivers.group, builder, base);
 }
-export class VerstakDriver extends HtmlDriver {
-    applyCellRange(block, cellRange) {
+export class VerstakHtmlDriver extends HtmlDriver {
+    applyChildrenLayout(block, value) {
+        const kind = Constants.layouts[value];
+        kind && block.native.setAttribute(Constants.attribute, kind);
+        VerstakDriversByLayout[value](block);
+        super.applyChildrenLayout(block, value);
+    }
+    applyCellRange(block, value) {
         const css = block.native.style;
-        if (cellRange) {
-            const x1 = cellRange.x1 || 1;
-            const y1 = cellRange.y1 || 1;
-            const x2 = cellRange.x2 || x1;
-            const y2 = cellRange.y2 || y1;
+        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}`;
         }
         else
             css.gridArea = "";
-        super.applyCellRange(block, cellRange);
+        super.applyCellRange(block, value);
     }
-    applyWidthGrowth(block, widthGrowth) {
+    applyWidthGrowth(block, value) {
         const css = block.native.style;
-        if (widthGrowth > 0) {
-            css.flexGrow = `${widthGrowth}`;
+        if (value > 0) {
+            css.flexGrow = `${value}`;
             css.flexBasis = "0";
         }
         else {
@@ -55,37 +61,37 @@ export class VerstakDriver extends HtmlDriver {
             css.flexBasis = "";
         }
     }
-    applyMinWidth(block, minWidth) {
-        block.native.style.minWidth = `${minWidth}`;
+    applyMinWidth(block, value) {
+        block.native.style.minWidth = `${value}`;
     }
-    applyMaxWidth(block, maxWidth) {
-        block.native.style.maxWidth = `${maxWidth}`;
+    applyMaxWidth(block, value) {
+        block.native.style.maxWidth = `${value}`;
     }
-    applyHeightGrowth(block, heightGrowth) {
-        if (block.driver.isLine) {
+    applyHeightGrowth(block, value) {
+        if (block.driver.isRow) {
             const css = block.native.style;
-            if (heightGrowth > 0)
-                css.flexGrow = `${heightGrowth}`;
+            if (value > 0)
+                css.flexGrow = `${value}`;
             else
                 css.flexGrow = "";
         }
-        else if (block.host.driver.isLine) {
-            block.driver.applyFrameAlignment(block, Align.Stretch);
-            block.host.driver.applyHeightGrowth(block.host, heightGrowth);
+        else if (block.host.driver.isRow) {
+            block.driver.applyBlockAlignment(block, Align.Stretch);
+            block.host.driver.applyHeightGrowth(block.host, value);
         }
     }
-    applyMinHeight(block, minHeight) {
-        block.native.style.minHeight = `${minHeight}`;
+    applyMinHeight(block, value) {
+        block.native.style.minHeight = `${value}`;
     }
-    applyMaxHeight(block, maxHeight) {
-        block.native.style.maxHeight = `${maxHeight}`;
+    applyMaxHeight(block, value) {
+        block.native.style.maxHeight = `${value}`;
     }
-    applyContentAlignment(block, contentAlign) {
+    applyContentAlignment(block, value) {
         const css = block.native.style;
-        if ((contentAlign & Align.Default) === 0) {
-            const v = AlignToCss[(contentAlign >> 2) & 0b11];
-            const h = AlignToCss[contentAlign & 0b11];
-            const t = TextAlignCss[contentAlign & 0b11];
+        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;
@@ -93,43 +99,62 @@ export class VerstakDriver extends HtmlDriver {
         else
             css.justifyContent = css.alignContent = css.textAlign = "";
     }
-    applyFrameAlignment(block, frameAlign) {
+    applyBlockAlignment(block, value) {
         const css = block.native.style;
-        if ((frameAlign & Align.Default) === 0) {
-            const v = AlignToCss[(frameAlign >> 2) & 0b11];
-            const h = AlignToCss[frameAlign & 0b11];
+        if ((value & Align.Default) === 0) {
+            const v = AlignToCss[(value >> 2) & 0b11];
+            const h = AlignToCss[value & 0b11];
             css.alignSelf = v;
             css.justifySelf = h;
         }
         else
             css.alignSelf = css.justifySelf = "";
     }
-    applyContentWrapping(block, contentWrapping) {
-        if (contentWrapping)
-            block.native.setAttribute("wrapping", "true");
-        else
-            block.native.removeAttribute("wrapping");
+    applyContentWrapping(block, value) {
+        const css = block.native.style;
+        if (value) {
+            css.flexFlow = "wrap";
+            css.overflow = "";
+            css.textOverflow = "";
+            css.whiteSpace = "";
+        }
+        else {
+            css.flexFlow = "";
+            css.overflow = "hidden";
+            css.textOverflow = "ellipsis";
+            css.whiteSpace = "nowrap";
+        }
     }
-    applyOverlayVisible(block, overlayVisible) {
+    applyOverlayVisible(block, value) {
         const e = block.native;
+        const css = e.style;
         const parent = HtmlDriver.findNearestParentHtmlBlock(block).native;
-        if (overlayVisible === true) {
+        if (value === true) {
             const doc = document.body;
             const rect = parent.getBoundingClientRect();
-            const h = doc.offsetWidth - rect.left > rect.right ? "rightward" : "leftward";
-            const v = doc.clientHeight - rect.top > rect.bottom ? "downward" : "upward";
-            e.setAttribute("overlay", `${h}-${v}`);
-            parent.setAttribute("stacking", "true");
+            if (doc.offsetWidth - rect.left > rect.right)
+                css.left = "0", css.right = "";
+            else
+                css.left = "", css.right = "0";
+            if (doc.clientHeight - rect.top > rect.bottom)
+                css.top = "100%", css.bottom = "";
+            else
+                css.top = "", css.bottom = "100%";
+            css.display = "";
+            css.position = "absolute";
+            css.minWidth = "100%";
+            css.boxSizing = "border-box";
+            parent.style.position = "relative";
         }
         else {
-            parent.removeAttribute("stacking");
-            if (overlayVisible === false)
-                e.setAttribute("overlay", "hidden");
+            parent.style.position = "";
+            if (value === false)
+                css.display = "none";
             else
-                e.removeAttribute("overlay");
+                css.position = css.display = css.left = css.right = css.top = css.bottom = "";
         }
     }
-    applyStyling(block, secondary, styleName, enabled) {
+    applyStyle(block, secondary, styleName, enabled) {
         const e = block.native;
         enabled !== null && enabled !== void 0 ? enabled : (enabled = true);
         if (secondary)
@@ -138,17 +163,63 @@ export class VerstakDriver extends HtmlDriver {
             e.className = enabled ? styleName : "";
     }
     render(block) {
-        if (block.driver.layout < LayoutKind.Line)
-            lineFeed();
+        if (block.childrenLayout < Layout.Row)
+            fromNewRow();
         return super.render(block);
     }
 }
-const VerstakTags = {
-    block: new VerstakDriver("v-block", LayoutKind.Block),
-    text: new VerstakDriver("v-text", LayoutKind.Text),
-    grid: new VerstakDriver("v-grid", LayoutKind.Grid, () => new GridCursor()),
-    line: new VerstakDriver("v-line", LayoutKind.Line),
-    group: new VerstakDriver("v-group", LayoutKind.Fragment),
+const Constants = {
+    block: "block",
+    row: "row",
+    layouts: ["section", "table", "", "group", "note"],
+    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),
 };
+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";
+    },
+    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";
+    },
+    b => {
+        const css = b.native.style;
+        css.display = "flex";
+        css.flexDirection = "row";
+    },
+    b => {
+        const css = b.native.style;
+        css.alignSelf = "center";
+        css.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 AlignToCss = ["stretch", "start", "center", "end"];
 const TextAlignCss = ["justify", "left", "center", "right"];