fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00
Code Issues Releases Wiki Activity

feat(UI): BaseSelect disabled state

Browse Source
This commit is contained in:
Giulio Ganci
2022-05-10 10:29:38 +02:00
parent 1869e6a148
commit 2b436d8613
1 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,9 +2,9 @@
<div <div
ref="el" ref="el"
class="select" class="select"
:class="{'select-open': isOpen}" :class="{'select-open': isOpen, 'select--disabled': disabled}"
role="combobox" role="combobox"
:tabindex="searchable ? -1 : tabindex" :tabindex="searchable || disabled ? -1 : tabindex"
@focus="activate()" @focus="activate()"
@blur="searchable ? false : handleBlurEvent()" @blur="searchable ? false : handleBlurEvent()"
@keyup.esc="deactivate()" @keyup.esc="deactivate()"
@ -98,13 +98,11 @@ export default defineComponent({
}, },
optionTrackBy: { optionTrackBy: {
type: [String, Function], type: [String, Function],
default: () => (opt) => { default: 'value'
for (const guess of ['id', 'value']) if (opt[guess]) return guess;
}
}, },
optionLabel: { optionLabel: {
type: [String, Function], type: [String, Function],
default: () => (opt) => opt.label ? 'label' : undefined default: 'label'
}, },
groupLabel: { groupLabel: {
type: String type: String
@ -126,6 +124,10 @@ export default defineComponent({
}, },
dropdownClass: { dropdownClass: {
type: String type: String
},
disabled: {
type: Boolean,
default: false
} }
}, },
emits: ['select', 'open', 'close', 'update:modelValue', 'change', 'blur'], emits: ['select', 'open', 'close', 'update:modelValue', 'change', 'blur'],
@ -143,8 +145,10 @@ export default defineComponent({
const getOptionLabel = (opt) => _guess('optionLabel', opt); const getOptionLabel = (opt) => _guess('optionLabel', opt);
const _guess = (name, item) => { const _guess = (name, item) => {
const prop = props[name]; const prop = props[name];
const key = typeof prop === 'function' ? prop(item) : prop; if (typeof prop === 'function')
return key ? item[key] : item; return prop(item);
return item[prop] || item;
}; };
const flattenOptions = computed(() => { const flattenOptions = computed(() => {
@ -231,7 +235,7 @@ export default defineComponent({
}; };
const activate = () => { const activate = () => {
if (isOpen.value) 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 = flattenOptions.value.findIndex(el => el.value === internalValue.value) || 0;
@ -365,5 +369,9 @@ export default defineComponent({
list-style: none; list-style: none;
} }
&--disabled {
opacity: 0.6;
cursor: not-allowed;
}
} }
</style> </style>