@vef-framework/components 1.0.100 → 1.0.102

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

@@ -1,20 +1,18 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),t=require("@emotion/react"),i=require("@tanstack/react-virtual"),l=require("@vef-framework/hooks"),a=require("@vef-framework/shared"),r=require("react"),s=require("../vef-auto-sizer/index.cjs"),v=require("../vef-scroll-area/index.cjs"),o={willChange:"transform"},u=t.css`
+"use strict";/*! VefFramework version: 1.0.102, build time: 2025-03-07T16:32:57.837Z, made by Venus. */Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const jsxRuntime=require("@emotion/react/jsx-runtime"),react=require("@emotion/react"),reactVirtual=require("@tanstack/react-virtual"),hooks=require("@vef-framework/hooks"),shared=require("@vef-framework/shared"),react$1=require("react"),index$1=require("../vef-auto-sizer/index.cjs"),index=require("../vef-scroll-area/index.cjs"),viewportStyle={willChange:"transform"},containerStyle=react.css`
   position: relative;
   width: var(--vef-virtual-list-width, auto);
   height: var(--vef-virtual-list-height, auto);
-`,m=t.css`
+`,virtualItemStyle=react.css`
   position: absolute;
   top: var(--vef-virtual-list-item-top, 0);
   left: var(--vef-virtual-list-item-left, 0);
   width: var(--vef-virtual-list-item-width, auto);
   height: var(--vef-virtual-list-item-height, auto);
   transform: translateX(var(--vef-virtual-list-item-x, 0)) translateY(var(--vef-virtual-list-item-y, 0));
-`,n=t.css`
+`,frameStyle=react.css`
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   transform: translateY(var(--vef-virtual-list-frame-y, 0)); 
-`;const h=r.memo((function VefVirtualListBase({className:t,style:h,items:f,renderItem:d,itemClassName:c,itemStyle:x,itemSize:p,autoItemSize:g=!1,gap:y=0,lanes:z=1,itemKey:w,...S}){const j=r.useMemo((()=>r.memo(d)),[d]),$=r.useMemo((()=>{if(a.isFunction(w))return e=>w({index:e,item:f[e]})}),[w,f]),N=r.useMemo((()=>a.isFunction(p)?e=>p({index:e,item:f[e]}):()=>p),[p,f]),b=l.useNormalizedGapSize(y),q=r.useRef(null),{orientation:k}=S,M=i.useVirtualizer({horizontal:"horizontal"===k,count:f.length,getScrollElement:()=>q.current,estimateSize:N,overscan:2,getItemKey:$,gap:b,lanes:z}),V=M.getVirtualItems(),E=100/z,I=r.useMemo((()=>"horizontal"===k?{"--vef-virtual-list-width":`${M.getTotalSize()}px`,"--vef-virtual-list-height":"100%"}:{"--vef-virtual-list-height":`${M.getTotalSize()}px`,"--vef-virtual-list-width":"100%"}),[k,M.getTotalSize()]),T=r.useMemo((()=>g&&"horizontal"!==k?{...o,contain:"strict"}:o),[g,k]),getVirtualListNode=(i,l)=>g?e.jsx(v.default,{className:t,height:i,scrollbarSize:"small",style:h,viewportRef:q,viewportStyle:T,width:l,children:e.jsx("div",{css:u,style:I,children:"horizontal"===k?V.map((({index:t,key:i,start:l})=>e.jsx("div",{className:c,css:m,style:{"--vef-virtual-list-item-top":0,"--vef-virtual-list-item-left":0,"--vef-virtual-list-item-width":"auto","--vef-virtual-list-item-height":"100%","--vef-virtual-list-item-x":`${l}px`,"--vef-virtual-list-item-y":0},children:r.createElement(j,{index:t,item:f[t]})},i))):e.jsx("div",{css:n,style:{"--vef-virtual-list-frame-y":`${V[0]?.start??0}px`},children:V.map((({index:t,key:i})=>e.jsx("div",{ref:M.measureElement,className:c,"data-index":t,style:x,children:r.createElement(j,{index:t,item:f[t]})},i)))})})}):e.jsx(v.default,{className:t,height:i,scrollbarSize:"small",style:h,viewportRef:q,viewportStyle:T,width:l,children:e.jsx("div",{css:u,style:I,children:V.map((({index:t,key:i,size:l,start:a,lane:s})=>e.jsx("div",{className:c,css:m,style:"horizontal"===k?{"--vef-virtual-list-item-top":0===s?0:s*E+"%","--vef-virtual-list-item-left":0,"--vef-virtual-list-item-width":`${l}px`,"--vef-virtual-list-item-height":`${E}%`,"--vef-virtual-list-item-x":`${a}px`,"--vef-virtual-list-item-y":0}:{"--vef-virtual-list-item-top":0,"--vef-virtual-list-item-left":0===s?0:s*E+"%","--vef-virtual-list-item-width":`${E}%`,"--vef-virtual-list-item-height":`${l}px`,"--vef-virtual-list-item-x":0,"--vef-virtual-list-item-y":`${a}px`},children:r.createElement(j,{index:t,item:f[t]})},i)))})});return S.autoSize?"horizontal"===S.orientation?e.jsx(s.default,{disableHeight:!0,children:({width:e})=>getVirtualListNode("100%",e)}):e.jsx(s.default,{disableWidth:!0,children:({height:e})=>getVirtualListNode(e,"100%")}):"horizontal"===S.orientation?getVirtualListNode("100%",S.width):getVirtualListNode(S.height,"100%")}));h.displayName="VefVirtualList",exports.default=h;
-/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */
+`;function VefVirtualListBase({className,style,items,renderItem,itemClassName,itemStyle,itemSize,autoItemSize=!1,gap=0,lanes=1,itemKey,...restProps}){const ListItem=react$1.useMemo(()=>react$1.memo(renderItem),[renderItem]),itemKeyToUse=react$1.useMemo(()=>{if(shared.isFunction(itemKey))return index2=>itemKey({index:index2,item:items[index2]})},[itemKey,items]),itemSizeToUse=react$1.useMemo(()=>shared.isFunction(itemSize)?index2=>itemSize({index:index2,item:items[index2]}):()=>itemSize,[itemSize,items]),normalizedGap=hooks.useNormalizedGapSize(gap),viewportRef=react$1.useRef(null),{orientation}=restProps,virtualizer=reactVirtual.useVirtualizer({horizontal:orientation==="horizontal",count:items.length,getScrollElement:()=>viewportRef.current,estimateSize:itemSizeToUse,overscan:2,getItemKey:itemKeyToUse,gap:normalizedGap,lanes}),virtualItems=virtualizer.getVirtualItems(),baseCrossSize=100/lanes,containerSizeStyle=react$1.useMemo(()=>orientation==="horizontal"?{"--vef-virtual-list-width":`${virtualizer.getTotalSize()}px`,"--vef-virtual-list-height":"100%"}:{"--vef-virtual-list-height":`${virtualizer.getTotalSize()}px`,"--vef-virtual-list-width":"100%"},[orientation,virtualizer.getTotalSize()]),mergedViewportStyle=react$1.useMemo(()=>autoItemSize&&orientation!=="horizontal"?{...viewportStyle,contain:"strict"}:viewportStyle,[autoItemSize,orientation]),getVirtualListNode=(height,width)=>autoItemSize?jsxRuntime.jsx(index.default,{className,height,scrollbarSize:"small",style,viewportRef,viewportStyle:mergedViewportStyle,width,children:jsxRuntime.jsx("div",{css:containerStyle,style:containerSizeStyle,children:orientation==="horizontal"?virtualItems.map(({index:index2,key,start})=>jsxRuntime.jsx("div",{className:itemClassName,css:virtualItemStyle,style:{"--vef-virtual-list-item-top":0,"--vef-virtual-list-item-left":0,"--vef-virtual-list-item-width":"auto","--vef-virtual-list-item-height":"100%","--vef-virtual-list-item-x":`${start}px`,"--vef-virtual-list-item-y":0},children:react$1.createElement(ListItem,{index:index2,item:items[index2]})},key)):jsxRuntime.jsx("div",{css:frameStyle,style:{"--vef-virtual-list-frame-y":`${virtualItems[0]?.start??0}px`},children:virtualItems.map(({index:index2,key})=>jsxRuntime.jsx("div",{ref:virtualizer.measureElement,className:itemClassName,"data-index":index2,style:itemStyle,children:react$1.createElement(ListItem,{index:index2,item:items[index2]})},key))})})}):jsxRuntime.jsx(index.default,{className,height,scrollbarSize:"small",style,viewportRef,viewportStyle:mergedViewportStyle,width,children:jsxRuntime.jsx("div",{css:containerStyle,style:containerSizeStyle,children:virtualItems.map(({index:index2,key,size,start,lane})=>jsxRuntime.jsx("div",{className:itemClassName,css:virtualItemStyle,style:orientation==="horizontal"?{"--vef-virtual-list-item-top":lane===0?0:`${lane*baseCrossSize}%`,"--vef-virtual-list-item-left":0,"--vef-virtual-list-item-width":`${size}px`,"--vef-virtual-list-item-height":`${baseCrossSize}%`,"--vef-virtual-list-item-x":`${start}px`,"--vef-virtual-list-item-y":0}:{"--vef-virtual-list-item-top":0,"--vef-virtual-list-item-left":lane===0?0:`${lane*baseCrossSize}%`,"--vef-virtual-list-item-width":`${baseCrossSize}%`,"--vef-virtual-list-item-height":`${size}px`,"--vef-virtual-list-item-x":0,"--vef-virtual-list-item-y":`${start}px`},children:react$1.createElement(ListItem,{index:index2,item:items[index2]})},key))})});return restProps.autoSize?restProps.orientation==="horizontal"?jsxRuntime.jsx(index$1.default,{disableHeight:!0,children:({width})=>getVirtualListNode("100%",width)}):jsxRuntime.jsx(index$1.default,{disableWidth:!0,children:({height})=>getVirtualListNode(height,"100%")}):restProps.orientation==="horizontal"?getVirtualListNode("100%",restProps.width):getVirtualListNode(restProps.height,"100%")}const VefVirtualList=react$1.memo(VefVirtualListBase);VefVirtualList.displayName="VefVirtualList",exports.default=VefVirtualList;/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

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

@@ -1,3 +1 @@
-/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
-"use strict";
-/*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */
+"use strict";/*! VefFramework version: 1.0.102, build time: 2025-03-07T16:32:57.837Z, made by Venus. *//*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vef-framework/components",
   "type": "module",
-  "version": "1.0.100",
+  "version": "1.0.102",
   "private": false,
   "packageManager": "pnpm@9.15.0",
   "description": "Components fundamental to the VEF framework",
@@ -45,9 +45,9 @@
     "@radix-ui/react-scroll-area": "1.2.3",
     "@tanstack/react-table": "^8.21.2",
     "@tanstack/react-virtual": "3.13.2",
-    "@vef-framework/core": "1.0.100",
-    "@vef-framework/hooks": "1.0.100",
-    "@vef-framework/shared": "1.0.100",
+    "@vef-framework/core": "1.0.102",
+    "@vef-framework/hooks": "1.0.102",
+    "@vef-framework/shared": "1.0.102",
     "@xyflow/react": "^12.4.4",
     "clsx": "2.1.1",
     "dayjs": "1.11.13",