refactor: move selectedResult logic to a new plugin for better organization and maintainability

This commit is contained in:
pandadev 2025-03-16 20:33:22 +01:00
parent 5e669749d7
commit af64b77b74
No known key found for this signature in database
GPG key ID: C39629DACB8E762F
2 changed files with 68 additions and 54 deletions

View file

@ -1,54 +0,0 @@
import type { HistoryItem } from '~/types/types'
interface GroupedHistory {
label: string
items: HistoryItem[]
}
export const selectedGroupIndex = ref(0)
export const selectedItemIndex = ref(0)
export const selectedElement = ref<HTMLElement | null>(null)
export const useSelectedResult = (groupedHistory: Ref<GroupedHistory[]>) => {
const selectedItem = computed<HistoryItem | null>(() => {
const group = groupedHistory.value[selectedGroupIndex.value]
return group?.items[selectedItemIndex.value] ?? null
})
const isSelected = (groupIndex: number, itemIndex: number): boolean => {
return selectedGroupIndex.value === groupIndex && selectedItemIndex.value === itemIndex
}
const selectNext = (): void => {
const currentGroup = groupedHistory.value[selectedGroupIndex.value]
if (selectedItemIndex.value < currentGroup.items.length - 1) {
selectedItemIndex.value++
} else if (selectedGroupIndex.value < groupedHistory.value.length - 1) {
selectedGroupIndex.value++
selectedItemIndex.value = 0
}
}
const selectPrevious = (): void => {
if (selectedItemIndex.value > 0) {
selectedItemIndex.value--
} else if (selectedGroupIndex.value > 0) {
selectedGroupIndex.value--
selectedItemIndex.value = groupedHistory.value[selectedGroupIndex.value].items.length - 1
}
}
const selectItem = (groupIndex: number, itemIndex: number): void => {
selectedGroupIndex.value = groupIndex
selectedItemIndex.value = itemIndex
}
return {
selectedItem,
isSelected,
selectNext,
selectPrevious,
selectItem,
selectedElement
}
}

68
plugins/selectedResult.ts Normal file
View file

@ -0,0 +1,68 @@
import { ref, computed } from 'vue';
import type { HistoryItem } from '~/types/types';
interface GroupedHistory {
label: string;
items: HistoryItem[];
}
const selectedGroupIndex = ref(0);
const selectedItemIndex = ref(0);
const selectedElement = ref<HTMLElement | null>(null);
const useSelectedResult = (groupedHistory: Ref<GroupedHistory[]>) => {
const selectedItem = computed<HistoryItem | undefined>(() => {
const group = groupedHistory.value[selectedGroupIndex.value];
return group?.items[selectedItemIndex.value] ?? undefined;
});
const isSelected = (groupIndex: number, itemIndex: number): boolean => {
return selectedGroupIndex.value === groupIndex && selectedItemIndex.value === itemIndex;
};
const selectNext = (): void => {
const currentGroup = groupedHistory.value[selectedGroupIndex.value];
if (selectedItemIndex.value < currentGroup.items.length - 1) {
selectedItemIndex.value++;
} else if (selectedGroupIndex.value < groupedHistory.value.length - 1) {
selectedGroupIndex.value++;
selectedItemIndex.value = 0;
}
};
const selectPrevious = (): void => {
if (selectedItemIndex.value > 0) {
selectedItemIndex.value--;
} else if (selectedGroupIndex.value > 0) {
selectedGroupIndex.value--;
selectedItemIndex.value = groupedHistory.value[selectedGroupIndex.value].items.length - 1;
}
};
const selectItem = (groupIndex: number, itemIndex: number): void => {
selectedGroupIndex.value = groupIndex;
selectedItemIndex.value = itemIndex;
};
return {
selectedItem,
isSelected,
selectNext,
selectPrevious,
selectItem,
selectedElement
};
};
export default defineNuxtPlugin(() => {
return {
provide: {
selectedResult: {
selectedGroupIndex,
selectedItemIndex,
selectedElement,
useSelectedResult
}
}
};
});