@deot/vc-components 1.0.24 → 1.0.25

package/dist/index.js

@@ -1,4 +1,4 @@
-import { reactive, defineComponent, createVNode, ref, watch, getCurrentInstance, computed, TransitionGroup, Transition as Transition$1, h, inject, onMounted, provide, shallowRef, onUnmounted, withDirectives, vShow, createApp, onBeforeUnmount, Fragment as Fragment$1, Teleport, withModifiers, nextTick, isVNode, onBeforeMount, mergeProps, createTextVNode, toRaw, onUpdated, useAttrs as useAttrs$1 } from 'vue';
+import { reactive, defineComponent, createVNode, ref, watch, getCurrentInstance, computed, TransitionGroup, Transition as Transition$1, h, inject, provide, shallowRef, onMounted, onUnmounted, withDirectives, vShow, createApp, onBeforeUnmount, Fragment as Fragment$1, Teleport, withModifiers, nextTick, isVNode, onBeforeMount, mergeProps, createTextVNode, toRaw, onUpdated, useAttrs as useAttrs$1 } from 'vue';
 import { debounce, isEqualWith, pick, startCase, throttle, cloneDeep, max, merge as merge$1, isEmpty as isEmpty$1, kebabCase } from 'lodash-es';
 import { Resize } from '@deot/helper-resize';
 import { Utils as Utils$1, IS_SERVER as IS_SERVER$1 } from '@deot/vc-shared';
@@ -10,6 +10,7 @@ import { useAttrs, useScrollbar, getInstance } from '@deot/vc-hooks';
 import { Wheel } from '@deot/helper-wheel';
 import { Validator } from '@deot/helper-validator';
 import { Storage } from '@deot/helper-cache';
+import PhotoSwipeLightbox from 'photoswipe/lightbox';
 import * as Load from '@deot/helper-load';
 import { style } from '@deot/helper-load';
 import { Interrupter } from '@deot/helper-scheduler';
@@ -1065,7 +1066,7 @@ const Button = /* @__PURE__ */ defineComponent({
     slots
   }) {
     const vm = getCurrentInstance();
-    const hasSlot = ref(true);
+    const isHover = ref(false);
     const isLoading = ref(false);
     const group = inject('vc-button-group', {
       size: 'medium',
@@ -1074,10 +1075,11 @@ const Button = /* @__PURE__ */ defineComponent({
     });
     const classes = 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
     }));
@@ -1090,9 +1092,6 @@ const Button = /* @__PURE__ */ defineComponent({
         });
       }
     };
-    onMounted(() => {
-      hasSlot.value = slots.default !== undefined;
-    });
     return () => {
       return createVNode(Debounce, {
         "tag": props.tag,
@@ -1103,15 +1102,19 @@ const Button = /* @__PURE__ */ 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 && createVNode(Icon, {
           "type": props.icon
-        }, null), isLoading.value && createVNode(Spin, {
+        }, null), slots.icon && slots?.icon?.({
+          hover: isHover.value
+        }), isLoading.value && createVNode(Spin, {
           "size": 12,
           "foreground": props.type === 'default' ? '#ccc' : '#fff',
           "class": "vc-button__loading"
-        }, null), hasSlot.value && createVNode("span", null, [slots?.default?.()])]
+        }, null), slots?.default && createVNode("span", null, [slots?.default?.()])]
       });
     };
   }
@@ -1527,7 +1530,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
     };
   });
   watch(
@@ -3178,7 +3182,8 @@ const useInput = (input) => {
   const classes = computed(() => {
     return {
       "is-focus": isFocus.value,
-      "is-disabled": props.disabled
+      "is-disabled": props.disabled,
+      "is-error": !!formItem?.message?.value
     };
   });
   const currentMaxlength = computed(() => {
@@ -8699,7 +8704,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,
@@ -8709,7 +8714,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;
@@ -8808,7 +8813,7 @@ const useForm = (expose, options = {}) => {
   const instance = getCurrentInstance();
   const props = instance.props;
   const fields = [];
-  provide("form", {
+  provide("vc-form", {
     props,
     add: (field) => {
       field && fields.push(field);
@@ -8956,8 +8961,7 @@ const props$L = {
     default: false
   },
   labelPosition: {
-    type: String,
-    default: "right"
+    type: String
   },
   contentStyle: [Object, String],
   contentClass: [Object, String],
@@ -8975,7 +8979,7 @@ const toRules = (rules) => {
   return rules instanceof Array ? rules : rules ? [rules] : [];
 };
 const useFormItem = (expose) => {
-  const form = inject("form");
+  const form = inject("vc-form");
   const instance = getCurrentInstance();
   const props = instance.props;
   const { slots } = instance;
@@ -9488,7 +9492,7 @@ const ObjectFit = {
   FILL: 'fill',
   SCALE_DOWN: 'scale-down'
 };
-const Image = /* @__PURE__ */ defineComponent({
+const Image$1 = /* @__PURE__ */ defineComponent({
   name: COMPONENT_NAME$W,
   inheritAttrs: false,
   props: props$H,
@@ -9683,7 +9687,7 @@ const Image = /* @__PURE__ */ defineComponent({
   }
 });
 
-const MImage = Image;
+const MImage = Image$1;
 
 const props$G = {
   tag: {
@@ -9721,7 +9725,7 @@ const props$F = {
 /** @jsxImportSource vue */
 
 const COMPONENT_NAME$U = 'vc-image-preview';
-const ImagePreview = /* @__PURE__ */ defineComponent({
+const ImagePreview$1 = /* @__PURE__ */ defineComponent({
   name: COMPONENT_NAME$U,
   props: props$F,
   setup(props, {
@@ -9735,6 +9739,81 @@ const ImagePreview = /* @__PURE__ */ 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 = {
@@ -10341,9 +10420,8 @@ const props$z = {
     type: [String, Boolean],
     default: "取消"
   },
-  wrapperStyle: {
-    type: [String, Object]
-  },
+  wrapperStyle: [String, Object],
+  wrapperClass: [String, Object],
   footer: {
     type: Boolean,
     default: true
@@ -10397,6 +10475,7 @@ const ModalView = /* @__PURE__ */ defineComponent({
 
     // 注: 服务端渲染为0, 在客服端激活前，展示端存在问题【高度不定】
     const MAX_HEIGHT = IS_SERVER$1 ? 0 : window.innerHeight - 20;
+    const MAX_WIDTH = IS_SERVER$1 ? 0 : window.innerWidth - 20;
     const defaultSize = computed(() => {
       let width = 0;
       let height = 0;
@@ -10415,7 +10494,7 @@ const ModalView = /* @__PURE__ */ defineComponent({
           break;
       }
       return {
-        width: props.width || width,
+        width: Math.min(props.width || width, MAX_WIDTH),
         height: Math.min(props.height || height, MAX_HEIGHT)
       };
     });
@@ -10651,7 +10730,7 @@ const ModalView = /* @__PURE__ */ defineComponent({
         "style": [props.wrapperStyle || {}, props.draggable ? {
           top: 0
         } : {}],
-        "class": "vc-modal__wrapper",
+        "class": [props.wrapperClass, 'vc-modal__wrapper'],
         "onClick": e => handleClose(e, false)
       }, [createVNode(TransitionScale, {
         "mode": "part",
@@ -12318,8 +12397,12 @@ const Progress = /* @__PURE__ */ defineComponent({
   setup(props, {
     slots
   }) {
+    const currentPercent = computed(() => {
+      const v = Number(props.percent);
+      return v >= 100 ? 100 : v;
+    });
     const currentStatus = computed(() => {
-      if (Number(props.percent) >= 100) {
+      if (currentPercent.value === 100) {
         return 'success';
       }
       return props.status;
@@ -12331,6 +12414,7 @@ const Progress = /* @__PURE__ */ defineComponent({
     const binds = computed(() => {
       return {
         ...props,
+        percent: currentPercent.value,
         status: currentStatus.value,
         color: currentColor.value
       };
@@ -12408,7 +12492,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
     };
   });
   watch(
@@ -12592,8 +12677,7 @@ const RadioGroup = /* @__PURE__ */ defineComponent({
     return () => {
       if (props.fragment) return slots.default?.();
       return createVNode("div", {
-        "class": "vc-radio-group",
-        "style": classes.value,
+        "class": [classes.value, 'vc-radio-group'],
         "name": props.name
       }, [slots?.default?.()]);
     };
@@ -16913,7 +16997,11 @@ const props$a = {
   closable: {
     type: Boolean,
     default: false
-  }
+  },
+  barStyle: [Object, String],
+  contentStyle: [Object, String],
+  barClass: [Object, String],
+  contentClass: [Object, String]
 };
 
 const useTabs = (options = {}) => {
@@ -17166,10 +17254,10 @@ const Tabs = /* @__PURE__ */ defineComponent({
         "class": "vc-tabs__extra"
       }, [slots.extra?.()]), 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 && createVNode(Icon, {
         "class": "vc-tabs__icon is-left",
         "type": "left",
@@ -17209,8 +17297,8 @@ const Tabs = /* @__PURE__ */ defineComponent({
         }, null)]);
       })])])]), 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?.()])]);
     };
   }
@@ -17825,7 +17913,8 @@ const useTextarea = (textarea, expose) => {
   const classes = computed(() => {
     return {
       "is-focus": isFocus.value,
-      "is-disabled": props.disabled
+      "is-disabled": props.disabled,
+      "is-error": !!formItem?.message?.value
     };
   });
   const listeners = computed(() => {
@@ -18743,10 +18832,342 @@ const Upload = 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 = getCurrentInstance();
+  const props = instance.props;
+  const { emit } = instance;
+  const formItem = inject("vc-form-item", {});
+  const allowKeepString = computed(() => {
+    return typeof props.modelValue === "string";
+  });
+  const allowKeepObject = computed(() => {
+    const v = props.modelValue;
+    return props.output === "object" && props.max === 1 && !Array.isArray(v) && typeof v === "object";
+  });
+  const currentValue = ref({
+    image: [],
+    video: [],
+    audio: [],
+    file: []
+  });
+  const currentUploadOptions = 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 = 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);
+  };
+  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 */
@@ -18755,17 +19176,115 @@ const COMPONENT_NAME = 'vc-upload-picker';
 const UploadPicker = /* @__PURE__ */ 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 = getCurrentInstance();
+    const currentPicker = 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 createVNode("div", {
         "class": "vc-upload-picker"
-      }, [slots?.default?.()]);
+      }, [currentPicker.value.map((picker, $index) => {
+        return createVNode(Fragment$1, {
+          "key": `${picker}-${$index}`
+        }, [base.currentValue.value[picker.type].map((item, index) => {
+          const Item = picker.item;
+          return 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;
+            }
+          });
+        }), withDirectives(createVNode(Upload, 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`]?.() : createVNode("div", {
+            "class": [props.boxClass, 'vc-upload-picker__box'],
+            "onClick": e => handleClick(e, picker.type)
+          }, [createVNode(Icon, {
+            "type": "mini-plus",
+            "class": "vc-upload-picker__plus-icon"
+          }, null), createVNode("span", {
+            "style": "margin-top: 8px"
+          }, [createTextVNode("\u4E0A\u4F20")])])]
+        }), [[vShow, !props.disabled && base.dynamicMax.value[picker.type] >= 1]])]);
+      })]);
     };
   }
 });
 
 const MUploadPicker = UploadPicker;
 
-export { ActionSheet, Alert, Artboard, Button, ButtonGroup, Calendar, Card, Carousel, Cascader, Chart, Checkbox, CheckboxGroup, Clipboard, Collapse, CollapseItem, ColorPicker, Countdown, Customer, DatePicker, Debounce, Divider, Drawer, DrawerView, Dropdown, Editor, Expand$1 as Expand, Form, FormItem, Fragment, HTMLToImage, Icon, IconManager, Image, ImageCrop, ImagePreview, ImageProcessing, Input, InputNumber, InputSearch, MList as List, MListItem as ListItem, MActionSheet, MAlert, MArtboard, MButton, MButtonGroup, MCalendar, MCard, MCarousel, MCascader, MChart, MCheckbox, MCheckboxGroup, MClipboard, MCollapse, MCollapseItem, MColorPicker, MCountdown, MCustomer, MDatePicker, Debounce as MDebounce, MDivider, MDrawer, MDrawerView, MDropdown, MEditor, MExpand, MForm, MFormItem, MFragment, MHTMLToImage, MIcon, MImage, MImageCrop, MImagePreview, MImageProcessing, MInput, MInputNumber, MInputSearch, MList, MListItem, MMarquee, MMessage, modal as MModal, MModalView, MNotice, MOption, MPagination, MPicker, MPopconfirm, MPopover, MPopup, MPortal, MPrint, MProgress, MRadio, MRadioGroup, MRate, MRecycleList, MResizer, MScroller, MSelect, MSlider, MSortList, MSpin, MSteps, MSwitch, MTable, MTableColumn, MTabs, MTabsPane, MTag, MText, MTextarea, MTimePicker, MTimeline, MToast, MToastView, MTouch, MTransition, MTransitionCollapse, MTransitionFade, MTransitionScale, MTransitionSlide, MTransitionZoom, MTree, MUpload, MUploadPicker, Marquee, Message, MessageView, Modal, ModalView, Notice, NoticeView, Option$1 as Option, Pagination, Picker, Popconfirm, Popover, Popup, Portal, PortalView, Print, Progress, Radio, RadioGroup, Rate, RecycleList, Resizer, Scroller, ScrollerWheel, Select, Slider, SortList, Spin, Steps, Switch, Table, TableColumn, Tabs, TabsPane, Tag, Text, Textarea, Theme, ThemeImage, ThemeText, ThemeView, TimePicker, Timeline, Toast, ToastView, Touch, Transition, TransitionCollapse, TransitionFade, TransitionScale, TransitionSlide, TransitionZoom, Tree, Upload, UploadPicker, VcError, VcInstance };
+export { ActionSheet, Alert, Artboard, Button, ButtonGroup, Calendar, Card, Carousel, Cascader, Chart, Checkbox, CheckboxGroup, Clipboard, Collapse, CollapseItem, ColorPicker, Countdown, Customer, DatePicker, Debounce, Divider, Drawer, DrawerView, Dropdown, Editor, Expand$1 as Expand, Form, FormItem, Fragment, HTMLToImage, Icon, IconManager, Image$1 as Image, ImageCrop, ImagePreview, ImageProcessing, Input, InputNumber, InputSearch, MList as List, MListItem as ListItem, MActionSheet, MAlert, MArtboard, MButton, MButtonGroup, MCalendar, MCard, MCarousel, MCascader, MChart, MCheckbox, MCheckboxGroup, MClipboard, MCollapse, MCollapseItem, MColorPicker, MCountdown, MCustomer, MDatePicker, Debounce as MDebounce, MDivider, MDrawer, MDrawerView, MDropdown, MEditor, MExpand, MForm, MFormItem, MFragment, MHTMLToImage, MIcon, MImage, MImageCrop, MImagePreview, MImageProcessing, MInput, MInputNumber, MInputSearch, MList, MListItem, MMarquee, MMessage, modal as MModal, MModalView, MNotice, MOption, MPagination, MPicker, MPopconfirm, MPopover, MPopup, MPortal, MPrint, MProgress, MRadio, MRadioGroup, MRate, MRecycleList, MResizer, MScroller, MSelect, MSlider, MSortList, MSpin, MSteps, MSwitch, MTable, MTableColumn, MTabs, MTabsPane, MTag, MText, MTextarea, MTimePicker, MTimeline, MToast, MToastView, MTouch, MTransition, MTransitionCollapse, MTransitionFade, MTransitionScale, MTransitionSlide, MTransitionZoom, MTree, MUpload, MUploadPicker, Marquee, Message, MessageView, Modal, ModalView, Notice, NoticeView, Option$1 as Option, Pagination, Picker, Popconfirm, Popover, Popup, Portal, PortalView, Print, Progress, Radio, RadioGroup, Rate, RecycleList, Resizer, Scroller, ScrollerWheel, Select, Slider, SortList, Spin, Steps, Switch, Table, TableColumn, Tabs, TabsPane, Tag, Text, Textarea, Theme, ThemeImage, ThemeText, ThemeView, TimePicker, Timeline, Toast, ToastView, Touch, Transition, TransitionCollapse, TransitionFade, TransitionScale, TransitionSlide, TransitionZoom, Tree, Upload, UploadPicker, VcError, VcInstance };