VAvatar.mjs 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. import { createVNode as _createVNode } from "vue";
  2. // Styles
  3. import "./VAvatar.css";
  4. // Components
  5. import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
  6. import { VIcon } from "../VIcon/index.mjs";
  7. import { VImg } from "../VImg/index.mjs"; // Composables
  8. import { makeBorderProps, useBorder } from "../../composables/border.mjs";
  9. import { makeComponentProps } from "../../composables/component.mjs";
  10. import { makeDensityProps, useDensity } from "../../composables/density.mjs";
  11. import { IconValue } from "../../composables/icons.mjs";
  12. import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
  13. import { makeSizeProps, useSize } from "../../composables/size.mjs";
  14. import { makeTagProps } from "../../composables/tag.mjs";
  15. import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
  16. import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.mjs"; // Utilities
  17. import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
  18. export const makeVAvatarProps = propsFactory({
  19. start: Boolean,
  20. end: Boolean,
  21. icon: IconValue,
  22. image: String,
  23. text: String,
  24. ...makeBorderProps(),
  25. ...makeComponentProps(),
  26. ...makeDensityProps(),
  27. ...makeRoundedProps(),
  28. ...makeSizeProps(),
  29. ...makeTagProps(),
  30. ...makeThemeProps(),
  31. ...makeVariantProps({
  32. variant: 'flat'
  33. })
  34. }, 'VAvatar');
  35. export const VAvatar = genericComponent()({
  36. name: 'VAvatar',
  37. props: makeVAvatarProps(),
  38. setup(props, _ref) {
  39. let {
  40. slots
  41. } = _ref;
  42. const {
  43. themeClasses
  44. } = provideTheme(props);
  45. const {
  46. borderClasses
  47. } = useBorder(props);
  48. const {
  49. colorClasses,
  50. colorStyles,
  51. variantClasses
  52. } = useVariant(props);
  53. const {
  54. densityClasses
  55. } = useDensity(props);
  56. const {
  57. roundedClasses
  58. } = useRounded(props);
  59. const {
  60. sizeClasses,
  61. sizeStyles
  62. } = useSize(props);
  63. useRender(() => _createVNode(props.tag, {
  64. "class": ['v-avatar', {
  65. 'v-avatar--start': props.start,
  66. 'v-avatar--end': props.end
  67. }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
  68. "style": [colorStyles.value, sizeStyles.value, props.style]
  69. }, {
  70. default: () => [!slots.default ? props.image ? _createVNode(VImg, {
  71. "key": "image",
  72. "src": props.image,
  73. "alt": "",
  74. "cover": true
  75. }, null) : props.icon ? _createVNode(VIcon, {
  76. "key": "icon",
  77. "icon": props.icon
  78. }, null) : props.text : _createVNode(VDefaultsProvider, {
  79. "key": "content-defaults",
  80. "defaults": {
  81. VImg: {
  82. cover: true,
  83. src: props.image
  84. },
  85. VIcon: {
  86. icon: props.icon
  87. }
  88. }
  89. }, {
  90. default: () => [slots.default()]
  91. }), genOverlays(false, 'v-avatar')]
  92. }));
  93. return {};
  94. }
  95. });
  96. //# sourceMappingURL=VAvatar.mjs.map