From 6f3fca48a1f5c0abbd41e4cdb3c99c2a9bd41309 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 10 Aug 2021 14:36:28 +0800 Subject: [PATCH 01/11] feat: support vue@3.2 --- components/_util/transition.tsx | 6 +- components/auto-complete/InputElement.tsx | 9 -- components/auto-complete/index.tsx | 3 +- .../__snapshots__/index.test.js.snap | 31 ++++- components/drawer/index.tsx | 2 +- components/input/Input.tsx | 2 +- components/input/TextArea.tsx | 2 +- components/menu/src/MenuItem.tsx | 11 +- components/menu/src/SubMenu.tsx | 17 ++- components/table/filterDropdown.tsx | 2 +- components/upload/UploadList.tsx | 2 +- components/vc-select/OptionList.tsx | 4 +- components/vc-select/Selector/Input.tsx | 2 +- .../vc-select/Selector/MultipleSelector.tsx | 18 +-- .../vc-select/Selector/SingleSelector.tsx | 2 +- components/vc-select/Selector/index.tsx | 121 +++++++----------- components/vc-select/Selector/interface.ts | 27 ++++ components/vc-select/generate.tsx | 2 +- v2-doc | 2 +- 19 files changed, 151 insertions(+), 114 deletions(-) delete mode 100644 components/auto-complete/InputElement.tsx create mode 100644 components/vc-select/Selector/interface.ts diff --git a/components/_util/transition.tsx b/components/_util/transition.tsx index 1894aff8b..6caea7504 100644 --- a/components/_util/transition.tsx +++ b/components/_util/transition.tsx @@ -1,5 +1,5 @@ -import type { BaseTransitionProps, CSSProperties, Ref } from 'vue'; -import { getCurrentInstance, onUpdated } from 'vue'; +import { BaseTransitionProps, CSSProperties, onBeforeUpdate, Ref } from 'vue'; +import { getCurrentInstance } from 'vue'; import { defineComponent, nextTick, Transition as T, TransitionGroup as TG } from 'vue'; export const getTransitionProps = (transitionName: string, opt: object = {}) => { @@ -51,7 +51,7 @@ if (process.env.NODE_ENV === 'test') { inheritAttrs: false, setup(_props, { slots, attrs }) { const instance = getCurrentInstance(); - onUpdated(() => { + onBeforeUpdate(() => { const child = instance.subTree.children[0]; if (child && child.dirs && child.dirs[0]) { const value = child.dirs[0].value; diff --git a/components/auto-complete/InputElement.tsx b/components/auto-complete/InputElement.tsx deleted file mode 100644 index c3623cfec..000000000 --- a/components/auto-complete/InputElement.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { cloneElement } from '../_util/vnode'; -import { flattenChildren } from '../_util/props-util'; - -const InputElement = (_: any, { attrs, slots }) => { - const children = flattenChildren(slots.default?.())[0]; - return cloneElement(children, { ...attrs }); -}; -InputElement.inheritAttrs = false; -export default InputElement; diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx index dac4d43db..d9e43f753 100644 --- a/components/auto-complete/index.tsx +++ b/components/auto-complete/index.tsx @@ -2,7 +2,6 @@ import type { App, Plugin, VNode, ExtractPropTypes } from 'vue'; import { defineComponent, inject, provide } from 'vue'; import Select, { SelectProps } from '../select'; import Input from '../input'; -import InputElement from './InputElement'; import PropTypes from '../_util/vue-types'; import { defaultConfigProvider } from '../config-provider'; import { getComponent, getOptionProps, isValidElement, getSlot } from '../_util/props-util'; @@ -72,7 +71,7 @@ const AutoComplete = defineComponent({ getInputElement() { const children = getSlot(this); const element = children.length ? children[0] : ; - return {element}; + return element; }, focus() { diff --git a/components/cascader/__tests__/__snapshots__/index.test.js.snap b/components/cascader/__tests__/__snapshots__/index.test.js.snap index 708351c16..c2a63580d 100644 --- a/components/cascader/__tests__/__snapshots__/index.test.js.snap +++ b/components/cascader/__tests__/__snapshots__/index.test.js.snap @@ -113,4 +113,33 @@ exports[`Cascader popup correctly with defaultValue 1`] = ` `; -exports[`Cascader support controlled mode 1`] = `Zhejiang / Hangzhou / West Lake`; +exports[`Cascader popup correctly with defaultValue 2`] = ` +
+ +
+
+
    + + +
+
    + +
+
    + +
+
+
+
+`; + +exports[`Cascader support controlled mode 1`] = `Zhejiang / Hangzhou / West Lake`; diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx index cd4ababc7..bb53f4dab 100644 --- a/components/drawer/index.tsx +++ b/components/drawer/index.tsx @@ -123,7 +123,7 @@ const Drawer = defineComponent({ } if (!this.visible) { this.destroyClose = true; - this.$forceUpdate(); + (this as any).$forceUpdate(); } }, diff --git a/components/input/Input.tsx b/components/input/Input.tsx index df07a8bf1..46cb7ce0e 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -128,7 +128,7 @@ export default defineComponent({ if (!hasProp(this, 'value')) { this.stateValue = value; } else { - this.$forceUpdate(); + (this as any).$forceUpdate(); } nextTick(() => { callback && callback(); diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx index 1fb195432..f654bc56d 100644 --- a/components/input/TextArea.tsx +++ b/components/input/TextArea.tsx @@ -55,7 +55,7 @@ export default defineComponent({ if (!hasProp(this, 'value')) { this.stateValue = value; } else { - this.$forceUpdate(); + (this as any).$forceUpdate(); } nextTick(() => { callback && callback(); diff --git a/components/menu/src/MenuItem.tsx b/components/menu/src/MenuItem.tsx index 49f7f7405..df483b93d 100644 --- a/components/menu/src/MenuItem.tsx +++ b/components/menu/src/MenuItem.tsx @@ -10,6 +10,7 @@ import type { MenuInfo } from './interface'; import KeyCode from '../../_util/KeyCode'; import useDirectionStyle from './hooks/useDirectionStyle'; import Overflow from '../../vc-overflow'; +import devWarning from '../../vc-util/devWarning'; let indexGuid = 0; const menuItemProps = { @@ -30,7 +31,15 @@ export default defineComponent({ slots: ['icon', 'title'], setup(props, { slots, emit, attrs }) { const instance = getCurrentInstance(); - const key = instance.vnode.key; + + const key = + typeof instance.vnode.key === 'symbol' ? String(instance.vnode.key) : instance.vnode.key; + devWarning( + typeof instance.vnode.key !== 'symbol', + 'MenuItem', + `MenuItem \`:key="${String(key)}"\` not support Symbol type`, + ); + const eventKey = `menu_item_${++indexGuid}_$$_${key}`; const { parentEventKeys, parentKeys } = useInjectKeyPath(); const { diff --git a/components/menu/src/SubMenu.tsx b/components/menu/src/SubMenu.tsx index 24fde493f..57fea3003 100644 --- a/components/menu/src/SubMenu.tsx +++ b/components/menu/src/SubMenu.tsx @@ -12,6 +12,8 @@ import InlineSubMenuList from './InlineSubMenuList'; import Transition, { getTransitionProps } from '../../_util/transition'; import { cloneElement } from '../../_util/vnode'; import Overflow from '../../vc-overflow'; +import devWarning from '../../vc-util/devWarning'; +import isValid from '../../_util/isValid'; let indexGuid = 0; @@ -39,14 +41,17 @@ export default defineComponent({ useProvideFirstLevel(false); const instance = getCurrentInstance(); - const key = - instance.vnode.key !== null ? instance.vnode.key : `sub_menu_${++indexGuid}_$$_not_set_key`; - + const vnodeKey = + typeof instance.vnode.key === 'symbol' ? String(instance.vnode.key) : instance.vnode.key; + devWarning( + typeof instance.vnode.key !== 'symbol', + 'SubMenu', + `SubMenu \`:key="${String(vnodeKey)}"\` not support Symbol type`, + ); + const key = isValid(vnodeKey) ? vnodeKey : `sub_menu_${++indexGuid}_$$_not_set_key`; const eventKey = props.eventKey ?? - (instance.vnode.key !== null - ? `sub_menu_${++indexGuid}_$$_${instance.vnode.key}` - : (key as string)); + (isValid(vnodeKey) ? `sub_menu_${++indexGuid}_$$_${vnodeKey}` : (key as string)); const { parentEventKeys, parentInfo, parentKeys } = useInjectKeyPath(); const keysPath = computed(() => [...parentKeys.value, key]); const eventKeysPath = computed(() => [...parentEventKeys.value, eventKey]); diff --git a/components/table/filterDropdown.tsx b/components/table/filterDropdown.tsx index 8f3b8ba27..12380eb11 100755 --- a/components/table/filterDropdown.tsx +++ b/components/table/filterDropdown.tsx @@ -98,7 +98,7 @@ export default defineComponent({ this.setVisible(false); // Call `setSelectedKeys` & `confirm` in the same time will make filter data not up to date // https://github.com/ant-design/ant-design/issues/12284 - this.$forceUpdate(); + (this as any).$forceUpdate(); nextTick(this.confirmFilter2); }, diff --git a/components/upload/UploadList.tsx b/components/upload/UploadList.tsx index 4137f876a..05f5fdc9b 100644 --- a/components/upload/UploadList.tsx +++ b/components/upload/UploadList.tsx @@ -64,7 +64,7 @@ export default defineComponent({ previewFile(file.originFileObj).then(previewDataUrl => { // Need append '' to avoid dead loop file.thumbUrl = previewDataUrl || ''; - this.$forceUpdate(); + (this as any).$forceUpdate(); }); } }); diff --git a/components/vc-select/OptionList.tsx b/components/vc-select/OptionList.tsx index fbeb9744b..a24735d76 100644 --- a/components/vc-select/OptionList.tsx +++ b/components/vc-select/OptionList.tsx @@ -5,7 +5,7 @@ import classNames from '../_util/classNames'; import pickAttrs from '../_util/pickAttrs'; import { isValidElement } from '../_util/props-util'; import createRef from '../_util/createRef'; -import type { VNodeChild } from 'vue'; +import type { PropType, VNodeChild } from 'vue'; import { computed, defineComponent, nextTick, reactive, watch } from 'vue'; import List from '../vc-virtual-list/List'; import type { @@ -61,7 +61,7 @@ const OptionListProps = { virtual: PropTypes.looseBool, onSelect: PropTypes.func, - onToggleOpen: PropTypes.func, + onToggleOpen: { type: Function as PropType<(open?: boolean) => void> }, /** Tell Select that some value is now active to make accessibility work */ onActiveValue: PropTypes.func, onScroll: PropTypes.func, diff --git a/components/vc-select/Selector/Input.tsx b/components/vc-select/Selector/Input.tsx index c8f72a71d..b29c6edf0 100644 --- a/components/vc-select/Selector/Input.tsx +++ b/components/vc-select/Selector/Input.tsx @@ -74,7 +74,7 @@ const Input = defineComponent) as VNode, [[antInput]]); + let inputNode: any = inputElement || withDirectives(() as VNode, [[antInput]]); const inputProps = inputNode.props || {}; const { diff --git a/components/vc-select/Selector/MultipleSelector.tsx b/components/vc-select/Selector/MultipleSelector.tsx index dc9805a97..950378854 100644 --- a/components/vc-select/Selector/MultipleSelector.tsx +++ b/components/vc-select/Selector/MultipleSelector.tsx @@ -7,9 +7,9 @@ import type { DisplayLabelValueType, } from '../interface/generator'; import type { RenderNode } from '../interface'; -import type { InnerSelectorProps } from '.'; +import type { InnerSelectorProps } from './interface'; import Input from './Input'; -import type { VNodeChild, Ref } from 'vue'; +import type { VNodeChild, Ref, PropType } from 'vue'; import { computed, defineComponent, onMounted, ref, watch } from 'vue'; import classNames from '../../_util/classNames'; import pickAttrs from '../../_util/pickAttrs'; @@ -17,24 +17,24 @@ import PropTypes from '../../_util/vue-types'; import type { VueNode } from '../../_util/type'; import Overflow from '../../vc-overflow'; -interface SelectorProps extends InnerSelectorProps { +type SelectorProps = InnerSelectorProps & { // Icon removeIcon?: RenderNode; // Tags maxTagCount?: number | 'responsive'; maxTagTextLength?: number; - maxTagPlaceholder?: VNodeChild; + maxTagPlaceholder?: VNodeChild | ((omittedValues: LabelValueType[]) => VNodeChild); tokenSeparators?: string[]; tagRender?: (props: CustomTagProps) => VNodeChild; - onToggleOpen: (open?: boolean) => void; + onToggleOpen: any; // Motion choiceTransitionName?: string; // Event onSelect: (value: RawValueType, option: { selected: boolean }) => void; -} +}; const props = { id: PropTypes.string, @@ -62,6 +62,7 @@ const props = { ), tagRender: PropTypes.func, + onToggleOpen: { type: Function as PropType<(open?: boolean) => void> }, onSelect: PropTypes.func, onInputChange: PropTypes.func, onInputPaste: PropTypes.func, @@ -78,6 +79,8 @@ const onPreventMouseDown = (event: MouseEvent) => { const SelectSelector = defineComponent({ name: 'MultipleSelectSelector', + inheritAttrs: false, + props: props as any, setup(props) { const measureRef = ref(); const inputWidth = ref(0); @@ -278,6 +281,5 @@ const SelectSelector = defineComponent({ }; }, }); -SelectSelector.inheritAttrs = false; -SelectSelector.props = props; + export default SelectSelector; diff --git a/components/vc-select/Selector/SingleSelector.tsx b/components/vc-select/Selector/SingleSelector.tsx index be58e784f..fdbff431a 100644 --- a/components/vc-select/Selector/SingleSelector.tsx +++ b/components/vc-select/Selector/SingleSelector.tsx @@ -1,6 +1,6 @@ import pickAttrs from '../../_util/pickAttrs'; import Input from './Input'; -import type { InnerSelectorProps } from '.'; +import type { InnerSelectorProps } from './interface'; import type { VNodeChild } from 'vue'; import { computed, defineComponent, Fragment, ref, watch } from 'vue'; import PropTypes from '../../_util/vue-types'; diff --git a/components/vc-select/Selector/index.tsx b/components/vc-select/Selector/index.tsx index d4430c35a..e6dd0f9a1 100644 --- a/components/vc-select/Selector/index.tsx +++ b/components/vc-select/Selector/index.tsx @@ -14,36 +14,12 @@ import SingleSelector from './SingleSelector'; import type { LabelValueType, RawValueType, CustomTagProps } from '../interface/generator'; import type { RenderNode, Mode } from '../interface'; import useLock from '../hooks/useLock'; -import type { VNodeChild } from 'vue'; +import type { VNodeChild, PropType } from 'vue'; import { defineComponent } from 'vue'; -import type { RefObject } from '../../_util/createRef'; import createRef from '../../_util/createRef'; import PropTypes from '../../_util/vue-types'; import type { VueNode } from '../../_util/type'; -export interface InnerSelectorProps { - prefixCls: string; - id: string; - mode: Mode; - inputRef: RefObject; - placeholder?: VNodeChild; - disabled?: boolean; - autofocus?: boolean; - autocomplete?: string; - values: LabelValueType[]; - showSearch?: boolean; - searchValue: string; - accessibilityIndex: number; - open: boolean; - tabindex?: number | string; - onInputKeyDown: EventHandlerNonNull; - onInputMouseDown: EventHandlerNonNull; - onInputChange: EventHandlerNonNull; - onInputPaste: EventHandlerNonNull; - onInputCompositionStart: EventHandlerNonNull; - onInputCompositionEnd: EventHandlerNonNull; -} - export interface SelectorProps { id: string; prefixCls: string; @@ -67,7 +43,7 @@ export interface SelectorProps { // Tags maxTagCount?: number | 'responsive'; maxTagTextLength?: number; - maxTagPlaceholder?: VNodeChild; + maxTagPlaceholder?: VNodeChild | ((omittedValues: LabelValueType[]) => VNodeChild); tagRender?: (props: CustomTagProps) => VNodeChild; /** Check if `tokenSeparators` contains `\n` or `\r\n` */ @@ -92,6 +68,52 @@ export interface SelectorProps { const Selector = defineComponent({ name: 'Selector', + inheritAttrs: false, + props: { + id: PropTypes.string, + prefixCls: PropTypes.string, + showSearch: PropTypes.looseBool, + open: PropTypes.looseBool, + /** Display in the Selector value, it's not same as `value` prop */ + values: PropTypes.array, + multiple: PropTypes.looseBool, + mode: PropTypes.string, + searchValue: PropTypes.string, + activeValue: PropTypes.string, + inputElement: PropTypes.any, + + autofocus: PropTypes.looseBool, + accessibilityIndex: PropTypes.number, + tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + disabled: PropTypes.looseBool, + placeholder: PropTypes.any, + removeIcon: PropTypes.any, + + // Tags + maxTagCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), + maxTagTextLength: PropTypes.number, + maxTagPlaceholder: PropTypes.any, + tagRender: PropTypes.func, + + /** Check if `tokenSeparators` contains `\n` or `\r\n` */ + tokenWithEnter: PropTypes.looseBool, + + // Motion + choiceTransitionName: PropTypes.string, + + onToggleOpen: { type: Function as PropType<(open?: boolean) => void> }, + /** `onSearch` returns go next step boolean to check if need do toggle open */ + onSearch: PropTypes.func, + onSearchSubmit: PropTypes.func, + onSelect: PropTypes.func, + onInputKeyDown: PropTypes.func, + + /** + * @private get real dom for trigger align. + * This may be removed after React provides replacement of `findDOMNode` + */ + domRef: PropTypes.func, + } as any, setup(props) { const inputRef = createRef(); let compositionStatus = false; @@ -258,51 +280,4 @@ const Selector = defineComponent({ }, }); -Selector.inheritAttrs = false; -Selector.props = { - id: PropTypes.string, - prefixCls: PropTypes.string, - showSearch: PropTypes.looseBool, - open: PropTypes.looseBool, - /** Display in the Selector value, it's not same as `value` prop */ - values: PropTypes.array, - multiple: PropTypes.looseBool, - mode: PropTypes.string, - searchValue: PropTypes.string, - activeValue: PropTypes.string, - inputElement: PropTypes.any, - - autofocus: PropTypes.looseBool, - accessibilityIndex: PropTypes.number, - tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - disabled: PropTypes.looseBool, - placeholder: PropTypes.any, - removeIcon: PropTypes.any, - - // Tags - maxTagCount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - maxTagTextLength: PropTypes.number, - maxTagPlaceholder: PropTypes.any, - tagRender: PropTypes.func, - - /** Check if `tokenSeparators` contains `\n` or `\r\n` */ - tokenWithEnter: PropTypes.looseBool, - - // Motion - choiceTransitionName: PropTypes.string, - - onToggleOpen: PropTypes.func, - /** `onSearch` returns go next step boolean to check if need do toggle open */ - onSearch: PropTypes.func, - onSearchSubmit: PropTypes.func, - onSelect: PropTypes.func, - onInputKeyDown: PropTypes.func, - - /** - * @private get real dom for trigger align. - * This may be removed after React provides replacement of `findDOMNode` - */ - domRef: PropTypes.func, -}; - export default Selector; diff --git a/components/vc-select/Selector/interface.ts b/components/vc-select/Selector/interface.ts new file mode 100644 index 000000000..2aa8b1e2c --- /dev/null +++ b/components/vc-select/Selector/interface.ts @@ -0,0 +1,27 @@ +import type { RefObject } from '../../_util/createRef'; +import type { VNodeChild } from 'vue'; +import type { Mode } from '../interface'; +import type { LabelValueType } from '../interface/generator'; + +export interface InnerSelectorProps { + prefixCls: string; + id: string; + mode: Mode; + inputRef: RefObject; + placeholder?: VNodeChild; + disabled?: boolean; + autofocus?: boolean; + autocomplete?: string; + values: LabelValueType[]; + showSearch?: boolean; + searchValue: string; + accessibilityIndex: number; + open: boolean; + tabindex?: number | string; + onInputKeyDown: EventHandlerNonNull; + onInputMouseDown: EventHandlerNonNull; + onInputChange: EventHandlerNonNull; + onInputPaste: EventHandlerNonNull; + onInputCompositionStart: EventHandlerNonNull; + onInputCompositionEnd: EventHandlerNonNull; +} diff --git a/components/vc-select/generate.tsx b/components/vc-select/generate.tsx index 09b2591ce..eb6571923 100644 --- a/components/vc-select/generate.tsx +++ b/components/vc-select/generate.tsx @@ -1057,7 +1057,7 @@ export default function generateSelector< methods: { // We need force update here since popup dom is render async onPopupMouseEnter() { - this.$forceUpdate(); + (this as any).$forceUpdate(); }, }, render() { diff --git a/v2-doc b/v2-doc index 157cce105..6b53258cc 160000 --- a/v2-doc +++ b/v2-doc @@ -1 +1 @@ -Subproject commit 157cce105e1f0a369658dfb29cc802ebc09d0d93 +Subproject commit 6b53258cc2b3709e070d340714e992760e660e67 From f5849fad68aefc9bba60d5c62af8bf3a73fd4c50 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 10 Aug 2021 14:39:47 +0800 Subject: [PATCH 02/11] test: update snap --- .../__snapshots__/index.test.js.snap | 29 ------------------- 1 file changed, 29 deletions(-) diff --git a/components/cascader/__tests__/__snapshots__/index.test.js.snap b/components/cascader/__tests__/__snapshots__/index.test.js.snap index c2a63580d..358aacf65 100644 --- a/components/cascader/__tests__/__snapshots__/index.test.js.snap +++ b/components/cascader/__tests__/__snapshots__/index.test.js.snap @@ -113,33 +113,4 @@ exports[`Cascader popup correctly with defaultValue 1`] = ` `; -exports[`Cascader popup correctly with defaultValue 2`] = ` -
- -
-
-
    - - -
-
    - -
-
    - -
-
-
-
-`; - exports[`Cascader support controlled mode 1`] = `Zhejiang / Hangzhou / West Lake`; From 08c3c9cc3bc6970f0d2a2f4759b093d70192d337 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 10 Aug 2021 15:21:13 +0800 Subject: [PATCH 03/11] fix: symbol error --- components/descriptions/Row.tsx | 6 +++--- components/vc-select/utils/legacyUtil.ts | 7 ++++--- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/components/descriptions/Row.tsx b/components/descriptions/Row.tsx index 556d1d19d..0f0e7055c 100644 --- a/components/descriptions/Row.tsx +++ b/components/descriptions/Row.tsx @@ -50,7 +50,7 @@ const Row: FunctionalComponent = props => { if (typeof component === 'string') { return ( = props => { return [ = props => { label={label} />, & { children: { default?: () => any }; + key: string | number; }; const child = children && children.default ? children.default() : undefined; return { @@ -16,7 +17,7 @@ function convertNodeToOption(node: VNode): OptionData { value: value !== undefined ? value : key, children: child, disabled: disabled || disabled === '', // support - ...restProps, + ...(restProps as Omit), }; } @@ -46,7 +47,7 @@ export function convertChildrenToData( const child = children && children.default ? children.default() : undefined; const label = props?.label || children.label?.() || key; return { - key: `__RC_SELECT_GRP__${key === null ? index : key}__`, + key: `__RC_SELECT_GRP__${key === null ? index : String(key)}__`, ...props, label, options: convertChildrenToData(child || []), From 0cd3db0bb0d4aa616cce504234fc84060edba54b Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 10 Aug 2021 16:09:24 +0800 Subject: [PATCH 04/11] fix: auto hide table scrollbar #4484 close #4484 --- components/vc-table/src/BaseTable.jsx | 7 +--- components/vc-table/src/BodyTable.jsx | 59 ++++++--------------------- components/vc-table/src/Table.jsx | 31 +------------- 3 files changed, 16 insertions(+), 81 deletions(-) diff --git a/components/vc-table/src/BaseTable.jsx b/components/vc-table/src/BaseTable.jsx index 36bf0da97..2e5a5dc8a 100644 --- a/components/vc-table/src/BaseTable.jsx +++ b/components/vc-table/src/BaseTable.jsx @@ -132,16 +132,13 @@ const BaseTable = { render() { const { sComponents: components, prefixCls, scroll, data } = this.table; - const { expander, tableClassName, hasHead, hasBody, fixed, isAnyColumnsFixed } = this.$props; + const { expander, tableClassName, hasHead, hasBody, fixed } = this.$props; const columns = this.getColumns(); const tableStyle = {}; if (!fixed && scroll.x) { - // 当有固定列时，width auto 会导致 body table 的宽度撑不开，从而固定列无法对齐 - // 详情见：https://github.com/ant-design/ant-design/issues/22160 - const tableWidthScrollX = isAnyColumnsFixed ? 'max-content' : 'auto'; // not set width, then use content fixed width - tableStyle.width = scroll.x === true ? tableWidthScrollX : scroll.x; + tableStyle.width = scroll.x === true ? 'auto' : scroll.x; tableStyle.width = typeof tableStyle.width === 'number' ? `${tableStyle.width}px` : tableStyle.width; } diff --git a/components/vc-table/src/BodyTable.jsx b/components/vc-table/src/BodyTable.jsx index ea5ba86de..b0352dab0 100644 --- a/components/vc-table/src/BodyTable.jsx +++ b/components/vc-table/src/BodyTable.jsx @@ -1,13 +1,11 @@ import { inject } from 'vue'; -import PropTypes, { withUndefined } from '../../_util/vue-types'; -import { measureScrollbar } from './utils'; +import PropTypes from '../../_util/vue-types'; import BaseTable from './BaseTable'; export default { name: 'BodyTable', inheritAttrs: false, props: { - fixed: withUndefined(PropTypes.oneOfType([PropTypes.string, PropTypes.looseBool])), columns: PropTypes.array.isRequired, tableClassName: PropTypes.string.isRequired, handleBodyScroll: PropTypes.func.isRequired, @@ -25,7 +23,6 @@ export default { const { prefixCls, scroll } = this.table; const { columns, - fixed, tableClassName, getRowKey, handleBodyScroll, @@ -35,34 +32,26 @@ export default { } = this; let { useFixedHeader, saveRef } = this.table; const bodyStyle = { ...this.table.bodyStyle }; - const innerBodyStyle = {}; - - if (scroll.x || fixed) { - bodyStyle.overflowX = bodyStyle.overflowX || 'scroll'; - // Fix weired webkit render bug - // https://github.com/ant-design/ant-design/issues/7783 - bodyStyle.WebkitTransform = 'translate3d (0, 0, 0)'; - } if (scroll.y) { // maxHeight will make fixed-Table scrolling not working // so we only set maxHeight to body-Table here let maxHeight = bodyStyle.maxHeight || scroll.y; maxHeight = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight; - if (fixed) { - innerBodyStyle.maxHeight = maxHeight; - innerBodyStyle.overflowY = bodyStyle.overflowY || 'scroll'; - } else { - bodyStyle.maxHeight = maxHeight; - } + + bodyStyle.maxHeight = maxHeight; bodyStyle.overflowY = bodyStyle.overflowY || 'scroll'; useFixedHeader = true; + } - // Add negative margin bottom for scroll bar overflow bug - const scrollbarWidth = measureScrollbar({ direction: 'vertical' }); - if (scrollbarWidth > 0 && fixed) { - bodyStyle.marginBottom = `-${scrollbarWidth}px`; - bodyStyle.paddingBottom = '0px'; + if (scroll.x) { + bodyStyle.overflowX = bodyStyle.overflowX || 'auto'; + // Fix weired webkit render bug + // https://github.com/ant-design/ant-design/issues/7783 + bodyStyle.WebkitTransform = 'translate3d (0, 0, 0)'; + + if (!scroll.y) { + bodyStyle.overflowY = 'hidden'; } } @@ -71,7 +60,6 @@ export default { tableClassName={tableClassName} hasHead={!useFixedHeader} hasBody - fixed={fixed} columns={columns} expander={expander} getRowKey={getRowKey} @@ -79,29 +67,6 @@ export default { /> ); - if (fixed && columns.length) { - let refName; - if (columns[0].fixed === 'left' || columns[0].fixed === true) { - refName = 'fixedColumnsBodyLeft'; - } else if (columns[0].fixed === 'right') { - refName = 'fixedColumnsBodyRight'; - } - delete bodyStyle.overflowX; - delete bodyStyle.overflowY; - return ( -
-
- {baseTable} -
-
- ); - } // Should provides `tabindex` if use scroll to enable keyboard scroll const useTabIndex = scroll && (scroll.x || scroll.y); diff --git a/components/vc-table/src/Table.jsx b/components/vc-table/src/Table.jsx index c05c4a379..19d0d6acc 100644 --- a/components/vc-table/src/Table.jsx +++ b/components/vc-table/src/Table.jsx @@ -501,41 +501,15 @@ export default defineComponent({ ); }, - renderLeftFixedTable() { - const { prefixCls } = this; - - return ( -
- {this.renderTable({ - columns: this.columnManager.leftColumns.value, - fixed: 'left', - })} -
- ); - }, - renderRightFixedTable() { - const { prefixCls } = this; - - return ( -
- {this.renderTable({ - columns: this.columnManager.rightColumns.value, - fixed: 'right', - })} -
- ); - }, - renderTable(options) { - const { columns, fixed, isAnyColumnsFixed } = options; + const { columns, isAnyColumnsFixed } = options; const { prefixCls, scroll = {} } = this; - const tableClassName = scroll.x || fixed ? `${prefixCls}-fixed` : ''; + const tableClassName = scroll.x ? `${prefixCls}-fixed` : ''; const headTable = ( Date: Tue, 10 Aug 2021 16:25:04 +0800 Subject: [PATCH 05/11] release 2.2.4 --- CHANGELOG.en-US.md | 7 +++++++ CHANGELOG.zh-CN.md | 7 +++++++ components/_util/transition.tsx | 3 ++- 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 24e3cdb21..eea6e05ce 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -10,6 +10,13 @@ --- +## 2.2.4 + +`2021-08-10` + +- 🌟 Support Vue@3.2 [#4490](https://github.com/vueComponent/ant-design-vue/issues/4490) +- 🌟 Automatically hide the horizontal scroll bar of `Table` [#4484](https://github.com/vueComponent/ant-design-vue/issues/4484) + ## 2.2.3 `2021-08-07` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index d93a8bbe8..efddaed1a 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -10,6 +10,13 @@ --- +## 2.2.4 + +`2021-08-10` + +- 🌟 支持 Vue@3.2 [#4490](https://github.com/vueComponent/ant-design-vue/issues/4490) +- 🌟 自动隐藏 `Table` 横向滚动条 [#4484](https://github.com/vueComponent/ant-design-vue/issues/4484) + ## 2.2.3 `2021-08-07` diff --git a/components/_util/transition.tsx b/components/_util/transition.tsx index 6caea7504..18c1733d3 100644 --- a/components/_util/transition.tsx +++ b/components/_util/transition.tsx @@ -1,4 +1,5 @@ -import { BaseTransitionProps, CSSProperties, onBeforeUpdate, Ref } from 'vue'; +import type { BaseTransitionProps, CSSProperties, Ref } from 'vue'; +import { onBeforeUpdate } from 'vue'; import { getCurrentInstance } from 'vue'; import { defineComponent, nextTick, Transition as T, TransitionGroup as TG } from 'vue'; From 1da679de343898a018b37aee4e404c51c5919948 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 10 Aug 2021 16:34:09 +0800 Subject: [PATCH 06/11] release 2.2.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ad6fb3666..83703b2cf 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ant-design-vue", - "version": "2.2.3", + "version": "2.2.4", "title": "Ant Design Vue", "description": "An enterprise-class UI design language and Vue-based implementation", "keywords": [ From 07f6d9edf0508a206dfdd7e4adc64049e7f7fbe0 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 10 Aug 2021 16:51:21 +0800 Subject: [PATCH 07/11] docs: udapte changelog --- CHANGELOG.en-US.md | 1 + CHANGELOG.zh-CN.md | 1 + 2 files changed, 2 insertions(+) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index eea6e05ce..a1fd75d75 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -16,6 +16,7 @@ - 🌟 Support Vue@3.2 [#4490](https://github.com/vueComponent/ant-design-vue/issues/4490) - 🌟 Automatically hide the horizontal scroll bar of `Table` [#4484](https://github.com/vueComponent/ant-design-vue/issues/4484) +- 🐞 Fix the issue of `Progress` trailColor not taking effect [#4483](https://github.com/vueComponent/ant-design-vue/issues/4483) ## 2.2.3 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index efddaed1a..81ecfbb83 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -16,6 +16,7 @@ - 🌟 支持 Vue@3.2 [#4490](https://github.com/vueComponent/ant-design-vue/issues/4490) - 🌟 自动隐藏 `Table` 横向滚动条 [#4484](https://github.com/vueComponent/ant-design-vue/issues/4484) +- 🐞 修复 `Progress` trailColor 不生效问题 [#4483](https://github.com/vueComponent/ant-design-vue/issues/4483) ## 2.2.3 From 68c1f4550108a3a6bbe4f1b2c5c168523fd6c84a Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 11 Aug 2021 15:22:49 +0800 Subject: [PATCH 08/11] feat: select support custom option by option slot --- components/select/index.tsx | 11 ++++++++++- components/vc-select/OptionList.tsx | 10 +++++++--- components/vc-select/Select.tsx | 1 + components/vc-select/generate.tsx | 3 +++ v2-doc | 2 +- 5 files changed, 22 insertions(+), 5 deletions(-) diff --git a/components/select/index.tsx b/components/select/index.tsx index 5cce05d0d..17b278961 100644 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -76,7 +76,15 @@ const Select = defineComponent({ props: SelectProps(), SECRET_COMBOBOX_MODE_DO_NOT_USE: 'SECRET_COMBOBOX_MODE_DO_NOT_USE', emits: ['change', 'update:value'], - slots: ['notFoundContent', 'suffixIcon', 'itemIcon', 'removeIcon', 'clearIcon', 'dropdownRender'], + slots: [ + 'notFoundContent', + 'suffixIcon', + 'itemIcon', + 'removeIcon', + 'clearIcon', + 'dropdownRender', + 'option', + ], setup(props, { attrs, emit, slots, expose }) { const selectRef = ref(null); @@ -194,6 +202,7 @@ const Select = defineComponent({ dropdownClassName={rcSelectRtlDropDownClassName} onChange={triggerChange} dropdownRender={selectProps.dropdownRender || slots.dropdownRender} + v-slots={{ option: slots.option }} > {slots.default?.()} diff --git a/components/vc-select/OptionList.tsx b/components/vc-select/OptionList.tsx index a24735d76..0f9330910 100644 --- a/components/vc-select/OptionList.tsx +++ b/components/vc-select/OptionList.tsx @@ -77,6 +77,7 @@ const OptionListProps = { const OptionList = defineComponent({ name: 'OptionList', inheritAttrs: false, + slots: ['option'], setup(props) { const itemPrefixCls = computed(() => `${props.prefixCls}-item`); @@ -268,6 +269,7 @@ const OptionList = defineComponent({ setActive, onSelectValue, memoFlattenOptions, + $slots, } = this as any; const { id, @@ -281,6 +283,7 @@ const OptionList = defineComponent({ onScroll, onMouseenter, } = this.$props as OptionListProps; + const renderOption = $slots.option; const { activeIndex } = this.state; // ========================== Render ========================== if (memoFlattenOptions.length === 0) { @@ -315,12 +318,11 @@ const OptionList = defineComponent({ onMouseenter={onMouseenter} children={({ group, groupOption, data }, itemIndex) => { const { label, key } = data; - // Group if (group) { return (
- {label !== undefined ? label : key} + {renderOption ? renderOption(data) : label !== undefined ? label : key}
); } @@ -387,7 +389,9 @@ const OptionList = defineComponent({ }} style={style} > -
{content}
+
+ {renderOption ? renderOption(data) : content} +
{isValidElement(menuItemSelectedIcon) || selected} {iconVisible && ( >({ ref={selectRef} {...(props as any)} {...attrs} + v-slots={slots} children={slots.default?.() || []} /> ); diff --git a/components/vc-select/generate.tsx b/components/vc-select/generate.tsx index eb6571923..f0049771e 100644 --- a/components/vc-select/generate.tsx +++ b/components/vc-select/generate.tsx @@ -340,6 +340,7 @@ export default function generateSelector< } = config as any; const Select = defineComponent>({ name: 'Select', + slots: ['option'], setup(props: SelectProps) { const useInternalProps = computed( () => props.internalProps && props.internalProps.mark === INTERNAL_PROPS_MARK, @@ -1093,6 +1094,7 @@ export default function generateSelector< displayValues, activeValue, onSearchSubmit, + $slots: slots, } = this as any; const { prefixCls = defaultPrefixCls, @@ -1204,6 +1206,7 @@ export default function generateSelector< menuItemSelectedIcon={menuItemSelectedIcon} virtual={virtual !== false && dropdownMatchSelectWidth !== false} onMouseenter={onPopupMouseEnter} + v-slots={{ option: slots.option }} /> ); diff --git a/v2-doc b/v2-doc index 6b53258cc..157cce105 160000 --- a/v2-doc +++ b/v2-doc @@ -1 +1 @@ -Subproject commit 6b53258cc2b3709e070d340714e992760e660e67 +Subproject commit 157cce105e1f0a369658dfb29cc802ebc09d0d93 From 01718e35badb12ec2b44d2a9584aafe036f53978 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 11 Aug 2021 16:41:23 +0800 Subject: [PATCH 09/11] fix: transition remove appearFromClass #4409 --- components/_util/transition.tsx | 4 ++-- v2-doc | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/_util/transition.tsx b/components/_util/transition.tsx index 18c1733d3..140e31713 100644 --- a/components/_util/transition.tsx +++ b/components/_util/transition.tsx @@ -10,7 +10,7 @@ export const getTransitionProps = (transitionName: string, opt: object = {}) => const transitionProps = transitionName ? { appear: true, - appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`, + // appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`, // appearActiveClass: `antdv-base-transtion`, appearToClass: `${transitionName}-appear ${transitionName}-appear-active`, enterFromClass: `${transitionName}-enter ${transitionName}-enter-prepare`, @@ -29,7 +29,7 @@ export const getTransitionGroupProps = (transitionName: string, opt: object = {} const transitionProps = transitionName ? { appear: true, - appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`, + // appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`, appearActiveClass: `${transitionName}`, appearToClass: `${transitionName}-appear ${transitionName}-appear-active`, enterFromClass: `${transitionName}-appear ${transitionName}-enter ${transitionName}-appear-prepare ${transitionName}-enter-prepare`, diff --git a/v2-doc b/v2-doc index 157cce105..2924233b6 160000 --- a/v2-doc +++ b/v2-doc @@ -1 +1 @@ -Subproject commit 157cce105e1f0a369658dfb29cc802ebc09d0d93 +Subproject commit 2924233b60d3645d3df5e86e8bec912d3a13496d From ccb24016c07632f49550646c971060c402586c67 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 11 Aug 2021 16:59:39 +0800 Subject: [PATCH 10/11] fix: select not scrollTo active position --- components/vc-select/OptionList.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/vc-select/OptionList.tsx b/components/vc-select/OptionList.tsx index 0f9330910..a61876512 100644 --- a/components/vc-select/OptionList.tsx +++ b/components/vc-select/OptionList.tsx @@ -151,7 +151,9 @@ const OptionList = defineComponent({ const value = Array.from(props.values)[0]; const index = memoFlattenOptions.value.findIndex(({ data }) => data.value === value); setActive(index); - scrollIntoView(index); + nextTick(() => { + scrollIntoView(index); + }); } // Force trigger scrollbar visible when open if (props.open) { From 665e5919af5548d3700f0142345f98a1149386a1 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 11 Aug 2021 17:13:51 +0800 Subject: [PATCH 11/11] release 2.2.5 --- CHANGELOG.en-US.md | 8 ++++++++ CHANGELOG.zh-CN.md | 8 ++++++++ package.json | 2 +- 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index a1fd75d75..4ff30a9a6 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -10,6 +10,14 @@ --- +## 2.2.5 + +`2021-08-11` + +- 🌟 `Select` supports customizing nodes through option slots [68c1f4](https://github.com/vueComponent/ant-design-vue/commit/68c1f4550108a3a6bbe4f1b2c5c168523fd6c84a) +- 🐞 Fix the problem that the pop-up window component in the development environment does not display in the lower version of chrome, and avoid the pop-up window flashing [#4409](https://github.com/vueComponent/ant-design-vue/issues/4409) +- 🐞 Fix the problem of not scrolling to the active position when `Select` is opened [ccb240](https://github.com/vueComponent/ant-design-vue/commit/ccb24016c07632f49550646c971060c402586c67) + ## 2.2.4 `2021-08-10` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 81ecfbb83..bf7755094 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -10,6 +10,14 @@ --- +## 2.2.5 + +`2021-08-11` + +- 🌟 `Select` 支持通过 option 插槽定制化节点 [68c1f4](https://github.com/vueComponent/ant-design-vue/commit/68c1f4550108a3a6bbe4f1b2c5c168523fd6c84a) +- 🐞 修复开发环境下弹窗类组件在低版本 chrome 下，不显示问题，并避免弹窗闪动 [#4409](https://github.com/vueComponent/ant-design-vue/issues/4409) +- 🐞 修复 `Select` 打开时没有滚动到激活位置问题 [ccb240](https://github.com/vueComponent/ant-design-vue/commit/ccb24016c07632f49550646c971060c402586c67) + ## 2.2.4 `2021-08-10` diff --git a/package.json b/package.json index 83703b2cf..f339f3115 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ant-design-vue", - "version": "2.2.4", + "version": "2.2.5", "title": "Ant Design Vue", "description": "An enterprise-class UI design language and Vue-based implementation", "keywords": [