@varlet/ui 1.26.9 → 1.27.0-alpha.1649242923701

package/lib/divider/Divider.js

@@ -12,21 +12,24 @@ var _shared = require("../utils/shared");
 
 var _props = require("./props");
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _components = require("../utils/components");
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-var _hoisted_1 = {
-  key: 0,
-  class: "var-divider__text"
-};
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('divider');
 
 function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.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]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box', [_ctx.vertical, _ctx.n('--vertical')], [_ctx.withText, _ctx.n('--with-text')], [_ctx.isInset, _ctx.n('--inset')], [_ctx.dashed, _ctx.n('--dashed')])),
     style: (0, _vue.normalizeStyle)(_ctx.style)
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [_ctx.description ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("span", _hoisted_1, (0, _vue.toDisplayString)(_ctx.description), 1
-  /* TEXT */
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [_ctx.description ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("span", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('text'))
+  }, (0, _vue.toDisplayString)(_ctx.description), 3
+  /* TEXT, CLASS */
   )) : (0, _vue.createCommentVNode)("v-if", true)])], 6
   /* CLASS, STYLE */
   );
@@ -78,7 +81,10 @@ var _default = (0, _vue.defineComponent)({
     (0, _vue.onUpdated)(() => {
       checkHasText();
     });
-    return _extends({}, (0, _vue.toRefs)(state), {
+    return _extends({
+      n,
+      classes
+    }, (0, _vue.toRefs)(state), {
       style,
       isInset
     });

package/lib/form/Form.js

@@ -10,18 +10,22 @@ var _props = require("./props");
 
 var _provide = require("./provide");
 
+var _components = require("../utils/components");
+
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
-
-var _hoisted_1 = {
-  class: "var-form"
-};
+var {
+  n
+} = (0, _components.createNamespace)('form');
 
 function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "default")]);
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n())
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -75,6 +79,7 @@ var _default = (0, _vue.defineComponent)({
     };
     bindFormItems(formProvider);
     return {
+      n,
       validate,
       reset,
       resetValidation

package/lib/form-details/FormDetails.js

@@ -6,40 +6,47 @@ exports.render = render;
 
 var _vue = require("vue");
 
-var _props = require("./props");
+var _components = require("../utils/components");
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+var _props = require("./props");
 
-var _hoisted_1 = {
-  key: 0,
-  class: "var-form-details"
-};
-var _hoisted_2 = {
-  class: "var-form-details__message"
-};
-var _hoisted_3 = {
-  class: "var-form-details__length"
-};
+var {
+  n
+} = (0, _components.createNamespace)('form-details');
 
 function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createBlock)(_vue.Transition, {
-    name: "var-form-details"
+    name: _ctx.n()
   }, {
-    default: (0, _vue.withCtx)(() => [_ctx.errorMessage || _ctx.maxlengthText ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", _hoisted_2, (0, _vue.toDisplayString)(_ctx.errorMessage), 1
-    /* TEXT */
-    ), (0, _vue.createElementVNode)("div", _hoisted_3, (0, _vue.toDisplayString)(_ctx.maxlengthText), 1
-    /* TEXT */
-    )])) : (0, _vue.createCommentVNode)("v-if", true)]),
+    default: (0, _vue.withCtx)(() => [_ctx.errorMessage || _ctx.maxlengthText ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+      key: 0,
+      class: (0, _vue.normalizeClass)(_ctx.n())
+    }, [(0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(_ctx.n('message'))
+    }, (0, _vue.toDisplayString)(_ctx.errorMessage), 3
+    /* TEXT, CLASS */
+    ), (0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(_ctx.n('length'))
+    }, (0, _vue.toDisplayString)(_ctx.maxlengthText), 3
+    /* TEXT, CLASS */
+    )], 2
+    /* CLASS */
+    )) : (0, _vue.createCommentVNode)("v-if", true)]),
     _: 1
     /* STABLE */
 
-  });
+  }, 8
+  /* PROPS */
+  , ["name"]);
 }
 
 var _default = (0, _vue.defineComponent)({
   render,
   name: 'VarFormDetails',
-  props: _props.props
+  props: _props.props,
+  setup: () => ({
+    n
+  })
 });
 
 exports.default = _default;

package/lib/icon/Icon.js

@@ -12,13 +12,20 @@ var _props = require("./props");
 
 var _elements = require("../utils/elements");
 
+var _components = require("../utils/components");
+
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('icon');
+
 function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createBlock)((0, _vue.resolveDynamicComponent)(_ctx.isURL(_ctx.name) ? 'img' : 'i'), {
-    class: (0, _vue.normalizeClass)(["var-icon", [_ctx.namespace + "--set", _ctx.isURL(_ctx.name) ? 'var-icon__image' : _ctx.namespace + "-" + _ctx.nextName, _ctx.shrinking ? 'var-icon--shrinking' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), _ctx.namespace + "--set", [_ctx.isURL(_ctx.name), _ctx.n('image'), _ctx.namespace + "-" + _ctx.nextName], [_ctx.shrinking, _ctx.n('--shrinking')])),
     style: (0, _vue.normalizeStyle)({
       color: _ctx.color,
       transition: "transform " + _ctx.toNumber(_ctx.transition) + "ms",
@@ -70,6 +77,8 @@ var _default = (0, _vue.defineComponent)({
       immediate: true
     });
     return {
+      n,
+      classes,
       nextName,
       shrinking,
       isURL: _shared.isURL,

package/lib/image/Image.js

@@ -14,8 +14,15 @@ var _props = require("./props");
 
 var _elements = require("../utils/elements");
 
+var _components = require("../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('image');
+
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
 var _hoisted_1 = ["alt", "lazy-error", "lazy-loading"];
@@ -27,7 +34,7 @@ function render(_ctx, _cache) {
   var _directive_ripple = (0, _vue.resolveDirective)("ripple");
 
   return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(["var-image var--box", [!_ctx.block ? 'var--inline-block' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box', [!_ctx.block, 'var--inline-block'])),
     style: (0, _vue.normalizeStyle)({
       width: _ctx.toSizeUnit(_ctx.width),
       height: _ctx.toSizeUnit(_ctx.height),
@@ -35,7 +42,7 @@ function render(_ctx, _cache) {
     })
   }, [_ctx.lazy ? (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("img", {
     key: 0,
-    class: "var-image__image",
+    class: (0, _vue.normalizeClass)(_ctx.n('image')),
     alt: _ctx.alt,
     "lazy-error": _ctx.error,
     "lazy-loading": _ctx.loading,
@@ -51,11 +58,11 @@ function render(_ctx, _cache) {
     onClick: _cache[2] || (_cache[2] = function () {
       return _ctx.onClick && _ctx.onClick(...arguments);
     })
-  }, null, 44
-  /* STYLE, PROPS, HYDRATE_EVENTS */
+  }, null, 46
+  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
   , _hoisted_1)), [[_directive_lazy, _ctx.src]]) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("img", {
     key: 1,
-    class: "var-image__image",
+    class: (0, _vue.normalizeClass)(_ctx.n('image')),
     alt: _ctx.alt,
     style: (0, _vue.normalizeStyle)({
       objectFit: _ctx.fit
@@ -70,8 +77,8 @@ function render(_ctx, _cache) {
     onClick: _cache[5] || (_cache[5] = function () {
       return _ctx.onClick && _ctx.onClick(...arguments);
     })
-  }, null, 44
-  /* STYLE, PROPS, HYDRATE_EVENTS */
+  }, null, 46
+  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
   , _hoisted_2))], 6
   /* CLASS, STYLE */
   )), [[_directive_ripple, {
@@ -98,10 +105,10 @@ var _default = (0, _vue.defineComponent)({
       } = props;
 
       if (lazy) {
-        el._lazy.state === 'success' && (onLoad == null ? void 0 : onLoad(e));
-        el._lazy.state === 'error' && (onError == null ? void 0 : onError(e));
+        el._lazy.state === 'success' && (0, _components.call)(onLoad, e);
+        el._lazy.state === 'error' && (0, _components.call)(onError, e);
       } else {
-        onLoad == null ? void 0 : onLoad(e);
+        (0, _components.call)(onLoad, e);
       }
     };
 
@@ -110,10 +117,12 @@ var _default = (0, _vue.defineComponent)({
         lazy,
         onError
       } = props;
-      !lazy && (onError == null ? void 0 : onError(e));
+      !lazy && (0, _components.call)(onError, e);
     };
 
     return {
+      n,
+      classes,
       toSizeUnit: _elements.toSizeUnit,
       handleLoad,
       handleError

package/lib/image-preview/ImagePreview.js

@@ -18,8 +18,14 @@ var _props = require("./props");
 
 var _shared = require("../utils/shared");
 
+var _components = require("../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('image-preview');
 var DISTANCE_OFFSET = 12;
 var EVENT_DELAY = 200;
 var TAP_DELAY = 350;
@@ -28,13 +34,6 @@ var ANIMATION_DURATION = 200;
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
 var _hoisted_1 = ["src", "alt"];
-var _hoisted_2 = {
-  key: 0,
-  class: "var-image-preview__indicators"
-};
-var _hoisted_3 = {
-  class: "var-image-preview__extra"
-};
 
 function render(_ctx, _cache) {
   var _component_var_swipe_item = (0, _vue.resolveComponent)("var-swipe-item");
@@ -46,7 +45,7 @@ function render(_ctx, _cache) {
   var _component_var_popup = (0, _vue.resolveComponent)("var-popup");
 
   return (0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_popup, {
-    class: "var-image-preview__popup",
+    class: (0, _vue.normalizeClass)(_ctx.n('popup')),
     "var-image-preview-cover": "",
     transition: "var-fade",
     show: _ctx.popupShow,
@@ -61,7 +60,7 @@ function render(_ctx, _cache) {
     onRouteChange: _ctx.onRouteChange
   }, {
     default: (0, _vue.withCtx)(() => [(0, _vue.createVNode)(_component_var_swipe, (0, _vue.mergeProps)({
-      class: "var-image-preview__swipe",
+      class: _ctx.n('swipe'),
       "var-image-preview-cover": "",
       touchable: _ctx.canSwipe,
       indicator: _ctx.indicator && _ctx.images.length > 1,
@@ -71,12 +70,12 @@ function render(_ctx, _cache) {
     }, _ctx.$attrs), {
       default: (0, _vue.withCtx)(() => [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.images, image => {
         return (0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_swipe_item, {
-          class: "var-image-preview__swipe-item",
+          class: (0, _vue.normalizeClass)(_ctx.n('swipe-item')),
           "var-image-preview-cover": "",
           key: image
         }, {
           default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", {
-            class: "var-image-preview__zoom-container",
+            class: (0, _vue.normalizeClass)(_ctx.n('zoom-container')),
             style: (0, _vue.normalizeStyle)({
               transform: "scale(" + _ctx.scale + ") translate(" + _ctx.translateX + "px, " + _ctx.translateY + "px)",
               transitionTimingFunction: _ctx.transitionTimingFunction,
@@ -92,20 +91,20 @@ function render(_ctx, _cache) {
               return _ctx.handleTouchend && _ctx.handleTouchend(...arguments);
             })
           }, [(0, _vue.createElementVNode)("img", {
-            class: "var-image-preview__image",
+            class: (0, _vue.normalizeClass)(_ctx.n('image')),
             src: image,
             alt: image
-          }, null, 8
-          /* PROPS */
-          , _hoisted_1)], 36
-          /* STYLE, HYDRATE_EVENTS */
+          }, null, 10
+          /* CLASS, PROPS */
+          , _hoisted_1)], 38
+          /* CLASS, STYLE, HYDRATE_EVENTS */
           )]),
           _: 2
           /* DYNAMIC */
 
-        }, 1024
-        /* DYNAMIC_SLOTS */
-        );
+        }, 1032
+        /* PROPS, DYNAMIC_SLOTS */
+        , ["class"]);
       }), 128
       /* KEYED_FRAGMENT */
       ))]),
@@ -117,8 +116,11 @@ function render(_ctx, _cache) {
         return [(0, _vue.renderSlot)(_ctx.$slots, "indicator", {
           index: index,
           length: length
-        }, () => [_ctx.indicator && _ctx.images.length > 1 ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_2, (0, _vue.toDisplayString)(index + 1) + " / " + (0, _vue.toDisplayString)(length), 1
-        /* TEXT */
+        }, () => [_ctx.indicator && _ctx.images.length > 1 ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+          key: 0,
+          class: (0, _vue.normalizeClass)(_ctx.n('indicators'))
+        }, (0, _vue.toDisplayString)(index + 1) + " / " + (0, _vue.toDisplayString)(length), 3
+        /* TEXT, CLASS */
         )) : (0, _vue.createCommentVNode)("v-if", true)])];
       }),
       _: 3
@@ -126,21 +128,25 @@ function render(_ctx, _cache) {
 
     }, 16
     /* FULL_PROPS */
-    , ["touchable", "indicator", "initial-index", "loop", "onChange"]), (0, _vue.renderSlot)(_ctx.$slots, "close-icon", {}, () => [_ctx.closeable ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
+    , ["class", "touchable", "indicator", "initial-index", "loop", "onChange"]), (0, _vue.renderSlot)(_ctx.$slots, "close-icon", {}, () => [_ctx.closeable ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
       key: 0,
-      class: "var-image-preview__close-icon",
+      class: (0, _vue.normalizeClass)(_ctx.n('close-icon')),
       name: "close-circle",
       "var-image-preview-cover": "",
       onClick: _ctx.close
     }, null, 8
     /* PROPS */
-    , ["onClick"])) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.createElementVNode)("div", _hoisted_3, [(0, _vue.renderSlot)(_ctx.$slots, "extra")])]),
+    , ["class", "onClick"])) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(_ctx.n('extra'))
+    }, [(0, _vue.renderSlot)(_ctx.$slots, "extra")], 2
+    /* CLASS */
+    )]),
     _: 3
     /* FORWARDED */
 
   }, 8
   /* PROPS */
-  , ["show", "lock-scroll", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
+  , ["class", "show", "lock-scroll", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]);
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -341,19 +347,13 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var close = () => {
-      var _props$onUpdateShow2;
-
       if (scale.value > 1) {
         zoomOut();
-        setTimeout(() => {
-          var _props$onUpdateShow;
-
-          return (_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, false);
-        }, ANIMATION_DURATION);
+        setTimeout(() => (0, _components.call)(props['onUpdate:show'], false), ANIMATION_DURATION);
         return;
       }
 
-      (_props$onUpdateShow2 = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow2.call(props, false);
+      (0, _components.call)(props['onUpdate:show'], false);
     };
 
     (0, _vue.watch)(() => props.show, newValue => {
@@ -362,6 +362,8 @@ var _default = (0, _vue.defineComponent)({
       immediate: true
     });
     return {
+      n,
+      classes,
       initialIndex,
       popupShow,
       scale,

package/lib/index-anchor/IndexAnchor.js

@@ -12,8 +12,15 @@ var _provide = require("./provide");
 
 var _props = require("./props");
 
+var _components = require("../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('index-anchor');
+
 function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createBlock)((0, _vue.resolveDynamicComponent)(_ctx.sticky ? 'var-sticky' : _ctx.Transition), {
     "offset-top": _ctx.sticky ? _ctx.stickyOffsetTop : null,
@@ -23,7 +30,7 @@ function render(_ctx, _cache) {
     ref: "anchorEl"
   }, {
     default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
-      class: "var-index-anchor"
+      class: _ctx.n()
     }, _ctx.$attrs), [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.name), 1
     /* TEXT */
     )])], 16
@@ -82,6 +89,8 @@ var _default = (0, _vue.defineComponent)({
     };
     bindIndexBar(indexAnchorProvider);
     return {
+      n,
+      classes,
       name,
       anchorEl,
       active,

package/lib/index-bar/IndexBar.js

@@ -14,21 +14,27 @@ var _provide = require("./provide");
 
 var _props = require("./props");
 
+var _components = require("../utils/components");
+
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('index-bar');
+
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
-var _hoisted_1 = {
-  class: "var-index-bar",
-  ref: "barEl"
-};
-var _hoisted_2 = ["onClick"];
+var _hoisted_1 = ["onClick"];
 
 function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "default"), (0, _vue.createElementVNode)("ul", {
-    class: "var-index-bar__anchor-list",
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n()),
+    ref: "barEl"
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default"), (0, _vue.createElementVNode)("ul", {
+    class: (0, _vue.normalizeClass)(_ctx.n('anchor-list')),
     style: (0, _vue.normalizeStyle)({
       zIndex: _ctx.toNumber(_ctx.zIndex) + 2,
       display: _ctx.hideList ? 'none' : 'block'
@@ -36,22 +42,20 @@ function render(_ctx, _cache) {
   }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.anchorNameList, anchorName => {
     return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
       key: anchorName,
-      class: (0, _vue.normalizeClass)(["var-index-bar__anchor-item", {
-        'var-index-bar__anchor-item--active': _ctx.active === anchorName
-      }]),
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('anchor-item'), [_ctx.active === anchorName, _ctx.n('anchor-item--active')])),
       style: (0, _vue.normalizeStyle)({
         color: _ctx.active === anchorName && _ctx.highlightColor ? _ctx.highlightColor : ''
       }),
       onClick: $event => _ctx.anchorClick(anchorName)
     }, (0, _vue.toDisplayString)(anchorName), 15
     /* TEXT, CLASS, STYLE, PROPS */
-    , _hoisted_2);
+    , _hoisted_1);
   }), 128
   /* KEYED_FRAGMENT */
-  ))], 4
-  /* STYLE */
-  )], 512
-  /* NEED_PATCH */
+  ))], 6
+  /* CLASS, STYLE */
+  )], 2
+  /* CLASS */
   );
 }
 
@@ -88,7 +92,7 @@ var _default = (0, _vue.defineComponent)({
       var anchorName = (0, _shared.isPlainObject)(anchor) ? anchor.name.value : anchor;
       if (anchorName === active.value || anchorName === undefined) return;
       active.value = anchorName;
-      props.onChange == null ? void 0 : props.onChange(anchorName);
+      (0, _components.call)(props.onChange, anchorName);
     };
 
     var handleScroll = () => {
@@ -118,7 +122,7 @@ var _default = (0, _vue.defineComponent)({
         var {
           offsetTop
         } = barEl.value;
-        if (manualCall) props.onClick == null ? void 0 : props.onClick(anchorName);
+        if (manualCall) (0, _components.call)(props.onClick, anchorName);
         if (anchorName === active.value) return;
         var indexAnchor = indexAnchors.find(_ref2 => {
           var {
@@ -169,11 +173,11 @@ var _default = (0, _vue.defineComponent)({
       scroller.value.addEventListener('scroll', handleScroll);
     }));
     (0, _vue.onBeforeUnmount)(() => {
-      var _scroller$value;
-
-      (_scroller$value = scroller.value) == null ? void 0 : _scroller$value.removeEventListener('scroll', handleScroll);
+      (0, _components.call)(scroller.value.removeEventListener, 'scroll', handleScroll);
     });
     return {
+      n,
+      classes,
       barEl,
       active,
       zIndex,

package/lib/index.js

@@ -2,6 +2,8 @@ var ActionSheet = require('./action-sheet')['default']
 var AppBar = require('./app-bar')['default']
 var BackTop = require('./back-top')['default']
 var Badge = require('./badge')['default']
+var BottomNavigation = require('./bottom-navigation')['default']
+var BottomNavigationItem = require('./bottom-navigation-item')['default']
 var Button = require('./button')['default']
 var Card = require('./card')['default']
 var Cell = require('./cell')['default']
@@ -67,6 +69,8 @@ function install(app) {
   AppBar.install && app.use(AppBar)
   BackTop.install && app.use(BackTop)
   Badge.install && app.use(Badge)
+  BottomNavigation.install && app.use(BottomNavigation)
+  BottomNavigationItem.install && app.use(BottomNavigationItem)
   Button.install && app.use(Button)
   Card.install && app.use(Card)
   Cell.install && app.use(Cell)
@@ -134,6 +138,8 @@ module.exports = {
   AppBar,
   BackTop,
   Badge,
+  BottomNavigation,
+  BottomNavigationItem,
   Button,
   Card,
   Cell,