vft 0.0.375 → 0.0.376

package/lib/components/virtual-list/builders/build-list.cjs

@@ -1,427 +1 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vue = require("vue");
-const core = require("@vueuse/core");
-const utils = require("@vft/utils");
-require("../../config-provider/hooks/use-global-config.cjs");
-require("lodash-es");
-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 useCache = require("../hooks/use-cache.cjs");
-const useWheel = require("../hooks/use-wheel.cjs");
-const scrollbar = require("../components/scrollbar.cjs");
-const utils$1 = require("../utils.cjs");
-const props = require("../props.cjs");
-const defaults = require("../defaults.cjs");
-const createList = ({
-  name,
-  getOffset,
-  getItemSize,
-  getItemOffset,
-  getEstimatedTotalSize,
-  getStartIndexForOffset,
-  getStopIndexForStartIndex,
-  initCache,
-  clearCache,
-  validateProps
-}) => {
-  return vue.defineComponent({
-    name: name ?? "ElVirtualList",
-    props: props.virtualizedListProps,
-    emits: [defaults.ITEM_RENDER_EVT, defaults.SCROLL_EVT],
-    setup(props2, { emit, expose }) {
-      validateProps(props2);
-      const instance = vue.getCurrentInstance();
-      const ns = index.useNamespace("vl");
-      const dynamicSizeCache = vue.ref(initCache(props2, instance));
-      const getItemStyleCache = useCache.useCache();
-      const windowRef = vue.ref();
-      const innerRef = vue.ref();
-      const scrollbarRef = vue.ref();
-      const states = vue.ref({
-        isScrolling: false,
-        scrollDir: "forward",
-        scrollOffset: utils.isNumber(props2.initScrollOffset) ? props2.initScrollOffset : 0,
-        updateRequested: false,
-        isScrollbarDragging: false,
-        scrollbarAlwaysOn: props2.scrollbarAlwaysOn
-      });
-      const itemsToRender = vue.computed(() => {
-        const { total, cache } = props2;
-        const { isScrolling, scrollDir, scrollOffset } = vue.unref(states);
-        if (total === 0) {
-          return [0, 0, 0, 0];
-        }
-        const startIndex = getStartIndexForOffset(
-          props2,
-          scrollOffset,
-          vue.unref(dynamicSizeCache)
-        );
-        const stopIndex = getStopIndexForStartIndex(
-          props2,
-          startIndex,
-          scrollOffset,
-          vue.unref(dynamicSizeCache)
-        );
-        const cacheBackward = !isScrolling || scrollDir === defaults.BACKWARD ? Math.max(1, cache) : 1;
-        const cacheForward = !isScrolling || scrollDir === defaults.FORWARD ? Math.max(1, cache) : 1;
-        return [
-          Math.max(0, startIndex - cacheBackward),
-          Math.max(0, Math.min(total - 1, stopIndex + cacheForward)),
-          startIndex,
-          stopIndex
-        ];
-      });
-      const estimatedTotalSize = vue.computed(
-        () => getEstimatedTotalSize(props2, vue.unref(dynamicSizeCache))
-      );
-      const _isHorizontal = vue.computed(() => utils$1.isHorizontal(props2.layout));
-      const windowStyle = vue.computed(() => [
-        {
-          position: "relative",
-          [`overflow-${_isHorizontal.value ? "x" : "y"}`]: "scroll",
-          WebkitOverflowScrolling: "touch",
-          willChange: "transform"
-        },
-        {
-          direction: props2.direction,
-          height: utils.isNumber(props2.height) ? `${props2.height}px` : props2.height,
-          width: utils.isNumber(props2.width) ? `${props2.width}px` : props2.width
-        },
-        props2.style
-      ]);
-      const innerStyle = vue.computed(() => {
-        const size = vue.unref(estimatedTotalSize);
-        const horizontal = vue.unref(_isHorizontal);
-        return {
-          height: horizontal ? "100%" : `${size}px`,
-          pointerEvents: vue.unref(states).isScrolling ? "none" : void 0,
-          width: horizontal ? `${size}px` : "100%"
-        };
-      });
-      const clientSize = vue.computed(
-        () => _isHorizontal.value ? props2.width : props2.height
-      );
-      const { onWheel } = useWheel.default(
-        {
-          atStartEdge: vue.computed(() => states.value.scrollOffset <= 0),
-          atEndEdge: vue.computed(
-            () => states.value.scrollOffset >= estimatedTotalSize.value
-          ),
-          layout: vue.computed(() => props2.layout)
-        },
-        (offset) => {
-          scrollbarRef.value.onMouseUp?.();
-          scrollTo(
-            Math.min(
-              states.value.scrollOffset + offset,
-              estimatedTotalSize.value - clientSize.value
-            )
-          );
-        }
-      );
-      core.useEventListener(windowRef, "wheel", onWheel, {
-        passive: false
-      });
-      const emitEvents = () => {
-        const { total } = props2;
-        if (total > 0) {
-          const [cacheStart, cacheEnd, visibleStart, visibleEnd] = vue.unref(itemsToRender);
-          emit(defaults.ITEM_RENDER_EVT, cacheStart, cacheEnd, visibleStart, visibleEnd);
-        }
-        const { scrollDir, scrollOffset, updateRequested } = vue.unref(states);
-        emit(defaults.SCROLL_EVT, scrollDir, scrollOffset, updateRequested);
-      };
-      const scrollVertically = (e) => {
-        const { clientHeight, scrollHeight, scrollTop } = e.currentTarget;
-        const _states = vue.unref(states);
-        if (_states.scrollOffset === scrollTop) {
-          return;
-        }
-        const scrollOffset = Math.max(
-          0,
-          Math.min(scrollTop, scrollHeight - clientHeight)
-        );
-        states.value = {
-          ..._states,
-          isScrolling: true,
-          scrollDir: utils$1.getScrollDir(_states.scrollOffset, scrollOffset),
-          scrollOffset,
-          updateRequested: false
-        };
-        vue.nextTick(resetIsScrolling);
-      };
-      const scrollHorizontally = (e) => {
-        const { clientWidth, scrollLeft, scrollWidth } = e.currentTarget;
-        const _states = vue.unref(states);
-        if (_states.scrollOffset === scrollLeft) {
-          return;
-        }
-        const { direction } = props2;
-        let scrollOffset = scrollLeft;
-        if (direction === defaults.RTL) {
-          switch (utils$1.getRTLOffsetType()) {
-            case defaults.RTL_OFFSET_NAG: {
-              scrollOffset = -scrollLeft;
-              break;
-            }
-            case defaults.RTL_OFFSET_POS_DESC: {
-              scrollOffset = scrollWidth - clientWidth - scrollLeft;
-              break;
-            }
-          }
-        }
-        scrollOffset = Math.max(
-          0,
-          Math.min(scrollOffset, scrollWidth - clientWidth)
-        );
-        states.value = {
-          ..._states,
-          isScrolling: true,
-          scrollDir: utils$1.getScrollDir(_states.scrollOffset, scrollOffset),
-          scrollOffset,
-          updateRequested: false
-        };
-        vue.nextTick(resetIsScrolling);
-      };
-      const onScroll = (e) => {
-        vue.unref(_isHorizontal) ? scrollHorizontally(e) : scrollVertically(e);
-        emitEvents();
-      };
-      const onScrollbarScroll = (distanceToGo, totalSteps) => {
-        const offset = (estimatedTotalSize.value - clientSize.value) / totalSteps * distanceToGo;
-        scrollTo(
-          Math.min(
-            estimatedTotalSize.value - clientSize.value,
-            offset
-          )
-        );
-      };
-      const scrollTo = (offset) => {
-        offset = Math.max(offset, 0);
-        if (offset === vue.unref(states).scrollOffset) {
-          return;
-        }
-        states.value = {
-          ...vue.unref(states),
-          scrollOffset: offset,
-          scrollDir: utils$1.getScrollDir(vue.unref(states).scrollOffset, offset),
-          updateRequested: true
-        };
-        vue.nextTick(resetIsScrolling);
-      };
-      const scrollToItem = (idx, alignment = defaults.AUTO_ALIGNMENT) => {
-        const { scrollOffset } = vue.unref(states);
-        idx = Math.max(0, Math.min(idx, props2.total - 1));
-        scrollTo(
-          getOffset(
-            props2,
-            idx,
-            alignment,
-            scrollOffset,
-            vue.unref(dynamicSizeCache)
-          )
-        );
-      };
-      const getItemStyle = (idx) => {
-        const { direction, itemSize, layout } = props2;
-        const itemStyleCache = getItemStyleCache.value(
-          clearCache && itemSize,
-          clearCache && layout,
-          clearCache && direction
-        );
-        let style;
-        if (utils.hasOwn(itemStyleCache, String(idx))) {
-          style = itemStyleCache[idx];
-        } else {
-          const offset = getItemOffset(props2, idx, vue.unref(dynamicSizeCache));
-          const size = getItemSize(props2, idx, vue.unref(dynamicSizeCache));
-          const horizontal = vue.unref(_isHorizontal);
-          const isRtl = direction === defaults.RTL;
-          const offsetHorizontal = horizontal ? offset : 0;
-          itemStyleCache[idx] = style = {
-            position: "absolute",
-            left: isRtl ? void 0 : `${offsetHorizontal}px`,
-            right: isRtl ? `${offsetHorizontal}px` : void 0,
-            top: !horizontal ? `${offset}px` : 0,
-            height: !horizontal ? `${size}px` : "100%",
-            width: horizontal ? `${size}px` : "100%"
-          };
-        }
-        return style;
-      };
-      const resetIsScrolling = () => {
-        states.value.isScrolling = false;
-        vue.nextTick(() => {
-          getItemStyleCache.value(-1, null, null);
-        });
-      };
-      const resetScrollTop = () => {
-        const window = windowRef.value;
-        if (window) {
-          window.scrollTop = 0;
-        }
-      };
-      vue.onMounted(() => {
-        if (!utils.isClient) return;
-        const { initScrollOffset } = props2;
-        const windowElement = vue.unref(windowRef);
-        if (utils.isNumber(initScrollOffset) && windowElement) {
-          if (vue.unref(_isHorizontal)) {
-            windowElement.scrollLeft = initScrollOffset;
-          } else {
-            windowElement.scrollTop = initScrollOffset;
-          }
-        }
-        emitEvents();
-      });
-      vue.onUpdated(() => {
-        const { direction, layout } = props2;
-        const { scrollOffset, updateRequested } = vue.unref(states);
-        const windowElement = vue.unref(windowRef);
-        if (updateRequested && windowElement) {
-          if (layout === defaults.HORIZONTAL) {
-            if (direction === defaults.RTL) {
-              switch (utils$1.getRTLOffsetType()) {
-                case defaults.RTL_OFFSET_NAG: {
-                  windowElement.scrollLeft = -scrollOffset;
-                  break;
-                }
-                case defaults.RTL_OFFSET_POS_ASC: {
-                  windowElement.scrollLeft = scrollOffset;
-                  break;
-                }
-                default: {
-                  const { clientWidth, scrollWidth } = windowElement;
-                  windowElement.scrollLeft = scrollWidth - clientWidth - scrollOffset;
-                  break;
-                }
-              }
-            } else {
-              windowElement.scrollLeft = scrollOffset;
-            }
-          } else {
-            windowElement.scrollTop = scrollOffset;
-          }
-        }
-      });
-      vue.onActivated(() => {
-        vue.unref(windowRef).scrollTop = vue.unref(states).scrollOffset;
-      });
-      const api = {
-        ns,
-        clientSize,
-        estimatedTotalSize,
-        windowStyle,
-        windowRef,
-        innerRef,
-        innerStyle,
-        itemsToRender,
-        scrollbarRef,
-        states,
-        getItemStyle,
-        onScroll,
-        onScrollbarScroll,
-        onWheel,
-        scrollTo,
-        scrollToItem,
-        resetScrollTop
-      };
-      expose({
-        windowRef,
-        innerRef,
-        getItemStyleCache,
-        scrollTo,
-        scrollToItem,
-        resetScrollTop,
-        states
-      });
-      return api;
-    },
-    render(ctx) {
-      const {
-        $slots,
-        className,
-        clientSize,
-        containerElement,
-        data,
-        getItemStyle,
-        innerElement,
-        itemsToRender,
-        innerStyle,
-        layout,
-        total,
-        onScroll,
-        onScrollbarScroll,
-        states,
-        useIsScrolling,
-        windowStyle,
-        ns
-      } = ctx;
-      const [start, end] = itemsToRender;
-      const Container = vue.resolveDynamicComponent(containerElement);
-      const Inner = vue.resolveDynamicComponent(innerElement);
-      const children = [];
-      if (total > 0) {
-        for (let i = start; i <= end; i++) {
-          children.push(
-            vue.h(
-              vue.Fragment,
-              { key: i },
-              $slots.default?.({
-                data,
-                index: i,
-                isScrolling: useIsScrolling ? states.isScrolling : void 0,
-                style: getItemStyle(i)
-              })
-            )
-          );
-        }
-      }
-      const InnerNode = [
-        vue.h(
-          Inner,
-          {
-            style: innerStyle,
-            ref: "innerRef"
-          },
-          !utils.isString(Inner) ? {
-            default: () => children
-          } : children
-        )
-      ];
-      const scrollbar$1 = vue.h(scrollbar.default, {
-        ref: "scrollbarRef",
-        clientSize,
-        layout,
-        onScroll: onScrollbarScroll,
-        ratio: clientSize * 100 / this.estimatedTotalSize,
-        scrollFrom: states.scrollOffset / (this.estimatedTotalSize - clientSize),
-        total,
-        alwaysOn: states.scrollbarAlwaysOn
-      });
-      const listContainer = vue.h(
-        Container,
-        {
-          class: [ns.e("window"), className],
-          style: windowStyle,
-          onScroll,
-          ref: "windowRef",
-          key: 0
-        },
-        !utils.isString(Container) ? { default: () => [InnerNode] } : [InnerNode]
-      );
-      return vue.h(
-        "div",
-        {
-          key: 0,
-          class: [ns.e("wrapper"), states.scrollbarAlwaysOn ? "always-on" : ""]
-        },
-        [listContainer, scrollbar$1]
-      );
-    }
-  });
-};
-exports.default = createList;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),ee=require("@vueuse/core"),O=require("@vft/utils");require("../../config-provider/hooks/use-global-config.cjs");require("lodash-es");const te=require("../../../hooks/use-namespace/index.cjs");require("../../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../../hooks/use-z-index/index.cjs");const le=require("../hooks/use-cache.cjs"),ne=require("../hooks/use-wheel.cjs"),se=require("../components/scrollbar.cjs"),R=require("../utils.cjs"),re=require("../props.cjs"),a=require("../defaults.cjs"),oe=({name:U,getOffset:B,getItemSize:j,getItemOffset:K,getEstimatedTotalSize:Z,getStartIndexForOffset:J,getStopIndexForStartIndex:Q,initCache:X,clearCache:A,validateProps:Y})=>e.defineComponent({name:U??"ElVirtualList",props:re.virtualizedListProps,emits:[a.ITEM_RENDER_EVT,a.SCROLL_EVT],setup(l,{emit:M,expose:N}){Y(l);const E=e.getCurrentInstance(),$=te.useNamespace("vl"),h=e.ref(X(l,E)),b=le.useCache(),f=e.ref(),x=e.ref(),D=e.ref(),o=e.ref({isScrolling:!1,scrollDir:"forward",scrollOffset:O.isNumber(l.initScrollOffset)?l.initScrollOffset:0,updateRequested:!1,isScrollbarDragging:!1,scrollbarAlwaysOn:l.scrollbarAlwaysOn}),L=e.computed(()=>{const{total:t,cache:n}=l,{isScrolling:r,scrollDir:u,scrollOffset:s}=e.unref(o);if(t===0)return[0,0,0,0];const c=J(l,s,e.unref(h)),i=Q(l,c,s,e.unref(h)),w=!r||u===a.BACKWARD?Math.max(1,n):1,y=!r||u===a.FORWARD?Math.max(1,n):1;return[Math.max(0,c-w),Math.max(0,Math.min(t-1,i+y)),c,i]}),S=e.computed(()=>Z(l,e.unref(h))),m=e.computed(()=>R.isHorizontal(l.layout)),T=e.computed(()=>[{position:"relative",[`overflow-${m.value?"x":"y"}`]:"scroll",WebkitOverflowScrolling:"touch",willChange:"transform"},{direction:l.direction,height:O.isNumber(l.height)?`${l.height}px`:l.height,width:O.isNumber(l.width)?`${l.width}px`:l.width},l.style]),F=e.computed(()=>{const t=e.unref(S),n=e.unref(m);return{height:n?"100%":`${t}px`,pointerEvents:e.unref(o).isScrolling?"none":void 0,width:n?`${t}px`:"100%"}}),v=e.computed(()=>m.value?l.width:l.height),{onWheel:_}=ne.default({atStartEdge:e.computed(()=>o.value.scrollOffset<=0),atEndEdge:e.computed(()=>o.value.scrollOffset>=S.value),layout:e.computed(()=>l.layout)},t=>{D.value.onMouseUp?.(),g(Math.min(o.value.scrollOffset+t,S.value-v.value))});ee.useEventListener(f,"wheel",_,{passive:!1});const z=()=>{const{total:t}=l;if(t>0){const[s,c,i,w]=e.unref(L);M(a.ITEM_RENDER_EVT,s,c,i,w)}const{scrollDir:n,scrollOffset:r,updateRequested:u}=e.unref(o);M(a.SCROLL_EVT,n,r,u)},W=t=>{const{clientHeight:n,scrollHeight:r,scrollTop:u}=t.currentTarget,s=e.unref(o);if(s.scrollOffset===u)return;const c=Math.max(0,Math.min(u,r-n));o.value={...s,isScrolling:!0,scrollDir:R.getScrollDir(s.scrollOffset,c),scrollOffset:c,updateRequested:!1},e.nextTick(d)},C=t=>{const{clientWidth:n,scrollLeft:r,scrollWidth:u}=t.currentTarget,s=e.unref(o);if(s.scrollOffset===r)return;const{direction:c}=l;let i=r;if(c===a.RTL)switch(R.getRTLOffsetType()){case a.RTL_OFFSET_NAG:{i=-r;break}case a.RTL_OFFSET_POS_DESC:{i=u-n-r;break}}i=Math.max(0,Math.min(i,u-n)),o.value={...s,isScrolling:!0,scrollDir:R.getScrollDir(s.scrollOffset,i),scrollOffset:i,updateRequested:!1},e.nextTick(d)},I=t=>{e.unref(m)?C(t):W(t),z()},q=(t,n)=>{const r=(S.value-v.value)/n*t;g(Math.min(S.value-v.value,r))},g=t=>{t=Math.max(t,0),t!==e.unref(o).scrollOffset&&(o.value={...e.unref(o),scrollOffset:t,scrollDir:R.getScrollDir(e.unref(o).scrollOffset,t),updateRequested:!0},e.nextTick(d))},k=(t,n=a.AUTO_ALIGNMENT)=>{const{scrollOffset:r}=e.unref(o);t=Math.max(0,Math.min(t,l.total-1)),g(B(l,t,n,r,e.unref(h)))},H=t=>{const{direction:n,itemSize:r,layout:u}=l,s=b.value(A&&r,A&&u,A&&n);let c;if(O.hasOwn(s,String(t)))c=s[t];else{const i=K(l,t,e.unref(h)),w=j(l,t,e.unref(h)),y=e.unref(m),P=n===a.RTL,G=y?i:0;s[t]=c={position:"absolute",left:P?void 0:`${G}px`,right:P?`${G}px`:void 0,top:y?0:`${i}px`,height:y?"100%":`${w}px`,width:y?`${w}px`:"100%"}}return c},d=()=>{o.value.isScrolling=!1,e.nextTick(()=>{b.value(-1,null,null)})},V=()=>{const t=f.value;t&&(t.scrollTop=0)};e.onMounted(()=>{if(!O.isClient)return;const{initScrollOffset:t}=l,n=e.unref(f);O.isNumber(t)&&n&&(e.unref(m)?n.scrollLeft=t:n.scrollTop=t),z()}),e.onUpdated(()=>{const{direction:t,layout:n}=l,{scrollOffset:r,updateRequested:u}=e.unref(o),s=e.unref(f);if(u&&s)if(n===a.HORIZONTAL)if(t===a.RTL)switch(R.getRTLOffsetType()){case a.RTL_OFFSET_NAG:{s.scrollLeft=-r;break}case a.RTL_OFFSET_POS_ASC:{s.scrollLeft=r;break}default:{const{clientWidth:c,scrollWidth:i}=s;s.scrollLeft=i-c-r;break}}else s.scrollLeft=r;else s.scrollTop=r}),e.onActivated(()=>{e.unref(f).scrollTop=e.unref(o).scrollOffset});const p={ns:$,clientSize:v,estimatedTotalSize:S,windowStyle:T,windowRef:f,innerRef:x,innerStyle:F,itemsToRender:L,scrollbarRef:D,states:o,getItemStyle:H,onScroll:I,onScrollbarScroll:q,onWheel:_,scrollTo:g,scrollToItem:k,resetScrollTop:V};return N({windowRef:f,innerRef:x,getItemStyleCache:b,scrollTo:g,scrollToItem:k,resetScrollTop:V,states:o}),p},render(l){const{$slots:M,className:N,clientSize:E,containerElement:$,data:h,getItemStyle:b,innerElement:f,itemsToRender:x,innerStyle:D,layout:o,total:L,onScroll:S,onScrollbarScroll:m,states:T,useIsScrolling:F,windowStyle:v,ns:_}=l,[z,W]=x,C=e.resolveDynamicComponent($),I=e.resolveDynamicComponent(f),q=[];if(L>0)for(let d=z;d<=W;d++)q.push(e.h(e.Fragment,{key:d},M.default?.({data:h,index:d,isScrolling:F?T.isScrolling:void 0,style:b(d)})));const g=[e.h(I,{style:D,ref:"innerRef"},O.isString(I)?q:{default:()=>q})],k=e.h(se.default,{ref:"scrollbarRef",clientSize:E,layout:o,onScroll:m,ratio:E*100/this.estimatedTotalSize,scrollFrom:T.scrollOffset/(this.estimatedTotalSize-E),total:L,alwaysOn:T.scrollbarAlwaysOn}),H=e.h(C,{class:[_.e("window"),N],style:v,onScroll:S,ref:"windowRef",key:0},O.isString(C)?[g]:{default:()=>[g]});return e.h("div",{key:0,class:[_.e("wrapper"),T.scrollbarAlwaysOn?"always-on":""]},[H,k])}});exports.default=oe;