mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-04-12 14:40:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: tree methods

Browse Source
This commit is contained in:
07akioni 2022-11-20 23:40:56 +08:00
parent 8364cbafb4
commit 67d6bf3fd4
14 changed files with 102 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
CHANGELOG.en-US.md
View File

@ -14,14 +14,14 @@
- `n-mention` adds `on-update:show` prop, closes [#3882](https://github.com/tusen-ai/naive-ui/issues/3882).
- `n-tree` adds trigger node information for `on-update:expanded-keys`, `on-update:checked-keys` and `on-update:selected-keys` props, closes [#3885](https://github.com/tusen-ai/naive-ui/issues/3885).
- `n-tree-select` adds trigger node information for `on-update:expanded-keys` and `on-update:value` props, closes [#3885](https://github.com/tusen-ai/naive-ui/issues/3885).
- `n-tree` adds `getCheckedKeys` method.
- `n-tree` adds `getIndeterminateKeys` method.
- `n-tree-select` adds `getCheckedKeys` method.
- `n-tree-select` adds `getIndeterminateKeys` method.
- `n-tree` adds `getCheckedData` method.
- `n-tree` adds `getIndeterminateData` method.
- `n-tree-select` adds `getCheckedData` method.
- `n-tree-select` adds `getIndeterminateData` method.
- `n-tree-select` adds `focus` method.
- `n-tree-select` adds `blur` method.
- `n-cascader` adds `getCheckedKeys` method.
- `n-cascader` adds `getIndeterminateKeys` method.
- `n-cascader` adds `getCheckedData` method.
- `n-cascader` adds `getIndeterminateData` method.
- `n-input` adds `count-graphemes` prop, closes [#3967](https://github.com/tusen-ai/naive-ui/issues/3967).
- `n-cascader` adds `not-found` slot, closes [#3862](https://github.com/tusen-ai/naive-ui/issues/3862).
- `n-avatar` adds `img-props` prop, closes [#3963](https://github.com/tusen-ai/naive-ui/issues/3963).

16
CHANGELOG.zh-CN.md
View File

@ -12,16 +12,16 @@
- `n-transfer` 新增 `show-selected` 属性，关闭 [#3711](https://github.com/tusen-ai/naive-ui/issues/3711)
- `n-data-table` 新增 `loading` 插槽，关闭 [#3865](https://github.com/tusen-ai/naive-ui/issues/3865)
- `n-mention` 新增 `on-update:show` 属性，关闭 [#3882](https://github.com/tusen-ai/naive-ui/issues/3882)
- `n-tree` 为 `on-update:expanded-keys`、`on-update:checked-keys`、`on-update:selected-keys` 属性添加触发节点信息, 关闭 [#3885](https://github.com/tusen-ai/naive-ui/issues/3885)
- `n-tree-select` 为 `on-update:expanded-keys`、`on-update:value` 属性添加触发节点信息, 关闭 [#3885](https://github.com/tusen-ai/naive-ui/issues/3885)
- `n-tree` 新增 `getCheckedKeys` 方法
- `n-tree` 新增 `getIndeterminateKeys` 方法
- `n-tree-select` 新增 `getCheckedKeys` 方法
- `n-tree-select` 新增 `getIndeterminateKeys` 方法
- `n-tree` 为 `on-update:expanded-keys`、`on-update:checked-keys`、`on-update:selected-keys` 属性添加触发节点信息，关闭 [#3885](https://github.com/tusen-ai/naive-ui/issues/3885)
- `n-tree-select` 为 `on-update:expanded-keys`、`on-update:value` 属性添加触发节点信息，关闭 [#3885](https://github.com/tusen-ai/naive-ui/issues/3885)
- `n-tree` 新增 `getCheckedData` 方法
- `n-tree` 新增 `getIndeterminateData` 方法
- `n-tree-select` 新增 `getCheckedData` 方法
- `n-tree-select` 新增 `getIndeterminateData` 方法
- `n-tree-select` 新增 `focus` 方法
- `n-tree-select` 新增 `blur` 方法
- `n-cascader` 新增 `getCheckedKeys` 方法
- `n-cascader` 新增 `getIndeterminateKeys` 方法
- `n-cascader` 新增 `getCheckedData` 方法
- `n-cascader` 新增 `getIndeterminateData` 方法
- `n-input` 新增 `count-graphemes` 属性，关闭 [#3967](https://github.com/tusen-ai/naive-ui/issues/3967)
- `n-cascader` 新增 `not-found` slot，关闭 [#3862](https://github.com/tusen-ai/naive-ui/issues/3862)
- `n-avatar` 新增 `img-props` 属性，关闭 [#3963](https://github.com/tusen-ai/naive-ui/issues/3963)

4
src/cascader/demos/enUS/index.demo-entry.md
View File

@ -86,5 +86,5 @@ status.vue
| --- | --- | --- | --- |
| blur | `() => void` | Blur. | 2.24.2 |
| focus | `() => void` | Focus. | 2.24.2 |
| getCheckedKeys | `() => Array<string \| number>` | Get checked keys. | NEXT_VERSION |
| getIndeterminateKeys | `() => Array<string \| number>` | Get indeterminate keys. | NEXT_VERSION |
| getCheckedData | `() => { keys: Array<string \| number>, options: Array<TreeOption \| null> }` | Get checked data. | NEXT_VERSION |
| getIndeterminateData | `() => { keys: Array<string \| number>, options: Array<TreeOption \| null> }` | Get indeterminate data. | NEXT_VERSION |

4
src/cascader/demos/zhCN/index.demo-entry.md
View File

@ -87,5 +87,5 @@ default-value-debug.vue
| --- | --- | --- | --- |
| blur | `() => void` | 失焦 | 2.24.2 |
| focus | `() => void` | 聚焦 | 2.24.2 |
| getCheckedKeys | `() => Array<string \| number>` | 获取选中的 key | NEXT_VERSION |
| getIndeterminateKeys | `() => Array<string \| number>` | 获取半选的 key | NEXT_VERSION |
| getCheckedData | `() => { keys: Array<string \| number>, options: Array<TreeOption \| null> }` | 获取选中的数据 | NEXT_VERSION |
| getIndeterminateData | `() => { keys: Array<string \| number>, options: Array<TreeOption \| null> }` | 获取半选的数据 | NEXT_VERSION |

39
src/cascader/src/Cascader.tsx
View File

@ -338,6 +338,12 @@ export default defineComponent({
function updateHoverKey (key: Key | null): void {
hoverKeyRef.value = key
}
function getOptionsByKeys (keys: Key[]): Array<CascaderOption | null> {
const {
value: { getNode }
} = treeMateRef
return keys.map((keys) => getNode(keys)?.rawNode || null)
}
function doCheck (key: Key): boolean {
const { cascade, multiple, filterable } = props
const {
@ -352,9 +358,7 @@ export default defineComponent({
})
doUpdateValue(
checkedKeys,
checkedKeys.map(
(checkedKey) => getNode(checkedKey)?.rawNode || null
),
getOptionsByKeys(checkedKeys),
checkedKeys.map((checkedKey) =>
getRawNodePath(getPath(checkedKey)?.treeNodePath)
)
@ -883,9 +887,32 @@ export default defineComponent({
blur: () => {
triggerInstRef.value?.blur()
},
getCheckedKeys: () => (showCheckboxRef.value ? checkedKeysRef.value : []),
getIndeterminateKeys: () =>
showCheckboxRef.value ? indeterminateKeysRef.value : []
getCheckedData: () => {
if (showCheckboxRef.value) {
const checkedKeys = checkedKeysRef.value
return {
keys: checkedKeys,
options: getOptionsByKeys(checkedKeys)
}
}
return {
keys: [],
options: []
}
},
getIndeterminateData: () => {
if (showCheckboxRef.value) {
const indeterminateKeys = indeterminateKeysRef.value
return {
keys: indeterminateKeys,
options: getOptionsByKeys(indeterminateKeys)
}
}
return {
keys: [],
options: []
}
}
}
const cssVarsRef = computed(() => {
const {

7
src/cascader/src/interface.ts
View File

@ -121,6 +121,9 @@ export const cascaderInjectionKey =
export interface CascaderInst {
focus: () => void
blur: () => void
getCheckedKeys: () => Key[]
getIndeterminateKeys: () => Key[]
getCheckedData: () => { keys: Key[], options: Array<CascaderOption | null> }
getIndeterminateData: () => {
keys: Key[]
options: Array<CascaderOption | null>
}
}

4
src/tree-select/demos/enUS/index.demo-entry.md
View File

@ -93,5 +93,5 @@ debug.vue
| --- | --- | --- | --- |
| blur | `() => void` | Blur. | NEXT_VERSION |
| focus | `() => void` | Focus. | NEXT_VERSIONs |
| getCheckedKeys | `() => Array<string \| number>` | Get checked keys. | NEXT_VERSION |
| getIndeterminateKeys | `() => Array<string \| number>` | Get indeterminate keys. | NEXT_VERSION |
| getCheckedData | `() => { keys: Array<string \| number>, options: Array<TreeOption \| null> }` | Get checked data. | NEXT_VERSION |
| getIndeterminateData | `() => { keys: Array<string \| number>, options: Array<TreeOption \| null> }` | Get indeterminate data. | NEXT_VERSION |

4
src/tree-select/demos/zhCN/index.demo-entry.md
View File

@ -96,5 +96,5 @@ render-debug.vue
| --- | --- | --- | --- |
| blur | `() => void` | 失焦 | NEXT_VERSION |
| focus | `() => void` | 聚焦 | NEXT_VERSION |
| getCheckedKeys | `() => Array<string \| number>` | 获取选中的 key | NEXT_VERSION |
| getIndeterminateKeys | `() => Array<string \| number>` | 获取半选的 key | NEXT_VERSION |
| getCheckedData | `() => { keys: Array<string \| number>, options: Array<TreeOption \| null> }` | 获取选中的数据 | NEXT_VERSION |
| getIndeterminateData | `() => { keys: Array<string \| number>, options: Array<TreeOption \| null> }` | 获取半选的数据 | NEXT_VERSION |

14
src/tree-select/src/TreeSelect.tsx
View File

@ -708,9 +708,17 @@ export default defineComponent({
})
const exposedMethods: TreeSelectInst = {
getCheckedKeys: () => exposedCheckedStatusRef.value.checkedKeys,
getIndeterminateKeys: () =>
exposedCheckedStatusRef.value.indeterminateKeys,
getCheckedData: () => {
const { checkedKeys } = exposedCheckedStatusRef.value
return { keys: checkedKeys, options: getOptionsByKeys(checkedKeys) }
},
getIndeterminateData: () => {
const { indeterminateKeys } = exposedCheckedStatusRef.value
return {
keys: indeterminateKeys,
options: getOptionsByKeys(indeterminateKeys)
}
},
focus: () => triggerInstRef.value?.focus(),
blur: () => triggerInstRef.value?.blur()
}

10
src/tree-select/src/interface.ts
View File

@ -115,8 +115,14 @@ export type TreeSelectNodeProps = (info: {
}) => HTMLAttributes & Record<string, unknown>
export interface TreeSelectInst {
getCheckedKeys: () => Array<string | number>
getIndeterminateKeys: () => Array<string | number>
getCheckedData: () => {
keys: Array<string | number>
options: Array<TreeSelectOption | null>
}
getIndeterminateData: () => {
keys: Array<string | number>
options: Array<TreeSelectOption | null>
}
focus: () => void
blur: () => void
}

6
src/tree/demos/enUS/index.demo-entry.md
View File

@ -79,7 +79,7 @@ checkbox-placement.vue
| on-update:checked-keys | `(keys: Array<string \| number>, option: Array<TreeOption \| null>), meta: { node: TreeOption \| null, action: 'check' \| 'uncheck' }) => void` | `undefined` | Callback function when node checked options change. | `meta` NEXT_VERSION |
| on-update:indeterminate-keys | `(keys: Array<string \| number>, option: Array<TreeOption \| null>) => void` | `undefined` | Callback function when node indeterminate options change. | |
| on-update:expanded-keys | `(keys: Array<string \| number>, option: Array<TreeOption \| null>), meta: { node: TreeOption \| null, action: 'expand' \| 'collapse' \| 'filter' }) => void` | `undefined` | The callback function when the node expansion item changes. | `meta` NEXT_VERSION |
| on-update:selected-keys | `(keys: Array<string \| number>, option: Array<TreeOption \| null>), meta: { node: TreeOption \| null, action: 'select' \| 'unselect' }) => void` | `undefined` | The callback function when the selected item of the node changes. | `meta` NEXT_VERSION |
| on-update:selected-keys | `(keys: Array<string \| number>, option: Array<TreeOption \| null>), meta: { node: TreeOption, action: 'select' \| 'unselect' }) => void` | `undefined` | The callback function when the selected item of the node changes. | `meta` NEXT_VERSION |
### TreeOption Properties
@ -101,5 +101,5 @@ checkbox-placement.vue
| Name | Paramaters | Description | Version |
| --- | --- | --- | --- |
| scrollTo | `(options: { key: string \| number })` | Scroll to some node in virtual scroll mode. | 2.32.2 |
| getCheckedKeys | `() => Array<string \| number>` | Get checked keys. | NEXT_VERSION |
| getIndeterminateKeys | `() => Array<string \| number>` | Get indeterminate keys. | NEXT_VERSION |
| getCheckedData | `() => { keys: Array<string \| number>, options: Array<TreeOption \| null> }` | Get checked data. | NEXT_VERSION |
| getIndeterminateData | `() => { keys: Array<string \| number>, options: Array<TreeOption \| null> }` | Get indeterminate data. | NEXT_VERSION |

6
src/tree/demos/zhCN/index.demo-entry.md
View File

@ -85,7 +85,7 @@ expand-debug.vue
| on-update:checked-keys | `(keys: Array<string \| number>, option: Array<TreeOption \| null>, meta: { node: TreeOption \| null, action: 'check' \| 'uncheck' }) => void` | `undefined` | 节点勾选项发生变化时的回调函数 | `meta` NEXT_VERSION |
| on-update:indeterminate-keys | `(keys: Array<string \| number>, option: Array<TreeOption \| null>) => void` | `undefined` | 节点部分勾选项发生变化时的回调函数 | |
| on-update:expanded-keys | `(keys: Array<string \| number>, option: Array<TreeOption \| null>, meta: { node: TreeOption \| null, action: 'expand' \| 'collapse' \| 'filter' }) => void` | `undefined` | 节点展开项发生变化时的回调函数 | `meta` NEXT_VERSION |
| on-update:selected-keys | `(keys: Array<string \| number>, option: Array<TreeOption \| null>, meta: { node: TreeOption \| null, action: 'select' \| 'unselect' }) => void` | `undefined` | 节点选中项发生变化时的回调函数 | `meta` NEXT_VERSION |
| on-update:selected-keys | `(keys: Array<string \| number>, option: Array<TreeOption \| null>, meta: { node: TreeOption, action: 'select' \| 'unselect' }) => void` | `undefined` | 节点选中项发生变化时的回调函数 | `meta` NEXT_VERSION |
### TreeOption Properties
@ -107,5 +107,5 @@ expand-debug.vue
| 名称 | 参数 | 说明 | 版本 |
| --- | --- | --- | --- |
| scrollTo | `(options: { key: string \| number })` | 在虚拟滚动模式下滚动到某个节点 | 2.32.2 |
| getCheckedKeys | `() => Array<string \| number>` | 获取选中的 key | NEXT_VERSION |
| getIndeterminateKeys | `() => Array<string \| number>` | 获取半选的 key | NEXT_VERSION |
| getCheckedData | `() => { keys: Array<string \| number>, options: Array<TreeOption \| null> }` | 获取选中的数据 | NEXT_VERSION |
| getIndeterminateData | `() => { keys: Array<string \| number>, options: Array<TreeOption \| null> }` | 获取半选的数据 | NEXT_VERSION |

22
src/tree/src/Tree.tsx
View File

@ -886,7 +886,7 @@ export default defineComponent({
value: Key[],
option: Array<TreeOption | null>,
meta: {
node: TreeOption | null
node: TreeOption
action: 'select' | 'unselect'
}
): void {
@ -1531,13 +1531,21 @@ export default defineComponent({
const exposedMethods: InternalTreeInst & TreeInst = {
handleKeydown,
scrollTo,
getCheckedKeys: () => {
if (!props.checkable) return []
return checkedStatusRef.value.checkedKeys
getCheckedData: () => {
if (!props.checkable) return { keys: [], options: [] }
const { checkedKeys } = checkedStatusRef.value
return {
keys: checkedKeys,
options: getOptionsByKeys(checkedKeys)
}
},
getIndeterminateKeys: () => {
if (!props.checkable) return []
return checkedStatusRef.value.indeterminateKeys
getIndeterminateData: () => {
if (!props.checkable) return { keys: [], options: [] }
const { indeterminateKeys } = checkedStatusRef.value
return {
keys: indeterminateKeys,
options: getOptionsByKeys(indeterminateKeys)
}
}
}
const cssVarsRef = computed(() => {

4
src/tree/src/interface.ts
View File

@ -147,6 +147,6 @@ export interface InternalTreeInst {
export interface TreeInst {
scrollTo: (options: { key: Key }) => void
getCheckedKeys: () => Key[]
getIndeterminateKeys: () => Key[]
getCheckedData: () => { keys: Key[], options: Array<TreeOption | null> }
getIndeterminateData: () => { keys: Key[], options: Array<TreeOption | null> }
}