zmp-vue/cjs/zalo-ui-kits/avatar-group.js

Build full featured iOS & Android apps using ZMP & Vue

"use strict";

exports.__esModule = true;
exports.default = void 0;

var _vue = require("vue");

var _utils = require("../shared/utils");

var _constants = require("../../common/constants");

var _avatar = _interopRequireDefault(require("./avatar"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function render(_ctx, _cache) {
  var _component_Avatar = (0, _vue.resolveComponent)("Avatar");

  return (0, _vue.openBlock)(), (0, _vue.createBlock)("div", (0, _vue.mergeProps)(_ctx.$attrs, {
    class: _ctx.classes
  }), [((0, _vue.openBlock)(true), (0, _vue.createBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.dataToDisplay, function (_ref, index) {
    var props = _ref.props,
        children = _ref.children;
    return (0, _vue.openBlock)(), (0, _vue.createBlock)(_component_Avatar, (0, _vue.mergeProps)(props, {
      class: "avatar-group-item",
      key: props.id || "avatar-" + index,
      story: false,
      online: false,
      size: "24"
    }), {
      default: (0, _vue.withCtx)(function () {
        var _children$default$;

        return [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(children == null ? void 0 : children.default == null ? void 0 : (_children$default$ = children.default()[0]) == null ? void 0 : _children$default$.children), 1)];
      }),
      _: 2
    }, 1040);
  }), 128)), _ctx.total > _ctx.maxCounter ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_Avatar, {
    key: 0,
    onClick: _cache[1] || (_cache[1] = function ($event) {
      return _ctx.$emit('counterClick');
    }),
    class: "avatar-group-item avatar-max-counter",
    size: "24"
  }, {
    default: (0, _vue.withCtx)(function () {
      return [(0, _vue.createTextVNode)("+" + (0, _vue.toDisplayString)(_ctx.total - _ctx.maxCounter), 1)];
    }),
    _: 1
  })) : (0, _vue.createCommentVNode)("", true)], 16);
}

var _default = {
  name: 'zmp-avatar-group',
  render: render,
  props: {
    maxCounter: {
      type: Number,
      default: _constants.DEFAULT_AVATAR_GROUP_COUNTER
    },
    horizontal: Boolean
  },
  emits: ['counterClick'],
  components: {
    Avatar: _avatar.default
  },
  setup: function setup(props, _ref2) {
    var slots = _ref2.slots;
    var maxCounter = (0, _vue.computed)(function () {
      return props.maxCounter < _constants.DEFAULT_AVATAR_GROUP_COUNTER ? _constants.DEFAULT_AVATAR_GROUP_COUNTER : props.maxCounter;
    });
    var horizontal = (0, _vue.computed)(function () {
      return maxCounter.value > _constants.DEFAULT_AVATAR_GROUP_COUNTER ? true : props.horizontal;
    });
    var childrens = (0, _vue.computed)(function () {
      return slots.default ? slots.default() : [];
    });
    var total = (0, _vue.computed)(function () {
      return childrens.value.length;
    });
    var dataToDisplay = (0, _vue.computed)(function () {
      return childrens.value.length ? childrens.value.slice(0, maxCounter.value) : [];
    });
    var classes = (0, _utils.classNames)('avatar-group', {
      'avatar-group-horizontal': horizontal.value
    });
    return {
      total: total,
      dataToDisplay: dataToDisplay,
      classes: classes
    };
  }
};
exports.default = _default;