x-next 1.6.0 → 1.7.0

package/dist/es/components/upload/Upload.js

@@ -0,0 +1,420 @@
+import { defineComponent as Me, computed as p, ref as E, watch as Ce, provide as je, onBeforeUnmount as Te, createVNode as R, mergeProps as Z, reactive as Ae } from "vue";
+import { getClassNameMixin as _e } from "../../_utils/config.js";
+import { useFormItem as Be } from "../../_hooks/use-form-item.js";
+import { useLocale as De } from "../../locale/index.js";
+import { isString as j, isFunction as z } from "../../_utils/is.js";
+import { getValueByPath as Oe } from "../../_utils/get-value-by-path.js";
+import ke from "../image/ImagePreviewGroup.vue.js";
+import { uploadProps as ze } from "./props.js";
+import { uploadInjectionKey as Ne } from "./context.js";
+import Se from "./upload-list.js";
+import qe from "./upload-trigger.js";
+import { normalizeFileList as ee, isImageItem as te, revokeThumbUrl as T, collectDropFiles as Ve, collectPasteFiles as Ge, createThumbUrl as re, matchAccept as He, uploadRequest as Ke, resolveAbortHandle as We, isPromiseLike as $e, genUid as Je, normalizePromiseResponse as Qe } from "./utils.js";
+const vt = /* @__PURE__ */ Me({
+  name: "Upload",
+  inheritAttrs: !1,
+  props: ze,
+  emits: {
+    "update:fileList": (n) => !0,
+    change: (n) => !0,
+    progress: (n) => !0,
+    success: (n) => !0,
+    error: (n) => !0,
+    remove: (n) => !0,
+    exceed: (n) => !0,
+    reject: (n) => !0,
+    preview: (n) => !0,
+    download: (n) => !0
+  },
+  slots: Object,
+  setup(n, {
+    attrs: H,
+    emit: c,
+    expose: ne,
+    slots: ae
+  }) {
+    const b = _e("upload"), {
+      t: U
+    } = De(), {
+      mergedDisabled: s,
+      eventHandlers: oe
+    } = Be({
+      disabled: p(() => n.disabled ?? !1)
+    }), K = E(), m = E(ee(n.defaultFileList)), d = /* @__PURE__ */ new Map(), A = /* @__PURE__ */ new Map(), _ = /* @__PURE__ */ new Map(), I = /* @__PURE__ */ new Map();
+    let f = !1;
+    const ie = E(!1), W = E(""), N = (e) => {
+      const t = Ae(e);
+      return d.set(t.uid, t), t;
+    };
+    m.value = m.value.map(N);
+    const F = (e) => {
+      var o;
+      const t = I.delete(e.uid), r = A.get(e.uid);
+      A.delete(e.uid);
+      const a = _.get(e.uid);
+      _.delete(e.uid);
+      try {
+        (o = r == null ? void 0 : r.abort) == null || o.call(r);
+      } catch {
+      }
+      try {
+        a == null || a.abort();
+      } catch {
+      }
+      return t || !!r || !!a;
+    }, le = (e) => {
+      const t = ee(e).map((a) => {
+        const o = d.get(a.uid);
+        return o ? (o.thumbUrl !== a.thumbUrl && T(o.thumbUrl), Object.assign(o, a), o) : N(a);
+      }), r = new Set(t.map((a) => a.uid));
+      [...d.keys()].forEach((a) => {
+        if (r.has(a)) return;
+        const o = d.get(a);
+        o && F(o), T(o == null ? void 0 : o.thumbUrl), d.delete(a);
+      }), m.value = t;
+    };
+    Ce(() => n.fileList, (e) => {
+      e !== void 0 && le(e);
+    }, {
+      immediate: !0,
+      deep: !0
+    });
+    const i = p(() => m.value), y = () => {
+      m.value = m.value.slice();
+    }, h = (e, t) => {
+      var a, o;
+      const r = t.map((u) => ({
+        ...u
+      }));
+      c("update:fileList", r), c("change", {
+        file: e,
+        fileList: r
+      }), (o = (a = oe.value) == null ? void 0 : a.onChange) == null || o.call(a);
+    }, $ = p(() => n.limit > 0 && i.value.length >= n.limit), J = p(() => {
+      const e = n.showUploadButton;
+      return e === !0 || e === void 0 ? !0 : e === !1 ? !1 : !$.value || e.showOnExceedLimit === !0;
+    }), Q = p(() => n.imagePreview), S = p(() => i.value.filter((e) => te(e)).map((e) => e.url || e.thumbUrl).filter((e) => !!e)), q = E(!1), V = E(0), se = (e) => {
+      const t = e.error;
+      if (t instanceof Error) return t.message;
+      if (j(t)) return t;
+      const r = e.response;
+      if (r && j(r.message)) return r.message;
+    }, L = (e) => {
+      W.value = e;
+    }, ue = async (e) => {
+      const t = n.action;
+      return z(t) ? await t(e.file) || void 0 : t || void 0;
+    }, ce = async (e) => {
+      const t = n.data;
+      return z(t) ? t(e) : t;
+    }, de = (e) => {
+      const t = n.name;
+      return z(t) ? t(e) || "file" : t || "file";
+    }, fe = (e, t) => {
+      const r = n.responseUrlKey;
+      if (!r) return;
+      if (z(r)) {
+        const o = r(e, t);
+        j(o) && (e.url = o);
+        return;
+      }
+      const a = Oe(t, r);
+      j(a) && (e.url = a);
+    }, B = async (e) => {
+      const t = d.get(e.uid);
+      if (f || s.value || !(t != null && t.file) || I.has(t.uid) || !n.customRequest && !n.action)
+        return;
+      const r = Symbol();
+      let a = !1;
+      const o = typeof AbortController < "u" ? new AbortController() : void 0;
+      I.set(t.uid, r), o && _.set(t.uid, o);
+      const u = () => !f && I.get(t.uid) === r && d.get(t.uid) === t, l = () => {
+        a = !0, I.delete(t.uid), A.delete(t.uid), _.delete(t.uid);
+      };
+      t.status = "uploading", t.percent = 0, t.error = void 0, y(), h(t, i.value);
+      const g = (v) => {
+        u() && (l(), t.status = "error", t.percent = 0, t.error = v, y(), c("error", t), h(t, i.value), L(U("upload.fileFailed", {
+          name: t.name
+        })));
+      }, w = async (v, C) => {
+        if (!u() || a) return;
+        if (C) {
+          g(v);
+          return;
+        }
+        let O;
+        try {
+          O = await Qe(v);
+        } catch (P) {
+          g(P);
+          return;
+        }
+        !u() || a || Y(O);
+      }, Y = (v) => {
+        if (u()) {
+          t.response = v;
+          try {
+            fe(t, v);
+          } catch (C) {
+            g(C);
+            return;
+          }
+          l(), t.status = "done", t.percent = 1, y(), c("success", t), h(t, i.value), L(U("upload.fileUploaded", {
+            name: t.name
+          }));
+        }
+      };
+      try {
+        const v = await ue(t);
+        if (!u()) return;
+        const C = await ce(t);
+        if (!u()) return;
+        if (s.value) {
+          F(t), t.status = "init", y(), h(t, i.value);
+          return;
+        }
+        if (!n.customRequest && !v) throw new Error("Upload action resolved to an empty URL");
+        const O = {
+          action: v ?? "",
+          method: n.method,
+          name: de(t),
+          file: t.file,
+          fileItem: t,
+          data: C,
+          headers: n.headers,
+          withCredentials: n.withCredentials,
+          timeout: n.timeout,
+          signal: o == null ? void 0 : o.signal,
+          onProgress: (x, Re) => {
+            if (!u()) return;
+            t.status = "uploading", t.percent = Number.isFinite(x) ? Math.max(0, Math.min(1, x)) : 0, y();
+            const Ie = {
+              file: t,
+              fileList: i.value,
+              percent: t.percent,
+              event: Re
+            };
+            c("progress", Ie), h(t, i.value);
+          },
+          onSuccess: Y,
+          onError: g
+        }, P = (n.customRequest ?? Ke)(O), k = We(P);
+        k && u() ? A.set(t.uid, {
+          abort: k
+        }) : k && !a && k(), $e(P) && (!a && u() ? Promise.resolve(P).then((x) => void w(x, !1), (x) => void w(x, !0)) : Promise.resolve(P).catch(() => {
+        }));
+      } catch (v) {
+        g(v);
+      }
+    }, ve = (e) => N({
+      uid: Je(),
+      name: e.name,
+      size: e.size,
+      type: e.type,
+      lastModified: e.lastModified,
+      status: "init",
+      percent: 0,
+      file: e,
+      thumbUrl: re(e)
+    }), me = async (e, t) => {
+      if (!n.beforeUpload) return e;
+      const r = await n.beforeUpload(e, t);
+      return r === !1 ? null : r === !0 || r === void 0 || r === null ? e : r instanceof File ? r : r instanceof Blob ? new File([r], e.name, {
+        type: r.type || e.type
+      }) : j(r) ? new File([r], e.name, {
+        type: e.type
+      }) : e;
+    }, he = (e) => {
+      n.autoUpload && B(e);
+    }, M = (e, t) => {
+      e.length && c("reject", {
+        files: e,
+        reason: t
+      });
+    }, D = async (e) => {
+      if (f || s.value || !e.length) return;
+      const t = n.multiple || n.directory ? e : e.slice(0, 1), r = [], a = [];
+      t.forEach((l) => {
+        He(l, n.accept) ? r.push(l) : a.push(l);
+      }), M(a, "accept");
+      const o = [], u = [];
+      if (r.forEach((l) => {
+        if (n.limit > 0 && i.value.length + u.length >= n.limit) {
+          o.push(l);
+          return;
+        }
+        u.push(l);
+      }), o.length) {
+        const l = {
+          files: o,
+          fileList: i.value
+        };
+        c("exceed", l), M(o, "limit"), L(U("upload.exceed", {
+          count: o.length
+        }));
+      }
+      for (const l of u) {
+        if (f || s.value) return;
+        let g = null;
+        try {
+          g = await me(l, u);
+        } catch {
+          if (f || s.value) return;
+          M([l], "beforeUpload");
+          continue;
+        }
+        if (f || s.value) return;
+        if (!g) {
+          M([l], "beforeUpload");
+          continue;
+        }
+        if (f || s.value) return;
+        if (n.limit > 0 && i.value.length >= n.limit) {
+          c("exceed", {
+            files: [l],
+            fileList: i.value
+          }), M([l], "limit"), L(U("upload.exceed", {
+            count: 1
+          }));
+          continue;
+        }
+        const w = ve(g);
+        m.value = [...m.value, w], h(w, i.value), L(U("upload.fileAdded", {
+          name: w.name
+        })), he(w);
+      }
+    }, ge = () => {
+      var e;
+      s.value || (e = K.value) == null || e.click();
+    }, pe = (e) => {
+      const t = e.target, r = Array.from(t.files ?? []);
+      t.value = "", D(r);
+    }, be = (e) => {
+      if (s.value || !e.dataTransfer) return;
+      const t = Array.from(e.dataTransfer.files ?? []);
+      (n.directory ? Ve(e.dataTransfer) : Promise.resolve(t)).then((a) => D(a)).catch(() => {
+        !f && !s.value && c("reject", {
+          files: t,
+          reason: "read"
+        });
+      });
+    }, ye = (e) => {
+      if (!n.paste || s.value) return;
+      const t = Ge(e.clipboardData);
+      t.length && (e.preventDefault(), D(t));
+    }, G = (e) => {
+      e = d.get(e.uid) ?? e, F(e) && (e.status = "init", e.percent = 0, y(), h(e, i.value));
+    }, X = (e) => {
+      B(e);
+    }, we = (e) => {
+      F(e), T(e.thumbUrl), d.delete(e.uid), m.value = m.value.filter((t) => t.uid !== e.uid), c("remove", e), h(e, i.value), L(U("upload.fileRemoved", {
+        name: e.name
+      }));
+    }, Ue = async (e) => {
+      if (!(f || s.value || d.get(e.uid) !== e)) {
+        if (n.beforeRemove) {
+          let t;
+          try {
+            t = await n.beforeRemove(e);
+          } catch {
+            t = !1;
+          }
+          if (t === !1) return;
+        }
+        f || s.value || d.get(e.uid) !== e || we(e);
+      }
+    }, Fe = (e) => {
+      if (Q.value && te(e)) {
+        const t = e.url || e.thumbUrl, r = t ? S.value.indexOf(t) : -1;
+        r >= 0 && (V.value = r, q.value = !0);
+      }
+      c("preview", e);
+    }, Le = (e) => {
+      const t = e.url || e.thumbUrl;
+      if (t) {
+        const r = document.createElement("a");
+        r.href = t, r.download = e.name, r.rel = "noopener", r.click();
+      }
+      c("download", e);
+    };
+    ne({
+      submit: (e) => {
+        if (e) {
+          B(e);
+          return;
+        }
+        i.value.filter((t) => t.status === "init" && !!t.file).forEach((t) => void B(t));
+      },
+      abort: (e) => {
+        if (e) {
+          G(e);
+          return;
+        }
+        i.value.forEach((t) => {
+          t.status === "uploading" && G(t);
+        });
+      },
+      retry: X,
+      upload: (e) => {
+        D(e);
+      },
+      updateFile: (e, t) => {
+        const r = d.get(e);
+        f || s.value || !r || (F(r), T(r.thumbUrl), r.file = t, r.name = t.name, r.size = t.size, r.type = t.type, r.lastModified = t.lastModified, r.url = void 0, r.response = void 0, r.thumbUrl = re(t), r.status = "init", r.percent = 0, r.error = void 0, y(), h(r, i.value));
+      },
+      fileList: i
+    });
+    const Pe = {
+      props: n,
+      slots: ae,
+      disabled: s,
+      listType: p(() => n.listType),
+      fileList: i,
+      isMax: $,
+      showTrigger: J,
+      dragging: ie,
+      inputRef: K,
+      openFileDialog: ge,
+      onFileChange: pe,
+      onDropFiles: be,
+      handleRemove: Ue,
+      handleRetry: X,
+      handleCancel: G,
+      handlePreview: Fe,
+      handleDownload: Le,
+      getErrorText: se,
+      getTriggerAttrs: () => Object.fromEntries(Object.entries(H).filter(([e]) => e === "id" || e.startsWith("aria-")))
+    };
+    je(Ne, Pe), Te(() => {
+      f = !0, i.value.forEach((e) => {
+        F(e), T(e.thumbUrl);
+      });
+    });
+    const xe = p(() => [b.block, b.modifier(`list-type-${n.listType}`), n.draggable && b.modifier("draggable"), s.value && b.is("disabled")]), Ee = p(() => ({
+      srcList: S.value,
+      current: V.value,
+      visible: q.value,
+      infinite: !0
+    }));
+    return () => R("div", Z(Object.fromEntries(Object.entries(H).filter(([e]) => e !== "id" && !e.startsWith("aria-"))), {
+      class: xe.value,
+      onPaste: n.paste ? ye : void 0
+    }), [n.showFileList ? R(Se, null, null) : J.value && R("span", {
+      class: [b.element("entry"), n.draggable && b.is("entry-block")]
+    }, [R(qe, null, null)]), Q.value && S.value.length > 0 && R(ke, Z(Ee.value, {
+      "onUpdate:visible": (e) => {
+        q.value = e;
+      },
+      "onUpdate:current": (e) => {
+        V.value = e;
+      }
+    }), null), R("span", {
+      class: b.element("announcement"),
+      role: "status",
+      "aria-live": "polite"
+    }, [W.value])]);
+  }
+});
+export {
+  vt as default
+};

package/dist/es/components/upload/context.js

@@ -0,0 +1,4 @@
+const o = Symbol("x-upload");
+export {
+  o as uploadInjectionKey
+};

package/dist/es/components/upload/index.js

@@ -0,0 +1,8 @@
+import o from "./Upload.js";
+import { generateComponent as t } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as e } from "../../_utils/config.js";
+const a = t(e("Upload"), o);
+export {
+  a as Upload,
+  a as default
+};