@artmate/chat/dist/es/fileList/index.vue.js

借鉴字节开源react库AntX，通过vue实现的版本

import { defineComponent as B, ref as v, watch as L, onMounted as N, createElementBlock as i, openBlock as n, normalizeStyle as _, normalizeClass as c, unref as e, createVNode as s, createBlock as w, createCommentVNode as y, TransitionGroup as R, withCtx as r, Fragment as k, renderList as T } from "vue";
import { ElButton as b, ElIcon as x } from "element-plus";
import { UploadFilled as z, ArrowLeftBold as A, ArrowRightBold as M } from "@element-plus/icons-vue";
import W from "../attachment/silentUploader.vue.js";
import { useNamespace as $ } from "../hooks/useNamespace.js";
import F from "./fileListCard.vue.js";
/* empty css                  */
const g = 1, U = /* @__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 o = C, t = $("attachment-list"), f = v(), m = v(!1), d = v(!1), u = () => {
      const l = f.value;
      l && (o.overflow === "scrollX" ? (m.value = Math.abs(l.scrollLeft) >= g, d.value = l.scrollWidth - l.clientWidth - Math.abs(l.scrollLeft) >= g) : o.overflow === "scrollY" && (m.value = l.scrollTop !== 0, d.value = l.scrollHeight - l.clientHeight !== l.scrollTop));
    };
    L(
      () => o.overflow,
      () => {
        u();
      }
    );
    const h = (l) => {
      const a = f.value;
      a && a.scrollTo({
        left: a.scrollLeft + l * a.clientWidth,
        behavior: "smooth"
      });
    }, S = () => {
      h(-1);
    }, E = () => {
      h(1);
    };
    return N(() => {
      u();
    }), (l, a) => (n(), i("div", {
      ref_key: "containerRef",
      ref: f,
      class: c([
        e(t).b(),
        o.overflow && e(t).b(`overflow-${o.overflow}`),
        m.value && e(t).b("overflow-ping-start"),
        d.value && e(t).b("overflow-ping-end"),
        o.listClassName
      ]),
      style: _(o.listStyle),
      onScroll: u
    }, [
      s(R, {
        name: e(t).b("card-motion")
      }, {
        default: r(() => [
          (n(!0), i(k, null, T(o.items, (p) => (n(), i("div", {
            key: p.uid
          }, [
            (n(), w(F, {
              key: p.uid,
              item: p,
              "on-remove": l.onRemove,
              style: _(o.itemStyle)
            }, null, 8, ["item", "on-remove", "style"]))
          ]))), 128))
        ]),
        _: 1
      }, 8, ["name"]),
      o.disabled ? y("", !0) : (n(), w(W, {
        key: 0,
        upload: o.upload
      }, {
        default: r(() => [
          s(e(b), {
            class: c([e(t).b("upload-btn")]),
            type: "info"
          }, {
            icon: r(() => [
              s(e(x), {
                class: c([e(t).b("upload-btn-icon")])
              }, {
                default: r(() => [
                  s(e(z))
                ]),
                _: 1
              }, 8, ["class"])
            ]),
            _: 1
          }, 8, ["class"])
        ]),
        _: 1
      }, 8, ["upload"])),
      o.overflow === "scrollX" ? (n(), i(k, { key: 1 }, [
        s(e(b), {
          class: c([e(t).b("prev-btn")]),
          circle: "",
          size: "small",
          onClick: S
        }, {
          icon: r(() => [
            s(e(A))
          ]),
          _: 1
        }, 8, ["class"]),
        s(e(b), {
          class: c([e(t).b("next-btn")]),
          circle: "",
          icon: "",
          size: "small",
          onClick: E
        }, {
          icon: r(() => [
            s(e(M))
          ]),
          _: 1
        }, 8, ["class"])
      ], 64)) : y("", !0)
    ], 38));
  }
});
export {
  U as default
};