@ceriousdevtech/vue-cerious-scroll 1.0.2 → 1.0.3

package/CHANGELOG.md

@@ -5,6 +5,14 @@ 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

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 s=e.querySelector(`[${V}]`);if(s)return s;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,s){const o=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",o),e.addEventListener("viewport-change",f),()=>{e.removeEventListener("cerious-viewport-change",o),e.removeEventListener("viewport-change",f)}}function I(e,s){const o=typeof e=="number"?e:typeof s=="number"?s: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 s=(O=n.getCurrentInstance())==null?void 0:O.appContext,o=n.ref(null),f=n.shallowRef(null);let l=null;const r=new Map;let c=null;const C=()=>n.toValue(e.autoRender)??!0,y=t=>{if(e.getItem)return e.getItem(t);const u=n.toValue(e.items);return u?u[t]:void 0},M=(t,u)=>{const i=s??null,d=n.effectScope(!0);return d.run(()=>n.watchEffect(()=>{const E=e.renderItem(y(t),t),m=Array.isArray(E)?E:[E];for(const w of m)n.isVNode(w)&&(w.appContext=i);const a=n.h(n.Fragment,m);a.appContext=i,n.render(a,u)},{flush:"sync"})),()=>d.stop()},b=t=>{t.stop(),n.render(null,t.mount),t.mount.remove()},v=()=>{var w;if(!l)return null;const{scroller:t,contentEl:u,container:i}=l,d=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})},m=t.renderViewport(d,u,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,m),m},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,h;const u=_(t),i=e.options??{},d=i.onScroll,E={...i,onScroll:()=>{d==null||d(),C()&&v()}},m=I(n.toValue(e.totalElements),((g=n.toValue(e.items))==null?void 0:g.length)??null),a=new A.CeriousScroll(t,m,E);c&&(a.currentElement=Math.min(c.currentElement,m-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,(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 u;if(!l)return;const t=I(n.toValue(e.totalElements),((u=n.toValue(e.items))==null?void 0:u.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:s,emit:o,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=>o("viewport-change",c),onMeasuredViewport:c=>o("measured-viewport",c),onReady:c=>o("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 n.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;
+"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,15 +36,15 @@ 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 l = null;
-  const C = () => h(e.autoRender) ?? !0, y = (t) => {
+  const C = () => v(e.autoRender) ?? !0, y = (t) => {
     if (e.getItem) return e.getItem(t);
-    const c = h(e.items);
+    const c = v(e.items);
     return c ? c[t] : void 0;
   }, N = (t, c) => {
     const u = s ?? null, f = q(!0);
@@ -62,12 +62,12 @@ function K(e) {
     ), () => 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: 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, c, E), i = new Set(t.getRenderedIndices());
@@ -83,18 +83,18 @@ function K(e) {
     }), 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 c = 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);
+    }, 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 = J(t, (p) => {
+    const w = D(t, (p) => {
       var R;
       (R = e.onViewportChange) == null || R.call(e, p);
     });
-    o = { scroller: i, contentEl: c, 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 c;
       if (!o) return;
-      const t = V(h(e.totalElements), ((c = h(e.items)) == null ? void 0 : c.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({
@@ -154,7 +154,7 @@ const te = W({
     const o = (l, C) => {
       var y;
       return e.renderItem ? e.renderItem(l, C) : (y = s.item) == null ? void 0 : y.call(s, { item: l, index: C });
-    }, r = K({
+    }, r = G({
       totalElements: () => e.totalElements,
       items: () => e.items,
       getItem: e.getItem ? (l) => e.getItem(l) : void 0,
@@ -192,5 +192,5 @@ const te = W({
 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.2",
+  "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.3",
     "vue": "^3.3.0"
   },
   "devDependencies": {
-    "@ceriousdevtech/cerious-scroll": "^1.0.3",
+    "@tanstack/vue-virtual": "^3.10.8",
     "@types/node": "^22.10.2",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/test-utils": "^2.4.6",