91 lines
3.0 KiB
JavaScript
91 lines
3.0 KiB
JavaScript
import { inject, computed, getCurrentInstance, toRaw, watch } from 'vue';
|
|
import { castArray, get, isEqual } from 'lodash-unified';
|
|
import { selectKey, selectGroupKey } from './token.mjs';
|
|
import { COMPONENT_NAME } from './option.mjs';
|
|
import { escapeStringRegexp } from '../../../utils/strings.mjs';
|
|
import { throwError } from '../../../utils/error.mjs';
|
|
import { isObject } from '@vue/shared';
|
|
|
|
function useOption(props, states) {
|
|
const select = inject(selectKey);
|
|
if (!select) {
|
|
throwError(COMPONENT_NAME, "usage: <el-select><el-option /></el-select/>");
|
|
}
|
|
const selectGroup = inject(selectGroupKey, { disabled: false });
|
|
const itemSelected = computed(() => {
|
|
return contains(castArray(select.props.modelValue), props.value);
|
|
});
|
|
const limitReached = computed(() => {
|
|
var _a;
|
|
if (select.props.multiple) {
|
|
const modelValue = castArray((_a = select.props.modelValue) != null ? _a : []);
|
|
return !itemSelected.value && modelValue.length >= select.props.multipleLimit && select.props.multipleLimit > 0;
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
const currentLabel = computed(() => {
|
|
var _a;
|
|
return (_a = props.label) != null ? _a : isObject(props.value) ? "" : props.value;
|
|
});
|
|
const currentValue = computed(() => {
|
|
return props.value || props.label || "";
|
|
});
|
|
const isDisabled = computed(() => {
|
|
return props.disabled || states.groupDisabled || limitReached.value;
|
|
});
|
|
const instance = getCurrentInstance();
|
|
const contains = (arr = [], target) => {
|
|
if (!isObject(props.value)) {
|
|
return arr && arr.includes(target);
|
|
} else {
|
|
const valueKey = select.props.valueKey;
|
|
return arr && arr.some((item) => {
|
|
return toRaw(get(item, valueKey)) === get(target, valueKey);
|
|
});
|
|
}
|
|
};
|
|
const hoverItem = () => {
|
|
if (!props.disabled && !selectGroup.disabled) {
|
|
select.states.hoveringIndex = select.optionsArray.indexOf(instance.proxy);
|
|
}
|
|
};
|
|
const updateOption = (query) => {
|
|
const regexp = new RegExp(escapeStringRegexp(query), "i");
|
|
states.visible = regexp.test(String(currentLabel.value)) || props.created;
|
|
};
|
|
watch(() => currentLabel.value, () => {
|
|
if (!props.created && !select.props.remote)
|
|
select.setSelected();
|
|
});
|
|
watch(() => props.value, (val, oldVal) => {
|
|
const { remote, valueKey } = select.props;
|
|
const shouldUpdate = remote ? val !== oldVal : !isEqual(val, oldVal);
|
|
if (shouldUpdate) {
|
|
select.onOptionDestroy(oldVal, instance.proxy);
|
|
select.onOptionCreate(instance.proxy);
|
|
}
|
|
if (!props.created && !remote) {
|
|
if (valueKey && isObject(val) && isObject(oldVal) && val[valueKey] === oldVal[valueKey]) {
|
|
return;
|
|
}
|
|
select.setSelected();
|
|
}
|
|
});
|
|
watch(() => selectGroup.disabled, () => {
|
|
states.groupDisabled = selectGroup.disabled;
|
|
}, { immediate: true });
|
|
return {
|
|
select,
|
|
currentLabel,
|
|
currentValue,
|
|
itemSelected,
|
|
isDisabled,
|
|
hoverItem,
|
|
updateOption
|
|
};
|
|
}
|
|
|
|
export { useOption };
|
|
//# sourceMappingURL=useOption.mjs.map
|