@varlet/ui 1.26.9 → 1.27.0-alpha.1649265140569

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%);}

package/lib/date-picker/date-picker.less

@@ -92,7 +92,7 @@
     padding: 0;
   }
 
-  &-title {
+  &__title {
     padding: var(--date-picker-title-padding);
     color: var(--date-picker-title-color);
     background: var(--date-picker-title-background);
@@ -101,7 +101,7 @@
     flex-direction: column;
     flex-wrap: wrap;
 
-    &__year {
+    &-year {
       opacity: 0.6;
       cursor: pointer;
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -117,7 +117,7 @@
       }
     }
 
-    &__date {
+    &-date {
       height: var(--date-picker-title-date-height);
       overflow: hidden;
       font-size: var(--date-picker-title-date-font-size);
@@ -141,7 +141,7 @@
     }
   }
 
-  &-body {
+  &__body {
     flex: 1;
     position: relative;
     overflow: auto;
@@ -198,28 +198,26 @@
       color: var(--date-picker-main-color);
     }
 
-    &__button-disabled {
+    &__button--disabled {
       color: var(--color-text-disabled) !important;
       cursor: not-allowed;
     }
   }
 
   .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;
+    width: 100%;
+    height: 100%;
+    font-weight: var(--year-picker-font-weight);
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    overflow: auto;
+    text-align: center;
 
-      li {
-        padding: var(--year-picker-item-padding);
-        cursor: pointer;
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      }
+    &__item {
+      padding: var(--year-picker-item-padding);
+      cursor: pointer;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
       &--active {
         font-size: var(--year-picker-item-active-font-size);
@@ -261,11 +259,15 @@
       font-size: var(--day-picker-content-item-button-font-size);
     }
 
+    &__button:not(.var-day-picker__button--usable) {
+      cursor: unset;
+    }
+
     &__button[var-date-picker-color-cover='true'] {
       color: var(--date-picker-main-color);
     }
 
-    &__button-disabled {
+    &__button--disabled {
       color: var(--color-text-disabled) !important;
       cursor: not-allowed;
     }

package/lib/date-picker/src/day-picker-panel.js

@@ -20,6 +20,8 @@ var _props = require("../props");
 
 var _shared = require("../../utils/shared");
 
+var _components = require("../../utils/components");
+
 var _locale = require("../../locale");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,27 +32,24 @@ _dayjs.default.extend(_isSameOrBefore.default);
 
 _dayjs.default.extend(_isSameOrAfter.default);
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
-
-var _hoisted_1 = {
-  class: "var-day-picker__panel"
-};
-var _hoisted_2 = {
-  class: "var-day-picker__content"
-};
-var _hoisted_3 = {
-  class: "var-day-picker__head"
-};
-var _hoisted_4 = {
-  class: "var-day-picker__body"
-};
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('day-picker');
+var {
+  n: nDate
+} = (0, _components.createNamespace)('date-picker');
 
 function render(_ctx, _cache) {
   var _component_panel_header = (0, _vue.resolveComponent)("panel-header");
 
   var _component_var_button = (0, _vue.resolveComponent)("var-button");
 
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", _hoisted_2, [(0, _vue.createVNode)(_component_panel_header, {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n())
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('content'))
+  }, [(0, _vue.createVNode)(_component_panel_header, {
     ref: "headerEl",
     type: "day",
     date: _ctx.preview,
@@ -60,11 +59,13 @@ function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["date", "disabled", "onCheckPanel", "onCheckDate"]), (0, _vue.createVNode)(_vue.Transition, {
-    name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
+    name: "" + _ctx.nDate() + (_ctx.reverse ? '-reverse' : '') + "-translatex"
   }, {
     default: (0, _vue.withCtx)(() => [((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
       key: _ctx.panelKey
-    }, [(0, _vue.createElementVNode)("ul", _hoisted_3, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.sortWeekList, week => {
+    }, [(0, _vue.createElementVNode)("ul", {
+      class: (0, _vue.normalizeClass)(_ctx.n('head'))
+    }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.sortWeekList, week => {
       return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
         key: week.index
       }, (0, _vue.toDisplayString)(_ctx.getDayAbbr(week.index)), 1
@@ -72,14 +73,15 @@ function render(_ctx, _cache) {
       );
     }), 128
     /* KEYED_FRAGMENT */
-    ))]), (0, _vue.createElementVNode)("ul", _hoisted_4, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.days, (day, index) => {
+    ))], 2
+    /* CLASS */
+    ), (0, _vue.createElementVNode)("ul", {
+      class: (0, _vue.normalizeClass)(_ctx.n('body'))
+    }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.days, (day, index) => {
       return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
         key: index
       }, [(0, _vue.createVNode)(_component_var_button, (0, _vue.mergeProps)({
         type: "primary",
-        class: ["var-day-picker__button", {
-          'var-day-picker__button--usable': day > 0
-        }],
         "var-day-picker-cover": "",
         round: "",
         ripple: false
@@ -94,16 +96,22 @@ function render(_ctx, _cache) {
 
       }, 1040
       /* FULL_PROPS, DYNAMIC_SLOTS */
-      , ["class", "onClick"])]);
+      , ["onClick"])]);
     }), 128
     /* KEYED_FRAGMENT */
-    ))])]))]),
+    ))], 2
+    /* CLASS */
+    )]))]),
     _: 1
     /* STABLE */
 
   }, 8
   /* PROPS */
-  , ["name"])])]);
+  , ["name"])], 2
+  /* CLASS */
+  )], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -253,7 +261,8 @@ var _default = (0, _vue.defineComponent)({
         return {
           text: true,
           outline: false,
-          textColor: ''
+          textColor: '',
+          class: n('button')
         };
       }
 
@@ -309,18 +318,16 @@ var _default = (0, _vue.defineComponent)({
         if (disabled) return '';
         if (computeOutline()) return color != null ? color : '';
         if (dayExist()) return '';
-        return 'var-date-picker-color-cover';
+        return nDate() + "-color-cover";
       };
 
-      var isCover = textColorOrCover().startsWith('var-date-picker');
+      var isCover = textColorOrCover().startsWith(nDate());
       return {
         text: computeText(),
         outline: computeOutline(),
         textColor: isCover ? '' : textColorOrCover(),
-        'var-date-picker-color-cover': isCover,
-        class: {
-          'var-day-picker__button-disabled': disabled
-        }
+        [nDate() + "-color-cover"]: isCover,
+        class: classes(n('button'), n('button--usable'), [disabled, n('button--disabled')])
       };
     };
 
@@ -332,7 +339,7 @@ var _default = (0, _vue.defineComponent)({
 
     var chooseDay = (day, event) => {
       var buttonEl = event.currentTarget;
-      if (buttonEl.classList.contains('var-day-picker__button-disabled')) return;
+      if (buttonEl.classList.contains(n('button--disabled'))) return;
       emit('choose-day', day);
     }; // expose for internal
 
@@ -350,6 +357,8 @@ var _default = (0, _vue.defineComponent)({
       initHeader();
     });
     return {
+      n,
+      nDate,
       days,
       reverse,
       headerEl,

package/lib/date-picker/src/month-picker-panel.js

@@ -20,6 +20,8 @@ var _button = _interopRequireDefault(require("../../button"));
 
 var _shared = require("../../utils/shared");
 
+var _components = require("../../utils/components");
+
 var _locale = require("../../locale");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,21 +32,24 @@ _dayjs.default.extend(_isSameOrBefore.default);
 
 _dayjs.default.extend(_isSameOrAfter.default);
 
-var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
-
-var _hoisted_1 = {
-  class: "var-month-picker__panel"
-};
-var _hoisted_2 = {
-  class: "var-month-picker__content"
-};
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('month-picker');
+var {
+  n: nDate
+} = (0, _components.createNamespace)('date-picker');
 
 function render(_ctx, _cache) {
   var _component_panel_header = (0, _vue.resolveComponent)("panel-header");
 
   var _component_var_button = (0, _vue.resolveComponent)("var-button");
 
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", _hoisted_2, [(0, _vue.createVNode)(_component_panel_header, {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n())
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n('content'))
+  }, [(0, _vue.createVNode)(_component_panel_header, {
     ref: "headerEl",
     type: "month",
     date: _ctx.preview,
@@ -54,7 +59,7 @@ function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["date", "disabled", "onCheckPanel", "onCheckDate"]), (0, _vue.createVNode)(_vue.Transition, {
-    name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
+    name: "" + _ctx.nDate() + (_ctx.reverse ? '-reverse' : '') + "-translatex"
   }, {
     default: (0, _vue.withCtx)(() => [((0, _vue.openBlock)(), (0, _vue.createElementBlock)("ul", {
       key: _ctx.panelKey
@@ -63,7 +68,6 @@ function render(_ctx, _cache) {
         key: month.index
       }, [(0, _vue.createVNode)(_component_var_button, (0, _vue.mergeProps)({
         type: "primary",
-        class: "var-month-picker__button",
         "var-month-picker-cover": "",
         ripple: false
       }, _extends({}, _ctx.buttonProps(month.index)), {
@@ -86,7 +90,11 @@ function render(_ctx, _cache) {
 
   }, 8
   /* PROPS */
-  , ["name"])])]);
+  , ["name"])], 2
+  /* CLASS */
+  )], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -235,25 +243,23 @@ var _default = (0, _vue.defineComponent)({
         if (disabled) return '';
         if (computeOutline()) return color != null ? color : '';
         if (monthExist()) return '';
-        return 'var-date-picker-color-cover';
+        return nDate() + "-color-cover";
       };
 
-      var isCover = textColorOrCover().startsWith('var-date-picker');
+      var isCover = textColorOrCover().startsWith(nDate());
       return {
         outline: computeOutline(),
         text: computeText(),
         color: !computeText() ? color : '',
         textColor: isCover ? '' : textColorOrCover(),
-        'var-date-picker-color-cover': isCover,
-        class: {
-          'var-month-picker__button-disabled': disabled
-        }
+        [nDate() + "-color-cover"]: isCover,
+        class: classes(n('button'), [disabled, n('button--disabled')])
       };
     };
 
     var chooseMonth = (month, event) => {
       var buttonEl = event.currentTarget;
-      if (buttonEl.classList.contains('var-month-picker__button-disabled')) return;
+      if (buttonEl.classList.contains(n('button--disabled'))) return;
       emit('choose-month', month);
     };
 
@@ -281,6 +287,8 @@ var _default = (0, _vue.defineComponent)({
       immediate: true
     });
     return {
+      n,
+      nDate,
       pack: _locale.pack,
       MONTH_LIST: _props.MONTH_LIST,
       headerEl,

package/lib/date-picker/src/panel-header.js

@@ -12,22 +12,24 @@ var _vue = require("vue");
 
 var _shared = require("../../utils/shared");
 
+var _components = require("../../utils/components");
+
 var _locale = require("../../locale");
 
 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-picker-header"
-};
+var {
+  n
+} = (0, _components.createNamespace)('picker-header');
 
 function render(_ctx, _cache) {
   var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
 
   var _component_var_button = (0, _vue.resolveComponent)("var-button");
 
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createVNode)(_component_var_button, {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.n())
+  }, [(0, _vue.createVNode)(_component_var_button, {
     round: "",
     text: "",
     style: {
@@ -45,7 +47,7 @@ function render(_ctx, _cache) {
   }, 8
   /* PROPS */
   , ["disabled"]), (0, _vue.createElementVNode)("div", {
-    class: "var-picker-header__value",
+    class: (0, _vue.normalizeClass)(_ctx.n('value')),
     onClick: _cache[1] || (_cache[1] = $event => _ctx.$emit('check-panel'))
   }, [(0, _vue.createVNode)(_vue.Transition, {
     name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
@@ -60,7 +62,9 @@ function render(_ctx, _cache) {
 
   }, 8
   /* PROPS */
-  , ["name"])]), (0, _vue.createVNode)(_component_var_button, {
+  , ["name"])], 2
+  /* CLASS */
+  ), (0, _vue.createVNode)(_component_var_button, {
     round: "",
     text: "",
     style: {
@@ -77,7 +81,9 @@ function render(_ctx, _cache) {
 
   }, 8
   /* PROPS */
-  , ["disabled"])]);
+  , ["disabled"])], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -136,6 +142,7 @@ var _default = (0, _vue.defineComponent)({
       forwardOrBackNum.value = 0;
     });
     return {
+      n,
       reverse,
       showDate,
       checkDate

package/lib/date-picker/src/year-picker-panel.js

@@ -10,30 +10,38 @@ var _dayjs = _interopRequireDefault(require("dayjs"));
 
 var _shared = require("../../utils/shared");
 
+var _components = require("../../utils/components");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('year-picker');
+
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
 
-var _hoisted_1 = {
-  class: "var-year-picker__panel"
-};
-var _hoisted_2 = ["onClick"];
+var _hoisted_1 = ["onClick"];
 
 function render(_ctx, _cache) {
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("ul", _hoisted_1, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.yearList, year => {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("ul", {
+    class: (0, _vue.normalizeClass)(_ctx.n())
+  }, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.yearList, year => {
     return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("li", {
       key: year,
-      class: (0, _vue.normalizeClass)([year === _ctx.toNumber(_ctx.preview) ? 'var-year-picker__panel--active' : null]),
+      class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('item'), [year === _ctx.toNumber(_ctx.preview), _ctx.n('item--active')])),
       style: (0, _vue.normalizeStyle)({
         color: year === _ctx.toNumber(_ctx.preview) ? _ctx.componentProps.color : ''
       }),
       onClick: $event => _ctx.chooseYear(year)
     }, (0, _vue.toDisplayString)(year), 15
     /* TEXT, CLASS, STYLE, PROPS */
-    , _hoisted_2);
+    , _hoisted_1);
   }), 128
   /* KEYED_FRAGMENT */
-  ))]);
+  ))], 2
+  /* CLASS */
+  );
 }
 
 var _default = (0, _vue.defineComponent)({
@@ -94,12 +102,14 @@ var _default = (0, _vue.defineComponent)({
     };
 
     (0, _vue.onMounted)(() => {
-      var activeEl = document.querySelector('.var-year-picker__panel--active');
+      var activeEl = document.querySelector("." + n('item--active'));
       activeEl == null ? void 0 : activeEl.scrollIntoView({
         block: 'center'
       });
     });
     return {
+      n,
+      classes,
       yearList,
       chooseYear,
       toNumber: _shared.toNumber