vuetify
Version:
Vue Material Component Framework
83 lines (82 loc) • 2.51 kB
JavaScript
import { createVNode as _createVNode, mergeProps as _mergeProps, resolveDirective as _resolveDirective } from "vue";
// Styles
import "./VAppBar.css";
// Components
import { filterToolbarProps, makeVToolbarProps, VToolbar } from "../VToolbar/VToolbar.mjs"; // Composables
import { makeLayoutItemProps, useLayoutItem } from "../../composables/layout.mjs";
import { useProxiedModel } from "../../composables/proxiedModel.mjs";
import { useSsrBoot } from "../../composables/ssrBoot.mjs"; // Utilities
import { computed, ref, toRef } from 'vue';
import { genericComponent, useRender } from "../../util/index.mjs"; // Types
export const VAppBar = genericComponent()({
name: 'VAppBar',
props: {
// TODO: Implement scrolling techniques
// hideOnScroll: Boolean
// invertedScroll: Boolean
// collapseOnScroll: Boolean
// elevateOnScroll: Boolean
// shrinkOnScroll: Boolean
// fadeImageOnScroll: Boolean
modelValue: {
type: Boolean,
default: true
},
location: {
type: String,
default: 'top',
validator: value => ['top', 'bottom'].includes(value)
},
...makeVToolbarProps(),
...makeLayoutItemProps(),
height: {
type: [Number, String],
default: 64
}
},
emits: {
'update:modelValue': value => true
},
setup(props, _ref) {
let {
slots
} = _ref;
const vToolbarRef = ref();
const isActive = useProxiedModel(props, 'modelValue');
const height = computed(() => {
const height = vToolbarRef.value?.contentHeight ?? 0;
const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
return height + extensionHeight;
});
const {
ssrBootStyles
} = useSsrBoot();
const {
layoutItemStyles
} = useLayoutItem({
id: props.name,
order: computed(() => parseInt(props.order, 10)),
position: toRef(props, 'location'),
layoutSize: height,
elementSize: height,
active: isActive,
absolute: toRef(props, 'absolute')
});
useRender(() => {
const [toolbarProps] = filterToolbarProps(props);
return _createVNode(VToolbar, _mergeProps({
"ref": vToolbarRef,
"class": ['v-app-bar', {
'v-app-bar--bottom': props.location === 'bottom'
}],
"style": {
...layoutItemStyles.value,
height: undefined,
...ssrBootStyles.value
}
}, toolbarProps), slots);
});
return {};
}
});
//# sourceMappingURL=VAppBar.mjs.map