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

Craft AI-driven interfaces effortlessly

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