Skip to content

Commit

Permalink
feat(UI): BaseSelect supports disabled options
Browse files Browse the repository at this point in the history
  • Loading branch information
toriphes committed May 11, 2022
1 parent 2b436d8 commit f7e04d6
Showing 1 changed file with 43 additions and 30 deletions.
73 changes: 43 additions & 30 deletions src/renderer/components/BaseSelect.vue
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,9 @@
:ref="(el) => optionRefs[index] = el"
:class="{
'select__group': opt.$type === 'group',
'select__option--highlight': opt.$type === 'option' && index === hightlightedIndex,
'select__option--selected': opt.$type === 'option' && isSelected(opt)
'select__option--highlight': opt.$type === 'option' && !opt.disabled && index === hightlightedIndex,
'select__option--selected': opt.$type === 'option' && isSelected(opt),
'select__option--disabled': opt.disabled
}"
@click.stop="select(opt)"
@mouseenter.self="hightlightedIndex = index"
Expand Down Expand Up @@ -104,6 +105,9 @@ export default defineComponent({
type: [String, Function],
default: 'label'
},
optionDisabled: {
type: Function
},
groupLabel: {
type: String
},
Expand Down Expand Up @@ -143,6 +147,7 @@ export default defineComponent({
const getOptionValue = (opt) => _guess('optionTrackBy', opt);
const getOptionLabel = (opt) => _guess('optionLabel', opt);
const getOptionDisabled = (opt) => _guess('optionDisabled', opt);
const _guess = (name, item) => {
const prop = props[name];
if (typeof prop === 'function')
Expand All @@ -167,6 +172,7 @@ export default defineComponent({
$type: 'option',
label: getOptionLabel(el),
id: `option-${value}`,
disabled: getOptionDisabled(el) === true,
value,
$data: {
...el
Expand All @@ -180,6 +186,7 @@ export default defineComponent({
$type: 'option',
label: getOptionLabel(curr),
id: `option-${value}`,
disabled: getOptionDisabled(curr) === true,
value,
$data: {
...curr
Expand Down Expand Up @@ -219,7 +226,7 @@ export default defineComponent({
);
const select = (opt) => {
if (opt.$type === 'group') return;
if (opt.$type === 'group' || opt.disabled) return;
internalValue.value = opt.value;
emit('select', opt);
Expand Down Expand Up @@ -258,10 +265,10 @@ export default defineComponent({
isOpen.value = false;
if (props.searchable)
searchInput.value.blur();
searchInput.value?.blur();
else
el.value.blur();
el.value?.blur();
if (!props.preserveSearch) searchText.value = '';
Expand Down Expand Up @@ -342,32 +349,38 @@ export default defineComponent({
<style lang="scss" scoped>
.select {
display: block;
&__search-input {
appearance: none;
border: none;
background: transparent;
outline: none;
color: currentColor;
}
&__list-wrapper {
cursor: pointer;
position: fixed;
display: block;
z-index: 5;
-webkit-overflow-scrolling: touch;
max-height: 240px;
overflow: auto;
left: 0;
top: 40px;
}
display: block;
&__search-input {
appearance: none;
border: none;
background: transparent;
outline: none;
color: currentColor;
}
&__list-wrapper {
cursor: pointer;
position: fixed;
display: block;
z-index: 5;
-webkit-overflow-scrolling: touch;
max-height: 240px;
overflow: auto;
left: 0;
top: 40px;
}
&__list {
list-style: none;
}
&__list {
list-style: none;
}
&__option {
&--disabled {
opacity: 0.6;
cursor: not-allowed;
}
}
&--disabled {
opacity: 0.6;
Expand Down

0 comments on commit f7e04d6

Please sign in to comment.