@deot/vc-components 1.0.62 → 1.0.64

package/dist/index.cjs

@@ -6,8 +6,8 @@ const vue = require('vue');
 const $ = require('@deot/helper-dom');
 const Utils = require('@deot/helper-utils');
 const lodashEs = require('lodash-es');
-const vcHooks = require('@deot/vc-hooks');
 const helperResize = require('@deot/helper-resize');
+const vcHooks = require('@deot/vc-hooks');
 const vcShared = require('@deot/vc-shared');
 const helperWheel = require('@deot/helper-wheel');
 const Load = require('@deot/helper-load');
@@ -112,7 +112,7 @@ class Instance {
 }
 const VcInstance = new Instance();
 
-const props$1u = {
+const props$1v = {
   tag: {
     type: String,
     default: "div"
@@ -121,10 +121,10 @@ const props$1u = {
 
 /** @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
   }) {
@@ -138,7 +138,7 @@ const ActionSheet = /* @__PURE__ */ vue.defineComponent({
 
 const MActionSheet = ActionSheet;
 
-const props$1t = {
+const props$1u = {
   modelValue: {
     type: Boolean,
     default: false
@@ -200,11 +200,11 @@ const isWheel = (el) => {
 
 /** @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,
@@ -370,7 +370,7 @@ const Affix = /* @__PURE__ */ vue.defineComponent({
 
 const MAffix = Affix;
 
-const props$1s = {
+const props$1t = {
   modelValue: {
     type: Boolean,
     default: true
@@ -397,7 +397,7 @@ const props$1s = {
   }
 };
 
-const props$1r = {
+const props$1s = {
   type: String,
   inherit: {
     type: Boolean,
@@ -534,10 +534,10 @@ const IconManager = new Manager();
 
 /** @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([]);
@@ -570,7 +570,7 @@ const Icon = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const props$1q = {
+const props$1r = {
   /**
    * 进入/离开持续时间
    * {enter: 300, leave: 300}
@@ -735,10 +735,10 @@ const useTransition = () => {
   };
 };
 
-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 }) {
@@ -758,10 +758,10 @@ const Transition = vue.defineComponent({
   }
 });
 
-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 }) {
@@ -875,11 +875,11 @@ const TransitionCollapse = vue.defineComponent({
   }
 });
 
-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,
@@ -912,11 +912,11 @@ const TransitionFade = vue.defineComponent({
   }
 });
 
-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",
@@ -954,11 +954,11 @@ const TransitionScale = vue.defineComponent({
   }
 });
 
-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",
@@ -996,11 +996,11 @@ const TransitionSlide = vue.defineComponent({
   }
 });
 
-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",
@@ -1040,7 +1040,7 @@ const TransitionZoom = vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$22 = 'vc-alert';
+const COMPONENT_NAME$27 = 'vc-alert';
 
 // [color, borderColor, backgroundColor], -> CSS
 const THEME_MAP = {
@@ -1050,8 +1050,8 @@ const THEME_MAP = {
   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
@@ -1140,7 +1140,7 @@ const Alert = /* @__PURE__ */ vue.defineComponent({
 
 const MAlert = Alert;
 
-const props$1p = {
+const props$1q = {
   // canvas配置参数
   options: Object,
   width: {
@@ -1156,10 +1156,10 @@ const props$1p = {
 /** @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
@@ -1362,7 +1362,7 @@ const Artboard = /* @__PURE__ */ vue.defineComponent({
 
 const MArtboard = Artboard;
 
-const props$1o = {
+const props$1p = {
   size: {
     type: Number,
     default: 28
@@ -1386,10 +1386,10 @@ const props$1o = {
 
 /** @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
   }) {
@@ -1423,7 +1423,7 @@ const Spin = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const props$1n = {
+const props$1o = {
   wait: {
     type: Number,
     default: 250
@@ -1439,10 +1439,10 @@ const props$1n = {
   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
@@ -1482,7 +1482,7 @@ const Debounce = vue.defineComponent({
   }
 });
 
-const props$1m = {
+const props$1n = {
   tag: {
     type: String,
     default: "button"
@@ -1514,11 +1514,11 @@ const props$1m = {
 
 /** @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
   }) {
@@ -1579,7 +1579,7 @@ const Button = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const props$1l = {
+const props$1m = {
   vertical: {
     type: Boolean,
     default: false
@@ -1600,10 +1600,10 @@ const props$1l = {
 
 /** @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
   }) {
@@ -1627,7 +1627,7 @@ const ButtonGroup = /* @__PURE__ */ vue.defineComponent({
 const MButton = Button;
 const MButtonGroup = ButtonGroup;
 
-const props$1k = {
+const props$1l = {
   tag: {
     type: String,
     default: "div"
@@ -1636,10 +1636,10 @@ const props$1k = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1Y = 'vc-calendar';
+const COMPONENT_NAME$21 = 'vc-calendar';
 const Calendar = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1Y,
-  props: props$1k,
+  name: COMPONENT_NAME$21,
+  props: props$1l,
   setup(props, {
     slots
   }) {
@@ -1653,7 +1653,7 @@ const Calendar = /* @__PURE__ */ vue.defineComponent({
 
 const MCalendar = Calendar;
 
-const props$1j = {
+const props$1k = {
   border: {
     type: Boolean,
     default: true
@@ -1676,10 +1676,10 @@ const props$1j = {
 
 /** @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
   }) {
@@ -1705,31 +1705,713 @@ const Card = /* @__PURE__ */ vue.defineComponent({
 
 const MCard = Card;
 
-const props$1i = {
-  tag: {
+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(Utils.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) helperResize.Resize.on(wrapper.value, resetItems);
+      if (props.initialIndex < items.value.length && props.initialIndex >= 0) {
+        activeIndex.value = props.initialIndex;
+      }
+      startTimer();
+    });
+  });
+  vue.onBeforeUnmount(() => {
+    if (wrapper.value) helperResize.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 = lodashEs.throttle(carousel.setActiveItem);
+    const throttledDotHover = lodashEs.throttle(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 getSelectedData = (value = [], source = []) => {
   const label = [];
@@ -2010,9 +2692,9 @@ const useNativeEmitter = (input, expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1V = 'vc-input';
+const COMPONENT_NAME$1X = 'vc-input';
 const Input = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1V,
+  name: COMPONENT_NAME$1X,
   inheritAttrs: false,
   props: {
     ...props$1h,
@@ -2347,9 +3029,9 @@ const useInputNumber = () => {
 
 /** @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, {
@@ -2413,9 +3095,9 @@ const props$1f = {
 
 /** @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, {
@@ -2808,9 +3490,9 @@ const props$1c = {
   }
 };
 
-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(() => {
@@ -2886,7 +3568,7 @@ class PortalLeaf {
   }
 }
 
-const COMPONENT_NAME$1R = "vc-portal";
+const COMPONENT_NAME$1T = "vc-portal";
 class Portal {
   /**
    * 清理Portals类型组件
@@ -2936,7 +3618,7 @@ class Portal {
     this.wrapper = wrapper;
     this.globalOptions = {
       ...options,
-      name: options?.name || wrapper.name || Utils__namespace.getUid(COMPONENT_NAME$1R)
+      name: options?.name || wrapper.name || Utils__namespace.getUid(COMPONENT_NAME$1T)
     };
   }
   popup(propsData, options) {
@@ -3034,7 +3716,7 @@ class Portal {
       ...rest
     } = options;
     let useAllNodes = fragment;
-    const name = multiple ? `${name$}__${Utils__namespace.getUid(COMPONENT_NAME$1R)}` : name$;
+    const name = multiple ? `${name$}__${Utils__namespace.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();
@@ -3068,7 +3750,7 @@ class Portal {
     } else {
       const wrapper = this.wrapper;
       const app = vue.createApp({
-        name: COMPONENT_NAME$1R,
+        name: COMPONENT_NAME$1T,
         parent,
         setup() {
           if (alive) {
@@ -3179,13 +3861,13 @@ const props$1b = {
   }
 };
 
-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
@@ -3205,9 +3887,9 @@ const PortalView = /* @__PURE__ */ vue.defineComponent({
 
 /** @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, {
@@ -3465,9 +4147,9 @@ const PopoverPortal = new Portal(PopoverWrapper, {
 
 /** @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, {
@@ -3611,9 +4293,9 @@ const Popover = Object.assign(Popover$1, {
 
 /** @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: {
@@ -3821,9 +4503,9 @@ const props$19 = {
 
 /** @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'],
@@ -4175,9 +4857,9 @@ const props$18 = {
 
 /** @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, 'ready'],
   setup(props, {
@@ -4416,9 +5098,9 @@ const useCheckbox = () => {
 
 /** @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, {
@@ -4505,9 +5187,9 @@ const useCheckboxGroup = () => {
 
 /** @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, {
@@ -4525,9 +5207,9 @@ const CheckboxGroup = /* @__PURE__ */ vue.defineComponent({
 
 /** @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, {
@@ -4567,9 +5249,9 @@ const MCheckbox = /* @__PURE__ */ vue.defineComponent({
 
 /** @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, {
@@ -4623,9 +5305,9 @@ const props$15 = {
 
 /** @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, {
@@ -4874,9 +5556,9 @@ const useClipboard = (done) => {
   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$1 = vue.defineComponent({
-  name: COMPONENT_NAME$1F,
+  name: COMPONENT_NAME$1H,
   props: props$14,
   setup() {
     return useClipboard((content) => Message.success({ content }));
@@ -4916,9 +5598,9 @@ const MTransitionZoom = TransitionZoom;
 
 /** @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, {
@@ -5020,9 +5702,9 @@ const warning$2 = create$3({ mode: "warning" });
 const error$2 = create$3({ mode: "error" });
 const MToast = Object.assign(MToastView, { destroy: destroy$4, info: info$2, success: success$2, loading, warning: warning$2, error: error$2 });
 
-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 }));
@@ -5054,9 +5736,9 @@ const props$12 = {
   }
 };
 
-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 }) {
@@ -5173,9 +5855,9 @@ const props$10 = {
 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
@@ -5205,9 +5887,9 @@ const Expand$1 = /* @__PURE__ */ vue.defineComponent({
 
 /** @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,
@@ -5282,9 +5964,9 @@ const props$$ = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1z = 'vc-color-picker';
+const COMPONENT_NAME$1B = 'vc-color-picker';
 const ColorPicker = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1z,
+  name: COMPONENT_NAME$1B,
   props: props$$,
   setup(props, {
     slots
@@ -5347,9 +6029,9 @@ const formatter = (format, arr) => {
 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, {
@@ -5361,6 +6043,7 @@ const Countdown = /* @__PURE__ */ vue.defineComponent({
     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;
     });
@@ -5433,15 +6116,18 @@ const Countdown = /* @__PURE__ */ vue.defineComponent({
 
       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,
@@ -5456,6 +6142,8 @@ const Countdown = /* @__PURE__ */ vue.defineComponent({
     const start = () => {
       if (targetTimestamp.value) {
         timer && clearInterval(timer);
+        isComplete.value = false;
+        run(); // 立即执行一次，界面马上展示当前数值
         timer = setInterval(run, T.value);
       }
     };
@@ -5616,9 +6304,9 @@ const value2separated = (value, options) => {
 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, {
@@ -6881,9 +7569,9 @@ const getTimeType = type => {
   }
   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,
@@ -6947,9 +7635,9 @@ const Confirm = /* @__PURE__ */ vue.defineComponent({
 
 /** @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: {
@@ -7033,9 +7721,9 @@ const DateHeader = /* @__PURE__ */ vue.defineComponent({
 
 /** @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: {
@@ -7244,9 +7932,9 @@ const DateTable = /* @__PURE__ */ vue.defineComponent({
 
 /** @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,
@@ -7378,7 +8066,7 @@ const MonthTable = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1s = 'vc-quarter-table';
+const COMPONENT_NAME$1u = 'vc-quarter-table';
 
 /**
  * 获取季度对应的月份范围
@@ -7412,7 +8100,7 @@ const getQuarterRangeByMonth = value => {
   }
 };
 const QuarterTable = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1s,
+  name: COMPONENT_NAME$1u,
   props: {
     value: Array,
     panelDate: Date,
@@ -7535,9 +8223,9 @@ const QuarterTable = /* @__PURE__ */ vue.defineComponent({
 
 /** @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,
@@ -7577,9 +8265,9 @@ const ShortcutsSelect = /* @__PURE__ */ vue.defineComponent({
 
 /** @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],
@@ -7859,9 +8547,9 @@ const TimeSelect = /* @__PURE__ */ vue.defineComponent({
 
 /** @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,
@@ -7984,9 +8672,9 @@ const getDateIsInRange = (value, type, leftPanelDate, rightPanelDate) => {
   }
   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: {
@@ -8365,9 +9053,9 @@ const DateRangePanel = /* @__PURE__ */ vue.defineComponent({
 
 /** @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,
@@ -8575,9 +9263,9 @@ const isEqualYear$1 = value => {
   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: {
@@ -8752,9 +9440,9 @@ const isEqualYear = value => {
   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: {
@@ -8993,9 +9681,9 @@ const getComparedDate = (leftDate, rightDate) => {
     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, {
@@ -9096,9 +9784,9 @@ const TimeRangePanel = /* @__PURE__ */ vue.defineComponent({
 
 /** @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, {
@@ -9154,7 +9842,7 @@ const TimePanel = /* @__PURE__ */ vue.defineComponent({
 
 /** @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;
@@ -9165,7 +9853,7 @@ const getPanel$1 = type => {
   }
   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({});
@@ -9206,9 +9894,9 @@ const props$U = {
 
 /** @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
@@ -9344,7 +10032,7 @@ const props$R = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1g = 'vc-scroller-track';
+const COMPONENT_NAME$1i = 'vc-scroller-track';
 const BAR_MAP = {
   vertical: {
     scroll: 'scrollTop',
@@ -9364,7 +10052,7 @@ const BAR_MAP = {
   }
 };
 const Track = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1g,
+  name: COMPONENT_NAME$1i,
   props: props$T,
   emits: ['change'],
   inheritAttrs: false,
@@ -9554,9 +10242,9 @@ const Track = /* @__PURE__ */ vue.defineComponent({
 
 /** @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, {
@@ -9791,7 +10479,7 @@ const useScroller = (expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1e = 'vc-scroller';
+const COMPONENT_NAME$1g = 'vc-scroller';
 
 /**
  * 作为备选方案,目前推荐使用ScrollerWheel
@@ -9802,7 +10490,7 @@ const COMPONENT_NAME$1e = 'vc-scroller';
  * 2. 增加了一层嵌套
  */
 const Scroller = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1e,
+  name: COMPONENT_NAME$1g,
   props: props$R,
   emits: ['scroll'],
   setup(props, {
@@ -9863,7 +10551,7 @@ const Scroller = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1d = 'vc-scroller-wheel';
+const COMPONENT_NAME$1f = 'vc-scroller-wheel';
 
 /**
  * 为减少一层嵌套，为去除滚动bar的抖动，使用wheel模拟
@@ -9885,7 +10573,7 @@ const COMPONENT_NAME$1d = 'vc-scroller-wheel';
  * 设置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,
@@ -10074,9 +10762,9 @@ const props$Q = {
 
 /** @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, {
@@ -10265,9 +10953,9 @@ const props$P = {
 
 /** @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'],
@@ -10337,9 +11025,9 @@ const Dropdown = /* @__PURE__ */ vue.defineComponent({
 
 /** @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
   }) {
@@ -10353,9 +11041,9 @@ const DropdownMenu = /* @__PURE__ */ vue.defineComponent({
 
 /** @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: {
@@ -10560,9 +11248,9 @@ const defaults = {
 
 /** @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
@@ -10770,9 +11458,9 @@ const props$O = {
 
 /** @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
@@ -10967,9 +11655,9 @@ const props$N = {
   }
 };
 
-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",
@@ -11503,9 +12191,9 @@ const props$M = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$15 = 'vc-editor';
+const COMPONENT_NAME$17 = 'vc-editor';
 const Editor = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$15,
+  name: COMPONENT_NAME$17,
   props: props$M,
   defaults,
   emits: ['ready', 'blur', 'focus', 'input', 'update:modelValue', 'change'],
@@ -11694,7 +12382,7 @@ const Editor = /* @__PURE__ */ vue.defineComponent({
 
 /** @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;
@@ -11712,7 +12400,7 @@ const setImages = v => {
   return;
 };
 const EditorView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$14,
+  name: COMPONENT_NAME$16,
   props: {
     value: {
       type: String,
@@ -11927,9 +12615,9 @@ const useForm = (expose, options = {}) => {
   });
 };
 
-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);
@@ -12277,9 +12965,9 @@ const useFormItem = (expose) => {
 
 /** @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,
@@ -12347,9 +13035,9 @@ const props$J = {
   }
 };
 
-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, {
@@ -12380,9 +13068,9 @@ const props$I = {
 
 /** @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,
@@ -12437,9 +13125,9 @@ const MFormItem = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-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?.());
   }
@@ -12478,9 +13166,9 @@ const props$H = {
 
 /** @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, {
@@ -12639,7 +13327,7 @@ const IMGStore$1 = new IMGStore();
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$Z = 'vc-image';
+const COMPONENT_NAME$$ = 'vc-image';
 let isSupportObjectFit = false;
 window.addEventListener('DOMContentLoaded', () => {
   isSupportObjectFit = !vcShared.IS_SERVER && document.documentElement.style.objectFit !== undefined;
@@ -12652,7 +13340,7 @@ const ObjectFit = {
   SCALE_DOWN: 'scale-down'
 };
 const Image$1 = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$Z,
+  name: COMPONENT_NAME$$,
   inheritAttrs: false,
   props: props$G,
   setup(props, {
@@ -12869,9 +13557,9 @@ const props$F = {
 
 /** @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
@@ -12897,9 +13585,9 @@ const props$E = {
 
 /** @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
@@ -12916,9 +13604,9 @@ const MImageProcessing = ImageProcessing;
 
 /** @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,
@@ -13007,9 +13695,9 @@ const MInput = /* @__PURE__ */ vue.defineComponent({
 
 /** @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, {
@@ -13058,9 +13746,9 @@ const MInputNumber = /* @__PURE__ */ vue.defineComponent({
 
 /** @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: {
@@ -13137,9 +13825,9 @@ const props$D = {
   }
 };
 
-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 });
@@ -13194,10 +13882,10 @@ const props$C = {
 
 /** @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, {
@@ -13291,11 +13979,11 @@ const props$B = {
 
 /** @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
@@ -13363,9 +14051,9 @@ const props$A = {
   }
 };
 
-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 }) {
@@ -13535,10 +14223,10 @@ const props$z = {
 
 /** @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, {
@@ -13977,9 +14665,9 @@ const props$y = {
 
 /** @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, {
@@ -14191,9 +14879,9 @@ const props$x = {
 
 /** @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, {
@@ -14366,9 +15054,9 @@ const props$w = {
 
 /** @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
@@ -14452,9 +15140,9 @@ const props$u = {
 
 /** @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, {
@@ -14525,9 +15213,9 @@ const props$t = {
 
 /** @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,
@@ -14622,9 +15310,9 @@ const props$s = {
 
 /** @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
@@ -14654,9 +15342,9 @@ const OptionGroup = /* @__PURE__ */ vue.defineComponent({
 
 /** @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,
@@ -14726,9 +15414,9 @@ const SelectAll = /* @__PURE__ */ vue.defineComponent({
 
 /** @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, {
@@ -15022,9 +15710,9 @@ const Select = /* @__PURE__ */ vue.defineComponent({
 
 /** @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, {
@@ -15222,9 +15910,9 @@ const props$r = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$F = 'vc-picker';
+const COMPONENT_NAME$H = 'vc-picker';
 const Picker = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$F,
+  name: COMPONENT_NAME$H,
   props: props$r,
   setup(props, {
     slots
@@ -15287,9 +15975,9 @@ const props$q = {
 
 /** @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'],
@@ -15457,9 +16145,9 @@ const props$p = {
 
 /** @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, {
@@ -15586,9 +16274,9 @@ const props$o = {
 
 /** @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,
@@ -15668,7 +16356,7 @@ const props$n = {
   },
   strokeColor: {
     type: String,
-    default: "#2d8cf0"
+    default: "#456CF6"
   },
   trackColor: {
     type: String,
@@ -15690,9 +16378,9 @@ const props$n = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$B = 'vc-progress-circle';
+const COMPONENT_NAME$D = 'vc-progress-circle';
 const Circle = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$B,
+  name: COMPONENT_NAME$D,
   props: props$n,
   setup(props, {
     slots
@@ -15752,9 +16440,9 @@ const Circle = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$A = 'vc-progress-line';
+const COMPONENT_NAME$C = 'vc-progress-line';
 const Line = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$A,
+  name: COMPONENT_NAME$C,
   props: props$n,
   setup(props) {
     const colorStyle = vue.computed(() => {
@@ -15801,9 +16489,9 @@ const Line = /* @__PURE__ */ vue.defineComponent({
 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
@@ -15965,9 +16653,9 @@ const useRadio = () => {
 
 /** @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, {
@@ -16011,9 +16699,9 @@ const Radio = /* @__PURE__ */ vue.defineComponent({
 
 /** @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],
@@ -16126,9 +16814,9 @@ const useRadioGroup = () => {
 
 /** @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, {
@@ -16149,9 +16837,9 @@ const RadioGroup = /* @__PURE__ */ vue.defineComponent({
 
 /** @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, {
@@ -16195,9 +16883,9 @@ const MRadio = /* @__PURE__ */ vue.defineComponent({
 
 /** @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, {
@@ -16264,9 +16952,9 @@ const props$k = {
 
 /** @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, {
@@ -16468,9 +17156,9 @@ const props$j = {
 
 /** @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
   }) {
@@ -16600,12 +17288,12 @@ const useDirectionKeys = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$r = 'vc-recycle-list-container';
+const COMPONENT_NAME$t = 'vc-recycle-list-container';
 
 // TODO: 抽离
 const transformKey = $__namespace.prefixStyle('transform').camel;
 const Container = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$r,
+  name: COMPONENT_NAME$t,
   props: props$i,
   emits: ['refresh'],
   setup(props, {
@@ -16703,9 +17391,9 @@ const Container = /* @__PURE__ */ vue.defineComponent({
 
 /** @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, {
@@ -17279,9 +17967,9 @@ const props$h = {
 
 /** @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
@@ -17305,9 +17993,9 @@ const props$g = {
 
 /** @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
@@ -17331,9 +18019,9 @@ const props$f = {
 
 /** @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
@@ -17459,9 +18147,9 @@ const useSwitch = (expose) => {
 
 /** @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'],
@@ -17535,9 +18223,9 @@ const Switch = /* @__PURE__ */ vue.defineComponent({
 
 /** @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'],
@@ -18650,9 +19338,9 @@ const useStates = (mapper, $store) => {
 
 /** @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,
@@ -19170,6 +19858,10 @@ const TableHeader = /* @__PURE__ */ vue.defineComponent({
     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',
@@ -19403,7 +20095,7 @@ const TableHeader = /* @__PURE__ */ vue.defineComponent({
         "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',
@@ -19649,9 +20341,9 @@ const props$d = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$j = 'vc-table';
+const COMPONENT_NAME$l = 'vc-table';
 const Table = /* @__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, {
@@ -20854,9 +21546,9 @@ const useTabs = (options = {}) => {
 
 /** @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, {
@@ -21109,9 +21801,9 @@ const useTabsPane = () => {
 
 /** @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
@@ -21166,9 +21858,9 @@ const props$a = {
 
 /** @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, {
@@ -21433,9 +22125,9 @@ const MTabs = /* @__PURE__ */ vue.defineComponent({
 
 /** @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
@@ -21499,9 +22191,9 @@ const props$9 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$e = 'vc-text';
+const COMPONENT_NAME$g = 'vc-text';
 const Text = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$e,
+  name: COMPONENT_NAME$g,
   props: props$9,
   setup(props, {
     emit
@@ -21868,9 +22560,9 @@ const props$8 = {
 
 /** @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],
@@ -21926,9 +22618,9 @@ const Textarea = /* @__PURE__ */ vue.defineComponent({
 
 /** @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,
@@ -22011,9 +22703,9 @@ const props$7 = {
   }
 };
 
-const COMPONENT_NAME$b = "vc-theme";
+const COMPONENT_NAME$d = "vc-theme";
 const Theme = vue.defineComponent({
-  name: COMPONENT_NAME$b,
+  name: COMPONENT_NAME$d,
   props: props$7,
   setup(props, { slots }) {
     const themeId = Utils__namespace.getUid("vc-theme");
@@ -22096,9 +22788,9 @@ const Theme = vue.defineComponent({
   }
 });
 
-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 () => {
@@ -22114,9 +22806,9 @@ const ThemeView = vue.defineComponent({
   }
 });
 
-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 () => {
@@ -22132,9 +22824,9 @@ const ThemeText = vue.defineComponent({
   }
 });
 
-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 () => {
@@ -22186,12 +22878,12 @@ const props$6 = {
 
 /** @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({});
@@ -22227,9 +22919,9 @@ const props$5 = {
 
 /** @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
@@ -22256,9 +22948,9 @@ const props$4 = {
 
 /** @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
@@ -22766,21 +23458,68 @@ class TreeStore {
       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) {
@@ -23008,9 +23747,9 @@ const props$3 = {
 
 /** @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, {
@@ -23509,9 +24248,9 @@ const props$2 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$3 = 'vc-tree';
+const COMPONENT_NAME$5 = 'vc-tree';
 const Tree = /* @__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, {
@@ -23706,6 +24445,225 @@ const Tree = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
+/** @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, {
+          "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, {
+        "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",
@@ -23714,7 +24672,18 @@ const treeKeys = [
 ];
 const props$1 = {
   ...props$1a,
-  ...lodashEs.pick(props$2, treeKeys)
+  ...lodashEs.pick(props$2, treeKeys),
+  autoWidth: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * 级联列模式：与 Cascader 相同的 hover 展开下一级，勾选逻辑与树形模式一致
+   */
+  cascader: {
+    type: Boolean,
+    default: false
+  }
 };
 
 /** @jsxImportSource vue */
@@ -23740,12 +24709,37 @@ const TreeSelect = /* @__PURE__ */ vue.defineComponent({
     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';
     });
@@ -23762,17 +24756,34 @@ const TreeSelect = /* @__PURE__ */ vue.defineComponent({
         '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 同步, 外部的数据改变时不会触发
@@ -23785,8 +24796,9 @@ const TreeSelect = /* @__PURE__ */ vue.defineComponent({
         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);
@@ -23811,8 +24823,15 @@ const TreeSelect = /* @__PURE__ */ vue.defineComponent({
     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 => {
@@ -23849,6 +24868,7 @@ const TreeSelect = /* @__PURE__ */ vue.defineComponent({
       multiple,
       isActive,
       current: currentValue,
+      currentValueGroups,
       // for portal
       toggle(v) {
         v = typeof v === 'boolean' ? v : !isActive.value;
@@ -23863,7 +24883,7 @@ const TreeSelect = /* @__PURE__ */ vue.defineComponent({
         "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'],
@@ -23880,22 +24900,22 @@ const TreeSelect = /* @__PURE__ */ vue.defineComponent({
           return vue.createVNode(Input, {
             "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}...`]
@@ -23928,16 +24948,23 @@ const TreeSelect = /* @__PURE__ */ vue.defineComponent({
           }, [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, {
-              "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)]
@@ -24513,6 +25540,7 @@ exports.ButtonGroup = ButtonGroup;
 exports.Calendar = Calendar;
 exports.Card = Card;
 exports.Carousel = Carousel;
+exports.CarouselItem = CarouselItem;
 exports.Cascader = Cascader;
 exports.Chart = Chart;
 exports.Checkbox = Checkbox;
@@ -24558,6 +25586,7 @@ exports.MButtonGroup = MButtonGroup;
 exports.MCalendar = MCalendar;
 exports.MCard = MCard;
 exports.MCarousel = MCarousel;
+exports.MCarouselItem = MCarouselItem;
 exports.MCascader = MCascader;
 exports.MChart = MChart;
 exports.MCheckbox = MCheckbox;