vft 0.0.524 → 0.0.525

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

@@ -1 +1,298 @@
-"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");require("../../form/index.cjs");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:q}=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",q,{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()},_=(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:_,onWheel:q,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:q}=l,[z,W]=x,C=e.resolveDynamicComponent($),I=e.resolveDynamicComponent(f),_=[];if(L>0)for(let d=z;d<=W;d++)_.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)?_:{default:()=>_})],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:[q.e("window"),N],style:v,onScroll:S,ref:"windowRef",key:0},O.isString(C)?[g]:{default:()=>[g]});return e.h("div",{key:0,class:[q.e("wrapper"),T.scrollbarAlwaysOn?"always-on":""]},[H,k])}});exports.default=oe;
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_index = require("../../../hooks/use-namespace/index.cjs");
+const require_use_cache = require("../hooks/use-cache.cjs");
+const require_defaults = require("../defaults.cjs");
+const require_use_wheel = require("../hooks/use-wheel.cjs");
+const require_props = require("../props.cjs");
+const require_utils = require("../utils.cjs");
+const require_scrollbar = require("../components/scrollbar.cjs");
+let _vft_utils = require("@vft/utils");
+let _vueuse_core = require("@vueuse/core");
+let vue = require("vue");
+//#region ../../packages/components/virtual-list/builders/build-list.ts
+const createList = ({ name, getOffset, getItemSize, getItemOffset, getEstimatedTotalSize, getStartIndexForOffset, getStopIndexForStartIndex, initCache, clearCache, validateProps }) => {
+	return (0, vue.defineComponent)({
+		name: name ?? "ElVirtualList",
+		props: require_props.virtualizedListProps,
+		emits: [require_defaults.ITEM_RENDER_EVT, require_defaults.SCROLL_EVT],
+		setup(props, { emit, expose }) {
+			validateProps(props);
+			const instance = (0, vue.getCurrentInstance)();
+			const ns = require_index.useNamespace("vl");
+			const dynamicSizeCache = (0, vue.ref)(initCache(props, instance));
+			const getItemStyleCache = require_use_cache.useCache();
+			const windowRef = (0, vue.ref)();
+			const innerRef = (0, vue.ref)();
+			const scrollbarRef = (0, vue.ref)();
+			const states = (0, vue.ref)({
+				isScrolling: false,
+				scrollDir: "forward",
+				scrollOffset: (0, _vft_utils.isNumber)(props.initScrollOffset) ? props.initScrollOffset : 0,
+				updateRequested: false,
+				isScrollbarDragging: false,
+				scrollbarAlwaysOn: props.scrollbarAlwaysOn
+			});
+			const itemsToRender = (0, vue.computed)(() => {
+				const { total, cache } = props;
+				const { isScrolling, scrollDir, scrollOffset } = (0, vue.unref)(states);
+				if (total === 0) return [
+					0,
+					0,
+					0,
+					0
+				];
+				const startIndex = getStartIndexForOffset(props, scrollOffset, (0, vue.unref)(dynamicSizeCache));
+				const stopIndex = getStopIndexForStartIndex(props, startIndex, scrollOffset, (0, vue.unref)(dynamicSizeCache));
+				const cacheBackward = !isScrolling || scrollDir === "backward" ? Math.max(1, cache) : 1;
+				const cacheForward = !isScrolling || scrollDir === "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 = (0, vue.computed)(() => getEstimatedTotalSize(props, (0, vue.unref)(dynamicSizeCache)));
+			const _isHorizontal = (0, vue.computed)(() => require_utils.isHorizontal(props.layout));
+			const windowStyle = (0, vue.computed)(() => [
+				{
+					position: "relative",
+					[`overflow-${_isHorizontal.value ? "x" : "y"}`]: "scroll",
+					WebkitOverflowScrolling: "touch",
+					willChange: "transform"
+				},
+				{
+					direction: props.direction,
+					height: (0, _vft_utils.isNumber)(props.height) ? `${props.height}px` : props.height,
+					width: (0, _vft_utils.isNumber)(props.width) ? `${props.width}px` : props.width
+				},
+				props.style
+			]);
+			const innerStyle = (0, vue.computed)(() => {
+				const size = (0, vue.unref)(estimatedTotalSize);
+				const horizontal = (0, vue.unref)(_isHorizontal);
+				return {
+					height: horizontal ? "100%" : `${size}px`,
+					pointerEvents: (0, vue.unref)(states).isScrolling ? "none" : void 0,
+					width: horizontal ? `${size}px` : "100%"
+				};
+			});
+			const clientSize = (0, vue.computed)(() => _isHorizontal.value ? props.width : props.height);
+			const { onWheel } = require_use_wheel.default({
+				atStartEdge: (0, vue.computed)(() => states.value.scrollOffset <= 0),
+				atEndEdge: (0, vue.computed)(() => states.value.scrollOffset >= estimatedTotalSize.value),
+				layout: (0, vue.computed)(() => props.layout)
+			}, (offset) => {
+				scrollbarRef.value.onMouseUp?.();
+				scrollTo(Math.min(states.value.scrollOffset + offset, estimatedTotalSize.value - clientSize.value));
+			});
+			(0, _vueuse_core.useEventListener)(windowRef, "wheel", onWheel, { passive: false });
+			const emitEvents = () => {
+				const { total } = props;
+				if (total > 0) {
+					const [cacheStart, cacheEnd, visibleStart, visibleEnd] = (0, vue.unref)(itemsToRender);
+					emit(require_defaults.ITEM_RENDER_EVT, cacheStart, cacheEnd, visibleStart, visibleEnd);
+				}
+				const { scrollDir, scrollOffset, updateRequested } = (0, vue.unref)(states);
+				emit(require_defaults.SCROLL_EVT, scrollDir, scrollOffset, updateRequested);
+			};
+			const scrollVertically = (e) => {
+				const { clientHeight, scrollHeight, scrollTop } = e.currentTarget;
+				const _states = (0, vue.unref)(states);
+				if (_states.scrollOffset === scrollTop) return;
+				const scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
+				states.value = {
+					..._states,
+					isScrolling: true,
+					scrollDir: require_utils.getScrollDir(_states.scrollOffset, scrollOffset),
+					scrollOffset,
+					updateRequested: false
+				};
+				(0, vue.nextTick)(resetIsScrolling);
+			};
+			const scrollHorizontally = (e) => {
+				const { clientWidth, scrollLeft, scrollWidth } = e.currentTarget;
+				const _states = (0, vue.unref)(states);
+				if (_states.scrollOffset === scrollLeft) return;
+				const { direction } = props;
+				let scrollOffset = scrollLeft;
+				if (direction === "rtl") switch (require_utils.getRTLOffsetType()) {
+					case require_defaults.RTL_OFFSET_NAG:
+						scrollOffset = -scrollLeft;
+						break;
+					case require_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: require_utils.getScrollDir(_states.scrollOffset, scrollOffset),
+					scrollOffset,
+					updateRequested: false
+				};
+				(0, vue.nextTick)(resetIsScrolling);
+			};
+			const onScroll = (e) => {
+				(0, 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 === (0, vue.unref)(states).scrollOffset) return;
+				states.value = {
+					...(0, vue.unref)(states),
+					scrollOffset: offset,
+					scrollDir: require_utils.getScrollDir((0, vue.unref)(states).scrollOffset, offset),
+					updateRequested: true
+				};
+				(0, vue.nextTick)(resetIsScrolling);
+			};
+			const scrollToItem = (idx, alignment = require_defaults.AUTO_ALIGNMENT) => {
+				const { scrollOffset } = (0, vue.unref)(states);
+				idx = Math.max(0, Math.min(idx, props.total - 1));
+				scrollTo(getOffset(props, idx, alignment, scrollOffset, (0, vue.unref)(dynamicSizeCache)));
+			};
+			const getItemStyle = (idx) => {
+				const { direction, itemSize, layout } = props;
+				const itemStyleCache = getItemStyleCache.value(clearCache && itemSize, clearCache && layout, clearCache && direction);
+				let style;
+				if ((0, _vft_utils.hasOwn)(itemStyleCache, String(idx))) style = itemStyleCache[idx];
+				else {
+					const offset = getItemOffset(props, idx, (0, vue.unref)(dynamicSizeCache));
+					const size = getItemSize(props, idx, (0, vue.unref)(dynamicSizeCache));
+					const horizontal = (0, vue.unref)(_isHorizontal);
+					const isRtl = direction === "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;
+				(0, vue.nextTick)(() => {
+					getItemStyleCache.value(-1, null, null);
+				});
+			};
+			const resetScrollTop = () => {
+				const window = windowRef.value;
+				if (window) window.scrollTop = 0;
+			};
+			(0, vue.onMounted)(() => {
+				if (!_vft_utils.isClient) return;
+				const { initScrollOffset } = props;
+				const windowElement = (0, vue.unref)(windowRef);
+				if ((0, _vft_utils.isNumber)(initScrollOffset) && windowElement) if ((0, vue.unref)(_isHorizontal)) windowElement.scrollLeft = initScrollOffset;
+				else windowElement.scrollTop = initScrollOffset;
+				emitEvents();
+			});
+			(0, vue.onUpdated)(() => {
+				const { direction, layout } = props;
+				const { scrollOffset, updateRequested } = (0, vue.unref)(states);
+				const windowElement = (0, vue.unref)(windowRef);
+				if (updateRequested && windowElement) if (layout === "horizontal") if (direction === "rtl") switch (require_utils.getRTLOffsetType()) {
+					case require_defaults.RTL_OFFSET_NAG:
+						windowElement.scrollLeft = -scrollOffset;
+						break;
+					case require_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;
+			});
+			(0, vue.onActivated)(() => {
+				(0, vue.unref)(windowRef).scrollTop = (0, 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 = (0, vue.resolveDynamicComponent)(containerElement);
+			const Inner = (0, vue.resolveDynamicComponent)(innerElement);
+			const children = [];
+			if (total > 0) for (let i = start; i <= end; i++) children.push((0, vue.h)(vue.Fragment, { key: i }, $slots.default?.({
+				data,
+				index: i,
+				isScrolling: useIsScrolling ? states.isScrolling : void 0,
+				style: getItemStyle(i)
+			})));
+			const InnerNode = [(0, vue.h)(Inner, {
+				style: innerStyle,
+				ref: "innerRef"
+			}, !(0, _vft_utils.isString)(Inner) ? { default: () => children } : children)];
+			const scrollbar = (0, vue.h)(require_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 = (0, vue.h)(Container, {
+				class: [ns.e("window"), className],
+				style: windowStyle,
+				onScroll,
+				ref: "windowRef",
+				key: 0
+			}, !(0, _vft_utils.isString)(Container) ? { default: () => [InnerNode] } : [InnerNode]);
+			return (0, vue.h)("div", {
+				key: 0,
+				class: [ns.e("wrapper"), states.scrollbarAlwaysOn ? "always-on" : ""]
+			}, [listContainer, scrollbar]);
+		}
+	});
+};
+//#endregion
+exports.default = createList;

package/lib/components/virtual-list/components/dynamic-size-grid.cjs

@@ -1,7 +1,195 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("@vueuse/core");const I=require("@vft/utils"),_=require("../../../utils/error.cjs");require("../../config-provider/hooks/use-global-config.cjs");require("vue");require("lodash-es");require("../../form/index.cjs");const h=require("../builders/build-grid.cjs"),l=require("../defaults.cjs"),{max:d,min:N,floor:z}=Math,T="ElDynamicSizeGrid",D={column:"columnWidth",row:"rowHeight"},S={column:"lastVisitedColumnIndex",row:"lastVisitedRowIndex"},a=(e,s,t,i)=>{const[n,o,r]=[t[i],e[D[i]],t[S[i]]];if(s>r){let u=0;if(r>=0){const f=n[r];u=f.offset+f.size}for(let f=r+1;f<=s;f++){const c=o(f);n[f]={offset:u,size:c},u+=c}t[S[i]]=s}return n[s]},M=(e,s,t,i,n,o)=>{for(;t<=i;){const r=t+z((i-t)/2),u=a(e,r,s,o).offset;if(u===n)return r;u<n?t=r+1:i=r-1}return d(0,t-1)},L=(e,s,t,i,n)=>{const o=n==="column"?e.totalColumn:e.totalRow;let r=1;for(;t<o&&a(e,t,s,n).offset<i;)t+=r,r*=2;return M(e,s,z(t/2),N(t,o-1),i,n)},A=(e,s,t,i)=>{const[n,o]=[s[i],s[S[i]]];return(o>0?n[o].offset:0)>=t?M(e,s,0,o,t,i):L(e,s,d(0,o),t,i)},v=({totalRow:e},{estimatedRowHeight:s,lastVisitedRowIndex:t,row:i})=>{let n=0;if(t>=e&&(t=e-1),t>=0){const u=i[t];n=u.offset+u.size}const r=(e-t-1)*s;return n+r},O=({totalColumn:e},{column:s,estimatedColumnWidth:t,lastVisitedColumnIndex:i})=>{let n=0;if(i>e&&(i=e-1),i>=0){const u=s[i];n=u.offset+u.size}const r=(e-i-1)*t;return n+r},g={column:O,row:v},w=(e,s,t,i,n,o,r)=>{const[u,f]=[o==="row"?e.height:e.width,g[o]],c=a(e,s,n,o),C=f(e,n),E=d(0,N(C-u,c.offset)),m=d(0,c.offset-u+r+c.size);switch(t===l.SMART_ALIGNMENT&&(i>=m-u&&i<=E+u?t=l.AUTO_ALIGNMENT:t=l.CENTERED_ALIGNMENT),t){case l.START_ALIGNMENT:return E;case l.END_ALIGNMENT:return m;case l.CENTERED_ALIGNMENT:return Math.round(m+(E-m)/2);case l.AUTO_ALIGNMENT:default:return i>=m&&i<=E?i:m>E||i<m?m:E}},G=h.default({name:"ElDynamicSizeGrid",getColumnPosition:(e,s,t)=>{const i=a(e,s,t,"column");return[i.size,i.offset]},getRowPosition:(e,s,t)=>{const i=a(e,s,t,"row");return[i.size,i.offset]},getColumnOffset:(e,s,t,i,n,o)=>w(e,s,t,i,n,"column",o),getRowOffset:(e,s,t,i,n,o)=>w(e,s,t,i,n,"row",o),getColumnStartIndexForOffset:(e,s,t)=>A(e,t,s,"column"),getColumnStopIndexForStartIndex:(e,s,t,i)=>{const n=a(e,s,i,"column"),o=t+e.width;let r=n.offset+n.size,u=s;for(;u<e.totalColumn-1&&r<o;)u++,r+=a(e,s,i,"column").size;return u},getEstimatedTotalHeight:v,getEstimatedTotalWidth:O,getRowStartIndexForOffset:(e,s,t)=>A(e,t,s,"row"),getRowStopIndexForStartIndex:(e,s,t,i)=>{const{totalRow:n,height:o}=e,r=a(e,s,i,"row"),u=t+o;let f=r.size+r.offset,c=s;for(;c<n-1&&f<u;)c++,f+=a(e,c,i,"row").size;return c},injectToInstance:(e,s)=>{const t=({columnIndex:o,rowIndex:r},u)=>{u=I.isUndefined(u)?!0:u,I.isNumber(o)&&(s.value.lastVisitedColumnIndex=Math.min(s.value.lastVisitedColumnIndex,o-1)),I.isNumber(r)&&(s.value.lastVisitedRowIndex=Math.min(s.value.lastVisitedRowIndex,r-1)),e.exposed?.getItemStyleCache.value(-1,null,null),u&&e.proxy?.$forceUpdate()},i=(o,r)=>{t({columnIndex:o},r)},n=(o,r)=>{t({rowIndex:o},r)};Object.assign(e.proxy,{resetAfterColumnIndex:i,resetAfterRowIndex:n,resetAfter:t})},initCache:({estimatedColumnWidth:e=l.DEFAULT_DYNAMIC_LIST_ITEM_SIZE,estimatedRowHeight:s=l.DEFAULT_DYNAMIC_LIST_ITEM_SIZE})=>({column:{},estimatedColumnWidth:e,estimatedRowHeight:s,lastVisitedColumnIndex:-1,lastVisitedRowIndex:-1,row:{}}),clearCache:!1,validateProps:({columnWidth:e,rowHeight:s})=>{process.env.NODE_ENV!=="production"&&(I.isFunction(e)||_.throwError(T,`
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_error = require("../../../utils/error.cjs");
+const require_defaults = require("../defaults.cjs");
+const require_build_grid = require("../builders/build-grid.cjs");
+let _vft_utils = require("@vft/utils");
+//#region ../../packages/components/virtual-list/components/dynamic-size-grid.ts
+const { max, min, floor } = Math;
+const SCOPE = "ElDynamicSizeGrid";
+const ACCESS_SIZER_KEY_MAP = {
+	column: "columnWidth",
+	row: "rowHeight"
+};
+const ACCESS_LAST_VISITED_KEY_MAP = {
+	column: "lastVisitedColumnIndex",
+	row: "lastVisitedRowIndex"
+};
+const getItemFromCache = (props, index, gridCache, type) => {
+	const [cachedItems, sizer, lastVisited] = [
+		gridCache[type],
+		props[ACCESS_SIZER_KEY_MAP[type]],
+		gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]]
+	];
+	if (index > lastVisited) {
+		let offset = 0;
+		if (lastVisited >= 0) {
+			const item = cachedItems[lastVisited];
+			offset = item.offset + item.size;
+		}
+		for (let i = lastVisited + 1; i <= index; i++) {
+			const size = sizer(i);
+			cachedItems[i] = {
+				offset,
+				size
+			};
+			offset += size;
+		}
+		gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]] = index;
+	}
+	return cachedItems[index];
+};
+const bs = (props, gridCache, low, high, offset, type) => {
+	while (low <= high) {
+		const mid = low + floor((high - low) / 2);
+		const currentOffset = getItemFromCache(props, mid, gridCache, type).offset;
+		if (currentOffset === offset) return mid;
+		else if (currentOffset < offset) low = mid + 1;
+		else high = mid - 1;
+	}
+	return max(0, low - 1);
+};
+const es = (props, gridCache, idx, offset, type) => {
+	const total = type === "column" ? props.totalColumn : props.totalRow;
+	let exponent = 1;
+	while (idx < total && getItemFromCache(props, idx, gridCache, type).offset < offset) {
+		idx += exponent;
+		exponent *= 2;
+	}
+	return bs(props, gridCache, floor(idx / 2), min(idx, total - 1), offset, type);
+};
+const findItem = (props, gridCache, offset, type) => {
+	const [cache, lastVisitedIndex] = [gridCache[type], gridCache[ACCESS_LAST_VISITED_KEY_MAP[type]]];
+	if ((lastVisitedIndex > 0 ? cache[lastVisitedIndex].offset : 0) >= offset) return bs(props, gridCache, 0, lastVisitedIndex, offset, type);
+	return es(props, gridCache, max(0, lastVisitedIndex), offset, type);
+};
+const getEstimatedTotalHeight = ({ totalRow }, { estimatedRowHeight, lastVisitedRowIndex, row }) => {
+	let sizeOfVisitedRows = 0;
+	if (lastVisitedRowIndex >= totalRow) lastVisitedRowIndex = totalRow - 1;
+	if (lastVisitedRowIndex >= 0) {
+		const item = row[lastVisitedRowIndex];
+		sizeOfVisitedRows = item.offset + item.size;
+	}
+	const sizeOfUnvisitedItems = (totalRow - lastVisitedRowIndex - 1) * estimatedRowHeight;
+	return sizeOfVisitedRows + sizeOfUnvisitedItems;
+};
+const getEstimatedTotalWidth = ({ totalColumn }, { column, estimatedColumnWidth, lastVisitedColumnIndex }) => {
+	let sizeOfVisitedColumns = 0;
+	if (lastVisitedColumnIndex > totalColumn) lastVisitedColumnIndex = totalColumn - 1;
+	if (lastVisitedColumnIndex >= 0) {
+		const item = column[lastVisitedColumnIndex];
+		sizeOfVisitedColumns = item.offset + item.size;
+	}
+	const sizeOfUnvisitedItems = (totalColumn - lastVisitedColumnIndex - 1) * estimatedColumnWidth;
+	return sizeOfVisitedColumns + sizeOfUnvisitedItems;
+};
+const ACCESS_ESTIMATED_SIZE_KEY_MAP = {
+	column: getEstimatedTotalWidth,
+	row: getEstimatedTotalHeight
+};
+const getOffset = (props, index, alignment, scrollOffset, cache, type, scrollBarWidth) => {
+	const [size, estimatedSizeAssociates] = [type === "row" ? props.height : props.width, ACCESS_ESTIMATED_SIZE_KEY_MAP[type]];
+	const item = getItemFromCache(props, index, cache, type);
+	const estimatedSize = estimatedSizeAssociates(props, cache);
+	const maxOffset = max(0, min(estimatedSize - size, item.offset));
+	const minOffset = max(0, item.offset - size + scrollBarWidth + item.size);
+	if (alignment === "smart") if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) alignment = require_defaults.AUTO_ALIGNMENT;
+	else alignment = require_defaults.CENTERED_ALIGNMENT;
+	switch (alignment) {
+		case require_defaults.START_ALIGNMENT: return maxOffset;
+		case "end": return minOffset;
+		case require_defaults.CENTERED_ALIGNMENT: return Math.round(minOffset + (maxOffset - minOffset) / 2);
+		case require_defaults.AUTO_ALIGNMENT:
+		default: if (scrollOffset >= minOffset && scrollOffset <= maxOffset) return scrollOffset;
+		else if (minOffset > maxOffset) return minOffset;
+		else if (scrollOffset < minOffset) return minOffset;
+		else return maxOffset;
+	}
+};
+const DynamicSizeGrid = require_build_grid.default({
+	name: "ElDynamicSizeGrid",
+	getColumnPosition: (props, idx, cache) => {
+		const item = getItemFromCache(props, idx, cache, "column");
+		return [item.size, item.offset];
+	},
+	getRowPosition: (props, idx, cache) => {
+		const item = getItemFromCache(props, idx, cache, "row");
+		return [item.size, item.offset];
+	},
+	getColumnOffset: (props, columnIndex, alignment, scrollLeft, cache, scrollBarWidth) => getOffset(props, columnIndex, alignment, scrollLeft, cache, "column", scrollBarWidth),
+	getRowOffset: (props, rowIndex, alignment, scrollTop, cache, scrollBarWidth) => getOffset(props, rowIndex, alignment, scrollTop, cache, "row", scrollBarWidth),
+	getColumnStartIndexForOffset: (props, scrollLeft, cache) => findItem(props, cache, scrollLeft, "column"),
+	getColumnStopIndexForStartIndex: (props, startIndex, scrollLeft, cache) => {
+		const item = getItemFromCache(props, startIndex, cache, "column");
+		const maxOffset = scrollLeft + props.width;
+		let offset = item.offset + item.size;
+		let stopIndex = startIndex;
+		while (stopIndex < props.totalColumn - 1 && offset < maxOffset) {
+			stopIndex++;
+			offset += getItemFromCache(props, startIndex, cache, "column").size;
+		}
+		return stopIndex;
+	},
+	getEstimatedTotalHeight,
+	getEstimatedTotalWidth,
+	getRowStartIndexForOffset: (props, scrollTop, cache) => findItem(props, cache, scrollTop, "row"),
+	getRowStopIndexForStartIndex: (props, startIndex, scrollTop, cache) => {
+		const { totalRow, height } = props;
+		const item = getItemFromCache(props, startIndex, cache, "row");
+		const maxOffset = scrollTop + height;
+		let offset = item.size + item.offset;
+		let stopIndex = startIndex;
+		while (stopIndex < totalRow - 1 && offset < maxOffset) {
+			stopIndex++;
+			offset += getItemFromCache(props, stopIndex, cache, "row").size;
+		}
+		return stopIndex;
+	},
+	injectToInstance: (instance, cache) => {
+		const resetAfter = ({ columnIndex, rowIndex }, forceUpdate) => {
+			forceUpdate = (0, _vft_utils.isUndefined)(forceUpdate) ? true : forceUpdate;
+			if ((0, _vft_utils.isNumber)(columnIndex)) cache.value.lastVisitedColumnIndex = Math.min(cache.value.lastVisitedColumnIndex, columnIndex - 1);
+			if ((0, _vft_utils.isNumber)(rowIndex)) cache.value.lastVisitedRowIndex = Math.min(cache.value.lastVisitedRowIndex, rowIndex - 1);
+			instance.exposed?.getItemStyleCache.value(-1, null, null);
+			if (forceUpdate) instance.proxy?.$forceUpdate();
+		};
+		const resetAfterColumnIndex = (columnIndex, forceUpdate) => {
+			resetAfter({ columnIndex }, forceUpdate);
+		};
+		const resetAfterRowIndex = (rowIndex, forceUpdate) => {
+			resetAfter({ rowIndex }, forceUpdate);
+		};
+		Object.assign(instance.proxy, {
+			resetAfterColumnIndex,
+			resetAfterRowIndex,
+			resetAfter
+		});
+	},
+	initCache: ({ estimatedColumnWidth = 50, estimatedRowHeight = 50 }) => {
+		return {
+			column: {},
+			estimatedColumnWidth,
+			estimatedRowHeight,
+			lastVisitedColumnIndex: -1,
+			lastVisitedRowIndex: -1,
+			row: {}
+		};
+	},
+	clearCache: false,
+	validateProps: ({ columnWidth, rowHeight }) => {
+		if (process.env.NODE_ENV !== "production") {
+			if (!(0, _vft_utils.isFunction)(columnWidth)) require_error.throwError(SCOPE, `
           "columnWidth" must be passed as function,
-            instead ${typeof e} was given.
-        `),I.isFunction(s)||_.throwError(T,`
+            instead ${typeof columnWidth} was given.
+        `);
+			if (!(0, _vft_utils.isFunction)(rowHeight)) require_error.throwError(SCOPE, `
           "rowHeight" must be passed as function,
-            instead ${typeof s} was given.
-        `))}});exports.default=G;
+            instead ${typeof rowHeight} was given.
+        `);
+		}
+	}
+});
+//#endregion
+exports.default = DynamicSizeGrid;

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

@@ -1,3 +1,127 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require("@vueuse/core");require("@vft/utils");const N=require("../../../utils/error.cjs");require("../../config-provider/hooks/use-global-config.cjs");require("vue");require("lodash-es");require("../../form/index.cjs");const S=require("../builders/build-list.cjs"),E=require("../utils.cjs"),m=require("../defaults.cjs"),T="ElDynamicSizeList",I=(t,s,e)=>{const{itemSize:i}=t,{items:r,lastVisitedIndex:n}=e;if(s>n){let a=0;if(n>=0){const o=r[n];a=o.offset+o.size}for(let o=n+1;o<=s;o++){const f=i(o);r[o]={offset:a,size:f},a+=f}e.lastVisitedIndex=s}return r[s]},h=(t,s,e)=>{const{items:i,lastVisitedIndex:r}=s;return(r>0?i[r].offset:0)>=e?z(t,s,0,r,e):_(t,s,Math.max(0,r),e)},z=(t,s,e,i,r)=>{for(;e<=i;){const n=e+Math.floor((i-e)/2),a=I(t,n,s).offset;if(a===r)return n;a<r?e=n+1:a>r&&(i=n-1)}return Math.max(0,e-1)},_=(t,s,e,i)=>{const{total:r}=t;let n=1;for(;e<r&&I(t,e,s).offset<i;)e+=n,n*=2;return z(t,s,Math.floor(e/2),Math.min(e,r-1),i)},M=({total:t},{items:s,estimatedItemSize:e,lastVisitedIndex:i})=>{let r=0;if(i>=t&&(i=t-1),i>=0){const o=s[i];r=o.offset+o.size}const a=(t-i-1)*e;return r+a},A=S.default({name:"ElDynamicSizeList",getItemOffset:(t,s,e)=>I(t,s,e).offset,getItemSize:(t,s,{items:e})=>e[s].size,getEstimatedTotalSize:M,getOffset:(t,s,e,i,r)=>{const{height:n,layout:a,width:o}=t,f=E.isHorizontal(a)?o:n,d=I(t,s,r),l=M(t,r),c=Math.max(0,Math.min(l-f,d.offset)),u=Math.max(0,d.offset-f+d.size);switch(e===m.SMART_ALIGNMENT&&(i>=u-f&&i<=c+f?e=m.AUTO_ALIGNMENT:e=m.CENTERED_ALIGNMENT),e){case m.START_ALIGNMENT:return c;case m.END_ALIGNMENT:return u;case m.CENTERED_ALIGNMENT:return Math.round(u+(c-u)/2);case m.AUTO_ALIGNMENT:default:return i>=u&&i<=c?i:i<u?u:c}},getStartIndexForOffset:(t,s,e)=>h(t,e,s),getStopIndexForStartIndex:(t,s,e,i)=>{const{height:r,total:n,layout:a,width:o}=t,f=E.isHorizontal(a)?o:r,d=I(t,s,i),l=e+f;let c=d.offset+d.size,u=s;for(;u<n-1&&c<l;)u++,c+=I(t,u,i).size;return u},initCache({estimatedItemSize:t=m.DEFAULT_DYNAMIC_LIST_ITEM_SIZE},s){const e={items:{},estimatedItemSize:t,lastVisitedIndex:-1};return e.clearCacheAfterIndex=(i,r=!0)=>{e.lastVisitedIndex=Math.min(e.lastVisitedIndex,i-1),s.exposed?.getItemStyleCache(-1),r&&s.proxy?.$forceUpdate()},e},clearCache:!1,validateProps:({itemSize:t})=>{process.env.NODE_ENV!=="production"&&typeof t!="function"&&N.throwError(T,`
-          itemSize is required as function, but the given value was ${typeof t}
-        `)}});exports.default=A;
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_error = require("../../../utils/error.cjs");
+const require_defaults = require("../defaults.cjs");
+const require_utils = require("../utils.cjs");
+const require_build_list = require("../builders/build-list.cjs");
+//#region ../../packages/components/virtual-list/components/dynamic-size-list.ts
+const SCOPE = "ElDynamicSizeList";
+const getItemFromCache = (props, index, listCache) => {
+	const { itemSize } = props;
+	const { items, lastVisitedIndex } = listCache;
+	if (index > lastVisitedIndex) {
+		let offset = 0;
+		if (lastVisitedIndex >= 0) {
+			const item = items[lastVisitedIndex];
+			offset = item.offset + item.size;
+		}
+		for (let i = lastVisitedIndex + 1; i <= index; i++) {
+			const size = itemSize(i);
+			items[i] = {
+				offset,
+				size
+			};
+			offset += size;
+		}
+		listCache.lastVisitedIndex = index;
+	}
+	return items[index];
+};
+const findItem = (props, listCache, offset) => {
+	const { items, lastVisitedIndex } = listCache;
+	if ((lastVisitedIndex > 0 ? items[lastVisitedIndex].offset : 0) >= offset) return bs(props, listCache, 0, lastVisitedIndex, offset);
+	return es(props, listCache, Math.max(0, lastVisitedIndex), offset);
+};
+const bs = (props, listCache, low, high, offset) => {
+	while (low <= high) {
+		const mid = low + Math.floor((high - low) / 2);
+		const currentOffset = getItemFromCache(props, mid, listCache).offset;
+		if (currentOffset === offset) return mid;
+		else if (currentOffset < offset) low = mid + 1;
+		else if (currentOffset > offset) high = mid - 1;
+	}
+	return Math.max(0, low - 1);
+};
+const es = (props, listCache, index, offset) => {
+	const { total } = props;
+	let exponent = 1;
+	while (index < total && getItemFromCache(props, index, listCache).offset < offset) {
+		index += exponent;
+		exponent *= 2;
+	}
+	return bs(props, listCache, Math.floor(index / 2), Math.min(index, total - 1), offset);
+};
+const getEstimatedTotalSize = ({ total }, { items, estimatedItemSize, lastVisitedIndex }) => {
+	let totalSizeOfMeasuredItems = 0;
+	if (lastVisitedIndex >= total) lastVisitedIndex = total - 1;
+	if (lastVisitedIndex >= 0) {
+		const item = items[lastVisitedIndex];
+		totalSizeOfMeasuredItems = item.offset + item.size;
+	}
+	const totalSizeOfUnmeasuredItems = (total - lastVisitedIndex - 1) * estimatedItemSize;
+	return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
+};
+const DynamicSizeList = require_build_list.default({
+	name: "ElDynamicSizeList",
+	getItemOffset: (props, index, listCache) => getItemFromCache(props, index, listCache).offset,
+	getItemSize: (_, index, { items }) => items[index].size,
+	getEstimatedTotalSize,
+	getOffset: (props, index, alignment, scrollOffset, listCache) => {
+		const { height, layout, width } = props;
+		const size = require_utils.isHorizontal(layout) ? width : height;
+		const item = getItemFromCache(props, index, listCache);
+		const estimatedTotalSize = getEstimatedTotalSize(props, listCache);
+		const maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, item.offset));
+		const minOffset = Math.max(0, item.offset - size + item.size);
+		if (alignment === "smart") if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) alignment = require_defaults.AUTO_ALIGNMENT;
+		else alignment = require_defaults.CENTERED_ALIGNMENT;
+		switch (alignment) {
+			case require_defaults.START_ALIGNMENT: return maxOffset;
+			case "end": return minOffset;
+			case require_defaults.CENTERED_ALIGNMENT: return Math.round(minOffset + (maxOffset - minOffset) / 2);
+			case require_defaults.AUTO_ALIGNMENT:
+			default: if (scrollOffset >= minOffset && scrollOffset <= maxOffset) return scrollOffset;
+			else if (scrollOffset < minOffset) return minOffset;
+			else return maxOffset;
+		}
+	},
+	getStartIndexForOffset: (props, offset, listCache) => findItem(props, listCache, offset),
+	getStopIndexForStartIndex: (props, startIndex, scrollOffset, listCache) => {
+		const { height, total, layout, width } = props;
+		const size = require_utils.isHorizontal(layout) ? width : height;
+		const item = getItemFromCache(props, startIndex, listCache);
+		const maxOffset = scrollOffset + size;
+		let offset = item.offset + item.size;
+		let stopIndex = startIndex;
+		while (stopIndex < total - 1 && offset < maxOffset) {
+			stopIndex++;
+			offset += getItemFromCache(props, stopIndex, listCache).size;
+		}
+		return stopIndex;
+	},
+	initCache({ estimatedItemSize = 50 }, instance) {
+		const cache = {
+			items: {},
+			estimatedItemSize,
+			lastVisitedIndex: -1
+		};
+		cache.clearCacheAfterIndex = (index, forceUpdate = true) => {
+			cache.lastVisitedIndex = Math.min(cache.lastVisitedIndex, index - 1);
+			instance.exposed?.getItemStyleCache(-1);
+			if (forceUpdate) instance.proxy?.$forceUpdate();
+		};
+		return cache;
+	},
+	clearCache: false,
+	validateProps: ({ itemSize }) => {
+		if (process.env.NODE_ENV !== "production") {
+			if (typeof itemSize !== "function") require_error.throwError(SCOPE, `
+          itemSize is required as function, but the given value was ${typeof itemSize}
+        `);
+		}
+	}
+});
+//#endregion
+exports.default = DynamicSizeList;