@smart-wizard/vue 0.0.0-stage → 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Dipu Rajendran
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,65 @@
-# Temporary Holding Version
+# @smart-wizard/vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**Official Vue 3 adapter for SmartWizard.**  
+Composable (`useSmartWizard`) with reactive step info, controls, and loading state.
+
+> This package is part of the **[SmartWizard](https://github.com/techlab/smart-wizard)** project, the next-generation continuation of the popular jQuery SmartWizard.
+
+---
+
+## 📖 Documentation & Links
+
+* 📚 **Full Vue Documentation & Examples**: [GitHub Readme](https://github.com/techlab/smart-wizard#-vue-adapter)
+* 🌐 **Official Website & Demos**: [techlaboratory.net/smart-wizard](https://techlaboratory.net/smart-wizard)
+* 🐙 **Repository**: [github.com/techlab/smart-wizard](https://github.com/techlab/smart-wizard)
+* 🐛 **Issue Tracker**: [github.com/techlab/smart-wizard/issues](https://github.com/techlab/smart-wizard/issues)
+
+---
+
+## 📥 Installation
+
+```bash
+npm install @smart-wizard/vue @smart-wizard/core @smart-wizard/ui
+```
+
+---
+
+## ⚡ Quick Example
+
+```vue
+<template>
+  <div ref="wizardRef" id="wizard">
+    <nav class="sw-nav" role="tablist">
+      <div class="sw-nav-item" role="tab"><span class="title">Step 1</span></div>
+      <div class="sw-nav-item" role="tab"><span class="title">Step 2</span></div>
+    </nav>
+    <div class="sw-panels">
+      <section class="sw-panel" id="step-1" role="tabpanel">Step 1 Content</section>
+      <section class="sw-panel" id="step-2" role="tabpanel">Step 2 Content</section>
+    </div>
+    <div class="sw-toolbar">
+      <button @click="prev">Back</button>
+      <button @click="next">Next</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useSmartWizard } from '@smart-wizard/vue';
+import '@smart-wizard/ui/full';
+import '@smart-wizard/ui/themes/arrows.css';
+
+const wizardRef = ref<HTMLElement | null>(null);
+const { next, prev, stepInfo } = useSmartWizard(wizardRef, {
+  theme: 'arrows',
+  transition: { effect: 'slideHorizontal' },
+});
+</script>
+```
+
+---
+
+## 📝 License
+
+Dual-licensed under [MIT](https://github.com/techlab/smart-wizard/blob/main/LICENSE) (open-source) and [Commercial License](https://techlaboratory.net/smart-wizard#license).

package/dist/index.d.mts

@@ -0,0 +1,427 @@
+import * as vue from 'vue';
+import { Ref } from 'vue';
+import * as _smart_wizard_core from '@smart-wizard/core';
+import { WizardOptions, WizardInfo, SmartWizard } from '@smart-wizard/core';
+
+declare function useSmartWizard(containerRef: Ref<HTMLElement | null>, options: Partial<WizardOptions>): {
+    info: Ref<{
+        stepInfo: {
+            currentStep: number;
+            totalSteps: number;
+        };
+        contentDirection: _smart_wizard_core.ContentDirection;
+        layout: _smart_wizard_core.WizardLayout;
+        colorScheme: _smart_wizard_core.ColorScheme;
+        width: number;
+        height: number;
+    }, WizardInfo | {
+        stepInfo: {
+            currentStep: number;
+            totalSteps: number;
+        };
+        contentDirection: _smart_wizard_core.ContentDirection;
+        layout: _smart_wizard_core.WizardLayout;
+        colorScheme: _smart_wizard_core.ColorScheme;
+        width: number;
+        height: number;
+    }>;
+    stepInfo: vue.ComputedRef<{
+        currentStep: number;
+        totalSteps: number;
+    }>;
+    next: () => void | undefined;
+    prev: () => void | undefined;
+    first: () => void | undefined;
+    last: () => void | undefined;
+    goTo: (index: number, force?: boolean) => void | undefined;
+    reset: () => void | undefined;
+    destroy: () => void | undefined;
+    setOptions: (opts: Parameters<NonNullable<{
+        readonly main: HTMLElement;
+        container: HTMLElement;
+        stepItems: {
+            step: HTMLElement;
+            page: HTMLElement;
+        }[];
+        readonly id: string;
+        extend: (...exts: _smart_wizard_core.WizardExtension[]) => SmartWizard;
+        readonly activeIndex: number;
+        readonly stepLength: number;
+        step: (index: number) => _smart_wizard_core.WizardStep;
+        steps: (indexes?: number[]) => _smart_wizard_core.WizardStepCollection;
+        readonly activeStep: {
+            readonly index: number;
+            readonly element: HTMLElement;
+            readonly page: HTMLElement;
+            hasState: (state: _smart_wizard_core.StepState) => boolean;
+            isActive: () => boolean;
+            isDisabled: () => boolean;
+            isCompleted: () => boolean;
+            isHidden: () => boolean;
+            state: (s: _smart_wizard_core.StepState) => _smart_wizard_core.WizardStep;
+            removeState: (s: _smart_wizard_core.StepState) => _smart_wizard_core.WizardStep;
+            reset: () => _smart_wizard_core.WizardStep;
+            disable: () => _smart_wizard_core.WizardStep;
+            enable: () => _smart_wizard_core.WizardStep;
+            complete: () => _smart_wizard_core.WizardStep;
+            warning: () => _smart_wizard_core.WizardStep;
+            error: () => _smart_wizard_core.WizardStep;
+            show: () => _smart_wizard_core.WizardStep;
+            hide: () => _smart_wizard_core.WizardStep;
+        };
+        readonly progress: number;
+        readonly canGoNext: boolean;
+        readonly canGoPrev: boolean;
+        readonly options: {
+            readonly initialStep: number;
+            readonly theme: string;
+            readonly colorScheme: _smart_wizard_core.ColorScheme;
+            readonly layout: _smart_wizard_core.WizardLayout;
+            readonly color: _smart_wizard_core.WizardColor;
+            readonly behavior: {
+                autoHeight: boolean;
+                useUrlHash: boolean;
+                supportBrowserHistory: boolean;
+            };
+            readonly navigation: {
+                enabled: boolean;
+                alwaysClickable: boolean;
+                completed: {
+                    enabled: boolean;
+                    completeAllPreviousSteps: boolean;
+                    clearOnBack: boolean;
+                    clickable: boolean;
+                };
+            };
+            readonly transition: {
+                effect: "default" | "none" | "fade" | "slideHorizontal" | "slideVertical" | "slideSwing" | "css" | string;
+                speed: number;
+                easing: string;
+                css: {
+                    prefix: string;
+                    forward: {
+                        show: string;
+                        hide: string;
+                    };
+                    backward: {
+                        show: string;
+                        hide: string;
+                    };
+                };
+            };
+            readonly keyboardNavigation: {
+                enabled: boolean;
+                keys: {
+                    left: string[];
+                    right: string[];
+                };
+            };
+            readonly stepStates: {
+                completed: number[];
+                disabled: number[];
+                hidden: number[];
+                error: number[];
+                warning: number[];
+            };
+            readonly swipeNavigation: {
+                enabled: boolean;
+                threshold: number;
+            };
+            readonly scrollToView: boolean;
+            readonly contentLoader: _smart_wizard_core.ContentLoader | null;
+        };
+        readonly width: number;
+        readonly height: number;
+        readonly info: {
+            stepInfo: {
+                currentStep: number;
+                totalSteps: number;
+            };
+            contentDirection: _smart_wizard_core.ContentDirection;
+            layout: _smart_wizard_core.WizardLayout;
+            colorScheme: _smart_wizard_core.ColorScheme;
+            width: number;
+            height: number;
+        };
+        next: () => void;
+        prev: () => void;
+        first: () => void;
+        last: () => void;
+        goTo: (stepIndex: number, options?: {
+            force?: boolean;
+        }) => void;
+        reset: () => void;
+        setOptions: (options: Partial<WizardOptions>) => void;
+        getOptions: () => WizardOptions;
+        readonly loader: {
+            show: () => void;
+            hide: () => void;
+        };
+        updateHeight: () => void;
+        on: <K extends keyof _smart_wizard_core.WizardEvents>(eventName: K, callback: _smart_wizard_core.EventCallback<_smart_wizard_core.WizardEvents[K]>) => SmartWizard;
+        off: <K extends keyof _smart_wizard_core.WizardEvents>(eventName: K, callback?: _smart_wizard_core.EventCallback<_smart_wizard_core.WizardEvents[K]> | undefined) => SmartWizard;
+        once: <K extends keyof _smart_wizard_core.WizardEvents>(eventName: K, callback: _smart_wizard_core.EventCallback<_smart_wizard_core.WizardEvents[K]>) => SmartWizard;
+        destroy: () => void;
+    } | null>["setOptions"]>[0]) => void | undefined;
+    getOptions: () => WizardOptions | undefined;
+    updateHeight: () => void | undefined;
+    loader: {
+        show: () => void | undefined;
+        hide: () => void | undefined;
+    };
+    wizard: Ref<{
+        readonly main: HTMLElement;
+        container: HTMLElement;
+        stepItems: {
+            step: HTMLElement;
+            page: HTMLElement;
+        }[];
+        readonly id: string;
+        extend: (...exts: _smart_wizard_core.WizardExtension[]) => SmartWizard;
+        readonly activeIndex: number;
+        readonly stepLength: number;
+        step: (index: number) => _smart_wizard_core.WizardStep;
+        steps: (indexes?: number[]) => _smart_wizard_core.WizardStepCollection;
+        readonly activeStep: {
+            readonly index: number;
+            readonly element: HTMLElement;
+            readonly page: HTMLElement;
+            hasState: (state: _smart_wizard_core.StepState) => boolean;
+            isActive: () => boolean;
+            isDisabled: () => boolean;
+            isCompleted: () => boolean;
+            isHidden: () => boolean;
+            state: (s: _smart_wizard_core.StepState) => _smart_wizard_core.WizardStep;
+            removeState: (s: _smart_wizard_core.StepState) => _smart_wizard_core.WizardStep;
+            reset: () => _smart_wizard_core.WizardStep;
+            disable: () => _smart_wizard_core.WizardStep;
+            enable: () => _smart_wizard_core.WizardStep;
+            complete: () => _smart_wizard_core.WizardStep;
+            warning: () => _smart_wizard_core.WizardStep;
+            error: () => _smart_wizard_core.WizardStep;
+            show: () => _smart_wizard_core.WizardStep;
+            hide: () => _smart_wizard_core.WizardStep;
+        };
+        readonly progress: number;
+        readonly canGoNext: boolean;
+        readonly canGoPrev: boolean;
+        readonly options: {
+            readonly initialStep: number;
+            readonly theme: string;
+            readonly colorScheme: _smart_wizard_core.ColorScheme;
+            readonly layout: _smart_wizard_core.WizardLayout;
+            readonly color: _smart_wizard_core.WizardColor;
+            readonly behavior: {
+                autoHeight: boolean;
+                useUrlHash: boolean;
+                supportBrowserHistory: boolean;
+            };
+            readonly navigation: {
+                enabled: boolean;
+                alwaysClickable: boolean;
+                completed: {
+                    enabled: boolean;
+                    completeAllPreviousSteps: boolean;
+                    clearOnBack: boolean;
+                    clickable: boolean;
+                };
+            };
+            readonly transition: {
+                effect: "default" | "none" | "fade" | "slideHorizontal" | "slideVertical" | "slideSwing" | "css" | string;
+                speed: number;
+                easing: string;
+                css: {
+                    prefix: string;
+                    forward: {
+                        show: string;
+                        hide: string;
+                    };
+                    backward: {
+                        show: string;
+                        hide: string;
+                    };
+                };
+            };
+            readonly keyboardNavigation: {
+                enabled: boolean;
+                keys: {
+                    left: string[];
+                    right: string[];
+                };
+            };
+            readonly stepStates: {
+                completed: number[];
+                disabled: number[];
+                hidden: number[];
+                error: number[];
+                warning: number[];
+            };
+            readonly swipeNavigation: {
+                enabled: boolean;
+                threshold: number;
+            };
+            readonly scrollToView: boolean;
+            readonly contentLoader: _smart_wizard_core.ContentLoader | null;
+        };
+        readonly width: number;
+        readonly height: number;
+        readonly info: {
+            stepInfo: {
+                currentStep: number;
+                totalSteps: number;
+            };
+            contentDirection: _smart_wizard_core.ContentDirection;
+            layout: _smart_wizard_core.WizardLayout;
+            colorScheme: _smart_wizard_core.ColorScheme;
+            width: number;
+            height: number;
+        };
+        next: () => void;
+        prev: () => void;
+        first: () => void;
+        last: () => void;
+        goTo: (stepIndex: number, options?: {
+            force?: boolean;
+        }) => void;
+        reset: () => void;
+        setOptions: (options: Partial<WizardOptions>) => void;
+        getOptions: () => WizardOptions;
+        readonly loader: {
+            show: () => void;
+            hide: () => void;
+        };
+        updateHeight: () => void;
+        on: <K extends keyof _smart_wizard_core.WizardEvents>(eventName: K, callback: _smart_wizard_core.EventCallback<_smart_wizard_core.WizardEvents[K]>) => SmartWizard;
+        off: <K extends keyof _smart_wizard_core.WizardEvents>(eventName: K, callback?: _smart_wizard_core.EventCallback<_smart_wizard_core.WizardEvents[K]> | undefined) => SmartWizard;
+        once: <K extends keyof _smart_wizard_core.WizardEvents>(eventName: K, callback: _smart_wizard_core.EventCallback<_smart_wizard_core.WizardEvents[K]>) => SmartWizard;
+        destroy: () => void;
+    } | null, SmartWizard | {
+        readonly main: HTMLElement;
+        container: HTMLElement;
+        stepItems: {
+            step: HTMLElement;
+            page: HTMLElement;
+        }[];
+        readonly id: string;
+        extend: (...exts: _smart_wizard_core.WizardExtension[]) => SmartWizard;
+        readonly activeIndex: number;
+        readonly stepLength: number;
+        step: (index: number) => _smart_wizard_core.WizardStep;
+        steps: (indexes?: number[]) => _smart_wizard_core.WizardStepCollection;
+        readonly activeStep: {
+            readonly index: number;
+            readonly element: HTMLElement;
+            readonly page: HTMLElement;
+            hasState: (state: _smart_wizard_core.StepState) => boolean;
+            isActive: () => boolean;
+            isDisabled: () => boolean;
+            isCompleted: () => boolean;
+            isHidden: () => boolean;
+            state: (s: _smart_wizard_core.StepState) => _smart_wizard_core.WizardStep;
+            removeState: (s: _smart_wizard_core.StepState) => _smart_wizard_core.WizardStep;
+            reset: () => _smart_wizard_core.WizardStep;
+            disable: () => _smart_wizard_core.WizardStep;
+            enable: () => _smart_wizard_core.WizardStep;
+            complete: () => _smart_wizard_core.WizardStep;
+            warning: () => _smart_wizard_core.WizardStep;
+            error: () => _smart_wizard_core.WizardStep;
+            show: () => _smart_wizard_core.WizardStep;
+            hide: () => _smart_wizard_core.WizardStep;
+        };
+        readonly progress: number;
+        readonly canGoNext: boolean;
+        readonly canGoPrev: boolean;
+        readonly options: {
+            readonly initialStep: number;
+            readonly theme: string;
+            readonly colorScheme: _smart_wizard_core.ColorScheme;
+            readonly layout: _smart_wizard_core.WizardLayout;
+            readonly color: _smart_wizard_core.WizardColor;
+            readonly behavior: {
+                autoHeight: boolean;
+                useUrlHash: boolean;
+                supportBrowserHistory: boolean;
+            };
+            readonly navigation: {
+                enabled: boolean;
+                alwaysClickable: boolean;
+                completed: {
+                    enabled: boolean;
+                    completeAllPreviousSteps: boolean;
+                    clearOnBack: boolean;
+                    clickable: boolean;
+                };
+            };
+            readonly transition: {
+                effect: "default" | "none" | "fade" | "slideHorizontal" | "slideVertical" | "slideSwing" | "css" | string;
+                speed: number;
+                easing: string;
+                css: {
+                    prefix: string;
+                    forward: {
+                        show: string;
+                        hide: string;
+                    };
+                    backward: {
+                        show: string;
+                        hide: string;
+                    };
+                };
+            };
+            readonly keyboardNavigation: {
+                enabled: boolean;
+                keys: {
+                    left: string[];
+                    right: string[];
+                };
+            };
+            readonly stepStates: {
+                completed: number[];
+                disabled: number[];
+                hidden: number[];
+                error: number[];
+                warning: number[];
+            };
+            readonly swipeNavigation: {
+                enabled: boolean;
+                threshold: number;
+            };
+            readonly scrollToView: boolean;
+            readonly contentLoader: _smart_wizard_core.ContentLoader | null;
+        };
+        readonly width: number;
+        readonly height: number;
+        readonly info: {
+            stepInfo: {
+                currentStep: number;
+                totalSteps: number;
+            };
+            contentDirection: _smart_wizard_core.ContentDirection;
+            layout: _smart_wizard_core.WizardLayout;
+            colorScheme: _smart_wizard_core.ColorScheme;
+            width: number;
+            height: number;
+        };
+        next: () => void;
+        prev: () => void;
+        first: () => void;
+        last: () => void;
+        goTo: (stepIndex: number, options?: {
+            force?: boolean;
+        }) => void;
+        reset: () => void;
+        setOptions: (options: Partial<WizardOptions>) => void;
+        getOptions: () => WizardOptions;
+        readonly loader: {
+            show: () => void;
+            hide: () => void;
+        };
+        updateHeight: () => void;
+        on: <K extends keyof _smart_wizard_core.WizardEvents>(eventName: K, callback: _smart_wizard_core.EventCallback<_smart_wizard_core.WizardEvents[K]>) => SmartWizard;
+        off: <K extends keyof _smart_wizard_core.WizardEvents>(eventName: K, callback?: _smart_wizard_core.EventCallback<_smart_wizard_core.WizardEvents[K]> | undefined) => SmartWizard;
+        once: <K extends keyof _smart_wizard_core.WizardEvents>(eventName: K, callback: _smart_wizard_core.EventCallback<_smart_wizard_core.WizardEvents[K]>) => SmartWizard;
+        destroy: () => void;
+    } | null>;
+};
+
+export { useSmartWizard };

package/dist/index.d.ts

@@ -0,0 +1,427 @@
+import * as vue from 'vue';
+import { Ref } from 'vue';
+import * as _smart_wizard_core from '@smart-wizard/core';
+import { WizardOptions, WizardInfo, SmartWizard } from '@smart-wizard/core';
+
+declare function useSmartWizard(containerRef: Ref<HTMLElement | null>, options: Partial<WizardOptions>): {
+    info: Ref<{
+        stepInfo: {
+            currentStep: number;
+            totalSteps: number;
+        };
+        contentDirection: _smart_wizard_core.ContentDirection;
+        layout: _smart_wizard_core.WizardLayout;
+        colorScheme: _smart_wizard_core.ColorScheme;
+        width: number;
+        height: number;
+    }, WizardInfo | {
+        stepInfo: {
+            currentStep: number;
+            totalSteps: number;
+        };
+        contentDirection: _smart_wizard_core.ContentDirection;
+        layout: _smart_wizard_core.WizardLayout;
+        colorScheme: _smart_wizard_core.ColorScheme;
+        width: number;
+        height: number;
+    }>;
+    stepInfo: vue.ComputedRef<{
+        currentStep: number;
+        totalSteps: number;
+    }>;
+    next: () => void | undefined;
+    prev: () => void | undefined;
+    first: () => void | undefined;
+    last: () => void | undefined;
+    goTo: (index: number, force?: boolean) => void | undefined;
+    reset: () => void | undefined;
+    destroy: () => void | undefined;
+    setOptions: (opts: Parameters<NonNullable<{
+        readonly main: HTMLElement;
+        container: HTMLElement;
+        stepItems: {
+            step: HTMLElement;
+            page: HTMLElement;
+        }[];
+        readonly id: string;
+        extend: (...exts: _smart_wizard_core.WizardExtension[]) => SmartWizard;
+        readonly activeIndex: number;
+        readonly stepLength: number;
+        step: (index: number) => _smart_wizard_core.WizardStep;
+        steps: (indexes?: number[]) => _smart_wizard_core.WizardStepCollection;
+        readonly activeStep: {
+            readonly index: number;
+            readonly element: HTMLElement;
+            readonly page: HTMLElement;
+            hasState: (state: _smart_wizard_core.StepState) => boolean;
+            isActive: () => boolean;
+            isDisabled: () => boolean;
+            isCompleted: () => boolean;
+            isHidden: () => boolean;
+            state: (s: _smart_wizard_core.StepState) => _smart_wizard_core.WizardStep;
+            removeState: (s: _smart_wizard_core.StepState) => _smart_wizard_core.WizardStep;
+            reset: () => _smart_wizard_core.WizardStep;
+            disable: () => _smart_wizard_core.WizardStep;
+            enable: () => _smart_wizard_core.WizardStep;
+            complete: () => _smart_wizard_core.WizardStep;
+            warning: () => _smart_wizard_core.WizardStep;
+            error: () => _smart_wizard_core.WizardStep;
+            show: () => _smart_wizard_core.WizardStep;
+            hide: () => _smart_wizard_core.WizardStep;
+        };
+        readonly progress: number;
+        readonly canGoNext: boolean;
+        readonly canGoPrev: boolean;
+        readonly options: {
+            readonly initialStep: number;
+            readonly theme: string;
+            readonly colorScheme: _smart_wizard_core.ColorScheme;
+            readonly layout: _smart_wizard_core.WizardLayout;
+            readonly color: _smart_wizard_core.WizardColor;
+            readonly behavior: {
+                autoHeight: boolean;
+                useUrlHash: boolean;
+                supportBrowserHistory: boolean;
+            };
+            readonly navigation: {
+                enabled: boolean;
+                alwaysClickable: boolean;
+                completed: {
+                    enabled: boolean;
+                    completeAllPreviousSteps: boolean;
+                    clearOnBack: boolean;
+                    clickable: boolean;
+                };
+            };
+            readonly transition: {
+                effect: "default" | "none" | "fade" | "slideHorizontal" | "slideVertical" | "slideSwing" | "css" | string;
+                speed: number;
+                easing: string;
+                css: {
+                    prefix: string;
+                    forward: {
+                        show: string;
+                        hide: string;
+                    };
+                    backward: {
+                        show: string;
+                        hide: string;
+                    };
+                };
+            };
+            readonly keyboardNavigation: {
+                enabled: boolean;
+                keys: {
+                    left: string[];
+                    right: string[];
+                };
+            };
+            readonly stepStates: {
+                completed: number[];
+                disabled: number[];
+                hidden: number[];
+                error: number[];
+                warning: number[];
+            };
+            readonly swipeNavigation: {
+                enabled: boolean;
+                threshold: number;
+            };
+            readonly scrollToView: boolean;
+            readonly contentLoader: _smart_wizard_core.ContentLoader | null;
+        };
+        readonly width: number;
+        readonly height: number;
+        readonly info: {
+            stepInfo: {
+                currentStep: number;
+                totalSteps: number;
+            };
+            contentDirection: _smart_wizard_core.ContentDirection;
+            layout: _smart_wizard_core.WizardLayout;
+            colorScheme: _smart_wizard_core.ColorScheme;
+            width: number;
+            height: number;
+        };
+        next: () => void;
+        prev: () => void;
+        first: () => void;
+        last: () => void;
+        goTo: (stepIndex: number, options?: {
+            force?: boolean;
+        }) => void;
+        reset: () => void;
+        setOptions: (options: Partial<WizardOptions>) => void;
+        getOptions: () => WizardOptions;
+        readonly loader: {
+            show: () => void;
+            hide: () => void;
+        };
+        updateHeight: () => void;
+        on: <K extends keyof _smart_wizard_core.WizardEvents>(eventName: K, callback: _smart_wizard_core.EventCallback<_smart_wizard_core.WizardEvents[K]>) => SmartWizard;
+        off: <K extends keyof _smart_wizard_core.WizardEvents>(eventName: K, callback?: _smart_wizard_core.EventCallback<_smart_wizard_core.WizardEvents[K]> | undefined) => SmartWizard;
+        once: <K extends keyof _smart_wizard_core.WizardEvents>(eventName: K, callback: _smart_wizard_core.EventCallback<_smart_wizard_core.WizardEvents[K]>) => SmartWizard;
+        destroy: () => void;
+    } | null>["setOptions"]>[0]) => void | undefined;
+    getOptions: () => WizardOptions | undefined;
+    updateHeight: () => void | undefined;
+    loader: {
+        show: () => void | undefined;
+        hide: () => void | undefined;
+    };
+    wizard: Ref<{
+        readonly main: HTMLElement;
+        container: HTMLElement;
+        stepItems: {
+            step: HTMLElement;
+            page: HTMLElement;
+        }[];
+        readonly id: string;
+        extend: (...exts: _smart_wizard_core.WizardExtension[]) => SmartWizard;
+        readonly activeIndex: number;
+        readonly stepLength: number;
+        step: (index: number) => _smart_wizard_core.WizardStep;
+        steps: (indexes?: number[]) => _smart_wizard_core.WizardStepCollection;
+        readonly activeStep: {
+            readonly index: number;
+            readonly element: HTMLElement;
+            readonly page: HTMLElement;
+            hasState: (state: _smart_wizard_core.StepState) => boolean;
+            isActive: () => boolean;
+            isDisabled: () => boolean;
+            isCompleted: () => boolean;
+            isHidden: () => boolean;
+            state: (s: _smart_wizard_core.StepState) => _smart_wizard_core.WizardStep;
+            removeState: (s: _smart_wizard_core.StepState) => _smart_wizard_core.WizardStep;
+            reset: () => _smart_wizard_core.WizardStep;
+            disable: () => _smart_wizard_core.WizardStep;
+            enable: () => _smart_wizard_core.WizardStep;
+            complete: () => _smart_wizard_core.WizardStep;
+            warning: () => _smart_wizard_core.WizardStep;
+            error: () => _smart_wizard_core.WizardStep;
+            show: () => _smart_wizard_core.WizardStep;
+            hide: () => _smart_wizard_core.WizardStep;
+        };
+        readonly progress: number;
+        readonly canGoNext: boolean;
+        readonly canGoPrev: boolean;
+        readonly options: {
+            readonly initialStep: number;
+            readonly theme: string;
+            readonly colorScheme: _smart_wizard_core.ColorScheme;
+            readonly layout: _smart_wizard_core.WizardLayout;
+            readonly color: _smart_wizard_core.WizardColor;
+            readonly behavior: {
+                autoHeight: boolean;
+                useUrlHash: boolean;
+                supportBrowserHistory: boolean;
+            };
+            readonly navigation: {
+                enabled: boolean;
+                alwaysClickable: boolean;
+                completed: {
+                    enabled: boolean;
+                    completeAllPreviousSteps: boolean;
+                    clearOnBack: boolean;
+                    clickable: boolean;
+                };
+            };
+            readonly transition: {
+                effect: "default" | "none" | "fade" | "slideHorizontal" | "slideVertical" | "slideSwing" | "css" | string;
+                speed: number;
+                easing: string;
+                css: {
+                    prefix: string;
+                    forward: {
+                        show: string;
+                        hide: string;
+                    };
+                    backward: {
+                        show: string;
+                        hide: string;
+                    };
+                };
+            };
+            readonly keyboardNavigation: {
+                enabled: boolean;
+                keys: {
+                    left: string[];
+                    right: string[];
+                };
+            };
+            readonly stepStates: {
+                completed: number[];
+                disabled: number[];
+                hidden: number[];
+                error: number[];
+                warning: number[];
+            };
+            readonly swipeNavigation: {
+                enabled: boolean;
+                threshold: number;
+            };
+            readonly scrollToView: boolean;
+            readonly contentLoader: _smart_wizard_core.ContentLoader | null;
+        };
+        readonly width: number;
+        readonly height: number;
+        readonly info: {
+            stepInfo: {
+                currentStep: number;
+                totalSteps: number;
+            };
+            contentDirection: _smart_wizard_core.ContentDirection;
+            layout: _smart_wizard_core.WizardLayout;
+            colorScheme: _smart_wizard_core.ColorScheme;
+            width: number;
+            height: number;
+        };
+        next: () => void;
+        prev: () => void;
+        first: () => void;
+        last: () => void;
+        goTo: (stepIndex: number, options?: {
+            force?: boolean;
+        }) => void;
+        reset: () => void;
+        setOptions: (options: Partial<WizardOptions>) => void;
+        getOptions: () => WizardOptions;
+        readonly loader: {
+            show: () => void;
+            hide: () => void;
+        };
+        updateHeight: () => void;
+        on: <K extends keyof _smart_wizard_core.WizardEvents>(eventName: K, callback: _smart_wizard_core.EventCallback<_smart_wizard_core.WizardEvents[K]>) => SmartWizard;
+        off: <K extends keyof _smart_wizard_core.WizardEvents>(eventName: K, callback?: _smart_wizard_core.EventCallback<_smart_wizard_core.WizardEvents[K]> | undefined) => SmartWizard;
+        once: <K extends keyof _smart_wizard_core.WizardEvents>(eventName: K, callback: _smart_wizard_core.EventCallback<_smart_wizard_core.WizardEvents[K]>) => SmartWizard;
+        destroy: () => void;
+    } | null, SmartWizard | {
+        readonly main: HTMLElement;
+        container: HTMLElement;
+        stepItems: {
+            step: HTMLElement;
+            page: HTMLElement;
+        }[];
+        readonly id: string;
+        extend: (...exts: _smart_wizard_core.WizardExtension[]) => SmartWizard;
+        readonly activeIndex: number;
+        readonly stepLength: number;
+        step: (index: number) => _smart_wizard_core.WizardStep;
+        steps: (indexes?: number[]) => _smart_wizard_core.WizardStepCollection;
+        readonly activeStep: {
+            readonly index: number;
+            readonly element: HTMLElement;
+            readonly page: HTMLElement;
+            hasState: (state: _smart_wizard_core.StepState) => boolean;
+            isActive: () => boolean;
+            isDisabled: () => boolean;
+            isCompleted: () => boolean;
+            isHidden: () => boolean;
+            state: (s: _smart_wizard_core.StepState) => _smart_wizard_core.WizardStep;
+            removeState: (s: _smart_wizard_core.StepState) => _smart_wizard_core.WizardStep;
+            reset: () => _smart_wizard_core.WizardStep;
+            disable: () => _smart_wizard_core.WizardStep;
+            enable: () => _smart_wizard_core.WizardStep;
+            complete: () => _smart_wizard_core.WizardStep;
+            warning: () => _smart_wizard_core.WizardStep;
+            error: () => _smart_wizard_core.WizardStep;
+            show: () => _smart_wizard_core.WizardStep;
+            hide: () => _smart_wizard_core.WizardStep;
+        };
+        readonly progress: number;
+        readonly canGoNext: boolean;
+        readonly canGoPrev: boolean;
+        readonly options: {
+            readonly initialStep: number;
+            readonly theme: string;
+            readonly colorScheme: _smart_wizard_core.ColorScheme;
+            readonly layout: _smart_wizard_core.WizardLayout;
+            readonly color: _smart_wizard_core.WizardColor;
+            readonly behavior: {
+                autoHeight: boolean;
+                useUrlHash: boolean;
+                supportBrowserHistory: boolean;
+            };
+            readonly navigation: {
+                enabled: boolean;
+                alwaysClickable: boolean;
+                completed: {
+                    enabled: boolean;
+                    completeAllPreviousSteps: boolean;
+                    clearOnBack: boolean;
+                    clickable: boolean;
+                };
+            };
+            readonly transition: {
+                effect: "default" | "none" | "fade" | "slideHorizontal" | "slideVertical" | "slideSwing" | "css" | string;
+                speed: number;
+                easing: string;
+                css: {
+                    prefix: string;
+                    forward: {
+                        show: string;
+                        hide: string;
+                    };
+                    backward: {
+                        show: string;
+                        hide: string;
+                    };
+                };
+            };
+            readonly keyboardNavigation: {
+                enabled: boolean;
+                keys: {
+                    left: string[];
+                    right: string[];
+                };
+            };
+            readonly stepStates: {
+                completed: number[];
+                disabled: number[];
+                hidden: number[];
+                error: number[];
+                warning: number[];
+            };
+            readonly swipeNavigation: {
+                enabled: boolean;
+                threshold: number;
+            };
+            readonly scrollToView: boolean;
+            readonly contentLoader: _smart_wizard_core.ContentLoader | null;
+        };
+        readonly width: number;
+        readonly height: number;
+        readonly info: {
+            stepInfo: {
+                currentStep: number;
+                totalSteps: number;
+            };
+            contentDirection: _smart_wizard_core.ContentDirection;
+            layout: _smart_wizard_core.WizardLayout;
+            colorScheme: _smart_wizard_core.ColorScheme;
+            width: number;
+            height: number;
+        };
+        next: () => void;
+        prev: () => void;
+        first: () => void;
+        last: () => void;
+        goTo: (stepIndex: number, options?: {
+            force?: boolean;
+        }) => void;
+        reset: () => void;
+        setOptions: (options: Partial<WizardOptions>) => void;
+        getOptions: () => WizardOptions;
+        readonly loader: {
+            show: () => void;
+            hide: () => void;
+        };
+        updateHeight: () => void;
+        on: <K extends keyof _smart_wizard_core.WizardEvents>(eventName: K, callback: _smart_wizard_core.EventCallback<_smart_wizard_core.WizardEvents[K]>) => SmartWizard;
+        off: <K extends keyof _smart_wizard_core.WizardEvents>(eventName: K, callback?: _smart_wizard_core.EventCallback<_smart_wizard_core.WizardEvents[K]> | undefined) => SmartWizard;
+        once: <K extends keyof _smart_wizard_core.WizardEvents>(eventName: K, callback: _smart_wizard_core.EventCallback<_smart_wizard_core.WizardEvents[K]>) => SmartWizard;
+        destroy: () => void;
+    } | null>;
+};
+
+export { useSmartWizard };

package/dist/index.js

@@ -0,0 +1,84 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useSmartWizard: () => useSmartWizard
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/useSmartWizard.ts
+var import_vue = require("vue");
+var import_core = require("@smart-wizard/core");
+function useSmartWizard(containerRef, options) {
+  const wizard = (0, import_vue.ref)(null);
+  const info = (0, import_vue.ref)({
+    stepInfo: { currentStep: 0, totalSteps: 0 },
+    contentDirection: "ltr",
+    layout: "horizontal",
+    colorScheme: "none",
+    width: 0,
+    height: 0
+  });
+  const stepInfo = (0, import_vue.computed)(() => info.value.stepInfo);
+  const handleStepChange = () => {
+    if (wizard.value) {
+      info.value = wizard.value.info;
+    }
+  };
+  (0, import_vue.onMounted)(() => {
+    if (!containerRef.value) return;
+    wizard.value = new import_core.SmartWizard(containerRef.value, options);
+    wizard.value.on("showStep", handleStepChange);
+    wizard.value.on("initialized", handleStepChange);
+    handleStepChange();
+  });
+  (0, import_vue.onUnmounted)(() => {
+    if (wizard.value) {
+      wizard.value.off("showStep", handleStepChange);
+      wizard.value.off("initialized", handleStepChange);
+      wizard.value.destroy();
+      wizard.value = null;
+    }
+  });
+  return {
+    info,
+    stepInfo,
+    next: () => wizard.value?.next(),
+    prev: () => wizard.value?.prev(),
+    first: () => wizard.value?.first(),
+    last: () => wizard.value?.last(),
+    goTo: (index, force) => wizard.value?.goTo(index, { force }),
+    reset: () => wizard.value?.reset(),
+    destroy: () => wizard.value?.destroy(),
+    setOptions: (opts) => wizard.value?.setOptions(opts),
+    getOptions: () => wizard.value?.getOptions(),
+    updateHeight: () => wizard.value?.updateHeight(),
+    loader: {
+      show: () => wizard.value?.loader.show(),
+      hide: () => wizard.value?.loader.hide()
+    },
+    wizard
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useSmartWizard
+});

package/dist/index.mjs

@@ -0,0 +1,57 @@
+// src/useSmartWizard.ts
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import { SmartWizard } from "@smart-wizard/core";
+function useSmartWizard(containerRef, options) {
+  const wizard = ref(null);
+  const info = ref({
+    stepInfo: { currentStep: 0, totalSteps: 0 },
+    contentDirection: "ltr",
+    layout: "horizontal",
+    colorScheme: "none",
+    width: 0,
+    height: 0
+  });
+  const stepInfo = computed(() => info.value.stepInfo);
+  const handleStepChange = () => {
+    if (wizard.value) {
+      info.value = wizard.value.info;
+    }
+  };
+  onMounted(() => {
+    if (!containerRef.value) return;
+    wizard.value = new SmartWizard(containerRef.value, options);
+    wizard.value.on("showStep", handleStepChange);
+    wizard.value.on("initialized", handleStepChange);
+    handleStepChange();
+  });
+  onUnmounted(() => {
+    if (wizard.value) {
+      wizard.value.off("showStep", handleStepChange);
+      wizard.value.off("initialized", handleStepChange);
+      wizard.value.destroy();
+      wizard.value = null;
+    }
+  });
+  return {
+    info,
+    stepInfo,
+    next: () => wizard.value?.next(),
+    prev: () => wizard.value?.prev(),
+    first: () => wizard.value?.first(),
+    last: () => wizard.value?.last(),
+    goTo: (index, force) => wizard.value?.goTo(index, { force }),
+    reset: () => wizard.value?.reset(),
+    destroy: () => wizard.value?.destroy(),
+    setOptions: (opts) => wizard.value?.setOptions(opts),
+    getOptions: () => wizard.value?.getOptions(),
+    updateHeight: () => wizard.value?.updateHeight(),
+    loader: {
+      show: () => wizard.value?.loader.show(),
+      hide: () => wizard.value?.loader.hide()
+    },
+    wizard
+  };
+}
+export {
+  useSmartWizard
+};

package/package.json

@@ -1,6 +1,60 @@
 {
   "name": "@smart-wizard/vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.1",
+  "description": "Vue bindings for SmartWizard - modern, framework-agnostic wizard/stepper component",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@smart-wizard/core": "1.0.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "vue": "^3.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/techlab/smart-wizard.git",
+    "directory": "packages/adapters/vue"
+  },
+  "homepage": "https://github.com/techlab/smart-wizard#readme",
+  "bugs": {
+    "url": "https://github.com/techlab/smart-wizard/issues"
+  },
+  "author": {
+    "name": "Dipu Rajendran",
+    "email": "hello.techlab@gmail.com",
+    "url": "https://github.com/techlab"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "keywords": [
+    "wizard",
+    "stepper",
+    "form",
+    "multi-step",
+    "vue",
+    "smartwizard"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --external @smart-wizard/core --external vue",
+    "dev": "tsup src/index.ts --format cjs,esm --watch"
+  }
 }