@deot/vc-components 1.0.24 → 1.0.25

package/dist/index.cjs

@@ -12,6 +12,7 @@ const vcHooks = require('@deot/vc-hooks');
 const helperWheel = require('@deot/helper-wheel');
 const helperValidator = require('@deot/helper-validator');
 const helperCache = require('@deot/helper-cache');
+const PhotoSwipeLightbox = require('photoswipe/lightbox');
 const Load = require('@deot/helper-load');
 const helperScheduler = require('@deot/helper-scheduler');
 const lodash = require('lodash');
@@ -1087,7 +1088,7 @@ const Button = /* @__PURE__ */ vue.defineComponent({
     slots
   }) {
     const vm = vue.getCurrentInstance();
-    const hasSlot = vue.ref(true);
+    const isHover = vue.ref(false);
     const isLoading = vue.ref(false);
     const group = vue.inject('vc-button-group', {
       size: 'medium',
@@ -1096,10 +1097,11 @@ const Button = /* @__PURE__ */ vue.defineComponent({
     });
     const classes = vue.computed(() => ({
       'is-circle': props.circle || group.circle,
-      'is-alone': !hasSlot.value,
+      'is-alone': !slots?.default,
       'is-round': props.round,
       'is-long': props.long,
       'is-disabled': props.disabled,
+      'is-hover': isHover.value,
       [`is-${props.size}`]: true,
       [`is-${props.type}`]: true
     }));
@@ -1112,9 +1114,6 @@ const Button = /* @__PURE__ */ vue.defineComponent({
         });
       }
     };
-    vue.onMounted(() => {
-      hasSlot.value = slots.default !== undefined;
-    });
     return () => {
       return vue.createVNode(Debounce, {
         "tag": props.tag,
@@ -1125,15 +1124,19 @@ const Button = /* @__PURE__ */ vue.defineComponent({
         "wait": props.wait,
         "disabled": props.disabled,
         "type": props.htmlType,
-        "onClick": handleClick
+        "onClick": handleClick,
+        "onMouseenter": () => isHover.value = true,
+        "onMouseleave": () => isHover.value = false
       }, {
         default: () => [props.icon && vue.createVNode(Icon, {
           "type": props.icon
-        }, null), isLoading.value && vue.createVNode(Spin, {
+        }, null), slots.icon && slots?.icon?.({
+          hover: isHover.value
+        }), isLoading.value && vue.createVNode(Spin, {
           "size": 12,
           "foreground": props.type === 'default' ? '#ccc' : '#fff',
           "class": "vc-button__loading"
-        }, null), hasSlot.value && vue.createVNode("span", null, [slots?.default?.()])]
+        }, null), slots?.default && vue.createVNode("span", null, [slots?.default?.()])]
       });
     };
   }
@@ -1549,7 +1552,8 @@ const useCheckbox = () => {
       "is-indeterminate": props.indeterminate,
       "is-checked": checked.value,
       "is-disabled": props.disabled,
-      "is-focus": isFocus.value
+      "is-focus": isFocus.value,
+      "is-error": !!formItem?.message?.value
     };
   });
   vue.watch(
@@ -3200,7 +3204,8 @@ const useInput = (input) => {
   const classes = vue.computed(() => {
     return {
       "is-focus": isFocus.value,
-      "is-disabled": props.disabled
+      "is-disabled": props.disabled,
+      "is-error": !!formItem?.message?.value
     };
   });
   const currentMaxlength = vue.computed(() => {
@@ -8721,7 +8726,7 @@ const Drawer$ = new Portal(DrawerView, {
   multiple: true
 });
 const destroy$3 = () => Drawer$.destroy();
-const open$1 = (options) => {
+const open$2 = (options) => {
   const leaf = Drawer$.popup({
     ...options,
     onFulfilled: options.onClose,
@@ -8731,7 +8736,7 @@ const open$1 = (options) => {
   leaf.wrapper.toggle?.(true);
   return leaf;
 };
-const Drawer = Object.assign(DrawerView, { open: open$1, destroy: destroy$3 });
+const Drawer = Object.assign(DrawerView, { open: open$2, destroy: destroy$3 });
 
 const MDrawer = Drawer;
 const MDrawerView = DrawerView;
@@ -8830,7 +8835,7 @@ const useForm = (expose, options = {}) => {
   const instance = vue.getCurrentInstance();
   const props = instance.props;
   const fields = [];
-  vue.provide("form", {
+  vue.provide("vc-form", {
     props,
     add: (field) => {
       field && fields.push(field);
@@ -8978,8 +8983,7 @@ const props$L = {
     default: false
   },
   labelPosition: {
-    type: String,
-    default: "right"
+    type: String
   },
   contentStyle: [Object, String],
   contentClass: [Object, String],
@@ -8997,7 +9001,7 @@ const toRules = (rules) => {
   return rules instanceof Array ? rules : rules ? [rules] : [];
 };
 const useFormItem = (expose) => {
-  const form = vue.inject("form");
+  const form = vue.inject("vc-form");
   const instance = vue.getCurrentInstance();
   const props = instance.props;
   const { slots } = instance;
@@ -9510,7 +9514,7 @@ const ObjectFit = {
   FILL: 'fill',
   SCALE_DOWN: 'scale-down'
 };
-const Image = /* @__PURE__ */ vue.defineComponent({
+const Image$1 = /* @__PURE__ */ vue.defineComponent({
   name: COMPONENT_NAME$W,
   inheritAttrs: false,
   props: props$H,
@@ -9705,7 +9709,7 @@ const Image = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const MImage = Image;
+const MImage = Image$1;
 
 const props$G = {
   tag: {
@@ -9743,7 +9747,7 @@ const props$F = {
 /** @jsxImportSource vue */
 
 const COMPONENT_NAME$U = 'vc-image-preview';
-const ImagePreview = /* @__PURE__ */ vue.defineComponent({
+const ImagePreview$1 = /* @__PURE__ */ vue.defineComponent({
   name: COMPONENT_NAME$U,
   props: props$F,
   setup(props, {
@@ -9757,6 +9761,81 @@ const ImagePreview = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
+const MAX_WIDTH = window.innerWidth;
+const MAX_HEIGHT = window.innerHeight;
+const getFitSize = (src) => {
+  return new Promise((resolve) => {
+    const img = new Image();
+    let width;
+    let height;
+    img.onload = () => {
+      const owidth = img.naturalWidth || img.width;
+      const oheight = img.naturalHeight || img.height;
+      if (owidth > oheight) {
+        width = Math.min(MAX_WIDTH, owidth);
+        height = width / owidth * oheight;
+        resolve({
+          width,
+          height
+        });
+      } else {
+        height = Math.min(MAX_HEIGHT, oheight);
+        width = height / oheight * owidth;
+        resolve({
+          width,
+          height
+        });
+      }
+    };
+    img.onerror = () => resolve({});
+    img.src = src;
+  });
+};
+const open$1 = async (options) => {
+  const e = VcInstance.globalEvent;
+  const data = options.data.map((i) => {
+    if (typeof i === "string") {
+      return {
+        src: i
+      };
+    }
+    return {
+      ...i,
+      src: i.source || i.src
+    };
+  });
+  for (let i = 0; i < data.length; i++) {
+    if (!data[i].width) {
+      data[i] = {
+        ...data[i],
+        ...await getFitSize(data[i].src)
+      };
+    }
+  }
+  const lightbox = new PhotoSwipeLightbox({
+    pswpModule: () => import('photoswipe'),
+    closeTitle: "关闭(Esc)",
+    zoomTitle: "缩放",
+    arrowPrevTitle: "上一张",
+    arrowNextTitle: "下一张",
+    errorMsg: "网络异常 图片加载失败",
+    indexIndicatorSep: " / ",
+    initialZoomLevel: "fit"
+  });
+  lightbox.init();
+  lightbox.loadAndOpen(
+    options.current || 0,
+    data,
+    // 下面无效，需要给官方支持
+    {
+      x: e?.clientX,
+      y: e?.clientY
+    }
+  );
+};
+
+const ImagePreview = Object.assign(ImagePreview$1, { open: open$1 });
+
 const MImagePreview = ImagePreview;
 
 const props$E = {
@@ -10363,9 +10442,8 @@ const props$z = {
     type: [String, Boolean],
     default: "取消"
   },
-  wrapperStyle: {
-    type: [String, Object]
-  },
+  wrapperStyle: [String, Object],
+  wrapperClass: [String, Object],
   footer: {
     type: Boolean,
     default: true
@@ -10419,6 +10497,7 @@ const ModalView = /* @__PURE__ */ vue.defineComponent({
 
     // 注: 服务端渲染为0, 在客服端激活前，展示端存在问题【高度不定】
     const MAX_HEIGHT = vcShared.IS_SERVER ? 0 : window.innerHeight - 20;
+    const MAX_WIDTH = vcShared.IS_SERVER ? 0 : window.innerWidth - 20;
     const defaultSize = vue.computed(() => {
       let width = 0;
       let height = 0;
@@ -10437,7 +10516,7 @@ const ModalView = /* @__PURE__ */ vue.defineComponent({
           break;
       }
       return {
-        width: props.width || width,
+        width: Math.min(props.width || width, MAX_WIDTH),
         height: Math.min(props.height || height, MAX_HEIGHT)
       };
     });
@@ -10673,7 +10752,7 @@ const ModalView = /* @__PURE__ */ vue.defineComponent({
         "style": [props.wrapperStyle || {}, props.draggable ? {
           top: 0
         } : {}],
-        "class": "vc-modal__wrapper",
+        "class": [props.wrapperClass, 'vc-modal__wrapper'],
         "onClick": e => handleClose(e, false)
       }, [vue.createVNode(TransitionScale, {
         "mode": "part",
@@ -12340,8 +12419,12 @@ const Progress = /* @__PURE__ */ vue.defineComponent({
   setup(props, {
     slots
   }) {
+    const currentPercent = vue.computed(() => {
+      const v = Number(props.percent);
+      return v >= 100 ? 100 : v;
+    });
     const currentStatus = vue.computed(() => {
-      if (Number(props.percent) >= 100) {
+      if (currentPercent.value === 100) {
         return 'success';
       }
       return props.status;
@@ -12353,6 +12436,7 @@ const Progress = /* @__PURE__ */ vue.defineComponent({
     const binds = vue.computed(() => {
       return {
         ...props,
+        percent: currentPercent.value,
         status: currentStatus.value,
         color: currentColor.value
       };
@@ -12430,7 +12514,8 @@ const useRadio = () => {
     return {
       "is-checked": checked.value,
       "is-disabled": isDisabled.value,
-      "is-focus": isFocus.value
+      "is-focus": isFocus.value,
+      "is-error": !!formItem?.message?.value
     };
   });
   vue.watch(
@@ -12614,8 +12699,7 @@ const RadioGroup = /* @__PURE__ */ vue.defineComponent({
     return () => {
       if (props.fragment) return slots.default?.();
       return vue.createVNode("div", {
-        "class": "vc-radio-group",
-        "style": classes.value,
+        "class": [classes.value, 'vc-radio-group'],
         "name": props.name
       }, [slots?.default?.()]);
     };
@@ -16935,7 +17019,11 @@ const props$a = {
   closable: {
     type: Boolean,
     default: false
-  }
+  },
+  barStyle: [Object, String],
+  contentStyle: [Object, String],
+  barClass: [Object, String],
+  contentClass: [Object, String]
 };
 
 const useTabs = (options = {}) => {
@@ -17188,10 +17276,10 @@ const Tabs = /* @__PURE__ */ vue.defineComponent({
         "class": "vc-tabs__extra"
       }, [slots.extra?.()]), vue.createVNode("div", {
         "ref": wrapper,
-        "style": {
+        "style": [props.barStyle, {
           padding: tabs.scrollable.value ? '0 24px' : 0
-        },
-        "class": "vc-tabs__bar"
+        }],
+        "class": [props.barClass, 'vc-tabs__bar']
       }, [tabs.scrollable.value && vue.createVNode(Icon, {
         "class": "vc-tabs__icon is-left",
         "type": "left",
@@ -17231,8 +17319,8 @@ const Tabs = /* @__PURE__ */ vue.defineComponent({
         }, null)]);
       })])])]), vue.createVNode("div", {
         "ref": content,
-        "style": tabs.contentStyle.value,
-        "class": "vc-tabs__content"
+        "style": [props.contentStyle, tabs.contentStyle.value],
+        "class": [props.contentClass, 'vc-tabs__content']
       }, [slots.default?.()])]);
     };
   }
@@ -17847,7 +17935,8 @@ const useTextarea = (textarea, expose) => {
   const classes = vue.computed(() => {
     return {
       "is-focus": isFocus.value,
-      "is-disabled": props.disabled
+      "is-disabled": props.disabled,
+      "is-error": !!formItem?.message?.value
     };
   });
   const listeners = vue.computed(() => {
@@ -18765,10 +18854,342 @@ const Upload = vue.defineComponent({
 const MUpload = Upload;
 
 const props = {
-  tag: {
-    type: String,
-    default: "div"
-  }
+  picker: {
+    type: Array,
+    default: () => ["image"]
+  },
+  sortable: {
+    type: Boolean,
+    default: false
+  },
+  mask: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * vc-upload组件的属性
+   */
+  uploadOptions: {
+    type: Object,
+    default() {
+      return {};
+    }
+  },
+  /**
+   * 数据源['xxx.jpg', ....]
+   */
+  modelValue: {
+    type: [String, Array, Object],
+    // { value: '', label: '' }
+    default: () => []
+  },
+  // 数据字典
+  keyValue: {
+    type: Object,
+    default: () => {
+      return {
+        label: "label",
+        value: "value"
+      };
+    }
+  },
+  output: {
+    type: [String, Function],
+    default: "object",
+    validator: (v) => /(string|object)/.test(v)
+  },
+  /**
+   * 可上传的最大值,跟upload内的Max不同，有可能是对象类型，对应的Upload做限制
+   */
+  max: {
+    type: [Number, Object],
+    default: Number.MAX_SAFE_INTEGER
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 上传成功后对数据的格式化
+   */
+  formatter: Function,
+  // TODO 下面两个重复了，需删除
+  /**
+   * 盒子className
+   */
+  boxClass: String,
+  imagePreviewOptions: {
+    type: Object,
+    default: () => ({})
+  },
+  imageClass: String,
+  videoClass: String,
+  audioClass: String,
+  fileClass: String,
+  compressOptions: {
+    type: Object,
+    default: () => {
+      return {
+        compress: false,
+        // 是否开启图片压缩
+        width: 0,
+        // 图片缩放最大宽度，为0默认源图片宽度
+        height: 0,
+        // 图片缩放最大高度，为0默认源图片高度
+        filetype: "image/jpeg",
+        // 文件类型
+        encoderOptions: 0.92
+        // 在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，使用默认值 0.92
+      };
+    }
+  },
+  showMessage: Boolean,
+  gallery: Boolean
+};
+
+const recognizer = (url) => {
+  const reg = /\.(jpe?g|png|gif|bmp|webp|image|heic|mp4|mov|avi|mpg|mpeg|rmvb)/ig;
+  const result = url.match(reg);
+  return result && result.length ? /.(jpe?g|png|gif|bmp|webp|image|heic)/ig.test(result[result.length - 1]) ? "image" : "video" : "file";
+};
+const FILE_ACCEPT_MAP = {
+  DOC_ACCEPTS: ".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  EXCEL_ACCEPTS: ".csv,.xls,.xlsx,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  PPT_ACCEPTS: ".ppt,.pptx,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  PDF_ACCEPTS: ".pdf,application/pdf",
+  TXT_ACCEPTS: "text/plain",
+  HTML_ACCEPTS: "text/html"
+};
+
+const {
+  DOC_ACCEPTS,
+  EXCEL_ACCEPTS,
+  PPT_ACCEPTS,
+  PDF_ACCEPTS,
+  TXT_ACCEPTS,
+  HTML_ACCEPTS
+} = FILE_ACCEPT_MAP;
+const usePicker = (expose) => {
+  const instance = vue.getCurrentInstance();
+  const props = instance.props;
+  const { emit } = instance;
+  const formItem = vue.inject("vc-form-item", {});
+  const allowKeepString = vue.computed(() => {
+    return typeof props.modelValue === "string";
+  });
+  const allowKeepObject = vue.computed(() => {
+    const v = props.modelValue;
+    return props.output === "object" && props.max === 1 && !Array.isArray(v) && typeof v === "object";
+  });
+  const currentValue = vue.ref({
+    image: [],
+    video: [],
+    audio: [],
+    file: []
+  });
+  const currentUploadOptions = vue.ref({
+    image: {
+      accept: "image/gif,image/jpeg,image/jpg,image/png",
+      ...props.uploadOptions.image || {}
+    },
+    video: {
+      accept: "video/*",
+      ...props.uploadOptions.video || {}
+    },
+    audio: {
+      accept: "audio/*",
+      ...props.uploadOptions.audio || {}
+    },
+    file: {
+      accept: `${DOC_ACCEPTS},${EXCEL_ACCEPTS},${PPT_ACCEPTS},${PDF_ACCEPTS},${TXT_ACCEPTS},${HTML_ACCEPTS}`,
+      ...props.uploadOptions.file || {}
+    }
+  });
+  const dynamicMax = vue.computed(() => {
+    const image = currentValue.value.image || [];
+    const video = currentValue.value.video || [];
+    const audio = currentValue.value.audio || [];
+    const file = currentValue.value.file || [];
+    const imageCount = image.length || 0;
+    const videoCount = video.length || 0;
+    const audioCount = audio.length || 0;
+    const fileCount = file.length || 0;
+    if (typeof props.max === "number") {
+      const curNum = imageCount + videoCount + audioCount + fileCount;
+      const leftNum = props.max - curNum;
+      return {
+        image: leftNum,
+        video: leftNum,
+        audio: leftNum,
+        file: leftNum
+      };
+    } else if (typeof props.max === "object") {
+      const {
+        image: $image,
+        video: $video,
+        audio: $audio,
+        file: $file
+      } = props.max;
+      const max = {};
+      $image && (max.image = $image - imageCount);
+      $video && (max.video = $video - videoCount);
+      $audio && (max.audio = $audio - audioCount);
+      $file && (max.file = $file - fileCount);
+      return max;
+    }
+    return {};
+  });
+  const sync = () => {
+    let v = props.picker.reduce((pre, cur) => pre.concat(currentValue.value[cur] || []), []).filter((i) => !i.errorFlag).map((i) => {
+      if (props.output === "string") return i[props.keyValue.value];
+      if (typeof props.output === "function") return props.output(i) || i;
+      return i;
+    });
+    if (allowKeepString.value) {
+      v = v.map((i) => i[props.keyValue.value] || i).join(",");
+    } else if (allowKeepObject.value) {
+      v = v[0] || null;
+    }
+    emit("update:modelValue", v);
+    emit("change", v);
+    formItem.change?.(v);
+  };
+  const handleFileBefore = async (vFile, fileList, type) => {
+    if (props?.compressOptions?.compress && type === "image") ;
+    const onFileBefore = instance.vnode.props?.onFileBefore || (() => {
+    });
+    return await onFileBefore(vFile, fileList, type) || vFile;
+  };
+  const handleFileStart = (vFile, type) => {
+    currentValue.value[type].push(vFile);
+    emit("file-start", vFile, type);
+  };
+  const handleFileProgress = (e, vFile, type) => {
+    if (parseInt(e.percent, 10) <= 100) {
+      currentValue.value[type] = currentValue.value[type].map((item) => {
+        if (vFile.uploadId === item.uploadId) {
+          return {
+            ...item,
+            percent: e.percent
+          };
+        }
+        return item;
+      });
+    }
+  };
+  const handleFileSuccess = (response, vFile, cycle, type) => {
+    currentValue.value[type] = currentValue.value[type].map((item) => {
+      if (item.uploadId === vFile.uploadId) {
+        return {
+          type,
+          [props.keyValue.label]: vFile.name,
+          // 外部需要满足response中带source
+          [props.keyValue.value]: response.source
+        };
+      }
+      return item;
+    });
+    emit("file-success", response, vFile, cycle, type);
+  };
+  const handleError = (err, type) => {
+    props.showMessage && err.message && Message.error(err.message);
+    emit("error", err, type);
+  };
+  const handleFileError = (response, vFile, cycle, type) => {
+    currentValue.value[type] = currentValue.value[type].map((item) => {
+      if (item.uploadId === vFile.uploadId) {
+        return {
+          ...item,
+          ...response,
+          // 文件基础信息
+          type,
+          [props.keyValue.label]: vFile.name,
+          errorFlag: (/* @__PURE__ */ new Date()).getTime()
+        };
+      }
+      return item;
+    });
+    emit("file-error", response, vFile, cycle, type);
+  };
+  const handleFileComplete = (response, type) => {
+    sync();
+    emit("complete", response, type);
+  };
+  const handleDelete = async (index, type) => {
+    const onRemoveBefore = instance.vnode.props?.onRemoveBefore || (() => {
+    });
+    await onRemoveBefore(index, type);
+    const target = currentValue.value[type];
+    const item = target[index];
+    if (!item) {
+      console.error("【vc-upload-picker】: 没有找到要删除的元素");
+      return;
+    }
+    if (item.errorFlag) {
+      currentValue.value[type] = target.filter(
+        (it) => it.uploadId != item.uploadId
+      );
+      return;
+    }
+    target.splice(index, 1);
+    sync();
+  };
+  const parseModelValue = (v) => {
+    const initialData = { image: [], video: [], audio: [], file: [] };
+    if (allowKeepString.value) {
+      v = (props.max === 1 ? [v] : v.split(",")).filter((i) => !!i);
+    } else if (allowKeepObject.value) {
+      v = [v].filter((i) => i && !!i[props.keyValue.value]);
+    }
+    if (!Array.isArray(v) || !v.length) return initialData;
+    return v.reduce((pre, cur) => {
+      const value = cur[props.keyValue.value] || (typeof cur === "object" ? "" : cur);
+      const label = cur[props.keyValue.label] || value.replace(/^.*\/([^/]+)$/, "$1");
+      const type = cur.type || (props.picker.length === 1 ? props.picker[0] : recognizer(value));
+      switch (type) {
+        case "image":
+        case "video":
+        case "audio":
+        case "file":
+          pre[type].push({
+            // 文件类型
+            type,
+            // 文件名
+            [props.keyValue.label]: label,
+            // 源文件地址
+            [props.keyValue.value]: value,
+            // 上传进度
+            percent: null,
+            // 错误标记
+            errorFlag: false
+          });
+          return pre;
+        default:
+          return pre;
+      }
+    }, initialData);
+  };
+  vue.watch(
+    () => props.modelValue,
+    (v) => {
+      currentValue.value = parseModelValue(v);
+    },
+    { immediate: true }
+  );
+  expose();
+  return {
+    currentValue,
+    currentUploadOptions,
+    dynamicMax,
+    handleDelete,
+    handleFileBefore,
+    handleFileStart,
+    handleFileProgress,
+    handleFileSuccess,
+    handleFileError,
+    handleError,
+    handleFileComplete
+  };
 };
 
 /** @jsxImportSource vue */
@@ -18777,13 +19198,111 @@ const COMPONENT_NAME = 'vc-upload-picker';
 const UploadPicker = /* @__PURE__ */ vue.defineComponent({
   name: COMPONENT_NAME,
   props: props,
+  emits: ['update:modelValue', 'file-success', 'file-start', 'success', 'error', 'complete', 'change', 'remove-before'],
   setup(props, {
-    slots
+    slots,
+    expose
   }) {
+    const instance = vue.getCurrentInstance();
+    const currentPicker = vue.computed(() => {
+      return props.picker.reduce((pre, cur) => {
+        switch (cur) {
+          case 'image':
+            pre.push({
+              type: cur,
+              item: 'div'
+              // item: ImageItem
+            });
+            return pre;
+          case 'video':
+            pre.push({
+              type: cur,
+              item: 'div'
+              // item: VideoItem
+            });
+            return pre;
+          case 'audio':
+            pre.push({
+              type: cur,
+              item: 'div'
+              // item: AudioItem
+            });
+            return pre;
+          case 'file':
+            pre.push({
+              type: cur,
+              item: 'div'
+              // item: FileItem
+            });
+            return pre;
+          default:
+            return pre;
+        }
+      }, []);
+    });
+    const handleClick = (e, type) => {
+      const options = VcInstance.options.UploadPicker || {};
+      if (typeof props.gallery === 'function' || props.gallery && options.gallery) {
+        const fn = typeof props.gallery === 'function' ? props.gallery : options.gallery;
+
+        // 阻止原生事件，如video, file不走gallery, 可以跳过;
+        fn(instance, type) && e.stopPropagation();
+      }
+    };
+    const base = usePicker(expose);
     return () => {
       return vue.createVNode("div", {
         "class": "vc-upload-picker"
-      }, [slots?.default?.()]);
+      }, [currentPicker.value.map((picker, $index) => {
+        return vue.createVNode(vue.Fragment, {
+          "key": `${picker}-${$index}`
+        }, [base.currentValue.value[picker.type].map((item, index) => {
+          const Item = picker.item;
+          return vue.createVNode(Item, {
+            "key": typeof item === 'object' ? item.uid : item,
+            "it": item,
+            "disabled": props.disabled,
+            "image-preview-options": props.imagePreviewOptions,
+            "imageClass": props.imageClass,
+            "videoClass": props.videoClass,
+            "audioClass": props.audioClass,
+            "fileClass": props.fileClass,
+            "index": index,
+            "data": item,
+            "class": "vc-upload-picker__item",
+            "onDelete": () => base.handleDelete(index, picker.type)
+          }, {
+            default: scopeData => {
+              return slots.default ? slots.default({
+                it: scopeData?.it,
+                current: scopeData?.current,
+                index,
+                name: picker.type
+              }) : scopeData;
+            }
+          });
+        }), vue.withDirectives(vue.createVNode(Upload, vue.mergeProps(base.currentUploadOptions.value[picker.type], {
+          "max": base.dynamicMax[picker.type],
+          "class": "vc-upload-picker__upload",
+          "onFileBefore": (vFile, fileList) => base.handleFileBefore(vFile, fileList, picker.type),
+          "onFileStart": vFile => base.handleFileStart(vFile, picker.type),
+          "onFileProgress": (e, vFile) => base.handleFileProgress(e, vFile, picker.type),
+          "onFileSuccess": (response, vFile, cycle) => base.handleFileSuccess(response, vFile, cycle, picker.type),
+          "onFileError": (response, vFile, cycle) => base.handleFileError(response, vFile, cycle, picker.type),
+          "onError": e => base.handleError(e, picker.type),
+          "onComplete": response => base.handleFileComplete(response, picker.type)
+        }), {
+          default: () => [slots?.[`${picker.type}-upload`] ? slots[`${picker.type}-upload`]?.() : vue.createVNode("div", {
+            "class": [props.boxClass, 'vc-upload-picker__box'],
+            "onClick": e => handleClick(e, picker.type)
+          }, [vue.createVNode(Icon, {
+            "type": "mini-plus",
+            "class": "vc-upload-picker__plus-icon"
+          }, null), vue.createVNode("span", {
+            "style": "margin-top: 8px"
+          }, [vue.createTextVNode("\u4E0A\u4F20")])])]
+        }), [[vue.vShow, !props.disabled && base.dynamicMax.value[picker.type] >= 1]])]);
+      })]);
     };
   }
 });
@@ -18822,7 +19341,7 @@ exports.Fragment = Fragment;
 exports.HTMLToImage = HTMLToImage;
 exports.Icon = Icon;
 exports.IconManager = IconManager;
-exports.Image = Image;
+exports.Image = Image$1;
 exports.ImageCrop = ImageCrop;
 exports.ImagePreview = ImagePreview;
 exports.ImageProcessing = ImageProcessing;