github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/next' into refactor-date 

# Conflicts:
#	v2-doc
pull/4499/head
tangjinzhou 2021-08-11 22:02:14 +08:00
parent 278a69e80b 665e5919af
commit 70f9b02f51
29 changed files with 204 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
CHANGELOG.en-US.md
View File

@ -10,6 +10,22 @@
---
## 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`
- 🌟 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
`2021-08-07`

16
CHANGELOG.zh-CN.md
View File

@ -10,6 +10,22 @@
---
## 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`
- 🌟 支持 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
`2021-08-07`

9
components/_util/transition.tsx
View File

@ -1,5 +1,6 @@
import type { BaseTransitionProps, CSSProperties, Ref } from 'vue';
import { getCurrentInstance, onUpdated } from 'vue';
import { onBeforeUpdate } from 'vue';
import { getCurrentInstance } from 'vue';
import { defineComponent, nextTick, Transition as T, TransitionGroup as TG } from 'vue';
export const getTransitionProps = (transitionName: string, opt: object = {}) => {
@ -9,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`,
@ -28,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`,
@ -51,7 +52,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;

9
components/auto-complete/InputElement.tsx
View File

@ -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;

3
components/auto-complete/index.tsx
View File

@ -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] : <Input lazy={false} />;
return <InputElement {...element.props}>{element}</InputElement>;
return element;
},
focus() {

2
components/cascader/__tests__/__snapshots__/index.test.js.snap
View File

@ -113,4 +113,4 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
</div>
`;
exports[`Cascader support controlled mode 1`] = `<!----><span class="ant-cascader-picker" tabindex="0"><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><input type="text" readonly="" autocomplete="off" class="ant-input ant-cascader-input "><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-cascader-picker-clear"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>`;
exports[`Cascader support controlled mode 1`] = `<!----><span class="ant-cascader-picker" tabindex="0"><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><input type="text" readonly="" autocomplete="off" class="ant-input ant-cascader-input"><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-cascader-picker-clear"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>`;

6
components/descriptions/Row.tsx
View File

@ -50,7 +50,7 @@ const Row: FunctionalComponent<RowProps> = props => {
if (typeof component === 'string') {
return (
<Cell
key={`${type}-${key || index}`}
key={`${type}-${String(key) || index}`}
class={className}
style={style}
labelStyle={{ ...rootLabelStyle.value, ...labelStyle }}
@ -68,7 +68,7 @@ const Row: FunctionalComponent<RowProps> = props => {
return [
<Cell
key={`label-${key || index}`}
key={`label-${String(key) || index}`}
class={className}
style={{ ...rootLabelStyle.value, ...style, ...labelStyle }}
span={1}
@ -79,7 +79,7 @@ const Row: FunctionalComponent<RowProps> = props => {
label={label}
/>,
<Cell
key={`content-${key || index}`}
key={`content-${String(key) || index}`}
class={className}
style={{ ...rootContentStyle.value, ...style, ...contentStyle }}
span={span * 2 - 1}

2
components/drawer/index.tsx
View File

@ -123,7 +123,7 @@ const Drawer = defineComponent({
}
if (!this.visible) {
this.destroyClose = true;
this.$forceUpdate();
(this as any).$forceUpdate();
}
},

2
components/input/Input.tsx
View File

@ -128,7 +128,7 @@ export default defineComponent({
if (!hasProp(this, 'value')) {
this.stateValue = value;
} else {
this.$forceUpdate();
(this as any).$forceUpdate();
}
nextTick(() => {
callback && callback();

2
components/input/TextArea.tsx
View File

@ -55,7 +55,7 @@ export default defineComponent({
if (!hasProp(this, 'value')) {
this.stateValue = value;
} else {
this.$forceUpdate();
(this as any).$forceUpdate();
}
nextTick(() => {
callback && callback();

11
components/menu/src/MenuItem.tsx
View File

@ -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 {

17
components/menu/src/SubMenu.tsx
View File

@ -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]);

11
components/select/index.tsx
View File

@ -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?.()}
</RcSelect>

2
components/table/filterDropdown.tsx
View File

@ -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);
},

2
components/upload/UploadList.tsx
View File

@ -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();
});
}
});

18
components/vc-select/OptionList.tsx
View File

@ -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,
@ -77,6 +77,7 @@ const OptionListProps = {
const OptionList = defineComponent<OptionListProps, { state?: any }>({
name: 'OptionList',
inheritAttrs: false,
slots: ['option'],
setup(props) {
const itemPrefixCls = computed(() => `${props.prefixCls}-item`);
@ -150,7 +151,9 @@ const OptionList = defineComponent<OptionListProps, { state?: any }>({
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) {
@ -268,6 +271,7 @@ const OptionList = defineComponent<OptionListProps, { state?: any }>({
setActive,
onSelectValue,
memoFlattenOptions,
$slots,
} = this as any;
const {
id,
@ -281,6 +285,7 @@ const OptionList = defineComponent<OptionListProps, { state?: any }>({
onScroll,
onMouseenter,
} = this.$props as OptionListProps;
const renderOption = $slots.option;
const { activeIndex } = this.state;
// ========================== Render ==========================
if (memoFlattenOptions.length === 0) {
@ -315,12 +320,11 @@ const OptionList = defineComponent<OptionListProps, { state?: any }>({
onMouseenter={onMouseenter}
children={({ group, groupOption, data }, itemIndex) => {
const { label, key } = data;
// Group
if (group) {
return (
<div class={classNames(itemPrefixCls, `${itemPrefixCls}-group`)}>
{label !== undefined ? label : key}
{renderOption ? renderOption(data) : label !== undefined ? label : key}
</div>
);
}
@ -387,7 +391,9 @@ const OptionList = defineComponent<OptionListProps, { state?: any }>({
}}
style={style}
>
<div class={`${optionPrefixCls}-content`}>{content}</div>
<div class={`${optionPrefixCls}-content`}>
{renderOption ? renderOption(data) : content}
</div>
{isValidElement(menuItemSelectedIcon) || selected}
{iconVisible && (
<TransBtn

1
components/vc-select/Select.tsx
View File

@ -84,6 +84,7 @@ const Select = defineComponent<Omit<ExportedSelectProps, 'children'>>({
ref={selectRef}
{...(props as any)}
{...attrs}
v-slots={slots}
children={slots.default?.() || []}
/>
);

2
components/vc-select/Selector/Input.tsx
View File

@ -74,7 +74,7 @@ const Input = defineComponent<InputProps, { VCSelectContainerEvent: any; blurTim
inputRef,
attrs,
} = this.$props as InputProps;
let inputNode: any = withDirectives((inputElement || <input />) as VNode, [[antInput]]);
let inputNode: any = inputElement || withDirectives((<input />) as VNode, [[antInput]]);
const inputProps = inputNode.props || {};
const {

18
components/vc-select/Selector/MultipleSelector.tsx
View File

@ -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<SelectorProps>({
name: 'MultipleSelectSelector',
inheritAttrs: false,
props: props as any,
setup(props) {
const measureRef = ref();
const inputWidth = ref(0);
@ -278,6 +281,5 @@ const SelectSelector = defineComponent<SelectorProps>({
};
},
});
SelectSelector.inheritAttrs = false;
SelectSelector.props = props;
export default SelectSelector;

2
components/vc-select/Selector/SingleSelector.tsx
View File

@ -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';

121
components/vc-select/Selector/index.tsx
View File

@ -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<SelectorProps>({
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<SelectorProps>({
},
});
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;

27
components/vc-select/Selector/interface.ts Normal file
View File

@ -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;
}

5
components/vc-select/generate.tsx
View File

@ -340,6 +340,7 @@ export default function generateSelector<
} = config as any;
const Select = defineComponent<SelectProps<OptionsType, ValueType>>({
name: 'Select',
slots: ['option'],
setup(props: SelectProps<OptionsType, ValueType>) {
const useInternalProps = computed(
() => props.internalProps && props.internalProps.mark === INTERNAL_PROPS_MARK,
@ -1057,7 +1058,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() {
@ -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 }}
/>
);

7
components/vc-select/utils/legacyUtil.ts
View File

@ -7,8 +7,9 @@ function convertNodeToOption(node: VNode): OptionData {
key,
children,
props: { value, disabled, ...restProps },
} = node as VNode & {
} = node as Omit<VNode, 'key'> & {
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 <a-select-option disabled />
...restProps,
...(restProps as Omit<typeof restProps, 'key'>),
};
}
@ -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 || []),

7
components/vc-table/src/BaseTable.jsx
View File

@ -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;
}

59
components/vc-table/src/BodyTable.jsx
View File

@ -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 (
<div key="bodyTable" class={`${prefixCls}-body-outer`} style={{ ...bodyStyle }}>
<div
class={`${prefixCls}-body-inner`}
style={innerBodyStyle}
ref={saveRef(refName)}
onWheel={handleWheel}
onScroll={handleBodyScroll}
>
{baseTable}
</div>
</div>
);
}
// Should provides `tabindex` if use scroll to enable keyboard scroll
const useTabIndex = scroll && (scroll.x || scroll.y);

31
components/vc-table/src/Table.jsx
View File

@ -501,41 +501,15 @@ export default defineComponent({
);
},
renderLeftFixedTable() {
const { prefixCls } = this;
return (
<div key="left" class={`${prefixCls}-fixed-left`}>
{this.renderTable({
columns: this.columnManager.leftColumns.value,
fixed: 'left',
})}
</div>
);
},
renderRightFixedTable() {
const { prefixCls } = this;
return (
<div class={`${prefixCls}-fixed-right`}>
{this.renderTable({
columns: this.columnManager.rightColumns.value,
fixed: 'right',
})}
</div>
);
},
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 = (
<HeadTable
key="head"
columns={columns}
fixed={fixed}
tableClassName={tableClassName}
handleBodyScrollLeft={this.handleBodyScrollLeft}
expander={this.expander}
@ -546,7 +520,6 @@ export default defineComponent({
<BodyTable
key="body"
columns={columns}
fixed={fixed}
tableClassName={tableClassName}
getRowKey={this.getRowKey}
handleWheel={this.handleWheel}

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "ant-design-vue",
"version": "2.2.3",
"version": "2.2.5",
"title": "Ant Design Vue",
"description": "An enterprise-class UI design language and Vue-based implementation",
"keywords": [

2
v2-doc

@ -1 +1 @@
Subproject commit 6b53258cc2b3709e070d340714e992760e660e67
Subproject commit 2924233b60d3645d3df5e86e8bec912d3a13496d