@cloudbase/weda-ui 0.2.17 → 0.2.21-alpha.1

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

@@ -0,0 +1,588 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint max-lines: [error, 800] */
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { useMap, useMountEffect, useSyncedRef, useUnmountEffect, } from '@react-hookz/web';
+import { unstable_batchedUpdates } from 'react-dom';
+import { errorHandler } from '../../utils/error';
+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 { useSetWidgetApi } from '../../utils/widget-api/use-set-widget-api';
+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';
+import { FormTypeProvider } from './contexts/form-type-context';
+import { FormLayoutProvider } from './contexts/form-layout-context';
+import { FormWidgetProvider } from './contexts/form-widget-context';
+import useDebouncedCallback from '../../utils/hooks/use-debounced-callback';
+import { useSyncValue } from '../../utils/hooks/useSyncValue';
+const timeout = (ms) => new Promise((resolve) => {
+    // eslint-disable-next-line rulesdir/no-timer
+    setTimeout(resolve, ms);
+});
+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, lgWidth, labelAlign = 'left', 
+    // 兼容流程setValue调用，其他地方别用
+    $node, $widget, } = props;
+    const formsItemMap = useMap([]);
+    /**
+     * 根据他的文档
+     * 上面返回的 formItemMap 引用会保持不变，但是Map的方法会导致重渲染
+     * 所以要用它作useEffect deps的时候用下面这个string
+     *  */
+    const formItemMapKey = [...formsItemMap.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 [isDisabledSubmit, setIsDisabledSubmit] = useSyncValue(props.isDisabledSubmit);
+    const enableSubmit = useCallback(() => {
+        setIsDisabledSubmit(false);
+    }, [setIsDisabledSubmit]);
+    const disableSubmit = useCallback(() => {
+        setIsDisabledSubmit(true);
+    }, [setIsDisabledSubmit]);
+    const hasSetInitValueRef = useRef(false);
+    const { ready } = useWedaAppContext();
+    const [initialValues, setInitialValues] = useState((_a = props.initialValues) !== null && _a !== void 0 ? _a : emptyObject);
+    const [propsValue] = useSyncValue(props.value);
+    const eventsRef = useSyncedRef(props.events);
+    const validate = useCallback(async () => {
+        const validatePromise = [];
+        const validateKey = [];
+        const validateLabel = [];
+        formsItemMap.forEach((item) => {
+            if (!item)
+                return;
+            let items = item;
+            if (!Array.isArray(items)) {
+                items = [item];
+            }
+            items.forEach((item) => {
+                if (item.handleValidate) {
+                    const validate = item.handleValidate(false);
+                    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;
+    }, [formsItemMap]);
+    const [errors, setErrors] = useState(undefined);
+    const allSelectFields = useMemo(() => {
+        if (!ready) {
+            return null;
+        }
+        const fields = {};
+        logger.debug('formItemMapKey', { formItemMapKey });
+        formsItemMap.forEach((items, name) => {
+            items.forEach((item) => {
+                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;
+    }, [formsItemMap, ready, formItemMapKey]);
+    const { remoteValue: fetchedInitialValues, loadingStatus: initValueLoadingStatus, error: initValueFetchError, } = useRemoteValue({
+        appCloud,
+        formType,
+        _id,
+        // methodCreate,
+        methodGetItem,
+        // methodUpdate,
+        paramGetItem,
+        dataSourceName,
+        isDataModel,
+        allSelectFields,
+        eventsRef,
+        datasourceType,
+        value: propsValue,
+    });
+    const submitPromiseCache = useRef(undefined);
+    const submit = useCallback(async () => {
+        if (isDisabledSubmit)
+            return;
+        const run = async () => {
+            const { submit, validateSuccess, validateFail } = eventsRef.current;
+            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+            await timeout(SET_VALUE_DEBOUNCE_TIMEOUT * 2);
+            const errorObj = await validate();
+            if (Object.keys(errorObj !== null && errorObj !== void 0 ? errorObj : {}).length === 0) {
+                validateSuccess({ errors: {} });
+                logger.debug('formItemMapKey', formItemMapKey);
+                const formData = getFormDataFromItemMap(formsItemMap, formType);
+                const extra = ['read', 'edit'].includes(formType) && _id ? { _id } : {};
+                submit && submit(deepClone({ ...extra, ...formData }));
+                // 流程用了;
+                return formData;
+            }
+            else {
+                setErrors(errorObj);
+                validateFail({
+                    errors: getErrorObjectFromValidateResult(errorObj),
+                });
+            }
+        };
+        if (!submitPromiseCache.current) {
+            submitPromiseCache.current = run();
+        }
+        const r = await submitPromiseCache.current;
+        submitPromiseCache.current = null;
+        return r;
+    }, [
+        _id,
+        eventsRef,
+        formItemMapKey,
+        formType,
+        formsItemMap,
+        isDisabledSubmit,
+        validate,
+    ]);
+    const updateFormContextImmediate = useCallback(() => {
+        Promise.resolve().then(() => {
+            var _a, _b;
+            const formData = getFormDataFromItemMap(formsItemMap, 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, formsItemMap, formType]);
+    const updateFormContext = useDebouncedCallback(updateFormContextImmediate, 
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    20, { maxWait: 40, trailing: true });
+    const setValueImmediate = useCallback((data, setNull, isImmediate) => {
+        if (typeof data !== 'object' || data === null) {
+            console.warn('setValue data need expect a object but got', data);
+            return;
+        }
+        const formItemMapEntriesList = [...formsItemMap.entries()];
+        formItemMapEntriesList.map(([name, n]) => {
+            var _a;
+            let items = (_a = formsItemMap.get(name)) !== null && _a !== void 0 ? _a : n;
+            if (!Array.isArray(items)) {
+                items = [items];
+            }
+            items.forEach((item) => {
+                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);
+                    }
+                }
+            });
+        });
+        isImmediate ? updateFormContextImmediate() : updateFormContext();
+    }, [formsItemMap, updateFormContext, updateFormContextImmediate]);
+    const setValue = useDebouncedCallback(setValueImmediate, 
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    SET_VALUE_DEBOUNCE_TIMEOUT * 2, { trailing: true });
+    const clearValidate = useCallback(() => {
+        formsItemMap.forEach((items) => {
+            items.forEach((item) => {
+                if (!item.clearValidate || typeof item.clearValidate !== 'function') {
+                    console.error('表单组件缺少clearValidate方法:', item);
+                    return;
+                }
+                item.clearValidate();
+            });
+        });
+    }, [formsItemMap]);
+    const [visible, setVisible] = React.useState(false);
+    React.useEffect(() => {
+        setVisible(true);
+    }, []);
+    useMountEffect(() => {
+        logger.debug('formItemMap', formsItemMap);
+    });
+    const { data: dataSourceProfile } = useDataSource(dataSourceName);
+    const authValue = useAuthValue({
+        appCloud,
+        isDataModel,
+        dataSourceName,
+    });
+    const initDataSourceFieldsWithAuth = useCallback((authValue) => {
+        logger.debug('onInitDataSourceFieldsWithAuth', authValue);
+        const { isDataModel, dataSourceFieldsWidthAuthList } = authValue;
+        try {
+            formsItemMap.forEach((items, name) => {
+                items.forEach((item) => {
+                    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) {
+            formsItemMap.forEach((items) => {
+                items.forEach((item) => {
+                    const setStateForAuth = createSetStateForAuth({
+                        setReadOnly: item.setReadOnly,
+                        setVisible: item.setVisible,
+                    });
+                    if (!item || !item.setDataSourceFieldsWithAuth)
+                        return;
+                    setStateForAuth('rw');
+                });
+            });
+            errorHandler({
+                code: 'InitFormSetDataSourceFieldsWithAuthError',
+                error,
+                id,
+            });
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [formsItemMap]);
+    const { data: formInitValueToSet } = useInitValueFromRemote(datasourceType, dataSourceProfile, fetchedInitialValues);
+    useEffect(() => {
+        if (initValueLoadingStatus !== 'done' || !fetchedInitialValues)
+            return;
+        if (!initValueFetchError && formInitValueToSet) {
+            /*
+            错误处理放在了 @link {onInitialValuesError}
+            下面是可以拿到data了
+            */
+            // TODO: 有哪些key可以暴露
+            setInitialValues((original) => {
+                if (hasSetInitValueRef.current) {
+                    return original;
+                }
+                hasSetInitValueRef.current = true;
+                return formInitValueToSet;
+            });
+            // 先设置，此时会初始化 form detail item个数
+            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,
+        formsItemMap,
+        formItemMapKey,
+    ]);
+    const initedItemMapRef = useRef({});
+    const preFormCtxRef = useRef(null);
+    const [formData, setFormData] = useState(() => getFormDataFromItemMap(formsItemMap, formType));
+    const submitParams = useRemoteParamsFromValue({
+        dataSourceProfile,
+        formData,
+        formType,
+        _id,
+    });
+    useSetWidgetApi(() => {
+        const r = {
+            formType,
+            addFormItem(name, formItem) {
+                if (isNil(name) || (typeof name === 'string' && name.length === 0)) {
+                    // name 没设置或为空串的时候不受表单容器控制
+                    console.warn(`组件 #${formItem === null || formItem === void 0 ? void 0 : formItem.id} 表单key(表单输入类组件 name 属性)没设置或为空串的时候不受表单容器控制`);
+                    return noop;
+                }
+                if (formsItemMap.has(name)) {
+                    formsItemMap.get(name).push(formItem);
+                }
+                else {
+                    formsItemMap.set(name, [formItem]);
+                }
+                return () => {
+                    const items = formsItemMap.get(name);
+                    const removedArr = items.filter((item) => item !== formItem);
+                    if (removedArr.length <= 0) {
+                        formsItemMap.delete(name);
+                    }
+                    else {
+                        formsItemMap.set(name, removedArr);
+                    }
+                };
+            },
+            submitParams,
+            setValue,
+            reset() {
+                setValue({}, true);
+            },
+            clearValue({ isImmediate = false } = {}) {
+                if (isImmediate) {
+                    setValueImmediate({}, true, true);
+                }
+                else {
+                    setValue({}, true);
+                }
+            },
+            async validate() {
+                const errObj = await validate();
+                const { validateSuccess, validateFail } = eventsRef.current;
+                if (Object.keys(errObj !== null && errObj !== void 0 ? errObj : {}).length > 0) {
+                    setErrors(errObj);
+                    validateFail({ errors: getErrorObjectFromValidateResult(errObj) });
+                    throw errObj;
+                }
+                else {
+                    validateSuccess({ errors: {} });
+                }
+                return errObj;
+            },
+            submit() {
+                return submit();
+            },
+            getConfig() {
+                return {
+                    componentType: 'form',
+                };
+            },
+            initialValues: initialValues,
+            authValue,
+            layout,
+            dataSourceName,
+            value: formData,
+            remoteValue: fetchedInitialValues,
+            updateFormContext,
+            dataSourceProfile,
+            errors,
+            clearValidate,
+            datasourceType,
+            methodCreate,
+            methodUpdate,
+            methodGetItem,
+            isDisabledSubmit,
+            disableSubmit,
+            enableSubmit,
+            __setValueImmediate__: setValueImmediate,
+        };
+        return r;
+    }, [
+        formType,
+        submitParams,
+        setValue,
+        initialValues,
+        authValue,
+        layout,
+        dataSourceName,
+        formData,
+        fetchedInitialValues,
+        updateFormContext,
+        dataSourceProfile,
+        errors,
+        formsItemMap,
+        submit,
+        validate,
+        clearValidate,
+        datasourceType,
+        methodCreate,
+        methodUpdate,
+        methodGetItem,
+        isDisabledSubmit,
+        disableSubmit,
+        enableSubmit,
+        eventsRef,
+        setValueImmediate,
+    ], ref);
+    useUnmountEffect(() => {
+        if (typeof ref === 'function') {
+            ref(null);
+        }
+        else if (typeof ref === 'object' && ref !== null) {
+            ref.current = null;
+        }
+    });
+    const setInitValueImmediate = useCallback(() => {
+        // 获取子表单初始值
+        const formDetailInitValue = {};
+        for (const [name, formItems] of formsItemMap.entries()) {
+            formItems.forEach((formItem) => {
+                var _a, _b;
+                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;
+                }
+            });
+        }
+        const entires = [...formsItemMap.entries()];
+        unstable_batchedUpdates(() => {
+            for (const [name, formItems] of entires) {
+                // 合并子表单初始值与表单初始值
+                const formItem = formItems;
+                const initValues = { ...formDetailInitValue, ...formInitValueToSet };
+                const value = lodashGet(initValues, name);
+                if (initedItemMapRef.current[name] !== true && value !== undefined) {
+                    formItems.forEach((item) => {
+                        var _a;
+                        logger.debug(`set VALUE ${name}`, value, formItem);
+                        (_a = item.setValue) === null || _a === void 0 ? void 0 : _a.call(item, value);
+                    });
+                    initedItemMapRef.current[name] = true;
+                }
+            }
+        });
+        updateFormContext();
+    }, [formInitValueToSet, formsItemMap, updateFormContext]);
+    const setInitValue = useDebouncedCallback(setInitValueImmediate, SET_VALUE_DEBOUNCE_TIMEOUT, {
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        maxWait: SET_VALUE_DEBOUNCE_TIMEOUT * 2,
+        trailing: true,
+    });
+    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 = [...formsItemMap.values()].every((items) => items.every((item) => !!item.setValue));
+            if (id) {
+                clearTimeout(id);
+                id = null;
+            }
+            if (!setValueReady) {
+                // eslint-disable-next-line rulesdir/no-timer
+                id = setTimeout(() => {
+                    setValueUntilReady();
+                }, timeout);
+                return;
+            }
+            /* formInitValueToSet 被初始化后会调用setValue
+            此时form items都有了，但是setInitValue 里面batch update 之后还是会出现form detail内部有时设置不上值（下断点或电脑卡就可以）
+            不batch update form item 多了会非常非常卡，所以搞两下
+      
+            https://andon.woa.com/ticket/detail/?id=11607503&sign=e9f203927d29c0007a797039a1471f7d
+            */
+            setInitValueImmediate();
+            Promise.resolve().then(setInitValue);
+        };
+        setValueUntilReady();
+        lastInitValueRef.current = initialValues;
+        formItemMapKeyRef.current = formItemMapKey;
+        return () => {
+            if (id) {
+                clearTimeout(id);
+            }
+        };
+    });
+    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(() => {
+        return `${layout}-${labelAlign}`;
+    }, [layout, labelAlign]);
+    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(FormWidgetProvider, { "$widget": $widget, children: _jsx(FormLayoutProvider, { layout: layout, children: _jsx(FormTypeProvider, { formType: formType, children: _jsx(FormUi, { layout: layout, className: cls, style: style, id: id, lgWidth: lgWidth, 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,26 @@
+/*
+表单模版内置样式 {{{
+*/
+
+.wd-form-title__text.wd-h5-typography {
+  margin-left: 16px;
+  margin-right: 16px;
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+.wd-pc-form .wd-form-title {
+  padding-top: 24px;
+  padding-bottom: 12px;
+  margin-bottom: calc(var(--wd-form-item-mb) * 0.5);
+}
+
+.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 type { DataType } from '../../../configs/components/wd-form';
+import './style';
+export declare const WdForm: ({ className, lgWidth, labelPosition, children, ...rest }: WdFormProps) => JSX.Element;
+export type WdFormProps = CommonPropsType & Pick<DataType, 'layout' | 'lgWidth'> & {
+    labelPosition: 'horizontal-left' | 'vertical-left' | 'horizontal-right' | 'vertical-right';
+};

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

@@ -0,0 +1,49 @@
+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,
+lgWidth = 'hundred', 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 `);
+    if (platform === 'pc' && lgWidth) {
+        classList.push(`size-width-${lgWidth}`);
+    }
+    switch (labelPosition) {
+        case 'horizontal-right':
+            classList.push(`${classPrefix}-form--horizontal-right`);
+            break;
+        case 'horizontal-left':
+            classList.push(`${classPrefix}-form--horizontal-left`);
+            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-arr/index.d.ts

@@ -0,0 +1,4 @@
+import { WdFormArr } from './wd-form-arr';
+export { WdFormArr } from './wd-form-arr';
+export type { WdFormArrProps } from './wd-form-arr';
+export default WdFormArr;