92 lines
2.8 KiB
JavaScript
92 lines
2.8 KiB
JavaScript
|
import { createVNode as _createVNode } from "vue";
|
||
|
|
// Styles
|
||
|
|
import "./VAvatar.css";
|
||
|
|
|
||
|
|
// Components
|
||
|
|
import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
|
||
|
|
import { VIcon } from "../VIcon/index.mjs";
|
||
|
|
import { VImg } from "../VImg/index.mjs"; // Composables
|
||
|
|
import { makeComponentProps } from "../../composables/component.mjs";
|
||
|
|
import { makeDensityProps, useDensity } from "../../composables/density.mjs";
|
||
|
|
import { IconValue } from "../../composables/icons.mjs";
|
||
|
|
import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
|
||
|
|
import { makeSizeProps, useSize } from "../../composables/size.mjs";
|
||
|
|
import { makeTagProps } from "../../composables/tag.mjs";
|
||
|
|
import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
|
||
|
|
import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.mjs"; // Utilities
|
||
|
|
import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
|
||
|
|
export const makeVAvatarProps = propsFactory({
|
||
|
|
start: Boolean,
|
||
|
|
end: Boolean,
|
||
|
|
icon: IconValue,
|
||
|
|
image: String,
|
||
|
|
text: String,
|
||
|
|
...makeComponentProps(),
|
||
|
|
...makeDensityProps(),
|
||
|
|
...makeRoundedProps(),
|
||
|
|
...makeSizeProps(),
|
||
|
|
...makeTagProps(),
|
||
|
|
...makeThemeProps(),
|
||
|
|
...makeVariantProps({
|
||
|
|
variant: 'flat'
|
||
|
|
})
|
||
|
|
}, 'VAvatar');
|
||
|
|
export const VAvatar = genericComponent()({
|
||
|
|
name: 'VAvatar',
|
||
|
|
props: makeVAvatarProps(),
|
||
|
|
setup(props, _ref) {
|
||
|
|
let {
|
||
|
|
slots
|
||
|
|
} = _ref;
|
||
|
|
const {
|
||
|
|
themeClasses
|
||
|
|
} = provideTheme(props);
|
||
|
|
const {
|
||
|
|
colorClasses,
|
||
|
|
colorStyles,
|
||
|
|
variantClasses
|
||
|
|
} = useVariant(props);
|
||
|
|
const {
|
||
|
|
densityClasses
|
||
|
|
} = useDensity(props);
|
||
|
|
const {
|
||
|
|
roundedClasses
|
||
|
|
} = useRounded(props);
|
||
|
|
const {
|
||
|
|
sizeClasses,
|
||
|
|
sizeStyles
|
||
|
|
} = useSize(props);
|
||
|
|
useRender(() => _createVNode(props.tag, {
|
||
|
|
"class": ['v-avatar', {
|
||
|
|
'v-avatar--start': props.start,
|
||
|
|
'v-avatar--end': props.end
|
||
|
|
}, themeClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
|
||
|
|
"style": [colorStyles.value, sizeStyles.value, props.style]
|
||
|
|
}, {
|
||
|
|
default: () => [!slots.default ? props.image ? _createVNode(VImg, {
|
||
|
|
"key": "image",
|
||
|
|
"src": props.image,
|
||
|
|
"alt": "",
|
||
|
|
"cover": true
|
||
|
|
}, null) : props.icon ? _createVNode(VIcon, {
|
||
|
|
"key": "icon",
|
||
|
|
"icon": props.icon
|
||
|
|
}, null) : props.text : _createVNode(VDefaultsProvider, {
|
||
|
|
"key": "content-defaults",
|
||
|
|
"defaults": {
|
||
|
|
VImg: {
|
||
|
|
cover: true,
|
||
|
|
image: props.image
|
||
|
|
},
|
||
|
|
VIcon: {
|
||
|
|
icon: props.icon
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
default: () => [slots.default()]
|
||
|
|
}), genOverlays(false, 'v-avatar')]
|
||
|
|
}));
|
||
|
|
return {};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//# sourceMappingURL=VAvatar.mjs.map
|