@varlet/ui 1.27.17 → 1.27.20-alpha.1660211980346

package/es/cell/Cell.js

@@ -30,10 +30,10 @@ export function render(_ctx, _cache) {
   /* TEXT */
   )])], 2
   /* CLASS */
-  ), _ctx.$slots.desc || _ctx.desc ? (_openBlock(), _createElementBlock("div", {
+  ), _ctx.$slots.description || _ctx.description ? (_openBlock(), _createElementBlock("div", {
     key: 0,
-    class: _normalizeClass(_ctx.classes(_ctx.n('desc'), [_ctx.descClass, _ctx.descClass]))
-  }, [_renderSlot(_ctx.$slots, "desc", {}, () => [_createTextVNode(_toDisplayString(_ctx.desc), 1
+    class: _normalizeClass(_ctx.classes(_ctx.n('description'), [_ctx.descriptionClass, _ctx.descriptionClass]))
+  }, [_renderSlot(_ctx.$slots, "description", {}, () => [_createTextVNode(_toDisplayString(_ctx.description), 1
   /* TEXT */
   )])], 2
   /* CLASS */

package/es/cell/cell.css

@@ -1 +1 @@
-: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; width: 100%; 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);}
+:root { --cell-color: var(--color-text); --cell-font-size: var(--font-size-md); --cell-description-font-size: var(--font-size-sm); --cell-description-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; width: 100%; 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__description { font-size: var(--cell-description-font-size); color: var(--cell-description-color);}.var-cell__extra { flex: 0; margin-left: var(--cell-extra-left);}

package/es/cell/cell.less

@@ -1,7 +1,7 @@
 @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-description-font-size: var(--font-size-sm);
+@cell-description-color: rgba(0, 0, 0, 0.6);
 @cell-padding: 10px 12px;
 @cell-min-height: 40px;
 @cell-border-color: #bcc2cb;
@@ -13,8 +13,8 @@
 :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;
+  --cell-description-font-size: @cell-description-font-size;
+  --cell-description-color: @cell-description-color;
   --cell-padding: @cell-padding;
   --cell-min-height: @cell-min-height;
   --cell-border-color: @cell-border-color;
@@ -66,9 +66,9 @@
     white-space: nowrap;
   }
 
-  &__desc {
-    font-size: var(--cell-desc-font-size);
-    color: var(--cell-desc-color);
+  &__description {
+    font-size: var(--cell-description-font-size);
+    color: var(--cell-description-color);
   }
 
   &__extra {

package/es/cell/props.js

@@ -5,7 +5,7 @@ export var props = {
   icon: {
     type: String
   },
-  desc: {
+  description: {
     type: String
   },
   border: {
@@ -18,7 +18,7 @@ export var props = {
   titleClass: {
     type: String
   },
-  descClass: {
+  descriptionClass: {
     type: String
   },
   extraClass: {

package/es/collapse-item/CollapseItem.js

@@ -1,5 +1,5 @@
 import { defineComponent, ref, nextTick, watch, computed } from 'vue';
-import { requestAnimationFrame } from '../utils/elements';
+import { nextTickFrame, requestAnimationFrame } from '../utils/elements';
 import { isArray } from '@varlet/shared';
 import { createNamespace } from '../utils/components';
 import { useCollapse } from './provide';
@@ -41,6 +41,9 @@ export function render(_ctx, _cache) {
     ref: "contentEl",
     onTransitionend: _cache[1] || (_cache[1] = function () {
       return _ctx.transitionend && _ctx.transitionend(...arguments);
+    }),
+    onTransitionstart: _cache[2] || (_cache[2] = function () {
+      return _ctx.start && _ctx.start(...arguments);
     })
   }, [_createElementVNode("div", {
     class: _normalizeClass(_ctx.n('content-wrap'))
@@ -66,6 +69,8 @@ export default defineComponent({
       collapse,
       bindCollapse
     } = useCollapse();
+    var isInitToTrigger = true; // ensure to trigger transitionend
+
     var contentEl = ref(null);
     var show = ref(false);
     var isShow = ref(false);
@@ -102,10 +107,18 @@ export default defineComponent({
         requestAnimationFrame(() => {
           ;
           contentEl.value.style.height = offsetHeight + 'px';
+          if (!isInitToTrigger) return;
+          nextTickFrame(() => {
+            if (isInitToTrigger) transitionend();
+          });
         });
       });
     };
 
+    var start = () => {
+      isInitToTrigger = false;
+    };
+
     var closePanel = () => {
       if (!contentEl.value) return;
       var {
@@ -138,6 +151,7 @@ export default defineComponent({
     });
     return {
       n,
+      start,
       classes,
       show,
       isShow,

package/es/date-picker/DatePicker.js

@@ -31,8 +31,8 @@ export function render(_ctx, _cache) {
     class: _normalizeClass(_ctx.classes(_ctx.n('title-year'), [_ctx.isYearPanel, _ctx.n('title-year--active')])),
     onClick: _cache[0] || (_cache[0] = $event => _ctx.clickEl('year'))
   }, [_renderSlot(_ctx.$slots, "year", {
-    year: _ctx.previewYear
-  }, () => [_createTextVNode(_toDisplayString(_ctx.previewYear), 1
+    year: _ctx.chooseYear
+  }, () => [_createTextVNode(_toDisplayString(_ctx.chooseYear), 1
   /* TEXT */
   )])], 2
   /* CLASS */
@@ -375,6 +375,7 @@ export default defineComponent({
         range,
         multiple,
         onChange,
+        onPreview,
         'onUpdate:modelValue': updateModelValue
       } = props;
       reverse.value = getReverse('month', month);
@@ -387,6 +388,7 @@ export default defineComponent({
         }
       } else {
         previewMonth.value = month;
+        call(onPreview, toNumber(previewYear.value), toNumber(previewMonth.value.index));
       }
 
       isMonthPanel.value = false;
@@ -396,6 +398,7 @@ export default defineComponent({
       previewYear.value = "" + year;
       isYearPanel.value = false;
       isMonthPanel.value = true;
+      call(props.onPreview, toNumber(previewYear.value), toNumber(previewMonth.value.index));
     };
 
     var checkPreview = (type, checkType) => {
@@ -418,6 +421,8 @@ export default defineComponent({
 
         previewMonth.value = MONTH_LIST.find(month => toNumber(month.index) === checkIndex);
       }
+
+      call(props.onPreview, toNumber(previewYear.value), toNumber(previewMonth.value.index));
     };
 
     var checkValue = () => {

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; width: 100%; 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 { 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__item { padding: var(--year-picker-item-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-date-picker .var-year-picker__item--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:not(.var-day-picker__button--usable) { cursor: unset;}.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%);}
+: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: transparent; --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; width: 100%; 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__body::-webkit-scrollbar { display: none; width: 0; background: transparent;}.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 { 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__item { padding: var(--year-picker-item-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-date-picker .var-year-picker__item--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:not(.var-day-picker__button--usable) { cursor: unset;}.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

@@ -33,7 +33,7 @@
 @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;
-@date-picker-body-background-color: rgba(0, 0, 0, 0);
+@date-picker-body-background-color: transparent;
 
 :root {
   --date-picker-border-radius: @date-picker-border-radius;
@@ -147,6 +147,12 @@
     position: relative;
     overflow: auto;
     background-color: var(--date-picker-body-background-color);
+
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      background: transparent;
+    }
   }
 
   .var-picker-header {

package/es/date-picker/props.js

@@ -94,6 +94,9 @@ export var props = {
     type: Boolean,
     default: true
   },
+  onPreview: {
+    type: Function
+  },
   onChange: {
     type: Function
   },

package/es/date-picker/style/index.js

@@ -1,5 +1,6 @@
 import '../../styles/common.css'
 import '../../styles/elevation.css'
+import '../../ripple/ripple.css'
 import '../../button/button.css'
 import '../../icon/icon.css'
 import '../date-picker.css'

package/es/date-picker/style/less.js

@@ -1,5 +1,6 @@
 import '../../styles/common.less'
 import '../../styles/elevation.less'
+import '../../ripple/ripple.less'
 import '../../button/button.less'
 import '../../icon/icon.less'
 import '../date-picker.less'

package/es/index.js

@@ -60,6 +60,7 @@ import TabItem, * as TabItemModule from './tab-item'
 import Table, * as TableModule from './table'
 import Tabs, * as TabsModule from './tabs'
 import TabsItems, * as TabsItemsModule from './tabs-items'
+import Themes, * as ThemesModule from './themes'
 import TimePicker, * as TimePickerModule from './time-picker'
 import Uploader, * as UploaderModule from './uploader'
 
@@ -125,6 +126,7 @@ export const _TabItemComponent = TabItemModule._TabItemComponent || {}
 export const _TableComponent = TableModule._TableComponent || {}
 export const _TabsComponent = TabsModule._TabsComponent || {}
 export const _TabsItemsComponent = TabsItemsModule._TabsItemsComponent || {}
+export const _ThemesComponent = ThemesModule._ThemesComponent || {}
 export const _TimePickerComponent = TimePickerModule._TimePickerComponent || {}
 export const _UploaderComponent = UploaderModule._UploaderComponent || {}
 
@@ -192,6 +194,7 @@ function install(app) {
   Table.install && app.use(Table)
   Tabs.install && app.use(Tabs)
   TabsItems.install && app.use(TabsItems)
+  Themes.install && app.use(Themes)
   TimePicker.install && app.use(TimePicker)
   Uploader.install && app.use(Uploader)
 }
@@ -260,6 +263,7 @@ export {
   Table,
   Tabs,
   TabsItems,
+  Themes,
   TimePicker,
   Uploader
 }
@@ -328,6 +332,7 @@ export default {
   Table,
   Tabs,
   TabsItems,
+  Themes,
   TimePicker,
   Uploader
 }

package/es/less.js

@@ -60,5 +60,6 @@ import './tab-item/style/less'
 import './table/style/less'
 import './tabs/style/less'
 import './tabs-items/style/less'
+import './themes/style/less'
 import './time-picker/style/less'
 import './uploader/style/less'

package/es/pull-refresh/PullRefresh.js

@@ -73,8 +73,8 @@ export default defineComponent({
     var controlStyle = computed(() => ({
       transform: "translate3d(0px, " + distance.value + "px, 0px) translate(-50%, 0)",
       transition: isEnd.value ? "transform " + props.animationDuration + "ms" : undefined,
-      background: props.successBgColor || props.bgColor,
-      color: props.successColor || props.color
+      background: isSuccess.value ? props.successBgColor : props.bgColor,
+      color: isSuccess.value ? props.successColor : props.color
     }));
     var isSuccess = computed(() => refreshStatus.value === 'success');
 

package/es/pull-refresh/props.js

@@ -12,7 +12,7 @@ export var props = {
     type: [Number, String],
     default: 300
   },
-  // 刷新成功提示展示时长
+  // 成功提示展示时长
   successDuration: {
     type: [Number, String],
     default: 2000