Group.js 4.0 KB

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