feat(readonly): support readonly (#4737)

* feat(auto-complete): support readonly * fix: build * feat(cascader): support readonly * feat(checkbox): support readonly and title api * feat(checkbox): title api * docs(input-number): sync api * feat(checkbox): title api * chore: update example * chore: update snapshot * docs(form): sync api * feat(RadioGroup): support readonly * feat(RadioGroup): support readonly * feat(range-input): udpate readonly api * feat(select): udpate readonly * feat(select-input): udpate readonly * docs(steps): sync api * docs(tag-input): sync api * docs(texarea): sync api * docs(tree-select): sync api * chore: update snapshot --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Tencent · Nov 18, 2024 · 982e8e9 · 982e8e9
1 parent 5188650
commit 982e8e9
Show file tree

Hide file tree

Showing 70 changed files with 297 additions and 195 deletions.
diff --git a/src/auto-complete/auto-complete.en-US.md b/src/auto-complete/auto-complete.en-US.md
@@ -10,7 +10,7 @@ autofocus | Boolean | - | \- | N
 borderless | Boolean | false | \- | N
 clearable | Boolean | - | \- | N
 default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-disabled | Boolean | - | \- | N
+disabled | Boolean | undefined | \- | N
 filter | Function | - | Typescript：`(filterWords: string, option: T) => boolean \| Promise<boolean>` | N
 filterable | Boolean | true | \- | N
 highlightKeyword | Boolean | true | \- | N
@@ -20,7 +20,7 @@ panelBottomContent | String / Slot / Function | - | Typescript：`string \| TNod
 panelTopContent | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 placeholder | String | undefined | \- | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/auto-complete/type.ts) | N
-readonly | Boolean | - | \- | N
+readonly | Boolean | undefined | \- | 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
 textareaProps | Object | - | Typescript：`TextareaProps`，[Textarea API Documents](./textarea?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/auto-complete/type.ts) | N

diff --git a/src/auto-complete/auto-complete.md b/src/auto-complete/auto-complete.md
@@ -10,7 +10,7 @@ autofocus | Boolean | - | 自动获取焦点 | N
 borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | - | 是否允许清空 | N
 default | String / Slot / Function | - | 触发显示联想词下拉框的元素，同 `triggerElement`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
-disabled | Boolean | - | 是否禁用 | N
+disabled | Boolean | undefined | 是否禁用 | N
 filter | Function | - | 自定义过滤规则，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。参数 `filterWords` 表示搜索词，`option`表示单个选项内容，返回值为 `true` 保留该选项，返回值为 `false` 则隐藏该选项。使用该方法时无需设置 `filterable`。TS 类型：`(filterWords: string, option: T) => boolean \| Promise<boolean>` | N
 filterable | Boolean | true | 是否根据输入内容过滤联想词。默认过滤规则不区分大小写，全文本任意位置匹配。如果默认搜索规则不符合业务需求，可以更为使用 `filter` 自定义过滤规则。部分场景下输入关键词和下拉联想词完全不同，此时可以设置为 `false` | N
 highlightKeyword | Boolean | true | 是否高亮联想词中和输入值的相同部分 | N
@@ -20,7 +20,7 @@ panelBottomContent | String / Slot / Function | - | 面板内的底部内容。T
 panelTopContent | String / Slot / Function | - | 面板内的顶部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 placeholder | String | undefined | 输入框为空时的占位提示。组件本身默认值为 `undefined`，但全局配置存在默认值，不同语言全局默认值不同 | N
 popupProps | Object | - | 透传 Popup 组件全部特性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/auto-complete/type.ts) | N
-readonly | Boolean | - | 是否只读 | N
+readonly | Boolean | undefined | 是否只读 | 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
 textareaProps | Object | - | 透传 Textarea 组件全部特性。TS 类型：`TextareaProps`，[Textarea API Documents](./textarea?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/auto-complete/type.ts) | N

diff --git a/src/auto-complete/auto-complete.tsx b/src/auto-complete/auto-complete.tsx
@@ -9,6 +9,8 @@ import useVModel from '../hooks/useVModel';
 import { useConfig } from '../config-provider/useConfig';
 import { ClassName } from '../common';
 import { useContent, useTNodeJSX } from '../hooks';
+import { useDisabled } from '../hooks/useDisabled';
+import { useReadonly } from '../hooks/useReadonly';
 
 export default defineComponent({
   name: 'TAutoComplete',
@@ -22,7 +24,8 @@ export default defineComponent({
     const renderTNodeJSX = useTNodeJSX();
     const { classPrefix, sizeClassNames } = useCommonClassName();
     const { globalConfig: global } = useConfig('input');
-
+    const isDisabled = useDisabled();
+    const isReadonly = useReadonly();
     const popupVisible = ref();
     const optionListRef = ref();
 
@@ -66,6 +69,7 @@ export default defineComponent({
     });
 
     const onInnerFocus: StrInputProps['onFocus'] = (value, context) => {
+      if (isReadonly.value || isDisabled.value) return;
       popupVisible.value = true;
       props.onFocus?.({ ...context, value });
       nextTick(() => {
@@ -90,13 +94,14 @@ export default defineComponent({
     };
 
     const onInnerSelect: TdAutoCompleteProps['onSelect'] = (value, context) => {
-      if (props.readonly || props.disabled) return;
+      if (isReadonly.value || isDisabled.value) return;
       popupVisible.value = false;
       setTValue(value, context);
       props.onSelect?.(value, context);
     };
 
     const onPopupVisibleChange: PopupProps['onVisibleChange'] = (visible, { trigger }) => {
+      if (isReadonly.value || isDisabled.value) return;
       if (trigger !== 'trigger-element-click') {
         popupVisible.value = visible;
       }
@@ -110,8 +115,8 @@ export default defineComponent({
           placeholder={props.placeholder ?? global.value.placeholder}
           tips={props.tips}
           status={props.status}
-          readonly={props.readonly}
-          disabled={props.disabled}
+          readonly={isReadonly.value}
+          disabled={isDisabled.value}
           autofocus={props.autofocus}
           clearable={props.clearable}
           onChange={onInputChange}

diff --git a/src/auto-complete/props.ts b/src/auto-complete/props.ts
@@ -19,7 +19,10 @@ export default {
     type: [String, Function] as PropType<TdAutoCompleteProps['default']>,
   },
   /** 是否禁用 */
-  disabled: Boolean,
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 自定义过滤规则，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。参数 `filterWords` 表示搜索词，`option`表示单个选项内容，返回值为 `true` 保留该选项，返回值为 `false` 则隐藏该选项。使用该方法时无需设置 `filterable` */
   filter: {
     type: Function as PropType<TdAutoCompleteProps['filter']>,
@@ -60,7 +63,10 @@ export default {
     type: Object as PropType<TdAutoCompleteProps['popupProps']>,
   },
   /** 是否只读 */
-  readonly: Boolean,
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 组件尺寸 */
   size: {
     type: String as PropType<TdAutoCompleteProps['size']>,

diff --git a/src/avatar/type.ts b/src/avatar/type.ts
@@ -6,7 +6,7 @@
 
 import { ImageProps } from '../image';
 import { PopupProps } from '../popup';
-import { TNode } from '../common';
+import { TNode, ShapeEnum } from '../common';
 
 export interface TdAvatarProps {
   /**
@@ -81,6 +81,4 @@ export interface TdAvatarGroupProps {
   size?: string;
 }
 
-export type ShapeEnum = 'circle' | 'round';
-
 export type CascadingValue = 'left-up' | 'right-up';
diff --git a/src/cascader/_usage/props.json b/src/cascader/_usage/props.json
@@ -35,6 +35,12 @@
     "defaultValue": false,
     "options": []
   },
+  {
+    "name": "readonly",
+    "type": "Boolean",
+    "defaultValue": false,
+    "options": []
+  },
   {
     "name": "showAllLevels",
     "type": "Boolean",

diff --git a/src/cascader/cascader.en-US.md b/src/cascader/cascader.en-US.md
@@ -35,7 +35,7 @@ popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./po
 popupVisible | Boolean | - | \- | 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
 selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N
 showAllLevels | Boolean | true | \- | N

diff --git a/src/cascader/cascader.md b/src/cascader/cascader.md
@@ -35,7 +35,7 @@ popupProps | Object | - | 参考 popup 组件 API。TS 类型：`PopupProps`，[
 popupVisible | Boolean | - | 是否显示下拉框 | 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
 selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N
 showAllLevels | Boolean | true | 选中值使用完整路径，输入框在单选时也显示完整路径 | N

diff --git a/src/cascader/cascader.tsx b/src/cascader/cascader.tsx
@@ -14,21 +14,21 @@ import { useConfig, usePrefixClass, useCommonClassName } from '../hooks/useConfi
 import { useCascaderContext } from './hooks';
 import { useTNodeJSX } from '../hooks/tnode';
 import { useDisabled } from '../hooks/useDisabled';
+import { useReadonly } from '../hooks/useReadonly';
 
 export default defineComponent({
   name: 'TCascader',
 
   props: { ...props },
 
   setup(props, { slots }) {
-    const disabled = useDisabled();
-
     const COMPONENT_NAME = usePrefixClass('cascader');
     const classPrefix = usePrefixClass();
     const { STATUS } = useCommonClassName();
     const overlayClassName = usePrefixClass('cascader__popup');
     const { globalConfig } = useConfig('cascader');
-
+    const isDisabled = useDisabled();
+    const isReadonly = useReadonly();
     const renderTNodeJSX = useTNodeJSX();
 
     // 拿到全局状态的上下文
@@ -107,8 +107,8 @@ export default defineComponent({
           allowInput={isFilterable.value}
           min-collapsed-num={props.minCollapsedNum}
           collapsed-items={props.collapsedItems}
-          readonly={props.readonly}
-          disabled={props.disabled}
+          readonly={isReadonly.value}
+          disabled={isDisabled.value}
           clearable={props.clearable}
           placeholder={inputPlaceholder.value}
           multiple={props.multiple}
@@ -148,7 +148,7 @@ export default defineComponent({
             (props?.selectInputProps as TdSelectInputProps)?.onTagChange?.(val, ctx);
           }}
           onPopupVisibleChange={(val: boolean, context) => {
-            if (disabled.value) return;
+            if (isDisabled.value) return;
             setVisible(val, context);
             (props?.selectInputProps as TdSelectInputProps)?.onPopupVisibleChange?.(val, context);
           }}

diff --git a/src/cascader/props.ts b/src/cascader/props.ts
@@ -111,7 +111,10 @@ export default {
     type: Function as PropType<TdCascaderProps['prefixIcon']>,
   },
   /** 只读状态，值为真会隐藏输入框，且无法打开下拉框 */
-  readonly: Boolean,
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 */
   reserveKeyword: Boolean,
   /** 透传 SelectInput 筛选器输入框组件的全部属性 */

diff --git a/src/cascader/type.ts b/src/cascader/type.ts
@@ -144,7 +144,6 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
   prefixIcon?: TNode;
   /**
    * 只读状态，值为真会隐藏输入框，且无法打开下拉框
-   * @default false
    */
   readonly?: boolean;
   /**

diff --git a/src/checkbox/checkbox-group-props.ts b/src/checkbox/checkbox-group-props.ts
@@ -8,16 +8,11 @@ import { TdCheckboxGroupProps } from '../checkbox/type';
 import { PropType } from 'vue';
 
 export default {
-  /** 是否禁用组件，默认为 false。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled */
+  /** 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled */
   disabled: {
     type: Boolean,
     default: undefined,
   },
-  /** 是否禁用组件，默认为 false。优先级：Form.readonly < CheckboxGroup.readonly < Checkbox.readonly */
-  readonly: {
-    type: Boolean,
-    default: undefined,
-  },
   /** 是否启用懒加载。子组件 Checkbox 数据量大时建议开启；加载复杂内容或大量图片时建议开启 */
   lazyLoad: Boolean,
   /** 支持最多选中的数量 */
@@ -34,6 +29,11 @@ export default {
   options: {
     type: Array as PropType<TdCheckboxGroupProps['options']>,
   },
+  /** 只读状态 */
+  readonly: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 选中值 */
   value: {
     type: Array as PropType<TdCheckboxGroupProps['value']>,

diff --git a/src/checkbox/checkbox.en-US.md b/src/checkbox/checkbox.en-US.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Checkbox Props
 
 name | type | default | description | required
@@ -14,7 +15,8 @@ indeterminate | Boolean | false | \- | N
 label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 lazyLoad | Boolean | false | load checkbox content when it entering the visible area | N
 name | String | - | \- | N
-readonly | Boolean | false | \- | N
+readonly | Boolean | undefined | \- | N
+title | String | - | html attribute | N
 value | String / Number / Boolean | - | value of checkbox。Typescript：`string \| number \| boolean` | N
 onChange | Function |  | Typescript：`(checked: boolean, context: { e: Event }) => void`<br/> | N
 
@@ -24,6 +26,7 @@ name | params | description
 -- | -- | --
 change | `(checked: boolean, context: { e: Event })` | \-
 
+
 ### CheckboxGroup Props
 
 name | type | default | description | required
@@ -33,6 +36,7 @@ lazyLoad | Boolean | false | load checkbox content when it entering the visible
 max | Number | undefined | \- | N
 name | String | - | \- | N
 options | Array | - | Typescript：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj extends TdCheckboxProps { text?: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/checkbox/type.ts) | N
+readonly | Boolean | undefined | \- | N
 value | Array | [] | `v-model` and `v-model:value` is supported。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/checkbox/type.ts) | N
 defaultValue | Array | [] | uncontrolled property。Typescript：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/checkbox/type.ts) | N
 onChange | Function |  | Typescript：`(value: T, context: CheckboxGroupChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number \| boolean; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/> | N

diff --git a/src/checkbox/checkbox.md b/src/checkbox/checkbox.md
@@ -1,9 +1,10 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Checkbox Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 checkAll | Boolean | false | 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 | N
 checked | Boolean | false | 是否选中。支持语法糖 `v-model` 或 `v-model:checked` | N
@@ -14,7 +15,8 @@ indeterminate | Boolean | false | 是否为半选 | N
 label | String / Slot / Function | - | 主文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 lazyLoad | Boolean | false | 是否启用懒加载。数据量大时建议开启；加载复杂内容或大量图片时建议开启 | N
 name | String | - | HTML 元素原生属性 | N
-readonly | Boolean | false | 只读状态 | N
+readonly | Boolean | undefined | 只读状态 | N
+title | String | - | HTML 原生属性 | N
 value | String / Number / Boolean | - | 多选框的值。TS 类型：`string \| number \| boolean` | N
 onChange | Function |  | TS 类型：`(checked: boolean, context: { e: Event }) => void`<br/>值变化时触发 | N
 
@@ -24,15 +26,17 @@ onChange | Function |  | TS 类型：`(checked: boolean, context: { e: Event })
 -- | -- | --
 change | `(checked: boolean, context: { e: Event })` | 值变化时触发
 
+
 ### CheckboxGroup Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-disabled | Boolean | undefined | 是否禁用组件，默认为 false。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled | N
+disabled | Boolean | undefined | 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled | N
 lazyLoad | Boolean | false | 是否启用懒加载。子组件 Checkbox 数据量大时建议开启；加载复杂内容或大量图片时建议开启 | N
 max | Number | undefined | 支持最多选中的数量 | N
 name | String | - | 统一设置内部复选框 HTML 属性 | N
 options | Array | - | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj extends TdCheckboxProps { text?: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/checkbox/type.ts) | N
+readonly | Boolean | undefined | 只读状态 | N
 value | Array | [] | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/checkbox/type.ts) | N
 defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/checkbox/type.ts) | N
 onChange | Function |  | TS 类型：`(value: T, context: CheckboxGroupChangeContext) => void`<br/>值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中，`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number \| boolean; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/> | N