v-onboarding 2.2.0 → 2.3.0

package/dist/v-onboarding.es.js

@@ -1,108 +1,10 @@
-import { ref, onMounted, onUnmounted, defineComponent, inject, computed, watch, withDirectives, openBlock, createElementBlock, createElementVNode, renderSlot, toDisplayString, createCommentVNode, vShow, provide, resolveComponent, createBlock } from "vue";
 import { createPopper } from "@popperjs/core";
-function useGetElement(element) {
-  if (typeof element === "string") {
-    return document.querySelector(element);
-  } else if (typeof element === "function") {
-    return element();
-  }
-  return null;
-}
-const defaultVOnboardingWrapperOptions = {
-  popper: {},
-  overlay: {
-    enabled: true,
-    padding: 0,
-    borderRadius: 0
-  },
-  scrollToStep: {
-    enabled: true,
-    options: {
-      behavior: "smooth",
-      block: "center",
-      inline: "center"
-    }
-  },
-  labels: {
-    previousButton: "Previous",
-    nextButton: "Next",
-    finishButton: "Finish"
-  },
-  hideButtons: {
-    previous: false,
-    next: false
-  }
+import { ref, onMounted, onUnmounted, defineComponent, inject, toRefs, computed, withDirectives, openBlock, createElementBlock, createElementVNode, renderSlot, toDisplayString, createCommentVNode, vShow, watch, provide, resolveComponent, createBlock } from "vue";
+const STATE_INJECT_KEY = Symbol("onboardingState");
+const OnboardingState = {
+  IDLE: -1,
+  FINISHED: -2
 };
-function useSvgOverlay() {
-  var _a, _b, _c, _d;
-  const path = ref("");
-  const target = ref(null);
-  const paddingRef = ref((_b = (_a = defaultVOnboardingWrapperOptions.overlay) == null ? void 0 : _a.padding) != null ? _b : 0);
-  const borderRadiusRef = ref((_d = (_c = defaultVOnboardingWrapperOptions.overlay) == null ? void 0 : _c.borderRadius) != null ? _d : 0);
-  const onScroll = () => {
-    updatePath(target.value, {
-      padding: paddingRef.value,
-      borderRadius: borderRadiusRef.value
-    });
-  };
-  const updatePath = async (element, options = defaultVOnboardingWrapperOptions.overlay) => {
-    var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i, _j, _k, _l;
-    if (!element)
-      return;
-    const { innerWidth, innerHeight } = window;
-    const { left, top, width, height } = element.getBoundingClientRect();
-    const padding = typeof options.padding === "number" ? {
-      top: options.padding,
-      right: options.padding,
-      bottom: options.padding,
-      left: options.padding
-    } : options.padding;
-    const radius = typeof options.borderRadius === "number" ? {
-      leftTop: options.borderRadius,
-      rightTop: options.borderRadius,
-      rightBottom: options.borderRadius,
-      leftBottom: options.borderRadius
-    } : options.borderRadius;
-    const edges = {
-      top: top - ((_a2 = padding == null ? void 0 : padding.top) != null ? _a2 : 0),
-      right: left + width + ((_b2 = padding == null ? void 0 : padding.right) != null ? _b2 : 0),
-      bottom: top + height + ((_c2 = padding == null ? void 0 : padding.bottom) != null ? _c2 : 0),
-      left: left - ((_d2 = padding == null ? void 0 : padding.left) != null ? _d2 : 0)
-    };
-    const pointsPath = {
-      leftTop: `M${edges.left + ((_e = radius == null ? void 0 : radius.leftTop) != null ? _e : 0)},${edges.top} Q${edges.left},${edges.top} ${edges.left},${edges.top + ((_f = radius == null ? void 0 : radius.leftTop) != null ? _f : 0)}`,
-      rightTop: `V${edges.top + ((_g = radius == null ? void 0 : radius.rightTop) != null ? _g : 0)} Q${edges.right},${edges.top} ${edges.right - ((_h = radius == null ? void 0 : radius.rightTop) != null ? _h : 0)},${edges.top}`,
-      rightBottom: `H${edges.right - ((_i = radius == null ? void 0 : radius.rightBottom) != null ? _i : 0)} Q${edges.right},${edges.bottom} ${edges.right},${edges.bottom - ((_j = radius == null ? void 0 : radius.rightBottom) != null ? _j : 0)}`,
-      leftBottom: `V${edges.bottom - ((_k = radius == null ? void 0 : radius.leftBottom) != null ? _k : 0)} Q${edges.left},${edges.bottom} ${edges.left + ((_l = radius == null ? void 0 : radius.leftBottom) != null ? _l : 0)},${edges.bottom}`
-    };
-    path.value = `
-      M${innerWidth},${innerHeight}
-      H0V0
-      H${innerWidth}V${innerHeight}
-      Z
-      ${pointsPath.leftTop}
-      ${pointsPath.leftBottom}
-      ${pointsPath.rightBottom}
-      ${pointsPath.rightTop}
-      Z
-    `;
-    target.value = element;
-    paddingRef.value = padding;
-    borderRadiusRef.value = radius;
-  };
-  onMounted(() => {
-    window.addEventListener("scroll", onScroll);
-    window.addEventListener("resize", onScroll);
-  });
-  onUnmounted(() => {
-    window.removeEventListener("scroll", onScroll);
-    window.removeEventListener("resize", onScroll);
-  });
-  return {
-    path,
-    updatePath
-  };
-}
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var lodash_merge = { exports: {} };
 (function(module, exports) {
@@ -180,7 +82,7 @@ var lodash_merge = { exports: {} };
   var nativeObjectToString = objectProto.toString;
   var objectCtorString = funcToString.call(Object);
   var reIsNative = RegExp("^" + funcToString.call(hasOwnProperty).replace(reRegExpChar, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$");
-  var Buffer = moduleExports ? root.Buffer : void 0, Symbol = root.Symbol, Uint8Array = root.Uint8Array, allocUnsafe = Buffer ? Buffer.allocUnsafe : void 0, getPrototype = overArg(Object.getPrototypeOf, Object), objectCreate = Object.create, propertyIsEnumerable = objectProto.propertyIsEnumerable, splice = arrayProto.splice, symToStringTag = Symbol ? Symbol.toStringTag : void 0;
+  var Buffer = moduleExports ? root.Buffer : void 0, Symbol2 = root.Symbol, Uint8Array = root.Uint8Array, allocUnsafe = Buffer ? Buffer.allocUnsafe : void 0, getPrototype = overArg(Object.getPrototypeOf, Object), objectCreate = Object.create, propertyIsEnumerable = objectProto.propertyIsEnumerable, splice = arrayProto.splice, symToStringTag = Symbol2 ? Symbol2.toStringTag : void 0;
   var defineProperty = function() {
     try {
       var func = getNative(Object, "defineProperty");
@@ -777,6 +679,109 @@ var lodash_merge = { exports: {} };
   module.exports = merge2;
 })(lodash_merge, lodash_merge.exports);
 var merge = lodash_merge.exports;
+function useGetElement(element) {
+  if (typeof element === "string") {
+    return document.querySelector(element);
+  } else if (typeof element === "function") {
+    return element();
+  }
+  return null;
+}
+const defaultVOnboardingWrapperOptions = {
+  popper: {},
+  overlay: {
+    enabled: true,
+    padding: 0,
+    borderRadius: 0
+  },
+  scrollToStep: {
+    enabled: true,
+    options: {
+      behavior: "smooth",
+      block: "center",
+      inline: "center"
+    }
+  },
+  labels: {
+    previousButton: "Previous",
+    nextButton: "Next",
+    finishButton: "Finish"
+  },
+  hideButtons: {
+    previous: false,
+    next: false
+  }
+};
+function useSvgOverlay() {
+  var _a, _b, _c, _d;
+  const path = ref("");
+  const target = ref(null);
+  const paddingRef = ref((_b = (_a = defaultVOnboardingWrapperOptions.overlay) == null ? void 0 : _a.padding) != null ? _b : 0);
+  const borderRadiusRef = ref((_d = (_c = defaultVOnboardingWrapperOptions.overlay) == null ? void 0 : _c.borderRadius) != null ? _d : 0);
+  const onScroll = () => {
+    updatePath(target.value, {
+      padding: paddingRef.value,
+      borderRadius: borderRadiusRef.value
+    });
+  };
+  const updatePath = async (element, options = defaultVOnboardingWrapperOptions.overlay) => {
+    var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i, _j, _k, _l;
+    if (!element)
+      return;
+    const { innerWidth, innerHeight } = window;
+    const { left, top, width, height } = element.getBoundingClientRect();
+    const padding = typeof options.padding === "number" ? {
+      top: options.padding,
+      right: options.padding,
+      bottom: options.padding,
+      left: options.padding
+    } : options.padding;
+    const radius = typeof options.borderRadius === "number" ? {
+      leftTop: options.borderRadius,
+      rightTop: options.borderRadius,
+      rightBottom: options.borderRadius,
+      leftBottom: options.borderRadius
+    } : options.borderRadius;
+    const edges = {
+      top: top - ((_a2 = padding == null ? void 0 : padding.top) != null ? _a2 : 0),
+      right: left + width + ((_b2 = padding == null ? void 0 : padding.right) != null ? _b2 : 0),
+      bottom: top + height + ((_c2 = padding == null ? void 0 : padding.bottom) != null ? _c2 : 0),
+      left: left - ((_d2 = padding == null ? void 0 : padding.left) != null ? _d2 : 0)
+    };
+    const pointsPath = {
+      leftTop: `M${edges.left + ((_e = radius == null ? void 0 : radius.leftTop) != null ? _e : 0)},${edges.top} Q${edges.left},${edges.top} ${edges.left},${edges.top + ((_f = radius == null ? void 0 : radius.leftTop) != null ? _f : 0)}`,
+      rightTop: `V${edges.top + ((_g = radius == null ? void 0 : radius.rightTop) != null ? _g : 0)} Q${edges.right},${edges.top} ${edges.right - ((_h = radius == null ? void 0 : radius.rightTop) != null ? _h : 0)},${edges.top}`,
+      rightBottom: `H${edges.right - ((_i = radius == null ? void 0 : radius.rightBottom) != null ? _i : 0)} Q${edges.right},${edges.bottom} ${edges.right},${edges.bottom - ((_j = radius == null ? void 0 : radius.rightBottom) != null ? _j : 0)}`,
+      leftBottom: `V${edges.bottom - ((_k = radius == null ? void 0 : radius.leftBottom) != null ? _k : 0)} Q${edges.left},${edges.bottom} ${edges.left + ((_l = radius == null ? void 0 : radius.leftBottom) != null ? _l : 0)},${edges.bottom}`
+    };
+    path.value = `
+      M${innerWidth},${innerHeight}
+      H0V0
+      H${innerWidth}V${innerHeight}
+      Z
+      ${pointsPath.leftTop}
+      ${pointsPath.leftBottom}
+      ${pointsPath.rightBottom}
+      ${pointsPath.rightTop}
+      Z
+    `;
+    target.value = element;
+    paddingRef.value = padding;
+    borderRadiusRef.value = radius;
+  };
+  onMounted(() => {
+    window.addEventListener("scroll", onScroll);
+    window.addEventListener("resize", onScroll);
+  });
+  onUnmounted(() => {
+    window.removeEventListener("scroll", onScroll);
+    window.removeEventListener("resize", onScroll);
+  });
+  return {
+    path,
+    updatePath
+  };
+}
 var _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -786,19 +791,11 @@ var _export_sfc = (sfc, props) => {
 };
 const _sfc_main$1 = defineComponent({
   name: "VOnboardingStep",
-  setup(_, { slots }) {
+  setup() {
     const show = ref(false);
-    const nextStep = inject("next-step", () => {
-    });
-    const previousStep = inject("previous-step", () => {
-    });
-    const exit = inject("exit", () => {
-    });
-    const options = inject("options");
+    const state = inject(STATE_INJECT_KEY, {});
+    const { step, isFirstStep, isLastStep, options, next, previous, exit, finish } = toRefs(state.value);
     const mergedOptions = computed(() => merge({}, options == null ? void 0 : options.value, step.value.options));
-    const isFirst = inject("is-first-step");
-    const isLast = inject("is-last-step");
-    const step = inject("step", {});
     const isButtonVisible = computed(() => {
       var _a, _b;
       return {
@@ -814,22 +811,8 @@ const _sfc_main$1 = defineComponent({
         finish: (_f = (_e = mergedOptions.value) == null ? void 0 : _e.labels) == null ? void 0 : _f.finishButton
       };
     });
-    const onNext = () => {
-      beforeStepEnd();
-      nextStep();
-    };
-    const onPrevious = () => {
-      beforeStepEnd();
-      previousStep();
-    };
-    watch(() => step.value, (_2, oldStep) => {
-      var _a;
-      if (!((_a = slots.default) == null ? void 0 : _a.call(slots)))
-        return;
-      beforeStepEnd(oldStep);
-    });
-    const stepElement = ref(null);
     const { updatePath, path } = useSvgOverlay();
+    const stepElement = ref();
     const attachElement = () => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
       const element = useGetElement((_b = (_a = step == null ? void 0 : step.value) == null ? void 0 : _a.attachTo) == null ? void 0 : _b.element);
@@ -845,41 +828,20 @@ const _sfc_main$1 = defineComponent({
             borderRadius: (_l = (_k = mergedOptions.value) == null ? void 0 : _k.overlay) == null ? void 0 : _l.borderRadius
           });
         }
-        setTargetElementClassName(element);
       }
     };
-    const beforeStepStart = async () => {
-      var _a, _b, _c;
-      await ((_c = (_b = (_a = step == null ? void 0 : step.value) == null ? void 0 : _a.on) == null ? void 0 : _b.beforeStep) == null ? void 0 : _c.call(_b));
-      attachElement();
-    };
-    const beforeStepEnd = (stepObj = step.value) => {
-      var _a, _b, _c, _d;
-      (_b = (_a = stepObj == null ? void 0 : stepObj.on) == null ? void 0 : _a.afterStep) == null ? void 0 : _b.call(_a);
-      unsetTargetElementClassName(useGetElement((_c = stepObj == null ? void 0 : stepObj.attachTo) == null ? void 0 : _c.element), (_d = stepObj == null ? void 0 : stepObj.attachTo) == null ? void 0 : _d.classList);
-    };
-    const setTargetElementClassName = (element = useGetElement(step.value.attachTo.element)) => {
-      const classList = step.value.attachTo.classList;
-      if (!classList || !element)
-        return;
-      element.classList.add(...classList);
-    };
-    const unsetTargetElementClassName = (element = useGetElement(step.value.attachTo.element), classList) => {
-      if (!classList || !element)
-        return;
-      element.classList.remove(...classList);
-    };
-    onMounted(beforeStepStart);
+    onMounted(attachElement);
     return {
       stepElement,
-      onNext,
-      onPrevious,
+      next,
+      previous,
       path,
       show,
       step,
-      isFirst,
-      isLast,
+      isFirstStep,
+      isLastStep,
       exit,
+      finish,
       isButtonVisible,
       buttonLabels
     };
@@ -932,23 +894,24 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             _ctx.step.content.title ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(_ctx.step.content.title), 1)) : createCommentVNode("", true),
             createElementVNode("button", {
               onClick: _cache[0] || (_cache[0] = (...args) => _ctx.exit && _ctx.exit(...args)),
+              "finish,": "",
               class: "v-onboarding-item__header-close"
             }, _hoisted_8)
           ]),
           _ctx.step.content.description ? (openBlock(), createElementBlock("p", _hoisted_9, toDisplayString(_ctx.step.content.description), 1)) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_10, [
-            !_ctx.isFirst && _ctx.isButtonVisible.previous ? (openBlock(), createElementBlock("button", {
+            !_ctx.isFirstStep && _ctx.isButtonVisible.previous ? (openBlock(), createElementBlock("button", {
               key: 0,
               type: "button",
-              onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onPrevious && _ctx.onPrevious(...args)),
+              onClick: _cache[1] || (_cache[1] = (...args) => _ctx.previous && _ctx.previous(...args)),
               class: "v-onboarding-btn-secondary"
             }, toDisplayString(_ctx.buttonLabels.previous), 1)) : createCommentVNode("", true),
             _ctx.isButtonVisible.next ? (openBlock(), createElementBlock("button", {
               key: 1,
-              onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onNext && _ctx.onNext(...args)),
+              onClick: _cache[2] || (_cache[2] = () => _ctx.isLastStep ? _ctx.finish() : _ctx.next()),
               type: "button",
               class: "v-onboarding-btn-primary"
-            }, toDisplayString(_ctx.isLast ? _ctx.buttonLabels.finish : _ctx.buttonLabels.next), 1)) : createCommentVNode("", true)
+            }, toDisplayString(_ctx.isLastStep ? _ctx.buttonLabels.finish : _ctx.buttonLabels.next), 1)) : createCommentVNode("", true)
           ])
         ])
       ]) : createCommentVNode("", true),
@@ -974,9 +937,10 @@ const _sfc_main = defineComponent({
       default: () => ({})
     }
   },
-  emits: ["exit"],
+  emits: ["finish", "exit"],
   setup(props, { expose, emit }) {
-    const index = ref(-1);
+    const index = ref(OnboardingState.IDLE);
+    const privateIndex = ref(index.value);
     const setIndex = (value) => {
       if (typeof value === "function") {
         index.value = value(index.value);
@@ -984,56 +948,102 @@ const _sfc_main = defineComponent({
         index.value = value;
       }
     };
+    const { beforeHook, afterHook } = useStepHooks();
     const activeStep = computed(() => {
       var _a;
-      return ((_a = props.steps) == null ? void 0 : _a[index.value]) || null;
+      return (_a = props.steps) == null ? void 0 : _a[privateIndex.value];
+    });
+    watch(index, async (newIndex, oldIndex) => {
+      var _a, _b;
+      const oldStep = (_a = props.steps) == null ? void 0 : _a[oldIndex];
+      if (oldStep) {
+        await afterHook(oldStep);
+      }
+      const newStep = (_b = props.steps) == null ? void 0 : _b[newIndex];
+      if (newStep) {
+        await beforeHook(newStep);
+      }
+      privateIndex.value = newIndex;
     });
-    const toPreviousStep = () => {
-      setIndex((current) => current - 1);
-    };
-    const toNextStep = () => {
-      setIndex((current) => current + 1);
-    };
     const isFinished = computed(() => {
-      return index.value >= props.steps.length || index.value < 0;
+      return privateIndex.value === OnboardingState.FINISHED;
     });
-    const start = () => {
-      setIndex(0);
-    };
+    const start = () => setIndex(0);
     const finish = () => {
-      setIndex(-1);
-    };
-    const exit = () => {
-      finish(), emit("exit");
+      setIndex(OnboardingState.FINISHED);
+      emit("finish");
     };
+    const exit = () => emit("exit");
     expose({
       start,
       finish,
       goToStep: setIndex
     });
-    const mergedOptions = computed(() => merge({}, defaultVOnboardingWrapperOptions, props.options));
-    provide("options", mergedOptions);
-    provide("step", activeStep);
-    provide("next-step", toNextStep);
-    provide("previous-step", toPreviousStep);
-    provide("exit", exit);
-    const isFirstStep = computed(() => index.value === 0);
-    const isLastStep = computed(() => index.value === props.steps.length - 1);
-    provide("is-first-step", isFirstStep);
-    provide("is-last-step", isLastStep);
+    const previous = () => {
+      setIndex((current) => current - 1);
+    };
+    const next = () => {
+      const next2 = privateIndex.value + 1;
+      if (next2 === props.steps.length) {
+        finish();
+        return;
+      }
+      setIndex(next2);
+    };
+    const state = ref({
+      step: activeStep,
+      options: computed(() => merge({}, defaultVOnboardingWrapperOptions, props.options)),
+      next,
+      previous,
+      finish,
+      exit,
+      isFirstStep: computed(() => privateIndex.value === 0),
+      isLastStep: computed(() => privateIndex.value === props.steps.length - 1)
+    });
+    provide(STATE_INJECT_KEY, state);
+    const isFirstStep = computed(() => privateIndex.value === 0);
+    const isLastStep = computed(() => privateIndex.value === props.steps.length - 1);
     return {
       index,
       activeStep,
-      toPreviousStep,
-      toNextStep,
+      next,
+      previous,
       isFinished,
       setIndex,
       isFirstStep,
       isLastStep,
-      finish
+      finish,
+      exit
     };
   }
 });
+function useSetElementClassName() {
+  const setClassName = ({ element, classList = [] }) => {
+    if (!element)
+      return;
+    element.classList.add(...classList);
+  };
+  const unsetClassName = ({ element, classList = [] }) => {
+    if (!element)
+      return;
+    element.classList.remove(...classList);
+  };
+  return { setClassName, unsetClassName };
+}
+function useStepHooks() {
+  const { setClassName, unsetClassName } = useSetElementClassName();
+  const beforeHook = (step) => {
+    var _a, _b;
+    unsetClassName({ element: useGetElement(step.attachTo.element), classList: step.attachTo.classList });
+    return (_b = (_a = step.on) == null ? void 0 : _a.beforeStep) == null ? void 0 : _b.call(_a);
+  };
+  const afterHook = (step) => {
+    var _a, _b;
+    setClassName({ element: useGetElement(step.attachTo.element), classList: step.attachTo.classList });
+    return (_b = (_a = step.on) == null ? void 0 : _a.afterStep) == null ? void 0 : _b.call(_a);
+  };
+  return { beforeHook, afterHook };
+}
 const _hoisted_1 = {
   key: 0,
   "data-v-onboarding-wrapper": ""
@@ -1044,9 +1054,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     renderSlot(_ctx.$slots, "default", {
       key: _ctx.index,
       step: _ctx.activeStep,
-      next: () => _ctx.toNextStep(),
-      previous: () => _ctx.toPreviousStep(),
-      exit: () => _ctx.finish(),
+      next: _ctx.next,
+      previous: _ctx.previous,
+      exit: _ctx.exit,
       isFirst: _ctx.isFirstStep,
       isLast: _ctx.isLastStep,
       index: _ctx.index
@@ -1065,6 +1075,10 @@ function useVOnboarding(wrapperRef) {
     var _a;
     return (_a = wrapperRef == null ? void 0 : wrapperRef.value) == null ? void 0 : _a.finish();
   };
+  const exit = () => {
+    var _a;
+    return (_a = wrapperRef == null ? void 0 : wrapperRef.value) == null ? void 0 : _a.exit();
+  };
   const goToStep = (newStepNumber) => {
     var _a;
     return (_a = wrapperRef == null ? void 0 : wrapperRef.value) == null ? void 0 : _a.goToStep(newStepNumber);
@@ -1072,6 +1086,7 @@ function useVOnboarding(wrapperRef) {
   return {
     start,
     finish,
+    exit,
     goToStep
   };
 }

package/dist/v-onboarding.umd.js

@@ -1,12 +1,12 @@
-(function(N,r){typeof exports=="object"&&typeof module!="undefined"?r(exports,require("vue"),require("@popperjs/core")):typeof define=="function"&&define.amd?define(["exports","vue","@popperjs/core"],r):(N=typeof globalThis!="undefined"?globalThis:N||self,r(N["v-onboarding"]={},N.Vue,N.core))})(this,function(N,r,ie){"use strict";function at(o){return typeof o=="string"?document.querySelector(o):typeof o=="function"?o():null}const st={popper:{},overlay:{enabled:!0,padding:0,borderRadius:0},scrollToStep:{enabled:!0,options:{behavior:"smooth",block:"center",inline:"center"}},labels:{previousButton:"Previous",nextButton:"Next",finishButton:"Finish"},hideButtons:{previous:!1,next:!1}};function ae(){var y,T,M,F;const o=r.ref(""),m=r.ref(null),B=r.ref((T=(y=st.overlay)==null?void 0:y.padding)!=null?T:0),_=r.ref((F=(M=st.overlay)==null?void 0:M.borderRadius)!=null?F:0),u=()=>{C(m.value,{padding:B.value,borderRadius:_.value})},C=async(v,x=st.overlay)=>{var Z,a,c,S,E,O,z,H,G,R,k,q;if(!v)return;const{innerWidth:D,innerHeight:j}=window,{left:P,top:w,width:Y,height:tt}=v.getBoundingClientRect(),$=typeof x.padding=="number"?{top:x.padding,right:x.padding,bottom:x.padding,left:x.padding}:x.padding,d=typeof x.borderRadius=="number"?{leftTop:x.borderRadius,rightTop:x.borderRadius,rightBottom:x.borderRadius,leftBottom:x.borderRadius}:x.borderRadius,f={top:w-((Z=$==null?void 0:$.top)!=null?Z:0),right:P+Y+((a=$==null?void 0:$.right)!=null?a:0),bottom:w+tt+((c=$==null?void 0:$.bottom)!=null?c:0),left:P-((S=$==null?void 0:$.left)!=null?S:0)},U={leftTop:`M${f.left+((E=d==null?void 0:d.leftTop)!=null?E:0)},${f.top} Q${f.left},${f.top} ${f.left},${f.top+((O=d==null?void 0:d.leftTop)!=null?O:0)}`,rightTop:`V${f.top+((z=d==null?void 0:d.rightTop)!=null?z:0)} Q${f.right},${f.top} ${f.right-((H=d==null?void 0:d.rightTop)!=null?H:0)},${f.top}`,rightBottom:`H${f.right-((G=d==null?void 0:d.rightBottom)!=null?G:0)} Q${f.right},${f.bottom} ${f.right},${f.bottom-((R=d==null?void 0:d.rightBottom)!=null?R:0)}`,leftBottom:`V${f.bottom-((k=d==null?void 0:d.leftBottom)!=null?k:0)} Q${f.left},${f.bottom} ${f.left+((q=d==null?void 0:d.leftBottom)!=null?q:0)},${f.bottom}`};o.value=`
-      M${D},${j}
+(function($,J){typeof exports=="object"&&typeof module!="undefined"?J(exports,require("@popperjs/core"),require("vue")):typeof define=="function"&&define.amd?define(["exports","@popperjs/core","vue"],J):($=typeof globalThis!="undefined"?globalThis:$||self,J($["v-onboarding"]={},$.core,$.Vue))})(this,function($,J,o){"use strict";const Nt=Symbol("onboardingState"),mt={IDLE:-1,FINISHED:-2};var rt=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},vt={exports:{}};(function(r,b){var h=200,m="__lodash_hash_undefined__",f=800,s=16,v=9007199254740991,N="[object Arguments]",V="[object Array]",H="[object AsyncFunction]",S="[object Boolean]",T="[object Date]",I="[object Error]",B="[object Function]",L="[object GeneratorFunction]",j="[object Map]",P="[object Number]",w="[object Null]",a="[object Object]",l="[object Proxy]",u="[object RegExp]",x="[object Set]",O="[object String]",A="[object Undefined]",M="[object WeakMap]",D="[object ArrayBuffer]",k="[object DataView]",U="[object Float32Array]",G="[object Float64Array]",R="[object Int8Array]",it="[object Int16Array]",at="[object Int32Array]",st="[object Uint8Array]",lt="[object Uint8ClampedArray]",Ce="[object Uint16Array]",Ee="[object Uint32Array]",$e=/[\\^$.*+?()[\]{}|]/g,Be=/^\[object .+?Constructor\]$/,je=/^(?:0|[1-9]\d*)$/,g={};g[U]=g[G]=g[R]=g[it]=g[at]=g[st]=g[lt]=g[Ce]=g[Ee]=!0,g[N]=g[V]=g[D]=g[S]=g[k]=g[T]=g[I]=g[B]=g[j]=g[P]=g[a]=g[u]=g[x]=g[O]=g[M]=!1;var zt=typeof rt=="object"&&rt&&rt.Object===Object&&rt,Ae=typeof self=="object"&&self&&self.Object===Object&&self,Y=zt||Ae||Function("return this")(),Ft=b&&!b.nodeType&&b,X=Ft&&!0&&r&&!r.nodeType&&r,Ht=X&&X.exports===Ft,yt=Ht&&zt.process,Pt=function(){try{var t=X&&X.require&&X.require("util").types;return t||yt&&yt.binding&&yt.binding("util")}catch{}}(),Mt=Pt&&Pt.isTypedArray;function Ne(t,e,n){switch(n.length){case 0:return t.call(e);case 1:return t.call(e,n[0]);case 2:return t.call(e,n[0],n[1]);case 3:return t.call(e,n[0],n[1],n[2])}return t.apply(e,n)}function Ve(t,e){for(var n=-1,i=Array(t);++n<t;)i[n]=e(n);return i}function Ie(t){return function(e){return t(e)}}function Le(t,e){return t==null?void 0:t[e]}function ze(t,e){return function(n){return t(e(n))}}var Fe=Array.prototype,He=Function.prototype,ct=Object.prototype,Tt=Y["__core-js_shared__"],dt=He.toString,z=ct.hasOwnProperty,Dt=function(){var t=/[^.]+$/.exec(Tt&&Tt.keys&&Tt.keys.IE_PROTO||"");return t?"Symbol(src)_1."+t:""}(),kt=ct.toString,Pe=dt.call(Object),Me=RegExp("^"+dt.call(z).replace($e,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),ut=Ht?Y.Buffer:void 0,Ut=Y.Symbol,Gt=Y.Uint8Array,Rt=ut?ut.allocUnsafe:void 0,qt=ze(Object.getPrototypeOf,Object),Kt=Object.create,De=ct.propertyIsEnumerable,ke=Fe.splice,q=Ut?Ut.toStringTag:void 0,ft=function(){try{var t=xt(Object,"defineProperty");return t({},"",{}),t}catch{}}(),Ue=ut?ut.isBuffer:void 0,Wt=Math.max,Ge=Date.now,Qt=xt(Y,"Map"),tt=xt(Object,"create"),Re=function(){function t(){}return function(e){if(!W(e))return{};if(Kt)return Kt(e);t.prototype=e;var n=new t;return t.prototype=void 0,n}}();function K(t){var e=-1,n=t==null?0:t.length;for(this.clear();++e<n;){var i=t[e];this.set(i[0],i[1])}}function qe(){this.__data__=tt?tt(null):{},this.size=0}function Ke(t){var e=this.has(t)&&delete this.__data__[t];return this.size-=e?1:0,e}function We(t){var e=this.__data__;if(tt){var n=e[t];return n===m?void 0:n}return z.call(e,t)?e[t]:void 0}function Qe(t){var e=this.__data__;return tt?e[t]!==void 0:z.call(e,t)}function Ze(t,e){var n=this.__data__;return this.size+=this.has(t)?0:1,n[t]=tt&&e===void 0?m:e,this}K.prototype.clear=qe,K.prototype.delete=Ke,K.prototype.get=We,K.prototype.has=Qe,K.prototype.set=Ze;function F(t){var e=-1,n=t==null?0:t.length;for(this.clear();++e<n;){var i=t[e];this.set(i[0],i[1])}}function Je(){this.__data__=[],this.size=0}function Ye(t){var e=this.__data__,n=pt(e,t);if(n<0)return!1;var i=e.length-1;return n==i?e.pop():ke.call(e,n,1),--this.size,!0}function Xe(t){var e=this.__data__,n=pt(e,t);return n<0?void 0:e[n][1]}function tn(t){return pt(this.__data__,t)>-1}function en(t,e){var n=this.__data__,i=pt(n,t);return i<0?(++this.size,n.push([t,e])):n[i][1]=e,this}F.prototype.clear=Je,F.prototype.delete=Ye,F.prototype.get=Xe,F.prototype.has=tn,F.prototype.set=en;function Q(t){var e=-1,n=t==null?0:t.length;for(this.clear();++e<n;){var i=t[e];this.set(i[0],i[1])}}function nn(){this.size=0,this.__data__={hash:new K,map:new(Qt||F),string:new K}}function rn(t){var e=gt(this,t).delete(t);return this.size-=e?1:0,e}function on(t){return gt(this,t).get(t)}function an(t){return gt(this,t).has(t)}function sn(t,e){var n=gt(this,t),i=n.size;return n.set(t,e),this.size+=n.size==i?0:1,this}Q.prototype.clear=nn,Q.prototype.delete=rn,Q.prototype.get=on,Q.prototype.has=an,Q.prototype.set=sn;function Z(t){var e=this.__data__=new F(t);this.size=e.size}function ln(){this.__data__=new F,this.size=0}function cn(t){var e=this.__data__,n=e.delete(t);return this.size=e.size,n}function dn(t){return this.__data__.get(t)}function un(t){return this.__data__.has(t)}function fn(t,e){var n=this.__data__;if(n instanceof F){var i=n.__data__;if(!Qt||i.length<h-1)return i.push([t,e]),this.size=++n.size,this;n=this.__data__=new Q(i)}return n.set(t,e),this.size=n.size,this}Z.prototype.clear=ln,Z.prototype.delete=cn,Z.prototype.get=dn,Z.prototype.has=un,Z.prototype.set=fn;function pn(t,e){var n=Et(t),i=!n&&Ct(t),d=!n&&!i&&te(t),p=!n&&!i&&!d&&ne(t),_=n||i||d||p,c=_?Ve(t.length,String):[],y=c.length;for(var E in t)(e||z.call(t,E))&&!(_&&(E=="length"||d&&(E=="offset"||E=="parent")||p&&(E=="buffer"||E=="byteLength"||E=="byteOffset")||Yt(E,y)))&&c.push(E);return c}function St(t,e,n){(n!==void 0&&!bt(t[e],n)||n===void 0&&!(e in t))&&wt(t,e,n)}function hn(t,e,n){var i=t[e];(!(z.call(t,e)&&bt(i,n))||n===void 0&&!(e in t))&&wt(t,e,n)}function pt(t,e){for(var n=t.length;n--;)if(bt(t[n][0],e))return n;return-1}function wt(t,e,n){e=="__proto__"&&ft?ft(t,e,{configurable:!0,enumerable:!0,value:n,writable:!0}):t[e]=n}var gn=$n();function ht(t){return t==null?t===void 0?A:w:q&&q in Object(t)?Bn(t):Ln(t)}function Zt(t){return et(t)&&ht(t)==N}function bn(t){if(!W(t)||Vn(t))return!1;var e=Bt(t)?Me:Be;return e.test(Pn(t))}function mn(t){return et(t)&&ee(t.length)&&!!g[ht(t)]}function vn(t){if(!W(t))return In(t);var e=Xt(t),n=[];for(var i in t)i=="constructor"&&(e||!z.call(t,i))||n.push(i);return n}function Jt(t,e,n,i,d){t!==e&&gn(e,function(p,_){if(d||(d=new Z),W(p))_n(t,e,_,n,Jt,i,d);else{var c=i?i(Ot(t,_),p,_+"",t,e,d):void 0;c===void 0&&(c=p),St(t,_,c)}},re)}function _n(t,e,n,i,d,p,_){var c=Ot(t,n),y=Ot(e,n),E=_.get(y);if(E){St(t,n,E);return}var C=p?p(c,y,n+"",t,e,_):void 0,nt=C===void 0;if(nt){var jt=Et(y),At=!jt&&te(y),ie=!jt&&!At&&ne(y);C=y,jt||At||ie?Et(c)?C=c:Mn(c)?C=On(c):At?(nt=!1,C=Sn(y,!0)):ie?(nt=!1,C=xn(y,!0)):C=[]:Dn(y)||Ct(y)?(C=c,Ct(c)?C=kn(c):(!W(c)||Bt(c))&&(C=jn(y))):nt=!1}nt&&(_.set(y,C),d(C,y,i,p,_),_.delete(y)),St(t,n,C)}function yn(t,e){return Fn(zn(t,e,oe),t+"")}var Tn=ft?function(t,e){return ft(t,"toString",{configurable:!0,enumerable:!1,value:Gn(e),writable:!0})}:oe;function Sn(t,e){if(e)return t.slice();var n=t.length,i=Rt?Rt(n):new t.constructor(n);return t.copy(i),i}function wn(t){var e=new t.constructor(t.byteLength);return new Gt(e).set(new Gt(t)),e}function xn(t,e){var n=e?wn(t.buffer):t.buffer;return new t.constructor(n,t.byteOffset,t.length)}function On(t,e){var n=-1,i=t.length;for(e||(e=Array(i));++n<i;)e[n]=t[n];return e}function Cn(t,e,n,i){var d=!n;n||(n={});for(var p=-1,_=e.length;++p<_;){var c=e[p],y=i?i(n[c],t[c],c,n,t):void 0;y===void 0&&(y=t[c]),d?wt(n,c,y):hn(n,c,y)}return n}function En(t){return yn(function(e,n){var i=-1,d=n.length,p=d>1?n[d-1]:void 0,_=d>2?n[2]:void 0;for(p=t.length>3&&typeof p=="function"?(d--,p):void 0,_&&An(n[0],n[1],_)&&(p=d<3?void 0:p,d=1),e=Object(e);++i<d;){var c=n[i];c&&t(e,c,i,p)}return e})}function $n(t){return function(e,n,i){for(var d=-1,p=Object(e),_=i(e),c=_.length;c--;){var y=_[t?c:++d];if(n(p[y],y,p)===!1)break}return e}}function gt(t,e){var n=t.__data__;return Nn(e)?n[typeof e=="string"?"string":"hash"]:n.map}function xt(t,e){var n=Le(t,e);return bn(n)?n:void 0}function Bn(t){var e=z.call(t,q),n=t[q];try{t[q]=void 0;var i=!0}catch{}var d=kt.call(t);return i&&(e?t[q]=n:delete t[q]),d}function jn(t){return typeof t.constructor=="function"&&!Xt(t)?Re(qt(t)):{}}function Yt(t,e){var n=typeof t;return e=e==null?v:e,!!e&&(n=="number"||n!="symbol"&&je.test(t))&&t>-1&&t%1==0&&t<e}function An(t,e,n){if(!W(n))return!1;var i=typeof e;return(i=="number"?$t(n)&&Yt(e,n.length):i=="string"&&e in n)?bt(n[e],t):!1}function Nn(t){var e=typeof t;return e=="string"||e=="number"||e=="symbol"||e=="boolean"?t!=="__proto__":t===null}function Vn(t){return!!Dt&&Dt in t}function Xt(t){var e=t&&t.constructor,n=typeof e=="function"&&e.prototype||ct;return t===n}function In(t){var e=[];if(t!=null)for(var n in Object(t))e.push(n);return e}function Ln(t){return kt.call(t)}function zn(t,e,n){return e=Wt(e===void 0?t.length-1:e,0),function(){for(var i=arguments,d=-1,p=Wt(i.length-e,0),_=Array(p);++d<p;)_[d]=i[e+d];d=-1;for(var c=Array(e+1);++d<e;)c[d]=i[d];return c[e]=n(_),Ne(t,this,c)}}function Ot(t,e){if(!(e==="constructor"&&typeof t[e]=="function")&&e!="__proto__")return t[e]}var Fn=Hn(Tn);function Hn(t){var e=0,n=0;return function(){var i=Ge(),d=s-(i-n);if(n=i,d>0){if(++e>=f)return arguments[0]}else e=0;return t.apply(void 0,arguments)}}function Pn(t){if(t!=null){try{return dt.call(t)}catch{}try{return t+""}catch{}}return""}function bt(t,e){return t===e||t!==t&&e!==e}var Ct=Zt(function(){return arguments}())?Zt:function(t){return et(t)&&z.call(t,"callee")&&!De.call(t,"callee")},Et=Array.isArray;function $t(t){return t!=null&&ee(t.length)&&!Bt(t)}function Mn(t){return et(t)&&$t(t)}var te=Ue||Rn;function Bt(t){if(!W(t))return!1;var e=ht(t);return e==B||e==L||e==H||e==l}function ee(t){return typeof t=="number"&&t>-1&&t%1==0&&t<=v}function W(t){var e=typeof t;return t!=null&&(e=="object"||e=="function")}function et(t){return t!=null&&typeof t=="object"}function Dn(t){if(!et(t)||ht(t)!=a)return!1;var e=qt(t);if(e===null)return!0;var n=z.call(e,"constructor")&&e.constructor;return typeof n=="function"&&n instanceof n&&dt.call(n)==Pe}var ne=Mt?Ie(Mt):mn;function kn(t){return Cn(t,re(t))}function re(t){return $t(t)?pn(t,!0):vn(t)}var Un=En(function(t,e,n){Jt(t,e,n)});function Gn(t){return function(){return t}}function oe(t){return t}function Rn(){return!1}r.exports=Un})(vt,vt.exports);var Vt=vt.exports;function _t(r){return typeof r=="string"?document.querySelector(r):typeof r=="function"?r():null}const ot={popper:{},overlay:{enabled:!0,padding:0,borderRadius:0},scrollToStep:{enabled:!0,options:{behavior:"smooth",block:"center",inline:"center"}},labels:{previousButton:"Previous",nextButton:"Next",finishButton:"Finish"},hideButtons:{previous:!1,next:!1}};function ae(){var v,N,V,H;const r=o.ref(""),b=o.ref(null),h=o.ref((N=(v=ot.overlay)==null?void 0:v.padding)!=null?N:0),m=o.ref((H=(V=ot.overlay)==null?void 0:V.borderRadius)!=null?H:0),f=()=>{s(b.value,{padding:h.value,borderRadius:m.value})},s=async(S,T=ot.overlay)=>{var O,A,M,D,k,U,G,R,it,at,st,lt;if(!S)return;const{innerWidth:I,innerHeight:B}=window,{left:L,top:j,width:P,height:w}=S.getBoundingClientRect(),a=typeof T.padding=="number"?{top:T.padding,right:T.padding,bottom:T.padding,left:T.padding}:T.padding,l=typeof T.borderRadius=="number"?{leftTop:T.borderRadius,rightTop:T.borderRadius,rightBottom:T.borderRadius,leftBottom:T.borderRadius}:T.borderRadius,u={top:j-((O=a==null?void 0:a.top)!=null?O:0),right:L+P+((A=a==null?void 0:a.right)!=null?A:0),bottom:j+w+((M=a==null?void 0:a.bottom)!=null?M:0),left:L-((D=a==null?void 0:a.left)!=null?D:0)},x={leftTop:`M${u.left+((k=l==null?void 0:l.leftTop)!=null?k:0)},${u.top} Q${u.left},${u.top} ${u.left},${u.top+((U=l==null?void 0:l.leftTop)!=null?U:0)}`,rightTop:`V${u.top+((G=l==null?void 0:l.rightTop)!=null?G:0)} Q${u.right},${u.top} ${u.right-((R=l==null?void 0:l.rightTop)!=null?R:0)},${u.top}`,rightBottom:`H${u.right-((it=l==null?void 0:l.rightBottom)!=null?it:0)} Q${u.right},${u.bottom} ${u.right},${u.bottom-((at=l==null?void 0:l.rightBottom)!=null?at:0)}`,leftBottom:`V${u.bottom-((st=l==null?void 0:l.leftBottom)!=null?st:0)} Q${u.left},${u.bottom} ${u.left+((lt=l==null?void 0:l.leftBottom)!=null?lt:0)},${u.bottom}`};r.value=`
+      M${I},${B}
       H0V0
-      H${D}V${j}
+      H${I}V${B}
       Z
-      ${U.leftTop}
-      ${U.leftBottom}
-      ${U.rightBottom}
-      ${U.rightTop}
+      ${x.leftTop}
+      ${x.leftBottom}
+      ${x.rightBottom}
+      ${x.rightTop}
       Z
-    `,m.value=v,B.value=$,_.value=d};return r.onMounted(()=>{window.addEventListener("scroll",u),window.addEventListener("resize",u)}),r.onUnmounted(()=>{window.removeEventListener("scroll",u),window.removeEventListener("resize",u)}),{path:o,updatePath:C}}var lt=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},_t={exports:{}};(function(o,m){var B=200,_="__lodash_hash_undefined__",u=800,C=16,y=9007199254740991,T="[object Arguments]",M="[object Array]",F="[object AsyncFunction]",v="[object Boolean]",x="[object Date]",D="[object Error]",j="[object Function]",P="[object GeneratorFunction]",w="[object Map]",Y="[object Number]",tt="[object Null]",$="[object Object]",d="[object Proxy]",f="[object RegExp]",U="[object Set]",Z="[object String]",a="[object Undefined]",c="[object WeakMap]",S="[object ArrayBuffer]",E="[object DataView]",O="[object Float32Array]",z="[object Float64Array]",H="[object Int8Array]",G="[object Int16Array]",R="[object Int32Array]",k="[object Uint8Array]",q="[object Uint8ClampedArray]",ct="[object Uint16Array]",dt="[object Uint32Array]",xe=/[\\^$.*+?()[\]{}|]/g,$e=/^\[object .+?Constructor\]$/,Be=/^(?:0|[1-9]\d*)$/,h={};h[O]=h[z]=h[H]=h[G]=h[R]=h[k]=h[q]=h[ct]=h[dt]=!0,h[T]=h[M]=h[S]=h[v]=h[E]=h[x]=h[D]=h[j]=h[w]=h[Y]=h[$]=h[f]=h[U]=h[Z]=h[c]=!1;var Pt=typeof lt=="object"&&lt&&lt.Object===Object&&lt,Ce=typeof self=="object"&&self&&self.Object===Object&&self,et=Pt||Ce||Function("return this")(),It=m&&!m.nodeType&&m,nt=It&&!0&&o&&!o.nodeType&&o,Lt=nt&&nt.exports===It,yt=Lt&&Pt.process,Mt=function(){try{var t=nt&&nt.require&&nt.require("util").types;return t||yt&&yt.binding&&yt.binding("util")}catch{}}(),Ft=Mt&&Mt.isTypedArray;function Ee(t,e,n){switch(n.length){case 0:return t.call(e);case 1:return t.call(e,n[0]);case 2:return t.call(e,n[0],n[1]);case 3:return t.call(e,n[0],n[1],n[2])}return t.apply(e,n)}function Oe(t,e){for(var n=-1,i=Array(t);++n<t;)i[n]=e(n);return i}function Ae(t){return function(e){return t(e)}}function Ve(t,e){return t==null?void 0:t[e]}function Ne(t,e){return function(n){return t(e(n))}}var je=Array.prototype,ze=Function.prototype,ut=Object.prototype,Tt=et["__core-js_shared__"],ft=ze.toString,I=ut.hasOwnProperty,Dt=function(){var t=/[^.]+$/.exec(Tt&&Tt.keys&&Tt.keys.IE_PROTO||"");return t?"Symbol(src)_1."+t:""}(),Ut=ut.toString,Pe=ft.call(Object),Ie=RegExp("^"+ft.call(I).replace(xe,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),pt=Lt?et.Buffer:void 0,Ht=et.Symbol,Gt=et.Uint8Array,Rt=pt?pt.allocUnsafe:void 0,kt=Ne(Object.getPrototypeOf,Object),qt=Object.create,Le=ut.propertyIsEnumerable,Me=je.splice,W=Ht?Ht.toStringTag:void 0,ht=function(){try{var t=xt(Object,"defineProperty");return t({},"",{}),t}catch{}}(),Fe=pt?pt.isBuffer:void 0,Wt=Math.max,De=Date.now,Kt=xt(et,"Map"),rt=xt(Object,"create"),Ue=function(){function t(){}return function(e){if(!Q(e))return{};if(qt)return qt(e);t.prototype=e;var n=new t;return t.prototype=void 0,n}}();function K(t){var e=-1,n=t==null?0:t.length;for(this.clear();++e<n;){var i=t[e];this.set(i[0],i[1])}}function He(){this.__data__=rt?rt(null):{},this.size=0}function Ge(t){var e=this.has(t)&&delete this.__data__[t];return this.size-=e?1:0,e}function Re(t){var e=this.__data__;if(rt){var n=e[t];return n===_?void 0:n}return I.call(e,t)?e[t]:void 0}function ke(t){var e=this.__data__;return rt?e[t]!==void 0:I.call(e,t)}function qe(t,e){var n=this.__data__;return this.size+=this.has(t)?0:1,n[t]=rt&&e===void 0?_:e,this}K.prototype.clear=He,K.prototype.delete=Ge,K.prototype.get=Re,K.prototype.has=ke,K.prototype.set=qe;function L(t){var e=-1,n=t==null?0:t.length;for(this.clear();++e<n;){var i=t[e];this.set(i[0],i[1])}}function We(){this.__data__=[],this.size=0}function Ke(t){var e=this.__data__,n=gt(e,t);if(n<0)return!1;var i=e.length-1;return n==i?e.pop():Me.call(e,n,1),--this.size,!0}function Qe(t){var e=this.__data__,n=gt(e,t);return n<0?void 0:e[n][1]}function Ze(t){return gt(this.__data__,t)>-1}function Je(t,e){var n=this.__data__,i=gt(n,t);return i<0?(++this.size,n.push([t,e])):n[i][1]=e,this}L.prototype.clear=We,L.prototype.delete=Ke,L.prototype.get=Qe,L.prototype.has=Ze,L.prototype.set=Je;function J(t){var e=-1,n=t==null?0:t.length;for(this.clear();++e<n;){var i=t[e];this.set(i[0],i[1])}}function Xe(){this.size=0,this.__data__={hash:new K,map:new(Kt||L),string:new K}}function Ye(t){var e=mt(this,t).delete(t);return this.size-=e?1:0,e}function tn(t){return mt(this,t).get(t)}function en(t){return mt(this,t).has(t)}function nn(t,e){var n=mt(this,t),i=n.size;return n.set(t,e),this.size+=n.size==i?0:1,this}J.prototype.clear=Xe,J.prototype.delete=Ye,J.prototype.get=tn,J.prototype.has=en,J.prototype.set=nn;function X(t){var e=this.__data__=new L(t);this.size=e.size}function rn(){this.__data__=new L,this.size=0}function on(t){var e=this.__data__,n=e.delete(t);return this.size=e.size,n}function an(t){return this.__data__.get(t)}function sn(t){return this.__data__.has(t)}function ln(t,e){var n=this.__data__;if(n instanceof L){var i=n.__data__;if(!Kt||i.length<B-1)return i.push([t,e]),this.size=++n.size,this;n=this.__data__=new J(i)}return n.set(t,e),this.size=n.size,this}X.prototype.clear=rn,X.prototype.delete=on,X.prototype.get=an,X.prototype.has=sn,X.prototype.set=ln;function cn(t,e){var n=Ct(t),i=!n&&Bt(t),l=!n&&!i&&Yt(t),p=!n&&!i&&!l&&ee(t),g=n||i||l||p,s=g?Oe(t.length,String):[],b=s.length;for(var V in t)(e||I.call(t,V))&&!(g&&(V=="length"||l&&(V=="offset"||V=="parent")||p&&(V=="buffer"||V=="byteLength"||V=="byteOffset")||Jt(V,b)))&&s.push(V);return s}function wt(t,e,n){(n!==void 0&&!vt(t[e],n)||n===void 0&&!(e in t))&&St(t,e,n)}function dn(t,e,n){var i=t[e];(!(I.call(t,e)&&vt(i,n))||n===void 0&&!(e in t))&&St(t,e,n)}function gt(t,e){for(var n=t.length;n--;)if(vt(t[n][0],e))return n;return-1}function St(t,e,n){e=="__proto__"&&ht?ht(t,e,{configurable:!0,enumerable:!0,value:n,writable:!0}):t[e]=n}var un=xn();function bt(t){return t==null?t===void 0?a:tt:W&&W in Object(t)?$n(t):Vn(t)}function Qt(t){return ot(t)&&bt(t)==T}function fn(t){if(!Q(t)||On(t))return!1;var e=Ot(t)?Ie:$e;return e.test(Pn(t))}function pn(t){return ot(t)&&te(t.length)&&!!h[bt(t)]}function hn(t){if(!Q(t))return An(t);var e=Xt(t),n=[];for(var i in t)i=="constructor"&&(e||!I.call(t,i))||n.push(i);return n}function Zt(t,e,n,i,l){t!==e&&un(e,function(p,g){if(l||(l=new X),Q(p))gn(t,e,g,n,Zt,i,l);else{var s=i?i($t(t,g),p,g+"",t,e,l):void 0;s===void 0&&(s=p),wt(t,g,s)}},ne)}function gn(t,e,n,i,l,p,g){var s=$t(t,n),b=$t(e,n),V=g.get(b);if(V){wt(t,n,V);return}var A=p?p(s,b,n+"",t,e,g):void 0,it=A===void 0;if(it){var At=Ct(b),Vt=!At&&Yt(b),oe=!At&&!Vt&&ee(b);A=b,At||Vt||oe?Ct(s)?A=s:In(s)?A=Tn(s):Vt?(it=!1,A=vn(b,!0)):oe?(it=!1,A=yn(b,!0)):A=[]:Ln(b)||Bt(b)?(A=s,Bt(s)?A=Mn(s):(!Q(s)||Ot(s))&&(A=Bn(b))):it=!1}it&&(g.set(b,A),l(A,b,i,p,g),g.delete(b)),wt(t,n,A)}function bn(t,e){return jn(Nn(t,e,re),t+"")}var mn=ht?function(t,e){return ht(t,"toString",{configurable:!0,enumerable:!1,value:Dn(e),writable:!0})}:re;function vn(t,e){if(e)return t.slice();var n=t.length,i=Rt?Rt(n):new t.constructor(n);return t.copy(i),i}function _n(t){var e=new t.constructor(t.byteLength);return new Gt(e).set(new Gt(t)),e}function yn(t,e){var n=e?_n(t.buffer):t.buffer;return new t.constructor(n,t.byteOffset,t.length)}function Tn(t,e){var n=-1,i=t.length;for(e||(e=Array(i));++n<i;)e[n]=t[n];return e}function wn(t,e,n,i){var l=!n;n||(n={});for(var p=-1,g=e.length;++p<g;){var s=e[p],b=i?i(n[s],t[s],s,n,t):void 0;b===void 0&&(b=t[s]),l?St(n,s,b):dn(n,s,b)}return n}function Sn(t){return bn(function(e,n){var i=-1,l=n.length,p=l>1?n[l-1]:void 0,g=l>2?n[2]:void 0;for(p=t.length>3&&typeof p=="function"?(l--,p):void 0,g&&Cn(n[0],n[1],g)&&(p=l<3?void 0:p,l=1),e=Object(e);++i<l;){var s=n[i];s&&t(e,s,i,p)}return e})}function xn(t){return function(e,n,i){for(var l=-1,p=Object(e),g=i(e),s=g.length;s--;){var b=g[t?s:++l];if(n(p[b],b,p)===!1)break}return e}}function mt(t,e){var n=t.__data__;return En(e)?n[typeof e=="string"?"string":"hash"]:n.map}function xt(t,e){var n=Ve(t,e);return fn(n)?n:void 0}function $n(t){var e=I.call(t,W),n=t[W];try{t[W]=void 0;var i=!0}catch{}var l=Ut.call(t);return i&&(e?t[W]=n:delete t[W]),l}function Bn(t){return typeof t.constructor=="function"&&!Xt(t)?Ue(kt(t)):{}}function Jt(t,e){var n=typeof t;return e=e==null?y:e,!!e&&(n=="number"||n!="symbol"&&Be.test(t))&&t>-1&&t%1==0&&t<e}function Cn(t,e,n){if(!Q(n))return!1;var i=typeof e;return(i=="number"?Et(n)&&Jt(e,n.length):i=="string"&&e in n)?vt(n[e],t):!1}function En(t){var e=typeof t;return e=="string"||e=="number"||e=="symbol"||e=="boolean"?t!=="__proto__":t===null}function On(t){return!!Dt&&Dt in t}function Xt(t){var e=t&&t.constructor,n=typeof e=="function"&&e.prototype||ut;return t===n}function An(t){var e=[];if(t!=null)for(var n in Object(t))e.push(n);return e}function Vn(t){return Ut.call(t)}function Nn(t,e,n){return e=Wt(e===void 0?t.length-1:e,0),function(){for(var i=arguments,l=-1,p=Wt(i.length-e,0),g=Array(p);++l<p;)g[l]=i[e+l];l=-1;for(var s=Array(e+1);++l<e;)s[l]=i[l];return s[e]=n(g),Ee(t,this,s)}}function $t(t,e){if(!(e==="constructor"&&typeof t[e]=="function")&&e!="__proto__")return t[e]}var jn=zn(mn);function zn(t){var e=0,n=0;return function(){var i=De(),l=C-(i-n);if(n=i,l>0){if(++e>=u)return arguments[0]}else e=0;return t.apply(void 0,arguments)}}function Pn(t){if(t!=null){try{return ft.call(t)}catch{}try{return t+""}catch{}}return""}function vt(t,e){return t===e||t!==t&&e!==e}var Bt=Qt(function(){return arguments}())?Qt:function(t){return ot(t)&&I.call(t,"callee")&&!Le.call(t,"callee")},Ct=Array.isArray;function Et(t){return t!=null&&te(t.length)&&!Ot(t)}function In(t){return ot(t)&&Et(t)}var Yt=Fe||Un;function Ot(t){if(!Q(t))return!1;var e=bt(t);return e==j||e==P||e==F||e==d}function te(t){return typeof t=="number"&&t>-1&&t%1==0&&t<=y}function Q(t){var e=typeof t;return t!=null&&(e=="object"||e=="function")}function ot(t){return t!=null&&typeof t=="object"}function Ln(t){if(!ot(t)||bt(t)!=$)return!1;var e=kt(t);if(e===null)return!0;var n=I.call(e,"constructor")&&e.constructor;return typeof n=="function"&&n instanceof n&&ft.call(n)==Pe}var ee=Ft?Ae(Ft):pn;function Mn(t){return wn(t,ne(t))}function ne(t){return Et(t)?cn(t,!0):hn(t)}var Fn=Sn(function(t,e,n){Zt(t,e,n)});function Dn(t){return function(){return t}}function re(t){return t}function Un(){return!1}o.exports=Fn})(_t,_t.exports);var Nt=_t.exports,jt=(o,m)=>{const B=o.__vccOpts||o;for(const[_,u]of m)B[_]=u;return B};const se=r.defineComponent({name:"VOnboardingStep",setup(o,{slots:m}){const B=r.ref(!1),_=r.inject("next-step",()=>{}),u=r.inject("previous-step",()=>{}),C=r.inject("exit",()=>{}),y=r.inject("options"),T=r.computed(()=>Nt({},y==null?void 0:y.value,v.value.options)),M=r.inject("is-first-step"),F=r.inject("is-last-step"),v=r.inject("step",{}),x=r.computed(()=>{var a,c;return{previous:!((a=T.value.hideButtons)!=null&&a.previous),next:!((c=T.value.hideButtons)!=null&&c.next)}}),D=r.computed(()=>{var a,c,S,E,O,z;return{previous:(c=(a=T.value)==null?void 0:a.labels)==null?void 0:c.previousButton,next:(E=(S=T.value)==null?void 0:S.labels)==null?void 0:E.nextButton,finish:(z=(O=T.value)==null?void 0:O.labels)==null?void 0:z.finishButton}}),j=()=>{f(),_()},P=()=>{f(),u()};r.watch(()=>v.value,(a,c)=>{var S;!((S=m.default)!=null&&S.call(m))||f(c)});const w=r.ref(null),{updatePath:Y,path:tt}=ae(),$=()=>{var c,S,E,O,z,H,G,R,k,q,ct,dt;const a=at((S=(c=v==null?void 0:v.value)==null?void 0:c.attachTo)==null?void 0:S.element);a&&w.value&&(B.value=!0,(O=(E=T.value)==null?void 0:E.scrollToStep)!=null&&O.enabled&&a.scrollIntoView((H=(z=T.value)==null?void 0:z.scrollToStep)==null?void 0:H.options),ie.createPopper(a,w.value,T.value.popper),(R=(G=T.value)==null?void 0:G.overlay)!=null&&R.enabled&&Y(a,{padding:(q=(k=T.value)==null?void 0:k.overlay)==null?void 0:q.padding,borderRadius:(dt=(ct=T.value)==null?void 0:ct.overlay)==null?void 0:dt.borderRadius}),U(a))},d=async()=>{var a,c,S;await((S=(c=(a=v==null?void 0:v.value)==null?void 0:a.on)==null?void 0:c.beforeStep)==null?void 0:S.call(c)),$()},f=(a=v.value)=>{var c,S,E,O;(S=(c=a==null?void 0:a.on)==null?void 0:c.afterStep)==null||S.call(c),Z(at((E=a==null?void 0:a.attachTo)==null?void 0:E.element),(O=a==null?void 0:a.attachTo)==null?void 0:O.classList)},U=(a=at(v.value.attachTo.element))=>{const c=v.value.attachTo.classList;!c||!a||a.classList.add(...c)},Z=(a=at(v.value.attachTo.element),c)=>{!c||!a||a.classList.remove(...c)};return r.onMounted(d),{stepElement:w,onNext:j,onPrevious:P,path:tt,show:B,step:v,isFirst:M,isLast:F,exit:C,isButtonVisible:x,buttonLabels:D}}}),le={style:{width:"100%",height:"100%",position:"fixed",top:"0",left:"0",opacity:"0.5","z-index":"var(--v-onboarding-overlay-z, 10)","pointer-events":"none"}},ce=["d"],de={ref:"stepElement",style:{position:"relative","z-index":"var(--v-onboarding-step-z, 20)"}},ue={class:"v-onboarding-item"},fe={class:"v-onboarding-item__header"},pe={key:0,class:"v-onboarding-item__header-title"},he=[r.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-4 w-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"},[r.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M6 18L18 6M6 6l12 12"})],-1)],ge={key:0,class:"v-onboarding-item__description"},be={class:"v-onboarding-item__actions"},me=r.createElementVNode("div",{"data-popper-arrow":""},null,-1);function ve(o,m,B,_,u,C){return r.withDirectives((r.openBlock(),r.createElementBlock("div",null,[(r.openBlock(),r.createElementBlock("svg",le,[r.createElementVNode("path",{d:o.path},null,8,ce)])),r.createElementVNode("div",de,[o.step?r.renderSlot(o.$slots,"default",{key:0},()=>[r.createElementVNode("div",ue,[r.createElementVNode("div",fe,[o.step.content.title?(r.openBlock(),r.createElementBlock("span",pe,r.toDisplayString(o.step.content.title),1)):r.createCommentVNode("",!0),r.createElementVNode("button",{onClick:m[0]||(m[0]=(...y)=>o.exit&&o.exit(...y)),class:"v-onboarding-item__header-close"},he)]),o.step.content.description?(r.openBlock(),r.createElementBlock("p",ge,r.toDisplayString(o.step.content.description),1)):r.createCommentVNode("",!0),r.createElementVNode("div",be,[!o.isFirst&&o.isButtonVisible.previous?(r.openBlock(),r.createElementBlock("button",{key:0,type:"button",onClick:m[1]||(m[1]=(...y)=>o.onPrevious&&o.onPrevious(...y)),class:"v-onboarding-btn-secondary"},r.toDisplayString(o.buttonLabels.previous),1)):r.createCommentVNode("",!0),o.isButtonVisible.next?(r.openBlock(),r.createElementBlock("button",{key:1,onClick:m[2]||(m[2]=(...y)=>o.onNext&&o.onNext(...y)),type:"button",class:"v-onboarding-btn-primary"},r.toDisplayString(o.isLast?o.buttonLabels.finish:o.buttonLabels.next),1)):r.createCommentVNode("",!0)])])]):r.createCommentVNode("",!0),me],512)],512)),[[r.vShow,o.show]])}var zt=jt(se,[["render",ve]]);const _e=r.defineComponent({name:"VOnboardingWrapper",components:{VOnboardingStep:zt},props:{steps:{type:Array,default:()=>[]},options:{type:Object,default:()=>({})}},emits:["exit"],setup(o,{expose:m,emit:B}){const _=r.ref(-1),u=w=>{typeof w=="function"?_.value=w(_.value):_.value=w},C=r.computed(()=>{var w;return((w=o.steps)==null?void 0:w[_.value])||null}),y=()=>{u(w=>w-1)},T=()=>{u(w=>w+1)},M=r.computed(()=>_.value>=o.steps.length||_.value<0),F=()=>{u(0)},v=()=>{u(-1)},x=()=>{v(),B("exit")};m({start:F,finish:v,goToStep:u});const D=r.computed(()=>Nt({},st,o.options));r.provide("options",D),r.provide("step",C),r.provide("next-step",T),r.provide("previous-step",y),r.provide("exit",x);const j=r.computed(()=>_.value===0),P=r.computed(()=>_.value===o.steps.length-1);return r.provide("is-first-step",j),r.provide("is-last-step",P),{index:_,activeStep:C,toPreviousStep:y,toNextStep:T,isFinished:M,setIndex:u,isFirstStep:j,isLastStep:P,finish:v}}}),ye={key:0,"data-v-onboarding-wrapper":""};function Te(o,m,B,_,u,C){const y=r.resolveComponent("VOnboardingStep");return o.isFinished?r.createCommentVNode("",!0):(r.openBlock(),r.createElementBlock("div",ye,[r.renderSlot(o.$slots,"default",{key:o.index,step:o.activeStep,next:()=>o.toNextStep(),previous:()=>o.toPreviousStep(),exit:()=>o.finish(),isFirst:o.isFirstStep,isLast:o.isLastStep,index:o.index},()=>[(r.openBlock(),r.createBlock(y,{key:o.index}))])]))}var we=jt(_e,[["render",Te]]);function Se(o){return{start:()=>{var u;return(u=o==null?void 0:o.value)==null?void 0:u.start()},finish:()=>{var u;return(u=o==null?void 0:o.value)==null?void 0:u.finish()},goToStep:u=>{var C;return(C=o==null?void 0:o.value)==null?void 0:C.goToStep(u)}}}var Gn=(()=>`.v-onboarding-item{width:20rem;padding:1rem;background-color:#fff;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border-radius:.375rem}.v-onboarding-item__header{display:flex;justify-content:space-between}.v-onboarding-item__header-title{font-size:1.25rem;font-weight:500;line-height:1.5}.v-onboarding-item__header-close{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%}.v-onboarding-item__header-close:hover{background:rgba(0,0,0,.1)}.v-onboarding-item__description{font-size:.875rem;color:#71717a;margin-top:.5rem}.v-onboarding-item__actions{display:flex;margin-top:1rem}.v-onboarding-item__actions>:not([hidden])~:not([hidden]){margin-left:.5rem}.v-onboarding-item__actions button{display:inline-flex;flex:1;align-items:center;justify-content:center;padding:.5rem 1.25rem;border-width:1px;border-style:solid;font-size:1rem;font-weight:500;box-shadow:0 1px 2px #0000000d;border-radius:9999px;background-color:transparent;background-image:none;cursor:pointer}.v-onboarding-item__actions button.v-onboarding-btn-primary{border-color:transparent;color:#fff;background-color:#4f46e5}.v-onboarding-item__actions button.v-onboarding-btn-primary:hover{background-color:#4338ca}.v-onboarding-item__actions button.v-onboarding-btn-secondary{border-color:#d4d4d8;color:#3f3f46}.v-onboarding-item__actions button.v-onboarding-btn-secondary:hover{background-color:#fafafa}[data-v-onboarding-wrapper] [data-popper-arrow]:before{content:"";background:var(--v-onboarding-step-arrow-background, white);top:0;left:0;transition:transform .2s ease-out,visibility .2s ease-out;visibility:visible;transform:translate(0) rotate(45deg);transform-origin:center;width:var(--v-onboarding-step-arrow-size, 10px);height:var(--v-onboarding-step-arrow-size, 10px);position:absolute;z-index:-1}[data-v-onboarding-wrapper] [data-popper-placement^=top]>[data-popper-arrow]{bottom:5px}[data-v-onboarding-wrapper] [data-popper-placement^=right]>[data-popper-arrow]{left:-4px}[data-v-onboarding-wrapper] [data-popper-placement^=bottom]>[data-popper-arrow]{top:-4px}[data-v-onboarding-wrapper] [data-popper-placement^=left]>[data-popper-arrow]{right:-4px}
-`)();N.VOnboardingStep=zt,N.VOnboardingWrapper=we,N.useVOnboarding=Se,Object.defineProperties(N,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+    `,b.value=S,h.value=a,m.value=l};return o.onMounted(()=>{window.addEventListener("scroll",f),window.addEventListener("resize",f)}),o.onUnmounted(()=>{window.removeEventListener("scroll",f),window.removeEventListener("resize",f)}),{path:r,updatePath:s}}var It=(r,b)=>{const h=r.__vccOpts||r;for(const[m,f]of b)h[m]=f;return h};const se=o.defineComponent({name:"VOnboardingStep",setup(){const r=o.ref(!1),b=o.inject(Nt,{}),{step:h,isFirstStep:m,isLastStep:f,options:s,next:v,previous:N,exit:V,finish:H}=o.toRefs(b.value),S=o.computed(()=>Vt({},s==null?void 0:s.value,h.value.options)),T=o.computed(()=>{var w,a;return{previous:!((w=S.value.hideButtons)!=null&&w.previous),next:!((a=S.value.hideButtons)!=null&&a.next)}}),I=o.computed(()=>{var w,a,l,u,x,O;return{previous:(a=(w=S.value)==null?void 0:w.labels)==null?void 0:a.previousButton,next:(u=(l=S.value)==null?void 0:l.labels)==null?void 0:u.nextButton,finish:(O=(x=S.value)==null?void 0:x.labels)==null?void 0:O.finishButton}}),{updatePath:B,path:L}=ae(),j=o.ref(),P=()=>{var a,l,u,x,O,A,M,D,k,U,G,R;const w=_t((l=(a=h==null?void 0:h.value)==null?void 0:a.attachTo)==null?void 0:l.element);w&&j.value&&(r.value=!0,(x=(u=S.value)==null?void 0:u.scrollToStep)!=null&&x.enabled&&w.scrollIntoView((A=(O=S.value)==null?void 0:O.scrollToStep)==null?void 0:A.options),J.createPopper(w,j.value,S.value.popper),(D=(M=S.value)==null?void 0:M.overlay)!=null&&D.enabled&&B(w,{padding:(U=(k=S.value)==null?void 0:k.overlay)==null?void 0:U.padding,borderRadius:(R=(G=S.value)==null?void 0:G.overlay)==null?void 0:R.borderRadius}))};return o.onMounted(P),{stepElement:j,next:v,previous:N,path:L,show:r,step:h,isFirstStep:m,isLastStep:f,exit:V,finish:H,isButtonVisible:T,buttonLabels:I}}}),le={style:{width:"100%",height:"100%",position:"fixed",top:"0",left:"0",opacity:"0.5","z-index":"var(--v-onboarding-overlay-z, 10)","pointer-events":"none"}},ce=["d"],de={ref:"stepElement",style:{position:"relative","z-index":"var(--v-onboarding-step-z, 20)"}},ue={class:"v-onboarding-item"},fe={class:"v-onboarding-item__header"},pe={key:0,class:"v-onboarding-item__header-title"},he=[o.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",class:"h-4 w-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"},[o.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M6 18L18 6M6 6l12 12"})],-1)],ge={key:0,class:"v-onboarding-item__description"},be={class:"v-onboarding-item__actions"},me=o.createElementVNode("div",{"data-popper-arrow":""},null,-1);function ve(r,b,h,m,f,s){return o.withDirectives((o.openBlock(),o.createElementBlock("div",null,[(o.openBlock(),o.createElementBlock("svg",le,[o.createElementVNode("path",{d:r.path},null,8,ce)])),o.createElementVNode("div",de,[r.step?o.renderSlot(r.$slots,"default",{key:0},()=>[o.createElementVNode("div",ue,[o.createElementVNode("div",fe,[r.step.content.title?(o.openBlock(),o.createElementBlock("span",pe,o.toDisplayString(r.step.content.title),1)):o.createCommentVNode("",!0),o.createElementVNode("button",{onClick:b[0]||(b[0]=(...v)=>r.exit&&r.exit(...v)),"finish,":"",class:"v-onboarding-item__header-close"},he)]),r.step.content.description?(o.openBlock(),o.createElementBlock("p",ge,o.toDisplayString(r.step.content.description),1)):o.createCommentVNode("",!0),o.createElementVNode("div",be,[!r.isFirstStep&&r.isButtonVisible.previous?(o.openBlock(),o.createElementBlock("button",{key:0,type:"button",onClick:b[1]||(b[1]=(...v)=>r.previous&&r.previous(...v)),class:"v-onboarding-btn-secondary"},o.toDisplayString(r.buttonLabels.previous),1)):o.createCommentVNode("",!0),r.isButtonVisible.next?(o.openBlock(),o.createElementBlock("button",{key:1,onClick:b[2]||(b[2]=()=>r.isLastStep?r.finish():r.next()),type:"button",class:"v-onboarding-btn-primary"},o.toDisplayString(r.isLastStep?r.buttonLabels.finish:r.buttonLabels.next),1)):o.createCommentVNode("",!0)])])]):o.createCommentVNode("",!0),me],512)],512)),[[o.vShow,r.show]])}var Lt=It(se,[["render",ve]]);const _e=o.defineComponent({name:"VOnboardingWrapper",components:{VOnboardingStep:Lt},props:{steps:{type:Array,default:()=>[]},options:{type:Object,default:()=>({})}},emits:["finish","exit"],setup(r,{expose:b,emit:h}){const m=o.ref(mt.IDLE),f=o.ref(m.value),s=a=>{typeof a=="function"?m.value=a(m.value):m.value=a},{beforeHook:v,afterHook:N}=Te(),V=o.computed(()=>{var a;return(a=r.steps)==null?void 0:a[f.value]});o.watch(m,async(a,l)=>{var O,A;const u=(O=r.steps)==null?void 0:O[l];u&&await N(u);const x=(A=r.steps)==null?void 0:A[a];x&&await v(x),f.value=a});const H=o.computed(()=>f.value===mt.FINISHED),S=()=>s(0),T=()=>{s(mt.FINISHED),h("finish")},I=()=>h("exit");b({start:S,finish:T,goToStep:s});const B=()=>{s(a=>a-1)},L=()=>{const a=f.value+1;if(a===r.steps.length){T();return}s(a)},j=o.ref({step:V,options:o.computed(()=>Vt({},ot,r.options)),next:L,previous:B,finish:T,exit:I,isFirstStep:o.computed(()=>f.value===0),isLastStep:o.computed(()=>f.value===r.steps.length-1)});o.provide(Nt,j);const P=o.computed(()=>f.value===0),w=o.computed(()=>f.value===r.steps.length-1);return{index:m,activeStep:V,next:L,previous:B,isFinished:H,setIndex:s,isFirstStep:P,isLastStep:w,finish:T,exit:I}}});function ye(){return{setClassName:({element:h,classList:m=[]})=>{!h||h.classList.add(...m)},unsetClassName:({element:h,classList:m=[]})=>{!h||h.classList.remove(...m)}}}function Te(){const{setClassName:r,unsetClassName:b}=ye();return{beforeHook:f=>{var s,v;return b({element:_t(f.attachTo.element),classList:f.attachTo.classList}),(v=(s=f.on)==null?void 0:s.beforeStep)==null?void 0:v.call(s)},afterHook:f=>{var s,v;return r({element:_t(f.attachTo.element),classList:f.attachTo.classList}),(v=(s=f.on)==null?void 0:s.afterStep)==null?void 0:v.call(s)}}}const Se={key:0,"data-v-onboarding-wrapper":""};function we(r,b,h,m,f,s){const v=o.resolveComponent("VOnboardingStep");return r.isFinished?o.createCommentVNode("",!0):(o.openBlock(),o.createElementBlock("div",Se,[o.renderSlot(r.$slots,"default",{key:r.index,step:r.activeStep,next:r.next,previous:r.previous,exit:r.exit,isFirst:r.isFirstStep,isLast:r.isLastStep,index:r.index},()=>[(o.openBlock(),o.createBlock(v,{key:r.index}))])]))}var xe=It(_e,[["render",we]]);function Oe(r){return{start:()=>{var s;return(s=r==null?void 0:r.value)==null?void 0:s.start()},finish:()=>{var s;return(s=r==null?void 0:r.value)==null?void 0:s.finish()},exit:()=>{var s;return(s=r==null?void 0:r.value)==null?void 0:s.exit()},goToStep:s=>{var v;return(v=r==null?void 0:r.value)==null?void 0:v.goToStep(s)}}}var Kn=(()=>`.v-onboarding-item{width:20rem;padding:1rem;background-color:#fff;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border-radius:.375rem}.v-onboarding-item__header{display:flex;justify-content:space-between}.v-onboarding-item__header-title{font-size:1.25rem;font-weight:500;line-height:1.5}.v-onboarding-item__header-close{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%}.v-onboarding-item__header-close:hover{background:rgba(0,0,0,.1)}.v-onboarding-item__description{font-size:.875rem;color:#71717a;margin-top:.5rem}.v-onboarding-item__actions{display:flex;margin-top:1rem}.v-onboarding-item__actions>:not([hidden])~:not([hidden]){margin-left:.5rem}.v-onboarding-item__actions button{display:inline-flex;flex:1;align-items:center;justify-content:center;padding:.5rem 1.25rem;border-width:1px;border-style:solid;font-size:1rem;font-weight:500;box-shadow:0 1px 2px #0000000d;border-radius:9999px;background-color:transparent;background-image:none;cursor:pointer}.v-onboarding-item__actions button.v-onboarding-btn-primary{border-color:transparent;color:#fff;background-color:#4f46e5}.v-onboarding-item__actions button.v-onboarding-btn-primary:hover{background-color:#4338ca}.v-onboarding-item__actions button.v-onboarding-btn-secondary{border-color:#d4d4d8;color:#3f3f46}.v-onboarding-item__actions button.v-onboarding-btn-secondary:hover{background-color:#fafafa}[data-v-onboarding-wrapper] [data-popper-arrow]:before{content:"";background:var(--v-onboarding-step-arrow-background, white);top:0;left:0;transition:transform .2s ease-out,visibility .2s ease-out;visibility:visible;transform:translate(0) rotate(45deg);transform-origin:center;width:var(--v-onboarding-step-arrow-size, 10px);height:var(--v-onboarding-step-arrow-size, 10px);position:absolute;z-index:-1}[data-v-onboarding-wrapper] [data-popper-placement^=top]>[data-popper-arrow]{bottom:5px}[data-v-onboarding-wrapper] [data-popper-placement^=right]>[data-popper-arrow]{left:-4px}[data-v-onboarding-wrapper] [data-popper-placement^=bottom]>[data-popper-arrow]{top:-4px}[data-v-onboarding-wrapper] [data-popper-placement^=left]>[data-popper-arrow]{right:-4px}
+`)();$.VOnboardingStep=Lt,$.VOnboardingWrapper=xe,$.useVOnboarding=Oe,Object.defineProperties($,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-onboarding",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "v-onboarding is a super-slim, fully-typed onboarding component for Vue 3",
   "repository": {
     "type": "git",
@@ -44,7 +44,8 @@
     "demo:dev": "vite demo",
     "demo:build": "vite build demo",
     "semantic-release": "semantic-release --branches main",
-    "commit": "git-cz"
+    "commit": "git-cz",
+    "test": "vitest"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.5",
@@ -58,7 +59,9 @@
     "@types/lodash.merge": "^4.6.6",
     "@types/node": "^16.11.7",
     "@vitejs/plugin-vue": "^1.9.4",
+    "@vue/test-utils": "^2.2.10",
     "cz-conventional-changelog": "3.3.0",
+    "happy-dom": "^8.6.0",
     "lodash.merge": "^4.6.2",
     "minimist": "^1.2.5",
     "rollup-plugin-vue": "^6.0.0",
@@ -67,6 +70,7 @@
     "tsup": "^5.7.0",
     "unbuild": "^0.5.11",
     "vite": "^2.6.14",
+    "vitest": "^0.28.5",
     "vue-docgen-web-types": "^0.1.7"
   },
   "web-types": "web-types/web-types.json",

package/src/types/StepEntity.d.ts

@@ -9,7 +9,7 @@ export interface StepEntity {
   }
   on?: {
     beforeStep?: () => void | Promise<void>
-    afterStep?: () => void
+    afterStep?: () => void | Promise<void>
   },
   attachTo: {
     element: AttachableElement,

package/src/types/index.ts

@@ -0,0 +1,21 @@
+import { ComputedRef, InjectionKey, Ref } from "vue";
+import { StepEntity } from "./StepEntity";
+import { VOnboardingWrapperOptions } from "./VOnboardingWrapper";
+
+export interface OnboardingState {
+  step: ComputedRef<StepEntity>;
+  options: ComputedRef<VOnboardingWrapperOptions>;
+  next: () => void;
+  previous: () => void;
+  finish: () => void;
+  exit: () => void;
+  isFirstStep: ComputedRef<boolean>;
+  isLastStep: ComputedRef<boolean>;
+
+}
+export const STATE_INJECT_KEY = Symbol('onboardingState') as InjectionKey<Ref<OnboardingState>>
+
+export const OnboardingState = {
+  IDLE: -1,
+  FINISHED: -2
+}

package/web-types/web-types.json

@@ -42,6 +42,9 @@
             }
           ],
           "events": [
+            {
+              "name": "finish"
+            },
             {
               "name": "exit"
             }