@varlet/ui 1.24.11 → 1.25.0-alpha.1642582155449

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.10",
+  "version": "1.24.11",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -169,7 +169,7 @@
             },
             {
               "name": "title-position",
-              "description": "标题位置,可选值为 `left`, `center`, `right`",
+              "description": "标题位置，可选值为 `left` `center` `right`",
               "default": "left",
               "value": {
                 "type": "string",
@@ -190,7 +190,7 @@
           "slots": [
             {
               "name": "default",
-              "description": "自定义标题内容,会覆盖 `title` 的内容"
+              "description": "自定义标题内容，会覆盖 `title` 的内容"
             },
             {
               "name": "left",
@@ -251,7 +251,7 @@
           "attributes": [
             {
               "name": "type",
-              "description": "类型， 可选值为 `default` `primary` `info` `success` `warning` `danger`",
+              "description": "类型，可选值为 `default` `primary` `info` `success` `warning` `danger`",
               "default": "default",
               "value": {
                 "type": "string",
@@ -305,7 +305,7 @@
             },
             {
               "name": "icon",
-              "description": "自定义徽标中图标的内容（优先级高于`value`）",
+              "description": "自定义徽标中图标的内容（优先级高于 `value`）",
               "default": "-",
               "value": {
                 "type": "string",
@@ -354,9 +354,9 @@
             {
               "name": "loading-radius",
               "description": "loading 的半径，只作用于 `loading-type=\"circle\"` 时",
-              "default": "12",
+              "default": "number_",
               "value": {
-                "type": "string | number",
+                "type": "string \\",
                 "kind": "expression"
               }
             },
@@ -378,6 +378,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "auto-loading",
+              "description": "自动 loading 模式，方便处理异步任务",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "round",
               "description": "是否是圆形按钮",
@@ -864,7 +873,7 @@
             },
             {
               "name": "size",
-              "description": "尺寸， 可选值为 `normal` `mini` `small` `large`",
+              "description": "尺寸，可选值为 `normal` `mini` `small` `large`",
               "default": "normal",
               "value": {
                 "type": "string",
@@ -1039,7 +1048,7 @@
             },
             {
               "name": "icon",
-              "description": "自定义右侧icon"
+              "description": "自定义右侧 icon"
             }
           ]
         },
@@ -1104,7 +1113,7 @@
           "attributes": [
             {
               "name": "time",
-              "description": "倒计时时长(ms)",
+              "description": "倒计时时长（ms）",
               "default": "0",
               "value": {
                 "type": "string | number",
@@ -1314,7 +1323,7 @@
             },
             {
               "name": "validate-trigger",
-              "description": "触发验证的时机， 可选值为 `onInputChange` `onLazyChange` `onIncrement` `onDecrement`",
+              "description": "触发验证的时机，可选值为 `onInputChange` `onLazyChange` `onIncrement` `onDecrement`",
               "default": "['onIncrement', 'onDecrement', 'onInputChange', 'onLazyChange']",
               "value": {
                 "type": "ValidateTriggers[]",
@@ -1357,7 +1366,7 @@
             {
               "name": "v-model",
               "description": "被选择的日期（ISO 8601 格式，`YYYY-MM-DD` 或 `YYYY-MM`）",
-              "default": "-",
+              "default": "undefined",
               "value": {
                 "type": "string[] | string",
                 "kind": "expression"
@@ -1365,7 +1374,7 @@
             },
             {
               "name": "type",
-              "description": "选择器类型，可选值为 `date, month`",
+              "description": "选择器类型，可选值为 `date month`",
               "default": "date",
               "value": {
                 "type": "string",
@@ -1533,7 +1542,7 @@
             },
             {
               "name": "message-align",
-              "description": "对话框内容文字对齐方式，可选值 `center`, `left`, `right`",
+              "description": "对话框内容文字对齐方式，可选值 `center` `left` `right`",
               "default": "left",
               "value": {
                 "type": "string",
@@ -1846,7 +1855,7 @@
             },
             {
               "name": "transition",
-              "description": "过渡动画时间(毫秒)",
+              "description": "过渡动画时间（ms）",
               "default": "0",
               "value": {
                 "type": "string | number",
@@ -1876,7 +1885,7 @@
             },
             {
               "name": "fit",
-              "description": "填充模式, 可选值为 `fill` `contain` `cover` `none` `scale-down`",
+              "description": "填充模式, 可选值为 `fill contain cover none scale-down`",
               "default": "fill",
               "value": {
                 "type": "string",
@@ -2344,7 +2353,7 @@
             },
             {
               "name": "validate-trigger",
-              "description": "触发验证的时机， 可选值为 `onFocus` `onBlur` `onChange` `onClick` `onClear` `onInput`",
+              "description": "触发验证的时机，可选值为 `onFocus` `onBlur` `onChange` `onClick` `onClear` `onInput`",
               "default": "['onInput', 'onClear']",
               "value": {
                 "type": "ValidateTriggers[]",
@@ -2595,7 +2604,7 @@
             },
             {
               "name": "alignment",
-              "description": "菜单的对齐方式， 可选值为 `top` `bottom`， 源点为默认插槽的左上角，top为菜单顶部对齐源点，bottom为菜单底部对齐",
+              "description": "菜单的对齐方式， 可选值为 `top` `bottom`， 源点为默认插槽的左上角，top 为菜单顶部对齐源点，bottom 为菜单底部对齐",
               "default": "top",
               "value": {
                 "type": "string",
@@ -2604,7 +2613,7 @@
             },
             {
               "name": "offset-x",
-              "description": "x轴偏移量， 相对于菜单对齐后的位置",
+              "description": "x 轴偏移量， 相对于菜单对齐后的位置",
               "default": "0",
               "value": {
                 "type": "number | string",
@@ -2613,7 +2622,7 @@
             },
             {
               "name": "offset-y",
-              "description": "y轴偏移量， 相对于菜单对齐后的位置",
+              "description": "y 轴偏移量， 相对于菜单对齐后的位置",
               "default": "0",
               "value": {
                 "type": "number | string",
@@ -2823,7 +2832,7 @@
             },
             {
               "name": "text-key",
-              "description": "文本的属性key",
+              "description": "文本的属性 key",
               "default": "text",
               "value": {
                 "type": "string",
@@ -2964,7 +2973,7 @@
             },
             {
               "name": "overlay-class",
-              "description": "自定义遮罩层的class",
+              "description": "自定义遮罩层的 class",
               "default": "-",
               "value": {
                 "type": "string",
@@ -2973,7 +2982,7 @@
             },
             {
               "name": "overlay-style",
-              "description": "自定义遮罩层的style",
+              "description": "自定义遮罩层的 style",
               "default": "-",
               "value": {
                 "type": "string",
@@ -2991,7 +3000,7 @@
             },
             {
               "name": "lock-scroll",
-              "description": "是否禁止滚动穿透，禁止时滚动弹出层不会引发body的滚动",
+              "description": "是否禁止滚动穿透，禁止时滚动弹出层不会引发 body 的滚动",
               "default": "true",
               "value": {
                 "type": "boolean",
@@ -3051,7 +3060,7 @@
           "attributes": [
             {
               "name": "mode",
-              "description": "`progress` 的模式，可选值为`linear, circle`",
+              "description": "`progress` 的模式，可选值为 `linear, circle`",
               "default": "linear",
               "value": {
                 "type": "string",
@@ -3171,7 +3180,7 @@
             },
             {
               "name": "animation-duration",
-              "description": "加载结束后回到初始位置的动画时长(ms)",
+              "description": "加载结束后回到初始位置的动画时长（ms）",
               "default": "300",
               "value": {
                 "type": "string | number",
@@ -3180,7 +3189,7 @@
             },
             {
               "name": "success-duration",
-              "description": "成功提示展示时长(ms)",
+              "description": "成功提示展示时长（ms）",
               "default": "2000",
               "value": {
                 "type": "string | number",
@@ -3189,7 +3198,7 @@
             },
             {
               "name": "bg-color",
-              "description": "control的背景颜色",
+              "description": "control 的背景颜色",
               "default": "#005CAF",
               "value": {
                 "type": "string",
@@ -3207,7 +3216,7 @@
             },
             {
               "name": "success-bg-color",
-              "description": "成功状态下control的背景颜色",
+              "description": "成功状态下 control 的背景颜色",
               "default": "#4CAF50",
               "value": {
                 "type": "string",
@@ -3216,7 +3225,7 @@
             },
             {
               "name": "success-color",
-              "description": "成功状态下control的颜色",
+              "description": "成功状态下 control 的颜色",
               "default": "ffffff",
               "value": {
                 "type": "string",
@@ -3323,7 +3332,7 @@
             },
             {
               "name": "rules",
-              "description": "验证规则，返回`true`表示验证通过，其余的值则转换为文本作为用户提示",
+              "description": "验证规则，返回 `true` 表示验证通过，其余的值则转换为文本作为用户提示",
               "default": "-",
               "value": {
                 "type": "Array<(value: any) => any>",
@@ -3379,7 +3388,7 @@
             },
             {
               "name": "rules",
-              "description": "验证规则，返回`true`表示验证通过，其余的值则转换为文本作为用户提示",
+              "description": "验证规则，返回 `true` 表示验证通过，其余的值则转换为文本作为用户提示",
               "default": "-",
               "value": {
                 "type": "Array<(value: any) => any>",
@@ -3459,7 +3468,7 @@
             },
             {
               "name": "size",
-              "description": "图标大小，默认单位为`px`",
+              "description": "图标大小，默认单位为 `px`",
               "default": "20",
               "value": {
                 "type": "number | string",
@@ -3468,7 +3477,7 @@
             },
             {
               "name": "gap",
-              "description": "图标间隔，默认单位为`px`",
+              "description": "图标间隔，默认单位为 `px`",
               "default": "4",
               "value": {
                 "type": "number | string",
@@ -3486,7 +3495,7 @@
             },
             {
               "name": "half-icon",
-              "description": "半选时图标的样式，只有在`half`为`true`时才有效",
+              "description": "半选时图标的样式，只有在 `half` 为 `true` 时才有效",
               "default": "star-half-full",
               "value": {
                 "type": "string",
@@ -3504,7 +3513,7 @@
             },
             {
               "name": "disabled-color",
-              "description": "禁止评分时图标的颜色，只有在`disabled`为`true`时才有效，优先级高于`color`、`empty-color`",
+              "description": "禁止评分时图标的颜色，只有在 `disabled` 为 `true` 时才有效，优先级高于 `color`、`empty-color`",
               "default": "-",
               "value": {
                 "type": "string",
@@ -3531,7 +3540,7 @@
             },
             {
               "name": "rules",
-              "description": "验证规则，返回`true`表示验证通过，其余的值则转换为文本作为用户提示",
+              "description": "验证规则，返回 `true` 表示验证通过，其余的值则转换为文本作为用户提示",
               "default": "-",
               "value": {
                 "type": "Array<(v: string | number) => any>",
@@ -3710,7 +3719,7 @@
             },
             {
               "name": "validate-trigger",
-              "description": "触发验证的时机， 可选值为 `onFocus` `onBlur` `onChange` `onClick` `onClear` `onClose`",
+              "description": "触发验证的时机，可选值为 `onFocus` `onBlur` `onChange` `onClick` `onClear` `onClose`",
               "default": "['onChange', 'onClear', 'onClose']",
               "value": {
                 "type": "ValidateTriggers[]",
@@ -3719,7 +3728,7 @@
             },
             {
               "name": "rules",
-              "description": "验证规则，返回`true`表示验证通过，其余的值则转换为文本作为用户提示",
+              "description": "验证规则，返回 `true` 表示验证通过，其余的值则转换为文本作为用户提示",
               "default": "-",
               "value": {
                 "type": "Array<(v: any | any[]) => any>",
@@ -3880,7 +3889,7 @@
             },
             {
               "name": "step",
-              "description": "步长，取值为`1 ~ 100`间的整数",
+              "description": "步长，取值为 `1 ~ 100` 间的整数",
               "default": "1",
               "value": {
                 "type": "string | number",
@@ -3898,7 +3907,7 @@
             },
             {
               "name": "label-visible",
-              "description": "是否显示标签，可选值为`always, normal, never`",
+              "description": "是否显示标签，可选值为 `always normal never`",
               "default": "normal",
               "value": {
                 "type": "string",
@@ -3986,7 +3995,7 @@
           "attributes": [
             {
               "name": "v-model:show",
-              "description": "是否显示`Snackbar`",
+              "description": "是否显示 `Snackbar`",
               "default": "false",
               "value": {
                 "type": "boolean",
@@ -3995,7 +4004,7 @@
             },
             {
               "name": "type",
-              "description": "`Snackbar`类型，可选值为`success, warning, info, error, loading`之一",
+              "description": "`Snackbar` 类型，可选值为 `success warning info error loading`",
               "default": "-",
               "value": {
                 "type": "string",
@@ -4004,7 +4013,7 @@
             },
             {
               "name": "position",
-              "description": "`Snackbar`位置，可选值为`top, center, bottom`之一",
+              "description": "`Snackbar`  位置，可选值为 `top center bottom`",
               "default": "top",
               "value": {
                 "type": "string",
@@ -4049,7 +4058,7 @@
             },
             {
               "name": "loading-type",
-              "description": "加载动画类型(见`Loading`组件)",
+              "description": "加载动画类型(见 `Loading` 组件)",
               "default": "circle",
               "value": {
                 "type": "string",
@@ -4058,7 +4067,7 @@
             },
             {
               "name": "loading-size",
-              "description": "加载动画大小(见`Loading`组件)",
+              "description": "加载动画大小(见 `Loading` 组件)",
               "default": "normal",
               "value": {
                 "type": "string",
@@ -4096,19 +4105,19 @@
           "events": [
             {
               "name": "open",
-              "description": "打开`Snackbar`时触发"
+              "description": "打开 `Snackbar` 时触发"
             },
             {
               "name": "opened",
-              "description": "打开`Snackbar`动画结束时触发"
+              "description": "打开 `Snackbar` 动画结束时触发"
             },
             {
               "name": "close",
-              "description": "关闭`Snackbar`时触发"
+              "description": "关闭 `Snackbar` 时触发"
             },
             {
               "name": "closed",
-              "description": "关闭`Snackbar`动画结束时触发"
+              "description": "关闭 `Snackbar` 动画结束时触发"
             }
           ],
           "slots": [
@@ -4145,7 +4154,7 @@
             },
             {
               "name": "size",
-              "description": "间距，可选值为 `mini` `small` `normal` `large` 或`[垂直间距, 水平间距]`(支持长度单位)",
+              "description": "间距，可选值为 `mini` `small` `normal` `large` 或 `[垂直间距, 水平间距]` (支持长度单位)",
               "default": "normal",
               "value": {
                 "type": "string | number | [string | number, string | number]",
@@ -4223,7 +4232,7 @@
           "slots": [
             {
               "name": "default",
-              "description": "step的内容"
+              "description": "step 的内容"
             }
           ]
         },
@@ -4276,7 +4285,7 @@
           "slots": [
             {
               "name": "default",
-              "description": "step的内容"
+              "description": "step 的内容"
             }
           ]
         },
@@ -4303,7 +4312,7 @@
             },
             {
               "name": "css-mode",
-              "description": "开启原生`css sticky`模式",
+              "description": "开启原生 `css sticky` 模式",
               "default": "false",
               "value": {
                 "type": "boolean",
@@ -4312,7 +4321,7 @@
             },
             {
               "name": "disabled",
-              "description": "禁用吸顶, 设置为`true`时, 元素会回到文档流中",
+              "description": "禁用吸顶, 设置为 `true` 时, 元素会回到文档流中",
               "default": "false",
               "value": {
                 "type": "boolean",
@@ -4374,7 +4383,7 @@
             },
             {
               "name": "autoplay",
-              "description": "自动播放间隔时间(ms)",
+              "description": "自动播放间隔时间 (ms)",
               "default": "-",
               "value": {
                 "type": "string | number",
@@ -4554,7 +4563,7 @@
             },
             {
               "name": "size",
-              "description": "switch的大小",
+              "description": "switch 的大小",
               "default": "20",
               "value": {
                 "type": "string | number",
@@ -4669,7 +4678,7 @@
           "attributes": [
             {
               "name": "v-model:active",
-              "description": "激活的选项卡标识, 优先匹配name，其次是index",
+              "description": "激活的选项卡标识, 优先匹配 name，其次是 index",
               "default": "default",
               "value": {
                 "type": "string",
@@ -4678,7 +4687,7 @@
             },
             {
               "name": "layout-direction",
-              "description": "选项卡组的布局方向， 可选值为 `horizontal` `vertical`",
+              "description": "选项卡组的布局方向，可选值为 `horizontal` `vertical`",
               "default": "horizontal",
               "value": {
                 "type": "string",
@@ -4861,7 +4870,7 @@
             },
             {
               "name": "format",
-              "description": "选择器时间格式，可选值为`ampm, 24hr`",
+              "description": "选择器时间格式，可选值为 `ampm 24hr`",
               "default": "ampm",
               "value": {
                 "type": "string",
@@ -5062,7 +5071,7 @@
             },
             {
               "name": "rules",
-              "description": "验证规则，返回`true`表示验证通过，其余的值则转换为文本作为用户提示",
+              "description": "验证规则，返回 `true` 表示验证通过，其余的值则转换为文本作为用户提示",
               "default": "-",
               "value": {
                 "type": "Array<(v: VarFile, u: VarFileUtils) => any>",
@@ -5073,7 +5082,7 @@
           "events": [
             {
               "name": "before-read",
-              "description": "文件读取前触发，返回假值阻止文件读取(支持promise)"
+              "description": "文件读取前触发，返回假值阻止文件读取(支持 promise)"
             },
             {
               "name": "after-read",
@@ -5085,7 +5094,7 @@
             },
             {
               "name": "before-remove",
-              "description": "文件删除前触发，返回假值阻止文件删除(支持promise)"
+              "description": "文件删除前触发，返回假值阻止文件删除(支持 promise)"
             },
             {
               "name": "remove",

package/lib/app-bar/AppBar.js

@@ -34,7 +34,7 @@ function render(_ctx, _cache) {
     key: 0,
     class: "var-app-bar__title",
     style: (0, _vue.normalizeStyle)({
-      paddingLeft: _ctx.$slots.left ? 0 : undefined
+      paddingLeft: _ctx.paddingLeft
     })
   }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.title), 1
   /* TEXT */
@@ -46,7 +46,7 @@ function render(_ctx, _cache) {
     key: 0,
     class: "var-app-bar__title",
     style: (0, _vue.normalizeStyle)({
-      paddingRight: _ctx.$slots.right ? 0 : undefined
+      paddingRight: _ctx.paddingRight
     })
   }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.title), 1
   /* TEXT */
@@ -60,7 +60,28 @@ function render(_ctx, _cache) {
 var _default = (0, _vue.defineComponent)({
   render,
   name: 'VarAppBar',
-  props: _props.props
+  props: _props.props,
+
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
+    var paddingLeft = (0, _vue.ref)();
+    var paddingRight = (0, _vue.ref)();
+
+    var computePadding = () => {
+      paddingLeft.value = slots.left ? 0 : undefined;
+      paddingRight.value = slots.right ? 0 : undefined;
+    };
+
+    (0, _vue.onMounted)(computePadding);
+    (0, _vue.onUpdated)(computePadding);
+    return {
+      paddingLeft,
+      paddingRight
+    };
+  }
+
 });
 
 exports.default = _default;

package/lib/button/Button.js

@@ -36,7 +36,7 @@ function render(_ctx, _cache) {
     onTouchstart: _cache[1] || (_cache[1] = function () {
       return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
     })
-  }, [_ctx.loading ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_loading, {
+  }, [_ctx.loading || _ctx.pending ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_loading, {
     key: 0,
     class: "var-button__loading",
     "var-button-cover": "",
@@ -46,7 +46,7 @@ function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["type", "size", "radius"])) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-button__content", [_ctx.loading ? 'var-button--hidden' : null]])
+    class: (0, _vue.normalizeClass)(["var-button__content", [_ctx.loading || _ctx.pending ? 'var-button--hidden' : null]])
   }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2
   /* CLASS */
   )], 46
@@ -68,6 +68,17 @@ var _default = (0, _vue.defineComponent)({
   props: _props.props,
 
   setup(props) {
+    var pending = (0, _vue.ref)(false);
+
+    var attemptAutoLoading = result => {
+      if (props.autoLoading) {
+        pending.value = true;
+        Promise.resolve(result).finally(() => {
+          pending.value = false;
+        });
+      }
+    };
+
     var handleClick = e => {
       var {
         loading,
@@ -75,11 +86,11 @@ var _default = (0, _vue.defineComponent)({
         onClick
       } = props;
 
-      if (loading || disabled) {
+      if (!onClick || loading || disabled || pending.value) {
         return;
       }
 
-      onClick == null ? void 0 : onClick(e);
+      attemptAutoLoading(onClick(e));
     };
 
     var handleTouchstart = e => {
@@ -89,14 +100,15 @@ var _default = (0, _vue.defineComponent)({
         onTouchstart
       } = props;
 
-      if (loading || disabled) {
+      if (!onTouchstart || loading || disabled || pending.value) {
         return;
       }
 
-      onTouchstart == null ? void 0 : onTouchstart(e);
+      attemptAutoLoading(onTouchstart(e));
     };
 
     return {
+      pending,
       handleClick,
       handleTouchstart
     };

package/lib/button/props.js

@@ -60,6 +60,10 @@ var props = {
   textColor: {
     type: String
   },
+  autoLoading: {
+    type: Boolean,
+    default: false
+  },
   loadingRadius: {
     type: [Number, String],
     default: 12