fantasia-ui 0.2.58 → 0.2.59

package/dist/fantasia-ui.css

@@ -6696,16 +6696,16 @@ to {
   color: #94a3b8;
   font-weight: 700;
   background: rgba(248, 250, 252, 0.5);
-}.f-upload[data-v-6bdc061f] {
+}.f-upload[data-v-04ecda2b] {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
-.f-upload__trigger[data-v-6bdc061f] {
+.f-upload__trigger[data-v-04ecda2b] {
   display: inline-block;
   cursor: pointer;
 }
-.f-upload__zone[data-v-6bdc061f] {
+.f-upload__zone[data-v-04ecda2b] {
   height: 11rem;
   width: 100%;
   border: 2px dashed #e2e8f0;
@@ -6718,30 +6718,35 @@ to {
   text-align: center;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.f-upload__zone[data-v-6bdc061f]:hover {
+.f-upload__zone[data-v-04ecda2b]:hover {
   border-color: #818cf8;
   background: rgba(248, 250, 252, 0.3);
 }
-.f-upload--drag .f-upload__zone[data-v-6bdc061f] {
+.f-upload--drag .f-upload__zone[data-v-04ecda2b] {
   border-color: #6366f1;
   background: rgba(238, 242, 255, 0.2);
 }
-.f-upload__input[data-v-6bdc061f] {
+.f-upload__input[data-v-04ecda2b] {
   display: none;
 }
-.f-upload__title[data-v-6bdc061f] {
+.f-upload__title[data-v-04ecda2b] {
   font-size: 0.75rem;
   font-weight: 700;
   color: #334155;
 }
-.f-upload__hint[data-v-6bdc061f] {
+.f-upload__hint[data-v-04ecda2b] {
   font-size: 0.625rem;
   font-weight: 700;
   color: #94a3b8;
   margin-top: 0.25rem;
   line-height: 1.4;
 }
-.f-upload__file-item[data-v-6bdc061f] {
+.f-upload__list[data-v-04ecda2b] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+.f-upload__file-item[data-v-04ecda2b] {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -6752,18 +6757,30 @@ to {
   font-size: 0.75rem;
   color: #4338ca;
 }
-.f-upload__file-info[data-v-6bdc061f] {
+.f-upload__file-item--error[data-v-04ecda2b] {
+  background: rgba(254, 226, 226, 0.5);
+  border-color: #fecaca;
+  color: #b91c1c;
+}
+.f-upload__file-item--success[data-v-04ecda2b] {
+  border-color: #bbf7d0;
+}
+.f-upload__file-info[data-v-04ecda2b] {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
   flex: 1;
   min-width: 0;
 }
-.f-upload__file-name[data-v-6bdc061f] {
+.f-upload__file-name[data-v-04ecda2b] {
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
+.f-upload__file-error[data-v-04ecda2b] {
+  font-size: 0.6875rem;
+  color: #dc2626;
 }.f-button-group[data-v-62561657] {
   display: inline-flex;
   vertical-align: middle;

package/dist/fantasia-ui.es.js

@@ -38,7 +38,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, unref, renderSlot, normalizeClass, createCommentVNode, Fragment, renderList, createElementVNode, toDisplayString, ref, watch, createVNode, withDirectives, Transition, withCtx, vShow, mergeModels, useModel, inject, createBlock, resolveDynamicComponent, nextTick, onUnmounted, Teleport, withModifiers, withKeys, isRef, vModelText, createTextVNode, TransitionGroup, useSlots, provide, onMounted, readonly, onBeforeUnmount, reactive, toRefs, createStaticVNode, h, render } from "vue";
-import { CloseCircleOutline, EyeOutline, EyeOffOutline, StarOutline, StarHalf, Star, ChevronDownOutline, ChevronBackOutline, EllipsisHorizontal, ChevronForwardOutline, CloseCircle, Close, Person, InformationCircleOutline, WarningOutline, AlertCircleOutline, CheckmarkCircleOutline, CloudUpload, DocumentOutline, RemoveOutline, AddOutline, ChevronUpOutline, InformationCircle, AlertCircle, CheckmarkCircle, CloseOutline, Warning } from "@vicons/ionicons5";
+import { CloseCircleOutline, EyeOutline, EyeOffOutline, StarOutline, StarHalf, Star, ChevronDownOutline, ChevronBackOutline, EllipsisHorizontal, ChevronForwardOutline, CloseCircle, Close, Person, InformationCircleOutline, WarningOutline, AlertCircleOutline, CheckmarkCircleOutline, CloudUpload, CheckmarkCircle, AlertCircle, DocumentOutline, Reload, RemoveOutline, AddOutline, ChevronUpOutline, InformationCircle, CloseOutline, Warning } from "@vicons/ionicons5";
 import { useEventListener } from "@vueuse/core";
 const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "FIcon",
@@ -721,7 +721,7 @@ const _hoisted_7$5 = {
   key: 0,
   class: "page-btn ellipsis"
 };
-const _hoisted_8$3 = ["onClick"];
+const _hoisted_8$4 = ["onClick"];
 const _hoisted_9$3 = {
   key: 5,
   class: "f-pagination__jump"
@@ -817,7 +817,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
                     key: 1,
                     class: normalizeClass(["page-btn", { active: currentPage.value === page }]),
                     onClick: ($event) => go(page)
-                  }, toDisplayString(page), 11, _hoisted_8$3))
+                  }, toDisplayString(page), 11, _hoisted_8$4))
                 ], 64);
               }), 128))
             ])) : item === "next" ? (openBlock(), createElementBlock("button", {
@@ -881,7 +881,7 @@ const _hoisted_7$4 = {
   key: 0,
   class: "f-card__header-extra"
 };
-const _hoisted_8$2 = {
+const _hoisted_8$3 = {
   key: 1,
   class: "f-card__cover"
 };
@@ -928,7 +928,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "header-extra", {}, void 0, true)
             ])) : createCommentVNode("", true)
           ])) : createCommentVNode("", true),
-          _ctx.$slots.cover ? (openBlock(), createElementBlock("div", _hoisted_8$2, [
+          _ctx.$slots.cover ? (openBlock(), createElementBlock("div", _hoisted_8$3, [
             renderSlot(_ctx.$slots, "cover", {}, void 0, true)
           ])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_9$2, [
@@ -2382,7 +2382,7 @@ const _hoisted_4$a = ["onClick"];
 const _hoisted_5$7 = { class: "f-transfer__actions" };
 const _hoisted_6$6 = ["disabled"];
 const _hoisted_7$3 = ["disabled"];
-const _hoisted_8$1 = { class: "f-transfer__panel" };
+const _hoisted_8$2 = { class: "f-transfer__panel" };
 const _hoisted_9$1 = { class: "f-transfer__header" };
 const _hoisted_10$1 = { class: "f-transfer__list" };
 const _hoisted_11$1 = ["onClick"];
@@ -2468,7 +2468,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             onClick: _cache[1] || (_cache[1] = ($event) => moveSelected("left"))
           }, " ← ", 8, _hoisted_7$3)
         ]),
-        createElementVNode("div", _hoisted_8$1, [
+        createElementVNode("div", _hoisted_8$2, [
           createElementVNode("div", _hoisted_9$1, toDisplayString(_ctx.rightTitle), 1),
           createElementVNode("ul", _hoisted_10$1, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(rightList), (item) => {
@@ -2805,7 +2805,7 @@ const _hoisted_6$4 = {
   class: "f-table__th f-table__th--index"
 };
 const _hoisted_7$2 = { class: "f-table__th-inner" };
-const _hoisted_8 = { class: "f-table__body" };
+const _hoisted_8$1 = { class: "f-table__body" };
 const _hoisted_9 = {
   key: 0,
   class: "f-table__spacer"
@@ -2928,7 +2928,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 }), 128))
               ])
             ]),
-            createElementVNode("tbody", _hoisted_8, [
+            createElementVNode("tbody", _hoisted_8$1, [
               unref(offsetTop) > 0 ? (openBlock(), createElementBlock("tr", _hoisted_9, [
                 createElementVNode("td", {
                   colspan: unref(colSpan),
@@ -2995,34 +2995,96 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
 });
 const FTable = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-01724962"]]);
 const _hoisted_1$c = { class: "f-upload" };
-const _hoisted_2$a = ["accept"];
+const _hoisted_2$a = ["accept", "multiple"];
 const _hoisted_3$a = { class: "f-upload__zone" };
 const _hoisted_4$7 = { class: "f-upload__hint" };
 const _hoisted_5$4 = {
   key: 0,
-  class: "f-upload__file-item"
+  class: "f-upload__list"
 };
 const _hoisted_6$3 = { class: "f-upload__file-info" };
 const _hoisted_7$1 = { class: "f-upload__file-name" };
+const _hoisted_8 = {
+  key: 1,
+  class: "f-upload__file-error"
+};
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "FUpload",
   props: /* @__PURE__ */ mergeModels({
     accept: {},
+    hint: { default: "支持 .xlsx .xls .json .txt" },
     limit: {},
-    progress: {},
-    hint: { default: "支持 .xlsx .xls .json .txt" }
+    autoUpload: { type: Boolean, default: true },
+    beforeUpload: {},
+    httpRequest: {}
   }, {
-    "file": { default: "" },
-    "fileModifiers": {}
+    "fileList": { default: () => [] },
+    "fileListModifiers": {}
   }),
-  emits: /* @__PURE__ */ mergeModels(["change", "exceed"], ["update:file"]),
-  setup(__props, { emit: __emit }) {
-    const file = useModel(__props, "file");
+  emits: /* @__PURE__ */ mergeModels(["change", "progress", "success", "error", "remove", "exceed"], ["update:fileList"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const fileList = useModel(__props, "fileList");
+    const props = __props;
     const emit = __emit;
     const dragActive = ref(false);
-    const isCloseHover = ref(false);
-    const clearFile = () => {
-      file.value = "";
+    const hoveredUid = ref(null);
+    const genUid = () => `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+    const findItem = (uid) => fileList.value.find((f) => f.uid === uid);
+    const updateItem = (uid, patch) => {
+      const item = findItem(uid);
+      if (item) Object.assign(item, patch);
+      return item;
+    };
+    const submitUpload = (item) => __async(null, null, function* () {
+      if (!props.httpRequest) return;
+      updateItem(item.uid, { status: "uploading", percentage: 0 });
+      try {
+        const response = yield props.httpRequest(item.raw, (percent) => {
+          const current = updateItem(item.uid, { percentage: percent });
+          if (current) emit("progress", current);
+        });
+        const done = updateItem(item.uid, { status: "success", percentage: 100, response });
+        if (done) emit("success", done, response);
+      } catch (err) {
+        const failed = updateItem(item.uid, { status: "error", errorMessage: (err == null ? void 0 : err.message) || "上传失败" });
+        if (failed) emit("error", failed, err);
+      }
+    });
+    const addFiles = (files) => __async(null, null, function* () {
+      if (!files.length) return;
+      const remaining = props.limit != null ? props.limit - fileList.value.length : Infinity;
+      if (remaining <= 0) {
+        emit("exceed", files);
+        return;
+      }
+      const accepted = files.slice(0, remaining);
+      const rejected = files.slice(remaining);
+      if (rejected.length) emit("exceed", rejected);
+      for (const raw of accepted) {
+        if (props.beforeUpload) {
+          const ok = yield props.beforeUpload(raw);
+          if (!ok) continue;
+        }
+        const item = {
+          uid: genUid(),
+          name: raw.name,
+          status: "ready",
+          percentage: 0,
+          raw
+        };
+        fileList.value = [...fileList.value, item];
+        emit("change", item);
+        if (props.autoUpload) submitUpload(item);
+      }
+    });
+    const retryUpload = (uid) => {
+      const item = findItem(uid);
+      if (item) submitUpload(item);
+    };
+    const removeFile = (uid) => {
+      const item = findItem(uid);
+      fileList.value = fileList.value.filter((f) => f.uid !== uid);
+      if (item) emit("remove", item);
     };
     const onDragOver = (e) => {
       e.preventDefault();
@@ -3036,18 +3098,17 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       var _a, _b;
       e.preventDefault();
       dragActive.value = false;
-      const f = (_b = (_a = e.dataTransfer) == null ? void 0 : _a.files) == null ? void 0 : _b[0];
-      if (!f) return;
-      emit("change", f);
+      const files = Array.from((_b = (_a = e.dataTransfer) == null ? void 0 : _a.files) != null ? _b : []);
+      addFiles(files);
     };
     const onFileChange = (e) => {
       var _a;
       const input = e.target;
-      const f = (_a = input.files) == null ? void 0 : _a[0];
-      if (!f) return;
-      emit("change", f);
+      const files = Array.from((_a = input.files) != null ? _a : []);
       input.value = "";
+      addFiles(files);
     };
+    __expose({ retryUpload, removeFile, submitAll: () => fileList.value.filter((f) => f.status === "ready").forEach(submitUpload) });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$c, [
         createElementVNode("label", {
@@ -3059,6 +3120,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           createElementVNode("input", {
             type: "file",
             accept: _ctx.accept,
+            multiple: _ctx.limit == null || _ctx.limit > 1,
             class: "f-upload__input",
             onChange: onFileChange
           }, null, 40, _hoisted_2$a),
@@ -3070,43 +3132,60 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               }),
-              _cache[2] || (_cache[2] = createElementVNode("span", { class: "f-upload__title" }, "点击或拖拽文件至此处", -1)),
+              _cache[1] || (_cache[1] = createElementVNode("span", { class: "f-upload__title" }, "点击或拖拽文件至此处", -1)),
               createElementVNode("span", _hoisted_4$7, toDisplayString(_ctx.hint), 1)
             ])
           ], true)
         ], 34),
-        file.value ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
-          createVNode(FIcon, null, {
-            default: withCtx(() => [
-              createVNode(unref(DocumentOutline))
-            ]),
-            _: 1
-          }),
-          createElementVNode("div", _hoisted_6$3, [
-            createElementVNode("span", _hoisted_7$1, toDisplayString(file.value), 1),
-            _ctx.progress != null ? (openBlock(), createBlock(FProgress, {
-              key: 0,
-              percent: _ctx.progress,
-              "show-text": ""
-            }, null, 8, ["percent"])) : createCommentVNode("", true)
-          ]),
-          createVNode(FIcon, {
-            onClick: withModifiers(clearFile, ["stop"]),
-            onMouseenter: _cache[0] || (_cache[0] = ($event) => isCloseHover.value = true),
-            onMouseleave: _cache[1] || (_cache[1] = ($event) => isCloseHover.value = false),
-            style: { "cursor": "pointer", "transition": "color 0.2s" }
-          }, {
-            default: withCtx(() => [
-              (openBlock(), createBlock(resolveDynamicComponent(unref(isCloseHover) ? unref(CloseCircle) : unref(Close))))
-            ]),
-            _: 1
-          })
+        fileList.value.length ? (openBlock(), createElementBlock("div", _hoisted_5$4, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(fileList.value, (item) => {
+            return openBlock(), createElementBlock("div", {
+              key: item.uid,
+              class: normalizeClass(["f-upload__file-item", `f-upload__file-item--${item.status}`])
+            }, [
+              createVNode(FIcon, null, {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(item.status === "success" ? unref(CheckmarkCircle) : item.status === "error" ? unref(AlertCircle) : unref(DocumentOutline))))
+                ]),
+                _: 2
+              }, 1024),
+              createElementVNode("div", _hoisted_6$3, [
+                createElementVNode("span", _hoisted_7$1, toDisplayString(item.name), 1),
+                item.status === "uploading" ? (openBlock(), createBlock(FProgress, {
+                  key: 0,
+                  percent: item.percentage,
+                  "show-text": ""
+                }, null, 8, ["percent"])) : item.status === "error" ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(item.errorMessage), 1)) : createCommentVNode("", true)
+              ]),
+              item.status === "error" ? (openBlock(), createBlock(FIcon, {
+                key: 0,
+                onClick: withModifiers(($event) => retryUpload(item.uid), ["stop"]),
+                style: { "cursor": "pointer" }
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(Reload))
+                ]),
+                _: 2
+              }, 1032, ["onClick"])) : createCommentVNode("", true),
+              createVNode(FIcon, {
+                onClick: withModifiers(($event) => removeFile(item.uid), ["stop"]),
+                onMouseenter: ($event) => hoveredUid.value = item.uid,
+                onMouseleave: _cache[0] || (_cache[0] = ($event) => hoveredUid.value = null),
+                style: { "cursor": "pointer", "transition": "color 0.2s" }
+              }, {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(unref(hoveredUid) === item.uid ? unref(CloseCircle) : unref(Close))))
+                ]),
+                _: 2
+              }, 1032, ["onClick", "onMouseenter"])
+            ], 2);
+          }), 128))
         ])) : createCommentVNode("", true)
       ]);
     };
   }
 });
-const FUpload = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-6bdc061f"]]);
+const FUpload = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-04ecda2b"]]);
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "FButtonGroup",
   props: {

package/dist/fantasia-ui.umd.js

@@ -722,7 +722,7 @@ var __async = (__this, __arguments, generator) => {
     key: 0,
     class: "page-btn ellipsis"
   };
-  const _hoisted_8$3 = ["onClick"];
+  const _hoisted_8$4 = ["onClick"];
   const _hoisted_9$3 = {
     key: 5,
     class: "f-pagination__jump"
@@ -818,7 +818,7 @@ var __async = (__this, __arguments, generator) => {
                       key: 1,
                       class: vue.normalizeClass(["page-btn", { active: currentPage.value === page }]),
                       onClick: ($event) => go(page)
-                    }, vue.toDisplayString(page), 11, _hoisted_8$3))
+                    }, vue.toDisplayString(page), 11, _hoisted_8$4))
                   ], 64);
                 }), 128))
               ])) : item === "next" ? (vue.openBlock(), vue.createElementBlock("button", {
@@ -882,7 +882,7 @@ var __async = (__this, __arguments, generator) => {
     key: 0,
     class: "f-card__header-extra"
   };
-  const _hoisted_8$2 = {
+  const _hoisted_8$3 = {
     key: 1,
     class: "f-card__cover"
   };
@@ -929,7 +929,7 @@ var __async = (__this, __arguments, generator) => {
                 vue.renderSlot(_ctx.$slots, "header-extra", {}, void 0, true)
               ])) : vue.createCommentVNode("", true)
             ])) : vue.createCommentVNode("", true),
-            _ctx.$slots.cover ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$2, [
+            _ctx.$slots.cover ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$3, [
               vue.renderSlot(_ctx.$slots, "cover", {}, void 0, true)
             ])) : vue.createCommentVNode("", true),
             vue.createElementVNode("div", _hoisted_9$2, [
@@ -2383,7 +2383,7 @@ var __async = (__this, __arguments, generator) => {
   const _hoisted_5$7 = { class: "f-transfer__actions" };
   const _hoisted_6$6 = ["disabled"];
   const _hoisted_7$3 = ["disabled"];
-  const _hoisted_8$1 = { class: "f-transfer__panel" };
+  const _hoisted_8$2 = { class: "f-transfer__panel" };
   const _hoisted_9$1 = { class: "f-transfer__header" };
   const _hoisted_10$1 = { class: "f-transfer__list" };
   const _hoisted_11$1 = ["onClick"];
@@ -2469,7 +2469,7 @@ var __async = (__this, __arguments, generator) => {
               onClick: _cache[1] || (_cache[1] = ($event) => moveSelected("left"))
             }, " ← ", 8, _hoisted_7$3)
           ]),
-          vue.createElementVNode("div", _hoisted_8$1, [
+          vue.createElementVNode("div", _hoisted_8$2, [
             vue.createElementVNode("div", _hoisted_9$1, vue.toDisplayString(_ctx.rightTitle), 1),
             vue.createElementVNode("ul", _hoisted_10$1, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(rightList), (item) => {
@@ -2806,7 +2806,7 @@ var __async = (__this, __arguments, generator) => {
     class: "f-table__th f-table__th--index"
   };
   const _hoisted_7$2 = { class: "f-table__th-inner" };
-  const _hoisted_8 = { class: "f-table__body" };
+  const _hoisted_8$1 = { class: "f-table__body" };
   const _hoisted_9 = {
     key: 0,
     class: "f-table__spacer"
@@ -2929,7 +2929,7 @@ var __async = (__this, __arguments, generator) => {
                   }), 128))
                 ])
               ]),
-              vue.createElementVNode("tbody", _hoisted_8, [
+              vue.createElementVNode("tbody", _hoisted_8$1, [
                 vue.unref(offsetTop) > 0 ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_9, [
                   vue.createElementVNode("td", {
                     colspan: vue.unref(colSpan),
@@ -2996,34 +2996,96 @@ var __async = (__this, __arguments, generator) => {
   });
   const FTable = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-01724962"]]);
   const _hoisted_1$c = { class: "f-upload" };
-  const _hoisted_2$a = ["accept"];
+  const _hoisted_2$a = ["accept", "multiple"];
   const _hoisted_3$a = { class: "f-upload__zone" };
   const _hoisted_4$7 = { class: "f-upload__hint" };
   const _hoisted_5$4 = {
     key: 0,
-    class: "f-upload__file-item"
+    class: "f-upload__list"
   };
   const _hoisted_6$3 = { class: "f-upload__file-info" };
   const _hoisted_7$1 = { class: "f-upload__file-name" };
+  const _hoisted_8 = {
+    key: 1,
+    class: "f-upload__file-error"
+  };
   const _sfc_main$g = /* @__PURE__ */ vue.defineComponent({
     __name: "FUpload",
     props: /* @__PURE__ */ vue.mergeModels({
       accept: {},
+      hint: { default: "支持 .xlsx .xls .json .txt" },
       limit: {},
-      progress: {},
-      hint: { default: "支持 .xlsx .xls .json .txt" }
+      autoUpload: { type: Boolean, default: true },
+      beforeUpload: {},
+      httpRequest: {}
     }, {
-      "file": { default: "" },
-      "fileModifiers": {}
+      "fileList": { default: () => [] },
+      "fileListModifiers": {}
     }),
-    emits: /* @__PURE__ */ vue.mergeModels(["change", "exceed"], ["update:file"]),
-    setup(__props, { emit: __emit }) {
-      const file = vue.useModel(__props, "file");
+    emits: /* @__PURE__ */ vue.mergeModels(["change", "progress", "success", "error", "remove", "exceed"], ["update:fileList"]),
+    setup(__props, { expose: __expose, emit: __emit }) {
+      const fileList = vue.useModel(__props, "fileList");
+      const props = __props;
       const emit = __emit;
       const dragActive = vue.ref(false);
-      const isCloseHover = vue.ref(false);
-      const clearFile = () => {
-        file.value = "";
+      const hoveredUid = vue.ref(null);
+      const genUid = () => `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+      const findItem = (uid) => fileList.value.find((f) => f.uid === uid);
+      const updateItem = (uid, patch) => {
+        const item = findItem(uid);
+        if (item) Object.assign(item, patch);
+        return item;
+      };
+      const submitUpload = (item) => __async(null, null, function* () {
+        if (!props.httpRequest) return;
+        updateItem(item.uid, { status: "uploading", percentage: 0 });
+        try {
+          const response = yield props.httpRequest(item.raw, (percent) => {
+            const current = updateItem(item.uid, { percentage: percent });
+            if (current) emit("progress", current);
+          });
+          const done = updateItem(item.uid, { status: "success", percentage: 100, response });
+          if (done) emit("success", done, response);
+        } catch (err) {
+          const failed = updateItem(item.uid, { status: "error", errorMessage: (err == null ? void 0 : err.message) || "上传失败" });
+          if (failed) emit("error", failed, err);
+        }
+      });
+      const addFiles = (files) => __async(null, null, function* () {
+        if (!files.length) return;
+        const remaining = props.limit != null ? props.limit - fileList.value.length : Infinity;
+        if (remaining <= 0) {
+          emit("exceed", files);
+          return;
+        }
+        const accepted = files.slice(0, remaining);
+        const rejected = files.slice(remaining);
+        if (rejected.length) emit("exceed", rejected);
+        for (const raw of accepted) {
+          if (props.beforeUpload) {
+            const ok = yield props.beforeUpload(raw);
+            if (!ok) continue;
+          }
+          const item = {
+            uid: genUid(),
+            name: raw.name,
+            status: "ready",
+            percentage: 0,
+            raw
+          };
+          fileList.value = [...fileList.value, item];
+          emit("change", item);
+          if (props.autoUpload) submitUpload(item);
+        }
+      });
+      const retryUpload = (uid) => {
+        const item = findItem(uid);
+        if (item) submitUpload(item);
+      };
+      const removeFile = (uid) => {
+        const item = findItem(uid);
+        fileList.value = fileList.value.filter((f) => f.uid !== uid);
+        if (item) emit("remove", item);
       };
       const onDragOver = (e) => {
         e.preventDefault();
@@ -3037,18 +3099,17 @@ var __async = (__this, __arguments, generator) => {
         var _a, _b;
         e.preventDefault();
         dragActive.value = false;
-        const f = (_b = (_a = e.dataTransfer) == null ? void 0 : _a.files) == null ? void 0 : _b[0];
-        if (!f) return;
-        emit("change", f);
+        const files = Array.from((_b = (_a = e.dataTransfer) == null ? void 0 : _a.files) != null ? _b : []);
+        addFiles(files);
       };
       const onFileChange = (e) => {
         var _a;
         const input = e.target;
-        const f = (_a = input.files) == null ? void 0 : _a[0];
-        if (!f) return;
-        emit("change", f);
+        const files = Array.from((_a = input.files) != null ? _a : []);
         input.value = "";
+        addFiles(files);
       };
+      __expose({ retryUpload, removeFile, submitAll: () => fileList.value.filter((f) => f.status === "ready").forEach(submitUpload) });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
           vue.createElementVNode("label", {
@@ -3060,6 +3121,7 @@ var __async = (__this, __arguments, generator) => {
             vue.createElementVNode("input", {
               type: "file",
               accept: _ctx.accept,
+              multiple: _ctx.limit == null || _ctx.limit > 1,
               class: "f-upload__input",
               onChange: onFileChange
             }, null, 40, _hoisted_2$a),
@@ -3071,43 +3133,60 @@ var __async = (__this, __arguments, generator) => {
                   ]),
                   _: 1
                 }),
-                _cache[2] || (_cache[2] = vue.createElementVNode("span", { class: "f-upload__title" }, "点击或拖拽文件至此处", -1)),
+                _cache[1] || (_cache[1] = vue.createElementVNode("span", { class: "f-upload__title" }, "点击或拖拽文件至此处", -1)),
                 vue.createElementVNode("span", _hoisted_4$7, vue.toDisplayString(_ctx.hint), 1)
               ])
             ], true)
           ], 34),
-          file.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$4, [
-            vue.createVNode(FIcon, null, {
-              default: vue.withCtx(() => [
-                vue.createVNode(vue.unref(ionicons5.DocumentOutline))
-              ]),
-              _: 1
-            }),
-            vue.createElementVNode("div", _hoisted_6$3, [
-              vue.createElementVNode("span", _hoisted_7$1, vue.toDisplayString(file.value), 1),
-              _ctx.progress != null ? (vue.openBlock(), vue.createBlock(FProgress, {
-                key: 0,
-                percent: _ctx.progress,
-                "show-text": ""
-              }, null, 8, ["percent"])) : vue.createCommentVNode("", true)
-            ]),
-            vue.createVNode(FIcon, {
-              onClick: vue.withModifiers(clearFile, ["stop"]),
-              onMouseenter: _cache[0] || (_cache[0] = ($event) => isCloseHover.value = true),
-              onMouseleave: _cache[1] || (_cache[1] = ($event) => isCloseHover.value = false),
-              style: { "cursor": "pointer", "transition": "color 0.2s" }
-            }, {
-              default: vue.withCtx(() => [
-                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(isCloseHover) ? vue.unref(ionicons5.CloseCircle) : vue.unref(ionicons5.Close))))
-              ]),
-              _: 1
-            })
+          fileList.value.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$4, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(fileList.value, (item) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                key: item.uid,
+                class: vue.normalizeClass(["f-upload__file-item", `f-upload__file-item--${item.status}`])
+              }, [
+                vue.createVNode(FIcon, null, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.status === "success" ? vue.unref(ionicons5.CheckmarkCircle) : item.status === "error" ? vue.unref(ionicons5.AlertCircle) : vue.unref(ionicons5.DocumentOutline))))
+                  ]),
+                  _: 2
+                }, 1024),
+                vue.createElementVNode("div", _hoisted_6$3, [
+                  vue.createElementVNode("span", _hoisted_7$1, vue.toDisplayString(item.name), 1),
+                  item.status === "uploading" ? (vue.openBlock(), vue.createBlock(FProgress, {
+                    key: 0,
+                    percent: item.percentage,
+                    "show-text": ""
+                  }, null, 8, ["percent"])) : item.status === "error" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_8, vue.toDisplayString(item.errorMessage), 1)) : vue.createCommentVNode("", true)
+                ]),
+                item.status === "error" ? (vue.openBlock(), vue.createBlock(FIcon, {
+                  key: 0,
+                  onClick: vue.withModifiers(($event) => retryUpload(item.uid), ["stop"]),
+                  style: { "cursor": "pointer" }
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(ionicons5.Reload))
+                  ]),
+                  _: 2
+                }, 1032, ["onClick"])) : vue.createCommentVNode("", true),
+                vue.createVNode(FIcon, {
+                  onClick: vue.withModifiers(($event) => removeFile(item.uid), ["stop"]),
+                  onMouseenter: ($event) => hoveredUid.value = item.uid,
+                  onMouseleave: _cache[0] || (_cache[0] = ($event) => hoveredUid.value = null),
+                  style: { "cursor": "pointer", "transition": "color 0.2s" }
+                }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(hoveredUid) === item.uid ? vue.unref(ionicons5.CloseCircle) : vue.unref(ionicons5.Close))))
+                  ]),
+                  _: 2
+                }, 1032, ["onClick", "onMouseenter"])
+              ], 2);
+            }), 128))
           ])) : vue.createCommentVNode("", true)
         ]);
       };
     }
   });
-  const FUpload = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-6bdc061f"]]);
+  const FUpload = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-04ecda2b"]]);
   const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     __name: "FButtonGroup",
     props: {

package/dist/types/packages/components/modules/FUpload.vue.d.ts

@@ -1,26 +1,35 @@
-type __VLS_Props = {
-    accept?: string;
-    limit?: number;
-    progress?: number | null;
-    hint?: string;
-};
+import type { FUploadProps, UploadFileItem } from '../../types';
+type __VLS_Props = FUploadProps;
 type __VLS_PublicProps = __VLS_Props & {
-    'file'?: string;
+    'fileList'?: UploadFileItem[];
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (file: File) => any;
-    exceed: (file: File) => any;
-    "update:file": (value: string) => any;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {
+    retryUpload: (uid: string) => void;
+    removeFile: (uid: string) => void;
+    submitAll: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    success: (file: UploadFileItem, response: string) => any;
+    error: (file: UploadFileItem, error: unknown) => any;
+    progress: (file: UploadFileItem) => any;
+    change: (file: UploadFileItem) => any;
+    remove: (file: UploadFileItem) => any;
+    exceed: (files: File[]) => any;
+    "update:fileList": (value: UploadFileItem[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onChange?: (file: File) => any;
-    onExceed?: (file: File) => any;
-    "onUpdate:file"?: (value: string) => any;
+    onSuccess?: (file: UploadFileItem, response: string) => any;
+    onError?: (file: UploadFileItem, error: unknown) => any;
+    onProgress?: (file: UploadFileItem) => any;
+    onChange?: (file: UploadFileItem) => any;
+    onRemove?: (file: UploadFileItem) => any;
+    onExceed?: (files: File[]) => any;
+    "onUpdate:fileList"?: (value: UploadFileItem[]) => any;
 }>, {
     hint: string;
+    autoUpload: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/types/packages/index.d.ts

@@ -4,6 +4,4 @@ declare const install: Plugin;
 export default install;
 export * from './components';
 export * from './composables';
-export type { FDialogFn, FDialogOptions } from './types/components';
-export type { FMessageFn, FMessageOptions, FMessageInstance } from './types/components';
-export type { FNotificationFn, FNotificationOptions, FNotificationInstance } from './types/components';
+export type { FDialogFn, FDialogOptions, FMessageFn, FMessageOptions, FMessageInstance, FNotificationFn, FNotificationOptions, FNotificationInstance, UploadFileItem } from './types/components';

package/dist/types/packages/types/components/modules/f-upload.d.ts

@@ -1,11 +1,28 @@
-type imageType = 'image/png' | 'image/jpeg' | 'image/webp' | 'image/jpg' | 'image/bmp' | 'image/gif' | 'image/svg+xml' | 'image/svg';
-type fileType = imageType;
-type fileTypes = 'image';
-type fileTypesMap = {
-    [key in fileTypes]: fileType[];
-};
-interface SheetData {
-    sheetName: string;
-    data: any[];
+interface FUploadProps {
+    accept?: string;
+    hint?: string;
+    /** 最多允许存在的文件数（数量限制，不是字节大小） */
+    limit?: number;
+    /** 选中后是否立即自动上传，默认 true */
+    autoUpload?: boolean;
+    /**
+     * 校验/拦截钩子：返回 false 或 reject 则该文件不会进入列表也不会上传。
+     * 用来做文件大小、类型等前置校验，替代过去分散在各业务组件里的校验代码。
+     */
+    beforeUpload?: (file: File) => boolean | Promise<boolean>;
+    /**
+     * 实际上传逻辑，由调用方注入——组件本身不关心用的是 fetch/axios/dispatcher，
+     * 只负责在合适的时机调用它，并把 onProgress 回调交给它在上传过程中调用。
+     */
+    httpRequest?: (file: File, onProgress: (percent: number) => void) => Promise<string>;
 }
-export type { fileTypesMap, SheetData, imageType };
+interface UploadFileItem {
+    uid: string;
+    name: string;
+    status: 'ready' | 'uploading' | 'success' | 'error';
+    percentage: number;
+    raw: File;
+    response?: string;
+    errorMessage?: string;
+}
+export type { FUploadProps, UploadFileItem };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fantasia-ui",
   "private": false,
-  "version": "0.2.58",
+  "version": "0.2.59",
   "type": "module",
   "main": "dist/fantasia-ui.umd.js",
   "module": "dist/fantasia-ui.es.js",