From 1c82940160a804cbaaf393064314674b555153b8 Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 9 May 2024 21:21:20 +0800 Subject: [PATCH 01/40] docs: add Vite and Rsbuild to getting started (#7556) --- site/src/vueDocs/getting-started.en-US.md | 32 +++++++++++++++-------- site/src/vueDocs/getting-started.zh-CN.md | 30 ++++++++++++++------- 2 files changed, 41 insertions(+), 21 deletions(-) diff --git a/site/src/vueDocs/getting-started.en-US.md b/site/src/vueDocs/getting-started.en-US.md index b67fffe0a..dd37a749f 100644 --- a/site/src/vueDocs/getting-started.en-US.md +++ b/site/src/vueDocs/getting-started.en-US.md @@ -12,27 +12,37 @@ The following CodeSandbox demo is the simplest use case, and it's also a good ha ## Import ant-design-vue -### 1. Installation +### 1. Create a New Project -[vue-cli](https://github.com/vuejs/vue-cli) +If you need to create a new project, you can use [Vite](https://github.com/vitejs/vite), [Rsbuild](https://github.com/web-infra-dev/rsbuild), or [Vue CLI](https://github.com/vuejs/vue-cli). + +Please initialize the project using the command line: + +- Vite: + +```bash +$ npm create vite@latest +``` + +- Rsbuild: + +```bash +$ npm create rsbuild@latest +``` + +- Vue CLI: ```bash $ npm install -g @vue/cli # OR $ yarn global add @vue/cli -``` -### 2. Create a New Project - -A new project can be created using CLI tools. - -```bash $ vue create antd-demo ``` -And, setup your vue project configuration. +> Vue CLI is no longer maintained, so it is not recommended to use. -### 3. Use antd's Components +### 2. Use antd's Components #### Install @@ -95,7 +105,7 @@ In this way, component sub-components, such as Button and ButtonGroup, need to b ``` -### 4. Component list +### 3. Component list [Component list](https://github.com/vueComponent/ant-design-vue/blob/main/components/components.ts) diff --git a/site/src/vueDocs/getting-started.zh-CN.md b/site/src/vueDocs/getting-started.zh-CN.md index c0f97e5e7..a26b5e0ca 100644 --- a/site/src/vueDocs/getting-started.zh-CN.md +++ b/site/src/vueDocs/getting-started.zh-CN.md @@ -12,29 +12,39 @@ Ant Design Vue 致力于提供给程序员**愉悦**的开发体验。 ## 引入 ant-design-vue -### 1. 安装脚手架工具 +### 1. 新建项目 -[vue-cli](https://github.com/vuejs/vue-cli) +如果你需要新建一个项目，可以使用 [Vite](https://github.com/vitejs/vite)、[Rsbuild](https://github.com/web-infra-dev/rsbuild) 或 [Vue CLI](https://github.com/vuejs/vue-cli)。 + +请使用命令行来初始化项目： + +- Vite: + +```bash +$ npm create vite@latest +``` + +- Rsbuild: + +```bash +$ npm create rsbuild@latest +``` + +- Vue CLI: ```bash $ npm install -g @vue/cli # OR $ yarn global add @vue/cli -``` -### 2. 创建一个项目 - -使用命令行进行初始化。 - -```bash $ vue create antd-demo ``` -并配置项目。 +> Vue CLI 已经停止迭代，因此不推荐使用。 若安装缓慢报错，可尝试用 `cnpm` 或别的镜像源自行安装：`rm -rf node_modules && cnpm install`。 -### 3. 使用组件 +### 2. 使用组件 #### 安装 From 40ad45bc05b2bf9d0a2445d9f6ff365468ba90b7 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 4 Jun 2024 15:45:04 +0800 Subject: [PATCH 02/40] fix: tree reative data error --- components/vc-tree/Tree.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/vc-tree/Tree.tsx b/components/vc-tree/Tree.tsx index dc4defb77..dc963f7f3 100644 --- a/components/vc-tree/Tree.tsx +++ b/components/vc-tree/Tree.tsx @@ -110,7 +110,7 @@ export default defineComponent({ () => { treeData.value = props.treeData !== undefined - ? toRaw(props.treeData).slice() + ? props.treeData.slice() : convertTreeToData(toRaw(props.children)); }, { From 014e86bd27fe4b7fba3bc69b78349b0cdf500c3e Mon Sep 17 00:00:00 2001 From: Kylin <75473409+lxKylin@users.noreply.github.com> Date: Tue, 4 Jun 2024 15:49:47 +0800 Subject: [PATCH 03/40] docs: update README-zh_CN (#7584) --- README-zh_CN.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README-zh_CN.md b/README-zh_CN.md index 4f098de14..c67223107 100644 --- a/README-zh_CN.md +++ b/README-zh_CN.md @@ -10,7 +10,7 @@
-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)] -## 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)] ## 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)] From 9c27414cd07f3f92fb6157a0500c154426f4fd08 Mon Sep 17 00:00:00 2001 From: selicens <1244620067@qq.com> Date: Tue, 4 Jun 2024 15:57:40 +0800 Subject: [PATCH 04/40] fix(FloatButton): type prompt error (#7576) --- components/float-button/interface.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/float-button/interface.ts b/components/float-button/interface.ts index 6561910b8..da5b25c2f 100644 --- a/components/float-button/interface.ts +++ b/components/float-button/interface.ts @@ -20,7 +20,7 @@ export const floatButtonProps = () => { shape: stringType('circle'), tooltip: PropTypes.any, href: String, - target: functionType<() => Window | HTMLElement | null>(), + target: stringType<'_self' | '_blank' | '_parent' | '_top'>(), badge: objectType(), onClick: functionType(), }; From 085eb398a4f4737ac661f00bbf871bdac05f9fcc Mon Sep 17 00:00:00 2001 From: selicens <1244620067@qq.com> Date: Tue, 4 Jun 2024 16:00:40 +0800 Subject: [PATCH 05/40] fix(FormItem): class name error (#7582) --- components/form/FormItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx index df70f8e6f..6a0608de4 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -494,7 +494,7 @@ export default defineComponent({ > ( From 33a0708eb428e633c93e7f8ea3c8bb7e88fc16c7 Mon Sep 17 00:00:00 2001 From: selicens <1244620067@qq.com> Date: Tue, 4 Jun 2024 16:01:26 +0800 Subject: [PATCH 06/40] docs: upgrade document link direction error (#7602) --- site/src/vueDocs/migration-v4.en-US.md | 2 +- site/src/vueDocs/migration-v4.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/vueDocs/migration-v4.en-US.md b/site/src/vueDocs/migration-v4.en-US.md index a24d9a25b..2c5fe6b69 100644 --- a/site/src/vueDocs/migration-v4.en-US.md +++ b/site/src/vueDocs/migration-v4.en-US.md @@ -153,7 +153,7 @@ Remove `babel-plugin-import` from package.json and modify `.babelrc`: ### Legacy browser support -Ant Design Vue v4 using `:where` css selector to reduce CSS-in-JS hash priority. You can use `StyleProvider` to cancel this function. Please ref [Compatible adjustment](/docs/vue/customize-theme#compatible-adjustment). +Ant Design Vue v4 using `:where` css selector to reduce CSS-in-JS hash priority. You can use `StyleProvider` to cancel this function. Please ref [Compatible adjustment](/docs/vue/compatible-style). ## Encounter problems diff --git a/site/src/vueDocs/migration-v4.zh-CN.md b/site/src/vueDocs/migration-v4.zh-CN.md index 3b9c984ee..15b596225 100644 --- a/site/src/vueDocs/migration-v4.zh-CN.md +++ b/site/src/vueDocs/migration-v4.zh-CN.md @@ -155,7 +155,7 @@ or ### 旧版浏览器兼容 -Ant Design Vue v4 使用 `:where` css selector 降低 CSS-in-JS hash 值优先级，如果你需要支持旧版本浏览器（如 IE 11、360 浏览器 等等）。可以通过 `StyleProvider` 去除降权操作。详情请参阅 [兼容性调整](/docs/vue/customize-theme-cn#兼容性调整)。 +Ant Design Vue v4 使用 `:where` css selector 降低 CSS-in-JS hash 值优先级，如果你需要支持旧版本浏览器（如 IE 11、360 浏览器 等等）。可以通过 `StyleProvider` 去除降权操作。详情请参阅 [兼容性调整](/docs/vue/compatible-style-cn)。 ## 遇到问题 From f42d8ad1ce5f011a3d7ca2dd8a4ae8afbfb0358a Mon Sep 17 00:00:00 2001 From: extclp <2842417407@qq.com> Date: Tue, 4 Jun 2024 16:05:21 +0800 Subject: [PATCH 07/40] chore: remove css-animation (#7613) * chore: remove css-animate * chore(site): remove localStorage support check --- components/_util/css-animation/Event.js | 130 -------------- components/_util/css-animation/index.js | 186 -------------------- components/_util/isCssAnimationSupported.js | 24 --- components/config-provider/index.tsx | 3 +- site/src/layouts/header/Menu.vue | 6 +- site/src/utils/util.js | 33 ---- site/src/utils/util.ts | 12 -- 7 files changed, 3 insertions(+), 391 deletions(-) delete mode 100644 components/_util/css-animation/Event.js delete mode 100644 components/_util/css-animation/index.js delete mode 100644 components/_util/isCssAnimationSupported.js delete mode 100644 site/src/utils/util.js diff --git a/components/_util/css-animation/Event.js b/components/_util/css-animation/Event.js deleted file mode 100644 index cd5e87155..000000000 --- a/components/_util/css-animation/Event.js +++ /dev/null @@ -1,130 +0,0 @@ -const START_EVENT_NAME_MAP = { - transitionstart: { - transition: 'transitionstart', - WebkitTransition: 'webkitTransitionStart', - MozTransition: 'mozTransitionStart', - OTransition: 'oTransitionStart', - msTransition: 'MSTransitionStart', - }, - - animationstart: { - animation: 'animationstart', - WebkitAnimation: 'webkitAnimationStart', - MozAnimation: 'mozAnimationStart', - OAnimation: 'oAnimationStart', - msAnimation: 'MSAnimationStart', - }, -}; - -const END_EVENT_NAME_MAP = { - transitionend: { - transition: 'transitionend', - WebkitTransition: 'webkitTransitionEnd', - MozTransition: 'mozTransitionEnd', - OTransition: 'oTransitionEnd', - msTransition: 'MSTransitionEnd', - }, - - animationend: { - animation: 'animationend', - WebkitAnimation: 'webkitAnimationEnd', - MozAnimation: 'mozAnimationEnd', - OAnimation: 'oAnimationEnd', - msAnimation: 'MSAnimationEnd', - }, -}; - -const startEvents = []; -const endEvents = []; - -function detectEvents() { - const testEl = document.createElement('div'); - const style = testEl.style; - - if (!('AnimationEvent' in window)) { - delete START_EVENT_NAME_MAP.animationstart.animation; - delete END_EVENT_NAME_MAP.animationend.animation; - } - - if (!('TransitionEvent' in window)) { - delete START_EVENT_NAME_MAP.transitionstart.transition; - delete END_EVENT_NAME_MAP.transitionend.transition; - } - - function process(EVENT_NAME_MAP, events) { - for (const baseEventName in EVENT_NAME_MAP) { - if (EVENT_NAME_MAP.hasOwnProperty(baseEventName)) { - const baseEvents = EVENT_NAME_MAP[baseEventName]; - for (const styleName in baseEvents) { - if (styleName in style) { - events.push(baseEvents[styleName]); - break; - } - } - } - } - } - - process(START_EVENT_NAME_MAP, startEvents); - process(END_EVENT_NAME_MAP, endEvents); -} - -if (typeof window !== 'undefined' && typeof document !== 'undefined') { - detectEvents(); -} - -function addEventListener(node, eventName, eventListener) { - node.addEventListener(eventName, eventListener, false); -} - -function removeEventListener(node, eventName, eventListener) { - node.removeEventListener(eventName, eventListener, false); -} - -const TransitionEvents = { - // Start events - startEvents, - - addStartEventListener(node, eventListener) { - if (startEvents.length === 0) { - setTimeout(eventListener, 0); - return; - } - startEvents.forEach(startEvent => { - addEventListener(node, startEvent, eventListener); - }); - }, - - removeStartEventListener(node, eventListener) { - if (startEvents.length === 0) { - return; - } - startEvents.forEach(startEvent => { - removeEventListener(node, startEvent, eventListener); - }); - }, - - // End events - endEvents, - - addEndEventListener(node, eventListener) { - if (endEvents.length === 0) { - setTimeout(eventListener, 0); - return; - } - endEvents.forEach(endEvent => { - addEventListener(node, endEvent, eventListener); - }); - }, - - removeEndEventListener(node, eventListener) { - if (endEvents.length === 0) { - return; - } - endEvents.forEach(endEvent => { - removeEventListener(node, endEvent, eventListener); - }); - }, -}; - -export default TransitionEvents; diff --git a/components/_util/css-animation/index.js b/components/_util/css-animation/index.js deleted file mode 100644 index 86e399dec..000000000 --- a/components/_util/css-animation/index.js +++ /dev/null @@ -1,186 +0,0 @@ -// https://github.com/yiminghe/css-animation 1.5.0 - -import Event from './Event'; -import classes from '../component-classes'; -import { requestAnimationTimeout, cancelAnimationTimeout } from '../requestAnimationTimeout'; -import { inBrowser } from '../env'; - -const isCssAnimationSupported = Event.endEvents.length !== 0; -const capitalPrefixes = [ - 'Webkit', - 'Moz', - 'O', - // ms is special .... ! - 'ms', -]; -const prefixes = ['-webkit-', '-moz-', '-o-', 'ms-', '']; - -function getStyleProperty(node, name) { - if (inBrowser) return ''; - // old ff need null, https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle - const style = window.getComputedStyle(node, null); - let ret = ''; - for (let i = 0; i < prefixes.length; i++) { - ret = style.getPropertyValue(prefixes[i] + name); - if (ret) { - break; - } - } - return ret; -} - -function fixBrowserByTimeout(node) { - if (isCssAnimationSupported) { - const transitionDelay = parseFloat(getStyleProperty(node, 'transition-delay')) || 0; - const transitionDuration = parseFloat(getStyleProperty(node, 'transition-duration')) || 0; - const animationDelay = parseFloat(getStyleProperty(node, 'animation-delay')) || 0; - const animationDuration = parseFloat(getStyleProperty(node, 'animation-duration')) || 0; - const time = Math.max(transitionDuration + transitionDelay, animationDuration + animationDelay); - // sometimes, browser bug - node.rcEndAnimTimeout = setTimeout(() => { - node.rcEndAnimTimeout = null; - if (node.rcEndListener) { - node.rcEndListener(); - } - }, time * 1000 + 200); - } -} - -function clearBrowserBugTimeout(node) { - if (node.rcEndAnimTimeout) { - clearTimeout(node.rcEndAnimTimeout); - node.rcEndAnimTimeout = null; - } -} - -const cssAnimation = (node, transitionName, endCallback) => { - const nameIsObj = typeof transitionName === 'object'; - const className = nameIsObj ? transitionName.name : transitionName; - const activeClassName = nameIsObj ? transitionName.active : `${transitionName}-active`; - let end = endCallback; - let start; - let active; - const nodeClasses = classes(node); - - if (endCallback && Object.prototype.toString.call(endCallback) === '[object Object]') { - end = endCallback.end; - start = endCallback.start; - active = endCallback.active; - } - - if (node.rcEndListener) { - node.rcEndListener(); - } - - node.rcEndListener = e => { - if (e && e.target !== node) { - return; - } - - if (node.rcAnimTimeout) { - cancelAnimationTimeout(node.rcAnimTimeout); - node.rcAnimTimeout = null; - } - - clearBrowserBugTimeout(node); - - nodeClasses.remove(className); - nodeClasses.remove(activeClassName); - - Event.removeEndEventListener(node, node.rcEndListener); - node.rcEndListener = null; - - // Usually this optional end is used for informing an owner of - // a leave animation and telling it to remove the child. - if (end) { - end(); - } - }; - - Event.addEndEventListener(node, node.rcEndListener); - - if (start) { - start(); - } - nodeClasses.add(className); - - node.rcAnimTimeout = requestAnimationTimeout(() => { - node.rcAnimTimeout = null; - - nodeClasses.add(className); - nodeClasses.add(activeClassName); - - if (active) { - requestAnimationTimeout(active, 0); - } - fixBrowserByTimeout(node); - // 30ms for firefox - }, 30); - - return { - stop() { - if (node.rcEndListener) { - node.rcEndListener(); - } - }, - }; -}; - -cssAnimation.style = (node, style, callback) => { - if (node.rcEndListener) { - node.rcEndListener(); - } - - node.rcEndListener = e => { - if (e && e.target !== node) { - return; - } - - if (node.rcAnimTimeout) { - cancelAnimationTimeout(node.rcAnimTimeout); - node.rcAnimTimeout = null; - } - - clearBrowserBugTimeout(node); - - Event.removeEndEventListener(node, node.rcEndListener); - node.rcEndListener = null; - - // Usually this optional callback is used for informing an owner of - // a leave animation and telling it to remove the child. - if (callback) { - callback(); - } - }; - - Event.addEndEventListener(node, node.rcEndListener); - - node.rcAnimTimeout = requestAnimationTimeout(() => { - for (const s in style) { - if (style.hasOwnProperty(s)) { - node.style[s] = style[s]; - } - } - node.rcAnimTimeout = null; - fixBrowserByTimeout(node); - }, 0); -}; - -cssAnimation.setTransition = (node, p, value) => { - let property = p; - let v = value; - if (value === undefined) { - v = property; - property = ''; - } - property = property || ''; - capitalPrefixes.forEach(prefix => { - node.style[`${prefix}Transition${property}`] = v; - }); -}; - -cssAnimation.isCssAnimationSupported = isCssAnimationSupported; - -export { isCssAnimationSupported }; - -export default cssAnimation; diff --git a/components/_util/isCssAnimationSupported.js b/components/_util/isCssAnimationSupported.js deleted file mode 100644 index 45d51bb35..000000000 --- a/components/_util/isCssAnimationSupported.js +++ /dev/null @@ -1,24 +0,0 @@ -let animation; - -function isCssAnimationSupported() { - if (animation !== undefined) { - return animation; - } - const domPrefixes = 'Webkit Moz O ms Khtml'.split(' '); - const elm = document.createElement('div'); - if (elm.style.animationName !== undefined) { - animation = true; - } - if (animation !== undefined) { - for (let i = 0; i < domPrefixes.length; i++) { - if (elm.style[`${domPrefixes[i]}AnimationName`] !== undefined) { - animation = true; - break; - } - } - } - animation = animation || false; - return animation; -} - -export default isCssAnimationSupported; diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 036238ccb..5b09ec16b 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -1,4 +1,4 @@ -import type { App, Plugin, WatchStopHandle } from 'vue'; +import type { App, MaybeRef, Plugin, WatchStopHandle } from 'vue'; import { watch, computed, reactive, defineComponent, watchEffect } from 'vue'; import defaultRenderEmpty from './renderEmpty'; import type { RenderEmptyHandler } from './renderEmpty'; @@ -7,7 +7,6 @@ import LocaleProvider, { ANT_MARK } from '../locale-provider'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; -import type { MaybeRef } from '../_util/type'; import message from '../message'; import notification from '../notification'; import { registerTheme } from './cssVariables'; diff --git a/site/src/layouts/header/Menu.vue b/site/src/layouts/header/Menu.vue index 1c9e4937d..97d3c1a00 100644 --- a/site/src/layouts/header/Menu.vue +++ b/site/src/layouts/header/Menu.vue @@ -37,7 +37,7 @@ import More from './More.vue'; import Navigation from './Navigation.vue'; import Ecosystem from './Ecosystem.vue'; import { version } from 'ant-design-vue'; -import { isZhCN, isLocalStorageNameSupported, getLocalizedPathname } from '../../utils/util'; +import { isZhCN, getLocalizedPathname } from '../../utils/util'; import { useRoute } from 'vue-router'; export default defineComponent({ name: 'HeaderMenu', @@ -58,9 +58,7 @@ export default defineComponent({ const currentProtocol = `${window.location.protocol}//`; const currentHref = window.location.href.substring(currentProtocol.length); - if (isLocalStorageNameSupported()) { - localStorage.setItem('locale', isZhCN(pathname) ? 'en-US' : 'zh-CN'); - } + localStorage.setItem('locale', isZhCN(pathname) ? 'en-US' : 'zh-CN'); window.location.href = currentProtocol + diff --git a/site/src/utils/util.js b/site/src/utils/util.js deleted file mode 100644 index 2ee6e53af..000000000 --- a/site/src/utils/util.js +++ /dev/null @@ -1,33 +0,0 @@ -export function isZhCN(name) { - return /-cn\/?$/.test(name); -} -export function isLocalStorageNameSupported() { - const testKey = 'test'; - const storage = window.localStorage; - try { - storage.setItem(testKey, '1'); - storage.removeItem(testKey); - return true; - } catch (error) { - return false; - } -} -export function getLocalizedPathname(path, zhCN, query = {}, hash) { - const pathname = path.startsWith('/') ? path : `/${path}`; - let fullPath; - if (!zhCN) { - // to enUS - fullPath = /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', ''); - } else if (pathname === '/') { - fullPath = '/index-cn'; - } else if (pathname.endsWith('/')) { - fullPath = pathname.replace(/\/$/, '-cn/'); - } else { - fullPath = `${pathname}-cn`; - } - if (hash) { - const localHash = hash[zhCN ? 'zhCN' : 'enUS']; - fullPath += `#${localHash}`; - } - return { path: fullPath, query }; -} diff --git a/site/src/utils/util.ts b/site/src/utils/util.ts index 6b1156746..753105a11 100644 --- a/site/src/utils/util.ts +++ b/site/src/utils/util.ts @@ -2,18 +2,6 @@ export function isZhCN(name: string): boolean { return /-cn\/?$/.test(name); } -export function isLocalStorageNameSupported() { - const testKey = 'test'; - const storage = window.localStorage; - try { - storage.setItem(testKey, '1'); - storage.removeItem(testKey); - return true; - } catch (error) { - return false; - } -} - export function getLocalizedPathname( path: string, zhCN?: boolean, From aeda2637f681122c822323e050b6dbb875e6b99c Mon Sep 17 00:00:00 2001 From: selicens <1244620067@qq.com> Date: Tue, 4 Jun 2024 16:10:46 +0800 Subject: [PATCH 08/40] fix(Input): Chinese input is invalid when the modifier is lazy (#7543) --- components/_util/BaseInput.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/_util/BaseInput.tsx b/components/_util/BaseInput.tsx index b01256715..4650d80e6 100644 --- a/components/_util/BaseInput.tsx +++ b/components/_util/BaseInput.tsx @@ -68,6 +68,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) { From afebeb9fface9d5a72baa1cf8cd037c2897df5bd Mon Sep 17 00:00:00 2001 From: bsuooo <91053541+bsuooo@users.noreply.github.com> Date: Tue, 4 Jun 2024 16:12:20 +0800 Subject: [PATCH 09/40] docs(DatePicker): updating deprecated API (#7570) --- components/date-picker/index.en-US.md | 2 +- components/date-picker/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index dd071b05a..2b84c13cd 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -85,7 +85,7 @@ The following APIs are shared by DatePicker, RangePicker. | disabled | Determine whether the DatePicker is disabled | boolean | false | | | disabledDate | Specify the date that cannot be selected | (currentDate: dayjs) => boolean | - | | | format | To set the date format, refer to [dayjs](https://day.js.org/). When an array is provided, all values are used for parsing and first value is used for formatting, support [Custom Format](#components-date-picker-demo-format) | [formatType](#formattype) | `YYYY-MM-DD` | | -| dropdownClassName | To customize the className of the popup calendar | string | - | | +| popupClassName | To customize the className of the popup calendar | string | - | | | getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | | | inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | | | locale | Localization configuration | object | [default](https://github.com/vueComponent/ant-design-vue/blob/main/components/date-picker/locale/example.json) | | diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 8aa5fdcbd..f878261bb 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -86,7 +86,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3OpRQKcygo8AAA | disabled | 禁用 | boolean | false | | | disabledDate | 不可选择的日期 | (currentDate: dayjs) => boolean | - | | | format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs](https://day.js.org/docs/zh-CN/display/format)，支持[自定义格式](#components-date-picker-demo-format) | [formatType](#formattype) | `YYYY-MM-DD` | | -| dropdownClassName | 额外的弹出日历 className | string | - | | +| popupClassName | 额外的弹出日历 className | string | - | | | getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | | | inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | | | locale | 国际化配置 | object | [默认配置](https://github.com/vueComponent/ant-design-vue/blob/main/components/date-picker/locale/example.json) | - | From 307148e2df058f8bd295bdecd45405bc81382f25 Mon Sep 17 00:00:00 2001 From: lchrennew Date: Tue, 4 Jun 2024 16:13:11 +0800 Subject: [PATCH 10/40] fix: empty space-item are not been hidden (#7557) --- components/space/style/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/space/style/index.tsx b/components/space/style/index.tsx index b10d56ce3..3125787aa 100644 --- a/components/space/style/index.tsx +++ b/components/space/style/index.tsx @@ -38,7 +38,7 @@ const genSpaceStyle: GenerateStyle = token => { alignItems: 'baseline', }, }, - [`${componentCls}-space-item`]: { + [`${componentCls}-item`]: { '&:empty': { display: 'none', }, From 6e2c5a6a83d5f83ec20a4f83a8319747d4ae2fe9 Mon Sep 17 00:00:00 2001 From: Carl Chen <71313168+cc-hearts@users.noreply.github.com> Date: Tue, 4 Jun 2024 18:59:24 +0800 Subject: [PATCH 11/40] fix[select]: fix placeholder error when inputting Chinese (#7611) * fix[select]: fix placeholder error when inputting Chinese fix(selector): fix placeholder error when inputting Chinese perf: optimize types * Update SingleSelector.tsx * Update index.tsx --------- Co-authored-by: tangjinzhou <415800467@qq.com> --- .../vc-select/Selector/SingleSelector.tsx | 10 ++++++++-- components/vc-select/Selector/index.tsx | 18 ++++++++++++------ 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/components/vc-select/Selector/SingleSelector.tsx b/components/vc-select/Selector/SingleSelector.tsx index c4eaa7464..50aa6ea42 100644 --- a/components/vc-select/Selector/SingleSelector.tsx +++ b/components/vc-select/Selector/SingleSelector.tsx @@ -1,7 +1,7 @@ import pickAttrs from '../../_util/pickAttrs'; import Input from './Input'; import type { InnerSelectorProps } from './interface'; -import { Fragment, computed, defineComponent, shallowRef, watch } from 'vue'; +import { Fragment, Ref, computed, defineComponent, shallowRef, watch } from 'vue'; import PropTypes from '../../_util/vue-types'; import type { VueNode } from '../../_util/type'; import useInjectLegacySelectContext from '../../vc-tree-select/LegacyContext'; @@ -10,6 +10,9 @@ interface SelectorProps extends InnerSelectorProps { inputElement: VueNode; activeValue: string; optionLabelRender: Function; + + // placeholder + compositionStatus: boolean; } const props = { inputElement: PropTypes.any, @@ -20,6 +23,7 @@ const props = { searchValue: String, inputRef: PropTypes.any, placeholder: PropTypes.any, + compositionStatus: { type: Boolean, default: undefined }, disabled: { type: Boolean, default: undefined }, mode: String, showSearch: { type: Boolean, default: undefined }, @@ -65,7 +69,9 @@ const SingleSelector = defineComponent({ // Not show text when closed expect combobox mode const hasTextInput = computed(() => - props.mode !== 'combobox' && !props.open && !props.showSearch ? false : !!inputValue.value, + props.mode !== 'combobox' && !props.open && !props.showSearch + ? false + : !!inputValue.value || props.compositionStatus, ); const title = computed(() => { diff --git a/components/vc-select/Selector/index.tsx b/components/vc-select/Selector/index.tsx index e06a010b4..4ee018bea 100644 --- a/components/vc-select/Selector/index.tsx +++ b/components/vc-select/Selector/index.tsx @@ -15,7 +15,7 @@ import type { CustomTagProps, DisplayValueType, Mode, RenderNode } from '../Base import { isValidateOpenKey } from '../utils/keyUtil'; import useLock from '../hooks/useLock'; import type { PropType } from 'vue'; -import { defineComponent } from 'vue'; +import { defineComponent, ref } from 'vue'; import createRef from '../../_util/createRef'; import PropTypes from '../../_util/vue-types'; import type { VueNode } from '../../_util/type'; @@ -124,7 +124,7 @@ const Selector = defineComponent({ } as any, setup(props, { expose }) { const inputRef = createRef(); - let compositionStatus = false; + let compositionStatus = ref(false); // ====================== Input ====================== const [getInputMouseDown, setInputMouseDown] = useLock(0); @@ -140,7 +140,12 @@ const Selector = defineComponent({ props.onInputKeyDown(event); } - if (which === KeyCode.ENTER && props.mode === 'tags' && !compositionStatus && !props.open) { + if ( + which === KeyCode.ENTER && + props.mode === 'tags' && + !compositionStatus.value && + !props.open + ) { // When menu isn't open, OptionList won't trigger a value change // So when enter is pressed, the tag's input value should be emitted here to let selector know props.onSearchSubmit((event.target as HTMLInputElement).value); @@ -163,17 +168,17 @@ const Selector = defineComponent({ let pastedText = null; const triggerOnSearch = (value: string) => { - if (props.onSearch(value, true, compositionStatus) !== false) { + if (props.onSearch(value, true, compositionStatus.value) !== false) { props.onToggleOpen(true); } }; const onInputCompositionStart = () => { - compositionStatus = true; + compositionStatus.value = true; }; const onInputCompositionEnd = (e: InputEvent) => { - compositionStatus = false; + compositionStatus.value = false; // Trigger search again to support `tokenSeparators` with typewriting if (props.mode !== 'combobox') { triggerOnSearch((e.target as HTMLInputElement).value); @@ -251,6 +256,7 @@ const Selector = defineComponent({ onInputMouseDown: onInternalInputMouseDown, onInputChange, onInputPaste, + compositionStatus: compositionStatus.value, onInputCompositionStart, onInputCompositionEnd, }; From 82f28ce3d04b50f6b7270d731a3824a1066462fa Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 4 Jun 2024 21:20:10 +0800 Subject: [PATCH 12/40] fix: select input --- components/_util/BaseInput.tsx | 31 ++++-- components/_util/BaseInputInner.tsx | 96 +++++++++++++++++++ components/vc-select/Selector/Input.tsx | 2 +- .../vc-select/Selector/MultipleSelector.tsx | 32 +++++-- .../vc-select/Selector/SingleSelector.tsx | 17 ++-- components/vc-select/Selector/index.tsx | 2 +- 6 files changed, 152 insertions(+), 28 deletions(-) create mode 100644 components/_util/BaseInputInner.tsx diff --git a/components/_util/BaseInput.tsx b/components/_util/BaseInput.tsx index 4650d80e6..923b24871 100644 --- a/components/_util/BaseInput.tsx +++ b/components/_util/BaseInput.tsx @@ -1,6 +1,8 @@ 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'; export interface BaseInputExpose { focus: () => void; @@ -30,6 +32,8 @@ const BaseInput = defineComponent({ default: 'input', }, size: PropTypes.string, + style: PropTypes.style, + class: PropTypes.string, }, emits: [ 'change', @@ -40,9 +44,11 @@ const BaseInput = defineComponent({ 'compositionstart', 'compositionend', 'keyup', + 'paste', + 'mousedown', ], setup(props, { emit, attrs, expose }) { - const inputRef = shallowRef(null); + const inputRef = shallowRef(null); const renderValue = ref(); const isComposing = ref(false); watch( @@ -115,19 +121,26 @@ 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); + }; return () => { - const { tag: Tag, ...restProps } = props; + const { tag: Tag, style, ...restProps } = props; return ( - ); }; diff --git a/components/_util/BaseInputInner.tsx b/components/_util/BaseInputInner.tsx new file mode 100644 index 000000000..10423d7a4 --- /dev/null +++ b/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 ; + }; + }, +}); + +export default BaseInputInner; diff --git a/components/vc-select/Selector/Input.tsx b/components/vc-select/Selector/Input.tsx index b750e1a62..a621f169a 100644 --- a/components/vc-select/Selector/Input.tsx +++ b/components/vc-select/Selector/Input.tsx @@ -48,7 +48,6 @@ const Input = defineComponent({ setup(props) { let blurTimeout = null; const VCSelectContainerEvent = inject('VCSelectContainerEvent') as any; - return () => { const { prefixCls, @@ -97,6 +96,7 @@ const Input = defineComponent({ ref: inputRef, disabled, tabindex, + lazy: false, autocomplete: autocomplete || 'off', autofocus, class: classNames(`${prefixCls}-selection-search-input`, inputNode?.props?.class), diff --git a/components/vc-select/Selector/MultipleSelector.tsx b/components/vc-select/Selector/MultipleSelector.tsx index 8daad360d..bcd76d7d1 100644 --- a/components/vc-select/Selector/MultipleSelector.tsx +++ b/components/vc-select/Selector/MultipleSelector.tsx @@ -2,7 +2,7 @@ import TransBtn from '../TransBtn'; import type { InnerSelectorProps } from './interface'; import Input from './Input'; import type { Ref, PropType } from 'vue'; -import { computed, defineComponent, onMounted, shallowRef, watch } from 'vue'; +import { ref, watchEffect, computed, defineComponent, onMounted, shallowRef, watch } from 'vue'; import classNames from '../../_util/classNames'; import pickAttrs from '../../_util/pickAttrs'; import PropTypes from '../../_util/vue-types'; @@ -24,6 +24,8 @@ type SelectorProps = InnerSelectorProps & { tagRender?: (props: CustomTagProps) => VueNode; onToggleOpen: any; + compositionStatus: boolean; + // Motion choiceTransitionName?: string; @@ -46,7 +48,7 @@ const props = { autocomplete: String, activeDescendantId: String, tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - + compositionStatus: Boolean, removeIcon: PropTypes.any, choiceTransitionName: String, @@ -91,11 +93,14 @@ const SelectSelector = defineComponent({ () => props.mode === 'tags' || ((props.showSearch && (props.open || focused.value)) as boolean), ); - + const targetValue = ref(''); + watchEffect(() => { + targetValue.value = inputValue.value; + }); // We measure width and set to the input immediately onMounted(() => { watch( - inputValue, + targetValue, () => { inputWidth.value = measureRef.value.scrollWidth; }, @@ -202,6 +207,14 @@ const SelectSelector = defineComponent({ return defaultRenderSelector(content, content, false); } + const handleInput = (e: Event) => { + const composing = (e.target as any).composing; + targetValue.value = (e.target as any).value; + if (!composing) { + props.onInputChange(e); + } + }; + return () => { const { id, @@ -215,14 +228,13 @@ const SelectSelector = defineComponent({ autocomplete, activeDescendantId, tabindex, - onInputChange, + compositionStatus, onInputPaste, onInputKeyDown, onInputMouseDown, onInputCompositionStart, onInputCompositionEnd, } = props; - // >>> Input Node const inputNode = (
({ autocomplete={autocomplete} editable={inputEditable.value} activeDescendantId={activeDescendantId} - value={inputValue.value} + value={targetValue.value} onKeydown={onInputKeyDown} onMousedown={onInputMouseDown} - onChange={onInputChange} + onChange={handleInput} onPaste={onInputPaste} onCompositionstart={onInputCompositionStart} onCompositionend={onInputCompositionEnd} @@ -256,7 +268,7 @@ const SelectSelector = defineComponent({ {/* Measure Node */} - {inputValue.value}  + {targetValue.value} 
); @@ -277,7 +289,7 @@ const SelectSelector = defineComponent({ return ( <> {selectionNode} - {!values.length && !inputValue.value && ( + {!values.length && !inputValue.value && !compositionStatus && ( {placeholder} )} diff --git a/components/vc-select/Selector/SingleSelector.tsx b/components/vc-select/Selector/SingleSelector.tsx index 50aa6ea42..58aba8cb5 100644 --- a/components/vc-select/Selector/SingleSelector.tsx +++ b/components/vc-select/Selector/SingleSelector.tsx @@ -1,7 +1,7 @@ import pickAttrs from '../../_util/pickAttrs'; import Input from './Input'; import type { InnerSelectorProps } from './interface'; -import { Fragment, Ref, computed, defineComponent, shallowRef, watch } from 'vue'; +import { Fragment, computed, defineComponent, shallowRef, watch } from 'vue'; import PropTypes from '../../_util/vue-types'; import type { VueNode } from '../../_util/type'; import useInjectLegacySelectContext from '../../vc-tree-select/LegacyContext'; @@ -10,8 +10,6 @@ interface SelectorProps extends InnerSelectorProps { inputElement: VueNode; activeValue: string; optionLabelRender: Function; - - // placeholder compositionStatus: boolean; } const props = { @@ -92,6 +90,13 @@ const SingleSelector = defineComponent({ ); }; + const handleInput = (e: Event) => { + const composing = (e.target as any).composing; + if (!composing) { + inputChanged.value = true; + props.onInputChange(e); + } + }; return () => { const { @@ -109,7 +114,6 @@ const SingleSelector = defineComponent({ optionLabelRender, onInputKeyDown, onInputMouseDown, - onInputChange, onInputPaste, onInputCompositionStart, onInputCompositionEnd, @@ -153,10 +157,7 @@ const SingleSelector = defineComponent({ value={inputValue.value} onKeydown={onInputKeyDown} onMousedown={onInputMouseDown} - onChange={e => { - inputChanged.value = true; - onInputChange(e as any); - }} + onChange={handleInput} onPaste={onInputPaste} onCompositionstart={onInputCompositionStart} onCompositionend={onInputCompositionEnd} diff --git a/components/vc-select/Selector/index.tsx b/components/vc-select/Selector/index.tsx index 4ee018bea..ccc121b08 100644 --- a/components/vc-select/Selector/index.tsx +++ b/components/vc-select/Selector/index.tsx @@ -124,7 +124,7 @@ const Selector = defineComponent({ } as any, setup(props, { expose }) { const inputRef = createRef(); - let compositionStatus = ref(false); + const compositionStatus = ref(false); // ====================== Input ====================== const [getInputMouseDown, setInputMouseDown] = useLock(0); From 6594fe3964e3517b480bc1d6fb80bbfb258d527a Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 4 Jun 2024 23:12:06 +0800 Subject: [PATCH 13/40] fix: textarea --- components/_util/BaseInput.tsx | 12 +++++++++--- components/typography/util.tsx | 8 +------- components/vc-util/Dom/css.ts | 13 +++++++++++++ 3 files changed, 23 insertions(+), 10 deletions(-) diff --git a/components/_util/BaseInput.tsx b/components/_util/BaseInput.tsx index 923b24871..e6bc9d708 100644 --- a/components/_util/BaseInput.tsx +++ b/components/_util/BaseInput.tsx @@ -3,6 +3,7 @@ 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; @@ -32,7 +33,7 @@ const BaseInput = defineComponent({ default: 'input', }, size: PropTypes.string, - style: PropTypes.style, + style: PropTypes.oneOfType([String, Object]), class: PropTypes.string, }, emits: [ @@ -134,13 +135,18 @@ const BaseInput = defineComponent({ 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, style, ...restProps } = props; + const { style, lazy, ...restProps } = props; return ( `${name}: ${style.getPropertyValue(name)};`).join(''); -} - function resetDomStyles(target: HTMLElement, origin: HTMLElement) { target.setAttribute('aria-hidden', 'true'); const originStyle = window.getComputedStyle(origin); diff --git a/components/vc-util/Dom/css.ts b/components/vc-util/Dom/css.ts index dc5efa4f1..512a2609f 100644 --- a/components/vc-util/Dom/css.ts +++ b/components/vc-util/Dom/css.ts @@ -112,3 +112,16 @@ export function getOffset(node: any) { (docElem.clientTop || document.body.clientTop || 0), }; } + +export function styleToString(style: CSSStyleDeclaration) { + // There are some different behavior between Firefox & Chrome. + // We have to handle this ourself. + const styleNames = Array.prototype.slice.apply(style); + return styleNames.map(name => `${name}: ${style.getPropertyValue(name)};`).join(''); +} + +export function styleObjectToString(style: Record) { + return Object.keys(style) + .map(name => `${name}: ${style[name]};`) + .join(''); +} From 312bcc51270ca578c84db46c7d8ca51b12def824 Mon Sep 17 00:00:00 2001 From: Carl Chen <71313168+cc-hearts@users.noreply.github.com> Date: Tue, 4 Jun 2024 23:20:54 +0800 Subject: [PATCH 14/40] docs(collapse): modify the `accordion` attribute text to be easier to understand (#7612) --- components/collapse/index.en-US.md | 2 +- components/collapse/index.zh-CN.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/collapse/index.en-US.md b/components/collapse/index.en-US.md index 4a80753b0..429a95e43 100644 --- a/components/collapse/index.en-US.md +++ b/components/collapse/index.en-US.md @@ -20,7 +20,7 @@ A content area which can be collapsed and expanded. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | accordion | If `true`, `Collapse` renders as `Accordion` | boolean | `false` | | -| activeKey(v-model) | Key of the active panel | string\[] \| string
number\[] \| number | No default value. In `accordion` mode, it's the key of the first panel. | | +| activeKey(v-model) | Key of the active panel | string\[] \| string
number\[] \| number | No default value. In [accordion mode](#components-collapse-demo-accordion), it's the key of the first panel. | | | bordered | Toggles rendering of the border around the collapse block | boolean | `true` | | | collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.0 | | destroyInactivePanel | Destroy Inactive Panel | boolean | `false` | | diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md index 1c750c85f..e9e1c042d 100644 --- a/components/collapse/index.zh-CN.md +++ b/components/collapse/index.zh-CN.md @@ -20,8 +20,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sir-TK0HkWcAAA | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| accordion | 手风琴模式 | boolean | `false` | | -| activeKey(v-model) | 当前激活 tab 面板的 key | string\[] \| string
number\[] \| number | 默认无，accordion 模式下默认第一个元素 | | +| accordion | 手风琴模式，始终只有一个面板处在激活状态 | boolean | `false` | | +| activeKey(v-model) | 当前激活 tab 面板的 key | string\[] \| string
number\[] \| number | 默认无，[手风琴模式](#components-collapse-demo-accordion)下默认第一个元素 | | | bordered | 带边框风格的折叠面板 | boolean | `true` | | | collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.0 | | destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | `false` | | From 4318147fc6352c887f81615788258021a4fcf8a9 Mon Sep 17 00:00:00 2001 From: Kylin <75473409+lxKylin@users.noreply.github.com> Date: Tue, 4 Jun 2024 23:24:44 +0800 Subject: [PATCH 15/40] refactor(input): remove unnecessary assertions and use?? instead of the ternary operator (#7571) * refactor: remove unnecessary assertions and use?? instead of the ternary operator * refactor: use?? instead of the ternary operator --- components/input-number/index.tsx | 2 +- components/input/Password.tsx | 2 +- components/input/TextArea.tsx | 18 +++++++++--------- components/input/calculateNodeHeight.tsx | 7 +++---- 4 files changed, 14 insertions(+), 15 deletions(-) diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index 7b1b4418a..a2c7ad99b 100644 --- a/components/input-number/index.tsx +++ b/components/input-number/index.tsx @@ -72,7 +72,7 @@ const InputNumber = defineComponent({ const mergedSize = computed(() => compactSize.value || size.value); - const mergedValue = shallowRef(props.value === undefined ? props.defaultValue : props.value); + const mergedValue = shallowRef(props.value ?? props.defaultValue); const focused = shallowRef(false); watch( () => props.value, diff --git a/components/input/Password.tsx b/components/input/Password.tsx index 0d65270b4..a516c0a84 100644 --- a/components/input/Password.tsx +++ b/components/input/Password.tsx @@ -59,7 +59,7 @@ export default defineComponent({ }); const getIcon = (prefixCls: string) => { const { action, iconRender = slots.iconRender || defaultIconRender } = props; - const iconTrigger = ActionMap[action!] || ''; + const iconTrigger = ActionMap[action] || ''; const icon = iconRender(visible.value); const iconProps = { [iconTrigger]: onVisibleChange, diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx index 09c4a80d2..bfe0544cf 100644 --- a/components/input/TextArea.tsx +++ b/components/input/TextArea.tsx @@ -38,10 +38,10 @@ function setTriggerValue( let newTriggerValue = triggerValue; if (isCursorInEnd) { // 光标在尾部，直接截断 - newTriggerValue = fixEmojiLength(triggerValue, maxLength!); + newTriggerValue = fixEmojiLength(triggerValue, maxLength); } else if ( [...(preValue || '')].length < triggerValue.length && - [...(triggerValue || '')].length > maxLength! + [...(triggerValue || '')].length > maxLength ) { // 光标在中间，如果最后的值超过最大值，则采用原先的值 newTriggerValue = preValue; @@ -58,7 +58,7 @@ export default defineComponent({ const formItemContext = useInjectFormItemContext(); const formItemInputContext = FormItemInputContext.useInject(); const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status)); - const stateValue = shallowRef(props.value === undefined ? props.defaultValue : props.value); + const stateValue = shallowRef(props.value ?? props.defaultValue); const resizableTextArea = shallowRef(); const mergedValue = shallowRef(''); const { prefixCls, size, direction } = useConfigInject('input', props); @@ -79,7 +79,7 @@ export default defineComponent({ const onInternalCompositionStart = (e: CompositionEvent) => { compositing.value = true; // 拼音输入前保存一份旧值 - oldCompositionValueRef.value = mergedValue.value as string; + oldCompositionValueRef.value = mergedValue.value; // 保存旧的光标位置 oldSelectionStartRef.value = (e.currentTarget as any).selectionStart; emit('compositionstart', e); @@ -94,7 +94,7 @@ export default defineComponent({ oldSelectionStartRef.value === oldCompositionValueRef.value?.length; triggerValue = setTriggerValue( isCursorInEnd, - oldCompositionValueRef.value as string, + oldCompositionValueRef.value, triggerValue, props.maxlength, ); @@ -177,14 +177,14 @@ export default defineComponent({ // 1. 复制粘贴超过maxlength的情况 2.未超过maxlength的情况 const target = e.target as any; const isCursorInEnd = - target.selectionStart >= props.maxlength! + 1 || + target.selectionStart >= props.maxlength + 1 || target.selectionStart === triggerValue.length || !target.selectionStart; triggerValue = setTriggerValue( isCursorInEnd, - mergedValue.value as string, + mergedValue.value, triggerValue, - props.maxlength!, + props.maxlength, ); } resolveOnChange(e.currentTarget as any, e, triggerChange, triggerValue); @@ -237,7 +237,7 @@ export default defineComponent({ }); watchEffect(() => { - let val = fixControlledValue(stateValue.value) as string; + let val = fixControlledValue(stateValue.value); if ( !compositing.value && hasMaxLength.value && diff --git a/components/input/calculateNodeHeight.tsx b/components/input/calculateNodeHeight.tsx index 03ce2a984..509f7308b 100644 --- a/components/input/calculateNodeHeight.tsx +++ b/components/input/calculateNodeHeight.tsx @@ -48,9 +48,8 @@ const computedStyleCache: Record = {}; let hiddenTextarea: HTMLTextAreaElement; export function calculateNodeStyling(node: HTMLElement, useCache = false) { - const nodeRef = (node.getAttribute('id') || - node.getAttribute('data-reactid') || - node.getAttribute('name')) as string; + const nodeRef = + node.getAttribute('id') || node.getAttribute('data-reactid') || node.getAttribute('name'); if (useCache && computedStyleCache[nodeRef]) { return computedStyleCache[nodeRef]; @@ -103,7 +102,7 @@ export default function calculateAutoSizeStyle( // Fix wrap="off" issue // https://github.com/ant-design/ant-design/issues/6577 if (uiTextNode.getAttribute('wrap')) { - hiddenTextarea.setAttribute('wrap', uiTextNode.getAttribute('wrap') as string); + hiddenTextarea.setAttribute('wrap', uiTextNode.getAttribute('wrap')); } else { hiddenTextarea.removeAttribute('wrap'); } From 1d0fa8533a2a9c5e7ea15a3847a21653b20169e9 Mon Sep 17 00:00:00 2001 From: Aaron-zon <1640485761@qq.com> Date: Tue, 4 Jun 2024 23:26:03 +0800 Subject: [PATCH 16/40] fix: add missing space-evenly alignment for grid rows (#7579) --- components/grid/style/index.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/grid/style/index.ts b/components/grid/style/index.ts index 137b50251..923e01837 100644 --- a/components/grid/style/index.ts +++ b/components/grid/style/index.ts @@ -50,6 +50,10 @@ const genGridRowStyle: GenerateStyle = (token): CSSObject => { justifyContent: 'space-around', }, + '&-space-evenly ': { + justifyContent: 'space-evenly', + }, + // Align at the top '&-top': { alignItems: 'flex-start', From b82d8dd2ad6e652756eb15dca8a18dfa54c72be5 Mon Sep 17 00:00:00 2001 From: evanlc <1411197585@qq.com> Date: Tue, 4 Jun 2024 23:28:22 +0800 Subject: [PATCH 17/40] fix(PresetPanel): preset panel stopPropagation (#7550) --- components/vc-picker/PresetPanel.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/vc-picker/PresetPanel.tsx b/components/vc-picker/PresetPanel.tsx index 7ee01bef8..a5d98d02a 100644 --- a/components/vc-picker/PresetPanel.tsx +++ b/components/vc-picker/PresetPanel.tsx @@ -22,7 +22,8 @@ export default defineComponent({ {props.presets.map(({ label, value }, index) => (
  • { + onClick={e => { + e.stopPropagation(); props.onClick(value); }} onMouseenter={() => { From 5c7aaf0dd6ad982140c0d5b374db01cac1e859f8 Mon Sep 17 00:00:00 2001 From: Aaron-zon <1640485761@qq.com> Date: Thu, 6 Jun 2024 10:03:24 +0800 Subject: [PATCH 18/40] fix(FloatButton): type error (#7632) --- components/float-button/interface.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/float-button/interface.ts b/components/float-button/interface.ts index da5b25c2f..9db3fba65 100644 --- a/components/float-button/interface.ts +++ b/components/float-button/interface.ts @@ -20,7 +20,7 @@ export const floatButtonProps = () => { shape: stringType('circle'), tooltip: PropTypes.any, href: String, - target: stringType<'_self' | '_blank' | '_parent' | '_top'>(), + target: String, badge: objectType(), onClick: functionType(), }; From 9118d6cd426c70d99ab4bdf7039b07484fbad047 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Thu, 6 Jun 2024 10:16:02 +0800 Subject: [PATCH 19/40] release 4.2.2 --- CHANGELOG.en-US.md | 10 ++++++++++ CHANGELOG.zh-CN.md | 10 ++++++++++ package.json | 2 +- 3 files changed, 21 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index b76a61caa..e95504238 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -10,6 +10,16 @@ --- +## 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) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 36c43e269..f4f51e14b 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -10,6 +10,16 @@ --- +## 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) diff --git a/package.json b/package.json index 9d26ace94..b4692587c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ant-design-vue", - "version": "4.2.1", + "version": "4.2.2", "title": "Ant Design Vue", "description": "An enterprise-class UI design language and Vue-based implementation", "keywords": [ From f41fec26ba5b18e404b5a9cf5e823814c98e0c4c Mon Sep 17 00:00:00 2001 From: Carl Chen <71313168+cc-hearts@users.noreply.github.com> Date: Sun, 9 Jun 2024 09:56:45 +0800 Subject: [PATCH 20/40] fix[vc-util]: styleObjectToString filter invalid value (#7642) --- components/vc-util/Dom/css.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/components/vc-util/Dom/css.ts b/components/vc-util/Dom/css.ts index 512a2609f..7cb597dfe 100644 --- a/components/vc-util/Dom/css.ts +++ b/components/vc-util/Dom/css.ts @@ -121,7 +121,13 @@ export function styleToString(style: CSSStyleDeclaration) { } export function styleObjectToString(style: Record) { - return Object.keys(style) - .map(name => `${name}: ${style[name]};`) - .join(''); + return Object.keys(style).reduce((acc, name) => { + const styleValue = style[name]; + if (typeof styleValue === 'undefined' || styleValue === null) { + return acc; + } + + acc += `${name}: ${style[name]};`; + return acc; + }, ''); } From 208b8d3085e66a977404ecb37698e9caee03fee7 Mon Sep 17 00:00:00 2001 From: Kylin <75473409+lxKylin@users.noreply.github.com> Date: Sun, 9 Jun 2024 22:08:30 +0800 Subject: [PATCH 21/40] docs: unify the default value of none to - (#7636) --- components/calendar/index.zh-CN.md | 16 ++++++++-------- components/collapse/index.zh-CN.md | 4 ++-- components/dropdown/index.zh-CN.md | 2 +- components/input-number/index.zh-CN.md | 2 +- components/modal/index.zh-CN.md | 16 ++++++++-------- components/popconfirm/index.zh-CN.md | 2 +- components/segmented/index.zh-CN.md | 2 +- components/select/index.zh-CN.md | 2 +- components/tabs/index.zh-CN.md | 8 ++++---- components/tooltip/index.zh-CN.md | 12 ++++++------ components/upload/index.zh-CN.md | 22 +++++++++++----------- 11 files changed, 44 insertions(+), 44 deletions(-) diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index 3d0f68d1f..725f2d573 100644 --- a/components/calendar/index.zh-CN.md +++ b/components/calendar/index.zh-CN.md @@ -28,16 +28,16 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| dateCellRender | 作用域插槽，用来自定义渲染日期单元格，返回内容会被追加到单元格, | v-slot:dateCellRender="{current: dayjs}" | 无 | | -| dateFullCellRender | 作用域插槽，自定义渲染日期单元格，返回内容覆盖单元格 | v-slot:dateFullCellRender="{current: dayjs}" | 无 | | -| disabledDate | 不可选择的日期 | (currentDate: dayjs) => boolean | 无 | | +| dateCellRender | 作用域插槽，用来自定义渲染日期单元格，返回内容会被追加到单元格, | v-slot:dateCellRender="{current: dayjs}" | - | | +| dateFullCellRender | 作用域插槽，自定义渲染日期单元格，返回内容覆盖单元格 | v-slot:dateFullCellRender="{current: dayjs}" | - | | +| disabledDate | 不可选择的日期 | (currentDate: dayjs) => boolean | - | | | fullscreen | 是否全屏显示 | boolean | true | | | headerRender | 自定义头部内容 | v-slot:headerRender="{value: dayjs, type: string, onChange: f(), onTypeChange: f()}" | - | | | locale | 国际化配置 | object | [默认配置](https://github.com/vueComponent/ant-design-vue/blob/main/components/date-picker/locale/example.json) | | | mode | 初始模式，`month/year` | string | month | | -| monthCellRender | 作用域插槽，自定义渲染月单元格，返回内容会被追加到单元格 | v-slot:monthCellRender="{current: dayjs}" | 无 | | -| monthFullCellRender | 作用域插槽，自定义渲染月单元格，返回内容覆盖单元格 | v-slot:monthFullCellRender="{current: dayjs}" | 无 | | -| validRange | 设置可以显示的日期 | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | 无 | | +| monthCellRender | 作用域插槽，自定义渲染月单元格，返回内容会被追加到单元格 | v-slot:monthCellRender="{current: dayjs}" | - | | +| monthFullCellRender | 作用域插槽，自定义渲染月单元格，返回内容覆盖单元格 | v-slot:monthFullCellRender="{current: dayjs}" | - | | +| validRange | 设置可以显示的日期 | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | | | value(v-model) | 展示日期 | [dayjs](https://day.js.org/) | 当前日期 | | | valueFormat | 可选，绑定值的格式，对 value、defaultValue 起作用。不指定则绑定值为 dayjs 对象 | string，[具体格式](https://day.js.org/docs/zh-CN/display/format) | - | | @@ -45,8 +45,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA | 事件名称 | 说明 | 回调参数 | | | --- | --- | --- | --- | --- | -| change | 日期变化时的回调, 面板变化有可能导致日期变化 | function(date: dayjs \| string） | 无 | -| panelChange | 日期面板变化回调 | function(date: dayjs \| string, mode: string) | 无 | +| change | 日期变化时的回调, 面板变化有可能导致日期变化 | function(date: dayjs \| string） | - | +| panelChange | 日期面板变化回调 | function(date: dayjs \| string, mode: string) | - | | select | 选择日期回调，包含来源信息 | function(date: Dayjs, info: { source: 'year' \| 'month' \| 'date' \| 'customize' }) | - | | ### 如何仅获取来自面板点击的日期？ diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md index e9e1c042d..ddae33295 100644 --- a/components/collapse/index.zh-CN.md +++ b/components/collapse/index.zh-CN.md @@ -42,6 +42,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sir-TK0HkWcAAA | collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | - | 3.0 | | extra | 自定义渲染每个面板右上角的内容 | VNode \| slot | - | 1.5.0 | | forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | | -| header | 面板头内容 | string\|slot | 无 | | -| key | 对应 activeKey | string \| number | 无 | | +| header | 面板头内容 | string\|slot | - | | +| key | 对应 activeKey | string \| number | - | | | showArrow | 是否展示当前面板上的箭头 | boolean | `true` | | diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md index b66ae4048..1149da0a2 100644 --- a/components/dropdown/index.zh-CN.md +++ b/components/dropdown/index.zh-CN.md @@ -22,7 +22,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5qm4S4Zgh2QAAA | 参数 | 说明 | 类型 | 默认值 | | | --- | --- | --- | --- | --- | -| align | 该值将合并到 placement 的配置中，设置参考 [dom-align](https://github.com/yiminghe/dom-align) | Object | 无 | | +| align | 该值将合并到 placement 的配置中，设置参考 [dom-align](https://github.com/yiminghe/dom-align) | Object | - | | | arrow | 下拉框箭头是否显示 | boolean \| { pointAtCenter: boolean } | false | 3.3.0 | | destroyPopupOnHide | 关闭后是否销毁 Dropdown | boolean | false | 3.0 | | disabled | 菜单是否禁用 | boolean | - | | diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md index a603d4a70..3ce0b3094 100644 --- a/components/input-number/index.zh-CN.md +++ b/components/input-number/index.zh-CN.md @@ -34,7 +34,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1uH-R5kLAMIAAA | parser | 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用 | function( string): number | - | | | precision | 数值精度 | number | - | | | prefix | 带有前缀图标的 input | slot | - | 3.0 | -| size | 输入框大小 | string | 无 | | +| size | 输入框大小 | string | - | | | status | 设置校验状态 | 'error' \| 'warning' | - | 3.3.0 | | step | 每次改变步数，可以为小数 | number\|string | 1 | | | stringMode | 字符值模式，开启后支持高精度小数。同时 `change` 事件将返回 string 类型 | boolean | false | 3.0 | diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index 931649b1b..103885923 100644 --- a/components/modal/index.zh-CN.md +++ b/components/modal/index.zh-CN.md @@ -19,14 +19,14 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fBrgSJBmavgAAA | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| afterClose | Modal 完全关闭后的回调 | function | 无 | | +| afterClose | Modal 完全关闭后的回调 | function | - | | | bodyStyle | Modal body 样式 | object | {} | | | cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#api) | - | | | cancelText | 取消按钮文字 | string\| slot | 取消 | | | centered | 垂直居中展示 Modal | boolean | `false` | | | closable | 是否显示右上角的关闭按钮 | boolean | true | | | closeIcon | 自定义关闭图标 | VNode \| slot | - | | -| confirmLoading | 确定按钮 loading | boolean | 无 | | +| confirmLoading | 确定按钮 loading | boolean | - | | | destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false | | | footer | 底部内容，当不需要默认底部按钮时，可以设为 `:footer="null"` | string\|slot | 确定取消按钮 | | | forceRender | 强制渲染 Modal | boolean | false | | @@ -38,8 +38,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fBrgSJBmavgAAA | okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#api) | - | | | okText | 确认按钮文字 | string\|slot | 确定 | | | okType | 确认按钮类型 | string | primary | | -| title | 标题 | string\|slot | 无 | | -| open(v-model) | 对话框是否可见 | boolean | 无 | | +| title | 标题 | string\|slot | - | | +| open(v-model) | 对话框是否可见 | boolean | - | | | width | 宽度 | string\|number | 520 | | | wrapClassName | 对话框外层容器的类名 | string | - | | | zIndex | 设置 Modal 的 `z-index` | number | 1000 | | @@ -76,7 +76,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fBrgSJBmavgAAA | centered | 垂直居中展示 Modal | boolean | `false` | | | class | 容器类名 | string | - | | | closable | 是否显示右上角的关闭按钮 | boolean | `false` | | -| content | 内容 | string \|VNode \|function() | 无 | | +| content | 内容 | string \|VNode \|function() | - | | | footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer: null` | string \|VNode \|function() | - | 4.0.0 | | icon | 自定义图标（1.14.0 新增） | VNode \| ()=>VNode | - | | | keyboard | 是否支持键盘 esc 关闭 | boolean | true | | @@ -85,12 +85,12 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fBrgSJBmavgAAA | okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - | | | okText | 确认按钮文字 | string | 确定 | | | okType | 确认按钮类型 | string | primary | | -| title | 标题 | string\|VNode \|function() | 无 | | +| title | 标题 | string\|VNode \|function() | - | | | width | 宽度 | string\|number | 416 | | | wrapClassName | 对话框外层容器的类名 | string | - | 3.2.3 | | zIndex | 设置 Modal 的 `z-index` | number | 1000 | | -| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | | -| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | | +| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | - | | +| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | - | | 以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。 diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md index 22d4e2354..df402b00b 100644 --- a/components/popconfirm/index.zh-CN.md +++ b/components/popconfirm/index.zh-CN.md @@ -27,7 +27,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HrFtQ6jJJFQAAA | okText | 确认按钮文字 | string\|slot | 确定 | | | okType | 确认按钮类型 | string | primary | | | showCancel | 是否显示取消按钮 | boolean | true | 3.0 | -| title | 确认框的描述 | string\|slot | 无 | | +| title | 确认框的描述 | string\|slot | - | | | description | 确认内容的详细描述 | string\|slot | - | 4.0 | | open (v-model) | 是否显示 | boolean | - | 4.0 | diff --git a/components/segmented/index.zh-CN.md b/components/segmented/index.zh-CN.md index 91b1b03a5..8d5068da5 100644 --- a/components/segmented/index.zh-CN.md +++ b/components/segmented/index.zh-CN.md @@ -21,7 +21,7 @@ tag: New | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| block | 将宽度调整为父元素宽度的选项 | boolean | 无 | | +| block | 将宽度调整为父元素宽度的选项 | boolean | - | | | disabled | 是否禁用 | boolean | false | | | options | 数据化配置选项内容 | string[] \| number[] \| SegmentedOption[] | [] | | | size | 控件尺寸 | `large` \| `middle` \| `small` | - | | diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index 4de3bf8ae..7f748d9b5 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -111,7 +111,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5oPiTqPxGAUAAA | 参数 | 说明 | 类型 | 默认值 | | ----- | ---- | ------------------------- | ------ | | key | | string | - | -| label | 组名 | string\|function(h)\|slot | 无 | +| label | 组名 | string\|function(h)\|slot | - | ## FAQ diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index 006c000e0..760dd2db0 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -25,13 +25,13 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | 参数 | 说明 | 类型 | 默认值 | 版本 | | | --- | --- | --- | --- | --- | --- | -| activeKey(v-model) | 当前激活 tab 面板的 key | string | 无 | | | +| activeKey(v-model) | 当前激活 tab 面板的 key | string | - | | | | animated | 是否使用动画切换 Tabs，在 tabPosition=`"top"` \| `"bottom"` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false | | | centered | 标签居中展示 | boolean | false | 3.0 | | | destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构 | boolean | false | | | | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | | | | size | 大小，提供 `large` `middle` 和 `small` 三种大小 | string | `middle` | | | -| tabBarGutter | tabs 之间的间隙 | number | 无 | | | +| tabBarGutter | tabs 之间的间隙 | number | - | | | | tabBarStyle | tab bar 的样式对象 | CSSProperties | - | | | | tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` | | | | type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` | | | @@ -60,8 +60,8 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | 参数 | 说明 | 类型 | 默认值 | | ----------- | ------------------------- | ------------ | ------ | | forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | -| key | 对应 activeKey | string | 无 | -| tab | 选项卡头显示文字 | string\|slot | 无 | +| key | 对应 activeKey | string | - | +| tab | 选项卡头显示文字 | string\|slot | - | ### Tabs.TabPane 插槽 diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md index d71e5a8e6..cc4830e44 100644 --- a/components/tooltip/index.zh-CN.md +++ b/components/tooltip/index.zh-CN.md @@ -18,7 +18,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gwrhTozoTC4AAA | 参数 | 说明 | 类型 | 默认值 | | ----- | -------- | ------------ | ------ | -| title | 提示文字 | string\|slot | 无 | +| title | 提示文字 | string\|slot | - | ### 共同的 API @@ -26,18 +26,18 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gwrhTozoTC4AAA | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| align | 该值将合并到 placement 的配置中，设置参考 [dom-align](https://github.com/yiminghe/dom-align) | Object | 无 | | +| align | 该值将合并到 placement 的配置中，设置参考 [dom-align](https://github.com/yiminghe/dom-align) | Object | - | | | arrowPointAtCenter | 箭头是否指向目标元素中心 | boolean | `false` | | | arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean} | `true` | 4.2.0 | | autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` | | -| color | 背景颜色 | string | 无 | | +| color | 背景颜色 | string | - | | | destroyTooltipOnHide | 隐藏后是否销毁 tooltip | boolean | false | | | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | | | mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | | | mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | | -| overlayClassName | 卡片类名 | string | 无 | | -| overlayStyle | 卡片样式 | object | 无 | | -| overlayInnerStyle | 卡片内容区域样式 | object | 无 | 4.0 | +| overlayClassName | 卡片类名 | string | - | | +| overlayStyle | 卡片样式 | object | - | | +| overlayInnerStyle | 卡片内容区域样式 | object | - | 4.0 | | placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top | | | trigger | 触发行为，可选 `hover/focus/click/contextmenu` | string | hover | | | open(v-model) | 用于手动控制浮层显隐, 小于 4.0.0 使用 `visible` | boolean | false | 4.0 | diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md index 5d2f98406..eacdf8b64 100644 --- a/components/upload/index.zh-CN.md +++ b/components/upload/index.zh-CN.md @@ -21,16 +21,16 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*l1nlSryXib8AAA | 参数 | 说明 | 类型 | 默认值 | 版本 | | | --- | --- | --- | --- | --- | --- | -| accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | 无 | | | -| action | 上传的地址 | string\|(file) => `Promise` | 无 | | | -| beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 `File` 或 `Blob` 对象则上传 resolve 传入对象）。 | (file, fileList) => `boolean` \| `Promise` | 无 | | -| customRequest | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | function | 无 | | | -| data | 上传所需参数或返回上传参数的方法 | object\|(file) => object | 无 | | | +| accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - | | | +| action | 上传的地址 | string\|(file) => `Promise` | - | | | +| beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 `File` 或 `Blob` 对象则上传 resolve 传入对象）。 | (file, fileList) => `boolean` \| `Promise` | - | | +| customRequest | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | function | - | | | +| data | 上传所需参数或返回上传参数的方法 | object\|(file) => object | - | | | | directory | 支持上传文件夹（[caniuse](https://caniuse.com/#feat=input-file-directory)） | boolean | false | 3.0 | | | disabled | 是否禁用 | boolean | - | | | | downloadIcon | 自定义下载 icon | v-slot:iconRender="{file: UploadFile}" | - | 3.0 | | -| fileList | 已经上传的文件列表（受控） | object\[] | 无 | | | -| headers | 设置上传的请求头部，IE10 以上有效 | object | 无 | | | +| fileList | 已经上传的文件列表（受控） | object\[] | - | | | +| headers | 设置上传的请求头部，IE10 以上有效 | object | - | | | | iconRender | 自定义显示 icon | v-slot:iconRender="{file: UploadFile, listType?: UploadListType}" | - | 3.0 | | | isImageUrl | 自定义缩略图是否使用 <img /> 标签进行显示 | (file: UploadFile) => boolean | - | 3.0 | | | itemRender | 自定义上传列表项 | v-slot:itemRender="{originNode: VNode, file: UploadFile, fileList: object\[], actions: { download: function, preview: function, remove: function }" | - | 3.0 | | @@ -40,7 +40,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*l1nlSryXib8AAA | multiple | 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件。 | boolean | false | | | | name | 发到后台的文件参数名 | string | `file` | | | | openFileDialogOnClick | 点击打开文件对话框 | boolean | true | 3.0 | | -| previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise<dataURL: string> | 无 | 1.5.0 | | +| previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise<dataURL: string> | - | 1.5.0 | | | previewIcon | 自定义预览 icon | v-slot:iconRender="{file: UploadFile}" | - | 3.0 | | | progress | 自定义进度条样式 | [ProgressProps](/components/progress/#api)（仅支持 `type="line"`） | { strokeWidth: 2, showInfo: false } | 3.0 | | | removeIcon | 自定义删除 icon | v-slot:iconRender="{file: UploadFile}" | - | 3.0 | | @@ -52,11 +52,11 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*l1nlSryXib8AAA | 事件名称 | 说明 | 回调参数 | 版本 | | | --- | --- | --- | --- | --- | -| change | 上传文件改变时的状态，详见 [change](#change) | function | 无 | | +| change | 上传文件改变时的状态，详见 [change](#change) | function | - | | | download | 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页。 | function(file): void | 跳转新标签页 | 1.5.0 | | drop | 当文件被拖入上传区域时执行的回调功能 | (event: DragEvent) => void | - | 3.0 | -| preview | 点击文件链接或预览图标时的回调 | function(file) | 无 | | -| reject | 拖拽文件不符合 accept 类型时的回调 | function(fileList) | 无 | | +| preview | 点击文件链接或预览图标时的回调 | function(file) | - | | +| reject | 拖拽文件不符合 accept 类型时的回调 | function(fileList) | - | | | remove   | 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除 | function(file): boolean \| Promise | -   | 3.0 | ### UploadFile From 4b7c6ac02cafb4ffb83cb991f797f60a290d8a62 Mon Sep 17 00:00:00 2001 From: trry-hub <67309192+trry-hub@users.noreply.github.com> Date: Mon, 10 Jun 2024 09:14:27 +0800 Subject: [PATCH 22/40] feat: TourStep support fn children (#7628) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Fix: [修复自定义按钮无渲染] * refactor(完善 Tour 自定义按钮代码健壮性): 🦄 --------- Co-authored-by: shizhu --- components/tour/panelRender.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/components/tour/panelRender.tsx b/components/tour/panelRender.tsx index 105a0dffd..b245ed435 100644 --- a/components/tour/panelRender.tsx +++ b/components/tour/panelRender.tsx @@ -1,5 +1,6 @@ import { computed, defineComponent, toRefs } from 'vue'; import classNames from '../_util/classNames'; +import { isFunction } from '../_util/util'; import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'; import { tourStepProps } from './interface'; import type { TourBtnProps } from './interface'; @@ -119,7 +120,9 @@ const panelRender = defineComponent({ size="small" class={classNames(`${prefixCls}-prev-btn`, prevButtonProps?.className)} > - {prevButtonProps?.children ?? contextLocale.Previous} + {isFunction(prevButtonProps?.children) + ? prevButtonProps.children() + : prevButtonProps?.children ?? contextLocale.Previous} ) : null}
    • From 4492086aac8dfc419b957b1c98ae3885ca8c2b6e Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Mon, 10 Jun 2024 09:20:15 +0800 Subject: [PATCH 23/40] release 4.2.3 --- CHANGELOG.en-US.md | 5 +++++ CHANGELOG.zh-CN.md | 5 +++++ package.json | 2 +- 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index e95504238..48c78706e 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -10,6 +10,11 @@ --- +## 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 - 🐞 Fix TreeSelect placeholder slot invalid [#7545](https://github.com/vueComponent/ant-design-vue/issues/7545) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index f4f51e14b..8726b7caa 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -10,6 +10,11 @@ --- +## 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) diff --git a/package.json b/package.json index b4692587c..a73b78c24 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ant-design-vue", - "version": "4.2.2", + "version": "4.2.3", "title": "Ant Design Vue", "description": "An enterprise-class UI design language and Vue-based implementation", "keywords": [ From 35d518563480c0700a371df362a0508060ae6363 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Mon, 10 Jun 2024 09:37:38 +0800 Subject: [PATCH 24/40] docs: update changelog --- CHANGELOG.en-US.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 48c78706e..1759fad16 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -12,8 +12,8 @@ ## 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) +- 🌟 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 From 2666cb79abf9825872e37b55d6d9d4c1cf30e62a Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Fri, 21 Jun 2024 13:40:28 +0800 Subject: [PATCH 25/40] refactor: transition --- components/_util/transition.tsx | 6 ++---- components/alert/index.tsx | 4 ++-- components/badge/Badge.tsx | 4 ++-- components/button/LoadingIcon.tsx | 3 +-- components/collapse/CollapsePanel.tsx | 3 +-- components/float-button/BackTop.tsx | 3 ++- components/float-button/FloatButtonGroup.tsx | 4 ++-- components/menu/src/InlineSubMenuList.tsx | 3 +-- components/upload/UploadList/ListItem.tsx | 12 ++++++++++-- components/upload/UploadList/index.tsx | 3 ++- components/vc-dialog/Content.tsx | 4 ++-- components/vc-dialog/Mask.tsx | 4 ++-- 12 files changed, 29 insertions(+), 24 deletions(-) diff --git a/components/_util/transition.tsx b/components/_util/transition.tsx index fd6ebc490..f4b69f31e 100644 --- a/components/_util/transition.tsx +++ b/components/_util/transition.tsx @@ -5,7 +5,7 @@ import type { TransitionGroupProps, TransitionProps, } from 'vue'; -import { nextTick, Transition, TransitionGroup } from 'vue'; +import { nextTick } from 'vue'; import { tuple } from './type'; const SelectPlacements = tuple('bottomLeft', 'bottomRight', 'topLeft', 'topRight'); @@ -126,6 +126,4 @@ const getTransitionName = (rootPrefixCls: string, motion: string, transitionName return `${rootPrefixCls}-${motion}`; }; -export { Transition, TransitionGroup, collapseMotion, getTransitionName, getTransitionDirection }; - -export default Transition; +export { collapseMotion, getTransitionName, getTransitionDirection }; diff --git a/components/alert/index.tsx b/components/alert/index.tsx index 63a61aa6e..f3dead2ba 100644 --- a/components/alert/index.tsx +++ b/components/alert/index.tsx @@ -1,5 +1,5 @@ import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'; -import { computed, defineComponent, shallowRef } from 'vue'; +import { computed, defineComponent, shallowRef, Transition } from 'vue'; import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'; import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined'; import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined'; @@ -11,7 +11,7 @@ import InfoCircleFilled from '@ant-design/icons-vue/InfoCircleFilled'; import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'; import classNames from '../_util/classNames'; import PropTypes from '../_util/vue-types'; -import { getTransitionProps, Transition } from '../_util/transition'; +import { getTransitionProps } from '../_util/transition'; import { isValidElement } from '../_util/props-util'; import { tuple, withInstall } from '../_util/type'; import { cloneElement } from '../_util/vnode'; diff --git a/components/badge/Badge.tsx b/components/badge/Badge.tsx index 30195d049..a0363732f 100644 --- a/components/badge/Badge.tsx +++ b/components/badge/Badge.tsx @@ -3,9 +3,9 @@ import ScrollNumber from './ScrollNumber'; import classNames from '../_util/classNames'; import { getPropsSlot, flattenChildren } from '../_util/props-util'; import { cloneElement } from '../_util/vnode'; -import { getTransitionProps, Transition } from '../_util/transition'; +import { getTransitionProps } from '../_util/transition'; import type { ExtractPropTypes, CSSProperties, PropType } from 'vue'; -import { defineComponent, computed, ref, watch } from 'vue'; +import { defineComponent, computed, ref, watch, Transition } from 'vue'; import Ribbon from './Ribbon'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import isNumeric from '../_util/isNumeric'; diff --git a/components/button/LoadingIcon.tsx b/components/button/LoadingIcon.tsx index 391527fd4..f865e0907 100644 --- a/components/button/LoadingIcon.tsx +++ b/components/button/LoadingIcon.tsx @@ -1,6 +1,5 @@ -import { defineComponent, nextTick } from 'vue'; +import { defineComponent, nextTick, Transition } from 'vue'; import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'; -import Transition from '../_util/transition'; const getCollapsedWidth = (node: HTMLSpanElement) => { if (node) { node.style.width = '0px'; diff --git a/components/collapse/CollapsePanel.tsx b/components/collapse/CollapsePanel.tsx index 4ff984dd7..95af0ec64 100644 --- a/components/collapse/CollapsePanel.tsx +++ b/components/collapse/CollapsePanel.tsx @@ -2,8 +2,7 @@ import PanelContent from './PanelContent'; import { initDefaultProps } from '../_util/props-util'; import { collapsePanelProps } from './commonProps'; import type { ExtractPropTypes } from 'vue'; -import { defineComponent } from 'vue'; -import Transition from '../_util/transition'; +import { defineComponent, Transition } from 'vue'; import classNames from '../_util/classNames'; import devWarning from '../vc-util/devWarning'; import useConfigInject from '../config-provider/hooks/useConfigInject'; diff --git a/components/float-button/BackTop.tsx b/components/float-button/BackTop.tsx index 6baa6daad..722905975 100644 --- a/components/float-button/BackTop.tsx +++ b/components/float-button/BackTop.tsx @@ -1,5 +1,5 @@ import VerticalAlignTopOutlined from '@ant-design/icons-vue/VerticalAlignTopOutlined'; -import { getTransitionProps, Transition } from '../_util/transition'; +import { getTransitionProps } from '../_util/transition'; import { defineComponent, nextTick, @@ -10,6 +10,7 @@ import { ref, watch, onDeactivated, + Transition, } from 'vue'; import FloatButton, { floatButtonPrefixCls } from './FloatButton'; import useConfigInject from '../config-provider/hooks/useConfigInject'; diff --git a/components/float-button/FloatButtonGroup.tsx b/components/float-button/FloatButtonGroup.tsx index 743d60e5a..611646299 100644 --- a/components/float-button/FloatButtonGroup.tsx +++ b/components/float-button/FloatButtonGroup.tsx @@ -1,8 +1,8 @@ -import { defineComponent, ref, computed, watch, onBeforeUnmount } from 'vue'; +import { defineComponent, ref, computed, watch, onBeforeUnmount, Transition } from 'vue'; import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'; import FileTextOutlined from '@ant-design/icons-vue/FileTextOutlined'; import classNames from '../_util/classNames'; -import { getTransitionProps, Transition } from '../_util/transition'; +import { getTransitionProps } from '../_util/transition'; import FloatButton, { floatButtonPrefixCls } from './FloatButton'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import { useProvideFloatButtonGroupContext } from './context'; diff --git a/components/menu/src/InlineSubMenuList.tsx b/components/menu/src/InlineSubMenuList.tsx index 29794e8be..7b9cb1f33 100644 --- a/components/menu/src/InlineSubMenuList.tsx +++ b/components/menu/src/InlineSubMenuList.tsx @@ -1,5 +1,4 @@ -import { computed, defineComponent, ref, watch } from 'vue'; -import Transition from '../../_util/transition'; +import { computed, Transition, defineComponent, ref, watch } from 'vue'; import { useInjectMenu, MenuContextProvider } from './hooks/useMenuContext'; import type { MenuMode } from './interface'; import SubMenuList from './SubMenuList'; diff --git a/components/upload/UploadList/ListItem.tsx b/components/upload/UploadList/ListItem.tsx index b7fcc2223..d0dfb6afc 100644 --- a/components/upload/UploadList/ListItem.tsx +++ b/components/upload/UploadList/ListItem.tsx @@ -1,4 +1,12 @@ -import { computed, defineComponent, onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'; +import { + computed, + defineComponent, + onBeforeUnmount, + onMounted, + shallowRef, + watch, + Transition, +} from 'vue'; import type { ExtractPropTypes, CSSProperties } from 'vue'; import EyeOutlined from '@ant-design/icons-vue/EyeOutlined'; import DeleteOutlined from '@ant-design/icons-vue/DeleteOutlined'; @@ -15,7 +23,7 @@ import type { } from '../interface'; import type { VueNode } from '../../_util/type'; import useConfigInject from '../../config-provider/hooks/useConfigInject'; -import Transition, { getTransitionProps } from '../../_util/transition'; +import { getTransitionProps } from '../../_util/transition'; import { booleanType, stringType, functionType, arrayType, objectType } from '../../_util/type'; export const listItemProps = () => { diff --git a/components/upload/UploadList/index.tsx b/components/upload/UploadList/index.tsx index 25c58c50f..ffb89a4b9 100644 --- a/components/upload/UploadList/index.tsx +++ b/components/upload/UploadList/index.tsx @@ -17,11 +17,12 @@ import { onMounted, shallowRef, watchEffect, + TransitionGroup, } from 'vue'; import { filterEmpty, initDefaultProps, isValidElement } from '../../_util/props-util'; import type { VueNode } from '../../_util/type'; import useConfigInject from '../../config-provider/hooks/useConfigInject'; -import { getTransitionGroupProps, TransitionGroup } from '../../_util/transition'; +import { getTransitionGroupProps } from '../../_util/transition'; import collapseMotion from '../../_util/collapseMotion'; const HackSlot = (_, { slots }) => { diff --git a/components/vc-dialog/Content.tsx b/components/vc-dialog/Content.tsx index 6cfa6ee27..82ecda5c1 100644 --- a/components/vc-dialog/Content.tsx +++ b/components/vc-dialog/Content.tsx @@ -1,7 +1,7 @@ import type { CSSProperties, PropType } from 'vue'; -import { computed, ref, defineComponent, nextTick } from 'vue'; +import { Transition, computed, ref, defineComponent, nextTick } from 'vue'; import type { MouseEventHandler } from '../_util/EventInterface'; -import Transition, { getTransitionProps } from '../_util/transition'; +import { getTransitionProps } from '../_util/transition'; import dialogPropTypes from './IDialogPropTypes'; import { offset } from './util'; const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', outline: 'none' }; diff --git a/components/vc-dialog/Mask.tsx b/components/vc-dialog/Mask.tsx index 7ec2ced2d..f9b546944 100644 --- a/components/vc-dialog/Mask.tsx +++ b/components/vc-dialog/Mask.tsx @@ -1,5 +1,5 @@ -import { defineComponent } from 'vue'; -import Transition, { getTransitionProps } from '../_util/transition'; +import { defineComponent, Transition } from 'vue'; +import { getTransitionProps } from '../_util/transition'; export default defineComponent({ compatConfig: { MODE: 3 }, From c69a6d29b21dae52116ef6d734d0929cb591be50 Mon Sep 17 00:00:00 2001 From: Jason Ren <40999116+jasonren0403@users.noreply.github.com> Date: Thu, 5 Sep 2024 11:37:36 +0800 Subject: [PATCH 26/40] docs(zh-cn): finish translation of float-button (#7811) --- components/float-button/index.zh-CN.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/float-button/index.zh-CN.md b/components/float-button/index.zh-CN.md index 589c65865..284cd6842 100644 --- a/components/float-button/index.zh-CN.md +++ b/components/float-button/index.zh-CN.md @@ -33,11 +33,11 @@ tag: New | target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - | | | badge | 带徽标数字的悬浮按钮（不支持 status 以及相关属性） | [BadgeProps](/components/badge-cn#api) | - | | -### common events +### 共同的事件 -| 事件名称 | 说明 | 回调参数 | 版本 | -| -------- | --------------------------------------- | ----------------- | ---- | -| click | Set the handler to handle `click` event | `(event) => void` | - | +| 事件名称 | 说明 | 回调参数 | 版本 | +| -------- | ----------------------------- | ----------------- | ---- | +| click | 设置处理 `click` 事件的处理器 | `(event) => void` | - | ### FloatButton.Group @@ -47,7 +47,7 @@ tag: New | trigger | 触发方式（有触发方式为菜单模式） | `click` \| `hover` | - | | | open(v-model) | 受控展开 | boolean | - | | -### FloatButton.Group Events +### FloatButton.Group 事件 | 事件名称 | 说明 | 回调参数 | 版本 | | ---------- | ---------------- | ----------------------- | ---- | From 89eec071455c181102c17a11d90f4b3cd802d955 Mon Sep 17 00:00:00 2001 From: 5918vo <146824980+5918vo@users.noreply.github.com> Date: Thu, 5 Sep 2024 11:38:10 +0800 Subject: [PATCH 27/40] docs: event demo (#7699) (#7728) --- components/slider/demo/event.vue | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/components/slider/demo/event.vue b/components/slider/demo/event.vue index a1733cb72..67b1f5df3 100644 --- a/components/slider/demo/event.vue +++ b/components/slider/demo/event.vue @@ -17,8 +17,8 @@ The `onChange` callback function will fire when the user changes the slider's va