You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.2 KiB
47 lines
1.2 KiB
2 months ago
|
import { reactive, nextTick, watch, computed } from "vue";
|
||
|
|
|
||
|
|
export const state = reactive({
|
||
|
|
_activeIndex: undefined,
|
||
|
|
get activeIndex(){
|
||
|
|
return state._activeIndex;
|
||
|
|
},
|
||
|
|
set activeIndex(val){
|
||
|
|
// if (val === state._activeIndex) return;
|
||
|
|
state._activeIndex = val;
|
||
|
|
if (val === undefined) return;
|
||
|
|
state._activeElement = document.querySelector(`[tabindex="${val}"]`);
|
||
|
|
nextTick(() => {
|
||
|
|
nextTick(() => {
|
||
|
|
state._activeElement?.focus();
|
||
|
|
})
|
||
|
|
})
|
||
|
|
},
|
||
|
|
_activeElement: undefined,
|
||
|
|
get activeElement(){
|
||
|
|
return state._activeElement;
|
||
|
|
},
|
||
|
|
set activeElement(val){
|
||
|
|
// if (val === state._activeElement) return;
|
||
|
|
state._activeElement = val;
|
||
|
|
if (val === undefined) return;
|
||
|
|
state.activeIndex = val.tabIndex;
|
||
|
|
},
|
||
|
|
elements: {},
|
||
|
|
sortedElements: computed(() => Object.keys(state.elements)),
|
||
|
|
init: true,
|
||
|
|
back: [],
|
||
|
|
backActive: []
|
||
|
|
});
|
||
|
|
|
||
|
|
watch(() => state.sortedElements, () => {
|
||
|
|
if (state._activeIndex !== undefined && state.sortedElements.length > 0){
|
||
|
|
state.activeIndex = state._activeIndex;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
watch(() => state.activeIndex, () => {
|
||
|
|
if (state.activeIndex === undefined && state.sortedElements.length > 0){
|
||
|
|
state.activeIndex = state.sortedElements[0];
|
||
|
|
}
|
||
|
|
})
|