@deot/vc-components 1.0.2 → 1.0.4

package/dist/index.js

@@ -1,5 +1,6 @@
-import { reactive, defineComponent, createVNode, ref, watch, getCurrentInstance, computed, TransitionGroup, Transition as Transition$1, h, inject, onMounted, provide, onBeforeUnmount, toRaw, withDirectives, vShow, onUnmounted, withModifiers, createApp, Fragment as Fragment$1, Teleport, nextTick, mergeProps, shallowRef, onUpdated, isVNode, createTextVNode } from 'vue';
-import { debounce, cloneDeep, pick, throttle, kebabCase } from 'lodash-es';
+import { reactive, defineComponent, createVNode, ref, watch, getCurrentInstance, computed, TransitionGroup, Transition as Transition$1, h, inject, onMounted, provide, shallowRef, onUnmounted, onBeforeUnmount, toRaw, withDirectives, vShow, withModifiers, createApp, Fragment as Fragment$1, Teleport, createTextVNode, mergeProps, nextTick, onUpdated, isVNode, onBeforeMount } from 'vue';
+import { debounce, cloneDeep, throttle, pick, kebabCase } from 'lodash-es';
+import { Resize } from '@deot/helper-resize';
 import * as Utils from '@deot/helper-utils';
 import { getPropByPath, getUid, raf, throttle as throttle$1 } from '@deot/helper-utils';
 import { Validator } from '@deot/helper-validator';
@@ -7,7 +8,7 @@ import { Utils as Utils$1, IS_SERVER as IS_SERVER$1 } from '@deot/vc-shared';
 import * as $ from '@deot/helper-dom';
 import { composedPath } from '@deot/helper-dom';
 import { useAttrs, useScrollbar, getInstance } from '@deot/vc-hooks';
-import { Resize } from '@deot/helper-resize';
+import { Storage } from '@deot/helper-cache';
 import { Interrupter } from '@deot/helper-scheduler';
 import { Wheel } from '@deot/helper-wheel';
 import * as Load from '@deot/helper-load';
@@ -56,7 +57,7 @@ class Instance {
 }
 const VcInstance = new Instance();
 
-const props$1g = {
+const props$1h = {
   tag: {
     type: String,
     default: "div"
@@ -65,10 +66,10 @@ const props$1g = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1w = 'vc-action-sheet';
+const COMPONENT_NAME$1x = 'vc-action-sheet';
 const ActionSheet = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1w,
-  props: props$1g,
+  name: COMPONENT_NAME$1x,
+  props: props$1h,
   setup(props, {
     slots
   }) {
@@ -82,7 +83,7 @@ const ActionSheet = /* @__PURE__ */ defineComponent({
 
 const MActionSheet = ActionSheet;
 
-const props$1f = {
+const props$1g = {
   modelValue: {
     type: Boolean,
     default: true
@@ -109,7 +110,7 @@ const props$1f = {
   }
 };
 
-const props$1e = {
+const props$1f = {
   type: String,
   inherit: {
     type: Boolean,
@@ -254,10 +255,10 @@ const IconManager = new Manager();
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1v = 'vc-icon';
+const COMPONENT_NAME$1w = 'vc-icon';
 const Icon = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1v,
-  props: props$1e,
+  name: COMPONENT_NAME$1w,
+  props: props$1f,
   setup(props) {
     const viewBox = ref('0 0 1024 1024');
     const path = ref([]);
@@ -290,7 +291,7 @@ const Icon = /* @__PURE__ */ defineComponent({
   }
 });
 
-const props$1d = {
+const props$1e = {
   /**
    * 进入/离开持续时间
    * {enter: 300, leave: 300}
@@ -455,10 +456,10 @@ const useTransition = () => {
   };
 };
 
-const COMPONENT_NAME$1u = "vc-transition";
+const COMPONENT_NAME$1v = "vc-transition";
 const Transition = defineComponent({
-  name: COMPONENT_NAME$1u,
-  props: props$1d,
+  name: COMPONENT_NAME$1v,
+  props: props$1e,
   // 当不声明emits的情况下，事件存在于attrs中
   inheritAttrs: false,
   setup(props, { slots, attrs }) {
@@ -478,10 +479,10 @@ const Transition = defineComponent({
   }
 });
 
-const COMPONENT_NAME$1t = "vc-transition-collapse";
+const COMPONENT_NAME$1u = "vc-transition-collapse";
 const TransitionCollapse = defineComponent({
-  name: COMPONENT_NAME$1t,
-  props: props$1d,
+  name: COMPONENT_NAME$1u,
+  props: props$1e,
   // 当不声明emits的情况下，事件存在于attrs中
   inheritAttrs: false,
   setup(props, { slots, attrs: _attrs }) {
@@ -599,11 +600,11 @@ const TransitionCollapse = defineComponent({
   }
 });
 
-const COMPONENT_NAME$1s = "vc-transition-fade";
+const COMPONENT_NAME$1t = "vc-transition-fade";
 const TransitionFade = defineComponent({
-  name: COMPONENT_NAME$1s,
+  name: COMPONENT_NAME$1t,
   props: {
-    ...props$1d,
+    ...props$1e,
     // inheritAttrs必须是false
     style: {
       type: Object,
@@ -636,11 +637,11 @@ const TransitionFade = defineComponent({
   }
 });
 
-const COMPONENT_NAME$1r = "vc-transition-scale";
+const COMPONENT_NAME$1s = "vc-transition-scale";
 const TransitionScale = defineComponent({
-  name: COMPONENT_NAME$1r,
+  name: COMPONENT_NAME$1s,
   props: {
-    ...props$1d,
+    ...props$1e,
     mode: {
       type: String,
       default: "both",
@@ -678,11 +679,11 @@ const TransitionScale = defineComponent({
   }
 });
 
-const COMPONENT_NAME$1q = "vc-transition-slide";
+const COMPONENT_NAME$1r = "vc-transition-slide";
 const TransitionSlide = defineComponent({
-  name: COMPONENT_NAME$1q,
+  name: COMPONENT_NAME$1r,
   props: {
-    ...props$1d,
+    ...props$1e,
     mode: {
       type: String,
       default: "left",
@@ -720,11 +721,11 @@ const TransitionSlide = defineComponent({
   }
 });
 
-const COMPONENT_NAME$1p = "vc-transition-zoom";
+const COMPONENT_NAME$1q = "vc-transition-zoom";
 const TransitionZoom = defineComponent({
-  name: COMPONENT_NAME$1p,
+  name: COMPONENT_NAME$1q,
   props: {
-    ...props$1d,
+    ...props$1e,
     mode: {
       type: String,
       default: "x",
@@ -764,7 +765,7 @@ const TransitionZoom = defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1o = 'vc-alert';
+const COMPONENT_NAME$1p = 'vc-alert';
 
 // [color, borderColor, backgroundColor], -> CSS
 const THEME_MAP = {
@@ -774,8 +775,8 @@ const THEME_MAP = {
   warning: ['#ffbf00', '#ffe58f', '#fffbe6']
 };
 const Alert = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1o,
-  props: props$1f,
+  name: COMPONENT_NAME$1p,
+  props: props$1g,
   setup(props, {
     slots,
     emit
@@ -864,7 +865,7 @@ const Alert = /* @__PURE__ */ defineComponent({
 
 const MAlert = Alert;
 
-const props$1c = {
+const props$1d = {
   tag: {
     type: String,
     default: "div"
@@ -873,10 +874,10 @@ const props$1c = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1n = 'vc-artboard';
+const COMPONENT_NAME$1o = 'vc-artboard';
 const Artboard = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1n,
-  props: props$1c,
+  name: COMPONENT_NAME$1o,
+  props: props$1d,
   setup(props, {
     slots
   }) {
@@ -890,7 +891,7 @@ const Artboard = /* @__PURE__ */ defineComponent({
 
 const MArtboard = Artboard;
 
-const props$1b = {
+const props$1c = {
   size: {
     type: Number,
     default: 28
@@ -914,10 +915,10 @@ const props$1b = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1m = 'vc-spin';
+const COMPONENT_NAME$1n = 'vc-spin';
 const Spin = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1m,
-  props: props$1b,
+  name: COMPONENT_NAME$1n,
+  props: props$1c,
   setup(props, {
     slots
   }) {
@@ -951,7 +952,7 @@ const Spin = /* @__PURE__ */ defineComponent({
   }
 });
 
-const props$1a = {
+const props$1b = {
   wait: {
     type: Number,
     default: 250
@@ -967,10 +968,10 @@ const props$1a = {
   exclude: RegExp
 };
 
-const COMPONENT_NAME$1l = "vc-debounce";
+const COMPONENT_NAME$1m = "vc-debounce";
 const Debounce = defineComponent({
-  name: COMPONENT_NAME$1l,
-  props: props$1a,
+  name: COMPONENT_NAME$1m,
+  props: props$1b,
   /**
    * 不声明emits使得事件被透传放入attrs中, 这样可以让所有的事件透传
    * 如事件onClick
@@ -1011,7 +1012,7 @@ const Debounce = defineComponent({
   }
 });
 
-const props$19 = {
+const props$1a = {
   tag: {
     type: String,
     default: "button"
@@ -1041,11 +1042,11 @@ const props$19 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1k = 'vc-button';
+const COMPONENT_NAME$1l = 'vc-button';
 const Button = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1k,
+  name: COMPONENT_NAME$1l,
   emits: ['click'],
-  props: props$19,
+  props: props$1a,
   setup(props, {
     slots
   }) {
@@ -1102,7 +1103,7 @@ const Button = /* @__PURE__ */ defineComponent({
   }
 });
 
-const props$18 = {
+const props$19 = {
   vertical: {
     type: Boolean,
     default: false
@@ -1123,10 +1124,10 @@ const props$18 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1j = 'vc-button-group';
+const COMPONENT_NAME$1k = 'vc-button-group';
 const ButtonGroup = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1j,
-  props: props$18,
+  name: COMPONENT_NAME$1k,
+  props: props$19,
   setup(props, {
     slots
   }) {
@@ -1150,7 +1151,7 @@ const ButtonGroup = /* @__PURE__ */ defineComponent({
 const MButton = Button;
 const MButtonGroup = ButtonGroup;
 
-const props$17 = {
+const props$18 = {
   tag: {
     type: String,
     default: "div"
@@ -1159,10 +1160,10 @@ const props$17 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1i = 'vc-calendar';
+const COMPONENT_NAME$1j = 'vc-calendar';
 const Calendar = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1i,
-  props: props$17,
+  name: COMPONENT_NAME$1j,
+  props: props$18,
   setup(props, {
     slots
   }) {
@@ -1176,7 +1177,7 @@ const Calendar = /* @__PURE__ */ defineComponent({
 
 const MCalendar = Calendar;
 
-const props$16 = {
+const props$17 = {
   border: {
     type: Boolean,
     default: true
@@ -1199,10 +1200,10 @@ const props$16 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1h = 'vc-card';
+const COMPONENT_NAME$1i = 'vc-card';
 const Card = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1h,
-  props: props$16,
+  name: COMPONENT_NAME$1i,
+  props: props$17,
   setup(props, {
     slots
   }) {
@@ -1228,7 +1229,7 @@ const Card = /* @__PURE__ */ defineComponent({
 
 const MCard = Card;
 
-const props$15 = {
+const props$16 = {
   tag: {
     type: String,
     default: "div"
@@ -1237,10 +1238,10 @@ const props$15 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1g = 'vc-carousel';
+const COMPONENT_NAME$1h = 'vc-carousel';
 const Carousel = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1g,
-  props: props$15,
+  name: COMPONENT_NAME$1h,
+  props: props$16,
   setup(props, {
     slots
   }) {
@@ -1254,7 +1255,7 @@ const Carousel = /* @__PURE__ */ defineComponent({
 
 const MCarousel = Carousel;
 
-const props$14 = {
+const props$15 = {
   tag: {
     type: String,
     default: "div"
@@ -1263,10 +1264,10 @@ const props$14 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1f = 'vc-cascader';
+const COMPONENT_NAME$1g = 'vc-cascader';
 const Cascader = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1f,
-  props: props$14,
+  name: COMPONENT_NAME$1g,
+  props: props$15,
   setup(props, {
     slots
   }) {
@@ -1280,25 +1281,167 @@ const Cascader = /* @__PURE__ */ 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__ */ defineComponent({
-  name: COMPONENT_NAME$1e,
-  props: props$13,
+  name: COMPONENT_NAME$1f,
+  props: props$14,
+  emits: [...EVENTS, 'ready'],
   setup(props, {
+    emit,
     slots
   }) {
+    const instance = getCurrentInstance();
+    const chart = shallowRef(null);
+    const echartsInstance = shallowRef(null);
+    const manualOptions = 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 && Resize.off(instance.vnode.el, resizeHandler);
+        resizeHandler = 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
+        });
+        Resize.on(instance.vnode.el, resizeHandler);
+      }
+    };
+    const destroy = () => {
+      if (!chart.value) return;
+      if (props.autoResize) {
+        resizeHandler && Resize.off(instance.vnode.el, resizeHandler);
+        resizeHandler = null;
+      }
+      chart.value.dispose();
+      chart.value = null;
+    };
+    const refresh = () => {
+      if (!chart.value) return;
+      destroy();
+      init();
+    };
+    watch(() => props.group, v => {
+      chart.value && (chart.value.group = v);
+    });
+    if (!props.manualUpdate) {
+      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 => watch(() => props[prop], refresh, {
+      deep: true
+    }));
+    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
+        }
+      });
+    });
+    onUnmounted(destroy);
     return () => {
       return createVNode("div", {
-        "class": "vc-chart"
+        "class": "vc-chart",
+        "style": "width: 100%; height: 100%"
       }, [slots?.default?.()]);
     };
   }
@@ -1306,7 +1449,7 @@ const Chart = /* @__PURE__ */ defineComponent({
 
 const MChart = Chart;
 
-const props$12 = {
+const props$13 = {
   tag: {
     type: String,
     default: "div"
@@ -1315,10 +1458,10 @@ const props$12 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1d = 'vc-checkbox';
+const COMPONENT_NAME$1e = 'vc-checkbox';
 const Checkbox = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1d,
-  props: props$12,
+  name: COMPONENT_NAME$1e,
+  props: props$13,
   setup(props, {
     slots
   }) {
@@ -1332,7 +1475,7 @@ const Checkbox = /* @__PURE__ */ defineComponent({
 
 const MCheckbox = Checkbox;
 
-const props$11 = {
+const props$12 = {
   tag: {
     type: String,
     default: "div"
@@ -1341,10 +1484,10 @@ const props$11 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1c = 'vc-clipboard';
+const COMPONENT_NAME$1d = 'vc-clipboard';
 const Clipboard = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1c,
-  props: props$11,
+  name: COMPONENT_NAME$1d,
+  props: props$12,
   setup(props, {
     slots
   }) {
@@ -1358,7 +1501,7 @@ const Clipboard = /* @__PURE__ */ defineComponent({
 
 const MClipboard = Clipboard;
 
-const props$10 = {
+const props$11 = {
   tag: {
     type: String,
     default: "div"
@@ -1367,10 +1510,10 @@ const props$10 = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1b = 'vc-collapse';
+const COMPONENT_NAME$1c = 'vc-collapse';
 const Collapse = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1b,
-  props: props$10,
+  name: COMPONENT_NAME$1c,
+  props: props$11,
   setup(props, {
     slots
   }) {
@@ -1384,7 +1527,7 @@ const Collapse = /* @__PURE__ */ defineComponent({
 
 const MCollapse = Collapse;
 
-const props$$ = {
+const props$10 = {
   tag: {
     type: String,
     default: "div"
@@ -1393,10 +1536,10 @@ const props$$ = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$1a = 'vc-color-picker';
+const COMPONENT_NAME$1b = 'vc-color-picker';
 const ColorPicker = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$1a,
-  props: props$$,
+  name: COMPONENT_NAME$1b,
+  props: props$10,
   setup(props, {
     slots
   }) {
@@ -1410,7 +1553,7 @@ const ColorPicker = /* @__PURE__ */ defineComponent({
 
 const MColorPicker = ColorPicker;
 
-const props$_ = {
+const props$$ = {
   tag: {
     type: String,
     default: "div"
@@ -1419,10 +1562,10 @@ const props$_ = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$19 = 'vc-countdown';
+const COMPONENT_NAME$1a = 'vc-countdown';
 const Countdown = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$19,
-  props: props$_,
+  name: COMPONENT_NAME$1a,
+  props: props$$,
   setup(props, {
     slots
   }) {
@@ -1436,17 +1579,17 @@ const Countdown = /* @__PURE__ */ 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 = defineComponent({
-  name: COMPONENT_NAME$18,
-  props: props$Z,
+  name: COMPONENT_NAME$19,
+  props: props$_,
   setup(props, context) {
     return () => h(() => {
       return props.render(context.attrs, context);
@@ -1456,7 +1599,7 @@ const Customer = defineComponent({
 
 const MCustomer = Customer;
 
-const props$Y = {
+const props$Z = {
   tag: {
     type: String,
     default: "div"
@@ -1465,10 +1608,10 @@ const props$Y = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$17 = 'vc-date-picker';
+const COMPONENT_NAME$18 = 'vc-date-picker';
 const DatePicker = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$17,
-  props: props$Y,
+  name: COMPONENT_NAME$18,
+  props: props$Z,
   setup(props, {
     slots
   }) {
@@ -1482,7 +1625,7 @@ const DatePicker = /* @__PURE__ */ defineComponent({
 
 const MDatePicker = DatePicker;
 
-const props$X = {
+const props$Y = {
   tag: {
     type: String,
     default: "div"
@@ -1491,10 +1634,10 @@ const props$X = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$16 = 'vc-divider';
+const COMPONENT_NAME$17 = 'vc-divider';
 const Divider = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$16,
-  props: props$X,
+  name: COMPONENT_NAME$17,
+  props: props$Y,
   setup(props, {
     slots
   }) {
@@ -1508,7 +1651,7 @@ const Divider = /* @__PURE__ */ defineComponent({
 
 const MDivider = Divider;
 
-const props$W = {
+const props$X = {
   tag: {
     type: String,
     default: "div"
@@ -1517,10 +1660,10 @@ const props$W = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$15 = 'vc-drawer';
+const COMPONENT_NAME$16 = 'vc-drawer';
 const Drawer = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$15,
-  props: props$W,
+  name: COMPONENT_NAME$16,
+  props: props$X,
   setup(props, {
     slots
   }) {
@@ -1534,7 +1677,7 @@ const Drawer = /* @__PURE__ */ defineComponent({
 
 const MDrawer = Drawer;
 
-const props$V = {
+const props$W = {
   tag: {
     type: String,
     default: "div"
@@ -1543,10 +1686,10 @@ const props$V = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$14 = 'vc-dropdown';
+const COMPONENT_NAME$15 = 'vc-dropdown';
 const Dropdown = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$14,
-  props: props$V,
+  name: COMPONENT_NAME$15,
+  props: props$W,
   setup(props, {
     slots
   }) {
@@ -1560,7 +1703,7 @@ const Dropdown = /* @__PURE__ */ defineComponent({
 
 const MDropdown = Dropdown;
 
-const props$U = {
+const props$V = {
   tag: {
     type: String,
     default: "div"
@@ -1569,10 +1712,10 @@ const props$U = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$13 = 'vc-editor';
+const COMPONENT_NAME$14 = 'vc-editor';
 const Editor = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$13,
-  props: props$U,
+  name: COMPONENT_NAME$14,
+  props: props$V,
   setup(props, {
     slots
   }) {
@@ -1586,7 +1729,7 @@ const Editor = /* @__PURE__ */ defineComponent({
 
 const MEditor = Editor;
 
-const props$T = {
+const props$U = {
   tag: {
     type: String,
     default: "div"
@@ -1595,10 +1738,10 @@ const props$T = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$12 = 'vc-expand';
+const COMPONENT_NAME$13 = 'vc-expand';
 const Expand = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$12,
-  props: props$T,
+  name: COMPONENT_NAME$13,
+  props: props$U,
   setup(props, {
     slots
   }) {
@@ -1612,7 +1755,7 @@ const Expand = /* @__PURE__ */ defineComponent({
 
 const MExpand = Expand;
 
-const props$S = {
+const props$T = {
   tag: {
     type: String,
     default: "form"
@@ -1739,10 +1882,10 @@ const useForm = (expose, options = {}) => {
   });
 };
 
-const COMPONENT_NAME$11 = "vc-form";
+const COMPONENT_NAME$12 = "vc-form";
 const Form = defineComponent({
-  name: COMPONENT_NAME$11,
-  props: props$S,
+  name: COMPONENT_NAME$12,
+  props: props$T,
   setup(props, { slots, expose }) {
     useForm(expose);
     return () => {
@@ -1758,7 +1901,7 @@ const Form = defineComponent({
   }
 });
 
-const props$R = {
+const props$S = {
   label: {
     type: String,
     default: ""
@@ -2056,10 +2199,10 @@ const useFormItem = (expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$10 = 'vc-form-item';
+const COMPONENT_NAME$11 = 'vc-form-item';
 const FormItem = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$10,
-  props: props$R,
+  name: COMPONENT_NAME$11,
+  props: props$S,
   setup(props, {
     slots,
     expose
@@ -2111,8 +2254,8 @@ const FormItem = /* @__PURE__ */ defineComponent({
   }
 });
 
-const props$Q = {
-  ...props$S,
+const props$R = {
+  ...props$T,
   showToast: {
     type: Boolean,
     default: false
@@ -2123,7 +2266,7 @@ const props$Q = {
   }
 };
 
-const props$P = {
+const props$Q = {
   content: [String, Function],
   maskClosable: {
     type: Boolean,
@@ -2151,11 +2294,11 @@ const MTransitionZoom = TransitionZoom;
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$$ = 'vcm-toast';
+const COMPONENT_NAME$10 = 'vcm-toast';
 const MToastView = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$$,
+  name: COMPONENT_NAME$10,
   emits: ['close', 'portal-fulfilled'],
-  props: props$P,
+  props: props$Q,
   setup(props, {
     emit,
     expose
@@ -2270,7 +2413,7 @@ class PortalLeaf {
   }
 }
 
-const COMPONENT_NAME$_ = "vc-portal";
+const COMPONENT_NAME$$ = "vc-portal";
 class Portal {
   /**
    * 清理Portals类型组件
@@ -2322,7 +2465,7 @@ class Portal {
     this.wrapper = wrapper;
     this.globalOptions = {
       ...options,
-      name: options?.name || wrapper.name || Utils.getUid(COMPONENT_NAME$_)
+      name: options?.name || wrapper.name || Utils.getUid(COMPONENT_NAME$$)
     };
   }
   popup(propsData, options) {
@@ -2421,7 +2564,7 @@ class Portal {
       ...rest
     } = options;
     let useAllNodes = fragment;
-    const name = multiple ? `${name$}__${Utils.getUid(COMPONENT_NAME$_)}` : name$;
+    const name = multiple ? `${name$}__${Utils.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();
@@ -2455,7 +2598,7 @@ class Portal {
     } else {
       const wrapper = this.wrapper;
       const app = createApp({
-        name: COMPONENT_NAME$_,
+        name: COMPONENT_NAME$$,
         parent,
         setup() {
           if (alive) {
@@ -2560,21 +2703,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__ */ defineComponent({
-  name: COMPONENT_NAME$Z,
-  props: props$O,
+  name: COMPONENT_NAME$_,
+  props: props$P,
   setup(props, {
     slots
   }) {
@@ -2626,10 +2769,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 = defineComponent({
-  name: COMPONENT_NAME$Y,
-  props: props$Q,
+  name: COMPONENT_NAME$Z,
+  props: props$R,
   setup(props, { slots, expose }) {
     useForm(expose, {
       throwToast(message) {
@@ -2649,8 +2792,8 @@ const MForm = defineComponent({
   }
 });
 
-const props$N = {
-  ...props$R,
+const props$O = {
+  ...props$S,
   indent: {
     type: Number,
     default: 12
@@ -2659,10 +2802,10 @@ const props$N = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$X = 'vcm-form-item';
+const COMPONENT_NAME$Y = 'vcm-form-item';
 const MFormItem = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$X,
-  props: props$N,
+  name: COMPONENT_NAME$Y,
+  props: props$O,
   setup(props, {
     slots,
     expose
@@ -2715,9 +2858,9 @@ const MFormItem = /* @__PURE__ */ defineComponent({
   }
 });
 
-const COMPONENT_NAME$W = "vc-fragment";
+const COMPONENT_NAME$X = "vc-fragment";
 const Fragment = defineComponent({
-  name: COMPONENT_NAME$W,
+  name: COMPONENT_NAME$X,
   setup(_, { slots }) {
     return () => h(Fragment$1, slots.default?.());
   }
@@ -2725,7 +2868,7 @@ const Fragment = defineComponent({
 
 const MFragment = Fragment;
 
-const props$M = {
+const props$N = {
   tag: {
     type: String,
     default: "div"
@@ -2734,10 +2877,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__ */ defineComponent({
-  name: COMPONENT_NAME$V,
-  props: props$M,
+  name: COMPONENT_NAME$W,
+  props: props$N,
   setup(props, {
     slots
   }) {
@@ -2753,33 +2896,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__ */ defineComponent({
-  name: COMPONENT_NAME$U,
-  props: props$L,
+class IMGStore {
+  map;
+  constructor() {
+    this.map = 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
+    };
+    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 = !IS_SERVER$1 && document.documentElement.style.objectFit !== undefined;
+});
+const ObjectFit = {
+  NONE: 'none',
+  CONTAIN: 'contain',
+  COVER: 'cover',
+  FILL: 'fill',
+  SCALE_DOWN: 'scale-down'
+};
+const Image = /* @__PURE__ */ defineComponent({
+  name: COMPONENT_NAME$V,
+  inheritAttrs: false,
+  props: props$M,
   setup(props, {
-    slots
+    slots,
+    emit
   }) {
+    const instance = getCurrentInstance();
+    const its = useAttrs({
+      merge: false,
+      exclude: ['onLoad', 'onError']
+    });
+    const isLoading = ref(true);
+    const isError = ref(false);
+    const isActive = ref(!props.lazy);
+    const isAuto = ref(false);
+    const originW = ref(0);
+    const originH = ref(0);
+    const pStyle = ref({});
+    const scroller = 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 = $.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 = throttle(() => {
+          if ($.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 = computed(() => {
+      if (!props.fit) return;
+      return isSupportObjectFit ? {
+        'object-fit': props.fit
+      } : hackFit(props.fit);
+    });
+    const alignCenter = computed(() => {
+      return !isSupportObjectFit && props.fit !== ObjectFit.FILL;
+    });
+    watch(() => props.src, v => {
+      if (!v && !isLoading.value) {
+        isLoading.value = true;
+      }
+      isActive.value && loadImage();
+    });
+    watch(() => isActive.value, v => {
+      v && loadImage();
+    });
+    onMounted(() => {
+      setScroller();
+      initPlaceholder();
+      props.lazy ? addLazyLoadListener() : loadImage();
+    });
+    onBeforeUnmount(() => {
+      props.lazy && removeLazyLoadListener();
+    });
     return () => {
       return createVNode("div", {
-        "class": "vc-image"
-      }, [slots?.default?.()]);
+        "style": its.value.style,
+        "class": [its.value.class, 'vc-image']
+      }, [isLoading.value && (slots.placeholder ? slots.placeholder() : createVNode("div", {
+        "class": [{
+          'is-auto': isAuto.value
+        }, 'vc-image__placeholder'],
+        "style": pStyle.value
+      }, null)), !isLoading.value && isError.value && (slots.error ? slots.error() : createVNode("div", {
+        "class": "vc-image__error"
+      }, [createTextVNode(" \u52A0\u8F7D\u5931\u8D25")])), !isLoading.value && !isError.value && createVNode("img", 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"
@@ -2788,10 +3173,10 @@ const props$K = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$T = 'vc-image-crop';
+const COMPONENT_NAME$U = 'vc-image-crop';
 const ImageCrop = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$T,
-  props: props$K,
+  name: COMPONENT_NAME$U,
+  props: props$L,
   setup(props, {
     slots
   }) {
@@ -2805,7 +3190,7 @@ const ImageCrop = /* @__PURE__ */ defineComponent({
 
 const MImageCrop = ImageCrop;
 
-const props$J = {
+const props$K = {
   tag: {
     type: String,
     default: "div"
@@ -2814,10 +3199,10 @@ const props$J = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$S = 'vc-image-preview';
+const COMPONENT_NAME$T = 'vc-image-preview';
 const ImagePreview = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$S,
-  props: props$J,
+  name: COMPONENT_NAME$T,
+  props: props$K,
   setup(props, {
     slots
   }) {
@@ -2831,7 +3216,7 @@ const ImagePreview = /* @__PURE__ */ defineComponent({
 
 const MImagePreview = ImagePreview;
 
-const props$I = {
+const props$J = {
   tag: {
     type: String,
     default: "div"
@@ -2840,10 +3225,10 @@ const props$I = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$R = 'vc-image-processing';
+const COMPONENT_NAME$S = 'vc-image-processing';
 const ImageProcessing = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$R,
-  props: props$I,
+  name: COMPONENT_NAME$S,
+  props: props$J,
   setup(props, {
     slots
   }) {
@@ -2857,7 +3242,7 @@ const ImageProcessing = /* @__PURE__ */ defineComponent({
 
 const MImageProcessing = ImageProcessing;
 
-const props$H = {
+const props$I = {
   // Array, 作为select等数组存放临时值
   modelValue: {
     type: [String, Number, Array],
@@ -3111,12 +3496,12 @@ const useNativeEmitter = (input, expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$Q = 'vc-input';
+const COMPONENT_NAME$R = 'vc-input';
 const Input = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$Q,
+  name: COMPONENT_NAME$R,
   inheritAttrs: false,
   props: {
-    ...props$H,
+    ...props$I,
     indicator: {
       type: [Boolean, Object],
       default: false
@@ -3217,8 +3602,8 @@ const Input = /* @__PURE__ */ defineComponent({
   }
 });
 
-const props$G = {
-  ...props$H,
+const props$H = {
+  ...props$I,
   min: {
     type: Number,
     default: 0
@@ -3433,10 +3818,10 @@ const useInputNumber = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$P = 'vc-input-number';
+const COMPONENT_NAME$Q = 'vc-input-number';
 const InputNumber = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$P,
-  props: props$G,
+  name: COMPONENT_NAME$Q,
+  props: props$H,
   inheritAttrs: false,
   setup(props, {
     slots,
@@ -3487,8 +3872,8 @@ const InputNumber = /* @__PURE__ */ defineComponent({
   }
 });
 
-const props$F = {
-  ...props$H,
+const props$G = {
+  ...props$I,
   enterText: {
     type: [Boolean, String],
     default: true
@@ -3497,10 +3882,10 @@ const props$F = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$O = 'vc-input-search';
+const COMPONENT_NAME$P = 'vc-input-search';
 const InputSearch = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$O,
-  props: props$F,
+  name: COMPONENT_NAME$P,
+  props: props$G,
   inheritAttrs: false,
   setup(props, {
     emit,
@@ -3534,12 +3919,12 @@ const InputSearch = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$N = 'vcm-input';
+const COMPONENT_NAME$O = 'vcm-input';
 const MInput = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$N,
+  name: COMPONENT_NAME$O,
   inheritAttrs: false,
   props: {
-    ...props$H,
+    ...props$I,
     right: {
       type: Boolean,
       default: false
@@ -3625,10 +4010,10 @@ const MInput = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$M = 'vcm-input-number';
+const COMPONENT_NAME$N = 'vcm-input-number';
 const MInputNumber = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$M,
-  props: props$G,
+  name: COMPONENT_NAME$N,
+  props: props$H,
   inheritAttrs: false,
   setup(props, {
     slots,
@@ -3676,11 +4061,11 @@ const MInputNumber = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$L = 'vcm-input-search';
+const COMPONENT_NAME$M = 'vcm-input-search';
 const MInputSearch = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$L,
+  name: COMPONENT_NAME$M,
   props: {
-    ...props$F,
+    ...props$G,
     cancelText: {
       type: String,
       default: '取消'
@@ -3740,7 +4125,7 @@ const MInputSearch = /* @__PURE__ */ defineComponent({
   }
 });
 
-const props$E = {
+const props$F = {
   tag: {
     type: String,
     default: "div"
@@ -3755,10 +4140,10 @@ const props$E = {
   }
 };
 
-const COMPONENT_NAME$K = "vcm-list";
+const COMPONENT_NAME$L = "vcm-list";
 const MList = defineComponent({
-  name: COMPONENT_NAME$K,
-  props: props$E,
+  name: COMPONENT_NAME$L,
+  props: props$F,
   setup(props, { slots }) {
     provide("list", { props });
     return () => {
@@ -3778,7 +4163,7 @@ const MList = defineComponent({
   }
 });
 
-const props$D = {
+const props$E = {
   tag: {
     type: String,
     default: "div"
@@ -3812,11 +4197,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__ */ defineComponent({
-  name: COMPONENT_NAME$J,
-  props: props$D,
+  name: COMPONENT_NAME$K,
+  props: props$E,
   emits: ['click'],
   setup(props, {
     slots,
@@ -3890,7 +4275,7 @@ const MListItem = /* @__PURE__ */ defineComponent({
   }
 });
 
-const props$C = {
+const props$D = {
   tag: {
     type: String,
     default: "div"
@@ -3899,10 +4284,10 @@ const props$C = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$I = 'vc-marquee';
+const COMPONENT_NAME$J = 'vc-marquee';
 const Marquee = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$I,
-  props: props$C,
+  name: COMPONENT_NAME$J,
+  props: props$D,
   setup(props, {
     slots
   }) {
@@ -3916,7 +4301,7 @@ const Marquee = /* @__PURE__ */ defineComponent({
 
 const MMarquee = Marquee;
 
-const props$B = {
+const props$C = {
   content: [String, Function],
   mask: {
     type: Boolean,
@@ -3953,11 +4338,11 @@ const props$B = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$H = 'vc-message';
+const COMPONENT_NAME$I = 'vc-message';
 const MessageView = /* @__PURE__ */ 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
@@ -4088,7 +4473,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
@@ -4168,12 +4553,12 @@ const props$A = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$G = 'vc-modal';
+const COMPONENT_NAME$H = 'vc-modal';
 let zIndexNumber = 1002;
 const ModalView = /* @__PURE__ */ 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,
@@ -4508,7 +4893,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),
@@ -4570,11 +4955,11 @@ const props$z = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$F = 'vc-modal';
+const COMPONENT_NAME$G = 'vc-modal';
 const MModalView = /* @__PURE__ */ 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,
@@ -4747,7 +5132,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: {
@@ -4776,10 +5161,10 @@ const props$y = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$E = 'vc-notice';
+const COMPONENT_NAME$F = 'vc-notice';
 const NoticeView = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$E,
-  props: props$y,
+  name: COMPONENT_NAME$F,
+  props: props$z,
   emits: ['portal-fulfilled', 'close', 'before-close'],
   setup(props, {
     emit
@@ -4928,7 +5313,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"
@@ -4937,10 +5322,10 @@ const props$x = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$D = 'vc-option';
+const COMPONENT_NAME$E = 'vc-option';
 const Option = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$D,
-  props: props$x,
+  name: COMPONENT_NAME$E,
+  props: props$y,
   setup(props, {
     slots
   }) {
@@ -4954,7 +5339,7 @@ const Option = /* @__PURE__ */ defineComponent({
 
 const MOption = Option;
 
-const props$w = {
+const props$x = {
   tag: {
     type: String,
     default: "div"
@@ -4963,10 +5348,10 @@ const props$w = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$C = 'vc-page';
+const COMPONENT_NAME$D = 'vc-page';
 const Page = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$C,
-  props: props$w,
+  name: COMPONENT_NAME$D,
+  props: props$x,
   setup(props, {
     slots
   }) {
@@ -4980,7 +5365,7 @@ const Page = /* @__PURE__ */ defineComponent({
 
 const MPage = Page;
 
-const props$v = {
+const props$w = {
   tag: {
     type: String,
     default: "div"
@@ -4989,10 +5374,10 @@ const props$v = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$B = 'vc-picker';
+const COMPONENT_NAME$C = 'vc-picker';
 const Picker = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$B,
-  props: props$v,
+  name: COMPONENT_NAME$C,
+  props: props$w,
   setup(props, {
     slots
   }) {
@@ -5006,7 +5391,7 @@ const Picker = /* @__PURE__ */ defineComponent({
 
 const MPicker = Picker;
 
-const props$u = {
+const props$v = {
   tag: {
     type: String,
     default: "div"
@@ -5015,10 +5400,10 @@ const props$u = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$A = 'vc-popconfirm';
+const COMPONENT_NAME$B = 'vc-popconfirm';
 const Popconfirm = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$A,
-  props: props$u,
+  name: COMPONENT_NAME$B,
+  props: props$v,
   setup(props, {
     slots
   }) {
@@ -5032,7 +5417,7 @@ const Popconfirm = /* @__PURE__ */ defineComponent({
 
 const MPopconfirm = Popconfirm;
 
-const props$t = {
+const props$u = {
   modelValue: Boolean,
   animation: String,
   placement: {
@@ -5111,7 +5496,7 @@ const wrapperKeys = [
   "autoWidth",
   "always"
 ];
-const props$s = {
+const props$t = {
   trigger: {
     type: String,
     default: "hover",
@@ -5129,7 +5514,7 @@ const props$s = {
     type: Boolean,
     default: true
   },
-  ...pick(props$t, wrapperKeys)
+  ...pick(props$u, wrapperKeys)
 };
 
 const EXTRA_DISTANCE = 4;
@@ -5390,10 +5775,10 @@ const usePos = () => {
 function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
-const COMPONENT_NAME$z = 'vc-popover-wrapper';
+const COMPONENT_NAME$A = 'vc-popover-wrapper';
 const PopoverWrapper = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$z,
-  props: props$t,
+  name: COMPONENT_NAME$A,
+  props: props$u,
   emits: ['portal-fulfilled', 'close'],
   setup(props, {
     emit,
@@ -5643,10 +6028,10 @@ const PopoverPortal = new Portal(PopoverWrapper);
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$y = 'vc-popover';
+const COMPONENT_NAME$z = 'vc-popover';
 const Popover = /* @__PURE__ */ 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, {
@@ -5783,7 +6168,7 @@ const Popover = /* @__PURE__ */ defineComponent({
 
 const MPopover = Popover;
 
-const props$r = {
+const props$s = {
   tag: {
     type: String,
     default: "div"
@@ -5792,10 +6177,10 @@ const props$r = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$x = 'vc-popup';
+const COMPONENT_NAME$y = 'vc-popup';
 const Popup = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$x,
-  props: props$r,
+  name: COMPONENT_NAME$y,
+  props: props$s,
   setup(props, {
     slots
   }) {
@@ -5811,7 +6196,7 @@ const MPopup = Popup;
 
 const MPortal = Portal;
 
-const props$q = {
+const props$r = {
   tag: {
     type: String,
     default: "div"
@@ -5820,10 +6205,10 @@ const props$q = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$w = 'vc-print';
+const COMPONENT_NAME$x = 'vc-print';
 const Print = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$w,
-  props: props$q,
+  name: COMPONENT_NAME$x,
+  props: props$r,
   setup(props, {
     slots
   }) {
@@ -5837,7 +6222,7 @@ const Print = /* @__PURE__ */ defineComponent({
 
 const MPrint = Print;
 
-const props$p = {
+const props$q = {
   tag: {
     type: String,
     default: "div"
@@ -5846,10 +6231,10 @@ const props$p = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$v = 'vc-progress';
+const COMPONENT_NAME$w = 'vc-progress';
 const Progress = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$v,
-  props: props$p,
+  name: COMPONENT_NAME$w,
+  props: props$q,
   setup(props, {
     slots
   }) {
@@ -5863,7 +6248,7 @@ const Progress = /* @__PURE__ */ defineComponent({
 
 const MProgress = Progress;
 
-const props$o = {
+const props$p = {
   tag: {
     type: String,
     default: "div"
@@ -5872,10 +6257,10 @@ const props$o = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$u = 'vc-radio';
+const COMPONENT_NAME$v = 'vc-radio';
 const Radio = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$u,
-  props: props$o,
+  name: COMPONENT_NAME$v,
+  props: props$p,
   setup(props, {
     slots
   }) {
@@ -5889,7 +6274,7 @@ const Radio = /* @__PURE__ */ defineComponent({
 
 const MRadio = Radio;
 
-const props$n = {
+const props$o = {
   tag: {
     type: String,
     default: "div"
@@ -5898,10 +6283,10 @@ const props$n = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$t = 'vc-rate';
+const COMPONENT_NAME$u = 'vc-rate';
 const Rate = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$t,
-  props: props$n,
+  name: COMPONENT_NAME$u,
+  props: props$o,
   setup(props, {
     slots
   }) {
@@ -5915,7 +6300,7 @@ const Rate = /* @__PURE__ */ defineComponent({
 
 const MRate = Rate;
 
-const props$m = {
+const props$n = {
   data: {
     type: Array,
     default: () => []
@@ -5966,7 +6351,7 @@ const props$m = {
   renderRefresh: Function
 };
 
-const props$l = {
+const props$m = {
   vertical: Boolean,
   wrapperSize: {
     type: Number,
@@ -6021,7 +6406,7 @@ const barKeys$1 = [
   "thumbStyle",
   "thumbClass"
 ];
-const props$k = {
+const props$l = {
   // 	如果存在滚动条宽度为false, 不存在则为true
   // 	为false的情况下才能使用track-offset
   native: {
@@ -6052,7 +6437,7 @@ const props$k = {
   scrollX: Number,
   scrollY: Number,
   fit: Boolean,
-  ...pick(props$l, barKeys$1)
+  ...pick(props$m, barKeys$1)
 };
 
 const barKeys = [
@@ -6067,7 +6452,7 @@ const barKeys = [
   "autoResize",
   "native"
 ];
-const props$j = {
+const props$k = {
   tag: {
     type: String,
     default: "div"
@@ -6100,13 +6485,13 @@ const props$j = {
     type: Boolean,
     default: true
   },
-  barTo: props$k.to,
-  ...pick(props$k, barKeys)
+  barTo: props$l.to,
+  ...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',
@@ -6126,8 +6511,8 @@ const BAR_MAP = {
   }
 };
 const Track = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$s,
-  props: props$l,
+  name: COMPONENT_NAME$t,
+  props: props$m,
   emits: ['change'],
   setup(props, {
     emit,
@@ -6312,10 +6697,10 @@ const Track = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$r = 'vc-scroller-bar';
+const COMPONENT_NAME$s = 'vc-scroller-bar';
 const Bar = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$r,
-  props: props$k,
+  name: COMPONENT_NAME$s,
+  props: props$l,
   emits: ['change'],
   setup(props, {
     emit,
@@ -6528,7 +6913,7 @@ const useScroller = (expose) => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$q = 'vc-scroller';
+const COMPONENT_NAME$r = 'vc-scroller';
 
 /**
  * 作为备选方案,目前推荐使用ScrollerWheel
@@ -6539,8 +6924,8 @@ const COMPONENT_NAME$q = 'vc-scroller';
  * 2. 增加了一层嵌套
  */
 const Scroller = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$q,
-  props: props$j,
+  name: COMPONENT_NAME$r,
+  props: props$k,
   emits: ['scroll'],
   setup(props, {
     slots,
@@ -6600,7 +6985,7 @@ const Scroller = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$p = 'vc-scroller-wheel';
+const COMPONENT_NAME$q = 'vc-scroller-wheel';
 
 /**
  * 为减少一层嵌套，为去除滚动bar的抖动，使用wheel模拟
@@ -6622,8 +7007,8 @@ const COMPONENT_NAME$p = 'vc-scroller-wheel';
  * 设置scrollTop不会reflow和repaint，不需要考虑transfrom来改变content（transform也只在draw完成）
  */
 const ScrollerWheel = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$p,
-  props: props$j,
+  name: COMPONENT_NAME$q,
+  props: props$k,
   emits: ['scroll'],
   setup(props, {
     slots,
@@ -6727,9 +7112,9 @@ const ScrollerWheel = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$o = 'vc-recycle-list-scroll-state';
+const COMPONENT_NAME$p = 'vc-recycle-list-scroll-state';
 const ScrollState = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$o,
+  name: COMPONENT_NAME$p,
   setup(_, {
     slots
   }) {
@@ -6800,7 +7185,7 @@ const STATUS_MAP = {
   }
 };
 
-const props$i = {
+const props$j = {
   inverted: {
     type: Boolean,
     default: false
@@ -6859,13 +7244,13 @@ const useDirectionKeys = () => {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$n = 'vc-recycle-list-container';
+const COMPONENT_NAME$o = 'vc-recycle-list-container';
 
 // TODO: 抽离
 const transformKey = $.prefixStyle('transform').camel;
 const Container = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$n,
-  props: props$i,
+  name: COMPONENT_NAME$o,
+  props: props$j,
   emits: ['refresh'],
   setup(props, {
     slots
@@ -6962,9 +7347,9 @@ const Container = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$m = 'vc-recycle-list-item';
+const COMPONENT_NAME$n = 'vc-recycle-list-item';
 const Item = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$m,
+  name: COMPONENT_NAME$n,
   props: {
     vertical: {
       type: Boolean,
@@ -7006,10 +7391,10 @@ const Item = /* @__PURE__ */ defineComponent({
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$l = 'vc-recycle-list';
+const COMPONENT_NAME$m = 'vc-recycle-list';
 const RecycleList = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$l,
-  props: props$m,
+  name: COMPONENT_NAME$m,
+  props: props$n,
   emits: ['scroll'],
   setup(props, {
     slots,
@@ -7553,17 +7938,17 @@ const RecycleList = /* @__PURE__ */ 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 = defineComponent({
-  name: COMPONENT_NAME$k,
-  props: props$h,
+  name: COMPONENT_NAME$l,
+  props: props$i,
   emit: ["resize"],
   setup(props, { emit, slots }) {
     const width = ref(0);
@@ -7618,7 +8003,7 @@ const MResizer = Resizer;
 
 const MScroller = Scroller;
 
-const props$g = {
+const props$h = {
   tag: {
     type: String,
     default: "div"
@@ -7627,10 +8012,10 @@ const props$g = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$j = 'vc-select';
+const COMPONENT_NAME$k = 'vc-select';
 const Select = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$j,
-  props: props$g,
+  name: COMPONENT_NAME$k,
+  props: props$h,
   setup(props, {
     slots
   }) {
@@ -7644,7 +8029,7 @@ const Select = /* @__PURE__ */ defineComponent({
 
 const MSelect = Select;
 
-const props$f = {
+const props$g = {
   tag: {
     type: String,
     default: "div"
@@ -7653,10 +8038,10 @@ const props$f = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$i = 'vc-slider';
+const COMPONENT_NAME$j = 'vc-slider';
 const Slider = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$i,
-  props: props$f,
+  name: COMPONENT_NAME$j,
+  props: props$g,
   setup(props, {
     slots
   }) {
@@ -7670,7 +8055,7 @@ const Slider = /* @__PURE__ */ defineComponent({
 
 const MSlider = Slider;
 
-const props$e = {
+const props$f = {
   tag: {
     type: String,
     default: "div"
@@ -7679,10 +8064,10 @@ const props$e = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$h = 'vc-sort-list';
+const COMPONENT_NAME$i = 'vc-sort-list';
 const SortList = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$h,
-  props: props$e,
+  name: COMPONENT_NAME$i,
+  props: props$f,
   setup(props, {
     slots
   }) {
@@ -7696,7 +8081,7 @@ const SortList = /* @__PURE__ */ defineComponent({
 
 const MSortList = SortList;
 
-const props$d = {
+const props$e = {
   tag: {
     type: String,
     default: "div"
@@ -7705,10 +8090,10 @@ const props$d = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$g = 'vc-steps';
+const COMPONENT_NAME$h = 'vc-steps';
 const Steps = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$g,
-  props: props$d,
+  name: COMPONENT_NAME$h,
+  props: props$e,
   setup(props, {
     slots
   }) {
@@ -7722,7 +8107,7 @@ const Steps = /* @__PURE__ */ defineComponent({
 
 const MSteps = Steps;
 
-const props$c = {
+const props$d = {
   tag: {
     type: String,
     default: "div"
@@ -7731,10 +8116,10 @@ const props$c = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$f = 'vc-switch';
+const COMPONENT_NAME$g = 'vc-switch';
 const Switch = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$f,
-  props: props$c,
+  name: COMPONENT_NAME$g,
+  props: props$d,
   setup(props, {
     slots
   }) {
@@ -7748,7 +8133,7 @@ const Switch = /* @__PURE__ */ defineComponent({
 
 const MSwitch = Switch;
 
-const props$b = {
+const props$c = {
   tag: {
     type: String,
     default: "div"
@@ -7757,10 +8142,10 @@ const props$b = {
 
 /** @jsxImportSource vue */
 
-const COMPONENT_NAME$e = 'vc-table';
+const COMPONENT_NAME$f = 'vc-table';
 const Table = /* @__PURE__ */ defineComponent({
-  name: COMPONENT_NAME$e,
-  props: props$b,
+  name: COMPONENT_NAME$f,
+  props: props$c,
   setup(props, {
     slots
   }) {
@@ -7774,31 +8159,430 @@ const Table = /* @__PURE__ */ 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 = getCurrentInstance();
+  const { props, emit } = instance;
+  const tabsId = ref(getUid("tabs"));
+  const list = ref([]);
+  const afloatWidth = ref(0);
+  const afloatOffset = ref(0);
+  const currentValue = ref(void 0);
+  const scrollOffset = ref(0);
+  const scrollable = ref(false);
+  const timer = ref(null);
+  const getTabIndex = (v) => {
+    return list.value.findIndex((nav, index) => (nav.value || index) === v);
+  };
+  const afloatStyle = computed(() => {
+    const style = {
+      width: `${afloatWidth.value}px`,
+      transform: `translate3d(${afloatOffset.value}px, 0px, 0px)`
+    };
+    return style;
+  });
+  const contentStyle = 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 = 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?.();
+  };
+  onMounted(() => {
+    Resize.on(options.wrapper.value, handleResize);
+    options.scrollToActive && nextTick(options.scrollToActive);
+  });
+  onUnmounted(() => {
+    Resize.off(options.wrapper.value, handleResize);
+    timer.value && clearTimeout(timer.value);
+  });
+  const add = (item, setValue) => {
+    if (!item) return;
+    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);
+  };
+  provide("tabs", {
+    props,
+    currentValue,
+    refresh,
+    add,
+    remove
+  });
+  watch(
+    () => props.modelValue,
+    (v) => {
+      currentValue.value = v;
+    },
+    { immediate: true }
+  );
+  watch(
+    () => currentValue.value,
+    () => {
+      options.refreshAfloat?.();
+      options.scrollToActive?.();
+    }
+  );
+  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__ */ defineComponent({
+  name: COMPONENT_NAME$e,
+  props: props$b,
+  emits: ['update:modelValue', 'change', 'click'],
+  setup(props, {
+    slots
+  }) {
+    const instance = getCurrentInstance();
+    const wrapper = ref(null);
+    const content = ref(null);
+    const scroll = ref(null);
+    const nav = 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 = () => {
+      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 = computed(() => {
+      const style = {
+        transform: `translate3d(${-tabs.scrollOffset.value}px, 0px, 0px)`
+      };
+      return style;
+    });
+    const isCard = computed(() => {
+      return props.type === 'card';
+    });
+    return () => {
+      return createVNode("div", {
+        "class": [tabs.classes.value, 'vc-tabs']
+      }, [createVNode("div", {
+        "class": "vc-tabs__extra"
+      }, [slots.extra?.()]), createVNode("div", {
+        "ref": wrapper,
+        "style": {
+          padding: tabs.scrollable.value && '0 24px'
+        },
+        "class": "vc-tabs__bar"
+      }, [tabs.scrollable.value && createVNode(Icon, {
+        "class": "vc-tabs__icon is-left",
+        "type": "left",
+        "onClick": handlePrev
+      }, null), tabs.scrollable.value && createVNode(Icon, {
+        "class": "vc-tabs__icon is-right",
+        "type": "right",
+        "onClick": handleNext
+      }, null), createVNode("div", {
+        "ref": scroll,
+        "class": "vc-tabs__scroll"
+      }, [createVNode("div", {
+        "ref": nav,
+        "style": scrollStyle.value,
+        "class": "vc-tabs__nav"
+      }, [!isCard.value && createVNode("div", {
+        "style": tabs.afloatStyle.value,
+        "class": "vc-tabs__afloat"
+      }, null), tabs.list.value.map((item, index) => {
+        return 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' ? createVNode("span", {
+          "innerHTML": item.label
+        }, null) : typeof item.label === 'function' && createVNode(Customer, {
+          "render": item.label,
+          "it": item,
+          "index": index
+        }, null), props.closable && item.closable && createVNode(Icon, {
+          "type": "close"
+        }, null)]);
+      })])])]), 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 = getCurrentInstance();
+  const { props } = instance;
+  const currentValue = ref(void 0);
+  const isLoaded = ref(false);
+  const tabs = inject("tabs", {});
+  const isActive = computed(() => {
+    const state = tabs.currentValue.value === (props.value || currentValue.value);
+    if (!isLoaded.value && state) {
+      isLoaded.value = true;
+    }
+    return state;
+  });
+  const isReady = computed(() => {
+    return !props.lazy || isLoaded.value || isActive.value;
+  });
+  const style = computed(() => {
+    return isActive.value ? {} : {
+      opacity: 0,
+      height: 0,
+      // 避免重用高度
+      overflow: "hidden"
+      // 避免内层的高度影响
+    };
+  });
+  const refresh = () => {
+    !instance.isUnmounted && tabs.refresh?.();
+  };
+  watch(
+    () => props.value,
+    (v) => {
+      currentValue.value = v;
+    },
+    {
+      immediate: true
+    }
+  );
+  watch(
+    () => [props.value, props.label],
+    refresh
+  );
+  onMounted(refresh);
+  onUnmounted(refresh);
+  onBeforeMount(() => {
+    tabs.add?.(instance, (v) => currentValue.value = v);
+  });
+  onBeforeUnmount(() => {
+    tabs.remove?.(instance);
+  });
+  return {
+    isLoaded,
+    isActive,
+    isReady,
+    style,
+    currentValue
+  };
+};
+
+/** @jsxImportSource vue */
+
+const COMPONENT_NAME$d = 'vc-tabs-pane';
+const TabsPane = /* @__PURE__ */ defineComponent({
   name: COMPONENT_NAME$d,
   props: props$a,
-  setup(props, {
+  setup(_, {
     slots
   }) {
+    const tabsPane = useTabsPane();
     return () => {
       return 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: {
@@ -8222,4 +9006,4 @@ const UploadPicker = /* @__PURE__ */ defineComponent({
 
 const MUploadPicker = UploadPicker;
 
-export { ActionSheet, Alert, Artboard, Button, ButtonGroup, Calendar, Card, Carousel, Cascader, Chart, Checkbox, Clipboard, Collapse, ColorPicker, Countdown, Customer, DatePicker, Debounce, Divider, Drawer, Dropdown, Editor, Expand, Form, FormItem, Fragment, HTMLToImage, Icon, IconManager, Image, ImageCrop, ImagePreview, ImageProcessing, Input, InputNumber, InputSearch, MList as List, MListItem as ListItem, MActionSheet, MAlert, MArtboard, MButton, MButtonGroup, MCalendar, MCard, MCarousel, MCascader, MChart, MCheckbox, MClipboard, MCollapse, MColorPicker, MCountdown, MCustomer, MDatePicker, Debounce as MDebounce, MDivider, MDrawer, MDropdown, MEditor, MExpand, MForm, MFormItem, MFragment, MHTMLToImage, MIcon, MImage, MImageCrop, MImagePreview, MImageProcessing, MInput, MInputNumber, MInputSearch, MList, MListItem, MMarquee, MMessage, modal as MModal, MModalView, MNotice, MOption, MPage, MPicker, MPopconfirm, MPopover, MPopup, MPortal, MPrint, MProgress, MRadio, MRate, MRecycleList, MResizer, MScroller, MSelect, MSlider, MSortList, MSpin, MSteps, MSwitch, MTable, MTabs, MTag, MText, MTextarea, MTimePicker, MTimeline, MToast$1 as MToast, MToastView, MTouch, MTransition, MTransitionCollapse, MTransitionFade, MTransitionScale, MTransitionSlide, MTransitionZoom, MTree, MUpload, MUploadPicker, Marquee, Message$1 as Message, MessageView, modal$1 as Modal, ModalView, Notice$1 as Notice, NoticeView, Option, Page, Picker, Popconfirm, Popover, Popup, Portal, PortalView, Print, Progress, Radio, Rate, RecycleList, Resizer, Scroller, ScrollerWheel, Select, Slider, SortList, Spin, Steps, Switch, Table, Tabs, Tag, Text, Textarea, Theme, ThemeImage, ThemeText, ThemeView, TimePicker, Timeline, Toast, ToastView, Touch, Transition, TransitionCollapse, TransitionFade, TransitionScale, TransitionSlide, TransitionZoom, Tree, Upload, UploadPicker, VcError, VcInstance };
+export { ActionSheet, Alert, Artboard, Button, ButtonGroup, Calendar, Card, Carousel, Cascader, Chart, Checkbox, Clipboard, Collapse, ColorPicker, Countdown, Customer, DatePicker, Debounce, Divider, Drawer, Dropdown, Editor, Expand, Form, FormItem, Fragment, HTMLToImage, Icon, IconManager, Image, ImageCrop, ImagePreview, ImageProcessing, Input, InputNumber, InputSearch, MList as List, MListItem as ListItem, MActionSheet, MAlert, MArtboard, MButton, MButtonGroup, MCalendar, MCard, MCarousel, MCascader, MChart, MCheckbox, MClipboard, MCollapse, MColorPicker, MCountdown, MCustomer, MDatePicker, Debounce as MDebounce, MDivider, MDrawer, MDropdown, MEditor, MExpand, MForm, MFormItem, MFragment, MHTMLToImage, MIcon, MImage, MImageCrop, MImagePreview, MImageProcessing, MInput, MInputNumber, MInputSearch, MList, MListItem, MMarquee, MMessage, modal as MModal, MModalView, MNotice, MOption, MPage, MPicker, MPopconfirm, MPopover, MPopup, MPortal, MPrint, MProgress, MRadio, MRate, MRecycleList, MResizer, MScroller, MSelect, MSlider, MSortList, MSpin, MSteps, MSwitch, MTable, MTabs, MTabsPane, MTag, MText, MTextarea, MTimePicker, MTimeline, MToast$1 as MToast, MToastView, MTouch, MTransition, MTransitionCollapse, MTransitionFade, MTransitionScale, MTransitionSlide, MTransitionZoom, MTree, MUpload, MUploadPicker, Marquee, Message$1 as Message, MessageView, modal$1 as Modal, ModalView, Notice$1 as Notice, NoticeView, Option, Page, Picker, Popconfirm, Popover, Popup, Portal, PortalView, Print, Progress, Radio, Rate, RecycleList, Resizer, Scroller, ScrollerWheel, Select, Slider, SortList, Spin, Steps, Switch, Table, Tabs, TabsPane, Tag, Text, Textarea, Theme, ThemeImage, ThemeText, ThemeView, TimePicker, Timeline, Toast, ToastView, Touch, Transition, TransitionCollapse, TransitionFade, TransitionScale, TransitionSlide, TransitionZoom, Tree, Upload, UploadPicker, VcError, VcInstance };