@varlet/ui 2.3.1 → 2.4.0-alpha.1670569085974

package/highlight/attributes.json

@@ -1175,6 +1175,10 @@
     "type": "object",
     "description": "自定义遮罩层的 style 默认值：-"
   },
+  "var-popup/default-style": {
+    "type": "boolean",
+    "description": "是否启用默认样式 默认值：true"
+  },
   "var-popup/transition": {
     "type": "string",
     "description": "过度动画的名称 默认值：-"
@@ -1383,6 +1387,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

@@ -381,6 +381,9 @@
       "radius"
     ]
   },
+  "var-loading-bar": {
+    "attributes": []
+  },
   "var-locale": {
     "attributes": []
   },
@@ -440,6 +443,7 @@
       "overlay",
       "overlay-class",
       "overlay-style",
+      "default-style",
       "transition",
       "lock-scroll",
       "close-on-click-overlay",
@@ -514,6 +518,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": {
@@ -3037,6 +3037,12 @@
             }
           ]
         },
+        {
+          "name": "var-loading-bar",
+          "attributes": [],
+          "events": [],
+          "slots": []
+        },
         {
           "name": "var-locale",
           "attributes": [],
@@ -3487,6 +3493,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "default-style",
+              "description": "是否启用默认样式",
+              "default": "true",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
             {
               "name": "transition",
               "description": "过度动画的名称",
@@ -4072,6 +4087,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/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,6 +31,7 @@ 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']
@@ -42,6 +43,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,6 +102,7 @@ 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)
@@ -111,6 +114,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,6 +175,7 @@ module.exports = {
   Link,
   List,
   Loading,
+  LoadingBar,
   Locale,
   Menu,
   Option,
@@ -182,6 +187,7 @@ module.exports = {
   Radio,
   RadioGroup,
   Rate,
+  Result,
   Ripple,
   Row,
   Select,

package/lib/loading-bar/LoadingBar.js

@@ -0,0 +1,48 @@
+"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
+        }
+      }, null);
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/loading-bar/index.js

@@ -0,0 +1,72 @@
+"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 LoadingBar = 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);
+};
+
+LoadingBar.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();
+};
+
+LoadingBar.finish = () => {
+  props.value = 100;
+  setTimeout(() => {
+    props.opacity = 0;
+    setTimeout(() => {
+      props.error = false;
+    }, 250);
+  }, 300);
+  window.clearTimeout(timer);
+};
+
+LoadingBar.error = () => {
+  props.error = true;
+  LoadingBar.start();
+  setTimeout(LoadingBar.finish, 300);
+};
+
+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,28 @@
+"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]
+  }
+};
+exports.props = props;

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

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

package/lib/popup/Popup.js

@@ -88,7 +88,7 @@ var _default = (0, _vue.defineComponent)({
 
     var renderContent = () => {
       return (0, _vue.createVNode)("div", (0, _vue.mergeProps)({
-        "class": classes(n('content'), n('$-elevation--3'), n("--" + props.position)),
+        "class": classes(n('content'), n("--" + props.position), [props.defaultStyle, n('--content-background-color')], [props.defaultStyle, n('$-elevation--3')]),
         "style": {
           zIndex: zIndex.value
         }

package/lib/popup/popup.css

@@ -1 +1 @@
-:root { --popup-overlay-background-color: rgba(0, 0, 0, 0.6); --popup-content-background-color: #fff;}.var-fade-enter-from,.var-fade-leave-to { opacity: 0;}.var-fade-enter-active,.var-fade-leave-active { transition: opacity 0.25s;}.var-pop-center-enter-from,.var-pop-center-leave-to { transform: scale(0.3);}.var-pop-center-enter-active,.var-pop-center-leave-active { transition: all 0.25s;}.var-pop-bottom-enter-from,.var-pop-bottom-leave-to { transform: translateY(100%);}.var-pop-bottom-enter-active,.var-pop-bottom-leave-active { transition: all 0.25s;}.var-pop-top-enter-from,.var-pop-top-leave-to { transform: translateY(-100%);}.var-pop-top-enter-active,.var-pop-top-leave-active { transition: all 0.25s;}.var-pop-left-enter-from,.var-pop-left-leave-to { transform: translateX(-100%);}.var-pop-left-enter-active,.var-pop-left-leave-active { transition: all 0.25s;}.var-pop-right-enter-from,.var-pop-right-leave-to { transform: translateX(100%);}.var-pop-right-enter-active,.var-pop-right-leave-active { transition: all 0.25s;}.var-popup { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0;}.var-popup__overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--popup-overlay-background-color); transition: all 0.25s;}.var-popup__content { overflow: auto; background-color: var(--popup-content-background-color); transition: all 0.25s;}.var-popup--center { position: relative;}.var-popup--bottom { min-width: 100%; position: absolute; left: 0; bottom: 0;}.var-popup--top { min-width: 100%; position: absolute; left: 0; top: 0;}.var-popup--left { min-height: 100%; position: absolute; left: 0; top: 0;}.var-popup--right { min-height: 100%; position: absolute; right: 0; top: 0;}
+:root { --popup-overlay-background-color: rgba(0, 0, 0, 0.6); --popup-content-background-color: #fff;}.var-fade-enter-from,.var-fade-leave-to { opacity: 0;}.var-fade-enter-active,.var-fade-leave-active { transition: opacity 0.25s;}.var-pop-center-enter-from,.var-pop-center-leave-to { transform: scale(0.3);}.var-pop-center-enter-active,.var-pop-center-leave-active { transition: all 0.25s;}.var-pop-bottom-enter-from,.var-pop-bottom-leave-to { transform: translateY(100%);}.var-pop-bottom-enter-active,.var-pop-bottom-leave-active { transition: all 0.25s;}.var-pop-top-enter-from,.var-pop-top-leave-to { transform: translateY(-100%);}.var-pop-top-enter-active,.var-pop-top-leave-active { transition: all 0.25s;}.var-pop-left-enter-from,.var-pop-left-leave-to { transform: translateX(-100%);}.var-pop-left-enter-active,.var-pop-left-leave-active { transition: all 0.25s;}.var-pop-right-enter-from,.var-pop-right-leave-to { transform: translateX(100%);}.var-pop-right-enter-active,.var-pop-right-leave-active { transition: all 0.25s;}.var-popup { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0;}.var-popup__overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--popup-overlay-background-color); transition: all 0.25s;}.var-popup__content { overflow: auto; transition: all 0.25s;}.var-popup--content-background-color { background-color: var(--popup-content-background-color);}.var-popup--center { position: relative;}.var-popup--bottom { min-width: 100%; position: absolute; left: 0; bottom: 0;}.var-popup--top { min-width: 100%; position: absolute; left: 0; top: 0;}.var-popup--left { min-height: 100%; position: absolute; left: 0; top: 0;}.var-popup--right { min-height: 100%; position: absolute; right: 0; top: 0;}

package/lib/popup/props.js

@@ -38,6 +38,10 @@ var props = {
     type: Boolean,
     default: true
   },
+  defaultStyle: {
+    type: Boolean,
+    default: true
+  },
   teleport: {
     type: String
   },

package/lib/result/Empty.js

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.render = render;
+
+var _vue = require("vue");
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  viewBox: "-4 -4 32 32"
+};
+
+var _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("path", {
+  fill: "currentColor",
+  d: "M2,10.96C1.5,10.68 1.35,10.07 1.63,9.59L3.13,7C3.24,6.8 3.41,6.66 3.6,6.58L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.66,6.72 20.82,6.88 20.91,7.08L22.36,9.6C22.64,10.08 22.47,10.69 22,10.96L21,11.54V16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V10.96C2.7,11.13 2.32,11.14 2,10.96M12,4.15V4.15L12,10.85V10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V12.69L14,15.59C13.67,15.77 13.3,15.76 13,15.6V19.29L19,15.91M13.85,13.36L20.13,9.73L19.55,8.72L13.27,12.35L13.85,13.36Z"
+}, null, -1
+/* HOISTED */
+));
+
+var _hoisted_3 = [_hoisted_2];
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("svg", _hoisted_1, _hoisted_3);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render
+});
+
+exports.default = _default;

package/lib/result/Error.js

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.render = render;
+
+var _vue = require("vue");
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "2 2 20 20"
+};
+
+var _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("path", {
+  d: "M19,3V5H19V19M17,8.4L13.4,12L17,15.6L15.6,17L12,13.4L8.4,17L7,15.6L10.6,12L7,8.4L8.4,7L12,10.6L15.6,7L17,8.4Z"
+}, null, -1
+/* HOISTED */
+));
+
+var _hoisted_3 = [_hoisted_2];
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("svg", _hoisted_1, _hoisted_3);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render
+});
+
+exports.default = _default;

package/lib/result/Info.js

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.render = render;
+
+var _vue = require("vue");
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "2 3.6 20 20"
+};
+
+var _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("path", {
+  d: "M11,9H13V7H11M11,20H13V11H11V20Z"
+}, null, -1
+/* HOISTED */
+));
+
+var _hoisted_3 = [_hoisted_2];
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("svg", _hoisted_1, _hoisted_3);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render
+});
+
+exports.default = _default;

package/lib/result/Question.js

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.render = render;
+
+var _vue = require("vue");
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "-3 -3 30 30"
+};
+
+var _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/(0, _vue.createElementVNode)("path", {
+  d: "M10,19H13V22H10V19M12,2C17.35,2.22 19.68,7.62 16.5,11.67C15.67,12.67 14.33,13.33 13.67,14.17C13,15 13,16 13,17H10C10,15.33 10,13.92 10.67,12.92C11.33,11.92 12.67,11.33 13.5,10.67C15.92,8.43 15.32,5.26 12,5A3,3 0 0,0 9,8H6A6,6 0 0,1 12,2Z"
+}, null, -1
+/* HOISTED */
+));
+
+var _hoisted_3 = [_hoisted_2];
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("svg", _hoisted_1, _hoisted_3);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render
+});
+
+exports.default = _default;

package/lib/result/Result.js

@@ -0,0 +1,117 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+exports.render = render;
+
+var _vue = require("vue");
+
+var _shared = require("@varlet/shared");
+
+var _props = require("./props");
+
+var _components = require("../utils/components");
+
+var _elements = require("../utils/elements");
+
+var _Info = _interopRequireDefault(require("./Info.js"));
+
+var _Error = _interopRequireDefault(require("./Error.js"));
+
+var _Warning = _interopRequireDefault(require("./Warning.js"));
+
+var _Success = _interopRequireDefault(require("./Success.js"));
+
+var _Question = _interopRequireDefault(require("./Question.js"));
+
+var _Empty = _interopRequireDefault(require("./Empty.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var {
+  n,
+  classes
+} = (0, _components.createNamespace)('result');
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n(), _ctx.n('$--box')))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "image", {}, () => [_ctx.type ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('image-container'))
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.classes(_ctx.n('image'), _ctx.n(_ctx.type))),
+    style: (0, _vue.normalizeStyle)({
+      width: _ctx.circleSize,
+      height: _ctx.circleSize,
+      borderWidth: _ctx.borderSize
+    })
+  }, [((0, _vue.openBlock)(), (0, _vue.createBlock)((0, _vue.resolveDynamicComponent)(_ctx.type), {
+    "border-size": _ctx.borderSize,
+    animation: _ctx.animation
+  }, null, 8
+  /* PROPS */
+  , ["border-size", "animation"]))], 6
+  /* CLASS, STYLE */
+  )], 2
+  /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [_ctx.title ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('title'))
+  }, (0, _vue.toDisplayString)(_ctx.title), 3
+  /* TEXT, CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.renderSlot)(_ctx.$slots, "description", {}, () => [_ctx.description ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('description'))
+  }, (0, _vue.toDisplayString)(_ctx.description), 3
+  /* TEXT, CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)]), _ctx.$slots.footer ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(_ctx.n('footer'))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "footer")], 2
+  /* CLASS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarResult',
+  components: {
+    Info: _Info.default,
+    Success: _Success.default,
+    Warning: _Warning.default,
+    Error: _Error.default,
+    Question: _Question.default,
+    Empty: _Empty.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var circleSize = (0, _vue.computed)(() => {
+      var {
+        imageSize
+      } = props;
+      return "calc(" + (imageSize ? (0, _elements.toSizeUnit)(imageSize) : 'var(--result-image-size)') + " * 0.9)";
+    });
+    var borderSize = (0, _vue.computed)(() => {
+      var {
+        imageSize
+      } = props;
+      return "calc(" + (imageSize ? (0, _elements.toSizeUnit)(props.imageSize) : 'var(--result-image-size)') + " * 0.05)";
+    });
+    return {
+      n,
+      classes,
+      toNumber: _shared.toNumber,
+      toPxNum: _elements.toPxNum,
+      toSizeUnit: _elements.toSizeUnit,
+      circleSize,
+      borderSize
+    };
+  }
+
+});
+
+exports.default = _default;