@deot/vc-components 1.0.24 → 1.0.26

package/dist/index.cjs

@@ -11,6 +11,7 @@ const $ = require('@deot/helper-dom');
 const vcHooks = require('@deot/vc-hooks');
 const helperWheel = require('@deot/helper-wheel');
 const helperValidator = require('@deot/helper-validator');
+const PhotoSwipeLightbox = require('photoswipe/lightbox');
 const helperCache = require('@deot/helper-cache');
 const Load = require('@deot/helper-load');
 const helperScheduler = require('@deot/helper-scheduler');
@@ -102,9 +103,9 @@ const props$1q = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1$ = 'vc-action-sheet';
+const COMPONENT_NAME$20 = 'vc-action-sheet';
 const ActionSheet = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1$,
+  name: COMPONENT_NAME$20,
   props: props$1q,
   setup(props, {
     slots
@@ -291,9 +292,9 @@ const IconManager = new Manager();
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1_ = 'vc-icon';
+const COMPONENT_NAME$1$ = 'vc-icon';
 const Icon = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1_,
+  name: COMPONENT_NAME$1$,
   props: props$1o,
   setup(props) {
     const viewBox = vue.ref('0 0 1024 1024');
@@ -492,9 +493,9 @@ const useTransition = () => {
   };
 };
 
-const COMPONENT_NAME$1Z = "vc-transition";
+const COMPONENT_NAME$1_ = "vc-transition";
 const Transition = vue.defineComponent({
-  name: COMPONENT_NAME$1Z,
+  name: COMPONENT_NAME$1_,
   props: props$1n,
   // 当不声明emits的情况下，事件存在于attrs中
   inheritAttrs: false,
@@ -515,9 +516,9 @@ const Transition = vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$1Y = "vc-transition-collapse";
+const COMPONENT_NAME$1Z = "vc-transition-collapse";
 const TransitionCollapse = vue.defineComponent({
-  name: COMPONENT_NAME$1Y,
+  name: COMPONENT_NAME$1Z,
   props: props$1n,
   // 当不声明emits的情况下，事件存在于attrs中
   inheritAttrs: false,
@@ -636,9 +637,9 @@ const TransitionCollapse = vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$1X = "vc-transition-fade";
+const COMPONENT_NAME$1Y = "vc-transition-fade";
 const TransitionFade = vue.defineComponent({
-  name: COMPONENT_NAME$1X,
+  name: COMPONENT_NAME$1Y,
   props: {
     ...props$1n,
     // inheritAttrs必须是false
@@ -673,9 +674,9 @@ const TransitionFade = vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$1W = "vc-transition-scale";
+const COMPONENT_NAME$1X = "vc-transition-scale";
 const TransitionScale = vue.defineComponent({
-  name: COMPONENT_NAME$1W,
+  name: COMPONENT_NAME$1X,
   props: {
     ...props$1n,
     mode: {
@@ -715,9 +716,9 @@ const TransitionScale = vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$1V = "vc-transition-slide";
+const COMPONENT_NAME$1W = "vc-transition-slide";
 const TransitionSlide = vue.defineComponent({
-  name: COMPONENT_NAME$1V,
+  name: COMPONENT_NAME$1W,
   props: {
     ...props$1n,
     mode: {
@@ -757,9 +758,9 @@ const TransitionSlide = vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$1U = "vc-transition-zoom";
+const COMPONENT_NAME$1V = "vc-transition-zoom";
 const TransitionZoom = vue.defineComponent({
-  name: COMPONENT_NAME$1U,
+  name: COMPONENT_NAME$1V,
   props: {
     ...props$1n,
     mode: {
@@ -801,7 +802,7 @@ const TransitionZoom = vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1T = 'vc-alert';
+const COMPONENT_NAME$1U = 'vc-alert';
 
 // [color, borderColor, backgroundColor], -> CSS
 const THEME_MAP = {
@@ -811,7 +812,7 @@ const THEME_MAP = {
   warning: ['#ffbf00', '#ffe58f', '#fffbe6']
 };
 const Alert = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1T,
+  name: COMPONENT_NAME$1U,
   props: props$1p,
   setup(props, {
     slots,
@@ -910,9 +911,9 @@ const props$1m = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1S = 'vc-artboard';
+const COMPONENT_NAME$1T = 'vc-artboard';
 const Artboard = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1S,
+  name: COMPONENT_NAME$1T,
   props: props$1m,
   setup(props, {
     slots
@@ -951,9 +952,9 @@ const props$1l = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1R = 'vc-spin';
+const COMPONENT_NAME$1S = 'vc-spin';
 const Spin = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1R,
+  name: COMPONENT_NAME$1S,
   props: props$1l,
   setup(props, {
     slots
@@ -1004,9 +1005,9 @@ const props$1k = {
   exclude: RegExp
 };
 
-const COMPONENT_NAME$1Q = "vc-debounce";
+const COMPONENT_NAME$1R = "vc-debounce";
 const Debounce = vue.defineComponent({
-  name: COMPONENT_NAME$1Q,
+  name: COMPONENT_NAME$1R,
   props: props$1k,
   /**
    * 不声明emits使得事件被透传放入attrs中, 这样可以让所有的事件透传
@@ -1078,16 +1079,16 @@ const props$1j = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1P = 'vc-button';
+const COMPONENT_NAME$1Q = 'vc-button';
 const Button = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1P,
+  name: COMPONENT_NAME$1Q,
   emits: ['click'],
   props: props$1j,
   setup(props, {
     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?.()])]
       });
     };
   }
@@ -1160,9 +1163,9 @@ const props$1i = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1O = 'vc-button-group';
+const COMPONENT_NAME$1P = 'vc-button-group';
 const ButtonGroup = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1O,
+  name: COMPONENT_NAME$1P,
   props: props$1i,
   setup(props, {
     slots
@@ -1196,9 +1199,9 @@ const props$1h = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1N = 'vc-calendar';
+const COMPONENT_NAME$1O = 'vc-calendar';
 const Calendar = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1N,
+  name: COMPONENT_NAME$1O,
   props: props$1h,
   setup(props, {
     slots
@@ -1236,9 +1239,9 @@ const props$1g = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1M = 'vc-card';
+const COMPONENT_NAME$1N = 'vc-card';
 const Card = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1M,
+  name: COMPONENT_NAME$1N,
   props: props$1g,
   setup(props, {
     slots
@@ -1274,9 +1277,9 @@ const props$1f = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1L = 'vc-carousel';
+const COMPONENT_NAME$1M = 'vc-carousel';
 const Carousel = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1L,
+  name: COMPONENT_NAME$1M,
   props: props$1f,
   setup(props, {
     slots
@@ -1300,9 +1303,9 @@ const props$1e = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1K = 'vc-cascader';
+const COMPONENT_NAME$1L = 'vc-cascader';
 const Cascader = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1K,
+  name: COMPONENT_NAME$1L,
   props: props$1e,
   setup(props, {
     slots
@@ -1371,9 +1374,9 @@ const props$1d = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1J = 'vc-chart';
+const COMPONENT_NAME$1K = 'vc-chart';
 const Chart = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1J,
+  name: COMPONENT_NAME$1K,
   props: props$1d,
   emits: [...EVENTS, 'ready'],
   setup(props, {
@@ -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(
@@ -1604,9 +1608,9 @@ const useCheckbox = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1I = 'vc-checkbox';
+const COMPONENT_NAME$1J = 'vc-checkbox';
 const Checkbox = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1I,
+  name: COMPONENT_NAME$1J,
   props: props$1c,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -1693,9 +1697,9 @@ const useCheckboxGroup = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1H = 'vc-checkbox-group';
+const COMPONENT_NAME$1I = 'vc-checkbox-group';
 const CheckboxGroup = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1H,
+  name: COMPONENT_NAME$1I,
   props: props$1b,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -1713,9 +1717,9 @@ const CheckboxGroup = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1G = 'vcm-checkbox';
+const COMPONENT_NAME$1H = 'vcm-checkbox';
 const MCheckbox = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1G,
+  name: COMPONENT_NAME$1H,
   props: props$1c,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -1755,9 +1759,9 @@ const MCheckbox = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1F = 'vcm-checkbox-group';
+const COMPONENT_NAME$1G = 'vcm-checkbox-group';
 const MCheckboxGroup = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1F,
+  name: COMPONENT_NAME$1G,
   props: props$1b,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -1816,9 +1820,9 @@ const props$19 = {
   }
 };
 
-const COMPONENT_NAME$1E = "vc-customer";
+const COMPONENT_NAME$1F = "vc-customer";
 const Customer = vue.defineComponent({
-  name: COMPONENT_NAME$1E,
+  name: COMPONENT_NAME$1F,
   props: props$19,
   setup(props, context) {
     return () => vue.h(() => {
@@ -1829,9 +1833,9 @@ const Customer = vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1D = 'vc-message';
+const COMPONENT_NAME$1E = 'vc-message';
 const MessageView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1D,
+  name: COMPONENT_NAME$1E,
   emits: ['before-close', 'close', 'portal-fulfilled'],
   props: props$1a,
   setup(props, {
@@ -1978,7 +1982,7 @@ class PortalLeaf {
   }
 }
 
-const COMPONENT_NAME$1C = "vc-portal";
+const COMPONENT_NAME$1D = "vc-portal";
 class Portal {
   /**
    * 清理Portals类型组件
@@ -2030,7 +2034,7 @@ class Portal {
     this.wrapper = wrapper;
     this.globalOptions = {
       ...options,
-      name: options?.name || wrapper.name || Utils__namespace.getUid(COMPONENT_NAME$1C)
+      name: options?.name || wrapper.name || Utils__namespace.getUid(COMPONENT_NAME$1D)
     };
   }
   popup(propsData, options) {
@@ -2129,7 +2133,7 @@ class Portal {
       ...rest
     } = options;
     let useAllNodes = fragment;
-    const name = multiple ? `${name$}__${Utils__namespace.getUid(COMPONENT_NAME$1C)}` : name$;
+    const name = multiple ? `${name$}__${Utils__namespace.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();
@@ -2163,7 +2167,7 @@ class Portal {
     } else {
       const wrapper = this.wrapper;
       const app = vue.createApp({
-        name: COMPONENT_NAME$1C,
+        name: COMPONENT_NAME$1D,
         parent,
         setup() {
           if (alive) {
@@ -2275,13 +2279,13 @@ const props$18 = {
   }
 };
 
-const COMPONENT_NAME$1B = 'vc-portal-view';
+const COMPONENT_NAME$1C = 'vc-portal-view';
 
 /**
  * 写法不同，但与vue@2.x 保持一致
  */
 const PortalView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1B,
+  name: COMPONENT_NAME$1C,
   props: props$18,
   setup(props, {
     slots
@@ -2452,9 +2456,9 @@ const useClipboard = (done) => {
   return () => vue.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 = vue.defineComponent({
-  name: COMPONENT_NAME$1A,
+  name: COMPONENT_NAME$1B,
   props: props$17,
   setup() {
     return useClipboard((content) => Message.success({ content }));
@@ -2494,9 +2498,9 @@ const MTransitionZoom = TransitionZoom;
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1z = 'vcm-toast';
+const COMPONENT_NAME$1A = 'vcm-toast';
 const MToastView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1z,
+  name: COMPONENT_NAME$1A,
   emits: ['close', 'portal-fulfilled'],
   props: props$16,
   setup(props, {
@@ -2598,9 +2602,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 = vue.defineComponent({
-  name: COMPONENT_NAME$1y,
+  name: COMPONENT_NAME$1z,
   props: props$17,
   setup() {
     return useClipboard((content) => MToast.info({ content }));
@@ -2632,9 +2636,9 @@ const props$15 = {
   }
 };
 
-const COMPONENT_NAME$1x = "vc-collapse";
+const COMPONENT_NAME$1y = "vc-collapse";
 const Collapse = vue.defineComponent({
-  name: COMPONENT_NAME$1x,
+  name: COMPONENT_NAME$1y,
   props: props$15,
   emits: ["update:moodelValue", "change"],
   setup(props, { slots, emit }) {
@@ -2751,9 +2755,9 @@ const props$13 = {
 function _isSlot$3(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-const COMPONENT_NAME$1w = 'vc-expand';
+const COMPONENT_NAME$1x = 'vc-expand';
 const Expand$1 = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1w,
+  name: COMPONENT_NAME$1x,
   props: props$13,
   setup(props, {
     slots
@@ -2783,9 +2787,9 @@ const Expand$1 = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1v = 'vc-collapse-item';
+const COMPONENT_NAME$1w = 'vc-collapse-item';
 const CollapseItem = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1v,
+  name: COMPONENT_NAME$1w,
   props: props$14,
   setup(props, {
     slots,
@@ -2860,9 +2864,9 @@ const props$12 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1u = 'vc-color-picker';
+const COMPONENT_NAME$1v = 'vc-color-picker';
 const ColorPicker = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1u,
+  name: COMPONENT_NAME$1v,
   props: props$12,
   setup(props, {
     slots
@@ -2886,9 +2890,9 @@ const props$11 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1t = 'vc-countdown';
+const COMPONENT_NAME$1u = 'vc-countdown';
 const Countdown = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1t,
+  name: COMPONENT_NAME$1u,
   props: props$11,
   setup(props, {
     slots
@@ -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(() => {
@@ -3337,9 +3342,9 @@ const useNativeEmitter = (input, expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1s = 'vc-input';
+const COMPONENT_NAME$1t = 'vc-input';
 const Input = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1s,
+  name: COMPONENT_NAME$1t,
   inheritAttrs: false,
   props: {
     ...props$$,
@@ -3673,9 +3678,9 @@ const useInputNumber = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1r = 'vc-input-number';
+const COMPONENT_NAME$1s = 'vc-input-number';
 const InputNumber = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1r,
+  name: COMPONENT_NAME$1s,
   props: props$X,
   inheritAttrs: false,
   setup(props, {
@@ -3739,9 +3744,9 @@ const props$W = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1q = 'vc-input-search';
+const COMPONENT_NAME$1r = 'vc-input-search';
 const InputSearch = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1q,
+  name: COMPONENT_NAME$1r,
   props: props$W,
   inheritAttrs: false,
   setup(props, {
@@ -4032,9 +4037,9 @@ const usePos = () => {
 function _isSlot$2(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-const COMPONENT_NAME$1p = 'vc-popover-wrapper';
+const COMPONENT_NAME$1q = 'vc-popover-wrapper';
 const PopoverWrapper = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1p,
+  name: COMPONENT_NAME$1q,
   props: props$_,
   emits: ['portal-fulfilled', 'close'],
   setup(props, {
@@ -4284,9 +4289,9 @@ const PopoverPortal = new Portal(PopoverWrapper);
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1o = 'vc-popover';
+const COMPONENT_NAME$1p = 'vc-popover';
 const Popover$1 = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1o,
+  name: COMPONENT_NAME$1p,
   props: props$Z,
   emits: ['update:modelValue', 'visible-change', 'ready', 'close'],
   setup(props, {
@@ -5387,9 +5392,9 @@ const getTimeType = type => {
   }
   return view;
 };
-const COMPONENT_NAME$1n = 'vc-date-confirm';
+const COMPONENT_NAME$1o = 'vc-date-confirm';
 const Confirm = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1n,
+  name: COMPONENT_NAME$1o,
   props: {
     showTime: {
       type: Boolean,
@@ -5453,9 +5458,9 @@ const Confirm = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1m = 'vc-date-header';
+const COMPONENT_NAME$1n = 'vc-date-header';
 const DateHeader = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1m,
+  name: COMPONENT_NAME$1n,
   props: {
     panelDate: Date,
     showNext: {
@@ -5539,9 +5544,9 @@ const DateHeader = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1l = 'vc-date-table';
+const COMPONENT_NAME$1m = 'vc-date-table';
 const DateTable = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1l,
+  name: COMPONENT_NAME$1m,
   props: {
     value: Array,
     firstDayOfWeek: {
@@ -5750,9 +5755,9 @@ const DateTable = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1k = 'vc-month-table';
+const COMPONENT_NAME$1l = 'vc-month-table';
 const MonthTable = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1k,
+  name: COMPONENT_NAME$1l,
   props: {
     value: Array,
     panelDate: Date,
@@ -5884,7 +5889,7 @@ const MonthTable = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1j = 'vc-quarter-table';
+const COMPONENT_NAME$1k = 'vc-quarter-table';
 
 /**
  * 获取季度对应的月份范围
@@ -5918,7 +5923,7 @@ const getQuarterRangeByMonth = value => {
   }
 };
 const QuarterTable = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1j,
+  name: COMPONENT_NAME$1k,
   props: {
     value: Array,
     panelDate: Date,
@@ -6041,9 +6046,9 @@ const QuarterTable = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1i = 'vc-shortcuts-select';
+const COMPONENT_NAME$1j = 'vc-shortcuts-select';
 const ShortcutsSelect = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1i,
+  name: COMPONENT_NAME$1j,
   props: {
     panelDate: Date,
     config: Array,
@@ -6083,9 +6088,9 @@ const ShortcutsSelect = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1h = 'vc-time-select';
+const COMPONENT_NAME$1i = 'vc-time-select';
 const TimeSelect = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1h,
+  name: COMPONENT_NAME$1i,
   props: {
     hours: {
       type: [Number, String],
@@ -6364,9 +6369,9 @@ const TimeSelect = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1g = 'vc-year-table';
+const COMPONENT_NAME$1h = 'vc-year-table';
 const YearTable = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1g,
+  name: COMPONENT_NAME$1h,
   props: {
     value: Array,
     panelDate: Date,
@@ -6489,9 +6494,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__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1f,
+  name: COMPONENT_NAME$1g,
   props: {
     ...props$V,
     confirm: {
@@ -6870,9 +6875,9 @@ const DateRangePanel = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1e = 'vc-date-panel';
+const COMPONENT_NAME$1f = 'vc-date-panel';
 const DatePanel = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1e,
+  name: COMPONENT_NAME$1f,
   props: {
     ...props$V,
     type: String,
@@ -7080,9 +7085,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__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1d,
+  name: COMPONENT_NAME$1e,
   props: {
     ...props$V,
     confirm: {
@@ -7257,9 +7262,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__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1c,
+  name: COMPONENT_NAME$1d,
   props: {
     ...props$V,
     confirm: {
@@ -7498,9 +7503,9 @@ const getComparedDate = (leftDate, rightDate) => {
     seconds
   };
 };
-const COMPONENT_NAME$1b = 'vc-timerange-panel';
+const COMPONENT_NAME$1c = 'vc-timerange-panel';
 const TimeRangePanel = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1b,
+  name: COMPONENT_NAME$1c,
   props: props$U,
   emits: ['pick', 'clear', 'ok'],
   setup(props, {
@@ -7599,9 +7604,9 @@ const TimeRangePanel = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1a = 'vc-time-panel';
+const COMPONENT_NAME$1b = 'vc-time-panel';
 const TimePanel = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1a,
+  name: COMPONENT_NAME$1b,
   props: props$U,
   emits: ['pick', 'clear', 'ok'],
   setup(props, {
@@ -7656,7 +7661,7 @@ const TimePanel = /* @__PURE__ */ vue.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;
@@ -7667,7 +7672,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 = vue.getCurrentInstance().props;
   const icon = vue.ref('date');
   const panel = vue.shallowRef({});
@@ -7700,9 +7705,9 @@ const props$T = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$18 = 'vc-divider';
+const COMPONENT_NAME$19 = 'vc-divider';
 const Divider = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$18,
+  name: COMPONENT_NAME$19,
   props: props$T,
   setup(props, {
     slots
@@ -7857,7 +7862,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',
@@ -7877,7 +7882,7 @@ const BAR_MAP = {
   }
 };
 const Track = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$17,
+  name: COMPONENT_NAME$18,
   props: props$S,
   emits: ['change'],
   inheritAttrs: false,
@@ -8067,9 +8072,9 @@ const Track = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$16 = 'vc-scroller-bar';
+const COMPONENT_NAME$17 = 'vc-scroller-bar';
 const Bar = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$16,
+  name: COMPONENT_NAME$17,
   props: props$R,
   emits: ['change'],
   setup(props, {
@@ -8284,7 +8289,7 @@ const useScroller = (expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$15 = 'vc-scroller';
+const COMPONENT_NAME$16 = 'vc-scroller';
 
 /**
  * 作为备选方案,目前推荐使用ScrollerWheel
@@ -8295,7 +8300,7 @@ const COMPONENT_NAME$15 = 'vc-scroller';
  * 2. 增加了一层嵌套
  */
 const Scroller = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$15,
+  name: COMPONENT_NAME$16,
   props: props$Q,
   emits: ['scroll'],
   setup(props, {
@@ -8356,7 +8361,7 @@ const Scroller = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$14 = 'vc-scroller-wheel';
+const COMPONENT_NAME$15 = 'vc-scroller-wheel';
 
 /**
  * 为减少一层嵌套，为去除滚动bar的抖动，使用wheel模拟
@@ -8378,7 +8383,7 @@ const COMPONENT_NAME$14 = 'vc-scroller-wheel';
  * 设置scrollTop不会reflow和repaint，不需要考虑transfrom来改变content（transform也只在draw完成）
  */
 const ScrollerWheel = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$14,
+  name: COMPONENT_NAME$15,
   props: Object.assign(props$Q, {
     stopPropagation: {
       type: Boolean,
@@ -8567,9 +8572,9 @@ const props$P = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$13 = 'vc-drawer';
+const COMPONENT_NAME$14 = 'vc-drawer';
 const DrawerView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$13,
+  name: COMPONENT_NAME$14,
   props: props$P,
   emits: ['close', 'update:modelValue', 'visible-change'],
   setup(props, {
@@ -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;
@@ -8745,9 +8750,9 @@ const props$O = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$12 = 'vc-dropdown';
+const COMPONENT_NAME$13 = 'vc-dropdown';
 const Dropdown = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$12,
+  name: COMPONENT_NAME$13,
   props: props$O,
   setup(props, {
     slots
@@ -8771,9 +8776,9 @@ const props$N = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$11 = 'vc-editor';
+const COMPONENT_NAME$12 = 'vc-editor';
 const Editor = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$11,
+  name: COMPONENT_NAME$12,
   props: props$N,
   setup(props, {
     slots
@@ -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);
@@ -8917,9 +8922,9 @@ const useForm = (expose, options = {}) => {
   });
 };
 
-const COMPONENT_NAME$10 = "vc-form";
+const COMPONENT_NAME$11 = "vc-form";
 const Form = vue.defineComponent({
-  name: COMPONENT_NAME$10,
+  name: COMPONENT_NAME$11,
   props: props$M,
   setup(props, { slots, expose }) {
     useForm(expose);
@@ -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;
@@ -9245,9 +9249,9 @@ const useFormItem = (expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$$ = 'vc-form-item';
+const COMPONENT_NAME$10 = 'vc-form-item';
 const FormItem = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$$,
+  name: COMPONENT_NAME$10,
   props: props$L,
   setup(props, {
     slots,
@@ -9312,9 +9316,9 @@ const props$K = {
   }
 };
 
-const COMPONENT_NAME$_ = "vcm-form";
+const COMPONENT_NAME$$ = "vcm-form";
 const MForm = vue.defineComponent({
-  name: COMPONENT_NAME$_,
+  name: COMPONENT_NAME$$,
   props: props$K,
   setup(props, { slots, expose }) {
     useForm(expose, {
@@ -9345,9 +9349,9 @@ const props$J = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$Z = 'vcm-form-item';
+const COMPONENT_NAME$_ = 'vcm-form-item';
 const MFormItem = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$Z,
+  name: COMPONENT_NAME$_,
   props: props$J,
   setup(props, {
     slots,
@@ -9401,9 +9405,9 @@ const MFormItem = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$Y = "vc-fragment";
+const COMPONENT_NAME$Z = "vc-fragment";
 const Fragment = vue.defineComponent({
-  name: COMPONENT_NAME$Y,
+  name: COMPONENT_NAME$Z,
   setup(_, { slots }) {
     return () => vue.h(vue.Fragment, slots.default?.());
   }
@@ -9420,9 +9424,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__ */ vue.defineComponent({
-  name: COMPONENT_NAME$X,
+  name: COMPONENT_NAME$Y,
   props: props$I,
   setup(props, {
     slots
@@ -9440,10 +9444,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__ */ vue.defineComponent({
+  name: COMPONENT_NAME$X,
+  props: props$H,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return vue.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 {
@@ -9510,10 +9617,10 @@ 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,
+  props: props$G,
   setup(props, {
     slots,
     emit
@@ -9662,6 +9769,14 @@ const Image = /* @__PURE__ */ vue.defineComponent({
     const alignCenter = vue.computed(() => {
       return !isSupportObjectFit && props.fit !== ObjectFit.FILL;
     });
+    const handlePreview = () => {
+      if (!props.previewable) return;
+      ImagePreview.open({
+        current: 0,
+        data: [props.src],
+        onClose() {}
+      });
+    };
     vue.watch(() => props.src, v => {
       if (!v && !isLoading.value) {
         isLoading.value = true;
@@ -9682,7 +9797,9 @@ const Image = /* @__PURE__ */ vue.defineComponent({
     return () => {
       return vue.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() : vue.createVNode("div", {
         "class": [{
           'is-auto': isAuto.value
@@ -9700,14 +9817,16 @@ const Image = /* @__PURE__ */ vue.defineComponent({
         // 包含所有on*都会被绑定, 且listeners中覆盖将由listener内触发（inheritAttrs: false）
         ...its.value.attrs,
         ...its.value.listeners
+      }, {
+        "onClick": handlePreview
       }), null)]);
     };
   }
 });
 
-const MImage = Image;
+const MImage = Image$1;
 
-const props$G = {
+const props$F = {
   tag: {
     type: String,
     default: "div"
@@ -9719,7 +9838,7 @@ const props$G = {
 const COMPONENT_NAME$V = 'vc-image-crop';
 const ImageCrop = /* @__PURE__ */ vue.defineComponent({
   name: COMPONENT_NAME$V,
-  props: props$G,
+  props: props$F,
   setup(props, {
     slots
   }) {
@@ -9733,30 +9852,6 @@ const ImageCrop = /* @__PURE__ */ vue.defineComponent({
 
 const MImageCrop = ImageCrop;
 
-const props$F = {
-  tag: {
-    type: String,
-    default: "div"
-  }
-};
-
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$U = 'vc-image-preview';
-const ImagePreview = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$U,
-  props: props$F,
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      return vue.createVNode("div", {
-        "class": "vc-image-preview"
-      }, [slots?.default?.()]);
-    };
-  }
-});
-
 const MImagePreview = ImagePreview;
 
 const props$E = {
@@ -9768,9 +9863,9 @@ const props$E = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$T = 'vc-image-processing';
+const COMPONENT_NAME$U = 'vc-image-processing';
 const ImageProcessing = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$T,
+  name: COMPONENT_NAME$U,
   props: props$E,
   setup(props, {
     slots
@@ -9787,9 +9882,9 @@ const MImageProcessing = ImageProcessing;
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$S = 'vcm-input';
+const COMPONENT_NAME$T = 'vcm-input';
 const MInput = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$S,
+  name: COMPONENT_NAME$T,
   inheritAttrs: false,
   props: {
     ...props$$,
@@ -9878,9 +9973,9 @@ const MInput = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$R = 'vcm-input-number';
+const COMPONENT_NAME$S = 'vcm-input-number';
 const MInputNumber = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$R,
+  name: COMPONENT_NAME$S,
   props: props$X,
   inheritAttrs: false,
   setup(props, {
@@ -9929,9 +10024,9 @@ const MInputNumber = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$Q = 'vcm-input-search';
+const COMPONENT_NAME$R = 'vcm-input-search';
 const MInputSearch = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$Q,
+  name: COMPONENT_NAME$R,
   props: {
     ...props$W,
     cancelText: {
@@ -10008,9 +10103,9 @@ const props$D = {
   }
 };
 
-const COMPONENT_NAME$P = "vcm-list";
+const COMPONENT_NAME$Q = "vcm-list";
 const MList = vue.defineComponent({
-  name: COMPONENT_NAME$P,
+  name: COMPONENT_NAME$Q,
   props: props$D,
   setup(props, { slots }) {
     vue.provide("vc-list", { props });
@@ -10065,10 +10160,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__ */ vue.defineComponent({
-  name: COMPONENT_NAME$O,
+  name: COMPONENT_NAME$P,
   props: props$C,
   emits: ['click'],
   setup(props, {
@@ -10162,11 +10257,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__ */ vue.defineComponent({
-  name: COMPONENT_NAME$N,
+  name: COMPONENT_NAME$O,
   props: props$B,
   setup(props, {
     slots
@@ -10234,9 +10329,9 @@ const props$A = {
   }
 };
 
-const COMPONENT_NAME$M = "vc-resizer";
+const COMPONENT_NAME$N = "vc-resizer";
 const Resizer = vue.defineComponent({
-  name: COMPONENT_NAME$M,
+  name: COMPONENT_NAME$N,
   props: props$A,
   emit: ["resize", "change"],
   setup(props, { emit, slots, expose }) {
@@ -10363,9 +10458,8 @@ const props$z = {
     type: [String, Boolean],
     default: "取消"
   },
-  wrapperStyle: {
-    type: [String, Object]
-  },
+  wrapperStyle: [String, Object],
+  wrapperClass: [String, Object],
   footer: {
     type: Boolean,
     default: true
@@ -10395,10 +10489,10 @@ const props$z = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$L = 'vc-modal';
+const COMPONENT_NAME$M = 'vc-modal';
 let zIndexNumber = 1002;
 const ModalView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$L,
+  name: COMPONENT_NAME$M,
   emits: ['update:modelValue', 'close', 'portal-fulfilled', 'visible-change', 'ok', 'cancel'],
   props: props$z,
   setup(props, {
@@ -10419,6 +10513,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 +10532,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 +10768,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",
@@ -10836,9 +10931,9 @@ const props$y = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$K = 'vc-modal';
+const COMPONENT_NAME$L = 'vc-modal';
 const MModalView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$K,
+  name: COMPONENT_NAME$L,
   emits: ['update:modelValue', 'portal-fulfilled', 'close', 'ok', 'cancel'],
   props: props$y,
   setup(props, {
@@ -11050,9 +11145,9 @@ const props$x = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$J = 'vc-notice';
+const COMPONENT_NAME$K = 'vc-notice';
 const NoticeView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$J,
+  name: COMPONENT_NAME$K,
   props: props$x,
   emits: ['portal-fulfilled', 'close', 'before-close'],
   setup(props, {
@@ -11225,9 +11320,9 @@ const props$w = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$I = 'vc-option';
+const COMPONENT_NAME$J = 'vc-option';
 const Option$1 = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$I,
+  name: COMPONENT_NAME$J,
   props: props$w,
   setup(props, {
     slots
@@ -11340,9 +11435,9 @@ const props$u = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$H = 'vc-tag';
+const COMPONENT_NAME$I = 'vc-tag';
 const Tag = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$H,
+  name: COMPONENT_NAME$I,
   props: props$u,
   emits: ['close', 'change'],
   setup(props, {
@@ -11411,9 +11506,9 @@ const props$t = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$G = 'vc-select-option';
+const COMPONENT_NAME$H = 'vc-select-option';
 const Option = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$G,
+  name: COMPONENT_NAME$H,
   props: props$t,
   setup(props, {
     slots
@@ -11486,9 +11581,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__ */ vue.defineComponent({
-  name: COMPONENT_NAME$F,
+  name: COMPONENT_NAME$G,
   props: props$s,
   setup(props, {
     slots
@@ -11586,9 +11681,9 @@ const props$r = {
 function _isSlot$1(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-const COMPONENT_NAME$E = 'vc-select';
+const COMPONENT_NAME$F = 'vc-select';
 const Select = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$E,
+  name: COMPONENT_NAME$F,
   props: props$r,
   emits: ['ready', 'close', 'visible-change', 'clear', 'change', 'update:modelValue'],
   setup(props, {
@@ -11835,9 +11930,9 @@ const Select = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$D = 'vc-pagination';
+const COMPONENT_NAME$E = 'vc-pagination';
 const Pagination = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$D,
+  name: COMPONENT_NAME$E,
   props: props$v,
   emits: ['update:current', 'change', 'page-size-change'],
   setup(props, {
@@ -12035,9 +12130,9 @@ const props$q = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$C = 'vc-picker';
+const COMPONENT_NAME$D = 'vc-picker';
 const Picker = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$C,
+  name: COMPONENT_NAME$D,
   props: props$q,
   setup(props, {
     slots
@@ -12061,9 +12156,9 @@ const props$p = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$B = 'vc-popconfirm';
+const COMPONENT_NAME$C = 'vc-popconfirm';
 const Popconfirm = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$B,
+  name: COMPONENT_NAME$C,
   props: props$p,
   setup(props, {
     slots
@@ -12089,9 +12184,9 @@ const props$o = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$A = 'vc-popup';
+const COMPONENT_NAME$B = 'vc-popup';
 const Popup = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$A,
+  name: COMPONENT_NAME$B,
   props: props$o,
   setup(props, {
     slots
@@ -12118,9 +12213,9 @@ const props$n = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$z = 'vc-print';
+const COMPONENT_NAME$A = 'vc-print';
 const Print = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$z,
+  name: COMPONENT_NAME$A,
   props: props$n,
   setup(props, {
     expose,
@@ -12222,9 +12317,9 @@ const props$m = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$y = 'vc-progress-circle';
+const COMPONENT_NAME$z = 'vc-progress-circle';
 const Circle = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$y,
+  name: COMPONENT_NAME$z,
   props: props$m,
   setup(props, {
     slots
@@ -12284,9 +12379,9 @@ const Circle = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$x = 'vc-progress-line';
+const COMPONENT_NAME$y = 'vc-progress-line';
 const Line = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$x,
+  name: COMPONENT_NAME$y,
   props: props$m,
   setup(props) {
     const colorStyle = vue.computed(() => {
@@ -12333,15 +12428,19 @@ const Line = /* @__PURE__ */ vue.defineComponent({
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-const COMPONENT_NAME$w = 'vc-progress';
+const COMPONENT_NAME$x = 'vc-progress';
 const Progress = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$w,
+  name: COMPONENT_NAME$x,
   props: props$m,
   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 +12452,7 @@ const Progress = /* @__PURE__ */ vue.defineComponent({
     const binds = vue.computed(() => {
       return {
         ...props,
+        percent: currentPercent.value,
         status: currentStatus.value,
         color: currentColor.value
       };
@@ -12430,7 +12530,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(
@@ -12487,9 +12588,9 @@ const useRadio = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$v = 'vc-radio';
+const COMPONENT_NAME$w = 'vc-radio';
 const Radio = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$v,
+  name: COMPONENT_NAME$w,
   props: props$l,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -12600,9 +12701,9 @@ const useRadioGroup = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$u = 'vc-radio-group';
+const COMPONENT_NAME$v = 'vc-radio-group';
 const RadioGroup = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$u,
+  name: COMPONENT_NAME$v,
   props: props$k,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -12614,8 +12715,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?.()]);
     };
@@ -12624,9 +12724,9 @@ const RadioGroup = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$t = 'vcm-radio';
+const COMPONENT_NAME$u = 'vcm-radio';
 const MRadio = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$t,
+  name: COMPONENT_NAME$u,
   props: props$l,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -12667,9 +12767,9 @@ const MRadio = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$s = 'vcm-radio-group';
+const COMPONENT_NAME$t = 'vcm-radio-group';
 const MRadioGroup = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$s,
+  name: COMPONENT_NAME$t,
   props: props$k,
   emits: ['update:modelValue', 'change'],
   setup(props, {
@@ -12698,9 +12798,9 @@ const props$j = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$r = 'vc-rate';
+const COMPONENT_NAME$s = 'vc-rate';
 const Rate = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$r,
+  name: COMPONENT_NAME$s,
   props: props$j,
   setup(props, {
     slots
@@ -12768,9 +12868,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__ */ vue.defineComponent({
-  name: COMPONENT_NAME$q,
+  name: COMPONENT_NAME$r,
   setup(_, {
     slots
   }) {
@@ -12900,12 +13000,12 @@ const useDirectionKeys = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$p = 'vc-recycle-list-container';
+const COMPONENT_NAME$q = 'vc-recycle-list-container';
 
 // TODO: 抽离
 const transformKey = $__namespace.prefixStyle('transform').camel;
 const Container = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$p,
+  name: COMPONENT_NAME$q,
   props: props$h,
   emits: ['refresh'],
   setup(props, {
@@ -13003,9 +13103,9 @@ const Container = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$o = 'vc-recycle-list';
+const COMPONENT_NAME$p = 'vc-recycle-list';
 const RecycleList = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$o,
+  name: COMPONENT_NAME$p,
   props: props$i,
   emits: ['scroll', 'row-resize'],
   setup(props, {
@@ -13577,9 +13677,9 @@ const props$g = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$n = 'vc-slider';
+const COMPONENT_NAME$o = 'vc-slider';
 const Slider = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$n,
+  name: COMPONENT_NAME$o,
   props: props$g,
   setup(props, {
     slots
@@ -13603,9 +13703,9 @@ const props$f = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$m = 'vc-sort-list';
+const COMPONENT_NAME$n = 'vc-sort-list';
 const SortList = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$m,
+  name: COMPONENT_NAME$n,
   props: props$f,
   setup(props, {
     slots
@@ -13629,9 +13729,9 @@ const props$e = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$l = 'vc-steps';
+const COMPONENT_NAME$m = 'vc-steps';
 const Steps = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$l,
+  name: COMPONENT_NAME$m,
   props: props$e,
   setup(props, {
     slots
@@ -13744,9 +13844,9 @@ const useSwitch = (expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$k = 'vc-switch';
+const COMPONENT_NAME$l = 'vc-switch';
 const Switch = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$k,
+  name: COMPONENT_NAME$l,
   props: props$d,
   // click -> onClick要被拦截，此处不能放置
   emits: ['update:modelValue', 'change', 'click'],
@@ -13783,9 +13883,9 @@ const Switch = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$j = 'vcm-switch';
+const COMPONENT_NAME$k = 'vcm-switch';
 const MSwitch = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$j,
+  name: COMPONENT_NAME$k,
   props: props$d,
   // click -> onClick要被拦截，此处不能放置
   emits: ['update:modelValue', 'change', 'click'],
@@ -14898,9 +14998,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__ */ vue.defineComponent({
-  name: COMPONENT_NAME$i,
+  name: COMPONENT_NAME$j,
   props: {
     data: {
       type: Array,
@@ -15740,9 +15840,9 @@ const props$c = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$h = 'vc-table';
+const COMPONENT_NAME$i = 'vc-table';
 const Table = /* @__PURE__ */ vue.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, {
@@ -16377,9 +16477,9 @@ const getFitIndex = (options = {}) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$g = 'vc-text';
+const COMPONENT_NAME$h = 'vc-text';
 const Text = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$g,
+  name: COMPONENT_NAME$h,
   props: props$b,
   setup(props, {
     emit
@@ -16935,7 +17035,11 @@ const props$a = {
   closable: {
     type: Boolean,
     default: false
-  }
+  },
+  barStyle: [Object, String],
+  contentStyle: [Object, String],
+  barClass: [Object, String],
+  contentClass: [Object, String]
 };
 
 const useTabs = (options = {}) => {
@@ -17070,9 +17174,9 @@ const useTabs = (options = {}) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$f = 'vc-tabs';
+const COMPONENT_NAME$g = 'vc-tabs';
 const Tabs = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$f,
+  name: COMPONENT_NAME$g,
   props: props$a,
   emits: ['update:modelValue', 'change', 'click'],
   setup(props, {
@@ -17188,10 +17292,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 +17335,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?.()])]);
     };
   }
@@ -17320,9 +17424,9 @@ const useTabsPane = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$e = 'vc-tabs-pane';
+const COMPONENT_NAME$f = 'vc-tabs-pane';
 const TabsPane = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$e,
+  name: COMPONENT_NAME$f,
   props: props$9,
   setup(_, {
     slots
@@ -17377,9 +17481,9 @@ const props$8 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$d = 'vcm-tabs';
+const COMPONENT_NAME$e = 'vcm-tabs';
 const MTabs = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$d,
+  name: COMPONENT_NAME$e,
   props: props$8,
   emits: ['update:modelValue', 'change', 'click'],
   setup(props, {
@@ -17644,9 +17748,9 @@ const MTabs = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$c = 'vcm-tabs-pane';
+const COMPONENT_NAME$d = 'vcm-tabs-pane';
 const MTabsPane = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$c,
+  name: COMPONENT_NAME$d,
   props: props$9,
   setup(_, {
     slots
@@ -17847,7 +17951,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(() => {
@@ -17946,9 +18051,9 @@ const props$7 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$b = 'vc-textarea';
+const COMPONENT_NAME$c = 'vc-textarea';
 const Textarea = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$b,
+  name: COMPONENT_NAME$c,
   props: Object.assign(props$7, {
     indicator: {
       type: [Boolean, Object],
@@ -18004,9 +18109,9 @@ const Textarea = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$a = 'vcm-textarea';
+const COMPONENT_NAME$b = 'vcm-textarea';
 const MTextarea = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$a,
+  name: COMPONENT_NAME$b,
   props: Object.assign(props$7, {
     align: {
       type: String,
@@ -18089,9 +18194,9 @@ const props$6 = {
   }
 };
 
-const COMPONENT_NAME$9 = "vc-theme";
+const COMPONENT_NAME$a = "vc-theme";
 const Theme = vue.defineComponent({
-  name: COMPONENT_NAME$9,
+  name: COMPONENT_NAME$a,
   props: props$6,
   setup(props, { slots }) {
     const themeId = Utils__namespace.getUid("vc-theme");
@@ -18177,9 +18282,9 @@ const Theme = vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$8 = "vc-theme-view";
+const COMPONENT_NAME$9 = "vc-theme-view";
 const ThemeView = vue.defineComponent({
-  name: COMPONENT_NAME$8,
+  name: COMPONENT_NAME$9,
   props: props$6,
   setup(props, { slots }) {
     return () => {
@@ -18195,9 +18300,9 @@ const ThemeView = vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$7 = "vc-theme-text";
+const COMPONENT_NAME$8 = "vc-theme-text";
 const ThemeText = vue.defineComponent({
-  name: COMPONENT_NAME$7,
+  name: COMPONENT_NAME$8,
   props: props$6,
   setup(props, { slots }) {
     return () => {
@@ -18213,9 +18318,9 @@ const ThemeText = vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$6 = "vc-theme-image";
+const COMPONENT_NAME$7 = "vc-theme-image";
 const ThemeImage = vue.defineComponent({
-  name: COMPONENT_NAME$6,
+  name: COMPONENT_NAME$7,
   props: props$6,
   setup(props, { slots }) {
     return () => {
@@ -18263,12 +18368,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 = vue.getCurrentInstance().props;
   const icon = vue.ref('icon');
   const panel = vue.shallowRef({});
@@ -18303,9 +18408,9 @@ const props$4 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$4 = 'vc-timeline';
+const COMPONENT_NAME$5 = 'vc-timeline';
 const Timeline = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$4,
+  name: COMPONENT_NAME$5,
   props: props$4,
   setup(props, {
     slots
@@ -18332,9 +18437,9 @@ const props$3 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$3 = 'vc-touch';
+const COMPONENT_NAME$4 = 'vc-touch';
 const Touch = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$3,
+  name: COMPONENT_NAME$4,
   props: props$3,
   setup(props, {
     slots
@@ -18358,9 +18463,9 @@ const props$2 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$2 = 'vc-tree';
+const COMPONENT_NAME$3 = 'vc-tree';
 const Tree = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$2,
+  name: COMPONENT_NAME$3,
   props: props$2,
   setup(props, {
     slots
@@ -18470,9 +18575,9 @@ const props$1 = {
   }
 };
 
-const COMPONENT_NAME$1 = "vc-upload";
+const COMPONENT_NAME$2 = "vc-upload";
 const Upload = vue.defineComponent({
-  name: COMPONENT_NAME$1,
+  name: COMPONENT_NAME$2,
   props: props$1,
   emits: [
     "message",
@@ -18765,10 +18870,440 @@ 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
+};
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$1 = 'vc-steps';
+const ImageItem = /* @__PURE__ */ vue.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 = vue.getCurrentInstance();
+    const current = vue.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 vue.createVNode("div", {
+        "class": [{
+          'is-error': row.status == 0
+        }, 'vc-upload-image-item']
+      }, [slots.default ? slots.default({
+        it: row,
+        current: current.value
+      }) : vue.createVNode(vue.Fragment, null, [!row.errorFlag && typeof row[props.keyValue.value] === 'string' ? vue.createVNode(Image$1, {
+        "src": row[props.keyValue.value],
+        "class": [props.imageClass, 'vc-upload-image-item__content'],
+        "fit": "cover",
+        "previewable": false,
+        "onClick": handlePreview
+      }, null) : vue.createVNode("div", {
+        "class": [props.imageClass, 'vc-upload-image-item__content']
+      }, [row.percent && row.percent != 100 ? vue.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 ? vue.createVNode("p", {
+        "style": "line-height: 1; padding: 5px"
+      }, [vue.createTextVNode("\u670D\u52A1\u5668\u6B63\u5728\u63A5\u6536...")]) : row.status == 0 ? vue.createVNode("div", {
+        "style": "padding: 5px"
+      }, [vue.createTextVNode("\u4E0A\u4F20\u5931\u8D25")]) : null]), (!props.disabled || row.errorFlag) && vue.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);
+  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 +19312,111 @@ const COMPONENT_NAME = 'vc-upload-picker';
 const UploadPicker = /* @__PURE__ */ vue.defineComponent({
   name: COMPONENT_NAME,
   props: props,
+  emits: ['update:modelValue', 'file-success', 'file-start', 'file-before', 'file-error', '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: 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,
+            "row": item,
+            "disabled": props.disabled,
+            "image-preview-options": props.imagePreviewOptions,
+            "imageClass": props.imageClass,
+            "videoClass": props.videoClass,
+            "audioClass": props.audioClass,
+            "fileClass": props.fileClass,
+            "index": index,
+            "keyValue": props.keyValue,
+            "data": base.currentValue.value[picker.type],
+            "class": "vc-upload-picker__item",
+            "onDelete": () => base.handleDelete(index, picker.type)
+          }, {
+            default: slots.default ? scopeData => {
+              return slots?.default?.({
+                it: scopeData?.it,
+                current: scopeData?.current,
+                index,
+                name: picker.type
+              });
+            } : null
+          });
+        }), 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 +19455,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;