fix(useVModel): 修复change事件丢失响应式

packages/components/auto-complete/auto-complete.tsx

@@ -21,7 +21,7 @@ export default defineComponent({
   props,
   setup(props: TdAutoCompleteProps, { slots }) {
     const { value, modelValue } = toRefs(props);
-    const [tValue, setTValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+    const [tValue, setTValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
     const renderContent = useContent();
     const renderTNodeJSX = useTNodeJSX();
     const { classPrefix, SIZE } = useCommonClassName();

packages/components/cascader/hooks/index.ts

@@ -95,7 +95,7 @@ export const useContext = (
 export const useCascaderContext = (props: TdCascaderProps) => {
   const disabled = useDisabled();
   const { value, modelValue, popupVisible } = toRefs(props);
-  const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+  const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
   const [innerPopupVisible, setPopupVisible] = useDefaultValue(
     popupVisible,
     false,

packages/components/checkbox/checkbox.tsx

@@ -33,13 +33,7 @@ export default defineComponent({
     const { STATUS } = useCommonClassName();
 
     const { checked, modelValue, lazyLoad } = toRefs(props);
-    const [innerChecked, setInnerChecked] = useVModel(
-      checked,
-      modelValue,
-      props.defaultChecked,
-      props.onChange,
-      'checked',
-    );
+    const [innerChecked, setInnerChecked] = useVModel(checked, modelValue, props.defaultChecked, 'onChange', 'checked');
 
     const checkboxGroupData = inject(CheckboxGroupInjectionKey, undefined);
 

packages/components/checkbox/group.tsx

@@ -17,7 +17,7 @@ export default defineComponent({
 
     const { isArray } = Array;
     const { value, modelValue } = toRefs(props);
-    const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+    const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
 
     const optionList = ref<Array<CheckboxOptionObj>>([]);
 

packages/components/collapse/collapse.tsx

@@ -11,7 +11,7 @@ export default defineComponent({
     const borderlessClass = usePrefixClass('-border-less');
     const renderTNodeJSX = useTNodeJSX();
     const { value, expandMutex, borderless, modelValue } = toRefs(props);
-    const [collapseValue, setCollapseValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+    const [collapseValue, setCollapseValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
     const updateCollapseValue = (value: CollapsePanelValue) => {
       let newValue: CollapseValue = [].concat(collapseValue.value || []);
       const index = newValue.indexOf(value);

packages/components/color-picker/color-picker.tsx

@@ -15,7 +15,7 @@ export default defineComponent({
     const renderTNodeJSXDefault = useTNodeDefault();
 
     const { value: inputValue, modelValue, recentColors } = toRefs(props);
-    const [innerValue, setInnerValue] = useVModel(inputValue, modelValue, props.defaultValue, props.onChange);
+    const [innerValue, setInnerValue] = useVModel(inputValue, modelValue, props.defaultValue, 'onChange');
     const [innerRecentColors, setInnerRecentColors] = useDefaultValue(
       recentColors,
       props.defaultRecentColors,

packages/components/color-picker/components/panel/index.tsx

@@ -34,7 +34,7 @@ export default defineComponent({
     const { t, globalConfig } = useConfig('colorPicker');
     const statusClassNames = STATUS.value;
     const { value: inputValue, modelValue, recentColors } = toRefs(props);
-    const [innerValue, setInnerValue] = useVModel(inputValue, modelValue, props.defaultValue, props.onChange);
+    const [innerValue, setInnerValue] = useVModel(inputValue, modelValue, props.defaultValue, 'onChange');
     const [innerRecentColors, setInnerRecentColors] = useDefaultValue(
       recentColors,
       props.defaultRecentColors,

packages/components/date-picker/hooks/useRangeValue.ts

@@ -15,7 +15,7 @@ import {
 export function useRangeValue(props: TdDateRangePickerProps) {
   const { value: valueFromProps, modelValue } = toRefs(props);
 
-  const [value, onChange] = useVModel(valueFromProps, modelValue, props.defaultValue, props.onChange);
+  const [value, onChange] = useVModel(valueFromProps, modelValue, props.defaultValue, 'onChange');
 
   const formatRef = computed(() =>
     getDefaultFormat({

packages/components/date-picker/hooks/useSingleValue.tsx

@@ -12,7 +12,7 @@ import { TdDatePickerProps, DateMultipleValue, DateValue } from '../type';
 
 export function useSingleValue(props: TdDatePickerProps) {
   const { value: valueFromProps, modelValue } = toRefs(props);
-  const [value, onChange] = useVModel(valueFromProps, modelValue, props.defaultValue, props.onChange);
+  const [value, onChange] = useVModel(valueFromProps, modelValue, props.defaultValue, 'onChange');
 
   const formatRef = computed(() =>
     getDefaultFormat({

packages/components/guide/guide.tsx

@@ -21,13 +21,7 @@ export default defineComponent({
     const { globalConfig } = useConfig('guide');
 
     const { current, modelValue, hideCounter, hidePrev, hideSkip, steps, zIndex } = toRefs(props);
-    const [innerCurrent, setInnerCurrent] = useVModel(
-      current,
-      modelValue,
-      props.defaultCurrent,
-      props.onChange,
-      'current',
-    );
+    const [innerCurrent, setInnerCurrent] = useVModel(current, modelValue, props.defaultCurrent, 'onChange', 'current');
 
     // 覆盖层，用于覆盖所有元素
     const overlayLayerRef = ref<HTMLElement>();

packages/components/image-viewer/image-viewer.tsx

@@ -33,7 +33,7 @@ export default defineComponent({
 
     const { index, visible, modelValue, imageReferrerpolicy } = toRefs(props);
     const [indexValue, setIndexValue] = useDefaultValue(index, props.defaultIndex ?? 0, props.onIndexChange, 'index');
-    const [visibleValue, setVisibleValue] = useVModel(visible, modelValue, props.defaultVisible, () => {}, 'visible');
+    const [visibleValue, setVisibleValue] = useVModel(visible, modelValue, props.defaultVisible, '', 'visible');
     const animationEnd = ref(true);
     const animationTimer = ref();
     // teleport容器

packages/components/input-number/hooks/useInputNumber.tsx

@@ -25,7 +25,7 @@ export default function useInputNumber(props: TdInputNumberProps) {
   const { classPrefix, SIZE, STATUS } = useCommonClassName();
   const { value, modelValue, max, min } = toRefs(props);
   // 统一处理受控、非受控、语法糖 v-model 等
-  const [tValue, setTValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+  const [tValue, setTValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
   const inputRef = ref();
   const userInput = ref('');
 

packages/components/input/hooks/useInput.ts

@@ -26,7 +26,7 @@ export function useInput(props: ExtendsTdInputProps, expose: (exposed: Record<st
   const innerClickElement = ref();
   const disabled = useDisabled();
   const readonly = useReadonly();
-  const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+  const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
 
   const isHover = ref(false);
   const focused = ref(false);

packages/components/menu/head-menu.tsx

@@ -38,7 +38,7 @@ export default defineComponent({
       }
     });
     const { value, modelValue, expanded } = toRefs(props);
-    const [activeValue, setActiveValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+    const [activeValue, setActiveValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
     const [expandValues, setExpanded] = useDefaultValue(expanded, props.defaultExpanded, props.onExpand, 'expanded');
     const activeValues = ref([]);
     const theme = computed(() => props.theme);

packages/components/menu/menu.tsx

@@ -41,7 +41,7 @@ export default defineComponent({
     }));
 
     const { value, modelValue, expanded } = toRefs(props);
-    const [activeValue, setActiveValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+    const [activeValue, setActiveValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
     const [expandValues, setExpand] = useDefaultValue(expanded, props.defaultExpanded, props.onExpand, 'expanded');
     const activeValues = ref([]);
 

packages/components/pagination/pagination.tsx

@@ -43,7 +43,7 @@ export default defineComponent({
       current,
       modelValue,
       props.defaultCurrent,
-      props.onCurrentChange,
+      'onCurrentChange',
       'current',
     );
 

packages/components/popconfirm/popconfirm.tsx

@@ -37,7 +37,7 @@ export default defineComponent({
       visible,
       modelValue,
       props.defaultVisible,
-      props.onVisibleChange,
+      'onVisibleChange',
       'visible',
     );
 

packages/components/popup/popup.tsx

@@ -95,7 +95,7 @@ export default defineComponent({
       propVisible,
       modelValue,
       props.defaultVisible,
-      props.onVisibleChange,
+      'onVisibleChange',
       'visible',
     );
     const renderTNodeJSX = useTNodeJSX();

packages/components/radio/group.tsx

@@ -37,7 +37,7 @@ export default defineComponent({
   props,
   setup(props) {
     const { value, modelValue } = toRefs(props);
-    const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+    const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
 
     /** calculate bar style */
     const radioGroupRef = ref<HTMLElement>();

packages/components/radio/radio.tsx

@@ -22,13 +22,7 @@ export default defineComponent({
   setup(props, { attrs }) {
     const inputRef = ref();
     const { checked, modelValue } = toRefs(props);
-    const [innerChecked, setInnerChecked] = useVModel(
-      checked,
-      modelValue,
-      props.defaultChecked,
-      props.onChange,
-      'checked',
-    );
+    const [innerChecked, setInnerChecked] = useVModel(checked, modelValue, props.defaultChecked, 'onChange', 'checked');
 
     const radioChecked = computed(() => (radioGroup ? props.value === radioGroup.value : innerChecked.value));
 

packages/components/range-input/range-input.tsx

@@ -44,7 +44,7 @@ export default defineComponent({
     const format = computed(() => calcArrayValue(props.format));
     const inputProps = computed(() => calcArrayValue(props.inputProps));
     const placeholder = computed(() => calcArrayValue(props.placeholder));
-    const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+    const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
 
     const inputValue = computed(() => String((innerValue.value?.[0] || innerValue.value?.[1]) ?? ''));
 

packages/components/rate/rate.tsx

@@ -17,7 +17,7 @@ export default defineComponent({
     const defaultColor = isArray(props.color) ? props.color[1] : 'var(--td-bg-color-component)';
 
     const { value: inputValue, modelValue } = toRefs(props);
-    const [starValue, setStarValue] = useVModel(inputValue, modelValue, props.defaultValue, props.onChange);
+    const [starValue, setStarValue] = useVModel(inputValue, modelValue, props.defaultValue, 'onChange');
 
     const hoverValue = ref(undefined);
     const root = ref<HTMLTableElement>();

packages/components/select/select.tsx

@@ -51,7 +51,7 @@ export default defineComponent({
       props.onInputChange,
       'inputValue',
     );
-    const [orgValue, setOrgValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+    const [orgValue, setOrgValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
     const selectPanelRef = ref(null);
     const selectInputRef = ref(null);
     const keys = computed(() => ({

packages/components/slider/slider.tsx

@@ -38,7 +38,7 @@ export default defineComponent({
     const COMPONENT_NAME = usePrefixClass('slider');
     const { STATUS } = useCommonClassName();
     const { value, modelValue } = toRefs(props) as any;
-    const [sliderValue, setSliderValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+    const [sliderValue, setSliderValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
 
     const sliderContainerRef = ref<HTMLDivElement>();
     const sliderRef = ref<HTMLDivElement>();

packages/components/steps/steps.tsx

@@ -14,13 +14,7 @@ export default defineComponent({
     const COMPONENT_NAME = usePrefixClass('steps');
 
     const { current, modelValue } = toRefs(props);
-    const [innerCurrent, setInnerCurrent] = useVModel(
-      current,
-      modelValue,
-      props.defaultCurrent,
-      props.onChange,
-      'current',
-    );
+    const [innerCurrent, setInnerCurrent] = useVModel(current, modelValue, props.defaultCurrent, 'onChange', 'current');
 
     provide(
       'StepsState',

packages/components/switch/switch.tsx

@@ -17,7 +17,7 @@ export default defineComponent({
     const { STATUS, SIZE } = useCommonClassName();
     // values
     const { value, modelValue } = toRefs(props);
-    const [innerValue, setSwitchVal] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+    const [innerValue, setSwitchVal] = useVModel(value, modelValue, props.defaultValue, 'onChange');
 
     const activeValue = computed(() => {
       if (props.customValue && props.customValue.length > 0) {

packages/components/tabs/tabs.tsx

@@ -21,7 +21,7 @@ export default defineComponent({
     const renderTNodeJSX = useTNodeJSX();
 
     const { value, modelValue } = toRefs(props);
-    const [tabValue, setTabValue] = useVModel(value, modelValue, props.defaultValue || '', props.onChange);
+    const [tabValue, setTabValue] = useVModel(value, modelValue, props.defaultValue || '', 'onChange');
 
     provide<InjectTabs>('tabs', { value: tabValue });
 

packages/components/tag-input/hooks/useTagList.tsx

@@ -13,7 +13,7 @@ export function useTagList(props: TagInputProps) {
   const classPrefix = usePrefixClass();
   const { value, modelValue, onRemove, max, minCollapsedNum, size, tagProps, getDragProps } = toRefs(props);
   // handle controlled property and uncontrolled property
-  const [_tagValue, setTagValue] = useVModel(value, modelValue, props.defaultValue || [], props.onChange);
+  const [_tagValue, setTagValue] = useVModel(value, modelValue, props.defaultValue || [], 'onChange');
   const tagValue = computed(() => _tagValue.value || []);
   const oldInputValue = ref<InputValue>();
 

packages/components/tag/check-tag-group.tsx

@@ -14,7 +14,7 @@ export default defineComponent({
     const componentName = usePrefixClass('check-tag-group');
     const checkTagGroupClasses = computed(() => [componentName.value]);
 
-    const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+    const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
 
     const onCheckTagChange: TdCheckTagProps['onChange'] = (checked, ctx) => {
       const value = ctx.value;

packages/components/tag/check-tag.tsx

@@ -15,13 +15,7 @@ export default defineComponent({
     const renderContent = useContent();
 
     const { checked, modelValue } = toRefs(props);
-    const [innerChecked, setInnerChecked] = useVModel(
-      checked,
-      modelValue,
-      props.defaultChecked,
-      props.onChange,
-      'checked',
-    );
+    const [innerChecked, setInnerChecked] = useVModel(checked, modelValue, props.defaultChecked, 'onChange', 'checked');
 
     const tagClass = computed(() => {
       return [

packages/components/textarea/textarea.tsx

@@ -44,7 +44,7 @@ export default defineComponent({
     const TEXTAREA_LIMIT = computed(() => `${name.value}__limit`);
 
     const { value, modelValue } = toRefs(props);
-    const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+    const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
     const disabled = useDisabled();
     const isReadonly = useReadonly();
     const textareaStyle = ref<CSSProperties>({});

packages/components/time-picker/time-picker.tsx

@@ -41,7 +41,7 @@ export default defineComponent({
     const isReadonly = useReadonly();
 
     const { value, modelValue } = toRefs(props);
-    const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+    const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
 
     const disabled = useDisabled();
     const { allowInput, format } = toRefs(props);

packages/components/time-picker/time-range-picker.tsx

@@ -49,7 +49,7 @@ export default defineComponent({
       },
     ]);
     const { value, modelValue, allowInput, format } = toRefs(props);
-    const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange as any);
+    const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
 
     const handleShowPopup = (visible: boolean, context: any) => {
       if (isReadOnly.value) return;

packages/components/tooltip/tooltip.tsx

@@ -23,7 +23,7 @@ export default defineComponent({
       visible,
       modelValue,
       props.defaultVisible,
-      props.onVisibleChange,
+      'onVisibleChange',
       'visible',
     );
     const vm = getCurrentInstance();

packages/components/transfer/transfer.tsx

@@ -29,7 +29,7 @@ export default defineComponent({
     const disabled = useDisabled();
     const classPrefix = usePrefixClass();
     const { value, modelValue, checked } = toRefs(props);
-    const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+    const [innerValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
     // @ts-ignore TODO
     const [innerChecked] = useDefaultValue(checked, props.defaultChecked, props.onCheckedChange, 'checked');
     const valueList = computed(() => innerValue.value);

packages/components/tree-select/tree-select.tsx

@@ -47,7 +47,7 @@ export default defineComponent({
 
     // model
     const { value, modelValue, popupVisible, inputValue } = toRefs(props);
-    const [treeSelectValue, setTreeSelectValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+    const [treeSelectValue, setTreeSelectValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
     const [innerVisible, setInnerVisible] = useDefaultValue(
       popupVisible,
       false,

packages/components/upload/hooks/useUpload.ts

@@ -23,7 +23,7 @@ export default function useUpload(props: TdUploadProps) {
   // TODO: Form 表单控制上传组件是否禁用
   const { disabled, autoUpload, isBatchUpload, multiple, files, modelValue, defaultFiles } = toRefs(props);
   const { globalConfig, t, classPrefix } = useConfig('upload');
-  const [uploadValue, setUploadValue] = useVModel(files, modelValue, defaultFiles.value, props.onChange, 'files');
+  const [uploadValue, setUploadValue] = useVModel(files, modelValue, defaultFiles.value, 'onChange', 'files');
   const xhrReq = ref<{ files: UploadFile[]; xhrReq: XMLHttpRequest }[]>([]);
   const toUploadFiles = ref<UploadFile[]>([]);
   const sizeOverLimitMessage = ref('');

packages/pro-components/chat/chat-input.tsx

@@ -13,7 +13,7 @@ export default defineComponent({
     const COMPONENT_NAME = usePrefixClass('chat');
     const { globalConfig } = useConfig('chat');
     const { value, modelValue } = toRefs(props);
-    const [textValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+    const [textValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
     // 按钮禁用，
     const disabled = computed(() => props.stopDisabled);
     // textarea禁用，

packages/pro-components/chat/chat-reasoning.tsx

@@ -19,7 +19,7 @@ export default defineComponent({
       collapsed,
       modelValue,
       props.defaultCollapsed,
-      props.onExpandChange,
+      'onExpandChange',
       'collapsed',
     );
 

packages/pro-components/chat/chat-sender.tsx

@@ -18,7 +18,7 @@ export default defineComponent({
     const COMPONENT_NAME = usePrefixClass('chat');
     const { globalConfig } = useConfig('chat');
     const { value, modelValue } = toRefs(props);
-    const [textValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, props.onChange);
+    const [textValue, setInnerValue] = useVModel(value, modelValue, props.defaultValue, 'onChange');
 
     const focusFlag = ref(false);
     const showStopBtn = computed(() => props.loading || props.stopDisabled);