@deot/vc-components 1.0.62 → 1.0.64

package/dist/index.iife.js

@@ -74,7 +74,7 @@ var VcComponents = (function (exports, vue) {
 	}
 	const VcInstance = new Instance();
 
-	const props$1u = {
+	const props$1v = {
 	  tag: {
 	    type: String,
 	    default: "div"
@@ -83,10 +83,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$2b = 'vc-action-sheet';
+	const COMPONENT_NAME$2g = 'vc-action-sheet';
 	const ActionSheet = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$2b,
-	  props: props$1u,
+	  name: COMPONENT_NAME$2g,
+	  props: props$1v,
 	  setup(props, {
 	    slots
 	  }) {
@@ -100,7 +100,7 @@ var VcComponents = (function (exports, vue) {
 
 	const MActionSheet = ActionSheet;
 
-	const props$1t = {
+	const props$1u = {
 	  modelValue: {
 	    type: Boolean,
 	    default: false
@@ -378,11 +378,11 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$2a = 'vc-affix';
+	const COMPONENT_NAME$2f = 'vc-affix';
 	const Affix = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$2a,
+	  name: COMPONENT_NAME$2f,
 	  emits: ['update:modelValue'],
-	  props: props$1t,
+	  props: props$1u,
 	  setup(props, {
 	    slots,
 	    expose,
@@ -548,7 +548,7 @@ var VcComponents = (function (exports, vue) {
 
 	const MAffix = Affix;
 
-	const props$1s = {
+	const props$1t = {
 	  modelValue: {
 	    type: Boolean,
 	    default: true
@@ -575,7 +575,7 @@ var VcComponents = (function (exports, vue) {
 	  }
 	};
 
-	const props$1r = {
+	const props$1s = {
 	  type: String,
 	  inherit: {
 	    type: Boolean,
@@ -712,10 +712,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$29 = 'vc-icon';
+	const COMPONENT_NAME$2e = 'vc-icon';
 	const Icon = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$29,
-	  props: props$1r,
+	  name: COMPONENT_NAME$2e,
+	  props: props$1s,
 	  setup(props) {
 	    const viewBox = vue.ref('0 0 1024 1024');
 	    const path = vue.ref([]);
@@ -748,7 +748,7 @@ var VcComponents = (function (exports, vue) {
 	  }
 	});
 
-	const props$1q = {
+	const props$1r = {
 	  /**
 	   * 进入/离开持续时间
 	   * {enter: 300, leave: 300}
@@ -913,10 +913,10 @@ var VcComponents = (function (exports, vue) {
 	  };
 	};
 
-	const COMPONENT_NAME$28 = "vc-transition";
+	const COMPONENT_NAME$2d = "vc-transition";
 	const Transition = vue.defineComponent({
-	  name: COMPONENT_NAME$28,
-	  props: props$1q,
+	  name: COMPONENT_NAME$2d,
+	  props: props$1r,
 	  // 当不声明emits的情况下，事件存在于attrs中
 	  inheritAttrs: false,
 	  setup(props, { slots, attrs }) {
@@ -936,10 +936,10 @@ var VcComponents = (function (exports, vue) {
 	  }
 	});
 
-	const COMPONENT_NAME$27 = "vc-transition-collapse";
+	const COMPONENT_NAME$2c = "vc-transition-collapse";
 	const TransitionCollapse = vue.defineComponent({
-	  name: COMPONENT_NAME$27,
-	  props: props$1q,
+	  name: COMPONENT_NAME$2c,
+	  props: props$1r,
 	  // 当不声明emits的情况下，事件存在于attrs中
 	  inheritAttrs: false,
 	  setup(props, { slots, attrs: _attrs }) {
@@ -1053,11 +1053,11 @@ var VcComponents = (function (exports, vue) {
 	  }
 	});
 
-	const COMPONENT_NAME$26 = "vc-transition-fade";
+	const COMPONENT_NAME$2b = "vc-transition-fade";
 	const TransitionFade = vue.defineComponent({
-	  name: COMPONENT_NAME$26,
+	  name: COMPONENT_NAME$2b,
 	  props: {
-	    ...props$1q,
+	    ...props$1r,
 	    // inheritAttrs必须是false
 	    style: {
 	      type: Object,
@@ -1090,11 +1090,11 @@ var VcComponents = (function (exports, vue) {
 	  }
 	});
 
-	const COMPONENT_NAME$25 = "vc-transition-scale";
+	const COMPONENT_NAME$2a = "vc-transition-scale";
 	const TransitionScale = vue.defineComponent({
-	  name: COMPONENT_NAME$25,
+	  name: COMPONENT_NAME$2a,
 	  props: {
-	    ...props$1q,
+	    ...props$1r,
 	    mode: {
 	      type: String,
 	      default: "both",
@@ -1132,11 +1132,11 @@ var VcComponents = (function (exports, vue) {
 	  }
 	});
 
-	const COMPONENT_NAME$24 = "vc-transition-slide";
+	const COMPONENT_NAME$29 = "vc-transition-slide";
 	const TransitionSlide = vue.defineComponent({
-	  name: COMPONENT_NAME$24,
+	  name: COMPONENT_NAME$29,
 	  props: {
-	    ...props$1q,
+	    ...props$1r,
 	    mode: {
 	      type: String,
 	      default: "left",
@@ -1174,11 +1174,11 @@ var VcComponents = (function (exports, vue) {
 	  }
 	});
 
-	const COMPONENT_NAME$23 = "vc-transition-zoom";
+	const COMPONENT_NAME$28 = "vc-transition-zoom";
 	const TransitionZoom = vue.defineComponent({
-	  name: COMPONENT_NAME$23,
+	  name: COMPONENT_NAME$28,
 	  props: {
-	    ...props$1q,
+	    ...props$1r,
 	    mode: {
 	      type: String,
 	      default: "x",
@@ -1218,7 +1218,7 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$22 = 'vc-alert';
+	const COMPONENT_NAME$27 = 'vc-alert';
 
 	// [color, borderColor, backgroundColor], -> CSS
 	const THEME_MAP = {
@@ -1228,8 +1228,8 @@ var VcComponents = (function (exports, vue) {
 	  warning: ['#ffbf00', '#ffe58f', '#fffbe6']
 	};
 	const Alert = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$22,
-	  props: props$1s,
+	  name: COMPONENT_NAME$27,
+	  props: props$1t,
 	  setup(props, {
 	    slots,
 	    emit
@@ -1444,7 +1444,7 @@ var VcComponents = (function (exports, vue) {
 	  return flatten$1(value, JSON.parse);
 	};
 
-	const props$1p = {
+	const props$1q = {
 	  // canvas配置参数
 	  options: Object,
 	  width: {
@@ -1460,10 +1460,10 @@ var VcComponents = (function (exports, vue) {
 	/** @jsxImportSource vue */
 
 	const isTouch = typeof document !== 'undefined' && 'ontouchend' in document;
-	const COMPONENT_NAME$21 = 'vc-artboard';
+	const COMPONENT_NAME$26 = 'vc-artboard';
 	const Artboard = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$21,
-	  props: props$1p,
+	  name: COMPONENT_NAME$26,
+	  props: props$1q,
 	  setup(props, {
 	    emit,
 	    expose
@@ -1666,7 +1666,7 @@ var VcComponents = (function (exports, vue) {
 
 	const MArtboard = Artboard;
 
-	const props$1o = {
+	const props$1p = {
 	  size: {
 	    type: Number,
 	    default: 28
@@ -1690,10 +1690,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$20 = 'vc-spin';
+	const COMPONENT_NAME$25 = 'vc-spin';
 	const Spin = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$20,
-	  props: props$1o,
+	  name: COMPONENT_NAME$25,
+	  props: props$1p,
 	  setup(props, {
 	    slots
 	  }) {
@@ -6765,7 +6765,7 @@ var VcComponents = (function (exports, vue) {
 	  });
 	}
 
-	const props$1n = {
+	const props$1o = {
 	  wait: {
 	    type: Number,
 	    default: 250
@@ -6781,10 +6781,10 @@ var VcComponents = (function (exports, vue) {
 	  exclude: RegExp
 	};
 
-	const COMPONENT_NAME$1$ = "vc-debounce";
+	const COMPONENT_NAME$24 = "vc-debounce";
 	const Debounce = vue.defineComponent({
-	  name: COMPONENT_NAME$1$,
-	  props: props$1n,
+	  name: COMPONENT_NAME$24,
+	  props: props$1o,
 	  /**
 	   * 不声明emits使得事件被透传放入attrs中, 这样可以让所有的事件透传
 	   * 如事件onClick
@@ -6824,7 +6824,7 @@ var VcComponents = (function (exports, vue) {
 	  }
 	});
 
-	const props$1m = {
+	const props$1n = {
 	  tag: {
 	    type: String,
 	    default: "button"
@@ -6856,11 +6856,11 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1_ = 'vc-button';
+	const COMPONENT_NAME$23 = 'vc-button';
 	const Button = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1_,
+	  name: COMPONENT_NAME$23,
 	  emits: ['click'],
-	  props: props$1m,
+	  props: props$1n,
 	  setup(props, {
 	    slots
 	  }) {
@@ -6921,7 +6921,7 @@ var VcComponents = (function (exports, vue) {
 	  }
 	});
 
-	const props$1l = {
+	const props$1m = {
 	  vertical: {
 	    type: Boolean,
 	    default: false
@@ -6942,10 +6942,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1Z = 'vc-button-group';
+	const COMPONENT_NAME$22 = 'vc-button-group';
 	const ButtonGroup = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1Z,
-	  props: props$1l,
+	  name: COMPONENT_NAME$22,
+	  props: props$1m,
 	  setup(props, {
 	    slots
 	  }) {
@@ -6969,7 +6969,7 @@ var VcComponents = (function (exports, vue) {
 	const MButton = Button;
 	const MButtonGroup = ButtonGroup;
 
-	const props$1k = {
+	const props$1l = {
 	  tag: {
 	    type: String,
 	    default: "div"
@@ -6978,10 +6978,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1Y = 'vc-calendar';
+	const COMPONENT_NAME$21 = 'vc-calendar';
 	const Calendar$1 = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1Y,
-	  props: props$1k,
+	  name: COMPONENT_NAME$21,
+	  props: props$1l,
 	  setup(props, {
 	    slots
 	  }) {
@@ -6995,7 +6995,7 @@ var VcComponents = (function (exports, vue) {
 
 	const MCalendar = Calendar$1;
 
-	const props$1j = {
+	const props$1k = {
 	  border: {
 	    type: Boolean,
 	    default: true
@@ -7018,10 +7018,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1X = 'vc-card';
+	const COMPONENT_NAME$20 = 'vc-card';
 	const Card = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1X,
-	  props: props$1j,
+	  name: COMPONENT_NAME$20,
+	  props: props$1k,
 	  setup(props, {
 	    slots
 	  }) {
@@ -7047,31 +7047,776 @@ var VcComponents = (function (exports, vue) {
 
 	const MCard = Card;
 
-	const props$1i = {
-	  tag: {
+	class Resize {
+	  el;
+	  static of(el) {
+	    return new Resize(el);
+	  }
+	  /**
+	   * Resize.of(el, fn);
+	   * @param el ~
+	   * @param fn ~
+	   * @returns off
+	   */
+	  static on(el, fn) {
+	    return new Resize(el).on(fn);
+	  }
+	  /**
+	   * 要实现Resize.off(el)，el必须侵入式修改挂上__rz__
+	   * @param el ~
+	   * @param fn ~
+	   * @returns ~
+	   */
+	  static off(el, fn) {
+	    return new Resize(el).off(fn);
+	  }
+	  listeners = [];
+	  ro = null;
+	  constructor(el) {
+	    this.el = el;
+	    let rz = el.__rz__;
+	    if (rz && rz instanceof Resize) {
+	      this.listeners = rz.listeners;
+	      this.ro = rz.ro;
+	    }
+	  }
+	  handleResize = (entries) => {
+	    /* istanbul ignore else -- @preserve */
+	    if (entries.some((i) => i.target === this.el)) {
+	      this.listeners?.forEach((fn) => fn());
+	    }
+	  };
+	  on(fn) {
+	    if (typeof ResizeObserver === "undefined")
+	      return () => {
+	      };
+	    if (!this.listeners.length) {
+	      this.ro = this.ro || new ResizeObserver(this.handleResize);
+	      this.ro.observe(this.el);
+	      this.el.__rz__ = this;
+	    }
+	    this.listeners.push(fn);
+	    return () => this.off(fn);
+	  }
+	  off(fn) {
+	    if (fn) {
+	      this.listeners.splice(this.listeners.indexOf(fn), 1);
+	    } else {
+	      this.listeners = [];
+	    }
+	    if (!this.listeners.length && this.ro) {
+	      this.ro.disconnect();
+	    }
+	  }
+	}
+
+	const useCarousel = (wrapper, content, expose) => {
+	  const instance = vue.getCurrentInstance();
+	  const props = instance.props;
+	  const { emit } = instance;
+	  const items = vue.ref([]);
+	  const activeIndex = vue.ref(-1);
+	  const timer = vue.ref(null);
+	  const offset = vue.ref(0);
+	  const carouselId = vue.ref(getUid("carousel"));
+	  const start = vue.ref();
+	  const startX = vue.ref();
+	  const startY = vue.ref();
+	  const allowTransition = vue.ref(false);
+	  const direction = vue.computed(() => {
+	    return props.vertical ? "vertical" : "horizontal";
+	  });
+	  const hasLabel = vue.computed(() => {
+	    return items.value.some((item) => item.props.label.toString().length > 0);
+	  });
+	  const dotsClasses = vue.computed(() => {
+	    const classes = ["is-" + direction.value];
+	    if (hasLabel.value) {
+	      classes.push("is-labels");
+	    }
+	    if (props.dots === "outside" || props.card) {
+	      classes.push("is-outside");
+	    }
+	    return classes;
+	  });
+	  const resetItems = (oldIndex) => {
+	    items.value.forEach((item, index) => {
+	      item.exposed?.reset?.(index, activeIndex.value, oldIndex);
+	    });
+	  };
+	  const playSlides = () => {
+	    allowTransition.value = true;
+	    if (activeIndex.value < items.value.length - 1) {
+	      activeIndex.value++;
+	    } else if (props.loop) {
+	      activeIndex.value = 0;
+	    }
+	  };
+	  const pauseTimer = () => {
+	    if (timer.value) {
+	      clearInterval(timer.value);
+	      timer.value = null;
+	    }
+	  };
+	  const startTimer = () => {
+	    if (props.t <= 0 || !props.autoplay || timer.value) return;
+	    timer.value = setInterval(playSlides, props.t);
+	  };
+	  const setActiveItem = (index) => {
+	    if (typeof index === "string") {
+	      const filteredItems = items.value.filter((item) => item.props.name === index);
+	      if (filteredItems.length > 0) {
+	        index = items.value.indexOf(filteredItems[0]);
+	      }
+	    }
+	    index = Number(index);
+	    if (isNaN(index) || index !== Math.floor(index)) {
+	      throw new VcError("carousel", "索引必须是整数");
+	    }
+	    const length = items.value.length;
+	    const oldIndex = activeIndex.value;
+	    if (index < 0) {
+	      activeIndex.value = props.loop ? length - 1 : 0;
+	    } else if (index >= length) {
+	      activeIndex.value = props.loop ? 0 : length - 1;
+	    } else {
+	      activeIndex.value = index;
+	    }
+	    if (oldIndex === activeIndex.value) {
+	      resetItems(oldIndex);
+	    }
+	  };
+	  const prev = () => {
+	    setActiveItem(activeIndex.value - 1);
+	  };
+	  const next = () => {
+	    setActiveItem(activeIndex.value + 1);
+	  };
+	  const handleDotClick = (index) => {
+	    activeIndex.value = index;
+	  };
+	  const handleStart = (e) => {
+	    allowTransition.value = true;
+	    if (!props.draggable) return;
+	    pauseTimer();
+	    start.value = true;
+	    startX.value = e.screenX;
+	    startY.value = e.screenY;
+	  };
+	  const handleMove = (e) => {
+	    if (!start.value || !props.draggable) return;
+	    offset.value = !props.vertical ? e.screenX - startX.value : e.screenY - startY.value;
+	    resetItems();
+	  };
+	  const handleEnd = () => {
+	    if (!props.draggable) return;
+	    start.value = false;
+	    startTimer();
+	    const $offset = Math.abs(offset.value);
+	    const $direction = offset.value > 0;
+	    offset.value = 0;
+	    if ($offset > 5) {
+	      $direction && prev();
+	      !$direction && next();
+	    } else {
+	      resetItems();
+	    }
+	  };
+	  vue.watch(
+	    () => items.value,
+	    (v) => {
+	      if (v.length > 0) setActiveItem(props.initialIndex);
+	    }
+	  );
+	  vue.watch(
+	    () => activeIndex.value,
+	    (v, oldV) => {
+	      resetItems(oldV);
+	      emit("change", v, oldV);
+	    }
+	  );
+	  vue.watch(
+	    () => props.autoplay,
+	    (v) => {
+	      v ? startTimer() : pauseTimer();
+	    }
+	  );
+	  vue.watch(
+	    () => props.loop,
+	    () => {
+	      setActiveItem(activeIndex.value);
+	    }
+	  );
+	  vue.watch(
+	    () => props.t,
+	    () => {
+	      pauseTimer();
+	      startTimer();
+	    }
+	  );
+	  vue.onMounted(() => {
+	    vue.nextTick(() => {
+	      if (wrapper.value) Resize.on(wrapper.value, resetItems);
+	      if (props.initialIndex < items.value.length && props.initialIndex >= 0) {
+	        activeIndex.value = props.initialIndex;
+	      }
+	      startTimer();
+	    });
+	  });
+	  vue.onBeforeUnmount(() => {
+	    if (wrapper.value) Resize.off(wrapper.value, resetItems);
+	    pauseTimer();
+	    startTimer();
+	  });
+	  const add = (item) => {
+	    if (!item) return;
+	    vue.nextTick(() => {
+	      if (content.value) {
+	        const index = Array.from(content.value.children).filter((i) => /vcm?-carousel-item/.test(i.className)).indexOf(item.vnode.el);
+	        items.value.splice(index, 0, item);
+	        return;
+	      }
+	      items.value.push(item);
+	    });
+	  };
+	  const remove = (item) => {
+	    if (!item) return;
+	    items.value.splice(items.value.indexOf(item), 1);
+	  };
+	  vue.provide("vc-carousel", {
+	    props,
+	    items,
+	    offset,
+	    allowTransition,
+	    setActiveItem,
+	    wrapper,
+	    content,
+	    add,
+	    remove
+	  });
+	  expose({
+	    setActiveItem,
+	    prev,
+	    next
+	  });
+	  return {
+	    carouselId,
+	    allowTransition,
+	    items,
+	    activeIndex,
+	    offset,
+	    direction,
+	    hasLabel,
+	    dotsClasses,
+	    start,
+	    startX,
+	    startY,
+	    handleStart,
+	    handleMove,
+	    handleEnd,
+	    handleDotClick,
+	    prev,
+	    next,
+	    setActiveItem,
+	    pauseTimer,
+	    startTimer
+	  };
+	};
+
+	const props$1j = {
+	  t: {
+	    type: Number,
+	    default: 3e3
+	  },
+	  card: Boolean,
+	  gutter: {
+	    type: Number,
+	    default: 0
+	  },
+	  height: [String, Number],
+	  initialIndex: {
+	    type: Number,
+	    default: 0
+	  },
+	  trigger: {
 	    type: String,
-	    default: "div"
+	    default: "hover"
+	  },
+	  autoplay: {
+	    type: Boolean,
+	    default: true
+	  },
+	  dots: {
+	    type: [String, Boolean],
+	    default: "bottom"
+	    // bottom/outside | false
+	  },
+	  arrow: {
+	    type: [String, Boolean],
+	    default: "hover"
+	    // hover/always | false
+	  },
+	  loop: {
+	    type: Boolean,
+	    default: true
+	  },
+	  vertical: {
+	    type: Boolean,
+	    default: false
+	  },
+	  draggable: {
+	    type: Boolean,
+	    default: true
 	  }
 	};
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1W = 'vc-carousel';
+	const COMPONENT_NAME$1$ = 'vc-carousel';
 	const Carousel = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1W,
+	  name: COMPONENT_NAME$1$,
+	  props: props$1j,
+	  setup(props, {
+	    slots,
+	    expose
+	  }) {
+	    const isHover = vue.ref(false);
+	    const wrapper = vue.ref(null);
+	    const content = vue.ref(null);
+	    const arrowDisplay = vue.computed(() => {
+	      return props.arrow && !props.vertical;
+	    });
+	    const carousel = useCarousel(wrapper, content, expose);
+	    const itemInStage = (item, index, items) => {
+	      const length = items.length;
+	      const isInStage = item.exposed.isInStage.value;
+	      if (index === length - 1 && isInStage && items[0].exposed.isActive.value || isInStage && items[index + 1] && items[index + 1].exposed.isActive.value) {
+	        return 'left';
+	      } else if (index === 0 && isInStage && items[length - 1].exposed.isActive.value || isInStage && items[index - 1] && items[index - 1].exposed.isActive.value) {
+	        return 'right';
+	      }
+	      return false;
+	    };
+	    const handleButtonEnter = arrow => {
+	      if (props.vertical) return;
+	      carousel.items.value.forEach((item, index, items) => {
+	        if (arrow === itemInStage(item, index, items)) {
+	          item.exposed.isHover.value = true;
+	        }
+	      });
+	    };
+	    const handleButtonLeave = () => {
+	      if (props.vertical) return;
+	      carousel.items.value.forEach(item => {
+	        item.exposed.isHover.value = false;
+	      });
+	    };
+	    const handleDotHover = index => {
+	      if (props.trigger === 'hover' && index !== carousel.activeIndex.value) {
+	        carousel.activeIndex.value = index;
+	      }
+	    };
+	    const handleMouseEnter = () => {
+	      isHover.value = true;
+	      carousel.pauseTimer();
+	    };
+	    const handleMouseLeave = () => {
+	      isHover.value = false;
+	      carousel.startTimer();
+	    };
+	    const throttledArrowClick = throttle$1(carousel.setActiveItem);
+	    const throttledDotHover = throttle$1(handleDotHover);
+	    return () => {
+	      return vue.createVNode("div", {
+	        "ref": wrapper,
+	        "class": ['vc-carousel', `is-${carousel.direction.value}`],
+	        "onMousedown": vue.withModifiers(carousel.handleStart, ['stop', 'prevent']),
+	        "onMousemove": vue.withModifiers(carousel.handleMove, ['stop', 'prevent']),
+	        "onMouseup": vue.withModifiers(carousel.handleEnd, ['stop', 'prevent']),
+	        "onMouseenter": vue.withModifiers(handleMouseEnter, ['stop']),
+	        "onMouseleave": vue.withModifiers(handleMouseLeave, ['stop'])
+	      }, [vue.createVNode("div", {
+	        "ref": content,
+	        "class": "vc-carousel__wrapper",
+	        "style": {
+	          height: props.height ? `${props.height}px` : 'auto'
+	        }
+	      }, [arrowDisplay.value && vue.createVNode(TransitionSlide, {
+	        "mode": "left-part"
+	      }, {
+	        default: () => [vue.withDirectives(vue.createVNode("button", {
+	          "type": "button",
+	          "class": "vc-carousel__arrow is-left-arrow",
+	          "onMouseenter": () => handleButtonEnter('left'),
+	          "onMouseleave": handleButtonLeave,
+	          "onClick": vue.withModifiers(() => throttledArrowClick(carousel.activeIndex.value - 1), ['stop'])
+	        }, [vue.createVNode(Icon, {
+	          "type": "left"
+	        }, null)]), [[vue.vShow, (props.arrow === 'always' || isHover.value) && (props.loop || carousel.activeIndex.value > 0)]])]
+	      }), arrowDisplay.value && vue.createVNode(TransitionSlide, {
+	        "mode": "right-part"
+	      }, {
+	        default: () => [vue.withDirectives(vue.createVNode("button", {
+	          "type": "button",
+	          "class": "vc-carousel__arrow is-right-arrow",
+	          "onMouseenter": () => handleButtonEnter('right'),
+	          "onMouseleave": handleButtonLeave,
+	          "onClick": vue.withModifiers(() => throttledArrowClick(carousel.activeIndex.value + 1), ['stop'])
+	        }, [vue.createVNode(Icon, {
+	          "type": "right"
+	        }, null)]), [[vue.vShow, (props.arrow === 'always' || isHover.value) && (props.loop || carousel.activeIndex.value < carousel.items.value.length - 1)]])]
+	      }), slots.default?.()]), props.dots && vue.createVNode("ul", {
+	        "class": ['vc-carousel__dots', ...carousel.dotsClasses.value]
+	      }, [carousel.items.value.map((item, index) => vue.createVNode("li", {
+	        "key": index,
+	        "class": ['vc-carousel__dot', `is-${carousel.direction.value}`, {
+	          'is-active': index === carousel.activeIndex.value
+	        }],
+	        "onMouseenter": () => throttledDotHover(index),
+	        "onClick": () => carousel.handleDotClick(index)
+	      }, [vue.createVNode("button", {
+	        "class": "vc-carousel__button"
+	      }, [carousel.hasLabel.value && vue.createVNode("span", null, [item.props.label])])]))])]);
+	    };
+	  }
+	});
+
+	const props$1i = {
+	  name: String,
+	  label: {
+	    type: [String, Number],
+	    default: ""
+	  },
+	  // card大小
+	  width: {
+	    type: [Number, String],
+	    default: "70%"
+	  },
+	  // card之间间距, 或者滑动时候的间距
+	  gutter: {
+	    type: Number,
+	    default: 0
+	  },
+	  scale: {
+	    type: Number,
+	    default: 0.83
+	  }
+	};
+
+	const TRANSFORM = prefixStyle("transform").camel;
+	const useCarouselItem = (expose) => {
+	  const instance = vue.getCurrentInstance();
+	  const carousel = vue.inject("vc-carousel", {});
+	  const props = instance.props;
+	  const translate = vue.ref(0);
+	  const currentScale = vue.ref(1);
+	  const isHover = vue.ref(false);
+	  const isActive = vue.ref(false);
+	  const isReady = vue.ref(false);
+	  const isInStage = vue.ref(false);
+	  const isAnimating = vue.ref(false);
+	  const isVertical = vue.computed(() => {
+	    return carousel.props.vertical;
+	  });
+	  const isCard = vue.computed(() => {
+	    return carousel.props.card;
+	  });
+	  const isMove = vue.computed(() => {
+	    return carousel.offset.value !== 0;
+	  });
+	  const itemGutter = vue.computed(() => {
+	    return props.gutter || carousel.props.gutter || 0;
+	  });
+	  const itemStyle = vue.computed(() => {
+	    const translateType = isVertical.value ? "translateY" : "translateX";
+	    if (carousel.props.card) {
+	      return {
+	        [TRANSFORM]: `${translateType}(${translate.value}px) scale(${currentScale.value})`,
+	        width: props.width
+	      };
+	    } else {
+	      return {
+	        [TRANSFORM]: `${translateType}(${translate.value}px) scale(${currentScale.value})`,
+	        width: itemGutter.value ? props.width : "100%"
+	      };
+	    }
+	  });
+	  vue.onBeforeMount(() => {
+	    carousel.add?.(instance);
+	    if (!isCard.value && itemGutter.value && carousel.props.loop) {
+	      throw new VcError("carousel", "slide模式下loop不能为true");
+	    }
+	  });
+	  vue.onBeforeUnmount(() => {
+	    carousel.remove?.(instance);
+	  });
+	  const processIndex = (index, activeIndex, length) => {
+	    if (activeIndex === 0 && index === length - 1) {
+	      return -1;
+	    } else if (activeIndex === length - 1 && index === 0) {
+	      return length;
+	    } else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {
+	      return length + 1;
+	    } else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {
+	      return -2;
+	    }
+	    return index;
+	  };
+	  const calcCardTranslate = (index, activeIndex) => {
+	    let value;
+	    const widthNumber = +props.width / 100;
+	    const parentW = carousel.wrapper.value.offsetWidth;
+	    if (isInStage.value) {
+	      if (index === activeIndex) {
+	        value = parentW * (1 - widthNumber) / 2;
+	      } else if (index > activeIndex) {
+	        value = parentW * (1 + widthNumber * props.scale) / 2 + itemGutter.value;
+	      } else {
+	        value = -(parentW * ((widthNumber * props.scale - 1) / 2 + widthNumber)) - itemGutter.value;
+	      }
+	    } else if (index < activeIndex) {
+	      value = parentW * (1 - widthNumber) / 2;
+	    } else {
+	      value = parentW * (1 - widthNumber) / 2;
+	    }
+	    return value;
+	  };
+	  const calcSlideOffset = (index, activeIndex, wrapperWidth) => {
+	    const { length } = carousel.items.value;
+	    const offset = wrapperWidth - (instance.vnode?.el?.offsetWidth || 0);
+	    const gutter = itemGutter.value;
+	    if (!gutter || isVertical.value) return 0;
+	    let slideOffset = 0;
+	    if (length === 1) {
+	      return offset / 2;
+	    }
+	    if (activeIndex == 0) {
+	      if (index - activeIndex === 0) {
+	        slideOffset = gutter;
+	      } else if (index - activeIndex === 1) {
+	        slideOffset = -offset + gutter * 2;
+	      }
+	    }
+	    if (activeIndex !== 0 && activeIndex != length - 1) {
+	      if (index - activeIndex === 0) {
+	        slideOffset = offset / 2;
+	      } else if (index - activeIndex === 1) {
+	        slideOffset = -offset / 2 + gutter;
+	      } else if (index - activeIndex === -1) {
+	        slideOffset = offset * 3 / 2 - gutter;
+	      }
+	    }
+	    if (activeIndex == length - 1) {
+	      if (index - activeIndex === 0) {
+	        slideOffset = offset - gutter;
+	      } else if (index - activeIndex === -1) {
+	        slideOffset = offset * 2 - gutter * 2;
+	      }
+	    }
+	    return slideOffset;
+	  };
+	  const calcTranslate = (index, activeIndex) => {
+	    const distance = carousel.vnode.el[isVertical.value ? "offsetHeight" : "offsetWidth"];
+	    const slideOffset = calcSlideOffset(index, activeIndex, distance);
+	    return distance * (index - activeIndex) + carousel.offset.value + slideOffset;
+	  };
+	  const reset = (index, activeIndex, oldIndex) => {
+	    const { length } = carousel.items.value;
+	    if (carousel.allowTransition.value && !isCard.value && oldIndex !== void 0) {
+	      isAnimating.value = index === activeIndex || index === oldIndex;
+	      if (!isVertical.value && !isAnimating.value && itemGutter.value && (index - activeIndex === 1 || index - activeIndex === -1)) {
+	        isAnimating.value = true;
+	      }
+	    }
+	    if (index !== activeIndex && length > 2 && carousel.props.loop) {
+	      index = processIndex(index, activeIndex, length);
+	    }
+	    if (isCard.value) {
+	      if (isVertical.value) {
+	        throw new VcError("carousel", "卡片模式不支持垂直方向");
+	      }
+	      isInStage.value = Math.round(Math.abs(index - activeIndex)) <= 1;
+	      isActive.value = index === activeIndex;
+	      translate.value = calcCardTranslate(index, activeIndex);
+	      currentScale.value = isActive.value ? 1 : props.scale;
+	    } else {
+	      isActive.value = index === activeIndex;
+	      translate.value = calcTranslate(index, activeIndex);
+	    }
+	    isReady.value = true;
+	  };
+	  const handleItemClick = () => {
+	    if (parent && isCard.value) {
+	      const index = carousel.items.value.indexOf(instance);
+	      carousel.setActiveItem(index);
+	    }
+	  };
+	  expose({
+	    reset,
+	    isInStage,
+	    isHover,
+	    isActive
+	  });
+	  return {
+	    translate,
+	    currentScale,
+	    isHover,
+	    isActive,
+	    isReady,
+	    isInStage,
+	    isAnimating,
+	    isVertical,
+	    isCard,
+	    isMove,
+	    itemGutter,
+	    itemStyle,
+	    reset,
+	    handleItemClick
+	  };
+	};
+
+	/** @jsxImportSource vue */
+
+	const COMPONENT_NAME$1_ = 'vc-carousel-item';
+	const CarouselItem = /* @__PURE__ */ vue.defineComponent({
+	  name: COMPONENT_NAME$1_,
 	  props: props$1i,
+	  setup(_, {
+	    slots,
+	    expose
+	  }) {
+	    const it = useCarouselItem(expose);
+	    return () => {
+	      return vue.withDirectives(vue.createVNode("div", {
+	        "class": ['vc-carousel-item', {
+	          'is-active': it.isActive.value,
+	          'is-card': it.isCard.value,
+	          'is-in-stage': it.isInStage.value,
+	          'is-hover': it.isHover.value,
+	          'is-animating': it.isAnimating.value && !it.isMove.value
+	        }],
+	        "style": it.itemStyle.value,
+	        "onClick": it.handleItemClick
+	      }, [it.isCard.value && vue.withDirectives(vue.createVNode("div", {
+	        "class": "vc-carousel-item__mask"
+	      }, null), [[vue.vShow, !it.isActive.value]]), slots.default?.()]), [[vue.vShow, it.isReady.value]]);
+	    };
+	  }
+	});
+
+	/** @jsxImportSource vue */
+
+	const COMPONENT_NAME$1Z = 'vcm-carousel';
+	const MCarousel = /* @__PURE__ */ vue.defineComponent({
+	  name: COMPONENT_NAME$1Z,
+	  props: {
+	    ...props$1j,
+	    dots: {
+	      type: [String, Boolean],
+	      default: false
+	    },
+	    indicator: {
+	      type: Boolean,
+	      default: true
+	    }
+	  },
 	  setup(props, {
-	    slots
+	    slots,
+	    expose
 	  }) {
+	    const wrapper = vue.ref(null);
+	    const content = vue.ref(null);
+	    const carousel = useCarousel(wrapper, content, expose);
+	    let scrollStatus = 0;
+	    const handleTouchStart = e => {
+	      carousel.handleStart(e.touches[0]);
+	      scrollStatus = 0;
+	    };
+	    const handleTouchMove = e => {
+	      const absX = Math.abs(e.touches[0].screenX - carousel.startX.value);
+	      const absY = Math.abs(e.touches[0].screenY - carousel.startY.value);
+	      if (!props.vertical && absX > absY && scrollStatus !== 1) {
+	        e.preventDefault();
+	        carousel.handleMove(e.touches[0]);
+	        scrollStatus = 2;
+	        return;
+	      }
+	      if (props.vertical && absY > absX) {
+	        e.preventDefault();
+	        carousel.handleMove(e.touches[0]);
+	        return;
+	      }
+	      if (scrollStatus === 0) {
+	        scrollStatus = 1;
+	      }
+	    };
+
+	    // e.changedTouches[0]
+	    const handleTouchEnd = () => {
+	      carousel.handleEnd();
+	      scrollStatus = 0;
+	    };
 	    return () => {
 	      return vue.createVNode("div", {
-	        "class": "vc-carousel"
-	      }, [slots?.default?.()]);
+	        "ref": wrapper,
+	        "class": ['vcm-carousel', `is-${carousel.direction.value}`],
+	        "onTouchstart": vue.withModifiers(handleTouchStart, ['stop']),
+	        "onTouchmove": vue.withModifiers(handleTouchMove, ['stop']),
+	        "onTouchend": vue.withModifiers(handleTouchEnd, ['stop'])
+	      }, [vue.createVNode("div", {
+	        "ref": content,
+	        "style": {
+	          height: props.height ? `${props.height}px` : 'auto'
+	        },
+	        "class": "vcm-carousel__wrapper"
+	      }, [slots.default?.()]), props.dots && vue.createVNode("ul", {
+	        "class": ['vcm-carousel__dots', ...carousel.dotsClasses.value]
+	      }, [carousel.items.value.map((_, index) => vue.createVNode("li", {
+	        "key": index,
+	        "class": ['vcm-carousel__dot', 'is-' + carousel.direction.value, {
+	          'is-active': index === carousel.activeIndex.value
+	        }],
+	        "onClick": e => {
+	          e.stopPropagation();
+	          carousel.handleDotClick(index);
+	        }
+	      }, [vue.createVNode("button", {
+	        "class": "vcm-carousel__button"
+	      }, [carousel.hasLabel.value && vue.createVNode("span", null, [carousel.items.value[index].props.label])])]))]), !props.card && props.indicator && vue.createVNode("div", {
+	        "class": "vcm-carousel__indicator"
+	      }, [vue.createVNode("span", null, [carousel.activeIndex.value + 1]), vue.createVNode("span", null, [vue.createTextVNode(" / ")]), vue.createVNode("span", null, [carousel.items.value.length])])]);
 	    };
 	  }
 	});
 
-	const MCarousel = Carousel;
+	/** @jsxImportSource vue */
+
+	const COMPONENT_NAME$1Y = 'vcm-carousel-item';
+	const MCarouselItem = /* @__PURE__ */ vue.defineComponent({
+	  name: COMPONENT_NAME$1Y,
+	  props: props$1i,
+	  setup(_, {
+	    slots,
+	    expose
+	  }) {
+	    const it = useCarouselItem(expose);
+	    return () => {
+	      return vue.withDirectives(vue.createVNode("div", {
+	        "style": it.itemStyle.value,
+	        "class": {
+	          'vcm-carousel-item': true,
+	          'is-active': it.isActive.value,
+	          'is-card': it.isCard.value,
+	          'is-animating': it.isAnimating.value && !it.isMove.value,
+	          'is-in-stage': it.isInStage.value
+	        },
+	        "onClick": it.handleItemClick
+	      }, [it.isCard.value && !it.isActive.value && vue.createVNode("div", {
+	        "class": "vcm-carousel-item__mask"
+	      }, null), slots.default?.()]), [[vue.vShow, it.isReady.value]]);
+	    };
+	  }
+	});
 
 	const useAttrs = (options) => {
 	  const attrs = vue.useAttrs();
@@ -7415,9 +8160,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1V = 'vc-input';
+	const COMPONENT_NAME$1X = 'vc-input';
 	const Input$1 = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1V,
+	  name: COMPONENT_NAME$1X,
 	  inheritAttrs: false,
 	  props: {
 	    ...props$1h,
@@ -7752,9 +8497,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1U = 'vc-input-number';
+	const COMPONENT_NAME$1W = 'vc-input-number';
 	const InputNumber = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1U,
+	  name: COMPONENT_NAME$1W,
 	  props: props$1g,
 	  inheritAttrs: false,
 	  setup(props, {
@@ -7818,9 +8563,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1T = 'vc-input-search';
+	const COMPONENT_NAME$1V = 'vc-input-search';
 	const InputSearch = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1T,
+	  name: COMPONENT_NAME$1V,
 	  props: props$1f,
 	  inheritAttrs: false,
 	  setup(props, {
@@ -7953,69 +8698,6 @@ var VcComponents = (function (exports, vue) {
 	  ...pick(props$1e, wrapperKeys)
 	};
 
-	class Resize {
-	  el;
-	  static of(el) {
-	    return new Resize(el);
-	  }
-	  /**
-	   * Resize.of(el, fn);
-	   * @param el ~
-	   * @param fn ~
-	   * @returns off
-	   */
-	  static on(el, fn) {
-	    return new Resize(el).on(fn);
-	  }
-	  /**
-	   * 要实现Resize.off(el)，el必须侵入式修改挂上__rz__
-	   * @param el ~
-	   * @param fn ~
-	   * @returns ~
-	   */
-	  static off(el, fn) {
-	    return new Resize(el).off(fn);
-	  }
-	  listeners = [];
-	  ro = null;
-	  constructor(el) {
-	    this.el = el;
-	    let rz = el.__rz__;
-	    if (rz && rz instanceof Resize) {
-	      this.listeners = rz.listeners;
-	      this.ro = rz.ro;
-	    }
-	  }
-	  handleResize = (entries) => {
-	    /* istanbul ignore else -- @preserve */
-	    if (entries.some((i) => i.target === this.el)) {
-	      this.listeners?.forEach((fn) => fn());
-	    }
-	  };
-	  on(fn) {
-	    if (typeof ResizeObserver === "undefined")
-	      return () => {
-	      };
-	    if (!this.listeners.length) {
-	      this.ro = this.ro || new ResizeObserver(this.handleResize);
-	      this.ro.observe(this.el);
-	      this.el.__rz__ = this;
-	    }
-	    this.listeners.push(fn);
-	    return () => this.off(fn);
-	  }
-	  off(fn) {
-	    if (fn) {
-	      this.listeners.splice(this.listeners.indexOf(fn), 1);
-	    } else {
-	      this.listeners = [];
-	    }
-	    if (!this.listeners.length && this.ro) {
-	      this.ro.disconnect();
-	    }
-	  }
-	}
-
 	const EXTRA_DISTANCE = 4;
 	const HALF_ARROW = 12.73 / 2;
 	const usePos = () => {
@@ -8276,9 +8958,9 @@ var VcComponents = (function (exports, vue) {
 	  }
 	};
 
-	const COMPONENT_NAME$1S = "vc-customer";
+	const COMPONENT_NAME$1U = "vc-customer";
 	const Customer = vue.defineComponent({
-	  name: COMPONENT_NAME$1S,
+	  name: COMPONENT_NAME$1U,
 	  props: props$1c,
 	  setup(props, context) {
 	    return () => vue.h(() => {
@@ -8413,7 +9095,7 @@ var VcComponents = (function (exports, vue) {
 	  }
 	}
 
-	const COMPONENT_NAME$1R = "vc-portal";
+	const COMPONENT_NAME$1T = "vc-portal";
 	class Portal {
 	  /**
 	   * 清理Portals类型组件
@@ -8463,7 +9145,7 @@ var VcComponents = (function (exports, vue) {
 	    this.wrapper = wrapper;
 	    this.globalOptions = {
 	      ...options,
-	      name: options?.name || wrapper.name || getUid(COMPONENT_NAME$1R)
+	      name: options?.name || wrapper.name || getUid(COMPONENT_NAME$1T)
 	    };
 	  }
 	  popup(propsData, options) {
@@ -8561,7 +9243,7 @@ var VcComponents = (function (exports, vue) {
 	      ...rest
 	    } = options;
 	    let useAllNodes = fragment;
-	    const name = multiple ? `${name$}__${getUid(COMPONENT_NAME$1R)}` : name$;
+	    const name = multiple ? `${name$}__${getUid(COMPONENT_NAME$1T)}` : name$;
 	    const container = document.createElement(tag);
 	    const root = typeof el === "object" ? el : document.querySelector(el || "body");
 	    !alive && Portal.leafs.get(name)?.destroy();
@@ -8595,7 +9277,7 @@ var VcComponents = (function (exports, vue) {
 	    } else {
 	      const wrapper = this.wrapper;
 	      const app = vue.createApp({
-	        name: COMPONENT_NAME$1R,
+	        name: COMPONENT_NAME$1T,
 	        parent,
 	        setup() {
 	          if (alive) {
@@ -8706,13 +9388,13 @@ var VcComponents = (function (exports, vue) {
 	  }
 	};
 
-	const COMPONENT_NAME$1Q = 'vc-portal-view';
+	const COMPONENT_NAME$1S = 'vc-portal-view';
 
 	/**
 	 * 写法不同，但与vue@2.x 保持一致
 	 */
 	const PortalView = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1Q,
+	  name: COMPONENT_NAME$1S,
 	  props: props$1b,
 	  setup(props, {
 	    slots
@@ -8732,9 +9414,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1P = 'vc-popover-wrapper';
+	const COMPONENT_NAME$1R = 'vc-popover-wrapper';
 	const PopoverWrapper = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1P,
+	  name: COMPONENT_NAME$1R,
 	  props: props$1e,
 	  emits: ['portal-fulfilled', 'close'],
 	  setup(props, {
@@ -8992,9 +9674,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1O = 'vc-popover';
+	const COMPONENT_NAME$1Q = 'vc-popover';
 	const Popover$1 = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1O,
+	  name: COMPONENT_NAME$1Q,
 	  props: props$1d,
 	  emits: ['update:modelValue', 'visible-change', 'ready', 'close'],
 	  setup(props, {
@@ -9138,9 +9820,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1N = 'vc-cascader-column';
+	const COMPONENT_NAME$1P = 'vc-cascader-column';
 	const CascaderColumn = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1N,
+	  name: COMPONENT_NAME$1P,
 	  emits: ['click', 'change'],
 	  props: {
 	    data: {
@@ -9348,9 +10030,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1M = 'vc-cascader';
+	const COMPONENT_NAME$1O = 'vc-cascader';
 	const Cascader = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1M,
+	  name: COMPONENT_NAME$1O,
 	  inheritAttrs: false,
 	  props: props$19,
 	  emits: ['update:modelValue', 'visible-change', 'ready', 'change', 'close'],
@@ -9702,9 +10384,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1L = 'vc-chart';
+	const COMPONENT_NAME$1N = 'vc-chart';
 	const Chart = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1L,
+	  name: COMPONENT_NAME$1N,
 	  props: props$18,
 	  emits: [...EVENTS$1, 'ready'],
 	  setup(props, {
@@ -9943,9 +10625,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1K = 'vc-checkbox';
+	const COMPONENT_NAME$1M = 'vc-checkbox';
 	const Checkbox = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1K,
+	  name: COMPONENT_NAME$1M,
 	  props: props$17,
 	  emits: ['update:modelValue', 'change'],
 	  setup(props, {
@@ -10032,9 +10714,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1J = 'vc-checkbox-group';
+	const COMPONENT_NAME$1L = 'vc-checkbox-group';
 	const CheckboxGroup = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1J,
+	  name: COMPONENT_NAME$1L,
 	  props: props$16,
 	  emits: ['update:modelValue', 'change'],
 	  setup(props, {
@@ -10052,9 +10734,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1I = 'vcm-checkbox';
+	const COMPONENT_NAME$1K = 'vcm-checkbox';
 	const MCheckbox = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1I,
+	  name: COMPONENT_NAME$1K,
 	  props: props$17,
 	  emits: ['update:modelValue', 'change'],
 	  setup(props, {
@@ -10094,9 +10776,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1H = 'vcm-checkbox-group';
+	const COMPONENT_NAME$1J = 'vcm-checkbox-group';
 	const MCheckboxGroup = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1H,
+	  name: COMPONENT_NAME$1J,
 	  props: props$16,
 	  emits: ['update:modelValue', 'change'],
 	  setup(props, {
@@ -10150,9 +10832,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1G = 'vc-message';
+	const COMPONENT_NAME$1I = 'vc-message';
 	const MessageView = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1G,
+	  name: COMPONENT_NAME$1I,
 	  emits: ['before-close', 'close', 'portal-fulfilled'],
 	  props: props$15,
 	  setup(props, {
@@ -10401,9 +11083,9 @@ var VcComponents = (function (exports, vue) {
 	  return () => vue.h(props.tag, { onClick: handleClick, class: "vc-clipboard" }, slots?.default?.());
 	};
 
-	const COMPONENT_NAME$1F = "vc-clipboard";
+	const COMPONENT_NAME$1H = "vc-clipboard";
 	const Clipboard$2 = vue.defineComponent({
-	  name: COMPONENT_NAME$1F,
+	  name: COMPONENT_NAME$1H,
 	  props: props$14,
 	  setup() {
 	    return useClipboard((content) => Message.success({ content }));
@@ -10443,9 +11125,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1E = 'vcm-toast';
+	const COMPONENT_NAME$1G = 'vcm-toast';
 	const MToastView = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1E,
+	  name: COMPONENT_NAME$1G,
 	  emits: ['close', 'portal-fulfilled'],
 	  props: props$13,
 	  setup(props, {
@@ -10547,9 +11229,9 @@ var VcComponents = (function (exports, vue) {
 	const error$3 = create$6({ mode: "error" });
 	const MToast = Object.assign(MToastView, { destroy: destroy$4, info: info$2, success: success$2, loading, warning: warning$2, error: error$3 });
 
-	const COMPONENT_NAME$1D = "vcm-clipboard";
+	const COMPONENT_NAME$1F = "vcm-clipboard";
 	const MClipboard$1 = vue.defineComponent({
-	  name: COMPONENT_NAME$1D,
+	  name: COMPONENT_NAME$1F,
 	  props: props$14,
 	  setup() {
 	    return useClipboard((content) => MToast.info({ content }));
@@ -10581,9 +11263,9 @@ var VcComponents = (function (exports, vue) {
 	  }
 	};
 
-	const COMPONENT_NAME$1C = "vc-collapse";
+	const COMPONENT_NAME$1E = "vc-collapse";
 	const Collapse = vue.defineComponent({
-	  name: COMPONENT_NAME$1C,
+	  name: COMPONENT_NAME$1E,
 	  props: props$12,
 	  emits: ["update:moodelValue", "change"],
 	  setup(props, { slots, emit }) {
@@ -10700,9 +11382,9 @@ var VcComponents = (function (exports, vue) {
 	function _isSlot$3(s) {
 	  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 	}
-	const COMPONENT_NAME$1B = 'vc-expand';
+	const COMPONENT_NAME$1D = 'vc-expand';
 	const Expand$1 = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1B,
+	  name: COMPONENT_NAME$1D,
 	  props: props$10,
 	  setup(props, {
 	    slots
@@ -10732,9 +11414,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1A = 'vc-collapse-item';
+	const COMPONENT_NAME$1C = 'vc-collapse-item';
 	const CollapseItem = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1A,
+	  name: COMPONENT_NAME$1C,
 	  props: props$11,
 	  setup(props, {
 	    slots,
@@ -10809,9 +11491,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1z = 'vc-color-picker';
+	const COMPONENT_NAME$1B = 'vc-color-picker';
 	const ColorPicker$1 = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1z,
+	  name: COMPONENT_NAME$1B,
 	  props: props$$,
 	  setup(props, {
 	    slots
@@ -10874,9 +11556,9 @@ var VcComponents = (function (exports, vue) {
 	function _isSlot$2(s) {
 	  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 	}
-	const COMPONENT_NAME$1y = 'vc-countdown';
+	const COMPONENT_NAME$1A = 'vc-countdown';
 	const Countdown = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1y,
+	  name: COMPONENT_NAME$1A,
 	  props: props$_,
 	  emits: ['change', 'complete', 'error'],
 	  setup(props, {
@@ -10888,6 +11570,7 @@ var VcComponents = (function (exports, vue) {
 	    const minute = vue.ref('');
 	    const second = vue.ref('');
 	    const millisecond = vue.ref('');
+	    const isComplete = vue.ref(false);
 	    const showResult = vue.computed(() => {
 	      return !props.render && !slots.default;
 	    });
@@ -10960,15 +11643,18 @@ var VcComponents = (function (exports, vue) {
 
 	      if (timestamp <= 0) {
 	        stop();
-	        emit('change', {
-	          timestamp: 0,
-	          day: '00',
-	          hour: '00',
-	          minute: '00',
-	          second: '00',
-	          millisecond: '00'
-	        });
-	        emit('complete');
+	        if (!isComplete.value) {
+	          isComplete.value = true;
+	          emit('change', {
+	            timestamp: 0,
+	            day: '00',
+	            hour: '00',
+	            minute: '00',
+	            second: '00',
+	            millisecond: '00'
+	          });
+	          emit('complete');
+	        }
 	      } else {
 	        emit('change', {
 	          timestamp,
@@ -10983,6 +11669,8 @@ var VcComponents = (function (exports, vue) {
 	    const start = () => {
 	      if (targetTimestamp.value) {
 	        timer && clearInterval(timer);
+	        isComplete.value = false;
+	        run(); // 立即执行一次，界面马上展示当前数值
 	        timer = setInterval(run, T.value);
 	      }
 	    };
@@ -11143,9 +11831,9 @@ var VcComponents = (function (exports, vue) {
 	function _isSlot$1(s) {
 	  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 	}
-	const COMPONENT_NAME$1x = 'vc-counter';
+	const COMPONENT_NAME$1z = 'vc-counter';
 	const Counter = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1x,
+	  name: COMPONENT_NAME$1z,
 	  props: props$Z,
 	  emits: ['begin', 'complete', 'change'],
 	  setup(props, {
@@ -12408,9 +13096,9 @@ var VcComponents = (function (exports, vue) {
 	  }
 	  return view;
 	};
-	const COMPONENT_NAME$1w = 'vc-date-confirm';
+	const COMPONENT_NAME$1y = 'vc-date-confirm';
 	const Confirm = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1w,
+	  name: COMPONENT_NAME$1y,
 	  props: {
 	    showTime: {
 	      type: Boolean,
@@ -12474,9 +13162,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1v = 'vc-date-header';
+	const COMPONENT_NAME$1x = 'vc-date-header';
 	const DateHeader = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1v,
+	  name: COMPONENT_NAME$1x,
 	  props: {
 	    panelDate: Date,
 	    showNext: {
@@ -12560,9 +13248,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1u = 'vc-date-table';
+	const COMPONENT_NAME$1w = 'vc-date-table';
 	const DateTable = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1u,
+	  name: COMPONENT_NAME$1w,
 	  props: {
 	    value: Array,
 	    firstDayOfWeek: {
@@ -12771,9 +13459,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1t = 'vc-month-table';
+	const COMPONENT_NAME$1v = 'vc-month-table';
 	const MonthTable = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1t,
+	  name: COMPONENT_NAME$1v,
 	  props: {
 	    value: Array,
 	    panelDate: Date,
@@ -12905,7 +13593,7 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1s = 'vc-quarter-table';
+	const COMPONENT_NAME$1u = 'vc-quarter-table';
 
 	/**
 	 * 获取季度对应的月份范围
@@ -12939,7 +13627,7 @@ var VcComponents = (function (exports, vue) {
 	  }
 	};
 	const QuarterTable = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1s,
+	  name: COMPONENT_NAME$1u,
 	  props: {
 	    value: Array,
 	    panelDate: Date,
@@ -13062,9 +13750,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1r = 'vc-shortcuts-select';
+	const COMPONENT_NAME$1t = 'vc-shortcuts-select';
 	const ShortcutsSelect = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1r,
+	  name: COMPONENT_NAME$1t,
 	  props: {
 	    panelDate: Date,
 	    config: Array,
@@ -13104,9 +13792,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1q = 'vc-time-select';
+	const COMPONENT_NAME$1s = 'vc-time-select';
 	const TimeSelect = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1q,
+	  name: COMPONENT_NAME$1s,
 	  props: {
 	    hours: {
 	      type: [Number, String],
@@ -13386,9 +14074,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1p = 'vc-year-table';
+	const COMPONENT_NAME$1r = 'vc-year-table';
 	const YearTable = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1p,
+	  name: COMPONENT_NAME$1r,
 	  props: {
 	    value: Array,
 	    panelDate: Date,
@@ -13511,9 +14199,9 @@ var VcComponents = (function (exports, vue) {
 	  }
 	  return true;
 	};
-	const COMPONENT_NAME$1o = 'vc-date-range-panel';
+	const COMPONENT_NAME$1q = 'vc-date-range-panel';
 	const DateRangePanel = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1o,
+	  name: COMPONENT_NAME$1q,
 	  props: {
 	    ...props$W,
 	    confirm: {
@@ -13892,9 +14580,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1n = 'vc-date-panel';
+	const COMPONENT_NAME$1p = 'vc-date-panel';
 	const DatePanel = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1n,
+	  name: COMPONENT_NAME$1p,
 	  props: {
 	    ...props$W,
 	    type: String,
@@ -14102,9 +14790,9 @@ var VcComponents = (function (exports, vue) {
 	  const endYear = value[1].getFullYear();
 	  return startYear === endYear;
 	};
-	const COMPONENT_NAME$1m = 'vc-monthrange-panel';
+	const COMPONENT_NAME$1o = 'vc-monthrange-panel';
 	const MonthRangePanel = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1m,
+	  name: COMPONENT_NAME$1o,
 	  props: {
 	    ...props$W,
 	    confirm: {
@@ -14279,9 +14967,9 @@ var VcComponents = (function (exports, vue) {
 	  const endYear = value[1].getFullYear();
 	  return startYear === endYear;
 	};
-	const COMPONENT_NAME$1l = 'vc-quarterrange-panel';
+	const COMPONENT_NAME$1n = 'vc-quarterrange-panel';
 	const QuarterRangePanel = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1l,
+	  name: COMPONENT_NAME$1n,
 	  props: {
 	    ...props$W,
 	    confirm: {
@@ -14520,9 +15208,9 @@ var VcComponents = (function (exports, vue) {
 	    seconds
 	  };
 	};
-	const COMPONENT_NAME$1k = 'vc-timerange-panel';
+	const COMPONENT_NAME$1m = 'vc-timerange-panel';
 	const TimeRangePanel = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1k,
+	  name: COMPONENT_NAME$1m,
 	  props: props$V,
 	  emits: ['pick', 'clear', 'ok'],
 	  setup(props, {
@@ -14623,9 +15311,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1j = 'vc-time-panel';
+	const COMPONENT_NAME$1l = 'vc-time-panel';
 	const TimePanel = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1j,
+	  name: COMPONENT_NAME$1l,
 	  props: props$V,
 	  emits: ['pick', 'clear', 'ok'],
 	  setup(props, {
@@ -14681,7 +15369,7 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1i = 'vc-date-picker';
+	const COMPONENT_NAME$1k = 'vc-date-picker';
 	const getPanel$1 = type => {
 	  if (['daterange', 'datetimerange'].includes(type)) {
 	    return DateRangePanel;
@@ -14692,7 +15380,7 @@ var VcComponents = (function (exports, vue) {
 	  }
 	  return DatePanel;
 	};
-	const DatePicker = createPicker(COMPONENT_NAME$1i, props$Y, () => {
+	const DatePicker = createPicker(COMPONENT_NAME$1k, props$Y, () => {
 	  const props = vue.getCurrentInstance().props;
 	  const icon = vue.ref('date');
 	  const panel = vue.shallowRef({});
@@ -14733,9 +15421,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1h = 'vc-divider';
+	const COMPONENT_NAME$1j = 'vc-divider';
 	const Divider = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1h,
+	  name: COMPONENT_NAME$1j,
 	  props: props$U,
 	  setup(props, {
 	    slots
@@ -14871,7 +15559,7 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1g = 'vc-scroller-track';
+	const COMPONENT_NAME$1i = 'vc-scroller-track';
 	const BAR_MAP = {
 	  vertical: {
 	    scroll: 'scrollTop',
@@ -14891,7 +15579,7 @@ var VcComponents = (function (exports, vue) {
 	  }
 	};
 	const Track$1 = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1g,
+	  name: COMPONENT_NAME$1i,
 	  props: props$T,
 	  emits: ['change'],
 	  inheritAttrs: false,
@@ -15081,9 +15769,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1f = 'vc-scroller-bar';
+	const COMPONENT_NAME$1h = 'vc-scroller-bar';
 	const Bar = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1f,
+	  name: COMPONENT_NAME$1h,
 	  props: props$S,
 	  emits: ['change'],
 	  setup(props, {
@@ -15318,7 +16006,7 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1e = 'vc-scroller';
+	const COMPONENT_NAME$1g = 'vc-scroller';
 
 	/**
 	 * 作为备选方案,目前推荐使用ScrollerWheel
@@ -15329,7 +16017,7 @@ var VcComponents = (function (exports, vue) {
 	 * 2. 增加了一层嵌套
 	 */
 	const Scroller = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1e,
+	  name: COMPONENT_NAME$1g,
 	  props: props$R,
 	  emits: ['scroll'],
 	  setup(props, {
@@ -16276,7 +16964,7 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1d = 'vc-scroller-wheel';
+	const COMPONENT_NAME$1f = 'vc-scroller-wheel';
 
 	/**
 	 * 为减少一层嵌套，为去除滚动bar的抖动，使用wheel模拟
@@ -16298,7 +16986,7 @@ var VcComponents = (function (exports, vue) {
 	 * 设置scrollTop不会reflow和repaint，不需要考虑transfrom来改变content（transform也只在draw完成）
 	 */
 	const ScrollerWheel = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1d,
+	  name: COMPONENT_NAME$1f,
 	  props: Object.assign({}, props$R, {
 	    stopPropagation: {
 	      type: Boolean,
@@ -16487,9 +17175,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1c = 'vc-drawer';
+	const COMPONENT_NAME$1e = 'vc-drawer';
 	const DrawerView = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1c,
+	  name: COMPONENT_NAME$1e,
 	  props: props$Q,
 	  emits: ['close', 'update:modelValue', 'visible-change'],
 	  setup(props, {
@@ -16678,9 +17366,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1b = 'vc-dropdown';
+	const COMPONENT_NAME$1d = 'vc-dropdown';
 	const Dropdown = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1b,
+	  name: COMPONENT_NAME$1d,
 	  props: props$P,
 	  inheritAttrs: false,
 	  emits: ['update:modelValue', 'ready', 'close', 'visible-change', 'click'],
@@ -16750,9 +17438,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$1a = 'vc-dropdown-menu';
+	const COMPONENT_NAME$1c = 'vc-dropdown-menu';
 	const DropdownMenu = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$1a,
+	  name: COMPONENT_NAME$1c,
 	  setup(_, {
 	    slots
 	  }) {
@@ -16766,9 +17454,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$19 = 'vc-dropdown-item';
+	const COMPONENT_NAME$1b = 'vc-dropdown-item';
 	const DropdownItem = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$19,
+	  name: COMPONENT_NAME$1b,
 	  emits: ['click'],
 	  props: {
 	    value: {
@@ -17012,9 +17700,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$18 = 'vc-editor-toolbar';
+	const COMPONENT_NAME$1a = 'vc-editor-toolbar';
 	const EditorToolbar = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$18,
+	  name: COMPONENT_NAME$1a,
 	  props: {
 	    options: [Array, Object],
 	    elementId: String
@@ -17222,9 +17910,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$17 = 'vc-image-preview';
+	const COMPONENT_NAME$19 = 'vc-image-preview';
 	const ImagePreview$1 = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$17,
+	  name: COMPONENT_NAME$19,
 	  props: props$O,
 	  setup(props, {
 	    slots
@@ -19377,9 +20065,9 @@ var VcComponents = (function (exports, vue) {
 	  }
 	};
 
-	const COMPONENT_NAME$16 = "vc-upload";
+	const COMPONENT_NAME$18 = "vc-upload";
 	const Upload$1 = vue.defineComponent({
-	  name: COMPONENT_NAME$16,
+	  name: COMPONENT_NAME$18,
 	  props: props$N,
 	  emits: [
 	    "message",
@@ -19913,9 +20601,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$15 = 'vc-editor';
+	const COMPONENT_NAME$17 = 'vc-editor';
 	const Editor$1 = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$15,
+	  name: COMPONENT_NAME$17,
 	  props: props$M,
 	  defaults: defaults$1,
 	  emits: ['ready', 'blur', 'focus', 'input', 'update:modelValue', 'change'],
@@ -20104,7 +20792,7 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$14 = 'vc-editor-view';
+	const COMPONENT_NAME$16 = 'vc-editor-view';
 	const setImages = v => {
 	  if (!v) return;
 	  const IMG_REGX = /<img.*?(?:>|\/>)/gi;
@@ -20122,7 +20810,7 @@ var VcComponents = (function (exports, vue) {
 	  return;
 	};
 	const EditorView = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$14,
+	  name: COMPONENT_NAME$16,
 	  props: {
 	    value: {
 	      type: String,
@@ -20337,9 +21025,9 @@ var VcComponents = (function (exports, vue) {
 	  });
 	};
 
-	const COMPONENT_NAME$13 = "vc-form";
+	const COMPONENT_NAME$15 = "vc-form";
 	const Form = vue.defineComponent({
-	  name: COMPONENT_NAME$13,
+	  name: COMPONENT_NAME$15,
 	  props: props$L,
 	  setup(props, { slots, expose }) {
 	    useForm(expose);
@@ -20819,9 +21507,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$12 = 'vc-form-item';
+	const COMPONENT_NAME$14 = 'vc-form-item';
 	const FormItem = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$12,
+	  name: COMPONENT_NAME$14,
 	  props: props$K,
 	  setup(props, {
 	    slots,
@@ -20889,9 +21577,9 @@ var VcComponents = (function (exports, vue) {
 	  }
 	};
 
-	const COMPONENT_NAME$11 = "vcm-form";
+	const COMPONENT_NAME$13 = "vcm-form";
 	const MForm = vue.defineComponent({
-	  name: COMPONENT_NAME$11,
+	  name: COMPONENT_NAME$13,
 	  props: props$J,
 	  setup(props, { slots, expose }) {
 	    useForm(expose, {
@@ -20922,9 +21610,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$10 = 'vcm-form-item';
+	const COMPONENT_NAME$12 = 'vcm-form-item';
 	const MFormItem = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$10,
+	  name: COMPONENT_NAME$12,
 	  props: props$I,
 	  setup(props, {
 	    slots,
@@ -20979,9 +21667,9 @@ var VcComponents = (function (exports, vue) {
 	  }
 	});
 
-	const COMPONENT_NAME$$ = "vc-fragment";
+	const COMPONENT_NAME$11 = "vc-fragment";
 	const Fragment = vue.defineComponent({
-	  name: COMPONENT_NAME$$,
+	  name: COMPONENT_NAME$11,
 	  setup(_, { slots }) {
 	    return () => vue.h(vue.Fragment, slots.default?.());
 	  }
@@ -21020,9 +21708,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$_ = 'vc-snapshot';
+	const COMPONENT_NAME$10 = 'vc-snapshot';
 	const Snapshot = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$_,
+	  name: COMPONENT_NAME$10,
 	  props: props$H,
 	  emits: ['ready'],
 	  setup(props, {
@@ -21555,7 +22243,7 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$Z = 'vc-image';
+	const COMPONENT_NAME$$ = 'vc-image';
 	let isSupportObjectFit = false;
 	window.addEventListener('DOMContentLoaded', () => {
 	  isSupportObjectFit = !IS_SERVER$1 && document.documentElement.style.objectFit !== undefined;
@@ -21568,7 +22256,7 @@ var VcComponents = (function (exports, vue) {
 	  SCALE_DOWN: 'scale-down'
 	};
 	const Image$2 = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$Z,
+	  name: COMPONENT_NAME$$,
 	  inheritAttrs: false,
 	  props: props$G,
 	  setup(props, {
@@ -21785,9 +22473,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$Y = 'vc-image-crop';
+	const COMPONENT_NAME$_ = 'vc-image-crop';
 	const ImageCrop = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$Y,
+	  name: COMPONENT_NAME$_,
 	  props: props$F,
 	  setup(props, {
 	    slots
@@ -21813,9 +22501,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$X = 'vc-image-processing';
+	const COMPONENT_NAME$Z = 'vc-image-processing';
 	const ImageProcessing = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$X,
+	  name: COMPONENT_NAME$Z,
 	  props: props$E,
 	  setup(props, {
 	    slots
@@ -21832,9 +22520,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$W = 'vcm-input';
+	const COMPONENT_NAME$Y = 'vcm-input';
 	const MInput = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$W,
+	  name: COMPONENT_NAME$Y,
 	  inheritAttrs: false,
 	  props: {
 	    ...props$1h,
@@ -21923,9 +22611,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$V = 'vcm-input-number';
+	const COMPONENT_NAME$X = 'vcm-input-number';
 	const MInputNumber = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$V,
+	  name: COMPONENT_NAME$X,
 	  props: props$1g,
 	  inheritAttrs: false,
 	  setup(props, {
@@ -21974,9 +22662,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$U = 'vcm-input-search';
+	const COMPONENT_NAME$W = 'vcm-input-search';
 	const MInputSearch = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$U,
+	  name: COMPONENT_NAME$W,
 	  props: {
 	    ...props$1f,
 	    cancelText: {
@@ -22053,9 +22741,9 @@ var VcComponents = (function (exports, vue) {
 	  }
 	};
 
-	const COMPONENT_NAME$T = "vcm-list";
+	const COMPONENT_NAME$V = "vcm-list";
 	const MList = vue.defineComponent({
-	  name: COMPONENT_NAME$T,
+	  name: COMPONENT_NAME$V,
 	  props: props$D,
 	  setup(props, { slots }) {
 	    vue.provide("vc-list", { props });
@@ -22110,10 +22798,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$S = 'vcm-list-item';
+	const COMPONENT_NAME$U = 'vcm-list-item';
 	const HTTP_REGEX = /[a-zA-z]+:\/\/[^\s]*/;
 	const MListItem = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$S,
+	  name: COMPONENT_NAME$U,
 	  props: props$C,
 	  emits: ['click'],
 	  setup(props, {
@@ -22207,11 +22895,11 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$R = 'vc-marquee';
+	const COMPONENT_NAME$T = 'vc-marquee';
 	const ANIMATION = prefixStyle('animation').camel;
 	const TRANSFORM_KEBAB = prefixStyle('transform').kebab;
 	const Marquee = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$R,
+	  name: COMPONENT_NAME$T,
 	  props: props$B,
 	  setup(props, {
 	    slots
@@ -22279,9 +22967,9 @@ var VcComponents = (function (exports, vue) {
 	  }
 	};
 
-	const COMPONENT_NAME$Q = "vc-resizer";
+	const COMPONENT_NAME$S = "vc-resizer";
 	const Resizer = vue.defineComponent({
-	  name: COMPONENT_NAME$Q,
+	  name: COMPONENT_NAME$S,
 	  props: props$A,
 	  emits: ["resize"],
 	  setup(props, { emit, slots, expose }) {
@@ -22451,10 +23139,10 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$P = 'vc-modal';
+	const COMPONENT_NAME$R = 'vc-modal';
 	let zIndexNumber = 1002;
 	const ModalView = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$P,
+	  name: COMPONENT_NAME$R,
 	  emits: ['update:modelValue', 'close', 'portal-fulfilled', 'visible-change', 'ok', 'cancel'],
 	  props: props$z,
 	  setup(props, {
@@ -22893,9 +23581,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$O = 'vc-modal';
+	const COMPONENT_NAME$Q = 'vc-modal';
 	const MModalView = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$O,
+	  name: COMPONENT_NAME$Q,
 	  emits: ['update:modelValue', 'portal-fulfilled', 'close', 'ok', 'cancel'],
 	  props: props$y,
 	  setup(props, {
@@ -23107,9 +23795,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$N = 'vc-notice';
+	const COMPONENT_NAME$P = 'vc-notice';
 	const NoticeView = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$N,
+	  name: COMPONENT_NAME$P,
 	  props: props$x,
 	  emits: ['portal-fulfilled', 'close', 'before-close'],
 	  setup(props, {
@@ -23282,9 +23970,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$M = 'vc-option';
+	const COMPONENT_NAME$O = 'vc-option';
 	const Option$1 = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$M,
+	  name: COMPONENT_NAME$O,
 	  props: props$w,
 	  setup(props, {
 	    slots
@@ -23368,9 +24056,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$L = 'vc-tag';
+	const COMPONENT_NAME$N = 'vc-tag';
 	const Tag = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$L,
+	  name: COMPONENT_NAME$N,
 	  props: props$u,
 	  emits: ['close', 'change'],
 	  setup(props, {
@@ -23441,9 +24129,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$K = 'vc-select-option';
+	const COMPONENT_NAME$M = 'vc-select-option';
 	const Option = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$K,
+	  name: COMPONENT_NAME$M,
 	  props: props$t,
 	  setup(props, {
 	    slots,
@@ -23538,9 +24226,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$J = 'vc-select-option-group';
+	const COMPONENT_NAME$L = 'vc-select-option-group';
 	const OptionGroup = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$J,
+	  name: COMPONENT_NAME$L,
 	  props: props$s,
 	  setup(props, {
 	    slots
@@ -23570,9 +24258,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$I = 'vc-select-all';
+	const COMPONENT_NAME$K = 'vc-select-all';
 	const SelectAll = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$I,
+	  name: COMPONENT_NAME$K,
 	  props: {
 	    data: {
 	      type: Array,
@@ -23642,9 +24330,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$H = 'vc-select';
+	const COMPONENT_NAME$J = 'vc-select';
 	const Select = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$H,
+	  name: COMPONENT_NAME$J,
 	  props: props$1a,
 	  emits: ['ready', 'close', 'visible-change', 'clear', 'change', 'update:modelValue'],
 	  setup(props, {
@@ -23938,9 +24626,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$G = 'vc-pagination';
+	const COMPONENT_NAME$I = 'vc-pagination';
 	const Pagination = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$G,
+	  name: COMPONENT_NAME$I,
 	  props: props$v,
 	  emits: ['update:current', 'change', 'page-size-change'],
 	  setup(props, {
@@ -24138,9 +24826,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$F = 'vc-picker';
+	const COMPONENT_NAME$H = 'vc-picker';
 	const Picker$1 = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$F,
+	  name: COMPONENT_NAME$H,
 	  props: props$r,
 	  setup(props, {
 	    slots
@@ -24203,9 +24891,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$E = 'vc-popconfirm';
+	const COMPONENT_NAME$G = 'vc-popconfirm';
 	const Popconfirm = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$E,
+	  name: COMPONENT_NAME$G,
 	  props: props$q,
 	  inheritAttrs: false,
 	  emits: ['update:modelValue', 'visible-change', 'ready', 'close', 'cancel', 'ok'],
@@ -24373,9 +25061,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$D = 'vc-popup';
+	const COMPONENT_NAME$F = 'vc-popup';
 	const MPopup = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$D,
+	  name: COMPONENT_NAME$F,
 	  props: props$p,
 	  emits: ['update:modelValue', 'close', 'portal-fulfilled', 'visible-change'],
 	  setup(props, {
@@ -24502,9 +25190,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$C = 'vc-print';
+	const COMPONENT_NAME$E = 'vc-print';
 	const Print = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$C,
+	  name: COMPONENT_NAME$E,
 	  props: props$o,
 	  setup(props, {
 	    expose,
@@ -24584,7 +25272,7 @@ var VcComponents = (function (exports, vue) {
 	  },
 	  strokeColor: {
 	    type: String,
-	    default: "#2d8cf0"
+	    default: "#456CF6"
 	  },
 	  trackColor: {
 	    type: String,
@@ -24606,9 +25294,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$B = 'vc-progress-circle';
+	const COMPONENT_NAME$D = 'vc-progress-circle';
 	const Circle$1 = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$B,
+	  name: COMPONENT_NAME$D,
 	  props: props$n,
 	  setup(props, {
 	    slots
@@ -24668,9 +25356,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$A = 'vc-progress-line';
+	const COMPONENT_NAME$C = 'vc-progress-line';
 	const Line$2 = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$A,
+	  name: COMPONENT_NAME$C,
 	  props: props$n,
 	  setup(props) {
 	    const colorStyle = vue.computed(() => {
@@ -24717,9 +25405,9 @@ var VcComponents = (function (exports, vue) {
 	function _isSlot(s) {
 	  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 	}
-	const COMPONENT_NAME$z = 'vc-progress';
+	const COMPONENT_NAME$B = 'vc-progress';
 	const Progress = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$z,
+	  name: COMPONENT_NAME$B,
 	  props: props$n,
 	  setup(props, {
 	    slots
@@ -24881,9 +25569,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$y = 'vc-radio';
+	const COMPONENT_NAME$A = 'vc-radio';
 	const Radio = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$y,
+	  name: COMPONENT_NAME$A,
 	  props: props$m,
 	  emits: ['update:modelValue', 'change'],
 	  setup(props, {
@@ -24927,9 +25615,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$x = 'vc-radio-button';
+	const COMPONENT_NAME$z = 'vc-radio-button';
 	const RadioButton = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$x,
+	  name: COMPONENT_NAME$z,
 	  props: {
 	    ...props$m,
 	    labelStyle: [String, Object],
@@ -25042,9 +25730,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$w = 'vc-radio-group';
+	const COMPONENT_NAME$y = 'vc-radio-group';
 	const RadioGroup = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$w,
+	  name: COMPONENT_NAME$y,
 	  props: props$l,
 	  emits: ['update:modelValue', 'change'],
 	  setup(props, {
@@ -25065,9 +25753,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$v = 'vcm-radio';
+	const COMPONENT_NAME$x = 'vcm-radio';
 	const MRadio = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$v,
+	  name: COMPONENT_NAME$x,
 	  props: props$m,
 	  emits: ['update:modelValue', 'change'],
 	  setup(props, {
@@ -25111,9 +25799,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$u = 'vcm-radio-group';
+	const COMPONENT_NAME$w = 'vcm-radio-group';
 	const MRadioGroup = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$u,
+	  name: COMPONENT_NAME$w,
 	  props: props$l,
 	  emits: ['update:modelValue', 'change'],
 	  setup(props, {
@@ -25180,9 +25868,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$t = 'vc-rate';
+	const COMPONENT_NAME$v = 'vc-rate';
 	const Rate = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$t,
+	  name: COMPONENT_NAME$v,
 	  props: props$k,
 	  emits: ['update:modelValue', 'change'],
 	  setup(props, {
@@ -25498,9 +26186,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$s = 'vc-recycle-list-scroll-state';
+	const COMPONENT_NAME$u = 'vc-recycle-list-scroll-state';
 	const ScrollState = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$s,
+	  name: COMPONENT_NAME$u,
 	  setup(_, {
 	    slots
 	  }) {
@@ -25630,12 +26318,12 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$r = 'vc-recycle-list-container';
+	const COMPONENT_NAME$t = 'vc-recycle-list-container';
 
 	// TODO: 抽离
 	const transformKey = prefixStyle('transform').camel;
 	const Container$1 = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$r,
+	  name: COMPONENT_NAME$t,
 	  props: props$i,
 	  emits: ['refresh'],
 	  setup(props, {
@@ -25733,9 +26421,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$q = 'vc-recycle-list';
+	const COMPONENT_NAME$s = 'vc-recycle-list';
 	const RecycleList = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$q,
+	  name: COMPONENT_NAME$s,
 	  props: props$j,
 	  emits: ['scroll', 'row-resize'],
 	  setup(props, {
@@ -26309,9 +26997,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$p = 'vc-slider';
+	const COMPONENT_NAME$r = 'vc-slider';
 	const Slider = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$p,
+	  name: COMPONENT_NAME$r,
 	  props: props$h,
 	  setup(props, {
 	    slots
@@ -26335,9 +27023,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$o = 'vc-sort-list';
+	const COMPONENT_NAME$q = 'vc-sort-list';
 	const SortList = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$o,
+	  name: COMPONENT_NAME$q,
 	  props: props$g,
 	  setup(props, {
 	    slots
@@ -26361,9 +27049,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$n = 'vc-steps';
+	const COMPONENT_NAME$p = 'vc-steps';
 	const Steps = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$n,
+	  name: COMPONENT_NAME$p,
 	  props: props$f,
 	  setup(props, {
 	    slots
@@ -26489,9 +27177,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$m = 'vc-switch';
+	const COMPONENT_NAME$o = 'vc-switch';
 	const Switch = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$m,
+	  name: COMPONENT_NAME$o,
 	  props: props$e,
 	  // click -> onClick要被拦截，此处不能放置
 	  emits: ['update:modelValue', 'change', 'click'],
@@ -26565,9 +27253,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$l = 'vcm-switch';
+	const COMPONENT_NAME$n = 'vcm-switch';
 	const MSwitch = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$l,
+	  name: COMPONENT_NAME$n,
 	  props: props$e,
 	  // click -> onClick要被拦截，此处不能放置
 	  emits: ['update:modelValue', 'change', 'click'],
@@ -27680,9 +28368,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$k = 'vc-table-normal-list';
+	const COMPONENT_NAME$m = 'vc-table-normal-list';
 	const NormalList = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$k,
+	  name: COMPONENT_NAME$m,
 	  props: {
 	    data: {
 	      type: Array,
@@ -28200,6 +28888,10 @@ var VcComponents = (function (exports, vue) {
 	    const allowDrag = vue.computed(() => {
 	      return typeof props.resizable === 'boolean' ? props.resizable : props.border;
 	    });
+	    const dragLineClass = vue.computed(() => {
+	      if (props.border || !props.resizable) return;
+	      return 'has-drag-line';
+	    });
 	    const states = useStates({
 	      columns: 'columns',
 	      isAllSelected: 'isAllSelected',
@@ -28433,7 +29125,7 @@ var VcComponents = (function (exports, vue) {
 	        "style": [getHeaderCellStyle(rowIndex, columnIndex, columns, column), {
 	          width: `${column.realWidth}px`
 	        }],
-	        "class": [getHeaderCellClass(rowIndex, columnIndex, columns, column), 'vc-table__th'],
+	        "class": [getHeaderCellClass(rowIndex, columnIndex, columns, column), column.resizable && dragLineClass.value, 'vc-table__th'],
 	        "key": column.id
 	      }, [vue.createVNode("div", {
 	        "class": ['vc-table__cell',
@@ -28679,9 +29371,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$j = 'vc-table';
+	const COMPONENT_NAME$l = 'vc-table';
 	const Table$1 = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$j,
+	  name: COMPONENT_NAME$l,
 	  props: props$d,
 	  emits: ['select', 'select-all', 'selection-change', 'cell-mouse-enter', 'cell-mouse-leave', 'cell-click', 'cell-dblclick', 'row-click', 'row-contextmenu', 'row-dblclick', 'header-click', 'header-contextmenu', 'current-change', 'header-dragend', 'expand-change', 'sort-change', 'update:sort'],
 	  setup(props, {
@@ -29884,9 +30576,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$i = 'vc-tabs';
+	const COMPONENT_NAME$k = 'vc-tabs';
 	const Tabs = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$i,
+	  name: COMPONENT_NAME$k,
 	  props: props$c,
 	  emits: ['update:modelValue', 'change', 'click'],
 	  setup(props, {
@@ -30139,9 +30831,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$h = 'vc-tabs-pane';
+	const COMPONENT_NAME$j = 'vc-tabs-pane';
 	const TabsPane = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$h,
+	  name: COMPONENT_NAME$j,
 	  props: props$b,
 	  setup(_, {
 	    slots
@@ -30196,9 +30888,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$g = 'vcm-tabs';
+	const COMPONENT_NAME$i = 'vcm-tabs';
 	const MTabs = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$g,
+	  name: COMPONENT_NAME$i,
 	  props: props$a,
 	  emits: ['update:modelValue', 'change', 'click'],
 	  setup(props, {
@@ -30463,9 +31155,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$f = 'vcm-tabs-pane';
+	const COMPONENT_NAME$h = 'vcm-tabs-pane';
 	const MTabsPane = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$f,
+	  name: COMPONENT_NAME$h,
 	  props: props$b,
 	  setup(_, {
 	    slots
@@ -30529,9 +31221,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$e = 'vc-text';
+	const COMPONENT_NAME$g = 'vc-text';
 	const Text$2 = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$e,
+	  name: COMPONENT_NAME$g,
 	  props: props$9,
 	  setup(props, {
 	    emit
@@ -30898,9 +31590,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$d = 'vc-textarea';
+	const COMPONENT_NAME$f = 'vc-textarea';
 	const Textarea = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$d,
+	  name: COMPONENT_NAME$f,
 	  props: Object.assign({}, props$8, {
 	    indicator: {
 	      type: [Boolean, Object],
@@ -30956,9 +31648,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$c = 'vcm-textarea';
+	const COMPONENT_NAME$e = 'vcm-textarea';
 	const MTextarea = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$c,
+	  name: COMPONENT_NAME$e,
 	  props: Object.assign({}, props$8, {
 	    align: {
 	      type: String,
@@ -31041,9 +31733,9 @@ var VcComponents = (function (exports, vue) {
 	  }
 	};
 
-	const COMPONENT_NAME$b = "vc-theme";
+	const COMPONENT_NAME$d = "vc-theme";
 	const Theme$1 = vue.defineComponent({
-	  name: COMPONENT_NAME$b,
+	  name: COMPONENT_NAME$d,
 	  props: props$7,
 	  setup(props, { slots }) {
 	    const themeId = getUid("vc-theme");
@@ -31126,9 +31818,9 @@ var VcComponents = (function (exports, vue) {
 	  }
 	});
 
-	const COMPONENT_NAME$a = "vc-theme-view";
+	const COMPONENT_NAME$c = "vc-theme-view";
 	const ThemeView = vue.defineComponent({
-	  name: COMPONENT_NAME$a,
+	  name: COMPONENT_NAME$c,
 	  props: props$7,
 	  setup(props, { slots }) {
 	    return () => {
@@ -31144,9 +31836,9 @@ var VcComponents = (function (exports, vue) {
 	  }
 	});
 
-	const COMPONENT_NAME$9 = "vc-theme-text";
+	const COMPONENT_NAME$b = "vc-theme-text";
 	const ThemeText = vue.defineComponent({
-	  name: COMPONENT_NAME$9,
+	  name: COMPONENT_NAME$b,
 	  props: props$7,
 	  setup(props, { slots }) {
 	    return () => {
@@ -31162,9 +31854,9 @@ var VcComponents = (function (exports, vue) {
 	  }
 	});
 
-	const COMPONENT_NAME$8 = "vc-theme-image";
+	const COMPONENT_NAME$a = "vc-theme-image";
 	const ThemeImage = vue.defineComponent({
-	  name: COMPONENT_NAME$8,
+	  name: COMPONENT_NAME$a,
 	  props: props$7,
 	  setup(props, { slots }) {
 	    return () => {
@@ -31216,12 +31908,12 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$7 = 'vc-time-picker';
+	const COMPONENT_NAME$9 = 'vc-time-picker';
 	const getPanel = type => {
 	  const isRange = type === 'timerange';
 	  return isRange ? TimeRangePanel : TimePanel;
 	};
-	const TimePicker = createPicker(COMPONENT_NAME$7, props$6, () => {
+	const TimePicker = createPicker(COMPONENT_NAME$9, props$6, () => {
 	  const props = vue.getCurrentInstance().props;
 	  const icon = vue.ref('icon');
 	  const panel = vue.shallowRef({});
@@ -31257,9 +31949,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$6 = 'vc-timeline';
+	const COMPONENT_NAME$8 = 'vc-timeline';
 	const Timeline = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$6,
+	  name: COMPONENT_NAME$8,
 	  props: props$5,
 	  setup(props, {
 	    slots
@@ -31286,9 +31978,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$5 = 'vc-touch';
+	const COMPONENT_NAME$7 = 'vc-touch';
 	const Touch = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$5,
+	  name: COMPONENT_NAME$7,
 	  props: props$4,
 	  setup(props, {
 	    slots
@@ -31796,21 +32488,68 @@ var VcComponents = (function (exports, vue) {
 	      parentNode.insertChild({ data });
 	    }
 	  }
+	  /**
+	   * 级联非 strict：仅对「选中集合里的最深节点」做 setChecked(true, deep)，
+	   * 避免对祖先逐个 deep 勾选把未出现在 checkedValues 里的兄弟子树再次全选。
+	   * @param checkedValues ~
+	   * @returns ~
+	   */
+	  _getCascadeCheckedAnchorIds(checkedValues) {
+	    const checkedSet = new Set(checkedValues);
+	    const nodesMap = this.nodesMap;
+	    const anchors = [];
+	    for (const id of checkedValues) {
+	      const node = nodesMap[id];
+	      if (!node) continue;
+	      const hasSelectedChildInSet = node.childNodes.some(
+	        (child) => checkedSet.has(child.getter.value)
+	      );
+	      if (!hasSelectedChildInSet) {
+	        anchors.push(id);
+	      }
+	    }
+	    anchors.sort((a, b) => {
+	      const na = nodesMap[a];
+	      const nb = nodesMap[b];
+	      if (!na || !nb) return 0;
+	      return nb.states.level - na.states.level;
+	    });
+	    return anchors;
+	  }
 	  _initDefaultCheckedNodes() {
 	    const checkedValues = this.checkedValues || [];
 	    const nodesMap = this.nodesMap;
-	    checkedValues.forEach((id) => {
+	    if (this.checkStrictly) {
+	      checkedValues.forEach((id) => {
+	        const node = nodesMap[id];
+	        if (node) {
+	          node.setChecked(true, false);
+	        }
+	      });
+	      return;
+	    }
+	    const anchorIds = this._getCascadeCheckedAnchorIds(checkedValues);
+	    anchorIds.forEach((id) => {
 	      const node = nodesMap[id];
 	      if (node) {
-	        node.setChecked(true, !this.checkStrictly);
+	        node.setChecked(true, true);
 	      }
 	    });
 	  }
 	  _initDefaultCheckedNode(node) {
 	    const checkedValues = this.checkedValues || [];
 	    const nodeValue = node.getter.value;
-	    if (checkedValues.indexOf(nodeValue) !== -1) {
-	      node.setChecked(true, !this.checkStrictly);
+	    if (checkedValues.indexOf(nodeValue) === -1) return;
+	    if (this.checkStrictly) {
+	      node.setChecked(true, false);
+	      return;
+	    }
+	    const checkedSet = new Set(checkedValues);
+	    const hasSelectedChildInSet = node.childNodes.some(
+	      (child) => checkedSet.has(child.getter.value)
+	    );
+	    if (!hasSelectedChildInSet) {
+	      node.setChecked(true, true);
 	    }
 	  }
 	  setCheckedValues(newVal) {
@@ -32038,9 +32777,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$4 = 'vc-tree-node';
+	const COMPONENT_NAME$6 = 'vc-tree-node';
 	const TreeNodeContent = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$4,
+	  name: COMPONENT_NAME$6,
 	  props: props$3,
 	  emits: ['node-expand'],
 	  setup(props, {
@@ -32539,9 +33278,9 @@ var VcComponents = (function (exports, vue) {
 
 	/** @jsxImportSource vue */
 
-	const COMPONENT_NAME$3 = 'vc-tree';
+	const COMPONENT_NAME$5 = 'vc-tree';
 	const Tree$1 = /* @__PURE__ */ vue.defineComponent({
-	  name: COMPONENT_NAME$3,
+	  name: COMPONENT_NAME$5,
 	  props: props$2,
 	  emits: ['update:modelValue', 'change', 'check-change', 'current-change', 'node-click', 'node-contextmenu', 'node-collapse', 'node-expand', 'check', 'node-drag-start', 'node-drag-end', 'node-drop', 'node-drag-leave', 'node-drag-enter', 'node-drag-over'],
 	  setup(props, {
@@ -32736,6 +33475,225 @@ var VcComponents = (function (exports, vue) {
 	  }
 	});
 
+	/** @jsxImportSource vue */
+
+	const COMPONENT_NAME$4 = 'vc-tree-select-content';
+	const TreeSelectContent = /* @__PURE__ */ vue.defineComponent({
+	  name: COMPONENT_NAME$4,
+	  props: {
+	    value: {
+	      type: Array,
+	      required: true
+	    },
+	    data: {
+	      type: Array,
+	      default: () => []
+	    },
+	    checkStrictly: {
+	      type: Boolean,
+	      default: false
+	    },
+	    renderNodeLabel: Function
+	  },
+	  emits: ['change'],
+	  setup(props, {
+	    emit
+	  }) {
+	    return () => {
+	      return vue.createVNode(Scroller, {
+	        "class": "vc-tree-select__options",
+	        "max-height": "200px"
+	      }, {
+	        default: () => [vue.createVNode(Tree$1, {
+	          "model-value": props.value,
+	          "expanded-values": props.value,
+	          "data": props.data,
+	          "checkStrictly": props.checkStrictly,
+	          "allowDispatch": false,
+	          "showCheckbox": true,
+	          "renderNodeLabel": props.renderNodeLabel,
+	          "onChange": (_, data) => emit('change', _, data)
+	        }, null)]
+	      });
+	    };
+	  }
+	});
+
+	/** @jsxImportSource vue */
+
+	const COMPONENT_NAME$3 = 'vc-tree-select-content-cascader';
+	const TreeSelectContentCascader = /* @__PURE__ */ vue.defineComponent({
+	  name: COMPONENT_NAME$3,
+	  props: {
+	    value: {
+	      type: Array,
+	      required: true
+	    },
+	    data: {
+	      type: Array,
+	      default: () => []
+	    },
+	    checkStrictly: {
+	      type: Boolean,
+	      default: false
+	    },
+	    renderNodeLabel: Function,
+	    numerable: {
+	      type: Boolean,
+	      default: false
+	    },
+	    separator: {
+	      type: String,
+	      default: ','
+	    },
+	    max: {
+	      type: Number,
+	      default: 1
+	    },
+	    nullValue: {
+	      type: [Number, String, Object],
+	      default: void 0
+	    }
+	  },
+	  emits: ['change'],
+	  setup(props, {
+	    emit
+	  }) {
+	    const treeRef = vue.ref(null);
+	    /** hover 展开路径，与 Cascader 一致 */
+	    const currentValue = vue.ref([]);
+	    const rebuildData = vue.computed(() => {
+	      if (!props.data.length) return [];
+	      let temp = props.data;
+	      const data = [];
+	      currentValue.value.forEach(cur => {
+	        const col = temp;
+	        data.push(col);
+	        const next = (temp.find(i => i.value == cur) || {}).children || [];
+	        temp = next;
+	      });
+	      data.push(temp);
+	      return data;
+	    });
+	    /** 驱动列区在 TreeStore 更新后重绘 */
+	    const panelTick = vue.ref(0);
+	    const columns = vue.computed(() => Array.from({
+	      length: currentValue.value.length + 1
+	    }).map((_, index) => index));
+	    const handleHover = (value, columnIndex) => {
+	      const len = currentValue.value.length - columnIndex;
+	      currentValue.value.splice(columnIndex, len, value);
+	    };
+	    const sync = async () => {
+	      await vue.nextTick();
+	      const tree = treeRef.value;
+	      if (!tree) return;
+	      const data = {
+	        checkedNodes: tree.getCheckedNodes(),
+	        checkedValues: tree.getCheckedValues(),
+	        halfCheckedNodes: tree.getHalfCheckedNodes(),
+	        halfCheckedValues: tree.getHalfCheckedValues()
+	      };
+	      panelTick.value++;
+	      emit('change', null, data);
+	    };
+	    const getNodeState = item => {
+	      const tree = treeRef.value;
+	      if (!tree) {
+	        return {
+	          checked: false,
+	          indeterminate: false
+	        };
+	      }
+	      const node = tree.getNode(item);
+	      if (!node) {
+	        return {
+	          checked: false,
+	          indeterminate: false
+	        };
+	      }
+	      return {
+	        checked: !!node.states.checked,
+	        indeterminate: !!node.states.indeterminate
+	      };
+	    };
+	    const hasChildren = item => {
+	      return !!(item.children && item.children.length > 0);
+	    };
+	    const handleCheckboxChange = async (v, item) => {
+	      const tree = treeRef.value;
+	      if (!tree) return;
+	      tree.setChecked(item, v, !props.checkStrictly);
+	      sync();
+	    };
+	    const handleLabelClick = (v, item) => {
+	      const tree = treeRef.value;
+	      if (!tree) return;
+	      tree.setChecked(item, v, !props.checkStrictly);
+	      sync();
+	    };
+	    return () => {
+	      return vue.createVNode("div", {
+	        "class": "vc-tree-select__cascader"
+	      }, [vue.createVNode(Tree$1, {
+	        "ref": treeRef,
+	        "class": "vc-tree-select__cascader-tree-hidden",
+	        "model-value": props.value,
+	        "expanded-values": props.value,
+	        "data": props.data,
+	        "checkStrictly": props.checkStrictly,
+	        "allowDispatch": false,
+	        "showCheckbox": true,
+	        "renderNodeLabel": props.renderNodeLabel,
+	        "numerable": props.numerable,
+	        "separator": props.separator,
+	        "max": props.max,
+	        "nullValue": props.nullValue
+	      }, null), vue.createVNode("div", {
+	        "class": "vc-tree-select__cascader-columns"
+	      }, [columns.value.map(columnIndex => {
+	        const col = rebuildData.value[columnIndex];
+	        if (!col || !col.length) return null;
+	        return vue.createVNode("div", {
+	          "class": "vc-tree-select__cascader-column",
+	          "key": columnIndex
+	        }, [vue.createVNode("div", {
+	          "class": "vc-tree-select__cascader-column-wrapper"
+	        }, [col.map(item => {
+	          const state = getNodeState(item);
+	          const isSelect = currentValue.value[columnIndex] === item.value;
+	          const child = hasChildren(item);
+	          return vue.createVNode("div", {
+	            "key": item.value,
+	            "class": ['vc-tree-select__cascader-item', {
+	              'is-select': isSelect
+	            }],
+	            "onMouseenter": () => handleHover(item.value, columnIndex),
+	            "onClick": () => handleLabelClick(!state.checked, item)
+	          }, [vue.createVNode("span", {
+	            "class": "vc-tree-select__cascader-checkbox",
+	            "onClick": e => e.stopPropagation()
+	          }, [vue.createVNode(Checkbox, {
+	            "modelValue": state.checked,
+	            "indeterminate": state.indeterminate,
+	            "disabled": !!item.disabled,
+	            "onChange": v => handleCheckboxChange(v, item)
+	          }, null)]), vue.createVNode("span", {
+	            "class": "vc-tree-select__cascader-label"
+	          }, [props.renderNodeLabel && treeRef.value?.getNode?.(item) ? vue.createVNode(Customer, {
+	            "render": props.renderNodeLabel,
+	            "store": treeRef.value.getNode(item),
+	            "row": item
+	          }, null) : vue.createVNode("span", null, [item.label])]), child ? vue.createVNode(Icon, {
+	            "type": "right",
+	            "class": "vc-tree-select__cascader-icon"
+	          }, null) : null]);
+	        })])]);
+	      })])]);
+	    };
+	  }
+	});
+
 	const treeKeys = [
 	  "checkStrictly",
 	  "data",
@@ -32744,7 +33702,18 @@ var VcComponents = (function (exports, vue) {
 	];
 	const props$1 = {
 	  ...props$1a,
-	  ...pick(props$2, treeKeys)
+	  ...pick(props$2, treeKeys),
+	  autoWidth: {
+	    type: Boolean,
+	    default: void 0
+	  },
+	  /**
+	   * 级联列模式：与 Cascader 相同的 hover 展开下一级，勾选逻辑与树形模式一致
+	   */
+	  cascader: {
+	    type: Boolean,
+	    default: false
+	  }
 	};
 
 	/** @jsxImportSource vue */
@@ -32770,12 +33739,37 @@ var VcComponents = (function (exports, vue) {
 	    const searchValue = vue.ref('');
 	    const searchRegex = vue.ref(new RegExp(''));
 	    const currentValue = vue.ref([]);
+	    const currentValueGroups = vue.computed(() => {
+	      if (props.checkStrictly) return;
+	      if (!props.data?.length || !Array.isArray(currentValue.value) || !currentValue.value.length) {
+	        return [];
+	      }
+	      const pathMap = new Map();
+	      const traverse = (data, path = []) => {
+	        data.forEach(item => {
+	          const v = item.value;
+	          if (v == null) return;
+	          const fullPath = [...path, v];
+	          pathMap.set(v, fullPath);
+	          if (item.children?.length) traverse(item.children, fullPath);
+	        });
+	      };
+	      traverse(props.data);
+	      const allPaths = currentValue.value.map(v => pathMap.get(v)).filter(Boolean);
+	      return allPaths.filter(path => !allPaths.some(other => other !== path && other.length > path.length && path.every((v, i) => v === other[i])));
+	    });
 	    const source = vue.computed(() => {
 	      return flattenData$1(props.data, {
 	        parent: true,
 	        cascader: true
 	      });
 	    });
+	    const labelMap = vue.computed(() => {
+	      return source.value.reduce((pre, cur) => {
+	        pre[cur.value] = cur.label || '';
+	        return pre;
+	      }, {});
+	    });
 	    const icon = vue.computed(() => {
 	      return isActive.value ? 'up' : 'down';
 	    });
@@ -32792,17 +33786,34 @@ var VcComponents = (function (exports, vue) {
 	        'is-disabled': props.disabled
 	      };
 	    });
-	    const currentLabel = vue.computed(() => {
+	    const displayTags = vue.computed(() => {
 	      if (!props.data.length) {
 	        return [];
 	      }
-	      return currentValue.value.map(getLabel.bind(null, source.value));
+	      if (props.checkStrictly) {
+	        return currentValue.value.map(v => ({
+	          value: v,
+	          label: labelMap.value[v] || ''
+	        }));
+	      }
+	      return (currentValueGroups.value || []).map(path => {
+	        const value = path[path.length - 1];
+	        const label = path.map(v => labelMap.value[v] || '').filter(Boolean).join(' / ');
+	        return {
+	          path,
+	          value,
+	          label
+	        };
+	      });
 	    });
 	    const collapseTagCount = vue.computed(() => {
 	      if (!props.maxTags) return 0;
-	      const v = currentValue.value.length - props.maxTags;
+	      const v = displayTags.value.length - props.maxTags;
 	      return v < 0 ? 0 : v;
 	    });
+	    const autoWidth = vue.computed(() => {
+	      return typeof props.autoWidth === 'boolean' ? props.autoWidth : !!props.cascader;
+	    });
 
 	    /**
 	     * v-model 同步, 外部的数据改变时不会触发
@@ -32815,8 +33826,9 @@ var VcComponents = (function (exports, vue) {
 	        separator: props.separator,
 	        nullValue: props.nullValue
 	      });
-	      emit('update:modelValue', v, currentLabel.value);
-	      emit('change', v, currentLabel.value);
+	      const labels = displayTags.value.map(item => item.label);
+	      emit('update:modelValue', v, labels);
+	      emit('change', v, labels);
 
 	      // form表单
 	      formItem?.change?.(currentValue.value);
@@ -32841,8 +33853,15 @@ var VcComponents = (function (exports, vue) {
 	    const close = () => {
 	      isActive.value = false;
 	    };
-	    const handleClose = index => {
-	      currentValue.value.splice(index, 1);
+	    const handleClose = item => {
+	      if (props.checkStrictly) {
+	        const index = currentValue.value.findIndex(v => v === item.value);
+	        if (index === -1) return;
+	        currentValue.value = currentValue.value.filter((_, i) => i !== index);
+	      } else if (item.path) {
+	        const remaining = (currentValueGroups.value || []).filter(p => !(p.length === item.path.length && p.every((v, i) => v === item.path[i])));
+	        currentValue.value = [...new Set(remaining.flat())];
+	      }
 	      sync();
 	    };
 	    const handleClear = e => {
@@ -32879,6 +33898,7 @@ var VcComponents = (function (exports, vue) {
 	      multiple,
 	      isActive,
 	      current: currentValue,
+	      currentValueGroups,
 	      // for portal
 	      toggle(v) {
 	        v = typeof v === 'boolean' ? v : !isActive.value;
@@ -32893,7 +33913,7 @@ var VcComponents = (function (exports, vue) {
 	        "trigger": props.trigger,
 	        "tag": props.tag,
 	        "placement": props.placement,
-	        "auto-width": props.autoWidth,
+	        "autoWidth": autoWidth.value,
 	        "disabled": props.disabled,
 	        "portalClass": [['is-padding-none', props.portalClass]],
 	        "class": [classes.value, its.value.class, 'vc-tree-select'],
@@ -32910,22 +33930,22 @@ var VcComponents = (function (exports, vue) {
 	          return vue.createVNode(Input$1, {
 	            "id": props.id,
 	            "disabled": props.disabled,
-	            "modelValue": currentLabel.value[0] || props.extra,
+	            "modelValue": displayTags.value[0]?.label || props.extra,
 	            "allow-dispatch": false,
 	            "class": "vc-tree-select__input",
 	            "readonly": true,
 	            "placeholder": its.value.attrs?.placeholder || '请选择'
 	          }, {
-	            content: multiple.value && currentValue.value && currentValue.value.length > 0 ? () => {
+	            content: multiple.value && displayTags.value.length > 0 ? () => {
 	              return vue.createVNode("div", {
 	                "class": [classes.value, 'vc-tree-select__tags']
-	              }, [currentValue.value.slice(0, props.maxTags).map((item, index) => {
+	              }, [displayTags.value.slice(0, props.maxTags).map(item => {
 	                return vue.createVNode(Tag, {
-	                  "key": item,
+	                  "key": item.path ? item.path.join('-') : item.value,
 	                  "closable": !props.disabled,
-	                  "onClose": () => handleClose(index)
+	                  "onClose": () => handleClose(item)
 	                }, {
-	                  default: () => [currentLabel.value[index] || '']
+	                  default: () => [item.label]
 	                });
 	              }), collapseTagCount.value ? vue.createVNode(Tag, null, {
 	                default: () => [`+${collapseTagCount.value}...`]
@@ -32958,16 +33978,23 @@ var VcComponents = (function (exports, vue) {
 	          }, [vue.createVNode(Spin, {
 	            "size": 16
 	          }, null)]), vue.createVNode(Scroller, {
-	            "class": "vc-tree-select__options",
+	            "class": ['vc-tree-select__options', props.cascader && 'is-cascader'],
 	            "max-height": "200px"
 	          }, {
-	            default: () => [vue.createVNode(Tree$1, {
-	              "model-value": currentValue.value,
-	              "expanded-values": currentValue.value,
+	            default: () => [props.cascader ? vue.createVNode(TreeSelectContentCascader, {
+	              "value": currentValue.value,
+	              "data": props.data,
+	              "checkStrictly": props.checkStrictly,
+	              "renderNodeLabel": props.renderNodeLabel,
+	              "numerable": props.numerable,
+	              "separator": props.separator,
+	              "max": props.max,
+	              "nullValue": props.nullValue,
+	              "onChange": handleChange
+	            }, null) : vue.createVNode(TreeSelectContent, {
+	              "value": currentValue.value,
 	              "data": props.data,
 	              "checkStrictly": props.checkStrictly,
-	              "allowDispatch": false,
-	              "showCheckbox": true,
 	              "renderNodeLabel": props.renderNodeLabel,
 	              "onChange": handleChange
 	            }, null)]
@@ -139695,6 +140722,7 @@ ${r}
 	exports.Calendar = Calendar$1;
 	exports.Card = Card;
 	exports.Carousel = Carousel;
+	exports.CarouselItem = CarouselItem;
 	exports.Cascader = Cascader;
 	exports.Chart = Chart;
 	exports.Checkbox = Checkbox;
@@ -139740,6 +140768,7 @@ ${r}
 	exports.MCalendar = MCalendar;
 	exports.MCard = MCard;
 	exports.MCarousel = MCarousel;
+	exports.MCarouselItem = MCarouselItem;
 	exports.MCascader = MCascader;
 	exports.MChart = MChart;
 	exports.MCheckbox = MCheckbox;