x-next 1.6.0 → 1.8.0

package/dist/es/components/upload/upload-trigger.js

@@ -0,0 +1,89 @@
+import { defineComponent as I, inject as L, computed as n, watch as P, createVNode as l, mergeProps as v } from "vue";
+import { getClassNameMixin as E } from "../../_utils/config.js";
+import { useLocale as K } from "../../locale/index.js";
+import { IconUploadCloud as N } from "../../icons/_self/upload-icons.js";
+import { uploadInjectionKey as U } from "./context.js";
+import { useFormItem as j, useFormItemControl as A } from "../../_hooks/use-form-item.js";
+const S = /* @__PURE__ */ I({
+  name: "UploadTrigger",
+  setup() {
+    const e = L(U);
+    if (!e) return () => null;
+    const {
+      t: o
+    } = K(), r = E("upload"), {
+      formItemCtx: m,
+      eventHandlers: b
+    } = j(), d = A(m, () => ({
+      ...e.getTriggerAttrs(),
+      ...e.props.ariaLabel ? {
+        "aria-label": e.props.ariaLabel
+      } : {}
+    }), {
+      labelable: !1
+    }), t = n(() => e.props.draggable), c = n(() => e.listType.value === "picture-card"), y = n(() => e.props.ariaLabel || o("upload.trigger")), D = n(() => [r.element("trigger"), t.value && r.element("dragger"), t.value && e.dragging.value && r.is("dragging"), e.listType.value === "picture-card" && r.element("picture-trigger"), e.disabled.value && r.is("disabled")]), T = n(() => e.dragging.value ? o("upload.dragHover") : t.value ? o("upload.drag") : o("upload.buttonText"));
+    P(e.disabled, (a) => {
+      a && (e.dragging.value = !1);
+    });
+    const g = () => {
+      e.disabled.value || e.openFileDialog();
+    }, C = (a) => {
+      a.key !== "Enter" && a.key !== " " || (a.preventDefault(), g());
+    }, h = (a) => {
+      t.value && (a.preventDefault(), !e.disabled.value && (e.dragging.value = !0));
+    }, x = (a) => {
+      t.value && (a.preventDefault(), a.dataTransfer && (a.dataTransfer.dropEffect = e.disabled.value ? "none" : "copy"), !e.disabled.value && (e.dragging.value = !0));
+    }, k = (a) => {
+      if (e.disabled.value || !t.value) return;
+      const i = a.currentTarget, s = a.relatedTarget;
+      s && i.contains(s) || (e.dragging.value = !1);
+    }, F = (a) => {
+      t.value && (a.preventDefault(), e.dragging.value = !1, !e.disabled.value && e.onDropFiles(a));
+    };
+    return () => {
+      const a = {
+        type: "file",
+        class: r.element("input"),
+        "aria-hidden": "true",
+        tabindex: -1
+      };
+      e.props.accept && (a.accept = e.props.accept), (e.props.multiple || e.props.directory) && (a.multiple = !0), a.disabled = e.disabled.value, e.props.directory && (a.directory = "", a.webkitdirectory = ""), e.props.capture !== void 0 && e.props.capture !== !1 && (a.capture = e.props.capture === !0 ? "" : e.props.capture);
+      const i = e.slots["upload-button"] ?? e.slots.default, s = i ? i() : [l("span", {
+        class: r.element("trigger-icon"),
+        key: "icon"
+      }, [l(N, {
+        size: t.value ? 40 : c.value ? 20 : 16
+      }, null)]), l("span", {
+        class: r.element("trigger-text"),
+        key: "text"
+      }, [T.value])], w = !!e.props.tip && !c.value;
+      return l("div", v(d.value, {
+        class: D.value,
+        role: "button",
+        tabindex: e.disabled.value ? void 0 : 0,
+        "aria-disabled": e.disabled.value || void 0,
+        "aria-label": d.value["aria-label"] || (d.value["aria-labelledby"] ? void 0 : y.value),
+        onClick: g,
+        onKeydown: C,
+        onDragenter: h,
+        onDragover: x,
+        onDragleave: k,
+        onDrop: F,
+        onFocusout: (u) => {
+          var p, f;
+          u.currentTarget.contains(u.relatedTarget) || (f = (p = b.value) == null ? void 0 : p.onBlur) == null || f.call(p);
+        }
+      }), [l("input", v({
+        ref: e.inputRef
+      }, a, {
+        onChange: e.onFileChange,
+        onClick: (u) => u.stopPropagation()
+      }), null), s, w && l("span", {
+        class: r.element("tip")
+      }, [e.props.tip])]);
+    };
+  }
+});
+export {
+  S as default
+};

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

@@ -0,0 +1,195 @@
+import { isFunction as j } from "../../_utils/is.js";
+const u = [
+  "avif",
+  "bmp",
+  "dpg",
+  "gif",
+  "heic",
+  "heif",
+  "ico",
+  "jfif",
+  "jpeg",
+  "jpg",
+  "png",
+  "svg",
+  "tif",
+  "tiff",
+  "webp"
+], E = {
+  "audio/mp3": "audio/mpeg",
+  "image/jpg": "image/jpeg",
+  "text/xml": "application/xml"
+}, R = {
+  jpeg: ["jpeg", "jpg"],
+  jpg: ["jpeg", "jpg"],
+  tif: ["tif", "tiff"],
+  tiff: ["tif", "tiff"]
+};
+let x = 0;
+const L = () => `${Date.now().toString(36)}-${(x++).toString(36)}`, d = (t) => {
+  const e = (t ?? "").toLowerCase().split(";")[0].trim();
+  return E[e] ?? e;
+}, a = (t) => {
+  const e = t.lastIndexOf(".");
+  return e >= 0 ? t.slice(e + 1).toLowerCase() : "";
+}, p = (t, e) => (R[t] ?? [t]).includes(e), P = (t, e) => {
+  const r = (e ?? "").split(",").map((s) => s.trim().toLowerCase()).filter(Boolean);
+  if (!r.length) return !0;
+  const n = d(t.type), o = a(t.name);
+  return r.some((s) => {
+    if (s === "*" || s === "*/*") return !0;
+    if (s.startsWith("."))
+      return p(s.slice(1), o);
+    if (s.endsWith("/*"))
+      return n.startsWith(s.slice(0, -1));
+    const i = d(s);
+    if (n && i === n) return !0;
+    if (n) return !1;
+    const c = i.lastIndexOf("/");
+    return c >= 0 && p(i.slice(c + 1), o);
+  });
+}, h = (t) => d(t).startsWith("image/"), S = (t) => h(t.type) || !t.type && u.includes(a(t.name)), $ = (t) => {
+  if (t.type) return h(t.type);
+  const e = t.url || t.thumbUrl || t.name;
+  return e.startsWith("data:image/") ? !0 : u.includes(a(e.split(/[?#]/)[0])) || u.includes(a(t.name));
+}, m = /* @__PURE__ */ new WeakMap(), A = (t) => {
+  const e = m.get(t), r = t.uid || e || L();
+  !t.uid && !e && m.set(t, r);
+  const n = t.status ?? "done";
+  return {
+    ...t,
+    uid: r,
+    status: n,
+    percent: t.percent ?? (n === "done" ? 1 : 0)
+  };
+}, q = (t) => (t ?? []).map(A), g = /* @__PURE__ */ new Set(), C = (t) => {
+  if (!S(t) || typeof URL > "u" || typeof URL.createObjectURL != "function") return;
+  const e = URL.createObjectURL(t);
+  return g.add(e), e;
+}, N = (t) => {
+  if (!(!t || !g.delete(t)))
+    try {
+      URL.revokeObjectURL(t);
+    } catch {
+    }
+}, U = (t) => {
+  const e = t.responseText ?? "";
+  if ((t.getResponseHeader("content-type") ?? "").includes("json"))
+    try {
+      return JSON.parse(e || "null");
+    } catch {
+      return e;
+    }
+  return t.response ?? e;
+}, W = (t) => t === null || typeof t != "object" && typeof t != "function" ? !1 : typeof t.then == "function", T = (t) => {
+  if (t === null || typeof t != "object") return;
+  const e = t.abort;
+  return j(e) ? () => e.call(t) : void 0;
+}, I = (t) => {
+  if (t === null || typeof t != "object") return !1;
+  const e = t;
+  return typeof e.ok == "boolean" && typeof e.status == "number" && typeof e.text == "function" && typeof e.json == "function";
+}, z = async (t) => {
+  var r, n;
+  if (!I(t)) return t;
+  if (!t.ok) {
+    const o = new Error(`Request failed with status ${t.status}`);
+    throw o.status = t.status, o.response = t, o;
+  }
+  const e = ((n = (r = t.headers) == null ? void 0 : r.get) == null ? void 0 : n.call(r, "content-type")) ?? "";
+  if (e.includes("json")) {
+    const o = await t.text();
+    if (!o) return;
+    try {
+      return JSON.parse(o);
+    } catch {
+      return o;
+    }
+  }
+  return e.startsWith("text/") ? t.text() : t;
+}, f = (t, e) => {
+  const r = new Error(e);
+  return r.status = t.status, r;
+}, y = (t, e, r) => {
+  if (r != null) {
+    if (Array.isArray(r)) {
+      r.forEach((n) => y(t, `${e}[]`, n));
+      return;
+    }
+    if (typeof Blob < "u" && r instanceof Blob) {
+      t.append(e, r);
+      return;
+    }
+    t.append(e, String(r));
+  }
+}, B = (t) => {
+  const e = new XMLHttpRequest();
+  e.open(t.method.toUpperCase(), t.action || "", !0), t.withCredentials && (e.withCredentials = !0), t.timeout > 0 && (e.timeout = t.timeout), Object.entries(t.headers ?? {}).forEach(([n, o]) => {
+    o != null && e.setRequestHeader(n, String(o));
+  }), e.upload.onprogress = (n) => {
+    t.onProgress(n.total > 0 ? Math.min(1, n.loaded / n.total) : 0, n);
+  }, e.onload = () => {
+    if (e.status >= 200 && e.status < 300) {
+      t.onSuccess(U(e));
+      return;
+    }
+    t.onError(f(e, `Request failed with status ${e.status}`));
+  }, e.onerror = () => t.onError(f(e, "Network error")), e.ontimeout = () => t.onError(f(e, "Request timeout")), e.onabort = () => {
+  };
+  const r = new FormData();
+  return Object.entries(t.data ?? {}).forEach(([n, o]) => y(r, n, o)), r.append(t.name || "file", t.file, t.file.name), e.send(r), {
+    abort: () => e.abort()
+  };
+}, O = (t) => new Promise((e, r) => {
+  t.readEntries(e, r);
+}), F = async (t) => {
+  const e = [];
+  for (; ; ) {
+    const r = await O(t);
+    if (!r.length) break;
+    e.push(...r);
+  }
+  return e;
+}, M = (t) => new Promise((e, r) => {
+  t.file(e, r);
+}), H = async (t) => {
+  const r = (t.items ? Array.from(t.items) : []).map((s) => {
+    var i;
+    return (i = s.webkitGetAsEntry) == null ? void 0 : i.call(s);
+  }).filter((s) => !!s);
+  if (!r.length) return Array.from(t.files ?? []);
+  const n = [], o = async (s, i) => {
+    if (s.isFile) {
+      const c = await M(s);
+      i && Object.defineProperty(c, "webkitRelativePath", { value: i, configurable: !0 }), n.push(c);
+      return;
+    }
+    if (s.isDirectory) {
+      const c = s.createReader(), b = await F(c), w = i ? `${i}/` : "";
+      for (const l of b)
+        await o(l, `${w}${l.name}`);
+    }
+  };
+  for (const s of r)
+    await o(s, s.name);
+  return n;
+}, D = (t) => t ? Array.from(t.files ?? []) : [];
+export {
+  H as collectDropFiles,
+  D as collectPasteFiles,
+  C as createThumbUrl,
+  L as genUid,
+  a as getExtension,
+  S as isImageFile,
+  $ as isImageItem,
+  h as isImageMime,
+  W as isPromiseLike,
+  P as matchAccept,
+  A as normalizeFile,
+  q as normalizeFileList,
+  d as normalizeMime,
+  z as normalizePromiseResponse,
+  T as resolveAbortHandle,
+  N as revokeThumbUrl,
+  B as uploadRequest
+};

package/dist/es/icons/_self/upload-icons.js

@@ -0,0 +1,103 @@
+import { h as t, createVNode as o } from "vue";
+import { generateIcon as l } from "../icon.js";
+const r = l("UploadCloud", t(o("svg", {
+  viewBox: "0 0 48 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  stroke: "currentColor",
+  "stroke-width": "4",
+  "stroke-linecap": "butt",
+  "stroke-linejoin": "miter"
+}, [o("path", {
+  d: "M32 34h4a7 7 0 0 0 1.2-13.9A9 9 0 0 0 20.7 17 7 7 0 0 0 12 34h4"
+}, null), o("path", {
+  d: "M24 40V22"
+}, null), o("path", {
+  d: "m17 29 7-7 7 7"
+}, null)]))), a = l("UploadFile", t(o("svg", {
+  viewBox: "0 0 48 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  stroke: "currentColor",
+  "stroke-width": "4",
+  "stroke-linecap": "butt",
+  "stroke-linejoin": "miter"
+}, [o("path", {
+  d: "M28 6H16a4 4 0 0 0-4 4v28a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4V14Z"
+}, null), o("path", {
+  d: "M28 6v8h8"
+}, null)]))), s = l("UploadImage", t(o("svg", {
+  viewBox: "0 0 48 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  stroke: "currentColor",
+  "stroke-width": "4",
+  "stroke-linecap": "butt",
+  "stroke-linejoin": "miter"
+}, [o("rect", {
+  x: "7",
+  y: "9",
+  width: "34",
+  height: "30",
+  rx: "4"
+}, null), o("circle", {
+  cx: "17.5",
+  cy: "19.5",
+  r: "3.5"
+}, null), o("path", {
+  d: "m12 35 9-9 6 6 4-4 6 6"
+}, null)]))), i = l("UploadTrash", t(o("svg", {
+  viewBox: "0 0 48 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  stroke: "currentColor",
+  "stroke-width": "4",
+  "stroke-linecap": "butt",
+  "stroke-linejoin": "miter"
+}, [o("path", {
+  d: "M9 14h30"
+}, null), o("path", {
+  d: "M20 14V9a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v5"
+}, null), o("path", {
+  d: "M13 14v24a4 4 0 0 0 4 4h14a4 4 0 0 0 4-4V14"
+}, null), o("path", {
+  d: "M20 22v12M28 22v12"
+}, null)]))), h = l("UploadRefresh", t(o("svg", {
+  viewBox: "0 0 48 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  stroke: "currentColor",
+  "stroke-width": "4",
+  "stroke-linecap": "butt",
+  "stroke-linejoin": "miter"
+}, [o("path", {
+  d: "M41 10v10H31"
+}, null), o("path", {
+  d: "M10.8 16A15 15 0 0 1 38.6 13.4L41 20"
+}, null), o("path", {
+  d: "M7 38V28h10"
+}, null), o("path", {
+  d: "M37.2 32A15 15 0 0 1 9.4 34.6L7 28"
+}, null)]))), p = l("UploadDownload", t(o("svg", {
+  viewBox: "0 0 48 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  stroke: "currentColor",
+  "stroke-width": "4",
+  "stroke-linecap": "butt",
+  "stroke-linejoin": "miter"
+}, [o("path", {
+  d: "M24 8v22"
+}, null), o("path", {
+  d: "m15 23 9 9 9-9"
+}, null), o("path", {
+  d: "M9 32v4a6 6 0 0 0 6 6h18a6 6 0 0 0 6-6v-4"
+}, null)])));
+export {
+  r as IconUploadCloud,
+  p as IconUploadDownload,
+  a as IconUploadFile,
+  s as IconUploadImage,
+  h as IconUploadRefresh,
+  i as IconUploadTrash
+};