vft 0.0.361 → 0.0.363

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

@@ -1 +1,422 @@
-"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;
+"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");
+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 index = require("../../../hooks/use-namespace/index.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;