@varlet/ui 2.3.1 → 2.4.0-alpha.1670751751241

package/highlight/attributes.json

@@ -57,7 +57,11 @@
   },
   "var-app-bar/elevation": {
     "type": "boolean",
-    "description": "是否给导航栏设置海拔 默认值：true"
+    "description": "是否使用海拔 默认值：true"
+  },
+  "var-app-bar/round": {
+    "type": "boolean",
+    "description": "是否使用圆角 默认值：false"
   },
   "var-back-top/target": {
     "type": "string | HTMLElement",
@@ -1063,6 +1067,18 @@
     "type": "any",
     "description": "选项绑定的值 默认值：-"
   },
+  "var-overlay/v-model:show": {
+    "type": "boolean",
+    "description": "是否显示遮罩层 默认值：false"
+  },
+  "var-overlay/lock-scroll": {
+    "type": "boolean",
+    "description": "是否禁止滚动穿透，禁止时滚动遮罩层不会引发 body 的滚动 默认值：true"
+  },
+  "var-overlay/teleport": {
+    "type": "TeleportProps['to']",
+    "description": "遮罩层挂载的位置 默认值：-"
+  },
   "var-pagination/v-model: current": {
     "type": "string | number",
     "description": "当前页数 默认值：1"
@@ -1175,6 +1191,10 @@
     "type": "object",
     "description": "自定义遮罩层的 style 默认值：-"
   },
+  "var-popup/default-style": {
+    "type": "boolean",
+    "description": "是否启用默认样式 默认值：true"
+  },
   "var-popup/transition": {
     "type": "string",
     "description": "过度动画的名称 默认值：-"
@@ -1383,6 +1403,26 @@
     "type": "Array<(v: string | number) => any>",
     "description": "验证规则，返回 `true` 表示验证通过，其余的值则转换为文本作为用户提示 默认值：-"
   },
+  "var-result/type": {
+    "type": "string",
+    "description": "结果状态，可选值为 `info` `success` `warning` `error` `question` `empty` 默认值：success"
+  },
+  "var-result/title": {
+    "type": "string",
+    "description": "标题 默认值：-"
+  },
+  "var-result/description": {
+    "type": "string",
+    "description": "描述 默认值：-"
+  },
+  "var-result/image-size": {
+    "type": "string | number",
+    "description": "图片尺寸 默认值：-"
+  },
+  "var-result/animation": {
+    "type": "boolean",
+    "description": "是否开启动画，仅对 `success` 状态有效 默认值：true"
+  },
   "var-row/gutter": {
     "type": "string | number",
     "description": "列间距 默认值：0"

package/highlight/tags.json

@@ -19,7 +19,8 @@
       "text-color",
       "title",
       "title-position",
-      "elevation"
+      "elevation",
+      "round"
     ]
   },
   "var-back-top": {
@@ -381,6 +382,9 @@
       "radius"
     ]
   },
+  "var-loading-bar": {
+    "attributes": []
+  },
   "var-locale": {
     "attributes": []
   },
@@ -402,6 +406,13 @@
       "value"
     ]
   },
+  "var-overlay": {
+    "attributes": [
+      "v-model:show",
+      "lock-scroll",
+      "teleport"
+    ]
+  },
   "var-pagination": {
     "attributes": [
       "v-model: current",
@@ -440,6 +451,7 @@
       "overlay",
       "overlay-class",
       "overlay-style",
+      "default-style",
       "transition",
       "lock-scroll",
       "close-on-click-overlay",
@@ -514,6 +526,15 @@
       "rules"
     ]
   },
+  "var-result": {
+    "attributes": [
+      "type",
+      "title",
+      "description",
+      "image-size",
+      "animation"
+    ]
+  },
   "var-ripple": {
     "attributes": []
   },

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": "2.3.0",
+  "version": "2.3.1",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -178,12 +178,21 @@
             },
             {
               "name": "elevation",
-              "description": "是否给导航栏设置海拔",
+              "description": "是否使用海拔",
               "default": "true",
               "value": {
                 "type": "boolean",
                 "kind": "expression"
               }
+            },
+            {
+              "name": "round",
+              "description": "是否使用圆角",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
             }
           ],
           "events": [],
@@ -3037,6 +3046,12 @@
             }
           ]
         },
+        {
+          "name": "var-loading-bar",
+          "attributes": [],
+          "events": [],
+          "slots": []
+        },
         {
           "name": "var-locale",
           "attributes": [],
@@ -3178,6 +3193,50 @@
             }
           ]
         },
+        {
+          "name": "var-overlay",
+          "attributes": [
+            {
+              "name": "v-model:show",
+              "description": "是否显示遮罩层",
+              "default": "false",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "lock-scroll",
+              "description": "是否禁止滚动穿透，禁止时滚动遮罩层不会引发 body 的滚动",
+              "default": "true",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "teleport",
+              "description": "遮罩层挂载的位置",
+              "default": "-",
+              "value": {
+                "type": "TeleportProps['to']",
+                "kind": "expression"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "click",
+              "description": "点击遮罩层时触发"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "遮罩层内容"
+            }
+          ]
+        },
         {
           "name": "var-pagination",
           "attributes": [
@@ -3487,6 +3546,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "default-style",
+              "description": "是否启用默认样式",
+              "default": "true",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "transition",
               "description": "过度动画的名称",
@@ -4072,6 +4140,75 @@
           ],
           "slots": []
         },
+        {
+          "name": "var-result",
+          "attributes": [
+            {
+              "name": "type",
+              "description": "结果状态，可选值为 `info` `success` `warning` `error` `question` `empty`",
+              "default": "success",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "title",
+              "description": "标题",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "description",
+              "description": "描述",
+              "default": "-",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "image-size",
+              "description": "图片尺寸",
+              "default": "-",
+              "value": {
+                "type": "string | number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "animation",
+              "description": "是否开启动画，仅对 `success` 状态有效",
+              "default": "true",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            }
+          ],
+          "events": [],
+          "slots": [
+            {
+              "name": "image",
+              "description": "自定义图标"
+            },
+            {
+              "name": "title",
+              "description": "自定义标题"
+            },
+            {
+              "name": "description",
+              "description": "自定义描述"
+            },
+            {
+              "name": "footer",
+              "description": "自定义底部内容"
+            }
+          ]
+        },
         {
           "name": "var-ripple",
           "attributes": [],

package/lib/app-bar/AppBar.js

@@ -17,7 +17,7 @@ var {
 
 function render(_ctx, _cache) {
   return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.elevation, _ctx.n('$-elevation--3')])),
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), [_ctx.round, _ctx.n('--round')], [_ctx.elevation, _ctx.n('$-elevation--3')])),
     style: (0, _vue.normalizeStyle)({
       background: _ctx.color,
       color: _ctx.textColor

package/lib/app-bar/appBar.css

@@ -1 +1 @@
-:root { --app-bar-color: var(--color-primary); --app-bar-title-padding: 0 12px; --app-bar-text-color: #fff; --app-bar-height: 54px; --app-bar-left-gap: 6px; --app-bar-right-gap: 6px;}.var-app-bar { position: relative; display: flex; width: 100%; justify-content: center; align-items: center; height: var(--app-bar-height); background: var(--app-bar-color); color: var(--app-bar-text-color); transition: background-color 0.25s;}.var-app-bar__title { flex: 1; display: flex; justify-content: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: var(--app-bar-title-padding);}.var-app-bar__left,.var-app-bar__right { display: flex; align-items: center; height: 100%; z-index: 2;}.var-app-bar__left { position: absolute; top: 0; left: var(--app-bar-left-gap);}.var-app-bar__right { position: absolute; top: 0; right: var(--app-bar-right-gap);}
+:root { --app-bar-color: var(--color-primary); --app-bar-title-padding: 0 12px; --app-bar-text-color: #fff; --app-bar-height: 54px; --app-bar-left-gap: 6px; --app-bar-right-gap: 6px; --app-bar-border-radius: 4px;}.var-app-bar { position: relative; display: flex; width: 100%; justify-content: center; align-items: center; height: var(--app-bar-height); background: var(--app-bar-color); color: var(--app-bar-text-color); transition: background-color 0.25s;}.var-app-bar__title { flex: 1; display: flex; justify-content: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: var(--app-bar-title-padding);}.var-app-bar__left,.var-app-bar__right { display: flex; align-items: center; height: 100%; z-index: 2;}.var-app-bar__left { position: absolute; top: 0; left: var(--app-bar-left-gap);}.var-app-bar__right { position: absolute; top: 0; right: var(--app-bar-right-gap);}.var-app-bar--round { border-radius: var(--app-bar-border-radius);}

package/lib/app-bar/props.js

@@ -27,6 +27,10 @@ var props = {
   elevation: {
     type: Boolean,
     default: true
+  },
+  round: {
+    type: Boolean,
+    default: false
   }
 };
 exports.props = props;

package/lib/card/Card.js

@@ -56,7 +56,7 @@ function render(_ctx, _cache) {
     })
   }, [(0, _vue.createElementVNode)("div", {
     ref: "cardFloater",
-    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('floater'))),
+    class: (0, _vue.normalizeClass)(_ctx.n('floater')),
     style: (0, _vue.normalizeStyle)({
       width: _ctx.floaterWidth,
       height: _ctx.floaterHeight,

package/lib/index.js

@@ -31,9 +31,11 @@ var Lazy = require('./lazy')['default']
 var Link = require('./link')['default']
 var List = require('./list')['default']
 var Loading = require('./loading')['default']
+var LoadingBar = require('./loading-bar')['default']
 var Locale = require('./locale')['default']
 var Menu = require('./menu')['default']
 var Option = require('./option')['default']
+var Overlay = require('./overlay')['default']
 var Pagination = require('./pagination')['default']
 var Picker = require('./picker')['default']
 var Popup = require('./popup')['default']
@@ -42,6 +44,7 @@ var PullRefresh = require('./pull-refresh')['default']
 var Radio = require('./radio')['default']
 var RadioGroup = require('./radio-group')['default']
 var Rate = require('./rate')['default']
+var Result = require('./result')['default']
 var Ripple = require('./ripple')['default']
 var Row = require('./row')['default']
 var Select = require('./select')['default']
@@ -100,9 +103,11 @@ function install(app) {
   Link.install && app.use(Link)
   List.install && app.use(List)
   Loading.install && app.use(Loading)
+  LoadingBar.install && app.use(LoadingBar)
   Locale.install && app.use(Locale)
   Menu.install && app.use(Menu)
   Option.install && app.use(Option)
+  Overlay.install && app.use(Overlay)
   Pagination.install && app.use(Pagination)
   Picker.install && app.use(Picker)
   Popup.install && app.use(Popup)
@@ -111,6 +116,7 @@ function install(app) {
   Radio.install && app.use(Radio)
   RadioGroup.install && app.use(RadioGroup)
   Rate.install && app.use(Rate)
+  Result.install && app.use(Result)
   Ripple.install && app.use(Ripple)
   Row.install && app.use(Row)
   Select.install && app.use(Select)
@@ -171,9 +177,11 @@ module.exports = {
   Link,
   List,
   Loading,
+  LoadingBar,
   Locale,
   Menu,
   Option,
+  Overlay,
   Pagination,
   Picker,
   Popup,
@@ -182,6 +190,7 @@ module.exports = {
   Radio,
   RadioGroup,
   Rate,
+  Result,
   Ripple,
   Row,
   Select,

package/lib/loading-bar/LoadingBar.js

@@ -0,0 +1,49 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _context = _interopRequireDefault(require("../context"));
+
+var _components = require("../utils/components");
+
+var _elements = require("../utils/elements");
+
+var _props = require("./props");
+
+
+
+
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var {
+  classes,
+  n
+} = (0, _components.createNamespace)('loading-bar');
+
+var _default = (0, _vue.defineComponent)({
+  name: 'VarLoadingBar',
+  props: _props.props,
+
+  setup(props) {
+    return () => {
+      return (0, _vue.createVNode)("div", {
+        "class": classes(n(), [props.error, n('--error')]),
+        "style": {
+          zIndex: _context.default.zIndex + 10,
+          width: props.value + "%",
+          opacity: props.opacity,
+          height: (0, _elements.toSizeUnit)(props.height),
+          backgroundColor: props.error ? props.errorColor : props.color,
+          top: (0, _elements.toSizeUnit)(props.top)
+        }
+      }, null);
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/loading-bar/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._LoadingBarComponent = void 0;
+
+var _LoadingBar = _interopRequireDefault(require("./LoadingBar"));
+
+var _vue = require("vue");
+
+var _components = require("../utils/components");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var timer;
+var isMount;
+var props = (0, _vue.reactive)({
+  value: 0,
+  opacity: 0,
+  error: false
+});
+
+var mergeConfig = options => {
+  Object.assign(props, options);
+};
+
+var changeValue = () => {
+  timer = window.setTimeout(() => {
+    if (props.value >= 95) return;
+    var num = Math.random();
+    if (props.value < 70) num = Math.round(5 * Math.random());
+    props.value += num;
+    changeValue();
+  }, 200);
+};
+
+var start = () => {
+  if (!isMount) {
+    isMount = true;
+    (0, _components.mountInstance)(_LoadingBar.default, props);
+  }
+
+  if (!props.error || props.value === 100) {
+    props.value = 0;
+  }
+
+  setTimeout(() => {
+    props.opacity = 1;
+  }, 200);
+  changeValue();
+};
+
+var finish = () => {
+  props.value = 100;
+  setTimeout(() => {
+    props.opacity = 0;
+    setTimeout(() => {
+      props.error = false;
+    }, 250);
+  }, 300);
+  window.clearTimeout(timer);
+};
+
+var error = () => {
+  props.error = true;
+  LoadingBar.start();
+  setTimeout(LoadingBar.finish, 300);
+};
+
+var LoadingBar = {
+  start,
+  finish,
+  error,
+  mergeConfig
+};
+var _LoadingBarComponent = LoadingBar;
+exports._LoadingBarComponent = _LoadingBarComponent;
+var _default = LoadingBar;
+exports.default = _default;

package/lib/loading-bar/loadingBar.css

@@ -0,0 +1 @@
+:root { --loading-bar-color: var(--color-primary); --loading-bar-error-color: var(--color-danger); --loading-bar-height: 3px;}.var-loading-bar { position: fixed; left: 0; top: 0; transition: all 0.25s; height: var(--loading-bar-height); background-color: var(--loading-bar-color);}.var-loading-bar--error { background-color: var(--loading-bar-error-color);}

package/lib/loading-bar/props.js

@@ -0,0 +1,31 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  value: {
+    type: Number,
+    default: 0
+  },
+  opacity: {
+    type: Number,
+    default: 0
+  },
+  error: {
+    type: Boolean,
+    default: false
+  },
+  color: {
+    type: String
+  },
+  errorColor: {
+    type: String
+  },
+  height: {
+    type: [Number, String]
+  },
+  top: {
+    type: [Number, String]
+  }
+};
+exports.props = props;

package/lib/loading-bar/style/index.js

@@ -0,0 +1,2 @@
+require('../../styles/common.css')
+require('../loadingBar.css')

package/lib/overlay/Overlay.js

@@ -0,0 +1,96 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _lock = require("../context/lock");
+
+var _zIndex = require("../context/zIndex");
+
+var _components = require("../utils/components");
+
+
+
+
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(s);
+}
+
+var {
+  n
+} = (0, _components.createNamespace)('overlay');
+
+var _default = (0, _vue.defineComponent)({
+  name: 'VarOverlay',
+  inheritAttrs: false,
+  props: _props.props,
+
+  setup(props, _ref) {
+    var {
+      slots,
+      attrs
+    } = _ref;
+    var {
+      zIndex
+    } = (0, _zIndex.useZIndex)(() => props.show, 1);
+    var {
+      disabled
+    } = (0, _components.useTeleport)();
+
+    var handleClickOverlay = () => {
+      (0, _components.call)(props.onClick);
+      (0, _components.call)(props['onUpdate:show'], false);
+    };
+
+    (0, _lock.useLock)(() => props.show, () => props.lockScroll);
+
+    var renderOverlay = () => {
+      return (0, _vue.createVNode)("div", (0, _vue.mergeProps)({
+        "class": n(),
+        "style": {
+          zIndex: zIndex.value - 1
+        }
+      }, attrs, {
+        "onClick": handleClickOverlay
+      }), [(0, _components.call)(slots.default)]);
+    };
+
+    var renderTransitionOverlay = () => {
+      var {
+        show
+      } = props;
+      return (0, _vue.createVNode)(_vue.Transition, {
+        "name": n('--fade')
+      }, {
+        default: () => [show && renderOverlay()]
+      });
+    };
+
+    return () => {
+      var {
+        teleport
+      } = props;
+
+      if (teleport) {
+        var _slot;
+
+        return (0, _vue.createVNode)(_vue.Teleport, {
+          "to": teleport,
+          "disabled": disabled.value
+        }, _isSlot(_slot = renderTransitionOverlay()) ? _slot : {
+          default: () => [_slot]
+        });
+      }
+
+      return renderTransitionOverlay();
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/overlay/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._PopupComponent = void 0;
+
+var _Overlay = _interopRequireDefault(require("./Overlay"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_Overlay.default.install = function (app) {
+  app.component(_Overlay.default.name, _Overlay.default);
+};
+
+var _PopupComponent = _Overlay.default;
+exports._PopupComponent = _PopupComponent;
+var _default = _Overlay.default;
+exports.default = _default;

package/lib/overlay/overlay.css

@@ -0,0 +1 @@
+:root { --overlay-background-color: rgba(0, 0, 0, 0.6);}.var-overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--overlay-background-color); transition: all 0.25s;}.var-overlay--fade-enter-from,.var-overlay--fade-leave-to { opacity: 0;}.var-overlay--fade-enter-active,.var-overlay--fade-leave-active { transition: opacity 0.25s;}