refactor(tree): on-update:value prop add option info

src/cascader/src/Cascader.tsx

@@ -616,7 +616,11 @@ export default defineComponent({
     // --- search
     function handleClear (e: MouseEvent): void {
       e.stopPropagation()
-      doUpdateValue(null, null)
+      if (props.multiple) {
+        doUpdateValue([], [])
+      } else {
+        doUpdateValue(null, null)
+      }
     }
     function handleTriggerFocus (e: FocusEvent): void {
       if (!cascaderMenuInstRef.value?.$el.contains(e.relatedTarget as Node)) {

src/tree-select/demos/enUS/basic.demo.md

@@ -1,7 +1,11 @@
 # Basic
 
 ```html
-<n-tree-select :options="options" default-value="Drive My Car" />
+<n-tree-select
+  :options="options"
+  default-value="Drive My Car"
+  @update:value="handleUpdateValue"
+/>
 ```
 
 ```js
@@ -10,6 +14,9 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   setup () {
     return {
+      handleUpdateValue (...args) {
+        console.log(...args)
+      },
       options: [
         {
           label: 'Rubber Soul',

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, meta: { option: TreeSelectOption \| null } \| Array<{ option: TreeSelectOption \| null }>) => void` | `undefined` | Callback on value updated. |
+| on-update:value | `(value: string \| number \| Array<string \| number> \| null, option: TreeSelectOption \| null \| Array<TreeSelectOption \| null>) => void` | `undefined` | Callback on value updated. |
 
 ### TreeSelectOption Properties
 

src/tree-select/demos/enUS/multiple.demo.md

@@ -5,6 +5,7 @@
   multiple
   :options="options"
   :default-value="['Norwegian Wood']"
+  @update:value="handleUpdateValue"
 />
 ```
 
@@ -14,6 +15,9 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   setup () {
     return {
+      handleUpdateValue (...args) {
+        console.log(...args)
+      },
       options: [
         {
           label: 'Rubber Soul',

src/tree-select/demos/zhCN/basic.demo.md

@@ -1,7 +1,11 @@
 # 基础用法
 
 ```html
-<n-tree-select :options="options" default-value="Drive My Car" />
+<n-tree-select
+  :options="options"
+  default-value="Drive My Car"
+  @update:value="handleUpdateValue"
+/>
 ```
 
 ```js
@@ -10,6 +14,9 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   setup () {
     return {
+      handleUpdateValue (...args) {
+        console.log(...args)
+      },
       options: [
         {
           label: 'Rubber Soul',

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, meta: { option: TreeSelectOption \| null } \| Array<{ option: TreeSelectOption \| null }>) => void` | `undefined` | 更新值的回调 |
+| on-update:value | `(value: string \| number \| Array<string \| number> \| null, option: TreeSelectOption \| null \| Array<TreeSelectOption \| null>) => void` | `undefined` | 更新值的回调 |
 
 ### TreeSelectOption Properties
 

src/tree-select/demos/zhCN/multiple.demo.md

@@ -5,6 +5,7 @@
   multiple
   :options="options"
   :default-value="['Norwegian Wood']"
+  @update:value="handleUpdateValue"
 />
 ```
 
@@ -14,6 +15,9 @@ import { defineComponent } from 'vue'
 export default defineComponent({
   setup () {
     return {
+      handleUpdateValue (...args) {
+        console.log(...args)
+      },
       options: [
         {
           label: 'Rubber Soul',

src/tree-select/src/TreeSelect.tsx

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

src/tree-select/src/interface.ts

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

src/tree-select/src/utils.ts

@@ -24,7 +24,7 @@ export function treeOption2SelectOptionWithPath (
   return {
     ...rawNode,
     value: tmNode.key,
-    label: path.map((v) => v.rawNode[labelField]).join(separator)
+    label: path.map((v) => (v.rawNode as any)[labelField]).join(separator)
   }
 }