@varlet/ui 1.26.4 → 1.26.7

package/README.en-US.md

@@ -9,10 +9,10 @@
   </p>
   <p>
     <img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version">
-    <img src="https://img.shields.io/github/stars/haoziqaq/varlet" alt="ci">
+    <img src="https://img.shields.io/github/stars/varletjs/varlet" alt="stars">
     <img src="https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc" alt="vue">
     <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
-    <img src="https://img.shields.io/codecov/c/github/haoziqaq/varlet" alt="coverage">
+    <img src="https://img.shields.io/codecov/c/github/varletjs/varlet" alt="coverage">
     <img src="https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip" alt="gzip" />
     <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
   </p>
@@ -26,17 +26,17 @@ Varlet is a Material design mobile component library developed based on `Vue3`,
 
 
 ### Features
- 1. Provide 50 high quality general purpose components
- 2. Components are very lightweight
- 3. Developed by Chinese, complete Chinese and English documentation and logistics support
- 4. Support on-demand introduction
- 5. Support theme customization
- 6. Support internationalization
- 7. Support WebStorm, VS Code component syntax highlighting
- 8. Support the SSR
- 9. Support the Typescript
- 10. Make sure more than 90 percent unit test coverage, providing stability assurance
- 11. Support dark mode
+- 🚀 Provide 50 high quality general purpose components
+- 🚀 Components are very lightweight
+- 💪 Developed by Chinese, complete Chinese and English documentation and logistics support
+- 🛠️ Support on-demand introduction
+- 🛠️ Support theme customization
+- 🌍 Support internationalization
+- 💡 Support WebStorm, VS Code component syntax highlighting
+- 💪 Support the SSR
+- 💡 Support the Typescript
+- 💪 Make sure more than 90 percent unit test coverage, providing stability assurance
+- 🛠️ Support dark mode
 
 ### Install
 
@@ -56,7 +56,6 @@ Varlet is a Material design mobile component library developed based on `Vue3`,
 ```
 
 ### Webpack / Vite
-
 ```shell
 # Install with npm or yarn or pnpm
 
@@ -83,4 +82,4 @@ createApp(App).use(Varlet).mount('#app')
 
 <a href="https://github.com/varletjs/varlet/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=haoziqaq/varlet" />
-</a>
+</a>

package/README.md

@@ -3,16 +3,16 @@
     <img src="https://varlet.gitee.io/varlet-ui/logo.svg" width="150">
   </a>
   <h1>VARLET</h1>
-  <p>基于Vue3的Material design风格移动端组件库</p>
+  <p>基于 Vue3 的 Material design 风格移动端组件库</p>
   <p>
     <a href="https://varlet.gitee.io/varlet-ui/">开发文档</a> | <a href="https://github.com/varletjs/varlet/blob/dev/README.en-US.md">English</a>
   </p>
   <p>
     <img src="https://img.shields.io/npm/v/@varlet/ui?style=flat-square" alt="version">
-    <img src="https://img.shields.io/github/stars/haoziqaq/varlet" alt="ci">
+    <img src="https://img.shields.io/github/stars/varletjs/varlet" alt="stars">
     <img src="https://img.shields.io/badge/vue-v3.2.0%2B-%23407fbc" alt="vue">
     <img src="https://img.shields.io/npm/l/@varlet/ui.svg" alt="licence">
-    <img src="https://img.shields.io/codecov/c/github/haoziqaq/varlet" alt="coverage">
+    <img src="https://img.shields.io/codecov/c/github/varletjs/varlet" alt="coverage">
     <img src="https://img.badgesize.io/https://unpkg.com/@varlet/ui/umd/varlet.js?compression=gzip&label=gzip" alt="gzip" />
     <img src="https://github.com/varletjs/varlet/workflows/CI/badge.svg" alt="ci">
   </p>
@@ -22,25 +22,25 @@
 
 ### 介绍
 
-Varlet是一个基于`Vue3`开发的Material风格移动端组件库，全面拥抱`Vue3`生态，由社区建立起来的组件库团队进行维护。
+Varlet 是一个基于 `Vue3` 开发的 Material 风格移动端组件库，全面拥抱 `Vue3` 生态，由社区建立起来的组件库团队进行维护。
 
 ### 特性
-1. 提供50个高质量通用组件
-2. 组件十分轻量
-3. 由国人开发，完善的中英文文档和后勤保障
-4. 支持按需引入
-5. 支持主题定制
-6. 支持国际化
-7. 支持webstorm，vscode组件属性高亮
-8. 支持SSR
-9. 支持Typescript
-10. 确保90%以上单元测试覆盖率，提供稳定性保证
-11. 支持暗黑模式
+- 🚀 提供50个高质量通用组件 
+- 🚀 组件十分轻量
+- 💪 由国人开发，完善的中英文文档和后勤保障
+- 🛠️ 支持按需引入
+- 🛠️ 支持主题定制
+- 🌍 支持国际化
+- 💡 支持 webstorm，vscode 组件属性高亮
+- 💪 支持 SSR
+- 💡 支持 Typescript 
+- 💪 确保90%以上单元测试覆盖率，提供稳定性保证
+- 🛠️ 支持暗黑模式
 
 ### 安装
 
 ### CDN
-`varlet.js`包含组件库的所有样式和逻辑，引入即可。
+`varlet.js` 包含组件库的所有样式和逻辑，引入即可。
 
 ```html
 <div id="app"></div>
@@ -56,7 +56,7 @@ Varlet是一个基于`Vue3`开发的Material风格移动端组件库，全面拥
 
 ### Webpack / Vite
 ```shell
-# 通过npm或yarn或pnpm安装
+# 通过 npm 或 yarn 或 pnpm 安装
 
 # npm
 npm i @varlet/ui -S
@@ -80,5 +80,6 @@ createApp(App).use(Varlet).mount('#app')
 ### Contributors
 
 <a href="https://github.com/varletjs/varlet/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=haoziqaq/varlet" />
+  <img src="https://contrib.rocks/image?repo=varletjs/varlet" />
 </a>
+

package/es/date-picker/DatePicker.js

@@ -5,14 +5,9 @@ import YearPickerPanel from './src/year-picker-panel.js'
 import DayPickerPanel from './src/day-picker-panel.js'
 import { props, MONTH_LIST, WEEK_HEADER } from './props';
 import { isArray, toNumber } from '../utils/shared';
+import { nextTickFrame } from '../utils/elements';
 import { pack } from '../locale';
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeProps as _normalizeProps, mergeProps as _mergeProps, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-
-var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
-
-var _hoisted_1 = {
-  class: "var-date-picker-body"
-};
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, createCommentVNode as _createCommentVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeProps as _normalizeProps, mergeProps as _mergeProps, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, createBlock as _createBlock } from "vue";
 export function render(_ctx, _cache) {
   var _component_year_picker_panel = _resolveComponent("year-picker-panel");
 
@@ -90,18 +85,30 @@ export function render(_ctx, _cache) {
   /* CLASS */
   )], 4
   /* STYLE */
-  ), _createElementVNode("div", _hoisted_1, [_createVNode(_Transition, {
+  ), _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);
+    })
+  }, [_createVNode(_Transition, {
     name: "var-date-picker-panel-fade"
   }, {
-    default: _withCtx(() => [_ctx.isYearPanel ? (_openBlock(), _createBlock(_component_year_picker_panel, {
+    default: _withCtx(() => [_ctx.getPanelType === 'year' ? (_openBlock(), _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 ? (_openBlock(), _createBlock(_component_month_picker_panel, {
+    , ["component-props", "preview", "onChooseYear"])) : _ctx.getPanelType === 'month' ? (_openBlock(), _createBlock(_component_month_picker_panel, {
       key: 1,
+      ref: "monthPanelEl",
       current: _ctx.currentDate,
       choose: _ctx.getChoose,
       preview: _ctx.getPreview,
@@ -111,8 +118,9 @@ export 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' ? (_openBlock(), _createBlock(_component_day_picker_panel, {
+    , ["current", "choose", "preview", "click-year", "component-props", "onChooseMonth", "onCheckPreview"])) : _ctx.getPanelType === 'date' ? (_openBlock(), _createBlock(_component_day_picker_panel, {
       key: 2,
+      ref: "dayPanelEl",
       current: _ctx.currentDate,
       choose: _ctx.getChoose,
       preview: _ctx.getPreview,
@@ -126,7 +134,9 @@ export function render(_ctx, _cache) {
     _: 1
     /* STABLE */
 
-  })])], 2
+  })], 32
+  /* HYDRATE_EVENTS */
+  )], 2
   /* CLASS */
   );
 }
@@ -141,6 +151,10 @@ export default defineComponent({
   props,
 
   setup(props) {
+    var startX = 0;
+    var startY = 0;
+    var checkType = '';
+    var touchDirection;
     var currentDate = dayjs().format('YYYY-MM-D');
     var [currentYear, currentMonth] = currentDate.split('-');
     var monthDes = MONTH_LIST.find(month => month.index === currentMonth);
@@ -157,6 +171,8 @@ export default defineComponent({
     var chooseDays = ref([]);
     var chooseRangeMonth = ref([]);
     var chooseRangeDay = ref([]);
+    var monthPanelEl = ref(null);
+    var dayPanelEl = ref(null);
     var componentProps = reactive({
       allowedDates: props.allowedDates,
       type: props.type,
@@ -224,6 +240,15 @@ export default defineComponent({
       if (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 = computed(() => {
+      if (isYearPanel.value) return 'year';
+      if (props.type === 'month' || isMonthPanel.value) return 'month';
+      if (props.type === 'date') return 'date';
+      return '';
+    });
+    var isUntouchable = computed(() => {
+      return !props.touchable || ['', 'year'].includes(getPanelType.value);
+    });
     var slotProps = computed(() => {
       var _chooseMonth$value, _chooseDay$value, _chooseYear$value, _chooseMonth$value$in, _chooseMonth$value2;
 
@@ -251,6 +276,41 @@ export default 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;
+      nextTickFrame(() => {
+        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];
@@ -416,6 +476,13 @@ export default defineComponent({
       previewYear.value = yearValue;
     };
 
+    var resetState = () => {
+      startY = 0;
+      startX = 0;
+      checkType = '';
+      touchDirection = undefined;
+    };
+
     watch(() => props.modelValue, value => {
       if (!checkValue() || invalidFormatDate(value) || !value) return;
 
@@ -432,7 +499,10 @@ export default defineComponent({
     }, {
       immediate: true
     });
+    watch(getPanelType, resetState);
     return {
+      monthPanelEl,
+      dayPanelEl,
       reverse,
       currentDate,
       chooseMonth,
@@ -443,12 +513,16 @@ export default defineComponent({
       isMonthPanel,
       getMonthTitle,
       getDateTitle,
+      getPanelType,
       getChoose,
       getPreview,
       componentProps,
       slotProps,
       formatRange,
       clickEl,
+      handleTouchstart,
+      handleTouchmove,
+      handleTouchend,
       getChooseDay,
       getChooseMonth,
       getChooseYear,

package/es/date-picker/date-picker.css

@@ -1 +1 @@
-:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-height: 385px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-body-background-color: rgba(0, 0, 0, 0); --picker-header-padding: 4px 16px; --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-font-weight: 400; --year-picker-item-padding: 8px 0; --year-picker-item-active-font-size: 26px; --year-picker-item-active-font-weight: 500; --year-picker-item-active-font-padding: 10px 0; --year-picker-item-active-color: var(--color-primary); --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; flex-direction: column; font-size: var(--date-picker-font-size); position: relative; min-width: var(--date-picker-min-width); height: var(--date-picker-height); overflow: hidden;}.var-date-picker ul { list-style: none; margin: 0; padding: 0;}.var-date-picker-title { padding: var(--date-picker-title-padding); color: var(--date-picker-title-color); background: var(--date-picker-title-background); display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap;}.var-date-picker-title__year { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); align-items: center; display: inline-flex; font-size: var(--date-picker-title-year-font-size); font-weight: var(--date-picker-title-year-font-weight); margin-bottom: var(--date-picker-title-year-margin-bottom); transition: 0.3s var(--cubic-bezier);}.var-date-picker-title__year--active { opacity: 1;}.var-date-picker-title__date { height: var(--date-picker-title-date-height); overflow: hidden; font-size: var(--date-picker-title-date-font-size); text-align: left; font-weight: var(--date-picker-title-date-font-weight); position: relative; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: flex; align-items: center; opacity: 0.6; transition: 0.3s var(--cubic-bezier);}.var-date-picker-title__date--active { opacity: 1;}.var-date-picker-title__date--range { font-size: var(--date-picker-title-date-range-font-size);}.var-date-picker-body { flex: 1; position: relative; overflow: auto; background-color: var(--date-picker-body-background-color);}.var-date-picker .var-picker-header { padding: var(--picker-header-padding); align-items: center; display: flex; justify-content: space-between; position: relative;}.var-date-picker .var-picker-header__value { flex: 1; text-align: center; position: relative; overflow: hidden; font-weight: 700; cursor: pointer;}.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/es/date-picker/date-picker.less

@@ -162,6 +162,7 @@
       overflow: hidden;
       font-weight: 700;
       cursor: pointer;
+      user-select: none;
 
       div {
         width: 100%;
@@ -196,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 {
@@ -258,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/es/date-picker/props.js

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

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

@@ -33,6 +33,7 @@ export function render(_ctx, _cache) {
   var _component_var_button = _resolveComponent("var-button");
 
   return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", _hoisted_2, [_createVNode(_component_panel_header, {
+    ref: "headerEl",
     type: "day",
     date: _ctx.preview,
     disabled: _ctx.panelBtnDisabled,
@@ -65,7 +66,7 @@ export function render(_ctx, _cache) {
         round: "",
         ripple: false
       }, _extends({}, _ctx.buttonProps(day)), {
-        onClick: $event => _ctx.chooseDay(day)
+        onClick: event => _ctx.chooseDay(day, event)
       }), {
         default: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.filterDay(day)), 1
         /* TEXT */
@@ -125,6 +126,7 @@ export default defineComponent({
     var days = ref([]);
     var reverse = ref(false);
     var panelKey = ref(0);
+    var headerEl = ref(null);
     var panelBtnDisabled = reactive({
       left: false,
       right: false
@@ -292,11 +294,13 @@ export default 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
+        }
       };
     };
 
@@ -306,8 +310,15 @@ export default 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
+
+
+    var forwardRef = checkType => {
+      headerEl.value.checkDate(checkType);
     };
 
     onMounted(() => {
@@ -321,9 +332,11 @@ export default defineComponent({
     return {
       days,
       reverse,
+      headerEl,
       panelKey,
       sortWeekList,
       panelBtnDisabled,
+      forwardRef,
       filterDay,
       getDayAbbr,
       checkDate,

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

@@ -27,6 +27,7 @@ export function render(_ctx, _cache) {
   var _component_var_button = _resolveComponent("var-button");
 
   return _openBlock(), _createElementBlock("div", _hoisted_1, [_createElementVNode("div", _hoisted_2, [_createVNode(_component_panel_header, {
+    ref: "headerEl",
     type: "month",
     date: _ctx.preview,
     disabled: _ctx.panelBtnDisabled,
@@ -48,7 +49,7 @@ export 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: _withCtx(() => [_createTextVNode(_toDisplayString(_ctx.getMonthAbbr(month.index)), 1
         /* TEXT */
@@ -107,6 +108,7 @@ export default defineComponent({
     var [currentYear, currentMonth] = props.current.split('-');
     var reverse = ref(false);
     var panelKey = ref(0);
+    var headerEl = ref(null);
     var panelBtnDisabled = reactive({
       left: false,
       right: false
@@ -219,16 +221,20 @@ export default 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);
     };
 
@@ -236,6 +242,11 @@ export default 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);
     };
 
     watch(() => props.preview.previewYear, year => {
@@ -253,9 +264,11 @@ export default defineComponent({
     return {
       pack,
       MONTH_LIST,
+      headerEl,
       reverse,
       panelKey,
       panelBtnDisabled,
+      forwardRef,
       buttonProps,
       getMonthAbbr,
       chooseMonth,

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

@@ -113,6 +113,7 @@ export default 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/es/image-preview/ImagePreview.js

@@ -18,6 +18,9 @@ var _hoisted_2 = {
   key: 0,
   class: "var-image-preview__indicators"
 };
+var _hoisted_3 = {
+  class: "var-image-preview__extra"
+};
 export function render(_ctx, _cache) {
   var _component_var_swipe_item = _resolveComponent("var-swipe-item");
 
@@ -116,7 +119,7 @@ export function render(_ctx, _cache) {
       onClick: _ctx.close
     }, null, 8
     /* PROPS */
-    , ["onClick"])) : _createCommentVNode("v-if", true)])]),
+    , ["onClick"])) : _createCommentVNode("v-if", true)]), _createElementVNode("div", _hoisted_3, [_renderSlot(_ctx.$slots, "extra")])]),
     _: 3
     /* FORWARDED */
 

package/es/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/es/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;