diff --git a/src/content/Components/Stepper/Stepper.vue b/src/content/Components/Stepper/Stepper.vue index 4d7f02d..4d0f1f4 100644 --- a/src/content/Components/Stepper/Stepper.vue +++ b/src/content/Components/Stepper/Stepper.vue @@ -14,7 +14,7 @@ @click="() => handleStepClick(index + 1)" :class="[ 'relative outline-none flex h-8 w-8 items-center justify-center rounded-full font-semibold', - isCompleted ? 'cursor-default' : 'cursor-pointer' + isCompleted && lockOnComplete ? 'cursor-default' : 'cursor-pointer' ]" :style="getStepIndicatorStyle(index + 1)" > @@ -154,6 +154,7 @@ interface StepperProps { nextButtonText?: string; disableStepIndicators?: boolean; renderStepIndicator?: Component; + lockOnComplete?: boolean; } const props = withDefaults(defineProps(), { @@ -169,7 +170,8 @@ const props = withDefaults(defineProps(), { backButtonText: 'Back', nextButtonText: 'Continue', disableStepIndicators: false, - renderStepIndicator: undefined + renderStepIndicator: undefined, + lockOnComplete: true }); const slots = useSlots(); @@ -212,7 +214,7 @@ const getStepContentExit = () => ({ }); const handleStepClick = (step: number) => { - if (isCompleted.value) return; + if (isCompleted.value && props.lockOnComplete) return; if (!props.disableStepIndicators) { direction.value = step > currentStep.value ? 1 : -1; updateStep(step); @@ -220,7 +222,7 @@ const handleStepClick = (step: number) => { }; const handleCustomStepClick = (clicked: number) => { - if (isCompleted.value) return; + if (isCompleted.value && props.lockOnComplete) return; if (clicked !== currentStep.value && !props.disableStepIndicators) { direction.value = clicked > currentStep.value ? 1 : -1; updateStep(clicked); @@ -259,12 +261,18 @@ const handleComplete = () => { props.onFinalStepCompleted?.(); }; -watch(currentStep, newStep => { - props.onStepChange?.(newStep); - if (!isCompleted.value) { - measureHeight(); +watch( + currentStep, + (newStep, oldStep) => { + props.onStepChange?.(newStep); + if (newStep !== oldStep && !isCompleted.value) { + nextTick(measureHeight); + } else if (!props.lockOnComplete && isCompleted.value) { + isCompleted.value = false; + nextTick(measureHeight); + } } -}); +); onMounted(() => { if (props.initialStep !== 1) { diff --git a/src/demo/Components/StepperDemo.vue b/src/demo/Components/StepperDemo.vue index 358fa12..6b8667d 100644 --- a/src/demo/Components/StepperDemo.vue +++ b/src/demo/Components/StepperDemo.vue @@ -21,6 +21,7 @@ :on-final-step-completed="handleFinalStepCompleted" :next-button-props="{ disabled: step === 3 && !name }" :disable-step-indicators="step === 3 && !name" + :lock-on-complete="false" back-button-text="Previous" next-button-text="Next" > @@ -170,6 +171,12 @@ const propData = [ type: '(props: RenderStepIndicatorProps) => VNode', default: 'undefined', description: 'Renders a custom step indicator component.' + }, + { + name: 'lockOnComplete', + type: 'boolean', + default: 'false', + description: 'Prevents returning to previous steps after completing the stepper.' } ];