@varlet/ui 1.26.8 → 1.27.0-alpha.1649242923701

package/es/counter/Counter.js

@@ -7,17 +7,18 @@ import { props } from './props';
 import { toNumber } from '../utils/shared';
 import { toSizeUnit } from '../utils/elements';
 import { useForm } from '../form/provide';
-import { useValidation } from '../utils/components';
+import { useValidation, createNamespace, call } from '../utils/components';
+var {
+  n,
+  classes
+} = createNamespace('counter');
 var SPEED = 100;
 var DELAY = 600;
 import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, createVNode as _createVNode, withDirectives as _withDirectives, vModelText as _vModelText, createElementVNode as _createElementVNode, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-var _hoisted_1 = {
-  class: "var-counter var--box"
-};
-var _hoisted_2 = ["inputmode", "readonly", "disabled"];
+var _hoisted_1 = ["inputmode", "readonly", "disabled"];
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
@@ -25,15 +26,17 @@ export function render(_ctx, _cache) {
 
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", _mergeProps({
-    class: ["var-counter__controller var-elevation--2", [_ctx.disabled || _ctx.formDisabled ? 'var-counter--disabled' : null, _ctx.errorMessage ? 'var-counter--error' : null]],
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box'))
+  }, [_createElementVNode("div", _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), [_withDirectives(_createVNode(_component_var_icon, {
-    class: _normalizeClass(["var-counter__decrement-button", [!_ctx.decrementButton ? 'var-counter--hidden' : null]]),
     "var-counter-cover": "",
     name: "minus",
+    class: _normalizeClass(_ctx.classes(_ctx.n('decrement-button'), [!_ctx.decrementButton, _ctx.n('--hidden')])),
     style: _normalizeStyle({
       width: _ctx.toSizeUnit(_ctx.buttonSize),
       height: _ctx.toSizeUnit(_ctx.buttonSize)
@@ -47,7 +50,7 @@ export 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
   }]]), _withDirectives(_createElementVNode("input", {
-    class: "var-counter__input",
+    class: _normalizeClass(_ctx.n('input')),
     style: _normalizeStyle({
       width: _ctx.toSizeUnit(_ctx.inputWidth),
       fontSize: _ctx.toSizeUnit(_ctx.inputTextSize)
@@ -59,12 +62,12 @@ export function render(_ctx, _cache) {
     onChange: _cache[1] || (_cache[1] = function () {
       return _ctx.handleChange && _ctx.handleChange(...arguments);
     })
-  }, null, 44
-  /* STYLE, PROPS, HYDRATE_EVENTS */
-  , _hoisted_2), [[_vModelText, _ctx.inputValue]]), _withDirectives(_createVNode(_component_var_icon, {
-    class: _normalizeClass(["var-counter__increment-button", [!_ctx.incrementButton ? 'var-counter--hidden' : null]]),
+  }, null, 46
+  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
+  , _hoisted_1), [[_vModelText, _ctx.inputValue]]), _withDirectives(_createVNode(_component_var_icon, {
     "var-counter-cover": "",
     name: "plus",
+    class: _normalizeClass(_ctx.classes(_ctx.n('increment-button'), [!_ctx.incrementButton, _ctx.n('--hidden')])),
     style: _normalizeStyle({
       width: _ctx.toSizeUnit(_ctx.buttonSize),
       height: _ctx.toSizeUnit(_ctx.buttonSize)
@@ -83,7 +86,9 @@ export function render(_ctx, _cache) {
     "error-message": _ctx.errorMessage
   }, null, 8
   /* PROPS */
-  , ["error-message"])]);
+  , ["error-message"])], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -135,12 +140,10 @@ export default defineComponent({
 
 
     var reset = () => {
-      var _props$onUpdateModel;
-
       var {
         min
       } = props;
-      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, min != null ? toNumber(min) : 0);
+      call(props['onUpdate:modelValue'], min != null ? toNumber(min) : 0);
       resetValidation();
     };
 
@@ -198,7 +201,7 @@ export default defineComponent({
         value
       } = event.target;
       var normalizedValue = normalizeValue(value);
-      lazyChange ? onBeforeChange == null ? void 0 : onBeforeChange(toNumber(normalizedValue), change) : setNormalizedValue(normalizedValue);
+      lazyChange ? call(onBeforeChange, toNumber(normalizedValue), change) : setNormalizedValue(normalizedValue);
       validateWithTrigger('onInputChange');
     };
 
@@ -226,10 +229,10 @@ export default defineComponent({
       var value = new Decimal(toNumber(modelValue)).minus(new Decimal(toNumber(step))).toString();
       var normalizedValue = normalizeValue(value);
       var normalizedValueNum = toNumber(normalizedValue);
-      onDecrement == null ? void 0 : onDecrement(normalizedValueNum);
+      call(onDecrement, normalizedValueNum);
 
       if (lazyChange) {
-        onBeforeChange == null ? void 0 : onBeforeChange(normalizedValueNum, change);
+        call(onBeforeChange, normalizedValueNum, change);
       } else {
         setNormalizedValue(normalizedValue);
         validateWithTrigger('onDecrement');
@@ -260,10 +263,10 @@ export default defineComponent({
       var value = new Decimal(toNumber(modelValue)).plus(new Decimal(toNumber(step))).toString();
       var normalizedValue = normalizeValue(value);
       var normalizedValueNum = toNumber(normalizedValue);
-      onIncrement == null ? void 0 : onIncrement(normalizedValueNum);
+      call(onIncrement, normalizedValueNum);
 
       if (lazyChange) {
-        onBeforeChange == null ? void 0 : onBeforeChange(normalizedValueNum, change);
+        call(onBeforeChange, normalizedValueNum, change);
       } else {
         setNormalizedValue(normalizedValue);
         validateWithTrigger('onIncrement');
@@ -325,11 +328,9 @@ export default defineComponent({
     };
 
     var setNormalizedValue = normalizedValue => {
-      var _props$onUpdateModel2;
-
       inputValue.value = normalizedValue;
       var normalizedValueNum = toNumber(normalizedValue);
-      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, normalizedValueNum);
+      call(props['onUpdate:modelValue'], normalizedValueNum);
     };
 
     var change = value => {
@@ -337,13 +338,15 @@ export default defineComponent({
       validateWithTrigger('onLazyChange');
     };
 
-    bindForm == null ? void 0 : bindForm(counterProvider);
+    call(bindForm, counterProvider);
     watch(() => props.modelValue, newValue => {
       setNormalizedValue(normalizeValue(String(newValue)));
-      props.onChange == null ? void 0 : props.onChange(toNumber(newValue));
+      call(props.onChange, toNumber(newValue));
     });
     setNormalizedValue(normalizeValue(String(props.modelValue)));
     return {
+      n,
+      classes,
       inputValue,
       errorMessage,
       formDisabled,

package/es/date-picker/DatePicker.js

@@ -6,7 +6,12 @@ import DayPickerPanel from './src/day-picker-panel.js'
 import { props, MONTH_LIST, WEEK_HEADER } from './props';
 import { isArray, toNumber } from '../utils/shared';
 import { nextTickFrame } from '../utils/elements';
+import { createNamespace, call } from '../utils/components';
 import { pack } from '../locale';
+var {
+  n,
+  classes
+} = createNamespace('date-picker');
 import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeProps as _normalizeProps, mergeProps as _mergeProps, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, createBlock as _createBlock } from "vue";
 export function render(_ctx, _cache) {
   var _component_year_picker_panel = _resolveComponent("year-picker-panel");
@@ -16,14 +21,14 @@ export function render(_ctx, _cache) {
   var _component_day_picker_panel = _resolveComponent("day-picker-panel");
 
   return _openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(["var-date-picker", [_ctx.shadow ? 'var-elevation--2' : null]])
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.shadow, 'var-elevation--2']))
   }, [_createElementVNode("div", {
-    class: "var-date-picker-title",
+    class: _normalizeClass(_ctx.n('title')),
     style: _normalizeStyle({
       background: _ctx.headerColor || _ctx.color
     })
   }, [_createElementVNode("div", {
-    class: _normalizeClass(["var-date-picker-title__year", [_ctx.isYearPanel ? 'var-date-picker-title__year--active' : null]]),
+    class: _normalizeClass(_ctx.classes(_ctx.n('title-year'), [_ctx.isYearPanel, _ctx.n('title-year--active')])),
     onClick: _cache[0] || (_cache[0] = $event => _ctx.clickEl('year'))
   }, [_renderSlot(_ctx.$slots, "year", {
     year: _ctx.previewYear
@@ -32,10 +37,10 @@ export function render(_ctx, _cache) {
   )])], 2
   /* CLASS */
   ), _createElementVNode("div", {
-    class: _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: _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'))
   }, [_createVNode(_Transition, {
-    name: _ctx.multiple ? '' : "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatey"
+    name: _ctx.multiple ? '' : "" + _ctx.n() + (_ctx.reverse ? '-reverse' : '') + "-translatey"
   }, {
     default: _withCtx(() => {
       var _ctx$chooseMonth, _ctx$chooseMonth2, _ctx$chooseMonth3;
@@ -83,10 +88,10 @@ export function render(_ctx, _cache) {
   /* PROPS */
   , ["name"])], 2
   /* CLASS */
-  )], 4
-  /* STYLE */
+  )], 6
+  /* CLASS, STYLE */
   ), _createElementVNode("div", {
-    class: "var-date-picker-body",
+    class: _normalizeClass(_ctx.n('body')),
     onTouchstart: _cache[2] || (_cache[2] = function () {
       return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
     }),
@@ -97,7 +102,7 @@ export function render(_ctx, _cache) {
       return _ctx.handleTouchend && _ctx.handleTouchend(...arguments);
     })
   }, [_createVNode(_Transition, {
-    name: "var-date-picker-panel-fade"
+    name: _ctx.n() + "-panel-fade"
   }, {
     default: _withCtx(() => [_ctx.getPanelType === 'year' ? (_openBlock(), _createBlock(_component_year_picker_panel, {
       key: 0,
@@ -134,8 +139,10 @@ export function render(_ctx, _cache) {
     _: 1
     /* STABLE */
 
-  })], 32
-  /* HYDRATE_EVENTS */
+  }, 8
+  /* PROPS */
+  , ["name"])], 34
+  /* CLASS, HYDRATE_EVENTS */
   )], 2
   /* CLASS */
   );
@@ -317,27 +324,23 @@ export default defineComponent({
       rangeDone.value = !rangeDone.value;
 
       if (rangeDone.value) {
-        var _props$onUpdateModel;
-
         var isChangeOrder = dayjs(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);
+        call(props['onUpdate:modelValue'], _date);
+        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 => dayjs(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);
+      call(props['onUpdate:modelValue'], formatDates);
+      call(props.onChange, formatDates);
     };
 
     var getReverse = (dateType, date) => {
@@ -360,8 +363,8 @@ export default defineComponent({
       var date = previewYear.value + "-" + previewMonth.value.index + "-" + day;
       var formatDate = dayjs(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);
+        call(updateModelValue, formatDate);
+        call(onChange, formatDate);
       }
     };
 
@@ -379,8 +382,8 @@ export default 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);
+          call(updateModelValue, date);
+          call(onChange, date);
         }
       } else {
         previewMonth.value = month;
@@ -501,6 +504,8 @@ export default defineComponent({
     });
     watch(getPanelType, resetState);
     return {
+      n,
+      classes,
       monthPanelEl,
       dayPanelEl,
       reverse,

package/es/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/es/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/es/date-picker/src/day-picker-panel.js

@@ -8,31 +8,28 @@ import VarButton from '../../button';
 import { defineComponent, ref, computed, watch, onMounted, reactive } from 'vue';
 import { WEEK_HEADER } from '../props';
 import { toNumber } from '../../utils/shared';
+import { createNamespace } from '../../utils/components';
 import { pack } from '../../locale';
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
-import { resolveComponent as _resolveComponent, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, mergeProps as _mergeProps, withCtx as _withCtx, Transition as _Transition, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _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
+} = createNamespace('day-picker');
+var {
+  n: nDate
+} = createNamespace('date-picker');
+import { resolveComponent as _resolveComponent, createVNode as _createVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, createTextVNode as _createTextVNode, mergeProps as _mergeProps, withCtx as _withCtx, Transition as _Transition } from "vue";
 export function render(_ctx, _cache) {
   var _component_panel_header = _resolveComponent("panel-header");
 
   var _component_var_button = _resolveComponent("var-button");
 
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", _hoisted_2, [_createVNode(_component_panel_header, {
+  return _openBlock(), _createElementBlock("div", {
+    class: _normalizeClass(_ctx.n())
+  }, [_createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('content'))
+  }, [_createVNode(_component_panel_header, {
     ref: "headerEl",
     type: "day",
     date: _ctx.preview,
@@ -42,11 +39,13 @@ export function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["date", "disabled", "onCheckPanel", "onCheckDate"]), _createVNode(_Transition, {
-    name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
+    name: "" + _ctx.nDate() + (_ctx.reverse ? '-reverse' : '') + "-translatex"
   }, {
     default: _withCtx(() => [(_openBlock(), _createElementBlock("div", {
       key: _ctx.panelKey
-    }, [_createElementVNode("ul", _hoisted_3, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.sortWeekList, week => {
+    }, [_createElementVNode("ul", {
+      class: _normalizeClass(_ctx.n('head'))
+    }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.sortWeekList, week => {
       return _openBlock(), _createElementBlock("li", {
         key: week.index
       }, _toDisplayString(_ctx.getDayAbbr(week.index)), 1
@@ -54,14 +53,15 @@ export function render(_ctx, _cache) {
       );
     }), 128
     /* KEYED_FRAGMENT */
-    ))]), _createElementVNode("ul", _hoisted_4, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.days, (day, index) => {
+    ))], 2
+    /* CLASS */
+    ), _createElementVNode("ul", {
+      class: _normalizeClass(_ctx.n('body'))
+    }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.days, (day, index) => {
       return _openBlock(), _createElementBlock("li", {
         key: index
       }, [_createVNode(_component_var_button, _mergeProps({
         type: "primary",
-        class: ["var-day-picker__button", {
-          'var-day-picker__button--usable': day > 0
-        }],
         "var-day-picker-cover": "",
         round: "",
         ripple: false
@@ -76,16 +76,22 @@ export 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 */
+  );
 }
 export default defineComponent({
   render,
@@ -233,7 +239,8 @@ export default defineComponent({
         return {
           text: true,
           outline: false,
-          textColor: ''
+          textColor: '',
+          class: n('button')
         };
       }
 
@@ -289,18 +296,16 @@ export default 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')])
       };
     };
 
@@ -312,7 +317,7 @@ export default 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
 
@@ -330,6 +335,8 @@ export default defineComponent({
       initHeader();
     });
     return {
+      n,
+      nDate,
       days,
       reverse,
       headerEl,