513 lines
12 KiB
JavaScript
513 lines
12 KiB
JavaScript
// src/utils.ts
|
|
var inBrowser = typeof window !== "undefined";
|
|
var supportsPassive = true;
|
|
function raf(fn) {
|
|
return inBrowser ? requestAnimationFrame(fn) : -1;
|
|
}
|
|
function cancelRaf(id) {
|
|
if (inBrowser) {
|
|
cancelAnimationFrame(id);
|
|
}
|
|
}
|
|
function doubleRaf(fn) {
|
|
raf(() => raf(fn));
|
|
}
|
|
|
|
// src/useRect/index.ts
|
|
import { unref } from "vue";
|
|
var isWindow = (val) => val === window;
|
|
var makeDOMRect = (width2, height2) => ({
|
|
top: 0,
|
|
left: 0,
|
|
right: width2,
|
|
bottom: height2,
|
|
width: width2,
|
|
height: height2
|
|
});
|
|
var useRect = (elementOrRef) => {
|
|
const element = unref(elementOrRef);
|
|
if (isWindow(element)) {
|
|
const width2 = element.innerWidth;
|
|
const height2 = element.innerHeight;
|
|
return makeDOMRect(width2, height2);
|
|
}
|
|
if (element == null ? void 0 : element.getBoundingClientRect) {
|
|
return element.getBoundingClientRect();
|
|
}
|
|
return makeDOMRect(0, 0);
|
|
};
|
|
|
|
// src/useToggle/index.ts
|
|
import { ref } from "vue";
|
|
function useToggle(defaultValue = false) {
|
|
const state = ref(defaultValue);
|
|
const toggle = (value = !state.value) => {
|
|
state.value = value;
|
|
};
|
|
return [state, toggle];
|
|
}
|
|
|
|
// src/useRelation/useParent.ts
|
|
import {
|
|
ref as ref2,
|
|
inject,
|
|
computed,
|
|
onUnmounted,
|
|
getCurrentInstance
|
|
} from "vue";
|
|
function useParent(key) {
|
|
const parent = inject(key, null);
|
|
if (parent) {
|
|
const instance = getCurrentInstance();
|
|
const { link, unlink, internalChildren } = parent;
|
|
link(instance);
|
|
onUnmounted(() => unlink(instance));
|
|
const index = computed(() => internalChildren.indexOf(instance));
|
|
return {
|
|
parent,
|
|
index
|
|
};
|
|
}
|
|
return {
|
|
parent: null,
|
|
index: ref2(-1)
|
|
};
|
|
}
|
|
|
|
// src/useRelation/useChildren.ts
|
|
import {
|
|
isVNode,
|
|
provide,
|
|
reactive,
|
|
getCurrentInstance as getCurrentInstance2
|
|
} from "vue";
|
|
function flattenVNodes(children) {
|
|
const result = [];
|
|
const traverse = (children2) => {
|
|
if (Array.isArray(children2)) {
|
|
children2.forEach((child) => {
|
|
var _a;
|
|
if (isVNode(child)) {
|
|
result.push(child);
|
|
if ((_a = child.component) == null ? void 0 : _a.subTree) {
|
|
result.push(child.component.subTree);
|
|
traverse(child.component.subTree.children);
|
|
}
|
|
if (child.children) {
|
|
traverse(child.children);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
};
|
|
traverse(children);
|
|
return result;
|
|
}
|
|
var findVNodeIndex = (vnodes, vnode) => {
|
|
const index = vnodes.indexOf(vnode);
|
|
if (index === -1) {
|
|
return vnodes.findIndex(
|
|
(item) => vnode.key !== void 0 && vnode.key !== null && item.type === vnode.type && item.key === vnode.key
|
|
);
|
|
}
|
|
return index;
|
|
};
|
|
function sortChildren(parent, publicChildren, internalChildren) {
|
|
const vnodes = flattenVNodes(parent.subTree.children);
|
|
internalChildren.sort(
|
|
(a, b) => findVNodeIndex(vnodes, a.vnode) - findVNodeIndex(vnodes, b.vnode)
|
|
);
|
|
const orderedPublicChildren = internalChildren.map((item) => item.proxy);
|
|
publicChildren.sort((a, b) => {
|
|
const indexA = orderedPublicChildren.indexOf(a);
|
|
const indexB = orderedPublicChildren.indexOf(b);
|
|
return indexA - indexB;
|
|
});
|
|
}
|
|
function useChildren(key) {
|
|
const publicChildren = reactive([]);
|
|
const internalChildren = reactive([]);
|
|
const parent = getCurrentInstance2();
|
|
const linkChildren = (value) => {
|
|
const link = (child) => {
|
|
if (child.proxy) {
|
|
internalChildren.push(child);
|
|
publicChildren.push(child.proxy);
|
|
sortChildren(parent, publicChildren, internalChildren);
|
|
}
|
|
};
|
|
const unlink = (child) => {
|
|
const index = internalChildren.indexOf(child);
|
|
publicChildren.splice(index, 1);
|
|
internalChildren.splice(index, 1);
|
|
};
|
|
provide(
|
|
key,
|
|
Object.assign(
|
|
{
|
|
link,
|
|
unlink,
|
|
children: publicChildren,
|
|
internalChildren
|
|
},
|
|
value
|
|
)
|
|
);
|
|
};
|
|
return {
|
|
children: publicChildren,
|
|
linkChildren
|
|
};
|
|
}
|
|
|
|
// src/useCountDown/index.ts
|
|
import {
|
|
ref as ref3,
|
|
computed as computed2,
|
|
onActivated,
|
|
onDeactivated,
|
|
onBeforeUnmount
|
|
} from "vue";
|
|
var SECOND = 1e3;
|
|
var MINUTE = 60 * SECOND;
|
|
var HOUR = 60 * MINUTE;
|
|
var DAY = 24 * HOUR;
|
|
function parseTime(time) {
|
|
const days = Math.floor(time / DAY);
|
|
const hours = Math.floor(time % DAY / HOUR);
|
|
const minutes = Math.floor(time % HOUR / MINUTE);
|
|
const seconds = Math.floor(time % MINUTE / SECOND);
|
|
const milliseconds = Math.floor(time % SECOND);
|
|
return {
|
|
total: time,
|
|
days,
|
|
hours,
|
|
minutes,
|
|
seconds,
|
|
milliseconds
|
|
};
|
|
}
|
|
function isSameSecond(time1, time2) {
|
|
return Math.floor(time1 / 1e3) === Math.floor(time2 / 1e3);
|
|
}
|
|
function useCountDown(options) {
|
|
let rafId;
|
|
let endTime;
|
|
let counting;
|
|
let deactivated;
|
|
const remain = ref3(options.time);
|
|
const current = computed2(() => parseTime(remain.value));
|
|
const pause = () => {
|
|
counting = false;
|
|
cancelRaf(rafId);
|
|
};
|
|
const getCurrentRemain = () => Math.max(endTime - Date.now(), 0);
|
|
const setRemain = (value) => {
|
|
var _a, _b;
|
|
remain.value = value;
|
|
(_a = options.onChange) == null ? void 0 : _a.call(options, current.value);
|
|
if (value === 0) {
|
|
pause();
|
|
(_b = options.onFinish) == null ? void 0 : _b.call(options);
|
|
}
|
|
};
|
|
const microTick = () => {
|
|
rafId = raf(() => {
|
|
if (counting) {
|
|
setRemain(getCurrentRemain());
|
|
if (remain.value > 0) {
|
|
microTick();
|
|
}
|
|
}
|
|
});
|
|
};
|
|
const macroTick = () => {
|
|
rafId = raf(() => {
|
|
if (counting) {
|
|
const remainRemain = getCurrentRemain();
|
|
if (!isSameSecond(remainRemain, remain.value) || remainRemain === 0) {
|
|
setRemain(remainRemain);
|
|
}
|
|
if (remain.value > 0) {
|
|
macroTick();
|
|
}
|
|
}
|
|
});
|
|
};
|
|
const tick = () => {
|
|
if (!inBrowser) {
|
|
return;
|
|
}
|
|
if (options.millisecond) {
|
|
microTick();
|
|
} else {
|
|
macroTick();
|
|
}
|
|
};
|
|
const start = () => {
|
|
if (!counting) {
|
|
endTime = Date.now() + remain.value;
|
|
counting = true;
|
|
tick();
|
|
}
|
|
};
|
|
const reset = (totalTime = options.time) => {
|
|
pause();
|
|
remain.value = totalTime;
|
|
};
|
|
onBeforeUnmount(pause);
|
|
onActivated(() => {
|
|
if (deactivated) {
|
|
counting = true;
|
|
deactivated = false;
|
|
tick();
|
|
}
|
|
});
|
|
onDeactivated(() => {
|
|
if (counting) {
|
|
pause();
|
|
deactivated = true;
|
|
}
|
|
});
|
|
return {
|
|
start,
|
|
pause,
|
|
reset,
|
|
current
|
|
};
|
|
}
|
|
|
|
// src/useClickAway/index.ts
|
|
import { unref as unref3 } from "vue";
|
|
|
|
// src/useEventListener/index.ts
|
|
import {
|
|
watch,
|
|
isRef,
|
|
unref as unref2,
|
|
onUnmounted as onUnmounted2,
|
|
onDeactivated as onDeactivated2
|
|
} from "vue";
|
|
|
|
// src/onMountedOrActivated/index.ts
|
|
import { nextTick, onMounted, onActivated as onActivated2 } from "vue";
|
|
function onMountedOrActivated(hook) {
|
|
let mounted;
|
|
onMounted(() => {
|
|
hook();
|
|
nextTick(() => {
|
|
mounted = true;
|
|
});
|
|
});
|
|
onActivated2(() => {
|
|
if (mounted) {
|
|
hook();
|
|
}
|
|
});
|
|
}
|
|
|
|
// src/useEventListener/index.ts
|
|
function useEventListener(type, listener, options = {}) {
|
|
if (!inBrowser) {
|
|
return;
|
|
}
|
|
const { target = window, passive = false, capture = false } = options;
|
|
let cleaned = false;
|
|
let attached;
|
|
const add = (target2) => {
|
|
if (cleaned) {
|
|
return;
|
|
}
|
|
const element = unref2(target2);
|
|
if (element && !attached) {
|
|
element.addEventListener(type, listener, {
|
|
capture,
|
|
passive
|
|
});
|
|
attached = true;
|
|
}
|
|
};
|
|
const remove = (target2) => {
|
|
if (cleaned) {
|
|
return;
|
|
}
|
|
const element = unref2(target2);
|
|
if (element && attached) {
|
|
element.removeEventListener(type, listener, capture);
|
|
attached = false;
|
|
}
|
|
};
|
|
onUnmounted2(() => remove(target));
|
|
onDeactivated2(() => remove(target));
|
|
onMountedOrActivated(() => add(target));
|
|
let stopWatch;
|
|
if (isRef(target)) {
|
|
stopWatch = watch(target, (val, oldVal) => {
|
|
remove(oldVal);
|
|
add(val);
|
|
});
|
|
}
|
|
return () => {
|
|
stopWatch == null ? void 0 : stopWatch();
|
|
remove(target);
|
|
cleaned = true;
|
|
};
|
|
}
|
|
|
|
// src/useClickAway/index.ts
|
|
function useClickAway(target, listener, options = {}) {
|
|
if (!inBrowser) {
|
|
return;
|
|
}
|
|
const { eventName = "click" } = options;
|
|
const onClick = (event) => {
|
|
const targets = Array.isArray(target) ? target : [target];
|
|
const isClickAway = targets.every((item) => {
|
|
const element = unref3(item);
|
|
return element && !element.contains(event.target);
|
|
});
|
|
if (isClickAway) {
|
|
listener(event);
|
|
}
|
|
};
|
|
useEventListener(eventName, onClick, { target: document });
|
|
}
|
|
|
|
// src/useWindowSize/index.ts
|
|
import { ref as ref4 } from "vue";
|
|
var width;
|
|
var height;
|
|
function useWindowSize() {
|
|
if (!width) {
|
|
width = ref4(0);
|
|
height = ref4(0);
|
|
if (inBrowser) {
|
|
const update = () => {
|
|
width.value = window.innerWidth;
|
|
height.value = window.innerHeight;
|
|
};
|
|
update();
|
|
window.addEventListener("resize", update, { passive: true });
|
|
window.addEventListener("orientationchange", update, { passive: true });
|
|
}
|
|
}
|
|
return { width, height };
|
|
}
|
|
|
|
// src/useScrollParent/index.ts
|
|
import { ref as ref5, onMounted as onMounted2 } from "vue";
|
|
var overflowScrollReg = /scroll|auto|overlay/i;
|
|
var defaultRoot = inBrowser ? window : void 0;
|
|
function isElement(node) {
|
|
const ELEMENT_NODE_TYPE = 1;
|
|
return node.tagName !== "HTML" && node.tagName !== "BODY" && node.nodeType === ELEMENT_NODE_TYPE;
|
|
}
|
|
function getScrollParent(el, root = defaultRoot) {
|
|
let node = el;
|
|
while (node && node !== root && isElement(node)) {
|
|
const { overflowY } = window.getComputedStyle(node);
|
|
if (overflowScrollReg.test(overflowY)) {
|
|
return node;
|
|
}
|
|
node = node.parentNode;
|
|
}
|
|
return root;
|
|
}
|
|
function useScrollParent(el, root = defaultRoot) {
|
|
const scrollParent = ref5();
|
|
onMounted2(() => {
|
|
if (el.value) {
|
|
scrollParent.value = getScrollParent(el.value, root);
|
|
}
|
|
});
|
|
return scrollParent;
|
|
}
|
|
|
|
// src/usePageVisibility/index.ts
|
|
import { ref as ref6 } from "vue";
|
|
var visibility;
|
|
function usePageVisibility() {
|
|
if (!visibility) {
|
|
visibility = ref6("visible");
|
|
if (inBrowser) {
|
|
const update = () => {
|
|
visibility.value = document.hidden ? "hidden" : "visible";
|
|
};
|
|
update();
|
|
window.addEventListener("visibilitychange", update);
|
|
}
|
|
}
|
|
return visibility;
|
|
}
|
|
|
|
// src/useCustomFieldValue/index.ts
|
|
import { watch as watch2, inject as inject2 } from "vue";
|
|
var CUSTOM_FIELD_INJECTION_KEY = Symbol("van-field");
|
|
function useCustomFieldValue(customValue) {
|
|
const field = inject2(CUSTOM_FIELD_INJECTION_KEY, null);
|
|
if (field && !field.customValue.value) {
|
|
field.customValue.value = customValue;
|
|
watch2(customValue, () => {
|
|
field.resetValidation();
|
|
field.validateWithTrigger("onChange");
|
|
});
|
|
}
|
|
}
|
|
|
|
// src/useRaf/index.ts
|
|
function useRaf(fn, options) {
|
|
if (inBrowser) {
|
|
const { interval = 0, isLoop = false } = options || {};
|
|
let start;
|
|
let isStopped = false;
|
|
let rafId;
|
|
const stop = () => {
|
|
isStopped = true;
|
|
cancelAnimationFrame(rafId);
|
|
};
|
|
const frameWrapper = (timestamp) => {
|
|
if (isStopped)
|
|
return;
|
|
if (start === void 0) {
|
|
start = timestamp;
|
|
} else if (timestamp - start > interval) {
|
|
fn(timestamp);
|
|
start = timestamp;
|
|
if (!isLoop) {
|
|
stop();
|
|
return;
|
|
}
|
|
}
|
|
rafId = requestAnimationFrame(frameWrapper);
|
|
};
|
|
rafId = requestAnimationFrame(frameWrapper);
|
|
return stop;
|
|
}
|
|
return () => {
|
|
};
|
|
}
|
|
export {
|
|
CUSTOM_FIELD_INJECTION_KEY,
|
|
cancelRaf,
|
|
doubleRaf,
|
|
flattenVNodes,
|
|
getScrollParent,
|
|
inBrowser,
|
|
onMountedOrActivated,
|
|
raf,
|
|
sortChildren,
|
|
supportsPassive,
|
|
useChildren,
|
|
useClickAway,
|
|
useCountDown,
|
|
useCustomFieldValue,
|
|
useEventListener,
|
|
usePageVisibility,
|
|
useParent,
|
|
useRaf,
|
|
useRect,
|
|
useScrollParent,
|
|
useToggle,
|
|
useWindowSize
|
|
};
|