@vortexm/vjt 0.1.17 → 0.1.18

package/dist/index.js

@@ -7910,6 +7910,7 @@ function samePath(left, right) {
 // src/lib/render.ts
 var DEFAULT_DATE_FORMAT = "dd.MM.yyyy";
 var MOBILE_RATIO_THRESHOLD = 1.15;
+var SCROLL_END_DEBOUNCE_MS = 140;
 var globalErrorLoggingAttached = false;
 function escapeHtml(value) {
   return String(value).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
@@ -8088,6 +8089,7 @@ var RuntimeRenderer = class {
   activeScrollAnimationFrameId = null;
   pendingCursorReference = null;
   pendingCursorFrameId = null;
+  scrollEndTimeoutIds = /* @__PURE__ */ new Map();
   constructor(description, options = {}) {
     this.description = deepClone(description);
     this.resourceManager = options.resourceManager ?? null;
@@ -8327,6 +8329,10 @@ var RuntimeRenderer = class {
         window.clearTimeout(timeoutId);
       }
       this.toastTimeoutIds.clear();
+      for (const timeoutId of this.scrollEndTimeoutIds.values()) {
+        window.clearTimeout(timeoutId);
+      }
+      this.scrollEndTimeoutIds.clear();
       this.voiceRuntime.dispose();
     };
   }
@@ -9516,6 +9522,7 @@ var RuntimeRenderer = class {
       }
       element.addEventListener("scroll", () => {
         this.syncScrollStateForElement(element, key);
+        this.scheduleScrollEndEvent(element, node, key);
       }, { passive: true });
     }
   }
@@ -9837,6 +9844,7 @@ var RuntimeRenderer = class {
     if (typeof window === "undefined") {
       initialElement.scrollTop = Math.max(0, Math.min(targetTop, getMaxScrollTop(initialElement)));
       this.syncScrollStateForReference(reference, initialElement);
+      this.scheduleProgrammaticScrollEndForReference(reference);
       return;
     }
     if (this.activeScrollAnimationFrameId !== null) {
@@ -9849,6 +9857,7 @@ var RuntimeRenderer = class {
     if (Math.abs(delta) < 1) {
       initialElement.scrollTop = clampedTargetTop;
       this.syncScrollStateForReference(reference, initialElement);
+      this.scheduleProgrammaticScrollEndForReference(reference);
       return;
     }
     const durationMs = 300;
@@ -9870,6 +9879,7 @@ var RuntimeRenderer = class {
       } else {
         liveElement.scrollTop = liveTargetTop;
         this.syncScrollStateForReference(reference, liveElement);
+        this.scheduleProgrammaticScrollEndForReference(reference);
         this.activeScrollAnimationFrameId = null;
       }
     };
@@ -9965,6 +9975,41 @@ var RuntimeRenderer = class {
     state.isScrolledToTop = element.scrollTop <= 1;
     state.isScrolledToBottom = element.scrollTop >= maxScrollTop - 1;
   }
+  scheduleScrollEndEvent(element, node, key) {
+    if (!node.events?.onScroll?.length || typeof window === "undefined") {
+      return;
+    }
+    const existingTimeoutId = this.scrollEndTimeoutIds.get(key);
+    if (existingTimeoutId !== void 0) {
+      window.clearTimeout(existingTimeoutId);
+    }
+    const timeoutId = window.setTimeout(() => {
+      this.scrollEndTimeoutIds.delete(key);
+      void this.actionRuntime.dispatchWidgetEvent(
+        node,
+        "onScroll",
+        key,
+        getActionInputValueForElement(element, node, this.stateByKey),
+        null
+      );
+    }, SCROLL_END_DEBOUNCE_MS);
+    this.scrollEndTimeoutIds.set(key, timeoutId);
+  }
+  scheduleProgrammaticScrollEndForReference(reference) {
+    const element = this.findScrollableWidgetElement(reference);
+    if (!(element instanceof HTMLElement)) {
+      return;
+    }
+    const key = element.dataset.widgetKey ?? reference.split(".")[0]?.trim() ?? "";
+    if (!key) {
+      return;
+    }
+    const node = this.nodeByKey.get(key) ?? this.nodeById.get(key);
+    if (!node || !isScrollableWidgetNode(node)) {
+      return;
+    }
+    this.scheduleScrollEndEvent(element, node, key);
+  }
   toScrollableIndex(value) {
     if (typeof value === "number" && Number.isFinite(value)) {
       return Math.max(0, Math.trunc(value));

package/dist/lib/types.d.ts

@@ -3,7 +3,7 @@ export type LayoutType = 'vertical' | 'horizontal' | 'grid';
 export type TextAlign = 'left' | 'center' | 'right';
 export type VerticalAlign = 'top' | 'center' | 'bottom';
 export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export type WidgetEventName = 'onClick' | 'onUserValueChange' | 'onRefresh' | 'onEnter' | 'onShiftEnter' | 'onControlEnter' | 'onPaste';
+export type WidgetEventName = 'onClick' | 'onUserValueChange' | 'onRefresh' | 'onEnter' | 'onShiftEnter' | 'onControlEnter' | 'onPaste' | 'onScroll';
 export type SystemEventName = 'onBeforeRender' | 'onAfterRender' | 'onBeforeNavigate' | 'onAfterNavigate' | 'onLayoutSwitchToMobile' | 'onLayoutSwitchToDesktop' | 'onSpeechDetected' | 'onRecordingStarted' | 'onRecordingStopped' | 'onRecordingError' | 'onListeningError' | 'onListeringError' | 'onPlayFinished' | 'onPlayingStopped';
 export type PrimitiveRequestType = 'int' | 'float' | 'boolean' | 'string';
 export type ClosableRuntimeResource = {

package/dist/lib/widgets/bindings.d.ts

@@ -12,7 +12,7 @@ type BindingEnvironment = {
     }) => void;
     updatePointerFromEvent: (event: MouseEvent) => void;
     updateOwningListElementDescriptor: (element: HTMLElement, mutate: (descriptor: DescriptionNode) => void) => void;
-    dispatchWidgetEvent: (node: DescriptionNode, eventName: 'onClick' | 'onUserValueChange' | 'onEnter' | 'onShiftEnter' | 'onControlEnter' | 'onPaste', key: string, inputValue?: unknown, pointer?: {
+    dispatchWidgetEvent: (node: DescriptionNode, eventName: 'onClick' | 'onUserValueChange' | 'onEnter' | 'onShiftEnter' | 'onControlEnter' | 'onPaste' | 'onScroll', key: string, inputValue?: unknown, pointer?: {
         x: number;
         y: number;
     } | null) => Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vortexm/vjt",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",