@deot/vc-components 1.0.5 → 1.0.7

package/dist/index.cjs

@@ -6,10 +6,10 @@ const vue = require('vue');
 const lodashEs = require('lodash-es');
 const helperResize = require('@deot/helper-resize');
 const Utils = require('@deot/helper-utils');
-const helperValidator = require('@deot/helper-validator');
-const vcShared = require('@deot/vc-shared');
 const $ = require('@deot/helper-dom');
+const vcShared = require('@deot/vc-shared');
 const vcHooks = require('@deot/vc-hooks');
+const helperValidator = require('@deot/helper-validator');
 const helperCache = require('@deot/helper-cache');
 const helperScheduler = require('@deot/helper-scheduler');
 const helperWheel = require('@deot/helper-wheel');
@@ -80,7 +80,7 @@ class Instance {
 }
 const VcInstance = new Instance();
 
-const props$1h = {
+const props$1j = {
   tag: {
     type: String,
     default: "div"
@@ -89,10 +89,10 @@ const props$1h = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1x = 'vc-action-sheet';
+const COMPONENT_NAME$1A = 'vc-action-sheet';
 const ActionSheet = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1x,
-  props: props$1h,
+  name: COMPONENT_NAME$1A,
+  props: props$1j,
   setup(props, {
     slots
   }) {
@@ -106,7 +106,7 @@ const ActionSheet = /* @__PURE__ */ vue.defineComponent({
 
 const MActionSheet = ActionSheet;
 
-const props$1g = {
+const props$1i = {
   modelValue: {
     type: Boolean,
     default: true
@@ -133,7 +133,7 @@ const props$1g = {
   }
 };
 
-const props$1f = {
+const props$1h = {
   type: String,
   inherit: {
     type: Boolean,
@@ -186,7 +186,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));
@@ -278,10 +278,10 @@ const IconManager = new Manager();
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1w = 'vc-icon';
+const COMPONENT_NAME$1z = 'vc-icon';
 const Icon = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1w,
-  props: props$1f,
+  name: COMPONENT_NAME$1z,
+  props: props$1h,
   setup(props) {
     const viewBox = vue.ref('0 0 1024 1024');
     const path = vue.ref([]);
@@ -314,7 +314,7 @@ const Icon = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const props$1e = {
+const props$1g = {
   /**
    * 进入/离开持续时间
    * {enter: 300, leave: 300}
@@ -479,10 +479,10 @@ const useTransition = () => {
   };
 };
 
-const COMPONENT_NAME$1v = "vc-transition";
+const COMPONENT_NAME$1y = "vc-transition";
 const Transition = vue.defineComponent({
-  name: COMPONENT_NAME$1v,
-  props: props$1e,
+  name: COMPONENT_NAME$1y,
+  props: props$1g,
   // 当不声明emits的情况下，事件存在于attrs中
   inheritAttrs: false,
   setup(props, { slots, attrs }) {
@@ -502,10 +502,10 @@ const Transition = vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$1u = "vc-transition-collapse";
+const COMPONENT_NAME$1x = "vc-transition-collapse";
 const TransitionCollapse = vue.defineComponent({
-  name: COMPONENT_NAME$1u,
-  props: props$1e,
+  name: COMPONENT_NAME$1x,
+  props: props$1g,
   // 当不声明emits的情况下，事件存在于attrs中
   inheritAttrs: false,
   setup(props, { slots, attrs: _attrs }) {
@@ -623,11 +623,11 @@ const TransitionCollapse = vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$1t = "vc-transition-fade";
+const COMPONENT_NAME$1w = "vc-transition-fade";
 const TransitionFade = vue.defineComponent({
-  name: COMPONENT_NAME$1t,
+  name: COMPONENT_NAME$1w,
   props: {
-    ...props$1e,
+    ...props$1g,
     // inheritAttrs必须是false
     style: {
       type: Object,
@@ -660,11 +660,11 @@ const TransitionFade = vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$1s = "vc-transition-scale";
+const COMPONENT_NAME$1v = "vc-transition-scale";
 const TransitionScale = vue.defineComponent({
-  name: COMPONENT_NAME$1s,
+  name: COMPONENT_NAME$1v,
   props: {
-    ...props$1e,
+    ...props$1g,
     mode: {
       type: String,
       default: "both",
@@ -702,15 +702,15 @@ const TransitionScale = vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$1r = "vc-transition-slide";
+const COMPONENT_NAME$1u = "vc-transition-slide";
 const TransitionSlide = vue.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: {
@@ -744,11 +744,11 @@ const TransitionSlide = vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$1q = "vc-transition-zoom";
+const COMPONENT_NAME$1t = "vc-transition-zoom";
 const TransitionZoom = vue.defineComponent({
-  name: COMPONENT_NAME$1q,
+  name: COMPONENT_NAME$1t,
   props: {
-    ...props$1e,
+    ...props$1g,
     mode: {
       type: String,
       default: "x",
@@ -788,7 +788,7 @@ const TransitionZoom = vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1p = 'vc-alert';
+const COMPONENT_NAME$1s = 'vc-alert';
 
 // [color, borderColor, backgroundColor], -> CSS
 const THEME_MAP = {
@@ -798,8 +798,8 @@ const THEME_MAP = {
   warning: ['#ffbf00', '#ffe58f', '#fffbe6']
 };
 const Alert = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1p,
-  props: props$1g,
+  name: COMPONENT_NAME$1s,
+  props: props$1i,
   setup(props, {
     slots,
     emit
@@ -888,7 +888,7 @@ const Alert = /* @__PURE__ */ vue.defineComponent({
 
 const MAlert = Alert;
 
-const props$1d = {
+const props$1f = {
   tag: {
     type: String,
     default: "div"
@@ -897,10 +897,10 @@ const props$1d = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1o = 'vc-artboard';
+const COMPONENT_NAME$1r = 'vc-artboard';
 const Artboard = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1o,
-  props: props$1d,
+  name: COMPONENT_NAME$1r,
+  props: props$1f,
   setup(props, {
     slots
   }) {
@@ -914,7 +914,7 @@ const Artboard = /* @__PURE__ */ vue.defineComponent({
 
 const MArtboard = Artboard;
 
-const props$1c = {
+const props$1e = {
   size: {
     type: Number,
     default: 28
@@ -938,10 +938,10 @@ const props$1c = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1n = 'vc-spin';
+const COMPONENT_NAME$1q = 'vc-spin';
 const Spin = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1n,
-  props: props$1c,
+  name: COMPONENT_NAME$1q,
+  props: props$1e,
   setup(props, {
     slots
   }) {
@@ -975,7 +975,7 @@ const Spin = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const props$1b = {
+const props$1d = {
   wait: {
     type: Number,
     default: 250
@@ -991,10 +991,10 @@ const props$1b = {
   exclude: RegExp
 };
 
-const COMPONENT_NAME$1m = "vc-debounce";
+const COMPONENT_NAME$1p = "vc-debounce";
 const Debounce = vue.defineComponent({
-  name: COMPONENT_NAME$1m,
-  props: props$1b,
+  name: COMPONENT_NAME$1p,
+  props: props$1d,
   /**
    * 不声明emits使得事件被透传放入attrs中, 这样可以让所有的事件透传
    * 如事件onClick
@@ -1035,7 +1035,7 @@ const Debounce = vue.defineComponent({
   }
 });
 
-const props$1a = {
+const props$1c = {
   tag: {
     type: String,
     default: "button"
@@ -1065,18 +1065,18 @@ const props$1a = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1l = 'vc-button';
+const COMPONENT_NAME$1o = 'vc-button';
 const Button = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1l,
+  name: COMPONENT_NAME$1o,
   emits: ['click'],
-  props: props$1a,
+  props: props$1c,
   setup(props, {
     slots
   }) {
     const vm = vue.getCurrentInstance();
     const hasSlot = vue.ref(true);
     const isLoading = vue.ref(false);
-    const group = vue.inject('button-group', {
+    const group = vue.inject('vc-button-group', {
       size: 'medium',
       vertical: false,
       circle: false
@@ -1126,7 +1126,7 @@ const Button = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const props$19 = {
+const props$1b = {
   vertical: {
     type: Boolean,
     default: false
@@ -1147,14 +1147,14 @@ const props$19 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1k = 'vc-button-group';
+const COMPONENT_NAME$1n = 'vc-button-group';
 const ButtonGroup = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1k,
-  props: props$19,
+  name: COMPONENT_NAME$1n,
+  props: props$1b,
   setup(props, {
     slots
   }) {
-    vue.provide('button-group', props);
+    vue.provide('vc-button-group', props);
     const classes = vue.computed(() => ({
       'is-vertical': props.vertical,
       'is-circle': props.circle,
@@ -1174,7 +1174,7 @@ const ButtonGroup = /* @__PURE__ */ vue.defineComponent({
 const MButton = Button;
 const MButtonGroup = ButtonGroup;
 
-const props$18 = {
+const props$1a = {
   tag: {
     type: String,
     default: "div"
@@ -1183,10 +1183,10 @@ const props$18 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1j = 'vc-calendar';
+const COMPONENT_NAME$1m = 'vc-calendar';
 const Calendar = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1j,
-  props: props$18,
+  name: COMPONENT_NAME$1m,
+  props: props$1a,
   setup(props, {
     slots
   }) {
@@ -1200,7 +1200,7 @@ const Calendar = /* @__PURE__ */ vue.defineComponent({
 
 const MCalendar = Calendar;
 
-const props$17 = {
+const props$19 = {
   border: {
     type: Boolean,
     default: true
@@ -1223,10 +1223,10 @@ const props$17 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1i = 'vc-card';
+const COMPONENT_NAME$1l = 'vc-card';
 const Card = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1i,
-  props: props$17,
+  name: COMPONENT_NAME$1l,
+  props: props$19,
   setup(props, {
     slots
   }) {
@@ -1252,7 +1252,7 @@ const Card = /* @__PURE__ */ vue.defineComponent({
 
 const MCard = Card;
 
-const props$16 = {
+const props$18 = {
   tag: {
     type: String,
     default: "div"
@@ -1261,10 +1261,10 @@ const props$16 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1h = 'vc-carousel';
+const COMPONENT_NAME$1k = 'vc-carousel';
 const Carousel = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1h,
-  props: props$16,
+  name: COMPONENT_NAME$1k,
+  props: props$18,
   setup(props, {
     slots
   }) {
@@ -1278,7 +1278,7 @@ const Carousel = /* @__PURE__ */ vue.defineComponent({
 
 const MCarousel = Carousel;
 
-const props$15 = {
+const props$17 = {
   tag: {
     type: String,
     default: "div"
@@ -1287,10 +1287,10 @@ const props$15 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1g = 'vc-cascader';
+const COMPONENT_NAME$1j = 'vc-cascader';
 const Cascader = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1g,
-  props: props$15,
+  name: COMPONENT_NAME$1j,
+  props: props$17,
   setup(props, {
     slots
   }) {
@@ -1343,7 +1343,7 @@ const EVENTS = [
   "contextmenu"
 ];
 
-const props$14 = {
+const props$16 = {
   options: Object,
   pluginOptions: Object,
   theme: [String, Object],
@@ -1355,10 +1355,10 @@ const props$14 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1f = 'vc-chart';
+const COMPONENT_NAME$1i = 'vc-chart';
 const Chart = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1f,
-  props: props$14,
+  name: COMPONENT_NAME$1i,
+  props: props$16,
   emits: [...EVENTS, 'ready'],
   setup(props, {
     emit,
@@ -1472,7 +1472,7 @@ const Chart = /* @__PURE__ */ vue.defineComponent({
 
 const MChart = Chart;
 
-const props$13 = {
+const props$15 = {
   tag: {
     type: String,
     default: "div"
@@ -1481,10 +1481,10 @@ const props$13 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1e = 'vc-checkbox';
+const COMPONENT_NAME$1h = 'vc-checkbox';
 const Checkbox = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1e,
-  props: props$13,
+  name: COMPONENT_NAME$1h,
+  props: props$15,
   setup(props, {
     slots
   }) {
@@ -1498,7 +1498,7 @@ const Checkbox = /* @__PURE__ */ vue.defineComponent({
 
 const MCheckbox = Checkbox;
 
-const props$12 = {
+const props$14 = {
   tag: {
     type: String,
     default: "div"
@@ -1507,10 +1507,10 @@ const props$12 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1d = 'vc-clipboard';
+const COMPONENT_NAME$1g = 'vc-clipboard';
 const Clipboard = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1d,
-  props: props$12,
+  name: COMPONENT_NAME$1g,
+  props: props$14,
   setup(props, {
     slots
   }) {
@@ -1524,31 +1524,247 @@ const Clipboard = /* @__PURE__ */ vue.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 = vue.defineComponent({
+  name: COMPONENT_NAME$1f,
+  props: props$13,
+  emits: ["update:moodelValue", "change"],
+  setup(props, { slots, emit }) {
+    const instance = vue.getCurrentInstance();
+    const currentValue = vue.ref();
+    const items = vue.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;
+      vue.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;
+      vue.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));
+    };
+    vue.provide("vc-collapse", {
+      props,
+      toggle,
+      add,
+      remove
+    });
+    vue.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 }
+    );
+    vue.watch(
+      () => currentValue.value,
+      setActive,
+      { deep: true }
+    );
+    vue.onMounted(setActive);
+    return () => {
+      return vue.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__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1c,
+function _isSlot$2(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
+}
+const COMPONENT_NAME$1e = 'vc-expand';
+const Expand = /* @__PURE__ */ vue.defineComponent({
+  name: COMPONENT_NAME$1e,
   props: props$11,
   setup(props, {
     slots
   }) {
+    const isActive = vue.ref(false);
+    const Content = props.tag;
+    vue.watch(() => props.modelValue, v => {
+      isActive.value = v;
+    }, {
+      immediate: true
+    });
     return () => {
-      return vue.createVNode("div", {
-        "class": "vc-collapse"
-      }, [slots?.default?.()]);
+      let _slot;
+      return vue.createVNode(TransitionCollapse, {
+        "duration": {
+          enter: 200,
+          leave: 200
+        }
+      }, _isSlot$2(_slot = vue.withDirectives(vue.createVNode(Content, null, {
+        default: () => [(props.alive || !props.alive && isActive.value) && slots.default?.()]
+      }), [[vue.vShow, isActive.value]])) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+  }
+});
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$1d = 'vc-collapse-item';
+const CollapseItem = /* @__PURE__ */ vue.defineComponent({
+  name: COMPONENT_NAME$1d,
+  props: props$12,
+  setup(props, {
+    slots,
+    expose
+  }) {
+    const Content = props.tag;
+    const instance = vue.getCurrentInstance();
+    const isActive = vue.ref(false);
+    const current = vue.ref();
+    const collapse = vue.inject('vc-collapse');
+    const handleToggle = () => {
+      collapse.toggle({
+        value: typeof props.value !== 'undefined' ? props.value : current.value,
+        visible: !isActive.value
+      });
+    };
+    const alive = vue.computed(() => {
+      return collapse.props.alive;
+    });
+    const styleless = vue.computed(() => {
+      return collapse.props.styleless;
+    });
+    const setValue = v => current.value = v;
+    vue.onBeforeMount(() => {
+      collapse.add?.(instance, setValue);
+    });
+    vue.onBeforeUnmount(() => {
+      collapse.remove?.(instance, setValue);
+    });
+    expose({
+      isActive,
+      toggle: v => isActive.value = v
+    });
+    return () => {
+      return vue.createVNode(Content, {
+        "class": [{
+          'vc-collapse-item': !styleless.value
+        }]
+      }, {
+        default: () => [vue.createVNode("div", {
+          "class": [{
+            'vc-collapse-item__title': !styleless.value
+          }],
+          "onClick": handleToggle
+        }, [slots.default?.(), slots.icon?.({
+          visible: isActive.value
+        })]), vue.createVNode(Expand, {
+          "modelValue": isActive.value,
+          "alive": alive.value,
+          "onChange": v => isActive.value = v
+        }, {
+          default: () => [vue.createVNode("div", {
+            "class": [{
+              'vc-collapse-item__content': !styleless.value
+            }]
+          }, [slots.content?.()])]
+        })]
+      });
     };
   }
 });
 
 const MCollapse = Collapse;
+const MCollapseItem = CollapseItem;
 
 const props$10 = {
   tag: {
@@ -1559,9 +1775,9 @@ const props$10 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1b = 'vc-color-picker';
+const COMPONENT_NAME$1c = 'vc-color-picker';
 const ColorPicker = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1b,
+  name: COMPONENT_NAME$1c,
   props: props$10,
   setup(props, {
     slots
@@ -1585,9 +1801,9 @@ const props$$ = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1a = 'vc-countdown';
+const COMPONENT_NAME$1b = 'vc-countdown';
 const Countdown = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1a,
+  name: COMPONENT_NAME$1b,
   props: props$$,
   setup(props, {
     slots
@@ -1609,9 +1825,9 @@ const props$_ = {
   }
 };
 
-const COMPONENT_NAME$19 = "vc-customer";
+const COMPONENT_NAME$1a = "vc-customer";
 const Customer = vue.defineComponent({
-  name: COMPONENT_NAME$19,
+  name: COMPONENT_NAME$1a,
   props: props$_,
   setup(props, context) {
     return () => vue.h(() => {
@@ -1631,9 +1847,9 @@ const props$Z = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$18 = 'vc-date-picker';
+const COMPONENT_NAME$19 = 'vc-date-picker';
 const DatePicker = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$18,
+  name: COMPONENT_NAME$19,
   props: props$Z,
   setup(props, {
     slots
@@ -1657,9 +1873,9 @@ const props$Y = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$17 = 'vc-divider';
+const COMPONENT_NAME$18 = 'vc-divider';
 const Divider = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$17,
+  name: COMPONENT_NAME$18,
   props: props$Y,
   setup(props, {
     slots
@@ -1674,1085 +1890,1286 @@ const Divider = /* @__PURE__ */ vue.defineComponent({
 
 const MDivider = Divider;
 
-const props$X = {
-  tag: {
-    type: String,
-    default: "div"
-  }
-};
-
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$16 = 'vc-drawer';
-const Drawer = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$16,
-  props: props$X,
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      return vue.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__ */ vue.defineComponent({
-  name: COMPONENT_NAME$15,
-  props: props$W,
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      return vue.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__ */ vue.defineComponent({
-  name: COMPONENT_NAME$14,
-  props: props$V,
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      return vue.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__ */ vue.defineComponent({
-  name: COMPONENT_NAME$13,
-  props: props$U,
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      return vue.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 = vue.getCurrentInstance();
-  const props = instance.props;
-  const fields = [];
-  vue.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 = Utils.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 = vue.defineComponent({
-  name: COMPONENT_NAME$12,
-  props: props$T,
-  setup(props, { slots, expose }) {
-    useForm(expose);
-    return () => {
-      return vue.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 = vue.inject("form");
-  const instance = vue.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__namespace.getUid(COMPONENT_NAME$17)
+    };
   }
-  const formItem = vue.inject("form-item", {});
-  const validateState = vue.ref("");
-  const validateMessage = vue.ref("");
-  let validateDisabled = false;
-  let initialValue;
-  const currentRules = vue.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 } = Utils.getPropByPath(formRules, key);
-        formItemRules = toRules(v);
-      } catch {
-        const rules = formRules[props.prop];
-        formItemRules = toRules(rules);
-      }
-    }
-    return formItemRules;
-  });
-  const isRequired = vue.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 = vue.computed(() => {
-    return props.labelPosition || form.props.labelPosition;
-  });
-  const classes = vue.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 = vue.computed(() => {
-    return !!formItem.change;
-  });
-  const isNestLast = vue.ref(false);
-  const hasLabel = vue.computed(() => {
-    return !!props.label || slots.label;
-  });
-  const labelStyle = vue.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 = vue.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 = vue.computed(() => {
-    return props.styleless || form.props.styleless;
-  });
-  const fieldValue = vue.computed(() => {
-    const model = form.props.model;
-    if (!model || !props.prop) {
-      return;
-    }
-    let path = props.prop;
-    if (path.includes(":")) {
-      path = path.replace(/:/, ".");
-    }
-    return Utils.getPropByPath(model, path).v;
-  });
-  const showError = vue.computed(() => {
-    return validateState.value === "error" && props.showMessage && form.props.showMessage;
-  });
-  vue.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 } = Utils.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__namespace.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 helperValidator.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 = vue.createApp({
+        name: COMPONENT_NAME$17,
+        parent,
+        setup() {
+          if (alive) {
+            const handleExtra = (e) => {
+              try {
+                const path = e.path || $__namespace.composedPath(e);
+                /* istanbul ignore else -- @preserve */
+                if (container && e.target && !container.contains(e.target) && !path?.some((item) => vcShared.Utils.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);
+              }
+            };
+            vue.onMounted(() => {
+              document.addEventListener("click", handleExtra, true);
+            });
+            vue.onBeforeUnmount(() => {
+              document.removeEventListener("click", handleExtra, true);
+            });
+          }
+          const propsData1 = vue.ref(propsData$);
+          const propsData2 = vue.ref();
+          leaf.propsData = propsData1;
+          const allowMounted = vue.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 && vue.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 = vue.reactive([]);
-  vue.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);
-    }
-  });
-  vue.onMounted(() => {
-    if (props.prop) {
-      form.add?.(instance);
-      initialValue = lodashEs.cloneDeep(fieldValue.value);
-    }
-    formItem.add?.(instance);
-  });
-  vue.onBeforeUnmount(() => {
-    form.remove?.(instance);
-    formItem.remove?.(instance);
-  });
-  vue.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);
     }
-  );
-  vue.watch(
-    () => formItem.fields?.length,
-    async (v) => {
-      if (!isNest.value || !v) return isNestLast.value = false;
-      const fields$ = [...vue.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__ */ vue.defineComponent({
+  name: COMPONENT_NAME$16,
+  props: props$X,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      /**
+       * 考虑占位的情况下需要渲染default
+       */
+      return vue.h(vue.Fragment, [vue.h(props.tag, {
+        class: 'vc-portal-view'
+      }, slots?.default?.()), vue.h(vue.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]' && !vue.isVNode(s);
+}
+const COMPONENT_NAME$15 = 'vc-drawer';
+const DrawerView = /* @__PURE__ */ vue.defineComponent({
+  name: COMPONENT_NAME$15,
+  props: props$W,
+  emits: ['close', 'update:modelValue', 'visible-change'],
+  setup(props, {
+    emit,
+    slots,
+    expose
+  }) {
+    const instance = vue.getCurrentInstance();
+    const isActive = vue.ref(false);
+    const classes = vue.computed(() => {
+      return {
+        [`is-${props.placement}`]: true
+      };
+    });
+    const style = vue.computed(() => {
+      return props.placement === 'top' || props.placement === 'bottom' ? {
+        height: `${props.height}px`
+      } : {
+        width: `${props.width}px`
+      };
+    });
+    vue.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);
+    };
+    vcHooks.useScrollbar(isActive);
+    expose({
+      isActive,
+      // for portal
+      toggle(v) {
+        v = typeof v === 'boolean' ? v : !isActive.value;
+        isActive.value = v;
+      }
+    });
+    return () => {
+      let _slot, _slot2;
+      return vue.createVNode("div", {
+        "class": [classes.value, 'vc-drawer']
+      }, [vue.createVNode(TransitionFade, {
+        "delay": 50
+      }, _isSlot$1(_slot = vue.withDirectives(vue.createVNode("div", {
+        "style": props.maskStyle,
+        "class": "vc-drawer__mask",
+        "onClick": e => handleClose(e, props.maskClosable)
+      }, null), [[vue.vShow, props.mask && isActive.value]])) ? _slot : {
+        default: () => [_slot]
+      }), vue.createVNode(TransitionSlide, {
+        "mode": props.placement,
+        "onAfterLeave": handleRemove
+      }, _isSlot$1(_slot2 = vue.withDirectives(vue.createVNode("div", {
+        "class": [props.wrapperClass, 'vc-drawer__wrapper'],
+        "style": [style.value, props.wrapperStyle]
+      }, [vue.createVNode("div", {
+        "class": "vc-drawer__container"
+      }, [vue.createVNode("div", {
+        "class": "vc-drawer__header"
+      }, [slots.header ? slots.header() : typeof props.title === 'string' ? vue.createVNode("div", {
+        "class": "vc-drawer__title",
+        "innerHTML": props.title
+      }, null) : typeof props.title === 'function' && vue.createVNode(Customer, {
+        "render": props.title
+      }, null), vue.createVNode("a", {
+        "class": "vc-drawer__close",
+        "onClick": e => handleClose(e, true)
+      }, [vue.createVNode(Icon, {
+        "type": "close"
+      }, null)])]), vue.createVNode("div", {
+        "class": ['vc-drawer__content']
+      }, [typeof props.content === 'string' ? vue.createVNode("div", {
+        "innerHTML": props.content
+      }, null) : typeof props.content === 'function' ? vue.createVNode(Customer, {
+        "render": props.content
+      }, null) : null, slots.default?.()]), props.footer && (props.cancelText || props.okText) && vue.createVNode("div", {
+        "class": ['vc-drawer__footer']
+      }, [slots['footer-extra']?.(), !slots.footer ? vue.createVNode(vue.Fragment, null, [props.cancelText && vue.createVNode(Button, {
+        "style": "margin-right: 8px;",
+        "onClick": e => handleBefore(e, handleCancel)
+      }, {
+        default: () => [props.cancelText]
+      }), props.okText && vue.createVNode(Button, {
+        "type": "primary",
+        "onClick": e => handleBefore(e, handleOk)
+      }, {
+        default: () => [props.okText]
+      })]) : slots.footer?.()])])]), [[vue.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$11 = 'vc-form-item';
-const FormItem = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$11,
-  props: props$S,
+const COMPONENT_NAME$14 = 'vc-dropdown';
+const Dropdown = /* @__PURE__ */ vue.defineComponent({
+  name: COMPONENT_NAME$14,
+  props: props$V,
   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 vue.createVNode("div", {
-        "class": ['vc-form-item', classes.value]
-      }, [vue.createVNode("div", {
-        "style": labelStyle.value,
-        "class": "vc-form-item__label",
-        "for": labelFor
-      }, [vue.createVNode("label", null, [label || slots.label?.()])]), vue.createVNode("div", {
-        "class": "vc-form-item__wrapper"
-      }, [vue.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
-      }) : vue.createVNode(TransitionFade, null, {
-        default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": ['vc-form-item__tip', isNest.value ? 'is-nest' : '', errorColorClass]
-        }, [validateMessage.value]), [[vue.vShow, showError.value]])]
-      })])])]);
+        "class": "vc-dropdown"
+      }, [slots?.default?.()]);
     };
   }
 });
 
-const props$R = {
-  ...props$T,
-  showToast: {
-    type: Boolean,
-    default: false
-  },
-  border: {
-    type: Boolean,
-    default: false
+const MDropdown = Dropdown;
+
+const props$U = {
+  tag: {
+    type: String,
+    default: "div"
   }
 };
 
-const props$Q = {
-  content: [String, Function],
-  maskClosable: {
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$13 = 'vc-editor';
+const Editor = /* @__PURE__ */ vue.defineComponent({
+  name: COMPONENT_NAME$13,
+  props: props$U,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return vue.createVNode("div", {
+        "class": "vc-editor"
+      }, [slots?.default?.()]);
+    };
+  }
+});
+
+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: true
   },
-  duration: {
-    type: Number,
-    default: 3e3
+  inline: {
+    type: Boolean,
+    default: false
   },
-  mode: {
+  labelPosition: {
     type: String,
-    default: "info",
-    validator: (val) => ["info", "loading", "success", "warning", "error"].includes(val)
+    default: "right"
+  },
+  autocomplete: {
+    type: String,
+    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__ */ vue.defineComponent({
-  name: COMPONENT_NAME$10,
-  emits: ['close', 'portal-fulfilled'],
-  props: props$Q,
-  setup(props, {
-    emit,
-    expose
-  }) {
-    const isVisible = vue.ref(false);
-
-    // 兼容Portal设计
-    const handleRemove = () => {
-      emit('close');
-      emit('portal-fulfilled');
-    };
-    const handleClose = () => {
-      if (props.maskClosable) {
-        isVisible.value = false;
-      }
-    };
-    let timer;
-    vue.onMounted(() => {
-      isVisible.value = true;
-      if (props.duration !== 0) {
-        timer = setTimeout(() => {
-          // 主线程
-          isVisible.value = false;
-        }, props.duration - 300); // 动画时间
-      }
+const useForm = (expose, options = {}) => {
+  const instance = vue.getCurrentInstance();
+  const props = instance.props;
+  const fields = [];
+  vue.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"
     });
-    vue.onUnmounted(() => {
-      timer && clearTimeout(timer);
+  };
+  const reset = (options$ = {}) => {
+    const { fields: fields$, original = {} } = options$;
+    filterFields(fields$).forEach((field) => {
+      let v;
+      try {
+        v = Utils.getPropByPath(original, field.props.prop).v;
+      } catch {
+      }
+      field.exposed.reset(v);
     });
-    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 = vue.defineComponent({
+  name: COMPONENT_NAME$12,
+  props: props$T,
+  setup(props, { slots, expose }) {
+    useForm(expose);
     return () => {
-      return vue.createVNode("div", {
-        "class": "vcm-toast"
-      }, [vue.createVNode("div", {
-        "class": "vcm-toast__bg",
-        "onClick": handleClose,
-        "onTouchmove": vue.withModifiers(() => {}, ['prevent'])
-      }, null), vue.createVNode(MTransitionFade, {
-        "duration": {
-          enter: 300,
-          leave: 150
+      return vue.h(
+        props.tag,
+        {
+          class: "vc-form",
+          autocomplete: props.autocomplete
         },
-        "onAfterLeave": handleRemove
-      }, {
-        default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": "vcm-toast__wrapper"
-        }, [props.mode === 'loading' && vue.createVNode(MSpin, {
-          "class": "vcm-toast__loading"
-        }, null), typeof props.content === 'string' ? vue.createVNode("div", {
-          "class": "vcm-toast__content",
-          "innerHTML": props.content
-        }, null) : typeof props.content === 'function' ? vue.createVNode(MCustomer, {
-          "render": props.content
-        }, null) : null]), [[vue.vShow, isVisible.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 = vue.inject("form");
+  const instance = vue.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;
-      } 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();
-        }
+  const formItem = vue.inject("vc-form-item", {});
+  const validateState = vue.ref("");
+  const validateMessage = vue.ref("");
+  let validateDisabled = false;
+  let initialValue;
+  const currentRules = vue.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 } = Utils.getPropByPath(formRules, key);
+        formItemRules = toRules(v);
+      } catch {
+        const rules = formRules[props.prop];
+        formItemRules = toRules(rules);
       }
-    } catch (e) {
-      /* istanbul ignore next -- @preserve */
-      throw new VcError("instance", e);
-    }
-  }
-  /**
-   * 清理全部Portals
-   */
-  static clearAll() {
-    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__namespace.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);
-      };
-    });
-    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 formItemRules;
+  });
+  const isRequired = vue.computed(() => {
+    if (!currentRules.value.length) {
+      return !!props.required;
     }
-  };
-  getDefaultOptions() {
+    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 = vue.computed(() => {
+    return props.labelPosition || form.props.labelPosition;
+  });
+  const classes = vue.computed(() => {
     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__namespace.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;
+      "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 $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 isNest = vue.computed(() => {
+    return !!formItem.change;
+  });
+  const isNestLast = vue.ref(false);
+  const hasLabel = vue.computed(() => {
+    return !!props.label || slots.label;
+  });
+  const labelStyle = vue.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 $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 = vue.createApp({
-        name: COMPONENT_NAME$$,
-        parent,
-        setup() {
-          if (alive) {
-            const handleExtra = (e) => {
-              try {
-                const path = e.path || $__namespace.composedPath(e);
-                /* istanbul ignore else -- @preserve */
-                if (container && e.target && !container.contains(e.target) && !path?.some((item) => vcShared.Utils.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);
-              }
-            };
-            vue.onMounted(() => {
-              document.addEventListener("click", handleExtra, true);
-            });
-            vue.onBeforeUnmount(() => {
-              document.removeEventListener("click", handleExtra, true);
-            });
-          }
-          const propsData1 = vue.ref(propsData$);
-          const propsData2 = vue.ref();
-          leaf.propsData = propsData1;
-          const allowMounted = vue.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 && vue.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]);
+  });
+  const contentStyle = vue.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 = vue.computed(() => {
+    return props.styleless || form.props.styleless;
+  });
+  const fieldValue = vue.computed(() => {
+    const model = form.props.model;
+    if (!model || !props.prop) {
+      return;
+    }
+    let path = props.prop;
+    if (path.includes(":")) {
+      path = path.replace(/:/, ".");
+    }
+    return Utils.getPropByPath(model, path).v;
+  });
+  const showError = vue.computed(() => {
+    return validateState.value === "error" && props.showMessage && form.props.showMessage;
+  });
+  vue.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 } = Utils.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
+        }];
       }
-      install?.(app);
-      app.mount(container);
     }
-    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();
+    validateState.value = "validating";
+    const descriptor = {};
+    descriptor[props.prop] = rules;
+    const validator = new helperValidator.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;
       }
-      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 = vue.reactive([]);
+  vue.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);
+    }
+  });
+  vue.onMounted(() => {
+    if (props.prop) {
+      form.add?.(instance);
+      initialValue = lodashEs.cloneDeep(fieldValue.value);
+    }
+    formItem.add?.(instance);
+  });
+  vue.onBeforeUnmount(() => {
+    form.remove?.(instance);
+    formItem.remove?.(instance);
+  });
+  vue.watch(
+    () => props.rules,
+    () => {
+      props.resetByRulesChanged && reset();
+    }
+  );
+  vue.watch(
+    () => formItem.fields?.length,
+    async (v) => {
+      if (!isNest.value || !v) return isNestLast.value = false;
+      const fields$ = [...vue.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__ */ vue.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 vue.createVNode("div", {
+        "class": ['vc-form-item', classes.value]
+      }, [vue.createVNode("div", {
+        "style": labelStyle.value,
+        "class": "vc-form-item__label",
+        "for": labelFor
+      }, [vue.createVNode("label", null, [label || slots.label?.()])]), vue.createVNode("div", {
+        "class": "vc-form-item__wrapper"
+      }, [vue.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
+      }) : vue.createVNode(TransitionFade, null, {
+        default: () => [vue.withDirectives(vue.createVNode("div", {
+          "class": ['vc-form-item__tip', isNest.value ? 'is-nest' : '', errorColorClass]
+        }, [validateMessage.value]), [[vue.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;
+
+const MTransition = Transition;
+const MTransitionCollapse = TransitionCollapse;
+const MTransitionFade = TransitionFade;
+const MTransitionScale = TransitionScale;
+const MTransitionSlide = TransitionSlide;
+const MTransitionZoom = TransitionZoom;
 
-/**
- * 写法不同，但与vue@2.x 保持一致
- */
-const PortalView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$_,
-  props: props$P,
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$10 = 'vcm-toast';
+const MToastView = /* @__PURE__ */ vue.defineComponent({
+  name: COMPONENT_NAME$10,
+  emits: ['close', 'portal-fulfilled'],
+  props: props$Q,
   setup(props, {
-    slots
+    emit,
+    expose
   }) {
+    const isActive = vue.ref(false);
+    const currentContent = vue.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;
+      }
+    };
+    vue.watch(() => props.content, setContent, {
+      immediate: true
+    });
+    vue.onMounted(() => {
+      isActive.value = true;
+      setDuration(props.duration);
+    });
+    vue.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 vue.h(vue.Fragment, [vue.h(props.tag, {
-        class: 'vc-portal-view'
-      }, slots?.default?.()), vue.h(vue.Teleport, {
-        to: 'body'
-      }, slots?.content?.())]);
+      return vue.createVNode("div", {
+        "class": "vcm-toast"
+      }, [vue.createVNode("div", {
+        "class": "vcm-toast__bg",
+        "onClick": handleClose,
+        "onTouchmove": vue.withModifiers(() => {}, ['prevent'])
+      }, null), vue.createVNode(MTransitionFade, {
+        "duration": {
+          enter: 300,
+          leave: 150
+        },
+        "onAfterLeave": handleRemove
+      }, {
+        default: () => [vue.withDirectives(vue.createVNode("div", {
+          "class": "vcm-toast__wrapper"
+        }, [props.mode === 'loading' && vue.createVNode(MSpin, {
+          "class": "vcm-toast__loading"
+        }, null), typeof currentContent.value === 'string' ? vue.createVNode("div", {
+          "class": "vcm-toast__content",
+          "innerHTML": currentContent.value
+        }, null) : typeof currentContent.value === 'function' ? vue.createVNode(MCustomer, {
+          "render": currentContent.value
+        }, null) : null]), [[vue.vShow, isActive.value]])]
+      })]);
     };
   }
 });
@@ -2792,9 +3209,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 = vue.defineComponent({
-  name: COMPONENT_NAME$Z,
+  name: COMPONENT_NAME$$,
   props: props$R,
   setup(props, { slots, expose }) {
     useForm(expose, {
@@ -2815,7 +3232,7 @@ const MForm = vue.defineComponent({
   }
 });
 
-const props$O = {
+const props$P = {
   ...props$S,
   indent: {
     type: Number,
@@ -2825,10 +3242,10 @@ const props$O = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$Y = 'vcm-form-item';
+const COMPONENT_NAME$_ = 'vcm-form-item';
 const MFormItem = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$Y,
-  props: props$O,
+  name: COMPONENT_NAME$_,
+  props: props$P,
   setup(props, {
     slots,
     expose
@@ -2881,9 +3298,9 @@ const MFormItem = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$X = "vc-fragment";
+const COMPONENT_NAME$Z = "vc-fragment";
 const Fragment = vue.defineComponent({
-  name: COMPONENT_NAME$X,
+  name: COMPONENT_NAME$Z,
   setup(_, { slots }) {
     return () => vue.h(vue.Fragment, slots.default?.());
   }
@@ -2891,7 +3308,7 @@ const Fragment = vue.defineComponent({
 
 const MFragment = Fragment;
 
-const props$N = {
+const props$O = {
   tag: {
     type: String,
     default: "div"
@@ -2900,10 +3317,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__ */ vue.defineComponent({
-  name: COMPONENT_NAME$W,
-  props: props$N,
+  name: COMPONENT_NAME$Y,
+  props: props$O,
   setup(props, {
     slots
   }) {
@@ -2919,7 +3336,7 @@ const MHTMLToImage = HTMLToImage;
 
 const MIcon = Icon;
 
-const props$M = {
+const props$N = {
   src: String,
   fit: String,
   lazy: Boolean,
@@ -2978,7 +3395,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 = !vcShared.IS_SERVER && document.documentElement.style.objectFit !== undefined;
@@ -2991,9 +3408,9 @@ const ObjectFit = {
   SCALE_DOWN: 'scale-down'
 };
 const Image = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$V,
+  name: COMPONENT_NAME$X,
   inheritAttrs: false,
-  props: props$M,
+  props: props$N,
   setup(props, {
     slots,
     emit
@@ -3187,7 +3604,7 @@ const Image = /* @__PURE__ */ vue.defineComponent({
 
 const MImage = Image;
 
-const props$L = {
+const props$M = {
   tag: {
     type: String,
     default: "div"
@@ -3196,10 +3613,10 @@ const props$L = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$U = 'vc-image-crop';
+const COMPONENT_NAME$W = 'vc-image-crop';
 const ImageCrop = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$U,
-  props: props$L,
+  name: COMPONENT_NAME$W,
+  props: props$M,
   setup(props, {
     slots
   }) {
@@ -3213,7 +3630,7 @@ const ImageCrop = /* @__PURE__ */ vue.defineComponent({
 
 const MImageCrop = ImageCrop;
 
-const props$K = {
+const props$L = {
   tag: {
     type: String,
     default: "div"
@@ -3222,10 +3639,10 @@ const props$K = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$T = 'vc-image-preview';
+const COMPONENT_NAME$V = 'vc-image-preview';
 const ImagePreview = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$T,
-  props: props$K,
+  name: COMPONENT_NAME$V,
+  props: props$L,
   setup(props, {
     slots
   }) {
@@ -3239,7 +3656,7 @@ const ImagePreview = /* @__PURE__ */ vue.defineComponent({
 
 const MImagePreview = ImagePreview;
 
-const props$J = {
+const props$K = {
   tag: {
     type: String,
     default: "div"
@@ -3248,10 +3665,10 @@ const props$J = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$S = 'vc-image-processing';
+const COMPONENT_NAME$U = 'vc-image-processing';
 const ImageProcessing = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$S,
-  props: props$J,
+  name: COMPONENT_NAME$U,
+  props: props$K,
   setup(props, {
     slots
   }) {
@@ -3265,7 +3682,7 @@ const ImageProcessing = /* @__PURE__ */ vue.defineComponent({
 
 const MImageProcessing = ImageProcessing;
 
-const props$I = {
+const props$J = {
   // Array, 作为select等数组存放临时值
   modelValue: {
     type: [String, Number, Array],
@@ -3364,7 +3781,7 @@ const useInput = (input) => {
   const isFocus = vue.ref(false);
   const isClearing = vue.ref(false);
   const isOnComposition = vue.ref(false);
-  const formItem = vue.inject("form-item", {});
+  const formItem = vue.inject("vc-form-item", {});
   vue.watch(
     () => props.modelValue,
     (v) => {
@@ -3519,12 +3936,12 @@ const useNativeEmitter = (input, expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$R = 'vc-input';
+const COMPONENT_NAME$T = 'vc-input';
 const Input = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$R,
+  name: COMPONENT_NAME$T,
   inheritAttrs: false,
   props: {
-    ...props$I,
+    ...props$J,
     indicator: {
       type: [Boolean, Object],
       default: false
@@ -3625,8 +4042,8 @@ const Input = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const props$H = {
-  ...props$I,
+const props$I = {
+  ...props$J,
   min: {
     type: Number,
     default: 0
@@ -3841,10 +4258,10 @@ const useInputNumber = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$Q = 'vc-input-number';
+const COMPONENT_NAME$S = 'vc-input-number';
 const InputNumber = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$Q,
-  props: props$H,
+  name: COMPONENT_NAME$S,
+  props: props$I,
   inheritAttrs: false,
   setup(props, {
     slots,
@@ -3895,8 +4312,8 @@ const InputNumber = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const props$G = {
-  ...props$I,
+const props$H = {
+  ...props$J,
   enterText: {
     type: [Boolean, String],
     default: true
@@ -3905,10 +4322,10 @@ const props$G = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$P = 'vc-input-search';
+const COMPONENT_NAME$R = 'vc-input-search';
 const InputSearch = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$P,
-  props: props$G,
+  name: COMPONENT_NAME$R,
+  props: props$H,
   inheritAttrs: false,
   setup(props, {
     emit,
@@ -3942,12 +4359,12 @@ const InputSearch = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$O = 'vcm-input';
+const COMPONENT_NAME$Q = 'vcm-input';
 const MInput = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$O,
+  name: COMPONENT_NAME$Q,
   inheritAttrs: false,
   props: {
-    ...props$I,
+    ...props$J,
     right: {
       type: Boolean,
       default: false
@@ -4033,10 +4450,10 @@ const MInput = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$N = 'vcm-input-number';
+const COMPONENT_NAME$P = 'vcm-input-number';
 const MInputNumber = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$N,
-  props: props$H,
+  name: COMPONENT_NAME$P,
+  props: props$I,
   inheritAttrs: false,
   setup(props, {
     slots,
@@ -4084,11 +4501,11 @@ const MInputNumber = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$M = 'vcm-input-search';
+const COMPONENT_NAME$O = 'vcm-input-search';
 const MInputSearch = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$M,
+  name: COMPONENT_NAME$O,
   props: {
-    ...props$G,
+    ...props$H,
     cancelText: {
       type: String,
       default: '取消'
@@ -4148,7 +4565,7 @@ const MInputSearch = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const props$F = {
+const props$G = {
   tag: {
     type: String,
     default: "div"
@@ -4163,12 +4580,12 @@ const props$F = {
   }
 };
 
-const COMPONENT_NAME$L = "vcm-list";
+const COMPONENT_NAME$N = "vcm-list";
 const MList = vue.defineComponent({
-  name: COMPONENT_NAME$L,
-  props: props$F,
+  name: COMPONENT_NAME$N,
+  props: props$G,
   setup(props, { slots }) {
-    vue.provide("list", { props });
+    vue.provide("vc-list", { props });
     return () => {
       return vue.h(
         props.tag,
@@ -4186,7 +4603,7 @@ const MList = vue.defineComponent({
   }
 });
 
-const props$E = {
+const props$F = {
   tag: {
     type: String,
     default: "div"
@@ -4220,17 +4637,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__ */ vue.defineComponent({
-  name: COMPONENT_NAME$K,
-  props: props$E,
+  name: COMPONENT_NAME$M,
+  props: props$F,
   emits: ['click'],
   setup(props, {
     slots,
     emit
   }) {
-    const list = vue.inject('list', {});
+    const list = vue.inject('vc-list', {});
     const classes = vue.computed(() => {
       const hasList = !!list.props;
       return {
@@ -4298,7 +4715,7 @@ const MListItem = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const props$D = {
+const props$E = {
   tag: {
     type: String,
     default: "div"
@@ -4307,10 +4724,10 @@ const props$D = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$J = 'vc-marquee';
+const COMPONENT_NAME$L = 'vc-marquee';
 const Marquee = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$J,
-  props: props$D,
+  name: COMPONENT_NAME$L,
+  props: props$E,
   setup(props, {
     slots
   }) {
@@ -4324,7 +4741,7 @@ const Marquee = /* @__PURE__ */ vue.defineComponent({
 
 const MMarquee = Marquee;
 
-const props$C = {
+const props$D = {
   content: [String, Function],
   mask: {
     type: Boolean,
@@ -4338,6 +4755,7 @@ const props$C = {
     type: Boolean,
     default: true
   },
+  // 单位ms
   duration: {
     type: Number,
     default: 1500
@@ -4361,17 +4779,27 @@ const props$C = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$I = 'vc-message';
+const COMPONENT_NAME$K = 'vc-message';
 const MessageView = /* @__PURE__ */ vue.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
   }) {
     const instance = vue.getCurrentInstance();
     const isActive = vue.ref(false);
+    const currentContent = vue.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 = () => {
@@ -4391,15 +4819,12 @@ const MessageView = /* @__PURE__ */ vue.defineComponent({
         isActive.value = false;
       }
     };
-    let timer;
+    vue.watch(() => props.content, setContent, {
+      immediate: true
+    });
     vue.onMounted(() => {
       isActive.value = true;
-      if (props.duration !== 0) {
-        timer = setTimeout(() => {
-          // 主线程
-          isActive.value = false;
-        }, props.duration * 1000 - 300); // 动画时间
-      }
+      setDuration(props.duration);
     });
     vue.onUnmounted(() => {
       timer && clearTimeout(timer);
@@ -4407,7 +4832,10 @@ const MessageView = /* @__PURE__ */ vue.defineComponent({
     const exposes = ['destroy', 'remove', 'close', 'hide'].reduce((pre, key) => {
       pre[key] = handleRemove;
       return pre;
-    }, {});
+    }, {
+      setContent,
+      setDuration
+    });
     expose(exposes);
     return () => {
       return vue.createVNode("div", {
@@ -4416,7 +4844,7 @@ const MessageView = /* @__PURE__ */ vue.defineComponent({
         "class": "vc-message__mask",
         "onClick": e => handleClose(e, props.maskClosable)
       }, null), vue.createVNode(TransitionSlide, {
-        "mode": "up",
+        "mode": "bottom",
         "onAfterLeave": handleRemove
       }, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
@@ -4434,11 +4862,11 @@ const MessageView = /* @__PURE__ */ vue.defineComponent({
         }, null) : vue.createVNode(Icon, {
           "type": props.mode,
           "class": [`is-${props.mode}`, 'vc-message__icon']
-        }, null), typeof props.content === 'string' ? vue.createVNode("div", {
+        }, null), typeof currentContent.value === 'string' ? vue.createVNode("div", {
           "class": "vc-message__content",
-          "innerHTML": props.content
-        }, null) : typeof props.content === 'function' ? vue.createVNode(Customer, {
-          "render": props.content
+          "innerHTML": currentContent.value
+        }, null) : typeof currentContent.value === 'function' ? vue.createVNode(Customer, {
+          "render": currentContent.value
         }, null) : null, props.closable && vue.createVNode(Icon, {
           "type": "close",
           "class": "vc-message__close",
@@ -4496,7 +4924,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
@@ -4576,12 +5004,12 @@ const props$B = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$H = 'vc-modal';
+const COMPONENT_NAME$J = 'vc-modal';
 let zIndexNumber = 1002;
 const ModalView = /* @__PURE__ */ vue.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,
@@ -4808,6 +5236,10 @@ const ModalView = /* @__PURE__ */ vue.defineComponent({
     expose({
       isActive,
       // for portal
+      toggle(v) {
+        v = typeof v === 'boolean' ? v : !isActive.value;
+        isActive.value = v;
+      },
       resetOrigin
     });
     return () => {
@@ -4898,7 +5330,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();
@@ -4916,7 +5348,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),
@@ -4978,11 +5410,11 @@ const props$A = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$G = 'vc-modal';
+const COMPONENT_NAME$I = 'vc-modal';
 const MModalView = /* @__PURE__ */ vue.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,
@@ -5155,12 +5587,13 @@ 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
   duration: {
     type: Number,
-    default: 450
+    default: 4500
   },
   closable: {
     type: Boolean,
@@ -5184,29 +5617,31 @@ const props$z = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$F = 'vc-notice';
+const COMPONENT_NAME$H = 'vc-notice';
 const NoticeView = /* @__PURE__ */ vue.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 = vue.getCurrentInstance();
     const isActive = vue.ref(false);
+    const currentTitle = vue.ref();
+    const currentContent = vue.ref();
     let timer;
-    vue.onMounted(() => {
-      isActive.value = true;
-      if (props.duration !== 0) {
-        timer = setTimeout(() => {
-          // 主线程
-          isActive.value = false;
-        }, props.duration * 1000 - 300); // 动画时间
-      }
-    });
-    vue.onUnmounted(() => {
+    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;
+    };
 
     // 兼容Portal设计
     const handleRemove = () => {
@@ -5226,6 +5661,27 @@ const NoticeView = /* @__PURE__ */ vue.defineComponent({
         isActive.value = false;
       }
     };
+    vue.watch(() => props.title, setTitle, {
+      immediate: true
+    });
+    vue.watch(() => props.content, setContent, {
+      immediate: true
+    });
+    vue.onMounted(() => {
+      isActive.value = true;
+      setDuration(props.duration);
+    });
+    vue.onUnmounted(() => {
+      timer && clearTimeout(timer);
+    });
+    const exposes = ['destroy', 'remove', 'close', 'hide'].reduce((pre, key) => {
+      pre[key] = handleRemove;
+      return pre;
+    }, {
+      setContent,
+      setDuration
+    });
+    expose(exposes);
     return () => {
       return vue.createVNode("div", {
         "class": ['vc-notice', {
@@ -5245,21 +5701,21 @@ const NoticeView = /* @__PURE__ */ vue.defineComponent({
         }, [props.mode && vue.createVNode(Icon, {
           "type": `o-${props.mode}`,
           "class": [`is-${props.mode}`, 'vc-notice__icon']
-        }, null), vue.createVNode("div", null, [props.title && vue.createVNode("div", {
+        }, null), vue.createVNode("div", null, [currentTitle.value && vue.createVNode("div", {
           "style": [{
-            marginBottom: props.content ? '8px' : ''
+            marginBottom: currentContent.value ? '8px' : ''
           }],
           "class": "vc-notice__title"
-        }, [typeof props.title === 'string' ? vue.createVNode("div", {
-          "innerHTML": props.title
-        }, null) : typeof props.title === 'function' ? vue.createVNode(Customer, {
-          "render": props.title
-        }, null) : null]), props.content && vue.createVNode("div", {
+        }, [typeof currentTitle.value === 'string' ? vue.createVNode("div", {
+          "innerHTML": currentTitle.value
+        }, null) : typeof currentTitle.value === 'function' ? vue.createVNode(Customer, {
+          "render": currentTitle.value
+        }, null) : null]), currentContent.value && vue.createVNode("div", {
           "class": "vc-notice__content"
-        }, [typeof props.content === 'string' ? vue.createVNode("div", {
-          "innerHTML": props.content
-        }, null) : typeof props.content === 'function' ? vue.createVNode(Customer, {
-          "render": props.content
+        }, [typeof currentContent.value === 'string' ? vue.createVNode("div", {
+          "innerHTML": currentContent.value
+        }, null) : typeof currentContent.value === 'function' ? vue.createVNode(Customer, {
+          "render": currentContent.value
         }, null) : null])]), props.closable && vue.createVNode(Icon, {
           "type": "close",
           "style": "font-size: 12px",
@@ -5336,7 +5792,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"
@@ -5345,10 +5801,10 @@ const props$y = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$E = 'vc-option';
+const COMPONENT_NAME$G = 'vc-option';
 const Option = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$E,
-  props: props$y,
+  name: COMPONENT_NAME$G,
+  props: props$z,
   setup(props, {
     slots
   }) {
@@ -5362,7 +5818,7 @@ const Option = /* @__PURE__ */ vue.defineComponent({
 
 const MOption = Option;
 
-const props$x = {
+const props$y = {
   tag: {
     type: String,
     default: "div"
@@ -5371,10 +5827,10 @@ const props$x = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$D = 'vc-page';
+const COMPONENT_NAME$F = 'vc-page';
 const Page = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$D,
-  props: props$x,
+  name: COMPONENT_NAME$F,
+  props: props$y,
   setup(props, {
     slots
   }) {
@@ -5388,7 +5844,7 @@ const Page = /* @__PURE__ */ vue.defineComponent({
 
 const MPage = Page;
 
-const props$w = {
+const props$x = {
   tag: {
     type: String,
     default: "div"
@@ -5397,10 +5853,10 @@ const props$w = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$C = 'vc-picker';
+const COMPONENT_NAME$E = 'vc-picker';
 const Picker = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$C,
-  props: props$w,
+  name: COMPONENT_NAME$E,
+  props: props$x,
   setup(props, {
     slots
   }) {
@@ -5414,7 +5870,7 @@ const Picker = /* @__PURE__ */ vue.defineComponent({
 
 const MPicker = Picker;
 
-const props$v = {
+const props$w = {
   tag: {
     type: String,
     default: "div"
@@ -5423,10 +5879,10 @@ const props$v = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$B = 'vc-popconfirm';
+const COMPONENT_NAME$D = 'vc-popconfirm';
 const Popconfirm = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$B,
-  props: props$v,
+  name: COMPONENT_NAME$D,
+  props: props$w,
   setup(props, {
     slots
   }) {
@@ -5440,7 +5896,7 @@ const Popconfirm = /* @__PURE__ */ vue.defineComponent({
 
 const MPopconfirm = Popconfirm;
 
-const props$u = {
+const props$v = {
   modelValue: Boolean,
   animation: String,
   placement: {
@@ -5519,7 +5975,7 @@ const wrapperKeys = [
   "autoWidth",
   "always"
 ];
-const props$t = {
+const props$u = {
   trigger: {
     type: String,
     default: "hover",
@@ -5537,7 +5993,7 @@ const props$t = {
     type: Boolean,
     default: true
   },
-  ...lodashEs.pick(props$u, wrapperKeys)
+  ...lodashEs.pick(props$v, wrapperKeys)
 };
 
 const EXTRA_DISTANCE = 4;
@@ -5798,10 +6254,10 @@ const usePos = () => {
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-const COMPONENT_NAME$A = 'vc-popover-wrapper';
+const COMPONENT_NAME$C = 'vc-popover-wrapper';
 const PopoverWrapper = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$A,
-  props: props$u,
+  name: COMPONENT_NAME$C,
+  props: props$v,
   emits: ['portal-fulfilled', 'close'],
   setup(props, {
     emit,
@@ -6011,7 +6467,11 @@ const PopoverWrapper = /* @__PURE__ */ vue.defineComponent({
       props.alone && props.hover && removeEvents();
     });
     expose({
-      isActive
+      isActive,
+      toggle(v) {
+        v = typeof v === 'boolean' ? v : !isActive.value;
+        isActive.value = v;
+      }
     });
     return () => {
       let _slot;
@@ -6051,10 +6511,10 @@ const PopoverPortal = new Portal(PopoverWrapper);
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$z = 'vc-popover';
+const COMPONENT_NAME$B = 'vc-popover';
 const Popover = /* @__PURE__ */ vue.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, {
@@ -6148,7 +6608,7 @@ const Popover = /* @__PURE__ */ vue.defineComponent({
           portalClass
         });
       } else if (popperInstance && popperInstance.wrapper) {
-        popperInstance.wrapper.isActive = false;
+        popperInstance.wrapper.toggle(false);
       }
     };
     vue.watch(() => props.modelValue, v => {
@@ -6191,7 +6651,7 @@ const Popover = /* @__PURE__ */ vue.defineComponent({
 
 const MPopover = Popover;
 
-const props$s = {
+const props$t = {
   tag: {
     type: String,
     default: "div"
@@ -6200,10 +6660,10 @@ const props$s = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$y = 'vc-popup';
+const COMPONENT_NAME$A = 'vc-popup';
 const Popup = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$y,
-  props: props$s,
+  name: COMPONENT_NAME$A,
+  props: props$t,
   setup(props, {
     slots
   }) {
@@ -6219,7 +6679,7 @@ const MPopup = Popup;
 
 const MPortal = Portal;
 
-const props$r = {
+const props$s = {
   tag: {
     type: String,
     default: "div"
@@ -6228,10 +6688,10 @@ const props$r = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$x = 'vc-print';
+const COMPONENT_NAME$z = 'vc-print';
 const Print = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$x,
-  props: props$r,
+  name: COMPONENT_NAME$z,
+  props: props$s,
   setup(props, {
     slots
   }) {
@@ -6245,7 +6705,7 @@ const Print = /* @__PURE__ */ vue.defineComponent({
 
 const MPrint = Print;
 
-const props$q = {
+const props$r = {
   tag: {
     type: String,
     default: "div"
@@ -6254,10 +6714,10 @@ const props$q = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$w = 'vc-progress';
+const COMPONENT_NAME$y = 'vc-progress';
 const Progress = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$w,
-  props: props$q,
+  name: COMPONENT_NAME$y,
+  props: props$r,
   setup(props, {
     slots
   }) {
@@ -6271,7 +6731,7 @@ const Progress = /* @__PURE__ */ vue.defineComponent({
 
 const MProgress = Progress;
 
-const props$p = {
+const props$q = {
   tag: {
     type: String,
     default: "div"
@@ -6280,10 +6740,10 @@ const props$p = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$v = 'vc-radio';
+const COMPONENT_NAME$x = 'vc-radio';
 const Radio = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$v,
-  props: props$p,
+  name: COMPONENT_NAME$x,
+  props: props$q,
   setup(props, {
     slots
   }) {
@@ -6297,7 +6757,7 @@ const Radio = /* @__PURE__ */ vue.defineComponent({
 
 const MRadio = Radio;
 
-const props$o = {
+const props$p = {
   tag: {
     type: String,
     default: "div"
@@ -6306,10 +6766,10 @@ const props$o = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$u = 'vc-rate';
+const COMPONENT_NAME$w = 'vc-rate';
 const Rate = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$u,
-  props: props$o,
+  name: COMPONENT_NAME$w,
+  props: props$p,
   setup(props, {
     slots
   }) {
@@ -6323,7 +6783,7 @@ const Rate = /* @__PURE__ */ vue.defineComponent({
 
 const MRate = Rate;
 
-const props$n = {
+const props$o = {
   data: {
     type: Array,
     default: () => []
@@ -6374,7 +6834,7 @@ const props$n = {
   renderRefresh: Function
 };
 
-const props$m = {
+const props$n = {
   vertical: Boolean,
   wrapperSize: {
     type: Number,
@@ -6429,7 +6889,7 @@ const barKeys$1 = [
   "thumbStyle",
   "thumbClass"
 ];
-const props$l = {
+const props$m = {
   // 	如果存在滚动条宽度为false, 不存在则为true
   // 	为false的情况下才能使用track-offset
   native: {
@@ -6460,7 +6920,7 @@ const props$l = {
   scrollX: Number,
   scrollY: Number,
   fit: Boolean,
-  ...lodashEs.pick(props$m, barKeys$1)
+  ...lodashEs.pick(props$n, barKeys$1)
 };
 
 const barKeys = [
@@ -6475,7 +6935,7 @@ const barKeys = [
   "autoResize",
   "native"
 ];
-const props$k = {
+const props$l = {
   tag: {
     type: String,
     default: "div"
@@ -6508,13 +6968,13 @@ const props$k = {
     type: Boolean,
     default: true
   },
-  barTo: props$l.to,
-  ...lodashEs.pick(props$l, barKeys)
+  barTo: props$m.to,
+  ...lodashEs.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',
@@ -6534,8 +6994,8 @@ const BAR_MAP = {
   }
 };
 const Track = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$t,
-  props: props$m,
+  name: COMPONENT_NAME$v,
+  props: props$n,
   emits: ['change'],
   setup(props, {
     emit,
@@ -6720,10 +7180,10 @@ const Track = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$s = 'vc-scroller-bar';
+const COMPONENT_NAME$u = 'vc-scroller-bar';
 const Bar = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$s,
-  props: props$l,
+  name: COMPONENT_NAME$u,
+  props: props$m,
   emits: ['change'],
   setup(props, {
     emit,
@@ -6936,7 +7396,7 @@ const useScroller = (expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$r = 'vc-scroller';
+const COMPONENT_NAME$t = 'vc-scroller';
 
 /**
  * 作为备选方案,目前推荐使用ScrollerWheel
@@ -6947,8 +7407,8 @@ const COMPONENT_NAME$r = 'vc-scroller';
  * 2. 增加了一层嵌套
  */
 const Scroller = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$r,
-  props: props$k,
+  name: COMPONENT_NAME$t,
+  props: props$l,
   emits: ['scroll'],
   setup(props, {
     slots,
@@ -7008,7 +7468,7 @@ const Scroller = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$q = 'vc-scroller-wheel';
+const COMPONENT_NAME$s = 'vc-scroller-wheel';
 
 /**
  * 为减少一层嵌套，为去除滚动bar的抖动，使用wheel模拟
@@ -7030,8 +7490,8 @@ const COMPONENT_NAME$q = 'vc-scroller-wheel';
  * 设置scrollTop不会reflow和repaint，不需要考虑transfrom来改变content（transform也只在draw完成）
  */
 const ScrollerWheel = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$q,
-  props: props$k,
+  name: COMPONENT_NAME$s,
+  props: props$l,
   emits: ['scroll'],
   setup(props, {
     slots,
@@ -7135,9 +7595,9 @@ const ScrollerWheel = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$p = 'vc-recycle-list-scroll-state';
+const COMPONENT_NAME$r = 'vc-recycle-list-scroll-state';
 const ScrollState = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$p,
+  name: COMPONENT_NAME$r,
   setup(_, {
     slots
   }) {
@@ -7208,7 +7668,7 @@ const STATUS_MAP = {
   }
 };
 
-const props$j = {
+const props$k = {
   inverted: {
     type: Boolean,
     default: false
@@ -7267,13 +7727,13 @@ const useDirectionKeys = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$o = 'vc-recycle-list-container';
+const COMPONENT_NAME$q = 'vc-recycle-list-container';
 
 // TODO: 抽离
 const transformKey = $__namespace.prefixStyle('transform').camel;
 const Container = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$o,
-  props: props$j,
+  name: COMPONENT_NAME$q,
+  props: props$k,
   emits: ['refresh'],
   setup(props, {
     slots
@@ -7370,16 +7830,16 @@ const Container = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$n = 'vc-recycle-list-item';
+const COMPONENT_NAME$p = 'vc-recycle-list-item';
 const Item = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$n,
+  name: COMPONENT_NAME$p,
   props: {
     vertical: {
       type: Boolean,
       default: true
     }
   },
-  emits: ['resize'],
+  emits: ['resize', 'change'],
   setup(_, {
     emit,
     slots
@@ -7391,9 +7851,10 @@ const Item = /* @__PURE__ */ vue.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;
     };
@@ -7414,10 +7875,10 @@ const Item = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$m = 'vc-recycle-list';
+const COMPONENT_NAME$o = 'vc-recycle-list';
 const RecycleList = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$m,
-  props: props$n,
+  name: COMPONENT_NAME$o,
+  props: props$o,
   emits: ['scroll'],
   setup(props, {
     slots,
@@ -7961,18 +8422,18 @@ const RecycleList = /* @__PURE__ */ vue.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 = vue.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 = vue.ref(0);
     const height = vue.ref(0);
@@ -7998,8 +8459,9 @@ const Resizer = vue.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;
     };
@@ -8026,7 +8488,7 @@ const MResizer = Resizer;
 
 const MScroller = Scroller;
 
-const props$h = {
+const props$i = {
   tag: {
     type: String,
     default: "div"
@@ -8035,10 +8497,10 @@ const props$h = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$k = 'vc-select';
+const COMPONENT_NAME$m = 'vc-select';
 const Select = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$k,
-  props: props$h,
+  name: COMPONENT_NAME$m,
+  props: props$i,
   setup(props, {
     slots
   }) {
@@ -8052,7 +8514,7 @@ const Select = /* @__PURE__ */ vue.defineComponent({
 
 const MSelect = Select;
 
-const props$g = {
+const props$h = {
   tag: {
     type: String,
     default: "div"
@@ -8061,10 +8523,10 @@ const props$g = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$j = 'vc-slider';
+const COMPONENT_NAME$l = 'vc-slider';
 const Slider = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$j,
-  props: props$g,
+  name: COMPONENT_NAME$l,
+  props: props$h,
   setup(props, {
     slots
   }) {
@@ -8078,7 +8540,7 @@ const Slider = /* @__PURE__ */ vue.defineComponent({
 
 const MSlider = Slider;
 
-const props$f = {
+const props$g = {
   tag: {
     type: String,
     default: "div"
@@ -8087,10 +8549,10 @@ const props$f = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$i = 'vc-sort-list';
+const COMPONENT_NAME$k = 'vc-sort-list';
 const SortList = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$i,
-  props: props$f,
+  name: COMPONENT_NAME$k,
+  props: props$g,
   setup(props, {
     slots
   }) {
@@ -8104,7 +8566,7 @@ const SortList = /* @__PURE__ */ vue.defineComponent({
 
 const MSortList = SortList;
 
-const props$e = {
+const props$f = {
   tag: {
     type: String,
     default: "div"
@@ -8113,10 +8575,10 @@ const props$e = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$h = 'vc-steps';
+const COMPONENT_NAME$j = 'vc-steps';
 const Steps = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$h,
-  props: props$e,
+  name: COMPONENT_NAME$j,
+  props: props$f,
   setup(props, {
     slots
   }) {
@@ -8130,7 +8592,7 @@ const Steps = /* @__PURE__ */ vue.defineComponent({
 
 const MSteps = Steps;
 
-const props$d = {
+const props$e = {
   tag: {
     type: String,
     default: "div"
@@ -8139,10 +8601,10 @@ const props$d = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$g = 'vc-switch';
+const COMPONENT_NAME$i = 'vc-switch';
 const Switch = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$g,
-  props: props$d,
+  name: COMPONENT_NAME$i,
+  props: props$e,
   setup(props, {
     slots
   }) {
@@ -8156,7 +8618,7 @@ const Switch = /* @__PURE__ */ vue.defineComponent({
 
 const MSwitch = Switch;
 
-const props$c = {
+const props$d = {
   tag: {
     type: String,
     default: "div"
@@ -8165,10 +8627,10 @@ const props$c = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$f = 'vc-table';
+const COMPONENT_NAME$h = 'vc-table';
 const Table = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$f,
-  props: props$c,
+  name: COMPONENT_NAME$h,
+  props: props$d,
   setup(props, {
     slots
   }) {
@@ -8182,7 +8644,7 @@ const Table = /* @__PURE__ */ vue.defineComponent({
 
 const MTable = Table;
 
-const props$b = {
+const props$c = {
   type: {
     type: String,
     validator: (v) => /^(line|card)$/.test(v),
@@ -8290,7 +8752,7 @@ const useTabs = (options = {}) => {
     if (!item) return;
     list.value.splice(list.value.indexOf(item.props), 1);
   };
-  vue.provide("tabs", {
+  vue.provide("vc-tabs", {
     props,
     currentValue,
     refresh,
@@ -8337,10 +8799,10 @@ const useTabs = (options = {}) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$e = 'vc-tabs';
+const COMPONENT_NAME$g = 'vc-tabs';
 const Tabs = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$e,
-  props: props$b,
+  name: COMPONENT_NAME$g,
+  props: props$c,
   emits: ['update:modelValue', 'change', 'click'],
   setup(props, {
     slots
@@ -8505,7 +8967,7 @@ const Tabs = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const props$a = {
+const props$b = {
   value: {
     type: [String, Number]
   },
@@ -8532,7 +8994,7 @@ const useTabsPane = () => {
   const { props } = instance;
   const currentValue = vue.ref(void 0);
   const isLoaded = vue.ref(false);
-  const tabs = vue.inject("tabs", {});
+  const tabs = vue.inject("vc-tabs", {});
   const isActive = vue.computed(() => {
     const state = tabs.currentValue.value === (props.value || currentValue.value);
     if (!isLoaded.value && state) {
@@ -8587,10 +9049,10 @@ const useTabsPane = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$d = 'vc-tabs-pane';
+const COMPONENT_NAME$f = 'vc-tabs-pane';
 const TabsPane = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$d,
-  props: props$a,
+  name: COMPONENT_NAME$f,
+  props: props$b,
   setup(_, {
     slots
   }) {
@@ -8605,8 +9067,329 @@ const TabsPane = /* @__PURE__ */ vue.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__ */ vue.defineComponent({
+  name: COMPONENT_NAME$e,
+  props: props$a,
+  emits: ['update:modelValue', 'change', 'click'],
+  setup(props, {
+    slots
+  }) {
+    const instance = vue.getCurrentInstance();
+    const wrapper = vue.ref(null);
+    const content = vue.ref(null);
+    const scroll = vue.ref(null);
+    const nav = vue.ref(null);
+    const top = vue.ref(0);
+    const isFixed = vue.ref(false);
+    const placeholderH = vue.ref(53);
+    const startX = vue.ref(0);
+    const isTouching = vue.ref(false);
+    const scrollViewW = vue.ref(0); // 滚动容器宽度
+    const scrollContentW = vue.ref(0); // 滚动内容宽度
+    const baseX = vue.ref(0);
+    const isDark = vue.computed(() => {
+      return props.theme === 'dark';
+    });
+    const fixedStyle = vue.computed(() => {
+      return isFixed.value ? {
+        top: `${props.offsetTop}px`
+      } : {};
+    });
+
+    // eslint-disable-next-line prefer-const
+    let tabs;
+
+    // TODO: 找到父层滚动条
+    const handleScroll = lodashEs.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 = lodashEs.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 = lodashEs.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;
+      vue.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 = vue.computed(() => {
+      return {
+        transition: isTouching.value ? '' : 'transform 300ms ease-in-out',
+        transform: `translate3d(${tabs.scrollOffset.value}px, 0, 0)`
+      };
+    });
+    vue.onMounted(() => {
+      refreshTop();
+      operateDOMEvents('add');
+      vue.nextTick(refreshScroll);
+    });
+    vue.onUpdated(refreshTop);
+    vue.onUnmounted(() => {
+      operateDOMEvents('remove');
+      operateDOMScrollEvents('remove');
+    });
+    vue.watch(() => props.theme, refreshAfloat);
+    vue.watch(() => props.average, refreshAfloat);
+    vue.watch(() => props.showStep, () => vue.nextTick(refreshScroll));
+    return () => {
+      return vue.createVNode("div", {
+        "class": [tabs.classes.value, 'vcm-tabs']
+      }, [props.showWrapper && vue.createVNode("div", {
+        "ref": wrapper,
+        "style": [props.barStyle, fixedStyle.value],
+        "class": [{
+          'is-fixed': isFixed
+        }, 'vcm-tabs__bar']
+      }, [vue.createVNode("slot", {
+        "name": "prepend"
+      }, null), slots.prepend?.(), props.showStep && tabs.scrollable.value && vue.createVNode("div", {
+        "class": "vcm-tabs__step is-left",
+        "onClick": () => handleStep(1)
+      }, [vue.createVNode(Icon, {
+        "type": "left"
+      }, null)]), vue.createVNode("div", {
+        "ref": scroll,
+        "class": "vcm-tabs__scroll"
+      }, [vue.createVNode("div", {
+        "ref": nav,
+        "style": scrollStyle.value,
+        "class": "vcm-tabs__nav"
+      }, [props.afloat && vue.createVNode("div", {
+        "style": tabs.afloatStyle.value,
+        "class": "vcm-tabs__afloat"
+      }, null), tabs.list.value.map((item, index) => {
+        return vue.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' ? vue.createVNode("span", {
+          "innerHTML": item.label
+        }, null) : typeof item.label === 'function' && vue.createVNode(Customer, {
+          "render": item.label,
+          "it": item,
+          "index": index
+        }, null)]);
+      })])]), props.showStep && tabs.scrollable.value && vue.createVNode("div", {
+        "class": "vcm-tabs__step is-right",
+        "onClick": () => handleStep(-1)
+      }, [vue.createVNode(Icon, {
+        "type": "right"
+      }, null)]), slots.append?.()]), isFixed.value && vue.createVNode("div", {
+        "style": {
+          height: `${placeholderH.value}px`
+        },
+        "class": "vcm-tabs__placeholder"
+      }, null), vue.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__ */ vue.defineComponent({
+  name: COMPONENT_NAME$d,
+  props: props$b,
+  setup(_, {
+    slots
+  }) {
+    const tabsPane = useTabsPane();
+    return () => {
+      return vue.createVNode("div", {
+        "class": "vcm-tabs-pane",
+        "style": tabsPane.style.value,
+        "name": tabsPane.currentValue.value
+      }, [tabsPane.isReady && slots.default?.()]);
+    };
+  }
+});
 
 const props$9 = {
   tag: {
@@ -9043,13 +9826,15 @@ exports.Chart = Chart;
 exports.Checkbox = Checkbox;
 exports.Clipboard = Clipboard;
 exports.Collapse = Collapse;
+exports.CollapseItem = CollapseItem;
 exports.ColorPicker = ColorPicker;
 exports.Countdown = Countdown;
 exports.Customer = Customer;
 exports.DatePicker = DatePicker;
 exports.Debounce = Debounce;
 exports.Divider = Divider;
-exports.Drawer = Drawer;
+exports.Drawer = drawer;
+exports.DrawerView = DrawerView;
 exports.Dropdown = Dropdown;
 exports.Editor = Editor;
 exports.Expand = Expand;
@@ -9081,13 +9866,14 @@ exports.MChart = MChart;
 exports.MCheckbox = MCheckbox;
 exports.MClipboard = MClipboard;
 exports.MCollapse = MCollapse;
+exports.MCollapseItem = MCollapseItem;
 exports.MColorPicker = MColorPicker;
 exports.MCountdown = MCountdown;
 exports.MCustomer = MCustomer;
 exports.MDatePicker = MDatePicker;
 exports.MDebounce = Debounce;
 exports.MDivider = MDivider;
-exports.MDrawer = MDrawer;
+exports.MDrawerView = MDrawerView;
 exports.MDropdown = MDropdown;
 exports.MEditor = MEditor;
 exports.MExpand = MExpand;