refactor(split): onUpdateSize

src/split/demos/enUS/index.demo-entry.md

@@ -22,12 +22,12 @@ slot.vue
 | --- | --- | --- | --- | --- |
 | default-size | `number` | `0.5` | Default split size, 0-1 is a percentage. | 2.36.0 |
 | size | `number` | `undefined` | Split is the controlled split size, with 0-1 representing the percentage | NEXT_VERSION |
-| on-update:size | `(value: number) => void` | `undefined` | When a controlled property is used, it is triggered when the size property of the component changes | NEXT_VERSION |
 | disabled | `boolean` | `false` | Whether to disable the split. | 2.36.0 |
 | direction | `'horizontal' \| 'vertical'` | `'horizontal'` | The direction of the split. | 2.36.0 |
 | min | `number` | `0` | The minimum threshold for splitting, 0-1 is a percentage. | 2.36.0 |
 | max | `number` | `1` | The maximum split threshold, 0-1 is a percentage. | 2.36.0 |
 | resize-trigger-size | `number` | `3` | Size of the resize trigger. | 2.36.0 |
+| on-update:size | `(value: number) => void` | `undefined` | Callback fired on size changes. | NEXT_VERSION |
 
 ### Split Slots
 

src/split/demos/zhCN/index.demo-entry.md

@@ -23,12 +23,12 @@ controlled.vue
 | --- | --- | --- | --- | --- |
 | default-size | `number` | `0.5` | Split 的默认分割大小，0-1 代表百分比 | 2.36.0 |
 | size | `number` | `undefined` | Split 的受控分割大小，0-1 代表百分比 | NEXT_VERSION |
-| on-update:size | `(value: number) => void` | `undefined` | 使用受控属性时, 组件size属性变化时触发 | NEXT_VERSION |
 | disabled | `boolean` | `false` | 是否禁用 | 2.36.0 |
 | direction | `'horizontal' \| 'vertical'` | `'horizontal'` | Split 的分割方向 | 2.36.0 |
 | min | `number` | `0` | Split 的分割最小阈值，0-1 代表百分比 | 2.36.0 |
 | max | `number` | `1` | Split 的分割最大阈值，0-1 代表百分比 | 2.36.0 |
 | resize-trigger-size | `number` | `3` | Split 的分隔条大小 | 2.36.0 |
+| on-update:size | `(value: number) => void` | `undefined` | 组件 size 属性变化时触发的回调 | NEXT_VERSION |
 
 ### Split Slots
 

src/split/index.ts

@@ -1,2 +1,3 @@
 export { default as NSplit, splitProps } from './src/Split'
 export type { SplitProps } from './src/Split'
+export type { SplitOnUpdateSize } from './src/types'

src/split/src/Split.tsx

@@ -8,13 +8,13 @@ import {
   toRef
 } from 'vue'
 import { off, on } from 'evtd'
-import { type ExtractPublicPropTypes, resolveSlot } from '../../_utils'
+import { type ExtractPublicPropTypes, resolveSlot, call } from '../../_utils'
 import useConfig from '../../_mixins/use-config'
 import style from './styles/index.cssr'
 import { type ThemeProps, useTheme } from '../../_mixins'
 import { type SplitTheme, splitLight } from '../styles'
 import { useMergedState } from 'vooks'
-import { type onUpdateSizeType } from './types'
+import { type SplitOnUpdateSize } from './types'
 export const splitProps = {
   ...(useTheme.props as ThemeProps<SplitTheme>),
   direction: {
@@ -30,13 +30,13 @@ export const splitProps = {
     type: Number,
     default: 0.5
   },
-  'onUpdate:size': {
-    type: Function as PropType<onUpdateSizeType>
-  },
-  size: {
-    type: Number,
-    default: undefined
-  },
+  'onUpdate:size': [Function, Array] as PropType<
+  SplitOnUpdateSize | SplitOnUpdateSize[]
+  >,
+  onUpdateSize: [Function, Array] as PropType<
+  SplitOnUpdateSize | SplitOnUpdateSize[]
+  >,
+  size: Number,
   min: {
     type: Number,
     default: 0
@@ -55,7 +55,7 @@ export type SplitProps = ExtractPublicPropTypes<typeof splitProps>
 export default defineComponent({
   name: 'Split',
   props: splitProps,
-  setup (props, { emit }) {
+  setup (props) {
     const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
     const themeRef = useTheme(
       'Split',
@@ -82,12 +82,11 @@ export default defineComponent({
     const controlledSizeRef = toRef(props, 'size')
     const uncontrolledSizeRef = ref(props.defaultSize)
     // use to update controlled or uncontrolled values
-    const updatePropSize = (size): void => {
-      if (typeof props.size !== 'undefined') {
-        emit('update:size', size)
-      } else {
-        uncontrolledSizeRef.value = size
-      }
+    const doUpdateSize = (size: number): void => {
+      const _onUpdateSize = props['onUpdate:size']
+      if (props.onUpdateSize) call(props.onUpdateSize, size)
+      if (_onUpdateSize) call(_onUpdateSize, size)
+      uncontrolledSizeRef.value = size
     }
     const mergedSizeRef = useMergedState(controlledSizeRef, uncontrolledSizeRef)
     const firstPaneStyle = computed(() => {
@@ -163,13 +162,14 @@ export default defineComponent({
             (parentRect.width - props.resizeTriggerSize)
           : (event.clientY - parentRect.top + offset) /
             (parentRect.height - props.resizeTriggerSize)
-      updatePropSize(newSize)
+      let nextSize = newSize
       if (props.min) {
-        updatePropSize(Math.max(newSize, props.min))
+        nextSize = Math.max(newSize, props.min)
       }
       if (props.max) {
-        updatePropSize(Math.min(newSize, props.max))
+        nextSize = Math.min(newSize, props.max)
       }
+      doUpdateSize(nextSize)
     }
 
     return {

src/split/src/types.ts

@@ -1 +1 @@
-export type onUpdateSizeType = (size: number) => void;
+export type SplitOnUpdateSize = (size: number) => void