@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
187 lines (186 loc) • 6.17 kB
JavaScript
import { defineComponent as x, ref as k, watchEffect as B, provide as A, computed as _, openBlock as c, createElementBlock as i, normalizeClass as h, normalizeStyle as N, Fragment as y, renderList as S, unref as r, renderSlot as d, createVNode as n, withCtx as s, createTextVNode as f, toDisplayString as m, createBlock as T, createCommentVNode as w } from "vue";
import "./index.mjs";
import "../renderer/index.mjs";
import "../tooltip/index.mjs";
import { useProps as G, useNameHelper as E } from "@vexip-ui/config";
import { avatarGroupProps as P } from "./props.mjs";
import { GROUP_STATE as V } from "./symbol.mjs";
import p from "../renderer/renderer.mjs";
import v from "./avatar.vue2.mjs";
import R from "../tooltip/tooltip.mjs";
const M = /* @__PURE__ */ x({
name: "AvatarGroup",
__name: "avatar-group",
props: P,
setup($) {
const e = G("avatarGroup", $, {
size: "default",
options: {
default: () => [],
static: !0
},
circle: !1,
max: null,
showTip: !1,
tipTrigger: "hover",
vertical: !1,
offset: null,
restColor: null,
restBackground: null,
slots: () => ({})
}), l = E("avatar-group"), g = k([]), a = k([]);
B(() => {
const o = e.options.length;
e.max > 0 && o > e.max ? (g.value = e.options.slice(0, e.max - 1), a.value = e.options.slice(e.max - 1)) : (g.value = Array.from(e.options), a.value = []);
}), A(V, e);
const z = _(() => ({
[l.b()]: !0,
[l.ns("avatar-vars")]: !0,
[l.bm("inherit")]: e.inherit,
[l.bm(e.size)]: typeof e.size != "number" && e.size !== "default",
[l.bm("circle")]: e.circle,
[l.bm("vertical")]: e.vertical
})), C = _(() => {
const o = {};
return typeof e.offset == "number" && (o[l.cv("offset")] = `${e.offset}px`), o;
});
return (o, b) => (c(), i("div", {
class: h(z.value),
role: "group",
style: N(C.value)
}, [
(c(!0), i(y, null, S(g.value, (t, u) => (c(), i("div", {
key: u,
class: h(r(l).be("item"))
}, [
d(o.$slots, "default", {
option: t,
index: u
}, () => [
n(r(p), {
renderer: r(e).slots.default,
data: { option: t, index: u }
}, {
default: s(() => [
n(r(v), {
inherit: "",
src: t.src,
icon: t.icon,
alt: t.alt,
fit: t.fit,
"src-set": t.srcSet,
gap: t.gap,
"icon-scale": t.iconScale,
"fallback-src": t.fallbackSrc
}, {
default: s(() => [
f(m(t.text), 1)
]),
_: 2
}, 1032, ["src", "icon", "alt", "fit", "src-set", "gap", "icon-scale", "fallback-src"])
]),
_: 2
}, 1032, ["renderer", "data"])
])
], 2))), 128)),
a.value.length ? (c(), i("div", {
key: 0,
class: h([r(l).be("item"), r(l).bem("item", "rest")])
}, [
r(e).showTip ? (c(), T(r(R), {
key: 0,
inherit: "",
trigger: r(e).tipTrigger,
"tip-class": r(l).be("rest")
}, {
trigger: s(() => [
d(o.$slots, "rest", {
options: a.value,
count: a.value.length
}, () => [
n(r(p), {
renderer: r(e).slots.rest,
data: { options: a.value, count: a.value.length }
}, {
default: s(() => [
n(r(v), {
inherit: "",
color: r(e).restColor,
background: r(e).restBackground
}, {
default: s(() => [
f(m(`+${a.value.length}`), 1)
]),
_: 1
}, 8, ["color", "background"])
]),
_: 1
}, 8, ["renderer", "data"]),
b[0] || (b[0] = f("> "))
])
]),
default: s(() => [
d(o.$slots, "tip", {
options: a.value,
count: a.value.length
}, () => [
n(r(p), {
renderer: r(e).slots.tip,
data: { options: a.value, count: a.value.length }
}, {
default: s(() => [
(c(!0), i(y, null, S(a.value, (t, u) => (c(), T(r(v), {
key: u,
inherit: "",
src: t.src,
icon: t.icon,
alt: t.alt,
fit: t.fit,
"src-set": t.srcSet,
gap: t.gap,
"icon-scale": t.iconScale,
"fallback-src": t.fallbackSrc
}, {
default: s(() => [
f(m(t.text), 1)
]),
_: 2
}, 1032, ["src", "icon", "alt", "fit", "src-set", "gap", "icon-scale", "fallback-src"]))), 128))
]),
_: 1
}, 8, ["renderer", "data"])
])
]),
_: 3
}, 8, ["trigger", "tip-class"])) : d(o.$slots, "rest", {
key: 1,
options: a.value,
count: a.value.length
}, () => [
n(r(p), {
renderer: r(e).slots.rest,
data: { options: a.value, count: a.value.length }
}, {
default: s(() => [
n(r(v), {
inherit: "",
color: r(e).restColor,
background: r(e).restBackground
}, {
default: s(() => [
f(m(`+${a.value.length}`), 1)
]),
_: 1
}, 8, ["color", "background"])
]),
_: 1
}, 8, ["renderer", "data"])
])
], 2)) : w("", !0)
], 6));
}
});
export {
M as default
};
//# sourceMappingURL=avatar-group.vue2.mjs.map