vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
73 lines (72 loc) • 2.68 kB
JavaScript
import { defineComponent as x, createElementBlock as t, openBlock as s, createCommentVNode as u, Fragment as F, renderList as _, unref as e, normalizeClass as i, normalizeStyle as c, createElementVNode as m, toDisplayString as w } from "vue";
import { useAvatarGroup as z } from "./hook/useAvatarGroup.mjs";
const A = { class: "app-avatar-group" }, B = ["onClick"], D = ["src"], L = /* @__PURE__ */ x({
name: "AvatarGroup",
__name: "group",
props: {
data: {},
options: { default: () => ({
src: "src",
size: "42",
shape: "circle"
}) },
max: { default: 0 }
},
emits: ["change", "more"],
setup(v, { emit: g }) {
const r = v, y = g, { list: C, mergedFields: l, styles: f, avatarStyles: d, isChange: n, handleGetData: h, handleMore: p } = z(r, y);
return (G, o) => (s(), t("div", A, [
(s(!0), t(F, null, _(e(C), (a, k) => (s(), t("div", {
key: k,
class: i(["avatar-group-item", { "is-overlay": e(n) }]),
onClick: (M) => e(h)(a)
}, [
a[e(l).src] ? (s(), t("img", {
key: 0,
style: c(e(d)),
src: a[e(l).src],
draggable: "false"
}, null, 12, D)) : (s(), t("svg", {
key: 1,
style: c(e(d)),
viewBox: "0 0 30 30",
class: "avatar-svg",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg"
}, [...o[1] || (o[1] = [
m("g", {
stroke: "none",
"stroke-width": "1",
fill: "none",
"fill-rule": "evenodd"
}, [
m("circle", {
fill: "#CACFD8",
cx: "15",
cy: "15",
r: "15"
}),
m("path", {
d: "M14.9997866,16 C12.5145053,16 10.4997866,13.9852814 10.4997866,11.5 C10.4997866,9.01471863 12.5145053,7 14.9997866,7 C17.485068,7 19.4997866,9.01471863 19.4997866,11.5 C19.4997866,13.9852814 17.485068,16 14.9997866,16 Z M23,23 L7,22.998553 C7,19.0122153 10.8892296,16.5 14.9997866,16.5 C19.1103437,16.5 23,20 23,23 Z",
fill: "#FFFFFF"
})
], -1)
])], 4)),
e(n) ? (s(), t("div", {
key: 2,
class: i(["item-overlay", "is-" + e(l).shape])
}, null, 2)) : u("", !0)
], 10, B))), 128)),
r.max > 0 && r.data.length > r.max ? (s(), t("div", {
key: 0,
class: i(["is-first", ["is-" + e(l).shape, { "is-more": e(n) }]]),
style: c(e(f)),
onClick: o[0] || (o[0] = //@ts-ignore
(...a) => e(p) && e(p)(...a))
}, w(r.data.length - r.max) + "+", 7)) : u("", !0)
]));
}
});
export {
L as default
};