@cloudbase/weda-ui 3.5.2 → 3.6.0

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

@@ -0,0 +1,252 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import * as React from 'react';
+import { WdFormItem } from '../wd-form-item';
+import { useConfig } from '../../utils/config-context';
+import classNames from '../../utils/classnames';
+import { useSyncValue } from '../../utils/hooks/useSyncValue';
+import { emptyObject } from '../../utils/constant';
+import { useFormInputTrait } from '../form-input-hooks';
+import { useSetWidgetApi } from '../../utils/widget-api/use-set-widget-api';
+import { WdIcon } from '../index';
+import { Bubble, ConfigProvider } from 'tea-component';
+import { calculateNextValue, calculatePercentByValueAndBoundary, } from '../../utils/range';
+export const WdRating = React.forwardRef(function FormRating(props, inputRef) {
+    const { name, label, min = 0, max = 5, step = 1, events = emptyObject, style, icon: _icon = 'td:star-filled', iconSrc: _iconSrc, foregroundColor = '#ffcf48', backgroundColor = '#bfbfbf', callbacks, size = 'sm', } = props;
+    let { backgroundIcon: _backgroundIcon, backgroundIconSrc: _backgroundIconSrc, } = props;
+    if (!_backgroundIcon) {
+        _backgroundIcon = _icon;
+        if (_icon === '自定义图片') {
+            _backgroundIconSrc = _iconSrc;
+        }
+    }
+    const [innerHandle, setInnerHandle] = React.useState({}); // hook里挂出的属性
+    /** 兼容从 Form 获取属性，必须引入，自动挂载组件方法 */
+    const traitProps = { ...props, inputRef, setInnerHandle };
+    const { value: defaultValue, onChange: outerOnChange, disabled, readOnly, validateErrorMsg, validateState, visible, required, } = useFormInputTrait(traitProps);
+    const active = !(readOnly || disabled);
+    const [realValue, setRealValue] = useSyncValue(defaultValue);
+    const [showValue, setShowValue] = React.useState(realValue);
+    const [interacting, setInteracting] = React.useState(false);
+    const containerRef = React.useRef(null);
+    useSetWidgetApi(() => ({
+        ...innerHandle,
+        name,
+        min,
+        max,
+        step,
+        value: realValue,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+    }), [
+        innerHandle,
+        name,
+        min,
+        max,
+        step,
+        realValue,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+    ], inputRef);
+    // 如果 active, 根据是否在交互中判断是否要展示预览值
+    const val = active ? (interacting ? showValue : realValue) : realValue;
+    const percent = 100 -
+        calculatePercentByValueAndBoundary({
+            value: val,
+            min,
+            max,
+        });
+    const { classPrefix } = useConfig();
+    const ratingCls = classNames({
+        'is-disabled': disabled,
+        'is-readonly': readOnly,
+        [`${classPrefix}-rating`]: true,
+    });
+    const bubbleTranslateX = React.useMemo(() => {
+        var _a;
+        if (!active) {
+            return 0;
+        }
+        const containerRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!containerRect) {
+            return 0;
+        }
+        const iconCount = max - min;
+        const { width: containerWidth } = containerRect;
+        const iconWidth = containerWidth / iconCount;
+        let currentIconIndex = Math.ceil(val - min) - 1;
+        if (currentIconIndex < 0) {
+            currentIconIndex = 0;
+        }
+        const result = -0.5 * containerWidth + (0.5 + currentIconIndex) * iconWidth;
+        return result;
+    }, [max, min, val, active]);
+    // If formatter is explicitly passed, use it anyway; else default to val.
+    const bubbleContent = typeof (callbacks === null || callbacks === void 0 ? void 0 : callbacks.tooltip) === 'function'
+        ? callbacks.tooltip({ value: val })
+        : val;
+    const { icon, iconSrc, iconSource } = standardizeIconProps({
+        icon: _icon,
+        iconSrc: _iconSrc,
+    });
+    const { icon: backgroundIcon, iconSrc: backgroundIconSrc, iconSource: backgroundIconSource, } = standardizeIconProps({
+        icon: _backgroundIcon,
+        iconSrc: _backgroundIconSrc,
+    });
+    const onClick = (e) => {
+        var _a, _b;
+        if (!active) {
+            return;
+        }
+        const rect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect) {
+            return;
+        }
+        const result = calculateNextValue({
+            axisLowerBound: rect.left,
+            axisHigherBound: rect.right,
+            coordinate: e.clientX,
+            min,
+            max,
+            step,
+        });
+        setRealValue(result);
+        outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(result);
+        (_b = events.change) === null || _b === void 0 ? void 0 : _b.call(events, { value: result });
+    };
+    const onMouseEnter = () => setInteracting(true);
+    const onMouseLeave = () => setInteracting(false);
+    const onMouseMove = (e) => {
+        var _a;
+        if (!active) {
+            return;
+        }
+        const rect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!rect) {
+            return;
+        }
+        const result = calculateNextValue({
+            axisLowerBound: rect.left,
+            axisHigherBound: rect.right,
+            coordinate: e.clientX,
+            min,
+            max,
+            step,
+        });
+        setShowValue(result);
+    };
+    // bind on target
+    const onTouchStart = (e) => {
+        var _a, _b, _c;
+        setInteracting(true);
+        if (!active) {
+            return;
+        }
+        // if active, update value according to touch
+        const coordinate = (_a = e === null || e === void 0 ? void 0 : e.touches[0]) === null || _a === void 0 ? void 0 : _a.clientX;
+        if (typeof coordinate !== 'number') {
+            return;
+        }
+        const rect = (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+        if (!rect) {
+            return;
+        }
+        const result = calculateNextValue({
+            axisLowerBound: rect.left,
+            axisHigherBound: rect.right,
+            coordinate,
+            min,
+            max,
+            step,
+        });
+        setRealValue(result);
+        setShowValue(result);
+        outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(result);
+        (_c = events.change) === null || _c === void 0 ? void 0 : _c.call(events, { value: result });
+    };
+    // bind on document
+    const onTouchEnd = React.useCallback(() => {
+        setInteracting(false);
+    }, []);
+    // bind on document
+    const onTouchMove = React.useCallback((e) => {
+        var _a, _b, _c;
+        if (!(active && interacting)) {
+            return;
+        }
+        // if active, update value according to touch
+        const coordinate = (_a = e === null || e === void 0 ? void 0 : e.touches[0]) === null || _a === void 0 ? void 0 : _a.clientX;
+        if (typeof coordinate !== 'number') {
+            return;
+        }
+        const rect = (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+        if (!rect) {
+            return;
+        }
+        const result = calculateNextValue({
+            axisLowerBound: rect.left,
+            axisHigherBound: rect.right,
+            coordinate,
+            min,
+            max,
+            step,
+        });
+        setRealValue(result);
+        setShowValue(result);
+        outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(result);
+        (_c = events.change) === null || _c === void 0 ? void 0 : _c.call(events, { value: result });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [min, max, step, active, outerOnChange, events, interacting]);
+    React.useEffect(() => {
+        document.addEventListener('touchend', onTouchEnd);
+        document.addEventListener('touchmove', onTouchMove);
+        return () => {
+            document.removeEventListener('touchend', onTouchEnd);
+            document.removeEventListener('touchmove', onTouchMove);
+        };
+    }, [onTouchEnd, onTouchMove]);
+    return (visible && (_jsx(WdFormItem, { ...props, testId: "form-rating", validateErrorMsg: validateErrorMsg, validateState: validateState, readValue: realValue, classRoot: 'rating', disabled: disabled, layout: props.layout, children: _jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsx(Bubble, { placement: "top", visible: interacting, content: bubbleContent, overlayStyle: { transform: `translate(${bubbleTranslateX}px)` }, children: _jsxs("div", { ref: containerRef, onMouseMove: onMouseMove, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onTouchStart: onTouchStart, onClick: onClick, className: ratingCls, children: [_jsx("div", { className: `${classPrefix}-rating__full-icons-container`, style: {
+                                clipPath: `inset(0 ${percent}% 0 0)`,
+                            }, children: _jsx(_Fragment, { children: Array.from({ length: max - min }, (_, index) => (_jsx("div", { className: `${classPrefix}-rating__icon-container`, children: _jsx(RatingIcon, { classPrefix: classPrefix, style: style, icon: icon, color: foregroundColor, iconSrc: iconSrc, iconSource: iconSource, size: size }) }, index))) }) }), _jsx("div", { className: `${classPrefix}-rating__empty-icons-container`, children: _jsx(_Fragment, { children: Array.from({ length: max - min }, (_, index) => (_jsx("div", { className: `${classPrefix}-rating__icon-container`, children: _jsx(RatingIcon, { classPrefix: classPrefix, style: style, icon: backgroundIcon, color: backgroundColor, iconSrc: backgroundIconSrc, iconSource: backgroundIconSource, size: size }) }, index))) }) })] }) }) }) })));
+});
+const DEFAULT_ICON = 'td:star-filled';
+const SIZES = ['sm', 'md', 'lg'];
+const DEFAULT_SIZE = 'sm';
+function standardizeIconProps({ icon: _icon, iconSrc: _iconSrc, }) {
+    let iconSource;
+    let icon;
+    let iconSrc;
+    if (_icon === '自定义图片') {
+        if (_iconSrc) {
+            iconSource = 'custom';
+            icon = '';
+            iconSrc = _iconSrc;
+        }
+        else {
+            iconSource = 'inner';
+            icon = DEFAULT_ICON;
+            iconSrc = '';
+        }
+    }
+    else {
+        iconSource = 'inner';
+        icon = _icon;
+        iconSrc = '';
+    }
+    return { iconSource, icon, iconSrc };
+}
+function RatingIcon({ classPrefix, icon, iconSrc, iconSource, style, color, size: _size, }) {
+    const size = SIZES.includes(_size) ? _size : DEFAULT_SIZE;
+    const iconCls = classNames({
+        [`${classPrefix}-rating__icon`]: true,
+        [`${classPrefix}-icon--inherit`]: (style === null || style === void 0 ? void 0 : style.fontSize) && iconSource === 'inner',
+    });
+    return (_jsx(WdIcon, { "data-testid": "rating-icon", className: iconCls, size: size, color: color, name: icon, src: iconSrc, type: iconSource }));
+}

package/dist/web/components/{wd-region-select → wd-region/_design}/h5.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef } from 'react';
-import { Portal } from '../common/portal';
-import { useConfig } from '../../utils/config-context';
-import { WdIcon } from '../index';
+import { Portal } from '../../common/portal';
+import { useConfig } from '../../../utils/config-context';
+import { WdIcon } from '../../index';
 // import StatusContent from '../statusContent';
 const mockOptionData = [
     { label: '北京市', key: 0 },

package/dist/web/components/{wd-region-select → wd-region/_design}/wd-region.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../../types';
 export declare const WdRegion: ({ options }: {
     options: any;
 }) => JSX.Element;

package/dist/web/components/{wd-region-select → wd-region/_design}/wd-region.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } 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 { WdFormItem } from '../wd-form-item';
-import { usePlatform } from '../../utils/platform';
+import classNames from '../../../utils/classnames';
+import { useConfig } from '../../../utils/config-context';
+import { WdInputWrap, WdIcon } from '../../index';
+import { WdFormItem } from '../../wd-form-item';
+import { usePlatform } from '../../../utils/platform';
 import { SelectPickerH5 } from './h5';
 import { Cascader, ConfigProvider } from 'tea-component';
 const FormItemMockData = {

package/dist/web/components/{wd-region-select → wd-region}/index.d.ts

@@ -1,3 +1,3 @@
 import { WdRegion } from './wd-region';
-export { WdRegion, type WdSelectProps } from './wd-region';
+export { WdRegion, type WdRegionProps } from './wd-region';
 export default WdRegion;

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

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

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

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

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

@@ -0,0 +1,59 @@
+.wd-form-item.wd-h5-region-root .wd-form-input-wrap .weui-cell {
+  padding: 0;
+}
+
+.wd-form-item.wd-h5-region-root .wd-form-input-wrap input.weui-input {
+  padding: 0;
+}
+
+/* pc */
+.wd-form-item.wd-pc-region-root .wd-form-input-wrap .wedatea2td-cascader {
+  width: 100%;
+  border: none;
+  padding: 0;
+}
+.wd-form-item.wd-pc-region-root .wd-form-input-wrap .wedatea2td-cascader:hover {
+  background-color: transparent;
+}
+
+.wd-form-item.wd-pc-region-root
+  .wd-form-input-wrap
+  .wedatea2td-cascader
+  input.wedatea2td-input {
+  padding: 0;
+}
+
+.wd-form-item.wd-pc-region-root
+  .wd-form-input-wrap
+  .wedatea2td-cascader
+  .wedatea2td-dropdown-btn.wedatea2td-dropdown__header {
+  border: none;
+  padding: 0;
+  height: 100%;
+}
+
+.wd-form-item.wd-pc-region-root
+  .wd-form-input-wrap
+  .wedatea2td-cascader
+  i.wedatea2td-icon-arrowdown {
+  display: none;
+}
+
+.wd-form-item.wd-pc-region-root
+  .wd-form-input-wrap
+  .wedatea2td-cascader
+  i.wedatea2td-icon-dismiss {
+  display: none;
+}
+
+.wd-form-item.wd-pc-region-root
+  .wd-form-input-wrap
+  .wedatea2td-cascader
+  .wedatea2td-text-weak {
+  color: var(--wd-color-text-placeholder) !important;
+}
+
+.wd-form-item.wd-pc-region-root .wedatea2td-input,
+.wd-form-item.wd-pc-region-root .wedatea2td-cascader__input {
+  color: inherit;
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-region';
+import './style';
+/**
+ * 地区选择-标准化
+ */
+export declare const WdRegion: React.ForwardRefExoticComponent<WdRegionProps & React.RefAttributes<any>>;
+export interface WdRegionProps extends CommonPropsType, DataType {
+    classRoot?: string;
+}

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, 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 { RecycleProvider } from '../../utils/hooks/useRecycle';
+import Select from '../form/select';
+import { emptyObject } from '../../utils/constant';
+import { X_RUNTIME_DEFAULT } from '../../../configs/type-utils/x-runtime-default';
+import './style';
+/**
+ * 地区选择-标准化
+ */
+export const WdRegion = forwardRef(function WdRegion(props, ref) {
+    const { classRoot = 'region', clearable = X_RUNTIME_DEFAULT.clearable, placeholder, regionType = X_RUNTIME_DEFAULT.regionType, events = emptyObject, } = props;
+    const traitProps = { ...props, inputRef: ref };
+    const trait = useFormInputTrait(traitProps);
+    const { name, 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 onClearChange = useCallback((v) => {
+        var _a;
+        onChange === null || onChange === void 0 ? void 0 : onChange(v);
+        (_a = events === null || events === void 0 ? void 0 : events.change) === null || _a === void 0 ? void 0 : _a.call(events, { value: v });
+    }, [onChange, events]);
+    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,
+    };
+    if (!visible)
+        return null;
+    return (_jsx(WdFormItem, { ...formItemProps, children: _jsx(WdInputGroup, { ...inputGroupProps, children: _jsx(WdInputWrap, { ...inputWrapProps, children: _jsx(RecycleProvider, { readOnly: readOnly, children: _jsx(Select, { events: events, labelVisible: false, name: name, regionType: regionType, defaultMutiRegion: value, placeholder: placeholder, size: "full", readOnly: readOnly, disabled: disabled, mode: "mutiRegion", decorator: null, onChange: onChange }) }) }) }) }));
+});

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { CommonPropsType } from '../../types';
 export declare const WdRetry: () => JSX.Element;
 export interface WdRetryProps extends CommonPropsType {

package/dist/web/components/wd-rich-text/index.d.ts

@@ -0,0 +1,3 @@
+import { WdRichText } from './wd-rich-text';
+export { WdRichText, type WdRichTextProps } from './wd-rich-text';
+export default WdRichText;

package/dist/web/components/wd-rich-text/index.js

@@ -0,0 +1,3 @@
+import { WdRichText } from './wd-rich-text';
+export { WdRichText } from './wd-rich-text';
+export default WdRichText;

package/dist/web/components/wd-rich-text/style.d.ts

@@ -0,0 +1 @@
+import './wd-rich-text.css';

package/dist/web/components/wd-rich-text/style.js

@@ -0,0 +1 @@
+import './wd-rich-text.css';

package/dist/web/components/wd-rich-text/wd-rich-text.css

@@ -0,0 +1,23 @@
+.wd-form-item.wd-rich-text-root .weui-cell.weui-cell_form {
+  width: 100%;
+  padding: 0;
+}
+
+/* pc */
+.wd-form-item.wd-pc-rich-text-root .form-rich-text-pc {
+  width: 100%;
+}
+
+.wd-form-item.wd-pc-rich-text-root .exeditor-toolbar {
+  background-color: inherit;
+}
+
+.wd-form-item.wd-pc-rich-text-root .ExEditor-basic {
+  background-color: inherit;
+}
+
+.wd-form-item.wd-pc-rich-text-root
+  > .wd-form-item-wrap
+  > .wd-form-item-wrap__control {
+  overflow-x: hidden;
+}

package/dist/web/components/wd-rich-text/wd-rich-text.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { DataType } from '../../../configs/components/wd-rich-text';
+import type { CommonPropsType } from '../../types';
+import './style';
+/**
+ * 富文本-标准化
+ */
+export declare const WdRichText: React.ForwardRefExoticComponent<WdRichTextProps & React.RefAttributes<any>>;
+export interface WdRichTextProps extends CommonPropsType, DataType {
+    classRoot?: string;
+    acceptTypes?: any;
+    maxSize?: any;
+}

package/dist/web/components/wd-rich-text/wd-rich-text.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { forwardRef } from 'react';
+import { useFormInputTrait } from '../../components/form-input-hooks';
+import { WdFormItem } from '../wd-form-item';
+import RichText from '../richText';
+import { emptyObject } from '../../utils/constant';
+import './style';
+/**
+ * 富文本-标准化
+ */
+export const WdRichText = forwardRef(function WdRichText(props, ref) {
+    const { classRoot = 'rich-text', events = emptyObject, acceptTypes = ['image/*'], maxSize = 20, } = props;
+    const trait = useFormInputTrait({ ...props, inputRef: ref });
+    const { value, onChange, disabled, readOnly, visible } = trait;
+    const formItemProps = {
+        ...props,
+        ...trait,
+        classRoot,
+        readOnly: false,
+        size: 'lg',
+    };
+    if (!visible)
+        return null;
+    return (_jsx(WdFormItem, { ...formItemProps, children: _jsx(RichText, { placeholder: true, events: events, acceptTypes: acceptTypes, maxSize: maxSize, readOnly: readOnly, disabled: disabled, value: value, decorator: null, onChange: onChange }) }));
+});

package/dist/web/components/wd-select/{h5.js → _design/h5.js}

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef } from 'react';
-import { Portal } from '../common/portal';
-import { useConfig } from '../../utils/config-context';
-import { WdIcon } from '../index';
+import { Portal } from '../../common/portal';
+import { useConfig } from '../../../utils/config-context';
+import { WdIcon } from '../../index';
 // import StatusContent from '../statusContent';
 const mockBasicsOptionData = [
     { label: ' ' },

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

@@ -0,0 +1,11 @@
+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;
+}

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

@@ -0,0 +1,87 @@
+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" }) }) })) }) }));
+};

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

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

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

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