75 lines
1.5 KiB
TypeScript
75 lines
1.5 KiB
TypeScript
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,
|
|
}
|
|
})
|