vuestic-ui
Version:
Vue 3 UI Framework
48 lines (47 loc) • 1.86 kB
JavaScript
import { toRef, ref, computed, watch } from "vue";
import { i as isNilValue } from "../../../utils/isNilValue.js";
const useMaxVisibleOptionsProps = {
maxVisibleOptions: { type: Number || String, default: 0 }
};
const useMaxVisibleOptions = (props, getOptionByValue) => {
const modelValue = toRef(props, "modelValue");
const isAllOptionsShown = ref(false);
const belowLimitSelectedOptions = ref([]);
const hiddenSelectedOptions = ref([]);
const hiddenSelectedOptionsAmount = computed(() => hiddenSelectedOptions.value.length);
const allSelectedOptions = computed(() => [...belowLimitSelectedOptions.value, ...hiddenSelectedOptions.value]);
const visibleSelectedOptions = computed(() => {
if (!props.maxVisibleOptions || isAllOptionsShown.value) {
return allSelectedOptions.value;
}
return belowLimitSelectedOptions.value;
});
watch(modelValue, () => {
if (!Array.isArray(modelValue.value)) {
belowLimitSelectedOptions.value = [getOptionByValue(modelValue.value)];
hiddenSelectedOptions.value = [];
return;
}
const value = modelValue.value.filter((v) => !isNilValue(v)).map(getOptionByValue);
if (props.maxVisibleOptions) {
belowLimitSelectedOptions.value = value.slice(0, props.maxVisibleOptions);
hiddenSelectedOptions.value = value.slice(props.maxVisibleOptions);
} else {
belowLimitSelectedOptions.value = [...value];
hiddenSelectedOptions.value = [];
}
}, { immediate: true });
const toggleHiddenOptionsState = () => isAllOptionsShown.value = !isAllOptionsShown.value;
return {
toggleHiddenOptionsState,
isAllOptionsShown,
visibleSelectedOptions,
hiddenSelectedOptionsAmount,
allSelectedOptions
};
};
export {
useMaxVisibleOptions as a,
useMaxVisibleOptionsProps as u
};
//# sourceMappingURL=useMaxVisibleOptions.js.map