Major overhaul to the theme and now functioning.
This commit is contained in:
+360
@@ -0,0 +1,360 @@
|
||||
import {
|
||||
VToolbar,
|
||||
VToolbarTitle,
|
||||
makeVToolbarProps,
|
||||
makeVToolbarTitleProps
|
||||
} from "./chunk-LPZZJ62X.js";
|
||||
import {
|
||||
VBtn,
|
||||
makeVBtnProps
|
||||
} from "./chunk-QC7VWQER.js";
|
||||
import {
|
||||
useSsrBoot
|
||||
} from "./chunk-PCKQGDLK.js";
|
||||
import {
|
||||
makeLayoutItemProps,
|
||||
useLayoutItem
|
||||
} from "./chunk-KQXZAEJP.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/Documents/vscode/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-BXEVD6W6.js.map
|
||||
Reference in New Issue
Block a user