x-next 1.6.0 → 1.8.0

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
+};

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

@@ -0,0 +1,321 @@
+const e = {
+  /**
+   * @zh 文件列表，支持 v-model:file-list 受控
+   * @en File list, controlled by v-model:file-list
+   * @vModel
+   */
+  fileList: {
+    type: Array,
+    default: void 0
+  },
+  /**
+   * @zh 非受控模式下的初始文件列表
+   * @en Initial file list in uncontrolled mode
+   * @defaultValue []
+   */
+  defaultFileList: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * @zh 上传地址，传函数时按文件动态解析并支持异步
+   * @en Upload URL; a function is resolved per file and may be async
+   */
+  action: {
+    type: [String, Function],
+    default: void 0
+  },
+  /**
+   * @zh 上传请求方法
+   * @en Upload request method
+   * @values 'post', 'put', 'patch'
+   * @defaultValue 'post'
+   */
+  method: {
+    type: String,
+    default: "post"
+  },
+  /**
+   * @zh 请求头
+   * @en Request headers
+   */
+  headers: {
+    type: Object,
+    default: void 0
+  },
+  /**
+   * @zh 附加表单字段，传函数时按文件动态解析
+   * @en Extra form fields; a function is resolved per file
+   */
+  data: {
+    type: [Object, Function],
+    default: void 0
+  },
+  /**
+   * @zh 文件字段名，传函数时按文件动态解析
+   * @en File field name; a function is resolved per file
+   * @defaultValue 'file'
+   */
+  name: {
+    type: [String, Function],
+    default: "file"
+  },
+  /**
+   * @zh 是否携带 Cookie
+   * @en Whether to send cookies
+   * @defaultValue false
+   */
+  withCredentials: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @zh 请求超时毫秒数，0 表示不超时
+   * @en Request timeout in milliseconds; 0 disables the timeout
+   * @defaultValue 0
+   */
+  timeout: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * @zh 自定义上传请求；返回 Promise 时自动接管状态与结果，返回 `{ abort }` 时手动回调
+   * @en Custom upload request; a returned Promise drives the state automatically, an `{ abort }` handle keeps manual control
+   */
+  customRequest: {
+    type: Function,
+    default: void 0
+  },
+  /**
+   * @zh 接受的文件类型，同原生 accept
+   * @en Accepted file types, same as the native accept attribute
+   */
+  accept: {
+    type: String,
+    default: void 0
+  },
+  /**
+   * @zh 是否允许选择多个文件
+   * @en Whether multiple files can be selected
+   * @defaultValue false
+   */
+  multiple: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @zh 是否支持选择文件夹（含拖拽目录递归）
+   * @en Whether directory selection is enabled, including recursive drop traversal
+   * @defaultValue false
+   */
+  directory: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @zh 移动端捕获来源，透传给原生 input
+   * @en Capture source passed to the native input on mobile
+   * @values true, 'user', 'environment'
+   */
+  capture: {
+    type: [Boolean, String],
+    default: void 0
+  },
+  /**
+   * @zh 是否支持聚焦后粘贴文件（如截图后 Ctrl / Cmd + V）
+   * @en Whether pasting files is enabled while focused, e.g. a screenshot with Ctrl / Cmd + V
+   * @defaultValue false
+   */
+  paste: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @zh 是否渲染为拖拽上传区域
+   * @en Whether to render a drag and drop area
+   * @defaultValue false
+   */
+  draggable: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @zh 是否禁用
+   * @en Whether the upload is disabled
+   * @defaultValue false
+   */
+  disabled: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * @zh 是否选择后立即上传；关闭后需调用 submit 或点击开始上传
+   * @en Whether to upload immediately after selection; disable it to call submit manually
+   * @defaultValue true
+   */
+  autoUpload: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @zh 最大文件数量，0 表示不限；超出部分触发 exceed 事件
+   * @en Maximum number of files, 0 means unlimited; extra files trigger the exceed event
+   * @defaultValue 0
+   */
+  limit: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * @zh 上传前置钩子，可拦截或替换文件
+   * @en Pre-upload hook that can intercept or replace files
+   */
+  beforeUpload: {
+    type: Function,
+    default: void 0
+  },
+  /**
+   * @zh 移除前置钩子，返回 false 或 reject 可阻止移除
+   * @en Pre-remove hook; returning false or rejecting prevents removal
+   */
+  beforeRemove: {
+    type: Function,
+    default: void 0
+  },
+  /**
+   * @zh 列表展示形态
+   * @en List display type
+   * @values 'text', 'picture', 'picture-card'
+   * @defaultValue 'text'
+   */
+  listType: {
+    type: String,
+    default: "text"
+  },
+  /**
+   * @zh 提示文案，拖拽区和图片卡中显示
+   * @en Tip text shown in the dragger and picture card
+   */
+  tip: {
+    type: String,
+    default: void 0
+  },
+  /**
+   * @zh 是否展示文件列表
+   * @en Whether to show the file list
+   * @defaultValue true
+   */
+  showFileList: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @zh 是否展示上传入口；对象形式可配置达到 limit 后仍显示
+   * @en Whether to show the upload trigger; the object form keeps it visible on limit
+   * @defaultValue true
+   */
+  showUploadButton: {
+    type: [Boolean, Object],
+    default: !0
+  },
+  /**
+   * @zh 是否展示移除按钮
+   * @en Whether to show the remove button
+   * @defaultValue true
+   */
+  showRemoveButton: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @zh 是否展示重试 / 开始上传按钮
+   * @en Whether to show retry / start buttons
+   * @defaultValue true
+   */
+  showRetryButton: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @zh 是否展示取消上传按钮
+   * @en Whether to show the cancel button
+   * @defaultValue true
+   */
+  showCancelButton: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @zh 是否展示预览按钮
+   * @en Whether to show the preview button
+   * @defaultValue true
+   */
+  showPreviewButton: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @zh 是否展示下载按钮
+   * @en Whether to show the download button
+   * @defaultValue false
+   */
+  showDownloadButton: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @zh 链接是否带 download 属性，点击直接下载
+   * @en Whether links carry the download attribute
+   * @defaultValue false
+   */
+  download: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @zh 有地址时是否渲染为链接
+   * @en Whether to render files with a URL as links
+   * @defaultValue true
+   */
+  showLink: {
+    type: Boolean,
+    default: !0
+  },
+  /**
+   * @zh 内置图片预览，点击图片用 ImagePreview 打开
+   * @en Built-in image preview using ImagePreview on click
+   * @defaultValue false
+   */
+  imagePreview: {
+    type: Boolean,
+    default: !1
+  },
+  /**
+   * @zh 缩略图的原生 loading 策略
+   * @en Native loading strategy for thumbnails
+   * @values 'eager', 'lazy'
+   */
+  imageLoading: {
+    type: String,
+    default: void 0
+  },
+  /**
+   * @zh 上传成功后从响应中提取 url 的字段名（支持 `data.url` 嵌套路径）或解析函数
+   * @en Field name (nested paths like `data.url` supported) or resolver extracting the file URL from the response
+   */
+  responseUrlKey: {
+    type: [String, Function],
+    default: void 0
+  },
+  /**
+   * @zh 上传入口的无障碍名称
+   * @en Accessible name of the upload trigger
+   */
+  ariaLabel: {
+    type: String,
+    default: void 0
+  }
+};
+export {
+  e as uploadProps
+};

package/dist/es/components/upload/upload-list-item.js

@@ -0,0 +1,138 @@
+import { defineComponent as R, inject as j, computed as t, createVNode as n } from "vue";
+import { getClassNameMixin as M } from "../../_utils/config.js";
+import { useLocale as H } from "../../locale/index.js";
+import r from "../_components/icon-hover/index.vue.js";
+import K from "../../icons/default/close.js";
+import q from "../../icons/default/exclamation.js";
+import A from "../../icons/default/eye.js";
+import F from "../progress/Progress.vue.js";
+import { IconUploadRefresh as O, IconUploadDownload as S, IconUploadTrash as V, IconUploadImage as U, IconUploadFile as B } from "../../icons/_self/upload-icons.js";
+import { uploadInjectionKey as _ } from "./context.js";
+import { isImageItem as v } from "./utils.js";
+const ae = /* @__PURE__ */ R({
+  name: "UploadListItem",
+  props: {
+    file: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(l) {
+    const e = j(_);
+    if (!e) return () => null;
+    const {
+      t: u
+    } = H(), a = M("upload"), o = t(() => l.file.status ?? "done"), f = t(() => o.value === "uploading"), T = t(() => o.value === "done"), h = t(() => o.value === "error"), P = t(() => e.listType.value === "picture"), c = t(() => l.file.thumbUrl || l.file.url), d = t(() => !!c.value && v(l.file)), z = t(() => Math.max(0, Math.min(1, l.file.percent ?? 0))), m = t(() => e.props.showPreviewButton && (d.value || !!l.file.url)), D = t(() => l.file.url || c.value), p = t(() => !!l.file.url && e.props.showLink), w = t(() => e.getErrorText(l.file)), L = t(() => [a.element("item"), a.element(`item-${o.value}`), e.listType.value === "picture" && a.element("item-picture")]), b = t(() => [a.element("item-name"), p.value && a.element("item-name-link")]), k = () => {
+      l.file.url && e.props.download || e.handlePreview(l.file);
+    }, E = () => e.slots.image ? n("span", {
+      class: a.element("item-thumbnail")
+    }, [e.slots.image({
+      file: l.file
+    })]) : d.value ? n("span", {
+      class: a.element("item-thumbnail")
+    }, [n("img", {
+      src: c.value,
+      alt: l.file.name,
+      loading: e.props.imageLoading,
+      draggable: !1
+    }, null)]) : n("span", {
+      class: [a.element("item-thumbnail"), a.element("item-file-icon")]
+    }, [v(l.file) ? n(U, {
+      size: 16
+    }, null) : n(B, {
+      size: 16
+    }, null)]);
+    return () => {
+      var y, I, C, x;
+      const g = ((I = (y = e.slots)["file-name"]) == null ? void 0 : I.call(y, {
+        file: l.file
+      })) ?? l.file.name, N = p.value ? n("a", {
+        class: b.value,
+        href: D.value,
+        target: e.props.download ? void 0 : "_blank",
+        rel: "noopener noreferrer",
+        download: e.props.download ? l.file.name : void 0,
+        title: l.file.name,
+        onClick: (s) => {
+          !e.props.download && e.props.imagePreview && d.value && s.preventDefault(), k();
+        }
+      }, [g]) : n("span", {
+        class: b.value,
+        title: l.file.name,
+        role: m.value ? "button" : void 0,
+        tabindex: m.value ? 0 : void 0,
+        onClick: k,
+        onKeydown: (s) => {
+          m.value && (s.key !== "Enter" && s.key !== " " || (s.preventDefault(), e.handlePreview(l.file)));
+        }
+      }, [g]), i = [];
+      return (h.value || o.value === "init") && l.file.file && e.props.showRetryButton && !e.disabled.value && i.push(n(r, {
+        key: "retry",
+        as: "button",
+        "aria-label": u(o.value === "init" ? "upload.start" : "upload.retry"),
+        onClick: () => e.handleRetry(l.file)
+      }, {
+        default: () => [n(O, null, null)]
+      })), f.value && e.props.showCancelButton && !e.disabled.value && i.push(n(r, {
+        key: "cancel",
+        as: "button",
+        "aria-label": u("upload.cancel"),
+        onClick: () => e.handleCancel(l.file)
+      }, {
+        default: () => [n(K, null, null)]
+      })), !f.value && m.value && i.push(n(r, {
+        key: "preview",
+        as: "button",
+        "aria-label": u("upload.preview"),
+        onClick: () => e.handlePreview(l.file)
+      }, {
+        default: () => [n(A, null, null)]
+      })), T.value && e.props.showDownloadButton && l.file.url && i.push(n(r, {
+        key: "download",
+        as: "button",
+        "aria-label": u("upload.download"),
+        onClick: () => e.handleDownload(l.file)
+      }, {
+        default: () => [n(S, null, null)]
+      })), e.slots["extra-button"] && i.push(n("span", {
+        key: "extra",
+        class: a.element("item-extra")
+      }, [e.slots["extra-button"]({
+        file: l.file
+      })])), e.props.showRemoveButton && !e.disabled.value && i.push(n(r, {
+        key: "remove",
+        as: "button",
+        "aria-label": u("upload.remove"),
+        onClick: () => e.handleRemove(l.file)
+      }, {
+        default: () => [n(V, null, null)]
+      })), n("div", {
+        class: L.value
+      }, [P.value ? E() : ((x = (C = e.slots)["file-icon"]) == null ? void 0 : x.call(C, {
+        file: l.file
+      })) ?? n("span", {
+        class: a.element("item-file-icon")
+      }, [v(l.file) ? n(U, {
+        size: 16
+      }, null) : n(B, {
+        size: 16
+      }, null)]), N, h.value && w.value && n("span", {
+        class: a.element("item-error-icon"),
+        title: w.value
+      }, [n(q, {
+        size: 12
+      }, null)]), f.value && n(F, {
+        class: a.element("item-progress"),
+        type: "line",
+        size: "small",
+        percent: z.value,
+        showText: !1
+      }, null), i.length > 0 && n("span", {
+        class: a.element("item-operations")
+      }, [i])]);
+    };
+  }
+});
+export {
+  ae as default
+};

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

@@ -0,0 +1,48 @@
+import { defineComponent as c, inject as d, computed as u, createVNode as t } from "vue";
+import { getClassNameMixin as v } from "../../_utils/config.js";
+import { uploadInjectionKey as g } from "./context.js";
+import f from "./upload-list-item.js";
+import y from "./upload-picture-item.js";
+import T from "./upload-trigger.js";
+const b = /* @__PURE__ */ c({
+  name: "UploadList",
+  setup() {
+    const e = d(g);
+    if (!e) return () => null;
+    const l = v("upload"), i = u(() => e.listType.value === "picture-card"), a = u(() => [l.element("list"), l.element(`list-${e.listType.value}`)]);
+    return () => {
+      if (!e.showTrigger.value && !e.fileList.value.length) return null;
+      const r = e.fileList.value, n = e.slots, o = (s, m) => t("div", {
+        class: l.element("item-wrapper"),
+        key: s.uid
+      }, [n["upload-item"] ? n["upload-item"]({
+        file: s,
+        index: m
+      }) : i.value ? t(y, {
+        file: s
+      }, null) : t(f, {
+        file: s
+      }, null)]), p = t(T, null, null);
+      return i.value ? t("div", {
+        class: a.value
+      }, [r.map(o), e.showTrigger.value && t("span", {
+        class: l.element("picture-entry")
+      }, [p, e.props.tip && t("span", {
+        class: l.element("picture-entry-tip")
+      }, [e.props.tip])])]) : t("div", {
+        class: a.value
+      }, [e.showTrigger.value && t("span", {
+        class: [
+          l.element("entry"),
+          // 拖拽区需要占满容器宽度，行内块会收缩到内容宽度
+          e.props.draggable && l.is("entry-block")
+        ]
+      }, [p]), r.length > 0 && t("div", {
+        class: l.element("items")
+      }, [r.map(o)])]);
+    };
+  }
+});
+export {
+  b as default
+};

package/dist/es/components/upload/upload-picture-item.js

@@ -0,0 +1,109 @@
+import { defineComponent as y, inject as I, computed as o, createVNode as e } from "vue";
+import { getClassNameMixin as k } from "../../_utils/config.js";
+import { useLocale as x } from "../../locale/index.js";
+import m from "../_components/icon-hover/index.vue.js";
+import C from "../../icons/default/eye.js";
+import U from "../../icons/default/exclamation.js";
+import P from "../../icons/default/close.js";
+import B from "../progress/Progress.vue.js";
+import { IconUploadFile as R, IconUploadRefresh as D, IconUploadDownload as E, IconUploadTrash as j } from "../../icons/_self/upload-icons.js";
+import { uploadInjectionKey as z } from "./context.js";
+import { isImageItem as M } from "./utils.js";
+const G = /* @__PURE__ */ y({
+  name: "UploadPictureItem",
+  props: {
+    file: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(l) {
+    const t = I(z);
+    if (!t) return () => null;
+    const {
+      t: i
+    } = x(), a = k("upload"), u = o(() => l.file.status ?? "done"), d = o(() => u.value === "uploading"), h = o(() => u.value === "done"), r = o(() => u.value === "error"), b = o(() => Math.max(0, Math.min(1, l.file.percent ?? 0))), f = o(() => l.file.thumbUrl || l.file.url), p = o(() => t.disabled.value), g = o(() => [a.element("picture-item"), a.element(`picture-item-${u.value}`), d.value && a.is("uploading")]);
+    return () => {
+      var v;
+      const {
+        props: s,
+        slots: c
+      } = t, w = ((v = c.image) == null ? void 0 : v.call(c, {
+        file: l.file
+      })) ?? (f.value && M(l.file) ? e("img", {
+        class: a.element("picture-image"),
+        src: f.value,
+        alt: l.file.name,
+        loading: s.imageLoading,
+        draggable: !1
+      }, null) : e("span", {
+        class: a.element("picture-placeholder")
+      }, [e(R, {
+        size: 24
+      }, null), e("span", null, [l.file.name])])), n = [];
+      return (r.value || u.value === "init") && l.file.file && s.showRetryButton && !p.value && n.push(e(m, {
+        key: "retry",
+        as: "button",
+        "aria-label": i(u.value === "init" ? "upload.start" : "upload.retry"),
+        onClick: () => t.handleRetry(l.file)
+      }, {
+        default: () => [e(D, null, null)]
+      })), d.value && s.showCancelButton && !p.value && n.push(e(m, {
+        key: "cancel",
+        as: "button",
+        "aria-label": i("upload.cancel"),
+        onClick: () => t.handleCancel(l.file)
+      }, {
+        default: () => [e(P, null, null)]
+      })), f.value && s.showPreviewButton && !d.value && !r.value && n.push(e(m, {
+        key: "preview",
+        as: "button",
+        "aria-label": i("upload.preview"),
+        onClick: () => t.handlePreview(l.file)
+      }, {
+        default: () => [e(C, null, null)]
+      })), h.value && s.showDownloadButton && (l.file.url || f.value) && n.push(e(m, {
+        key: "download",
+        as: "button",
+        "aria-label": i("upload.download"),
+        onClick: () => t.handleDownload(l.file)
+      }, {
+        default: () => [e(E, null, null)]
+      })), c["extra-button"] && n.push(e("span", {
+        key: "extra",
+        class: a.element("picture-extra")
+      }, [c["extra-button"]({
+        file: l.file
+      })])), s.showRemoveButton && !p.value && n.push(e(m, {
+        key: "remove",
+        as: "button",
+        "aria-label": i("upload.remove"),
+        onClick: () => t.handleRemove(l.file)
+      }, {
+        default: () => [e(j, null, null)]
+      })), e("div", {
+        class: g.value
+      }, [d.value ? e("span", {
+        class: a.element("picture-uploading")
+      }, [e(B, {
+        type: "circle",
+        size: "small",
+        percent: b.value,
+        showText: !1
+      }, null)]) : r.value ? e("span", {
+        class: a.element("picture-error")
+      }, [e(U, {
+        size: 20
+      }, null)]) : w, (n.length > 0 || r.value) && e("span", {
+        class: [a.element("picture-mask"), r.value && a.is("error")]
+      }, [r.value && e("span", {
+        class: a.element("picture-error-tip")
+      }, [t.getErrorText(l.file) ?? i("upload.error")]), n.length > 0 && e("span", {
+        class: a.element("picture-operations")
+      }, [n])])]);
+    };
+  }
+});
+export {
+  G as default
+};