@deot/vc-components 1.0.1 → 1.0.2

package/dist/index.iife.js

@@ -71,58 +71,33 @@ var VcComponents = (function (exports, vue) {
 	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__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1v,
-	  props: props$1f,
-	  setup(props, {
-	    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
 	  }
 	};
 
-	/** @jsxImportSource vue */
-
-	const COMPONENT_NAME$1u = 'vc-artboard';
-	const Artboard = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1u,
-	  props: props$1e,
-	  setup(props, {
-	    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,
@@ -267,10 +242,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	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(props) {
 	    const viewBox = vue.ref('0 0 1024 1024');
 	    const path = vue.ref([]);
@@ -303,387 +278,987 @@ var VcComponents = (function (exports, vue) {
 	  }
 	});
 
-	const props$1c = {
-	  size: {
-	    type: Number,
-	    default: 28
+	const props$1d = {
+	  /**
+	   * 进入/离开持续时间
+	   * {enter: 300, leave: 300}
+	   */
+	  duration: {
+	    type: [Number, Object],
+	    default: 300
 	  },
-	  foreground: {
+	  /**
+	   * 进入/离开延迟时间
+	   */
+	  delay: {
+	    type: [Number, Object],
+	    default: 0
+	  },
+	  /**
+	   * `transition-group` component.
+	   */
+	  group: Boolean,
+	  /**
+	   * `transition-group` tag, v3版本默认值无
+	   */
+	  tag: {
 	    type: String,
-	    default: "#ccc"
+	    default: void 0
 	  },
-	  background: {
+	  /**
+	   *  变换的初始位置, 可以用style代替, 更短~~
+	   */
+	  origin: {
 	    type: String,
-	    default: "var(--vc-color-primary)"
+	    default: ""
 	  },
 	  /**
-	   * 待开发
+	   * 在转换期间应用的元素样式。这些样式应用于@beforeEnter和@beforeLeave钩子
+	   * inheritAttrs必须是false
 	   */
-	  fixed: {
-	    type: Boolean,
-	    default: false
+	  style: {
+	    type: Object,
+	    default: () => {
+	      return {
+	        animationFillMode: "both",
+	        animationTimingFunction: "ease-out"
+	      };
+	    }
+	  },
+	  prefix: {
+	    type: String,
+	    default: "vc-transition"
+	  },
+	  mode: {
+	    type: String,
+	    default: "none"
 	  }
 	};
 
-	/** @jsxImportSource vue */
+	const trim = (str) => str.trim().replace(/\s+/g, " ");
+	const useTransition = () => {
+	  const instance = vue.getCurrentInstance();
+	  const attrs = instance.attrs;
+	  const props = instance.props;
+	  const Wrapper = vue.computed(() => {
+	    return props.group ? vue.TransitionGroup : vue.Transition;
+	  });
+	  const classes = vue.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 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
+	    }
+	  };
+	};
 
-	const COMPONENT_NAME$1s = 'vc-spin';
-	const Spin = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1s,
-	  props: props$1c,
-	  setup(props, {
-	    slots
-	  }) {
+	const COMPONENT_NAME$1u = "vc-transition";
+	const Transition = vue.defineComponent({
+	  name: COMPONENT_NAME$1u,
+	  props: props$1d,
+	  // 当不声明emits的情况下，事件存在于attrs中
+	  inheritAttrs: false,
+	  setup(props, { slots, attrs }) {
+	    const { Wrapper, listeners, classes } = useTransition();
 	    return () => {
-	      return vue.createVNode("div", {
-	        "class": "vc-spin"
-	      }, [vue.createVNode("span", {
-	        "style": {
-	          fontSize: `${props.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": props.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": 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?.()]);
+	      return vue.h(
+	        Wrapper.value,
+	        {
+	          ...attrs,
+	          ...listeners,
+	          ...classes.value,
+	          tag: props.tag
+	        },
+	        slots
+	      );
 	    };
 	  }
 	});
 
-	/** Detect free variable `global` from Node.js. */
-	var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
-
-	/** Detect free variable `self`. */
-	var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
-	/** Used as a reference to the global object. */
-	var root = freeGlobal || freeSelf || Function('return this')();
-
-	/** Built-in value references. */
-	var Symbol$1 = root.Symbol;
-
-	/** Used for built-in method references. */
-	var objectProto$b = Object.prototype;
-
-	/** Used to check objects for own properties. */
-	var hasOwnProperty$8 = objectProto$b.hasOwnProperty;
-
-	/**
-	 * Used to resolve the
-	 * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
-	 * of values.
-	 */
-	var nativeObjectToString$1 = objectProto$b.toString;
-
-	/** Built-in value references. */
-	var symToStringTag$1 = Symbol$1 ? Symbol$1.toStringTag : undefined;
-
-	/**
-	 * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
-	 *
-	 * @private
-	 * @param {*} value The value to query.
-	 * @returns {string} Returns the raw `toStringTag`.
-	 */
-	function getRawTag(value) {
-	  var isOwn = hasOwnProperty$8.call(value, symToStringTag$1),
-	      tag = value[symToStringTag$1];
-
-	  try {
-	    value[symToStringTag$1] = undefined;
-	    var unmasked = true;
-	  } catch (e) {}
+	const COMPONENT_NAME$1t = "vc-transition-collapse";
+	const TransitionCollapse = vue.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 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
+	    };
+	    return () => {
+	      return vue.h(
+	        Wrapper.value,
+	        {
+	          ...attrs,
+	          ...listeners,
+	          tag: props.tag,
+	          moveClass: props.group ? `${attrs.moveClass || ""} vc-transition-collapse is-move` : void 0
+	        },
+	        slots
+	      );
+	    };
+	  }
+	});
 
-	  var result = nativeObjectToString$1.call(value);
-	  if (unmasked) {
-	    if (isOwn) {
-	      value[symToStringTag$1] = tag;
-	    } else {
-	      delete value[symToStringTag$1];
+	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(props, { slots, attrs }) {
+	    const { Wrapper, listeners, classes } = useTransition();
+	    return () => {
+	      return vue.h(
+	        Wrapper.value,
+	        {
+	          ...attrs,
+	          ...listeners,
+	          ...classes.value,
+	          tag: props.tag
+	        },
+	        slots
+	      );
+	    };
 	  }
-	  return result;
-	}
-
-	/** Used for built-in method references. */
-	var objectProto$a = Object.prototype;
-
-	/**
-	 * Used to resolve the
-	 * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
-	 * of values.
-	 */
-	var nativeObjectToString = objectProto$a.toString;
-
-	/**
-	 * Converts `value` to a string using `Object.prototype.toString`.
-	 *
-	 * @private
-	 * @param {*} value The value to convert.
-	 * @returns {string} Returns the converted string.
-	 */
-	function objectToString(value) {
-	  return nativeObjectToString.call(value);
-	}
-
-	/** `Object#toString` result references. */
-	var nullTag = '[object Null]',
-	    undefinedTag = '[object Undefined]';
-
-	/** Built-in value references. */
-	var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : undefined;
+	});
 
-	/**
-	 * The base implementation of `getTag` without fallbacks for buggy environments.
-	 *
-	 * @private
-	 * @param {*} value The value to query.
-	 * @returns {string} Returns the `toStringTag`.
-	 */
-	function baseGetTag(value) {
-	  if (value == null) {
-	    return value === undefined ? undefinedTag : nullTag;
+	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(props, { slots, attrs }) {
+	    const { Wrapper, listeners, classes } = useTransition();
+	    return () => {
+	      return vue.h(
+	        Wrapper.value,
+	        {
+	          ...attrs,
+	          ...listeners,
+	          ...classes.value,
+	          tag: props.tag
+	        },
+	        slots
+	      );
+	    };
 	  }
-	  return (symToStringTag && symToStringTag in Object(value))
-	    ? getRawTag(value)
-	    : objectToString(value);
-	}
+	});
 
-	/**
-	 * Checks if `value` is object-like. A value is object-like if it's not `null`
-	 * and has a `typeof` result of "object".
-	 *
-	 * @static
-	 * @memberOf _
-	 * @since 4.0.0
-	 * @category Lang
-	 * @param {*} value The value to check.
-	 * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
-	 * @example
-	 *
-	 * _.isObjectLike({});
-	 * // => true
-	 *
-	 * _.isObjectLike([1, 2, 3]);
-	 * // => true
-	 *
-	 * _.isObjectLike(_.noop);
-	 * // => false
-	 *
-	 * _.isObjectLike(null);
-	 * // => false
-	 */
-	function isObjectLike(value) {
-	  return value != null && typeof value == 'object';
-	}
+	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(props, { slots, attrs }) {
+	    const { Wrapper, listeners, classes } = useTransition();
+	    return () => {
+	      return vue.h(
+	        Wrapper.value,
+	        {
+	          ...attrs,
+	          ...listeners,
+	          ...classes.value,
+	          tag: props.tag
+	        },
+	        slots
+	      );
+	    };
+	  }
+	});
 
-	/** `Object#toString` result references. */
-	var symbolTag$2 = '[object Symbol]';
+	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(props, { slots, attrs }) {
+	    const { Wrapper, listeners, classes } = useTransition();
+	    return () => {
+	      return vue.h(
+	        Wrapper.value,
+	        {
+	          ...attrs,
+	          ...listeners,
+	          ...classes.value,
+	          tag: props.tag
+	        },
+	        slots
+	      );
+	    };
+	  }
+	});
 
-	/**
-	 * Checks if `value` is classified as a `Symbol` primitive or object.
-	 *
-	 * @static
-	 * @memberOf _
-	 * @since 4.0.0
-	 * @category Lang
-	 * @param {*} value The value to check.
-	 * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
-	 * @example
-	 *
-	 * _.isSymbol(Symbol.iterator);
-	 * // => true
-	 *
-	 * _.isSymbol('abc');
-	 * // => false
-	 */
-	function isSymbol(value) {
-	  return typeof value == 'symbol' ||
-	    (isObjectLike(value) && baseGetTag(value) == symbolTag$2);
-	}
+	/** @jsxImportSource vue */
 
-	/**
-	 * A specialized version of `_.map` for arrays without support for iteratee
-	 * shorthands.
-	 *
-	 * @private
-	 * @param {Array} [array] The array to iterate over.
-	 * @param {Function} iteratee The function invoked per iteration.
-	 * @returns {Array} Returns the new mapped array.
-	 */
-	function arrayMap(array, iteratee) {
-	  var index = -1,
-	      length = array == null ? 0 : array.length,
-	      result = Array(length);
+	const COMPONENT_NAME$1o = 'vc-alert';
 
-	  while (++index < length) {
-	    result[index] = iteratee(array[index], index, array);
+	// [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__ */ vue.defineComponent({
+	  name: COMPONENT_NAME$1o,
+	  props: props$1f,
+	  setup(props, {
+	    slots,
+	    emit
+	  }) {
+	    const isActive = vue.ref(false);
+	    const showIcon = vue.computed(() => props.icon !== false);
+	    const containerStyle = vue.computed(() => {
+	      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+	      const [_, borderColor, backgroundColor] = THEME_MAP[props.type];
+	      return {
+	        borderColor,
+	        backgroundColor
+	      };
+	    });
+	    const iconStyle = vue.computed(() => {
+	      const [color] = THEME_MAP[props.type];
+	      return {
+	        color
+	      };
+	    });
+	    const titleStyle = vue.computed(() => {
+	      const [color] = THEME_MAP[props.type];
+	      return props.desc || slots.desc ? {
+	        marginBottom: '5px',
+	        fontSize: '14px',
+	        color
+	      } : {};
+	    });
+	    const descStyle = vue.computed(() => {
+	      const [color] = THEME_MAP[props.type];
+	      return {
+	        color,
+	        opacity: '.7'
+	      };
+	    });
+	    const iconType = vue.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);
+	    };
+	    vue.watch(() => props.modelValue, v => {
+	      isActive.value = v;
+	    }, {
+	      immediate: true
+	    });
+	    return () => {
+	      return vue.createVNode(TransitionFade, null, {
+	        default: () => [isActive.value && vue.createVNode("div", {
+	          "class": [`is-${props.type}`, {
+	            'has-icon': showIcon.value,
+	            'has-desc': props.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"
+	        }, [props.title ? vue.createVNode("div", {
+	          "style": titleStyle.value,
+	          "innerHTML": props.title
+	        }, null) : vue.createVNode("div", {
+	          "style": titleStyle.value
+	        }, [slots?.default?.()]), props.desc ? vue.createVNode("div", {
+	          "style": descStyle.value,
+	          "innerHTML": props.desc
+	        }, null) : slots.desc && vue.createVNode("div", {
+	          "style": descStyle.value
+	        }, [slots.desc?.()])]), props.closable && vue.createVNode("div", {
+	          "class": "vc-alert__close",
+	          "onClick": handleClose
+	        }, [slots.close ? slots.close() : vue.createVNode(Icon, {
+	          "type": "close"
+	        }, null)])])])]
+	      });
+	    };
 	  }
-	  return result;
-	}
+	});
 
-	/**
-	 * Checks if `value` is classified as an `Array` object.
-	 *
-	 * @static
-	 * @memberOf _
-	 * @since 0.1.0
-	 * @category Lang
-	 * @param {*} value The value to check.
-	 * @returns {boolean} Returns `true` if `value` is an array, else `false`.
-	 * @example
-	 *
-	 * _.isArray([1, 2, 3]);
-	 * // => true
-	 *
-	 * _.isArray(document.body.children);
-	 * // => false
-	 *
-	 * _.isArray('abc');
-	 * // => false
-	 *
-	 * _.isArray(_.noop);
-	 * // => false
+	const MAlert = Alert;
+
+	const props$1c = {
+	  tag: {
+	    type: String,
+	    default: "div"
+	  }
+	};
+
+	/** @jsxImportSource vue */
+
+	const COMPONENT_NAME$1n = 'vc-artboard';
+	const Artboard = /* @__PURE__ */ vue.defineComponent({
+	  name: COMPONENT_NAME$1n,
+	  props: props$1c,
+	  setup(props, {
+	    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
+	  }
+	};
+
+	/** @jsxImportSource vue */
+
+	const COMPONENT_NAME$1m = 'vc-spin';
+	const Spin = /* @__PURE__ */ vue.defineComponent({
+	  name: COMPONENT_NAME$1m,
+	  props: props$1b,
+	  setup(props, {
+	    slots
+	  }) {
+	    return () => {
+	      return vue.createVNode("div", {
+	        "class": "vc-spin"
+	      }, [vue.createVNode("span", {
+	        "style": {
+	          fontSize: `${props.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": props.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": 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?.()]);
+	    };
+	  }
+	});
+
+	/** Detect free variable `global` from Node.js. */
+	var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
+
+	/** Detect free variable `self`. */
+	var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+	/** Used as a reference to the global object. */
+	var root = freeGlobal || freeSelf || Function('return this')();
+
+	/** Built-in value references. */
+	var Symbol$1 = root.Symbol;
+
+	/** Used for built-in method references. */
+	var objectProto$b = Object.prototype;
+
+	/** Used to check objects for own properties. */
+	var hasOwnProperty$8 = objectProto$b.hasOwnProperty;
+
+	/**
+	 * Used to resolve the
+	 * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+	 * of values.
 	 */
-	var isArray = Array.isArray;
+	var nativeObjectToString$1 = objectProto$b.toString;
 
-	/** Used to convert symbols to primitives and strings. */
-	var symbolProto$1 = Symbol$1 ? Symbol$1.prototype : undefined,
-	    symbolToString = symbolProto$1 ? symbolProto$1.toString : undefined;
+	/** Built-in value references. */
+	var symToStringTag$1 = Symbol$1 ? Symbol$1.toStringTag : undefined;
 
 	/**
-	 * The base implementation of `_.toString` which doesn't convert nullish
-	 * values to empty strings.
+	 * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
 	 *
 	 * @private
-	 * @param {*} value The value to process.
-	 * @returns {string} Returns the string.
+	 * @param {*} value The value to query.
+	 * @returns {string} Returns the raw `toStringTag`.
 	 */
-	function baseToString(value) {
-	  // Exit early for strings to avoid a performance hit in some environments.
-	  if (typeof value == 'string') {
-	    return value;
-	  }
-	  if (isArray(value)) {
-	    // Recursively convert values (susceptible to call stack limits).
-	    return arrayMap(value, baseToString) + '';
-	  }
-	  if (isSymbol(value)) {
-	    return symbolToString ? symbolToString.call(value) : '';
+	function getRawTag(value) {
+	  var isOwn = hasOwnProperty$8.call(value, symToStringTag$1),
+	      tag = value[symToStringTag$1];
+
+	  try {
+	    value[symToStringTag$1] = undefined;
+	    var unmasked = true;
+	  } catch (e) {}
+
+	  var result = nativeObjectToString$1.call(value);
+	  if (unmasked) {
+	    if (isOwn) {
+	      value[symToStringTag$1] = tag;
+	    } else {
+	      delete value[symToStringTag$1];
+	    }
 	  }
-	  var result = (value + '');
-	  return (result == '0' && (1 / value) == -Infinity) ? '-0' : result;
+	  return result;
 	}
 
-	/** Used to match a single whitespace character. */
-	var reWhitespace = /\s/;
+	/** Used for built-in method references. */
+	var objectProto$a = Object.prototype;
 
 	/**
-	 * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
-	 * character of `string`.
+	 * Used to resolve the
+	 * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+	 * of values.
+	 */
+	var nativeObjectToString = objectProto$a.toString;
+
+	/**
+	 * Converts `value` to a string using `Object.prototype.toString`.
 	 *
 	 * @private
-	 * @param {string} string The string to inspect.
-	 * @returns {number} Returns the index of the last non-whitespace character.
+	 * @param {*} value The value to convert.
+	 * @returns {string} Returns the converted string.
 	 */
-	function trimmedEndIndex(string) {
-	  var index = string.length;
-
-	  while (index-- && reWhitespace.test(string.charAt(index))) {}
-	  return index;
+	function objectToString(value) {
+	  return nativeObjectToString.call(value);
 	}
 
-	/** Used to match leading whitespace. */
-	var reTrimStart = /^\s+/;
+	/** `Object#toString` result references. */
+	var nullTag = '[object Null]',
+	    undefinedTag = '[object Undefined]';
+
+	/** Built-in value references. */
+	var symToStringTag = Symbol$1 ? Symbol$1.toStringTag : undefined;
 
 	/**
-	 * The base implementation of `_.trim`.
+	 * The base implementation of `getTag` without fallbacks for buggy environments.
 	 *
 	 * @private
-	 * @param {string} string The string to trim.
-	 * @returns {string} Returns the trimmed string.
+	 * @param {*} value The value to query.
+	 * @returns {string} Returns the `toStringTag`.
 	 */
-	function baseTrim(string) {
-	  return string
-	    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
-	    : string;
+	function baseGetTag(value) {
+	  if (value == null) {
+	    return value === undefined ? undefinedTag : nullTag;
+	  }
+	  return (symToStringTag && symToStringTag in Object(value))
+	    ? getRawTag(value)
+	    : objectToString(value);
 	}
 
 	/**
-	 * Checks if `value` is the
-	 * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
-	 * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+	 * Checks if `value` is object-like. A value is object-like if it's not `null`
+	 * and has a `typeof` result of "object".
 	 *
 	 * @static
 	 * @memberOf _
-	 * @since 0.1.0
+	 * @since 4.0.0
 	 * @category Lang
 	 * @param {*} value The value to check.
-	 * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+	 * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
 	 * @example
 	 *
-	 * _.isObject({});
+	 * _.isObjectLike({});
 	 * // => true
 	 *
-	 * _.isObject([1, 2, 3]);
+	 * _.isObjectLike([1, 2, 3]);
 	 * // => true
 	 *
-	 * _.isObject(_.noop);
-	 * // => true
+	 * _.isObjectLike(_.noop);
+	 * // => false
 	 *
-	 * _.isObject(null);
+	 * _.isObjectLike(null);
 	 * // => false
 	 */
-	function isObject(value) {
-	  var type = typeof value;
-	  return value != null && (type == 'object' || type == 'function');
+	function isObjectLike(value) {
+	  return value != null && typeof value == 'object';
 	}
 
-	/** Used as references for various `Number` constants. */
-	var NAN = 0 / 0;
-
-	/** Used to detect bad signed hexadecimal string values. */
-	var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
-
-	/** Used to detect binary string values. */
-	var reIsBinary = /^0b[01]+$/i;
-
-	/** Used to detect octal string values. */
-	var reIsOctal = /^0o[0-7]+$/i;
-
-	/** Built-in method references without a dependency on `root`. */
-	var freeParseInt = parseInt;
+	/** `Object#toString` result references. */
+	var symbolTag$2 = '[object Symbol]';
 
 	/**
-	 * Converts `value` to a number.
+	 * Checks if `value` is classified as a `Symbol` primitive or object.
 	 *
 	 * @static
 	 * @memberOf _
 	 * @since 4.0.0
 	 * @category Lang
-	 * @param {*} value The value to process.
-	 * @returns {number} Returns the number.
+	 * @param {*} value The value to check.
+	 * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
 	 * @example
 	 *
-	 * _.toNumber(3.2);
-	 * // => 3.2
-	 *
-	 * _.toNumber(Number.MIN_VALUE);
-	 * // => 5e-324
+	 * _.isSymbol(Symbol.iterator);
+	 * // => true
+	 *
+	 * _.isSymbol('abc');
+	 * // => false
+	 */
+	function isSymbol(value) {
+	  return typeof value == 'symbol' ||
+	    (isObjectLike(value) && baseGetTag(value) == symbolTag$2);
+	}
+
+	/**
+	 * A specialized version of `_.map` for arrays without support for iteratee
+	 * shorthands.
+	 *
+	 * @private
+	 * @param {Array} [array] The array to iterate over.
+	 * @param {Function} iteratee The function invoked per iteration.
+	 * @returns {Array} Returns the new mapped array.
+	 */
+	function arrayMap(array, iteratee) {
+	  var index = -1,
+	      length = array == null ? 0 : array.length,
+	      result = Array(length);
+
+	  while (++index < length) {
+	    result[index] = iteratee(array[index], index, array);
+	  }
+	  return result;
+	}
+
+	/**
+	 * Checks if `value` is classified as an `Array` object.
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 0.1.0
+	 * @category Lang
+	 * @param {*} value The value to check.
+	 * @returns {boolean} Returns `true` if `value` is an array, else `false`.
+	 * @example
+	 *
+	 * _.isArray([1, 2, 3]);
+	 * // => true
+	 *
+	 * _.isArray(document.body.children);
+	 * // => false
+	 *
+	 * _.isArray('abc');
+	 * // => false
+	 *
+	 * _.isArray(_.noop);
+	 * // => false
+	 */
+	var isArray = Array.isArray;
+
+	/** Used to convert symbols to primitives and strings. */
+	var symbolProto$1 = Symbol$1 ? Symbol$1.prototype : undefined,
+	    symbolToString = symbolProto$1 ? symbolProto$1.toString : undefined;
+
+	/**
+	 * The base implementation of `_.toString` which doesn't convert nullish
+	 * values to empty strings.
+	 *
+	 * @private
+	 * @param {*} value The value to process.
+	 * @returns {string} Returns the string.
+	 */
+	function baseToString(value) {
+	  // Exit early for strings to avoid a performance hit in some environments.
+	  if (typeof value == 'string') {
+	    return value;
+	  }
+	  if (isArray(value)) {
+	    // Recursively convert values (susceptible to call stack limits).
+	    return arrayMap(value, baseToString) + '';
+	  }
+	  if (isSymbol(value)) {
+	    return symbolToString ? symbolToString.call(value) : '';
+	  }
+	  var result = (value + '');
+	  return (result == '0' && (1 / value) == -Infinity) ? '-0' : result;
+	}
+
+	/** Used to match a single whitespace character. */
+	var reWhitespace = /\s/;
+
+	/**
+	 * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
+	 * character of `string`.
+	 *
+	 * @private
+	 * @param {string} string The string to inspect.
+	 * @returns {number} Returns the index of the last non-whitespace character.
+	 */
+	function trimmedEndIndex(string) {
+	  var index = string.length;
+
+	  while (index-- && reWhitespace.test(string.charAt(index))) {}
+	  return index;
+	}
+
+	/** Used to match leading whitespace. */
+	var reTrimStart = /^\s+/;
+
+	/**
+	 * The base implementation of `_.trim`.
+	 *
+	 * @private
+	 * @param {string} string The string to trim.
+	 * @returns {string} Returns the trimmed string.
+	 */
+	function baseTrim(string) {
+	  return string
+	    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
+	    : string;
+	}
+
+	/**
+	 * Checks if `value` is the
+	 * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+	 * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 0.1.0
+	 * @category Lang
+	 * @param {*} value The value to check.
+	 * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+	 * @example
+	 *
+	 * _.isObject({});
+	 * // => true
+	 *
+	 * _.isObject([1, 2, 3]);
+	 * // => true
+	 *
+	 * _.isObject(_.noop);
+	 * // => true
+	 *
+	 * _.isObject(null);
+	 * // => false
+	 */
+	function isObject(value) {
+	  var type = typeof value;
+	  return value != null && (type == 'object' || type == 'function');
+	}
+
+	/** Used as references for various `Number` constants. */
+	var NAN = 0 / 0;
+
+	/** Used to detect bad signed hexadecimal string values. */
+	var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+	/** Used to detect binary string values. */
+	var reIsBinary = /^0b[01]+$/i;
+
+	/** Used to detect octal string values. */
+	var reIsOctal = /^0o[0-7]+$/i;
+
+	/** Built-in method references without a dependency on `root`. */
+	var freeParseInt = parseInt;
+
+	/**
+	 * Converts `value` to a number.
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 4.0.0
+	 * @category Lang
+	 * @param {*} value The value to process.
+	 * @returns {number} Returns the number.
+	 * @example
+	 *
+	 * _.toNumber(3.2);
+	 * // => 3.2
+	 *
+	 * _.toNumber(Number.MIN_VALUE);
+	 * // => 5e-324
 	 *
 	 * _.toNumber(Infinity);
 	 * // => Infinity
@@ -3769,7 +4344,7 @@ var VcComponents = (function (exports, vue) {
 	  });
 	}
 
-	const props$1b = {
+	const props$1a = {
 	  wait: {
 	    type: Number,
 	    default: 250
@@ -3785,10 +4360,10 @@ var VcComponents = (function (exports, vue) {
 	  exclude: RegExp
 	};
 
-	const COMPONENT_NAME$1r = "vc-debounce";
+	const COMPONENT_NAME$1l = "vc-debounce";
 	const Debounce = vue.defineComponent({
-	  name: COMPONENT_NAME$1r,
-	  props: props$1b,
+	  name: COMPONENT_NAME$1l,
+	  props: props$1a,
 	  /**
 	   * 不声明emits使得事件被透传放入attrs中, 这样可以让所有的事件透传
 	   * 如事件onClick
@@ -3829,7 +4404,7 @@ var VcComponents = (function (exports, vue) {
 	  }
 	});
 
-	const props$1a = {
+	const props$19 = {
 	  tag: {
 	    type: String,
 	    default: "button"
@@ -3859,11 +4434,11 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1q = 'vc-button';
+	const COMPONENT_NAME$1k = 'vc-button';
 	const Button = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1q,
+	  name: COMPONENT_NAME$1k,
 	  emits: ['click'],
-	  props: props$1a,
+	  props: props$19,
 	  setup(props, {
 	    slots
 	  }) {
@@ -3920,7 +4495,7 @@ var VcComponents = (function (exports, vue) {
 	  }
 	});
 
-	const props$19 = {
+	const props$18 = {
 	  vertical: {
 	    type: Boolean,
 	    default: false
@@ -3941,10 +4516,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	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(props, {
 	    slots
 	  }) {
@@ -3968,7 +4543,7 @@ var VcComponents = (function (exports, vue) {
 	const MButton = Button;
 	const MButtonGroup = ButtonGroup;
 
-	const props$18 = {
+	const props$17 = {
 	  tag: {
 	    type: String,
 	    default: "div"
@@ -3977,10 +4552,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	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(props, {
 	    slots
 	  }) {
@@ -3994,33 +4569,59 @@ var VcComponents = (function (exports, vue) {
 
 	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
 	  }
 	};
 
 	/** @jsxImportSource vue */
 
-	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(props, {
 	    slots
 	  }) {
 	    return () => {
 	      return vue.createVNode("div", {
-	        "class": "vc-card"
-	      }, [slots?.default?.()]);
+	        "class": [{
+	          'is-border': props.border,
+	          'is-shadow': props.shadow
+	        }, 'vc-card']
+	      }, [(props.title || slots.title) && vue.createVNode("div", {
+	        "class": "vc-card__header"
+	      }, [slots.title ? slots.title?.() : props.title && vue.createVNode("p", null, [props.icon && vue.createVNode(Icon, {
+	        "type": props.icon
+	      }, null), vue.createVNode("span", null, [props.title])])]), slots.extra && vue.createVNode("div", {
+	        "class": "vc-card__extra"
+	      }, [slots.extra?.()]), vue.createVNode("div", {
+	        "style": `padding: ${props.padding}px`,
+	        "class": "vc-card__body"
+	      }, [slots.default?.()])]);
 	    };
 	  }
 	});
 
 	const MCard = Card;
 
-	const props$16 = {
+	const props$15 = {
 	  tag: {
 	    type: String,
 	    default: "div"
@@ -4029,10 +4630,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	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(props, {
 	    slots
 	  }) {
@@ -4046,7 +4647,7 @@ var VcComponents = (function (exports, vue) {
 
 	const MCarousel = Carousel;
 
-	const props$15 = {
+	const props$14 = {
 	  tag: {
 	    type: String,
 	    default: "div"
@@ -4055,10 +4656,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	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(props, {
 	    slots
 	  }) {
@@ -4072,7 +4673,7 @@ var VcComponents = (function (exports, vue) {
 
 	const MCascader = Cascader;
 
-	const props$14 = {
+	const props$13 = {
 	  tag: {
 	    type: String,
 	    default: "div"
@@ -4081,10 +4682,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	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(props, {
 	    slots
 	  }) {
@@ -4098,7 +4699,7 @@ var VcComponents = (function (exports, vue) {
 
 	const MChart = Chart;
 
-	const props$13 = {
+	const props$12 = {
 	  tag: {
 	    type: String,
 	    default: "div"
@@ -4107,10 +4708,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	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(props, {
 	    slots
 	  }) {
@@ -4124,7 +4725,7 @@ var VcComponents = (function (exports, vue) {
 
 	const MCheckbox = Checkbox;
 
-	const props$12 = {
+	const props$11 = {
 	  tag: {
 	    type: String,
 	    default: "div"
@@ -4133,10 +4734,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	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(props, {
 	    slots
 	  }) {
@@ -4150,7 +4751,7 @@ var VcComponents = (function (exports, vue) {
 
 	const MClipboard = Clipboard;
 
-	const props$11 = {
+	const props$10 = {
 	  tag: {
 	    type: String,
 	    default: "div"
@@ -4159,10 +4760,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	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(props, {
 	    slots
 	  }) {
@@ -4176,7 +4777,7 @@ var VcComponents = (function (exports, vue) {
 
 	const MCollapse = Collapse;
 
-	const props$10 = {
+	const props$$ = {
 	  tag: {
 	    type: String,
 	    default: "div"
@@ -4185,10 +4786,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	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(props, {
 	    slots
 	  }) {
@@ -4202,7 +4803,7 @@ var VcComponents = (function (exports, vue) {
 
 	const MColorPicker = ColorPicker;
 
-	const props$$ = {
+	const props$_ = {
 	  tag: {
 	    type: String,
 	    default: "div"
@@ -4211,10 +4812,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	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(props, {
 	    slots
 	  }) {
@@ -4228,17 +4829,17 @@ var VcComponents = (function (exports, vue) {
 
 	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(props, context) {
 	    return () => vue.h(() => {
 	      return props.render(context.attrs, context);
@@ -4248,7 +4849,7 @@ var VcComponents = (function (exports, vue) {
 
 	const MCustomer = Customer;
 
-	const props$Z = {
+	const props$Y = {
 	  tag: {
 	    type: String,
 	    default: "div"
@@ -4257,10 +4858,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	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(props, {
 	    slots
 	  }) {
@@ -4274,7 +4875,7 @@ var VcComponents = (function (exports, vue) {
 
 	const MDatePicker = DatePicker;
 
-	const props$Y = {
+	const props$X = {
 	  tag: {
 	    type: String,
 	    default: "div"
@@ -4283,10 +4884,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	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(props, {
 	    slots
 	  }) {
@@ -4300,7 +4901,7 @@ var VcComponents = (function (exports, vue) {
 
 	const MDivider = Divider;
 
-	const props$X = {
+	const props$W = {
 	  tag: {
 	    type: String,
 	    default: "div"
@@ -4309,10 +4910,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	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(props, {
 	    slots
 	  }) {
@@ -4326,7 +4927,7 @@ var VcComponents = (function (exports, vue) {
 
 	const MDrawer = Drawer;
 
-	const props$W = {
+	const props$V = {
 	  tag: {
 	    type: String,
 	    default: "div"
@@ -4335,10 +4936,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	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(props, {
 	    slots
 	  }) {
@@ -4352,7 +4953,7 @@ var VcComponents = (function (exports, vue) {
 
 	const MDropdown = Dropdown;
 
-	const props$V = {
+	const props$U = {
 	  tag: {
 	    type: String,
 	    default: "div"
@@ -4361,10 +4962,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	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(props, {
 	    slots
 	  }) {
@@ -4378,7 +4979,7 @@ var VcComponents = (function (exports, vue) {
 
 	const MEditor = Editor;
 
-	const props$U = {
+	const props$T = {
 	  tag: {
 	    type: String,
 	    default: "div"
@@ -4387,10 +4988,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	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(props, {
 	    slots
 	  }) {
@@ -4404,7 +5005,7 @@ var VcComponents = (function (exports, vue) {
 
 	const MExpand = Expand;
 
-	const props$T = {
+	const props$S = {
 	  tag: {
 	    type: String,
 	    default: "form"
@@ -4615,10 +5216,10 @@ var VcComponents = (function (exports, vue) {
 	  });
 	};
 
-	const COMPONENT_NAME$17 = "vc-form";
+	const COMPONENT_NAME$11 = "vc-form";
 	const Form = vue.defineComponent({
-	  name: COMPONENT_NAME$17,
-	  props: props$T,
+	  name: COMPONENT_NAME$11,
+	  props: props$S,
 	  setup(props, { slots, expose }) {
 	    useForm(expose);
 	    return () => {
@@ -4634,7 +5235,7 @@ var VcComponents = (function (exports, vue) {
 	  }
 	});
 
-	const props$S = {
+	const props$R = {
 	  label: {
 	    type: String,
 	    default: ""
@@ -4944,602 +5545,130 @@ var VcComponents = (function (exports, vue) {
 	      }
 	    }
 	    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 = vue.reactive([]);
-	  vue.provide("form-item", {
-	    fields,
-	    blur: handleFieldBlur,
-	    change: handleFieldChange,
-	    message: validateMessage,
-	    add: (field) => {
-	      field && fields.push(field);
-	    },
-	    remove: (field) => {
-	      field && fields.splice(fields.indexOf(field), 1);
-	    }
-	  });
-	  vue.onMounted(() => {
-	    if (props.prop) {
-	      form.add?.(instance);
-	      initialValue = cloneDeep(fieldValue.value);
-	    }
-	    formItem.add?.(instance);
-	  });
-	  vue.onBeforeUnmount(() => {
-	    form.remove?.(instance);
-	    formItem.remove?.(instance);
-	  });
-	  vue.watch(
-	    () => props.rules,
-	    () => {
-	      props.resetByRulesChanged && reset();
-	    }
-	  );
-	  vue.watch(
-	    () => formItem.fields?.length,
-	    async (v) => {
-	      if (!isNest.value || !v) return isNestLast.value = false;
-	      const fields$ = [...vue.toRaw(formItem.fields)];
-	      const positions = await Promise.all(fields$.map((item) => item.exposed.getPosition()));
-	      const sortFields = fields$.toSorted((a, b) => {
-	        const aIndex = fields$.findIndex((i) => i === a);
-	        const bIndex = fields$.findIndex((i) => i === b);
-	        const aPosition = positions[aIndex];
-	        const bPosition = positions[bIndex];
-	        if (aPosition.top != bPosition.top) return aPosition.top - bPosition.top;
-	        return aPosition.left - bPosition.left;
-	      });
-	      isNestLast.value = sortFields[sortFields.length - 1] === instance;
-	    }
-	  );
-	  expose({
-	    validate,
-	    reset,
-	    getPosition
-	  });
-	  return {
-	    isNest,
-	    isStyleless,
-	    isNestLast,
-	    validateMessage,
-	    classes,
-	    labelStyle,
-	    contentStyle,
-	    showError,
-	    labelPosition
-	  };
-	};
-
-	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版本默认值无
-	   */
-	  tag: {
-	    type: String,
-	    default: void 0
-	  },
-	  /**
-	   *  变换的初始位置, 可以用style代替, 更短~~
-	   */
-	  origin: {
-	    type: String,
-	    default: ""
-	  },
-	  /**
-	   * 在转换期间应用的元素样式。这些样式应用于@beforeEnter和@beforeLeave钩子
-	   * inheritAttrs必须是false
-	   */
-	  style: {
-	    type: Object,
-	    default: () => {
-	      return {
-	        animationFillMode: "both",
-	        animationTimingFunction: "ease-out"
-	      };
-	    }
-	  },
-	  prefix: {
-	    type: String,
-	    default: "vc-transition"
-	  },
-	  mode: {
-	    type: String,
-	    default: "none"
-	  }
-	};
-
-	const trim = (str) => str.trim().replace(/\s+/g, " ");
-	const useTransition = () => {
-	  const instance = vue.getCurrentInstance();
-	  const attrs = instance.attrs;
-	  const props = instance.props;
-	  const Wrapper = vue.computed(() => {
-	    return props.group ? vue.TransitionGroup : vue.Transition;
-	  });
-	  const classes = vue.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 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
-	    }
-	  };
-	};
-
-	const COMPONENT_NAME$16 = "vc-transition";
-	const Transition = vue.defineComponent({
-	  name: COMPONENT_NAME$16,
-	  props: props$R,
-	  // 当不声明emits的情况下，事件存在于attrs中
-	  inheritAttrs: false,
-	  setup(props, { slots, attrs }) {
-	    const { Wrapper, listeners, classes } = useTransition();
-	    return () => {
-	      return vue.h(
-	        Wrapper.value,
-	        {
-	          ...attrs,
-	          ...listeners,
-	          ...classes.value,
-	          tag: props.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(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
-	    };
-	    return () => {
-	      return vue.h(
-	        Wrapper.value,
-	        {
-	          ...attrs,
-	          ...listeners,
-	          tag: props.tag,
-	          moveClass: props.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 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 vue.h(
-	        Wrapper.value,
-	        {
-	          ...attrs,
-	          ...listeners,
-	          ...classes.value,
-	          tag: props.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
-	      })
-	    },
-	    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 vue.h(
-	        Wrapper.value,
-	        {
-	          ...attrs,
-	          ...listeners,
-	          ...classes.value,
-	          tag: props.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"
+	    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 vue.h(
-	        Wrapper.value,
-	        {
-	          ...attrs,
-	          ...listeners,
-	          ...classes.value,
-	          tag: props.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
-	      })
+	    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 = 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-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 vue.h(
-	        Wrapper.value,
-	        {
-	          ...attrs,
-	          ...listeners,
-	          ...classes.value,
-	          tag: props.tag
-	        },
-	        slots
-	      );
-	    };
-	  }
-	});
+	  });
+	  vue.onMounted(() => {
+	    if (props.prop) {
+	      form.add?.(instance);
+	      initialValue = cloneDeep(fieldValue.value);
+	    }
+	    formItem.add?.(instance);
+	  });
+	  vue.onBeforeUnmount(() => {
+	    form.remove?.(instance);
+	    formItem.remove?.(instance);
+	  });
+	  vue.watch(
+	    () => props.rules,
+	    () => {
+	      props.resetByRulesChanged && reset();
+	    }
+	  );
+	  vue.watch(
+	    () => formItem.fields?.length,
+	    async (v) => {
+	      if (!isNest.value || !v) return isNestLast.value = false;
+	      const fields$ = [...vue.toRaw(formItem.fields)];
+	      const positions = await Promise.all(fields$.map((item) => item.exposed.getPosition()));
+	      const sortFields = fields$.toSorted((a, b) => {
+	        const aIndex = fields$.findIndex((i) => i === a);
+	        const bIndex = fields$.findIndex((i) => i === b);
+	        const aPosition = positions[aIndex];
+	        const bPosition = positions[bIndex];
+	        if (aPosition.top != bPosition.top) return aPosition.top - bPosition.top;
+	        return aPosition.left - bPosition.left;
+	      });
+	      isNestLast.value = sortFields[sortFields.length - 1] === instance;
+	    }
+	  );
+	  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__ */ vue.defineComponent({
 	  name: COMPONENT_NAME$10,
-	  props: props$S,
+	  props: props$R,
 	  setup(props, {
 	    slots,
 	    expose
@@ -5592,7 +5721,7 @@ var VcComponents = (function (exports, vue) {
 	});
 
 	const props$Q = {
-	  ...props$T,
+	  ...props$S,
 	  showToast: {
 	    type: Boolean,
 	    default: false
@@ -6259,7 +6388,7 @@ var VcComponents = (function (exports, vue) {
 	});
 
 	const props$N = {
-	  ...props$S,
+	  ...props$R,
 	  indent: {
 	    type: Number,
 	    default: 12
@@ -9133,7 +9262,8 @@ var VcComponents = (function (exports, vue) {
 	  emits: ['portal-fulfilled', 'close'],
 	  setup(props, {
 	    emit,
-	    slots
+	    slots,
+	    expose
 	  }) {
 	    const {
 	      getPopupStyle,
@@ -9337,6 +9467,9 @@ var VcComponents = (function (exports, vue) {
 	      Resize.off(vnode.el, handleWrapperResize);
 	      props.alone && props.hover && removeEvents();
 	    });
+	    expose({
+	      isActive
+	    });
 	    return () => {
 	      let _slot;
 	      return vue.createVNode(TransitionScale, {