bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
1,302 lines (1,301 loc) • 45.4 kB
JavaScript
import { C as watchImmediate, _ as toRef$1, a as increaseWithUnit, b as useIntervalFn, c as isDef, d as noop, f as notNullish, g as toArray, h as timestamp, i as hasOwn, l as isIOS, o as injectLocal, p as pxValue, s as isClient, t as createEventHook, u as isObject, v as tryOnMounted, w as watchPausable, y as tryOnScopeDispose } from "./dist-DKc2ivHS.js";
import { computed, getCurrentInstance, hasInjectionContext, nextTick, onMounted, reactive, readonly, ref, shallowRef, toValue, unref, watch, watchEffect } from "vue";
//#region ../../node_modules/.pnpm/@vueuse+core@14.2.1_vue@3.5.41_typescript@5.9.3_/node_modules/@vueuse/core/dist/index.js
var defaultWindow = isClient ? window : void 0;
var defaultDocument = isClient ? window.document : void 0;
isClient && window.navigator;
isClient && window.location;
/**
* Get the dom element of a ref of element or Vue component instance
*
* @param elRef
*/
function unrefElement(elRef) {
var _$el;
const plain = toValue(elRef);
return (_$el = plain === null || plain === void 0 ? void 0 : plain.$el) !== null && _$el !== void 0 ? _$el : plain;
}
function useEventListener(...args) {
const register = (el, event, listener, options) => {
el.addEventListener(event, listener, options);
return () => el.removeEventListener(event, listener, options);
};
const firstParamTargets = computed(() => {
const test = toArray(toValue(args[0])).filter((e) => e != null);
return test.every((e) => typeof e !== "string") ? test : void 0;
});
return watchImmediate(() => {
var _firstParamTargets$va, _firstParamTargets$va2;
return [
(_firstParamTargets$va = (_firstParamTargets$va2 = firstParamTargets.value) === null || _firstParamTargets$va2 === void 0 ? void 0 : _firstParamTargets$va2.map((e) => unrefElement(e))) !== null && _firstParamTargets$va !== void 0 ? _firstParamTargets$va : [defaultWindow].filter((e) => e != null),
toArray(toValue(firstParamTargets.value ? args[1] : args[0])),
toArray(unref(firstParamTargets.value ? args[2] : args[1])),
toValue(firstParamTargets.value ? args[3] : args[2])
];
}, ([raw_targets, raw_events, raw_listeners, raw_options], _, onCleanup) => {
if (!(raw_targets === null || raw_targets === void 0 ? void 0 : raw_targets.length) || !(raw_events === null || raw_events === void 0 ? void 0 : raw_events.length) || !(raw_listeners === null || raw_listeners === void 0 ? void 0 : raw_listeners.length)) return;
const optionsClone = isObject(raw_options) ? { ...raw_options } : raw_options;
const cleanups = raw_targets.flatMap((el) => raw_events.flatMap((event) => raw_listeners.map((listener) => register(el, event, listener, optionsClone))));
onCleanup(() => {
cleanups.forEach((fn) => fn());
});
}, { flush: "post" });
}
var _iOSWorkaround = false;
function onClickOutside(target, handler, options = {}) {
const { window: window$1 = defaultWindow, ignore = [], capture = true, detectIframe = false, controls = false } = options;
if (!window$1) return controls ? {
stop: noop,
cancel: noop,
trigger: noop
} : noop;
if (isIOS && !_iOSWorkaround) {
_iOSWorkaround = true;
const listenerOptions = { passive: true };
Array.from(window$1.document.body.children).forEach((el) => el.addEventListener("click", noop, listenerOptions));
window$1.document.documentElement.addEventListener("click", noop, listenerOptions);
}
let shouldListen = true;
const shouldIgnore = (event) => {
return toValue(ignore).some((target$1) => {
if (typeof target$1 === "string") return Array.from(window$1.document.querySelectorAll(target$1)).some((el) => el === event.target || event.composedPath().includes(el));
else {
const el = unrefElement(target$1);
return el && (event.target === el || event.composedPath().includes(el));
}
});
};
/**
* Determines if the given target has multiple root elements.
* Referenced from: https://github.com/vuejs/test-utils/blob/ccb460be55f9f6be05ab708500a41ec8adf6f4bc/src/vue-wrapper.ts#L21
*/
function hasMultipleRoots(target$1) {
const vm = toValue(target$1);
return vm && vm.$.subTree.shapeFlag === 16;
}
function checkMultipleRoots(target$1, event) {
const vm = toValue(target$1);
const children = vm.$.subTree && vm.$.subTree.children;
if (children == null || !Array.isArray(children)) return false;
return children.some((child) => child.el === event.target || event.composedPath().includes(child.el));
}
const listener = (event) => {
const el = unrefElement(target);
if (event.target == null) return;
if (!(el instanceof Element) && hasMultipleRoots(target) && checkMultipleRoots(target, event)) return;
if (!el || el === event.target || event.composedPath().includes(el)) return;
if ("detail" in event && event.detail === 0) shouldListen = !shouldIgnore(event);
if (!shouldListen) {
shouldListen = true;
return;
}
handler(event);
};
let isProcessingClick = false;
const cleanup = [
useEventListener(window$1, "click", (event) => {
if (!isProcessingClick) {
isProcessingClick = true;
setTimeout(() => {
isProcessingClick = false;
}, 0);
listener(event);
}
}, {
passive: true,
capture
}),
useEventListener(window$1, "pointerdown", (e) => {
const el = unrefElement(target);
shouldListen = !shouldIgnore(e) && !!(el && !e.composedPath().includes(el));
}, { passive: true }),
detectIframe && useEventListener(window$1, "blur", (event) => {
setTimeout(() => {
var _window$document$acti;
const el = unrefElement(target);
if (((_window$document$acti = window$1.document.activeElement) === null || _window$document$acti === void 0 ? void 0 : _window$document$acti.tagName) === "IFRAME" && !(el === null || el === void 0 ? void 0 : el.contains(window$1.document.activeElement))) handler(event);
}, 0);
}, { passive: true })
].filter(Boolean);
const stop = () => cleanup.forEach((fn) => fn());
if (controls) return {
stop,
cancel: () => {
shouldListen = false;
},
trigger: (event) => {
shouldListen = true;
listener(event);
shouldListen = false;
}
};
return stop;
}
/**
* Mounted state in ref.
*
* @see https://vueuse.org/useMounted
*
* @__NO_SIDE_EFFECTS__
*/
function useMounted() {
const isMounted = shallowRef(false);
const instance = getCurrentInstance();
if (instance) onMounted(() => {
isMounted.value = true;
}, instance);
return isMounted;
}
/* @__NO_SIDE_EFFECTS__ */
function useSupported(callback) {
const isMounted = useMounted();
return computed(() => {
isMounted.value;
return Boolean(callback());
});
}
/**
* Watch for changes being made to the DOM tree.
*
* @see https://vueuse.org/useMutationObserver
* @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver MutationObserver MDN
* @param target
* @param callback
* @param options
*/
function useMutationObserver(target, callback, options = {}) {
const { window: window$1 = defaultWindow, ...mutationOptions } = options;
let observer;
const isSupported = /* @__PURE__ */ useSupported(() => window$1 && "MutationObserver" in window$1);
const cleanup = () => {
if (observer) {
observer.disconnect();
observer = void 0;
}
};
const stopWatch = watch(computed(() => {
const items = toArray(toValue(target)).map(unrefElement).filter(notNullish);
return new Set(items);
}), (newTargets) => {
cleanup();
if (isSupported.value && newTargets.size) {
observer = new MutationObserver(callback);
newTargets.forEach((el) => observer.observe(el, mutationOptions));
}
}, {
immediate: true,
flush: "post"
});
const takeRecords = () => {
return observer === null || observer === void 0 ? void 0 : observer.takeRecords();
};
const stop = () => {
stopWatch();
cleanup();
};
tryOnScopeDispose(stop);
return {
isSupported,
stop,
takeRecords
};
}
/**
* Fires when the element or any element containing it is removed.
*
* @param target
* @param callback
* @param options
*/
function onElementRemoval(target, callback, options = {}) {
const { window: window$1 = defaultWindow, document: document$1 = window$1 === null || window$1 === void 0 ? void 0 : window$1.document, flush = "sync" } = options;
if (!window$1 || !document$1) return noop;
let stopFn;
const cleanupAndUpdate = (fn) => {
stopFn === null || stopFn === void 0 || stopFn();
stopFn = fn;
};
const stopWatch = watchEffect(() => {
const el = unrefElement(target);
if (el) {
const { stop } = useMutationObserver(document$1, (mutationsList) => {
if (mutationsList.map((mutation) => [...mutation.removedNodes]).flat().some((node) => node === el || node.contains(el))) callback(mutationsList);
}, {
window: window$1,
childList: true,
subtree: true
});
cleanupAndUpdate(stop);
}
}, { flush });
const stopHandle = () => {
stopWatch();
cleanupAndUpdate();
};
tryOnScopeDispose(stopHandle);
return stopHandle;
}
function createKeyPredicate(keyFilter) {
if (typeof keyFilter === "function") return keyFilter;
else if (typeof keyFilter === "string") return (event) => event.key === keyFilter;
else if (Array.isArray(keyFilter)) return (event) => keyFilter.includes(event.key);
return () => true;
}
function onKeyStroke(...args) {
let key;
let handler;
let options = {};
if (args.length === 3) {
key = args[0];
handler = args[1];
options = args[2];
} else if (args.length === 2) if (typeof args[1] === "object") {
key = true;
handler = args[0];
options = args[1];
} else {
key = args[0];
handler = args[1];
}
else {
key = true;
handler = args[0];
}
const { target = defaultWindow, eventName = "keydown", passive = false, dedupe = false } = options;
const predicate = createKeyPredicate(key);
const listener = (e) => {
if (e.repeat && toValue(dedupe)) return;
if (predicate(e)) handler(e);
};
return useEventListener(target, eventName, listener, passive);
}
/**
* Call function on every `requestAnimationFrame`. With controls of pausing and resuming.
*
* @see https://vueuse.org/useRafFn
* @param fn
* @param options
*/
function useRafFn(fn, options = {}) {
const { immediate = true, fpsLimit = null, window: window$1 = defaultWindow, once = false } = options;
const isActive = shallowRef(false);
const intervalLimit = computed(() => {
const limit = toValue(fpsLimit);
return limit ? 1e3 / limit : null;
});
let previousFrameTimestamp = 0;
let rafId = null;
function loop(timestamp$1) {
if (!isActive.value || !window$1) return;
if (!previousFrameTimestamp) previousFrameTimestamp = timestamp$1;
const delta = timestamp$1 - previousFrameTimestamp;
if (intervalLimit.value && delta < intervalLimit.value) {
rafId = window$1.requestAnimationFrame(loop);
return;
}
previousFrameTimestamp = timestamp$1;
fn({
delta,
timestamp: timestamp$1
});
if (once) {
isActive.value = false;
rafId = null;
return;
}
rafId = window$1.requestAnimationFrame(loop);
}
function resume() {
if (!isActive.value && window$1) {
isActive.value = true;
previousFrameTimestamp = 0;
rafId = window$1.requestAnimationFrame(loop);
}
}
function pause() {
isActive.value = false;
if (rafId != null && window$1) {
window$1.cancelAnimationFrame(rafId);
rafId = null;
}
}
if (immediate) resume();
tryOnScopeDispose(pause);
return {
isActive: readonly(isActive),
pause,
resume
};
}
var ssrWidthSymbol = Symbol("vueuse-ssr-width");
/* @__NO_SIDE_EFFECTS__ */
function useSSRWidth() {
const ssrWidth = hasInjectionContext() ? injectLocal(ssrWidthSymbol, null) : null;
return typeof ssrWidth === "number" ? ssrWidth : void 0;
}
/**
* Reactive Media Query.
*
* @see https://vueuse.org/useMediaQuery
* @param query
* @param options
*/
function useMediaQuery(query, options = {}) {
const { window: window$1 = defaultWindow, ssrWidth = /* @__PURE__ */ useSSRWidth() } = options;
const isSupported = /* @__PURE__ */ useSupported(() => window$1 && "matchMedia" in window$1 && typeof window$1.matchMedia === "function");
const ssrSupport = shallowRef(typeof ssrWidth === "number");
const mediaQuery = shallowRef();
const matches = shallowRef(false);
const handler = (event) => {
matches.value = event.matches;
};
watchEffect(() => {
if (ssrSupport.value) {
ssrSupport.value = !isSupported.value;
matches.value = toValue(query).split(",").some((queryString) => {
const not = queryString.includes("not all");
const minWidth = queryString.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
const maxWidth = queryString.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
let res = Boolean(minWidth || maxWidth);
if (minWidth && res) res = ssrWidth >= pxValue(minWidth[1]);
if (maxWidth && res) res = ssrWidth <= pxValue(maxWidth[1]);
return not ? !res : res;
});
return;
}
if (!isSupported.value) return;
mediaQuery.value = window$1.matchMedia(toValue(query));
matches.value = mediaQuery.value.matches;
});
useEventListener(mediaQuery, "change", handler, { passive: true });
return computed(() => matches.value);
}
/**
* Breakpoints from Bootstrap V5
*
* @see https://getbootstrap.com/docs/5.0/layout/breakpoints
*/
var breakpointsBootstrapV5 = {
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
xxl: 1400
};
/**
* Reactively viewport breakpoints
*
* @see https://vueuse.org/useBreakpoints
*
* @__NO_SIDE_EFFECTS__
*/
function useBreakpoints(breakpoints, options = {}) {
function getValue$1(k, delta) {
let v = toValue(breakpoints[toValue(k)]);
if (delta != null) v = increaseWithUnit(v, delta);
if (typeof v === "number") v = `${v}px`;
return v;
}
const { window: window$1 = defaultWindow, strategy = "min-width", ssrWidth = /* @__PURE__ */ useSSRWidth() } = options;
const ssrSupport = typeof ssrWidth === "number";
const mounted = ssrSupport ? shallowRef(false) : { value: true };
if (ssrSupport) tryOnMounted(() => mounted.value = !!window$1);
function match(query, size) {
if (!mounted.value && ssrSupport) return query === "min" ? ssrWidth >= pxValue(size) : ssrWidth <= pxValue(size);
if (!window$1) return false;
return window$1.matchMedia(`(${query}-width: ${size})`).matches;
}
const greaterOrEqual = (k) => {
return useMediaQuery(() => `(min-width: ${getValue$1(k)})`, options);
};
const smallerOrEqual = (k) => {
return useMediaQuery(() => `(max-width: ${getValue$1(k)})`, options);
};
const shortcutMethods = Object.keys(breakpoints).reduce((shortcuts, k) => {
Object.defineProperty(shortcuts, k, {
get: () => strategy === "min-width" ? greaterOrEqual(k) : smallerOrEqual(k),
enumerable: true,
configurable: true
});
return shortcuts;
}, {});
function current() {
const points = Object.keys(breakpoints).map((k) => [
k,
shortcutMethods[k],
pxValue(getValue$1(k))
]).sort((a, b) => a[2] - b[2]);
return computed(() => points.filter(([, v]) => v.value).map(([k]) => k));
}
return Object.assign(shortcutMethods, {
greaterOrEqual,
smallerOrEqual,
greater(k) {
return useMediaQuery(() => `(min-width: ${getValue$1(k, .1)})`, options);
},
smaller(k) {
return useMediaQuery(() => `(max-width: ${getValue$1(k, -.1)})`, options);
},
between(a, b) {
return useMediaQuery(() => `(min-width: ${getValue$1(a)}) and (max-width: ${getValue$1(b, -.1)})`, options);
},
isGreater(k) {
return match("min", getValue$1(k, .1));
},
isGreaterOrEqual(k) {
return match("min", getValue$1(k));
},
isSmaller(k) {
return match("max", getValue$1(k, -.1));
},
isSmallerOrEqual(k) {
return match("max", getValue$1(k));
},
isInBetween(a, b) {
return match("min", getValue$1(a)) && match("max", getValue$1(b, -.1));
},
current,
active() {
const bps = current();
return computed(() => bps.value.length === 0 ? "" : bps.value.at(strategy === "min-width" ? -1 : 0));
}
});
}
function cloneFnJSON(source) {
return JSON.parse(JSON.stringify(source));
}
var _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
var globalKey = "__vueuse_ssr_handlers__";
var handlers = /* @__PURE__ */ getHandlers();
function getHandlers() {
if (!(globalKey in _global)) _global[globalKey] = _global[globalKey] || {};
return _global[globalKey];
}
function getSSRHandler(key, fallback) {
return handlers[key] || fallback;
}
/**
* Reactive dark theme preference.
*
* @see https://vueuse.org/usePreferredDark
* @param [options]
*
* @__NO_SIDE_EFFECTS__
*/
function usePreferredDark(options) {
return useMediaQuery("(prefers-color-scheme: dark)", options);
}
function guessSerializerType(rawInit) {
return rawInit == null ? "any" : rawInit instanceof Set ? "set" : rawInit instanceof Map ? "map" : rawInit instanceof Date ? "date" : typeof rawInit === "boolean" ? "boolean" : typeof rawInit === "string" ? "string" : typeof rawInit === "object" ? "object" : !Number.isNaN(rawInit) ? "number" : "any";
}
var StorageSerializers = {
boolean: {
read: (v) => v === "true",
write: (v) => String(v)
},
object: {
read: (v) => JSON.parse(v),
write: (v) => JSON.stringify(v)
},
number: {
read: (v) => Number.parseFloat(v),
write: (v) => String(v)
},
any: {
read: (v) => v,
write: (v) => String(v)
},
string: {
read: (v) => v,
write: (v) => String(v)
},
map: {
read: (v) => new Map(JSON.parse(v)),
write: (v) => JSON.stringify(Array.from(v.entries()))
},
set: {
read: (v) => new Set(JSON.parse(v)),
write: (v) => JSON.stringify(Array.from(v))
},
date: {
read: (v) => new Date(v),
write: (v) => v.toISOString()
}
};
var customStorageEventName = "vueuse-storage";
/**
* Reactive LocalStorage/SessionStorage.
*
* @see https://vueuse.org/useStorage
*/
function useStorage(key, defaults$1, storage, options = {}) {
var _options$serializer;
const { flush = "pre", deep = true, listenToStorageChanges = true, writeDefaults = true, mergeDefaults = false, shallow, window: window$1 = defaultWindow, eventFilter, onError = (e) => {
console.error(e);
}, initOnMounted } = options;
const data = (shallow ? shallowRef : ref)(typeof defaults$1 === "function" ? defaults$1() : defaults$1);
const keyComputed = computed(() => toValue(key));
if (!storage) try {
storage = getSSRHandler("getDefaultStorage", () => defaultWindow === null || defaultWindow === void 0 ? void 0 : defaultWindow.localStorage)();
} catch (e) {
onError(e);
}
if (!storage) return data;
const rawInit = toValue(defaults$1);
const type = guessSerializerType(rawInit);
const serializer = (_options$serializer = options.serializer) !== null && _options$serializer !== void 0 ? _options$serializer : StorageSerializers[type];
const { pause: pauseWatch, resume: resumeWatch } = watchPausable(data, (newValue) => write(newValue), {
flush,
deep,
eventFilter
});
watch(keyComputed, () => update(), { flush });
let firstMounted = false;
const onStorageEvent = (ev) => {
if (initOnMounted && !firstMounted) return;
update(ev);
};
const onStorageCustomEvent = (ev) => {
if (initOnMounted && !firstMounted) return;
updateFromCustomEvent(ev);
};
/**
* The custom event is needed for same-document syncing when using custom
* storage backends, but it doesn't work across different documents.
*
* TODO: Consider implementing a BroadcastChannel-based solution that fixes this.
*/
if (window$1 && listenToStorageChanges) if (storage instanceof Storage) useEventListener(window$1, "storage", onStorageEvent, { passive: true });
else useEventListener(window$1, customStorageEventName, onStorageCustomEvent);
if (initOnMounted) tryOnMounted(() => {
firstMounted = true;
update();
});
else update();
function dispatchWriteEvent(oldValue, newValue) {
if (window$1) {
const payload = {
key: keyComputed.value,
oldValue,
newValue,
storageArea: storage
};
window$1.dispatchEvent(storage instanceof Storage ? new StorageEvent("storage", payload) : new CustomEvent(customStorageEventName, { detail: payload }));
}
}
function write(v) {
try {
const oldValue = storage.getItem(keyComputed.value);
if (v == null) {
dispatchWriteEvent(oldValue, null);
storage.removeItem(keyComputed.value);
} else {
const serialized = serializer.write(v);
if (oldValue !== serialized) {
storage.setItem(keyComputed.value, serialized);
dispatchWriteEvent(oldValue, serialized);
}
}
} catch (e) {
onError(e);
}
}
function read(event) {
const rawValue = event ? event.newValue : storage.getItem(keyComputed.value);
if (rawValue == null) {
if (writeDefaults && rawInit != null) storage.setItem(keyComputed.value, serializer.write(rawInit));
return rawInit;
} else if (!event && mergeDefaults) {
const value = serializer.read(rawValue);
if (typeof mergeDefaults === "function") return mergeDefaults(value, rawInit);
else if (type === "object" && !Array.isArray(value)) return {
...rawInit,
...value
};
return value;
} else if (typeof rawValue !== "string") return rawValue;
else return serializer.read(rawValue);
}
function update(event) {
if (event && event.storageArea !== storage) return;
if (event && event.key == null) {
data.value = rawInit;
return;
}
if (event && event.key !== keyComputed.value) return;
pauseWatch();
try {
const serializedData = serializer.write(data.value);
if (event === void 0 || (event === null || event === void 0 ? void 0 : event.newValue) !== serializedData) data.value = read(event);
} catch (e) {
onError(e);
} finally {
if (event) nextTick(resumeWatch);
else resumeWatch();
}
}
function updateFromCustomEvent(event) {
update(event.detail);
}
return data;
}
var CSS_DISABLE_TRANS = "*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";
/**
* Reactive color mode with auto data persistence.
*
* @see https://vueuse.org/useColorMode
* @param options
*/
function useColorMode(options = {}) {
const { selector = "html", attribute = "class", initialValue = "auto", window: window$1 = defaultWindow, storage, storageKey = "vueuse-color-scheme", listenToStorageChanges = true, storageRef, emitAuto, disableTransition = true } = options;
const modes = {
auto: "",
light: "light",
dark: "dark",
...options.modes || {}
};
const preferredDark = usePreferredDark({ window: window$1 });
const system = computed(() => preferredDark.value ? "dark" : "light");
const store = storageRef || (storageKey == null ? toRef$1(initialValue) : useStorage(storageKey, initialValue, storage, {
window: window$1,
listenToStorageChanges
}));
const state = computed(() => store.value === "auto" ? system.value : store.value);
const updateHTMLAttrs = getSSRHandler("updateHTMLAttrs", (selector$1, attribute$1, value) => {
const el = typeof selector$1 === "string" ? window$1 === null || window$1 === void 0 ? void 0 : window$1.document.querySelector(selector$1) : unrefElement(selector$1);
if (!el) return;
const classesToAdd = /* @__PURE__ */ new Set();
const classesToRemove = /* @__PURE__ */ new Set();
let attributeToChange = null;
if (attribute$1 === "class") {
const current = value.split(/\s/g);
Object.values(modes).flatMap((i) => (i || "").split(/\s/g)).filter(Boolean).forEach((v) => {
if (current.includes(v)) classesToAdd.add(v);
else classesToRemove.add(v);
});
} else attributeToChange = {
key: attribute$1,
value
};
if (classesToAdd.size === 0 && classesToRemove.size === 0 && attributeToChange === null) return;
let style;
if (disableTransition) {
style = window$1.document.createElement("style");
style.appendChild(document.createTextNode(CSS_DISABLE_TRANS));
window$1.document.head.appendChild(style);
}
for (const c of classesToAdd) el.classList.add(c);
for (const c of classesToRemove) el.classList.remove(c);
if (attributeToChange) el.setAttribute(attributeToChange.key, attributeToChange.value);
if (disableTransition) {
window$1.getComputedStyle(style).opacity;
document.head.removeChild(style);
}
});
function defaultOnChanged(mode) {
var _modes$mode;
updateHTMLAttrs(selector, attribute, (_modes$mode = modes[mode]) !== null && _modes$mode !== void 0 ? _modes$mode : mode);
}
function onChanged(mode) {
if (options.onChanged) options.onChanged(mode, defaultOnChanged);
else defaultOnChanged(mode);
}
watch(state, onChanged, {
flush: "post",
immediate: true
});
tryOnMounted(() => onChanged(state.value));
const auto = computed({
get() {
return emitAuto ? store.value : state.value;
},
set(v) {
store.value = v;
}
});
return Object.assign(auto, {
store,
system,
state
});
}
/**
* Reactively track `document.visibilityState`.
*
* @see https://vueuse.org/useDocumentVisibility
*
* @__NO_SIDE_EFFECTS__
*/
function useDocumentVisibility(options = {}) {
const { document: document$1 = defaultDocument } = options;
if (!document$1) return shallowRef("visible");
const visibility = shallowRef(document$1.visibilityState);
useEventListener(document$1, "visibilitychange", () => {
visibility.value = document$1.visibilityState;
}, { passive: true });
return visibility;
}
function useDropZone(target, options = {}) {
const isOverDropZone = shallowRef(false);
const files = shallowRef(null);
let counter = 0;
let isValid = true;
if (isClient) {
var _options$multiple, _options$preventDefau;
const _options = typeof options === "function" ? { onDrop: options } : options;
const multiple = (_options$multiple = _options.multiple) !== null && _options$multiple !== void 0 ? _options$multiple : true;
const preventDefaultForUnhandled = (_options$preventDefau = _options.preventDefaultForUnhandled) !== null && _options$preventDefau !== void 0 ? _options$preventDefau : false;
const getFiles = (event) => {
var _event$dataTransfer$f, _event$dataTransfer;
const list = Array.from((_event$dataTransfer$f = (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.files) !== null && _event$dataTransfer$f !== void 0 ? _event$dataTransfer$f : []);
return list.length === 0 ? null : multiple ? list : [list[0]];
};
const checkDataTypes = (types) => {
const dataTypes = unref(_options.dataTypes);
if (typeof dataTypes === "function") return dataTypes(types);
if (!(dataTypes === null || dataTypes === void 0 ? void 0 : dataTypes.length)) return true;
if (types.length === 0) return false;
return types.every((type) => dataTypes.some((allowedType) => type.includes(allowedType)));
};
const checkValidity = (items) => {
if (_options.checkValidity) return _options.checkValidity(items);
const dataTypesValid = checkDataTypes(Array.from(items !== null && items !== void 0 ? items : []).map((item) => item.type));
const multipleFilesValid = multiple || items.length <= 1;
return dataTypesValid && multipleFilesValid;
};
const isSafari = () => /^(?:(?!chrome|android).)*safari/i.test(navigator.userAgent) && !("chrome" in window);
const handleDragEvent = (event, eventType) => {
var _event$dataTransfer2, _ref;
const dataTransferItemList = (_event$dataTransfer2 = event.dataTransfer) === null || _event$dataTransfer2 === void 0 ? void 0 : _event$dataTransfer2.items;
isValid = (_ref = dataTransferItemList && checkValidity(dataTransferItemList)) !== null && _ref !== void 0 ? _ref : false;
if (preventDefaultForUnhandled) event.preventDefault();
if (!isSafari() && !isValid) {
if (event.dataTransfer) event.dataTransfer.dropEffect = "none";
return;
}
event.preventDefault();
if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
const currentFiles = getFiles(event);
switch (eventType) {
case "enter":
var _options$onEnter;
counter += 1;
isOverDropZone.value = true;
(_options$onEnter = _options.onEnter) === null || _options$onEnter === void 0 || _options$onEnter.call(_options, null, event);
break;
case "over":
var _options$onOver;
(_options$onOver = _options.onOver) === null || _options$onOver === void 0 || _options$onOver.call(_options, null, event);
break;
case "leave":
var _options$onLeave;
counter -= 1;
if (counter === 0) isOverDropZone.value = false;
(_options$onLeave = _options.onLeave) === null || _options$onLeave === void 0 || _options$onLeave.call(_options, null, event);
break;
case "drop":
counter = 0;
isOverDropZone.value = false;
if (isValid) {
var _options$onDrop;
files.value = currentFiles;
(_options$onDrop = _options.onDrop) === null || _options$onDrop === void 0 || _options$onDrop.call(_options, currentFiles, event);
}
}
};
useEventListener(target, "dragenter", (event) => handleDragEvent(event, "enter"));
useEventListener(target, "dragover", (event) => handleDragEvent(event, "over"));
useEventListener(target, "dragleave", (event) => handleDragEvent(event, "leave"));
useEventListener(target, "drop", (event) => handleDragEvent(event, "drop"));
}
return {
files,
isOverDropZone
};
}
function useElementHover(el, options = {}) {
const { delayEnter = 0, delayLeave = 0, triggerOnRemoval = false, window: window$1 = defaultWindow } = options;
const isHovered = shallowRef(false);
let timer;
const toggle = (entering) => {
const delay = entering ? delayEnter : delayLeave;
if (timer) {
clearTimeout(timer);
timer = void 0;
}
if (delay) timer = setTimeout(() => isHovered.value = entering, delay);
else isHovered.value = entering;
};
if (!window$1) return isHovered;
useEventListener(el, "mouseenter", () => toggle(true), { passive: true });
useEventListener(el, "mouseleave", () => toggle(false), { passive: true });
if (triggerOnRemoval) onElementRemoval(computed(() => unrefElement(el)), () => toggle(false));
return isHovered;
}
/**
* Detects that a target element's visibility.
*
* @see https://vueuse.org/useIntersectionObserver
* @param target
* @param callback
* @param options
*/
function useIntersectionObserver(target, callback, options = {}) {
const { root, rootMargin, threshold = 0, window: window$1 = defaultWindow, immediate = true } = options;
const isSupported = /* @__PURE__ */ useSupported(() => window$1 && "IntersectionObserver" in window$1);
const targets = computed(() => {
return toArray(toValue(target)).map(unrefElement).filter(notNullish);
});
let cleanup = noop;
const isActive = shallowRef(immediate);
const stopWatch = isSupported.value ? watch(() => [
targets.value,
unrefElement(root),
toValue(rootMargin),
isActive.value
], ([targets$1, root$1, rootMargin$1]) => {
cleanup();
if (!isActive.value) return;
if (!targets$1.length) return;
const observer = new IntersectionObserver(callback, {
root: unrefElement(root$1),
rootMargin: rootMargin$1,
threshold
});
targets$1.forEach((el) => el && observer.observe(el));
cleanup = () => {
observer.disconnect();
cleanup = noop;
};
}, {
immediate,
flush: "post"
}) : noop;
const stop = () => {
cleanup();
stopWatch();
isActive.value = false;
};
tryOnScopeDispose(stop);
return {
isSupported,
isActive,
pause() {
cleanup();
isActive.value = false;
},
resume() {
isActive.value = true;
},
stop
};
}
var DEFAULT_OPTIONS = {
multiple: true,
accept: "*",
reset: false,
directory: false
};
function prepareInitialFiles(files) {
if (!files) return null;
if (files instanceof FileList) return files;
const dt = new DataTransfer();
for (const file of files) dt.items.add(file);
return dt.files;
}
/**
* Open file dialog with ease.
*
* @see https://vueuse.org/useFileDialog
* @param options
*/
function useFileDialog(options = {}) {
const { document: document$1 = defaultDocument } = options;
const files = ref(prepareInitialFiles(options.initialFiles));
const { on: onChange, trigger: changeTrigger } = createEventHook();
const { on: onCancel, trigger: cancelTrigger } = createEventHook();
const inputRef = computed(() => {
var _unrefElement;
const input = (_unrefElement = unrefElement(options.input)) !== null && _unrefElement !== void 0 ? _unrefElement : document$1 ? document$1.createElement("input") : void 0;
if (input) {
input.type = "file";
input.onchange = (event) => {
files.value = event.target.files;
changeTrigger(files.value);
};
input.oncancel = () => {
cancelTrigger();
};
}
return input;
});
const reset = () => {
files.value = null;
if (inputRef.value && inputRef.value.value) {
inputRef.value.value = "";
changeTrigger(null);
}
};
const applyOptions = (options$1) => {
const el = inputRef.value;
if (!el) return;
el.multiple = toValue(options$1.multiple);
el.accept = toValue(options$1.accept);
el.webkitdirectory = toValue(options$1.directory);
if (hasOwn(options$1, "capture")) el.capture = toValue(options$1.capture);
};
const open = (localOptions) => {
const el = inputRef.value;
if (!el) return;
const mergedOptions = {
...DEFAULT_OPTIONS,
...options,
...localOptions
};
applyOptions(mergedOptions);
if (toValue(mergedOptions.reset)) reset();
el.click();
};
watchEffect(() => {
applyOptions(options);
});
return {
files: readonly(files),
open,
reset,
onCancel,
onChange
};
}
/**
* Track or set the focus state of a DOM element.
*
* @see https://vueuse.org/useFocus
* @param target The target element for the focus and blur events.
* @param options
*/
function useFocus(target, options = {}) {
const { initialValue = false, focusVisible = false, preventScroll = false } = options;
const innerFocused = shallowRef(false);
const targetElement = computed(() => unrefElement(target));
const listenerOptions = { passive: true };
useEventListener(targetElement, "focus", (event) => {
var _matches, _ref;
if (!focusVisible || ((_matches = (_ref = event.target).matches) === null || _matches === void 0 ? void 0 : _matches.call(_ref, ":focus-visible"))) innerFocused.value = true;
}, listenerOptions);
useEventListener(targetElement, "blur", () => innerFocused.value = false, listenerOptions);
const focused = computed({
get: () => innerFocused.value,
set(value) {
var _targetElement$value, _targetElement$value2;
if (!value && innerFocused.value) (_targetElement$value = targetElement.value) === null || _targetElement$value === void 0 || _targetElement$value.blur();
else if (value && !innerFocused.value) (_targetElement$value2 = targetElement.value) === null || _targetElement$value2 === void 0 || _targetElement$value2.focus({ preventScroll });
}
});
watch(targetElement, () => {
focused.value = initialValue;
}, {
immediate: true,
flush: "post"
});
return { focused };
}
/**
* Resolves an element from a given element, window, or document.
*
* @internal
*/
function resolveElement(el) {
if (typeof Window !== "undefined" && el instanceof Window) return el.document.documentElement;
if (typeof Document !== "undefined" && el instanceof Document) return el.documentElement;
return el;
}
var UseMouseBuiltinExtractors = {
page: (event) => [event.pageX, event.pageY],
client: (event) => [event.clientX, event.clientY],
screen: (event) => [event.screenX, event.screenY],
movement: (event) => event instanceof MouseEvent ? [event.movementX, event.movementY] : null
};
/**
* Reactive mouse position.
*
* @see https://vueuse.org/useMouse
* @param options
*/
function useMouse(options = {}) {
const { type = "page", touch = true, resetOnTouchEnds = false, initialValue = {
x: 0,
y: 0
}, window: window$1 = defaultWindow, target = window$1, scroll = true, eventFilter } = options;
let _prevMouseEvent = null;
let _prevScrollX = 0;
let _prevScrollY = 0;
const x = shallowRef(initialValue.x);
const y = shallowRef(initialValue.y);
const sourceType = shallowRef(null);
const extractor = typeof type === "function" ? type : UseMouseBuiltinExtractors[type];
const mouseHandler = (event) => {
const result = extractor(event);
_prevMouseEvent = event;
if (result) {
[x.value, y.value] = result;
sourceType.value = "mouse";
}
if (window$1) {
_prevScrollX = window$1.scrollX;
_prevScrollY = window$1.scrollY;
}
};
const touchHandler = (event) => {
if (event.touches.length > 0) {
const result = extractor(event.touches[0]);
if (result) {
[x.value, y.value] = result;
sourceType.value = "touch";
}
}
};
const scrollHandler = () => {
if (!_prevMouseEvent || !window$1) return;
const pos = extractor(_prevMouseEvent);
if (_prevMouseEvent instanceof MouseEvent && pos) {
x.value = pos[0] + window$1.scrollX - _prevScrollX;
y.value = pos[1] + window$1.scrollY - _prevScrollY;
}
};
const reset = () => {
x.value = initialValue.x;
y.value = initialValue.y;
};
const mouseHandlerWrapper = eventFilter ? (event) => eventFilter(() => mouseHandler(event), {}) : (event) => mouseHandler(event);
const touchHandlerWrapper = eventFilter ? (event) => eventFilter(() => touchHandler(event), {}) : (event) => touchHandler(event);
const scrollHandlerWrapper = eventFilter ? () => eventFilter(() => scrollHandler(), {}) : () => scrollHandler();
if (target) {
const listenerOptions = { passive: true };
useEventListener(target, ["mousemove", "dragover"], mouseHandlerWrapper, listenerOptions);
if (touch && type !== "movement") {
useEventListener(target, ["touchstart", "touchmove"], touchHandlerWrapper, listenerOptions);
if (resetOnTouchEnds) useEventListener(target, "touchend", reset, listenerOptions);
}
if (scroll && type === "page") useEventListener(window$1, "scroll", scrollHandlerWrapper, listenerOptions);
}
return {
x,
y,
sourceType
};
}
function checkOverflowScroll(ele) {
const style = window.getComputedStyle(ele);
if (style.overflowX === "scroll" || style.overflowY === "scroll" || style.overflowX === "auto" && ele.clientWidth < ele.scrollWidth || style.overflowY === "auto" && ele.clientHeight < ele.scrollHeight) return true;
else {
const parent = ele.parentNode;
if (!parent || parent.tagName === "BODY") return false;
return checkOverflowScroll(parent);
}
}
function preventDefault(rawEvent) {
const e = rawEvent || window.event;
const _target = e.target;
if (checkOverflowScroll(_target)) return false;
if (e.touches.length > 1) return true;
if (e.preventDefault) e.preventDefault();
return false;
}
var elInitialOverflow = /* @__PURE__ */ new WeakMap();
/**
* Lock scrolling of the element.
*
* @see https://vueuse.org/useScrollLock
* @param element
*/
function useScrollLock(element, initialState = false) {
const isLocked = shallowRef(initialState);
let stopTouchMoveListener = null;
let initialOverflow = "";
watch(toRef$1(element), (el) => {
const target = resolveElement(toValue(el));
if (target) {
const ele = target;
if (!elInitialOverflow.get(ele)) elInitialOverflow.set(ele, ele.style.overflow);
if (ele.style.overflow !== "hidden") initialOverflow = ele.style.overflow;
if (ele.style.overflow === "hidden") return isLocked.value = true;
if (isLocked.value) return ele.style.overflow = "hidden";
}
}, { immediate: true });
const lock = () => {
const el = resolveElement(toValue(element));
if (!el || isLocked.value) return;
if (isIOS) stopTouchMoveListener = useEventListener(el, "touchmove", (e) => {
preventDefault(e);
}, { passive: false });
el.style.overflow = "hidden";
isLocked.value = true;
};
const unlock = () => {
const el = resolveElement(toValue(element));
if (!el || !isLocked.value) return;
if (isIOS) stopTouchMoveListener === null || stopTouchMoveListener === void 0 || stopTouchMoveListener();
el.style.overflow = initialOverflow;
elInitialOverflow.delete(el);
isLocked.value = false;
};
tryOnScopeDispose(unlock);
return computed({
get() {
return isLocked.value;
},
set(v) {
if (v) lock();
else unlock();
}
});
}
/**
* Reactive swipe detection.
*
* @see https://vueuse.org/useSwipe
* @param target
* @param options
*/
function useSwipe(target, options = {}) {
const { threshold = 50, onSwipe, onSwipeEnd, onSwipeStart, passive = true } = options;
const coordsStart = reactive({
x: 0,
y: 0
});
const coordsEnd = reactive({
x: 0,
y: 0
});
const diffX = computed(() => coordsStart.x - coordsEnd.x);
const diffY = computed(() => coordsStart.y - coordsEnd.y);
const { max, abs } = Math;
const isThresholdExceeded = computed(() => max(abs(diffX.value), abs(diffY.value)) >= threshold);
const isSwiping = shallowRef(false);
const direction = computed(() => {
if (!isThresholdExceeded.value) return "none";
if (abs(diffX.value) > abs(diffY.value)) return diffX.value > 0 ? "left" : "right";
else return diffY.value > 0 ? "up" : "down";
});
const getTouchEventCoords = (e) => [e.touches[0].clientX, e.touches[0].clientY];
const updateCoordsStart = (x, y) => {
coordsStart.x = x;
coordsStart.y = y;
};
const updateCoordsEnd = (x, y) => {
coordsEnd.x = x;
coordsEnd.y = y;
};
const listenerOptions = {
passive,
capture: !passive
};
const onTouchEnd = (e) => {
if (isSwiping.value) onSwipeEnd === null || onSwipeEnd === void 0 || onSwipeEnd(e, direction.value);
isSwiping.value = false;
};
const stops = [
useEventListener(target, "touchstart", (e) => {
if (e.touches.length !== 1) return;
const [x, y] = getTouchEventCoords(e);
updateCoordsStart(x, y);
updateCoordsEnd(x, y);
onSwipeStart === null || onSwipeStart === void 0 || onSwipeStart(e);
}, listenerOptions),
useEventListener(target, "touchmove", (e) => {
if (e.touches.length !== 1) return;
const [x, y] = getTouchEventCoords(e);
updateCoordsEnd(x, y);
if (listenerOptions.capture && !listenerOptions.passive && Math.abs(diffX.value) > Math.abs(diffY.value)) e.preventDefault();
if (!isSwiping.value && isThresholdExceeded.value) isSwiping.value = true;
if (isSwiping.value) onSwipe === null || onSwipe === void 0 || onSwipe(e);
}, listenerOptions),
useEventListener(target, ["touchend", "touchcancel"], onTouchEnd, listenerOptions)
];
const stop = () => stops.forEach((s) => s());
return {
isSwiping,
direction,
coordsStart,
coordsEnd,
lengthX: diffX,
lengthY: diffY,
stop
};
}
Number.POSITIVE_INFINITY;
function getDefaultScheduler$2(options) {
if ("interval" in options || "immediate" in options) {
const { interval = "requestAnimationFrame", immediate = true } = options;
return interval === "requestAnimationFrame" ? (cb) => useRafFn(cb, { immediate }) : (cb) => useIntervalFn(cb, interval, { immediate });
}
return useRafFn;
}
function useTimestamp(options = {}) {
const { controls: exposeControls = false, offset = 0, scheduler = getDefaultScheduler$2(options), callback } = options;
const ts = shallowRef(timestamp() + offset);
const update = () => ts.value = timestamp() + offset;
const controls = scheduler(callback ? () => {
update();
callback(ts.value);
} : update);
if (exposeControls) return {
timestamp: ts,
...controls
};
else return ts;
}
/**
* Shorthand for v-model binding, props + emit -> ref
*
* @see https://vueuse.org/useVModel
* @param props
* @param key (default 'modelValue')
* @param emit
* @param options
*
* @__NO_SIDE_EFFECTS__
*/
function useVModel(props, key, emit, options = {}) {
var _vm$$emit, _vm$proxy;
const { clone = false, passive = false, eventName, deep = false, defaultValue, shouldEmit } = options;
const vm = getCurrentInstance();
const _emit = emit || (vm === null || vm === void 0 ? void 0 : vm.emit) || (vm === null || vm === void 0 || (_vm$$emit = vm.$emit) === null || _vm$$emit === void 0 ? void 0 : _vm$$emit.bind(vm)) || (vm === null || vm === void 0 || (_vm$proxy = vm.proxy) === null || _vm$proxy === void 0 || (_vm$proxy = _vm$proxy.$emit) === null || _vm$proxy === void 0 ? void 0 : _vm$proxy.bind(vm === null || vm === void 0 ? void 0 : vm.proxy));
let event = eventName;
if (!key) key = "modelValue";
event = event || `update:${key.toString()}`;
const cloneFn = (val) => !clone ? val : typeof clone === "function" ? clone(val) : cloneFnJSON(val);
const getValue$1 = () => isDef(props[key]) ? cloneFn(props[key]) : defaultValue;
const triggerEmit = (value) => {
if (shouldEmit) {
if (shouldEmit(value)) _emit(event, value);
} else _emit(event, value);
};
if (passive) {
const proxy = ref(getValue$1());
let isUpdating = false;
watch(() => props[key], (v) => {
if (!isUpdating) {
isUpdating = true;
proxy.value = cloneFn(v);
nextTick(() => isUpdating = false);
}
});
watch(proxy, (v) => {
if (!isUpdating && (v !== props[key] || deep)) triggerEmit(v);
}, { deep });
return proxy;
} else return computed({
get() {
return getValue$1();
},
set(value) {
triggerEmit(value);
}
});
}
//#endregion
export { useVModel as S, useMouse as _, onKeyStroke as a, useSwipe as b, useColorMode as c, useElementHover as d, useEventListener as f, useMounted as g, useIntersectionObserver as h, onClickOutside as i, useDocumentVisibility as l, useFocus as m, defaultWindow as n, unrefElement as o, useFileDialog as p, getSSRHandler as r, useBreakpoints as s, breakpointsBootstrapV5 as t, useDropZone as u, useMutationObserver as v, useTimestamp as x, useScrollLock as y };
//# sourceMappingURL=dist-9-XTMhb-.js.map