@keyblade/pro-components 1.12.1-alpha.16 → 1.12.1-alpha.18

package/es/index.d.ts

@@ -13,4 +13,5 @@ export { default as ProPageContainer } from './pro-page-container';
 export { default as ProReuseTabs } from './pro-reuse-tabs';
 export type { IProTab } from './pro-reuse-tabs';
 export { default as ProImageUpload } from './pro-image-upload';
+export * from './pro-image-upload';
 export type {} from './components';

package/es/index.js

@@ -1,29 +1,33 @@
 import { ProPageHeader as o } from "./pro-page-header/index.js";
-import { default as b } from "./pro-page-header/index.js";
+import { default as U } from "./pro-page-header/index.js";
 import { ProKeepAliveRouterView as r } from "./pro-keep-alive-router-view/index.js";
-import { default as w } from "./pro-keep-alive-router-view/index.js";
+import { default as b } from "./pro-keep-alive-router-view/index.js";
 import { ProLayout as t } from "./pro-layout/index.js";
-import { default as A } from "./pro-layout/index.js";
+import { default as w } from "./pro-layout/index.js";
 import { ProMenu as a } from "./pro-menu/index.js";
-import { default as H } from "./pro-menu/index.js";
+import { default as A } from "./pro-menu/index.js";
 import { ProPageContainer as m } from "./pro-page-container/index.js";
-import { default as K } from "./pro-page-container/index.js";
-import { ProReuseTabs as u } from "./pro-reuse-tabs/index.js";
-import { default as M } from "./pro-reuse-tabs/index.js";
-import { ProImageUpload as f } from "./pro-image-upload/index.js";
-import { default as U } from "./pro-image-upload/index.js";
-const p = {
+import { default as H } from "./pro-page-container/index.js";
+import { ProReuseTabs as f } from "./pro-reuse-tabs/index.js";
+import { default as L } from "./pro-reuse-tabs/index.js";
+import { ProImageUpload as u } from "./pro-image-upload/index.js";
+import { default as T } from "./pro-image-upload/index.js";
+import { EImageUploadInnerBeforeUploadStep as c } from "./pro-image-upload/types.js";
+import { defaultImageUploadOptions as E } from "./pro-image-upload/constant.js";
+const x = {
   install(e) {
-    e.use(f), e.use(o), e.use(r), e.use(t), e.use(a), e.use(m), e.use(u);
+    e.use(o), e.use(r), e.use(t), e.use(a), e.use(m), e.use(f), e.use(u);
   }
 };
 export {
-  U as ProImageUpload,
-  w as ProKeepAliveRouterView,
-  A as ProLayout,
-  H as ProMenu,
-  K as ProPageContainer,
-  b as ProPageHeader,
-  M as ProReuseTabs,
-  p as default
+  c as EImageUploadInnerBeforeUploadStep,
+  T as ProImageUpload,
+  b as ProKeepAliveRouterView,
+  w as ProLayout,
+  A as ProMenu,
+  H as ProPageContainer,
+  U as ProPageHeader,
+  L as ProReuseTabs,
+  x as default,
+  E as defaultImageUploadOptions
 };

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

@@ -2,101 +2,77 @@ import { FileItem } from '@arco-design/web-vue';
 import { EImageUploadInnerBeforeUploadStep } from './types';
 import { ImageUploadCheckOptions, ImageUploadCompressorOptions, ImageUploadCropOptions } from '@keyblade/one-travel';
 
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    modelValue: {
-        required: true;
-        type: import('vue').PropType<FileItem[]>;
-    };
-    data: {
-        type: import('vue').PropType<Record<string, any>>;
-    };
-    onError: {
-        type: import('vue').PropType<(fileItem: FileItem) => void>;
-    };
-    action: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    handlerResponse: {
-        type: import('vue').PropType<(response: any) => Promise<{
-            [key: string]: any;
-            /** 是否成功 */
-            success: boolean;
-            /** 图片地址 */
-            url?: string | undefined;
-            /** 错误消息(如果不传，请自行提示错误消息) */
-            errorMessage?: string | undefined;
-        }>>;
-    };
-    headers: {
-        type: import('vue').PropType<Record<string, any>>;
-    };
-    name: {
-        type: import('vue').PropType<string>;
-        default: string | undefined;
-    };
-    tip: {
-        type: import('vue').PropType<string>;
-    };
-    accept: {
-        type: import('vue').PropType<string[]>;
-        default: () => string[];
-    };
-    multiple: {
-        type: import('vue').PropType<boolean>;
-        default: boolean | undefined;
-    };
-    singleLimit: {
-        type: import('vue').PropType<number>;
-        default: number | undefined;
-    };
-    limit: {
-        type: import('vue').PropType<number>;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-        default: boolean | undefined;
-    };
-    hideInnerBeforeUploadLoading: {
-        type: import('vue').PropType<boolean>;
-        default: boolean | undefined;
-    };
-    checkOptions: {
-        type: import('vue').PropType<ImageUploadCheckOptions>;
-    };
-    compressorOptions: {
-        type: import('vue').PropType<ImageUploadCompressorOptions>;
-    };
-    cropOptions: {
-        type: import('vue').PropType<ImageUploadCropOptions>;
-    };
-    onSuccess: {
-        type: import('vue').PropType<(fileItem: FileItem) => void>;
-    };
-    onExceed: {
-        type: import('vue').PropType<(fileList: FileItem[], files: File[]) => void>;
-    };
-    onBeforeUpload: {
-        type: import('vue').PropType<(file: File) => boolean | Promise<any>>;
-    };
-    onInnerBeforeUploadStart: {
-        type: import('vue').PropType<(file: File, index: number, type: EImageUploadInnerBeforeUploadStep) => void>;
-    };
-    onInnerBeforeUploadEnd: {
-        type: import('vue').PropType<(file: File, index: number, type: EImageUploadInnerBeforeUploadStep, result: {
-            success: boolean;
-            error?: {
-                size?: boolean;
-                format?: boolean;
-                transform?: boolean;
-                pixel?: boolean;
-                compress?: boolean;
-                crop?: boolean;
-            };
-            errorMessage?: string;
-        }) => void>;
-    };
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /** 上传地址 */
+    action: string;
+    /** 处理响应 */
+    handlerResponse?: ((response: any) => Promise<{
+        [key: string]: any;
+        /** 是否成功 */
+        success: boolean;
+        /** 图片地址 */
+        url?: string | undefined;
+        /** 错误消息(如果不传，请自行提示错误消息) */
+        errorMessage?: string | undefined;
+    }>) | undefined;
+    /** 设置上传的请求头部 */
+    headers?: Record<string, any> | undefined;
+    /** 上传时附带的额外参数 */
+    data?: Record<string, any> | undefined;
+    /** 上传的文件字段名 - 默认: file */
+    name?: string | undefined;
+    /** 提示文字 */
+    tip?: string | undefined;
+    /** 接受上传的文件类型 - 默认: ['jpg', 'jpeg', 'png', 'bmp', 'heif', 'heic', 'gif', 'webp'] */
+    accept?: string[] | undefined;
+    /** 是否支持多选文件 - 默认: true */
+    multiple?: boolean | undefined;
+    /** 单次最大限制 - 默认: 10 */
+    singleLimit?: number | undefined;
+    /** 最大允许上传个数 */
+    limit?: number | undefined;
+    /** 是否禁用 - 默认: false */
+    disabled?: boolean | undefined;
+    /** 隐藏内置上传文件之前的loading效果 - 默认: false */
+    hideInnerBeforeUploadLoading?: boolean | undefined;
+    /** 校验选项 */
+    checkOptions?: ImageUploadCheckOptions | undefined;
+    /** 压缩选项 */
+    compressorOptions?: ImageUploadCompressorOptions | undefined;
+    /** 剪裁选项 */
+    cropOptions?: ImageUploadCropOptions | undefined;
+    /** 文件列表移除文件时的钩子 */
+    /** 文件上传成功时的钩子 */
+    onSuccess?: ((fileItem: FileItem) => void) | undefined;
+    /** 文件上传失败时的钩子 */
+    onError?: ((fileItem: FileItem) => void) | undefined;
+    /** 文件超出个数限制时的钩子 */
+    onExceed?: ((fileList: FileItem[], files: File[]) => void) | undefined;
+    /** 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。*/
+    onBeforeUpload?: ((file: File) => boolean | Promise<any>) | undefined;
+    /** 内置上传文件之前开始 */
+    onInnerBeforeUploadStart?: ((file: File, index: number, type: EImageUploadInnerBeforeUploadStep) => void) | undefined;
+    /** 内置上传文件之前结束 */
+    onInnerBeforeUploadEnd?: ((file: File, index: number, type: EImageUploadInnerBeforeUploadStep, result: {
+        success: boolean;
+        error?: {
+            size?: boolean;
+            format?: boolean;
+            transform?: boolean;
+            pixel?: boolean;
+            compress?: boolean;
+            crop?: boolean;
+        };
+        errorMessage?: string;
+    }) => void) | undefined;
 }>, {
+    name: string | undefined;
+    accept: () => string[];
+    multiple: boolean | undefined;
+    singleLimit: number | undefined;
+    disabled: boolean | undefined;
+    hideInnerBeforeUploadLoading: boolean | undefined;
+}>>, {
     uploadInsRef: import('vue').Ref<import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
         fileList?: unknown;
         defaultFileList?: unknown;
@@ -575,101 +551,77 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     cropperInsRef: import('vue').Ref<any, any>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     cropperImgLoad: (value: File) => void;
-}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    modelValue: {
-        required: true;
-        type: import('vue').PropType<FileItem[]>;
-    };
-    data: {
-        type: import('vue').PropType<Record<string, any>>;
-    };
-    onError: {
-        type: import('vue').PropType<(fileItem: FileItem) => void>;
-    };
-    action: {
-        type: import('vue').PropType<string>;
-        required: true;
-    };
-    handlerResponse: {
-        type: import('vue').PropType<(response: any) => Promise<{
-            [key: string]: any;
-            /** 是否成功 */
-            success: boolean;
-            /** 图片地址 */
-            url?: string | undefined;
-            /** 错误消息(如果不传，请自行提示错误消息) */
-            errorMessage?: string | undefined;
-        }>>;
-    };
-    headers: {
-        type: import('vue').PropType<Record<string, any>>;
-    };
-    name: {
-        type: import('vue').PropType<string>;
-        default: string | undefined;
-    };
-    tip: {
-        type: import('vue').PropType<string>;
-    };
-    accept: {
-        type: import('vue').PropType<string[]>;
-        default: () => string[];
-    };
-    multiple: {
-        type: import('vue').PropType<boolean>;
-        default: boolean | undefined;
-    };
-    singleLimit: {
-        type: import('vue').PropType<number>;
-        default: number | undefined;
-    };
-    limit: {
-        type: import('vue').PropType<number>;
-    };
-    disabled: {
-        type: import('vue').PropType<boolean>;
-        default: boolean | undefined;
-    };
-    hideInnerBeforeUploadLoading: {
-        type: import('vue').PropType<boolean>;
-        default: boolean | undefined;
-    };
-    checkOptions: {
-        type: import('vue').PropType<ImageUploadCheckOptions>;
-    };
-    compressorOptions: {
-        type: import('vue').PropType<ImageUploadCompressorOptions>;
-    };
-    cropOptions: {
-        type: import('vue').PropType<ImageUploadCropOptions>;
-    };
-    onSuccess: {
-        type: import('vue').PropType<(fileItem: FileItem) => void>;
-    };
-    onExceed: {
-        type: import('vue').PropType<(fileList: FileItem[], files: File[]) => void>;
-    };
-    onBeforeUpload: {
-        type: import('vue').PropType<(file: File) => boolean | Promise<any>>;
-    };
-    onInnerBeforeUploadStart: {
-        type: import('vue').PropType<(file: File, index: number, type: EImageUploadInnerBeforeUploadStep) => void>;
-    };
-    onInnerBeforeUploadEnd: {
-        type: import('vue').PropType<(file: File, index: number, type: EImageUploadInnerBeforeUploadStep, result: {
-            success: boolean;
-            error?: {
-                size?: boolean;
-                format?: boolean;
-                transform?: boolean;
-                pixel?: boolean;
-                compress?: boolean;
-                crop?: boolean;
-            };
-            errorMessage?: string;
-        }) => void>;
-    };
-}>> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /** 上传地址 */
+    action: string;
+    /** 处理响应 */
+    handlerResponse?: ((response: any) => Promise<{
+        [key: string]: any;
+        /** 是否成功 */
+        success: boolean;
+        /** 图片地址 */
+        url?: string | undefined;
+        /** 错误消息(如果不传，请自行提示错误消息) */
+        errorMessage?: string | undefined;
+    }>) | undefined;
+    /** 设置上传的请求头部 */
+    headers?: Record<string, any> | undefined;
+    /** 上传时附带的额外参数 */
+    data?: Record<string, any> | undefined;
+    /** 上传的文件字段名 - 默认: file */
+    name?: string | undefined;
+    /** 提示文字 */
+    tip?: string | undefined;
+    /** 接受上传的文件类型 - 默认: ['jpg', 'jpeg', 'png', 'bmp', 'heif', 'heic', 'gif', 'webp'] */
+    accept?: string[] | undefined;
+    /** 是否支持多选文件 - 默认: true */
+    multiple?: boolean | undefined;
+    /** 单次最大限制 - 默认: 10 */
+    singleLimit?: number | undefined;
+    /** 最大允许上传个数 */
+    limit?: number | undefined;
+    /** 是否禁用 - 默认: false */
+    disabled?: boolean | undefined;
+    /** 隐藏内置上传文件之前的loading效果 - 默认: false */
+    hideInnerBeforeUploadLoading?: boolean | undefined;
+    /** 校验选项 */
+    checkOptions?: ImageUploadCheckOptions | undefined;
+    /** 压缩选项 */
+    compressorOptions?: ImageUploadCompressorOptions | undefined;
+    /** 剪裁选项 */
+    cropOptions?: ImageUploadCropOptions | undefined;
+    /** 文件列表移除文件时的钩子 */
+    /** 文件上传成功时的钩子 */
+    onSuccess?: ((fileItem: FileItem) => void) | undefined;
+    /** 文件上传失败时的钩子 */
+    onError?: ((fileItem: FileItem) => void) | undefined;
+    /** 文件超出个数限制时的钩子 */
+    onExceed?: ((fileList: FileItem[], files: File[]) => void) | undefined;
+    /** 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。*/
+    onBeforeUpload?: ((file: File) => boolean | Promise<any>) | undefined;
+    /** 内置上传文件之前开始 */
+    onInnerBeforeUploadStart?: ((file: File, index: number, type: EImageUploadInnerBeforeUploadStep) => void) | undefined;
+    /** 内置上传文件之前结束 */
+    onInnerBeforeUploadEnd?: ((file: File, index: number, type: EImageUploadInnerBeforeUploadStep, result: {
+        success: boolean;
+        error?: {
+            size?: boolean;
+            format?: boolean;
+            transform?: boolean;
+            pixel?: boolean;
+            compress?: boolean;
+            crop?: boolean;
+        };
+        errorMessage?: string;
+    }) => void) | undefined;
+}>, {
+    name: string | undefined;
+    accept: () => string[];
+    multiple: boolean | undefined;
+    singleLimit: number | undefined;
+    disabled: boolean | undefined;
+    hideInnerBeforeUploadLoading: boolean | undefined;
+}>>> & Readonly<{
     onCropperImgLoad?: ((value: File) => any) | undefined;
 }>, {
     name: string;
@@ -680,3 +632,20 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     hideInnerBeforeUploadLoading: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

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

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

@@ -2,10 +2,6 @@ import { App } from 'vue';
 
 declare const ProImageUpload: {
     new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
-        modelValue: {
-            required: true;
-            type: import('vue').PropType<import('@arco-design/web-vue').FileItem[]>;
-        };
         data: {
             type: import('vue').PropType<Record<string, any>>;
         };
@@ -588,10 +584,6 @@ declare const ProImageUpload: {
         M: {};
         Defaults: {};
     }, Readonly<import('vue').ExtractPropTypes<{
-        modelValue: {
-            required: true;
-            type: import('vue').PropType<import('@arco-design/web-vue').FileItem[]>;
-        };
         data: {
             type: import('vue').PropType<Record<string, any>>;
         };
@@ -1169,10 +1161,6 @@ declare const ProImageUpload: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
-    modelValue: {
-        required: true;
-        type: import('vue').PropType<import('@arco-design/web-vue').FileItem[]>;
-    };
     data: {
         type: import('vue').PropType<Record<string, any>>;
     };
@@ -1750,5 +1738,7 @@ declare const ProImageUpload: {
 }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & {
     install: (app: App) => void;
 };
+export * from './types';
+export * from './constant';
 export { ProImageUpload };
 export default ProImageUpload;

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

@@ -1,11 +1,11 @@
-import a from "./image-upload.vue.js";
-import { Upload as m } from "@arco-design/web-vue";
-const t = Object.assign(a, {
+import e from "./image-upload.vue.js";
+import { Modal as s, Upload as t, Button as l, Tooltip as m, Spin as n, Space as u, Message as a } from "@arco-design/web-vue";
+const r = Object.assign(e, {
   install: (o) => {
-    o.use(m), o.component("KbProImageUpload", a);
+    o.use(s), o.use(t), o.use(l), o.use(m), o.use(n), o.use(u), o.use(a), o.component("KbProImageUpload", e);
   }
-}), s = t;
+}), d = r;
 export {
-  t as ProImageUpload,
-  s as default
+  r as ProImageUpload,
+  d as default
 };

package/es/style.css

@@ -1 +1 @@
-.keyblade-pro-page-header{background:var(--color-bg-2);padding:16px 32px}.keyblade-pro-page-header .keyblade-pro-page-header-section-breadcrumb .arco-breadcrumb-item:first-child{padding-left:0}.keyblade-pro-page-header .keyblade-pro-page-header-title.arco-typography{padding-top:4px;margin-top:0}.keyblade-pro-menu .keyblade-pro-menu-item-img{width:14px;height:auto}.keyblade-pro-page-container .keyblade-pro-page-container-content{padding:20px}.keyblade-pro-reuse-tabs{position:relative;background-color:var(--color-bg-2);padding:4px 20px}.keyblade-pro-layout{width:100%;height:100%}.keyblade-pro-layout .keyblade-pro-layout-header{position:fixed;top:0;left:0;width:100%;height:var(--2156faf3);z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background-color:var(--color-bg-2);border-bottom:1px solid var(--color-border);transition:all .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-header-left{cursor:pointer;display:flex;align-items:center}.keyblade-pro-layout .keyblade-pro-layout-header-left-logo-img{width:28px;height:28px}.keyblade-pro-layout .keyblade-pro-layout-header-left-logo-title.arco-typography{margin:0;font-size:18px}.keyblade-pro-layout .keyblade-pro-layout-header-center{flex:1}.keyblade-pro-layout .keyblade-pro-layout-sider{padding-top:var(--2156faf3);position:fixed;top:0;left:0;z-index:99;height:100%;transition:all .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-sider-content{position:relative;height:100%;overflow:auto}.keyblade-pro-layout .keyblade-pro-layout-sider-collapse-btn.arco-btn{position:absolute;right:12px;bottom:12px}.keyblade-pro-layout .keyblade-pro-layout-body{padding-top:var(--2156faf3);padding-left:var(--2e3e7e4c);min-height:100vh;overflow-y:hidden;background-color:var(--color-fill-2);transition:padding .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-body-affix .arco-affix{z-index:98}.keyblade-pro-layout .keyblade-pro-layout-body-footer{display:flex;align-items:center;justify-content:center;height:40px;color:var(--color-text-2);text-align:center}.keyblade-pro-layout .keyblade-pro-layout-body-collapsed{padding-left:var(--a70b89aa)}.keyblade-pro-layout-side .keyblade-pro-layout-header{z-index:98;left:var(--2e3e7e4c);width:calc(100% - var(--2e3e7e4c))}.keyblade-pro-layout-side .keyblade-pro-layout-header-collapsed{left:var(--a70b89aa);width:calc(100% - var(--a70b89aa))}.keyblade-pro-layout-side .keyblade-pro-layout-sider{padding-top:0}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo{position:relative;display:flex;align-items:center;padding:16px;cursor:pointer;transition:padding .3s cubic-bezier(.645,.045,.355,1)}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo-img{width:28px;height:28px}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo-title.arco-typography{margin:0;font-size:18px}.keyblade-pro-layout-side .keyblade-pro-layout-sider-collapsed .keyblade-pro-layout-sider-content-logo{padding:16px 10px}
+.keyblade-pro-page-container .keyblade-pro-page-container-content{padding:20px}.keyblade-pro-menu .keyblade-pro-menu-item-img{width:14px;height:auto}.keyblade-pro-layout{width:100%;height:100%}.keyblade-pro-layout .keyblade-pro-layout-header{position:fixed;top:0;left:0;width:100%;height:var(--2156faf3);z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background-color:var(--color-bg-2);border-bottom:1px solid var(--color-border);transition:all .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-header-left{cursor:pointer;display:flex;align-items:center}.keyblade-pro-layout .keyblade-pro-layout-header-left-logo-img{width:28px;height:28px}.keyblade-pro-layout .keyblade-pro-layout-header-left-logo-title.arco-typography{margin:0;font-size:18px}.keyblade-pro-layout .keyblade-pro-layout-header-center{flex:1}.keyblade-pro-layout .keyblade-pro-layout-sider{padding-top:var(--2156faf3);position:fixed;top:0;left:0;z-index:99;height:100%;transition:all .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-sider-content{position:relative;height:100%;overflow:auto}.keyblade-pro-layout .keyblade-pro-layout-sider-collapse-btn.arco-btn{position:absolute;right:12px;bottom:12px}.keyblade-pro-layout .keyblade-pro-layout-body{padding-top:var(--2156faf3);padding-left:var(--2e3e7e4c);min-height:100vh;overflow-y:hidden;background-color:var(--color-fill-2);transition:padding .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-body-affix .arco-affix{z-index:98}.keyblade-pro-layout .keyblade-pro-layout-body-footer{display:flex;align-items:center;justify-content:center;height:40px;color:var(--color-text-2);text-align:center}.keyblade-pro-layout .keyblade-pro-layout-body-collapsed{padding-left:var(--a70b89aa)}.keyblade-pro-layout-side .keyblade-pro-layout-header{z-index:98;left:var(--2e3e7e4c);width:calc(100% - var(--2e3e7e4c))}.keyblade-pro-layout-side .keyblade-pro-layout-header-collapsed{left:var(--a70b89aa);width:calc(100% - var(--a70b89aa))}.keyblade-pro-layout-side .keyblade-pro-layout-sider{padding-top:0}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo{position:relative;display:flex;align-items:center;padding:16px;cursor:pointer;transition:padding .3s cubic-bezier(.645,.045,.355,1)}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo-img{width:28px;height:28px}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo-title.arco-typography{margin:0;font-size:18px}.keyblade-pro-layout-side .keyblade-pro-layout-sider-collapsed .keyblade-pro-layout-sider-content-logo{padding:16px 10px}.keyblade-pro-page-header{background:var(--color-bg-2);padding:16px 32px}.keyblade-pro-page-header .keyblade-pro-page-header-section-breadcrumb .arco-breadcrumb-item:first-child{padding-left:0}.keyblade-pro-page-header .keyblade-pro-page-header-title.arco-typography{padding-top:4px;margin-top:0}.keyblade-pro-reuse-tabs{position:relative;background-color:var(--color-bg-2);padding:4px 20px}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@keyblade/pro-components",
   "description": "KeyBlade Pro Components",
   "author": "yangshuai <704807396@qq.com>",
-  "version": "1.12.1-alpha.16",
+  "version": "1.12.1-alpha.18",
   "private": false,
   "type": "module",
   "main": "es/index.js",