ant-design-x-vue/es/attachments/FileList/FileList.mjs

Craft AI-driven interfaces effortlessly

import { defineComponent as $, computed as b, useTemplateRef as x, watchEffect as y, onWatcherCleanup as L, watch as R, nextTick as P, createVNode as t, Fragment as p } from "vue";
import { b as v, P as E, L as N, R as T } from "../../chunks/module-chunk.mjs";
import { Button as s } from "ant-design-vue";
import i from "../../_util/hooks/use-state.mjs";
import { useAttachmentContextInject as k } from "../context.mjs";
import F from "../SilentUploader.mjs";
import O from "./FileListCard.mjs";
const d = 1, I = /* @__PURE__ */ $({
  name: "AXAttachmentsFileList",
  __name: "FileList",
  props: {
    prefixCls: null,
    items: null,
    onRemove: {
      type: Function
    },
    overflow: null,
    upload: null,
    imageProps: null,
    listClassName: null,
    listStyle: null,
    itemClassName: null,
    itemStyle: null
  },
  setup(l) {
    const n = b(() => `${l.prefixCls}-list`), a = x("file-list-container"), [A, c] = i(!1), h = k();
    y(() => {
      c(!0), L(() => {
        c(!1);
      });
    });
    const [g, r] = i(!1), [C, u] = i(!1), f = () => {
      const e = a.value;
      e && (l.overflow === "scrollX" ? (r(Math.abs(e.scrollLeft) >= d), u(e.scrollWidth - e.clientWidth - Math.abs(e.scrollLeft) >= d)) : l.overflow === "scrollY" && (r(e.scrollTop !== 0), u(e.scrollHeight - e.clientHeight !== e.scrollTop)));
    };
    R([() => l.overflow, () => l.items.length], () => {
      P(() => {
        f();
      });
    }, {
      immediate: !0
    });
    const m = (e) => {
      const o = a.value;
      o && o.scrollTo({
        left: o.scrollLeft + e * o.clientWidth,
        behavior: "smooth"
      });
    }, w = () => {
      m(-1);
    }, S = () => {
      m(1);
    };
    return () => t("div", {
      class: v(n.value, {
        [`${n.value}-overflow-${l.overflow}`]: l.overflow,
        [`${n.value}-overflow-ping-start`]: g.value,
        [`${n.value}-overflow-ping-end`]: C.value
      }, l.listClassName),
      ref: "file-list-container",
      onScroll: f,
      style: l.listStyle
    }, [l.items.map((e) => t(O, {
      key: e.uid,
      prefixCls: l.prefixCls,
      item: e,
      onRemove: l.onRemove,
      className: v(l.itemClassName),
      imageProps: l.imageProps,
      style: {
        ...l.itemStyle
      }
    }, null)), !h.value.disabled && t(F, {
      upload: l.upload,
      children: t(s, {
        class: `${n.value}-upload-btn`,
        type: "dashed"
      }, {
        default: () => [t(E, {
          class: `${n.value}-upload-btn-icon`
        }, null)]
      })
    }, null), l.overflow === "scrollX" && t(p, null, [t(s, {
      size: "small",
      shape: "circle",
      class: `${n.value}-prev-btn`,
      icon: t(N, null, null),
      onClick: w
    }, null), t(s, {
      size: "small",
      shape: "circle",
      class: `${n.value}-next-btn`,
      icon: t(T, null, null),
      onClick: S
    }, null)])]);
  }
});
export {
  I as default
};