You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
3.1 KiB
100 lines
3.1 KiB
'use strict';
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
var vue = require('vue');
|
|
var util = require('../../../utils/util.js');
|
|
var token = require('./token.js');
|
|
|
|
function useOption(props, states) {
|
|
const select = vue.inject(token.selectKey);
|
|
const selectGroup = vue.inject(token.selectGroupKey, { disabled: false });
|
|
const isObject = vue.computed(() => {
|
|
return Object.prototype.toString.call(props.value).toLowerCase() === "[object object]";
|
|
});
|
|
const itemSelected = vue.computed(() => {
|
|
if (!select.props.multiple) {
|
|
return isEqual(props.value, select.props.modelValue);
|
|
} else {
|
|
return contains(select.props.modelValue, props.value);
|
|
}
|
|
});
|
|
const limitReached = vue.computed(() => {
|
|
if (select.props.multiple) {
|
|
const modelValue = select.props.modelValue || [];
|
|
return !itemSelected.value && modelValue.length >= select.props.multipleLimit && select.props.multipleLimit > 0;
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
const currentLabel = vue.computed(() => {
|
|
return props.label || (isObject.value ? "" : props.value);
|
|
});
|
|
const currentValue = vue.computed(() => {
|
|
return props.value || props.label || "";
|
|
});
|
|
const isDisabled = vue.computed(() => {
|
|
return props.disabled || states.groupDisabled || limitReached.value;
|
|
});
|
|
const instance = vue.getCurrentInstance();
|
|
const contains = (arr = [], target) => {
|
|
if (!isObject.value) {
|
|
return arr && arr.indexOf(target) > -1;
|
|
} else {
|
|
const valueKey = select.props.valueKey;
|
|
return arr && arr.some((item) => {
|
|
return util.getValueByPath(item, valueKey) === util.getValueByPath(target, valueKey);
|
|
});
|
|
}
|
|
};
|
|
const isEqual = (a, b) => {
|
|
if (!isObject.value) {
|
|
return a === b;
|
|
} else {
|
|
const { valueKey } = select.props;
|
|
return util.getValueByPath(a, valueKey) === util.getValueByPath(b, valueKey);
|
|
}
|
|
};
|
|
const hoverItem = () => {
|
|
if (!props.disabled && !selectGroup.disabled) {
|
|
select.hoverIndex = select.optionsArray.indexOf(instance);
|
|
}
|
|
};
|
|
vue.watch(() => currentLabel.value, () => {
|
|
if (!props.created && !select.props.remote)
|
|
select.setSelected();
|
|
});
|
|
vue.watch(() => props.value, (val, oldVal) => {
|
|
const { remote, valueKey } = select.props;
|
|
if (!props.created && !remote) {
|
|
if (valueKey && typeof val === "object" && typeof oldVal === "object" && val[valueKey] === oldVal[valueKey]) {
|
|
return;
|
|
}
|
|
select.setSelected();
|
|
}
|
|
});
|
|
vue.watch(() => selectGroup.disabled, () => {
|
|
states.groupDisabled = selectGroup.disabled;
|
|
}, { immediate: true });
|
|
const { queryChange } = vue.toRaw(select);
|
|
vue.watch(queryChange, (changes) => {
|
|
const { query } = vue.unref(changes);
|
|
const regexp = new RegExp(util.escapeRegexpString(query), "i");
|
|
states.visible = regexp.test(currentLabel.value) || props.created;
|
|
if (!states.visible) {
|
|
select.filteredOptionsCount--;
|
|
}
|
|
});
|
|
return {
|
|
select,
|
|
currentLabel,
|
|
currentValue,
|
|
itemSelected,
|
|
isDisabled,
|
|
hoverItem
|
|
};
|
|
}
|
|
|
|
exports.useOption = useOption;
|
|
//# sourceMappingURL=useOption.js.map
|