259 lines
10 KiB
JavaScript
259 lines
10 KiB
JavaScript
import { Dt as mergeProps, Ft as onMounted, Kn as ref, Qn as toRef, U as computed, Yn as shallowRef, _n as watchEffect, et as createVNode, gn as watch, jt as onBeforeUnmount } from "./vue.runtime.esm-bundler-BvoXUmaf.js";
|
|
import { H as omit, g as clamp, it as consoleWarn, l as propsFactory, n as genericComponent } from "./defineComponent-DB6xIcDy.js";
|
|
import { t as useRender } from "./useRender-fVtVsZgv.js";
|
|
import { n as useToggleScope, t as useProxiedModel } from "./proxiedModel-DSlSIQ0y.js";
|
|
import { a as useLayoutItem, n as makeLayoutItemProps } from "./layout-C9QMoF7I.js";
|
|
import { i as makeVToolbarTitleProps, n as makeVToolbarProps, r as VToolbarTitle, t as VToolbar } from "./VToolbar-XKeTy7Mr.js";
|
|
import { t as useSsrBoot } from "./ssrBoot-CSc1_bcP.js";
|
|
import { n as makeVBtnProps, t as VBtn } from "./VBtn-BZzD9gwE.js";
|
|
import "/Users/thackmaster/Development/routie2/frontend/node_modules/vuetify/lib/components/VAppBar/VAppBar.css";
|
|
//#region node_modules/vuetify/lib/composables/scroll.js
|
|
var makeScrollProps = propsFactory({
|
|
scrollTarget: { type: String },
|
|
scrollThreshold: {
|
|
type: [String, Number],
|
|
default: 300
|
|
}
|
|
}, "scroll");
|
|
function useScroll(props, args = {}) {
|
|
const { canScroll, layoutSize } = args;
|
|
let previousScroll = 0;
|
|
let previousScrollHeight = 0;
|
|
const target = ref(null);
|
|
const currentScroll = shallowRef(0);
|
|
const savedScroll = shallowRef(0);
|
|
const currentThreshold = shallowRef(0);
|
|
const isScrollActive = shallowRef(false);
|
|
const isScrollingUp = shallowRef(false);
|
|
const isAtBottom = shallowRef(false);
|
|
const reachedBottomWhileScrollingDown = shallowRef(false);
|
|
const hasEnoughScrollableSpace = shallowRef(true);
|
|
const scrollThreshold = computed(() => {
|
|
return Number(props.scrollThreshold);
|
|
});
|
|
/**
|
|
* 1: at top
|
|
* 0: at threshold
|
|
*/
|
|
const scrollRatio = computed(() => {
|
|
return clamp((scrollThreshold.value - currentScroll.value) / scrollThreshold.value || 0);
|
|
});
|
|
function getScrollMetrics(targetEl) {
|
|
return {
|
|
clientHeight: "window" in targetEl ? window.innerHeight : targetEl.clientHeight,
|
|
scrollHeight: "window" in targetEl ? document.documentElement.scrollHeight : targetEl.scrollHeight
|
|
};
|
|
}
|
|
function checkScrollableSpace() {
|
|
const targetEl = target.value;
|
|
if (!targetEl) return;
|
|
const { clientHeight, scrollHeight } = getScrollMetrics(targetEl);
|
|
const maxScrollableDistance = scrollHeight - clientHeight;
|
|
const elementHeight = layoutSize?.value || 0;
|
|
hasEnoughScrollableSpace.value = maxScrollableDistance > scrollThreshold.value + elementHeight;
|
|
}
|
|
function onResize() {
|
|
checkScrollableSpace();
|
|
}
|
|
function onScroll() {
|
|
const targetEl = target.value;
|
|
if (!targetEl || canScroll && !canScroll.value) return;
|
|
previousScroll = currentScroll.value;
|
|
currentScroll.value = "window" in targetEl ? targetEl.pageYOffset : targetEl.scrollTop;
|
|
const currentScrollHeight = targetEl instanceof Window ? document.documentElement.scrollHeight : targetEl.scrollHeight;
|
|
if (previousScrollHeight !== currentScrollHeight) {
|
|
if (currentScrollHeight > previousScrollHeight) checkScrollableSpace();
|
|
previousScrollHeight = currentScrollHeight;
|
|
}
|
|
isScrollingUp.value = currentScroll.value < previousScroll;
|
|
currentThreshold.value = Math.abs(currentScroll.value - scrollThreshold.value);
|
|
const { clientHeight, scrollHeight } = getScrollMetrics(targetEl);
|
|
const atBottom = currentScroll.value + clientHeight >= scrollHeight - 5;
|
|
if (!isScrollingUp.value && atBottom && currentScroll.value >= scrollThreshold.value && hasEnoughScrollableSpace.value) reachedBottomWhileScrollingDown.value = true;
|
|
const scrollJumped = Math.abs(currentScroll.value - previousScroll) > 100;
|
|
const atTop = currentScroll.value <= 5;
|
|
if (isScrollingUp.value && previousScroll - currentScroll.value > 1 && !atBottom || scrollJumped && currentScroll.value < scrollThreshold.value || atTop) reachedBottomWhileScrollingDown.value = false;
|
|
isAtBottom.value = atBottom;
|
|
}
|
|
watch(isScrollingUp, () => {
|
|
savedScroll.value = savedScroll.value || currentScroll.value;
|
|
});
|
|
watch(isScrollActive, () => {
|
|
savedScroll.value = 0;
|
|
});
|
|
onMounted(() => {
|
|
watch(() => props.scrollTarget, (scrollTarget) => {
|
|
const newTarget = scrollTarget ? document.querySelector(scrollTarget) : window;
|
|
if (!newTarget) {
|
|
consoleWarn(`Unable to locate element with identifier ${scrollTarget}`);
|
|
return;
|
|
}
|
|
if (newTarget === target.value) return;
|
|
target.value?.removeEventListener("scroll", onScroll);
|
|
target.value = newTarget;
|
|
target.value.addEventListener("scroll", onScroll, { passive: true });
|
|
Promise.resolve().then(() => {
|
|
checkScrollableSpace();
|
|
});
|
|
}, { immediate: true });
|
|
window.addEventListener("resize", onResize, { passive: true });
|
|
});
|
|
onBeforeUnmount(() => {
|
|
target.value?.removeEventListener("scroll", onScroll);
|
|
window.removeEventListener("resize", onResize);
|
|
});
|
|
canScroll && watch(canScroll, onScroll, { immediate: true });
|
|
return {
|
|
scrollThreshold,
|
|
currentScroll,
|
|
currentThreshold,
|
|
isScrollActive,
|
|
scrollRatio,
|
|
isScrollingUp,
|
|
savedScroll,
|
|
isAtBottom,
|
|
reachedBottomWhileScrollingDown,
|
|
hasEnoughScrollableSpace
|
|
};
|
|
}
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/VAppBar/VAppBar.js
|
|
var makeVAppBarProps = propsFactory({
|
|
scrollBehavior: String,
|
|
modelValue: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
location: {
|
|
type: String,
|
|
default: "top",
|
|
validator: (value) => ["top", "bottom"].includes(value)
|
|
},
|
|
...omit(makeVToolbarProps(), ["location"]),
|
|
...makeLayoutItemProps(),
|
|
...makeScrollProps(),
|
|
height: {
|
|
type: [Number, String],
|
|
default: 64
|
|
}
|
|
}, "VAppBar");
|
|
var VAppBar = genericComponent()({
|
|
name: "VAppBar",
|
|
props: makeVAppBarProps(),
|
|
emits: { "update:modelValue": (value) => true },
|
|
setup(props, { slots }) {
|
|
const vToolbarRef = ref();
|
|
const isActive = useProxiedModel(props, "modelValue");
|
|
const scrollBehavior = computed(() => {
|
|
const behavior = new Set(props.scrollBehavior?.split(" ") ?? []);
|
|
return {
|
|
hide: behavior.has("hide"),
|
|
fullyHide: behavior.has("fully-hide"),
|
|
inverted: behavior.has("inverted"),
|
|
collapse: behavior.has("collapse"),
|
|
elevate: behavior.has("elevate"),
|
|
fadeImage: behavior.has("fade-image")
|
|
};
|
|
});
|
|
const { currentScroll, scrollThreshold, isScrollingUp, scrollRatio, isAtBottom, reachedBottomWhileScrollingDown, hasEnoughScrollableSpace } = useScroll(props, {
|
|
canScroll: computed(() => {
|
|
const behavior = scrollBehavior.value;
|
|
return behavior.hide || behavior.fullyHide || behavior.inverted || behavior.collapse || behavior.elevate || behavior.fadeImage || !isActive.value;
|
|
}),
|
|
layoutSize: computed(() => {
|
|
return (vToolbarRef.value?.contentHeight ?? 0) + (vToolbarRef.value?.extensionHeight ?? 0);
|
|
})
|
|
});
|
|
const canHide = toRef(() => scrollBehavior.value.hide || scrollBehavior.value.fullyHide);
|
|
const isCollapsed = computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0));
|
|
const isFlat = computed(() => props.flat || scrollBehavior.value.fullyHide && !isActive.value || scrollBehavior.value.elevate && (scrollBehavior.value.inverted ? currentScroll.value > 0 : currentScroll.value === 0));
|
|
const opacity = computed(() => scrollBehavior.value.fadeImage ? scrollBehavior.value.inverted ? 1 - scrollRatio.value : scrollRatio.value : void 0);
|
|
const height = computed(() => {
|
|
if (scrollBehavior.value.hide && scrollBehavior.value.inverted) return 0;
|
|
const height = vToolbarRef.value?.contentHeight ?? 0;
|
|
const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
|
|
if (!canHide.value) return height + extensionHeight;
|
|
return currentScroll.value < scrollThreshold.value || scrollBehavior.value.fullyHide ? height + extensionHeight : height;
|
|
});
|
|
useToggleScope(() => !!props.scrollBehavior, () => {
|
|
watchEffect(() => {
|
|
if (!canHide.value) {
|
|
isActive.value = true;
|
|
return;
|
|
}
|
|
if (scrollBehavior.value.inverted) {
|
|
isActive.value = currentScroll.value > scrollThreshold.value;
|
|
return;
|
|
}
|
|
if (!hasEnoughScrollableSpace.value) {
|
|
isActive.value = true;
|
|
return;
|
|
}
|
|
if (reachedBottomWhileScrollingDown.value) {
|
|
isActive.value = false;
|
|
return;
|
|
}
|
|
isActive.value = isScrollingUp.value && !isAtBottom.value || currentScroll.value < scrollThreshold.value;
|
|
});
|
|
});
|
|
const { ssrBootStyles } = useSsrBoot();
|
|
const { layoutItemStyles } = useLayoutItem({
|
|
id: props.name,
|
|
order: computed(() => parseInt(props.order, 10)),
|
|
position: toRef(() => props.location),
|
|
layoutSize: height,
|
|
elementSize: shallowRef(void 0),
|
|
active: isActive,
|
|
absolute: toRef(() => props.absolute)
|
|
});
|
|
useRender(() => {
|
|
const toolbarProps = omit(VToolbar.filterProps(props), ["location"]);
|
|
return createVNode(VToolbar, mergeProps({
|
|
"ref": vToolbarRef,
|
|
"class": [
|
|
"v-app-bar",
|
|
{ "v-app-bar--bottom": props.location === "bottom" },
|
|
props.class
|
|
],
|
|
"style": [{
|
|
...layoutItemStyles.value,
|
|
"--v-toolbar-image-opacity": opacity.value,
|
|
height: void 0,
|
|
...ssrBootStyles.value
|
|
}, props.style]
|
|
}, toolbarProps, {
|
|
"collapse": isCollapsed.value,
|
|
"flat": isFlat.value
|
|
}), slots);
|
|
});
|
|
return {};
|
|
}
|
|
});
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/VAppBar/VAppBarNavIcon.js
|
|
var makeVAppBarNavIconProps = propsFactory({ ...omit(makeVBtnProps({
|
|
icon: "$menu",
|
|
variant: "text"
|
|
}), ["spaced"]) }, "VAppBarNavIcon");
|
|
var VAppBarNavIcon = genericComponent()({
|
|
name: "VAppBarNavIcon",
|
|
props: makeVAppBarNavIconProps(),
|
|
setup(props, { slots }) {
|
|
useRender(() => createVNode(VBtn, mergeProps(props, { "class": ["v-app-bar-nav-icon"] }), slots));
|
|
return {};
|
|
}
|
|
});
|
|
//#endregion
|
|
//#region node_modules/vuetify/lib/components/VAppBar/VAppBarTitle.js
|
|
var VAppBarTitle = genericComponent()({
|
|
name: "VAppBarTitle",
|
|
props: makeVToolbarTitleProps(),
|
|
setup(props, { slots }) {
|
|
useRender(() => createVNode(VToolbarTitle, mergeProps(props, { "class": "v-app-bar-title" }), slots));
|
|
return {};
|
|
}
|
|
});
|
|
//#endregion
|
|
export { VAppBar, VAppBarNavIcon, VAppBarTitle };
|
|
|
|
//# sourceMappingURL=vuetify_components_VAppBar.js.map
|