@vef-framework/components 1.0.99 → 1.0.100

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

@@ -1,234 +1,20 @@
-/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
-'use strict';
-
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
-
-const jsxRuntime = require('@emotion/react/jsx-runtime');
-const react = require('@emotion/react');
-const reactVirtual = require('@tanstack/react-virtual');
-const hooks = require('@vef-framework/hooks');
-const shared = require('@vef-framework/shared');
-const react$1 = require('react');
-const index$1 = require('../vef-auto-sizer/index.cjs');
-const index = require('../vef-scroll-area/index.cjs');
-
-const viewportStyle = {
-  willChange: "transform"
-};
-const containerStyle = react.css`
+/*! 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`
   position: relative;
   width: var(--vef-virtual-list-width, auto);
   height: var(--vef-virtual-list-height, auto);
-`;
-const virtualItemStyle = react.css`
+`,m=t.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));
-`;
-const frameStyle = react.css`
+`,n=t.css`
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   transform: translateY(var(--vef-virtual-list-frame-y, 0)); 
-`;
-function VefVirtualListBase({
-  className,
-  style,
-  items,
-  renderItem,
-  itemClassName,
-  itemStyle,
-  itemSize,
-  autoItemSize = false,
-  gap = 0,
-  lanes = 1,
-  itemKey,
-  ...restProps
-}) {
-  const ListItem = react$1.useMemo(() => react$1.memo(renderItem), [renderItem]);
-  const itemKeyToUse = react$1.useMemo(() => {
-    if (shared.isFunction(itemKey)) {
-      return (index) => itemKey({
-        index,
-        item: items[index]
-      });
-    }
-  }, [itemKey, items]);
-  const itemSizeToUse = react$1.useMemo(() => {
-    if (shared.isFunction(itemSize)) {
-      return (index) => itemSize({
-        index,
-        item: items[index]
-      });
-    }
-    return () => itemSize;
-  }, [itemSize, items]);
-  const normalizedGap = hooks.useNormalizedGapSize(gap);
-  const viewportRef = react$1.useRef(null);
-  const { orientation } = restProps;
-  const virtualizer = reactVirtual.useVirtualizer({
-    horizontal: orientation === "horizontal",
-    count: items.length,
-    getScrollElement: () => viewportRef.current,
-    estimateSize: itemSizeToUse,
-    overscan: 2,
-    getItemKey: itemKeyToUse,
-    gap: normalizedGap,
-    lanes
-  });
-  const virtualItems = virtualizer.getVirtualItems();
-  const baseCrossSize = 100 / lanes;
-  const containerSizeStyle = react$1.useMemo(() => {
-    if (orientation === "horizontal") {
-      return {
-        "--vef-virtual-list-width": `${virtualizer.getTotalSize()}px`,
-        "--vef-virtual-list-height": "100%"
-      };
-    }
-    return {
-      "--vef-virtual-list-height": `${virtualizer.getTotalSize()}px`,
-      "--vef-virtual-list-width": "100%"
-    };
-  }, [orientation, virtualizer.getTotalSize()]);
-  const mergedViewportStyle = react$1.useMemo(() => {
-    if (autoItemSize && orientation !== "horizontal") {
-      return {
-        ...viewportStyle,
-        contain: "strict"
-      };
-    }
-    return viewportStyle;
-  }, [autoItemSize, orientation]);
-  const getVirtualListNode = (height, width) => {
-    if (autoItemSize) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        index.default,
-        {
-          className,
-          height,
-          scrollbarSize: "small",
-          style,
-          viewportRef,
-          viewportStyle: mergedViewportStyle,
-          width,
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: containerStyle, style: containerSizeStyle, children: orientation === "horizontal" ? virtualItems.map(
-            ({
-              index,
-              key,
-              start
-            }) => /* @__PURE__ */ 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,
-                  item: items[index]
-                })
-              },
-              key
-            )
-          ) : /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              css: frameStyle,
-              style: {
-                "--vef-virtual-list-frame-y": `${virtualItems[0]?.start ?? 0}px`
-              },
-              children: virtualItems.map(
-                ({ index, key }) => /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    ref: virtualizer.measureElement,
-                    className: itemClassName,
-                    "data-index": index,
-                    style: itemStyle,
-                    children: react$1.createElement(ListItem, {
-                      index,
-                      item: items[index]
-                    })
-                  },
-                  key
-                )
-              )
-            }
-          ) })
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      index.default,
-      {
-        className,
-        height,
-        scrollbarSize: "small",
-        style,
-        viewportRef,
-        viewportStyle: mergedViewportStyle,
-        width,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: containerStyle, style: containerSizeStyle, children: virtualItems.map(
-          ({
-            index,
-            key,
-            size,
-            start,
-            lane
-          }) => /* @__PURE__ */ 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,
-                item: items[index]
-              })
-            },
-            key
-          )
-        ) })
-      }
-    );
-  };
-  if (!restProps.autoSize) {
-    if (restProps.orientation === "horizontal") {
-      return getVirtualListNode("100%", restProps.width);
-    }
-    return getVirtualListNode(restProps.height, "100%");
-  }
-  if (restProps.orientation === "horizontal") {
-    return /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { disableHeight: true, children: ({ width }) => getVirtualListNode("100%", width) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { disableWidth: true, children: ({ height }) => getVirtualListNode(height, "100%") });
-}
-const VefVirtualList = react$1.memo(VefVirtualListBase);
-VefVirtualList.displayName = "VefVirtualList";
-
-exports.default = VefVirtualList;
+`;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 */

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

@@ -1,5 +1,3 @@
-/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
-'use strict';
-
-
+/*! 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 */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vef-framework/components",
   "type": "module",
-  "version": "1.0.99",
+  "version": "1.0.100",
   "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.99",
-    "@vef-framework/hooks": "1.0.99",
-    "@vef-framework/shared": "1.0.99",
+    "@vef-framework/core": "1.0.100",
+    "@vef-framework/hooks": "1.0.100",
+    "@vef-framework/shared": "1.0.100",
     "@xyflow/react": "^12.4.4",
     "clsx": "2.1.1",
     "dayjs": "1.11.13",