v-onboarding
Version:
A fully-typed, customizable onboarding component for Vue 3
1,334 lines (1,333 loc) • 47.8 kB
JavaScript
import { getCurrentScope, onScopeDispose, unref, ref, watch, isRef, onMounted, onUnmounted, defineComponent, inject, computed, nextTick, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, withDirectives, normalizeStyle, renderSlot, toDisplayString, createCommentVNode, vShow, provide, createVNode } from "vue";
import { createPopper } from "@popperjs/core";
import { createFocusTrap } from "focus-trap";
const STATE_INJECT_KEY = Symbol("onboardingState");
const OnboardingState = {
IDLE: -1,
FINISHED: -2
};
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 { immediate, ...focusTrapOptions } = options;
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, {
...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) {
var LARGE_ARRAY_SIZE = 200;
var HASH_UNDEFINED = "__lodash_hash_undefined__";
var HOT_COUNT = 800, HOT_SPAN = 16;
var MAX_SAFE_INTEGER = 9007199254740991;
var argsTag = "[object Arguments]", arrayTag = "[object Array]", asyncTag = "[object AsyncFunction]", boolTag = "[object Boolean]", dateTag = "[object Date]", errorTag = "[object Error]", funcTag = "[object Function]", genTag = "[object GeneratorFunction]", mapTag = "[object Map]", numberTag = "[object Number]", nullTag = "[object Null]", objectTag = "[object Object]", proxyTag = "[object Proxy]", regexpTag = "[object RegExp]", setTag = "[object Set]", stringTag = "[object String]", undefinedTag = "[object Undefined]", weakMapTag = "[object WeakMap]";
var arrayBufferTag = "[object ArrayBuffer]", dataViewTag = "[object DataView]", float32Tag = "[object Float32Array]", float64Tag = "[object Float64Array]", int8Tag = "[object Int8Array]", int16Tag = "[object Int16Array]", int32Tag = "[object Int32Array]", uint8Tag = "[object Uint8Array]", uint8ClampedTag = "[object Uint8ClampedArray]", uint16Tag = "[object Uint16Array]", uint32Tag = "[object Uint32Array]";
var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
var reIsHostCtor = /^\[object .+?Constructor\]$/;
var reIsUint = /^(?:0|[1-9]\d*)$/;
var typedArrayTags = {};
typedArrayTags[float32Tag] = typedArrayTags[float64Tag] = typedArrayTags[int8Tag] = typedArrayTags[int16Tag] = typedArrayTags[int32Tag] = typedArrayTags[uint8Tag] = typedArrayTags[uint8ClampedTag] = typedArrayTags[uint16Tag] = typedArrayTags[uint32Tag] = true;
typedArrayTags[argsTag] = typedArrayTags[arrayTag] = typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] = typedArrayTags[dataViewTag] = typedArrayTags[dateTag] = typedArrayTags[errorTag] = typedArrayTags[funcTag] = typedArrayTags[mapTag] = typedArrayTags[numberTag] = typedArrayTags[objectTag] = typedArrayTags[regexpTag] = typedArrayTags[setTag] = typedArrayTags[stringTag] = typedArrayTags[weakMapTag] = false;
var freeGlobal = typeof commonjsGlobal == "object" && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
var freeSelf = typeof self == "object" && self && self.Object === Object && self;
var root = freeGlobal || freeSelf || Function("return this")();
var freeExports = exports && !exports.nodeType && exports;
var freeModule = freeExports && true && module && !module.nodeType && module;
var moduleExports = freeModule && freeModule.exports === freeExports;
var freeProcess = moduleExports && freeGlobal.process;
var nodeUtil = function() {
try {
var types = freeModule && freeModule.require && freeModule.require("util").types;
if (types) {
return types;
}
return freeProcess && freeProcess.binding && freeProcess.binding("util");
} catch (e) {
}
}();
var nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;
function apply(func, thisArg, args) {
switch (args.length) {
case 0:
return func.call(thisArg);
case 1:
return func.call(thisArg, args[0]);
case 2:
return func.call(thisArg, args[0], args[1]);
case 3:
return func.call(thisArg, args[0], args[1], args[2]);
}
return func.apply(thisArg, args);
}
function baseTimes(n, iteratee) {
var index = -1, result = Array(n);
while (++index < n) {
result[index] = iteratee(index);
}
return result;
}
function baseUnary(func) {
return function(value) {
return func(value);
};
}
function getValue(object, key) {
return object == null ? void 0 : object[key];
}
function overArg(func, transform) {
return function(arg) {
return func(transform(arg));
};
}
var arrayProto = Array.prototype, funcProto = Function.prototype, objectProto = Object.prototype;
var coreJsData = root["__core-js_shared__"];
var funcToString = funcProto.toString;
var hasOwnProperty = objectProto.hasOwnProperty;
var maskSrcKey = function() {
var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || "");
return uid ? "Symbol(src)_1." + uid : "";
}();
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, 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");
func({}, "", {});
return func;
} catch (e) {
}
}();
var nativeIsBuffer = Buffer ? Buffer.isBuffer : void 0, nativeMax = Math.max, nativeNow = Date.now;
var Map = getNative(root, "Map"), nativeCreate = getNative(Object, "create");
var baseCreate = function() {
function object() {
}
return function(proto) {
if (!isObject(proto)) {
return {};
}
if (objectCreate) {
return objectCreate(proto);
}
object.prototype = proto;
var result = new object();
object.prototype = void 0;
return result;
};
}();
function Hash(entries) {
var index = -1, length = entries == null ? 0 : entries.length;
this.clear();
while (++index < length) {
var entry = entries[index];
this.set(entry[0], entry[1]);
}
}
function hashClear() {
this.__data__ = nativeCreate ? nativeCreate(null) : {};
this.size = 0;
}
function hashDelete(key) {
var result = this.has(key) && delete this.__data__[key];
this.size -= result ? 1 : 0;
return result;
}
function hashGet(key) {
var data = this.__data__;
if (nativeCreate) {
var result = data[key];
return result === HASH_UNDEFINED ? void 0 : result;
}
return hasOwnProperty.call(data, key) ? data[key] : void 0;
}
function hashHas(key) {
var data = this.__data__;
return nativeCreate ? data[key] !== void 0 : hasOwnProperty.call(data, key);
}
function hashSet(key, value) {
var data = this.__data__;
this.size += this.has(key) ? 0 : 1;
data[key] = nativeCreate && value === void 0 ? HASH_UNDEFINED : value;
return this;
}
Hash.prototype.clear = hashClear;
Hash.prototype["delete"] = hashDelete;
Hash.prototype.get = hashGet;
Hash.prototype.has = hashHas;
Hash.prototype.set = hashSet;
function ListCache(entries) {
var index = -1, length = entries == null ? 0 : entries.length;
this.clear();
while (++index < length) {
var entry = entries[index];
this.set(entry[0], entry[1]);
}
}
function listCacheClear() {
this.__data__ = [];
this.size = 0;
}
function listCacheDelete(key) {
var data = this.__data__, index = assocIndexOf(data, key);
if (index < 0) {
return false;
}
var lastIndex = data.length - 1;
if (index == lastIndex) {
data.pop();
} else {
splice.call(data, index, 1);
}
--this.size;
return true;
}
function listCacheGet(key) {
var data = this.__data__, index = assocIndexOf(data, key);
return index < 0 ? void 0 : data[index][1];
}
function listCacheHas(key) {
return assocIndexOf(this.__data__, key) > -1;
}
function listCacheSet(key, value) {
var data = this.__data__, index = assocIndexOf(data, key);
if (index < 0) {
++this.size;
data.push([key, value]);
} else {
data[index][1] = value;
}
return this;
}
ListCache.prototype.clear = listCacheClear;
ListCache.prototype["delete"] = listCacheDelete;
ListCache.prototype.get = listCacheGet;
ListCache.prototype.has = listCacheHas;
ListCache.prototype.set = listCacheSet;
function MapCache(entries) {
var index = -1, length = entries == null ? 0 : entries.length;
this.clear();
while (++index < length) {
var entry = entries[index];
this.set(entry[0], entry[1]);
}
}
function mapCacheClear() {
this.size = 0;
this.__data__ = {
"hash": new Hash(),
"map": new (Map || ListCache)(),
"string": new Hash()
};
}
function mapCacheDelete(key) {
var result = getMapData(this, key)["delete"](key);
this.size -= result ? 1 : 0;
return result;
}
function mapCacheGet(key) {
return getMapData(this, key).get(key);
}
function mapCacheHas(key) {
return getMapData(this, key).has(key);
}
function mapCacheSet(key, value) {
var data = getMapData(this, key), size = data.size;
data.set(key, value);
this.size += data.size == size ? 0 : 1;
return this;
}
MapCache.prototype.clear = mapCacheClear;
MapCache.prototype["delete"] = mapCacheDelete;
MapCache.prototype.get = mapCacheGet;
MapCache.prototype.has = mapCacheHas;
MapCache.prototype.set = mapCacheSet;
function Stack(entries) {
var data = this.__data__ = new ListCache(entries);
this.size = data.size;
}
function stackClear() {
this.__data__ = new ListCache();
this.size = 0;
}
function stackDelete(key) {
var data = this.__data__, result = data["delete"](key);
this.size = data.size;
return result;
}
function stackGet(key) {
return this.__data__.get(key);
}
function stackHas(key) {
return this.__data__.has(key);
}
function stackSet(key, value) {
var data = this.__data__;
if (data instanceof ListCache) {
var pairs = data.__data__;
if (!Map || pairs.length < LARGE_ARRAY_SIZE - 1) {
pairs.push([key, value]);
this.size = ++data.size;
return this;
}
data = this.__data__ = new MapCache(pairs);
}
data.set(key, value);
this.size = data.size;
return this;
}
Stack.prototype.clear = stackClear;
Stack.prototype["delete"] = stackDelete;
Stack.prototype.get = stackGet;
Stack.prototype.has = stackHas;
Stack.prototype.set = stackSet;
function arrayLikeKeys(value, inherited) {
var isArr = isArray(value), isArg = !isArr && isArguments(value), isBuff = !isArr && !isArg && isBuffer(value), isType = !isArr && !isArg && !isBuff && isTypedArray(value), skipIndexes = isArr || isArg || isBuff || isType, result = skipIndexes ? baseTimes(value.length, String) : [], length = result.length;
for (var key in value) {
if ((inherited || hasOwnProperty.call(value, key)) && !(skipIndexes && (key == "length" || isBuff && (key == "offset" || key == "parent") || isType && (key == "buffer" || key == "byteLength" || key == "byteOffset") || isIndex(key, length)))) {
result.push(key);
}
}
return result;
}
function assignMergeValue(object, key, value) {
if (value !== void 0 && !eq(object[key], value) || value === void 0 && !(key in object)) {
baseAssignValue(object, key, value);
}
}
function assignValue(object, key, value) {
var objValue = object[key];
if (!(hasOwnProperty.call(object, key) && eq(objValue, value)) || value === void 0 && !(key in object)) {
baseAssignValue(object, key, value);
}
}
function assocIndexOf(array, key) {
var length = array.length;
while (length--) {
if (eq(array[length][0], key)) {
return length;
}
}
return -1;
}
function baseAssignValue(object, key, value) {
if (key == "__proto__" && defineProperty) {
defineProperty(object, key, {
"configurable": true,
"enumerable": true,
"value": value,
"writable": true
});
} else {
object[key] = value;
}
}
var baseFor = createBaseFor();
function baseGetTag(value) {
if (value == null) {
return value === void 0 ? undefinedTag : nullTag;
}
return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
}
function baseIsArguments(value) {
return isObjectLike(value) && baseGetTag(value) == argsTag;
}
function baseIsNative(value) {
if (!isObject(value) || isMasked(value)) {
return false;
}
var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
return pattern.test(toSource(value));
}
function baseIsTypedArray(value) {
return isObjectLike(value) && isLength(value.length) && !!typedArrayTags[baseGetTag(value)];
}
function baseKeysIn(object) {
if (!isObject(object)) {
return nativeKeysIn(object);
}
var isProto = isPrototype(object), result = [];
for (var key in object) {
if (!(key == "constructor" && (isProto || !hasOwnProperty.call(object, key)))) {
result.push(key);
}
}
return result;
}
function baseMerge(object, source, srcIndex, customizer, stack) {
if (object === source) {
return;
}
baseFor(source, function(srcValue, key) {
stack || (stack = new Stack());
if (isObject(srcValue)) {
baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack);
} else {
var newValue = customizer ? customizer(safeGet(object, key), srcValue, key + "", object, source, stack) : void 0;
if (newValue === void 0) {
newValue = srcValue;
}
assignMergeValue(object, key, newValue);
}
}, keysIn);
}
function baseMergeDeep(object, source, key, srcIndex, mergeFunc, customizer, stack) {
var objValue = safeGet(object, key), srcValue = safeGet(source, key), stacked = stack.get(srcValue);
if (stacked) {
assignMergeValue(object, key, stacked);
return;
}
var newValue = customizer ? customizer(objValue, srcValue, key + "", object, source, stack) : void 0;
var isCommon = newValue === void 0;
if (isCommon) {
var isArr = isArray(srcValue), isBuff = !isArr && isBuffer(srcValue), isTyped = !isArr && !isBuff && isTypedArray(srcValue);
newValue = srcValue;
if (isArr || isBuff || isTyped) {
if (isArray(objValue)) {
newValue = objValue;
} else if (isArrayLikeObject(objValue)) {
newValue = copyArray(objValue);
} else if (isBuff) {
isCommon = false;
newValue = cloneBuffer(srcValue, true);
} else if (isTyped) {
isCommon = false;
newValue = cloneTypedArray(srcValue, true);
} else {
newValue = [];
}
} else if (isPlainObject(srcValue) || isArguments(srcValue)) {
newValue = objValue;
if (isArguments(objValue)) {
newValue = toPlainObject(objValue);
} else if (!isObject(objValue) || isFunction(objValue)) {
newValue = initCloneObject(srcValue);
}
} else {
isCommon = false;
}
}
if (isCommon) {
stack.set(srcValue, newValue);
mergeFunc(newValue, srcValue, srcIndex, customizer, stack);
stack["delete"](srcValue);
}
assignMergeValue(object, key, newValue);
}
function baseRest(func, start) {
return setToString(overRest(func, start, identity), func + "");
}
var baseSetToString = !defineProperty ? identity : function(func, string) {
return defineProperty(func, "toString", {
"configurable": true,
"enumerable": false,
"value": constant(string),
"writable": true
});
};
function cloneBuffer(buffer, isDeep) {
if (isDeep) {
return buffer.slice();
}
var length = buffer.length, result = allocUnsafe ? allocUnsafe(length) : new buffer.constructor(length);
buffer.copy(result);
return result;
}
function cloneArrayBuffer(arrayBuffer) {
var result = new arrayBuffer.constructor(arrayBuffer.byteLength);
new Uint8Array(result).set(new Uint8Array(arrayBuffer));
return result;
}
function cloneTypedArray(typedArray, isDeep) {
var buffer = isDeep ? cloneArrayBuffer(typedArray.buffer) : typedArray.buffer;
return new typedArray.constructor(buffer, typedArray.byteOffset, typedArray.length);
}
function copyArray(source, array) {
var index = -1, length = source.length;
array || (array = Array(length));
while (++index < length) {
array[index] = source[index];
}
return array;
}
function copyObject(source, props, object, customizer) {
var isNew = !object;
object || (object = {});
var index = -1, length = props.length;
while (++index < length) {
var key = props[index];
var newValue = customizer ? customizer(object[key], source[key], key, object, source) : void 0;
if (newValue === void 0) {
newValue = source[key];
}
if (isNew) {
baseAssignValue(object, key, newValue);
} else {
assignValue(object, key, newValue);
}
}
return object;
}
function createAssigner(assigner) {
return baseRest(function(object, sources) {
var index = -1, length = sources.length, customizer = length > 1 ? sources[length - 1] : void 0, guard = length > 2 ? sources[2] : void 0;
customizer = assigner.length > 3 && typeof customizer == "function" ? (length--, customizer) : void 0;
if (guard && isIterateeCall(sources[0], sources[1], guard)) {
customizer = length < 3 ? void 0 : customizer;
length = 1;
}
object = Object(object);
while (++index < length) {
var source = sources[index];
if (source) {
assigner(object, source, index, customizer);
}
}
return object;
});
}
function createBaseFor(fromRight) {
return function(object, iteratee, keysFunc) {
var index = -1, iterable = Object(object), props = keysFunc(object), length = props.length;
while (length--) {
var key = props[fromRight ? length : ++index];
if (iteratee(iterable[key], key, iterable) === false) {
break;
}
}
return object;
};
}
function getMapData(map, key) {
var data = map.__data__;
return isKeyable(key) ? data[typeof key == "string" ? "string" : "hash"] : data.map;
}
function getNative(object, key) {
var value = getValue(object, key);
return baseIsNative(value) ? value : void 0;
}
function getRawTag(value) {
var isOwn = hasOwnProperty.call(value, symToStringTag), tag = value[symToStringTag];
try {
value[symToStringTag] = void 0;
var unmasked = true;
} catch (e) {
}
var result = nativeObjectToString.call(value);
if (unmasked) {
if (isOwn) {
value[symToStringTag] = tag;
} else {
delete value[symToStringTag];
}
}
return result;
}
function initCloneObject(object) {
return typeof object.constructor == "function" && !isPrototype(object) ? baseCreate(getPrototype(object)) : {};
}
function isIndex(value, length) {
var type = typeof value;
length = length == null ? MAX_SAFE_INTEGER : length;
return !!length && (type == "number" || type != "symbol" && reIsUint.test(value)) && (value > -1 && value % 1 == 0 && value < length);
}
function isIterateeCall(value, index, object) {
if (!isObject(object)) {
return false;
}
var type = typeof index;
if (type == "number" ? isArrayLike(object) && isIndex(index, object.length) : type == "string" && index in object) {
return eq(object[index], value);
}
return false;
}
function isKeyable(value) {
var type = typeof value;
return type == "string" || type == "number" || type == "symbol" || type == "boolean" ? value !== "__proto__" : value === null;
}
function isMasked(func) {
return !!maskSrcKey && maskSrcKey in func;
}
function isPrototype(value) {
var Ctor = value && value.constructor, proto = typeof Ctor == "function" && Ctor.prototype || objectProto;
return value === proto;
}
function nativeKeysIn(object) {
var result = [];
if (object != null) {
for (var key in Object(object)) {
result.push(key);
}
}
return result;
}
function objectToString(value) {
return nativeObjectToString.call(value);
}
function overRest(func, start, transform) {
start = nativeMax(start === void 0 ? func.length - 1 : start, 0);
return function() {
var args = arguments, index = -1, length = nativeMax(args.length - start, 0), array = Array(length);
while (++index < length) {
array[index] = args[start + index];
}
index = -1;
var otherArgs = Array(start + 1);
while (++index < start) {
otherArgs[index] = args[index];
}
otherArgs[start] = transform(array);
return apply(func, this, otherArgs);
};
}
function safeGet(object, key) {
if (key === "constructor" && typeof object[key] === "function") {
return;
}
if (key == "__proto__") {
return;
}
return object[key];
}
var setToString = shortOut(baseSetToString);
function shortOut(func) {
var count = 0, lastCalled = 0;
return function() {
var stamp = nativeNow(), remaining = HOT_SPAN - (stamp - lastCalled);
lastCalled = stamp;
if (remaining > 0) {
if (++count >= HOT_COUNT) {
return arguments[0];
}
} else {
count = 0;
}
return func.apply(void 0, arguments);
};
}
function toSource(func) {
if (func != null) {
try {
return funcToString.call(func);
} catch (e) {
}
try {
return func + "";
} catch (e) {
}
}
return "";
}
function eq(value, other) {
return value === other || value !== value && other !== other;
}
var isArguments = baseIsArguments(function() {
return arguments;
}()) ? baseIsArguments : function(value) {
return isObjectLike(value) && hasOwnProperty.call(value, "callee") && !propertyIsEnumerable.call(value, "callee");
};
var isArray = Array.isArray;
function isArrayLike(value) {
return value != null && isLength(value.length) && !isFunction(value);
}
function isArrayLikeObject(value) {
return isObjectLike(value) && isArrayLike(value);
}
var isBuffer = nativeIsBuffer || stubFalse;
function isFunction(value) {
if (!isObject(value)) {
return false;
}
var tag = baseGetTag(value);
return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
}
function isLength(value) {
return typeof value == "number" && value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
}
function isObject(value) {
var type = typeof value;
return value != null && (type == "object" || type == "function");
}
function isObjectLike(value) {
return value != null && typeof value == "object";
}
function isPlainObject(value) {
if (!isObjectLike(value) || baseGetTag(value) != objectTag) {
return false;
}
var proto = getPrototype(value);
if (proto === null) {
return true;
}
var Ctor = hasOwnProperty.call(proto, "constructor") && proto.constructor;
return typeof Ctor == "function" && Ctor instanceof Ctor && funcToString.call(Ctor) == objectCtorString;
}
var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;
function toPlainObject(value) {
return copyObject(value, keysIn(value));
}
function keysIn(object) {
return isArrayLike(object) ? arrayLikeKeys(object, true) : baseKeysIn(object);
}
var merge2 = createAssigner(function(object, source, srcIndex) {
baseMerge(object, source, srcIndex);
});
function constant(value) {
return function() {
return value;
};
}
function identity(value) {
return value;
}
function stubFalse() {
return false;
}
module.exports = merge2;
})(lodash_merge, lodash_merge.exports);
var merge = lodash_merge.exports;
function querySelectorDeep(selector, root = document) {
const element = root.querySelector(selector);
if (element)
return element;
const allElements = root.querySelectorAll("*");
for (const el of allElements) {
if (el.shadowRoot) {
const found = querySelectorDeep(selector, el.shadowRoot);
if (found)
return found;
}
}
return null;
}
function useGetElement(element) {
if (isRef(element)) {
const value = element.value;
if (value instanceof Element) {
return value;
}
if (value == null ? void 0 : value.$el) {
return value.$el;
}
return null;
}
if (typeof element === "string") {
const found = document.querySelector(element);
if (found)
return found;
return querySelectorDeep(element);
}
if (typeof element === "function") {
return element();
}
return null;
}
const normalizePadding = (padding) => {
var _a, _b, _c, _d;
if (typeof padding === "number") {
return { top: padding, right: padding, bottom: padding, left: padding };
}
return {
top: (_a = padding == null ? void 0 : padding.top) != null ? _a : 0,
right: (_b = padding == null ? void 0 : padding.right) != null ? _b : 0,
bottom: (_c = padding == null ? void 0 : padding.bottom) != null ? _c : 0,
left: (_d = padding == null ? void 0 : padding.left) != null ? _d : 0
};
};
const normalizeRadius = (radius) => {
var _a, _b, _c, _d;
if (typeof radius === "number") {
return { leftTop: radius, rightTop: radius, rightBottom: radius, leftBottom: radius };
}
return {
leftTop: (_a = radius == null ? void 0 : radius.leftTop) != null ? _a : 0,
rightTop: (_b = radius == null ? void 0 : radius.rightTop) != null ? _b : 0,
rightBottom: (_c = radius == null ? void 0 : radius.rightBottom) != null ? _c : 0,
leftBottom: (_d = radius == null ? void 0 : radius.leftBottom) != null ? _d : 0
};
};
const generatePath = (rect, padding, radius) => {
const { innerWidth: w, innerHeight: h } = window;
const hole = {
top: rect.top - padding.top,
right: rect.left + rect.width + padding.right,
bottom: rect.top + rect.height + padding.bottom,
left: rect.left - padding.left
};
const maxRadius = Math.min((hole.right - hole.left) / 2, (hole.bottom - hole.top) / 2);
const r = {
lt: Math.min(radius.leftTop, maxRadius),
rt: Math.min(radius.rightTop, maxRadius),
rb: Math.min(radius.rightBottom, maxRadius),
lb: Math.min(radius.leftBottom, maxRadius)
};
return `
M${w},${h} H0 V0 H${w} Z
M${hole.left + r.lt},${hole.top}
Q${hole.left},${hole.top} ${hole.left},${hole.top + r.lt}
V${hole.bottom - r.lb}
Q${hole.left},${hole.bottom} ${hole.left + r.lb},${hole.bottom}
H${hole.right - r.rb}
Q${hole.right},${hole.bottom} ${hole.right},${hole.bottom - r.rb}
V${hole.top + r.rt}
Q${hole.right},${hole.top} ${hole.right - r.rt},${hole.top}
Z
`;
};
function useSvgOverlay() {
const path = ref("");
const currentTarget = ref(null);
const currentPadding = ref({ top: 0, right: 0, bottom: 0, left: 0 });
const currentRadius = ref({ leftTop: 0, rightTop: 0, rightBottom: 0, leftBottom: 0 });
let resizeObserver = null;
const refresh = () => {
if (!currentTarget.value)
return;
const rect = currentTarget.value.getBoundingClientRect();
path.value = generatePath(rect, currentPadding.value, currentRadius.value);
};
const updatePath = (element, options = {}) => {
if (!element)
return;
const padding = normalizePadding(options.padding);
const radius = normalizeRadius(options.borderRadius);
if (currentTarget.value !== element) {
if (resizeObserver && currentTarget.value) {
resizeObserver.unobserve(currentTarget.value);
}
resizeObserver == null ? void 0 : resizeObserver.observe(element);
}
currentTarget.value = element;
currentPadding.value = padding;
currentRadius.value = radius;
refresh();
};
onMounted(() => {
window.addEventListener("scroll", refresh, { capture: true });
window.addEventListener("resize", refresh);
resizeObserver = new ResizeObserver(refresh);
});
onUnmounted(() => {
window.removeEventListener("scroll", refresh, { capture: true });
window.removeEventListener("resize", refresh);
resizeObserver == null ? void 0 : resizeObserver.disconnect();
resizeObserver = null;
});
return { path, updatePath };
}
const _hoisted_1$1 = { 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" } };
const _hoisted_2 = ["d"];
const _hoisted_3 = { class: "v-onboarding-item" };
const _hoisted_4 = { class: "v-onboarding-item__header" };
const _hoisted_5 = {
key: 0,
class: "v-onboarding-item__header-title"
};
const _hoisted_6 = ["innerHTML"];
const _hoisted_7 = {
key: 1,
class: "v-onboarding-item__description"
};
const _hoisted_8 = { class: "v-onboarding-item__actions" };
const _sfc_main$1 = defineComponent({
__name: "VOnboardingStep",
setup(__props) {
const state = inject(STATE_INJECT_KEY);
const { step, isFirstStep, isLastStep, options, next, previous, exit: stateExit, finish } = state.value;
const ready = ref(false);
const rendered = ref(false);
const stepElement = ref();
let popperInstance = null;
const mergedOptions = computed(() => {
var _a;
return merge({}, options == null ? void 0 : options.value, (_a = step.value) == null ? void 0 : _a.options);
});
const isButtonVisible = computed(() => {
var _a, _b, _c;
return {
previous: !((_a = mergedOptions.value.hideButtons) == null ? void 0 : _a.previous),
next: !((_b = mergedOptions.value.hideButtons) == null ? void 0 : _b.next),
exit: !((_c = mergedOptions.value.hideButtons) == null ? void 0 : _c.exit)
};
});
const buttonLabels = computed(() => {
var _a, _b, _c, _d, _e, _f;
return {
previous: (_b = (_a = mergedOptions.value) == null ? void 0 : _a.labels) == null ? void 0 : _b.previousButton,
next: (_d = (_c = mergedOptions.value) == null ? void 0 : _c.labels) == null ? void 0 : _d.nextButton,
finish: (_f = (_e = mergedOptions.value) == null ? void 0 : _e.labels) == null ? void 0 : _f.finishButton
};
});
const { updatePath, path } = useSvgOverlay();
const focusTrap = useFocusTrap(stepElement, { preventScroll: true });
watch(ready, async (isReady) => {
var _a, _b;
await nextTick();
focusTrap.deactivate();
if (isReady && ((_b = (_a = mergedOptions.value) == null ? void 0 : _a.overlay) == null ? void 0 : _b.preventOverlayInteraction)) {
focusTrap.activate();
}
});
const updatePositions = (element) => {
var _a, _b, _c, _d, _e, _f;
popperInstance == null ? void 0 : popperInstance.update();
if ((_b = (_a = mergedOptions.value) == null ? void 0 : _a.overlay) == null ? void 0 : _b.enabled) {
updatePath(element, {
padding: (_d = (_c = mergedOptions.value) == null ? void 0 : _c.overlay) == null ? void 0 : _d.padding,
borderRadius: (_f = (_e = mergedOptions.value) == null ? void 0 : _e.overlay) == null ? void 0 : _f.borderRadius
});
}
};
const waitForScrollEnd = (element, callback) => {
const initialRect = element.getBoundingClientRect();
let done = false;
const finish2 = () => {
if (done)
return;
done = true;
document.removeEventListener("scrollend", finish2, true);
clearTimeout(detectTimeout);
clearTimeout(safetyTimeout);
callback();
};
document.addEventListener("scrollend", finish2, { capture: true });
const detectTimeout = setTimeout(() => {
const rect = element.getBoundingClientRect();
const moved = Math.abs(rect.top - initialRect.top) >= 1 || Math.abs(rect.left - initialRect.left) >= 1;
if (!moved)
return finish2();
let lastTop = rect.top;
let lastLeft = rect.left;
let stableFrames = 0;
const poll = () => {
if (done)
return;
const r = element.getBoundingClientRect();
if (Math.abs(r.top - lastTop) < 1 && Math.abs(r.left - lastLeft) < 1) {
if (++stableFrames >= 3)
return finish2();
} else {
stableFrames = 0;
}
lastTop = r.top;
lastLeft = r.left;
requestAnimationFrame(poll);
};
requestAnimationFrame(poll);
}, 100);
const safetyTimeout = setTimeout(finish2, 1500);
};
const attachElement = async () => {
var _a, _b, _c, _d, _e;
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)
return;
ready.value = false;
rendered.value = false;
await nextTick();
popperInstance == null ? void 0 : popperInstance.destroy();
popperInstance = null;
const initPopper = async () => {
rendered.value = true;
await nextTick();
if (!stepElement.value)
return;
popperInstance = createPopper(element, stepElement.value, mergedOptions.value.popper);
await popperInstance.update();
updatePositions(element);
ready.value = true;
};
const scrollOptions = (_c = mergedOptions.value) == null ? void 0 : _c.scrollToStep;
if (scrollOptions == null ? void 0 : scrollOptions.enabled) {
(_d = element.scrollIntoView) == null ? void 0 : _d.call(element, scrollOptions.options);
if (((_e = scrollOptions.options) == null ? void 0 : _e.behavior) === "smooth") {
waitForScrollEnd(element, initPopper);
} else {
initPopper();
}
} else {
initPopper();
}
};
watch(step, attachElement, { immediate: true });
onBeforeUnmount(() => {
popperInstance == null ? void 0 : popperInstance.destroy();
popperInstance = null;
});
const exit = () => {
var _a;
stateExit();
if ((_a = mergedOptions.value) == null ? void 0 : _a.autoFinishByExit)
finish();
};
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", null, [
(openBlock(), createElementBlock("svg", _hoisted_1$1, [
createElementVNode("path", { d: unref(path) }, null, 8, _hoisted_2)
])),
withDirectives(createElementVNode("div", {
ref_key: "stepElement",
ref: stepElement,
style: normalizeStyle([{ visibility: ready.value ? "visible" : "hidden" }, { "position": "absolute", "z-index": "var(--v-onboarding-step-z, 20)" }])
}, [
unref(step) ? renderSlot(_ctx.$slots, "default", { key: 0 }, () => [
createElementVNode("div", _hoisted_3, [
createElementVNode("div", _hoisted_4, [
unref(step).content.title ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(unref(step).content.title), 1)) : createCommentVNode("", true),
isButtonVisible.value.exit ? (openBlock(), createElementBlock("button", {
key: 1,
onClick: exit,
"aria-label": "Close",
class: "v-onboarding-item__header-close"
}, [..._cache[2] || (_cache[2] = [
createElementVNode("svg", {
xmlns: "http://www.w3.org/2000/svg",
class: "h-4 w-4",
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor"
}, [
createElementVNode("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
d: "M6 18L18 6M6 6l12 12"
})
], -1)
])])) : createCommentVNode("", true)
]),
unref(step).content.description && unref(step).content.html ? (openBlock(), createElementBlock("p", {
key: 0,
class: "v-onboarding-item__description",
innerHTML: unref(step).content.description
}, null, 8, _hoisted_6)) : unref(step).content.description ? (openBlock(), createElementBlock("p", _hoisted_7, toDisplayString(unref(step).content.description), 1)) : createCommentVNode("", true),
createElementVNode("div", _hoisted_8, [
!unref(isFirstStep) && isButtonVisible.value.previous ? (openBlock(), createElementBlock("button", {
key: 0,
type: "button",
onClick: _cache[0] || (_cache[0] = (...args) => unref(previous) && unref(previous)(...args)),
class: "v-onboarding-btn-secondary"
}, toDisplayString(buttonLabels.value.previous), 1)) : createCommentVNode("", true),
isButtonVisible.value.next ? (openBlock(), createElementBlock("button", {
key: 1,
type: "button",
onClick: _cache[1] || (_cache[1] = ($event) => unref(isLastStep) ? unref(finish)() : unref(next)()),
class: "v-onboarding-btn-primary"
}, toDisplayString(unref(isLastStep) ? buttonLabels.value.finish : buttonLabels.value.next), 1)) : createCommentVNode("", true)
])
])
]) : createCommentVNode("", true),
_cache[3] || (_cache[3] = createElementVNode("div", { "data-popper-arrow": "" }, null, -1))
], 4), [
[vShow, rendered.value]
])
]);
};
}
});
const defaultVOnboardingWrapperOptions = {
popper: {
modifiers: [
{
name: "arrow",
options: {
padding: 8
}
},
{
name: "flip",
options: {
fallbackPlacements: ["top", "bottom", "right", "left"]
}
},
{
name: "preventOverflow",
options: {
boundary: "viewport",
padding: 8,
tether: false,
altAxis: true
}
}
]
},
overlay: {
enabled: true,
padding: 0,
borderRadius: 0,
preventOverlayInteraction: true
},
scrollToStep: {
enabled: true,
options: {
behavior: "smooth",
block: "center",
inline: "center"
}
},
autoFinishByExit: true,
labels: {
previousButton: "Previous",
nextButton: "Next",
finishButton: "Finish"
},
hideButtons: {
previous: false,
next: false,
exit: false
},
hideNextStepDuringHook: false
};
const _hoisted_1 = {
key: 0,
"data-v-onboarding-wrapper": "",
style: { "pointer-events": "auto" }
};
const POINTER_ATTR = "data-v-onboarding-pointer-events";
const _sfc_main = defineComponent({
__name: "VOnboardingWrapper",
props: {
steps: { default: () => [] },
options: { default: () => ({}) }
},
emits: ["finish", "exit"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const currentIndex = ref(OnboardingState.IDLE);
const showStep = ref(true);
const mergedOptions = computed(() => merge({}, defaultVOnboardingWrapperOptions, props.options));
const currentStep = computed(() => {
var _a;
return (_a = props.steps) == null ? void 0 : _a[currentIndex.value];
});
const isActive = computed(() => currentIndex.value >= 0 && currentIndex.value < props.steps.length);
const isFirstStep = computed(() => currentIndex.value === 0);
const isLastStep = computed(() => currentIndex.value === props.steps.length - 1);
function getStepOptions(step) {
return step ? merge({}, mergedOptions.value, step.options) : mergedOptions.value;
}
function setInteraction(element, value) {
if (!(element == null ? void 0 : element.style) || element.style.pointerEvents === value)
return;
const current = element.style.pointerEvents;
if (current)
element.setAttribute(POINTER_ATTR, current);
element.style.pointerEvents = value;
}
function restoreInteraction(element) {
if (!(element == null ? void 0 : element.style))
return;
const stored = element.getAttribute(POINTER_ATTR);
if (stored) {
element.style.pointerEvents = stored;
element.removeAttribute(POINTER_ATTR);
} else {
element.style.removeProperty("pointer-events");
}
}
function createHookOptions(step, index, direction) {
return {
index,
step,
direction,
isForward: direction === Direction.FORWARD,
isBackward: direction === Direction.BACKWARD
};
}
function runSetup(step, index, direction) {
var _a, _b, _c, _d;
const element = useGetElement(step.attachTo.element);
const options = getStepOptions(step);
if ((_a = step.attachTo.classList) == null ? void 0 : _a.length) {
element == null ? void 0 : element.classList.add(...step.attachTo.classList);
}
if ((_b = options == null ? void 0 : options.overlay) == null ? void 0 : _b.preventOverlayInteraction) {
setInteraction(document.body, "none");
setInteraction(element, "auto");
}
return (_d = (_c = step.on) == null ? void 0 : _c.beforeStep) == null ? void 0 : _d.call(_c, createHookOptions(step, index, direction));
}
function runCleanup(step, index, direction) {
var _a, _b, _c, _d;
const element = useGetElement(step.attachTo.element);
const options = getStepOptions(step);
if ((_a = step.attachTo.classList) == null ? void 0 : _a.length) {
element == null ? void 0 : element.classList.remove(...step.attachTo.classList);
}
if ((_b = options == null ? void 0 : options.overlay) == null ? void 0 : _b.preventOverlayInteraction) {
restoreInteraction(element);
}
return (_d = (_c = step.on) == null ? void 0 : _c.afterStep) == null ? void 0 : _d.call(_c, createHookOptions(step, index, direction));
}
function goToStep(target) {
var _a;
const newIndex = typeof target === "function" ? target(currentIndex.value) : target;
const oldIndex = currentIndex.value;
if (newIndex === oldIndex)
return;
const direction = newIndex > oldIndex ? Direction.FORWARD : Direction.BACKWARD;
const oldStep = props.steps[oldIndex];
const newStep = props.steps[newIndex];
if ((_a = getStepOptions(newStep)) == null ? void 0 : _a.hideNextStepDuringHook) {
showStep.value = false;
}
currentIndex.value = newIndex;
(async () => {
if (oldStep)
await runCleanup(oldStep, oldIndex, direction);
if (newStep)
await runSetup(newStep, newIndex, direction);
showStep.value = true;
})();
}
function start() {
goToStep(0);
}
function finish() {
const step = props.steps[currentIndex.value];
const index = currentIndex.value;
currentIndex.value = OnboardingState.FINISHED;
restoreInteraction(document.body);
emit("finish");
if (step)
runCleanup(step, index, Direction.FORWARD);
}
function exit() {
emit("exit", currentIndex.value);
}
function previous() {
goToStep((i) => i - 1);
}
function next() {
if (isLastStep.value) {
finish();
} else {
goToStep((i) => i + 1);
}
}
const state = computed(() => ({
step: currentStep,
options: mergedOptions,
next,
previous,
finish,
exit,
isFirstStep,
isLastStep
}));
provide(STATE_INJECT_KEY, state);
__expose({ start, finish, goToStep });
return (_ctx, _cache) => {
return isActive.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
showStep.value ? renderSlot(_ctx.$slots, "default", {
key: 0,
step: currentStep.value,
next,
previous,
exit,
isFirst: isFirstStep.value,
isLast: isLastStep.value,
index: currentIndex.value
}, () => [
createVNode(_sfc_main$1)
]) : createCommentVNode("", true)
])) : createCommentVNode("", true);
};
}
});
function useVOnboarding(wrapperRef) {
const start = () => {
var _a;
return (_a = wrapperRef == null ? void 0 : wrapperRef.value) == null ? void 0 : _a.start();
};
const finish = () => {
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);
};
return {
start,
finish,
exit,
goToStep
};
}
var vOnboarding = "";
export { _sfc_main$1 as VOnboardingStep, _sfc_main as VOnboardingWrapper, useVOnboarding };