@cloudbase/weda-ui 3.5.0 → 3.5.2

package/dist/web/components/wd-date-range/elements/YearMonthPicker.h5.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { useMemo, useState } from 'react';
+import { WheelPicker } from './WheelPicker';
+import { useSyncValue } from '../../../utils/hooks/useSyncValue';
+import { getFullDay, convertValueToDateItem, convertMoment, convertDateItemToValue, getExistValue, useDateValue, } from '../../../utils/hooks/useFormLegacy';
+import { noop } from '../../../utils/constant';
+/**
+ * 年月滚动选择
+ */
+export function YearMonthPicker(props) {
+    var _a, _b, _c, _d;
+    const { start, end, onChange = noop } = props;
+    const _value = useDateValue({ ...props, mode: 'month' });
+    const [value, setValue] = useSyncValue(_value);
+    const dateItem = useMemo(() => convertValueToDateItem(value), [value]);
+    const range = useMemo(() => [convertMoment(start), convertMoment(end)], [start, end]);
+    const [startY, endY] = [(_a = range[0]) === null || _a === void 0 ? void 0 : _a.year(), (_b = range[1]) === null || _b === void 0 ? void 0 : _b.year()];
+    const [startYM, endYM] = [(_c = range[0]) === null || _c === void 0 ? void 0 : _c.month(), (_d = range[1]) === null || _d === void 0 ? void 0 : _d.month()];
+    const yearOptions = useMemo(() => {
+        if (!startY || !endY)
+            return [];
+        return Array.from({ length: endY - startY + 1 }).map((d, i) => ({
+            value: startY + i,
+            label: `${startY + i}年`,
+        }));
+    }, [startY, endY]);
+    const getMonthOptions = (year) => {
+        if (!startY || !endY)
+            return [];
+        let _start = 0;
+        let _end = 11;
+        if (year === startY) {
+            _start = startYM;
+        }
+        else if (year === endY) {
+            _end = endYM;
+        }
+        return Array.from({ length: _end - _start + 1 }).map((d, i) => {
+            const label = `${getFullDay(_start + i + 1)}月`;
+            return { value: _start + i, label };
+        });
+    };
+    const [monthOptions, setMonthOptions] = useState(getMonthOptions(dateItem.year));
+    const pickerItems = [yearOptions, monthOptions];
+    const pickerValue = [dateItem.year, dateItem.month];
+    const handleChange = (values) => {
+        const [_year, _month] = values;
+        const year = getExistValue(_year, yearOptions);
+        const monthOptions = getMonthOptions(year); // 月份实时变化
+        const month = getExistValue(_month, monthOptions);
+        const value = convertDateItemToValue({ ...dateItem, year, month });
+        setMonthOptions(monthOptions);
+        setValue(value);
+        onChange(value);
+    };
+    return (_jsx(WheelPicker, { items: pickerItems, value: pickerValue, onChange: handleChange }));
+}

package/dist/web/components/wd-date-range/elements/YearPicker.h5.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { IDatePickerOptions } from './interface';
+/**
+ * 年滚动选择
+ */
+export declare function YearPicker(props: IDatePickerOptions): JSX.Element;

package/dist/web/components/wd-date-range/elements/YearPicker.h5.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { WheelPicker } from './WheelPicker';
+import { useSyncValue } from '../../../utils/hooks/useSyncValue';
+import { convertValueToDateItem, convertMoment, convertDateItemToValue, getExistValue, useDateValue, } from '../../../utils/hooks/useFormLegacy';
+import { noop } from '../../../utils/constant';
+/**
+ * 年滚动选择
+ */
+export function YearPicker(props) {
+    var _a, _b;
+    const { start, end, onChange = noop } = props;
+    const _value = useDateValue({ ...props, mode: 'year' });
+    const [value, setValue] = useSyncValue(_value);
+    const dateItem = useMemo(() => convertValueToDateItem(value), [value]);
+    const range = useMemo(() => [convertMoment(start), convertMoment(end)], [start, end]);
+    const [startY, endY] = [(_a = range[0]) === null || _a === void 0 ? void 0 : _a.year(), (_b = range[1]) === null || _b === void 0 ? void 0 : _b.year()];
+    const yearOptions = useMemo(() => {
+        if (!startY || !endY)
+            return [];
+        //eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        return Array.from({ length: endY - startY + 1 }).map((d, i) => ({
+            value: startY + i,
+            label: `${startY + i}年`,
+        }));
+    }, [startY, endY]);
+    const pickerItems = [yearOptions];
+    const pickerValue = [dateItem.year];
+    const handleChange = (values) => {
+        const [_year] = values;
+        const year = getExistValue(_year, yearOptions);
+        const value = convertDateItemToValue({ ...dateItem, year });
+        setValue(value);
+        onChange(value);
+    };
+    return (_jsx(WheelPicker, { items: pickerItems, value: pickerValue, onChange: handleChange }));
+}

package/dist/web/components/wd-date-range/elements/YearPicker.pc.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { MonthPickerProps } from 'tea-component';
+/**
+ * pc 版简易年份选择器
+ * 传参与 MonthPicker 保持一致
+ */
+export declare function YearPicker(props: MonthPickerProps & {
+    id?: string;
+}): JSX.Element;

package/dist/web/components/wd-date-range/elements/YearPicker.pc.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import { useState, useMemo } from 'react';
+import { Popover, ConfigProvider } from 'tea-component';
+import { useConfig } from '../../../utils/config-context';
+import classNames from '../../../utils/classnames';
+import { useSyncValue } from '../../../utils/hooks/useSyncValue';
+import { convertMoment, convertYears, convertValueToDateItem, convertDateItemToValue, } from '../../../utils/hooks/useFormLegacy';
+import { getDayNow } from '../../../utils/moment';
+import { noop } from '../../../utils/constant';
+import isEqual from '../../../utils/isObjectEqual';
+/**
+ * pc 版简易年份选择器
+ * 传参与 MonthPicker 保持一致
+ */
+export function YearPicker(props) {
+    const { value: _value, range = [], disabled, className, placeholder, format = 'YYYY', onChange = noop, id, } = props;
+    const nowYear = useMemo(() => getDayNow().year(), []);
+    const [value, setValue] = useSyncValue(_value, isEqual);
+    const [visible, setVisible] = useState(false);
+    const [page, setPage] = useState(0);
+    const { classPrefix } = useConfig();
+    const dateItem = useMemo(() => convertValueToDateItem(value), [value]);
+    const year = value ? dateItem.year : nowYear;
+    const valueDisplay = useMemo(() => (value === null || value === void 0 ? void 0 : value.format(format)) || '', [value, format]);
+    const { years, yearStart, yearEnd } = useMemo(() => convertYears(year, page), [year, page]);
+    const [start, end] = useMemo(() => {
+        var _a, _b;
+        return [
+            (_a = convertMoment(range[0])) === null || _a === void 0 ? void 0 : _a.format('YYYY'),
+            (_b = convertMoment(range[1])) === null || _b === void 0 ? void 0 : _b.format('YYYY'),
+        ];
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [range[0], range[1]]);
+    // 选中年
+    const handleSelect = (v) => {
+        if (isDisabled(v))
+            return;
+        setPage(0);
+        setVisible(false);
+        const m = convertMoment(convertDateItemToValue({ ...dateItem, year: v }));
+        setValue(m);
+        onChange === null || onChange === void 0 ? void 0 : onChange(m, null);
+    };
+    // 上一年
+    const handlePre = (e) => {
+        e.stopPropagation();
+        setPage((d) => d - 1);
+    };
+    // 下一年
+    const handleNext = (e) => {
+        e.stopPropagation();
+        setPage((d) => d + 1);
+    };
+    // 回到当前
+    const handleCurrent = (e) => {
+        e.stopPropagation();
+        setPage(0);
+    };
+    // 是否禁用
+    const isDisabled = (v) => {
+        return ((start && Number(v) < Number(start)) || (end && Number(v) > Number(end)));
+    };
+    // 是否选中
+    const isSelected = (v) => value && v === year;
+    // 是否当前年
+    const isNowYear = (v) => v === nowYear;
+    return (_jsx(ConfigProvider, { classPrefix: classPrefix, children: _jsx(Popover, { placement: "bottom-start", trigger: "click", visible: visible, onVisibleChange: (v) => !v && setVisible(v), overlay: _jsx("div", { className: `${classPrefix}-dropdown-box`, children: _jsx("div", { className: `${classPrefix}-calendar ${classPrefix}-calendar--date-range`, children: _jsxs("div", { className: `wd-calendar__body`, children: [_jsxs("div", { className: `${classPrefix}-calendar__table`, children: [_jsx("div", { className: `${classPrefix}-calendar__caption`, children: _jsxs(_Fragment, { children: [yearStart, "-", yearEnd] }) }), _jsxs("div", { className: `${classPrefix}-pagination ${classPrefix}-pagination--bordernone`, children: [_jsx("a", { className: `${classPrefix}-pagination__turnbtn ${classPrefix}-pagination__prebtn`, title: "\u4E0A\u4E8C\u5341\u5E74", onClick: handlePre, children: _jsx("i", { className: `${classPrefix}-icon ${classPrefix}-icon-arrowleft` }) }), _jsx("a", { className: `${classPrefix}-pagination__turnbtn ${classPrefix}-pagination__curbtn`, title: "\u5F53\u524D\u4E8C\u5341\u5E74", onClick: handleCurrent, children: _jsx("i", { className: `${classPrefix}-icon ${classPrefix}-icon-cur` }) }), _jsx("a", { className: `${classPrefix}-pagination__turnbtn ${classPrefix}-pagination__nextbtn`, title: "\u4E0B\u4E8C\u5341\u5E74", onClick: handleNext, children: _jsx("i", { className: `${classPrefix}-icon ${classPrefix}-icon-arrowright` }) })] }), _jsx("div", { className: `${classPrefix}-calendar__row-group`, children: _jsx("div", { className: `${classPrefix}-calendar__type-wrap ${classPrefix}-calendar__type--year`, children: years.map((rows) => (_jsx("div", { className: `${classPrefix}-calendar__row`, children: rows.map((item) => (_jsx("div", { className: classNames(`${classPrefix}-calendar__cell`, {
+                                                        [`${classPrefix}-calendar__cell--now`]: isNowYear(item),
+                                                        'is-selected': isSelected(item),
+                                                        'is-disabled': isDisabled(item),
+                                                    }), onClick: () => handleSelect(item), children: _jsx("span", { children: item }) }, item))) }, rows.join()))) }) })] }), _jsxs("div", { className: `${classPrefix}-calendar__table`, children: [_jsx("div", { className: `${classPrefix}-calendar__caption`, children: _jsxs(_Fragment, { children: [yearStart, "-", yearEnd] }) }), _jsxs("div", { className: `${classPrefix}-pagination ${classPrefix}-pagination--bordernone`, children: [_jsx("a", { className: `${classPrefix}-pagination__turnbtn ${classPrefix}-pagination__prebtn`, title: "\u4E0A\u4E8C\u5341\u5E74", onClick: handlePre, children: _jsx("i", { className: `${classPrefix}-icon ${classPrefix}-icon-arrowleft` }) }), _jsx("a", { className: `${classPrefix}-pagination__turnbtn ${classPrefix}-pagination__curbtn`, title: "\u5F53\u524D\u4E8C\u5341\u5E74", onClick: handleCurrent, children: _jsx("i", { className: `${classPrefix}-icon ${classPrefix}-icon-cur` }) }), _jsx("a", { className: `${classPrefix}-pagination__turnbtn ${classPrefix}-pagination__nextbtn`, title: "\u4E0B\u4E8C\u5341\u5E74", onClick: handleNext, children: _jsx("i", { className: `${classPrefix}-icon ${classPrefix}-icon-arrowright` }) })] }), _jsx("div", { className: `${classPrefix}-calendar__row-group`, children: _jsx("div", { className: `${classPrefix}-calendar__type-wrap ${classPrefix}-calendar__type--year`, children: years.map((rows) => (_jsx("div", { className: `${classPrefix}-calendar__row`, children: rows.map((item) => (_jsx("div", { className: classNames(`${classPrefix}-calendar__cell`, {
+                                                        [`${classPrefix}-calendar__cell--now`]: isNowYear(item),
+                                                        'is-selected': isSelected(item),
+                                                        'is-disabled': isDisabled(item),
+                                                    }), onClick: () => handleSelect(item), children: _jsx("span", { children: item }) }, item))) }, rows.join()))) }) })] })] }) }) }), children: _jsx("div", { onClick: () => !disabled && setVisible(true), className: classNames(`${classPrefix}-datepicker`, className), children: _jsxs("div", { className: `${classPrefix}-datepicker__input wd-datepicker__input--range`, children: [_jsx("input", { id: id, disabled: disabled, placeholder: placeholder, value: valueDisplay, autoComplete: "off" }), _jsx("span", { children: "-" }), _jsx("input", { id: id, disabled: disabled, placeholder: placeholder, value: valueDisplay, autoComplete: "off" })] }) }) }) }));
+}

package/dist/web/components/wd-date-range/elements/interface.d.ts

@@ -0,0 +1,41 @@
+import type { DataType } from '../../../../configs/components/wd-date';
+export interface IDatePickerOptions {
+    value?: number | string;
+    start?: string;
+    end?: string;
+    mode?: string;
+    onChange?: any;
+}
+export interface IDatePicker extends Omit<IDatePickerOptions, 'onChange'> {
+    onOk?: any;
+    onClose?: any;
+}
+export interface IPureDate extends DataType {
+    onChange?: (v: number) => any;
+    disabled?: boolean;
+    inputId?: string;
+}
+export interface IDate {
+    year?: number;
+    month?: number;
+    day?: number;
+    hour?: number;
+    minute?: number;
+    second?: number;
+    millisecond?: number;
+}
+export type IOption = {
+    value: any;
+    label?: string;
+    disabled?: boolean;
+};
+export interface IItemPicker {
+    value?: any;
+    onChange?: (value?: any) => void;
+    options?: IOption[];
+}
+export interface IWheelPicker {
+    value?: any[];
+    onChange?: (value?: any[]) => void;
+    items?: IOption[][];
+}

package/dist/web/components/wd-date-range/elements/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/web/components/wd-date-range/h5.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IPureDate } from './elements/interface';
+export declare function DateH5(props: IPureDate): JSX.Element;

package/dist/web/components/wd-date-range/h5.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useConfig } from '../../utils/config-context';
+import { DatePicker } from './elements/DatePicker.h5';
+export function DateH5(props) {
+    const { inputId, disabled, value, onChange, mode, start, end } = props;
+    const [visible, setVisible] = useState(false);
+    const { classPrefix } = useConfig();
+    const inputCls = `${classPrefix}-form-select_input ${classPrefix}-form-select_input--range`;
+    const handleChange = (v) => {
+        onChange(v);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { id: inputId, className: inputCls, onClick: () => !disabled && setVisible(true), style: {}, children: ['2021-10-24 12:13:14', _jsx("span", { className: `${classPrefix}-form-select_input-split`, children: "-" }), '2021-10-24 12:13:14'] }), visible && (_jsx(DatePicker, { value: value, start: start, end: end, mode: mode, onClose: () => setVisible(false), onOk: handleChange }))] }));
+}

package/dist/web/components/wd-date-range/index.d.ts

@@ -0,0 +1,3 @@
+import { WdDateRange } from './wd-date-range';
+export { WdDateRange, type WdDateRangeProps } from './wd-date-range';
+export default WdDateRange;

package/dist/web/components/wd-date-range/index.js

@@ -0,0 +1,3 @@
+import { WdDateRange } from './wd-date-range';
+export { WdDateRange } from './wd-date-range';
+export default WdDateRange;

package/dist/web/components/wd-date-range/pc.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { IPureDate } from './elements/interface';
+/**
+ * 日期时间 pc 端，value/onChange 是最终表单的值（number类型）
+ */
+export declare function DatePc(props: IPureDate): JSX.Element;

package/dist/web/components/wd-date-range/pc.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DatePicker, ConfigProvider } from 'tea-component';
+import { useConfig } from '../../utils/config-context';
+import moment from '../../utils/moment';
+import { YearPicker } from './elements/YearPicker.pc';
+const { RangePicker } = DatePicker;
+/**
+ * 日期时间 pc 端，value/onChange 是最终表单的值（number类型）
+ */
+export function DatePc(props) {
+    // 属性
+    const { mode } = props;
+    const { classPrefix } = useConfig();
+    // 组件
+    let Elem = null;
+    if (mode === 'month') {
+        Elem = (_jsx(RangePicker, { separator: "-", calendarType: "month", defaultValue: [moment('2020-10'), moment('2020-11')] }));
+    }
+    else if (mode === 'year') {
+        Elem = (_jsx(YearPicker
+        // separator="-"
+        // defaultValue={[moment('2020-10-01'), moment('2020-11-11')]}
+        , {}));
+    }
+    else if (mode === 'datetimeMinute') {
+        Elem = (_jsx(RangePicker, { format: "YYYY-MM-DD HH:mm:ss.SSS", separator: "-", showTime: { format: 'HH:mm:ss.SSS' } }));
+    }
+    else if (mode === 'datetime') {
+        Elem = (_jsx(RangePicker, { separator: "-", showTime: true, defaultValue: [moment('2020-10-01'), moment('2020-11-11')] }));
+    }
+    else {
+        Elem = (_jsx(RangePicker, { separator: "-", defaultValue: [moment('2020-10-01'), moment('2020-11-11')] }));
+    }
+    // 返回
+    return _jsx(ConfigProvider, { classPrefix: classPrefix, children: Elem });
+}

package/dist/web/components/wd-date-range/wd-date-range.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { DataType } from '../../../configs/components/wd-date';
+import type { CommonPropsType } from '../../types';
+/**
+ * 标准化：日期组件
+ */
+export declare const WdDateRange: React.ForwardRefExoticComponent<WdDateRangeProps & React.RefAttributes<any>>;
+export interface WdDateRangeProps extends CommonPropsType, DataType {
+    classRoot?: string;
+}

package/dist/web/components/wd-date-range/wd-date-range.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo, useImperativeHandle, useState } from 'react';
+import { WdFormItem, WdInputGroup, WdInputWrap } from '../wd-form-item';
+import { useStringProp, convertMoment, useDateFormat, } from '../../utils/hooks/useFormLegacy';
+import { useFormInputTrait } from '../form-input-hooks';
+import { getUuid } from '../../utils/tool';
+import { DatePc } from './pc';
+import { DateH5 } from './h5';
+import { usePlatform } from '../../utils/platform';
+import { getDayEnd100, getDayStart100 } from '../../utils/moment';
+/**
+ * 标准化：日期组件
+ */
+export const WdDateRange = React.forwardRef(function WdDateRange(props, ref) {
+    const { classRoot = 'date', label, name, start: _start, end: _end, clearable = false, events, } = props;
+    const [startDefault, endDefault] = useMemo(() => [getDayStart100(), getDayEnd100()], []);
+    const [start, end] = [_start || startDefault, _end || endDefault];
+    const { before, after } = useStringProp(props);
+    const isH5 = usePlatform() === 'h5';
+    const inputId = useMemo(() => getUuid(), []);
+    const [hover, setHover] = useState(false);
+    /** 兼容从 Form 获取属性，必须引入，自动挂载组件方法 */
+    const [innerHandle, setInnerHandle] = useState({});
+    const formValue = useMemo(() => { var _a; return (_a = convertMoment(props.value)) === null || _a === void 0 ? void 0 : _a.valueOf(); }, [props.value]); // 数字类型
+    const traitProps = {
+        ...props,
+        value: formValue,
+        setInnerHandle,
+        inputRef: ref,
+    };
+    const trait = useFormInputTrait(traitProps);
+    const { value, onChange, disabled, readOnly, visible, required } = trait;
+    const format = useDateFormat(props);
+    const readValue = useMemo(() => { var _a; return (_a = convertMoment(value)) === null || _a === void 0 ? void 0 : _a.format(format); }, [value, format]);
+    useImperativeHandle(ref, () => ({
+        ...innerHandle,
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        before,
+        after,
+    }), [
+        innerHandle,
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        before,
+        after,
+    ]);
+    const pureChange = (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 });
+    };
+    const onMouseEnter = () => setHover(true);
+    const onMouseLeave = () => setHover(false);
+    const onClear = () => pureChange(null);
+    const hasClearIcon = clearable && !disabled && value && (hover || isH5);
+    const formItemProps = {
+        ...props,
+        ...trait,
+        classRoot,
+        inputId,
+        readValue,
+    };
+    const inputGroupProps = { ...props, classRoot };
+    const inputWrapProps = {
+        ...props,
+        classRoot,
+        hasClearIcon,
+        onClear,
+        onMouseEnter,
+        onMouseLeave,
+    };
+    const dateProps = {
+        ...props,
+        start,
+        end,
+        value,
+        disabled,
+        inputId,
+        onChange: pureChange,
+    };
+    if (!visible)
+        return null;
+    return (_jsx(WdFormItem, { ...formItemProps, children: _jsx(WdInputGroup, { ...inputGroupProps, children: _jsx(WdInputWrap, { ...inputWrapProps, children: isH5 ? _jsx(DateH5, { ...dateProps }) : _jsx(DatePc, { ...dateProps }) }) }) }));
+});

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function DepartmentPickerH5({ isShow, close }: {
+    isShow?: boolean;
+    close: any;
+}): JSX.Element;

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

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Portal } from '../common/portal';
+import { useConfig } from '../../utils/config-context';
+import { WdIcon, WdInputWrap } from '../index';
+import { WdRadio } from '../wd-radio';
+import StatusContent from '../statusContent';
+const mockOptionData = [
+    { label: '部门/人员1', key: 0 },
+    { label: '部门/人员2', key: 1 },
+    { label: '部门/人员3', key: 2 },
+    { label: '部门/人员4', key: 3 },
+    { label: '部门/人员5', key: 4 },
+    { label: '部门/人员6', key: 5 },
+    { label: '部门/人员7', key: 6 },
+    { label: '部门/人员8', key: 7 },
+    { label: '部门/人员9', key: 8 },
+    { label: '部门/人员10', key: 9 },
+    { label: '部门/人员11', key: 10 },
+    { label: '部门/人员12', key: 11 },
+    { label: '部门/人员13', key: 12 },
+    { label: '部门/人员14', key: 13 },
+    { label: '部门/人员15', key: 14 },
+    { label: '部门/人员16', key: 15 },
+    { label: '部门/人员17', key: 16 },
+    { label: '部门/人员18', key: 17 },
+    { label: '部门/人员19', key: 18 },
+    { label: '部门/人员20', key: 19 },
+];
+const type = 'radio'; // 部门单选radio 部门多选 checkbox 搜索 search 已选中弹框 checked
+// const clickIndex = 1;
+export function DepartmentPickerH5({ isShow = true, close }) {
+    // 选中的人
+    const [checked, setChecked] = useState(false);
+    const [selectIndex, setSelectIndex] = useState(0);
+    const { classPrefix } = useConfig();
+    return isShow ? (_jsx(Portal, { type: "div", children: _jsxs("div", { className: `${classPrefix}-custom-picker ${classPrefix}-department-picker`, children: [_jsx("div", { className: `${classPrefix}-custom-backdrop`, onClick: () => {
+                        close();
+                    } }), [type].includes('checked') && (_jsxs("div", { className: `${classPrefix}-custom-picker__inner`, children: [_jsxs("div", { className: `${classPrefix}-custom-picker__header`, children: [_jsx("div", { className: `${classPrefix}-custom-picker__header-cancle`, children: "\u53D6\u6D88" }), _jsx("div", { className: `${classPrefix}-custom-picker__header-title`, children: "\u9009\u62E9\u4EBA\u5458" }), _jsx("div", { className: `${classPrefix}-custom-picker__header-confirm is-disable`, children: "\u786E\u8BA4" })] }), _jsx("div", { className: `${classPrefix}-custom-picker__body`, children: _jsx("div", { className: `${classPrefix}-custom-picker__columns ${classPrefix}-custom-picker__columns--select`, style: {
+                                    height: 'auto',
+                                }, children: _jsx("ul", { className: `${classPrefix}-custom-picker__column`, style: {
+                                        height: '290px',
+                                    }, children: mockOptionData.map((item, index) => {
+                                        return (_jsxs("li", { className: `${classPrefix}-custom-picker__column-item ${classPrefix}-custom-picker__column-item--results `, onClick: () => {
+                                                setSelectIndex(item === null || item === void 0 ? void 0 : item.key);
+                                                setChecked(true);
+                                            }, children: [_jsx("div", { className: `${classPrefix}-custom-picker__column-item-text`, children: item.label }), _jsx(WdIcon, { name: "td:close-circle-filled", size: "sm" })] }, index));
+                                    }) }) }) })] })), ![type].includes('checked') && (_jsxs("div", { className: `${classPrefix}-custom-picker__inner is-full is-no-border`, children: [_jsxs("div", { className: `${classPrefix}-custom-picker__header`, children: [_jsx("div", { className: `${classPrefix}-custom-picker__header-cancle`, children: "\u53D6\u6D88" }), _jsx("div", { className: `${classPrefix}-custom-picker__header-title`, children: "\u9009\u62E9\u4EBA\u5458" }), _jsx("div", { className: `${classPrefix}-custom-picker__header-confirm`, children: "\u786E\u8BA4" })] }), _jsxs("div", { className: `${classPrefix}-custom-picker__body`, children: [_jsx("div", { className: `${classPrefix}-custom-search `, children: _jsx(WdInputWrap, { className: `${classPrefix}-custom-search-input ${classPrefix}-member__control-search is-borderless size-height-lg size-width-hundred`, before: _jsx(WdIcon, { name: "td:search", size: "sm" }), children: _jsx("input", { type: "text", placeholder: "\u641C\u7D22\u6210\u5458" }) }) }), _jsx("div", { className: `${classPrefix}-custom-line ` }), [type].includes('search') ? (_jsx("div", { className: `${classPrefix}-custom-picker__columns ${classPrefix}-custom-picker__columns--select`, style: {
+                                        height: 'auto',
+                                    }, children: _jsx("ul", { className: `${classPrefix}-custom-picker__column`, style: {
+                                            height: checked
+                                                ? 'calc(100vh - 190px)'
+                                                : 'calc(100vh - 135px)',
+                                        }, children: mockOptionData.length === 0 ? (_jsx(StatusContent, { emptyText: '暂无部门', component: "table", icon: "noDepartment" })) : (_jsx(_Fragment, { children: mockOptionData.map((item, index) => {
+                                                return (_jsxs("li", { className: `${classPrefix}-custom-picker__column-item ${classPrefix}-custom-picker__column-item--results `, onClick: () => {
+                                                        setSelectIndex(item === null || item === void 0 ? void 0 : item.key);
+                                                        setChecked(true);
+                                                    }, children: [_jsx(WdRadio, { ...{}, labelVisible: true, value: "1", layout: 'horizontal', option: {
+                                                                value: '1',
+                                                            }, name: "demo", size: 'lg', getChangeHandler: () => { } }), _jsxs("div", { className: `${classPrefix}-custom-picker__column-item-text`, children: [_jsxs("div", { className: `${classPrefix}-custom-picker__column-item-text-title`, children: [_jsx("span", { className: `${classPrefix}-custom-picker__column-item-text-title-results`, children: item.label }), item.label] }), _jsx("div", { className: `${classPrefix}-custom-picker__column-item-text-subtitle`, children: item.label })] })] }, index));
+                                            }) })) }) })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${classPrefix}-custom-picker__department-box`, children: [_jsx("span", { className: `${classPrefix}-custom-picker__department-item`, children: "\u5168\u90E8\u90E8\u95E8" }), _jsx("span", { className: `${classPrefix}-custom-picker__department-item`, children: _jsx(WdIcon, { name: "td:chevron-right", size: "xs" }) }), _jsx("span", { className: `${classPrefix}-custom-picker__department-item `, children: "\u90E8\u95E82" }), _jsx("span", { className: `${classPrefix}-custom-picker__department-item ${classPrefix}-custom-picker__department-select`, children: _jsx(WdIcon, { name: "td:chevron-right", size: "xs" }) }), _jsx("span", { className: `${classPrefix}-custom-picker__department-item ${classPrefix}-custom-picker__department-select`, children: "\u90E8\u95E84" })] }), [type].includes('radio') && (_jsx("div", { className: `${classPrefix}-custom-picker__columns ${classPrefix}-custom-picker__columns--select`, style: {
+                                                height: 'auto',
+                                            }, children: _jsx("ul", { className: `${classPrefix}-custom-picker__column`, style: {
+                                                    height: checked
+                                                        ? 'calc(100vh - 245px)'
+                                                        : 'calc(100vh - 190px)',
+                                                }, children: mockOptionData.map((item, index) => {
+                                                    return (_jsxs("li", { className: `${classPrefix}-custom-picker__column-item ${classPrefix}-custom-picker__column-item--department `, onClick: () => {
+                                                            setSelectIndex(item === null || item === void 0 ? void 0 : item.key);
+                                                            setChecked(true);
+                                                        }, children: [_jsx(WdRadio, { ...{}, labelVisible: true, value: "1", layout: 'horizontal', option: {
+                                                                    value: '1',
+                                                                }, name: "demo", size: 'lg', getChangeHandler: () => { } }), _jsx("div", { className: `${classPrefix}-custom-picker__column-item-text`, children: item.label }), _jsx(WdIcon, { name: "td:chevron-right", size: "sm" })] }, index));
+                                                }) }) })), [type].includes('checkbox') && (_jsx("div", { className: `${classPrefix}-custom-picker__columns ${classPrefix}-custom-picker__columns--select`, style: {
+                                                height: 'auto',
+                                            }, children: _jsx("ul", { className: `${classPrefix}-custom-picker__column`, style: {
+                                                    height: checked
+                                                        ? 'calc(100vh - 245px)'
+                                                        : 'calc(100vh - 190px)',
+                                                }, children: mockOptionData.map((item, index) => {
+                                                    return (_jsxs("li", { className: `${classPrefix}-custom-picker__column-item ${classPrefix}-custom-picker__column-item-multiple ${(item === null || item === void 0 ? void 0 : item.key) === selectIndex ? 'is-selected' : ''} `, onClick: () => {
+                                                            setSelectIndex(item === null || item === void 0 ? void 0 : item.key);
+                                                            setChecked(true);
+                                                        }, children: [_jsx("div", { className: `${classPrefix}-custom-picker__column-item-text-multiple`, children: item.label }), _jsx(WdIcon, { name: "td:chevron-right", size: "sm" })] }, index));
+                                                }) }) }))] })), checked && (_jsxs("div", { className: `${classPrefix}-custom-picker__checked-box`, children: [_jsx("div", { className: `${classPrefix}-custom-picker__checked-label`, children: "\u5DF2\u9009\u62E9" }), _jsx("div", { className: `${classPrefix}-custom-picker__checked-tag`, children: _jsxs("div", { className: `${classPrefix}-form-select__tag-group `, children: [_jsx("div", { className: `${classPrefix}-form-select__tag-item `, children: _jsx("span", { className: `${classPrefix}-form-select__tag-text `, children: "\u90E8\u95E81.1" }) }), _jsx("div", { className: `${classPrefix}-form-select__tag-item `, children: _jsx("span", { className: `${classPrefix}-form-select__tag-text `, children: "\u90E8\u95E81.2" }) }), _jsx("div", { className: `${classPrefix}-form-select__tag-item `, children: _jsx("span", { className: `${classPrefix}-form-select__tag-text `, children: "\u90E8\u95E81.3" }) }), _jsx("div", { className: `${classPrefix}-form-select__tag-item `, children: _jsx("span", { className: `${classPrefix}-form-select__tag-text `, children: "+4" }) })] }) }), _jsx("div", { className: `${classPrefix}-custom-picker__checked-count`, children: "\u51715\u4E2A" }), _jsx(WdIcon, { name: "td:chevron-right", size: "sm" })] }))] })] }))] }) })) : null;
+}

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

@@ -0,0 +1,3 @@
+import { WdDepartmentSelect } from './wd-department-select';
+export { WdDepartmentSelect, type WdDepartmentSelectProps, } from './wd-department-select';
+export default WdDepartmentSelect;

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

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { CommonPropsType } from '../../types';
+export declare const WdDepartmentSelect: () => JSX.Element;
+export interface WdDepartmentSelectProps extends CommonPropsType {
+    defaultValue?: string;
+    size?: string;
+    layout?: string;
+}

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

@@ -0,0 +1,67 @@
+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, WdButton } from '../index';
+import { WdFormItem } from '../wd-form-item';
+import { Modal, ConfigProvider } from 'tea-component';
+// import StatusContent from '../statusContent';
+import { usePlatform } from '../../utils/platform';
+import { DepartmentPickerH5 } from './h5';
+const mockDepartmentList = [
+    {
+        name: '测试部门1',
+        close: true,
+    },
+    {
+        name: '测试部门2',
+        close: true,
+    },
+    {
+        name: '测试部门3',
+        close: true,
+    },
+    {
+        name: '测试部门4',
+        close: false,
+    },
+    {
+        name: '测试部门5',
+        close: false,
+    },
+    {
+        name: '测试部门6',
+        close: false,
+    },
+];
+const FormItemMockData = {
+    classRoot: 'department',
+    labelVisible: true,
+    label: '部门',
+    testId: 'form-upload-file',
+    borderedPc: true,
+    layout: 'horizontal',
+    // layout: 'vertical',
+};
+export const WdDepartmentSelect = () => {
+    const { classPrefix } = useConfig();
+    const [isShowDialog, setIsShowDialog] = React.useState(false);
+    const [isShowH5Dialog, setIsShowH5Dialog] = React.useState(false);
+    const compClassName = `${classPrefix}-department-input-wrap `;
+    const platform = usePlatform();
+    const isH5 = platform === 'h5'; // 响应式判定
+    // 类名
+    const classList = [compClassName];
+    return (_jsx(_Fragment, { children: _jsxs(WdFormItem, { ...FormItemMockData, children: [_jsx(WdInputWrap, { className: classNames(...classList), 
+                    // 移入改变after图标为【清空】icon即可<WdIcon name="td:close-circle-filled" />
+                    after: _jsx(WdIcon, { name: "td:fork" }), onClick: () => {
+                        setIsShowDialog(true);
+                        isH5 ? setIsShowH5Dialog(true) : setIsShowDialog(true);
+                    }, children: _jsxs("div", { className: `${classPrefix}-department__tag-group size-md`, children: [_jsxs("div", { className: `${classPrefix}-department__tag-item `, children: [_jsx("span", { className: `${classPrefix}-department__tag-text `, children: "\u6D4B\u8BD51" }), _jsx(WdIcon, { name: "td:close", onClick: (e) => {
+                                            e.stopPropagation();
+                                        } })] }), _jsxs("div", { className: `${classPrefix}-department__tag-item `, children: [_jsx("span", { className: `${classPrefix}-department__tag-text `, children: "\u6D4B\u8BD51" }), _jsx(WdIcon, { name: "td:close" })] }), _jsxs("div", { className: `${classPrefix}-department__tag-item `, children: [_jsx("span", { className: `${classPrefix}-department__tag-text `, children: "\u6D4B\u8BD51" }), _jsx(WdIcon, { name: "td:close" })] }), _jsx("div", { className: `${classPrefix}-department__tag-item `, children: _jsx("span", { className: `${classPrefix}-department__tag-text `, children: "+4" }) })] }) }), _jsx(ConfigProvider, { classPrefix: "wedatea2td", children: _jsxs(Modal, { className: `${classPrefix}-department-dialog `, visible: isShowDialog, caption: "\u9009\u62E9\u90E8\u95E8", onClose: () => {
+                            setIsShowDialog(false);
+                        }, children: [_jsx(Modal.Body, { children: _jsxs("div", { className: `${classPrefix}-department__control `, children: [_jsxs("div", { className: `${classPrefix}-department__control-select `, children: [_jsx(WdInputWrap, { className: `${classPrefix}-department__control-search is-borderless size-width-hundred`, after: _jsx(WdIcon, { name: "td:search" }), children: _jsx("input", { type: "text", placeholder: "\u641C\u7D22\u90E8\u95E8" }) }), _jsx("div", { className: `${classPrefix}-department__control-select-control` })] }), _jsx("div", { className: `${classPrefix}-department__control-selected `, children: _jsx("div", { className: `${classPrefix}-department__tag-group`, children: mockDepartmentList.length == 0 ? (_jsx(_Fragment, { children: '暂无人员' })) : (mockDepartmentList === null || mockDepartmentList === void 0 ? void 0 : mockDepartmentList.map((item, index) => (_jsx(_Fragment, { children: _jsxs("div", { className: `${classPrefix}-department__tag-item `, children: [_jsx("span", { className: `${classPrefix}-department__tag-text `, children: item.name }), _jsx(WdIcon, { name: "td:close" })] }, index) })))) }) })] }) }), _jsxs(Modal.Footer, { children: [_jsx(WdButton, { text: "\u53D6\u6D88", size: "md", theme: "secondary" }), _jsx(WdButton, { text: "\u786E\u5B9A", size: "md", theme: "primary" })] })] }) }), _jsx(DepartmentPickerH5, { isShow: isShowH5Dialog, close: () => {
+                        setIsShowH5Dialog(false);
+                    } })] }) }));
+};

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

@@ -0,0 +1,3 @@
+import { WdDivider } from './wd-divider';
+export { WdDivider, type WdDividerProps } from './wd-divider';
+export default WdDivider;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { CommonPropsType } from '../../types';
+import type { DataType } from '../../../configs/components/wd-divider';
+import type { Except } from 'type-fest';
+export declare const WdDivider: React.ForwardRefExoticComponent<WdDividerProps & React.RefAttributes<unknown>>;
+export interface WdDividerProps extends CommonPropsType, Except<DataType, 'type'> {
+    type: DataType['type'];
+}