feat(select-input): udpate readonly

src/select-input/props.ts

@@ -82,7 +82,10 @@ export default {
     type: Function as PropType<TdSelectInputProps['prefixIcon']>,
   },
   /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */
-  readonly: Boolean,
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 */
   reserveKeyword: Boolean,
   /** 组件尺寸 */

src/select-input/select-input.en-US.md

@@ -12,7 +12,7 @@ autofocus | Boolean | false | \- | N
 borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
 collapsedItems | Slot / Function | - | Typescript：`TNode<{ value: SelectInputValue; collapsedSelectedItems: SelectInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-disabled | Boolean | - | \- | N
+disabled | Boolean | undefined | \- | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N
 inputValue | String / Number | - | input value。`v-model:inputValue` is supported。Typescript：`string` | N
 defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript：`string` | N
@@ -27,7 +27,7 @@ popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./po
 popupVisible | Boolean | - | `v-model:popupVisible` is supported | N
 defaultPopupVisible | Boolean | - | uncontrolled property | N
 prefixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-readonly | Boolean | false | \- | N
+readonly | Boolean | undefined | \- | N
 reserveKeyword | Boolean | false | \- | N
 size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 status | String | default | options: default/success/warning/error | N
@@ -63,4 +63,4 @@ mouseenter | `(context: { e: MouseEvent })` | trigger on mouseenter
 mouseleave | `(context: { e: MouseEvent })` | trigger on mouseleave
 paste | `(context: { e: ClipboardEvent; pasteValue: string })` | \-
 popup-visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。<br/>`import { PopupVisibleChangeContext } from '@Popup'`<br/>
-tag-change | `(value: TagInputValue, context: SelectInputChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。<br/>`type SelectInputChangeContext = TagInputChangeContext`<br/>
+tag-change | `(value: TagInputValue, context: SelectInputChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。<br/>`type SelectInputChangeContext = TagInputChangeContext`<br/>

src/select-input/select-input.md

@@ -12,7 +12,7 @@ autofocus | Boolean | false | 自动聚焦 | N
 borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否可清空 | N
 collapsedItems | Slot / Function | - | 标签过多的情况下，折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 `collapsedItems` 自定义。`value` 表示所有标签值，`collapsedSelectedItems` 表示折叠标签值，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: SelectInputValue; collapsedSelectedItems: SelectInputValue; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-disabled | Boolean | - | 是否禁用 | N
+disabled | Boolean | undefined | 是否禁用 | N
 inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts) | N
 inputValue | String / Number | - | 输入框的值。支持语法糖 `v-model:inputValue`。TS 类型：`string` | N
 defaultInputValue | String / Number | - | 输入框的值。非受控属性。TS 类型：`string` | N
@@ -27,7 +27,7 @@ popupProps | Object | - | 透传 Popup 浮层组件全部属性。TS 类型：`P
 popupVisible | Boolean | - | 是否显示下拉框。支持语法糖 `v-model:popupVisible` | N
 defaultPopupVisible | Boolean | - | 是否显示下拉框。非受控属性 | N
 prefixIcon | Slot / Function | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N
+readonly | Boolean | undefined | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N
 reserveKeyword | Boolean | false | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | N
 size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 status | String | default | 输入框状态。可选项：default/success/warning/error | N
@@ -63,4 +63,4 @@ mouseenter | `(context: { e: MouseEvent })` | 进入输入框时触发
 mouseleave | `(context: { e: MouseEvent })` | 离开输入框时触发
 paste | `(context: { e: ClipboardEvent; pasteValue: string })` | 粘贴事件，`pasteValue` 表示粘贴板的内容
 popup-visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | 下拉框显示或隐藏时触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。<br/>`import { PopupVisibleChangeContext } from '@Popup'`<br/>
-tag-change | `(value: TagInputValue, context: SelectInputChangeContext)` | 值变化时触发，参数 `context.trigger` 表示数据变化的触发来源；`context.index` 指当前变化项的下标；`context.item` 指当前变化项；`context.e` 表示事件参数。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。<br/>`type SelectInputChangeContext = TagInputChangeContext`<br/>
+tag-change | `(value: TagInputValue, context: SelectInputChangeContext)` | 值变化时触发，参数 `context.trigger` 表示数据变化的触发来源；`context.index` 指当前变化项的下标；`context.item` 指当前变化项；`context.e` 表示事件参数。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select-input/type.ts)。<br/>`type SelectInputChangeContext = TagInputChangeContext`<br/>

src/select-input/type.ts

@@ -112,7 +112,6 @@ export interface TdSelectInputProps {
   prefixIcon?: TNode;
   /**
    * 只读状态，值为真会隐藏输入框，且无法打开下拉框
-   * @default false
    */
   readonly?: boolean;
   /**

src/select-input/useMultiple.tsx

@@ -7,6 +7,7 @@ import Loading from '../loading';
 import useDefault from '../hooks/useDefaultValue';
 import { usePrefixClass } from '../hooks/useConfig';
 import { useDisabled } from '../hooks/useDisabled';
+import { useReadonly } from '../hooks/useReadonly';
 import { PopupInstanceFunctions } from '../popup';
 
 export interface RenderSelectMultipleParams {
@@ -38,6 +39,7 @@ export default function useMultiple(
     'inputValue',
   );
   const disable = useDisabled();
+  const isReadonly = useReadonly();
 
   const iKeys = computed<SelectInputKeys>(() => ({ ...DEFAULT_KEYS, ...props.keys }));
   const tags = computed<TagInputValue>(() => {
@@ -93,7 +95,7 @@ export default function useMultiple(
       tagProps: props.tagProps,
       label: props.label,
       autoWidth: props.autoWidth,
-      readonly: props.readonly,
+      readonly: isReadonly.value,
       placeholder: tPlaceholder.value,
       minCollapsedNum: props.minCollapsedNum,
       collapsedItems: props.collapsedItems,
@@ -102,7 +104,7 @@ export default function useMultiple(
       valueDisplay: props.valueDisplay,
       inputValue: p.popupVisible && p.allowInput ? tInputValue.value : '',
       inputProps: {
-        readonly: !props.allowInput || props.readonly,
+        readonly: !props.allowInput || isReadonly.value,
         inputClass: {
           [`${classPrefix.value}-input--focused`]: p.popupVisible,
         },

src/select-input/useOverlayInnerStyle.ts

@@ -4,6 +4,7 @@ import isFunction from 'lodash/isFunction';
 import { TdSelectInputProps } from './type';
 import { TdPopupProps, PopupVisibleChangeContext } from '../popup';
 import { useDisabled } from '../hooks/useDisabled';
+import { useReadonly } from '../hooks/useReadonly';
 
 export type overlayInnerStyleProps = Pick<
   TdSelectInputProps,
@@ -19,6 +20,7 @@ export default function useOverlayInnerStyle(props: overlayInnerStyleProps) {
   const { popupProps, autoWidth } = toRefs(props);
   const innerPopupVisible = ref(false);
   const disable = useDisabled();
+  const isReadonly = useReadonly();
 
   const matchWidthFunc = (triggerElement: HTMLElement, popupElement: HTMLElement) => {
     const SCROLLBAR_WIDTH = popupElement.scrollHeight > popupElement.offsetHeight ? RESERVE_WIDTH : 0;
@@ -41,7 +43,7 @@ export default function useOverlayInnerStyle(props: overlayInnerStyleProps) {
   };
 
   const onInnerPopupVisibleChange = (visible: boolean, ctx: PopupVisibleChangeContext) => {
-    if (disable.value || props.readonly) return;
+    if (disable.value || isReadonly.value) return;
     // 如果点击触发元素（输入框）且为可输入状态，则继续显示下拉框
     const newVisible = ctx.trigger === 'trigger-element-click' && props.allowInput ? true : visible;
     // 重复点击触发元素时，下拉框展示状态不变，不重复触发事件

src/select-input/useSingle.tsx

@@ -7,6 +7,7 @@ import { useTNodeJSX } from '../hooks/tnode';
 import { usePrefixClass } from '../hooks/useConfig';
 import useDefaultValue from '../hooks/useDefaultValue';
 import { useDisabled } from '../hooks/useDisabled';
+import { useReadonly } from '../hooks/useReadonly';
 import { PopupInstanceFunctions } from '../popup';
 import { TdSelectInputProps } from './type';
 import { SelectInputCommonProperties } from './interface';
@@ -62,10 +63,12 @@ export default function useSingle(
   );
   const renderTNode = useTNodeJSX();
   const disable = useDisabled();
+  const isReadonly = useReadonly();
 
   const commonInputProps = computed<SelectInputCommonProperties>(() => ({
     ...pick(props, COMMON_PROPERTIES),
     disabled: disable.value,
+    readonly: isReadonly.value,
   }));
 
   const onInnerClear = (context: { e: MouseEvent }) => {
@@ -89,11 +92,11 @@ export default function useSingle(
       value: renderInputDisplay(singleValueDisplay, displayedValue, popupVisible),
       label: prefixContent.length ? () => prefixContent : undefined,
       autoWidth: props.autoWidth,
-      readonly: !props.allowInput || props.readonly,
+      readonly: !props.allowInput || isReadonly.value,
       placeholder: renderPlaceholder(singleValueDisplay),
       suffixIcon: !disable.value && props.loading ? () => <Loading loading size="small" /> : props.suffixIcon,
       showClearIconOnEmpty: Boolean(
-        props.clearable && (inputValue.value || displayedValue) && !disable.value && !props.readonly,
+        props.clearable && (inputValue.value || displayedValue) && !disable.value && !isReadonly.value,
       ),
       ...props.inputProps,
     };