@vef-framework/components 1.0.122 → 1.0.124

package/esm/vef-crud-page/hooks/use-crud-schema.js

@@ -0,0 +1,117 @@
+"use strict";
+import { isNullish, isString } from '@vef-framework/shared';
+import { useMemo } from 'react';
+
+"use strict";
+function useCrudSchema(schema) {
+  return useMemo(() => {
+    const tableColumns = [];
+    const filterItems = [];
+    const filterValueAsDefaultSet = /* @__PURE__ */ new Set();
+    const formGroupMap = {};
+    for (const item of schema) {
+      const {
+        filter,
+        form,
+        ...column
+      } = item;
+      const { name, title } = column;
+      tableColumns.push(column);
+      if (filter) {
+        const {
+          label,
+          advanced,
+          ...rest
+        } = filter;
+        const filterItem = {
+          name,
+          label: advanced && isNullish(label) ? title : label,
+          advanced,
+          ...rest
+        };
+        if ((filterItem.type === "Input" || filterItem.type === "InputNumber") && isNullish(label) && isNullish(filterItem.placeholder)) {
+          filterItem.placeholder = isString(title) ? title : "请输入";
+        } else if ((filterItem.type === "SingleSelect" || filterItem.type === "MultipleSelect" || filterItem.type === "TreeSingleSelect" || filterItem.type === "TreeMultipleSelect") && isNullish(label) && isNullish(filterItem.placeholder)) {
+          filterItem.placeholder = isString(title) ? title : "请选择";
+        }
+        filterItems.push(filterItem);
+      }
+      if (form) {
+        const {
+          group,
+          row,
+          column: column2,
+          filterValueAsDefault,
+          label,
+          ...rest
+        } = form;
+        const groupKey = `${group ?? 1}`;
+        const groupSchema = formGroupMap[groupKey] ?? {};
+        if (!formGroupMap[groupKey]) {
+          formGroupMap[groupKey] = groupSchema;
+        }
+        const rowKey = `${row ?? 1}`;
+        const rowSchema = groupSchema[rowKey] ?? {};
+        if (!groupSchema[rowKey]) {
+          groupSchema[rowKey] = rowSchema;
+        }
+        const columnKey = `${column2 ?? 1}`;
+        const columnSchema = rowSchema[columnKey] ?? [];
+        if (!rowSchema[columnKey]) {
+          rowSchema[columnKey] = columnSchema;
+        }
+        if (rest.type === "Hidden") {
+          columnSchema.push({
+            name,
+            ...rest
+          });
+        } else {
+          columnSchema.push({
+            name,
+            label: isNullish(label) ? title : label,
+            ...rest
+          });
+        }
+        if (filterValueAsDefault ?? false) {
+          filterValueAsDefaultSet.add(name);
+        }
+      }
+    }
+    const formGroups = [];
+    const groupKeys = Object.keys(formGroupMap).sort();
+    for (const groupKey of groupKeys) {
+      const groupSchemaMap = formGroupMap[groupKey];
+      const formRows = [];
+      const rowKeys = Object.keys(groupSchemaMap).sort();
+      for (const rowKey of rowKeys) {
+        const rowSchema = groupSchemaMap[rowKey];
+        const formColumns = [];
+        const columnKeys = Object.keys(rowSchema).sort();
+        for (const columnKey of columnKeys) {
+          const columnSchema = rowSchema[columnKey];
+          const formColumn = {
+            key: columnKey,
+            items: columnSchema
+          };
+          formColumns.push(formColumn);
+        }
+        formRows.push({
+          key: rowKey,
+          columns: formColumns
+        });
+      }
+      formGroups.push({
+        key: groupKey,
+        rows: formRows
+      });
+    }
+    return {
+      tableSchema: tableColumns,
+      filterItems,
+      formGroups,
+      filterValueAsDefaultKeys: Array.from(filterValueAsDefaultSet)
+    };
+  }, [schema]);
+}
+
+export { useCrudSchema };

package/esm/vef-crud-page/hooks/use-operation-buttons.js

@@ -0,0 +1,61 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useApiContext } from '@vef-framework/core';
+import { updateFormScene, showSuccessMessage } from '@vef-framework/shared';
+import { PencilIcon, TrashIcon } from 'lucide-react';
+import { useMemo } from 'react';
+import VefIcon from '../../vef-icon/index.js';
+import { useCrudStore } from '../store.js';
+
+"use strict";
+function useOperationButtons(deletionApi, operationButtons) {
+  const { useApiMutation, stubMutationApi } = useApiContext();
+  const deletionMutation = useApiMutation(deletionApi ?? stubMutationApi);
+  const formApiKeys = useCrudStore((state) => state.formApiKeys);
+  const showUpdateButton = Reflect.has(formApiKeys, updateFormScene);
+  return useMemo(() => {
+    const buttons = [
+      ...operationButtons ?? []
+    ];
+    if (showUpdateButton) {
+      buttons.push({
+        key: "_update",
+        label: "编辑",
+        icon: /* @__PURE__ */ jsx(VefIcon, { children: /* @__PURE__ */ jsx(PencilIcon, {}) }),
+        color: "primary",
+        onClick: ({
+          record,
+          openForm,
+          refetch
+        }) => {
+          openForm({
+            scene: updateFormScene,
+            title: "编辑",
+            initialValues: record,
+            onSubmitSuccess: () => {
+              refetch();
+            }
+          });
+        }
+      });
+    }
+    if (deletionApi) {
+      buttons.push({
+        key: "_deletion",
+        label: "删除",
+        icon: /* @__PURE__ */ jsx(VefIcon, { children: /* @__PURE__ */ jsx(TrashIcon, {}) }),
+        color: "error",
+        requireConfirmation: true,
+        confirmationMode: "simple",
+        onClick: async ({ record, refetch }) => {
+          const { message } = await deletionMutation.mutate(record);
+          showSuccessMessage(message);
+          refetch();
+        }
+      });
+    }
+    return buttons;
+  }, [deletionApi, deletionMutation, operationButtons, showUpdateButton]);
+}
+
+export { useOperationButtons };

package/esm/vef-crud-page/index.js

@@ -0,0 +1,151 @@
+"use strict";
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { isNullish } from '@vef-framework/shared';
+import { useMemo } from 'react';
+import VefCard from '../vef-card/index.js';
+import VefPage from '../vef-page/index.js';
+import VefCrudActions from './components/crud-actions.js';
+import VefCrudFooter from './components/crud-footer.js';
+import VefCrudFormModal from './components/crud-form-modal.js';
+import VefCrudHeader from './components/crud-header.js';
+import VefCrudTable from './components/crud-table.js';
+import { useCrudSchema } from './hooks/use-crud-schema.js';
+import { useCrudStore, CrudStoreProvider } from './store.js';
+
+"use strict";
+function VefCrudPageBase({
+  title,
+  actionButtons,
+  batchActionButtons,
+  tableSchema,
+  filterItems,
+  formGroups,
+  tableApiParams,
+  formApis,
+  deletionApi,
+  batchDeletionApi,
+  selectionSummary,
+  ...tableProps
+}) {
+  const { selectedKeys } = useCrudStore((state) => state.selectedInfo);
+  const selectable = !isNullish(batchDeletionApi) || !isNullish(batchActionButtons) && batchActionButtons.length > 0;
+  let tableNode;
+  if (tableProps.paginated) {
+    const { tableApi: tableApi2, ...restTableProps } = tableProps;
+    tableNode = /* @__PURE__ */ jsx(
+      VefCrudTable,
+      {
+        showRowNumber: true,
+        api: tableApi2,
+        apiParams: tableApiParams,
+        deletionApi,
+        schema: tableSchema,
+        selectable,
+        ...restTableProps
+      }
+    );
+  } else {
+    const { tableApi: tableApi2, ...restTableProps } = tableProps;
+    tableNode = /* @__PURE__ */ jsx(
+      VefCrudTable,
+      {
+        showRowNumber: true,
+        api: tableApi2,
+        apiParams: tableApiParams,
+        deletionApi,
+        schema: tableSchema,
+        selectable,
+        ...restTableProps
+      }
+    );
+  }
+  const { tableApi } = tableProps;
+  return /* @__PURE__ */ jsx(
+    VefPage,
+    {
+      scrollable: true,
+      title,
+      actions: /* @__PURE__ */ jsx(
+        VefCrudActions,
+        {
+          actionButtons,
+          tableApi,
+          tableApiParams
+        }
+      ),
+      footer: selectedKeys.length > 0 && /* @__PURE__ */ jsx(
+        VefCrudFooter,
+        {
+          batchActionButtons,
+          batchDeletionApi,
+          selectionSummary,
+          tableApi,
+          tableApiParams
+        }
+      ),
+      header: /* @__PURE__ */ jsx(
+        VefCrudHeader,
+        {
+          actionButtons,
+          filterItems,
+          tableApi,
+          tableApiParams,
+          title
+        }
+      ),
+      children: /* @__PURE__ */ jsxs(VefCard, { children: [
+        tableNode,
+        formApis && Object.keys(formApis).length > 0 && formGroups.length > 0 && /* @__PURE__ */ jsx(
+          VefCrudFormModal,
+          {
+            formApis,
+            formSchema: formGroups
+          }
+        )
+      ] })
+    }
+  );
+}
+function VefCrudPage({
+  schema,
+  formApis,
+  onFormOpen,
+  onBeforeSubmit,
+  onSubmitSuccess,
+  ...restProps
+}) {
+  const {
+    tableSchema,
+    filterItems,
+    formGroups,
+    filterValueAsDefaultKeys
+  } = useCrudSchema(schema);
+  const formApiKeys = useMemo(() => {
+    const apis = formApis ?? {};
+    return Object.keys(apis).reduce((acc, key) => {
+      if (apis[key]) {
+        acc[key] = apis[key].key;
+      }
+      return acc;
+    }, {});
+  }, [formApis]);
+  const initialState = useMemo(() => ({
+    filterValueAsDefaultKeys,
+    formApiKeys,
+    onBeforeSubmit,
+    onFormOpen,
+    onSubmitSuccess
+  }), [filterValueAsDefaultKeys, formApiKeys, onBeforeSubmit, onFormOpen, onSubmitSuccess]);
+  return /* @__PURE__ */ jsx(CrudStoreProvider, { initialState, children: /* @__PURE__ */ jsx(
+    VefCrudPageBase,
+    {
+      filterItems,
+      formApis,
+      formGroups,
+      tableSchema,
+      ...restProps
+    }
+  ) });
+}
+
+export { VefCrudPage as default };

package/esm/vef-crud-page/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-crud-page/store.js

@@ -0,0 +1,143 @@
+"use strict";
+import { createComponentStore, creationFormScene, isNullish, isFunction, mergeFns, showSuccessMessage, showSuccessAlert, invokeMaybeAsyncFn } from '@vef-framework/shared';
+
+"use strict";
+const {
+  StoreProvider: CrudStoreProvider,
+  useStore: useCrudStore,
+  useStoreApi: useCrudStoreApi
+} = createComponentStore(
+  "Crud",
+  ({
+    filterValueAsDefaultKeys,
+    formApiKeys,
+    onFormOpen,
+    onBeforeSubmit,
+    onSubmitSuccess
+  }) => (set, get) => ({
+    onFormOpen,
+    onBeforeSubmit,
+    onSubmitSuccess,
+    currentFormInfo: {
+      scene: creationFormScene,
+      title: "创建",
+      width: "medium"
+    },
+    currentFormEventHandlers: {},
+    currentFormInitialValues: {},
+    isFormOpen: false,
+    openForm: async ({
+      initialValues,
+      width,
+      onBeforeSubmit: onBeforeSubmit2,
+      onSubmitSuccess: onSubmitSuccess2,
+      showSuccessTip = true,
+      successTipType = "message",
+      ...formInfo
+    }) => {
+      const {
+        filterValues,
+        onFormOpen: onFormOpen2,
+        closeForm,
+        onBeforeSubmit: globalOnBeforeSubmit,
+        onSubmitSuccess: globalOnSubmitSuccess,
+        setIsFormLoading
+      } = get();
+      const initialFormValues = {
+        ...filterValueAsDefaultKeys.reduce((acc, key) => {
+          const value = filterValues[key];
+          if (isNullish(value)) {
+            return acc;
+          }
+          acc[key] = value;
+          return acc;
+        }, {}),
+        ...initialValues
+      };
+      const mergedOnBeforeSubmit = isFunction(onBeforeSubmit2) || isFunction(globalOnBeforeSubmit) ? async (values, scene) => {
+        const result = await onBeforeSubmit2?.(values, scene);
+        const globalResult = await globalOnBeforeSubmit?.(result ?? values, scene);
+        return globalResult ?? result;
+      } : void 0;
+      const mergedOnSubmitSuccess = isFunction(onSubmitSuccess2) || isFunction(globalOnSubmitSuccess) ? mergeFns(
+        ({ message }) => {
+          if (showSuccessTip) {
+            if (successTipType === "message") {
+              showSuccessMessage(message);
+            } else {
+              showSuccessAlert(message);
+            }
+          }
+          closeForm();
+        },
+        onSubmitSuccess2,
+        globalOnSubmitSuccess
+      ) : void 0;
+      set({
+        isFormOpen: true,
+        currentFormInfo: {
+          ...formInfo,
+          width: width ?? "medium"
+        },
+        currentFormEventHandlers: {
+          onBeforeSubmit: mergedOnBeforeSubmit,
+          onSubmitSuccess: mergedOnSubmitSuccess
+        },
+        isFormLoading: Boolean(onFormOpen2)
+      });
+      if (onFormOpen2) {
+        await invokeMaybeAsyncFn(
+          onFormOpen2,
+          {
+            onSuccess: (initialFormValues2) => {
+              set({ currentFormInitialValues: initialFormValues2 });
+            },
+            onFinally: () => {
+              setIsFormLoading(false);
+            }
+          },
+          initialFormValues,
+          filterValues,
+          formInfo.scene
+        );
+      } else {
+        set({
+          currentFormInitialValues: initialFormValues
+        });
+      }
+    },
+    closeForm: () => {
+      set({
+        isFormOpen: false,
+        currentFormInitialValues: {},
+        currentFormEventHandlers: {}
+      });
+    },
+    isFormLoading: false,
+    setIsFormLoading: (isFormLoading) => {
+      set({ isFormLoading });
+    },
+    filterValueAsDefaultKeys,
+    filterValues: {},
+    setFilterValues: (filterValues) => {
+      set({ filterValues });
+    },
+    confirmedFilterValues: null,
+    setConfirmedFilterValues: (confirmedFilterValues) => {
+      set({ confirmedFilterValues });
+    },
+    selectedInfo: {
+      selectedKeys: [],
+      selectedRecords: []
+    },
+    setSelectedInfo: (selectedInfo) => {
+      set({ selectedInfo });
+    },
+    formApiKeys,
+    tableInstanceRef: {
+      current: null
+    }
+  })
+);
+
+export { CrudStoreProvider, useCrudStore, useCrudStoreApi };

package/esm/vef-crud-page/types.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-data-grid/index.js

@@ -0,0 +1,86 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { HotTable } from '@handsontable/react-wrapper';
+import { registerLanguageDictionary, zhCN } from 'handsontable/i18n';
+import { registerAllModules } from 'handsontable/registry';
+import { useRef } from 'react';
+
+"use strict";
+registerAllModules();
+registerLanguageDictionary(zhCN);
+const users = Array.from({ length: 1e3 }).map((_, index) => ({
+  name: `Name${index + 1}`,
+  gender: index % 2 === 0 ? "Male" : "Female",
+  age: Math.floor(Math.random() * 100) + 18,
+  id: index + 1,
+  desc: `Description may be very long, very long, very long, very long, very long, very long, very long, very long, very long, very long${index + 1}`
+}));
+const columns = [
+  {
+    data: "id",
+    title: "ID",
+    fixedColumnsStart: 1
+  },
+  {
+    data: "name",
+    title: "Name"
+  },
+  {
+    data: "gender",
+    title: "Gender"
+  },
+  {
+    data: "age",
+    title: "Age"
+  },
+  {
+    data: "desc",
+    title: "Description",
+    width: 200
+  }
+];
+function VefDataGrid(props) {
+  console.log("file: index.tsx:49 ~ props:", props);
+  const hotTableRef = useRef(null);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        width: "100%",
+        maxHeight: "500px"
+      },
+      children: /* @__PURE__ */ jsx(
+        HotTable,
+        {
+          ref: hotTableRef,
+          autoColumnSize: true,
+          autoRowSize: true,
+          colHeaders: true,
+          disableVisualSelection: true,
+          manualColumnMove: true,
+          manualColumnResize: true,
+          multiColumnSorting: true,
+          readOnly: true,
+          rowHeaders: true,
+          columns,
+          data: users,
+          language: zhCN.languageCode,
+          licenseKey: "non-commercial-and-evaluation",
+          locale: zhCN.languageCode,
+          themeName: "ht-theme-main",
+          beforeColumnSort: (_, sortConfigs) => {
+            console.log("file: index.tsx:68 ~ sortConfigs:", sortConfigs);
+            if (sortConfigs.length > 0) {
+              const header = hotTableRef.current?.hotInstance?.getColHeader(sortConfigs[0].column);
+              console.log("file: index.tsx:77 ~ header:", header);
+              const meta = hotTableRef.current?.hotInstance?.getColumnMeta(sortConfigs[0].column);
+              console.log("file: index.tsx:79 ~ meta:", meta);
+            }
+          }
+        }
+      )
+    }
+  );
+}
+
+export { VefDataGrid as default };

package/esm/vef-data-grid/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-data-table/index.js

@@ -0,0 +1,10 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+
+"use strict";
+function VefDataTable(props) {
+  console.log("file: index.tsx:3 ~ props:", props);
+  return /* @__PURE__ */ jsx("div", { children: "data table" });
+}
+
+export { VefDataTable as default };

package/esm/vef-data-table/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-divider/index.js

@@ -0,0 +1,25 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Divider } from 'antd';
+
+"use strict";
+function VefDivider({
+  orientation,
+  title,
+  titlePosition,
+  titleEdgeMargin,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsx(
+    Divider,
+    {
+      children: title,
+      orientation: titlePosition,
+      orientationMargin: titleEdgeMargin,
+      type: orientation,
+      ...restProps
+    }
+  );
+}
+
+export { VefDivider as default };

package/esm/vef-divider/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-drawer/components/action-button-wrapper.js

@@ -0,0 +1,50 @@
+"use strict";
+import { jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { invokeMaybeAsyncFn } from '@vef-framework/shared';
+import { useState, useMemo, cloneElement } from 'react';
+import { useDrawerContextSelector } from '../context.js';
+
+"use strict";
+function VefDrawerActionButtonWrapper({
+  children
+}) {
+  const [isDisabled, setIsDisabled] = useDrawerContextSelector((ctx) => [ctx.isDisabled, ctx.setIsDisabled]);
+  const [isLoading, setIsLoading] = useState(false);
+  const {
+    disabled,
+    loading,
+    onClick
+  } = children.props;
+  const wrappedOnClick = useMemo(() => {
+    if (!onClick) {
+      return;
+    }
+    return async (event) => {
+      await invokeMaybeAsyncFn(
+        onClick,
+        {
+          beforeInvoke: () => {
+            setIsLoading(true);
+            setIsDisabled(true);
+          },
+          onFinally: () => {
+            setIsLoading(false);
+            setIsDisabled(false);
+          }
+        },
+        event
+      );
+    };
+  }, [onClick, setIsDisabled]);
+  const buttonNode = cloneElement(
+    children,
+    {
+      disabled: isDisabled || disabled,
+      loading: isLoading || loading,
+      onClick: wrappedOnClick
+    }
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: buttonNode });
+}
+
+export { VefDrawerActionButtonWrapper as default };

package/esm/vef-drawer/components/button-props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-drawer/components/cancel-action-button.js

@@ -0,0 +1,22 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import VefButton from '../../vef-button/index.js';
+import VefDrawerActionButtonWrapper from './action-button-wrapper.js';
+
+"use strict";
+function VefCancelActionButton({
+  text,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(VefDrawerActionButtonWrapper, { children: /* @__PURE__ */ jsx(
+    VefButton,
+    {
+      color: "default",
+      variant: "text",
+      onClick,
+      children: text
+    }
+  ) });
+}
+
+export { VefCancelActionButton as default };