@opensig/opendesign/es/avatar/OAvatarGroup.vue.mjs

import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createVNode, createBlock, createCommentVNode, withCtx, renderSlot, toDisplayString, Fragment, renderList } from "vue";
import { createReusableTemplate } from "@vueuse/core";
import { IconEllipsis } from "../_utils/icons.mjs";
import { avatarGroupProps } from "./types.mjs";
import { OAvatar } from "./index.mjs";
import { normalizeSize } from "./utils.mjs";
const _hoisted_1 = {
  key: 0,
  class: "o-avatar-group-more-text"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "OAvatarGroup",
  props: avatarGroupProps,
  setup(__props) {
    const props = __props;
    const size = normalizeSize(props.size);
    const total = computed(() => props.urlList.length);
    const maxVisible = computed(() => props.layout === "horizontal" ? 3 : 4);
    const displayedAvatars = computed(() => {
      let list = props.urlList.length > maxVisible.value ? props.urlList.slice(0, maxVisible.value - 1) : [...props.urlList];
      if (props.layout === "horizontal") {
        list.reverse();
      }
      return list;
    });
    const overflowCount = computed(() => Math.max(0, total.value - displayedAvatars.value.length));
    const overflowText = computed(() => {
      if (props.overflowType === "count") {
        const count = overflowCount.value;
        return count > 99 ? "99+" : `+${count}`;
      }
      return null;
    });
    const [DefineMoreAvatar, ReuseMoreAvatar] = createReusableTemplate();
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(["o-avatar-group", [
            props.layout === "horizontal" ? "o-avatar-group-horizontal" : "o-avatar-group-symmetric",
            {
              "o-avatar-group-single": total.value < 2,
              "o-avatar-group-triangle": total.value === 3
            }
          ]]),
          style: normalizeStyle({ "--avatar-size": unref(size) })
        },
        [
          createVNode(unref(DefineMoreAvatar), null, {
            default: withCtx(() => [
              overflowCount.value > 0 ? (openBlock(), createBlock(unref(OAvatar), {
                key: 0,
                size: props.size,
                class: "o-avatar-group-more",
                name: "_more"
              }, {
                name: withCtx(() => [
                  renderSlot(_ctx.$slots, "more", {}, () => [
                    overflowText.value ? (openBlock(), createElementBlock(
                      "span",
                      _hoisted_1,
                      toDisplayString(overflowText.value),
                      1
                      /* TEXT */
                    )) : (openBlock(), createBlock(unref(IconEllipsis), { key: 1 }))
                  ])
                ]),
                _: 3
                /* FORWARDED */
              }, 8, ["size"])) : createCommentVNode("v-if", true)
            ]),
            _: 3
            /* FORWARDED */
          }),
          props.layout === "horizontal" ? (openBlock(), createBlock(unref(ReuseMoreAvatar), { key: 0 })) : createCommentVNode("v-if", true),
          (openBlock(true), createElementBlock(
            Fragment,
            null,
            renderList(displayedAvatars.value, (item, index) => {
              return openBlock(), createBlock(unref(OAvatar), {
                key: index,
                url: item.url,
                name: item.name,
                background: item.background,
                size: props.size,
                "name-formatter": props.nameFormatter,
                "object-fit": props.objectFit
              }, null, 8, ["url", "name", "background", "size", "name-formatter", "object-fit"]);
            }),
            128
            /* KEYED_FRAGMENT */
          )),
          props.layout === "symmetric" ? (openBlock(), createBlock(unref(ReuseMoreAvatar), { key: 1 })) : createCommentVNode("v-if", true)
        ],
        6
        /* CLASS, STYLE */
      );
    };
  }
});
export {
  _sfc_main as default
};