ant-design-x-vue-next
Version:
Ant Design X for Vue — community continuation aligned with @ant-design/x
255 lines (254 loc) • 7.74 kB
JavaScript
import { defineComponent as k, mergeDefaults as q, toRef as B, useSlots as O, computed as i, useTemplateRef as g, watch as z, createVNode as a, Fragment as y } from "vue";
import { c as G } from "../chunks/helper-chunk.mjs";
import { b as u } from "../chunks/module-chunk.mjs";
import H from "../_util/hooks/use-x-component-config.mjs";
import "../x-provider/index.mjs";
import J from "./PlaceholderUploader.mjs";
import F from "./DropArea.mjs";
import K from "./SilentUploader.mjs";
import M from "./FileList/FileList.mjs";
import { AttachmentContextProvider as Q } from "./context.mjs";
import W from "./style/index.mjs";
import Y from "../_util/hooks/use-state.mjs";
import "ant-design-vue";
import Z from "../x-provider/hooks/use-x-provider-context.mjs";
const fe = /* @__PURE__ */ k({
name: "AXAttachments",
__name: "Attachments",
props: q({
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(l, {
expose: D
}) {
const b = G(l, ["prefixCls", "rootClassName", "rootStyle", "className", "style", "items", "children", "getDropContainer", "placeholder", "onChange", "onRemove", "overflow", "imageProps", "disabled", "classNames", "styles", "accept", "maxCount"]);
B(l, "prefixCls");
const o = O(), {
getPrefixCls: L,
direction: N
} = Z(), s = L("attachment", l.prefixCls), p = H("attachments"), c = i(() => p.value.classNames), m = i(() => p.value.styles), x = g("attachments-container"), I = g("placeholder-uploader"), U = g("attachments-upload"), R = (e) => e ? typeof e == "object" && e !== null && "value" in e ? e.value ?? null : e : null, A = () => {
var e, t;
return R((e = U.value) == null ? void 0 : e.nativeElement) ?? R((t = I.value) == null ? void 0 : t.nativeElement);
}, f = () => {
var e, t;
return ((t = (e = A()) == null ? void 0 : e.querySelector) == null ? void 0 : t.call(e, 'input[type="file"]')) ?? null;
}, [E, $, T] = W(s), h = i(() => u($.value, T)), [d, w] = Y(l.items);
z(() => l.items, () => {
w(l.items);
});
const P = (e) => {
var t;
w(e.fileList), (t = l.onChange) == null || t.call(l, e);
}, v = i(() => ({
...b,
accept: l.accept,
maxCount: l.maxCount,
fileList: d.value,
onChange: P
})), V = (e) => Promise.resolve(typeof l.onRemove == "function" ? l.onRemove(e) : l.onRemove).then((t) => {
if (t === !1)
return;
const n = d.value.filter((r) => r.uid !== e.uid);
P({
file: {
...e,
status: "removed"
},
fileList: n
});
}), C = (e, t) => {
const n = o.placeholder ? o.placeholder({
type: e
}) : typeof l.placeholder == "function" ? l.placeholder(e) : l.placeholder;
return a(J, {
placeholder: n,
upload: v.value,
prefixCls: s,
className: u(c.value.placeholder, l.classNames.placeholder),
style: {
...m.value.placeholder,
...l.styles.placeholder,
...t == null ? void 0 : t.style
},
ref: e === "inline" ? "placeholder-uploader" : void 0
}, null);
}, S = i(() => d.value.length > 0), j = () => {
var n;
if (l.children) return l.children;
const e = (n = o.default) == null ? void 0 : n.call(o);
if (!e) return null;
const t = Array.isArray(e) ? e : [e];
return t.length ? t.length === 1 ? t[0] : a(y, null, [t]) : null;
}, X = () => {
var n;
const e = (n = o.upload) == null ? void 0 : n.call(o);
if (!e) return;
const t = Array.isArray(e) ? e : [e];
if (t.length)
return t.length === 1 ? t[0] : a(y, null, [t]);
};
return D({
get nativeElement() {
return x.value ?? null;
},
get fileNativeElement() {
return f();
},
upload: (e) => {
const t = f();
if (!t) return;
const n = new DataTransfer();
try {
if ("length" in e && e.length >= 1)
for (let r = 0; r < e.length; r++)
n.items.add(e[r]);
else
n.items.add(e);
t.files = n.files, t.dispatchEvent(new Event("change", {
bubbles: !0
}));
} catch (r) {
console.error("upload failed", r);
}
},
select: (e) => {
const t = f();
if (!t) return;
t.multiple = (e == null ? void 0 : e.multiple) ?? !1;
const n = (e == null ? void 0 : e.accept) ?? l.accept;
t.accept = typeof n == "string" ? n : "", t.click();
}
}), () => {
const e = j(), t = X();
return E(a(Q, {
value: {
disabled: l.disabled
}
}, {
default: () => [e ? a(y, null, [a(K, {
upload: v.value,
rootClassName: l.rootClassName,
ref: "attachments-upload",
children: e
}, null), a(F, {
getDropContainer: l.getDropContainer,
prefixCls: s,
className: u(h.value, l.rootClassName),
children: C("drop")
}, null)]) : a("div", {
class: u(s, h.value, {
[`${s}-rtl`]: N.value === "rtl"
}, l.className, l.rootClassName),
style: {
...l.rootStyle,
...l.style
},
dir: N.value || "ltr",
ref: "attachments-container"
}, [a(M, {
prefixCls: s,
items: d.value,
onRemove: V,
overflow: l.overflow,
upload: v.value,
uploadNode: t,
listClassName: u(c.value.list, l.classNames.list),
listStyle: {
...m.value.list,
...l.styles.list,
...!S.value && {
display: "none"
}
},
uploadClassName: u(c.value.upload, l.classNames.upload),
uploadStyle: {
...m.value.upload,
...l.styles.upload
},
itemClassName: u(c.value.item, l.classNames.item),
itemStyle: {
...m.value.item,
...l.styles.item
},
imageProps: l.imageProps
}, null), C("inline", S.value ? {
style: {
display: "none"
}
} : {}), a(F, {
getDropContainer: l.getDropContainer || (() => x.value),
prefixCls: s,
className: h.value,
children: C("drop")
}, null)])]
}));
};
}
});
export {
fe as default
};