@varlet/ui 1.26.7 → 1.26.8

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/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