hongluan-business-ui/es/components/avatar-list/src/index.mjs

Hongluan Business Component Library for Vue 3

import { defineComponent, ref, computed, onMounted, resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createElementBlock, Fragment, renderList, normalizeStyle, createElementVNode, toDisplayString, renderSlot } from 'vue';
import { HlGroup, HlThumb, HlPopover } from 'hongluan-ui';
import { isValidComponentSize } from '../../../utils/validators.mjs';
import { usePrefix } from '../../../utils/util.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';

const _sfc_main = defineComponent({
  name: "AvatarList",
  components: {
    HlGroup,
    HlThumb,
    HlPopover
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    indent: String,
    size: {
      type: String,
      validator: isValidComponentSize,
      default: "sm"
    },
    fit: {
      type: String,
      default: "cover"
    },
    props: {
      type: Object,
      default: () => ({ url: "url", title: "title" })
    },
    max: Number,
    maxBgColor: {
      type: String,
      default: "black"
    },
    popperClass: {
      type: String,
      default: ""
    }
  },
  emits: ["click"],
  setup(props) {
    const { prefix } = usePrefix();
    const computedIndent = ref(props.indent);
    const hlGroup = ref(null);
    const imgList = computed(() => {
      if (isNaN(+props.max) || props.data.length < props.max) {
        return props.data;
      } else {
        const last = {
          [props.props.url]: "LAST_NUMBER",
          [props.props.title]: props.data.length - props.max
        };
        return [...props.data.slice(0, props.max), last];
      }
    });
    const lastClazz = computed(() => {
      let clazz = "";
      if (!isNaN(+props.max) && props.data.length > props.max) {
        const lastNum = props.data.length - props.max;
        if (lastNum < 10) {
          clazz = "less-10";
        } else if (lastNum < 100) {
          clazz = "less-100";
        } else if (lastNum < 1e3) {
          clazz = "less-1k";
        } else if (lastNum < 1e4) {
          clazz = "less-10k";
        } else if (lastNum < 1e5) {
          clazz = "less-100k";
        }
      }
      return clazz;
    });
    onMounted(() => {
      if (!computedIndent.value) {
        const img = hlGroup.value.$el.querySelector("div.group-item");
        try {
          computedIndent.value = -img.offsetWidth / 2 + "px";
        } catch (e) {
          computedIndent.value = "0px";
        }
      }
    });
    return {
      prefix,
      hlGroup,
      imgList,
      computedIndent,
      lastClazz
    };
  }
});
const _hoisted_1 = { class: "lastClazz" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_hl_thumb = resolveComponent("hl-thumb");
  const _component_hl_popover = resolveComponent("hl-popover");
  const _component_hl_group = resolveComponent("hl-group");
  return openBlock(), createBlock(_component_hl_group, {
    ref: "hlGroup",
    class: normalizeClass(_ctx.prefix + "-avatar-list"),
    indent: _ctx.computedIndent
  }, {
    default: withCtx(() => [
      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.imgList, (img) => {
        return openBlock(), createBlock(_component_hl_popover, {
          key: img[_ctx.props.url],
          trigger: "hover",
          "popper-class": _ctx.popperClass,
          disabled: !img[_ctx.props.title] || img[_ctx.props.url] === "LAST_NUMBER"
        }, {
          reference: withCtx(() => [
            img[_ctx.props.url] !== "LAST_NUMBER" ? (openBlock(), createBlock(_component_hl_thumb, {
              key: 0,
              src: img[_ctx.props.url],
              size: _ctx.size,
              fit: _ctx.fit,
              bordered: "",
              round: "",
              onClick: ($event) => _ctx.$emit("click", img)
            }, null, 8, ["src", "size", "fit", "onClick"])) : (openBlock(), createBlock(_component_hl_thumb, {
              key: 1,
              size: _ctx.size,
              fit: _ctx.fit,
              style: normalizeStyle("background-color:" + _ctx.maxBgColor),
              bordered: "",
              round: "",
              onClick: ($event) => _ctx.$emit("click", img)
            }, {
              default: withCtx(() => [
                createElementVNode("span", _hoisted_1, toDisplayString(img[_ctx.props.title]), 1)
              ]),
              _: 2
            }, 1032, ["size", "fit", "style", "onClick"]))
          ]),
          default: withCtx(() => [
            renderSlot(_ctx.$slots, "tip", { item: img }, () => [
              createElementVNode("span", null, toDisplayString(img[_ctx.props.title]), 1)
            ])
          ]),
          _: 2
        }, 1032, ["popper-class", "disabled"]);
      }), 128))
    ]),
    _: 3
  }, 8, ["class", "indent"]);
}
var AvatarList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

export { AvatarList as default };
//# sourceMappingURL=index.mjs.map