@ceriousdevtech/vue-cerious-scroll 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -5,6 +5,22 @@ All notable changes to vue-cerious-scroll will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.3] - 2026-06-03
+
+### Dependencies
+- Bumped peer dependency `@ceriousdevtech/cerious-scroll` to `^1.0.4`. Consumers get smooth wheel scrolling (eased over ~150ms, configurable via `wheel: { smooth }`) and the engine now reads viewport height from `[data-cerious-scroll-content]` so wrappers that put a horizontal scrollbar on the inner element get the last row clearance for free.
+
+### Changed
+- The inner content element is now styled `overflow-y: clip; overflow-x: auto` so consumers can opt into a horizontal scrollbar on the rows axis without a stray vertical bar appearing.
+
+## [1.0.2] - 2026-06-03
+
+### Added
+- `<CeriousScroll>` now renders its default slot inside the engine container, alongside the engine's scrollbar strip. Combined with a user-supplied `<div data-cerious-scroll-content />`, this lets apps wrap rows in custom DOM (e.g. an `overflow-x: auto` wrapper with a sticky header) without breaking the engine's mobile scrollbar pinning.
+
+### Dependencies
+- Bumped peer dependency `@ceriousdevtech/cerious-scroll` to `^1.0.3` to pick up horizontal flick momentum and the custom scrollbar thumb.
+
 ## [1.0.1] - 2026-06-01
 
 ### Changed

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),A=require("@ceriousdevtech/cerious-scroll"),V="data-cerious-scroll-content",N="data-cerious-scroll-row";function _(e){const u=e.querySelector(`[${V}]`);if(u)return u;const o=document.createElement("div");return o.setAttribute(V,""),o.style.position="relative",o.style.width="100%",o.style.height="100%",o.style.overflow="hidden",e.appendChild(o),o}function q(e,u){const o=l=>{const r=l.detail;r&&u({percentage:r.percentage,currentElement:r.currentElement,scrollOffset:r.scrollOffset,result:{element:r.result.element,offset:r.result.offset}})},f=l=>{const r=l.detail;r&&u({percentage:r.percentage,currentElement:r.element,scrollOffset:r.scrollOffset,result:{element:r.element,offset:r.scrollOffset}})};return e.addEventListener("cerious-viewport-change",o),e.addEventListener("viewport-change",f),()=>{e.removeEventListener("cerious-viewport-change",o),e.removeEventListener("viewport-change",f)}}function I(e,u){const o=typeof e=="number"?e:typeof u=="number"?u:void 0;if(o===void 0||Number.isNaN(o))throw new Error("useCeriousScroll: provide `totalElements` or `items`.");return Math.max(1,Math.floor(o))}function j(e){var O;const u=(O=n.getCurrentInstance())==null?void 0:O.appContext,o=n.ref(null),f=n.shallowRef(null);let l=null;const r=new Map;let s=null;const C=()=>n.toValue(e.autoRender)??!0,y=t=>{if(e.getItem)return e.getItem(t);const c=n.toValue(e.items);return c?c[t]:void 0},M=(t,c)=>{const i=u??null,m=n.effectScope(!0);return m.run(()=>n.watchEffect(()=>{const E=e.renderItem(y(t),t),d=Array.isArray(E)?E:[E];for(const w of d)n.isVNode(w)&&(w.appContext=i);const a=n.h(n.Fragment,d);a.appContext=i,n.render(a,c)},{flush:"sync"})),()=>m.stop()},b=t=>{t.stop(),n.render(null,t.mount),t.mount.remove()},v=()=>{var w;if(!l)return null;const{scroller:t,contentEl:c,container:i}=l,m=i.clientHeight||i.offsetHeight||0,E=(g,h)=>{const p=document.createElement("div");p.setAttribute(N,String(g)),h.appendChild(p);const S=M(g,p);r.set(g,{el:h,mount:p,stop:S})},d=t.renderViewport(m,c,E),a=new Set(t.getRenderedIndices());return r.forEach((g,h)=>{a.has(h)||(b(g),r.delete(h))}),(w=e.onMeasuredViewport)==null||w.call(e,d),d},R=t=>{if(!l)return;const c=l;l=null,c.unsubscribe(),t&&(s={currentElement:c.scroller.currentElement,scrollOffset:c.scroller.scrollOffset}),r.forEach(i=>b(i)),r.clear(),c.contentEl.textContent="",c.scroller.detachScrollbar(c.container),c.scroller.dispose(),f.value=null},T=t=>{var g,h;const c=_(t),i=e.options??{},m=i.onScroll,E={...i,onScroll:()=>{m==null||m(),C()&&v()}},d=I(n.toValue(e.totalElements),((g=n.toValue(e.items))==null?void 0:g.length)??null),a=new A.CeriousScroll(t,d,E);s&&(a.currentElement=Math.min(s.currentElement,d-1),a.scrollOffset=s.scrollOffset,s=null);const w=q(t,p=>{var S;(S=e.onViewportChange)==null||S.call(e,p)});l={scroller:a,contentEl:c,container:t,unsubscribe:w},f.value=a,(h=e.onReady)==null||h.call(e,a),C()&&requestAnimationFrame(()=>v())},P=()=>{R(!0);const t=o.value;t&&T(t)};return n.onMounted(()=>{const t=o.value;t&&T(t)}),n.onBeforeUnmount(()=>{R(!1)}),n.watch(()=>[n.toValue(e.totalElements),n.toValue(e.items)],()=>{var c;if(!l)return;const t=I(n.toValue(e.totalElements),((c=n.toValue(e.items))==null?void 0:c.length)??null);l.scroller.totalElements!==t&&P()}),{containerRef:o,scroller:f,render:v,jumpToElement:t=>l?(l.scroller.jumpToElement(t),v()):null,scrollToPercentage:t=>l?(l.scroller.handleScrollPercentage(t),v()):null,reset:()=>l?(l.scroller.reset(),v()):null,recalculate:()=>l?(l.scroller.clearAllCaches(),v()):null}}const F=n.defineComponent({name:"CeriousScroll",props:{totalElements:{type:Number,default:null},items:{type:Array,default:null},getItem:{type:Function,default:void 0},renderItem:{type:Function,default:void 0},options:{type:Object,default:void 0},autoRender:{type:Boolean,default:!0}},emits:{"viewport-change":e=>!0,"measured-viewport":e=>!0,ready:e=>!0},setup(e,{slots:u,emit:o,expose:f}){const l=(s,C)=>{var y;return e.renderItem?e.renderItem(s,C):(y=u.item)==null?void 0:y.call(u,{item:s,index:C})},r=j({totalElements:()=>e.totalElements,items:()=>e.items,getItem:e.getItem?s=>e.getItem(s):void 0,renderItem:l,options:e.options,autoRender:()=>e.autoRender,onViewportChange:s=>o("viewport-change",s),onMeasuredViewport:s=>o("measured-viewport",s),onReady:s=>o("ready",s)});return f({scroller:r.scroller,render:r.render,jumpToElement:r.jumpToElement,scrollToPercentage:r.scrollToPercentage,reset:r.reset,recalculate:r.recalculate}),()=>n.h("div",{ref:r.containerRef,style:{position:"relative",overflow:"hidden"}})}});Object.defineProperty(exports,"CeriousScrollEngine",{enumerable:!0,get:()=>A.CeriousScroll});exports.CeriousScroll=F;exports.useCeriousScroll=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),A=require("@ceriousdevtech/cerious-scroll"),V="data-cerious-scroll-content",N="data-cerious-scroll-row";function _(e){const s=e.querySelector(`[${V}]`);if(s)return s;const n=document.createElement("div");return n.setAttribute(V,""),n.style.position="relative",n.style.width="100%",n.style.height="100%",n.style.overflowY="clip",n.style.overflowX="auto",e.appendChild(n),n}function q(e,s){const n=l=>{const r=l.detail;r&&s({percentage:r.percentage,currentElement:r.currentElement,scrollOffset:r.scrollOffset,result:{element:r.result.element,offset:r.result.offset}})},f=l=>{const r=l.detail;r&&s({percentage:r.percentage,currentElement:r.element,scrollOffset:r.scrollOffset,result:{element:r.element,offset:r.scrollOffset}})};return e.addEventListener("cerious-viewport-change",n),e.addEventListener("viewport-change",f),()=>{e.removeEventListener("cerious-viewport-change",n),e.removeEventListener("viewport-change",f)}}function I(e,s){const n=typeof e=="number"?e:typeof s=="number"?s:void 0;if(n===void 0||Number.isNaN(n))throw new Error("useCeriousScroll: provide `totalElements` or `items`.");return Math.max(1,Math.floor(n))}function j(e){var O;const s=(O=o.getCurrentInstance())==null?void 0:O.appContext,n=o.ref(null),f=o.shallowRef(null);let l=null;const r=new Map;let c=null;const C=()=>o.toValue(e.autoRender)??!0,y=t=>{if(e.getItem)return e.getItem(t);const u=o.toValue(e.items);return u?u[t]:void 0},M=(t,u)=>{const i=s??null,m=o.effectScope(!0);return m.run(()=>o.watchEffect(()=>{const E=e.renderItem(y(t),t),d=Array.isArray(E)?E:[E];for(const w of d)o.isVNode(w)&&(w.appContext=i);const a=o.h(o.Fragment,d);a.appContext=i,o.render(a,u)},{flush:"sync"})),()=>m.stop()},b=t=>{t.stop(),o.render(null,t.mount),t.mount.remove()},h=()=>{var w;if(!l)return null;const{scroller:t,contentEl:u,container:i}=l,m=i.clientHeight||i.offsetHeight||0,E=(g,v)=>{const p=document.createElement("div");p.setAttribute(N,String(g)),v.appendChild(p);const S=M(g,p);r.set(g,{el:v,mount:p,stop:S})},d=t.renderViewport(m,u,E),a=new Set(t.getRenderedIndices());return r.forEach((g,v)=>{a.has(v)||(b(g),r.delete(v))}),(w=e.onMeasuredViewport)==null||w.call(e,d),d},R=t=>{if(!l)return;const u=l;l=null,u.unsubscribe(),t&&(c={currentElement:u.scroller.currentElement,scrollOffset:u.scroller.scrollOffset}),r.forEach(i=>b(i)),r.clear(),u.contentEl.textContent="",u.scroller.detachScrollbar(u.container),u.scroller.dispose(),f.value=null},T=t=>{var g,v;const u=_(t),i=e.options??{},m=i.onScroll,E={...i,onScroll:()=>{m==null||m(),C()&&h()}},d=I(o.toValue(e.totalElements),((g=o.toValue(e.items))==null?void 0:g.length)??null),a=new A.CeriousScroll(t,d,E);c&&(a.currentElement=Math.min(c.currentElement,d-1),a.scrollOffset=c.scrollOffset,c=null);const w=q(t,p=>{var S;(S=e.onViewportChange)==null||S.call(e,p)});l={scroller:a,contentEl:u,container:t,unsubscribe:w},f.value=a,(v=e.onReady)==null||v.call(e,a),C()&&requestAnimationFrame(()=>h())},P=()=>{R(!0);const t=n.value;t&&T(t)};return o.onMounted(()=>{const t=n.value;t&&T(t)}),o.onBeforeUnmount(()=>{R(!1)}),o.watch(()=>[o.toValue(e.totalElements),o.toValue(e.items)],()=>{var u;if(!l)return;const t=I(o.toValue(e.totalElements),((u=o.toValue(e.items))==null?void 0:u.length)??null);l.scroller.totalElements!==t&&P()}),{containerRef:n,scroller:f,render:h,jumpToElement:t=>l?(l.scroller.jumpToElement(t),h()):null,scrollToPercentage:t=>l?(l.scroller.handleScrollPercentage(t),h()):null,reset:()=>l?(l.scroller.reset(),h()):null,recalculate:()=>l?(l.scroller.clearAllCaches(),h()):null}}const F=o.defineComponent({name:"CeriousScroll",props:{totalElements:{type:Number,default:null},items:{type:Array,default:null},getItem:{type:Function,default:void 0},renderItem:{type:Function,default:void 0},options:{type:Object,default:void 0},autoRender:{type:Boolean,default:!0}},emits:{"viewport-change":e=>!0,"measured-viewport":e=>!0,ready:e=>!0},setup(e,{slots:s,emit:n,expose:f}){const l=(c,C)=>{var y;return e.renderItem?e.renderItem(c,C):(y=s.item)==null?void 0:y.call(s,{item:c,index:C})},r=j({totalElements:()=>e.totalElements,items:()=>e.items,getItem:e.getItem?c=>e.getItem(c):void 0,renderItem:l,options:e.options,autoRender:()=>e.autoRender,onViewportChange:c=>n("viewport-change",c),onMeasuredViewport:c=>n("measured-viewport",c),onReady:c=>n("ready",c)});return f({scroller:r.scroller,render:r.render,jumpToElement:r.jumpToElement,scrollToPercentage:r.scrollToPercentage,reset:r.reset,recalculate:r.recalculate}),()=>{var c;return o.h("div",{ref:r.containerRef,style:{position:"relative",overflow:"hidden"}},(c=s.default)==null?void 0:c.call(s))}}});Object.defineProperty(exports,"CeriousScrollEngine",{enumerable:!0,get:()=>A.CeriousScroll});exports.CeriousScroll=F;exports.useCeriousScroll=j;

package/dist/index.js

@@ -1,14 +1,14 @@
-import { getCurrentInstance as P, ref as _, shallowRef as x, onMounted as F, onBeforeUnmount as L, watch as $, toValue as h, render as O, effectScope as q, watchEffect as B, isVNode as H, h as M, Fragment as U, defineComponent as W } from "vue";
-import { CeriousScroll as z } from "@ceriousdevtech/cerious-scroll";
+import { getCurrentInstance as P, ref as _, shallowRef as x, onMounted as F, onBeforeUnmount as L, watch as $, toValue as v, render as O, effectScope as q, watchEffect as B, isVNode as H, h as M, Fragment as U, defineComponent as W } from "vue";
+import { CeriousScroll as X } from "@ceriousdevtech/cerious-scroll";
 import { CeriousScroll as oe } from "@ceriousdevtech/cerious-scroll";
-const A = "data-cerious-scroll-content", D = "data-cerious-scroll-row";
-function G(e) {
+const A = "data-cerious-scroll-content", Y = "data-cerious-scroll-row";
+function z(e) {
   const s = e.querySelector(`[${A}]`);
   if (s) return s;
   const n = document.createElement("div");
-  return n.setAttribute(A, ""), n.style.position = "relative", n.style.width = "100%", n.style.height = "100%", n.style.overflow = "hidden", e.appendChild(n), n;
+  return n.setAttribute(A, ""), n.style.position = "relative", n.style.width = "100%", n.style.height = "100%", n.style.overflowY = "clip", n.style.overflowX = "auto", e.appendChild(n), n;
 }
-function J(e, s) {
+function D(e, s) {
   const n = (o) => {
     const r = o.detail;
     r && s({
@@ -36,17 +36,17 @@ function V(e, s) {
     throw new Error("useCeriousScroll: provide `totalElements` or `items`.");
   return Math.max(1, Math.floor(n));
 }
-function K(e) {
+function G(e) {
   var I;
   const s = (I = P()) == null ? void 0 : I.appContext, n = _(null), a = x(null);
   let o = null;
   const r = /* @__PURE__ */ new Map();
-  let c = null;
-  const C = () => h(e.autoRender) ?? !0, y = (t) => {
+  let l = null;
+  const C = () => v(e.autoRender) ?? !0, y = (t) => {
     if (e.getItem) return e.getItem(t);
-    const l = h(e.items);
-    return l ? l[t] : void 0;
-  }, N = (t, l) => {
+    const c = v(e.items);
+    return c ? c[t] : void 0;
+  }, N = (t, c) => {
     const u = s ?? null, f = q(!0);
     return f.run(
       () => B(
@@ -55,46 +55,46 @@ function K(e) {
           for (const w of m)
             H(w) && (w.appContext = u);
           const i = M(U, m);
-          i.appContext = u, O(i, l);
+          i.appContext = u, O(i, c);
         },
         { flush: "sync" }
       )
     ), () => f.stop();
   }, S = (t) => {
     t.stop(), O(null, t.mount), t.mount.remove();
-  }, v = () => {
+  }, h = () => {
     var w;
     if (!o) return null;
-    const { scroller: t, contentEl: l, container: u } = o, f = u.clientHeight || u.offsetHeight || 0, E = (d, g) => {
+    const { scroller: t, contentEl: c, container: u } = o, f = u.clientHeight || u.offsetHeight || 0, E = (d, g) => {
       const p = document.createElement("div");
-      p.setAttribute(D, String(d)), g.appendChild(p);
+      p.setAttribute(Y, String(d)), g.appendChild(p);
       const R = N(d, p);
       r.set(d, { el: g, mount: p, stop: R });
-    }, m = t.renderViewport(f, l, E), i = new Set(t.getRenderedIndices());
+    }, m = t.renderViewport(f, c, E), i = new Set(t.getRenderedIndices());
     return r.forEach((d, g) => {
       i.has(g) || (S(d), r.delete(g));
     }), (w = e.onMeasuredViewport) == null || w.call(e, m), m;
   }, T = (t) => {
     if (!o) return;
-    const l = o;
-    o = null, l.unsubscribe(), t && (c = {
-      currentElement: l.scroller.currentElement,
-      scrollOffset: l.scroller.scrollOffset
-    }), r.forEach((u) => S(u)), r.clear(), l.contentEl.textContent = "", l.scroller.detachScrollbar(l.container), l.scroller.dispose(), a.value = null;
+    const c = o;
+    o = null, c.unsubscribe(), t && (l = {
+      currentElement: c.scroller.currentElement,
+      scrollOffset: c.scroller.scrollOffset
+    }), r.forEach((u) => S(u)), r.clear(), c.contentEl.textContent = "", c.scroller.detachScrollbar(c.container), c.scroller.dispose(), a.value = null;
   }, b = (t) => {
     var d, g;
-    const l = G(t), u = e.options ?? {}, f = u.onScroll, E = {
+    const c = z(t), u = e.options ?? {}, f = u.onScroll, E = {
       ...u,
       onScroll: () => {
-        f == null || f(), C() && v();
+        f == null || f(), C() && h();
       }
-    }, m = V(h(e.totalElements), ((d = h(e.items)) == null ? void 0 : d.length) ?? null), i = new z(t, m, E);
-    c && (i.currentElement = Math.min(c.currentElement, m - 1), i.scrollOffset = c.scrollOffset, c = null);
-    const w = J(t, (p) => {
+    }, m = V(v(e.totalElements), ((d = v(e.items)) == null ? void 0 : d.length) ?? null), i = new X(t, m, E);
+    l && (i.currentElement = Math.min(l.currentElement, m - 1), i.scrollOffset = l.scrollOffset, l = null);
+    const w = D(t, (p) => {
       var R;
       (R = e.onViewportChange) == null || R.call(e, p);
     });
-    o = { scroller: i, contentEl: l, container: t, unsubscribe: w }, a.value = i, (g = e.onReady) == null || g.call(e, i), C() && requestAnimationFrame(() => v());
+    o = { scroller: i, contentEl: c, container: t, unsubscribe: w }, a.value = i, (g = e.onReady) == null || g.call(e, i), C() && requestAnimationFrame(() => h());
   }, j = () => {
     T(!0);
     const t = n.value;
@@ -106,21 +106,21 @@ function K(e) {
   }), L(() => {
     T(!1);
   }), $(
-    () => [h(e.totalElements), h(e.items)],
+    () => [v(e.totalElements), v(e.items)],
     () => {
-      var l;
+      var c;
       if (!o) return;
-      const t = V(h(e.totalElements), ((l = h(e.items)) == null ? void 0 : l.length) ?? null);
+      const t = V(v(e.totalElements), ((c = v(e.items)) == null ? void 0 : c.length) ?? null);
       o.scroller.totalElements !== t && j();
     }
   ), {
     containerRef: n,
     scroller: a,
-    render: v,
-    jumpToElement: (t) => o ? (o.scroller.jumpToElement(t), v()) : null,
-    scrollToPercentage: (t) => o ? (o.scroller.handleScrollPercentage(t), v()) : null,
-    reset: () => o ? (o.scroller.reset(), v()) : null,
-    recalculate: () => o ? (o.scroller.clearAllCaches(), v()) : null
+    render: h,
+    jumpToElement: (t) => o ? (o.scroller.jumpToElement(t), h()) : null,
+    scrollToPercentage: (t) => o ? (o.scroller.handleScrollPercentage(t), h()) : null,
+    reset: () => o ? (o.scroller.reset(), h()) : null,
+    recalculate: () => o ? (o.scroller.clearAllCaches(), h()) : null
   };
 }
 const te = W({
@@ -151,21 +151,21 @@ const te = W({
     ready: (e) => !0
   },
   setup(e, { slots: s, emit: n, expose: a }) {
-    const o = (c, C) => {
+    const o = (l, C) => {
       var y;
-      return e.renderItem ? e.renderItem(c, C) : (y = s.item) == null ? void 0 : y.call(s, { item: c, index: C });
-    }, r = K({
+      return e.renderItem ? e.renderItem(l, C) : (y = s.item) == null ? void 0 : y.call(s, { item: l, index: C });
+    }, r = G({
       totalElements: () => e.totalElements,
       items: () => e.items,
-      getItem: e.getItem ? (c) => e.getItem(c) : void 0,
+      getItem: e.getItem ? (l) => e.getItem(l) : void 0,
       renderItem: o,
       // Engine options are consumed at creation; reading the prop once matches
       // that contract (remount via `:key` to apply new engine options).
       options: e.options,
       autoRender: () => e.autoRender,
-      onViewportChange: (c) => n("viewport-change", c),
-      onMeasuredViewport: (c) => n("measured-viewport", c),
-      onReady: (c) => n("ready", c)
+      onViewportChange: (l) => n("viewport-change", l),
+      onMeasuredViewport: (l) => n("measured-viewport", l),
+      onReady: (l) => n("ready", l)
     });
     return a({
       /** The underlying engine instance (`null` before mount). */
@@ -175,15 +175,22 @@ const te = W({
       scrollToPercentage: r.scrollToPercentage,
       reset: r.reset,
       recalculate: r.recalculate
-    }), () => M("div", {
-      ref: r.containerRef,
-      // User-supplied class/style/attrs fall through and merge onto this root.
-      style: { position: "relative", overflow: "hidden" }
-    });
+    }), () => {
+      var l;
+      return M(
+        "div",
+        {
+          ref: r.containerRef,
+          // User-supplied class/style/attrs fall through and merge onto this root.
+          style: { position: "relative", overflow: "hidden" }
+        },
+        (l = s.default) == null ? void 0 : l.call(s)
+      );
+    };
   }
 });
 export {
   te as CeriousScroll,
   oe as CeriousScrollEngine,
-  K as useCeriousScroll
+  G as useCeriousScroll
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceriousdevtech/vue-cerious-scroll",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Vue 3 bindings for CeriousScroll — high-performance virtual scrolling with O(1) memory and no height estimation",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -56,12 +56,14 @@
     "demo": "vite --config demo/vite.config.ts",
     "demo:build": "vite build --config demo/vite.config.ts"
   },
+  "dependencies": {
+    "@ceriousdevtech/cerious-scroll": "^1.0.4"
+  },
   "peerDependencies": {
-    "@ceriousdevtech/cerious-scroll": "^1.0.1",
     "vue": "^3.3.0"
   },
   "devDependencies": {
-    "@ceriousdevtech/cerious-scroll": "^1.0.1",
+    "@tanstack/vue-virtual": "^3.10.8",
     "@types/node": "^22.10.2",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/test-utils": "^2.4.6",