565 lines
17 KiB
JavaScript
565 lines
17 KiB
JavaScript
import { computed, isRef, reactive, unref, toRefs, getCurrentScope, onScopeDispose, getCurrentInstance, onMounted, nextTick, ref, watch, customRef, onUpdated } from "vue";
|
|
var _a;
|
|
const isClient = typeof window !== "undefined";
|
|
const toString = Object.prototype.toString;
|
|
const isFunction = (val) => typeof val === "function";
|
|
const isNumber = (val) => typeof val === "number";
|
|
const isString = (val) => typeof val === "string";
|
|
const isObject = (val) => toString.call(val) === "[object Object]";
|
|
const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
|
|
const noop = () => {
|
|
};
|
|
isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
|
|
function resolveUnref(r) {
|
|
return typeof r === "function" ? r() : unref(r);
|
|
}
|
|
function createFilterWrapper(filter, fn) {
|
|
function wrapper(...args) {
|
|
filter(() => fn.apply(this, args), { fn, thisArg: this, args });
|
|
}
|
|
return wrapper;
|
|
}
|
|
function throttleFilter(ms, trailing = true, leading = true) {
|
|
let lastExec = 0;
|
|
let timer;
|
|
let isLeading = true;
|
|
const clear = () => {
|
|
if (timer) {
|
|
clearTimeout(timer);
|
|
timer = void 0;
|
|
}
|
|
};
|
|
const filter = (invoke) => {
|
|
const duration = resolveUnref(ms);
|
|
const elapsed = Date.now() - lastExec;
|
|
clear();
|
|
if (duration <= 0) {
|
|
lastExec = Date.now();
|
|
return invoke();
|
|
}
|
|
if (elapsed > duration && (leading || !isLeading)) {
|
|
lastExec = Date.now();
|
|
invoke();
|
|
} else if (trailing) {
|
|
timer = setTimeout(() => {
|
|
lastExec = Date.now();
|
|
isLeading = true;
|
|
clear();
|
|
invoke();
|
|
}, duration);
|
|
}
|
|
if (!leading && !timer)
|
|
timer = setTimeout(() => isLeading = true, duration);
|
|
isLeading = false;
|
|
};
|
|
return filter;
|
|
}
|
|
function identity(arg) {
|
|
return arg;
|
|
}
|
|
function tryOnScopeDispose(fn) {
|
|
if (getCurrentScope()) {
|
|
onScopeDispose(fn);
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
function toReactive(objectRef) {
|
|
if (!isRef(objectRef))
|
|
return reactive(objectRef);
|
|
const proxy = new Proxy({}, {
|
|
get(_, p, receiver) {
|
|
return unref(Reflect.get(objectRef.value, p, receiver));
|
|
},
|
|
set(_, p, value) {
|
|
if (isRef(objectRef.value[p]) && !isRef(value))
|
|
objectRef.value[p].value = value;
|
|
else
|
|
objectRef.value[p] = value;
|
|
return true;
|
|
},
|
|
deleteProperty(_, p) {
|
|
return Reflect.deleteProperty(objectRef.value, p);
|
|
},
|
|
has(_, p) {
|
|
return Reflect.has(objectRef.value, p);
|
|
},
|
|
ownKeys() {
|
|
return Object.keys(objectRef.value);
|
|
},
|
|
getOwnPropertyDescriptor() {
|
|
return {
|
|
enumerable: true,
|
|
configurable: true
|
|
};
|
|
}
|
|
});
|
|
return reactive(proxy);
|
|
}
|
|
function reactiveComputed(fn) {
|
|
return toReactive(computed(fn));
|
|
}
|
|
function reactiveOmit(obj, ...keys) {
|
|
const flatKeys = keys.flat();
|
|
return reactiveComputed(() => Object.fromEntries(Object.entries(toRefs(obj)).filter((e) => !flatKeys.includes(e[0]))));
|
|
}
|
|
function useThrottleFn(fn, ms = 200, trailing = false, leading = true) {
|
|
return createFilterWrapper(throttleFilter(ms, trailing, leading), fn);
|
|
}
|
|
function tryOnMounted(fn, sync = true) {
|
|
if (getCurrentInstance())
|
|
onMounted(fn);
|
|
else if (sync)
|
|
fn();
|
|
else
|
|
nextTick(fn);
|
|
}
|
|
function useTimeoutFn(cb, interval, options = {}) {
|
|
const {
|
|
immediate = true
|
|
} = options;
|
|
const isPending = ref(false);
|
|
let timer = null;
|
|
function clear() {
|
|
if (timer) {
|
|
clearTimeout(timer);
|
|
timer = null;
|
|
}
|
|
}
|
|
function stop() {
|
|
isPending.value = false;
|
|
clear();
|
|
}
|
|
function start(...args) {
|
|
clear();
|
|
isPending.value = true;
|
|
timer = setTimeout(() => {
|
|
isPending.value = false;
|
|
timer = null;
|
|
cb(...args);
|
|
}, resolveUnref(interval));
|
|
}
|
|
if (immediate) {
|
|
isPending.value = true;
|
|
if (isClient)
|
|
start();
|
|
}
|
|
tryOnScopeDispose(stop);
|
|
return {
|
|
isPending,
|
|
start,
|
|
stop
|
|
};
|
|
}
|
|
function unrefElement(elRef) {
|
|
var _a2;
|
|
const plain = resolveUnref(elRef);
|
|
return (_a2 = plain == null ? void 0 : plain.$el) != null ? _a2 : plain;
|
|
}
|
|
const defaultWindow = isClient ? window : void 0;
|
|
function useEventListener(...args) {
|
|
let target;
|
|
let event;
|
|
let listener;
|
|
let options;
|
|
if (isString(args[0])) {
|
|
[event, listener, options] = args;
|
|
target = defaultWindow;
|
|
} else {
|
|
[target, event, listener, options] = args;
|
|
}
|
|
if (!target)
|
|
return noop;
|
|
let cleanup = noop;
|
|
const stopWatch = watch(() => unrefElement(target), (el) => {
|
|
cleanup();
|
|
if (!el)
|
|
return;
|
|
el.addEventListener(event, listener, options);
|
|
cleanup = () => {
|
|
el.removeEventListener(event, listener, options);
|
|
cleanup = noop;
|
|
};
|
|
}, { immediate: true, flush: "post" });
|
|
const stop = () => {
|
|
stopWatch();
|
|
cleanup();
|
|
};
|
|
tryOnScopeDispose(stop);
|
|
return stop;
|
|
}
|
|
function onClickOutside(target, handler, options = {}) {
|
|
const { window: window2 = defaultWindow, ignore, capture = true, detectIframe = false } = options;
|
|
if (!window2)
|
|
return;
|
|
const shouldListen = ref(true);
|
|
let fallback;
|
|
const listener = (event) => {
|
|
window2.clearTimeout(fallback);
|
|
const el = unrefElement(target);
|
|
const composedPath = event.composedPath();
|
|
if (!el || el === event.target || composedPath.includes(el) || !shouldListen.value)
|
|
return;
|
|
if (ignore && ignore.length > 0) {
|
|
if (ignore.some((target2) => {
|
|
const el2 = unrefElement(target2);
|
|
return el2 && (event.target === el2 || composedPath.includes(el2));
|
|
}))
|
|
return;
|
|
}
|
|
handler(event);
|
|
};
|
|
const cleanup = [
|
|
useEventListener(window2, "click", listener, { passive: true, capture }),
|
|
useEventListener(window2, "pointerdown", (e) => {
|
|
const el = unrefElement(target);
|
|
shouldListen.value = !!el && !e.composedPath().includes(el);
|
|
}, { passive: true }),
|
|
useEventListener(window2, "pointerup", (e) => {
|
|
if (e.button === 0) {
|
|
const path = e.composedPath();
|
|
e.composedPath = () => path;
|
|
fallback = window2.setTimeout(() => listener(e), 50);
|
|
}
|
|
}, { passive: true }),
|
|
detectIframe && useEventListener(window2, "blur", (event) => {
|
|
var _a2;
|
|
const el = unrefElement(target);
|
|
if (((_a2 = document.activeElement) == null ? void 0 : _a2.tagName) === "IFRAME" && !(el == null ? void 0 : el.contains(document.activeElement)))
|
|
handler(event);
|
|
})
|
|
].filter(Boolean);
|
|
const stop = () => cleanup.forEach((fn) => fn());
|
|
return stop;
|
|
}
|
|
function templateRef(key, initialValue = null) {
|
|
const instance = getCurrentInstance();
|
|
let _trigger = () => {
|
|
};
|
|
const element = customRef((track, trigger) => {
|
|
_trigger = trigger;
|
|
return {
|
|
get() {
|
|
var _a2, _b;
|
|
track();
|
|
return (_b = (_a2 = instance == null ? void 0 : instance.proxy) == null ? void 0 : _a2.$refs[key]) != null ? _b : initialValue;
|
|
},
|
|
set() {
|
|
}
|
|
};
|
|
});
|
|
tryOnMounted(_trigger);
|
|
onUpdated(_trigger);
|
|
return element;
|
|
}
|
|
function useSupported(callback, sync = false) {
|
|
const isSupported = ref();
|
|
const update = () => isSupported.value = Boolean(callback());
|
|
update();
|
|
tryOnMounted(update, sync);
|
|
return isSupported;
|
|
}
|
|
const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
|
|
const globalKey = "__vueuse_ssr_handlers__";
|
|
_global[globalKey] = _global[globalKey] || {};
|
|
_global[globalKey];
|
|
var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp$f = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
|
|
var __objRest$2 = (source, exclude) => {
|
|
var target = {};
|
|
for (var prop in source)
|
|
if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
target[prop] = source[prop];
|
|
if (source != null && __getOwnPropSymbols$f)
|
|
for (var prop of __getOwnPropSymbols$f(source)) {
|
|
if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
|
|
target[prop] = source[prop];
|
|
}
|
|
return target;
|
|
};
|
|
function useResizeObserver(target, callback, options = {}) {
|
|
const _a2 = options, { window: window2 = defaultWindow } = _a2, observerOptions = __objRest$2(_a2, ["window"]);
|
|
let observer;
|
|
const isSupported = useSupported(() => window2 && "ResizeObserver" in window2);
|
|
const cleanup = () => {
|
|
if (observer) {
|
|
observer.disconnect();
|
|
observer = void 0;
|
|
}
|
|
};
|
|
const stopWatch = watch(() => unrefElement(target), (el) => {
|
|
cleanup();
|
|
if (isSupported.value && window2 && el) {
|
|
observer = new ResizeObserver(callback);
|
|
observer.observe(el, observerOptions);
|
|
}
|
|
}, { immediate: true, flush: "post" });
|
|
const stop = () => {
|
|
cleanup();
|
|
stopWatch();
|
|
};
|
|
tryOnScopeDispose(stop);
|
|
return {
|
|
isSupported,
|
|
stop
|
|
};
|
|
}
|
|
function useRafFn(fn, options = {}) {
|
|
const {
|
|
immediate = true,
|
|
window: window2 = defaultWindow
|
|
} = options;
|
|
const isActive = ref(false);
|
|
let rafId = null;
|
|
function loop() {
|
|
if (!isActive.value || !window2)
|
|
return;
|
|
fn();
|
|
rafId = window2.requestAnimationFrame(loop);
|
|
}
|
|
function resume() {
|
|
if (!isActive.value && window2) {
|
|
isActive.value = true;
|
|
loop();
|
|
}
|
|
}
|
|
function pause() {
|
|
isActive.value = false;
|
|
if (rafId != null && window2) {
|
|
window2.cancelAnimationFrame(rafId);
|
|
rafId = null;
|
|
}
|
|
}
|
|
if (immediate)
|
|
resume();
|
|
tryOnScopeDispose(pause);
|
|
return {
|
|
isActive,
|
|
pause,
|
|
resume
|
|
};
|
|
}
|
|
function useEyeDropper(options = {}) {
|
|
const { initialValue = "" } = options;
|
|
const isSupported = useSupported(() => typeof window !== "undefined" && "EyeDropper" in window);
|
|
const sRGBHex = ref(initialValue);
|
|
async function open(openOptions) {
|
|
if (!isSupported.value)
|
|
return;
|
|
const eyeDropper = new window.EyeDropper();
|
|
const result = await eyeDropper.open(openOptions);
|
|
sRGBHex.value = result.sRGBHex;
|
|
return result;
|
|
}
|
|
return { isSupported, sRGBHex, open };
|
|
}
|
|
function useMousePressed(options = {}) {
|
|
const {
|
|
touch = true,
|
|
drag = true,
|
|
initialValue = false,
|
|
window: window2 = defaultWindow
|
|
} = options;
|
|
const pressed = ref(initialValue);
|
|
const sourceType = ref(null);
|
|
if (!window2) {
|
|
return {
|
|
pressed,
|
|
sourceType
|
|
};
|
|
}
|
|
const onPressed = (srcType) => () => {
|
|
pressed.value = true;
|
|
sourceType.value = srcType;
|
|
};
|
|
const onReleased = () => {
|
|
pressed.value = false;
|
|
sourceType.value = null;
|
|
};
|
|
const target = computed(() => unrefElement(options.target) || window2);
|
|
useEventListener(target, "mousedown", onPressed("mouse"), { passive: true });
|
|
useEventListener(window2, "mouseleave", onReleased, { passive: true });
|
|
useEventListener(window2, "mouseup", onReleased, { passive: true });
|
|
if (drag) {
|
|
useEventListener(target, "dragstart", onPressed("mouse"), { passive: true });
|
|
useEventListener(window2, "drop", onReleased, { passive: true });
|
|
useEventListener(window2, "dragend", onReleased, { passive: true });
|
|
}
|
|
if (touch) {
|
|
useEventListener(target, "touchstart", onPressed("touch"), { passive: true });
|
|
useEventListener(window2, "touchend", onReleased, { passive: true });
|
|
useEventListener(window2, "touchcancel", onReleased, { passive: true });
|
|
}
|
|
return {
|
|
pressed,
|
|
sourceType
|
|
};
|
|
}
|
|
var SwipeDirection;
|
|
(function(SwipeDirection2) {
|
|
SwipeDirection2["UP"] = "UP";
|
|
SwipeDirection2["RIGHT"] = "RIGHT";
|
|
SwipeDirection2["DOWN"] = "DOWN";
|
|
SwipeDirection2["LEFT"] = "LEFT";
|
|
SwipeDirection2["NONE"] = "NONE";
|
|
})(SwipeDirection || (SwipeDirection = {}));
|
|
var __defProp = Object.defineProperty;
|
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
var __spreadValues = (a, b) => {
|
|
for (var prop in b || (b = {}))
|
|
if (__hasOwnProp.call(b, prop))
|
|
__defNormalProp(a, prop, b[prop]);
|
|
if (__getOwnPropSymbols)
|
|
for (var prop of __getOwnPropSymbols(b)) {
|
|
if (__propIsEnum.call(b, prop))
|
|
__defNormalProp(a, prop, b[prop]);
|
|
}
|
|
return a;
|
|
};
|
|
const _TransitionPresets = {
|
|
easeInSine: [0.12, 0, 0.39, 0],
|
|
easeOutSine: [0.61, 1, 0.88, 1],
|
|
easeInOutSine: [0.37, 0, 0.63, 1],
|
|
easeInQuad: [0.11, 0, 0.5, 0],
|
|
easeOutQuad: [0.5, 1, 0.89, 1],
|
|
easeInOutQuad: [0.45, 0, 0.55, 1],
|
|
easeInCubic: [0.32, 0, 0.67, 0],
|
|
easeOutCubic: [0.33, 1, 0.68, 1],
|
|
easeInOutCubic: [0.65, 0, 0.35, 1],
|
|
easeInQuart: [0.5, 0, 0.75, 0],
|
|
easeOutQuart: [0.25, 1, 0.5, 1],
|
|
easeInOutQuart: [0.76, 0, 0.24, 1],
|
|
easeInQuint: [0.64, 0, 0.78, 0],
|
|
easeOutQuint: [0.22, 1, 0.36, 1],
|
|
easeInOutQuint: [0.83, 0, 0.17, 1],
|
|
easeInExpo: [0.7, 0, 0.84, 0],
|
|
easeOutExpo: [0.16, 1, 0.3, 1],
|
|
easeInOutExpo: [0.87, 0, 0.13, 1],
|
|
easeInCirc: [0.55, 0, 1, 0.45],
|
|
easeOutCirc: [0, 0.55, 0.45, 1],
|
|
easeInOutCirc: [0.85, 0, 0.15, 1],
|
|
easeInBack: [0.36, 0, 0.66, -0.56],
|
|
easeOutBack: [0.34, 1.56, 0.64, 1],
|
|
easeInOutBack: [0.68, -0.6, 0.32, 1.6]
|
|
};
|
|
const TransitionPresets = __spreadValues({
|
|
linear: identity
|
|
}, _TransitionPresets);
|
|
function createEasingFunction([p0, p1, p2, p3]) {
|
|
const a = (a1, a2) => 1 - 3 * a2 + 3 * a1;
|
|
const b = (a1, a2) => 3 * a2 - 6 * a1;
|
|
const c = (a1) => 3 * a1;
|
|
const calcBezier = (t, a1, a2) => ((a(a1, a2) * t + b(a1, a2)) * t + c(a1)) * t;
|
|
const getSlope = (t, a1, a2) => 3 * a(a1, a2) * t * t + 2 * b(a1, a2) * t + c(a1);
|
|
const getTforX = (x) => {
|
|
let aGuessT = x;
|
|
for (let i = 0; i < 4; ++i) {
|
|
const currentSlope = getSlope(aGuessT, p0, p2);
|
|
if (currentSlope === 0)
|
|
return aGuessT;
|
|
const currentX = calcBezier(aGuessT, p0, p2) - x;
|
|
aGuessT -= currentX / currentSlope;
|
|
}
|
|
return aGuessT;
|
|
};
|
|
return (x) => p0 === p1 && p2 === p3 ? x : calcBezier(getTforX(x), p1, p3);
|
|
}
|
|
function useTransition(source, options = {}) {
|
|
const {
|
|
delay = 0,
|
|
disabled = false,
|
|
duration = 1e3,
|
|
onFinished = noop,
|
|
onStarted = noop,
|
|
transition = identity
|
|
} = options;
|
|
const currentTransition = computed(() => {
|
|
const t = unref(transition);
|
|
return isFunction(t) ? t : createEasingFunction(t);
|
|
});
|
|
const sourceValue = computed(() => {
|
|
const s = unref(source);
|
|
return isNumber(s) ? s : s.map(unref);
|
|
});
|
|
const sourceVector = computed(() => isNumber(sourceValue.value) ? [sourceValue.value] : sourceValue.value);
|
|
const outputVector = ref(sourceVector.value.slice(0));
|
|
let currentDuration;
|
|
let diffVector;
|
|
let endAt;
|
|
let startAt;
|
|
let startVector;
|
|
const { resume, pause } = useRafFn(() => {
|
|
const now = Date.now();
|
|
const progress = clamp(1 - (endAt - now) / currentDuration, 0, 1);
|
|
outputVector.value = startVector.map((val, i) => {
|
|
var _a2;
|
|
return val + ((_a2 = diffVector[i]) != null ? _a2 : 0) * currentTransition.value(progress);
|
|
});
|
|
if (progress >= 1) {
|
|
pause();
|
|
onFinished();
|
|
}
|
|
}, { immediate: false });
|
|
const start = () => {
|
|
pause();
|
|
currentDuration = unref(duration);
|
|
diffVector = outputVector.value.map((n, i) => {
|
|
var _a2, _b;
|
|
return ((_a2 = sourceVector.value[i]) != null ? _a2 : 0) - ((_b = outputVector.value[i]) != null ? _b : 0);
|
|
});
|
|
startVector = outputVector.value.slice(0);
|
|
startAt = Date.now();
|
|
endAt = startAt + currentDuration;
|
|
resume();
|
|
onStarted();
|
|
};
|
|
const timeout = useTimeoutFn(start, delay, { immediate: false });
|
|
watch(sourceVector, () => {
|
|
if (unref(disabled)) {
|
|
outputVector.value = sourceVector.value.slice(0);
|
|
} else {
|
|
if (unref(delay) <= 0)
|
|
start();
|
|
else
|
|
timeout.start();
|
|
}
|
|
}, { deep: true });
|
|
return computed(() => {
|
|
const targetVector = unref(disabled) ? sourceVector : outputVector;
|
|
return isNumber(sourceValue.value) ? targetVector.value[0] : targetVector.value;
|
|
});
|
|
}
|
|
function useWindowSize(options = {}) {
|
|
const {
|
|
window: window2 = defaultWindow,
|
|
initialWidth = Infinity,
|
|
initialHeight = Infinity,
|
|
listenOrientation = true,
|
|
includeScrollbar = true
|
|
} = options;
|
|
const width = ref(initialWidth);
|
|
const height = ref(initialHeight);
|
|
const update = () => {
|
|
if (window2) {
|
|
if (includeScrollbar) {
|
|
width.value = window2.innerWidth;
|
|
height.value = window2.innerHeight;
|
|
} else {
|
|
width.value = window2.document.documentElement.clientWidth;
|
|
height.value = window2.document.documentElement.clientHeight;
|
|
}
|
|
}
|
|
};
|
|
update();
|
|
tryOnMounted(update);
|
|
useEventListener("resize", update, { passive: true });
|
|
if (listenOrientation)
|
|
useEventListener("orientationchange", update, { passive: true });
|
|
return { width, height };
|
|
}
|
|
export { TransitionPresets as T, useResizeObserver as a, useThrottleFn as b, useEventListener as c, useEyeDropper as d, useTransition as e, useMousePressed as f, isObject as i, onClickOutside as o, reactiveOmit as r, templateRef as t, useWindowSize as u };
|