Merge remote-tracking branch 'origin/main' into feat-4.3

Author: tangjinzhou

CHANGELOG.en-US.md

@@ -10,6 +10,30 @@
 
 ---
 
+## 4.2.5
+
+- 🐞 Fix Empty component memory leak problem
+- 🐞 Fix Image width & height property not working problem
+
+## 4.2.4
+
+- 🐞 Fix Wave memory leak problem
+
+## 4.2.3
+
+- 🌟 TourStep custom Button, support function children [#7628](https://github.com/vueComponent/ant-design-vue/pull/7628)
+- 🐞 Fix the problem that the input value is hidden in Select and Cascader search multi-select mode [#7640](https://github.com/vueComponent/ant-design-vue/issues/7640)
+
+## 4.2.2
+
+- 🐞 Fix TreeSelect placeholder slot invalid [#7545](https://github.com/vueComponent/ant-design-vue/issues/7545)
+- 🐞 Fix Tree slot responsive invalid issue [40ad45](https://github.com/vueComponent/ant-design-vue/commit/40ad45bc05b2bf9d0a2445d9f6ff365468ba90b7)
+- 🐞 Fix FloatButton target type error issue [#7576](https://github.com/vueComponent/ant-design-vue/issues/7576)
+- 🐞 Fix FormItem className error issue [#7582](https://github.com/vueComponent/ant-design-vue/issues/7582)
+- 🐞 Fix Input Cannot input problem under lazy [#7543](https://github.com/vueComponent/ant-design-vue/issues/7543)
+- 🐞 Fix the problem that placeholder is not hidden when inputting Chinese in Select [#7611](https://github.com/vueComponent/ant-design-vue/issues/7611)
+- 🐞 Fix the problem that the pop-up window flashes when clicking the preset option in DatePicker [#7550](https://github.com/vueComponent/ant-design-vue/issues/7550)
+
 ## 4.2.1
 
 - 🐞 fix Input clear action error [#7523](https://github.com/vueComponent/ant-design-vue/issues/7523)

CHANGELOG.zh-CN.md

@@ -10,6 +10,30 @@
 
 ---
 
+## 4.2.5
+
+- 🐞 修复 Empty 组件内存泄漏问题
+- 🐞 修复 Image width & height 属性不生效问题
+
+## 4.2.4
+
+- 🐞 修复 Wave 内存泄漏问题
+
+## 4.2.3
+
+- 🌟 TourStep 自定义 Button，支持函数 children [#7628](https://github.com/vueComponent/ant-design-vue/pull/7628)
+- 🐞 修复 Select 和 Cascader 搜索多选模式下，输入值被隐藏问题 [#7640](https://github.com/vueComponent/ant-design-vue/issues/7640)
+
+## 4.2.2
+
+- 🐞 修复 TreeSelect placeholder 插槽无效 [#7545](https://github.com/vueComponent/ant-design-vue/issues/7545)
+- 🐞 修复 Tree 插槽响应式无效问题 [40ad45](https://github.com/vueComponent/ant-design-vue/commit/40ad45bc05b2bf9d0a2445d9f6ff365468ba90b7)
+- 🐞 修复 FloatButton target 类型错误问题 [#7576](https://github.com/vueComponent/ant-design-vue/issues/7576)
+- 🐞 修复 FormItem className 错误问题 [#7582](https://github.com/vueComponent/ant-design-vue/issues/7582)
+- 🐞 修复 Input lazy 下无法输入问题 [#7543](https://github.com/vueComponent/ant-design-vue/issues/7543)
+- 🐞 修复 Select 输入中文时，placeholder 未隐藏问题 [#7611](https://github.com/vueComponent/ant-design-vue/issues/7611)
+- 🐞 修复 DatePicker 点击预设选项时，弹窗闪动问题 [#7550](https://github.com/vueComponent/ant-design-vue/issues/7550)
+
 ## 4.2.1
 
 - 🐞 修复 Input 清空操作才报错问题 [#7523](https://github.com/vueComponent/ant-design-vue/issues/7523)

README-zh_CN.md

@@ -10,7 +10,7 @@
 
 <div align="center">
 
-An enterprise-class UI components based on Ant Design and Vue 3.
+基于 Ant Design 和 Vue 3 的企业级 UI 组件库。
 
 ![test](https://github.com/vueComponent/ant-design-vue/workflows/test/badge.svg) [![codecov](https://img.shields.io/codecov/c/github/vueComponent/ant-design-vue/master.svg?style=flat-square)](https://codecov.io/gh/vueComponent/ant-design-vue) [![npm package](https://img.shields.io/npm/v/ant-design-vue.svg?style=flat-square)](https://www.npmjs.org/package/ant-design-vue) [![NPM downloads](http://img.shields.io/npm/dm/ant-design-vue.svg?style=flat-square)](http://www.npmtrends.com/ant-design-vue) [![backers](https://opencollective.com/ant-design-vue/backers/badge.svg)](#backers) [![sponsors](https://opencollective.com/ant-design-vue/sponsors/badge.svg)](#sponsors) [![extension-for-VSCode](https://img.shields.io/badge/extension%20for-VSCode-blue.svg?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper) [![issues-helper](https://img.shields.io/badge/Issues%20Manage%20By-issues--helper-orange?style=flat-square)](https://github.com/actions-cool/issues-helper)
 
@@ -90,21 +90,21 @@ ant-design-vue 是 MIT 协议的开源项目。为了项目能够更好的持续
 - [支付宝或微信](https://aliyuncdn.antdv.com/alipay-and-wechat.png)
 - ETH: 0x30cc48515d8ae9fefa20ab87226ad7e8ab9c3bc2
 
-## Sponsors
+## 赞助商
 
-Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/ant-design-vue#sponsor)]
+成为赞助商，并在 Github 上的自述文件上获得您的徽标，并链接到您的网站。 [[成为赞助商](https://opencollective.com/ant-design-vue#sponsor)]
 
 <a href="http://www.jeecg.com/" target="_blank"><img src="https://aliyuncdn.antdv.com/jeecg-logo.png" height="64"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/9/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/10/avatar.svg"></a>
 
-## Backers
+## 支持者
 
-Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/ant-design-vue#backer)]
+每月捐款支持我们，帮助我们继续我们的活动。 [[成为支持者](https://opencollective.com/ant-design-vue#backer)]
 
 <a href="https://github.com/chuzhixin/vue-admin-beautiful" target="_blank"><img width="64" style="border-radius: 50%;" src="https://gitee.com/chu1204505056/image/raw/master/vue-admin-beautiful.png" title="vue-admin-beautiful"></a> <a href="https://opencollective.com/ant-design-vue/backer/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/0/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/1/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/2/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/3/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/4/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/5/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/6/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/7/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/8/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/9/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/backer/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/backer/10/avatar.svg"></a>
 
 ## Patreon
 
-Support us with a monthly donation and help us continue our activities. [[Become a backer](https://www.patreon.com/tangjinzhou)]
+每月捐款支持我们，帮助我们继续我们的活动。 [[成为支持者](https://www.patreon.com/tangjinzhou)]
 
 <a href="https://www.mokeyjay.com" target="_blank"><img  width="64" style="border-radius: 50%;" src="https://www.mokeyjay.com/headimg.png" title="donation by Patreon"></a>
 

components/_util/BaseInput.tsx

@@ -1,6 +1,9 @@
 import type { PropType } from 'vue';
-import { defineComponent, shallowRef, ref, watch } from 'vue';
+import { computed, defineComponent, shallowRef, ref, watch } from 'vue';
 import PropTypes from './vue-types';
+import type { BaseInputInnerExpose } from './BaseInputInner';
+import BaseInputInner from './BaseInputInner';
+import { styleObjectToString } from '../vc-util/Dom/css';
 
 export interface BaseInputExpose {
   focus: () => void;
@@ -30,6 +33,8 @@ const BaseInput = defineComponent({
       default: 'input',
     },
     size: PropTypes.string,
+    style: PropTypes.oneOfType([String, Object]),
+    class: PropTypes.string,
   },
   emits: [
     'change',
@@ -40,9 +45,11 @@ const BaseInput = defineComponent({
     'compositionstart',
     'compositionend',
     'keyup',
+    'paste',
+    'mousedown',
   ],
   setup(props, { emit, attrs, expose }) {
-    const inputRef = shallowRef(null);
+    const inputRef = shallowRef<BaseInputInnerExpose>(null);
     const renderValue = ref();
     const isComposing = ref(false);
     watch(
@@ -68,6 +75,7 @@ const BaseInput = defineComponent({
       const event = document.createEvent('HTMLEvents');
       event.initEvent('input', true, true);
       e.target.dispatchEvent(event);
+      handleChange(e);
     };
     const handleInput = (e: Event) => {
       if (isComposing.value && props.lazy) {
@@ -114,19 +122,31 @@ const BaseInput = defineComponent({
     expose({
       focus,
       blur,
-      input: inputRef,
+      input: computed(() => inputRef.value?.input),
       setSelectionRange,
       select,
-      getSelectionStart: () => inputRef.value?.selectionStart,
-      getSelectionEnd: () => inputRef.value?.selectionEnd,
-      getScrollTop: () => inputRef.value?.scrollTop,
+      getSelectionStart: () => inputRef.value?.getSelectionStart(),
+      getSelectionEnd: () => inputRef.value?.getSelectionEnd(),
+      getScrollTop: () => inputRef.value?.getScrollTop(),
+    });
+    const handleMousedown = (e: MouseEvent) => {
+      emit('mousedown', e);
+    };
+    const handlePaste = (e: ClipboardEvent) => {
+      emit('paste', e);
+    };
+    const styleString = computed(() => {
+      return props.style && typeof props.style !== 'string'
+        ? styleObjectToString(props.style)
+        : props.style;
     });
     return () => {
-      const { tag: Tag, ...restProps } = props;
+      const { style, lazy, ...restProps } = props;
       return (
-        <Tag
+        <BaseInputInner
           {...restProps}
           {...attrs}
+          style={styleString.value}
           onInput={handleInput}
           onChange={handleChange}
           onBlur={handleBlur}
@@ -137,6 +157,8 @@ const BaseInput = defineComponent({
           onCompositionend={onCompositionend}
           onKeyup={handleKeyUp}
           onKeydown={handleKeyDown}
+          onPaste={handlePaste}
+          onMousedown={handleMousedown}
         />
       );
     };

components/_util/BaseInputInner.tsx

@@ -0,0 +1,96 @@
+import type { PropType } from 'vue';
+import { defineComponent, shallowRef } from 'vue';
+import PropTypes from './vue-types';
+
+export interface BaseInputInnerExpose {
+  focus: () => void;
+  blur: () => void;
+  input: HTMLInputElement | HTMLTextAreaElement | null;
+  setSelectionRange: (
+    start: number,
+    end: number,
+    direction?: 'forward' | 'backward' | 'none',
+  ) => void;
+  select: () => void;
+  getSelectionStart: () => number | null;
+  getSelectionEnd: () => number | null;
+  getScrollTop: () => number | null;
+  setScrollTop: (scrollTop: number) => void;
+}
+const BaseInputInner = defineComponent({
+  compatConfig: { MODE: 3 },
+  // inheritAttrs: false,
+  props: {
+    disabled: PropTypes.looseBool,
+    type: PropTypes.string,
+    value: PropTypes.any,
+    tag: {
+      type: String as PropType<'input' | 'textarea'>,
+      default: 'input',
+    },
+    size: PropTypes.string,
+    onChange: Function as PropType<(e: Event) => void>,
+    onInput: Function as PropType<(e: Event) => void>,
+    onBlur: Function as PropType<(e: Event) => void>,
+    onFocus: Function as PropType<(e: Event) => void>,
+    onKeydown: Function as PropType<(e: Event) => void>,
+    onCompositionstart: Function as PropType<(e: Event) => void>,
+    onCompositionend: Function as PropType<(e: Event) => void>,
+    onKeyup: Function as PropType<(e: Event) => void>,
+    onPaste: Function as PropType<(e: Event) => void>,
+    onMousedown: Function as PropType<(e: Event) => void>,
+  },
+  emits: [
+    'change',
+    'input',
+    'blur',
+    'keydown',
+    'focus',
+    'compositionstart',
+    'compositionend',
+    'keyup',
+    'paste',
+    'mousedown',
+  ],
+  setup(props, { expose }) {
+    const inputRef = shallowRef(null);
+
+    const focus = () => {
+      if (inputRef.value) {
+        inputRef.value.focus();
+      }
+    };
+    const blur = () => {
+      if (inputRef.value) {
+        inputRef.value.blur();
+      }
+    };
+    const setSelectionRange = (
+      start: number,
+      end: number,
+      direction?: 'forward' | 'backward' | 'none',
+    ) => {
+      inputRef.value?.setSelectionRange(start, end, direction);
+    };
+
+    const select = () => {
+      inputRef.value?.select();
+    };
+    expose({
+      focus,
+      blur,
+      input: inputRef,
+      setSelectionRange,
+      select,
+      getSelectionStart: () => inputRef.value?.selectionStart,
+      getSelectionEnd: () => inputRef.value?.selectionEnd,
+      getScrollTop: () => inputRef.value?.scrollTop,
+    });
+    return () => {
+      const { tag: Tag, value, ...restProps } = props;
+      return <Tag {...restProps} ref={inputRef} value={value} />;
+    };
+  },
+});
+
+export default BaseInputInner;