ant-design-x-vue
Version:
Craft AI-driven interfaces effortlessly
254 lines (253 loc) • 7.27 kB
JavaScript
import { defineComponent as $, mergeDefaults as q, toRef as T, useSlots as V, computed as f, useTemplateRef as F, watch as X, createVNode as i, Fragment as B } from "vue";
import M from "../_util/hooks/use-x-component-config.mjs";
import k from "../x-provider/hooks/use-x-provider-context.mjs";
import "../x-provider/context.mjs";
import "ant-design-vue";
import z from "./PlaceholderUploader.mjs";
import L from "./DropArea.mjs";
import G from "./SilentUploader.mjs";
import { _ as H } from "./FileList/FileList2.mjs";
import { AttachmentContextProvider as J } from "./context.mjs";
import K from "./style/index.mjs";
import Q from "../_util/hooks/use-state.mjs";
function W(e, m) {
const s = /* @__PURE__ */ Object.create(null);
for (const r in e)
m.includes(r) || Object.defineProperty(s, r, { enumerable: !0, get: () => e[r] });
return s;
}
function Y(e) {
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
}
var x = { exports: {} };
/*!
Copyright (c) 2018 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
var j;
function Z() {
return j || (j = 1, function(e) {
(function() {
var m = {}.hasOwnProperty;
function s() {
for (var l = "", t = 0; t < arguments.length; t++) {
var o = arguments[t];
o && (l = d(l, r(o)));
}
return l;
}
function r(l) {
if (typeof l == "string" || typeof l == "number")
return l;
if (typeof l != "object")
return "";
if (Array.isArray(l))
return s.apply(null, l);
if (l.toString !== Object.prototype.toString && !l.toString.toString().includes("[native code]"))
return l.toString();
var t = "";
for (var o in l)
m.call(l, o) && l[o] && (t = d(t, o));
return t;
}
function d(l, t) {
return t ? l ? l + " " + t : l + t : l;
}
e.exports ? (s.default = s, e.exports = s) : window.classNames = s;
})();
}(x)), x.exports;
}
var _ = Z();
const c = /* @__PURE__ */ Y(_), fe = /* @__PURE__ */ $({
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(e, {
expose: m
}) {
const s = W(e, ["prefixCls", "rootClassName", "rootStyle", "className", "style", "items", "children", "getDropContainer", "placeholder", "onChange", "onRemove", "overflow", "imageProps", "disabled", "classNames", "styles"]);
T(e, "prefixCls");
const r = V(), {
getPrefixCls: d,
direction: l
} = k(), t = d("attachment", e.prefixCls), o = M("attachments"), C = f(() => o.value.classNames), y = f(() => o.value.styles), w = F("attachments-container"), O = F("placeholder-uploader"), [I, A, E] = K(t), p = f(() => c(A.value, E)), [v, R] = Q(e.items);
X(() => e.items, () => {
R(e.items);
});
const S = (n) => {
var a;
R(n.fileList), (a = e.onChange) == null || a.call(e, n);
}, g = f(() => ({
...s,
fileList: v.value,
onChange: S
})), U = (n) => Promise.resolve(typeof e.onRemove == "function" ? e.onRemove(n) : e.onRemove).then((a) => {
if (a === !1)
return;
const u = v.value.filter((h) => h.uid !== n.uid);
S({
file: {
...n,
status: "removed"
},
fileList: u
});
}), N = (n, a) => {
const u = r.placeholder ? r.placeholder({
type: n
}) : typeof e.placeholder == "function" ? e.placeholder(n) : e.placeholder;
return i(z, {
placeholder: u,
upload: g.value,
prefixCls: t,
className: c(C.value.placeholder, e.classNames.placeholder),
style: {
...y.value.placeholder,
...e.styles.placeholder,
...a == null ? void 0 : a.style
},
ref: n === "inline" ? "placeholder-uploader" : void 0
}, null);
}, P = f(() => v.value.length > 0);
return m({
nativeElement: w.value,
upload: (n) => {
var u, h, b;
const a = (b = (u = O.value) == null ? void 0 : (h = u.nativeElement).querySelector) == null ? void 0 : b.call(h, 'input[type="file"]');
if (a) {
const D = new DataTransfer();
D.items.add(n), a.files = D.files, a.dispatchEvent(new Event("change", {
bubbles: !0
}));
}
}
}), () => I(i(J, {
value: {
disabled: e.disabled
}
}, {
default: () => [e.children ? i(B, null, [i(G, {
upload: g.value,
rootClassName: e.rootClassName,
ref: "attachments-upload",
children: e.children
}, null), i(L, {
getDropContainer: e.getDropContainer,
prefixCls: t,
className: c(p.value, e.rootClassName),
children: N("drop")
}, null)]) : i("div", {
class: c(t, p.value, {
[`${t}-rtl`]: l.value === "rtl"
}, e.className, e.rootClassName),
style: {
...e.rootStyle,
...e.style
},
dir: l.value || "ltr",
ref: "attachments-container"
}, [i(H, {
prefixCls: t,
items: v.value,
onRemove: U,
overflow: e.overflow,
upload: g.value,
listClassName: c(C.value.list, e.classNames.list),
listStyle: {
...y.value.list,
...e.styles.list,
...!P.value && {
display: "none"
}
},
itemClassName: c(C.value.item, e.classNames.item),
itemStyle: {
...y.value.item,
...e.styles.item
},
imageProps: e.imageProps
}, null), N("inline", P.value ? {
style: {
display: "none"
}
} : {}), i(L, {
getDropContainer: e.getDropContainer || (() => w.value),
prefixCls: t,
className: p.value,
children: N("drop")
}, null)])]
}));
}
});
export {
fe as _,
W as a,
c
};