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

Craft AI-driven interfaces effortlessly

import { defineComponent as E, mergeDefaults as j, toRef as T, useSlots as O, computed as o, useTemplateRef as R, watch as V, createVNode as a, Fragment as X } from "vue";
import { c as z, _ as B } from "../chunks/helper-chunk.mjs";
import { b as n } from "../chunks/module-chunk.mjs";
import $ from "../_util/hooks/use-x-component-config.mjs";
import "../x-provider/index.mjs";
import G from "./PlaceholderUploader.mjs";
import P from "./DropArea.mjs";
import H from "./SilentUploader.mjs";
import J from "./FileList/FileList.mjs";
import { AttachmentContextProvider as K } from "./context.mjs";
import M from "./style/index.mjs";
import Q from "../_util/hooks/use-state.mjs";
import "ant-design-vue";
import W from "../x-provider/hooks/use-x-provider-context.mjs";
const Y = /* @__PURE__ */ E({
  name: "AXAttachments",
  __name: "Attachments",
  props: j({
    capture: {
      type: null,
      required: !1
    },
    type: {
      type: null,
      required: !1
    },
    name: {
      type: null,
      required: !1
    },
    defaultFileList: {
      type: null,
      required: !1
    },
    action: {
      type: null,
      required: !1
    },
    directory: {
      type: null,
      required: !1
    },
    data: {
      type: null,
      required: !1
    },
    method: {
      type: null,
      required: !1
    },
    headers: {
      type: null,
      required: !1
    },
    showUploadList: {
      type: null,
      required: !1
    },
    multiple: {
      type: null,
      required: !1
    },
    accept: {
      type: null,
      required: !1
    },
    beforeUpload: {
      type: null,
      required: !1
    },
    onChange: {
      type: Function,
      required: !1
    },
    "onUpdate:fileList": {
      type: null,
      required: !1
    },
    onDrop: {
      type: null,
      required: !1
    },
    listType: {
      type: null,
      required: !1
    },
    onPreview: {
      type: null,
      required: !1
    },
    onDownload: {
      type: null,
      required: !1
    },
    onReject: {
      type: null,
      required: !1
    },
    onRemove: {
      type: null,
      required: !1
    },
    remove: {
      type: null,
      required: !1
    },
    supportServerRender: {
      type: null,
      required: !1
    },
    disabled: {
      type: Boolean,
      required: !1
    },
    prefixCls: {
      type: String,
      required: !1
    },
    customRequest: {
      type: null,
      required: !1
    },
    withCredentials: {
      type: null,
      required: !1
    },
    openFileDialogOnClick: {
      type: null,
      required: !1
    },
    locale: {
      type: null,
      required: !1
    },
    id: {
      type: null,
      required: !1
    },
    previewFile: {
      type: null,
      required: !1
    },
    transformFile: {
      type: null,
      required: !1
    },
    iconRender: {
      type: null,
      required: !1
    },
    isImageUrl: {
      type: null,
      required: !1
    },
    progress: {
      type: null,
      required: !1
    },
    itemRender: {
      type: null,
      required: !1
    },
    maxCount: {
      type: null,
      required: !1
    },
    height: {
      type: null,
      required: !1
    },
    removeIcon: {
      type: null,
      required: !1
    },
    downloadIcon: {
      type: null,
      required: !1
    },
    previewIcon: {
      type: null,
      required: !1
    },
    rootClassName: {
      type: String,
      required: !1
    },
    rootStyle: {
      required: !1
    },
    style: {
      required: !1
    },
    className: {
      type: String,
      required: !1
    },
    classNames: {
      type: Object,
      required: !1
    },
    styles: {
      type: Object,
      required: !1
    },
    children: {
      required: !1
    },
    placeholder: {
      type: Function,
      skipCheck: !0,
      required: !1
    },
    getDropContainer: {
      type: Function,
      skipCheck: !0,
      required: !1
    },
    items: {
      type: Array,
      required: !1
    },
    overflow: {
      required: !1
    },
    imageProps: {
      required: !1
    }
  }, {
    items: () => [],
    classNames: () => ({}),
    styles: () => ({})
  }),
  setup(e, {
    expose: b
  }) {
    const D = z(e, ["prefixCls", "rootClassName", "rootStyle", "className", "style", "items", "children", "getDropContainer", "placeholder", "onChange", "onRemove", "overflow", "imageProps", "disabled", "classNames", "styles"]);
    T(e, "prefixCls");
    const h = O(), {
      getPrefixCls: F,
      direction: v
    } = W(), r = F("attachment", e.prefixCls), q = $("attachments"), u = o(() => q.value.classNames), d = o(() => q.value.styles), C = R("attachments-container"), L = R("placeholder-uploader"), [U, A, I] = M(r), m = o(() => n(A.value, I)), [c, g] = Q(e.items);
    V(() => e.items, () => {
      g(e.items);
    });
    const N = (l) => {
      var t;
      g(l.fileList), (t = e.onChange) == null || t.call(e, l);
    }, y = o(() => ({
      ...D,
      fileList: c.value,
      onChange: N
    })), k = (l) => Promise.resolve(typeof e.onRemove == "function" ? e.onRemove(l) : e.onRemove).then((t) => {
      if (t === !1)
        return;
      const s = c.value.filter((f) => f.uid !== l.uid);
      N({
        file: {
          ...l,
          status: "removed"
        },
        fileList: s
      });
    }), p = (l, t) => {
      const s = h.placeholder ? h.placeholder({
        type: l
      }) : typeof e.placeholder == "function" ? e.placeholder(l) : e.placeholder;
      return a(G, {
        placeholder: s,
        upload: y.value,
        prefixCls: r,
        className: n(u.value.placeholder, e.classNames.placeholder),
        style: {
          ...d.value.placeholder,
          ...e.styles.placeholder,
          ...t == null ? void 0 : t.style
        },
        ref: l === "inline" ? "placeholder-uploader" : void 0
      }, null);
    }, x = o(() => c.value.length > 0);
    return b({
      nativeElement: C.value,
      upload: (l) => {
        var f, S, w;
        const t = (w = (f = L.value) == null ? void 0 : (S = f.nativeElement).querySelector) == null ? void 0 : w.call(S, 'input[type="file"]');
        if (!t) return;
        const s = new DataTransfer();
        try {
          if ("length" in l && l.length >= 1)
            for (let i = 0; i < l.length; i++)
              s.items.add(l[i]);
          else
            s.items.add(l);
          t.files = s.files, t.dispatchEvent(new Event("change", {
            bubbles: !0
          }));
        } catch (i) {
          console.error("upload failed", i);
        }
      }
    }), () => U(a(K, {
      value: {
        disabled: e.disabled
      }
    }, {
      default: () => [e.children ? a(X, null, [a(H, {
        upload: y.value,
        rootClassName: e.rootClassName,
        ref: "attachments-upload",
        children: e.children
      }, null), a(P, {
        getDropContainer: e.getDropContainer,
        prefixCls: r,
        className: n(m.value, e.rootClassName),
        children: p("drop")
      }, null)]) : a("div", {
        class: n(r, m.value, {
          [`${r}-rtl`]: v.value === "rtl"
        }, e.className, e.rootClassName),
        style: {
          ...e.rootStyle,
          ...e.style
        },
        dir: v.value || "ltr",
        ref: "attachments-container"
      }, [a(J, {
        prefixCls: r,
        items: c.value,
        onRemove: k,
        overflow: e.overflow,
        upload: y.value,
        listClassName: n(u.value.list, e.classNames.list),
        listStyle: {
          ...d.value.list,
          ...e.styles.list,
          ...!x.value && {
            display: "none"
          }
        },
        uploadClassName: n(u.value.upload, e.classNames.upload),
        uploadStyle: {
          ...d.value.upload,
          ...e.styles.upload
        },
        itemClassName: n(u.value.item, e.classNames.item),
        itemStyle: {
          ...d.value.item,
          ...e.styles.item
        },
        imageProps: e.imageProps
      }, null), p("inline", x.value ? {
        style: {
          display: "none"
        }
      } : {}), a(P, {
        getDropContainer: e.getDropContainer || (() => C.value),
        prefixCls: r,
        className: m.value,
        children: p("drop")
      }, null)])]
    }));
  }
}), fe = /* @__PURE__ */ B(Y, [["__file", "/Users/wangzhichao/办公/code/github/ant-design-x-vue-pure/ant-design-x-vue/src/attachments/Attachments.vue"]]);
export {
  fe as default
};