npm - @deot/vc-components - Versions diffs - 1.0.24 → 1.0.26 - Mend

@deot/vc-components 1.0.24 → 1.0.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { reactive, defineComponent, createVNode, ref, watch, getCurrentInstance, computed, TransitionGroup, Transition as Transition$1, h, inject, onMounted, provide, shallowRef, onUnmounted, withDirectives, vShow, createApp, onBeforeUnmount, Fragment as Fragment$1, Teleport, withModifiers, nextTick, isVNode, onBeforeMount, mergeProps, createTextVNode, toRaw, onUpdated, useAttrs as useAttrs$1 } from 'vue';
+import { reactive, defineComponent, createVNode, ref, watch, getCurrentInstance, computed, TransitionGroup, Transition as Transition$1, h, inject, provide, shallowRef, onMounted, onUnmounted, withDirectives, vShow, createApp, onBeforeUnmount, Fragment as Fragment$1, Teleport, withModifiers, nextTick, isVNode, onBeforeMount, mergeProps, createTextVNode, toRaw, onUpdated, useAttrs as useAttrs$1 } from 'vue';
 import { debounce, isEqualWith, pick, startCase, throttle, cloneDeep, max, merge as merge$1, isEmpty as isEmpty$1, kebabCase } from 'lodash-es';
 import { Resize } from '@deot/helper-resize';
 import { Utils as Utils$1, IS_SERVER as IS_SERVER$1 } from '@deot/vc-shared';
@@ -9,6 +9,7 @@ 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 PhotoSwipeLightbox from 'photoswipe/lightbox';
 import { Storage } from '@deot/helper-cache';
 import * as Load from '@deot/helper-load';
 import { style } from '@deot/helper-load';
@@ -80,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
@@ -269,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');
@@ -470,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,
@@ -493,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,
@@ -614,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
@@ -651,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: {
@@ -693,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: {
@@ -735,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: {
@@ -779,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 = {
@@ -789,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,
@@ -888,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
@@ -929,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
@@ -982,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中, 这样可以让所有的事件透传
@@ -1056,16 +1057,16 @@ 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, {
     slots
   }) {
     const vm = getCurrentInstance();
-    const hasSlot = ref(true);
+    const isHover = ref(false);
     const isLoading = ref(false);
     const group = inject('vc-button-group', {
       size: 'medium',
@@ -1074,10 +1075,11 @@ const Button = /* @__PURE__ */ defineComponent({
     });
     const classes = computed(() => ({
       'is-circle': props.circle || group.circle,
-      'is-alone': !hasSlot.value,
+      'is-alone': !slots?.default,
       'is-round': props.round,
       'is-long': props.long,
       'is-disabled': props.disabled,
+      'is-hover': isHover.value,
       [`is-${props.size}`]: true,
       [`is-${props.type}`]: true
     }));
@@ -1090,9 +1092,6 @@ const Button = /* @__PURE__ */ defineComponent({
         });
       }
     };
-    onMounted(() => {
-      hasSlot.value = slots.default !== undefined;
-    });
     return () => {
       return createVNode(Debounce, {
         "tag": props.tag,
@@ -1103,15 +1102,19 @@ const Button = /* @__PURE__ */ defineComponent({
         "wait": props.wait,
         "disabled": props.disabled,
         "type": props.htmlType,
-        "onClick": handleClick
+        "onClick": handleClick,
+        "onMouseenter": () => isHover.value = true,
+        "onMouseleave": () => isHover.value = false
       }, {
         default: () => [props.icon && createVNode(Icon, {
           "type": props.icon
-        }, null), isLoading.value && createVNode(Spin, {
+        }, null), slots.icon && slots?.icon?.({
+          hover: isHover.value
+        }), isLoading.value && createVNode(Spin, {
           "size": 12,
           "foreground": props.type === 'default' ? '#ccc' : '#fff',
           "class": "vc-button__loading"
-        }, null), hasSlot.value && createVNode("span", null, [slots?.default?.()])]
+        }, null), slots?.default && createVNode("span", null, [slots?.default?.()])]
       });
     };
   }
@@ -1138,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
@@ -1174,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
@@ -1214,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
@@ -1252,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
@@ -1278,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
@@ -1349,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, {
@@ -1527,7 +1530,8 @@ const useCheckbox = () => {
       "is-indeterminate": props.indeterminate,
       "is-checked": checked.value,
       "is-disabled": props.disabled,
-      "is-focus": isFocus.value
+      "is-focus": isFocus.value,
+      "is-error": !!formItem?.message?.value
     };
   });
   watch(
@@ -1582,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, {
@@ -1671,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, {
@@ -1691,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, {
@@ -1733,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, {
@@ -1794,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(() => {
@@ -1807,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, {
@@ -1956,7 +1960,7 @@ class PortalLeaf {
   }
 }
-const COMPONENT_NAME$1C = "vc-portal";
+const COMPONENT_NAME$1D = "vc-portal";
 class Portal {
   /**
    * 清理Portals类型组件
@@ -2008,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) {
@@ -2107,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();
@@ -2141,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) {
@@ -2253,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
@@ -2430,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 }));
@@ -2472,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, {
@@ -2576,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 }));
@@ -2610,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 }) {
@@ -2729,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
@@ -2761,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,
@@ -2838,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
@@ -2864,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
@@ -3178,7 +3182,8 @@ const useInput = (input) => {
   const classes = computed(() => {
     return {
       "is-focus": isFocus.value,
-      "is-disabled": props.disabled
+      "is-disabled": props.disabled,
+      "is-error": !!formItem?.message?.value
     };
   });
   const currentMaxlength = computed(() => {
@@ -3315,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$$,
@@ -3651,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, {
@@ -3717,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, {
@@ -4010,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, {
@@ -4262,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, {
@@ -5365,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,
@@ -5431,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: {
@@ -5517,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: {
@@ -5728,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,
@@ -5862,7 +5867,7 @@ const MonthTable = /* @__PURE__ */ defineComponent({
 /** @jsxImportSource vue */
-const COMPONENT_NAME$1j = 'vc-quarter-table';
+const COMPONENT_NAME$1k = 'vc-quarter-table';
 /**
  * 获取季度对应的月份范围
@@ -5896,7 +5901,7 @@ const getQuarterRangeByMonth = value => {
   }
 };
 const QuarterTable = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1j,
+  name: COMPONENT_NAME$1k,
   props: {
     value: Array,
     panelDate: Date,
@@ -6019,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,
@@ -6061,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],
@@ -6342,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,
@@ -6467,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: {
@@ -6848,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,
@@ -7058,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: {
@@ -7235,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: {
@@ -7476,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, {
@@ -7577,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, {
@@ -7634,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;
@@ -7645,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({});
@@ -7678,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
@@ -7835,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',
@@ -7855,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,
@@ -8045,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, {
@@ -8262,7 +8267,7 @@ const useScroller = (expose) => {
 /** @jsxImportSource vue */
-const COMPONENT_NAME$15 = 'vc-scroller';
+const COMPONENT_NAME$16 = 'vc-scroller';
 /**
  * 作为备选方案,目前推荐使用ScrollerWheel
@@ -8273,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, {
@@ -8334,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模拟
@@ -8356,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,
@@ -8545,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, {
@@ -8699,7 +8704,7 @@ const Drawer$ = new Portal(DrawerView, {
   multiple: true
 });
 const destroy$3 = () => Drawer$.destroy();
-const open$1 = (options) => {
+const open$2 = (options) => {
   const leaf = Drawer$.popup({
     ...options,
     onFulfilled: options.onClose,
@@ -8709,7 +8714,7 @@ const open$1 = (options) => {
   leaf.wrapper.toggle?.(true);
   return leaf;
 };
-const Drawer = Object.assign(DrawerView, { open: open$1, destroy: destroy$3 });
+const Drawer = Object.assign(DrawerView, { open: open$2, destroy: destroy$3 });
 const MDrawer = Drawer;
 const MDrawerView = DrawerView;
@@ -8723,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
@@ -8749,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
@@ -8808,7 +8813,7 @@ const useForm = (expose, options = {}) => {
   const instance = getCurrentInstance();
   const props = instance.props;
   const fields = [];
-  provide("form", {
+  provide("vc-form", {
     props,
     add: (field) => {
       field && fields.push(field);
@@ -8895,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);
@@ -8956,8 +8961,7 @@ const props$L = {
     default: false
   },
   labelPosition: {
-    type: String,
-    default: "right"
+    type: String
   },
   contentStyle: [Object, String],
   contentClass: [Object, String],
@@ -8975,7 +8979,7 @@ const toRules = (rules) => {
   return rules instanceof Array ? rules : rules ? [rules] : [];
 };
 const useFormItem = (expose) => {
-  const form = inject("form");
+  const form = inject("vc-form");
   const instance = getCurrentInstance();
   const props = instance.props;
   const { slots } = instance;
@@ -9223,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,
@@ -9290,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, {
@@ -9323,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,
@@ -9379,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?.());
   }
@@ -9398,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
@@ -9418,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 {
@@ -9488,10 +9595,10 @@ const ObjectFit = {
   FILL: 'fill',
   SCALE_DOWN: 'scale-down'
 };
-const Image = /* @__PURE__ */ defineComponent({
+const Image$1 = /* @__PURE__ */ defineComponent({
   name: COMPONENT_NAME$W,
   inheritAttrs: false,
-  props: props$H,
+  props: props$G,
   setup(props, {
     slots,
     emit
@@ -9640,6 +9747,14 @@ const Image = /* @__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;
@@ -9660,7 +9775,9 @@ const Image = /* @__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
@@ -9678,14 +9795,16 @@ const Image = /* @__PURE__ */ 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"
@@ -9697,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
   }) {
@@ -9711,30 +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 = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$U,
-  props: props$F,
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      return createVNode("div", {
-        "class": "vc-image-preview"
-      }, [slots?.default?.()]);
-    };
-  }
-});
 const MImagePreview = ImagePreview;
 const props$E = {
@@ -9746,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
@@ -9765,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$$,
@@ -9856,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, {
@@ -9907,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: {
@@ -9986,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 });
@@ -10043,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, {
@@ -10140,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
@@ -10212,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 }) {
@@ -10341,9 +10436,8 @@ const props$z = {
     type: [String, Boolean],
     default: "取消"
   },
-  wrapperStyle: {
-    type: [String, Object]
-  },
+  wrapperStyle: [String, Object],
+  wrapperClass: [String, Object],
   footer: {
     type: Boolean,
     default: true
@@ -10373,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, {
@@ -10397,6 +10491,7 @@ const ModalView = /* @__PURE__ */ defineComponent({
     // 注: 服务端渲染为0, 在客服端激活前，展示端存在问题【高度不定】
     const MAX_HEIGHT = IS_SERVER$1 ? 0 : window.innerHeight - 20;
+    const MAX_WIDTH = IS_SERVER$1 ? 0 : window.innerWidth - 20;
     const defaultSize = computed(() => {
       let width = 0;
       let height = 0;
@@ -10415,7 +10510,7 @@ const ModalView = /* @__PURE__ */ defineComponent({
           break;
       }
       return {
-        width: props.width || width,
+        width: Math.min(props.width || width, MAX_WIDTH),
         height: Math.min(props.height || height, MAX_HEIGHT)
       };
     });
@@ -10651,7 +10746,7 @@ const ModalView = /* @__PURE__ */ defineComponent({
         "style": [props.wrapperStyle || {}, props.draggable ? {
           top: 0
         } : {}],
-        "class": "vc-modal__wrapper",
+        "class": [props.wrapperClass, 'vc-modal__wrapper'],
         "onClick": e => handleClose(e, false)
       }, [createVNode(TransitionScale, {
         "mode": "part",
@@ -10814,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, {
@@ -11028,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, {
@@ -11203,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
@@ -11318,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, {
@@ -11389,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
@@ -11464,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
@@ -11564,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, {
@@ -11813,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, {
@@ -12013,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
@@ -12039,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
@@ -12067,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
@@ -12096,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,
@@ -12200,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
@@ -12262,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(() => {
@@ -12311,15 +12406,19 @@ 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
   }) {
+    const currentPercent = computed(() => {
+      const v = Number(props.percent);
+      return v >= 100 ? 100 : v;
+    });
     const currentStatus = computed(() => {
-      if (Number(props.percent) >= 100) {
+      if (currentPercent.value === 100) {
         return 'success';
       }
       return props.status;
@@ -12331,6 +12430,7 @@ const Progress = /* @__PURE__ */ defineComponent({
     const binds = computed(() => {
       return {
         ...props,
+        percent: currentPercent.value,
         status: currentStatus.value,
         color: currentColor.value
       };
@@ -12408,7 +12508,8 @@ const useRadio = () => {
     return {
       "is-checked": checked.value,
       "is-disabled": isDisabled.value,
-      "is-focus": isFocus.value
+      "is-focus": isFocus.value,
+      "is-error": !!formItem?.message?.value
     };
   });
   watch(
@@ -12465,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, {
@@ -12578,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, {
@@ -12592,8 +12693,7 @@ const RadioGroup = /* @__PURE__ */ defineComponent({
     return () => {
       if (props.fragment) return slots.default?.();
       return createVNode("div", {
-        "class": "vc-radio-group",
-        "style": classes.value,
+        "class": [classes.value, 'vc-radio-group'],
         "name": props.name
       }, [slots?.default?.()]);
     };
@@ -12602,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, {
@@ -12645,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, {
@@ -12676,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
@@ -12746,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
   }) {
@@ -12878,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, {
@@ -12981,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, {
@@ -13555,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
@@ -13581,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
@@ -13607,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
@@ -13722,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'],
@@ -13761,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'],
@@ -14876,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,
@@ -15718,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, {
@@ -16355,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
@@ -16913,7 +17013,11 @@ const props$a = {
   closable: {
     type: Boolean,
     default: false
-  }
+  },
+  barStyle: [Object, String],
+  contentStyle: [Object, String],
+  barClass: [Object, String],
+  contentClass: [Object, String]
 };
 const useTabs = (options = {}) => {
@@ -17048,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, {
@@ -17166,10 +17270,10 @@ const Tabs = /* @__PURE__ */ defineComponent({
         "class": "vc-tabs__extra"
       }, [slots.extra?.()]), createVNode("div", {
         "ref": wrapper,
-        "style": {
+        "style": [props.barStyle, {
           padding: tabs.scrollable.value ? '0 24px' : 0
-        },
-        "class": "vc-tabs__bar"
+        }],
+        "class": [props.barClass, 'vc-tabs__bar']
       }, [tabs.scrollable.value && createVNode(Icon, {
         "class": "vc-tabs__icon is-left",
         "type": "left",
@@ -17209,8 +17313,8 @@ const Tabs = /* @__PURE__ */ defineComponent({
         }, null)]);
       })])])]), createVNode("div", {
         "ref": content,
-        "style": tabs.contentStyle.value,
-        "class": "vc-tabs__content"
+        "style": [props.contentStyle, tabs.contentStyle.value],
+        "class": [props.contentClass, 'vc-tabs__content']
       }, [slots.default?.()])]);
     };
   }
@@ -17298,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
@@ -17355,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, {
@@ -17622,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
@@ -17825,7 +17929,8 @@ const useTextarea = (textarea, expose) => {
   const classes = computed(() => {
     return {
       "is-focus": isFocus.value,
-      "is-disabled": props.disabled
+      "is-disabled": props.disabled,
+      "is-error": !!formItem?.message?.value
     };
   });
   const listeners = computed(() => {
@@ -17924,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],
@@ -17982,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,
@@ -18067,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");
@@ -18155,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 () => {
@@ -18173,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 () => {
@@ -18191,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 () => {
@@ -18241,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({});
@@ -18281,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
@@ -18310,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
@@ -18336,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
@@ -18448,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",
@@ -18743,10 +18848,440 @@ const Upload = defineComponent({
 const MUpload = Upload;
 const props = {
-  tag: {
-    type: String,
-    default: "div"
+  picker: {
+    type: Array,
+    default: () => ["image"]
+  },
+  sortable: {
+    type: Boolean,
+    default: false
+  },
+  mask: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * vc-upload组件的属性
+   */
+  uploadOptions: {
+    type: Object,
+    default() {
+      return {};
+    }
+  },
+  /**
+   * 数据源['xxx.jpg', ....]
+   */
+  modelValue: {
+    type: [String, Array, Object],
+    // { value: '', label: '' }
+    default: () => []
+  },
+  // 数据字典
+  keyValue: {
+    type: Object,
+    default: () => {
+      return {
+        label: "label",
+        value: "value"
+      };
+    }
+  },
+  output: {
+    type: [String, Function],
+    default: "object",
+    validator: (v) => /(string|object)/.test(v)
+  },
+  /**
+   * 可上传的最大值,跟upload内的Max不同，有可能是对象类型，对应的Upload做限制
+   */
+  max: {
+    type: [Number, Object],
+    default: Number.MAX_SAFE_INTEGER
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 上传成功后对数据的格式化
+   */
+  formatter: Function,
+  // TODO 下面两个重复了，需删除
+  /**
+   * 盒子className
+   */
+  boxClass: String,
+  imagePreviewOptions: {
+    type: Object,
+    default: () => ({})
+  },
+  imageClass: String,
+  videoClass: String,
+  audioClass: String,
+  fileClass: String,
+  compressOptions: {
+    type: Object,
+    default: () => {
+      return {
+        compress: false,
+        // 是否开启图片压缩
+        width: 0,
+        // 图片缩放最大宽度，为0默认源图片宽度
+        height: 0,
+        // 图片缩放最大高度，为0默认源图片高度
+        filetype: "image/jpeg",
+        // 文件类型
+        encoderOptions: 0.92
+        // 在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，使用默认值 0.92
+      };
+    }
+  },
+  showMessage: Boolean,
+  gallery: Boolean
+};
+/** @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);
+  return result && result.length ? /.(jpe?g|png|gif|bmp|webp|image|heic)/ig.test(result[result.length - 1]) ? "image" : "video" : "file";
+};
+const FILE_ACCEPT_MAP = {
+  DOC_ACCEPTS: ".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  EXCEL_ACCEPTS: ".csv,.xls,.xlsx,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  PPT_ACCEPTS: ".ppt,.pptx,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  PDF_ACCEPTS: ".pdf,application/pdf",
+  TXT_ACCEPTS: "text/plain",
+  HTML_ACCEPTS: "text/html"
+};
+const {
+  DOC_ACCEPTS,
+  EXCEL_ACCEPTS,
+  PPT_ACCEPTS,
+  PDF_ACCEPTS,
+  TXT_ACCEPTS,
+  HTML_ACCEPTS
+} = FILE_ACCEPT_MAP;
+const usePicker = (expose) => {
+  const instance = getCurrentInstance();
+  const props = instance.props;
+  const { emit } = instance;
+  const formItem = inject("vc-form-item", {});
+  const allowKeepString = computed(() => {
+    return typeof props.modelValue === "string";
+  });
+  const allowKeepObject = computed(() => {
+    const v = props.modelValue;
+    return props.output === "object" && props.max === 1 && !Array.isArray(v) && typeof v === "object";
+  });
+  const currentValue = ref({
+    image: [],
+    video: [],
+    audio: [],
+    file: []
+  });
+  const currentUploadOptions = ref({
+    image: {
+      accept: "image/gif,image/jpeg,image/jpg,image/png",
+      ...props.uploadOptions.image || {}
+    },
+    video: {
+      accept: "video/*",
+      ...props.uploadOptions.video || {}
+    },
+    audio: {
+      accept: "audio/*",
+      ...props.uploadOptions.audio || {}
+    },
+    file: {
+      accept: `${DOC_ACCEPTS},${EXCEL_ACCEPTS},${PPT_ACCEPTS},${PDF_ACCEPTS},${TXT_ACCEPTS},${HTML_ACCEPTS}`,
+      ...props.uploadOptions.file || {}
+    }
+  });
+  const dynamicMax = computed(() => {
+    const image = currentValue.value.image || [];
+    const video = currentValue.value.video || [];
+    const audio = currentValue.value.audio || [];
+    const file = currentValue.value.file || [];
+    const imageCount = image.length || 0;
+    const videoCount = video.length || 0;
+    const audioCount = audio.length || 0;
+    const fileCount = file.length || 0;
+    if (typeof props.max === "number") {
+      const curNum = imageCount + videoCount + audioCount + fileCount;
+      const leftNum = props.max - curNum;
+      return {
+        image: leftNum,
+        video: leftNum,
+        audio: leftNum,
+        file: leftNum
+      };
+    } else if (typeof props.max === "object") {
+      const {
+        image: $image,
+        video: $video,
+        audio: $audio,
+        file: $file
+      } = props.max;
+      const max = {};
+      $image && (max.image = $image - imageCount);
+      $video && (max.video = $video - videoCount);
+      $audio && (max.audio = $audio - audioCount);
+      $file && (max.file = $file - fileCount);
+      return max;
+    }
+    return {};
+  });
+  const sync = () => {
+    let v = props.picker.reduce((pre, cur) => pre.concat(currentValue.value[cur] || []), []).filter((i) => !i.errorFlag).map((i) => {
+      if (props.output === "string") return i[props.keyValue.value];
+      if (typeof props.output === "function") return props.output(i) || i;
+      return i;
+    });
+    if (allowKeepString.value) {
+      v = v.map((i) => i[props.keyValue.value] || i).join(",");
+    } else if (allowKeepObject.value) {
+      v = v[0] || null;
+    }
+    emit("update:modelValue", v);
+    emit("change", v);
+    formItem.change?.(v);
+  };
+  const handleFileBefore = async (vFile, fileList, type) => {
+    if (props?.compressOptions?.compress && type === "image") ;
+    const onFileBefore = instance.vnode.props?.onFileBefore || (() => {
+    });
+    return await onFileBefore(vFile, fileList, type) || vFile;
+  };
+  const handleFileStart = (vFile, type) => {
+    currentValue.value[type].push(vFile);
+    emit("file-start", vFile, type);
+  };
+  const handleFileProgress = (e, vFile, type) => {
+    if (parseInt(e.percent, 10) <= 100) {
+      currentValue.value[type] = currentValue.value[type].map((item) => {
+        if (vFile.uploadId === item.uploadId) {
+          return {
+            ...item,
+            percent: e.percent
+          };
+        }
+        return item;
+      });
+    }
+  };
+  const handleFileSuccess = (response, vFile, cycle, type) => {
+    currentValue.value[type] = currentValue.value[type].map((item) => {
+      if (item.uploadId === vFile.uploadId) {
+        return {
+          type,
+          [props.keyValue.label]: vFile.name,
+          // 外部需要满足response中带source
+          [props.keyValue.value]: response.source
+        };
+      }
+      return item;
+    });
+    emit("file-success", response, vFile, cycle, type);
+  };
+  const handleError = (err, type) => {
+    props.showMessage && err.message && Message.error(err.message);
+    emit("error", err, type);
+  };
+  const handleFileError = (response, vFile, cycle, type) => {
+    currentValue.value[type] = currentValue.value[type].map((item) => {
+      if (item.uploadId === vFile.uploadId) {
+        return {
+          ...item,
+          ...response,
+          // 文件基础信息
+          type,
+          [props.keyValue.label]: vFile.name,
+          errorFlag: (/* @__PURE__ */ new Date()).getTime()
+        };
+      }
+      return item;
+    });
+    emit("file-error", response, vFile, cycle, type);
+  };
+  const handleFileComplete = (response, type) => {
+    sync();
+    emit("complete", response, type);
+  };
+  const handleDelete = async (index, type) => {
+    const onRemoveBefore = instance.vnode.props?.onRemoveBefore || (() => {
+    });
+    await onRemoveBefore(index, type);
+    const target = currentValue.value[type];
+    const item = target[index];
+    if (!item) {
+      console.error("【vc-upload-picker】: 没有找到要删除的元素");
+      return;
+    }
+    if (item.errorFlag) {
+      currentValue.value[type] = target.filter(
+        (it) => it.uploadId != item.uploadId
+      );
+      return;
+    }
+    target.splice(index, 1);
+    sync();
+  };
+  const parseModelValue = (v) => {
+    const initialData = { image: [], video: [], audio: [], file: [] };
+    if (allowKeepString.value) {
+      v = (props.max === 1 ? [v] : v.split(",")).filter((i) => !!i);
+    } else if (allowKeepObject.value) {
+      v = [v].filter((i) => i && !!i[props.keyValue.value]);
+    }
+    if (!Array.isArray(v) || !v.length) return initialData;
+    return v.reduce((pre, cur) => {
+      const value = cur[props.keyValue.value] || (typeof cur === "object" ? "" : cur);
+      const label = cur[props.keyValue.label] || value.replace(/^.*\/([^/]+)$/, "$1");
+      const type = cur.type || (props.picker.length === 1 ? props.picker[0] : recognizer(value));
+      switch (type) {
+        case "image":
+        case "video":
+        case "audio":
+        case "file":
+          pre[type].push({
+            // 文件类型
+            type,
+            // 文件名
+            [props.keyValue.label]: label,
+            // 源文件地址
+            [props.keyValue.value]: value,
+            // 上传进度
+            percent: null,
+            // 错误标记
+            errorFlag: false
+          });
+          return pre;
+        default:
+          return pre;
+      }
+    }, initialData);
+  };
+  watch(
+    () => props.modelValue,
+    (v) => {
+      currentValue.value = parseModelValue(v);
+    },
+    { immediate: true }
+  );
+  expose();
+  return {
+    currentValue,
+    currentUploadOptions,
+    dynamicMax,
+    handleDelete,
+    handleFileBefore,
+    handleFileStart,
+    handleFileProgress,
+    handleFileSuccess,
+    handleFileError,
+    handleError,
+    handleFileComplete
+  };
 };
 /** @jsxImportSource vue */
@@ -18755,17 +19290,115 @@ const COMPONENT_NAME = 'vc-upload-picker';
 const UploadPicker = /* @__PURE__ */ 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 = getCurrentInstance();
+    const currentPicker = 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 createVNode("div", {
         "class": "vc-upload-picker"
-      }, [slots?.default?.()]);
+      }, [currentPicker.value.map((picker, $index) => {
+        return createVNode(Fragment$1, {
+          "key": `${picker}-${$index}`
+        }, [base.currentValue.value[picker.type].map((item, index) => {
+          const Item = picker.item;
+          return createVNode(Item, {
+            "key": typeof item === 'object' ? item.uid : item,
+            "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
+          });
+        }), withDirectives(createVNode(Upload, mergeProps(base.currentUploadOptions.value[picker.type], {
+          "max": base.dynamicMax[picker.type],
+          "class": "vc-upload-picker__upload",
+          "onFileBefore": (vFile, fileList) => base.handleFileBefore(vFile, fileList, picker.type),
+          "onFileStart": vFile => base.handleFileStart(vFile, picker.type),
+          "onFileProgress": (e, vFile) => base.handleFileProgress(e, vFile, picker.type),
+          "onFileSuccess": (response, vFile, cycle) => base.handleFileSuccess(response, vFile, cycle, picker.type),
+          "onFileError": (response, vFile, cycle) => base.handleFileError(response, vFile, cycle, picker.type),
+          "onError": e => base.handleError(e, picker.type),
+          "onComplete": response => base.handleFileComplete(response, picker.type)
+        }), {
+          default: () => [slots?.[`${picker.type}-upload`] ? slots[`${picker.type}-upload`]?.() : createVNode("div", {
+            "class": [props.boxClass, 'vc-upload-picker__box'],
+            "onClick": e => handleClick(e, picker.type)
+          }, [createVNode(Icon, {
+            "type": "mini-plus",
+            "class": "vc-upload-picker__plus-icon"
+          }, null), createVNode("span", {
+            "style": "margin-top: 8px"
+          }, [createTextVNode("\u4E0A\u4F20")])])]
+        }), [[vShow, !props.disabled && base.dynamicMax.value[picker.type] >= 1]])]);
+      })]);
     };
   }
 });
 const MUploadPicker = UploadPicker;
-export { ActionSheet, Alert, Artboard, Button, ButtonGroup, Calendar, Card, Carousel, Cascader, Chart, Checkbox, CheckboxGroup, Clipboard, Collapse, CollapseItem, ColorPicker, Countdown, Customer, DatePicker, Debounce, Divider, Drawer, DrawerView, Dropdown, Editor, Expand$1 as Expand, Form, FormItem, Fragment, HTMLToImage, Icon, IconManager, Image, ImageCrop, ImagePreview, ImageProcessing, Input, InputNumber, InputSearch, MList as List, MListItem as ListItem, MActionSheet, MAlert, MArtboard, MButton, MButtonGroup, MCalendar, MCard, MCarousel, MCascader, MChart, MCheckbox, MCheckboxGroup, MClipboard, MCollapse, MCollapseItem, MColorPicker, MCountdown, MCustomer, MDatePicker, Debounce as MDebounce, MDivider, MDrawer, MDrawerView, MDropdown, MEditor, MExpand, MForm, MFormItem, MFragment, MHTMLToImage, MIcon, MImage, MImageCrop, MImagePreview, MImageProcessing, MInput, MInputNumber, MInputSearch, MList, MListItem, MMarquee, MMessage, modal as MModal, MModalView, MNotice, MOption, MPagination, MPicker, MPopconfirm, MPopover, MPopup, MPortal, MPrint, MProgress, MRadio, MRadioGroup, MRate, MRecycleList, MResizer, MScroller, MSelect, MSlider, MSortList, MSpin, MSteps, MSwitch, MTable, MTableColumn, MTabs, MTabsPane, MTag, MText, MTextarea, MTimePicker, MTimeline, MToast, MToastView, MTouch, MTransition, MTransitionCollapse, MTransitionFade, MTransitionScale, MTransitionSlide, MTransitionZoom, MTree, MUpload, MUploadPicker, Marquee, Message, MessageView, Modal, ModalView, Notice, NoticeView, Option$1 as Option, Pagination, Picker, Popconfirm, Popover, Popup, Portal, PortalView, Print, Progress, Radio, RadioGroup, Rate, RecycleList, Resizer, Scroller, ScrollerWheel, Select, Slider, SortList, Spin, Steps, Switch, Table, TableColumn, Tabs, TabsPane, Tag, Text, Textarea, Theme, ThemeImage, ThemeText, ThemeView, TimePicker, Timeline, Toast, ToastView, Touch, Transition, TransitionCollapse, TransitionFade, TransitionScale, TransitionSlide, TransitionZoom, Tree, Upload, UploadPicker, VcError, VcInstance };
+export { ActionSheet, Alert, Artboard, Button, ButtonGroup, Calendar, Card, Carousel, Cascader, Chart, Checkbox, CheckboxGroup, Clipboard, Collapse, CollapseItem, ColorPicker, Countdown, Customer, DatePicker, Debounce, Divider, Drawer, DrawerView, Dropdown, Editor, Expand$1 as Expand, Form, FormItem, Fragment, HTMLToImage, Icon, IconManager, Image$1 as Image, ImageCrop, ImagePreview, ImageProcessing, Input, InputNumber, InputSearch, MList as List, MListItem as ListItem, MActionSheet, MAlert, MArtboard, MButton, MButtonGroup, MCalendar, MCard, MCarousel, MCascader, MChart, MCheckbox, MCheckboxGroup, MClipboard, MCollapse, MCollapseItem, MColorPicker, MCountdown, MCustomer, MDatePicker, Debounce as MDebounce, MDivider, MDrawer, MDrawerView, MDropdown, MEditor, MExpand, MForm, MFormItem, MFragment, MHTMLToImage, MIcon, MImage, MImageCrop, MImagePreview, MImageProcessing, MInput, MInputNumber, MInputSearch, MList, MListItem, MMarquee, MMessage, modal as MModal, MModalView, MNotice, MOption, MPagination, MPicker, MPopconfirm, MPopover, MPopup, MPortal, MPrint, MProgress, MRadio, MRadioGroup, MRate, MRecycleList, MResizer, MScroller, MSelect, MSlider, MSortList, MSpin, MSteps, MSwitch, MTable, MTableColumn, MTabs, MTabsPane, MTag, MText, MTextarea, MTimePicker, MTimeline, MToast, MToastView, MTouch, MTransition, MTransitionCollapse, MTransitionFade, MTransitionScale, MTransitionSlide, MTransitionZoom, MTree, MUpload, MUploadPicker, Marquee, Message, MessageView, Modal, ModalView, Notice, NoticeView, Option$1 as Option, Pagination, Picker, Popconfirm, Popover, Popup, Portal, PortalView, Print, Progress, Radio, RadioGroup, Rate, RecycleList, Resizer, Scroller, ScrollerWheel, Select, Slider, SortList, Spin, Steps, Switch, Table, TableColumn, Tabs, TabsPane, Tag, Text, Textarea, Theme, ThemeImage, ThemeText, ThemeView, TimePicker, Timeline, Toast, ToastView, Touch, Transition, TransitionCollapse, TransitionFade, TransitionScale, TransitionSlide, TransitionZoom, Tree, Upload, UploadPicker, VcError, VcInstance };