@deot/vc-components 1.0.6 → 1.0.7

package/dist/index.js

@@ -1,13 +1,13 @@
-import { reactive, defineComponent, createVNode, ref, watch, getCurrentInstance, computed, TransitionGroup, Transition as Transition$1, h, inject, onMounted, provide, shallowRef, onUnmounted, onBeforeUnmount, toRaw, withDirectives, vShow, withModifiers, createApp, Fragment as Fragment$1, Teleport, createTextVNode, mergeProps, nextTick, onUpdated, isVNode, onBeforeMount } from 'vue';
+import { reactive, defineComponent, createVNode, ref, watch, getCurrentInstance, computed, TransitionGroup, Transition as Transition$1, h, inject, onMounted, provide, shallowRef, onUnmounted, nextTick, withDirectives, vShow, isVNode, onBeforeMount, onBeforeUnmount, createApp, Fragment as Fragment$1, Teleport, toRaw, withModifiers, createTextVNode, mergeProps, onUpdated } from 'vue';
 import { debounce, cloneDeep, throttle, pick, kebabCase } from 'lodash-es';
 import { Resize } from '@deot/helper-resize';
 import * as Utils from '@deot/helper-utils';
 import { getPropByPath, getUid, raf, throttle as throttle$1 } from '@deot/helper-utils';
-import { Validator } from '@deot/helper-validator';
-import { Utils as Utils$1, IS_SERVER as IS_SERVER$1 } from '@deot/vc-shared';
 import * as $ from '@deot/helper-dom';
 import { composedPath } from '@deot/helper-dom';
-import { useAttrs, useScrollbar, getInstance } from '@deot/vc-hooks';
+import { Utils as Utils$1, IS_SERVER as IS_SERVER$1 } from '@deot/vc-shared';
+import { useScrollbar, useAttrs, getInstance } from '@deot/vc-hooks';
+import { Validator } from '@deot/helper-validator';
 import { Storage } from '@deot/helper-cache';
 import { Interrupter } from '@deot/helper-scheduler';
 import { Wheel } from '@deot/helper-wheel';
@@ -57,7 +57,7 @@ class Instance {
 }
 const VcInstance = new Instance();
 
-const props$1h = {
+const props$1j = {
   tag: {
     type: String,
     default: "div"
@@ -66,10 +66,10 @@ const props$1h = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1x = 'vc-action-sheet';
+const COMPONENT_NAME$1A = 'vc-action-sheet';
 const ActionSheet = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1x,
-  props: props$1h,
+  name: COMPONENT_NAME$1A,
+  props: props$1j,
   setup(props, {
     slots
   }) {
@@ -83,7 +83,7 @@ const ActionSheet = /* @__PURE__ */ defineComponent({
 
 const MActionSheet = ActionSheet;
 
-const props$1g = {
+const props$1i = {
   modelValue: {
     type: Boolean,
     default: true
@@ -110,7 +110,7 @@ const props$1g = {
   }
 };
 
-const props$1f = {
+const props$1h = {
   type: String,
   inherit: {
     type: Boolean,
@@ -163,7 +163,7 @@ class Manager {
             icons = await this.parser(data, url);
             try {
               window.localStorage.setItem(key, JSON.stringify(icons));
-            } catch (e) {
+            } catch {
               setTimeout(() => {
                 this.clearResource();
                 window.localStorage.setItem(key, JSON.stringify(icons));
@@ -255,10 +255,10 @@ const IconManager = new Manager();
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1w = 'vc-icon';
+const COMPONENT_NAME$1z = 'vc-icon';
 const Icon = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1w,
-  props: props$1f,
+  name: COMPONENT_NAME$1z,
+  props: props$1h,
   setup(props) {
     const viewBox = ref('0 0 1024 1024');
     const path = ref([]);
@@ -291,7 +291,7 @@ const Icon = /* @__PURE__ */ defineComponent({
   }
 });
 
-const props$1e = {
+const props$1g = {
   /**
    * 进入/离开持续时间
    * {enter: 300, leave: 300}
@@ -456,10 +456,10 @@ const useTransition = () => {
   };
 };
 
-const COMPONENT_NAME$1v = "vc-transition";
+const COMPONENT_NAME$1y = "vc-transition";
 const Transition = defineComponent({
-  name: COMPONENT_NAME$1v,
-  props: props$1e,
+  name: COMPONENT_NAME$1y,
+  props: props$1g,
   // 当不声明emits的情况下，事件存在于attrs中
   inheritAttrs: false,
   setup(props, { slots, attrs }) {
@@ -479,10 +479,10 @@ const Transition = defineComponent({
   }
 });
 
-const COMPONENT_NAME$1u = "vc-transition-collapse";
+const COMPONENT_NAME$1x = "vc-transition-collapse";
 const TransitionCollapse = defineComponent({
-  name: COMPONENT_NAME$1u,
-  props: props$1e,
+  name: COMPONENT_NAME$1x,
+  props: props$1g,
   // 当不声明emits的情况下，事件存在于attrs中
   inheritAttrs: false,
   setup(props, { slots, attrs: _attrs }) {
@@ -600,11 +600,11 @@ const TransitionCollapse = defineComponent({
   }
 });
 
-const COMPONENT_NAME$1t = "vc-transition-fade";
+const COMPONENT_NAME$1w = "vc-transition-fade";
 const TransitionFade = defineComponent({
-  name: COMPONENT_NAME$1t,
+  name: COMPONENT_NAME$1w,
   props: {
-    ...props$1e,
+    ...props$1g,
     // inheritAttrs必须是false
     style: {
       type: Object,
@@ -637,11 +637,11 @@ const TransitionFade = defineComponent({
   }
 });
 
-const COMPONENT_NAME$1s = "vc-transition-scale";
+const COMPONENT_NAME$1v = "vc-transition-scale";
 const TransitionScale = defineComponent({
-  name: COMPONENT_NAME$1s,
+  name: COMPONENT_NAME$1v,
   props: {
-    ...props$1e,
+    ...props$1g,
     mode: {
       type: String,
       default: "both",
@@ -679,15 +679,15 @@ const TransitionScale = defineComponent({
   }
 });
 
-const COMPONENT_NAME$1r = "vc-transition-slide";
+const COMPONENT_NAME$1u = "vc-transition-slide";
 const TransitionSlide = defineComponent({
-  name: COMPONENT_NAME$1r,
+  name: COMPONENT_NAME$1u,
   props: {
-    ...props$1e,
+    ...props$1g,
     mode: {
       type: String,
       default: "left",
-      validator: (v) => /^(left|right|down|up|none)(|-part)$/.test(v)
+      validator: (v) => /^(left|right|top|bottom|none)(|-part)$/.test(v)
     },
     // inheritAttrs必须是false
     style: {
@@ -721,11 +721,11 @@ const TransitionSlide = defineComponent({
   }
 });
 
-const COMPONENT_NAME$1q = "vc-transition-zoom";
+const COMPONENT_NAME$1t = "vc-transition-zoom";
 const TransitionZoom = defineComponent({
-  name: COMPONENT_NAME$1q,
+  name: COMPONENT_NAME$1t,
   props: {
-    ...props$1e,
+    ...props$1g,
     mode: {
       type: String,
       default: "x",
@@ -765,7 +765,7 @@ const TransitionZoom = defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1p = 'vc-alert';
+const COMPONENT_NAME$1s = 'vc-alert';
 
 // [color, borderColor, backgroundColor], -> CSS
 const THEME_MAP = {
@@ -775,8 +775,8 @@ const THEME_MAP = {
   warning: ['#ffbf00', '#ffe58f', '#fffbe6']
 };
 const Alert = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1p,
-  props: props$1g,
+  name: COMPONENT_NAME$1s,
+  props: props$1i,
   setup(props, {
     slots,
     emit
@@ -865,7 +865,7 @@ const Alert = /* @__PURE__ */ defineComponent({
 
 const MAlert = Alert;
 
-const props$1d = {
+const props$1f = {
   tag: {
     type: String,
     default: "div"
@@ -874,10 +874,10 @@ const props$1d = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1o = 'vc-artboard';
+const COMPONENT_NAME$1r = 'vc-artboard';
 const Artboard = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1o,
-  props: props$1d,
+  name: COMPONENT_NAME$1r,
+  props: props$1f,
   setup(props, {
     slots
   }) {
@@ -891,7 +891,7 @@ const Artboard = /* @__PURE__ */ defineComponent({
 
 const MArtboard = Artboard;
 
-const props$1c = {
+const props$1e = {
   size: {
     type: Number,
     default: 28
@@ -915,10 +915,10 @@ const props$1c = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1n = 'vc-spin';
+const COMPONENT_NAME$1q = 'vc-spin';
 const Spin = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1n,
-  props: props$1c,
+  name: COMPONENT_NAME$1q,
+  props: props$1e,
   setup(props, {
     slots
   }) {
@@ -952,7 +952,7 @@ const Spin = /* @__PURE__ */ defineComponent({
   }
 });
 
-const props$1b = {
+const props$1d = {
   wait: {
     type: Number,
     default: 250
@@ -968,10 +968,10 @@ const props$1b = {
   exclude: RegExp
 };
 
-const COMPONENT_NAME$1m = "vc-debounce";
+const COMPONENT_NAME$1p = "vc-debounce";
 const Debounce = defineComponent({
-  name: COMPONENT_NAME$1m,
-  props: props$1b,
+  name: COMPONENT_NAME$1p,
+  props: props$1d,
   /**
    * 不声明emits使得事件被透传放入attrs中, 这样可以让所有的事件透传
    * 如事件onClick
@@ -1012,7 +1012,7 @@ const Debounce = defineComponent({
   }
 });
 
-const props$1a = {
+const props$1c = {
   tag: {
     type: String,
     default: "button"
@@ -1042,18 +1042,18 @@ const props$1a = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1l = 'vc-button';
+const COMPONENT_NAME$1o = 'vc-button';
 const Button = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1l,
+  name: COMPONENT_NAME$1o,
   emits: ['click'],
-  props: props$1a,
+  props: props$1c,
   setup(props, {
     slots
   }) {
     const vm = getCurrentInstance();
     const hasSlot = ref(true);
     const isLoading = ref(false);
-    const group = inject('button-group', {
+    const group = inject('vc-button-group', {
       size: 'medium',
       vertical: false,
       circle: false
@@ -1103,7 +1103,7 @@ const Button = /* @__PURE__ */ defineComponent({
   }
 });
 
-const props$19 = {
+const props$1b = {
   vertical: {
     type: Boolean,
     default: false
@@ -1124,14 +1124,14 @@ const props$19 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1k = 'vc-button-group';
+const COMPONENT_NAME$1n = 'vc-button-group';
 const ButtonGroup = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1k,
-  props: props$19,
+  name: COMPONENT_NAME$1n,
+  props: props$1b,
   setup(props, {
     slots
   }) {
-    provide('button-group', props);
+    provide('vc-button-group', props);
     const classes = computed(() => ({
       'is-vertical': props.vertical,
       'is-circle': props.circle,
@@ -1151,7 +1151,7 @@ const ButtonGroup = /* @__PURE__ */ defineComponent({
 const MButton = Button;
 const MButtonGroup = ButtonGroup;
 
-const props$18 = {
+const props$1a = {
   tag: {
     type: String,
     default: "div"
@@ -1160,10 +1160,10 @@ const props$18 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1j = 'vc-calendar';
+const COMPONENT_NAME$1m = 'vc-calendar';
 const Calendar = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1j,
-  props: props$18,
+  name: COMPONENT_NAME$1m,
+  props: props$1a,
   setup(props, {
     slots
   }) {
@@ -1177,7 +1177,7 @@ const Calendar = /* @__PURE__ */ defineComponent({
 
 const MCalendar = Calendar;
 
-const props$17 = {
+const props$19 = {
   border: {
     type: Boolean,
     default: true
@@ -1200,10 +1200,10 @@ const props$17 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1i = 'vc-card';
+const COMPONENT_NAME$1l = 'vc-card';
 const Card = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1i,
-  props: props$17,
+  name: COMPONENT_NAME$1l,
+  props: props$19,
   setup(props, {
     slots
   }) {
@@ -1229,7 +1229,7 @@ const Card = /* @__PURE__ */ defineComponent({
 
 const MCard = Card;
 
-const props$16 = {
+const props$18 = {
   tag: {
     type: String,
     default: "div"
@@ -1238,10 +1238,10 @@ const props$16 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1h = 'vc-carousel';
+const COMPONENT_NAME$1k = 'vc-carousel';
 const Carousel = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1h,
-  props: props$16,
+  name: COMPONENT_NAME$1k,
+  props: props$18,
   setup(props, {
     slots
   }) {
@@ -1255,7 +1255,7 @@ const Carousel = /* @__PURE__ */ defineComponent({
 
 const MCarousel = Carousel;
 
-const props$15 = {
+const props$17 = {
   tag: {
     type: String,
     default: "div"
@@ -1264,10 +1264,10 @@ const props$15 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1g = 'vc-cascader';
+const COMPONENT_NAME$1j = 'vc-cascader';
 const Cascader = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1g,
-  props: props$15,
+  name: COMPONENT_NAME$1j,
+  props: props$17,
   setup(props, {
     slots
   }) {
@@ -1320,7 +1320,7 @@ const EVENTS = [
   "contextmenu"
 ];
 
-const props$14 = {
+const props$16 = {
   options: Object,
   pluginOptions: Object,
   theme: [String, Object],
@@ -1332,10 +1332,10 @@ const props$14 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1f = 'vc-chart';
+const COMPONENT_NAME$1i = 'vc-chart';
 const Chart = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1f,
-  props: props$14,
+  name: COMPONENT_NAME$1i,
+  props: props$16,
   emits: [...EVENTS, 'ready'],
   setup(props, {
     emit,
@@ -1449,7 +1449,7 @@ const Chart = /* @__PURE__ */ defineComponent({
 
 const MChart = Chart;
 
-const props$13 = {
+const props$15 = {
   tag: {
     type: String,
     default: "div"
@@ -1458,10 +1458,10 @@ const props$13 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1e = 'vc-checkbox';
+const COMPONENT_NAME$1h = 'vc-checkbox';
 const Checkbox = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1e,
-  props: props$13,
+  name: COMPONENT_NAME$1h,
+  props: props$15,
   setup(props, {
     slots
   }) {
@@ -1475,7 +1475,7 @@ const Checkbox = /* @__PURE__ */ defineComponent({
 
 const MCheckbox = Checkbox;
 
-const props$12 = {
+const props$14 = {
   tag: {
     type: String,
     default: "div"
@@ -1484,10 +1484,10 @@ const props$12 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1d = 'vc-clipboard';
+const COMPONENT_NAME$1g = 'vc-clipboard';
 const Clipboard = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1d,
-  props: props$12,
+  name: COMPONENT_NAME$1g,
+  props: props$14,
   setup(props, {
     slots
   }) {
@@ -1501,31 +1501,247 @@ const Clipboard = /* @__PURE__ */ defineComponent({
 
 const MClipboard = Clipboard;
 
+const props$13 = {
+  tag: {
+    type: String,
+    default: "div"
+  },
+  accordion: {
+    type: Boolean,
+    default: false
+  },
+  modelValue: {
+    type: [Array, String, Number]
+  },
+  alive: {
+    type: Boolean,
+    default: true
+  },
+  // TODO: 添加默认样式
+  styleless: {
+    type: Boolean,
+    default: false
+  }
+};
+
+const COMPONENT_NAME$1f = "vc-collapse";
+const Collapse = defineComponent({
+  name: COMPONENT_NAME$1f,
+  props: props$13,
+  emits: ["update:moodelValue", "change"],
+  setup(props, { slots, emit }) {
+    const instance = getCurrentInstance();
+    const currentValue = ref();
+    const items = ref([]);
+    const sync = () => {
+      const v = props.accordion ? currentValue.value[0] : currentValue.value;
+      emit("update:moodelValue", v);
+      emit("change", v);
+    };
+    const setActive = () => {
+      const activeKey = currentValue.value;
+      nextTick(() => {
+        items.value.forEach((child, index) => {
+          const value = typeof child.props.value !== "undefined" ? child.props.value : index;
+          child.exposed.toggle(activeKey.indexOf(value) > -1);
+        });
+      });
+    };
+    const toggle = (item) => {
+      const activeKey = currentValue.value;
+      const index = activeKey.indexOf(item.value);
+      if (!item.visible) {
+        if (index > -1) {
+          activeKey.splice(index, 1);
+        }
+      } else if (index < 0) {
+        activeKey.push(item.value);
+      }
+      currentValue.value = props.accordion ? activeKey.slice(-1) : activeKey;
+      sync();
+    };
+    const add = (item, setValue) => {
+      if (!item) return;
+      nextTick(() => {
+        if (instance.vnode.el) {
+          const index = Array.from(instance.vnode.el.children).filter((i) => /vcm?-collapse-item/.test(i.className)).indexOf(item.vnode.el);
+          if (index != -1) {
+            items.value.splice(index, 0, item);
+            typeof item.props.value === "undefined" && setValue(index);
+            return;
+          }
+        }
+        items.value.push(item);
+        typeof item.props.value === "undefined" && setValue(items.value.length - 1);
+      });
+    };
+    const remove = (item, setValue) => {
+      if (!item) return;
+      items.value.splice(items.value.indexOf(item), 1);
+      items.value.forEach((_, index) => setValue(index));
+    };
+    provide("vc-collapse", {
+      props,
+      toggle,
+      add,
+      remove
+    });
+    watch(
+      () => props.modelValue,
+      (v) => {
+        if (v === currentValue.value) return;
+        currentValue.value = props.accordion && typeof v !== "undefined" ? Array.isArray(v) ? v : [v] : Array.isArray(v) ? v : [];
+      },
+      { immediate: true }
+    );
+    watch(
+      () => currentValue.value,
+      setActive,
+      { deep: true }
+    );
+    onMounted(setActive);
+    return () => {
+      return h(
+        props.tag,
+        {
+          class: [{ "vc-collapse": !props.styleless }]
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+
+const props$12 = {
+  tag: {
+    type: String,
+    default: "div"
+  },
+  value: {
+    type: [String, Number]
+  }
+};
+
 const props$11 = {
   tag: {
     type: String,
     default: "div"
+  },
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  // 子节点每次toggle不销毁
+  alive: {
+    type: Boolean,
+    default: true
   }
 };
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1c = 'vc-collapse';
-const Collapse = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1c,
+function _isSlot$2(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const COMPONENT_NAME$1e = 'vc-expand';
+const Expand = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$1e,
   props: props$11,
   setup(props, {
     slots
   }) {
+    const isActive = ref(false);
+    const Content = props.tag;
+    watch(() => props.modelValue, v => {
+      isActive.value = v;
+    }, {
+      immediate: true
+    });
     return () => {
-      return createVNode("div", {
-        "class": "vc-collapse"
-      }, [slots?.default?.()]);
+      let _slot;
+      return createVNode(TransitionCollapse, {
+        "duration": {
+          enter: 200,
+          leave: 200
+        }
+      }, _isSlot$2(_slot = withDirectives(createVNode(Content, null, {
+        default: () => [(props.alive || !props.alive && isActive.value) && slots.default?.()]
+      }), [[vShow, isActive.value]])) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+  }
+});
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$1d = 'vc-collapse-item';
+const CollapseItem = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$1d,
+  props: props$12,
+  setup(props, {
+    slots,
+    expose
+  }) {
+    const Content = props.tag;
+    const instance = getCurrentInstance();
+    const isActive = ref(false);
+    const current = ref();
+    const collapse = inject('vc-collapse');
+    const handleToggle = () => {
+      collapse.toggle({
+        value: typeof props.value !== 'undefined' ? props.value : current.value,
+        visible: !isActive.value
+      });
+    };
+    const alive = computed(() => {
+      return collapse.props.alive;
+    });
+    const styleless = computed(() => {
+      return collapse.props.styleless;
+    });
+    const setValue = v => current.value = v;
+    onBeforeMount(() => {
+      collapse.add?.(instance, setValue);
+    });
+    onBeforeUnmount(() => {
+      collapse.remove?.(instance, setValue);
+    });
+    expose({
+      isActive,
+      toggle: v => isActive.value = v
+    });
+    return () => {
+      return createVNode(Content, {
+        "class": [{
+          'vc-collapse-item': !styleless.value
+        }]
+      }, {
+        default: () => [createVNode("div", {
+          "class": [{
+            'vc-collapse-item__title': !styleless.value
+          }],
+          "onClick": handleToggle
+        }, [slots.default?.(), slots.icon?.({
+          visible: isActive.value
+        })]), createVNode(Expand, {
+          "modelValue": isActive.value,
+          "alive": alive.value,
+          "onChange": v => isActive.value = v
+        }, {
+          default: () => [createVNode("div", {
+            "class": [{
+              'vc-collapse-item__content': !styleless.value
+            }]
+          }, [slots.content?.()])]
+        })]
+      });
     };
   }
 });
 
 const MCollapse = Collapse;
+const MCollapseItem = CollapseItem;
 
 const props$10 = {
   tag: {
@@ -1536,9 +1752,9 @@ const props$10 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1b = 'vc-color-picker';
+const COMPONENT_NAME$1c = 'vc-color-picker';
 const ColorPicker = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1b,
+  name: COMPONENT_NAME$1c,
   props: props$10,
   setup(props, {
     slots
@@ -1562,9 +1778,9 @@ const props$$ = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1a = 'vc-countdown';
+const COMPONENT_NAME$1b = 'vc-countdown';
 const Countdown = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1a,
+  name: COMPONENT_NAME$1b,
   props: props$$,
   setup(props, {
     slots
@@ -1586,9 +1802,9 @@ const props$_ = {
   }
 };
 
-const COMPONENT_NAME$19 = "vc-customer";
+const COMPONENT_NAME$1a = "vc-customer";
 const Customer = defineComponent({
-  name: COMPONENT_NAME$19,
+  name: COMPONENT_NAME$1a,
   props: props$_,
   setup(props, context) {
     return () => h(() => {
@@ -1608,9 +1824,9 @@ const props$Z = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$18 = 'vc-date-picker';
+const COMPONENT_NAME$19 = 'vc-date-picker';
 const DatePicker = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$18,
+  name: COMPONENT_NAME$19,
   props: props$Z,
   setup(props, {
     slots
@@ -1634,9 +1850,9 @@ const props$Y = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$17 = 'vc-divider';
+const COMPONENT_NAME$18 = 'vc-divider';
 const Divider = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$17,
+  name: COMPONENT_NAME$18,
   props: props$Y,
   setup(props, {
     slots
@@ -1651,1090 +1867,1286 @@ const Divider = /* @__PURE__ */ defineComponent({
 
 const MDivider = Divider;
 
-const props$X = {
-  tag: {
-    type: String,
-    default: "div"
-  }
-};
-
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$16 = 'vc-drawer';
-const Drawer = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$16,
-  props: props$X,
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      return createVNode("div", {
-        "class": "vc-drawer"
-      }, [slots?.default?.()]);
-    };
-  }
-});
-
-const MDrawer = Drawer;
-
-const props$W = {
-  tag: {
-    type: String,
-    default: "div"
-  }
-};
-
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$15 = 'vc-dropdown';
-const Dropdown = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$15,
-  props: props$W,
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      return createVNode("div", {
-        "class": "vc-dropdown"
-      }, [slots?.default?.()]);
-    };
-  }
-});
-
-const MDropdown = Dropdown;
-
-const props$V = {
-  tag: {
-    type: String,
-    default: "div"
-  }
+const defaults = {
+  tag: "div",
+  el: "body",
+  alive: false,
+  multiple: false,
+  aliveRegExp: { className: /(vc-hack-alive|vc-hack-cp)/ },
+  aliveVisibleKey: "isVisible",
+  aliveUpdateKey: "update",
+  leaveDelay: 300,
+  autoDestroy: true,
+  components: {},
+  uses: {},
+  fragment: false,
+  insertion: "last"
 };
 
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$14 = 'vc-editor';
-const Editor = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$14,
-  props: props$V,
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      return createVNode("div", {
-        "class": "vc-editor"
-      }, [slots?.default?.()]);
+class PortalLeaf {
+  app;
+  /**
+   * 目标的实例，挂载到app上
+   */
+  wrapper;
+  propsData;
+  /**
+   * 销毁的函数，挂载到app上，避免冲突
+   */
+  destroy;
+  /**
+   * 自动销毁的标记，挂载到app上，避免冲突
+   */
+  autoDestroy;
+  target;
+  constructor(target) {
+    this.target = target;
+    this.autoDestroy = false;
+    this.destroy = /* istanbul ignore next */
+    () => {
+      throw new VcError("portal", "未注册的destroy方法");
     };
   }
-});
-
-const MEditor = Editor;
-
-const props$U = {
-  tag: {
-    type: String,
-    default: "div"
+  then(resolve, reject) {
+    return this.target.then(resolve, reject);
   }
-};
-
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$13 = 'vc-expand';
-const Expand = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$13,
-  props: props$U,
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      return createVNode("div", {
-        "class": "vc-expand"
-      }, [slots?.default?.()]);
-    };
+  catch(callback) {
+    return this.target.catch(callback);
   }
-});
-
-const MExpand = Expand;
-
-const props$T = {
-  tag: {
-    type: String,
-    default: "form"
-  },
-  model: {
-    type: Object
-  },
-  rules: {
-    type: Object
-  },
-  labelWidth: {
-    type: Number
-  },
-  showMessage: {
-    type: Boolean,
-    default: true
-  },
-  inline: {
-    type: Boolean,
-    default: false
-  },
-  labelPosition: {
-    type: String,
-    default: "right"
-  },
-  autocomplete: {
-    type: String,
-    default: "off"
-  },
-  styleless: {
-    type: Boolean,
-    default: false
+  finally(callback) {
+    return this.target.finally(callback);
   }
-};
+}
 
-const useForm = (expose, options = {}) => {
-  const instance = getCurrentInstance();
-  const props = instance.props;
-  const fields = [];
-  provide("form", {
-    props,
-    add: (field) => {
-      field && fields.push(field);
-    },
-    remove: (field) => {
-      field && fields.splice(fields.indexOf(field), 1);
-    }
-  });
-  const filterFields = (fields$) => {
-    return !fields$ ? fields : fields.filter((item) => fields$.includes(item.props.prop));
-  };
-  const getField = (prop) => {
-    const field = fields.find((item) => item.props.prop === prop);
-    if (!field) throw new VcError("form", "请选择有用的prop值");
-    return field;
-  };
-  const showToast = (msg) => {
-    props.showMessage && options.throwToast?.(msg);
-  };
-  const sortErrors = async (errors) => {
-    const positions = await Promise.all(fields.map((item) => item.exposed.getPosition()));
+const COMPONENT_NAME$17 = "vc-portal";
+class Portal {
+  /**
+   * 清理Portals类型组件
+   * @param name 清理的组件名, boolean表示全部leafs是否强制清理
+   */
+  static clear(name) {
     try {
-      return [...errors].toSorted((a, b) => {
-        const aIndex = fields.findIndex((i) => i.props.prop === a.prop);
-        const bIndex = fields.findIndex((i) => i.props.prop === b.prop);
-        const aPosition = positions[aIndex];
-        const bPosition = positions[bIndex];
-        if (aPosition.top != bPosition.top) return aPosition.top - bPosition.top;
-        return aPosition.left - bPosition.left;
-      });
-    } catch (e) {
-      return errors;
-    }
-  };
-  const scrollIntoView = (prop) => {
-    const field = getField(prop);
-    field.vnode?.el?.scrollIntoView?.({
-      behavior: "smooth",
-      block: "center"
-    });
-  };
-  const reset = (options$ = {}) => {
-    const { fields: fields$, original = {} } = options$;
-    filterFields(fields$).forEach((field) => {
-      let v;
-      try {
-        v = getPropByPath(original, field.props.prop).v;
-      } catch (e) {
+      let force = false;
+      let target = /* @__PURE__ */ new Map();
+      if (name && typeof name !== "boolean") {
+        let names = [];
+        if (typeof name === "string") {
+          names = [name];
+        } else if (name instanceof Array && name.length > 0) {
+          names = name;
+        }
+        names.forEach((i) => target.set(i, ""));
+        force = true;
+      } else {
+        force = !!name;
+        target = Portal.leafs;
+      }
+      for (const key of target.keys()) {
+        const leaf = Portal.leafs.get(key);
+        if (leaf && (force === true || leaf.autoDestroy === true)) {
+          leaf.destroy();
+        }
       }
-      field.exposed.reset(v);
-    });
-  };
-  const validate = async (options$ = {}) => {
-    const { scroll = true, fields: fields$ } = options$;
-    if (!fields.length) {
-      return;
-    }
-    const results = await Promise.allSettled(
-      filterFields(fields$).map((item) => item.exposed.validate(""))
-    );
-    const originErrors = results.filter((i) => i.status === "rejected").map((i) => i.reason);
-    if (!originErrors.length) return;
-    const errors = await sortErrors(originErrors);
-    showToast(errors[0].msg || errors[0].message);
-    scroll && scrollIntoView(errors[0].prop);
-    throw errors;
-  };
-  const validateField = async (prop, options$ = {}) => {
-    try {
-      await validate({
-        ...options$,
-        fields: [prop]
-      });
     } catch (e) {
-      throw e[0];
+      /* istanbul ignore next -- @preserve */
+      throw new VcError("instance", e);
     }
-  };
-  expose({
-    reset,
-    validate,
-    // 单个操作
-    getField,
-    validateField
-  });
-};
-
-const COMPONENT_NAME$12 = "vc-form";
-const Form = defineComponent({
-  name: COMPONENT_NAME$12,
-  props: props$T,
-  setup(props, { slots, expose }) {
-    useForm(expose);
-    return () => {
-      return h(
-        props.tag,
-        {
-          class: "vc-form",
-          autocomplete: props.autocomplete
-        },
-        slots
-      );
-    };
   }
-});
-
-const props$S = {
-  label: {
-    type: String,
-    default: ""
-  },
-  labelWidth: {
-    type: Number
-  },
-  prop: {
-    type: String
-  },
-  required: {
-    type: [Boolean, String],
-    default: false
-  },
-  error: {
-    type: String
-  },
-  rules: {
-    type: [Array, Object]
-  },
-  resetByRulesChanged: {
-    type: Boolean,
-    default: false
-  },
-  showMessage: {
-    type: Boolean,
-    default: true
-  },
-  labelFor: {
-    type: String
-  },
-  styleless: {
-    type: Boolean,
-    default: false
-  },
-  labelPosition: {
-    type: String,
-    default: "right"
-  },
-  contentStyle: String
-};
-
-const filterEmpty = (val) => {
-  if (val instanceof Array) {
-    val = val.filter((i) => i !== "");
+  /**
+   * 清理全部Portals
+   */
+  static clearAll() {
+    try {
+      Portal.leafs.forEach((leaf) => leaf.destroy());
+    } catch (e) {
+      /* istanbul ignore next -- @preserve */
+      throw new VcError("instance", e);
+    }
   }
-  return val;
-};
-const toRules = (rules) => {
-  return rules instanceof Array ? rules : rules ? [rules] : [];
-};
-const useFormItem = (expose) => {
-  const form = inject("form");
-  const instance = getCurrentInstance();
-  const props = instance.props;
-  const { slots } = instance;
-  if (!form?.props) {
-    throw new VcError("form-item", "form-item需要在form内使用");
+  static leafs = /* @__PURE__ */ new Map();
+  wrapper;
+  globalOptions;
+  constructor(wrapper, options) {
+    this.wrapper = wrapper;
+    this.globalOptions = {
+      ...options,
+      name: options?.name || wrapper.name || Utils.getUid(COMPONENT_NAME$17)
+    };
   }
-  const formItem = inject("form-item", {});
-  const validateState = ref("");
-  const validateMessage = ref("");
-  let validateDisabled = false;
-  let initialValue;
-  const currentRules = computed(() => {
-    const formRules = form.props.rules;
-    const formItemBindRules = toRules(props.rules);
-    let formItemRules = formItemBindRules;
-    if (!formItemRules.length && formRules && props.prop) {
-      try {
-        const key = props.prop.replace(/\.[0-9]+\./g, ".");
-        const { v } = getPropByPath(formRules, key);
-        formItemRules = toRules(v);
-      } catch {
-        const rules = formRules[props.prop];
-        formItemRules = toRules(rules);
-      }
-    }
-    return formItemRules;
-  });
-  const isRequired = computed(() => {
-    if (!currentRules.value.length) {
-      return !!props.required;
+  popup(propsData, options) {
+    if (!options) {
+      options = propsData || {};
+    } else {
+      options.propsData = propsData;
     }
-    let required = false;
-    for (let i = 0; i < currentRules.value.length; i++) {
-      const rule = currentRules.value[i];
-      required = !!rule.required;
-      if (required) break;
+    const $options = { ...this.getDefaultOptions(), ...options };
+    const { onFulfilled, onRejected, ...rest } = $options;
+    let onFulfilled$ = (
+      /* istanbul ignore next -- @preserve */
+      () => {
+      }
+    );
+    let onRejected$ = (
+      /* istanbul ignore next -- @preserve */
+      () => {
+      }
+    );
+    const target = new Promise((resolve, reject) => {
+      onFulfilled$ = (v) => {
+        onFulfilled?.(v);
+        resolve(v);
+      };
+      onRejected$ = (v) => {
+        onRejected?.(v);
+        reject(v);
+      };
+    });
+    return this.render(rest, target, onFulfilled$, onRejected$);
+  }
+  /**
+   * 销毁当前Portal下的节点
+   * @param target [description]
+   */
+  destroy = (target) => {
+    const { multiple, name } = this.getDefaultOptions();
+    target = target || name;
+    const instance = typeof target === "object" ? target : Portal.leafs.get(target);
+    if (instance) {
+      instance.destroy();
+    } else if (multiple) {
+      Portal.leafs.forEach((item, key) => {
+        if (key.includes(name)) {
+          item.destroy();
+        }
+      });
     }
-    return required;
-  });
-  const labelPosition = computed(() => {
-    return props.labelPosition || form.props.labelPosition;
-  });
-  const classes = computed(() => {
+  };
+  getDefaultOptions() {
     return {
-      "is-require": isRequired.value,
-      "is-error": validateState.value === "error",
-      "is-validating": validateState.value === "validating",
-      "is-inline": form.props.inline,
-      "is-nest": isNest.value,
-      [`is-${labelPosition.value}`]: true
+      ...defaults,
+      ...VcInstance.options.Portal,
+      ...this.globalOptions
     };
-  });
-  const isNest = computed(() => {
-    return !!formItem.change;
-  });
-  const isNestLast = ref(false);
-  const hasLabel = computed(() => {
-    return !!props.label || slots.label;
-  });
-  const labelStyle = computed(() => {
-    const labelWidth = props.labelWidth === 0 || props.labelWidth ? props.labelWidth : isNest.value ? 0 : form.props.labelWidth;
-    return {
-      width: labelPosition.value !== "top" && labelWidth && labelWidth > 0 ? `${labelWidth}px` : "auto",
-      textAlign: labelPosition.value === "top" ? "left" : labelPosition.value
+  }
+  createCallback(getLeaf, delay, callback) {
+    return (...args) => {
+      const done = () => {
+        const leaf = getLeaf();
+        /* istanbul ignore next -- @preserve */
+        if (!leaf) {
+          throw new VcError("portal", "实例不存在或已卸载");
+        }
+        leaf.destroy();
+      };
+      delay ? setTimeout(done, delay) : done();
+      callback?.(...args);
     };
-  });
-  const contentStyle = computed(() => {
-    const labelWidth = props.labelWidth === 0 || props.labelWidth ? props.labelWidth : form.props.labelWidth;
-    return [
-      {
-        marginLeft: !hasLabel.value && isNest.value ? 0 : labelWidth && labelWidth > 0 ? `${labelWidth}px` : "unset",
-        marginBottom: isNest.value && !isNestLast.value ? `20px` : 0
-      },
-      props.contentStyle
-    ];
-  });
-  const isStyleless = computed(() => {
-    return props.styleless || form.props.styleless;
-  });
-  const fieldValue = computed(() => {
-    const model = form.props.model;
-    if (!model || !props.prop) {
-      return;
-    }
-    let path = props.prop;
-    if (path.includes(":")) {
-      path = path.replace(/:/, ".");
-    }
-    return getPropByPath(model, path).v;
-  });
-  const showError = computed(() => {
-    return validateState.value === "error" && props.showMessage && form.props.showMessage;
-  });
-  watch(
-    () => props.error,
-    (v) => {
-      validateMessage.value = v || "";
-      validateState.value = v === "" ? "" : "error";
-    }
-  );
-  const reset = (v) => {
-    validateState.value = "";
-    validateMessage.value = "";
-    const model = form.props.model;
-    if (!props.prop) return;
-    const { o, k } = getPropByPath(model, props.prop);
-    if (!k) return;
-    validateDisabled = true;
-    o[k] = v !== null && v !== void 0 ? v : Array.isArray(fieldValue.value) ? [].concat(initialValue) : initialValue;
-  };
-  const validate = async (trigger) => {
-    if (!props.prop) return;
-    let rules = currentRules.value.filter((rule) => !rule.trigger || rule.trigger.includes(trigger));
-    if (!rules.length) {
-      if (!props.required) {
-        return;
-      } else {
-        rules = [{
-          required: true,
-          message: typeof props.required === "string" ? props.required : void 0
-        }];
+  }
+  render(options, target, onFulfilled, onRejected) {
+    const {
+      el,
+      tag,
+      alive,
+      aliveRegExp,
+      aliveVisibleKey,
+      aliveUpdateKey,
+      name: name$,
+      leaveDelay,
+      autoDestroy,
+      multiple,
+      fragment,
+      onDestroyed,
+      onBeforeCreate,
+      insertion,
+      // 全局注册
+      globalProperties,
+      install,
+      components,
+      uses,
+      slots,
+      parent,
+      propsData,
+      ...rest
+    } = options;
+    let useAllNodes = fragment;
+    const name = multiple ? `${name$}__${Utils.getUid(COMPONENT_NAME$17)}` : name$;
+    const container = document.createElement(tag);
+    const root = typeof el === "object" ? el : document.querySelector(el || "body");
+    !alive && Portal.leafs.get(name)?.destroy();
+    const propsData$ = propsData || rest;
+    let leaf = new PortalLeaf(target);
+    const isDestroyed = () => {
+      const leaf$ = Portal.leafs.get(name);
+      return !leaf$ || leaf$ !== leaf;
+    };
+    const $onDestroyed = (...args) => {
+      if (isDestroyed()) return;
+      onDestroyed?.(...args);
+      leaf.app?.unmount();
+      /* istanbul ignore else -- @preserve */
+      if (useAllNodes) {
+        root?.contains(container) && root.removeChild(container);
+      } else if (container && container._children) {
+        container._children.forEach((i) => {
+          root?.contains(i) && root.removeChild(i);
+        });
       }
-    }
-    validateState.value = "validating";
-    const descriptor = {};
-    descriptor[props.prop] = rules;
-    const validator = new Validator(descriptor);
-    const model = {};
-    model[props.prop] = filterEmpty(fieldValue.value);
-    try {
-      await validator.validate(model, { first: false });
-      validateState.value = "success";
-      validateMessage.value = "";
-    } catch (errors) {
-      validateState.value = "error";
-      validateMessage.value = errors[0].message;
-      throw {
-        prop: props.prop,
-        message: validateMessage.value
-      };
-    }
-    validateDisabled = false;
-  };
-  const handleFieldBlur = () => {
-    if (!props.prop) {
-      formItem.blur?.();
-      return;
-    }
-    validate("blur");
-  };
-  const handleFieldChange = () => {
-    if (!props.prop) {
-      formItem.change?.();
-      return;
-    }
-    if (validateDisabled) {
-      validateDisabled = false;
-      return;
-    }
-    validate("change");
-  };
-  const getPosition = async () => {
-    let el = instance.vnode.el;
-    try {
-      while (el && !el.getBoundingClientRect) {
-        el = el.nextSibling;
+      Portal.leafs.delete(name);
+    };
+    const $onRejected = this.createCallback(() => leaf, leaveDelay, onRejected);
+    const $onFulfilled = this.createCallback(() => leaf, leaveDelay, onFulfilled);
+    if (alive && Portal.leafs.has(name)) {
+      leaf = Portal.leafs.get(name);
+      leaf.target = target;
+      leaf.propsData.value = propsData$;
+      leaf.wrapper?.[aliveUpdateKey]?.(options);
+    } else {
+      const wrapper = this.wrapper;
+      const app = createApp({
+        name: COMPONENT_NAME$17,
+        parent,
+        setup() {
+          if (alive) {
+            const handleExtra = (e) => {
+              try {
+                const path = e.path || $.composedPath(e);
+                /* istanbul ignore else -- @preserve */
+                if (container && e.target && !container.contains(e.target) && !path?.some((item) => Utils$1.eleInRegExp(item, aliveRegExp))) {
+                  /* istanbul ignore else -- @preserve */
+                  if (leaf.wrapper && leaf.wrapper?.[aliveVisibleKey]) {
+                    leaf.wrapper[aliveVisibleKey] = false;
+                  }
+                  leaveDelay ? setTimeout($onDestroyed, leaveDelay) : $onDestroyed();
+                }
+              } catch (error) {
+                /* istanbul ignore next -- @preserve */
+                throw new VcError("portal", error);
+              }
+            };
+            onMounted(() => {
+              document.addEventListener("click", handleExtra, true);
+            });
+            onBeforeUnmount(() => {
+              document.removeEventListener("click", handleExtra, true);
+            });
+          }
+          const propsData1 = ref(propsData$);
+          const propsData2 = ref();
+          leaf.propsData = propsData1;
+          const allowMounted = ref(typeof onBeforeCreate !== "function");
+          if (!allowMounted.value) {
+            const result = onBeforeCreate(propsData$);
+            if (result && result.then) {
+              result.then((response) => {
+                if (isDestroyed()) return;
+                allowMounted.value = true;
+                propsData2.value = response;
+              }).catch((error) => {
+                $onDestroyed(error);
+              });
+            } else {
+              allowMounted.value = true;
+              propsData2.value = result;
+            }
+          }
+          return () => allowMounted.value && h(
+            wrapper,
+            {
+              ...propsData1.value,
+              ...propsData2.value,
+              ref: (vm) => leaf.wrapper = vm,
+              onPortalFulfilled: (...args) => $onFulfilled(...args),
+              onPortalRejected: (...args) => $onRejected(...args),
+              onPortalDestroyed: (...args) => $onDestroyed(...args)
+            },
+            slots || void 0
+          );
+        }
+      });
+      leaf.app = app;
+      if (globalProperties) {
+        app.config.globalProperties = globalProperties;
       }
-      ;
-      const rect = el.getBoundingClientRect();
-      return {
-        top: rect.top,
-        left: rect.left
-      };
-    } catch (e) {
-      throw new VcError("form-item", "form-item位置计算错误");
-    }
-  };
-  const fields = reactive([]);
-  provide("form-item", {
-    fields,
-    blur: handleFieldBlur,
-    change: handleFieldChange,
-    message: validateMessage,
-    add: (field) => {
-      field && fields.push(field);
-    },
-    remove: (field) => {
-      field && fields.splice(fields.indexOf(field), 1);
-    }
-  });
-  onMounted(() => {
-    if (props.prop) {
-      form.add?.(instance);
-      initialValue = cloneDeep(fieldValue.value);
-    }
-    formItem.add?.(instance);
-  });
-  onBeforeUnmount(() => {
-    form.remove?.(instance);
-    formItem.remove?.(instance);
-  });
-  watch(
-    () => props.rules,
-    () => {
-      props.resetByRulesChanged && reset();
+      for (const key in components) {
+        app.component(key, components[key]);
+      }
+      for (const key in uses) {
+        app.use(uses[key]);
+      }
+      install?.(app);
+      app.mount(container);
     }
-  );
-  watch(
-    () => formItem.fields?.length,
-    async (v) => {
-      if (!isNest.value || !v) return isNestLast.value = false;
-      const fields$ = [...toRaw(formItem.fields)];
-      const positions = await Promise.all(fields$.map((item) => item.exposed.getPosition()));
-      const sortFields = fields$.toSorted((a, b) => {
-        const aIndex = fields$.findIndex((i) => i === a);
-        const bIndex = fields$.findIndex((i) => i === b);
-        const aPosition = positions[aIndex];
-        const bPosition = positions[bIndex];
-        if (aPosition.top != bPosition.top) return aPosition.top - bPosition.top;
-        return aPosition.left - bPosition.left;
+    leaf.destroy = $onDestroyed;
+    leaf.autoDestroy = !!autoDestroy;
+    Portal.leafs.set(name, leaf);
+    const append = (root$, child$) => {
+      if (!root$ || !child$) return;
+      if (insertion === "first") {
+        const firstEl = root$.firstElementChild;
+        if (firstEl) {
+          root$.insertBefore(child$, firstEl);
+          return;
+        }
+      }
+      root$.appendChild(child$);
+    };
+    if (fragment || typeof container._children === "undefined" && !Array.from(container.children).length) {
+      useAllNodes = true;
+      container.parentElement === null && append(root, container);
+    } else if (!container._children) {
+      container._children = [];
+      let childs = Array.from(container.children);
+      if (insertion === "first") {
+        childs = childs.reverse();
+      }
+      childs.forEach((i) => {
+        append(root, i);
+        container._children?.push?.(i);
       });
-      isNestLast.value = sortFields[sortFields.length - 1] === instance;
     }
-  );
-  expose({
-    validate,
-    reset,
-    getPosition
+    return leaf;
+  }
+}
+
+const props$X = {
+  tag: {
+    type: String,
+    default: "div"
+  }
+};
+
+const COMPONENT_NAME$16 = 'vc-portal-view';
+
+/**
+ * 写法不同，但与vue@2.x 保持一致
+ */
+const PortalView = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$16,
+  props: props$X,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      /**
+       * 考虑占位的情况下需要渲染default
+       */
+      return h(Fragment$1, [h(props.tag, {
+        class: 'vc-portal-view'
+      }, slots?.default?.()), h(Teleport, {
+        to: 'body'
+      }, slots?.content?.())]);
+    };
+  }
+});
+
+const props$W = {
+  title: String,
+  content: {
+    type: [String, Function],
+    default: ""
+  },
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  width: {
+    type: Number,
+    default: 300
+  },
+  height: {
+    type: Number,
+    default: 300
+  },
+  mask: {
+    type: Boolean,
+    default: true
+  },
+  maskClosable: {
+    type: Boolean,
+    default: true
+  },
+  scrollable: {
+    type: Boolean,
+    default: false
+  },
+  placement: {
+    type: String,
+    default: "right"
+    // top/right/left/bottom
+  },
+  maskStyle: [Object, String],
+  wrapperClass: [Object, String],
+  wrapperStyle: [Object, String],
+  closeWithCancel: {
+    type: Boolean,
+    default: true
+    // 如果关闭, cancel只能是取消的按钮
+  },
+  okText: {
+    type: [String, Boolean],
+    default: "确定"
+  },
+  cancelText: {
+    type: [String, Boolean],
+    default: "取消"
+  },
+  footer: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 兼容portal设计, 实现Promise方式
+   */
+  onOk: {
+    type: Function
+  },
+  onCancel: {
+    type: Function
+  }
+};
+
+/** @jsxImportSource vue */
+
+function _isSlot$1(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const COMPONENT_NAME$15 = 'vc-drawer';
+const DrawerView = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$15,
+  props: props$W,
+  emits: ['close', 'update:modelValue', 'visible-change'],
+  setup(props, {
+    emit,
+    slots,
+    expose
+  }) {
+    const instance = getCurrentInstance();
+    const isActive = ref(false);
+    const classes = computed(() => {
+      return {
+        [`is-${props.placement}`]: true
+      };
+    });
+    const style = computed(() => {
+      return props.placement === 'top' || props.placement === 'bottom' ? {
+        height: `${props.height}px`
+      } : {
+        width: `${props.width}px`
+      };
+    });
+    watch(() => props.modelValue, v => {
+      isActive.value = v;
+    }, {
+      immediate: true
+    });
+    const handleBefore = (e, hook) => {
+      if (!isActive.value) return;
+      const fn = hook && hook(e);
+      if (fn && fn.then) {
+        return fn.then(res => {
+          isActive.value = false;
+          return res;
+        });
+      } else if (!fn || fn === true) {
+        isActive.value = false;
+      }
+    };
+
+    // 关闭事件
+    const handleClose = (e, closable) => {
+      if (closable || props.maskClosable && e.target.classList.contains('vc-drawer__wrapper')) {
+        // 用户主要取消与关闭事件关联
+        if (props.closeWithCancel) {
+          handleBefore(e, handleCancel);
+        } else {
+          isActive.value = false;
+        }
+      }
+    };
+
+    /**
+     * 动画执行后关闭, 关闭事件都会被执行
+     * visible-change 由移除之后触发
+     * 同时close兼容portal设计
+     */
+    const handleRemove = () => {
+      !instance.isUnmounted && (emit('close'), emit('update:modelValue', false), emit('visible-change', false));
+    };
+
+    // 用户点击确定的回调 兼容portal设计
+    const handleOk = (...rest) => {
+      const ok = instance.vnode.props?.onOk || props.onOk || (() => {});
+      return ok(...rest);
+    };
+
+    // 用户点击取消按钮时为取消 兼容portal设计
+    const handleCancel = (...rest) => {
+      const cancel = instance.vnode.props?.onCancel || props.onCancel || (() => {});
+      return cancel(...rest);
+    };
+    useScrollbar(isActive);
+    expose({
+      isActive,
+      // for portal
+      toggle(v) {
+        v = typeof v === 'boolean' ? v : !isActive.value;
+        isActive.value = v;
+      }
+    });
+    return () => {
+      let _slot, _slot2;
+      return createVNode("div", {
+        "class": [classes.value, 'vc-drawer']
+      }, [createVNode(TransitionFade, {
+        "delay": 50
+      }, _isSlot$1(_slot = withDirectives(createVNode("div", {
+        "style": props.maskStyle,
+        "class": "vc-drawer__mask",
+        "onClick": e => handleClose(e, props.maskClosable)
+      }, null), [[vShow, props.mask && isActive.value]])) ? _slot : {
+        default: () => [_slot]
+      }), createVNode(TransitionSlide, {
+        "mode": props.placement,
+        "onAfterLeave": handleRemove
+      }, _isSlot$1(_slot2 = withDirectives(createVNode("div", {
+        "class": [props.wrapperClass, 'vc-drawer__wrapper'],
+        "style": [style.value, props.wrapperStyle]
+      }, [createVNode("div", {
+        "class": "vc-drawer__container"
+      }, [createVNode("div", {
+        "class": "vc-drawer__header"
+      }, [slots.header ? slots.header() : typeof props.title === 'string' ? createVNode("div", {
+        "class": "vc-drawer__title",
+        "innerHTML": props.title
+      }, null) : typeof props.title === 'function' && createVNode(Customer, {
+        "render": props.title
+      }, null), createVNode("a", {
+        "class": "vc-drawer__close",
+        "onClick": e => handleClose(e, true)
+      }, [createVNode(Icon, {
+        "type": "close"
+      }, null)])]), createVNode("div", {
+        "class": ['vc-drawer__content']
+      }, [typeof props.content === 'string' ? createVNode("div", {
+        "innerHTML": props.content
+      }, null) : typeof props.content === 'function' ? createVNode(Customer, {
+        "render": props.content
+      }, null) : null, slots.default?.()]), props.footer && (props.cancelText || props.okText) && createVNode("div", {
+        "class": ['vc-drawer__footer']
+      }, [slots['footer-extra']?.(), !slots.footer ? createVNode(Fragment$1, null, [props.cancelText && createVNode(Button, {
+        "style": "margin-right: 8px;",
+        "onClick": e => handleBefore(e, handleCancel)
+      }, {
+        default: () => [props.cancelText]
+      }), props.okText && createVNode(Button, {
+        "type": "primary",
+        "onClick": e => handleBefore(e, handleOk)
+      }, {
+        default: () => [props.okText]
+      })]) : slots.footer?.()])])]), [[vShow, isActive.value]])) ? _slot2 : {
+        default: () => [_slot2]
+      })]);
+    };
+  }
+});
+
+const Drawer = new Portal(DrawerView, {
+  leaveDelay: 0,
+  multiple: true
+});
+const destroy$5 = () => Drawer.destroy();
+const open$1 = (options) => {
+  const leaf = Drawer.popup({
+    ...options,
+    onFulfilled: options.onClose,
+    // 当组件内使用emit('close')，避免重复触发
+    onClose: null
   });
-  return {
-    isNest,
-    isStyleless,
-    isNestLast,
-    validateMessage,
-    classes,
-    labelStyle,
-    contentStyle,
-    showError,
-    labelPosition
-  };
+  leaf.wrapper.toggle?.(true);
+  return leaf;
+};
+
+const drawer = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+	__proto__: null,
+	destroy: destroy$5,
+	open: open$1
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const MDrawerView = DrawerView;
+
+const props$V = {
+  tag: {
+    type: String,
+    default: "div"
+  }
+};
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$14 = 'vc-dropdown';
+const Dropdown = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$14,
+  props: props$V,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return createVNode("div", {
+        "class": "vc-dropdown"
+      }, [slots?.default?.()]);
+    };
+  }
+});
+
+const MDropdown = Dropdown;
+
+const props$U = {
+  tag: {
+    type: String,
+    default: "div"
+  }
 };
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$11 = 'vc-form-item';
-const FormItem = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$11,
-  props: props$S,
+const COMPONENT_NAME$13 = 'vc-editor';
+const Editor = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$13,
+  props: props$U,
   setup(props, {
-    slots,
-    expose
+    slots
   }) {
-    const it = useFormItem(expose);
-    const {
-      isStyleless,
-      isNest,
-      classes,
-      labelStyle,
-      contentStyle,
-      showError,
-      validateMessage
-    } = it;
-    const {
-      label,
-      labelFor
-    } = props;
-    const errorColorClass = 'vc-form-item__error';
     return () => {
-      if (isStyleless.value) return [slots.default?.(), slots.error?.({
-        show: showError.value,
-        nest: isNest.value,
-        message: validateMessage.value,
-        class: errorColorClass
-      })];
       return createVNode("div", {
-        "class": ['vc-form-item', classes.value]
-      }, [createVNode("div", {
-        "style": labelStyle.value,
-        "class": "vc-form-item__label",
-        "for": labelFor
-      }, [createVNode("label", null, [label || slots.label?.()])]), createVNode("div", {
-        "class": "vc-form-item__wrapper"
-      }, [createVNode("div", {
-        "class": "vc-form-item__content",
-        "style": contentStyle.value
-      }, [slots.default?.(), slots.error ? slots.error({
-        show: showError.value,
-        nest: isNest.value,
-        message: validateMessage.value,
-        class: errorColorClass
-      }) : createVNode(TransitionFade, null, {
-        default: () => [withDirectives(createVNode("div", {
-          "class": ['vc-form-item__tip', isNest.value ? 'is-nest' : '', errorColorClass]
-        }, [validateMessage.value]), [[vShow, showError.value]])]
-      })])])]);
+        "class": "vc-editor"
+      }, [slots?.default?.()]);
     };
   }
 });
 
-const props$R = {
-  ...props$T,
-  showToast: {
+const MEditor = Editor;
+
+const MExpand = Expand;
+
+const props$T = {
+  tag: {
+    type: String,
+    default: "form"
+  },
+  model: {
+    type: Object
+  },
+  rules: {
+    type: Object
+  },
+  labelWidth: {
+    type: Number
+  },
+  showMessage: {
     type: Boolean,
-    default: false
+    default: true
   },
-  border: {
+  inline: {
     type: Boolean,
     default: false
-  }
-};
-
-const props$Q = {
-  content: [String, Function],
-  maskClosable: {
-    type: Boolean,
-    default: true
   },
-  // 单位ms
-  duration: {
-    type: Number,
-    default: 3e3
+  labelPosition: {
+    type: String,
+    default: "right"
   },
-  mode: {
+  autocomplete: {
     type: String,
-    default: "info",
-    validator: (val) => ["info", "loading", "success", "warning", "error"].includes(val)
+    default: "off"
+  },
+  styleless: {
+    type: Boolean,
+    default: false
   }
 };
 
-const MSpin = Spin;
-
-const MTransition = Transition;
-const MTransitionCollapse = TransitionCollapse;
-const MTransitionFade = TransitionFade;
-const MTransitionScale = TransitionScale;
-const MTransitionSlide = TransitionSlide;
-const MTransitionZoom = TransitionZoom;
-
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$10 = 'vcm-toast';
-const MToastView = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$10,
-  emits: ['close', 'portal-fulfilled'],
-  props: props$Q,
-  setup(props, {
-    emit,
-    expose
-  }) {
-    const isActive = ref(false);
-    const currentContent = ref();
-    const setContent = v => {
-      currentContent.value = v;
-    };
-
-    // 兼容Portal设计
-    const handleRemove = () => {
-      emit('close');
-      emit('portal-fulfilled');
-    };
-    const handleClose = () => {
-      if (props.maskClosable) {
-        isActive.value = false;
-      }
-    };
-    watch(() => props.content, setContent, {
-      immediate: true
+const useForm = (expose, options = {}) => {
+  const instance = getCurrentInstance();
+  const props = instance.props;
+  const fields = [];
+  provide("form", {
+    props,
+    add: (field) => {
+      field && fields.push(field);
+    },
+    remove: (field) => {
+      field && fields.splice(fields.indexOf(field), 1);
+    }
+  });
+  const filterFields = (fields$) => {
+    return !fields$ ? fields : fields.filter((item) => fields$.includes(item.props.prop));
+  };
+  const getField = (prop) => {
+    const field = fields.find((item) => item.props.prop === prop);
+    if (!field) throw new VcError("form", "请选择有用的prop值");
+    return field;
+  };
+  const showToast = (msg) => {
+    props.showMessage && options.throwToast?.(msg);
+  };
+  const sortErrors = async (errors) => {
+    const positions = await Promise.all(fields.map((item) => item.exposed.getPosition()));
+    try {
+      return [...errors].toSorted((a, b) => {
+        const aIndex = fields.findIndex((i) => i.props.prop === a.prop);
+        const bIndex = fields.findIndex((i) => i.props.prop === b.prop);
+        const aPosition = positions[aIndex];
+        const bPosition = positions[bIndex];
+        if (aPosition.top != bPosition.top) return aPosition.top - bPosition.top;
+        return aPosition.left - bPosition.left;
+      });
+    } catch {
+      return errors;
+    }
+  };
+  const scrollIntoView = (prop) => {
+    const field = getField(prop);
+    field.vnode?.el?.scrollIntoView?.({
+      behavior: "smooth",
+      block: "center"
     });
-    let timer;
-    onMounted(() => {
-      isActive.value = true;
-      if (props.duration !== 0) {
-        timer = setTimeout(() => isActive.value = false, props.duration);
+  };
+  const reset = (options$ = {}) => {
+    const { fields: fields$, original = {} } = options$;
+    filterFields(fields$).forEach((field) => {
+      let v;
+      try {
+        v = getPropByPath(original, field.props.prop).v;
+      } catch {
       }
+      field.exposed.reset(v);
     });
-    onUnmounted(() => {
-      timer && clearTimeout(timer);
-    });
-    const exposes = ['destroy', 'remove', 'close', 'hide'].reduce((pre, key) => {
-      pre[key] = handleRemove;
-      return pre;
-    }, {});
-    expose(exposes);
+  };
+  const validate = async (options$ = {}) => {
+    const { scroll = true, fields: fields$ } = options$;
+    if (!fields.length) {
+      return;
+    }
+    const results = await Promise.allSettled(
+      filterFields(fields$).map((item) => item.exposed.validate(""))
+    );
+    const originErrors = results.filter((i) => i.status === "rejected").map((i) => i.reason);
+    if (!originErrors.length) return;
+    const errors = await sortErrors(originErrors);
+    showToast(errors[0].msg || errors[0].message);
+    scroll && scrollIntoView(errors[0].prop);
+    throw errors;
+  };
+  const validateField = async (prop, options$ = {}) => {
+    try {
+      await validate({
+        ...options$,
+        fields: [prop]
+      });
+    } catch (e) {
+      throw e[0];
+    }
+  };
+  expose({
+    reset,
+    validate,
+    // 单个操作
+    getField,
+    validateField
+  });
+};
+
+const COMPONENT_NAME$12 = "vc-form";
+const Form = defineComponent({
+  name: COMPONENT_NAME$12,
+  props: props$T,
+  setup(props, { slots, expose }) {
+    useForm(expose);
     return () => {
-      return createVNode("div", {
-        "class": "vcm-toast"
-      }, [createVNode("div", {
-        "class": "vcm-toast__bg",
-        "onClick": handleClose,
-        "onTouchmove": withModifiers(() => {}, ['prevent'])
-      }, null), createVNode(MTransitionFade, {
-        "duration": {
-          enter: 300,
-          leave: 150
+      return h(
+        props.tag,
+        {
+          class: "vc-form",
+          autocomplete: props.autocomplete
         },
-        "onAfterLeave": handleRemove
-      }, {
-        default: () => [withDirectives(createVNode("div", {
-          "class": "vcm-toast__wrapper"
-        }, [props.mode === 'loading' && createVNode(MSpin, {
-          "class": "vcm-toast__loading"
-        }, null), typeof currentContent.value === 'string' ? createVNode("div", {
-          "class": "vcm-toast__content",
-          "innerHTML": currentContent.value
-        }, null) : typeof currentContent.value === 'function' ? createVNode(MCustomer, {
-          "render": currentContent.value
-        }, null) : null]), [[vShow, isActive.value]])]
-      })]);
+        slots
+      );
     };
   }
 });
 
-const defaults = {
-  tag: "div",
-  el: "body",
-  alive: false,
-  multiple: false,
-  aliveRegExp: { className: /(vc-hack-alive|vc-hack-cp)/ },
-  aliveVisibleKey: "isVisible",
-  aliveUpdateKey: "update",
-  leaveDelay: 300,
-  autoDestroy: true,
-  components: {},
-  uses: {},
-  fragment: false,
-  insertion: "last"
+const props$S = {
+  label: {
+    type: String,
+    default: ""
+  },
+  labelWidth: {
+    type: Number
+  },
+  prop: {
+    type: String
+  },
+  required: {
+    type: [Boolean, String],
+    default: false
+  },
+  // 控制`*`是否展示
+  asterisk: {
+    type: Boolean,
+    default: true
+  },
+  error: {
+    type: String
+  },
+  rules: {
+    type: [Array, Object]
+  },
+  resetByRulesChanged: {
+    type: Boolean,
+    default: false
+  },
+  showMessage: {
+    type: Boolean,
+    default: true
+  },
+  labelFor: {
+    type: String
+  },
+  styleless: {
+    type: Boolean,
+    default: false
+  },
+  labelPosition: {
+    type: String,
+    default: "right"
+  },
+  contentStyle: String
 };
 
-class PortalLeaf {
-  app;
-  /**
-   * 目标的实例，挂载到app上
-   */
-  wrapper;
-  propsData;
-  /**
-   * 销毁的函数，挂载到app上，避免冲突
-   */
-  destroy;
-  /**
-   * 自动销毁的标记，挂载到app上，避免冲突
-   */
-  autoDestroy;
-  target;
-  constructor(target) {
-    this.target = target;
-    this.autoDestroy = false;
-    this.destroy = /* istanbul ignore next */
-    () => {
-      throw new VcError("portal", "未注册的destroy方法");
-    };
-  }
-  then(resolve, reject) {
-    return this.target.then(resolve, reject);
-  }
-  catch(callback) {
-    return this.target.catch(callback);
+const filterEmpty = (val) => {
+  if (val instanceof Array) {
+    val = val.filter((i) => i !== "");
   }
-  finally(callback) {
-    return this.target.finally(callback);
+  return val;
+};
+const toRules = (rules) => {
+  return rules instanceof Array ? rules : rules ? [rules] : [];
+};
+const useFormItem = (expose) => {
+  const form = inject("form");
+  const instance = getCurrentInstance();
+  const props = instance.props;
+  const { slots } = instance;
+  if (!form?.props) {
+    throw new VcError("form-item", "form-item需要在form内使用");
   }
-}
-
-const COMPONENT_NAME$$ = "vc-portal";
-class Portal {
-  /**
-   * 清理Portals类型组件
-   * @param name 清理的组件名, boolean表示全部leafs是否强制清理
-   */
-  static clear(name) {
-    try {
-      let force = false;
-      let target = /* @__PURE__ */ new Map();
-      if (name && typeof name !== "boolean") {
-        let names = [];
-        if (typeof name === "string") {
-          names = [name];
-        } else if (name instanceof Array && name.length > 0) {
-          names = name;
-        }
-        names.forEach((i) => target.set(i, ""));
-        force = true;
+  const formItem = inject("vc-form-item", {});
+  const validateState = ref("");
+  const validateMessage = ref("");
+  let validateDisabled = false;
+  let initialValue;
+  const currentRules = computed(() => {
+    const formRules = form.props.rules;
+    const formItemBindRules = toRules(props.rules);
+    let formItemRules = formItemBindRules;
+    if (!formItemRules.length && formRules && props.prop) {
+      try {
+        const key = props.prop.replace(/\.[0-9]+\./g, ".");
+        const { v } = getPropByPath(formRules, key);
+        formItemRules = toRules(v);
+      } catch {
+        const rules = formRules[props.prop];
+        formItemRules = toRules(rules);
+      }
+    }
+    return formItemRules;
+  });
+  const isRequired = computed(() => {
+    if (!currentRules.value.length) {
+      return !!props.required;
+    }
+    let required = false;
+    for (let i = 0; i < currentRules.value.length; i++) {
+      const rule = currentRules.value[i];
+      required = !!rule.required;
+      if (required) break;
+    }
+    return required;
+  });
+  const labelPosition = computed(() => {
+    return props.labelPosition || form.props.labelPosition;
+  });
+  const classes = computed(() => {
+    return {
+      "is-require": isRequired.value && props.asterisk,
+      "is-error": validateState.value === "error",
+      "is-validating": validateState.value === "validating",
+      "is-inline": form.props.inline,
+      "is-nest": isNest.value,
+      [`is-${labelPosition.value}`]: true
+    };
+  });
+  const isNest = computed(() => {
+    return !!formItem.change;
+  });
+  const isNestLast = ref(false);
+  const hasLabel = computed(() => {
+    return !!props.label || slots.label;
+  });
+  const labelStyle = computed(() => {
+    const labelWidth = props.labelWidth === 0 || props.labelWidth ? props.labelWidth : isNest.value ? 0 : form.props.labelWidth;
+    return {
+      width: labelPosition.value !== "top" && labelWidth && labelWidth > 0 ? `${labelWidth}px` : "auto",
+      textAlign: labelPosition.value === "top" ? "left" : labelPosition.value
+    };
+  });
+  const contentStyle = computed(() => {
+    const labelWidth = props.labelWidth === 0 || props.labelWidth ? props.labelWidth : form.props.labelWidth;
+    return [
+      {
+        marginLeft: !hasLabel.value && isNest.value ? 0 : labelWidth && labelWidth > 0 ? `${labelWidth}px` : "unset",
+        marginBottom: isNest.value && !isNestLast.value ? `20px` : 0
+      },
+      props.contentStyle
+    ];
+  });
+  const isStyleless = computed(() => {
+    return props.styleless || form.props.styleless;
+  });
+  const fieldValue = computed(() => {
+    const model = form.props.model;
+    if (!model || !props.prop) {
+      return;
+    }
+    let path = props.prop;
+    if (path.includes(":")) {
+      path = path.replace(/:/, ".");
+    }
+    return getPropByPath(model, path).v;
+  });
+  const showError = computed(() => {
+    return validateState.value === "error" && props.showMessage && form.props.showMessage;
+  });
+  watch(
+    () => props.error,
+    (v) => {
+      validateMessage.value = v || "";
+      validateState.value = v === "" ? "" : "error";
+    }
+  );
+  const reset = (v) => {
+    validateState.value = "";
+    validateMessage.value = "";
+    const model = form.props.model;
+    if (!props.prop) return;
+    const { o, k } = getPropByPath(model, props.prop);
+    if (!k) return;
+    validateDisabled = true;
+    o[k] = v !== null && v !== void 0 ? v : Array.isArray(fieldValue.value) ? [].concat(initialValue) : initialValue;
+  };
+  const validate = async (trigger) => {
+    if (!props.prop) return;
+    let rules = currentRules.value.filter((rule) => !rule.trigger || rule.trigger.includes(trigger));
+    if (!rules.length) {
+      if (!props.required) {
+        return;
       } else {
-        force = !!name;
-        target = Portal.leafs;
-      }
-      for (const key of target.keys()) {
-        const leaf = Portal.leafs.get(key);
-        if (leaf && (force === true || leaf.autoDestroy === true)) {
-          leaf.destroy();
-        }
+        rules = [{
+          required: true,
+          message: typeof props.required === "string" ? props.required : void 0
+        }];
       }
-    } catch (e) {
-      /* istanbul ignore next -- @preserve */
-      throw new VcError("instance", e);
     }
-  }
-  /**
-   * 清理全部Portals
-   */
-  static clearAll() {
+    validateState.value = "validating";
+    const descriptor = {};
+    descriptor[props.prop] = rules;
+    const validator = new Validator(descriptor);
+    const model = {};
+    model[props.prop] = filterEmpty(fieldValue.value);
     try {
-      Portal.leafs.forEach((leaf) => leaf.destroy());
-    } catch (e) {
-      /* istanbul ignore next -- @preserve */
-      throw new VcError("instance", e);
-    }
-  }
-  static leafs = /* @__PURE__ */ new Map();
-  wrapper;
-  globalOptions;
-  constructor(wrapper, options) {
-    this.wrapper = wrapper;
-    this.globalOptions = {
-      ...options,
-      name: options?.name || wrapper.name || Utils.getUid(COMPONENT_NAME$$)
-    };
-  }
-  popup(propsData, options) {
-    if (!options) {
-      options = propsData || {};
-    } else {
-      options.propsData = propsData;
-    }
-    const $options = { ...this.getDefaultOptions(), ...options };
-    const { onFulfilled, onRejected, ...rest } = $options;
-    let onFulfilled$ = (
-      /* istanbul ignore next -- @preserve */
-      () => {
-      }
-    );
-    let onRejected$ = (
-      /* istanbul ignore next -- @preserve */
-      () => {
-      }
-    );
-    const target = new Promise((resolve, reject) => {
-      onFulfilled$ = (v) => {
-        onFulfilled?.(v);
-        resolve(v);
-      };
-      onRejected$ = (v) => {
-        onRejected?.(v);
-        reject(v);
+      await validator.validate(model, { first: false });
+      validateState.value = "success";
+      validateMessage.value = "";
+    } catch (errors) {
+      validateState.value = "error";
+      validateMessage.value = errors[0].message;
+      throw {
+        prop: props.prop,
+        message: validateMessage.value
       };
-    });
-    return this.render(rest, target, onFulfilled$, onRejected$);
-  }
-  /**
-   * 销毁当前Portal下的节点
-   * @param target [description]
-   */
-  destroy = (target) => {
-    const { multiple, name } = this.getDefaultOptions();
-    target = target || name;
-    const instance = typeof target === "object" ? target : Portal.leafs.get(target);
-    if (instance) {
-      instance.destroy();
-    } else if (multiple) {
-      Portal.leafs.forEach((item, key) => {
-        if (key.includes(name)) {
-          item.destroy();
-        }
-      });
     }
+    validateDisabled = false;
   };
-  getDefaultOptions() {
-    return {
-      ...defaults,
-      ...VcInstance.options.Portal,
-      ...this.globalOptions
-    };
-  }
-  createCallback(getLeaf, delay, callback) {
-    return (...args) => {
-      const done = () => {
-        const leaf = getLeaf();
-        /* istanbul ignore next -- @preserve */
-        if (!leaf) {
-          throw new VcError("portal", "实例不存在或已卸载");
-        }
-        leaf.destroy();
-      };
-      delay ? setTimeout(done, delay) : done();
-      callback?.(...args);
-    };
-  }
-  render(options, target, onFulfilled, onRejected) {
-    const {
-      el,
-      tag,
-      alive,
-      aliveRegExp,
-      aliveVisibleKey,
-      aliveUpdateKey,
-      name: name$,
-      leaveDelay,
-      autoDestroy,
-      multiple,
-      fragment,
-      onDestroyed,
-      onBeforeCreate,
-      insertion,
-      // 全局注册
-      globalProperties,
-      install,
-      components,
-      uses,
-      slots,
-      parent,
-      propsData,
-      ...rest
-    } = options;
-    let useAllNodes = fragment;
-    const name = multiple ? `${name$}__${Utils.getUid(COMPONENT_NAME$$)}` : name$;
-    const container = document.createElement(tag);
-    const root = typeof el === "object" ? el : document.querySelector(el || "body");
-    !alive && Portal.leafs.get(name)?.destroy();
-    const propsData$ = propsData || rest;
-    let leaf = new PortalLeaf(target);
-    const isDestroyed = () => {
-      const leaf$ = Portal.leafs.get(name);
-      return !leaf$ || leaf$ !== leaf;
-    };
-    const $onDestroyed = (...args) => {
-      if (isDestroyed()) return;
-      onDestroyed?.(...args);
-      leaf.app?.unmount();
-      /* istanbul ignore else -- @preserve */
-      if (useAllNodes) {
-        root?.contains(container) && root.removeChild(container);
-      } else if (container && container._children) {
-        container._children.forEach((i) => {
-          root?.contains(i) && root.removeChild(i);
-        });
-      }
-      Portal.leafs.delete(name);
-    };
-    const $onRejected = this.createCallback(() => leaf, leaveDelay, onRejected);
-    const $onFulfilled = this.createCallback(() => leaf, leaveDelay, onFulfilled);
-    if (alive && Portal.leafs.has(name)) {
-      leaf = Portal.leafs.get(name);
-      leaf.target = target;
-      leaf.propsData.value = propsData$;
-      leaf.wrapper?.[aliveUpdateKey]?.(options);
-    } else {
-      const wrapper = this.wrapper;
-      const app = createApp({
-        name: COMPONENT_NAME$$,
-        parent,
-        setup() {
-          if (alive) {
-            const handleExtra = (e) => {
-              try {
-                const path = e.path || $.composedPath(e);
-                /* istanbul ignore else -- @preserve */
-                if (container && e.target && !container.contains(e.target) && !path?.some((item) => Utils$1.eleInRegExp(item, aliveRegExp))) {
-                  /* istanbul ignore else -- @preserve */
-                  if (leaf.wrapper && leaf.wrapper?.[aliveVisibleKey]) {
-                    leaf.wrapper[aliveVisibleKey] = false;
-                  }
-                  leaveDelay ? setTimeout($onDestroyed, leaveDelay) : $onDestroyed();
-                }
-              } catch (error) {
-                /* istanbul ignore next -- @preserve */
-                throw new VcError("portal", error);
-              }
-            };
-            onMounted(() => {
-              document.addEventListener("click", handleExtra, true);
-            });
-            onBeforeUnmount(() => {
-              document.removeEventListener("click", handleExtra, true);
-            });
-          }
-          const propsData1 = ref(propsData$);
-          const propsData2 = ref();
-          leaf.propsData = propsData1;
-          const allowMounted = ref(typeof onBeforeCreate !== "function");
-          if (!allowMounted.value) {
-            const result = onBeforeCreate(propsData$);
-            if (result && result.then) {
-              result.then((response) => {
-                if (isDestroyed()) return;
-                allowMounted.value = true;
-                propsData2.value = response;
-              }).catch((error) => {
-                $onDestroyed(error);
-              });
-            } else {
-              allowMounted.value = true;
-              propsData2.value = result;
-            }
-          }
-          return () => allowMounted.value && h(
-            wrapper,
-            {
-              ...propsData1.value,
-              ...propsData2.value,
-              ref: (vm) => leaf.wrapper = vm,
-              onPortalFulfilled: (...args) => $onFulfilled(...args),
-              onPortalRejected: (...args) => $onRejected(...args),
-              onPortalDestroyed: (...args) => $onDestroyed(...args)
-            },
-            slots || void 0
-          );
-        }
-      });
-      leaf.app = app;
-      if (globalProperties) {
-        app.config.globalProperties = globalProperties;
-      }
-      for (const key in components) {
-        app.component(key, components[key]);
-      }
-      for (const key in uses) {
-        app.use(uses[key]);
-      }
-      install?.(app);
-      app.mount(container);
+  const handleFieldBlur = () => {
+    if (!props.prop) {
+      formItem.blur?.();
+      return;
     }
-    leaf.destroy = $onDestroyed;
-    leaf.autoDestroy = !!autoDestroy;
-    Portal.leafs.set(name, leaf);
-    const append = (root$, child$) => {
-      if (!root$ || !child$) return;
-      if (insertion === "first") {
-        const firstEl = root$.firstElementChild;
-        if (firstEl) {
-          root$.insertBefore(child$, firstEl);
-          return;
-        }
-      }
-      root$.appendChild(child$);
-    };
-    if (fragment || typeof container._children === "undefined" && !Array.from(container.children).length) {
-      useAllNodes = true;
-      container.parentElement === null && append(root, container);
-    } else if (!container._children) {
-      container._children = [];
-      let childs = Array.from(container.children);
-      if (insertion === "first") {
-        childs = childs.reverse();
+    validate("blur");
+  };
+  const handleFieldChange = () => {
+    if (!props.prop) {
+      formItem.change?.();
+      return;
+    }
+    if (validateDisabled) {
+      validateDisabled = false;
+      return;
+    }
+    validate("change");
+  };
+  const getPosition = async () => {
+    let el = instance.vnode.el;
+    try {
+      while (el && !el.getBoundingClientRect) {
+        el = el.nextSibling;
       }
-      childs.forEach((i) => {
-        append(root, i);
-        container._children?.push?.(i);
+      ;
+      const rect = el.getBoundingClientRect();
+      return {
+        top: rect.top,
+        left: rect.left
+      };
+    } catch {
+      throw new VcError("form-item", "form-item位置计算错误");
+    }
+  };
+  const fields = reactive([]);
+  provide("vc-form-item", {
+    fields,
+    blur: handleFieldBlur,
+    change: handleFieldChange,
+    message: validateMessage,
+    add: (field) => {
+      field && fields.push(field);
+    },
+    remove: (field) => {
+      field && fields.splice(fields.indexOf(field), 1);
+    }
+  });
+  onMounted(() => {
+    if (props.prop) {
+      form.add?.(instance);
+      initialValue = cloneDeep(fieldValue.value);
+    }
+    formItem.add?.(instance);
+  });
+  onBeforeUnmount(() => {
+    form.remove?.(instance);
+    formItem.remove?.(instance);
+  });
+  watch(
+    () => props.rules,
+    () => {
+      props.resetByRulesChanged && reset();
+    }
+  );
+  watch(
+    () => formItem.fields?.length,
+    async (v) => {
+      if (!isNest.value || !v) return isNestLast.value = false;
+      const fields$ = [...toRaw(formItem.fields)];
+      const positions = await Promise.all(fields$.map((item) => item.exposed.getPosition()));
+      const sortFields = fields$.toSorted((a, b) => {
+        const aIndex = fields$.findIndex((i) => i === a);
+        const bIndex = fields$.findIndex((i) => i === b);
+        const aPosition = positions[aIndex];
+        const bPosition = positions[bIndex];
+        if (aPosition.top != bPosition.top) return aPosition.top - bPosition.top;
+        return aPosition.left - bPosition.left;
       });
+      isNestLast.value = sortFields[sortFields.length - 1] === instance;
     }
-    return leaf;
+  );
+  expose({
+    validate,
+    reset,
+    getPosition
+  });
+  return {
+    isNest,
+    isStyleless,
+    isNestLast,
+    validateMessage,
+    classes,
+    labelStyle,
+    contentStyle,
+    showError,
+    labelPosition
+  };
+};
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$11 = 'vc-form-item';
+const FormItem = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$11,
+  props: props$S,
+  setup(props, {
+    slots,
+    expose
+  }) {
+    const it = useFormItem(expose);
+    const {
+      isStyleless,
+      isNest,
+      classes,
+      labelStyle,
+      contentStyle,
+      showError,
+      validateMessage
+    } = it;
+    const {
+      label,
+      labelFor
+    } = props;
+    const errorColorClass = 'vc-form-item__error';
+    return () => {
+      if (isStyleless.value) return [slots.default?.(), slots.error?.({
+        show: showError.value,
+        nest: isNest.value,
+        message: validateMessage.value,
+        class: errorColorClass
+      })];
+      return createVNode("div", {
+        "class": ['vc-form-item', classes.value]
+      }, [createVNode("div", {
+        "style": labelStyle.value,
+        "class": "vc-form-item__label",
+        "for": labelFor
+      }, [createVNode("label", null, [label || slots.label?.()])]), createVNode("div", {
+        "class": "vc-form-item__wrapper"
+      }, [createVNode("div", {
+        "class": "vc-form-item__content",
+        "style": contentStyle.value
+      }, [slots.default?.(), slots.error ? slots.error({
+        show: showError.value,
+        nest: isNest.value,
+        message: validateMessage.value,
+        class: errorColorClass
+      }) : createVNode(TransitionFade, null, {
+        default: () => [withDirectives(createVNode("div", {
+          "class": ['vc-form-item__tip', isNest.value ? 'is-nest' : '', errorColorClass]
+        }, [validateMessage.value]), [[vShow, showError.value]])]
+      })])])]);
+    };
   }
-}
+});
 
-const props$P = {
-  tag: {
+const props$R = {
+  ...props$T,
+  showToast: {
+    type: Boolean,
+    default: false
+  },
+  border: {
+    type: Boolean,
+    default: false
+  }
+};
+
+const props$Q = {
+  content: [String, Function],
+  maskClosable: {
+    type: Boolean,
+    default: true
+  },
+  // 单位ms
+  duration: {
+    type: Number,
+    default: 3e3
+  },
+  mode: {
     type: String,
-    default: "div"
+    default: "info",
+    validator: (val) => ["info", "loading", "success", "warning", "error"].includes(val)
   }
 };
 
-const COMPONENT_NAME$_ = 'vc-portal-view';
+const MSpin = Spin;
 
-/**
- * 写法不同，但与vue@2.x 保持一致
- */
-const PortalView = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$_,
-  props: props$P,
+const MTransition = Transition;
+const MTransitionCollapse = TransitionCollapse;
+const MTransitionFade = TransitionFade;
+const MTransitionScale = TransitionScale;
+const MTransitionSlide = TransitionSlide;
+const MTransitionZoom = TransitionZoom;
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$10 = 'vcm-toast';
+const MToastView = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$10,
+  emits: ['close', 'portal-fulfilled'],
+  props: props$Q,
   setup(props, {
-    slots
+    emit,
+    expose
   }) {
+    const isActive = ref(false);
+    const currentContent = ref();
+    let timer;
+    const setDuration = v => {
+      timer && clearTimeout(timer);
+      if (v === 0) return;
+      timer = setTimeout(() => isActive.value = false, v);
+    };
+    const setContent = v => {
+      currentContent.value = v;
+    };
+
+    // 兼容Portal设计
+    const handleRemove = () => {
+      emit('close');
+      emit('portal-fulfilled');
+    };
+    const handleClose = () => {
+      if (props.maskClosable) {
+        isActive.value = false;
+      }
+    };
+    watch(() => props.content, setContent, {
+      immediate: true
+    });
+    onMounted(() => {
+      isActive.value = true;
+      setDuration(props.duration);
+    });
+    onUnmounted(() => {
+      timer && clearTimeout(timer);
+    });
+    const exposes = ['destroy', 'remove', 'close', 'hide'].reduce((pre, key) => {
+      pre[key] = handleRemove;
+      return pre;
+    }, {
+      setContent,
+      setDuration
+    });
+    expose(exposes);
     return () => {
-      /**
-       * 考虑占位的情况下需要渲染default
-       */
-      return h(Fragment$1, [h(props.tag, {
-        class: 'vc-portal-view'
-      }, slots?.default?.()), h(Teleport, {
-        to: 'body'
-      }, slots?.content?.())]);
+      return createVNode("div", {
+        "class": "vcm-toast"
+      }, [createVNode("div", {
+        "class": "vcm-toast__bg",
+        "onClick": handleClose,
+        "onTouchmove": withModifiers(() => {}, ['prevent'])
+      }, null), createVNode(MTransitionFade, {
+        "duration": {
+          enter: 300,
+          leave: 150
+        },
+        "onAfterLeave": handleRemove
+      }, {
+        default: () => [withDirectives(createVNode("div", {
+          "class": "vcm-toast__wrapper"
+        }, [props.mode === 'loading' && createVNode(MSpin, {
+          "class": "vcm-toast__loading"
+        }, null), typeof currentContent.value === 'string' ? createVNode("div", {
+          "class": "vcm-toast__content",
+          "innerHTML": currentContent.value
+        }, null) : typeof currentContent.value === 'function' ? createVNode(MCustomer, {
+          "render": currentContent.value
+        }, null) : null]), [[vShow, isActive.value]])]
+      })]);
     };
   }
 });
@@ -2774,9 +3186,9 @@ const MToast$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
 	warning: warning$3
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const COMPONENT_NAME$Z = "vcm-form";
+const COMPONENT_NAME$$ = "vcm-form";
 const MForm = defineComponent({
-  name: COMPONENT_NAME$Z,
+  name: COMPONENT_NAME$$,
   props: props$R,
   setup(props, { slots, expose }) {
     useForm(expose, {
@@ -2797,7 +3209,7 @@ const MForm = defineComponent({
   }
 });
 
-const props$O = {
+const props$P = {
   ...props$S,
   indent: {
     type: Number,
@@ -2807,10 +3219,10 @@ const props$O = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$Y = 'vcm-form-item';
+const COMPONENT_NAME$_ = 'vcm-form-item';
 const MFormItem = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$Y,
-  props: props$O,
+  name: COMPONENT_NAME$_,
+  props: props$P,
   setup(props, {
     slots,
     expose
@@ -2863,9 +3275,9 @@ const MFormItem = /* @__PURE__ */ defineComponent({
   }
 });
 
-const COMPONENT_NAME$X = "vc-fragment";
+const COMPONENT_NAME$Z = "vc-fragment";
 const Fragment = defineComponent({
-  name: COMPONENT_NAME$X,
+  name: COMPONENT_NAME$Z,
   setup(_, { slots }) {
     return () => h(Fragment$1, slots.default?.());
   }
@@ -2873,7 +3285,7 @@ const Fragment = defineComponent({
 
 const MFragment = Fragment;
 
-const props$N = {
+const props$O = {
   tag: {
     type: String,
     default: "div"
@@ -2882,10 +3294,10 @@ const props$N = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$W = 'vc-html-to-image';
+const COMPONENT_NAME$Y = 'vc-html-to-image';
 const HTMLToImage = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$W,
-  props: props$N,
+  name: COMPONENT_NAME$Y,
+  props: props$O,
   setup(props, {
     slots
   }) {
@@ -2901,7 +3313,7 @@ const MHTMLToImage = HTMLToImage;
 
 const MIcon = Icon;
 
-const props$M = {
+const props$N = {
   src: String,
   fit: String,
   lazy: Boolean,
@@ -2960,7 +3372,7 @@ const IMGStore$1 = new IMGStore();
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$V = 'vc-image';
+const COMPONENT_NAME$X = 'vc-image';
 let isSupportObjectFit = false;
 window.addEventListener('DOMContentLoaded', () => {
   isSupportObjectFit = !IS_SERVER$1 && document.documentElement.style.objectFit !== undefined;
@@ -2973,9 +3385,9 @@ const ObjectFit = {
   SCALE_DOWN: 'scale-down'
 };
 const Image = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$V,
+  name: COMPONENT_NAME$X,
   inheritAttrs: false,
-  props: props$M,
+  props: props$N,
   setup(props, {
     slots,
     emit
@@ -3169,7 +3581,7 @@ const Image = /* @__PURE__ */ defineComponent({
 
 const MImage = Image;
 
-const props$L = {
+const props$M = {
   tag: {
     type: String,
     default: "div"
@@ -3178,10 +3590,10 @@ const props$L = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$U = 'vc-image-crop';
+const COMPONENT_NAME$W = 'vc-image-crop';
 const ImageCrop = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$U,
-  props: props$L,
+  name: COMPONENT_NAME$W,
+  props: props$M,
   setup(props, {
     slots
   }) {
@@ -3195,7 +3607,7 @@ const ImageCrop = /* @__PURE__ */ defineComponent({
 
 const MImageCrop = ImageCrop;
 
-const props$K = {
+const props$L = {
   tag: {
     type: String,
     default: "div"
@@ -3204,10 +3616,10 @@ const props$K = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$T = 'vc-image-preview';
+const COMPONENT_NAME$V = 'vc-image-preview';
 const ImagePreview = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$T,
-  props: props$K,
+  name: COMPONENT_NAME$V,
+  props: props$L,
   setup(props, {
     slots
   }) {
@@ -3221,7 +3633,7 @@ const ImagePreview = /* @__PURE__ */ defineComponent({
 
 const MImagePreview = ImagePreview;
 
-const props$J = {
+const props$K = {
   tag: {
     type: String,
     default: "div"
@@ -3230,10 +3642,10 @@ const props$J = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$S = 'vc-image-processing';
+const COMPONENT_NAME$U = 'vc-image-processing';
 const ImageProcessing = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$S,
-  props: props$J,
+  name: COMPONENT_NAME$U,
+  props: props$K,
   setup(props, {
     slots
   }) {
@@ -3247,7 +3659,7 @@ const ImageProcessing = /* @__PURE__ */ defineComponent({
 
 const MImageProcessing = ImageProcessing;
 
-const props$I = {
+const props$J = {
   // Array, 作为select等数组存放临时值
   modelValue: {
     type: [String, Number, Array],
@@ -3346,7 +3758,7 @@ const useInput = (input) => {
   const isFocus = ref(false);
   const isClearing = ref(false);
   const isOnComposition = ref(false);
-  const formItem = inject("form-item", {});
+  const formItem = inject("vc-form-item", {});
   watch(
     () => props.modelValue,
     (v) => {
@@ -3501,12 +3913,12 @@ const useNativeEmitter = (input, expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$R = 'vc-input';
+const COMPONENT_NAME$T = 'vc-input';
 const Input = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$R,
+  name: COMPONENT_NAME$T,
   inheritAttrs: false,
   props: {
-    ...props$I,
+    ...props$J,
     indicator: {
       type: [Boolean, Object],
       default: false
@@ -3607,8 +4019,8 @@ const Input = /* @__PURE__ */ defineComponent({
   }
 });
 
-const props$H = {
-  ...props$I,
+const props$I = {
+  ...props$J,
   min: {
     type: Number,
     default: 0
@@ -3823,10 +4235,10 @@ const useInputNumber = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$Q = 'vc-input-number';
+const COMPONENT_NAME$S = 'vc-input-number';
 const InputNumber = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$Q,
-  props: props$H,
+  name: COMPONENT_NAME$S,
+  props: props$I,
   inheritAttrs: false,
   setup(props, {
     slots,
@@ -3877,8 +4289,8 @@ const InputNumber = /* @__PURE__ */ defineComponent({
   }
 });
 
-const props$G = {
-  ...props$I,
+const props$H = {
+  ...props$J,
   enterText: {
     type: [Boolean, String],
     default: true
@@ -3887,10 +4299,10 @@ const props$G = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$P = 'vc-input-search';
+const COMPONENT_NAME$R = 'vc-input-search';
 const InputSearch = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$P,
-  props: props$G,
+  name: COMPONENT_NAME$R,
+  props: props$H,
   inheritAttrs: false,
   setup(props, {
     emit,
@@ -3924,12 +4336,12 @@ const InputSearch = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$O = 'vcm-input';
+const COMPONENT_NAME$Q = 'vcm-input';
 const MInput = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$O,
+  name: COMPONENT_NAME$Q,
   inheritAttrs: false,
   props: {
-    ...props$I,
+    ...props$J,
     right: {
       type: Boolean,
       default: false
@@ -4015,10 +4427,10 @@ const MInput = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$N = 'vcm-input-number';
+const COMPONENT_NAME$P = 'vcm-input-number';
 const MInputNumber = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$N,
-  props: props$H,
+  name: COMPONENT_NAME$P,
+  props: props$I,
   inheritAttrs: false,
   setup(props, {
     slots,
@@ -4066,11 +4478,11 @@ const MInputNumber = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$M = 'vcm-input-search';
+const COMPONENT_NAME$O = 'vcm-input-search';
 const MInputSearch = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$M,
+  name: COMPONENT_NAME$O,
   props: {
-    ...props$G,
+    ...props$H,
     cancelText: {
       type: String,
       default: '取消'
@@ -4130,7 +4542,7 @@ const MInputSearch = /* @__PURE__ */ defineComponent({
   }
 });
 
-const props$F = {
+const props$G = {
   tag: {
     type: String,
     default: "div"
@@ -4145,12 +4557,12 @@ const props$F = {
   }
 };
 
-const COMPONENT_NAME$L = "vcm-list";
+const COMPONENT_NAME$N = "vcm-list";
 const MList = defineComponent({
-  name: COMPONENT_NAME$L,
-  props: props$F,
+  name: COMPONENT_NAME$N,
+  props: props$G,
   setup(props, { slots }) {
-    provide("list", { props });
+    provide("vc-list", { props });
     return () => {
       return h(
         props.tag,
@@ -4168,7 +4580,7 @@ const MList = defineComponent({
   }
 });
 
-const props$E = {
+const props$F = {
   tag: {
     type: String,
     default: "div"
@@ -4202,17 +4614,17 @@ const props$E = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$K = 'vcm-list-item';
+const COMPONENT_NAME$M = 'vcm-list-item';
 const HTTP_REGEX = /[a-zA-z]+:\/\/[^\s]*/;
 const MListItem = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$K,
-  props: props$E,
+  name: COMPONENT_NAME$M,
+  props: props$F,
   emits: ['click'],
   setup(props, {
     slots,
     emit
   }) {
-    const list = inject('list', {});
+    const list = inject('vc-list', {});
     const classes = computed(() => {
       const hasList = !!list.props;
       return {
@@ -4280,7 +4692,7 @@ const MListItem = /* @__PURE__ */ defineComponent({
   }
 });
 
-const props$D = {
+const props$E = {
   tag: {
     type: String,
     default: "div"
@@ -4289,10 +4701,10 @@ const props$D = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$J = 'vc-marquee';
+const COMPONENT_NAME$L = 'vc-marquee';
 const Marquee = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$J,
-  props: props$D,
+  name: COMPONENT_NAME$L,
+  props: props$E,
   setup(props, {
     slots
   }) {
@@ -4306,7 +4718,7 @@ const Marquee = /* @__PURE__ */ defineComponent({
 
 const MMarquee = Marquee;
 
-const props$C = {
+const props$D = {
   content: [String, Function],
   mask: {
     type: Boolean,
@@ -4344,11 +4756,11 @@ const props$C = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$I = 'vc-message';
+const COMPONENT_NAME$K = 'vc-message';
 const MessageView = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$I,
+  name: COMPONENT_NAME$K,
   emits: ['before-close', 'close', 'portal-fulfilled'],
-  props: props$C,
+  props: props$D,
   setup(props, {
     emit,
     expose
@@ -4356,6 +4768,12 @@ const MessageView = /* @__PURE__ */ defineComponent({
     const instance = getCurrentInstance();
     const isActive = ref(false);
     const currentContent = ref();
+    let timer;
+    const setDuration = v => {
+      timer && clearTimeout(timer);
+      if (v === 0) return;
+      timer = setTimeout(() => isActive.value = false, v);
+    };
     const setContent = v => {
       currentContent.value = v;
     };
@@ -4381,12 +4799,9 @@ const MessageView = /* @__PURE__ */ defineComponent({
     watch(() => props.content, setContent, {
       immediate: true
     });
-    let timer;
     onMounted(() => {
       isActive.value = true;
-      if (props.duration !== 0) {
-        timer = setTimeout(() => isActive.value = false, props.duration);
-      }
+      setDuration(props.duration);
     });
     onUnmounted(() => {
       timer && clearTimeout(timer);
@@ -4395,7 +4810,8 @@ const MessageView = /* @__PURE__ */ defineComponent({
       pre[key] = handleRemove;
       return pre;
     }, {
-      setContent
+      setContent,
+      setDuration
     });
     expose(exposes);
     return () => {
@@ -4405,7 +4821,7 @@ const MessageView = /* @__PURE__ */ defineComponent({
         "class": "vc-message__mask",
         "onClick": e => handleClose(e, props.maskClosable)
       }, null), createVNode(TransitionSlide, {
-        "mode": "up",
+        "mode": "bottom",
         "onAfterLeave": handleRemove
       }, {
         default: () => [withDirectives(createVNode("div", {
@@ -4485,7 +4901,7 @@ const Message$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty(
 
 const MMessage = Message$1;
 
-const props$B = {
+const props$C = {
   modelValue: {
     type: Boolean,
     default: false
@@ -4565,12 +4981,12 @@ const props$B = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$H = 'vc-modal';
+const COMPONENT_NAME$J = 'vc-modal';
 let zIndexNumber = 1002;
 const ModalView = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$H,
+  name: COMPONENT_NAME$J,
   emits: ['update:modelValue', 'close', 'portal-fulfilled', 'visible-change', 'ok', 'cancel'],
-  props: props$B,
+  props: props$C,
   setup(props, {
     slots,
     emit,
@@ -4797,6 +5213,10 @@ const ModalView = /* @__PURE__ */ defineComponent({
     expose({
       isActive,
       // for portal
+      toggle(v) {
+        v = typeof v === 'boolean' ? v : !isActive.value;
+        isActive.value = v;
+      },
       resetOrigin
     });
     return () => {
@@ -4887,7 +5307,7 @@ const create$2 = (mode) => (options) => {
     // 当组件内使用emit('close')，避免重复触发
     onClose: null
   });
-  leaf.wrapper.isActive = true;
+  leaf.wrapper.toggle?.(true);
   return leaf;
 };
 const destroy$2 = () => Modal.destroy();
@@ -4905,7 +5325,7 @@ const modal$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
 	warning: warning$1
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const props$A = {
+const props$B = {
   mode: {
     type: String,
     validator: (v) => /(alert|operation)/.test(v),
@@ -4967,11 +5387,11 @@ const props$A = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$G = 'vc-modal';
+const COMPONENT_NAME$I = 'vc-modal';
 const MModalView = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$G,
+  name: COMPONENT_NAME$I,
   emits: ['update:modelValue', 'portal-fulfilled', 'close', 'ok', 'cancel'],
-  props: props$A,
+  props: props$B,
   setup(props, {
     slots,
     emit,
@@ -5144,7 +5564,7 @@ const modal = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
 	operation
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const props$z = {
+const props$A = {
   title: [String, Function],
   content: [String, Function],
   // 单位ms
@@ -5174,40 +5594,31 @@ const props$z = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$F = 'vc-notice';
+const COMPONENT_NAME$H = 'vc-notice';
 const NoticeView = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$F,
-  props: props$z,
+  name: COMPONENT_NAME$H,
+  props: props$A,
   emits: ['portal-fulfilled', 'close', 'before-close'],
   setup(props, {
-    emit
+    emit,
+    expose
   }) {
     const instance = getCurrentInstance();
     const isActive = ref(false);
     const currentTitle = ref();
     const currentContent = ref();
+    let timer;
+    const setDuration = v => {
+      timer && clearTimeout(timer);
+      if (v === 0) return;
+      timer = setTimeout(() => isActive.value = false, v);
+    };
     const setTitle = v => {
       currentTitle.value = v;
     };
     const setContent = v => {
       currentContent.value = v;
     };
-    watch(() => props.title, setTitle, {
-      immediate: true
-    });
-    watch(() => props.content, setContent, {
-      immediate: true
-    });
-    let timer;
-    onMounted(() => {
-      isActive.value = true;
-      if (props.duration !== 0) {
-        timer = setTimeout(() => isActive.value = false, props.duration);
-      }
-    });
-    onUnmounted(() => {
-      timer && clearTimeout(timer);
-    });
 
     // 兼容Portal设计
     const handleRemove = () => {
@@ -5227,6 +5638,27 @@ const NoticeView = /* @__PURE__ */ defineComponent({
         isActive.value = false;
       }
     };
+    watch(() => props.title, setTitle, {
+      immediate: true
+    });
+    watch(() => props.content, setContent, {
+      immediate: true
+    });
+    onMounted(() => {
+      isActive.value = true;
+      setDuration(props.duration);
+    });
+    onUnmounted(() => {
+      timer && clearTimeout(timer);
+    });
+    const exposes = ['destroy', 'remove', 'close', 'hide'].reduce((pre, key) => {
+      pre[key] = handleRemove;
+      return pre;
+    }, {
+      setContent,
+      setDuration
+    });
+    expose(exposes);
     return () => {
       return createVNode("div", {
         "class": ['vc-notice', {
@@ -5337,7 +5769,7 @@ const Notice$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
 
 const MNotice = Notice$1;
 
-const props$y = {
+const props$z = {
   tag: {
     type: String,
     default: "div"
@@ -5346,10 +5778,10 @@ const props$y = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$E = 'vc-option';
+const COMPONENT_NAME$G = 'vc-option';
 const Option = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$E,
-  props: props$y,
+  name: COMPONENT_NAME$G,
+  props: props$z,
   setup(props, {
     slots
   }) {
@@ -5363,7 +5795,7 @@ const Option = /* @__PURE__ */ defineComponent({
 
 const MOption = Option;
 
-const props$x = {
+const props$y = {
   tag: {
     type: String,
     default: "div"
@@ -5372,10 +5804,10 @@ const props$x = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$D = 'vc-page';
+const COMPONENT_NAME$F = 'vc-page';
 const Page = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$D,
-  props: props$x,
+  name: COMPONENT_NAME$F,
+  props: props$y,
   setup(props, {
     slots
   }) {
@@ -5389,7 +5821,7 @@ const Page = /* @__PURE__ */ defineComponent({
 
 const MPage = Page;
 
-const props$w = {
+const props$x = {
   tag: {
     type: String,
     default: "div"
@@ -5398,10 +5830,10 @@ const props$w = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$C = 'vc-picker';
+const COMPONENT_NAME$E = 'vc-picker';
 const Picker = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$C,
-  props: props$w,
+  name: COMPONENT_NAME$E,
+  props: props$x,
   setup(props, {
     slots
   }) {
@@ -5415,7 +5847,7 @@ const Picker = /* @__PURE__ */ defineComponent({
 
 const MPicker = Picker;
 
-const props$v = {
+const props$w = {
   tag: {
     type: String,
     default: "div"
@@ -5424,10 +5856,10 @@ const props$v = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$B = 'vc-popconfirm';
+const COMPONENT_NAME$D = 'vc-popconfirm';
 const Popconfirm = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$B,
-  props: props$v,
+  name: COMPONENT_NAME$D,
+  props: props$w,
   setup(props, {
     slots
   }) {
@@ -5441,7 +5873,7 @@ const Popconfirm = /* @__PURE__ */ defineComponent({
 
 const MPopconfirm = Popconfirm;
 
-const props$u = {
+const props$v = {
   modelValue: Boolean,
   animation: String,
   placement: {
@@ -5520,7 +5952,7 @@ const wrapperKeys = [
   "autoWidth",
   "always"
 ];
-const props$t = {
+const props$u = {
   trigger: {
     type: String,
     default: "hover",
@@ -5538,7 +5970,7 @@ const props$t = {
     type: Boolean,
     default: true
   },
-  ...pick(props$u, wrapperKeys)
+  ...pick(props$v, wrapperKeys)
 };
 
 const EXTRA_DISTANCE = 4;
@@ -5799,10 +6231,10 @@ const usePos = () => {
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-const COMPONENT_NAME$A = 'vc-popover-wrapper';
+const COMPONENT_NAME$C = 'vc-popover-wrapper';
 const PopoverWrapper = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$A,
-  props: props$u,
+  name: COMPONENT_NAME$C,
+  props: props$v,
   emits: ['portal-fulfilled', 'close'],
   setup(props, {
     emit,
@@ -6012,7 +6444,11 @@ const PopoverWrapper = /* @__PURE__ */ defineComponent({
       props.alone && props.hover && removeEvents();
     });
     expose({
-      isActive
+      isActive,
+      toggle(v) {
+        v = typeof v === 'boolean' ? v : !isActive.value;
+        isActive.value = v;
+      }
     });
     return () => {
       let _slot;
@@ -6052,10 +6488,10 @@ const PopoverPortal = new Portal(PopoverWrapper);
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$z = 'vc-popover';
+const COMPONENT_NAME$B = 'vc-popover';
 const Popover = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$z,
-  props: props$t,
+  name: COMPONENT_NAME$B,
+  props: props$u,
   emits: ['update:modelValue', 'visible-change', 'ready', 'close'],
   open: PopoverPortal.popup.bind(PopoverPortal),
   setup(props, {
@@ -6149,7 +6585,7 @@ const Popover = /* @__PURE__ */ defineComponent({
           portalClass
         });
       } else if (popperInstance && popperInstance.wrapper) {
-        popperInstance.wrapper.isActive = false;
+        popperInstance.wrapper.toggle(false);
       }
     };
     watch(() => props.modelValue, v => {
@@ -6192,7 +6628,7 @@ const Popover = /* @__PURE__ */ defineComponent({
 
 const MPopover = Popover;
 
-const props$s = {
+const props$t = {
   tag: {
     type: String,
     default: "div"
@@ -6201,10 +6637,10 @@ const props$s = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$y = 'vc-popup';
+const COMPONENT_NAME$A = 'vc-popup';
 const Popup = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$y,
-  props: props$s,
+  name: COMPONENT_NAME$A,
+  props: props$t,
   setup(props, {
     slots
   }) {
@@ -6220,7 +6656,7 @@ const MPopup = Popup;
 
 const MPortal = Portal;
 
-const props$r = {
+const props$s = {
   tag: {
     type: String,
     default: "div"
@@ -6229,10 +6665,10 @@ const props$r = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$x = 'vc-print';
+const COMPONENT_NAME$z = 'vc-print';
 const Print = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$x,
-  props: props$r,
+  name: COMPONENT_NAME$z,
+  props: props$s,
   setup(props, {
     slots
   }) {
@@ -6246,7 +6682,7 @@ const Print = /* @__PURE__ */ defineComponent({
 
 const MPrint = Print;
 
-const props$q = {
+const props$r = {
   tag: {
     type: String,
     default: "div"
@@ -6255,10 +6691,10 @@ const props$q = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$w = 'vc-progress';
+const COMPONENT_NAME$y = 'vc-progress';
 const Progress = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$w,
-  props: props$q,
+  name: COMPONENT_NAME$y,
+  props: props$r,
   setup(props, {
     slots
   }) {
@@ -6272,7 +6708,7 @@ const Progress = /* @__PURE__ */ defineComponent({
 
 const MProgress = Progress;
 
-const props$p = {
+const props$q = {
   tag: {
     type: String,
     default: "div"
@@ -6281,10 +6717,10 @@ const props$p = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$v = 'vc-radio';
+const COMPONENT_NAME$x = 'vc-radio';
 const Radio = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$v,
-  props: props$p,
+  name: COMPONENT_NAME$x,
+  props: props$q,
   setup(props, {
     slots
   }) {
@@ -6298,7 +6734,7 @@ const Radio = /* @__PURE__ */ defineComponent({
 
 const MRadio = Radio;
 
-const props$o = {
+const props$p = {
   tag: {
     type: String,
     default: "div"
@@ -6307,10 +6743,10 @@ const props$o = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$u = 'vc-rate';
+const COMPONENT_NAME$w = 'vc-rate';
 const Rate = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$u,
-  props: props$o,
+  name: COMPONENT_NAME$w,
+  props: props$p,
   setup(props, {
     slots
   }) {
@@ -6324,7 +6760,7 @@ const Rate = /* @__PURE__ */ defineComponent({
 
 const MRate = Rate;
 
-const props$n = {
+const props$o = {
   data: {
     type: Array,
     default: () => []
@@ -6375,7 +6811,7 @@ const props$n = {
   renderRefresh: Function
 };
 
-const props$m = {
+const props$n = {
   vertical: Boolean,
   wrapperSize: {
     type: Number,
@@ -6430,7 +6866,7 @@ const barKeys$1 = [
   "thumbStyle",
   "thumbClass"
 ];
-const props$l = {
+const props$m = {
   // 	如果存在滚动条宽度为false, 不存在则为true
   // 	为false的情况下才能使用track-offset
   native: {
@@ -6461,7 +6897,7 @@ const props$l = {
   scrollX: Number,
   scrollY: Number,
   fit: Boolean,
-  ...pick(props$m, barKeys$1)
+  ...pick(props$n, barKeys$1)
 };
 
 const barKeys = [
@@ -6476,7 +6912,7 @@ const barKeys = [
   "autoResize",
   "native"
 ];
-const props$k = {
+const props$l = {
   tag: {
     type: String,
     default: "div"
@@ -6509,13 +6945,13 @@ const props$k = {
     type: Boolean,
     default: true
   },
-  barTo: props$l.to,
-  ...pick(props$l, barKeys)
+  barTo: props$m.to,
+  ...pick(props$m, barKeys)
 };
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$t = 'vc-scroller-track';
+const COMPONENT_NAME$v = 'vc-scroller-track';
 const BAR_MAP = {
   vertical: {
     scroll: 'scrollTop',
@@ -6535,8 +6971,8 @@ const BAR_MAP = {
   }
 };
 const Track = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$t,
-  props: props$m,
+  name: COMPONENT_NAME$v,
+  props: props$n,
   emits: ['change'],
   setup(props, {
     emit,
@@ -6721,10 +7157,10 @@ const Track = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$s = 'vc-scroller-bar';
+const COMPONENT_NAME$u = 'vc-scroller-bar';
 const Bar = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$s,
-  props: props$l,
+  name: COMPONENT_NAME$u,
+  props: props$m,
   emits: ['change'],
   setup(props, {
     emit,
@@ -6937,7 +7373,7 @@ const useScroller = (expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$r = 'vc-scroller';
+const COMPONENT_NAME$t = 'vc-scroller';
 
 /**
  * 作为备选方案,目前推荐使用ScrollerWheel
@@ -6948,8 +7384,8 @@ const COMPONENT_NAME$r = 'vc-scroller';
  * 2. 增加了一层嵌套
  */
 const Scroller = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$r,
-  props: props$k,
+  name: COMPONENT_NAME$t,
+  props: props$l,
   emits: ['scroll'],
   setup(props, {
     slots,
@@ -7009,7 +7445,7 @@ const Scroller = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$q = 'vc-scroller-wheel';
+const COMPONENT_NAME$s = 'vc-scroller-wheel';
 
 /**
  * 为减少一层嵌套，为去除滚动bar的抖动，使用wheel模拟
@@ -7031,8 +7467,8 @@ const COMPONENT_NAME$q = 'vc-scroller-wheel';
  * 设置scrollTop不会reflow和repaint，不需要考虑transfrom来改变content（transform也只在draw完成）
  */
 const ScrollerWheel = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$q,
-  props: props$k,
+  name: COMPONENT_NAME$s,
+  props: props$l,
   emits: ['scroll'],
   setup(props, {
     slots,
@@ -7136,9 +7572,9 @@ const ScrollerWheel = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$p = 'vc-recycle-list-scroll-state';
+const COMPONENT_NAME$r = 'vc-recycle-list-scroll-state';
 const ScrollState = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$p,
+  name: COMPONENT_NAME$r,
   setup(_, {
     slots
   }) {
@@ -7209,7 +7645,7 @@ const STATUS_MAP = {
   }
 };
 
-const props$j = {
+const props$k = {
   inverted: {
     type: Boolean,
     default: false
@@ -7268,13 +7704,13 @@ const useDirectionKeys = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$o = '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$o,
-  props: props$j,
+  name: COMPONENT_NAME$q,
+  props: props$k,
   emits: ['refresh'],
   setup(props, {
     slots
@@ -7371,16 +7807,16 @@ const Container = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$n = 'vc-recycle-list-item';
+const COMPONENT_NAME$p = 'vc-recycle-list-item';
 const Item = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$n,
+  name: COMPONENT_NAME$p,
   props: {
     vertical: {
       type: Boolean,
       default: true
     }
   },
-  emits: ['resize'],
+  emits: ['resize', 'change'],
   setup(_, {
     emit,
     slots
@@ -7392,9 +7828,10 @@ const Item = /* @__PURE__ */ defineComponent({
     const handleResize = () => {
       const v = current.value.getBoundingClientRect()[K.size];
       const changed = offsetSize.value != v;
-      if (hasInitial && changed) {
+      if (changed) {
         offsetSize.value = v;
-        emit('resize');
+        hasInitial && emit('resize', v);
+        emit('change', v);
       }
       hasInitial = true;
     };
@@ -7415,10 +7852,10 @@ const Item = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$m = 'vc-recycle-list';
+const COMPONENT_NAME$o = 'vc-recycle-list';
 const RecycleList = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$m,
-  props: props$n,
+  name: COMPONENT_NAME$o,
+  props: props$o,
   emits: ['scroll'],
   setup(props, {
     slots,
@@ -7962,18 +8399,18 @@ const RecycleList = /* @__PURE__ */ defineComponent({
 
 const MRecycleList = RecycleList;
 
-const props$i = {
+const props$j = {
   tag: {
     type: String,
     default: "div"
   }
 };
 
-const COMPONENT_NAME$l = "vc-resizer";
+const COMPONENT_NAME$n = "vc-resizer";
 const Resizer = defineComponent({
-  name: COMPONENT_NAME$l,
-  props: props$i,
-  emit: ["resize"],
+  name: COMPONENT_NAME$n,
+  props: props$j,
+  emit: ["resize", "change"],
   setup(props, { emit, slots }) {
     const width = ref(0);
     const height = ref(0);
@@ -7999,8 +8436,9 @@ const Resizer = defineComponent({
       const widthChanged = width.value != width$;
       heightChanged && (height.value = height$);
       widthChanged && (width.value = width$);
-      if (hasInitial && (heightChanged || widthChanged)) {
-        emit("resize", currentExposed.value);
+      if (heightChanged || widthChanged) {
+        hasInitial && emit("resize", currentExposed.value);
+        emit("change", currentExposed.value);
       }
       hasInitial = true;
     };
@@ -8027,7 +8465,7 @@ const MResizer = Resizer;
 
 const MScroller = Scroller;
 
-const props$h = {
+const props$i = {
   tag: {
     type: String,
     default: "div"
@@ -8036,10 +8474,10 @@ const props$h = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$k = 'vc-select';
+const COMPONENT_NAME$m = 'vc-select';
 const Select = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$k,
-  props: props$h,
+  name: COMPONENT_NAME$m,
+  props: props$i,
   setup(props, {
     slots
   }) {
@@ -8053,7 +8491,7 @@ const Select = /* @__PURE__ */ defineComponent({
 
 const MSelect = Select;
 
-const props$g = {
+const props$h = {
   tag: {
     type: String,
     default: "div"
@@ -8062,10 +8500,10 @@ const props$g = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$j = 'vc-slider';
+const COMPONENT_NAME$l = 'vc-slider';
 const Slider = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$j,
-  props: props$g,
+  name: COMPONENT_NAME$l,
+  props: props$h,
   setup(props, {
     slots
   }) {
@@ -8079,7 +8517,7 @@ const Slider = /* @__PURE__ */ defineComponent({
 
 const MSlider = Slider;
 
-const props$f = {
+const props$g = {
   tag: {
     type: String,
     default: "div"
@@ -8088,10 +8526,10 @@ const props$f = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$i = 'vc-sort-list';
+const COMPONENT_NAME$k = 'vc-sort-list';
 const SortList = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$i,
-  props: props$f,
+  name: COMPONENT_NAME$k,
+  props: props$g,
   setup(props, {
     slots
   }) {
@@ -8105,7 +8543,7 @@ const SortList = /* @__PURE__ */ defineComponent({
 
 const MSortList = SortList;
 
-const props$e = {
+const props$f = {
   tag: {
     type: String,
     default: "div"
@@ -8114,10 +8552,10 @@ const props$e = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$h = 'vc-steps';
+const COMPONENT_NAME$j = 'vc-steps';
 const Steps = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$h,
-  props: props$e,
+  name: COMPONENT_NAME$j,
+  props: props$f,
   setup(props, {
     slots
   }) {
@@ -8131,7 +8569,7 @@ const Steps = /* @__PURE__ */ defineComponent({
 
 const MSteps = Steps;
 
-const props$d = {
+const props$e = {
   tag: {
     type: String,
     default: "div"
@@ -8140,10 +8578,10 @@ const props$d = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$g = 'vc-switch';
+const COMPONENT_NAME$i = 'vc-switch';
 const Switch = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$g,
-  props: props$d,
+  name: COMPONENT_NAME$i,
+  props: props$e,
   setup(props, {
     slots
   }) {
@@ -8157,7 +8595,7 @@ const Switch = /* @__PURE__ */ defineComponent({
 
 const MSwitch = Switch;
 
-const props$c = {
+const props$d = {
   tag: {
     type: String,
     default: "div"
@@ -8166,10 +8604,10 @@ const props$c = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$f = 'vc-table';
+const COMPONENT_NAME$h = 'vc-table';
 const Table = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$f,
-  props: props$c,
+  name: COMPONENT_NAME$h,
+  props: props$d,
   setup(props, {
     slots
   }) {
@@ -8183,7 +8621,7 @@ const Table = /* @__PURE__ */ defineComponent({
 
 const MTable = Table;
 
-const props$b = {
+const props$c = {
   type: {
     type: String,
     validator: (v) => /^(line|card)$/.test(v),
@@ -8291,7 +8729,7 @@ const useTabs = (options = {}) => {
     if (!item) return;
     list.value.splice(list.value.indexOf(item.props), 1);
   };
-  provide("tabs", {
+  provide("vc-tabs", {
     props,
     currentValue,
     refresh,
@@ -8338,10 +8776,10 @@ const useTabs = (options = {}) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$e = 'vc-tabs';
+const COMPONENT_NAME$g = 'vc-tabs';
 const Tabs = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$e,
-  props: props$b,
+  name: COMPONENT_NAME$g,
+  props: props$c,
   emits: ['update:modelValue', 'change', 'click'],
   setup(props, {
     slots
@@ -8506,7 +8944,7 @@ const Tabs = /* @__PURE__ */ defineComponent({
   }
 });
 
-const props$a = {
+const props$b = {
   value: {
     type: [String, Number]
   },
@@ -8533,7 +8971,7 @@ const useTabsPane = () => {
   const { props } = instance;
   const currentValue = ref(void 0);
   const isLoaded = ref(false);
-  const tabs = inject("tabs", {});
+  const tabs = inject("vc-tabs", {});
   const isActive = computed(() => {
     const state = tabs.currentValue.value === (props.value || currentValue.value);
     if (!isLoaded.value && state) {
@@ -8588,10 +9026,10 @@ const useTabsPane = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$d = 'vc-tabs-pane';
+const COMPONENT_NAME$f = 'vc-tabs-pane';
 const TabsPane = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$d,
-  props: props$a,
+  name: COMPONENT_NAME$f,
+  props: props$b,
   setup(_, {
     slots
   }) {
@@ -8606,8 +9044,329 @@ const TabsPane = /* @__PURE__ */ defineComponent({
   }
 });
 
-const MTabs = Tabs;
-const MTabsPane = TabsPane;
+const props$a = {
+  ...props$c,
+  theme: {
+    type: String,
+    default: "light",
+    validator: (v) => /(light|dark)/.test(v)
+  },
+  barStyle: {
+    type: [Object, Array],
+    default: () => ({})
+  },
+  autoAfloatWidth: {
+    type: Boolean,
+    default: true
+  },
+  average: {
+    type: Boolean,
+    default: true
+  },
+  showWrapper: {
+    type: Boolean,
+    default: true
+  },
+  sticky: {
+    type: Boolean,
+    default: false
+  },
+  offsetTop: {
+    type: Number,
+    default: 0
+  },
+  showStep: {
+    type: Boolean,
+    default: false
+  }
+};
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$e = 'vcm-tabs';
+const MTabs = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$e,
+  props: props$a,
+  emits: ['update:modelValue', 'change', 'click'],
+  setup(props, {
+    slots
+  }) {
+    const instance = getCurrentInstance();
+    const wrapper = ref(null);
+    const content = ref(null);
+    const scroll = ref(null);
+    const nav = ref(null);
+    const top = ref(0);
+    const isFixed = ref(false);
+    const placeholderH = ref(53);
+    const startX = ref(0);
+    const isTouching = ref(false);
+    const scrollViewW = ref(0); // 滚动容器宽度
+    const scrollContentW = ref(0); // 滚动内容宽度
+    const baseX = ref(0);
+    const isDark = computed(() => {
+      return props.theme === 'dark';
+    });
+    const fixedStyle = computed(() => {
+      return isFixed.value ? {
+        top: `${props.offsetTop}px`
+      } : {};
+    });
+
+    // eslint-disable-next-line prefer-const
+    let tabs;
+
+    // TODO: 找到父层滚动条
+    const handleScroll = throttle(() => {
+      isFixed.value = document.scrollingElement.scrollTop + props.offsetTop > top.value;
+    }, 100);
+    const handleTouchstart = e => {
+      isTouching.value = true;
+      startX.value = e.touches[0].pageX;
+      baseX.value = tabs.scrollOffset.value;
+    };
+    const handleTouchmove = throttle(e => {
+      const touchPageX = e.touches[0].pageX;
+      // 与touchstart时触点位置的距离偏移值，大于0时为触点向右移，反之向左
+      const changedX = touchPageX - startX.value;
+      if (changedX > 0) {
+        if (tabs.scrollOffset.value >= 0) {
+          tabs.scrollOffset.value = 0;
+          return;
+        }
+      } else if (Math.abs(tabs.scrollOffset.value) + scrollViewW.value >= scrollContentW.value) {
+        tabs.scrollOffset.value = -(scrollContentW.value - scrollViewW.value);
+        return;
+      }
+      tabs.scrollOffset.value = baseX.value + touchPageX - startX.value;
+    }, 17);
+    const handleTouchend = () => {
+      isTouching.value = false;
+      // TODO: 惯性滚动、回弹 （体验优化）
+    };
+    const handleStep = flag => {
+      if (!tabs.scrollable.value) return;
+      const moveX = flag * scrollViewW.value;
+      let offsetX = tabs.scrollOffset.value + moveX;
+      if (offsetX < -(scrollContentW.value - scrollViewW.value) || offsetX > 0) {
+        offsetX = flag === -1 ? -(scrollContentW.value - scrollViewW.value) : 0;
+      }
+      tabs.scrollOffset.value = offsetX;
+    };
+
+    /**
+     * 使用Resize时, 切换页面失效，换种方案
+     */
+    const refreshTop = debounce(() => {
+      if (props.sticky) {
+        top.value = content.value.offsetTop - placeholderH.value;
+        isFixed.value = document.scrollingElement.scrollTop + props.offsetTop > top.value;
+      }
+    }, 250, {
+      leading: true,
+      trailing: true
+    });
+
+    /**
+     * 将选中的item滚动至可视区（尽量往中间靠）
+     */
+    const scrollToActive = () => {
+      if (!tabs.scrollable.value) return;
+      const activeEl = instance.vnode.el.querySelector(`.vcm-tabs__item[data-id="${tabs.currentValue.value}"]`);
+      if (!activeEl) return;
+      const contentEl = nav.value;
+      const activeRect = activeEl.getBoundingClientRect();
+      const viewRect = scroll.value.getBoundingClientRect();
+      const contentRect = contentEl.getBoundingClientRect();
+      let offset = 0;
+      if (activeRect.width < viewRect.width) {
+        // targetOffset为最理想的情况下，可以滚动到正中间，此时activeEl距scrollView的左右边距
+        const targetOffset = (viewRect.width - activeRect.width) / 2;
+        // offsetLeft其实等价于activeEl.offsetLeft，
+        // 但是调试时发现这两个值在小数位会有差距，offsetLeft一直是整数，所以还是决定用下面这种方式计算offsetLeft
+        const offsetLeft = activeRect.left - contentRect.left;
+        if (offsetLeft - viewRect.left <= targetOffset) {
+          // 左边距离不足以到正中间的情况
+          offset = 0;
+        } else if (contentRect.right - activeRect.right <= targetOffset) {
+          // 右边距离不足以到正中间的情况
+          offset = viewRect.width - contentRect.width; // 负值
+        } else {
+          offset = targetOffset - offsetLeft; // 可以滚动到正中间的理想情况
+        }
+      }
+      tabs.scrollOffset.value = offset;
+    };
+    const operateDOMScrollEvents = type => {
+      const fn = type === 'add' ? window.addEventListener : window.removeEventListener;
+      fn('scroll', handleScroll);
+      fn('touchstart', handleTouchstart, false);
+      fn('touchmove', handleTouchmove, false);
+      fn('touchend', handleTouchend, false);
+    };
+
+    /**
+     * 处理是否需要滚动
+     */
+    const refreshScroll = () => {
+      const viewEl = scroll.value;
+      scrollViewW.value = viewEl.offsetWidth;
+      scrollContentW.value = nav.value.offsetWidth;
+      if (scrollContentW.value > scrollViewW.value) {
+        operateDOMScrollEvents('remove');
+        operateDOMScrollEvents('add');
+        tabs.scrollable.value = true;
+      } else if (tabs.scrollable.value) {
+        operateDOMScrollEvents('remove');
+        tabs.scrollable.value = false;
+      }
+      tabs.scrollable.value && scrollToActive();
+    };
+
+    /**
+     * 刷新当前标签底下的滑块位置
+     */
+    const refreshAfloat = () => {
+      if (!props.showWrapper) return;
+      nextTick(() => {
+        const index = tabs.getTabIndex(tabs.currentValue.value);
+        if (instance.isUnmounted) return;
+        const items = nav.value.querySelectorAll(`.vcm-tabs__item`);
+        const $ = items[index];
+
+        // 暂时写死42
+        tabs.afloatWidth.value = $ ? isDark.value ? 20 : props.autoAfloatWidth ? $.querySelector('span').offsetWidth : $.offsetWidth : 0;
+        if (!Array.from(items).length) return;
+        let offset = 0;
+        const basicOffset = $ ? ($.offsetWidth - tabs.afloatWidth.value) / 2 : 0;
+        if (index > 0) {
+          for (let i = 0; i < index; i++) {
+            offset += parseFloat(items[i].offsetWidth);
+          }
+        }
+        tabs.afloatOffset.value = offset + basicOffset;
+        refreshScroll();
+      });
+    };
+
+    /**
+     * TODO: 在height: 100%容器内滚动，让其带有粘性
+     * @param type ~
+     */
+    const operateDOMEvents = type => {
+      if (!props.sticky) return;
+      const fn = type === 'add' ? window.addEventListener : window.removeEventListener;
+      fn('scroll', handleScroll);
+    };
+    tabs = useTabs({
+      content,
+      wrapper,
+      refreshAfloat,
+      refreshScroll,
+      scrollToActive
+    });
+    const scrollStyle = computed(() => {
+      return {
+        transition: isTouching.value ? '' : 'transform 300ms ease-in-out',
+        transform: `translate3d(${tabs.scrollOffset.value}px, 0, 0)`
+      };
+    });
+    onMounted(() => {
+      refreshTop();
+      operateDOMEvents('add');
+      nextTick(refreshScroll);
+    });
+    onUpdated(refreshTop);
+    onUnmounted(() => {
+      operateDOMEvents('remove');
+      operateDOMScrollEvents('remove');
+    });
+    watch(() => props.theme, refreshAfloat);
+    watch(() => props.average, refreshAfloat);
+    watch(() => props.showStep, () => nextTick(refreshScroll));
+    return () => {
+      return createVNode("div", {
+        "class": [tabs.classes.value, 'vcm-tabs']
+      }, [props.showWrapper && createVNode("div", {
+        "ref": wrapper,
+        "style": [props.barStyle, fixedStyle.value],
+        "class": [{
+          'is-fixed': isFixed
+        }, 'vcm-tabs__bar']
+      }, [createVNode("slot", {
+        "name": "prepend"
+      }, null), slots.prepend?.(), props.showStep && tabs.scrollable.value && createVNode("div", {
+        "class": "vcm-tabs__step is-left",
+        "onClick": () => handleStep(1)
+      }, [createVNode(Icon, {
+        "type": "left"
+      }, null)]), createVNode("div", {
+        "ref": scroll,
+        "class": "vcm-tabs__scroll"
+      }, [createVNode("div", {
+        "ref": nav,
+        "style": scrollStyle.value,
+        "class": "vcm-tabs__nav"
+      }, [props.afloat && createVNode("div", {
+        "style": tabs.afloatStyle.value,
+        "class": "vcm-tabs__afloat"
+      }, null), tabs.list.value.map((item, index) => {
+        return createVNode("div", {
+          "key": index,
+          "data-id": item.value,
+          "class": [{
+            'is-active': (item.value || index) == tabs.currentValue.value,
+            'is-average': props.average
+          }, 'vcm-tabs__item'],
+          "onClick": () => tabs.handleChange(index)
+        }, [slots.label ? slots.label({
+          it: item,
+          index
+        }) : typeof item.label === 'string' ? createVNode("span", {
+          "innerHTML": item.label
+        }, null) : typeof item.label === 'function' && createVNode(Customer, {
+          "render": item.label,
+          "it": item,
+          "index": index
+        }, null)]);
+      })])]), props.showStep && tabs.scrollable.value && createVNode("div", {
+        "class": "vcm-tabs__step is-right",
+        "onClick": () => handleStep(-1)
+      }, [createVNode(Icon, {
+        "type": "right"
+      }, null)]), slots.append?.()]), isFixed.value && createVNode("div", {
+        "style": {
+          height: `${placeholderH.value}px`
+        },
+        "class": "vcm-tabs__placeholder"
+      }, null), createVNode("div", {
+        "ref": content,
+        "style": tabs.contentStyle.value,
+        "class": "vcm-tabs__content"
+      }, [slots.default?.()])]);
+    };
+  }
+});
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$d = 'vcm-tabs-pane';
+const MTabsPane = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$d,
+  props: props$b,
+  setup(_, {
+    slots
+  }) {
+    const tabsPane = useTabsPane();
+    return () => {
+      return createVNode("div", {
+        "class": "vcm-tabs-pane",
+        "style": tabsPane.style.value,
+        "name": tabsPane.currentValue.value
+      }, [tabsPane.isReady && slots.default?.()]);
+    };
+  }
+});
 
 const props$9 = {
   tag: {
@@ -9031,4 +9790,4 @@ const UploadPicker = /* @__PURE__ */ defineComponent({
 
 const MUploadPicker = UploadPicker;
 
-export { ActionSheet, Alert, Artboard, Button, ButtonGroup, Calendar, Card, Carousel, Cascader, Chart, Checkbox, Clipboard, Collapse, ColorPicker, Countdown, Customer, DatePicker, Debounce, Divider, Drawer, Dropdown, Editor, 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, MClipboard, MCollapse, MColorPicker, MCountdown, MCustomer, MDatePicker, Debounce as MDebounce, MDivider, MDrawer, 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, MPage, MPicker, MPopconfirm, MPopover, MPopup, MPortal, MPrint, MProgress, MRadio, MRate, MRecycleList, MResizer, MScroller, MSelect, MSlider, MSortList, MSpin, MSteps, MSwitch, MTable, MTabs, MTabsPane, MTag, MText, MTextarea, MTimePicker, MTimeline, MToast$1 as MToast, MToastView, MTouch, MTransition, MTransitionCollapse, MTransitionFade, MTransitionScale, MTransitionSlide, MTransitionZoom, MTree, MUpload, MUploadPicker, Marquee, Message$1 as Message, MessageView, modal$1 as Modal, ModalView, Notice$1 as Notice, NoticeView, Option, Page, Picker, Popconfirm, Popover, Popup, Portal, PortalView, Print, Progress, Radio, Rate, RecycleList, Resizer, Scroller, ScrollerWheel, Select, Slider, SortList, Spin, Steps, Switch, Table, 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, Clipboard, Collapse, CollapseItem, ColorPicker, Countdown, Customer, DatePicker, Debounce, Divider, drawer as Drawer, DrawerView, Dropdown, Editor, 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, MClipboard, MCollapse, MCollapseItem, MColorPicker, MCountdown, MCustomer, MDatePicker, Debounce as MDebounce, MDivider, 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, MPage, MPicker, MPopconfirm, MPopover, MPopup, MPortal, MPrint, MProgress, MRadio, MRate, MRecycleList, MResizer, MScroller, MSelect, MSlider, MSortList, MSpin, MSteps, MSwitch, MTable, MTabs, MTabsPane, MTag, MText, MTextarea, MTimePicker, MTimeline, MToast$1 as MToast, MToastView, MTouch, MTransition, MTransitionCollapse, MTransitionFade, MTransitionScale, MTransitionSlide, MTransitionZoom, MTree, MUpload, MUploadPicker, Marquee, Message$1 as Message, MessageView, modal$1 as Modal, ModalView, Notice$1 as Notice, NoticeView, Option, Page, Picker, Popconfirm, Popover, Popup, Portal, PortalView, Print, Progress, Radio, Rate, RecycleList, Resizer, Scroller, ScrollerWheel, Select, Slider, SortList, Spin, Steps, Switch, Table, 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 };