PageRenderTime 19ms CodeModel.GetById 22ms RepoModel.GetById 0ms app.codeStats 0ms

/frontend/node_modules/bootstrap-vue/esm/components/avatar/avatar.js

https://gitlab.com/sogeta_albazi/books-and-movies
JavaScript | 237 lines | 219 code | 13 blank | 5 comment | 39 complexity | 8fdbd1f1cdb438fd9b07f9d4cd0737b1 MD5 | raw file
  1. function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
  2. function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
  3. function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  4. import { Vue } from '../../vue';
  5. import { NAME_AVATAR } from '../../constants/components';
  6. import { EVENT_NAME_CLICK, EVENT_NAME_IMG_ERROR } from '../../constants/events';
  7. import { PROP_TYPE_BOOLEAN, PROP_TYPE_BOOLEAN_STRING, PROP_TYPE_NUMBER_STRING, PROP_TYPE_STRING } from '../../constants/props';
  8. import { SLOT_NAME_BADGE } from '../../constants/slots';
  9. import { isNumber, isNumeric, isString } from '../../utils/inspect';
  10. import { toFloat } from '../../utils/number';
  11. import { omit, sortKeys } from '../../utils/object';
  12. import { makeProp, makePropsConfigurable, pluckProps } from '../../utils/props';
  13. import { isLink } from '../../utils/router';
  14. import { normalizeSlotMixin } from '../../mixins/normalize-slot';
  15. import { BIcon } from '../../icons/icon';
  16. import { BIconPersonFill } from '../../icons/icons';
  17. import { BButton } from '../button/button';
  18. import { BLink, props as BLinkProps } from '../link/link'; // --- Constants ---
  19. var CLASS_NAME = 'b-avatar';
  20. var SIZES = ['sm', null, 'lg'];
  21. var FONT_SIZE_SCALE = 0.4;
  22. var BADGE_FONT_SIZE_SCALE = FONT_SIZE_SCALE * 0.7; // --- Helper methods ---
  23. export var computeSize = function computeSize(value) {
  24. // Parse to number when value is a float-like string
  25. value = isString(value) && isNumeric(value) ? toFloat(value, 0) : value; // Convert all numbers to pixel values
  26. return isNumber(value) ? "".concat(value, "px") : value || null;
  27. }; // --- Props ---
  28. var linkProps = omit(BLinkProps, ['active', 'event', 'routerTag']);
  29. export var props = makePropsConfigurable(sortKeys(_objectSpread(_objectSpread({}, linkProps), {}, {
  30. alt: makeProp(PROP_TYPE_STRING, 'avatar'),
  31. ariaLabel: makeProp(PROP_TYPE_STRING),
  32. badge: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
  33. badgeLeft: makeProp(PROP_TYPE_BOOLEAN, false),
  34. badgeOffset: makeProp(PROP_TYPE_STRING),
  35. badgeTop: makeProp(PROP_TYPE_BOOLEAN, false),
  36. badgeVariant: makeProp(PROP_TYPE_STRING, 'primary'),
  37. button: makeProp(PROP_TYPE_BOOLEAN, false),
  38. buttonType: makeProp(PROP_TYPE_STRING, 'button'),
  39. icon: makeProp(PROP_TYPE_STRING),
  40. rounded: makeProp(PROP_TYPE_BOOLEAN_STRING, false),
  41. size: makeProp(PROP_TYPE_NUMBER_STRING),
  42. square: makeProp(PROP_TYPE_BOOLEAN, false),
  43. src: makeProp(PROP_TYPE_STRING),
  44. text: makeProp(PROP_TYPE_STRING),
  45. variant: makeProp(PROP_TYPE_STRING, 'secondary')
  46. })), NAME_AVATAR); // --- Main component ---
  47. // @vue/component
  48. export var BAvatar = /*#__PURE__*/Vue.extend({
  49. name: NAME_AVATAR,
  50. mixins: [normalizeSlotMixin],
  51. inject: {
  52. bvAvatarGroup: {
  53. default: null
  54. }
  55. },
  56. props: props,
  57. data: function data() {
  58. return {
  59. localSrc: this.src || null
  60. };
  61. },
  62. computed: {
  63. computedSize: function computedSize() {
  64. // Always use the avatar group size
  65. var bvAvatarGroup = this.bvAvatarGroup;
  66. return computeSize(bvAvatarGroup ? bvAvatarGroup.size : this.size);
  67. },
  68. computedVariant: function computedVariant() {
  69. var bvAvatarGroup = this.bvAvatarGroup;
  70. return bvAvatarGroup && bvAvatarGroup.variant ? bvAvatarGroup.variant : this.variant;
  71. },
  72. computedRounded: function computedRounded() {
  73. var bvAvatarGroup = this.bvAvatarGroup;
  74. var square = bvAvatarGroup && bvAvatarGroup.square ? true : this.square;
  75. var rounded = bvAvatarGroup && bvAvatarGroup.rounded ? bvAvatarGroup.rounded : this.rounded;
  76. return square ? '0' : rounded === '' ? true : rounded || 'circle';
  77. },
  78. fontStyle: function fontStyle() {
  79. var size = this.computedSize;
  80. var fontSize = SIZES.indexOf(size) === -1 ? "calc(".concat(size, " * ").concat(FONT_SIZE_SCALE, ")") : null;
  81. return fontSize ? {
  82. fontSize: fontSize
  83. } : {};
  84. },
  85. marginStyle: function marginStyle() {
  86. var size = this.computedSize,
  87. bvAvatarGroup = this.bvAvatarGroup;
  88. var overlapScale = bvAvatarGroup ? bvAvatarGroup.overlapScale : 0;
  89. var value = size && overlapScale ? "calc(".concat(size, " * -").concat(overlapScale, ")") : null;
  90. return value ? {
  91. marginLeft: value,
  92. marginRight: value
  93. } : {};
  94. },
  95. badgeStyle: function badgeStyle() {
  96. var size = this.computedSize,
  97. badgeTop = this.badgeTop,
  98. badgeLeft = this.badgeLeft,
  99. badgeOffset = this.badgeOffset;
  100. var offset = badgeOffset || '0px';
  101. return {
  102. fontSize: SIZES.indexOf(size) === -1 ? "calc(".concat(size, " * ").concat(BADGE_FONT_SIZE_SCALE, " )") : null,
  103. top: badgeTop ? offset : null,
  104. bottom: badgeTop ? null : offset,
  105. left: badgeLeft ? offset : null,
  106. right: badgeLeft ? null : offset
  107. };
  108. }
  109. },
  110. watch: {
  111. src: function src(newValue, oldValue) {
  112. if (newValue !== oldValue) {
  113. this.localSrc = newValue || null;
  114. }
  115. }
  116. },
  117. methods: {
  118. onImgError: function onImgError(event) {
  119. this.localSrc = null;
  120. this.$emit(EVENT_NAME_IMG_ERROR, event);
  121. },
  122. onClick: function onClick(event) {
  123. this.$emit(EVENT_NAME_CLICK, event);
  124. }
  125. },
  126. render: function render(h) {
  127. var _class2;
  128. var variant = this.computedVariant,
  129. disabled = this.disabled,
  130. rounded = this.computedRounded,
  131. icon = this.icon,
  132. src = this.localSrc,
  133. text = this.text,
  134. fontStyle = this.fontStyle,
  135. marginStyle = this.marginStyle,
  136. size = this.computedSize,
  137. button = this.button,
  138. type = this.buttonType,
  139. badge = this.badge,
  140. badgeVariant = this.badgeVariant,
  141. badgeStyle = this.badgeStyle;
  142. var link = !button && isLink(this);
  143. var tag = button ? BButton : link ? BLink : 'span';
  144. var alt = this.alt;
  145. var ariaLabel = this.ariaLabel || null;
  146. var $content = null;
  147. if (this.hasNormalizedSlot()) {
  148. // Default slot overrides props
  149. $content = h('span', {
  150. staticClass: 'b-avatar-custom'
  151. }, [this.normalizeSlot()]);
  152. } else if (src) {
  153. $content = h('img', {
  154. style: variant ? {} : {
  155. width: '100%',
  156. height: '100%'
  157. },
  158. attrs: {
  159. src: src,
  160. alt: alt
  161. },
  162. on: {
  163. error: this.onImgError
  164. }
  165. });
  166. $content = h('span', {
  167. staticClass: 'b-avatar-img'
  168. }, [$content]);
  169. } else if (icon) {
  170. $content = h(BIcon, {
  171. props: {
  172. icon: icon
  173. },
  174. attrs: {
  175. 'aria-hidden': 'true',
  176. alt: alt
  177. }
  178. });
  179. } else if (text) {
  180. $content = h('span', {
  181. staticClass: 'b-avatar-text',
  182. style: fontStyle
  183. }, [h('span', text)]);
  184. } else {
  185. // Fallback default avatar content
  186. $content = h(BIconPersonFill, {
  187. attrs: {
  188. 'aria-hidden': 'true',
  189. alt: alt
  190. }
  191. });
  192. }
  193. var $badge = h();
  194. var hasBadgeSlot = this.hasNormalizedSlot(SLOT_NAME_BADGE);
  195. if (badge || badge === '' || hasBadgeSlot) {
  196. var badgeText = badge === true ? '' : badge;
  197. $badge = h('span', {
  198. staticClass: 'b-avatar-badge',
  199. class: _defineProperty({}, "badge-".concat(badgeVariant), badgeVariant),
  200. style: badgeStyle
  201. }, [hasBadgeSlot ? this.normalizeSlot(SLOT_NAME_BADGE) : badgeText]);
  202. }
  203. var componentData = {
  204. staticClass: CLASS_NAME,
  205. class: (_class2 = {}, _defineProperty(_class2, "".concat(CLASS_NAME, "-").concat(size), size && SIZES.indexOf(size) !== -1), _defineProperty(_class2, "badge-".concat(variant), !button && variant), _defineProperty(_class2, "rounded", rounded === true), _defineProperty(_class2, "rounded-".concat(rounded), rounded && rounded !== true), _defineProperty(_class2, "disabled", disabled), _class2),
  206. style: _objectSpread(_objectSpread({}, marginStyle), {}, {
  207. width: size,
  208. height: size
  209. }),
  210. attrs: {
  211. 'aria-label': ariaLabel || null
  212. },
  213. props: button ? {
  214. variant: variant,
  215. disabled: disabled,
  216. type: type
  217. } : link ? pluckProps(linkProps, this) : {},
  218. on: button || link ? {
  219. click: this.onClick
  220. } : {}
  221. };
  222. return h(tag, componentData, [$content, $badge]);
  223. }
  224. });