yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
189 lines (188 loc) • 7.12 kB
JavaScript
;
const vue = require("vue");
const elementPlus = require("element-plus");
const EleTooltip = require("../ele-tooltip/index");
const props = require("./props");
const _sfc_main = vue.defineComponent({
name: "EleAvatarGroup",
components: { ElAvatar: elementPlus.ElAvatar, EleTooltip },
props: props.avatarGroupProps,
emits: props.avatarGroupEmits,
setup(props2, { emit }) {
const tooltipContent = vue.ref("");
const virtualRef = vue.ref();
const overflowVisible = vue.ref(false);
const commonStyle = vue.computed(() => {
if (props2.size == null || typeof props2.size === "string") {
const obj = { large: "-12px", default: "-10px", small: "-8px" };
return { marginLeft: props2.size ? obj[props2.size] : "-10px" };
}
if (typeof props2.size === "number" && props2.size >= 0) {
return { marginLeft: `${-Math.round(props2.size / 3)}px` };
}
return {};
});
const isOverflow = vue.computed(() => {
return props2.maxCount != null && props2.maxCount > 0 && props2.data != null && props2.data.length > props2.maxCount;
});
const avatarData = vue.computed(() => {
if (props2.data == null) {
return [];
}
return isOverflow.value ? props2.data.slice(0, props2.maxCount) : props2.data;
});
const overflowCount = vue.computed(() => {
if (!isOverflow.value || !props2.data || props2.maxCount == null) {
return 0;
}
return props2.data.length - props2.maxCount;
});
const overflowData = vue.computed(() => {
if (props2.data == null || !isOverflow.value) {
return [];
}
return props2.data.slice(props2.maxCount);
});
const handleItemHover = (item, e) => {
if (props2.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, props2) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props2) {
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 = vue.resolveComponent("ElAvatar");
const _component_EleTooltip = vue.resolveComponent("EleTooltip");
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(["ele-avatar-group", { "is-hover-open": _ctx.hoverOpen }])
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.avatarData, (item, index2) => {
return vue.openBlock(), vue.createBlock(_component_ElAvatar, {
key: item.key ?? index2 + "-" + (item.value || item.label),
size: _ctx.size,
shape: _ctx.shape,
src: item.value,
style: vue.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: vue.withCtx(() => [
_ctx.$slots.item ? vue.renderSlot(_ctx.$slots, "item", {
key: 0,
item
}) : vue.createCommentVNode("", true)
]),
_: 2
}, 1032, ["size", "shape", "src", "style", "onClick", "onError", "onMouseover"]);
}), 128)),
_ctx.isOverflow ? (vue.openBlock(), vue.createBlock(_component_EleTooltip, vue.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: vue.withCtx(() => [
_ctx.overflowPopover ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
vue.renderSlot(_ctx.$slots, "overflow", { overflowData: _ctx.overflowData }, () => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.overflowData, (item, index2) => {
return vue.openBlock(), vue.createBlock(_component_ElAvatar, {
key: item.key ?? index2 + "-" + (item.value || item.label),
size: _ctx.size,
shape: _ctx.shape,
src: item.value,
style: vue.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: vue.withCtx(() => [
_ctx.$slots.item ? vue.renderSlot(_ctx.$slots, "item", {
key: 0,
item
}) : vue.createCommentVNode("", true)
]),
_: 2
}, 1032, ["size", "shape", "src", "style", "onClick", "onError", "onMouseover"]);
}), 128))
])
])) : vue.createCommentVNode("", true)
]),
default: vue.withCtx(() => [
vue.createVNode(_component_ElAvatar, {
size: _ctx.size,
shape: _ctx.shape,
style: vue.normalizeStyle([_ctx.commonStyle, _ctx.itemStyle, _ctx.moreStyle]),
class: "ele-avatar-more",
onClick: _ctx.handleMoreClick
}, {
default: vue.withCtx(() => [
vue.createElementVNode("span", _hoisted_1, [
vue.renderSlot(_ctx.$slots, "more", {
overflowCount: _ctx.overflowCount,
overflowData: _ctx.overflowData
}, () => [
vue.createElementVNode("span", null, "+" + vue.toDisplayString(_ctx.overflowCount), 1)
])
])
]),
_: 3
}, 8, ["size", "shape", "style", "onClick"])
]),
_: 3
}, 16, ["disabled", "visible"])) : vue.createCommentVNode("", true),
vue.createVNode(_component_EleTooltip, vue.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]]);
module.exports = index;