mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-06 05:59:46 +08:00
766 lines
24 KiB
Vue
766 lines
24 KiB
Vue
import OptionList from './OptionList';
|
|
import { formatStrategyValues, SHOW_CHILD } from './utils/strategyUtil';
|
|
import type { CheckedStrategy } from './utils/strategyUtil';
|
|
import { useProvideSelectContext } from './TreeSelectContext';
|
|
import type { TreeSelectContextProps } from './TreeSelectContext';
|
|
import type { LegacyContextProps } from './LegacyContext';
|
|
import { useProvideLegacySelectContext } from './LegacyContext';
|
|
import useTreeData from './hooks/useTreeData';
|
|
import { toArray, fillFieldNames, isNil } from './utils/valueUtil';
|
|
import useCache from './hooks/useCache';
|
|
import useDataEntities from './hooks/useDataEntities';
|
|
import { fillAdditionalInfo, fillLegacyProps } from './utils/legacyUtil';
|
|
import useCheckedKeys from './hooks/useCheckedKeys';
|
|
import useFilterTreeData from './hooks/useFilterTreeData';
|
|
import warningProps from './utils/warningPropsUtil';
|
|
import type { Key } from './interface';
|
|
import type { DisplayValueType } from '../vc-select/BaseSelect';
|
|
import { baseSelectPropsWithoutPrivate } from '../vc-select/BaseSelect';
|
|
import { computed, defineComponent, ref, shallowRef, toRaw, toRef, toRefs, watchEffect } from 'vue';
|
|
import type { ExtractPropTypes, PropType } from 'vue';
|
|
import omit from '../_util/omit';
|
|
import PropTypes from '../_util/vue-types';
|
|
import type { SelectProps, BaseSelectProps, BaseSelectRef } from '../vc-select';
|
|
import { BaseSelect } from '../vc-select';
|
|
import { initDefaultProps } from '../_util/props-util';
|
|
import useId from '../vc-select/hooks/useId';
|
|
import useMergedState from '../_util/hooks/useMergedState';
|
|
import type { VueNode } from '../_util/type';
|
|
import { conductCheck } from '../vc-tree/utils/conductUtil';
|
|
import { warning } from '../vc-util/warning';
|
|
import { toReactive } from '../_util/toReactive';
|
|
import useMaxLevel from '../vc-tree/useMaxLevel';
|
|
import type { ExpandAction } from '../vc-tree/props';
|
|
|
|
export type OnInternalSelect = (value: RawValueType, info: { selected: boolean }) => void;
|
|
|
|
export type RawValueType = string | number;
|
|
|
|
export interface LabeledValueType {
|
|
key?: Key;
|
|
value?: RawValueType;
|
|
label?: any;
|
|
/** Only works on `treeCheckStrictly` */
|
|
halfChecked?: boolean;
|
|
}
|
|
|
|
export type SelectSource = 'option' | 'selection' | 'input' | 'clear';
|
|
|
|
export type DraftValueType = RawValueType | LabeledValueType | (RawValueType | LabeledValueType)[];
|
|
|
|
/** @deprecated This is only used for legacy compatible. Not works on new code. */
|
|
export interface LegacyCheckedNode {
|
|
pos: string;
|
|
node: any;
|
|
children?: LegacyCheckedNode[];
|
|
}
|
|
|
|
export interface ChangeEventExtra {
|
|
/** @deprecated Please save prev value by control logic instead */
|
|
preValue: LabeledValueType[];
|
|
triggerValue: RawValueType;
|
|
/** @deprecated Use `onSelect` or `onDeselect` instead. */
|
|
selected?: boolean;
|
|
/** @deprecated Use `onSelect` or `onDeselect` instead. */
|
|
checked?: boolean;
|
|
|
|
// Not sure if exist user still use this. We have to keep but not recommend user to use
|
|
/** @deprecated This prop not work as react node anymore. */
|
|
triggerNode: any;
|
|
/** @deprecated This prop not work as react node anymore. */
|
|
allCheckedNodes: LegacyCheckedNode[];
|
|
}
|
|
|
|
export interface FieldNames {
|
|
value?: string;
|
|
label?: string;
|
|
children?: string;
|
|
}
|
|
|
|
export interface InternalFieldName extends Omit<FieldNames, 'label'> {
|
|
_title: string[];
|
|
}
|
|
|
|
export interface SimpleModeConfig {
|
|
id?: Key;
|
|
pId?: Key;
|
|
rootPId?: Key;
|
|
}
|
|
|
|
export interface BaseOptionType {
|
|
disabled?: boolean;
|
|
checkable?: boolean;
|
|
disableCheckbox?: boolean;
|
|
children?: BaseOptionType[];
|
|
[name: string]: any;
|
|
}
|
|
|
|
export interface DefaultOptionType extends BaseOptionType {
|
|
value?: RawValueType;
|
|
title?: any;
|
|
label?: any;
|
|
key?: Key;
|
|
children?: DefaultOptionType[];
|
|
}
|
|
|
|
export interface LegacyDataNode extends DefaultOptionType {
|
|
props: any;
|
|
}
|
|
|
|
export function treeSelectProps<
|
|
ValueType = any,
|
|
OptionType extends BaseOptionType = DefaultOptionType,
|
|
>() {
|
|
return {
|
|
...omit(baseSelectPropsWithoutPrivate(), ['mode']),
|
|
|
|
prefixCls: String,
|
|
id: String,
|
|
value: { type: [String, Number, Object, Array] as PropType<ValueType> },
|
|
defaultValue: { type: [String, Number, Object, Array] as PropType<ValueType> },
|
|
onChange: {
|
|
type: Function as PropType<
|
|
(value: ValueType, labelList: any[], extra: ChangeEventExtra) => void
|
|
>,
|
|
},
|
|
searchValue: String,
|
|
/** @deprecated Use `searchValue` instead */
|
|
inputValue: String,
|
|
onSearch: { type: Function as PropType<(value: string) => void> },
|
|
autoClearSearchValue: { type: Boolean, default: undefined },
|
|
|
|
filterTreeNode: {
|
|
type: [Boolean, Function] as PropType<
|
|
boolean | ((inputValue: string, treeNode: DefaultOptionType) => boolean)
|
|
>,
|
|
default: undefined,
|
|
},
|
|
treeNodeFilterProp: String,
|
|
|
|
// >>> Select
|
|
onSelect: Function as PropType<SelectProps['onSelect']>,
|
|
onDeselect: Function as PropType<SelectProps['onDeselect']>,
|
|
|
|
showCheckedStrategy: { type: String as PropType<CheckedStrategy> },
|
|
treeNodeLabelProp: String,
|
|
|
|
fieldNames: { type: Object as PropType<FieldNames> },
|
|
|
|
// >>> Mode
|
|
multiple: { type: Boolean, default: undefined },
|
|
treeCheckable: { type: Boolean, default: undefined },
|
|
treeCheckStrictly: { type: Boolean, default: undefined },
|
|
labelInValue: { type: Boolean, default: undefined },
|
|
|
|
// >>> Data
|
|
treeData: { type: Array as PropType<OptionType[]> },
|
|
treeDataSimpleMode: {
|
|
type: [Boolean, Object] as PropType<boolean | SimpleModeConfig>,
|
|
default: undefined,
|
|
},
|
|
loadData: { type: Function as PropType<(dataNode: LegacyDataNode) => Promise<unknown>> },
|
|
treeLoadedKeys: { type: Array as PropType<Key[]> },
|
|
onTreeLoad: { type: Function as PropType<(loadedKeys: Key[]) => void> },
|
|
|
|
// >>> Expanded
|
|
treeDefaultExpandAll: { type: Boolean, default: undefined },
|
|
treeExpandedKeys: { type: Array as PropType<Key[]> },
|
|
treeDefaultExpandedKeys: { type: Array as PropType<Key[]> },
|
|
onTreeExpand: { type: Function as PropType<(expandedKeys: Key[]) => void> },
|
|
|
|
// >>> Options
|
|
virtual: { type: Boolean, default: undefined },
|
|
listHeight: Number,
|
|
listItemHeight: Number,
|
|
onDropdownVisibleChange: { type: Function as PropType<(open: boolean) => void> },
|
|
|
|
// >>> Tree
|
|
treeLine: { type: [Boolean, Object], default: undefined },
|
|
treeIcon: PropTypes.any,
|
|
showTreeIcon: { type: Boolean, default: undefined },
|
|
switcherIcon: PropTypes.any,
|
|
treeMotion: PropTypes.any,
|
|
children: Array as PropType<VueNode[]>,
|
|
treeExpandAction: String as PropType<ExpandAction>,
|
|
|
|
showArrow: { type: Boolean, default: undefined },
|
|
showSearch: { type: Boolean, default: undefined },
|
|
open: { type: Boolean, default: undefined },
|
|
defaultOpen: { type: Boolean, default: undefined },
|
|
|
|
disabled: { type: Boolean, default: undefined },
|
|
|
|
placeholder: PropTypes.any,
|
|
|
|
maxTagPlaceholder: { type: Function as PropType<(omittedValues: DisplayValueType[]) => any> },
|
|
|
|
dropdownPopupAlign: PropTypes.any,
|
|
customSlots: Object,
|
|
};
|
|
}
|
|
|
|
export type TreeSelectProps = Partial<ExtractPropTypes<ReturnType<typeof treeSelectProps>>>;
|
|
|
|
function isRawValue(value: RawValueType | LabeledValueType): value is RawValueType {
|
|
return !value || typeof value !== 'object';
|
|
}
|
|
|
|
export default defineComponent({
|
|
compatConfig: { MODE: 3 },
|
|
name: 'TreeSelect',
|
|
inheritAttrs: false,
|
|
props: initDefaultProps(treeSelectProps(), {
|
|
treeNodeFilterProp: 'value',
|
|
autoClearSearchValue: true,
|
|
showCheckedStrategy: SHOW_CHILD,
|
|
listHeight: 200,
|
|
listItemHeight: 20,
|
|
prefixCls: 'vc-tree-select',
|
|
}),
|
|
setup(props, { attrs, expose, slots }) {
|
|
const mergedId = useId(toRef(props, 'id'));
|
|
const treeConduction = computed(() => props.treeCheckable && !props.treeCheckStrictly);
|
|
const mergedCheckable = computed(() => props.treeCheckable || props.treeCheckStrictly);
|
|
const mergedLabelInValue = computed(() => props.treeCheckStrictly || props.labelInValue);
|
|
const mergedMultiple = computed(() => mergedCheckable.value || props.multiple);
|
|
|
|
// ========================== Warning ===========================
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
watchEffect(() => {
|
|
warningProps(props);
|
|
});
|
|
}
|
|
|
|
// ========================= FieldNames =========================
|
|
const mergedFieldNames = computed<InternalFieldName>(() => fillFieldNames(props.fieldNames));
|
|
|
|
// =========================== Search ===========================
|
|
const [mergedSearchValue, setSearchValue] = useMergedState('', {
|
|
value: computed(() =>
|
|
props.searchValue !== undefined ? props.searchValue : props.inputValue,
|
|
),
|
|
postState: search => search || '',
|
|
});
|
|
|
|
const onInternalSearch: BaseSelectProps['onSearch'] = searchText => {
|
|
setSearchValue(searchText);
|
|
props.onSearch?.(searchText);
|
|
};
|
|
|
|
// ============================ Data ============================
|
|
// `useTreeData` only do convert of `children` or `simpleMode`.
|
|
// Else will return origin `treeData` for perf consideration.
|
|
// Do not do anything to loop the data.
|
|
const mergedTreeData = useTreeData(
|
|
toRef(props, 'treeData'),
|
|
toRef(props, 'children'),
|
|
toRef(props, 'treeDataSimpleMode'),
|
|
);
|
|
|
|
const { keyEntities, valueEntities } = useDataEntities(mergedTreeData, mergedFieldNames);
|
|
|
|
/** Get `missingRawValues` which not exist in the tree yet */
|
|
const splitRawValues = (newRawValues: RawValueType[]) => {
|
|
const missingRawValues = [];
|
|
const existRawValues = [];
|
|
|
|
// Keep missing value in the cache
|
|
newRawValues.forEach(val => {
|
|
if (valueEntities.value.has(val)) {
|
|
existRawValues.push(val);
|
|
} else {
|
|
missingRawValues.push(val);
|
|
}
|
|
});
|
|
|
|
return { missingRawValues, existRawValues };
|
|
};
|
|
|
|
// Filtered Tree
|
|
const filteredTreeData = useFilterTreeData(mergedTreeData, mergedSearchValue, {
|
|
fieldNames: mergedFieldNames,
|
|
treeNodeFilterProp: toRef(props, 'treeNodeFilterProp'),
|
|
filterTreeNode: toRef(props, 'filterTreeNode'),
|
|
});
|
|
|
|
// =========================== Label ============================
|
|
const getLabel = (item: DefaultOptionType) => {
|
|
if (item) {
|
|
if (props.treeNodeLabelProp) {
|
|
return item[props.treeNodeLabelProp];
|
|
}
|
|
|
|
// Loop from fieldNames
|
|
const { _title: titleList } = mergedFieldNames.value;
|
|
|
|
for (let i = 0; i < titleList.length; i += 1) {
|
|
const title = item[titleList[i]];
|
|
if (title !== undefined) {
|
|
return title;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// ========================= Wrap Value =========================
|
|
const toLabeledValues = (draftValues: DraftValueType) => {
|
|
const values = toArray(draftValues);
|
|
|
|
return values.map(val => {
|
|
if (isRawValue(val)) {
|
|
return { value: val };
|
|
}
|
|
return val;
|
|
});
|
|
};
|
|
|
|
const convert2LabelValues = (draftValues: DraftValueType) => {
|
|
const values = toLabeledValues(draftValues);
|
|
|
|
return values.map(item => {
|
|
let { label: rawLabel } = item;
|
|
const { value: rawValue, halfChecked: rawHalfChecked } = item;
|
|
|
|
let rawDisabled: boolean | undefined;
|
|
|
|
const entity = valueEntities.value.get(rawValue);
|
|
|
|
// Fill missing label & status
|
|
if (entity) {
|
|
rawLabel = rawLabel ?? getLabel(entity.node);
|
|
rawDisabled = entity.node.disabled;
|
|
}
|
|
|
|
return {
|
|
label: rawLabel,
|
|
value: rawValue,
|
|
halfChecked: rawHalfChecked,
|
|
disabled: rawDisabled,
|
|
};
|
|
});
|
|
};
|
|
|
|
// =========================== Values ===========================
|
|
const [internalValue, setInternalValue] = useMergedState(props.defaultValue, {
|
|
value: toRef(props, 'value'),
|
|
});
|
|
|
|
const rawMixedLabeledValues = computed(() => toLabeledValues(internalValue.value));
|
|
|
|
// Split value into full check and half check
|
|
const rawLabeledValues = shallowRef([]);
|
|
const rawHalfLabeledValues = shallowRef([]);
|
|
watchEffect(() => {
|
|
const fullCheckValues: LabeledValueType[] = [];
|
|
const halfCheckValues: LabeledValueType[] = [];
|
|
|
|
rawMixedLabeledValues.value.forEach(item => {
|
|
if (item.halfChecked) {
|
|
halfCheckValues.push(item);
|
|
} else {
|
|
fullCheckValues.push(item);
|
|
}
|
|
});
|
|
|
|
rawLabeledValues.value = fullCheckValues;
|
|
rawHalfLabeledValues.value = halfCheckValues;
|
|
});
|
|
|
|
// const [mergedValues] = useCache(rawLabeledValues);
|
|
const rawValues = computed(() => rawLabeledValues.value.map(item => item.value));
|
|
const { maxLevel, levelEntities } = useMaxLevel(keyEntities);
|
|
// Convert value to key. Will fill missed keys for conduct check.
|
|
const [rawCheckedValues, rawHalfCheckedValues] = useCheckedKeys(
|
|
rawLabeledValues,
|
|
rawHalfLabeledValues,
|
|
treeConduction,
|
|
keyEntities,
|
|
maxLevel,
|
|
levelEntities,
|
|
);
|
|
|
|
// Convert rawCheckedKeys to check strategy related values
|
|
const displayValues = computed(() => {
|
|
// Collect keys which need to show
|
|
const displayKeys = formatStrategyValues(
|
|
rawCheckedValues.value,
|
|
props.showCheckedStrategy,
|
|
keyEntities.value,
|
|
mergedFieldNames.value,
|
|
);
|
|
|
|
// Convert to value and filled with label
|
|
const values = displayKeys.map(
|
|
key => keyEntities.value[key]?.node?.[mergedFieldNames.value.value] ?? key,
|
|
);
|
|
// Back fill with origin label
|
|
const labeledValues = values.map(val => {
|
|
const targetItem = rawLabeledValues.value.find(item => item.value === val);
|
|
return {
|
|
value: val,
|
|
label: targetItem?.label,
|
|
};
|
|
});
|
|
const rawDisplayValues = convert2LabelValues(labeledValues);
|
|
|
|
const firstVal = rawDisplayValues[0];
|
|
|
|
if (!mergedMultiple.value && firstVal && isNil(firstVal.value) && isNil(firstVal.label)) {
|
|
return [];
|
|
}
|
|
return rawDisplayValues.map(item => ({
|
|
...item,
|
|
label: item.label ?? item.value,
|
|
}));
|
|
});
|
|
|
|
const [cachedDisplayValues] = useCache(displayValues);
|
|
|
|
// =========================== Change ===========================
|
|
const triggerChange = (
|
|
newRawValues: RawValueType[],
|
|
extra: { triggerValue?: RawValueType; selected?: boolean },
|
|
source: SelectSource,
|
|
) => {
|
|
const labeledValues = convert2LabelValues(newRawValues);
|
|
setInternalValue(labeledValues);
|
|
|
|
// Clean up if needed
|
|
if (props.autoClearSearchValue) {
|
|
setSearchValue('');
|
|
}
|
|
|
|
// Generate rest parameters is costly, so only do it when necessary
|
|
if (props.onChange) {
|
|
let eventValues: RawValueType[] = newRawValues;
|
|
if (treeConduction.value) {
|
|
const formattedKeyList = formatStrategyValues(
|
|
newRawValues,
|
|
props.showCheckedStrategy,
|
|
keyEntities.value,
|
|
mergedFieldNames.value,
|
|
);
|
|
eventValues = formattedKeyList.map(key => {
|
|
const entity = valueEntities.value.get(key);
|
|
return entity ? entity.node[mergedFieldNames.value.value] : key;
|
|
});
|
|
}
|
|
|
|
const { triggerValue, selected } = extra || {
|
|
triggerValue: undefined,
|
|
selected: undefined,
|
|
};
|
|
|
|
let returnRawValues: (LabeledValueType | RawValueType)[] = eventValues;
|
|
|
|
// We need fill half check back
|
|
if (props.treeCheckStrictly) {
|
|
const halfValues = rawHalfLabeledValues.value.filter(
|
|
item => !eventValues.includes(item.value),
|
|
);
|
|
|
|
returnRawValues = [...returnRawValues, ...halfValues];
|
|
}
|
|
|
|
const returnLabeledValues = convert2LabelValues(returnRawValues);
|
|
const additionalInfo = {
|
|
// [Legacy] Always return as array contains label & value
|
|
preValue: rawLabeledValues.value,
|
|
triggerValue,
|
|
} as ChangeEventExtra;
|
|
|
|
// [Legacy] Fill legacy data if user query.
|
|
// This is expansive that we only fill when user query
|
|
// https://github.com/react-component/tree-select/blob/fe33eb7c27830c9ac70cd1fdb1ebbe7bc679c16a/src/Select.jsx
|
|
let showPosition = true;
|
|
if (props.treeCheckStrictly || (source === 'selection' && !selected)) {
|
|
showPosition = false;
|
|
}
|
|
|
|
fillAdditionalInfo(
|
|
additionalInfo,
|
|
triggerValue,
|
|
newRawValues,
|
|
mergedTreeData.value,
|
|
showPosition,
|
|
mergedFieldNames.value,
|
|
);
|
|
|
|
if (mergedCheckable.value) {
|
|
additionalInfo.checked = selected;
|
|
} else {
|
|
additionalInfo.selected = selected;
|
|
}
|
|
|
|
const returnValues = mergedLabelInValue.value
|
|
? returnLabeledValues
|
|
: returnLabeledValues.map(item => item.value);
|
|
|
|
props.onChange(
|
|
mergedMultiple.value ? returnValues : returnValues[0],
|
|
mergedLabelInValue.value ? null : returnLabeledValues.map(item => item.label),
|
|
additionalInfo,
|
|
);
|
|
}
|
|
};
|
|
|
|
// ========================== Options ===========================
|
|
/** Trigger by option list */
|
|
const onOptionSelect = (
|
|
selectedKey: Key,
|
|
{ selected, source }: { selected: boolean; source: SelectSource },
|
|
) => {
|
|
const keyEntitiesValue = toRaw(keyEntities.value);
|
|
const valueEntitiesValue = toRaw(valueEntities.value);
|
|
const entity = keyEntitiesValue[selectedKey];
|
|
const node = entity?.node;
|
|
const selectedValue = node?.[mergedFieldNames.value.value] ?? selectedKey;
|
|
|
|
// Never be falsy but keep it safe
|
|
if (!mergedMultiple.value) {
|
|
// Single mode always set value
|
|
triggerChange([selectedValue], { selected: true, triggerValue: selectedValue }, 'option');
|
|
} else {
|
|
let newRawValues = selected
|
|
? [...rawValues.value, selectedValue]
|
|
: rawCheckedValues.value.filter(v => v !== selectedValue);
|
|
|
|
// Add keys if tree conduction
|
|
if (treeConduction.value) {
|
|
// Should keep missing values
|
|
const { missingRawValues, existRawValues } = splitRawValues(newRawValues);
|
|
const keyList = existRawValues.map(val => valueEntitiesValue.get(val).key);
|
|
|
|
// Conduction by selected or not
|
|
let checkedKeys: Key[];
|
|
if (selected) {
|
|
({ checkedKeys } = conductCheck(
|
|
keyList,
|
|
true,
|
|
keyEntitiesValue,
|
|
maxLevel.value,
|
|
levelEntities.value,
|
|
));
|
|
} else {
|
|
({ checkedKeys } = conductCheck(
|
|
keyList,
|
|
{ checked: false, halfCheckedKeys: rawHalfCheckedValues.value },
|
|
keyEntitiesValue,
|
|
maxLevel.value,
|
|
levelEntities.value,
|
|
));
|
|
}
|
|
|
|
// Fill back of keys
|
|
newRawValues = [
|
|
...missingRawValues,
|
|
...checkedKeys.map(key => keyEntitiesValue[key].node[mergedFieldNames.value.value]),
|
|
];
|
|
}
|
|
triggerChange(newRawValues, { selected, triggerValue: selectedValue }, source || 'option');
|
|
}
|
|
|
|
// Trigger select event
|
|
if (selected || !mergedMultiple.value) {
|
|
props.onSelect?.(selectedValue, fillLegacyProps(node));
|
|
} else {
|
|
props.onDeselect?.(selectedValue, fillLegacyProps(node));
|
|
}
|
|
};
|
|
|
|
// ========================== Dropdown ==========================
|
|
const onInternalDropdownVisibleChange = (open: boolean) => {
|
|
if (props.onDropdownVisibleChange) {
|
|
const legacyParam = {};
|
|
|
|
Object.defineProperty(legacyParam, 'documentClickClose', {
|
|
get() {
|
|
warning(false, 'Second param of `onDropdownVisibleChange` has been removed.');
|
|
return false;
|
|
},
|
|
});
|
|
|
|
(props.onDropdownVisibleChange as any)(open, legacyParam);
|
|
}
|
|
};
|
|
|
|
// ====================== Display Change ========================
|
|
const onDisplayValuesChange: BaseSelectProps['onDisplayValuesChange'] = (newValues, info) => {
|
|
const newRawValues = newValues.map(item => item.value);
|
|
|
|
if (info.type === 'clear') {
|
|
triggerChange(newRawValues, {}, 'selection');
|
|
return;
|
|
}
|
|
|
|
// TreeSelect only have multiple mode which means display change only has remove
|
|
if (info.values.length) {
|
|
onOptionSelect(info.values[0].value, { selected: false, source: 'selection' });
|
|
}
|
|
};
|
|
const {
|
|
treeNodeFilterProp,
|
|
|
|
// Data
|
|
loadData,
|
|
treeLoadedKeys,
|
|
onTreeLoad,
|
|
|
|
// Expanded
|
|
treeDefaultExpandAll,
|
|
treeExpandedKeys,
|
|
treeDefaultExpandedKeys,
|
|
onTreeExpand,
|
|
|
|
// Options
|
|
virtual,
|
|
listHeight,
|
|
listItemHeight,
|
|
|
|
// Tree
|
|
treeLine,
|
|
treeIcon,
|
|
showTreeIcon,
|
|
switcherIcon,
|
|
treeMotion,
|
|
customSlots,
|
|
|
|
dropdownMatchSelectWidth,
|
|
treeExpandAction,
|
|
} = toRefs(props);
|
|
useProvideLegacySelectContext(
|
|
toReactive({
|
|
checkable: mergedCheckable,
|
|
|
|
loadData,
|
|
treeLoadedKeys,
|
|
onTreeLoad,
|
|
checkedKeys: rawCheckedValues,
|
|
halfCheckedKeys: rawHalfCheckedValues,
|
|
treeDefaultExpandAll,
|
|
treeExpandedKeys,
|
|
treeDefaultExpandedKeys,
|
|
onTreeExpand,
|
|
treeIcon,
|
|
treeMotion,
|
|
showTreeIcon,
|
|
switcherIcon,
|
|
treeLine,
|
|
treeNodeFilterProp,
|
|
keyEntities,
|
|
customSlots,
|
|
} as unknown as LegacyContextProps),
|
|
);
|
|
useProvideSelectContext(
|
|
toReactive({
|
|
virtual,
|
|
listHeight,
|
|
listItemHeight,
|
|
treeData: filteredTreeData,
|
|
fieldNames: mergedFieldNames,
|
|
onSelect: onOptionSelect,
|
|
dropdownMatchSelectWidth,
|
|
treeExpandAction,
|
|
} as unknown as TreeSelectContextProps),
|
|
);
|
|
const selectRef = ref<BaseSelectRef>();
|
|
expose({
|
|
focus() {
|
|
selectRef.value?.focus();
|
|
},
|
|
blur() {
|
|
selectRef.value?.blur();
|
|
},
|
|
scrollTo(arg) {
|
|
selectRef.value?.scrollTo(arg);
|
|
},
|
|
} as BaseSelectRef);
|
|
return () => {
|
|
const restProps = omit(props, [
|
|
'id',
|
|
'prefixCls',
|
|
'customSlots',
|
|
|
|
// Value
|
|
'value',
|
|
'defaultValue',
|
|
'onChange',
|
|
'onSelect',
|
|
'onDeselect',
|
|
|
|
// Search
|
|
'searchValue',
|
|
'inputValue',
|
|
'onSearch',
|
|
'autoClearSearchValue',
|
|
'filterTreeNode',
|
|
'treeNodeFilterProp',
|
|
|
|
// Selector
|
|
'showCheckedStrategy',
|
|
'treeNodeLabelProp',
|
|
|
|
// Mode
|
|
'multiple',
|
|
'treeCheckable',
|
|
'treeCheckStrictly',
|
|
'labelInValue',
|
|
|
|
// FieldNames
|
|
'fieldNames',
|
|
|
|
// Data
|
|
'treeDataSimpleMode',
|
|
'treeData',
|
|
'children',
|
|
'loadData',
|
|
'treeLoadedKeys',
|
|
'onTreeLoad',
|
|
|
|
// Expanded
|
|
'treeDefaultExpandAll',
|
|
'treeExpandedKeys',
|
|
'treeDefaultExpandedKeys',
|
|
'onTreeExpand',
|
|
|
|
// Options
|
|
'virtual',
|
|
'listHeight',
|
|
'listItemHeight',
|
|
'onDropdownVisibleChange',
|
|
|
|
// Tree
|
|
'treeLine',
|
|
'treeIcon',
|
|
'showTreeIcon',
|
|
'switcherIcon',
|
|
'treeMotion',
|
|
]);
|
|
return (
|
|
<BaseSelect
|
|
v-slots={slots}
|
|
ref={selectRef}
|
|
{...attrs}
|
|
{...restProps}
|
|
// >>> MISC
|
|
id={mergedId}
|
|
prefixCls={props.prefixCls}
|
|
mode={mergedMultiple.value ? 'multiple' : undefined}
|
|
// >>> Display Value
|
|
displayValues={cachedDisplayValues.value}
|
|
onDisplayValuesChange={onDisplayValuesChange}
|
|
// >>> Search
|
|
searchValue={mergedSearchValue.value}
|
|
onSearch={onInternalSearch}
|
|
// >>> Options
|
|
OptionList={OptionList}
|
|
emptyOptions={!mergedTreeData.value.length}
|
|
onDropdownVisibleChange={onInternalDropdownVisibleChange}
|
|
tagRender={props.tagRender || slots.tagRender}
|
|
dropdownMatchSelectWidth={props.dropdownMatchSelectWidth ?? true}
|
|
/>
|
|
);
|
|
};
|
|
},
|
|
});
|