fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-04-02 20:41:02 +02:00
Code Issues Releases Wiki Activity

feat(UI): BaseSelect supports disabled options

Browse Source
This commit is contained in:
Giulio Ganci 2022-05-11 22:57:13 +02:00
parent 2b436d8613
commit f7e04d6333
1 changed files with 40 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,8 +48,9 @@
:ref="(el) => optionRefs[index] = el" :ref="(el) => optionRefs[index] = el"
:class="{ :class="{
'select__group': opt.$type === 'group', 'select__group': opt.$type === 'group',
'select__option--highlight': opt.$type === 'option' && index === hightlightedIndex, 'select__option--highlight': opt.$type === 'option' && !opt.disabled && index === hightlightedIndex,
'select__option--selected': opt.$type === 'option' && isSelected(opt) 'select__option--selected': opt.$type === 'option' && isSelected(opt),
'select__option--disabled': opt.disabled
}" }"
@click.stop="select(opt)" @click.stop="select(opt)"
@mouseenter.self="hightlightedIndex = index" @mouseenter.self="hightlightedIndex = index"
@ -104,6 +105,9 @@ export default defineComponent({
type: [String, Function], type: [String, Function],
default: 'label' default: 'label'
}, },
optionDisabled: {
type: Function
},
groupLabel: { groupLabel: {
type: String type: String
}, },
@ -143,6 +147,7 @@ export default defineComponent({
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 _guess = (name, item) => { const _guess = (name, item) => {
const prop = props[name]; const prop = props[name];
if (typeof prop === 'function') if (typeof prop === 'function')
@ -167,6 +172,7 @@ export default defineComponent({
$type: 'option', $type: 'option',
label: getOptionLabel(el), label: getOptionLabel(el),
id: `option-${value}`, id: `option-${value}`,
disabled: getOptionDisabled(el) === true,
value, value,
$data: { $data: {
...el ...el
@ -180,6 +186,7 @@ export default defineComponent({
$type: 'option', $type: 'option',
label: getOptionLabel(curr), label: getOptionLabel(curr),
id: `option-${value}`, id: `option-${value}`,
disabled: getOptionDisabled(curr) === true,
value, value,
$data: { $data: {
...curr ...curr
@ -219,7 +226,7 @@ export default defineComponent({
); );
const select = (opt) => { const select = (opt) => {
if (opt.$type === 'group') return; if (opt.$type === 'group' || opt.disabled) return;
internalValue.value = opt.value; internalValue.value = opt.value;
emit('select', opt); emit('select', opt);
@ -258,10 +265,10 @@ export default defineComponent({
isOpen.value = false; isOpen.value = false;
if (props.searchable) if (props.searchable)
searchInput.value.blur(); searchInput.value?.blur();
else else
el.value.blur(); el.value?.blur();
if (!props.preserveSearch) searchText.value = ''; if (!props.preserveSearch) searchText.value = '';
@ -342,32 +349,38 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.select { .select {
display: block;
display: block; &__search-input {
appearance: none;
border: none;
background: transparent;
outline: none;
color: currentColor;
}
&__search-input { &__list-wrapper {
appearance: none; cursor: pointer;
border: none; position: fixed;
background: transparent; display: block;
outline: none; z-index: 5;
color: currentColor; -webkit-overflow-scrolling: touch;
} max-height: 240px;
overflow: auto;
left: 0;
top: 40px;
}
&__list-wrapper { &__list {
cursor: pointer; list-style: none;
position: fixed; }
display: block;
z-index: 5;
-webkit-overflow-scrolling: touch;
max-height: 240px;
overflow: auto;
left: 0;
top: 40px;
}
&__list { &__option {
list-style: none; &--disabled {
} opacity: 0.6;
cursor: not-allowed;
}
}
&--disabled { &--disabled {
opacity: 0.6; opacity: 0.6;