@cloudbase/weda-ui 3.5.2-mp → 3.5.3

package/dist/web/components/wd-form/index.js

@@ -0,0 +1,517 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint max-lines: [error, 800] */
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { useDebouncedCallback, useDebouncedEffect, useMap, useMountEffect, useSyncedRef, useUnmountEffect, } from '@react-hookz/web';
+import { isInIde, usePlatform } from '../../utils/platform';
+import classNames from '../../utils/classnames';
+import { debug } from '../../utils/console';
+import { useWedaAppContext } from '../../utils/widget-api';
+import { useLoopRenderDetect } from '../common/use-loop-render-detect';
+import { emptyObject, noop, NOT_EXISTED_VALUE } from '../../utils/constant';
+import * as tcbAppCloud from '../../utils/tcb';
+import { useRemoteValue, useInitValueFromRemote, useRemoteParamsFromValue, } from './hooks/use-remote-value';
+import { createSetStateForAuth, useAuthValue } from './hooks/use-auth-value';
+import lodashGet from 'lodash.get';
+import isObjectEqual from '../../utils/isObjectEqual';
+import { useDataSource } from '../../utils/hooks/useDataSource';
+import { WdForm as FormUi } from './wd-form';
+import EmptyContent from '../statusContent';
+import { deepClone } from '../../utils/tool';
+import '../style';
+import { getErrorObjectFromValidateResult, getFormDataFromItemMap, } from './form-utils';
+import { ConfigProvider, StatusTip } from 'tea-component';
+import { isNil } from '../../utils/lodash';
+const SET_VALUE_DEBOUNCE_TIMEOUT = 250;
+const logger = debug('wd-form');
+const WdForm = React.forwardRef(function WdForm(props, ref) {
+    var _a;
+    const { className, id, style, contentSlot: contentSlotEl, layout = 'horizontal', formType = 'create', _id, datasourceType = 'model', dataSourceName, methodGetItem, methodCreate, methodUpdate, paramGetItem, appCloud = tcbAppCloud, 
+    // 兼容流程setValue调用，其他地方别用
+    $node, } = props;
+    const formItemMap = useMap([]);
+    /**
+     * 根据他的文档
+     * 上面返回的 formItemMap 引用会保持不变，但是Map的方法会导致重渲染
+     * 所以要用它作useEffect deps的时候用下面这个string
+     *  */
+    const formItemMapKey = [...formItemMap.keys()].sort().join(',');
+    const formItemMapKeyRef = useRef(formItemMapKey);
+    const platform = usePlatform();
+    const isH5 = platform === 'h5';
+    const contentSlot = useMemo(() => contentSlotEl, [contentSlotEl]);
+    const cls = classNames({
+        'weda-ui': true,
+        'weda-form': true,
+        'weui-form': platform === 'h5',
+        'weda-form-pc': platform === 'pc',
+        'gsd-h5-react-form-pc': platform === 'pc',
+        'wedatea2td-form': platform === 'pc',
+    }, className);
+    const isDataModel = !['connector', 'custom-connector'].includes(datasourceType); // 是否为数据模型，兼容历史 undefined
+    useLoopRenderDetect();
+    const { ready } = useWedaAppContext();
+    const hasSetInitValueRef = useRef(false);
+    const [initialValues, setInitialValues] = useState((_a = props.initialValues) !== null && _a !== void 0 ? _a : emptyObject);
+    const eventsRef = useSyncedRef(props.events);
+    const validate = useCallback(async () => {
+        const validatePromise = [];
+        const validateKey = [];
+        const validateLabel = [];
+        formItemMap.forEach((item) => {
+            if (!item)
+                return;
+            if (item.handleValidate) {
+                const validate = item.handleValidate();
+                const { name, label } = item;
+                if (validate) {
+                    validatePromise.push(validate);
+                    validateKey.push(name);
+                    validateLabel.push(label);
+                }
+            }
+        });
+        let errorArr = await Promise.all(validatePromise);
+        const errObj = {};
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        errorArr = errorArr.filter((item, index) => {
+            if ((item !== null && item !== void 0 ? item : []).length) {
+                // 加标题
+                item.forEach((val) => {
+                    val.label = validateLabel[index];
+                });
+                errObj[validateKey[index]] = item;
+            }
+            return (item === null || item === void 0 ? void 0 : item.length) > 0;
+        });
+        if (Object.keys(errObj).length > 0) {
+            console.error(errObj);
+        }
+        return errObj;
+    }, [formItemMap]);
+    const [errors, setErrors] = useState(undefined);
+    const allSelectFields = useMemo(() => {
+        if (!ready) {
+            return null;
+        }
+        const fields = {};
+        logger.debug('formItemMapKey', { formItemMapKey });
+        formItemMap.forEach((item, name) => {
+            var _a;
+            if (!fields[name]) {
+                fields[name] = new Set();
+            }
+            ((_a = item.selectFields) !== null && _a !== void 0 ? _a : [])
+                .filter((t) => typeof t === 'string' && t.length > 0)
+                .forEach((field) => {
+                fields[name].add(field);
+            });
+        });
+        const result = Object.keys(fields).reduce((acc, k) => {
+            if (fields[k].size > 0) {
+                acc[k] = Array.from(fields[k]);
+            }
+            return acc;
+        }, {});
+        return result;
+    }, [formItemMap, ready, formItemMapKey]);
+    const { remoteValue: fetchedInitialValues, loadingStatus: initValueLoadingStatus, error: initValueFetchError, } = useRemoteValue({
+        appCloud,
+        formType,
+        _id,
+        // methodCreate,
+        methodGetItem,
+        // methodUpdate,
+        paramGetItem,
+        dataSourceName,
+        isDataModel,
+        allSelectFields,
+        eventsRef,
+    });
+    const submit = useCallback(async () => {
+        const { submit, validateSuccess, validateFail } = eventsRef.current;
+        const errorObj = await validate();
+        if (Object.keys(errorObj !== null && errorObj !== void 0 ? errorObj : {}).length === 0) {
+            validateSuccess({ errors: {} });
+            const formData = getFormDataFromItemMap(formItemMap, formType);
+            const extra = ['read', 'edit'].includes(formType) && _id ? { _id } : {};
+            submit && submit(deepClone({ ...extra, ...formData }));
+            // 流程用了;
+            return formData;
+        }
+        else {
+            setErrors(errorObj);
+            validateFail({
+                errors: getErrorObjectFromValidateResult(errorObj),
+            });
+        }
+    }, [_id, eventsRef, formItemMap, formType, validate]);
+    const updateFormContext = useCallback(() => {
+        Promise.resolve().then(() => {
+            var _a, _b;
+            const formData = getFormDataFromItemMap(formItemMap, formType);
+            if (!isObjectEqual(formData, preFormCtxRef.current, true)) {
+                (_b = (_a = eventsRef === null || eventsRef === void 0 ? void 0 : eventsRef.current) === null || _a === void 0 ? void 0 : _a.onDataChange) === null || _b === void 0 ? void 0 : _b.call(_a, { data: formData });
+                setFormData(formData);
+                preFormCtxRef.current = formData;
+            }
+        });
+    }, [eventsRef, formItemMap, formType]);
+    const setValue = useDebouncedCallback((data, setNull) => {
+        if (typeof data !== 'object' || data === null) {
+            console.warn('setValue data need expect a object but got', data);
+            return;
+        }
+        [...formItemMap.entries()].map(([name, n]) => {
+            var _a;
+            const item = (_a = formItemMap.get(name)) !== null && _a !== void 0 ? _a : n;
+            if (!item.setValue) {
+                console.error('表单组件缺少setValue方法:', item);
+                return;
+            }
+            const value = lodashGet(data, name, NOT_EXISTED_VALUE);
+            if (value !== NOT_EXISTED_VALUE) {
+                item.setValue(value);
+            }
+            else {
+                if (setNull) {
+                    item.setValue(null);
+                }
+            }
+        });
+        updateFormContext();
+    }, [formItemMap, updateFormContext], SET_VALUE_DEBOUNCE_TIMEOUT);
+    const clearValidate = useCallback(() => {
+        formItemMap.forEach((item) => {
+            if (!item.clearValidate || typeof item.clearValidate !== 'function') {
+                console.error('表单组件缺少clearValidate方法:', item);
+                return;
+            }
+            item.clearValidate();
+        });
+    }, [formItemMap]);
+    // useWhatChanged([formItemMap, initialValues, submit, validate]);
+    const [visible, setVisible] = React.useState(false);
+    React.useEffect(() => {
+        setVisible(true);
+    }, []);
+    const previousFormType = useRef(null);
+    useEffect(() => {
+        if (!ready) {
+            return;
+        }
+        // if (formType === previousFormType.current) return;
+        logger.debug('listen formType', { formType, previousFormType }, formItemMap);
+        previousFormType.current = formType;
+        Promise.resolve().then(() => {
+            if (formType === 'read') {
+                formItemMap.forEach((item) => {
+                    item.setReadOnly(true);
+                });
+            }
+            else {
+                formItemMap.forEach((item) => {
+                    const { initialReadOnly, initialDisabled } = item || {};
+                    if (initialReadOnly) {
+                        item.setReadOnly(true);
+                    }
+                    else if (initialDisabled) {
+                        item.setDisabled(true);
+                    }
+                    else {
+                        item.setReadOnly(false);
+                    }
+                });
+            }
+        });
+    }, [ready, formType, formItemMap, formItemMapKey]);
+    useMountEffect(() => {
+        logger.debug('formItemMap', formItemMap);
+    });
+    useEffect(() => {
+        if (initValueLoadingStatus !== 'done')
+            return;
+        if (!initValueFetchError && fetchedInitialValues) {
+            /*
+             错误处理放在了 @link {onInitialValuesError}
+             下面是可以拿到data了
+             */
+            setInitialValues((original) => {
+                if (hasSetInitValueRef.current) {
+                    return original;
+                }
+                hasSetInitValueRef.current = true;
+                return fetchedInitialValues;
+            });
+            setValue(fetchedInitialValues, true);
+        }
+    }, [fetchedInitialValues, initValueFetchError, initValueLoadingStatus, setValue]);
+    const { data: dataSourceProfile } = useDataSource(dataSourceName);
+    const authValue = useAuthValue({
+        appCloud,
+        isDataModel,
+        dataSourceName,
+    });
+    const initDataSourceFieldsWithAuth = useCallback((authValue) => {
+        logger.debug('onInitDataSourceFieldsWithAuth', authValue);
+        const { isDataModel, dataSourceFieldsWidthAuthList } = authValue;
+        try {
+            formItemMap.forEach((item, name) => {
+                const setStateForAuth = createSetStateForAuth({
+                    setVisible: item.setVisible,
+                    setReadOnly: item.setReadOnly,
+                });
+                if (!isDataModel) {
+                    // 非模型数据源
+                    setStateForAuth('rw');
+                }
+                else {
+                    if ((dataSourceFieldsWidthAuthList === null || dataSourceFieldsWidthAuthList === void 0 ? void 0 : dataSourceFieldsWidthAuthList.length) > 0) {
+                        // 返回了权限相关字段
+                        const fieldsPower = dataSourceFieldsWidthAuthList === null || dataSourceFieldsWidthAuthList === void 0 ? void 0 : dataSourceFieldsWidthAuthList.filter((fieldItem) => fieldItem[name])[0];
+                        if (fieldsPower && fieldsPower[name]) {
+                            setStateForAuth(fieldsPower[name]);
+                        }
+                        else {
+                            // 没有匹配到数据源字段，是用户自定义字段默认读写权限
+                        }
+                    }
+                    else {
+                        // 兼容私有化接口不会返回权限相关字段，没有返回默认不校验权限
+                        setStateForAuth('rw');
+                    }
+                }
+            });
+        }
+        catch (error) {
+            formItemMap.forEach((item) => {
+                const setStateForAuth = createSetStateForAuth({
+                    setReadOnly: item.setReadOnly,
+                    setVisible: item.setVisible,
+                });
+                if (!item || !item.setDataSourceFieldsWithAuth)
+                    return;
+                setStateForAuth('rw');
+            });
+            console.error('init form setDataSourceFieldsWithAuth error', error);
+        }
+    }, [formItemMap]);
+    const { data: formInitValueToSet } = useInitValueFromRemote(dataSourceProfile, fetchedInitialValues);
+    useEffect(() => {
+        if (initValueLoadingStatus !== 'done')
+            return;
+        if (!initValueFetchError && formInitValueToSet) {
+            /*
+            错误处理放在了 @link {onInitialValuesError}
+            下面是可以拿到data了
+            */
+            // TODO: 有哪些key可以暴露
+            setInitialValues(formInitValueToSet);
+            setValue(formInitValueToSet, true);
+        }
+    }, [fetchedInitialValues, formInitValueToSet, initValueFetchError, initValueLoadingStatus, setValue]);
+    React.useEffect(() => {
+        var _a, _b;
+        // 兼容私有环境，新接口不存在的情况，产品策略完善后移除
+        if ((window === null || window === void 0 ? void 0 : window['_isPrivate']) &&
+            !((_b = (_a = window === null || window === void 0 ? void 0 : window.app) === null || _a === void 0 ? void 0 : _a.cloud) === null || _b === void 0 ? void 0 : _b.getDataSourceProfileAsync)) {
+            initDataSourceFieldsWithAuth === null || initDataSourceFieldsWithAuth === void 0 ? void 0 : initDataSourceFieldsWithAuth({ isDataModel });
+            return;
+        }
+        if (!isInIde()) {
+            initDataSourceFieldsWithAuth(authValue);
+        }
+    }, [
+        authValue,
+        isDataModel,
+        initDataSourceFieldsWithAuth,
+        formItemMap,
+        formItemMapKey,
+    ]);
+    const initedItemMapRef = useRef({});
+    const preFormCtxRef = useRef(null);
+    const [formData, setFormData] = useState(() => getFormDataFromItemMap(formItemMap, formType));
+    const submitParams = useRemoteParamsFromValue({
+        dataSourceProfile,
+        formData,
+        formType,
+        _id,
+    });
+    React.useLayoutEffect(() => {
+        const r = {
+            formType,
+            addFormItem(name, formItem) {
+                var _a;
+                if (isNil(name) || (typeof name === 'string' && name.length === 0)) {
+                    // name 没设置或为空串的时候不受表单容器控制
+                    return noop;
+                }
+                if (((_a = formItemMap.get(name)) === null || _a === void 0 ? void 0 : _a.id) !== formItem.id) {
+                    logger.log('addFormItem', formItem, formItem.id, formItem.name);
+                    formItemMap.set(name, formItem);
+                }
+                return () => {
+                    formItemMap.delete(name);
+                };
+            },
+            submitParams,
+            setValue,
+            reset() {
+                setValue({}, true);
+            },
+            clearValue() {
+                setValue({}, true);
+            },
+            validate() {
+                return validate();
+            },
+            submit() {
+                return submit();
+            },
+            getConfig() {
+                return {
+                    componentType: 'form',
+                };
+            },
+            initialValues: initialValues,
+            authValue,
+            layout,
+            dataSourceName,
+            value: formData,
+            remoteValue: fetchedInitialValues,
+            updateFormContext,
+            dataSourceProfile,
+            errors,
+            clearValidate,
+            datasourceType,
+            methodCreate,
+            methodUpdate,
+            methodGetItem,
+        };
+        if (typeof ref === 'function') {
+            ref(r);
+        }
+        else if (typeof ref === 'object' && ref !== null) {
+            ref.current = r;
+        }
+    }, [
+        authValue,
+        dataSourceName,
+        dataSourceProfile,
+        errors,
+        fetchedInitialValues,
+        formItemMap,
+        formType,
+        initialValues,
+        layout,
+        setValue,
+        submit,
+        validate,
+        clearValidate,
+        updateFormContext,
+        formData,
+        datasourceType,
+        methodCreate,
+        methodUpdate,
+        methodGetItem,
+        ref,
+        submitParams,
+    ]);
+    useUnmountEffect(() => {
+        if (typeof ref === 'function') {
+            ref(null);
+        }
+        else if (typeof ref === 'object' && ref !== null) {
+            ref.current = null;
+        }
+    });
+    const setInitValue = useDebouncedCallback(() => {
+        var _a, _b, _c;
+        // 获取子表单初始值
+        const formDetailInitValue = {};
+        for (const [name, formItem] of formItemMap.entries()) {
+            if (((_b = (_a = formItem === null || formItem === void 0 ? void 0 : formItem.getConfig) === null || _a === void 0 ? void 0 : _a.call(formItem)) === null || _b === void 0 ? void 0 : _b.componentType) === 'formdetail') {
+                formDetailInitValue[name] = formItem === null || formItem === void 0 ? void 0 : formItem.value;
+            }
+        }
+        for (const [name, formItem] of formItemMap.entries()) {
+            // 合并子表单初始值与表单初始值
+            const initValues = { ...formDetailInitValue, ...initialValues };
+            const value = lodashGet(initValues, name);
+            if (initedItemMapRef.current[name] !== true && value !== undefined) {
+                (_c = formItem.setValue) === null || _c === void 0 ? void 0 : _c.call(formItem, value);
+                initedItemMapRef.current[name] = true;
+            }
+        }
+        updateFormContext();
+    }, [formItemMap, initialValues, updateFormContext], SET_VALUE_DEBOUNCE_TIMEOUT);
+    const lastInitValueRef = useRef(null);
+    React.useEffect(() => {
+        if (isObjectEqual(lastInitValueRef.current, initialValues) &&
+            isObjectEqual(formItemMapKeyRef.current, formItemMapKey)) {
+            return;
+        }
+        // 单向 Form向下设置值
+        let setValueReady = false;
+        const timeout = 30;
+        let id;
+        const setValueUntilReady = () => {
+            setValueReady = [...formItemMap.values()].every((item) => !!item.setValue);
+            if (!setValueReady) {
+                // eslint-disable-next-line rulesdir/no-timer
+                id = setTimeout(() => {
+                    setValueUntilReady();
+                }, timeout);
+                return;
+            }
+            if (id) {
+                clearTimeout(id);
+            }
+            setInitValue();
+        };
+        setValueUntilReady();
+        lastInitValueRef.current = initialValues;
+        formItemMapKeyRef.current = formItemMapKey;
+        return () => {
+            if (id) {
+                clearTimeout(id);
+            }
+        };
+    });
+    useDebouncedEffect(() => {
+        formItemMap.forEach((item) => {
+            var _a;
+            (_a = item === null || item === void 0 ? void 0 : item.forceUpdate) === null || _a === void 0 ? void 0 : _a.call(item);
+        });
+    }, [formItemMap, layout, formItemMapKey], 
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    15, 
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    30);
+    useLayoutEffect(() => {
+        // 兼容流程
+        if ($node) {
+            $node.setValue = setValue;
+            $node.submit = submit;
+            $node.formItems = '为了兼容不报错';
+            return () => {
+                $node.setValue = undefined;
+                $node.submit = undefined;
+                $node.formItems = undefined;
+            };
+        }
+    }, [$node, setValue, submit]);
+    const labelPosition = useMemo(() => {
+        if (layout === 'horizontal') {
+            return 'horizontal-left';
+        }
+        return 'vertical-left';
+    }, [layout]);
+    if (initValueLoadingStatus === 'hidden') {
+        return null;
+    }
+    if (initValueLoadingStatus === 'loading' && !fetchedInitialValues) {
+        return (_jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(StatusTip, { status: "loading", loadingText: "\u6570\u636E\u52A0\u8F7D\u4E2D..." }) }));
+    }
+    return (_jsx(FormUi, { layout: layout, className: cls, style: style, id: id, labelPosition: labelPosition, children: initValueFetchError ? (_jsx(EmptyContent, { emptyText: '数据加载失败', errorObj: initValueFetchError, icon: 'error', isH5: isH5 })) : (visible && contentSlot) }));
+});
+export default React.memo(WdForm);

package/dist/web/components/wd-form/style.d.ts

@@ -0,0 +1,3 @@
+import './wd-form.css';
+import '../form/form/style';
+import '../style';

package/dist/web/components/wd-form/style.js

@@ -0,0 +1,3 @@
+import './wd-form.css';
+import '../form/form/style';
+import '../style';

package/dist/web/components/wd-form/wd-form.css

@@ -0,0 +1,23 @@
+/*
+表单模版内置样式 {{{
+*/
+
+.wd-form-title__text.wd-h5-typography {
+  padding-left: 16px;
+}
+
+.wd-pc-form .wd-form-title {
+  padding-top: 24px;
+  padding-bottom: 12px;
+  margin-bottom: var(--wd-form-item-mb);
+}
+
+.wd-h5-form .wd-form-title {
+  --wd-form-item-mb: 0px;
+  padding-top: 16px;
+  padding-bottom: 8px;
+}
+
+/*
+}}} 表单模版内置样式 END
+*/

package/dist/web/components/wd-form/wd-form.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../types';
+import './style';
+export declare const WdForm: ({ className, layout, labelPosition, children, ...rest }: WdFormProps) => JSX.Element;
+export type WdFormProps = CommonPropsType & {
+    labelPosition?: string;
+    layout?: string;
+};

package/dist/web/components/wd-form/wd-form.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+import { usePlatform } from '../../utils/platform';
+import './style';
+export const WdForm = ({ className, layout, labelPosition, children, ...rest }) => {
+    const platform = usePlatform();
+    // 兼容旧版组件的属性值
+    const { classPrefix } = useConfig();
+    // const InputWrap = React.useRef(null);
+    const formType = '';
+    const compClassName = `${classPrefix}-form`;
+    // 类名
+    const classList = [compClassName];
+    // weui添加className
+    ['weui'].includes(formType) && classList.push(`${classPrefix}-form--weui `);
+    platform === 'h5' && classList.push(`${classPrefix}-form--weui `);
+    layout === 'inline' && classList.push(`${classPrefix}-form--inline `);
+    switch (labelPosition) {
+        case 'horizontal-right':
+            classList.push(`${classPrefix}-form--horizontal-right`);
+            break;
+        case 'vertical-left':
+            classList.push(`${classPrefix}-form--vertical-left`);
+            break;
+        case 'vertical-right':
+            classList.push(`${classPrefix}-form--vertical-right`);
+            break;
+        default:
+            classList.push();
+    }
+    // 用户定义的className
+    classList.push(className, 'wd-form');
+    if (platform === 'h5') {
+        classList.push('wd-h5-form');
+    }
+    else {
+        classList.push('wd-pc-form');
+    }
+    return (_jsx("div", { ...rest, className: classNames(...classList), children: children }));
+};

package/dist/web/components/wd-form-cell/index.d.ts

@@ -0,0 +1,3 @@
+import { WdFormCell } from './wd-form-cell';
+export { WdFormCell, type WdFormCellProps } from './wd-form-cell';
+export default WdFormCell;

package/dist/web/components/wd-form-cell/index.js

@@ -0,0 +1,3 @@
+import { WdFormCell } from './wd-form-cell';
+export { WdFormCell } from './wd-form-cell';
+export default WdFormCell;

package/dist/web/components/wd-form-cell/wd-form-cell.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-form';
+export declare const WdFormCell: ({ className, layout, labelPosition, label, children, }: WdFormCellProps) => JSX.Element;
+export interface WdFormCellProps extends CommonPropsType, DataType {
+    label?: string;
+    labelPosition?: string;
+}

package/dist/web/components/wd-form-cell/wd-form-cell.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from '../../utils/classnames';
+import { useConfig } from '../../utils/config-context';
+import { usePlatform } from '../../utils/platform';
+import { WdIcon } from '../wd-icon';
+export const WdFormCell = ({ className, layout, labelPosition, label, children, }) => {
+    const platform = usePlatform();
+    // 兼容旧版组件的属性值
+    const { classPrefix } = useConfig();
+    // const InputWrap = React.useRef(null);
+    const formType = '';
+    const compClassName = `${classPrefix}-form-item  `;
+    // 类名
+    const classList = [compClassName];
+    // weui添加className
+    ['weui'].includes(formType) &&
+        classList.push(`${classPrefix}-form-item--weui `);
+    // @ts-expect-error 兼容入参
+    layout === 'inline' && classList.push(`${classPrefix}-form-item--inline `);
+    switch (labelPosition) {
+        case 'horizontal-right':
+            classList.push(`${classPrefix}-form-item--horizontal-right `);
+            break;
+        case 'vertical-left':
+            classList.push(`${classPrefix}-form-item--vertical-left `);
+            break;
+        case 'vertical-right':
+            classList.push(`${classPrefix}-form-item--vertical-right `);
+            break;
+        default:
+            classList.push();
+    }
+    // 用户定义的className
+    classList.push(className);
+    if (platform === 'h5') {
+        classList.push('wd-h5-form-item');
+    }
+    else {
+        classList.push('wd-pc-for-item');
+    }
+    return (_jsx("div", { className: `${classNames(...classList)} is-required`, children: _jsxs("div", { className: `${classPrefix}-form-item-wrap`, children: [_jsx("div", { className: `${classPrefix}-form-item-wrap__label is-nowrap`, children: _jsxs("label", { children: [_jsx("span", { className: `${classPrefix}-form-item-wrap__label-text`, children: label || '' }), _jsx("span", { className: `${classPrefix}-form-item-wrap__label-explain`, children: _jsx(WdIcon, { name: "td:help-circle" }) })] }) }), _jsx("div", { className: `${classPrefix}-form-item-wrap__control`, children: _jsx("div", { className: `${classPrefix}-form-item-wrap__control-wrap`, children: children }) })] }) }));
+};

package/dist/web/components/wd-form-item/index.d.ts

@@ -0,0 +1,6 @@
+import { WdFormItem } from './wd-form-item';
+import { WdInputGroup } from './wd-input-group';
+import { WdInputWrap } from './wd-input-wrap';
+export { WdFormItem, WdInputGroup, WdInputWrap };
+export type { WdFormItemProps } from './wd-form-item';
+export default WdFormItem;

package/dist/web/components/wd-form-item/index.js

@@ -0,0 +1,5 @@
+import { WdFormItem } from './wd-form-item';
+import { WdInputGroup } from './wd-input-group';
+import { WdInputWrap } from './wd-input-wrap';
+export { WdFormItem, WdInputGroup, WdInputWrap };
+export default WdFormItem;