@varlet/ui 1.26.5 → 1.26.8

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/back-top/BackTop.js

@@ -4,13 +4,16 @@ import VarIcon from '../icon';
 import { props } from './props';
 import { isString, easeInOutCubic, throttle, isObject } from '../utils/shared';
 import { getScrollTop, getScrollLeft, scrollTo, getParentScroller, toPxNum, toSizeUnit } from '../utils/elements';
-import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, withModifiers as _withModifiers, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, createVNode as _createVNode, withCtx as _withCtx, withModifiers as _withModifiers, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, Teleport as _Teleport, openBlock as _openBlock, createBlock as _createBlock } from "vue";
 export function render(_ctx, _cache) {
   var _component_var_icon = _resolveComponent("var-icon");
 
   var _component_var_button = _resolveComponent("var-button");
 
-  return _openBlock(), _createElementBlock("div", {
+  return _openBlock(), _createBlock(_Teleport, {
+    to: "body",
+    disabled: _ctx.disabled
+  }, [_createElementVNode("div", {
     class: _normalizeClass(["var-back-top", [_ctx.show ? 'var-back-top--active' : null]]),
     ref: "backTopEl",
     style: _normalizeStyle({
@@ -33,7 +36,9 @@ export function render(_ctx, _cache) {
 
   })])], 6
   /* CLASS, STYLE */
-  );
+  )], 8
+  /* PROPS */
+  , ["disabled"]);
 }
 export default defineComponent({
   render,
@@ -47,6 +52,7 @@ export default defineComponent({
   setup(props) {
     var show = ref(false);
     var backTopEl = ref(null);
+    var disabled = ref(true);
     var target;
 
     var click = event => {
@@ -80,21 +86,20 @@ export default defineComponent({
         return el;
       }
 
-      if (isObject(target)) {
-        return target;
-      }
-
+      if (isObject(target)) return target;
       throw Error('[Varlet] BackTop: type of prop "target" should be a selector or an element object');
     };
 
     onMounted(() => {
       target = props.target ? getTarget() : getParentScroller(backTopEl.value);
       target.addEventListener('scroll', throttleScroll);
+      disabled.value = false;
     });
     onBeforeUnmount(() => {
       target.removeEventListener('scroll', throttleScroll);
     });
     return {
+      disabled,
       show,
       backTopEl,
       toSizeUnit,

package/es/cell/cell.css

@@ -1 +1 @@
-:root { --cell-font-size: var(--font-size-md); --cell-desc-font-size: var(--font-size-sm); --cell-desc-color: rgba(0, 0, 0, 0.6); --cell-padding: 10px 12px; --cell-min-height: 40px; --cell-border-color: #bcc2cb; --cell-border-left: 12px; --cell-border-right: 12px; --cell-icon-right: 8px; --cell-extra-left: 8px;}.var-cell { align-items: center; display: flex; min-height: var(--cell-min-height); outline: none; padding: var(--cell-padding); position: relative; box-sizing: border-box; font-size: var(--cell-font-size);}.var-cell--border::after { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; right: var(--cell-border-right); bottom: 0; left: var(--cell-border-left); border-bottom: 1px solid var(--cell-border-color); transform: scaleY(0.5);}.var-cell__icon { margin-right: var(--cell-icon-right); flex: 0;}.var-cell__content { flex: 1; overflow: hidden;}.var-cell__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.var-cell__desc { font-size: var(--cell-desc-font-size); color: var(--cell-desc-color);}.var-cell__extra { flex: 0; margin-left: var(--cell-extra-left);}
+:root { --cell-color: var(--color-text); --cell-font-size: var(--font-size-md); --cell-desc-font-size: var(--font-size-sm); --cell-desc-color: rgba(0, 0, 0, 0.6); --cell-padding: 10px 12px; --cell-min-height: 40px; --cell-border-color: #bcc2cb; --cell-border-left: 12px; --cell-border-right: 12px; --cell-icon-right: 8px; --cell-extra-left: 8px;}.var-cell { align-items: center; display: flex; min-height: var(--cell-min-height); outline: none; padding: var(--cell-padding); position: relative; box-sizing: border-box; font-size: var(--cell-font-size); color: var(--cell-color);}.var-cell--border::after { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; right: var(--cell-border-right); bottom: 0; left: var(--cell-border-left); border-bottom: 1px solid var(--cell-border-color); transform: scaleY(0.5);}.var-cell__icon { margin-right: var(--cell-icon-right); flex: 0;}.var-cell__content { flex: 1; overflow: hidden;}.var-cell__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.var-cell__desc { font-size: var(--cell-desc-font-size); color: var(--cell-desc-color);}.var-cell__extra { flex: 0; margin-left: var(--cell-extra-left);}

package/es/cell/cell.less

@@ -1,3 +1,4 @@
+@cell-color: var(--color-text);
 @cell-font-size: var(--font-size-md);
 @cell-desc-font-size: var(--font-size-sm);
 @cell-desc-color: rgba(0, 0, 0, 0.6);
@@ -10,6 +11,7 @@
 @cell-extra-left: 8px;
 
 :root {
+  --cell-color: @cell-color;
   --cell-font-size: @cell-font-size;
   --cell-desc-font-size: @cell-desc-font-size;
   --cell-desc-color: @cell-desc-color;
@@ -31,6 +33,7 @@
   position: relative;
   box-sizing: border-box;
   font-size: var(--cell-font-size);
+  color: var(--cell-color);
 
   &--border {
     &::after {

package/es/collapse-item/collapseItem.css

@@ -1 +1 @@
-:root { --collapse-background: #fff; --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 16px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 16px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid rgba(0, 0, 0, 0.12);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item::before { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-border-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item-header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item-header__title { transition: color 0.25s;}.var-collapse-item-header__icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item-header__disable { opacity: 0;}.var-collapse-item-header__open { transform: rotate(-180deg);}.var-collapse-item-content { display: flex; font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__wrap { padding: var(--collapse-content-padding); word-break: break-all; flex: 1;}.var-collapse-item__active + .var-collapse-item,.var-collapse-item__active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item__active + .var-collapse-item::after,.var-collapse-item__active:not(:first-child)::after { border-top: none;}.var-collapse-item__disable { color: var(--collapse-disable-color); cursor: not-allowed;}
+:root { --collapse-background: #fff; --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 12px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 12px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid rgba(0, 0, 0, 0.12);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item::before { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-border-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item-header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item-header__title { transition: color 0.25s;}.var-collapse-item-header__icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item-header__disable { opacity: 0;}.var-collapse-item-header__open { transform: rotate(-180deg);}.var-collapse-item-content { display: flex; font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__wrap { padding: var(--collapse-content-padding); word-break: break-all; flex: 1;}.var-collapse-item__active + .var-collapse-item,.var-collapse-item__active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item__active + .var-collapse-item::after,.var-collapse-item__active:not(:first-child)::after { border-top: none;}.var-collapse-item__disable { color: var(--collapse-disable-color); cursor: not-allowed;}

package/es/collapse-item/collapseItem.less

@@ -1,9 +1,9 @@
 @collapse-background: #fff;
 @collapse-text-color: #232222;
 @collapse-header-font-size: var(--font-size-lg);
-@collapse-header-padding: 10px 16px;
+@collapse-header-padding: 10px 12px;
 @collapse-content-font-size: var(--font-size-md);
-@collapse-content-padding: 0 16px 10px;
+@collapse-content-padding: 0 12px 10px;
 @collapse-item-margin-top: 16px;
 @collapse-disable-color: #bdbdbd;
 @collapse-border-top: thin solid rgba(0, 0, 0, 0.12);

package/es/date-picker/DatePicker.js

@@ -5,6 +5,7 @@ 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 } from "vue";
 export function render(_ctx, _cache) {
@@ -304,8 +305,10 @@ export default defineComponent({
     var handleTouchend = () => {
       if (isUntouchable.value || touchDirection !== 'x') return;
       var componentRef = getPanelType.value === 'month' ? monthPanelEl : dayPanelEl;
-      componentRef.value.forwardRef(checkType);
-      resetState();
+      nextTickFrame(() => {
+        componentRef.value.forwardRef(checkType);
+        resetState();
+      });
     };
 
     var updateRange = (date, type) => {

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

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

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

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

@@ -66,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 */
@@ -294,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
+        }
       };
     };
 
@@ -308,7 +310,9 @@ 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
 

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

@@ -49,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 */
@@ -221,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);
     };
 

package/es/index-bar/IndexBar.js

@@ -4,7 +4,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 import { computed, defineComponent, ref, watch, onMounted, onBeforeUnmount } from 'vue';
 import { easeInOutCubic, isPlainObject, toNumber } from '../utils/shared';
-import { doubleRaf, getParentScroller, getScrollLeft, nextTickFrame, requestAnimationFrame, scrollTo as varScrollTo } from '../utils/elements';
+import { doubleRaf, getParentScroller, getScrollLeft, getScrollTop, nextTickFrame, requestAnimationFrame, scrollTo as varScrollTo } from '../utils/elements';
 import { useIndexAnchors } from './provide';
 import { props } from './props';
 import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
@@ -55,7 +55,6 @@ export default defineComponent({
       indexAnchors,
       bindIndexAnchors
     } = useIndexAnchors();
-    var scrollEl = ref(null);
     var clickedName = ref('');
     var scroller = ref(null);
     var barEl = ref(null);
@@ -82,10 +81,8 @@ export default defineComponent({
     };
 
     var handleScroll = () => {
-      var {
-        scrollTop,
-        scrollHeight
-      } = scrollEl.value;
+      var scrollTop = getScrollTop(scroller.value);
+      var scrollHeight = scroller.value === window ? document.body.scrollHeight : scroller.value.scrollHeight;
       var {
         offsetTop
       } = barEl.value;
@@ -120,10 +117,10 @@ export default defineComponent({
         });
         if (!indexAnchor) return;
         var top = indexAnchor.ownTop.value - stickyOffsetTop.value + offsetTop;
-        var left = getScrollLeft(scrollEl.value);
+        var left = getScrollLeft(scroller.value);
         clickedName.value = anchorName;
         emitEvent(anchorName);
-        yield varScrollTo(scrollEl.value, {
+        yield varScrollTo(scroller.value, {
           left,
           top,
           animation: easeInOutCubic,
@@ -156,17 +153,14 @@ export default defineComponent({
       });
     }));
     onMounted( /*#__PURE__*/_asyncToGenerator(function* () {
-      var _scroller$value;
-
       yield doubleRaf();
       scroller.value = getParentScroller(barEl.value);
-      scrollEl.value = scroller.value === window ? scroller.value.document.documentElement : scroller.value;
-      (_scroller$value = scroller.value) == null ? void 0 : _scroller$value.addEventListener('scroll', handleScroll);
+      scroller.value.addEventListener('scroll', handleScroll);
     }));
     onBeforeUnmount(() => {
-      var _scroller$value2;
+      var _scroller$value;
 
-      (_scroller$value2 = scroller.value) == null ? void 0 : _scroller$value2.removeEventListener('scroll', handleScroll);
+      (_scroller$value = scroller.value) == null ? void 0 : _scroller$value.removeEventListener('scroll', handleScroll);
     });
     return {
       barEl,

package/es/ripple/index.js

@@ -3,6 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import context from '../context';
 
 
+import { supportTouch } from '../utils/elements';
 var ANIMATION_DURATION = 250;
 
 function setStyles(element) {
@@ -108,6 +109,10 @@ function removeRipple() {
 function forbidRippleTask() {
   var _ripple = this._ripple;
 
+  if (!supportTouch()) {
+    return;
+  }
+
   if (!_ripple.touchmoveForbid) {
     return;
   }

package/es/select/Select.js

@@ -298,7 +298,7 @@ export default defineComponent({
       }
 
       wrapWidth.value = getWrapWidth();
-      offsetY.value = getOffsetY();
+      offsetY.value = getOffsetY() + toPxNum(props.offsetY);
       isFocus.value = true;
       onFocus == null ? void 0 : onFocus();
       validateWithTrigger('onFocus');
@@ -429,6 +429,8 @@ export default defineComponent({
 
 
     var focus = () => {
+      wrapWidth.value = getWrapWidth();
+      offsetY.value = getOffsetY() + toPxNum(props.offsetY);
       isFocus.value = true;
     }; // expose
 

package/es/select/props.js

@@ -12,6 +12,10 @@ export var props = {
     type: Boolean,
     default: false
   },
+  offsetY: {
+    type: [String, Number],
+    default: 0
+  },
   chip: {
     type: Boolean,
     default: false

package/es/snackbar/style/index.js

@@ -1,8 +1,8 @@
 import '../../styles/common.css'
-import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../button/button.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
+import '../SnackbarSfc.css'

package/es/snackbar/style/less.js

@@ -1,8 +1,8 @@
 import '../../styles/common.less'
-import '../SnackbarSfc.less'
 import '../../styles/elevation.less'
 import '../../loading/loading.less'
 import '../../button/button.less'
 import '../../icon/icon.less'
 import '../snackbar.less'
 import '../coreSfc.less'
+import '../SnackbarSfc.less'