@deot/vc-components 1.0.25 → 1.0.26

package/dist/index.js

@@ -9,8 +9,8 @@ import { composedPath, scrollIntoView, prefixStyle, removeClass, addClass, hasCl
 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 { Storage } from '@deot/helper-cache';
 import * as Load from '@deot/helper-load';
 import { style } from '@deot/helper-load';
 import { Interrupter } from '@deot/helper-scheduler';
@@ -81,9 +81,9 @@ const props$1q = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1$ = 'vc-action-sheet';
+const COMPONENT_NAME$20 = 'vc-action-sheet';
 const ActionSheet = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1$,
+  name: COMPONENT_NAME$20,
   props: props$1q,
   setup(props, {
     slots
@@ -270,9 +270,9 @@ const IconManager = new Manager();
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1_ = 'vc-icon';
+const COMPONENT_NAME$1$ = 'vc-icon';
 const Icon = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1_,
+  name: COMPONENT_NAME$1$,
   props: props$1o,
   setup(props) {
     const viewBox = ref('0 0 1024 1024');
@@ -471,9 +471,9 @@ const useTransition = () => {
   };
 };
 
-const COMPONENT_NAME$1Z = "vc-transition";
+const COMPONENT_NAME$1_ = "vc-transition";
 const Transition = defineComponent({
-  name: COMPONENT_NAME$1Z,
+  name: COMPONENT_NAME$1_,
   props: props$1n,
   // 当不声明emits的情况下，事件存在于attrs中
   inheritAttrs: false,
@@ -494,9 +494,9 @@ const Transition = defineComponent({
   }
 });
 
-const COMPONENT_NAME$1Y = "vc-transition-collapse";
+const COMPONENT_NAME$1Z = "vc-transition-collapse";
 const TransitionCollapse = defineComponent({
-  name: COMPONENT_NAME$1Y,
+  name: COMPONENT_NAME$1Z,
   props: props$1n,
   // 当不声明emits的情况下，事件存在于attrs中
   inheritAttrs: false,
@@ -615,9 +615,9 @@ const TransitionCollapse = defineComponent({
   }
 });
 
-const COMPONENT_NAME$1X = "vc-transition-fade";
+const COMPONENT_NAME$1Y = "vc-transition-fade";
 const TransitionFade = defineComponent({
-  name: COMPONENT_NAME$1X,
+  name: COMPONENT_NAME$1Y,
   props: {
     ...props$1n,
     // inheritAttrs必须是false
@@ -652,9 +652,9 @@ const TransitionFade = defineComponent({
   }
 });
 
-const COMPONENT_NAME$1W = "vc-transition-scale";
+const COMPONENT_NAME$1X = "vc-transition-scale";
 const TransitionScale = defineComponent({
-  name: COMPONENT_NAME$1W,
+  name: COMPONENT_NAME$1X,
   props: {
     ...props$1n,
     mode: {
@@ -694,9 +694,9 @@ const TransitionScale = defineComponent({
   }
 });
 
-const COMPONENT_NAME$1V = "vc-transition-slide";
+const COMPONENT_NAME$1W = "vc-transition-slide";
 const TransitionSlide = defineComponent({
-  name: COMPONENT_NAME$1V,
+  name: COMPONENT_NAME$1W,
   props: {
     ...props$1n,
     mode: {
@@ -736,9 +736,9 @@ const TransitionSlide = defineComponent({
   }
 });
 
-const COMPONENT_NAME$1U = "vc-transition-zoom";
+const COMPONENT_NAME$1V = "vc-transition-zoom";
 const TransitionZoom = defineComponent({
-  name: COMPONENT_NAME$1U,
+  name: COMPONENT_NAME$1V,
   props: {
     ...props$1n,
     mode: {
@@ -780,7 +780,7 @@ const TransitionZoom = defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1T = 'vc-alert';
+const COMPONENT_NAME$1U = 'vc-alert';
 
 // [color, borderColor, backgroundColor], -> CSS
 const THEME_MAP = {
@@ -790,7 +790,7 @@ const THEME_MAP = {
   warning: ['#ffbf00', '#ffe58f', '#fffbe6']
 };
 const Alert = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1T,
+  name: COMPONENT_NAME$1U,
   props: props$1p,
   setup(props, {
     slots,
@@ -889,9 +889,9 @@ const props$1m = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1S = 'vc-artboard';
+const COMPONENT_NAME$1T = 'vc-artboard';
 const Artboard = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1S,
+  name: COMPONENT_NAME$1T,
   props: props$1m,
   setup(props, {
     slots
@@ -930,9 +930,9 @@ const props$1l = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1R = 'vc-spin';
+const COMPONENT_NAME$1S = 'vc-spin';
 const Spin = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1R,
+  name: COMPONENT_NAME$1S,
   props: props$1l,
   setup(props, {
     slots
@@ -983,9 +983,9 @@ const props$1k = {
   exclude: RegExp
 };
 
-const COMPONENT_NAME$1Q = "vc-debounce";
+const COMPONENT_NAME$1R = "vc-debounce";
 const Debounce = defineComponent({
-  name: COMPONENT_NAME$1Q,
+  name: COMPONENT_NAME$1R,
   props: props$1k,
   /**
    * 不声明emits使得事件被透传放入attrs中, 这样可以让所有的事件透传
@@ -1057,9 +1057,9 @@ const props$1j = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1P = 'vc-button';
+const COMPONENT_NAME$1Q = 'vc-button';
 const Button = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1P,
+  name: COMPONENT_NAME$1Q,
   emits: ['click'],
   props: props$1j,
   setup(props, {
@@ -1141,9 +1141,9 @@ const props$1i = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1O = 'vc-button-group';
+const COMPONENT_NAME$1P = 'vc-button-group';
 const ButtonGroup = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1O,
+  name: COMPONENT_NAME$1P,
   props: props$1i,
   setup(props, {
     slots
@@ -1177,9 +1177,9 @@ const props$1h = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1N = 'vc-calendar';
+const COMPONENT_NAME$1O = 'vc-calendar';
 const Calendar = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1N,
+  name: COMPONENT_NAME$1O,
   props: props$1h,
   setup(props, {
     slots
@@ -1217,9 +1217,9 @@ const props$1g = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1M = 'vc-card';
+const COMPONENT_NAME$1N = 'vc-card';
 const Card = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1M,
+  name: COMPONENT_NAME$1N,
   props: props$1g,
   setup(props, {
     slots
@@ -1255,9 +1255,9 @@ const props$1f = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1L = 'vc-carousel';
+const COMPONENT_NAME$1M = 'vc-carousel';
 const Carousel = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1L,
+  name: COMPONENT_NAME$1M,
   props: props$1f,
   setup(props, {
     slots
@@ -1281,9 +1281,9 @@ const props$1e = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1K = 'vc-cascader';
+const COMPONENT_NAME$1L = 'vc-cascader';
 const Cascader = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1K,
+  name: COMPONENT_NAME$1L,
   props: props$1e,
   setup(props, {
     slots
@@ -1352,9 +1352,9 @@ const props$1d = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1J = 'vc-chart';
+const COMPONENT_NAME$1K = 'vc-chart';
 const Chart = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1J,
+  name: COMPONENT_NAME$1K,
   props: props$1d,
   emits: [...EVENTS, 'ready'],
   setup(props, {
@@ -1586,9 +1586,9 @@ const useCheckbox = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1I = 'vc-checkbox';
+const COMPONENT_NAME$1J = 'vc-checkbox';
 const Checkbox = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1I,
+  name: COMPONENT_NAME$1J,
   props: props$1c,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -1675,9 +1675,9 @@ const useCheckboxGroup = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1H = 'vc-checkbox-group';
+const COMPONENT_NAME$1I = 'vc-checkbox-group';
 const CheckboxGroup = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1H,
+  name: COMPONENT_NAME$1I,
   props: props$1b,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -1695,9 +1695,9 @@ const CheckboxGroup = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1G = 'vcm-checkbox';
+const COMPONENT_NAME$1H = 'vcm-checkbox';
 const MCheckbox = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1G,
+  name: COMPONENT_NAME$1H,
   props: props$1c,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -1737,9 +1737,9 @@ const MCheckbox = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1F = 'vcm-checkbox-group';
+const COMPONENT_NAME$1G = 'vcm-checkbox-group';
 const MCheckboxGroup = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1F,
+  name: COMPONENT_NAME$1G,
   props: props$1b,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -1798,9 +1798,9 @@ const props$19 = {
   }
 };
 
-const COMPONENT_NAME$1E = "vc-customer";
+const COMPONENT_NAME$1F = "vc-customer";
 const Customer = defineComponent({
-  name: COMPONENT_NAME$1E,
+  name: COMPONENT_NAME$1F,
   props: props$19,
   setup(props, context) {
     return () => h(() => {
@@ -1811,9 +1811,9 @@ const Customer = defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1D = 'vc-message';
+const COMPONENT_NAME$1E = 'vc-message';
 const MessageView = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1D,
+  name: COMPONENT_NAME$1E,
   emits: ['before-close', 'close', 'portal-fulfilled'],
   props: props$1a,
   setup(props, {
@@ -1960,7 +1960,7 @@ class PortalLeaf {
   }
 }
 
-const COMPONENT_NAME$1C = "vc-portal";
+const COMPONENT_NAME$1D = "vc-portal";
 class Portal {
   /**
    * 清理Portals类型组件
@@ -2012,7 +2012,7 @@ class Portal {
     this.wrapper = wrapper;
     this.globalOptions = {
       ...options,
-      name: options?.name || wrapper.name || Utils.getUid(COMPONENT_NAME$1C)
+      name: options?.name || wrapper.name || Utils.getUid(COMPONENT_NAME$1D)
     };
   }
   popup(propsData, options) {
@@ -2111,7 +2111,7 @@ class Portal {
       ...rest
     } = options;
     let useAllNodes = fragment;
-    const name = multiple ? `${name$}__${Utils.getUid(COMPONENT_NAME$1C)}` : name$;
+    const name = multiple ? `${name$}__${Utils.getUid(COMPONENT_NAME$1D)}` : name$;
     const container = document.createElement(tag);
     const root = typeof el === "object" ? el : document.querySelector(el || "body");
     !alive && Portal.leafs.get(name)?.destroy();
@@ -2145,7 +2145,7 @@ class Portal {
     } else {
       const wrapper = this.wrapper;
       const app = createApp({
-        name: COMPONENT_NAME$1C,
+        name: COMPONENT_NAME$1D,
         parent,
         setup() {
           if (alive) {
@@ -2257,13 +2257,13 @@ const props$18 = {
   }
 };
 
-const COMPONENT_NAME$1B = 'vc-portal-view';
+const COMPONENT_NAME$1C = 'vc-portal-view';
 
 /**
  * 写法不同，但与vue@2.x 保持一致
  */
 const PortalView = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1B,
+  name: COMPONENT_NAME$1C,
   props: props$18,
   setup(props, {
     slots
@@ -2434,9 +2434,9 @@ const useClipboard = (done) => {
   return () => h(props.tag, { onClick: handleClick, class: "vc-clipboard" }, slots?.default?.());
 };
 
-const COMPONENT_NAME$1A = "vc-clipboard";
+const COMPONENT_NAME$1B = "vc-clipboard";
 const Clipboard$1 = defineComponent({
-  name: COMPONENT_NAME$1A,
+  name: COMPONENT_NAME$1B,
   props: props$17,
   setup() {
     return useClipboard((content) => Message.success({ content }));
@@ -2476,9 +2476,9 @@ const MTransitionZoom = TransitionZoom;
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1z = 'vcm-toast';
+const COMPONENT_NAME$1A = 'vcm-toast';
 const MToastView = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1z,
+  name: COMPONENT_NAME$1A,
   emits: ['close', 'portal-fulfilled'],
   props: props$16,
   setup(props, {
@@ -2580,9 +2580,9 @@ const warning$2 = create$3({ mode: "warning" });
 const error$2 = create$3({ mode: "error" });
 const MToast = Object.assign(MToastView, { destroy: destroy$4, info: info$2, success: success$2, loading, warning: warning$2, error: error$2 });
 
-const COMPONENT_NAME$1y = "vcm-clipboard";
+const COMPONENT_NAME$1z = "vcm-clipboard";
 const MClipboard$1 = defineComponent({
-  name: COMPONENT_NAME$1y,
+  name: COMPONENT_NAME$1z,
   props: props$17,
   setup() {
     return useClipboard((content) => MToast.info({ content }));
@@ -2614,9 +2614,9 @@ const props$15 = {
   }
 };
 
-const COMPONENT_NAME$1x = "vc-collapse";
+const COMPONENT_NAME$1y = "vc-collapse";
 const Collapse = defineComponent({
-  name: COMPONENT_NAME$1x,
+  name: COMPONENT_NAME$1y,
   props: props$15,
   emits: ["update:moodelValue", "change"],
   setup(props, { slots, emit }) {
@@ -2733,9 +2733,9 @@ const props$13 = {
 function _isSlot$3(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-const COMPONENT_NAME$1w = 'vc-expand';
+const COMPONENT_NAME$1x = 'vc-expand';
 const Expand$1 = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1w,
+  name: COMPONENT_NAME$1x,
   props: props$13,
   setup(props, {
     slots
@@ -2765,9 +2765,9 @@ const Expand$1 = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1v = 'vc-collapse-item';
+const COMPONENT_NAME$1w = 'vc-collapse-item';
 const CollapseItem = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1v,
+  name: COMPONENT_NAME$1w,
   props: props$14,
   setup(props, {
     slots,
@@ -2842,9 +2842,9 @@ const props$12 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1u = 'vc-color-picker';
+const COMPONENT_NAME$1v = 'vc-color-picker';
 const ColorPicker = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1u,
+  name: COMPONENT_NAME$1v,
   props: props$12,
   setup(props, {
     slots
@@ -2868,9 +2868,9 @@ const props$11 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1t = 'vc-countdown';
+const COMPONENT_NAME$1u = 'vc-countdown';
 const Countdown = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1t,
+  name: COMPONENT_NAME$1u,
   props: props$11,
   setup(props, {
     slots
@@ -3320,9 +3320,9 @@ const useNativeEmitter = (input, expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1s = 'vc-input';
+const COMPONENT_NAME$1t = 'vc-input';
 const Input = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1s,
+  name: COMPONENT_NAME$1t,
   inheritAttrs: false,
   props: {
     ...props$$,
@@ -3656,9 +3656,9 @@ const useInputNumber = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1r = 'vc-input-number';
+const COMPONENT_NAME$1s = 'vc-input-number';
 const InputNumber = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1r,
+  name: COMPONENT_NAME$1s,
   props: props$X,
   inheritAttrs: false,
   setup(props, {
@@ -3722,9 +3722,9 @@ const props$W = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1q = 'vc-input-search';
+const COMPONENT_NAME$1r = 'vc-input-search';
 const InputSearch = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1q,
+  name: COMPONENT_NAME$1r,
   props: props$W,
   inheritAttrs: false,
   setup(props, {
@@ -4015,9 +4015,9 @@ const usePos = () => {
 function _isSlot$2(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-const COMPONENT_NAME$1p = 'vc-popover-wrapper';
+const COMPONENT_NAME$1q = 'vc-popover-wrapper';
 const PopoverWrapper = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1p,
+  name: COMPONENT_NAME$1q,
   props: props$_,
   emits: ['portal-fulfilled', 'close'],
   setup(props, {
@@ -4267,9 +4267,9 @@ const PopoverPortal = new Portal(PopoverWrapper);
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1o = 'vc-popover';
+const COMPONENT_NAME$1p = 'vc-popover';
 const Popover$1 = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1o,
+  name: COMPONENT_NAME$1p,
   props: props$Z,
   emits: ['update:modelValue', 'visible-change', 'ready', 'close'],
   setup(props, {
@@ -5370,9 +5370,9 @@ const getTimeType = type => {
   }
   return view;
 };
-const COMPONENT_NAME$1n = 'vc-date-confirm';
+const COMPONENT_NAME$1o = 'vc-date-confirm';
 const Confirm = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1n,
+  name: COMPONENT_NAME$1o,
   props: {
     showTime: {
       type: Boolean,
@@ -5436,9 +5436,9 @@ const Confirm = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1m = 'vc-date-header';
+const COMPONENT_NAME$1n = 'vc-date-header';
 const DateHeader = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1m,
+  name: COMPONENT_NAME$1n,
   props: {
     panelDate: Date,
     showNext: {
@@ -5522,9 +5522,9 @@ const DateHeader = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1l = 'vc-date-table';
+const COMPONENT_NAME$1m = 'vc-date-table';
 const DateTable = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1l,
+  name: COMPONENT_NAME$1m,
   props: {
     value: Array,
     firstDayOfWeek: {
@@ -5733,9 +5733,9 @@ const DateTable = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1k = 'vc-month-table';
+const COMPONENT_NAME$1l = 'vc-month-table';
 const MonthTable = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1k,
+  name: COMPONENT_NAME$1l,
   props: {
     value: Array,
     panelDate: Date,
@@ -5867,7 +5867,7 @@ const MonthTable = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1j = 'vc-quarter-table';
+const COMPONENT_NAME$1k = 'vc-quarter-table';
 
 /**
  * 获取季度对应的月份范围
@@ -5901,7 +5901,7 @@ const getQuarterRangeByMonth = value => {
   }
 };
 const QuarterTable = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1j,
+  name: COMPONENT_NAME$1k,
   props: {
     value: Array,
     panelDate: Date,
@@ -6024,9 +6024,9 @@ const QuarterTable = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1i = 'vc-shortcuts-select';
+const COMPONENT_NAME$1j = 'vc-shortcuts-select';
 const ShortcutsSelect = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1i,
+  name: COMPONENT_NAME$1j,
   props: {
     panelDate: Date,
     config: Array,
@@ -6066,9 +6066,9 @@ const ShortcutsSelect = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1h = 'vc-time-select';
+const COMPONENT_NAME$1i = 'vc-time-select';
 const TimeSelect = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1h,
+  name: COMPONENT_NAME$1i,
   props: {
     hours: {
       type: [Number, String],
@@ -6347,9 +6347,9 @@ const TimeSelect = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1g = 'vc-year-table';
+const COMPONENT_NAME$1h = 'vc-year-table';
 const YearTable = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1g,
+  name: COMPONENT_NAME$1h,
   props: {
     value: Array,
     panelDate: Date,
@@ -6472,9 +6472,9 @@ const getDateIsInRange = (value, type, leftPanelDate, rightPanelDate) => {
   }
   return true;
 };
-const COMPONENT_NAME$1f = 'vc-date-range-panel';
+const COMPONENT_NAME$1g = 'vc-date-range-panel';
 const DateRangePanel = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1f,
+  name: COMPONENT_NAME$1g,
   props: {
     ...props$V,
     confirm: {
@@ -6853,9 +6853,9 @@ const DateRangePanel = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1e = 'vc-date-panel';
+const COMPONENT_NAME$1f = 'vc-date-panel';
 const DatePanel = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1e,
+  name: COMPONENT_NAME$1f,
   props: {
     ...props$V,
     type: String,
@@ -7063,9 +7063,9 @@ const isEqualYear$1 = value => {
   const endYear = value[1].getFullYear();
   return startYear === endYear;
 };
-const COMPONENT_NAME$1d = 'vc-monthrange-panel';
+const COMPONENT_NAME$1e = 'vc-monthrange-panel';
 const MonthRangePanel = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1d,
+  name: COMPONENT_NAME$1e,
   props: {
     ...props$V,
     confirm: {
@@ -7240,9 +7240,9 @@ const isEqualYear = value => {
   const endYear = value[1].getFullYear();
   return startYear === endYear;
 };
-const COMPONENT_NAME$1c = 'vc-quarterrange-panel';
+const COMPONENT_NAME$1d = 'vc-quarterrange-panel';
 const QuarterRangePanel = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1c,
+  name: COMPONENT_NAME$1d,
   props: {
     ...props$V,
     confirm: {
@@ -7481,9 +7481,9 @@ const getComparedDate = (leftDate, rightDate) => {
     seconds
   };
 };
-const COMPONENT_NAME$1b = 'vc-timerange-panel';
+const COMPONENT_NAME$1c = 'vc-timerange-panel';
 const TimeRangePanel = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1b,
+  name: COMPONENT_NAME$1c,
   props: props$U,
   emits: ['pick', 'clear', 'ok'],
   setup(props, {
@@ -7582,9 +7582,9 @@ const TimeRangePanel = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1a = 'vc-time-panel';
+const COMPONENT_NAME$1b = 'vc-time-panel';
 const TimePanel = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1a,
+  name: COMPONENT_NAME$1b,
   props: props$U,
   emits: ['pick', 'clear', 'ok'],
   setup(props, {
@@ -7639,7 +7639,7 @@ const TimePanel = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$19 = 'vc-date-picker';
+const COMPONENT_NAME$1a = 'vc-date-picker';
 const getPanel$1 = type => {
   if (['daterange', 'datetimerange'].includes(type)) {
     return DateRangePanel;
@@ -7650,7 +7650,7 @@ const getPanel$1 = type => {
   }
   return DatePanel;
 };
-const DatePicker = createPicker(COMPONENT_NAME$19, props$10, () => {
+const DatePicker = createPicker(COMPONENT_NAME$1a, props$10, () => {
   const props = getCurrentInstance().props;
   const icon = ref('date');
   const panel = shallowRef({});
@@ -7683,9 +7683,9 @@ const props$T = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$18 = 'vc-divider';
+const COMPONENT_NAME$19 = 'vc-divider';
 const Divider = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$18,
+  name: COMPONENT_NAME$19,
   props: props$T,
   setup(props, {
     slots
@@ -7840,7 +7840,7 @@ const props$Q = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$17 = 'vc-scroller-track';
+const COMPONENT_NAME$18 = 'vc-scroller-track';
 const BAR_MAP = {
   vertical: {
     scroll: 'scrollTop',
@@ -7860,7 +7860,7 @@ const BAR_MAP = {
   }
 };
 const Track = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$17,
+  name: COMPONENT_NAME$18,
   props: props$S,
   emits: ['change'],
   inheritAttrs: false,
@@ -8050,9 +8050,9 @@ const Track = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$16 = 'vc-scroller-bar';
+const COMPONENT_NAME$17 = 'vc-scroller-bar';
 const Bar = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$16,
+  name: COMPONENT_NAME$17,
   props: props$R,
   emits: ['change'],
   setup(props, {
@@ -8267,7 +8267,7 @@ const useScroller = (expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$15 = 'vc-scroller';
+const COMPONENT_NAME$16 = 'vc-scroller';
 
 /**
  * 作为备选方案,目前推荐使用ScrollerWheel
@@ -8278,7 +8278,7 @@ const COMPONENT_NAME$15 = 'vc-scroller';
  * 2. 增加了一层嵌套
  */
 const Scroller = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$15,
+  name: COMPONENT_NAME$16,
   props: props$Q,
   emits: ['scroll'],
   setup(props, {
@@ -8339,7 +8339,7 @@ const Scroller = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$14 = 'vc-scroller-wheel';
+const COMPONENT_NAME$15 = 'vc-scroller-wheel';
 
 /**
  * 为减少一层嵌套，为去除滚动bar的抖动，使用wheel模拟
@@ -8361,7 +8361,7 @@ const COMPONENT_NAME$14 = 'vc-scroller-wheel';
  * 设置scrollTop不会reflow和repaint，不需要考虑transfrom来改变content（transform也只在draw完成）
  */
 const ScrollerWheel = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$14,
+  name: COMPONENT_NAME$15,
   props: Object.assign(props$Q, {
     stopPropagation: {
       type: Boolean,
@@ -8550,9 +8550,9 @@ const props$P = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$13 = 'vc-drawer';
+const COMPONENT_NAME$14 = 'vc-drawer';
 const DrawerView = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$13,
+  name: COMPONENT_NAME$14,
   props: props$P,
   emits: ['close', 'update:modelValue', 'visible-change'],
   setup(props, {
@@ -8728,9 +8728,9 @@ const props$O = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$12 = 'vc-dropdown';
+const COMPONENT_NAME$13 = 'vc-dropdown';
 const Dropdown = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$12,
+  name: COMPONENT_NAME$13,
   props: props$O,
   setup(props, {
     slots
@@ -8754,9 +8754,9 @@ const props$N = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$11 = 'vc-editor';
+const COMPONENT_NAME$12 = 'vc-editor';
 const Editor = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$11,
+  name: COMPONENT_NAME$12,
   props: props$N,
   setup(props, {
     slots
@@ -8900,9 +8900,9 @@ const useForm = (expose, options = {}) => {
   });
 };
 
-const COMPONENT_NAME$10 = "vc-form";
+const COMPONENT_NAME$11 = "vc-form";
 const Form = defineComponent({
-  name: COMPONENT_NAME$10,
+  name: COMPONENT_NAME$11,
   props: props$M,
   setup(props, { slots, expose }) {
     useForm(expose);
@@ -9227,9 +9227,9 @@ const useFormItem = (expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$$ = 'vc-form-item';
+const COMPONENT_NAME$10 = 'vc-form-item';
 const FormItem = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$$,
+  name: COMPONENT_NAME$10,
   props: props$L,
   setup(props, {
     slots,
@@ -9294,9 +9294,9 @@ const props$K = {
   }
 };
 
-const COMPONENT_NAME$_ = "vcm-form";
+const COMPONENT_NAME$$ = "vcm-form";
 const MForm = defineComponent({
-  name: COMPONENT_NAME$_,
+  name: COMPONENT_NAME$$,
   props: props$K,
   setup(props, { slots, expose }) {
     useForm(expose, {
@@ -9327,9 +9327,9 @@ const props$J = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$Z = 'vcm-form-item';
+const COMPONENT_NAME$_ = 'vcm-form-item';
 const MFormItem = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$Z,
+  name: COMPONENT_NAME$_,
   props: props$J,
   setup(props, {
     slots,
@@ -9383,9 +9383,9 @@ const MFormItem = /* @__PURE__ */ defineComponent({
   }
 });
 
-const COMPONENT_NAME$Y = "vc-fragment";
+const COMPONENT_NAME$Z = "vc-fragment";
 const Fragment = defineComponent({
-  name: COMPONENT_NAME$Y,
+  name: COMPONENT_NAME$Z,
   setup(_, { slots }) {
     return () => h(Fragment$1, slots.default?.());
   }
@@ -9402,9 +9402,9 @@ const props$I = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$X = 'vc-html-to-image';
+const COMPONENT_NAME$Y = 'vc-html-to-image';
 const HTMLToImage = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$X,
+  name: COMPONENT_NAME$Y,
   props: props$I,
   setup(props, {
     slots
@@ -9422,10 +9422,113 @@ const MHTMLToImage = HTMLToImage;
 const MIcon = Icon;
 
 const props$H = {
+  tag: {
+    type: String,
+    default: "div"
+  }
+};
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$X = 'vc-image-preview';
+const ImagePreview$1 = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$X,
+  props: props$H,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return createVNode("div", {
+        "class": "vc-image-preview"
+      }, [slots?.default?.()]);
+    };
+  }
+});
+
+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 props$G = {
   src: String,
   fit: String,
   lazy: Boolean,
-  wrapper: [Object, String]
+  wrapper: [Object, String],
+  previewable: {
+    type: Boolean,
+    default: true
+  }
 };
 
 class IMGStore {
@@ -9495,7 +9598,7 @@ const ObjectFit = {
 const Image$1 = /* @__PURE__ */ defineComponent({
   name: COMPONENT_NAME$W,
   inheritAttrs: false,
-  props: props$H,
+  props: props$G,
   setup(props, {
     slots,
     emit
@@ -9644,6 +9747,14 @@ const Image$1 = /* @__PURE__ */ defineComponent({
     const alignCenter = computed(() => {
       return !isSupportObjectFit && props.fit !== ObjectFit.FILL;
     });
+    const handlePreview = () => {
+      if (!props.previewable) return;
+      ImagePreview.open({
+        current: 0,
+        data: [props.src],
+        onClose() {}
+      });
+    };
     watch(() => props.src, v => {
       if (!v && !isLoading.value) {
         isLoading.value = true;
@@ -9664,7 +9775,9 @@ const Image$1 = /* @__PURE__ */ defineComponent({
     return () => {
       return createVNode("div", {
         "style": its.value.style,
-        "class": [its.value.class, 'vc-image']
+        "class": [its.value.class, {
+          'is-allow-preview': props.previewable
+        }, 'vc-image']
       }, [isLoading.value && (slots.placeholder ? slots.placeholder() : createVNode("div", {
         "class": [{
           'is-auto': isAuto.value
@@ -9682,6 +9795,8 @@ const Image$1 = /* @__PURE__ */ defineComponent({
         // 包含所有on*都会被绑定, 且listeners中覆盖将由listener内触发（inheritAttrs: false）
         ...its.value.attrs,
         ...its.value.listeners
+      }, {
+        "onClick": handlePreview
       }), null)]);
     };
   }
@@ -9689,7 +9804,7 @@ const Image$1 = /* @__PURE__ */ defineComponent({
 
 const MImage = Image$1;
 
-const props$G = {
+const props$F = {
   tag: {
     type: String,
     default: "div"
@@ -9701,7 +9816,7 @@ const props$G = {
 const COMPONENT_NAME$V = 'vc-image-crop';
 const ImageCrop = /* @__PURE__ */ defineComponent({
   name: COMPONENT_NAME$V,
-  props: props$G,
+  props: props$F,
   setup(props, {
     slots
   }) {
@@ -9715,105 +9830,6 @@ const ImageCrop = /* @__PURE__ */ defineComponent({
 
 const MImageCrop = ImageCrop;
 
-const props$F = {
-  tag: {
-    type: String,
-    default: "div"
-  }
-};
-
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$U = 'vc-image-preview';
-const ImagePreview$1 = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$U,
-  props: props$F,
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      return createVNode("div", {
-        "class": "vc-image-preview"
-      }, [slots?.default?.()]);
-    };
-  }
-});
-
-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 = {
@@ -9825,9 +9841,9 @@ const props$E = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$T = 'vc-image-processing';
+const COMPONENT_NAME$U = 'vc-image-processing';
 const ImageProcessing = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$T,
+  name: COMPONENT_NAME$U,
   props: props$E,
   setup(props, {
     slots
@@ -9844,9 +9860,9 @@ const MImageProcessing = ImageProcessing;
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$S = 'vcm-input';
+const COMPONENT_NAME$T = 'vcm-input';
 const MInput = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$S,
+  name: COMPONENT_NAME$T,
   inheritAttrs: false,
   props: {
     ...props$$,
@@ -9935,9 +9951,9 @@ const MInput = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$R = 'vcm-input-number';
+const COMPONENT_NAME$S = 'vcm-input-number';
 const MInputNumber = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$R,
+  name: COMPONENT_NAME$S,
   props: props$X,
   inheritAttrs: false,
   setup(props, {
@@ -9986,9 +10002,9 @@ const MInputNumber = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$Q = 'vcm-input-search';
+const COMPONENT_NAME$R = 'vcm-input-search';
 const MInputSearch = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$Q,
+  name: COMPONENT_NAME$R,
   props: {
     ...props$W,
     cancelText: {
@@ -10065,9 +10081,9 @@ const props$D = {
   }
 };
 
-const COMPONENT_NAME$P = "vcm-list";
+const COMPONENT_NAME$Q = "vcm-list";
 const MList = defineComponent({
-  name: COMPONENT_NAME$P,
+  name: COMPONENT_NAME$Q,
   props: props$D,
   setup(props, { slots }) {
     provide("vc-list", { props });
@@ -10122,10 +10138,10 @@ const props$C = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$O = 'vcm-list-item';
+const COMPONENT_NAME$P = 'vcm-list-item';
 const HTTP_REGEX = /[a-zA-z]+:\/\/[^\s]*/;
 const MListItem = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$O,
+  name: COMPONENT_NAME$P,
   props: props$C,
   emits: ['click'],
   setup(props, {
@@ -10219,11 +10235,11 @@ const props$B = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$N = 'vc-marquee';
+const COMPONENT_NAME$O = 'vc-marquee';
 const ANIMATION = prefixStyle('animation').camel;
 const TRANSFORM_KEBAB = prefixStyle('transform').kebab;
 const Marquee = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$N,
+  name: COMPONENT_NAME$O,
   props: props$B,
   setup(props, {
     slots
@@ -10291,9 +10307,9 @@ const props$A = {
   }
 };
 
-const COMPONENT_NAME$M = "vc-resizer";
+const COMPONENT_NAME$N = "vc-resizer";
 const Resizer = defineComponent({
-  name: COMPONENT_NAME$M,
+  name: COMPONENT_NAME$N,
   props: props$A,
   emit: ["resize", "change"],
   setup(props, { emit, slots, expose }) {
@@ -10451,10 +10467,10 @@ const props$z = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$L = 'vc-modal';
+const COMPONENT_NAME$M = 'vc-modal';
 let zIndexNumber = 1002;
 const ModalView = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$L,
+  name: COMPONENT_NAME$M,
   emits: ['update:modelValue', 'close', 'portal-fulfilled', 'visible-change', 'ok', 'cancel'],
   props: props$z,
   setup(props, {
@@ -10893,9 +10909,9 @@ const props$y = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$K = 'vc-modal';
+const COMPONENT_NAME$L = 'vc-modal';
 const MModalView = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$K,
+  name: COMPONENT_NAME$L,
   emits: ['update:modelValue', 'portal-fulfilled', 'close', 'ok', 'cancel'],
   props: props$y,
   setup(props, {
@@ -11107,9 +11123,9 @@ const props$x = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$J = 'vc-notice';
+const COMPONENT_NAME$K = 'vc-notice';
 const NoticeView = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$J,
+  name: COMPONENT_NAME$K,
   props: props$x,
   emits: ['portal-fulfilled', 'close', 'before-close'],
   setup(props, {
@@ -11282,9 +11298,9 @@ const props$w = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$I = 'vc-option';
+const COMPONENT_NAME$J = 'vc-option';
 const Option$1 = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$I,
+  name: COMPONENT_NAME$J,
   props: props$w,
   setup(props, {
     slots
@@ -11397,9 +11413,9 @@ const props$u = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$H = 'vc-tag';
+const COMPONENT_NAME$I = 'vc-tag';
 const Tag = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$H,
+  name: COMPONENT_NAME$I,
   props: props$u,
   emits: ['close', 'change'],
   setup(props, {
@@ -11468,9 +11484,9 @@ const props$t = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$G = 'vc-select-option';
+const COMPONENT_NAME$H = 'vc-select-option';
 const Option = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$G,
+  name: COMPONENT_NAME$H,
   props: props$t,
   setup(props, {
     slots
@@ -11543,9 +11559,9 @@ const props$s = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$F = 'vc-select-option-group';
+const COMPONENT_NAME$G = 'vc-select-option-group';
 const OptionGroup = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$F,
+  name: COMPONENT_NAME$G,
   props: props$s,
   setup(props, {
     slots
@@ -11643,9 +11659,9 @@ const props$r = {
 function _isSlot$1(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-const COMPONENT_NAME$E = 'vc-select';
+const COMPONENT_NAME$F = 'vc-select';
 const Select = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$E,
+  name: COMPONENT_NAME$F,
   props: props$r,
   emits: ['ready', 'close', 'visible-change', 'clear', 'change', 'update:modelValue'],
   setup(props, {
@@ -11892,9 +11908,9 @@ const Select = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$D = 'vc-pagination';
+const COMPONENT_NAME$E = 'vc-pagination';
 const Pagination = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$D,
+  name: COMPONENT_NAME$E,
   props: props$v,
   emits: ['update:current', 'change', 'page-size-change'],
   setup(props, {
@@ -12092,9 +12108,9 @@ const props$q = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$C = 'vc-picker';
+const COMPONENT_NAME$D = 'vc-picker';
 const Picker = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$C,
+  name: COMPONENT_NAME$D,
   props: props$q,
   setup(props, {
     slots
@@ -12118,9 +12134,9 @@ const props$p = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$B = 'vc-popconfirm';
+const COMPONENT_NAME$C = 'vc-popconfirm';
 const Popconfirm = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$B,
+  name: COMPONENT_NAME$C,
   props: props$p,
   setup(props, {
     slots
@@ -12146,9 +12162,9 @@ const props$o = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$A = 'vc-popup';
+const COMPONENT_NAME$B = 'vc-popup';
 const Popup = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$A,
+  name: COMPONENT_NAME$B,
   props: props$o,
   setup(props, {
     slots
@@ -12175,9 +12191,9 @@ const props$n = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$z = 'vc-print';
+const COMPONENT_NAME$A = 'vc-print';
 const Print = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$z,
+  name: COMPONENT_NAME$A,
   props: props$n,
   setup(props, {
     expose,
@@ -12279,9 +12295,9 @@ const props$m = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$y = 'vc-progress-circle';
+const COMPONENT_NAME$z = 'vc-progress-circle';
 const Circle = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$y,
+  name: COMPONENT_NAME$z,
   props: props$m,
   setup(props, {
     slots
@@ -12341,9 +12357,9 @@ const Circle = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$x = 'vc-progress-line';
+const COMPONENT_NAME$y = 'vc-progress-line';
 const Line = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$x,
+  name: COMPONENT_NAME$y,
   props: props$m,
   setup(props) {
     const colorStyle = computed(() => {
@@ -12390,9 +12406,9 @@ const Line = /* @__PURE__ */ defineComponent({
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-const COMPONENT_NAME$w = 'vc-progress';
+const COMPONENT_NAME$x = 'vc-progress';
 const Progress = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$w,
+  name: COMPONENT_NAME$x,
   props: props$m,
   setup(props, {
     slots
@@ -12550,9 +12566,9 @@ const useRadio = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$v = 'vc-radio';
+const COMPONENT_NAME$w = 'vc-radio';
 const Radio = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$v,
+  name: COMPONENT_NAME$w,
   props: props$l,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -12663,9 +12679,9 @@ const useRadioGroup = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$u = 'vc-radio-group';
+const COMPONENT_NAME$v = 'vc-radio-group';
 const RadioGroup = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$u,
+  name: COMPONENT_NAME$v,
   props: props$k,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -12686,9 +12702,9 @@ const RadioGroup = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$t = 'vcm-radio';
+const COMPONENT_NAME$u = 'vcm-radio';
 const MRadio = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$t,
+  name: COMPONENT_NAME$u,
   props: props$l,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -12729,9 +12745,9 @@ const MRadio = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$s = 'vcm-radio-group';
+const COMPONENT_NAME$t = 'vcm-radio-group';
 const MRadioGroup = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$s,
+  name: COMPONENT_NAME$t,
   props: props$k,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -12760,9 +12776,9 @@ const props$j = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$r = 'vc-rate';
+const COMPONENT_NAME$s = 'vc-rate';
 const Rate = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$r,
+  name: COMPONENT_NAME$s,
   props: props$j,
   setup(props, {
     slots
@@ -12830,9 +12846,9 @@ const props$i = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$q = 'vc-recycle-list-scroll-state';
+const COMPONENT_NAME$r = 'vc-recycle-list-scroll-state';
 const ScrollState = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$q,
+  name: COMPONENT_NAME$r,
   setup(_, {
     slots
   }) {
@@ -12962,12 +12978,12 @@ const useDirectionKeys = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$p = 'vc-recycle-list-container';
+const COMPONENT_NAME$q = 'vc-recycle-list-container';
 
 // TODO: 抽离
 const transformKey = $.prefixStyle('transform').camel;
 const Container = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$p,
+  name: COMPONENT_NAME$q,
   props: props$h,
   emits: ['refresh'],
   setup(props, {
@@ -13065,9 +13081,9 @@ const Container = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$o = 'vc-recycle-list';
+const COMPONENT_NAME$p = 'vc-recycle-list';
 const RecycleList = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$o,
+  name: COMPONENT_NAME$p,
   props: props$i,
   emits: ['scroll', 'row-resize'],
   setup(props, {
@@ -13639,9 +13655,9 @@ const props$g = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$n = 'vc-slider';
+const COMPONENT_NAME$o = 'vc-slider';
 const Slider = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$n,
+  name: COMPONENT_NAME$o,
   props: props$g,
   setup(props, {
     slots
@@ -13665,9 +13681,9 @@ const props$f = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$m = 'vc-sort-list';
+const COMPONENT_NAME$n = 'vc-sort-list';
 const SortList = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$m,
+  name: COMPONENT_NAME$n,
   props: props$f,
   setup(props, {
     slots
@@ -13691,9 +13707,9 @@ const props$e = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$l = 'vc-steps';
+const COMPONENT_NAME$m = 'vc-steps';
 const Steps = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$l,
+  name: COMPONENT_NAME$m,
   props: props$e,
   setup(props, {
     slots
@@ -13806,9 +13822,9 @@ const useSwitch = (expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$k = 'vc-switch';
+const COMPONENT_NAME$l = 'vc-switch';
 const Switch = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$k,
+  name: COMPONENT_NAME$l,
   props: props$d,
   // click -> onClick要被拦截，此处不能放置
   emits: ['update:modelValue', 'change', 'click'],
@@ -13845,9 +13861,9 @@ const Switch = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$j = 'vcm-switch';
+const COMPONENT_NAME$k = 'vcm-switch';
 const MSwitch = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$j,
+  name: COMPONENT_NAME$k,
   props: props$d,
   // click -> onClick要被拦截，此处不能放置
   emits: ['update:modelValue', 'change', 'click'],
@@ -14960,9 +14976,9 @@ const useStates = (mapper, $store) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$i = 'vc-table-normal-list';
+const COMPONENT_NAME$j = 'vc-table-normal-list';
 const NormalList = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$i,
+  name: COMPONENT_NAME$j,
   props: {
     data: {
       type: Array,
@@ -15802,9 +15818,9 @@ const props$c = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$h = 'vc-table';
+const COMPONENT_NAME$i = 'vc-table';
 const Table = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$h,
+  name: COMPONENT_NAME$i,
   props: props$c,
   emits: ['select', 'select-all', 'selection-change', 'cell-mouse-enter', 'cell-mouse-leave', 'cell-click', 'cell-dblclick', 'row-click', 'row-contextmenu', 'row-dblclick', 'header-click', 'header-contextmenu', 'current-change', 'header-dragend ', 'expand-change', 'sort-change'],
   setup(props, {
@@ -16439,9 +16455,9 @@ const getFitIndex = (options = {}) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$g = 'vc-text';
+const COMPONENT_NAME$h = 'vc-text';
 const Text = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$g,
+  name: COMPONENT_NAME$h,
   props: props$b,
   setup(props, {
     emit
@@ -17136,9 +17152,9 @@ const useTabs = (options = {}) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$f = 'vc-tabs';
+const COMPONENT_NAME$g = 'vc-tabs';
 const Tabs = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$f,
+  name: COMPONENT_NAME$g,
   props: props$a,
   emits: ['update:modelValue', 'change', 'click'],
   setup(props, {
@@ -17386,9 +17402,9 @@ const useTabsPane = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$e = 'vc-tabs-pane';
+const COMPONENT_NAME$f = 'vc-tabs-pane';
 const TabsPane = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$e,
+  name: COMPONENT_NAME$f,
   props: props$9,
   setup(_, {
     slots
@@ -17443,9 +17459,9 @@ const props$8 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$d = 'vcm-tabs';
+const COMPONENT_NAME$e = 'vcm-tabs';
 const MTabs = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$d,
+  name: COMPONENT_NAME$e,
   props: props$8,
   emits: ['update:modelValue', 'change', 'click'],
   setup(props, {
@@ -17710,9 +17726,9 @@ const MTabs = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$c = 'vcm-tabs-pane';
+const COMPONENT_NAME$d = 'vcm-tabs-pane';
 const MTabsPane = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$c,
+  name: COMPONENT_NAME$d,
   props: props$9,
   setup(_, {
     slots
@@ -18013,9 +18029,9 @@ const props$7 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$b = 'vc-textarea';
+const COMPONENT_NAME$c = 'vc-textarea';
 const Textarea = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$b,
+  name: COMPONENT_NAME$c,
   props: Object.assign(props$7, {
     indicator: {
       type: [Boolean, Object],
@@ -18071,9 +18087,9 @@ const Textarea = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$a = 'vcm-textarea';
+const COMPONENT_NAME$b = 'vcm-textarea';
 const MTextarea = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$a,
+  name: COMPONENT_NAME$b,
   props: Object.assign(props$7, {
     align: {
       type: String,
@@ -18156,9 +18172,9 @@ const props$6 = {
   }
 };
 
-const COMPONENT_NAME$9 = "vc-theme";
+const COMPONENT_NAME$a = "vc-theme";
 const Theme = defineComponent({
-  name: COMPONENT_NAME$9,
+  name: COMPONENT_NAME$a,
   props: props$6,
   setup(props, { slots }) {
     const themeId = Utils.getUid("vc-theme");
@@ -18244,9 +18260,9 @@ const Theme = defineComponent({
   }
 });
 
-const COMPONENT_NAME$8 = "vc-theme-view";
+const COMPONENT_NAME$9 = "vc-theme-view";
 const ThemeView = defineComponent({
-  name: COMPONENT_NAME$8,
+  name: COMPONENT_NAME$9,
   props: props$6,
   setup(props, { slots }) {
     return () => {
@@ -18262,9 +18278,9 @@ const ThemeView = defineComponent({
   }
 });
 
-const COMPONENT_NAME$7 = "vc-theme-text";
+const COMPONENT_NAME$8 = "vc-theme-text";
 const ThemeText = defineComponent({
-  name: COMPONENT_NAME$7,
+  name: COMPONENT_NAME$8,
   props: props$6,
   setup(props, { slots }) {
     return () => {
@@ -18280,9 +18296,9 @@ const ThemeText = defineComponent({
   }
 });
 
-const COMPONENT_NAME$6 = "vc-theme-image";
+const COMPONENT_NAME$7 = "vc-theme-image";
 const ThemeImage = defineComponent({
-  name: COMPONENT_NAME$6,
+  name: COMPONENT_NAME$7,
   props: props$6,
   setup(props, { slots }) {
     return () => {
@@ -18330,12 +18346,12 @@ const props$5 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$5 = 'vc-time-picker';
+const COMPONENT_NAME$6 = 'vc-time-picker';
 const getPanel = type => {
   const isRange = type === 'timerange';
   return isRange ? TimeRangePanel : TimePanel;
 };
-const TimePicker = createPicker(COMPONENT_NAME$5, props$5, () => {
+const TimePicker = createPicker(COMPONENT_NAME$6, props$5, () => {
   const props = getCurrentInstance().props;
   const icon = ref('icon');
   const panel = shallowRef({});
@@ -18370,9 +18386,9 @@ const props$4 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$4 = 'vc-timeline';
+const COMPONENT_NAME$5 = 'vc-timeline';
 const Timeline = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$4,
+  name: COMPONENT_NAME$5,
   props: props$4,
   setup(props, {
     slots
@@ -18399,9 +18415,9 @@ const props$3 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$3 = 'vc-touch';
+const COMPONENT_NAME$4 = 'vc-touch';
 const Touch = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$3,
+  name: COMPONENT_NAME$4,
   props: props$3,
   setup(props, {
     slots
@@ -18425,9 +18441,9 @@ const props$2 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$2 = 'vc-tree';
+const COMPONENT_NAME$3 = 'vc-tree';
 const Tree = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$2,
+  name: COMPONENT_NAME$3,
   props: props$2,
   setup(props, {
     slots
@@ -18537,9 +18553,9 @@ const props$1 = {
   }
 };
 
-const COMPONENT_NAME$1 = "vc-upload";
+const COMPONENT_NAME$2 = "vc-upload";
 const Upload = defineComponent({
-  name: COMPONENT_NAME$1,
+  name: COMPONENT_NAME$2,
   props: props$1,
   emits: [
     "message",
@@ -18925,6 +18941,104 @@ const props = {
   gallery: Boolean
 };
 
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$1 = 'vc-steps';
+const ImageItem = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$1,
+  props: {
+    imageClass: [String, Object, Array],
+    disabled: Boolean,
+    row: Object,
+    imagePreviewOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    index: [String, Number],
+    data: {
+      type: Array,
+      default: () => []
+    },
+    keyValue: Object
+  },
+  emits: ['open', 'close', 'delete'],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const instance = getCurrentInstance();
+    const current = computed(() => {
+      if (props.row?.status === 0) return -1;
+      const v = props.data.filter(i => i.status !== 0);
+      return v.findIndex(i => {
+        const a = i[props.keyValue.value] || i;
+        const b = props.row?.[props.keyValue.value] || props.row;
+        return a === b;
+      });
+    });
+    // 拿到可预览的图片，供预览组件使用
+    const getPreviewData = () => {
+      return props.data.map(i => i?.[props.keyValue.value]);
+    };
+    const previewByPS = (e, index) => {
+      emit('open');
+      ImagePreview.open({
+        current: index,
+        data: getPreviewData(),
+        onClose: () => emit('close')
+      });
+    };
+    const handlePreview = e => {
+      /**
+       * 渐进增强
+       */
+      let {
+        enhancer
+      } = VcInstance.options.ImagePreview || {};
+      enhancer = props.imagePreviewOptions.enhancer || enhancer || (() => false);
+      const images = getPreviewData().map(item => ({
+        src: item
+      }));
+      enhancer(current.value, images, instance) || previewByPS(e, current.value);
+    };
+    const handleDel = () => {
+      emit('delete');
+    };
+    return () => {
+      const row = props.row;
+      return createVNode("div", {
+        "class": [{
+          'is-error': row.status == 0
+        }, 'vc-upload-image-item']
+      }, [slots.default ? slots.default({
+        it: row,
+        current: current.value
+      }) : createVNode(Fragment$1, null, [!row.errorFlag && typeof row[props.keyValue.value] === 'string' ? createVNode(Image$1, {
+        "src": row[props.keyValue.value],
+        "class": [props.imageClass, 'vc-upload-image-item__content'],
+        "fit": "cover",
+        "previewable": false,
+        "onClick": handlePreview
+      }, null) : createVNode("div", {
+        "class": [props.imageClass, 'vc-upload-image-item__content']
+      }, [row.percent && row.percent != 100 ? createVNode(Progress, {
+        "percent": row.percent,
+        "show-text": false,
+        "status": "normal",
+        "style": "width: 100%;padding: 0 5px"
+      }, null) : !row[props.keyValue.value] && row.percent === 100 && !row.errorFlag ? createVNode("p", {
+        "style": "line-height: 1; padding: 5px"
+      }, [createTextVNode("\u670D\u52A1\u5668\u6B63\u5728\u63A5\u6536...")]) : row.status == 0 ? createVNode("div", {
+        "style": "padding: 5px"
+      }, [createTextVNode("\u4E0A\u4F20\u5931\u8D25")]) : null]), (!props.disabled || row.errorFlag) && createVNode(Icon, {
+        "type": "close-small",
+        "class": "vc-upload-picker__delete",
+        "onClick": handleDel
+      }, null)])]);
+    };
+  }
+});
+
 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);
@@ -19176,7 +19290,7 @@ 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'],
+  emits: ['update:modelValue', 'file-success', 'file-start', 'file-before', 'file-error', 'success', 'error', 'complete', 'change', 'remove-before'],
   setup(props, {
     slots,
     expose
@@ -19188,8 +19302,7 @@ const UploadPicker = /* @__PURE__ */ defineComponent({
           case 'image':
             pre.push({
               type: cur,
-              item: 'div'
-              // item: ImageItem
+              item: ImageItem
             });
             return pre;
           case 'video':
@@ -19238,7 +19351,7 @@ const UploadPicker = /* @__PURE__ */ defineComponent({
           const Item = picker.item;
           return createVNode(Item, {
             "key": typeof item === 'object' ? item.uid : item,
-            "it": item,
+            "row": item,
             "disabled": props.disabled,
             "image-preview-options": props.imagePreviewOptions,
             "imageClass": props.imageClass,
@@ -19246,18 +19359,19 @@ const UploadPicker = /* @__PURE__ */ defineComponent({
             "audioClass": props.audioClass,
             "fileClass": props.fileClass,
             "index": index,
-            "data": item,
+            "keyValue": props.keyValue,
+            "data": base.currentValue.value[picker.type],
             "class": "vc-upload-picker__item",
             "onDelete": () => base.handleDelete(index, picker.type)
           }, {
-            default: scopeData => {
-              return slots.default ? slots.default({
+            default: slots.default ? scopeData => {
+              return slots?.default?.({
                 it: scopeData?.it,
                 current: scopeData?.current,
                 index,
                 name: picker.type
-              }) : scopeData;
-            }
+              });
+            } : null
           });
         }), withDirectives(createVNode(Upload, mergeProps(base.currentUploadOptions.value[picker.type], {
           "max": base.dynamicMax[picker.type],