@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 _, createElementBlock as i, openBlock as c, normalizeStyle as N, normalizeClass as h, createCommentVNode as w, 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 } 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