routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+175
@@ -0,0 +1,175 @@
|
||||
import { createVNode as _createVNode, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VToolbar.css";
|
||||
|
||||
// Components
|
||||
import { VToolbarTitle } from "./VToolbarTitle.js";
|
||||
import { VExpandTransition } from "../transitions/index.js";
|
||||
import { VDefaultsProvider } from "../VDefaultsProvider/index.js";
|
||||
import { VImg } from "../VImg/index.js"; // Composables
|
||||
import { makeBorderProps, useBorder } from "../../composables/border.js";
|
||||
import { useBackgroundColor } from "../../composables/color.js";
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { provideDefaults } from "../../composables/defaults.js";
|
||||
import { makeElevationProps, useElevation } from "../../composables/elevation.js";
|
||||
import { useRtl } from "../../composables/locale.js";
|
||||
import { makeLocationProps, useLocation } from "../../composables/location.js";
|
||||
import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
|
||||
import { makeTagProps } from "../../composables/tag.js";
|
||||
import { makeThemeProps, provideTheme } from "../../composables/theme.js"; // Utilities
|
||||
import { computed, shallowRef } from 'vue';
|
||||
import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
const allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'];
|
||||
export const makeVToolbarProps = propsFactory({
|
||||
absolute: Boolean,
|
||||
collapse: Boolean,
|
||||
collapsePosition: {
|
||||
type: String,
|
||||
default: 'start'
|
||||
},
|
||||
color: String,
|
||||
density: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
validator: v => allowedDensities.includes(v)
|
||||
},
|
||||
extended: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
extensionHeight: {
|
||||
type: [Number, String],
|
||||
default: 48
|
||||
},
|
||||
flat: Boolean,
|
||||
floating: Boolean,
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 64
|
||||
},
|
||||
image: String,
|
||||
title: String,
|
||||
...makeBorderProps(),
|
||||
...makeComponentProps(),
|
||||
...makeElevationProps(),
|
||||
...makeLocationProps(),
|
||||
...makeRoundedProps(),
|
||||
...makeTagProps({
|
||||
tag: 'header'
|
||||
}),
|
||||
...makeThemeProps()
|
||||
}, 'VToolbar');
|
||||
export const VToolbar = genericComponent()({
|
||||
name: 'VToolbar',
|
||||
props: makeVToolbarProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
backgroundColorClasses,
|
||||
backgroundColorStyles
|
||||
} = useBackgroundColor(() => props.color);
|
||||
const {
|
||||
borderClasses
|
||||
} = useBorder(props);
|
||||
const {
|
||||
elevationClasses
|
||||
} = useElevation(props);
|
||||
const {
|
||||
locationStyles
|
||||
} = useLocation(props);
|
||||
const {
|
||||
roundedClasses
|
||||
} = useRounded(props);
|
||||
const {
|
||||
themeClasses
|
||||
} = provideTheme(props);
|
||||
const {
|
||||
rtlClasses
|
||||
} = useRtl();
|
||||
const isExtended = shallowRef(props.extended === null ? !!slots.extension?.() : props.extended);
|
||||
const contentHeight = computed(() => parseInt(Number(props.height) + (props.density === 'prominent' ? Number(props.height) : 0) - (props.density === 'comfortable' ? 8 : 0) - (props.density === 'compact' ? 16 : 0), 10));
|
||||
const extensionHeight = computed(() => isExtended.value ? parseInt(Number(props.extensionHeight) + (props.density === 'prominent' ? Number(props.extensionHeight) : 0) - (props.density === 'comfortable' ? 4 : 0) - (props.density === 'compact' ? 8 : 0), 10) : 0);
|
||||
provideDefaults({
|
||||
VBtn: {
|
||||
variant: 'text'
|
||||
}
|
||||
});
|
||||
useRender(() => {
|
||||
const hasTitle = !!(props.title || slots.title);
|
||||
const hasImage = !!(slots.image || props.image);
|
||||
const extension = slots.extension?.();
|
||||
isExtended.value = props.extended === null ? !!extension : props.extended;
|
||||
return _createVNode(props.tag, {
|
||||
"class": _normalizeClass(['v-toolbar', `v-toolbar--collapse-${props.collapsePosition}`, {
|
||||
'v-toolbar--absolute': props.absolute,
|
||||
'v-toolbar--collapse': props.collapse,
|
||||
'v-toolbar--flat': props.flat,
|
||||
'v-toolbar--floating': props.floating,
|
||||
[`v-toolbar--density-${props.density}`]: true
|
||||
}, backgroundColorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, themeClasses.value, rtlClasses.value, props.class]),
|
||||
"style": _normalizeStyle([backgroundColorStyles.value, locationStyles.value, props.style])
|
||||
}, {
|
||||
default: () => [hasImage && _createElementVNode("div", {
|
||||
"key": "image",
|
||||
"class": "v-toolbar__image"
|
||||
}, [!slots.image ? _createVNode(VImg, {
|
||||
"key": "image-img",
|
||||
"cover": true,
|
||||
"src": props.image
|
||||
}, null) : _createVNode(VDefaultsProvider, {
|
||||
"key": "image-defaults",
|
||||
"disabled": !props.image,
|
||||
"defaults": {
|
||||
VImg: {
|
||||
cover: true,
|
||||
src: props.image
|
||||
}
|
||||
}
|
||||
}, slots.image)]), _createVNode(VDefaultsProvider, {
|
||||
"defaults": {
|
||||
VTabs: {
|
||||
height: convertToUnit(contentHeight.value)
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [_createElementVNode("div", {
|
||||
"class": "v-toolbar__content",
|
||||
"style": {
|
||||
height: convertToUnit(contentHeight.value)
|
||||
}
|
||||
}, [slots.prepend && _createElementVNode("div", {
|
||||
"class": "v-toolbar__prepend"
|
||||
}, [slots.prepend?.()]), hasTitle && _createVNode(VToolbarTitle, {
|
||||
"key": "title",
|
||||
"text": props.title
|
||||
}, {
|
||||
text: slots.title
|
||||
}), slots.default?.(), slots.append && _createElementVNode("div", {
|
||||
"class": "v-toolbar__append"
|
||||
}, [slots.append?.()])])]
|
||||
}), _createVNode(VDefaultsProvider, {
|
||||
"defaults": {
|
||||
VTabs: {
|
||||
height: convertToUnit(extensionHeight.value)
|
||||
}
|
||||
}
|
||||
}, {
|
||||
default: () => [_createVNode(VExpandTransition, null, {
|
||||
default: () => [isExtended.value && _createElementVNode("div", {
|
||||
"class": "v-toolbar__extension",
|
||||
"style": {
|
||||
height: convertToUnit(extensionHeight.value)
|
||||
}
|
||||
}, [extension])]
|
||||
})]
|
||||
})]
|
||||
});
|
||||
});
|
||||
return {
|
||||
contentHeight,
|
||||
extensionHeight
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VToolbar.js.map
|
||||
Reference in New Issue
Block a user