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

Build full featured iOS & Android apps using ZMP & Vue

import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, mergeProps as _mergeProps, withCtx as _withCtx, createCommentVNode as _createCommentVNode } from "vue";

function render(_ctx, _cache) {
  var _component_Avatar = _resolveComponent("Avatar");

  return _openBlock(), _createBlock("div", _mergeProps(_ctx.$attrs, {
    class: _ctx.classes
  }), [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.dataToDisplay, function (_ref, index) {
    var props = _ref.props,
        children = _ref.children;
    return _openBlock(), _createBlock(_component_Avatar, _mergeProps(props, {
      class: "avatar-group-item",
      key: props.id || "avatar-" + index,
      story: false,
      online: false,
      size: "24"
    }), {
      default: _withCtx(function () {
        var _children$default$;

        return [_createTextVNode(_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 ? (_openBlock(), _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: _withCtx(function () {
      return [_createTextVNode("+" + _toDisplayString(_ctx.total - _ctx.maxCounter), 1)];
    }),
    _: 1
  })) : _createCommentVNode("", true)], 16);
}

import { computed } from 'vue';
import { classNames } from '../shared/utils';
import { DEFAULT_AVATAR_GROUP_COUNTER } from '../../common/constants';
import Avatar from './avatar';
export default {
  name: 'zmp-avatar-group',
  render: render,
  props: {
    maxCounter: {
      type: Number,
      default: DEFAULT_AVATAR_GROUP_COUNTER
    },
    horizontal: Boolean
  },
  emits: ['counterClick'],
  components: {
    Avatar: Avatar
  },
  setup: function setup(props, _ref2) {
    var slots = _ref2.slots;
    var maxCounter = computed(function () {
      return props.maxCounter < DEFAULT_AVATAR_GROUP_COUNTER ? DEFAULT_AVATAR_GROUP_COUNTER : props.maxCounter;
    });
    var horizontal = computed(function () {
      return maxCounter.value > DEFAULT_AVATAR_GROUP_COUNTER ? true : props.horizontal;
    });
    var childrens = computed(function () {
      return slots.default ? slots.default() : [];
    });
    var total = computed(function () {
      return childrens.value.length;
    });
    var dataToDisplay = computed(function () {
      return childrens.value.length ? childrens.value.slice(0, maxCounter.value) : [];
    });
    var classes = classNames('avatar-group', {
      'avatar-group-horizontal': horizontal.value
    });
    return {
      total: total,
      dataToDisplay: dataToDisplay,
      classes: classes
    };
  }
};