@vef-framework/components 1.0.98 → 1.0.99

package/lib/vef-table/components/columns-settings.cjs

@@ -1,17 +1,34 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),l=require("@ant-design/icons"),a=require("@emotion/react"),n=require("@vef-framework/shared"),t=require("antd"),i=require("react"),s=require("../../vef-bool/index.cjs"),r=require("../../vef-button/index.cjs"),o=require("../../vef-divider/index.cjs"),d=require("../../vef-sortable-list/index.cjs"),c=require("../../vef-text/index.cjs"),u=require("../hooks/use-table-context.cjs"),m=a.css`
+/*! 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 Icon = require('@ant-design/icons');
+const react = require('@emotion/react');
+const shared = require('@vef-framework/shared');
+const antd = require('antd');
+const react$1 = require('react');
+const index = require('../../vef-bool/index.cjs');
+const index$2 = require('../../vef-button/index.cjs');
+const index$3 = require('../../vef-divider/index.cjs');
+const index$4 = require('../../vef-sortable-list/index.cjs');
+const index$1 = require('../../vef-text/index.cjs');
+const useTableContext = require('../hooks/use-table-context.cjs');
+
+const columnsSettingsPanelStyle = react.css`
   width: 300px;
-  padding: ${n.themeVariables.paddingSm};
+  padding: ${shared.themeVariables.paddingSm};
 
   .vef-divider-horizontal {
-    margin: ${n.themeVariables.marginSm} 0;
+    margin: ${shared.themeVariables.marginSm} 0;
   }
 
   .vef-table-columns-settings-panel-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-left: ${n.themeVariables.paddingSm};
+    padding-left: ${shared.themeVariables.paddingSm};
   }
 
   .vef-table-columns-settings-panel-body {
@@ -26,17 +43,17 @@
         display: grid;
         grid-template-columns: max-content 1fr max-content;
         align-items: center;
-        padding: ${n.themeVariables.paddingXs};
-        border-radius: ${n.themeVariables.borderRadius};
+        padding: ${shared.themeVariables.paddingXs};
+        border-radius: ${shared.themeVariables.borderRadius};
 
         &:hover {
-          background-color: ${n.themeVariables.colorPrimaryBg};
+          background-color: ${shared.themeVariables.colorPrimaryBg};
         }
 
         .vef-table-columns-settings-panel-column-drag-icon {
           cursor: move;
-          color: ${n.themeVariables.colorTextSecondary};
-          padding-right: ${n.themeVariables.padding};
+          color: ${shared.themeVariables.colorTextSecondary};
+          padding-right: ${shared.themeVariables.padding};
         }
 
         .vef-table-columns-settings-panel-column-fixed-icon {
@@ -50,5 +67,176 @@
       }
     }
   }
-`;const f=i.memo((function VefColumnsSettingsBase(){const{defaultColumnConfigMap:a,columnConfigMap:n,setColumnConfigMap:f}=u.useTableContextSelector((e=>{const{defaultColumnConfigMap:l,columnConfigMap:a,setColumnConfigMap:n}=e;return{defaultColumnConfigMap:l,columnConfigMap:a,setColumnConfigMap:n}})),g=i.useMemo((()=>[...n.entries()].sort((([e,l],[a,n])=>l.order-n.order)).map((([e,l])=>{const{title:a,configurable:n,...t}=l;return{value:e,label:a,disabled:!n,...t}}))),[n]),b=i.useCallback((e=>{const l=e.reduce(((e,l,a)=>{const{value:n,label:t,disabled:i,order:s,...r}=l,o={title:t,configurable:!i,order:a+1,...r};return e.set(n,o),e}),new Map);f(l)}),[f]),p=i.useMemo((()=>g.filter((e=>e.show)).map((e=>e.value))),[g]),h=i.useMemo((()=>{const e=p.length;return e===g.length?"checked":e>0?"indeterminate":"unchecked"}),[p.length,g.length]),v=i.useCallback((e=>{const l=new Set(e),a=g.map((e=>({...e,show:l.has(e.value)})));b(a)}),[g,b]),x=i.useCallback(((e,l)=>{const a=g.map((a=>({...a,fixed:a.value===e?l:a.fixed})));b(a)}),[g,b]),C=i.useCallback((e=>{b(e)}),[b]),j=i.useCallback((()=>{f(new Map(a))}),[a,f]);return e.jsxs("div",{css:m,children:[e.jsxs("div",{className:"vef-table-columns-settings-panel-header",children:[e.jsx(s.default,{indeterminate:"indeterminate"===h,label:e.jsx(c.default,{bold:!0,children:"列显示"}),value:"checked"===h,variant:"checkbox",onChange:e=>{v(e?g.map((e=>e.value)):[])}}),e.jsx(r.default,{color:"primary",variant:"text",onClick:j,children:"重置"})]}),e.jsx(o.default,{}),e.jsx(t.Checkbox.Group,{className:"vef-table-columns-settings-panel-body",value:p,onChange:v,children:e.jsx(d.default,{useHandle:!0,className:"vef-table-columns-settings-panel-columns",handleClassName:"vef-table-columns-settings-panel-column-drag-icon",itemClassName:"vef-table-columns-settings-panel-column",itemKey:"value",items:g,useOverlay:!1,renderItem:({value:a,label:n,disabled:i,fixed:s,show:d})=>e.jsxs(e.Fragment,{children:[e.jsx(t.Checkbox,{disabled:i,value:a,children:n}),e.jsxs("span",{className:"vef-table-columns-settings-panel-column-fixed-icon",children:[e.jsx(r.default,{color:"left"===s?"primary":"default",disabled:i||!d,icon:"left"===s?e.jsx(l.RollbackOutlined,{}):e.jsx(l.VerticalRightOutlined,{}),size:"small",tip:"left"===s?"取消左侧固定":"固定到左侧",variant:"link",onClick:()=>{"left"===s?x(a):x(a,"left")}}),e.jsx(o.default,{orientation:"vertical"}),e.jsx(r.default,{color:"right"===s?"primary":"default",disabled:i||!d,icon:"right"===s?e.jsx(l.RollbackOutlined,{}):e.jsx(l.VerticalLeftOutlined,{}),size:"small",tip:"right"===s?"取消右侧固定":"固定到右侧",variant:"link",onClick:()=>{"right"===s?x(a):x(a,"right")}})]})]}),onChange:C})})]})}),(()=>!1));f.displayName="VefColumnsSettings",exports.default=f;
+`;
+function VefColumnsSettingsBase() {
+  const {
+    defaultColumnConfigMap,
+    columnConfigMap,
+    setColumnConfigMap
+  } = useTableContext.useTableContextSelector((ctx) => {
+    const {
+      defaultColumnConfigMap: defaultColumnConfigMap2,
+      columnConfigMap: columnConfigMap2,
+      setColumnConfigMap: setColumnConfigMap2
+    } = ctx;
+    return {
+      defaultColumnConfigMap: defaultColumnConfigMap2,
+      columnConfigMap: columnConfigMap2,
+      setColumnConfigMap: setColumnConfigMap2
+    };
+  });
+  const columnOptions = react$1.useMemo(() => [...columnConfigMap.entries()].sort(([_, one], [__, another]) => one.order - another.order).map(([name, column]) => {
+    const {
+      title,
+      configurable,
+      ...rest
+    } = column;
+    return {
+      value: name,
+      label: title,
+      disabled: !configurable,
+      ...rest
+    };
+  }), [columnConfigMap]);
+  const setColumnOptions = react$1.useCallback((newColumnOptions) => {
+    const newColumnConfigMap = newColumnOptions.reduce(
+      (map, option, index) => {
+        const {
+          value,
+          label,
+          disabled,
+          order,
+          ...rest
+        } = option;
+        const columnConfig = {
+          title: label,
+          configurable: !disabled,
+          order: index + 1,
+          ...rest
+        };
+        map.set(value, columnConfig);
+        return map;
+      },
+      /* @__PURE__ */ new Map()
+    );
+    setColumnConfigMap(newColumnConfigMap);
+  }, [setColumnConfigMap]);
+  const showedColumns = react$1.useMemo(() => columnOptions.filter((it) => it.show).map((it) => it.value), [columnOptions]);
+  const allCheckStatus = react$1.useMemo(() => {
+    const showedLength = showedColumns.length;
+    const totalLength = columnOptions.length;
+    return showedLength === totalLength ? "checked" : showedLength > 0 ? "indeterminate" : "unchecked";
+  }, [showedColumns.length, columnOptions.length]);
+  const handleShowedColumnsChange = react$1.useCallback((value) => {
+    const names = new Set(value);
+    const newColumnOptions = columnOptions.map((option) => ({
+      ...option,
+      show: names.has(option.value)
+    }));
+    setColumnOptions(newColumnOptions);
+  }, [columnOptions, setColumnOptions]);
+  const handleColumnFixedChange = react$1.useCallback((name, fixed) => {
+    const newColumnOptions = columnOptions.map((option) => ({
+      ...option,
+      fixed: option.value === name ? fixed : option.fixed
+    }));
+    setColumnOptions(newColumnOptions);
+  }, [columnOptions, setColumnOptions]);
+  const handleColumnOrderChange = react$1.useCallback((newColumnOptions) => {
+    setColumnOptions(newColumnOptions);
+  }, [setColumnOptions]);
+  const handleResetColumnConfig = react$1.useCallback(() => {
+    setColumnConfigMap(new Map(defaultColumnConfigMap));
+  }, [defaultColumnConfigMap, setColumnConfigMap]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: columnsSettingsPanelStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "vef-table-columns-settings-panel-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        index.default,
+        {
+          indeterminate: allCheckStatus === "indeterminate",
+          label: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { bold: true, children: "\u5217\u663E\u793A" }),
+          value: allCheckStatus === "checked",
+          variant: "checkbox",
+          onChange: (value) => {
+            handleShowedColumnsChange(value ? columnOptions.map((it) => it.value) : []);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(index$2.default, { color: "primary", variant: "text", onClick: handleResetColumnConfig, children: "\u91CD\u7F6E" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$3.default, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(antd.Checkbox.Group, { className: "vef-table-columns-settings-panel-body", value: showedColumns, onChange: handleShowedColumnsChange, children: /* @__PURE__ */ jsxRuntime.jsx(
+      index$4.default,
+      {
+        useHandle: true,
+        className: "vef-table-columns-settings-panel-columns",
+        handleClassName: "vef-table-columns-settings-panel-column-drag-icon",
+        itemClassName: "vef-table-columns-settings-panel-column",
+        itemKey: "value",
+        items: columnOptions,
+        useOverlay: false,
+        renderItem: ({
+          value,
+          label,
+          disabled,
+          fixed,
+          show
+        }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            antd.Checkbox,
+            {
+              disabled,
+              value,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "vef-table-columns-settings-panel-column-fixed-icon", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              index$2.default,
+              {
+                color: fixed === "left" ? "primary" : "default",
+                disabled: disabled || !show,
+                icon: fixed === "left" ? /* @__PURE__ */ jsxRuntime.jsx(Icon.RollbackOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(Icon.VerticalRightOutlined, {}),
+                size: "small",
+                tip: fixed === "left" ? "\u53D6\u6D88\u5DE6\u4FA7\u56FA\u5B9A" : "\u56FA\u5B9A\u5230\u5DE6\u4FA7",
+                variant: "link",
+                onClick: () => {
+                  if (fixed === "left") {
+                    handleColumnFixedChange(value);
+                  } else {
+                    handleColumnFixedChange(value, "left");
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(index$3.default, { orientation: "vertical" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              index$2.default,
+              {
+                color: fixed === "right" ? "primary" : "default",
+                disabled: disabled || !show,
+                icon: fixed === "right" ? /* @__PURE__ */ jsxRuntime.jsx(Icon.RollbackOutlined, {}) : /* @__PURE__ */ jsxRuntime.jsx(Icon.VerticalLeftOutlined, {}),
+                size: "small",
+                tip: fixed === "right" ? "\u53D6\u6D88\u53F3\u4FA7\u56FA\u5B9A" : "\u56FA\u5B9A\u5230\u53F3\u4FA7",
+                variant: "link",
+                onClick: () => {
+                  if (fixed === "right") {
+                    handleColumnFixedChange(value);
+                  } else {
+                    handleColumnFixedChange(value, "right");
+                  }
+                }
+              }
+            )
+          ] })
+        ] }),
+        onChange: handleColumnOrderChange
+      }
+    ) })
+  ] });
+}
+const VefColumnsSettings = react$1.memo(VefColumnsSettingsBase, () => false);
+VefColumnsSettings.displayName = "VefColumnsSettings";
+
+exports.default = VefColumnsSettings;
 /*! 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-table/components/operation-buttons.cjs

@@ -1,5 +1,21 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),n=require("@ant-design/icons"),t=require("@emotion/react"),o=require("@vef-framework/hooks"),i=require("@vef-framework/shared"),r=require("react"),l=require("../../vef-button/index.cjs"),s=require("../../vef-dropdown/index.cjs"),a=require("../../vef-flex/index.cjs"),c=require("../../vef-popconfirm/index.cjs"),d=require("../hooks/use-table-context.cjs"),u=t.css`
+/*! 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 Icon = require('@ant-design/icons');
+const react = require('@emotion/react');
+const hooks = require('@vef-framework/hooks');
+const shared = require('@vef-framework/shared');
+const react$1 = require('react');
+const index$1 = require('../../vef-button/index.cjs');
+const index$2 = require('../../vef-dropdown/index.cjs');
+const index = require('../../vef-flex/index.cjs');
+const index$3 = require('../../vef-popconfirm/index.cjs');
+const useTableContext = require('../hooks/use-table-context.cjs');
+
+const operationButtonStyle = react.css`
   .vef-btn-sm {
     --vef-control-height-sm: 24px;
     --vef-button-padding-inline-sm: 4px;
@@ -8,5 +24,220 @@
       padding-inline: 2px;
     }
   }
-`;exports.default=function VefOperationButtons({record:t,rowIndex:f,operationButtons:m,maxVisibleOperationButtons:x}){const{externalContext:p,refetch:b,isFetching:h,selectedKeys:C,selectedRecords:k}=d.useTableContextSelector((e=>{const{externalContext:n,refetch:t,isFetching:o,selectedKeys:i,selectedRecords:r}=e;return{externalContext:n,refetch:t,isFetching:o,selectedKeys:i,selectedRecords:r}})),y=r.useMemo((()=>({record:t,rowIndex:f,refetch:b,isFetching:h,selectedKeys:C,selectedRecords:k,...p??{}})),[p,h,t,b,f,C,k]),g=o.useComputedActionButtons(m,y),[v,j]=r.useState(!1),q=r.useMemo((()=>g.length>x?g.slice(x).map((e=>{const{key:n,label:t,icon:o,disabled:i}=e;return{type:"item",key:n,label:t,icon:o,disabled:i}})):[]),[g,x]),[M,w]=r.useState(!1),[F,O]=r.useState(null),S=r.useCallback((()=>{w(!1),O(null)}),[]),T=r.useMemo((()=>{if(0!==q.length)return async e=>{const{requireConfirmation:n,confirmationMode:t,confirmationTitle:o,confirmationContent:r,onClick:l}=g.find((n=>n.key===e)),okHandler=async()=>{try{await i.invokeMaybeAsyncFn(l,{beforeInvoke:()=>{j(!0)},onFinally:()=>{j(!1)}},y)}finally{S()}};n?"simple"===t?(O({title:o,content:r,okHandler:okHandler}),w(!0)):i.showConfirmation(o,r,okHandler,{onCancel:()=>{O(null)}}):await okHandler()}}),[g,y,S,q.length]);return e.jsxs(a.default,{align:"center",css:u,gap:"small",justify:"center",children:[g.slice(0,x).map((n=>{const{key:t,label:o,icon:i,color:r,disabled:s,requireConfirmation:a,confirmationMode:c,confirmationTitle:d,confirmationContent:u,onClick:f}=n;return a?e.jsx(l.default,{requireConfirmation:!0,color:r,confirmationContent:u,confirmationMode:c,confirmationTitle:d,disabled:s||v,icon:i,size:"small",variant:"filled",onConfirmationOk:()=>f(y),children:o},t):e.jsx(l.default,{color:r,disabled:s||v,icon:i,size:"small",variant:"filled",onClick:e=>(e.stopPropagation(),f(y)),children:o},t)})),g.length>x&&e.jsx(s.default,{disabled:v,items:q,onClick:T,children:e.jsx(c.default,{content:F?.content,disabled:v,opened:M,title:F?.title,onCancel:S,onOk:F?.okHandler,children:e.jsx(l.default,{color:"primary",disabled:v,icon:e.jsx(n.MoreOutlined,{}),loading:v,size:"small",variant:"filled",onClick:e=>e.stopPropagation()})})})]})};
+`;
+function VefOperationButtons({
+  record,
+  rowIndex,
+  operationButtons,
+  maxVisibleOperationButtons
+}) {
+  const {
+    externalContext,
+    refetch,
+    isFetching,
+    selectedKeys,
+    selectedRecords
+  } = useTableContext.useTableContextSelector(
+    (ctx) => {
+      const {
+        externalContext: externalContext2,
+        refetch: refetch2,
+        isFetching: isFetching2,
+        selectedKeys: selectedKeys2,
+        selectedRecords: selectedRecords2
+      } = ctx;
+      return {
+        externalContext: externalContext2,
+        refetch: refetch2,
+        isFetching: isFetching2,
+        selectedKeys: selectedKeys2,
+        selectedRecords: selectedRecords2
+      };
+    }
+  );
+  const buttonContext = react$1.useMemo(() => ({
+    record,
+    rowIndex,
+    refetch,
+    isFetching,
+    selectedKeys,
+    selectedRecords,
+    ...externalContext ?? {}
+  }), [
+    externalContext,
+    isFetching,
+    record,
+    refetch,
+    rowIndex,
+    selectedKeys,
+    selectedRecords
+  ]);
+  const computedButtons = hooks.useComputedActionButtons(operationButtons, buttonContext);
+  const [moreButtonLoading, setMoreButtonLoading] = react$1.useState(false);
+  const hiddenButtons = react$1.useMemo(() => {
+    if (computedButtons.length > maxVisibleOperationButtons) {
+      return computedButtons.slice(maxVisibleOperationButtons).map((button) => {
+        const {
+          key,
+          label,
+          icon,
+          disabled
+        } = button;
+        return {
+          type: "item",
+          key,
+          label,
+          icon,
+          disabled
+        };
+      });
+    }
+    return [];
+  }, [computedButtons, maxVisibleOperationButtons]);
+  const [moreButtonConfirmationOpen, setMoreButtonConfirmationOpen] = react$1.useState(false);
+  const [currentMoreButtonConfirmationInfo, setCurrentMoreButtonConfirmationInfo] = react$1.useState(null);
+  const handleMoreButtonConfirmationCancel = react$1.useCallback(() => {
+    setMoreButtonConfirmationOpen(false);
+    setCurrentMoreButtonConfirmationInfo(null);
+  }, []);
+  const handleMoreButtonClick = react$1.useMemo(() => {
+    if (hiddenButtons.length === 0) {
+      return;
+    }
+    return async (key) => {
+      const {
+        requireConfirmation,
+        confirmationMode,
+        confirmationTitle,
+        confirmationContent,
+        onClick
+      } = computedButtons.find((item) => item.key === key);
+      const okHandler = async () => {
+        try {
+          await shared.invokeMaybeAsyncFn(
+            onClick,
+            {
+              beforeInvoke: () => {
+                setMoreButtonLoading(true);
+              },
+              onFinally: () => {
+                setMoreButtonLoading(false);
+              }
+            },
+            buttonContext
+          );
+        } finally {
+          handleMoreButtonConfirmationCancel();
+        }
+      };
+      if (requireConfirmation) {
+        if (confirmationMode === "simple") {
+          setCurrentMoreButtonConfirmationInfo({
+            title: confirmationTitle,
+            content: confirmationContent,
+            okHandler
+          });
+          setMoreButtonConfirmationOpen(true);
+        } else {
+          shared.showConfirmation(
+            confirmationTitle,
+            confirmationContent,
+            okHandler,
+            {
+              onCancel: () => {
+                setCurrentMoreButtonConfirmationInfo(null);
+              }
+            }
+          );
+        }
+      } else {
+        await okHandler();
+      }
+    };
+  }, [computedButtons, buttonContext, handleMoreButtonConfirmationCancel, hiddenButtons.length]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.default, { align: "center", css: operationButtonStyle, gap: "small", justify: "center", children: [
+    computedButtons.slice(0, maxVisibleOperationButtons).map((button) => {
+      const {
+        key,
+        label,
+        icon,
+        color,
+        disabled,
+        requireConfirmation,
+        confirmationMode,
+        confirmationTitle,
+        confirmationContent,
+        onClick
+      } = button;
+      if (requireConfirmation) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          index$1.default,
+          {
+            requireConfirmation: true,
+            color,
+            confirmationContent,
+            confirmationMode,
+            confirmationTitle,
+            disabled: disabled || moreButtonLoading,
+            icon,
+            size: "small",
+            variant: "filled",
+            onConfirmationOk: () => onClick(buttonContext),
+            children: label
+          },
+          key
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        index$1.default,
+        {
+          color,
+          disabled: disabled || moreButtonLoading,
+          icon,
+          size: "small",
+          variant: "filled",
+          onClick: (event) => {
+            event.stopPropagation();
+            return onClick(buttonContext);
+          },
+          children: label
+        },
+        key
+      );
+    }),
+    computedButtons.length > maxVisibleOperationButtons && /* @__PURE__ */ jsxRuntime.jsx(
+      index$2.default,
+      {
+        disabled: moreButtonLoading,
+        items: hiddenButtons,
+        onClick: handleMoreButtonClick,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          index$3.default,
+          {
+            content: currentMoreButtonConfirmationInfo?.content,
+            disabled: moreButtonLoading,
+            opened: moreButtonConfirmationOpen,
+            title: currentMoreButtonConfirmationInfo?.title,
+            onCancel: handleMoreButtonConfirmationCancel,
+            onOk: currentMoreButtonConfirmationInfo?.okHandler,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              index$1.default,
+              {
+                color: "primary",
+                disabled: moreButtonLoading,
+                icon: /* @__PURE__ */ jsxRuntime.jsx(Icon.MoreOutlined, {}),
+                loading: moreButtonLoading,
+                size: "small",
+                variant: "filled",
+                onClick: (event) => event.stopPropagation()
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+
+exports.default = VefOperationButtons;
 /*! 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-table/components/settings-icon.cjs

@@ -1,5 +1,24 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, 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/shared"),o=require("lucide-react"),s=require("react"),i=require("../../vef-icon/index.cjs"),c=require("../hooks/use-table-context.cjs"),n=r.css`
-  color: ${t.themeVariables.colorPrimary};
-`;const u=s.memo((function VefSettingsIconBase(){const r=c.useTableContextSelector((e=>e.columnConfigMapHasChanged));return e.jsx(i.default,{css:r?n:void 0,children:e.jsx(o.SettingsIcon,{})})}),(()=>!1));exports.default=u;
+/*! 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 shared = require('@vef-framework/shared');
+const lucideReact = require('lucide-react');
+const react$1 = require('react');
+const index = require('../../vef-icon/index.cjs');
+const useTableContext = require('../hooks/use-table-context.cjs');
+
+const primaryColorStyle = react.css`
+  color: ${shared.themeVariables.colorPrimary};
+`;
+function VefSettingsIconBase() {
+  const columnConfigMapHasChanged = useTableContext.useTableContextSelector((ctx) => ctx.columnConfigMapHasChanged);
+  return /* @__PURE__ */ jsxRuntime.jsx(index.default, { css: columnConfigMapHasChanged ? primaryColorStyle : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SettingsIcon, {}) });
+}
+const VefSettingsIcon = react$1.memo(VefSettingsIconBase, () => false);
+
+exports.default = VefSettingsIcon;
 /*! 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-table/components/table-footer.cjs

@@ -1,5 +1,18 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),o=require("@emotion/react"),t=require("@vef-framework/shared"),i=require("react"),n=require("../../vef-button/index.cjs"),r=require("../../vef-pagination/index.cjs"),a=require("../../vef-text/index.cjs"),l=require("../hooks/use-table-context.cjs"),s=o.css`
+/*! 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 shared = require('@vef-framework/shared');
+const react$1 = require('react');
+const index$1 = require('../../vef-button/index.cjs');
+const index$2 = require('../../vef-pagination/index.cjs');
+const index = require('../../vef-text/index.cjs');
+const useTableContext = require('../hooks/use-table-context.cjs');
+
+const footerStyle = react.css`
   width: 100%;
   display: flex;
   align-items: center;
@@ -9,11 +22,100 @@
     flex: auto;
     display: flex;
     align-items: center;
-    gap: ${t.themeVariables.padding};
+    gap: ${shared.themeVariables.padding};
   }
 
   > .vef-pagination {
     flex: none;
   }
-`;const c=i.memo((function VefTableFooterBase({selectionSummary:o,size:c,paginationProps:d,batchActionButtons:u,batchActionButtonContext:f}){const m=l.useTableContextSelector((e=>e.selectedRecords)),b=i.useMemo((()=>{if(!1!==o)return o?o(m):m.length>0?e.jsxs(a.default,{color:"secondary",children:["已选择"," ",e.jsx(a.default,{bold:!0,color:"blue",children:m.length})," ","项"]}):void 0}),[o,m]),x=i.useMemo((()=>u.map((o=>{const{key:i,label:r,icon:a,disabled:l,color:s,requireConfirmation:c,confirmationMode:d,confirmationTitle:u,confirmationContent:m,onClick:b}=o,wrappedOnClick=async()=>{await t.invokeMaybeAsyncFn(b,{},f)};return c?e.jsx(n.default,{requireConfirmation:!0,color:s,confirmationContent:m,confirmationMode:d,confirmationTitle:u,disabled:l,icon:a,onConfirmationOk:wrappedOnClick,children:r},i):e.jsx(n.default,{color:s,disabled:l,icon:a,onClick:wrappedOnClick,children:r},i)}))),[u,f]),p=i.useMemo((()=>({"--vef-table-footer-gap":`var(--vef-table-cell-padding-block${"small"===c?"-sm":"medium"===c?"-md":""})`})),[c]);return e.jsxs("div",{css:s,style:p,children:[e.jsxs("div",{children:[b,x]}),e.jsx(r.default,{...d})]})}));c.displayName="VefTableFooter",exports.default=c;
+`;
+function VefTableFooterBase({
+  selectionSummary,
+  size,
+  paginationProps,
+  batchActionButtons,
+  batchActionButtonContext
+}) {
+  const selectedRecords = useTableContext.useTableContextSelector((ctx) => ctx.selectedRecords);
+  const selectionSummaryNode = react$1.useMemo(() => {
+    if (selectionSummary === false) {
+      return;
+    }
+    if (selectionSummary) {
+      return selectionSummary(selectedRecords);
+    }
+    if (selectedRecords.length > 0) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(index.default, { color: "secondary", children: [
+        "\u5DF2\u9009\u62E9",
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx(index.default, { bold: true, color: "blue", children: selectedRecords.length }),
+        " ",
+        "\u9879"
+      ] });
+    }
+  }, [selectionSummary, selectedRecords]);
+  const batchButtonsNode = react$1.useMemo(() => batchActionButtons.map((button) => {
+    const {
+      key,
+      label,
+      icon,
+      disabled,
+      color,
+      requireConfirmation,
+      confirmationMode,
+      confirmationTitle,
+      confirmationContent,
+      onClick
+    } = button;
+    const wrappedOnClick = async () => {
+      await shared.invokeMaybeAsyncFn(
+        onClick,
+        {},
+        batchActionButtonContext
+      );
+    };
+    if (requireConfirmation) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        index$1.default,
+        {
+          requireConfirmation: true,
+          color,
+          confirmationContent,
+          confirmationMode,
+          confirmationTitle,
+          disabled,
+          icon,
+          onConfirmationOk: wrappedOnClick,
+          children: label
+        },
+        key
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index$1.default,
+      {
+        color,
+        disabled,
+        icon,
+        onClick: wrappedOnClick,
+        children: label
+      },
+      key
+    );
+  }), [batchActionButtons, batchActionButtonContext]);
+  const style = react$1.useMemo(() => ({
+    "--vef-table-footer-gap": `var(--vef-table-cell-padding-block${size === "small" ? "-sm" : size === "medium" ? "-md" : ""})`
+  }), [size]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: footerStyle, style, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      selectionSummaryNode,
+      batchButtonsNode
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(index$2.default, { ...paginationProps })
+  ] });
+}
+const VefTableFooter = react$1.memo(VefTableFooterBase);
+VefTableFooter.displayName = "VefTableFooter";
+
+exports.default = VefTableFooter;
 /*! 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-table/helper.cjs

@@ -1,3 +1,20 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared");exports.computeValue=function computeValue(r,o,t,n,u){if(e.isFunction(r))return r(o,t,n);if(e.isExpression(r)){return e.compileDynamicFn(r,"value","record","rowIndex",`return ${r.expression}`)(o,t,n)}return r??u};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared = require('@vef-framework/shared');
+
+function computeValue(rawValue, value, record, rowIndex, defaultValue) {
+  if (shared.isFunction(rawValue)) {
+    return rawValue(value, record, rowIndex);
+  }
+  if (shared.isExpression(rawValue)) {
+    const fn = shared.compileDynamicFn(rawValue, "value", "record", "rowIndex", `return ${rawValue.expression}`);
+    return fn(value, record, rowIndex);
+  }
+  return rawValue ?? defaultValue;
+}
+
+exports.computeValue = computeValue;
 /*! 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 */