fix(components): allow null type on empty-values components (#21582)

* fix(components): allow null type on empty-values components

* refactor(hooks): [empty-values]: allow plain null for `value-on-clear`

docs/examples/config-provider/empty-values.vue

@@ -1,8 +1,5 @@
 <template>
-  <el-config-provider
-    :value-on-clear="() => null"
-    :empty-values="[undefined, null]"
-  >
+  <el-config-provider :value-on-clear="null" :empty-values="[undefined, null]">
     <div class="flex flex-wrap gap-4 items-center">
       <el-select
         v-model="value1"

packages/components/cascader-panel/src/config.ts

@@ -17,7 +17,7 @@ export const CommonProps = buildProps({
    * @description specify which key of node object is used as the node's value
    */
   modelValue: {
-    type: definePropType<CascaderValue>([Number, String, Array]),
+    type: definePropType<CascaderValue | null>([Number, String, Array]),
   },
   /**
    * @description data of the options, the key of `value` and `label` can be customize by `CascaderProps`.
@@ -110,7 +110,7 @@ export const cascaderPanelProps = buildProps({
 })
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const emitChangeFn = (value: CascaderValue | undefined) => true
+const emitChangeFn = (value: CascaderValue | undefined | null) => true
 
 export const cascaderPanelEmits = {
   [UPDATE_MODEL_EVENT]: emitChangeFn,

packages/components/cascader-panel/src/index.vue

@@ -234,7 +234,7 @@ const syncCheckedValue = (loaded = false, forced = false) => {
       )
     ) as Node[]
     syncMenuState(nodes, forced)
-    checkedValue.value = cloneDeep(modelValue)
+    checkedValue.value = cloneDeep(modelValue ?? undefined)
   }
 }
 

packages/components/cascader/src/cascader.ts

@@ -173,7 +173,7 @@ export const cascaderProps = buildProps({
 })
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const emitChangeFn = (value: CascaderValue) => true
+const emitChangeFn = (value: CascaderValue | null | undefined) => true
 
 export const cascaderEmits = {
   [UPDATE_MODEL_EVENT]: emitChangeFn,

packages/components/select/src/select.ts

@@ -38,7 +38,7 @@ export const selectProps = buildProps({
    * @description binding value
    */
   modelValue: {
-    type: definePropType<OptionValue | OptionValue[]>([
+    type: definePropType<OptionValue | OptionValue[] | null>([
       Array,
       String,
       Number,

packages/components/time-picker/src/common/picker.vue

@@ -403,7 +403,11 @@ const parsedValue = computed(() => {
         parseDate(d, props.valueFormat, lang.value)
       ) as [Dayjs, Dayjs]
     } else {
-      dayOrDays = parseDate(props.modelValue, props.valueFormat, lang.value)!
+      dayOrDays = parseDate(
+        props.modelValue ?? '',
+        props.valueFormat,
+        lang.value
+      )!
     }
   }
 

packages/components/time-picker/src/common/props.ts

@@ -133,7 +133,7 @@ export const timePickerDefaultProps = buildProps({
    * @description binding value, if it is an array, the length should be 2
    */
   modelValue: {
-    type: definePropType<ModelValueType>([Date, Array, String, Number]),
+    type: definePropType<ModelValueType | null>([Date, Array, String, Number]),
     default: '',
   },
   /**

packages/components/time-select/src/time-select.ts

@@ -17,7 +17,9 @@ export const timeSelectProps = buildProps({
   /**
    * @description binding value
    */
-  modelValue: String,
+  modelValue: {
+    type: definePropType<string | null>(String),
+  },
   /**
    * @description whether TimeSelect is disabled
    */
@@ -75,11 +77,15 @@ export const timeSelectProps = buildProps({
   /**
    * @description minimum time, any time before this time will be disabled
    */
-  minTime: String,
+  minTime: {
+    type: definePropType<string | null>(String),
+  },
   /**
    * @description maximum time, any time after this time will be disabled
    */
-  maxTime: String,
+  maxTime: {
+    type: definePropType<string | null>(String),
+  },
   /**
    * @description whether `end` is included in options
    */

packages/hooks/use-empty-values/index.ts

@@ -1,5 +1,10 @@
 import { computed, getCurrentInstance, inject, ref } from 'vue'
-import { buildProps, debugWarn, isFunction } from '@element-plus/utils'
+import {
+  buildProps,
+  debugWarn,
+  definePropType,
+  isFunction,
+} from '@element-plus/utils'
 
 import type { ExtractPropTypes, InjectionKey, Ref } from 'vue'
 
@@ -20,9 +25,15 @@ export const useEmptyValuesProps = buildProps({
    * @description return value when cleared, if you want to set `undefined`, use `() => undefined`
    */
   valueOnClear: {
-    type: [String, Number, Boolean, Function],
+    /* eslint-disable-next-line @typescript-eslint/no-unsafe-function-type */
+    type: definePropType<string | number | boolean | Function | null>([
+      String,
+      Number,
+      Boolean,
+      Function,
+    ]),
     default: undefined,
-    validator: (val: any) => (isFunction(val) ? !val() : !val),
+    validator: (val: unknown) => (isFunction(val) ? !val() : !val),
   },
 } as const)
 
@@ -52,7 +63,7 @@ export const useEmptyValues = (
     return defaultValue !== undefined ? defaultValue : DEFAULT_VALUE_ON_CLEAR
   })
 
-  const isEmptyValue = (value: any) => {
+  const isEmptyValue = (value: unknown) => {
     return emptyValues.value.includes(value)
   }