lkt-step-process 2.0.10 → 2.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lkt-step-process",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "description": "",
   "type": "module",
   "module": "./dist/build.js",
@@ -13,7 +13,10 @@
     "./theme/default": "./theme/default.css"
   },
   "types": "./dist/index.d.ts",
-  "files": ["dist/*", "src/**/*.vue"],
+  "files": [
+    "dist/*",
+    "src/**/*.vue"
+  ],
   "license": "MIT",
   "sideEffects": false,
   "scripts": {

package/src/components/ButtonNav.vue

@@ -32,10 +32,9 @@
             v-show="!isLoading"
             v-bind="prevButton"
             class="is-prev-button"
-            @click="emit('prev')"
         />
 
-        <div class="lkt-step-process--nav-info">
+        <div class="lkt-step-process--nav-info" v-if="slots['nav-info'] || dots && amountOfSteps > 0">
             <template v-if="slots['nav-info']">
                 <slot
                     name="nav-info"
@@ -65,7 +64,6 @@
             v-show="!isLoading"
             v-bind="nextButton"
             class="is-next-button"
-            @click="emit('next')"
         />
     </div>
 </template>

package/src/lib-components/LktStepProcess.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
     import { computed, onMounted, ref, useSlots, watch } from 'vue';
     import {
-        ButtonConfig,
+        ButtonConfig, ClickEventArgs,
         getDefaultValues,
         ItemCrudButtonNavPosition,
         ItemCrudButtonNavVisibility,
@@ -70,7 +70,24 @@
             if (typeof r.disabled === 'undefined') {
                 r.disabled = prevDisabled.value;
             }
-            return r;
+
+            const clientClickEvent = r.events?.click;
+
+            return {
+                ...r,
+                events: {
+                    ...r.events,
+                    click: (data: ClickEventArgs) => {
+
+                        if (typeof clientClickEvent === 'function') clientClickEvent(data);
+
+                        if (data.httpResponse?.success === false) {
+                            return;
+                        }
+                        onPrev(data);
+                    }
+                }
+            };
         }),
         computedNextButton = computed(() => {
             if (currentStepConfig.value?.nextButton === false) {
@@ -90,7 +107,24 @@
             if (typeof currentStepConfig.value?.nextButton === 'object') {
                 r = { ...r, ...currentStepConfig.value?.nextButton };
             }
-            return r;
+
+            const clientClickEvent = r.events?.click;
+
+            return {
+                ...r,
+                events: {
+                    ...r.events,
+                    click: (data: ClickEventArgs) => {
+
+                        if (typeof clientClickEvent === 'function') clientClickEvent(data);
+
+                        if (data.httpResponse?.success === false) {
+                            return;
+                        }
+                        onNext(data);
+                    }
+                }
+            };
         }),
         classes = computed(() => {
             const r = [];
@@ -119,10 +153,28 @@
                 dots: props.dots,
                 dotsNumbers: props.dotsNumbers,
             };
+        }),
+        computedHasButtonNavContent =  computed(() => {
+            return typeof computedPrevButton.value === 'object'
+                || typeof computedNextButton.value === 'object'
+                || props.dots
+                || typeof slots['nav-info'] !== 'undefined';
         });
 
     const onNext = (data: any) => {
-            currentStep.value = stepsHaystack.value[currentStepIndex.value + 1].key;
+            let nextKey = stepsHaystack.value[currentStepIndex.value]?.nextKey;
+            let nextIndex = currentStepIndex.value + 1;
+
+            if (typeof nextKey === 'function') nextKey = nextKey();
+            if (typeof nextKey === 'string') {
+                let needle = stepsHaystack.value.findIndex((z) => {
+                    return z.key === nextKey;
+                })
+
+                if (needle > -1) nextIndex = needle;
+            }
+
+            currentStep.value = stepsHaystack.value[nextIndex].key;
             if (currentStepIndex.value === (stepsHaystack.value.length - 1)) {
                 emit('finish', data);
 
@@ -131,7 +183,19 @@
             }
         },
         onPrev = (data: any) => {
-            currentStep.value = stepsHaystack.value[currentStepIndex.value - 1].key;
+            let prevKey = stepsHaystack.value[currentStepIndex.value]?.prevKey;
+            let nextIndex = currentStepIndex.value - 1;
+
+            if (typeof prevKey === 'function') prevKey = prevKey();
+            if (typeof prevKey === 'string') {
+                let needle = stepsHaystack.value.findIndex((z) => {
+                    return z.key === prevKey;
+                })
+
+                if (needle > -1) nextIndex = needle;
+            }
+
+            currentStep.value = stepsHaystack.value[nextIndex].key;
             emit('prev', data);
         };
 
@@ -159,11 +223,9 @@
         <lkt-header v-if="header && Object.keys(header).length > 0" v-bind="header" />
 
         <button-nav
-            v-if="computedRenderTopButtonNav"
+            v-if="computedRenderTopButtonNav && computedHasButtonNavContent"
             ref="navRef"
             v-bind="computedButtonNavProps"
-            @prev="onPrev"
-            @next="onNext"
         >
             <template #nav-info="{currentStep, currentStepIndex, amountOfSteps}" v-if="slots['nav-info']">
                 <slot
@@ -189,11 +251,9 @@
         <lkt-loader v-if="isLoading" />
 
         <button-nav
-            v-if="computedRenderBottomButtonNav"
+            v-if="computedRenderBottomButtonNav && computedHasButtonNavContent"
             ref="navRef"
             v-bind="computedButtonNavProps"
-            @prev="onPrev"
-            @next="onNext"
         >
             <template #nav-info="{currentStep, currentStepIndex, amountOfSteps}" v-if="slots['nav-info']">
                 <slot