fix: select class not update #4194
parent
02e134f81d
commit
74b66ecbfb
|
@ -1,12 +1,12 @@
|
||||||
import { computed, defineComponent, inject, ref, VNodeChild, App, PropType, Plugin } from 'vue';
|
import { computed, defineComponent, ref, VNodeChild, App, PropType, Plugin } from 'vue';
|
||||||
import omit from 'omit.js';
|
import omit from 'omit.js';
|
||||||
import classNames from '../_util/classNames';
|
import classNames from '../_util/classNames';
|
||||||
import RcSelect, { Option, OptGroup, SelectProps as RcSelectProps, BaseProps } from '../vc-select';
|
import RcSelect, { Option, OptGroup, SelectProps as RcSelectProps, BaseProps } from '../vc-select';
|
||||||
import { OptionProps as OptionPropsType } from '../vc-select/Option';
|
import { OptionProps as OptionPropsType } from '../vc-select/Option';
|
||||||
import { defaultConfigProvider } from '../config-provider';
|
|
||||||
import getIcons from './utils/iconUtil';
|
import getIcons from './utils/iconUtil';
|
||||||
import PropTypes from '../_util/vue-types';
|
import PropTypes from '../_util/vue-types';
|
||||||
import { tuple } from '../_util/type';
|
import { tuple } from '../_util/type';
|
||||||
|
import useConfigInject from '../_util/hooks/useConfigInject';
|
||||||
|
|
||||||
type RawValue = string | number;
|
type RawValue = string | number;
|
||||||
|
|
||||||
|
@ -74,11 +74,10 @@ const Select = defineComponent({
|
||||||
props: SelectProps(),
|
props: SelectProps(),
|
||||||
SECRET_COMBOBOX_MODE_DO_NOT_USE: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
|
SECRET_COMBOBOX_MODE_DO_NOT_USE: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
|
||||||
emits: ['change', 'update:value'],
|
emits: ['change', 'update:value'],
|
||||||
setup(props: any, { attrs, emit }) {
|
slots: ['notFoundContent', 'suffixIcon', 'itemIcon', 'removeIcon', 'clearIcon', 'dropdownRender'],
|
||||||
|
setup(props, { attrs, emit, slots, expose }) {
|
||||||
const selectRef = ref(null);
|
const selectRef = ref(null);
|
||||||
|
|
||||||
const configProvider = inject('configProvider', defaultConfigProvider);
|
|
||||||
|
|
||||||
const focus = () => {
|
const focus = () => {
|
||||||
if (selectRef.value) {
|
if (selectRef.value) {
|
||||||
selectRef.value.focus();
|
selectRef.value.focus();
|
||||||
|
@ -104,122 +103,100 @@ const Select = defineComponent({
|
||||||
|
|
||||||
return mode;
|
return mode;
|
||||||
});
|
});
|
||||||
const prefixCls = computed(() => {
|
const { prefixCls, direction, configProvider } = useConfigInject('select', props);
|
||||||
return configProvider.getPrefixCls('select', props.prefixCls);
|
|
||||||
});
|
|
||||||
const mergedClassName = computed(() =>
|
const mergedClassName = computed(() =>
|
||||||
classNames(
|
classNames({
|
||||||
{
|
[`${prefixCls.value}-lg`]: props.size === 'large',
|
||||||
[`${prefixCls.value}-lg`]: props.size === 'large',
|
[`${prefixCls.value}-sm`]: props.size === 'small',
|
||||||
[`${prefixCls.value}-sm`]: props.size === 'small',
|
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
|
||||||
[`${prefixCls.value}-rtl`]: props.direction === 'rtl',
|
[`${prefixCls.value}-borderless`]: !props.bordered,
|
||||||
[`${prefixCls.value}-borderless`]: !props.bordered,
|
}),
|
||||||
},
|
|
||||||
attrs.class,
|
|
||||||
),
|
|
||||||
);
|
);
|
||||||
const triggerChange = (...args: any[]) => {
|
const triggerChange = (...args: any[]) => {
|
||||||
emit('update:value', args[0]);
|
emit('update:value', args[0]);
|
||||||
emit('change', ...args);
|
emit('change', ...args);
|
||||||
};
|
};
|
||||||
return {
|
expose({
|
||||||
selectRef,
|
|
||||||
mergedClassName,
|
|
||||||
mode,
|
|
||||||
focus,
|
|
||||||
blur,
|
blur,
|
||||||
configProvider,
|
focus,
|
||||||
triggerChange,
|
|
||||||
prefixCls,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
configProvider,
|
|
||||||
mode,
|
|
||||||
mergedClassName,
|
|
||||||
triggerChange,
|
|
||||||
prefixCls,
|
|
||||||
$slots: slots,
|
|
||||||
$props,
|
|
||||||
} = this as any;
|
|
||||||
const props: SelectTypes = $props;
|
|
||||||
const {
|
|
||||||
notFoundContent,
|
|
||||||
listHeight = 256,
|
|
||||||
listItemHeight = 24,
|
|
||||||
getPopupContainer,
|
|
||||||
dropdownClassName,
|
|
||||||
direction,
|
|
||||||
virtual,
|
|
||||||
dropdownMatchSelectWidth,
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
const { renderEmpty, getPopupContainer: getContextPopupContainer } = configProvider;
|
|
||||||
|
|
||||||
const isMultiple = mode === 'multiple' || mode === 'tags';
|
|
||||||
|
|
||||||
// ===================== Empty =====================
|
|
||||||
let mergedNotFound: VNodeChild;
|
|
||||||
if (notFoundContent !== undefined) {
|
|
||||||
mergedNotFound = notFoundContent;
|
|
||||||
} else if (slots.notFoundContent) {
|
|
||||||
mergedNotFound = slots.notFoundContent();
|
|
||||||
} else if (mode === 'combobox') {
|
|
||||||
mergedNotFound = null;
|
|
||||||
} else {
|
|
||||||
mergedNotFound = renderEmpty('Select') as any;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ===================== Icons =====================
|
|
||||||
const { suffixIcon, itemIcon, removeIcon, clearIcon } = getIcons(
|
|
||||||
{
|
|
||||||
...this.$props,
|
|
||||||
multiple: isMultiple,
|
|
||||||
prefixCls,
|
|
||||||
},
|
|
||||||
slots,
|
|
||||||
);
|
|
||||||
|
|
||||||
const selectProps = omit(props, [
|
|
||||||
'prefixCls',
|
|
||||||
'suffixIcon',
|
|
||||||
'itemIcon',
|
|
||||||
'removeIcon',
|
|
||||||
'clearIcon',
|
|
||||||
'size',
|
|
||||||
'bordered',
|
|
||||||
]) as any;
|
|
||||||
|
|
||||||
const rcSelectRtlDropDownClassName = classNames(dropdownClassName, {
|
|
||||||
[`${prefixCls}-dropdown-${direction}`]: direction === 'rtl',
|
|
||||||
});
|
});
|
||||||
return (
|
return () => {
|
||||||
<RcSelect
|
const {
|
||||||
ref="selectRef"
|
notFoundContent,
|
||||||
virtual={virtual}
|
listHeight = 256,
|
||||||
dropdownMatchSelectWidth={dropdownMatchSelectWidth}
|
listItemHeight = 24,
|
||||||
{...selectProps}
|
getPopupContainer,
|
||||||
{...this.$attrs}
|
dropdownClassName,
|
||||||
listHeight={listHeight}
|
virtual,
|
||||||
listItemHeight={listItemHeight}
|
dropdownMatchSelectWidth,
|
||||||
mode={mode}
|
} = props;
|
||||||
prefixCls={prefixCls}
|
|
||||||
direction={direction}
|
const { renderEmpty, getPopupContainer: getContextPopupContainer } = configProvider;
|
||||||
inputIcon={suffixIcon}
|
|
||||||
menuItemSelectedIcon={itemIcon}
|
const isMultiple = mode.value === 'multiple' || mode.value === 'tags';
|
||||||
removeIcon={removeIcon}
|
|
||||||
clearIcon={clearIcon}
|
// ===================== Empty =====================
|
||||||
notFoundContent={mergedNotFound}
|
let mergedNotFound: VNodeChild;
|
||||||
class={mergedClassName}
|
if (notFoundContent !== undefined) {
|
||||||
getPopupContainer={getPopupContainer || getContextPopupContainer}
|
mergedNotFound = notFoundContent;
|
||||||
dropdownClassName={rcSelectRtlDropDownClassName}
|
} else if (slots.notFoundContent) {
|
||||||
onChange={triggerChange}
|
mergedNotFound = slots.notFoundContent();
|
||||||
dropdownRender={selectProps.dropdownRender || this.$slots.dropdownRender}
|
} else if (mode.value === 'combobox') {
|
||||||
>
|
mergedNotFound = null;
|
||||||
{slots.default?.()}
|
} else {
|
||||||
</RcSelect>
|
mergedNotFound = renderEmpty('Select') as any;
|
||||||
);
|
}
|
||||||
|
|
||||||
|
// ===================== Icons =====================
|
||||||
|
const { suffixIcon, itemIcon, removeIcon, clearIcon } = getIcons(
|
||||||
|
{
|
||||||
|
...props,
|
||||||
|
multiple: isMultiple,
|
||||||
|
prefixCls: prefixCls.value,
|
||||||
|
},
|
||||||
|
slots,
|
||||||
|
);
|
||||||
|
|
||||||
|
const selectProps = omit(props, [
|
||||||
|
'prefixCls',
|
||||||
|
'suffixIcon',
|
||||||
|
'itemIcon',
|
||||||
|
'removeIcon',
|
||||||
|
'clearIcon',
|
||||||
|
'size',
|
||||||
|
'bordered',
|
||||||
|
]);
|
||||||
|
|
||||||
|
const rcSelectRtlDropDownClassName = classNames(dropdownClassName, {
|
||||||
|
[`${prefixCls.value}-dropdown-${direction.value}`]: direction.value === 'rtl',
|
||||||
|
});
|
||||||
|
return (
|
||||||
|
<RcSelect
|
||||||
|
ref={selectRef}
|
||||||
|
virtual={virtual}
|
||||||
|
dropdownMatchSelectWidth={dropdownMatchSelectWidth}
|
||||||
|
{...selectProps}
|
||||||
|
{...attrs}
|
||||||
|
listHeight={listHeight}
|
||||||
|
listItemHeight={listItemHeight}
|
||||||
|
mode={mode.value}
|
||||||
|
prefixCls={prefixCls.value}
|
||||||
|
direction={direction.value}
|
||||||
|
inputIcon={suffixIcon}
|
||||||
|
menuItemSelectedIcon={itemIcon}
|
||||||
|
removeIcon={removeIcon}
|
||||||
|
clearIcon={clearIcon}
|
||||||
|
notFoundContent={mergedNotFound}
|
||||||
|
class={[mergedClassName.value, attrs.class]}
|
||||||
|
getPopupContainer={getPopupContainer || getContextPopupContainer}
|
||||||
|
dropdownClassName={rcSelectRtlDropDownClassName}
|
||||||
|
onChange={triggerChange}
|
||||||
|
dropdownRender={selectProps.dropdownRender || slots.dropdownRender}
|
||||||
|
>
|
||||||
|
{slots.default?.()}
|
||||||
|
</RcSelect>
|
||||||
|
);
|
||||||
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
/* istanbul ignore next */
|
/* istanbul ignore next */
|
||||||
|
|
Loading…
Reference in New Issue