481 lines
18 KiB
JavaScript
481 lines
18 KiB
JavaScript
import { Dt as mergeProps, Ft as onMounted, Gn as readonly, Kn as ref, M as Fragment, Ot as nextTick, Qn as toRef, U as computed, Vn as onScopeDispose, W as createBaseVNode, Yn as shallowRef, _n as watchEffect, et as createVNode, gn as watch, jt as onBeforeUnmount, n as Transition } from "./vue.runtime.esm-bundler-BvoXUmaf.js";
|
|
import { H as omit, _ as convertToUnit, a as provideDefaults, g as clamp, l as propsFactory, n as genericComponent, u as CircularBuffer } from "./defineComponent-DB6xIcDy.js";
|
|
import { o as toPhysical } from "./anchor-DB_quObT.js";
|
|
import { t as makeComponentProps } from "./component-DdiwBe6i.js";
|
|
import { t as useRender } from "./useRender-fVtVsZgv.js";
|
|
import { t as useBackgroundColor } from "./color-B6vuQruj.js";
|
|
import { i as provideTheme, r as makeThemeProps } from "./theme-Cx5kFg0-.js";
|
|
import { n as useToggleScope, t as useProxiedModel } from "./proxiedModel-DSlSIQ0y.js";
|
|
import { i as useRtl } from "./locale-DDGMqzqb.js";
|
|
import { a as useDisplay, i as makeDisplayProps } from "./display-DKaCj-_K.js";
|
|
import { a as useLayoutItem, n as makeLayoutItemProps } from "./layout-C9QMoF7I.js";
|
|
import { t as makeTagProps } from "./tag-C_KkCPzB.js";
|
|
import { t as VDefaultsProvider } from "./VDefaultsProvider-C09t4-My.js";
|
|
import { t as VImg } from "./VImg-DaEUT7gG.js";
|
|
import { n as useRounded, t as makeRoundedProps } from "./rounded-BuPGKRa9.js";
|
|
import { n as useBorder, t as makeBorderProps } from "./border-jCmRyoxP.js";
|
|
import { n as useElevation, t as makeElevationProps } from "./elevation-B0TH2wU6.js";
|
|
import { t as useSsrBoot } from "./ssrBoot-CSc1_bcP.js";
|
|
import { i as useRouter } from "./router-D_jP4Uwb.js";
|
|
import { i as useDelay, n as useFocusTrap, r as makeDelayProps, t as makeFocusTrapProps } from "./focusTrap-rHoJd0qS.js";
|
|
import { t as useScopeId } from "./scopeId-CyMkmyzM.js";
|
|
import "/Users/thackmaster/Development/routie2/frontend/node_modules/vuetify/lib/components/VNavigationDrawer/VNavigationDrawer.css";
|
|
//#region node_modules/vuetify/lib/components/VNavigationDrawer/sticky.js
|
|
function useSticky({ rootEl, isSticky, layoutItemStyles }) {
|
|
const isStuck = shallowRef(false);
|
|
const stuckPosition = shallowRef(0);
|
|
const stickyStyles = computed(() => {
|
|
const side = typeof isStuck.value === "boolean" ? "top" : isStuck.value;
|
|
return [isSticky.value ? {
|
|
top: "auto",
|
|
bottom: "auto",
|
|
height: void 0
|
|
} : void 0, isStuck.value ? { [side]: convertToUnit(stuckPosition.value) } : { top: layoutItemStyles.value.top }];
|
|
});
|
|
onMounted(() => {
|
|
watch(isSticky, (val) => {
|
|
if (val) window.addEventListener("scroll", onScroll, { passive: true });
|
|
else window.removeEventListener("scroll", onScroll);
|
|
}, { immediate: true });
|
|
});
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener("scroll", onScroll);
|
|
});
|
|
let lastScrollTop = 0;
|
|
function onScroll() {
|
|
const direction = lastScrollTop > window.scrollY ? "up" : "down";
|
|
const rect = rootEl.value.getBoundingClientRect();
|
|
const layoutTop = parseFloat(layoutItemStyles.value.top ?? 0);
|
|
const top = window.scrollY - Math.max(0, stuckPosition.value - layoutTop);
|
|
const bottom = rect.height + Math.max(stuckPosition.value, layoutTop) - window.scrollY - window.innerHeight;
|
|
const bodyScroll = parseFloat(getComputedStyle(rootEl.value).getPropertyValue("--v-body-scroll-y")) || 0;
|
|
if (rect.height < window.innerHeight - layoutTop) {
|
|
isStuck.value = "top";
|
|
stuckPosition.value = layoutTop;
|
|
} else if (direction === "up" && isStuck.value === "bottom" || direction === "down" && isStuck.value === "top") {
|
|
stuckPosition.value = window.scrollY + rect.top - bodyScroll;
|
|
isStuck.value = true;
|
|
} else if (direction === "down" && bottom <= 0) {
|
|
stuckPosition.value = 0;
|
|
isStuck.value = "bottom";
|
|
} else if (direction === "up" && top <= 0) {
|
|
if (!bodyScroll) {
|
|
stuckPosition.value = rect.top + top;
|
|
isStuck.value = "top";
|
|
} else if (isStuck.value !== "top") {
|
|
stuckPosition.value = -top + bodyScroll + layoutTop;
|
|
isStuck.value = "top";
|
|
}
|
|
}
|
|
lastScrollTop = window.scrollY;
|
|
}
|
|
return {
|
|
isStuck,
|
|
stickyStyles
|
|
};
|
|
}
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/composables/touch.js
|
|
var HORIZON = 100;
|
|
var HISTORY = 20;
|
|
/** @see https://android.googlesource.com/platform/frameworks/native/+/master/libs/input/VelocityTracker.cpp */
|
|
function kineticEnergyToVelocity(work) {
|
|
return (work < 0 ? -1 : 1) * Math.sqrt(Math.abs(work)) * 1.41421356237;
|
|
}
|
|
/**
|
|
* Returns pointer velocity in px/s
|
|
*/
|
|
function calculateImpulseVelocity(samples) {
|
|
if (samples.length < 2) return 0;
|
|
if (samples.length === 2) {
|
|
if (samples[1].t === samples[0].t) return 0;
|
|
return (samples[1].d - samples[0].d) / (samples[1].t - samples[0].t);
|
|
}
|
|
let work = 0;
|
|
for (let i = samples.length - 1; i > 0; i--) {
|
|
if (samples[i].t === samples[i - 1].t) continue;
|
|
const vprev = kineticEnergyToVelocity(work);
|
|
const vcurr = (samples[i].d - samples[i - 1].d) / (samples[i].t - samples[i - 1].t);
|
|
work += (vcurr - vprev) * Math.abs(vcurr);
|
|
if (i === samples.length - 1) work *= .5;
|
|
}
|
|
return kineticEnergyToVelocity(work) * 1e3;
|
|
}
|
|
function useVelocity() {
|
|
const touches = {};
|
|
function addMovement(e) {
|
|
Array.from(e.changedTouches).forEach((touch) => {
|
|
(touches[touch.identifier] ?? (touches[touch.identifier] = new CircularBuffer(HISTORY))).push([e.timeStamp, touch]);
|
|
});
|
|
}
|
|
function endTouch(e) {
|
|
Array.from(e.changedTouches).forEach((touch) => {
|
|
delete touches[touch.identifier];
|
|
});
|
|
}
|
|
function getVelocity(id) {
|
|
const samples = touches[id]?.values().reverse();
|
|
if (!samples) throw new Error(`No samples for touch id ${id}`);
|
|
const newest = samples[0];
|
|
const x = [];
|
|
const y = [];
|
|
for (const val of samples) {
|
|
if (newest[0] - val[0] > HORIZON) break;
|
|
x.push({
|
|
t: val[0],
|
|
d: val[1].clientX
|
|
});
|
|
y.push({
|
|
t: val[0],
|
|
d: val[1].clientY
|
|
});
|
|
}
|
|
return {
|
|
x: calculateImpulseVelocity(x),
|
|
y: calculateImpulseVelocity(y),
|
|
get direction() {
|
|
const { x, y } = this;
|
|
const [absX, absY] = [Math.abs(x), Math.abs(y)];
|
|
return absX > absY && x >= 0 ? "right" : absX > absY && x <= 0 ? "left" : absY > absX && y >= 0 ? "down" : absY > absX && y <= 0 ? "up" : oops$1();
|
|
}
|
|
};
|
|
}
|
|
return {
|
|
addMovement,
|
|
endTouch,
|
|
getVelocity
|
|
};
|
|
}
|
|
function oops$1() {
|
|
throw new Error();
|
|
}
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/VNavigationDrawer/touch.js
|
|
function useTouch({ el, isActive, isTemporary, width, touchless, position }) {
|
|
onMounted(() => {
|
|
window.addEventListener("touchstart", onTouchstart, { passive: true });
|
|
window.addEventListener("touchmove", onTouchmove, { passive: false });
|
|
window.addEventListener("touchend", onTouchend, { passive: true });
|
|
});
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener("touchstart", onTouchstart);
|
|
window.removeEventListener("touchmove", onTouchmove);
|
|
window.removeEventListener("touchend", onTouchend);
|
|
});
|
|
const isHorizontal = computed(() => ["left", "right"].includes(position.value));
|
|
const { addMovement, endTouch, getVelocity } = useVelocity();
|
|
let maybeDragging = false;
|
|
const isDragging = shallowRef(false);
|
|
const dragProgress = shallowRef(0);
|
|
const offset = shallowRef(0);
|
|
let start;
|
|
function getOffset(pos, active) {
|
|
return (position.value === "left" ? pos : position.value === "right" ? document.documentElement.clientWidth - pos : position.value === "top" ? pos : position.value === "bottom" ? document.documentElement.clientHeight - pos : oops()) - (active ? width.value : 0);
|
|
}
|
|
function getProgress(pos, limit = true) {
|
|
const progress = position.value === "left" ? (pos - offset.value) / width.value : position.value === "right" ? (document.documentElement.clientWidth - pos - offset.value) / width.value : position.value === "top" ? (pos - offset.value) / width.value : position.value === "bottom" ? (document.documentElement.clientHeight - pos - offset.value) / width.value : oops();
|
|
return limit ? clamp(progress) : progress;
|
|
}
|
|
function onTouchstart(e) {
|
|
if (touchless.value) return;
|
|
const touchX = e.changedTouches[0].clientX;
|
|
const touchY = e.changedTouches[0].clientY;
|
|
const touchZone = 25;
|
|
const inTouchZone = position.value === "left" ? touchX < touchZone : position.value === "right" ? touchX > document.documentElement.clientWidth - touchZone : position.value === "top" ? touchY < touchZone : position.value === "bottom" ? touchY > document.documentElement.clientHeight - touchZone : oops();
|
|
const inElement = isActive.value && (position.value === "left" ? touchX < width.value : position.value === "right" ? touchX > document.documentElement.clientWidth - width.value : position.value === "top" ? touchY < width.value : position.value === "bottom" ? touchY > document.documentElement.clientHeight - width.value : oops());
|
|
if (inTouchZone || inElement || isActive.value && isTemporary.value) {
|
|
start = [touchX, touchY];
|
|
offset.value = getOffset(isHorizontal.value ? touchX : touchY, isActive.value);
|
|
dragProgress.value = getProgress(isHorizontal.value ? touchX : touchY);
|
|
maybeDragging = offset.value > -20 && offset.value < 80;
|
|
endTouch(e);
|
|
addMovement(e);
|
|
}
|
|
}
|
|
function onTouchmove(e) {
|
|
const touchX = e.changedTouches[0].clientX;
|
|
const touchY = e.changedTouches[0].clientY;
|
|
if (maybeDragging) {
|
|
if (!e.cancelable) {
|
|
maybeDragging = false;
|
|
return;
|
|
}
|
|
const dx = Math.abs(touchX - start[0]);
|
|
const dy = Math.abs(touchY - start[1]);
|
|
if (isHorizontal.value ? dx > dy && dx > 3 : dy > dx && dy > 3) {
|
|
isDragging.value = true;
|
|
maybeDragging = false;
|
|
} else if ((isHorizontal.value ? dy : dx) > 3) maybeDragging = false;
|
|
}
|
|
if (!isDragging.value) return;
|
|
e.preventDefault();
|
|
addMovement(e);
|
|
const progress = getProgress(isHorizontal.value ? touchX : touchY, false);
|
|
dragProgress.value = Math.max(0, Math.min(1, progress));
|
|
if (progress > 1) offset.value = getOffset(isHorizontal.value ? touchX : touchY, true);
|
|
else if (progress < 0) offset.value = getOffset(isHorizontal.value ? touchX : touchY, false);
|
|
}
|
|
function onTouchend(e) {
|
|
maybeDragging = false;
|
|
if (!isDragging.value) return;
|
|
addMovement(e);
|
|
isDragging.value = false;
|
|
const velocity = getVelocity(e.changedTouches[0].identifier);
|
|
const vx = Math.abs(velocity.x);
|
|
const vy = Math.abs(velocity.y);
|
|
if (isHorizontal.value ? vx > vy && vx > 400 : vy > vx && vy > 3) isActive.value = velocity.direction === ({
|
|
left: "right",
|
|
right: "left",
|
|
top: "down",
|
|
bottom: "up"
|
|
}[position.value] || oops());
|
|
else isActive.value = dragProgress.value > .5;
|
|
}
|
|
const dragStyles = computed(() => {
|
|
return isDragging.value ? {
|
|
transform: position.value === "left" ? `translateX(calc(-100% + ${dragProgress.value * width.value}px))` : position.value === "right" ? `translateX(calc(100% - ${dragProgress.value * width.value}px))` : position.value === "top" ? `translateY(calc(-100% + ${dragProgress.value * width.value}px))` : position.value === "bottom" ? `translateY(calc(100% - ${dragProgress.value * width.value}px))` : oops(),
|
|
transition: "none"
|
|
} : void 0;
|
|
});
|
|
useToggleScope(isDragging, () => {
|
|
const transform = el.value?.style.transform ?? null;
|
|
const transition = el.value?.style.transition ?? null;
|
|
watchEffect(() => {
|
|
el.value?.style.setProperty("transform", dragStyles.value?.transform || "none");
|
|
el.value?.style.setProperty("transition", dragStyles.value?.transition || null);
|
|
});
|
|
onScopeDispose(() => {
|
|
el.value?.style.setProperty("transform", transform);
|
|
el.value?.style.setProperty("transition", transition);
|
|
});
|
|
});
|
|
return {
|
|
isDragging,
|
|
dragProgress,
|
|
dragStyles
|
|
};
|
|
}
|
|
function oops() {
|
|
throw new Error();
|
|
}
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/VNavigationDrawer/VNavigationDrawer.js
|
|
var locations = [
|
|
"start",
|
|
"end",
|
|
"left",
|
|
"right",
|
|
"top",
|
|
"bottom"
|
|
];
|
|
var makeVNavigationDrawerProps = propsFactory({
|
|
color: String,
|
|
disableResizeWatcher: Boolean,
|
|
disableRouteWatcher: Boolean,
|
|
expandOnHover: Boolean,
|
|
floating: Boolean,
|
|
modelValue: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
permanent: Boolean,
|
|
rail: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
railWidth: {
|
|
type: [Number, String],
|
|
default: 56
|
|
},
|
|
scrim: {
|
|
type: [Boolean, String],
|
|
default: true
|
|
},
|
|
image: String,
|
|
temporary: Boolean,
|
|
persistent: Boolean,
|
|
touchless: Boolean,
|
|
width: {
|
|
type: [Number, String],
|
|
default: 256
|
|
},
|
|
location: {
|
|
type: String,
|
|
default: "start",
|
|
validator: (value) => locations.includes(value)
|
|
},
|
|
sticky: Boolean,
|
|
...makeBorderProps(),
|
|
...makeComponentProps(),
|
|
...makeDelayProps(),
|
|
...makeDisplayProps({ mobile: null }),
|
|
...makeElevationProps(),
|
|
...makeLayoutItemProps(),
|
|
...makeRoundedProps(),
|
|
...omit(makeFocusTrapProps(), ["disableInitialFocus"]),
|
|
...makeTagProps({ tag: "nav" }),
|
|
...makeThemeProps()
|
|
}, "VNavigationDrawer");
|
|
var VNavigationDrawer = genericComponent()({
|
|
name: "VNavigationDrawer",
|
|
props: makeVNavigationDrawerProps(),
|
|
emits: {
|
|
"update:modelValue": (val) => true,
|
|
"update:rail": (val) => true
|
|
},
|
|
setup(props, { attrs, emit, slots }) {
|
|
const { isRtl } = useRtl();
|
|
const { themeClasses } = provideTheme(props);
|
|
const { borderClasses } = useBorder(props);
|
|
const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(() => props.color);
|
|
const { elevationClasses } = useElevation(props);
|
|
const { displayClasses, mobile } = useDisplay(props);
|
|
const { roundedClasses } = useRounded(props);
|
|
const router = useRouter();
|
|
const isActive = useProxiedModel(props, "modelValue", null, (v) => !!v);
|
|
const { ssrBootStyles } = useSsrBoot();
|
|
const { scopeId } = useScopeId();
|
|
const rootEl = ref();
|
|
const isHovering = shallowRef(false);
|
|
const { runOpenDelay, runCloseDelay } = useDelay(props, (value) => {
|
|
isHovering.value = value;
|
|
});
|
|
const width = computed(() => {
|
|
return props.rail && props.expandOnHover && isHovering.value ? Number(props.width) : Number(props.rail ? props.railWidth : props.width);
|
|
});
|
|
const location = computed(() => {
|
|
return toPhysical(props.location, isRtl.value);
|
|
});
|
|
const isPersistent = toRef(() => props.persistent);
|
|
const isTemporary = computed(() => !props.permanent && (mobile.value || props.temporary));
|
|
const isSticky = computed(() => props.sticky && !isTemporary.value && location.value !== "bottom");
|
|
useFocusTrap(props, {
|
|
isActive,
|
|
localTop: isTemporary,
|
|
contentEl: rootEl
|
|
});
|
|
useToggleScope(() => props.expandOnHover && props.rail != null, () => {
|
|
watch(isHovering, (val) => emit("update:rail", !val));
|
|
});
|
|
useToggleScope(() => !props.disableResizeWatcher, () => {
|
|
watch(isTemporary, (val) => !props.permanent && nextTick(() => isActive.value = !val));
|
|
});
|
|
useToggleScope(() => !props.disableRouteWatcher && !!router, () => {
|
|
watch(router.currentRoute, () => isTemporary.value && (isActive.value = false));
|
|
});
|
|
watch(() => props.permanent, (val) => {
|
|
if (val) isActive.value = true;
|
|
});
|
|
if (props.modelValue == null && !isTemporary.value) isActive.value = props.permanent || !mobile.value;
|
|
const { isDragging, dragProgress } = useTouch({
|
|
el: rootEl,
|
|
isActive,
|
|
isTemporary,
|
|
width,
|
|
touchless: toRef(() => props.touchless),
|
|
position: location
|
|
});
|
|
const layoutSize = computed(() => {
|
|
const size = isTemporary.value ? 0 : props.rail && props.expandOnHover ? Number(props.railWidth) : width.value;
|
|
return isDragging.value ? size * dragProgress.value : size;
|
|
});
|
|
const { layoutItemStyles, layoutItemScrimStyles } = useLayoutItem({
|
|
id: props.name,
|
|
order: computed(() => parseInt(props.order, 10)),
|
|
position: location,
|
|
layoutSize,
|
|
elementSize: width,
|
|
active: readonly(isActive),
|
|
disableTransitions: toRef(() => isDragging.value),
|
|
absolute: computed(() => props.absolute || isSticky.value && typeof isStuck.value !== "string")
|
|
});
|
|
const { isStuck, stickyStyles } = useSticky({
|
|
rootEl,
|
|
isSticky,
|
|
layoutItemStyles
|
|
});
|
|
const scrimColor = useBackgroundColor(() => {
|
|
return typeof props.scrim === "string" ? props.scrim : null;
|
|
});
|
|
const scrimStyles = computed(() => ({
|
|
...isDragging.value ? {
|
|
opacity: dragProgress.value * .2,
|
|
transition: "none"
|
|
} : void 0,
|
|
...layoutItemScrimStyles.value
|
|
}));
|
|
provideDefaults({ VList: { bgColor: "transparent" } });
|
|
useRender(() => {
|
|
const hasImage = slots.image || props.image;
|
|
return createBaseVNode(Fragment, null, [createVNode(props.tag, mergeProps({
|
|
"ref": rootEl,
|
|
"onMouseenter": runOpenDelay,
|
|
"onMouseleave": runCloseDelay,
|
|
"class": [
|
|
"v-navigation-drawer",
|
|
`v-navigation-drawer--${location.value}`,
|
|
{
|
|
"v-navigation-drawer--expand-on-hover": props.expandOnHover,
|
|
"v-navigation-drawer--floating": props.floating,
|
|
"v-navigation-drawer--is-hovering": isHovering.value,
|
|
"v-navigation-drawer--rail": props.rail,
|
|
"v-navigation-drawer--temporary": isTemporary.value,
|
|
"v-navigation-drawer--persistent": isPersistent.value,
|
|
"v-navigation-drawer--active": isActive.value,
|
|
"v-navigation-drawer--sticky": isSticky.value
|
|
},
|
|
themeClasses.value,
|
|
backgroundColorClasses.value,
|
|
borderClasses.value,
|
|
displayClasses.value,
|
|
elevationClasses.value,
|
|
roundedClasses.value,
|
|
props.class
|
|
],
|
|
"style": [
|
|
backgroundColorStyles.value,
|
|
layoutItemStyles.value,
|
|
ssrBootStyles.value,
|
|
stickyStyles.value,
|
|
props.style
|
|
],
|
|
"inert": !isActive.value
|
|
}, scopeId, attrs), { default: () => [
|
|
hasImage && createBaseVNode("div", {
|
|
"key": "image",
|
|
"class": "v-navigation-drawer__img"
|
|
}, [!slots.image ? createVNode(VImg, {
|
|
"key": "image-img",
|
|
"alt": "",
|
|
"cover": true,
|
|
"height": "inherit",
|
|
"src": props.image
|
|
}, null) : createVNode(VDefaultsProvider, {
|
|
"key": "image-defaults",
|
|
"disabled": !props.image,
|
|
"defaults": { VImg: {
|
|
alt: "",
|
|
cover: true,
|
|
height: "inherit",
|
|
src: props.image
|
|
} }
|
|
}, slots.image)]),
|
|
slots.prepend && createBaseVNode("div", { "class": "v-navigation-drawer__prepend" }, [slots.prepend?.()]),
|
|
createBaseVNode("div", { "class": "v-navigation-drawer__content" }, [slots.default?.()]),
|
|
slots.append && createBaseVNode("div", { "class": "v-navigation-drawer__append" }, [slots.append?.()])
|
|
] }), createVNode(Transition, { "name": "fade-transition" }, { default: () => [isTemporary.value && (isDragging.value || isActive.value) && !!props.scrim && createBaseVNode("div", mergeProps({
|
|
"class": ["v-navigation-drawer__scrim", scrimColor.backgroundColorClasses.value],
|
|
"style": [scrimStyles.value, scrimColor.backgroundColorStyles.value],
|
|
"onClick": () => {
|
|
if (isPersistent.value) return;
|
|
isActive.value = false;
|
|
}
|
|
}, scopeId), null)] })]);
|
|
});
|
|
return { isStuck };
|
|
}
|
|
});
|
|
//#endregion
|
|
export { VNavigationDrawer };
|
|
|
|
//# sourceMappingURL=vuetify_components_VNavigationDrawer.js.map
|