@varlet/ui 1.20.0 → 1.22.0-alpha.2

package/es/dialog/Dialog.js

@@ -4,11 +4,9 @@ import { props } from './props';
 import { defineComponent, ref, watch } from 'vue';
 import { dt } from '../utils/shared';
 import { pack } from '../locale';
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createVNode as _createVNode, resolveComponent as _resolveComponent, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
-var _withId = /*#__PURE__*/_withScopeId("");
-
-_pushScopeId("");
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
 var _hoisted_1 = {
   class: "var-dialog__title"
@@ -16,10 +14,7 @@ var _hoisted_1 = {
 var _hoisted_2 = {
   class: "var-dialog__actions"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+export function render(_ctx, _cache) {
   var _component_var_button = _resolveComponent("var-button");
 
   var _component_var_popup = _resolveComponent("var-popup");
@@ -41,20 +36,20 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
     onRouteChange: _ctx.onRouteChange,
     onClickOverlay: _ctx.handleClickOverlay
   }, {
-    default: _withId(() => [_createVNode("div", _mergeProps({
+    default: _withCtx(() => [_createElementVNode("div", _mergeProps({
       class: "var--box var-dialog"
-    }, _ctx.$attrs), [_createVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "title", {}, () => [_createTextVNode(_toDisplayString(_ctx.dt(_ctx.title, _ctx.pack.dialogTitle)), 1
+    }, _ctx.$attrs), [_createElementVNode("div", _hoisted_1, [_renderSlot(_ctx.$slots, "title", {}, () => [_createTextVNode(_toDisplayString(_ctx.dt(_ctx.title, _ctx.pack.dialogTitle)), 1
     /* TEXT */
-    )])]), _createVNode("div", {
+    )])]), _createElementVNode("div", {
       class: "var-dialog__message",
-      style: {
+      style: _normalizeStyle({
         textAlign: _ctx.messageAlign
-      }
+      })
     }, [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.message), 1
     /* TEXT */
     )])], 4
     /* STYLE */
-    ), _createVNode("div", _hoisted_2, [_ctx.cancelButton ? (_openBlock(), _createBlock(_component_var_button, {
+    ), _createElementVNode("div", _hoisted_2, [_ctx.cancelButton ? (_openBlock(), _createBlock(_component_var_button, {
       key: 0,
       class: "var-dialog__button var-dialog__cancel-button",
       "var-dialog-cover": "",
@@ -63,7 +58,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
       color: _ctx.cancelButtonColor,
       onClick: _ctx.cancel
     }, {
-      default: _withId(() => [_createTextVNode(_toDisplayString(_ctx.dt(_ctx.cancelButtonText, _ctx.pack.dialogCancelButtonText)), 1
+      default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.dt(_ctx.cancelButtonText, _ctx.pack.dialogCancelButtonText)), 1
       /* TEXT */
       )]),
       _: 1
@@ -80,7 +75,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
       color: _ctx.confirmButtonColor,
       onClick: _ctx.confirm
     }, {
-      default: _withId(() => [_createTextVNode(_toDisplayString(_ctx.dt(_ctx.confirmButtonText, _ctx.pack.dialogConfirmButtonText)), 1
+      default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.dt(_ctx.confirmButtonText, _ctx.pack.dialogConfirmButtonText)), 1
       /* TEXT */
       )]),
       _: 1
@@ -97,7 +92,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   }, 8
   /* PROPS */
   , ["show", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange", "onClickOverlay"]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarDialog',

package/es/divider/Divider.js

@@ -4,29 +4,24 @@ import { defineComponent, computed, reactive, onMounted, onUpdated, toRefs } fro
 import { toSizeUnit } from '../utils/elements';
 import { isBool, toNumber } from '../utils/shared';
 import { props } from './props';
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
-var _withId = /*#__PURE__*/_withScopeId("");
-
-_pushScopeId("");
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
 var _hoisted_1 = {
   key: 0,
   class: "var-divider__text"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
-  return _openBlock(), _createBlock("div", {
-    class: ["var-divider var--box", [_ctx.vertical ? 'var-divider--vertical' : null, _ctx.withText ? 'var-divider--with-text' : null, _ctx.isInset ? 'var-divider--inset' : null, _ctx.dashed ? 'var-divider--dashed' : null]],
-    style: _ctx.style
-  }, [_renderSlot(_ctx.$slots, "default", {}, () => [_ctx.description ? (_openBlock(), _createBlock("span", _hoisted_1, _toDisplayString(_ctx.description), 1
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(["var-divider var--box", [_ctx.vertical ? 'var-divider--vertical' : null, _ctx.withText ? 'var-divider--with-text' : null, _ctx.isInset ? 'var-divider--inset' : null, _ctx.dashed ? 'var-divider--dashed' : null]]),
+    style: _normalizeStyle(_ctx.style)
+  }, [_renderSlot(_ctx.$slots, "default", {}, () => [_ctx.description ? (_openBlock(), _createElementBlock("span", _hoisted_1, _toDisplayString(_ctx.description), 1
   /* TEXT */
   )) : _createCommentVNode("v-if", true)])], 6
   /* CLASS, STYLE */
   );
-});
+}
 export default defineComponent({
   render,
   name: 'VarDivider',

package/es/form/Form.js

@@ -5,21 +5,16 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 import { defineComponent, computed } from 'vue';
 import { props } from './props';
 import { useFormItems } from './provide';
-import { renderSlot as _renderSlot, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
-var _withId = /*#__PURE__*/_withScopeId("");
-
-_pushScopeId("");
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
 var _hoisted_1 = {
   class: "var-form"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
-  return _openBlock(), _createBlock("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default")]);
-});
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default")]);
+}
 export default defineComponent({
   render,
   name: 'VarForm',

package/es/form-details/FormDetails.js

@@ -1,10 +1,8 @@
 import { defineComponent } from 'vue';
 import { props } from './props';
-import { toDisplayString as _toDisplayString, createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
-var _withId = /*#__PURE__*/_withScopeId("");
-
-_pushScopeId("");
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
 var _hoisted_1 = {
   key: 0,
@@ -16,23 +14,20 @@ var _hoisted_2 = {
 var _hoisted_3 = {
   class: "var-form-details__length"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+export function render(_ctx, _cache) {
   return _openBlock(), _createBlock(_Transition, {
     name: "var-form-details"
   }, {
-    default: _withId(() => [_ctx.errorMessage || _ctx.maxlengthText ? (_openBlock(), _createBlock("div", _hoisted_1, [_createVNode("div", _hoisted_2, _toDisplayString(_ctx.errorMessage), 1
+    default: _withCtx(() => [_ctx.errorMessage || _ctx.maxlengthText ? (_openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", _hoisted_2, _toDisplayString(_ctx.errorMessage), 1
     /* TEXT */
-    ), _createVNode("div", _hoisted_3, _toDisplayString(_ctx.maxlengthText), 1
+    ), _createElementVNode("div", _hoisted_3, _toDisplayString(_ctx.maxlengthText), 1
     /* TEXT */
     )])) : _createCommentVNode("v-if", true)]),
     _: 1
     /* STABLE */
 
   });
-});
+}
 export default defineComponent({
   render,
   name: 'VarFormDetails',

package/es/icon/Icon.js

@@ -6,26 +6,23 @@ import { defineComponent, watch, ref, nextTick } from 'vue';
 import { isURL, toNumber } from '../utils/shared';
 import { props } from './props';
 import { toSizeUnit } from '../utils/elements';
-import { resolveDynamicComponent as _resolveDynamicComponent, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from "vue";
-
-var _withId = /*#__PURE__*/_withScopeId("");
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+import { resolveDynamicComponent as _resolveDynamicComponent, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+export function render(_ctx, _cache) {
   return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.isURL(_ctx.name) ? 'img' : 'i'), {
-    class: ["var-icon", [_ctx.namespace + "--set", _ctx.isURL(_ctx.name) ? 'var-icon__image' : _ctx.namespace + "-" + _ctx.nextName, _ctx.shrinking ? 'var-icon--shrinking' : null]],
-    style: {
+    class: _normalizeClass(["var-icon", [_ctx.namespace + "--set", _ctx.isURL(_ctx.name) ? 'var-icon__image' : _ctx.namespace + "-" + _ctx.nextName, _ctx.shrinking ? 'var-icon--shrinking' : null]]),
+    style: _normalizeStyle({
       color: _ctx.color,
       transition: "all " + _ctx.toNumber(_ctx.transition) + "ms",
       width: _ctx.isURL(_ctx.name) ? _ctx.toSizeUnit(_ctx.size) : null,
       height: _ctx.isURL(_ctx.name) ? _ctx.toSizeUnit(_ctx.size) : null,
       fontSize: _ctx.toSizeUnit(_ctx.size)
-    },
+    }),
     src: _ctx.isURL(_ctx.name) ? _ctx.nextName : null,
     onClick: _ctx.onClick
   }, null, 8
   /* PROPS */
   , ["class", "style", "src", "onClick"]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarIcon',

package/es/icon/icon.less

@@ -1,4 +1,4 @@
-@import '~@varlet/icons/dist/css/varlet-icons.less';
+@import '@varlet/icons/dist/css/varlet-icons.less';
 
 @icon-size: 20px;
 

package/es/image/Image.js

@@ -3,55 +3,57 @@ import Lazy from '../lazy';
 import { defineComponent } from 'vue';
 import { props } from './props';
 import { toSizeUnit } from '../utils/elements';
-import { resolveDirective as _resolveDirective, withDirectives as _withDirectives, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from "vue";
+import { normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
-var _withId = /*#__PURE__*/_withScopeId("");
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+var _hoisted_1 = ["alt", "lazy-error", "lazy-loading"];
+var _hoisted_2 = ["alt", "src"];
+export function render(_ctx, _cache) {
   var _directive_lazy = _resolveDirective("lazy");
 
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _withDirectives((_openBlock(), _createBlock("div", {
-    class: ["var-image var--box", [!_ctx.block ? 'var--inline-block' : null]],
-    style: {
+  return _withDirectives((_openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(["var-image var--box", [!_ctx.block ? 'var--inline-block' : null]]),
+    style: _normalizeStyle({
       width: _ctx.toSizeUnit(_ctx.width),
       height: _ctx.toSizeUnit(_ctx.height),
       'border-radius': _ctx.toSizeUnit(_ctx.radius)
-    }
-  }, [_ctx.lazy ? _withDirectives((_openBlock(), _createBlock("img", {
+    })
+  }, [_ctx.lazy ? _withDirectives((_openBlock(), _createElementBlock("img", {
     key: 0,
     class: "var-image__image",
     alt: _ctx.alt,
     "lazy-error": _ctx.error,
     "lazy-loading": _ctx.loading,
-    style: {
+    style: _normalizeStyle({
       objectFit: _ctx.fit
-    },
-    onLoad: _cache[1] || (_cache[1] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args)),
-    onError: _cache[2] || (_cache[2] = (...args) => _ctx.handleError && _ctx.handleError(...args)),
-    onClick: _cache[3] || (_cache[3] = (...args) => _ctx.onClick && _ctx.onClick(...args))
+    }),
+    onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args)),
+    onError: _cache[1] || (_cache[1] = (...args) => _ctx.handleError && _ctx.handleError(...args)),
+    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onClick && _ctx.onClick(...args))
   }, null, 44
   /* STYLE, PROPS, HYDRATE_EVENTS */
-  , ["alt", "lazy-error", "lazy-loading"])), [[_directive_lazy, _ctx.src]]) : (_openBlock(), _createBlock("img", {
+  , _hoisted_1)), [[_directive_lazy, _ctx.src]]) : (_openBlock(), _createElementBlock("img", {
     key: 1,
     class: "var-image__image",
     alt: _ctx.alt,
-    style: {
+    style: _normalizeStyle({
       objectFit: _ctx.fit
-    },
+    }),
     src: _ctx.src,
-    onLoad: _cache[4] || (_cache[4] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args)),
-    onError: _cache[5] || (_cache[5] = (...args) => _ctx.handleError && _ctx.handleError(...args)),
-    onClick: _cache[6] || (_cache[6] = (...args) => _ctx.onClick && _ctx.onClick(...args))
+    onLoad: _cache[3] || (_cache[3] = (...args) => _ctx.handleLoad && _ctx.handleLoad(...args)),
+    onError: _cache[4] || (_cache[4] = (...args) => _ctx.handleError && _ctx.handleError(...args)),
+    onClick: _cache[5] || (_cache[5] = (...args) => _ctx.onClick && _ctx.onClick(...args))
   }, null, 44
   /* STYLE, PROPS, HYDRATE_EVENTS */
-  , ["alt", "src"]))], 6
+  , _hoisted_2))], 6
   /* CLASS, STYLE */
   )), [[_directive_ripple, {
     disabled: !_ctx.ripple
   }]]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarImage',

package/es/image-preview/ImagePreview.js

@@ -8,20 +8,16 @@ import { toNumber } from '../utils/shared';
 var DISTANCE_OFFSET = 12;
 var EVENT_DELAY = 200;
 var ANIMATION_DURATION = 200;
-import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock, createVNode as _createVNode, resolveComponent as _resolveComponent, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, withCtx as _withCtx, createBlock as _createBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
-var _withId = /*#__PURE__*/_withScopeId("");
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-_pushScopeId("");
-
-var _hoisted_1 = {
+var _hoisted_1 = ["src", "alt"];
+var _hoisted_2 = {
   key: 0,
   class: "var-image-preview__indicators"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+export function render(_ctx, _cache) {
   var _component_var_swipe_item = _resolveComponent("var-swipe-item");
 
   var _component_var_swipe = _resolveComponent("var-swipe");
@@ -45,7 +41,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
     onOpened: _ctx.onOpened,
     onRouteChange: _ctx.onRouteChange
   }, {
-    default: _withId(() => [_createVNode(_component_var_swipe, _mergeProps({
+    default: _withCtx(() => [_createVNode(_component_var_swipe, _mergeProps({
       class: "var-image-preview__swipe",
       "var-image-preview-cover": "",
       touchable: _ctx.canSwipe,
@@ -54,29 +50,29 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
       loop: _ctx.loop,
       onChange: _ctx.onChange
     }, _ctx.$attrs), {
-      default: _withId(() => [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.images, image => {
+      default: _withCtx(() => [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.images, image => {
         return _openBlock(), _createBlock(_component_var_swipe_item, {
           class: "var-image-preview__swipe-item",
           "var-image-preview-cover": "",
           key: image
         }, {
-          default: _withId(() => [_createVNode("div", {
+          default: _withCtx(() => [_createElementVNode("div", {
             class: "var-image-preview__zoom-container",
-            style: {
+            style: _normalizeStyle({
               transform: "scale(" + _ctx.scale + ") translate(" + _ctx.translateX + "px, " + _ctx.translateY + "px)",
               transitionTimingFunction: _ctx.transitionTimingFunction,
               transitionDuration: _ctx.transitionDuration
-            },
-            onTouchstart: _cache[1] || (_cache[1] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args)),
-            onTouchmove: _cache[2] || (_cache[2] = (...args) => _ctx.handleTouchmove && _ctx.handleTouchmove(...args)),
-            onTouchend: _cache[3] || (_cache[3] = (...args) => _ctx.handleTouchend && _ctx.handleTouchend(...args))
-          }, [_createVNode("img", {
+            }),
+            onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args)),
+            onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.handleTouchmove && _ctx.handleTouchmove(...args)),
+            onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.handleTouchend && _ctx.handleTouchend(...args))
+          }, [_createElementVNode("img", {
             class: "var-image-preview__image",
             src: image,
             alt: image
           }, null, 8
           /* PROPS */
-          , ["src", "alt"])], 36
+          , _hoisted_1)], 36
           /* STYLE, HYDRATE_EVENTS */
           )]),
           _: 2
@@ -88,17 +84,17 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
       }), 128
       /* KEYED_FRAGMENT */
       ))]),
-      indicator: _withId(({
+      indicator: _withCtx(({
         index,
         length
       }) => [_renderSlot(_ctx.$slots, "indicator", {
         index: index,
         length: length
-      }, () => [_ctx.indicator && _ctx.images.length > 1 ? (_openBlock(), _createBlock("div", _hoisted_1, _toDisplayString(index + 1) + " / " + _toDisplayString(length), 1
+      }, () => [_ctx.indicator && _ctx.images.length > 1 ? (_openBlock(), _createElementBlock("div", _hoisted_2, _toDisplayString(index + 1) + " / " + _toDisplayString(length), 1
       /* TEXT */
       )) : _createCommentVNode("v-if", true)])]),
-      _: 1
-      /* STABLE */
+      _: 3
+      /* FORWARDED */
 
     }, 16
     /* FULL_PROPS */
@@ -117,7 +113,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   }, 8
   /* PROPS */
   , ["show", "lock-scroll", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
-});
+}
 export default defineComponent({
   render,
   name: 'VarImagePreview',

package/es/index-anchor/IndexAnchor.js

@@ -2,17 +2,16 @@ import { computed, defineComponent, ref, Transition } from 'vue';
 import Sticky from '../sticky';
 import { useIndexBar } from './provide';
 import { props } from './props';
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, mergeProps as _mergeProps, createVNode as _createVNode, resolveDynamicComponent as _resolveDynamicComponent, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from "vue";
-
-var _withId = /*#__PURE__*/_withScopeId("");
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, mergeProps as _mergeProps, createElementVNode as _createElementVNode, resolveDynamicComponent as _resolveDynamicComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock } from "vue";
+export function render(_ctx, _cache) {
   return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.sticky ? 'var-sticky' : _ctx.Transition), {
     "offset-top": _ctx.sticky ? _ctx.stickyOffsetTop : null,
     "z-index": _ctx.sticky ? _ctx.zIndex : null,
+    disabled: _ctx.disabled && !_ctx.cssMode,
+    "css-mode": _ctx.cssMode,
     ref: "anchorEl"
   }, {
-    default: _withId(() => [_createVNode("div", _mergeProps({
+    default: _withCtx(() => [_createElementVNode("div", _mergeProps({
       class: "var-index-anchor"
     }, _ctx.$attrs), [_renderSlot(_ctx.$slots, "default", {}, () => [_createTextVNode(_toDisplayString(_ctx.name), 1
     /* TEXT */
@@ -24,8 +23,8 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
 
   }, 8
   /* PROPS */
-  , ["offset-top", "z-index"]);
-});
+  , ["offset-top", "z-index", "disabled", "css-mode"]);
+}
 export default defineComponent({
   render,
   name: 'VarIndexAnchor',
@@ -42,6 +41,7 @@ export default defineComponent({
       bindIndexBar
     } = useIndexBar();
     var ownTop = ref(0);
+    var disabled = ref(false);
     var name = computed(() => props.index);
     var anchorEl = ref(null);
 
@@ -53,6 +53,7 @@ export default defineComponent({
     var {
       active,
       sticky,
+      cssMode,
       stickyOffsetTop,
       zIndex
     } = indexBar;
@@ -62,11 +63,16 @@ export default defineComponent({
       ownTop.value = anchorEl.value.$el ? anchorEl.value.$el.offsetTop : anchorEl.value.offsetTop;
     };
 
+    var setDisabled = value => {
+      disabled.value = value;
+    };
+
     var indexAnchorProvider = {
       index,
       name,
       ownTop,
-      setOwnTop
+      setOwnTop,
+      setDisabled
     };
     bindIndexBar(indexAnchorProvider);
     return {
@@ -75,6 +81,8 @@ export default defineComponent({
       active,
       sticky,
       zIndex,
+      disabled,
+      cssMode,
       stickyOffsetTop,
       Transition
     };

package/es/index-bar/IndexBar.js

@@ -7,39 +7,35 @@ import { easeInOutCubic, isPlainObject, toNumber } from '../utils/shared';
 import { getParentScroller, getScrollLeft, nextTickFrame, requestAnimationFrame, scrollTo as varScrollTo } from '../utils/elements';
 import { useIndexAnchors } from './provide';
 import { props } from './props';
-import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createBlock as _createBlock, toDisplayString as _toDisplayString, createVNode as _createVNode, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
-var _withId = /*#__PURE__*/_withScopeId("");
-
-_pushScopeId("");
+var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
 var _hoisted_1 = {
   class: "var-index-bar",
   ref: "barEl"
 };
-
-_popScopeId();
-
-export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
-  return _openBlock(), _createBlock("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default"), _createVNode("ul", {
+var _hoisted_2 = ["onClick"];
+export function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", _hoisted_1, [_renderSlot(_ctx.$slots, "default"), _createElementVNode("ul", {
     class: "var-index-bar__anchor-list",
-    style: {
+    style: _normalizeStyle({
       zIndex: _ctx.zIndex + 2,
       display: _ctx.hideList ? 'none' : 'block'
-    }
-  }, [(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.anchorNameList, anchorName => {
-    return _openBlock(), _createBlock("li", {
+    })
+  }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.anchorNameList, anchorName => {
+    return _openBlock(), _createElementBlock("li", {
       key: anchorName,
-      class: ["var-index-bar__anchor-item", {
+      class: _normalizeClass(["var-index-bar__anchor-item", {
         'var-index-bar__anchor-item--active': _ctx.active === anchorName
-      }],
-      style: {
+      }]),
+      style: _normalizeStyle({
         color: _ctx.active === anchorName && _ctx.highlightColor ? _ctx.highlightColor : ''
-      },
+      }),
       onClick: $event => _ctx.anchorClick(anchorName)
     }, _toDisplayString(anchorName), 15
     /* TEXT, CLASS, STYLE, PROPS */
-    , ["onClick"]);
+    , _hoisted_2);
   }), 128
   /* KEYED_FRAGMENT */
   ))], 4
@@ -47,7 +43,7 @@ export var render = /*#__PURE__*/_withId((_ctx, _cache) => {
   )], 512
   /* NEED_PATCH */
   );
-});
+}
 export default defineComponent({
   render,
   name: 'VarIndexBar',
@@ -66,11 +62,13 @@ export default defineComponent({
     var anchorNameList = ref([]);
     var active = ref();
     var sticky = computed(() => props.sticky);
+    var cssMode = computed(() => props.cssMode);
     var stickyOffsetTop = computed(() => props.stickyOffsetTop);
     var zIndex = computed(() => props.zIndex);
     var indexBarProvider = {
       active,
       sticky,
+      cssMode,
       stickyOffsetTop,
       zIndex
     };
@@ -88,12 +86,20 @@ export default defineComponent({
         scrollTop,
         scrollHeight
       } = scrollEl.value;
+      var {
+        offsetTop
+      } = barEl.value;
       indexAnchors.forEach((anchor, index) => {
         var anchorTop = anchor.ownTop.value;
-        var top = scrollTop - anchorTop + stickyOffsetTop.value;
+        var top = scrollTop - anchorTop + stickyOffsetTop.value - offsetTop;
         var distance = index === indexAnchors.length - 1 ? scrollHeight : indexAnchors[index + 1].ownTop.value - anchor.ownTop.value;
 
         if (top >= 0 && top < distance && !clickedName.value) {
+          if (index && !props.cssMode) {
+            indexAnchors[index - 1].setDisabled(true);
+          }
+
+          anchor.setDisabled(false);
           emitEvent(anchor);
         }
       });

package/es/index-bar/props.js

@@ -7,6 +7,10 @@ export var props = {
     type: Number,
     default: 0
   },
+  cssMode: {
+    type: Boolean,
+    default: false
+  },
   hideList: {
     type: Boolean,
     default: false