Skip to content

Commit

Permalink
feat: keys disabled (#3202)
Browse files Browse the repository at this point in the history 
* feat: tree keys disabled

* docs: update tree api doc

* feat: add select keys.disabled api

* feat: transfer keys disabled

* fix: lint fix

* fix: lint fix

* docs: cascader 增加 borderless API 文档

* feat: tree-select add keys api

* chore: update common
  • Loading branch information
@PengYYYYY
PengYYYYY authored Aug 15, 2023
1 parent e7d6fc4 commit f95cc98
Show file tree
Hide file tree
Showing 22 changed files with 83 additions and 47 deletions.
2 changes: 1 addition & 1 deletion src/_common
Submodule _common updated 7 files
+6 −3 js/tree/tree-node-model.ts
+6 −5 js/tree/tree-node.ts
+1 −0 js/tree/types.ts
+0 −1 style/mobile/components/cell-group/v2/_index.less
+1 −0 style/mobile/components/cell/v2/_index.less
+1 −1 style/mobile/components/tab-bar/v2/_index.less
+5 −0 style/mobile/components/tabs/v2/_index.less
13 changes: 7 additions & 6 deletions src/cascader/cascader.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
name | type | default | description | required
-- | -- | -- | -- | --
autofocus | Boolean | - | \- | N
borderless | Boolean | false | \- | N
checkProps | Object | - | Typescript：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N
checkStrictly | Boolean | false | \- | N
clearable | Boolean | false | \- | N
Expand All @@ -15,7 +16,7 @@ empty | String / Slot / Function | - | Typescript：`string \| TNode`。[see mor
filter | Function | - | Typescript：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise<boolean>` | N
filterable | Boolean | false | \- | N
inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N
keys | Object | - | Typescript：`CascaderKeysType` `interface CascaderKeysType { value?: string; label?: string; children?: string \| boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N
keys | Object | - | Typescript：`CascaderKeysType` `interface CascaderKeysType { value?: string; label?: string; children?: string; disabled?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | 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
lazy | Boolean | true | \- | N
load | Function | - | Typescript：`(node: TreeNodeModel<CascaderOption>) => Promise<Array<CascaderOption>>` | N
Expand All @@ -34,19 +35,19 @@ readonly | Boolean | false | \- | 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
size | String | medium | options：large/medium/small。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
size | String | medium | options: large/medium/small。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
suffix | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
tagInputProps | Object | - | Typescript：`TagInputProps`，[TagInput API Documents](./tag-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N
tagProps | Object | - | Typescript：`TagProps`，[Tag API Documents](./tag?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N
tips | String / Slot / Function | - | tips at the bottom of cascader。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
trigger | String | click | options：click/hover | N
trigger | String | click | options: click/hover | N
value | String / Number / Array | [] | `v-model` and `v-model:value` is supported。Typescript：`CascaderValue<CascaderOption>` `type CascaderValue<T extends TreeOptionData = TreeOptionData> = string \| number \| T \| Array<CascaderValue<T>>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N
defaultValue | String / Number / Array | [] | uncontrolled property。Typescript：`CascaderValue<CascaderOption>` `type CascaderValue<T extends TreeOptionData = TreeOptionData> = string \| number \| T \| Array<CascaderValue<T>>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N
valueDisplay | String / Slot / Function | - | `MouseEvent<SVGElement>`。Typescript：`string \| TNode<{ value: CascaderValue<CascaderOption>; onClose: (index: number) => void; displayValue?: CascaderValue<CascaderOption> }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
valueMode | String | onlyLeaf | options：onlyLeaf/parentFirst/all | N
valueType | String | single | options：single/full | N
valueMode | String | onlyLeaf | options: onlyLeaf/parentFirst/all | N
valueType | String | single | options: single/full | N
onBlur | Function | | Typescript：`(context: { value: CascaderValue<CascaderOption> } & SelectInputBlurContext ) => void`<br/> | N
onChange | Function | | Typescript：`(value: CascaderValue<CascaderOption>, context: CascaderChangeContext<CascaderOption>) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts)。<br/>`interface CascaderChangeContext<CascaderOption> { node?: TreeNodeModel<CascaderOption>; source: CascaderChangeSource }`<br/><br/>`import { TreeNodeModel } from '@Tree'`<br/><br/>`type CascaderChangeSource = 'invalid-value' \| 'check' \| 'clear' \| 'uncheck'`<br/> | N
onFocus | Function | | Typescript：`(context: { value: CascaderValue<CascaderOption>; e: FocusEvent }) => void`<br/> | N
Expand Down
3 changes: 2 additions & 1 deletion src/cascader/cascader.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
名称 | 类型 | 默认值 | 说明 | 必传
-- | -- | -- | -- | --
autofocus | Boolean | - | 自动聚焦 | N
borderless | Boolean | false | 是否为无边框模式 | N
checkProps | Object | - | 参考 checkbox 组件 API。TS 类型：`CheckboxProps`，[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N
checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
clearable | Boolean | false | 是否支持清空选项 | N
Expand All @@ -15,7 +16,7 @@ empty | String / Slot / Function | - | 无匹配选项时的内容，默认全
filter | Function | - | 自定义过滤方法，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。TS 类型：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise<boolean>` | N
filterable | Boolean | false | 是否可搜索 | N
inputProps | Object | - | 透传 Input 输入框组件的全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N
keys | Object | - | 用来定义 value / label / children 在 `options` 中对应的字段别名。TS 类型：`CascaderKeysType` `interface CascaderKeysType { value?: string; label?: string; children?: string \| boolean }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N
keys | Object | - | 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名。TS 类型：`CascaderKeysType` `interface CascaderKeysType { value?: string; label?: string; children?: string; disabled?: string }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/cascader/type.ts) | N
label | String / Slot / Function | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
lazy | Boolean | true | 延迟加载 children 为 true 的子节点，即使 expandAll 被设置为 true，也同样延迟加载 | N
load | Function | - | 加载子树数据的方法（仅当节点 children 为 true 时生效）。TS 类型：`(node: TreeNodeModel<CascaderOption>) => Promise<Array<CascaderOption>>` | N
Expand Down
4 changes: 3 additions & 1 deletion src/cascader/props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { PropType } from 'vue';
export default {
/** 自动聚焦 */
autofocus: Boolean,
/** 是否为无边框模式 */
borderless: Boolean,
/** 参考 checkbox 组件 API */
checkProps: {
type: Object as PropType<TdCascaderProps['checkProps']>,
Expand Down Expand Up @@ -38,7 +40,7 @@ export default {
inputProps: {
type: Object as PropType<TdCascaderProps['inputProps']>,
},
/** 用来定义 value / label / children 在 `options` 中对应的字段别名 */
/** 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名 */
keys: {
type: Object as PropType<TdCascaderProps['keys']>,
},
Expand Down
10 changes: 8 additions & 2 deletions src/cascader/type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
* 自动聚焦
*/
autofocus?: boolean;
/**
* 是否为无边框模式
* @default false
*/
borderless?: boolean;
/**
* 参考 checkbox 组件 API
*/
Expand Down Expand Up @@ -59,7 +64,7 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
*/
inputProps?: InputProps;
/**
* 用来定义 value / label / children 在 `options` 中对应的字段别名
* 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名
*/
keys?: CascaderKeysType;
/**
Expand Down Expand Up @@ -234,7 +239,8 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
export interface CascaderKeysType {
value?: string;
label?: string;
children?: string | boolean;
children?: string;
disabled?: string;
}

export type CascaderValue<T extends TreeOptionData = TreeOptionData> = string | number | T | Array<CascaderValue<T>>;
Expand Down
3 changes: 2 additions & 1 deletion src/select/hooks/useSelectOptions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,13 @@ export const useSelectOptions = (props: TdSelectProps, keys: Ref<SelectKeysType>
const innerOptions: UniOption[] =
props.options?.map((option) => {
const getFormatOption = (option: TdOptionProps) => {
const { value, label } = keys.value;
const { value, label, disabled } = keys.value;
const res = {
...option,
index: dynamicIndex,
label: get(option, label),
value: get(option, value),
disabled: get(option, disabled),
};
dynamicIndex++;
return res;
Expand Down
2 changes: 1 addition & 1 deletion src/select/props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export default {
defaultInputValue: {
type: [String, Number] as PropType<TdSelectProps['defaultInputValue']>,
},
/** 用来定义 value / label 在 `options` 中对应的字段别名 */
/** 用来定义 value / label / disabled 在 `options` 中对应的字段别名 */
keys: {
type: Object as PropType<TdSelectProps['keys']>,
},
Expand Down
14 changes: 7 additions & 7 deletions src/select/select.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ filterable | Boolean | false | \- | N
inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N
inputValue | String / Number | - | input value。`v-model:inputValue` is supported。Typescript：`InputValue`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N
defaultInputValue | String / Number | - | input value。uncontrolled property。Typescript：`InputValue`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N
keys | Object | - | Typescript：`SelectKeysType` `interface SelectKeysType { value?: string; label?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N
keys | Object | - | Typescript：`SelectKeysType` `interface SelectKeysType { value?: string; label?: string; disabled?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | 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
loading | Boolean | false | \- | N
loadingText | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
Expand All @@ -38,8 +38,8 @@ reserveKeyword | Boolean | false | \- | N
scroll | Object | - | lazy load and virtual scroll。Typescript：`InfinityScroll`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | 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/select/type.ts) | N
showArrow | Boolean | true | \- | 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
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
suffix | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
tagInputProps | Object | - | Typescript：`TagInputProps`，[TagInput API Documents](./tag-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N
Expand All @@ -48,9 +48,9 @@ tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more
value | String / Number / Boolean / Object / Array | - | `v-model` and `v-model:value` is supported。Typescript：`SelectValue` `type SelectValue<T extends SelectOption = SelectOption> = string \| number \| boolean \| T \| Array<SelectValue<T>>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N
defaultValue | String / Number / Boolean / Object / Array | - | uncontrolled property。Typescript：`SelectValue` `type SelectValue<T extends SelectOption = SelectOption> = string \| number \| boolean \| T \| Array<SelectValue<T>>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts) | N
valueDisplay | String / Slot / Function | - | `MouseEvent<SVGElement>`。Typescript：`string \| TNode<{ value: SelectValue; onClose: (index: number) => void; displayValue?: SelectValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
valueType | String | value | options：value/object | N
valueType | String | value | options: value/object | N
onBlur | Function | | Typescript：`(context: { value: SelectValue; e: FocusEvent \| KeyboardEvent }) => void`<br/> | N
onChange | Function | | Typescript：`(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。<br/>`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`<br/> | N
onChange | Function | | Typescript：`(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。<br/>`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck' \| 'default'`<br/> | N
onClear | Function | | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
onCreate | Function | | Typescript：`(value: string \| number) => void`<br/> | N
onEnter | Function | | Typescript：`(context: { inputValue: string; e: KeyboardEvent; value: SelectValue }) => void`<br/> | N
Expand All @@ -65,7 +65,7 @@ onSearch | Function | | Typescript：`(filterWords: string, context: { e: Keybo
name | params | description
-- | -- | --
blur | `(context: { value: SelectValue; e: FocusEvent \| KeyboardEvent })` | \-
change | `(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。<br/>`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck'`<br/>
change | `(value: SelectValue, context: { option?: T, selectedOptions: T[], trigger: SelectValueChangeTrigger; e?: MouseEvent \| KeyboardEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/select/type.ts)。<br/>`type SelectValueChangeTrigger = 'clear' \| 'tag-remove' \| 'backspace' \| 'check' \| 'uncheck' \| 'default'`<br/>
clear | `(context: { e: MouseEvent })` | \-
create | `(value: string \| number)` | \-
enter | `(context: { inputValue: string; e: KeyboardEvent; value: SelectValue })` | \-
Expand Down Expand Up @@ -102,4 +102,4 @@ bufferSize | Number | 20 | \- | N
isFixedRowHeight | Boolean | false | \- | N
rowHeight | Number | - | \- | N
threshold | Number | 100 | \- | N
type | String | - | required。options：lazy/virtual | Y
type | String | - | required。options: lazy/virtual | Y
Loading

0 comments on commit f95cc98

Please sign in to comment.