Group.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  3. import { createVNode as _createVNode } from "vue";
  4. import { cloneElement } from '../_util/vnode';
  5. import Avatar from './Avatar';
  6. import Popover from '../popover';
  7. import { defineComponent } from 'vue';
  8. import { flattenChildren, getPropsSlot } from '../_util/props-util';
  9. import useConfigInject from '../_util/hooks/useConfigInject';
  10. import useProvideSize from '../_util/hooks/useSize';
  11. export var groupProps = function groupProps() {
  12. return {
  13. prefixCls: String,
  14. maxCount: Number,
  15. maxStyle: {
  16. type: Object,
  17. default: undefined
  18. },
  19. maxPopoverPlacement: {
  20. type: String,
  21. default: 'top'
  22. },
  23. maxPopoverTrigger: String,
  24. /*
  25. * Size of avatar, options: `large`, `small`, `default`
  26. * or a custom number size
  27. * */
  28. size: {
  29. type: [Number, String, Object],
  30. default: 'default'
  31. }
  32. };
  33. };
  34. var Group = defineComponent({
  35. compatConfig: {
  36. MODE: 3
  37. },
  38. name: 'AAvatarGroup',
  39. inheritAttrs: false,
  40. props: groupProps(),
  41. setup: function setup(props, _ref) {
  42. var slots = _ref.slots,
  43. attrs = _ref.attrs;
  44. var _useConfigInject = useConfigInject('avatar-group', props),
  45. prefixCls = _useConfigInject.prefixCls,
  46. direction = _useConfigInject.direction;
  47. useProvideSize(props);
  48. return function () {
  49. var _cls;
  50. var _props$maxPopoverPlac = props.maxPopoverPlacement,
  51. maxPopoverPlacement = _props$maxPopoverPlac === void 0 ? 'top' : _props$maxPopoverPlac,
  52. maxCount = props.maxCount,
  53. maxStyle = props.maxStyle,
  54. _props$maxPopoverTrig = props.maxPopoverTrigger,
  55. maxPopoverTrigger = _props$maxPopoverTrig === void 0 ? 'hover' : _props$maxPopoverTrig;
  56. var cls = (_cls = {}, _defineProperty(_cls, prefixCls.value, true), _defineProperty(_cls, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), _defineProperty(_cls, "".concat(attrs.class), !!attrs.class), _cls);
  57. var children = getPropsSlot(slots, props);
  58. var childrenWithProps = flattenChildren(children).map(function (child, index) {
  59. return cloneElement(child, {
  60. key: "avatar-key-".concat(index)
  61. });
  62. });
  63. var numOfChildren = childrenWithProps.length;
  64. if (maxCount && maxCount < numOfChildren) {
  65. var childrenShow = childrenWithProps.slice(0, maxCount);
  66. var childrenHidden = childrenWithProps.slice(maxCount, numOfChildren);
  67. childrenShow.push(_createVNode(Popover, {
  68. "key": "avatar-popover-key",
  69. "content": childrenHidden,
  70. "trigger": maxPopoverTrigger,
  71. "placement": maxPopoverPlacement,
  72. "overlayClassName": "".concat(prefixCls.value, "-popover")
  73. }, {
  74. default: function _default() {
  75. return [_createVNode(Avatar, {
  76. "style": maxStyle
  77. }, {
  78. default: function _default() {
  79. return ["+".concat(numOfChildren - maxCount)];
  80. }
  81. })];
  82. }
  83. }));
  84. return _createVNode("div", _objectSpread(_objectSpread({}, attrs), {}, {
  85. "class": cls,
  86. "style": attrs.style
  87. }), [childrenShow]);
  88. }
  89. return _createVNode("div", _objectSpread(_objectSpread({}, attrs), {}, {
  90. "class": cls,
  91. "style": attrs.style
  92. }), [childrenWithProps]);
  93. };
  94. }
  95. });
  96. export default Group;