@varlet/ui 1.26.2 → 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"
@@ -1203,6 +1207,10 @@
     "type": "string",
     "description": "半选时图标的样式，只有在 `half` 为 `true` 时才有效 默认值：star-half-full"
   },
+  "var-rate/namespace": {
+    "type": "string",
+    "description": "图标的命名空间, 可扩展自定义图标库 默认值：var-icon"
+  },
   "var-rate/disabled": {
     "type": "boolean",
     "description": "是否禁止评分 默认值：false"

package/highlight/tags.json

@@ -192,7 +192,8 @@
       "show-current",
       "readonly",
       "multiple",
-      "range"
+      "range",
+      "touchable"
     ]
   },
   "var-dialog": {
@@ -455,6 +456,7 @@
       "gap",
       "half",
       "half-icon",
+      "namespace",
       "disabled",
       "disabled-color",
       "readonly",

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.1",
+  "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": "额外插槽"
             }
           ]
         },
@@ -3583,6 +3596,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "namespace",
+              "description": "图标的命名空间, 可扩展自定义图标库",
+              "default": "var-icon",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
             {
               "name": "disabled",
               "description": "是否禁止评分",

package/lib/checkbox/Checkbox.js

@@ -171,6 +171,10 @@ var _default = (0, _vue.defineComponent)({
         uncheckedValue
       } = props;
       value.value = values.includes(checkedValue) ? checkedValue : uncheckedValue;
+    };
+
+    var resetWithAnimation = () => {
+      withAnimation.value = false;
     }; // expose
 
 
@@ -210,7 +214,8 @@ var _default = (0, _vue.defineComponent)({
       sync,
       validate,
       resetValidation,
-      reset
+      reset,
+      resetWithAnimation
     };
     bindCheckboxGroup == null ? void 0 : bindCheckboxGroup(checkboxProvider);
     bindForm == null ? void 0 : bindForm(checkboxProvider);

package/lib/checkbox-group/CheckboxGroup.js

@@ -114,7 +114,11 @@ var _default = (0, _vue.defineComponent)({
         sync
       } = _ref;
       return sync(props.modelValue);
-    }); // expose
+    });
+
+    var resetWithAnimation = () => {
+      checkboxes.forEach(checkbox => checkbox.resetWithAnimation());
+    }; // expose
 
 
     var checkAll = () => {
@@ -127,6 +131,7 @@ var _default = (0, _vue.defineComponent)({
         return checkedValue.value;
       });
       var changedModelValue = (0, _shared.uniq)(checkedValues);
+      resetWithAnimation();
       (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, changedModelValue);
       return changedModelValue;
     }; // expose
@@ -147,6 +152,7 @@ var _default = (0, _vue.defineComponent)({
         return checkedValue.value;
       });
       var changedModelValue = (0, _shared.uniq)(checkedValues);
+      resetWithAnimation();
       (_props$onUpdateModel3 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel3.call(props, changedModelValue);
       return changedModelValue;
     }; // expose

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");
 
@@ -55,7 +49,7 @@ function render(_ctx, _cache) {
     class: (0, _vue.normalizeClass)(["var-date-picker-title__date", [!_ctx.isYearPanel ? 'var-date-picker-title__date--active' : null, _ctx.range ? 'var-date-picker-title__date--range' : null]]),
     onClick: _cache[1] || (_cache[1] = $event => _ctx.clickEl('date'))
   }, [(0, _vue.createVNode)(_vue.Transition, {
-    name: _ctx.multiple ? '' : _ctx.reverse ? 'var-date-picker-reverse-translatey' : 'var-date-picker-translatey'
+    name: _ctx.multiple ? '' : "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatey"
   }, {
     default: (0, _vue.withCtx)(() => {
       var _ctx$chooseMonth, _ctx$chooseMonth2, _ctx$chooseMonth3;
@@ -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,15 +259,25 @@ 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, _chooseYear$value, _chooseMonth$value$in, _chooseMonth$value2, _chooseDay$value;
+      var _chooseMonth$value, _chooseDay$value, _chooseYear$value, _chooseMonth$value$in, _chooseMonth$value2;
 
       var weekIndex = (0, _dayjs.default)(chooseYear.value + "-" + ((_chooseMonth$value = chooseMonth.value) == null ? void 0 : _chooseMonth$value.index) + "-" + chooseDay.value).day();
+      var date = chooseDay.value ? (_chooseDay$value = chooseDay.value) == null ? void 0 : _chooseDay$value.padStart(2, '0') : '';
       return {
         week: "" + weekIndex,
         year: (_chooseYear$value = chooseYear.value) != null ? _chooseYear$value : '',
         month: (_chooseMonth$value$in = (_chooseMonth$value2 = chooseMonth.value) == null ? void 0 : _chooseMonth$value2.index) != null ? _chooseMonth$value$in : '',
-        date: (_chooseDay$value = chooseDay.value) != null ? _chooseDay$value : ''
+        date
       };
     });
     var formatRange = (0, _vue.computed)(() => getChoose.value.chooseRangeDay.map(choose => (0, _dayjs.default)(choose).format('YYYY-MM-DD')));
@@ -270,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];
@@ -437,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;
 
@@ -453,7 +518,10 @@ var _default = (0, _vue.defineComponent)({
     }, {
       immediate: true
     });
+    (0, _vue.watch)(getPanelType, resetState);
     return {
+      monthPanelEl,
+      dayPanelEl,
       reverse,
       currentDate,
       chooseMonth,
@@ -464,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,
@@ -59,7 +60,7 @@ function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["date", "disabled", "onCheckPanel", "onCheckDate"]), (0, _vue.createVNode)(_vue.Transition, {
-    name: _ctx.reverse ? 'var-date-picker-reverse-translatex' : 'var-date-picker-translatex'
+    name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
   }, {
     default: (0, _vue.withCtx)(() => [((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
       key: _ctx.panelKey
@@ -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,
@@ -53,7 +54,7 @@ function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["date", "disabled", "onCheckPanel", "onCheckDate"]), (0, _vue.createVNode)(_vue.Transition, {
-    name: _ctx.reverse ? 'var-date-picker-reverse-translatex' : 'var-date-picker-translatex'
+    name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
   }, {
     default: (0, _vue.withCtx)(() => [((0, _vue.openBlock)(), (0, _vue.createElementBlock)("ul", {
       key: _ctx.panelKey
@@ -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

@@ -48,7 +48,7 @@ function render(_ctx, _cache) {
     class: "var-picker-header__value",
     onClick: _cache[1] || (_cache[1] = $event => _ctx.$emit('check-panel'))
   }, [(0, _vue.createVNode)(_vue.Transition, {
-    name: _ctx.reverse ? 'var-date-picker-reverse-translatex' : 'var-date-picker-translatex'
+    name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
   }, {
     default: (0, _vue.withCtx)(() => [((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
       key: _ctx.showDate
@@ -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

@@ -22,6 +22,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var DISTANCE_OFFSET = 12;
 var EVENT_DELAY = 200;
+var TAP_DELAY = 350;
 var ANIMATION_DURATION = 200;
 
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
@@ -31,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");
@@ -130,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 */
 
@@ -219,11 +223,11 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var isTapTouch = target => {
-      if (!startTouch || !prevTouch) {
+      if (!target || !startTouch || !prevTouch) {
         return false;
       }
 
-      return getDistance(startTouch, prevTouch) <= DISTANCE_OFFSET && (target === startTouch.target || target.parentNode === startTouch.target);
+      return getDistance(startTouch, prevTouch) <= DISTANCE_OFFSET && Date.now() - prevTouch.timestamp < TAP_DELAY && (target === startTouch.target || target.parentNode === startTouch.target);
     };
 
     var handleTouchend = event => {

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;

package/lib/rate/Rate.js

@@ -49,13 +49,14 @@ function render(_ctx, _cache) {
       onClick: $event => _ctx.handleClick(val, $event)
     }, [(0, _vue.createVNode)(_component_var_icon, {
       transition: 0,
+      namespace: _ctx.namespace,
       name: _ctx.getIconName(val),
       style: (0, _vue.normalizeStyle)({
         fontSize: _ctx.toSizeUnit(_ctx.size)
       })
     }, null, 8
     /* PROPS */
-    , ["name", "style"])], 14
+    , ["namespace", "name", "style"])], 14
     /* CLASS, STYLE, PROPS */
     , _hoisted_3)), [[_directive_ripple, {
       disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple

package/lib/rate/props.js

@@ -33,6 +33,9 @@ var props = {
     type: [String, Number],
     default: '2'
   },
+  namespace: {
+    type: String
+  },
   half: {
     type: Boolean,
     default: false