@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/lib/select/Select.js

@@ -28,25 +28,19 @@ var _elements = require("../utils/elements");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('select');
+
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
 var _hoisted_1 = {
   key: 0
 };
 var _hoisted_2 = {
-  key: 0,
-  class: "var-select__chips"
-};
-var _hoisted_3 = {
-  key: 1,
-  class: "var-select__values"
-};
-var _hoisted_4 = {
   key: 1
 };
-var _hoisted_5 = {
-  class: "var-select__scroller"
-};
 
 function render(_ctx, _cache) {
   var _component_var_chip = (0, _vue.resolveComponent)("var-chip");
@@ -58,43 +52,50 @@ function render(_ctx, _cache) {
   var _component_var_form_details = (0, _vue.resolveComponent)("var-form-details");
 
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(["var-select var--box", [_ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box', [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
     onClick: _cache[3] || (_cache[3] = function () {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-select__controller", [_ctx.isFocus ? 'var-select--focus' : null, _ctx.errorMessage ? 'var-select--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('controller'), [_ctx.isFocus, _ctx.n('--focus')], [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
     style: (0, _vue.normalizeStyle)({
       color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : undefined
     })
   }, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-select__icon", [!_ctx.hint ? 'var-select--non-hint' : null]])
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--non-hint')]))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "prepend-icon")], 2
   /* CLASS */
   ), (0, _vue.createVNode)(_component_var_menu, {
-    class: "var-select__menu",
+    class: (0, _vue.normalizeClass)(_ctx.n('menu')),
     "var-select-cover": "",
     "offset-y": _ctx.offsetY,
     show: _ctx.isFocus,
     "onUpdate:show": _cache[2] || (_cache[2] = $event => _ctx.isFocus = $event),
     onClose: _ctx.handleBlur
   }, {
-    menu: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", _hoisted_5, [(0, _vue.renderSlot)(_ctx.$slots, "default")])]),
+    menu: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(_ctx.n('scroller'))
+    }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2
+    /* CLASS */
+    )]),
     default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", {
-      class: (0, _vue.normalizeClass)(["var-select__wrap", [!_ctx.hint ? 'var-select--non-hint' : null]]),
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('wrap'), [!_ctx.hint, _ctx.n('--non-hint')])),
       ref: "wrapEl",
       onClick: _cache[1] || (_cache[1] = function () {
         return _ctx.handleFocus && _ctx.handleFocus(...arguments);
       })
     }, [(0, _vue.createElementVNode)("div", {
-      class: (0, _vue.normalizeClass)(["var-select__select", [_ctx.errorMessage ? 'var-select--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null]]),
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('select'), [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
       style: (0, _vue.normalizeStyle)({
         textAlign: _ctx.textAlign,
         color: _ctx.textColor
       })
-    }, [_ctx.multiple ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [_ctx.chip ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_2, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.labels, l => {
+    }, [_ctx.multiple ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [_ctx.chip ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+      key: 0,
+      class: (0, _vue.normalizeClass)(_ctx.n('chips'))
+    }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.labels, l => {
       return (0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_chip, {
-        class: "var-select__chip",
+        class: (0, _vue.normalizeClass)(_ctx.n('chip')),
         "var-select-cover": "",
         closable: "",
         size: "small",
@@ -111,15 +112,20 @@ function render(_ctx, _cache) {
 
       }, 1032
       /* PROPS, DYNAMIC_SLOTS */
-      , ["type", "onClose"]);
+      , ["class", "type", "onClose"]);
     }), 128
     /* KEYED_FRAGMENT */
-    ))])) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_3, (0, _vue.toDisplayString)(_ctx.labels.join(_ctx.separator)), 1
-    /* TEXT */
-    ))])) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("span", _hoisted_4, (0, _vue.toDisplayString)(_ctx.label), 1
+    ))], 2
+    /* CLASS */
+    )) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+      key: 1,
+      class: (0, _vue.normalizeClass)(_ctx.n('values'))
+    }, (0, _vue.toDisplayString)(_ctx.labels.join(_ctx.separator)), 3
+    /* TEXT, CLASS */
+    ))])) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("span", _hoisted_2, (0, _vue.toDisplayString)(_ctx.label), 1
     /* TEXT */
     )), (0, _vue.createVNode)(_component_var_icon, {
-      class: (0, _vue.normalizeClass)(["var-select__arrow", [_ctx.isFocus ? 'var-select--arrow-rotate' : null]]),
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('arrow'), [_ctx.isFocus, _ctx.n('--arrow-rotate')])),
       "var-select-cover": "",
       name: "menu-down",
       transition: 300
@@ -128,7 +134,7 @@ function render(_ctx, _cache) {
     , ["class"])], 6
     /* CLASS, STYLE */
     ), (0, _vue.createElementVNode)("label", {
-      class: (0, _vue.normalizeClass)(["var-select__placeholder var--ellipsis", [_ctx.isFocus ? 'var-select--focus' : null, _ctx.errorMessage ? 'var-select--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null, _ctx.computePlaceholderState(), !_ctx.hint ? 'var-select--placeholder-non-hint' : null]]),
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('placeholder'), 'var--ellipsis', [_ctx.isFocus, _ctx.n('--focus')], [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')], _ctx.computePlaceholderState(), [!_ctx.hint, _ctx.n('--placeholder-non-hint')])),
       style: (0, _vue.normalizeStyle)({
         color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : undefined
       })
@@ -142,28 +148,28 @@ function render(_ctx, _cache) {
 
   }, 8
   /* PROPS */
-  , ["offset-y", "show", "onClose"]), (0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-select__icon", [!_ctx.hint ? 'var-select--non-hint' : null]])
+  , ["class", "offset-y", "show", "onClose"]), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--non-hint')]))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "append-icon", {}, () => [_ctx.clearable ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
     key: 0,
-    class: "var-select__clear-icon",
+    class: (0, _vue.normalizeClass)(_ctx.n('clear-icon')),
     name: "close-circle",
     size: "14px",
     onClick: _ctx.handleClear
   }, null, 8
   /* PROPS */
-  , ["onClick"])) : (0, _vue.createCommentVNode)("v-if", true)])], 2
+  , ["class", "onClick"])) : (0, _vue.createCommentVNode)("v-if", true)])], 2
   /* CLASS */
   )], 6
   /* CLASS, STYLE */
   ), _ctx.line ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
-    class: (0, _vue.normalizeClass)(["var-select__line", [_ctx.formDisabled || _ctx.disabled ? 'var-select--line-disabled' : null, _ctx.errorMessage ? 'var-select--line-error' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('line'), [_ctx.formDisabled || _ctx.disabled, _ctx.n('--line-disabled')], [_ctx.errorMessage, _ctx.n('--line-error')])),
     style: (0, _vue.normalizeStyle)({
       background: !_ctx.errorMessage ? _ctx.blurColor : undefined
     })
   }, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-select__dot", [_ctx.isFocus ? 'var-select--spread' : null, _ctx.formDisabled || _ctx.disabled ? 'var-select--line-disabled' : null, _ctx.errorMessage ? 'var-select--line-error' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('dot'), [_ctx.isFocus, _ctx.n('--spread')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--line-disabled')], [_ctx.errorMessage, _ctx.n('--line-error')])),
     style: (0, _vue.normalizeStyle)({
       background: !_ctx.errorMessage ? _ctx.focusColor : undefined
     })
@@ -288,11 +294,11 @@ var _default = (0, _vue.defineComponent)({
       } = props;
 
       if (!hint && !(0, _shared.isEmpty)(modelValue)) {
-        return 'var-select--placeholder-hidden';
+        return n('--placeholder-hidden');
       }
 
       if (hint && (!(0, _shared.isEmpty)(modelValue) || isFocus.value)) {
-        return 'var-select--placeholder-hint';
+        return n('--placeholder-hint');
       }
     };
 
@@ -319,7 +325,7 @@ var _default = (0, _vue.defineComponent)({
       wrapWidth.value = getWrapWidth();
       offsetY.value = getOffsetY() + (0, _elements.toPxNum)(props.offsetY);
       isFocus.value = true;
-      onFocus == null ? void 0 : onFocus();
+      (0, _components.call)(onFocus);
       validateWithTrigger('onFocus');
     };
 
@@ -334,13 +340,11 @@ var _default = (0, _vue.defineComponent)({
         return;
       }
 
-      onBlur == null ? void 0 : onBlur();
+      (0, _components.call)(onBlur);
       validateWithTrigger('onBlur');
     };
 
     var onSelect = option => {
-      var _props$onUpdateModel;
-
       var {
         disabled,
         readonly,
@@ -358,15 +362,13 @@ var _default = (0, _vue.defineComponent)({
         } = _ref4;
         return selected.value;
       }).map(findValueOrLabel) : findValueOrLabel(option);
-      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, selectedValue);
-      onChange == null ? void 0 : onChange(selectedValue);
+      (0, _components.call)(props['onUpdate:modelValue'], selectedValue);
+      (0, _components.call)(onChange, selectedValue);
       validateWithTrigger('onChange');
       !multiple && (isFocus.value = false);
     };
 
     var handleClear = () => {
-      var _props$onUpdateModel2;
-
       var {
         disabled,
         readonly,
@@ -380,8 +382,8 @@ var _default = (0, _vue.defineComponent)({
       }
 
       var changedModelValue = multiple ? [] : undefined;
-      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, changedModelValue);
-      onClear == null ? void 0 : onClear(changedModelValue);
+      (0, _components.call)(props['onUpdate:modelValue'], changedModelValue);
+      (0, _components.call)(onClear, changedModelValue);
       validateWithTrigger('onClear');
     };
 
@@ -395,13 +397,11 @@ var _default = (0, _vue.defineComponent)({
         return;
       }
 
-      onClick == null ? void 0 : onClick(e);
+      (0, _components.call)(onClick, e);
       validateWithTrigger('onClick');
     };
 
     var handleClose = text => {
-      var _props$onUpdateModel3;
-
       var {
         disabled,
         readonly,
@@ -425,8 +425,8 @@ var _default = (0, _vue.defineComponent)({
 
         return value !== ((_value$value = option.value.value) != null ? _value$value : option.label.value);
       });
-      (_props$onUpdateModel3 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel3.call(props, currentModelValue);
-      onClose == null ? void 0 : onClose(currentModelValue);
+      (0, _components.call)(props['onUpdate:modelValue'], currentModelValue);
+      (0, _components.call)(onClose, currentModelValue);
       validateWithTrigger('onClose');
     };
 
@@ -463,9 +463,7 @@ var _default = (0, _vue.defineComponent)({
 
 
     var reset = () => {
-      var _props$onUpdateModel4;
-
-      (_props$onUpdateModel4 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel4.call(props, props.multiple ? [] : undefined);
+      (0, _components.call)(props['onUpdate:modelValue'], props.multiple ? [] : undefined);
       resetValidation();
     };
 
@@ -493,7 +491,7 @@ var _default = (0, _vue.defineComponent)({
       resetValidation
     };
     bindOptions(selectProvider);
-    bindForm == null ? void 0 : bindForm(selectProvider);
+    (0, _components.call)(bindForm, selectProvider);
     return {
       wrapEl,
       offsetY,
@@ -502,6 +500,8 @@ var _default = (0, _vue.defineComponent)({
       formDisabled: form == null ? void 0 : form.disabled,
       label,
       labels,
+      n,
+      classes,
       computePlaceholderState,
       handleFocus,
       handleBlur,

package/lib/skeleton/Skeleton.js

@@ -12,113 +12,102 @@ var _elements = require("../utils/elements");
 
 var _shared = require("../utils/shared");
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+var _components = require("../utils/components");
 
-var _hoisted_1 = {
-  class: "var--box var-skeleton"
-};
-var _hoisted_2 = {
-  key: 0,
-  class: "var-skeleton__data"
-};
-var _hoisted_3 = {
-  key: 1,
-  class: "var-skeleton__content"
-};
-
-var _hoisted_4 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("div", {
-  class: "var-skeleton--animation"
-}, null, -1
-/* HOISTED */
-));
-
-var _hoisted_5 = [_hoisted_4];
-var _hoisted_6 = {
-  class: "var-skeleton__article"
-};
-
-var _hoisted_7 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("div", {
-  class: "var-skeleton--animation"
-}, null, -1
-/* HOISTED */
-));
-
-var _hoisted_8 = [_hoisted_7];
-var _hoisted_9 = {
-  class: "var-skeleton__section"
-};
-
-var _hoisted_10 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("div", {
-  class: "var-skeleton--animation"
-}, null, -1
-/* HOISTED */
-));
-
-var _hoisted_11 = [_hoisted_10];
-
-var _hoisted_12 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("div", {
-  class: "var-skeleton--animation"
-}, null, -1
-/* HOISTED */
-));
-
-var _hoisted_13 = [_hoisted_12];
-
-var _hoisted_14 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("div", {
-  class: "var-skeleton--animation"
-}, null, -1
-/* HOISTED */
-));
-
-var _hoisted_15 = [_hoisted_14];
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('skeleton');
 
 function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [!_ctx.loading ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_2, [(0, _vue.renderSlot)(_ctx.$slots, "default")])) : (0, _vue.createCommentVNode)("v-if", true), _ctx.loading && !_ctx.fullscreen ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_3, [_ctx.card ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes('var--box', _ctx.n()))
+  }, [!_ctx.loading ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('data'))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2
+  /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true), _ctx.loading && !_ctx.fullscreen ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 1,
+    class: (0, _vue.normalizeClass)(_ctx.n('content'))
+  }, [_ctx.card ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
-    class: "var-skeleton__card",
+    class: (0, _vue.normalizeClass)(_ctx.n('card')),
     style: (0, _vue.normalizeStyle)({
       height: _ctx.toSizeUnit(_ctx.cardHeight)
     })
-  }, _hoisted_5, 4
-  /* STYLE */
-  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", _hoisted_6, [_ctx.avatar ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('--animation'))
+  }, null, 2
+  /* CLASS */
+  )], 6
+  /* CLASS, STYLE */
+  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('article'))
+  }, [_ctx.avatar ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
-    class: "var-skeleton__avatar",
+    class: (0, _vue.normalizeClass)(_ctx.n('avatar')),
     style: (0, _vue.normalizeStyle)({
       width: _ctx.toSizeUnit(_ctx.avatarSize),
       height: _ctx.toSizeUnit(_ctx.avatarSize)
     })
-  }, _hoisted_8, 4
-  /* STYLE */
-  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", _hoisted_9, [_ctx.title ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('--animation'))
+  }, null, 2
+  /* CLASS */
+  )], 6
+  /* CLASS, STYLE */
+  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('section'))
+  }, [_ctx.title ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
-    class: "var-skeleton__title",
+    class: (0, _vue.normalizeClass)(_ctx.n('title')),
     style: (0, _vue.normalizeStyle)({
       width: _ctx.toSizeUnit(_ctx.titleWidth)
     })
-  }, _hoisted_11, 4
-  /* STYLE */
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('--animation'))
+  }, null, 2
+  /* CLASS */
+  )], 6
+  /* CLASS, STYLE */
   )) : (0, _vue.createCommentVNode)("v-if", true), ((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.toNumber(_ctx.rows), (r, index) => {
     return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-      class: "var-skeleton__row",
+      class: (0, _vue.normalizeClass)(_ctx.n('row')),
       key: r,
       style: (0, _vue.normalizeStyle)({
         width: _ctx.toSizeUnit(_ctx.rowsWidth[index])
       })
-    }, _hoisted_13, 4
-    /* STYLE */
+    }, [(0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(_ctx.n('--animation'))
+    }, null, 2
+    /* CLASS */
+    )], 6
+    /* CLASS, STYLE */
     );
   }), 128
   /* KEYED_FRAGMENT */
-  ))])])])) : (0, _vue.createCommentVNode)("v-if", true), _ctx.loading && _ctx.fullscreen ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+  ))], 2
+  /* CLASS */
+  )], 2
+  /* CLASS */
+  )], 2
+  /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true), _ctx.loading && _ctx.fullscreen ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 2,
-    class: "var-skeleton__fullscreen",
+    class: (0, _vue.normalizeClass)(_ctx.n('fullscreen')),
     style: (0, _vue.normalizeStyle)({
       zIndex: _ctx.toNumber(_ctx.fullscreenZIndex)
     })
-  }, _hoisted_15, 4
-  /* STYLE */
-  )) : (0, _vue.createCommentVNode)("v-if", true)]);
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('--animation'))
+  }, null, 2
+  /* CLASS */
+  )], 6
+  /* CLASS, STYLE */
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -128,6 +117,8 @@ var _default = (0, _vue.defineComponent)({
 
   setup() {
     return {
+      n,
+      classes,
       toSizeUnit: _elements.toSizeUnit,
       toNumber: _shared.toNumber
     };

package/lib/slider/Slider.js

@@ -22,6 +22,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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 {
+  n,
+  classes
+} = (0, _components.createNamespace)('slider');
 var Thumbs;
 
 (function (Thumbs) {
@@ -31,19 +35,15 @@ var Thumbs;
 
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
-var _hoisted_1 = {
-  class: "var-slider"
-};
-var _hoisted_2 = {
-  class: "var-slider__track"
-};
-var _hoisted_3 = ["onTouchstart", "onTouchmove", "onTouchend", "onTouchcancel"];
+var _hoisted_1 = ["onTouchstart", "onTouchmove", "onTouchend", "onTouchcancel"];
 
 function render(_ctx, _cache) {
   var _component_var_form_details = (0, _vue.resolveComponent)("var-form-details");
 
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-slider-block", [_ctx.isDisabled ? 'var-slider__disable' : null, _ctx.errorMessage ? 'var-slider__error' : null]]),
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n())
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('block'), [_ctx.isDisabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--error')])),
     style: (0, _vue.normalizeStyle)({
       height: _ctx.thumbSize === undefined ? _ctx.thumbSize : 3 * _ctx.toNumber(_ctx.thumbSize) + "px",
       margin: _ctx.thumbSize === undefined ? _ctx.thumbSize : "0 " + _ctx.toNumber(_ctx.thumbSize) / 2 + "px"
@@ -52,22 +52,26 @@ function render(_ctx, _cache) {
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.click && _ctx.click(...arguments);
     })
-  }, [(0, _vue.createElementVNode)("div", _hoisted_2, [(0, _vue.createElementVNode)("div", {
-    class: "var-slider__track-background",
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('track'))
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('track-background')),
     style: (0, _vue.normalizeStyle)({
       background: _ctx.trackColor,
       height: _ctx.trackHeight + 'px'
     })
-  }, null, 4
-  /* STYLE */
+  }, null, 6
+  /* CLASS, STYLE */
   ), (0, _vue.createElementVNode)("div", {
-    class: "var-slider__track-fill",
+    class: (0, _vue.normalizeClass)(_ctx.n('track-fill')),
     style: (0, _vue.normalizeStyle)(_ctx.getFillStyle)
-  }, null, 4
-  /* STYLE */
-  )]), ((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.thumbList, item => {
+  }, null, 6
+  /* CLASS, STYLE */
+  )], 2
+  /* CLASS */
+  ), ((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.thumbList, item => {
     return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-      class: "var-slider__thumb",
+      class: (0, _vue.normalizeClass)(_ctx.n('thumb')),
       key: item.enumValue,
       style: (0, _vue.normalizeStyle)({
         left: item.value + "%",
@@ -80,23 +84,23 @@ function render(_ctx, _cache) {
     }, [(0, _vue.renderSlot)(_ctx.$slots, "button", {
       currentValue: item.value
     }, () => [(0, _vue.createElementVNode)("div", {
-      class: "var-slider__thumb-block",
+      class: (0, _vue.normalizeClass)(_ctx.n('thumb-block')),
       style: (0, _vue.normalizeStyle)({
         background: _ctx.thumbColor,
         height: _ctx.thumbSize + 'px',
         width: _ctx.thumbSize + 'px'
       })
-    }, null, 4
-    /* STYLE */
+    }, null, 6
+    /* CLASS, STYLE */
     ), (0, _vue.createElementVNode)("div", {
-      class: (0, _vue.normalizeClass)(["var-slider__thumb-ripple", [_ctx.thumbsProps[item.enumValue].active ? 'var-slider__thumb-ripple-active' : null]]),
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('thumb-ripple'), [_ctx.thumbsProps[item.enumValue].active, _ctx.n('thumb-ripple--active')])),
       style: (0, _vue.normalizeStyle)(_extends({
         background: _ctx.thumbColor
       }, _ctx.getRippleSize(item)))
     }, null, 6
     /* CLASS, STYLE */
     ), (0, _vue.createElementVNode)("div", {
-      class: (0, _vue.normalizeClass)(["var-slider__thumb-label", [_ctx.showLabel(item.enumValue) ? 'var-slider__thumb-label-active' : null]]),
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('thumb-label'), [_ctx.showLabel(item.enumValue), _ctx.n('thumb-label--active')])),
       style: (0, _vue.normalizeStyle)({
         background: _ctx.labelColor,
         color: _ctx.labelTextColor,
@@ -107,20 +111,22 @@ function render(_ctx, _cache) {
     /* TEXT */
     )], 6
     /* CLASS, STYLE */
-    )])], 44
-    /* STYLE, PROPS, HYDRATE_EVENTS */
-    , _hoisted_3);
+    )])], 46
+    /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
+    , _hoisted_1);
   }), 128
   /* KEYED_FRAGMENT */
   ))], 6
   /* CLASS, STYLE */
   ), (0, _vue.createVNode)(_component_var_form_details, {
     "error-message": _ctx.errorMessage,
-    class: "var-slider__form",
+    class: (0, _vue.normalizeClass)(_ctx.n('form')),
     "var-slider-cover": ""
   }, null, 8
   /* PROPS */
-  , ["error-message"])]);
+  , ["error-message", "class"])], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -236,11 +242,9 @@ var _default = (0, _vue.defineComponent)({
       }
 
       if (prevValue !== curValue) {
-        var _props$onUpdateModel;
-
         var value = range ? rangeValue : curValue;
-        onChange == null ? void 0 : onChange(value);
-        (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, value);
+        (0, _components.call)(onChange, value);
+        (0, _components.call)(props['onUpdate:modelValue'], value);
         validateWithTrigger();
       }
     };
@@ -257,7 +261,7 @@ var _default = (0, _vue.defineComponent)({
     var start = (event, type) => {
       if (!maxWidth.value) maxWidth.value = sliderEl.value.offsetWidth;
       if (isDisabled.value || isReadonly.value) return;
-      props.onStart == null ? void 0 : props.onStart();
+      (0, _components.call)(props.onStart);
       isScroll.value = true;
       thumbsProps[type].startPosition = event.touches[0].clientX;
     };
@@ -286,7 +290,7 @@ var _default = (0, _vue.defineComponent)({
         rangeValue = type === Thumbs.First ? [curValue, modelValue[1]] : [modelValue[0], curValue];
       }
 
-      onEnd == null ? void 0 : onEnd(range ? rangeValue : curValue);
+      (0, _components.call)(onEnd, range ? rangeValue : curValue);
       isScroll.value = false;
     };
 
@@ -375,10 +379,8 @@ var _default = (0, _vue.defineComponent)({
     });
 
     var reset = () => {
-      var _props$onUpdateModel2;
-
       var resetValue = props.range ? [0, 0] : 0;
-      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, resetValue);
+      (0, _components.call)(props['onUpdate:modelValue'], resetValue);
       resetValidation();
     };
 
@@ -387,8 +389,10 @@ var _default = (0, _vue.defineComponent)({
       validate,
       resetValidation
     };
-    bindForm == null ? void 0 : bindForm(sliderProvider);
+    (0, _components.call)(bindForm, sliderProvider);
     return {
+      n,
+      classes,
       Thumbs,
       sliderEl,
       getFillStyle,