@vef-framework/components 1.0.98 → 1.0.99

package/es/vef-table/hooks/use-computed-batch-buttons.js

@@ -1,3 +1,34 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{useComputedActionButtons as t}from"@vef-framework/hooks";import{useMemo as e}from"react";function useComputedBatchActionButtons(o,c){const{externalContext:n,isFetching:s,refetch:r,selectedKeys:i,selectedRecords:u}=c,d=e((()=>({isFetching:s,refetch:r,selectedKeys:i,selectedRecords:u,...n??{}})),[n,s,r,i,u]);return{computedBatchActionButtons:t(o,d),batchActionButtonContext:d}}export{useComputedBatchActionButtons};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { useComputedActionButtons } from '@vef-framework/hooks';
+import { useMemo } from 'react';
+
+function useComputedBatchActionButtons(batchActionButtons, tableContext) {
+  const {
+    externalContext,
+    isFetching,
+    refetch,
+    selectedKeys,
+    selectedRecords
+  } = tableContext;
+  const batchActionButtonContext = useMemo(() => ({
+    isFetching,
+    refetch,
+    selectedKeys,
+    selectedRecords,
+    ...externalContext ?? {}
+  }), [
+    externalContext,
+    isFetching,
+    refetch,
+    selectedKeys,
+    selectedRecords
+  ]);
+  const computedBatchActionButtons = useComputedActionButtons(batchActionButtons, batchActionButtonContext);
+  return {
+    computedBatchActionButtons,
+    batchActionButtonContext
+  };
+}
+
+export { useComputedBatchActionButtons };
 /*! 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/es/vef-table/hooks/use-computed-columns.js

@@ -1,3 +1,21 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{useMemo as e}from"react";function useComputedColumns(o,r){return e((()=>o.map((e=>{const{name:o}=e,t=r.get(o);return{...e,show:t.show,fixed:t.fixed}})).sort(((e,o)=>r.get(e.name).order-r.get(o.name).order))),[o,r])}export{useComputedColumns};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { useMemo } from 'react';
+
+function useComputedColumns(columns, columnConfigMap) {
+  return useMemo(() => columns.map(
+    (column) => {
+      const { name } = column;
+      const config = columnConfigMap.get(name);
+      return {
+        ...column,
+        show: config.show,
+        fixed: config.fixed
+      };
+    }
+  ).sort(
+    (one, another) => columnConfigMap.get(one.name).order - columnConfigMap.get(another.name).order
+  ), [columns, columnConfigMap]);
+}
+
+export { useComputedColumns };
 /*! 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/es/vef-table/hooks/use-computed-values.js

@@ -1,3 +1,39 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{useDeepMemo as e}from"@vef-framework/hooks";import{computeValue as r}from"../helper.js";function useComputedValues(u,o,t,a,m=!1){const s=e((()=>u.reduce(((e,u)=>{const{key:m,rawValue:s,defaultValue:p}=u,f=r(s,o,t,a,p);return e[m]=f,e}),{})),[t,a,o,u]);return m?u.reduce(((e,{key:r})=>(e[r]=s[r],e)),{}):u.map((({key:e})=>s[e]))}export{useComputedValues};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { useDeepMemo } from '@vef-framework/hooks';
+import { computeValue } from '../helper.js';
+
+function useComputedValues(values, value, record, rowIndex, returnAsObject = false) {
+  const computedValues = useDeepMemo(
+    () => values.reduce((acc, it) => {
+      const {
+        key,
+        rawValue,
+        defaultValue
+      } = it;
+      const computedValue = computeValue(rawValue, value, record, rowIndex, defaultValue);
+      acc[key] = computedValue;
+      return acc;
+    }, {}),
+    [
+      record,
+      rowIndex,
+      value,
+      values
+    ]
+  );
+  if (returnAsObject) {
+    return values.reduce(
+      (acc, { key }) => {
+        acc[key] = computedValues[key];
+        return acc;
+      },
+      {}
+    );
+  }
+  return values.map(
+    ({ key }) => computedValues[key]
+  );
+}
+
+export { useComputedValues };
 /*! 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/es/vef-table/hooks/use-data.js

@@ -1,3 +1,58 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{useDataQuery as e}from"@vef-framework/hooks";import{isShallowEqual as a,isNumber as t,isArray as r}from"@vef-framework/shared";import{useRef as i}from"react";function useData({apiParams:o,...s},n,f){const h=i(),{data:m,isLoading:d,isFetching:p,isSuccess:l,refetch:c}=e({apiParams:n?{...f,page:a(h.current,o)?f.page:1,...o}:o,keepPreviousData:!0,staleTime:0,...s});if(h.current=o,l)if(n){if(!Object.hasOwn(m,"total")||!Object.hasOwn(m,"items"))throw new Error("The paginated data of VefTable is invalid. The data must contain the `total` and `items` properties. Please check the data.");if(!t(m.total))throw new Error("The `total` property of the paginated data of VefTable is invalid. It must be a number.");if(!r(m.items))throw new Error("The `items` property of the paginated data of VefTable is invalid. It must be an array.")}else if(!r(m))throw new Error("The data of VefTable is invalid. It must be an array.");return{data:n?m?.items:m,isFetching:p,isLoading:d,total:n?m?.total:void 0,refetch:c}}export{useData};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { useDataQuery } from '@vef-framework/hooks';
+import { isShallowEqual, isNumber, isArray } from '@vef-framework/shared';
+import { useRef } from 'react';
+
+function useData({ apiParams, ...queryConfig }, paginated, paginationParams) {
+  const lastApiParamsRef = useRef();
+  const {
+    data,
+    isLoading,
+    isFetching,
+    isSuccess,
+    refetch
+  } = useDataQuery({
+    apiParams: paginated ? {
+      ...paginationParams,
+      page: isShallowEqual(lastApiParamsRef.current, apiParams) ? paginationParams.page : 1,
+      ...apiParams
+    } : apiParams,
+    keepPreviousData: true,
+    staleTime: 0,
+    ...queryConfig
+  });
+  lastApiParamsRef.current = apiParams;
+  if (isSuccess) {
+    if (paginated) {
+      if (!Object.hasOwn(data, "total") || !Object.hasOwn(data, "items")) {
+        throw new Error(
+          "The paginated data of VefTable is invalid. The data must contain the `total` and `items` properties. Please check the data."
+        );
+      }
+      if (!isNumber(data.total)) {
+        throw new Error(
+          "The `total` property of the paginated data of VefTable is invalid. It must be a number."
+        );
+      }
+      if (!isArray(data.items)) {
+        throw new Error(
+          "The `items` property of the paginated data of VefTable is invalid. It must be an array."
+        );
+      }
+    } else {
+      if (!isArray(data)) {
+        throw new Error("The data of VefTable is invalid. It must be an array.");
+      }
+    }
+  }
+  return {
+    data: paginated ? data?.items : data,
+    isFetching,
+    isLoading,
+    total: paginated ? data?.total : void 0,
+    refetch
+  };
+}
+
+export { useData };
 /*! 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/es/vef-table/hooks/use-default-column-configs.js

@@ -1,3 +1,28 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{useMemo as e}from"react";function useDefaultColumnConfigs(o){return e((()=>{const e=new Map;let t=1;for(const n of o){const{name:o,title:r,fixed:f,configurable:u}=n;e.set(o,{title:r??o,show:!0,fixed:f,order:t++,configurable:u??!0})}return e}),[o])}export{useDefaultColumnConfigs};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { useMemo } from 'react';
+
+function useDefaultColumnConfigs(columns) {
+  return useMemo(() => {
+    const columnConfigs = /* @__PURE__ */ new Map();
+    let currentOrder = 1;
+    for (const column of columns) {
+      const {
+        name,
+        title,
+        fixed,
+        configurable
+      } = column;
+      columnConfigs.set(name, {
+        title: title ?? name,
+        show: true,
+        fixed,
+        order: currentOrder++,
+        configurable: configurable ?? true
+      });
+    }
+    return columnConfigs;
+  }, [columns]);
+}
+
+export { useDefaultColumnConfigs };
 /*! 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/es/vef-table/hooks/use-display-value.js

@@ -1,3 +1,37 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{isNullish as r,isFunction as e,isExpression as t,compileDynamicFn as u}from"@vef-framework/shared";import{useMemo as o}from"react";function useDisplayValue(f,a,i,n){const{defaultValue:s,formatter:l,prefix:p,suffix:m}=n,d=r(f)?s:f;return o((()=>{if(e(l))return l(f,a,i);if(t(l)){return u(l,"value","record","rowIndex",`return ${l.expression}`)(f,a,i)}return r(d)?void 0:`${p??""}${d}${m??""}`}),[l,d,p,m,f,a,i])}export{useDisplayValue};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { isNullish, isFunction, isExpression, compileDynamicFn } from '@vef-framework/shared';
+import { useMemo } from 'react';
+
+function useDisplayValue(value, record, rowIndex, config) {
+  const {
+    defaultValue,
+    formatter,
+    prefix,
+    suffix
+  } = config;
+  const valueToUse = isNullish(value) ? defaultValue : value;
+  return useMemo(() => {
+    if (isFunction(formatter)) {
+      return formatter(value, record, rowIndex);
+    }
+    if (isExpression(formatter)) {
+      const fn = compileDynamicFn(formatter, "value", "record", "rowIndex", `return ${formatter.expression}`);
+      return fn(value, record, rowIndex);
+    }
+    if (isNullish(valueToUse)) {
+      return;
+    }
+    return `${prefix ?? ""}${valueToUse}${suffix ?? ""}`;
+  }, [
+    formatter,
+    valueToUse,
+    prefix,
+    suffix,
+    value,
+    record,
+    rowIndex
+  ]);
+}
+
+export { 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/es/vef-table/hooks/use-helper-columns.js

@@ -1,3 +1,68 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{jsx as o}from"@emotion/react/jsx-runtime";import{useAuthorizedItems as e}from"@vef-framework/hooks";import{isDeepEqual as t}from"@vef-framework/shared";import{useMemo as r}from"react";import n from"../components/columns-settings.js";import i from"../components/operation-buttons.js";import m from"../components/settings-icon.js";import{useOperationColumnWidth as s}from"./use-operation-column-width.js";function useHelperColumns({showRowNumber:p,operationButtons:u,maxVisibleOperationButtons:l,size:f}){const a=r((()=>{if(p)return{key:"_rowNumber",title:"#",align:"center",fixed:"left",width:48,shouldCellUpdate:()=>!1,render:(o,e,t)=>t+1}}),[p]),d=e(u??[]),c=s(d,l??3,f);return{rowNumberColumn:a,operationColumn:r((()=>{if(d&&d.length>0)return{key:"_operationButtons",title:"操作",align:"center",fixed:"right",filterIcon:()=>o(m,{}),filterDropdown:()=>o(n,{}),width:c,shouldCellUpdate:(o,e)=>!t(o,e),render:(e,t,r)=>o(i,{maxVisibleOperationButtons:l??3,operationButtons:d,record:t,rowIndex:r})}}),[d,l,c])}}export{useHelperColumns};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useAuthorizedItems } from '@vef-framework/hooks';
+import { isDeepEqual } from '@vef-framework/shared';
+import { useMemo } from 'react';
+import VefColumnsSettings from '../components/columns-settings.js';
+import VefOperationButtons from '../components/operation-buttons.js';
+import VefSettingsIcon from '../components/settings-icon.js';
+import { useOperationColumnWidth } from './use-operation-column-width.js';
+
+const DEFAULT_MAX_VISIBLE_OPERATION_BUTTONS = 3;
+function useHelperColumns({
+  showRowNumber,
+  operationButtons,
+  maxVisibleOperationButtons,
+  size
+}) {
+  const rowNumberColumn = useMemo(() => {
+    if (showRowNumber) {
+      return {
+        key: "_rowNumber",
+        title: "#",
+        align: "center",
+        fixed: "left",
+        // rowScope: "row",
+        width: 48,
+        shouldCellUpdate: () => false,
+        render: (_, __, rowIndex) => rowIndex + 1
+      };
+    }
+  }, [showRowNumber]);
+  const authorizedOperationButtons = useAuthorizedItems(operationButtons ?? []);
+  const operationColumnWidth = useOperationColumnWidth(
+    authorizedOperationButtons,
+    maxVisibleOperationButtons ?? DEFAULT_MAX_VISIBLE_OPERATION_BUTTONS,
+    size
+  );
+  const operationColumn = useMemo(() => {
+    if (authorizedOperationButtons && authorizedOperationButtons.length > 0) {
+      return {
+        key: "_operationButtons",
+        title: "\u64CD\u4F5C",
+        align: "center",
+        fixed: "right",
+        filterIcon: () => /* @__PURE__ */ jsx(VefSettingsIcon, {}),
+        filterDropdown: () => /* @__PURE__ */ jsx(VefColumnsSettings, {}),
+        width: operationColumnWidth,
+        shouldCellUpdate: (record, prevRecord) => !isDeepEqual(record, prevRecord),
+        render: (_, record, rowIndex) => /* @__PURE__ */ jsx(
+          VefOperationButtons,
+          {
+            maxVisibleOperationButtons: maxVisibleOperationButtons ?? DEFAULT_MAX_VISIBLE_OPERATION_BUTTONS,
+            operationButtons: authorizedOperationButtons,
+            record,
+            rowIndex
+          }
+        )
+      };
+    }
+  }, [authorizedOperationButtons, maxVisibleOperationButtons, operationColumnWidth]);
+  return {
+    rowNumberColumn,
+    operationColumn
+  };
+}
+
+export { 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/es/vef-table/hooks/use-operation-column-width.js

@@ -1,3 +1,51 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{useThemeTokens as t}from"@vef-framework/hooks";import{max as e}from"@vef-framework/shared";import{useMemo as r}from"react";function useOperationColumnWidth(n,o,u="medium"){const{Button:a}=t(),l="large"===u?16:8,c=a?.contentFontSizeSM??16;return r((()=>{if(0===n.length)return 0;if(n.length>o){const t=new Set;for(let r=0;r<o;r++){const r=e(n,(e=>t.has(e)?0:e.label.length));r&&t.add(r)}return calculateButtonsWidth(Array.from(t),c,l,!0)}return calculateButtonsWidth(n,c,l,!1)}),[l,c,o,n])}function calculateButtonsWidth(t,e,r,n){const o=e+4;return t.map((t=>{const e=t.label.length*o+8;return t.icon?e+o+8:e})).reduce(((t,e)=>t+e),0)+(n?o+8:0)+2*r}export{useOperationColumnWidth};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { useThemeTokens } from '@vef-framework/hooks';
+import { max } from '@vef-framework/shared';
+import { useMemo } from 'react';
+
+function useOperationColumnWidth(operationButtons, maxVisibleOperationButtons, size = "medium") {
+  const { Button: buttonThemeTokens } = useThemeTokens();
+  const cellInlinePadding = size === "large" ? 16 : 8;
+  const fontSize = buttonThemeTokens?.contentFontSizeSM ?? 16;
+  return 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 = 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;
+}
+
+export { 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/es/vef-table/hooks/use-pagination-props.js

@@ -1,3 +1,45 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{useState as e,useMemo as a}from"react";import{defaultPageSizeOptions as i}from"../../vef-pagination/props.js";function usePaginationProps(n,r){const[o,p]=e({page:1,size:i[2]}),s=a((()=>{if(n)return(e,a)=>{p({page:e,size:a})}}),[n,p]);return{paginationProps:a((()=>{if(n)return{pageNumber:o.page,pageSize:o.size,size:"small"===r?"small":"medium",onChange:s}}),[s,n,o.page,o.size,r]),paginationParams:o}}export{usePaginationProps};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { useState, useMemo } from 'react';
+import { defaultPageSizeOptions } from '../../vef-pagination/props.js';
+
+function usePaginationProps(paginated, size) {
+  const [paginationParams, setPaginationParams] = useState({
+    page: 1,
+    size: defaultPageSizeOptions[2]
+  });
+  const handlePaginationChange = useMemo(() => {
+    if (!paginated) {
+      return;
+    }
+    return (pageNumber, pageSize) => {
+      setPaginationParams({
+        page: pageNumber,
+        size: pageSize
+      });
+    };
+  }, [paginated, setPaginationParams]);
+  const paginationProps = 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
+  };
+}
+
+export { 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/es/vef-table/hooks/use-row-props.js

@@ -1,3 +1,40 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{useMemo as o}from"react";function useRowProps({enableRowClick:e=!1,enableRowClickForSelection:n=!1,onRowClick:r,disabledSelection:l,handleRowClickSelection:i}){return o((()=>{if(e)return(o,e)=>{const t=l?.(o)??!1;return{style:{cursor:t?"not-allowed":"pointer"},onClick:t?void 0:()=>{n||r?.(o,e??-1),i?.(o)}}}}),[l,e,n,i,r])}export{useRowProps};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { useMemo } from 'react';
+
+function useRowProps({
+  enableRowClick = false,
+  enableRowClickForSelection = false,
+  onRowClick,
+  disabledSelection,
+  handleRowClickSelection
+}) {
+  return 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
+  ]);
+}
+
+export { 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/es/vef-table/hooks/use-row-selection-config.js

@@ -1,3 +1,113 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{isFunction as e}from"@vef-framework/shared";import{useMemo as o}from"react";import{useSelectedRows as t}from"./use-selected-rows.js";function useRowSelectionConfig({rowKey:l,selectedKeys:c,defaultSelectedKeys:n,selectable:s,enableRowClick:r,enableRowClickForSelection:i,multipleSelection:d=!0,showSelectAllCheckbox:f=!0,disabledSelection:u,onRowSelect:a,onRowDeselect:w,onRowSelectionChange:S}){const{selectedKeys:h,selectedRecords:R,onChange:C}=t({selectedKeys:c,defaultSelectedKeys:n,onRowSelectionChange:S}),p=o((()=>{if(r&&i)return o=>{const t=e(l)?l(o):o[l];if(h.includes(t)){if(!d)return;const c=h.filter((e=>e!==t)),n=R.current.filter((o=>(e(l)?l(o):o[l])!==t));C(c,n),w?.(t,o)}else{const e=[t];d&&e.push(...h);const l=[o];d&&l.push(...R.current),C(e,l),a?.(t,o)}}}),[r,i,d,C,w,a,l,h,R]);return{rowSelectionConfig:o((()=>{if(!s)return;return{fixed:!0,hideSelectAll:!f,preserveSelectedRowKeys:!1,selectedRowKeys:h,type:d?"checkbox":"radio",getCheckboxProps:e(u)?e=>({disabled:u(e)}):void 0,onChange:(e,o)=>{C(e,o)},onSelect:e(a)||e(w)?(o,t)=>{const c=e(l)?l(o):o[l];t?a?.(c,o):w?.(c,o)}:void 0}}),[s,f,h,d,u,a,w,C,l]),handleRowClickSelection:p,selectedKeys:h,selectedRecords:R}}export{useRowSelectionConfig};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { isFunction } from '@vef-framework/shared';
+import { useMemo } from 'react';
+import { useSelectedRows } from './use-selected-rows.js';
+
+function useRowSelectionConfig({
+  rowKey,
+  selectedKeys,
+  defaultSelectedKeys,
+  selectable,
+  enableRowClick,
+  enableRowClickForSelection,
+  multipleSelection = true,
+  showSelectAllCheckbox = true,
+  disabledSelection,
+  onRowSelect,
+  onRowDeselect,
+  onRowSelectionChange
+}) {
+  const {
+    selectedKeys: selectedKeysToUse,
+    selectedRecords,
+    onChange
+  } = useSelectedRows({
+    selectedKeys,
+    defaultSelectedKeys,
+    onRowSelectionChange
+  });
+  const handleRowClickSelection = useMemo(() => {
+    if (!enableRowClick || !enableRowClickForSelection) {
+      return;
+    }
+    return (record) => {
+      const key = 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) => (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 = useMemo(() => {
+    if (!selectable) {
+      return;
+    }
+    const config = {
+      fixed: true,
+      hideSelectAll: !showSelectAllCheckbox,
+      preserveSelectedRowKeys: false,
+      selectedRowKeys: selectedKeysToUse,
+      type: multipleSelection ? "checkbox" : "radio",
+      getCheckboxProps: isFunction(disabledSelection) ? (record) => ({
+        disabled: disabledSelection(record)
+      }) : void 0,
+      onChange: (selectedRowKeys, selectedRows) => {
+        onChange(selectedRowKeys, selectedRows);
+      },
+      onSelect: isFunction(onRowSelect) || isFunction(onRowDeselect) ? (record, selected) => {
+        const key = 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
+  };
+}
+
+export { 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/es/vef-table/hooks/use-selected-rows.js

@@ -1,3 +1,27 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{useState as e,useRef as t,useCallback as c}from"react";function useSelectedRows({selectedKeys:o,defaultSelectedKeys:s,onRowSelectionChange:n}){const[r,d]=e(s??[]),l=o??r,u=t([]),a=c(((e,t)=>{o||d(e),u.current=t,n?.(e,t)}),[n,o]);return{selectedKeys:l,selectedRecords:u,onChange:a}}export{useSelectedRows};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { useState, useRef, useCallback } from 'react';
+
+function useSelectedRows({
+  selectedKeys,
+  defaultSelectedKeys,
+  onRowSelectionChange
+}) {
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState(defaultSelectedKeys ?? []);
+  const selectedKeysToUse = selectedKeys ?? internalSelectedKeys;
+  const selectedRecords = useRef([]);
+  const onChange = useCallback((keys, records) => {
+    if (!selectedKeys) {
+      setInternalSelectedKeys(keys);
+    }
+    selectedRecords.current = records;
+    onRowSelectionChange?.(keys, records);
+  }, [onRowSelectionChange, selectedKeys]);
+  return {
+    selectedKeys: selectedKeysToUse,
+    selectedRecords,
+    onChange
+  };
+}
+
+export { 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/es/vef-table/hooks/use-table-columns.js

@@ -1,3 +1,57 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{jsx as e}from"@emotion/react/jsx-runtime";import{isNumber as o,isDeepEqual as r}from"@vef-framework/shared";import{useMemo as t}from"react";import{columnComponents as n}from"../components/columns/index.js";function useTableColumns(m,s,a){return t((()=>{const t=[],i=m.map((t=>{const{title:m,show:s,sort:a,fixed:i,dependentColumnNames:d,...u}=t,l=o(a)?{multiple:a}:!!a||void 0,p=n[t.type];return{key:u.name,dataIndex:u.name,title:m||u.name,fixed:i,hidden:!(s??1),sorter:l,align:u.align,width:u.width,shouldCellUpdate:(e,o)=>!r(d.map((o=>e[o])),d.map((e=>o[e]))),render:(o,r,t)=>e(p,{columnProps:u,record:r,rowIndex:t,value:o})}}));return s&&t.push(s),t.push(...i),a&&t.push(a),t}),[m,s,a])}export{useTableColumns};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { isNumber, isDeepEqual } from '@vef-framework/shared';
+import { useMemo } from 'react';
+import { columnComponents } from '../components/columns/index.js';
+
+function useTableColumns(columns, rowNumberColumn, operationColumn) {
+  return useMemo(() => {
+    const columnsToUse = [];
+    const dataColumns = columns.map((column) => {
+      const {
+        title,
+        show,
+        sort,
+        fixed,
+        dependentColumnNames,
+        ...columnProps
+      } = column;
+      const sortToUse = isNumber(sort) ? { multiple: sort } : sort ?? false ? true : void 0;
+      const ColumnComponent = 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) => !isDeepEqual(
+          dependentColumnNames.map((name) => record[name]),
+          dependentColumnNames.map((name) => prevRecord[name])
+        ),
+        render: (value, record, rowIndex) => /* @__PURE__ */ jsx(
+          ColumnComponent,
+          {
+            columnProps,
+            record,
+            rowIndex,
+            value
+          }
+        )
+      };
+    });
+    if (rowNumberColumn) {
+      columnsToUse.push(rowNumberColumn);
+    }
+    columnsToUse.push(...dataColumns);
+    if (operationColumn) {
+      columnsToUse.push(operationColumn);
+    }
+    return columnsToUse;
+  }, [columns, rowNumberColumn, operationColumn]);
+}
+
+export { 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 */