v-onboarding 2.6.0 → 2.8.0

package/dist/style.css

@@ -1 +1 @@
-.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}
+.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-primary:focus{outline-color:#312e81}.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}

package/dist/v-onboarding.es.js

@@ -17,8 +17,21 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 import { createPopper } from "@popperjs/core";
-import { ref, onMounted, onUnmounted, defineComponent, inject, computed, watch, nextTick, withDirectives, openBlock, createElementBlock, createElementVNode, renderSlot, toDisplayString, createCommentVNode, vShow, provide, resolveComponent, createBlock } from "vue";
+import { getCurrentScope, onScopeDispose, unref, ref, watch, onMounted, onUnmounted, defineComponent, inject, computed, nextTick, withDirectives, openBlock, createElementBlock, createElementVNode, renderSlot, toDisplayString, createCommentVNode, vShow, provide, resolveComponent, createBlock } from "vue";
+import { createFocusTrap } from "focus-trap";
 const STATE_INJECT_KEY = Symbol("onboardingState");
 const OnboardingState = {
   IDLE: -1,
@@ -28,6 +41,69 @@ const Direction = {
   BACKWARD: -1,
   FORWARD: 1
 };
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+function toValue(r) {
+  return typeof r === "function" ? r() : unref(r);
+}
+typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
+function unrefElement(elRef) {
+  var _a;
+  const plain = toValue(elRef);
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+}
+function useFocusTrap(target, options = {}) {
+  let trap;
+  const _a = options, { immediate } = _a, focusTrapOptions = __objRest(_a, ["immediate"]);
+  const hasFocus = ref(false);
+  const isPaused = ref(false);
+  const activate = (opts) => trap && trap.activate(opts);
+  const deactivate = (opts) => trap && trap.deactivate(opts);
+  const pause = () => {
+    if (trap) {
+      trap.pause();
+      isPaused.value = true;
+    }
+  };
+  const unpause = () => {
+    if (trap) {
+      trap.unpause();
+      isPaused.value = false;
+    }
+  };
+  watch(() => unrefElement(target), (el) => {
+    if (!el)
+      return;
+    trap = createFocusTrap(el, __spreadProps(__spreadValues({}, focusTrapOptions), {
+      onActivate() {
+        hasFocus.value = true;
+        if (options.onActivate)
+          options.onActivate();
+      },
+      onDeactivate() {
+        hasFocus.value = false;
+        if (options.onDeactivate)
+          options.onDeactivate();
+      }
+    }));
+    if (immediate)
+      activate();
+  }, { flush: "post" });
+  tryOnScopeDispose(() => deactivate());
+  return {
+    hasFocus,
+    isPaused,
+    activate,
+    deactivate,
+    pause,
+    unpause
+  };
+}
 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) {
@@ -715,7 +791,8 @@ const defaultVOnboardingWrapperOptions = {
   overlay: {
     enabled: true,
     padding: 0,
-    borderRadius: 0
+    borderRadius: 0,
+    preventOverlayInteraction: true
   },
   scrollToStep: {
     enabled: true,
@@ -735,7 +812,8 @@ const defaultVOnboardingWrapperOptions = {
     previous: false,
     next: false,
     exit: false
-  }
+  },
+  hideNextStepDuringHook: false
 };
 function useSvgOverlay() {
   var _a, _b, _c, _d;
@@ -839,20 +917,29 @@ const _sfc_main$1 = defineComponent({
     });
     const { updatePath, path } = useSvgOverlay();
     const stepElement = ref();
+    const focusTrap = useFocusTrap(stepElement);
+    watch(show, async (value) => {
+      await nextTick();
+      if (value) {
+        focusTrap.activate();
+      } else {
+        focusTrap.deactivate();
+      }
+    });
     const attachElement = async () => {
-      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
       await nextTick();
       const element = useGetElement((_b = (_a = step == null ? void 0 : step.value) == null ? void 0 : _a.attachTo) == null ? void 0 : _b.element);
       if (element && stepElement.value) {
         show.value = true;
         if ((_d = (_c = mergedOptions.value) == null ? void 0 : _c.scrollToStep) == null ? void 0 : _d.enabled) {
-          element.scrollIntoView((_f = (_e = mergedOptions.value) == null ? void 0 : _e.scrollToStep) == null ? void 0 : _f.options);
+          (_g = element.scrollIntoView) == null ? void 0 : _g.call(element, (_f = (_e = mergedOptions.value) == null ? void 0 : _e.scrollToStep) == null ? void 0 : _f.options);
         }
         createPopper(element, stepElement.value, mergedOptions.value.popper);
-        if ((_h = (_g = mergedOptions.value) == null ? void 0 : _g.overlay) == null ? void 0 : _h.enabled) {
+        if ((_i = (_h = mergedOptions.value) == null ? void 0 : _h.overlay) == null ? void 0 : _i.enabled) {
           updatePath(element, {
-            padding: (_j = (_i = mergedOptions.value) == null ? void 0 : _i.overlay) == null ? void 0 : _j.padding,
-            borderRadius: (_l = (_k = mergedOptions.value) == null ? void 0 : _k.overlay) == null ? void 0 : _l.borderRadius
+            padding: (_k = (_j = mergedOptions.value) == null ? void 0 : _j.overlay) == null ? void 0 : _k.padding,
+            borderRadius: (_m = (_l = mergedOptions.value) == null ? void 0 : _l.overlay) == null ? void 0 : _m.borderRadius
           });
         }
       }
@@ -910,12 +997,13 @@ const _hoisted_7 = /* @__PURE__ */ createElementVNode("svg", {
 const _hoisted_8 = [
   _hoisted_7
 ];
-const _hoisted_9 = {
-  key: 0,
+const _hoisted_9 = ["innerHTML"];
+const _hoisted_10 = {
+  key: 1,
   class: "v-onboarding-item__description"
 };
-const _hoisted_10 = { class: "v-onboarding-item__actions" };
-const _hoisted_11 = /* @__PURE__ */ createElementVNode("div", { "data-popper-arrow": "" }, null, -1);
+const _hoisted_11 = { class: "v-onboarding-item__actions" };
+const _hoisted_12 = /* @__PURE__ */ createElementVNode("div", { "data-popper-arrow": "" }, null, -1);
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return withDirectives((openBlock(), createElementBlock("div", null, [
     (openBlock(), createElementBlock("svg", _hoisted_1$1, [
@@ -929,11 +1017,16 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             _ctx.isButtonVisible.exit ? (openBlock(), createElementBlock("button", {
               key: 1,
               onClick: _cache[0] || (_cache[0] = (...args) => _ctx.exit && _ctx.exit(...args)),
+              "aria-label": "Close",
               class: "v-onboarding-item__header-close"
             }, _hoisted_8)) : createCommentVNode("", true)
           ]),
-          _ctx.step.content.description ? (openBlock(), createElementBlock("p", _hoisted_9, toDisplayString(_ctx.step.content.description), 1)) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_10, [
+          _ctx.step.content.description && _ctx.step.content.html ? (openBlock(), createElementBlock("p", {
+            key: 0,
+            class: "v-onboarding-item__description",
+            innerHTML: _ctx.step.content.description
+          }, null, 8, _hoisted_9)) : _ctx.step.content.description ? (openBlock(), createElementBlock("p", _hoisted_10, toDisplayString(_ctx.step.content.description), 1)) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_11, [
             !_ctx.isFirstStep && _ctx.isButtonVisible.previous ? (openBlock(), createElementBlock("button", {
               key: 0,
               type: "button",
@@ -949,7 +1042,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         ])
       ]) : createCommentVNode("", true),
-      _hoisted_11
+      _hoisted_12
     ], 512)
   ], 512)), [
     [vShow, _ctx.show]
@@ -973,6 +1066,8 @@ const _sfc_main = defineComponent({
   },
   emits: ["finish", "exit"],
   setup(props, { expose, emit }) {
+    const mergedOptions = computed(() => merge({}, defaultVOnboardingWrapperOptions, props.options));
+    const showStep = ref(true);
     const index = ref(OnboardingState.IDLE);
     const privateIndex = ref(index.value);
     const setIndex = (value) => {
@@ -982,13 +1077,19 @@ const _sfc_main = defineComponent({
         index.value = value;
       }
     };
-    const { beforeHook, afterHook } = useStepHooks();
     const activeStep = computed(() => {
       var _a;
       return (_a = props.steps) == null ? void 0 : _a[privateIndex.value];
     });
+    const activeStepMergedOptions = computed(() => {
+      return activeStep.value ? merge({}, mergedOptions.value, activeStep.value.options) : mergedOptions.value;
+    });
+    const mergeOptions = (step) => {
+      return merge({}, mergedOptions.value, step.options);
+    };
+    const { beforeHook, afterHook } = useStepHooks(activeStepMergedOptions);
     watch(index, async (newIndex, oldIndex) => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       const direction = newIndex < oldIndex ? Direction.BACKWARD : Direction.FORWARD;
       const globalHookOptions = {
         direction,
@@ -1001,6 +1102,7 @@ const _sfc_main = defineComponent({
           index: oldIndex,
           step: oldStep
         });
+        removePointerEvents(useGetElement(oldStep.attachTo.element));
         await afterHook(oldStep, afterHookOptions);
       }
       const newStep = (_b = props.steps) == null ? void 0 : _b[newIndex];
@@ -1009,10 +1111,30 @@ const _sfc_main = defineComponent({
           index: newIndex,
           step: newStep
         });
+        removePointerEvents(useGetElement(newStep.attachTo.element));
+        if ((_c = mergeOptions(newStep)) == null ? void 0 : _c.hideNextStepDuringHook) {
+          showStep.value = false;
+        }
         await beforeHook(newStep, beforeHookOptions);
       }
       privateIndex.value = newIndex;
+      showStep.value = true;
+      removePointerEvents(useGetElement("body"));
+      if ((_d = activeStepMergedOptions.value.overlay) == null ? void 0 : _d.preventOverlayInteraction) {
+        updateBodyPointerEvents();
+      }
     });
+    const { addPointerEvents, removePointerEvents } = useSetPointerEvents();
+    const updateBodyPointerEvents = () => {
+      const body = useGetElement("body");
+      if (!body)
+        return;
+      if ([OnboardingState.IDLE, OnboardingState.FINISHED].includes(privateIndex.value)) {
+        removePointerEvents(body);
+      } else {
+        addPointerEvents(body, "none");
+      }
+    };
     const isFinished = computed(() => {
       return privateIndex.value === OnboardingState.FINISHED;
     });
@@ -1040,7 +1162,7 @@ const _sfc_main = defineComponent({
     };
     const state = computed(() => ({
       step: activeStep,
-      options: computed(() => merge({}, defaultVOnboardingWrapperOptions, props.options)),
+      options: mergedOptions,
       next,
       previous,
       finish,
@@ -1059,7 +1181,8 @@ const _sfc_main = defineComponent({
       isFirstStep: state.value.isFirstStep,
       isLastStep: state.value.isLastStep,
       finish,
-      exit
+      exit,
+      showStep
     };
   }
 });
@@ -1076,28 +1199,62 @@ function useSetElementClassName() {
   };
   return { setClassName, unsetClassName };
 }
-function useStepHooks() {
+function useSetPointerEvents() {
+  const pointerEventsDataAttribute = "data-v-onboarding-pointer-events";
+  const addPointerEvents = (element, value = "auto") => {
+    if (!element)
+      return;
+    const currentPointerEvents = element.style.pointerEvents;
+    if (currentPointerEvents) {
+      element.setAttribute(pointerEventsDataAttribute, currentPointerEvents);
+    }
+    element.style.setProperty("pointer-events", value);
+  };
+  const removePointerEvents = (element) => {
+    if (!element)
+      return;
+    const storedPointerEvent = element.getAttribute(pointerEventsDataAttribute);
+    if (storedPointerEvent) {
+      element.style.setProperty("pointer-events", storedPointerEvent);
+      element.removeAttribute(pointerEventsDataAttribute);
+    } else {
+      element.style.removeProperty("pointer-events");
+    }
+  };
+  return { addPointerEvents, removePointerEvents };
+}
+function useStepHooks(stepOptions) {
   const { setClassName, unsetClassName } = useSetElementClassName();
+  const { addPointerEvents, removePointerEvents } = useSetPointerEvents();
   const beforeHook = (step, options) => {
-    var _a, _b;
-    setClassName({ 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, options);
+    var _a, _b, _c, _d;
+    const element = useGetElement(step.attachTo.element);
+    if ((_b = (_a = stepOptions.value) == null ? void 0 : _a.overlay) == null ? void 0 : _b.preventOverlayInteraction) {
+      addPointerEvents(element);
+    }
+    setClassName({ element, classList: step.attachTo.classList });
+    return (_d = (_c = step.on) == null ? void 0 : _c.beforeStep) == null ? void 0 : _d.call(_c, options);
   };
   const afterHook = (step, options) => {
-    var _a, _b;
-    unsetClassName({ 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, options);
+    var _a, _b, _c, _d;
+    const element = useGetElement(step.attachTo.element);
+    if ((_b = (_a = stepOptions.value) == null ? void 0 : _a.overlay) == null ? void 0 : _b.preventOverlayInteraction) {
+      removePointerEvents(element);
+    }
+    unsetClassName({ element, classList: step.attachTo.classList });
+    return (_d = (_c = step.on) == null ? void 0 : _c.afterStep) == null ? void 0 : _d.call(_c, options);
   };
   return { beforeHook, afterHook };
 }
 const _hoisted_1 = {
   key: 0,
-  "data-v-onboarding-wrapper": ""
+  "data-v-onboarding-wrapper": "",
+  style: { "pointer-events": "auto" }
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_VOnboardingStep = resolveComponent("VOnboardingStep");
   return !_ctx.isFinished ? (openBlock(), createElementBlock("div", _hoisted_1, [
-    renderSlot(_ctx.$slots, "default", {
+    _ctx.showStep ? renderSlot(_ctx.$slots, "default", {
       key: _ctx.index,
       step: _ctx.activeStep,
       next: _ctx.next,
@@ -1108,7 +1265,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       index: _ctx.index
     }, () => [
       (openBlock(), createBlock(_component_VOnboardingStep, { key: _ctx.index }))
-    ])
+    ]) : createCommentVNode("", true)
   ])) : createCommentVNode("", true);
 }
 var VOnboardingWrapper = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
@@ -1136,5 +1293,5 @@ function useVOnboarding(wrapperRef) {
     goToStep
   };
 }
-var vOnboarding = /* @__PURE__ */ (() => '.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')();
+var vOnboarding = /* @__PURE__ */ (() => '.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-primary:focus{outline-color:#312e81}.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')();
 export { VOnboardingStep, VOnboardingWrapper, useVOnboarding };

package/dist/v-onboarding.umd.js

@@ -1,12 +1,12 @@
-(function(x,O){typeof exports=="object"&&typeof module!="undefined"?O(exports,require("@popperjs/core"),require("vue")):typeof define=="function"&&define.amd?define(["exports","@popperjs/core","vue"],O):(x=typeof globalThis!="undefined"?globalThis:x||self,O(x["v-onboarding"]={},x.core,x.Vue))})(this,function(x,O,r){"use strict";var Jn=Object.defineProperty,Yn=Object.defineProperties;var Xn=Object.getOwnPropertyDescriptors;var ce=Object.getOwnPropertySymbols;var tr=Object.prototype.hasOwnProperty,er=Object.prototype.propertyIsEnumerable;var de=(x,O,r)=>O in x?Jn(x,O,{enumerable:!0,configurable:!0,writable:!0,value:r}):x[O]=r,Vt=(x,O)=>{for(var r in O||(O={}))tr.call(O,r)&&de(x,r,O[r]);if(ce)for(var r of ce(O))er.call(O,r)&&de(x,r,O[r]);return x},Lt=(x,O)=>Yn(x,Xn(O));const Ft=Symbol("onboardingState"),vt={IDLE:-1,FINISHED:-2},ot={BACKWARD:-1,FORWARD:1};var it=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},_t={exports:{}};(function(o,m){var h=200,v="__lodash_hash_undefined__",f=800,u=16,p=9007199254740991,C="[object Arguments]",F="[object Array]",I="[object AsyncFunction]",S="[object Boolean]",w="[object Date]",z="[object Error]",L="[object Function]",D="[object GeneratorFunction]",j="[object Map]",T="[object Number]",P="[object Null]",c="[object Object]",a="[object Proxy]",s="[object RegExp]",B="[object Set]",E="[object String]",A="[object Undefined]",V="[object WeakMap]",M="[object ArrayBuffer]",R="[object DataView]",U="[object Float32Array]",G="[object Float64Array]",W="[object Int8Array]",K="[object Int16Array]",st="[object Int32Array]",lt="[object Uint8Array]",ct="[object Uint8ClampedArray]",je="[object Uint16Array]",Ne="[object Uint32Array]",Ve=/[\\^$.*+?()[\]{}|]/g,Le=/^\[object .+?Constructor\]$/,Fe=/^(?:0|[1-9]\d*)$/,b={};b[U]=b[G]=b[W]=b[K]=b[st]=b[lt]=b[ct]=b[je]=b[Ne]=!0,b[C]=b[F]=b[M]=b[S]=b[R]=b[w]=b[z]=b[L]=b[j]=b[T]=b[c]=b[s]=b[B]=b[E]=b[V]=!1;var kt=typeof it=="object"&&it&&it.Object===Object&&it,Ie=typeof self=="object"&&self&&self.Object===Object&&self,X=kt||Ie||Function("return this")(),Ht=m&&!m.nodeType&&m,tt=Ht&&!0&&o&&!o.nodeType&&o,Pt=tt&&tt.exports===Ht,Tt=Pt&&kt.process,Mt=function(){try{var t=tt&&tt.require&&tt.require("util").types;return t||Tt&&Tt.binding&&Tt.binding("util")}catch{}}(),Rt=Mt&&Mt.isTypedArray;function ze(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 De(t,e){for(var n=-1,i=Array(t);++n<t;)i[n]=e(n);return i}function ke(t){return function(e){return t(e)}}function He(t,e){return t==null?void 0:t[e]}function Pe(t,e){return function(n){return t(e(n))}}var Me=Array.prototype,Re=Function.prototype,dt=Object.prototype,St=X["__core-js_shared__"],ut=Re.toString,k=dt.hasOwnProperty,Ut=function(){var t=/[^.]+$/.exec(St&&St.keys&&St.keys.IE_PROTO||"");return t?"Symbol(src)_1."+t:""}(),Gt=dt.toString,Ue=ut.call(Object),Ge=RegExp("^"+ut.call(k).replace(Ve,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),ft=Pt?X.Buffer:void 0,Wt=X.Symbol,Kt=X.Uint8Array,qt=ft?ft.allocUnsafe:void 0,Qt=Pe(Object.getPrototypeOf,Object),Zt=Object.create,We=dt.propertyIsEnumerable,Ke=Me.splice,q=Wt?Wt.toStringTag:void 0,pt=function(){try{var t=Ot(Object,"defineProperty");return t({},"",{}),t}catch{}}(),qe=ft?ft.isBuffer:void 0,Jt=Math.max,Qe=Date.now,Yt=Ot(X,"Map"),et=Ot(Object,"create"),Ze=function(){function t(){}return function(e){if(!Z(e))return{};if(Zt)return Zt(e);t.prototype=e;var n=new t;return t.prototype=void 0,n}}();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 Je(){this.__data__=et?et(null):{},this.size=0}function Ye(t){var e=this.has(t)&&delete this.__data__[t];return this.size-=e?1:0,e}function Xe(t){var e=this.__data__;if(et){var n=e[t];return n===v?void 0:n}return k.call(e,t)?e[t]:void 0}function tn(t){var e=this.__data__;return et?e[t]!==void 0:k.call(e,t)}function en(t,e){var n=this.__data__;return this.size+=this.has(t)?0:1,n[t]=et&&e===void 0?v:e,this}Q.prototype.clear=Je,Q.prototype.delete=Ye,Q.prototype.get=Xe,Q.prototype.has=tn,Q.prototype.set=en;function H(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.__data__=[],this.size=0}function rn(t){var e=this.__data__,n=ht(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 on(t){var e=this.__data__,n=ht(e,t);return n<0?void 0:e[n][1]}function an(t){return ht(this.__data__,t)>-1}function sn(t,e){var n=this.__data__,i=ht(n,t);return i<0?(++this.size,n.push([t,e])):n[i][1]=e,this}H.prototype.clear=nn,H.prototype.delete=rn,H.prototype.get=on,H.prototype.has=an,H.prototype.set=sn;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 ln(){this.size=0,this.__data__={hash:new Q,map:new(Yt||H),string:new Q}}function cn(t){var e=bt(this,t).delete(t);return this.size-=e?1:0,e}function dn(t){return bt(this,t).get(t)}function un(t){return bt(this,t).has(t)}function fn(t,e){var n=bt(this,t),i=n.size;return n.set(t,e),this.size+=n.size==i?0:1,this}J.prototype.clear=ln,J.prototype.delete=cn,J.prototype.get=dn,J.prototype.has=un,J.prototype.set=fn;function Y(t){var e=this.__data__=new H(t);this.size=e.size}function pn(){this.__data__=new H,this.size=0}function hn(t){var e=this.__data__,n=e.delete(t);return this.size=e.size,n}function gn(t){return this.__data__.get(t)}function bn(t){return this.__data__.has(t)}function mn(t,e){var n=this.__data__;if(n instanceof H){var i=n.__data__;if(!Yt||i.length<h-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}Y.prototype.clear=pn,Y.prototype.delete=hn,Y.prototype.get=gn,Y.prototype.has=bn,Y.prototype.set=mn;function vn(t,e){var n=Et(t),i=!n&&Ct(t),d=!n&&!i&&re(t),g=!n&&!i&&!d&&ie(t),_=n||i||d||g,l=_?De(t.length,String):[],y=l.length;for(var N in t)(e||k.call(t,N))&&!(_&&(N=="length"||d&&(N=="offset"||N=="parent")||g&&(N=="buffer"||N=="byteLength"||N=="byteOffset")||ee(N,y)))&&l.push(N);return l}function wt(t,e,n){(n!==void 0&&!mt(t[e],n)||n===void 0&&!(e in t))&&xt(t,e,n)}function _n(t,e,n){var i=t[e];(!(k.call(t,e)&&mt(i,n))||n===void 0&&!(e in t))&&xt(t,e,n)}function ht(t,e){for(var n=t.length;n--;)if(mt(t[n][0],e))return n;return-1}function xt(t,e,n){e=="__proto__"&&pt?pt(t,e,{configurable:!0,enumerable:!0,value:n,writable:!0}):t[e]=n}var yn=Vn();function gt(t){return t==null?t===void 0?A:P:q&&q in Object(t)?Ln(t):Hn(t)}function Xt(t){return nt(t)&&gt(t)==C}function Tn(t){if(!Z(t)||Dn(t))return!1;var e=$t(t)?Ge:Le;return e.test(Un(t))}function Sn(t){return nt(t)&&oe(t.length)&&!!b[gt(t)]}function wn(t){if(!Z(t))return kn(t);var e=ne(t),n=[];for(var i in t)i=="constructor"&&(e||!k.call(t,i))||n.push(i);return n}function te(t,e,n,i,d){t!==e&&yn(e,function(g,_){if(d||(d=new Y),Z(g))xn(t,e,_,n,te,i,d);else{var l=i?i(Bt(t,_),g,_+"",t,e,d):void 0;l===void 0&&(l=g),wt(t,_,l)}},ae)}function xn(t,e,n,i,d,g,_){var l=Bt(t,n),y=Bt(e,n),N=_.get(y);if(N){wt(t,n,N);return}var $=g?g(l,y,n+"",t,e,_):void 0,rt=$===void 0;if(rt){var jt=Et(y),Nt=!jt&&re(y),le=!jt&&!Nt&&ie(y);$=y,jt||Nt||le?Et(l)?$=l:Gn(l)?$=$n(l):Nt?(rt=!1,$=Cn(y,!0)):le?(rt=!1,$=An(y,!0)):$=[]:Wn(y)||Ct(y)?($=l,Ct(l)?$=Kn(l):(!Z(l)||$t(l))&&($=Fn(y))):rt=!1}rt&&(_.set(y,$),d($,y,i,g,_),_.delete(y)),wt(t,n,$)}function On(t,e){return Mn(Pn(t,e,se),t+"")}var Bn=pt?function(t,e){return pt(t,"toString",{configurable:!0,enumerable:!1,value:Qn(e),writable:!0})}:se;function Cn(t,e){if(e)return t.slice();var n=t.length,i=qt?qt(n):new t.constructor(n);return t.copy(i),i}function En(t){var e=new t.constructor(t.byteLength);return new Kt(e).set(new Kt(t)),e}function An(t,e){var n=e?En(t.buffer):t.buffer;return new t.constructor(n,t.byteOffset,t.length)}function $n(t,e){var n=-1,i=t.length;for(e||(e=Array(i));++n<i;)e[n]=t[n];return e}function jn(t,e,n,i){var d=!n;n||(n={});for(var g=-1,_=e.length;++g<_;){var l=e[g],y=i?i(n[l],t[l],l,n,t):void 0;y===void 0&&(y=t[l]),d?xt(n,l,y):_n(n,l,y)}return n}function Nn(t){return On(function(e,n){var i=-1,d=n.length,g=d>1?n[d-1]:void 0,_=d>2?n[2]:void 0;for(g=t.length>3&&typeof g=="function"?(d--,g):void 0,_&&In(n[0],n[1],_)&&(g=d<3?void 0:g,d=1),e=Object(e);++i<d;){var l=n[i];l&&t(e,l,i,g)}return e})}function Vn(t){return function(e,n,i){for(var d=-1,g=Object(e),_=i(e),l=_.length;l--;){var y=_[t?l:++d];if(n(g[y],y,g)===!1)break}return e}}function bt(t,e){var n=t.__data__;return zn(e)?n[typeof e=="string"?"string":"hash"]:n.map}function Ot(t,e){var n=He(t,e);return Tn(n)?n:void 0}function Ln(t){var e=k.call(t,q),n=t[q];try{t[q]=void 0;var i=!0}catch{}var d=Gt.call(t);return i&&(e?t[q]=n:delete t[q]),d}function Fn(t){return typeof t.constructor=="function"&&!ne(t)?Ze(Qt(t)):{}}function ee(t,e){var n=typeof t;return e=e==null?p:e,!!e&&(n=="number"||n!="symbol"&&Fe.test(t))&&t>-1&&t%1==0&&t<e}function In(t,e,n){if(!Z(n))return!1;var i=typeof e;return(i=="number"?At(n)&&ee(e,n.length):i=="string"&&e in n)?mt(n[e],t):!1}function zn(t){var e=typeof t;return e=="string"||e=="number"||e=="symbol"||e=="boolean"?t!=="__proto__":t===null}function Dn(t){return!!Ut&&Ut in t}function ne(t){var e=t&&t.constructor,n=typeof e=="function"&&e.prototype||dt;return t===n}function kn(t){var e=[];if(t!=null)for(var n in Object(t))e.push(n);return e}function Hn(t){return Gt.call(t)}function Pn(t,e,n){return e=Jt(e===void 0?t.length-1:e,0),function(){for(var i=arguments,d=-1,g=Jt(i.length-e,0),_=Array(g);++d<g;)_[d]=i[e+d];d=-1;for(var l=Array(e+1);++d<e;)l[d]=i[d];return l[e]=n(_),ze(t,this,l)}}function Bt(t,e){if(!(e==="constructor"&&typeof t[e]=="function")&&e!="__proto__")return t[e]}var Mn=Rn(Bn);function Rn(t){var e=0,n=0;return function(){var i=Qe(),d=u-(i-n);if(n=i,d>0){if(++e>=f)return arguments[0]}else e=0;return t.apply(void 0,arguments)}}function Un(t){if(t!=null){try{return ut.call(t)}catch{}try{return t+""}catch{}}return""}function mt(t,e){return t===e||t!==t&&e!==e}var Ct=Xt(function(){return arguments}())?Xt:function(t){return nt(t)&&k.call(t,"callee")&&!We.call(t,"callee")},Et=Array.isArray;function At(t){return t!=null&&oe(t.length)&&!$t(t)}function Gn(t){return nt(t)&&At(t)}var re=qe||Zn;function $t(t){if(!Z(t))return!1;var e=gt(t);return e==L||e==D||e==I||e==a}function oe(t){return typeof t=="number"&&t>-1&&t%1==0&&t<=p}function Z(t){var e=typeof t;return t!=null&&(e=="object"||e=="function")}function nt(t){return t!=null&&typeof t=="object"}function Wn(t){if(!nt(t)||gt(t)!=c)return!1;var e=Qt(t);if(e===null)return!0;var n=k.call(e,"constructor")&&e.constructor;return typeof n=="function"&&n instanceof n&&ut.call(n)==Ue}var ie=Rt?ke(Rt):Sn;function Kn(t){return jn(t,ae(t))}function ae(t){return At(t)?vn(t,!0):wn(t)}var qn=Nn(function(t,e,n){te(t,e,n)});function Qn(t){return function(){return t}}function se(t){return t}function Zn(){return!1}o.exports=qn})(_t,_t.exports);var It=_t.exports;function yt(o){return typeof o=="string"?document.querySelector(o):typeof o=="function"?o():null}const at={popper:{},overlay:{enabled:!0,padding:0,borderRadius:0},scrollToStep:{enabled:!0,options:{behavior:"smooth",block:"center",inline:"center"}},autoFinishByExit:!0,labels:{previousButton:"Previous",nextButton:"Next",finishButton:"Finish"},hideButtons:{previous:!1,next:!1,exit:!1}};function ue(){var p,C,F,I;const o=r.ref(""),m=r.ref(null),h=r.ref((C=(p=at.overlay)==null?void 0:p.padding)!=null?C:0),v=r.ref((I=(F=at.overlay)==null?void 0:F.borderRadius)!=null?I:0),f=()=>{u(m.value,{padding:h.value,borderRadius:v.value})},u=async(S,w=at.overlay)=>{var E,A,V,M,R,U,G,W,K,st,lt,ct;if(!S)return;const{innerWidth:z,innerHeight:L}=window,{left:D,top:j,width:T,height:P}=S.getBoundingClientRect(),c=typeof w.padding=="number"?{top:w.padding,right:w.padding,bottom:w.padding,left:w.padding}:w.padding,a=typeof w.borderRadius=="number"?{leftTop:w.borderRadius,rightTop:w.borderRadius,rightBottom:w.borderRadius,leftBottom:w.borderRadius}:w.borderRadius,s={top:j-((E=c==null?void 0:c.top)!=null?E:0),right:D+T+((A=c==null?void 0:c.right)!=null?A:0),bottom:j+P+((V=c==null?void 0:c.bottom)!=null?V:0),left:D-((M=c==null?void 0:c.left)!=null?M:0)},B={leftTop:`M${s.left+((R=a==null?void 0:a.leftTop)!=null?R:0)},${s.top} Q${s.left},${s.top} ${s.left},${s.top+((U=a==null?void 0:a.leftTop)!=null?U:0)}`,rightTop:`V${s.top+((G=a==null?void 0:a.rightTop)!=null?G:0)} Q${s.right},${s.top} ${s.right-((W=a==null?void 0:a.rightTop)!=null?W:0)},${s.top}`,rightBottom:`H${s.right-((K=a==null?void 0:a.rightBottom)!=null?K:0)} Q${s.right},${s.bottom} ${s.right},${s.bottom-((st=a==null?void 0:a.rightBottom)!=null?st:0)}`,leftBottom:`V${s.bottom-((lt=a==null?void 0:a.leftBottom)!=null?lt:0)} Q${s.left},${s.bottom} ${s.left+((ct=a==null?void 0:a.leftBottom)!=null?ct:0)},${s.bottom}`};o.value=`
-      M${z},${L}
+(function(g,B){typeof exports=="object"&&typeof module!="undefined"?B(exports,require("@popperjs/core"),require("vue"),require("focus-trap")):typeof define=="function"&&define.amd?define(["exports","@popperjs/core","vue","focus-trap"],B):(g=typeof globalThis!="undefined"?globalThis:g||self,B(g["v-onboarding"]={},g.core,g.Vue,g.focusTrap))})(this,function(g,B,o,F){"use strict";var sr=Object.defineProperty,lr=Object.defineProperties;var cr=Object.getOwnPropertyDescriptors;var St=Object.getOwnPropertySymbols;var pe=Object.prototype.hasOwnProperty,he=Object.prototype.propertyIsEnumerable;var fe=(g,B,o)=>B in g?sr(g,B,{enumerable:!0,configurable:!0,writable:!0,value:o}):g[B]=o,wt=(g,B)=>{for(var o in B||(B={}))pe.call(B,o)&&fe(g,o,B[o]);if(St)for(var o of St(B))he.call(B,o)&&fe(g,o,B[o]);return g},Ot=(g,B)=>lr(g,cr(B));var ge=(g,B)=>{var o={};for(var F in g)pe.call(g,F)&&B.indexOf(F)<0&&(o[F]=g[F]);if(g!=null&&St)for(var F of St(g))B.indexOf(F)<0&&he.call(g,F)&&(o[F]=g[F]);return o};const Ft=Symbol("onboardingState"),ot={IDLE:-1,FINISHED:-2},ut={BACKWARD:-1,FORWARD:1};function be(r){return o.getCurrentScope()?(o.onScopeDispose(r),!0):!1}function ve(r){return typeof r=="function"?r():o.unref(r)}typeof WorkerGlobalScope!="undefined"&&globalThis instanceof WorkerGlobalScope;function me(r){var f;const s=ve(r);return(f=s==null?void 0:s.$el)!=null?f:s}function ye(r,f={}){let s;const m=f,{immediate:l}=m,_=ge(m,["immediate"]),c=o.ref(!1),b=o.ref(!1),T=S=>s&&s.activate(S),C=S=>s&&s.deactivate(S),A=()=>{s&&(s.pause(),b.value=!0)},v=()=>{s&&(s.unpause(),b.value=!1)};return o.watch(()=>me(r),S=>{!S||(s=F.createFocusTrap(S,Ot(wt({},_),{onActivate(){c.value=!0,f.onActivate&&f.onActivate()},onDeactivate(){c.value=!1,f.onDeactivate&&f.onDeactivate()}})),l&&T())},{flush:"post"}),be(()=>C()),{hasFocus:c,isPaused:b,activate:T,deactivate:C,pause:A,unpause:v}}var dt=typeof globalThis!="undefined"?globalThis:typeof window!="undefined"?window:typeof global!="undefined"?global:typeof self!="undefined"?self:{},Et={exports:{}};(function(r,f){var s=200,l="__lodash_hash_undefined__",_=800,c=16,b=9007199254740991,T="[object Arguments]",C="[object Array]",A="[object AsyncFunction]",v="[object Boolean]",m="[object Date]",S="[object Error]",N="[object Function]",k="[object GeneratorFunction]",H="[object Map]",Q="[object Number]",Y="[object Null]",x="[object Object]",a="[object Proxy]",u="[object RegExp]",$="[object Set]",V="[object String]",h="[object Undefined]",j="[object WeakMap]",z="[object ArrayBuffer]",M="[object DataView]",I="[object Float32Array]",P="[object Float64Array]",R="[object Int8Array]",U="[object Int16Array]",G="[object Int32Array]",W="[object Uint8Array]",Z="[object Uint8ClampedArray]",ze="[object Uint16Array]",Me="[object Uint32Array]",Re=/[\\^$.*+?()[\]{}|]/g,Ue=/^\[object .+?Constructor\]$/,Ge=/^(?:0|[1-9]\d*)$/,w={};w[I]=w[P]=w[R]=w[U]=w[G]=w[W]=w[Z]=w[ze]=w[Me]=!0,w[T]=w[C]=w[z]=w[v]=w[M]=w[m]=w[S]=w[N]=w[H]=w[Q]=w[x]=w[u]=w[$]=w[V]=w[j]=!1;var Mt=typeof dt=="object"&&dt&&dt.Object===Object&&dt,We=typeof self=="object"&&self&&self.Object===Object&&self,it=Mt||We||Function("return this")(),Rt=f&&!f.nodeType&&f,at=Rt&&!0&&r&&!r.nodeType&&r,Ut=at&&at.exports===Rt,xt=Ut&&Mt.process,Gt=function(){try{var t=at&&at.require&&at.require("util").types;return t||xt&&xt.binding&&xt.binding("util")}catch{}}(),Wt=Gt&&Gt.isTypedArray;function Ke(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 qe(t,e){for(var n=-1,i=Array(t);++n<t;)i[n]=e(n);return i}function Qe(t){return function(e){return t(e)}}function Ze(t,e){return t==null?void 0:t[e]}function Je(t,e){return function(n){return t(e(n))}}var Ye=Array.prototype,Xe=Function.prototype,ht=Object.prototype,Bt=it["__core-js_shared__"],gt=Xe.toString,K=ht.hasOwnProperty,Kt=function(){var t=/[^.]+$/.exec(Bt&&Bt.keys&&Bt.keys.IE_PROTO||"");return t?"Symbol(src)_1."+t:""}(),qt=ht.toString,tn=gt.call(Object),en=RegExp("^"+gt.call(K).replace(Re,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),bt=Ut?it.Buffer:void 0,Qt=it.Symbol,Zt=it.Uint8Array,Jt=bt?bt.allocUnsafe:void 0,Yt=Je(Object.getPrototypeOf,Object),Xt=Object.create,nn=ht.propertyIsEnumerable,rn=Ye.splice,X=Qt?Qt.toStringTag:void 0,vt=function(){try{var t=$t(Object,"defineProperty");return t({},"",{}),t}catch{}}(),on=bt?bt.isBuffer:void 0,te=Math.max,an=Date.now,ee=$t(it,"Map"),st=$t(Object,"create"),sn=function(){function t(){}return function(e){if(!et(e))return{};if(Xt)return Xt(e);t.prototype=e;var n=new t;return t.prototype=void 0,n}}();function tt(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 ln(){this.__data__=st?st(null):{},this.size=0}function cn(t){var e=this.has(t)&&delete this.__data__[t];return this.size-=e?1:0,e}function un(t){var e=this.__data__;if(st){var n=e[t];return n===l?void 0:n}return K.call(e,t)?e[t]:void 0}function dn(t){var e=this.__data__;return st?e[t]!==void 0:K.call(e,t)}function fn(t,e){var n=this.__data__;return this.size+=this.has(t)?0:1,n[t]=st&&e===void 0?l:e,this}tt.prototype.clear=ln,tt.prototype.delete=cn,tt.prototype.get=un,tt.prototype.has=dn,tt.prototype.set=fn;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 pn(){this.__data__=[],this.size=0}function hn(t){var e=this.__data__,n=mt(e,t);if(n<0)return!1;var i=e.length-1;return n==i?e.pop():rn.call(e,n,1),--this.size,!0}function gn(t){var e=this.__data__,n=mt(e,t);return n<0?void 0:e[n][1]}function bn(t){return mt(this.__data__,t)>-1}function vn(t,e){var n=this.__data__,i=mt(n,t);return i<0?(++this.size,n.push([t,e])):n[i][1]=e,this}q.prototype.clear=pn,q.prototype.delete=hn,q.prototype.get=gn,q.prototype.has=bn,q.prototype.set=vn;function nt(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 mn(){this.size=0,this.__data__={hash:new tt,map:new(ee||q),string:new tt}}function yn(t){var e=_t(this,t).delete(t);return this.size-=e?1:0,e}function _n(t){return _t(this,t).get(t)}function Tn(t){return _t(this,t).has(t)}function Sn(t,e){var n=_t(this,t),i=n.size;return n.set(t,e),this.size+=n.size==i?0:1,this}nt.prototype.clear=mn,nt.prototype.delete=yn,nt.prototype.get=_n,nt.prototype.has=Tn,nt.prototype.set=Sn;function rt(t){var e=this.__data__=new q(t);this.size=e.size}function wn(){this.__data__=new q,this.size=0}function On(t){var e=this.__data__,n=e.delete(t);return this.size=e.size,n}function En(t){return this.__data__.get(t)}function xn(t){return this.__data__.has(t)}function Bn(t,e){var n=this.__data__;if(n instanceof q){var i=n.__data__;if(!ee||i.length<s-1)return i.push([t,e]),this.size=++n.size,this;n=this.__data__=new nt(i)}return n.set(t,e),this.size=n.size,this}rt.prototype.clear=wn,rt.prototype.delete=On,rt.prototype.get=En,rt.prototype.has=xn,rt.prototype.set=Bn;function Cn(t,e){var n=jt(t),i=!n&&Vt(t),p=!n&&!i&&ae(t),y=!n&&!i&&!p&&le(t),O=n||i||p||y,d=O?qe(t.length,String):[],E=d.length;for(var L in t)(e||K.call(t,L))&&!(O&&(L=="length"||p&&(L=="offset"||L=="parent")||y&&(L=="buffer"||L=="byteLength"||L=="byteOffset")||oe(L,E)))&&d.push(L);return d}function Ct(t,e,n){(n!==void 0&&!Tt(t[e],n)||n===void 0&&!(e in t))&&At(t,e,n)}function An(t,e,n){var i=t[e];(!(K.call(t,e)&&Tt(i,n))||n===void 0&&!(e in t))&&At(t,e,n)}function mt(t,e){for(var n=t.length;n--;)if(Tt(t[n][0],e))return n;return-1}function At(t,e,n){e=="__proto__"&&vt?vt(t,e,{configurable:!0,enumerable:!0,value:n,writable:!0}):t[e]=n}var $n=Rn();function yt(t){return t==null?t===void 0?h:Y:X&&X in Object(t)?Un(t):Zn(t)}function ne(t){return lt(t)&&yt(t)==T}function Nn(t){if(!et(t)||qn(t))return!1;var e=Dt(t)?en:Ue;return e.test(tr(t))}function Vn(t){return lt(t)&&se(t.length)&&!!w[yt(t)]}function jn(t){if(!et(t))return Qn(t);var e=ie(t),n=[];for(var i in t)i=="constructor"&&(e||!K.call(t,i))||n.push(i);return n}function re(t,e,n,i,p){t!==e&&$n(e,function(y,O){if(p||(p=new rt),et(y))Pn(t,e,O,n,re,i,p);else{var d=i?i(Nt(t,O),y,O+"",t,e,p):void 0;d===void 0&&(d=y),Ct(t,O,d)}},ce)}function Pn(t,e,n,i,p,y,O){var d=Nt(t,n),E=Nt(e,n),L=O.get(E);if(L){Ct(t,n,L);return}var D=y?y(d,E,n+"",t,e,O):void 0,ct=D===void 0;if(ct){var It=jt(E),Lt=!It&&ae(E),de=!It&&!Lt&&le(E);D=E,It||Lt||de?jt(d)?D=d:er(d)?D=Hn(d):Lt?(ct=!1,D=Ln(E,!0)):de?(ct=!1,D=kn(E,!0)):D=[]:nr(E)||Vt(E)?(D=d,Vt(d)?D=rr(d):(!et(d)||Dt(d))&&(D=Gn(E))):ct=!1}ct&&(O.set(E,D),p(D,E,i,y,O),O.delete(E)),Ct(t,n,D)}function Dn(t,e){return Yn(Jn(t,e,ue),t+"")}var In=vt?function(t,e){return vt(t,"toString",{configurable:!0,enumerable:!1,value:ir(e),writable:!0})}:ue;function Ln(t,e){if(e)return t.slice();var n=t.length,i=Jt?Jt(n):new t.constructor(n);return t.copy(i),i}function Fn(t){var e=new t.constructor(t.byteLength);return new Zt(e).set(new Zt(t)),e}function kn(t,e){var n=e?Fn(t.buffer):t.buffer;return new t.constructor(n,t.byteOffset,t.length)}function Hn(t,e){var n=-1,i=t.length;for(e||(e=Array(i));++n<i;)e[n]=t[n];return e}function zn(t,e,n,i){var p=!n;n||(n={});for(var y=-1,O=e.length;++y<O;){var d=e[y],E=i?i(n[d],t[d],d,n,t):void 0;E===void 0&&(E=t[d]),p?At(n,d,E):An(n,d,E)}return n}function Mn(t){return Dn(function(e,n){var i=-1,p=n.length,y=p>1?n[p-1]:void 0,O=p>2?n[2]:void 0;for(y=t.length>3&&typeof y=="function"?(p--,y):void 0,O&&Wn(n[0],n[1],O)&&(y=p<3?void 0:y,p=1),e=Object(e);++i<p;){var d=n[i];d&&t(e,d,i,y)}return e})}function Rn(t){return function(e,n,i){for(var p=-1,y=Object(e),O=i(e),d=O.length;d--;){var E=O[t?d:++p];if(n(y[E],E,y)===!1)break}return e}}function _t(t,e){var n=t.__data__;return Kn(e)?n[typeof e=="string"?"string":"hash"]:n.map}function $t(t,e){var n=Ze(t,e);return Nn(n)?n:void 0}function Un(t){var e=K.call(t,X),n=t[X];try{t[X]=void 0;var i=!0}catch{}var p=qt.call(t);return i&&(e?t[X]=n:delete t[X]),p}function Gn(t){return typeof t.constructor=="function"&&!ie(t)?sn(Yt(t)):{}}function oe(t,e){var n=typeof t;return e=e==null?b:e,!!e&&(n=="number"||n!="symbol"&&Ge.test(t))&&t>-1&&t%1==0&&t<e}function Wn(t,e,n){if(!et(n))return!1;var i=typeof e;return(i=="number"?Pt(n)&&oe(e,n.length):i=="string"&&e in n)?Tt(n[e],t):!1}function Kn(t){var e=typeof t;return e=="string"||e=="number"||e=="symbol"||e=="boolean"?t!=="__proto__":t===null}function qn(t){return!!Kt&&Kt in t}function ie(t){var e=t&&t.constructor,n=typeof e=="function"&&e.prototype||ht;return t===n}function Qn(t){var e=[];if(t!=null)for(var n in Object(t))e.push(n);return e}function Zn(t){return qt.call(t)}function Jn(t,e,n){return e=te(e===void 0?t.length-1:e,0),function(){for(var i=arguments,p=-1,y=te(i.length-e,0),O=Array(y);++p<y;)O[p]=i[e+p];p=-1;for(var d=Array(e+1);++p<e;)d[p]=i[p];return d[e]=n(O),Ke(t,this,d)}}function Nt(t,e){if(!(e==="constructor"&&typeof t[e]=="function")&&e!="__proto__")return t[e]}var Yn=Xn(In);function Xn(t){var e=0,n=0;return function(){var i=an(),p=c-(i-n);if(n=i,p>0){if(++e>=_)return arguments[0]}else e=0;return t.apply(void 0,arguments)}}function tr(t){if(t!=null){try{return gt.call(t)}catch{}try{return t+""}catch{}}return""}function Tt(t,e){return t===e||t!==t&&e!==e}var Vt=ne(function(){return arguments}())?ne:function(t){return lt(t)&&K.call(t,"callee")&&!nn.call(t,"callee")},jt=Array.isArray;function Pt(t){return t!=null&&se(t.length)&&!Dt(t)}function er(t){return lt(t)&&Pt(t)}var ae=on||ar;function Dt(t){if(!et(t))return!1;var e=yt(t);return e==N||e==k||e==A||e==a}function se(t){return typeof t=="number"&&t>-1&&t%1==0&&t<=b}function et(t){var e=typeof t;return t!=null&&(e=="object"||e=="function")}function lt(t){return t!=null&&typeof t=="object"}function nr(t){if(!lt(t)||yt(t)!=x)return!1;var e=Yt(t);if(e===null)return!0;var n=K.call(e,"constructor")&&e.constructor;return typeof n=="function"&&n instanceof n&&gt.call(n)==tn}var le=Wt?Qe(Wt):Vn;function rr(t){return zn(t,ce(t))}function ce(t){return Pt(t)?Cn(t,!0):jn(t)}var or=Mn(function(t,e,n){re(t,e,n)});function ir(t){return function(){return t}}function ue(t){return t}function ar(){return!1}r.exports=or})(Et,Et.exports);var ft=Et.exports;function J(r){return typeof r=="string"?document.querySelector(r):typeof r=="function"?r():null}const pt={popper:{},overlay:{enabled:!0,padding:0,borderRadius:0,preventOverlayInteraction:!0},scrollToStep:{enabled:!0,options:{behavior:"smooth",block:"center",inline:"center"}},autoFinishByExit:!0,labels:{previousButton:"Previous",nextButton:"Next",finishButton:"Finish"},hideButtons:{previous:!1,next:!1,exit:!1},hideNextStepDuringHook:!1};function _e(){var b,T,C,A;const r=o.ref(""),f=o.ref(null),s=o.ref((T=(b=pt.overlay)==null?void 0:b.padding)!=null?T:0),l=o.ref((A=(C=pt.overlay)==null?void 0:C.borderRadius)!=null?A:0),_=()=>{c(f.value,{padding:s.value,borderRadius:l.value})},c=async(v,m=pt.overlay)=>{var V,h,j,z,M,I,P,R,U,G,W,Z;if(!v)return;const{innerWidth:S,innerHeight:N}=window,{left:k,top:H,width:Q,height:Y}=v.getBoundingClientRect(),x=typeof m.padding=="number"?{top:m.padding,right:m.padding,bottom:m.padding,left:m.padding}:m.padding,a=typeof m.borderRadius=="number"?{leftTop:m.borderRadius,rightTop:m.borderRadius,rightBottom:m.borderRadius,leftBottom:m.borderRadius}:m.borderRadius,u={top:H-((V=x==null?void 0:x.top)!=null?V:0),right:k+Q+((h=x==null?void 0:x.right)!=null?h:0),bottom:H+Y+((j=x==null?void 0:x.bottom)!=null?j:0),left:k-((z=x==null?void 0:x.left)!=null?z:0)},$={leftTop:`M${u.left+((M=a==null?void 0:a.leftTop)!=null?M:0)},${u.top} Q${u.left},${u.top} ${u.left},${u.top+((I=a==null?void 0:a.leftTop)!=null?I:0)}`,rightTop:`V${u.top+((P=a==null?void 0:a.rightTop)!=null?P:0)} Q${u.right},${u.top} ${u.right-((R=a==null?void 0:a.rightTop)!=null?R:0)},${u.top}`,rightBottom:`H${u.right-((U=a==null?void 0:a.rightBottom)!=null?U:0)} Q${u.right},${u.bottom} ${u.right},${u.bottom-((G=a==null?void 0:a.rightBottom)!=null?G:0)}`,leftBottom:`V${u.bottom-((W=a==null?void 0:a.leftBottom)!=null?W:0)} Q${u.left},${u.bottom} ${u.left+((Z=a==null?void 0:a.leftBottom)!=null?Z:0)},${u.bottom}`};r.value=`
+      M${S},${N}
       H0V0
-      H${z}V${L}
+      H${S}V${N}
       Z
-      ${B.leftTop}
-      ${B.leftBottom}
-      ${B.rightBottom}
-      ${B.rightTop}
+      ${$.leftTop}
+      ${$.leftBottom}
+      ${$.rightBottom}
+      ${$.rightTop}
       Z
-    `,m.value=S,h.value=c,v.value=a};return r.onMounted(()=>{window.addEventListener("scroll",f),window.addEventListener("resize",f)}),r.onUnmounted(()=>{window.removeEventListener("scroll",f),window.removeEventListener("resize",f)}),{path:o,updatePath:u}}var zt=(o,m)=>{const h=o.__vccOpts||o;for(const[v,f]of m)h[v]=f;return h};const fe=r.defineComponent({name:"VOnboardingStep",setup(){const o=r.ref(!1),m=r.inject(Ft,{}),{step:h,isFirstStep:v,isLastStep:f,options:u,next:p,previous:C,exit:F,finish:I}=m.value,S=r.computed(()=>It({},u==null?void 0:u.value,h.value.options)),w=r.computed(()=>{var c,a,s;return{previous:!((c=S.value.hideButtons)!=null&&c.previous),next:!((a=S.value.hideButtons)!=null&&a.next),exit:!((s=S.value.hideButtons)!=null&&s.exit)}}),z=r.computed(()=>{var c,a,s,B,E,A;return{previous:(a=(c=S.value)==null?void 0:c.labels)==null?void 0:a.previousButton,next:(B=(s=S.value)==null?void 0:s.labels)==null?void 0:B.nextButton,finish:(A=(E=S.value)==null?void 0:E.labels)==null?void 0:A.finishButton}}),{updatePath:L,path:D}=ue(),j=r.ref(),T=async()=>{var a,s,B,E,A,V,M,R,U,G,W,K;await r.nextTick();const c=yt((s=(a=h==null?void 0:h.value)==null?void 0:a.attachTo)==null?void 0:s.element);c&&j.value&&(o.value=!0,(E=(B=S.value)==null?void 0:B.scrollToStep)!=null&&E.enabled&&c.scrollIntoView((V=(A=S.value)==null?void 0:A.scrollToStep)==null?void 0:V.options),O.createPopper(c,j.value,S.value.popper),(R=(M=S.value)==null?void 0:M.overlay)!=null&&R.enabled&&L(c,{padding:(G=(U=S.value)==null?void 0:U.overlay)==null?void 0:G.padding,borderRadius:(K=(W=S.value)==null?void 0:W.overlay)==null?void 0:K.borderRadius}))};return r.watch(h,T,{immediate:!0}),{stepElement:j,next:p,previous:C,path:D,show:o,step:h,isFirstStep:v,isLastStep:f,exit:()=>{var c;F(),(c=S.value)!=null&&c.autoFinishByExit&&I()},finish:I,isButtonVisible:w,buttonLabels:z}}}),pe={style:{width:"100%",height:"100%",position:"fixed",top:"0",left:"0",fill:"var(--v-onboarding-overlay-fill, black)",opacity:"var(--v-onboarding-overlay-opacity, 0.5)","z-index":"var(--v-onboarding-overlay-z, 10)","pointer-events":"none"}},he=["d"],ge={ref:"stepElement",style:{position:"relative","z-index":"var(--v-onboarding-step-z, 20)"}},be={class:"v-onboarding-item"},me={class:"v-onboarding-item__header"},ve={key:0,class:"v-onboarding-item__header-title"},_e=[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)],ye={key:0,class:"v-onboarding-item__description"},Te={class:"v-onboarding-item__actions"},Se=r.createElementVNode("div",{"data-popper-arrow":""},null,-1);function we(o,m,h,v,f,u){return r.withDirectives((r.openBlock(),r.createElementBlock("div",null,[(r.openBlock(),r.createElementBlock("svg",pe,[r.createElementVNode("path",{d:o.path},null,8,he)])),r.createElementVNode("div",ge,[o.step?r.renderSlot(o.$slots,"default",{key:0},()=>[r.createElementVNode("div",be,[r.createElementVNode("div",me,[o.step.content.title?(r.openBlock(),r.createElementBlock("span",ve,r.toDisplayString(o.step.content.title),1)):r.createCommentVNode("",!0),o.isButtonVisible.exit?(r.openBlock(),r.createElementBlock("button",{key:1,onClick:m[0]||(m[0]=(...p)=>o.exit&&o.exit(...p)),class:"v-onboarding-item__header-close"},_e)):r.createCommentVNode("",!0)]),o.step.content.description?(r.openBlock(),r.createElementBlock("p",ye,r.toDisplayString(o.step.content.description),1)):r.createCommentVNode("",!0),r.createElementVNode("div",Te,[!o.isFirstStep&&o.isButtonVisible.previous?(r.openBlock(),r.createElementBlock("button",{key:0,type:"button",onClick:m[1]||(m[1]=(...p)=>o.previous&&o.previous(...p)),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]=()=>o.isLastStep?o.finish():o.next()),type:"button",class:"v-onboarding-btn-primary"},r.toDisplayString(o.isLastStep?o.buttonLabels.finish:o.buttonLabels.next),1)):r.createCommentVNode("",!0)])])]):r.createCommentVNode("",!0),Se],512)],512)),[[r.vShow,o.show]])}var Dt=zt(fe,[["render",we]]);const xe=r.defineComponent({name:"VOnboardingWrapper",components:{VOnboardingStep:Dt},props:{steps:{type:Array,default:()=>[]},options:{type:Object,default:()=>({})}},emits:["finish","exit"],setup(o,{expose:m,emit:h}){const v=r.ref(vt.IDLE),f=r.ref(v.value),u=T=>{typeof T=="function"?v.value=T(v.value):v.value=T},{beforeHook:p,afterHook:C}=Be(),F=r.computed(()=>{var T;return(T=o.steps)==null?void 0:T[f.value]});r.watch(v,async(T,P)=>{var E,A;const c=T<P?ot.BACKWARD:ot.FORWARD,a={direction:c,isForward:c===ot.FORWARD,isBackward:c===ot.BACKWARD},s=(E=o.steps)==null?void 0:E[P];if(s){const V=Lt(Vt({},a),{index:P,step:s});await C(s,V)}const B=(A=o.steps)==null?void 0:A[T];if(B){const V=Lt(Vt({},a),{index:T,step:B});await p(B,V)}f.value=T});const I=r.computed(()=>f.value===vt.FINISHED),S=()=>u(0),w=()=>{u(vt.FINISHED),h("finish")},z=()=>h("exit");m({start:S,finish:w,goToStep:u});const L=()=>{u(T=>T-1)},D=()=>{const T=f.value+1;if(T===o.steps.length){w();return}u(T)},j=r.computed(()=>({step:F,options:r.computed(()=>It({},at,o.options)),next:D,previous:L,finish:w,exit:z,isFirstStep:r.computed(()=>f.value===0),isLastStep:r.computed(()=>f.value===o.steps.length-1)}));return r.provide(Ft,j),{index:v,activeStep:F,next:D,previous:L,isFinished:I,setIndex:u,isFirstStep:j.value.isFirstStep,isLastStep:j.value.isLastStep,finish:w,exit:z}}});function Oe(){return{setClassName:({element:h,classList:v=[]})=>{!h||h.classList.add(...v)},unsetClassName:({element:h,classList:v=[]})=>{!h||h.classList.remove(...v)}}}function Be(){const{setClassName:o,unsetClassName:m}=Oe();return{beforeHook:(f,u)=>{var p,C;return o({element:yt(f.attachTo.element),classList:f.attachTo.classList}),(C=(p=f.on)==null?void 0:p.beforeStep)==null?void 0:C.call(p,u)},afterHook:(f,u)=>{var p,C;return m({element:yt(f.attachTo.element),classList:f.attachTo.classList}),(C=(p=f.on)==null?void 0:p.afterStep)==null?void 0:C.call(p,u)}}}const Ce={key:0,"data-v-onboarding-wrapper":""};function Ee(o,m,h,v,f,u){const p=r.resolveComponent("VOnboardingStep");return o.isFinished?r.createCommentVNode("",!0):(r.openBlock(),r.createElementBlock("div",Ce,[r.renderSlot(o.$slots,"default",{key:o.index,step:o.activeStep,next:o.next,previous:o.previous,exit:o.exit,isFirst:o.isFirstStep,isLast:o.isLastStep,index:o.index},()=>[(r.openBlock(),r.createBlock(p,{key:o.index}))])]))}var Ae=zt(xe,[["render",Ee]]);function $e(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()},exit:()=>{var u;return(u=o==null?void 0:o.value)==null?void 0:u.exit()},goToStep:u=>{var p;return(p=o==null?void 0:o.value)==null?void 0:p.goToStep(u)}}}var rr=(()=>`.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}
-`)();x.VOnboardingStep=Dt,x.VOnboardingWrapper=Ae,x.useVOnboarding=$e,Object.defineProperties(x,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+    `,f.value=v,s.value=x,l.value=a};return o.onMounted(()=>{window.addEventListener("scroll",_),window.addEventListener("resize",_)}),o.onUnmounted(()=>{window.removeEventListener("scroll",_),window.removeEventListener("resize",_)}),{path:r,updatePath:c}}var kt=(r,f)=>{const s=r.__vccOpts||r;for(const[l,_]of f)s[l]=_;return s};const Te=o.defineComponent({name:"VOnboardingStep",setup(){const r=o.ref(!1),f=o.inject(Ft,{}),{step:s,isFirstStep:l,isLastStep:_,options:c,next:b,previous:T,exit:C,finish:A}=f.value,v=o.computed(()=>ft({},c==null?void 0:c.value,s.value.options)),m=o.computed(()=>{var a,u,$;return{previous:!((a=v.value.hideButtons)!=null&&a.previous),next:!((u=v.value.hideButtons)!=null&&u.next),exit:!(($=v.value.hideButtons)!=null&&$.exit)}}),S=o.computed(()=>{var a,u,$,V,h,j;return{previous:(u=(a=v.value)==null?void 0:a.labels)==null?void 0:u.previousButton,next:(V=($=v.value)==null?void 0:$.labels)==null?void 0:V.nextButton,finish:(j=(h=v.value)==null?void 0:h.labels)==null?void 0:j.finishButton}}),{updatePath:N,path:k}=_e(),H=o.ref(),Q=ye(H);o.watch(r,async a=>{await o.nextTick(),a?Q.activate():Q.deactivate()});const Y=async()=>{var u,$,V,h,j,z,M,I,P,R,U,G,W;await o.nextTick();const a=J(($=(u=s==null?void 0:s.value)==null?void 0:u.attachTo)==null?void 0:$.element);a&&H.value&&(r.value=!0,(h=(V=v.value)==null?void 0:V.scrollToStep)!=null&&h.enabled&&((M=a.scrollIntoView)==null||M.call(a,(z=(j=v.value)==null?void 0:j.scrollToStep)==null?void 0:z.options)),B.createPopper(a,H.value,v.value.popper),(P=(I=v.value)==null?void 0:I.overlay)!=null&&P.enabled&&N(a,{padding:(U=(R=v.value)==null?void 0:R.overlay)==null?void 0:U.padding,borderRadius:(W=(G=v.value)==null?void 0:G.overlay)==null?void 0:W.borderRadius}))};return o.watch(s,Y,{immediate:!0}),{stepElement:H,next:b,previous:T,path:k,show:r,step:s,isFirstStep:l,isLastStep:_,exit:()=>{var a;C(),(a=v.value)!=null&&a.autoFinishByExit&&A()},finish:A,isButtonVisible:m,buttonLabels:S}}}),Se={style:{width:"100%",height:"100%",position:"fixed",top:"0",left:"0",fill:"var(--v-onboarding-overlay-fill, black)",opacity:"var(--v-onboarding-overlay-opacity, 0.5)","z-index":"var(--v-onboarding-overlay-z, 10)","pointer-events":"none"}},we=["d"],Oe={ref:"stepElement",style:{position:"relative","z-index":"var(--v-onboarding-step-z, 20)"}},Ee={class:"v-onboarding-item"},xe={class:"v-onboarding-item__header"},Be={key:0,class:"v-onboarding-item__header-title"},Ce=[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)],Ae=["innerHTML"],$e={key:1,class:"v-onboarding-item__description"},Ne={class:"v-onboarding-item__actions"},Ve=o.createElementVNode("div",{"data-popper-arrow":""},null,-1);function je(r,f,s,l,_,c){return o.withDirectives((o.openBlock(),o.createElementBlock("div",null,[(o.openBlock(),o.createElementBlock("svg",Se,[o.createElementVNode("path",{d:r.path},null,8,we)])),o.createElementVNode("div",Oe,[r.step?o.renderSlot(r.$slots,"default",{key:0},()=>[o.createElementVNode("div",Ee,[o.createElementVNode("div",xe,[r.step.content.title?(o.openBlock(),o.createElementBlock("span",Be,o.toDisplayString(r.step.content.title),1)):o.createCommentVNode("",!0),r.isButtonVisible.exit?(o.openBlock(),o.createElementBlock("button",{key:1,onClick:f[0]||(f[0]=(...b)=>r.exit&&r.exit(...b)),"aria-label":"Close",class:"v-onboarding-item__header-close"},Ce)):o.createCommentVNode("",!0)]),r.step.content.description&&r.step.content.html?(o.openBlock(),o.createElementBlock("p",{key:0,class:"v-onboarding-item__description",innerHTML:r.step.content.description},null,8,Ae)):r.step.content.description?(o.openBlock(),o.createElementBlock("p",$e,o.toDisplayString(r.step.content.description),1)):o.createCommentVNode("",!0),o.createElementVNode("div",Ne,[!r.isFirstStep&&r.isButtonVisible.previous?(o.openBlock(),o.createElementBlock("button",{key:0,type:"button",onClick:f[1]||(f[1]=(...b)=>r.previous&&r.previous(...b)),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:f[2]||(f[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),Ve],512)],512)),[[o.vShow,r.show]])}var Ht=kt(Te,[["render",je]]);const Pe=o.defineComponent({name:"VOnboardingWrapper",components:{VOnboardingStep:Ht},props:{steps:{type:Array,default:()=>[]},options:{type:Object,default:()=>({})}},emits:["finish","exit"],setup(r,{expose:f,emit:s}){const l=o.computed(()=>ft({},pt,r.options)),_=o.ref(!0),c=o.ref(ot.IDLE),b=o.ref(c.value),T=h=>{typeof h=="function"?c.value=h(c.value):c.value=h},C=o.computed(()=>{var h;return(h=r.steps)==null?void 0:h[b.value]}),A=o.computed(()=>C.value?ft({},l.value,C.value.options):l.value),v=h=>ft({},l.value,h.options),{beforeHook:m,afterHook:S}=Ie(A);o.watch(c,async(h,j)=>{var R,U,G,W;const z=h<j?ut.BACKWARD:ut.FORWARD,M={direction:z,isForward:z===ut.FORWARD,isBackward:z===ut.BACKWARD},I=(R=r.steps)==null?void 0:R[j];if(I){const Z=Ot(wt({},M),{index:j,step:I});k(J(I.attachTo.element)),await S(I,Z)}const P=(U=r.steps)==null?void 0:U[h];if(P){const Z=Ot(wt({},M),{index:h,step:P});k(J(P.attachTo.element)),(G=v(P))!=null&&G.hideNextStepDuringHook&&(_.value=!1),await m(P,Z)}b.value=h,_.value=!0,k(J("body")),(W=A.value.overlay)!=null&&W.preventOverlayInteraction&&H()});const{addPointerEvents:N,removePointerEvents:k}=zt(),H=()=>{const h=J("body");!h||([ot.IDLE,ot.FINISHED].includes(b.value)?k(h):N(h,"none"))},Q=o.computed(()=>b.value===ot.FINISHED),Y=()=>T(0),x=()=>{T(ot.FINISHED),s("finish")},a=()=>s("exit");f({start:Y,finish:x,goToStep:T});const u=()=>{T(h=>h-1)},$=()=>{const h=b.value+1;if(h===r.steps.length){x();return}T(h)},V=o.computed(()=>({step:C,options:l,next:$,previous:u,finish:x,exit:a,isFirstStep:o.computed(()=>b.value===0),isLastStep:o.computed(()=>b.value===r.steps.length-1)}));return o.provide(Ft,V),{index:c,activeStep:C,next:$,previous:u,isFinished:Q,setIndex:T,isFirstStep:V.value.isFirstStep,isLastStep:V.value.isLastStep,finish:x,exit:a,showStep:_}}});function De(){return{setClassName:({element:s,classList:l=[]})=>{!s||s.classList.add(...l)},unsetClassName:({element:s,classList:l=[]})=>{!s||s.classList.remove(...l)}}}function zt(){const r="data-v-onboarding-pointer-events";return{addPointerEvents:(l,_="auto")=>{if(!l)return;const c=l.style.pointerEvents;c&&l.setAttribute(r,c),l.style.setProperty("pointer-events",_)},removePointerEvents:l=>{if(!l)return;const _=l.getAttribute(r);_?(l.style.setProperty("pointer-events",_),l.removeAttribute(r)):l.style.removeProperty("pointer-events")}}}function Ie(r){const{setClassName:f,unsetClassName:s}=De(),{addPointerEvents:l,removePointerEvents:_}=zt();return{beforeHook:(T,C)=>{var v,m,S,N;const A=J(T.attachTo.element);return(m=(v=r.value)==null?void 0:v.overlay)!=null&&m.preventOverlayInteraction&&l(A),f({element:A,classList:T.attachTo.classList}),(N=(S=T.on)==null?void 0:S.beforeStep)==null?void 0:N.call(S,C)},afterHook:(T,C)=>{var v,m,S,N;const A=J(T.attachTo.element);return(m=(v=r.value)==null?void 0:v.overlay)!=null&&m.preventOverlayInteraction&&_(A),s({element:A,classList:T.attachTo.classList}),(N=(S=T.on)==null?void 0:S.afterStep)==null?void 0:N.call(S,C)}}}const Le={key:0,"data-v-onboarding-wrapper":"",style:{"pointer-events":"auto"}};function Fe(r,f,s,l,_,c){const b=o.resolveComponent("VOnboardingStep");return r.isFinished?o.createCommentVNode("",!0):(o.openBlock(),o.createElementBlock("div",Le,[r.showStep?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(b,{key:r.index}))]):o.createCommentVNode("",!0)]))}var ke=kt(Pe,[["render",Fe]]);function He(r){return{start:()=>{var c;return(c=r==null?void 0:r.value)==null?void 0:c.start()},finish:()=>{var c;return(c=r==null?void 0:r.value)==null?void 0:c.finish()},exit:()=>{var c;return(c=r==null?void 0:r.value)==null?void 0:c.exit()},goToStep:c=>{var b;return(b=r==null?void 0:r.value)==null?void 0:b.goToStep(c)}}}var dr=(()=>`.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-primary:focus{outline-color:#312e81}.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}
+`)();g.VOnboardingStep=Ht,g.VOnboardingWrapper=ke,g.useVOnboarding=He,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-onboarding",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "description": "v-onboarding is a super-slim, fully-typed onboarding component for Vue 3",
   "repository": {
     "type": "git",
@@ -49,6 +49,8 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.5",
+    "@vueuse/integrations": "^10.7.2",
+    "focus-trap": "^7",
     "vue": "^3.2.21"
   },
   "peerDependencies": {

package/src/types/StepEntity.d.ts

@@ -20,6 +20,7 @@ export interface StepEntity {
   content: {
     title: string;
     description?: string;
+    html?: boolean
   }
   on?: {
     beforeStep?: (options?: onBeforeStepOptions) => void | Promise<void>

package/src/types/VOnboardingWrapper.ts

@@ -14,6 +14,7 @@ export interface SvgOverlayOptions {
     rightBottom?: number;
     leftBottom?: number;
   }
+  preventOverlayInteraction?: boolean
 }
 
 export interface VOnboardingWrapperOptions {
@@ -34,6 +35,7 @@ export interface VOnboardingWrapperOptions {
     nextButton?: string
     finishButton?: string
   }
+  hideNextStepDuringHook?: boolean
 }
 
 export const defaultVOnboardingWrapperOptions: VOnboardingWrapperOptions = {
@@ -42,6 +44,7 @@ export const defaultVOnboardingWrapperOptions: VOnboardingWrapperOptions = {
     enabled: true,
     padding: 0,
     borderRadius: 0,
+    preventOverlayInteraction: true
   },
   scrollToStep: {
     enabled: true,
@@ -61,5 +64,6 @@ export const defaultVOnboardingWrapperOptions: VOnboardingWrapperOptions = {
     previous: false,
     next: false,
     exit: false
-  }
+  },
+  hideNextStepDuringHook: false
 }