From 9decb507610062883a80790e7e37977121d84b34 Mon Sep 17 00:00:00 2001 From: Flsion Date: Fri, 25 Aug 2023 17:44:10 +0800 Subject: [PATCH 01/10] enhance(input-number): enhance step button (#2668) --- packages/web-vue/components/input-number/input-number.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/web-vue/components/input-number/input-number.tsx b/packages/web-vue/components/input-number/input-number.tsx index c9a7a6c11..3279427c6 100644 --- a/packages/web-vue/components/input-number/input-number.tsx +++ b/packages/web-vue/components/input-number/input-number.tsx @@ -23,6 +23,7 @@ import { getKeyDownHandler, KEYBOARD_KEY } from '../_utils/keyboard'; type StepMethods = 'minus' | 'plus'; +const FIRST_DELAY = 800; const SPEED = 150; NP.enableBoundaryChecking(false); @@ -400,7 +401,7 @@ export default defineComponent({ if (needRepeat) { repeatTimer = window.setTimeout( () => (event.target as HTMLElement).dispatchEvent(event), - SPEED + repeatTimer ? SPEED : FIRST_DELAY ); } }; From 549158285bcc3345ce270539ae38a53f9866da65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A6=96=E7=8B=90=E7=A2=A7=E8=90=BD?= <463561248@qq.com> Date: Fri, 25 Aug 2023 17:50:04 +0800 Subject: [PATCH 02/10] fix(virtual-list): fix the wrong scrolling position of the virtual list (#2665) --- .../virtual-list-v2/virtual-list.vue | 41 +++++-------------- 1 file changed, 11 insertions(+), 30 deletions(-) diff --git a/packages/web-vue/components/_components/virtual-list-v2/virtual-list.vue b/packages/web-vue/components/_components/virtual-list-v2/virtual-list.vue index 166dd9762..9d99a9ea9 100644 --- a/packages/web-vue/components/_components/virtual-list-v2/virtual-list.vue +++ b/packages/web-vue/components/_components/virtual-list-v2/virtual-list.vue @@ -165,15 +165,6 @@ export default defineComponent({ buffer, }); - const shouldScroll = ref(true); - const scrollData = reactive({ - scrollTop: 0, - scrollHeight: 0, - }); - // 数据发生修改 - watch(dataKeys, () => { - shouldScroll.value = false; - }); const currentList = computed(() => { if (props.threshold && data.value.length <= props.threshold) { return data.value; @@ -185,27 +176,17 @@ export default defineComponent({ const onScroll = (ev: Event) => { const { scrollTop, scrollHeight, offsetHeight } = ev.target as HTMLElement; - if (shouldScroll.value) { - scrollData.scrollTop = scrollTop; - scrollData.scrollHeight = scrollHeight; - const _start = getStartByScroll(scrollTop); - if (_start !== start.value) { - setStart(_start); - } - emit('scroll', ev); - const bottom = Math.floor(scrollHeight - (scrollTop + offsetHeight)); - if (bottom <= 0) { - emit('reachBottom', ev); - } - } else { - // 数据发生修改完成 (是否采用MutationObserver) - if (scrollHeight !== scrollData.scrollHeight) { - shouldScroll.value = true; - setTimeout(() => { - scrollTo(scrollData.scrollTop); - }, 10); - } - scrollTo(scrollData.scrollTop); + const _start = getStartByScroll(scrollTop); + if (_start !== start.value) { + setStart(_start); + nextTick(() => { + scrollTo(scrollTop); + }); + } + emit('scroll', ev); + const bottom = Math.floor(scrollHeight - (scrollTop + offsetHeight)); + if (bottom <= 0) { + emit('reachBottom', ev); } }; From b8b270c4719ca35af69298c3638d06890e9bddf8 Mon Sep 17 00:00:00 2001 From: wangchen Date: Fri, 25 Aug 2023 18:36:42 +0800 Subject: [PATCH 03/10] release version --- packages/web-vue/CHANGELOG.md | 13 +++++++++++++ packages/web-vue/CHANGELOG.zh-CN.md | 13 +++++++++++++ .../web-vue/components/input-number/CHANGELOG.md | 9 +++++++++ .../components/input-number/CHANGELOG.zh-CN.md | 9 +++++++++ packages/web-vue/package.json | 2 +- 5 files changed, 45 insertions(+), 1 deletion(-) diff --git a/packages/web-vue/CHANGELOG.md b/packages/web-vue/CHANGELOG.md index 6a94bc138..178a2647c 100644 --- a/packages/web-vue/CHANGELOG.md +++ b/packages/web-vue/CHANGELOG.md @@ -2,6 +2,19 @@ changelog: true ``` +## 2.50.2 + +`2023-08-25` + +### 🐛 BugFix + +- fix the wrong scrolling position of the virtual list ([#2665](https://github.com/arco-design/arco-design-vue/pull/2665)) + +### 💎 Enhancement + +- **input-number:** Optimize the long-press effect of the step button ([#2668](https://github.com/arco-design/arco-design-vue/pull/2668)) + + ## 2.50.1 `2023-08-18` diff --git a/packages/web-vue/CHANGELOG.zh-CN.md b/packages/web-vue/CHANGELOG.zh-CN.md index 3257c1bd9..d6ab9271e 100644 --- a/packages/web-vue/CHANGELOG.zh-CN.md +++ b/packages/web-vue/CHANGELOG.zh-CN.md @@ -2,6 +2,19 @@ changelog: true ``` +## 2.50.2 + +`2023-08-25` + +### 🐛 问题修复 + +- 修复虚拟滚动 scrollTop 位置不对 ([#2665](https://github.com/arco-design/arco-design-vue/pull/2665)) + +### 💎 功能优化 + +- **input-number:** 优化步长按钮的长按效果 ([#2668](https://github.com/arco-design/arco-design-vue/pull/2668)) + + ## 2.50.1 `2023-08-18` diff --git a/packages/web-vue/components/input-number/CHANGELOG.md b/packages/web-vue/components/input-number/CHANGELOG.md index 606c536cc..492cb0f7f 100644 --- a/packages/web-vue/components/input-number/CHANGELOG.md +++ b/packages/web-vue/components/input-number/CHANGELOG.md @@ -2,6 +2,15 @@ changelog: true ``` +## 2.50.2 + +`2023-08-25` + +### 💎 Enhancement + +- Optimize the long-press effect of the step button ([#2668](https://github.com/arco-design/arco-design-vue/pull/2668)) + + ## 2.49.0 `2023-07-21` diff --git a/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md b/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md index 8e7044527..62987e3e4 100644 --- a/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md +++ b/packages/web-vue/components/input-number/CHANGELOG.zh-CN.md @@ -2,6 +2,15 @@ changelog: true ``` +## 2.50.2 + +`2023-08-25` + +### 💎 功能优化 + +- 优化步长按钮的长按效果 ([#2668](https://github.com/arco-design/arco-design-vue/pull/2668)) + + ## 2.49.0 `2023-07-21` diff --git a/packages/web-vue/package.json b/packages/web-vue/package.json index 1a583320d..dfeff8ddc 100644 --- a/packages/web-vue/package.json +++ b/packages/web-vue/package.json @@ -1,6 +1,6 @@ { "name": "@arco-design/web-vue", - "version": "2.50.1", + "version": "2.50.2", "description": "Arco Design Vue 2.0: A Vue.js 3 UI Library", "keywords": [ "arco", From 36d4511785fac6a581eb4def1f75d399349a31cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=B1=9F=E8=BE=B0?= Date: Fri, 1 Sep 2023 17:06:50 +0800 Subject: [PATCH 04/10] feat: add scroll into view to the field (#2680) --- .../web-vue/components/form/README.en-US.md | 4 ++ .../web-vue/components/form/README.zh-CN.md | 5 ++ packages/web-vue/components/form/TEMPLATE.md | 2 + .../components/form/__demo__/scroll.md | 67 ++++++++++++++++++ packages/web-vue/components/form/context.ts | 1 + .../web-vue/components/form/form-item.vue | 9 +++ packages/web-vue/components/form/form.vue | 68 ++++++++++++++++++- 7 files changed, 154 insertions(+), 2 deletions(-) create mode 100644 packages/web-vue/components/form/__demo__/scroll.md diff --git a/packages/web-vue/components/form/README.en-US.md b/packages/web-vue/components/form/README.en-US.md index cd9c3550c..c1acb7734 100644 --- a/packages/web-vue/components/form/README.en-US.md +++ b/packages/web-vue/components/form/README.en-US.md @@ -32,6 +32,8 @@ description: A form with data collection, verification and submission functions, @import ./__demo__/custom.md +@import ./__demo__/scroll.md + ## API @@ -48,6 +50,7 @@ description: A form with data collection, verification and submission functions, |disabled|Whether to disable the form|`boolean`|`-`|| |rules|Form item validation rules|`Record`|`-`|| |auto-label-width|Whether to enable automatic label width, it only takes effect under `layout="horizontal"`.|`boolean`|`false`|2.13.0| +|scroll-to-first-error|Scroll to the first error field after verification fails, receiving all parameters of[scroll-into-view-if-needed](https://github.com/stipsan/scroll-into-view-if-needed)|`boolean \| ScrollIntoViewOptions`|`-`|| ### `
` Events |Event Name|Description|Parameters| @@ -64,6 +67,7 @@ description: A form with data collection, verification and submission functions, |resetFields|Reset form data|field: `string \| string[]`|-| |clearValidate|Clear verification status|field: `string \| string[]`|-| |setFields|Set the value and status of the form item|data: `Record`|-| +|scrollToField|Scroll to the specified form item|field: `string`
options: `ScrollIntoViewOptions`|-| diff --git a/packages/web-vue/components/form/README.zh-CN.md b/packages/web-vue/components/form/README.zh-CN.md index e37eda5c1..c809f5c11 100644 --- a/packages/web-vue/components/form/README.zh-CN.md +++ b/packages/web-vue/components/form/README.zh-CN.md @@ -30,6 +30,8 @@ description: 具有数据收集、校验和提交功能的表单，包含复选 @import ./__demo__/custom.md +@import ./__demo__/scroll.md + ## API @@ -46,6 +48,8 @@ description: 具有数据收集、校验和提交功能的表单，包含复选 |disabled|是否禁用表单|`boolean`|`-`|| |rules|表单项校验规则|`Record`|`-`|| |auto-label-width|是否开启自动标签宽度，仅在 `layout="horizontal"` 下生效。|`boolean`|`false`|2.13.0| +|id|表单控件 `id` 的前缀|`string`|`-`|| +|scroll-to-first-error|验证失败后滚动到第一个错误字段，接收所有[scroll-into-view-if-needed](https://github.com/stipsan/scroll-into-view-if-needed)的参数|`boolean \| ScrollIntoViewOptions`|`-`|| ### `` Events |事件名|描述|参数| @@ -62,6 +66,7 @@ description: 具有数据收集、校验和提交功能的表单，包含复选 |resetFields|重置表单数据|field: `string \| string[]`|-| |clearValidate|清除校验状态|field: `string \| string[]`|-| |setFields|设置表单项的值和状态|data: `Record`|-| +|scrollToField|滚动到指定表单项|field: `string`
options: `ScrollIntoViewOptions`|-| diff --git a/packages/web-vue/components/form/TEMPLATE.md b/packages/web-vue/components/form/TEMPLATE.md index 3473f22a3..c1930f02d 100644 --- a/packages/web-vue/components/form/TEMPLATE.md +++ b/packages/web-vue/components/form/TEMPLATE.md @@ -41,6 +41,8 @@ description: A form with data collection, verification and submission functions, @import ./__demo__/custom.md +@import ./__demo__/scroll.md + ## API %%API(form.vue)%% diff --git a/packages/web-vue/components/form/__demo__/scroll.md b/packages/web-vue/components/form/__demo__/scroll.md new file mode 100644 index 000000000..b7ea0b99c --- /dev/null +++ b/packages/web-vue/components/form/__demo__/scroll.md @@ -0,0 +1,67 @@ +```yaml +title: + zh-CN: 滚动到指定表单字段 + en-US: Scroll To Field +``` + +## zh-CN + +展示了提交失败自动滚动到第一个错误字段和手动滚动对应字段的使用方法。 + +--- + +## en-US + +Showed the usage methods for automatically scrolling to the first error field on submission failure and manually scrolling to the corresponding field. + +--- + +```vue + + + +``` diff --git a/packages/web-vue/components/form/context.ts b/packages/web-vue/components/form/context.ts index 83034e32a..bb0436808 100644 --- a/packages/web-vue/components/form/context.ts +++ b/packages/web-vue/components/form/context.ts @@ -32,6 +32,7 @@ export interface FormContext { removeLabelWidth: (uid?: number) => void; maxLabelWidth: number; autoLabelWidth: boolean; + id?: string; } export interface FormItemContext { diff --git a/packages/web-vue/components/form/form-item.vue b/packages/web-vue/components/form/form-item.vue index 09d7641a8..bb15e438f 100644 --- a/packages/web-vue/components/form/form-item.vue +++ b/packages/web-vue/components/form/form-item.vue @@ -30,6 +30,7 @@ props.wrapperColStyle ?? formCtx.wrapperColStyle ); + const mergedId = computed(() => { + if (formCtx.id) { + return `${formCtx.id}_${field.value}`; + } + return field.value; + }); + // 记录初始值，用于重置表单 const initialValue = getValueByPath(formCtx.model, props.field); @@ -638,6 +646,7 @@ export default defineComponent({ mergedLabelStyle, wrapperColCls, mergedWrapperStyle, + mergedId, }; }, }); diff --git a/packages/web-vue/components/form/form.vue b/packages/web-vue/components/form/form.vue index 5a824e416..ff7103ada 100644 --- a/packages/web-vue/components/form/form.vue +++ b/packages/web-vue/components/form/form.vue @@ -1,5 +1,5 @@ @@ -12,11 +12,15 @@ import { provide, reactive, toRefs, + ref, } from 'vue'; +import scrollIntoView, { + Options as ScrollIntoViewOptions, +} from 'scroll-into-view-if-needed'; import { FormItemInfo, formInjectionKey } from './context'; import { getPrefixCls } from '../_utils/global-config'; import { Size } from '../_utils/constant'; -import { isArray, isFunction } from '../_utils/is'; +import { isArray, isFunction, isBoolean } from '../_utils/is'; import { FieldData, FieldRule, ValidatedError } from './interface'; import { useSize } from '../_hooks/use-size'; @@ -105,6 +109,19 @@ export default defineComponent({ type: Boolean, default: false, }, + /** + * @zh 表单控件 `id` 的前缀 + */ + id: { + type: String, + }, + /** + * @zh 验证失败后滚动到第一个错误字段，接收所有[scroll-into-view-if-needed](https://github.com/stipsan/scroll-into-view-if-needed)的参数 + * @en Scroll to the first error field after verification fails, receiving all parameters of[scroll-into-view-if-needed](https://github.com/stipsan/scroll-into-view-if-needed) + */ + scrollToFirstError: { + type: [Boolean, Object] as PropType, + }, }, emits: { /** @@ -143,7 +160,9 @@ export default defineComponent({ }, setup(props, { emit }) { const prefixCls = getPrefixCls('form'); + const formRef = ref(); const { + id, model, layout, disabled, @@ -219,6 +238,28 @@ export default defineComponent({ }); }; + const scrollToField = (field: string, options?: ScrollIntoViewOptions) => { + const node = formRef.value || document.body; + const fieldId = props.id ? `${props.id}_${field}` : field; + const fieldNode = node?.querySelector(`#${fieldId}`); + + if (fieldNode) { + scrollIntoView(fieldNode as HTMLDivElement, { + behavior: 'smooth', + block: 'nearest', + scrollMode: 'if-needed', + ...options, + }); + } + }; + + const scrollToFirstError = (field: string) => { + const options = !isBoolean(props.scrollToFirstError) + ? props.scrollToFirstError + : undefined; + scrollToField(field, options); + }; + const validate = ( callback?: (errors: undefined | Record) => void ): Promise> => { @@ -238,6 +279,10 @@ export default defineComponent({ } }); + if (hasError && props.scrollToFirstError) { + scrollToFirstError(Object.keys(errors)[0]); + } + if (isFunction(callback)) { callback(hasError ? errors : undefined); } @@ -271,6 +316,10 @@ export default defineComponent({ } }); + if (hasError && props.scrollToFirstError) { + scrollToFirstError(Object.keys(errors)[0]); + } + if (isFunction(callback)) { callback(hasError ? errors : undefined); } @@ -295,6 +344,8 @@ export default defineComponent({ } }); if (hasError) { + props.scrollToFirstError && + scrollToFirstError(Object.keys(errors)[0]); emit('submitFailed', { values: model.value, errors }, e); } else { emit('submitSuccess', model.value, e); @@ -310,6 +361,7 @@ export default defineComponent({ provide( formInjectionKey, reactive({ + id, layout, disabled, labelAlign, @@ -343,12 +395,14 @@ export default defineComponent({ return { cls, + formRef, handleSubmit, innerValidate: validate, innerValidateField: validateField, innerResetFields: resetFields, innerClearValidate: clearValidate, innerSetFields: setFields, + innerScrollToField: scrollToField, }; }, methods: { @@ -405,6 +459,16 @@ export default defineComponent({ setFields(data: Record) { return this.innerSetFields(data); }, + /** + * @zh 滚动到指定表单项 + * @en Scroll to the specified form item + * @param {string} field + * @param {ScrollIntoViewOptions} options + * @public + */ + scrollToField(field: string, options?: ScrollIntoViewOptions) { + return this.innerScrollToField(field, options); + }, }, }); From 90261c87b84d57af4794e6c9c6a5440f0733f064 Mon Sep 17 00:00:00 2001 From: Flsion Date: Fri, 1 Sep 2023 17:25:58 +0800 Subject: [PATCH 05/10] fix(typography): fix style problem (#2682) --- packages/web-vue/components/typography/style/index.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/web-vue/components/typography/style/index.ts b/packages/web-vue/components/typography/style/index.ts index 3a3ab0de5..6740b7e29 100644 --- a/packages/web-vue/components/typography/style/index.ts +++ b/packages/web-vue/components/typography/style/index.ts @@ -1,2 +1,5 @@ import '../../style/index.less'; +import '../../input/style'; +import '../../popover/style'; +import '../../tooltip/style'; import './index.less'; From 1c861d50792bf69477fccd347200051864fb3862 Mon Sep 17 00:00:00 2001 From: Linyizhou <326943819@qq.com> Date: Fri, 1 Sep 2023 17:41:31 +0800 Subject: [PATCH 06/10] feat(table): :sparkles: support subtree empty state (#2673) --- packages/web-vue/components/table/__demo__/subtree.md | 5 +++-- packages/web-vue/components/table/table.tsx | 9 +++++++++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/web-vue/components/table/__demo__/subtree.md b/packages/web-vue/components/table/__demo__/subtree.md index 0cfaa6bd4..b23b7f0f0 100644 --- a/packages/web-vue/components/table/__demo__/subtree.md +++ b/packages/web-vue/components/table/__demo__/subtree.md @@ -23,7 +23,7 @@ An example of tree data display, when there is a `children` field in `data`, it checkStrictly: - +