Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
package.lib.components.VAppBar.VAppBar.mjs Maven / Gradle / Ivy
import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
// Styles
import "./VAppBar.css";
// Components
import { makeVToolbarProps, VToolbar } from "../VToolbar/VToolbar.mjs"; // Composables
import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs";
import { useProxiedModel } from "../../composables/proxiedModel.mjs";
import { makeScrollProps, useScroll } from "../../composables/scroll.mjs";
import { useSsrBoot } from "../../composables/ssrBoot.mjs";
import { useToggleScope } from "../../composables/toggleScope.mjs"; // Utilities
import { computed, ref, shallowRef, toRef, watchEffect } from 'vue';
import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
export const 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');
export const 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 {
currentScroll,
scrollThreshold,
isScrollingUp,
scrollRatio
} = useScroll(props, {
canScroll
});
const canHide = computed(() => 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 : undefined);
const height = computed(() => {
const height = Number(vToolbarRef.value?.contentHeight ?? props.height);
const extensionHeight = Number(vToolbarRef.value?.extensionHeight ?? 0);
if (!canHide.value) return height + extensionHeight;
return currentScroll.value < scrollThreshold.value || scrollBehavior.value.fullyHide ? height + extensionHeight : height;
});
useToggleScope(computed(() => !!props.scrollBehavior), () => {
watchEffect(() => {
if (canHide.value) {
if (scrollBehavior.value.inverted) {
isActive.value = currentScroll.value > scrollThreshold.value;
} else {
isActive.value = isScrollingUp.value || currentScroll.value < scrollThreshold.value;
}
} else {
isActive.value = true;
}
});
});
const {
ssrBootStyles
} = useSsrBoot();
const {
layoutItemStyles,
layoutIsReady
} = useLayoutItem({
id: props.name,
order: computed(() => parseInt(props.order, 10)),
position: toRef(props, 'location'),
layoutSize: height,
elementSize: shallowRef(undefined),
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: undefined,
...ssrBootStyles.value
}, props.style]
}, toolbarProps, {
"collapse": isCollapsed.value,
"flat": isFlat.value
}), slots);
});
return layoutIsReady;
}
});
//# sourceMappingURL=VAppBar.mjs.map
