feat: support vue@3.2
parent
4135161173
commit
6f3fca48a1
|
@ -1,5 +1,5 @@
|
||||||
import type { BaseTransitionProps, CSSProperties, Ref } from 'vue';
|
import { BaseTransitionProps, CSSProperties, onBeforeUpdate, Ref } from 'vue';
|
||||||
import { getCurrentInstance, onUpdated } from 'vue';
|
import { getCurrentInstance } from 'vue';
|
||||||
import { defineComponent, nextTick, Transition as T, TransitionGroup as TG } from 'vue';
|
import { defineComponent, nextTick, Transition as T, TransitionGroup as TG } from 'vue';
|
||||||
|
|
||||||
export const getTransitionProps = (transitionName: string, opt: object = {}) => {
|
export const getTransitionProps = (transitionName: string, opt: object = {}) => {
|
||||||
|
@ -51,7 +51,7 @@ if (process.env.NODE_ENV === 'test') {
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
setup(_props, { slots, attrs }) {
|
setup(_props, { slots, attrs }) {
|
||||||
const instance = getCurrentInstance();
|
const instance = getCurrentInstance();
|
||||||
onUpdated(() => {
|
onBeforeUpdate(() => {
|
||||||
const child = instance.subTree.children[0];
|
const child = instance.subTree.children[0];
|
||||||
if (child && child.dirs && child.dirs[0]) {
|
if (child && child.dirs && child.dirs[0]) {
|
||||||
const value = child.dirs[0].value;
|
const value = child.dirs[0].value;
|
||||||
|
|
|
@ -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;
|
|
|
@ -2,7 +2,6 @@ import type { App, Plugin, VNode, ExtractPropTypes } from 'vue';
|
||||||
import { defineComponent, inject, provide } from 'vue';
|
import { defineComponent, inject, provide } from 'vue';
|
||||||
import Select, { SelectProps } from '../select';
|
import Select, { SelectProps } from '../select';
|
||||||
import Input from '../input';
|
import Input from '../input';
|
||||||
import InputElement from './InputElement';
|
|
||||||
import PropTypes from '../_util/vue-types';
|
import PropTypes from '../_util/vue-types';
|
||||||
import { defaultConfigProvider } from '../config-provider';
|
import { defaultConfigProvider } from '../config-provider';
|
||||||
import { getComponent, getOptionProps, isValidElement, getSlot } from '../_util/props-util';
|
import { getComponent, getOptionProps, isValidElement, getSlot } from '../_util/props-util';
|
||||||
|
@ -72,7 +71,7 @@ const AutoComplete = defineComponent({
|
||||||
getInputElement() {
|
getInputElement() {
|
||||||
const children = getSlot(this);
|
const children = getSlot(this);
|
||||||
const element = children.length ? children[0] : <Input lazy={false} />;
|
const element = children.length ? children[0] : <Input lazy={false} />;
|
||||||
return <InputElement {...element.props}>{element}</InputElement>;
|
return element;
|
||||||
},
|
},
|
||||||
|
|
||||||
focus() {
|
focus() {
|
||||||
|
|
|
@ -113,4 +113,33 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
|
||||||
</div>
|
</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 popup correctly with defaultValue 2`] = `
|
||||||
|
<div>
|
||||||
|
<!---->
|
||||||
|
<div class="ant-cascader-menus ant-cascader-menus-placement-bottomLeft">
|
||||||
|
<div>
|
||||||
|
<ul class="ant-cascader-menu">
|
||||||
|
<li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="Zhejiang" role="menuitem">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
|
||||||
|
<!---->
|
||||||
|
</li>
|
||||||
|
<li class="ant-cascader-menu-item ant-cascader-menu-item-expand" title="Jiangsu" role="menuitem">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
|
||||||
|
<!---->
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="ant-cascader-menu">
|
||||||
|
<li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="Hangzhou" role="menuitem">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
|
||||||
|
<!---->
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="ant-cascader-menu">
|
||||||
|
<li class="ant-cascader-menu-item" title="West Lake" role="menuitem">West Lake
|
||||||
|
<!---->
|
||||||
|
<!---->
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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>`;
|
||||||
|
|
|
@ -123,7 +123,7 @@ const Drawer = defineComponent({
|
||||||
}
|
}
|
||||||
if (!this.visible) {
|
if (!this.visible) {
|
||||||
this.destroyClose = true;
|
this.destroyClose = true;
|
||||||
this.$forceUpdate();
|
(this as any).$forceUpdate();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -128,7 +128,7 @@ export default defineComponent({
|
||||||
if (!hasProp(this, 'value')) {
|
if (!hasProp(this, 'value')) {
|
||||||
this.stateValue = value;
|
this.stateValue = value;
|
||||||
} else {
|
} else {
|
||||||
this.$forceUpdate();
|
(this as any).$forceUpdate();
|
||||||
}
|
}
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
callback && callback();
|
callback && callback();
|
||||||
|
|
|
@ -55,7 +55,7 @@ export default defineComponent({
|
||||||
if (!hasProp(this, 'value')) {
|
if (!hasProp(this, 'value')) {
|
||||||
this.stateValue = value;
|
this.stateValue = value;
|
||||||
} else {
|
} else {
|
||||||
this.$forceUpdate();
|
(this as any).$forceUpdate();
|
||||||
}
|
}
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
callback && callback();
|
callback && callback();
|
||||||
|
|
|
@ -10,6 +10,7 @@ import type { MenuInfo } from './interface';
|
||||||
import KeyCode from '../../_util/KeyCode';
|
import KeyCode from '../../_util/KeyCode';
|
||||||
import useDirectionStyle from './hooks/useDirectionStyle';
|
import useDirectionStyle from './hooks/useDirectionStyle';
|
||||||
import Overflow from '../../vc-overflow';
|
import Overflow from '../../vc-overflow';
|
||||||
|
import devWarning from '../../vc-util/devWarning';
|
||||||
|
|
||||||
let indexGuid = 0;
|
let indexGuid = 0;
|
||||||
const menuItemProps = {
|
const menuItemProps = {
|
||||||
|
@ -30,7 +31,15 @@ export default defineComponent({
|
||||||
slots: ['icon', 'title'],
|
slots: ['icon', 'title'],
|
||||||
setup(props, { slots, emit, attrs }) {
|
setup(props, { slots, emit, attrs }) {
|
||||||
const instance = getCurrentInstance();
|
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 eventKey = `menu_item_${++indexGuid}_$$_${key}`;
|
||||||
const { parentEventKeys, parentKeys } = useInjectKeyPath();
|
const { parentEventKeys, parentKeys } = useInjectKeyPath();
|
||||||
const {
|
const {
|
||||||
|
|
|
@ -12,6 +12,8 @@ import InlineSubMenuList from './InlineSubMenuList';
|
||||||
import Transition, { getTransitionProps } from '../../_util/transition';
|
import Transition, { getTransitionProps } from '../../_util/transition';
|
||||||
import { cloneElement } from '../../_util/vnode';
|
import { cloneElement } from '../../_util/vnode';
|
||||||
import Overflow from '../../vc-overflow';
|
import Overflow from '../../vc-overflow';
|
||||||
|
import devWarning from '../../vc-util/devWarning';
|
||||||
|
import isValid from '../../_util/isValid';
|
||||||
|
|
||||||
let indexGuid = 0;
|
let indexGuid = 0;
|
||||||
|
|
||||||
|
@ -39,14 +41,17 @@ export default defineComponent({
|
||||||
useProvideFirstLevel(false);
|
useProvideFirstLevel(false);
|
||||||
|
|
||||||
const instance = getCurrentInstance();
|
const instance = getCurrentInstance();
|
||||||
const key =
|
const vnodeKey =
|
||||||
instance.vnode.key !== null ? instance.vnode.key : `sub_menu_${++indexGuid}_$$_not_set_key`;
|
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 =
|
const eventKey =
|
||||||
props.eventKey ??
|
props.eventKey ??
|
||||||
(instance.vnode.key !== null
|
(isValid(vnodeKey) ? `sub_menu_${++indexGuid}_$$_${vnodeKey}` : (key as string));
|
||||||
? `sub_menu_${++indexGuid}_$$_${instance.vnode.key}`
|
|
||||||
: (key as string));
|
|
||||||
const { parentEventKeys, parentInfo, parentKeys } = useInjectKeyPath();
|
const { parentEventKeys, parentInfo, parentKeys } = useInjectKeyPath();
|
||||||
const keysPath = computed(() => [...parentKeys.value, key]);
|
const keysPath = computed(() => [...parentKeys.value, key]);
|
||||||
const eventKeysPath = computed(() => [...parentEventKeys.value, eventKey]);
|
const eventKeysPath = computed(() => [...parentEventKeys.value, eventKey]);
|
||||||
|
|
|
@ -98,7 +98,7 @@ export default defineComponent({
|
||||||
this.setVisible(false);
|
this.setVisible(false);
|
||||||
// Call `setSelectedKeys` & `confirm` in the same time will make filter data not up to date
|
// Call `setSelectedKeys` & `confirm` in the same time will make filter data not up to date
|
||||||
// https://github.com/ant-design/ant-design/issues/12284
|
// https://github.com/ant-design/ant-design/issues/12284
|
||||||
this.$forceUpdate();
|
(this as any).$forceUpdate();
|
||||||
nextTick(this.confirmFilter2);
|
nextTick(this.confirmFilter2);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -64,7 +64,7 @@ export default defineComponent({
|
||||||
previewFile(file.originFileObj).then(previewDataUrl => {
|
previewFile(file.originFileObj).then(previewDataUrl => {
|
||||||
// Need append '' to avoid dead loop
|
// Need append '' to avoid dead loop
|
||||||
file.thumbUrl = previewDataUrl || '';
|
file.thumbUrl = previewDataUrl || '';
|
||||||
this.$forceUpdate();
|
(this as any).$forceUpdate();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -5,7 +5,7 @@ import classNames from '../_util/classNames';
|
||||||
import pickAttrs from '../_util/pickAttrs';
|
import pickAttrs from '../_util/pickAttrs';
|
||||||
import { isValidElement } from '../_util/props-util';
|
import { isValidElement } from '../_util/props-util';
|
||||||
import createRef from '../_util/createRef';
|
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 { computed, defineComponent, nextTick, reactive, watch } from 'vue';
|
||||||
import List from '../vc-virtual-list/List';
|
import List from '../vc-virtual-list/List';
|
||||||
import type {
|
import type {
|
||||||
|
@ -61,7 +61,7 @@ const OptionListProps = {
|
||||||
virtual: PropTypes.looseBool,
|
virtual: PropTypes.looseBool,
|
||||||
|
|
||||||
onSelect: PropTypes.func,
|
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 */
|
/** Tell Select that some value is now active to make accessibility work */
|
||||||
onActiveValue: PropTypes.func,
|
onActiveValue: PropTypes.func,
|
||||||
onScroll: PropTypes.func,
|
onScroll: PropTypes.func,
|
||||||
|
|
|
@ -74,7 +74,7 @@ const Input = defineComponent<InputProps, { VCSelectContainerEvent: any; blurTim
|
||||||
inputRef,
|
inputRef,
|
||||||
attrs,
|
attrs,
|
||||||
} = this.$props as InputProps;
|
} = 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 inputProps = inputNode.props || {};
|
||||||
const {
|
const {
|
||||||
|
|
|
@ -7,9 +7,9 @@ import type {
|
||||||
DisplayLabelValueType,
|
DisplayLabelValueType,
|
||||||
} from '../interface/generator';
|
} from '../interface/generator';
|
||||||
import type { RenderNode } from '../interface';
|
import type { RenderNode } from '../interface';
|
||||||
import type { InnerSelectorProps } from '.';
|
import type { InnerSelectorProps } from './interface';
|
||||||
import Input from './Input';
|
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 { computed, defineComponent, onMounted, ref, watch } from 'vue';
|
||||||
import classNames from '../../_util/classNames';
|
import classNames from '../../_util/classNames';
|
||||||
import pickAttrs from '../../_util/pickAttrs';
|
import pickAttrs from '../../_util/pickAttrs';
|
||||||
|
@ -17,24 +17,24 @@ import PropTypes from '../../_util/vue-types';
|
||||||
import type { VueNode } from '../../_util/type';
|
import type { VueNode } from '../../_util/type';
|
||||||
import Overflow from '../../vc-overflow';
|
import Overflow from '../../vc-overflow';
|
||||||
|
|
||||||
interface SelectorProps extends InnerSelectorProps {
|
type SelectorProps = InnerSelectorProps & {
|
||||||
// Icon
|
// Icon
|
||||||
removeIcon?: RenderNode;
|
removeIcon?: RenderNode;
|
||||||
|
|
||||||
// Tags
|
// Tags
|
||||||
maxTagCount?: number | 'responsive';
|
maxTagCount?: number | 'responsive';
|
||||||
maxTagTextLength?: number;
|
maxTagTextLength?: number;
|
||||||
maxTagPlaceholder?: VNodeChild;
|
maxTagPlaceholder?: VNodeChild | ((omittedValues: LabelValueType[]) => VNodeChild);
|
||||||
tokenSeparators?: string[];
|
tokenSeparators?: string[];
|
||||||
tagRender?: (props: CustomTagProps) => VNodeChild;
|
tagRender?: (props: CustomTagProps) => VNodeChild;
|
||||||
onToggleOpen: (open?: boolean) => void;
|
onToggleOpen: any;
|
||||||
|
|
||||||
// Motion
|
// Motion
|
||||||
choiceTransitionName?: string;
|
choiceTransitionName?: string;
|
||||||
|
|
||||||
// Event
|
// Event
|
||||||
onSelect: (value: RawValueType, option: { selected: boolean }) => void;
|
onSelect: (value: RawValueType, option: { selected: boolean }) => void;
|
||||||
}
|
};
|
||||||
|
|
||||||
const props = {
|
const props = {
|
||||||
id: PropTypes.string,
|
id: PropTypes.string,
|
||||||
|
@ -62,6 +62,7 @@ const props = {
|
||||||
),
|
),
|
||||||
tagRender: PropTypes.func,
|
tagRender: PropTypes.func,
|
||||||
|
|
||||||
|
onToggleOpen: { type: Function as PropType<(open?: boolean) => void> },
|
||||||
onSelect: PropTypes.func,
|
onSelect: PropTypes.func,
|
||||||
onInputChange: PropTypes.func,
|
onInputChange: PropTypes.func,
|
||||||
onInputPaste: PropTypes.func,
|
onInputPaste: PropTypes.func,
|
||||||
|
@ -78,6 +79,8 @@ const onPreventMouseDown = (event: MouseEvent) => {
|
||||||
|
|
||||||
const SelectSelector = defineComponent<SelectorProps>({
|
const SelectSelector = defineComponent<SelectorProps>({
|
||||||
name: 'MultipleSelectSelector',
|
name: 'MultipleSelectSelector',
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: props as any,
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const measureRef = ref();
|
const measureRef = ref();
|
||||||
const inputWidth = ref(0);
|
const inputWidth = ref(0);
|
||||||
|
@ -278,6 +281,5 @@ const SelectSelector = defineComponent<SelectorProps>({
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
SelectSelector.inheritAttrs = false;
|
|
||||||
SelectSelector.props = props;
|
|
||||||
export default SelectSelector;
|
export default SelectSelector;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import pickAttrs from '../../_util/pickAttrs';
|
import pickAttrs from '../../_util/pickAttrs';
|
||||||
import Input from './Input';
|
import Input from './Input';
|
||||||
import type { InnerSelectorProps } from '.';
|
import type { InnerSelectorProps } from './interface';
|
||||||
import type { VNodeChild } from 'vue';
|
import type { VNodeChild } from 'vue';
|
||||||
import { computed, defineComponent, Fragment, ref, watch } from 'vue';
|
import { computed, defineComponent, Fragment, ref, watch } from 'vue';
|
||||||
import PropTypes from '../../_util/vue-types';
|
import PropTypes from '../../_util/vue-types';
|
||||||
|
|
|
@ -14,36 +14,12 @@ import SingleSelector from './SingleSelector';
|
||||||
import type { LabelValueType, RawValueType, CustomTagProps } from '../interface/generator';
|
import type { LabelValueType, RawValueType, CustomTagProps } from '../interface/generator';
|
||||||
import type { RenderNode, Mode } from '../interface';
|
import type { RenderNode, Mode } from '../interface';
|
||||||
import useLock from '../hooks/useLock';
|
import useLock from '../hooks/useLock';
|
||||||
import type { VNodeChild } from 'vue';
|
import type { VNodeChild, PropType } from 'vue';
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import type { RefObject } from '../../_util/createRef';
|
|
||||||
import createRef from '../../_util/createRef';
|
import createRef from '../../_util/createRef';
|
||||||
import PropTypes from '../../_util/vue-types';
|
import PropTypes from '../../_util/vue-types';
|
||||||
import type { VueNode } from '../../_util/type';
|
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 {
|
export interface SelectorProps {
|
||||||
id: string;
|
id: string;
|
||||||
prefixCls: string;
|
prefixCls: string;
|
||||||
|
@ -67,7 +43,7 @@ export interface SelectorProps {
|
||||||
// Tags
|
// Tags
|
||||||
maxTagCount?: number | 'responsive';
|
maxTagCount?: number | 'responsive';
|
||||||
maxTagTextLength?: number;
|
maxTagTextLength?: number;
|
||||||
maxTagPlaceholder?: VNodeChild;
|
maxTagPlaceholder?: VNodeChild | ((omittedValues: LabelValueType[]) => VNodeChild);
|
||||||
tagRender?: (props: CustomTagProps) => VNodeChild;
|
tagRender?: (props: CustomTagProps) => VNodeChild;
|
||||||
|
|
||||||
/** Check if `tokenSeparators` contains `\n` or `\r\n` */
|
/** Check if `tokenSeparators` contains `\n` or `\r\n` */
|
||||||
|
@ -92,6 +68,52 @@ export interface SelectorProps {
|
||||||
|
|
||||||
const Selector = defineComponent<SelectorProps>({
|
const Selector = defineComponent<SelectorProps>({
|
||||||
name: 'Selector',
|
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) {
|
setup(props) {
|
||||||
const inputRef = createRef();
|
const inputRef = createRef();
|
||||||
let compositionStatus = false;
|
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;
|
export default Selector;
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
|
@ -1057,7 +1057,7 @@ export default function generateSelector<
|
||||||
methods: {
|
methods: {
|
||||||
// We need force update here since popup dom is render async
|
// We need force update here since popup dom is render async
|
||||||
onPopupMouseEnter() {
|
onPopupMouseEnter() {
|
||||||
this.$forceUpdate();
|
(this as any).$forceUpdate();
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
|
|
2
v2-doc
2
v2-doc
|
@ -1 +1 @@
|
||||||
Subproject commit 157cce105e1f0a369658dfb29cc802ebc09d0d93
|
Subproject commit 6b53258cc2b3709e070d340714e992760e660e67
|
Loading…
Reference in New Issue