fabio286
/
antares
mirror of https://github.com/Fabio286/antares.git
1
1
Fork 0
Code Issues Releases Wiki Activity

feat: add max visible options prop

This commit is contained in:
Giulio Ganci 2022-06-19 16:58:52 +02:00
parent ee623b0a0f
commit 067a6f3507
1 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/renderer/components/BaseSelect.vue
View File

@ -132,6 +132,10 @@ export default defineComponent({
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false default: false
},
maxVisibleOptions: {
type: Number,
default: 100
} }
}, },
emits: ['select', 'open', 'close', 'update:modelValue', 'change', 'blur'], emits: ['select', 'open', 'close', 'update:modelValue', 'change', 'blur'],
@ -147,7 +151,7 @@ export default defineComponent({
const searchText = ref(''); const searchText = ref('');
const getOptionValue = (opt) => _guess('optionTrackBy', opt); const getOptionValue = (opt) => _guess('optionTrackBy', opt);
const getOptionLabel = (opt) => _guess('optionLabel', opt); const getOptionLabel = (opt) => _guess('optionLabel', opt) + '';
const getOptionDisabled = (opt) => _guess('optionDisabled', opt); const getOptionDisabled = (opt) => _guess('optionDisabled', opt);
const _guess = (name, item) => { const _guess = (name, item) => {
const prop = props[name]; const prop = props[name];
@ -200,11 +204,30 @@ export default defineComponent({
}); });
const filteredOptions = computed(() => { const filteredOptions = computed(() => {
const normalizedSearch = (searchText.value || '').toLowerCase().trim(); const searchTerms = (searchText.value || '').toLowerCase().trim();
return normalizedSearch let options = searchTerms
? flattenOptions.value.filter(opt => opt.$type === 'group' || opt.label.trim().toLowerCase().indexOf(normalizedSearch) !== -1) ? flattenOptions.value.filter(opt => opt.$type === 'group' || opt.label.trim().toLowerCase().indexOf(searchTerms) !== -1)
: flattenOptions.value; : flattenOptions.value;
if (options.length > props.maxVisibleOptions) {
let sliceStart = 0;
let sliceEnd = sliceStart + props.maxVisibleOptions;
// if no search active try to open the dropdown showing options around the selected one
if (searchTerms === '') {
const index = internalValue.value ? flattenOptions.value.findIndex(el => el.value === internalValue.value) : -1;
if (index < options.length -1) {
sliceStart = Math.max(0, index - Math.floor(props.maxVisibleOptions / 2));
sliceEnd = Math.min(sliceStart + sliceEnd, options.length -1);
}
}
options = options.slice(sliceStart, sliceEnd);
}
return options;
}); });
const searchInputStyle = computed(() => { const searchInputStyle = computed(() => {
@ -253,7 +276,7 @@ export default defineComponent({
const activate = () => { const activate = () => {
if (isOpen.value || props.disabled) return; if (isOpen.value || props.disabled) return;
isOpen.value = true; isOpen.value = true;
hightlightedIndex.value = flattenOptions.value.findIndex(el => el.value === internalValue.value) || 0; hightlightedIndex.value = filteredOptions.value.findIndex(el => el.value === internalValue.value) || 0;
if (props.searchable) if (props.searchable)
searchInput.value.focus(); searchInput.value.focus();