@zat-design/sisyphus-react 4.2.0-beta.2 → 4.2.0-beta.3

package/lib/ProForm/components/combination/Group/style/index.less

@@ -1,525 +0,0 @@
-@import '../../../../../style/variables.less';
-
-.pro-group {
-  display: flex;
-  width: unset !important;
-
-  &.pro-group-view {
-    .pro-group-form-item {
-      flex: 0 0 auto !important;
-   
-    }
-    .@{ant-prefix}-space-compact .pro-group-separator-compact{
-      color: #333 !important;
-    }
-  }
-
-
-  &.pro-group-view {
-    .@{ant-prefix}-space {
-      gap: 0 !important;
-      .@{ant-prefix}-space-item {
-        width: auto;
-      }
-    }
-  }
-
-  &.pro-group-diy-width,
-  &.pro-group-width-auto {
-    .@{ant-prefix}-space .@{ant-prefix}-space-item {
-      width: auto;
-
-      .@{ant-prefix}-space-item {
-        width: auto;
-      }
-    }
-  }
-
-  .@{ant-prefix}-space {
-    width: 100%;
-
-    .@{ant-prefix}-space-item {
-      width: 100%;
-    }
-
-    .@{ant-prefix}-form-item {
-      margin-bottom: 0 !important;
-    }
-  }
-
-  .@{ant-prefix}-form-item-label {
-    display: none;
-  }
-
-  .@{ant-prefix}-space-compact {
-    flex: auto;
-    align-items: flex-start; // 改为顶部对齐，避免错误信息影响对齐
-    width: 100%;
-
-    .@{ant-prefix}-form-item {
-      margin-bottom: 0 !important;
-    }
-
-    .group-separator {
-      height: 32px; // 明确设置高度与输入框一致
-      padding: 0 12px;
-      color: #999;
-      font-size: 14px;
-      line-height: 30px; // 调整行高匹配32px输入框高度
-      background-color: #fff;
-      border: 1px solid #d9d9d9; // 使用标准的1px边框
-      outline: none;
-
-      // 移除默认button样式
-      box-shadow: none;
-      cursor: default;
-      margin-inline-start: -2px;
-      border-radius: 0;
-
-    }
-
-    .pro-modal-select {
-      margin-left: -1px;
-    }
-
-    // 定制内敛合并样式
-    .@{ant-prefix}-input-affix-wrapper,
-    .@{ant-prefix}-select {
-      &:nth-child(n + 2) {
-        margin-inline-start: -1px;
-      }
-    }
-
-    // 报错样式定制
-    .@{ant-prefix}-input-affix-wrapper-status-error ~ .group-separator {
-      color: #ff4d4f;
-      border-color: #ff4d4f;
-    }
-  }
-
-  // 针对灵活模式的样式优化
-  &.pro-group-flexible {
-    // Space.Compact的样式优化
-    .@{ant-prefix}-space-compact {
-      display: flex;
-      align-items: flex-start;
-      width: 100%;
-
-      // Form.Item在compact模式下的样式
-      .@{ant-prefix}-form-item {
-        flex: 1;
-        margin-right: 0;
-        margin-bottom: 0;
-
-        // 第一个元素后面的所有元素都左移1px以实现紧密连接
-        &:not(:first-child) {
-          margin-left: -1px;
-        }
-
-        // 确保输入框完全贴合
-        .@{ant-prefix}-input,
-        .@{ant-prefix}-select .@{ant-prefix}-select-selector,
-        .@{ant-prefix}-input-number,
-        .@{ant-prefix}-input-number-input {
-          // 重置z-index确保正确的层级关系
-          position: relative;
-          // 重置圆角
-          border-radius: 0;
-        }
-
-        // 第一个表单项：左边保持圆角
-        &:first-child {
-          .@{ant-prefix}-input,
-          .@{ant-prefix}-select .@{ant-prefix}-select-selector,
-          .@{ant-prefix}-input-number,
-          .@{ant-prefix}-input-number-input {
-            border-top-left-radius: 6px;
-            border-bottom-left-radius: 6px;
-          }
-        }
-
-        // 最后一个表单项：右边保持圆角
-        &:last-child {
-          .@{ant-prefix}-input,
-          .@{ant-prefix}-select .@{ant-prefix}-select-selector,
-          .@{ant-prefix}-input-number,
-          .@{ant-prefix}-input-number-input {
-            border-top-right-radius: 6px;
-            border-bottom-right-radius: 6px;
-          }
-        }
-
-        // 中间元素和最后元素：去掉左边框避免重复
-        &:not(:first-child) {
-          .@{ant-prefix}-input-number-input {
-            border-left: 0;
-          }
-
-          // 聚焦时恢复左边框
-          .@{ant-prefix}-input:focus,
-          .@{ant-prefix}-select:focus .@{ant-prefix}-select-selector,
-          .@{ant-prefix}-input-number:focus,
-          .@{ant-prefix}-input-number:focus .@{ant-prefix}-input-number-input {
-            margin-left: -1px;
-            border-left-width: 1px;
-          }
-        }
-
-        // 错误状态：确保边框变红（优先级要高于上面的 border-left-width: 0）
-        &.@{ant-prefix}-form-item-has-error {
-          .@{ant-prefix}-input,
-          .@{ant-prefix}-select .@{ant-prefix}-select-selector,
-          .@{ant-prefix}-input-number,
-          .@{ant-prefix}-input-number-input {
-            border-color: #ff4d4f !important;
-          }
-
-          // 错误状态下，中间元素也需要恢复左边框并设置为红色
-          &:not(:first-child) {
-            .@{ant-prefix}-input,
-            .@{ant-prefix}-select .@{ant-prefix}-select-selector,
-            .@{ant-prefix}-input-number {
-              border-left-color: #ff4d4f !important;
-              border-left-width: 1px !important;
-            }
-
-            .@{ant-prefix}-input-number-input {
-              border-left: 0 !important;
-            }
-          }
-
-          // 聚焦时保持红色边框
-          .@{ant-prefix}-input:focus,
-          .@{ant-prefix}-select:focus .@{ant-prefix}-select-selector,
-          .@{ant-prefix}-input-number:focus,
-          .@{ant-prefix}-input-number:focus .@{ant-prefix}-input-number-input {
-            border-color: #ff4d4f !important;
-          }
-
-          // Select 组件的错误状态处理
-          .@{ant-prefix}-select.@{ant-prefix}-select-status-error .@{ant-prefix}-select-selector {
-            border-color: #ff4d4f !important;
-          }
-        }
-      }
-
-      // 分隔符样式 - 确保与输入框完美对齐
-      .pro-group-separator {
-        position: relative;
-        display: inline-flex;
-        flex: none;
-        align-items: center;
-        height: 32px;
-        margin-right: -1px;
-        margin-left: -1px;
-        padding: 0 8px;
-        color: #666;
-        font-size: 14px;
-        line-height: 32px;
-        background-color: #fafafa;
-        border-top: 1px solid #d9d9d9;
-        border-right: 0;
-        border-bottom: 1px solid #d9d9d9;
-        border-left: 0;
-        user-select: none;
-      }
-
-      .@{ant-prefix}-form-item-has-error + .pro-group-separator-compact {
-        border-color: red;
-      }
-
-      // compact模式分隔符样式
-      .pro-group-separator-compact {
-        display: inline-flex;
-        flex: none;
-        align-items: center;
-        justify-items: center;
-        height: 32px;
-        padding: 0 12px;
-        color: #666;
-        line-height: 32px;
-        border: 1px solid #d9d9d9;
-        user-select: none;
-        margin-inline-start: -2px;
-      }
-    }
-
-    // Space模式分隔符样式
-    .pro-group-separator-space {
-      display: flex;
-      flex-shrink: 0;
-      align-items: center;
-      padding: 0 8px;
-      color: #999;
-      font-size: 14px;
-      user-select: none;
-    }
-
-    // 错误提示样式
-    .pro-group-error-tip {
-      padding: 8px;
-      color: #ff4d4f;
-      border: 1px dashed #ff4d4f;
-    }
-
-    // compact模式容器
-    .pro-group-compact-container {
-      width: 100%;
-    }
-
-    // Form.Item无边距样式
-    .pro-group-form-item {
-      flex: 1;
-      margin-left: 0 !important;
-      &.@{ant-prefix}-form-item-has-error{
-        margin-left: -1px !important;
-      }
-    }
-
-    // 当有自定义宽度时，只有设置了宽度的 Form.Item 不使用 flex:1
-    // 没有设置宽度的 Form.Item 保持 flex: 1，自动占据剩余空间
-    &.pro-group-diy-width {
-      // 覆盖 Space.Compact 内设置了宽度的 Form.Item
-      .@{ant-prefix}-space-compact {
-        .@{ant-prefix}-form-item.pro-group-form-item-has-width {
-          flex: none;
-        }
-      }
-
-      // 覆盖 compact 容器内设置了宽度的 Form.Item
-      .pro-group-compact-container {
-        .@{ant-prefix}-form-item.pro-group-form-item-has-width {
-          flex: none;
-        }
-      }
-
-      // 覆盖直接使用 pro-group-form-item 类且设置了宽度的 Form.Item
-      .pro-group-form-item.pro-group-form-item-has-width {
-        flex: none;
-      }
-    }
-  }
-
-  // 传统模式也需要相同的样式规则（不在 pro-group-flexible 下）
-  &:not(.pro-group-flexible) {
-    // compact模式容器
-    .pro-group-compact-container {
-      display: flex;
-      align-items: flex-start;
-      width: 100%;
-
-      // Form.Item在compact模式下的样式
-      .@{ant-prefix}-form-item {
-        flex: 1;
-        margin-right: 0;
-        margin-bottom: 0;
-
-        // 第一个元素后面的所有元素都左移1px以实现紧密连接
-        &:not(:first-child) {
-          margin-left: -1px;
-        }
-
-        // 确保输入框完全贴合
-        .@{ant-prefix}-input,
-        .@{ant-prefix}-select .@{ant-prefix}-select-selector,
-        .@{ant-prefix}-input-number,
-        .@{ant-prefix}-input-number-input,
-        .@{ant-prefix}-picker{
-          // 重置z-index确保正确的层级关系
-          position: relative;
-          // 重置圆角
-          border-radius: 0;
-        }
-
-        // 第一个表单项：左边保持圆角
-        &:first-child {
-          .@{ant-prefix}-input,
-          .@{ant-prefix}-select .@{ant-prefix}-select-selector,
-          .@{ant-prefix}-input-number,
-          .@{ant-prefix}-input-number-input {
-            border-top-left-radius: 6px;
-            border-bottom-left-radius: 6px;
-          }
-        }
-
-        // 最后一个表单项：右边保持圆角
-        &:last-child {
-          .@{ant-prefix}-input,
-          .@{ant-prefix}-select .@{ant-prefix}-select-selector,
-          .@{ant-prefix}-input-number,
-          .@{ant-prefix}-input-number-input,
-          .@{ant-prefix}-picker{
-            border-top-right-radius: 6px;
-            border-bottom-right-radius: 6px;
-          }
-        }
-
-        // 中间元素和最后元素：去掉左边框避免重复
-        &:not(:first-child) {
-          // 聚焦时恢复左边框
-          .@{ant-prefix}-input:focus,
-          .@{ant-prefix}-select:focus .@{ant-prefix}-select-selector,
-          .@{ant-prefix}-input-number:focus,
-          .@{ant-prefix}-input-number:focus .@{ant-prefix}-input-number-input {
-            margin-left: -1px;
-            border-left-width: 1px;
-          }
-        }
-      }
-
-      // compact模式分隔符样式
-      .pro-group-separator-compact {
-        display: inline-flex;
-        flex: none;
-        align-items: center;
-        justify-items: center;
-        height: 32px;
-        padding: 0 12px;
-        color: #666;
-        line-height: 32px;
-        border: 1px solid #d9d9d9;
-        user-select: none;
-        margin-inline-start: -1px;
-      }
-
-      // 错误状态的分隔符
-      .@{ant-prefix}-form-item-has-error + .pro-group-separator-compact {
-        border-color: #ff4d4f;
-      }
-    }
-
-    // Form.Item无边距样式（传统模式）
-    .pro-group-form-item {
-      flex: 1;
-      // margin: 0 !important;
-    }
-
-    // 查看模式下，Form.Item不平分空间，而是根据内容自适应
-    &.pro-group-view {
-      .pro-group-form-item {
-        flex: 0 0 auto;
-      }
-    }
-
-    // 当有自定义宽度时，只有设置了宽度的 Form.Item 不使用 flex:1
-    &.pro-group-diy-width {
-      // 覆盖 Space.Compact 内设置了宽度的 Form.Item
-      .@{ant-prefix}-space-compact {
-        .@{ant-prefix}-form-item.pro-group-form-item-has-width {
-          flex: none;
-        }
-      }
-
-      // 覆盖 compact 容器内设置了宽度的 Form.Item
-      .pro-group-compact-container {
-        .@{ant-prefix}-form-item.pro-group-form-item-has-width {
-          flex: none;
-        }
-      }
-
-      // 覆盖直接使用 pro-group-form-item 类且设置了宽度的 Form.Item
-      .pro-group-form-item.pro-group-form-item-has-width {
-        flex: none;
-      }
-    }
-  }
-}
-
-
-.@{ant-prefix}-form-item-has-error{
-  &:not(.pro-group-flexible) {
-     // 错误状态：确保边框变红（优先级要高于上面的 border-left-width: 0）
-      .@{ant-prefix}-input,
-      .@{ant-prefix}-select .@{ant-prefix}-select-selector,
-      .@{ant-prefix}-input-number,
-      .@{ant-prefix}-input-number-input {
-        border-color: #ff4d4f !important;
-      }
-
-      // 错误状态下，中间元素也需要恢复左边框并设置为红色
-      &:not(:first-child) {
-        .@{ant-prefix}-input,
-        .@{ant-prefix}-select .@{ant-prefix}-select-selector,
-        .@{ant-prefix}-input-number {
-          border-left-color: #ff4d4f !important;
-          border-left-width: 1px !important;
-        }
-
-        .@{ant-prefix}-input-number-input {
-          border-left: 0 !important;
-        }
-      }
-
-      // 聚焦时保持红色边框
-      .@{ant-prefix}-input:focus,
-      .@{ant-prefix}-select:focus .@{ant-prefix}-select-selector,
-      .@{ant-prefix}-input-number:focus,
-      .@{ant-prefix}-input-number:focus .@{ant-prefix}-input-number-input {
-        border-color: #ff4d4f !important;
-      }
-
-      // Select 组件的错误状态处理
-      .@{ant-prefix}-select.@{ant-prefix}-select-status-error .@{ant-prefix}-select-selector {
-        border-color: #ff4d4f !important;
-      }
-    }
-}
-
-// compact模式容器, 修复antd6定制模式下，Group组件内嵌套Form.Item时，表单样式问题
-.pro-group-compact-container {
-  .@{ant-prefix}-select {
-    border-radius: 0;
-    border-radius: 0;
-  }
-
-  > .pro-group-form-item:not(:first-child) {
-    .@{ant-prefix}-input,
-    .@{ant-prefix}-select,
-    .@{ant-prefix}-input-number {
-     margin-left: -1px;
-    }
-  }
-  .pro-group-separator-compact{
-    margin-left: -1px;
-  }
-
-  // 查看模式下的分隔符样式 - 移除边框，使用简洁样式
-  .pro-group-separator-view {
-    border: none !important;
-    background: transparent !important;
-    padding: 0 2px !important;
-    margin-inline-start: 0 !important;
-    color: #999 !important;
-  }
-
-
-  /* 1. 处理第一个子元素：左上、左下圆角 */
-  > .pro-group-form-item:first-child{
-    .pro-select .@{ant-prefix}-select, 
-    .@{ant-prefix}-select, 
-    .@{ant-prefix}-input-number  {
-      border-top-left-radius: 6px;
-      border-bottom-left-radius: 6px;
-    }
-  }
-
-  /* 2. 处理最后一个子元素：右上、右下圆角 */
-  > .pro-group-form-item:last-child {
-    .pro-select .@{ant-prefix}-select, 
-    .@{ant-prefix}-select, 
-    .@{ant-prefix}-input-number  {
-      border-top-right-radius: 6px;
-      border-bottom-right-radius: 6px;
-    }
-  }
-}
-.@{ant-prefix}-form-item-has-error  {
-  .pro-group-compact-container{
-    .@{ant-prefix}-select {
-      border-color: var(--zaui-danger);
-    }
-  }
-  
-}
-// compact模式容器 结束
-

package/lib/ProForm/components/combination/Group/utils/index.d.ts

@@ -1,154 +0,0 @@
-/// <reference types="lodash" />
-import { InternalNamePath, NamePath } from 'antd/lib/form/interface';
-import { FormInstance } from 'antd';
-import React from 'react';
-import type { GroupColumnType, SpaceType, FlexibleGroupColumnType } from '../propsType';
-import type { ProFormColumnType, ReactiveFunction } from '../../../render/propsType';
-export type EventArgs = any[];
-/**
- * 插入间隔符
- * @param columns 表单配置数组
- * @returns
- */
-export declare const insertSeparator: (columns: GroupColumnType[], space?: SpaceType) => any[];
-/** 带出event的组件默认取值方法 */
-export declare function defaultGetValueFromEvent(valuePropName: string, ...args: EventArgs): any;
-/** 转换names */
-export declare const transformNamesString: (arr: (string | string[])[]) => (string | string[])[];
-/**
- * Input TextArea 小写自动转大写
- * @param type 组件类型
- * @param upperCase 是否小写转大写
- * @returns {}
- */
-export declare const isUpperCase: (type: string, upperCase: boolean) => any;
-interface Params {
-    form?: FormInstance;
-    index?: number;
-    type?: string;
-    namePath?: InternalNamePath;
-    disabled?: boolean | ReactiveFunction<any, boolean>;
-    show?: boolean | ReactiveFunction<any, boolean>;
-    component?: React.ReactNode | ReactiveFunction<any, React.ReactNode>;
-    fieldProps?: boolean | ReactiveFunction<any, boolean>;
-    name?: NamePath;
-    desensitization?: [number, number] | ReactiveFunction<any, [number, number]>;
-}
-/** 计算响应式参数的值 */
-export declare const getReactiveProps: (params: Params) => {
-    disabled: boolean;
-    show: boolean;
-    component: React.ReactNode;
-    fieldProps: boolean;
-    desensitization: [number, number];
-};
-type ValueTypeGetterParams = Pick<ProFormColumnType, 'valueType' | 'switchValue' | 'toISOString' | 'toCSTString' | 'disabled' | 'desensitization'> & {
-    type?: any;
-    mode?: string;
-};
-/** 获取当前字段的转换函数 */
-export declare const getValueTypeTrans: (params: ValueTypeGetterParams) => any;
-/** 执行所有中间件 返回处理后的值 */
-export declare const getValueMiddleware: (value: any, callbacks?: any[]) => any;
-/** 获取中间件处理后的value */
-export declare const valueFromEventWrapper: (column: any, args: any) => any;
-interface ContextProps {
-    form: FormInstance;
-    namePath?: InternalNamePath;
-    isView?: boolean;
-    names?: NamePath[];
-    index?: number;
-}
-interface GroupProps {
-    disabled?: boolean;
-    formDisabled?: boolean;
-}
-/**
- * 创建FormItem属性（Hook版本）
- */
-export declare const useFormItemProps: (column: FlexibleGroupColumnType, contextProps: ContextProps, groupProps: GroupProps) => {
-    rules: any[];
-    required: boolean;
-    label: string;
-    before?: React.ReactNode;
-    after?: React.ReactNode;
-    confirm?: boolean | import("antd").ModalFuncProps | import("../../../render/propsType").FunctionArgs<any, boolean | import("antd").ModalFuncProps>;
-    show?: boolean | ReactiveFunction<any, boolean>;
-    component?: React.ReactNode | ReactiveFunction<any, React.ReactNode>;
-    id?: string;
-    className?: string;
-    hidden?: boolean;
-    style?: React.CSSProperties;
-    children?: React.ReactNode | ((form: FormInstance<any>) => React.ReactNode);
-    onReset?: () => void;
-    prefixCls?: string;
-    status?: "" | "warning" | "error" | "success" | "validating";
-    rootClassName?: string;
-    isView?: boolean;
-    colon?: boolean;
-    htmlFor?: string;
-    labelAlign?: import("antd/es/form/interface").FormLabelAlign;
-    labelCol?: import("antd").ColProps;
-    vertical?: boolean;
-    getValueFromEvent?: (...args: import("@rc-component/form/lib/interface").EventArgs) => any;
-    normalize?: (value: any, prevValue: any, allValues: import("@rc-component/form/lib/interface").Store) => any;
-    shouldUpdate?: import("@rc-component/form/lib/Field").ShouldUpdate<any>;
-    trigger?: string;
-    validateTrigger?: string | false | string[];
-    validateDebounce?: number;
-    valuePropName?: string;
-    getValueProps?: ((value: any) => Record<string, unknown>) & ((value: any) => Record<string, unknown>);
-    messageVariables?: Record<string, string>;
-    initialValue?: any;
-    onMetaChange?: (meta: import("@rc-component/form/lib/Field").MetaEvent) => void;
-    preserve?: boolean;
-    isListField?: boolean;
-    isList?: boolean;
-    noStyle?: boolean;
-    hasFeedback?: boolean | {
-        icons: import("antd/es/form/FormItem").FeedbackIcons;
-    };
-    validateStatus?: "" | "warning" | "error" | "success" | "validating";
-    layout?: import("antd/es/form/Form").FormItemLayout;
-    wrapperCol?: import("antd").ColProps;
-    help?: React.ReactNode;
-    fieldId?: string;
-    valueType?: import("../../../render/propsType").ProFormValueType;
-    switchValue?: [any, any];
-    viewRender?: (value: any, record: any, { form, index, namePath, }: {
-        [key: string]: any;
-        form: FormInstance<any>;
-        index?: number;
-    }) => string | React.ReactElement<any, any>;
-    viewType?: import("../../../render/propsType").ViewType;
-    trim?: boolean;
-    upperCase?: boolean;
-    toISOString?: boolean;
-    toCSTString?: boolean;
-    clearNotShow?: boolean;
-    desensitization?: [number, number] | ReactiveFunction<any, [number, number]>;
-    name: any;
-    dependencies: any[];
-    tooltip: string | {
-        title: string;
-        icon?: React.ReactNode;
-    };
-    extra: React.ReactNode;
-    validateFirst: boolean | "parallel";
-    disabled: any;
-};
-/**
- * 创建组件属性
- */
-export declare const createComponentProps: (column: FlexibleGroupColumnType, formItemProps: any) => {
-    componentProps: import("lodash").Omit<any, "format" | "valueType" | "switchValue" | "dependNames" | "toISOString" | "toCSTString" | "clearNotShow" | "precision">;
-    formItemTransform: {
-        getValueProps: any;
-        normalize: any;
-    };
-};
-/**
- * 配置验证组件
- */
-export declare const validateChildren: (children: FlexibleGroupColumnType[]) => boolean;
-export {};