@varlet/ui 1.27.16 → 1.27.18

package/es/themes/dark/timePicker.js

@@ -1,5 +1,5 @@
 export default {
   '--time-picker-clock-container-background': '#545454',
-  '--time-picker-body-background': '#403f3f',
+  '--time-picker-body-background': '#303030',
   '--time-picker-clock-item-disable-color': '#aaaaaa'
 };

package/es/time-picker/timePicker.css

@@ -1 +1 @@
-:root { --time-picker-border-radius: 4px; --time-picker-font-size: var(--font-size-md); --time-picker-min-width: 290px; --time-picker-height: 385px; --time-picker-title-padding: 16px; --time-picker-title-color: #fff; --time-picker-title-background: var(--color-primary); --time-picker-title-time-font-size: 50px; --time-picker-title-time-margin: 0 5px; --time-picker-title-ampm-margin-left: 5px; --time-picker-clock-left: 27px; --time-picker-clock-right: 27px; --time-picker-clock-top: 27px; --time-picker-clock-bottom: 27px; --time-picker-clock-container-width: 270px; --time-picker-clock-container-height: 270px; --time-picker-clock-container-background: #e0e0e0; --time-picker-clock-hand-height: calc(50% - 4px); --time-picker-clock-hand-width: 2px; --time-picker-clock-hand-bottom: 50%; --time-picker-clock-hand-left: calc(50% - 1px); --time-picker-clock-hand-background: var(--color-primary); --time-picker-clock-hand-border-color: var(--color-primary); --time-picker-clock-hand-before-width: 10px; --time-picker-clock-hand-before-height: 10px; --time-picker-clock-hand-before-border-width: 2px; --time-picker-clock-hand-after-width: 4px; --time-picker-clock-hand-after-height: 4px; --time-picker-clock-item-height: 32px; --time-picker-clock-item-width: 32px; --time-picker-clock-item-active-background: var(--color-primary); --time-picker-clock-item-active-color: #fff; --time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26); --time-picker-inner-left: 36px; --time-picker-inner-right: 36px; --time-picker-inner-top: 36px; --time-picker-inner-bottom: 36px; --time-picker-body-background: #fff;}.after-before-basic { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%);}.var-time-picker { border-radius: var(--time-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--time-picker-font-size); position: relative; min-width: var(--time-picker-min-width); height: var(--time-picker-height); overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-time-picker__title { padding: var(--time-picker-title-padding); color: var(--time-picker-title-color); background: var(--time-picker-title-background); display: flex; align-items: flex-end; justify-content: flex-end;}.var-time-picker__title-btn { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier); white-space: nowrap;}.var-time-picker__title-btn--active { opacity: 1;}.var-time-picker__title-time { display: flex; justify-content: flex-end; font-size: var(--time-picker-title-time-font-size);}.var-time-picker__title-time .var-time-picker__title-btn { align-items: center; margin: var(--time-picker-title-time-margin);}.var-time-picker__title-ampm { margin-left: var(--time-picker-title-ampm-margin-left);}.var-time-picker__body { flex: 1; display: flex; align-items: center; justify-content: center; background-color: var(--time-picker-body-background);}.var-time-picker__clock { position: absolute; bottom: var(--time-picker-clock-bottom); left: var(--time-picker-clock-left); right: var(--time-picker-clock-right); top: var(--time-picker-clock-top);}.var-time-picker__clock-container { width: var(--time-picker-clock-container-width); height: var(--time-picker-clock-container-height); background: var(--time-picker-clock-container-background); border-radius: 50%; position: relative;}.var-time-picker__clock-hand { height: var(--time-picker-clock-hand-height); width: var(--time-picker-clock-hand-width); bottom: var(--time-picker-clock-hand-bottom); left: var(--time-picker-clock-hand-left); transform-origin: center bottom; position: absolute; will-change: transform; z-index: 1; background-color: var(--time-picker-clock-hand-background); border-color: var(--time-picker-clock-hand-border-color);}.var-time-picker__clock-hand::before { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: var(--time-picker-clock-hand-before-border-width) solid; width: var(--time-picker-clock-hand-before-width); height: var(--time-picker-clock-hand-before-height); top: -5px; border-color: inherit;}.var-time-picker__clock-hand::after { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); border-color: inherit; height: var(--time-picker-clock-hand-after-height); width: var(--time-picker-clock-hand-after-width); top: 100%; border-style: solid; background-color: inherit;}.var-time-picker__clock-item { align-items: center; border-radius: 100%; display: flex; justify-content: center; height: var(--time-picker-clock-item-height); position: absolute; width: var(--time-picker-clock-item-width); user-select: none; transform: translate(-50%, -50%);}.var-time-picker__clock-item--active { background: var(--time-picker-clock-item-active-background); z-index: 2; color: var(--time-picker-clock-item-active-color);}.var-time-picker__clock-item--disable { color: var(--time-picker-clock-item-disable-color);}.var-time-picker__clock-inner { position: absolute; bottom: var(--time-picker-inner-bottom); left: var(--time-picker-inner-left); right: var(--time-picker-inner-right); top: var(--time-picker-inner-top);}.var-time-picker-panel-fade-enter-from,.var-time-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-time-picker-panel-fade-leave-active { position: absolute;}
+:root { --time-picker-border-radius: 4px; --time-picker-font-size: var(--font-size-md); --time-picker-min-width: 290px; --time-picker-height: 385px; --time-picker-title-padding: 16px; --time-picker-title-color: #fff; --time-picker-title-background: var(--color-primary); --time-picker-title-time-font-size: 50px; --time-picker-title-time-margin: 0 5px; --time-picker-title-ampm-margin-left: 5px; --time-picker-clock-left: 27px; --time-picker-clock-right: 27px; --time-picker-clock-top: 27px; --time-picker-clock-bottom: 27px; --time-picker-clock-container-width: 270px; --time-picker-clock-container-height: 270px; --time-picker-clock-container-background: #e0e0e0; --time-picker-clock-hand-height: calc(50% - 4px); --time-picker-clock-hand-width: 2px; --time-picker-clock-hand-bottom: 50%; --time-picker-clock-hand-left: calc(50% - 1px); --time-picker-clock-hand-background: var(--color-primary); --time-picker-clock-hand-border-color: var(--color-primary); --time-picker-clock-hand-before-width: 10px; --time-picker-clock-hand-before-height: 10px; --time-picker-clock-hand-before-border-width: 2px; --time-picker-clock-hand-after-width: 4px; --time-picker-clock-hand-after-height: 4px; --time-picker-clock-item-height: 32px; --time-picker-clock-item-width: 32px; --time-picker-clock-item-active-background: var(--color-primary); --time-picker-clock-item-active-color: #fff; --time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26); --time-picker-inner-left: 36px; --time-picker-inner-right: 36px; --time-picker-inner-top: 36px; --time-picker-inner-bottom: 36px; --time-picker-body-background: transparent;}.after-before-basic { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%);}.var-time-picker { border-radius: var(--time-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--time-picker-font-size); position: relative; min-width: var(--time-picker-min-width); height: var(--time-picker-height); overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-time-picker__title { padding: var(--time-picker-title-padding); color: var(--time-picker-title-color); background: var(--time-picker-title-background); display: flex; align-items: flex-end; justify-content: flex-end;}.var-time-picker__title-btn { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier); white-space: nowrap;}.var-time-picker__title-btn--active { opacity: 1;}.var-time-picker__title-time { display: flex; justify-content: flex-end; font-size: var(--time-picker-title-time-font-size);}.var-time-picker__title-time .var-time-picker__title-btn { align-items: center; margin: var(--time-picker-title-time-margin);}.var-time-picker__title-ampm { margin-left: var(--time-picker-title-ampm-margin-left);}.var-time-picker__body { flex: 1; display: flex; align-items: center; justify-content: center; background-color: var(--time-picker-body-background);}.var-time-picker__clock { position: absolute; bottom: var(--time-picker-clock-bottom); left: var(--time-picker-clock-left); right: var(--time-picker-clock-right); top: var(--time-picker-clock-top);}.var-time-picker__clock-container { width: var(--time-picker-clock-container-width); height: var(--time-picker-clock-container-height); background: var(--time-picker-clock-container-background); border-radius: 50%; position: relative;}.var-time-picker__clock-hand { height: var(--time-picker-clock-hand-height); width: var(--time-picker-clock-hand-width); bottom: var(--time-picker-clock-hand-bottom); left: var(--time-picker-clock-hand-left); transform-origin: center bottom; position: absolute; will-change: transform; z-index: 1; background-color: var(--time-picker-clock-hand-background); border-color: var(--time-picker-clock-hand-border-color);}.var-time-picker__clock-hand::before { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: var(--time-picker-clock-hand-before-border-width) solid; width: var(--time-picker-clock-hand-before-width); height: var(--time-picker-clock-hand-before-height); top: -5px; border-color: inherit;}.var-time-picker__clock-hand::after { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); border-color: inherit; height: var(--time-picker-clock-hand-after-height); width: var(--time-picker-clock-hand-after-width); top: 100%; border-style: solid; background-color: inherit;}.var-time-picker__clock-item { align-items: center; border-radius: 100%; display: flex; justify-content: center; height: var(--time-picker-clock-item-height); position: absolute; width: var(--time-picker-clock-item-width); user-select: none; transform: translate(-50%, -50%);}.var-time-picker__clock-item--active { background: var(--time-picker-clock-item-active-background); z-index: 2; color: var(--time-picker-clock-item-active-color);}.var-time-picker__clock-item--disable { color: var(--time-picker-clock-item-disable-color);}.var-time-picker__clock-inner { position: absolute; bottom: var(--time-picker-inner-bottom); left: var(--time-picker-inner-left); right: var(--time-picker-inner-right); top: var(--time-picker-inner-top);}.var-time-picker-panel-fade-enter-from,.var-time-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-time-picker-panel-fade-leave-active { position: absolute;}

package/es/time-picker/timePicker.less

@@ -31,7 +31,7 @@
 @time-picker-clock-item-active-background: var(--color-primary);
 @time-picker-clock-item-active-color: #fff;
 @time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26);
-@time-picker-body-background: #fff;
+@time-picker-body-background: transparent;
 @time-picker-inner-left: 36px;
 @time-picker-inner-right: 36px;
 @time-picker-inner-top: 36px;

package/es/varlet.esm.js

@@ -3850,6 +3850,9 @@ function render$I(_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"))
@@ -3868,6 +3871,7 @@ var CollapseItem = defineComponent({
       collapse,
       bindCollapse
     } = useCollapse();
+    var isInitToTrigger = true;
     var contentEl = ref(null);
     var show = ref(false);
     var isShow = ref(false);
@@ -3902,19 +3906,34 @@ var CollapseItem = defineComponent({
         contentEl.value.style.height = 0 + "px";
         requestAnimationFrame(() => {
           contentEl.value.style.height = offsetHeight + "px";
+          if (!isInitToTrigger)
+            return;
+          nextTickFrame(() => {
+            if (isInitToTrigger)
+              transitionend();
+          });
         });
       });
     };
+    var start = () => {
+      isInitToTrigger = false;
+    };
     var closePanel = () => {
       if (!contentEl.value)
         return;
-      contentEl.value.style.height = 0 + "px";
+      var {
+        offsetHeight
+      } = contentEl.value;
+      contentEl.value.style.height = offsetHeight + "px";
+      requestAnimationFrame(() => {
+        contentEl.value.style.height = 0 + "px";
+      });
     };
     var transitionend = () => {
       if (!isShow.value) {
         show.value = false;
-        contentEl.value.style.height = "";
       }
+      contentEl.value.style.height = "";
     };
     var collapseItemProvider = {
       index,
@@ -3930,6 +3949,7 @@ var CollapseItem = defineComponent({
     });
     return {
       n: n$L,
+      start,
       classes: classes$C,
       show,
       isShow,
@@ -10880,7 +10900,7 @@ function render$q(_ctx, _cache) {
   var _component_var_form_details = resolveComponent("var-form-details");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(_ctx.classes(_ctx.n(), "var--box", [_ctx.disabled, _ctx.n("--disabled")])),
-    onClick: _cache[8] || (_cache[8] = function() {
+    onClick: _cache[10] || (_cache[10] = function() {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, [createElementVNode("div", {
@@ -10922,6 +10942,9 @@ function render$q(_ctx, _cache) {
     }),
     onChange: _cache[3] || (_cache[3] = function() {
       return _ctx.handleChange && _ctx.handleChange(...arguments);
+    }),
+    onTouchstart: _cache[4] || (_cache[4] = function() {
+      return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
     })
   }, "\n        ", 46, _hoisted_1$9)) : (openBlock(), createElementBlock("input", {
     key: 2,
@@ -10937,17 +10960,20 @@ function render$q(_ctx, _cache) {
       color: _ctx.textColor,
       caretColor: !_ctx.errorMessage ? _ctx.focusColor : void 0
     }),
-    onFocus: _cache[4] || (_cache[4] = function() {
+    onFocus: _cache[5] || (_cache[5] = function() {
       return _ctx.handleFocus && _ctx.handleFocus(...arguments);
     }),
-    onBlur: _cache[5] || (_cache[5] = function() {
+    onBlur: _cache[6] || (_cache[6] = function() {
       return _ctx.handleBlur && _ctx.handleBlur(...arguments);
     }),
-    onInput: _cache[6] || (_cache[6] = function() {
+    onInput: _cache[7] || (_cache[7] = function() {
       return _ctx.handleInput && _ctx.handleInput(...arguments);
     }),
-    onChange: _cache[7] || (_cache[7] = function() {
+    onChange: _cache[8] || (_cache[8] = function() {
       return _ctx.handleChange && _ctx.handleChange(...arguments);
+    }),
+    onTouchstart: _cache[9] || (_cache[9] = function() {
+      return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
     })
   }, null, 46, _hoisted_2$5)), createElementVNode("label", {
     class: normalizeClass(_ctx.classes("var--ellipsis", [_ctx.isFocus, _ctx.n("--focus")], [_ctx.errorMessage, _ctx.n("--error")], [_ctx.textarea, _ctx.n("textarea-placeholder"), _ctx.n("placeholder")], _ctx.computePlaceholderState(), [!_ctx.hint, _ctx.n("--placeholder-non-hint")])),
@@ -11089,6 +11115,16 @@ var Input = defineComponent({
       validateWithTrigger("onClick");
     };
     var withTrim = (value) => props2.modelModifiers.trim ? value.trim() : value;
+    var handleTouchstart = (e) => {
+      var {
+        disabled,
+        readonly
+      } = props2;
+      if (form != null && form.disabled.value || form != null && form.readonly.value || disabled || readonly) {
+        return;
+      }
+      e.stopPropagation();
+    };
     var reset = () => {
       call(props2["onUpdate:modelValue"], "");
       resetValidation();
@@ -11129,6 +11165,7 @@ var Input = defineComponent({
       handleChange,
       handleClear,
       handleClick,
+      handleTouchstart,
       validate,
       resetValidation,
       reset,
@@ -12741,8 +12778,8 @@ var PullRefresh = defineComponent({
     var controlStyle = computed(() => ({
       transform: "translate3d(0px, " + distance.value + "px, 0px) translate(-50%, 0)",
       transition: isEnd.value ? "transform " + props2.animationDuration + "ms" : void 0,
-      background: props2.successBgColor || props2.bgColor,
-      color: props2.successColor || props2.color
+      background: isSuccess.value ? props2.successBgColor : props2.bgColor,
+      color: isSuccess.value ? props2.successColor : props2.color
     }));
     var isSuccess = computed(() => refreshStatus.value === "success");
     var changeIcon = () => {
@@ -13968,17 +14005,19 @@ var Select = defineComponent({
       var {
         body
       } = document;
+      var bodyScrollHeight = body.scrollHeight;
       nextTick(() => {
-        var _menuEl$value, _menuEl$value2;
+        var _menuEl$value;
         var {
-          offsetTop: menuOffsetTop,
           offsetHeight: menuOffsetHeight
         } = (_menuEl$value = menuEl.value) == null ? void 0 : _menuEl$value.parentElement;
-        var menuOffsetBottom = body.scrollHeight - menuOffsetHeight - menuOffsetTop;
-        if (menuOffsetTop < 0)
+        var wrapOffsetTop = getTop$1(wrapEl.value);
+        if (wrapOffsetTop + offsetY.value < 0) {
           offsetY.value = getOffsetY();
-        if (menuOffsetBottom < 0)
-          offsetY.value -= ((_menuEl$value2 = menuEl.value) == null ? void 0 : _menuEl$value2.parentElement).offsetHeight - getOffsetY();
+        }
+        if (menuOffsetHeight + wrapOffsetTop + offsetY.value > bodyScrollHeight) {
+          offsetY.value -= menuOffsetHeight - getOffsetY();
+        }
       });
     };
     watch(() => props2.multiple, () => {
@@ -14097,7 +14136,8 @@ function render$e(_ctx, _cache) {
     })
   }, [createElementVNode("div", {
     class: normalizeClass(_ctx.n("--animation"))
-  }, null, 2)], 6)) : createCommentVNode("v-if", true), createElementVNode("div", {
+  }, null, 2)], 6)) : createCommentVNode("v-if", true), _ctx.avatar || _ctx.title || _ctx.toNumber(_ctx.rows) > 0 ? (openBlock(), createElementBlock("div", {
+    key: 1,
     class: normalizeClass(_ctx.n("article"))
   }, [_ctx.avatar ? (openBlock(), createElementBlock("div", {
     key: 0,
@@ -14108,7 +14148,8 @@ function render$e(_ctx, _cache) {
     })
   }, [createElementVNode("div", {
     class: normalizeClass(_ctx.n("--animation"))
-  }, null, 2)], 6)) : createCommentVNode("v-if", true), createElementVNode("div", {
+  }, null, 2)], 6)) : createCommentVNode("v-if", true), _ctx.title || _ctx.toNumber(_ctx.rows) > 0 ? (openBlock(), createElementBlock("div", {
+    key: 1,
     class: normalizeClass(_ctx.n("section"))
   }, [_ctx.title ? (openBlock(), createElementBlock("div", {
     key: 0,
@@ -14128,7 +14169,7 @@ function render$e(_ctx, _cache) {
     }, [createElementVNode("div", {
       class: normalizeClass(_ctx.n("--animation"))
     }, null, 2)], 6);
-  }), 128))], 2)], 2)], 2)) : createCommentVNode("v-if", true), _ctx.loading && _ctx.fullscreen ? (openBlock(), createElementBlock("div", {
+  }), 128))], 2)) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true)], 2)) : createCommentVNode("v-if", true), _ctx.loading && _ctx.fullscreen ? (openBlock(), createElementBlock("div", {
     key: 2,
     class: normalizeClass(_ctx.n("fullscreen")),
     style: normalizeStyle({

package/highlight/attributes.json

@@ -849,7 +849,7 @@
   },
   "var-input/type": {
     "type": "string",
-    "description": "输入框类型, 可选值为 `text` `password` `number` 默认值：text"
+    "description": "输入框类型, 可选值为 `text` `password` `number` `tel` 默认值：text"
   },
   "var-input/maxlength": {
     "type": "string | number",

package/highlight/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "1.27.15",
+  "version": "1.27.17",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -2537,7 +2537,7 @@
             },
             {
               "name": "type",
-              "description": "输入框类型, 可选值为 `text` `password` `number`",
+              "description": "输入框类型, 可选值为 `text` `password` `number` `tel`",
               "default": "text",
               "value": {
                 "type": "string",

package/lib/collapse-item/CollapseItem.js

@@ -56,6 +56,9 @@ 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);
     })
   }, [(0, _vue.createElementVNode)("div", {
     class: (0, _vue.normalizeClass)(_ctx.n('content-wrap'))
@@ -82,6 +85,8 @@ var _default = (0, _vue.defineComponent)({
       collapse,
       bindCollapse
     } = (0, _provide.useCollapse)();
+    var isInitToTrigger = true; // ensure to trigger transitionend
+
     var contentEl = (0, _vue.ref)(null);
     var show = (0, _vue.ref)(false);
     var isShow = (0, _vue.ref)(false);
@@ -118,20 +123,37 @@ var _default = (0, _vue.defineComponent)({
         (0, _elements.requestAnimationFrame)(() => {
           ;
           contentEl.value.style.height = offsetHeight + 'px';
+          if (!isInitToTrigger) return;
+          (0, _elements.nextTickFrame)(() => {
+            if (isInitToTrigger) transitionend();
+          });
         });
       });
     };
 
+    var start = () => {
+      isInitToTrigger = false;
+    };
+
     var closePanel = () => {
       if (!contentEl.value) return;
-      contentEl.value.style.height = 0 + 'px';
+      var {
+        offsetHeight
+      } = contentEl.value;
+      contentEl.value.style.height = offsetHeight + 'px';
+      (0, _elements.requestAnimationFrame)(() => {
+        ;
+        contentEl.value.style.height = 0 + 'px';
+      });
     };
 
     var transitionend = () => {
       if (!isShow.value) {
         show.value = false;
-        contentEl.value.style.height = '';
       }
+
+      ;
+      contentEl.value.style.height = '';
     };
 
     var collapseItemProvider = {
@@ -145,6 +167,7 @@ var _default = (0, _vue.defineComponent)({
     });
     return {
       n,
+      start,
       classes,
       show,
       isShow,

package/lib/date-picker/date-picker.css

@@ -1 +1 @@
-:root { --date-picker-border-radius: 4px; --date-picker-font-size: var(--font-size-md); --date-picker-min-width: 290px; --date-picker-height: 385px; --date-picker-main-color: rgba(0, 0, 0, 0.87); --date-picker-title-padding: 16px; --date-picker-title-background: var(--color-primary); --date-picker-title-color: #fff; --date-picker-title-year-font-size: var(--font-size-md); --date-picker-title-year-font-weight: 500; --date-picker-title-year-margin-bottom: 8px; --date-picker-title-date-height: 48px; --date-picker-title-date-font-size: 34px; --date-picker-title-date-font-weight: 500; --date-picker-title-date-range-font-size: 20px; --date-picker-body-background-color: rgba(0, 0, 0, 0); --picker-header-padding: 4px 16px; --month-picker-padding: 0 12px; --month-picker-item-width: 33%; --month-picker-item-height: 56px; --month-picker-item-button-max-width: 140px; --year-picker-font-weight: 400; --year-picker-item-padding: 8px 0; --year-picker-item-active-font-size: 26px; --year-picker-item-active-font-weight: 500; --year-picker-item-active-font-padding: 10px 0; --year-picker-item-active-color: var(--color-primary); --day-picker-content-item-width: 14.28%; --day-picker-content-item-font-size: var(--font-size-sm); --day-picker-content-item-padding: 2px 0; --day-picker-content-item-button-width: 32px; --day-picker-content-item-button-height: 32px; --day-picker-content-item-button-font-size: var(--font-size-sm); --day-picker-head-item-color: rgba(0, 0, 0, 0.38); --day-picker-head-item-padding: 8px 0; --day-picker-head-item-font-weight: 600;}.var-date-picker { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-radius: var(--date-picker-border-radius); contain: layout style; display: flex; 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/lib/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/lib/date-picker/style/index.js

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

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

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

package/lib/input/Input.js

@@ -38,7 +38,7 @@ function render(_ctx, _cache) {
 
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), 'var--box', [_ctx.disabled, _ctx.n('--disabled')])),
-    onClick: _cache[8] || (_cache[8] = function () {
+    onClick: _cache[10] || (_cache[10] = function () {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, [(0, _vue.createElementVNode)("div", {
@@ -84,6 +84,9 @@ function render(_ctx, _cache) {
     }),
     onChange: _cache[3] || (_cache[3] = function () {
       return _ctx.handleChange && _ctx.handleChange(...arguments);
+    }),
+    onTouchstart: _cache[4] || (_cache[4] = function () {
+      return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
     })
   }, "\n        ", 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
@@ -101,17 +104,20 @@ function render(_ctx, _cache) {
       color: _ctx.textColor,
       caretColor: !_ctx.errorMessage ? _ctx.focusColor : undefined
     }),
-    onFocus: _cache[4] || (_cache[4] = function () {
+    onFocus: _cache[5] || (_cache[5] = function () {
       return _ctx.handleFocus && _ctx.handleFocus(...arguments);
     }),
-    onBlur: _cache[5] || (_cache[5] = function () {
+    onBlur: _cache[6] || (_cache[6] = function () {
       return _ctx.handleBlur && _ctx.handleBlur(...arguments);
     }),
-    onInput: _cache[6] || (_cache[6] = function () {
+    onInput: _cache[7] || (_cache[7] = function () {
       return _ctx.handleInput && _ctx.handleInput(...arguments);
     }),
-    onChange: _cache[7] || (_cache[7] = function () {
+    onChange: _cache[8] || (_cache[8] = function () {
       return _ctx.handleChange && _ctx.handleChange(...arguments);
+    }),
+    onTouchstart: _cache[9] || (_cache[9] = function () {
+      return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
     })
   }, null, 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
@@ -293,7 +299,20 @@ var _default = (0, _vue.defineComponent)({
       validateWithTrigger('onClick');
     };
 
-    var withTrim = value => props.modelModifiers.trim ? value.trim() : value; // expose
+    var withTrim = value => props.modelModifiers.trim ? value.trim() : value;
+
+    var handleTouchstart = e => {
+      var {
+        disabled,
+        readonly
+      } = props;
+
+      if (form != null && form.disabled.value || form != null && form.readonly.value || disabled || readonly) {
+        return;
+      }
+
+      e.stopPropagation();
+    }; // expose
 
 
     var reset = () => {
@@ -345,6 +364,7 @@ var _default = (0, _vue.defineComponent)({
       handleChange,
       handleClear,
       handleClick,
+      handleTouchstart,
       validate,
       resetValidation,
       reset,

package/lib/pull-refresh/PullRefresh.js

@@ -88,8 +88,8 @@ var _default = (0, _vue.defineComponent)({
     var controlStyle = (0, _vue.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 = (0, _vue.computed)(() => refreshStatus.value === 'success');
 

package/lib/pull-refresh/props.js

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

package/lib/select/Select.js

@@ -477,16 +477,22 @@ var _default = (0, _vue.defineComponent)({
       var {
         body
       } = document;
+      var bodyScrollHeight = body.scrollHeight;
       (0, _vue.nextTick)(() => {
-        var _menuEl$value, _menuEl$value2;
+        var _menuEl$value;
 
         var {
-          offsetTop: menuOffsetTop,
           offsetHeight: menuOffsetHeight
         } = (_menuEl$value = menuEl.value) == null ? void 0 : _menuEl$value.parentElement;
-        var menuOffsetBottom = body.scrollHeight - menuOffsetHeight - menuOffsetTop;
-        if (menuOffsetTop < 0) offsetY.value = getOffsetY();
-        if (menuOffsetBottom < 0) offsetY.value -= ((_menuEl$value2 = menuEl.value) == null ? void 0 : _menuEl$value2.parentElement).offsetHeight - getOffsetY();
+        var wrapOffsetTop = (0, _elements.getTop)(wrapEl.value);
+
+        if (wrapOffsetTop + offsetY.value < 0) {
+          offsetY.value = getOffsetY();
+        }
+
+        if (menuOffsetHeight + wrapOffsetTop + offsetY.value > bodyScrollHeight) {
+          offsetY.value -= menuOffsetHeight - getOffsetY();
+        }
       });
     };
 

package/lib/select/select.css

@@ -1 +1 @@
-:root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color: var(--color-text-disabled);}.var-select-footer-margin-enter-from,.var-select-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-select-footer-margin-enter-active,.var-select-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-select { width: 100%; color: var(--select-select-text-color);}.var-select__controller { width: 100%; display: flex; position: relative;}.var-select__menu[var-select-cover] { flex-grow: 1; background: transparent;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto;}.var-select__wrap { position: relative; display: flex; flex-direction: column; padding-top: var(--select-placeholder-size);}.var-select__icon { display: flex; align-items: center; padding: var(--select-icon-padding); font-size: 20px;}.var-select__placeholder { position: absolute; top: 50%; left: 0; width: 100%; transform-origin: left; transition-property: top, transform, width; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1); font-size: var(--select-placeholder-size); color: var(--select-blur-color);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: var(--select-select-padding); outline: none; border: none; font-size: inherit; color: var(--select-select-text-color); word-break: break-all;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select__line { width: 100%; height: var(--select-line-size); background: var(--select-blur-color);}.var-select__dot { width: 100%; height: var(--select-line-spread-size); background: var(--select-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-select--placeholder-hint { top: 0; width: 133.33%; transform: translate(0, 0) scale(0.75);}.var-select--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-select--non-hint { padding-top: 0;}.var-select--placeholder-hidden { visibility: hidden;}.var-select--focus { color: var(--select-focus-color);}.var-select--spread { transform: scaleX(1);}.var-select--disabled { color: var(--select-disabled-color);}.var-select--error { color: var(--select-error-color);}.var-select--line-disabled { background: var(--select-disabled-color);}.var-select--line-error { background: var(--select-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}
+:root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color: var(--color-text-disabled);}.var-select-footer-margin-enter-from,.var-select-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-select-footer-margin-enter-active,.var-select-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-select { width: 100%; color: var(--select-select-text-color);}.var-select__controller { width: 100%; display: flex; position: relative;}.var-select__menu[var-select-cover] { flex-grow: 1; background: transparent;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto;}.var-select__wrap { position: relative; display: flex; flex-direction: column; padding-top: var(--select-placeholder-size);}.var-select__icon { display: flex; align-items: center; padding: var(--select-icon-padding); font-size: 20px;}.var-select__placeholder { position: absolute; top: 50%; left: 0; width: 100%; transform-origin: left; transition-property: top, transform, width; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1); font-size: var(--select-placeholder-size); color: var(--select-blur-color);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: var(--select-select-padding); outline: none; border: none; font-size: inherit; color: var(--select-select-text-color); word-break: break-all; overflow-x: hidden;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select__line { width: 100%; height: var(--select-line-size); background: var(--select-blur-color);}.var-select__dot { width: 100%; height: var(--select-line-spread-size); background: var(--select-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-select--placeholder-hint { top: 0; width: 133.33%; transform: translate(0, 0) scale(0.75);}.var-select--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-select--non-hint { padding-top: 0;}.var-select--placeholder-hidden { visibility: hidden;}.var-select--focus { color: var(--select-focus-color);}.var-select--spread { transform: scaleX(1);}.var-select--disabled { color: var(--select-disabled-color);}.var-select--error { color: var(--select-error-color);}.var-select--line-disabled { background: var(--select-disabled-color);}.var-select--line-error { background: var(--select-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}

package/lib/select/select.less

@@ -112,6 +112,7 @@
     font-size: inherit;
     color: var(--select-select-text-color);
     word-break: break-all;
+    overflow-x: hidden;
   }
 
   &__arrow[var-select-cover] {

package/lib/skeleton/Skeleton.js

@@ -42,7 +42,8 @@ function render(_ctx, _cache) {
   /* CLASS */
   )], 6
   /* CLASS, STYLE */
-  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", {
+  )) : (0, _vue.createCommentVNode)("v-if", true), _ctx.avatar || _ctx.title || _ctx.toNumber(_ctx.rows) > 0 ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 1,
     class: (0, _vue.normalizeClass)(_ctx.n('article'))
   }, [_ctx.avatar ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
@@ -57,7 +58,8 @@ function render(_ctx, _cache) {
   /* CLASS */
   )], 6
   /* CLASS, STYLE */
-  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", {
+  )) : (0, _vue.createCommentVNode)("v-if", true), _ctx.title || _ctx.toNumber(_ctx.rows) > 0 ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 1,
     class: (0, _vue.normalizeClass)(_ctx.n('section'))
   }, [_ctx.title ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 0,
@@ -89,9 +91,9 @@ function render(_ctx, _cache) {
   /* KEYED_FRAGMENT */
   ))], 2
   /* CLASS */
-  )], 2
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 2
   /* CLASS */
-  )], 2
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 2
   /* CLASS */
   )) : (0, _vue.createCommentVNode)("v-if", true), _ctx.loading && _ctx.fullscreen ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     key: 2,

package/lib/snackbar/style/index.js

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

package/lib/snackbar/style/less.js

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