feat: add tour store for guided walkthrough state
This commit is contained in:
74
src/stores/tour.ts
Normal file
74
src/stores/tour.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
export interface TourStep {
|
||||
target: string
|
||||
title: string
|
||||
content: string
|
||||
placement?: 'top' | 'bottom' | 'left' | 'right'
|
||||
}
|
||||
|
||||
export interface TourDefinition {
|
||||
id: string
|
||||
route: string
|
||||
steps: TourStep[]
|
||||
}
|
||||
|
||||
export const useTourStore = defineStore('tour', () => {
|
||||
const activeTourId = ref<string | null>(null)
|
||||
const currentStepIndex = ref(0)
|
||||
const activeTour = ref<TourDefinition | null>(null)
|
||||
|
||||
const isActive = computed(() => activeTourId.value !== null)
|
||||
|
||||
const currentStep = computed(() => {
|
||||
if (!activeTour.value) return null
|
||||
return activeTour.value.steps[currentStepIndex.value] || null
|
||||
})
|
||||
|
||||
const totalSteps = computed(() => activeTour.value?.steps.length || 0)
|
||||
|
||||
const isFirstStep = computed(() => currentStepIndex.value === 0)
|
||||
const isLastStep = computed(() => currentStepIndex.value >= totalSteps.value - 1)
|
||||
|
||||
function start(tour: TourDefinition) {
|
||||
activeTourId.value = tour.id
|
||||
activeTour.value = tour
|
||||
currentStepIndex.value = 0
|
||||
}
|
||||
|
||||
function next() {
|
||||
if (!isLastStep.value) {
|
||||
currentStepIndex.value++
|
||||
} else {
|
||||
stop()
|
||||
}
|
||||
}
|
||||
|
||||
function back() {
|
||||
if (!isFirstStep.value) {
|
||||
currentStepIndex.value--
|
||||
}
|
||||
}
|
||||
|
||||
function stop() {
|
||||
activeTourId.value = null
|
||||
activeTour.value = null
|
||||
currentStepIndex.value = 0
|
||||
}
|
||||
|
||||
return {
|
||||
activeTourId,
|
||||
currentStepIndex,
|
||||
activeTour,
|
||||
isActive,
|
||||
currentStep,
|
||||
totalSteps,
|
||||
isFirstStep,
|
||||
isLastStep,
|
||||
start,
|
||||
next,
|
||||
back,
|
||||
stop,
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user