@vef-framework/components 1.0.122 → 1.0.124

package/esm/vef-config-provider/index.js

@@ -0,0 +1,124 @@
+"use strict";
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import createCache from '@emotion/cache';
+import { CacheProvider, Global, css } from '@emotion/react';
+import { AuthContextProvider, ApiContextProvider } from '@vef-framework/core';
+import { ConfigProvider, App } from 'antd';
+import { useLayoutEffect } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import VefError from '../vef-error/index.js';
+import { globalStyle, nprogressStyle } from './global-style.js';
+import { useUiConfig } from './hooks/use-ui-config.js';
+import { useConfigStore, ConfigStoreProvider } from './store.js';
+
+"use strict";
+function UiConfigProvider({ children }) {
+  const config = useConfigStore((state) => state);
+  const uiConfig = useUiConfig(config);
+  useLayoutEffect(() => {
+    const {
+      messageFoldThreshold: messageFoldThreshold2,
+      messageDuration: messageDuration2,
+      notificationFoldThreshold,
+      notificationDuration: notificationDuration2,
+      ...restConfig2
+    } = uiConfig;
+    ConfigProvider.config({
+      holderRender: (children2) => /* @__PURE__ */ jsx(ConfigProvider, { ...restConfig2, children: /* @__PURE__ */ jsx(
+        App,
+        {
+          component: "div",
+          message: {
+            maxCount: messageFoldThreshold2,
+            duration: messageDuration2
+          },
+          notification: {
+            maxCount: notificationFoldThreshold,
+            duration: notificationDuration2,
+            showProgress: true,
+            pauseOnHover: true,
+            placement: "topRight",
+            stack: {
+              threshold: 3
+            }
+          },
+          children: children2
+        }
+      ) })
+    });
+    document.documentElement.style.setProperty("--vef-color-primary", uiConfig.theme?.token?.colorPrimary ?? null);
+  }, [uiConfig]);
+  const {
+    messageFoldThreshold,
+    messageDuration,
+    notificationDuration,
+    ...restConfig
+  } = uiConfig;
+  return /* @__PURE__ */ jsx(ConfigProvider, { ...restConfig, children: /* @__PURE__ */ jsx(
+    App,
+    {
+      component: "div",
+      message: {
+        maxCount: messageFoldThreshold,
+        duration: messageDuration
+      },
+      notification: {
+        maxCount: messageFoldThreshold,
+        duration: notificationDuration,
+        showProgress: true,
+        pauseOnHover: true,
+        placement: "topRight",
+        stack: {
+          threshold: 3
+        }
+      },
+      children
+    }
+  ) });
+}
+function FallbackComponent({ error, resetErrorBoundary }) {
+  return /* @__PURE__ */ jsx(VefError, { error, reset: resetErrorBoundary });
+}
+const vefCache = createCache({
+  key: "vef"
+});
+function VefConfigProvider({
+  apiClient,
+  dataDictionaryApi,
+  loginApi,
+  logoutApi,
+  fetchAuthenticatedUserApi,
+  permissionChecker,
+  children,
+  ...config
+}) {
+  return /* @__PURE__ */ jsx(AuthContextProvider, { permissionChecker, children: /* @__PURE__ */ jsx(
+    ApiContextProvider,
+    {
+      client: apiClient,
+      dataDictionaryApi,
+      fetchAuthenticatedUserApi,
+      loginApi,
+      logoutApi,
+      children: /* @__PURE__ */ jsx(ConfigStoreProvider, { initialState: config, children: /* @__PURE__ */ jsxs(CacheProvider, { value: vefCache, children: [
+        /* @__PURE__ */ jsx(
+          Global,
+          {
+            styles: [
+              globalStyle,
+              nprogressStyle,
+              css`
+                :root {
+                  font-size: ${(config.fontSize ?? "medium") === "medium" ? "14px" : "16px"};
+                }
+              `
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(UiConfigProvider, { children: /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent, children }) })
+      ] }) })
+    }
+  ) });
+}
+
+export { VefConfigProvider as default };

package/esm/vef-config-provider/props.js

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

package/esm/vef-config-provider/store.js

@@ -0,0 +1,22 @@
+"use strict";
+import { createComponentStore } from '@vef-framework/shared';
+
+"use strict";
+const {
+  StoreProvider: ConfigStoreProvider,
+  useStore: useConfigStore,
+  useStoreApi: useConfigStoreApi
+} = createComponentStore(
+  "Config",
+  ({
+    fontSize = "large",
+    primaryColor = "#0064fa"
+  }) => (set) => ({
+    fontSize,
+    primaryColor,
+    setFontSize: (fontSize2) => set({ fontSize: fontSize2 }),
+    setPrimaryColor: (primaryColor2) => set({ primaryColor: primaryColor2 })
+  })
+);
+
+export { ConfigStoreProvider, useConfigStore, useConfigStoreApi };

package/esm/vef-container/index.js

@@ -0,0 +1,19 @@
+"use strict";
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { FloatButton } from 'antd';
+import VefScrollArea from '../vef-scroll-area/index.js';
+
+"use strict";
+const { BackTop } = FloatButton;
+function VefContainer({
+  className,
+  style,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(VefScrollArea, { className, style, children: [
+    children,
+    /* @__PURE__ */ jsx(BackTop, {})
+  ] });
+}
+
+export { VefContainer as default };

package/esm/vef-container/props.js

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

package/esm/vef-crud-page/components/crud-actions.js

@@ -0,0 +1,33 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { DisabledContextProvider } from '@vef-framework/hooks';
+import { useMemo } from 'react';
+import VefActionButtons from '../../vef-action-buttons/index.js';
+import { useActionButtons } from '../hooks/use-action-buttons.js';
+import { useCrudContext } from '../hooks/use-crud-context.js';
+import { useCrudStore } from '../store.js';
+
+"use strict";
+function VefCrudActions({
+  tableApi,
+  tableApiParams,
+  actionButtons
+}) {
+  const confirmedFilterValues = useCrudStore((state) => state.confirmedFilterValues);
+  const isFetching = tableApi.useIsFetching(useMemo(() => ({
+    ...tableApiParams,
+    ...confirmedFilterValues
+  }), [tableApiParams, confirmedFilterValues]));
+  const crudContext = useCrudContext();
+  const actionButtonsToUse = useActionButtons(actionButtons);
+  return /* @__PURE__ */ jsx(DisabledContextProvider, { value: isFetching, children: /* @__PURE__ */ jsx(
+    VefActionButtons,
+    {
+      buttons: actionButtonsToUse,
+      context: crudContext,
+      useFlexContainer: false
+    }
+  ) });
+}
+
+export { VefCrudActions as default };

package/esm/vef-crud-page/components/crud-filter.js

@@ -0,0 +1,55 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useMemo, useCallback } from 'react';
+import VefActionButtons from '../../vef-action-buttons/index.js';
+import VefFilter from '../../vef-filter/index.js';
+import VefTitle from '../../vef-title/index.js';
+import { useActionButtons } from '../hooks/use-action-buttons.js';
+import { useCrudContext } from '../hooks/use-crud-context.js';
+import { useCrudStore } from '../store.js';
+
+"use strict";
+function VefCrudFilter({
+  title,
+  tableApi,
+  tableApiParams,
+  filterSchema,
+  actionButtons
+}) {
+  const [setFilterValues, confirmedFilterValues, setConfirmedFilterValues] = useCrudStore((state) => [
+    state.setFilterValues,
+    state.confirmedFilterValues,
+    state.setConfirmedFilterValues
+  ]);
+  const isFetching = tableApi.useIsFetching(useMemo(() => ({
+    ...tableApiParams,
+    ...confirmedFilterValues
+  }), [tableApiParams, confirmedFilterValues]));
+  const crudContext = useCrudContext();
+  const actionButtonsToUse = useActionButtons(actionButtons);
+  const handleReset = useCallback(
+    () => setConfirmedFilterValues(null),
+    [setConfirmedFilterValues]
+  );
+  return /* @__PURE__ */ jsx(
+    VefFilter,
+    {
+      loading: isFetching,
+      prefix: /* @__PURE__ */ jsx(VefTitle, { noPaddingBottom: true, showLeftBar: true, level: 5, children: title }),
+      schema: filterSchema,
+      extraActionButtons: /* @__PURE__ */ jsx(
+        VefActionButtons,
+        {
+          buttons: actionButtonsToUse,
+          context: crudContext,
+          useFlexContainer: false
+        }
+      ),
+      onChange: setFilterValues,
+      onConfirm: setConfirmedFilterValues,
+      onReset: handleReset
+    }
+  );
+}
+
+export { VefCrudFilter as default };

package/esm/vef-crud-page/components/crud-footer.js

@@ -0,0 +1,121 @@
+"use strict";
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { useApiContext } from '@vef-framework/core';
+import { DisabledContextProvider } from '@vef-framework/hooks';
+import { themeVariables, isNullish, showSuccessMessage, isFunction } from '@vef-framework/shared';
+import { Trash2Icon } from 'lucide-react';
+import { useMemo, useCallback, memo } from 'react';
+import VefActionButtons from '../../vef-action-buttons/index.js';
+import VefButton from '../../vef-button/index.js';
+import VefDivider from '../../vef-divider/index.js';
+import VefFlex from '../../vef-flex/index.js';
+import VefIcon from '../../vef-icon/index.js';
+import VefText from '../../vef-text/index.js';
+import { useCrudContext } from '../hooks/use-crud-context.js';
+import { useCrudStore } from '../store.js';
+
+"use strict";
+const footerStyle = css`
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${themeVariables.padding};
+`;
+function VefCrudFooterBase({
+  tableApi,
+  tableApiParams,
+  batchDeletionApi,
+  batchActionButtons,
+  selectionSummary
+}) {
+  const { useApiMutation, stubMutationApi } = useApiContext();
+  const batchDeletionMutation = useApiMutation(batchDeletionApi ?? stubMutationApi);
+  const [selectedInfo, confirmedFilterValues, setSelectedInfo] = useCrudStore((state) => [
+    state.selectedInfo,
+    state.confirmedFilterValues,
+    state.setSelectedInfo
+  ]);
+  const { selectedKeys, selectedRecords } = selectedInfo;
+  const batchActionButtonsToUse = useMemo(() => {
+    if (!isNullish(batchDeletionApi)) {
+      return [
+        ...batchActionButtons ?? [],
+        {
+          key: "_batchDeletion",
+          label: "批量删除",
+          icon: /* @__PURE__ */ jsx(VefIcon, { children: /* @__PURE__ */ jsx(Trash2Icon, {}) }),
+          color: "error",
+          permissions: [batchDeletionApi.key],
+          requireConfirmation: true,
+          confirmationMode: "detailed",
+          onClick: async ({ refetch }) => {
+            const { message } = await batchDeletionMutation.mutate(selectedRecords);
+            showSuccessMessage(message);
+            refetch();
+          }
+        }
+      ];
+    }
+    return batchActionButtons ?? [];
+  }, [batchActionButtons, batchDeletionApi, batchDeletionMutation, selectedRecords]);
+  const crudContext = useCrudContext();
+  const batchActionButtonContext = useMemo(() => ({
+    ...crudContext,
+    ...selectedInfo
+  }), [crudContext, selectedInfo]);
+  const isFetching = tableApi.useIsFetching(useMemo(() => ({
+    ...tableApiParams,
+    ...confirmedFilterValues
+  }), [tableApiParams, confirmedFilterValues]));
+  const handleCancelSelection = useCallback(() => {
+    setSelectedInfo({
+      selectedKeys: [],
+      selectedRecords: []
+    });
+  }, [setSelectedInfo]);
+  const selectionSummaryNode = useMemo(() => {
+    if (isFunction(selectionSummary)) {
+      return selectionSummary(selectedRecords);
+    }
+  }, [selectedRecords, selectionSummary]);
+  if (selectedKeys.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { css: footerStyle, children: [
+    /* @__PURE__ */ jsxs(VefText, { color: "secondary", children: [
+      "已选择",
+      " ",
+      /* @__PURE__ */ jsx(VefText, { bold: true, color: "primary", children: selectedKeys.length }),
+      " ",
+      "项",
+      selectionSummaryNode && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(VefDivider, { orientation: "vertical" }),
+        selectionSummaryNode
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(DisabledContextProvider, { value: isFetching, children: /* @__PURE__ */ jsxs(VefFlex, { align: "center", gap: "medium", children: [
+      /* @__PURE__ */ jsx(
+        VefButton,
+        {
+          color: "primary",
+          variant: "text",
+          onClick: handleCancelSelection,
+          children: "取消选择"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        VefActionButtons,
+        {
+          buttons: batchActionButtonsToUse,
+          context: batchActionButtonContext,
+          useFlexContainer: false
+        }
+      )
+    ] }) })
+  ] });
+}
+const VefCrudFooter = memo(VefCrudFooterBase);
+
+export { VefCrudFooter as default };

package/esm/vef-crud-page/components/crud-form-modal.js

@@ -0,0 +1,54 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import VefFormModal from '../../vef-form-modal/index.js';
+import { useCrudStore } from '../store.js';
+
+"use strict";
+function VefCrudFormModal({
+  formSchema,
+  formApis
+}) {
+  const [
+    isFormOpen,
+    {
+      scene,
+      title,
+      width
+    },
+    { onBeforeSubmit, onSubmitSuccess },
+    currentFormInitialValues,
+    isFormLoading,
+    closeForm
+  ] = useCrudStore(
+    (state) => [
+      state.isFormOpen,
+      state.currentFormInfo,
+      state.currentFormEventHandlers,
+      state.currentFormInitialValues,
+      state.isFormLoading,
+      state.closeForm
+    ]
+  );
+  const formApi = formApis[scene];
+  if (!formApi) {
+    throw new Error(`Form api for scene ${scene} not found, please check the formApis props of VefCrudPage component.`);
+  }
+  return /* @__PURE__ */ jsx(
+    VefFormModal,
+    {
+      initialValues: currentFormInitialValues,
+      loading: isFormLoading,
+      open: isFormOpen,
+      scene,
+      schema: formSchema,
+      submitApi: formApi,
+      title,
+      width,
+      onBeforeSubmit,
+      onClose: closeForm,
+      onSubmitSuccess
+    }
+  );
+}
+
+export { VefCrudFormModal as default };

package/esm/vef-crud-page/components/crud-header.js

@@ -0,0 +1,30 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { memo } from 'react';
+import VefCrudFilter from './crud-filter.js';
+
+"use strict";
+function VefCrudHeaderBase({
+  title,
+  tableApi,
+  tableApiParams,
+  filterItems,
+  actionButtons
+}) {
+  if (filterItems.length > 0) {
+    return /* @__PURE__ */ jsx(
+      VefCrudFilter,
+      {
+        actionButtons,
+        filterSchema: filterItems,
+        tableApi,
+        tableApiParams,
+        title
+      }
+    );
+  }
+  return null;
+}
+const VefCrudHeader = memo(VefCrudHeaderBase);
+
+export { VefCrudHeader as default };

package/esm/vef-crud-page/components/crud-table.js

@@ -0,0 +1,77 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useMemo, useCallback, useRef, useEffect, memo } from 'react';
+import VefTable from '../../vef-table/index.js';
+import { useCrudContext } from '../hooks/use-crud-context.js';
+import { useOperationButtons } from '../hooks/use-operation-buttons.js';
+import { useCrudStore, useCrudStoreApi } from '../store.js';
+
+"use strict";
+function VefCrudTableBase({
+  api,
+  apiParams,
+  deletionApi,
+  paginated,
+  schema,
+  selectable,
+  operationButtons,
+  ...tableProps
+}) {
+  const [confirmedFilterValues, selectedInfo, setSelectedInfo] = useCrudStore((state) => [state.confirmedFilterValues, state.selectedInfo, state.setSelectedInfo]);
+  const mergedApiParams = useMemo(() => ({
+    ...apiParams,
+    ...confirmedFilterValues
+  }), [apiParams, confirmedFilterValues]);
+  const handleSelectionChange = useCallback((selectedKeys, selectedRecords) => {
+    setSelectedInfo({
+      selectedKeys,
+      selectedRecords
+    });
+  }, [setSelectedInfo]);
+  const operationButtonsToUse = useOperationButtons(deletionApi, operationButtons);
+  const tableInstanceRef = useRef(null);
+  const crudStore = useCrudStoreApi();
+  useEffect(() => {
+    crudStore.setState({ tableInstanceRef });
+  }, [crudStore]);
+  const crudContext = useCrudContext();
+  if (paginated) {
+    return /* @__PURE__ */ jsx(
+      VefTable,
+      {
+        ref: tableInstanceRef,
+        multipleSelection: true,
+        paginated: true,
+        api,
+        apiParams: mergedApiParams,
+        externalContext: crudContext,
+        operationButtons: operationButtonsToUse,
+        schema,
+        selectable,
+        selectedKeys: selectedInfo.selectedKeys,
+        selectionSummary: false,
+        onRowSelectionChange: handleSelectionChange,
+        ...tableProps
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    VefTable,
+    {
+      ref: tableInstanceRef,
+      multipleSelection: true,
+      api,
+      apiParams: mergedApiParams,
+      externalContext: crudContext,
+      schema,
+      selectable,
+      selectedKeys: selectedInfo.selectedKeys,
+      selectionSummary: false,
+      onRowSelectionChange: handleSelectionChange,
+      ...tableProps
+    }
+  );
+}
+const VefCrudTable = memo(VefCrudTableBase);
+
+export { VefCrudTable as default };

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

@@ -0,0 +1,38 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { creationFormScene } from '@vef-framework/shared';
+import { PlusIcon } from 'lucide-react';
+import { useMemo } from 'react';
+import VefIcon from '../../vef-icon/index.js';
+import { useCrudStore } from '../store.js';
+
+"use strict";
+function useActionButtons(actionButtons) {
+  const formApiKeys = useCrudStore((state) => state.formApiKeys);
+  const showCreationActionButton = Reflect.has(formApiKeys, creationFormScene);
+  const creationFormApiKey = Reflect.get(formApiKeys, creationFormScene);
+  return useMemo(() => {
+    if (showCreationActionButton) {
+      return [
+        ...actionButtons ?? [],
+        {
+          label: "创建",
+          key: `_${creationFormScene}`,
+          icon: /* @__PURE__ */ jsx(VefIcon, { children: /* @__PURE__ */ jsx(PlusIcon, {}) }),
+          color: "primary",
+          permissions: [creationFormApiKey],
+          onClick: ({ openForm, refetch }) => openForm({
+            scene: creationFormScene,
+            title: "创建",
+            onSubmitSuccess: () => {
+              refetch();
+            }
+          })
+        }
+      ];
+    }
+    return actionButtons ?? [];
+  }, [showCreationActionButton, actionButtons, creationFormApiKey]);
+}
+
+export { useActionButtons };

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

@@ -0,0 +1,21 @@
+"use strict";
+import { useMemo } from 'react';
+import { useCrudStore } from '../store.js';
+
+"use strict";
+function useCrudContext() {
+  const [openForm, filterValues, tableInstanceRef] = useCrudStore((state) => [
+    state.openForm,
+    state.filterValues,
+    state.tableInstanceRef
+  ]);
+  return useMemo(() => ({
+    openForm,
+    filterValues,
+    refetch: async () => {
+      await tableInstanceRef.current?.refetch();
+    }
+  }), [openForm, filterValues, tableInstanceRef]);
+}
+
+export { useCrudContext };