@deot/vc 1.0.1 → 1.0.2

package/dist/index.umd.cjs

@@ -4967,48 +4967,32 @@
   });
   const MActionSheet = ActionSheet;
   const props$1f = {
-    tag: {
+    modelValue: {
+      type: Boolean,
+      default: true
+    },
+    type: {
       type: String,
-      default: "div"
-    }
-  };
-  const COMPONENT_NAME$1v = "vc-alert";
-  const Alert = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1v,
-    props: props$1f,
-    setup(props2, {
-      slots
-    }) {
-      return () => {
-        return vue.createVNode("div", {
-          "class": "vc-alert"
-        }, [slots?.default?.()]);
-      };
-    }
-  });
-  const MAlert = Alert;
-  const props$1e = {
-    tag: {
+      default: "info"
+    },
+    title: {
       type: String,
-      default: "div"
+      default: ""
+    },
+    desc: {
+      type: String,
+      default: ""
+    },
+    icon: {
+      type: [String, Boolean],
+      default: true
+    },
+    closable: {
+      type: Boolean,
+      default: false
     }
   };
-  const COMPONENT_NAME$1u = "vc-artboard";
-  const Artboard = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1u,
-    props: props$1e,
-    setup(props2, {
-      slots
-    }) {
-      return () => {
-        return vue.createVNode("div", {
-          "class": "vc-artboard"
-        }, [slots?.default?.()]);
-      };
-    }
-  });
-  const MArtboard = Artboard;
-  const props$1d = {
+  const props$1e = {
     type: String,
     inherit: {
       type: Boolean,
@@ -5149,10 +5133,10 @@
     }
   }
   const IconManager = new Manager();
-  const COMPONENT_NAME$1t = "vc-icon";
+  const COMPONENT_NAME$1v = "vc-icon";
   const Icon = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1t,
-    props: props$1d,
+    name: COMPONENT_NAME$1v,
+    props: props$1e,
     setup(props2) {
       const viewBox = vue.ref("0 0 1024 1024");
       const path = vue.ref([]);
@@ -5184,184 +5168,764 @@
       };
     }
   });
-  const props$1c = {
-    size: {
-      type: Number,
-      default: 28
-    },
-    foreground: {
-      type: String,
-      default: "#ccc"
-    },
-    background: {
-      type: String,
-      default: "var(--vc-color-primary)"
-    },
+  const props$1d = {
     /**
-     * 待开发
+     * 进入/离开持续时间
+     * {enter: 300, leave: 300}
      */
-    fixed: {
-      type: Boolean,
-      default: false
-    }
-  };
-  const COMPONENT_NAME$1s = "vc-spin";
-  const Spin = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1s,
-    props: props$1c,
-    setup(props2, {
-      slots
-    }) {
-      return () => {
-        return vue.createVNode("div", {
-          "class": "vc-spin"
-        }, [vue.createVNode("span", {
-          "style": {
-            fontSize: `${props2.size}px`
-          }
-        }, [slots?.loading?.() || vue.createVNode("svg", {
-          "xmlns": "http://www.w3.org/2000/svg",
-          "version": "1.1",
-          "viewBox": "0 0 32 32",
-          "width": "100%",
-          "height": "100%"
-        }, [vue.createVNode("path", {
-          "stroke": props2.foreground,
-          "d": "M 16 2 A 14 14 0 1 0 30 15",
-          "fill": "none",
-          "stroke-width": "2",
-          "stroke-linecap": "round"
-        }, null), vue.createVNode("path", {
-          "stroke": props2.background,
-          "d": "M 16 2 A 14 14 0 0 1 30 15",
-          "fill": "none",
-          "stroke-width": "2",
-          "stroke-linecap": "round"
-        }, null)])]), slots?.default?.()]);
-      };
-    }
-  });
-  const props$1b = {
-    wait: {
-      type: Number,
-      default: 250
-    },
-    tag: {
-      type: [String, Object],
-      default: "div"
+    duration: {
+      type: [Number, Object],
+      default: 300
     },
-    include: {
-      type: RegExp,
-      default: () => /^on([A-Z])/
+    /**
+     * 进入/离开延迟时间
+     */
+    delay: {
+      type: [Number, Object],
+      default: 0
     },
-    exclude: RegExp
-  };
-  const COMPONENT_NAME$1r = "vc-debounce";
-  const Debounce = vue.defineComponent({
-    name: COMPONENT_NAME$1r,
-    props: props$1b,
     /**
-     * 不声明emits使得事件被透传放入attrs中, 这样可以让所有的事件透传
-     * 如事件onClick
-     * 当inheritAttrs为true时：因为emits为声明onClick会覆盖到`props.tag`上，使得我们重写的onClick无效
-     * 当inheritAttrs为false时: 透传的onClick不会被重载，这样我们就可以重写onClick
+     * `transition-group` component.
+     */
+    group: Boolean,
+    /**
+     * `transition-group` tag, v3版本默认值无
      */
-    inheritAttrs: false,
-    setup(props2, { slots, attrs }) {
-      const listener = vue.ref({});
-      vue.watch(
-        [() => props2.wait, () => props2.exclude, () => props2.include],
-        () => {
-          const { wait, exclude, include } = props2;
-          const ons = Object.entries(attrs).reduce((pre, [key, callback]) => {
-            /* istanbul ignore else -- @preserve */
-            if ((!exclude || !exclude.test(key)) && (!include || include.test(key)) && typeof callback === "function") {
-              pre[key] = debounce$1(callback, wait, {
-                leading: true,
-                trailing: false
-              });
-            }
-            return pre;
-          }, {});
-          if (Object.keys(listener.value).length !== Object.keys(ons).length) {
-            listener.value = ons;
-          }
-        },
-        {
-          immediate: true
-        }
-      );
-      return () => {
-        return vue.h(props2.tag, {
-          ...attrs,
-          ...listener.value
-        }, slots.default?.());
-      };
-    }
-  });
-  const props$1a = {
     tag: {
       type: String,
-      default: "button"
+      default: void 0
     },
-    type: {
+    /**
+     *  变换的初始位置, 可以用style代替, 更短~~
+     */
+    origin: {
       type: String,
-      default: "default"
+      default: ""
     },
-    size: {
-      type: String,
-      default: "medium"
+    /**
+     * 在转换期间应用的元素样式。这些样式应用于@beforeEnter和@beforeLeave钩子
+     * inheritAttrs必须是false
+     */
+    style: {
+      type: Object,
+      default: () => {
+        return {
+          animationFillMode: "both",
+          animationTimingFunction: "ease-out"
+        };
+      }
     },
-    wait: {
-      type: Number,
-      default: 250
+    prefix: {
+      type: String,
+      default: "vc-transition"
     },
-    icon: String,
-    disabled: Boolean,
-    circle: Boolean,
-    round: Boolean,
-    long: Boolean,
-    htmlType: {
+    mode: {
       type: String,
-      default: "button"
+      default: "none"
     }
   };
-  const COMPONENT_NAME$1q = "vc-button";
-  const Button = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1q,
-    emits: ["click"],
-    props: props$1a,
-    setup(props2, {
-      slots
-    }) {
-      const vm = vue.getCurrentInstance();
-      const hasSlot = vue.ref(true);
-      const isLoading = vue.ref(false);
-      const group = vue.inject("button-group", {
-        size: "medium",
-        vertical: false,
-        circle: false
-      });
-      const classes = vue.computed(() => ({
-        "is-circle": props2.circle || group.circle,
-        "is-alone": !hasSlot.value,
-        "is-round": props2.round,
-        "is-long": props2.long,
-        "is-disabled": props2.disabled,
-        [`is-${props2.size}`]: true,
-        [`is-${props2.type}`]: true
-      }));
-      const handleClick = (...args) => {
-        const fn = vm.vnode.props?.["onClick"]?.(...args);
-        if (fn && fn.then) {
-          isLoading.value = true;
-          fn.finally(() => {
-            isLoading.value = false;
-          });
-        }
-      };
-      vue.onMounted(() => {
-        hasSlot.value = slots.default !== void 0;
+  const trim = (str) => str.trim().replace(/\s+/g, " ");
+  const useTransition = () => {
+    const instance = vue.getCurrentInstance();
+    const attrs = instance.attrs;
+    const props2 = instance.props;
+    const Wrapper = vue.computed(() => {
+      return props2.group ? vue.TransitionGroup : vue.Transition;
+    });
+    const classes = vue.computed(() => {
+      const modeClass = props2.mode !== "none" ? `is-${props2.mode.replace(/-/g, " is-")}` : "";
+      return {
+        enterActiveClass: trim(`${attrs.enterActiveClass || ""} ${props2.prefix} ${modeClass} is-in`),
+        leaveActiveClass: trim(`${attrs.leaveActiveClass || ""} ${props2.prefix} ${modeClass} is-out`),
+        moveClass: props2.group ? trim(`${attrs.moveClass || ""} ${props2.prefix} ${modeClass} is-move`) : void 0
+      };
+    });
+    const clearStyles = (el2) => {
+      Object.keys(props2.style).forEach((key) => {
+        const v = props2.style[key];
+        v && el2.style.removeProperty(
+          key.replace(/([A-Z])/g, "-$1").toLowerCase()
+        );
+      });
+      el2.style.removeProperty("animation-duration");
+      el2.style.removeProperty("animation-delay");
+    };
+    const resetAbsolute = (el2) => {
+      props2.group && (el2.style.position = "absolute");
+    };
+    const resetOrigin = (el2) => {
+      props2.origin && (el2.style.transformOrigin = props2.origin);
+    };
+    const resetStyles = (el2) => {
+      resetOrigin(el2);
+      Object.keys(props2.style).forEach((key) => {
+        const v = props2.style[key];
+        v && (el2.style[key] = v);
+      });
+    };
+    const handleBeforeEnter = (el2) => {
+      const duration = props2.duration.enter || props2.duration;
+      el2.style.animationDuration = `${duration}ms`;
+      const delay = props2.delay.enter || props2.delay;
+      el2.style.animationDelay = `${delay}ms`;
+      resetStyles(el2);
+      attrs.onBeforeEnter?.(el2);
+    };
+    const createNext = (callback, duration) => {
+      let hasDone = false;
+      return (immediate = true) => {
+        if (hasDone) return;
+        hasDone = true;
+        const done = () => callback?.();
+        immediate ? done() : setTimeout(done, duration);
+      };
+    };
+    const handleEnter = async (el2, done) => {
+      const duration = props2.duration.enter || props2.duration;
+      const next = createNext(done, duration);
+      try {
+        await attrs.onEnter?.(el2, next);
+      } finally {
+        next(false);
+      }
+    };
+    const handleAfterEnter = (el2) => {
+      clearStyles(el2);
+      attrs.onAfterEnter?.(el2);
+    };
+    const handleBeforeLeave = (el2) => {
+      const duration = props2.duration.leave || props2.duration;
+      el2.style.animationDuration = `${duration}ms`;
+      const delay = props2.delay.leave || props2.delay;
+      el2.style.animationDelay = `${delay}ms`;
+      resetStyles(el2);
+      attrs.onBeforeLeave?.(el2);
+    };
+    const handleLeave = async (el2, done) => {
+      const duration = props2.duration.leave || props2.duration;
+      const next = createNext(done, duration);
+      try {
+        resetAbsolute(el2);
+        await attrs.onLeave?.(el2, next);
+      } finally {
+        next(props2.group ? true : false);
+      }
+    };
+    const handleAfterLeave = (el2) => {
+      clearStyles(el2);
+      attrs.onAfterLeave?.(el2);
+    };
+    return {
+      Wrapper,
+      resetStyles,
+      resetAbsolute,
+      classes,
+      createNext,
+      listeners: {
+        onBeforeEnter: handleBeforeEnter,
+        onEnter: handleEnter,
+        onAfterEnter: handleAfterEnter,
+        onBeforeLeave: handleBeforeLeave,
+        onLeave: handleLeave,
+        onAfterLeave: handleAfterLeave
+      }
+    };
+  };
+  const COMPONENT_NAME$1u = "vc-transition";
+  const Transition = vue.defineComponent({
+    name: COMPONENT_NAME$1u,
+    props: props$1d,
+    // 当不声明emits的情况下，事件存在于attrs中
+    inheritAttrs: false,
+    setup(props2, { slots, attrs }) {
+      const { Wrapper, listeners, classes } = useTransition();
+      return () => {
+        return vue.h(
+          Wrapper.value,
+          {
+            ...attrs,
+            ...listeners,
+            ...classes.value,
+            tag: props2.tag
+          },
+          slots
+        );
+      };
+    }
+  });
+  const COMPONENT_NAME$1t = "vc-transition-collapse";
+  const TransitionCollapse = vue.defineComponent({
+    name: COMPONENT_NAME$1t,
+    props: props$1d,
+    // 当不声明emits的情况下，事件存在于attrs中
+    inheritAttrs: false,
+    setup(props2, { slots, attrs: _attrs }) {
+      const attrs = _attrs;
+      const { Wrapper, resetStyles, resetAbsolute, createNext } = useTransition();
+      const getTransitionStyle = (duration) => {
+        const style = `
+				${duration}ms height ease-in-out, 
+				${duration}ms padding-top ease-in-out, 
+				${duration}ms padding-bottom ease-in-out
+			`;
+        return style;
+      };
+      const handleBeforeEnter = (el2) => {
+        const duration = props2.duration.enter || props2.duration;
+        el2.style.transition = getTransitionStyle(duration);
+        /* istanbul ignore next -- @preserve */
+        if (!el2.dataset) {
+          el2.dataset = {};
+        }
+        el2.dataset.oldPaddingTop = el2.style.paddingTop;
+        el2.dataset.oldPaddingBottom = el2.style.paddingBottom;
+        el2.style.height = "0px";
+        el2.style.paddingTop = "0px";
+        el2.style.paddingBottom = "0px";
+        resetStyles(el2);
+        attrs.onBeforeEnter?.(el2);
+      };
+      const handleEnter = async (el2, done) => {
+        const duration = props2.duration.enter || props2.duration;
+        const next = createNext(done, duration);
+        try {
+          el2.dataset.oldOverflow = el2.style.overflow;
+          /* istanbul ignore next -- @preserve */
+          if (el2.scrollHeight !== 0) {
+            el2.style.height = el2.scrollHeight + "px";
+            el2.style.paddingTop = el2.dataset.oldPaddingTop + "px";
+            el2.style.paddingBottom = el2.dataset.oldPaddingBottom + "px";
+          } else {
+            el2.style.height = "";
+            el2.style.paddingTop = el2.dataset.oldPaddingTop + "px";
+            el2.style.paddingBottom = el2.dataset.oldPaddingBottom + "px";
+          }
+          el2.style.overflow = "hidden";
+          attrs.onEnter?.(el2);
+        } finally {
+          next(false);
+        }
+      };
+      const handleAfterEnter = (el2) => {
+        el2.style.transition = "";
+        el2.style.height = "";
+        el2.style.overflow = el2.dataset.oldOverflow || "";
+        attrs.onAfterEnter?.(el2);
+      };
+      const handleBeforeLeave = (el2) => {
+        /* istanbul ignore next -- @preserve */
+        if (!el2.dataset) {
+          el2.dataset = {};
+        }
+        el2.dataset.oldPaddingTop = el2.style.paddingTop;
+        el2.dataset.oldPaddingBottom = el2.style.paddingBottom;
+        el2.dataset.oldOverflow = el2.style.overflow;
+        el2.style.height = el2.scrollHeight + "px";
+        el2.style.overflow = "hidden";
+        resetStyles(el2);
+        attrs.onBeforeLeave?.(el2);
+      };
+      const handleLeave = (el2, done) => {
+        const duration = props2.duration.leave || props2.duration;
+        const next = createNext(done, duration);
+        try {
+          const leaveDuration = props2.duration.leave || props2.duration;
+          /* istanbul ignore next -- @preserve */
+          if (el2.scrollHeight !== 0) {
+            el2.style.transition = getTransitionStyle(leaveDuration);
+            el2.style.height = "0px";
+            el2.style.paddingTop = "0px";
+            el2.style.paddingBottom = "0px";
+          }
+          resetAbsolute(el2);
+          attrs.onLeave?.(el2);
+        } finally {
+          next(props2.group ? true : false);
+        }
+      };
+      const handleAfterLeave = (el2) => {
+        el2.style.transition = "";
+        el2.style.height = "";
+        el2.style.overflow = el2.dataset.oldOverflow || "";
+        el2.style.paddingTop = el2.dataset.oldPaddingTop || "";
+        el2.style.paddingBottom = el2.dataset.oldPaddingBottom || "";
+        attrs.onAfterLeave?.(el2);
+      };
+      const listeners = {
+        onBeforeEnter: handleBeforeEnter,
+        onEnter: handleEnter,
+        onAfterEnter: handleAfterEnter,
+        onBeforeLeave: handleBeforeLeave,
+        onLeave: handleLeave,
+        onAfterLeave: handleAfterLeave
+      };
+      return () => {
+        return vue.h(
+          Wrapper.value,
+          {
+            ...attrs,
+            ...listeners,
+            tag: props2.tag,
+            moveClass: props2.group ? `${attrs.moveClass || ""} vc-transition-collapse is-move` : void 0
+          },
+          slots
+        );
+      };
+    }
+  });
+  const COMPONENT_NAME$1s = "vc-transition-fade";
+  const TransitionFade = vue.defineComponent({
+    name: COMPONENT_NAME$1s,
+    props: {
+      ...props$1d,
+      // inheritAttrs必须是false
+      style: {
+        type: Object,
+        default: () => ({
+          animationFillMode: "both",
+          animationTimingFunction: void 0
+        })
+      },
+      prefix: {
+        type: String,
+        default: "vc-transition-fade"
+      }
+    },
+    // 当不声明emits的情况下，事件存在于attrs中
+    inheritAttrs: false,
+    setup(props2, { slots, attrs }) {
+      const { Wrapper, listeners, classes } = useTransition();
+      return () => {
+        return vue.h(
+          Wrapper.value,
+          {
+            ...attrs,
+            ...listeners,
+            ...classes.value,
+            tag: props2.tag
+          },
+          slots
+        );
+      };
+    }
+  });
+  const COMPONENT_NAME$1r = "vc-transition-scale";
+  const TransitionScale = vue.defineComponent({
+    name: COMPONENT_NAME$1r,
+    props: {
+      ...props$1d,
+      mode: {
+        type: String,
+        default: "both",
+        validator: (v) => /(part|both|y|x|none)/.test(v)
+      },
+      // inheritAttrs必须是false
+      style: {
+        type: Object,
+        default: () => ({
+          animationFillMode: "both",
+          animationTimingFunction: void 0
+        })
+      },
+      prefix: {
+        type: String,
+        default: "vc-transition-scale"
+      }
+    },
+    // 当不声明emits的情况下，事件存在于attrs中
+    inheritAttrs: false,
+    setup(props2, { slots, attrs }) {
+      const { Wrapper, listeners, classes } = useTransition();
+      return () => {
+        return vue.h(
+          Wrapper.value,
+          {
+            ...attrs,
+            ...listeners,
+            ...classes.value,
+            tag: props2.tag
+          },
+          slots
+        );
+      };
+    }
+  });
+  const COMPONENT_NAME$1q = "vc-transition-slide";
+  const TransitionSlide = vue.defineComponent({
+    name: COMPONENT_NAME$1q,
+    props: {
+      ...props$1d,
+      mode: {
+        type: String,
+        default: "left",
+        validator: (v) => /^(left|right|down|up|none)(|-part)$/.test(v)
+      },
+      // inheritAttrs必须是false
+      style: {
+        type: Object,
+        default: () => ({
+          animationFillMode: "both",
+          animationTimingFunction: void 0
+        })
+      },
+      prefix: {
+        type: String,
+        default: "vc-transition-slide"
+      }
+    },
+    // 当不声明emits的情况下，事件存在于attrs中
+    inheritAttrs: false,
+    setup(props2, { slots, attrs }) {
+      const { Wrapper, listeners, classes } = useTransition();
+      return () => {
+        return vue.h(
+          Wrapper.value,
+          {
+            ...attrs,
+            ...listeners,
+            ...classes.value,
+            tag: props2.tag
+          },
+          slots
+        );
+      };
+    }
+  });
+  const COMPONENT_NAME$1p = "vc-transition-zoom";
+  const TransitionZoom = vue.defineComponent({
+    name: COMPONENT_NAME$1p,
+    props: {
+      ...props$1d,
+      mode: {
+        type: String,
+        default: "x",
+        validator: (v) => /^(x|y|center|none)$/.test(v)
+      },
+      // inheritAttrs必须是false
+      style: {
+        type: Object,
+        default: () => ({
+          animationFillMode: "both",
+          animationTimingFunction: void 0
+        })
+      },
+      prefix: {
+        type: String,
+        default: "vc-transition-zoom"
+      }
+    },
+    // 当不声明emits的情况下，事件存在于attrs中
+    inheritAttrs: false,
+    setup(props2, { slots, attrs }) {
+      const { Wrapper, listeners, classes } = useTransition();
+      return () => {
+        return vue.h(
+          Wrapper.value,
+          {
+            ...attrs,
+            ...listeners,
+            ...classes.value,
+            tag: props2.tag
+          },
+          slots
+        );
+      };
+    }
+  });
+  const COMPONENT_NAME$1o = "vc-alert";
+  const THEME_MAP = {
+    info: ["#5495f6", "#91d5ff", "#e6f7ff"],
+    success: ["#52c41a", "#b7eb8f", "#f6ffed"],
+    error: ["#ed4014", "#ffb08f", "#fbe9e9"],
+    warning: ["#ffbf00", "#ffe58f", "#fffbe6"]
+  };
+  const Alert = /* @__PURE__ */ vue.defineComponent({
+    name: COMPONENT_NAME$1o,
+    props: props$1f,
+    setup(props2, {
+      slots,
+      emit
+    }) {
+      const isActive = vue.ref(false);
+      const showIcon = vue.computed(() => props2.icon !== false);
+      const containerStyle = vue.computed(() => {
+        const [_, borderColor, backgroundColor] = THEME_MAP[props2.type];
+        return {
+          borderColor,
+          backgroundColor
+        };
+      });
+      const iconStyle = vue.computed(() => {
+        const [color] = THEME_MAP[props2.type];
+        return {
+          color
+        };
+      });
+      const titleStyle = vue.computed(() => {
+        const [color] = THEME_MAP[props2.type];
+        return props2.desc || slots.desc ? {
+          marginBottom: "5px",
+          fontSize: "14px",
+          color
+        } : {};
+      });
+      const descStyle = vue.computed(() => {
+        const [color] = THEME_MAP[props2.type];
+        return {
+          color,
+          opacity: ".7"
+        };
+      });
+      const iconType = vue.computed(() => {
+        return typeof props2.icon === "string" && props2.icon ? props2.icon : props2.type;
+      });
+      const handleClose = () => {
+        isActive.value = false;
+        emit("close");
+        emit("update:modelValue", false);
+        emit("visible-change", false);
+      };
+      vue.watch(() => props2.modelValue, (v) => {
+        isActive.value = v;
+      }, {
+        immediate: true
+      });
+      return () => {
+        return vue.createVNode(TransitionFade, null, {
+          default: () => [isActive.value && vue.createVNode("div", {
+            "class": [`is-${props2.type}`, {
+              "has-icon": showIcon.value,
+              "has-desc": props2.desc || slots.desc
+            }, "vc-alert"],
+            "style": containerStyle.value
+          }, [showIcon.value && vue.createVNode(Icon, {
+            "type": iconType.value,
+            "style": iconStyle.value,
+            "class": "vc-alert__icon"
+          }, null), vue.createVNode("div", {
+            "class": "vc-alert__content"
+          }, [vue.createVNode("div", {
+            "class": "vc-alert__message"
+          }, [props2.title ? vue.createVNode("div", {
+            "style": titleStyle.value,
+            "innerHTML": props2.title
+          }, null) : vue.createVNode("div", {
+            "style": titleStyle.value
+          }, [slots?.default?.()]), props2.desc ? vue.createVNode("div", {
+            "style": descStyle.value,
+            "innerHTML": props2.desc
+          }, null) : slots.desc && vue.createVNode("div", {
+            "style": descStyle.value
+          }, [slots.desc?.()])]), props2.closable && vue.createVNode("div", {
+            "class": "vc-alert__close",
+            "onClick": handleClose
+          }, [slots.close ? slots.close() : vue.createVNode(Icon, {
+            "type": "close"
+          }, null)])])])]
+        });
+      };
+    }
+  });
+  const MAlert = Alert;
+  const props$1c = {
+    tag: {
+      type: String,
+      default: "div"
+    }
+  };
+  const COMPONENT_NAME$1n = "vc-artboard";
+  const Artboard = /* @__PURE__ */ vue.defineComponent({
+    name: COMPONENT_NAME$1n,
+    props: props$1c,
+    setup(props2, {
+      slots
+    }) {
+      return () => {
+        return vue.createVNode("div", {
+          "class": "vc-artboard"
+        }, [slots?.default?.()]);
+      };
+    }
+  });
+  const MArtboard = Artboard;
+  const props$1b = {
+    size: {
+      type: Number,
+      default: 28
+    },
+    foreground: {
+      type: String,
+      default: "#ccc"
+    },
+    background: {
+      type: String,
+      default: "var(--vc-color-primary)"
+    },
+    /**
+     * 待开发
+     */
+    fixed: {
+      type: Boolean,
+      default: false
+    }
+  };
+  const COMPONENT_NAME$1m = "vc-spin";
+  const Spin = /* @__PURE__ */ vue.defineComponent({
+    name: COMPONENT_NAME$1m,
+    props: props$1b,
+    setup(props2, {
+      slots
+    }) {
+      return () => {
+        return vue.createVNode("div", {
+          "class": "vc-spin"
+        }, [vue.createVNode("span", {
+          "style": {
+            fontSize: `${props2.size}px`
+          }
+        }, [slots?.loading?.() || vue.createVNode("svg", {
+          "xmlns": "http://www.w3.org/2000/svg",
+          "version": "1.1",
+          "viewBox": "0 0 32 32",
+          "width": "100%",
+          "height": "100%"
+        }, [vue.createVNode("path", {
+          "stroke": props2.foreground,
+          "d": "M 16 2 A 14 14 0 1 0 30 15",
+          "fill": "none",
+          "stroke-width": "2",
+          "stroke-linecap": "round"
+        }, null), vue.createVNode("path", {
+          "stroke": props2.background,
+          "d": "M 16 2 A 14 14 0 0 1 30 15",
+          "fill": "none",
+          "stroke-width": "2",
+          "stroke-linecap": "round"
+        }, null)])]), slots?.default?.()]);
+      };
+    }
+  });
+  const props$1a = {
+    wait: {
+      type: Number,
+      default: 250
+    },
+    tag: {
+      type: [String, Object],
+      default: "div"
+    },
+    include: {
+      type: RegExp,
+      default: () => /^on([A-Z])/
+    },
+    exclude: RegExp
+  };
+  const COMPONENT_NAME$1l = "vc-debounce";
+  const Debounce = vue.defineComponent({
+    name: COMPONENT_NAME$1l,
+    props: props$1a,
+    /**
+     * 不声明emits使得事件被透传放入attrs中, 这样可以让所有的事件透传
+     * 如事件onClick
+     * 当inheritAttrs为true时：因为emits为声明onClick会覆盖到`props.tag`上，使得我们重写的onClick无效
+     * 当inheritAttrs为false时: 透传的onClick不会被重载，这样我们就可以重写onClick
+     */
+    inheritAttrs: false,
+    setup(props2, { slots, attrs }) {
+      const listener = vue.ref({});
+      vue.watch(
+        [() => props2.wait, () => props2.exclude, () => props2.include],
+        () => {
+          const { wait, exclude, include } = props2;
+          const ons = Object.entries(attrs).reduce((pre, [key, callback]) => {
+            /* istanbul ignore else -- @preserve */
+            if ((!exclude || !exclude.test(key)) && (!include || include.test(key)) && typeof callback === "function") {
+              pre[key] = debounce$1(callback, wait, {
+                leading: true,
+                trailing: false
+              });
+            }
+            return pre;
+          }, {});
+          if (Object.keys(listener.value).length !== Object.keys(ons).length) {
+            listener.value = ons;
+          }
+        },
+        {
+          immediate: true
+        }
+      );
+      return () => {
+        return vue.h(props2.tag, {
+          ...attrs,
+          ...listener.value
+        }, slots.default?.());
+      };
+    }
+  });
+  const props$19 = {
+    tag: {
+      type: String,
+      default: "button"
+    },
+    type: {
+      type: String,
+      default: "default"
+    },
+    size: {
+      type: String,
+      default: "medium"
+    },
+    wait: {
+      type: Number,
+      default: 250
+    },
+    icon: String,
+    disabled: Boolean,
+    circle: Boolean,
+    round: Boolean,
+    long: Boolean,
+    htmlType: {
+      type: String,
+      default: "button"
+    }
+  };
+  const COMPONENT_NAME$1k = "vc-button";
+  const Button = /* @__PURE__ */ vue.defineComponent({
+    name: COMPONENT_NAME$1k,
+    emits: ["click"],
+    props: props$19,
+    setup(props2, {
+      slots
+    }) {
+      const vm = vue.getCurrentInstance();
+      const hasSlot = vue.ref(true);
+      const isLoading = vue.ref(false);
+      const group = vue.inject("button-group", {
+        size: "medium",
+        vertical: false,
+        circle: false
+      });
+      const classes = vue.computed(() => ({
+        "is-circle": props2.circle || group.circle,
+        "is-alone": !hasSlot.value,
+        "is-round": props2.round,
+        "is-long": props2.long,
+        "is-disabled": props2.disabled,
+        [`is-${props2.size}`]: true,
+        [`is-${props2.type}`]: true
+      }));
+      const handleClick = (...args) => {
+        const fn = vm.vnode.props?.["onClick"]?.(...args);
+        if (fn && fn.then) {
+          isLoading.value = true;
+          fn.finally(() => {
+            isLoading.value = false;
+          });
+        }
+      };
+      vue.onMounted(() => {
+        hasSlot.value = slots.default !== void 0;
       });
       return () => {
         return vue.createVNode(Debounce, {
@@ -5386,7 +5950,7 @@
       };
     }
   });
-  const props$19 = {
+  const props$18 = {
     vertical: {
       type: Boolean,
       default: false
@@ -5404,10 +5968,10 @@
       default: false
     }
   };
-  const COMPONENT_NAME$1p = "vc-button-group";
+  const COMPONENT_NAME$1j = "vc-button-group";
   const ButtonGroup = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1p,
-    props: props$19,
+    name: COMPONENT_NAME$1j,
+    props: props$18,
     setup(props2, {
       slots
     }) {
@@ -5429,16 +5993,16 @@
   });
   const MButton = Button;
   const MButtonGroup = ButtonGroup;
-  const props$18 = {
+  const props$17 = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  const COMPONENT_NAME$1o = "vc-calendar";
+  const COMPONENT_NAME$1i = "vc-calendar";
   const Calendar = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1o,
-    props: props$18,
+    name: COMPONENT_NAME$1i,
+    props: props$17,
     setup(props2, {
       slots
     }) {
@@ -5450,37 +6014,63 @@
     }
   });
   const MCalendar = Calendar;
-  const props$17 = {
-    tag: {
-      type: String,
-      default: "div"
+  const props$16 = {
+    border: {
+      type: Boolean,
+      default: true
+    },
+    shadow: {
+      type: Boolean,
+      default: false
+    },
+    padding: {
+      type: Number,
+      default: 16
+    },
+    title: {
+      type: String
+    },
+    icon: {
+      type: String
     }
   };
-  const COMPONENT_NAME$1n = "vc-card";
+  const COMPONENT_NAME$1h = "vc-card";
   const Card = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1n,
-    props: props$17,
+    name: COMPONENT_NAME$1h,
+    props: props$16,
     setup(props2, {
       slots
     }) {
       return () => {
         return vue.createVNode("div", {
-          "class": "vc-card"
-        }, [slots?.default?.()]);
+          "class": [{
+            "is-border": props2.border,
+            "is-shadow": props2.shadow
+          }, "vc-card"]
+        }, [(props2.title || slots.title) && vue.createVNode("div", {
+          "class": "vc-card__header"
+        }, [slots.title ? slots.title?.() : props2.title && vue.createVNode("p", null, [props2.icon && vue.createVNode(Icon, {
+          "type": props2.icon
+        }, null), vue.createVNode("span", null, [props2.title])])]), slots.extra && vue.createVNode("div", {
+          "class": "vc-card__extra"
+        }, [slots.extra?.()]), vue.createVNode("div", {
+          "style": `padding: ${props2.padding}px`,
+          "class": "vc-card__body"
+        }, [slots.default?.()])]);
       };
     }
   });
   const MCard = Card;
-  const props$16 = {
+  const props$15 = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  const COMPONENT_NAME$1m = "vc-carousel";
+  const COMPONENT_NAME$1g = "vc-carousel";
   const Carousel = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1m,
-    props: props$16,
+    name: COMPONENT_NAME$1g,
+    props: props$15,
     setup(props2, {
       slots
     }) {
@@ -5492,16 +6082,16 @@
     }
   });
   const MCarousel = Carousel;
-  const props$15 = {
+  const props$14 = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  const COMPONENT_NAME$1l = "vc-cascader";
+  const COMPONENT_NAME$1f = "vc-cascader";
   const Cascader = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1l,
-    props: props$15,
+    name: COMPONENT_NAME$1f,
+    props: props$14,
     setup(props2, {
       slots
     }) {
@@ -5513,16 +6103,16 @@
     }
   });
   const MCascader = Cascader;
-  const props$14 = {
+  const props$13 = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  const COMPONENT_NAME$1k = "vc-chart";
+  const COMPONENT_NAME$1e = "vc-chart";
   const Chart = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1k,
-    props: props$14,
+    name: COMPONENT_NAME$1e,
+    props: props$13,
     setup(props2, {
       slots
     }) {
@@ -5534,16 +6124,16 @@
     }
   });
   const MChart = Chart;
-  const props$13 = {
+  const props$12 = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  const COMPONENT_NAME$1j = "vc-checkbox";
+  const COMPONENT_NAME$1d = "vc-checkbox";
   const Checkbox = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1j,
-    props: props$13,
+    name: COMPONENT_NAME$1d,
+    props: props$12,
     setup(props2, {
       slots
     }) {
@@ -5555,16 +6145,16 @@
     }
   });
   const MCheckbox = Checkbox;
-  const props$12 = {
+  const props$11 = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  const COMPONENT_NAME$1i = "vc-clipboard";
+  const COMPONENT_NAME$1c = "vc-clipboard";
   const Clipboard = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1i,
-    props: props$12,
+    name: COMPONENT_NAME$1c,
+    props: props$11,
     setup(props2, {
       slots
     }) {
@@ -5576,16 +6166,16 @@
     }
   });
   const MClipboard = Clipboard;
-  const props$11 = {
+  const props$10 = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  const COMPONENT_NAME$1h = "vc-collapse";
+  const COMPONENT_NAME$1b = "vc-collapse";
   const Collapse = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1h,
-    props: props$11,
+    name: COMPONENT_NAME$1b,
+    props: props$10,
     setup(props2, {
       slots
     }) {
@@ -5597,16 +6187,16 @@
     }
   });
   const MCollapse = Collapse;
-  const props$10 = {
+  const props$$ = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  const COMPONENT_NAME$1g = "vc-color-picker";
+  const COMPONENT_NAME$1a = "vc-color-picker";
   const ColorPicker = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1g,
-    props: props$10,
+    name: COMPONENT_NAME$1a,
+    props: props$$,
     setup(props2, {
       slots
     }) {
@@ -5618,16 +6208,16 @@
     }
   });
   const MColorPicker = ColorPicker;
-  const props$$ = {
+  const props$_ = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  const COMPONENT_NAME$1f = "vc-countdown";
+  const COMPONENT_NAME$19 = "vc-countdown";
   const Countdown = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1f,
-    props: props$$,
+    name: COMPONENT_NAME$19,
+    props: props$_,
     setup(props2, {
       slots
     }) {
@@ -5639,16 +6229,16 @@
     }
   });
   const MCountdown = Countdown;
-  const props$_ = {
+  const props$Z = {
     render: {
       type: Function,
       default: () => null
     }
   };
-  const COMPONENT_NAME$1e = "vc-customer";
+  const COMPONENT_NAME$18 = "vc-customer";
   const Customer = vue.defineComponent({
-    name: COMPONENT_NAME$1e,
-    props: props$_,
+    name: COMPONENT_NAME$18,
+    props: props$Z,
     setup(props2, context) {
       return () => vue.h(() => {
         return props2.render(context.attrs, context);
@@ -5656,16 +6246,16 @@
     }
   });
   const MCustomer = Customer;
-  const props$Z = {
+  const props$Y = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  const COMPONENT_NAME$1d = "vc-date-picker";
+  const COMPONENT_NAME$17 = "vc-date-picker";
   const DatePicker = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1d,
-    props: props$Z,
+    name: COMPONENT_NAME$17,
+    props: props$Y,
     setup(props2, {
       slots
     }) {
@@ -5677,16 +6267,16 @@
     }
   });
   const MDatePicker = DatePicker;
-  const props$Y = {
+  const props$X = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  const COMPONENT_NAME$1c = "vc-divider";
+  const COMPONENT_NAME$16 = "vc-divider";
   const Divider = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1c,
-    props: props$Y,
+    name: COMPONENT_NAME$16,
+    props: props$X,
     setup(props2, {
       slots
     }) {
@@ -5698,16 +6288,16 @@
     }
   });
   const MDivider = Divider;
-  const props$X = {
+  const props$W = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  const COMPONENT_NAME$1b = "vc-drawer";
+  const COMPONENT_NAME$15 = "vc-drawer";
   const Drawer = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1b,
-    props: props$X,
+    name: COMPONENT_NAME$15,
+    props: props$W,
     setup(props2, {
       slots
     }) {
@@ -5719,16 +6309,16 @@
     }
   });
   const MDrawer = Drawer;
-  const props$W = {
+  const props$V = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  const COMPONENT_NAME$1a = "vc-dropdown";
+  const COMPONENT_NAME$14 = "vc-dropdown";
   const Dropdown = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$1a,
-    props: props$W,
+    name: COMPONENT_NAME$14,
+    props: props$V,
     setup(props2, {
       slots
     }) {
@@ -5740,16 +6330,16 @@
     }
   });
   const MDropdown = Dropdown;
-  const props$V = {
+  const props$U = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  const COMPONENT_NAME$19 = "vc-editor";
+  const COMPONENT_NAME$13 = "vc-editor";
   const Editor = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$19,
-    props: props$V,
+    name: COMPONENT_NAME$13,
+    props: props$U,
     setup(props2, {
       slots
     }) {
@@ -5761,16 +6351,16 @@
     }
   });
   const MEditor = Editor;
-  const props$U = {
+  const props$T = {
     tag: {
       type: String,
       default: "div"
     }
   };
-  const COMPONENT_NAME$18 = "vc-expand";
+  const COMPONENT_NAME$12 = "vc-expand";
   const Expand = /* @__PURE__ */ vue.defineComponent({
-    name: COMPONENT_NAME$18,
-    props: props$U,
+    name: COMPONENT_NAME$12,
+    props: props$T,
     setup(props2, {
       slots
     }) {
@@ -5782,7 +6372,7 @@
     }
   });
   const MExpand = Expand;
-  const props$T = {
+  const props$S = {
     tag: {
       type: String,
       default: "form"
@@ -5808,885 +6398,421 @@
       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 (e) {
-        return errors;
-      }
-    };
-    const scrollIntoView = (prop) => {
-      const field = getField(prop);
-      field.vnode?.el?.scrollIntoView?.({
-        behavior: "smooth",
-        block: "center"
-      });
-    };
-    const reset = (options$ = {}) => {
-      const { fields: fields$, original = {} } = options$;
-      filterFields(fields$).forEach((field) => {
-        let v;
-        try {
-          v = getPropByPath(original, field.props.prop).v;
-        } catch (e) {
-        }
-        field.exposed.reset(v);
-      });
-    };
-    const validate = async (options$ = {}) => {
-      const { scroll = true, fields: fields$ } = options$;
-      if (!fields.length) {
-        return;
-      }
-      const results = await Promise.allSettled(
-        filterFields(fields$).map((item) => item.exposed.validate(""))
-      );
-      const originErrors = results.filter((i) => i.status === "rejected").map((i) => i.reason);
-      if (!originErrors.length) return;
-      const errors = await sortErrors(originErrors);
-      showToast(errors[0].msg || errors[0].message);
-      scroll && scrollIntoView(errors[0].prop);
-      throw errors;
-    };
-    const validateField = async (prop, options$ = {}) => {
-      try {
-        await validate({
-          ...options$,
-          fields: [prop]
-        });
-      } catch (e) {
-        throw e[0];
-      }
-    };
-    expose({
-      reset,
-      validate,
-      // 单个操作
-      getField,
-      validateField
-    });
-  };
-  const COMPONENT_NAME$17 = "vc-form";
-  const Form = vue.defineComponent({
-    name: COMPONENT_NAME$17,
-    props: props$T,
-    setup(props2, { slots, expose }) {
-      useForm(expose);
-      return () => {
-        return vue.h(
-          props2.tag,
-          {
-            class: "vc-form",
-            autocomplete: props2.autocomplete
-          },
-          slots
-        );
-      };
-    }
-  });
-  const props$S = {
-    label: {
-      type: String,
-      default: ""
-    },
-    labelWidth: {
-      type: Number
-    },
-    prop: {
-      type: String
-    },
-    required: {
-      type: [Boolean, String],
-      default: false
-    },
-    error: {
-      type: String
-    },
-    rules: {
-      type: [Array, Object]
-    },
-    resetByRulesChanged: {
-      type: Boolean,
-      default: false
-    },
-    showMessage: {
-      type: Boolean,
-      default: true
-    },
-    labelFor: {
-      type: String
-    },
-    styleless: {
-      type: Boolean,
-      default: false
-    },
-    labelPosition: {
-      type: String,
-      default: "right"
-    },
-    contentStyle: String
-  };
-  const filterEmpty = (val) => {
-    if (val instanceof Array) {
-      val = val.filter((i) => i !== "");
+    autocomplete: {
+      type: String,
+      default: "off"
+    },
+    styleless: {
+      type: Boolean,
+      default: false
     }
-    return val;
-  };
-  const toRules = (rules) => {
-    return rules instanceof Array ? rules : rules ? [rules] : [];
   };
-  const useFormItem = (expose) => {
-    const form = vue.inject("form");
+  const useForm = (expose, options = {}) => {
     const instance = vue.getCurrentInstance();
     const props2 = instance.props;
-    const { slots } = instance;
-    if (!form?.props) {
-      throw new VcError("form-item", "form-item需要在form内使用");
-    }
-    const formItem = vue.inject("form-item", {});
-    const validateState = vue.ref("");
-    const validateMessage = vue.ref("");
-    let validateDisabled = false;
-    let initialValue;
-    const currentRules = vue.computed(() => {
-      const formRules = form.props.rules;
-      const formItemBindRules = toRules(props2.rules);
-      let formItemRules = formItemBindRules;
-      if (!formItemRules.length && formRules && props2.prop) {
-        try {
-          const key = props2.prop.replace(/\.[0-9]+\./g, ".");
-          const { v } = getPropByPath(formRules, key);
-          formItemRules = toRules(v);
-        } catch {
-          const rules = formRules[props2.prop];
-          formItemRules = toRules(rules);
-        }
-      }
-      return formItemRules;
-    });
-    const isRequired = vue.computed(() => {
-      if (!currentRules.value.length) {
-        return !!props2.required;
-      }
-      let required = false;
-      for (let i = 0; i < currentRules.value.length; i++) {
-        const rule = currentRules.value[i];
-        required = !!rule.required;
-        if (required) break;
-      }
-      return required;
-    });
-    const labelPosition = vue.computed(() => {
-      return props2.labelPosition || form.props.labelPosition;
-    });
-    const classes = vue.computed(() => {
-      return {
-        "is-require": isRequired.value,
-        "is-error": validateState.value === "error",
-        "is-validating": validateState.value === "validating",
-        "is-inline": form.props.inline,
-        "is-nest": isNest.value,
-        [`is-${labelPosition.value}`]: true
-      };
-    });
-    const isNest = vue.computed(() => {
-      return !!formItem.change;
-    });
-    const isNestLast = vue.ref(false);
-    const hasLabel = vue.computed(() => {
-      return !!props2.label || slots.label;
-    });
-    const labelStyle = vue.computed(() => {
-      const labelWidth = props2.labelWidth === 0 || props2.labelWidth ? props2.labelWidth : isNest.value ? 0 : form.props.labelWidth;
-      return {
-        width: labelPosition.value !== "top" && labelWidth && labelWidth > 0 ? `${labelWidth}px` : "auto",
-        textAlign: labelPosition.value === "top" ? "left" : labelPosition.value
-      };
-    });
-    const contentStyle = vue.computed(() => {
-      const labelWidth = props2.labelWidth === 0 || props2.labelWidth ? props2.labelWidth : form.props.labelWidth;
-      return [
-        {
-          marginLeft: !hasLabel.value && isNest.value ? 0 : labelWidth && labelWidth > 0 ? `${labelWidth}px` : "unset",
-          marginBottom: isNest.value && !isNestLast.value ? `20px` : 0
-        },
-        props2.contentStyle
-      ];
-    });
-    const isStyleless = vue.computed(() => {
-      return props2.styleless || form.props.styleless;
-    });
-    const fieldValue = vue.computed(() => {
-      const model = form.props.model;
-      if (!model || !props2.prop) {
-        return;
-      }
-      let path = props2.prop;
-      if (path.includes(":")) {
-        path = path.replace(/:/, ".");
+    const fields = [];
+    vue.provide("form", {
+      props: props2,
+      add: (field) => {
+        field && fields.push(field);
+      },
+      remove: (field) => {
+        field && fields.splice(fields.indexOf(field), 1);
       }
-      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 filterFields = (fields$) => {
+      return !fields$ ? fields : fields.filter((item) => fields$.includes(item.props.prop));
     };
-    const handleFieldBlur = () => {
-      if (!props2.prop) {
-        formItem.blur?.();
-        return;
-      }
-      validate("blur");
+    const getField = (prop) => {
+      const field = fields.find((item) => item.props.prop === prop);
+      if (!field) throw new VcError("form", "请选择有用的prop值");
+      return field;
     };
-    const handleFieldChange = () => {
-      if (!props2.prop) {
-        formItem.change?.();
-        return;
-      }
-      if (validateDisabled) {
-        validateDisabled = false;
-        return;
-      }
-      validate("change");
+    const showToast = (msg) => {
+      props2.showMessage && options.throwToast?.(msg);
     };
-    const getPosition = async () => {
-      let el2 = instance.vnode.el;
+    const sortErrors = async (errors) => {
+      const positions = await Promise.all(fields.map((item) => item.exposed.getPosition()));
       try {
-        while (el2 && !el2.getBoundingClientRect) {
-          el2 = el2.nextSibling;
-        }
-        ;
-        const rect = el2.getBoundingClientRect();
-        return {
-          top: rect.top,
-          left: rect.left
-        };
+        return [...errors].toSorted((a, b) => {
+          const aIndex = fields.findIndex((i) => i.props.prop === a.prop);
+          const bIndex = fields.findIndex((i) => i.props.prop === b.prop);
+          const aPosition = positions[aIndex];
+          const bPosition = positions[bIndex];
+          if (aPosition.top != bPosition.top) return aPosition.top - bPosition.top;
+          return aPosition.left - bPosition.left;
+        });
       } catch (e) {
-        throw new VcError("form-item", "form-item位置计算错误");
+        return errors;
       }
     };
-    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();
+    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) {
+        }
+        field.exposed.reset(v);
+      });
+    };
+    const validate = async (options$ = {}) => {
+      const { scroll = true, fields: fields$ } = options$;
+      if (!fields.length) {
+        return;
       }
-    );
-    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;
+      const results = await Promise.allSettled(
+        filterFields(fields$).map((item) => item.exposed.validate(""))
+      );
+      const originErrors = results.filter((i) => i.status === "rejected").map((i) => i.reason);
+      if (!originErrors.length) return;
+      const errors = await sortErrors(originErrors);
+      showToast(errors[0].msg || errors[0].message);
+      scroll && scrollIntoView(errors[0].prop);
+      throw errors;
+    };
+    const validateField = async (prop, options$ = {}) => {
+      try {
+        await validate({
+          ...options$,
+          fields: [prop]
         });
-        isNestLast.value = sortFields[sortFields.length - 1] === instance;
+      } catch (e) {
+        throw e[0];
       }
-    );
+    };
     expose({
-      validate,
       reset,
-      getPosition
+      validate,
+      // 单个操作
+      getField,
+      validateField
     });
-    return {
-      isNest,
-      isStyleless,
-      isNestLast,
-      validateMessage,
-      classes,
-      labelStyle,
-      contentStyle,
-      showError,
-      labelPosition
-    };
   };
+  const COMPONENT_NAME$11 = "vc-form";
+  const Form = vue.defineComponent({
+    name: COMPONENT_NAME$11,
+    props: props$S,
+    setup(props2, { slots, expose }) {
+      useForm(expose);
+      return () => {
+        return vue.h(
+          props2.tag,
+          {
+            class: "vc-form",
+            autocomplete: props2.autocomplete
+          },
+          slots
+        );
+      };
+    }
+  });
   const props$R = {
-    /**
-     * 进入/离开持续时间
-     * {enter: 300, leave: 300}
-     */
-    duration: {
-      type: [Number, Object],
-      default: 300
+    label: {
+      type: String,
+      default: ""
     },
-    /**
-     * 进入/离开延迟时间
-     */
-    delay: {
-      type: [Number, Object],
-      default: 0
+    labelWidth: {
+      type: Number
     },
-    /**
-     * `transition-group` component.
-     */
-    group: Boolean,
-    /**
-     * `transition-group` tag, v3版本默认值无
-     */
-    tag: {
-      type: String,
-      default: void 0
+    prop: {
+      type: String
     },
-    /**
-     *  变换的初始位置, 可以用style代替, 更短~~
-     */
-    origin: {
-      type: String,
-      default: ""
+    required: {
+      type: [Boolean, String],
+      default: false
     },
-    /**
-     * 在转换期间应用的元素样式。这些样式应用于@beforeEnter和@beforeLeave钩子
-     * inheritAttrs必须是false
-     */
-    style: {
-      type: Object,
-      default: () => {
-        return {
-          animationFillMode: "both",
-          animationTimingFunction: "ease-out"
-        };
-      }
+    error: {
+      type: String
     },
-    prefix: {
-      type: String,
-      default: "vc-transition"
+    rules: {
+      type: [Array, Object]
     },
-    mode: {
+    resetByRulesChanged: {
+      type: Boolean,
+      default: false
+    },
+    showMessage: {
+      type: Boolean,
+      default: true
+    },
+    labelFor: {
+      type: String
+    },
+    styleless: {
+      type: Boolean,
+      default: false
+    },
+    labelPosition: {
       type: String,
-      default: "none"
+      default: "right"
+    },
+    contentStyle: String
+  };
+  const filterEmpty = (val) => {
+    if (val instanceof Array) {
+      val = val.filter((i) => i !== "");
     }
+    return val;
   };
-  const trim = (str) => str.trim().replace(/\s+/g, " ");
-  const useTransition = () => {
+  const toRules = (rules) => {
+    return rules instanceof Array ? rules : rules ? [rules] : [];
+  };
+  const useFormItem = (expose) => {
+    const form = vue.inject("form");
     const instance = vue.getCurrentInstance();
-    const attrs = instance.attrs;
     const props2 = instance.props;
-    const Wrapper = vue.computed(() => {
-      return props2.group ? vue.TransitionGroup : vue.Transition;
+    const { slots } = instance;
+    if (!form?.props) {
+      throw new VcError("form-item", "form-item需要在form内使用");
+    }
+    const formItem = vue.inject("form-item", {});
+    const validateState = vue.ref("");
+    const validateMessage = vue.ref("");
+    let validateDisabled = false;
+    let initialValue;
+    const currentRules = vue.computed(() => {
+      const formRules = form.props.rules;
+      const formItemBindRules = toRules(props2.rules);
+      let formItemRules = formItemBindRules;
+      if (!formItemRules.length && formRules && props2.prop) {
+        try {
+          const key = props2.prop.replace(/\.[0-9]+\./g, ".");
+          const { v } = getPropByPath(formRules, key);
+          formItemRules = toRules(v);
+        } catch {
+          const rules = formRules[props2.prop];
+          formItemRules = toRules(rules);
+        }
+      }
+      return formItemRules;
+    });
+    const isRequired = vue.computed(() => {
+      if (!currentRules.value.length) {
+        return !!props2.required;
+      }
+      let required = false;
+      for (let i = 0; i < currentRules.value.length; i++) {
+        const rule = currentRules.value[i];
+        required = !!rule.required;
+        if (required) break;
+      }
+      return required;
+    });
+    const labelPosition = vue.computed(() => {
+      return props2.labelPosition || form.props.labelPosition;
     });
     const classes = vue.computed(() => {
-      const modeClass = props2.mode !== "none" ? `is-${props2.mode.replace(/-/g, " is-")}` : "";
       return {
-        enterActiveClass: trim(`${attrs.enterActiveClass || ""} ${props2.prefix} ${modeClass} is-in`),
-        leaveActiveClass: trim(`${attrs.leaveActiveClass || ""} ${props2.prefix} ${modeClass} is-out`),
-        moveClass: props2.group ? trim(`${attrs.moveClass || ""} ${props2.prefix} ${modeClass} is-move`) : void 0
+        "is-require": isRequired.value,
+        "is-error": validateState.value === "error",
+        "is-validating": validateState.value === "validating",
+        "is-inline": form.props.inline,
+        "is-nest": isNest.value,
+        [`is-${labelPosition.value}`]: true
       };
     });
-    const clearStyles = (el2) => {
-      Object.keys(props2.style).forEach((key) => {
-        const v = props2.style[key];
-        v && el2.style.removeProperty(
-          key.replace(/([A-Z])/g, "-$1").toLowerCase()
-        );
-      });
-      el2.style.removeProperty("animation-duration");
-      el2.style.removeProperty("animation-delay");
-    };
-    const resetAbsolute = (el2) => {
-      props2.group && (el2.style.position = "absolute");
-    };
-    const resetOrigin = (el2) => {
-      props2.origin && (el2.style.transformOrigin = props2.origin);
-    };
-    const resetStyles = (el2) => {
-      resetOrigin(el2);
-      Object.keys(props2.style).forEach((key) => {
-        const v = props2.style[key];
-        v && (el2.style[key] = v);
-      });
-    };
-    const handleBeforeEnter = (el2) => {
-      const duration = props2.duration.enter || props2.duration;
-      el2.style.animationDuration = `${duration}ms`;
-      const delay = props2.delay.enter || props2.delay;
-      el2.style.animationDelay = `${delay}ms`;
-      resetStyles(el2);
-      attrs.onBeforeEnter?.(el2);
-    };
-    const createNext = (callback, duration) => {
-      let hasDone = false;
-      return (immediate = true) => {
-        if (hasDone) return;
-        hasDone = true;
-        const done = () => callback?.();
-        immediate ? done() : setTimeout(done, duration);
+    const isNest = vue.computed(() => {
+      return !!formItem.change;
+    });
+    const isNestLast = vue.ref(false);
+    const hasLabel = vue.computed(() => {
+      return !!props2.label || slots.label;
+    });
+    const labelStyle = vue.computed(() => {
+      const labelWidth = props2.labelWidth === 0 || props2.labelWidth ? props2.labelWidth : isNest.value ? 0 : form.props.labelWidth;
+      return {
+        width: labelPosition.value !== "top" && labelWidth && labelWidth > 0 ? `${labelWidth}px` : "auto",
+        textAlign: labelPosition.value === "top" ? "left" : labelPosition.value
       };
-    };
-    const handleEnter = async (el2, done) => {
-      const duration = props2.duration.enter || props2.duration;
-      const next = createNext(done, duration);
-      try {
-        await attrs.onEnter?.(el2, next);
-      } finally {
-        next(false);
+    });
+    const contentStyle = vue.computed(() => {
+      const labelWidth = props2.labelWidth === 0 || props2.labelWidth ? props2.labelWidth : form.props.labelWidth;
+      return [
+        {
+          marginLeft: !hasLabel.value && isNest.value ? 0 : labelWidth && labelWidth > 0 ? `${labelWidth}px` : "unset",
+          marginBottom: isNest.value && !isNestLast.value ? `20px` : 0
+        },
+        props2.contentStyle
+      ];
+    });
+    const isStyleless = vue.computed(() => {
+      return props2.styleless || form.props.styleless;
+    });
+    const fieldValue = vue.computed(() => {
+      const model = form.props.model;
+      if (!model || !props2.prop) {
+        return;
       }
+      let path = props2.prop;
+      if (path.includes(":")) {
+        path = path.replace(/:/, ".");
+      }
+      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 handleAfterEnter = (el2) => {
-      clearStyles(el2);
-      attrs.onAfterEnter?.(el2);
-    };
-    const handleBeforeLeave = (el2) => {
-      const duration = props2.duration.leave || props2.duration;
-      el2.style.animationDuration = `${duration}ms`;
-      const delay = props2.delay.leave || props2.delay;
-      el2.style.animationDelay = `${delay}ms`;
-      resetStyles(el2);
-      attrs.onBeforeLeave?.(el2);
-    };
-    const handleLeave = async (el2, done) => {
-      const duration = props2.duration.leave || props2.duration;
-      const next = createNext(done, duration);
+    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 {
-        resetAbsolute(el2);
-        await attrs.onLeave?.(el2, next);
-      } finally {
-        next(props2.group ? true : false);
+        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 handleAfterLeave = (el2) => {
-      clearStyles(el2);
-      attrs.onAfterLeave?.(el2);
+    const handleFieldBlur = () => {
+      if (!props2.prop) {
+        formItem.blur?.();
+        return;
+      }
+      validate("blur");
     };
-    return {
-      Wrapper,
-      resetStyles,
-      resetAbsolute,
-      classes,
-      createNext,
-      listeners: {
-        onBeforeEnter: handleBeforeEnter,
-        onEnter: handleEnter,
-        onAfterEnter: handleAfterEnter,
-        onBeforeLeave: handleBeforeLeave,
-        onLeave: handleLeave,
-        onAfterLeave: handleAfterLeave
+    const handleFieldChange = () => {
+      if (!props2.prop) {
+        formItem.change?.();
+        return;
+      }
+      if (validateDisabled) {
+        validateDisabled = false;
+        return;
       }
+      validate("change");
     };
-  };
-  const COMPONENT_NAME$16 = "vc-transition";
-  const Transition = vue.defineComponent({
-    name: COMPONENT_NAME$16,
-    props: props$R,
-    // 当不声明emits的情况下，事件存在于attrs中
-    inheritAttrs: false,
-    setup(props2, { slots, attrs }) {
-      const { Wrapper, listeners, classes } = useTransition();
-      return () => {
-        return vue.h(
-          Wrapper.value,
-          {
-            ...attrs,
-            ...listeners,
-            ...classes.value,
-            tag: props2.tag
-          },
-          slots
-        );
-      };
-    }
-  });
-  const COMPONENT_NAME$15 = "vc-transition-collapse";
-  const TransitionCollapse = vue.defineComponent({
-    name: COMPONENT_NAME$15,
-    props: props$R,
-    // 当不声明emits的情况下，事件存在于attrs中
-    inheritAttrs: false,
-    setup(props2, { slots, attrs: _attrs }) {
-      const attrs = _attrs;
-      const { Wrapper, resetStyles, resetAbsolute, createNext } = useTransition();
-      const getTransitionStyle = (duration) => {
-        const style = `
-				${duration}ms height ease-in-out, 
-				${duration}ms padding-top ease-in-out, 
-				${duration}ms padding-bottom ease-in-out
-			`;
-        return style;
-      };
-      const handleBeforeEnter = (el2) => {
-        const duration = props2.duration.enter || props2.duration;
-        el2.style.transition = getTransitionStyle(duration);
-        /* istanbul ignore next -- @preserve */
-        if (!el2.dataset) {
-          el2.dataset = {};
-        }
-        el2.dataset.oldPaddingTop = el2.style.paddingTop;
-        el2.dataset.oldPaddingBottom = el2.style.paddingBottom;
-        el2.style.height = "0px";
-        el2.style.paddingTop = "0px";
-        el2.style.paddingBottom = "0px";
-        resetStyles(el2);
-        attrs.onBeforeEnter?.(el2);
-      };
-      const handleEnter = async (el2, done) => {
-        const duration = props2.duration.enter || props2.duration;
-        const next = createNext(done, duration);
-        try {
-          el2.dataset.oldOverflow = el2.style.overflow;
-          /* istanbul ignore next -- @preserve */
-          if (el2.scrollHeight !== 0) {
-            el2.style.height = el2.scrollHeight + "px";
-            el2.style.paddingTop = el2.dataset.oldPaddingTop + "px";
-            el2.style.paddingBottom = el2.dataset.oldPaddingBottom + "px";
-          } else {
-            el2.style.height = "";
-            el2.style.paddingTop = el2.dataset.oldPaddingTop + "px";
-            el2.style.paddingBottom = el2.dataset.oldPaddingBottom + "px";
-          }
-          el2.style.overflow = "hidden";
-          attrs.onEnter?.(el2);
-        } finally {
-          next(false);
-        }
-      };
-      const handleAfterEnter = (el2) => {
-        el2.style.transition = "";
-        el2.style.height = "";
-        el2.style.overflow = el2.dataset.oldOverflow || "";
-        attrs.onAfterEnter?.(el2);
-      };
-      const handleBeforeLeave = (el2) => {
-        /* istanbul ignore next -- @preserve */
-        if (!el2.dataset) {
-          el2.dataset = {};
-        }
-        el2.dataset.oldPaddingTop = el2.style.paddingTop;
-        el2.dataset.oldPaddingBottom = el2.style.paddingBottom;
-        el2.dataset.oldOverflow = el2.style.overflow;
-        el2.style.height = el2.scrollHeight + "px";
-        el2.style.overflow = "hidden";
-        resetStyles(el2);
-        attrs.onBeforeLeave?.(el2);
-      };
-      const handleLeave = (el2, done) => {
-        const duration = props2.duration.leave || props2.duration;
-        const next = createNext(done, duration);
-        try {
-          const leaveDuration = props2.duration.leave || props2.duration;
-          /* istanbul ignore next -- @preserve */
-          if (el2.scrollHeight !== 0) {
-            el2.style.transition = getTransitionStyle(leaveDuration);
-            el2.style.height = "0px";
-            el2.style.paddingTop = "0px";
-            el2.style.paddingBottom = "0px";
-          }
-          resetAbsolute(el2);
-          attrs.onLeave?.(el2);
-        } finally {
-          next(props2.group ? true : false);
+    const getPosition = async () => {
+      let el2 = instance.vnode.el;
+      try {
+        while (el2 && !el2.getBoundingClientRect) {
+          el2 = el2.nextSibling;
         }
-      };
-      const handleAfterLeave = (el2) => {
-        el2.style.transition = "";
-        el2.style.height = "";
-        el2.style.overflow = el2.dataset.oldOverflow || "";
-        el2.style.paddingTop = el2.dataset.oldPaddingTop || "";
-        el2.style.paddingBottom = el2.dataset.oldPaddingBottom || "";
-        attrs.onAfterLeave?.(el2);
-      };
-      const listeners = {
-        onBeforeEnter: handleBeforeEnter,
-        onEnter: handleEnter,
-        onAfterEnter: handleAfterEnter,
-        onBeforeLeave: handleBeforeLeave,
-        onLeave: handleLeave,
-        onAfterLeave: handleAfterLeave
-      };
-      return () => {
-        return vue.h(
-          Wrapper.value,
-          {
-            ...attrs,
-            ...listeners,
-            tag: props2.tag,
-            moveClass: props2.group ? `${attrs.moveClass || ""} vc-transition-collapse is-move` : void 0
-          },
-          slots
-        );
-      };
-    }
-  });
-  const COMPONENT_NAME$14 = "vc-transition-fade";
-  const TransitionFade = vue.defineComponent({
-    name: COMPONENT_NAME$14,
-    props: {
-      ...props$R,
-      // inheritAttrs必须是false
-      style: {
-        type: Object,
-        default: () => ({
-          animationFillMode: "both",
-          animationTimingFunction: void 0
-        })
-      },
-      prefix: {
-        type: String,
-        default: "vc-transition-fade"
+        ;
+        const rect = el2.getBoundingClientRect();
+        return {
+          top: rect.top,
+          left: rect.left
+        };
+      } catch (e) {
+        throw new VcError("form-item", "form-item位置计算错误");
       }
-    },
-    // 当不声明emits的情况下，事件存在于attrs中
-    inheritAttrs: false,
-    setup(props2, { slots, attrs }) {
-      const { Wrapper, listeners, classes } = useTransition();
-      return () => {
-        return vue.h(
-          Wrapper.value,
-          {
-            ...attrs,
-            ...listeners,
-            ...classes.value,
-            tag: props2.tag
-          },
-          slots
-        );
-      };
-    }
-  });
-  const COMPONENT_NAME$13 = "vc-transition-scale";
-  const TransitionScale = vue.defineComponent({
-    name: COMPONENT_NAME$13,
-    props: {
-      ...props$R,
-      mode: {
-        type: String,
-        default: "both",
-        validator: (v) => /(part|both|y|x|none)/.test(v)
-      },
-      // inheritAttrs必须是false
-      style: {
-        type: Object,
-        default: () => ({
-          animationFillMode: "both",
-          animationTimingFunction: void 0
-        })
+    };
+    const fields = vue.reactive([]);
+    vue.provide("form-item", {
+      fields,
+      blur: handleFieldBlur,
+      change: handleFieldChange,
+      message: validateMessage,
+      add: (field) => {
+        field && fields.push(field);
       },
-      prefix: {
-        type: String,
-        default: "vc-transition-scale"
+      remove: (field) => {
+        field && fields.splice(fields.indexOf(field), 1);
       }
-    },
-    // 当不声明emits的情况下，事件存在于attrs中
-    inheritAttrs: false,
-    setup(props2, { slots, attrs }) {
-      const { Wrapper, listeners, classes } = useTransition();
-      return () => {
-        return vue.h(
-          Wrapper.value,
-          {
-            ...attrs,
-            ...listeners,
-            ...classes.value,
-            tag: props2.tag
-          },
-          slots
-        );
-      };
-    }
-  });
-  const COMPONENT_NAME$12 = "vc-transition-slide";
-  const TransitionSlide = vue.defineComponent({
-    name: COMPONENT_NAME$12,
-    props: {
-      ...props$R,
-      mode: {
-        type: String,
-        default: "left",
-        validator: (v) => /^(left|right|down|up|none)(|-part)$/.test(v)
-      },
-      // inheritAttrs必须是false
-      style: {
-        type: Object,
-        default: () => ({
-          animationFillMode: "both",
-          animationTimingFunction: void 0
-        })
-      },
-      prefix: {
-        type: String,
-        default: "vc-transition-slide"
+    });
+    vue.onMounted(() => {
+      if (props2.prop) {
+        form.add?.(instance);
+        initialValue = cloneDeep(fieldValue.value);
       }
-    },
-    // 当不声明emits的情况下，事件存在于attrs中
-    inheritAttrs: false,
-    setup(props2, { slots, attrs }) {
-      const { Wrapper, listeners, classes } = useTransition();
-      return () => {
-        return vue.h(
-          Wrapper.value,
-          {
-            ...attrs,
-            ...listeners,
-            ...classes.value,
-            tag: props2.tag
-          },
-          slots
-        );
-      };
-    }
-  });
-  const COMPONENT_NAME$11 = "vc-transition-zoom";
-  const TransitionZoom = vue.defineComponent({
-    name: COMPONENT_NAME$11,
-    props: {
-      ...props$R,
-      mode: {
-        type: String,
-        default: "x",
-        validator: (v) => /^(x|y|center|none)$/.test(v)
-      },
-      // inheritAttrs必须是false
-      style: {
-        type: Object,
-        default: () => ({
-          animationFillMode: "both",
-          animationTimingFunction: void 0
-        })
-      },
-      prefix: {
-        type: String,
-        default: "vc-transition-zoom"
+      formItem.add?.(instance);
+    });
+    vue.onBeforeUnmount(() => {
+      form.remove?.(instance);
+      formItem.remove?.(instance);
+    });
+    vue.watch(
+      () => props2.rules,
+      () => {
+        props2.resetByRulesChanged && reset();
       }
-    },
-    // 当不声明emits的情况下，事件存在于attrs中
-    inheritAttrs: false,
-    setup(props2, { slots, attrs }) {
-      const { Wrapper, listeners, classes } = useTransition();
-      return () => {
-        return vue.h(
-          Wrapper.value,
-          {
-            ...attrs,
-            ...listeners,
-            ...classes.value,
-            tag: props2.tag
-          },
-          slots
-        );
-      };
-    }
-  });
+    );
+    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$10 = "vc-form-item";
   const FormItem = /* @__PURE__ */ vue.defineComponent({
     name: COMPONENT_NAME$10,
-    props: props$S,
+    props: props$R,
     setup(props2, {
       slots,
       expose
@@ -6738,7 +6864,7 @@
     }
   });
   const props$Q = {
-    ...props$T,
+    ...props$S,
     showToast: {
       type: Boolean,
       default: false
@@ -7216,7 +7342,7 @@
     }
   });
   const props$N = {
-    ...props$S,
+    ...props$R,
     indent: {
       type: Number,
       default: 12
@@ -9747,7 +9873,8 @@
     emits: ["portal-fulfilled", "close"],
     setup(props2, {
       emit,
-      slots
+      slots,
+      expose
     }) {
       const {
         getPopupStyle,
@@ -9920,6 +10047,9 @@
         Resize.off(vnode.el, handleWrapperResize);
         props2.alone && props2.hover && removeEvents();
       });
+      expose({
+        isActive
+      });
       return () => {
         let _slot;
         return vue.createVNode(TransitionScale, {
@@ -12457,8 +12587,7 @@
       install: (app) => {
         app.config.globalProperties.$vc = VcInstance.configure(options);
         Object.keys(Components).forEach((key) => {
-          key = transfromComponentKey(key) || key;
-          app.component(key, Components[key]);
+          app.component(transfromComponentKey(key) || key, Components[key]);
         });
       }
     };