@varlet/ui 1.26.9 → 1.27.0-alpha.1649265140569

package/lib/col/Col.js

@@ -14,9 +14,16 @@ var _provide = require("./provide");
 
 var _elements = require("../utils/elements");
 
+var _components = require("../utils/components");
+
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('col');
+
 function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(["var-col var--box", [_ctx.span ? "var-col--span-" + _ctx.span : null, _ctx.offset ? "var-col--offset-" + _ctx.offset : null, ..._ctx.getSize('xs', _ctx.xs), ..._ctx.getSize('sm', _ctx.sm), ..._ctx.getSize('md', _ctx.md), ..._ctx.getSize('lg', _ctx.lg), ..._ctx.getSize('xl', _ctx.xl)]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box', [_ctx.span, _ctx.n("--span-" + _ctx.span)], [_ctx.offset, _ctx.n("--offset-" + _ctx.offset)], ..._ctx.getSize('xs', _ctx.xs), ..._ctx.getSize('sm', _ctx.sm), ..._ctx.getSize('md', _ctx.md), ..._ctx.getSize('lg', _ctx.lg), ..._ctx.getSize('xl', _ctx.xl))),
     style: (0, _vue.normalizeStyle)({
       paddingLeft: _ctx.toSizeUnit(_ctx.padding.left),
       paddingRight: _ctx.toSizeUnit(_ctx.padding.right)
@@ -64,10 +71,10 @@ var _default = (0, _vue.defineComponent)({
           span: _span,
           offset: _offset
         } = size;
-        _span && classes.push("var-col--span-" + mode + "-" + _span);
-        _offset && classes.push("var-col--offset-" + mode + "-" + _offset);
+        _span && classes.push(n("--span-" + mode + "-" + _span));
+        _offset && classes.push(n("--offset-" + mode + "-" + _offset));
       } else {
-        classes.push("var-col--span-" + mode + "-" + size);
+        classes.push(n("--span-" + mode + "-" + size));
       }
 
       return classes;
@@ -76,8 +83,10 @@ var _default = (0, _vue.defineComponent)({
     (0, _vue.watch)([() => props.span, () => props.offset], () => {
       row == null ? void 0 : row.computePadding();
     });
-    bindRow == null ? void 0 : bindRow(colProvider);
+    (0, _components.call)(bindRow, colProvider);
     return {
+      n,
+      classes,
       padding,
       toNumber: _shared.toNumber,
       toSizeUnit: _elements.toSizeUnit,

package/lib/collapse/Collapse.js

@@ -10,16 +10,20 @@ var _provide = require("./provide");
 
 var _props = require("./props");
 
-var _shared = require("../utils/shared");
+var _components = require("../utils/components");
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+var _shared = require("../utils/shared");
 
-var _hoisted_1 = {
-  class: "var-collapse"
-};
+var {
+  n
+} = (0, _components.createNamespace)('collapse');
 
 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)({
@@ -57,11 +61,9 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var updateItem = (value, isExpand) => {
-      var _props$onUpdateModel;
-
       var modelValue = getValue(value, isExpand);
-      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, modelValue);
-      props.onChange == null ? void 0 : props.onChange(modelValue);
+      (0, _components.call)(props['onUpdate:modelValue'], modelValue);
+      (0, _components.call)(props.onChange, modelValue);
     };
 
     var matchName = () => {
@@ -129,6 +131,9 @@ var _default = (0, _vue.defineComponent)({
     bindCollapseItem(collapseProvider);
     (0, _vue.watch)(() => length.value, () => (0, _vue.nextTick)().then(resize));
     (0, _vue.watch)(() => props.modelValue, () => (0, _vue.nextTick)().then(resize));
+    return {
+      n
+    };
   }
 
 });

package/lib/collapse-item/CollapseItem.js

@@ -10,6 +10,8 @@ var _elements = require("../utils/elements");
 
 var _shared = require("../utils/shared");
 
+var _components = require("../utils/components");
+
 var _provide = require("./provide");
 
 var _props = require("./props");
@@ -18,50 +20,49 @@ var _icon = _interopRequireDefault(require("../icon"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
-
-var _hoisted_1 = {
-  class: "var-collapse-item-header__title"
-};
-var _hoisted_2 = {
-  class: "var-collapse-item-header__icon"
-};
-var _hoisted_3 = {
-  class: "var-collapse-item__wrap"
-};
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('collapse-item');
 
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
 
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)({
-      'var-collapse-item': true,
-      'var-collapse-item__active': _ctx.offset && _ctx.isShow,
-      'var-collapse-item__disable': _ctx.disabled
-    })
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.offset && _ctx.isShow, _ctx.n('--active')], [_ctx.disabled, _ctx.n('--disable')]))
   }, [(0, _vue.createElementVNode)("div", {
-    class: "var-collapse-item-header",
+    class: (0, _vue.normalizeClass)(_ctx.n('header')),
     onClick: _cache[0] || (_cache[0] = $event => _ctx.toggle())
-  }, [(0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.title), 1
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('header-title'))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.title), 1
   /* TEXT */
-  )])]), (0, _vue.createElementVNode)("div", _hoisted_2, [(0, _vue.renderSlot)(_ctx.$slots, "icon", {}, () => [(0, _vue.createVNode)(_component_var_icon, {
+  )])], 2
+  /* CLASS */
+  ), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('header-icon'))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "icon", {}, () => [(0, _vue.createVNode)(_component_var_icon, {
     name: _ctx.icon,
     transition: 250,
-    class: (0, _vue.normalizeClass)({
-      'var-collapse-item-header__icon': true,
-      'var-collapse-item-header__open': _ctx.isShow && _ctx.icon === 'chevron-down',
-      'var-collapse-item-header__disable': _ctx.disabled
-    })
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('header-icon'), [_ctx.isShow && _ctx.icon === 'chevron-down', _ctx.n('header-open')], [_ctx.disabled, _ctx.n('header--disable')]))
   }, null, 8
   /* PROPS */
-  , ["name", "class"])])])]), (0, _vue.withDirectives)((0, _vue.createElementVNode)("div", {
-    class: "var-collapse-item-content",
+  , ["name", "class"])])], 2
+  /* CLASS */
+  )], 2
+  /* CLASS */
+  ), (0, _vue.withDirectives)((0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('content')),
     ref: "contentEl",
     onTransitionend: _cache[1] || (_cache[1] = function () {
       return _ctx.transitionend && _ctx.transitionend(...arguments);
     })
-  }, [(0, _vue.createElementVNode)("div", _hoisted_3, [(0, _vue.renderSlot)(_ctx.$slots, "default")])], 544
-  /* HYDRATE_EVENTS, NEED_PATCH */
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('content-wrap'))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2
+  /* CLASS */
+  )], 34
+  /* CLASS, HYDRATE_EVENTS */
   ), [[_vue.vShow, _ctx.show]])], 2
   /* CLASS */
   );
@@ -143,6 +144,8 @@ var _default = (0, _vue.defineComponent)({
       if (value) openPanel();else closePanel();
     });
     return {
+      n,
+      classes,
       show,
       isShow,
       offset,

package/lib/collapse-item/collapseItem.css

@@ -1 +1 @@
-:root { --collapse-background: #fff; --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 12px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 12px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid rgba(0, 0, 0, 0.12);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item::before { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-border-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item-header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item-header__title { transition: color 0.25s;}.var-collapse-item-header__icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item-header__disable { opacity: 0;}.var-collapse-item-header__open { transform: rotate(-180deg);}.var-collapse-item-content { display: flex; font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__wrap { padding: var(--collapse-content-padding); word-break: break-all; flex: 1;}.var-collapse-item__active + .var-collapse-item,.var-collapse-item__active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item__active + .var-collapse-item::after,.var-collapse-item__active:not(:first-child)::after { border-top: none;}.var-collapse-item__disable { color: var(--collapse-disable-color); cursor: not-allowed;}
+:root { --collapse-background: #fff; --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 12px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 12px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid rgba(0, 0, 0, 0.12);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item::before { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-border-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item__header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item__header-title { transition: color 0.25s;}.var-collapse-item__header-icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item__header-open { transform: rotate(-180deg);}.var-collapse-item__header--disable { opacity: 0;}.var-collapse-item__content { display: flex; font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__content-wrap { padding: var(--collapse-content-padding); word-break: break-all; flex: 1;}.var-collapse-item--active + .var-collapse-item,.var-collapse-item--active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item--active + .var-collapse-item::after,.var-collapse-item--active:not(:first-child)::after { border-top: none;}.var-collapse-item--disable { color: var(--collapse-disable-color); cursor: not-allowed;}

package/lib/collapse-item/collapseItem.less

@@ -49,7 +49,7 @@
     top: 0;
   }
 
-  &-header {
+  &__header {
     align-items: center;
     display: flex;
     font-size: var(--collapse-header-font-size);
@@ -58,39 +58,39 @@
     justify-content: space-between;
     position: relative;
 
-    &__title {
+    &-title {
       transition: color 0.25s;
     }
 
-    &__icon {
+    &-icon {
       transform: rotate(0deg);
       opacity: 1;
     }
 
-    &__disable {
-      opacity: 0;
+    &-open {
+      transform: rotate(-180deg);
     }
 
-    &__open {
-      transform: rotate(-180deg);
+    &--disable {
+      opacity: 0;
     }
   }
 
-  &-content {
+  &__content {
     display: flex;
     font-size: var(--collapse-content-font-size);
     overflow: hidden;
     transition: all 0.25s;
-  }
 
-  &__wrap {
-    padding: var(--collapse-content-padding);
-    word-break: break-all;
-    flex: 1;
+    &-wrap {
+      padding: var(--collapse-content-padding);
+      word-break: break-all;
+      flex: 1;
+    }
   }
 
-  &__active + &,
-  &__active:not(:first-child) {
+  &--active + &,
+  &--active:not(:first-child) {
     margin-top: var(--collapse-item-margin-top);
 
     &::after {
@@ -98,7 +98,7 @@
     }
   }
 
-  &__disable {
+  &--disable {
     color: var(--collapse-disable-color);
     cursor: not-allowed;
   }

package/lib/countdown/Countdown.js

@@ -12,21 +12,24 @@ var _elements = require("../utils/elements");
 
 var _shared = require("../utils/shared");
 
+var _components = require("../utils/components");
+
+var {
+  n
+} = (0, _components.createNamespace)('countdown');
 var SECOND = 1000;
 var MINUTE = 60 * SECOND;
 var HOUR = 60 * MINUTE;
 var DAY = 24 * HOUR;
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
-
-var _hoisted_1 = {
-  class: "var-countdown"
-};
-
 function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "default", (0, _vue.normalizeProps)((0, _vue.guardReactiveProps)(_ctx.timeData)), () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.showTime), 1
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n())
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default", (0, _vue.normalizeProps)((0, _vue.guardReactiveProps)(_ctx.timeData)), () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.showTime), 1
   /* TEXT */
-  )])]);
+  )])], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -62,7 +65,7 @@ var _default = (0, _vue.defineComponent)({
         milliseconds
       };
       timeData.value = time;
-      props.onChange == null ? void 0 : props.onChange(timeData.value);
+      (0, _components.call)(props.onChange, timeData.value);
       showTime.value = (0, _shared.parseFormat)(props.format, time);
     };
 
@@ -80,7 +83,7 @@ var _default = (0, _vue.defineComponent)({
       formatTime(durationTime);
 
       if (durationTime === 0) {
-        onEnd == null ? void 0 : onEnd();
+        (0, _components.call)(onEnd);
         return;
       }
 
@@ -114,6 +117,7 @@ var _default = (0, _vue.defineComponent)({
     return {
       showTime,
       timeData,
+      n,
       start,
       pause,
       reset

package/lib/counter/Counter.js

@@ -26,15 +26,16 @@ var _components = require("../utils/components");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('counter');
 var SPEED = 100;
 var DELAY = 600;
 
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
-var _hoisted_1 = {
-  class: "var-counter var--box"
-};
-var _hoisted_2 = ["inputmode", "readonly", "disabled"];
+var _hoisted_1 = ["inputmode", "readonly", "disabled"];
 
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
@@ -43,15 +44,17 @@ function render(_ctx, _cache) {
 
   var _directive_ripple = (0, _vue.resolveDirective)("ripple");
 
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
-    class: ["var-counter__controller var-elevation--2", [_ctx.disabled || _ctx.formDisabled ? 'var-counter--disabled' : null, _ctx.errorMessage ? 'var-counter--error' : null]],
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box'))
+  }, [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
+    class: _ctx.classes(_ctx.n('controller'), 'var-elevation--2', [_ctx.disabled || _ctx.formDisabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--error')]),
     style: {
       background: _ctx.color ? _ctx.color : undefined
     }
   }, _ctx.$attrs), [(0, _vue.withDirectives)((0, _vue.createVNode)(_component_var_icon, {
-    class: (0, _vue.normalizeClass)(["var-counter__decrement-button", [!_ctx.decrementButton ? 'var-counter--hidden' : null]]),
     "var-counter-cover": "",
     name: "minus",
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('decrement-button'), [!_ctx.decrementButton, _ctx.n('--hidden')])),
     style: (0, _vue.normalizeStyle)({
       width: _ctx.toSizeUnit(_ctx.buttonSize),
       height: _ctx.toSizeUnit(_ctx.buttonSize)
@@ -65,7 +68,7 @@ function render(_ctx, _cache) {
   , ["class", "style", "onClick", "onTouchstart", "onTouchend", "onTouchcancel"]), [[_directive_ripple, {
     disabled: !_ctx.ripple || _ctx.disabled || _ctx.readonly || _ctx.disableDecrement || !_ctx.decrementButton || _ctx.isMin
   }]]), (0, _vue.withDirectives)((0, _vue.createElementVNode)("input", {
-    class: "var-counter__input",
+    class: (0, _vue.normalizeClass)(_ctx.n('input')),
     style: (0, _vue.normalizeStyle)({
       width: _ctx.toSizeUnit(_ctx.inputWidth),
       fontSize: _ctx.toSizeUnit(_ctx.inputTextSize)
@@ -77,12 +80,12 @@ function render(_ctx, _cache) {
     onChange: _cache[1] || (_cache[1] = function () {
       return _ctx.handleChange && _ctx.handleChange(...arguments);
     })
-  }, null, 44
-  /* STYLE, PROPS, HYDRATE_EVENTS */
-  , _hoisted_2), [[_vue.vModelText, _ctx.inputValue]]), (0, _vue.withDirectives)((0, _vue.createVNode)(_component_var_icon, {
-    class: (0, _vue.normalizeClass)(["var-counter__increment-button", [!_ctx.incrementButton ? 'var-counter--hidden' : null]]),
+  }, null, 46
+  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
+  , _hoisted_1), [[_vue.vModelText, _ctx.inputValue]]), (0, _vue.withDirectives)((0, _vue.createVNode)(_component_var_icon, {
     "var-counter-cover": "",
     name: "plus",
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('increment-button'), [!_ctx.incrementButton, _ctx.n('--hidden')])),
     style: (0, _vue.normalizeStyle)({
       width: _ctx.toSizeUnit(_ctx.buttonSize),
       height: _ctx.toSizeUnit(_ctx.buttonSize)
@@ -101,7 +104,9 @@ function render(_ctx, _cache) {
     "error-message": _ctx.errorMessage
   }, null, 8
   /* PROPS */
-  , ["error-message"])]);
+  , ["error-message"])], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -154,12 +159,10 @@ var _default = (0, _vue.defineComponent)({
 
 
     var reset = () => {
-      var _props$onUpdateModel;
-
       var {
         min
       } = props;
-      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, min != null ? (0, _shared.toNumber)(min) : 0);
+      (0, _components.call)(props['onUpdate:modelValue'], min != null ? (0, _shared.toNumber)(min) : 0);
       resetValidation();
     };
 
@@ -217,7 +220,7 @@ var _default = (0, _vue.defineComponent)({
         value
       } = event.target;
       var normalizedValue = normalizeValue(value);
-      lazyChange ? onBeforeChange == null ? void 0 : onBeforeChange((0, _shared.toNumber)(normalizedValue), change) : setNormalizedValue(normalizedValue);
+      lazyChange ? (0, _components.call)(onBeforeChange, (0, _shared.toNumber)(normalizedValue), change) : setNormalizedValue(normalizedValue);
       validateWithTrigger('onInputChange');
     };
 
@@ -245,10 +248,10 @@ var _default = (0, _vue.defineComponent)({
       var value = new _decimal.Decimal((0, _shared.toNumber)(modelValue)).minus(new _decimal.Decimal((0, _shared.toNumber)(step))).toString();
       var normalizedValue = normalizeValue(value);
       var normalizedValueNum = (0, _shared.toNumber)(normalizedValue);
-      onDecrement == null ? void 0 : onDecrement(normalizedValueNum);
+      (0, _components.call)(onDecrement, normalizedValueNum);
 
       if (lazyChange) {
-        onBeforeChange == null ? void 0 : onBeforeChange(normalizedValueNum, change);
+        (0, _components.call)(onBeforeChange, normalizedValueNum, change);
       } else {
         setNormalizedValue(normalizedValue);
         validateWithTrigger('onDecrement');
@@ -279,10 +282,10 @@ var _default = (0, _vue.defineComponent)({
       var value = new _decimal.Decimal((0, _shared.toNumber)(modelValue)).plus(new _decimal.Decimal((0, _shared.toNumber)(step))).toString();
       var normalizedValue = normalizeValue(value);
       var normalizedValueNum = (0, _shared.toNumber)(normalizedValue);
-      onIncrement == null ? void 0 : onIncrement(normalizedValueNum);
+      (0, _components.call)(onIncrement, normalizedValueNum);
 
       if (lazyChange) {
-        onBeforeChange == null ? void 0 : onBeforeChange(normalizedValueNum, change);
+        (0, _components.call)(onBeforeChange, normalizedValueNum, change);
       } else {
         setNormalizedValue(normalizedValue);
         validateWithTrigger('onIncrement');
@@ -344,11 +347,9 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var setNormalizedValue = normalizedValue => {
-      var _props$onUpdateModel2;
-
       inputValue.value = normalizedValue;
       var normalizedValueNum = (0, _shared.toNumber)(normalizedValue);
-      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, normalizedValueNum);
+      (0, _components.call)(props['onUpdate:modelValue'], normalizedValueNum);
     };
 
     var change = value => {
@@ -356,13 +357,15 @@ var _default = (0, _vue.defineComponent)({
       validateWithTrigger('onLazyChange');
     };
 
-    bindForm == null ? void 0 : bindForm(counterProvider);
+    (0, _components.call)(bindForm, counterProvider);
     (0, _vue.watch)(() => props.modelValue, newValue => {
       setNormalizedValue(normalizeValue(String(newValue)));
-      props.onChange == null ? void 0 : props.onChange((0, _shared.toNumber)(newValue));
+      (0, _components.call)(props.onChange, (0, _shared.toNumber)(newValue));
     });
     setNormalizedValue(normalizeValue(String(props.modelValue)));
     return {
+      n,
+      classes,
       inputValue,
       errorMessage,
       formDisabled,

package/lib/date-picker/DatePicker.js

@@ -20,10 +20,17 @@ var _shared = require("../utils/shared");
 
 var _elements = require("../utils/elements");
 
+var _components = require("../utils/components");
+
 var _locale = require("../locale");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('date-picker');
+
 function render(_ctx, _cache) {
   var _component_year_picker_panel = (0, _vue.resolveComponent)("year-picker-panel");
 
@@ -32,14 +39,14 @@ function render(_ctx, _cache) {
   var _component_day_picker_panel = (0, _vue.resolveComponent)("day-picker-panel");
 
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(["var-date-picker", [_ctx.shadow ? 'var-elevation--2' : null]])
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.shadow, 'var-elevation--2']))
   }, [(0, _vue.createElementVNode)("div", {
-    class: "var-date-picker-title",
+    class: (0, _vue.normalizeClass)(_ctx.n('title')),
     style: (0, _vue.normalizeStyle)({
       background: _ctx.headerColor || _ctx.color
     })
   }, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-date-picker-title__year", [_ctx.isYearPanel ? 'var-date-picker-title__year--active' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('title-year'), [_ctx.isYearPanel, _ctx.n('title-year--active')])),
     onClick: _cache[0] || (_cache[0] = $event => _ctx.clickEl('year'))
   }, [(0, _vue.renderSlot)(_ctx.$slots, "year", {
     year: _ctx.previewYear
@@ -48,10 +55,10 @@ function render(_ctx, _cache) {
   )])], 2
   /* CLASS */
   ), (0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-date-picker-title__date", [!_ctx.isYearPanel ? 'var-date-picker-title__date--active' : null, _ctx.range ? 'var-date-picker-title__date--range' : null]]),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('title-date'), [!_ctx.isYearPanel, _ctx.n('title-date--active')], [_ctx.range, _ctx.n('title-date--range')])),
     onClick: _cache[1] || (_cache[1] = $event => _ctx.clickEl('date'))
   }, [(0, _vue.createVNode)(_vue.Transition, {
-    name: _ctx.multiple ? '' : "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatey"
+    name: _ctx.multiple ? '' : "" + _ctx.n() + (_ctx.reverse ? '-reverse' : '') + "-translatey"
   }, {
     default: (0, _vue.withCtx)(() => {
       var _ctx$chooseMonth, _ctx$chooseMonth2, _ctx$chooseMonth3;
@@ -99,10 +106,10 @@ function render(_ctx, _cache) {
   /* PROPS */
   , ["name"])], 2
   /* CLASS */
-  )], 4
-  /* STYLE */
+  )], 6
+  /* CLASS, STYLE */
   ), (0, _vue.createElementVNode)("div", {
-    class: "var-date-picker-body",
+    class: (0, _vue.normalizeClass)(_ctx.n('body')),
     onTouchstart: _cache[2] || (_cache[2] = function () {
       return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
     }),
@@ -113,7 +120,7 @@ function render(_ctx, _cache) {
       return _ctx.handleTouchend && _ctx.handleTouchend(...arguments);
     })
   }, [(0, _vue.createVNode)(_vue.Transition, {
-    name: "var-date-picker-panel-fade"
+    name: _ctx.n() + "-panel-fade"
   }, {
     default: (0, _vue.withCtx)(() => [_ctx.getPanelType === 'year' ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_year_picker_panel, {
       key: 0,
@@ -150,8 +157,10 @@ function render(_ctx, _cache) {
     _: 1
     /* STABLE */
 
-  })], 32
-  /* HYDRATE_EVENTS */
+  }, 8
+  /* PROPS */
+  , ["name"])], 34
+  /* CLASS, HYDRATE_EVENTS */
   )], 2
   /* CLASS */
   );
@@ -338,27 +347,23 @@ var _default = (0, _vue.defineComponent)({
       rangeDone.value = !rangeDone.value;
 
       if (rangeDone.value) {
-        var _props$onUpdateModel;
-
         var isChangeOrder = (0, _dayjs.default)(rangeDate.value[0]).isAfter(rangeDate.value[1]);
 
         var _date = isChangeOrder ? [rangeDate.value[1], rangeDate.value[0]] : [...rangeDate.value];
 
-        (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, _date);
-        props.onChange == null ? void 0 : props.onChange(_date);
+        (0, _components.call)(props['onUpdate:modelValue'], _date);
+        (0, _components.call)(props.onChange, _date);
       }
     };
 
     var updateMultiple = (date, type) => {
-      var _props$onUpdateModel2;
-
       var multipleDates = type === 'month' ? chooseMonths : chooseDays;
       var formatType = type === 'month' ? 'YYYY-MM' : 'YYYY-MM-DD';
       var formatDates = multipleDates.value.map(date => (0, _dayjs.default)(date).format(formatType));
       var index = formatDates.findIndex(choose => choose === date);
       if (index === -1) formatDates.push(date);else formatDates.splice(index, 1);
-      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, formatDates);
-      props.onChange == null ? void 0 : props.onChange(formatDates);
+      (0, _components.call)(props['onUpdate:modelValue'], formatDates);
+      (0, _components.call)(props.onChange, formatDates);
     };
 
     var getReverse = (dateType, date) => {
@@ -381,8 +386,8 @@ var _default = (0, _vue.defineComponent)({
       var date = previewYear.value + "-" + previewMonth.value.index + "-" + day;
       var formatDate = (0, _dayjs.default)(date).format('YYYY-MM-DD');
       if (range) updateRange(formatDate, 'day');else if (multiple) updateMultiple(formatDate, 'day');else {
-        updateModelValue == null ? void 0 : updateModelValue(formatDate);
-        onChange == null ? void 0 : onChange(formatDate);
+        (0, _components.call)(updateModelValue, formatDate);
+        (0, _components.call)(onChange, formatDate);
       }
     };
 
@@ -400,8 +405,8 @@ var _default = (0, _vue.defineComponent)({
       if (type === 'month' && !readonly) {
         var date = previewYear.value + "-" + month.index;
         if (range) updateRange(date, 'month');else if (multiple) updateMultiple(date, 'month');else {
-          updateModelValue == null ? void 0 : updateModelValue(date);
-          onChange == null ? void 0 : onChange(date);
+          (0, _components.call)(updateModelValue, date);
+          (0, _components.call)(onChange, date);
         }
       } else {
         previewMonth.value = month;
@@ -524,6 +529,8 @@ var _default = (0, _vue.defineComponent)({
     });
     (0, _vue.watch)(getPanelType, resetState);
     return {
+      n,
+      classes,
       monthPanelEl,
       dayPanelEl,
       reverse,