@vef-framework/components 1.0.5

package/dist/vef-table/index.js

@@ -0,0 +1,56 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{jsx as e}from"@emotion/react/jsx-runtime";import{css as o}from"@emotion/react";import{themeVariables as t,isEqual as n,isNumber as l}from"@vef-framework/shared";import{Table as i}from"antd";import{useMemo as a,useState as r,useDeferredValue as s,forwardRef as m,memo as c}from"react";import"../internal/index.js";import u from"./components/table-footer.js";import{useComputedBatchActionButtons as f}from"./hooks/use-computed-batch-buttons.js";import{useComputedColumns as p}from"./hooks/use-computed-columns.js";import{useData as d}from"./hooks/use-data.js";import{useDefaultColumnConfigs as h}from"./hooks/use-default-column-configs.js";import{useHelperColumns as b}from"./hooks/use-helper-columns.js";import{usePaginationProps as g}from"./hooks/use-pagination-props.js";import{useRowProps as C}from"./hooks/use-row-props.js";import{useRowSelectionConfig as w}from"./hooks/use-row-selection-config.js";import{useTableColumns as k}from"./hooks/use-table-columns.js";import{TableContextProvider as x}from"./hooks/use-table-context.js";import{useTableInstance as S}from"./hooks/use-table-instance.js";import{useTableSummary as v}from"./hooks/use-table-summary.js";import{useTableWidth as y}from"./hooks/use-table-width.js";import{convertBasicSizeToUiSize as j}from"../internal/utils.js";const R=o`
+  height: 100%;
+
+  > .vef-spin-nested-loading {
+    height: 100%;
+
+    > .vef-spin-container {
+      height: 100%;
+
+      > .vef-table {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        > .vef-table-container {
+          flex: 1;
+          min-height: 0;
+          display: flex;
+          flex-direction: column;
+
+          > .vef-table-header {
+            flex-shrink: 0;
+          }
+
+          > .vef-table-body {
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
+            min-height: 200px;
+          }
+        }
+
+        > .vef-table-title {
+          flex-shrink: 0;
+          padding: ${t.paddingSm};
+        }
+
+        > .vef-table-footer {
+          flex-shrink: 0;
+          padding: ${t.paddingXs}
+        }
+
+        &.vef-table-empty > .vef-table-container > .vef-table-body > table {
+          min-height: 100%;
+        }
+      }
+    }
+  }
+`,B=o`
+  .vef-table-content {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
+  }
+`;const N=m((function({columns:o,defaultColumnConfigMap:t,rowNumberColumn:m,operationColumn:c,bordered:h=!1,size:b="medium",rowKey:N="id",height:V,virtual:M=!1,value:A,defaultValue:F,selectable:z=!1,multipleSelection:T,showSelectAllCheckbox:K,disabledSelection:O,enableRowClick:P,enableRowClickForSelection:D,rowBackgroundColor:L,batchActionButtons:$,selectionSummary:E,externalContext:H,onRowClick:X,onChange:q,onSelect:G,onDeselect:I,...J},Q){const{paginated:U=!1,...W}=J,{paginationProps:Y,paginationParams:Z}=g(U,b),{data:_,isFetching:ee,isLoading:oe,total:te,refetch:ne}=d(W,U,Z),le=a((()=>({...Y,total:te})),[Y,te]),[ie,ae]=r((()=>new Map(t))),re=s(ie),se=p(o,re),{rowSelectionConfig:me,handleRowClickSelection:ce,mergedValue:ue,selectedRecords:fe}=w({value:A,defaultValue:F,selectable:z,multipleSelection:T,disabledSelection:O,enableRowClick:P,enableRowClickForSelection:D,onSelect:G,onDeselect:I,onChange:q,rowKey:N}),pe=C({enableRowClick:P,enableRowClickForSelection:D,onRowClick:X,disabledSelection:O,handleRowClickSelection:ce}),de=a((()=>({externalContext:H,isFetching:ee,refetch:ne,selectedKeys:ue,selectedRecords:fe.current,defaultColumnConfigMap:t,columnConfigMap:ie,setColumnConfigMap:ae,columnConfigMapHasChanged:!n(t,ie)})),[H,ee,ne,ue,fe,t,ie]),he=k(se,m,c),be=y(he,z),ge=a((()=>({x:be,y:"auto"===V?"auto":V,scrollToFirstRowOnChange:!0})),[V,be]),Ce=S(Q,_??[],ne),we=v(se),{computedBatchActionButtons:ke,batchActionButtonContext:xe}=f($??[],de),Se=a((()=>{if(oe||0===_?.length||!U&&!1===E&&0===ke.length)return;const o=e(u,{batchActionButtonContext:xe,batchActionButtons:ke,paginationProps:le,selectionSummary:E,size:b});return()=>o}),[xe,ke,_?.length,oe,le,U,E,b]);return e(x,{value:de,children:e(i,{ref:Ce,bordered:h,columns:he,css:"auto"===V?R:B,dataSource:_,footer:Se,loading:ee,pagination:!1,rowKey:N,rowSelection:me,scroll:ge,size:j(b),summary:we,tableLayout:"fixed",virtual:l(V)&&V>0&&M,onRow:pe})})}));N.displayName="VefTableBase";const V=c(m((function({schema:o,showRowNumber:t,operationButtons:n,maxVisibleOperationButtons:l,...i},r){const{size:s}=i,m=a((()=>o.filter((e=>e.show??!0)).map((e=>({...e,dependentColumnNames:[...new Set([e.name,...e.dependentColumnNames??[]])]})))),[o]);if(0===m.length)throw new Error("The showed columns of VefTable component cannot be empty");const c=h(m),{rowNumberColumn:u,operationColumn:f}=b({showRowNumber:t,operationButtons:n,maxVisibleOperationButtons:l,size:s});return e(N,{ref:r,columns:m,defaultColumnConfigMap:c,operationColumn:f,rowNumberColumn:u,...i})})),n);V.displayName="VefTable";export{V as default};
+/*! 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/dist/vef-table/props.d.ts

@@ -0,0 +1,330 @@
+import type { ActionButton, BasicSize, BiConsumer, BiMapper, ColorType, EmptyObject, IdValue, Mapper, ObjectType, ObjectValue, PaginationParams, PaginationResult, Provider, QueryConfig, StringKey } from "@vef-framework/shared";
+import type { TableProps } from "antd";
+import type { ReactNode } from "react";
+import type { BatchActionButtonContext, OperationButtonContext, TableHeight, TableSchema } from "./types";
+/**
+ * The instance of VefTable component.
+ */
+export interface VefTableInstance<T extends ObjectType> {
+    /**
+     * Get the table data.
+     */
+    getData: Provider<T[]>;
+    /**
+     * Refetch the table data.
+     */
+    refetch: Provider<Promise<void>>;
+}
+/**
+ * The onChange handler type of table.
+ */
+export type OnChangeHandler<T extends ObjectType> = NonNullable<TableProps<T>["onChange"]>;
+/**
+ * The props of VefTable component.
+ */
+export type VefTableProps<T extends ObjectType = ObjectValue, P extends ObjectType = EmptyObject, R = T, C extends ObjectType = EmptyObject> = VefNoSelectionDefaultTableProps<T, P, R, C> | VefSingleSelectionDefaultTableProps<T, P, R, C> | VefMultipleSelectionDefaultTableProps<T, P, R, C> | VefNoSelectionPaginatedTableProps<T, P, R, C> | VefSingleSelectionPaginatedTableProps<T, P, R, C> | VefMultipleSelectionPaginatedTableProps<T, P, R, C>;
+/**
+ * The base props of VefTable component.
+ */
+interface VefBaseTableProps<T extends ObjectType = ObjectValue, C extends ObjectType = EmptyObject> extends Pick<TableProps<T>, "bordered"> {
+    /**
+     * The schema of the table.
+     */
+    schema: TableSchema<T>;
+    /**
+     * The key of the row.
+     */
+    rowKey?: StringKey<T> | Mapper<T, string>;
+    /**
+     * The size of the table.
+     */
+    size?: BasicSize;
+    /**
+     * The height of the table.
+     */
+    height?: TableHeight;
+    /**
+     * Whether to enable virtual scrolling.
+     * Only works when `height` is number and greater than 0.
+     */
+    virtual?: boolean;
+    /**
+     * Whether to allow pagination.
+     */
+    paginated?: boolean;
+    /**
+     * Whether to show the row number.
+     */
+    showRowNumber?: boolean;
+    /**
+     * Whether to allow selection.
+     */
+    selectable?: boolean;
+    /**
+     * Whether to allow multiple selection.
+     */
+    multipleSelection?: boolean;
+    /**
+     * Whether to show the select all checkbox.
+     * Only works when `allowSelect` is true and `multipleSelection` is true.
+     */
+    showSelectAllCheckbox?: boolean;
+    /**
+     * Whether to disable selection.
+     */
+    disabledSelection?: Mapper<T, boolean>;
+    /**
+     * The text of the selection summary.
+     */
+    selectionSummary?: false | Mapper<T[], ReactNode>;
+    /**
+     * Whether to enable row click event.
+     */
+    enableRowClick?: boolean;
+    /**
+     * Whether to click row for selection.
+     */
+    enableRowClickForSelection?: boolean;
+    /**
+     * The background color of the row.
+     */
+    rowBackgroundColor?: BiMapper<T, number, ColorType>;
+    /**
+     * The operation buttons of the table.
+     */
+    operationButtons?: Array<ActionButton<OperationButtonContext<T, C>>>;
+    /**
+     * The maximum number of visible operation buttons.
+     */
+    maxVisibleOperationButtons?: number;
+    /**
+     * The batch action buttons of the table.
+     */
+    batchActionButtons?: Array<ActionButton<BatchActionButtonContext<T, C>>>;
+    /**
+     * The external context of the table.
+     */
+    externalContext?: C;
+    /**
+     * The callback function when the row is clicked.
+     * Only works when `enableRowClick` is true and `enableRowClickForSelection` is false.
+     */
+    onRowClick?: BiConsumer<T, number>;
+}
+/**
+ * The props of VefTable component without pagination.
+ */
+interface VefDefaultTableProps<T extends ObjectType = ObjectValue, P extends ObjectType = EmptyObject, R = T, C extends ObjectType = EmptyObject> extends VefBaseTableProps<T, C>, QueryConfig<T[], P, R[]> {
+    /**
+     * Whether to allow pagination.
+     */
+    paginated?: false;
+}
+/**
+ * The props of VefTable component without pagination and no selection.
+ */
+interface VefNoSelectionDefaultTableProps<T extends ObjectType = ObjectValue, P extends ObjectType = EmptyObject, R = T, C extends ObjectType = EmptyObject> extends VefDefaultTableProps<T, P, R, C> {
+    /**
+     * The value of the table.
+     */
+    value?: never;
+    /**
+     * The default value of the table.
+     */
+    defaultValue?: never;
+    /**
+     * Whether to allow selection.
+     */
+    selectable?: false;
+    /**
+     * Whether to allow multiple selection.
+     */
+    multipleSelection?: never;
+    /**
+     * The callback function when the value is changed.
+     */
+    onChange?: never;
+    /**
+     * The callback function when the row is selected.
+     */
+    onSelect?: never;
+    /**
+     * The callback function when the row is deselected.
+     */
+    onDeselect?: never;
+}
+/**
+ * The props of VefTable component without pagination and single selection.
+ */
+interface VefSingleSelectionDefaultTableProps<T extends ObjectType = ObjectValue, P extends ObjectType = EmptyObject, R = T, C extends ObjectType = EmptyObject> extends VefDefaultTableProps<T, P, R, C> {
+    /**
+     * The value of the table.
+     */
+    value?: IdValue;
+    /**
+     * The default value of the table.
+     */
+    defaultValue?: IdValue;
+    /**
+     * Whether to allow selection.
+     */
+    selectable: true;
+    /**
+     * Whether to allow multiple selection.
+     */
+    multipleSelection?: false;
+    /**
+     * The callback function when the value is changed.
+     */
+    onChange?: BiConsumer<IdValue, T>;
+    /**
+     * The callback function when the row is selected.
+     */
+    onSelect?: never;
+    /**
+     * The callback function when the row is deselected.
+     */
+    onDeselect?: never;
+}
+/**
+ * The props of VefTable component without pagination and multiple selection.
+ */
+interface VefMultipleSelectionDefaultTableProps<T extends ObjectType = ObjectValue, P extends ObjectType = EmptyObject, R = T, C extends ObjectType = EmptyObject> extends VefDefaultTableProps<T, P, R, C> {
+    /**
+     * The value of the table.
+     */
+    value?: IdValue[];
+    /**
+     * The default value of the table.
+     */
+    defaultValue?: IdValue[];
+    /**
+     * Whether to allow selection.
+     */
+    selectable: true;
+    /**
+     * Whether to allow multiple selection.
+     */
+    multipleSelection: true;
+    /**
+     * The callback function when the value is changed.
+     */
+    onChange?: BiConsumer<IdValue[], T[]>;
+    /**
+     * The callback function when the row is selected.
+     */
+    onSelect?: BiConsumer<IdValue, T>;
+    /**
+     * The callback function when the row is deselected.
+     */
+    onDeselect?: BiConsumer<IdValue, T>;
+}
+/**
+ * The props of VefTable component with pagination.
+ */
+interface VefPaginatedTableProps<T extends ObjectType = ObjectValue, P extends ObjectType = EmptyObject, R = T, C extends ObjectType = EmptyObject> extends VefBaseTableProps<T, C>, QueryConfig<PaginationResult<T>, P & PaginationParams, PaginationResult<R>> {
+    /**
+     * Whether to allow pagination.
+     */
+    paginated: true;
+}
+/**
+ * The props of VefTable component with pagination and no selection.
+ */
+interface VefNoSelectionPaginatedTableProps<T extends ObjectType = ObjectValue, P extends ObjectType = EmptyObject, R = T, C extends ObjectType = EmptyObject> extends VefPaginatedTableProps<T, P, R, C> {
+    /**
+     * The value of the table.
+     */
+    value?: never;
+    /**
+     * The default value of the table.
+     */
+    defaultValue?: never;
+    /**
+     * Whether to allow selection.
+     */
+    selectable?: false;
+    /**
+     * Whether to allow multiple selection.
+     */
+    multipleSelection?: never;
+    /**
+     * The callback function when the value is changed.
+     */
+    onChange?: never;
+    /**
+     * The callback function when the row is selected.
+     */
+    onSelect?: never;
+    /**
+     * The callback function when the row is deselected.
+     */
+    onDeselect?: never;
+}
+/**
+ * The props of VefTable component with pagination and single selection.
+ */
+interface VefSingleSelectionPaginatedTableProps<T extends ObjectType = ObjectValue, P extends ObjectType = EmptyObject, R = T, C extends ObjectType = EmptyObject> extends VefPaginatedTableProps<T, P, R, C> {
+    /**
+     * The value of the table.
+     */
+    value?: IdValue;
+    /**
+     * The default value of the table.
+     */
+    defaultValue?: IdValue;
+    /**
+     * Whether to allow selection.
+     */
+    selectable: true;
+    /**
+     * Whether to allow multiple selection.
+     */
+    multipleSelection?: false;
+    /**
+     * The callback function when the value is changed.
+     */
+    onChange?: BiConsumer<IdValue, T>;
+    /**
+     * The callback function when the row is selected.
+     */
+    onSelect?: never;
+    /**
+     * The callback function when the row is deselected.
+     */
+    onDeselect?: never;
+}
+/**
+ * The props of VefTable component with pagination and multiple selection.
+ */
+interface VefMultipleSelectionPaginatedTableProps<T extends ObjectType = ObjectValue, P extends ObjectType = EmptyObject, R = T, C extends ObjectType = EmptyObject> extends VefPaginatedTableProps<T, P, R, C> {
+    /**
+     * The value of the table.
+     */
+    value?: IdValue[];
+    /**
+     * The default value of the table.
+     */
+    defaultValue?: IdValue[];
+    /**
+     * Whether to allow selection.
+     */
+    selectable: true;
+    /**
+     * Whether to allow multiple selection.
+     */
+    multipleSelection: true;
+    /**
+     * The callback function when the value is changed.
+     */
+    onChange?: BiConsumer<IdValue[], T[]>;
+    /**
+     * The callback function when the row is selected.
+     */
+    onSelect?: BiConsumer<IdValue, T>;
+    /**
+     * The callback function when the row is deselected.
+     */
+    onDeselect?: BiConsumer<IdValue, T>;
+}
+export {};

package/dist/vef-table/store.d.ts

@@ -0,0 +1,21 @@
+import { type Consumer, type Size } from "@vef-framework/shared";
+import type { TableColumnConfig } from "./types";
+/**
+ * The state of the table component.
+ */
+export interface TableState {
+    /**
+     * The size of the table.
+     */
+    size: Size;
+    /**
+     * The callback function when the size is changed.
+     */
+    changeSize: Consumer<Size>;
+    /**
+     * The map of the column configs.
+     */
+    columnConfigMap: Map<string, TableColumnConfig>;
+}
+declare const TableStoreContext: import("react").Context<import("@vef-framework/shared").MaybeNull<import("zustand").StoreApi<TableState>>>, TableStoreProvider: import("react").FC<import("@vef-framework/shared").StoreProviderProps<Pick<TableState, "size">>>, useTableStore: <T>(selector: import("@vef-framework/shared").Mapper<TableState, T>) => T, useTableStoreApi: () => import("zustand").StoreApi<TableState>;
+export { TableStoreContext, TableStoreProvider, useTableStore, useTableStoreApi, };

package/dist/vef-table/store.js

@@ -0,0 +1,3 @@
+/*! VefFramework version: 1.0.5, build time: 2024-12-10T10:24:47.065Z, made by Venus. */
+import{VefError as e,createComponentStore as t}from"@vef-framework/shared";import{createStore as r}from"zustand";const{StoreContext:o,StoreProvider:i,useStore:n,useStoreApi:a}=t("table",(function(t){if(!t)throw new e(-2,"The initial state of the table store is required");return r((e=>({changeSize:t=>e({size:t}),columnConfigMap:new Map,...t})))}));export{o as TableStoreContext,i as TableStoreProvider,n as useTableStore,a as useTableStoreApi};
+/*! 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 */