@vef-framework/components 1.0.101 → 1.0.102

package/es/vef-tree-select/hooks/use-data-options.js

@@ -1,46 +1 @@
-/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
-import { useComputedOptions } from '@vef-framework/hooks';
-import { isArray, isFunction, isNullish } from '@vef-framework/shared';
-import { useLayoutEffect } from 'react';
-
-function useDataOptions({
-  value,
-  multiple = false,
-  onChange,
-  ...rest
-}) {
-  const {
-    onFilterKeywordChange,
-    normalizedOptions,
-    defaultOption,
-    isLoading,
-    fallbackOptions,
-    isFallbackOptionsLoading
-  } = useComputedOptions({
-    ...rest,
-    selectedOptionValues: isArray(value) ? value : value ? [value] : []
-  });
-  useLayoutEffect(() => {
-    if (defaultOption && isFunction(onChange) && isNullish(value)) {
-      onChange(
-        multiple ? [defaultOption.value] : defaultOption.value,
-        multiple ? [defaultOption] : defaultOption
-      );
-    }
-  }, [
-    defaultOption,
-    multiple,
-    onChange,
-    value
-  ]);
-  return {
-    onFilterKeywordChange,
-    normalizedOptions,
-    isLoading,
-    fallbackOptions,
-    isFallbackOptionsLoading
-  };
-}
-
-export { useDataOptions };
-/*! 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 */
+/*! VefFramework version: 1.0.102, build time: 2025-03-07T16:32:57.836Z, made by Venus. */import{useComputedOptions}from"@vef-framework/hooks";import{isArray,isFunction,isNullish}from"@vef-framework/shared";import{useLayoutEffect}from"react";function useDataOptions({value,multiple=!1,onChange,...rest}){const{onFilterKeywordChange,normalizedOptions,defaultOption,isLoading,fallbackOptions,isFallbackOptionsLoading}=useComputedOptions({...rest,selectedOptionValues:isArray(value)?value:value?[value]:[]});return useLayoutEffect(()=>{defaultOption&&isFunction(onChange)&&isNullish(value)&&onChange(multiple?[defaultOption.value]:defaultOption.value,multiple?[defaultOption]:defaultOption)},[defaultOption,multiple,onChange,value]),{onFilterKeywordChange,normalizedOptions,isLoading,fallbackOptions,isFallbackOptionsLoading}}/*! 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 */export{useDataOptions};

package/es/vef-tree-select/hooks/use-tree-select-instance.js

@@ -1,21 +1 @@
-/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
-import { useRef, useImperativeHandle } from 'react';
-
-function useTreeSelectInstance(ref, dataOptions) {
-  const treeSelectRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    blur: () => {
-      treeSelectRef.current?.blur();
-    },
-    focus: () => {
-      treeSelectRef.current?.focus({
-        preventScroll: true
-      });
-    },
-    getDataOptions: () => dataOptions
-  }));
-  return treeSelectRef;
-}
-
-export { useTreeSelectInstance };
-/*! 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 */
+/*! VefFramework version: 1.0.102, build time: 2025-03-07T16:32:57.836Z, made by Venus. */import{useRef,useImperativeHandle}from"react";function useTreeSelectInstance(ref,dataOptions){const treeSelectRef=useRef(null);return useImperativeHandle(ref,()=>({blur:()=>{treeSelectRef.current?.blur()},focus:()=>{treeSelectRef.current?.focus({preventScroll:!0})},getDataOptions:()=>dataOptions})),treeSelectRef}/*! 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 */export{useTreeSelectInstance};

package/es/vef-tree-select/index.js

@@ -1,90 +1 @@
-/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useOptionFilter } from '@vef-framework/hooks';
-import { styles } from '@vef-framework/shared';
-import { TreeSelect } from 'antd';
-import { memo, forwardRef } from 'react';
-import '../internal/index.js';
-import VefLoadingPlaceholder from '../vef-loading-placeholder/index.js';
-import { useChangeHandler } from './hooks/use-change-handler.js';
-import { useDataOptions } from './hooks/use-data-options.js';
-import { useTreeSelectInstance } from './hooks/use-tree-select-instance.js';
-import { convertBasicSizeToUiSize } from '../internal/utils.js';
-
-const listHeight = 280;
-const loadingPlaceholder = /* @__PURE__ */ jsx("div", { css: { height: listHeight / 2 }, children: /* @__PURE__ */ jsx(VefLoadingPlaceholder, {}) });
-const treeLineOptions = { showLeafIcon: false };
-function VefTreeSelectBase({
-  defaultValue,
-  value,
-  size,
-  clearable,
-  disabled,
-  placeholder,
-  variant,
-  maxCount,
-  onClear,
-  onBlur,
-  onFocus,
-  onChange,
-  onSelect,
-  onDeselect,
-  multiple = false,
-  filterable = true,
-  filterFromRemote = false,
-  ...restProps
-}, ref) {
-  const {
-    normalizedOptions,
-    isLoading
-  } = useDataOptions({
-    value,
-    multiple,
-    onChange,
-    filterable,
-    filterFromRemote,
-    ...restProps
-  });
-  const filterTreeNode = useOptionFilter(filterable, false);
-  const handleChange = useChangeHandler(onChange, normalizedOptions);
-  const treeSelectRef = useTreeSelectInstance(ref, normalizedOptions);
-  return /* @__PURE__ */ jsx(
-    TreeSelect,
-    {
-      ref: treeSelectRef,
-      virtual: true,
-      allowClear: clearable,
-      css: styles.fullWidth,
-      defaultValue,
-      disabled,
-      filterTreeNode,
-      listHeight,
-      loading: isLoading,
-      maxCount,
-      maxTagCount: multiple ? "responsive" : void 0,
-      multiple,
-      notFoundContent: isLoading ? loadingPlaceholder : void 0,
-      placeholder,
-      showSearch: filterable,
-      size: convertBasicSizeToUiSize(size),
-      treeCheckable: multiple,
-      treeData: normalizedOptions,
-      treeLine: treeLineOptions,
-      value,
-      variant,
-      onBlur,
-      onChange: handleChange,
-      onClear,
-      onDeselect,
-      onFocus,
-      onSelect
-    }
-  );
-}
-const VefTreeSelect = memo(
-  forwardRef(VefTreeSelectBase)
-);
-VefTreeSelect.displayName = "VefTreeSelect";
-
-export { VefTreeSelect as default };
-/*! 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 */
+/*! VefFramework version: 1.0.102, build time: 2025-03-07T16:32:57.836Z, made by Venus. */import{jsx}from"@emotion/react/jsx-runtime";import{useOptionFilter}from"@vef-framework/hooks";import{styles}from"@vef-framework/shared";import{TreeSelect}from"antd";import{memo,forwardRef}from"react";import"../internal/index.js";import VefLoadingPlaceholder from"../vef-loading-placeholder/index.js";import{useChangeHandler}from"./hooks/use-change-handler.js";import{useDataOptions}from"./hooks/use-data-options.js";import{useTreeSelectInstance}from"./hooks/use-tree-select-instance.js";import{convertBasicSizeToUiSize}from"../internal/utils.js";const listHeight=280,loadingPlaceholder=jsx("div",{css:{height:listHeight/2},children:jsx(VefLoadingPlaceholder,{})}),treeLineOptions={showLeafIcon:!1};function VefTreeSelectBase({defaultValue,value,size,clearable,disabled,placeholder,variant,maxCount,onClear,onBlur,onFocus,onChange,onSelect,onDeselect,multiple=!1,filterable=!0,filterFromRemote=!1,...restProps},ref){const{normalizedOptions,isLoading}=useDataOptions({value,multiple,onChange,filterable,filterFromRemote,...restProps}),filterTreeNode=useOptionFilter(filterable,!1),handleChange=useChangeHandler(onChange,normalizedOptions),treeSelectRef=useTreeSelectInstance(ref,normalizedOptions);return jsx(TreeSelect,{ref:treeSelectRef,virtual:!0,allowClear:clearable,css:styles.fullWidth,defaultValue,disabled,filterTreeNode,listHeight,loading:isLoading,maxCount,maxTagCount:multiple?"responsive":void 0,multiple,notFoundContent:isLoading?loadingPlaceholder:void 0,placeholder,showSearch:filterable,size:convertBasicSizeToUiSize(size),treeCheckable:multiple,treeData:normalizedOptions,treeLine:treeLineOptions,value,variant,onBlur,onChange:handleChange,onClear,onDeselect,onFocus,onSelect})}const VefTreeSelect=memo(forwardRef(VefTreeSelectBase));VefTreeSelect.displayName="VefTreeSelect";/*! 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 */export{VefTreeSelect as default};

package/es/vef-virtual-grid/index.js

@@ -1,117 +1,12 @@
-/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
-import { jsx } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { useGapSizeNormalizer } from '@vef-framework/hooks';
-import { isArray, isNumber } from '@vef-framework/shared';
-import { useMemo, memo, useRef, Fragment, createElement } from 'react';
-import VefAutoSizer from '../vef-auto-sizer/index.js';
-import VefScrollArea from '../vef-scroll-area/index.js';
-
-const viewportStyle = {
-  willChange: "transform"
-};
-const containerStyle = css`
+/*! VefFramework version: 1.0.102, build time: 2025-03-07T16:32:57.836Z, made by Venus. */import{jsx}from"@emotion/react/jsx-runtime";import{css}from"@emotion/react";import{useVirtualizer}from"@tanstack/react-virtual";import{useGapSizeNormalizer}from"@vef-framework/hooks";import{isArray,isNumber}from"@vef-framework/shared";import{useMemo,memo,useRef,Fragment,createElement}from"react";import VefAutoSizer from"../vef-auto-sizer/index.js";import VefScrollArea from"../vef-scroll-area/index.js";const viewportStyle={willChange:"transform"},containerStyle=css`
   position: relative;
   width: var(--vef-virtual-grid-width);
   height: var(--vef-virtual-grid-height);
-`;
-const virtualItemStyle = css`
+`,virtualItemStyle=css`
   position: absolute;
   top: 0;
   left: 0;
   width: var(--vef-virtual-grid-item-width);
   height: var(--vef-virtual-grid-item-height);
   transform: translateX(var(--vef-virtual-grid-item-x)) translateY(var(--vef-virtual-grid-item-y));
-`;
-function VefVirtualGridBase({
-  className,
-  style,
-  items,
-  renderItem,
-  itemClassName,
-  itemStyle,
-  rowHeight,
-  columnWidth,
-  gap,
-  ...restProps
-}) {
-  const GridItem = useMemo(() => memo(renderItem), [renderItem]);
-  const viewportRef = useRef(null);
-  const normalizeGapSize = useGapSizeNormalizer();
-  const [rowGap, columnGap] = useMemo(() => {
-    if (isArray(gap)) {
-      return [normalizeGapSize(gap[0]), normalizeGapSize(gap[1])];
-    }
-    if (gap) {
-      const normalizedGap = normalizeGapSize(gap);
-      return [normalizedGap, normalizedGap];
-    }
-    return [0, 0];
-  }, [gap, normalizeGapSize]);
-  const rowVirtualizer = useVirtualizer({
-    count: items.length,
-    getScrollElement: () => viewportRef.current,
-    estimateSize: isNumber(rowHeight) ? () => rowHeight : rowHeight,
-    overscan: 2,
-    gap: rowGap
-  });
-  const columnVirtualizer = useVirtualizer({
-    horizontal: true,
-    count: items[0]?.length ?? 0,
-    getScrollElement: () => viewportRef.current,
-    estimateSize: isNumber(columnWidth) ? () => columnWidth : columnWidth,
-    overscan: 2,
-    gap: columnGap
-  });
-  const containerSizeStyle = useMemo(() => ({
-    "--vef-virtual-grid-height": `${rowVirtualizer.getTotalSize()}px`,
-    "--vef-virtual-grid-width": `${columnVirtualizer.getTotalSize()}px`
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }), [rowVirtualizer.getTotalSize(), columnVirtualizer.getTotalSize()]);
-  const getVirtualGridNode = (height, width) => /* @__PURE__ */ jsx(
-    VefScrollArea,
-    {
-      className,
-      height,
-      scrollbarSize: "small",
-      style,
-      viewportRef,
-      viewportStyle,
-      width,
-      children: /* @__PURE__ */ jsx("div", { css: containerStyle, style: containerSizeStyle, children: rowVirtualizer.getVirtualItems().map((row) => /* @__PURE__ */ jsx(Fragment, { children: columnVirtualizer.getVirtualItems().map((item) => {
-        const itemData = items[row.index][item.index];
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: itemClassName,
-            css: virtualItemStyle,
-            style: {
-              ...itemStyle,
-              "--vef-virtual-grid-item-width": `${item.size}px`,
-              "--vef-virtual-grid-item-height": `${row.size}px`,
-              "--vef-virtual-grid-item-x": `${item.start}px`,
-              "--vef-virtual-grid-item-y": `${row.start}px`
-            },
-            children: itemData && createElement(GridItem, {
-              item: itemData,
-              rowIndex: row.index,
-              columnIndex: item.index
-            })
-          },
-          item.key
-        );
-      }) }, row.key)) })
-    }
-  );
-  if (!restProps.autoSize) {
-    const { height, width } = restProps;
-    return getVirtualGridNode(height, width);
-  }
-  return /* @__PURE__ */ jsx(VefAutoSizer, { children: ({ height, width }) => getVirtualGridNode(height, width) });
-}
-const VefVirtualGrid = memo(VefVirtualGridBase);
-VefVirtualGrid.displayName = "VefVirtualGrid";
-
-export { VefVirtualGrid as default };
-/*! 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 VefVirtualGridBase({className,style,items,renderItem,itemClassName,itemStyle,rowHeight,columnWidth,gap,...restProps}){const GridItem=useMemo(()=>memo(renderItem),[renderItem]),viewportRef=useRef(null),normalizeGapSize=useGapSizeNormalizer(),[rowGap,columnGap]=useMemo(()=>{if(isArray(gap))return[normalizeGapSize(gap[0]),normalizeGapSize(gap[1])];if(gap){const normalizedGap=normalizeGapSize(gap);return[normalizedGap,normalizedGap]}return[0,0]},[gap,normalizeGapSize]),rowVirtualizer=useVirtualizer({count:items.length,getScrollElement:()=>viewportRef.current,estimateSize:isNumber(rowHeight)?()=>rowHeight:rowHeight,overscan:2,gap:rowGap}),columnVirtualizer=useVirtualizer({horizontal:!0,count:items[0]?.length??0,getScrollElement:()=>viewportRef.current,estimateSize:isNumber(columnWidth)?()=>columnWidth:columnWidth,overscan:2,gap:columnGap}),containerSizeStyle=useMemo(()=>({"--vef-virtual-grid-height":`${rowVirtualizer.getTotalSize()}px`,"--vef-virtual-grid-width":`${columnVirtualizer.getTotalSize()}px`}),[rowVirtualizer.getTotalSize(),columnVirtualizer.getTotalSize()]),getVirtualGridNode=(height,width)=>jsx(VefScrollArea,{className,height,scrollbarSize:"small",style,viewportRef,viewportStyle,width,children:jsx("div",{css:containerStyle,style:containerSizeStyle,children:rowVirtualizer.getVirtualItems().map(row=>jsx(Fragment,{children:columnVirtualizer.getVirtualItems().map(item=>{const itemData=items[row.index][item.index];return jsx("div",{className:itemClassName,css:virtualItemStyle,style:{...itemStyle,"--vef-virtual-grid-item-width":`${item.size}px`,"--vef-virtual-grid-item-height":`${row.size}px`,"--vef-virtual-grid-item-x":`${item.start}px`,"--vef-virtual-grid-item-y":`${row.start}px`},children:itemData&&createElement(GridItem,{item:itemData,rowIndex:row.index,columnIndex:item.index})},item.key)})},row.key))})});if(!restProps.autoSize){const{height,width}=restProps;return getVirtualGridNode(height,width)}return jsx(VefAutoSizer,{children:({height,width})=>getVirtualGridNode(height,width)})}const VefVirtualGrid=memo(VefVirtualGridBase);VefVirtualGrid.displayName="VefVirtualGrid";/*! 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 */export{VefVirtualGrid as default};

package/es/vef-virtual-list/index.js

@@ -1,230 +1,18 @@
-/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, made by Venus. */
-import { jsx } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { useNormalizedGapSize } from '@vef-framework/hooks';
-import { isFunction } from '@vef-framework/shared';
-import { useMemo, memo, useRef, createElement } from 'react';
-import VefAutoSizer from '../vef-auto-sizer/index.js';
-import VefScrollArea from '../vef-scroll-area/index.js';
-
-const viewportStyle = {
-  willChange: "transform"
-};
-const containerStyle = css`
+/*! VefFramework version: 1.0.102, build time: 2025-03-07T16:32:57.836Z, made by Venus. */import{jsx}from"@emotion/react/jsx-runtime";import{css}from"@emotion/react";import{useVirtualizer}from"@tanstack/react-virtual";import{useNormalizedGapSize}from"@vef-framework/hooks";import{isFunction}from"@vef-framework/shared";import{useMemo,memo,useRef,createElement}from"react";import VefAutoSizer from"../vef-auto-sizer/index.js";import VefScrollArea from"../vef-scroll-area/index.js";const viewportStyle={willChange:"transform"},containerStyle=css`
   position: relative;
   width: var(--vef-virtual-list-width, auto);
   height: var(--vef-virtual-list-height, auto);
-`;
-const virtualItemStyle = css`
+`,virtualItemStyle=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 = css`
+`,frameStyle=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 = useMemo(() => memo(renderItem), [renderItem]);
-  const itemKeyToUse = useMemo(() => {
-    if (isFunction(itemKey)) {
-      return (index) => itemKey({
-        index,
-        item: items[index]
-      });
-    }
-  }, [itemKey, items]);
-  const itemSizeToUse = useMemo(() => {
-    if (isFunction(itemSize)) {
-      return (index) => itemSize({
-        index,
-        item: items[index]
-      });
-    }
-    return () => itemSize;
-  }, [itemSize, items]);
-  const normalizedGap = useNormalizedGapSize(gap);
-  const viewportRef = useRef(null);
-  const { orientation } = restProps;
-  const virtualizer = 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 = 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 = useMemo(() => {
-    if (autoItemSize && orientation !== "horizontal") {
-      return {
-        ...viewportStyle,
-        contain: "strict"
-      };
-    }
-    return viewportStyle;
-  }, [autoItemSize, orientation]);
-  const getVirtualListNode = (height, width) => {
-    if (autoItemSize) {
-      return /* @__PURE__ */ jsx(
-        VefScrollArea,
-        {
-          className,
-          height,
-          scrollbarSize: "small",
-          style,
-          viewportRef,
-          viewportStyle: mergedViewportStyle,
-          width,
-          children: /* @__PURE__ */ jsx("div", { css: containerStyle, style: containerSizeStyle, children: orientation === "horizontal" ? virtualItems.map(
-            ({
-              index,
-              key,
-              start
-            }) => /* @__PURE__ */ 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: createElement(ListItem, {
-                  index,
-                  item: items[index]
-                })
-              },
-              key
-            )
-          ) : /* @__PURE__ */ jsx(
-            "div",
-            {
-              css: frameStyle,
-              style: {
-                "--vef-virtual-list-frame-y": `${virtualItems[0]?.start ?? 0}px`
-              },
-              children: virtualItems.map(
-                ({ index, key }) => /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    ref: virtualizer.measureElement,
-                    className: itemClassName,
-                    "data-index": index,
-                    style: itemStyle,
-                    children: createElement(ListItem, {
-                      index,
-                      item: items[index]
-                    })
-                  },
-                  key
-                )
-              )
-            }
-          ) })
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      VefScrollArea,
-      {
-        className,
-        height,
-        scrollbarSize: "small",
-        style,
-        viewportRef,
-        viewportStyle: mergedViewportStyle,
-        width,
-        children: /* @__PURE__ */ jsx("div", { css: containerStyle, style: containerSizeStyle, children: virtualItems.map(
-          ({
-            index,
-            key,
-            size,
-            start,
-            lane
-          }) => /* @__PURE__ */ 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: 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__ */ jsx(VefAutoSizer, { disableHeight: true, children: ({ width }) => getVirtualListNode("100%", width) });
-  }
-  return /* @__PURE__ */ jsx(VefAutoSizer, { disableWidth: true, children: ({ height }) => getVirtualListNode(height, "100%") });
-}
-const VefVirtualList = memo(VefVirtualListBase);
-VefVirtualList.displayName = "VefVirtualList";
-
-export { VefVirtualList as default };
-/*! 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=useMemo(()=>memo(renderItem),[renderItem]),itemKeyToUse=useMemo(()=>{if(isFunction(itemKey))return index=>itemKey({index,item:items[index]})},[itemKey,items]),itemSizeToUse=useMemo(()=>isFunction(itemSize)?index=>itemSize({index,item:items[index]}):()=>itemSize,[itemSize,items]),normalizedGap=useNormalizedGapSize(gap),viewportRef=useRef(null),{orientation}=restProps,virtualizer=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=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=useMemo(()=>autoItemSize&&orientation!=="horizontal"?{...viewportStyle,contain:"strict"}:viewportStyle,[autoItemSize,orientation]),getVirtualListNode=(height,width)=>autoItemSize?jsx(VefScrollArea,{className,height,scrollbarSize:"small",style,viewportRef,viewportStyle:mergedViewportStyle,width,children:jsx("div",{css:containerStyle,style:containerSizeStyle,children:orientation==="horizontal"?virtualItems.map(({index,key,start})=>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:createElement(ListItem,{index,item:items[index]})},key)):jsx("div",{css:frameStyle,style:{"--vef-virtual-list-frame-y":`${virtualItems[0]?.start??0}px`},children:virtualItems.map(({index,key})=>jsx("div",{ref:virtualizer.measureElement,className:itemClassName,"data-index":index,style:itemStyle,children:createElement(ListItem,{index,item:items[index]})},key))})})}):jsx(VefScrollArea,{className,height,scrollbarSize:"small",style,viewportRef,viewportStyle:mergedViewportStyle,width,children:jsx("div",{css:containerStyle,style:containerSizeStyle,children:virtualItems.map(({index,key,size,start,lane})=>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:createElement(ListItem,{index,item:items[index]})},key))})});return restProps.autoSize?restProps.orientation==="horizontal"?jsx(VefAutoSizer,{disableHeight:!0,children:({width})=>getVirtualListNode("100%",width)}):jsx(VefAutoSizer,{disableWidth:!0,children:({height})=>getVirtualListNode(height,"100%")}):restProps.orientation==="horizontal"?getVirtualListNode("100%",restProps.width):getVirtualListNode(restProps.height,"100%")}const VefVirtualList=memo(VefVirtualListBase);VefVirtualList.displayName="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 */export{VefVirtualList as default};