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

Ant Design X for Vue — community continuation aligned with @ant-design/x

import { defineComponent as z, computed as w, useTemplateRef as H, watchEffect as V, onWatcherCleanup as B, watch as G, nextTick as Y, createVNode as l, TransitionGroup as q, Fragment as D, isVNode as J } from "vue";
import { b as r, P as K, g as Q, R as U } from "../../chunks/module-chunk.mjs";
import { Button as u } from "ant-design-vue";
import p from "../../_util/hooks/use-state.mjs";
import { useAttachmentContextInject as Z } from "../context.mjs";
import tt from "../SilentUploader.mjs";
import et from "./FileListCard.mjs";
function lt(s) {
  return typeof s == "function" || Object.prototype.toString.call(s) === "[object Object]" && !J(s);
}
const C = 1, pt = /* @__PURE__ */ z({
  name: "AXAttachmentsFileList",
  __name: "FileList",
  props: {
    prefixCls: null,
    items: null,
    onRemove: {
      type: Function
    },
    overflow: null,
    upload: null,
    imageProps: null,
    uploadNode: null,
    listClassName: null,
    listStyle: null,
    itemClassName: null,
    itemStyle: null,
    uploadClassName: null,
    uploadStyle: null
  },
  setup(s) {
    const a = s, {
      prefixCls: m,
      items: f,
      onRemove: S,
      overflow: o,
      upload: R,
      uploadNode: b,
      listClassName: L,
      listStyle: N,
      itemClassName: $,
      uploadClassName: E,
      uploadStyle: _,
      itemStyle: P,
      imageProps: T
    } = a, n = w(() => `${m}-list`), d = H("file-list-container"), [nt, h] = p(!1), k = Z(), O = w(() => !k.value.disabled && (typeof a.upload.maxCount > "u" || a.upload.maxCount > a.items.length));
    V(() => {
      h(!0), B(() => {
        h(!1);
      });
    });
    const [F, g] = p(!1), [I, v] = p(!1), x = () => {
      const t = d.value;
      t && (o === "scrollX" ? (g(Math.abs(t.scrollLeft) >= C), v(t.scrollWidth - t.clientWidth - Math.abs(t.scrollLeft) >= C)) : o === "scrollY" && (g(t.scrollTop !== 0), v(t.scrollHeight - t.clientHeight !== t.scrollTop)));
    };
    G([() => o, () => f.length], () => {
      Y(() => {
        x();
      });
    }, {
      immediate: !0
    });
    const y = (t) => {
      const e = d.value;
      e && e.scrollTo({
        left: e.scrollLeft + t * e.clientWidth,
        behavior: "smooth"
      });
    }, j = () => {
      y(-1);
    }, A = () => {
      y(1);
    }, M = (t, e) => {
      const i = t.classList.contains("ant-attachment-list-card-type-preview") ? [{
        width: "0px"
      }, {
        width: "64px"
      }] : [{
        width: "0px"
      }, {
        width: "236px"
      }], c = t.animate(i, {
        duration: 300,
        easing: "ease",
        fill: "forwards"
      });
      c.onfinish = () => e();
    }, W = (t, e) => {
      const i = t.classList.contains("ant-attachment-list-card-type-preview") ? [{
        opacity: 1,
        width: "64px",
        marginRight: "0px"
      }, {
        opacity: 0,
        width: "0px",
        marginRight: "-10px"
      }] : [{
        opacity: 1,
        width: "236px",
        marginRight: "0px"
      }, {
        opacity: 0,
        width: "0px",
        marginRight: "-10px",
        paddingRight: "0px",
        paddingLeft: "0px"
      }], c = t.animate(i, {
        duration: 300,
        easing: "ease",
        fill: "forwards"
      });
      c.onfinish = () => e();
    };
    return () => {
      let t;
      return l("div", {
        class: r(n.value, {
          [`${n.value}-overflow-${o}`]: o,
          [`${n.value}-overflow-ping-start`]: F.value,
          [`${n.value}-overflow-ping-end`]: I.value
        }, L),
        ref: "file-list-container",
        onScroll: x,
        style: N
      }, [l(q, {
        onEnter: M,
        onLeave: W,
        css: !1
      }, lt(t = f.map((e) => l(et, {
        key: e.uid,
        prefixCls: m,
        item: e,
        onRemove: S,
        className: r($),
        imageProps: T,
        type: e.cardType,
        style: {
          ...P
        }
      }, null))) ? t : {
        default: () => [t]
      }), l(tt, {
        upload: R,
        visible: O.value,
        children: b || l(u, {
          class: r(E, `${n.value}-upload-btn`),
          style: _,
          type: "dashed"
        }, {
          default: () => [l(K, {
            class: `${n.value}-upload-btn-icon`
          }, null)]
        })
      }, null), o === "scrollX" && l(D, null, [l(u, {
        size: "small",
        shape: "circle",
        class: `${n.value}-prev-btn`,
        icon: l(Q, null, null),
        onClick: j
      }, null), l(u, {
        size: "small",
        shape: "circle",
        class: `${n.value}-next-btn`,
        icon: l(U, null, null),
        onClick: A
      }, null)])]);
    };
  }
});
export {
  pt as default
};