@appsbd/vue3-elite-wizard

A vue3 widget plugin

Usage

You can install it using npm install @appsbd/vue3-elite-wizard --save

• Composition API
• Option API

Code Sample

<EliteWizard  header-class="p-2"  @close="onClose" class="mb-3"  
              :before-prev="beforePrevCheck" 
              :before-next="beforeNextCheck" 
              :before-finish="beforeFinish" 
              @finished="finished">
  
  <EliteWizardContent title="Step 1">Test 1</EliteWizardContent>
  <EliteWizardContent icon="t" title="Step 2">Test 2 </EliteWizardContent>
  <EliteWizardContent  title="Step 3">Test 3</EliteWizardContent>
  <EliteWizardContent  title="Step 4">Test 4</EliteWizardContent>
</EliteWizard>

Composition API Method

<script setup>
  import EliteWizard from "@appsbd/vue3-elite-wizard";
  import {EliteWizardContent} from "@appsbd/vue3-elite-wizard";
  
  const onClose =() =>{
    console.log("Closed called");
  }
  const beforeNextCheck =async (params) =>{
    // It will call before next content, 
    // You can be valid your content here.
    return true;
  };
  const beforePrevCheck =async (params) =>{
    // It will call before previous content.
    // You can be valid your content here.
    return true;
  };
  const beforeFinish =async (params) =>{
    // It will called before finish.
    // You can be valid your content here.
    return true;
  };
  const finished =async (params) =>{
    //it will call on finish
    return true;
  };   
</script>

Option API Method

import EliteWizard from "@appsbd/vue3-elite-wizard";
import {EliteWizardContent} from "@appsbd/vue3-elite-wizard";
export default {
    components: {EliteWizard,EliteWizardContent},
    methods:{
        onClose(){
            console.log("Closed called");
        },
        async beforeNextCheck(params) { 
            // It will called before next content, 
            // You can be valid your content here.
            return true;
        },
        async beforePrevCheck(params){   
            // It will call before previous content.
            // You can be valid your content here.
            return true;
        },
        async beforeFinish(params){
            // It will call before finish.
            // You can be valid your content here.
            return true;
        },
        async finished(){
            //it will call on finish
            return true;
        },
    }
}

css Variable

.apbd-ew-panel {
  --ew-base-color: #69b546;
  --ew-base-inactive-color: #ccc;
  --ew-circle-size: 60px;
  --ew-circle-complete-color: var(--ew-base-color);
  --ew-circle-inactive-color: var(--ew-base-inactive-color);
  --ew-step-border-width: 4px;
  --ew-btn-border-radius: 5px;
  --ew-btn-padding: 0.35rem 0.775rem;
  --ew-btn-bg: var(--ew-base-inactive-color);
  --ew-btn-bg-success: var(--ew-base-color);
}

See the website for full API documentation.