'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var elementPlus = require('element-plus');

"use strict";
const _hoisted_1 = { class: "me-avatar-group" };
const __default__ = vue.defineComponent({
  name: "me-avatar-group"
});
var script = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: {
    avatars: { type: Array, required: true },
    maxVisible: { type: Number, required: false, default: 4 },
    width: { type: String, required: false },
    spacing: { type: String, required: false },
    hover: { type: Boolean, required: false }
  },
  setup(__props) {
    const props = __props;
    const displayedAvatars = vue.computed(() => props.avatars.slice(0, props.maxVisible));
    console.log(displayedAvatars.value);
    const remainingAvatars = vue.computed(() => props.avatars.slice(props.maxVisible));
    const extraCount = vue.computed(() => Math.max(props.avatars.length - props.maxVisible, 0));
    const hasExtra = vue.computed(() => extraCount.value > 0);
    const avatarSizeStyle = vue.computed(() => {
      return {
        width: props.width,
        height: props.width,
        marginLeft: props.spacing
      };
    });
    const avatarStyle = (index) => {
      return {
        zIndex: props.avatars.length - index
      };
    };
    return (_ctx, _cache) => {
      const _component_avatar_group = vue.resolveComponent("avatar-group", true);
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        (vue.openBlock(true), vue.createElementBlock(
          vue.Fragment,
          null,
          vue.renderList(displayedAvatars.value, (avatar, index) => {
            return vue.openBlock(), vue.createElementBlock(
              "div",
              {
                key: index,
                class: "avatar",
                style: vue.normalizeStyle({ ...avatarStyle(index), ...avatarSizeStyle.value })
              },
              [
                vue.createVNode(vue.unref(elementPlus.ElTooltip), {
                  disabled: !__props.hover,
                  effect: "dark",
                  content: avatar.name || "",
                  placement: "bottom"
                }, {
                  default: vue.withCtx(() => [
                    vue.createVNode(vue.unref(elementPlus.ElAvatar), {
                      class: "avatar-img",
                      src: avatar.src
                    }, null, 8, ["src"])
                  ]),
                  _: 2
                  /* DYNAMIC */
                }, 1032, ["disabled", "content"])
              ],
              4
              /* STYLE */
            );
          }),
          128
          /* KEYED_FRAGMENT */
        )),
        hasExtra.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElPopover), {
          key: 0,
          disabled: !__props.hover,
          style: { "width": "fit-content" },
          placement: "bottom",
          trigger: "hover"
        }, {
          reference: vue.withCtx(() => [
            vue.createElementVNode(
              "div",
              {
                class: "avatar extra",
                style: vue.normalizeStyle(avatarSizeStyle.value)
              },
              [
                vue.createVNode(vue.unref(elementPlus.ElAvatar), { class: "avatar-img" }, {
                  default: vue.withCtx(() => [
                    vue.createTextVNode(
                      " +" + vue.toDisplayString(extraCount.value),
                      1
                      /* TEXT */
                    )
                  ]),
                  _: 1
                  /* STABLE */
                })
              ],
              4
              /* STYLE */
            )
          ]),
          default: vue.withCtx(() => [
            vue.createVNode(_component_avatar_group, { avatars: remainingAvatars.value }, null, 8, ["avatars"])
          ]),
          _: 1
          /* STABLE */
        }, 8, ["disabled"])) : vue.createCommentVNode("v-if", true)
      ]);
    };
  }
});

exports.default = script;
//# sourceMappingURL=avatar-group.vue2.js.map
