@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

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,

package/lib/date-picker/date-picker.css

@@ -1 +1 @@
-:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-height: 385px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-body-background-color: rgba(0, 0, 0, 0); --picker-header-padding: 4px 16px; --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-font-weight: 400; --year-picker-item-padding: 8px 0; --year-picker-item-active-font-size: 26px; --year-picker-item-active-font-weight: 500; --year-picker-item-active-font-padding: 10px 0; --year-picker-item-active-color: var(--color-primary); --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); height: var(--date-picker-height); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker-title { padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker-title__year { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; display: inline-flex; font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); margin-bottom: var(--date-picker-title-year-margin-bottom); transition: 0.3s var(--cubic-bezier);}.var-date-picker-title__year--active { opacity: 1;}.var-date-picker-title__date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: flex; align-items: center; opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker-title__date--active { opacity: 1;}.var-date-picker-title__date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker-body { flex: 1; position: relative; overflow: auto; background-color: var(--date-picker-body-background-color);}.var-date-picker .var-picker-header { padding: var(--picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative;}.var-date-picker .var-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer; user-select: none;}.var-date-picker .var-picker-header__value div { width: 100%;}.var-date-picker .var-month-picker__content { padding: var(--month-picker-padding);}.var-date-picker .var-month-picker__content ul { display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width);}.var-date-picker .var-month-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-month-picker__button-disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-year-picker__panel { width: 100%; height: 100%; font-weight: var(--year-picker-font-weight); padding: 0; margin: 0; list-style-type: none; overflow: auto; text-align: center;}.var-date-picker .var-year-picker__panel li { padding: var(--year-picker-item-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-date-picker .var-year-picker__panel--active { font-size: var(--year-picker-item-active-font-size); font-weight: var(--year-picker-item-active-font-weight); padding: var(--year-picker-item-active-font-padding); color: var(--year-picker-item-active-color);}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-day-picker__button-disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}
+:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-height: 385px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-body-background-color: rgba(0, 0, 0, 0); --picker-header-padding: 4px 16px; --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-font-weight: 400; --year-picker-item-padding: 8px 0; --year-picker-item-active-font-size: 26px; --year-picker-item-active-font-weight: 500; --year-picker-item-active-font-padding: 10px 0; --year-picker-item-active-color: var(--color-primary); --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); height: var(--date-picker-height); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker__title { padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker__title-year { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; display: inline-flex; font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); margin-bottom: var(--date-picker-title-year-margin-bottom); transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-year--active { opacity: 1;}.var-date-picker__title-date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: flex; align-items: center; opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker__title-date--active { opacity: 1;}.var-date-picker__title-date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker__body { flex: 1; position: relative; overflow: auto; background-color: var(--date-picker-body-background-color);}.var-date-picker .var-picker-header { padding: var(--picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative;}.var-date-picker .var-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer; user-select: none;}.var-date-picker .var-picker-header__value div { width: 100%;}.var-date-picker .var-month-picker__content { padding: var(--month-picker-padding);}.var-date-picker .var-month-picker__content ul { display: flex; flex-wrap: wrap; justify-content: space-between;}.var-date-picker .var-month-picker__content ul li { width: var(--month-picker-item-width); display: flex; height: var(--month-picker-item-height); align-items: center; justify-content: center;}.var-date-picker .var-month-picker__button[var-month-picker-cover] { width: 100%; max-width: var(--month-picker-item-button-max-width);}.var-date-picker .var-month-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-month-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker .var-year-picker { width: 100%; height: 100%; font-weight: var(--year-picker-font-weight); padding: 0; margin: 0; list-style-type: none; overflow: auto; text-align: center;}.var-date-picker .var-year-picker__item { padding: var(--year-picker-item-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-date-picker .var-year-picker__item--active { font-size: var(--year-picker-item-active-font-size); font-weight: var(--year-picker-item-active-font-weight); padding: var(--year-picker-item-active-font-padding); color: var(--year-picker-item-active-color);}.var-date-picker .var-day-picker__content ul { display: flex; flex-wrap: wrap;}.var-date-picker .var-day-picker__content ul li { position: relative; display: flex; justify-content: center; width: var(--day-picker-content-item-width); font-size: var(--day-picker-content-item-font-size); padding: var(--day-picker-content-item-padding);}.var-date-picker .var-day-picker__head li { color: var(--day-picker-head-item-color); padding: var(--day-picker-head-item-padding); font-weight: var(--day-picker-head-item-font-weight);}.var-date-picker .var-day-picker__button[var-day-picker-cover] { width: var(--day-picker-content-item-button-width); height: var(--day-picker-content-item-button-height); font-size: var(--day-picker-content-item-button-font-size);}.var-date-picker .var-day-picker__button:not(.var-day-picker__button--usable) { cursor: unset;}.var-date-picker .var-day-picker__button[var-date-picker-color-cover='true'] { color: var(--date-picker-main-color);}.var-date-picker .var-day-picker__button--disabled { color: var(--color-text-disabled) !important; cursor: not-allowed;}.var-date-picker-translatey-enter-from { opacity: 0; transform: translateY(100%);}.var-date-picker-translatey-enter-active,.var-date-picker-reverse-translatey-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-active,.var-date-picker-reverse-translatey-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatey-leave-to { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-enter-from { opacity: 0; transform: translateY(-100%);}.var-date-picker-reverse-translatey-leave-to { opacity: 0; transform: translateY(100%);}.var-date-picker-panel-fade-enter-from,.var-date-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-date-picker-panel-fade-leave-active { position: absolute;}.var-date-picker-translatex-enter-from { opacity: 0; transform: translateX(100%);}.var-date-picker-reverse-translatex-enter-from { opacity: 0; transform: translateX(-100%);}.var-date-picker-translatex-enter-active,.var-date-picker-reverse-translatex-enter-active { transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-active,.var-date-picker-reverse-translatex-leave-active { position: absolute; transition: 0.3s var(--cubic-bezier);}.var-date-picker-translatex-leave-to { opacity: 0; transform: translateX(-100%);}.var-date-picker-reverse-translatex-leave-to { opacity: 0; transform: translateX(100%);}