verstak 0.24.274 → 0.24.277

package/build/dist/source/html/DraggableArea.view.js

@@ -4,7 +4,7 @@ import { Handling } from "./Elements.js";
 export function DraggableArea(draggingId, builder) {
     return (Div(builder, {
         mode: Mode.independentUpdate,
-        onChange: b => {
+        script: b => {
             const e = b.native;
             const model = b.model;
             const dataForSensor = e.dataForSensor;

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

@@ -759,7 +759,7 @@ export const Constants = {
     partition: "part",
     splitter: "splitter",
     group: "group",
-    layouts: ["section", "table", "note", "group", "", "", ""],
+    layouts: ["panel", "table", "note", "group", "", "", ""],
     keyAttrName: "key",
     kindAttrName: "kind",
 };
@@ -808,6 +808,7 @@ const VerstakDriversByLayout = [
         const s = el.style;
         s.display = owner.isTable ? "contents" : "flex";
         s.flexDirection = "row";
+        s.alignItems = "center";
         s.gap = "inherit";
     },
     el => {

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

@@ -10,7 +10,7 @@ export declare function declareSplitter<T>(index: number, splitViewNode: RxNode<
 export declare function cursor(areaParams: ElPlace): void;
 export declare function Note(content: string, formatted?: boolean, declaration?: RxNodeDecl<El<HTMLElement, void>>): RxNode<El<HTMLElement, void>>;
 export declare function Group<M = unknown, R = void>(declaration?: RxNodeDecl<El<HTMLElement, M>>, preset?: RxNodeDecl<El<HTMLElement, M>>): RxNode<El<HTMLElement, M>>;
-export declare function Handling<M = unknown>(onChange: Delegate<El<void, M>>): RxNode<El<void, M>>;
+export declare function Handling<M = unknown>(script: Delegate<El<void, M>>): RxNode<El<void, M>>;
 export declare function SyntheticElement<M = unknown>(declaration?: RxNodeDecl<El<void, M>>, preset?: RxNodeDecl<El<void, M>>): RxNode<El<void, M>>;
 export declare class PanelDriver<T extends HTMLElement> extends HtmlDriver<T> {
     update(node: RxNode<El<T>>): void | Promise<void>;

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

@@ -19,7 +19,7 @@ export function Splitter(declaration, preset) {
 }
 export function rowBreak(shiftCursorDown) {
     RxNode.declare(Drivers.partition, {
-        onChange: el => {
+        script: el => {
             const ownerEl = el.node.owner.element;
             if (ownerEl.splitView !== undefined) {
                 el.style.display = "grid";
@@ -34,8 +34,8 @@ export function declareSplitter(index, splitViewNode) {
     return (Splitter({
         key,
         mode: Mode.independentUpdate,
-        onCreate: el => el.native.className = `splitter ${key}`,
-        onChange: b => {
+        creation: el => el.native.className = `splitter ${key}`,
+        script: b => {
             const e = b.native;
             const model = b.model;
             const dataForSensor = e.dataForSensor;
@@ -84,14 +84,14 @@ export function declareSplitter(index, splitViewNode) {
 }
 export function cursor(areaParams) {
     RxNode.declare(Drivers.cursor, {
-        onChange: el => {
+        script: el => {
             el.place = areaParams;
         },
     });
 }
 export function Note(content, formatted, declaration) {
     return RxNode.declare(Drivers.note, declaration, {
-        onChange: el => {
+        script: el => {
             if (formatted)
                 el.native.innerHTML = content;
             else
@@ -102,8 +102,8 @@ export function Note(content, formatted, declaration) {
 export function Group(declaration, preset) {
     return RxNode.declare(Drivers.group, declaration, preset);
 }
-export function Handling(onChange) {
-    return SyntheticElement({ mode: Mode.independentUpdate, onChange });
+export function Handling(script) {
+    return SyntheticElement({ mode: Mode.independentUpdate, script });
 }
 export function SyntheticElement(declaration, preset) {
     return RxNode.declare(Drivers.synthetic, declaration, preset);
@@ -158,7 +158,7 @@ export class PanelDriver extends HtmlDriver {
             SyntheticElement({
                 mode: Mode.independentUpdate,
                 triggers: { stamp: el.node.stamp },
-                onChange: () => {
+                script: () => {
                     const native = el.native;
                     const isHorizontal = el.splitView === Direction.horizontal;
                     if (el.layoutInfo === undefined)
@@ -230,7 +230,7 @@ export class PanelDriver extends HtmlDriver {
                     if (childDeclaration.triggers === undefined)
                         childDeclaration.triggers = {};
                     Object.defineProperty(childDeclaration.triggers, "index", { value: partCount });
-                    overrideMethod(childDeclaration, "onChange", el => {
+                    overrideMethod(childDeclaration, "script", el => {
                         if (isHorizontal)
                             el.style.gridColumn = `${partCount + 1}`;
                         else
@@ -255,9 +255,9 @@ export function isSplitViewPartition(childDriver) {
     return !childDriver.isPartition && childDriver !== Drivers.splitter && childDriver !== Drivers.synthetic;
 }
 function overrideMethod(declaration, method, func) {
-    const baseOnChange = declaration[method];
-    declaration[method] = baseOnChange !== undefined
-        ? (el, base) => { baseOnChange(el, base); func(el); }
+    const baseScript = declaration[method];
+    declaration[method] = baseScript !== undefined
+        ? (el, base) => { baseScript(el, base); func(el); }
         : (el, base) => { base(); func(el); };
 }
 export const Drivers = {

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

@@ -6,7 +6,7 @@ export function OnClick(target, action, key) {
             key,
             mode: Mode.independentUpdate,
             triggers: { target },
-            onChange: el => {
+            script: el => {
                 const pointer = target.sensors.pointer;
                 if (target.dataForSensor.click !== undefined && pointer.clicked === target.dataForSensor.click || target.dataForSensor.click === undefined && pointer.clicked) {
                     if (action instanceof Function) {
@@ -26,7 +26,7 @@ export function OnResize(target, action, key) {
             key,
             mode: Mode.independentUpdate,
             triggers: { target },
-            onChange: el => {
+            script: el => {
                 const resize = target.sensors.resize;
                 resize.resizedElements.forEach(x => {
                     action(x);
@@ -40,10 +40,10 @@ export function OnFocus(target, model, switchEditMode = undefined, key) {
         key,
         mode: Mode.independentUpdate,
         triggers: { target, model },
-        onCreate: el => {
+        creation: el => {
             el.node.configureReactronic({ throttling: 0 });
         },
-        onChange: el => {
+        script: el => {
             if (switchEditMode === undefined && !(target instanceof HTMLInputElement || target.hasAttribute("tabindex")))
                 console.warn(`"${key !== null && key !== void 0 ? key : "noname"}" element must have "tabindex" attribute set in order to be focusable`);
             if (switchEditMode !== undefined) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "verstak",
-  "version": "0.24.274",
+  "version": "0.24.277",
   "description": "Verstak - Front-End Library",
   "publisher": "Nezaboodka Software",
   "license": "Apache-2.0",
@@ -31,7 +31,7 @@
   },
   "homepage": "https://github.com/nezaboodka/verstak/blob/master/README.md#readme",
   "dependencies": {
-    "reactronic": "^0.24.271"
+    "reactronic": "^0.24.273"
   },
   "devDependencies": {
     "@types/node": "20.11.17",