@deot/vc-components 1.0.1 → 1.0.2

package/dist/index.js

@@ -1,4 +1,4 @@
-import { reactive, defineComponent, createVNode, ref, watch, h, getCurrentInstance, inject, computed, onMounted, provide, onBeforeUnmount, toRaw, TransitionGroup, Transition as Transition$1, withDirectives, vShow, onUnmounted, withModifiers, createApp, Fragment as Fragment$1, Teleport, nextTick, mergeProps, shallowRef, onUpdated, isVNode, createTextVNode } from 'vue';
+import { reactive, defineComponent, createVNode, ref, watch, getCurrentInstance, computed, TransitionGroup, Transition as Transition$1, h, inject, onMounted, provide, onBeforeUnmount, toRaw, withDirectives, vShow, onUnmounted, withModifiers, createApp, Fragment as Fragment$1, Teleport, nextTick, mergeProps, shallowRef, onUpdated, isVNode, createTextVNode } from 'vue';
 import { debounce, cloneDeep, pick, throttle, kebabCase } from 'lodash-es';
 import * as Utils from '@deot/helper-utils';
 import { getPropByPath, getUid, raf, throttle as throttle$1 } from '@deot/helper-utils';
@@ -83,58 +83,33 @@ const ActionSheet = /* @__PURE__ */ defineComponent({
 const MActionSheet = ActionSheet;
 
 const props$1f = {
-  tag: {
+  modelValue: {
+    type: Boolean,
+    default: true
+  },
+  type: {
     type: String,
-    default: "div"
-  }
-};
-
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$1v = 'vc-alert';
-const Alert = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1v,
-  props: props$1f,
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      return 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
   }
 };
 
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$1u = 'vc-artboard';
-const Artboard = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1u,
-  props: props$1e,
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      return createVNode("div", {
-        "class": "vc-artboard"
-      }, [slots?.default?.()]);
-    };
-  }
-});
-
-const MArtboard = Artboard;
-
-const props$1d = {
+const props$1e = {
   type: String,
   inherit: {
     type: Boolean,
@@ -279,10 +254,10 @@ const IconManager = new Manager();
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1t = 'vc-icon';
+const COMPONENT_NAME$1v = 'vc-icon';
 const Icon = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1t,
-  props: props$1d,
+  name: COMPONENT_NAME$1v,
+  props: props$1e,
   setup(props) {
     const viewBox = ref('0 0 1024 1024');
     const path = ref([]);
@@ -315,501 +290,581 @@ const Icon = /* @__PURE__ */ defineComponent({
   }
 });
 
-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
-  }
-};
-
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$1s = 'vc-spin';
-const Spin = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1s,
-  props: props$1c,
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      return createVNode("div", {
-        "class": "vc-spin"
-      }, [createVNode("span", {
-        "style": {
-          fontSize: `${props.size}px`
-        }
-      }, [slots?.loading?.() || createVNode("svg", {
-        "xmlns": "http://www.w3.org/2000/svg",
-        "version": "1.1",
-        "viewBox": "0 0 32 32",
-        "width": "100%",
-        "height": "100%"
-      }, [createVNode("path", {
-        "stroke": props.foreground,
-        "d": "M 16 2 A 14 14 0 1 0 30 15",
-        "fill": "none",
-        "stroke-width": "2",
-        "stroke-linecap": "round"
-      }, null), createVNode("path", {
-        "stroke": props.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 = 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(props, { slots, attrs }) {
-    const listener = ref({});
-    watch(
-      [() => props.wait, () => props.exclude, () => props.include],
-      () => {
-        const { wait, exclude, include } = props;
-        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(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 h(props.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"
   }
 };
 
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$1q = 'vc-button';
-const Button = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1q,
-  emits: ['click'],
-  props: props$1a,
-  setup(props, {
-    slots
-  }) {
-    const vm = getCurrentInstance();
-    const hasSlot = ref(true);
-    const isLoading = ref(false);
-    const group = inject('button-group', {
-      size: 'medium',
-      vertical: false,
-      circle: false
-    });
-    const classes = computed(() => ({
-      'is-circle': props.circle || group.circle,
-      'is-alone': !hasSlot.value,
-      'is-round': props.round,
-      'is-long': props.long,
-      'is-disabled': props.disabled,
-      [`is-${props.size}`]: true,
-      [`is-${props.type}`]: true
-    }));
-    const handleClick = (...args) => {
-      const fn = vm.vnode.props?.['onClick']?.(...args);
-      if (fn && fn.then) {
-        isLoading.value = true;
-        fn.finally(() => {
-          isLoading.value = false;
-        });
-      }
+const trim = (str) => str.trim().replace(/\s+/g, " ");
+const useTransition = () => {
+  const instance = getCurrentInstance();
+  const attrs = instance.attrs;
+  const props = instance.props;
+  const Wrapper = computed(() => {
+    return props.group ? TransitionGroup : Transition$1;
+  });
+  const classes = computed(() => {
+    const modeClass = props.mode !== "none" ? `is-${props.mode.replace(/-/g, " is-")}` : "";
+    return {
+      enterActiveClass: trim(`${attrs.enterActiveClass || ""} ${props.prefix} ${modeClass} is-in`),
+      leaveActiveClass: trim(`${attrs.leaveActiveClass || ""} ${props.prefix} ${modeClass} is-out`),
+      moveClass: props.group ? trim(`${attrs.moveClass || ""} ${props.prefix} ${modeClass} is-move`) : void 0
     };
-    onMounted(() => {
-      hasSlot.value = slots.default !== undefined;
+  });
+  const clearStyles = (el) => {
+    Object.keys(props.style).forEach((key) => {
+      const v = props.style[key];
+      v && el.style.removeProperty(
+        key.replace(/([A-Z])/g, "-$1").toLowerCase()
+      );
     });
-    return () => {
-      return createVNode(Debounce, {
-        "tag": props.tag,
-        "class": {
-          'vc-button': true,
-          ...classes.value
-        },
-        "wait": props.wait,
-        "disabled": props.disabled,
-        "type": props.htmlType,
-        "onClick": handleClick
-      }, {
-        default: () => [props.icon && createVNode(Icon, {
-          "type": props.icon
-        }, null), isLoading.value && createVNode(Spin, {
-          "size": 12,
-          "foreground": props.type === 'default' ? '#ccc' : '#fff',
-          "class": "vc-button__loading"
-        }, null), hasSlot.value && createVNode("span", null, [slots?.default?.()])]
-      });
+    el.style.removeProperty("animation-duration");
+    el.style.removeProperty("animation-delay");
+  };
+  const resetAbsolute = (el) => {
+    props.group && (el.style.position = "absolute");
+  };
+  const resetOrigin = (el) => {
+    props.origin && (el.style.transformOrigin = props.origin);
+  };
+  const resetStyles = (el) => {
+    resetOrigin(el);
+    Object.keys(props.style).forEach((key) => {
+      const v = props.style[key];
+      v && (el.style[key] = v);
+    });
+  };
+  const handleBeforeEnter = (el) => {
+    const duration = props.duration.enter || props.duration;
+    el.style.animationDuration = `${duration}ms`;
+    const delay = props.delay.enter || props.delay;
+    el.style.animationDelay = `${delay}ms`;
+    resetStyles(el);
+    attrs.onBeforeEnter?.(el);
+  };
+  const createNext = (callback, duration) => {
+    let hasDone = false;
+    return (immediate = true) => {
+      if (hasDone) return;
+      hasDone = true;
+      const done = () => callback?.();
+      immediate ? done() : setTimeout(done, duration);
     };
-  }
-});
-
-const props$19 = {
-  vertical: {
-    type: Boolean,
-    default: false
-  },
-  circle: {
-    type: Boolean,
-    default: false
-  },
-  size: {
-    type: String,
-    default: "medium"
-  },
-  fragment: {
-    type: Boolean,
-    default: false
-  }
+  };
+  const handleEnter = async (el, done) => {
+    const duration = props.duration.enter || props.duration;
+    const next = createNext(done, duration);
+    try {
+      await attrs.onEnter?.(el, next);
+    } finally {
+      next(false);
+    }
+  };
+  const handleAfterEnter = (el) => {
+    clearStyles(el);
+    attrs.onAfterEnter?.(el);
+  };
+  const handleBeforeLeave = (el) => {
+    const duration = props.duration.leave || props.duration;
+    el.style.animationDuration = `${duration}ms`;
+    const delay = props.delay.leave || props.delay;
+    el.style.animationDelay = `${delay}ms`;
+    resetStyles(el);
+    attrs.onBeforeLeave?.(el);
+  };
+  const handleLeave = async (el, done) => {
+    const duration = props.duration.leave || props.duration;
+    const next = createNext(done, duration);
+    try {
+      resetAbsolute(el);
+      await attrs.onLeave?.(el, next);
+    } finally {
+      next(props.group ? true : false);
+    }
+  };
+  const handleAfterLeave = (el) => {
+    clearStyles(el);
+    attrs.onAfterLeave?.(el);
+  };
+  return {
+    Wrapper,
+    resetStyles,
+    resetAbsolute,
+    classes,
+    createNext,
+    listeners: {
+      onBeforeEnter: handleBeforeEnter,
+      onEnter: handleEnter,
+      onAfterEnter: handleAfterEnter,
+      onBeforeLeave: handleBeforeLeave,
+      onLeave: handleLeave,
+      onAfterLeave: handleAfterLeave
+    }
+  };
 };
 
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$1p = 'vc-button-group';
-const ButtonGroup = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1p,
-  props: props$19,
-  setup(props, {
-    slots
-  }) {
-    provide('button-group', props);
-    const classes = computed(() => ({
-      'is-vertical': props.vertical,
-      'is-circle': props.circle,
-      [`is-${props.size}`]: !!props.size
-    }));
+const COMPONENT_NAME$1u = "vc-transition";
+const Transition = defineComponent({
+  name: COMPONENT_NAME$1u,
+  props: props$1d,
+  // 当不声明emits的情况下，事件存在于attrs中
+  inheritAttrs: false,
+  setup(props, { slots, attrs }) {
+    const { Wrapper, listeners, classes } = useTransition();
     return () => {
-      return props.fragment ? slots?.default?.() : createVNode("div", {
-        "class": {
-          'vc-button-group': true,
-          ...classes.value
-        }
-      }, [slots?.default?.()]);
+      return h(
+        Wrapper.value,
+        {
+          ...attrs,
+          ...listeners,
+          ...classes.value,
+          tag: props.tag
+        },
+        slots
+      );
     };
   }
 });
 
-const MButton = Button;
-const MButtonGroup = ButtonGroup;
-
-const props$18 = {
-  tag: {
-    type: String,
-    default: "div"
-  }
-};
-
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$1o = 'vc-calendar';
-const Calendar = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1o,
-  props: props$18,
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      return createVNode("div", {
-        "class": "vc-calendar"
-      }, [slots?.default?.()]);
+const COMPONENT_NAME$1t = "vc-transition-collapse";
+const TransitionCollapse = defineComponent({
+  name: COMPONENT_NAME$1t,
+  props: props$1d,
+  // 当不声明emits的情况下，事件存在于attrs中
+  inheritAttrs: false,
+  setup(props, { 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 MCalendar = Calendar;
-
-const props$17 = {
-  tag: {
-    type: String,
-    default: "div"
-  }
-};
-
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$1n = 'vc-card';
-const Card = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1n,
-  props: props$17,
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      return createVNode("div", {
-        "class": "vc-card"
-      }, [slots?.default?.()]);
+    const handleBeforeEnter = (el) => {
+      const duration = props.duration.enter || props.duration;
+      el.style.transition = getTransitionStyle(duration);
+      /* istanbul ignore next -- @preserve */
+      if (!el.dataset) {
+        el.dataset = {};
+      }
+      el.dataset.oldPaddingTop = el.style.paddingTop;
+      el.dataset.oldPaddingBottom = el.style.paddingBottom;
+      el.style.height = "0px";
+      el.style.paddingTop = "0px";
+      el.style.paddingBottom = "0px";
+      resetStyles(el);
+      attrs.onBeforeEnter?.(el);
     };
-  }
-});
-
-const MCard = Card;
-
-const props$16 = {
-  tag: {
-    type: String,
-    default: "div"
-  }
-};
-
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$1m = 'vc-carousel';
-const Carousel = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1m,
-  props: props$16,
-  setup(props, {
-    slots
-  }) {
-    return () => {
-      return createVNode("div", {
-        "class": "vc-carousel"
-      }, [slots?.default?.()]);
+    const handleEnter = async (el, done) => {
+      const duration = props.duration.enter || props.duration;
+      const next = createNext(done, duration);
+      try {
+        el.dataset.oldOverflow = el.style.overflow;
+        /* istanbul ignore next -- @preserve */
+        if (el.scrollHeight !== 0) {
+          el.style.height = el.scrollHeight + "px";
+          el.style.paddingTop = el.dataset.oldPaddingTop + "px";
+          el.style.paddingBottom = el.dataset.oldPaddingBottom + "px";
+        } else {
+          el.style.height = "";
+          el.style.paddingTop = el.dataset.oldPaddingTop + "px";
+          el.style.paddingBottom = el.dataset.oldPaddingBottom + "px";
+        }
+        el.style.overflow = "hidden";
+        attrs.onEnter?.(el);
+      } finally {
+        next(false);
+      }
+    };
+    const handleAfterEnter = (el) => {
+      el.style.transition = "";
+      el.style.height = "";
+      el.style.overflow = el.dataset.oldOverflow || "";
+      attrs.onAfterEnter?.(el);
+    };
+    const handleBeforeLeave = (el) => {
+      /* istanbul ignore next -- @preserve */
+      if (!el.dataset) {
+        el.dataset = {};
+      }
+      el.dataset.oldPaddingTop = el.style.paddingTop;
+      el.dataset.oldPaddingBottom = el.style.paddingBottom;
+      el.dataset.oldOverflow = el.style.overflow;
+      el.style.height = el.scrollHeight + "px";
+      el.style.overflow = "hidden";
+      resetStyles(el);
+      attrs.onBeforeLeave?.(el);
+    };
+    const handleLeave = (el, done) => {
+      const duration = props.duration.leave || props.duration;
+      const next = createNext(done, duration);
+      try {
+        const leaveDuration = props.duration.leave || props.duration;
+        /* istanbul ignore next -- @preserve */
+        if (el.scrollHeight !== 0) {
+          el.style.transition = getTransitionStyle(leaveDuration);
+          el.style.height = "0px";
+          el.style.paddingTop = "0px";
+          el.style.paddingBottom = "0px";
+        }
+        resetAbsolute(el);
+        attrs.onLeave?.(el);
+      } finally {
+        next(props.group ? true : false);
+      }
+    };
+    const handleAfterLeave = (el) => {
+      el.style.transition = "";
+      el.style.height = "";
+      el.style.overflow = el.dataset.oldOverflow || "";
+      el.style.paddingTop = el.dataset.oldPaddingTop || "";
+      el.style.paddingBottom = el.dataset.oldPaddingBottom || "";
+      attrs.onAfterLeave?.(el);
+    };
+    const listeners = {
+      onBeforeEnter: handleBeforeEnter,
+      onEnter: handleEnter,
+      onAfterEnter: handleAfterEnter,
+      onBeforeLeave: handleBeforeLeave,
+      onLeave: handleLeave,
+      onAfterLeave: handleAfterLeave
     };
-  }
-});
-
-const MCarousel = Carousel;
-
-const props$15 = {
-  tag: {
-    type: String,
-    default: "div"
-  }
-};
-
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$1l = 'vc-cascader';
-const Cascader = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1l,
-  props: props$15,
-  setup(props, {
-    slots
-  }) {
     return () => {
-      return createVNode("div", {
-        "class": "vc-cascader"
-      }, [slots?.default?.()]);
+      return h(
+        Wrapper.value,
+        {
+          ...attrs,
+          ...listeners,
+          tag: props.tag,
+          moveClass: props.group ? `${attrs.moveClass || ""} vc-transition-collapse is-move` : void 0
+        },
+        slots
+      );
     };
   }
 });
 
-const MCascader = Cascader;
-
-const props$14 = {
-  tag: {
-    type: String,
-    default: "div"
-  }
-};
-
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$1k = 'vc-chart';
-const Chart = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1k,
-  props: props$14,
-  setup(props, {
-    slots
-  }) {
+const COMPONENT_NAME$1s = "vc-transition-fade";
+const TransitionFade = 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(props, { slots, attrs }) {
+    const { Wrapper, listeners, classes } = useTransition();
     return () => {
-      return createVNode("div", {
-        "class": "vc-chart"
-      }, [slots?.default?.()]);
+      return h(
+        Wrapper.value,
+        {
+          ...attrs,
+          ...listeners,
+          ...classes.value,
+          tag: props.tag
+        },
+        slots
+      );
     };
   }
 });
 
-const MChart = Chart;
-
-const props$13 = {
-  tag: {
-    type: String,
-    default: "div"
-  }
-};
-
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$1j = 'vc-checkbox';
-const Checkbox = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1j,
-  props: props$13,
-  setup(props, {
-    slots
-  }) {
+const COMPONENT_NAME$1r = "vc-transition-scale";
+const TransitionScale = 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(props, { slots, attrs }) {
+    const { Wrapper, listeners, classes } = useTransition();
     return () => {
-      return createVNode("div", {
-        "class": "vc-checkbox"
-      }, [slots?.default?.()]);
+      return h(
+        Wrapper.value,
+        {
+          ...attrs,
+          ...listeners,
+          ...classes.value,
+          tag: props.tag
+        },
+        slots
+      );
     };
   }
 });
 
-const MCheckbox = Checkbox;
-
-const props$12 = {
-  tag: {
-    type: String,
-    default: "div"
-  }
-};
-
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$1i = 'vc-clipboard';
-const Clipboard = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1i,
-  props: props$12,
-  setup(props, {
-    slots
-  }) {
+const COMPONENT_NAME$1q = "vc-transition-slide";
+const TransitionSlide = 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(props, { slots, attrs }) {
+    const { Wrapper, listeners, classes } = useTransition();
     return () => {
-      return createVNode("div", {
-        "class": "vc-clipboard"
-      }, [slots?.default?.()]);
+      return h(
+        Wrapper.value,
+        {
+          ...attrs,
+          ...listeners,
+          ...classes.value,
+          tag: props.tag
+        },
+        slots
+      );
     };
   }
 });
 
-const MClipboard = Clipboard;
-
-const props$11 = {
-  tag: {
-    type: String,
-    default: "div"
-  }
-};
-
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$1h = 'vc-collapse';
-const Collapse = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1h,
-  props: props$11,
-  setup(props, {
-    slots
-  }) {
+const COMPONENT_NAME$1p = "vc-transition-zoom";
+const TransitionZoom = 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(props, { slots, attrs }) {
+    const { Wrapper, listeners, classes } = useTransition();
     return () => {
-      return createVNode("div", {
-        "class": "vc-collapse"
-      }, [slots?.default?.()]);
+      return h(
+        Wrapper.value,
+        {
+          ...attrs,
+          ...listeners,
+          ...classes.value,
+          tag: props.tag
+        },
+        slots
+      );
     };
   }
 });
 
-const MCollapse = Collapse;
-
-const props$10 = {
-  tag: {
-    type: String,
-    default: "div"
-  }
-};
-
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1g = 'vc-color-picker';
-const ColorPicker = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1g,
-  props: props$10,
+const COMPONENT_NAME$1o = 'vc-alert';
+
+// [color, borderColor, backgroundColor], -> CSS
+const THEME_MAP = {
+  info: ['#5495f6', '#91d5ff', '#e6f7ff'],
+  success: ['#52c41a', '#b7eb8f', '#f6ffed'],
+  error: ['#ed4014', '#ffb08f', '#fbe9e9'],
+  warning: ['#ffbf00', '#ffe58f', '#fffbe6']
+};
+const Alert = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$1o,
+  props: props$1f,
   setup(props, {
-    slots
+    slots,
+    emit
   }) {
+    const isActive = ref(false);
+    const showIcon = computed(() => props.icon !== false);
+    const containerStyle = computed(() => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const [_, borderColor, backgroundColor] = THEME_MAP[props.type];
+      return {
+        borderColor,
+        backgroundColor
+      };
+    });
+    const iconStyle = computed(() => {
+      const [color] = THEME_MAP[props.type];
+      return {
+        color
+      };
+    });
+    const titleStyle = computed(() => {
+      const [color] = THEME_MAP[props.type];
+      return props.desc || slots.desc ? {
+        marginBottom: '5px',
+        fontSize: '14px',
+        color
+      } : {};
+    });
+    const descStyle = computed(() => {
+      const [color] = THEME_MAP[props.type];
+      return {
+        color,
+        opacity: '.7'
+      };
+    });
+    const iconType = computed(() => {
+      return typeof props.icon === 'string' && props.icon ? props.icon : props.type;
+    });
+    const handleClose = () => {
+      isActive.value = false;
+      emit('close');
+      emit('update:modelValue', false);
+      emit('visible-change', false);
+    };
+    watch(() => props.modelValue, v => {
+      isActive.value = v;
+    }, {
+      immediate: true
+    });
     return () => {
-      return createVNode("div", {
-        "class": "vc-color-picker"
-      }, [slots?.default?.()]);
+      return createVNode(TransitionFade, null, {
+        default: () => [isActive.value && createVNode("div", {
+          "class": [`is-${props.type}`, {
+            'has-icon': showIcon.value,
+            'has-desc': props.desc || slots.desc
+          }, 'vc-alert'],
+          "style": containerStyle.value
+        }, [showIcon.value && createVNode(Icon, {
+          "type": iconType.value,
+          "style": iconStyle.value,
+          "class": "vc-alert__icon"
+        }, null), createVNode("div", {
+          "class": "vc-alert__content"
+        }, [createVNode("div", {
+          "class": "vc-alert__message"
+        }, [props.title ? createVNode("div", {
+          "style": titleStyle.value,
+          "innerHTML": props.title
+        }, null) : createVNode("div", {
+          "style": titleStyle.value
+        }, [slots?.default?.()]), props.desc ? createVNode("div", {
+          "style": descStyle.value,
+          "innerHTML": props.desc
+        }, null) : slots.desc && createVNode("div", {
+          "style": descStyle.value
+        }, [slots.desc?.()])]), props.closable && createVNode("div", {
+          "class": "vc-alert__close",
+          "onClick": handleClose
+        }, [slots.close ? slots.close() : createVNode(Icon, {
+          "type": "close"
+        }, null)])])])]
+      });
     };
   }
 });
 
-const MColorPicker = ColorPicker;
+const MAlert = Alert;
 
-const props$$ = {
+const props$1c = {
   tag: {
     type: String,
     default: "div"
@@ -818,96 +873,284 @@ const props$$ = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1f = 'vc-countdown';
-const Countdown = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1f,
-  props: props$$,
+const COMPONENT_NAME$1n = 'vc-artboard';
+const Artboard = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$1n,
+  props: props$1c,
   setup(props, {
     slots
   }) {
     return () => {
       return createVNode("div", {
-        "class": "vc-countdown"
+        "class": "vc-artboard"
       }, [slots?.default?.()]);
     };
   }
 });
 
-const MCountdown = Countdown;
-
-const props$_ = {
-  render: {
-    type: Function,
-    default: () => null
-  }
-};
-
-const COMPONENT_NAME$1e = "vc-customer";
-const Customer = defineComponent({
-  name: COMPONENT_NAME$1e,
-  props: props$_,
-  setup(props, context) {
-    return () => h(() => {
-      return props.render(context.attrs, context);
-    });
-  }
-});
-
-const MCustomer = Customer;
+const MArtboard = Artboard;
 
-const props$Z = {
-  tag: {
+const props$1b = {
+  size: {
+    type: Number,
+    default: 28
+  },
+  foreground: {
     type: String,
-    default: "div"
+    default: "#ccc"
+  },
+  background: {
+    type: String,
+    default: "var(--vc-color-primary)"
+  },
+  /**
+   * 待开发
+   */
+  fixed: {
+    type: Boolean,
+    default: false
   }
 };
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1d = 'vc-date-picker';
-const DatePicker = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1d,
-  props: props$Z,
+const COMPONENT_NAME$1m = 'vc-spin';
+const Spin = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$1m,
+  props: props$1b,
   setup(props, {
     slots
   }) {
     return () => {
       return createVNode("div", {
-        "class": "vc-date-picker"
-      }, [slots?.default?.()]);
+        "class": "vc-spin"
+      }, [createVNode("span", {
+        "style": {
+          fontSize: `${props.size}px`
+        }
+      }, [slots?.loading?.() || createVNode("svg", {
+        "xmlns": "http://www.w3.org/2000/svg",
+        "version": "1.1",
+        "viewBox": "0 0 32 32",
+        "width": "100%",
+        "height": "100%"
+      }, [createVNode("path", {
+        "stroke": props.foreground,
+        "d": "M 16 2 A 14 14 0 1 0 30 15",
+        "fill": "none",
+        "stroke-width": "2",
+        "stroke-linecap": "round"
+      }, null), createVNode("path", {
+        "stroke": props.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 MDatePicker = DatePicker;
-
-const props$Y = {
+const props$1a = {
+  wait: {
+    type: Number,
+    default: 250
+  },
   tag: {
-    type: String,
+    type: [String, Object],
     default: "div"
-  }
+  },
+  include: {
+    type: RegExp,
+    default: () => /^on([A-Z])/
+  },
+  exclude: RegExp
 };
 
-/** @jsxImportSource vue */
+const COMPONENT_NAME$1l = "vc-debounce";
+const Debounce = 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(props, { slots, attrs }) {
+    const listener = ref({});
+    watch(
+      [() => props.wait, () => props.exclude, () => props.include],
+      () => {
+        const { wait, exclude, include } = props;
+        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(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 h(props.tag, {
+        ...attrs,
+        ...listener.value
+      }, slots.default?.());
+    };
+  }
+});
 
-const COMPONENT_NAME$1c = 'vc-divider';
-const Divider = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1c,
-  props: props$Y,
+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"
+  }
+};
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$1k = 'vc-button';
+const Button = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$1k,
+  emits: ['click'],
+  props: props$19,
   setup(props, {
     slots
   }) {
+    const vm = getCurrentInstance();
+    const hasSlot = ref(true);
+    const isLoading = ref(false);
+    const group = inject('button-group', {
+      size: 'medium',
+      vertical: false,
+      circle: false
+    });
+    const classes = computed(() => ({
+      'is-circle': props.circle || group.circle,
+      'is-alone': !hasSlot.value,
+      'is-round': props.round,
+      'is-long': props.long,
+      'is-disabled': props.disabled,
+      [`is-${props.size}`]: true,
+      [`is-${props.type}`]: true
+    }));
+    const handleClick = (...args) => {
+      const fn = vm.vnode.props?.['onClick']?.(...args);
+      if (fn && fn.then) {
+        isLoading.value = true;
+        fn.finally(() => {
+          isLoading.value = false;
+        });
+      }
+    };
+    onMounted(() => {
+      hasSlot.value = slots.default !== undefined;
+    });
     return () => {
-      return createVNode("div", {
-        "class": "vc-divider"
+      return createVNode(Debounce, {
+        "tag": props.tag,
+        "class": {
+          'vc-button': true,
+          ...classes.value
+        },
+        "wait": props.wait,
+        "disabled": props.disabled,
+        "type": props.htmlType,
+        "onClick": handleClick
+      }, {
+        default: () => [props.icon && createVNode(Icon, {
+          "type": props.icon
+        }, null), isLoading.value && createVNode(Spin, {
+          "size": 12,
+          "foreground": props.type === 'default' ? '#ccc' : '#fff',
+          "class": "vc-button__loading"
+        }, null), hasSlot.value && createVNode("span", null, [slots?.default?.()])]
+      });
+    };
+  }
+});
+
+const props$18 = {
+  vertical: {
+    type: Boolean,
+    default: false
+  },
+  circle: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: "medium"
+  },
+  fragment: {
+    type: Boolean,
+    default: false
+  }
+};
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$1j = 'vc-button-group';
+const ButtonGroup = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$1j,
+  props: props$18,
+  setup(props, {
+    slots
+  }) {
+    provide('button-group', props);
+    const classes = computed(() => ({
+      'is-vertical': props.vertical,
+      'is-circle': props.circle,
+      [`is-${props.size}`]: !!props.size
+    }));
+    return () => {
+      return props.fragment ? slots?.default?.() : createVNode("div", {
+        "class": {
+          'vc-button-group': true,
+          ...classes.value
+        }
       }, [slots?.default?.()]);
     };
   }
 });
 
-const MDivider = Divider;
+const MButton = Button;
+const MButtonGroup = ButtonGroup;
 
-const props$X = {
+const props$17 = {
   tag: {
     type: String,
     default: "div"
@@ -916,24 +1159,76 @@ const props$X = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1b = 'vc-drawer';
-const Drawer = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1b,
-  props: props$X,
+const COMPONENT_NAME$1i = 'vc-calendar';
+const Calendar = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$1i,
+  props: props$17,
   setup(props, {
     slots
   }) {
     return () => {
       return createVNode("div", {
-        "class": "vc-drawer"
+        "class": "vc-calendar"
       }, [slots?.default?.()]);
     };
   }
 });
 
-const MDrawer = Drawer;
+const MCalendar = Calendar;
 
-const props$W = {
+const props$16 = {
+  border: {
+    type: Boolean,
+    default: true
+  },
+  shadow: {
+    type: Boolean,
+    default: false
+  },
+  padding: {
+    type: Number,
+    default: 16
+  },
+  title: {
+    type: String
+  },
+  icon: {
+    type: String
+  }
+};
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$1h = 'vc-card';
+const Card = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$1h,
+  props: props$16,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return createVNode("div", {
+        "class": [{
+          'is-border': props.border,
+          'is-shadow': props.shadow
+        }, 'vc-card']
+      }, [(props.title || slots.title) && createVNode("div", {
+        "class": "vc-card__header"
+      }, [slots.title ? slots.title?.() : props.title && createVNode("p", null, [props.icon && createVNode(Icon, {
+        "type": props.icon
+      }, null), createVNode("span", null, [props.title])])]), slots.extra && createVNode("div", {
+        "class": "vc-card__extra"
+      }, [slots.extra?.()]), createVNode("div", {
+        "style": `padding: ${props.padding}px`,
+        "class": "vc-card__body"
+      }, [slots.default?.()])]);
+    };
+  }
+});
+
+const MCard = Card;
+
+const props$15 = {
   tag: {
     type: String,
     default: "div"
@@ -942,24 +1237,24 @@ const props$W = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1a = 'vc-dropdown';
-const Dropdown = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1a,
-  props: props$W,
+const COMPONENT_NAME$1g = 'vc-carousel';
+const Carousel = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$1g,
+  props: props$15,
   setup(props, {
     slots
   }) {
     return () => {
       return createVNode("div", {
-        "class": "vc-dropdown"
+        "class": "vc-carousel"
       }, [slots?.default?.()]);
     };
   }
 });
 
-const MDropdown = Dropdown;
+const MCarousel = Carousel;
 
-const props$V = {
+const props$14 = {
   tag: {
     type: String,
     default: "div"
@@ -968,24 +1263,24 @@ const props$V = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$19 = 'vc-editor';
-const Editor = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$19,
-  props: props$V,
+const COMPONENT_NAME$1f = 'vc-cascader';
+const Cascader = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$1f,
+  props: props$14,
   setup(props, {
     slots
   }) {
     return () => {
       return createVNode("div", {
-        "class": "vc-editor"
+        "class": "vc-cascader"
       }, [slots?.default?.()]);
     };
   }
 });
 
-const MEditor = Editor;
+const MCascader = Cascader;
 
-const props$U = {
+const props$13 = {
   tag: {
     type: String,
     default: "div"
@@ -994,767 +1289,468 @@ const props$U = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$18 = 'vc-expand';
-const Expand = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$18,
-  props: props$U,
+const COMPONENT_NAME$1e = 'vc-chart';
+const Chart = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$1e,
+  props: props$13,
   setup(props, {
     slots
   }) {
     return () => {
       return createVNode("div", {
-        "class": "vc-expand"
+        "class": "vc-chart"
       }, [slots?.default?.()]);
     };
   }
 });
 
-const MExpand = Expand;
+const MChart = Chart;
 
-const props$T = {
+const props$12 = {
   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
+    default: "div"
   }
 };
 
-const useForm = (expose, options = {}) => {
-  const instance = getCurrentInstance();
-  const props = instance.props;
-  const fields = [];
-  provide("form", {
-    props,
-    add: (field) => {
-      field && fields.push(field);
-    },
-    remove: (field) => {
-      field && fields.splice(fields.indexOf(field), 1);
-    }
-  });
-  const filterFields = (fields$) => {
-    return !fields$ ? fields : fields.filter((item) => fields$.includes(item.props.prop));
-  };
-  const getField = (prop) => {
-    const field = fields.find((item) => item.props.prop === prop);
-    if (!field) throw new VcError("form", "请选择有用的prop值");
-    return field;
-  };
-  const showToast = (msg) => {
-    props.showMessage && options.throwToast?.(msg);
-  };
-  const sortErrors = async (errors) => {
-    const positions = await Promise.all(fields.map((item) => item.exposed.getPosition()));
-    try {
-      return [...errors].toSorted((a, b) => {
-        const aIndex = fields.findIndex((i) => i.props.prop === a.prop);
-        const bIndex = fields.findIndex((i) => i.props.prop === b.prop);
-        const aPosition = positions[aIndex];
-        const bPosition = positions[bIndex];
-        if (aPosition.top != bPosition.top) return aPosition.top - bPosition.top;
-        return aPosition.left - bPosition.left;
-      });
-    } catch (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
-  });
-};
+/** @jsxImportSource vue */
 
-const COMPONENT_NAME$17 = "vc-form";
-const Form = defineComponent({
-  name: COMPONENT_NAME$17,
-  props: props$T,
-  setup(props, { slots, expose }) {
-    useForm(expose);
+const COMPONENT_NAME$1d = 'vc-checkbox';
+const Checkbox = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$1d,
+  props: props$12,
+  setup(props, {
+    slots
+  }) {
     return () => {
-      return h(
-        props.tag,
-        {
-          class: "vc-form",
-          autocomplete: props.autocomplete
-        },
-        slots
-      );
+      return createVNode("div", {
+        "class": "vc-checkbox"
+      }, [slots?.default?.()]);
     };
   }
 });
 
-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: {
+const MCheckbox = Checkbox;
+
+const props$11 = {
+  tag: {
     type: String,
-    default: "right"
-  },
-  contentStyle: String
+    default: "div"
+  }
 };
 
-const filterEmpty = (val) => {
-  if (val instanceof Array) {
-    val = val.filter((i) => i !== "");
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$1c = 'vc-clipboard';
+const Clipboard = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$1c,
+  props: props$11,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return createVNode("div", {
+        "class": "vc-clipboard"
+      }, [slots?.default?.()]);
+    };
+  }
+});
+
+const MClipboard = Clipboard;
+
+const props$10 = {
+  tag: {
+    type: String,
+    default: "div"
   }
-  return val;
-};
-const toRules = (rules) => {
-  return rules instanceof Array ? rules : rules ? [rules] : [];
 };
-const useFormItem = (expose) => {
-  const form = inject("form");
-  const instance = getCurrentInstance();
-  const props = instance.props;
-  const { slots } = instance;
-  if (!form?.props) {
-    throw new VcError("form-item", "form-item需要在form内使用");
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$1b = 'vc-collapse';
+const Collapse = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$1b,
+  props: props$10,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return createVNode("div", {
+        "class": "vc-collapse"
+      }, [slots?.default?.()]);
+    };
   }
-  const formItem = inject("form-item", {});
-  const validateState = ref("");
-  const validateMessage = ref("");
-  let validateDisabled = false;
-  let initialValue;
-  const currentRules = computed(() => {
-    const formRules = form.props.rules;
-    const formItemBindRules = toRules(props.rules);
-    let formItemRules = formItemBindRules;
-    if (!formItemRules.length && formRules && props.prop) {
-      try {
-        const key = props.prop.replace(/\.[0-9]+\./g, ".");
-        const { v } = getPropByPath(formRules, key);
-        formItemRules = toRules(v);
-      } catch {
-        const rules = formRules[props.prop];
-        formItemRules = toRules(rules);
-      }
-    }
-    return formItemRules;
-  });
-  const isRequired = computed(() => {
-    if (!currentRules.value.length) {
-      return !!props.required;
-    }
-    let required = false;
-    for (let i = 0; i < currentRules.value.length; i++) {
-      const rule = currentRules.value[i];
-      required = !!rule.required;
-      if (required) break;
-    }
-    return required;
-  });
-  const labelPosition = computed(() => {
-    return props.labelPosition || form.props.labelPosition;
-  });
-  const classes = computed(() => {
-    return {
-      "is-require": isRequired.value,
-      "is-error": validateState.value === "error",
-      "is-validating": validateState.value === "validating",
-      "is-inline": form.props.inline,
-      "is-nest": isNest.value,
-      [`is-${labelPosition.value}`]: true
+});
+
+const MCollapse = Collapse;
+
+const props$$ = {
+  tag: {
+    type: String,
+    default: "div"
+  }
+};
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$1a = 'vc-color-picker';
+const ColorPicker = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$1a,
+  props: props$$,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return createVNode("div", {
+        "class": "vc-color-picker"
+      }, [slots?.default?.()]);
     };
-  });
-  const isNest = computed(() => {
-    return !!formItem.change;
-  });
-  const isNestLast = ref(false);
-  const hasLabel = computed(() => {
-    return !!props.label || slots.label;
-  });
-  const labelStyle = computed(() => {
-    const labelWidth = props.labelWidth === 0 || props.labelWidth ? props.labelWidth : isNest.value ? 0 : form.props.labelWidth;
-    return {
-      width: labelPosition.value !== "top" && labelWidth && labelWidth > 0 ? `${labelWidth}px` : "auto",
-      textAlign: labelPosition.value === "top" ? "left" : labelPosition.value
+  }
+});
+
+const MColorPicker = ColorPicker;
+
+const props$_ = {
+  tag: {
+    type: String,
+    default: "div"
+  }
+};
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$19 = 'vc-countdown';
+const Countdown = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$19,
+  props: props$_,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return createVNode("div", {
+        "class": "vc-countdown"
+      }, [slots?.default?.()]);
     };
-  });
-  const contentStyle = computed(() => {
-    const labelWidth = props.labelWidth === 0 || props.labelWidth ? props.labelWidth : form.props.labelWidth;
-    return [
-      {
-        marginLeft: !hasLabel.value && isNest.value ? 0 : labelWidth && labelWidth > 0 ? `${labelWidth}px` : "unset",
-        marginBottom: isNest.value && !isNestLast.value ? `20px` : 0
-      },
-      props.contentStyle
-    ];
-  });
-  const isStyleless = computed(() => {
-    return props.styleless || form.props.styleless;
-  });
-  const fieldValue = computed(() => {
-    const model = form.props.model;
-    if (!model || !props.prop) {
-      return;
-    }
-    let path = props.prop;
-    if (path.includes(":")) {
-      path = path.replace(/:/, ".");
-    }
-    return getPropByPath(model, path).v;
-  });
-  const showError = computed(() => {
-    return validateState.value === "error" && props.showMessage && form.props.showMessage;
-  });
-  watch(
-    () => props.error,
-    (v) => {
-      validateMessage.value = v || "";
-      validateState.value = v === "" ? "" : "error";
-    }
-  );
-  const reset = (v) => {
-    validateState.value = "";
-    validateMessage.value = "";
-    const model = form.props.model;
-    if (!props.prop) return;
-    const { o, k } = getPropByPath(model, props.prop);
-    if (!k) return;
-    validateDisabled = true;
-    o[k] = v !== null && v !== void 0 ? v : Array.isArray(fieldValue.value) ? [].concat(initialValue) : initialValue;
-  };
-  const validate = async (trigger) => {
-    if (!props.prop) return;
-    let rules = currentRules.value.filter((rule) => !rule.trigger || rule.trigger.includes(trigger));
-    if (!rules.length) {
-      if (!props.required) {
-        return;
-      } else {
-        rules = [{
-          required: true,
-          message: typeof props.required === "string" ? props.required : void 0
-        }];
-      }
-    }
-    validateState.value = "validating";
-    const descriptor = {};
-    descriptor[props.prop] = rules;
-    const validator = new Validator(descriptor);
-    const model = {};
-    model[props.prop] = filterEmpty(fieldValue.value);
-    try {
-      await validator.validate(model, { first: false });
-      validateState.value = "success";
-      validateMessage.value = "";
-    } catch (errors) {
-      validateState.value = "error";
-      validateMessage.value = errors[0].message;
-      throw {
-        prop: props.prop,
-        message: validateMessage.value
-      };
-    }
-    validateDisabled = false;
-  };
-  const handleFieldBlur = () => {
-    if (!props.prop) {
-      formItem.blur?.();
-      return;
-    }
-    validate("blur");
-  };
-  const handleFieldChange = () => {
-    if (!props.prop) {
-      formItem.change?.();
-      return;
-    }
-    if (validateDisabled) {
-      validateDisabled = false;
-      return;
-    }
-    validate("change");
-  };
-  const getPosition = async () => {
-    let el = instance.vnode.el;
-    try {
-      while (el && !el.getBoundingClientRect) {
-        el = el.nextSibling;
-      }
-      ;
-      const rect = el.getBoundingClientRect();
-      return {
-        top: rect.top,
-        left: rect.left
-      };
-    } catch (e) {
-      throw new VcError("form-item", "form-item位置计算错误");
-    }
-  };
-  const fields = reactive([]);
-  provide("form-item", {
-    fields,
-    blur: handleFieldBlur,
-    change: handleFieldChange,
-    message: validateMessage,
-    add: (field) => {
-      field && fields.push(field);
-    },
-    remove: (field) => {
-      field && fields.splice(fields.indexOf(field), 1);
-    }
-  });
-  onMounted(() => {
-    if (props.prop) {
-      form.add?.(instance);
-      initialValue = cloneDeep(fieldValue.value);
-    }
-    formItem.add?.(instance);
-  });
-  onBeforeUnmount(() => {
-    form.remove?.(instance);
-    formItem.remove?.(instance);
-  });
-  watch(
-    () => props.rules,
-    () => {
-      props.resetByRulesChanged && reset();
-    }
-  );
-  watch(
-    () => formItem.fields?.length,
-    async (v) => {
-      if (!isNest.value || !v) return isNestLast.value = false;
-      const fields$ = [...toRaw(formItem.fields)];
-      const positions = await Promise.all(fields$.map((item) => item.exposed.getPosition()));
-      const sortFields = fields$.toSorted((a, b) => {
-        const aIndex = fields$.findIndex((i) => i === a);
-        const bIndex = fields$.findIndex((i) => i === b);
-        const aPosition = positions[aIndex];
-        const bPosition = positions[bIndex];
-        if (aPosition.top != bPosition.top) return aPosition.top - bPosition.top;
-        return aPosition.left - bPosition.left;
-      });
-      isNestLast.value = sortFields[sortFields.length - 1] === instance;
-    }
-  );
-  expose({
-    validate,
-    reset,
-    getPosition
-  });
-  return {
-    isNest,
-    isStyleless,
-    isNestLast,
-    validateMessage,
-    classes,
-    labelStyle,
-    contentStyle,
-    showError,
-    labelPosition
-  };
+  }
+});
+
+const MCountdown = Countdown;
+
+const props$Z = {
+  render: {
+    type: Function,
+    default: () => null
+  }
 };
 
-const props$R = {
-  /**
-   * 进入/离开持续时间
-   * {enter: 300, leave: 300}
-   */
-  duration: {
-    type: [Number, Object],
-    default: 300
-  },
-  /**
-   * 进入/离开延迟时间
-   */
-  delay: {
-    type: [Number, Object],
-    default: 0
-  },
-  /**
-   * `transition-group` component.
-   */
-  group: Boolean,
-  /**
-   * `transition-group` tag, v3版本默认值无
-   */
+const COMPONENT_NAME$18 = "vc-customer";
+const Customer = defineComponent({
+  name: COMPONENT_NAME$18,
+  props: props$Z,
+  setup(props, context) {
+    return () => h(() => {
+      return props.render(context.attrs, context);
+    });
+  }
+});
+
+const MCustomer = Customer;
+
+const props$Y = {
   tag: {
     type: String,
-    default: void 0
-  },
-  /**
-   *  变换的初始位置, 可以用style代替, 更短~~
-   */
-  origin: {
+    default: "div"
+  }
+};
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$17 = 'vc-date-picker';
+const DatePicker = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$17,
+  props: props$Y,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return createVNode("div", {
+        "class": "vc-date-picker"
+      }, [slots?.default?.()]);
+    };
+  }
+});
+
+const MDatePicker = DatePicker;
+
+const props$X = {
+  tag: {
     type: String,
-    default: ""
+    default: "div"
+  }
+};
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$16 = 'vc-divider';
+const Divider = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$16,
+  props: props$X,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return createVNode("div", {
+        "class": "vc-divider"
+      }, [slots?.default?.()]);
+    };
+  }
+});
+
+const MDivider = Divider;
+
+const props$W = {
+  tag: {
+    type: String,
+    default: "div"
+  }
+};
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$15 = 'vc-drawer';
+const Drawer = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$15,
+  props: props$W,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return createVNode("div", {
+        "class": "vc-drawer"
+      }, [slots?.default?.()]);
+    };
+  }
+});
+
+const MDrawer = Drawer;
+
+const props$V = {
+  tag: {
+    type: String,
+    default: "div"
+  }
+};
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$14 = 'vc-dropdown';
+const Dropdown = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$14,
+  props: props$V,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return createVNode("div", {
+        "class": "vc-dropdown"
+      }, [slots?.default?.()]);
+    };
+  }
+});
+
+const MDropdown = Dropdown;
+
+const props$U = {
+  tag: {
+    type: String,
+    default: "div"
+  }
+};
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$13 = 'vc-editor';
+const Editor = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$13,
+  props: props$U,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return createVNode("div", {
+        "class": "vc-editor"
+      }, [slots?.default?.()]);
+    };
+  }
+});
+
+const MEditor = Editor;
+
+const props$T = {
+  tag: {
+    type: String,
+    default: "div"
+  }
+};
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$12 = 'vc-expand';
+const Expand = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$12,
+  props: props$T,
+  setup(props, {
+    slots
+  }) {
+    return () => {
+      return createVNode("div", {
+        "class": "vc-expand"
+      }, [slots?.default?.()]);
+    };
+  }
+});
+
+const MExpand = Expand;
+
+const props$S = {
+  tag: {
+    type: String,
+    default: "form"
   },
-  /**
-   * 在转换期间应用的元素样式。这些样式应用于@beforeEnter和@beforeLeave钩子
-   * inheritAttrs必须是false
-   */
-  style: {
-    type: Object,
-    default: () => {
-      return {
-        animationFillMode: "both",
-        animationTimingFunction: "ease-out"
-      };
-    }
+  model: {
+    type: Object
   },
-  prefix: {
+  rules: {
+    type: Object
+  },
+  labelWidth: {
+    type: Number
+  },
+  showMessage: {
+    type: Boolean,
+    default: true
+  },
+  inline: {
+    type: Boolean,
+    default: false
+  },
+  labelPosition: {
     type: String,
-    default: "vc-transition"
+    default: "right"
   },
-  mode: {
+  autocomplete: {
     type: String,
-    default: "none"
+    default: "off"
+  },
+  styleless: {
+    type: Boolean,
+    default: false
   }
 };
-
-const trim = (str) => str.trim().replace(/\s+/g, " ");
-const useTransition = () => {
+
+const useForm = (expose, options = {}) => {
   const instance = getCurrentInstance();
-  const attrs = instance.attrs;
   const props = instance.props;
-  const Wrapper = computed(() => {
-    return props.group ? TransitionGroup : Transition$1;
-  });
-  const classes = computed(() => {
-    const modeClass = props.mode !== "none" ? `is-${props.mode.replace(/-/g, " is-")}` : "";
-    return {
-      enterActiveClass: trim(`${attrs.enterActiveClass || ""} ${props.prefix} ${modeClass} is-in`),
-      leaveActiveClass: trim(`${attrs.leaveActiveClass || ""} ${props.prefix} ${modeClass} is-out`),
-      moveClass: props.group ? trim(`${attrs.moveClass || ""} ${props.prefix} ${modeClass} is-move`) : void 0
-    };
-  });
-  const clearStyles = (el) => {
-    Object.keys(props.style).forEach((key) => {
-      const v = props.style[key];
-      v && el.style.removeProperty(
-        key.replace(/([A-Z])/g, "-$1").toLowerCase()
-      );
-    });
-    el.style.removeProperty("animation-duration");
-    el.style.removeProperty("animation-delay");
-  };
-  const resetAbsolute = (el) => {
-    props.group && (el.style.position = "absolute");
-  };
-  const resetOrigin = (el) => {
-    props.origin && (el.style.transformOrigin = props.origin);
-  };
-  const resetStyles = (el) => {
-    resetOrigin(el);
-    Object.keys(props.style).forEach((key) => {
-      const v = props.style[key];
-      v && (el.style[key] = v);
-    });
-  };
-  const handleBeforeEnter = (el) => {
-    const duration = props.duration.enter || props.duration;
-    el.style.animationDuration = `${duration}ms`;
-    const delay = props.delay.enter || props.delay;
-    el.style.animationDelay = `${delay}ms`;
-    resetStyles(el);
-    attrs.onBeforeEnter?.(el);
-  };
-  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 (el, done) => {
-    const duration = props.duration.enter || props.duration;
-    const next = createNext(done, duration);
-    try {
-      await attrs.onEnter?.(el, next);
-    } finally {
-      next(false);
+  const fields = [];
+  provide("form", {
+    props,
+    add: (field) => {
+      field && fields.push(field);
+    },
+    remove: (field) => {
+      field && fields.splice(fields.indexOf(field), 1);
     }
+  });
+  const filterFields = (fields$) => {
+    return !fields$ ? fields : fields.filter((item) => fields$.includes(item.props.prop));
   };
-  const handleAfterEnter = (el) => {
-    clearStyles(el);
-    attrs.onAfterEnter?.(el);
+  const getField = (prop) => {
+    const field = fields.find((item) => item.props.prop === prop);
+    if (!field) throw new VcError("form", "请选择有用的prop值");
+    return field;
   };
-  const handleBeforeLeave = (el) => {
-    const duration = props.duration.leave || props.duration;
-    el.style.animationDuration = `${duration}ms`;
-    const delay = props.delay.leave || props.delay;
-    el.style.animationDelay = `${delay}ms`;
-    resetStyles(el);
-    attrs.onBeforeLeave?.(el);
+  const showToast = (msg) => {
+    props.showMessage && options.throwToast?.(msg);
   };
-  const handleLeave = async (el, done) => {
-    const duration = props.duration.leave || props.duration;
-    const next = createNext(done, duration);
+  const sortErrors = async (errors) => {
+    const positions = await Promise.all(fields.map((item) => item.exposed.getPosition()));
     try {
-      resetAbsolute(el);
-      await attrs.onLeave?.(el, next);
-    } finally {
-      next(props.group ? true : false);
-    }
-  };
-  const handleAfterLeave = (el) => {
-    clearStyles(el);
-    attrs.onAfterLeave?.(el);
-  };
-  return {
-    Wrapper,
-    resetStyles,
-    resetAbsolute,
-    classes,
-    createNext,
-    listeners: {
-      onBeforeEnter: handleBeforeEnter,
-      onEnter: handleEnter,
-      onAfterEnter: handleAfterEnter,
-      onBeforeLeave: handleBeforeLeave,
-      onLeave: handleLeave,
-      onAfterLeave: handleAfterLeave
+      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 COMPONENT_NAME$16 = "vc-transition";
-const Transition = defineComponent({
-  name: COMPONENT_NAME$16,
-  props: props$R,
-  // 当不声明emits的情况下，事件存在于attrs中
-  inheritAttrs: false,
-  setup(props, { slots, attrs }) {
-    const { Wrapper, listeners, classes } = useTransition();
-    return () => {
-      return h(
-        Wrapper.value,
-        {
-          ...attrs,
-          ...listeners,
-          ...classes.value,
-          tag: props.tag
-        },
-        slots
-      );
-    };
-  }
-});
-
-const COMPONENT_NAME$15 = "vc-transition-collapse";
-const TransitionCollapse = defineComponent({
-  name: COMPONENT_NAME$15,
-  props: props$R,
-  // 当不声明emits的情况下，事件存在于attrs中
-  inheritAttrs: false,
-  setup(props, { 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 = (el) => {
-      const duration = props.duration.enter || props.duration;
-      el.style.transition = getTransitionStyle(duration);
-      /* istanbul ignore next -- @preserve */
-      if (!el.dataset) {
-        el.dataset = {};
-      }
-      el.dataset.oldPaddingTop = el.style.paddingTop;
-      el.dataset.oldPaddingBottom = el.style.paddingBottom;
-      el.style.height = "0px";
-      el.style.paddingTop = "0px";
-      el.style.paddingBottom = "0px";
-      resetStyles(el);
-      attrs.onBeforeEnter?.(el);
-    };
-    const handleEnter = async (el, done) => {
-      const duration = props.duration.enter || props.duration;
-      const next = createNext(done, duration);
-      try {
-        el.dataset.oldOverflow = el.style.overflow;
-        /* istanbul ignore next -- @preserve */
-        if (el.scrollHeight !== 0) {
-          el.style.height = el.scrollHeight + "px";
-          el.style.paddingTop = el.dataset.oldPaddingTop + "px";
-          el.style.paddingBottom = el.dataset.oldPaddingBottom + "px";
-        } else {
-          el.style.height = "";
-          el.style.paddingTop = el.dataset.oldPaddingTop + "px";
-          el.style.paddingBottom = el.dataset.oldPaddingBottom + "px";
-        }
-        el.style.overflow = "hidden";
-        attrs.onEnter?.(el);
-      } finally {
-        next(false);
-      }
-    };
-    const handleAfterEnter = (el) => {
-      el.style.transition = "";
-      el.style.height = "";
-      el.style.overflow = el.dataset.oldOverflow || "";
-      attrs.onAfterEnter?.(el);
-    };
-    const handleBeforeLeave = (el) => {
-      /* istanbul ignore next -- @preserve */
-      if (!el.dataset) {
-        el.dataset = {};
-      }
-      el.dataset.oldPaddingTop = el.style.paddingTop;
-      el.dataset.oldPaddingBottom = el.style.paddingBottom;
-      el.dataset.oldOverflow = el.style.overflow;
-      el.style.height = el.scrollHeight + "px";
-      el.style.overflow = "hidden";
-      resetStyles(el);
-      attrs.onBeforeLeave?.(el);
-    };
-    const handleLeave = (el, done) => {
-      const duration = props.duration.leave || props.duration;
-      const next = createNext(done, duration);
-      try {
-        const leaveDuration = props.duration.leave || props.duration;
-        /* istanbul ignore next -- @preserve */
-        if (el.scrollHeight !== 0) {
-          el.style.transition = getTransitionStyle(leaveDuration);
-          el.style.height = "0px";
-          el.style.paddingTop = "0px";
-          el.style.paddingBottom = "0px";
-        }
-        resetAbsolute(el);
-        attrs.onLeave?.(el);
-      } finally {
-        next(props.group ? true : false);
-      }
-    };
-    const handleAfterLeave = (el) => {
-      el.style.transition = "";
-      el.style.height = "";
-      el.style.overflow = el.dataset.oldOverflow || "";
-      el.style.paddingTop = el.dataset.oldPaddingTop || "";
-      el.style.paddingBottom = el.dataset.oldPaddingBottom || "";
-      attrs.onAfterLeave?.(el);
-    };
-    const listeners = {
-      onBeforeEnter: handleBeforeEnter,
-      onEnter: handleEnter,
-      onAfterEnter: handleAfterEnter,
-      onBeforeLeave: handleBeforeLeave,
-      onLeave: handleLeave,
-      onAfterLeave: handleAfterLeave
-    };
+  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$11 = "vc-form";
+const Form = defineComponent({
+  name: COMPONENT_NAME$11,
+  props: props$S,
+  setup(props, { slots, expose }) {
+    useForm(expose);
     return () => {
       return h(
-        Wrapper.value,
+        props.tag,
         {
-          ...attrs,
-          ...listeners,
-          tag: props.tag,
-          moveClass: props.group ? `${attrs.moveClass || ""} vc-transition-collapse is-move` : void 0
+          class: "vc-form",
+          autocomplete: props.autocomplete
         },
         slots
       );
@@ -1762,175 +1758,308 @@ const TransitionCollapse = defineComponent({
   }
 });
 
-const COMPONENT_NAME$14 = "vc-transition-fade";
-const TransitionFade = 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 props$R = {
+  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 !== "");
+  }
+  return val;
+};
+const toRules = (rules) => {
+  return rules instanceof Array ? rules : rules ? [rules] : [];
+};
+const useFormItem = (expose) => {
+  const form = inject("form");
+  const instance = getCurrentInstance();
+  const props = instance.props;
+  const { slots } = instance;
+  if (!form?.props) {
+    throw new VcError("form-item", "form-item需要在form内使用");
+  }
+  const formItem = inject("form-item", {});
+  const validateState = ref("");
+  const validateMessage = ref("");
+  let validateDisabled = false;
+  let initialValue;
+  const currentRules = computed(() => {
+    const formRules = form.props.rules;
+    const formItemBindRules = toRules(props.rules);
+    let formItemRules = formItemBindRules;
+    if (!formItemRules.length && formRules && props.prop) {
+      try {
+        const key = props.prop.replace(/\.[0-9]+\./g, ".");
+        const { v } = getPropByPath(formRules, key);
+        formItemRules = toRules(v);
+      } catch {
+        const rules = formRules[props.prop];
+        formItemRules = toRules(rules);
+      }
+    }
+    return formItemRules;
+  });
+  const isRequired = computed(() => {
+    if (!currentRules.value.length) {
+      return !!props.required;
+    }
+    let required = false;
+    for (let i = 0; i < currentRules.value.length; i++) {
+      const rule = currentRules.value[i];
+      required = !!rule.required;
+      if (required) break;
+    }
+    return required;
+  });
+  const labelPosition = computed(() => {
+    return props.labelPosition || form.props.labelPosition;
+  });
+  const classes = computed(() => {
+    return {
+      "is-require": isRequired.value,
+      "is-error": validateState.value === "error",
+      "is-validating": validateState.value === "validating",
+      "is-inline": form.props.inline,
+      "is-nest": isNest.value,
+      [`is-${labelPosition.value}`]: true
+    };
+  });
+  const isNest = computed(() => {
+    return !!formItem.change;
+  });
+  const isNestLast = ref(false);
+  const hasLabel = computed(() => {
+    return !!props.label || slots.label;
+  });
+  const labelStyle = computed(() => {
+    const labelWidth = props.labelWidth === 0 || props.labelWidth ? props.labelWidth : isNest.value ? 0 : form.props.labelWidth;
+    return {
+      width: labelPosition.value !== "top" && labelWidth && labelWidth > 0 ? `${labelWidth}px` : "auto",
+      textAlign: labelPosition.value === "top" ? "left" : labelPosition.value
+    };
+  });
+  const contentStyle = computed(() => {
+    const labelWidth = props.labelWidth === 0 || props.labelWidth ? props.labelWidth : form.props.labelWidth;
+    return [
+      {
+        marginLeft: !hasLabel.value && isNest.value ? 0 : labelWidth && labelWidth > 0 ? `${labelWidth}px` : "unset",
+        marginBottom: isNest.value && !isNestLast.value ? `20px` : 0
+      },
+      props.contentStyle
+    ];
+  });
+  const isStyleless = computed(() => {
+    return props.styleless || form.props.styleless;
+  });
+  const fieldValue = computed(() => {
+    const model = form.props.model;
+    if (!model || !props.prop) {
+      return;
+    }
+    let path = props.prop;
+    if (path.includes(":")) {
+      path = path.replace(/:/, ".");
+    }
+    return getPropByPath(model, path).v;
+  });
+  const showError = computed(() => {
+    return validateState.value === "error" && props.showMessage && form.props.showMessage;
+  });
+  watch(
+    () => props.error,
+    (v) => {
+      validateMessage.value = v || "";
+      validateState.value = v === "" ? "" : "error";
+    }
+  );
+  const reset = (v) => {
+    validateState.value = "";
+    validateMessage.value = "";
+    const model = form.props.model;
+    if (!props.prop) return;
+    const { o, k } = getPropByPath(model, props.prop);
+    if (!k) return;
+    validateDisabled = true;
+    o[k] = v !== null && v !== void 0 ? v : Array.isArray(fieldValue.value) ? [].concat(initialValue) : initialValue;
+  };
+  const validate = async (trigger) => {
+    if (!props.prop) return;
+    let rules = currentRules.value.filter((rule) => !rule.trigger || rule.trigger.includes(trigger));
+    if (!rules.length) {
+      if (!props.required) {
+        return;
+      } else {
+        rules = [{
+          required: true,
+          message: typeof props.required === "string" ? props.required : void 0
+        }];
+      }
+    }
+    validateState.value = "validating";
+    const descriptor = {};
+    descriptor[props.prop] = rules;
+    const validator = new Validator(descriptor);
+    const model = {};
+    model[props.prop] = filterEmpty(fieldValue.value);
+    try {
+      await validator.validate(model, { first: false });
+      validateState.value = "success";
+      validateMessage.value = "";
+    } catch (errors) {
+      validateState.value = "error";
+      validateMessage.value = errors[0].message;
+      throw {
+        prop: props.prop,
+        message: validateMessage.value
+      };
     }
-  },
-  // 当不声明emits的情况下，事件存在于attrs中
-  inheritAttrs: false,
-  setup(props, { slots, attrs }) {
-    const { Wrapper, listeners, classes } = useTransition();
-    return () => {
-      return h(
-        Wrapper.value,
-        {
-          ...attrs,
-          ...listeners,
-          ...classes.value,
-          tag: props.tag
-        },
-        slots
-      );
-    };
-  }
-});
-
-const COMPONENT_NAME$13 = "vc-transition-scale";
-const TransitionScale = 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
-      })
-    },
-    prefix: {
-      type: String,
-      default: "vc-transition-scale"
+    validateDisabled = false;
+  };
+  const handleFieldBlur = () => {
+    if (!props.prop) {
+      formItem.blur?.();
+      return;
     }
-  },
-  // 当不声明emits的情况下，事件存在于attrs中
-  inheritAttrs: false,
-  setup(props, { slots, attrs }) {
-    const { Wrapper, listeners, classes } = useTransition();
-    return () => {
-      return h(
-        Wrapper.value,
-        {
-          ...attrs,
-          ...listeners,
-          ...classes.value,
-          tag: props.tag
-        },
-        slots
-      );
-    };
-  }
-});
-
-const COMPONENT_NAME$12 = "vc-transition-slide";
-const TransitionSlide = 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"
+    validate("blur");
+  };
+  const handleFieldChange = () => {
+    if (!props.prop) {
+      formItem.change?.();
+      return;
     }
-  },
-  // 当不声明emits的情况下，事件存在于attrs中
-  inheritAttrs: false,
-  setup(props, { slots, attrs }) {
-    const { Wrapper, listeners, classes } = useTransition();
-    return () => {
-      return h(
-        Wrapper.value,
-        {
-          ...attrs,
-          ...listeners,
-          ...classes.value,
-          tag: props.tag
-        },
-        slots
-      );
-    };
-  }
-});
-
-const COMPONENT_NAME$11 = "vc-transition-zoom";
-const TransitionZoom = 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
-      })
+    if (validateDisabled) {
+      validateDisabled = false;
+      return;
+    }
+    validate("change");
+  };
+  const getPosition = async () => {
+    let el = instance.vnode.el;
+    try {
+      while (el && !el.getBoundingClientRect) {
+        el = el.nextSibling;
+      }
+      ;
+      const rect = el.getBoundingClientRect();
+      return {
+        top: rect.top,
+        left: rect.left
+      };
+    } catch (e) {
+      throw new VcError("form-item", "form-item位置计算错误");
+    }
+  };
+  const fields = reactive([]);
+  provide("form-item", {
+    fields,
+    blur: handleFieldBlur,
+    change: handleFieldChange,
+    message: validateMessage,
+    add: (field) => {
+      field && fields.push(field);
     },
-    prefix: {
-      type: String,
-      default: "vc-transition-zoom"
+    remove: (field) => {
+      field && fields.splice(fields.indexOf(field), 1);
     }
-  },
-  // 当不声明emits的情况下，事件存在于attrs中
-  inheritAttrs: false,
-  setup(props, { slots, attrs }) {
-    const { Wrapper, listeners, classes } = useTransition();
-    return () => {
-      return h(
-        Wrapper.value,
-        {
-          ...attrs,
-          ...listeners,
-          ...classes.value,
-          tag: props.tag
-        },
-        slots
-      );
-    };
-  }
-});
+  });
+  onMounted(() => {
+    if (props.prop) {
+      form.add?.(instance);
+      initialValue = cloneDeep(fieldValue.value);
+    }
+    formItem.add?.(instance);
+  });
+  onBeforeUnmount(() => {
+    form.remove?.(instance);
+    formItem.remove?.(instance);
+  });
+  watch(
+    () => props.rules,
+    () => {
+      props.resetByRulesChanged && reset();
+    }
+  );
+  watch(
+    () => formItem.fields?.length,
+    async (v) => {
+      if (!isNest.value || !v) return isNestLast.value = false;
+      const fields$ = [...toRaw(formItem.fields)];
+      const positions = await Promise.all(fields$.map((item) => item.exposed.getPosition()));
+      const sortFields = fields$.toSorted((a, b) => {
+        const aIndex = fields$.findIndex((i) => i === a);
+        const bIndex = fields$.findIndex((i) => i === b);
+        const aPosition = positions[aIndex];
+        const bPosition = positions[bIndex];
+        if (aPosition.top != bPosition.top) return aPosition.top - bPosition.top;
+        return aPosition.left - bPosition.left;
+      });
+      isNestLast.value = sortFields[sortFields.length - 1] === instance;
+    }
+  );
+  expose({
+    validate,
+    reset,
+    getPosition
+  });
+  return {
+    isNest,
+    isStyleless,
+    isNestLast,
+    validateMessage,
+    classes,
+    labelStyle,
+    contentStyle,
+    showError,
+    labelPosition
+  };
+};
 
 /** @jsxImportSource vue */
 
 const COMPONENT_NAME$10 = 'vc-form-item';
 const FormItem = /* @__PURE__ */ defineComponent({
   name: COMPONENT_NAME$10,
-  props: props$S,
+  props: props$R,
   setup(props, {
     slots,
     expose
@@ -1983,7 +2112,7 @@ const FormItem = /* @__PURE__ */ defineComponent({
 });
 
 const props$Q = {
-  ...props$T,
+  ...props$S,
   showToast: {
     type: Boolean,
     default: false
@@ -2521,7 +2650,7 @@ const MForm = defineComponent({
 });
 
 const props$N = {
-  ...props$S,
+  ...props$R,
   indent: {
     type: Number,
     default: 12
@@ -5268,7 +5397,8 @@ const PopoverWrapper = /* @__PURE__ */ defineComponent({
   emits: ['portal-fulfilled', 'close'],
   setup(props, {
     emit,
-    slots
+    slots,
+    expose
   }) {
     const {
       getPopupStyle,
@@ -5472,6 +5602,9 @@ const PopoverWrapper = /* @__PURE__ */ defineComponent({
       Resize.off(vnode.el, handleWrapperResize);
       props.alone && props.hover && removeEvents();
     });
+    expose({
+      isActive
+    });
     return () => {
       let _slot;
       return createVNode(TransitionScale, {