lkt-step-process 2.0.2 → 2.0.4

package/package.json

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

package/src/components/ButtonNav.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+    import { ButtonNavProps } from '../config/ButtonNavProps';
+    import { SetupContext, useSlots } from 'vue';
+
+    const props = withDefaults(defineProps<ButtonNavProps>(), {
+
+    });
+
+    const emit = defineEmits(['prev', 'next']);
+    const slots: SetupContext['slots'] = useSlots();
+</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')"
+        />
+
+        <template v-if="slots['between-buttons-ever']" v-show="!isLoading">
+            <slot name="between-buttons-ever"/>
+        </template>
+
+
+        <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

@@ -3,10 +3,14 @@
     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));
 
@@ -106,6 +110,23 @@
             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) => {
@@ -145,22 +166,16 @@
     <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-if="computedPrevButton"
-                v-show="!isLoading && !prevHidden"
-                v-bind="computedPrevButton"
-                v-on:click="onPrev"
-            />
-            <lkt-button
-                ref="nextButtonRef"
-                v-if="computedNextButton"
-                v-show="!isLoading && !nextHidden"
-                v-bind="computedNextButton"
-                v-on:click="onNext"
-            />
-        </div>
+        <button-nav
+            v-if="computedRenderTopButtonNav"
+            v-bind="computedButtonNavProps"
+            @prev="onPrev"
+            @next="onNext"
+        >
+            <template #between-buttons-ever="{}" v-if="slots['between-buttons-ever']">
+                <slot name="between-buttons-ever"/>
+            </template>
+        </button-nav>
 
         <div class="lkt-step-process_content" v-if="!isLoading">
             <div class="lkt-grid-1">
@@ -170,5 +185,16 @@
             </div>
         </div>
         <lkt-loader v-if="isLoading" />
+
+        <button-nav
+            v-if="computedRenderBottomButtonNav"
+            v-bind="computedButtonNavProps"
+            @prev="onPrev"
+            @next="onNext"
+        >
+            <template #between-buttons-ever="{}" v-if="slots['between-buttons-ever']">
+                <slot name="between-buttons-ever"/>
+            </template>
+        </button-nav>
     </article>
 </template>