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

Craft AI-driven interfaces effortlessly

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