yuang-framework-ui-pc/es/ele-avatar-group/index.js

yuang-framework-ui-pc Library

import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createBlock, normalizeStyle, withCtx, renderSlot, createCommentVNode, mergeProps, createVNode, createElementVNode, toDisplayString } from "vue";
import { ElAvatar } from "element-plus";
import EleTooltip from "../ele-tooltip/index";
import { avatarGroupProps, avatarGroupEmits } from "./props";
const _sfc_main = defineComponent({
  name: "EleAvatarGroup",
  components: { ElAvatar, EleTooltip },
  props: avatarGroupProps,
  emits: avatarGroupEmits,
  setup(props, { emit }) {
    const tooltipContent = ref("");
    const virtualRef = ref();
    const overflowVisible = ref(false);
    const commonStyle = computed(() => {
      if (props.size == null || typeof props.size === "string") {
        const obj = { large: "-12px", default: "-10px", small: "-8px" };
        return { marginLeft: props.size ? obj[props.size] : "-10px" };
      }
      if (typeof props.size === "number" && props.size >= 0) {
        return { marginLeft: `${-Math.round(props.size / 3)}px` };
      }
      return {};
    });
    const isOverflow = computed(() => {
      return props.maxCount != null && props.maxCount > 0 && props.data != null && props.data.length > props.maxCount;
    });
    const avatarData = computed(() => {
      if (props.data == null) {
        return [];
      }
      return isOverflow.value ? props.data.slice(0, props.maxCount) : props.data;
    });
    const overflowCount = computed(() => {
      if (!isOverflow.value || !props.data || props.maxCount == null) {
        return 0;
      }
      return props.data.length - props.maxCount;
    });
    const overflowData = computed(() => {
      if (props.data == null || !isOverflow.value) {
        return [];
      }
      return props.data.slice(props.maxCount);
    });
    const handleItemHover = (item, e) => {
      if (props.tooltip && item.label) {
        virtualRef.value = e.currentTarget;
        tooltipContent.value = item.label;
      }
    };
    const handleItemClick = (item) => {
      emit("itemClick", item);
    };
    const handleMoreClick = () => {
      emit("moreClick");
    };
    const handleError = (option) => {
      emit("error", option);
    };
    return {
      tooltipContent,
      virtualRef,
      overflowVisible,
      commonStyle,
      isOverflow,
      avatarData,
      overflowCount,
      overflowData,
      handleItemHover,
      handleItemClick,
      handleMoreClick,
      handleError
    };
  }
});
const _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = { class: "ele-avatar-more-inner" };
const _hoisted_2 = {
  key: 0,
  class: "ele-popover-body ele-avatar-group"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ElAvatar = resolveComponent("ElAvatar");
  const _component_EleTooltip = resolveComponent("EleTooltip");
  return openBlock(), createElementBlock("div", {
    class: normalizeClass(["ele-avatar-group", { "is-hover-open": _ctx.hoverOpen }])
  }, [
    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.avatarData, (item, index2) => {
      return openBlock(), createBlock(_component_ElAvatar, {
        key: item.key ?? index2 + "-" + (item.value || item.label),
        size: _ctx.size,
        shape: _ctx.shape,
        src: item.value,
        style: normalizeStyle([_ctx.commonStyle, _ctx.itemStyle, _ctx.avatarStyle]),
        onClick: ($event) => _ctx.handleItemClick(item),
        onError: (e) => _ctx.handleError({ item, e }),
        onMouseover: (e) => _ctx.handleItemHover(item, e)
      }, {
        default: withCtx(() => [
          _ctx.$slots.item ? renderSlot(_ctx.$slots, "item", {
            key: 0,
            item
          }) : createCommentVNode("", true)
        ]),
        _: 2
      }, 1032, ["size", "shape", "src", "style", "onClick", "onError", "onMouseover"]);
    }), 128)),
    _ctx.isOverflow ? (openBlock(), createBlock(_component_EleTooltip, mergeProps({
      key: 0,
      effect: "light",
      isPopover: true,
      gpuAcceleration: true,
      placement: "top",
      popperClass: "ele-avatar-popover",
      offset: 6
    }, _ctx.overflowPopoverProps || {}, {
      disabled: !_ctx.overflowPopover,
      visible: _ctx.overflowVisible,
      "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => _ctx.overflowVisible = $event)
    }), {
      body: withCtx(() => [
        _ctx.overflowPopover ? (openBlock(), createElementBlock("div", _hoisted_2, [
          renderSlot(_ctx.$slots, "overflow", { overflowData: _ctx.overflowData }, () => [
            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.overflowData, (item, index2) => {
              return openBlock(), createBlock(_component_ElAvatar, {
                key: item.key ?? index2 + "-" + (item.value || item.label),
                size: _ctx.size,
                shape: _ctx.shape,
                src: item.value,
                style: normalizeStyle([_ctx.commonStyle, _ctx.itemStyle, _ctx.avatarStyle]),
                onClick: ($event) => _ctx.handleItemClick(item),
                onError: (e) => _ctx.handleError({ item, e }),
                onMouseover: (e) => _ctx.handleItemHover(item, e)
              }, {
                default: withCtx(() => [
                  _ctx.$slots.item ? renderSlot(_ctx.$slots, "item", {
                    key: 0,
                    item
                  }) : createCommentVNode("", true)
                ]),
                _: 2
              }, 1032, ["size", "shape", "src", "style", "onClick", "onError", "onMouseover"]);
            }), 128))
          ])
        ])) : createCommentVNode("", true)
      ]),
      default: withCtx(() => [
        createVNode(_component_ElAvatar, {
          size: _ctx.size,
          shape: _ctx.shape,
          style: normalizeStyle([_ctx.commonStyle, _ctx.itemStyle, _ctx.moreStyle]),
          class: "ele-avatar-more",
          onClick: _ctx.handleMoreClick
        }, {
          default: withCtx(() => [
            createElementVNode("span", _hoisted_1, [
              renderSlot(_ctx.$slots, "more", {
                overflowCount: _ctx.overflowCount,
                overflowData: _ctx.overflowData
              }, () => [
                createElementVNode("span", null, "+" + toDisplayString(_ctx.overflowCount), 1)
              ])
            ])
          ]),
          _: 3
        }, 8, ["size", "shape", "style", "onClick"])
      ]),
      _: 3
    }, 16, ["disabled", "visible"])) : createCommentVNode("", true),
    createVNode(_component_EleTooltip, mergeProps({
      placement: "top",
      offset: 6
    }, _ctx.tooltipProps || {}, {
      content: _ctx.tooltipContent,
      virtualRef: _ctx.virtualRef,
      virtualTriggering: true
    }), null, 16, ["content", "virtualRef"])
  ], 2);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  index as default
};