@vef-framework/components 1.0.62 → 1.0.64

package/lib/vef-title/index.cjs

@@ -1,15 +1,101 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@emotion/react"),t=require("@vef-framework/hooks"),i=require("@vef-framework/shared"),o=require("antd"),s=require("react"),a=require("../vef-divider/index.cjs"),{Title:l}=o.Typography,n=r.css`
-  margin: ${i.themeVariables.marginSm} 0 ${i.themeVariables.marginLg};
-`,c=r.css`
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, 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 hooks = require('@vef-framework/hooks');
+const shared = require('@vef-framework/shared');
+const antd = require('antd');
+const react$1 = require('react');
+const index = require('../vef-divider/index.cjs');
+
+const { Title } = antd.Typography;
+const dividerStyle = react.css`
+  margin: ${shared.themeVariables.marginSm} 0 ${shared.themeVariables.marginLg};
+`;
+const leftBarStyle = react.css`
   &::before {
     content: "";
     display: inline-block;
     width: 6px;
     height: var(--vef-title-left-bar-height);
     border-radius: 3px;
-    background: linear-gradient(to top, ${i.themeVariables.colorPrimary}, ${i.themeVariables.blue5});
-    margin-right: ${i.themeVariables.paddingSm};
+    background: linear-gradient(to top, ${shared.themeVariables.colorPrimary}, ${shared.themeVariables.blue5});
+    margin-right: ${shared.themeVariables.paddingSm};
   }
-`;exports.default=function({showLeftBar:r,showBottomLine:i,noPaddingBottom:o,variant:u,color:d,ellipsis:h,ellipsisTip:m,...g}){const{level:f=1}=g,p=s.useMemo((()=>{if(h)return{tooltip:m??g.children}}),[h,m,g.children]),b=t.useColorTokens(),v=s.useMemo((()=>{const e={};if("secondary"===d)e.type="secondary";else{const t=[];d&&t.push({color:b.get(d)}),r&&t.push(c),e.css=t}return u&&(e[u]=!0),r&&(e.style={"--vef-title-left-bar-height":`calc(var(--vef-font-size-heading-${f}) * 0.8)`}),o&&(e.style={...e.style,"--vef-typography-title-margin-bottom":0}),e}),[d,u,r,b,f,o]);return e.jsxs(e.Fragment,{children:[e.jsx(l,{ellipsis:p,...v,...g}),i&&e.jsx(a.default,{css:n})]})};
+`;
+function VefTitle({
+  showLeftBar,
+  showBottomLine,
+  noPaddingBottom,
+  variant,
+  color,
+  ellipsis,
+  ellipsisTip,
+  ...restProps
+}) {
+  const { level = 1 } = restProps;
+  const ellipsisConfig = react$1.useMemo(() => {
+    if (ellipsis) {
+      return {
+        tooltip: ellipsisTip ?? restProps.children
+      };
+    }
+  }, [ellipsis, ellipsisTip, restProps.children]);
+  const colorTokens = hooks.useColorTokens();
+  const styleProps = react$1.useMemo(() => {
+    const props = {};
+    if (color === "secondary") {
+      props.type = "secondary";
+    } else {
+      const css2 = [];
+      if (color) {
+        css2.push({
+          color: colorTokens.get(color)
+        });
+      }
+      if (showLeftBar) {
+        css2.push(leftBarStyle);
+      }
+      props.css = css2;
+    }
+    if (variant) {
+      props[variant] = true;
+    }
+    if (showLeftBar) {
+      props.style = {
+        "--vef-title-left-bar-height": `calc(var(--vef-font-size-heading-${level}) * 0.8)`
+      };
+    }
+    if (noPaddingBottom) {
+      props.style = {
+        ...props.style,
+        "--vef-typography-title-margin-bottom": 0
+      };
+    }
+    return props;
+  }, [
+    color,
+    variant,
+    showLeftBar,
+    colorTokens,
+    level,
+    noPaddingBottom
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Title,
+      {
+        ellipsis: ellipsisConfig,
+        ...styleProps,
+        ...restProps
+      }
+    ),
+    showBottomLine && /* @__PURE__ */ jsxRuntime.jsx(index.default, { css: dividerStyle })
+  ] });
+}
+
+exports.default = VefTitle;
 /*! 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-title/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, 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/lib/vef-tooltip/index.cjs

@@ -1,3 +1,40 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("antd"),t=require("react"),n=t.forwardRef((({content:n,trigger:o="hover",arrow:a=!0,delay:l=.1,defaultOpened:u,opened:i,onOpenedChange:d,...s},p)=>{const f=t.useRef(null);return t.useImperativeHandle(p,(()=>f.current.nativeElement)),e.jsx(r.Tooltip,{ref:f,arrow:a,defaultOpen:u,mouseEnterDelay:l,open:i,title:n,trigger:o,onOpenChange:d,...s})}));n.displayName="VefTooltip",exports.default=n;
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const antd = require('antd');
+const react = require('react');
+
+const VefTooltip = react.forwardRef(({
+  content,
+  trigger = "hover",
+  arrow = true,
+  delay = 0.1,
+  defaultOpened,
+  opened,
+  onOpenedChange,
+  ...restProps
+}, ref) => {
+  const tooltipRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => tooltipRef.current.nativeElement);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Tooltip,
+    {
+      ref: tooltipRef,
+      arrow,
+      defaultOpen: defaultOpened,
+      mouseEnterDelay: delay,
+      open: opened,
+      title: content,
+      trigger,
+      onOpenChange: onOpenedChange,
+      ...restProps
+    }
+  );
+});
+VefTooltip.displayName = "VefTooltip";
+
+exports.default = VefTooltip;
 /*! 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-tooltip/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, 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/lib/vef-tree-select/hooks/use-change-handler.cjs

@@ -1,3 +1,38 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared"),r=require("react");exports.useChangeHandler=function(t,u){const n=r.useMemo((()=>u.reduce(((e,r)=>(e.set(r.value,r),e)),new Map)),[u]);return r.useMemo((()=>{if(e.isFunction(t))return r=>{r?e.isArray(r)?t(r,r.map((e=>n.get(e)))):t(r,n.get(r)):t(null,null)}}),[t,n])};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared = require('@vef-framework/shared');
+const react = require('react');
+
+function useChangeHandler(onChange, options) {
+  const optionsMap = react.useMemo(() => options.reduce((map, option) => {
+    map.set(option.value, option);
+    return map;
+  }, /* @__PURE__ */ new Map()), [options]);
+  return react.useMemo(() => {
+    if (shared.isFunction(onChange)) {
+      return (value) => {
+        if (!value) {
+          onChange(null, null);
+          return;
+        }
+        if (shared.isArray(value)) {
+          onChange(
+            value,
+            value.map((it) => optionsMap.get(it))
+          );
+        } else {
+          onChange(
+            value,
+            optionsMap.get(value)
+          );
+        }
+      };
+    }
+  }, [onChange, optionsMap]);
+}
+
+exports.useChangeHandler = useChangeHandler;
 /*! 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-tree-select/hooks/use-data-options.cjs

@@ -1,3 +1,50 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/hooks"),o=require("@vef-framework/shared"),i=require("react");exports.useDataOptions=function({value:t,multiple:a=!1,onChange:n,...s}){const{onFilterKeywordChange:r,normalizedOptions:l,defaultOption:u,isLoading:p,fallbackOptions:d,isFallbackOptionsLoading:c}=e.useComputedOptions({...s,selectedOptionValues:o.isArray(t)?t:t?[t]:[]});return i.useLayoutEffect((()=>{u&&o.isFunction(n)&&o.isNullish(t)&&n(a?[u.value]:u.value,a?[u]:u)}),[u,a,n,t]),{onFilterKeywordChange:r,normalizedOptions:l,isLoading:p,fallbackOptions:d,isFallbackOptionsLoading:c}};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const hooks = require('@vef-framework/hooks');
+const shared = require('@vef-framework/shared');
+const react = require('react');
+
+function useDataOptions({
+  value,
+  multiple = false,
+  onChange,
+  ...rest
+}) {
+  const {
+    onFilterKeywordChange,
+    normalizedOptions,
+    defaultOption,
+    isLoading,
+    fallbackOptions,
+    isFallbackOptionsLoading
+  } = hooks.useComputedOptions({
+    ...rest,
+    selectedOptionValues: shared.isArray(value) ? value : value ? [value] : []
+  });
+  react.useLayoutEffect(() => {
+    if (defaultOption && shared.isFunction(onChange) && shared.isNullish(value)) {
+      onChange(
+        multiple ? [defaultOption.value] : defaultOption.value,
+        multiple ? [defaultOption] : defaultOption
+      );
+    }
+  }, [
+    defaultOption,
+    multiple,
+    onChange,
+    value
+  ]);
+  return {
+    onFilterKeywordChange,
+    normalizedOptions,
+    isLoading,
+    fallbackOptions,
+    isFallbackOptionsLoading
+  };
+}
+
+exports.useDataOptions = 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 */

package/lib/vef-tree-select/hooks/use-tree-select-instance.cjs

@@ -1,3 +1,25 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useTreeSelectInstance=function(t,r){const u=e.useRef(null);return e.useImperativeHandle(t,(()=>({blur:()=>{u.current?.blur()},focus:()=>{u.current?.focus({preventScroll:!0})},getDataOptions:()=>r}))),u};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react = require('react');
+
+function useTreeSelectInstance(ref, dataOptions) {
+  const treeSelectRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => ({
+    blur: () => {
+      treeSelectRef.current?.blur();
+    },
+    focus: () => {
+      treeSelectRef.current?.focus({
+        preventScroll: true
+      });
+    },
+    getDataOptions: () => dataOptions
+  }));
+  return treeSelectRef;
+}
+
+exports.useTreeSelectInstance = 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 */

package/lib/vef-tree-select/index.cjs

@@ -1,3 +1,91 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@vef-framework/hooks"),o=require("@vef-framework/shared"),t=require("antd"),l=require("react");require("../internal/index.cjs");const a=require("../vef-loading-placeholder/index.cjs"),i=require("./hooks/use-change-handler.cjs"),n=require("./hooks/use-data-options.cjs"),s=require("./hooks/use-tree-select-instance.cjs"),u=require("../internal/utils.cjs"),c=e.jsx("div",{css:{height:140},children:e.jsx(a.default,{})}),d={showLeafIcon:!1};const h=l.memo(l.forwardRef((function({defaultValue:l,value:a,size:h,clearable:f,disabled:m,placeholder:p,variant:v,onClear:g,onBlur:j,onFocus:q,onChange:C,onSelect:S,onDeselect:x,multiple:b=!1,filterable:k=!0,filterFromRemote:T=!1,...w},F){const{normalizedOptions:z,isLoading:D}=n.useDataOptions({value:a,multiple:b,onChange:C,filterable:k,filterFromRemote:T,...w}),O=r.useOptionFilter(k,!1),y=i.useChangeHandler(C,z),B=s.useTreeSelectInstance(F,z);return e.jsx(t.TreeSelect,{ref:B,allowClear:f,css:o.styles.fullWidth,defaultValue:l,disabled:m,filterTreeNode:O,listHeight:280,loading:D,maxTagCount:b?"responsive":void 0,multiple:b,notFoundContent:D?c:void 0,placeholder:p,showSearch:k,size:u.convertBasicSizeToUiSize(h),treeCheckable:b,treeData:z,treeLine:d,value:a,variant:v,onBlur:j,onChange:y,onClear:g,onDeselect:x,onFocus:q,onSelect:S})})));h.displayName="VefTreeSelect",exports.default=h;
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const hooks = require('@vef-framework/hooks');
+const shared = require('@vef-framework/shared');
+const antd = require('antd');
+const react = require('react');
+require('../internal/index.cjs');
+const index = require('../vef-loading-placeholder/index.cjs');
+const useChangeHandler = require('./hooks/use-change-handler.cjs');
+const useDataOptions = require('./hooks/use-data-options.cjs');
+const useTreeSelectInstance = require('./hooks/use-tree-select-instance.cjs');
+const utils = require('../internal/utils.cjs');
+
+const listHeight = 280;
+const loadingPlaceholder = /* @__PURE__ */ jsxRuntime.jsx("div", { css: { height: listHeight / 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(index.default, {}) });
+const treeLineOptions = { showLeafIcon: false };
+function VefTreeSelectBase({
+  defaultValue,
+  value,
+  size,
+  clearable,
+  disabled,
+  placeholder,
+  variant,
+  onClear,
+  onBlur,
+  onFocus,
+  onChange,
+  onSelect,
+  onDeselect,
+  multiple = false,
+  filterable = true,
+  filterFromRemote = false,
+  ...restProps
+}, ref) {
+  const {
+    normalizedOptions,
+    isLoading
+  } = useDataOptions.useDataOptions({
+    value,
+    multiple,
+    onChange,
+    filterable,
+    filterFromRemote,
+    ...restProps
+  });
+  const filterTreeNode = hooks.useOptionFilter(filterable, false);
+  const handleChange = useChangeHandler.useChangeHandler(onChange, normalizedOptions);
+  const treeSelectRef = useTreeSelectInstance.useTreeSelectInstance(ref, normalizedOptions);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.TreeSelect,
+    {
+      ref: treeSelectRef,
+      allowClear: clearable,
+      css: shared.styles.fullWidth,
+      defaultValue,
+      disabled,
+      filterTreeNode,
+      listHeight,
+      loading: isLoading,
+      maxTagCount: multiple ? "responsive" : void 0,
+      multiple,
+      notFoundContent: isLoading ? loadingPlaceholder : void 0,
+      placeholder,
+      showSearch: filterable,
+      size: utils.convertBasicSizeToUiSize(size),
+      treeCheckable: multiple,
+      treeData: normalizedOptions,
+      treeLine: treeLineOptions,
+      value,
+      variant,
+      onBlur,
+      onChange: handleChange,
+      onClear,
+      onDeselect,
+      onFocus,
+      onSelect
+    }
+  );
+}
+const VefTreeSelect = react.memo(
+  react.forwardRef(VefTreeSelectBase)
+);
+VefTreeSelect.displayName = "VefTreeSelect";
+
+exports.default = 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 */

package/lib/vef-tree-select/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, 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/lib/vef-virtual-grid/index.cjs

@@ -1,14 +1,121 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, 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"),r=require("@vef-framework/hooks"),a=require("@vef-framework/shared"),s=require("react"),l=require("../vef-auto-sizer/index.cjs"),u=require("../vef-scroll-area/index.cjs"),o={willChange:"transform"},n=t.css`
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, 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`
   position: relative;
   width: var(--vef-virtual-grid-width);
   height: var(--vef-virtual-grid-height);
-`,m=t.css`
+`;
+const virtualItemStyle = react.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));
-`;const d=s.memo((function({className:t,style:d,items:v,renderItem:c,itemClassName:h,itemStyle:g,rowHeight:f,columnWidth:x,gap:p,...w}){const z=s.useMemo((()=>s.memo(c)),[c]),S=s.useRef(null),y=r.useGapSizeNormalizer(),[j,q]=s.useMemo((()=>{if(a.isArray(p))return[y(p[0]),y(p[1])];if(p){const e=y(p);return[e,e]}return[0,0]}),[p,y]),N=i.useVirtualizer({count:v.length,getScrollElement:()=>S.current,estimateSize:a.isNumber(f)?()=>f:f,overscan:2,gap:j}),b=i.useVirtualizer({horizontal:!0,count:v[0]?.length??0,getScrollElement:()=>S.current,estimateSize:a.isNumber(x)?()=>x:x,overscan:2,gap:q}),k=s.useMemo((()=>({"--vef-virtual-grid-height":`${N.getTotalSize()}px`,"--vef-virtual-grid-width":`${b.getTotalSize()}px`})),[N.getTotalSize(),b.getTotalSize()]),V=(i,r)=>e.jsx(u.default,{className:t,height:i,scrollbarSize:"small",style:d,viewportRef:S,viewportStyle:o,width:r,children:e.jsx("div",{css:n,style:k,children:N.getVirtualItems().map((t=>e.jsx(s.Fragment,{children:b.getVirtualItems().map((i=>{const r=v[t.index][i.index];return e.jsx("div",{className:h,css:m,style:{...g,"--vef-virtual-grid-item-width":`${i.size}px`,"--vef-virtual-grid-item-height":`${t.size}px`,"--vef-virtual-grid-item-x":`${i.start}px`,"--vef-virtual-grid-item-y":`${t.start}px`},children:r&&s.createElement(z,{item:r,rowIndex:t.index,columnIndex:i.index})},i.key)}))},t.key)))})});if(!w.autoSize){const{height:e,width:t}=w;return V(e,t)}return e.jsx(l.default,{children:({height:e,width:t})=>V(e,t)})}));d.displayName="VefVirtualGrid",exports.default=d;
+`;
+function VefVirtualGridBase({
+  className,
+  style,
+  items,
+  renderItem,
+  itemClassName,
+  itemStyle,
+  rowHeight,
+  columnWidth,
+  gap,
+  ...restProps
+}) {
+  const GridItem = react$1.useMemo(() => react$1.memo(renderItem), [renderItem]);
+  const viewportRef = react$1.useRef(null);
+  const normalizeGapSize = hooks.useGapSizeNormalizer();
+  const [rowGap, columnGap] = react$1.useMemo(() => {
+    if (shared.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 = reactVirtual.useVirtualizer({
+    count: items.length,
+    getScrollElement: () => viewportRef.current,
+    estimateSize: shared.isNumber(rowHeight) ? () => rowHeight : rowHeight,
+    overscan: 2,
+    gap: rowGap
+  });
+  const columnVirtualizer = reactVirtual.useVirtualizer({
+    horizontal: true,
+    count: items[0]?.length ?? 0,
+    getScrollElement: () => viewportRef.current,
+    estimateSize: shared.isNumber(columnWidth) ? () => columnWidth : columnWidth,
+    overscan: 2,
+    gap: columnGap
+  });
+  const containerSizeStyle = react$1.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__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      className,
+      height,
+      scrollbarSize: "small",
+      style,
+      viewportRef,
+      viewportStyle,
+      width,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: containerStyle, style: containerSizeStyle, children: rowVirtualizer.getVirtualItems().map((row) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Fragment, { children: columnVirtualizer.getVirtualItems().map((item) => {
+        const itemData = items[row.index][item.index];
+        return /* @__PURE__ */ jsxRuntime.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 && react$1.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__ */ jsxRuntime.jsx(index$1.default, { children: ({ height, width }) => getVirtualGridNode(height, width) });
+}
+const VefVirtualGrid = react$1.memo(VefVirtualGridBase);
+VefVirtualGrid.displayName = "VefVirtualGrid";
+
+exports.default = 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 */

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

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, 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 */