diff --git a/strr-base-web/app/components/connect/Stepper.vue b/strr-base-web/app/components/connect/Stepper.vue index 3a7bccb8e..2bb9ee2a8 100644 --- a/strr-base-web/app/components/connect/Stepper.vue +++ b/strr-base-web/app/components/connect/Stepper.vue @@ -8,6 +8,11 @@ const activeStepIndexModel = defineModel('activeStepIndex', { default: 0 const activeStepModel = defineModel('activeStep', { default: () => {} }) const buttonRefs = ref([]) +const stepperOlRef = ref(null) +const stepImageRefs = ref(null) +const separatorPosition = ref<{ top: string, left: string, width: string }>({ top: '0px', left: '0px', width: '0px' }) +const activeBorderPosition = ref<{ left: string, width: string }>({ left: '0px', width: '0px' }) +const stepperVisible = useElementVisibility(stepperOlRef) async function setActiveStep (newStep: number) { activeStepModel.value.complete = true // set currently active step to complete @@ -70,9 +75,35 @@ function createStepAriaLabel (index: number) { return `${stepCount} ${label}, ${validity}` } +function updateActiveBorderPosition () { + if (stepperOlRef.value) { + activeBorderPosition.value = { + left: `${(stepperOlRef.value.offsetWidth / stepsModel.value.length) * activeStepIndexModel.value}px`, + width: `${stepperOlRef.value.offsetWidth / stepsModel.value.length}px` + } + } +} + watch(activeStepIndexModel, (newIndex) => { buttonRefs.value[newIndex]?.focus() - window.scrollTo({ top: 0, behavior: 'smooth' }) + if (!stepperVisible.value) { // only scroll if stepper outside of viewport + stepperOlRef.value?.scrollIntoView(true) // aligns top of stepper container to top of viewport + } + + updateActiveBorderPosition() +}) + +// update separator position as stepper size changes +useResizeObserver(stepperOlRef, () => { + if (stepImageRefs.value && stepImageRefs.value[0] && buttonRefs.value && buttonRefs.value[0]) { + separatorPosition.value = { + top: `${stepImageRefs.value[0].offsetHeight / 2}px`, + left: `${buttonRefs.value[0].offsetWidth / 2}px`, + width: `${buttonRefs.value[0].offsetWidth * 3}px` + } + } + + updateActiveBorderPosition() }) defineExpose({ setActiveStep, setNextStep, setPreviousStep, setStepValidity, buttonRefs }) @@ -85,29 +116,38 @@ onMounted(() => {