@coreui/vue-pro
Version:
UI Components Library for Vue.js
198 lines (195 loc) • 8.69 kB
JavaScript
import { defineComponent, h } from 'vue';
import { CElementCover } from '../element-cover/CElementCover.js';
import { CVirtualScroller } from '../virtual-scroller/CVirtualScroller.js';
import getNextSibling from '../../utils/getNextSibling.js';
import getPreviousSibling from '../../utils/getPreviousSibling.js';
const CMultiSelectOptions = defineComponent({
name: 'CMultiSelectOptions',
props: {
loading: Boolean,
options: {
type: Array,
default: () => [],
},
optionsGroupsSelectable: Boolean,
optionsGroupsStyle: {
type: String,
default: 'checkbox',
validator: (value) => {
return ['checkbox', 'text'].includes(value);
},
},
optionsMaxHeight: {
type: [Number, String],
default: 'auto',
},
optionsStyle: {
type: String,
default: 'checkbox',
validator: (value) => {
return ['checkbox', 'text'].includes(value);
},
},
scopedSlots: Object,
searchNoResultsLabel: {
type: String,
default: 'no items',
},
selected: {
type: Array,
default: () => [],
},
virtualScroller: Boolean,
visibleItems: {
type: Number,
default: 10,
},
},
emits: ['groupClick', 'optionClick'],
setup(props, { emit }) {
const handleHomeEndKeyDown = (event) => {
if (event.key !== 'Home' && event.key !== 'End') {
return;
}
event.preventDefault();
const target = event.target;
const container = target.closest('.form-multi-select-options');
if (!container) {
return;
}
const first = event.key === 'Home';
const focusEdgeOption = () => {
const options = container.querySelectorAll('.form-multi-select-option:not(.disabled)');
if (options.length > 0) {
options[first ? 0 : options.length - 1].focus();
}
};
if (props.virtualScroller) {
// The virtualized viewport only mounts a window of options — scroll it to
// the edge so the true first/last options render, then focus after the
// window has re-rendered (scroll event → state update → commit).
container.scrollTop = first ? 0 : container.scrollHeight;
requestAnimationFrame(() => requestAnimationFrame(focusEdgeOption));
return;
}
focusEdgeOption();
};
const handleKeyDown = (event, option) => {
if (event.code === 'Space' || event.key === 'Enter') {
event.preventDefault();
handleOptionClick && handleOptionClick(option);
return;
}
if (event.key === 'Down' || event.key === 'ArrowDown') {
event.preventDefault();
const target = event.target;
const next = getNextSibling(target, '.form-multi-select-option');
next && next.focus();
}
if (event.key === 'Up' || event.key === 'ArrowUp') {
event.preventDefault();
const target = event.target;
const prev = getPreviousSibling(target, '.form-multi-select-option');
prev && prev.focus();
}
handleHomeEndKeyDown(event);
};
const handleGroupKeyDown = (event, group) => {
if (event.code === 'Space' || event.key === 'Enter') {
event.preventDefault();
emit('groupClick', group);
return;
}
if (event.key === 'Down' || event.key === 'ArrowDown') {
event.preventDefault();
const next = getNextSibling(event.target, '.form-multi-select-option');
next && next.focus();
}
if (event.key === 'Up' || event.key === 'ArrowUp') {
event.preventDefault();
const prev = getPreviousSibling(event.target, '.form-multi-select-option');
prev && prev.focus();
}
handleHomeEndKeyDown(event);
};
const getGroupCheckboxState = (group) => {
const groupOptions = (group.options ?? []).filter((option) => !option.disabled);
const selectedCount = groupOptions.filter((option) => props.selected.some((_option) => _option.value === option.value)).length;
if (groupOptions.length > 0 && selectedCount >= groupOptions.length) {
return 'all';
}
return selectedCount === 0 ? 'none' : 'indeterminate';
};
const handleOptionClick = (option) => {
emit('optionClick', option);
};
const handleGroupClick = (group) => {
emit('groupClick', group);
};
// TODO: find solution how to remove any
const createOptions = (options) => options.length > 0
? options.map((option) => 'value' in option
? h('div', {
class: [
'form-multi-select-option',
{
'form-multi-select-option-with-checkbox': props.optionsStyle === 'checkbox',
'form-multi-selected': props.selected.some((_option) => _option.value === option.value),
disabled: option.disabled,
},
],
onClick: () => handleOptionClick(option),
onKeydown: (event) => handleKeyDown(event, option),
tabindex: 0,
role: 'option',
'aria-selected': props.selected.some((_option) => _option.value === option.value),
}, props.scopedSlots && props.scopedSlots['options']
? h(props.scopedSlots['options'], { option: option })
: option.label)
: [
h('div', {
class: [
'form-multi-select-optgroup-label',
{
'form-multi-select-optgroup-label-with-checkbox': props.optionsGroupsSelectable &&
props.optionsGroupsStyle === 'checkbox',
'form-multi-selected': props.optionsGroupsSelectable &&
props.optionsGroupsStyle === 'checkbox' &&
getGroupCheckboxState(option) === 'all',
'form-multi-select-indeterminate': props.optionsGroupsSelectable &&
props.optionsGroupsStyle === 'checkbox' &&
getGroupCheckboxState(option) === 'indeterminate',
},
],
...(props.optionsGroupsSelectable &&
props.optionsGroupsStyle === 'checkbox' && {
onClick: () => handleGroupClick(option),
onKeydown: (event) => handleGroupKeyDown(event, option),
tabindex: 0,
role: 'button',
}),
}, props.scopedSlots && props.scopedSlots['options-groups']
? h(props.scopedSlots['options-groups'], { option: option })
: option.label),
])
: h('div', { class: 'form-multi-select-options-empty', role: 'status' }, props.searchNoResultsLabel);
return () => [
props.virtualScroller
? h(CVirtualScroller, {
class: 'form-multi-select-options',
visibleItems: props.visibleItems,
}, {
default: () => createOptions(props.options),
})
: h('div', {
class: 'form-multi-select-options',
...(props.optionsMaxHeight !== 'auto' && {
style: { maxHeight: props.optionsMaxHeight, overflow: 'scroll' },
}),
}, createOptions(props.options)),
props.loading && h(CElementCover),
];
},
});
export { CMultiSelectOptions };
//# sourceMappingURL=CMultiSelectOptions.js.map