@keyblade/pro-components 1.12.11 → 1.12.12

package/es/pro-image-upload/image-upload.vue.d.ts

@@ -48,7 +48,7 @@ type __VLS_Props = {
     onError?: (fileItem: FileItem) => void;
     /** 文件超出个数限制时的钩子 */
     onExceed?: (fileList: FileItem[], files: File[]) => void;
-    /** 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。*/
+    /** 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 */
     onBeforeUpload?: (file: File) => boolean | Promise<any>;
     /** 内置上传文件之前开始 */
     onInnerBeforeUploadStart?: (file: File, index: number, type: EImageUploadInnerBeforeUploadStep) => void;
@@ -69,7 +69,58 @@ type __VLS_Props = {
 type __VLS_PublicProps = {
     modelValue: FileItem[];
 } & __VLS_Props;
-declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        image?(_: {
+            fileItem: any;
+        }): any;
+        'upload-button'?(_: {}): any;
+    };
+    refs: {
+        uploadInsRef: unknown;
+        cropperInsRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+            file: File;
+            index: number;
+            options: ImageUploadCropOptions;
+        }> & Readonly<{
+            onCancel?: (() => any) | undefined;
+            onConfirm?: ((value: File) => any) | undefined;
+            onImgLoad?: ((value: File) => any) | undefined;
+            onReUpload?: ((index: number) => any) | undefined;
+        }>, {
+            cropperInsRef: import('vue').Ref<any, any>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+            cancel: () => any;
+            confirm: (value: File) => any;
+            imgLoad: (value: File) => any;
+            reUpload: (index: number) => any;
+        }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+            cropperInsRef: any;
+        }, any, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<{
+            file: File;
+            index: number;
+            options: ImageUploadCropOptions;
+        }> & Readonly<{
+            onCancel?: (() => any) | undefined;
+            onConfirm?: ((value: File) => any) | undefined;
+            onImgLoad?: ((value: File) => any) | undefined;
+            onReUpload?: ((index: number) => any) | undefined;
+        }>, {
+            cropperInsRef: import('vue').Ref<any, any>;
+        }, {}, {}, {}, {}> | null;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {
     uploadInsRef: import('vue').Ref<import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
         fileList?: unknown;
         defaultFileList?: unknown;
@@ -600,4 +651,10 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
         cropperInsRef: import('vue').Ref<any, any>;
     }, {}, {}, {}, {}> | null;
 }, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/pro-image-upload/image-upload.vue.js

@@ -1,20 +1,20 @@
-import { defineComponent as se, mergeModels as G, useModel as ce, ref as m, computed as M, watch as J, resolveComponent as fe, createElementBlock as ve, openBlock as K, createVNode as me, createBlock as ge, createCommentVNode as pe, normalizeClass as he } from "vue";
+import { defineComponent as fe, mergeModels as G, useModel as ve, ref as m, computed as M, watch as J, resolveComponent as me, createElementBlock as ge, openBlock as K, createVNode as pe, createBlock as he, createCommentVNode as Ie, normalizeClass as xe, withCtx as X, renderSlot as Y } from "vue";
 import { Message as g } from "@arco-design/web-vue";
 import { conclude as L } from "vue-global-config";
 import { EImageUploadInnerBeforeUploadStep as v } from "./types.js";
 import { defaultImageUploadOptions as U } from "./constant.js";
-import Ie from "./cropper.vue.js";
-import { defaultImageUploadCheckOptions as xe, defaultImageUploadCompressorOptions as Ue, defaultImageUploadCropOptions as Ce, oneTravelImageCheckAndTransform as ye, oneTravelImageCompressor as Be } from "@keyblade/one-travel";
-const Ee = "keyblade-pro-image-upload";
-var X, Y, Z;
-const Fe = /* @__PURE__ */ se({
+import Ue from "./cropper.vue.js";
+import { defaultImageUploadCheckOptions as Ce, defaultImageUploadCompressorOptions as ye, defaultImageUploadCropOptions as Be, oneTravelImageCheckAndTransform as we, oneTravelImageCompressor as Ee } from "@keyblade/one-travel";
+const Me = "keyblade-pro-image-upload";
+var Z, A, R;
+const je = /* @__PURE__ */ fe({
   __name: "image-upload",
   props: /* @__PURE__ */ G({
     action: {},
     handlerResponse: {},
     headers: {},
     data: {},
-    name: { default: (X = U) == null ? void 0 : X.name },
+    name: { default: (Z = U) == null ? void 0 : Z.name },
     tip: {},
     accept: { default: () => {
       var C;
@@ -23,8 +23,8 @@ const Fe = /* @__PURE__ */ se({
     multiple: { type: Boolean, default: U.multiple },
     singleLimit: { default: U.singleLimit },
     limit: {},
-    disabled: { type: Boolean, default: (Y = U) == null ? void 0 : Y.disabled },
-    hideInnerBeforeUploadLoading: { type: Boolean, default: (Z = U) == null ? void 0 : Z.hideInnerBeforeUploadLoading },
+    disabled: { type: Boolean, default: (A = U) == null ? void 0 : A.disabled },
+    hideInnerBeforeUploadLoading: { type: Boolean, default: (R = U) == null ? void 0 : R.hideInnerBeforeUploadLoading },
     checkOptions: {},
     compressorOptions: {},
     cropOptions: {},
@@ -39,75 +39,75 @@ const Fe = /* @__PURE__ */ se({
     modelModifiers: {}
   }),
   emits: /* @__PURE__ */ G(["cropperImgLoad"], ["update:modelValue"]),
-  setup(C, { expose: A, emit: R }) {
-    const i = ce(C, "modelValue"), e = C, _ = R, S = m(), O = m(), p = m(), h = m(
+  setup(C, { expose: _, emit: ee }) {
+    const r = ve(C, "modelValue"), e = C, ae = ee, b = m(), O = m(), p = m(), h = m(
       []
-    ), n = m(), c = m(), s = m(), ee = M(() => e.accept.map((a) => `.${a}`).join(",")), f = M(() => L([e.checkOptions, xe]) || {}), y = M(() => L([e.compressorOptions, Ue]) || {}), B = M(() => L([e.cropOptions, Ce]) || {}), ae = (a) => {
-      var t, r, d, u;
-      const l = (u = (d = (r = (t = S.value) == null ? void 0 : t.$el) == null ? void 0 : r.querySelector) == null ? void 0 : d.call(r, "input")) == null ? void 0 : u.files;
+    ), n = m(), c = m(), s = m(), le = M(() => e.accept.map((a) => `.${a}`).join(",")), f = M(() => L([e.checkOptions, Ce]) || {}), y = M(() => L([e.compressorOptions, ye]) || {}), B = M(() => L([e.cropOptions, Be]) || {}), oe = (a) => {
+      var t, i, d, u;
+      const l = (u = (d = (i = (t = b.value) == null ? void 0 : t.$el) == null ? void 0 : i.querySelector) == null ? void 0 : d.call(i, "input")) == null ? void 0 : u.files;
       return l && l.length > 0 && (s.value = {
         selectCount: l.length
-      }), e != null && e.onBeforeUpload ? e == null ? void 0 : e.onBeforeUpload(a) : s.value && (e != null && e.singleLimit) && s.value.selectCount > (e == null ? void 0 : e.singleLimit) ? (s.value.handleIndex === void 0 ? (s.value.handleIndex = 0, g.clear(), g.error(`单次最多可选择${e == null ? void 0 : e.singleLimit}张图片`)) : s.value.handleIndex += 1, s.value.handleIndex === s.value.selectCount - 1 && (s.value = void 0), !1) : new Promise(async (E, w) => {
+      }), e != null && e.onBeforeUpload ? e == null ? void 0 : e.onBeforeUpload(a) : s.value && (e != null && e.singleLimit) && s.value.selectCount > (e == null ? void 0 : e.singleLimit) ? (s.value.handleIndex === void 0 ? (s.value.handleIndex = 0, g.clear(), g.error(`单次最多可选择${e == null ? void 0 : e.singleLimit}张图片`)) : s.value.handleIndex += 1, s.value.handleIndex === s.value.selectCount - 1 && (s.value = void 0), !1) : new Promise(async (w, E) => {
         try {
-          E(await ie(a));
+          w(await ue(a));
         } catch {
-          w();
+          E();
         } finally {
           $();
         }
       });
-    }, le = async (a) => {
-      const l = i.value.findIndex((t) => t.uid === a.uid);
-      return i.value.splice(l, 1), i.value = [...i.value], !1;
-    }, oe = (a, l) => {
-      e != null && e.onExceed ? e == null || e.onExceed(a, l) : (g.error(`单次最多可选择${(e == null ? void 0 : e.limit) || 1}张图片`), i.value = a);
     }, ne = async (a) => {
+      const l = r.value.findIndex((t) => t.uid === a.uid);
+      return r.value.splice(l, 1), r.value = [...r.value], !1;
+    }, te = (a, l) => {
+      e != null && e.onExceed ? e == null || e.onExceed(a, l) : (g.error(`单次最多可选择${(e == null ? void 0 : e.limit) || 1}张图片`), r.value = a);
+    }, ie = async (a) => {
       if (e != null && e.onSuccess)
         e == null || e.onSuccess(a);
       else {
         if (!(e != null && e.handlerResponse))
           return;
-        const l = await e.handlerResponse(a.response), t = i.value.findIndex((r) => r.uid === a.uid);
-        l.success ? i.value[t] = {
-          ...i.value[t],
+        const l = await e.handlerResponse(a.response), t = r.value.findIndex((i) => i.uid === a.uid);
+        l.success ? r.value[t] = {
+          ...r.value[t],
           ...l
-        } : i.value.splice(t, 1);
+        } : r.value.splice(t, 1);
       }
-    }, te = (a) => {
+    }, re = (a) => {
       e != null && e.onError ? e == null || e.onError(a) : setTimeout(() => {
-        const l = i.value.findIndex((t) => t.uid === a.uid);
-        i.value.splice(l, 1);
+        const l = r.value.findIndex((t) => t.uid === a.uid);
+        r.value.splice(l, 1);
       });
-    }, ie = (a) => new Promise((l, t) => {
+    }, ue = (a) => new Promise((l, t) => {
       h.value.push({ file: a, resolve: l, reject: t }), h.value.length === 1 && !n.value && $();
     }), $ = () => {
       n.value === void 0 ? n.value = 0 : n.value + 1 >= h.value.length ? (n.value = void 0, h.value = []) : n.value += 1;
-    }, re = () => {
+    }, de = () => {
       var a;
       (a = p.value) == null || a.reject();
-    }, ue = (a) => {
+    }, se = (a) => {
       var l;
       (l = p.value) == null || l.resolve(a);
-    }, de = (a) => {
-      _("cropperImgLoad", a);
+    }, ce = (a) => {
+      ae("cropperImgLoad", a);
     };
     J(n, async () => {
-      var E, w, b, k, F, z, j, Q, V, W, H, N, P, T, q, D;
+      var w, E, S, k, F, z, j, Q, V, W, H, N, P, T, q, D;
       if (n.value === void 0 || h.value.length === 0)
         return;
-      const a = h.value[n.value], { file: l, resolve: t, reject: r } = a;
+      const a = h.value[n.value], { file: l, resolve: t, reject: i } = a;
       let d = l.name, u = l;
-      if ((E = f.value) != null && E.enable) {
+      if ((w = f.value) != null && w.enable) {
         c.value = {
           loading: !0,
           text: `第${n.value + 1}张图片检测中，请稍等`
-        }, (w = e == null ? void 0 : e.onInnerBeforeUploadStart) == null || w.call(
+        }, (E = e == null ? void 0 : e.onInnerBeforeUploadStart) == null || E.call(
           e,
           l,
           n.value,
           v.check
         );
-        const o = await ye(l, l.name, {
+        const o = await we(l, l.name, {
           imageMaxSize: f.value.maxSize,
           imageAllowedType: f.value.allowedType,
           imageMinWidth: f.value.minWidth,
@@ -115,7 +115,7 @@ const Fe = /* @__PURE__ */ se({
           imageMaxWidth: f.value.maxWidth,
           imageMaxHeight: f.value.maxHeight
         });
-        if (c.value = void 0, (b = e == null ? void 0 : e.onInnerBeforeUploadEnd) == null || b.call(
+        if (c.value = void 0, (S = e == null ? void 0 : e.onInnerBeforeUploadEnd) == null || S.call(
           e,
           l,
           n.value,
@@ -126,7 +126,7 @@ const Fe = /* @__PURE__ */ se({
             errorMessage: o == null ? void 0 : o.errorMessage
           }
         ), !o.success)
-          return (k = f.value) != null && k.showErrorMessage && g.error((o == null ? void 0 : o.errorMessage) || "图片校验及转换失败"), r();
+          return (k = f.value) != null && k.showErrorMessage && g.error((o == null ? void 0 : o.errorMessage) || "图片校验及转换失败"), i();
         if (o != null && o.hasTransform) {
           const x = d == null ? void 0 : d.split(".");
           x.pop(), d = `${x.join(",")}.jpg`, u = new File([o.file], d, {
@@ -167,7 +167,7 @@ const Fe = /* @__PURE__ */ se({
               },
               errorMessage: "图片剪裁失败"
             }
-          ), (W = B.value) != null && W.showErrorMessage && g.error("图片剪裁失败"), r();
+          ), (W = B.value) != null && W.showErrorMessage && g.error("图片剪裁失败"), i();
         } finally {
           p.value = void 0;
         }
@@ -182,7 +182,7 @@ const Fe = /* @__PURE__ */ se({
           n.value,
           v.compress
         );
-        const o = await Be(u, {
+        const o = await Ee(u, {
           maxSize: y.value.maxSize,
           size: y.value.size,
           excludeAllowedTypes: (P = y.value.excludeAllowedTypes) == null ? void 0 : P.map((x) => `image/${x}`)
@@ -200,7 +200,7 @@ const Fe = /* @__PURE__ */ se({
             errorMessage: o == null ? void 0 : o.errorMessage
           }
         ), !o.success)
-          return (q = y.value) != null && q.showErrorMessage && g.error((o == null ? void 0 : o.errorMessage) || "图片压缩失败"), r();
+          return (q = y.value) != null && q.showErrorMessage && g.error((o == null ? void 0 : o.errorMessage) || "图片压缩失败"), i();
         u = new File([o.file], d, {
           type: o.file.type
         });
@@ -226,50 +226,58 @@ const Fe = /* @__PURE__ */ se({
           duration: 0
         }) : (a = I == null ? void 0 : I.close) == null || a.call(I);
       }
-    ), A({
-      uploadInsRef: S,
+    ), _({
+      uploadInsRef: b,
       cropperInsRef: O
     }), (a, l) => {
-      const t = fe("a-upload");
-      return K(), ve("div", null, [
-        me(t, {
-          class: he([`${Ee}-upload`]),
+      const t = me("a-upload");
+      return K(), ge("div", null, [
+        pe(t, {
+          class: xe([`${Me}-upload`]),
           ref_key: "uploadInsRef",
-          ref: S,
+          ref: b,
           "list-type": "picture-card",
           tip: a.tip || "上传",
           "image-preview": "",
-          "file-list": i.value,
-          "onUpdate:fileList": l[0] || (l[0] = (r) => i.value = r),
+          "file-list": r.value,
+          "onUpdate:fileList": l[0] || (l[0] = (i) => r.value = i),
           action: a.action,
           headers: a.headers,
           data: a.data,
           name: a.name,
-          accept: ee.value,
+          accept: le.value,
           multiple: a.multiple,
           limit: a.limit,
           disabled: a.disabled,
-          "on-before-upload": ae,
-          "on-before-remove": le,
-          onExceedLimit: oe,
-          onSuccess: ne,
-          onError: te
-        }, null, 8, ["class", "tip", "file-list", "action", "headers", "data", "name", "accept", "multiple", "limit", "disabled"]),
-        p.value && n.value !== void 0 ? (K(), ge(Ie, {
+          "on-before-upload": oe,
+          "on-before-remove": ne,
+          onExceedLimit: te,
+          onSuccess: ie,
+          onError: re
+        }, {
+          image: X(({ fileItem: i }) => [
+            Y(a.$slots, "image", { fileItem: i })
+          ]),
+          "upload-button": X(() => [
+            Y(a.$slots, "upload-button")
+          ]),
+          _: 3
+        }, 8, ["class", "tip", "file-list", "action", "headers", "data", "name", "accept", "multiple", "limit", "disabled"]),
+        p.value && n.value !== void 0 ? (K(), he(Ue, {
           key: 0,
           ref_key: "cropperInsRef",
           ref: O,
           file: p.value.file,
           index: n.value,
           options: B.value,
-          onCancel: re,
-          onConfirm: ue,
-          onImgLoad: de
-        }, null, 8, ["file", "index", "options"])) : pe("", !0)
+          onCancel: de,
+          onConfirm: se,
+          onImgLoad: ce
+        }, null, 8, ["file", "index", "options"])) : Ie("", !0)
       ]);
     };
   }
 });
 export {
-  Fe as default
+  je as default
 };

package/es/pro-image-upload/index.d.ts

@@ -1639,7 +1639,14 @@ declare const ProImageUpload: {
     singleLimit: number;
     disabled: boolean;
     hideInnerBeforeUploadLoading: boolean;
-}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & {
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: {
+        image?(_: {
+            fileItem: any;
+        }): any;
+        'upload-button'?(_: {}): any;
+    };
+}) & {
     install: (app: App) => void;
 };
 export * from './types';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@keyblade/pro-components",
   "description": "KeyBlade Pro Components",
   "author": "yangshuai <704807396@qq.com>",
-  "version": "1.12.11",
+  "version": "1.12.12",
   "private": false,
   "type": "module",
   "main": "es/index.js",
@@ -25,6 +25,7 @@
     "@vueuse/core": "^10.7.0",
     "vue-cropper": "^1.1.4",
     "vue-global-config": "^0.6.3",
+    "dayjs": "^1.11.18",
     "@keyblade/one-travel": "^3.0.0"
   },
   "peerDependencies": {