@varlet/ui 1.25.0 → 1.25.1

package/highlight/attributes.json

@@ -20,7 +20,7 @@
     "description": "自定义遮罩层的 class 默认值：-"
   },
   "var-action-sheet/overlay-style": {
-    "type": "string",
+    "type": "object",
     "description": "自定义遮罩层的 style 默认值：-"
   },
   "var-action-sheet/lock-scroll": {
@@ -60,13 +60,21 @@
     "description": "是否给导航栏设置海拔 默认值：true"
   },
   "var-back-top/target": {
-    "type": "string",
-    "description": "触发滚动的对象 默认值：-"
+    "type": "string | HTMLElement",
+    "description": "触发滚动的对象，如果为 undefined 会监听距离最近的一个可滚动的祖先节点 默认值：-"
   },
   "var-back-top/visibility-height": {
     "type": "string | number",
     "description": "滚动高度达到此参数值才出现 默认值：200"
   },
+  "var-back-top/bottom": {
+    "type": "string | number",
+    "description": "`BackTop` 距离页面底部的高度 默认值：40"
+  },
+  "var-back-top/right": {
+    "type": "string | number",
+    "description": "`BackTop` 距离页面右侧的宽度 默认值：40"
+  },
   "var-back-top/duration": {
     "type": "number",
     "description": "回到顶部所需时间（ms） 默认值：300"
@@ -112,8 +120,8 @@
     "description": "加载状态 默认值：false"
   },
   "var-button/loading-radius": {
-    "type": "string \\",
-    "description": "loading 的半径，只作用于 `loading-type=\"circle\"` 时 默认值：number_"
+    "type": "string | number",
+    "description": "loading 的半径，只作用于 `loading-type=\"circle\"` 时 默认值：12"
   },
   "var-button/loading-type": {
     "type": "string",
@@ -547,6 +555,14 @@
     "type": "string",
     "description": "取消按钮背景颜色 默认值：-"
   },
+  "var-dialog/dialog-class": {
+    "type": "string",
+    "description": "对话框主体区域的 class 默认值：-"
+  },
+  "var-dialog/dialog-style": {
+    "type": "object",
+    "description": "对话框主体区域的 style 默认值：-"
+  },
   "var-dialog/overlay": {
     "type": "boolean",
     "description": "是否显示遮罩层 默认值：true"
@@ -556,7 +572,7 @@
     "description": "自定义遮罩层的 class 默认值：-"
   },
   "var-dialog/overlay-style": {
-    "type": "string",
+    "type": "object",
     "description": "自定义遮罩层的 style 默认值：-"
   },
   "var-dialog/lock-scroll": {
@@ -984,7 +1000,7 @@
     "description": "自定义遮罩层的 class 默认值：-"
   },
   "var-popup/overlay-style": {
-    "type": "string",
+    "type": "object",
     "description": "自定义遮罩层的 style 默认值：-"
   },
   "var-popup/transition": {
@@ -1275,6 +1291,10 @@
     "type": "boolean",
     "description": "是否开启全屏模式 默认值：false"
   },
+  "var-skeleton/fullscreen-z-index": {
+    "type": "string | number",
+    "description": "全屏模式的层级 默认值：100"
+  },
   "var-skeleton/title-width": {
     "type": "string | number",
     "description": "标题宽度 默认值：50%"

package/highlight/tags.json

@@ -26,6 +26,8 @@
     "attributes": [
       "target",
       "visibility-height",
+      "bottom",
+      "right",
       "duration"
     ]
   },
@@ -202,6 +204,8 @@
       "cancel-button-text-color",
       "confirm-button-color",
       "cancel-button-color",
+      "dialog-class",
+      "dialog-style",
       "overlay",
       "overlay-class",
       "overlay-style",
@@ -488,6 +492,7 @@
       "card",
       "avatar",
       "fullscreen",
+      "fullscreen-z-index",
       "title-width",
       "card-height",
       "avatar-size",

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.24.11",
+  "version": "1.25.0",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -59,7 +59,7 @@
               "description": "自定义遮罩层的 style",
               "default": "-",
               "value": {
-                "type": "string",
+                "type": "object",
                 "kind": "expression"
               }
             },
@@ -207,10 +207,10 @@
           "attributes": [
             {
               "name": "target",
-              "description": "触发滚动的对象",
+              "description": "触发滚动的对象，如果为 undefined 会监听距离最近的一个可滚动的祖先节点",
               "default": "-",
               "value": {
-                "type": "string",
+                "type": "string | HTMLElement",
                 "kind": "expression"
               }
             },
@@ -223,6 +223,24 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "bottom",
+              "description": "`BackTop` 距离页面底部的高度",
+              "default": "40",
+              "value": {
+                "type": "string | number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "right",
+              "description": "`BackTop` 距离页面右侧的宽度",
+              "default": "40",
+              "value": {
+                "type": "string | number",
+                "kind": "expression"
+              }
+            },
             {
               "name": "duration",
               "description": "回到顶部所需时间（ms）",
@@ -354,9 +372,9 @@
             {
               "name": "loading-radius",
               "description": "loading 的半径，只作用于 `loading-type=\"circle\"` 时",
-              "default": "number_",
+              "default": "12",
               "value": {
-                "type": "string \\",
+                "type": "string | number",
                 "kind": "expression"
               }
             },
@@ -1621,6 +1639,24 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "dialog-class",
+              "description": "对话框主体区域的 class",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "dialog-style",
+              "description": "对话框主体区域的 style",
+              "default": "-",
+              "value": {
+                "type": "object",
+                "kind": "expression"
+              }
+            },
             {
               "name": "overlay",
               "description": "是否显示遮罩层",
@@ -1644,7 +1680,7 @@
               "description": "自定义遮罩层的 style",
               "default": "-",
               "value": {
-                "type": "string",
+                "type": "object",
                 "kind": "expression"
               }
             },
@@ -2985,7 +3021,7 @@
               "description": "自定义遮罩层的 style",
               "default": "-",
               "value": {
-                "type": "string",
+                "type": "object",
                 "kind": "expression"
               }
             },
@@ -3821,6 +3857,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "fullscreen-z-index",
+              "description": "全屏模式的层级",
+              "default": "100",
+              "value": {
+                "type": "string | number",
+                "kind": "expression"
+              }
+            },
             {
               "name": "title-width",
               "description": "标题宽度",

package/lib/back-top/BackTop.js

@@ -25,6 +25,11 @@ function render(_ctx, _cache) {
 
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
     class: (0, _vue.normalizeClass)(["var-back-top", [_ctx.show ? 'var-back-top--active' : null]]),
+    ref: "backTopEl",
+    style: (0, _vue.normalizeStyle)({
+      right: _ctx.toSizeUnit(_ctx.right),
+      bottom: _ctx.toSizeUnit(_ctx.bottom)
+    }),
     onClick: _cache[0] || (_cache[0] = (0, _vue.withModifiers)(function () {
       return _ctx.click && _ctx.click(...arguments);
     }, ["stop"]))
@@ -39,8 +44,8 @@ function render(_ctx, _cache) {
     _: 1
     /* STABLE */
 
-  })])], 2
-  /* CLASS */
+  })])], 6
+  /* CLASS, STYLE */
   );
 }
 
@@ -54,13 +59,14 @@ var _default = (0, _vue.defineComponent)({
   props: _props.props,
 
   setup(props) {
-    var element;
     var show = (0, _vue.ref)(false);
+    var backTopEl = (0, _vue.ref)(null);
+    var target;
 
     var click = event => {
       props.onClick == null ? void 0 : props.onClick(event);
-      var left = (0, _elements.getScrollLeft)(element);
-      (0, _elements.scrollTo)(element, {
+      var left = (0, _elements.getScrollLeft)(target);
+      (0, _elements.scrollTo)(target, {
         left,
         duration: props.duration,
         animation: _shared.easeInOutCubic
@@ -68,27 +74,44 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var scroll = () => {
-      show.value = (0, _elements.getScrollTop)(element) >= (0, _shared.toNumber)(props.visibilityHeight);
+      show.value = (0, _elements.getScrollTop)(target) >= (0, _elements.toPxNum)(props.visibilityHeight);
     };
 
     var throttleScroll = (0, _shared.throttle)(scroll, 200);
 
-    var getHTMLElement = () => {
-      if (!(0, _shared.isString)(props.target)) throw Error('[Varlet] BackTop: type of prop "target" should be a string');
-      var el = document.querySelector(props.target);
-      if (!el) throw Error('[Varlet] BackTop: "target" should be a selector');
-      return el;
+    var getTarget = () => {
+      var {
+        target
+      } = props;
+
+      if ((0, _shared.isString)(target)) {
+        var el = document.querySelector(props.target);
+
+        if (!el) {
+          throw Error('[Varlet] BackTop: target element cannot found');
+        }
+
+        return el;
+      }
+
+      if ((0, _shared.isObject)(target)) {
+        return target;
+      }
+
+      throw Error('[Varlet] BackTop: type of prop "target" should be a selector or an element object');
     };
 
     (0, _vue.onMounted)(() => {
-      element = props.target ? getHTMLElement() : window;
-      element.addEventListener('scroll', throttleScroll);
+      target = props.target ? getTarget() : (0, _elements.getParentScroller)(backTopEl.value);
+      target.addEventListener('scroll', throttleScroll);
     });
     (0, _vue.onBeforeUnmount)(() => {
-      element.removeEventListener('scroll', throttleScroll);
+      target.removeEventListener('scroll', throttleScroll);
     });
     return {
       show,
+      backTopEl,
+      toSizeUnit: _elements.toSizeUnit,
       click
     };
   }

package/lib/back-top/props.js

@@ -11,8 +11,14 @@ var props = {
     type: Number,
     default: 300
   },
+  right: {
+    type: [Number, String]
+  },
+  bottom: {
+    type: [Number, String]
+  },
   target: {
-    type: String
+    type: [String, Object]
   },
   onClick: {
     type: Function

package/lib/collapse/Collapse.js

@@ -51,9 +51,9 @@ var _default = (0, _vue.defineComponent)({
     };
 
     var getValue = (value, isExpand) => {
-      if (!checkValue()) return;
+      if (!checkValue()) return null;
       if (isExpand) return props.accordion ? value : [...props.modelValue, value];
-      return props.accordion ? undefined : props.modelValue.filter(name => name !== value);
+      return props.accordion ? null : props.modelValue.filter(name => name !== value);
     };
 
     var updateItem = (value, isExpand) => {

package/lib/dialog/Dialog.js

@@ -33,7 +33,7 @@ function render(_ctx, _cache) {
   var _component_var_popup = (0, _vue.resolveComponent)("var-popup");
 
   return (0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_popup, {
-    class: "var-dialog__popup-radius",
+    class: "var-dialog__popup",
     "var-dialog-cover": "",
     show: _ctx.popupShow,
     overlay: _ctx.overlay,
@@ -50,7 +50,8 @@ function render(_ctx, _cache) {
     onClickOverlay: _ctx.handleClickOverlay
   }, {
     default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
-      class: "var--box var-dialog"
+      class: ["var--box var-dialog", _ctx.dialogClass],
+      style: _ctx.dialogStyle
     }, _ctx.$attrs), [(0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.dt(_ctx.title, _ctx.pack.dialogTitle)), 1
     /* TEXT */
     )])]), (0, _vue.createElementVNode)("div", {

package/lib/dialog/dialog.css

@@ -1 +1 @@
-:root { --dialog-width: 280px; --dialog-border-radius: 2px; --dialog-title-padding: 20px 20px 0; --dialog-message-color: #888; --dialog-message-padding: 12px 20px; --dialog-message-line-height: 24px; --dialog-message-font-size: var(--font-size-md); --dialog-title-font-size: var(--font-size-lg); --dialog-actions-padding: 0 12px 12px; --dialog-button-margin-left: 6px; --dialog-confirm-button-color: var(--color-primary); --dialog-cancel-button-color: var(--color-primary); --dialog-background: #fff;}.var-dialog { width: var(--dialog-width); border-radius: 3px; background: var(--dialog-background); transition: 0.25s background-color;}.var-dialog__popup-radius[var-dialog-cover] { border-radius: var(--dialog-border-radius);}.var-dialog__title { font-size: var(--dialog-title-font-size); font-weight: 400; padding: var(--dialog-title-padding);}.var-dialog__message { padding: var(--dialog-message-padding); color: var(--dialog-message-color); line-height: var(--dialog-message-line-height); font-size: var(--dialog-message-font-size);}.var-dialog__actions { display: flex; justify-content: flex-end; padding: var(--dialog-actions-padding);}.var-dialog__button[var-dialog-cover] { margin-left: var(--dialog-button-margin-left); background-color: transparent; box-shadow: none;}.var-dialog__button[var-dialog-cover]:active { box-shadow: none;}.var-dialog__confirm-button[var-dialog-cover] { color: var(--dialog-confirm-button-color);}.var-dialog__cancel-button[var-dialog-cover] { color: var(--dialog-cancel-button-color);}
+:root { --dialog-width: 280px; --dialog-border-radius: 3px; --dialog-title-padding: 20px 20px 0; --dialog-message-color: #888; --dialog-message-padding: 12px 20px; --dialog-message-line-height: 24px; --dialog-message-font-size: var(--font-size-md); --dialog-title-font-size: var(--font-size-lg); --dialog-actions-padding: 0 12px 12px; --dialog-button-margin-left: 6px; --dialog-confirm-button-color: var(--color-primary); --dialog-cancel-button-color: var(--color-primary); --dialog-background: #fff;}.var-dialog { width: var(--dialog-width); border-radius: var(--dialog-border-radius); background: var(--dialog-background); transition: 0.25s background-color;}.var-dialog__popup[var-dialog-cover] { background: transparent;}.var-dialog__title { font-size: var(--dialog-title-font-size); font-weight: 400; padding: var(--dialog-title-padding);}.var-dialog__message { padding: var(--dialog-message-padding); color: var(--dialog-message-color); line-height: var(--dialog-message-line-height); font-size: var(--dialog-message-font-size);}.var-dialog__actions { display: flex; justify-content: flex-end; padding: var(--dialog-actions-padding);}.var-dialog__button[var-dialog-cover] { margin-left: var(--dialog-button-margin-left); background-color: transparent; box-shadow: none;}.var-dialog__button[var-dialog-cover]:active { box-shadow: none;}.var-dialog__confirm-button[var-dialog-cover] { color: var(--dialog-confirm-button-color);}.var-dialog__cancel-button[var-dialog-cover] { color: var(--dialog-cancel-button-color);}

package/lib/dialog/dialog.less

@@ -1,5 +1,5 @@
 @dialog-width: 280px;
-@dialog-border-radius: 2px;
+@dialog-border-radius: 3px;
 @dialog-title-padding: 20px 20px 0;
 @dialog-message-color: #888;
 @dialog-message-padding: 12px 20px;
@@ -30,12 +30,12 @@
 
 .var-dialog {
   width: var(--dialog-width);
-  border-radius: 3px;
+  border-radius: var(--dialog-border-radius);
   background: var(--dialog-background);
   transition: 0.25s background-color;
 
-  &__popup-radius[var-dialog-cover] {
-    border-radius: var(--dialog-border-radius);
+  &__popup[var-dialog-cover] {
+    background: transparent;
   }
 
   &__title {

package/lib/dialog/props.js

@@ -66,6 +66,12 @@ var props = _extends({
   },
   'onUpdate:show': {
     type: Function
+  },
+  dialogClass: {
+    type: String
+  },
+  dialogStyle: {
+    type: Object
   }
 }, (0, _components.pickProps)(_props.props, ['overlay', 'overlayClass', 'overlayStyle', 'lockScroll', 'closeOnClickOverlay', 'teleport', 'onOpen', 'onClose', 'onOpened', 'onClosed', 'onClickOverlay', // internal for function call closes the dialog
 'onRouteChange']));