@varlet/ui 1.26.4 → 1.26.5

package/highlight/attributes.json

@@ -527,6 +527,10 @@
     "type": "boolean",
     "description": "是否支持选择一个范围 默认值：false"
   },
+  "var-date-picker/touchable": {
+    "type": "boolean",
+    "description": "是否支持拖动切换面板 默认值：true"
+  },
   "var-dialog/v-model:show": {
     "type": "boolean",
     "description": "是否显示对话框 默认值：false"

package/highlight/tags.json

@@ -192,7 +192,8 @@
       "show-current",
       "readonly",
       "multiple",
-      "range"
+      "range",
+      "touchable"
     ]
   },
   "var-dialog": {

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.3",
+  "version": "1.26.4",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -1542,6 +1542,15 @@
                 "type": "boolean",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "touchable",
+              "description": "是否支持拖动切换面板",
+              "default": "true",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
             }
           ],
           "events": [
@@ -2186,6 +2195,10 @@
             {
               "name": "close-icon",
               "description": "关闭按钮"
+            },
+            {
+              "name": "extra",
+              "description": "额外插槽"
             }
           ]
         },

package/lib/date-picker/DatePicker.js

@@ -22,12 +22,6 @@ 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-date-picker-body"
-};
-
 function render(_ctx, _cache) {
   var _component_year_picker_panel = (0, _vue.resolveComponent)("year-picker-panel");
 
@@ -105,18 +99,30 @@ function render(_ctx, _cache) {
   /* CLASS */
   )], 4
   /* STYLE */
-  ), (0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.createVNode)(_vue.Transition, {
+  ), (0, _vue.createElementVNode)("div", {
+    class: "var-date-picker-body",
+    onTouchstart: _cache[2] || (_cache[2] = function () {
+      return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
+    }),
+    onTouchmove: _cache[3] || (_cache[3] = function () {
+      return _ctx.handleTouchmove && _ctx.handleTouchmove(...arguments);
+    }),
+    onTouchend: _cache[4] || (_cache[4] = function () {
+      return _ctx.handleTouchend && _ctx.handleTouchend(...arguments);
+    })
+  }, [(0, _vue.createVNode)(_vue.Transition, {
     name: "var-date-picker-panel-fade"
   }, {
-    default: (0, _vue.withCtx)(() => [_ctx.isYearPanel ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_year_picker_panel, {
+    default: (0, _vue.withCtx)(() => [_ctx.getPanelType === 'year' ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_year_picker_panel, {
       key: 0,
       "component-props": _ctx.componentProps,
       preview: _ctx.previewYear,
       onChooseYear: _ctx.getChooseYear
     }, null, 8
     /* PROPS */
-    , ["component-props", "preview", "onChooseYear"])) : !_ctx.isYearPanel && _ctx.type === 'month' || _ctx.isMonthPanel ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_month_picker_panel, {
+    , ["component-props", "preview", "onChooseYear"])) : _ctx.getPanelType === 'month' ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_month_picker_panel, {
       key: 1,
+      ref: "monthPanelEl",
       current: _ctx.currentDate,
       choose: _ctx.getChoose,
       preview: _ctx.getPreview,
@@ -126,8 +132,9 @@ function render(_ctx, _cache) {
       onCheckPreview: _ctx.checkPreview
     }, null, 8
     /* PROPS */
-    , ["current", "choose", "preview", "click-year", "component-props", "onChooseMonth", "onCheckPreview"])) : !_ctx.isYearPanel && !_ctx.isMonthPanel && _ctx.type === 'date' ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_day_picker_panel, {
+    , ["current", "choose", "preview", "click-year", "component-props", "onChooseMonth", "onCheckPreview"])) : _ctx.getPanelType === 'date' ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_day_picker_panel, {
       key: 2,
+      ref: "dayPanelEl",
       current: _ctx.currentDate,
       choose: _ctx.getChoose,
       preview: _ctx.getPreview,
@@ -141,7 +148,9 @@ function render(_ctx, _cache) {
     _: 1
     /* STABLE */
 
-  })])], 2
+  })], 32
+  /* HYDRATE_EVENTS */
+  )], 2
   /* CLASS */
   );
 }
@@ -157,6 +166,10 @@ var _default = (0, _vue.defineComponent)({
   props: _props.props,
 
   setup(props) {
+    var startX = 0;
+    var startY = 0;
+    var checkType = '';
+    var touchDirection;
     var currentDate = (0, _dayjs.default)().format('YYYY-MM-D');
     var [currentYear, currentMonth] = currentDate.split('-');
 
@@ -175,6 +188,8 @@ var _default = (0, _vue.defineComponent)({
     var chooseDays = (0, _vue.ref)([]);
     var chooseRangeMonth = (0, _vue.ref)([]);
     var chooseRangeDay = (0, _vue.ref)([]);
+    var monthPanelEl = (0, _vue.ref)(null);
+    var dayPanelEl = (0, _vue.ref)(null);
     var componentProps = (0, _vue.reactive)({
       allowedDates: props.allowedDates,
       type: props.type,
@@ -244,6 +259,15 @@ var _default = (0, _vue.defineComponent)({
       if (_locale.pack.value.lang === 'zh-CN') return chooseMonth.value.index + "-" + showDay + " " + weekName.slice(0, 3);
       return weekName.slice(0, 3) + ", " + monthName.slice(0, 3) + " " + chooseDay.value;
     });
+    var getPanelType = (0, _vue.computed)(() => {
+      if (isYearPanel.value) return 'year';
+      if (props.type === 'month' || isMonthPanel.value) return 'month';
+      if (props.type === 'date') return 'date';
+      return '';
+    });
+    var isUntouchable = (0, _vue.computed)(() => {
+      return !props.touchable || ['', 'year'].includes(getPanelType.value);
+    });
     var slotProps = (0, _vue.computed)(() => {
       var _chooseMonth$value, _chooseDay$value, _chooseYear$value, _chooseMonth$value$in, _chooseMonth$value2;
 
@@ -271,6 +295,39 @@ var _default = (0, _vue.defineComponent)({
       }
     };
 
+    var handleTouchstart = event => {
+      if (isUntouchable.value) return;
+      var {
+        clientX,
+        clientY
+      } = event.touches[0];
+      startX = clientX;
+      startY = clientY;
+    };
+
+    var getDirection = (x, y) => {
+      return x >= y && x > 20 ? 'x' : 'y';
+    };
+
+    var handleTouchmove = event => {
+      if (isUntouchable.value) return;
+      var {
+        clientX,
+        clientY
+      } = event.touches[0];
+      var x = clientX - startX;
+      var y = clientY - startY;
+      touchDirection = getDirection(Math.abs(x), Math.abs(y));
+      checkType = x > 0 ? 'prev' : 'next';
+    };
+
+    var handleTouchend = () => {
+      if (isUntouchable.value || touchDirection !== 'x') return;
+      var componentRef = getPanelType.value === 'month' ? monthPanelEl : dayPanelEl;
+      componentRef.value.forwardRef(checkType);
+      resetState();
+    };
+
     var updateRange = (date, type) => {
       var rangeDate = type === 'month' ? chooseRangeMonth : chooseRangeDay;
       rangeDate.value = rangeDone.value ? [date, date] : [rangeDate.value[0], date];
@@ -438,6 +495,13 @@ var _default = (0, _vue.defineComponent)({
       previewYear.value = yearValue;
     };
 
+    var resetState = () => {
+      startY = 0;
+      startX = 0;
+      checkType = '';
+      touchDirection = undefined;
+    };
+
     (0, _vue.watch)(() => props.modelValue, value => {
       if (!checkValue() || invalidFormatDate(value) || !value) return;
 
@@ -454,7 +518,10 @@ var _default = (0, _vue.defineComponent)({
     }, {
       immediate: true
     });
+    (0, _vue.watch)(getPanelType, resetState);
     return {
+      monthPanelEl,
+      dayPanelEl,
       reverse,
       currentDate,
       chooseMonth,
@@ -465,12 +532,16 @@ var _default = (0, _vue.defineComponent)({
       isMonthPanel,
       getMonthTitle,
       getDateTitle,
+      getPanelType,
       getChoose,
       getPreview,
       componentProps,
       slotProps,
       formatRange,
       clickEl,
+      handleTouchstart,
+      handleTouchmove,
+      handleTouchend,
       getChooseDay,
       getChooseMonth,
       getChooseYear,

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

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

@@ -162,6 +162,7 @@
       overflow: hidden;
       font-weight: 700;
       cursor: pointer;
+      user-select: none;
 
       div {
         width: 100%;

package/lib/date-picker/props.js

@@ -97,6 +97,10 @@ var props = {
     type: Boolean,
     default: false
   },
+  touchable: {
+    type: Boolean,
+    default: true
+  },
   onChange: {
     type: Function
   },

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

@@ -51,6 +51,7 @@ function render(_ctx, _cache) {
   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, {
+    ref: "headerEl",
     type: "day",
     date: _ctx.preview,
     disabled: _ctx.panelBtnDisabled,
@@ -144,6 +145,7 @@ var _default = (0, _vue.defineComponent)({
     var days = (0, _vue.ref)([]);
     var reverse = (0, _vue.ref)(false);
     var panelKey = (0, _vue.ref)(0);
+    var headerEl = (0, _vue.ref)(null);
     var panelBtnDisabled = (0, _vue.reactive)({
       left: false,
       right: false
@@ -328,6 +330,11 @@ var _default = (0, _vue.defineComponent)({
 
     var chooseDay = day => {
       emit('choose-day', day);
+    }; // expose for internal
+
+
+    var forwardRef = checkType => {
+      headerEl.value.checkDate(checkType);
     };
 
     (0, _vue.onMounted)(() => {
@@ -341,9 +348,11 @@ var _default = (0, _vue.defineComponent)({
     return {
       days,
       reverse,
+      headerEl,
       panelKey,
       sortWeekList,
       panelBtnDisabled,
+      forwardRef,
       filterDay,
       getDayAbbr,
       checkDate,

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

@@ -45,6 +45,7 @@ function render(_ctx, _cache) {
   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, {
+    ref: "headerEl",
     type: "month",
     date: _ctx.preview,
     disabled: _ctx.panelBtnDisabled,
@@ -126,6 +127,7 @@ var _default = (0, _vue.defineComponent)({
     var [currentYear, currentMonth] = props.current.split('-');
     var reverse = (0, _vue.ref)(false);
     var panelKey = (0, _vue.ref)(0);
+    var headerEl = (0, _vue.ref)(null);
     var panelBtnDisabled = (0, _vue.reactive)({
       left: false,
       right: false
@@ -255,6 +257,11 @@ var _default = (0, _vue.defineComponent)({
       reverse.value = checkType === 'prev';
       panelKey.value += checkType === 'prev' ? -1 : 1;
       emit('check-preview', 'year', checkType);
+    }; // expose for internal
+
+
+    var forwardRef = checkType => {
+      headerEl.value.checkDate(checkType);
     };
 
     (0, _vue.watch)(() => props.preview.previewYear, year => {
@@ -272,9 +279,11 @@ var _default = (0, _vue.defineComponent)({
     return {
       pack: _locale.pack,
       MONTH_LIST: _props.MONTH_LIST,
+      headerEl,
       reverse,
       panelKey,
       panelBtnDisabled,
+      forwardRef,
       buttonProps,
       getMonthAbbr,
       chooseMonth,

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

@@ -126,6 +126,7 @@ var _default = (0, _vue.defineComponent)({
     });
 
     var checkDate = checkType => {
+      if (checkType === 'prev' && props.disabled.left || checkType === 'next' && props.disabled.right) return;
       emit('check-date', checkType);
       reverse.value = checkType === 'prev';
       forwardOrBackNum.value += checkType === 'prev' ? -1 : 1;

package/lib/image-preview/ImagePreview.js

@@ -32,6 +32,9 @@ var _hoisted_2 = {
   key: 0,
   class: "var-image-preview__indicators"
 };
+var _hoisted_3 = {
+  class: "var-image-preview__extra"
+};
 
 function render(_ctx, _cache) {
   var _component_var_swipe_item = (0, _vue.resolveComponent)("var-swipe-item");
@@ -131,7 +134,7 @@ function render(_ctx, _cache) {
       onClick: _ctx.close
     }, null, 8
     /* PROPS */
-    , ["onClick"])) : (0, _vue.createCommentVNode)("v-if", true)])]),
+    , ["onClick"])) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.createElementVNode)("div", _hoisted_3, [(0, _vue.renderSlot)(_ctx.$slots, "extra")])]),
     _: 3
     /* FORWARDED */
 

package/lib/image-preview/imagePreview.css

@@ -1 +1 @@
-:root { --image-preview-swipe-indicators-text-color: #ddd; --image-preview-swipe-indicators-padding: 16px 0; --image-preview-zoom-container-background: #000; --image-preview-close-icon-top: 13px; --image-preview-close-icon-right: 14px; --image-preview-close-icon-size: 22px; --image-preview-close-icon-color: #fff;}.var-image-preview__popup[var-image-preview-cover] { background: transparent;}.var-image-preview__swipe[var-image-preview-cover] { width: 100vw; height: 100vh;}.var-image-preview__swipe-item[var-image-preview-cover] { overflow: hidden;}.var-image-preview__close-icon[var-image-preview-cover] { position: absolute; top: var(--image-preview-close-icon-top); right: var(--image-preview-close-icon-right); color: var(--image-preview-close-icon-color); font-size: var(--image-preview-close-icon-size);}.var-image-preview__indicators { position: absolute; top: 0; width: 100%; padding: var(--image-preview-swipe-indicators-padding); color: var(--image-preview-swipe-indicators-text-color); text-align: center;}.var-image-preview__image { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none;}.var-image-preview__zoom-container { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; transition: transform 0.2s; background: var(--image-preview-zoom-container-background);}
+:root { --image-preview-swipe-indicators-text-color: #ddd; --image-preview-swipe-indicators-padding: 16px 0; --image-preview-zoom-container-background: #000; --image-preview-close-icon-top: 14px; --image-preview-close-icon-right: 14px; --image-preview-extra-top: 14px; --image-preview-extra-left: 14px; --image-preview-close-icon-size: 22px; --image-preview-close-icon-color: #fff;}.var-image-preview__popup[var-image-preview-cover] { background: transparent;}.var-image-preview__swipe[var-image-preview-cover] { width: 100vw; height: 100vh;}.var-image-preview__swipe-item[var-image-preview-cover] { overflow: hidden;}.var-image-preview__close-icon[var-image-preview-cover] { position: absolute; top: var(--image-preview-close-icon-top); right: var(--image-preview-close-icon-right); color: var(--image-preview-close-icon-color); font-size: var(--image-preview-close-icon-size);}.var-image-preview__extra { position: absolute; top: var(--image-preview-extra-top); left: var(--image-preview-extra-left);}.var-image-preview__indicators { position: absolute; top: 0; width: 100%; padding: var(--image-preview-swipe-indicators-padding); color: var(--image-preview-swipe-indicators-text-color); text-align: center;}.var-image-preview__image { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none;}.var-image-preview__zoom-container { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; transition: transform 0.2s; background: var(--image-preview-zoom-container-background);}

package/lib/image-preview/imagePreview.less

@@ -1,8 +1,10 @@
 @image-preview-swipe-indicators-text-color: #ddd;
 @image-preview-swipe-indicators-padding: 16px 0;
 @image-preview-zoom-container-background: #000;
-@image-preview-close-icon-top: 13px;
+@image-preview-close-icon-top: 14px;
 @image-preview-close-icon-right: 14px;
+@image-preview-extra-top: 14px;
+@image-preview-extra-left: 14px;
 @image-preview-close-icon-size: 22px;
 @image-preview-close-icon-color: #fff;
 
@@ -12,6 +14,8 @@
   --image-preview-zoom-container-background: @image-preview-zoom-container-background;
   --image-preview-close-icon-top: @image-preview-close-icon-top;
   --image-preview-close-icon-right: @image-preview-close-icon-right;
+  --image-preview-extra-top: @image-preview-extra-top;
+  --image-preview-extra-left: @image-preview-extra-left;
   --image-preview-close-icon-size: @image-preview-close-icon-size;
   --image-preview-close-icon-color: @image-preview-close-icon-color;
 }
@@ -38,6 +42,12 @@
     font-size: var(--image-preview-close-icon-size);
   }
 
+  &__extra {
+    position: absolute;
+    top: var(--image-preview-extra-top);
+    left: var(--image-preview-extra-left);
+  }
+
   &__indicators {
     position: absolute;
     top: 0;