lkt-step-process 2.0.1 → 2.0.3

package/package.json

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

package/src/components/ButtonNav.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+
+    import { ButtonNavProps } from '../config/ButtonNavProps';
+
+    const props = withDefaults(defineProps<ButtonNavProps>(), {
+
+    });
+
+    const emit = defineEmits(['prev', 'next']);
+</script>
+
+<template>
+    <div class="lkt-step-process-buttons">
+        <lkt-button
+            ref="prevButtonRef"
+            v-if="prevButton"
+            v-show="!isLoading && !prevHidden"
+            v-bind="prevButton"
+            @click="emit('prev')"
+        />
+        <lkt-button
+            ref="nextButtonRef"
+            v-if="nextButton"
+            v-show="!isLoading && !nextHidden"
+            v-bind="nextButton"
+            @click="emit('next')"
+        />
+    </div>
+</template>

package/src/lib-components/LktStepProcess.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
-    import { computed, ref, useSlots, watch } from 'vue';
+    import { computed, onMounted, ref, useSlots, watch } from 'vue';
     import {
         ButtonConfig,
         getDefaultValues,
+        ItemCrudButtonNavPosition,
+        ItemCrudButtonNavVisibility,
         StepProcess,
         StepProcessConfig,
         StepProcessStepConfig,
     } from 'lkt-vue-kernel';
+    import ButtonNav from '@/components/ButtonNav.vue';
+    import { ButtonNavProps } from '@/config/ButtonNavProps';
 
     const props = withDefaults(defineProps<StepProcessConfig>(), getDefaultValues(StepProcess));
 
@@ -47,8 +51,16 @@
             return currentStepIndex.value === 0;
         }),
         computedPrevButton = computed(() => {
+            if (currentStepConfig.value?.prevButton === false) {
+                return false;
+            }
+
+            if (props.prevButton === false && !currentStepConfig.value?.prevButton) {
+                return false;
+            }
+
             let r: ButtonConfig = { ...props.prevButton };
-            if (currentStepConfig.value?.prevButton) {
+            if (typeof currentStepConfig.value?.prevButton === 'object') {
                 r = { ...r, ...currentStepConfig.value?.prevButton };
             }
             if (typeof r.disabled === 'undefined') {
@@ -57,34 +69,64 @@
             return r;
         }),
         computedNextButton = computed(() => {
+            if (currentStepConfig.value?.nextButton === false) {
+                return false;
+            }
+
+            if (props.nextButton === false && !currentStepConfig.value?.nextButton) {
+                return false;
+            }
+
             let r: ButtonConfig = { ...props.nextButton };
-            if (currentStepConfig.value?.nextButton) {
+            if (typeof currentStepConfig.value?.nextButton === 'object') {
                 r = { ...r, ...currentStepConfig.value?.nextButton };
             }
             return r;
         }),
         prevHidden = computed(() => {
-            if (typeof currentStepConfig.value?.prevHidden === 'function') {
-                return currentStepConfig.value.prevHidden(currentStepConfig.value, stepsHaystack.value);
-            }
-            if (typeof currentStepConfig.value?.prevHidden === 'boolean') {
-                return currentStepConfig.value.prevHidden;
+            if (typeof currentStepConfig.value === 'object'){
+                if (typeof currentStepConfig.value?.prevHidden === 'function') {
+                    return currentStepConfig.value.prevHidden(currentStepConfig.value, stepsHaystack.value);
+                }
+                if (typeof currentStepConfig.value?.prevHidden === 'boolean') {
+                    return currentStepConfig.value.prevHidden;
+                }
             }
             return currentStepIndex.value === 0;
         }),
         nextHidden = computed(() => {
-            if (typeof currentStepConfig.value?.nextHidden === 'function') {
-                return currentStepConfig.value.nextHidden(currentStepConfig.value, stepsHaystack.value);
-            }
-            if (typeof currentStepConfig.value?.nextHidden === 'boolean') {
-                return currentStepConfig.value.nextHidden;
+            if (typeof currentStepConfig.value === 'object') {
+                if (typeof currentStepConfig.value?.nextHidden === 'function') {
+                    return currentStepConfig.value.nextHidden(currentStepConfig.value, stepsHaystack.value);
+                }
+                if (typeof currentStepConfig.value?.nextHidden === 'boolean') {
+                    return currentStepConfig.value.nextHidden;
+                }
+                return currentStepConfig.value?.nextButton === false;
             }
-            return currentStepConfig.value.nextButton === false;
+            return true;
         }),
         classes = computed(() => {
             const r = [];
             if (currentStep.value) r.push(`step-${currentStep.value}`);
             return r.join(' ');
+        }),
+        computedRenderTopButtonNav = computed(() => {
+            if (props.buttonNavVisibility === ItemCrudButtonNavVisibility.Never) return false;
+            return !props.buttonNavPosition || props.buttonNavPosition === ItemCrudButtonNavPosition.Top;
+        }),
+        computedRenderBottomButtonNav = computed(() => {
+            if (props.buttonNavVisibility === ItemCrudButtonNavVisibility.Never) return false;
+            return props.buttonNavPosition === ItemCrudButtonNavPosition.Bottom;
+        }),
+        computedButtonNavProps = computed(() => {
+            return <ButtonNavProps>{
+                isLoading: isLoading.value,
+                prevHidden: prevHidden.value,
+                nextHidden: nextHidden.value,
+                prevButton: computedPrevButton.value,
+                nextButton: computedNextButton.value,
+            };
         });
 
     const onNext = (data: any) => {
@@ -114,26 +156,22 @@
         startLoader: () => isLoading.value = true,
         stopLoader: () => isLoading.value = false,
     });
+
+    onMounted(() => {
+        if (!currentStep.value && stepsHaystack.value.length > 0) currentStep.value = stepsHaystack.value[0].key
+    })
 </script>
 
 <template>
     <article class="lkt-step-process" :class="classes">
         <lkt-header v-if="header && Object.keys(header).length > 0" v-bind="header" />
 
-        <div class="lkt-step-process-buttons">
-            <lkt-button
-                ref="prevButtonRef"
-                v-show="!isLoading && !prevHidden"
-                v-bind="computedPrevButton"
-                v-on:click="onPrev"
-            />
-            <lkt-button
-                ref="nextButtonRef"
-                v-show="!isLoading && !nextHidden"
-                v-bind="computedNextButton"
-                v-on:click="onNext"
-            />
-        </div>
+        <button-nav
+            v-if="computedRenderTopButtonNav"
+            v-bind="computedButtonNavProps"
+            @prev="onPrev"
+            @next="onNext"
+        />
 
         <div class="lkt-step-process_content" v-if="!isLoading">
             <div class="lkt-grid-1">
@@ -143,5 +181,12 @@
             </div>
         </div>
         <lkt-loader v-if="isLoading" />
+
+        <button-nav
+            v-if="computedRenderBottomButtonNav"
+            v-bind="computedButtonNavProps"
+            @prev="onPrev"
+            @next="onNext"
+        />
     </article>
 </template>