@vef-framework/components 1.0.63 → 1.0.64

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

@@ -1,20 +1,234 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, 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`
+/*! 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-list-width, auto);
   height: var(--vef-virtual-list-height, auto);
-`,m=t.css`
+`;
+const 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`
+`;
+const 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({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}),E=M.getVirtualItems(),I=100/z,T=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()]),V=r.useMemo((()=>g&&"horizontal"!==k?{...o,contain:"strict"}:o),[g,k]),R=(i,l)=>g?e.jsx(v.default,{className:t,height:i,scrollbarSize:"small",style:h,viewportRef:q,viewportStyle:V,width:l,children:e.jsx("div",{css:u,style:T,children:"horizontal"===k?E.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":`${E[0]?.start??0}px`},children:E.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:V,width:l,children:e.jsx("div",{css:u,style:T,children:E.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*I+"%","--vef-virtual-list-item-left":0,"--vef-virtual-list-item-width":`${l}px`,"--vef-virtual-list-item-height":`${I}%`,"--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*I+"%","--vef-virtual-list-item-width":`${I}%`,"--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})=>R("100%",e)}):e.jsx(s.default,{disableWidth:!0,children:({height:e})=>R(e,"100%")}):"horizontal"===S.orientation?R("100%",S.width):R(S.height,"100%")}));h.displayName="VefVirtualList",exports.default=h;
+`;
+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 */

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

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vef-framework/components",
   "type": "module",
-  "version": "1.0.63",
+  "version": "1.0.64",
   "private": false,
   "packageManager": "pnpm@9.15.0",
   "description": "Components fundamental to the VEF framework",
@@ -41,9 +41,9 @@
     "@dnd-kit/utilities": "3.2.2",
     "@radix-ui/react-scroll-area": "1.2.2",
     "@tanstack/react-virtual": "3.11.2",
-    "@vef-framework/core": "1.0.63",
-    "@vef-framework/hooks": "1.0.63",
-    "@vef-framework/shared": "1.0.63",
+    "@vef-framework/core": "1.0.64",
+    "@vef-framework/hooks": "1.0.64",
+    "@vef-framework/shared": "1.0.64",
     "clsx": "2.1.1",
     "dayjs": "1.11.13",
     "lucide-react": "0.469.0",

package/types/vef-crud-page/components/crud-filter.d.ts

@@ -27,5 +27,5 @@ export interface CrudFilterProps<Model extends ObjectType, Params extends Object
      */
     actionButtons?: Array<ActionButton<CrudContext<Model, Record, Filter, Form, Result, Schema, FormApis>>>;
 }
-declare function VefCrudFilter<Model extends ObjectType, Params extends ObjectType, Record extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form> = CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema> = CrudFormApis<Model, Record, Filter, Form, Result, Schema>>({ title, tableApi, tableApiParams, filterSchema, actionButtons, }: CrudFilterProps<Model, Params, Record, Filter, Form, Result, Schema, FormApis>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function VefCrudFilter<Model extends ObjectType, Params extends ObjectType, Record extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form> = CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema> = CrudFormApis<Model, Record, Filter, Form, Result, Schema>>({ title, tableApi, tableApiParams, filterSchema, actionButtons, }: Readonly<CrudFilterProps<Model, Params, Record, Filter, Form, Result, Schema, FormApis>>): import("@emotion/react/jsx-runtime").JSX.Element;
 export default VefCrudFilter;

package/types/vef-crud-page/components/crud-footer.d.ts

@@ -26,6 +26,6 @@ export interface VefCrudFooterProps<Model extends ObjectType, Record extends Obj
      */
     selectionSummary?: Mapper<Record[], ReactNode>;
 }
-declare function VefCrudFooterBase<Model extends ObjectType, Record extends ObjectType, Params extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema>>({ tableApi, tableApiParams, batchDeletionApi, batchActionButtons, selectionSummary, }: VefCrudFooterProps<Model, Record, Params, Filter, Form, Result, Schema, FormApis>): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare function VefCrudFooterBase<Model extends ObjectType, Record extends ObjectType, Params extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema>>({ tableApi, tableApiParams, batchDeletionApi, batchActionButtons, selectionSummary, }: Readonly<VefCrudFooterProps<Model, Record, Params, Filter, Form, Result, Schema, FormApis>>): import("@emotion/react/jsx-runtime").JSX.Element | null;
 declare const VefCrudFooter: typeof VefCrudFooterBase;
 export default VefCrudFooter;

package/types/vef-crud-page/components/crud-form-modal.d.ts

@@ -14,5 +14,5 @@ export interface CrudFormModalProps<Model extends ObjectType, Record extends Obj
      */
     formApis: CrudFormApis<Model, Record, Filter, Form, Result, Schema>;
 }
-declare function VefCrudFormModal<Model extends ObjectType, Record extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form> = CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema> = CrudFormApis<Model, Record, Filter, Form, Result, Schema>>({ formSchema, formApis, }: CrudFormModalProps<Model, Record, Filter, Form, Result, Schema, FormApis>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function VefCrudFormModal<Model extends ObjectType, Record extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form> = CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema> = CrudFormApis<Model, Record, Filter, Form, Result, Schema>>({ formSchema, formApis, }: Readonly<CrudFormModalProps<Model, Record, Filter, Form, Result, Schema, FormApis>>): import("@emotion/react/jsx-runtime").JSX.Element;
 export default VefCrudFormModal;

package/types/vef-crud-page/components/crud-header.d.ts

@@ -27,6 +27,6 @@ export interface VefCrudHeaderProps<Model extends ObjectType, Params extends Obj
      */
     actionButtons?: Array<ActionButton<CrudContext<Model, Record, Filter, Form, Result, Schema, FormApis>>>;
 }
-declare function VefCrudHeaderBase<Model extends ObjectType, Record extends ObjectType, Params extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema>>({ title, tableApi, tableApiParams, filterItems, actionButtons, }: VefCrudHeaderProps<Model, Params, Record, Filter, Form, Result, Schema, FormApis>): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare function VefCrudHeaderBase<Model extends ObjectType, Record extends ObjectType, Params extends ObjectType, Filter extends ObjectType, Form extends ObjectType, Result, Schema extends CrudSchema<Model, Record, Filter, Form>, FormApis extends CrudFormApis<Model, Record, Filter, Form, Result, Schema>>({ title, tableApi, tableApiParams, filterItems, actionButtons, }: Readonly<VefCrudHeaderProps<Model, Params, Record, Filter, Form, Result, Schema, FormApis>>): import("@emotion/react/jsx-runtime").JSX.Element | null;
 declare const VefCrudHeader: typeof VefCrudHeaderBase;
 export default VefCrudHeader;