import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, Fragment, renderList, normalizeStyle, createVNode, unref, withCtx, createBlock, createElementVNode, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
import { ElTooltip, ElAvatar, ElPopover } from 'element-plus';

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

export { script as default };
//# sourceMappingURL=avatar-group.vue2.mjs.map
