@matechat/core 1.10.0 → 1.11.0-alpha.0

package/Attachment/index.js

@@ -1,10 +1,10 @@
 import "./index.css";
-import { createApp as $, h as H, defineComponent as P, ref as D, onMounted as R, createBlock as j, openBlock as v, Transition as L, withCtx as W, createElementBlock as F, createCommentVNode as E, normalizeClass as S, createElementVNode as g, toDisplayString as _, computed as Y, onUnmounted as X, mergeModels as M, useModel as G, Fragment as N, unref as u, renderSlot as J, Teleport as K, createTextVNode as V } from "vue";
-import { useMcI18n as q } from "@matechat/core/Locale";
-const Q = {
+import { computed as P, defineComponent as E, inject as U, ref as b, watch as N, onMounted as S, onBeforeUnmount as R, createBlock as k, openBlock as T, Teleport as V, withDirectives as M, createElementVNode as w, renderSlot as A, vShow as O, mergeModels as x, useSlots as B, useModel as $, provide as j, createElementBlock as z, unref as g, normalizeClass as _, createCommentVNode as H, withCtx as L, createTextVNode as W, toDisplayString as q } from "vue";
+import { useMcI18n as Y } from "@matechat/core/Locale";
+const K = {
   uploadOptions: {
     type: Object,
-    default: {}
+    default: () => ({})
   },
   disabled: {
     type: Boolean,
@@ -14,6 +14,9 @@ const Q = {
     type: String,
     default: ""
   },
+  dropPlaceholder: {
+    type: String
+  },
   maxCount: {
     type: Number,
     default: Number.POSITIVE_INFINITY
@@ -33,355 +36,252 @@ const Q = {
   beforeUpload: {
     type: Function,
     default: null
-  }
-}, Z = {
-  change: (e, s) => e instanceof File && Array.isArray(s),
-  success: (e, s, t) => e instanceof File && Array.isArray(t),
-  error: (e, s, t) => e instanceof File && Array.isArray(t),
-  progress: (e, s) => e instanceof File && Array.isArray(s),
-  drop: (e) => Array.isArray(e)
-}, ee = { class: "mc-alert__header" }, te = { class: "mc-alert__title" }, ae = { class: "mc-alert__content" }, ne = { class: "mc-alert__message" };
-function z(e) {
-  const s = document.createElement("div");
-  document.body.appendChild(s);
-  const t = $({
-    render() {
-      return H(se, {
-        ...e,
-        // 这个函数将作为 'onClose' prop 传递给 AlertComponent 实例
-        onClose: () => {
-          t.unmount(), s.parentNode && s.parentNode.removeChild(s);
-        }
-      });
-    }
-  });
-  t.mount(s);
-}
-const se = /* @__PURE__ */ P({
-  __name: "Alert",
-  props: {
-    type: {
-      type: String,
-      default: "info"
-    },
-    title: {
-      type: String,
-      required: !0
-    },
-    message: {
-      type: String,
-      required: !0
-    },
-    duration: {
-      type: Number,
-      default: 4500
-    },
-    // 这个 prop 由上面的 showAlert 函数传入
-    onClose: {
-      type: Function,
-      required: !0
-    }
   },
-  setup(e) {
-    const s = e, t = D(!1);
-    R(() => {
-      t.value = !0, s.duration > 0 && setTimeout(l, s.duration);
-    });
-    function l() {
-      t.value = !1, setTimeout(() => {
-        s.onClose();
-      }, 300);
-    }
-    return (m, f) => (v(), j(L, { name: "mc-alert-fade" }, {
-      default: W(() => [
-        t.value ? (v(), F(
-          "div",
-          {
-            key: 0,
-            class: S(["mc-alert", `mc-alert--${e.type}`])
-          },
-          [
-            g("div", ee, [
-              g(
-                "span",
-                te,
-                _(e.title),
-                1
-                /* TEXT */
-              ),
-              g("button", {
-                class: "mc-alert__close-btn",
-                onClick: l
-              }, "✕")
-            ]),
-            g("div", ae, [
-              g(
-                "pre",
-                ne,
-                _(e.message),
-                1
-                /* TEXT */
-              )
-            ])
-          ],
-          2
-          /* CLASS */
-        )) : E("v-if", !0)
-      ]),
-      _: 1
-      /* STABLE */
-    }));
+  getDropContainer: {
+    type: Function
   }
-});
-function oe(e) {
-  const { file: s, options: t, onProgress: l, onSuccess: m, onError: f } = e, a = new XMLHttpRequest();
-  a.upload.onprogress = (i) => {
-    if (i.lengthComputable) {
-      const h = Math.round(i.loaded * 100 / i.total);
-      l(h);
+}, X = {
+  change: (a, s) => a instanceof File && Array.isArray(s),
+  success: (a, s, o) => a instanceof File && Array.isArray(o),
+  error: (a, s, o) => a instanceof File && Array.isArray(o),
+  progress: (a, s) => a instanceof File && Array.isArray(s),
+  drop: (a) => Array.isArray(a),
+  validChange: (a) => Array.isArray(a)
+}, I = "mc-attachment";
+function G(a) {
+  const { file: s, options: o, onProgress: i, onSuccess: h, onError: p } = a, t = new XMLHttpRequest();
+  t.upload.onprogress = (l) => {
+    if (l.lengthComputable) {
+      const r = Math.round(l.loaded * 100 / l.total);
+      i(r);
     }
-  }, a.onerror = () => {
-    f({
+  }, t.onerror = () => {
+    p({
       message: "Upload failed due to a network error.",
-      status: a.status,
-      statusText: a.statusText
+      status: t.status,
+      statusText: t.statusText
     });
-  }, a.onload = () => {
-    if (a.status >= 200 && a.status < 300) {
-      const i = t.responseType === "text" || !a.response ? a.responseText : a.response;
-      m(i);
+  }, t.onload = () => {
+    if (t.status >= 200 && t.status < 300) {
+      const l = o.responseType === "text" || !t.response ? t.responseText : t.response;
+      h(l);
     } else
-      f({
-        message: `Upload failed with status: ${a.status}`,
-        status: a.status,
-        statusText: a.statusText,
-        response: a.response
+      p({
+        message: `Upload failed with status: ${t.status}`,
+        status: t.status,
+        statusText: t.statusText,
+        response: t.response
       });
   };
-  const p = new FormData(), b = t.fileFieldName || "file";
-  if (p.append(b, s, s.name), t.additionalParameter)
-    for (const i of Object.keys(t.additionalParameter))
-      p.append(i, t.additionalParameter[i]);
-  if (a.open(t.method || "POST", t.uri, !0), t.withCredentials && (a.withCredentials = !0), t.responseType && (a.responseType = t.responseType), t.headers)
-    for (const i of Object.keys(t.headers))
-      a.setRequestHeader(i, t.headers[i]);
-  if (t.authToken) {
-    const i = t.authTokenHeader || "Authorization";
-    a.setRequestHeader(i, t.authToken);
+  const c = new FormData(), m = o.fileFieldName || "file";
+  if (c.append(m, s, s.name), o.additionalParameter)
+    for (const l of Object.keys(o.additionalParameter))
+      c.append(l, o.additionalParameter[l]);
+  if (t.open(o.method || "POST", o.uri, !0), o.withCredentials && (t.withCredentials = !0), o.responseType && (t.responseType = o.responseType), o.headers)
+    for (const l of Object.keys(o.headers))
+      t.setRequestHeader(l, o.headers[l]);
+  if (o.authToken) {
+    const l = o.authTokenHeader || "Authorization";
+    t.setRequestHeader(l, o.authToken);
   }
-  a.send(p);
+  t.send(c);
 }
-let re = Date.now();
-function le(e, s, t, l) {
-  const { t: m } = q(), f = D(!1);
-  let a = 0;
-  const p = Y(() => e.disabled || l.value.length >= e.maxCount), b = (n) => {
-    const d = URL.createObjectURL(n);
+let J = Date.now();
+function Q(a, s, o, i) {
+  const h = P(() => a.disabled || i.value.length >= a.maxCount), p = (r) => {
+    const d = URL.createObjectURL(r);
     return {
-      uid: re++,
-      name: n.name,
-      size: n.size,
-      type: n.type,
+      uid: J++,
+      name: r.name,
+      size: r.size,
+      type: r.type,
       status: "uploading",
       percentage: 0,
       url: d,
       thumbUrl: d
     };
-  }, i = async (n) => {
-    if (n.length === 0) return;
-    if (l.value.length + n.length > e.maxCount) {
-      z({
-        type: "error",
-        title: m("Attachment.exceedCountTitle"),
-        message: m("Attachment.exceedCountMessage", {
-          maxCount: e.maxCount
-        })
-      });
+  }, t = async (r) => {
+    if (r.length === 0) return;
+    if (i.value.length + r.length > a.maxCount) {
+      s("validChange", [{ type: "exceedCount" }]);
       return;
     }
-    const d = [], c = [];
-    for (const o of n) {
-      let r = !0;
-      if (e.accept && e.accept !== "*") {
-        const C = e.accept.split(",").map((y) => y.trim().toLowerCase()), k = o.type.toLowerCase(), B = o.name.toLowerCase();
-        C.some((y) => y.endsWith("/*") ? k.startsWith(y.slice(0, -1)) : y.startsWith(".") ? B.endsWith(y) : k === y) || (c.push(
-          m("Attachment.unsupportedFileType", { fileName: o.name })
-        ), r = !1);
+    const d = [], u = [];
+    for (const n of r) {
+      let e = !0;
+      if (a.accept && a.accept !== "*") {
+        const f = a.accept.split(",").map((y) => y.trim().toLowerCase()), v = n.type.toLowerCase(), C = n.name.toLowerCase();
+        f.some((y) => y.endsWith("/*") ? v.startsWith(y.slice(0, -1)) : y.startsWith(".") ? C.endsWith(y) : v === y) || (u.push({ type: "unsupportedFileType", file: n }), e = !1);
       }
-      if (r && o.size / 1024 / 1024 > e.maxSize && (c.push(
-        m("Attachment.exceedSizeLimit", {
-          fileName: o.name,
-          maxSize: e.maxSize
-        })
-      ), r = !1), r && e.beforeUpload)
+      if (e && n.size / 1024 / 1024 > a.maxSize && (u.push({ type: "exceedSizeLimit", file: n }), e = !1), e && a.beforeUpload)
         try {
-          await Promise.resolve(e.beforeUpload(o)) === !1 && (c.push(
-            m("Attachment.uploadRejected", { fileName: o.name })
-          ), r = !1);
-        } catch (C) {
-          const k = C instanceof Error ? C.message : String(C);
-          c.push(
-            m("Attachment.beforeUploadFailed", {
-              fileName: o.name,
-              errorMsg: k
-            })
-          ), r = !1;
+          await Promise.resolve(a.beforeUpload(n)) === !1 && (u.push({ type: "beforeUploadRejected", file: n }), e = !1);
+        } catch {
+          u.push({ type: "beforeUploadRejected", file: n }), e = !1;
         }
-      r && d.push(o);
+      e && d.push(n);
     }
-    if (c.length > 0 && z({
-      type: "error",
-      title: m("Attachment.uploadFailedTitle"),
-      message: c.join(`
-`)
-    }), d.length !== 0)
-      for (const o of d) {
-        const r = b(o);
-        l.value.push(r), s("change", o, [...l.value]), h(o, r);
+    if (u.length > 0 && s("validChange", u), d.length !== 0)
+      for (const n of d) {
+        const e = p(n);
+        i.value.push(e), s("change", n, [...i.value]), c(n, e);
       }
-  }, h = (n, d) => {
-    const c = () => l.value.findIndex((o) => o.uid === d.uid);
-    oe({
-      file: n,
-      options: e.uploadOptions,
-      onProgress: (o) => {
-        const r = c();
-        r > -1 && (l.value[r].percentage = o, s("progress", n, [...l.value]));
+  }, c = (r, d) => {
+    const u = () => i.value.findIndex((n) => n.uid === d.uid);
+    G({
+      file: r,
+      options: a.uploadOptions,
+      onProgress: (n) => {
+        const e = u();
+        e > -1 && (i.value[e].percentage = n, s("progress", r, [...i.value]));
       },
-      onSuccess: (o) => {
-        const r = c();
-        r > -1 && (l.value[r].status = "success", l.value[r].response = o, s("success", n, o, [...l.value]));
+      onSuccess: (n) => {
+        const e = u();
+        e > -1 && (i.value[e].status = "success", i.value[e].response = n, s("success", r, n, [...i.value]));
       },
-      onError: (o) => {
-        const r = c();
-        r > -1 && (l.value[r].status = "uploadError", l.value[r].error = o, s("error", n, o, [...l.value]));
+      onError: (n) => {
+        const e = u();
+        e > -1 && (i.value[e].status = "uploadError", i.value[e].error = n, s("error", r, n, [...i.value]));
       }
     });
-  }, x = (n) => {
-    const d = n.target.files;
-    d && i(Array.from(d));
-  }, A = () => {
-    var n;
-    p.value || (n = t.value) == null || n.click();
-  }, T = (n) => {
-    n.preventDefault(), a++, a === 1 && (f.value = !0);
-  }, I = (n) => {
-    n.preventDefault();
-  }, U = (n) => {
-    n.preventDefault(), a--, a === 0 && (f.value = !1);
-  }, w = (n) => {
-    var c;
-    if (n.preventDefault(), f.value = !1, a = 0, p.value) return;
-    const d = Array.from(((c = n.dataTransfer) == null ? void 0 : c.files) || []);
-    d.length > 0 && (s("drop", d), i(d));
   };
-  return R(() => {
-    e.draggable && (document.body.addEventListener("dragenter", T), document.body.addEventListener("dragover", I), document.body.addEventListener("dragleave", U), document.body.addEventListener("drop", w));
-  }), X(() => {
-    e.draggable && (document.body.removeEventListener("dragenter", T), document.body.removeEventListener("dragover", I), document.body.removeEventListener("dragleave", U), document.body.removeEventListener("drop", w));
-  }), {
-    isDragging: f,
-    isDisabled: p,
-    handleClick: A,
-    handleFileChange: x
+  return {
+    isDisabled: h,
+    handleClick: () => {
+      var r;
+      h.value || (r = o.value) == null || r.click();
+    },
+    handleFileChange: (r) => {
+      const d = r.target.files;
+      d && t(Array.from(d));
+    },
+    uploadFiles: t
   };
 }
-const ie = ["disabled"], de = ["accept", "multiple", "disabled"], O = /* @__PURE__ */ P({
+const Z = /* @__PURE__ */ E({
+  __name: "drop-area",
+  setup(a) {
+    const { rootProps: s, rootEmits: o, isDisabled: i, uploadFiles: h } = U(
+      I
+    ), p = b(), t = b(), c = b(!1);
+    let m = 0;
+    N(
+      () => s.getDropContainer,
+      (e) => {
+        if (e) {
+          const f = e();
+          p.value !== f && (p.value = f);
+        }
+      }
+    );
+    const l = (e) => {
+      if (e.preventDefault(), m++, m === 1 && (c.value = !0), p.value && t.value)
+        if (p.value === document.body)
+          t.value.style.inset = "0";
+        else {
+          const { x: f, y: v, width: C, height: D } = p.value.getBoundingClientRect();
+          t.value.style.width = `${C}px`, t.value.style.height = `${D}px`, t.value.style.top = `${v}px`, t.value.style.left = `${f}px`;
+        }
+    }, r = (e) => {
+      e.preventDefault();
+    }, d = (e) => {
+      e.preventDefault(), m--, m === 0 && (c.value = !1);
+    }, u = (e) => {
+      var v;
+      if (e.preventDefault(), c.value = !1, m = 0, i.value) return;
+      const f = Array.from(((v = e.dataTransfer) == null ? void 0 : v.files) || []);
+      f.length > 0 && (o("drop", f), h(f));
+    };
+    function n(e) {
+      e.preventDefault(), c.value = !1, m = 0;
+    }
+    return S(() => {
+      s.getDropContainer && (p.value = s.getDropContainer()), document.body.addEventListener("dragenter", l), document.body.addEventListener("dragover", r), document.body.addEventListener("dragleave", d), document.body.addEventListener("drop", n);
+    }), R(() => {
+      document.body.removeEventListener("dragenter", l), document.body.removeEventListener("dragover", r), document.body.removeEventListener("dragleave", d), document.body.removeEventListener("drop", n);
+    }), (e, f) => (T(), k(V, { to: "body" }, [
+      M(w(
+        "div",
+        {
+          ref_key: "dropAreaEl",
+          ref: t,
+          class: "mc-attachment-drop-area",
+          onDrop: u
+        },
+        [
+          A(e.$slots, "default")
+        ],
+        544
+        /* NEED_HYDRATION, NEED_PATCH */
+      ), [
+        [O, c.value]
+      ])
+    ]));
+  }
+}), ee = ["accept", "multiple", "disabled"], F = /* @__PURE__ */ E({
   name: "McAttachment",
   __name: "Attachment",
-  props: /* @__PURE__ */ M(Q, {
+  props: /* @__PURE__ */ x(K, {
     modelValue: { default: [] },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ M(Z, ["update:modelValue"]),
-  setup(e, { emit: s }) {
-    const t = e, l = s, m = G(e, "modelValue"), { t: f } = q(), a = D(), { handleClick: p, handleFileChange: b, isDragging: i, isDisabled: h } = le(
+  emits: /* @__PURE__ */ x(X, ["update:modelValue"]),
+  setup(a, { emit: s }) {
+    const o = a, i = s;
+    B();
+    const h = $(a, "modelValue"), { t: p } = Y(), t = b(), { handleClick: c, handleFileChange: m, isDisabled: l, uploadFiles: r } = Q(
+      o,
+      i,
       t,
-      l,
-      a,
-      m
+      h
     );
-    return (x, A) => (v(), F(
-      N,
-      null,
+    return j(I, {
+      rootProps: o,
+      rootEmits: i,
+      isDisabled: l,
+      uploadFiles: r
+    }), (d, u) => (T(), z(
+      "div",
+      {
+        class: _(["mc-attachment", { "is-disabled": g(l) }]),
+        onClick: u[1] || (u[1] = //@ts-ignore
+        (...n) => g(c) && g(c)(...n))
+      },
       [
-        g(
-          "div",
-          {
-            class: S(["mc-attachment", { "is-disabled": u(h) }]),
-            onClick: A[1] || (A[1] = //@ts-ignore
-            (...T) => u(p) && u(p)(...T))
-          },
-          [
-            E(" 使用插槽允许用户自定义触发器内容，例如按钮或文本 "),
-            J(x.$slots, "default", {}, () => [
-              g("button", {
-                class: "mc-attachment-default-trigger",
-                disabled: u(h)
-              }, " + " + _(u(f)("Attachment.attachFile")), 9, ie)
-            ]),
-            g("input", {
-              ref_key: "inputRef",
-              ref: a,
-              type: "file",
-              class: "mc-attachment-file",
-              accept: x.accept,
-              multiple: x.multiple,
-              disabled: u(h),
-              onChange: A[0] || (A[0] = //@ts-ignore
-              (...T) => u(b) && u(b)(...T))
-            }, null, 40, de)
-          ],
-          2
-          /* CLASS */
-        ),
-        (v(), j(K, { to: "body" }, [
-          u(i) ? (v(), F(
-            "div",
-            {
-              key: 0,
-              class: S(["mc-attachment-drag-modal", { "is-disabled": u(h) }])
-            },
-            [
-              u(h) ? (v(), F(
-                N,
-                { key: 0 },
-                [
-                  V(
-                    _(u(f)("Attachment.disabledUpload")),
-                    1
-                    /* TEXT */
-                  )
-                ],
-                64
-                /* STABLE_FRAGMENT */
-              )) : (v(), F(
-                N,
-                { key: 1 },
-                [
-                  V(
-                    _(u(f)("Attachment.dragToUpload")),
-                    1
-                    /* TEXT */
-                  )
-                ],
-                64
-                /* STABLE_FRAGMENT */
-              ))
-            ],
-            2
-            /* CLASS */
-          )) : E("v-if", !0)
-        ]))
+        A(d.$slots, "default"),
+        w("input", {
+          ref_key: "inputRef",
+          ref: t,
+          type: "file",
+          class: "mc-attachment-file",
+          accept: d.accept,
+          multiple: d.multiple,
+          disabled: g(l),
+          onChange: u[0] || (u[0] = //@ts-ignore
+          (...n) => g(m) && g(m)(...n))
+        }, null, 40, ee),
+        d.draggable ? (T(), k(Z, { key: 0 }, {
+          default: L(() => [
+            A(d.$slots, "dropPlaceholder", {}, () => [
+              W(
+                q(d.dropPlaceholder ?? g(p)("Attachment.dragToUpload")),
+                1
+                /* TEXT */
+              )
+            ])
+          ]),
+          _: 3
+          /* FORWARDED */
+        })) : H("v-if", !0)
       ],
-      64
-      /* STABLE_FRAGMENT */
+      2
+      /* CLASS */
     ));
   }
 });
-O.install = (e) => {
-  e.component("McAttachment", O);
+F.install = (a) => {
+  a.component("McAttachment", F);
 };
 export {
-  O as McAttachment
+  F as McAttachment
 };

package/Attachment/uploader.d.ts

@@ -0,0 +1,11 @@
+import type { FileItem, UploadOptions } from './attachment-types';
+interface UploaderOptions {
+    file: File;
+    fileItem: FileItem;
+    options: UploadOptions;
+    onProgress: (percentage: number) => void;
+    onSuccess: (response: unknown) => void;
+    onError: (error: unknown) => void;
+}
+export declare function upload(config: UploaderOptions): void;
+export {};

package/Attachment/use-upload.d.ts

@@ -0,0 +1,8 @@
+import type { Ref } from "vue";
+import type { AttachmentEmits, AttachmentProps, FileItem } from "./attachment-types";
+export declare function useUpload(props: AttachmentProps, emit: AttachmentEmits, inputRef: Ref<HTMLInputElement | undefined>, fileList: Ref<FileItem[]>): {
+    isDisabled: import("vue").ComputedRef<boolean>;
+    handleClick: () => void;
+    handleFileChange: (e: Event) => void;
+    uploadFiles: (files: File[]) => Promise<void>;
+};