hongluan-business-ui/lib/components/avatar-list/src/index.js

Hongluan Business Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var hongluanUi = require('hongluan-ui');
var validators = require('../../../utils/validators.js');
var util = require('../../../utils/util.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');

const _sfc_main = vue.defineComponent({
  name: "AvatarList",
  components: {
    HlGroup: hongluanUi.HlGroup,
    HlThumb: hongluanUi.HlThumb,
    HlPopover: hongluanUi.HlPopover
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    indent: String,
    size: {
      type: String,
      validator: validators.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 } = util.usePrefix();
    const computedIndent = vue.ref(props.indent);
    const hlGroup = vue.ref(null);
    const imgList = vue.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 = vue.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;
    });
    vue.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 = vue.resolveComponent("hl-thumb");
  const _component_hl_popover = vue.resolveComponent("hl-popover");
  const _component_hl_group = vue.resolveComponent("hl-group");
  return vue.openBlock(), vue.createBlock(_component_hl_group, {
    ref: "hlGroup",
    class: vue.normalizeClass(_ctx.prefix + "-avatar-list"),
    indent: _ctx.computedIndent
  }, {
    default: vue.withCtx(() => [
      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.imgList, (img) => {
        return vue.openBlock(), vue.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: vue.withCtx(() => [
            img[_ctx.props.url] !== "LAST_NUMBER" ? (vue.openBlock(), vue.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"])) : (vue.openBlock(), vue.createBlock(_component_hl_thumb, {
              key: 1,
              size: _ctx.size,
              fit: _ctx.fit,
              style: vue.normalizeStyle("background-color:" + _ctx.maxBgColor),
              bordered: "",
              round: "",
              onClick: ($event) => _ctx.$emit("click", img)
            }, {
              default: vue.withCtx(() => [
                vue.createElementVNode("span", _hoisted_1, vue.toDisplayString(img[_ctx.props.title]), 1)
              ]),
              _: 2
            }, 1032, ["size", "fit", "style", "onClick"]))
          ]),
          default: vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "tip", { item: img }, () => [
              vue.createElementVNode("span", null, vue.toDisplayString(img[_ctx.props.title]), 1)
            ])
          ]),
          _: 2
        }, 1032, ["popper-class", "disabled"]);
      }), 128))
    ]),
    _: 3
  }, 8, ["class", "indent"]);
}
var AvatarList = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

exports["default"] = AvatarList;
//# sourceMappingURL=index.js.map