feat(Stepper): add linear prop to enable continuous active state (#33)

Co-authored-by: gretchelin <[email protected]>

docs/components/stepper.md

@@ -21,6 +21,26 @@ import {VStepper} from '@gits-id/ui';
 The `VStepper` component is registered globally when you install with `@gits-id/ui`. So you don't need to import it manually.
 :::
 
+### Linear
+
+- **prop**: `linear`
+- **type**: `boolean`
+- **default**: `default`
+- **required**: `false`
+
+Use `linear` to set the stepper's active state as continuous, meaning to get to next step, previous step must be passed.
+When it is set to `true` previous will also be set as `active`.
+When it is set to `false`, only current step will be set as `active`.
+
+```vue
+<template>
+  <VStepper />
+  <VStepper :linear="true" />
+</template>
+```
+
+<LivePreview src="components-stepper--linear" />
+
 ### Disable Route Active
 
 - **prop**: `disableRouteActive`
@@ -118,6 +138,7 @@ const items = [
 | [disableRouteActive](#disable-route-active) | `voolean` | `false` |
 | [linkable](#linkable)                       | `boolean` | `false` |
 | [vertical](#vertical)                       | `boolean` | `false` |
+| [linear](#linear)                           | `boolean` | `false` |
 
 ## Events
 

packages/steppers/src/Stepper.stories.ts

@@ -2,7 +2,7 @@ import {Args, Story} from '@storybook/vue3';
 import VStepper from './Stepper.vue';
 import vueRouter from 'storybook-vue3-router';
 import {defineComponent, ref, computed, toRefs, PropType} from 'vue';
-import {useRoute, useRouter} from 'vue-router';
+import {useRoute} from 'vue-router';
 
 export default {
   title: 'Components/Stepper',
@@ -18,6 +18,7 @@ export default {
     disableRouteActive: false,
     linkable: false,
     vertical: false,
+    linear: false,
   },
 };
 
@@ -152,6 +153,66 @@ Default.decorators = [
 ];
 
 
+export const Linear = (args:Args) => ({
+  components: {
+    VStepper,
+  },
+  setup() {
+    const val = ref(args?.modelValue || 0);
+
+    const linear = [true, false]
+
+    const nuArgs = {
+      args: linear.map((e) => {
+        return {
+          ...args,
+          modelValue: val,
+          disableRouteActive: true,
+          linear : e,
+        }
+      }),
+      linear
+    }
+
+    const onPrevClick = () => {
+        val.value -= 1;
+    }
+    const onNextClick = () => {
+      val.value += 1;
+    }
+
+    return {args:nuArgs, linear, val, onPrevClick, onNextClick};
+  },
+  template: `
+    <div class="flex flex-col gap-4">
+      <div v-for="(val, idx) in linear">
+        <p class="mb-2">{{val ? 'Linear' : 'Non-linear'}}</p>
+        <v-stepper v-bind="args.args[idx]"/>
+      </div>
+
+      <div class="flex gap-4 my-4 items-center justify-center">
+        <button class="border-[1px] border-gray-400 p-2" @click="onPrevClick">
+          Prev
+        </button>
+        <button class="border-[1px] border-gray-400 p-2" @click="onNextClick">
+          Next
+        </button>
+      </div>
+    </div>
+  `,
+});
+Linear.parameters = {
+  docs: {
+    source: {
+      code: `
+<v-steppers />
+<v-steppers :linear="true" />
+      `,
+    },
+  },
+};
+
+
 export const DisableRouteActive = Template.bind({});
 DisableRouteActive.args = {
   disableRouteActive: true,

packages/steppers/src/Stepper.vue

@@ -10,6 +10,7 @@ type Props = {
   disableRouteActive?: boolean;
   linkable?: boolean;
   vertical?: boolean;
+  linear?:boolean
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -18,6 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
   disableRouteActive: false,
   linkable: false,
   vertical: false,
+  linear: false,
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -67,7 +69,7 @@ if (!disableRouteActive.value) {
       <StepperItem
         :item="item"
         :index="idx"
-        :active="activeIndex === idx"
+        :active="linear ? activeIndex >= idx : activeIndex === idx"
         :as="tag"
         :vertical="vertical"
       />