@vef-framework/components 1.0.101 → 1.0.102

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

@@ -1,234 +1,18 @@
-/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, 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`
+"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);
-`;
-const virtualItemStyle = react.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));
-`;
-const frameStyle = react.css`
+`,frameStyle=react.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;
-/*! 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,5 +1 @@
-/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, 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.101",
+  "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.101",
-    "@vef-framework/hooks": "1.0.101",
-    "@vef-framework/shared": "1.0.101",
+    "@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",