lkt-step-process 2.0.14 → 2.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-step-process",
-  "version": "2.0.14",
+  "version": "2.0.16",
   "description": "",
   "type": "module",
   "module": "./dist/build.js",

package/src/components/ButtonNav.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
     import { ButtonNavProps } from '../config/ButtonNavProps';
-    import { ref, SetupContext, useSlots } from 'vue';
+    import { computed, ref, SetupContext, useSlots } from 'vue';
     import { DotConfig } from 'lkt-vue-kernel';
 
     const props = withDefaults(defineProps<ButtonNavProps>(), {});
@@ -22,10 +22,16 @@
             prevButtonRef.value.click();
         }
     });
+
+    const stepHasDotsInfo = computed(() => {
+        if (typeof props.currentStepConfig?.excludedFromTotalCount === 'function') return !props.currentStepConfig.excludedFromTotalCount();
+        if (typeof props.currentStepConfig?.excludedFromTotalCount === 'boolean') return !props.currentStepConfig.excludedFromTotalCount;
+        return true;
+    })
 </script>
 
 <template>
-    <div class="lkt-step-process--nav">
+    <div class="lkt-step-process--nav" v-if="prevButton || nextButton || (stepHasDotsInfo && (slots['nav-info'] || dots && amountOfSteps > 0))">
         <lkt-button
             ref="prevButtonRef"
             v-if="prevButton"
@@ -34,11 +40,12 @@
             class="is-prev-button"
         />
 
-        <div class="lkt-step-process--nav-info" v-if="slots['nav-info'] || dots && amountOfSteps > 0">
+        <div class="lkt-step-process--nav-info" v-if="stepHasDotsInfo && (slots['nav-info'] || dots && amountOfSteps > 0)">
             <template v-if="slots['nav-info']">
                 <slot
                     name="nav-info"
                     v-bind="{
+                        visibleStep: visibleStepIndex,
                         currentStep,
                         currentStepIndex,
                         amountOfSteps,
@@ -46,12 +53,12 @@
                 />
             </template>
 
-            <div class="lkt-step-process--dots" v-if="dots && amountOfSteps > 0">
+            <div class="lkt-step-process--dots" v-if="dots && amountOfSteps > 0 && stepHasDotsInfo">
                 <lkt-dot
                     v-for="n in amountOfSteps"
                     v-bind="<DotConfig>{
                         text: dotsNumbers ? n : '',
-                        class: n === (currentStepIndex + 1) ? 'is-active' : '',
+                        class: n === visibleStepIndex ? 'is-active' : '',
                     }"
                 />
             </div>

package/src/lib-components/LktStepProcess.vue

@@ -49,6 +49,20 @@
     const currentStepIndex = computed(() => {
             return stepsHaystack.value.findIndex((step: StepProcessStepConfig) => step.key === currentStep.value);
         }),
+        visibleStepIndex = computed(() => {
+            let baseIndex = stepsHaystack.value.findIndex((step: StepProcessStepConfig) => step.key === currentStep.value);
+            let r = baseIndex;
+            for (let i = 0; i < baseIndex; ++i) {
+                let excluded = false,
+                    excludedValue = stepsHaystack.value[i].excludedFromTotalCount;
+
+                if (typeof excludedValue === 'function') excluded = excludedValue() === true;
+                else if (typeof excludedValue === 'boolean') excluded = excludedValue === true;
+
+                if (excluded) --r;
+            }
+            return r + 1;
+        }),
         currentStepConfig = computed(() => {
             return stepsHaystack.value[currentStepIndex.value];
         }),
@@ -146,7 +160,15 @@
             return props.buttonNavPosition === ItemCrudButtonNavPosition.Bottom;
         }),
         computedAmountOfSteps = computed(() => {
-            return stepsHaystack.value.length;
+            let r = 0;
+            stepsHaystack.value.forEach(step => {
+                let excluded = false;
+                if (typeof step.excludedFromTotalCount === 'function') excluded = step.excludedFromTotalCount() === true;
+                else if (typeof step.excludedFromTotalCount === 'boolean') excluded = step.excludedFromTotalCount === true;
+
+                if (!excluded) ++r;
+            })
+            return r;
         }),
         computedButtonNavProps = computed(() => {
             return <ButtonNavProps>{
@@ -154,7 +176,9 @@
                 prevButton: computedPrevButton.value,
                 nextButton: computedNextButton.value,
                 currentStep: currentStep.value,
+                currentStepConfig: currentStepConfig.value,
                 currentStepIndex: currentStepIndex.value,
+                visibleStepIndex: visibleStepIndex.value,
                 amountOfSteps: computedAmountOfSteps.value,
                 dots: props.dots,
                 dotsNumbers: props.dotsNumbers,
@@ -168,6 +192,8 @@
         });
 
     const onNext = (data: any) => {
+            let fromStep = currentStep.value;
+
             let nextKey = stepsHaystack.value[currentStepIndex.value]?.nextKey;
             let nextIndex = currentStepIndex.value + 1;
 
@@ -180,7 +206,16 @@
                 if (needle > -1) nextIndex = needle;
             }
 
-            currentStep.value = stepsHaystack.value[nextIndex].key;
+            let toStep = stepsHaystack.value[nextIndex].key;
+
+            if (typeof currentStepConfig.value?.events?.leave === 'function') {
+                currentStepConfig.value?.events?.leave({to: toStep})
+            }
+
+            currentStep.value = toStep;
+            if (typeof currentStepConfig.value?.events?.enter === 'function') {
+                currentStepConfig.value?.events?.enter({from: fromStep})
+            }
             if (currentStepIndex.value === (stepsHaystack.value.length - 1)) {
                 emit('finish', data);
 
@@ -189,6 +224,8 @@
             }
         },
         onPrev = (data: any) => {
+            let fromStep = currentStep.value;
+
             let prevKey = stepsHaystack.value[currentStepIndex.value]?.prevKey;
             let nextIndex = currentStepIndex.value - 1;
 
@@ -201,7 +238,16 @@
                 if (needle > -1) nextIndex = needle;
             }
 
-            currentStep.value = stepsHaystack.value[nextIndex].key;
+            let toStep = stepsHaystack.value[nextIndex].key;
+
+            if (typeof currentStepConfig.value?.events?.leave === 'function') {
+                currentStepConfig.value?.events?.leave({to: toStep})
+            }
+
+            currentStep.value = toStep;
+            if (typeof currentStepConfig.value?.events?.enter === 'function') {
+                currentStepConfig.value?.events?.enter({from: fromStep})
+            }
             emit('prev', data);
         },
         canRenderStep = (stepKey:string) => {
@@ -273,10 +319,11 @@
             ref="navRef"
             v-bind="computedButtonNavProps"
         >
-            <template #nav-info="{currentStep, currentStepIndex, amountOfSteps}" v-if="slots['nav-info']">
+            <template #nav-info="{currentStep, currentStepIndex, amountOfSteps, visibleStep}" v-if="slots['nav-info']">
                 <slot
                     name="nav-info"
                       v-bind="{
+                        visibleStep,
                         currentStep,
                         currentStepIndex,
                         amountOfSteps: computedAmountOfSteps,
@@ -301,10 +348,11 @@
             ref="navRef"
             v-bind="computedButtonNavProps"
         >
-            <template #nav-info="{currentStep, currentStepIndex, amountOfSteps}" v-if="slots['nav-info']">
+            <template #nav-info="{currentStep, currentStepIndex, amountOfSteps, visibleStep}" v-if="slots['nav-info']">
                 <slot
                     name="nav-info"
                     v-bind="{
+                        visibleStep,
                         currentStep,
                         currentStepIndex,
                         amountOfSteps: computedAmountOfSteps,