vue3-step-wizard 0.5.0

package/README.md

@@ -0,0 +1,133 @@
+# vue3-step-wizard
+
+A Vue 3 + TypeScript wizard component.
+
+## Install
+
+```bash
+npm install vue3-step-wizard
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Wizard, type WizardStep, type WizardExpose } from 'vue3-step-wizard';
+import 'vue3-step-wizard/wizard-style.css';
+
+import StepDomain from './steps/StepDomain.vue';
+import StepBusiness from './steps/StepBusiness.vue';
+import StepFinish from './steps/StepFinish.vue';
+
+const steps: WizardStep[] = [
+  { name: 'domain', title: 'Domain', component: StepDomain },
+  { name: 'business', title: 'Business info', component: StepBusiness },
+  { name: 'finish', title: 'Finish', component: StepFinish }
+];
+
+const current = ref(0);
+
+const handleCustomEvent = (payload?: unknown) => {
+  console.log('Custom event payload', payload);
+};
+
+const handleStepChanged = (payload: { from: string | null; to: string }) => {
+  console.log('Step changed', payload);
+};
+
+const wizardRef = ref<WizardExpose | null>(null);
+
+const goToFinish = () => {
+  wizardRef.value?.moveTo('finish');
+};
+
+const hideBusiness = () => {
+  wizardRef.value?.hideStep('business');
+};
+
+const showBusiness = () => {
+  wizardRef.value?.showStep('business');
+};
+</script>
+
+<template>
+  <Wizard
+    ref="wizardRef"
+    v-model="current"
+    :steps="steps"
+    :allow-step-click="true"
+    :show-controls="true"
+    @custom-event="handleCustomEvent"
+    @step-changed="handleStepChanged"
+  />
+</template>
+```
+
+Each step component should emit `next` and `back` to move through the wizard.
+If you use `custom-event`, include the step name in the payload so the parent can identify the source.
+
+Wizard instance methods (via `ref`) let you move or toggle steps at runtime:
+- `moveTo(stepName)`
+- `hideStep(stepName)`
+- `showStep(stepName)`
+
+You can also pass `hidden-steps` to control visibility by step name.
+
+Wizard emits:
+- `step-changed` with `{ from, to }` step names.
+- `custom-event` forwarded from the active step component.
+
+Example step component:
+
+```vue
+<script setup lang="ts">
+const emit = defineEmits<{
+  (event: 'next'): void;
+  (event: 'back'): void;
+  (event: 'custom-event', payload?: unknown): void;
+}>();
+</script>
+
+<template>
+  <div>
+    <button type="button" @click="emit('back')">Back</button>
+    <button type="button" @click="emit('next')">Next</button>
+    <button type="button" @click="emit('custom-event', { step: 'domain', source: 'step-domain' })">
+      Fire custom event
+    </button>
+  </div>
+</template>
+```
+
+## Theming
+
+All colors are driven by CSS variables defined in `wizard-style.css`. Override them in your app to theme the wizard.
+
+```css
+:root {
+  --accent: #f5b24a;
+  --accent-2: #5be4ff;
+  --text: #f5f7fb;
+  --muted: #9aa3b2;
+  --wizard-ink: #13161c;
+  --wizard-white: #ffffff;
+  --wizard-surface-750: rgba(18, 23, 36, 0.75);
+  --wizard-surface-900: rgba(18, 23, 36, 0.9);
+  --wizard-border-weak: rgba(255, 255, 255, 0.08);
+  --wizard-border: rgba(255, 255, 255, 0.1);
+  --wizard-shadow-strong: rgba(0, 0, 0, 0.35);
+}
+```
+
+To override fonts, set them on the relevant classes in your app stylesheet:
+
+```css
+.__wizard-panel h1 {
+  font-family: 'Your Display Font', sans-serif;
+}
+
+.__wizard-page {
+  font-family: 'Your UI Font', sans-serif;
+}
+```

package/dist/vue3-step-wizard.es

@@ -0,0 +1,120 @@
+import { defineComponent as D, ref as y, watch as b, computed as w, createElementBlock as i, openBlock as l, createElementVNode as c, createCommentVNode as f, toDisplayString as S, Fragment as F, renderList as I, normalizeClass as L, createBlock as M, resolveDynamicComponent as W, mergeProps as H } from "vue";
+const P = { class: "__wizard-page" }, $ = { class: "__wizard" }, j = {
+  key: 0,
+  class: "__wizard-sidebar"
+}, q = { class: "__eyebrow" }, A = { class: "__step-list" }, G = ["onClick"], J = { class: "__step-index" }, K = { class: "__step-title" }, O = { class: "__wizard-panel" }, Q = {
+  key: 1,
+  class: "__wizard-controls"
+}, ee = /* @__PURE__ */ D({
+  __name: "Wizard",
+  props: {
+    steps: {},
+    modelValue: { default: 0 },
+    sidebarTitle: { default: "Setup steps" },
+    allowStepClick: { type: Boolean, default: !0 },
+    hiddenSteps: { default: () => [] },
+    showControls: { type: Boolean, default: !0 }
+  },
+  emits: ["update:modelValue", "change", "custom-event", "step-changed"],
+  setup(u, { expose: V, emit: z }) {
+    const s = u, p = z, k = (e) => s.steps.length ? Math.max(0, Math.min(e, s.steps.length - 1)) : 0, n = y(k(s.modelValue ?? 0));
+    b(
+      () => s.modelValue,
+      (e) => {
+        const t = k(e ?? 0);
+        t !== n.value && (n.value = t);
+      }
+    );
+    const _ = w(() => s.steps[n.value]), o = y(new Set(s.hiddenSteps));
+    b(
+      () => s.hiddenSteps,
+      (e) => {
+        o.value = new Set(e ?? []), x();
+      }
+    );
+    const m = (e) => o.value.has(e), B = w(
+      () => s.steps.map((e, t) => ({ step: e, index: t })).filter(({ step: e }) => !m(e.name))
+    ), r = (e) => {
+      var h, d;
+      const t = k(e);
+      if (t === n.value)
+        return;
+      const a = ((h = s.steps[n.value]) == null ? void 0 : h.name) ?? null, v = (d = s.steps[t]) == null ? void 0 : d.name;
+      n.value = t, p("update:modelValue", t), p("change", t), v && p("step-changed", { from: a, to: v });
+    }, N = w(() => n.value >= s.steps.length - 1), C = () => {
+      n.value >= s.steps.length - 1 || r(n.value + 1);
+    }, g = () => {
+      n.value <= 0 || r(n.value - 1);
+    }, E = (e) => {
+      p("custom-event", e);
+    }, T = (e) => {
+      s.allowStepClick && (s.steps[e], r(e));
+    }, x = () => {
+      const e = s.steps[n.value];
+      if (e && !m(e.name))
+        return;
+      const t = s.steps.findIndex((a) => !m(a.name));
+      t >= 0 && r(t);
+    };
+    return V({
+      moveTo: (e) => {
+        const t = s.steps.findIndex((a) => a.name === e);
+        t !== -1 && (m(e) || r(t));
+      },
+      hideStep: (e) => {
+        o.value = new Set(o.value).add(e), x();
+      },
+      showStep: (e) => {
+        if (!o.value.has(e))
+          return;
+        const t = new Set(o.value);
+        t.delete(e), o.value = t;
+      }
+    }), (e, t) => (l(), i("main", P, [
+      c("section", $, [
+        u.steps.length ? (l(), i("aside", j, [
+          c("p", q, S(u.sidebarTitle), 1),
+          c("div", A, [
+            (l(!0), i(F, null, I(B.value, ({ step: a, index: v }, h) => {
+              var d;
+              return l(), i("div", {
+                key: a.name,
+                class: L(["__step-item", {
+                  __active: a.name === ((d = _.value) == null ? void 0 : d.name),
+                  __clickable: u.allowStepClick
+                }]),
+                onClick: (Y) => T(v)
+              }, [
+                c("span", J, S(h + 1), 1),
+                c("span", K, S(a.title), 1)
+              ], 10, G);
+            }), 128))
+          ])
+        ])) : f("", !0),
+        c("div", O, [
+          _.value ? (l(), M(W(_.value.component), H({ key: 0 }, _.value.props, {
+            onNext: C,
+            onBack: g,
+            onCustomEvent: E
+          }), null, 16)) : f("", !0),
+          u.showControls ? (l(), i("div", Q, [
+            n.value > 0 ? (l(), i("button", {
+              key: 0,
+              class: "__cta __ghost",
+              type: "button",
+              onClick: g
+            }, " Back ")) : f("", !0),
+            c("button", {
+              class: "__cta __primary",
+              type: "button",
+              onClick: C
+            }, S(N.value ? "Finish" : "Next"), 1)
+          ])) : f("", !0)
+        ])
+      ])
+    ]));
+  }
+});
+export {
+  ee as Wizard
+};

package/dist/vue3-step-wizard.umd.cjs

@@ -0,0 +1 @@
+(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.Vue3StepWizard={},l.Vue))})(this,function(l,e){"use strict";const g={class:"__wizard-page"},w={class:"__wizard"},y={key:0,class:"__wizard-sidebar"},C={class:"__eyebrow"},B={class:"__step-list"},E=["onClick"],b={class:"__step-index"},x={class:"__step-title"},N={class:"__wizard-panel"},z={key:1,class:"__wizard-controls"},T=e.defineComponent({__name:"Wizard",props:{steps:{},modelValue:{default:0},sidebarTitle:{default:"Setup steps"},allowStepClick:{type:Boolean,default:!0},hiddenSteps:{default:()=>[]},showControls:{type:Boolean,default:!0}},emits:["update:modelValue","change","custom-event","step-changed"],setup(i,{expose:D,emit:v}){const o=i,p=v,f=t=>o.steps.length?Math.max(0,Math.min(t,o.steps.length-1)):0,s=e.ref(f(o.modelValue??0));e.watch(()=>o.modelValue,t=>{const n=f(t??0);n!==s.value&&(s.value=n)});const m=e.computed(()=>o.steps[s.value]),c=e.ref(new Set(o.hiddenSteps));e.watch(()=>o.hiddenSteps,t=>{c.value=new Set(t??[]),V()});const u=t=>c.value.has(t),M=e.computed(()=>o.steps.map((t,n)=>({step:t,index:n})).filter(({step:t})=>!u(t.name))),r=t=>{var h,d;const n=f(t);if(n===s.value)return;const a=((h=o.steps[s.value])==null?void 0:h.name)??null,_=(d=o.steps[n])==null?void 0:d.name;s.value=n,p("update:modelValue",n),p("change",n),_&&p("step-changed",{from:a,to:_})},W=e.computed(()=>s.value>=o.steps.length-1),S=()=>{s.value>=o.steps.length-1||r(s.value+1)},k=()=>{s.value<=0||r(s.value-1)},j=t=>{p("custom-event",t)},F=t=>{o.allowStepClick&&(o.steps[t],r(t))},V=()=>{const t=o.steps[s.value];if(t&&!u(t.name))return;const n=o.steps.findIndex(a=>!u(a.name));n>=0&&r(n)};return D({moveTo:t=>{const n=o.steps.findIndex(a=>a.name===t);n!==-1&&(u(t)||r(n))},hideStep:t=>{c.value=new Set(c.value).add(t),V()},showStep:t=>{if(!c.value.has(t))return;const n=new Set(c.value);n.delete(t),c.value=n}}),(t,n)=>(e.openBlock(),e.createElementBlock("main",g,[e.createElementVNode("section",w,[i.steps.length?(e.openBlock(),e.createElementBlock("aside",y,[e.createElementVNode("p",C,e.toDisplayString(i.sidebarTitle),1),e.createElementVNode("div",B,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(M.value,({step:a,index:_},h)=>{var d;return e.openBlock(),e.createElementBlock("div",{key:a.name,class:e.normalizeClass(["__step-item",{__active:a.name===((d=m.value)==null?void 0:d.name),__clickable:i.allowStepClick}]),onClick:q=>F(_)},[e.createElementVNode("span",b,e.toDisplayString(h+1),1),e.createElementVNode("span",x,e.toDisplayString(a.title),1)],10,E)}),128))])])):e.createCommentVNode("",!0),e.createElementVNode("div",N,[m.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(m.value.component),e.mergeProps({key:0},m.value.props,{onNext:S,onBack:k,onCustomEvent:j}),null,16)):e.createCommentVNode("",!0),i.showControls?(e.openBlock(),e.createElementBlock("div",z,[s.value>0?(e.openBlock(),e.createElementBlock("button",{key:0,class:"__cta __ghost",type:"button",onClick:k}," Back ")):e.createCommentVNode("",!0),e.createElementVNode("button",{class:"__cta __primary",type:"button",onClick:S},e.toDisplayString(W.value?"Finish":"Next"),1)])):e.createCommentVNode("",!0)])])]))}});l.Wizard=T,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});

package/index.d.ts

@@ -0,0 +1,28 @@
+import type { DefineComponent, Component } from 'vue';
+
+export type WizardStep = {
+  name: string;
+  title: string;
+  component: Component;
+  props?: Record<string, unknown>;
+};
+
+export type WizardExpose = {
+  moveTo: (stepName: string) => void;
+  hideStep: (stepName: string) => void;
+  showStep: (stepName: string) => void;
+};
+
+export const Wizard: DefineComponent<{
+  steps: WizardStep[];
+  modelValue?: number;
+  sidebarTitle?: string;
+  allowStepClick?: boolean;
+  hiddenSteps?: string[];
+  showControls?: boolean;
+}, {}, any, any, any, any, {
+  'step-changed': (payload: { from: string | null; to: string }) => void;
+  'custom-event': (payload?: unknown) => void;
+}> & {
+  new (): WizardExpose;
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "vue3-step-wizard",
+  "version": "0.5.0",
+  "type": "module",
+  "description": "A Vue 3 wizard component library.",
+  "main": "./dist/vue3-step-wizard.umd.cjs",
+  "module": "./dist/vue3-step-wizard.es.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "development": "./src/index.ts",
+      "import": "./dist/vue3-step-wizard.es.js",
+      "require": "./dist/vue3-step-wizard.umd.cjs"
+    },
+    "./wizard-style.css": "./wizard-style.css"
+  },
+  "files": [
+    "dist",
+    "index.d.ts",
+    "wizard-style.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "npm run build:types && vite build",
+    "build:types": "vue-tsc -p tsconfig.json --declaration --emitDeclarationOnly --outDir dist",
+    "prepare": "npm run build",
+    "preview": "vite preview",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "typescript": "^5.5.4",
+    "vite": "^5.0.0",
+    "vue": "^3.3.0",
+    "vue-tsc": "^2.0.26"
+  },
+  "keywords": [
+    "vue",
+    "wizard",
+    "component",
+    "typescript"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "yarn@4.11.0+sha512.4e54aeace9141df2f0177c266b05ec50dc044638157dae128c471ba65994ac802122d7ab35bcd9e81641228b7dcf24867d28e750e0bcae8a05277d600008ad54"
+}

package/wizard-style.css

@@ -0,0 +1,470 @@
+:root {
+  --wizard-accent: #f5b24a;
+  --wizard-accent-2: #5be4ff;
+  --wizard-text: #f5f7fb;
+  --wizard-muted: #9aa3b2;
+  --wizard-ink: #13161c;
+  --wizard-shadow-strong: rgba(0, 0, 0, 0.35);
+  --wizard-surface-strong: rgba(12, 16, 26, 0.9);
+  --wizard-surface-750: rgba(18, 23, 36, 0.75);
+  --wizard-surface-900: rgba(18, 23, 36, 0.9);
+  --wizard-border-weak: rgba(255, 255, 255, 0.08);
+  --wizard-border: rgba(255, 255, 255, 0.1);
+  --wizard-border-strong: rgba(255, 255, 255, 0.12);
+  --wizard-border-strongest: rgba(255, 255, 255, 0.2);
+  --wizard-accent-glow: rgba(245, 178, 74, 0.25);
+  --wizard-accent-strong: rgba(245, 178, 74, 0.6);
+  --wizard-accent-stronger: rgba(245, 178, 74, 0.9);
+  --wizard-accent-2-soft: rgba(91, 228, 255, 0.12);
+  --wizard-accent-2-strong: rgba(91, 228, 255, 0.6);
+}
+
+.__wizard-page {
+  min-height: 0;
+  color: var(--wizard-text);
+  padding: 15px clamp(1.5rem, 5vw, 5rem) calc(3rem - 10px);
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.__wizard {
+  display: grid;
+  grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr);
+  gap: 2rem;
+}
+
+.__wizard-sidebar {
+  background: var(--wizard-surface-750);
+  padding: 2rem;
+  border: 1px solid var(--wizard-border-weak);
+  box-shadow: 0 20px 50px var(--wizard-shadow-strong);
+  align-self: start;
+}
+
+.__wizard-sidebar .__eyebrow {
+  text-transform: uppercase;
+  letter-spacing: 0.2rem;
+  font-size: 0.75rem;
+  color: var(--wizard-accent-2);
+  margin-bottom: 1.5rem;
+}
+
+.__step-list {
+  display: grid;
+  gap: 1rem;
+}
+
+.__step-item {
+  background: transparent;
+  border: 1px solid var(--wizard-border-weak);
+  padding: 0.9rem 1rem;
+  color: inherit;
+  display: grid;
+  gap: 0.4rem;
+  text-align: left;
+  transition: transform 0.2s ease, border-color 0.2s ease;
+}
+
+.__step-item.__active {
+  border-color: var(--wizard-accent-strong);
+  transform: translateY(-2px);
+}
+
+.__step-item.__clickable {
+  cursor: pointer;
+}
+
+
+.__step-index {
+  font-size: 0.7rem;
+  letter-spacing: 0.2rem;
+  text-transform: uppercase;
+  color: var(--wizard-muted);
+}
+
+.__step-title {
+  font-weight: 600;
+  letter-spacing: 0.08rem;
+  text-transform: uppercase;
+  font-size: 0.85rem;
+}
+
+.__wizard-panel {
+  background: var(--wizard-surface-900);
+  padding: 2.5rem;
+  border: 1px solid var(--wizard-border);
+  box-shadow: 0 30px 60px var(--wizard-shadow-strong);
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+  min-height: 77vh;
+}
+
+.__wizard-panel h1 {
+  font-family: 'Syne', sans-serif;
+  font-size: clamp(2.2rem, 4vw, 3.2rem);
+  line-height: 1.1;
+  margin: 0 0 2rem;
+  padding: 0;
+  transform: translateY(-0.5rem);
+}
+
+.__wizard-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.__business-step {
+  margin-top: 1.5rem;
+  display: grid;
+  gap: 1.5rem;
+}
+
+.__business-step > p {
+  margin-top: -60px;
+}
+
+.__business-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1rem;
+  margin-top: -10px;
+}
+
+.__business-field {
+  display: grid;
+  gap: 0.4rem;
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08rem;
+  color: var(--wizard-muted);
+}
+
+.__business-field.__full {
+  grid-column: 1 / -1;
+}
+
+.__business-field input,
+.__business-field textarea,
+.__business-field select {
+  background: var(--wizard-surface-strong);
+  border: 1px solid var(--wizard-border-strong);
+  padding: 0.75rem 0.9rem;
+  color: var(--wizard-text);
+  font-size: 0.95rem;
+  text-transform: none;
+  letter-spacing: normal;
+  resize: vertical;
+}
+
+.__business-field input.__invalid,
+.__business-field textarea.__invalid,
+.__business-field select.__invalid {
+  border-color: var(--wizard-accent-stronger);
+}
+
+.__business-field input:focus,
+.__business-field textarea:focus,
+.__business-field select:focus {
+  outline: none;
+  border-color: var(--wizard-accent-2-strong);
+  box-shadow: 0 0 0 3px var(--wizard-accent-2-soft);
+}
+
+
+
+.__wizard-panel p {
+  color: var(--wizard-muted);
+  line-height: 1.8;
+  max-width: 36rem;
+}
+
+.__wizard-controls {
+  margin-top: auto;
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+  padding-top: 2rem;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.__cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 1.6rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1rem;
+  font-weight: 600;
+  border: 1px solid transparent;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.__cta:hover {
+  transform: translateY(-2px);
+}
+
+.__cta.__primary {
+  background: var(--wizard-accent);
+  color: var(--wizard-ink);
+  box-shadow: 0 12px 30px var(--wizard-accent-glow);
+}
+
+.__cta.__ghost {
+  border-color: var(--wizard-border-strongest);
+  color: var(--wizard-text);
+}
+
+.__cta:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+  transform: none;
+}
+
+@media (max-width: 720px) {
+  .__wizard-page {
+    padding-top: 0;
+    padding-bottom: 2.5rem;
+    gap: 0;
+  }
+
+  .__wizard {
+    grid-template-columns: 1fr;
+    margin-top: 0;
+  }
+
+  .__wizard-sidebar, .__wizard-panel {
+    padding: 2rem;
+  }
+
+  .__wizard-panel {
+    margin-top: 10px;
+  }
+
+  .__wizard-panel {
+    min-height: 80vh;
+  }
+
+  
+
+  .__step-item {
+    padding: 0.8rem 0.9rem;
+  }
+
+  
+
+  .__wizard-sidebar {
+    display: none;
+  }
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+ 
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+
+
+  
+
+  
+
+
+
+
+
+
+
+
+  
+
+}
+
+
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+
+
+