vft 0.0.373 → 0.0.375

package/lib/components/virtual-list/components/fixed-size-list.cjs

@@ -1,6 +1,99 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("@vueuse/core");const E=require("@vft/utils"),N=require("../../../utils/error.cjs");require("../../config-provider/hooks/use-global-config.cjs");require("vue");require("lodash-es");const T=require("../builders/build-list.cjs"),f=require("../utils.cjs"),u=require("../defaults.cjs"),m=T.default({name:"ElFixedSizeList",getItemOffset:({itemSize:e},t)=>t*e,getItemSize:({itemSize:e})=>e,getEstimatedTotalSize:({total:e,itemSize:t})=>t*e,getOffset:({height:e,total:t,itemSize:i,layout:h,width:M},n,a,s)=>{const r=f.isHorizontal(h)?M:e;process.env.NODE_ENV!=="production"&&E.isString(r)&&N.throwError("[ElVirtualList]",`
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+require("@vueuse/core");
+const utils = require("@vft/utils");
+const error = require("../../../utils/error.cjs");
+require("../../config-provider/hooks/use-global-config.cjs");
+require("vue");
+require("lodash-es");
+const buildList = require("../builders/build-list.cjs");
+const utils$1 = require("../utils.cjs");
+const defaults = require("../defaults.cjs");
+const FixedSizeList = buildList.default({
+  name: "ElFixedSizeList",
+  getItemOffset: ({ itemSize }, index) => index * itemSize,
+  getItemSize: ({ itemSize }) => itemSize,
+  getEstimatedTotalSize: ({ total, itemSize }) => itemSize * total,
+  getOffset: ({ height, total, itemSize, layout, width }, index, alignment, scrollOffset) => {
+    const size = utils$1.isHorizontal(layout) ? width : height;
+    if (process.env.NODE_ENV !== "production" && utils.isString(size)) {
+      error.throwError(
+        "[ElVirtualList]",
+        `
         You should set
           width/height
         to number when your layout is
           horizontal/vertical
-      `);const c=Math.max(0,t*i-r),l=Math.min(c,n*i),o=Math.max(0,(n+1)*i-r);switch(a===u.SMART_ALIGNMENT&&(s>=o-r&&s<=l+r?a=u.AUTO_ALIGNMENT:a=u.CENTERED_ALIGNMENT),a){case u.START_ALIGNMENT:return l;case u.END_ALIGNMENT:return o;case u.CENTERED_ALIGNMENT:{const d=Math.round(o+(l-o)/2);return d<Math.ceil(r/2)?0:d>c+Math.floor(r/2)?c:d}case u.AUTO_ALIGNMENT:default:return s>=o&&s<=l?s:s<o?o:l}},getStartIndexForOffset:({total:e,itemSize:t},i)=>Math.max(0,Math.min(e-1,Math.floor(i/t))),getStopIndexForStartIndex:({height:e,total:t,itemSize:i,layout:h,width:M},n,a)=>{const s=n*i,r=f.isHorizontal(h)?M:e,c=Math.ceil((r+a-s)/i);return Math.max(0,Math.min(t-1,n+c-1))},initCache(){},clearCache:!0,validateProps(){}});exports.default=m;
+      `
+      );
+    }
+    const lastItemOffset = Math.max(0, total * itemSize - size);
+    const maxOffset = Math.min(lastItemOffset, index * itemSize);
+    const minOffset = Math.max(0, (index + 1) * itemSize - size);
+    if (alignment === defaults.SMART_ALIGNMENT) {
+      if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
+        alignment = defaults.AUTO_ALIGNMENT;
+      } else {
+        alignment = defaults.CENTERED_ALIGNMENT;
+      }
+    }
+    switch (alignment) {
+      case defaults.START_ALIGNMENT: {
+        return maxOffset;
+      }
+      case defaults.END_ALIGNMENT: {
+        return minOffset;
+      }
+      case defaults.CENTERED_ALIGNMENT: {
+        const middleOffset = Math.round(
+          minOffset + (maxOffset - minOffset) / 2
+        );
+        if (middleOffset < Math.ceil(size / 2)) {
+          return 0;
+        } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
+          return lastItemOffset;
+        } else {
+          return middleOffset;
+        }
+      }
+      case defaults.AUTO_ALIGNMENT:
+      default: {
+        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+          return scrollOffset;
+        } else if (scrollOffset < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+      }
+    }
+  },
+  getStartIndexForOffset: ({ total, itemSize }, offset) => Math.max(0, Math.min(total - 1, Math.floor(offset / itemSize))),
+  getStopIndexForStartIndex: ({ height, total, itemSize, layout, width }, startIndex, scrollOffset) => {
+    const offset = startIndex * itemSize;
+    const size = utils$1.isHorizontal(layout) ? width : height;
+    const numVisibleItems = Math.ceil(
+      (size + scrollOffset - offset) / itemSize
+    );
+    return Math.max(
+      0,
+      Math.min(
+        total - 1,
+        // because startIndex is inclusive, so in order to prevent array outbound indexing
+        // we need to - 1 to prevent outbound behavior
+        startIndex + numVisibleItems - 1
+      )
+    );
+  },
+  /**
+   * Fixed size list does not need this cache
+   * Using any to bypass it, TODO: Using type inference to fix this.
+   */
+  initCache() {
+    return void 0;
+  },
+  clearCache: true,
+  validateProps() {
+  }
+});
+exports.default = FixedSizeList;

package/lib/components/virtual-list/components/scrollbar.cjs

@@ -1 +1,180 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue");require("../../scrollbar/index.cjs");require("@vueuse/core");require("@vft/utils");require("../../config-provider/hooks/use-global-config.cjs");require("lodash-es");const q=require("../../../utils/vue/raf.cjs"),x=require("../../../hooks/use-namespace/index.cjs");require("../../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../../hooks/use-z-index/index.cjs");const f=require("../defaults.cjs"),N=require("../props.cjs"),O=require("../utils.cjs"),P=require("../../scrollbar/util.cjs"),z=t.defineComponent({name:"ElVirtualScrollBar",props:N.virtualizedScrollbarProps,emits:["scroll","start-move","stop-move"],setup(r,{emit:i}){const S=t.computed(()=>r.startGap+r.endGap),L=x.useNamespace("virtual-scrollbar"),p=x.useNamespace("scrollbar"),h=t.ref(),a=t.ref();let M=null,g=null;const o=t.reactive({isDragging:!1,traveled:0}),n=t.computed(()=>P.BAR_MAP[r.layout]),l=t.computed(()=>r.clientSize-t.unref(S)),R=t.computed(()=>({position:"absolute",width:`${f.HORIZONTAL===r.layout?l.value:r.scrollbarSize}px`,height:`${f.HORIZONTAL===r.layout?r.scrollbarSize:l.value}px`,[f.ScrollbarDirKey[r.layout]]:"2px",right:"2px",bottom:"2px",borderRadius:"4px"})),b=t.computed(()=>{const e=r.ratio;if(e>=100)return Number.POSITIVE_INFINITY;if(e>=50)return e*l.value/100;const u=l.value/3;return Math.floor(Math.min(Math.max(e*l.value,f.SCROLLBAR_MIN_SIZE),u))}),I=t.computed(()=>{if(!Number.isFinite(b.value))return{display:"none"};const e=`${b.value}px`;return O.renderThumbStyle({bar:n.value,size:e,move:o.traveled},r.layout)}),s=t.computed(()=>Math.ceil(r.clientSize-b.value-t.unref(S))),T=()=>{window.addEventListener("mousemove",v),window.addEventListener("mouseup",c);const e=t.unref(a);e&&(g=document.onselectstart,document.onselectstart=()=>!1,e.addEventListener("touchmove",v,{passive:!0}),e.addEventListener("touchend",c))},y=()=>{window.removeEventListener("mousemove",v),window.removeEventListener("mouseup",c),document.onselectstart=g,g=null;const e=t.unref(a);e&&(e.removeEventListener("touchmove",v),e.removeEventListener("touchend",c))},w=e=>{e.stopImmediatePropagation(),!(e.ctrlKey||[1,2].includes(e.button))&&(o.isDragging=!0,o[n.value.axis]=e.currentTarget[n.value.offset]-(e[n.value.client]-e.currentTarget.getBoundingClientRect()[n.value.direction]),i("start-move"),T())},c=()=>{o.isDragging=!1,o[n.value.axis]=0,i("stop-move"),y()},v=e=>{const{isDragging:u}=o;if(!u||!a.value||!h.value)return;const d=o[n.value.axis];if(!d)return;q.cAF(M);const m=(h.value.getBoundingClientRect()[n.value.direction]-e[n.value.client])*-1,B=a.value[n.value.offset]-d,E=m-B;M=q.rAF(()=>{o.traveled=Math.max(0,Math.min(E,s.value)),i("scroll",E,s.value)})},A=e=>{const u=Math.abs(e.target.getBoundingClientRect()[n.value.direction]-e[n.value.client]),d=a.value[n.value.offset]/2,m=u-d;o.traveled=Math.max(0,Math.min(m,s.value)),i("scroll",m,s.value)};return t.watch(()=>r.scrollFrom,e=>{o.isDragging||(o.traveled=Math.ceil(e*s.value))}),t.onBeforeUnmount(()=>{y()}),()=>t.h("div",{role:"presentation",ref:h,class:[L.b(),r.class,(r.alwaysOn||o.isDragging)&&"always-on"],style:R.value,onMousedown:t.withModifiers(A,["stop","prevent"]),onTouchstartPrevent:w},t.h("div",{ref:a,class:p.e("thumb"),style:I.value,onMousedown:w},[]))}});exports.default=z;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+require("../../scrollbar/index.cjs");
+require("@vueuse/core");
+require("@vft/utils");
+require("../../config-provider/hooks/use-global-config.cjs");
+require("lodash-es");
+const raf = require("../../../utils/vue/raf.cjs");
+const index = require("../../../hooks/use-namespace/index.cjs");
+require("../../../hooks/use-model-toggle/index.cjs");
+require("@popperjs/core");
+require("../../../hooks/use-z-index/index.cjs");
+const defaults = require("../defaults.cjs");
+const props = require("../props.cjs");
+const utils = require("../utils.cjs");
+const util = require("../../scrollbar/util.cjs");
+const ScrollBar = vue.defineComponent({
+  name: "ElVirtualScrollBar",
+  props: props.virtualizedScrollbarProps,
+  emits: ["scroll", "start-move", "stop-move"],
+  setup(props2, { emit }) {
+    const GAP = vue.computed(() => props2.startGap + props2.endGap);
+    const nsVirtualScrollbar = index.useNamespace("virtual-scrollbar");
+    const nsScrollbar = index.useNamespace("scrollbar");
+    const trackRef = vue.ref();
+    const thumbRef = vue.ref();
+    let frameHandle = null;
+    let onselectstartStore = null;
+    const state = vue.reactive({
+      isDragging: false,
+      traveled: 0
+    });
+    const bar = vue.computed(() => util.BAR_MAP[props2.layout]);
+    const trackSize = vue.computed(() => props2.clientSize - vue.unref(GAP));
+    const trackStyle = vue.computed(() => ({
+      position: "absolute",
+      width: `${defaults.HORIZONTAL === props2.layout ? trackSize.value : props2.scrollbarSize}px`,
+      height: `${defaults.HORIZONTAL === props2.layout ? props2.scrollbarSize : trackSize.value}px`,
+      [defaults.ScrollbarDirKey[props2.layout]]: "2px",
+      right: "2px",
+      bottom: "2px",
+      borderRadius: "4px"
+    }));
+    const thumbSize = vue.computed(() => {
+      const ratio = props2.ratio;
+      if (ratio >= 100) {
+        return Number.POSITIVE_INFINITY;
+      }
+      if (ratio >= 50) {
+        return ratio * trackSize.value / 100;
+      }
+      const SCROLLBAR_MAX_SIZE = trackSize.value / 3;
+      return Math.floor(
+        Math.min(
+          Math.max(ratio * trackSize.value, defaults.SCROLLBAR_MIN_SIZE),
+          SCROLLBAR_MAX_SIZE
+        )
+      );
+    });
+    const thumbStyle = vue.computed(() => {
+      if (!Number.isFinite(thumbSize.value)) {
+        return {
+          display: "none"
+        };
+      }
+      const thumb = `${thumbSize.value}px`;
+      const style = utils.renderThumbStyle(
+        {
+          bar: bar.value,
+          size: thumb,
+          move: state.traveled
+        },
+        props2.layout
+      );
+      return style;
+    });
+    const totalSteps = vue.computed(
+      () => Math.ceil(props2.clientSize - thumbSize.value - vue.unref(GAP))
+    );
+    const attachEvents = () => {
+      window.addEventListener("mousemove", onMouseMove);
+      window.addEventListener("mouseup", onMouseUp);
+      const thumbEl = vue.unref(thumbRef);
+      if (!thumbEl) return;
+      onselectstartStore = document.onselectstart;
+      document.onselectstart = () => false;
+      thumbEl.addEventListener("touchmove", onMouseMove, { passive: true });
+      thumbEl.addEventListener("touchend", onMouseUp);
+    };
+    const detachEvents = () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+      document.onselectstart = onselectstartStore;
+      onselectstartStore = null;
+      const thumbEl = vue.unref(thumbRef);
+      if (!thumbEl) return;
+      thumbEl.removeEventListener("touchmove", onMouseMove);
+      thumbEl.removeEventListener("touchend", onMouseUp);
+    };
+    const onThumbMouseDown = (e) => {
+      e.stopImmediatePropagation();
+      if (e.ctrlKey || [1, 2].includes(e.button)) {
+        return;
+      }
+      state.isDragging = true;
+      state[bar.value.axis] = e.currentTarget[bar.value.offset] - (e[bar.value.client] - e.currentTarget.getBoundingClientRect()[bar.value.direction]);
+      emit("start-move");
+      attachEvents();
+    };
+    const onMouseUp = () => {
+      state.isDragging = false;
+      state[bar.value.axis] = 0;
+      emit("stop-move");
+      detachEvents();
+    };
+    const onMouseMove = (e) => {
+      const { isDragging } = state;
+      if (!isDragging) return;
+      if (!thumbRef.value || !trackRef.value) return;
+      const prevPage = state[bar.value.axis];
+      if (!prevPage) return;
+      raf.cAF(frameHandle);
+      const offset = (trackRef.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
+      const thumbClickPosition = thumbRef.value[bar.value.offset] - prevPage;
+      const distance = offset - thumbClickPosition;
+      frameHandle = raf.rAF(() => {
+        state.traveled = Math.max(0, Math.min(distance, totalSteps.value));
+        emit("scroll", distance, totalSteps.value);
+      });
+    };
+    const clickTrackHandler = (e) => {
+      const offset = Math.abs(
+        e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]
+      );
+      const thumbHalf = thumbRef.value[bar.value.offset] / 2;
+      const distance = offset - thumbHalf;
+      state.traveled = Math.max(0, Math.min(distance, totalSteps.value));
+      emit("scroll", distance, totalSteps.value);
+    };
+    vue.watch(
+      () => props2.scrollFrom,
+      (v) => {
+        if (state.isDragging) return;
+        state.traveled = Math.ceil(v * totalSteps.value);
+      }
+    );
+    vue.onBeforeUnmount(() => {
+      detachEvents();
+    });
+    return () => {
+      return vue.h(
+        "div",
+        {
+          role: "presentation",
+          ref: trackRef,
+          class: [
+            nsVirtualScrollbar.b(),
+            props2.class,
+            (props2.alwaysOn || state.isDragging) && "always-on"
+          ],
+          style: trackStyle.value,
+          onMousedown: vue.withModifiers(clickTrackHandler, ["stop", "prevent"]),
+          onTouchstartPrevent: onThumbMouseDown
+        },
+        vue.h(
+          "div",
+          {
+            ref: thumbRef,
+            class: nsScrollbar.e("thumb"),
+            style: thumbStyle.value,
+            onMousedown: onThumbMouseDown
+          },
+          []
+        )
+      );
+    };
+  }
+});
+exports.default = ScrollBar;

package/lib/components/virtual-list/defaults.cjs

@@ -1 +1,48 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=50,t="itemRendered",R="scroll",o="forward",A="backward",L="auto",S="smart",N="start",c="center",n="end",T="horizontal",E="vertical",e="ltr",s="rtl",I="negative",r="positive-ascending",O="positive-descending",M={[T]:"height",[E]:"width"},i={[T]:"left",[E]:"top"},l=20;exports.AUTO_ALIGNMENT=L;exports.BACKWARD=A;exports.CENTERED_ALIGNMENT=c;exports.DEFAULT_DYNAMIC_LIST_ITEM_SIZE=_;exports.END_ALIGNMENT=n;exports.FORWARD=o;exports.HORIZONTAL=T;exports.ITEM_RENDER_EVT=t;exports.LTR=e;exports.RTL=s;exports.RTL_OFFSET_NAG=I;exports.RTL_OFFSET_POS_ASC=r;exports.RTL_OFFSET_POS_DESC=O;exports.SCROLLBAR_MIN_SIZE=l;exports.SCROLL_EVT=R;exports.SMART_ALIGNMENT=S;exports.START_ALIGNMENT=N;exports.ScrollbarDirKey=i;exports.ScrollbarSizeKey=M;exports.VERTICAL=E;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const DEFAULT_DYNAMIC_LIST_ITEM_SIZE = 50;
+const ITEM_RENDER_EVT = "itemRendered";
+const SCROLL_EVT = "scroll";
+const FORWARD = "forward";
+const BACKWARD = "backward";
+const AUTO_ALIGNMENT = "auto";
+const SMART_ALIGNMENT = "smart";
+const START_ALIGNMENT = "start";
+const CENTERED_ALIGNMENT = "center";
+const END_ALIGNMENT = "end";
+const HORIZONTAL = "horizontal";
+const VERTICAL = "vertical";
+const LTR = "ltr";
+const RTL = "rtl";
+const RTL_OFFSET_NAG = "negative";
+const RTL_OFFSET_POS_ASC = "positive-ascending";
+const RTL_OFFSET_POS_DESC = "positive-descending";
+const ScrollbarSizeKey = {
+  [HORIZONTAL]: "height",
+  [VERTICAL]: "width"
+};
+const ScrollbarDirKey = {
+  [HORIZONTAL]: "left",
+  [VERTICAL]: "top"
+};
+const SCROLLBAR_MIN_SIZE = 20;
+exports.AUTO_ALIGNMENT = AUTO_ALIGNMENT;
+exports.BACKWARD = BACKWARD;
+exports.CENTERED_ALIGNMENT = CENTERED_ALIGNMENT;
+exports.DEFAULT_DYNAMIC_LIST_ITEM_SIZE = DEFAULT_DYNAMIC_LIST_ITEM_SIZE;
+exports.END_ALIGNMENT = END_ALIGNMENT;
+exports.FORWARD = FORWARD;
+exports.HORIZONTAL = HORIZONTAL;
+exports.ITEM_RENDER_EVT = ITEM_RENDER_EVT;
+exports.LTR = LTR;
+exports.RTL = RTL;
+exports.RTL_OFFSET_NAG = RTL_OFFSET_NAG;
+exports.RTL_OFFSET_POS_ASC = RTL_OFFSET_POS_ASC;
+exports.RTL_OFFSET_POS_DESC = RTL_OFFSET_POS_DESC;
+exports.SCROLLBAR_MIN_SIZE = SCROLLBAR_MIN_SIZE;
+exports.SCROLL_EVT = SCROLL_EVT;
+exports.SMART_ALIGNMENT = SMART_ALIGNMENT;
+exports.START_ALIGNMENT = START_ALIGNMENT;
+exports.ScrollbarDirKey = ScrollbarDirKey;
+exports.ScrollbarSizeKey = ScrollbarSizeKey;
+exports.VERTICAL = VERTICAL;

package/lib/components/virtual-list/hooks/use-cache.cjs

@@ -1 +1,14 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),o=require("lodash-es"),s=require("memoize-one"),n=()=>{const r=t.getCurrentInstance().proxy.$props;return t.computed(()=>{const e=(u,m,p)=>({});return r.perfMode?o.memoize(e):s(e)})};exports.useCache=n;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const lodashEs = require("lodash-es");
+const memoOne = require("memoize-one");
+const useCache = () => {
+  const vm = vue.getCurrentInstance();
+  const props = vm.proxy.$props;
+  return vue.computed(() => {
+    const _getItemStyleCache = (_, __, ___) => ({});
+    return props.perfMode ? lodashEs.memoize(_getItemStyleCache) : memoOne(_getItemStyleCache);
+  });
+};
+exports.useCache = useCache;

package/lib/components/virtual-list/hooks/use-grid-wheel.cjs

@@ -1 +1,47 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@vueuse/core");require("@vft/utils");require("../../config-provider/hooks/use-global-config.cjs");require("vue");require("lodash-es");const n=require("../../../utils/vue/raf.cjs"),q=({atXEndEdge:i,atXStartEdge:d,atYEndEdge:c,atYStartEdge:f},o)=>{let s=null,l=0,a=0;const u=(r,t)=>{const e=r<=0&&d.value||r>=0&&i.value,h=t<=0&&f.value||t>=0&&c.value;return e&&h};return{hasReachedEdge:u,onWheel:r=>{n.cAF(s);let t=r.deltaX,e=r.deltaY;Math.abs(t)>Math.abs(e)?e=0:t=0,r.shiftKey&&e!==0&&(t=e,e=0),!(u(l,a)&&u(l+t,a+e))&&(l+=t,a+=e,r.preventDefault(),s=n.rAF(()=>{o(l,a),l=0,a=0}))}}};exports.useGridWheel=q;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("@vueuse/core");
+require("@vft/utils");
+require("../../config-provider/hooks/use-global-config.cjs");
+require("vue");
+require("lodash-es");
+const raf = require("../../../utils/vue/raf.cjs");
+const useGridWheel = ({ atXEndEdge, atXStartEdge, atYEndEdge, atYStartEdge }, onWheelDelta) => {
+  let frameHandle = null;
+  let xOffset = 0;
+  let yOffset = 0;
+  const hasReachedEdge = (x, y) => {
+    const xEdgeReached = x <= 0 && atXStartEdge.value || x >= 0 && atXEndEdge.value;
+    const yEdgeReached = y <= 0 && atYStartEdge.value || y >= 0 && atYEndEdge.value;
+    return xEdgeReached && yEdgeReached;
+  };
+  const onWheel = (e) => {
+    raf.cAF(frameHandle);
+    let x = e.deltaX;
+    let y = e.deltaY;
+    if (Math.abs(x) > Math.abs(y)) {
+      y = 0;
+    } else {
+      x = 0;
+    }
+    if (e.shiftKey && y !== 0) {
+      x = y;
+      y = 0;
+    }
+    if (hasReachedEdge(xOffset, yOffset) && hasReachedEdge(xOffset + x, yOffset + y))
+      return;
+    xOffset += x;
+    yOffset += y;
+    e.preventDefault();
+    frameHandle = raf.rAF(() => {
+      onWheelDelta(xOffset, yOffset);
+      xOffset = 0;
+      yOffset = 0;
+    });
+  };
+  return {
+    hasReachedEdge,
+    onWheel
+  };
+};
+exports.useGridWheel = useGridWheel;

package/lib/components/virtual-list/hooks/use-wheel.cjs

@@ -1 +1,39 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("@vueuse/core");const d=require("@vft/utils");require("../../config-provider/hooks/use-global-config.cjs");require("vue");require("lodash-es");const s=require("../../../utils/vue/raf.cjs"),a=require("../defaults.cjs"),f={[a.HORIZONTAL]:"deltaX",[a.VERTICAL]:"deltaY"},h=({atEndEdge:n,atStartEdge:o,layout:i},c)=>{let l,e=0;const t=r=>r<0&&o.value||r>0&&n.value;return{hasReachedEdge:t,onWheel:r=>{s.cAF(l);const u=r[f[i.value]];t(e)&&t(e+u)||(e+=u,d.isFirefox()||r.preventDefault(),l=s.rAF(()=>{c(e),e=0}))}}};exports.default=h;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+require("@vueuse/core");
+const utils = require("@vft/utils");
+require("../../config-provider/hooks/use-global-config.cjs");
+require("vue");
+require("lodash-es");
+const raf = require("../../../utils/vue/raf.cjs");
+const defaults = require("../defaults.cjs");
+const LayoutKeys = {
+  [defaults.HORIZONTAL]: "deltaX",
+  [defaults.VERTICAL]: "deltaY"
+};
+const useWheel = ({ atEndEdge, atStartEdge, layout }, onWheelDelta) => {
+  let frameHandle;
+  let offset = 0;
+  const hasReachedEdge = (offset2) => {
+    const edgeReached = offset2 < 0 && atStartEdge.value || offset2 > 0 && atEndEdge.value;
+    return edgeReached;
+  };
+  const onWheel = (e) => {
+    raf.cAF(frameHandle);
+    const newOffset = e[LayoutKeys[layout.value]];
+    if (hasReachedEdge(offset) && hasReachedEdge(offset + newOffset)) return;
+    offset += newOffset;
+    if (!utils.isFirefox()) {
+      e.preventDefault();
+    }
+    frameHandle = raf.rAF(() => {
+      onWheelDelta(offset);
+      offset = 0;
+    });
+  };
+  return {
+    hasReachedEdge,
+    onWheel
+  };
+};
+exports.default = useWheel;

package/lib/components/virtual-list/index.cjs

@@ -1 +1,15 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/fixed-size-list.cjs"),r=require("./components/dynamic-size-list.cjs"),t=require("./components/fixed-size-grid.cjs"),d=require("./components/dynamic-size-grid.cjs"),i=require("./props.cjs");exports.FixedSizeList=e.default;exports.DynamicSizeList=r.default;exports.FixedSizeGrid=t.default;exports.DynamicSizeGrid=d.default;exports.virtualizedGridProps=i.virtualizedGridProps;exports.virtualizedListProps=i.virtualizedListProps;exports.virtualizedProps=i.virtualizedProps;exports.virtualizedScrollbarProps=i.virtualizedScrollbarProps;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fixedSizeList = require("./components/fixed-size-list.cjs");
+const dynamicSizeList = require("./components/dynamic-size-list.cjs");
+const fixedSizeGrid = require("./components/fixed-size-grid.cjs");
+const dynamicSizeGrid = require("./components/dynamic-size-grid.cjs");
+const props = require("./props.cjs");
+exports.FixedSizeList = fixedSizeList.default;
+exports.DynamicSizeList = dynamicSizeList.default;
+exports.FixedSizeGrid = fixedSizeGrid.default;
+exports.DynamicSizeGrid = dynamicSizeGrid.default;
+exports.virtualizedGridProps = props.virtualizedGridProps;
+exports.virtualizedListProps = props.virtualizedListProps;
+exports.virtualizedProps = props.virtualizedProps;
+exports.virtualizedScrollbarProps = props.virtualizedScrollbarProps;

package/lib/components/virtual-list/props.cjs

@@ -1 +1,153 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@vueuse/core");require("@vft/utils");require("../config-provider/hooks/use-global-config.cjs");require("vue");const b=require("../../utils/typescript.cjs"),e=require("../../utils/vue/props/runtime.cjs"),y=require("./defaults.cjs"),t=e.buildProp({type:e.definePropType([Number,Function]),required:!0}),i=e.buildProp({type:Number}),l=e.buildProp({type:Number,default:2}),m=e.buildProp({type:String,values:["ltr","rtl"],default:"ltr"}),o=e.buildProp({type:Number,default:0}),r=e.buildProp({type:Number,required:!0}),n=e.buildProp({type:String,values:["horizontal","vertical"],default:y.VERTICAL}),a=e.buildProps({className:{type:String,default:""},containerElement:{type:e.definePropType([String,Object]),default:"div"},data:{type:e.definePropType(Array),default:()=>b.mutable([])},direction:m,height:{type:[String,Number],required:!0},innerElement:{type:[String,Object],default:"div"},style:{type:e.definePropType([Object,String,Array])},useIsScrolling:Boolean,width:{type:[Number,String],required:!1},perfMode:{type:Boolean,default:!0},scrollbarAlwaysOn:Boolean}),S=e.buildProps({cache:l,estimatedItemSize:i,layout:n,initScrollOffset:o,total:r,itemSize:t,...a}),u={type:Number,default:6},d={type:Number,default:0},p={type:Number,default:2},f=e.buildProps({columnCache:l,columnWidth:t,estimatedColumnWidth:i,estimatedRowHeight:i,initScrollLeft:o,initScrollTop:o,itemKey:{type:e.definePropType(Function),default:({columnIndex:s,rowIndex:c})=>`${c}:${s}`},rowCache:l,rowHeight:t,totalColumn:r,totalRow:r,hScrollbarSize:u,vScrollbarSize:u,scrollbarStartGap:d,scrollbarEndGap:p,role:String,...a}),P=e.buildProps({alwaysOn:Boolean,class:String,layout:n,total:r,ratio:{type:Number,required:!0},clientSize:{type:Number,required:!0},scrollFrom:{type:Number,required:!0},scrollbarSize:u,startGap:d,endGap:p,visible:Boolean});exports.virtualizedGridProps=f;exports.virtualizedListProps=S;exports.virtualizedProps=a;exports.virtualizedScrollbarProps=P;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("@vueuse/core");
+require("@vft/utils");
+require("../config-provider/hooks/use-global-config.cjs");
+require("vue");
+const typescript = require("../../utils/typescript.cjs");
+const runtime = require("../../utils/vue/props/runtime.cjs");
+const defaults = require("./defaults.cjs");
+const itemSize = runtime.buildProp({
+  type: runtime.definePropType([Number, Function]),
+  required: true
+});
+const estimatedItemSize = runtime.buildProp({
+  type: Number
+});
+const cache = runtime.buildProp({
+  type: Number,
+  default: 2
+});
+const direction = runtime.buildProp({
+  type: String,
+  values: ["ltr", "rtl"],
+  default: "ltr"
+});
+const initScrollOffset = runtime.buildProp({
+  type: Number,
+  default: 0
+});
+const total = runtime.buildProp({
+  type: Number,
+  required: true
+});
+const layout = runtime.buildProp({
+  type: String,
+  values: ["horizontal", "vertical"],
+  default: defaults.VERTICAL
+});
+const virtualizedProps = runtime.buildProps({
+  className: {
+    type: String,
+    default: ""
+  },
+  containerElement: {
+    type: runtime.definePropType([String, Object]),
+    default: "div"
+  },
+  data: {
+    type: runtime.definePropType(Array),
+    default: () => typescript.mutable([])
+  },
+  /**
+   * @description controls the horizontal direction.
+   */
+  direction,
+  height: {
+    type: [String, Number],
+    required: true
+  },
+  innerElement: {
+    type: [String, Object],
+    default: "div"
+  },
+  style: {
+    type: runtime.definePropType([Object, String, Array])
+  },
+  useIsScrolling: Boolean,
+  width: {
+    type: [Number, String],
+    required: false
+  },
+  perfMode: {
+    type: Boolean,
+    default: true
+  },
+  scrollbarAlwaysOn: Boolean
+});
+const virtualizedListProps = runtime.buildProps({
+  /**
+   * @description describes how many items should be pre rendered to the head
+   * and the tail of the window
+   */
+  cache,
+  estimatedItemSize,
+  /**
+   * @description controls the list's orientation
+   */
+  layout,
+  initScrollOffset,
+  /**
+   * @description describes the total number of the list.
+   */
+  total,
+  itemSize,
+  ...virtualizedProps
+});
+const scrollbarSize = {
+  type: Number,
+  default: 6
+};
+const startGap = { type: Number, default: 0 };
+const endGap = { type: Number, default: 2 };
+const virtualizedGridProps = runtime.buildProps({
+  columnCache: cache,
+  columnWidth: itemSize,
+  estimatedColumnWidth: estimatedItemSize,
+  estimatedRowHeight: estimatedItemSize,
+  initScrollLeft: initScrollOffset,
+  initScrollTop: initScrollOffset,
+  itemKey: {
+    type: runtime.definePropType(Function),
+    default: ({
+      columnIndex,
+      rowIndex
+    }) => `${rowIndex}:${columnIndex}`
+  },
+  rowCache: cache,
+  rowHeight: itemSize,
+  totalColumn: total,
+  totalRow: total,
+  hScrollbarSize: scrollbarSize,
+  vScrollbarSize: scrollbarSize,
+  scrollbarStartGap: startGap,
+  scrollbarEndGap: endGap,
+  role: String,
+  ...virtualizedProps
+});
+const virtualizedScrollbarProps = runtime.buildProps({
+  alwaysOn: Boolean,
+  class: String,
+  layout,
+  total,
+  ratio: {
+    type: Number,
+    required: true
+  },
+  clientSize: {
+    type: Number,
+    required: true
+  },
+  scrollFrom: {
+    type: Number,
+    required: true
+  },
+  scrollbarSize,
+  startGap,
+  endGap,
+  visible: Boolean
+});
+exports.virtualizedGridProps = virtualizedGridProps;
+exports.virtualizedListProps = virtualizedListProps;
+exports.virtualizedProps = virtualizedProps;
+exports.virtualizedScrollbarProps = virtualizedScrollbarProps;

package/lib/components/virtual-list/style/css.cjs

@@ -1 +1,4 @@
-"use strict";require("vft/theme-style/base.css");require("vft/theme-style/vft-virtual-list.css");require("vft/theme-style/vft-scrollbar.css");
+"use strict";
+require("vft/theme-style/base.css");
+require("vft/theme-style/vft-virtual-list.css");
+require("vft/theme-style/vft-scrollbar.css");

package/lib/components/virtual-list/style/index.cjs

@@ -1 +1,4 @@
-"use strict";require("vft/theme-style/src/base.scss");require("vft/theme-style/src/virtual-list.scss");require("vft/theme-style/src/scrollbar.scss");
+"use strict";
+require("vft/theme-style/src/base.scss");
+require("vft/theme-style/src/virtual-list.scss");
+require("vft/theme-style/src/scrollbar.scss");