feat(tree-select): on-update:value prop add option info (#1004)

* feat(tree-select): on-update:value function add params

* feat: optimization

* feat: optimization

* feat: optimization

* feat: optimization

* feat: optimization

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -14,6 +14,7 @@
 - `n-auto-complete` exports `AutoCompleteOption` and `AutoCompleteGroupOption` types.
 - `n-page-header` add `RTL` support.
 - `n-select` support variadic height option rendering.
+- `n-tree-select`'s `on-update:value` prop add option info.
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -14,6 +14,7 @@
 - `n-auto-complete` 导出 `AutoCompleteOption` 以及 `AutoCompleteGroupOption` 类型
 - `n-page-header` 添加 `RTL` 支持
 - `n-select` 支持可变高度选项渲染
+- `n-tree-select` 的 `on-update:value` 回调新增选项信息
 
 ### Fixes
 

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

@@ -47,7 +47,7 @@ debug
 | on-blur | `(e: FocusEvent) => void` | `undefined` | Callback on blur. |
 | on-update:expanded-keys | `(value: Array<string \| number>) => void` | `undefined` | Callback on expanded keys updated. |
 | on-focus | `(e: FocusEvent) => void` | `undefined` | Callback on focus. |
-| on-update:value | `(value: string \| number \| Array<string \| number> \| null) => void` | `undefined` | Callback on value updated. |
+| on-update:value | `(value: string \| number \| Array<string \| number> \| null, meta: { option: TreeSelectOption \| null } \| Array<{ option: TreeSelectOption \| null }>) => void` | `undefined` | Callback on value updated. |
 
 ### TreeSelectOption Properties
 

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

@@ -48,7 +48,7 @@ debug
 | on-blur | `(e: FocusEvent) => void` | `undefined` | Blur 时的回调 |
 | on-update:expanded-keys | `(value: Array<string \| number>) => void` | `undefined` | 展开节点更新的回调 |
 | on-focus | `(e: FocusEvent) => void` | `undefined` | Focus 时的回调 |
-| on-update:value | `(value: string \| number \| Array<string \| number> \| null) => void` | `undefined` | 更新值的回调 |
+| on-update:value | `(value: string \| number \| Array<string \| number> \| null, meta: { option: TreeSelectOption \| null } \| Array<{ option: TreeSelectOption \| null }>) => void` | `undefined` | 更新值的回调 |
 
 ### TreeSelectOption Properties
 

src/tree-select/src/TreeSelect.tsx

@@ -350,11 +350,16 @@ export default defineComponent({
       uncontrolledShowRef.value = value
     }
     function doUpdateValue (
-      value: string | number | Array<string | number> | null
+      value: string | number | Array<string | number> | null,
+      meta:
+      | { option: TreeSelectOption | null }
+      | Array<{ option: TreeSelectOption | null }>
     ): void {
       const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props
-      if (onUpdateValue) call(onUpdateValue as OnUpdateValueImpl, value)
-      if (_onUpdateValue) call(_onUpdateValue as OnUpdateValueImpl, value)
+      if (onUpdateValue) call(onUpdateValue as OnUpdateValueImpl, value, meta)
+      if (_onUpdateValue) {
+        call(_onUpdateValue as OnUpdateValueImpl, value, meta)
+      }
       uncontrolledValueRef.value = value
       nTriggerFormInput()
       nTriggerFormChange()
@@ -413,14 +418,29 @@ export default defineComponent({
         }
       }
     }
+    function getOptionsByKeys (
+      keys: Key[]
+    ): Array<{ option: TreeSelectOption | null }> {
+      const {
+        value: { getNode }
+      } = dataTreeMateRef
+      return keys.map((key) => ({ option: getNode(key)?.rawNode || null }))
+    }
     function handleUpdateSelectedKeys (keys: Key[]): void {
       if (props.checkable && props.multiple) {
         return
       }
+      const options = getOptionsByKeys(keys)
       if (props.multiple) {
-        doUpdateValue(keys)
+        doUpdateValue(keys, options)
       } else {
-        doUpdateValue(keys[0] ?? null)
+        keys.length
+          ? doUpdateValue(keys[0], {
+            option: options[0].option
+          })
+          : doUpdateValue(null, {
+            option: null
+          })
         closeMenu()
         if (!props.filterable) {
           // Currently it is not necessary. However if there is an action slot,
@@ -436,7 +456,8 @@ export default defineComponent({
     function handleUpdateCheckedKeys (keys: Key[]): void {
       // only in checkable & multiple mode, we use tree's check update
       if (props.checkable && props.multiple) {
-        doUpdateValue(keys)
+        const options = getOptionsByKeys(keys)
+        doUpdateValue(keys, options)
         if (props.filterable) {
           focusSelectionInput()
           patternRef.value = ''
@@ -480,9 +501,9 @@ export default defineComponent({
         closeMenu()
       }
       if (multiple) {
-        doUpdateValue([])
+        doUpdateValue([], { option: null })
       } else {
-        doUpdateValue(null)
+        doUpdateValue(null, { option: null })
       }
     }
     function handleDeleteOption (option: SelectBaseOption): void {
@@ -499,11 +520,13 @@ export default defineComponent({
                 cascade: mergedCascadeRef.value
               }
             )
-            doUpdateValue(checkedKeys)
+            const options = getOptionsByKeys(checkedKeys)
+            doUpdateValue(checkedKeys, options)
           } else {
             const nextValue = Array.from(mergedValue)
             nextValue.splice(index, 1)
-            doUpdateValue(nextValue)
+            const options = getOptionsByKeys(nextValue)
+            doUpdateValue(nextValue, options)
           }
         }
       }

src/tree-select/src/interface.ts

@@ -19,7 +19,10 @@ export type OnUpdateValue = (
   string[] &
   number[] &
   Array<string | number> &
-  null
+  null,
+  meta: { option: TreeSelectOption | null } & Array<{
+    option: TreeSelectOption | null
+  }>
 ) => void
 
 export type OnUpdateValueImpl = (
@@ -30,7 +33,10 @@ export type OnUpdateValueImpl = (
   | string[]
   | number[]
   | Array<string | number>
-  | null
+  | null,
+  meta:
+  | { option: TreeSelectOption | null }
+  | Array<{ option: TreeSelectOption | null }>
 ) => void
 
 export type Value = string | number | Array<string | number> | null