@cloudbase/weda-ui 3.5.2 → 3.6.0

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

@@ -0,0 +1,59 @@
+/* h5 */
+.wd-form-item.wd-h5-select-root .weda-picker input.weui-input {
+  padding: 0;
+}
+.wd-form-item.wd-h5-select-root .weui-cell.weda-picker {
+  padding: 0;
+}
+
+.wd-form-item.wd-h5-select-root .weda-picker .weui-input-arrow {
+  display: none;
+}
+
+.wd-form-item.wd-h5-select-root .weda-picker .weui-input-clear {
+  display: none;
+}
+
+/* pc */
+.wd-form-item.wd-pc-select-root .form-select-pc {
+  width: 100%;
+}
+
+.wd-form-item.wd-pc-select-root .wd-form-input-wrap {
+  padding-left: 0;
+  padding-right: 0;
+  position: relative;
+}
+
+.wd-form-item.wd-pc-select-root .wd-form-input-wrap__after {
+  position: absolute;
+  right: var(--wd-form-input-wrap-padding-lr);
+  top: 0;
+  bottom: 0;
+}
+
+.wd-form-item.wd-pc-select-root .wd-form-input-wrap__before {
+  margin-left: var(--wd-form-input-wrap-padding-lr);
+}
+
+.wd-form-item.wd-pc-select-root .wedatea2td-dropdown {
+  padding-left: var(--wd-form-input-wrap-padding-lr);
+  padding-right: 0;
+}
+
+.wd-form-item.wd-pc-select-root
+  .wedatea2td-dropdown-btn.wedatea2td-dropdown__header {
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+}
+
+.wd-form-item.wd-pc-select-root i.wedatea2td-icon-arrowdown,
+.wd-form-item.wd-pc-select-root .wedatea2td-icon-dismiss {
+  display: none;
+}
+
+.wd-form-item.wd-pc-select-root .wedatea2td-text-weak {
+  color: var(--wd-color-text-placeholder) !important;
+}

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

@@ -1,12 +1,15 @@
-/// <reference types="react" />
+import React from 'react';
 import type { CommonPropsType } from '../../types';
-export declare const WdSelect: ({ size, options }: {
-    size: any;
-    options: any;
-}) => JSX.Element;
-export interface WdSelectProps extends CommonPropsType {
-    defaultValue?: string;
-    size?: string;
-    options?: any;
-    layout?: string;
+import type { DataType } from '../../../configs/components/wd-select';
+import './style';
+/**
+ * 下拉单选-标准化
+ */
+export declare const WdSelect: React.ForwardRefExoticComponent<WdSelectProps & React.RefAttributes<any>>;
+export interface WdSelectProps extends CommonPropsType, DataType {
+    classRoot?: string;
+    enumName?: string;
+    primaryField?: string;
+    viewId?: string;
+    dataSourceName?: string;
 }

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

@@ -1,87 +1,83 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import classNames from '../../utils/classnames';
-import { useConfig } from '../../utils/config-context';
-import { WdInputWrap, WdIcon } from '../index';
-import StatusContent from '../statusContent';
-import { usePlatform } from '../../utils/platform';
-import { SelectPickerH5 } from './h5';
-import { WdFormItem } from '../wd-form-item';
-// import { WdRetry } from '../wd-retry/index';
-import { Popover } from 'tea-component';
-const LoadingStatus = false; // 是否加载中
-const searchShow = true;
-const mockData = [
-    { label: '全选', value: '1', isAll: true },
-    { label: '选中禁用状态', value: '1', checked: true },
-    { label: '选中状态', value: '2', checked: true },
-    { label: '未选中状态', value: '3' },
-    { label: '未选中状态', value: '4' },
-    { label: '未选中状态', value: '5' },
-    { label: '选中状态', value: '6', checked: true },
-    { label: '未选中状态', value: '7' },
-];
-const FormItemMockData = {
-    classRoot: 'member',
-    labelVisible: true,
-    label: '下拉选择',
-    testId: 'form-upload-file',
-    borderedPc: true,
-    borderedH5: true,
-    layout: 'horizontal',
-    // layout: 'vertical',
-};
-export const WdSelect = ({ size, options }) => {
-    const { classPrefix } = useConfig();
-    const [visible, setVisible] = React.useState(false);
-    const optionsData = options || mockData;
-    const compClassName = `${classPrefix}-form-select-wrap `;
-    const platform = usePlatform();
-    const isH5 = platform === 'h5'; // 响应式判定
-    // 类名
-    const classList = [compClassName];
-    const optionClassList = [''];
-    switch (size) {
-        case 'sm':
-            classList.push(`size-height-sm size-width-sm size-font-sm `);
-            optionClassList.push(`size-width-sm `);
-            break;
-        case 'md':
-            classList.push(`size-height-md size-width-md size-font-md `);
-            optionClassList.push(`size-width-md `);
-            break;
-        case 'lg':
-            classList.push(`size-height-lg size-width-lg size-font-lg `);
-            optionClassList.push(`size-width-lg `);
-            break;
-        default:
-            classList.push(`size-height-md size-width-md size-font-md `);
-            optionClassList.push(`size-width-md `);
-    }
-    return (_jsx(_Fragment, { children: _jsx(WdFormItem, { ...FormItemMockData, children: isH5 ? (_jsxs("div", { children: [_jsx(WdInputWrap, { className: classNames(...classList), 
-                        // 移入改变after图标为【清空】icon即可<WdIcon name="td:close-circle-filled" />
-                        after: _jsx(WdIcon, { name: "td:chevron-right", size: "sm" }), onClick: () => {
-                            setVisible(true);
-                        }, children: _jsxs("div", { className: `${classPrefix}-form-select__tag-group `, children: [_jsxs("div", { className: `${classPrefix}-form-select__tag-item `, children: [_jsx("span", { className: `${classPrefix}-form-select__tag-text `, children: "\u6D4B\u8BD51" }), _jsx(WdIcon, { name: "td:close" })] }), _jsxs("div", { className: `${classPrefix}-form-select__tag-item `, children: [_jsx("span", { className: `${classPrefix}-form-select__tag-text `, children: "\u6D4B\u8BD51" }), _jsx(WdIcon, { name: "td:close" })] }), _jsxs("div", { className: `${classPrefix}-form-select__tag-item `, children: [_jsx("span", { className: `${classPrefix}-form-select__tag-text `, children: "\u6D4B\u8BD51" }), _jsx(WdIcon, { name: "td:close" })] }), _jsx("div", { className: `${classPrefix}-form-select__tag-item `, children: _jsx("span", { className: `${classPrefix}-form-select__tag-text `, children: "+4" }) })] }) }), _jsx(SelectPickerH5, { isShow: visible, close: () => {
-                            setVisible(false);
-                        } })] })) : (_jsx(Popover, { visible: visible, onVisibleChange: (visible) => setVisible(visible), placement: "bottom-start", trigger: "click", overlayClassName: `${classPrefix}-select-option `, overlay: _jsxs("div", { className: `${classPrefix}-form-select-option-wrap ${classNames(optionClassList)}`, children: [searchShow && (_jsx("div", { className: `${classPrefix}-form-select-search-box`, children: _jsx(WdInputWrap, { className: `${classPrefix}-form-input-wrap--no-border`, after: _jsx(WdIcon, { name: "td:search" }), children: _jsx("input", { type: "text", placeholder: "\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9" }) }) })), _jsx("div", { className: `${classPrefix}-form-select-option`, children: !(optionsData === null || optionsData === void 0 ? void 0 : optionsData.length) ? (_jsx("div", { className: `${classPrefix}-form-select-option-loading-box`, children: LoadingStatus ? (_jsx(StatusContent, { emptyText: '数据加载中,请稍候...', component: "table", icon: "loading" })) : (
-                                // <StatusContent
-                                //   emptyText={
-                                //     <p>
-                                //       数据加载失败,
-                                //       <span className={`${classPrefix}-empty-retry-text`}>
-                                //         请重试
-                                //       </span>
-                                //     </p>
-                                //   }
-                                //   component="table"
-                                //   icon="error"
-                                // />
-                                // 无搜索内容
-                                _jsx(StatusContent, { emptyText: "\u65E0\u641C\u7D22\u5185\u5BB9", component: "table", icon: "empty" })) })) : (optionsData === null || optionsData === void 0 ? void 0 : optionsData.map((item, index) => {
-                                return (_jsx("div", { className: `${classPrefix}-form-select-option-item
-                  ${(item === null || item === void 0 ? void 0 : item.checked) ? 'is-checked' : ''}`, children: _jsx("span", { className: `${classPrefix}-form-select-option-item__label`, children: (item === null || item === void 0 ? void 0 : item.label) || '' }) }, index));
-                            })) })] }), children: _jsx(WdInputWrap, { className: classNames(...classList), 
-                    // 移入改变after图标为【清空】icon即可<WdIcon name="td:close-circle-filled" />
-                    after: _jsx(WdIcon, { name: "td:chevron-down" }), children: _jsx("input", { type: "text", className: `${classPrefix}-form-select_input`, readOnly: true, placeholder: "\u8BF7\u9009\u62E9" }) }) })) }) }));
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef, useState, useCallback } from 'react';
+import { useHandleClear, useFixedIcon, SELECT_ICON_H5, SELECT_ICON_PC, } from '../../utils/hooks/useFormLegacy';
+import { useFormInputTrait } from '../../components/form-input-hooks';
+import { WdFormItem, WdInputGroup, WdInputWrap } from '../wd-form-item';
+import Select from '../form/select';
+import { emptyObject } from '../../utils/constant';
+import { RecycleProvider } from '../../utils/hooks/useRecycle';
+import { useSelected } from '../../utils/hooks/use-selected';
+import { useDebouncedCallback, useSyncedRef } from '@react-hookz/web';
+import { useSetWidgetApi } from '../../utils/widget-api/use-set-widget-api';
+import { useDelayEvents } from '../../utils/hooks/use-delay-events';
+import { X_RUNTIME_DEFAULT } from '../../../configs/type-utils/x-runtime-default';
+import './style';
+/**
+ * 下拉单选-标准化
+ */
+export const WdSelect = forwardRef(function WsSelect(props, ref) {
+    const { classRoot = 'select', clearable = X_RUNTIME_DEFAULT.clearable, placeholder, range, format, tipBlock = X_RUNTIME_DEFAULT.tipBlock, where = X_RUNTIME_DEFAULT.where, enumName, primaryField, viewId, dataSourceName, events = emptyObject, ignoreCase = X_RUNTIME_DEFAULT.ignoreCase, } = props;
+    const [options, setOptions] = useState([]);
+    const [innerHandle, setInnerHandle] = useState({});
+    const traitProps = { ...props, inputRef: ref, setInnerHandle };
+    const trait = useFormInputTrait(traitProps);
+    const { value, onChange, disabled, readOnly, visible } = trait;
+    const [suffixType, suffixIcon] = useFixedIcon({
+        type: props.suffixType,
+        icon: props.suffixIcon,
+        iconH5: SELECT_ICON_H5,
+        iconPc: SELECT_ICON_PC,
+    });
+    const delayEvents = useDelayEvents(events);
+    const { selectedItem, selectedLabel } = useSelected({
+        range: options,
+        value,
+    });
+    const onClearChange = useCallback((v) => {
+        var _a;
+        onChange === null || onChange === void 0 ? void 0 : onChange(v);
+        (_a = delayEvents === null || delayEvents === void 0 ? void 0 : delayEvents.change) === null || _a === void 0 ? void 0 : _a.call(delayEvents, { value: v });
+    }, [onChange, delayEvents]);
+    const clearProps = useHandleClear({
+        onChange: onClearChange,
+        clearable,
+        disabled,
+        value,
+    });
+    const formItemProps = { ...props, ...trait, classRoot, readOnly: false };
+    const inputGroupProps = { ...props, classRoot, readOnly };
+    const inputWrapProps = {
+        ...props,
+        classRoot,
+        disabled,
+        readOnly,
+        suffixType,
+        suffixIcon,
+        ...clearProps,
+    };
+    const selectFields = React.useMemo(() => {
+        if (['father-son', 'related'].includes(format)) {
+            return [];
+        }
+        return [primaryField];
+    }, [format, primaryField]);
+    useSetWidgetApi(() => ({
+        ...innerHandle,
+        selectedLabel,
+        selectFields,
+        item: selectedItem,
+        value,
+    }), [innerHandle, selectedLabel, selectFields, selectedItem, value], ref);
+    const eventsRef = useSyncedRef(delayEvents);
+    const debouncedTriggerSearchEvent = useDebouncedCallback((value) => {
+        eventsRef.current.search({ value });
+    }, [eventsRef], 
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    300);
+    const onSearchValueInput = React.useCallback((v) => {
+        debouncedTriggerSearchEvent(v);
+    }, [debouncedTriggerSearchEvent]);
+    if (!visible)
+        return null;
+    return (_jsx(WdFormItem, { ...formItemProps, children: _jsx(WdInputGroup, { ...inputGroupProps, children: _jsx(WdInputWrap, { ...inputWrapProps, children: _jsx(RecycleProvider, { readOnly: readOnly, recycleBack: setOptions, children: _jsx(Select, { events: delayEvents, labelVisible: false, defaultValue: value, enumName: enumName, format: format, placeholder: placeholder, primaryField: primaryField, range: range, size: "full", tipBlock: tipBlock, viewId: viewId, where: where, dataSourceName: dataSourceName, readOnly: readOnly, disabled: disabled, mode: "selector", decorator: null, ignoreCase: ignoreCase, onChange: onChange, onSearchValueInput: onSearchValueInput }) }) }) }) }));
+});

package/dist/web/components/wd-select-multiple/index.d.ts

@@ -0,0 +1,3 @@
+import { WdSelectMultiple } from './wd-select-multiple';
+export { WdSelectMultiple, type WdSelectMultipleProps, } from './wd-select-multiple';
+export default WdSelectMultiple;

package/dist/web/components/wd-select-multiple/index.js

@@ -0,0 +1,3 @@
+import { WdSelectMultiple } from './wd-select-multiple';
+export { WdSelectMultiple, } from './wd-select-multiple';
+export default WdSelectMultiple;

package/dist/web/components/wd-select-multiple/style.d.ts

@@ -0,0 +1 @@
+import './wd-select-multiple.css';

package/dist/web/components/wd-select-multiple/style.js

@@ -0,0 +1 @@
+import './wd-select-multiple.css';

package/dist/web/components/wd-select-multiple/wd-select-multiple.css

@@ -0,0 +1,77 @@
+/* h5 */
+.wd-form-item.wd-h5-select-multiple-root .weda-picker input.weui-input {
+  padding: 0;
+}
+.wd-form-item.wd-h5-select-multiple-root .weda-picker.weui-cell {
+  padding: 0;
+}
+
+.wd-form-item.wd-h5-select-multiple-root .weda-picker .weui-input-arrow {
+  display: none;
+}
+
+.wd-form-item.wd-h5-select-multiple-root .weda-picker .weui-input-clear {
+  display: none;
+}
+
+/* pc */
+.wd-form-item.wd-pc-select-multiple-root .form-select-multiple-pc {
+  width: 100%;
+}
+
+.wd-form-item.wd-pc-select-multiple-root .wd-form-input-wrap {
+  padding-left: 0;
+  padding-right: 0;
+  position: relative;
+}
+
+.wd-form-item.wd-pc-select-multiple-root .wd-form-input-wrap__after {
+  position: absolute;
+  right: var(--wd-form-input-wrap-padding-lr);
+  top: 0;
+  bottom: 0;
+}
+
+.wd-form-item.wd-pc-select-multiple-root .wd-form-input-wrap__before {
+  margin-left: var(--wd-form-input-wrap-padding-lr);
+}
+
+.wd-form-item.wd-pc-select-multiple-root .wedatea2td-dropdown {
+  padding-left: var(--wd-form-input-wrap-padding-lr);
+  padding-right: 0;
+}
+
+.wd-form-item.wd-pc-select-multiple-root .form-select-multiple-pc .pc-clear {
+  display: none;
+}
+
+.wd-form-item.wd-pc-select-multiple-root
+  .form-select-multiple-pc
+  .wedatea2td-dropdown-btn.wedatea2td-dropdown__header {
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+}
+
+.wd-form-item.wd-pc-select-multiple-root
+  .form-select-multiple-pc
+  i.wedatea2td-icon-arrowdown {
+  display: none;
+}
+
+.wd-form-item.wd-pc-select-multiple-root
+  .form-select-multiple-pc
+  i.wedatea2td-icon-dismiss {
+  display: none;
+}
+
+.wd-form-item.wd-pc-select-multiple-root
+  .form-select-multiple-pc
+  .wedatea2td-text-weak,
+.wd-form-item.wd-pc-select-multiple-root
+  .wedatea2td-dropdown__value
+  div
+  div:not(.weda-ui-show-label) {
+  color: var(--wd-color-text-placeholder) !important;
+}

package/dist/web/components/wd-select-multiple/wd-select-multiple.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-select-multiple';
+import './style';
+/**
+ * 下拉多选-标准化
+ */
+export declare const WdSelectMultiple: React.ForwardRefExoticComponent<WdSelectMultipleProps & React.RefAttributes<any>>;
+export interface WdSelectMultipleProps extends CommonPropsType, DataType {
+    classRoot?: string;
+    enumName?: string;
+    primaryField?: string;
+    viewId?: string;
+    dataSourceName?: string;
+}

package/dist/web/components/wd-select-multiple/wd-select-multiple.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef, useState, useCallback } from 'react';
+import { WdFormItem, WdInputGroup, WdInputWrap } from '../wd-form-item';
+import SelectMultiple from '../form/selectMultiple';
+import { useHandleClear, useFixedIcon, SELECT_ICON_H5, SELECT_ICON_PC, } from '../../utils/hooks/useFormLegacy';
+import { useFormInputTrait } from '../../components/form-input-hooks';
+import { RecycleProvider } from '../../utils/hooks/useRecycle';
+import { useSelected } from '../../utils/hooks/use-selected';
+import { emptyObject } from '../../utils/constant';
+import { useSetWidgetApi } from '../../utils/widget-api/use-set-widget-api';
+import { useDelayEvents } from '../../utils/hooks/use-delay-events';
+import { X_RUNTIME_DEFAULT } from '../../../configs/type-utils/x-runtime-default';
+import './style';
+import { useDebouncedCallback, useSyncedRef } from '@react-hookz/web';
+/**
+ * 下拉多选-标准化
+ */
+export const WdSelectMultiple = forwardRef(function WdSelectMultiple(props, ref) {
+    const { classRoot = 'select-multiple', clearable = X_RUNTIME_DEFAULT.clearable, placeholder, range, enumName, format, primaryField, tipBlock = X_RUNTIME_DEFAULT.tipBlock, viewId, dataSourceName, events = emptyObject, ignoreCase = X_RUNTIME_DEFAULT.ignoreCase, } = props;
+    const [options, setOptions] = useState([]);
+    const [innerHandle, setInnerHandle] = useState({});
+    const traitProps = { ...props, inputRef: ref, setInnerHandle };
+    const trait = useFormInputTrait(traitProps);
+    const { value, onChange, disabled, readOnly, visible } = trait;
+    const [suffixType, suffixIcon] = useFixedIcon({
+        type: props.suffixType,
+        icon: props.suffixIcon,
+        iconH5: SELECT_ICON_H5,
+        iconPc: SELECT_ICON_PC,
+    });
+    const { selectedItem, selectedLabel } = useSelected({
+        range: options,
+        value,
+        multiple: true,
+    });
+    const delayEvents = useDelayEvents(events);
+    const onClearChange = useCallback((v) => {
+        var _a;
+        onChange === null || onChange === void 0 ? void 0 : onChange(v);
+        (_a = delayEvents === null || delayEvents === void 0 ? void 0 : delayEvents.change) === null || _a === void 0 ? void 0 : _a.call(delayEvents, { value: v });
+    }, [onChange, delayEvents]);
+    const clearProps = useHandleClear({
+        onChange: onClearChange,
+        clearable,
+        disabled,
+        value,
+    });
+    const formItemProps = { ...props, ...trait, classRoot, readOnly: false };
+    const inputGroupProps = { ...props, classRoot, readOnly };
+    const inputWrapProps = {
+        ...props,
+        classRoot,
+        disabled,
+        readOnly,
+        suffixType,
+        suffixIcon,
+        ...clearProps,
+    };
+    useSetWidgetApi(() => ({
+        ...innerHandle,
+        selectedLabel,
+        selectFields: [primaryField],
+        item: selectedItem,
+        value,
+    }), [innerHandle, selectedLabel, primaryField, selectedItem, value], ref);
+    const eventsRef = useSyncedRef(events);
+    const debouncedTriggerSearchEvent = useDebouncedCallback((value) => {
+        eventsRef.current.search({ value });
+    }, [eventsRef], 
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    300);
+    const onSearchValueInput = React.useCallback((v) => {
+        debouncedTriggerSearchEvent(v);
+    }, [debouncedTriggerSearchEvent]);
+    if (!visible)
+        return null;
+    return (_jsx(WdFormItem, { ...formItemProps, children: _jsx(WdInputGroup, { ...inputGroupProps, children: _jsx(WdInputWrap, { ...inputWrapProps, children: _jsx(RecycleProvider, { readOnly: readOnly, recycleBack: setOptions, children: _jsx(SelectMultiple, { events: delayEvents, labelVisible: false, defaultValue: value, enumName: enumName, format: format, placeholder: placeholder, primaryField: primaryField, range: range, size: "full", tipBlock: tipBlock, viewId: viewId, dataSourceName: dataSourceName, readOnly: readOnly, disabled: disabled, mode: "selector", decorator: null, ignoreCase: ignoreCase, onChange: onChange, onSearchValueInput: onSearchValueInput }) }) }) }) }));
+});

package/dist/web/components/wd-side-tab/index.d.ts

@@ -0,0 +1,3 @@
+import { WdSideTab } from './wd-side-tab';
+export { WdSideTab, type WdSideTabProps } from './wd-side-tab';
+export default WdSideTab;

package/dist/web/components/wd-side-tab/index.js

@@ -0,0 +1,3 @@
+import { WdSideTab } from './wd-side-tab';
+export { WdSideTab } from './wd-side-tab';
+export default WdSideTab;

package/dist/web/components/wd-side-tab/wd-side-tab.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-side-tab';
+export interface WdSideTabProps extends CommonPropsType, DataType {
+}
+export declare const WdSideTab: React.ForwardRefExoticComponent<WdSideTabProps & React.RefAttributes<unknown>>;

package/dist/web/components/wd-side-tab/wd-side-tab.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, forwardRef, useImperativeHandle, } from 'react';
+import WdTabs from '../wd-tabs';
+export const WdSideTab = forwardRef(function WdSideTab({ isMultipleSlot = false, selectedValue = '1', ...restProps }, ref) {
+    const [selectedTab, setSelectedTab] = useState(0);
+    const [tabsDatas, setTabsDatas] = useState([]);
+    const updateSelected = (param) => {
+        setSelectedTab(param);
+    };
+    const getIndex = (val) => {
+        setSelectedTab(val);
+    };
+    useImperativeHandle(ref, () => {
+        var _a, _b;
+        return ({
+            selectTab: async (params) => {
+                const { value } = params;
+                const index = restProps.list.findIndex((i) => i.value === value);
+                updateSelected(index);
+            },
+            isMultipleSlot,
+            list: restProps.list,
+            selectedValue: (_b = (_a = restProps === null || restProps === void 0 ? void 0 : restProps.list) === null || _a === void 0 ? void 0 : _a.find((i, index) => index === selectedTab)) === null || _b === void 0 ? void 0 : _b.value,
+        });
+    }, [isMultipleSlot, restProps.list, selectedTab]);
+    useEffect(() => {
+        var _a;
+        const tabsDatas = (_a = restProps.list) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
+            return { ...item, selected: index === selectedTab };
+        });
+        setTabsDatas(tabsDatas);
+    }, [restProps.list, selectedTab]);
+    useEffect(() => {
+        var _a;
+        const index = (_a = restProps.list) === null || _a === void 0 ? void 0 : _a.findIndex((item) => item.value === selectedValue);
+        if (index !== selectedTab) {
+            setSelectedTab(index);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedValue, restProps.list]);
+    return (_jsx(WdTabs, { isMultipleSlot: isMultipleSlot, selectedIndex: selectedTab, tabsDatas: tabsDatas, direction: "vertical", getIndex: getIndex, ...restProps }));
+});

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

@@ -9,6 +9,7 @@ import { useSyncValue } from '../../utils/hooks/useSyncValue';
 import { emptyObject } from '../../utils/constant';
 import { useFormInputTrait } from '../form-input-hooks';
 import { useSize } from '../../utils/hooks/useFormLegacy';
+import { useSetWidgetApi } from '../../utils/widget-api/use-set-widget-api';
 export const WdSwitch = React.forwardRef(function FormSwitch(props, inputRef) {
     const { 
     // 系统属性
@@ -17,7 +18,7 @@ export const WdSwitch = React.forwardRef(function FormSwitch(props, inputRef) {
     const [innerHandle, setInnerHandle] = React.useState({}); // hook里挂出的属性
     /** 兼容从 Form 获取属性，必须引入，自动挂载组件方法 */
     const traitProps = { ...props, inputRef, setInnerHandle };
-    const { value: defaultChecked, onChange: outerOnChange, disabled, readOnly, validateErrorMsg, validateState, visible, value, required, layout, } = useFormInputTrait(traitProps);
+    const { value: defaultChecked, onChange: outerOnChange, disabled, readOnly, validateErrorMsg, validateState, visible, value, required, } = useFormInputTrait(traitProps);
     const [checked, setChecked] = useSyncValue(defaultChecked);
     const { classPrefix } = useConfig();
     const platform = usePlatform();
@@ -27,11 +28,12 @@ export const WdSwitch = React.forwardRef(function FormSwitch(props, inputRef) {
     const switchCls = classNames({
         'is-checked': checked,
         'is-disabled': disabled || readOnly,
+        'is-readonly': readOnly,
         'size-sm': !['h5'].includes(platform) && ['sm'].includes(size),
         'size-md': !['h5'].includes(platform) && ['md'].includes(size),
         'size-lg': ['h5'].includes(platform) || ['lg'].includes(size),
     });
-    React.useImperativeHandle(inputRef, () => ({
+    useSetWidgetApi(() => ({
         ...innerHandle,
         name,
         value,
@@ -40,7 +42,7 @@ export const WdSwitch = React.forwardRef(function FormSwitch(props, inputRef) {
         visible,
         disabled,
         readOnly,
-    }), [innerHandle, name, value, label, required, visible, disabled, readOnly]);
+    }), [innerHandle, name, value, label, required, visible, disabled, readOnly], inputRef);
     const onChange = (ev) => {
         var _a;
         const value = ev.target.checked;
@@ -48,5 +50,5 @@ export const WdSwitch = React.forwardRef(function FormSwitch(props, inputRef) {
         outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(value);
         (_a = events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value }, { orgianalEvent: ev });
     };
-    return (visible && (_jsx(WdFormItem, { ...props, testId: "form-switch", validateErrorMsg: validateErrorMsg, validateState: validateState, readValue: defaultChecked, classRoot: 'switch', disabled: disabled, layout: layout, children: _jsxs("label", { className: `${classPrefix}-switch ${switchCls}`, htmlFor: _id, children: [_jsx("input", { id: _id, name: name, className: `${classPrefix}-switch__input `, type: "checkbox", checked: checked, disabled: disabled || readOnly, onChange: onChange }), _jsx("div", { className: `${classPrefix}-switch__box` })] }, _id) })));
+    return (visible && (_jsx(WdFormItem, { ...props, testId: "form-switch", validateErrorMsg: validateErrorMsg, validateState: validateState, readValue: defaultChecked, classRoot: 'switch', disabled: disabled, layout: props.layout, children: _jsxs("label", { className: `${classPrefix}-switch ${switchCls}`, htmlFor: _id, children: [_jsx("input", { id: _id, name: name, className: `${classPrefix}-switch__input `, type: "checkbox", checked: checked, disabled: disabled || readOnly, onChange: onChange }), _jsx("div", { className: `${classPrefix}-switch__box` })] }) })));
 });

package/dist/web/components/wd-tabbar/index.d.ts

@@ -0,0 +1,3 @@
+import { WdTabBar } from './wd-tabbar';
+export { WdTabBar, type WdTabBarProps } from './wd-tabbar';
+export default WdTabBar;

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

@@ -0,0 +1,3 @@
+import { WdTabBar } from './wd-tabbar';
+export { WdTabBar } from './wd-tabbar';
+export default WdTabBar;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { DataType } from '../../../configs/components/wd-tabbar';
+import type { CommonPropsType } from '../../types';
+import '../style';
+export declare const WdTabBar: React.ForwardRefExoticComponent<WdTabBarProps & React.RefAttributes<unknown>>;
+export interface WdTabBarProps extends CommonPropsType, DataType {
+}