@deot/vc-components 1.0.2 → 1.0.4

package/dist/index.cjs

@@ -4,12 +4,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const vue = require('vue');
 const lodashEs = require('lodash-es');
+const helperResize = require('@deot/helper-resize');
 const Utils = require('@deot/helper-utils');
 const helperValidator = require('@deot/helper-validator');
 const vcShared = require('@deot/vc-shared');
 const $ = require('@deot/helper-dom');
 const vcHooks = require('@deot/vc-hooks');
-const helperResize = require('@deot/helper-resize');
+const helperCache = require('@deot/helper-cache');
 const helperScheduler = require('@deot/helper-scheduler');
 const helperWheel = require('@deot/helper-wheel');
 const Load = require('@deot/helper-load');
@@ -79,7 +80,7 @@ class Instance {
 }
 const VcInstance = new Instance();
 
-const props$1g = {
+const props$1h = {
   tag: {
     type: String,
     default: "div"
@@ -88,10 +89,10 @@ const props$1g = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1w = 'vc-action-sheet';
+const COMPONENT_NAME$1x = 'vc-action-sheet';
 const ActionSheet = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1w,
-  props: props$1g,
+  name: COMPONENT_NAME$1x,
+  props: props$1h,
   setup(props, {
     slots
   }) {
@@ -105,7 +106,7 @@ const ActionSheet = /* @__PURE__ */ vue.defineComponent({
 
 const MActionSheet = ActionSheet;
 
-const props$1f = {
+const props$1g = {
   modelValue: {
     type: Boolean,
     default: true
@@ -132,7 +133,7 @@ const props$1f = {
   }
 };
 
-const props$1e = {
+const props$1f = {
   type: String,
   inherit: {
     type: Boolean,
@@ -277,10 +278,10 @@ const IconManager = new Manager();
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1v = 'vc-icon';
+const COMPONENT_NAME$1w = 'vc-icon';
 const Icon = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1v,
-  props: props$1e,
+  name: COMPONENT_NAME$1w,
+  props: props$1f,
   setup(props) {
     const viewBox = vue.ref('0 0 1024 1024');
     const path = vue.ref([]);
@@ -313,7 +314,7 @@ const Icon = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const props$1d = {
+const props$1e = {
   /**
    * 进入/离开持续时间
    * {enter: 300, leave: 300}
@@ -478,10 +479,10 @@ const useTransition = () => {
   };
 };
 
-const COMPONENT_NAME$1u = "vc-transition";
+const COMPONENT_NAME$1v = "vc-transition";
 const Transition = vue.defineComponent({
-  name: COMPONENT_NAME$1u,
-  props: props$1d,
+  name: COMPONENT_NAME$1v,
+  props: props$1e,
   // 当不声明emits的情况下，事件存在于attrs中
   inheritAttrs: false,
   setup(props, { slots, attrs }) {
@@ -501,10 +502,10 @@ const Transition = vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$1t = "vc-transition-collapse";
+const COMPONENT_NAME$1u = "vc-transition-collapse";
 const TransitionCollapse = vue.defineComponent({
-  name: COMPONENT_NAME$1t,
-  props: props$1d,
+  name: COMPONENT_NAME$1u,
+  props: props$1e,
   // 当不声明emits的情况下，事件存在于attrs中
   inheritAttrs: false,
   setup(props, { slots, attrs: _attrs }) {
@@ -622,11 +623,11 @@ const TransitionCollapse = vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$1s = "vc-transition-fade";
+const COMPONENT_NAME$1t = "vc-transition-fade";
 const TransitionFade = vue.defineComponent({
-  name: COMPONENT_NAME$1s,
+  name: COMPONENT_NAME$1t,
   props: {
-    ...props$1d,
+    ...props$1e,
     // inheritAttrs必须是false
     style: {
       type: Object,
@@ -659,11 +660,11 @@ const TransitionFade = vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$1r = "vc-transition-scale";
+const COMPONENT_NAME$1s = "vc-transition-scale";
 const TransitionScale = vue.defineComponent({
-  name: COMPONENT_NAME$1r,
+  name: COMPONENT_NAME$1s,
   props: {
-    ...props$1d,
+    ...props$1e,
     mode: {
       type: String,
       default: "both",
@@ -701,11 +702,11 @@ const TransitionScale = vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$1q = "vc-transition-slide";
+const COMPONENT_NAME$1r = "vc-transition-slide";
 const TransitionSlide = vue.defineComponent({
-  name: COMPONENT_NAME$1q,
+  name: COMPONENT_NAME$1r,
   props: {
-    ...props$1d,
+    ...props$1e,
     mode: {
       type: String,
       default: "left",
@@ -743,11 +744,11 @@ const TransitionSlide = vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$1p = "vc-transition-zoom";
+const COMPONENT_NAME$1q = "vc-transition-zoom";
 const TransitionZoom = vue.defineComponent({
-  name: COMPONENT_NAME$1p,
+  name: COMPONENT_NAME$1q,
   props: {
-    ...props$1d,
+    ...props$1e,
     mode: {
       type: String,
       default: "x",
@@ -787,7 +788,7 @@ const TransitionZoom = vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1o = 'vc-alert';
+const COMPONENT_NAME$1p = 'vc-alert';
 
 // [color, borderColor, backgroundColor], -> CSS
 const THEME_MAP = {
@@ -797,8 +798,8 @@ const THEME_MAP = {
   warning: ['#ffbf00', '#ffe58f', '#fffbe6']
 };
 const Alert = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1o,
-  props: props$1f,
+  name: COMPONENT_NAME$1p,
+  props: props$1g,
   setup(props, {
     slots,
     emit
@@ -887,7 +888,7 @@ const Alert = /* @__PURE__ */ vue.defineComponent({
 
 const MAlert = Alert;
 
-const props$1c = {
+const props$1d = {
   tag: {
     type: String,
     default: "div"
@@ -896,10 +897,10 @@ const props$1c = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1n = 'vc-artboard';
+const COMPONENT_NAME$1o = 'vc-artboard';
 const Artboard = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1n,
-  props: props$1c,
+  name: COMPONENT_NAME$1o,
+  props: props$1d,
   setup(props, {
     slots
   }) {
@@ -913,7 +914,7 @@ const Artboard = /* @__PURE__ */ vue.defineComponent({
 
 const MArtboard = Artboard;
 
-const props$1b = {
+const props$1c = {
   size: {
     type: Number,
     default: 28
@@ -937,10 +938,10 @@ const props$1b = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1m = 'vc-spin';
+const COMPONENT_NAME$1n = 'vc-spin';
 const Spin = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1m,
-  props: props$1b,
+  name: COMPONENT_NAME$1n,
+  props: props$1c,
   setup(props, {
     slots
   }) {
@@ -974,7 +975,7 @@ const Spin = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const props$1a = {
+const props$1b = {
   wait: {
     type: Number,
     default: 250
@@ -990,10 +991,10 @@ const props$1a = {
   exclude: RegExp
 };
 
-const COMPONENT_NAME$1l = "vc-debounce";
+const COMPONENT_NAME$1m = "vc-debounce";
 const Debounce = vue.defineComponent({
-  name: COMPONENT_NAME$1l,
-  props: props$1a,
+  name: COMPONENT_NAME$1m,
+  props: props$1b,
   /**
    * 不声明emits使得事件被透传放入attrs中, 这样可以让所有的事件透传
    * 如事件onClick
@@ -1034,7 +1035,7 @@ const Debounce = vue.defineComponent({
   }
 });
 
-const props$19 = {
+const props$1a = {
   tag: {
     type: String,
     default: "button"
@@ -1064,11 +1065,11 @@ const props$19 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1k = 'vc-button';
+const COMPONENT_NAME$1l = 'vc-button';
 const Button = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1k,
+  name: COMPONENT_NAME$1l,
   emits: ['click'],
-  props: props$19,
+  props: props$1a,
   setup(props, {
     slots
   }) {
@@ -1125,7 +1126,7 @@ const Button = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const props$18 = {
+const props$19 = {
   vertical: {
     type: Boolean,
     default: false
@@ -1146,10 +1147,10 @@ const props$18 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1j = 'vc-button-group';
+const COMPONENT_NAME$1k = 'vc-button-group';
 const ButtonGroup = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1j,
-  props: props$18,
+  name: COMPONENT_NAME$1k,
+  props: props$19,
   setup(props, {
     slots
   }) {
@@ -1173,7 +1174,7 @@ const ButtonGroup = /* @__PURE__ */ vue.defineComponent({
 const MButton = Button;
 const MButtonGroup = ButtonGroup;
 
-const props$17 = {
+const props$18 = {
   tag: {
     type: String,
     default: "div"
@@ -1182,10 +1183,10 @@ const props$17 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1i = 'vc-calendar';
+const COMPONENT_NAME$1j = 'vc-calendar';
 const Calendar = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1i,
-  props: props$17,
+  name: COMPONENT_NAME$1j,
+  props: props$18,
   setup(props, {
     slots
   }) {
@@ -1199,7 +1200,7 @@ const Calendar = /* @__PURE__ */ vue.defineComponent({
 
 const MCalendar = Calendar;
 
-const props$16 = {
+const props$17 = {
   border: {
     type: Boolean,
     default: true
@@ -1222,10 +1223,10 @@ const props$16 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1h = 'vc-card';
+const COMPONENT_NAME$1i = 'vc-card';
 const Card = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1h,
-  props: props$16,
+  name: COMPONENT_NAME$1i,
+  props: props$17,
   setup(props, {
     slots
   }) {
@@ -1251,7 +1252,7 @@ const Card = /* @__PURE__ */ vue.defineComponent({
 
 const MCard = Card;
 
-const props$15 = {
+const props$16 = {
   tag: {
     type: String,
     default: "div"
@@ -1260,10 +1261,10 @@ const props$15 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1g = 'vc-carousel';
+const COMPONENT_NAME$1h = 'vc-carousel';
 const Carousel = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1g,
-  props: props$15,
+  name: COMPONENT_NAME$1h,
+  props: props$16,
   setup(props, {
     slots
   }) {
@@ -1277,7 +1278,7 @@ const Carousel = /* @__PURE__ */ vue.defineComponent({
 
 const MCarousel = Carousel;
 
-const props$14 = {
+const props$15 = {
   tag: {
     type: String,
     default: "div"
@@ -1286,10 +1287,10 @@ const props$14 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1f = 'vc-cascader';
+const COMPONENT_NAME$1g = 'vc-cascader';
 const Cascader = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1f,
-  props: props$14,
+  name: COMPONENT_NAME$1g,
+  props: props$15,
   setup(props, {
     slots
   }) {
@@ -1303,25 +1304,167 @@ const Cascader = /* @__PURE__ */ vue.defineComponent({
 
 const MCascader = Cascader;
 
-const props$13 = {
-  tag: {
-    type: String,
-    default: "div"
-  }
+const EVENTS = [
+  "legendselectchanged",
+  "legendselected",
+  "legendunselected",
+  "legendunscroll",
+  "datazoom",
+  "datarangeselected",
+  "timelinechanged",
+  "timelineplaychanged",
+  "restore",
+  "dataviewchanged",
+  "magictypechanged",
+  "geoselectchanged",
+  "geoselected",
+  "geounselected",
+  "pieselectchanged",
+  "pieselected",
+  "pieunselected",
+  "mapselectchanged",
+  "mapselected",
+  "mapunselected",
+  "axisareaselected",
+  "focusnodeadjacency",
+  "unfocusnodeadjacency",
+  "brush",
+  "brushselected",
+  "rendered",
+  "finished",
+  "click",
+  "dblclick",
+  "mouseover",
+  "mouseout",
+  "mousemove",
+  "mousedown",
+  "mouseup",
+  "globalout",
+  "contextmenu"
+];
+
+const props$14 = {
+  options: Object,
+  pluginOptions: Object,
+  theme: [String, Object],
+  group: String,
+  autoResize: Boolean,
+  watchShallow: Boolean,
+  manualUpdate: Boolean
 };
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1e = 'vc-chart';
+const COMPONENT_NAME$1f = 'vc-chart';
 const Chart = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1e,
-  props: props$13,
+  name: COMPONENT_NAME$1f,
+  props: props$14,
+  emits: [...EVENTS, 'ready'],
   setup(props, {
+    emit,
     slots
   }) {
+    const instance = vue.getCurrentInstance();
+    const chart = vue.shallowRef(null);
+    const echartsInstance = vue.shallowRef(null);
+    const manualOptions = vue.shallowRef(null);
+    let resizeHandler;
+    let lastArea = 0;
+    const getArea = () => {
+      const el = instance.vnode.el;
+      return el.offsetWidth * el.offsetHeight;
+    };
+    const mergeOptions = (options, notMerge, lazyUpdate) => {
+      if (props.manualUpdate) {
+        manualOptions.value = options;
+      }
+      if (!chart.value) return;
+      chart.value.setOption(options, notMerge, lazyUpdate);
+    };
+    const init = () => {
+      if (chart.value || !echartsInstance.value) {
+        return;
+      }
+      chart.value = echartsInstance.value.init(instance.vnode.el, props.theme, props.pluginOptions);
+      if (props.group) {
+        chart.value.group = props.group;
+      }
+      chart.value.setOption(manualOptions.value || props.options || {}, true);
+
+      // expose ECharts events as custom events
+      EVENTS.forEach(event => {
+        chart.value.on(event, params => {
+          emit(event, params);
+        });
+      });
+      if (props.autoResize) {
+        lastArea = getArea();
+        resizeHandler && helperResize.Resize.off(instance.vnode.el, resizeHandler);
+        resizeHandler = lodashEs.debounce(() => {
+          if (lastArea === 0) {
+            // emulate initial render for initially hidden charts
+            mergeOptions({}, true);
+            chart.value.resize();
+            mergeOptions(props.options || manualOptions.value || {}, true);
+          } else {
+            chart.value.resize();
+          }
+          lastArea = getArea();
+        }, 100, {
+          leading: true
+        });
+        helperResize.Resize.on(instance.vnode.el, resizeHandler);
+      }
+    };
+    const destroy = () => {
+      if (!chart.value) return;
+      if (props.autoResize) {
+        resizeHandler && helperResize.Resize.off(instance.vnode.el, resizeHandler);
+        resizeHandler = null;
+      }
+      chart.value.dispose();
+      chart.value = null;
+    };
+    const refresh = () => {
+      if (!chart.value) return;
+      destroy();
+      init();
+    };
+    vue.watch(() => props.group, v => {
+      chart.value && (chart.value.group = v);
+    });
+    if (!props.manualUpdate) {
+      vue.watch(() => props.options, (val, oldVal) => {
+        if (!chart.value && val) {
+          init();
+        } else {
+          chart.value.setOption(val, val !== oldVal);
+        }
+      }, {
+        deep: !props.watchShallow
+      });
+    }
+    const watched = ['theme', 'pluginOptions', 'autoResize', 'manualUpdate', 'watchShallow'];
+    watched.forEach(prop => vue.watch(() => props[prop], refresh, {
+      deep: true
+    }));
+    vue.onMounted(async () => {
+      const echarts = window.echarts || (await import('echarts'));
+      // 兼容webpack 3.0/4.0 写法
+      echartsInstance.value = echarts.default ? echarts.default : echarts;
+      props.options && init();
+      emit('ready', {
+        instance: chart.value,
+        dependencies: {
+          echarts: echartsInstance.value
+        }
+      });
+    });
+    vue.onUnmounted(destroy);
     return () => {
       return vue.createVNode("div", {
-        "class": "vc-chart"
+        "class": "vc-chart",
+        "style": "width: 100%; height: 100%"
       }, [slots?.default?.()]);
     };
   }
@@ -1329,7 +1472,7 @@ const Chart = /* @__PURE__ */ vue.defineComponent({
 
 const MChart = Chart;
 
-const props$12 = {
+const props$13 = {
   tag: {
     type: String,
     default: "div"
@@ -1338,10 +1481,10 @@ const props$12 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1d = 'vc-checkbox';
+const COMPONENT_NAME$1e = 'vc-checkbox';
 const Checkbox = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1d,
-  props: props$12,
+  name: COMPONENT_NAME$1e,
+  props: props$13,
   setup(props, {
     slots
   }) {
@@ -1355,7 +1498,7 @@ const Checkbox = /* @__PURE__ */ vue.defineComponent({
 
 const MCheckbox = Checkbox;
 
-const props$11 = {
+const props$12 = {
   tag: {
     type: String,
     default: "div"
@@ -1364,10 +1507,10 @@ const props$11 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1c = 'vc-clipboard';
+const COMPONENT_NAME$1d = 'vc-clipboard';
 const Clipboard = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1c,
-  props: props$11,
+  name: COMPONENT_NAME$1d,
+  props: props$12,
   setup(props, {
     slots
   }) {
@@ -1381,7 +1524,7 @@ const Clipboard = /* @__PURE__ */ vue.defineComponent({
 
 const MClipboard = Clipboard;
 
-const props$10 = {
+const props$11 = {
   tag: {
     type: String,
     default: "div"
@@ -1390,10 +1533,10 @@ const props$10 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1b = 'vc-collapse';
+const COMPONENT_NAME$1c = 'vc-collapse';
 const Collapse = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1b,
-  props: props$10,
+  name: COMPONENT_NAME$1c,
+  props: props$11,
   setup(props, {
     slots
   }) {
@@ -1407,7 +1550,7 @@ const Collapse = /* @__PURE__ */ vue.defineComponent({
 
 const MCollapse = Collapse;
 
-const props$$ = {
+const props$10 = {
   tag: {
     type: String,
     default: "div"
@@ -1416,10 +1559,10 @@ const props$$ = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1a = 'vc-color-picker';
+const COMPONENT_NAME$1b = 'vc-color-picker';
 const ColorPicker = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$1a,
-  props: props$$,
+  name: COMPONENT_NAME$1b,
+  props: props$10,
   setup(props, {
     slots
   }) {
@@ -1433,7 +1576,7 @@ const ColorPicker = /* @__PURE__ */ vue.defineComponent({
 
 const MColorPicker = ColorPicker;
 
-const props$_ = {
+const props$$ = {
   tag: {
     type: String,
     default: "div"
@@ -1442,10 +1585,10 @@ const props$_ = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$19 = 'vc-countdown';
+const COMPONENT_NAME$1a = 'vc-countdown';
 const Countdown = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$19,
-  props: props$_,
+  name: COMPONENT_NAME$1a,
+  props: props$$,
   setup(props, {
     slots
   }) {
@@ -1459,17 +1602,17 @@ const Countdown = /* @__PURE__ */ vue.defineComponent({
 
 const MCountdown = Countdown;
 
-const props$Z = {
+const props$_ = {
   render: {
     type: Function,
     default: () => null
   }
 };
 
-const COMPONENT_NAME$18 = "vc-customer";
+const COMPONENT_NAME$19 = "vc-customer";
 const Customer = vue.defineComponent({
-  name: COMPONENT_NAME$18,
-  props: props$Z,
+  name: COMPONENT_NAME$19,
+  props: props$_,
   setup(props, context) {
     return () => vue.h(() => {
       return props.render(context.attrs, context);
@@ -1479,7 +1622,7 @@ const Customer = vue.defineComponent({
 
 const MCustomer = Customer;
 
-const props$Y = {
+const props$Z = {
   tag: {
     type: String,
     default: "div"
@@ -1488,10 +1631,10 @@ const props$Y = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$17 = 'vc-date-picker';
+const COMPONENT_NAME$18 = 'vc-date-picker';
 const DatePicker = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$17,
-  props: props$Y,
+  name: COMPONENT_NAME$18,
+  props: props$Z,
   setup(props, {
     slots
   }) {
@@ -1505,7 +1648,7 @@ const DatePicker = /* @__PURE__ */ vue.defineComponent({
 
 const MDatePicker = DatePicker;
 
-const props$X = {
+const props$Y = {
   tag: {
     type: String,
     default: "div"
@@ -1514,10 +1657,10 @@ const props$X = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$16 = 'vc-divider';
+const COMPONENT_NAME$17 = 'vc-divider';
 const Divider = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$16,
-  props: props$X,
+  name: COMPONENT_NAME$17,
+  props: props$Y,
   setup(props, {
     slots
   }) {
@@ -1531,7 +1674,7 @@ const Divider = /* @__PURE__ */ vue.defineComponent({
 
 const MDivider = Divider;
 
-const props$W = {
+const props$X = {
   tag: {
     type: String,
     default: "div"
@@ -1540,10 +1683,10 @@ const props$W = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$15 = 'vc-drawer';
+const COMPONENT_NAME$16 = 'vc-drawer';
 const Drawer = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$15,
-  props: props$W,
+  name: COMPONENT_NAME$16,
+  props: props$X,
   setup(props, {
     slots
   }) {
@@ -1557,7 +1700,7 @@ const Drawer = /* @__PURE__ */ vue.defineComponent({
 
 const MDrawer = Drawer;
 
-const props$V = {
+const props$W = {
   tag: {
     type: String,
     default: "div"
@@ -1566,10 +1709,10 @@ const props$V = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$14 = 'vc-dropdown';
+const COMPONENT_NAME$15 = 'vc-dropdown';
 const Dropdown = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$14,
-  props: props$V,
+  name: COMPONENT_NAME$15,
+  props: props$W,
   setup(props, {
     slots
   }) {
@@ -1583,7 +1726,7 @@ const Dropdown = /* @__PURE__ */ vue.defineComponent({
 
 const MDropdown = Dropdown;
 
-const props$U = {
+const props$V = {
   tag: {
     type: String,
     default: "div"
@@ -1592,10 +1735,10 @@ const props$U = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$13 = 'vc-editor';
+const COMPONENT_NAME$14 = 'vc-editor';
 const Editor = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$13,
-  props: props$U,
+  name: COMPONENT_NAME$14,
+  props: props$V,
   setup(props, {
     slots
   }) {
@@ -1609,7 +1752,7 @@ const Editor = /* @__PURE__ */ vue.defineComponent({
 
 const MEditor = Editor;
 
-const props$T = {
+const props$U = {
   tag: {
     type: String,
     default: "div"
@@ -1618,10 +1761,10 @@ const props$T = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$12 = 'vc-expand';
+const COMPONENT_NAME$13 = 'vc-expand';
 const Expand = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$12,
-  props: props$T,
+  name: COMPONENT_NAME$13,
+  props: props$U,
   setup(props, {
     slots
   }) {
@@ -1635,7 +1778,7 @@ const Expand = /* @__PURE__ */ vue.defineComponent({
 
 const MExpand = Expand;
 
-const props$S = {
+const props$T = {
   tag: {
     type: String,
     default: "form"
@@ -1762,10 +1905,10 @@ const useForm = (expose, options = {}) => {
   });
 };
 
-const COMPONENT_NAME$11 = "vc-form";
+const COMPONENT_NAME$12 = "vc-form";
 const Form = vue.defineComponent({
-  name: COMPONENT_NAME$11,
-  props: props$S,
+  name: COMPONENT_NAME$12,
+  props: props$T,
   setup(props, { slots, expose }) {
     useForm(expose);
     return () => {
@@ -1781,7 +1924,7 @@ const Form = vue.defineComponent({
   }
 });
 
-const props$R = {
+const props$S = {
   label: {
     type: String,
     default: ""
@@ -2079,10 +2222,10 @@ const useFormItem = (expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$10 = 'vc-form-item';
+const COMPONENT_NAME$11 = 'vc-form-item';
 const FormItem = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$10,
-  props: props$R,
+  name: COMPONENT_NAME$11,
+  props: props$S,
   setup(props, {
     slots,
     expose
@@ -2134,8 +2277,8 @@ const FormItem = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const props$Q = {
-  ...props$S,
+const props$R = {
+  ...props$T,
   showToast: {
     type: Boolean,
     default: false
@@ -2146,7 +2289,7 @@ const props$Q = {
   }
 };
 
-const props$P = {
+const props$Q = {
   content: [String, Function],
   maskClosable: {
     type: Boolean,
@@ -2174,11 +2317,11 @@ const MTransitionZoom = TransitionZoom;
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$$ = 'vcm-toast';
+const COMPONENT_NAME$10 = 'vcm-toast';
 const MToastView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$$,
+  name: COMPONENT_NAME$10,
   emits: ['close', 'portal-fulfilled'],
-  props: props$P,
+  props: props$Q,
   setup(props, {
     emit,
     expose
@@ -2293,7 +2436,7 @@ class PortalLeaf {
   }
 }
 
-const COMPONENT_NAME$_ = "vc-portal";
+const COMPONENT_NAME$$ = "vc-portal";
 class Portal {
   /**
    * 清理Portals类型组件
@@ -2345,7 +2488,7 @@ class Portal {
     this.wrapper = wrapper;
     this.globalOptions = {
       ...options,
-      name: options?.name || wrapper.name || Utils__namespace.getUid(COMPONENT_NAME$_)
+      name: options?.name || wrapper.name || Utils__namespace.getUid(COMPONENT_NAME$$)
     };
   }
   popup(propsData, options) {
@@ -2444,7 +2587,7 @@ class Portal {
       ...rest
     } = options;
     let useAllNodes = fragment;
-    const name = multiple ? `${name$}__${Utils__namespace.getUid(COMPONENT_NAME$_)}` : name$;
+    const name = multiple ? `${name$}__${Utils__namespace.getUid(COMPONENT_NAME$$)}` : name$;
     const container = document.createElement(tag);
     const root = typeof el === "object" ? el : document.querySelector(el || "body");
     !alive && Portal.leafs.get(name)?.destroy();
@@ -2478,7 +2621,7 @@ class Portal {
     } else {
       const wrapper = this.wrapper;
       const app = vue.createApp({
-        name: COMPONENT_NAME$_,
+        name: COMPONENT_NAME$$,
         parent,
         setup() {
           if (alive) {
@@ -2583,21 +2726,21 @@ class Portal {
   }
 }
 
-const props$O = {
+const props$P = {
   tag: {
     type: String,
     default: "div"
   }
 };
 
-const COMPONENT_NAME$Z = 'vc-portal-view';
+const COMPONENT_NAME$_ = 'vc-portal-view';
 
 /**
  * 写法不同，但与vue@2.x 保持一致
  */
 const PortalView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$Z,
-  props: props$O,
+  name: COMPONENT_NAME$_,
+  props: props$P,
   setup(props, {
     slots
   }) {
@@ -2649,10 +2792,10 @@ const MToast$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
 	warning: warning$3
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const COMPONENT_NAME$Y = "vcm-form";
+const COMPONENT_NAME$Z = "vcm-form";
 const MForm = vue.defineComponent({
-  name: COMPONENT_NAME$Y,
-  props: props$Q,
+  name: COMPONENT_NAME$Z,
+  props: props$R,
   setup(props, { slots, expose }) {
     useForm(expose, {
       throwToast(message) {
@@ -2672,8 +2815,8 @@ const MForm = vue.defineComponent({
   }
 });
 
-const props$N = {
-  ...props$R,
+const props$O = {
+  ...props$S,
   indent: {
     type: Number,
     default: 12
@@ -2682,10 +2825,10 @@ const props$N = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$X = 'vcm-form-item';
+const COMPONENT_NAME$Y = 'vcm-form-item';
 const MFormItem = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$X,
-  props: props$N,
+  name: COMPONENT_NAME$Y,
+  props: props$O,
   setup(props, {
     slots,
     expose
@@ -2738,9 +2881,9 @@ const MFormItem = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const COMPONENT_NAME$W = "vc-fragment";
+const COMPONENT_NAME$X = "vc-fragment";
 const Fragment = vue.defineComponent({
-  name: COMPONENT_NAME$W,
+  name: COMPONENT_NAME$X,
   setup(_, { slots }) {
     return () => vue.h(vue.Fragment, slots.default?.());
   }
@@ -2748,7 +2891,7 @@ const Fragment = vue.defineComponent({
 
 const MFragment = Fragment;
 
-const props$M = {
+const props$N = {
   tag: {
     type: String,
     default: "div"
@@ -2757,10 +2900,10 @@ const props$M = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$V = 'vc-html-to-image';
+const COMPONENT_NAME$W = 'vc-html-to-image';
 const HTMLToImage = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$V,
-  props: props$M,
+  name: COMPONENT_NAME$W,
+  props: props$N,
   setup(props, {
     slots
   }) {
@@ -2776,33 +2919,275 @@ const MHTMLToImage = HTMLToImage;
 
 const MIcon = Icon;
 
-const props$L = {
-  tag: {
-    type: String,
-    default: "div"
-  }
+const props$M = {
+  src: String,
+  fit: String,
+  lazy: Boolean,
+  wrapper: [Object, String]
 };
 
-/** @jsxImportSource vue */
-
-const COMPONENT_NAME$U = 'vc-image';
-const Image = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$U,
-  props: props$L,
+class IMGStore {
+  map;
+  constructor() {
+    this.map = helperCache.Storage.get("@wya/vc-img:", { session: true }) || {};
+  }
+  add(src, opts = {}) {
+    const { originW, originH } = opts;
+    if (this.map[src] && originW && originH) return;
+    this.map[src] = {
+      originW,
+      originH
+    };
+    helperCache.Storage.set("@wya/vc-img:", this.map, { session: true });
+  }
+  getSize(src, opts = {}) {
+    const { clientW, clientH, style, wrapperW } = opts;
+    if (!this.map[src]) return {};
+    const { originW, originH } = this.map[src];
+    if (style.width && clientW > 1) {
+      return {
+        w: clientW,
+        h: clientW / originW * originH
+      };
+    } else if (style.height && clientH > 1) {
+      return {
+        w: clientH / originH * originW,
+        h: clientH
+      };
+    } else if (wrapperW && !style.height && !style.width) {
+      if (originW <= wrapperW) {
+        return {
+          w: originW,
+          h: originH
+        };
+      } else {
+        return {
+          w: wrapperW / originW * originW,
+          h: wrapperW / originW * originH
+        };
+      }
+    } else {
+      return {
+        w: originW,
+        h: originH
+      };
+    }
+  }
+}
+const IMGStore$1 = new IMGStore();
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$V = 'vc-image';
+let isSupportObjectFit = false;
+window.addEventListener('DOMContentLoaded', () => {
+  isSupportObjectFit = !vcShared.IS_SERVER && document.documentElement.style.objectFit !== undefined;
+});
+const ObjectFit = {
+  NONE: 'none',
+  CONTAIN: 'contain',
+  COVER: 'cover',
+  FILL: 'fill',
+  SCALE_DOWN: 'scale-down'
+};
+const Image = /* @__PURE__ */ vue.defineComponent({
+  name: COMPONENT_NAME$V,
+  inheritAttrs: false,
+  props: props$M,
   setup(props, {
-    slots
+    slots,
+    emit
   }) {
+    const instance = vue.getCurrentInstance();
+    const its = vcHooks.useAttrs({
+      merge: false,
+      exclude: ['onLoad', 'onError']
+    });
+    const isLoading = vue.ref(true);
+    const isError = vue.ref(false);
+    const isActive = vue.ref(!props.lazy);
+    const isAuto = vue.ref(false);
+    const originW = vue.ref(0);
+    const originH = vue.ref(0);
+    const pStyle = vue.ref({});
+    const scroller = vue.ref(null);
+    const setScroller = () => {
+      const {
+        wrapper
+      } = props;
+      if (typeof wrapper === 'object') {
+        scroller.value = wrapper;
+      } else if (typeof wrapper === 'string') {
+        scroller.value = document.querySelector(wrapper);
+      } else {
+        scroller.value = $__namespace.getScroller(instance.vnode.el);
+      }
+    };
+    const initPlaceholder = () => {
+      isAuto.value = instance.vnode.el.clientHeight === 1 || instance.vnode.el.clientWidth === 1;
+
+      // el上是否有width和height
+      const {
+        width,
+        height
+      } = instance.vnode.el.style;
+      if (width && height) return;
+      const {
+        w,
+        h
+      } = IMGStore$1.getSize(props.src, {
+        clientW: instance.vnode.el.clientWidth,
+        clientH: instance.vnode.el.clientHeight,
+        style: {
+          width,
+          height
+        },
+        wrapperW: scroller.value && scroller.value.clientWidth,
+        // TODO
+        wrapperH: scroller.value && scroller.value.clientHeight
+      });
+      if (w && h) {
+        pStyle.value = {
+          width: `${w}px`,
+          height: `${h}px`
+        };
+      }
+    };
+    let handleLazyLoad;
+    const removeLazyLoadListener = () => {
+      if (!scroller.value || !handleLazyLoad) return;
+      scroller.value.removeEventListener('scroll', handleLazyLoad);
+      scroller.value = null;
+      handleLazyLoad = null;
+    };
+    const addLazyLoadListener = () => {
+      if (scroller.value) {
+        handleLazyLoad = lodashEs.throttle(() => {
+          if ($__namespace.contains(scroller.value, instance.vnode.el)) {
+            isActive.value = true;
+            removeLazyLoadListener();
+          }
+        }, 200);
+        scroller.value.addEventListener('scroll', handleLazyLoad);
+        handleLazyLoad();
+      }
+    };
+    const handleLoad = (e, img) => {
+      originW.value = img.naturalWidth || img.width;
+      originH.value = img.naturalHeight || img.height;
+      isLoading.value = false;
+      emit('load', e, img, instance);
+      IMGStore$1.add(props.src, {
+        originW: originW.value,
+        originH: originH.value
+      });
+    };
+    const handleError = (e, img) => {
+      isLoading.value = false;
+      isError.value = true;
+      emit('error', e, img, instance);
+    };
+    const loadImage = () => {
+      if (!props.src) return;
+      // reset status
+      isLoading.value = true;
+      isError.value = false;
+      const img = new window.Image();
+      img.onload = e => handleLoad(e, img);
+      img.onerror = e => handleError(e, img);
+
+      // bind html attrs
+      Object.keys(its.value.attrs || {}).forEach(key => img.setAttribute(key, its.value.attrs[key]));
+      img.src = props.src;
+    };
+    const hackFit = fit => {
+      const {
+        clientWidth: elW,
+        clientHeight: elH
+      } = instance.vnode.el;
+      if (!originW.value || !originH.value || !elW || !elH) return {};
+      const vertical = originW.value / originH.value < 1;
+      if (fit === ObjectFit.SCALE_DOWN) {
+        const isSmaller = originW.value < elW && originH.value < elH;
+        fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN;
+      }
+      switch (fit) {
+        case ObjectFit.NONE:
+          return {
+            width: 'auto',
+            height: 'auto'
+          };
+        case ObjectFit.CONTAIN:
+          return vertical ? {
+            width: 'auto'
+          } : {
+            height: 'auto'
+          };
+        case ObjectFit.COVER:
+          return vertical ? {
+            height: 'auto'
+          } : {
+            width: 'auto'
+          };
+        default:
+          return {};
+      }
+    };
+    const style = vue.computed(() => {
+      if (!props.fit) return;
+      return isSupportObjectFit ? {
+        'object-fit': props.fit
+      } : hackFit(props.fit);
+    });
+    const alignCenter = vue.computed(() => {
+      return !isSupportObjectFit && props.fit !== ObjectFit.FILL;
+    });
+    vue.watch(() => props.src, v => {
+      if (!v && !isLoading.value) {
+        isLoading.value = true;
+      }
+      isActive.value && loadImage();
+    });
+    vue.watch(() => isActive.value, v => {
+      v && loadImage();
+    });
+    vue.onMounted(() => {
+      setScroller();
+      initPlaceholder();
+      props.lazy ? addLazyLoadListener() : loadImage();
+    });
+    vue.onBeforeUnmount(() => {
+      props.lazy && removeLazyLoadListener();
+    });
     return () => {
       return vue.createVNode("div", {
-        "class": "vc-image"
-      }, [slots?.default?.()]);
+        "style": its.value.style,
+        "class": [its.value.class, 'vc-image']
+      }, [isLoading.value && (slots.placeholder ? slots.placeholder() : vue.createVNode("div", {
+        "class": [{
+          'is-auto': isAuto.value
+        }, 'vc-image__placeholder'],
+        "style": pStyle.value
+      }, null)), !isLoading.value && isError.value && (slots.error ? slots.error() : vue.createVNode("div", {
+        "class": "vc-image__error"
+      }, [vue.createTextVNode(" \u52A0\u8F7D\u5931\u8D25")])), !isLoading.value && !isError.value && vue.createVNode("img", vue.mergeProps({
+        "src": props.src,
+        "style": style.value,
+        "class": [{
+          'is-center': alignCenter
+        }, 'vc-image__inner']
+      }, {
+        // 包含所有on*都会被绑定, 且listeners中覆盖将由listener内触发（inheritAttrs: false）
+        ...its.value.attrs,
+        ...its.value.listeners
+      }), null)]);
     };
   }
 });
 
 const MImage = Image;
 
-const props$K = {
+const props$L = {
   tag: {
     type: String,
     default: "div"
@@ -2811,10 +3196,10 @@ const props$K = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$T = 'vc-image-crop';
+const COMPONENT_NAME$U = 'vc-image-crop';
 const ImageCrop = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$T,
-  props: props$K,
+  name: COMPONENT_NAME$U,
+  props: props$L,
   setup(props, {
     slots
   }) {
@@ -2828,7 +3213,7 @@ const ImageCrop = /* @__PURE__ */ vue.defineComponent({
 
 const MImageCrop = ImageCrop;
 
-const props$J = {
+const props$K = {
   tag: {
     type: String,
     default: "div"
@@ -2837,10 +3222,10 @@ const props$J = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$S = 'vc-image-preview';
+const COMPONENT_NAME$T = 'vc-image-preview';
 const ImagePreview = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$S,
-  props: props$J,
+  name: COMPONENT_NAME$T,
+  props: props$K,
   setup(props, {
     slots
   }) {
@@ -2854,7 +3239,7 @@ const ImagePreview = /* @__PURE__ */ vue.defineComponent({
 
 const MImagePreview = ImagePreview;
 
-const props$I = {
+const props$J = {
   tag: {
     type: String,
     default: "div"
@@ -2863,10 +3248,10 @@ const props$I = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$R = 'vc-image-processing';
+const COMPONENT_NAME$S = 'vc-image-processing';
 const ImageProcessing = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$R,
-  props: props$I,
+  name: COMPONENT_NAME$S,
+  props: props$J,
   setup(props, {
     slots
   }) {
@@ -2880,7 +3265,7 @@ const ImageProcessing = /* @__PURE__ */ vue.defineComponent({
 
 const MImageProcessing = ImageProcessing;
 
-const props$H = {
+const props$I = {
   // Array, 作为select等数组存放临时值
   modelValue: {
     type: [String, Number, Array],
@@ -3134,12 +3519,12 @@ const useNativeEmitter = (input, expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$Q = 'vc-input';
+const COMPONENT_NAME$R = 'vc-input';
 const Input = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$Q,
+  name: COMPONENT_NAME$R,
   inheritAttrs: false,
   props: {
-    ...props$H,
+    ...props$I,
     indicator: {
       type: [Boolean, Object],
       default: false
@@ -3240,8 +3625,8 @@ const Input = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const props$G = {
-  ...props$H,
+const props$H = {
+  ...props$I,
   min: {
     type: Number,
     default: 0
@@ -3456,10 +3841,10 @@ const useInputNumber = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$P = 'vc-input-number';
+const COMPONENT_NAME$Q = 'vc-input-number';
 const InputNumber = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$P,
-  props: props$G,
+  name: COMPONENT_NAME$Q,
+  props: props$H,
   inheritAttrs: false,
   setup(props, {
     slots,
@@ -3510,8 +3895,8 @@ const InputNumber = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const props$F = {
-  ...props$H,
+const props$G = {
+  ...props$I,
   enterText: {
     type: [Boolean, String],
     default: true
@@ -3520,10 +3905,10 @@ const props$F = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$O = 'vc-input-search';
+const COMPONENT_NAME$P = 'vc-input-search';
 const InputSearch = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$O,
-  props: props$F,
+  name: COMPONENT_NAME$P,
+  props: props$G,
   inheritAttrs: false,
   setup(props, {
     emit,
@@ -3557,12 +3942,12 @@ const InputSearch = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$N = 'vcm-input';
+const COMPONENT_NAME$O = 'vcm-input';
 const MInput = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$N,
+  name: COMPONENT_NAME$O,
   inheritAttrs: false,
   props: {
-    ...props$H,
+    ...props$I,
     right: {
       type: Boolean,
       default: false
@@ -3648,10 +4033,10 @@ const MInput = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$M = 'vcm-input-number';
+const COMPONENT_NAME$N = 'vcm-input-number';
 const MInputNumber = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$M,
-  props: props$G,
+  name: COMPONENT_NAME$N,
+  props: props$H,
   inheritAttrs: false,
   setup(props, {
     slots,
@@ -3699,11 +4084,11 @@ const MInputNumber = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$L = 'vcm-input-search';
+const COMPONENT_NAME$M = 'vcm-input-search';
 const MInputSearch = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$L,
+  name: COMPONENT_NAME$M,
   props: {
-    ...props$F,
+    ...props$G,
     cancelText: {
       type: String,
       default: '取消'
@@ -3763,7 +4148,7 @@ const MInputSearch = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const props$E = {
+const props$F = {
   tag: {
     type: String,
     default: "div"
@@ -3778,10 +4163,10 @@ const props$E = {
   }
 };
 
-const COMPONENT_NAME$K = "vcm-list";
+const COMPONENT_NAME$L = "vcm-list";
 const MList = vue.defineComponent({
-  name: COMPONENT_NAME$K,
-  props: props$E,
+  name: COMPONENT_NAME$L,
+  props: props$F,
   setup(props, { slots }) {
     vue.provide("list", { props });
     return () => {
@@ -3801,7 +4186,7 @@ const MList = vue.defineComponent({
   }
 });
 
-const props$D = {
+const props$E = {
   tag: {
     type: String,
     default: "div"
@@ -3835,11 +4220,11 @@ const props$D = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$J = 'vcm-list-item';
+const COMPONENT_NAME$K = 'vcm-list-item';
 const HTTP_REGEX = /[a-zA-z]+:\/\/[^\s]*/;
 const MListItem = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$J,
-  props: props$D,
+  name: COMPONENT_NAME$K,
+  props: props$E,
   emits: ['click'],
   setup(props, {
     slots,
@@ -3913,7 +4298,7 @@ const MListItem = /* @__PURE__ */ vue.defineComponent({
   }
 });
 
-const props$C = {
+const props$D = {
   tag: {
     type: String,
     default: "div"
@@ -3922,10 +4307,10 @@ const props$C = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$I = 'vc-marquee';
+const COMPONENT_NAME$J = 'vc-marquee';
 const Marquee = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$I,
-  props: props$C,
+  name: COMPONENT_NAME$J,
+  props: props$D,
   setup(props, {
     slots
   }) {
@@ -3939,7 +4324,7 @@ const Marquee = /* @__PURE__ */ vue.defineComponent({
 
 const MMarquee = Marquee;
 
-const props$B = {
+const props$C = {
   content: [String, Function],
   mask: {
     type: Boolean,
@@ -3976,11 +4361,11 @@ const props$B = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$H = 'vc-message';
+const COMPONENT_NAME$I = 'vc-message';
 const MessageView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$H,
+  name: COMPONENT_NAME$I,
   emits: ['before-close', 'close', 'portal-fulfilled'],
-  props: props$B,
+  props: props$C,
   setup(props, {
     emit,
     expose
@@ -4111,7 +4496,7 @@ const Message$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty(
 
 const MMessage = Message$1;
 
-const props$A = {
+const props$B = {
   modelValue: {
     type: Boolean,
     default: false
@@ -4191,12 +4576,12 @@ const props$A = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$G = 'vc-modal';
+const COMPONENT_NAME$H = 'vc-modal';
 let zIndexNumber = 1002;
 const ModalView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$G,
+  name: COMPONENT_NAME$H,
   emits: ['update:modelValue', 'close', 'portal-fulfilled', 'visible-change', 'ok', 'cancel'],
-  props: props$A,
+  props: props$B,
   setup(props, {
     slots,
     emit,
@@ -4531,7 +4916,7 @@ const modal$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
 	warning: warning$1
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const props$z = {
+const props$A = {
   mode: {
     type: String,
     validator: (v) => /(alert|operation)/.test(v),
@@ -4593,11 +4978,11 @@ const props$z = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$F = 'vc-modal';
+const COMPONENT_NAME$G = 'vc-modal';
 const MModalView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$F,
+  name: COMPONENT_NAME$G,
   emits: ['update:modelValue', 'portal-fulfilled', 'close', 'ok', 'cancel'],
-  props: props$z,
+  props: props$A,
   setup(props, {
     slots,
     emit,
@@ -4770,7 +5155,7 @@ const modal = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
 	operation
 }, Symbol.toStringTag, { value: 'Module' }));
 
-const props$y = {
+const props$z = {
   title: [String, Function],
   content: [String, Function],
   duration: {
@@ -4799,10 +5184,10 @@ const props$y = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$E = 'vc-notice';
+const COMPONENT_NAME$F = 'vc-notice';
 const NoticeView = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$E,
-  props: props$y,
+  name: COMPONENT_NAME$F,
+  props: props$z,
   emits: ['portal-fulfilled', 'close', 'before-close'],
   setup(props, {
     emit
@@ -4951,7 +5336,7 @@ const Notice$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
 
 const MNotice = Notice$1;
 
-const props$x = {
+const props$y = {
   tag: {
     type: String,
     default: "div"
@@ -4960,10 +5345,10 @@ const props$x = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$D = 'vc-option';
+const COMPONENT_NAME$E = 'vc-option';
 const Option = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$D,
-  props: props$x,
+  name: COMPONENT_NAME$E,
+  props: props$y,
   setup(props, {
     slots
   }) {
@@ -4977,7 +5362,7 @@ const Option = /* @__PURE__ */ vue.defineComponent({
 
 const MOption = Option;
 
-const props$w = {
+const props$x = {
   tag: {
     type: String,
     default: "div"
@@ -4986,10 +5371,10 @@ const props$w = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$C = 'vc-page';
+const COMPONENT_NAME$D = 'vc-page';
 const Page = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$C,
-  props: props$w,
+  name: COMPONENT_NAME$D,
+  props: props$x,
   setup(props, {
     slots
   }) {
@@ -5003,7 +5388,7 @@ const Page = /* @__PURE__ */ vue.defineComponent({
 
 const MPage = Page;
 
-const props$v = {
+const props$w = {
   tag: {
     type: String,
     default: "div"
@@ -5012,10 +5397,10 @@ const props$v = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$B = 'vc-picker';
+const COMPONENT_NAME$C = 'vc-picker';
 const Picker = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$B,
-  props: props$v,
+  name: COMPONENT_NAME$C,
+  props: props$w,
   setup(props, {
     slots
   }) {
@@ -5029,7 +5414,7 @@ const Picker = /* @__PURE__ */ vue.defineComponent({
 
 const MPicker = Picker;
 
-const props$u = {
+const props$v = {
   tag: {
     type: String,
     default: "div"
@@ -5038,10 +5423,10 @@ const props$u = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$A = 'vc-popconfirm';
+const COMPONENT_NAME$B = 'vc-popconfirm';
 const Popconfirm = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$A,
-  props: props$u,
+  name: COMPONENT_NAME$B,
+  props: props$v,
   setup(props, {
     slots
   }) {
@@ -5055,7 +5440,7 @@ const Popconfirm = /* @__PURE__ */ vue.defineComponent({
 
 const MPopconfirm = Popconfirm;
 
-const props$t = {
+const props$u = {
   modelValue: Boolean,
   animation: String,
   placement: {
@@ -5134,7 +5519,7 @@ const wrapperKeys = [
   "autoWidth",
   "always"
 ];
-const props$s = {
+const props$t = {
   trigger: {
     type: String,
     default: "hover",
@@ -5152,7 +5537,7 @@ const props$s = {
     type: Boolean,
     default: true
   },
-  ...lodashEs.pick(props$t, wrapperKeys)
+  ...lodashEs.pick(props$u, wrapperKeys)
 };
 
 const EXTRA_DISTANCE = 4;
@@ -5413,10 +5798,10 @@ const usePos = () => {
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
 }
-const COMPONENT_NAME$z = 'vc-popover-wrapper';
+const COMPONENT_NAME$A = 'vc-popover-wrapper';
 const PopoverWrapper = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$z,
-  props: props$t,
+  name: COMPONENT_NAME$A,
+  props: props$u,
   emits: ['portal-fulfilled', 'close'],
   setup(props, {
     emit,
@@ -5666,10 +6051,10 @@ const PopoverPortal = new Portal(PopoverWrapper);
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$y = 'vc-popover';
+const COMPONENT_NAME$z = 'vc-popover';
 const Popover = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$y,
-  props: props$s,
+  name: COMPONENT_NAME$z,
+  props: props$t,
   emits: ['update:modelValue', 'visible-change', 'ready', 'close'],
   open: PopoverPortal.popup.bind(PopoverPortal),
   setup(props, {
@@ -5806,7 +6191,7 @@ const Popover = /* @__PURE__ */ vue.defineComponent({
 
 const MPopover = Popover;
 
-const props$r = {
+const props$s = {
   tag: {
     type: String,
     default: "div"
@@ -5815,10 +6200,10 @@ const props$r = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$x = 'vc-popup';
+const COMPONENT_NAME$y = 'vc-popup';
 const Popup = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$x,
-  props: props$r,
+  name: COMPONENT_NAME$y,
+  props: props$s,
   setup(props, {
     slots
   }) {
@@ -5834,7 +6219,7 @@ const MPopup = Popup;
 
 const MPortal = Portal;
 
-const props$q = {
+const props$r = {
   tag: {
     type: String,
     default: "div"
@@ -5843,10 +6228,10 @@ const props$q = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$w = 'vc-print';
+const COMPONENT_NAME$x = 'vc-print';
 const Print = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$w,
-  props: props$q,
+  name: COMPONENT_NAME$x,
+  props: props$r,
   setup(props, {
     slots
   }) {
@@ -5860,7 +6245,7 @@ const Print = /* @__PURE__ */ vue.defineComponent({
 
 const MPrint = Print;
 
-const props$p = {
+const props$q = {
   tag: {
     type: String,
     default: "div"
@@ -5869,10 +6254,10 @@ const props$p = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$v = 'vc-progress';
+const COMPONENT_NAME$w = 'vc-progress';
 const Progress = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$v,
-  props: props$p,
+  name: COMPONENT_NAME$w,
+  props: props$q,
   setup(props, {
     slots
   }) {
@@ -5886,7 +6271,7 @@ const Progress = /* @__PURE__ */ vue.defineComponent({
 
 const MProgress = Progress;
 
-const props$o = {
+const props$p = {
   tag: {
     type: String,
     default: "div"
@@ -5895,10 +6280,10 @@ const props$o = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$u = 'vc-radio';
+const COMPONENT_NAME$v = 'vc-radio';
 const Radio = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$u,
-  props: props$o,
+  name: COMPONENT_NAME$v,
+  props: props$p,
   setup(props, {
     slots
   }) {
@@ -5912,7 +6297,7 @@ const Radio = /* @__PURE__ */ vue.defineComponent({
 
 const MRadio = Radio;
 
-const props$n = {
+const props$o = {
   tag: {
     type: String,
     default: "div"
@@ -5921,10 +6306,10 @@ const props$n = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$t = 'vc-rate';
+const COMPONENT_NAME$u = 'vc-rate';
 const Rate = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$t,
-  props: props$n,
+  name: COMPONENT_NAME$u,
+  props: props$o,
   setup(props, {
     slots
   }) {
@@ -5938,7 +6323,7 @@ const Rate = /* @__PURE__ */ vue.defineComponent({
 
 const MRate = Rate;
 
-const props$m = {
+const props$n = {
   data: {
     type: Array,
     default: () => []
@@ -5989,7 +6374,7 @@ const props$m = {
   renderRefresh: Function
 };
 
-const props$l = {
+const props$m = {
   vertical: Boolean,
   wrapperSize: {
     type: Number,
@@ -6044,7 +6429,7 @@ const barKeys$1 = [
   "thumbStyle",
   "thumbClass"
 ];
-const props$k = {
+const props$l = {
   // 	如果存在滚动条宽度为false, 不存在则为true
   // 	为false的情况下才能使用track-offset
   native: {
@@ -6075,7 +6460,7 @@ const props$k = {
   scrollX: Number,
   scrollY: Number,
   fit: Boolean,
-  ...lodashEs.pick(props$l, barKeys$1)
+  ...lodashEs.pick(props$m, barKeys$1)
 };
 
 const barKeys = [
@@ -6090,7 +6475,7 @@ const barKeys = [
   "autoResize",
   "native"
 ];
-const props$j = {
+const props$k = {
   tag: {
     type: String,
     default: "div"
@@ -6123,13 +6508,13 @@ const props$j = {
     type: Boolean,
     default: true
   },
-  barTo: props$k.to,
-  ...lodashEs.pick(props$k, barKeys)
+  barTo: props$l.to,
+  ...lodashEs.pick(props$l, barKeys)
 };
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$s = 'vc-scroller-track';
+const COMPONENT_NAME$t = 'vc-scroller-track';
 const BAR_MAP = {
   vertical: {
     scroll: 'scrollTop',
@@ -6149,8 +6534,8 @@ const BAR_MAP = {
   }
 };
 const Track = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$s,
-  props: props$l,
+  name: COMPONENT_NAME$t,
+  props: props$m,
   emits: ['change'],
   setup(props, {
     emit,
@@ -6335,10 +6720,10 @@ const Track = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$r = 'vc-scroller-bar';
+const COMPONENT_NAME$s = 'vc-scroller-bar';
 const Bar = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$r,
-  props: props$k,
+  name: COMPONENT_NAME$s,
+  props: props$l,
   emits: ['change'],
   setup(props, {
     emit,
@@ -6551,7 +6936,7 @@ const useScroller = (expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$q = 'vc-scroller';
+const COMPONENT_NAME$r = 'vc-scroller';
 
 /**
  * 作为备选方案,目前推荐使用ScrollerWheel
@@ -6562,8 +6947,8 @@ const COMPONENT_NAME$q = 'vc-scroller';
  * 2. 增加了一层嵌套
  */
 const Scroller = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$q,
-  props: props$j,
+  name: COMPONENT_NAME$r,
+  props: props$k,
   emits: ['scroll'],
   setup(props, {
     slots,
@@ -6623,7 +7008,7 @@ const Scroller = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$p = 'vc-scroller-wheel';
+const COMPONENT_NAME$q = 'vc-scroller-wheel';
 
 /**
  * 为减少一层嵌套，为去除滚动bar的抖动，使用wheel模拟
@@ -6645,8 +7030,8 @@ const COMPONENT_NAME$p = 'vc-scroller-wheel';
  * 设置scrollTop不会reflow和repaint，不需要考虑transfrom来改变content（transform也只在draw完成）
  */
 const ScrollerWheel = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$p,
-  props: props$j,
+  name: COMPONENT_NAME$q,
+  props: props$k,
   emits: ['scroll'],
   setup(props, {
     slots,
@@ -6750,9 +7135,9 @@ const ScrollerWheel = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$o = 'vc-recycle-list-scroll-state';
+const COMPONENT_NAME$p = 'vc-recycle-list-scroll-state';
 const ScrollState = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$o,
+  name: COMPONENT_NAME$p,
   setup(_, {
     slots
   }) {
@@ -6823,7 +7208,7 @@ const STATUS_MAP = {
   }
 };
 
-const props$i = {
+const props$j = {
   inverted: {
     type: Boolean,
     default: false
@@ -6882,13 +7267,13 @@ const useDirectionKeys = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$n = 'vc-recycle-list-container';
+const COMPONENT_NAME$o = 'vc-recycle-list-container';
 
 // TODO: 抽离
 const transformKey = $__namespace.prefixStyle('transform').camel;
 const Container = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$n,
-  props: props$i,
+  name: COMPONENT_NAME$o,
+  props: props$j,
   emits: ['refresh'],
   setup(props, {
     slots
@@ -6985,9 +7370,9 @@ const Container = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$m = 'vc-recycle-list-item';
+const COMPONENT_NAME$n = 'vc-recycle-list-item';
 const Item = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$m,
+  name: COMPONENT_NAME$n,
   props: {
     vertical: {
       type: Boolean,
@@ -7029,10 +7414,10 @@ const Item = /* @__PURE__ */ vue.defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$l = 'vc-recycle-list';
+const COMPONENT_NAME$m = 'vc-recycle-list';
 const RecycleList = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$l,
-  props: props$m,
+  name: COMPONENT_NAME$m,
+  props: props$n,
   emits: ['scroll'],
   setup(props, {
     slots,
@@ -7576,17 +7961,17 @@ const RecycleList = /* @__PURE__ */ vue.defineComponent({
 
 const MRecycleList = RecycleList;
 
-const props$h = {
+const props$i = {
   tag: {
     type: String,
     default: "div"
   }
 };
 
-const COMPONENT_NAME$k = "vc-resizer";
+const COMPONENT_NAME$l = "vc-resizer";
 const Resizer = vue.defineComponent({
-  name: COMPONENT_NAME$k,
-  props: props$h,
+  name: COMPONENT_NAME$l,
+  props: props$i,
   emit: ["resize"],
   setup(props, { emit, slots }) {
     const width = vue.ref(0);
@@ -7641,7 +8026,7 @@ const MResizer = Resizer;
 
 const MScroller = Scroller;
 
-const props$g = {
+const props$h = {
   tag: {
     type: String,
     default: "div"
@@ -7650,10 +8035,10 @@ const props$g = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$j = 'vc-select';
+const COMPONENT_NAME$k = 'vc-select';
 const Select = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$j,
-  props: props$g,
+  name: COMPONENT_NAME$k,
+  props: props$h,
   setup(props, {
     slots
   }) {
@@ -7667,7 +8052,7 @@ const Select = /* @__PURE__ */ vue.defineComponent({
 
 const MSelect = Select;
 
-const props$f = {
+const props$g = {
   tag: {
     type: String,
     default: "div"
@@ -7676,10 +8061,10 @@ const props$f = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$i = 'vc-slider';
+const COMPONENT_NAME$j = 'vc-slider';
 const Slider = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$i,
-  props: props$f,
+  name: COMPONENT_NAME$j,
+  props: props$g,
   setup(props, {
     slots
   }) {
@@ -7693,7 +8078,7 @@ const Slider = /* @__PURE__ */ vue.defineComponent({
 
 const MSlider = Slider;
 
-const props$e = {
+const props$f = {
   tag: {
     type: String,
     default: "div"
@@ -7702,10 +8087,10 @@ const props$e = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$h = 'vc-sort-list';
+const COMPONENT_NAME$i = 'vc-sort-list';
 const SortList = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$h,
-  props: props$e,
+  name: COMPONENT_NAME$i,
+  props: props$f,
   setup(props, {
     slots
   }) {
@@ -7719,7 +8104,7 @@ const SortList = /* @__PURE__ */ vue.defineComponent({
 
 const MSortList = SortList;
 
-const props$d = {
+const props$e = {
   tag: {
     type: String,
     default: "div"
@@ -7728,10 +8113,10 @@ const props$d = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$g = 'vc-steps';
+const COMPONENT_NAME$h = 'vc-steps';
 const Steps = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$g,
-  props: props$d,
+  name: COMPONENT_NAME$h,
+  props: props$e,
   setup(props, {
     slots
   }) {
@@ -7745,7 +8130,7 @@ const Steps = /* @__PURE__ */ vue.defineComponent({
 
 const MSteps = Steps;
 
-const props$c = {
+const props$d = {
   tag: {
     type: String,
     default: "div"
@@ -7754,10 +8139,10 @@ const props$c = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$f = 'vc-switch';
+const COMPONENT_NAME$g = 'vc-switch';
 const Switch = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$f,
-  props: props$c,
+  name: COMPONENT_NAME$g,
+  props: props$d,
   setup(props, {
     slots
   }) {
@@ -7771,7 +8156,7 @@ const Switch = /* @__PURE__ */ vue.defineComponent({
 
 const MSwitch = Switch;
 
-const props$b = {
+const props$c = {
   tag: {
     type: String,
     default: "div"
@@ -7780,10 +8165,10 @@ const props$b = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$e = 'vc-table';
+const COMPONENT_NAME$f = 'vc-table';
 const Table = /* @__PURE__ */ vue.defineComponent({
-  name: COMPONENT_NAME$e,
-  props: props$b,
+  name: COMPONENT_NAME$f,
+  props: props$c,
   setup(props, {
     slots
   }) {
@@ -7797,31 +8182,430 @@ const Table = /* @__PURE__ */ vue.defineComponent({
 
 const MTable = Table;
 
-const props$a = {
-  tag: {
+const props$b = {
+  type: {
     type: String,
-    default: "div"
+    validator: (v) => /^(line|card)$/.test(v),
+    default: "line"
+  },
+  modelValue: {
+    type: [String, Number]
+  },
+  animated: {
+    type: Boolean,
+    default: false
+  },
+  afloat: {
+    type: Boolean,
+    default: true
+  },
+  closable: {
+    type: Boolean,
+    default: false
   }
 };
 
+const useTabs = (options = {}) => {
+  const instance = vue.getCurrentInstance();
+  const { props, emit } = instance;
+  const tabsId = vue.ref(Utils.getUid("tabs"));
+  const list = vue.ref([]);
+  const afloatWidth = vue.ref(0);
+  const afloatOffset = vue.ref(0);
+  const currentValue = vue.ref(void 0);
+  const scrollOffset = vue.ref(0);
+  const scrollable = vue.ref(false);
+  const timer = vue.ref(null);
+  const getTabIndex = (v) => {
+    return list.value.findIndex((nav, index) => (nav.value || index) === v);
+  };
+  const afloatStyle = vue.computed(() => {
+    const style = {
+      width: `${afloatWidth.value}px`,
+      transform: `translate3d(${afloatOffset.value}px, 0px, 0px)`
+    };
+    return style;
+  });
+  const contentStyle = vue.computed(() => {
+    const index = getTabIndex(currentValue.value);
+    const precent = index === 0 ? "0%" : `-${index}00%`;
+    const style = {
+      transform: ""
+    };
+    if (index > -1) {
+      style.transform = `translate3d(${precent}, 0px, 0px)`;
+    }
+    return style;
+  });
+  const classes = vue.computed(() => {
+    return {
+      "is-animated": props.animated,
+      [`is-${props.type}`]: !!props.type,
+      [`is-${props.theme}`]: !!props.theme
+    };
+  });
+  const refresh = () => {
+    options?.refreshAfloat?.();
+  };
+  const handleChange = (index) => {
+    if (timer.value) return;
+    timer.value = setTimeout(() => timer.value = null, 300);
+    const nav = list.value[index];
+    if (nav.disabled) return;
+    currentValue.value = nav.value || index;
+    emit("update:modelValue", currentValue.value);
+    emit("change", currentValue.value);
+    emit("click", currentValue.value);
+  };
+  const handleResize = () => {
+    if (instance.isUnmounted) return;
+    options?.refreshScroll?.();
+    options?.refreshAfloat?.();
+  };
+  vue.onMounted(() => {
+    helperResize.Resize.on(options.wrapper.value, handleResize);
+    options.scrollToActive && vue.nextTick(options.scrollToActive);
+  });
+  vue.onUnmounted(() => {
+    helperResize.Resize.off(options.wrapper.value, handleResize);
+    timer.value && clearTimeout(timer.value);
+  });
+  const add = (item, setValue) => {
+    if (!item) return;
+    vue.nextTick(() => {
+      typeof currentValue.value === "undefined" && (currentValue.value = item.proxy.currentValue || 0);
+      if (options.content.value) {
+        const index = Array.from(options.content.value.children).filter((i) => /vcm?-tabs-pane/.test(i.className)).indexOf(item.vnode.el);
+        if (index != -1) {
+          list.value.splice(index, 0, item.props);
+          typeof item.props.value === "undefined" && setValue(index);
+          return;
+        }
+      }
+      list.value.push(item.props);
+      typeof item.props.value === "undefined" && setValue(list.value.length - 1);
+    });
+  };
+  const remove = (item) => {
+    if (!item) return;
+    list.value.splice(list.value.indexOf(item.props), 1);
+  };
+  vue.provide("tabs", {
+    props,
+    currentValue,
+    refresh,
+    add,
+    remove
+  });
+  vue.watch(
+    () => props.modelValue,
+    (v) => {
+      currentValue.value = v;
+    },
+    { immediate: true }
+  );
+  vue.watch(
+    () => currentValue.value,
+    () => {
+      options.refreshAfloat?.();
+      options.scrollToActive?.();
+    }
+  );
+  vue.watch(
+    () => list.value.length,
+    () => {
+      options.refreshAfloat?.();
+      options.scrollToActive?.();
+    }
+  );
+  return {
+    tabsId,
+    list,
+    timer,
+    afloatWidth,
+    afloatOffset,
+    currentValue,
+    scrollOffset,
+    scrollable,
+    afloatStyle,
+    contentStyle,
+    classes,
+    getTabIndex,
+    handleChange
+  };
+};
+
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$d = 'vc-tabs';
+const COMPONENT_NAME$e = 'vc-tabs';
 const Tabs = /* @__PURE__ */ vue.defineComponent({
+  name: COMPONENT_NAME$e,
+  props: props$b,
+  emits: ['update:modelValue', 'change', 'click'],
+  setup(props, {
+    slots
+  }) {
+    const instance = vue.getCurrentInstance();
+    const wrapper = vue.ref(null);
+    const content = vue.ref(null);
+    const scroll = vue.ref(null);
+    const nav = vue.ref(null);
+    // eslint-disable-next-line prefer-const
+    let tabs;
+
+    /**
+     * 刷新是否需要滚动条
+     */
+    const refreshScroll = () => {
+      // 容器
+      const boxWidth = scroll.value.offsetWidth;
+      // 总长度
+      const totalWidth = nav.value.offsetWidth;
+      if (boxWidth < totalWidth) {
+        tabs.scrollable.value = true;
+        totalWidth - tabs.scrollOffset.value < boxWidth && (tabs.scrollOffset.value = totalWidth - boxWidth);
+      } else {
+        tabs.scrollable.value = false;
+        tabs.scrollOffset.value > 0 && (tabs.scrollOffset.value = 0);
+      }
+    };
+
+    /**
+     * 刷新当前标签底下的滑块位置
+     */
+    const refreshAfloat = () => {
+      vue.nextTick(() => {
+        const index = tabs.getTabIndex(tabs.currentValue.value);
+        if (instance.isUnmounted) return;
+        const items = nav.value.querySelectorAll(`.vc-tabs__item`);
+        const $ = items[index];
+        tabs.afloatWidth.value = $ ? parseFloat($.offsetWidth) : 0;
+        if (!Array.from(items).length) return;
+        let offset = 0;
+        if (index > 0) {
+          const gutter = 16; // margin-right -> 16px
+          for (let i = 0; i < index; i++) {
+            offset += parseFloat(items[i].offsetWidth) + gutter;
+          }
+        }
+        tabs.afloatOffset.value = offset;
+        refreshScroll();
+      });
+    };
+    const scrollToActive = () => {
+      if (!tabs.scrollable.value) return;
+      // 这里不直接选择is-active,存在延迟
+      const $ = instance.vnode.el.querySelector(`.vc-tabs__item[name="${tabs.currentValue.value}"]`);
+      if (!$) return;
+      const itemBounding = $.getBoundingClientRect();
+      const scrollBounding = scroll.value.getBoundingClientRect();
+      const navBounding = nav.value.getBoundingClientRect();
+      let offset;
+      if (navBounding.right < scrollBounding.right) {
+        offset = nav.value.offsetWidth - scrollBounding.width;
+      }
+      if (itemBounding.left < scrollBounding.left) {
+        offset = tabs.scrollOffset.value - (scrollBounding.left - itemBounding.left);
+      } else if (itemBounding.right > scrollBounding.right) {
+        offset = tabs.scrollOffset.value + itemBounding.right - scrollBounding.right;
+      }
+      if (tabs.scrollOffset.value !== offset) {
+        tabs.scrollOffset.value = offset;
+      }
+    };
+    tabs = useTabs({
+      content,
+      wrapper,
+      refreshAfloat,
+      refreshScroll,
+      scrollToActive
+    });
+    /**
+     * 上一个
+     */
+    const handlePrev = () => {
+      const boxWidth = scroll.value.offsetWidth;
+      if (!tabs.scrollOffset.value) return;
+      tabs.scrollOffset.value = tabs.scrollOffset.value > boxWidth ? tabs.scrollOffset.value - boxWidth : 0;
+    };
+
+    /**
+     * 下一个
+     */
+    const handleNext = () => {
+      const boxWidth = scroll.value.offsetWidth;
+      const totalWidth = nav.value.offsetWidth;
+      if (totalWidth - tabs.scrollOffset.value <= boxWidth) return;
+      tabs.scrollOffset.value = totalWidth - tabs.scrollOffset.value > boxWidth * 2 ? tabs.scrollOffset.value + boxWidth : totalWidth - boxWidth;
+    };
+    const scrollStyle = vue.computed(() => {
+      const style = {
+        transform: `translate3d(${-tabs.scrollOffset.value}px, 0px, 0px)`
+      };
+      return style;
+    });
+    const isCard = vue.computed(() => {
+      return props.type === 'card';
+    });
+    return () => {
+      return vue.createVNode("div", {
+        "class": [tabs.classes.value, 'vc-tabs']
+      }, [vue.createVNode("div", {
+        "class": "vc-tabs__extra"
+      }, [slots.extra?.()]), vue.createVNode("div", {
+        "ref": wrapper,
+        "style": {
+          padding: tabs.scrollable.value && '0 24px'
+        },
+        "class": "vc-tabs__bar"
+      }, [tabs.scrollable.value && vue.createVNode(Icon, {
+        "class": "vc-tabs__icon is-left",
+        "type": "left",
+        "onClick": handlePrev
+      }, null), tabs.scrollable.value && vue.createVNode(Icon, {
+        "class": "vc-tabs__icon is-right",
+        "type": "right",
+        "onClick": handleNext
+      }, null), vue.createVNode("div", {
+        "ref": scroll,
+        "class": "vc-tabs__scroll"
+      }, [vue.createVNode("div", {
+        "ref": nav,
+        "style": scrollStyle.value,
+        "class": "vc-tabs__nav"
+      }, [!isCard.value && vue.createVNode("div", {
+        "style": tabs.afloatStyle.value,
+        "class": "vc-tabs__afloat"
+      }, null), tabs.list.value.map((item, index) => {
+        return vue.createVNode("div", {
+          "key": index,
+          "class": [{
+            'is-active': (item.value || index) == tabs.currentValue.value
+          }, 'vc-tabs__item'],
+          "onClick": () => tabs.handleChange(index)
+        }, [slots.label ? slots.label({
+          it: item,
+          index
+        }) : typeof item.label === 'string' ? vue.createVNode("span", {
+          "innerHTML": item.label
+        }, null) : typeof item.label === 'function' && vue.createVNode(Customer, {
+          "render": item.label,
+          "it": item,
+          "index": index
+        }, null), props.closable && item.closable && vue.createVNode(Icon, {
+          "type": "close"
+        }, null)]);
+      })])])]), vue.createVNode("div", {
+        "ref": content,
+        "style": tabs.contentStyle.value,
+        "class": "vc-tabs__content"
+      }, [slots.default?.()])]);
+    };
+  }
+});
+
+const props$a = {
+  value: {
+    type: [String, Number]
+  },
+  label: {
+    type: [String, Function],
+    default: ""
+  },
+  /**
+   * 服务端渲染时，lazy设置为false，可以把内容渲染出来;
+   * 不能设置为!IS_SERVER, 会影响客服端激活，不一样会存在问题
+   */
+  lazy: {
+    type: Boolean,
+    default: true
+  },
+  closable: {
+    type: Boolean,
+    default: false
+  }
+};
+
+const useTabsPane = () => {
+  const instance = vue.getCurrentInstance();
+  const { props } = instance;
+  const currentValue = vue.ref(void 0);
+  const isLoaded = vue.ref(false);
+  const tabs = vue.inject("tabs", {});
+  const isActive = vue.computed(() => {
+    const state = tabs.currentValue.value === (props.value || currentValue.value);
+    if (!isLoaded.value && state) {
+      isLoaded.value = true;
+    }
+    return state;
+  });
+  const isReady = vue.computed(() => {
+    return !props.lazy || isLoaded.value || isActive.value;
+  });
+  const style = vue.computed(() => {
+    return isActive.value ? {} : {
+      opacity: 0,
+      height: 0,
+      // 避免重用高度
+      overflow: "hidden"
+      // 避免内层的高度影响
+    };
+  });
+  const refresh = () => {
+    !instance.isUnmounted && tabs.refresh?.();
+  };
+  vue.watch(
+    () => props.value,
+    (v) => {
+      currentValue.value = v;
+    },
+    {
+      immediate: true
+    }
+  );
+  vue.watch(
+    () => [props.value, props.label],
+    refresh
+  );
+  vue.onMounted(refresh);
+  vue.onUnmounted(refresh);
+  vue.onBeforeMount(() => {
+    tabs.add?.(instance, (v) => currentValue.value = v);
+  });
+  vue.onBeforeUnmount(() => {
+    tabs.remove?.(instance);
+  });
+  return {
+    isLoaded,
+    isActive,
+    isReady,
+    style,
+    currentValue
+  };
+};
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$d = 'vc-tabs-pane';
+const TabsPane = /* @__PURE__ */ vue.defineComponent({
   name: COMPONENT_NAME$d,
   props: props$a,
-  setup(props, {
+  setup(_, {
     slots
   }) {
+    const tabsPane = useTabsPane();
     return () => {
       return vue.createVNode("div", {
-        "class": "vc-tabs"
-      }, [slots?.default?.()]);
+        "class": "vc-tabs-pane",
+        "style": tabsPane.style.value,
+        "name": tabsPane.currentValue.value
+      }, [tabsPane.isReady && slots.default?.()]);
     };
   }
 });
 
 const MTabs = Tabs;
+const MTabsPane = TabsPane;
 
 const props$9 = {
   tag: {
@@ -8347,6 +9131,7 @@ exports.MSteps = MSteps;
 exports.MSwitch = MSwitch;
 exports.MTable = MTable;
 exports.MTabs = MTabs;
+exports.MTabsPane = MTabsPane;
 exports.MTag = MTag;
 exports.MText = MText;
 exports.MTextarea = MTextarea;
@@ -8395,6 +9180,7 @@ exports.Steps = Steps;
 exports.Switch = Switch;
 exports.Table = Table;
 exports.Tabs = Tabs;
+exports.TabsPane = TabsPane;
 exports.Tag = Tag;
 exports.Text = Text;
 exports.Textarea = Textarea;