@arco-design/web-vue
Version:
Arco Design Vue 2.0: A Vue.js 3 UI Library
83 lines (82 loc) • 2.44 kB
JavaScript
;
var vue = require("vue");
var globalConfig = require("../_utils/global-config.js");
var avatar = require("./avatar.js");
var index = require("../popover/index.js");
var vueUtils = require("../_utils/vue-utils.js");
var context$1 = require("./context.js");
var context = require("../config-provider/context.js");
const AvatarGroup = vue.defineComponent({
name: "AvatarGroup",
props: {
shape: {
type: String,
default: "circle"
},
size: Number,
autoFixFontSize: {
type: Boolean,
default: true
},
maxCount: {
type: Number,
default: 0
},
zIndexAscend: {
type: Boolean,
default: false
},
maxStyle: {
type: Object
},
maxPopoverTriggerProps: {
type: Object
}
},
setup(props, {
slots
}) {
const {
shape,
size,
autoFixFontSize,
zIndexAscend
} = vue.toRefs(props);
const prefixCls = globalConfig.getPrefixCls("avatar-group");
const configCtx = vue.inject(context.configProviderInjectionKey, void 0);
const rtl = vue.computed(() => {
var _a;
return (_a = configCtx == null ? void 0 : configCtx.rtl) != null ? _a : false;
});
const total = vue.ref(0);
vue.provide(context$1.avatarGroupInjectionKey, vue.reactive({
shape,
size,
autoFixFontSize,
zIndexAscend,
total,
rtl
}));
return () => {
var _a, _b;
const children = vueUtils.getAllElements((_b = (_a = slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : []);
const avatarsToRender = props.maxCount > 0 ? children.slice(0, props.maxCount) : children;
const avatarsInPopover = props.maxCount > 0 ? children.slice(props.maxCount) : [];
if (total.value !== children.length) {
total.value = children.length;
}
return vue.createVNode("div", {
"class": `${prefixCls} ${rtl.value ? `${prefixCls}-rtl` : ""}`
}, [avatarsToRender, avatarsInPopover.length > 0 && vue.createVNode(index, props.maxPopoverTriggerProps, {
default: () => [vue.createVNode(avatar, {
"class": `${prefixCls}-max-count-avatar`,
"style": props.maxStyle
}, {
default: () => [vue.createTextVNode("+"), avatarsInPopover.length]
})],
content: () => vue.createVNode("div", null, [avatarsInPopover])
})]);
};
}
});
module.exports = AvatarGroup;