routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+259
@@ -0,0 +1,259 @@
|
||||
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
|
||||
Reference in New Issue
Block a user