Major overhaul to the theme and now functioning.
This commit is contained in:
+643
@@ -0,0 +1,643 @@
|
||||
import {
|
||||
useSsrBoot
|
||||
} from "./chunk-PCKQGDLK.js";
|
||||
import {
|
||||
VImg
|
||||
} from "./chunk-6CRS5HI4.js";
|
||||
import {
|
||||
makeBorderProps,
|
||||
useBorder
|
||||
} from "./chunk-X7YBE6PF.js";
|
||||
import {
|
||||
makeElevationProps,
|
||||
useElevation
|
||||
} from "./chunk-YJD2PNP6.js";
|
||||
import {
|
||||
VDefaultsProvider
|
||||
} from "./chunk-VH7QIDM4.js";
|
||||
import {
|
||||
makeRoundedProps,
|
||||
useRounded
|
||||
} from "./chunk-AQK3CYVW.js";
|
||||
import {
|
||||
makeTagProps
|
||||
} from "./chunk-2HZIACSB.js";
|
||||
import {
|
||||
makeDelayProps,
|
||||
makeFocusTrapProps,
|
||||
useDelay,
|
||||
useFocusTrap,
|
||||
useScopeId
|
||||
} from "./chunk-BVUPSGRF.js";
|
||||
import {
|
||||
useRouter
|
||||
} from "./chunk-573D4TYC.js";
|
||||
import {
|
||||
makeDisplayProps,
|
||||
useDisplay
|
||||
} from "./chunk-N4LJHDYD.js";
|
||||
import {
|
||||
makeLayoutItemProps,
|
||||
useLayoutItem
|
||||
} from "./chunk-KQXZAEJP.js";
|
||||
import {
|
||||
useRtl
|
||||
} from "./chunk-ENTLCOCZ.js";
|
||||
import {
|
||||
useProxiedModel,
|
||||
useToggleScope
|
||||
} from "./chunk-KA77II4V.js";
|
||||
import {
|
||||
useBackgroundColor
|
||||
} from "./chunk-BHV5Z34M.js";
|
||||
import {
|
||||
makeThemeProps,
|
||||
provideTheme
|
||||
} from "./chunk-3DSR7NCB.js";
|
||||
import {
|
||||
CircularBuffer,
|
||||
clamp,
|
||||
convertToUnit,
|
||||
genericComponent,
|
||||
makeComponentProps,
|
||||
omit,
|
||||
propsFactory,
|
||||
provideDefaults,
|
||||
toPhysical,
|
||||
useRender
|
||||
} from "./chunk-LZ5T2ERG.js";
|
||||
import {
|
||||
Fragment,
|
||||
Transition,
|
||||
computed,
|
||||
createBaseVNode,
|
||||
createVNode,
|
||||
mergeProps,
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
onScopeDispose,
|
||||
readonly,
|
||||
ref,
|
||||
shallowRef,
|
||||
toRef,
|
||||
watch,
|
||||
watchEffect
|
||||
} from "./chunk-2MKFL3BX.js";
|
||||
|
||||
// node_modules/vuetify/lib/components/VNavigationDrawer/VNavigationDrawer.js
|
||||
import "/home/david/Documents/vscode/personal_development/ServerManagerWebApp/frontend/node_modules/vuetify/lib/components/VNavigationDrawer/VNavigationDrawer.css";
|
||||
|
||||
// node_modules/vuetify/lib/components/VNavigationDrawer/sticky.js
|
||||
function useSticky(_ref) {
|
||||
let {
|
||||
rootEl,
|
||||
isSticky,
|
||||
layoutItemStyles
|
||||
} = _ref;
|
||||
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
|
||||
};
|
||||
}
|
||||
|
||||
// node_modules/vuetify/lib/composables/touch.js
|
||||
var HORIZON = 100;
|
||||
var HISTORY = 20;
|
||||
function kineticEnergyToVelocity(work) {
|
||||
const sqrt2 = 1.41421356237;
|
||||
return (work < 0 ? -1 : 1) * Math.sqrt(Math.abs(work)) * sqrt2;
|
||||
}
|
||||
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 *= 0.5;
|
||||
}
|
||||
}
|
||||
return kineticEnergyToVelocity(work) * 1e3;
|
||||
}
|
||||
function useVelocity() {
|
||||
const touches = {};
|
||||
function addMovement(e) {
|
||||
Array.from(e.changedTouches).forEach((touch) => {
|
||||
const samples = touches[touch.identifier] ?? (touches[touch.identifier] = new CircularBuffer(HISTORY));
|
||||
samples.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: x2,
|
||||
y: y2
|
||||
} = this;
|
||||
const [absX, absY] = [Math.abs(x2), Math.abs(y2)];
|
||||
return absX > absY && x2 >= 0 ? "right" : absX > absY && x2 <= 0 ? "left" : absY > absX && y2 >= 0 ? "down" : absY > absX && y2 <= 0 ? "up" : oops();
|
||||
}
|
||||
};
|
||||
}
|
||||
return {
|
||||
addMovement,
|
||||
endTouch,
|
||||
getVelocity
|
||||
};
|
||||
}
|
||||
function oops() {
|
||||
throw new Error();
|
||||
}
|
||||
|
||||
// node_modules/vuetify/lib/components/VNavigationDrawer/touch.js
|
||||
function useTouch(_ref) {
|
||||
let {
|
||||
el,
|
||||
isActive,
|
||||
isTemporary,
|
||||
width,
|
||||
touchless,
|
||||
position
|
||||
} = _ref;
|
||||
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 : oops2()) - (active ? width.value : 0);
|
||||
}
|
||||
function getProgress(pos) {
|
||||
let limit = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 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 : oops2();
|
||||
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 : oops2();
|
||||
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 : oops2());
|
||||
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]);
|
||||
const thresholdMet = isHorizontal.value ? dx > dy && dx > 3 : dy > dx && dy > 3;
|
||||
if (thresholdMet) {
|
||||
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);
|
||||
const thresholdMet = isHorizontal.value ? vx > vy && vx > 400 : vy > vx && vy > 3;
|
||||
if (thresholdMet) {
|
||||
isActive.value = velocity.direction === ({
|
||||
left: "right",
|
||||
right: "left",
|
||||
top: "down",
|
||||
bottom: "up"
|
||||
}[position.value] || oops2());
|
||||
} else {
|
||||
isActive.value = dragProgress.value > 0.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))` : oops2(),
|
||||
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 oops2() {
|
||||
throw new Error();
|
||||
}
|
||||
|
||||
// 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, _ref) {
|
||||
let {
|
||||
attrs,
|
||||
emit,
|
||||
slots
|
||||
} = _ref;
|
||||
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(() => (
|
||||
// eslint-disable-next-line @typescript-eslint/no-use-before-define
|
||||
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 * 0.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
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
export {
|
||||
VNavigationDrawer
|
||||
};
|
||||
//# sourceMappingURL=chunk-7SKEB5LN.js.map
|
||||
Reference in New Issue
Block a user