@varlet/ui 1.26.5 → 1.26.6

package/es/uploader/Uploader.js

@@ -40,7 +40,7 @@ export function render(_ctx, _cache) {
 
   var _directive_ripple = _resolveDirective("ripple");
 
-  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", _hoisted_2, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.modelValue, f => {
+  return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", _hoisted_2, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.files, f => {
     return _withDirectives((_openBlock(), _createElementBlock("div", {
       class: _normalizeClass(["var-uploader__file var-elevation--2", [f.state === 'loading' ? 'var-uploader--loading' : null]]),
       key: f.id,
@@ -174,6 +174,18 @@ export default defineComponent({
       // expose
       resetValidation
     } = useValidation();
+    var files = computed(() => {
+      var {
+        modelValue,
+        hideList
+      } = props;
+
+      if (hideList) {
+        return [];
+      }
+
+      return modelValue;
+    });
 
     var preview = varFile => {
       var {
@@ -397,6 +409,7 @@ export default defineComponent({
       deep: true
     });
     return {
+      files,
       showPreview,
       currentPreview,
       errorMessage,

package/es/uploader/props.js

@@ -48,6 +48,10 @@ export var props = {
   rules: {
     type: Array
   },
+  hideList: {
+    type: Boolean,
+    default: false
+  },
   onBeforeRead: {
     type: Function
   },

package/es/varlet.esm.js

@@ -6684,7 +6684,7 @@ function render$E(_ctx, _cache) {
         "var-month-picker-cover": "",
         ripple: false
       }, _extends$8({}, _ctx.buttonProps(month.index)), {
-        onClick: ($event) => _ctx.chooseMonth(month)
+        onClick: (event) => _ctx.chooseMonth(month, event)
       }), {
         default: withCtx(() => [createTextVNode(toDisplayString(_ctx.getMonthAbbr(month.index)), 1)]),
         _: 2
@@ -6841,15 +6841,20 @@ var MonthPickerPanel = defineComponent({
       };
       var isCover = textColorOrCover().startsWith("var-date-picker");
       return {
-        disabled,
         outline: computeOutline(),
         text: computeText(),
         color: !computeText() ? color : "",
         textColor: isCover ? "" : textColorOrCover(),
-        "var-date-picker-color-cover": isCover
+        "var-date-picker-color-cover": isCover,
+        class: {
+          "var-month-picker__button-disabled": disabled
+        }
       };
     };
-    var chooseMonth = (month) => {
+    var chooseMonth = (month, event) => {
+      var buttonEl = event.currentTarget;
+      if (buttonEl.classList.contains("var-month-picker__button-disabled"))
+        return;
       emit("choose-month", month);
     };
     var checkDate = (checkType) => {
@@ -7030,7 +7035,7 @@ function render$C(_ctx, _cache) {
         round: "",
         ripple: false
       }, _extends$7({}, _ctx.buttonProps(day)), {
-        onClick: ($event) => _ctx.chooseDay(day)
+        onClick: (event) => _ctx.chooseDay(day, event)
       }), {
         default: withCtx(() => [createTextVNode(toDisplayString(_ctx.filterDay(day)), 1)]),
         _: 2
@@ -7235,11 +7240,13 @@ var DayPickerPanel = defineComponent({
       };
       var isCover = textColorOrCover().startsWith("var-date-picker");
       return {
-        disabled,
         text: computeText(),
         outline: computeOutline(),
         textColor: isCover ? "" : textColorOrCover(),
-        "var-date-picker-color-cover": isCover
+        "var-date-picker-color-cover": isCover,
+        class: {
+          "var-day-picker__button-disabled": disabled
+        }
       };
     };
     var checkDate = (checkType) => {
@@ -7247,7 +7254,10 @@ var DayPickerPanel = defineComponent({
       panelKey.value += checkType === "prev" ? -1 : 1;
       emit("check-preview", "month", checkType);
     };
-    var chooseDay = (day) => {
+    var chooseDay = (day, event) => {
+      var buttonEl = event.currentTarget;
+      if (buttonEl.classList.contains("var-day-picker__button-disabled"))
+        return;
       emit("choose-day", day);
     };
     var forwardRef = (checkType) => {
@@ -7531,8 +7541,10 @@ var DatePicker = defineComponent({
       if (isUntouchable.value || touchDirection !== "x")
         return;
       var componentRef = getPanelType.value === "month" ? monthPanelEl : dayPanelEl;
-      componentRef.value.forwardRef(checkType);
-      resetState();
+      nextTickFrame(() => {
+        componentRef.value.forwardRef(checkType);
+        resetState();
+      });
     };
     var updateRange = (date, type) => {
       var rangeDate = type === "month" ? chooseRangeMonth : chooseRangeDay;
@@ -16121,6 +16133,10 @@ var props = {
   rules: {
     type: Array
   },
+  hideList: {
+    type: Boolean,
+    default: false
+  },
   onBeforeRead: {
     type: Function
   },
@@ -16189,7 +16205,7 @@ function render(_ctx, _cache) {
   var _component_var_form_details = resolveComponent("var-form-details");
   var _component_var_popup = resolveComponent("var-popup");
   var _directive_ripple = resolveDirective("ripple");
-  return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.modelValue, (f) => {
+  return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.files, (f) => {
     return withDirectives((openBlock(), createElementBlock("div", {
       class: normalizeClass(["var-uploader__file var-elevation--2", [f.state === "loading" ? "var-uploader--loading" : null]]),
       key: f.id,
@@ -16296,6 +16312,16 @@ var Uploader = defineComponent({
       validate: v,
       resetValidation
     } = useValidation();
+    var files = computed(() => {
+      var {
+        modelValue,
+        hideList
+      } = props2;
+      if (hideList) {
+        return [];
+      }
+      return modelValue;
+    });
     var preview = (varFile) => {
       var {
         disabled,
@@ -16388,8 +16414,8 @@ var Uploader = defineComponent({
           var limit = Math.min(varFiles2.length, toNumber(maxlength) - modelValue.length);
           return varFiles2.slice(0, limit);
         };
-        var files = getFiles(event);
-        var varFiles = files.map(createVarFile);
+        var files2 = getFiles(event);
+        var varFiles = files2.map(createVarFile);
         varFiles = maxsize != null ? getValidSizeVarFile(varFiles) : varFiles;
         varFiles = maxlength != null ? getValidLengthVarFiles(varFiles) : varFiles;
         var resolvedVarFiles = yield Promise.all(getResolvers(varFiles));
@@ -16477,6 +16503,7 @@ var Uploader = defineComponent({
       deep: true
     });
     return {
+      files,
       showPreview,
       currentPreview,
       errorMessage,
@@ -16584,9 +16611,9 @@ var skeleton = "";
 var SkeletonSfc = "";
 var slider = "";
 var SliderSfc = "";
-var SnackbarSfc = "";
 var snackbar = "";
 var coreSfc = "";
+var SnackbarSfc = "";
 var space = "";
 var step = "";
 var StepSfc = "";

package/highlight/attributes.json

@@ -1747,6 +1747,10 @@
     "type": "boolean",
     "description": "是否开启水波纹 默认值：true"
   },
+  "var-uploader/hide-list": {
+    "type": "boolean",
+    "description": "是否隐藏文件列表 默认值：false"
+  },
   "var-uploader/validate-trigger": {
     "type": "ValidateTriggers[]",
     "description": "触发验证的时机， 可选值为 `onChange` `onRemove` 默认值：['onChange', 'onRemove']"

package/highlight/tags.json

@@ -679,6 +679,7 @@
       "maxsize",
       "previewed",
       "ripple",
+      "hide-list",
       "validate-trigger",
       "rules"
     ]

package/highlight/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "1.26.4",
+  "version": "1.26.5",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -5172,6 +5172,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "hide-list",
+              "description": "是否隐藏文件列表",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "validate-trigger",
               "description": "触发验证的时机， 可选值为 `onChange` `onRemove`",

package/lib/date-picker/DatePicker.js

@@ -18,6 +18,8 @@ var _props = require("./props");
 
 var _shared = require("../utils/shared");
 
+var _elements = require("../utils/elements");
+
 var _locale = require("../locale");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -324,8 +326,10 @@ var _default = (0, _vue.defineComponent)({
     var handleTouchend = () => {
       if (isUntouchable.value || touchDirection !== 'x') return;
       var componentRef = getPanelType.value === 'month' ? monthPanelEl : dayPanelEl;
-      componentRef.value.forwardRef(checkType);
-      resetState();
+      (0, _elements.nextTickFrame)(() => {
+        componentRef.value.forwardRef(checkType);
+        resetState();
+      });
     };
 
     var updateRange = (date, type) => {

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

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

@@ -197,6 +197,11 @@
     &__button[var-date-picker-color-cover='true'] {
       color: var(--date-picker-main-color);
     }
+
+    &__button-disabled {
+      color: var(--color-text-disabled) !important;
+      cursor: not-allowed;
+    }
   }
 
   .var-year-picker {
@@ -259,6 +264,11 @@
     &__button[var-date-picker-color-cover='true'] {
       color: var(--date-picker-main-color);
     }
+
+    &__button-disabled {
+      color: var(--color-text-disabled) !important;
+      cursor: not-allowed;
+    }
   }
 
   &-translatey-enter-from {

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

@@ -84,7 +84,7 @@ function render(_ctx, _cache) {
         round: "",
         ripple: false
       }, _extends({}, _ctx.buttonProps(day)), {
-        onClick: $event => _ctx.chooseDay(day)
+        onClick: event => _ctx.chooseDay(day, event)
       }), {
         default: (0, _vue.withCtx)(() => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.filterDay(day)), 1
         /* TEXT */
@@ -314,11 +314,13 @@ var _default = (0, _vue.defineComponent)({
 
       var isCover = textColorOrCover().startsWith('var-date-picker');
       return {
-        disabled,
         text: computeText(),
         outline: computeOutline(),
         textColor: isCover ? '' : textColorOrCover(),
-        'var-date-picker-color-cover': isCover
+        'var-date-picker-color-cover': isCover,
+        class: {
+          'var-day-picker__button-disabled': disabled
+        }
       };
     };
 
@@ -328,7 +330,9 @@ var _default = (0, _vue.defineComponent)({
       emit('check-preview', 'month', checkType);
     };
 
-    var chooseDay = day => {
+    var chooseDay = (day, event) => {
+      var buttonEl = event.currentTarget;
+      if (buttonEl.classList.contains('var-day-picker__button-disabled')) return;
       emit('choose-day', day);
     }; // expose for internal
 

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

@@ -67,7 +67,7 @@ function render(_ctx, _cache) {
         "var-month-picker-cover": "",
         ripple: false
       }, _extends({}, _ctx.buttonProps(month.index)), {
-        onClick: $event => _ctx.chooseMonth(month)
+        onClick: event => _ctx.chooseMonth(month, event)
       }), {
         default: (0, _vue.withCtx)(() => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.getMonthAbbr(month.index)), 1
         /* TEXT */
@@ -240,16 +240,20 @@ var _default = (0, _vue.defineComponent)({
 
       var isCover = textColorOrCover().startsWith('var-date-picker');
       return {
-        disabled,
         outline: computeOutline(),
         text: computeText(),
         color: !computeText() ? color : '',
         textColor: isCover ? '' : textColorOrCover(),
-        'var-date-picker-color-cover': isCover
+        'var-date-picker-color-cover': isCover,
+        class: {
+          'var-month-picker__button-disabled': disabled
+        }
       };
     };
 
-    var chooseMonth = month => {
+    var chooseMonth = (month, event) => {
+      var buttonEl = event.currentTarget;
+      if (buttonEl.classList.contains('var-month-picker__button-disabled')) return;
       emit('choose-month', month);
     };