361 lines
11 KiB
JavaScript
361 lines
11 KiB
JavaScript
import {
|
|
VToolbar,
|
|
VToolbarTitle,
|
|
makeVToolbarProps,
|
|
makeVToolbarTitleProps
|
|
} from "./chunk-H2QFYTJQ.js";
|
|
import {
|
|
useSsrBoot
|
|
} from "./chunk-PCKQGDLK.js";
|
|
import {
|
|
makeLayoutItemProps,
|
|
useLayoutItem
|
|
} from "./chunk-KQXZAEJP.js";
|
|
import {
|
|
VBtn,
|
|
makeVBtnProps
|
|
} from "./chunk-UQALH6SL.js";
|
|
import {
|
|
useProxiedModel,
|
|
useToggleScope
|
|
} from "./chunk-KA77II4V.js";
|
|
import {
|
|
clamp,
|
|
consoleWarn,
|
|
genericComponent,
|
|
omit,
|
|
propsFactory,
|
|
useRender
|
|
} from "./chunk-LZ5T2ERG.js";
|
|
import {
|
|
computed,
|
|
createVNode,
|
|
mergeProps,
|
|
onBeforeUnmount,
|
|
onMounted,
|
|
ref,
|
|
shallowRef,
|
|
toRef,
|
|
watch,
|
|
watchEffect
|
|
} from "./chunk-2MKFL3BX.js";
|
|
|
|
// node_modules/vuetify/lib/components/VAppBar/VAppBar.js
|
|
import "/home/david/gitea_repo/personal_development/ServerManagerWebApp/frontend/node_modules/vuetify/lib/components/VAppBar/VAppBar.css";
|
|
|
|
// node_modules/vuetify/lib/composables/scroll.js
|
|
var makeScrollProps = propsFactory({
|
|
scrollTarget: {
|
|
type: String
|
|
},
|
|
scrollThreshold: {
|
|
type: [String, Number],
|
|
default: 300
|
|
}
|
|
}, "scroll");
|
|
function useScroll(props) {
|
|
let args = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
|
|
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);
|
|
});
|
|
const scrollRatio = computed(() => {
|
|
return clamp((scrollThreshold.value - currentScroll.value) / scrollThreshold.value || 0);
|
|
});
|
|
function getScrollMetrics(targetEl) {
|
|
const clientHeight = "window" in targetEl ? window.innerHeight : targetEl.clientHeight;
|
|
const scrollHeight = "window" in targetEl ? document.documentElement.scrollHeight : targetEl.scrollHeight;
|
|
return {
|
|
clientHeight,
|
|
scrollHeight
|
|
};
|
|
}
|
|
function checkScrollableSpace() {
|
|
const targetEl = target.value;
|
|
if (!targetEl) return;
|
|
const {
|
|
clientHeight,
|
|
scrollHeight
|
|
} = getScrollMetrics(targetEl);
|
|
const maxScrollableDistance = scrollHeight - clientHeight;
|
|
const elementHeight = layoutSize?.value || 0;
|
|
const minRequiredDistance = scrollThreshold.value + elementHeight;
|
|
hasEnoughScrollableSpace.value = maxScrollableDistance > minRequiredDistance;
|
|
}
|
|
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;
|
|
const scrolledUpSignificantly = isScrollingUp.value && previousScroll - currentScroll.value > 1;
|
|
if (scrolledUpSignificantly && !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,
|
|
// required only for testing
|
|
// probably can be removed
|
|
// later (2 chars chlng)
|
|
isScrollingUp,
|
|
savedScroll,
|
|
isAtBottom,
|
|
reachedBottomWhileScrollingDown,
|
|
hasEnoughScrollableSpace
|
|
};
|
|
}
|
|
|
|
// 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)
|
|
},
|
|
...makeVToolbarProps(),
|
|
...makeLayoutItemProps(),
|
|
...makeScrollProps(),
|
|
height: {
|
|
type: [Number, String],
|
|
default: 64
|
|
}
|
|
}, "VAppBar");
|
|
var VAppBar = genericComponent()({
|
|
name: "VAppBar",
|
|
props: makeVAppBarProps(),
|
|
emits: {
|
|
"update:modelValue": (value) => true
|
|
},
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
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")
|
|
// shrink: behavior.has('shrink'),
|
|
};
|
|
});
|
|
const canScroll = computed(() => {
|
|
const behavior = scrollBehavior.value;
|
|
return behavior.hide || behavior.fullyHide || behavior.inverted || behavior.collapse || behavior.elevate || behavior.fadeImage || // behavior.shrink ||
|
|
!isActive.value;
|
|
});
|
|
const appBarHeight = computed(() => {
|
|
const height2 = vToolbarRef.value?.contentHeight ?? 0;
|
|
const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
|
|
return height2 + extensionHeight;
|
|
});
|
|
const {
|
|
currentScroll,
|
|
scrollThreshold,
|
|
isScrollingUp,
|
|
scrollRatio,
|
|
isAtBottom,
|
|
reachedBottomWhileScrollingDown,
|
|
hasEnoughScrollableSpace
|
|
} = useScroll(props, {
|
|
canScroll,
|
|
layoutSize: appBarHeight
|
|
});
|
|
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 height2 = vToolbarRef.value?.contentHeight ?? 0;
|
|
const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
|
|
if (!canHide.value) return height2 + extensionHeight;
|
|
return currentScroll.value < scrollThreshold.value || scrollBehavior.value.fullyHide ? height2 + extensionHeight : height2;
|
|
});
|
|
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 = VToolbar.filterProps(props);
|
|
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 {};
|
|
}
|
|
});
|
|
|
|
// 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, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
useRender(() => createVNode(VBtn, mergeProps(props, {
|
|
"class": ["v-app-bar-nav-icon"]
|
|
}), slots));
|
|
return {};
|
|
}
|
|
});
|
|
|
|
// node_modules/vuetify/lib/components/VAppBar/VAppBarTitle.js
|
|
var VAppBarTitle = genericComponent()({
|
|
name: "VAppBarTitle",
|
|
props: makeVToolbarTitleProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
useRender(() => createVNode(VToolbarTitle, mergeProps(props, {
|
|
"class": "v-app-bar-title"
|
|
}), slots));
|
|
return {};
|
|
}
|
|
});
|
|
|
|
export {
|
|
VAppBar,
|
|
VAppBarNavIcon,
|
|
VAppBarTitle
|
|
};
|
|
//# sourceMappingURL=chunk-P6EQK5CJ.js.map
|