@artmate/chat
Version:
**开箱即用的AI组件库（基于 Vue3 + ElementPlus）**
135 lines (134 loc) • 3.86 kB
JavaScript
import { defineComponent as B, ref as v, watch as L, nextTick as N, onMounted as R, createElementBlock as c, openBlock as r, normalizeStyle as _, normalizeClass as i, unref as e, createVNode as n, createBlock as w, createCommentVNode as y, TransitionGroup as T, withCtx as s, Fragment as k, renderList as x } from "vue";
import { UploadFilled as z, ArrowLeftBold as A, ArrowRightBold as M } from "@element-plus/icons-vue";
import { ElButton as b, ElIcon as W } from "element-plus";
import $ from "../attachment/silentUploader.vue.js";
import { useNamespace as F } from "../hooks/useNamespace.js";
import H from "./fileListCard.vue.js";
/* empty css */
const g = 1, Y = /* @__PURE__ */ B({
__name: "index",
props: {
items: {},
onRemove: {},
overflow: { default: "wrap" },
upload: {},
disabled: { type: Boolean, default: !1 },
listClassName: { default: "" },
listStyle: { default: void 0 },
itemClassName: { default: "" },
itemStyle: { default: void 0 }
},
setup(C) {
const l = C, t = F("attachment-list"), f = v(), u = v(!1), m = v(!1);
function d() {
const o = f.value;
o && (l.overflow === "scrollX" ? (u.value = Math.abs(o.scrollLeft) >= g, m.value = o.scrollWidth - o.clientWidth - Math.abs(o.scrollLeft) >= g) : l.overflow === "scrollY" && (u.value = o.scrollTop !== 0, m.value = o.scrollHeight - o.clientHeight !== o.scrollTop));
}
L(
() => [l.overflow, l.items],
() => {
N(() => {
d();
});
}
);
function h(o) {
const a = f.value;
a && a.scrollTo({
left: a.scrollLeft + o * a.clientWidth,
behavior: "smooth"
});
}
function S() {
h(-1);
}
function E() {
h(1);
}
return R(() => {
d();
}), (o, a) => (r(), c("div", {
ref_key: "containerRef",
ref: f,
class: i([
e(t).b(),
l.overflow && e(t).b(`overflow-${l.overflow}`),
u.value && e(t).b("overflow-ping-start"),
m.value && e(t).b("overflow-ping-end"),
l.listClassName
]),
style: _(l.listStyle),
onScroll: d
}, [
n(T, {
name: e(t).b("card-motion")
}, {
default: s(() => [
(r(!0), c(k, null, x(l.items, (p) => (r(), c("div", {
key: p.uid
}, [
(r(), w(H, {
key: p.uid,
item: p,
"on-remove": o.onRemove,
style: _(l.itemStyle)
}, null, 8, ["item", "on-remove", "style"]))
]))), 128))
]),
_: 1
}, 8, ["name"]),
l.disabled ? y("", !0) : (r(), w($, {
key: 0,
upload: l.upload
}, {
default: s(() => [
n(e(b), {
class: i([e(t).b("upload-btn")]),
type: "info"
}, {
icon: s(() => [
n(e(W), {
class: i([e(t).b("upload-btn-icon")])
}, {
default: s(() => [
n(e(z))
]),
_: 1
}, 8, ["class"])
]),
_: 1
}, 8, ["class"])
]),
_: 1
}, 8, ["upload"])),
l.overflow === "scrollX" ? (r(), c(k, { key: 1 }, [
n(e(b), {
class: i([e(t).b("prev-btn")]),
circle: "",
size: "small",
onClick: S
}, {
icon: s(() => [
n(e(A))
]),
_: 1
}, 8, ["class"]),
n(e(b), {
class: i([e(t).b("next-btn")]),
circle: "",
icon: "",
size: "small",
onClick: E
}, {
icon: s(() => [
n(e(M))
]),
_: 1
}, 8, ["class"])
], 64)) : y("", !0)
], 38));
}
});
export {
Y as default
};