mirror of
https://github.com/0PandaDEV/Qopy.git
synced 2025-04-21 13:14:04 +02:00
refactor: move selectedResult logic to a new plugin for better organization and maintainability
This commit is contained in:
parent
5e669749d7
commit
af64b77b74
2 changed files with 68 additions and 54 deletions
|
@ -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
68
plugins/selectedResult.ts
Normal 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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
Loading…
Add table
Add a link
Reference in a new issue