feat(cascader): default-value prop

demo/documentation/components/cascader/enUS/index.demo-entry.md

@@ -18,6 +18,7 @@ multiple-lazy
 | --- | --- | --- | --- |
 | cascade | `boolean` | `true` | Whether to cascade checkbox when multiple. |
 | clearable | `boolean` | `false` |  |
+| default-value | `string \| number \| Array<number \| string> \| null` | `null` |  |
 | disabled | `boolean` | `false` |  |
 | expand-trigger | `'click' \| 'hover'` | `'click'` | If `remote` is set, `'hover'` won't work. |
 | filterable | `boolean` | `false` | If `remote` is set, it won't work. |
@@ -32,8 +33,8 @@ multiple-lazy
 | show-path | `boolean` | `true` | Whether to show path in selector. |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` |  |
 | theme | `'light' \| 'dark' \| string` | `undefined` |  |
-| value | `string \| number \| Array<number \| string>` | `null` |  |
+| value | `string \| number \| Array<number \| string> \| null` | `undefined` |  |
 | on-blur | `() => any` | `undefined` |  |
 | on-focus | `() => any` | `undefined` |
 | on-load | `(option: CascaderOption) => Promise<any>` | `undefined` | Callback when click unloaded node. Set `option.children` in the returned promise. Loading is end after the promise is resolved or rejected. |
-| on-update:value | `(value: string \| number \| Array<string \| number>) => any` | `undefined` |  |
+| on-update:value | `(value: string \| number \| Array<string \| number> \| null) => any` | `undefined` |  |

demo/documentation/components/cascader/zhCN/index.demo-entry.md

@@ -18,6 +18,7 @@ multiple-lazy
 | --- | --- | --- | --- |
 | cascade | `boolean` | `true` | 在多选时是否关联选项 |
 | clearable | `boolean` | `false` |  |
+| default-value | `string \| number \| Array<number \| string> \| null` | `null` |  |
 | disabled | `boolean` | `false` |  |
 | expand-trigger | `'click' \| 'hover'` | `'click'` | 在 `remote` 被设定时 `'hover'` 不生效 |
 | filterable | `boolean` | `false` | `remote` 被设定时不生效 |
@@ -32,8 +33,8 @@ multiple-lazy
 | show-path | `boolean` | `true` | 是否在选择器中显示选项路径 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` |  |
 | theme | `'light' \| 'dark' \| string` | `undefined` |  |
-| value | `string \| number \| Array<number \| string>` | `null` |  |
+| value | `string \| number \| Array<number \| string>` | `undefined` |  |
 | on-blur | `() => any` | `undefined` |  |
 | on-focus | `() => any` | `undefined` |  |
 | on-load | `(option: CascaderOption) => Promise<any>` | `undefined` | 在点击未加载完成节点时的回调，在返回的 promise 中设定 `option.children`，在返回的 promise resolve 或 reject 之后完成加载 |
-| on-update:value | `(value: string \| number \| Array<string \| number>) => any` | `undefined` |  |
+| on-update:value | `(value: string \| number \| Array<string \| number> \| null) => any` | `undefined` |  |

src/cascader/src/Cascader.vue

@@ -48,7 +48,7 @@
           :class="{
             [namespace]: namespace
           }"
-          :value="value"
+          :value="mergedValue"
           :show="mergedShow && !showSelectMenu"
           :theme="mergedTheme"
           :size="mergedSize"
@@ -69,7 +69,7 @@
           :class="{
             [namespace]: namespace
           }"
-          :value="value"
+          :value="mergedValue"
           :show="mergedShow && showSelectMenu"
           :theme="mergedTheme"
           :pattern="pattern"
@@ -120,7 +120,7 @@ export default {
     },
     value: {
       type: [String, Number, Array],
-      default: null
+      default: undefined
     },
     placeholder: {
       type: String,
@@ -221,18 +221,6 @@ export default {
     }
   },
   methods: {
-    doUpdateValue (...args) {
-      const {
-        'onUpdate:value': onUpdateValue,
-        onChange,
-        nTriggerFormInput,
-        nTriggerFormChange
-      } = this
-      if (onUpdateValue) call(onUpdateValue, ...args)
-      if (onChange) call(onChange, ...args)
-      nTriggerFormInput()
-      nTriggerFormChange()
-    },
     doBlur (...args) {
       const { onBlur, nTriggerFormBlur } = this
       if (onBlur) call(onBlur, ...args)
@@ -450,8 +438,9 @@ export default {
     },
     handleDeleteLastOption () {
       if (this.multiple) {
-        if (Array.isArray(this.value)) {
-          const newValue = this.value
+        const { mergedValue } = this
+        if (Array.isArray(mergedValue)) {
+          const newValue = Array.from(mergedValue)
           newValue.pop()
           this.doUpdateValue(newValue)
         }
@@ -461,10 +450,11 @@ export default {
       this.pattern = e.target.value
     },
     handleDeleteOption (option) {
-      if (this.multiple && Array.isArray(this.value)) {
-        const index = this.value.findIndex((value) => value === option.value)
+      const { multiple, mergedValue } = this
+      if (multiple && Array.isArray(mergedValue)) {
+        const index = mergedValue.findIndex((value) => value === option.value)
         if (~index) {
-          const newValue = this.value
+          const newValue = Array.from(mergedValue)
           newValue.splice(index, 1)
           this.doUpdateValue(newValue)
         }

src/cascader/src/CascaderMenu.vue

@@ -45,11 +45,7 @@ export default {
   directives: {
     clickoutside
   },
-  inject: {
-    NCascader: {
-      default: null
-    }
-  },
+  inject: ['NCascader'],
   provide () {
     return {
       NCascaderMenu: this

src/cascader/src/CascaderOption.vue

@@ -1,8 +1,3 @@
-<!--
-'n-cascader-option--selected': type === 'single' && value === NCascader.value,
-'n-cascader-option--active': active && !isLeaf,
--->
-
 <template>
   <div
     class="n-cascader-option"
@@ -73,11 +68,6 @@ export default {
     ChevronRightIcon,
     CheckmarkIcon
   },
-  inject: {
-    NCascader: {
-      default: null
-    }
-  },
   props: {
     tmNode: {
       type: Object,
@@ -88,6 +78,7 @@ export default {
     const NCascader = inject('NCascader')
     const valueRef = computed(() => props.tmNode.rawNode.value)
     return {
+      NCascader,
       leafOnly: toRef(NCascader, 'leafOnly'),
       multiple: toRef(NCascader, 'multiple'),
       checked: useMemo(() => {

src/cascader/src/CascaderSelectMenu.vue

@@ -128,9 +128,9 @@ export default {
     doCheck (option) {
       if (this.multiple) {
         const {
-          NCascader: { value, doCheck, doUncheck }
+          NCascader: { mergedValue, doCheck, doUncheck }
         } = this
-        if (value === null || !value.includes(option.value)) {
+        if (mergedValue === null || !mergedValue.includes(option.value)) {
           doCheck(option.value)
         } else {
           doUncheck(option.value)

src/cascader/src/CascaderSubmenu.vue

@@ -22,11 +22,7 @@ export default {
     NCascaderOption,
     NScrollbar
   },
-  inject: {
-    NCascader: {
-      default: null
-    }
-  },
+  inject: ['NCascader'],
   props: {
     depth: {
       type: Number,

src/cascader/src/composables.js

@@ -5,6 +5,12 @@ import { useAsFormItem } from '../../_mixins'
 import { call, useAdjustedTo } from '../../_utils'
 
 export function useCascader (props) {
+  const uncontrolledValueRef = ref(null)
+  const controlledValueRef = toRef(props, 'value')
+  const mergedValueRef = useMergedState(
+    controlledValueRef,
+    uncontrolledValueRef
+  )
   const formItem = useAsFormItem(props)
   const cascaderMenuRef = ref(null)
   const selectMenuRef = ref(null)
@@ -26,9 +32,9 @@ export function useCascader (props) {
     })
   })
   const mergedKeysRef = computed(() => {
-    const { value, cascade, multiple } = props
+    const { cascade, multiple } = props
     if (multiple) {
-      return treeMateRef.value.getCheckedKeys(value, {
+      return treeMateRef.value.getCheckedKeys(mergedValueRef.value, {
         cascade
       })
     } else {
@@ -67,11 +73,12 @@ export function useCascader (props) {
       keyboardKeyRef.value = null
     }
   })
-  function doUpdateValue (...args) {
+  function doUpdateValue (value) {
     const { 'onUpdate:value': onUpdateValue, onChange } = props
     const { nTriggerFormInput, nTriggerFormChange } = formItem
-    if (onUpdateValue) call(onUpdateValue, ...args)
-    if (onChange) call(onChange, ...args)
+    if (onUpdateValue) call(onUpdateValue, value)
+    if (onChange) call(onChange, value)
+    uncontrolledValueRef.value = value
     nTriggerFormInput()
     nTriggerFormChange()
   }
@@ -136,7 +143,8 @@ export function useCascader (props) {
   }
   const selectedOptionsRef = computed(() => {
     if (props.multiple) {
-      const { value, showPath, separator } = props
+      const { showPath, separator } = props
+      const { value } = mergedValueRef
       if (Array.isArray(value)) {
         const { getNode } = treeMateRef.value
         return value.map((key) => {
@@ -163,7 +171,7 @@ export function useCascader (props) {
   const selectedOptionRef = computed(() => {
     const { multiple, showPath, separator } = props
     if (!multiple) {
-      const { value } = props
+      const { value } = mergedValueRef
       const { getNode } = treeMateRef.value
       if (value === null) {
         return null
@@ -185,6 +193,7 @@ export function useCascader (props) {
   const uncontrolledShowRef = ref(false)
   const controlledShowRef = toRef(props, 'show')
   return {
+    mergedValue: mergedValueRef,
     uncontrolledShow: uncontrolledShowRef,
     mergedShow: useMergedState(controlledShowRef, uncontrolledShowRef),
     treeMate: treeMateRef,
@@ -206,6 +215,7 @@ export function useCascader (props) {
     pattern: ref(''),
     adjustedTo: useAdjustedTo(props),
     ...formItem,
+    doUpdateValue,
     updateKeyboardKey,
     updateHoverKey,
     doCheck,