@zat-design/sisyphus-react 4.6.1 → 4.6.3-beta.1

package/es/ProForm/components/combination/FormList/style/index.less

@@ -17,16 +17,6 @@
     color: #949599;
   }
 
-  .single-delete {
-    width: 14px !important;
-    height: 14px !important;
-    color: @zaui-placeholder;
-
-    &:hover {
-      color: @zaui-aide-text;
-    }
-  }
-
   &:nth-child(1) {
     flex: 1;
   }
@@ -59,6 +49,30 @@
   }
 }
 
+.pro-form-list,
+.pro-form-list-tabs {
+  .@{ant-prefix}-tabs-nav {
+    margin-bottom: 0 !important;
+  }
+  &.@{ant-prefix}-tabs-card {
+    .@{ant-prefix}-tabs-tab {
+      padding: 0 !important;
+      margin-right: 4px !important;
+      min-width: 70px;
+    }
+  }
+
+  .single-delete {
+    width: 14px !important;
+    height: 14px !important;
+    color: @zaui-placeholder;
+
+    &:hover {
+      color: @zaui-aide-text;
+    }
+  }
+}
+
 .pro-form-list-line {
   padding: var(--zaui-height-size-md, 16px);
   padding-bottom: 0;
@@ -102,6 +116,125 @@
       background: transparent !important;
     }
   }
+
+  .pro-form-list-tool-btn-tabs {
+    width: auto;
+    min-width: 20px;
+    height: 20px;
+    padding: 0;
+
+    &:hover {
+      background: transparent !important;
+    }
+  }
+}
+
+.pro-form-list-tabs {
+  &.@{ant-prefix}-tabs > .@{ant-prefix}-tabs-nav {
+    .@{ant-prefix}-tabs-nav-wrap {
+      overflow-x: clip;
+      overflow-y: visible;
+    }
+
+    .@{ant-prefix}-tabs-nav-list {
+      overflow: visible;
+    }
+  }
+
+  &.@{ant-prefix}-tabs-card > .@{ant-prefix}-tabs-nav {
+    &::before {
+      border-bottom-color: var(--ant-color-border, #d9d9d9);
+    }
+
+    .@{ant-prefix}-tabs-tab {
+      padding: 0;
+      border-color: var(--ant-color-border, #d9d9d9);
+      border-radius: var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px) 0 0;
+
+      &.@{ant-prefix}-tabs-tab-active {
+        border-bottom-color: var(--ant-color-bg-container, #fff);
+      }
+    }
+
+    .@{ant-prefix}-tabs-tab + .@{ant-prefix}-tabs-tab,
+    .@{ant-prefix}-tabs-nav-add {
+      margin-left: 4px;
+    }
+
+    .@{ant-prefix}-tabs-nav-add {
+      width: auto;
+      padding: 0 @zaui-space-size-xs;
+      border-color: var(--ant-color-border, #d9d9d9);
+      border-radius: var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px) 0 0;
+    }
+  }
+
+  .pro-form-list-tabs-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .pro-form-list-tabs-title {
+    white-space: nowrap;
+  }
+
+  .pro-form-list-tabs-error-badge {
+    display: inline-flex;
+
+    .@{ant-prefix}-badge-count {
+      top: 0;
+      right: 0;
+      z-index: 2;
+      pointer-events: none;
+      transform: translate(50%, -50%);
+      box-shadow: 0 0 0 2px var(--ant-color-bg-container, #fff);
+      transition: none;
+      animation: none;
+
+      .@{ant-prefix}-scroll-number-only-unit {
+        transition: none;
+      }
+    }
+  }
+
+  .pro-form-list-tabs-title-content {
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+  }
+
+  .pro-form-list-tabs-drag-handle {
+    display: inline-flex;
+    align-items: center;
+    .pro-icon {
+      cursor: move;
+    }
+  }
+  .pro-form-list-delete-icon {
+    &:hover {
+      background: transparent !important;
+    }
+  }
+
+  .pro-form-list-tabs-add {
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+    white-space: nowrap;
+    .pro-form-list-tabs-add-label {
+      font-size: 14px;
+    }
+  }
+
+  .pro-form-list-action {
+    padding-bottom: 0;
+  }
+
+  .pro-form-list-tabs-content {
+    padding: 12px 0 0;
+    border: 0;
+  }
 }
 
 .pro-form-list-empty {

package/es/ProForm/components/combination/FormList/tabsValidation.d.ts

@@ -0,0 +1,14 @@
+import type { FormInstance } from 'antd';
+import type { InternalNamePath } from 'antd/es/form/interface';
+export interface FormListTabsErrorField {
+    errors?: unknown[];
+    name: InternalNamePath;
+}
+export interface FormListTabsValidationEvent {
+    errorFields: FormListTabsErrorField[];
+    reason: 'fieldsChange' | 'submitFailed' | 'submitSuccess';
+}
+type FormListTabsValidationListener = (event: FormListTabsValidationEvent) => void;
+export declare const subscribeFormListTabsValidation: (form: FormInstance, listener: FormListTabsValidationListener) => () => void;
+export declare const notifyFormListTabsValidation: (form: FormInstance, event: FormListTabsValidationEvent) => void;
+export {};

package/es/ProForm/components/combination/FormList/tabsValidation.js

@@ -0,0 +1,19 @@
+const formListeners = /* @__PURE__ */ new WeakMap();
+const subscribeFormListTabsValidation = (form, listener) => {
+  const listeners = formListeners.get(form) || /* @__PURE__ */ new Set();
+  listeners.add(listener);
+  formListeners.set(form, listeners);
+  return () => {
+    listeners.delete(listener);
+    if (!listeners.size)
+      formListeners.delete(form);
+  };
+};
+const notifyFormListTabsValidation = (form, event) => {
+  var _a;
+  (_a = formListeners.get(form)) == null ? void 0 : _a.forEach((listener) => listener(event));
+};
+export {
+  notifyFormListTabsValidation,
+  subscribeFormListTabsValidation
+};

package/es/ProForm/components/combination/FormList/toolbarActions.d.ts

@@ -0,0 +1,14 @@
+import type { FormInstance, FormListOperation } from 'antd';
+import type { InternalNamePath } from 'antd/es/form/interface';
+import type { ToolbarActionType } from './propsType';
+export declare const FORM_LIST_ACTION_ABORT: unique symbol;
+export declare const normalizeToolbarActions: (toolbarProps?: ToolbarActionType[]) => ToolbarActionType[];
+export declare const isToolbarActionVisible: (item: ToolbarActionType, form: FormInstance, namePath: InternalNamePath) => boolean;
+interface ExecuteToolbarAddOptions {
+    action: ToolbarActionType;
+    form: FormInstance;
+    namePath: InternalNamePath;
+    operation: FormListOperation;
+}
+export declare const executeToolbarAdd: ({ action, form, namePath, operation, }: ExecuteToolbarAddOptions) => Promise<boolean>;
+export {};

package/es/ProForm/components/combination/FormList/toolbarActions.js

@@ -0,0 +1,47 @@
+import isFunction from "lodash/isFunction";
+const defaultToolbarActions = [{ type: "add" }];
+const FORM_LIST_ACTION_ABORT = Symbol("FORM_LIST_ACTION_ABORT");
+const normalizeToolbarActions = (toolbarProps) => {
+  const actions = toolbarProps == null ? void 0 : toolbarProps.map((item) => ({
+    ...item,
+    type: item.actionType || item.type
+  }));
+  if (!(actions == null ? void 0 : actions.some((item) => item.type === "add"))) {
+    return actions ? [...actions, ...defaultToolbarActions] : defaultToolbarActions;
+  }
+  return actions;
+};
+const isToolbarActionVisible = (item, form, namePath) => {
+  if (item.show === false)
+    return false;
+  if (isFunction(item.show)) {
+    return item.show(form.getFieldValue(namePath), { namePath, form });
+  }
+  return true;
+};
+const executeToolbarAdd = async ({
+  action,
+  form,
+  namePath,
+  operation
+}) => {
+  const value = form.getFieldValue(namePath);
+  const index = (value == null ? void 0 : value.length) || 0;
+  const callback = action.onClick || action.onHandle;
+  const data = await (callback == null ? void 0 : callback(value, { operation, form, namePath, index }));
+  if (callback && data !== true && !data)
+    return false;
+  const insertIndex = typeof action.addIndex === "function" ? action.addIndex(value, { namePath, form, operation, index }) : action.addIndex;
+  if (insertIndex !== void 0) {
+    operation.add(data, insertIndex);
+  } else {
+    operation.add(data);
+  }
+  return true;
+};
+export {
+  FORM_LIST_ACTION_ABORT,
+  executeToolbarAdd,
+  isToolbarActionVisible,
+  normalizeToolbarActions
+};

package/es/ProForm/index.js

@@ -29,6 +29,7 @@ import locale from "../locale";
 import useWatch from "./hooks/useWatch";
 import FormsProvider, { useContextForms, useForms } from "../FormsProvider";
 import { useStep } from "../ProStep";
+import { notifyFormListTabsValidation } from "./components/combination/FormList/tabsValidation";
 const ProForm = (props, ref) => {
   const {
     mode = "search",
@@ -144,8 +145,20 @@ const ProForm = (props, ref) => {
     }
   };
   const handleFinish = () => {
+    notifyFormListTabsValidation(form, { reason: "submitSuccess", errorFields: [] });
     onFinish == null ? void 0 : onFinish(form.getFieldsValue());
   };
+  const handleFieldsChange = (changedFields, allFields) => {
+    var _a;
+    notifyFormListTabsValidation(form, {
+      reason: "fieldsChange",
+      errorFields: allFields.filter((field) => {
+        var _a2;
+        return (_a2 = field.errors) == null ? void 0 : _a2.length;
+      })
+    });
+    (_a = otherProps.onFieldsChange) == null ? void 0 : _a.call(otherProps, changedFields, allFields);
+  };
   const cls = classnames({
     "pro-form": true,
     "pro-form-view": isView,
@@ -177,7 +190,7 @@ const ProForm = (props, ref) => {
       otherProps.layout = otherProps.layout || "vertical";
     }
   }
-  const filteredOtherProps = omit(otherProps, ["desensitizationKey"]);
+  const filteredOtherProps = omit(otherProps, ["desensitizationKey", "onFieldsChange"]);
   return /* @__PURE__ */ jsxs(
     Form,
     {
@@ -194,10 +207,12 @@ const ProForm = (props, ref) => {
       ...omit(config, ["isDiffAll"]),
       ...filteredOtherProps,
       labelAlign: labelAlign ?? config.labelAlign ?? "left",
+      onFieldsChange: handleFieldsChange,
       onValuesChange: handleValuesChange,
       onFinish: handleFinish,
       onFinishFailed: ({ errorFields }) => {
         var _a;
+        notifyFormListTabsValidation(form, { reason: "submitFailed", errorFields });
         if (scrollToError && (errorFields == null ? void 0 : errorFields.length)) {
           form.scrollToField((_a = errorFields[0]) == null ? void 0 : _a.name, {
             block: "center",

package/es/locale/en_US.d.ts

@@ -44,6 +44,7 @@ declare const _default: {
         completeText: string;
         halfRuleText: string;
         formListActions: string[];
+        formListTabsAdd: string;
         formListConfirmMessage: string;
         noData: string;
         moreItems: string;

package/es/locale/en_US.js

@@ -52,6 +52,7 @@ var en_US_default = {
       "Add a new line",
       "Click add"
     ],
+    formListTabsAdd: "Add column",
     formListConfirmMessage: "Are you sure you want to delete?",
     noData: "No data",
     moreItems: "{count} more...",

package/es/locale/zh_CN.d.ts

@@ -44,6 +44,7 @@ declare const _default: {
         completeText: string;
         halfRuleText: string;
         formListActions: string[];
+        formListTabsAdd: string;
         formListConfirmMessage: string;
         noData: string;
         moreItems: string;

package/es/locale/zh_CN.js

@@ -44,6 +44,7 @@ var zh_CN_default = {
     completeText: "请完整输入",
     halfRuleText: "请输入第({total})个表单的值",
     formListActions: ["新增", "删除", "复制", "上移", "下移", "新增一行", "点击添加"],
+    formListTabsAdd: "新增一列",
     formListConfirmMessage: "确认删除吗?",
     noData: "暂无数据",
     moreItems: "更多{count}项...",

package/es/style/theme/tokens.less

@@ -47,9 +47,9 @@
 @zaui-table-header-bg: var(--zaui-table-header-bg; #f2f3f5);
 @zaui-table-strip-bg: var(--zaui-table-strip-bg; #fafafa);
 @zaui-table-hover-bg: var(--zaui-table-hover-bg; #fafafa);
-@zaui-table-selected-bg: var(--zaui-table-hover-bg #fafafa);
-@zaui-table-selected-hover-bg: var(--zaui-table-hover-bg #fafafa);
-@zaui-table-nested-bg: var(--zaui-table-nested-bg #fafcfe);
+@zaui-table-selected-bg: var(--zaui-table-hover-bg; #fafafa);
+@zaui-table-selected-hover-bg: var(--zaui-table-hover-bg; #fafafa);
+@zaui-table-nested-bg: var(--zaui-table-nested-bg; #fafcfe);
 @zaui-contract-bg: var(--zaui-contract-bg; #fffaa1); // 对比背景色
 @zaui-contract-bg-add: var(--zaui-contract-bg-add; #d2fff4); // 新增对比背景色
 @zaui-form-required-after: var(--zaui-form-required-after; inline);

package/es/tokens.js

@@ -47,9 +47,9 @@ const tokens = {
   "@zaui-table-header-bg": "var(--zaui-table-header-bg, #f2f3f5)",
   "@zaui-table-strip-bg": "var(--zaui-table-strip-bg, #fafafa)",
   "@zaui-table-hover-bg": "var(--zaui-table-hover-bg, #fafafa)",
-  "@zaui-table-selected-bg": "var(--zaui-table-hover-bg #fafafa)",
-  "@zaui-table-selected-hover-bg": "var(--zaui-table-hover-bg #fafafa)",
-  "@zaui-table-nested-bg": "var(--zaui-table-nested-bg #FAFCFE)",
+  "@zaui-table-selected-bg": "var(--zaui-table-hover-bg, #fafafa)",
+  "@zaui-table-selected-hover-bg": "var(--zaui-table-hover-bg, #fafafa)",
+  "@zaui-table-nested-bg": "var(--zaui-table-nested-bg, #FAFCFE)",
   "@zaui-form-required-after": "var(--zaui-form-required-after, inline)",
   "@zaui-form-required-before": "var(--zaui-form-required-before, none)",
   "@zaui-form-label-width": "var(--zaui-form-label-width, 130px)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "4.6.1",
+  "version": "4.6.3-beta.1",
   "license": "MIT",
   "publishConfig": {
     "access": "public",
@@ -63,7 +63,8 @@
   "scripts": {
     "analyze": "ANALYZE=1 dumi build",
     "build:demo": "father build && node ./scripts/build-esm.mjs",
-    "build": "npm run build:demo && npm run build:types && mv dist/index.min.css dist/index.esm.css && mv dist/less.min.css dist/less.esm.css && npm run build:ai-meta",
+    "build:package": "npm run build:demo && npm run build:types && mv dist/index.min.css dist/index.esm.css && mv dist/less.min.css dist/less.esm.css",
+    "build": "npm run build:package && npm run build:ai-meta",
     "build:types": "tsc -p tsconfig.build.json",
     "build:ai-meta": "node ./scripts/build-ai-meta.mjs",
     "check:ai-meta": "npm run build:ai-meta && cd packages/sisyphus-react-mcp && npm run check",
@@ -90,6 +91,7 @@
     "test": "umi-test",
     "test:coverage": "umi-test --coverage",
     "test:coverage:focused": "jest --config=jest.coverage.focused.js --coverage",
+    "test:coverage:focused:95": "COVERAGE_THRESHOLD=95 jest --config=jest.coverage.focused.js --coverage",
     "coverage:report": "node ./scripts/coverage-gap-report.mjs --target=90 --scope=full",
     "coverage:gate": "node ./scripts/coverage-directory-gate.mjs",
     "tsc": "tsc --noEmit"