From 6c71ec95252c703a9905c7327ec0b3c36ad027e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Sat, 22 Jun 2024 16:03:47 +0800 Subject: [PATCH 01/18] fix: useFormDisabled --- src/form/hooks.ts | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/form/hooks.ts b/src/form/hooks.ts index ca5c85d8b..7fd79ed0a 100644 --- a/src/form/hooks.ts +++ b/src/form/hooks.ts @@ -1,4 +1,5 @@ import { Ref, inject, computed, getCurrentInstance } from 'vue'; +import isBoolean from 'lodash/isBoolean'; import { TdFormProps } from './type'; export interface FormDisabledProvider { @@ -7,11 +8,26 @@ export interface FormDisabledProvider { /** * 用于实现 form 的全局禁用状态hook + * 禁用优先级: 组件 > 组件组 > 表单(checkbox.disabled > checkboxGroup.disabled > form.disabled) * @returns */ export function useFormDisabled(extend?: Ref) { const ctx = getCurrentInstance(); const propsDisabled = computed(() => ctx?.props.disabled as boolean); const { disabled } = inject('formDisabled', Object.create(null)); - return computed(() => propsDisabled.value || disabled?.value || extend?.value || false); + return computed(() => { + // 组件 + if (isBoolean(propsDisabled.value)) { + return propsDisabled.value; + } + // 组件组 + if (isBoolean(extend?.value)) { + return propsDisabled.value; + } + // 表单 + if (isBoolean(disabled?.value)) { + return disabled?.value; + } + return false; + }); } From 2335652515fdb2fd82bb7f7d3bced2f25d491011 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Sat, 22 Jun 2024 16:07:01 +0800 Subject: [PATCH 02/18] docs(button): sync api doc --- src/button/button.en-US.md | 4 ++-- src/button/button.md | 6 +++--- src/button/props.ts | 11 +++++++---- src/button/type.ts | 7 +++---- 4 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/button/button.en-US.md b/src/button/button.en-US.md index c3ae7f5f8..004c735ab 100644 --- a/src/button/button.en-US.md +++ b/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`
trigger on click | N ### Button Events diff --git a/src/button/button.md b/src/button/button.md index bc3961148..66ea191fb 100644 --- a/src/button/button.md +++ b/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`
点击时触发 | N ### Button Events diff --git a/src/button/props.ts b/src/button/props.ts index 0b9694246..c2dfca545 100644 --- a/src/button/props.ts +++ b/src/button/props.ts @@ -14,8 +14,11 @@ export default { content: { type: [String, Function] as PropType, }, - /** 禁用状态 */ - 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, }, @@ -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); }, }, /** 点击时触发 */ diff --git a/src/button/type.ts b/src/button/type.ts index 2c5e73393..ee904f2ad 100644 --- a/src/button/type.ts +++ b/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'; /** * 点击时触发 */ From a5118402112c612de105431e4347979d68538215 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Sat, 22 Jun 2024 16:18:35 +0800 Subject: [PATCH 03/18] docs(cell): sync api --- src/cell/cell-group-props.ts | 5 +---- src/cell/cell-group.tsx | 10 ++++------ src/cell/cell.en-US.md | 10 ++++++---- src/cell/cell.md | 10 ++++++---- src/cell/cell.tsx | 11 +++++------ 5 files changed, 22 insertions(+), 24 deletions(-) diff --git a/src/cell/cell-group-props.ts b/src/cell/cell-group-props.ts index dbad6f27c..d20c1a8b8 100644 --- a/src/cell/cell-group-props.ts +++ b/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, diff --git a/src/cell/cell-group.tsx b/src/cell/cell-group.tsx index 675f61e2c..c94953dbe 100644 --- a/src/cell/cell-group.tsx +++ b/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'); diff --git a/src/cell/cell.en-US.md b/src/cell/cell.en-US.md index 0ebf9d75a..b5b46c354 100644 --- a/src/cell/cell.en-US.md +++ b/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 | - \ No newline at end of file diff --git a/src/cell/cell.md b/src/cell/cell.md index 2edada5b1..b690a4a9e 100644 --- a/src/cell/cell.md +++ b/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`
-- | -- | -- 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 | - \ No newline at end of file diff --git a/src/cell/cell.tsx b/src/cell/cell.tsx index 69225c8c3..3d9a32fd7 100644 --- a/src/cell/cell.tsx +++ b/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 }); } }; From ab741e41330f51903e309db0b3985bd3c08a7b60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Sat, 22 Jun 2024 17:32:49 +0800 Subject: [PATCH 04/18] fix(input): disabled priority --- src/input/input.en-US.md | 2 +- src/input/input.md | 4 ++-- src/input/props.ts | 7 +++++-- src/input/type.ts | 3 +-- 4 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/input/input.en-US.md b/src/input/input.en-US.md index b356e1e9f..6a50570ca 100644 --- a/src/input/input.en-US.md +++ b/src/input/input.en-US.md @@ -13,7 +13,7 @@ autocomplete | String | undefined | attribute of input element, [see here](https autofocus | Boolean | false | autofocus on first rendered | N borderless | Boolean | false | input without border | N clearable | Boolean | false | show clear icon, clicked to clear input value | N -disabled | Boolean | - | make input to be disabled | N +disabled | Boolean | undefined | make input to be disabled | N format | Function | - | input value formatter, `type=number` does not work. if you need to format number, `InputNumber` Component might be better。Typescript:`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/input/type.ts) | N label | String / Slot / Function | - | text on the left of input。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N layout | String | horizontal | options: vertical/horizontal | N diff --git a/src/input/input.md b/src/input/input.md index 9f9fb68e9..985a700c1 100644 --- a/src/input/input.md +++ b/src/input/input.md @@ -12,8 +12,8 @@ autocomplete | String | undefined | 是否开启自动填充功能,HTML5 原 autofocus | Boolean | false | 自动聚焦 | N borderless | Boolean | false | 是否开启无边框模式 | N clearable | Boolean | false | 是否可清空 | N -disabled | Boolean | - | 是否禁用输入框 | N -format | Function | - | 【暂不支持】指定输入框展示值的格式。TS 类型:`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/input/type.ts) | N +disabled | Boolean | undefined | 是否禁用输入框 | N +format | Function | - | 【开发中】指定输入框展示值的格式。TS 类型:`InputFormatType` `type InputFormatType = (value: InputValue) => string`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/input/type.ts) | N label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N layout | String | horizontal | 标题输入框布局方式。可选项:vertical/horizontal | N maxcharacter | Number | - | 用户最多可以输入的字符个数,一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N diff --git a/src/input/props.ts b/src/input/props.ts index 627d9248f..86d3be5ba 100644 --- a/src/input/props.ts +++ b/src/input/props.ts @@ -31,8 +31,11 @@ export default { /** 是否可清空 */ clearable: Boolean, /** 是否禁用输入框 */ - disabled: Boolean, - /** 【暂不支持】指定输入框展示值的格式 */ + disabled: { + type: Boolean, + default: undefined, + }, + /** 【开发中】指定输入框展示值的格式 */ format: { type: Function as PropType, }, diff --git a/src/input/type.ts b/src/input/type.ts index f7020659d..20fb58c27 100644 --- a/src/input/type.ts +++ b/src/input/type.ts @@ -41,7 +41,7 @@ export interface TdInputProps { */ disabled?: boolean; /** - * 【暂不支持】指定输入框展示值的格式 + * 【开发中】指定输入框展示值的格式 */ format?: InputFormatType; /** @@ -76,7 +76,6 @@ export interface TdInputProps { prefixIcon?: TNode; /** * 只读状态 - * @default false */ readonly?: boolean; /** From 1a5312bf3ae958e724c343f1ccb678831ec0deaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Sat, 22 Jun 2024 18:09:30 +0800 Subject: [PATCH 05/18] =?UTF-8?q?feat:=20=E6=98=BE=E7=A4=BA=E6=B8=85?= =?UTF-8?q?=E9=99=A4=E9=80=BB=E8=BE=91=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/input/input.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/input/input.tsx b/src/input/input.tsx index 019f249fd..ca89fb00c 100644 --- a/src/input/input.tsx +++ b/src/input/input.tsx @@ -160,7 +160,11 @@ export default defineComponent({ ); }; const readerClearable = () => { - if (props.clearable && innerValue.value && innerValue.value.length > 0) { + if (!props.clearable || !focused.value) return null; + + if (!props.disabled || !props.readonly) return null; + + if (innerValue.value && innerValue.value.length > 0) { return (
From ce7dfdea5538cca356620dc19dbbe69c250a2242 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Sat, 22 Jun 2024 19:33:25 +0800 Subject: [PATCH 06/18] fix(radio): disabled priority --- src/radio/props.ts | 2 +- src/radio/radio-group-props.ts | 7 +++++-- src/radio/radio.en-US.md | 2 +- src/radio/radio.md | 4 ++-- src/radio/radio.tsx | 6 +----- src/radio/type.ts | 4 ++-- 6 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/radio/props.ts b/src/radio/props.ts index 6b4118202..c8bbda89b 100644 --- a/src/radio/props.ts +++ b/src/radio/props.ts @@ -41,7 +41,7 @@ export default { default: { type: [String, Function] as PropType, }, - /** 是否为禁用态。如果存在父组件 RadioGroup,默认值由 RadioGroup.disabled 控制。Radio.disabled 优先级高于 RadioGroup.disabled */ + /** 是否为禁用态。如果存在父组件 RadioGroup,默认值由 RadioGroup.disabled 控制。优先级:Radio.disabled > RadioGroup.disabled > Form.disabled */ disabled: { type: Boolean, default: undefined, diff --git a/src/radio/radio-group-props.ts b/src/radio/radio-group-props.ts index a1b8e389d..c1f66ff69 100644 --- a/src/radio/radio-group-props.ts +++ b/src/radio/radio-group-props.ts @@ -12,8 +12,11 @@ export default { allowUncheck: Boolean, /** 是否开启无边框模式;优先级低于 Radio */ borderless: Boolean, - /** 是否禁用全部子单选框。默认为 false。RadioGroup.disabled 优先级低于 Radio.disabled */ - disabled: Boolean, + /** 是否禁用全部子单选框。优先级:Radio.disabled > RadioGroup.disabled > Form.disabled */ + disabled: { + type: Boolean, + default: undefined, + }, /** 自定义选中图标和非选中图标。示例:[选中态图标地址,非选中态图标地址]。使用 String 时,值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标 */ icon: { type: [String, Array] as PropType, diff --git a/src/radio/radio.en-US.md b/src/radio/radio.en-US.md index 46ba07523..63c9a397d 100644 --- a/src/radio/radio.en-US.md +++ b/src/radio/radio.en-US.md @@ -37,7 +37,7 @@ name | type | default | description | required -- | -- | -- | -- | -- allowUncheck | Boolean | false | \- | N borderless | Boolean | false | \- | N -disabled | Boolean | - | \- | N +disabled | Boolean | undefined | \- | N icon | String / Array | 'circle' | Typescript:`'circle' \| 'line' \| 'dot' \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N keys | Object | - | Typescript:`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N name | String | - | \- | N diff --git a/src/radio/radio.md b/src/radio/radio.md index 5b50e7642..db34400ed 100644 --- a/src/radio/radio.md +++ b/src/radio/radio.md @@ -14,7 +14,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 | 是否为禁用态。如果存在父组件 RadioGroup,默认值由 RadioGroup.disabled 控制。Radio.disabled 优先级高于 RadioGroup.disabled | N +disabled | Boolean | undefined | 是否为禁用态。如果存在父组件 RadioGroup,默认值由 RadioGroup.disabled 控制。优先级:Radio.disabled > RadioGroup.disabled > Form.disabled | N icon | String / Array | 'circle' | 自定义选中图标和非选中图标。示例:[选中态图标地址,非选中态图标地址]。使用 String 时,值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标、值为 'none' 则表示没有图标。TS 类型:`'circle' \| 'line' \| 'dot' \| 'none' \|Array`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N label | String / Slot / Function | - | 主文案。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N maxContentRow | Number | 5 | 内容最大行数限制 | N @@ -37,7 +37,7 @@ change | `(checked: boolean, context: { e: Event })` | 选中状态变化时触 -- | -- | -- | -- | -- allowUncheck | Boolean | false | 是否允许取消选中 | N borderless | Boolean | false | 是否开启无边框模式;优先级低于 Radio | N -disabled | Boolean | - | 是否禁用全部子单选框。默认为 false。RadioGroup.disabled 优先级低于 Radio.disabled | N +disabled | Boolean | undefined | 是否禁用全部子单选框。优先级:Radio.disabled > RadioGroup.disabled > Form.disabled | N icon | String / Array | 'circle' | 自定义选中图标和非选中图标。示例:[选中态图标地址,非选中态图标地址]。使用 String 时,值为 circle 表示填充型图标、值为 line 表示描边型图标、值为 dot 表示圆点图标。TS 类型:`'circle' \| 'line' \| 'dot' \| Array`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型:`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N name | String | - | HTML 元素原生属性 | N diff --git a/src/radio/radio.tsx b/src/radio/radio.tsx index e5bb17527..4bbed49d1 100644 --- a/src/radio/radio.tsx +++ b/src/radio/radio.tsx @@ -34,12 +34,8 @@ export default defineComponent({ // extend radioGroup disabled props const groupDisabled = computed(() => rootGroupProps?.disabled); - const formDisabled = useFormDisabled(groupDisabled); + const isDisabled = useFormDisabled(groupDisabled); - const isDisabled = computed(() => { - if (formDisabled.value == null && 'disabled' in rootGroupProps) return rootGroupProps.disabled; - return formDisabled.value; - }); const radioChecked = computed(() => innerChecked.value || props.value === rootGroupValue?.value); const finalBorderless = computed(() => { if (props.borderless == null && 'borderless' in rootGroupProps) return rootGroupProps.borderless; diff --git a/src/radio/type.ts b/src/radio/type.ts index abbe2ca78..252f0447a 100644 --- a/src/radio/type.ts +++ b/src/radio/type.ts @@ -49,7 +49,7 @@ export interface TdRadioProps { */ default?: string | TNode; /** - * 是否为禁用态。如果存在父组件 RadioGroup,默认值由 RadioGroup.disabled 控制。Radio.disabled 优先级高于 RadioGroup.disabled + * 是否为禁用态。如果存在父组件 RadioGroup,默认值由 RadioGroup.disabled 控制。优先级:Radio.disabled > RadioGroup.disabled > Form.disabled */ disabled?: boolean; /** @@ -103,7 +103,7 @@ export interface TdRadioGroupProps { */ borderless?: boolean; /** - * 是否禁用全部子单选框。默认为 false。RadioGroup.disabled 优先级低于 Radio.disabled + * 是否禁用全部子单选框。优先级:Radio.disabled > RadioGroup.disabled > Form.disabled */ disabled?: boolean; /** From 735b1683d0ed04b6eb5ae0c2ab6d0889bd64ead1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Sat, 22 Jun 2024 19:41:16 +0800 Subject: [PATCH 07/18] fix(rate): disabled priority --- src/rate/props.ts | 16 +++++----------- src/rate/rate.en-US.md | 7 ++++--- src/rate/rate.md | 11 ++++++----- src/rate/rate.tsx | 21 ++++++++++----------- src/rate/type.ts | 7 +------ 5 files changed, 26 insertions(+), 36 deletions(-) diff --git a/src/rate/props.ts b/src/rate/props.ts index eaffefa50..a280bbdbe 100644 --- a/src/rate/props.ts +++ b/src/rate/props.ts @@ -10,7 +10,7 @@ import { PropType } from 'vue'; export default { /** 是否允许半选 */ allowHalf: Boolean, - /** 评分图标的颜色,样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色,示例:[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色,[选中颜色,未选中颜色]。示例:['#ED7B2F', '#E3E6EB']。 */ + /** 评分图标的颜色,样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色,示例:[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色,[选中颜色,未选中颜色]。示例:['#ED7B2F', '#E3E6EB'] */ color: { type: [String, Array] as PropType, default: '#ED7B2F', @@ -21,7 +21,10 @@ export default { default: 5, }, /** 是否禁用评分 */ - disabled: Boolean, + disabled: { + type: Boolean, + default: undefined, + }, /** 评分图标的间距 */ gap: { type: Number, @@ -57,15 +60,6 @@ export default { type: Number, default: 0, }, - /** 已废弃。形状类型,有描边类型和填充类型两种 */ - variant: { - type: String as PropType, - default: 'outline' as TdRateProps['variant'], - validator(val: TdRateProps['variant']): boolean { - if (!val) return true; - return ['outline', 'filled'].includes(val); - }, - }, /** 评分数改变时触发 */ onChange: Function as PropType, }; diff --git a/src/rate/rate.en-US.md b/src/rate/rate.en-US.md index d19cabb8d..d83338446 100644 --- a/src/rate/rate.en-US.md +++ b/src/rate/rate.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Rate Props name | type | default | description | required @@ -8,7 +9,7 @@ name | type | default | description | required allowHalf | Boolean | false | \- | N color | String / Array | '#ED7B2F' | Typescript:`string \| Array` | N count | Number | 5 | \- | N -disabled | Boolean | - | \- | N +disabled | Boolean | undefined | \- | N gap | Number | 8 | \- | N icon | Array / Slot / Function | - | Typescript:`Array`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N showText | Boolean | false | \- | N @@ -24,8 +25,8 @@ name | params | description -- | -- | -- change | `(value: number)` | \- - ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- @@ -37,4 +38,4 @@ Name | Default Value | Description --td-rate-text-active-font-weight | 600 | - --td-rate-text-color | @font-gray-4 | - --td-rate-text-font-size | @font-size-m | - ---td-rate-unselected-color | @bg-color-secondarycomponent | - +--td-rate-unselected-color | @bg-color-secondarycomponent | - \ No newline at end of file diff --git a/src/rate/rate.md b/src/rate/rate.md index 6c562a11e..7c197545f 100644 --- a/src/rate/rate.md +++ b/src/rate/rate.md @@ -1,14 +1,15 @@ :: BASE_DOC :: ## API + ### Rate Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- allowHalf | Boolean | false | 是否允许半选 | N -color | String / Array | '#ED7B2F' | 评分图标的颜色,样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色,示例:[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色,[选中颜色,未选中颜色]。示例:['#ED7B2F', '#E3E6EB']。。TS 类型:`string \| Array` | N +color | String / Array | '#ED7B2F' | 评分图标的颜色,样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色,示例:[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色,[选中颜色,未选中颜色]。示例:['#ED7B2F', '#E3E6EB']。TS 类型:`string \| Array` | N count | Number | 5 | 评分的数量 | N -disabled | Boolean | - | 是否禁用评分 | N +disabled | Boolean | undefined | 是否禁用评分 | N gap | Number | 8 | 评分图标的间距 | N icon | Array / Slot / Function | - | 自定义评分图标,[选中图标,未选中图标]。TS 类型:`Array`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N showText | Boolean | false | 是否显示对应的辅助文字 | N @@ -24,8 +25,8 @@ onChange | Function | | TS 类型:`(value: number) => void`
评分数改 -- | -- | -- change | `(value: number)` | 评分数改变时触发 - ### CSS Variables + 组件提供了下列 CSS 变量,可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- @@ -37,4 +38,4 @@ change | `(value: number)` | 评分数改变时触发 --td-rate-text-active-font-weight | 600 | - --td-rate-text-color | @font-gray-4 | - --td-rate-text-font-size | @font-size-m | - ---td-rate-unselected-color | @bg-color-secondarycomponent | - +--td-rate-unselected-color | @bg-color-secondarycomponent | - \ No newline at end of file diff --git a/src/rate/rate.tsx b/src/rate/rate.tsx index 23a5c74e0..5a0e1ea87 100644 --- a/src/rate/rate.tsx +++ b/src/rate/rate.tsx @@ -1,7 +1,7 @@ import { computed, defineComponent, ref, h } from 'vue'; import { StarFilledIcon } from 'tdesign-icons-vue-next'; import { onClickOutside } from '@vueuse/core'; -import rateProps from './props'; +import props from './props'; import config from '../config'; import { TdRateProps } from './type'; import { useDefault } from '../shared'; @@ -10,17 +10,16 @@ import { useConfig } from '../config-provider/useConfig'; import { usePrefixClass } from '../hooks/useClass'; const { prefix } = config; -const name = `${prefix}-rate`; export default defineComponent({ - name, - props: rateProps, + name: `${prefix}-rate`, + props, setup(props, context) { const rateClass = usePrefixClass('rate'); const { t, globalConfig } = useConfig('rate'); - const disabled = useFormDisabled(); + const isDisabled = useFormDisabled(); - const rateWrapper = ref(null); + const rateWrapper = ref(); const [actualVal] = useDefault(props, context.emit, 'value', 'change'); const rateText = computed(() => { if (Array.isArray(props.texts) && props.texts.length > 0) { @@ -82,7 +81,7 @@ export default defineComponent({ return unSelect || startComponent; }; - const rootClasses = computed(() => [`${rateClass.value}`, { [`${rateClass.value}--disabled`]: disabled.value }]); + const rootClasses = computed(() => [`${rateClass.value}`, { [`${rateClass.value}--disabled`]: isDisabled.value }]); const classes = (n: number) => { const classPrefix = `${rateClass.value}__icon`; @@ -127,7 +126,7 @@ export default defineComponent({ }; const onClick = (event: MouseEvent) => { - if (disabled.value) return; + if (isDisabled.value) return; // if (Date.now() - touchStartTime.value > 200) return; getRect(event, 'tap'); }; @@ -138,19 +137,19 @@ export default defineComponent({ }; const onTouchstart = (e: TouchEvent) => { - if (disabled.value) return; + if (isDisabled.value) return; touchStartTime.value = Date.now(); touchEnd.value = false; }; const onTouchmove = (e: TouchEvent) => { - if (disabled.value) return; + if (isDisabled.value) return; if (Date.now() - touchStartTime.value <= 200) return; onTouch(e, 'move'); }; const onTouchEnd = (e: TouchEvent) => { - if (disabled.value) return; + if (isDisabled.value) return; touchEnd.value = true; hideTips(); }; diff --git a/src/rate/type.ts b/src/rate/type.ts index 187834310..2516b819c 100644 --- a/src/rate/type.ts +++ b/src/rate/type.ts @@ -13,7 +13,7 @@ export interface TdRateProps { */ allowHalf?: boolean; /** - * 评分图标的颜色,样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色,示例:[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色,[选中颜色,未选中颜色]。示例:['#ED7B2F', '#E3E6EB']。 + * 评分图标的颜色,样式中默认为 #ED7B2F。一个值表示设置选中高亮的五角星颜色,示例:[选中颜色]。数组则表示分别设置 选中高亮的五角星颜色 和 未选中暗灰的五角星颜色,[选中颜色,未选中颜色]。示例:['#ED7B2F', '#E3E6EB'] * @default '#ED7B2F' */ color?: string | Array; @@ -65,11 +65,6 @@ export interface TdRateProps { * @default 0 */ modelValue?: number; - /** - * 已废弃。形状类型,有描边类型和填充类型两种 - * @default outline - */ - variant?: 'outline' | 'filled'; /** * 评分数改变时触发 */ From c6d334b8f86b2719234d9a2a44ef6c9c56d3e0db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Sat, 22 Jun 2024 20:03:31 +0800 Subject: [PATCH 08/18] fix(slider): disabled priority --- src/slider/props.ts | 5 ++++- src/slider/slider.en-US.md | 2 +- src/slider/slider.md | 2 +- src/slider/slider.tsx | 25 ++++++++++++------------- src/slider/type.ts | 1 - 5 files changed, 18 insertions(+), 17 deletions(-) diff --git a/src/slider/props.ts b/src/slider/props.ts index ae1113df2..b052101e4 100644 --- a/src/slider/props.ts +++ b/src/slider/props.ts @@ -9,7 +9,10 @@ import { PropType } from 'vue'; export default { /** 是否禁用组件 */ - disabled: Boolean, + disabled: { + type: Boolean, + default: undefined, + }, /** 滑块当前值文本。
值为 true 显示默认文案;值为 false 不显示滑块当前值文本;
值为 `${value}%` 则表示组件会根据占位符渲染文案;
值类型为函数时,参数 `value` 标识滑块值,参数 `position=start` 表示范围滑块的起始值,参数 `position=end` 表示范围滑块的终点值 */ label: { type: [String, Boolean, Function] as PropType, diff --git a/src/slider/slider.en-US.md b/src/slider/slider.en-US.md index 248ce2557..7dca5f35b 100644 --- a/src/slider/slider.en-US.md +++ b/src/slider/slider.en-US.md @@ -6,7 +6,7 @@ name | type | default | description | required -- | -- | -- | -- | -- -disabled | Boolean | false | \- | N +disabled | Boolean | undefined | \- | N label | String / Boolean / Slot / Function | false | Typescript:`string \| boolean \| TNode<{ value: SliderValue; position?: 'start' \| 'end' }>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N marks | Object / Array | - | Typescript:`Array \| SliderMarks` `interface SliderMarks { [mark: number]: string \| TNode<{ value: number }> }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N max | Number | 100 | \- | N diff --git a/src/slider/slider.md b/src/slider/slider.md index a9cdef55e..561207fff 100644 --- a/src/slider/slider.md +++ b/src/slider/slider.md @@ -6,7 +6,7 @@ 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -disabled | Boolean | false | 是否禁用组件 | N +disabled | Boolean | undefined | 是否禁用组件 | N label | String / Boolean / Slot / Function | false | 滑块当前值文本。
值为 true 显示默认文案;值为 false 不显示滑块当前值文本;
值为 `${value}%` 则表示组件会根据占位符渲染文案;
值类型为函数时,参数 `value` 标识滑块值,参数 `position=start` 表示范围滑块的起始值,参数 `position=end` 表示范围滑块的终点值。TS 类型:`string \| boolean \| TNode<{ value: SliderValue; position?: 'start' \| 'end' }>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N marks | Object / Array | - | 刻度标记,示例:[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => }`。TS 类型:`Array \| SliderMarks` `interface SliderMarks { [mark: number]: string \| TNode<{ value: number }> }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N max | Number | 100 | 滑块范围最大值 | N diff --git a/src/slider/slider.tsx b/src/slider/slider.tsx index 8d7f9dde5..0057467b6 100644 --- a/src/slider/slider.tsx +++ b/src/slider/slider.tsx @@ -1,8 +1,7 @@ -import { ref, toRefs, computed, reactive, defineComponent, getCurrentInstance, watch, onMounted } from 'vue'; +import { ref, toRefs, computed, reactive, defineComponent, watch, onMounted } from 'vue'; import config from '../config'; import props from './props'; import { useVModel } from '../shared/useVModel'; -import { renderTNode } from '../shared'; import { trimSingleValue, trimValue } from './tool'; import type { SliderValue } from './type'; import { useFormDisabled } from '../form/hooks'; @@ -36,7 +35,7 @@ export default defineComponent({ props, setup(props) { const sliderClass = usePrefixClass('slider'); - const disabled = useFormDisabled(); + const isDisabled = useFormDisabled(); const sliderLine = ref(); const leftDot = ref(); const rightDot = ref(); @@ -76,7 +75,7 @@ export default defineComponent({ `${sliderClass.value}`, { [`${sliderClass.value}--top`]: props.label || state.scaleTextArray.length, - [`${sliderClass.value}--disabled`]: disabled.value, + [`${sliderClass.value}--disabled`]: isDisabled.value, [`${sliderClass.value}--range`]: props.range, }, ]); @@ -85,7 +84,7 @@ export default defineComponent({ `${sliderClass.value}__bar`, `${sliderClass.value}__bar--${props.theme}`, { - [`${sliderClass.value}__bar--disabled`]: disabled.value, + [`${sliderClass.value}__bar--disabled`]: isDisabled.value, [`${sliderClass.value}__bar--marks`]: state.isScale && props.theme === 'capsule', }, ]); @@ -139,7 +138,7 @@ export default defineComponent({ const onTouchEnd = () => {}; const onSingleDotMove = (e: TouchEvent) => { - if (disabled.value) return; + if (isDisabled.value) return; const [{ pageX }] = e.changedTouches; const value = convertPosToValue(pageX - state.initialLeft); changeValue(calcByStep(value)); @@ -194,7 +193,7 @@ export default defineComponent({ }; const onTouchMoveLeft = (e: TouchEvent) => { - if (disabled.value) return; + if (isDisabled.value) return; const [{ pageX }] = e.changedTouches; const currentLeft = pageX - state.initialLeft; const newData = [...(innerValue.value as number[])]; @@ -204,7 +203,7 @@ export default defineComponent({ }; const onTouchMoveRight = (e: TouchEvent) => { - if (disabled.value) return; + if (isDisabled.value) return; const [{ pageX }] = e.changedTouches; const currentRight = -(pageX - state.initialRight); const newData = [...(innerValue.value as number[])]; @@ -215,7 +214,7 @@ export default defineComponent({ const handleSingleClick = (e: MouseEvent) => { e.stopPropagation(); - if (disabled.value) return; + if (isDisabled.value) return; if (!sliderLine.value) return; const currentLeft = e.clientX - state.initialLeft; const value = convertPosToValue(currentLeft); @@ -224,7 +223,7 @@ export default defineComponent({ const handleRangeClick = (e: MouseEvent) => { e.stopPropagation(); - if (disabled.value) return; + if (isDisabled.value) return; const halfBlock = props.theme === 'capsule' ? Number(state.blockSize) / 2 : 0; const currentLeft = e.clientX - state.initialLeft; if (currentLeft < 0 || currentLeft > state.maxRange + Number(state.blockSize)) return; @@ -307,7 +306,7 @@ export default defineComponent({ [`${sliderClass.value}__scale-item--active`]: !props.range && Number(innerValue.value) >= item.val, [`${sliderClass.value}__scale-item--active`]: props.range && state.dotTopValue[1] >= item.val && item.val >= state.dotTopValue[0], - [`${sliderClass.value}__scale-item--disabled`]: disabled.value, + [`${sliderClass.value}__scale-item--disabled`]: isDisabled.value, [`${sliderClass.value}__scale-item--hidden`]: ((index === 0 || index === state.scaleArray.length - 1) && props.theme === 'capsule') || innerValue.value === item.val, @@ -330,7 +329,7 @@ export default defineComponent({ `${sliderClass.value}__line`, `${sliderClass.value}__line--${props.theme}`, `${sliderClass.value}__line--single`, - { [`${sliderClass.value}__line--disabled`]: disabled.value }, + { [`${sliderClass.value}__line--disabled`]: isDisabled.value }, ]} style={`width: ${lineBarWidth.value}px`} > @@ -362,7 +361,7 @@ export default defineComponent({ class={[ `${sliderClass.value}__line`, `${sliderClass.value}__line--${props.theme}`, - { [`${sliderClass.value}__line--disabled`]: disabled.value }, + { [`${sliderClass.value}__line--disabled`]: isDisabled.value }, ]} style={`left: ${state.lineLeft}px; right: ${state.lineRight}px`} > diff --git a/src/slider/type.ts b/src/slider/type.ts index 7296c0d21..60b8bcf7d 100644 --- a/src/slider/type.ts +++ b/src/slider/type.ts @@ -9,7 +9,6 @@ import { TNode } from '../common'; export interface TdSliderProps { /** * 是否禁用组件 - * @default false */ disabled?: boolean; /** From dd8b7722c47a9b5e4f8294ddc5aa19ebb176ee73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Sat, 22 Jun 2024 20:21:51 +0800 Subject: [PATCH 09/18] fix(stepper): disabled priority --- src/stepper/props.ts | 5 ++++- src/stepper/stepper.en-US.md | 2 +- src/stepper/stepper.md | 2 +- src/stepper/type.ts | 1 - 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/stepper/props.ts b/src/stepper/props.ts index 357c294d6..0a212cf89 100644 --- a/src/stepper/props.ts +++ b/src/stepper/props.ts @@ -11,7 +11,10 @@ export default { /** 禁用输入框 */ disableInput: Boolean, /** 禁用全部操作 */ - disabled: Boolean, + disabled: { + type: Boolean, + default: undefined, + }, /** 输入框宽度 */ inputWidth: { type: Number, diff --git a/src/stepper/stepper.en-US.md b/src/stepper/stepper.en-US.md index 0ab2571b9..4a71ee796 100644 --- a/src/stepper/stepper.en-US.md +++ b/src/stepper/stepper.en-US.md @@ -7,7 +7,7 @@ name | type | default | description | required -- | -- | -- | -- | -- disableInput | Boolean | false | \- | N -disabled | Boolean | false | \- | N +disabled | Boolean | undefined | \- | N inputWidth | Number | - | \- | N integer | Boolean | true | \- | N max | Number | 100 | \- | N diff --git a/src/stepper/stepper.md b/src/stepper/stepper.md index 1084634f9..0f4bac5f8 100644 --- a/src/stepper/stepper.md +++ b/src/stepper/stepper.md @@ -7,7 +7,7 @@ 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- disableInput | Boolean | false | 禁用输入框 | N -disabled | Boolean | false | 禁用全部操作 | N +disabled | Boolean | undefined | 禁用全部操作 | N inputWidth | Number | - | 输入框宽度 | N integer | Boolean | true | 是否整型 | N max | Number | 100 | 最大值 | N diff --git a/src/stepper/type.ts b/src/stepper/type.ts index f4550f546..3fb68698c 100644 --- a/src/stepper/type.ts +++ b/src/stepper/type.ts @@ -14,7 +14,6 @@ export interface TdStepperProps { disableInput?: boolean; /** * 禁用全部操作 - * @default false */ disabled?: boolean; /** From 352373fd94968c3ed4fc7e6e7f65083222fde8d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Sat, 22 Jun 2024 20:24:04 +0800 Subject: [PATCH 10/18] fix(switch): disabled priority --- src/switch/props.ts | 7 +++++-- src/switch/switch.en-US.md | 2 +- src/switch/switch.md | 2 +- src/switch/type.ts | 2 +- 4 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/switch/props.ts b/src/switch/props.ts index 17b72e007..f43717695 100644 --- a/src/switch/props.ts +++ b/src/switch/props.ts @@ -12,8 +12,11 @@ export default { customValue: { type: Array as PropType, }, - /** 是否禁用组件 */ - disabled: Boolean, + /** 是否禁用组件。优先级:Switch.disabled > Form.disabled */ + disabled: { + type: Boolean, + default: undefined, + }, /** 开关的图标;[打开时的图标,关闭时的图标] */ icon: { type: Array as PropType, diff --git a/src/switch/switch.en-US.md b/src/switch/switch.en-US.md index 27ce4d628..5937e5385 100644 --- a/src/switch/switch.en-US.md +++ b/src/switch/switch.en-US.md @@ -7,7 +7,7 @@ name | type | default | description | required -- | -- | -- | -- | -- customValue | Array | - | Typescript:`Array` | N -disabled | Boolean | - | \- | N +disabled | Boolean | undefined | \- | N icon | Array | [] | Typescript:`TNode[]`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N label | Array | [] | Typescript:`string[]` | N loading | Boolean | false | \- | N diff --git a/src/switch/switch.md b/src/switch/switch.md index 7f43d3aab..bcc6e9478 100644 --- a/src/switch/switch.md +++ b/src/switch/switch.md @@ -7,7 +7,7 @@ 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- customValue | Array | - | 用于自定义开关的值,[打开时的值,关闭时的值]。默认为 [true, false]。示例:[1, 0]、['open', 'close']。TS 类型:`Array` | N -disabled | Boolean | - | 是否禁用组件 | N +disabled | Boolean | undefined | 是否禁用组件。优先级:Switch.disabled > Form.disabled | N icon | Array | [] | 开关的图标;[打开时的图标,关闭时的图标]。TS 类型:`TNode[]`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N label | Array | [] | 开关的标签;[打开时的标签,关闭时的标签]。TS 类型:`string[]` | N loading | Boolean | false | 是否处于加载中状态 | N diff --git a/src/switch/type.ts b/src/switch/type.ts index 4018195f2..173ea99d5 100644 --- a/src/switch/type.ts +++ b/src/switch/type.ts @@ -12,7 +12,7 @@ export interface TdSwitchProps { */ customValue?: Array; /** - * 是否禁用组件 + * 是否禁用组件。优先级:Switch.disabled > Form.disabled */ disabled?: boolean; /** From ed0a76234a8289278cc88d1fd66cf00bb43ae5bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Sat, 22 Jun 2024 20:24:24 +0800 Subject: [PATCH 11/18] fix(switch): disabled priority --- src/switch/switch.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/switch/switch.tsx b/src/switch/switch.tsx index 05bd6d5d9..51a4a934d 100644 --- a/src/switch/switch.tsx +++ b/src/switch/switch.tsx @@ -2,16 +2,16 @@ import { computed, defineComponent } from 'vue'; import TLoading from '../loading'; import { useToggle, useDefault } from '../shared'; import config from '../config'; -import SwitchProps from './props'; +import props from './props'; import { SwitchValue, TdSwitchProps } from './type'; import { useFormDisabled } from '../form/hooks'; import { usePrefixClass } from '../hooks/useClass'; const { prefix } = config; -const name = `${prefix}-switch`; + export default defineComponent({ - name, - props: SwitchProps, + name: `${prefix}-switch`, + props, setup(props, context) { const switchClass = usePrefixClass('switch'); From 6ac21c0bab9bd8772915ba6b643191aac9fdaf06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Sat, 22 Jun 2024 20:29:48 +0800 Subject: [PATCH 12/18] fix(textarea): disabled priority --- src/textarea/props.ts | 5 ++++- src/textarea/textarea.en-US.md | 6 +++--- src/textarea/textarea.md | 6 +++--- src/textarea/textarea.tsx | 7 +++---- src/textarea/type.ts | 1 - 5 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src/textarea/props.ts b/src/textarea/props.ts index ab16fdd0c..ef5b90547 100644 --- a/src/textarea/props.ts +++ b/src/textarea/props.ts @@ -17,7 +17,10 @@ export default { /** 是否显示外边框 */ bordered: Boolean, /** 是否禁用文本框 */ - disabled: Boolean, + disabled: { + type: Boolean, + default: undefined, + }, /** 显示文本计数器,如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时, indicator无效 */ indicator: Boolean, /** 左侧文本 */ diff --git a/src/textarea/textarea.en-US.md b/src/textarea/textarea.en-US.md index 5a902434c..c1a7a6264 100644 --- a/src/textarea/textarea.en-US.md +++ b/src/textarea/textarea.en-US.md @@ -10,7 +10,7 @@ allowInputOverMax | Boolean | false | \- | N autofocus | Boolean | false | \- | N autosize | Boolean | false | \- | N bordered | Boolean | false | \- | N -disabled | Boolean | false | \- | N +disabled | Boolean | undefined | \- | N indicator | Boolean | false | \- | N label | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N layout | String | horizontal | options: vertical/horizontal | N @@ -19,8 +19,8 @@ maxlength | Number | - | \- | N name | String | - | \- | N placeholder | String | undefined | \- | N readonly | Boolean | false | \- | N -value | String / Number | - | `v-model` and `v-model:value` is supported。Typescript:`TextareaValue` `type TextareaValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/textarea/type.ts) | N -defaultValue | String / Number | - | uncontrolled property。Typescript:`TextareaValue` `type TextareaValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/textarea/type.ts) | N +value | String / Number | - | `v-model` and `v-model:value` is supported。Typescript:`TextareaValue` `type TextareaValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/textarea/type.ts) | N +defaultValue | String / Number | - | uncontrolled property。Typescript:`TextareaValue` `type TextareaValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/textarea/type.ts) | N onBlur | Function | | Typescript:`(value: TextareaValue, context: { e: FocusEvent }) => void`
| N onChange | Function | | Typescript:`(value: TextareaValue, context?: { e?: InputEvent }) => void`
| N onFocus | Function | | Typescript:`(value: TextareaValue, context : { e: FocusEvent }) => void`
| N diff --git a/src/textarea/textarea.md b/src/textarea/textarea.md index 72ca65395..f5ff1131a 100644 --- a/src/textarea/textarea.md +++ b/src/textarea/textarea.md @@ -10,7 +10,7 @@ allowInputOverMax | Boolean | false | 超出maxlength或maxcharacter之后是否 autofocus | Boolean | false | 自动聚焦,拉起键盘 | N autosize | Boolean | false | 是否自动增高,值为 autosize 时,style.height 不生效 | N bordered | Boolean | false | 是否显示外边框 | N -disabled | Boolean | false | 是否禁用文本框 | N +disabled | Boolean | undefined | 是否禁用文本框 | N indicator | Boolean | false | 显示文本计数器,如 0/140。当 `maxlength < 0 && maxcharacter < 0` 成立时, indicator无效 | N label | String / Slot / Function | - | 左侧文本。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N layout | String | horizontal | 标题输入框布局方式。可选项:vertical/horizontal | N @@ -19,8 +19,8 @@ maxlength | Number | - | 用户最多可以输入的字符个数 | N name | String | - | 名称,HTML 元素原生属性 | N placeholder | String | undefined | 占位符 | N readonly | Boolean | false | 只读状态 | N -value | String / Number | - | 文本框值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型:`TextareaValue` `type TextareaValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/textarea/type.ts) | N -defaultValue | String / Number | - | 文本框值。非受控属性。TS 类型:`TextareaValue` `type TextareaValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/textarea/type.ts) | N +value | String / Number | - | 文本框值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型:`TextareaValue` `type TextareaValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/textarea/type.ts) | N +defaultValue | String / Number | - | 文本框值。非受控属性。TS 类型:`TextareaValue` `type TextareaValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/textarea/type.ts) | N onBlur | Function | | TS 类型:`(value: TextareaValue, context: { e: FocusEvent }) => void`
失去焦点时触发 | N onChange | Function | | TS 类型:`(value: TextareaValue, context?: { e?: InputEvent }) => void`
输入内容变化时触发 | N onFocus | Function | | TS 类型:`(value: TextareaValue, context : { e: FocusEvent }) => void`
获得焦点时触发 | N diff --git a/src/textarea/textarea.tsx b/src/textarea/textarea.tsx index 7cede9b77..f0d06ccc7 100644 --- a/src/textarea/textarea.tsx +++ b/src/textarea/textarea.tsx @@ -1,7 +1,7 @@ import { computed, ref, onMounted, defineComponent, toRefs, nextTick, watch } from 'vue'; import { getCharacterLength, useVModel } from '../shared'; import config from '../config'; -import TextareaProps from './props'; +import props from './props'; import { TextareaValue } from './type'; import calcTextareaHeight from '../_common/js/utils/calcTextareaHeight'; import { useFormDisabled } from '../form/hooks'; @@ -9,11 +9,10 @@ import { usePrefixClass } from '../hooks/useClass'; import { useTNodeJSX } from '../hooks/tnode'; const { prefix } = config; -const name = `${prefix}-textarea`; export default defineComponent({ - name, - props: TextareaProps, + name: `${prefix}-textarea`, + props, setup(props, context) { const renderTNodeJSX = useTNodeJSX(); const disabled = useFormDisabled(); diff --git a/src/textarea/type.ts b/src/textarea/type.ts index cc72016cd..24523dd42 100644 --- a/src/textarea/type.ts +++ b/src/textarea/type.ts @@ -29,7 +29,6 @@ export interface TdTextareaProps { bordered?: boolean; /** * 是否禁用文本框 - * @default false */ disabled?: boolean; /** From 74972449c2e1297766dc7875300a24ab5c9e2d57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Sat, 22 Jun 2024 20:47:56 +0800 Subject: [PATCH 13/18] chore: snapshot update --- src/button/button.tsx | 4 ++-- .../__test__/__snapshots__/demo.test.jsx.snap | 2 +- src/config-provider/demos/other-en.vue | 2 +- .../__test__/__snapshots__/demo.test.jsx.snap | 3 +++ src/input/input.tsx | 2 +- .../__test__/__snapshots__/demo.test.jsx.snap | 18 ++++++++++++++++++ src/rate/demos/action.vue | 4 ++-- src/textarea/textarea.tsx | 6 +++--- 8 files changed, 31 insertions(+), 10 deletions(-) diff --git a/src/button/button.tsx b/src/button/button.tsx index b101331f4..3aa7ae659 100644 --- a/src/button/button.tsx +++ b/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` }} > diff --git a/src/col/__test__/__snapshots__/demo.test.jsx.snap b/src/col/__test__/__snapshots__/demo.test.jsx.snap index cb103cad4..9aa9c3bfd 100644 --- a/src/col/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/col/__test__/__snapshots__/demo.test.jsx.snap @@ -1,4 +1,4 @@ -// Vitest Snapshot v1 +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`Col > Col baseVue demo works fine 1`] = `
Rating
- +
Form horizontalVue demo works fine 1`] = `
Form mobileVue demo works fine 1`] = `
Form verticalVue demo works fine 1`] = `
{ if (!props.clearable || !focused.value) return null; - if (!props.disabled || !props.readonly) return null; + if (!isDisabled.value || !props.readonly) return null; if (innerValue.value && innerValue.value.length > 0) { return ( diff --git a/src/rate/__test__/__snapshots__/demo.test.jsx.snap b/src/rate/__test__/__snapshots__/demo.test.jsx.snap index 1fa63aa65..a5a1adf00 100644 --- a/src/rate/__test__/__snapshots__/demo.test.jsx.snap +++ b/src/rate/__test__/__snapshots__/demo.test.jsx.snap @@ -338,6 +338,7 @@ exports[`Rate > Rate baseVue demo works fine 1`] = `
Rate colorVue demo works fine 1`] = `
Rate countVue demo works fine 1`] = `
Rate mobileVue demo works fine 1`] = `
Rate mobileVue demo works fine 1`] = `
Rate mobileVue demo works fine 1`] = `
Rate mobileVue demo works fine 1`] = `
Rate mobileVue demo works fine 1`] = `
Rate mobileVue demo works fine 1`] = `
Rate mobileVue demo works fine 1`] = `
Rate mobileVue demo works fine 1`] = `
Rate mobileVue demo works fine 1`] = `
Rate showTextVue demo works fine 1`] = `
Rate showTextVue demo works fine 1`] = `
Rate showTextVue demo works fine 1`] = `
Rate sizeVue demo works fine 1`] = `
Rate sizeVue demo works fine 1`] = `
Rate specialVue demo works fine 1`] = `
只可选全星时

点击或滑动
- +

可选半星时

点击或滑动
- +
diff --git a/src/textarea/textarea.tsx b/src/textarea/textarea.tsx index f0d06ccc7..52f34099c 100644 --- a/src/textarea/textarea.tsx +++ b/src/textarea/textarea.tsx @@ -15,7 +15,7 @@ export default defineComponent({ props, setup(props, context) { const renderTNodeJSX = useTNodeJSX(); - const disabled = useFormDisabled(); + const isDisabled = useFormDisabled(); const textareaClass = usePrefixClass('textarea'); @@ -29,7 +29,7 @@ export default defineComponent({ const textareaInnerClasses = computed(() => [ `${textareaClass.value}__wrapper-inner`, { - [`${textareaClass.value}--disabled`]: disabled.value, + [`${textareaClass.value}--disabled`]: isDisabled.value, [`${textareaClass.value}--readonly`]: props.readonly, }, ]); @@ -153,7 +153,7 @@ export default defineComponent({ style={textareaStyle.value} name={props.name} maxlength={props.maxlength} - disabled={props.disabled} + disabled={isDisabled.value} placeholder={props.placeholder} readonly={props.readonly} onFocus={handleFocus} From ac3a6d7ec0de1ca7ddd7eb28f2e3b12029b607fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Sat, 22 Jun 2024 21:03:10 +0800 Subject: [PATCH 14/18] fix: useFormDisabled --- src/form/__test__/index.test.jsx | 2 +- src/form/hooks.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/form/__test__/index.test.jsx b/src/form/__test__/index.test.jsx index 21290a090..57c8d26ad 100644 --- a/src/form/__test__/index.test.jsx +++ b/src/form/__test__/index.test.jsx @@ -653,7 +653,7 @@ describe('form', () => { await wrapper.setProps({ disabled: true }); extendedDisabled.value = false; - expect(actualDisabled.value).toBeTruthy(); + expect(actualDisabled.value).toBeFalsy(); }); }); }); diff --git a/src/form/hooks.ts b/src/form/hooks.ts index 7fd79ed0a..6226dbec9 100644 --- a/src/form/hooks.ts +++ b/src/form/hooks.ts @@ -22,11 +22,11 @@ export function useFormDisabled(extend?: Ref) { } // 组件组 if (isBoolean(extend?.value)) { - return propsDisabled.value; + return extend.value; } // 表单 if (isBoolean(disabled?.value)) { - return disabled?.value; + return disabled.value; } return false; }); From 46bace2c5a49a9ff555ffcfd85048817f4fcc5f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Sat, 22 Jun 2024 21:11:41 +0800 Subject: [PATCH 15/18] fix(checkbox): disabled priority --- src/checkbox/checkbox-group-props.ts | 7 +++++-- src/checkbox/checkbox.en-US.md | 10 ++++++---- src/checkbox/checkbox.md | 14 ++++++++------ src/checkbox/checkbox.tsx | 6 ++++-- src/checkbox/props.ts | 4 ++-- src/checkbox/type.ts | 6 +++--- 6 files changed, 28 insertions(+), 19 deletions(-) diff --git a/src/checkbox/checkbox-group-props.ts b/src/checkbox/checkbox-group-props.ts index 04459fe30..a5362a203 100644 --- a/src/checkbox/checkbox-group-props.ts +++ b/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, diff --git a/src/checkbox/checkbox.en-US.md b/src/checkbox/checkbox.en-US.md index 2c3f10d0e..5275649c3 100644 --- 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 @@ -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`
| 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` `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)。
`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`
- ### 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 | - \ No newline at end of file diff --git a/src/checkbox/checkbox.md b/src/checkbox/checkbox.md index 58ae84770..89633e553 100644 --- a/src/checkbox/checkbox.md +++ b/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`。[通用类型定义](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` `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)。
`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`
- ### 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 | - \ No newline at end of file diff --git a/src/checkbox/checkbox.tsx b/src/checkbox/checkbox.tsx index a5ca14391..34acbc4b7 100644 --- a/src/checkbox/checkbox.tsx +++ b/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(() => { 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) => { diff --git a/src/checkbox/props.ts b/src/checkbox/props.ts index a3ebfc7d2..8386954ea 100644 --- a/src/checkbox/props.ts +++ b/src/checkbox/props.ts @@ -36,7 +36,7 @@ export default { default: { type: [String, Function] as PropType, }, - /** 是否禁用组件。如果父组件存在 CheckboxGroup,默认值由 CheckboxGroup.disabled 控制。Checkbox.disabled 优先级高于 CheckboxGroup.disabled */ + /** 是否禁用组件。如果父组件存在 CheckboxGroup,默认值由 CheckboxGroup.disabled 控制。优先级:Checkbox.disabled > CheckboxGroup.disabled > Form.disabled */ disabled: { type: Boolean, default: undefined, @@ -76,7 +76,7 @@ export default { return ['left', 'right'].includes(val); }, }, - /** 只读状态 */ + /** 【暂不支持】只读状态 */ readonly: Boolean, /** 多选框的值 */ value: { diff --git a/src/checkbox/type.ts b/src/checkbox/type.ts index 7af8550ee..383c901be 100644 --- a/src/checkbox/type.ts +++ b/src/checkbox/type.ts @@ -45,7 +45,7 @@ export interface TdCheckboxProps { */ default?: string | TNode; /** - * 是否禁用组件。如果父组件存在 CheckboxGroup,默认值由 CheckboxGroup.disabled 控制。Checkbox.disabled 优先级高于 CheckboxGroup.disabled + * 是否禁用组件。如果父组件存在 CheckboxGroup,默认值由 CheckboxGroup.disabled 控制。优先级:Checkbox.disabled > CheckboxGroup.disabled > Form.disabled */ disabled?: boolean; /** @@ -83,7 +83,7 @@ export interface TdCheckboxProps { */ placement?: 'left' | 'right'; /** - * 只读状态 + * 【暂不支持】只读状态 * @default false */ readonly?: boolean; @@ -99,7 +99,7 @@ export interface TdCheckboxProps { export interface TdCheckboxGroupProps { /** - * 是否禁用组件,默认为 false。CheckboxGroup.disabled 优先级低于 Checkbox.disabled + * 是否禁用组件。优先级:Form.disabled < CheckboxGroup.disabled < Checkbox.disabled */ disabled?: boolean; /** From 1bf0a60fcbb47dec490bb01a21398ab0990dfffa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Sat, 22 Jun 2024 21:51:21 +0800 Subject: [PATCH 16/18] fix(input): clearable --- src/input/input.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/input/input.tsx b/src/input/input.tsx index ce85dd58c..019f249fd 100644 --- a/src/input/input.tsx +++ b/src/input/input.tsx @@ -160,11 +160,7 @@ export default defineComponent({ ); }; const readerClearable = () => { - if (!props.clearable || !focused.value) return null; - - if (!isDisabled.value || !props.readonly) return null; - - if (innerValue.value && innerValue.value.length > 0) { + if (props.clearable && innerValue.value && innerValue.value.length > 0) { return (
From 1437f66618fcb6c20462e3bb99d68846a4549689 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Wed, 26 Jun 2024 15:54:16 +0800 Subject: [PATCH 17/18] fix: cr --- src/form/hooks.ts | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/src/form/hooks.ts b/src/form/hooks.ts index 6226dbec9..517d6c39e 100644 --- a/src/form/hooks.ts +++ b/src/form/hooks.ts @@ -8,26 +8,13 @@ export interface FormDisabledProvider { /** * 用于实现 form 的全局禁用状态hook - * 禁用优先级: 组件 > 组件组 > 表单(checkbox.disabled > checkboxGroup.disabled > form.disabled) + * 禁用优先级: 组件 > 组件组 > 表单(propsDisabled.value > extend?.value > disabled?.value) * @returns */ export function useFormDisabled(extend?: Ref) { const ctx = getCurrentInstance(); const propsDisabled = computed(() => ctx?.props.disabled as boolean); const { disabled } = inject('formDisabled', Object.create(null)); - return computed(() => { - // 组件 - if (isBoolean(propsDisabled.value)) { - return propsDisabled.value; - } - // 组件组 - if (isBoolean(extend?.value)) { - return extend.value; - } - // 表单 - if (isBoolean(disabled?.value)) { - return disabled.value; - } - return false; - }); + + return computed(() => propsDisabled.value || extend?.value || disabled?.value || false); } From 0275d7fca8fe2720704dad972c7f729927a69910 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Wed, 26 Jun 2024 16:04:42 +0800 Subject: [PATCH 18/18] fix: cr --- src/form/hooks.ts | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/src/form/hooks.ts b/src/form/hooks.ts index 517d6c39e..cbd465f14 100644 --- a/src/form/hooks.ts +++ b/src/form/hooks.ts @@ -15,6 +15,19 @@ export function useFormDisabled(extend?: Ref) { const ctx = getCurrentInstance(); const propsDisabled = computed(() => ctx?.props.disabled as boolean); const { disabled } = inject('formDisabled', Object.create(null)); - - return computed(() => propsDisabled.value || extend?.value || disabled?.value || false); + return computed(() => { + // 组件 + if (isBoolean(propsDisabled.value)) { + return propsDisabled.value; + } + // 组件组 + if (isBoolean(extend?.value)) { + return extend.value; + } + // 表单 + if (isBoolean(disabled?.value)) { + return disabled.value; + } + return false; + }); }