@vef-framework/components 1.0.63 → 1.0.64

package/lib/vef-table/hooks/use-display-value.cjs

@@ -1,3 +1,41 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared"),r=require("react");exports.useDisplayValue=function(i,s,t,u){const{defaultValue:o,formatter:n,prefix:l,suffix:a}=u,f=e.isNullish(i)?o:i;return r.useMemo((()=>{if(e.isFunction(n))return n(i,s,t);if(e.isExpression(n)){return e.compileDynamicFn(n,"value","record","rowIndex",`return ${n.expression}`)(i,s,t)}return e.isNullish(f)?void 0:`${l??""}${f}${a??""}`}),[n,f,l,a,i,s,t])};
+/*! 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 useDisplayValue(value, record, rowIndex, config) {
+  const {
+    defaultValue,
+    formatter,
+    prefix,
+    suffix
+  } = config;
+  const valueToUse = shared.isNullish(value) ? defaultValue : value;
+  return react.useMemo(() => {
+    if (shared.isFunction(formatter)) {
+      return formatter(value, record, rowIndex);
+    }
+    if (shared.isExpression(formatter)) {
+      const fn = shared.compileDynamicFn(formatter, "value", "record", "rowIndex", `return ${formatter.expression}`);
+      return fn(value, record, rowIndex);
+    }
+    if (shared.isNullish(valueToUse)) {
+      return;
+    }
+    return `${prefix ?? ""}${valueToUse}${suffix ?? ""}`;
+  }, [
+    formatter,
+    valueToUse,
+    prefix,
+    suffix,
+    value,
+    record,
+    rowIndex
+  ]);
+}
+
+exports.useDisplayValue = useDisplayValue;
 /*! 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/hooks/use-helper-columns.cjs

@@ -1,3 +1,72 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@emotion/react/jsx-runtime"),t=require("@vef-framework/hooks"),r=require("@vef-framework/shared"),o=require("react"),n=require("../components/columns-settings.cjs"),i=require("../components/operation-buttons.cjs"),s=require("../components/settings-icon.cjs"),u=require("./use-operation-column-width.cjs");exports.useHelperColumns=function({showRowNumber:l,operationButtons:a,maxVisibleOperationButtons:d,size:m}){const c=o.useMemo((()=>{if(l)return{key:"_rowNumber",title:"#",align:"center",fixed:"left",width:48,shouldCellUpdate:()=>!1,render:(e,t,r)=>r+1}}),[l]),p=t.useAuthorizedItems(a??[]),f=u.useOperationColumnWidth(p,d??3,m);return{rowNumberColumn:c,operationColumn:o.useMemo((()=>{if(p&&p.length>0)return{key:"_operationButtons",title:"操作",align:"center",fixed:"right",filterIcon:()=>e.jsx(s.default,{}),filterDropdown:()=>e.jsx(n.default,{}),width:f,shouldCellUpdate:(e,t)=>!r.isDeepEqual(e,t),render:(t,r,o)=>e.jsx(i.default,{maxVisibleOperationButtons:d??3,operationButtons:p,record:r,rowIndex:o})}}),[p,d,f])}};
+/*! 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 jsxRuntime = require('@emotion/react/jsx-runtime');
+const hooks = require('@vef-framework/hooks');
+const shared = require('@vef-framework/shared');
+const react = require('react');
+const columnsSettings = require('../components/columns-settings.cjs');
+const operationButtons = require('../components/operation-buttons.cjs');
+const settingsIcon = require('../components/settings-icon.cjs');
+const useOperationColumnWidth = require('./use-operation-column-width.cjs');
+
+const DEFAULT_MAX_VISIBLE_OPERATION_BUTTONS = 3;
+function useHelperColumns({
+  showRowNumber,
+  operationButtons: operationButtons$1,
+  maxVisibleOperationButtons,
+  size
+}) {
+  const rowNumberColumn = react.useMemo(() => {
+    if (showRowNumber) {
+      return {
+        key: "_rowNumber",
+        title: "#",
+        align: "center",
+        fixed: "left",
+        // rowScope: "row",
+        width: 48,
+        shouldCellUpdate: () => false,
+        render: (_, __, rowIndex) => rowIndex + 1
+      };
+    }
+  }, [showRowNumber]);
+  const authorizedOperationButtons = hooks.useAuthorizedItems(operationButtons$1 ?? []);
+  const operationColumnWidth = useOperationColumnWidth.useOperationColumnWidth(
+    authorizedOperationButtons,
+    maxVisibleOperationButtons ?? DEFAULT_MAX_VISIBLE_OPERATION_BUTTONS,
+    size
+  );
+  const operationColumn = react.useMemo(() => {
+    if (authorizedOperationButtons && authorizedOperationButtons.length > 0) {
+      return {
+        key: "_operationButtons",
+        title: "\u64CD\u4F5C",
+        align: "center",
+        fixed: "right",
+        filterIcon: () => /* @__PURE__ */ jsxRuntime.jsx(settingsIcon.default, {}),
+        filterDropdown: () => /* @__PURE__ */ jsxRuntime.jsx(columnsSettings.default, {}),
+        width: operationColumnWidth,
+        shouldCellUpdate: (record, prevRecord) => !shared.isDeepEqual(record, prevRecord),
+        render: (_, record, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+          operationButtons.default,
+          {
+            maxVisibleOperationButtons: maxVisibleOperationButtons ?? DEFAULT_MAX_VISIBLE_OPERATION_BUTTONS,
+            operationButtons: authorizedOperationButtons,
+            record,
+            rowIndex
+          }
+        )
+      };
+    }
+  }, [authorizedOperationButtons, maxVisibleOperationButtons, operationColumnWidth]);
+  return {
+    rowNumberColumn,
+    operationColumn
+  };
+}
+
+exports.useHelperColumns = useHelperColumns;
 /*! 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/hooks/use-operation-column-width.cjs

@@ -1,3 +1,55 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/hooks"),r=require("@vef-framework/shared"),t=require("react");function n(e,r,t,n){const o=r+4;return e.map((e=>{const r=e.label.length*o+8;return e.icon?r+o+8:r})).reduce(((e,r)=>e+r),0)+(n?o+8:0)+2*t}exports.useOperationColumnWidth=function(o,u,s="medium"){const{Button:a}=e.useThemeTokens(),i="large"===s?16:8,c=a?.contentFontSizeSM??16;return t.useMemo((()=>{if(0===o.length)return 0;if(o.length>u){const e=new Set;for(let t=0;t<u;t++){const t=r.max(o,(r=>e.has(r)?0:r.label.length));t&&e.add(t)}return n(Array.from(e),c,i,!0)}return n(o,c,i,!1)}),[i,c,u,o])};
+/*! 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 useOperationColumnWidth(operationButtons, maxVisibleOperationButtons, size = "medium") {
+  const { Button: buttonThemeTokens } = hooks.useThemeTokens();
+  const cellInlinePadding = size === "large" ? 16 : 8;
+  const fontSize = buttonThemeTokens?.contentFontSizeSM ?? 16;
+  return react.useMemo(() => {
+    if (operationButtons.length === 0) {
+      return 0;
+    }
+    const showMoreButton = operationButtons.length > maxVisibleOperationButtons;
+    if (showMoreButton) {
+      const longestButtons = /* @__PURE__ */ new Set();
+      for (let i = 0; i < maxVisibleOperationButtons; i++) {
+        const longestButton = shared.max(operationButtons, (button) => {
+          if (longestButtons.has(button)) {
+            return 0;
+          }
+          return button.label.length;
+        });
+        if (longestButton) {
+          longestButtons.add(longestButton);
+        }
+      }
+      return calculateButtonsWidth(Array.from(longestButtons), fontSize, cellInlinePadding, true);
+    }
+    return calculateButtonsWidth(operationButtons, fontSize, cellInlinePadding, false);
+  }, [
+    cellInlinePadding,
+    fontSize,
+    maxVisibleOperationButtons,
+    operationButtons
+  ]);
+}
+function calculateButtonsWidth(operationButtons, fontSize, cellInlinePadding, includeMoreButtonWidth) {
+  const fontWidth = fontSize + 4;
+  const buttonInlinePadding = 4 * 2;
+  return operationButtons.map((button) => {
+    const baseWidth = button.label.length * fontWidth + buttonInlinePadding;
+    if (button.icon) {
+      return baseWidth + fontWidth + 8;
+    }
+    return baseWidth;
+  }).reduce((acc, width) => acc + width, 0) + (includeMoreButtonWidth ? fontWidth + buttonInlinePadding : 0) + cellInlinePadding * 2;
+}
+
+exports.useOperationColumnWidth = useOperationColumnWidth;
 /*! 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/hooks/use-pagination-props.cjs

@@ -1,3 +1,49 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),a=require("../../vef-pagination/props.cjs");exports.usePaginationProps=function(i,s){const[t,r]=e.useState({page:1,size:a.defaultPageSizeOptions[2]}),n=e.useMemo((()=>{if(i)return(e,a)=>{r({page:e,size:a})}}),[i,r]);return{paginationProps:e.useMemo((()=>{if(i)return{pageNumber:t.page,pageSize:t.size,size:"small"===s?"small":"medium",onChange:n}}),[n,i,t.page,t.size,s]),paginationParams:t}};
+/*! 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');
+const props = require('../../vef-pagination/props.cjs');
+
+function usePaginationProps(paginated, size) {
+  const [paginationParams, setPaginationParams] = react.useState({
+    page: 1,
+    size: props.defaultPageSizeOptions[2]
+  });
+  const handlePaginationChange = react.useMemo(() => {
+    if (!paginated) {
+      return;
+    }
+    return (pageNumber, pageSize) => {
+      setPaginationParams({
+        page: pageNumber,
+        size: pageSize
+      });
+    };
+  }, [paginated, setPaginationParams]);
+  const paginationProps = react.useMemo(() => {
+    if (!paginated) {
+      return;
+    }
+    return {
+      pageNumber: paginationParams.page,
+      pageSize: paginationParams.size,
+      size: size === "small" ? "small" : "medium",
+      onChange: handlePaginationChange
+    };
+  }, [
+    handlePaginationChange,
+    paginated,
+    paginationParams.page,
+    paginationParams.size,
+    size
+  ]);
+  return {
+    paginationProps,
+    paginationParams
+  };
+}
+
+exports.usePaginationProps = usePaginationProps;
 /*! 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/hooks/use-row-props.cjs

@@ -1,3 +1,44 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useRowProps=function({enableRowClick:o=!1,enableRowClickForSelection:t=!1,onRowClick:r,disabledSelection:n,handleRowClickSelection:l}){return e.useMemo((()=>{if(o)return(e,o)=>{const i=n?.(e)??!1;return{style:{cursor:i?"not-allowed":"pointer"},onClick:i?void 0:()=>{t||r?.(e,o??-1),l?.(e)}}}}),[n,o,t,l,r])};
+/*! 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 useRowProps({
+  enableRowClick = false,
+  enableRowClickForSelection = false,
+  onRowClick,
+  disabledSelection,
+  handleRowClickSelection
+}) {
+  return react.useMemo(() => {
+    if (!enableRowClick) {
+      return;
+    }
+    return (record, index) => {
+      const disabled = disabledSelection?.(record) ?? false;
+      return {
+        style: {
+          cursor: disabled ? "not-allowed" : "pointer"
+          // backgroundColor: index! % 2 === 0 ? "#fcfcfc" : undefined,
+        },
+        onClick: disabled ? void 0 : () => {
+          if (!enableRowClickForSelection) {
+            onRowClick?.(record, index ?? -1);
+          }
+          handleRowClickSelection?.(record);
+        }
+      };
+    };
+  }, [
+    disabledSelection,
+    enableRowClick,
+    enableRowClickForSelection,
+    handleRowClickSelection,
+    onRowClick
+  ]);
+}
+
+exports.useRowProps = useRowProps;
 /*! 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/hooks/use-row-selection-config.cjs

@@ -1,3 +1,117 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared"),o=require("react"),t=require("./use-selected-rows.cjs");exports.useRowSelectionConfig=function({rowKey:c,selectedKeys:n,defaultSelectedKeys:s,selectable:l,enableRowClick:i,enableRowClickForSelection:r,multipleSelection:u=!0,showSelectAllCheckbox:d=!0,disabledSelection:a,onRowSelect:S,onRowDeselect:w,onRowSelectionChange:f}){const{selectedKeys:h,selectedRecords:R,onChange:y}=t.useSelectedRows({selectedKeys:n,defaultSelectedKeys:s,onRowSelectionChange:f}),C=o.useMemo((()=>{if(i&&r)return o=>{const t=e.isFunction(c)?c(o):o[c];if(h.includes(t)){if(!u)return;const n=h.filter((e=>e!==t)),s=R.current.filter((o=>(e.isFunction(c)?c(o):o[c])!==t));y(n,s),w?.(t,o)}else{const e=[t];u&&e.push(...h);const c=[o];u&&c.push(...R.current),y(e,c),S?.(t,o)}}}),[i,r,u,y,w,S,c,h,R]);return{rowSelectionConfig:o.useMemo((()=>{if(!l)return;return{fixed:!0,hideSelectAll:!d,preserveSelectedRowKeys:!1,selectedRowKeys:h,type:u?"checkbox":"radio",getCheckboxProps:e.isFunction(a)?e=>({disabled:a(e)}):void 0,onChange:(e,o)=>{y(e,o)},onSelect:e.isFunction(S)||e.isFunction(w)?(o,t)=>{const n=e.isFunction(c)?c(o):o[c];t?S?.(n,o):w?.(n,o)}:void 0}}),[l,d,h,u,a,S,w,y,c]),handleRowClickSelection:C,selectedKeys:h,selectedRecords:R}};
+/*! 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');
+const useSelectedRows = require('./use-selected-rows.cjs');
+
+function useRowSelectionConfig({
+  rowKey,
+  selectedKeys,
+  defaultSelectedKeys,
+  selectable,
+  enableRowClick,
+  enableRowClickForSelection,
+  multipleSelection = true,
+  showSelectAllCheckbox = true,
+  disabledSelection,
+  onRowSelect,
+  onRowDeselect,
+  onRowSelectionChange
+}) {
+  const {
+    selectedKeys: selectedKeysToUse,
+    selectedRecords,
+    onChange
+  } = useSelectedRows.useSelectedRows({
+    selectedKeys,
+    defaultSelectedKeys,
+    onRowSelectionChange
+  });
+  const handleRowClickSelection = react.useMemo(() => {
+    if (!enableRowClick || !enableRowClickForSelection) {
+      return;
+    }
+    return (record) => {
+      const key = shared.isFunction(rowKey) ? rowKey(record) : record[rowKey];
+      if (selectedKeysToUse.includes(key)) {
+        if (!multipleSelection) {
+          return;
+        }
+        const newValue = selectedKeysToUse.filter((it) => it !== key);
+        const newSelectedRows = selectedRecords.current.filter((it) => (shared.isFunction(rowKey) ? rowKey(it) : it[rowKey]) !== key);
+        onChange(newValue, newSelectedRows);
+        onRowDeselect?.(key, record);
+      } else {
+        const newValue = [key];
+        if (multipleSelection) {
+          newValue.push(...selectedKeysToUse);
+        }
+        const newSelectedRows = [record];
+        if (multipleSelection) {
+          newSelectedRows.push(...selectedRecords.current);
+        }
+        onChange(newValue, newSelectedRows);
+        onRowSelect?.(key, record);
+      }
+    };
+  }, [
+    enableRowClick,
+    enableRowClickForSelection,
+    multipleSelection,
+    onChange,
+    onRowDeselect,
+    onRowSelect,
+    rowKey,
+    selectedKeysToUse,
+    selectedRecords
+  ]);
+  const rowSelectionConfig = react.useMemo(() => {
+    if (!selectable) {
+      return;
+    }
+    const config = {
+      fixed: true,
+      hideSelectAll: !showSelectAllCheckbox,
+      preserveSelectedRowKeys: false,
+      selectedRowKeys: selectedKeysToUse,
+      type: multipleSelection ? "checkbox" : "radio",
+      getCheckboxProps: shared.isFunction(disabledSelection) ? (record) => ({
+        disabled: disabledSelection(record)
+      }) : void 0,
+      onChange: (selectedRowKeys, selectedRows) => {
+        onChange(selectedRowKeys, selectedRows);
+      },
+      onSelect: shared.isFunction(onRowSelect) || shared.isFunction(onRowDeselect) ? (record, selected) => {
+        const key = shared.isFunction(rowKey) ? rowKey(record) : record[rowKey];
+        if (selected) {
+          onRowSelect?.(key, record);
+        } else {
+          onRowDeselect?.(key, record);
+        }
+      } : void 0
+    };
+    return config;
+  }, [
+    selectable,
+    showSelectAllCheckbox,
+    selectedKeysToUse,
+    multipleSelection,
+    disabledSelection,
+    onRowSelect,
+    onRowDeselect,
+    onChange,
+    rowKey
+  ]);
+  return {
+    rowSelectionConfig,
+    handleRowClickSelection,
+    selectedKeys: selectedKeysToUse,
+    selectedRecords
+  };
+}
+
+exports.useRowSelectionConfig = useRowSelectionConfig;
 /*! 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/hooks/use-selected-rows.cjs

@@ -1,3 +1,31 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useSelectedRows=function({selectedKeys:t,defaultSelectedKeys:s,onRowSelectionChange:c}){const[o,r]=e.useState(s??[]),n=t??o,l=e.useRef([]),u=e.useCallback(((e,s)=>{t||r(e),l.current=s,c?.(e,s)}),[c,t]);return{selectedKeys:n,selectedRecords:l,onChange: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 useSelectedRows({
+  selectedKeys,
+  defaultSelectedKeys,
+  onRowSelectionChange
+}) {
+  const [internalSelectedKeys, setInternalSelectedKeys] = react.useState(defaultSelectedKeys ?? []);
+  const selectedKeysToUse = selectedKeys ?? internalSelectedKeys;
+  const selectedRecords = react.useRef([]);
+  const onChange = react.useCallback((keys, records) => {
+    if (!selectedKeys) {
+      setInternalSelectedKeys(keys);
+    }
+    selectedRecords.current = records;
+    onRowSelectionChange?.(keys, records);
+  }, [onRowSelectionChange, selectedKeys]);
+  return {
+    selectedKeys: selectedKeysToUse,
+    selectedRecords,
+    onChange
+  };
+}
+
+exports.useSelectedRows = useSelectedRows;
 /*! 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/hooks/use-table-columns.cjs

@@ -1,3 +1,61 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@emotion/react/jsx-runtime"),r=require("@vef-framework/shared"),t=require("react"),n=require("../components/columns/index.cjs");exports.useTableColumns=function(o,s,u){return t.useMemo((()=>{const t=[],i=o.map((t=>{const{title:o,show:s,sort:u,fixed:i,dependentColumnNames:a,...m}=t,d=r.isNumber(u)?{multiple:u}:!!u||void 0,l=n.columnComponents[t.type];return{key:m.name,dataIndex:m.name,title:o||m.name,fixed:i,hidden:!(s??1),sorter:d,align:m.align,width:m.width,shouldCellUpdate:(e,t)=>!r.isDeepEqual(a.map((r=>e[r])),a.map((e=>t[e]))),render:(r,t,n)=>e.jsx(l,{columnProps:m,record:t,rowIndex:n,value:r})}}));return s&&t.push(s),t.push(...i),u&&t.push(u),t}),[o,s,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 jsxRuntime = require('@emotion/react/jsx-runtime');
+const shared = require('@vef-framework/shared');
+const react = require('react');
+const index = require('../components/columns/index.cjs');
+
+function useTableColumns(columns, rowNumberColumn, operationColumn) {
+  return react.useMemo(() => {
+    const columnsToUse = [];
+    const dataColumns = columns.map((column) => {
+      const {
+        title,
+        show,
+        sort,
+        fixed,
+        dependentColumnNames,
+        ...columnProps
+      } = column;
+      const sortToUse = shared.isNumber(sort) ? { multiple: sort } : sort ?? false ? true : void 0;
+      const ColumnComponent = index.columnComponents[column.type];
+      return {
+        key: columnProps.name,
+        dataIndex: columnProps.name,
+        title: title || columnProps.name,
+        fixed,
+        hidden: !(show ?? true),
+        sorter: sortToUse,
+        align: columnProps.align,
+        width: columnProps.width,
+        shouldCellUpdate: (record, prevRecord) => !shared.isDeepEqual(
+          dependentColumnNames.map((name) => record[name]),
+          dependentColumnNames.map((name) => prevRecord[name])
+        ),
+        render: (value, record, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+          ColumnComponent,
+          {
+            columnProps,
+            record,
+            rowIndex,
+            value
+          }
+        )
+      };
+    });
+    if (rowNumberColumn) {
+      columnsToUse.push(rowNumberColumn);
+    }
+    columnsToUse.push(...dataColumns);
+    if (operationColumn) {
+      columnsToUse.push(operationColumn);
+    }
+    return columnsToUse;
+  }, [columns, rowNumberColumn, operationColumn]);
+}
+
+exports.useTableColumns = useTableColumns;
 /*! 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/hooks/use-table-context.cjs

@@ -1,3 +1,28 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared"),{useContextSelector:t,useContext:o,ContextProvider:r}=e.createSelectableContext({isFetching:!1,refetch:()=>Promise.resolve({}),selectedKeys:[],selectedRecords:[],defaultColumnConfigMap:new Map,columnConfigMap:new Map,setColumnConfigMap:e.noop,columnConfigMapHasChanged:!1}),n=t,s=o;exports.TableContextProvider=r,exports.useTableContext=s,exports.useTableContextSelector=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 {
+  useContextSelector,
+  useContext,
+  ContextProvider: TableContextProvider
+} = shared.createSelectableContext({
+  isFetching: false,
+  refetch: () => Promise.resolve({}),
+  selectedKeys: [],
+  selectedRecords: [],
+  defaultColumnConfigMap: /* @__PURE__ */ new Map(),
+  columnConfigMap: /* @__PURE__ */ new Map(),
+  setColumnConfigMap: shared.noop,
+  columnConfigMapHasChanged: false
+});
+const useTableContextSelector = useContextSelector;
+const useTableContext = useContext;
+
+exports.TableContextProvider = TableContextProvider;
+exports.useTableContext = useTableContext;
+exports.useTableContextSelector = useTableContextSelector;
 /*! 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/hooks/use-table-instance.cjs

@@ -1,3 +1,20 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useTableInstance=function(t,r,a){const n=e.useRef(null);return e.useImperativeHandle(t,(()=>({getData:()=>r,refetch:async()=>{await a()}}))),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 react = require('react');
+
+function useTableInstance(ref, data, refetch) {
+  const tableRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => ({
+    getData: () => data,
+    refetch: async () => {
+      await refetch();
+    }
+  }));
+  return tableRef;
+}
+
+exports.useTableInstance = useTableInstance;
 /*! 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/hooks/use-table-summary.cjs

@@ -1,3 +1,47 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@emotion/react/jsx-runtime"),r=require("@vef-framework/shared"),m=require("antd"),a=require("react"),{Summary:n}=m.Table,{Row:t,Cell:u}=n;exports.useTableSummary=function(m){const o=a.useMemo((()=>m.filter((e=>r.isFunction(e.summary))).map((e=>{const{name:r,summary:m,summaryColSpan:a}=e;return{name:r,summary:m,summaryColSpan:a??1}}))),[m]);return a.useMemo((()=>{if(0!==o.length)return r=>e.jsx(n,{fixed:"bottom",children:e.jsx(t,{children:o.map((({name:m,summary:a,summaryColSpan:n},t)=>e.jsx(u,{colSpan:n,index:t,children:a(r)},m)))})})}),[o])};
+/*! 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 jsxRuntime = require('@emotion/react/jsx-runtime');
+const shared = require('@vef-framework/shared');
+const antd = require('antd');
+const react = require('react');
+
+const { Summary } = antd.Table;
+const { Row, Cell } = Summary;
+function useTableSummary(columns) {
+  const summaryColumns = react.useMemo(() => columns.filter((column) => shared.isFunction(column.summary)).map((column) => {
+    const {
+      name,
+      summary,
+      summaryColSpan
+    } = column;
+    return {
+      name,
+      summary,
+      summaryColSpan: summaryColSpan ?? 1
+    };
+  }), [columns]);
+  return react.useMemo(() => {
+    if (summaryColumns.length === 0) {
+      return;
+    }
+    return (records) => /* @__PURE__ */ jsxRuntime.jsx(Summary, { fixed: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx(Row, { children: summaryColumns.map(({
+      name,
+      summary,
+      summaryColSpan
+    }, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      Cell,
+      {
+        colSpan: summaryColSpan,
+        index,
+        children: summary(records)
+      },
+      name
+    )) }) });
+  }, [summaryColumns]);
+}
+
+exports.useTableSummary = useTableSummary;
 /*! 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/hooks/use-table-width.cjs

@@ -1,3 +1,18 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useTableWidth=function(t,r){return e.useMemo((()=>{const e=t.filter((e=>!0!==e.hidden)).map((e=>e.width??e.minWidth??160)).reduce(((e,t)=>e+t),0);return r?e+40:e}),[t,r])};
+/*! 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');
+
+const defaultColumnWidth = 160;
+const selectionColumnWidth = 40;
+function useTableWidth(columns, selectable) {
+  return react.useMemo(() => {
+    const width = columns.filter((column) => column.hidden !== true).map((column) => column.width ?? column.minWidth ?? defaultColumnWidth).reduce((acc, w) => acc + w, 0);
+    return selectable ? width + selectionColumnWidth : width;
+  }, [columns, selectable]);
+}
+
+exports.useTableWidth = useTableWidth;
 /*! 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 */