@cloudbase/weda-ui 3.9.8 → 3.10.1

package/dist/web/components/wd-input-phone/wd-input-phone.d.ts

@@ -4,50 +4,28 @@ import type { DataType, EventsType } from '../../../configs/components/wd-input'
 /**
  * 标准化：电话输入组件
  */
-export declare const WdInputPhone: React.ForwardRefExoticComponent<CommonPropsType & import("type-fest").Simplify<import("../../../configs/type-utils").StaticEventsType<[{
-    name: string;
-    title: string;
-    detail: import("@sinclair/typebox").TObject<{
-        value: import("@sinclair/typebox").TString;
-    }>;
-    description: string;
-}, {
-    name: string;
-    title: string;
-    detail: import("@sinclair/typebox").TObject<{
-        value: import("@sinclair/typebox").TString;
-    }>;
-}, {
-    name: string;
-    title: string;
-    detail: import("@sinclair/typebox").TObject<{
-        value: import("@sinclair/typebox").TString;
-    }>;
-}, {
-    name: string;
-    title: string;
-    detail: import("@sinclair/typebox").TObject<{
-        value: import("@sinclair/typebox").TString;
-    }>;
-}, {
-    name: string;
-    title: string;
-    detail: import("@sinclair/typebox").TObject<{
-        originValue: import("@sinclair/typebox").TString;
-    }>;
-}, {
-    name: string;
-    title: string;
-    description: string;
-    detail: import("@sinclair/typebox").TObject<{
-        type: import("@sinclair/typebox").TString;
-    }>;
-}]>> & import("type-fest").Simplify<{
+export declare const WdInputPhone: React.ForwardRefExoticComponent<CommonPropsType & {
+    events: {
+        [x: string]: ((eventDetail: {
+            value: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            value: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            value: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            value: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            originValue: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            type: string;
+        }, ...args: unknown[]) => unknown);
+    };
+} & {
     type?: string;
+    name?: string;
     label?: string;
     template?: string;
     focus?: boolean;
-    name?: string;
     required?: boolean;
     extra?: string;
     size?: string;
@@ -79,11 +57,11 @@ export declare const WdInputPhone: React.ForwardRefExoticComponent<CommonPropsTy
     borderedPc?: boolean;
     rules?: {
         format: string;
-        pattern: string;
         message: string;
+        pattern: string;
     }[];
     requiredFlag?: boolean;
     requiredMsg?: string;
     isConvert?: boolean;
-}> & React.RefAttributes<any>>;
+} & React.RefAttributes<any>>;
 export type WdInputPhoneProps = CommonPropsType & EventsType & DataType;

package/dist/web/components/wd-input-url/wd-input-url.d.ts

@@ -4,49 +4,27 @@ import type { DataType, EventsType } from '../../../configs/components/wd-input-
 /**
  * 标准化：URL输入组件
  */
-export declare const WdInputUrl: React.ForwardRefExoticComponent<CommonPropsType & import("type-fest").Simplify<import("../../../configs/type-utils").StaticEventsType<[{
-    name: string;
-    title: string;
-    detail: import("@sinclair/typebox").TObject<{
-        value: import("@sinclair/typebox").TString;
-    }>;
-    description: string;
-}, {
-    name: string;
-    title: string;
-    detail: import("@sinclair/typebox").TObject<{
-        value: import("@sinclair/typebox").TString;
-    }>;
-}, {
-    name: string;
-    title: string;
-    detail: import("@sinclair/typebox").TObject<{
-        value: import("@sinclair/typebox").TString;
-    }>;
-}, {
-    name: string;
-    title: string;
-    detail: import("@sinclair/typebox").TObject<{
-        value: import("@sinclair/typebox").TString;
-    }>;
-}, {
-    name: string;
-    title: string;
-    detail: import("@sinclair/typebox").TObject<{
-        originValue: import("@sinclair/typebox").TString;
-    }>;
-}, {
-    name: string;
-    title: string;
-    description: string;
-    detail: import("@sinclair/typebox").TObject<{
-        type: import("@sinclair/typebox").TString;
-    }>;
-}]>> & import("type-fest").Simplify<{
+export declare const WdInputUrl: React.ForwardRefExoticComponent<CommonPropsType & {
+    events: {
+        [x: string]: ((eventDetail: {
+            value: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            value: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            value: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            value: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            originValue: string;
+        }, ...args: unknown[]) => unknown) | ((eventDetail: {
+            type: string;
+        }, ...args: unknown[]) => unknown);
+    };
+} & {
+    name?: string;
     label?: string;
     template?: string;
     focus?: boolean;
-    name?: string;
     required?: boolean;
     extra?: string;
     size?: string;
@@ -77,5 +55,5 @@ export declare const WdInputUrl: React.ForwardRefExoticComponent<CommonPropsType
     requiredFlag?: boolean;
     requiredMsg?: string;
     isConvert?: boolean;
-}> & React.RefAttributes<any>>;
+} & React.RefAttributes<any>>;
 export type WdInputUrlProps = CommonPropsType & EventsType & DataType;

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

@@ -3,4 +3,4 @@ import type { DataType } from '../../../configs/components/wd-layout';
 import './style';
 export interface WdLayoutProps extends CommonPropsType, DataType {
 }
-export declare const WdLayout: ({ headerLeftSlot, headerRightSlot, contentSlot, style, template, className, }: WdLayoutProps) => JSX.Element;
+export declare const WdLayout: ({ headerLeftSlot, headerRightSlot, contentSlot, style, template, className, enableHeaderSlot, enableContentSlot, }: WdLayoutProps) => JSX.Element;

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

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useConfig } from '../../utils/config-context';
 import { usePlatform } from '../../utils/platform';
 import './style';
-export const WdLayout = ({ headerLeftSlot, headerRightSlot, contentSlot, style, template = 'white', className, }) => {
+export const WdLayout = ({ headerLeftSlot, headerRightSlot, contentSlot, style, template = 'white', className, enableHeaderSlot = true, enableContentSlot = true, }) => {
     // 样式
     const { classPrefix } = useConfig();
     const platform = usePlatform();
     const isH5 = platform === 'h5';
-    return (_jsxs("div", { className: `${isH5 ? `${classPrefix}-h5-layout-root` : `${classPrefix}-pc-layout-root`} ${classPrefix}-layout-root ${className} ${template}`, "data-testid": "wd-layout-test", style: style, children: [_jsxs("div", { className: `${classPrefix}-layout__header ${template}`, "data-testid": "wd-layout-header-test", children: [_jsx("div", { className: `${classPrefix}-layout__header-item ${classPrefix}-layout__header-item-left`, "data-testid": "wd-layout-header-left-test", children: headerLeftSlot }), _jsx("div", { className: `${classPrefix}-layout__header-item ${classPrefix}-layout__header-item-right`, "data-testid": "wd-layout-header-right-test", children: headerRightSlot })] }), _jsx("div", { className: `${classPrefix}-layout__body ${template}`, "data-testid": "wd-layout-body-test", children: contentSlot })] }));
+    return (_jsxs("div", { className: `${isH5 ? `${classPrefix}-h5-layout-root` : `${classPrefix}-pc-layout-root`} ${classPrefix}-layout-root ${className} ${template}`, "data-testid": "wd-layout-test", style: style, children: [enableHeaderSlot && (_jsxs("div", { className: `${classPrefix}-layout__header ${template}`, "data-testid": "wd-layout-header-test", children: [_jsx("div", { className: `${classPrefix}-layout__header-item ${classPrefix}-layout__header-item-left`, "data-testid": "wd-layout-header-left-test", children: headerLeftSlot }), _jsx("div", { className: `${classPrefix}-layout__header-item ${classPrefix}-layout__header-item-right`, "data-testid": "wd-layout-header-right-test", children: headerRightSlot })] })), enableContentSlot && (_jsx("div", { className: `${classPrefix}-layout__body ${template}`, "data-testid": "wd-layout-body-test", children: contentSlot }))] }));
 };

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

@@ -114,5 +114,5 @@ export const WdMarkdown = forwardRef(function WdMarkdown({ value = '', options,
             updateMarkdownInstance: ({ markdownInstance }) => setMdInstance(markdownInstance),
         };
     }, [value, mdInstance], ref);
-    return (_jsx("div", { ref: markdownRef, className: cls, style: style, id: id, children: mdInstance && (_jsx("div", { dangerouslySetInnerHTML: { __html: displayValue } })) }));
+    return (_jsx("div", { ref: markdownRef, className: cls, style: style, id: id, children: displayValue && (_jsx("div", { dangerouslySetInnerHTML: { __html: displayValue } })) }));
 });

package/dist/web/components/wd-menu-layout/components/PlantMenu.js

@@ -5,5 +5,5 @@ import { slotDiv } from '../utils';
 import { WdMenuList } from '../../index';
 export const PlantMenu = forwardRef(function PlantMenu(props, ref) {
     const { classPrefix } = useConfig();
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${classPrefix}-menulayout-header ${classPrefix}-menulayout-header--plant`, children: [_jsx("div", { className: `${classPrefix}-menulayout-header__logo-wrap is-not-content`, children: slotDiv(props.headSlot) }), _jsx("div", { className: `${classPrefix}-menulayout-header__right-wrap is-not-content`, children: slotDiv(props.headRightSlot, { justifyContent: 'flex-end' }) })] }), _jsxs("div", { className: `${classPrefix}-menulayout-body ${classPrefix}-menulayout-body--plant`, children: [_jsxs("div", { className: `${classPrefix}-menulayout-body__left`, children: [_jsx("div", { className: `${classPrefix}-menulayout-body__left-menu ${classPrefix}-menulayout__menu`, children: _jsx(WdMenuList, { ...props, className: "", id: "", style: {}, ref: ref }) }), _jsx("div", { className: `${classPrefix}-menulayout-body__left-slot is-not-content ${classPrefix}-menulayout-body__footer`, children: slotDiv(props.footerSlot) })] }), _jsx("div", { className: `${classPrefix}-menulayout-body__content ${classPrefix}-menulayout__body`, children: props.contentSlot })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `${classPrefix}-menulayout-header ${classPrefix}-menulayout-header--plant`, children: [_jsx("div", { className: `${classPrefix}-menulayout-header__logo-wrap`, children: slotDiv(props.headSlot) }), _jsx("div", { className: `${classPrefix}-menulayout-header__right-wrap `, children: slotDiv(props.headRightSlot, { justifyContent: 'flex-end' }) })] }), _jsxs("div", { className: `${classPrefix}-menulayout-body ${classPrefix}-menulayout-body--plant`, children: [_jsxs("div", { className: `${classPrefix}-menulayout-body__left`, children: [_jsx("div", { className: `${classPrefix}-menulayout-body__left-menu ${classPrefix}-menulayout__menu`, children: _jsx(WdMenuList, { ...props, className: "", id: "", style: {}, ref: ref }) }), _jsx("div", { className: `${classPrefix}-menulayout-body__left-slot is-not-content ${classPrefix}-menulayout-body__footer`, children: slotDiv(props.footerSlot) })] }), _jsx("div", { className: `${classPrefix}-menulayout-body__content ${classPrefix}-menulayout__body`, children: props.contentSlot })] })] }));
 });

package/dist/web/components/wd-menu-list/CommonMenuList.js

@@ -30,6 +30,8 @@ export const CommonMenuList = forwardRef(function CommonMenuList(props, ref) {
         if (key || !item) {
             selectItem = findSelectItem(menuData || [], key);
         }
+        if (!selectItem)
+            return;
         if ((selectItem === null || selectItem === void 0 ? void 0 : selectItem.key) && selected === (selectItem === null || selectItem === void 0 ? void 0 : selectItem.key))
             return;
         setSelected(selectItem === null || selectItem === void 0 ? void 0 : selectItem.key);
@@ -43,7 +45,11 @@ export const CommonMenuList = forwardRef(function CommonMenuList(props, ref) {
     }, [setSelectedInfo]);
     useEffect(() => {
         setSelectedInfo();
-    }, [setSelectedInfo]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [menuData]);
+    useEffect(() => {
+        props.selectedMenuKey && setSelected(props.selectedMenuKey);
+    }, [props.selectedMenuKey]);
     // 默认展开状态变化后删掉之前的状态缓存
     useEffect(() => {
         const status = JSON.parse(JSON.stringify(openStatus));

package/dist/web/components/wd-menu-list/HorizontalMenuList.js

@@ -32,6 +32,8 @@ export const HorizontalMenuList = forwardRef(function HorizontalMenuList(props,
         if (key || !item) {
             selectItem = findSelectItem(menuData || [], key);
         }
+        if (!selectItem)
+            return;
         if ((selectItem === null || selectItem === void 0 ? void 0 : selectItem.key) && selected === (selectItem === null || selectItem === void 0 ? void 0 : selectItem.key))
             return;
         setSelected(selectItem === null || selectItem === void 0 ? void 0 : selectItem.key);
@@ -72,7 +74,11 @@ export const HorizontalMenuList = forwardRef(function HorizontalMenuList(props,
     }, [platform, navWrapRef, getMenuOffset]);
     useEffect(() => {
         setSelectedInfo();
-    }, [setSelectedInfo]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [menuData]);
+    useEffect(() => {
+        props.selectedMenuKey && setSelected(props.selectedMenuKey);
+    }, [props.selectedMenuKey]);
     const getIconShow = (item, selectedKey) => {
         var _a;
         if (!item.iconUrl && !item.selectedIconPath && !item.iconPath)

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

@@ -0,0 +1,7 @@
+export declare const RelationalSetting: ({ refresh, setting, size: _size, enableRelationalSetting, enableRelationalRefresh, }: {
+    refresh: any;
+    setting: any;
+    size: any;
+    enableRelationalSetting: any;
+    enableRelationalRefresh: any;
+}) => JSX.Element;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import WdIcon from '../wd-icon';
+import { useConfig } from '../../utils/config-context';
+import { useSize } from '../../utils/hooks/useFormLegacy';
+import classNames from '../../utils/classnames';
+export const RelationalSetting = ({ refresh, setting, size: _size, enableRelationalSetting, enableRelationalRefresh, }) => {
+    const { classPrefix } = useConfig();
+    const size = useSize({ size: _size });
+    const cls = classNames(`${classPrefix}-form-select-relational-setting--group`, `${classPrefix}-form-input-group`, `${classPrefix}-event-tap`, `size-height-${size}`);
+    return (_jsxs("div", { className: `${classPrefix}-form-select-relational-setting--wrap`, children: [enableRelationalRefresh && (_jsx("div", { className: cls, children: _jsx(WdIcon, { events: {
+                        tap: refresh,
+                    }, size: 'xs', name: 'td:refresh', type: 'inner' }) })), enableRelationalSetting && (_jsx("div", { className: cls, children: _jsx(WdIcon, { events: {
+                        tap: setting,
+                    }, size: 'xs', name: 'td:setting', type: 'inner' }) }))] }));
+};

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

@@ -58,6 +58,49 @@
   color: var(--wd-color-text-placeholder) !important;
 }
 
+.wd-form--vertical-left
+  .wd-h5-select-root
+  .wd-form-select-relational-setting--wrap {
+  top: 16px;
+}
+.wd-form-select-relational-setting--wrap {
+  display: flex;
+}
+.wd-form.wd-pc-form
+  .wd-form-input-group.wd-form-select-relational-setting--group,
+.wd-form-input-group.wd-form-select-relational-setting--group {
+  width: auto;
+}
+.wd-form-select-relational-setting--group {
+  padding: 0 5px;
+  display: flex;
+  cursor: pointer;
+  margin-left: 2px;
+}
+.wd-form-select-relational-setting--group .wd-link {
+  display: flex;
+}
+.wd-select-select
+  .wd-form-input-wrap__content
+  > .weda-ui-custom-picker__status {
+  padding-left: 5px;
+}
+
+.wd-add-relation-button-wrap {
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+  color: var(--wd-color-brand, #0052d9);
+  cursor: pointer;
+}
+.wd-add-relation-button-wrap .wd-icon {
+  margin-right: 5px;
+}
+.wd-tag-root {
+  cursor: pointer;
+}
+
 .wd-pc-select-root .wd-form-item-wrap__control {
   overflow: hidden;
 }

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { CommonPropsType } from '../../types';
 import type { DataType } from '../../../configs/components/wd-select';
+import { AttachContainer } from 'tea-component/lib/_util/get-overlay-root';
 import './style';
 /**
  * 下拉单选-标准化
@@ -12,4 +13,5 @@ export interface WdSelectProps extends CommonPropsType, DataType {
     primaryField?: string;
     viewId?: string;
     dataSourceName?: string;
+    popupContainer?: AttachContainer;
 }

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

@@ -1,9 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { forwardRef, useState, useCallback } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useState, useCallback, useRef } 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 { isFormatWithRelation } from '../form/select/formats-util';
 import { emptyObject } from '../../utils/constant';
 import { RecycleProvider } from '../../utils/hooks/useRecycle';
 import { useSelected } from '../../utils/hooks/use-selected';
@@ -11,17 +12,19 @@ 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 { RelationalSetting } from './relationalSetting';
 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, staticSearchable = X_RUNTIME_DEFAULT.staticSearchable, } = props;
+    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, staticSearchable = X_RUNTIME_DEFAULT.staticSearchable, enableRelationalSetting = X_RUNTIME_DEFAULT.enableRelationalSetting, enableRelationalRefresh = X_RUNTIME_DEFAULT.enableRelationalRefresh, addRelationButtonText = X_RUNTIME_DEFAULT.addRelationButtonText, enableAddRelationButton = X_RUNTIME_DEFAULT.enableAddRelationButton, popupContainer, } = props;
+    const childRef = useRef(null);
     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 { value, onChange, disabled, readOnly, visible, layout } = trait;
     const [suffixType, suffixIcon] = useFixedIcon({
         type: props.suffixType,
         icon: props.suffixIcon,
@@ -44,7 +47,20 @@ export const WdSelect = forwardRef(function WsSelect(props, ref) {
         disabled,
         value,
     });
-    const formItemProps = { ...props, ...trait, classRoot, readOnly: false };
+    const isRelation = isFormatWithRelation(format);
+    const LabelAdornment = isRelation && (_jsx(RelationalSetting, { size: props.size, refresh: () => {
+            var _a;
+            if (childRef.current) {
+                (_a = childRef.current) === null || _a === void 0 ? void 0 : _a.refresh();
+            }
+        }, setting: events === null || events === void 0 ? void 0 : events.onSettingButtonClick, enableRelationalSetting: !readOnly && !disabled && enableRelationalSetting, enableRelationalRefresh: !readOnly && !disabled && enableRelationalRefresh }));
+    const formItemProps = {
+        ...props,
+        ...trait,
+        classRoot,
+        readOnly: false,
+        LabelAdornment: layout === 'vertical' && LabelAdornment,
+    };
     const inputGroupProps = { ...props, classRoot, readOnly };
     const inputWrapProps = {
         ...props,
@@ -79,5 +95,8 @@ export const WdSelect = forwardRef(function WsSelect(props, ref) {
     }, [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, staticSearchable: staticSearchable, onChange: onChange, onSearchValueInput: onSearchValueInput }) }) }) }) }));
+    return (_jsx(WdFormItem, { ...formItemProps, children: _jsxs(_Fragment, { children: [_jsx(WdInputGroup, { ...inputGroupProps, children: _jsx(WdInputWrap, { ...inputWrapProps, children: _jsx(RecycleProvider, { readOnly: readOnly, recycleBack: setOptions, format: format, portalContainer: popupContainer, onRelationTagClick: (item) => {
+                                var _a;
+                                (_a = delayEvents === null || delayEvents === void 0 ? void 0 : delayEvents.onRelationTagClick) === null || _a === void 0 ? void 0 : _a.call(delayEvents, item);
+                            }, children: _jsx(Select, { addRelationButtonText: addRelationButtonText, enableAddRelationButton: enableAddRelationButton, childRef: childRef, 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, staticSearchable: staticSearchable, onChange: onChange, onSearchValueInput: onSearchValueInput, popupContainer: popupContainer }) }) }) }), layout === 'horizontal' && LabelAdornment] }) }));
 });

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

@@ -76,6 +76,10 @@
   color: var(--wd-color-text-placeholder) !important;
 }
 
+.wd-tag-root {
+  cursor: pointer;
+}
+
 .wd-pc-select-multiple-root .wd-form-item-wrap__control {
   overflow: hidden;
 }

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

@@ -2,6 +2,7 @@ import React from 'react';
 import type { CommonPropsType } from '../../types';
 import type { DataType } from '../../../configs/components/wd-select-multiple';
 import './style';
+import { AttachContainer } from 'tea-component/lib/_util/get-overlay-root';
 /**
  * 下拉多选-标准化
  */
@@ -12,4 +13,9 @@ export interface WdSelectMultipleProps extends CommonPropsType, DataType {
     primaryField?: string;
     viewId?: string;
     dataSourceName?: string;
+    enableRelationalSetting?: boolean;
+    enableRelationalRefresh?: boolean;
+    enableAddRelationButton?: boolean;
+    addRelationButtonText?: string;
+    popupContainer?: AttachContainer;
 }

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

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { forwardRef, useState, useCallback } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useState, useCallback, useRef } 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';
@@ -12,16 +12,19 @@ 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';
+import { isFormatWithRelation } from '../form/select/formats-util';
+import { RelationalSetting } from '../wd-select/relationalSetting';
 /**
  * 下拉多选-标准化
  */
 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, staticSearchable = X_RUNTIME_DEFAULT.staticSearchable, where = X_RUNTIME_DEFAULT.where, } = props;
+    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, staticSearchable = X_RUNTIME_DEFAULT.staticSearchable, where = X_RUNTIME_DEFAULT.where, enableRelationalSetting = X_RUNTIME_DEFAULT.enableRelationalSetting, enableRelationalRefresh = X_RUNTIME_DEFAULT.enableRelationalRefresh, addRelationButtonText = X_RUNTIME_DEFAULT.addRelationButtonText, enableAddRelationButton = X_RUNTIME_DEFAULT.enableAddRelationButton, popupContainer, } = props;
+    const childRef = useRef(null);
     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 { value, onChange, disabled, readOnly, visible, layout } = trait;
     const [suffixType, suffixIcon] = useFixedIcon({
         type: props.suffixType,
         icon: props.suffixIcon,
@@ -45,7 +48,20 @@ export const WdSelectMultiple = forwardRef(function WdSelectMultiple(props, ref)
         disabled,
         value,
     });
-    const formItemProps = { ...props, ...trait, classRoot, readOnly: false };
+    const isRelation = isFormatWithRelation(format);
+    const LabelAdornment = isRelation && (_jsx(RelationalSetting, { size: props.size, refresh: () => {
+            var _a;
+            if (childRef.current) {
+                (_a = childRef.current) === null || _a === void 0 ? void 0 : _a.refresh();
+            }
+        }, setting: events === null || events === void 0 ? void 0 : events.onSettingButtonClick, enableRelationalSetting: !readOnly && !disabled && enableRelationalSetting, enableRelationalRefresh: !readOnly && !disabled && enableRelationalRefresh }));
+    const formItemProps = {
+        ...props,
+        ...trait,
+        classRoot,
+        readOnly: false,
+        LabelAdornment: layout === 'vertical' && LabelAdornment,
+    };
     const inputGroupProps = { ...props, classRoot, readOnly };
     const inputWrapProps = {
         ...props,
@@ -74,5 +90,8 @@ export const WdSelectMultiple = forwardRef(function WdSelectMultiple(props, ref)
     }, [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, staticSearchable: staticSearchable, where: where, onChange: onChange, onSearchValueInput: onSearchValueInput }) }) }) }) }));
+    return (_jsx(WdFormItem, { ...formItemProps, children: _jsxs(_Fragment, { children: [_jsx(WdInputGroup, { ...inputGroupProps, children: _jsx(WdInputWrap, { ...inputWrapProps, children: _jsx(RecycleProvider, { readOnly: readOnly, recycleBack: setOptions, format: format, portalContainer: popupContainer, onRelationTagClick: (item) => {
+                                var _a;
+                                (_a = delayEvents === null || delayEvents === void 0 ? void 0 : delayEvents.onRelationTagClick) === null || _a === void 0 ? void 0 : _a.call(delayEvents, item);
+                            }, children: _jsx(SelectMultiple, { addRelationButtonText: addRelationButtonText, enableAddRelationButton: enableAddRelationButton, childRef: childRef, 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, staticSearchable: staticSearchable, where: where, onChange: onChange, onSearchValueInput: onSearchValueInput, popupContainer: popupContainer }) }) }) }), layout === 'horizontal' && LabelAdornment] }) }));
 });

package/dist/web/components/wd-table/components/FieldRender/Form/Enum.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Select, Icon } from 'tea-component';
 import { useEnumContext } from '../../../../../utils/hooks/context';
+import { errorHandler } from '../../../../../utils/error';
+import { WdTag } from '../../../../wd-tag';
 // 枚举输入组件
 export const EnumSelect = (props) => {
     const { field, onChange } = props;
@@ -35,15 +37,27 @@ export const formatEnum = (value, field, enumOptions) => {
         const optionName = field['x-option-name'];
         const isMulti = field['x-multi-select'];
         const options = (enumOptions === null || enumOptions === void 0 ? void 0 : enumOptions[optionName]) || [];
+        let val = '-';
         const getTextByValue = (value) => { var _a; return ((_a = options === null || options === void 0 ? void 0 : options.find((item) => (item === null || item === void 0 ? void 0 : item.value) === value)) === null || _a === void 0 ? void 0 : _a.text) || value; };
         if (isMulti) {
-            return (_a = []
+            val = (_a = []
                 .concat(value)
-                .map((v) => getTextByValue(v))) === null || _a === void 0 ? void 0 : _a.join();
+                .map((v) => getTextByValue(v))) === null || _a === void 0 ? void 0 : _a.join(',');
         }
-        return getTextByValue(value);
+        else {
+            val = getTextByValue(value);
+        }
+        return (_jsx(WdTag, { range: val === null || val === void 0 ? void 0 : val.split(',').map((i) => ({
+                label: i,
+                value: i,
+            })), tagStyleType: 'light', tagStyleWidthCols: 4 }));
+    }
+    catch (error) {
+        errorHandler({
+            code: 'FormatEnumError',
+            error,
+        });
     }
-    catch (e) { }
     return value;
 };
 // 枚举值展示组件

package/dist/web/components/wd-table/components/FieldRender/index.js

@@ -6,6 +6,7 @@ import { Modal, Table, Form, ConfigProvider } from 'tea-component';
 import { formatTimeByType } from '../../../../utils/date';
 import { safeJsonParse, isValueEmpty, isObj } from '../../../../utils/tool';
 import Location, { locationProperties } from './Form/Location';
+import { WdTag } from '../../../wd-tag';
 import { EnumView, formatEnum } from './Form/Enum';
 import { ErrorBoundary } from 'react-error-boundary';
 import RichTextView from '../../../richTextView';
@@ -16,6 +17,7 @@ import { TABLE_SLOT_PREFIX } from '../../../../utils/constant';
 import { getPrimaryField } from '../../../../utils/datasource';
 import { useConfig } from '../../../../utils/config-context';
 import { EnumHoc } from '../../../../utils/hooks/EnumHoc';
+import { errorHandler } from '../../../../utils/error';
 import { ImagePreview } from './ImagePreview';
 import { VideoPreview } from './VideoPreview';
 import { ModalTable } from '../ModalTable';
@@ -134,9 +136,20 @@ export function getFieldRender(field = {}, extra = {}) {
                 const primaryField = ((_b = (_a = field === null || field === void 0 ? void 0 : field.parentDatasource) === null || _a === void 0 ? void 0 : _a.schema) === null || _b === void 0 ? void 0 : _b['x-primary-column']) || '';
                 const relatedField = (_c = extra === null || extra === void 0 ? void 0 : extra.columnSet) === null || _c === void 0 ? void 0 : _c.relatedField;
                 if (typeof fieldValue === 'string') {
-                    return _jsx(TextWrap, { ...textProps, children: fieldValue });
+                    return (_jsx(WdTag, { range: fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.split(',').map((i) => ({
+                            label: i,
+                            value: i,
+                            prefixType: 'inner',
+                            prefixIcon: 'td:link-1',
+                        })), tagStyleType: 'light', tagStyleWidthCols: 4 }));
                 }
-                return (_jsx(TextWrap, { ...textProps, children: fieldValue[relatedField] || fieldValue[primaryField] || '-' }));
+                const val = fieldValue[relatedField] || fieldValue[primaryField];
+                return val ? (_jsx(WdTag, { range: val === null || val === void 0 ? void 0 : val.split(',').map((i) => ({
+                        label: i,
+                        value: i,
+                        prefixType: 'inner',
+                        prefixIcon: 'td:link-1',
+                    })), tagStyleType: 'light', tagStyleWidthCols: 4 })) : ('-');
             }
             else if (format === 'x-video' || format === 'x-music') {
                 // 视频/音频
@@ -180,7 +193,13 @@ export function getFieldRender(field = {}, extra = {}) {
                 format === 'one-one-r') {
                 const primaryField = ((_e = (_d = field === null || field === void 0 ? void 0 : field.parentDatasource) === null || _d === void 0 ? void 0 : _d.schema) === null || _e === void 0 ? void 0 : _e['x-primary-column']) || '';
                 const relatedField = (_f = extra === null || extra === void 0 ? void 0 : extra.columnSet) === null || _f === void 0 ? void 0 : _f.relatedField;
-                return (_jsx(TextWrap, { ...textProps, children: fieldValue[relatedField] || fieldValue[primaryField] }));
+                const _readValue = fieldValue[relatedField] || fieldValue[primaryField];
+                return (_jsx(WdTag, { range: _readValue === null || _readValue === void 0 ? void 0 : _readValue.split(',').map((i) => ({
+                        label: i,
+                        value: i,
+                        prefixType: 'inner',
+                        prefixIcon: 'td:link-1',
+                    })), tagStyleType: 'light', tagStyleWidthCols: 4 }));
             }
             else {
                 return (_jsx(QuoteModal, { className: "e-object-view-modal", caption: title, size: MODAL_SIZE, text: detailText, children: objectRender({
@@ -336,7 +355,12 @@ export const formatNumber = (value, field) => {
             newValue = formatNumberFix(value, field, true);
         }
     }
-    catch (e) { }
+    catch (error) {
+        errorHandler({
+            code: 'FormatNumberError',
+            error,
+        });
+    }
     return newValue;
 };
 /**
@@ -821,7 +845,12 @@ const getCustomField = (_field, columnSet) => {
         }
         return { ..._field, ...customField };
     }
-    catch (e) { }
+    catch (error) {
+        errorHandler({
+            code: 'GetCustomFieldError',
+            error,
+        });
+    }
     return _field;
 };
 /**