@opensig/opendesign/lib/avatar/OAvatarGroup.vue.js

"use strict";
const vue = require("vue");
const core = require("@vueuse/core");
const icons = require("../_utils/icons.js");
const types = require("./types.js");
const index = require("./index.js");
const utils = require("./utils.js");
const _hoisted_1 = {
  key: 0,
  class: "o-avatar-group-more-text"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "OAvatarGroup",
  props: types.avatarGroupProps,
  setup(__props) {
    const props = __props;
    const size = utils.normalizeSize(props.size);
    const total = vue.computed(() => props.urlList.length);
    const maxVisible = vue.computed(() => props.layout === "horizontal" ? 3 : 4);
    const displayedAvatars = vue.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 = vue.computed(() => Math.max(0, total.value - displayedAvatars.value.length));
    const overflowText = vue.computed(() => {
      if (props.overflowType === "count") {
        const count = overflowCount.value;
        return count > 99 ? "99+" : `+${count}`;
      }
      return null;
    });
    const [DefineMoreAvatar, ReuseMoreAvatar] = core.createReusableTemplate();
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: vue.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: vue.normalizeStyle({ "--avatar-size": vue.unref(size) })
        },
        [
          vue.createVNode(vue.unref(DefineMoreAvatar), null, {
            default: vue.withCtx(() => [
              overflowCount.value > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(index.OAvatar), {
                key: 0,
                size: props.size,
                class: "o-avatar-group-more",
                name: "_more"
              }, {
                name: vue.withCtx(() => [
                  vue.renderSlot(_ctx.$slots, "more", {}, () => [
                    overflowText.value ? (vue.openBlock(), vue.createElementBlock(
                      "span",
                      _hoisted_1,
                      vue.toDisplayString(overflowText.value),
                      1
                      /* TEXT */
                    )) : (vue.openBlock(), vue.createBlock(vue.unref(icons.IconEllipsis), { key: 1 }))
                  ])
                ]),
                _: 3
                /* FORWARDED */
              }, 8, ["size"])) : vue.createCommentVNode("v-if", true)
            ]),
            _: 3
            /* FORWARDED */
          }),
          props.layout === "horizontal" ? (vue.openBlock(), vue.createBlock(vue.unref(ReuseMoreAvatar), { key: 0 })) : vue.createCommentVNode("v-if", true),
          (vue.openBlock(true), vue.createElementBlock(
            vue.Fragment,
            null,
            vue.renderList(displayedAvatars.value, (item, index$1) => {
              return vue.openBlock(), vue.createBlock(vue.unref(index.OAvatar), {
                key: index$1,
                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" ? (vue.openBlock(), vue.createBlock(vue.unref(ReuseMoreAvatar), { key: 1 })) : vue.createCommentVNode("v-if", true)
        ],
        6
        /* CLASS, STYLE */
      );
    };
  }
});
module.exports = _sfc_main;