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

Craft AI-driven interfaces effortlessly

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