123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- import { inject, computed, getCurrentInstance, toRaw, watch, unref } from 'vue';
- import { get } from 'lodash-unified';
- import '../../../utils/index.mjs';
- import { selectKey, selectGroupKey } from './token.mjs';
- import { escapeStringRegexp } from '../../../utils/strings.mjs';
- function useOption(props, states) {
- const select = inject(selectKey);
- const selectGroup = inject(selectGroupKey, { disabled: false });
- const isObject = computed(() => {
- return Object.prototype.toString.call(props.value).toLowerCase() === "[object object]";
- });
- const itemSelected = computed(() => {
- if (!select.props.multiple) {
- return isEqual(props.value, select.props.modelValue);
- } else {
- return contains(select.props.modelValue, props.value);
- }
- });
- const limitReached = 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 = computed(() => {
- return props.label || (isObject.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.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 isEqual = (a, b) => {
- if (!isObject.value) {
- return a === b;
- } else {
- const { valueKey } = select.props;
- return get(a, valueKey) === get(b, valueKey);
- }
- };
- const hoverItem = () => {
- if (!props.disabled && !selectGroup.disabled) {
- select.hoverIndex = select.optionsArray.indexOf(instance.proxy);
- }
- };
- watch(() => currentLabel.value, () => {
- if (!props.created && !select.props.remote)
- select.setSelected();
- });
- watch(() => props.value, (val, oldVal) => {
- const { remote, valueKey } = select.props;
- if (!Object.is(val, oldVal)) {
- select.onOptionDestroy(oldVal, instance.proxy);
- select.onOptionCreate(instance.proxy);
- }
- if (!props.created && !remote) {
- if (valueKey && typeof val === "object" && typeof oldVal === "object" && val[valueKey] === oldVal[valueKey]) {
- return;
- }
- select.setSelected();
- }
- });
- watch(() => selectGroup.disabled, () => {
- states.groupDisabled = selectGroup.disabled;
- }, { immediate: true });
- const { queryChange } = toRaw(select);
- watch(queryChange, (changes) => {
- const { query } = unref(changes);
- const regexp = new RegExp(escapeStringRegexp(query), "i");
- states.visible = regexp.test(currentLabel.value) || props.created;
- if (!states.visible) {
- select.filteredOptionsCount--;
- }
- });
- return {
- select,
- currentLabel,
- currentValue,
- itemSelected,
- isDisabled,
- hoverItem
- };
- }
- export { useOption };
- //# sourceMappingURL=useOption.mjs.map
|