fix: disabled priority (#1472)

* fix: useFormDisabled

* docs(button): sync api doc

* docs(cell): sync api

* fix(input): disabled priority

* feat: 显示清除逻辑调整

* fix(radio): disabled priority

* fix(rate): disabled priority

* fix(slider): disabled priority

* fix(stepper): disabled priority

* fix(switch): disabled priority

* fix(switch): disabled priority

* fix(textarea): disabled priority

* chore: snapshot update

* fix: useFormDisabled

* fix(checkbox): disabled priority

* fix(input): clearable

* fix: cr

* fix: cr

src/button/button.en-US.md

@@ -8,7 +8,7 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 block | Boolean | false | make button to be a block-level element | N
 content | String / Slot / Function | - | button's children elements。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-disabled | Boolean | false | disable the button, make it can not be clicked | N
+disabled | Boolean | undefined | disable the button, make it can not be clicked | N
 ghost | Boolean | false | make background-color to be transparent | N
 icon | Slot / Function | - | use it to set left icon in button。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 loading | Boolean | false | set button to be loading state | N
@@ -18,7 +18,7 @@ size | String | medium | a button has four size。options: extra-small/small/med
 suffix | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 theme | String | default | button theme。options: default/primary/danger/light | N
 type | String | button | type of button element in html。options: submit/reset/button | N
-variant | String | base | button variant。options: base/outline/text | N
+variant | String | base | button variant。options: base/outline/dashed/text | N
 onClick | Function |  | Typescript：`(e: MouseEvent) => void`<br/>trigger on click | N
 
 ### Button Events

src/button/button.md

@@ -8,17 +8,17 @@
 -- | -- | -- | -- | --
 block | Boolean | false | 是否为块级元素 | N
 content | String / Slot / Function | - | 按钮内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-disabled | Boolean | false | 禁用状态 | N
+disabled | Boolean | undefined | 禁用状态。优先级：Button.disabled > Form.disabled | N
 ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
 icon | Slot / Function | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 loading | Boolean | false | 是否显示为加载状态 | N
-loadingProps | Object | - | 透传加载组件全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/button/type.ts) | N
+loadingProps | Object | - | 透传 Loading 组件全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/button/type.ts) | N
 shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
 size | String | medium | 组件尺寸。可选项：extra-small/small/medium/large | N
 suffix | Slot / Function | - | 右侧内容，可用于定义右侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger/light | N
 type | String | button | 按钮类型。可选项：submit/reset/button | N
-variant | String | base | 按钮形式，基础、线框、文字。可选项：base/outline/text | N
+variant | String | base | 按钮形式，基础、线框、文字。可选项：base/outline/dashed/text | N
 onClick | Function |  | TS 类型：`(e: MouseEvent) => void`<br/>点击时触发 | N
 
 ### Button Events

src/button/button.tsx

@@ -65,8 +65,8 @@ export default defineComponent({
           class={buttonClasses.value}
           role="button"
           type={props.type}
-          disabled={props.disabled}
-          aria-disabled={props.disabled}
+          disabled={isDisabled.value}
+          aria-disabled={isDisabled.value}
           onClick={handleClick}
           v-hover={{ className: `${buttonClass.value}--hover` }}
         >

src/button/props.ts

@@ -14,8 +14,11 @@ export default {
   content: {
     type: [String, Function] as PropType<TdButtonProps['content']>,
   },
-  /** 禁用状态 */
-  disabled: Boolean,
+  /** 禁用状态。优先级：Button.disabled > Form.disabled */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 是否为幽灵按钮（镂空按钮） */
   ghost: Boolean,
   /** 按钮内部图标，可完全自定义 */
@@ -24,7 +27,7 @@ export default {
   },
   /** 是否显示为加载状态 */
   loading: Boolean,
-  /** 透传加载组件全部属性 */
+  /** 透传 Loading 组件全部属性 */
   loadingProps: {
     type: Object as PropType<TdButtonProps['loadingProps']>,
   },
@@ -74,7 +77,7 @@ export default {
     default: 'base' as TdButtonProps['variant'],
     validator(val: TdButtonProps['variant']): boolean {
       if (!val) return true;
-      return ['base', 'outline', 'text'].includes(val);
+      return ['base', 'outline', 'dashed', 'text'].includes(val);
     },
   },
   /** 点击时触发 */

src/button/type.ts

@@ -18,8 +18,7 @@ export interface TdButtonProps {
    */
   content?: string | TNode;
   /**
-   * 禁用状态
-   * @default false
+   * 禁用状态。优先级：Button.disabled > Form.disabled
    */
   disabled?: boolean;
   /**
@@ -37,7 +36,7 @@ export interface TdButtonProps {
    */
   loading?: boolean;
   /**
-   * 透传加载组件全部属性
+   * 透传 Loading 组件全部属性
    */
   loadingProps?: LoadingProps;
   /**
@@ -68,7 +67,7 @@ export interface TdButtonProps {
    * 按钮形式，基础、线框、文字
    * @default base
    */
-  variant?: 'base' | 'outline' | 'text';
+  variant?: 'base' | 'outline' | 'dashed' | 'text';
   /**
    * 点击时触发
    */

src/cell/cell-group-props.ts

@@ -9,10 +9,7 @@ import { PropType } from 'vue';
 
 export default {
   /** 是否显示组边框 */
-  bordered: {
-    type: Boolean,
-    default: false,
-  },
+  bordered: Boolean,
   /** 单元格组风格 */
   theme: {
     type: String as PropType<TdCellGroupProps['theme']>,

src/cell/cell-group.tsx

@@ -1,16 +1,14 @@
 import { computed, defineComponent } from 'vue';
-import CellGroupProps from './cell-group-props';
+import props from './cell-group-props';
 import config from '../config';
 import { usePrefixClass } from '../hooks/useClass';
-import { useContent, useTNodeJSX } from '../hooks/tnode';
+import { useTNodeJSX } from '../hooks/tnode';
 
 const { prefix } = config;
-const name = `${prefix}-cell-group`;
 
 export default defineComponent({
-  name,
-  props: CellGroupProps,
-  emits: ['click'],
+  name: `${prefix}-cell-group`,
+  props,
   setup(props) {
     const renderTNodeJSX = useTNodeJSX();
     const cellGroupClass = usePrefixClass('cell-group');

src/cell/cell.en-US.md

@@ -1,11 +1,12 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Cell Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-align | String | middle | options：top/middle/bottom | N
+align | String | middle | options: top/middle/bottom | N
 arrow | Boolean | false | \- | N
 bordered | Boolean | true | \- | N
 description | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
@@ -24,16 +25,17 @@ name | params | description
 -- | -- | --
 click | `(context: { e: MouseEvent })` | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)
 
+
 ### CellGroup Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 bordered | Boolean | false | \- | N
-theme | String | default | `0.15.0`。options：default/card | N
+theme | String | default | `0.15.0`。options: default/card | N
 title | String | - | \- | N
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -66,4 +68,4 @@ Name | Default Value | Description
 --td-cell-group-title-color | @font-gray-3 | - 
 --td-cell-group-title-font-size | 14px | - 
 --td-cell-group-title-line-height | 45px | - 
---td-cell-group-title-padding-left | 16px | - 
+--td-cell-group-title-padding-left | 16px | -

src/cell/cell.md

@@ -1,9 +1,10 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Cell Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 align | String | middle | 内容的对齐方式，默认居中对齐。可选项：top/middle/bottom | N
 arrow | Boolean | false | 是否显示右侧箭头 | N
@@ -24,16 +25,17 @@ onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>
 -- | -- | --
 click | `(context: { e: MouseEvent })` | 右侧内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)
 
+
 ### CellGroup Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 bordered | Boolean | false | 是否显示组边框 | N
 theme | String | default | `0.15.0`。单元格组风格。可选项：default/card | N
 title | String | - | 单元格组标题 | N
 
-
 ### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -66,4 +68,4 @@ title | String | - | 单元格组标题 | N
 --td-cell-group-title-color | @font-gray-3 | - 
 --td-cell-group-title-font-size | 14px | - 
 --td-cell-group-title-line-height | 45px | - 
---td-cell-group-title-padding-left | 16px | - 
+--td-cell-group-title-padding-left | 16px | -

src/cell/cell.tsx

@@ -2,7 +2,7 @@ import { computed, defineComponent } from 'vue';
 import { ChevronRightIcon } from 'tdesign-icons-vue-next';
 import { Hover } from '../shared';
 import config from '../config';
-import CellProps from './props';
+import props from './props';
 import { useFormDisabled } from '../form/hooks';
 import { usePrefixClass } from '../hooks/useClass';
 import { useContent, useTNodeJSX } from '../hooks/tnode';
@@ -11,10 +11,9 @@ const { prefix } = config;
 const name = `${prefix}-cell`;
 
 export default defineComponent({
-  name,
+  name: `${prefix}-cell`,
   directives: { Hover },
-  props: CellProps,
-  emits: ['click'],
+  props,
   setup(props) {
     const readerTNodeJSX = useTNodeJSX();
     const readerTNodeContent = useContent();
@@ -31,9 +30,9 @@ export default defineComponent({
 
     const hoverDisabled = computed(() => !props.hover || disabled.value);
 
-    const handleClick = (e: Event) => {
+    const handleClick = (e: MouseEvent) => {
       if (!disabled.value) {
-        props.onClick?.(e);
+        props.onClick?.({ e });
       }
     };
 

src/checkbox/checkbox-group-props.ts

@@ -8,8 +8,11 @@ import { TdCheckboxGroupProps } from '../checkbox/type';
 import { PropType } from 'vue';
 
 export default {
-  /** 是否禁用组件，默认为 false。CheckboxGroup.disabled 优先级低于 Checkbox.disabled */
-  disabled: Boolean,
+  /** 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled */
+  disabled: {
+    type: Boolean,
+    default: undefined,
+  },
   /** 支持最多选中的数量 */
   max: {
     type: Number,

src/checkbox/checkbox.en-US.md

@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Checkbox Props
 
 name | type | default | description | required
@@ -19,7 +20,7 @@ label | String / Slot / Function | - | Typescript：`string \| TNode`。[see mor
 maxContentRow | Number | 5 | \- | N
 maxLabelRow | Number | 3 | \- | N
 name | String | - | \- | N
-placement | String | left | options：left/right | N
+placement | String | left | options: left/right | N
 readonly | Boolean | false | \- | N
 value | String / Number / Boolean | - | value of checkbox。Typescript：`string \| number \| boolean` | N
 onChange | Function |  | Typescript：`(checked: boolean, context: { e: Event }) => void`<br/> | N
@@ -30,11 +31,12 @@ name | params | description
 -- | -- | --
 change | `(checked: boolean, context: { e: Event })` | \-
 
+
 ### CheckboxGroup Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-disabled | Boolean | - | \- | N
+disabled | Boolean | undefined | \- | N
 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-mobile-vue/tree/develop/src/checkbox/type.ts) | N
@@ -48,8 +50,8 @@ name | params | description
 -- | -- | --
 change | `(value: T, context: CheckboxGroupChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/>
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -69,4 +71,4 @@ Name | Default Value | Description
 --td-checkbox-title-color | @font-gray-1 | - 
 --td-checkbox-title-disabled-color | @font-gray-4 | - 
 --td-checkbox-title-line-height | 24px | - 
---td-checkbox-vertical-padding | 16px | - 
+--td-checkbox-vertical-padding | 16px | -

src/checkbox/checkbox.md

@@ -1,9 +1,10 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Checkbox Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 block | Boolean | true | 是否为块级元素 | N
 checkAll | Boolean | false | 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 | N
@@ -12,7 +13,7 @@ defaultChecked | Boolean | false | 是否选中。非受控属性 | N
 content | String / Slot / Function | - | 多选框内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 contentDisabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N
 default | String / Slot / Function | - | 多选框内容，同 label。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-disabled | Boolean | undefined | 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。Checkbox.disabled 优先级高于 CheckboxGroup.disabled | N
+disabled | Boolean | undefined | 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled | N
 icon | String / Boolean / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。。TS 类型：`'circle' \| 'line' \| 'rectangle' \| boolean \| Array<TNode \| String>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 indeterminate | Boolean | false | 是否为半选 | N
 label | String / Slot / Function | - | 主文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
@@ -30,11 +31,12 @@ onChange | Function |  | TS 类型：`(checked: boolean, context: { e: Event })
 -- | -- | --
 change | `(checked: boolean, context: { e: Event })` | 值变化时触发
 
+
 ### CheckboxGroup Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-disabled | Boolean | - | 是否禁用组件，默认为 false。CheckboxGroup.disabled 优先级低于 Checkbox.disabled | N
+disabled | Boolean | undefined | 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled | 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-mobile-vue/tree/develop/src/checkbox/type.ts) | N
@@ -48,8 +50,8 @@ onChange | Function |  | TS 类型：`(value: T, context: CheckboxGroupChangeCon
 -- | -- | --
 change | `(value: T, context: CheckboxGroupChangeContext)` | 值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中，`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/>
 
-
 ### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -69,4 +71,4 @@ change | `(value: T, context: CheckboxGroupChangeContext)` | 值变化时触发
 --td-checkbox-title-color | @font-gray-1 | - 
 --td-checkbox-title-disabled-color | @font-gray-4 | - 
 --td-checkbox-title-line-height | 24px | - 
---td-checkbox-vertical-padding | 16px | - 
+--td-checkbox-vertical-padding | 16px | -

src/checkbox/checkbox.tsx

@@ -13,6 +13,7 @@ import CheckboxProps from './props';
 import { TNode, useDefault } from '../shared';
 import { TdCheckboxProps } from '../checkbox/type';
 import { useTNodeJSX, useContent } from '../hooks/tnode';
+import { useFormDisabled } from '@/form/hooks';
 
 const { prefix } = config;
 const name = `${prefix}-checkbox`;
@@ -38,6 +39,7 @@ export default defineComponent({
       'change',
     );
     const checkboxGroup: any = inject('checkboxGroup', undefined);
+    const disabled = useFormDisabled(checkboxGroup?.disabled);
     const indeterminate = computed<boolean>(() => {
       if (props.checkAll && checkboxGroup != null) return checkboxGroup.checkAllStatus.value === 'indeterminate';
       return props.indeterminate;
@@ -77,8 +79,8 @@ export default defineComponent({
     const isDisabled = computed(() => {
       if (checkboxGroup?.max.value)
         return checkboxGroup.max.value <= checkboxGroup.innerValue.value.length && !isChecked.value;
-      if (props.disabled != null) return props.disabled;
-      return !!checkboxGroup?.disabled.value;
+
+      return disabled.value;
     });
 
     const handleChange = (e: Event, source?: string) => {