@deot/vc 1.0.5 → 1.0.7

package/dist/index.umd.cjs

@@ -3696,138 +3696,6 @@
     return flatten(value, JSON.parse);
   };
 
-  class Validator {
-    static falsy = [void 0, null, ""];
-    rules = {};
-    paths;
-    original;
-    constructor(rules, paths, original) {
-      this.updateRules(rules);
-      this.paths = paths || [];
-      this.original = original;
-    }
-    /**
-     * 构建统一规则类型的Rule[], 也可供外部使用
-     * @param rules ~
-     */
-    updateRules(rules) {
-      if (!rules)
-        return;
-      Object.keys(rules).forEach((field) => {
-        const rule = rules[field];
-        this.rules[field] = (Array.isArray(rule) ? rule : [rule]).map((rule$) => {
-          if (typeof rule$ === "function") {
-            return { validate: rule$ };
-          }
-          if (typeof rule$ === "string" || rule$ instanceof RegExp) {
-            rule$ = { pattern: rule$ };
-          }
-          if (typeof rule$ === "boolean") {
-            rule$ = { required: rule$ };
-          }
-          const { validate, pattern, required, enum: enum$ = [] } = rule$;
-          if (validate && rule$.fields) {
-            rule$.fields = void 0;
-          }
-          if (!validate && pattern) {
-            const pattern$ = typeof pattern === "string" ? new RegExp(pattern) : pattern;
-            return {
-              ...rule$,
-              validate: (v) => pattern$.test(v)
-            };
-          }
-          if (!validate && required) {
-            return {
-              ...rule$,
-              validate: (v) => Array.isArray(v) ? !!v.length && v.every((j) => Validator.falsy.every((i) => j !== i)) : Validator.falsy.every((i) => v !== i)
-            };
-          }
-          if (!validate && enum$.length) {
-            return {
-              ...rule$,
-              validate: (v) => enum$.some((i) => v === i)
-            };
-          }
-          return rule$;
-        });
-      });
-    }
-    async validate(source, options) {
-      options = options || {};
-      if (!Object.keys(this.rules).length) {
-        return;
-      }
-      const needCheckFields = options.fields || Object.keys(this.rules);
-      const errors = [];
-      for (let i = 0; i < needCheckFields.length; i++) {
-        const field = needCheckFields[i];
-        const rules = this.rules[field];
-        const value = source[field];
-        const original = this.original;
-        for (let j = 0; j < rules.length; j++) {
-          const rule = rules[j];
-          const { validate = () => {
-          }, transform = (x) => x, fields: fields$ } = rule;
-          const paths = [...this.paths, field];
-          if (typeof options._index !== "undefined") {
-            paths.splice(paths.length - 1, 0, options._index);
-          }
-          const value$ = transform(value, { field, source, paths, original });
-          if (fields$) {
-            const isArray = Array.isArray(value$);
-            const value$$ = isArray ? value$ : [value$];
-            if (value$$.every((v) => v && typeof v === "object")) {
-              const validator = new Validator(fields$, paths);
-              for (let k = 0; k < value$$.length; k++) {
-                try {
-                  await validator.validate(value$$[k], { _index: isArray ? k : void 0, first: options.first, original });
-                } catch (errors$) {
-                  errors.push(...errors$);
-                  if (errors$.length && options.first)
-                    break;
-                }
-              }
-              continue;
-            }
-          }
-          let result = validate(value$, { field, source, paths, original });
-          let message$ = "";
-          if (result instanceof Promise) {
-            try {
-              await result;
-            } catch (e) {
-              result = false;
-              message$ = e.message || e;
-            }
-          } else if (typeof result === "string") {
-            message$ = result;
-            result = false;
-          }
-          if (result === false) {
-            errors.push({
-              paths,
-              message: message$ || rule.message || "",
-              field,
-              value: value$
-            });
-            if (options.first)
-              break;
-          }
-        }
-        if (errors.length && options.first)
-          break;
-      }
-      if (errors.length) {
-        const errors$ = errors.map((i) => {
-          const { message, ...extra } = i;
-          i.message = typeof message === "function" ? message(extra) : message;
-          return i;
-        });
-        return Promise.reject(errors$);
-      }
-    }
-  }
-
   const IS_SERVER$2 = typeof window === "undefined";
 
   const composedPath = (e) => {
@@ -3969,6 +3837,138 @@
     };
   };
 
+  class Validator {
+    static falsy = [void 0, null, ""];
+    rules = {};
+    paths;
+    original;
+    constructor(rules, paths, original) {
+      this.updateRules(rules);
+      this.paths = paths || [];
+      this.original = original;
+    }
+    /**
+     * 构建统一规则类型的Rule[], 也可供外部使用
+     * @param rules ~
+     */
+    updateRules(rules) {
+      if (!rules)
+        return;
+      Object.keys(rules).forEach((field) => {
+        const rule = rules[field];
+        this.rules[field] = (Array.isArray(rule) ? rule : [rule]).map((rule$) => {
+          if (typeof rule$ === "function") {
+            return { validate: rule$ };
+          }
+          if (typeof rule$ === "string" || rule$ instanceof RegExp) {
+            rule$ = { pattern: rule$ };
+          }
+          if (typeof rule$ === "boolean") {
+            rule$ = { required: rule$ };
+          }
+          const { validate, pattern, required, enum: enum$ = [] } = rule$;
+          if (validate && rule$.fields) {
+            rule$.fields = void 0;
+          }
+          if (!validate && pattern) {
+            const pattern$ = typeof pattern === "string" ? new RegExp(pattern) : pattern;
+            return {
+              ...rule$,
+              validate: (v) => pattern$.test(v)
+            };
+          }
+          if (!validate && required) {
+            return {
+              ...rule$,
+              validate: (v) => Array.isArray(v) ? !!v.length && v.every((j) => Validator.falsy.every((i) => j !== i)) : Validator.falsy.every((i) => v !== i)
+            };
+          }
+          if (!validate && enum$.length) {
+            return {
+              ...rule$,
+              validate: (v) => enum$.some((i) => v === i)
+            };
+          }
+          return rule$;
+        });
+      });
+    }
+    async validate(source, options) {
+      options = options || {};
+      if (!Object.keys(this.rules).length) {
+        return;
+      }
+      const needCheckFields = options.fields || Object.keys(this.rules);
+      const errors = [];
+      for (let i = 0; i < needCheckFields.length; i++) {
+        const field = needCheckFields[i];
+        const rules = this.rules[field];
+        const value = source[field];
+        const original = this.original;
+        for (let j = 0; j < rules.length; j++) {
+          const rule = rules[j];
+          const { validate = () => {
+          }, transform = (x) => x, fields: fields$ } = rule;
+          const paths = [...this.paths, field];
+          if (typeof options._index !== "undefined") {
+            paths.splice(paths.length - 1, 0, options._index);
+          }
+          const value$ = transform(value, { field, source, paths, original });
+          if (fields$) {
+            const isArray = Array.isArray(value$);
+            const value$$ = isArray ? value$ : [value$];
+            if (value$$.every((v) => v && typeof v === "object")) {
+              const validator = new Validator(fields$, paths);
+              for (let k = 0; k < value$$.length; k++) {
+                try {
+                  await validator.validate(value$$[k], { _index: isArray ? k : void 0, first: options.first, original });
+                } catch (errors$) {
+                  errors.push(...errors$);
+                  if (errors$.length && options.first)
+                    break;
+                }
+              }
+              continue;
+            }
+          }
+          let result = validate(value$, { field, source, paths, original });
+          let message$ = "";
+          if (result instanceof Promise) {
+            try {
+              await result;
+            } catch (e) {
+              result = false;
+              message$ = e.message || e;
+            }
+          } else if (typeof result === "string") {
+            message$ = result;
+            result = false;
+          }
+          if (result === false) {
+            errors.push({
+              paths,
+              message: message$ || rule.message || "",
+              field,
+              value: value$
+            });
+            if (options.first)
+              break;
+          }
+        }
+        if (errors.length && options.first)
+          break;
+      }
+      if (errors.length) {
+        const errors$ = errors.map((i) => {
+          const { message, ...extra } = i;
+          i.message = typeof message === "function" ? message(extra) : message;
+          return i;
+        });
+        return Promise.reject(errors$);
+      }
+    }
+  }
+
   class ACache {
     options;
     constructor() {
@@ -5415,16 +5415,16 @@
     }
   }
   const VcInstance = new Instance();
-  const props$1h = {
+  const props$1j = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -5436,7 +5436,7 @@
     }
   });
   const MActionSheet = ActionSheet;
-  const props$1g = {
+  const props$1i = {
     modelValue: {
       type: Boolean,
       default: true
@@ -5462,7 +5462,7 @@
       default: false
     }
   };
-  const props$1f = {
+  const props$1h = {
     type: String,
     inherit: {
       type: Boolean,
@@ -5514,7 +5514,7 @@
               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));
@@ -5603,10 +5603,10 @@
     }
   }
   const IconManager = new Manager();
-  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(props2) {
       const viewBox = vue.ref("0 0 1024 1024");
       const path = vue.ref([]);
@@ -5638,7 +5638,7 @@
       };
     }
   });
-  const props$1e = {
+  const props$1g = {
     /**
      * 进入/离开持续时间
      * {enter: 300, leave: 300}
@@ -5801,10 +5801,10 @@
       }
     };
   };
-  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(props2, { slots, attrs }) {
@@ -5823,10 +5823,10 @@
       };
     }
   });
-  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(props2, { slots, attrs: _attrs }) {
@@ -5943,11 +5943,11 @@
       };
     }
   });
-  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,
@@ -5979,11 +5979,11 @@
       };
     }
   });
-  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",
@@ -6020,15 +6020,15 @@
       };
     }
   });
-  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: {
@@ -6061,11 +6061,11 @@
       };
     }
   });
-  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",
@@ -6102,7 +6102,7 @@
       };
     }
   });
-  const COMPONENT_NAME$1p = "vc-alert";
+  const COMPONENT_NAME$1s = "vc-alert";
   const THEME_MAP = {
     info: ["#5495f6", "#91d5ff", "#e6f7ff"],
     success: ["#52c41a", "#b7eb8f", "#f6ffed"],
@@ -6110,8 +6110,8 @@
     warning: ["#ffbf00", "#ffe58f", "#fffbe6"]
   };
   const Alert = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1p,
-    props: props$1g,
+    name: COMPONENT_NAME$1s,
+    props: props$1i,
     setup(props2, {
       slots,
       emit
@@ -6197,16 +6197,16 @@
     }
   });
   const MAlert = Alert;
-  const props$1d = {
+  const props$1f = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -6218,7 +6218,7 @@
     }
   });
   const MArtboard = Artboard;
-  const props$1c = {
+  const props$1e = {
     size: {
       type: Number,
       default: 28
@@ -6239,10 +6239,10 @@
       default: false
     }
   };
-  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(props2, {
       slots
     }) {
@@ -6275,7 +6275,7 @@
       };
     }
   });
-  const props$1b = {
+  const props$1d = {
     wait: {
       type: Number,
       default: 250
@@ -6290,10 +6290,10 @@
     },
     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
@@ -6333,7 +6333,7 @@
       };
     }
   });
-  const props$1a = {
+  const props$1c = {
     tag: {
       type: String,
       default: "button"
@@ -6360,18 +6360,18 @@
       default: "button"
     }
   };
-  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(props2, {
       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
@@ -6420,7 +6420,7 @@
       };
     }
   });
-  const props$19 = {
+  const props$1b = {
     vertical: {
       type: Boolean,
       default: false
@@ -6438,14 +6438,14 @@
       default: false
     }
   };
-  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(props2, {
       slots
     }) {
-      vue.provide("button-group", props2);
+      vue.provide("vc-button-group", props2);
       const classes = vue.computed(() => ({
         "is-vertical": props2.vertical,
         "is-circle": props2.circle,
@@ -6463,16 +6463,16 @@
   });
   const MButton = Button;
   const MButtonGroup = ButtonGroup;
-  const props$18 = {
+  const props$1a = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  const COMPONENT_NAME$1j = "vc-calendar";
+  const COMPONENT_NAME$1m = "vc-calendar";
   const Calendar$1 = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1j,
-    props: props$18,
+    name: COMPONENT_NAME$1m,
+    props: props$1a,
     setup(props2, {
       slots
     }) {
@@ -6484,7 +6484,7 @@
     }
   });
   const MCalendar = Calendar$1;
-  const props$17 = {
+  const props$19 = {
     border: {
       type: Boolean,
       default: true
@@ -6504,10 +6504,10 @@
       type: String
     }
   };
-  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(props2, {
       slots
     }) {
@@ -6531,16 +6531,16 @@
     }
   });
   const MCard = Card;
-  const props$16 = {
+  const props$18 = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -6552,16 +6552,16 @@
     }
   });
   const MCarousel = Carousel;
-  const props$15 = {
+  const props$17 = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -6611,7 +6611,7 @@
     "globalout",
     "contextmenu"
   ];
-  const props$14 = {
+  const props$16 = {
     options: Object,
     pluginOptions: Object,
     theme: [String, Object],
@@ -6620,10 +6620,10 @@
     watchShallow: Boolean,
     manualUpdate: Boolean
   };
-  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(props2, {
       emit,
@@ -6731,16 +6731,16 @@
     }
   });
   const MChart = Chart;
-  const props$13 = {
+  const props$15 = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -6752,16 +6752,16 @@
     }
   });
   const MCheckbox = Checkbox;
-  const props$12 = {
+  const props$14 = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -6773,36 +6773,246 @@
     }
   });
   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(props2, { slots, emit }) {
+      const instance = vue.getCurrentInstance();
+      const currentValue = vue.ref();
+      const items = vue.ref([]);
+      const sync = () => {
+        const v = props2.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 = props2.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: props2,
+        toggle,
+        add,
+        remove
+      });
+      vue.watch(
+        () => props2.modelValue,
+        (v) => {
+          if (v === currentValue.value) return;
+          currentValue.value = props2.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(
+          props2.tag,
+          {
+            class: [{ "vc-collapse": !props2.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
     }
   };
-  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(props2, {
       slots
     }) {
+      const isActive = vue.ref(false);
+      const Content = props2.tag;
+      vue.watch(() => props2.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: () => [(props2.alive || !props2.alive && isActive.value) && slots.default?.()]
+        }), [[vue.vShow, isActive.value]])) ? _slot : {
+          default: () => [_slot]
+        });
+      };
+    }
+  });
+  const COMPONENT_NAME$1d = "vc-collapse-item";
+  const CollapseItem = /* @__PURE__ */ vue.defineComponent({
+    name: COMPONENT_NAME$1d,
+    props: props$12,
+    setup(props2, {
+      slots,
+      expose
+    }) {
+      const Content = props2.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 props2.value !== "undefined" ? props2.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: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
@@ -6821,9 +7031,9 @@
       default: "div"
     }
   };
-  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(props2, {
       slots
@@ -6842,9 +7052,9 @@
       default: () => null
     }
   };
-  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(props2, context) {
       return () => vue.h(() => {
@@ -6859,9 +7069,9 @@
       default: "div"
     }
   };
-  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(props2, {
       slots
@@ -6880,9 +7090,9 @@
       default: "div"
     }
   };
-  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(props2, {
       slots
@@ -6895,178 +7105,714 @@
     }
   });
   const MDivider = Divider;
-  const props$X = {
-    tag: {
-      type: String,
-      default: "div"
-    }
+  const defaults$2 = {
+    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 COMPONENT_NAME$16 = "vc-drawer";
-  const Drawer = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$16,
-    props: props$X,
-    setup(props2, {
-      slots
-    }) {
-      return () => {
-        return vue.createVNode("div", {
-          "class": "vc-drawer"
-        }, [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 MDrawer = Drawer;
-  const props$W = {
-    tag: {
-      type: String,
-      default: "div"
+    then(resolve, reject) {
+      return this.target.then(resolve, reject);
     }
-  };
-  const COMPONENT_NAME$15 = "vc-dropdown";
-  const Dropdown = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$15,
-    props: props$W,
-    setup(props2, {
-      slots
-    }) {
-      return () => {
-        return vue.createVNode("div", {
-          "class": "vc-dropdown"
-        }, [slots?.default?.()]);
-      };
+    catch(callback) {
+      return this.target.catch(callback);
     }
-  });
-  const MDropdown = Dropdown;
-  const props$V = {
-    tag: {
-      type: String,
-      default: "div"
+    finally(callback) {
+      return this.target.finally(callback);
     }
-  };
-  const COMPONENT_NAME$14 = "vc-editor";
-  const Editor = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$14,
-    props: props$V,
-    setup(props2, {
-      slots
-    }) {
-      return () => {
-        return vue.createVNode("div", {
-          "class": "vc-editor"
-        }, [slots?.default?.()]);
-      };
+  }
+  const COMPONENT_NAME$17 = "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();
+          }
+        }
+      } catch (e) {
+        /* istanbul ignore next -- @preserve */
+        throw new VcError("instance", e);
+      }
     }
-  });
-  const MEditor = Editor;
-  const props$U = {
-    tag: {
-      type: String,
-      default: "div"
+    /**
+     * 清理全部Portals
+     */
+    static clearAll() {
+      try {
+        Portal.leafs.forEach((leaf) => leaf.destroy());
+      } catch (e) {
+        /* istanbul ignore next -- @preserve */
+        throw new VcError("instance", e);
+      }
     }
-  };
-  const COMPONENT_NAME$13 = "vc-expand";
-  const Expand = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$13,
-    props: props$U,
-    setup(props2, {
-      slots
-    }) {
-      return () => {
-        return vue.createVNode("div", {
-          "class": "vc-expand"
-        }, [slots?.default?.()]);
+    static leafs = /* @__PURE__ */ new Map();
+    wrapper;
+    globalOptions;
+    constructor(wrapper, options) {
+      this.wrapper = wrapper;
+      this.globalOptions = {
+        ...options,
+        name: options?.name || wrapper.name || getUid(COMPONENT_NAME$17)
       };
     }
-  });
-  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
-    }
-  };
-  const useForm = (expose, options = {}) => {
-    const instance = vue.getCurrentInstance();
-    const props2 = instance.props;
-    const fields = [];
-    vue.provide("form", {
-      props: props2,
-      add: (field) => {
-        field && fields.push(field);
-      },
-      remove: (field) => {
-        field && fields.splice(fields.indexOf(field), 1);
+    popup(propsData, options) {
+      if (!options) {
+        options = propsData || {};
+      } else {
+        options.propsData = propsData;
       }
-    });
-    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) => {
-      props2.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;
+      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();
+          }
         });
-      } 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) => {
+    getDefaultOptions() {
+      return {
+        ...defaults$2,
+        ...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: el2,
+        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$}__${getUid(COMPONENT_NAME$17)}` : name$;
+      const container = document.createElement(tag);
+      const root = typeof el2 === "object" ? el2 : document.querySelector(el2 || "body");
+      !alive && Portal.leafs.get(name)?.destroy();
+      const propsData$ = propsData || rest;
+      let leaf = new PortalLeaf(target);
+      const isDestroyed = () => {
+        const leaf$ = Portal.leafs.get(name);
+        return !leaf$ || leaf$ !== leaf;
+      };
+      const $onDestroyed = (...args) => {
+        if (isDestroyed()) return;
+        onDestroyed?.(...args);
+        leaf.app?.unmount();
+        /* istanbul ignore else -- @preserve */
+        if (useAllNodes) {
+          root?.contains(container) && root.removeChild(container);
+        } else if (container && container._children) {
+          container._children.forEach((i) => {
+            root?.contains(i) && root.removeChild(i);
+          });
+        }
+        Portal.leafs.delete(name);
+      };
+      const $onRejected = this.createCallback(() => leaf, leaveDelay, onRejected);
+      const $onFulfilled = this.createCallback(() => leaf, leaveDelay, onFulfilled);
+      if (alive && Portal.leafs.has(name)) {
+        leaf = Portal.leafs.get(name);
+        leaf.target = target;
+        leaf.propsData.value = propsData$;
+        leaf.wrapper?.[aliveUpdateKey]?.(options);
+      } else {
+        const wrapper = this.wrapper;
+        const app = vue.createApp({
+          name: COMPONENT_NAME$17,
+          parent,
+          setup() {
+            if (alive) {
+              const handleExtra = (e) => {
+                try {
+                  const path = e.path || composedPath(e);
+                  /* istanbul ignore else -- @preserve */
+                  if (container && e.target && !container.contains(e.target) && !path?.some((item) => utils.eleInRegExp(item, aliveRegExp))) {
+                    /* istanbul ignore else -- @preserve */
+                    if (leaf.wrapper && leaf.wrapper?.[aliveVisibleKey]) {
+                      leaf.wrapper[aliveVisibleKey] = false;
+                    }
+                    leaveDelay ? setTimeout($onDestroyed, leaveDelay) : $onDestroyed();
+                  }
+                } catch (error2) {
+                  /* istanbul ignore next -- @preserve */
+                  throw new VcError("portal", error2);
+                }
+              };
+              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((error2) => {
+                  $onDestroyed(error2);
+                });
+              } 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]);
+        }
+        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();
+        }
+        childs.forEach((i) => {
+          append(root, i);
+          container._children?.push?.(i);
+        });
+      }
+      return leaf;
+    }
+  }
+  const props$X = {
+    tag: {
+      type: String,
+      default: "div"
+    }
+  };
+  const COMPONENT_NAME$16 = "vc-portal-view";
+  const PortalView = /* @__PURE__ */ vue.defineComponent({
+    name: COMPONENT_NAME$16,
+    props: props$X,
+    setup(props2, {
+      slots
+    }) {
+      return () => {
+        return vue.h(vue.Fragment, [vue.h(props2.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
+    }
+  };
+  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(props2, {
+      emit,
+      slots,
+      expose
+    }) {
+      const instance = vue.getCurrentInstance();
+      const isActive = vue.ref(false);
+      const classes = vue.computed(() => {
+        return {
+          [`is-${props2.placement}`]: true
+        };
+      });
+      const style = vue.computed(() => {
+        return props2.placement === "top" || props2.placement === "bottom" ? {
+          height: `${props2.height}px`
+        } : {
+          width: `${props2.width}px`
+        };
+      });
+      vue.watch(() => props2.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 || props2.maskClosable && e.target.classList.contains("vc-drawer__wrapper")) {
+          if (props2.closeWithCancel) {
+            handleBefore(e, handleCancel);
+          } else {
+            isActive.value = false;
+          }
+        }
+      };
+      const handleRemove = () => {
+        !instance.isUnmounted && (emit("close"), emit("update:modelValue", false), emit("visible-change", false));
+      };
+      const handleOk = (...rest) => {
+        const ok = instance.vnode.props?.onOk || props2.onOk || (() => {
+        });
+        return ok(...rest);
+      };
+      const handleCancel = (...rest) => {
+        const cancel = instance.vnode.props?.onCancel || props2.onCancel || (() => {
+        });
+        return cancel(...rest);
+      };
+      useScrollbar(isActive);
+      expose({
+        isActive,
+        // for portal
+        toggle(v) {
+          v = typeof v === "boolean" ? v : !isActive.value;
+          isActive.value = v;
+        }
+      });
+      return () => {
+        let _slot, _slot2;
+        return vue.createVNode("div", {
+          "class": [classes.value, "vc-drawer"]
+        }, [vue.createVNode(TransitionFade, {
+          "delay": 50
+        }, _isSlot$1(_slot = vue.withDirectives(vue.createVNode("div", {
+          "style": props2.maskStyle,
+          "class": "vc-drawer__mask",
+          "onClick": (e) => handleClose(e, props2.maskClosable)
+        }, null), [[vue.vShow, props2.mask && isActive.value]])) ? _slot : {
+          default: () => [_slot]
+        }), vue.createVNode(TransitionSlide, {
+          "mode": props2.placement,
+          "onAfterLeave": handleRemove
+        }, _isSlot$1(_slot2 = vue.withDirectives(vue.createVNode("div", {
+          "class": [props2.wrapperClass, "vc-drawer__wrapper"],
+          "style": [style.value, props2.wrapperStyle]
+        }, [vue.createVNode("div", {
+          "class": "vc-drawer__container"
+        }, [vue.createVNode("div", {
+          "class": "vc-drawer__header"
+        }, [slots.header ? slots.header() : typeof props2.title === "string" ? vue.createVNode("div", {
+          "class": "vc-drawer__title",
+          "innerHTML": props2.title
+        }, null) : typeof props2.title === "function" && vue.createVNode(Customer, {
+          "render": props2.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 props2.content === "string" ? vue.createVNode("div", {
+          "innerHTML": props2.content
+        }, null) : typeof props2.content === "function" ? vue.createVNode(Customer, {
+          "render": props2.content
+        }, null) : null, slots.default?.()]), props2.footer && (props2.cancelText || props2.okText) && vue.createVNode("div", {
+          "class": ["vc-drawer__footer"]
+        }, [slots["footer-extra"]?.(), !slots.footer ? vue.createVNode(vue.Fragment, null, [props2.cancelText && vue.createVNode(Button, {
+          "style": "margin-right: 8px;",
+          "onClick": (e) => handleBefore(e, handleCancel)
+        }, {
+          default: () => [props2.cancelText]
+        }), props2.okText && vue.createVNode(Button, {
+          "type": "primary",
+          "onClick": (e) => handleBefore(e, handleOk)
+        }, {
+          default: () => [props2.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
+    });
+    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"
+    }
+  };
+  const COMPONENT_NAME$14 = "vc-dropdown";
+  const Dropdown = /* @__PURE__ */ vue.defineComponent({
+    name: COMPONENT_NAME$14,
+    props: props$V,
+    setup(props2, {
+      slots
+    }) {
+      return () => {
+        return vue.createVNode("div", {
+          "class": "vc-dropdown"
+        }, [slots?.default?.()]);
+      };
+    }
+  });
+  const MDropdown = Dropdown;
+  const props$U = {
+    tag: {
+      type: String,
+      default: "div"
+    }
+  };
+  const COMPONENT_NAME$13 = "vc-editor";
+  const Editor = /* @__PURE__ */ vue.defineComponent({
+    name: COMPONENT_NAME$13,
+    props: props$U,
+    setup(props2, {
+      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
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    },
+    labelPosition: {
+      type: String,
+      default: "right"
+    },
+    autocomplete: {
+      type: String,
+      default: "off"
+    },
+    styleless: {
+      type: Boolean,
+      default: false
+    }
+  };
+  const useForm = (expose, options = {}) => {
+    const instance = vue.getCurrentInstance();
+    const props2 = instance.props;
+    const fields = [];
+    vue.provide("form", {
+      props: props2,
+      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) => {
+      props2.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"
+      });
+    };
+    const reset = (options$ = {}) => {
+      const { fields: fields$, original = {} } = options$;
+      filterFields(fields$).forEach((field) => {
         let v;
         try {
           v = getPropByPath(original, field.props.prop).v;
-        } catch (e) {
+        } catch {
         }
         field.exposed.reset(v);
       });
@@ -7137,6 +7883,11 @@
       type: [Boolean, String],
       default: false
     },
+    // 控制`*`是否展示
+    asterisk: {
+      type: Boolean,
+      default: true
+    },
     error: {
       type: String
     },
@@ -7181,7 +7932,7 @@
     if (!form?.props) {
       throw new VcError("form-item", "form-item需要在form内使用");
     }
-    const formItem = vue.inject("form-item", {});
+    const formItem = vue.inject("vc-form-item", {});
     const validateState = vue.ref("");
     const validateMessage = vue.ref("");
     let validateDisabled = false;
@@ -7219,7 +7970,7 @@
     });
     const classes = vue.computed(() => {
       return {
-        "is-require": isRequired.value,
+        "is-require": isRequired.value && props2.asterisk,
         "is-error": validateState.value === "error",
         "is-validating": validateState.value === "validating",
         "is-inline": form.props.inline,
@@ -7266,666 +8017,318 @@
       return getPropByPath(model, path).v;
     });
     const showError = vue.computed(() => {
-      return validateState.value === "error" && props2.showMessage && form.props.showMessage;
-    });
-    vue.watch(
-      () => props2.error,
-      (v) => {
-        validateMessage.value = v || "";
-        validateState.value = v === "" ? "" : "error";
-      }
-    );
-    const reset = (v) => {
-      validateState.value = "";
-      validateMessage.value = "";
-      const model = form.props.model;
-      if (!props2.prop) return;
-      const { o, k } = getPropByPath(model, props2.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 (!props2.prop) return;
-      let rules = currentRules.value.filter((rule) => !rule.trigger || rule.trigger.includes(trigger));
-      if (!rules.length) {
-        if (!props2.required) {
-          return;
-        } else {
-          rules = [{
-            required: true,
-            message: typeof props2.required === "string" ? props2.required : void 0
-          }];
-        }
-      }
-      validateState.value = "validating";
-      const descriptor = {};
-      descriptor[props2.prop] = rules;
-      const validator = new Validator(descriptor);
-      const model = {};
-      model[props2.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: props2.prop,
-          message: validateMessage.value
-        };
-      }
-      validateDisabled = false;
-    };
-    const handleFieldBlur = () => {
-      if (!props2.prop) {
-        formItem.blur?.();
-        return;
-      }
-      validate("blur");
-    };
-    const handleFieldChange = () => {
-      if (!props2.prop) {
-        formItem.change?.();
-        return;
-      }
-      if (validateDisabled) {
-        validateDisabled = false;
-        return;
-      }
-      validate("change");
-    };
-    const getPosition = async () => {
-      let el2 = instance.vnode.el;
-      try {
-        while (el2 && !el2.getBoundingClientRect) {
-          el2 = el2.nextSibling;
-        }
-        ;
-        const rect = el2.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 (props2.prop) {
-        form.add?.(instance);
-        initialValue = cloneDeep(fieldValue.value);
-      }
-      formItem.add?.(instance);
-    });
-    vue.onBeforeUnmount(() => {
-      form.remove?.(instance);
-      formItem.remove?.(instance);
-    });
-    vue.watch(
-      () => props2.rules,
-      () => {
-        props2.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;
-      }
-    );
-    expose({
-      validate,
-      reset,
-      getPosition
-    });
-    return {
-      isNest,
-      isStyleless,
-      isNestLast,
-      validateMessage,
-      classes,
-      labelStyle,
-      contentStyle,
-      showError,
-      labelPosition
-    };
-  };
-  const COMPONENT_NAME$11 = "vc-form-item";
-  const FormItem = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$11,
-    props: props$S,
-    setup(props2, {
-      slots,
-      expose
-    }) {
-      const it = useFormItem(expose);
-      const {
-        isStyleless,
-        isNest,
-        classes,
-        labelStyle,
-        contentStyle,
-        showError,
-        validateMessage
-      } = it;
-      const {
-        label,
-        labelFor
-      } = props2;
-      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$R = {
-    ...props$T,
-    showToast: {
-      type: Boolean,
-      default: false
-    },
-    border: {
-      type: Boolean,
-      default: false
-    }
-  };
-  const props$Q = {
-    content: [String, Function],
-    maskClosable: {
-      type: Boolean,
-      default: true
-    },
-    duration: {
-      type: Number,
-      default: 3e3
-    },
-    mode: {
-      type: String,
-      default: "info",
-      validator: (val) => ["info", "loading", "success", "warning", "error"].includes(val)
-    }
-  };
-  const MSpin = Spin;
-  const MTransition = Transition;
-  const MTransitionCollapse = TransitionCollapse;
-  const MTransitionFade = TransitionFade;
-  const MTransitionScale = TransitionScale;
-  const MTransitionSlide = TransitionSlide;
-  const MTransitionZoom = TransitionZoom;
-  const COMPONENT_NAME$10 = "vcm-toast";
-  const MToastView = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$10,
-    emits: ["close", "portal-fulfilled"],
-    props: props$Q,
-    setup(props2, {
-      emit,
-      expose
-    }) {
-      const isVisible = vue.ref(false);
-      const handleRemove = () => {
-        emit("close");
-        emit("portal-fulfilled");
-      };
-      const handleClose = () => {
-        if (props2.maskClosable) {
-          isVisible.value = false;
-        }
-      };
-      let timer;
-      vue.onMounted(() => {
-        isVisible.value = true;
-        if (props2.duration !== 0) {
-          timer = setTimeout(() => {
-            isVisible.value = false;
-          }, props2.duration - 300);
-        }
-      });
-      vue.onUnmounted(() => {
-        timer && clearTimeout(timer);
-      });
-      const exposes = ["destroy", "remove", "close", "hide"].reduce((pre, key) => {
-        pre[key] = handleRemove;
-        return pre;
-      }, {});
-      expose(exposes);
-      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
-          },
-          "onAfterLeave": handleRemove
-        }, {
-          default: () => [vue.withDirectives(vue.createVNode("div", {
-            "class": "vcm-toast__wrapper"
-          }, [props2.mode === "loading" && vue.createVNode(MSpin, {
-            "class": "vcm-toast__loading"
-          }, null), typeof props2.content === "string" ? vue.createVNode("div", {
-            "class": "vcm-toast__content",
-            "innerHTML": props2.content
-          }, null) : typeof props2.content === "function" ? vue.createVNode(MCustomer, {
-            "render": props2.content
-          }, null) : null]), [[vue.vShow, isVisible.value]])]
-        })]);
-      };
-    }
-  });
-  const defaults$2 = {
-    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"
-  };
-  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);
-    }
-    finally(callback) {
-      return this.target.finally(callback);
-    }
-  }
-  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();
-          }
-        }
-      } 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 || 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();
-          }
-        });
-      }
-    };
-    getDefaultOptions() {
-      return {
-        ...defaults$2,
-        ...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: el2,
-        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$}__${getUid(COMPONENT_NAME$$)}` : name$;
-      const container = document.createElement(tag);
-      const root = typeof el2 === "object" ? el2 : document.querySelector(el2 || "body");
-      !alive && Portal.leafs.get(name)?.destroy();
-      const propsData$ = propsData || rest;
-      let leaf = new PortalLeaf(target);
-      const isDestroyed = () => {
-        const leaf$ = Portal.leafs.get(name);
-        return !leaf$ || leaf$ !== leaf;
-      };
-      const $onDestroyed = (...args) => {
-        if (isDestroyed()) return;
-        onDestroyed?.(...args);
-        leaf.app?.unmount();
-        /* istanbul ignore else -- @preserve */
-        if (useAllNodes) {
-          root?.contains(container) && root.removeChild(container);
-        } else if (container && container._children) {
-          container._children.forEach((i) => {
-            root?.contains(i) && root.removeChild(i);
-          });
-        }
-        Portal.leafs.delete(name);
-      };
-      const $onRejected = this.createCallback(() => leaf, leaveDelay, onRejected);
-      const $onFulfilled = this.createCallback(() => leaf, leaveDelay, onFulfilled);
-      if (alive && Portal.leafs.has(name)) {
-        leaf = Portal.leafs.get(name);
-        leaf.target = target;
-        leaf.propsData.value = propsData$;
-        leaf.wrapper?.[aliveUpdateKey]?.(options);
-      } else {
-        const wrapper = this.wrapper;
-        const app = vue.createApp({
-          name: COMPONENT_NAME$$,
-          parent,
-          setup() {
-            if (alive) {
-              const handleExtra = (e) => {
-                try {
-                  const path = e.path || composedPath(e);
-                  /* istanbul ignore else -- @preserve */
-                  if (container && e.target && !container.contains(e.target) && !path?.some((item) => utils.eleInRegExp(item, aliveRegExp))) {
-                    /* istanbul ignore else -- @preserve */
-                    if (leaf.wrapper && leaf.wrapper?.[aliveVisibleKey]) {
-                      leaf.wrapper[aliveVisibleKey] = false;
-                    }
-                    leaveDelay ? setTimeout($onDestroyed, leaveDelay) : $onDestroyed();
-                  }
-                } catch (error2) {
-                  /* istanbul ignore next -- @preserve */
-                  throw new VcError("portal", error2);
-                }
-              };
-              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((error2) => {
-                  $onDestroyed(error2);
-                });
-              } 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]);
-        }
-        install?.(app);
-        app.mount(container);
+      return validateState.value === "error" && props2.showMessage && form.props.showMessage;
+    });
+    vue.watch(
+      () => props2.error,
+      (v) => {
+        validateMessage.value = v || "";
+        validateState.value = v === "" ? "" : "error";
       }
-      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;
-          }
+    );
+    const reset = (v) => {
+      validateState.value = "";
+      validateMessage.value = "";
+      const model = form.props.model;
+      if (!props2.prop) return;
+      const { o, k } = getPropByPath(model, props2.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 (!props2.prop) return;
+      let rules = currentRules.value.filter((rule) => !rule.trigger || rule.trigger.includes(trigger));
+      if (!rules.length) {
+        if (!props2.required) {
+          return;
+        } else {
+          rules = [{
+            required: true,
+            message: typeof props2.required === "string" ? props2.required : void 0
+          }];
         }
-        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[props2.prop] = rules;
+      const validator = new Validator(descriptor);
+      const model = {};
+      model[props2.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: props2.prop,
+          message: validateMessage.value
+        };
+      }
+      validateDisabled = false;
+    };
+    const handleFieldBlur = () => {
+      if (!props2.prop) {
+        formItem.blur?.();
+        return;
+      }
+      validate("blur");
+    };
+    const handleFieldChange = () => {
+      if (!props2.prop) {
+        formItem.change?.();
+        return;
+      }
+      if (validateDisabled) {
+        validateDisabled = false;
+        return;
+      }
+      validate("change");
+    };
+    const getPosition = async () => {
+      let el2 = instance.vnode.el;
+      try {
+        while (el2 && !el2.getBoundingClientRect) {
+          el2 = el2.nextSibling;
         }
-        childs.forEach((i) => {
-          append(root, i);
-          container._children?.push?.(i);
+        ;
+        const rect = el2.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 (props2.prop) {
+        form.add?.(instance);
+        initialValue = cloneDeep(fieldValue.value);
+      }
+      formItem.add?.(instance);
+    });
+    vue.onBeforeUnmount(() => {
+      form.remove?.(instance);
+      formItem.remove?.(instance);
+    });
+    vue.watch(
+      () => props2.rules,
+      () => {
+        props2.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
+    };
+  };
+  const COMPONENT_NAME$11 = "vc-form-item";
+  const FormItem = /* @__PURE__ */ vue.defineComponent({
+    name: COMPONENT_NAME$11,
+    props: props$S,
+    setup(props2, {
+      slots,
+      expose
+    }) {
+      const it = useFormItem(expose);
+      const {
+        isStyleless,
+        isNest,
+        classes,
+        labelStyle,
+        contentStyle,
+        showError,
+        validateMessage
+      } = it;
+      const {
+        label,
+        labelFor
+      } = props2;
+      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 PortalView = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$_,
-    props: props$P,
+  const MSpin = Spin;
+  const MTransition = Transition;
+  const MTransitionCollapse = TransitionCollapse;
+  const MTransitionFade = TransitionFade;
+  const MTransitionScale = TransitionScale;
+  const MTransitionSlide = TransitionSlide;
+  const MTransitionZoom = TransitionZoom;
+  const COMPONENT_NAME$10 = "vcm-toast";
+  const MToastView = /* @__PURE__ */ vue.defineComponent({
+    name: COMPONENT_NAME$10,
+    emits: ["close", "portal-fulfilled"],
+    props: props$Q,
     setup(props2, {
-      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;
+      };
+      const handleRemove = () => {
+        emit("close");
+        emit("portal-fulfilled");
+      };
+      const handleClose = () => {
+        if (props2.maskClosable) {
+          isActive.value = false;
+        }
+      };
+      vue.watch(() => props2.content, setContent, {
+        immediate: true
+      });
+      vue.onMounted(() => {
+        isActive.value = true;
+        setDuration(props2.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.h(vue.Fragment, [vue.h(props2.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"
+          }, [props2.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]])]
+        })]);
       };
     }
   });
@@ -7962,9 +8365,9 @@
     success: success$3,
     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(props2, { slots, expose }) {
       useForm(expose, {
@@ -7984,17 +8387,17 @@
       };
     }
   });
-  const props$O = {
+  const props$P = {
     ...props$S,
     indent: {
       type: Number,
       default: 12
     }
   };
-  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(props2, {
       slots,
       expose
@@ -8046,24 +8449,24 @@
       };
     }
   });
-  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?.());
     }
   });
   const MFragment = Fragment;
-  const props$N = {
+  const props$O = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -8076,7 +8479,7 @@
   });
   const MHTMLToImage = HTMLToImage;
   const MIcon = Icon;
-  const props$M = {
+  const props$N = {
     src: String,
     fit: String,
     lazy: Boolean,
@@ -8131,7 +8534,7 @@
     }
   }
   const IMGStore$1 = new IMGStore();
-  const COMPONENT_NAME$V = "vc-image";
+  const COMPONENT_NAME$X = "vc-image";
   let isSupportObjectFit = false;
   window.addEventListener("DOMContentLoaded", () => {
     isSupportObjectFit = !IS_SERVER$3 && document.documentElement.style.objectFit !== void 0;
@@ -8144,9 +8547,9 @@
     SCALE_DOWN: "scale-down"
   };
   const Image$1 = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$V,
+    name: COMPONENT_NAME$X,
     inheritAttrs: false,
-    props: props$M,
+    props: props$N,
     setup(props2, {
       slots,
       emit
@@ -8333,16 +8736,16 @@
     }
   });
   const MImage = Image$1;
-  const props$L = {
+  const props$M = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -8354,16 +8757,16 @@
     }
   });
   const MImageCrop = ImageCrop;
-  const props$K = {
+  const props$L = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -8375,16 +8778,16 @@
     }
   });
   const MImagePreview = ImagePreview;
-  const props$J = {
+  const props$K = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -8396,7 +8799,7 @@
     }
   });
   const MImageProcessing = ImageProcessing;
-  const props$I = {
+  const props$J = {
     // Array, 作为select等数组存放临时值
     modelValue: {
       type: [String, Number, Array],
@@ -8493,7 +8896,7 @@
     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(
       () => props2.modelValue,
       (v) => {
@@ -8644,12 +9047,12 @@
     expose?.(exposed);
     return exposed;
   };
-  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
@@ -8750,8 +9153,8 @@
       };
     }
   });
-  const props$H = {
-    ...props$I,
+  const props$I = {
+    ...props$J,
     min: {
       type: Number,
       default: 0
@@ -8962,10 +9365,10 @@
       handleStepper
     };
   };
-  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(props2, {
       slots,
@@ -9015,17 +9418,17 @@
       };
     }
   });
-  const props$G = {
-    ...props$I,
+  const props$H = {
+    ...props$J,
     enterText: {
       type: [Boolean, String],
       default: true
     }
   };
-  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(props2, {
       emit,
@@ -9056,12 +9459,12 @@
       };
     }
   });
-  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
@@ -9145,10 +9548,10 @@
       };
     }
   });
-  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(props2, {
       slots,
@@ -9193,11 +9596,11 @@
       };
     }
   });
-  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: "取消"
@@ -9255,7 +9658,7 @@
       };
     }
   });
-  const props$F = {
+  const props$G = {
     tag: {
       type: String,
       default: "div"
@@ -9269,12 +9672,12 @@
       default: true
     }
   };
-  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(props2, { slots }) {
-      vue.provide("list", { props: props2 });
+      vue.provide("vc-list", { props: props2 });
       return () => {
         return vue.h(
           props2.tag,
@@ -9291,7 +9694,7 @@
       };
     }
   });
-  const props$E = {
+  const props$F = {
     tag: {
       type: String,
       default: "div"
@@ -9322,17 +9725,17 @@
     // MListItem是否独立存在
     alone: Boolean
   };
-  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(props2, {
       slots,
       emit
     }) {
-      const list = vue.inject("list", {});
+      const list = vue.inject("vc-list", {});
       const classes = vue.computed(() => {
         const hasList = !!list.props;
         return {
@@ -9393,16 +9796,16 @@
       };
     }
   });
-  const props$D = {
+  const props$E = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -9414,7 +9817,7 @@
     }
   });
   const MMarquee = Marquee;
-  const props$C = {
+  const props$D = {
     content: [String, Function],
     mask: {
       type: Boolean,
@@ -9428,6 +9831,7 @@
       type: Boolean,
       default: true
     },
+    // 单位ms
     duration: {
       type: Number,
       default: 1500
@@ -9448,17 +9852,27 @@
     // 这个相当于Modal中的onCancel，支持Promise
     onBeforeClose: Function
   };
-  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(props2, {
       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;
+      };
       const handleRemove = () => {
         emit("close");
         emit("portal-fulfilled");
@@ -9477,14 +9891,12 @@
           isActive.value = false;
         }
       };
-      let timer;
+      vue.watch(() => props2.content, setContent, {
+        immediate: true
+      });
       vue.onMounted(() => {
         isActive.value = true;
-        if (props2.duration !== 0) {
-          timer = setTimeout(() => {
-            isActive.value = false;
-          }, props2.duration * 1e3 - 300);
-        }
+        setDuration(props2.duration);
       });
       vue.onUnmounted(() => {
         timer && clearTimeout(timer);
@@ -9492,7 +9904,10 @@
       const exposes = ["destroy", "remove", "close", "hide"].reduce((pre, key) => {
         pre[key] = handleRemove;
         return pre;
-      }, {});
+      }, {
+        setContent,
+        setDuration
+      });
       expose(exposes);
       return () => {
         return vue.createVNode("div", {
@@ -9501,7 +9916,7 @@
           "class": "vc-message__mask",
           "onClick": (e) => handleClose(e, props2.maskClosable)
         }, null), vue.createVNode(TransitionSlide, {
-          "mode": "up",
+          "mode": "bottom",
           "onAfterLeave": handleRemove
         }, {
           default: () => [vue.withDirectives(vue.createVNode("div", {
@@ -9519,11 +9934,11 @@
           }, null) : vue.createVNode(Icon, {
             "type": props2.mode,
             "class": [`is-${props2.mode}`, "vc-message__icon"]
-          }, null), typeof props2.content === "string" ? vue.createVNode("div", {
+          }, null), typeof currentContent.value === "string" ? vue.createVNode("div", {
             "class": "vc-message__content",
-            "innerHTML": props2.content
-          }, null) : typeof props2.content === "function" ? vue.createVNode(Customer, {
-            "render": props2.content
+            "innerHTML": currentContent.value
+          }, null) : typeof currentContent.value === "function" ? vue.createVNode(Customer, {
+            "render": currentContent.value
           }, null) : null, props2.closable && vue.createVNode(Icon, {
             "type": "close",
             "class": "vc-message__close",
@@ -9577,7 +9992,7 @@
     warning: warning$2
   }, Symbol.toStringTag, { value: "Module" }));
   const MMessage = Message$1;
-  const props$B = {
+  const props$C = {
     modelValue: {
       type: Boolean,
       default: false
@@ -9654,12 +10069,12 @@
       type: Function
     }
   };
-  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(props2, {
       slots,
       emit,
@@ -9847,6 +10262,10 @@
       expose({
         isActive,
         // for portal
+        toggle(v) {
+          v = typeof v === "boolean" ? v : !isActive.value;
+          isActive.value = v;
+        },
         resetOrigin
       });
       return () => {
@@ -9936,7 +10355,7 @@
       // 当组件内使用emit('close')，避免重复触发
       onClose: null
     });
-    leaf.wrapper.isActive = true;
+    leaf.wrapper.toggle?.(true);
     return leaf;
   };
   const destroy$2 = () => Modal.destroy();
@@ -9952,7 +10371,7 @@
     success: success$1,
     warning: warning$1
   }, Symbol.toStringTag, { value: "Module" }));
-  const props$A = {
+  const props$B = {
     mode: {
       type: String,
       validator: (v) => /(alert|operation)/.test(v),
@@ -10011,11 +10430,11 @@
       type: Function
     }
   };
-  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(props2, {
       slots,
       emit,
@@ -10175,12 +10594,13 @@
     destroy: destroy$1,
     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,
@@ -10201,28 +10621,31 @@
     // 这个相当于Modal中的onCancel，支持Promise
     onBeforeClose: Function
   };
-  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(props2, {
-      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 (props2.duration !== 0) {
-          timer = setTimeout(() => {
-            isActive.value = false;
-          }, props2.duration * 1e3 - 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;
+      };
       const handleRemove = () => {
         emit("close");
         emit("portal-fulfilled");
@@ -10241,6 +10664,27 @@
           isActive.value = false;
         }
       };
+      vue.watch(() => props2.title, setTitle, {
+        immediate: true
+      });
+      vue.watch(() => props2.content, setContent, {
+        immediate: true
+      });
+      vue.onMounted(() => {
+        isActive.value = true;
+        setDuration(props2.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", {
@@ -10260,21 +10704,21 @@
           }, [props2.mode && vue.createVNode(Icon, {
             "type": `o-${props2.mode}`,
             "class": [`is-${props2.mode}`, "vc-notice__icon"]
-          }, null), vue.createVNode("div", null, [props2.title && vue.createVNode("div", {
+          }, null), vue.createVNode("div", null, [currentTitle.value && vue.createVNode("div", {
             "style": [{
-              marginBottom: props2.content ? "8px" : ""
+              marginBottom: currentContent.value ? "8px" : ""
             }],
             "class": "vc-notice__title"
-          }, [typeof props2.title === "string" ? vue.createVNode("div", {
-            "innerHTML": props2.title
-          }, null) : typeof props2.title === "function" ? vue.createVNode(Customer, {
-            "render": props2.title
-          }, null) : null]), props2.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 props2.content === "string" ? vue.createVNode("div", {
-            "innerHTML": props2.content
-          }, null) : typeof props2.content === "function" ? vue.createVNode(Customer, {
-            "render": props2.content
+          }, [typeof currentContent.value === "string" ? vue.createVNode("div", {
+            "innerHTML": currentContent.value
+          }, null) : typeof currentContent.value === "function" ? vue.createVNode(Customer, {
+            "render": currentContent.value
           }, null) : null])]), props2.closable && vue.createVNode(Icon, {
             "type": "close",
             "style": "font-size: 12px",
@@ -10347,16 +10791,16 @@
     warning
   }, Symbol.toStringTag, { value: "Module" }));
   const MNotice = Notice$1;
-  const props$y = {
+  const props$z = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -10368,16 +10812,16 @@
     }
   });
   const MOption = Option;
-  const props$x = {
+  const props$y = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -10389,16 +10833,16 @@
     }
   });
   const MPage = Page;
-  const props$w = {
+  const props$x = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -10410,16 +10854,16 @@
     }
   });
   const MPicker = Picker;
-  const props$v = {
+  const props$w = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -10431,7 +10875,7 @@
     }
   });
   const MPopconfirm = Popconfirm;
-  const props$u = {
+  const props$v = {
     modelValue: Boolean,
     animation: String,
     placement: {
@@ -10509,7 +10953,7 @@
     "autoWidth",
     "always"
   ];
-  const props$t = {
+  const props$u = {
     trigger: {
       type: String,
       default: "hover",
@@ -10527,7 +10971,7 @@
       type: Boolean,
       default: true
     },
-    ...pick(props$u, wrapperKeys)
+    ...pick(props$v, wrapperKeys)
   };
   const EXTRA_DISTANCE = 4;
   const HALF_ARROW = 12.73 / 2;
@@ -10784,10 +11228,10 @@
   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(props2, {
       emit,
@@ -10966,7 +11410,11 @@
         props2.alone && props2.hover && removeEvents();
       });
       expose({
-        isActive
+        isActive,
+        toggle(v) {
+          v = typeof v === "boolean" ? v : !isActive.value;
+          isActive.value = v;
+        }
       });
       return () => {
         let _slot;
@@ -11003,10 +11451,10 @@
     }
   });
   const PopoverPortal = new Portal(PopoverWrapper);
-  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(props2, {
@@ -11088,7 +11536,7 @@
             portalClass
           });
         } else if (popperInstance && popperInstance.wrapper) {
-          popperInstance.wrapper.isActive = false;
+          popperInstance.wrapper.toggle(false);
         }
       };
       vue.watch(() => props2.modelValue, (v) => {
@@ -11129,16 +11577,16 @@
     }
   });
   const MPopover = Popover;
-  const props$s = {
+  const props$t = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -11151,16 +11599,16 @@
   });
   const MPopup = Popup;
   const MPortal = Portal;
-  const props$r = {
+  const props$s = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -11172,16 +11620,16 @@
     }
   });
   const MPrint = Print;
-  const props$q = {
+  const props$r = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -11193,16 +11641,16 @@
     }
   });
   const MProgress = Progress;
-  const props$p = {
+  const props$q = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -11214,16 +11662,16 @@
     }
   });
   const MRadio = Radio;
-  const props$o = {
+  const props$p = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -11235,7 +11683,7 @@
     }
   });
   const MRate = Rate;
-  const props$n = {
+  const props$o = {
     data: {
       type: Array,
       default: () => []
@@ -11285,7 +11733,7 @@
     renderPlaceholder: Function,
     renderRefresh: Function
   };
-  const props$m = {
+  const props$n = {
     vertical: Boolean,
     wrapperSize: {
       type: Number,
@@ -11338,7 +11786,7 @@
     "thumbStyle",
     "thumbClass"
   ];
-  const props$l = {
+  const props$m = {
     // 	如果存在滚动条宽度为false, 不存在则为true
     // 	为false的情况下才能使用track-offset
     native: {
@@ -11369,7 +11817,7 @@
     scrollX: Number,
     scrollY: Number,
     fit: Boolean,
-    ...pick(props$m, barKeys$1)
+    ...pick(props$n, barKeys$1)
   };
   const barKeys = [
     "always",
@@ -11383,7 +11831,7 @@
     "autoResize",
     "native"
   ];
-  const props$k = {
+  const props$l = {
     tag: {
       type: String,
       default: "div"
@@ -11416,10 +11864,10 @@
       type: Boolean,
       default: true
     },
-    barTo: props$l.to,
-    ...pick(props$l, barKeys)
+    barTo: props$m.to,
+    ...pick(props$m, barKeys)
   };
-  const COMPONENT_NAME$t = "vc-scroller-track";
+  const COMPONENT_NAME$v = "vc-scroller-track";
   const BAR_MAP = {
     vertical: {
       scroll: "scrollTop",
@@ -11439,8 +11887,8 @@
     }
   };
   const Track$1 = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$t,
-    props: props$m,
+    name: COMPONENT_NAME$v,
+    props: props$n,
     emits: ["change"],
     setup(props2, {
       emit,
@@ -11597,10 +12045,10 @@
       };
     }
   });
-  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(props2, {
       emit,
@@ -11809,10 +12257,10 @@
       refreshPosition
     };
   };
-  const COMPONENT_NAME$r = "vc-scroller";
+  const COMPONENT_NAME$t = "vc-scroller";
   const Scroller = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$r,
-    props: props$k,
+    name: COMPONENT_NAME$t,
+    props: props$l,
     emits: ["scroll"],
     setup(props2, {
       slots,
@@ -11869,10 +12317,10 @@
       };
     }
   });
-  const COMPONENT_NAME$q = "vc-scroller-wheel";
+  const COMPONENT_NAME$s = "vc-scroller-wheel";
   const ScrollerWheel = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$q,
-    props: props$k,
+    name: COMPONENT_NAME$s,
+    props: props$l,
     emits: ["scroll"],
     setup(props2, {
       slots,
@@ -11969,9 +12417,9 @@
       };
     }
   });
-  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
     }) {
@@ -12040,7 +12488,7 @@
       [REFRESH]: "加载中..."
     }
   };
-  const props$j = {
+  const props$k = {
     inverted: {
       type: Boolean,
       default: false
@@ -12095,11 +12543,11 @@
     );
     return keys;
   };
-  const COMPONENT_NAME$o = "vc-recycle-list-container";
+  const COMPONENT_NAME$q = "vc-recycle-list-container";
   const transformKey = 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(props2, {
       slots
@@ -12191,16 +12639,16 @@
       };
     }
   });
-  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
@@ -12212,9 +12660,10 @@
       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;
       };
@@ -12232,10 +12681,10 @@
       };
     }
   });
-  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(props2, {
       slots,
@@ -12736,17 +13185,17 @@
     }
   });
   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(props2, { emit, slots }) {
       const width = vue.ref(0);
       const height = vue.ref(0);
@@ -12772,8 +13221,9 @@
         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;
       };
@@ -12797,16 +13247,16 @@
   });
   const MResizer = Resizer;
   const MScroller = Scroller;
-  const props$h = {
+  const props$i = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -12818,16 +13268,16 @@
     }
   });
   const MSelect = Select;
-  const props$g = {
+  const props$h = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -12839,16 +13289,16 @@
     }
   });
   const MSlider = Slider;
-  const props$f = {
+  const props$g = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -12860,16 +13310,16 @@
     }
   });
   const MSortList = SortList;
-  const props$e = {
+  const props$f = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -12881,16 +13331,16 @@
     }
   });
   const MSteps = Steps;
-  const props$d = {
+  const props$e = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -12902,16 +13352,16 @@
     }
   });
   const MSwitch = Switch;
-  const props$c = {
+  const props$d = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  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(props2, {
       slots
     }) {
@@ -12923,7 +13373,7 @@
     }
   });
   const MTable = Table;
-  const props$b = {
+  const props$c = {
     type: {
       type: String,
       validator: (v) => /^(line|card)$/.test(v),
@@ -13030,7 +13480,7 @@
       if (!item) return;
       list.value.splice(list.value.indexOf(item.props), 1);
     };
-    vue.provide("tabs", {
+    vue.provide("vc-tabs", {
       props: props2,
       currentValue,
       refresh,
@@ -13074,10 +13524,10 @@
       handleChange
     };
   };
-  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(props2, {
       slots
@@ -13222,7 +13672,7 @@
       };
     }
   });
-  const props$a = {
+  const props$b = {
     value: {
       type: [String, Number]
     },
@@ -13248,7 +13698,7 @@
     const { props: props2 } = 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 === (props2.value || currentValue.value);
       if (!isLoaded.value && state) {
@@ -13300,10 +13750,10 @@
       currentValue
     };
   };
-  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
     }) {
@@ -13317,8 +13767,289 @@
       };
     }
   });
-  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
+    }
+  };
+  const COMPONENT_NAME$e = "vcm-tabs";
+  const MTabs = /* @__PURE__ */ vue.defineComponent({
+    name: COMPONENT_NAME$e,
+    props: props$a,
+    emits: ["update:modelValue", "change", "click"],
+    setup(props2, {
+      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 props2.theme === "dark";
+      });
+      const fixedStyle = vue.computed(() => {
+        return isFixed.value ? {
+          top: `${props2.offsetTop}px`
+        } : {};
+      });
+      let tabs;
+      const handleScroll = throttle$2(() => {
+        isFixed.value = document.scrollingElement.scrollTop + props2.offsetTop > top.value;
+      }, 100);
+      const handleTouchstart = (e) => {
+        isTouching.value = true;
+        startX.value = e.touches[0].pageX;
+        baseX.value = tabs.scrollOffset.value;
+      };
+      const handleTouchmove = throttle$2((e) => {
+        const touchPageX = e.touches[0].pageX;
+        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;
+      };
+      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;
+      };
+      const refreshTop = debounce$1(() => {
+        if (props2.sticky) {
+          top.value = content.value.offsetTop - placeholderH.value;
+          isFixed.value = document.scrollingElement.scrollTop + props2.offsetTop > top.value;
+        }
+      }, 250, {
+        leading: true,
+        trailing: true
+      });
+      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) {
+          const targetOffset = (viewRect.width - activeRect.width) / 2;
+          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 (!props2.showWrapper) return;
+        vue.nextTick(() => {
+          const index = tabs.getTabIndex(tabs.currentValue.value);
+          if (instance.isUnmounted) return;
+          const items = nav.value.querySelectorAll(`.vcm-tabs__item`);
+          const $2 = items[index];
+          tabs.afloatWidth.value = $2 ? isDark.value ? 20 : props2.autoAfloatWidth ? $2.querySelector("span").offsetWidth : $2.offsetWidth : 0;
+          if (!Array.from(items).length) return;
+          let offset = 0;
+          const basicOffset = $2 ? ($2.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();
+        });
+      };
+      const operateDOMEvents = (type) => {
+        if (!props2.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(() => props2.theme, refreshAfloat);
+      vue.watch(() => props2.average, refreshAfloat);
+      vue.watch(() => props2.showStep, () => vue.nextTick(refreshScroll));
+      return () => {
+        return vue.createVNode("div", {
+          "class": [tabs.classes.value, "vcm-tabs"]
+        }, [props2.showWrapper && vue.createVNode("div", {
+          "ref": wrapper,
+          "style": [props2.barStyle, fixedStyle.value],
+          "class": [{
+            "is-fixed": isFixed
+          }, "vcm-tabs__bar"]
+        }, [vue.createVNode("slot", {
+          "name": "prepend"
+        }, null), slots.prepend?.(), props2.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"
+        }, [props2.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": props2.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)]);
+        })])]), props2.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?.()])]);
+      };
+    }
+  });
+  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: {
       type: String,
@@ -13740,8 +14471,8 @@
     MDebounce: Debounce,
     Divider,
     MDivider,
-    Drawer,
-    MDrawer,
+    DrawerView,
+    MDrawerView,
     Dropdown,
     MDropdown,
     // DropdownItem,
@@ -13784,8 +14515,8 @@
     MListItem,
     Marquee,
     MMarquee,
-    Modal: modal$1,
-    MModal: modal,
+    ModalView,
+    MModalView,
     Notice: Notice$1,
     MNotice,
     Option,
@@ -94019,6 +94750,7 @@
   exports.Checkbox = Checkbox;
   exports.Clipboard = Clipboard;
   exports.Collapse = Collapse;
+  exports.CollapseItem = CollapseItem;
   exports.ColorPicker = ColorPicker;
   exports.Components = Components;
   exports.Countdown = Countdown;
@@ -94026,7 +94758,8 @@
   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;
@@ -94058,13 +94791,14 @@
   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;