@vef-framework/components 1.0.122 → 1.0.124

package/cjs/vef-config-provider/global-style.cjs

@@ -0,0 +1,185 @@
+"use strict";
+'use strict';
+
+var react = require('@emotion/react');
+var shared = require('@vef-framework/shared');
+var modernNormalize = require('../internal/modern-normalize.css.cjs');
+
+"use strict";
+const globalStyle = react.css`
+  ${modernNormalize.default}
+  
+  html, body, #root, .vef-app {
+    height: 100%;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+  }
+
+  .vef-message {
+    .vef-message-notice-wrapper {
+      .vef-message-custom-content {
+        .vef-icon {
+          font-size: ${shared.themeVariables.fontSizeXl};
+        }
+      }
+    }
+  }
+
+  .vef-modal {
+    --vef-modal-confirm-icon-margin-inline-end: ${shared.themeVariables.paddingSm};
+
+    .vef-modal-confirm-body-wrapper {
+      .vef-modal-confirm-btns {
+        text-align: initial;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+      }
+    }
+  }
+
+  .vef-tree-select-dropdown {
+    .vef-select-tree {
+      .vef-select-tree-checkbox {
+        margin-top: calc(var(--vef-tree-select-title-height) / 4);
+      }
+    }
+  }
+
+  .vef-popconfirm {
+    .vef-popconfirm-message {
+      > .vef-popconfirm-message-icon {
+        .vef-icon {
+          color: ${shared.themeVariables.colorPrimary};
+          font-size: ${shared.themeVariables.fontSizeLg};
+        }
+      }
+    }
+    .vef-popconfirm-buttons {
+      text-align: initial;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+  }
+
+  .vef-modal-root {
+    > .vef-modal-wrap {
+      overflow: hidden !important;
+
+      .vef-modal {
+        .vef-modal-content {
+          .vef-modal-footer {
+            text-align: initial;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            gap: ${shared.themeVariables.padding};
+
+            .vef-btn + .vef-btn {
+              margin-inline-start: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .vef-picker-range {
+    display: flex;
+  }
+
+  .vef-dropdown {
+    .vef-dropdown-menu {
+      .vef-dropdown-menu-item-icon {
+        font-size: ${shared.themeVariables.fontSize};
+        min-width: ${shared.themeVariables.fontSizeLg};
+      }
+    }
+  }
+`;
+const nprogressStyle = react.css`
+  /* Make clicks pass-through */
+  #nprogress {
+    pointer-events: none;
+  }
+
+  #nprogress .bar {
+    background: ${shared.themeVariables.colorPrimary};
+
+    position: fixed;
+    z-index: 1031;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 2px;
+  }
+
+  /* Fancy blur effect */
+  #nprogress .peg {
+    display: block;
+    position: absolute;
+    right: 0;
+    width: 100px;
+    height: 100%;
+    box-shadow: 0 0 10px ${shared.themeVariables.colorPrimary}, 0 0 5px ${shared.themeVariables.colorPrimary};
+    opacity: 1.0;
+
+    -webkit-transform: rotate(3deg) translate(0, -4px);
+        -ms-transform: rotate(3deg) translate(0, -4px);
+            transform: rotate(3deg) translate(0, -4px);
+  }
+
+  /* Remove these to get rid of the spinner */
+  #nprogress .spinner {
+    display: block;
+    position: fixed;
+    z-index: 1031;
+    top: 15px;
+    right: 15px;
+  }
+
+  #nprogress .spinner-icon {
+    width: 18px;
+    height: 18px;
+    box-sizing: border-box;
+
+    border: solid 2px transparent;
+    border-top-color: ${shared.themeVariables.colorPrimary};
+    border-left-color: ${shared.themeVariables.colorPrimary};
+    border-radius: 50%;
+
+    -webkit-animation: nprogress-spinner 400ms linear infinite;
+            animation: nprogress-spinner 400ms linear infinite;
+  }
+
+  .nprogress-custom-parent {
+    overflow: hidden;
+    position: relative;
+  }
+
+  .nprogress-custom-parent #nprogress .spinner,
+  .nprogress-custom-parent #nprogress .bar {
+    position: absolute;
+  }
+
+  @-webkit-keyframes nprogress-spinner {
+    0%   { -webkit-transform: rotate(0deg); }
+    100% { -webkit-transform: rotate(360deg); }
+  }
+  @keyframes nprogress-spinner {
+    0%   { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+`;
+
+exports.globalStyle = globalStyle;
+exports.nprogressStyle = nprogressStyle;

package/cjs/vef-config-provider/hooks/use-ui-config.cjs

@@ -0,0 +1,129 @@
+"use strict";
+'use strict';
+
+var hooks = require('@vef-framework/hooks');
+var shared = require('@vef-framework/shared');
+var antd = require('antd');
+var locale = require('antd/locale/zh_CN');
+var dayjs = require('dayjs');
+var dayjsLocale = require('dayjs/locale/zh-cn');
+
+"use strict";
+dayjs.locale(dayjsLocale);
+const colorMap = {
+  blue: "#3b82f6",
+  purple: "#8b5cf6",
+  cyan: "#06b6d4",
+  green: "#22c55e",
+  pink: "#ec4899",
+  red: "#ef4444",
+  orange: "#f97316",
+  yellow: "#eab308",
+  volcano: "#f43f5e",
+  lime: "#84cc16",
+  gold: "#fbbf24",
+  geekblue: "#6366f1",
+  magenta: "#eb2f96"
+};
+const fontSizeConfigMap = {
+  medium: {
+    fontSize: 14,
+    controlHeight: 32
+  },
+  large: {
+    fontSize: 16,
+    controlHeight: 36
+  }
+};
+const fontSizeComponentsConfigMap = {
+  medium: {
+    Button: {
+      contentFontSizeSM: 12
+    }
+  },
+  large: {
+    Button: {
+      contentFontSizeSM: 14
+    },
+    Menu: {
+      itemHeight: 50
+    }
+  }
+};
+function generateUiConfig({
+  primaryColor = "#0064fa",
+  fontSize = "medium"
+}) {
+  if (!Reflect.has(colorMap, primaryColor) && !shared.isValidColor(primaryColor)) {
+    throw new Error(`Invalid primary color: ${primaryColor}`);
+  }
+  if (!(fontSize in fontSizeConfigMap)) {
+    throw new Error(`Invalid font size: ${fontSize}`);
+  }
+  const fontSizeConfig = fontSizeConfigMap[fontSize];
+  const componentsConfig = fontSizeComponentsConfigMap[fontSize];
+  return {
+    messageFoldThreshold: 1,
+    messageDuration: 3,
+    notificationFoldThreshold: 3,
+    notificationDuration: 5,
+    locale: Reflect.has(locale, "default") ? Reflect.get(locale, "default") : locale,
+    iconPrefixCls: "vef-icon",
+    prefixCls: "vef",
+    virtual: true,
+    componentSize: "middle",
+    variant: "outlined",
+    theme: {
+      cssVar: {
+        prefix: "vef"
+      },
+      hashed: false,
+      algorithm: antd.theme.defaultAlgorithm,
+      token: {
+        borderRadius: 6,
+        colorBgBase: "#ffffff",
+        colorPrimary: Reflect.has(colorMap, primaryColor) ? colorMap[primaryColor] : primaryColor,
+        colorInfo: "#0ea5e9",
+        colorSuccess: "#22c55e",
+        colorWarning: "#f97316",
+        colorError: "#ef4444",
+        colorLink: "#6366f1",
+        colorTextBase: "#171717",
+        colorBgLayout: "#f5f6fb",
+        colorBgSpotlight: "rgba(23, 23, 23, 0.8)",
+        zIndexPopupBase: 10,
+        wireframe: true,
+        ...fontSizeConfig,
+        ...colorMap
+      },
+      components: shared.assign({
+        Table: {
+          // headerBorderRadius: 0,
+        },
+        Tooltip: {
+          paddingSM: 16,
+          paddingXS: 12
+        },
+        Button: {
+          // onlyIconSize: 24,
+          // onlyIconSizeSM: 18,
+          // onlyIconSizeLG: 30,
+        },
+        TreeSelect: {
+          titleHeight: fontSizeConfig.controlHeight
+        },
+        Spin: {
+          contentHeight: "auto"
+        }
+      }, componentsConfig)
+    }
+  };
+}
+function useUiConfig(config) {
+  return hooks.useDeepMemo(
+    () => generateUiConfig(config),
+    [config]
+  );
+}
+
+exports.useUiConfig = useUiConfig;

package/cjs/vef-config-provider/index.cjs

@@ -0,0 +1,128 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var createCache = require('@emotion/cache');
+var react$1 = require('@emotion/react');
+var core = require('@vef-framework/core');
+var antd = require('antd');
+var react = require('react');
+var reactErrorBoundary = require('react-error-boundary');
+var index = require('../vef-error/index.cjs');
+var globalStyle = require('./global-style.cjs');
+var useUiConfig = require('./hooks/use-ui-config.cjs');
+var store = require('./store.cjs');
+
+"use strict";
+function UiConfigProvider({ children }) {
+  const config = store.useConfigStore((state) => state);
+  const uiConfig = useUiConfig.useUiConfig(config);
+  react.useLayoutEffect(() => {
+    const {
+      messageFoldThreshold: messageFoldThreshold2,
+      messageDuration: messageDuration2,
+      notificationFoldThreshold,
+      notificationDuration: notificationDuration2,
+      ...restConfig2
+    } = uiConfig;
+    antd.ConfigProvider.config({
+      holderRender: (children2) => /* @__PURE__ */ jsxRuntime.jsx(antd.ConfigProvider, { ...restConfig2, children: /* @__PURE__ */ jsxRuntime.jsx(
+        antd.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__ */ jsxRuntime.jsx(antd.ConfigProvider, { ...restConfig, children: /* @__PURE__ */ jsxRuntime.jsx(
+    antd.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__ */ jsxRuntime.jsx(index.default, { error, reset: resetErrorBoundary });
+}
+const vefCache = createCache({
+  key: "vef"
+});
+function VefConfigProvider({
+  apiClient,
+  dataDictionaryApi,
+  loginApi,
+  logoutApi,
+  fetchAuthenticatedUserApi,
+  permissionChecker,
+  children,
+  ...config
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(core.AuthContextProvider, { permissionChecker, children: /* @__PURE__ */ jsxRuntime.jsx(
+    core.ApiContextProvider,
+    {
+      client: apiClient,
+      dataDictionaryApi,
+      fetchAuthenticatedUserApi,
+      loginApi,
+      logoutApi,
+      children: /* @__PURE__ */ jsxRuntime.jsx(store.ConfigStoreProvider, { initialState: config, children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.CacheProvider, { value: vefCache, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react$1.Global,
+          {
+            styles: [
+              globalStyle.globalStyle,
+              globalStyle.nprogressStyle,
+              react$1.css`
+                :root {
+                  font-size: ${(config.fontSize ?? "medium") === "medium" ? "14px" : "16px"};
+                }
+              `
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(UiConfigProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, { FallbackComponent, children }) })
+      ] }) })
+    }
+  ) });
+}
+
+exports.default = VefConfigProvider;

package/cjs/vef-config-provider/props.cjs

@@ -0,0 +1,4 @@
+"use strict";
+'use strict';
+
+"use strict";

package/cjs/vef-config-provider/store.cjs

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

package/cjs/vef-container/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var antd = require('antd');
+var index = require('../vef-scroll-area/index.cjs');
+
+"use strict";
+const { BackTop } = antd.FloatButton;
+function VefContainer({
+  className,
+  style,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.default, { className, style, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(BackTop, {})
+  ] });
+}
+
+exports.default = VefContainer;

package/cjs/vef-container/props.cjs

@@ -0,0 +1,4 @@
+"use strict";
+'use strict';
+
+"use strict";

package/cjs/vef-crud-page/components/crud-actions.cjs

@@ -0,0 +1,37 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var hooks = require('@vef-framework/hooks');
+var react = require('react');
+var index = require('../../vef-action-buttons/index.cjs');
+var useActionButtons = require('../hooks/use-action-buttons.cjs');
+var useCrudContext = require('../hooks/use-crud-context.cjs');
+var store = require('../store.cjs');
+
+"use strict";
+function VefCrudActions({
+  tableApi,
+  tableApiParams,
+  actionButtons
+}) {
+  const confirmedFilterValues = store.useCrudStore((state) => state.confirmedFilterValues);
+  const isFetching = tableApi.useIsFetching(react.useMemo(() => ({
+    ...tableApiParams,
+    ...confirmedFilterValues
+  }), [tableApiParams, confirmedFilterValues]));
+  const crudContext = useCrudContext.useCrudContext();
+  const actionButtonsToUse = useActionButtons.useActionButtons(actionButtons);
+  return /* @__PURE__ */ jsxRuntime.jsx(hooks.DisabledContextProvider, { value: isFetching, children: /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      buttons: actionButtonsToUse,
+      context: crudContext,
+      useFlexContainer: false
+    }
+  ) });
+}
+
+exports.default = VefCrudActions;

package/cjs/vef-crud-page/components/crud-filter.cjs

@@ -0,0 +1,59 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('react');
+var index$1 = require('../../vef-action-buttons/index.cjs');
+var index = require('../../vef-filter/index.cjs');
+var index$2 = require('../../vef-title/index.cjs');
+var useActionButtons = require('../hooks/use-action-buttons.cjs');
+var useCrudContext = require('../hooks/use-crud-context.cjs');
+var store = require('../store.cjs');
+
+"use strict";
+function VefCrudFilter({
+  title,
+  tableApi,
+  tableApiParams,
+  filterSchema,
+  actionButtons
+}) {
+  const [setFilterValues, confirmedFilterValues, setConfirmedFilterValues] = store.useCrudStore((state) => [
+    state.setFilterValues,
+    state.confirmedFilterValues,
+    state.setConfirmedFilterValues
+  ]);
+  const isFetching = tableApi.useIsFetching(react.useMemo(() => ({
+    ...tableApiParams,
+    ...confirmedFilterValues
+  }), [tableApiParams, confirmedFilterValues]));
+  const crudContext = useCrudContext.useCrudContext();
+  const actionButtonsToUse = useActionButtons.useActionButtons(actionButtons);
+  const handleReset = react.useCallback(
+    () => setConfirmedFilterValues(null),
+    [setConfirmedFilterValues]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      loading: isFetching,
+      prefix: /* @__PURE__ */ jsxRuntime.jsx(index$2.default, { noPaddingBottom: true, showLeftBar: true, level: 5, children: title }),
+      schema: filterSchema,
+      extraActionButtons: /* @__PURE__ */ jsxRuntime.jsx(
+        index$1.default,
+        {
+          buttons: actionButtonsToUse,
+          context: crudContext,
+          useFlexContainer: false
+        }
+      ),
+      onChange: setFilterValues,
+      onConfirm: setConfirmedFilterValues,
+      onReset: handleReset
+    }
+  );
+}
+
+exports.default = VefCrudFilter;