jadq-x-vue/es/attachments/FileList/FileList.mjs

Craft AI-driven interfaces effortlessly

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