@varlet/ui 1.26.9 → 1.27.0-alpha.1649265140569

package/lib/dialog/Dialog.js

@@ -16,16 +16,14 @@ var _shared = require("../utils/shared");
 
 var _locale = require("../locale");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _components = require("../utils/components");
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _hoisted_1 = {
-  class: "var-dialog__title"
-};
-var _hoisted_2 = {
-  class: "var-dialog__actions"
-};
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('dialog');
 
 function render(_ctx, _cache) {
   var _component_var_button = (0, _vue.resolveComponent)("var-button");
@@ -33,7 +31,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-dialog__popup",
+    class: (0, _vue.normalizeClass)(_ctx.n('popup')),
     "var-dialog-cover": "",
     show: _ctx.popupShow,
     overlay: _ctx.overlay,
@@ -50,22 +48,28 @@ function render(_ctx, _cache) {
     onClickOverlay: _ctx.handleClickOverlay
   }, {
     default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
-      class: ["var--box var-dialog", _ctx.dialogClass],
+      class: _ctx.classes('var--box', _ctx.n(), _ctx.dialogClass),
       style: _ctx.dialogStyle
-    }, _ctx.$attrs), [(0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.dt(_ctx.title, _ctx.pack.dialogTitle)), 1
+    }, _ctx.$attrs), [(0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(_ctx.n('title'))
+    }, [(0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.dt(_ctx.title, _ctx.pack.dialogTitle)), 1
     /* TEXT */
-    )])]), (0, _vue.createElementVNode)("div", {
-      class: "var-dialog__message",
+    )])], 2
+    /* CLASS */
+    ), (0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(_ctx.n('message')),
       style: (0, _vue.normalizeStyle)({
         textAlign: _ctx.messageAlign
       })
     }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.message), 1
     /* TEXT */
-    )])], 4
-    /* STYLE */
-    ), (0, _vue.createElementVNode)("div", _hoisted_2, [_ctx.cancelButton ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_button, {
+    )])], 6
+    /* CLASS, STYLE */
+    ), (0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(_ctx.n('actions'))
+    }, [_ctx.cancelButton ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_button, {
       key: 0,
-      class: "var-dialog__button var-dialog__cancel-button",
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('button'), _ctx.n('cancel-button'))),
       "var-dialog-cover": "",
       text: "",
       "text-color": _ctx.cancelButtonTextColor,
@@ -80,9 +84,9 @@ function render(_ctx, _cache) {
 
     }, 8
     /* PROPS */
-    , ["text-color", "color", "onClick"])) : (0, _vue.createCommentVNode)("v-if", true), _ctx.confirmButton ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_button, {
+    , ["class", "text-color", "color", "onClick"])) : (0, _vue.createCommentVNode)("v-if", true), _ctx.confirmButton ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_button, {
       key: 1,
-      class: "var-dialog__button var-dialog__confirm-button",
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('button'), _ctx.n('confirm-button'))),
       "var-dialog-cover": "",
       text: "",
       "text-color": _ctx.confirmButtonTextColor,
@@ -97,7 +101,9 @@ function render(_ctx, _cache) {
 
     }, 8
     /* PROPS */
-    , ["text-color", "color", "onClick"])) : (0, _vue.createCommentVNode)("v-if", true)])], 16
+    , ["class", "text-color", "color", "onClick"])) : (0, _vue.createCommentVNode)("v-if", true)], 2
+    /* CLASS */
+    )], 16
     /* FULL_PROPS */
     )]),
     _: 3
@@ -105,7 +111,7 @@ function render(_ctx, _cache) {
 
   }, 8
   /* PROPS */
-  , ["show", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange", "onClickOverlay"]);
+  , ["class", "show", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange", "onClickOverlay"]);
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -122,21 +128,15 @@ var _default = (0, _vue.defineComponent)({
     var popupShow = (0, _vue.ref)(false);
     var popupCloseOnClickOverlay = (0, _vue.ref)(false);
 
-    var done = () => {
-      var _props$onUpdateShow;
-
-      return (_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, false);
-    };
+    var done = () => (0, _components.call)(props['onUpdate:show'], false);
 
     var handleClickOverlay = () => {
-      var _props$onUpdateShow2;
-
       var {
         closeOnClickOverlay,
         onClickOverlay,
         onBeforeClose
       } = props;
-      onClickOverlay == null ? void 0 : onClickOverlay();
+      (0, _components.call)(onClickOverlay);
 
       if (!closeOnClickOverlay) {
         return;
@@ -147,41 +147,37 @@ var _default = (0, _vue.defineComponent)({
         return;
       }
 
-      (_props$onUpdateShow2 = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow2.call(props, false);
+      (0, _components.call)(props['onUpdate:show'], false);
     };
 
     var confirm = () => {
-      var _props$onUpdateShow3;
-
       var {
         onBeforeClose,
         onConfirm
       } = props;
-      onConfirm == null ? void 0 : onConfirm();
+      (0, _components.call)(onConfirm);
 
       if (onBeforeClose != null) {
         onBeforeClose('confirm', done);
         return;
       }
 
-      (_props$onUpdateShow3 = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow3.call(props, false);
+      (0, _components.call)(props['onUpdate:show'], false);
     };
 
     var cancel = () => {
-      var _props$onUpdateShow4;
-
       var {
         onBeforeClose,
         onCancel
       } = props;
-      onCancel == null ? void 0 : onCancel();
+      (0, _components.call)(onCancel);
 
       if (onBeforeClose != null) {
         onBeforeClose('cancel', done);
         return;
       }
 
-      (_props$onUpdateShow4 = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow4.call(props, false);
+      (0, _components.call)(props['onUpdate:show'], false);
     };
 
     (0, _vue.watch)(() => props.show, newValue => {
@@ -200,6 +196,8 @@ var _default = (0, _vue.defineComponent)({
       immediate: true
     });
     return {
+      n,
+      classes,
       pack: _locale.pack,
       dt: _shared.dt,
       popupShow,

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,